/* ==========================================================================
   TINY TRAVELLERS — THEME GLUE
   --------------------------------------------------------------------------
   The ONLY stylesheet authored by the theme. Loads after tokens.css and
   components.css (the brand source of truth, which must not be edited).

   Rules (see .claude/rules/design-system.md):
     - No hex codes, no magic brand values. Use tokens:
       var(--*-color), var(--space-*), var(--radius-*), var(--fs-*), etc.
     - No new tt- component classes. Layout-only, non-prefixed class names.
     - Use semantic token aliases (var(--text-primary)) over primitives.

   Contents:
     1. Base / document
     2. Accessibility helpers (skip link, sr-only)
     3. Layout primitives (container, main)
     4. Site header (utility bar, branding, nav, actions, mobile menu)
     5. Site footer
     6. Generic page template
   ========================================================================== */

/* ==========================================================================
   1. BASE / DOCUMENT
   ========================================================================== */
body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-primary);
  font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg { max-width: 100%; height: auto; }

a { color: var(--text-link); }

/* Layout wrapper so the sticky header + footer pin to the viewport edges and
   the content fills the space between on short pages. */
.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ==========================================================================
   2. ACCESSIBILITY HELPERS
   ========================================================================== */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute;
  word-wrap: normal !important;
}

.skip-link {
  position: absolute;
  left: var(--space-xs);
  top: calc(-1 * var(--space-6xl));
  z-index: var(--z-toast);
  padding: var(--space-xs) var(--space-md);
  background: var(--surface-raised-alt);
  color: var(--text-link);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.skip-link:focus { top: var(--space-xs); }

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */
/* Page content max-width. The design system's --container token is 1280px;
   the project calls for a wider 1560px page container, set here as theme glue
   (tokens.css is not modified). */
:root {
  --tt-page-max: 1560px;   /* normal page container */
  --tt-footer-max: 1120px; /* footer is deliberately narrower than the page */
}

.container {
  width: 100%;
  max-width: var(--tt-page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-main { flex: 1 0 auto; }

/* ==========================================================================
   4. SITE HEADER
   --------------------------------------------------------------------------
   Single clean row on cream: nav (left) · logo (centre) · actions (right).
   (Sticky-on-scroll behaviour is an M9 decision — see docs/decisions.md.)
   ========================================================================== */
.site-header {
  background: var(--surface-base);
  border-bottom: 1px solid var(--border-subtle);
}

/* --- Header inner: nav / brand / actions ---
   Three zones via named areas. The centre column is auto-width so the logo
   sits dead-centre between two equal 1fr side columns. On mobile the nav is
   taken out of flow (absolute) and the toggle fills the same 'nav' area. */
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "nav brand actions";
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  /* Matches the stack's height transition — untransitioned, this snaps 8px. */
  transition: padding var(--dur-slow) var(--ease-in-out);
}
.site-nav { grid-area: nav; justify-self: start; }
.nav-toggle { grid-area: nav; justify-self: start; }
/* Flex (not block) so the inline-flex branding has no baseline descender gap and
   stays vertically centred within the row. */
.site-branding-wrap { grid-area: brand; justify-self: center; display: flex; align-items: center; }
.site-actions { grid-area: actions; justify-self: end; }

/* --- Branding --- */
.site-branding {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xs);
  text-decoration: none;
  line-height: var(--lh-tight);
}
.site-branding__name {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  color: var(--text-brand);
  letter-spacing: var(--ls-tight);
}
.site-branding__tagline {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.site-branding .custom-logo {
  display: block;
  width: auto;
  height: clamp(3.5rem, 2.5rem + 3vw, 6rem);
}
/* The stack has an explicit height (transitions on scroll). The full lockup fills
   it; the wordmark overlays it (absolute), centred, and crossfades in. Both being
   centred on the same box keeps everything vertically aligned. */
.site-branding__stack {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(3.5rem, 2.5rem + 3vw, 6rem);
  /* ease-in-out, not ease-out: the latter spends 93% of its travel in the first
     third, which reads as a snap. */
  transition: height var(--dur-slow) var(--ease-in-out);
}
.site-branding__logo--full {
  display: block;
  height: 100%;
  width: auto;
  /* Returning to the top: the wordmark leaves first, then the lockup fades in.
     The delay is shorter than the fade so the two overlap rather than leaving a
     gap with neither logo visible. */
  transition: opacity var(--dur-base) var(--ease-in-out) var(--dur-fast);
}
.site-branding__logo--txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 2.5rem; /* ~100px wide at the wordmark's aspect ratio */
  width: auto;
  /* Without this, the global `img { max-width: 100% }` reset caps the wordmark to
     the collapsed lockup's width (~64px) and squashes it. */
  max-width: none;
  opacity: 0;
  pointer-events: none;
  /* Returning to the top: the wordmark fades out first (no delay). */
  transition: opacity var(--dur-base) var(--ease-in-out);
}

/* Mobile: just the wordmark — larger and vertically centred. */
@media (max-width: 63.99rem) {
  .site-branding__logo--full { display: none; }
  .site-branding__stack { height: auto; }
  .site-branding__logo--txt {
    position: static;
    transform: none;
    opacity: 1;
    height: clamp(2.5rem, 1.9rem + 1.9vw, 3.125rem);
  }
}

/* Desktop: condense on scroll — slim the padding and collapse/fade the lockup to
   the wordmark. Stack height matches the wordmark so it stays centred. */
@media (min-width: 64rem) {
  .site-header.is-condensed .site-header__inner { padding-block: var(--space-md); }
  .site-header.is-condensed .site-branding__stack { height: 2.75rem; }
  /* Condensing: the lockup leaves first (no delay), then the wordmark fades in. */
  .site-header.is-condensed .site-branding__logo--full { opacity: 0; transition: opacity var(--dur-base) var(--ease-in-out); }
  .site-header.is-condensed .site-branding__logo--txt { opacity: 1; transition: opacity var(--dur-base) var(--ease-in-out) var(--dur-fast); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__inner,
  .site-branding__stack,
  .site-branding__logo--full,
  .site-branding__logo--txt { transition: none; }
}

/* --- Primary navigation (desktop) --- */
.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xl);
}
.nav-item { position: static; }
.nav-item__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding-block: var(--space-sm);
  font: var(--fw-semibold) var(--fs-body)/1 var(--font-body);
  color: var(--text-strong);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
  /* Keep triggers above every mega panel's full-width hover bridge, so you can
     move straight from one mega item to the next (the short condensed header
     otherwise lets a bridge overlap the neighbouring triggers). */
  position: relative;
  z-index: calc(var(--z-overlay) + 1);
}
.nav-item__link:hover,
.nav-item.current-menu-item > .nav-item__link { color: var(--text-link); }
.nav-item__chevron { transition: transform var(--dur-base) var(--ease-out); }
.nav-item--mega:hover .nav-item__chevron,
.nav-item--mega:focus-within .nav-item__chevron { transform: rotate(180deg); }

/* --- Header actions (search + account + cart) --- */
.site-actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
/* The two icon links form a tight pair, set apart from the search. */
.site-actions__icons {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

/* Pill catalogue search (bespoke layout — the tt-input component is squared,
   so the rounded header search is built from layout primitives + tokens). */
.site-search { position: relative; display: none; 
  max-width: 250px; }
@media (min-width: 64rem) {
  .site-search { display: block; width: clamp(13rem, 18vw, 22rem); }
}
.site-search__input {
  width: 100%;
  font: var(--fw-regular) var(--fs-body-sm)/1 var(--font-body);
  color: var(--text-primary);
  background: var(--surface-raised-alt);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: var(--space-sm) var(--space-2xl) var(--space-sm) var(--space-lg);
  min-height: 44px;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.site-search__input::placeholder { color: var(--text-placeholder); }
.site-search__input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}
.site-search__btn {
  position: absolute;
  right: var(--space-xs);
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--text-brand);
  border-radius: var(--radius-round);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-search__btn:hover { color: var(--text-link); }
.site-search__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Account + cart icon links (filled, brand terracotta) */
.site-actions__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-round);
  color: var(--accent-primary);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.site-actions__link:hover { background: var(--surface-sunken); }
.site-actions__link:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.site-actions__count {
  position: absolute;
  top: var(--space-2xs);
  right: var(--space-2xs);
  min-width: 1.05rem;
  height: 1.05rem;
  padding-inline: var(--space-3xs);
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--accent-calm);
  color: var(--text-on-accent);
  font: var(--fw-bold) var(--fs-eyebrow)/1 var(--font-body);
  /* ring in the header colour so the count lifts cleanly off the basket */
  box-shadow: 0 0 0 2px var(--surface-base);
}

/* --- Mobile menu toggle --- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-strong);
  cursor: pointer;
}
.nav-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: var(--radius-pill);
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after  { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

/* --- Desktop mega menu --- */
/* Sticky header. position:sticky also serves as the containing block for the
   full-width mega panel (which is absolutely positioned to top:100%). */
.site-header { position: sticky; top: 0; z-index: var(--z-sticky); }
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: var(--z-overlay);
  /* Reads as the site background colour with a barely-there fabric texture:
     the tiled texture is almost fully washed out by a near-opaque tint layer.
     --mega-tint = panel colour; --mega-wash = how opaque the wash is (higher =
     fainter texture, e.g. 96% ≈ a whisper). */
  --mega-tint: var(--surface-base);
  --mega-wash: 82%;
  background-color: var(--mega-tint);
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--mega-tint) var(--mega-wash), transparent),
      color-mix(in srgb, var(--mega-tint) var(--mega-wash), transparent)
    ),
    url("/wp-content/uploads/texture.jpg");
  background-repeat: no-repeat, repeat;
  background-position: center, top left;
  background-size: cover, 360px auto;
  border-bottom: 1px solid #eee9de;
  opacity: 0;

  visibility: hidden;
  transform: translateY(var(--space-2xs));
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}
/* Invisible hover bridge: lets the cursor travel from the trigger down to the
   panel without crossing a dead gap (which would close the menu). Only active
   while the panel is open, since it inherits the panel's hidden visibility. */
.mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--space-2xl);
}
.nav-item--mega:hover > .mega,
.nav-item--mega:focus-within > .mega,
.nav-item--mega.is-open > .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* While a mega menu is open, fade the rest of the page back so the panel is the
   focus. The header (which contains the panel) is left untouched. */
.site-main,
.site-footer { transition: opacity var(--dur-slow) var(--ease-out); }
.site:has(.nav-item--mega:hover, .nav-item--mega:focus-within, .nav-item--mega.is-open) .site-main,
.site:has(.nav-item--mega:hover, .nav-item--mega:focus-within, .nav-item--mega.is-open) .site-footer {
  opacity: 0.1;
}
.mega__inner {
  display: flex;
  align-items: stretch;
  gap: var(--space-2xl);
  padding-block: var(--space-xl);
}
.mega__list {
  /* Grow to fill the width left of the image. */
  flex: 1 1 auto;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-xl);
  row-gap: var(--space-3xs);
  align-content: start;
}
.mega__link {
  position: relative;
  display: block;
  padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-2xs);
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle); /* faint underline */
}
/* Accent line that draws left → right on hover / focus / active. */
.mega__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px; /* sits over the faint underline */
  width: 0;
  height: 2px;
  background: var(--accent-primary);
  transition: width var(--dur-base) var(--ease-out);
}
/* Chevron that fades + slides in on the right. */
.mega__link::before {
  content: "";
  position: absolute;
  right: var(--space-sm);
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-top: 2px solid var(--accent-primary);
  border-right: 2px solid var(--accent-primary);
  transform: translateX(calc(-1 * var(--space-2xs))) translateY(-50%) rotate(45deg);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.mega__link:hover::after,
.mega__link:focus-visible::after,
.mega__link.is-active::after { width: 100%; }
.mega__link:hover::before,
.mega__link:focus-visible::before,
.mega__link.is-active::before {
  opacity: 1;
  transform: translateX(0) translateY(-50%) rotate(45deg);
}
.mega__link:focus-visible { outline: none; }
.mega__link:focus-visible .mega__title { color: var(--text-link); }
.mega__title {
  display: block;
  font: var(--fw-semibold) var(--fs-body-lg)/1.3 var(--font-body);
  color: var(--text-primary);
}
.mega__desc {
  display: block;
  margin-top: var(--space-3xs);
  font-size: var(--fs-caption);
  line-height: var(--lh-heading);
  color: var(--text-muted);
}
/* Square image, sized to match the height of the menu-item list.
   align-self:stretch makes the height track the list; navigation.js sets the
   width equal to that height so it's a true 1:1 square. The 20rem width is a
   no-JS fallback. */
.mega__media {
  position: relative;
  flex: 0 0 auto;
  /* Height tracks the two-column list; navigation.js sets the width equal to
     that height for a true 1:1 square. aspect-ratio keeps it square before JS
     runs and if JS is unavailable. The list fills the rest, so this sits hard
     against the right edge of the container. */
  align-self: stretch;
  aspect-ratio: 1 / 1;
  width: 20rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-terracotta);
}
/* Each preview is a link to its menu item; only the active one is visible and
   clickable (inactive ones are faded out and ignore pointer events). */
.mega__img {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.03);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.mega__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mega__img.is-active { opacity: 1; transform: scale(1); pointer-events: auto; }

/* Bundles mega — a row of four 1:1 tiles (product previews + a "view all"). */
.mega--bundles .mega__inner { display: block; }
.bundle-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}
.bundle-tile__link {
  display: grid;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--text-primary);
}
.bundle-tile__link:focus-visible { outline: none; }
.bundle-tile__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
}
.bundle-tile__link:focus-visible .bundle-tile__media { box-shadow: var(--shadow-focus); }
.bundle-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-base) var(--ease-out);
}
.bundle-tile__link:hover .bundle-tile__media img { transform: scale(1.05); }
.bundle-tile__label {
  font: var(--fw-semibold) var(--fs-body)/1.3 var(--font-body);
  color: var(--text-primary);
  text-align: center;
}
.bundle-tile__link:hover .bundle-tile__label { color: var(--text-link); }
/* The "view all" tile: a peach square with an arrow. */
.bundle-tile--all .bundle-tile__media {
  display: grid;
  place-items: center;
  background: var(--accent-primary);
  color: var(--surface-band-peach);
  border-color: transparent;
  transition: background var(--dur-fast) var(--ease-out);
}
.bundle-tile--all .bundle-tile__link:hover .bundle-tile__media { background: var(--surface-band-peach); color: var(--accent-primary); }

/* --- Header responsive visibility --- */
/* Mobile-first: the inline desktop nav is hidden; the mobile overlay is used. */
.site-nav { display: none; }
@media (min-width: 64rem) {
  .nav-toggle { display: none; }
  /* Nav fills the full header height so the hover area is continuous down to
     the mega panel (no dead gap that would close it). */
  .site-nav { display: block; align-self: stretch; }
  .site-nav__list { height: 100%; align-items: stretch; }
  .nav-item { display: flex; }
  .nav-item__link { height: 100%; }
}

/* ==========================================================================
   4b. MOBILE OVERLAY MENU (full-screen drill-in)
   ========================================================================== */
body.is-menu-open { overflow: hidden; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--surface-base);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--space-lg));
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}
.mobile-menu[data-state="open"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-menu__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 64px;
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
}
.mobile-menu__title {
  font: var(--fw-semibold) var(--fs-h5)/1 var(--font-body);
  color: var(--text-primary);
}
.mobile-menu__back,
.mobile-menu__close {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding: var(--space-2xs) var(--space-xs);
  background: transparent;
  border: 0;
  color: var(--text-strong);
  font: var(--fw-medium) var(--fs-body-sm)/1 var(--font-body);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.mobile-menu__back:focus-visible,
.mobile-menu__close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.mobile-menu__back[hidden] { display: none; }

.mobile-menu__viewport {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}
.mobile-menu__panel {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding-block: var(--space-sm);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface-base);
}
.mobile-menu__panel--sub {
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.mobile-menu__panel--sub.is-active { transform: translateX(0); visibility: visible; }

.mobile-menu__row + .mobile-menu__row { border-top: 1px solid var(--border-subtle); }
.mobile-menu__drill,
.mobile-menu__top-link,
.mobile-menu__child {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md) var(--space-3xs);
  background: transparent;
  border: 0;
  text-align: left;
  text-decoration: none;
  color: var(--text-primary);
  font: var(--fw-medium) var(--fs-body-lg)/1.2 var(--font-body);
  cursor: pointer;
}
.mobile-menu__drill { justify-content: space-between; }
.mobile-menu__drill svg { color: var(--text-muted); flex: 0 0 auto; }
.mobile-menu__all {
  display: inline-block;
  padding: var(--space-md) var(--space-3xs) var(--space-sm);
  font: var(--fw-semibold) var(--fs-eyebrow)/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-link);
  text-decoration: none;
}
.mobile-menu__thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-sunken);
}
.mobile-menu__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mobile-menu__child-text { display: grid; gap: var(--space-3xs); }
.mobile-menu__child-title { font-weight: var(--fw-semibold); color: var(--text-primary); }
.mobile-menu__child-desc {
  font: var(--fw-regular) var(--fs-body-sm)/1.3 var(--font-body);
  color: var(--text-muted);
}
@media (min-width: 64rem) {
  .mobile-menu { display: none; }
}

/* ==========================================================================
   5. SITE FOOTER
   ========================================================================== */
/* The footer uses a narrower container than the page, with the roundel logo
   straddling its top edge (offset up by 50% into the section above). */
.site-footer {
  position: relative;
  flex-shrink: 0;
  background: var(--surface-base);
  padding-top: clamp(var(--space-4xl), 8vw, var(--space-5xl));
  padding-bottom: var(--space-xl);
}
.site-footer__inner {
  width: 100%;
  max-width: var(--tt-footer-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl) var(--space-lg);
}
@media (min-width: 48rem) {
  .site-footer__cols { gap: var(--space-2xl); }
}
@media (min-width: 64rem) {
  .site-footer__cols { grid-template-columns: repeat(4, 1fr); }
}

.footer-col__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h5);
  color: var(--text-primary);
  margin: 0 0 var(--space-md);
}

/* Contact column */
.footer-contact__list {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  display: grid;
  gap: var(--space-xs);
  font-size: var(--fs-body);
  color: var(--text-secondary);
}
.footer-contact__list a { color: var(--text-secondary); text-decoration: none; }
.footer-contact__list a:hover { color: var(--text-link); }

.footer-social {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.footer-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  background: var(--surface-sunken);
  color: var(--text-strong);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.footer-social__link:hover { background: var(--surface-band-peach); color: var(--text-brand); }
.footer-social__link:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Footer link columns */
.footer-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
}
.footer-links__list a {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  text-decoration: none;
}
.footer-links__list a:hover { color: var(--text-link); }

/* Roundel brand mark, straddling the footer's top edge */
.site-footer__brand {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: var(--surface-base);
  border-radius: var(--radius-round);
  padding: var(--space-sm);
}
.site-footer__brand a { display: block; text-decoration: none; }
.site-footer__brand-logo {
  display: block;
  width: clamp(7rem, 5rem + 4vw, 9rem);
  height: auto;
}
.site-footer__brand-badge {
  display: grid;
  place-items: center;
  width: clamp(7rem, 5rem + 4vw, 9rem);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-round);
  background: var(--surface-band-accent);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
}

/* Legal bar — note the gap above the divider, separating it from the columns */
.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
  text-align: center;
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}
.site-footer__legal p { margin: 0; }
@media (min-width: 48rem) {
  .site-footer__legal { flex-direction: row; justify-content: space-between; }
}

/* ==========================================================================
   6. GENERIC PAGE TEMPLATE
   ========================================================================== */
.page-article { 
  padding-block: var(--space-3xl);
  padding-bottom: var(--space-5xl);
}
.page-article__content { display: grid; gap: var(--space-md); }
.page-article__content > * { margin: 0; }

/* ==========================================================================
   7. SEARCH FORM (tt-search)
   --------------------------------------------------------------------------
   The tt-search component is an input with a trailing icon. This positions a
   real submit button where that icon sits — a layout addition, not a change
   to the component itself.
   ========================================================================== */
.search-submit-btn {
  position: absolute;
  right: var(--space-xs);
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-round);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.search-submit-btn:hover { color: var(--text-link); }
.search-submit-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ==========================================================================
   8. 404 / NOT FOUND
   ========================================================================== */
.error-404__inner {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--space-lg);
}
.error-404__text { max-width: 36rem; }
.error-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}
.error-404__search {
  width: 100%;
  max-width: 26rem;
  margin-top: var(--space-sm);
}

/* ==========================================================================
   9. HOME PAGE SECTIONS
   ========================================================================== */
.home-section { padding-block: var(--section-py); }
.home-section__head {
  max-width: 48rem;
  margin: 0 auto var(--space-2xl);
  text-align: center;
}
.home-section__sub { margin-top: var(--space-sm); color: var(--text-muted); }

.home-popular, .home-bundles { padding-top: var(--space-xl);}

 .home-section__head .home-section__sub {
  text-wrap: balance;
 }

@media (max-width: 48rem) {
 .home-section__head {
  margin: 0 auto var(--space-xl);
   }

   .home-popular, .home-bundles {
    padding-top: 0;
}
}


/* --- Hero --- */
.home-hero {
  position: relative;
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-2xl);
  text-align: center;
  overflow: hidden;
  min-height: calc(100vh - 150px);
}

/* Decorative corner squiggles — inline SVG, tint via `color` (currentColor). */
.hero-squiggle-def { position: absolute; }
.hero-squiggle {
  position: absolute;
  bottom: 0;
  z-index: 0;
  width: clamp(9rem, 18vw, 20rem);
  color: var(--accent-primary); /* tweak the tint here */
  opacity: 0.12;
  pointer-events: none;
}
.hero-squiggle svg { display: block; width: 100%; height: auto; }
.hero-squiggle--left  { left: 0; }
.hero-squiggle--right { right: 0; transform: scaleX(-1); }
.home-hero__inner {
  position: relative; /* keep hero content (incl. the date picker) above the
                         squiggles AND the bubbles */
  z-index: 2;
  max-width: none;
  display: grid;
  justify-items: center;
  gap: var(--space-lg);
  max-width: 120ch;
}
.home-hero__eyebrow { margin: 0; }
.home-hero__heading { margin: 0; font-size: var(--fs-h1); }
.home-hero__sub { max-width: 44rem; margin: 0; }

/* Availability search — placeholder for the booking plugin, styled as one
   unified white pill (toggle + date fields + button). */
.hero-search-wrap {
  position: relative;
  z-index: 5; /* lift the bar + its pop-out picker above the hero bubbles */
  margin-top: var(--space-md);
  margin-inline: auto;
  width: 100%;
  max-width: 62rem;
}
.hero-search {
  /* Shared control height — every element in the bar snaps to this (~56px). */
  --control-h: 3.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-xs);
  width: 100%;
  background: var(--surface-raised-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-xs);
  box-shadow: var(--shadow-xs);
}
/* Mobile-first: each group takes its own full-width row; the submit is always
   full width when it wraps. Desktop collapses to a single no-wrap row below. */
.hero-search__modes  { flex: 1 1 100%; }
.hero-search__dates  { flex: 1 1 100%; }
.hero-search__submit { flex: 1 1 100%; }

/* Mode toggle — a segmented control on a sunken track. The two options share a
   2-column grid so they are always equal width (matched to the wider label). */
.hero-search__modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: var(--space-3xs);
  min-height: var(--control-h);
  padding: var(--space-3xs);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}
.hero-search__mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-md) 0 var(--space-xs);
  font: var(--fw-semibold) var(--fs-body-sm)/1 var(--font-body);
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.hero-search__mode svg { color: currentColor; }
.hero-search__mode:hover { color: var(--text-secondary); }
.hero-search__mode.is-active {
  background: var(--surface-raised-alt);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
.hero-search__mode.is-active svg { color: var(--accent-primary); }
.hero-search__mode:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Date fields — transparent, bordered wells that open the pop-out range picker. */
.hero-search__dates {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
}
.hero-search__field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2xs);
  text-align: left;
  min-height: var(--control-h);
  box-sizing: border-box;
  background: transparent;
  border: 1px solid #eae5e5;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.hero-search__field:hover { border-color: var(--border-strong); }
.hero-search__field[aria-expanded="true"] { border-color: var(--accent-primary); }
.hero-search__field:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hero-search__label {
  font: var(--fw-semibold) var(--fs-xseyebrow)/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
}
.hero-search__value { font: var(--fw-medium) var(--fs-body-sm)/1 var(--font-body); color: var(--text-placeholder); }
.hero-search__field.is-filled .hero-search__value { color: var(--text-primary); }

/* Submit — matches the control height; slightly trimmed type + padding. */
.hero-search__submit {
  min-height: var(--control-h);
  padding: 0 var(--space-md);
  font-size: var(--fs-body-sm);
  white-space: nowrap;
}
/* CTA label swap — both labels occupy one grid cell so the button width stays
   fixed (sized to the wider label) when toggling; only the active one shows. */
.hero-search__submit-swap { display: grid; }
.hero-search__submit-label { grid-area: 1 / 1; }
.hero-search__submit-label[data-label="browse"] { visibility: hidden; }
.hero-search.is-browsing .hero-search__submit-label[data-label="dates"] { visibility: hidden; }
.hero-search.is-browsing .hero-search__submit-label[data-label="browse"] { visibility: visible; }

/* "Just Browsing" mode — dates are inert; the CTA recolours (see .tt-btn--ochre,
   toggled in home.js) and its label swaps to "Start Browsing". */
.hero-search.is-browsing .hero-search__dates {
  opacity: 0.45;
  pointer-events: none;
}

/* Desktop: one no-wrap row — modes and submit hug their content, the dates grow
   to fill the middle. The submit can never drop to its own line here. */
@media (min-width: 64rem) {
  .hero-search { flex-wrap: nowrap; align-items: stretch; }
  /* Width balance across the row: toggle a touch wider than the dates, the
     dates compromised to also give the CTA a little more room. min-widths are
     floors so labels never overflow. */
  .hero-search__modes  { flex: 1.45 1 0; min-width: 22rem; }
  .hero-search__dates  { flex: 1.14 1 0; min-width: 14rem; }
  .hero-search__submit { flex: 0.92 1 0; min-width: 13rem; }
}

/* ------------------------------------------------------------------
   Pop-out range date picker (AirBNB-style). Ported from the Hidden
   project's booking calendar; with no availability feed it runs as a
   plain future-date range picker. Driven by assets/js/booking-calendar.js.
   ------------------------------------------------------------------ */
.apt-datepicker {
  position: absolute;
  z-index: 60;
  top: calc(100% + var(--space-xs));
  left: 0;
  width: max-content;
  max-width: 92vw;
  background: var(--surface-raised-alt);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-lg);
}
.apt-datepicker[hidden] { display: none; }
.apt-datepicker__grids { display: flex; gap: var(--space-xl); }
.apt-datepicker__nav {
  position: absolute;
  top: var(--space-lg);
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-round);
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
}
.apt-datepicker__nav:hover { background: var(--surface-sunken); }
.apt-datepicker__nav[disabled] { opacity: 0.3; cursor: default; }
.apt-datepicker__nav--prev { left: var(--space-lg); }
.apt-datepicker__nav--next { right: var(--space-lg); }

.apt-cal { min-width: 15rem; }
.apt-cal__title {
  text-align: center;
  margin: 0 0 var(--space-sm);
  color: var(--text-primary);
  font: var(--fw-semibold) var(--fs-eyebrow)/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.archive-shop__availability .hero-search__field {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    /* Trim the vertical padding so the slightly shorter control height (below)
       governs, keeping fields and the Check button the same height. */
    padding-block: var(--space-xs);
}
.apt-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.apt-cal__dow { display: grid; place-items: center; height: 1.8rem; color: var(--text-muted); font-size: var(--fs-body-sm); }
.apt-cal__pad { aspect-ratio: 1; }
.apt-cal__day {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: transparent;
  border: none;
  border-radius: var(--radius-round);
  cursor: pointer;
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1;
}
.apt-cal__num { font-size: var(--fs-body-sm); }
.apt-cal__price { font-size: 0.6rem; color: var(--text-muted); }
.apt-cal__day:not(.is-disabled):hover { background: var(--text-accent); }
.apt-cal__day.is-today .apt-cal__num { text-decoration: underline; }
.apt-cal__day.is-disabled { color: var(--text-muted); text-decoration: line-through; cursor: default; opacity: 0.5; }
.apt-cal__day.is-in-range { background: var(--surface-band-peach); border-radius: 0; }
.apt-cal__day.is-start,
.apt-cal__day.is-end { background: var(--accent-primary); color: var(--text-on-accent); }
.apt-cal__day.is-start .apt-cal__price,
.apt-cal__day.is-end .apt-cal__price { color: var(--text-on-accent); }
.apt-cal__day.is-start { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.apt-cal__day.is-end { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.apt-cal__day:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 1px; }

.apt-datepicker__note { margin: var(--space-sm) 0 0; color: var(--text-muted); min-height: 1.2em; }
.apt-datepicker__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-subtle);
}
.apt-datepicker__clear {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-primary);
  text-decoration: underline;
  font-family: var(--font-body);
}

@media (max-width: 47.99rem) {
  .apt-datepicker { left: 0; right: auto; padding: var(--space-md); }
  .apt-datepicker__grids { gap: 0; }
}

/* "Start Here" hand-drawn flourish (decorative SVG, points at the search bar) */
.hero-start {
  position: absolute;
  right: 100%;
  bottom: -3.8rem;
  margin-right: var(--space-sm);
  display: block;
  width: 4.75rem;
}
.hero-start__arrow { display: block; width: 100%; height: auto; }
@media (max-width: 63.99rem) { .hero-start { display: none; } }

/* Animating circular images — size-graded (centre largest), bottom-aligned */
.home-hero__bubbles {
  /* Shared scale for the circular images — all three size tiers are multiplied
     by this, so tweaking it resizes them together. */
  --bubble-scale: 0.8;
  position: relative; /* above the corner squiggles */
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(var(--space-sm), 2.5vw, var(--space-2xl));
  margin-top: var(--space-4xl);
}

@media (max-width: 63.99rem) {
  .home-hero__bubbles { margin-top: var(--space-2xl); }
  .home-hero .hero-squiggle { display: none;}
  .home-hero { min-height: auto;}
}

.home-hero__bubble {
  display: block;
  flex: 0 0 auto;
  width: calc(clamp(4.5rem, 3vw + 3rem, 7.5rem) * var(--bubble-scale));
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-round);
  overflow: hidden;
  background: var(--surface-sunken);
  box-shadow: var(--shadow-sm);
  animation: tt-float 6s var(--ease-in-out) infinite;
  animation-delay: calc(var(--bubble-i, 0) * -0.9s);
}
/* Five bubbles: small · medium · large · medium · small (base width = small). */
.home-hero__bubble:nth-child(2),
.home-hero__bubble:nth-child(4) { width: calc(clamp(6rem, 5vw + 3.5rem, 10rem) * var(--bubble-scale)); }
.home-hero__bubble:nth-child(3) { width: calc(clamp(8.5rem, 8vw + 4rem, 14rem) * var(--bubble-scale)); }
/* Mobile: drop the two small outer bubbles, leaving medium · large · medium. */
@media (max-width: 47.99rem) {
  .home-hero__bubble:nth-child(1),
  .home-hero__bubble:nth-child(5) { display: none; }
}
.home-hero__bubble img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes tt-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* --- Reassurance bar (ochre) --- */
.home-reassure {
  background: var(--surface-utility-bar);
  color: var(--text-on-dark);
}
.home-reassure__inner {
  list-style: none;
  /* Block-only: .container's margin-inline:auto must survive, or the row sits
     flush left once the viewport passes the container's max-width. */
  margin-block: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg) var(--space-md);
  padding-block: clamp(var(--space-lg), 2.5vw, var(--space-xl));
}
@media (min-width: 48rem) {
  .home-reassure__inner { grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
}
.home-reassure__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
  font: var(--fw-semibold) var(--fs-body)/1.3 var(--font-body);
}
/* Column rules on the wide layout, so the four facts read as a set. */
@media (min-width: 48rem) {
  .home-reassure__item + .home-reassure__item {
    border-left: 1px solid color-mix(in srgb, var(--text-on-dark) 22%, transparent);
  }
}
.home-reassure__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
}
.home-reassure__icon > * { grid-area: 1 / 1; }
.home-reassure__glyph { width: 1.75rem; height: 1.75rem; opacity: 0.92; }
.home-reassure__icon.is-animated .home-reassure__glyph { display: none; }
.home-reassure__anim { width: 100%; height: 100%; }
.home-reassure__anim svg { display: block; }
/* The marks carry .primary / .secondary stroke classes — theme them here. */
.home-reassure__anim .primary { stroke: var(--text-on-dark); }
.home-reassure__anim .secondary { stroke: var(--c-peach); }
.home-reassure__text { max-width: 18ch; text-wrap: balance; }

/* --- Browse our range (category cards) --- */
.cat-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 48rem) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .cat-grid { grid-template-columns: repeat(5, 1fr); } }
.cat-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  background: var(--surface-sunken);
}
.cat-card__media { position: absolute; inset: 0; }
.cat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.cat-card:hover .cat-card__media img { transform: scale(1.05); }
.cat-card__label {
  position: absolute;
  left: var(--space-sm);
  right: var(--space-sm);
  bottom: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  text-align: center;
  font: var(--fw-semibold) var(--fs-body)/1.2 var(--font-body);
  background: var(--accent-primary);
  color: var(--text-on-accent);
}
.cat-grid__item:nth-child(3n+2) .cat-card__label { background: var(--accent-secondary); }
.cat-grid__item:nth-child(3n+3) .cat-card__label { background: var(--surface-band-olive); color: var(--text-on-dark); }
.cat-card:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* --- Info index — tiled directory of help/about pages --- */
.info-index { padding-block: var(--space-2xl) var(--space-5xl); }
.info-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .info-tiles { grid-template-columns: repeat(6, 1fr); gap: var(--space-lg); }
  .info-tiles__item.info-tile--wide { grid-column: span 3; }
  .info-tiles__item.info-tile--third { grid-column: span 2; }
}
.info-tile {
  position: relative;
  display: block;
  height: clamp(15rem, 34vw, 24rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  background: var(--surface-sunken);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.info-tile__media { position: absolute; inset: 0; }
.info-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.info-tile__bar {
  position: absolute;
  left: var(--space-sm);
  right: var(--space-sm);
  bottom: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--accent-primary);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-md);
}
.info-tiles__item:nth-child(3n+2) .info-tile__bar { background: var(--accent-secondary); }
.info-tiles__item:nth-child(3n+3) .info-tile__bar { background: var(--surface-band-olive); color: var(--text-on-dark); }
.info-tile__title { margin: 0; color: inherit; line-height: 1.15; }
.info-tile__arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: inherit;
  transform: translateX(0);
  transition: transform var(--dur-base) var(--ease-out);
}
/* Hover / focus: lift the tile, zoom the image, nudge the arrow. */
.info-tile:hover,
.info-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  outline: none;
}
.info-tile:hover .info-tile__media img,
.info-tile:focus-visible .info-tile__media img { transform: scale(1.06); }
.info-tile:hover .info-tile__arrow,
.info-tile:focus-visible .info-tile__arrow { transform: translateX(3px); }

/* --- Product grid (Popular) — four across on desktop --- */
.product-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 48rem) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
/* The home product feed runs full-width (no sidebar), so it takes four across. */
@media (min-width: 64rem) { .home-popular .product-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- "You might also need" row (shop quick add + confirmation) --- */
.product-suggest {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border-subtle);
}
.product-suggest__head { margin-bottom: var(--space-md); }
.product-suggest__title { margin: 0; }
.product-suggest__intro { margin: var(--space-3xs) 0 0; color: var(--text-secondary); font-size: var(--fs-body-sm); }
@media (min-width: 64rem) { .product-suggest .product-grid { grid-template-columns: repeat(4, 1fr); } }
.product-card__quick-add { display: block; }
.product-card__quick-add button { width: 100%; }
/* Mobile: show just the first three products plus a "view all" button. */
.home-popular__cta { display: none; text-align: center; margin-top: var(--space-xl); }
@media (max-width: 63.99rem) {
  .home-popular .product-grid > :nth-child(n+4) { display: none; }
  .home-popular__cta { display: block; }
}
.product-card__meta { margin-top: var(--space-xs); display: flex; align-items: baseline; gap: var(--space-2xs); flex-wrap: wrap; }
.product-card__rate-unit,
.bundle-card__rate-unit { color: var(--text-muted); font-size: var(--fs-body-sm); }
.bundle-card__rate { font-size: var(--fs-h4); }
 
/* --------------------------------------------------------------------------
   PRODUCT ARCHIVE (M4) — shop + category listings
   -------------------------------------------------------------------------- */
.archive-shop { padding-block: var(--space-3xl); padding-bottom: var(--space-5xl);}
.archive-shop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md) var(--space-xl);
  flex-wrap: wrap;
  text-align: left;
  margin: 0 0 var(--space-xl);
}
.archive-shop__head-text { display: grid; gap: var(--space-sm); min-width: 0; }
.archive-shop__title { margin: 0; }
.archive-shop__desc { margin: 0; color: var(--text-secondary); }
.archive-shop__desc p { margin: 0; }

.archive-shop__layout { display: grid; gap: var(--space-2xl); }
@media (min-width: 64rem) {
  .archive-shop__layout { grid-template-columns: 15rem 1fr; align-items: start; }
  .archive-shop__sidebar { position: sticky; top: var(--space-lg); }
}

/* Category filter sidebar */
.cat-filter__title { display: block; margin: var(--space-xs) 0 var(--space-sm); color: var(--text-muted); }
.cat-filter__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3xs); }
.cat-filter__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-secondary);
  font: var(--fw-medium) var(--fs-body-sm)/1.3 var(--font-body);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cat-filter__link:hover { background: var(--surface-sunken); color: var(--text-primary); }
.cat-filter__link.is-active { background: var(--surface-band-peach); color: var(--text-primary); }
.cat-filter__count { color: var(--text-muted); font-size: var(--fs-eyebrow); }

/* Availability date picker — a compact control inline with the archive heading,
   grouped inside a soft panel. */
.archive-shop__availability {
  --control-h: 3.25rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  margin: 0;
  padding: var(--space-sm);
  background: var(--surface-band-peach);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
/* Above mobile: sit beside the title, sized to content but at least 400px wide. */
@media (min-width: 48rem) {
  .archive-shop__availability { width: auto; min-width: 400px; }
}
/* Heading row: label on the left, Clear inline to the right. */
.archive-shop__dates-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.archive-shop__dates-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--text-primary);
  white-space: nowrap;
  /* Match the buttons' typeface rather than the uppercase label treatment. */
  font: var(--fw-semibold) var(--fs-body-sm)/1 var(--font-body);
  letter-spacing: -0.01em;
  text-transform: none;
}
.archive-shop__dates-icon { color: var(--text-accent); }
/* Fields + Check. On mobile the row wraps: dates on top, Check full-width below.
   From 48rem up it's a single row with a compact Check that fills the width. */
.archive-shop__dates-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
}
.archive-shop__availability .hero-search__dates { flex: 1 1 auto; min-width: 0; gap: var(--space-2xs); }
.archive-shop__availability .apt-datepicker { left: auto; right: 0; }
.archive-shop__dates-actions {
  display: flex;
  align-items: center;
  flex: 1 1 100%;
}
.archive-shop__dates-submit { width: 100%; min-height: var(--control-h); }
@media (min-width: 48rem) {
  .archive-shop__dates-controls { flex-wrap: nowrap; }
  .archive-shop__dates-actions { flex: 0 0 auto; }
  .archive-shop__dates-submit { width: auto; }
}
.archive-shop__dates-clear {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.archive-shop__dates-clear:hover { color: var(--text-primary); }

.archive-shop__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

/* Product cards unavailable for the chosen dates: faded + badged, sorted to the
   end of the grid (see archive-product.php), but still fully clickable so the
   customer can open the product page. */
/* The shared card component is 4/3, but tt_product_card is cropped square, so
   pin the loop card's media to 1:1 and use the full frame. */
.product-card__media { aspect-ratio: 1 / 1; }

.product-card { position: relative; }
.product-card.is-unavailable .product-card__media,
.product-card.is-unavailable .tt-card__body {
  opacity: 0.5;
}
/* Availability notice overlaid on a card image. Shared by the product grid card
   and the wide bundle card; each sets its own vertical position. The hairline border
   keeps the cream pill defined against pale photos. */
.product-card__unavailable,
.bundle-card__unavailable {
  position: absolute;
  /* Inset both edges rather than left:50%, which would cap the box's available
     width at half the card and wrap the text early. */
  left: var(--space-2xs);
  right: var(--space-2xs);
  margin-inline: auto;
  width: fit-content;
  transform: translateY(-50%);
  z-index: 2;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--surface-raised, var(--c-cream));
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill, 999px);
  box-shadow: var(--shadow-md);
  font: var(--fw-semibold) var(--fs-body-sm)/1.25 var(--font-body);
  text-align: center;
  /* Click-through: the whole image stays a link to the product. */
  pointer-events: none;
}
.product-card__unavailable { top: 38%; }
.archive-shop .woocommerce-result-count { margin: 0; color: var(--text-muted); font-size: var(--fs-body-sm); }
.archive-shop .woocommerce-ordering { margin: 0; }
.archive-shop .woocommerce-ordering select {
  font: var(--fw-medium) var(--fs-body-sm)/1 var(--font-body);
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  box-shadow: none !important;
      min-height: 30px;
}

/* Bundles archive — stacked wide cards */
.bundle-list { display: grid; gap: var(--space-xl); }
/* Bundle card unavailable state (dates picker) — dim + a badge, like the product card. */
.bundle-card { position: relative; }
/* Dim the photo, not its wrapper, so the notice sitting over it stays crisp. */
.bundle-card.is-unavailable .bundle-card__media,
.bundle-card.is-unavailable .bundle-card__body { opacity: 0.5; }
.bundle-card__figure { position: relative; min-width: 0; }
.bundle-card__unavailable { top: 50%; }
.bundle-card__body .tt-eyebrow { margin: 0 !important; }
.archive-shop__empty { text-align: center; color: var(--text-muted); padding-block: var(--space-3xl); }

/* Pagination (WooCommerce .page-numbers) */
.archive-shop .woocommerce-pagination { margin-top: var(--space-2xl); }
.archive-shop .woocommerce-pagination ul.page-numbers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  justify-content: center;
}
.archive-shop .page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-secondary);
  font: var(--fw-medium) var(--fs-body-sm)/1 var(--font-body);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.archive-shop .page-numbers:hover { background: var(--surface-sunken); color: var(--text-primary); }
.archive-shop .page-numbers.current { background: var(--accent-primary); color: var(--text-on-accent); border-color: transparent; }
.archive-shop .page-numbers.dots { border: 0; min-width: auto; }

/* --------------------------------------------------------------------------
   SINGLE PRODUCT (M5) — gallery + summary + booking placeholder
   -------------------------------------------------------------------------- */
/* Qualified with `section` so it doesn't also hit the WooCommerce `single-product` body class. */
section.single-product { padding-block: var(--space-xl); }
.single-product__grid { display: grid; gap: var(--space-xl); }

@media (min-width: 64rem) {
  .single-product__grid { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: start; padding-block: var(--space-3xl);}
  /* Keep the gallery in view while the (taller) details column scrolls. */
  .single-product__gallery { position: sticky; top: var(--space-lg); align-self: start; }
}

/* The booking picker reuses the hero's date fields, whose height comes from
   --control-h (defined on .hero-search). Re-declare it here so the fields keep
   their full height outside the hero. */
.single-booking__picker { --control-h: 3.5rem; }

/* Gallery */
.product-gallery { display: grid; gap: var(--space-md); }
.product-gallery__main { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-sunken); }
/* No fixed ratio: product photos vary in shape and the single page shows each
   one whole rather than cropping it to a square. */
.product-gallery__img { display: block; width: 100%; height: auto; }
.product-gallery__thumbs { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.product-gallery__thumb {
  width: 5.5rem;
  height: 5.5rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--surface-sunken);
}
/* contain, not cover: the strip keeps a uniform footprint without cropping. */
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product-gallery__thumb.is-active { border-color: var(--accent-primary); }
.product-gallery__thumb:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Summary column */
.single-product__summary { display: grid; gap: 0; align-content: start; }
.single-breadcrumb { font-size: var(--fs-body-sm); color: var(--text-muted); display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
.single-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.single-breadcrumb a:hover { color: var(--text-link); }
.single-breadcrumb__sep { color: var(--text-placeholder); }
.single-title { margin: var(--space-sm) 0 var(--space-lg) 0; }
.single-specs { margin: 0; color: var(--text-secondary); display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.single-specs strong { color: var(--text-primary); font-weight: var(--fw-semibold); }
.single-specs__sep { color: var(--text-placeholder); }

.single-price { display: flex; align-items: baseline; gap: var(--space-2xs); }
.single-price__amount { font-size: var(--fs-h3); font-family:var(--font-body); line-height: 0;}
.single-price__unit { color: var(--text-muted); font-size: var(--fs-body-lg); }
.single-price__note { margin: var(--space-3xs) 0 0; color: var(--text-muted); font-size: var(--fs-body-sm); margin: 0 0 var(--space-lg) 0;}

/* Reassurance features */
.single-features { display: grid; gap: var(--space-lg); margin: var(--space-md) 0;}
@media (min-width: 30rem) { .single-features { grid-template-columns: 1fr 1fr; } }

/* Bundle contents — compact horizontal carousel of included products */
.bundle-includes { display: grid; gap: var(--space-sm); margin: var(--space-md) 0; }
.bundle-includes__label { margin: 0; color: var(--text-muted); }
/* Track sits between the prev/next nav buttons; min-width:0 lets it shrink so
   the flanking buttons always fit. */
/* container-type lets the nav buttons centre precisely on the image row (see
   their `top` below), which is a fraction of the carousel's width. */
.bundle-includes__carousel { position: relative; container-type: inline-size; }
.bundle-includes__track {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-2xs);
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.bundle-includes__track::-webkit-scrollbar { display: none; }
/* Four visible at once; the rest scroll. */
.bundle-includes__item { flex: 0 0 calc((100% - (var(--space-sm) * 3)) / 4); scroll-snap-align: start; }
/* Mobile: two full tiles plus a peek of the next, so the swipe affordance is
   obvious; the rest scroll natively (touch). Hide the outside arrows. */
@media (max-width: 47.99rem) {
  .bundle-includes__item { flex-basis: calc((100% - var(--space-sm)) / 2.25); }
  .bundle-includes__nav { display: none; }
}
/* Nav sits just outside the track so the tiles span the full container width.
   `top` = half a tile's height (tile width = (100cqw - 3 gaps) / 4, square). */
.bundle-includes__nav {
  position: absolute;
  top: calc((100cqw - (var(--space-sm) * 3)) / 8);
  transform: translateY(-50%);
  z-index: 2;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-round);
  background: var(--surface-raised-alt);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  color: var(--text-strong);
  cursor: pointer;
}
.bundle-includes__nav--prev { right: calc(100% + var(--space-2xs)); }
.bundle-includes__nav--next { left: calc(100% + var(--space-2xs)); }
.bundle-includes__nav:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.bundle-includes__nav[disabled] { opacity: 0.4; cursor: default; }
.bundle-includes__link {
  display: grid;
  gap: var(--space-2xs);
  text-decoration: none;
  color: var(--text-primary);
}
.bundle-includes__link:focus-visible { outline: none; }
.bundle-includes__media {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}
.bundle-includes__link:focus-visible .bundle-includes__media { box-shadow: var(--shadow-focus); }
.bundle-includes__media img {
  width: 100%;
  height: 100%;
  /* contain, not cover: the carousel stays on a uniform grid without cropping. */
  object-fit: contain;
  display: block;
  transition: transform var(--dur-base) var(--ease-out);
}
.bundle-includes__link:hover .bundle-includes__media img { transform: scale(1.05); }
.bundle-includes__title {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--dur-fast) var(--ease-out);
  text-wrap: balance;
}
.bundle-includes__link:hover .bundle-includes__title { color: var(--text-link); }

/* Dotted section divider */
.rule-dotted { border: 0; border-top: 2px dotted var(--border-default); margin: 0; }

/* Booking widget (placeholder) */
.single-booking { display: grid; gap: var(--space-xs); margin: var(--space-lg) 0; }
.single-booking__label { display: block; color: var(--text-primary); margin: 0 0 var(--space-xs); }
.booking-avail {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-sm) 0 ;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-band-peach);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-body-sm);
}
.booking-avail svg { flex: 0 0 auto; color: var(--accent-primary); }
.single-booking__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin: 0;}
.single-booking__qty-label { font: var(--fw-semibold) var(--fs-body) var(--font-body); color: var(--text-primary); }
.single-booking__cta { justify-content: space-between; gap: var(--space-md); }
.single-booking__reassure { margin-top: var(--space-2xs); }
.single-booking__reassure strong { color: var(--text-primary); }
.single-booking__reassure a { color: var(--text-link); text-decoration: none; }

/* Free-delivery threshold line under the delivery row in a tt-summary. */
.summary-note {
  margin-top: calc(var(--space-xs) * -1);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* Awaiting dates: prompt for dates and gate the quantity/total/CTA below. */
.single-booking__gate { display: grid; gap: var(--space-xs); transition: opacity var(--dur-fast) var(--ease-out); }
.single-booking.is-awaiting-dates .single-booking__gate {
  opacity: 0.4;
  pointer-events: none;
}
.single-booking.is-awaiting-dates .hero-search__field {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-focus);
}
.single-booking.is-awaiting-dates .booking-avail.is-idle {
  background: var(--accent-primary);
}
.single-booking.is-awaiting-dates .booking-avail.is-unavailable {
  background: var(--c-ochre);
}
.single-booking.is-awaiting-dates .booking-avail span,
.single-booking.is-awaiting-dates .booking-avail svg {
  color: var(--text-on-accent);
}

/* Mobile sticky book bar — keeps the booking action in reach on the long,
   single-column product page. Hidden on desktop (two-column) and until JS. */
.sticky-book { display: none; }
@media (max-width: 63.99rem) {
  .sticky-book[data-sticky-book] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--gutter);
    padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
    background: var(--surface-raised);
    border-top: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .sticky-book[hidden] { display: none; }
  .sticky-book.is-hidden { transform: translateY(115%); pointer-events: none; }

  .sticky-book__dates {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-md);
    min-height: 2.75rem;
    font: inherit;
    text-align: left;
    color: var(--text-primary);
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    cursor: pointer;
  }
  .sticky-book__dates svg { flex: 0 0 auto; color: var(--text-muted); }
  .sticky-book__dates-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sticky-book__range { font-weight: var(--fw-semibold); }
  .sticky-book__cta { flex: 0 0 auto; white-space: nowrap; }

  /* Filled state: chip on the left, Book button on the right. */
  .sticky-book:not(.is-awaiting-dates) .sticky-book__prompt { display: none; }
  .sticky-book.is-awaiting-dates .sticky-book__range { display: none; }

  /* Awaiting state: the prompt fills the bar and reads as the primary action. */
  .sticky-book.is-awaiting-dates .sticky-book__cta { display: none; }
  .sticky-book.is-awaiting-dates .sticky-book__dates {
    justify-content: center;
    color: var(--text-on-accent);
    background: var(--surface-band-accent);
    border-color: transparent;
    font-weight: var(--fw-semibold);
  }
  .sticky-book.is-awaiting-dates .sticky-book__dates svg { color: var(--text-on-accent); }
}

/* Related products */
.single-related { margin-top: var(--space-4xl); }
.single-related__cta { text-align: center; margin-top: var(--space-lg); }

/* Short description under the price. */
.single-shortdesc { margin-bottom: var(--space-md); color: var(--text-secondary); }
.single-shortdesc > :first-child { margin-top: 0; }
.single-shortdesc > :last-child { margin-bottom: 0; }
.single-shortdesc p { margin: 0 0 var(--space-sm); }

/* Other versions — the same item in another colour or size. */
/* min-width:0 throughout: the row sits in a grid item, whose auto minimum would
   otherwise size to the widest chip and push the whole summary column out. */
.single-versions { display: grid; gap: var(--space-2xs); margin: 0 0 var(--space-md); min-width: 0; }
.single-versions__label { margin: 0; color: var(--text-muted); }
.single-versions__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs); min-width: 0; }
.single-versions__link {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-xs) var(--space-3xs) var(--space-3xs);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised-alt);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.single-versions__link:hover { border-color: var(--border-strong); background: var(--surface-raised); }
.single-versions__link:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* contain, not cover: colourways read better uncropped at this size. */
.single-versions__media {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--surface-sunken);
}
.single-versions__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.single-versions__text { display: grid; gap: var(--space-3xs); min-width: 0; }
.single-versions__name { color: var(--text-primary); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); line-height: 1.2; }
.single-versions__price { color: var(--text-muted); font-size: var(--fs-caption); line-height: 1.2; }

/* Main content box (long description), full width above More Bundles. */
.single-description { margin-top: var(--space-4xl); }
.single-description__box { display: grid; gap: var(--space-md); }
.single-description__title { margin: 0; }
.single-description__content { color: var(--text-secondary); }
.single-description__content > :first-child { margin-top: 0; }
.single-description__content > :last-child { margin-bottom: 0; }
.single-description__content p { margin: 0 0 var(--space-md); }
.single-description__content ul,
.single-description__content ol { margin: 0 0 var(--space-md); padding-left: var(--space-lg); }
.single-description__content li { margin-bottom: var(--space-2xs); }

@media (max-width: 50rem) { 
.single-description {
  margin: 0;
}
.single-related { margin-top: var(--space-2xl); }
.single-description__box {
    border-radius: var(--radius-md)!important;
}

}
/* Help prompt at the foot of every product page — reuses the home CTA band
   (.home-cta) with two actions. */
.single-cta { margin-top: var(--space-4xl); }
.single-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}
/* Secondary action recoloured to read on the coral band (the ghost variant's
   default link colour is meant for light surfaces). */
.single-cta__secondary {
  --_bg: transparent;
  --_fg: var(--c-cream);
  --_bg-hover: color-mix(in srgb, var(--c-cream) 18%, transparent);
  --_bg-active: color-mix(in srgb, var(--c-cream) 26%, transparent);
  border-color: color-mix(in srgb, var(--c-cream) 55%, transparent);
}

.single-booking__rental .hero-search__field { 
  background: #ffffffb0;
    border: 1px solid #fceedd;
    border-radius: var(--radius-sm);
 }

/* --------------------------------------------------------------------------
   CART & CHECKOUT (M6) — classic templates, re-styled to the design system
   -------------------------------------------------------------------------- */

/* WooCommerce notices (default WC CSS is dequeued, so style them here) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised-alt);
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
}

.woocommerce-message:focus-visible,
.woocommerce-info:focus-visible,
.woocommerce-error:focus-visible { outline: none; }

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a { 
    font-weight: 700;
    text-decoration: none;

}

.woocommerce-message { background: var(--status-available-bg); color: var(--status-available-fg); border-color: transparent; }
.woocommerce-error { background: var(--c-danger-bg); color: var(--c-danger); border-color: transparent; }
.woocommerce-message .button,
.woocommerce-error .button { float: right; }

/* WC form fields (shared by checkout + account) */
.woocommerce .form-row { display: grid; gap: var(--space-3xs); margin: 0 0 var(--space-md); }
.woocommerce .form-row label { font: var(--fw-semibold) var(--fs-body-sm)/1.2 var(--font-body); color: var(--text-strong); }
.woocommerce .form-row .required { color: var(--accent-primary); border: 0; text-decoration: none; }
.woocommerce .input-text,
.woocommerce select,
.woocommerce textarea {
  width: 100%;
  font: var(--fw-regular) var(--fs-body)/1.3 var(--font-body);
  color: var(--text-primary);
  background: var(--surface-raised-alt);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  min-height: 48px;
}
.woocommerce textarea { min-height: 6rem; }
.woocommerce .input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.woocommerce .input-text::placeholder { color: var(--text-placeholder); }

/* WC buttons fallback (place order, my-account, etc.) */
#place_order,
.woocommerce #place_order {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: var(--space-sm) var(--space-lg);
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--accent-primary); color: var(--text-on-accent);
  font: var(--fw-semibold) var(--fs-body)/1 var(--font-body);
  transition: background var(--dur-base) var(--ease-out);
}
#place_order:hover { background: color-mix(in srgb, var(--accent-primary), var(--text-primary) 14%); }



/* ---- Cart page ---- */
.cart-items { display: grid; gap: 0; }
.cart-items__head { display: none; }
.cart-item { display: grid; gap: var(--space-sm); padding: var(--space-lg) 0; border-bottom: 1px solid var(--border-subtle); align-items: center; position: relative; }
.cart-item__product { display: flex; gap: var(--space-md); align-items: center; }
.cart-item__thumb img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.cart-item__name { font: var(--fw-semibold) var(--fs-body)/1.3 var(--font-body); color: var(--text-primary); text-decoration: none; }
.cart-item__name:hover { color: var(--text-link); }
.cart-item__price, .cart-item__subtotal { color: var(--text-secondary); }
.cart-item__subtotal { font-weight: var(--fw-semibold); color: var(--text-primary); }
.cart-item__remove .remove {
  display: inline-grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--radius-round);
  background: var(--surface-sunken); color: var(--text-muted);
  text-decoration: none; font-size: var(--fs-body-lg); line-height: 1;
}
.cart-item__remove .remove:hover { background: var(--accent-primary); color: var(--text-on-accent); }
.quantity { display: inline-flex; }
.quantity .qty {
  width: 4.5rem; text-align: center;
  font: var(--fw-medium) var(--fs-body)/1 var(--font-body);
  color: var(--text-primary);
  background: var(--surface-raised-alt);
  border: 1.5px solid var(--border-default); border-radius: var(--radius-sm);
  padding: var(--space-xs);
  min-height: 44px;
}
.cart-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; justify-content: space-between; padding-top: var(--space-lg); }
.cart-actions__coupon { display: flex; gap: var(--space-xs); flex: 1 1 auto; max-width: 26rem; }
.cart-actions__coupon .input-text { min-height: 48px; flex: 1 1 auto; min-width: 0; }
.cart-actions__coupon button { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 47.99rem) {
  .cart-item__price::before,
  .cart-item__qty::before,
  .cart-item__subtotal::before { content: attr(data-title) ": "; font-weight: var(--fw-semibold); color: var(--text-muted); }
  .cart-item__remove { position: absolute; top: var(--space-lg); right: 0; }
}
@media (min-width: 48rem) {
  .cart-items__head {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1.2fr 1fr auto;
    gap: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font: var(--fw-semibold) var(--fs-eyebrow)/1 var(--font-body);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
  }
  .cart-item { grid-template-columns: 2.5fr 1fr 1.2fr 1fr auto; gap: var(--space-md); }
  .cart-item__remove { justify-self: end; }
}

/* Cart totals card */
.cart-totals {
  background: var(--surface-raised-alt);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}
.cart-totals__title { margin: 0 0 var(--space-md); }
.cart-totals__actions { margin-top: var(--space-lg); }

/* Shipping methods render as a list; it's a value in the totals, not a bullet.
   The list's default indent was what separated it from the row label, so the
   row carries that gap itself now. */
.woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
.woocommerce-shipping-methods li { display: flex; align-items: center; gap: var(--space-2xs); }

/* Cart two-column layout. Only with a basket to lay out — an empty basket has
   no totals column, and the two-column grid would push its centred empty state
   off to the left of the page. */
@media (min-width: 64rem) {
  .woocommerce-cart .page-article:not(.page-article--cart-empty) .woocommerce {
    display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--space-2xl); align-items: start;
  }
  .woocommerce-cart .page-article:not(.page-article--cart-empty) .checkout-progress,
  .woocommerce-cart .page-article:not(.page-article--cart-empty) .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  /* Spans the extras row too, so the extras sit directly under the coupon row
     rather than waiting for the totals panel to end. */
  .woocommerce-cart .cart-collaterals { position: sticky; top: var(--space-lg); grid-row: span 2; }
  .woocommerce-cart .product-suggest { grid-column: 1; margin-top: var(--space-xl); }
  .woocommerce-cart .product-suggest .product-grid { grid-template-columns: repeat(3, 1fr); }
}
.cart-empty { text-align: center; padding-block: var(--space-2xl); display: grid; gap: var(--space-md); justify-items: center; }
/* Empty cart has no heading — centre the branded state in the viewport. */
.page-article--cart-empty { min-height: 60vh; display: grid; align-content: center; }
/* Branded empty-cart state. */
.cart-empty-state { max-width: 34rem; margin-inline: auto; }
.cart-empty-state__icon {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  margin-bottom: var(--space-2xs);
  border-radius: var(--radius-round);
  background: var(--surface-band-peach);
  color: var(--accent-primary);
}
.cart-empty-state__title { margin: 0; }
.cart-empty-state__text { margin: 0; color: var(--text-secondary); text-wrap: balance; }
.cart-empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-xs);
}

/* --------------------------------------------------------------------------
   CONTACT PAGE (page-contact.php) — content left, form right
   -------------------------------------------------------------------------- */
.contact-page { padding-block: var(--space-3xl) var(--space-5xl); }
.contact-page__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
@media (min-width: 48rem) {
  .contact-page__grid { grid-template-columns: 1fr 1fr; gap: var(--space-4xl); }
}
.contact-page__title { margin: 0 0 var(--space-md); }
.contact-page__text { color: var(--text-secondary); margin: 0 0 var(--space-xl); }
.contact-page__details { list-style: none; margin: 0 0 var(--space-xl); padding: 0; display: grid; gap: var(--space-md); }
.contact-page__detail { display: grid; gap: var(--space-3xs); }
.contact-page__detail-label { color: var(--text-muted); }
.contact-page__detail a { color: var(--text-link); text-decoration: none; font-size: var(--fs-body-lg); }
.contact-page__detail a:hover { text-decoration: underline; }

/* Form panel */
.contact-page__form-wrap { align-self: start; }
.contact-form { display: grid; gap: var(--space-lg); }
.contact-form__optional { color: var(--text-muted); font-weight: var(--fw-regular); text-transform: none; letter-spacing: normal; }
.contact-form__message { resize: vertical; min-height: 8rem; font-family: inherit; }
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-notice { border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); }
.contact-notice__title { margin: 0 0 var(--space-2xs); }
.contact-notice--success { background: var(--surface-band-olive); color: var(--text-on-dark); }
.contact-notice--success p { margin: 0; }
.contact-notice--error { background: var(--surface-band-peach); color: var(--text-primary); margin: 0 0 var(--space-lg); }

/* ---- Checkout ---- */
.checkout__grid { display: grid; gap: var(--space-2xl); }
@media (min-width: 64rem) {
  .checkout__grid { grid-template-columns: minmax(0, 1fr) 24rem; align-items: start; }
  .checkout__aside { position: sticky; top: var(--space-lg); }
}
.checkout__aside {
  background: var(--surface-raised-alt);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}
.checkout__aside-title { margin: 0 0 var(--space-md); }
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 { font: var(--fw-semibold) var(--fs-h5)/1.2 var(--font-body); color: var(--text-primary); margin: 0 0 var(--space-md); }
.woocommerce-shipping-fields,
.woocommerce-additional-fields { margin-top: var(--space-xl); }

/* Order review items + totals */
.review-order__items { display: grid; gap: var(--space-sm); padding-bottom: var(--space-md); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-md); }
.review-order__item { display: flex; justify-content: space-between; gap: var(--space-md); font-size: var(--fs-body-sm); color: var(--text-secondary); }
.review-order__item-name { color: var(--text-primary); }
.review-order__item-qty { color: var(--text-muted); }
.review-order__item-total { font-weight: var(--fw-medium); color: var(--text-primary); white-space: nowrap; }

/* Rental dates / length: WC emits a <dl class="variation"> per line item.
   Put label and value on one row so both lines align. */
.review-order__item-name .variation {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-3xs) var(--space-xs);
  margin: var(--space-xs) 0 0;
  font-size: var(--fs-body-sm);
  line-height: 1.35;
}
.review-order__item-name .variation dt {
  margin: 0;
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}
.review-order__item-name .variation dd {
  margin: 0;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.review-order__item-name .variation dd p { margin: 0; }

/* Fallback for the multi-rate shipping row (radio list inside the <dd>). */
.review-order__totals .woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
}
.review-order__totals .woocommerce-shipping-methods label {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

/* Payment box */
#payment { margin-top: var(--space-lg); }
#payment ul.payment_methods { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: grid; gap: var(--space-xs); }
#payment ul.payment_methods > li { display: grid; gap: var(--space-xs); }
#payment ul.payment_methods > li > label { font: var(--fw-semibold) var(--fs-body)/1.2 var(--font-body); color: var(--text-primary); display: inline-flex; align-items: center; gap: var(--space-xs); }
#payment .payment_box { background: var(--surface-sunken); border-radius: var(--radius-sm); padding: var(--space-md); font-size: var(--fs-body-sm); color: var(--text-secondary); }
#payment .woocommerce-terms-and-conditions-wrapper { margin: var(--space-md) 0; font-size: var(--fs-body-sm); color: var(--text-muted); }
#payment ul.payment_methods > li > label img { height: 20px; width: auto; }
/* A gateway with no description leaves an empty <p>; don't draw a box round it. */
#payment .payment_box > p:empty { display: none; }
#payment .payment_box:not(:has(> p:not(:empty))) { display: none; }

/* SumUp renders its card form into #sumup-card, which its own CSS sets to
   700px. At that width the widget uses a stretched two-column layout, so hold
   it to the narrow single-column one. */
body .wc-sumup-modal #sumup-card { width: min(26.5rem, 92vw); }

/* The widget mounts inside .payment_box, so theme form rules would otherwise
   reach its hosted fields. Its own layout puts each label above its field and
   splits expiry/CVV 50/50; leave that alone. */
.wc-sumup-modal label { display: inline; align-items: normal; gap: normal; }
.wc-sumup-modal [data-sumup-id="submit_button"] { margin-top: var(--space-sm); }

/* Collapse the stray paragraph margins around the payment box and consent text. */
.payment_method_sumup p { margin: 0 !important; }
.woocommerce-privacy-policy-text p { margin: 0 !important; }
.woocommerce-terms-and-conditions-wrapper { margin-top: 0 !important; }
.woocommerce-privacy-policy-text { font-size: var(--fs-body-sm); color: var(--text-muted); }

/* Country / state select2 (selectWoo) — match the native inputs */
.woocommerce .select2-container--default .select2-selection--single {
  height: 48px;
  display: flex;
  align-items: center;
  background: var(--surface-raised-alt);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-sm);
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 var(--space-md);
  line-height: 1.3;
  color: var(--text-primary);
  font: var(--fw-regular) var(--fs-body)/1.3 var(--font-body);
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px;
  right: var(--space-sm);
}
.woocommerce .select2-container--open .select2-selection--single,
.woocommerce .select2-container--focus .select2-selection--single {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}
/* Dropdown is portalled to <body>, so these live outside .woocommerce */
.select2-dropdown {
  background: var(--surface-raised-alt);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--surface-band-peach);
  color: var(--text-primary);
}
.select2-search--dropdown .select2-search__field {
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
}

/* Delivery-led checkout — intro under the section heading + coupon toggle */
.checkout__delivery-intro { margin: calc(-1 * var(--space-sm)) 0 var(--space-lg); color: var(--text-muted); font-size: var(--fs-body-sm); }
.woocommerce-form-coupon-toggle .woocommerce-info { background: var(--surface-raised-alt); color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.woocommerce-form-coupon-toggle .woocommerce-form-coupon-toggle .woocommerce-info {  background: transparent;
    padding: 0;
    border: 0px;}
.checkout_coupon .input-text { min-height: 48px; }
.checkout_coupon.woocommerce-form-coupon {
    max-width: 40rem;
    display: flex;
    gap: var(--space-2xs);
}

/* ---- Checkout funnel: progress nav ---- */
.checkout-progress {
  list-style: none;
  margin: 0 0 var(--space-2xl);
  padding: 0;
  display: flex;
  gap: var(--space-xs);
  counter-reset: none;
}
.checkout-progress__step {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) 0;
  border-top: 3px solid var(--border-subtle);
  color: var(--text-muted);
  font: var(--fw-semibold) var(--fs-body-sm)/1.2 var(--font-body);
}
.checkout-progress__num {
  flex: 0 0 auto;
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  border-radius: var(--radius-round);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--fs-eyebrow);
}
.checkout-progress__step.is-current { border-top-color: var(--accent-primary); color: var(--text-primary); }
.checkout-progress__step.is-current .checkout-progress__num { background: var(--accent-primary); color: var(--text-on-accent); }
.checkout-progress__step.is-done { border-top-color: var(--accent-primary); color: var(--text-secondary); cursor: pointer; }
.checkout-progress__step.is-done .checkout-progress__num { background: var(--accent-soft); color: var(--text-primary); }
@media (max-width: 47.99rem) {
  .checkout-progress__label { display: none; }
  .checkout-progress__step.is-current .checkout-progress__label { display: inline; }
}

/* ---- Checkout wizard steps ---- */
.checkout-step__title { margin: 0 0 var(--space-2xs); }
.is-hidden { display: none !important; }
.checkout-step__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: space-between; margin-top: var(--space-lg); }
.checkout-step__prev { margin-top: var(--space-lg); }

/* Collection dates (plugin slot) */
/* Payment is revealed only on the final (Delivery & Collection) step */
.tt-checkout.is-step-details #payment { display: none; }

/* Locked country (Jersey only) */
.tt-country-locked__value {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 48px;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font: var(--fw-medium) var(--fs-body)/1 var(--font-body);
}
.tt-country-locked__value svg { color: var(--accent-primary); }

/* ---- Order received / Confirmation (M7) ---- */
.order-received { display: grid; gap: var(--space-lg); padding-block: var(--space-lg); padding-top: 0; }
.order-received .checkout-progress { display: none; }
.order-received__hero { max-width: 46rem; margin-inline: auto; margin-top: 0; margin-bottom: var(--space-lg); text-align: center; display: grid; gap: var(--space-md); }
.order-received__title { margin: 0; }
.order-received__lede { margin: 0; color: var(--text-secondary); }

/* Success animation (decorative, sits above the hero) */
.order-received__celebrate { display: flex; justify-content: center; margin-top: 0; }
.order-received__celebrate + .order-received__hero { margin-top: var(--space-sm); }
.order-received__lottie { width: 11rem; aspect-ratio: 800 / 850; }
.order-received__failed-actions { text-align: center; margin: 0; }

.order-received__summary,
.order-received__delivery,
.order-received__changes,
.order-received__details,
.order-received__closer { max-width: 52rem; margin-inline: auto; width: 100%; box-sizing: border-box; }

.order-received__summary,
.order-received__delivery,
.order-received__changes { display: grid; gap: var(--space-md); }
.order-received__summary h2,
.order-received__delivery h2,
.order-received__changes h2 { margin: 0; }
.order-received__meta { margin: 0; }
.order-received__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.order-received__items li { display: flex; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--border-subtle); }
.order-received__item-qty { color: var(--text-muted); white-space: nowrap; }
.order-received__facts { margin: 0; display: grid; gap: var(--space-sm); }
.order-received__facts > div { display: flex; justify-content: space-between; gap: var(--space-md); align-items: baseline; }
.order-received__facts dt { margin: 0; color: var(--text-muted); }
.order-received__facts dd { margin: 0; color: var(--text-primary); font-weight: var(--fw-medium); text-align: right; }
.order-received__facts-total dt { color: var(--text-primary); font-weight: var(--fw-semibold); }
.order-received__facts-total dd { font-family: var(--font-display); color: var(--text-brand); font-size: var(--fs-h5); }

/* What happens next band */
.order-received__next { background: var(--surface-band-peach); border-radius: var(--radius-lg); padding: var(--space-2xl) var(--space-xl);     max-width: 52rem;
    margin: auto;}
.order-received__next-title { text-align: center; margin: 0 0 var(--space-xl); }
.order-received__steps { display: grid; gap: var(--space-2xl); max-width: 62rem; margin-inline: auto; }
@media (min-width: 48rem) { .order-received__steps { gap: var(--space-lg); align-items: start; } }
.order-received__steps .tt-iconbox__title { display: grid; gap: var(--space-2xs); justify-items: center; }
.order-received__step-num { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: var(--radius-round); background: var(--accent-primary); color: var(--text-on-accent); font-size: var(--fs-body-sm); }

.order-received__hint { margin: 0; font-size: var(--fs-body-sm); color: var(--text-muted); }
.order-received__hint a,
.order-received__delivery a,
.order-received__changes a { color: var(--text-link); }
.order-received__subhead { margin: var(--space-sm) 0 0; font: var(--fw-semibold) var(--fs-body)/1.2 var(--font-body); color: var(--text-primary); }
.order-received__changes p { margin: 0; color: var(--text-secondary); }

/* Brand closer */
.order-received__closer { background: var(--surface-band-peach); border-radius: var(--radius-xl); padding: var(--space-2xl); text-align: center; display: grid; gap: var(--space-md); }
.order-received__closer h2 { margin: 0; }
.order-received__closer p { margin: 0; color: var(--text-secondary); }
.order-received__signoff { color: var(--text-primary); }

/* WC order details table (rendered below by WC) */
.order-received__details .woocommerce-order-details__title,
.order-received__details .woocommerce-column__title { font: var(--fw-semibold) var(--fs-h5)/1.2 var(--font-body); color: var(--text-primary); margin: var(--space-lg) 0 var(--space-md); }
.order-received__details table.shop_table,
.order-received__details .woocommerce-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-lg); }
.order-received__details table.shop_table th,
.order-received__details table.shop_table td { text-align: left; padding: var(--space-sm) var(--space-xs); border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-body-sm); color: var(--text-secondary); }
.order-received__details table.shop_table td.woocommerce-table__product-name { color: var(--text-primary); }
.order-received__details .woocommerce-customer-details address { font-style: normal; line-height: var(--lh-body); color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-md); }
.order-received__details .woocommerce-columns { display: grid; gap: var(--space-lg); }
@media (min-width: 48rem) { .order-received__details .woocommerce-columns--addresses { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------------------
   MY ACCOUNT (M8)
   --------------------------------------------------------------------------- */
.woocommerce-account.logged-in .woocommerce { display: grid; gap: var(--space-lg); }
@media (min-width: 64rem) {
  .woocommerce-account.logged-in .woocommerce { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
  .woocommerce-account.logged-in .woocommerce-MyAccount-navigation { position: sticky; top: var(--space-lg); }
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.woocommerce-MyAccount-navigation-link a {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-secondary);
  font: var(--fw-medium) var(--fs-body)/1.2 var(--font-body);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.woocommerce-MyAccount-navigation-link a:hover { background: var(--surface-sunken); color: var(--text-primary); }
.woocommerce-MyAccount-navigation-link.is-active a { background: var(--surface-band-peach); color: var(--text-primary); }
.account-nav__icon { display: inline-flex; flex: 0 0 auto; color: var(--text-muted); transition: color var(--dur-fast) var(--ease-out); }
.account-nav__icon svg { width: 1.35rem; height: 1.35rem; display: block; }
.woocommerce-MyAccount-navigation-link a:hover .account-nav__icon,
.woocommerce-MyAccount-navigation-link.is-active a .account-nav__icon { color: var(--accent-primary); }
.woocommerce-MyAccount-content { min-width: 0; }

/* WC account buttons (Save changes, Login, Save address…) */
.woocommerce-account .button,
.woocommerce-account button.button,
.woocommerce-account input.button,
.woocommerce-Button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: var(--space-sm) var(--space-lg);
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--accent-primary); color: var(--text-on-accent);
  font: var(--fw-semibold) var(--fs-body)/1 var(--font-body);
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out);
}
.woocommerce-account .button:hover,
.woocommerce-Button:hover { background: color-mix(in srgb, var(--accent-primary), var(--text-primary) 14%); }

/* Dashboard */
.account-dash { display: grid; gap: var(--space-xl); }
.account-dash__head h2 { margin: 0 0 var(--space-2xs); }
.account-dash__head p { margin: 0; color: var(--text-secondary); }
.account-dash__current { display: grid; gap: var(--space-xs); }
.account-dash__current-title { margin: 0; font: var(--fw-semibold) var(--fs-h5)/1 var(--font-body); color: var(--text-primary); }
.account-dash__meta, .account-dash__dates { margin: 0; }
.account-dash__note { margin: 0; color: var(--text-muted); font-size: var(--fs-body-sm); }
.account-dash__current .tt-btn { justify-self: start; margin-top: var(--space-2xs); }
.account-dash__actions { display: grid; gap: var(--space-md); }
@media (min-width: 48rem) { .account-dash__actions { grid-template-columns: repeat(3, 1fr); } }
.account-card {
  display: grid; gap: var(--space-3xs);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--surface-raised-alt);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.account-card:hover { border-color: var(--accent-primary); transform: translateY(-2px); }
.account-card__icon { display: inline-flex; color: var(--accent-primary); margin-bottom: var(--space-2xs); }
.account-card__icon svg { width: 1.75rem; height: 1.75rem; display: block; }
.account-card__title { font: var(--fw-semibold) var(--fs-body) var(--font-body); color: var(--text-primary); }
.account-card__text { font-size: var(--fs-body-sm); color: var(--text-muted); }

/* My Bookings */
.account-bookings { display: grid; gap: var(--space-md); }
.account-booking {
  display: flex; flex-wrap: wrap; gap: var(--space-md);
  justify-content: space-between; align-items: center;
  padding: var(--space-lg);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  background: var(--surface-raised-alt);
}
.account-booking__num { margin: var(--space-3xs) 0; font: var(--fw-semibold) var(--fs-h5)/1 var(--font-body); }
.account-booking__meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin: var(--space-xs) 0 var(--space-2xs); }
.account-booking__status {
  display: inline-block; padding: 2px var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--surface-band-peach); color: var(--text-primary);
  font: var(--fw-semibold) var(--fs-eyebrow)/1.4 var(--font-body);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
}
.account-booking__status--completed { background: var(--status-available-bg); color: var(--status-available-fg); }
.account-booking__status--out { background: var(--status-available-bg); color: var(--status-available-fg); }
.account-booking__status--returned { background: var(--surface-sunken); color: var(--text-muted); }
.account-booking__status--cancelled { background: var(--status-unavailable-bg); color: var(--status-unavailable-fg); }
.account-bookings__group + .account-bookings__group { margin-top: var(--space-2xl); }
.account-bookings__heading { margin: 0 0 var(--space-md); }
.account-booking__addr { margin: var(--space-2xs) 0 0; color: var(--text-muted); }
.account-booking__refund { color: var(--text-secondary); font-weight: var(--fw-semibold); font-family: var(--font-body); }
.account-booking__items { margin: 0; color: var(--text-secondary); font-size: var(--fs-body-sm); }
.account-booking__side { display: grid; gap: var(--space-xs); justify-items: end; }
.account-booking__total { font-family: var(--font-display); color: var(--text-brand); font-size: var(--fs-h5); }
.account-booking__actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.account-bookings__pagination { display: flex; gap: var(--space-xs); justify-content: center; margin-top: var(--space-lg); }
.account-empty { text-align: center; display: grid; gap: var(--space-md); justify-items: center; padding-block: var(--space-2xl); }

/* Logged-out (login) + account forms */
.woocommerce-account:not(.logged-in) .woocommerce { max-width: 34rem; margin-inline: 0; }
.tt-auth {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.tt-auth__title { margin: 0; font: var(--fw-semibold) var(--fs-h4)/1.2 var(--font-body); color: var(--text-primary); }
.tt-auth__intro { margin: calc(var(--space-md) * -0.5) 0 0; color: var(--text-secondary); font-size: var(--fs-body-sm); }
.tt-auth form { display: grid; gap: var(--space-md); }
.tt-auth .form-row { margin-bottom: 0; }
.tt-auth__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.tt-auth__actions .button,
.tt-auth__actions button { width: auto; }
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields,
.woocommerce-account .woocommerce-ResetPassword { display: grid; gap: var(--space-md); }
.woocommerce-account .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--fs-body-sm); color: var(--text-secondary); }
.woocommerce-account .lost_password a,
.woocommerce-account .woocommerce-LostPassword a { color: var(--text-link); font-size: var(--fs-body-sm); }
.woocommerce-account fieldset { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-md); margin: var(--space-md) 0 0; }
.woocommerce-account fieldset legend { padding: 0 var(--space-2xs); font: var(--fw-semibold) var(--fs-body)/1 var(--font-body); color: var(--text-primary); }
/* Hide WC's unstyled password show/hide toggle (renders as an empty box) */
.woocommerce .show-password-input,
.woocommerce-account .show-password-input { display: none; }
.woocommerce-account .woocommerce-address-fields .tt-country-locked__value { max-width: 20rem; }

.woocommerce-account .page-article__header { margin-bottom: var(--space-xl); }

/* Addresses list */
.woocommerce-Addresses { display: grid; gap: var(--space-lg); }
@media (min-width: 48rem) { .woocommerce-Addresses.woocommerce-Addresses--col2 { grid-template-columns: 1fr 1fr; } }
.woocommerce-Address address { font-style: normal; line-height: var(--lh-body); color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-md); margin-top: var(--space-xs); }
.woocommerce-Address-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); }
.woocommerce-Address-title h2, .woocommerce-Address-title h3 { margin: 0; font: var(--fw-semibold) var(--fs-h5)/1.2 var(--font-body); }
.woocommerce-Address-title .edit { color: var(--text-link); font-size: var(--fs-body-sm); }

/* View order (booking detail) tables */
.woocommerce-MyAccount-content table.shop_table,
.woocommerce-MyAccount-content .woocommerce-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-lg); }
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td { text-align: left; padding: var(--space-sm) var(--space-xs); border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-body-sm); color: var(--text-secondary); }
.woocommerce-MyAccount-content .woocommerce-customer-details address { font-style: normal; color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-md); }
.woocommerce-MyAccount-content .woocommerce-order-details__title,
.woocommerce-MyAccount-content .woocommerce-column__title { font: var(--fw-semibold) var(--fs-h5)/1.2 var(--font-body); color: var(--text-primary); margin: var(--space-lg) 0 var(--space-md); }

/* Booking detail (view order) */
.booking-detail { display: grid; gap: var(--space-lg); }
.booking-detail__status { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin: 0; }
.booking-detail__delivery { display: grid; gap: var(--space-md); }
.booking-detail__facts { display: grid; gap: var(--space-md); margin: 0; }
@media (min-width: 40rem) { .booking-detail__facts { grid-template-columns: 1fr 1fr; } }
.booking-detail__facts dt { font-size: var(--fs-body-sm); color: var(--text-muted); margin-bottom: var(--space-3xs); }
.booking-detail__facts dd { margin: 0; color: var(--text-primary); line-height: var(--lh-body); }
.booking-detail__tools { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.booking-detail__locked { margin: 0; color: var(--text-secondary); }
.booking-detail__edit { display: grid; gap: var(--space-md); border-top: 1px solid var(--border-subtle); padding-top: var(--space-md); margin-top: var(--space-2xs); }
.booking-detail__edit-row { display: grid; gap: var(--space-md); }
@media (min-width: 30rem) { .booking-detail__edit-row { grid-template-columns: 1fr 1fr; } }
.booking-detail__edit-actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.booking-detail__updates { display: grid; gap: var(--space-sm); }
.booking-detail__notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.booking-detail__notes > li { display: grid; gap: var(--space-3xs); }
.booking-detail__notes p { margin: 0; }
.booking-detail__notes div p { color: var(--text-secondary); }

/* --- Featured bundles carousel --- */
.home-bundles__cta { text-align: center; margin-top: var(--space-xl); }
.bundle-carousel { position: relative; }
.bundle-carousel__viewport { overflow: hidden; border-radius: var(--radius-xl); }
.bundle-carousel__track {
  display: flex;
  /* A full-width slide is a long distance to cover — ease-out front-loads it
     into the first few frames, which reads as a jump rather than a slide. */
  transition: transform var(--dur-slow) var(--ease-in-out);
}
.bundle-card {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
  background: var(--surface-band-peach);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
}
@media (min-width: 48rem) {
  .bundle-card { grid-template-columns: 1.1fr 1fr; padding: var(--space-2xl); gap: var(--space-2xl); }
}
.bundle-card__media { display: block; border-radius: var(--radius-lg); overflow: hidden; }
.bundle-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.bundle-card__body { display: grid; gap: var(--space-md); align-content: center; }
.bundle-card__title { margin: 0; }
.bundle-card__pricing { display: flex; gap: var(--space-xs); flex-wrap: wrap; align-items: baseline; }
.bundle-card__desc { color: var(--text-secondary); }
.bundle-card__desc p { margin: 0; }
/* "Includes" — the bundle's component products as thumbnail + name chips. */
.bundle-card__includes-label { margin: 0 0 var(--space-xs); color: var(--text-muted); }
.bundle-card__includes { margin: var(--space-xs) 0; }
.bundle-card__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.bundle-card__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  max-width: 100%;
  padding: var(--space-3xs) var(--space-sm) var(--space-3xs) var(--space-3xs);
    background: #fffdf791;
    border: 1px solid #ecdcbf6b;
  border-radius: var(--radius-pill);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}
.bundle-card__item-thumb {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-round);
  overflow: hidden;
  background: var(--surface-sunken);
}
.bundle-card__item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bundle-card__item-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bundle-card__item--more { padding-inline: var(--space-sm); color: var(--text-secondary); }
.bundle-card__cta { justify-self: start; }
/* Controls row: prev arrow · dots · next arrow, centred below the carousel. */
.bundle-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.bundle-carousel__nav {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-round);
  background: var(--surface-raised-alt);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  color: var(--text-strong);
  cursor: pointer;
}
.bundle-carousel__nav--prev { order: 0; }
.bundle-carousel__nav--next { order: 2; }
.bundle-carousel__nav:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.bundle-carousel__dots { order: 1; display: flex; gap: var(--space-xs); justify-content: center; margin-top: 0; }
.bundle-carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--border-default);
  cursor: pointer;
}
.bundle-carousel__dot.is-active { background: var(--accent-primary); }

/* --- How It Works (olive band, animated timeline) --- */
.home-hiw__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.home-hiw__head { max-width: 30rem; }
.home-hiw__eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h5);
  color: var(--text-on-dark);
  opacity: 0.85;
  margin: 0 0 var(--space-sm);
}
.home-hiw__head h2 { text-wrap: balance; }
/* Horizontal timeline: dotted track (::before) runs full width past the end
   nodes; the cream fill (::after) draws in on scroll. Labels alternate. */
.hiw-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 9rem;
}
.hiw-timeline::before,
.hiw-timeline::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 0;
  border-top: 2px dashed var(--c-olive-700);
  /* Soft fade at both ends of the dotted line. */
  -webkit-mask: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
/* The cream "fill" line — full by default (no-JS), scrubbed by scroll when JS
   adds .is-scrubbed (clip reveals it left-to-right as you scroll). */
.hiw-timeline::after { border-top-color: var(--text-on-dark); }
.hiw-timeline.is-scrubbed::after {
  clip-path: inset(0 calc(100% - var(--hiw-progress, 0) * 100%) 0 0);
}
.hiw-step {
  flex: 1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 9rem;
}
/* Steps pop in as the line reaches them (only when scroll-scrubbing). */
.hiw-timeline.is-scrubbed .hiw-step {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.hiw-timeline.is-scrubbed .hiw-step.is-reached { opacity: 1; }
.hiw-step__node {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-round);
  background: var(--c-olive-700);
  color: var(--text-on-dark);
}
.hiw-timeline.is-scrubbed .hiw-step__node {
  transform: scale(0.55);
  transition: transform var(--dur-base) var(--ease-out);
}
.hiw-timeline.is-scrubbed .hiw-step.is-reached .hiw-step__node { transform: scale(1); }
.hiw-step__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font: var(--fw-semibold) var(--fs-h5)/1.2 var(--font-body);
  color: var(--text-on-dark);
}
.hiw-step:nth-child(odd) .hiw-step__title { top: calc(50% + 2.25rem); }
.hiw-step:nth-child(even) .hiw-step__title { bottom: calc(50% + 2.25rem); }

@media (min-width: 64rem) {
  .home-hiw__inner { grid-template-columns: minmax(0, 22rem) 1fr; gap: var(--space-4xl); }
}
@media (max-width: 63.99rem) {
  /* Centred headings + a static 2×2 grid of steps (no timeline line). */
  .home-hiw__head { max-width: none; text-align: center; }
  .hiw-timeline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl) var(--space-lg);
    min-height: 0;
    max-width: 30rem;
    margin-inline: auto;
  }
  .hiw-timeline::before,
  .hiw-timeline::after { display: none; }
  .hiw-step { flex-direction: column; min-height: 0; gap: var(--space-sm); }
  .hiw-step__title { position: static; transform: none; white-space: normal; text-align: center; }
  /* No scroll-scrub reveal on the grid — steps are always shown. */
  .hiw-timeline.is-scrubbed .hiw-step { opacity: 1; }
  .hiw-timeline.is-scrubbed .hiw-step__node { transform: none; }
}

/* --- Our story --- */
.home-story__inner {
  display: grid;
  gap: var(--space-6xl);
  align-items: center;
  grid-template-columns: 1fr;
}
.home-story__content { display: grid; gap: var(--space-md); justify-items: start; }
.home-story__heading { color: var(--text-primary); }
.home-story__media { position: relative; }
.home-story__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-xl);
}
.home-story__overlay {
  position: absolute;
  top: calc(-1 * var(--space-xl));
  right: calc(-1 * var(--space-lg));
  width: clamp(7rem, 13vw, 13rem);
  height: auto;
  z-index: 2;
  pointer-events: none;
}
.home-story__stamp {
  position: absolute;
  left: 0;
  bottom: 0;
  /* centre of the stamp sits on the image's bottom-left corner */
  transform: translate(-50%, 50%);
  width: clamp(6rem, 11vw, 10rem);
  height: auto;
  z-index: 2;
}
.home-story__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: clamp(5.5rem, 9vw, 9rem);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: var(--radius-round);
  background: var(--surface-band-accent);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  box-shadow: var(--shadow-md);
  z-index: 2;
}
@media (min-width: 64rem) {
  .home-story__inner { grid-template-columns: 1fr 1fr; }
  .home-story--media-left .home-story__content { order: 2; }
  .home-story--media-left .home-story__media { order: 1; }
}
@media (max-width: 63.99rem) {
  /* Image first, then centred content; tighter spacing; no corner stamp. */
  .home-story__inner { gap: var(--space-xl); }
  .home-story__media { order: -1; }
  .home-story__content { justify-items: center; text-align: center; gap: var(--space-sm); }
  .home-story__img { border-radius: var(--radius-md); }
  .home-story__stamp,
  .home-story__badge { display: none; }
}

/* --- Brands — dual opposing marquee --- */
.home-brands__heading { text-align: center; margin: 0 0 var(--space-xl); }
/* Two rows scrolling in opposite directions. overflow:hidden clips the loop;
   the mask fades the logos out at both edges. */
.brand-marquee {
  display: grid;
  gap: var(--space-2xl);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.brand-marquee__row { overflow: hidden; }
.brand-marquee__track {
  display: flex;
  width: max-content;
  animation: brand-scroll 90s linear infinite;
}
/* Bottom row travels the other way. */
.brand-marquee__row--reverse .brand-marquee__track { animation-direction: reverse; }
/* Pause on hover so a logo can be read/clicked. */
.brand-marquee:hover .brand-marquee__track { animation-play-state: paused; }
.brand-marquee__group { display: flex; align-items: center; flex: 0 0 auto; }
/* Symmetric padding doubles as the gap between groups, keeping the loop seamless. */
.brand-marquee__item { padding-inline: var(--space-3xl); display: inline-flex; align-items: center; }
@keyframes brand-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  /* No motion: collapse to a single static, centred, wrapping row. */
  .brand-marquee__track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
  .brand-marquee__row--reverse { display: none; }
  .brand-marquee__group[aria-hidden="true"] { display: none; }
}
.brand-row__link { display: inline-flex; align-items: center; text-decoration: none; }
/* Small, uniform footprint: fixed height + capped width with object-fit means a
   wide wordmark and a square badge both sit inside the same box. Softened colour
   (muted + faded) so the logos read as a quiet trust strip; full colour on hover. */
.brand-row__logo {
  height: clamp(1.25rem, 2vw, 1.75rem);
  max-width: 7.5rem;
  width: auto;
  object-fit: contain;
  opacity: 0.6;
  filter: saturate(0.45);
  transition: opacity var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.brand-row__link:hover .brand-row__logo { opacity: 1; filter: saturate(1); }
.brand-row__name {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  color: var(--text-brand);
  transition: color var(--dur-fast) var(--ease-out);
}
.brand-row__link:hover .brand-row__name { color: var(--text-accent); }

/* --- Testimonials --- */
.testimonial-grid {
  display: grid;
  gap: var(--space-4xs);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg);} }
.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
.testimonial__stars { display: flex; gap: var(--space-3xs); color: var(--accent-secondary); }
.testimonial__star { fill: currentColor; }
.testimonial__quote { margin: 0; flex: 1; color: var(--text-secondary); }
.testimonial__author { display: flex; align-items: center; gap: var(--space-sm); }
.testimonial__avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-round);
  background: var(--accent-calm);
  color: var(--text-on-accent);
  font: var(--fw-semibold) var(--fs-body)/1 var(--font-body);
}
.testimonial__meta { display: grid; }
.testimonial__name { font-weight: var(--fw-semibold); color: var(--text-primary); }
.testimonial__loc { font-size: var(--fs-body-sm); color: var(--text-muted); }

/* --- CTA band --- */
.home-cta { position: relative; overflow: hidden; text-align: center; }
.home-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cta-pattern);
  background-repeat: repeat;
  background-position: center top;
  background-size: 95px 184px; /* one half-drop tile; scale both to resize */
  opacity: 0.13;
  pointer-events: none;
}
.home-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  margin: 0 auto;
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  padding: var(--space-3xl);
    background: var(--text-accent);
    border: 1px solid #e19070;
        border-radius: var(--radius-md);
    margin-bottom: var(--space-2xl);
}
@media (max-width: 48rem)  {
  .home-cta__inner { 
    max-width: 22rem;
        padding: var(--space-xl);
  }
}

.home-cta__eyebrow { margin: 0; color: var(--c-cream); opacity: 0.92; }
.home-cta__heading { margin: 0; color: var(--text-on-dark); text-wrap: balance; }
.home-cta__sub { margin: 0; color: var(--text-on-dark); opacity: 0.92; text-wrap: balance; margin-bottom: var(--space-md); }

/* --- Motion preferences --- */
@media (prefers-reduced-motion: reduce) {
  .home-hero__bubble { animation: none; }
}

/* ==========================================================================
   10. HOW IT WORKS PAGE (page-how-it-works.php)
   --------------------------------------------------------------------------
   A long-form companion to the home timeline: centred intro, alternating
   two-column steps, an FAQ accordion (native <details>), then a CTA band that
   reuses the .home-cta styling above.
   ========================================================================== */
/* Intro is the shared .page-hero (section 12). --- Steps --- */
.hiw-page__steps {
  display: grid;
  gap: var(--space-5xl);
  padding-top: var(--space-2xl);
  padding-bottom: var(--section-py);
}
.hiw-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.hiw-row__content { display: grid; gap: var(--space-md); justify-items: start; }
.hiw-row__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
}
.hiw-row__num {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-round);
  background: var(--surface-band-accent);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  line-height: 1;
}
.hiw-row__step-label {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hiw-row__title { margin: 0; color: var(--text-primary); }
.hiw-row__text { color: var(--text-secondary); }
.hiw-row__text > *:first-child { margin-top: 0; }
.hiw-row__text > *:last-child { margin-bottom: 0; }

.hiw-row__media { position: relative; }
.hiw-row__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-xl);
}
.hiw-row__img--placeholder {
  display: grid;
  place-items: center;
  background: var(--surface-sunken, var(--surface-raised));
  border: 1px dashed var(--border-subtle);
  color: var(--accent-secondary);
}

@media (min-width: 64rem) {
  .hiw-row { grid-template-columns: 1fr 1fr; gap: var(--space-5xl); }
  .hiw-row--media-left .hiw-row__content { order: 2; }
  .hiw-row--media-left .hiw-row__media { order: 1; }
}

/* --- How It Works FAQ section wrapper (peach band) --- */
.hiw-faq__inner { display: grid; gap: var(--space-2xl); }
.hiw-faq__head { text-align: center; max-width: 40rem; margin-inline: auto; }

/* --- Shared closing CTA band (template-parts/cta.php); styled via .home-cta --- */

/* ==========================================================================
   11. FAQ — shared accordion + standalone FAQ page (page-faq.php)
   --------------------------------------------------------------------------
   .faq-accordion is the reusable disclosure list (template-parts/faq/
   accordion.php), shared by the FAQ page and the How It Works FAQ section.
   ========================================================================== */
.faq-accordion {
  display: grid;
  gap: var(--space-sm);
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
}
.faq-accordion__item {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding-inline: var(--space-lg);
}
.faq-accordion__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  color: var(--text-primary);
}
.faq-accordion__q::-webkit-details-marker { display: none; }
.faq-accordion__q:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.faq-accordion__chevron {
  flex: 0 0 auto;
  color: var(--text-muted);
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq-accordion__item[open] .faq-accordion__chevron { transform: rotate(180deg); }
.faq-accordion__a {
  padding-bottom: var(--space-lg);
  color: var(--text-secondary);
}
.faq-accordion__a > *:first-child { margin-top: 0; }
.faq-accordion__a > *:last-child { margin-bottom: 0; }

/* --- Standalone FAQ page (intro is the shared .page-hero, section 12) --- */
.faq-page__body { padding-bottom: var(--space-5xl); }
.faq-page__empty { text-align: center; color: var(--text-muted); }

/* ==========================================================================
   12. STATIC-PAGE HERO (template-parts/page-intro.php)
   --------------------------------------------------------------------------
   Full-width header band for static pages (How It Works, FAQ, About, and the
   generic page.php). Uses the same barely-there fabric texture as the desktop
   mega menu (uploads/texture.jpg washed by a near-opaque surface tint); the
   title block is vertically centred within the band.
   ========================================================================== */
.page-hero {
  --hero-tint: var(--surface-base);
  --hero-wash: 82%;
  min-height: clamp(14rem, 30vh, 22rem);
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--space-4xl);
  background-color: var(--hero-tint);
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--hero-tint) var(--hero-wash), transparent),
      color-mix(in srgb, var(--hero-tint) var(--hero-wash), transparent)
    ),
    url("/wp-content/uploads/texture.jpg");
  background-repeat: no-repeat, repeat;
  background-position: center, top left;
  background-size: cover, 360px auto;
}
.page-hero__inner {
  max-width: 44rem;
  display: grid;
  justify-items: center;
  gap: var(--space-md);
}
.page-hero__eyebrow { margin: 0; }
.page-hero__title { margin: 0; color: var(--text-primary); text-wrap: balance; }
.page-hero__lede { margin: 0; color: var(--text-secondary); }
.page-hero__lede > * { margin: 0; }
/* Extra breathing room between the hero band and whatever section follows. */
.page-hero + * { margin-top: var(--space-2xl); }

/* ==========================================================================
   13. ABOUT PAGE (page-about-us.php)
   ========================================================================== */
/* Two-column text + image section */
.about-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
  padding-block: var(--space-2xl) var(--section-py);
}
.about-cols__content { display: grid; gap: var(--space-md); justify-items: start; }
.about-cols__heading { color: var(--text-primary); }
.about-cols__text { color: var(--text-secondary); }
.about-cols__text > *:first-child { margin-top: 0; }
.about-cols__text > *:last-child { margin-bottom: 0; }
.about-cols__media { position: relative; }
.about-cols__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-xl);
}
.about-cols__img--placeholder {
  display: grid;
  place-items: center;
  background: var(--surface-sunken, var(--surface-raised));
  border: 1px dashed var(--border-subtle);
  color: var(--accent-secondary);
}
@media (min-width: 64rem) {
  .about-cols { grid-template-columns: 1fr 1fr; gap: var(--space-5xl); }
  .about-cols--media-left .about-cols__content { order: 2; }
  .about-cols--media-left .about-cols__media { order: 1; }
}

/* Instagram section — centred heading + feed slot */
.about-instagram { padding-bottom: var(--space-5xl); }
.about-instagram__inner { display: grid; gap: var(--space-2xl); }
.about-instagram__head { text-align: center; max-width: 40rem; margin-inline: auto; display: grid; gap: var(--space-sm); }
.about-instagram__heading { margin: 0; color: var(--text-primary); }
.about-instagram__feed { display: grid; }
.about-instagram__placeholder {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-4xl) var(--space-lg);
  background: var(--surface-band-peach);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   14. CLIENT GUIDE (private internal page)
   --------------------------------------------------------------------------
   Long-form reference page. Sits inside .page-article__content's grid as a
   single child, so spacing is owned here rather than by that grid's gap.
   ========================================================================== */
.guide {
  max-width: 68ch;
  margin-inline: auto;
  display: grid;
  gap: var(--space-sm);
}
.guide > * { margin: 0; }

.guide h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--text-strong);
  margin-top: var(--space-xl);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-subtle);
}
.guide h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

.guide h3 {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  margin-top: var(--space-sm);
}

.guide p,
.guide li { line-height: var(--lh-relaxed); color: var(--text-secondary); }
.guide strong { color: var(--text-strong); font-weight: var(--fw-semibold); }
.guide ul, .guide ol { padding-left: var(--space-md); display: grid; gap: var(--space-3xs); }

.guide__lede {
  font-size: var(--fs-body-lg);
  color: var(--text-primary);
}

/* Rule tables: label + value + why. */
.guide__table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
.guide__table th,
.guide__table td {
  text-align: left;
  padding: var(--space-2xs) var(--space-xs);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.guide__table th {
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  white-space: nowrap;
}
.guide__table thead th {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom-color: var(--border-default);
}
.guide__table td { color: var(--text-secondary); }
.guide__scroll { overflow-x: auto; }

/* Worked example: a vertical day-by-day timeline. */
.guide__timeline { display: grid; gap: var(--space-2xs); padding-left: 0; list-style: none; }
.guide__timeline li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--space-xs);
  align-items: baseline;
  padding-bottom: var(--space-2xs);
  border-bottom: 1px dashed var(--border-subtle);
}
.guide__day { font-weight: var(--fw-semibold); color: var(--text-strong); font-size: var(--fs-body-sm); }

.guide__callout {
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-band-peach);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-3xs);
}
.guide__callout--action { background: var(--c-warning-bg); }

.guide__toc { padding: var(--space-sm) var(--space-md); background: var(--surface-sunken); border-radius: var(--radius-md); }
.guide__toc ol { padding-left: var(--space-md); }