/* =====================================================================
   Charisma Services — demo site design system
   Built on the Everyday Creatives starter. Blue and white palette.
   ===================================================================== */

:root {
  /* Colour: exactly 2 main + 3 sub + black + white. */
  --main-1: #123c6d;   /* deep navy blue — primary brand */
  --main-2: #2f7bf6;   /* bright blue — secondary / accent */
  --sub-1:  #f5f9fd;   /* page background */
  --sub-2:  #e4eefb;   /* soft section background */
  --sub-3:  #6fa8e0;   /* small highlights, hover */
  --black:  #101c2c;   /* text */
  --white:  #ffffff;

  /* Type: exactly 1 heading font + 1 body font. */
  --font-heading: "Poppins", "Segoe UI", sans-serif;
  --font-body: "Karla", "Segoe UI", sans-serif;

  /* Sizing: exactly one heading, one sub-heading, one body size. */
  --fs-heading: clamp(2.4rem, 5vw, 4rem);
  --fs-subheading: clamp(1.25rem, 2.4vw, 1.6rem);
  --fs-body: 1.0625rem;

  /* Layout */
  --container-max: 1180px;
  --gutter: clamp(1.1rem, 4vw, 3rem);
  --header-height: 76px;
  --radius: 14px;
  --shadow: 0 14px 40px rgba(18, 60, 109, 0.14);
  --transition: 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  /* Rendered height of .info-bar once revealed; JS keeps this in sync so
     the sticky header can sit flush beneath it with no gap/overlap. */
  --info-bar-offset: 0px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--black);
  background: var(--sub-1);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--main-1); text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: 1.1;
  margin: 0 0 0.5em;
  color: var(--main-1);
  font-weight: 600;
  text-wrap: balance;
}
h1, h2 { font-size: var(--fs-heading); }
h3 { font-size: var(--fs-subheading); }
p { margin: 0 0 1.1rem; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

/* Full-bleed banner photo: sits directly inside .section (a sibling of
   .container, not nested in it) so it already spans the full viewport
   width on its own — a plain 100% avoids the classic 100vw/scrollbar
   mismatch that left a sliver uncovered on one edge. Source is already
   pre-cropped to a banner aspect ratio. */
.full-bleed-banner {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1419 / 451;
  object-fit: cover;
}
/* Full-bleed map: sits directly inside .section (a sibling of .container,
   not nested in it), so a plain 100% already spans the full viewport width
   without the 100vw/scrollbar mismatch that a negative-margin breakout can
   leave as an overflowing sliver on one edge. */
.full-bleed-map {
  display: block;
  width: 100%;
  max-width: 100%;
  background: var(--sub-2);
  /* Leaflet's own internal panes/controls use z-index values up to ~1000
     (tiles, popups, zoom buttons), which would otherwise paint over the
     sticky header/info-bar as the map scrolls underneath them. Isolating
     this element contains Leaflet's stacking to inside the map itself, so
     it can never escape and cover page chrome outside it. */
  isolation: isolate;
  position: relative;
  z-index: 0;
}
.full-bleed-map .leaflet-container { width: 100%; height: 100%; font-family: var(--font-body); }
/* Permanent town-name labels on the coverage map's nearby-town pins. */
.town-label {
  background: var(--white);
  color: var(--main-1);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.2rem 0.55rem;
  border: none;
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.town-label::before { display: none; }
.section--soft { background: var(--sub-2); }
.section--dark { background: var(--main-1); color: var(--sub-1); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--white); }
.section-head { max-width: 700px; margin: 0 0 2.5rem; }
.section-head.center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sub-3);
  margin-bottom: 0.9rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--main-2); color: var(--white); }
.btn-primary:hover { background: var(--main-1); }
.btn-light { background: var(--white); color: var(--main-1); box-shadow: var(--shadow); }
.btn-outline { background: transparent; color: inherit; border-color: currentColor; }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; }
.btn-sm { padding: 0.55rem 1.1rem; font-size: 0.85rem; gap: 0.4rem; }

/* ---------- Grids ---------- */
.grid {
  display: grid;
  gap: 1.75rem;
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* Team grid: uses flex-wrap so an incomplete last row centers instead of
   sitting left-aligned in the leftover grid columns. */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
}
.team-grid .team-member { flex: 0 0 calc(25% - 1.3125rem); }
@media (max-width: 900px) {
  .team-grid .team-member { flex: 0 0 calc(50% - 0.875rem); }
}
@media (max-width: 600px) {
  .team-grid .team-member { flex: 0 0 100%; }
}

/* ---------- Cards (full border, never a single-side rail) ---------- */
.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  border: 1px solid rgba(18, 60, 109, 0.1);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform var(--transition);
}
.card:hover { transform: translateY(-6px); }
.card h3 { margin-bottom: 0.6rem; }
.card p:last-child { margin-bottom: 0; }

/* Compact variants: smaller footprint than the default card/section */
.section--compact { padding-block: clamp(2rem, 4vw, 3rem); }
.card--compact { padding: 1.25rem 1.25rem; }
.card--compact h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.card--compact p { font-size: 0.9rem; }

.quote-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2.2rem 2rem;
  border: 1px solid rgba(18, 60, 109, 0.1);
  box-shadow: var(--shadow);
}
.quote-card p { font-style: italic; }
.quote-card cite { display: block; margin-top: 1rem; font-style: normal; font-weight: 700; color: var(--main-1); }

/* ---------- Product grid (shop.html catalogue cards) ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid rgba(18, 60, 109, 0.1);
  box-shadow: var(--shadow);
  padding: 1rem;
  transition: transform var(--transition);
}
.product-card:hover { transform: translateY(-6px); }
.product-card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  margin-bottom: 0.75rem;
}
.product-card h3 {
  font-size: 0.92rem;
  line-height: 1.35;
  margin: 0 0 0.5rem;
  flex-grow: 1;
}
.product-card .product-price {
  margin: 0 0 0.75rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--main-2);
}
/* Anchor wrapping the image + name: plain block, no underline/colour change
   beyond what the image and h3 already render. */
.product-card-link {
  display: block;
  color: inherit;
}
/* Small round "+" quick-view trigger, pinned to a corner of the card. */
.product-info-btn {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--main-2);
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background var(--transition), transform var(--transition);
  z-index: 2;
}
.product-info-btn:hover { background: var(--main-1); transform: scale(1.08); }
.product-card .btn-sm { width: 100%; justify-content: center; }

/* ---------- Sale badge + struck-through pricing (Deals) ----------
   A proper full-shape pill chip (never a corner ribbon or single-sided
   accent stripe), positioned opposite the round quick-view "+" trigger
   so the two never collide on a product card. */
.badge-sale {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: var(--main-1);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: var(--shadow);
  z-index: 2;
}
/* Variant for use outside a card (product.html detail page), sitting
   inline above the price instead of pinned to a corner. */
.badge-sale--static {
  position: static;
  display: inline-flex;
  margin-bottom: 0.6rem;
}
.product-price-row { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
.price-original {
  text-decoration: line-through;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8em;
  color: var(--black);
  opacity: 0.5;
}
.price-current { color: var(--main-2); }

/* ---------- Bundle suggestions ("frequently paired together") ----------
   Curated, hand-picked pairings shown as a horizontal card: thumbnails of
   the items on the left, name/description/combined price + one "Add
   bundle to cart" button on the right. Reuses .card for the surface
   (full border, radius, shadow — no accent rail). */
.bundle-grid { display: grid; gap: 1.5rem; }
.bundle-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.75rem;
  align-items: center;
}
.bundle-items {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.bundle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 92px;
  text-align: center;
  color: inherit;
}
.bundle-item img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  background: var(--sub-1);
  border-radius: var(--radius);
  padding: 0.35rem;
}
.bundle-item span { font-size: 0.74rem; line-height: 1.3; }
.bundle-plus {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--sub-3);
}
.bundle-info h3 { margin-bottom: 0.35rem; }
.bundle-info p { font-size: 0.92rem; margin-bottom: 0.9rem; }
.bundle-price {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--main-2);
  margin: 0 0 1rem;
}
.bundle-price-note {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--black);
  opacity: 0.6;
  margin-left: 0.35rem;
}
@media (max-width: 720px) {
  .bundle-card { grid-template-columns: 1fr; text-align: center; }
  .bundle-items { justify-content: center; }
}

/* ---------- Service list: compact body text, not boxed cards ---------- */
/* Still used by home-care.html. */
.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 3rem;
}
.service-list li {
  padding-block: 0.85rem;
  border-bottom: 1px solid rgba(18, 60, 109, 0.12);
  line-height: 1.6;
}
.service-list strong { color: var(--main-1); }
@media (max-width: 700px) {
  .service-list { grid-template-columns: 1fr; }
}

/* ---------- Offer cards: "What we offer" service grid ---------- */
/* Static feature cards (icon + title + description all visible at once,
   no hover/flip interaction). Reuses .card for the surface (full border,
   var(--radius), var(--shadow)) and .grid/.grid--4 for the responsive
   4-column layout, with icon+title centred at the top of each card. */
.offer-card {
  text-align: center;
}
.offer-card svg { color: var(--main-2); margin-bottom: 0.9rem; }
.offer-card h3 { color: var(--main-1); }
.offer-card p { font-size: 0.95rem; line-height: 1.55; margin: 0; }

/* ---------- Rate list: price rows inside a .card ---------- */
.rate-list { list-style: none; margin: 0; padding: 0; }
.rate-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block: 0.6rem;
  border-bottom: 1px solid rgba(18, 60, 109, 0.1);
}
.rate-list li:last-child { border-bottom: none; }
.rate-list span { color: var(--black); }
.rate-list strong { color: var(--main-2); font-family: var(--font-heading); font-size: 1.05rem; }

/* ---------- FAQ accordion (stacked <details>/<summary>, full border on
   all sides, never a single-side accent rail) ---------- */
.faq-list { display: grid; gap: 1rem; }
.faq-item {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid rgba(18, 60, 109, 0.1);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--main-1);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--sub-2);
  color: var(--main-2);
  font-size: 1.1rem;
  line-height: 1.6rem;
  text-align: center;
  transition: transform var(--transition);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-answer { padding: 0 1.5rem 1.4rem; }
.faq-answer p { font-size: 0.95rem; margin: 0; }

/* ---------- CQC rating badge ----------
   Recreates the structure of CQC's own official rating widget (logo,
   service name, "CQC overall rating" label, tier-coloured rating, the
   inspection date, a link through to the report) because this preview
   sandbox blocks the network call CQC's real widget.js/JSONP endpoint
   needs to render. --cqc-good below is CQC's own official tier colour
   for a "Good" rating, read directly out of their published widget
   stylesheet (cqc.org.uk/_dp/build/widget/widget.css, rule
   ".cqc-widget-overall.good") — not an approximation. The logo is CQC's
   real, publicly-hosted asset (cqc.org.uk/_dp/build/widget/
   asset_cqclogo_update.png), the same file their widget serves to every
   provider embedding it, with a text fallback if it fails to load. */
:root {
  --cqc-good: #458F00;
}
.cqc-badge {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: var(--white);
  border: 1px solid rgba(18, 60, 109, 0.14);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.35rem 1.6rem 1.5rem;
  text-align: left;
  width: 100%;
  max-width: min(340px, 100%);
  margin-inline: auto;
}
.cqc-badge-logo-wrap {
  display: block;
  padding-bottom: 0.7rem;
  margin-bottom: 0.1rem;
  border-bottom: 1px solid rgba(18, 60, 109, 0.12);
}
.cqc-badge-logo { display: block; height: 34px; width: auto; }
.cqc-badge-logo-fallback {
  display: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.2;
  color: var(--main-1);
}
.cqc-badge-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--main-1);
}
.cqc-badge-rating-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--black);
  opacity: 0.55;
  margin-top: -0.1rem;
}
.cqc-badge-rating {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.cqc-badge-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cqc-good);
  flex-shrink: 0;
}
.cqc-badge-rating-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--black);
}
.cqc-badge-date { font-size: 0.82rem; color: var(--black); opacity: 0.7; }
.cqc-badge-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  margin-top: 0.3rem;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  background: var(--main-2);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
}
.cqc-badge-link:hover { background: var(--main-1); color: var(--white); }

/* ---------- Team member cards (photo + name/role caption) ---------- */
.team-member { margin: 0; }
.team-member img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.team-member figcaption { text-align: center; margin-top: 0.9rem; }
.team-member h3 { margin: 0 0 0.15rem; font-size: 1.1rem; }
.team-member figcaption p { margin: 0; font-size: 0.92rem; color: var(--sub-3); font-weight: 600; }

/* ---------- Image / logo placeholders ---------- */
.img-placeholder {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 0.3rem;
  min-height: 180px;
  padding: 1.25rem;
  border-radius: var(--radius);
  background: #6d6d6d;
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.3;
}
.img-placeholder small { font-weight: 400; font-size: 0.85rem; opacity: 0.85; }

.card-media {
  margin: -2rem -1.8rem 1.4rem;
  min-height: 160px;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* ---------- Top info bar ---------- */
/* Hidden at page load. JS adds .show once the user has scrolled past the
   hero, at which point the info bar is fixed to the very top of the
   viewport (above the sticky header) and animates into view. JS also keeps
   --info-bar-offset (below) in sync with this element's rendered height so
   .site-header can stick directly beneath it with no gap/overlap. */
.info-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  background: var(--main-1);
  color: var(--sub-1);
  font-size: 0.85rem;
  overflow: hidden;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--transition), opacity var(--transition);
}
.info-bar.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.info-bar .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 0.5rem;
}
.info-bar a { color: var(--white); font-weight: 700; }
.info-bar-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* ---------- Header group: .site-header is position:sticky and reads
   --info-bar-offset for its `top` value, so it sticks flush under the info
   bar once JS reveals it (0px, i.e. the very top of the viewport, while
   the info bar is hidden). ---------- */
.site-header-group {
  display: contents;
}
.site-header {
  position: sticky;
  top: var(--info-bar-offset, 0px);
  z-index: 100;
  padding-block: 0.9rem;
  transition: background var(--transition), box-shadow var(--transition), padding var(--transition), top var(--transition);
}
.site-header.transparent { background: transparent; }
.site-header.solid,
.site-header.scrolled {
  background: var(--white);
  box-shadow: 0 6px 24px rgba(18, 60, 109, 0.12);
  padding-block: 0.55rem;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--main-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
}
.site-header.solid .brand-text,
.site-header.scrolled .brand-text { color: var(--main-2); }

/* Real logo icon (flower only, cropped from the source lockup), used as a
   mask so it can be recoloured via background-color. Kept the same brand
   blue regardless of header state (transparent/solid/scrolled) so it never
   flips to white over the hero. The wordmark is real text (see .brand-text)
   so it can stay on one line regardless of the source asset's own layout. */
.brand-icon {
  display: inline-block;
  flex: none;
  height: 40px;
  aspect-ratio: 1052 / 600;
  background-color: var(--main-2);
  -webkit-mask: url('../images/logo-icon.png') no-repeat center / contain;
  mask: url('../images/logo-icon.png') no-repeat center / contain;
  transition: height var(--transition), background-color var(--transition);
}
.site-header.solid .brand-icon,
.site-header.scrolled .brand-icon { height: 34px; background-color: var(--main-2); }
.footer-brand .brand-icon { height: 48px; }

.brand-text { white-space: nowrap; }
.footer-brand .brand { font-size: 1.6rem; }
.footer-brand .brand-text { color: var(--sub-3); }

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}
.main-nav a { font-weight: 600; color: var(--main-2); }
.main-nav a.nav-cta {
  background: var(--black);
  color: var(--white) !important;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
}
.site-header.transparent .main-nav a.nav-cta { color: var(--white) !important; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  width: 46px; height: 46px;
  background: transparent; border: none; cursor: pointer;
  z-index: 120;
}
.nav-toggle-bar {
  width: 28px; height: 3px; border-radius: 3px;
  background: var(--main-2);
  transition: transform var(--transition), opacity var(--transition), background var(--transition);
}

/* Groups the cart icon and hamburger together at the end of the header,
   so they stay flush right of each other regardless of how much space
   the nav takes up. */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Cart icon button: same footprint as .nav-toggle so the two sit flush
   in the header at any viewport width. */
.cart-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--main-2);
  z-index: 120;
  transition: color var(--transition);
}

/* Small circular item-count badge, top-right of the icon. Hidden by
   default (opacity/scale) and only revealed once the cart has items,
   so an empty cart doesn't show a "0" pill. */
.cart-count {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--main-2);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  line-height: 18px;
  text-align: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--transition), transform var(--transition);
}
.cart-count.show { opacity: 1; transform: scale(1); }

/* ---------- Full-height splash ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* progressive enhancement: accounts for mobile browser chrome */
  display: flex;
  align-items: center;
  color: var(--sub-1);
  /* Darker, moodier navy gradient: mix the existing --main-2/--main-1 tokens
     with black rather than introducing a new colour token. */
  background: linear-gradient(150deg, color-mix(in srgb, var(--main-2) 65%, black), color-mix(in srgb, var(--main-1) 70%, black));
}
.hero-inner { max-width: 760px; padding-block: calc(var(--header-height) + 3rem) 3rem; }
.hero h1 { color: var(--white); font-size: clamp(2.6rem, 7vw, 5.5rem); }
.hero .lead { font-size: 1.2rem; max-width: 620px; }

/* Photo variant of the splash: real photo + dark overlay for legible text */
.hero--photo {
  background-image: linear-gradient(180deg, rgba(16, 28, 44, 0.72), rgba(16, 28, 44, 0.55) 55%, rgba(16, 28, 44, 0.85)), var(--hero-image);
  background-size: cover;
  background-position: center;
}

/* ---------- Intro split (photo + two-column text) ---------- */
.intro-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: center;
}
.intro-split-text h2 { max-width: 600px; margin-bottom: 0; }
.intro-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1.25rem;
}
.intro-columns h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.intro-columns p { margin: 0; font-size: 0.92rem; line-height: 1.55; }
.intro-split-photo img {
  width: 100%;
  max-height: 320px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  aspect-ratio: 4/5;
  object-fit: cover;
}
@media (max-width: 860px) {
  .intro-split { grid-template-columns: 1fr; }
  .intro-columns { grid-template-columns: 1fr; }
}

/* ---------- Sub-page hero ---------- */
.page-hero {
  background: var(--main-1);
  color: var(--sub-1);
  padding-top: calc(var(--header-height) + 1.75rem);
  padding-bottom: 1.75rem;
  text-align: center;
}
.page-hero h1 { color: var(--white); }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: rgba(255, 255, 255, 0.82); }
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
}
.footer-brand p { margin-top: 0.8rem; }
.footer-col h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub-3);
  margin: 0 0 1.1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.footer-col a { color: rgba(255, 255, 255, 0.82); }
.footer-col p { margin: 0 0 0.65rem; }
.social-links { display: flex; gap: 0.8rem; }
.social-links a {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.08);
  transition: background var(--transition);
}
.social-links a:hover { background: var(--main-2); }
/* ---------- WhatsApp sticker ----------
   A single reusable "chat with us" badge used everywhere the site links out
   to WhatsApp (footer, dark CTA banners, contact page), replacing the old
   plain text buttons so WhatsApp is represented the same way site-wide.
   --whatsapp-green is WhatsApp's own official brand colour, used only for
   this one third-party indicator so it stays instantly recognisable — the
   same narrow exception already made for the CQC rating dot above. */
:root {
  --whatsapp-green: #25d366;
}
.whatsapp-sticker {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 1.1rem 0.4rem 0.4rem;
  background: var(--white);
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--main-1);
  transition: var(--transition);
}
.whatsapp-sticker:hover { transform: translateY(-3px); box-shadow: 0 18px 46px rgba(18, 60, 109, 0.22); }
.whatsapp-sticker-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--whatsapp-green);
  color: var(--white);
  flex-shrink: 0;
}
.whatsapp-sticker-icon svg { width: 20px; height: 20px; }
.footer-col .whatsapp-sticker {
  margin-top: 0.9rem;
  /* .footer-col a sets a translucent white for footer links; this beats
     that on specificity so the sticker's label stays navy-on-white. */
  color: var(--main-1);
}

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.5rem;
  font-size: 0.9rem;
}
.footer-bottom a { color: var(--sub-3); font-weight: 700; }

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%) translateY(160%);
  z-index: 200;
  width: min(680px, calc(100% - 2rem));
  background: var(--white);
  color: var(--black);
  border-radius: var(--radius);
  border: 1px solid rgba(18, 60, 109, 0.12);
  box-shadow: 0 20px 50px rgba(16, 28, 44, 0.28);
  padding: 1.3rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.cookie-banner.show { transform: translateX(-50%) translateY(0); }
.cookie-banner p { margin: 0; flex: 1 1 280px; font-size: 0.92rem; }
.cookie-actions { display: flex; gap: 0.6rem; }

/* ---------- Cart drawer + overlay (shop.html) ---------- */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 28, 44, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
  z-index: 205;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: min(400px, 100vw);
  background: var(--white);
  box-shadow: var(--shadow);
  transform: translateX(100%);
  transition: transform var(--transition);
  z-index: 210;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.cart-drawer.open { transform: translateX(0); }
.cart-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 1.5rem;
  border-bottom: 1px solid rgba(18, 60, 109, 0.1);
}
.cart-drawer-head h2 { margin: 0; font-size: var(--fs-subheading); }
.cart-close-btn,
.quick-view-close {
  background: var(--sub-2);
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--main-1);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background var(--transition), color var(--transition);
}
.cart-close-btn:hover,
.quick-view-close:hover { background: var(--main-2); color: var(--white); }
.cart-drawer-body { flex: 1; padding: 1.5rem; }
/* cart.js toggles a 'show' class on [data-cart-empty] / [data-cart-items]
   lines rather than writing inline styles, matching the #cartCount badge
   convention documented in js/cart.js. */
.cart-empty { display: none; color: var(--black); opacity: 0.7; margin: 0; }
.cart-empty.show { display: block; }
.cart-items { display: flex; flex-direction: column; gap: 1rem; }

/* Line items rendered into [data-cart-items] by js/cart.js at runtime. */
.cart-line {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  position: relative;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(18, 60, 109, 0.1);
}
.cart-line:last-child { border-bottom: none; padding-bottom: 0; }
.cart-line-img {
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: var(--sub-1);
  border-radius: var(--radius);
  padding: 0.3rem;
}
.cart-line-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.cart-line-name { font-weight: 700; font-size: 0.92rem; }
.cart-line-price { font-size: 0.85rem; color: var(--sub-3); font-weight: 700; }
.cart-line-stepper { display: flex; align-items: center; gap: 0.5rem; }
.cart-line-stepper button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--sub-2);
  color: var(--main-1);
  font-size: 1rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.cart-line-stepper button:hover { background: var(--main-2); color: var(--white); }
.cart-line-qty { min-width: 1.4rem; text-align: center; font-weight: 700; }
.cart-line-total {
  flex: none;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--main-2);
  padding-right: 1.6rem;
}
.cart-line-remove {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  color: var(--sub-3);
  font-size: 1.1rem;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background var(--transition), color var(--transition);
}
.cart-line-remove:hover { background: var(--sub-2); color: var(--main-1); }
.cart-drawer-foot {
  padding: 1.5rem;
  border-top: 1px solid rgba(18, 60, 109, 0.1);
}
.cart-subtotal-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--main-1);
}
.cart-checkout-btn { width: 100%; justify-content: center; }

/* ---------- Quick-view modal (shop.html) ---------- */
.quick-view-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.quick-view-modal.open { opacity: 1; pointer-events: auto; }
.quick-view-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 28, 44, 0.55);
}
.quick-view-panel {
  position: relative;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: min(720px, 100%);
  max-height: min(640px, 88vh);
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transform: translateY(16px) scale(0.98);
  transition: transform var(--transition);
}
.quick-view-modal.open .quick-view-panel { transform: none; }
.quick-view-media {
  background: var(--sub-1);
  display: grid;
  place-items: center;
  padding: 2rem;
}
.quick-view-media img { width: 100%; max-width: 280px; aspect-ratio: 1/1; object-fit: contain; }
.quick-view-info { padding: 2.4rem 2rem 2rem 1.5rem; display: flex; flex-direction: column; }
.quick-view-info h3 { margin-bottom: 0.4rem; }
.quick-view-info .product-price { font-size: 1.3rem; margin: 0 0 1.2rem; }
.quick-view-close { position: absolute; top: 0.8rem; right: 0.8rem; z-index: 2; }
.quick-view-form { display: flex; align-items: center; gap: 0.8rem; margin-top: auto; flex-wrap: wrap; }
.quick-view-form label { font-weight: 700; color: var(--main-1); }
.quick-view-form input[type="number"] {
  width: 68px;
  padding: 0.6rem;
  border-radius: var(--radius);
  border: 1px solid rgba(18, 60, 109, 0.2);
  font-family: var(--font-body);
  font-size: 1rem;
  text-align: center;
}
@media (max-width: 700px) {
  .quick-view-panel { grid-template-columns: 1fr; }
  .quick-view-media { padding: 1.5rem; }
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s var(--transition); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 82vw);
    background: var(--main-1);
    transform: translateX(100%);
    transition: transform var(--transition);
    padding: calc(var(--header-height) + 1rem) 2rem 2rem;
    box-shadow: -20px 0 50px rgba(16, 28, 44, 0.3);
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav ul { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .main-nav a, .site-header.transparent .main-nav a { color: var(--sub-1); font-size: 1.3rem; font-family: var(--font-heading); }

  .nav-toggle.open .nav-toggle-bar { background: var(--sub-1); }
  .nav-toggle.open .nav-toggle-bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .nav-toggle.open .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav-toggle.open .nav-toggle-bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

  .footer-inner { grid-template-columns: 1fr 1fr; }
  .info-bar-links { gap: 1rem; }
}

@media (max-width: 560px) {
  .footer-inner { grid-template-columns: 1fr; }
  .info-bar .container { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   Shop page: search + category filter bar (shop.html only)
   Sticky bar sits directly beneath .site-header. js/shop-filters.js keeps
   --shop-filter-offset in sync with the header's real rendered bottom
   edge (which itself shifts as --info-bar-offset changes), so this bar
   sticks flush under the header at every scroll position without a
   hardcoded pixel offset.
   ===================================================================== */
.shop-filter-bar {
  position: sticky;
  top: var(--shop-filter-offset, 76px);
  z-index: 90;
  background: var(--white);
  border-bottom: 1px solid rgba(18, 60, 109, 0.12);
  box-shadow: var(--shadow);
}
.shop-filter-bar .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding-block: 0.9rem;
}
.shop-filter-search {
  flex: 1 1 240px;
  min-width: 0;
  padding: 0.65rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(18, 60, 109, 0.2);
  font-family: inherit;
  font-size: 1rem;
  color: var(--black);
  background: var(--sub-1);
}
.shop-filter-search:focus,
.shop-filter-category:focus {
  outline: 2px solid var(--main-2);
  outline-offset: 1px;
}
.shop-filter-category {
  flex: 0 1 220px;
  min-width: 0;
  padding: 0.65rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(18, 60, 109, 0.2);
  font-family: inherit;
  font-size: 1rem;
  color: var(--black);
  background: var(--sub-1);
}
.shop-filter-empty {
  text-align: center;
  padding-block: 3rem;
  color: var(--black);
  font-family: var(--font-heading);
  font-size: var(--fs-subheading);
}
.is-hidden {
  display: none !important;
}
@media (max-width: 560px) {
  .shop-filter-bar .container { flex-direction: column; align-items: stretch; }
  .shop-filter-search,
  .shop-filter-category { flex: 1 1 auto; }
}