/* Shared site nav — single source of truth for /home, /shop and the
   static landing pages (/experiences, /stay, /dine, /club, /contact).
   The booking SPA (/lodge, /restaurant, /experiences-booking) keeps
   its own simpler header from public/js/main.js.

   Selectors include both the "home-" / "shop-" container class names
   /home and /shop's HTML use AND the "site-" alias the landing pages
   use, so the same CSS works on every page without an HTML rename. */

:root {
  --ink: #1b1b1b;
  --muted: #756a61;
  --paper: #fbf7ef;
  --paper-soft: #f4ecdc;
  --gold: #C9A868;
  --gold-hover: #A37C30;
  --line: #ead9bd;
  --body-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display-font: "Goudy Bookletter 1911", Georgia, "Times New Roman", serif;
}

/* Disable browser scroll anchoring globally. When Commerce7 (or any
   async DOM source) inserts content into the page after the user
   has started scrolling, the browser's default scroll-anchor logic
   can yank the viewport back to the top trying to keep some anchor
   element stable. We'd rather hold the visitor's manual scroll
   position. /home had this inline on its `html` rule; we hoist it
   to the shared file so /shop and the landing pages benefit too. */
html {
  overflow-anchor: none;
  /* Reserve a consistent scrollbar gutter on all pages so the nav
     width never shifts between pages with and without a scrollbar. */
  scrollbar-gutter: stable;
  /* Match the thin scrollbar used on /home (via styles.css) so the
     gutter width is identical across all pages. */
  scrollbar-width: thin;
  scrollbar-color: rgba(45, 37, 31, 0.2) transparent;
}

/* === Site header ============================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  /* NOTE: Do NOT add will-change:transform or transform:translateZ(0) here.
     Both create a new containing block for position:fixed descendants in
     Chrome/Firefox, which traps #c7-side-cart inside the 68px header box
     instead of letting it fill the full viewport. The header's own
     position:fixed + z-index:40 already gives it a compositing layer. */
  /* Grid layout — logo (auto, left), nav (1fr, centred), right
     cluster (auto, right). Was 1fr auto 1fr with the logo centred;
     moved to a left-anchored logo so the wordmark sits with the rest
     of the brand chrome and the nav fills the middle. /home and
     /shop inherit the same grid from /styles.css. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 8px 0;
  z-index: 40;
  background: #fff;
  box-shadow: none;
  transition: background 220ms ease, box-shadow 220ms ease;
  transition: background 220ms ease;
}
/* Two-variant logotype stack anchored to the left of the grid. The
   crest version of the mark is no longer used in the header — only
   the wordmark logotype, in dark over the paper sticky background
   and in white over the hero. */
.site-header-link {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: inline-block;
  line-height: 0;
}
.site-header-logo-stack {
  position: relative;
  display: inline-block;
  /* Logotype (830×128, ~6.5:1). Width drives height: 168px → ~26px tall.
     Mobile breakpoint shrinks further via the hamburger layout. */
  width: 136px;
  line-height: 0;
}
.site-header-logo {
  display: block;
  width: 100%;
  height: auto;
}

/* Dark wordmark always shown — the header now sits on a solid paper
   background at every scroll position, so the over-hero white variant
   is unused. */
.site-header-logo--type {
  opacity: 1;
  width: 100%;
}
.site-header-logo--white { display: none; }

/* Sticky bg — always solid white with a soft drop shadow. */
.site-header.is-sticky {
  background: #fff;
  box-shadow: 0 4px 16px rgba(45, 37, 31, 0.06);
}

/* (Default-state white-text rules removed — the header is now always
   on a solid paper background, so the nav links, hamburger, and c7
   chrome use their normal dark-ink default colours at every scroll
   position.) */

/* Mobile header default state. */
@media (max-width: 720px) {
  .site-header {
    background: #fff;
    box-shadow: 0 4px 16px rgba(45, 37, 31, 0.06);
  }
  .site-header-logo--white {
    display: none;
  }
  .site-header-logo--type {
    opacity: 1 !important;
  }
}

/* === Commerce7 account + cart widgets ========================= */

.home-c7-host,
.site-c7-host,
.shop-c7-host {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Fixed height (not min-height) so a transient row-height change on
     the grid — e.g. when a nav item's mega panel opens and triggers
     a sub-pixel repaint — can't shift the CTAs vertically. */
  height: 52px;
  margin-right: clamp(14px, 2vw, 28px);
  --c7-alt-text-color: #c9a868;
  --c7-heading-font-family: "Goudy Bookletter 1911";
  --c7-heading-font-weight: 600;
  --c7-link-color: #1b1b1b;
  --c7-field-option-selected-color: #C9A868;
  --c7-field-option-focus-color: #c9a968c2;
  --c7-primary-button-bg: #C9A868;
  --c7-primary-button-bg-hover: #b8944f;
  --c7-alt-button-bg: transparent;
  --c7-alt-button-bg-hover: #C9A868;
  --c7-cart-count-bg: #C9A868;
  --c7-cart-count-bg-focus: #C9A868;
}
.home-c7-host #c7-cart,
.site-c7-host #c7-cart,
.shop-c7-host #c7-cart {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 52px;
}
/* Show cart only when it contains items. */
.home-c7-host #c7-cart:has(button[aria-label*="contains"]:not([aria-label*="contains 0 items"])),
.site-c7-host #c7-cart:has(button[aria-label*="contains"]:not([aria-label*="contains 0 items"])) {
  display: inline-flex;
}
/* Shop is the exception — the cart icon is always visible there, even
   when empty, so customers always have an obvious way to open it. */
.shop-c7-host #c7-cart { display: inline-flex; }

/* (Book editorial-link underline rule lives further down, after
   .site-c7-host-link, so it wins the cascade.) */

/* Mobile-drawer CTA — gold pill at the bottom of the list, stands
   out against the dark-frosted drawer bg. */
.home-mobile-nav-list .home-mobile-nav-cta {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 14px 28px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #fff !important;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: clamp(0.92rem, 4vw, 1.05rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  border-bottom: 1px solid var(--gold) !important;
}

/* Commerce7's official account widget — when logged out the bundle
   injects a "Login" button into #c7-account; when logged in it swaps
   to "Hello, [Name]" with a dropdown (account info, orders, wine
   club, logout). We adopt the widget so that state is driven by the
   c7 customerToken cookie instead of a hand-rolled link, and re-skin
   its internals to match the surrounding nav typography. Same fade-in
   gate as #c7-cart so the slot doesn't blink before c7's bundle
   paints. */
.home-c7-host #c7-account,
.site-c7-host #c7-account,
.shop-c7-host #c7-account {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  opacity: 0;
  transition: opacity 320ms ease;
}
.home-c7-host:has(#c7-account > *) #c7-account,
.site-c7-host:has(#c7-account > *) #c7-account,
.shop-c7-host:has(#c7-account > *) #c7-account { opacity: 1; }

/* Force the widget's clickable trigger to look like a .site-c7-host-link
   (uppercase, 0.78rem, 0.16em letter-spacing, ink → gold on hover) so
   "Log in" / "Hello, [Name]" sit on the same baseline as Club / Contact.
   c7 renders an anchor with class __account__login when logged out and
   a button with class __account__title when logged in. */
#c7-account .c7-user-nav__account,
#c7-account .c7-user-nav__account__login,
#c7-account .c7-user-nav__account__title,
#c7-account .c7-user-nav__account__name,
#c7-account .c7-user-nav__account button,
#c7-account .c7-user-nav__account .c7-link {
  background: transparent !important;
  border: 0 !important;
  padding: 8px 4px !important;
  margin: 0 !important;
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  cursor: pointer;
  transition: color 220ms ease;
}
#c7-account .c7-user-nav__account__login:hover,
#c7-account .c7-user-nav__account__login:focus,
#c7-account .c7-user-nav__account__title:hover,
#c7-account .c7-user-nav__account__title:focus,
#c7-account .c7-user-nav__account button:hover,
#c7-account .c7-user-nav__account button:focus,
#c7-account .c7-user-nav__account .c7-link:hover,
#c7-account .c7-user-nav__account .c7-link:focus { color: var(--gold); }

/* Logged-in dropdown — c7's actual structure (confirmed via copy-out
   of the rendered HTML):
     .c7-user-nav__account__dropdown
       .c7-user-nav__account__dropdown__header
         <p><a href="/profile/">Jan Saager<span>jan@…</span></a></p>
       <ul><li><a>Dashboard</a></li>… </ul>
       <a class="…__dropdown__logout" href="/profile/logout">Log out + svg</a>
   The email is a generic <span> inside the header anchor — we target
   it via `header a > span`. Reservations is at /profile/reservation
   (singular) so an href match hides it cleanly. */
#c7-account .c7-user-nav__account__dropdown {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(45, 37, 31, 0.12);
  padding: 0;
  min-width: 280px;
  overflow: hidden;
}
/* Header — make the wrapping <p> + <a> stack the name above the email
   and paint the bottom divider that separates the greeting from the
   menu list. */
#c7-account .c7-user-nav__account__dropdown__header {
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
#c7-account .c7-user-nav__account__dropdown__header p { margin: 0; }
#c7-account .c7-user-nav__account__dropdown__header a {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  color: var(--ink) !important;
  font-family: var(--body-font);
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  line-height: 1.2;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
#c7-account .c7-user-nav__account__dropdown__header a > span {
  display: block;
  color: var(--gold) !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1.2;
  word-break: break-all;
}
/* Menu list — title-case items, gold-tinted hover. Scoped to `ul li a`
   so the header anchor (also a child of `__dropdown`) doesn't pick up
   these rules. */
#c7-account .c7-user-nav__account__dropdown ul {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
#c7-account .c7-user-nav__account__dropdown ul li { margin: 0; }
#c7-account .c7-user-nav__account__dropdown ul li a {
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--ink) !important;
  font-family: var(--body-font);
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 10px 22px !important;
  text-decoration: none;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}
#c7-account .c7-user-nav__account__dropdown ul li a:hover {
  color: var(--gold) !important;
  background: rgba(201, 168, 104, 0.08) !important;
}
/* Reservations item — hide by href; the route is /profile/reservation. */
#c7-account .c7-user-nav__account__dropdown ul li a[href*="reservation" i] {
  display: none !important;
}
/* Log Out — c7 renders it as a sibling anchor with its own class,
   outside the <ul>. Treat it like a list item but with a divider line
   above and the arrow-out svg pushed to the right. */
/* `.c7-link.c7-user-nav__account__dropdown__logout` is a double-class
   selector to beat c7's stock `.c7-link` border reset (we hit a 0px
   border-top in testing when the rule had only single-class specificity). */
#c7-account .c7-link.c7-user-nav__account__dropdown__logout,
#c7-account a.c7-user-nav__account__dropdown__logout {
  display: flex !important;
  align-items: center;
  width: 100%;
  color: var(--ink) !important;
  font-family: var(--body-font);
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 12px 22px !important;
  text-decoration: none !important;
  background: transparent !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-top: 1px solid var(--line) !important;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}
#c7-account .c7-user-nav__account__dropdown__logout:hover {
  color: var(--gold) !important;
  background: rgba(201, 168, 104, 0.08) !important;
}
#c7-account .c7-user-nav__account__dropdown__logout svg {
  margin-left: auto;
  stroke: currentColor;
}

/* Direct-child only: the side cart itself mounts INSIDE
   .c7-user-nav__cart, so a bare `button` selector here would also
   kill the hover state on the side cart's close button. */
.home-c7-host .c7-user-nav__cart > button,
.site-c7-host .c7-user-nav__cart > button,
.shop-c7-host .c7-user-nav__cart > button { border: none; }
.home-c7-host .c7-user-nav__cart > button:hover,
.home-c7-host .c7-user-nav__cart > button:focus,
.site-c7-host .c7-user-nav__cart > button:hover,
.site-c7-host .c7-user-nav__cart > button:focus,
.shop-c7-host .c7-user-nav__cart > button:hover,
.shop-c7-host .c7-user-nav__cart > button:focus { background-color: transparent !important; }
.home-c7-host .c7-user-nav__cart__title svg,
.site-c7-host .c7-user-nav__cart__title svg,
.shop-c7-host .c7-user-nav__cart__title svg { stroke: var(--ink); transition: stroke 220ms ease; }

/* (Over-hero white-text overrides removed — the header sits on a
   solid paper background at every scroll position, so the c7 link
   chrome and cart icon keep their default dark colours throughout.) */

/* Commerce7 content routes (set by /shop's togglePortal IIFE on
   /profile, /product, /cart, /checkout, /collection) — these pages
   have a light bg and no dark hero, so we revert the over-hero
   white-text rules above and paint the header in its sticky/paper
   state regardless of scroll position. The hover banner-flip is also
   disabled (no point flipping to white-bg/ink-nav when the page is
   already that combination) and the logo swaps to the `--full` mark
   (icon + wordmark) instead of the wordmark-only `--type` variant. */
body:is(.is-shop-content, [data-room]) .site-header,
body:is(.is-shop-content, [data-room]) .site-header:hover,
body:is(.is-shop-content, [data-room]) .site-header:focus-within {
  background: #fff !important;
  box-shadow: 0 4px 16px rgba(45, 37, 31, 0.06) !important;
  box-shadow: none !important;
}
body:is(.is-shop-content, [data-room]) .site-header .site-header-logo--white { opacity: 0 !important; }
body:is(.is-shop-content, [data-room]) .site-header .site-header-logo--type { opacity: 1 !important; }
body:is(.is-shop-content, [data-room]) .site-header .home-nav a,
body:is(.is-shop-content, [data-room]) .site-header:hover .home-nav a,
body:is(.is-shop-content, [data-room]) .site-header:focus-within .home-nav a { color: var(--ink) !important; }
body:is(.is-shop-content, [data-room]) .site-header .home-nav a:hover,
body:is(.is-shop-content, [data-room]) .site-header .home-nav a[aria-current="page"] { color: var(--gold) !important; }
/* Highlight the Club / Contact / Book links (right-side host cluster)
   in gold when that link carries aria-current="page". The second block
   uses higher specificity to beat the ink !important rule that applies
   when body.is-shop-content is present (e.g. on the Club page). */
.home-c7-host .site-c7-host-link[aria-current="page"],
.site-c7-host .site-c7-host-link[aria-current="page"],
.shop-c7-host .site-c7-host-link[aria-current="page"] { color: var(--gold) !important; }
body:is(.is-shop-content, [data-room]) .site-header .home-c7-host .site-c7-host-link[aria-current="page"],
body:is(.is-shop-content, [data-room]) .site-header .site-c7-host .site-c7-host-link[aria-current="page"],
body:is(.is-shop-content, [data-room]) .site-header .shop-c7-host .site-c7-host-link[aria-current="page"] { color: var(--gold) !important; }
body:is(.is-shop-content, [data-room]) .site-header .home-nav-toggle { color: var(--ink) !important; }
body:is(.is-shop-content, [data-room]) .site-header .home-nav-toggle:hover { background: rgba(45, 37, 31, 0.06) !important; }
body:is(.is-shop-content, [data-room]) .site-header .home-c7-host .site-c7-host-link,
body:is(.is-shop-content, [data-room]) .site-header .site-c7-host .site-c7-host-link,
body:is(.is-shop-content, [data-room]) .site-header .shop-c7-host .site-c7-host-link,
body:is(.is-shop-content, [data-room]) .site-header:hover .home-c7-host .site-c7-host-link,
body:is(.is-shop-content, [data-room]) .site-header:focus-within .home-c7-host .site-c7-host-link,
body:is(.is-shop-content, [data-room]) .site-header:hover .site-c7-host .site-c7-host-link,
body:is(.is-shop-content, [data-room]) .site-header:focus-within .site-c7-host .site-c7-host-link,
body:is(.is-shop-content, [data-room]) .site-header:hover .shop-c7-host .site-c7-host-link,
body:is(.is-shop-content, [data-room]) .site-header:focus-within .shop-c7-host .site-c7-host-link { color: var(--ink) !important; }
body:is(.is-shop-content, [data-room]) .site-header .home-c7-host .site-c7-host-link:hover,
body:is(.is-shop-content, [data-room]) .site-header .site-c7-host .site-c7-host-link:hover,
body:is(.is-shop-content, [data-room]) .site-header .shop-c7-host .site-c7-host-link:hover { color: var(--gold) !important; }
body:is(.is-shop-content, [data-room]) .site-header .home-c7-host .c7-user-nav__cart__title svg,
body:is(.is-shop-content, [data-room]) .site-header .site-c7-host .c7-user-nav__cart__title svg,
body:is(.is-shop-content, [data-room]) .site-header .shop-c7-host .c7-user-nav__cart__title svg,
body:is(.is-shop-content, [data-room]) .site-header:hover .home-c7-host .c7-user-nav__cart__title svg,
body:is(.is-shop-content, [data-room]) .site-header:focus-within .home-c7-host .c7-user-nav__cart__title svg,
body:is(.is-shop-content, [data-room]) .site-header:hover .site-c7-host .c7-user-nav__cart__title svg,
body:is(.is-shop-content, [data-room]) .site-header:focus-within .site-c7-host .c7-user-nav__cart__title svg,
body:is(.is-shop-content, [data-room]) .site-header:hover .shop-c7-host .c7-user-nav__cart__title svg,
body:is(.is-shop-content, [data-room]) .site-header:focus-within .shop-c7-host .c7-user-nav__cart__title svg { stroke: var(--ink) !important; }
body:is(.is-shop-content, [data-room]) .site-header #c7-account .c7-user-nav__account__login,
body:is(.is-shop-content, [data-room]) .site-header #c7-account .c7-user-nav__account__title,
body:is(.is-shop-content, [data-room]) .site-header #c7-account .c7-user-nav__account__name,
body:is(.is-shop-content, [data-room]) .site-header #c7-account .c7-user-nav__account button,
body:is(.is-shop-content, [data-room]) .site-header #c7-account .c7-user-nav__account .c7-link { color: var(--ink) !important; }
body:is(.is-shop-content, [data-room]) .site-header #c7-account .c7-user-nav__account__login:hover,
body:is(.is-shop-content, [data-room]) .site-header #c7-account .c7-user-nav__account__title:hover,
body:is(.is-shop-content, [data-room]) .site-header #c7-account .c7-user-nav__account button:hover,
body:is(.is-shop-content, [data-room]) .site-header #c7-account .c7-user-nav__account .c7-link:hover { color: var(--gold) !important; }
/* Suppress the desktop hover/focus mega-menu flip — on shop-content
   pages the header is already in its paper/ink state, so the banner
   flip would invert it pointlessly. */
@media (min-width: 1101px) {
  body:is(.is-shop-content, [data-room]) .site-header.was-hovered,
  body:is(.is-shop-content, [data-room]) .site-header:hover,
  body:is(.is-shop-content, [data-room]) .site-header:focus-within {
    background: #fff !important;
    box-shadow: 0 4px 16px rgba(45, 37, 31, 0.06) !important;
    box-shadow: none !important;
  }
}

.site-c7-host-link {
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 4px;
  white-space: nowrap;
  transition: color 220ms ease;
}
.site-c7-host-link:hover { color: var(--gold); }

/* Book / Shop Now — self-contained CTA buttons. NOT decorated with
   the .site-c7-host-link class (intentional): every parent-scoped
   header rule that targets .site-c7-host-link (hover, sticky, hovered
   banner-flip, over-hero white state, shop-content dark state, mobile
   hide rule) would otherwise leak into these buttons and clobber the
   colour mid-interaction. Keeping them separate makes the buttons
   immune to nav hover side-effects.
   On hover only the colours change — no lift, no shadow, just the
   palette swap with a smooth 200ms ease. */
.site-c7-host-cta,
.site-c7-host-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 6px;
  font-family: var(--display-font);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease,
              color 200ms ease;
}

/* Book — primary filled-gold action. */
.site-c7-host-cta {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: #fff;
}
/* Book is the primary nav CTA — kept hover-static on purpose so the
   already-distinctive filled-gold pill doesn't drift on hover. */
.site-c7-host-cta:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

/* Shop Now — light ghost button by default; fills to gold + white on
   hover so the colour swap is intentional and high-contrast. */
.site-c7-host-outline {
  background: #fff;
  border: 1px solid rgba(45, 37, 31, 0.18);
  color: var(--ink);
}
.site-c7-host-outline:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

/* Keyboard focus ring — soft gold halo on tab focus. */
.site-c7-host-cta:focus-visible,
.site-c7-host-outline:focus-visible {
  outline: 2px solid rgba(201, 168, 104, 0.6);
  outline-offset: 3px;
}

/* Mobile: hide both header CTAs (Shop Now + Book). The mobile hero
   surfaces Plan Your Visit / View Experiences / Book a Tasting
   directly, and the drawer footer carries Shop Now — keeping the
   compact mobile header clean (hamburger + logo only). */
@media (max-width: 720px) {
  .home-c7-host .site-c7-host-outline,
  .site-c7-host .site-c7-host-outline,
  .shop-c7-host .site-c7-host-outline,
  .home-c7-host .site-c7-host-cta,
  .site-c7-host .site-c7-host-cta,
  .shop-c7-host .site-c7-host-cta { display: none; }
}

@media (max-width: 720px) {
  .home-c7-host,
  .site-c7-host,
  .shop-c7-host { margin-right: 14px; }
  .home-c7-host .site-c7-host-link,
  .site-c7-host .site-c7-host-link,
  .shop-c7-host .site-c7-host-link { display: none; }
  .site-header:not(.is-sticky) .home-nav-toggle,
  .site-header .home-nav-toggle {
    color: var(--ink) !important;
  }
  .site-header:not(.is-sticky) .home-c7-host .c7-user-nav__cart__title svg,
  .site-header:not(.is-sticky) .site-c7-host .c7-user-nav__cart__title svg,
  .site-header:not(.is-sticky) .shop-c7-host .c7-user-nav__cart__title svg,
  .home-c7-host .c7-user-nav__cart__title svg,
  .site-c7-host .c7-user-nav__cart__title svg,
  .shop-c7-host .c7-user-nav__cart__title svg {
    stroke: var(--ink) !important;
  }
}

/* === Left-anchored logo + BOOK at the hamburger breakpoint ==== */

@media (max-width: 1100px) {
  /* Hamburger (col 1) + logo (col 2, justify-start) sit together on
     the left; BOOK link on the far right. The desktop logo's
     clamp(18px, 4vw, 56px) margin-left would push the wordmark away
     from the hamburger, so reset it. */
  .site-header-link {
    grid-column: 2 !important;
    justify-self: start !important;
    margin-left: 8px !important;
  }
}

/* === Desktop nav with mega panels ============================ */

.home-nav {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: center;
  margin-left: clamp(14px, 2vw, 28px);
  /* Pin the height so font-metric variations between display-serif
     weights (and any sub-pixel repaints during mega-panel hover
     transitions) can't grow the row and bump the right-side CTAs. */
  height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--body-font);
  position: relative;
}
.home-nav-item {
  height: 100%;
}
.home-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--body-font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0 clamp(7px, 0.8vw, 11px);
  transition: color 180ms ease;
}
.home-nav a::before {
  content: "";
  position: absolute;
  top: -16px;
  bottom: -16px;
  left: 0;
  right: 0;
}
.home-nav a:hover, .home-nav a[aria-current="page"] { color: var(--gold); }

.home-nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.home-nav-item:hover > a,
.home-nav-item:focus-within > a,
.home-nav-item:has(.home-mega:hover) > a {
  color: var(--gold) !important;
}

.home-nav-underline {
  position: absolute;
  /* -10px keeps the gold bar's bottom edge just inside the header's
     68px bottom boundary. The nav is centred by the taller c7-host
     (min-height 52px), so nav bottom sits at ~57–58px; -13px pushed
     the bar to ~70px which fell into the mega-menu area and was hidden
     by its white background. -10px lands at ~67–68px — flush with the
     header edge and clear of the mega panel.
     z-index 36 ensures the bar renders above the mega menu (z 35)
     inside the header's stacking context even when they briefly share
     the same y-band during the clip-path open animation. */
  bottom: -16px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--gold);
  opacity: 0;
  pointer-events: none;
  z-index: 36;
  transition: left 280ms cubic-bezier(0.2, 0.6, 0.2, 1),
              width 280ms cubic-bezier(0.2, 0.6, 0.2, 1),
              opacity 200ms ease;
}
.home-nav.has-underline .home-nav-underline { opacity: 0; /* underline hidden */ }

.home-mega {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  border-top: 1px solid rgba(45, 37, 31, 0.08);
  padding: 0;
  visibility: hidden;
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0s, visibility 0s;
  z-index: 35;
}
.home-nav-item:hover .home-mega,
.home-nav-item:focus-within .home-mega,
.home-mega:hover {
  visibility: visible;
  clip-path: inset(0);
  transition: clip-path 280ms cubic-bezier(0.2, 0.6, 0.2, 1),
              visibility 0s;
}
.home-nav:not(:hover):not(:focus-within) .home-mega {
  transition: clip-path 280ms cubic-bezier(0.2, 0.6, 0.2, 1) 100ms,
              visibility 0s linear 380ms;
}
.home-mega-inner {
  width: 100%;
  padding-top: 36px;
  padding-bottom: 44px;
  padding-left: clamp(18px, 4vw, 56px);
  padding-right: clamp(18px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) minmax(0, 0.85fr);
  column-gap: 32px;
}
.home-mega-eyebrow {
  margin: 0;
  padding: 0;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-mega-card {
  margin: 0;
  padding: 0;
  justify-self: start;
  align-self: start;
  width: 100%;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.home-mega-image {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 11;
  background: var(--paper-soft) center / cover no-repeat;
  border-radius: 4px;
  transition: transform 320ms ease;
  overflow: hidden;
}
.home-mega-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  background: var(--gold);
  color: #fff;
  font-family: var(--body-font);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 2px;
}
/* Next-event card in the Events mega — editorial overlay: dark pill
   top-right, big day + small month bottom-left, "View Event" pill
   bottom-right, all sitting directly on the image. Subtle gradient
   wash on the image keeps the overlays readable. Populated by
   site-nav.js once /api/events resolves. */
.home-mega-card--event .home-mega-image {
  position: relative;
}
.home-mega-image { position: relative; }
.home-mega-card--event .home-mega-image::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Diagonal wash from the bottom-left (where the date sits) up to
     the top-right, with multiple stops for a soft fall-off. Layered
     under the existing top/bottom edge fades so the pill and the
     date both stay readable regardless of the underlying image. */
  background:
    linear-gradient(45deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.83) 18%,
      rgba(0, 0, 0, 0.48) 38%,
      rgba(0, 0, 0, 0.18) 60%,
      rgba(0, 0, 0, 0) 85%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.33) 0%, rgba(0, 0, 0, 0) 30%);
  pointer-events: none;
}

.home-mega-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 8px 14px;
  background: rgba(20, 14, 9, 0.88);
  color: #fff;
  font-family: var(--body-font);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 999px;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}
.home-mega-date {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
  /* Serif display font — matches the editorial typography elsewhere. */
  font-family: var(--display-font);
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}
.home-mega-date-day {
  font-size: 3.9rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.home-mega-date-month {
  margin-top: 8px;
  font-size: 1.22rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.home-mega-grid > .home-mega-card:nth-of-type(1) { grid-column: 1; }
.home-mega-grid > .home-mega-card:nth-of-type(2) { grid-column: 2; }
.home-mega-grid > .home-mega-card:nth-of-type(3) { grid-column: 3; }
.home-mega-grid > .home-mega-aside { grid-column: 4; }
.home-mega-card:hover .home-mega-image { transform: scale(1.02); }
.home-mega-card h4 {
  margin: 0;
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink);
}
.home-mega-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}
.home-mega-aside {
  padding-left: 24px;
  border-left: 1px solid rgba(45, 37, 31, 0.08);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.home-mega-aside .home-mega-eyebrow { grid-column: auto; margin: 0; }
.home-mega-aside p { margin: 0; color: var(--ink); font-size: 0.96rem; line-height: 1.55; }
/* Editorial promo title sitting at the top of the aside (used by the
   Eikendal Club promo on every mega menu). Larger than body, normal-
   case, tight tracking — reads as a headline without competing with
   the uppercase letter-spaced card titles in the same row. */
.home-mega-aside-title {
  margin: 0;
  font-family: var(--body-font);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--ink);
}
.home-mega-aside-cta {
  align-self: flex-start;
  padding: 12px 22px;
  border: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease;
}
.home-mega-aside-cta:hover { background: var(--ink); color: #fff; }
/* `.site-header:not(.is-sticky) .home-nav a` makes top-level nav links
   white over the hero, but it leaks into the mega panel — which sits on
   a light background — turning the aside CTA's label invisible. Re-assert
   the dark ink colour for any link inside the mega panel. */
.site-header:not(.is-sticky) .home-mega a,
.site-header:not(.is-sticky) .home-mega-aside-cta {
  color: var(--ink);
}


/* Desktop header — shadow follows scroll only, not hover/focus. */
@media (min-width: 1101px) {
  .site-header { transition: none; }
  .site-header:hover,
  .site-header:focus-within {
    background: #fff !important;
    transition: background 0s;
  }
  .site-header.was-hovered:not(:hover):not(:focus-within) {
    transition: background 220ms ease 380ms;
  }
  .home-nav a { transition: none; }
  .site-header:hover .home-nav a,
  .site-header:focus-within .home-nav a {
    transition: color 0s;
  }
  .site-header.was-hovered:not(:hover):not(:focus-within) .home-nav a {
    transition: color 220ms ease 380ms;
  }
  .home-c7-host .site-c7-host-link,
  .site-c7-host .site-c7-host-link,
  .shop-c7-host .site-c7-host-link,
  #c7-account .c7-user-nav__account__login,
  #c7-account .c7-user-nav__account__title,
  #c7-account .c7-user-nav__account__name,
  #c7-account .c7-user-nav__account button,
  #c7-account .c7-user-nav__account .c7-link { transition: none; }
  .site-header:hover .home-c7-host .site-c7-host-link,
  .site-header:focus-within .home-c7-host .site-c7-host-link,
  .site-header:hover .site-c7-host .site-c7-host-link,
  .site-header:focus-within .site-c7-host .site-c7-host-link,
  .site-header:hover .shop-c7-host .site-c7-host-link,
  .site-header:focus-within .shop-c7-host .site-c7-host-link,
  .site-header:hover #c7-account .c7-user-nav__account__login,
  .site-header:focus-within #c7-account .c7-user-nav__account__login,
  .site-header:hover #c7-account .c7-user-nav__account__title,
  .site-header:focus-within #c7-account .c7-user-nav__account__title {
    transition: color 0s;
  }
  .site-header.was-hovered:not(:hover):not(:focus-within) .home-c7-host .site-c7-host-link,
  .site-header.was-hovered:not(:hover):not(:focus-within) .site-c7-host .site-c7-host-link,
  .site-header.was-hovered:not(:hover):not(:focus-within) .shop-c7-host .site-c7-host-link,
  .site-header.was-hovered:not(:hover):not(:focus-within) #c7-account .c7-user-nav__account__login,
  .site-header.was-hovered:not(:hover):not(:focus-within) #c7-account .c7-user-nav__account__title {
    transition: color 220ms ease 380ms;
  }
  .home-c7-host .c7-user-nav__cart__title svg,
  .site-c7-host .c7-user-nav__cart__title svg,
  .shop-c7-host .c7-user-nav__cart__title svg { transition: none; }
  .site-header:hover .home-c7-host .c7-user-nav__cart__title svg,
  .site-header:focus-within .home-c7-host .c7-user-nav__cart__title svg,
  .site-header:hover .site-c7-host .c7-user-nav__cart__title svg,
  .site-header:focus-within .site-c7-host .c7-user-nav__cart__title svg,
  .site-header:hover .shop-c7-host .c7-user-nav__cart__title svg,
  .site-header:focus-within .shop-c7-host .c7-user-nav__cart__title svg {
    transition: stroke 0s;
  }
  .site-header.was-hovered:not(:hover):not(:focus-within) .home-c7-host .c7-user-nav__cart__title svg,
  .site-header.was-hovered:not(:hover):not(:focus-within) .site-c7-host .c7-user-nav__cart__title svg,
  .site-header.was-hovered:not(:hover):not(:focus-within) .shop-c7-host .c7-user-nav__cart__title svg {
    transition: stroke 220ms ease 380ms;
  }
  .site-header-logo--white,
  .site-header-logo--type { transition: none; }
  .site-header:hover .site-header-logo--white,
  .site-header:focus-within .site-header-logo--white,
  .site-header:hover:not(.is-sticky) .site-header-logo--type,
  .site-header:focus-within:not(.is-sticky) .site-header-logo--type {
    transition: opacity 0s;
  }
  .site-header.was-hovered:not(:hover):not(:focus-within) .site-header-logo--white,
  .site-header.was-hovered:not(:hover):not(:focus-within) .site-header-logo--type {
    transition: opacity 220ms ease 380ms;
  }
  .site-header:hover .home-nav a,
  .site-header:focus-within .home-nav a {
    color: var(--ink) !important;
  }
  .site-header:hover .home-nav a:hover,
  .site-header:focus-within .home-nav a:hover,
  .site-header:hover .home-nav a[aria-current="page"],
  .site-header:focus-within .home-nav a[aria-current="page"] {
    color: var(--gold) !important;
  }
  .site-header:hover .site-header-logo--white,
  .site-header:focus-within .site-header-logo--white {
    opacity: 0 !important;
  }
  .site-header:hover:not(.is-sticky) .site-header-logo--type,
  .site-header:focus-within:not(.is-sticky) .site-header-logo--type {
    opacity: 1;
  }
  .site-header:hover .home-c7-host .site-c7-host-link,
  .site-header:focus-within .home-c7-host .site-c7-host-link,
  .site-header:hover .site-c7-host .site-c7-host-link,
  .site-header:focus-within .site-c7-host .site-c7-host-link,
  .site-header:hover .shop-c7-host .site-c7-host-link,
  .site-header:focus-within .shop-c7-host .site-c7-host-link,
  .site-header:hover #c7-account .c7-user-nav__account__login,
  .site-header:focus-within #c7-account .c7-user-nav__account__login,
  .site-header:hover #c7-account .c7-user-nav__account__title,
  .site-header:focus-within #c7-account .c7-user-nav__account__title,
  .site-header:hover #c7-account .c7-user-nav__account__name,
  .site-header:focus-within #c7-account .c7-user-nav__account__name {
    color: var(--ink) !important;
  }
  .site-header:hover .home-c7-host .site-c7-host-link:hover,
  .site-header:focus-within .home-c7-host .site-c7-host-link:hover,
  .site-header:hover .site-c7-host .site-c7-host-link:hover,
  .site-header:focus-within .site-c7-host .site-c7-host-link:hover,
  .site-header:hover .shop-c7-host .site-c7-host-link:hover,
  .site-header:focus-within .shop-c7-host .site-c7-host-link:hover,
  .site-header:hover #c7-account .c7-user-nav__account__login:hover,
  .site-header:focus-within #c7-account .c7-user-nav__account__login:hover,
  .site-header:hover #c7-account .c7-user-nav__account__title:hover,
  .site-header:focus-within #c7-account .c7-user-nav__account__title:hover {
    color: var(--gold) !important;
  }
  .site-header:hover .home-c7-host .c7-user-nav__cart__title svg,
  .site-header:focus-within .home-c7-host .c7-user-nav__cart__title svg,
  .site-header:hover .site-c7-host .c7-user-nav__cart__title svg,
  .site-header:focus-within .site-c7-host .c7-user-nav__cart__title svg,
  .site-header:hover .shop-c7-host .c7-user-nav__cart__title svg,
  .site-header:focus-within .shop-c7-host .c7-user-nav__cart__title svg {
    stroke: var(--ink) !important;
  }
}

/* === Hamburger toggle ======================================== */

.home-nav-toggle {
  grid-column: 1;
  justify-self: start;
  margin-left: clamp(14px, 4vw, 28px);
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 8px;
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  border-radius: 999px;
  transition: background 160ms ease;
}
.home-nav-toggle:hover { background: rgba(45, 37, 31, 0.06); }
.home-nav-toggle-bars {
  position: relative;
  display: block;
  width: 26px;
  height: 18px;
}
.home-nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  border-radius: 2px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
  transition-duration: 500ms;
}
.home-nav-toggle-bars span:nth-child(1) { top: 0; }
.home-nav-toggle-bars span:nth-child(2) { top: 8px; opacity: 1; }
.home-nav-toggle-bars span:nth-child(3) { bottom: 0; }
.home-nav-toggle:not(.open):hover .home-nav-toggle-bars span:nth-child(1) {
  transform: rotate(-3deg) scaleY(1.1);
}
.home-nav-toggle:not(.open):hover .home-nav-toggle-bars span:nth-child(2) {
  transform: rotate(3deg) scaleY(1.1);
}
.home-nav-toggle:not(.open):hover .home-nav-toggle-bars span:nth-child(3) {
  transform: rotate(-4deg) scaleY(1.1);
}
.home-nav-toggle.open .home-nav-toggle-bars span:nth-child(1) {
  transform: rotate(45deg);
  top: 8px;
}
.home-nav-toggle.open .home-nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}
.home-nav-toggle.open .home-nav-toggle-bars span:nth-child(3) {
  transform: rotate(-45deg);
  top: 8px;
}

/* === C7 Side Cart — canonical styles (loaded on every page via site-nav.css) ===
   Single source of truth. Do not add cart CSS to individual page files.
   ============================================================================ */

/* Panel */
.c7-side-cart { pointer-events: none; }
.c7-side-cart--visible { pointer-events: auto; }
.c7-side-cart {
  background: #fff !important;
  max-width: 520px;
  width: 100%;
  box-shadow: -16px 0 40px rgba(45, 37, 31, 0.12);
  z-index: 1100 !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.c7-side-cart::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Header — serif "Your Cart" title (retitled by site-nav.js) with a
   soft rounded-square close button. */
.c7-side-cart .c7-side-cart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 16px 32px;
  border-bottom: 1px solid rgba(45, 37, 31, 0.08);
}
.c7-side-cart .c7-side-cart__header .c7-h1 {
  display: block;
  margin: 0;
  font-family: var(--display-font);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}
.c7-side-cart .c7-side-cart__header button {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  transition: background 140ms ease;
}
.c7-side-cart .c7-side-cart__header button:hover { background: #f2f0ec; }
.c7-side-cart .c7-side-cart__header button svg { stroke: #1b1b1b; width: 20px; height: 20px; }

/* Content padding */
.c7-side-cart__content-container { padding: 0 32px 24px; }

/* Empty state */
.c7-side-cart .c7-notice--empty {
  padding: 24px 0 32px;
  text-align: center;
  color: var(--muted);
}
.c7-side-cart .c7-notice--empty p { margin: 0 0 12px; }
.c7-side-cart .c7-notice--empty .c7-btn--primary { display: inline-block; }

/* Line-item list */
.c7-side-cart .c7-order-items--cart h2 { display: none; }
.c7-side-cart .c7-order-items--cart ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Line items — flat row, hairline dividers */
.c7-side-cart .c7-order-item {
  display: grid !important;
  grid-template-columns: 96px 1fr 140px;
  gap: 24px;
  align-items: start;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 18px 0 !important;
  border-bottom: 1px solid rgba(45, 37, 31, 0.08) !important;
}
.c7-side-cart .c7-order-item:last-child { border-bottom: none !important; }

/* Image */
.c7-side-cart .c7-order-item__image {
  width: 96px;
  height: 96px;
  background: var(--paper-soft, #f5efe4);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}
.c7-side-cart .c7-order-item__image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  /* Show the full bottle (was object-fit: cover which cropped the
     neck + label). Cream tile background fills any letterboxed space. */
  object-fit: contain !important;
  padding: 6px;
}

/* Details */
.c7-side-cart .c7-order-item__details {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.c7-side-cart .c7-order-item__title {
  margin: 0;
  font-family: var(--body-font) !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: var(--ink) !important;
}
.c7-side-cart .c7-order-item__title a { color: var(--ink); text-decoration: none; }
.c7-side-cart .c7-order-item__description {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.3;
  color: var(--muted);
}

/* Remove link */
.c7-side-cart .c7-order-item__details > .c7-link {
  align-self: flex-start;
  margin-top: 8px;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-family: var(--body-font);
  font-size: 0.78rem !important;
  color: var(--muted) !important;
  cursor: pointer;
}
.c7-side-cart .c7-order-item__details > .c7-link::before { display: none !important; }
.c7-side-cart .c7-order-item__details > .c7-link:hover {
  color: var(--ink) !important;
  text-decoration: none !important;
}

/* Pricing column */
.c7-side-cart .c7-order-item__pricing {
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.c7-side-cart .c7-order-item__price { display: none !important; }
.c7-side-cart .c7-order-item__pricing form { margin: 0; }

/* Quantity — always shown as text input (forced by site-nav.js) */
.c7-side-cart .c7-order-item__quantity,
.c7-side-cart .c7-order-item__quantity--input {
  width: 96px;
  max-width: 96px;
  display: flex !important;
  flex-direction: column;
}
.c7-side-cart .c7-order-item__quantity input,
.c7-side-cart .c7-order-item__quantity--input input {
  width: 100% !important;
  max-width: 96px !important;
  text-align: center;
  padding: 6px 8px;
  font-family: var(--body-font);
  font-size: 0.92rem;
  border: 1px solid rgba(45, 37, 31, 0.18);
  border-radius: 6px;
  box-sizing: border-box;
}
.c7-side-cart .c7-order-item__quantity input:focus,
.c7-side-cart .c7-order-item__quantity--input input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 168, 104, 0.18);
}
/* Hide Update/Save button — auto-committed by shopCartForceQtyInput in site-nav.js */
.c7-side-cart .c7-order-item__quantity--input .c7-btn--alt--small,
.c7-side-cart .c7-order-item__quantity button,
.c7-side-cart .c7-order-item__quantity .c7-btn--alt,
.c7-side-cart .c7-order-item__quantity .c7-link { display: none !important; }

/* Line total */
.c7-side-cart .c7-order-item__total {
  font-family: var(--body-font) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  text-align: right;
  color: var(--ink) !important;
}
.c7-side-cart .c7-order-item__total > span { font-family: var(--body-font) !important; }

/* Summary footer */
.c7-side-cart__summary-container {
  background: #F4EFE8;
  padding: 22px 32px 28px;
  border-top: 1px solid #ECE7E0;
}
.c7-side-cart__summary-container .c7-h2 { display: none; }
/* Subtotal row removed — the free-shipping bar above Estimated Total
   already surfaces the running spend toward the R1,000 threshold, so
   the duplicate Subtotal line was redundant. */
.c7-side-cart__summary-container .c7-order-summary__item--subtotal {
  display: none !important;
}
.c7-side-cart__summary-container .c7-order-summary__item--total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  margin: 0;
  border: 0;
  font-size: 1rem;
  color: var(--ink);
}
.c7-side-cart__summary-container .c7-order-summary__item--total {
  font-weight: 600;
  font-size: 1.1rem;
  border-top: 0 !important;
  margin-top: 0 !important;
  padding-top: 8px;
}
.c7-side-cart__summary-container .c7-order-summary__value { font-weight: 600; }
.c7-side-cart__summary-container .c7-order-summary__item--total .c7-order-summary__value span {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--muted);
  margin-right: 6px;
}
/* Hide "ZAR" currency prefix in the estimated total */
.c7-side-cart .c7-order-summary__item--total .c7-order-summary__value > span:first-child {
  display: none !important;
}

/* Checkout CTA — full width, single button (View Cart hidden) */
.c7-side-cart .c7-order-summary__buttons .c7-btn--alt { display: none !important; }
.c7-side-cart .c7-order-summary__buttons {
  display: grid;
  grid-template-columns: 1fr !important;
  margin-top: 16px;
}
.c7-side-cart .c7-order-summary__buttons .c7-btn--primary {
  margin: 0 !important;
  width: 100% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 14px;
  border-radius: 6px;
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 0.92rem;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  text-decoration: none !important;
  background: var(--gold) !important;
  color: #fff !important;
  border: 1px solid var(--gold) !important;
}
.c7-side-cart .c7-order-summary__buttons .c7-btn--primary:hover {
  background: #A37C30 !important;
  border-color: #A37C30 !important;
}
.ek-continue-shopping {
  display: none;
}
@media (max-width: 700px) {
  .ek-continue-shopping {
    display: block;
    margin: 10px auto 0;
    padding: 0;
    background: none;
    border: none;
    font-family: var(--body-font);
    font-size: 0.82rem;
    color: var(--ink, #2d251f);
    opacity: 0.55;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .ek-club-box { display: none; }
}

/* Mobile */
@media (max-width: 540px) {
  .c7-side-cart .c7-side-cart__header { padding: 28px 22px 18px; }
  .c7-side-cart__content-container { padding: 0 22px 20px; }
  .c7-side-cart__summary-container { padding: 18px 22px 24px; }
  .c7-side-cart .c7-order-item {
    grid-template-columns: 80px 1fr;
    gap: 16px;
  }
  .c7-side-cart .c7-order-item__image { width: 80px; height: 80px; }
  .c7-side-cart .c7-order-item__pricing {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
  }
}

/* === Commerce7 side-cart styling (club bar, item meta, steppers) —
   shared by the shop shell and the site-wide cart bubble ======== */

/* Estate Member spend-progress bar — injected above the checkout
   button by shopCartClubProgress IIFE. Mirrors the tone of the
   free-shipping indicator Commerce7 shows (if configured). */
.ek-club-bar {
  margin: 0 0 12px;
  padding: 12px 16px;
  background: var(--paper, #fbf7ef);
  border-radius: 6px;
  border: 1px solid rgba(45, 37, 31, 0.08);
}
.ek-club-bar__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink, #2d2520);
  letter-spacing: 0.02em;
}
.ek-club-bar__label-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ek-club-bar__amount {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted, #756a61);
  white-space: nowrap;
}
.ek-club-bar__track {
  height: 4px;
  border-radius: 99px;
  background: rgba(45, 37, 31, 0.1);
  overflow: hidden;
}
.ek-club-bar__fill {
  height: 100%;
  border-radius: 99px;
  background: var(--gold, #D2AB67);
  transition: width 400ms ease;
  min-width: 4px;
}
/* Completed state */
.ek-club-bar--done .ek-club-bar__fill { background: #7aaf7a; }
.ek-club-bar--done .ek-club-bar__label-left { color: #4a7f4a; }

/* Side-cart line-item meta line: price · vintage · size (built by
   shopCartItemMeta from C7's description element). */
.c7-side-cart .c7-order-item__description.ek-item-meta {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 0.88rem;
  color: var(--muted, #756a61);
}
.ek-item-meta__price {
  font-weight: 600;
  color: var(--gold-dark, #9d7938);
}
.ek-item-meta__sep { color: rgba(45, 37, 31, 0.35); }

/* Side-cart line items — thumbnail | (title, meta, stepper + total)
   with a trash icon pinned to the right edge. */
.c7-side-cart .c7-order-item {
  position: relative;
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 10px 16px;
  align-items: center;
  padding: 16px 44px 16px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(45, 37, 31, 0.08);
}
.c7-side-cart .c7-order-item:last-child { border-bottom: none; }
.c7-side-cart .c7-order-item__image {
  grid-row: 1 / 3;
  width: 72px !important;
  height: 92px !important;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper, #f6f0e6);
  border-radius: 8px;
  overflow: hidden;
}
.c7-side-cart .c7-order-item__image img {
  max-width: 100%;
  max-height: 84px;
  object-fit: contain;
}
.c7-side-cart .c7-order-item__details {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.c7-side-cart .c7-order-item__title { font-size: 1rem; line-height: 1.3; }
/* Remove → trash icon pinned right, vertically centred on the row. */
.c7-side-cart .c7-order-item__details .c7-link {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #756a61);
}
/* Visually hide the "Remove" label but keep it for screen readers. */
.c7-side-cart .c7-order-item__details .c7-link span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.c7-side-cart .c7-order-item__details .c7-link::before {
  content: "";
  display: block !important;
  width: 19px;
  height: 19px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.c7-side-cart .c7-order-item__details .c7-link:hover { color: #b0483f; }
.c7-side-cart .c7-order-item__pricing {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin: 0 !important;
  padding: 0 !important;
}
.c7-side-cart .c7-order-item__pricing form { margin: 0; }
/* Bordered −/+ stepper around C7's quantity input. */
.c7-side-cart .c7-order-item__quantity--input,
.c7-side-cart .c7-order-item__quantity--input .c7-form__field {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto;
}
.c7-side-cart .c7-order-item__quantity--input .c7-form__field {
  display: flex !important;
  align-items: center;
  border: 1.5px solid rgba(45, 37, 31, 0.22);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.c7-side-cart .c7-order-item__quantity--input input {
  width: 38px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
  font-weight: 600;
  line-height: 42px;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
.c7-side-cart .c7-order-item__quantity--input .c7-form__field {
  margin: 0 !important;
  padding: 0 !important;
}
.ek-step {
  width: 36px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  font-family: var(--body-font);
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink, #2d2520);
  cursor: pointer;
  transition: color 140ms ease;
}
.ek-step:hover { color: var(--gold-hover, #A37C30); }
.ek-step-minus.is-min { color: rgba(45, 37, 31, 0.28); cursor: default; }
.ek-step-minus.is-min:hover { color: rgba(45, 37, 31, 0.28); }
.c7-side-cart .c7-order-item__total,
.c7-side-cart .c7-order-item__total span {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink, #2d2520) !important;
  white-space: nowrap;
}

/* Free-shipping notice under the progress track. */
.ek-club-bar__shipping {
  margin: 8px 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted, #756a61);
}
.ek-club-bar__shipping strong {
  font-weight: 600;
  color: var(--ink, #2d2520);
}
.ek-club-bar__shipping--done,
.ek-club-bar__shipping--done strong { color: #4a7f4a; }
.ek-club-bar__check {
  display: inline-block;
  margin-right: 6px;
  font-weight: 700;
  color: #7aaf7a;
}

/* "Join the Club" teaser box under the progress bar. */
.ek-club-box {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(45, 37, 31, 0.08);
}
.ek-club-box__title {
  margin: 0 0 3px;
  font-family: var(--display-font);
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink, #2d2520);
  letter-spacing: 0.01em;
}
.ek-club-box__text {
  margin: 0 0 4px;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted, #756a61);
}
.ek-club-box__text:last-child { margin-bottom: 0; }
.ek-club-box__text a {
  font-weight: 600;
  color: var(--gold-dark, #9d7938);
  text-decoration: none;
}
.ek-club-box__text a:hover { text-decoration: underline; }

/* === Floating cart bubble (injected by site-nav.js on non-shop
   pages when the Commerce7 cart has items) ===================== */

.site-cart-bubble {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 8000;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(30, 22, 14, 0.28);
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  animation: site-cart-bubble-in 280ms cubic-bezier(0.34, 1.4, 0.5, 1) both;
}
.site-cart-bubble:hover {
  background: var(--gold-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(30, 22, 14, 0.34);
}
.site-cart-bubble svg {
  width: 24px;
  height: 24px;
}
.site-cart-bubble-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(30, 22, 14, 0.18);
}
@keyframes site-cart-bubble-in {
  from { opacity: 0; transform: translateY(14px) scale(0.85); }
  to { opacity: 1; transform: none; }
}
.site-cart-bubble {
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
/* Hide the bubble while the side cart it opens is on screen. */
body:has(.c7-side-cart--visible) .site-cart-bubble,
body.mobile-nav-open .site-cart-bubble {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 160ms ease;
}

/* === Mobile drawer — accordion sections ====================== */

.home-mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  /* Sits above the hero chevron (z 35) but below the sticky header
     (z 40) so the EIKENDAL logo + close (×) + BOOK chrome at the top
     of the page stay visible above the open drawer. */
  z-index: 38;
  /* Solid paper background — matches the site-header at the top of
     the page so the open drawer reads as a continuation of the nav
     band rather than a separate translucent overlay. */
  background: var(--paper);
  padding: 64px clamp(20px, 5vw, 28px) 0;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 220ms ease, transform 240ms ease, visibility 0s linear 240ms;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.home-mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 220ms ease, transform 280ms ease, visibility 0s linear 0s;
}
/* Staggered slide-up reveal — each section animates in sequentially */
.home-mobile-nav.is-open .home-mobile-nav-section {
  opacity: 1;
  transform: none;
  transition: opacity 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.home-mobile-nav.is-open .home-mobile-nav-section:nth-child(1) { transition-delay: 50ms; }
.home-mobile-nav.is-open .home-mobile-nav-section:nth-child(2) { transition-delay: 90ms; }
.home-mobile-nav.is-open .home-mobile-nav-section:nth-child(3) { transition-delay: 130ms; }
.home-mobile-nav.is-open .home-mobile-nav-section:nth-child(4) { transition-delay: 170ms; }
.home-mobile-nav.is-open .home-mobile-nav-section:nth-child(5) { transition-delay: 210ms; }
.home-mobile-nav.is-open .home-mobile-nav-section:nth-child(6) { transition-delay: 250ms; }
.home-mobile-nav.is-open .home-mobile-nav-section:nth-child(7) { transition-delay: 290ms; }
.home-mobile-nav.is-open .home-mobile-nav-section:nth-child(8) { transition-delay: 330ms; }
.home-mobile-nav.is-open .home-mobile-nav-section:nth-child(9) { transition-delay: 370ms; }
.home-mobile-nav.is-open .home-mobile-nav-footer {
  opacity: 1;
  transform: none;
  transition: opacity 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: 320ms;
}
body.mobile-nav-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  touch-action: none;
}
/* Commerce7 overlay scroll lock — prevents background scroll bleed
   on iOS Safari when the club join / checkout overlay is open. The
   negative top matches window.scrollY saved in site-nav.js so the
   page doesn't jump to the top while locked. */
body.c7-overlay-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
/* Drop the header's hairline shadow while the drawer is open — the
   drawer's background is the same paper colour, so the shadow lands
   right on the first menu section and reads as a stray line under the
   chrome. !important beats the box-shadow !important rules applied to
   body.is-shop-content pages (events, shop). */
body.mobile-nav-open .site-header,
body.mobile-nav-open .site-header.is-sticky {
  box-shadow: none !important;
}

/* Sections list — natural height, no flex-grow. The estate note that
   follows uses margin-top: auto to absorb the remaining space and push
   itself flush against the footer, eliminating the empty middle gap. */
.home-mobile-nav-list {
  flex: 0 0 auto;
  list-style: none;
  margin: 0;
  padding: 20px 0 4px;
}
.home-mobile-nav-section {
  /* start hidden; fast close transition overridden by the staggered open transition below */
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 160ms ease, transform 160ms ease;
}

/* Main item — flat direct-link button (sub-menus hidden on mobile) */
.home-mobile-nav-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: var(--body-font);
  font-weight: 600;
  font-size: clamp(1.25rem, 5.5vw, 1.6rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.1;
  text-align: left;
  cursor: pointer;
  transition: color 200ms ease;
}
.home-mobile-nav-toggle:hover { color: var(--gold); }

/* Chevron hidden — no accordion expand on mobile */
.home-mobile-nav-chev { display: none; }

/* Sub-menus hidden — each toggle navigates directly */
.home-mobile-nav-sub { display: none; }

/* Premium footer — margin-top: auto absorbs the remaining flex space
   so the panel is always anchored to the bottom without dead whitespace
   above it. position: sticky keeps it pinned when the nav overflows. */
.home-mobile-nav-footer {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  margin-left: clamp(-28px, -5vw, -20px);
  margin-right: clamp(-28px, -5vw, -20px);
  padding: 16px clamp(20px, 5vw, 28px) calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: transparent;
  border-top: none;
  /* start hidden; revealed via .is-open rule above */
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.home-mobile-nav-footer-heading {
  margin: 0 0 3px;
  font-family: var(--body-font);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.home-mobile-nav-footer-sub {
  margin: 0 0 10px;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.5;
}
.home-mobile-nav-footer-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 13px;
  padding-top: 9px;
  border-top: 1px solid rgba(45, 37, 31, 0.07);
}
.home-mobile-nav-footer-hours {
  font-size: 0.76rem;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.home-mobile-nav-footer-phone {
  font-size: 0.76rem;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 160ms ease;
}
.home-mobile-nav-footer-phone:hover { color: var(--gold); }
.home-mobile-nav-footer-actions {
  display: flex;
  gap: 10px;
}
.home-mobile-nav-footer-cta {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid rgba(45, 37, 31, 0.28);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--body-font);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.home-mobile-nav-footer-cta:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.home-mobile-nav-footer-cta--primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
.home-mobile-nav-footer-cta--primary:hover {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
  color: #fff;
}
.home-mobile-nav-footer-cta--outline {
  background: transparent;
  border-color: rgba(45, 37, 31, 0.28);
  color: var(--ink);
}
.home-mobile-nav-footer-cta--outline:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* Extra gap between the last nav item and the info links below */
.home-mobile-nav-section--flat + .home-mobile-nav-section--info {
  margin-top: 10px;
}

/* Info links — Opening Times & Contact Information — display font, muted */
.home-mobile-nav-section--info .home-mobile-nav-info-link {
  display: block;
  padding: 10px 0;
  color: var(--ink);
  font-family: var(--display-font);
  font-size: clamp(1.25rem, 5.5vw, 1.6rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.3;
  text-decoration: none;
  transition: color 200ms ease;
}
.home-mobile-nav-section--info .home-mobile-nav-info-link:hover { color: var(--ink); }

/* Flat (no-submenu) mobile nav row — Club, Shop & Contact. */
.home-mobile-nav-section--flat .home-mobile-nav-flat-link {
  display: block;
  padding: 10px 0;
  color: var(--ink);
  font-family: var(--body-font);
  font-weight: 600;
  font-size: clamp(1.25rem, 5.5vw, 1.6rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.1;
  text-decoration: none;
  transition: color 200ms ease;
}
.home-mobile-nav-section--flat .home-mobile-nav-flat-link:hover {
  color: var(--gold);
}
@media (max-width: 1100px) {
  .home-nav { display: none; }
  .home-nav-toggle { display: inline-flex; }
  .home-mobile-nav { display: flex; }
}

/* Mobile nav — Club item and current-page section label in gold */
.home-mobile-nav-toggle[aria-controls="mnav-club"] > span:first-child,
.home-mobile-nav-toggle[aria-current="page"] > span:first-child {
  color: var(--gold);
}

/* Mobile nav drawer background — always solid white ========= */
.home-mobile-nav {
  background: #fff;
}

/* Commerce7 blue → Eikendal gold ===========================
   C7's club/checkout overlays default to a Salesforce-blue
   accent. These overrides swap every C7 interactive-colour
   occurrence (links, counts, prices, selected-state labels)
   to our gold. Scoped broadly so they apply inside the
   body-level overlay that C7 portals outside our host divs. */
:root {
  --c7-link-color: #C9A868;
  --c7-alt-text-color: #C9A868;
  --c7-primary-color: #C9A868;
  --c7-secondary-color: #C9A868;
}

/* Direct element overrides for elements C7 colours with
   its own class-based or inline blue styles. */
.c7-btn--link,
.c7-link:not(.c7-user-nav__account__dropdown__logout),
.c7-collapse__toggle,
.c7-collapse__toggle-count,
.c7-product__count,
.c7-product-count,
.c7-order-summary__title,
.c7-order-summary__item-title,
.c7-club-signup__total,
.c7-club-signup__count,
.c7-text--primary,
.c7-text--link {
  color: #C9A868 !important;
}

/* Price / amount highlights C7 renders in blue */
[class*="c7-"][class*="price"],
[class*="c7-"][class*="amount"],
[class*="c7-"][class*="total"]:not(button) {
  color: #C9A868 !important;
}

/* C7 route active — hide our footer so it doesn't show beneath
   Commerce7's client-side checkout flow (pushState within /shop).
   We only hide footer elements — hiding main would bury the #c7-content
   div that Commerce7 renders the checkout into, causing a white screen. */
body.c7-route-active footer,
body.c7-route-active .home-footer-rebuild,
body.c7-route-active .home-footer,
body.c7-route-active .site-footer {
  display: none !important;
}

/* Hide C7 checkout footer legal links (Privacy Policy, Terms of Service).
   Scoped inside #c7-checkout so we don't accidentally hide the cart
   drawer's own footer (which uses a different ancestor). */
#c7-checkout .c7-checkout__footer {
  display: none !important;
}

/* Suppress the reserved scrollbar gutter on C7 route pages — the
   checkout/cart SPA manages its own scroll container, so the stable
   gutter on <html> leaves a white strip on the right edge. */
html:has(body.c7-route-active) {
  scrollbar-gutter: auto;
}

/* ================================================================
   MEGA MENU — TEMPORARILY HIDDEN
   To restore: remove this block. The HTML and all CSS above are
   fully intact; this single rule is the only thing suppressing it.
   ================================================================ */
.home-mega { display: none !important; }

/* ================================================================
   PASSWORD OVERLAY — shared across all protected pages
   Pages add page-specific hide rules (e.g. body.is-locked .room-main)
   in their own stylesheet.
   ================================================================ */

/* Hide both the overlay and page content while we check auth status */
body.is-checking .shop-unlock { visibility: hidden; }
/* Once unlocked, remove the overlay from flow entirely */
body:not(.is-locked) .shop-unlock { display: none; }

/* Full-screen overlay */
.shop-unlock {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--estate-cream, #faf5ea);
}

.shop-unlock-card {
  max-width: 380px;
  width: 100%;
  text-align: center;
  background: rgba(255, 251, 240, 0.92);
  border: 1px solid var(--line, #e8dece);
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: 0 12px 36px rgba(45, 37, 31, 0.12);
}
.shop-unlock-icon { display: block; font-size: 2rem; margin-bottom: 12px; }
.shop-unlock h1 {
  margin: 0 0 18px;
  font-family: var(--display-font, "Goudy Bookletter 1911", serif);
  font-size: 1.3rem;
  font-weight: 600;
}
.shop-unlock input[type="password"] {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  border: 1px solid var(--line, #e8dece);
  border-radius: 12px;
}
.shop-unlock input[type="password"]:focus {
  border-color: var(--gold);
  outline: none;
  box-shadow: 0 0 0 4px var(--gold-soft, rgba(201, 168, 104, 0.15));
}
.shop-unlock-error {
  margin: 10px 0 0;
  color: #b04240;
  font-size: 0.88rem;
  text-align: left;
}
.shop-unlock button {
  margin-top: 14px;
  width: 100%;
  padding: 14px 18px;
  background: var(--gold);
  color: #fff;
  border: 1px solid var(--gold);
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}
.shop-unlock button:hover { background: var(--gold-hover, #A37C30); border-color: var(--gold-hover, #A37C30); }