/* =============================================================================
   Del Plaza — layout
   Header, icons, footer, off-canvas navigation & flag selector
   Extracted from css/style.css during the modular asset refactor.
   DESIGN_BIBLE-aligned palette, Univers typography, civic grid discipline.
   ============================================================================= */

/* =============================================================================
   Header Styles
   ============================================================================= */
.header {
  background-color: #ffffff;
  /* Removed border-bottom and box-shadow to prevent harsh line crossing the logo */
  
  /* drop-shadow outlines the COMBINED shape of the header + overflowing logo */
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.02)); 
  
  position: sticky;
  top: 0;
  z-index: 1020;
  overflow: visible !important; /* Allows logo to extend below the header bar */
}

.logo {
  display: inline-block;
  position: relative;
  box-sizing: content-box;
  margin-bottom: -40px; 
  
  background-color: #ffffff;
  border-radius: 50%;
  padding: 4px;
  z-index: 1021;
}

.logo img {
  max-height: 99px;
  display: block;
  border-radius: 50%;
  transition: opacity 0.3s var(--ease-out);
}

.logo:hover img {
  opacity: 0.85;
}

/* =============================================================================
   Header Icons — DESIGN_BIBLE §8, §13
   Left: list/menu icon. Right: basket icon.
   Absolutely positioned so the logo remains perfectly centred.
   ============================================================================= */
.header-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  /* Physical button base — sits above the surface with substance */
  background-color: #ffffff;
  border: none;
  transition:
    transform 0.15s var(--ease-out),
    background-color 0.2s var(--ease-out),
    color 0.2s var(--ease-out);
  color: var(--color-content-primary);
  font-size: 1.375rem;
  text-decoration: none;
  z-index: 5;
  border-radius: 0 0 9px 9px;
  
}

.header-icon-left {
  left: var(--spacing-sm);
}

.header-icon-right {
  right: var(--spacing-sm);
}

.header-icon:hover {
  color: var(--cognac);
  background-color: var(--parchment-cream);
  text-decoration: none;
}

.header-icon:active,
.header-icon.is-pressed {
  transform: translateY(-50%) translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
  background-color: var(--alabaster);
  color: var(--cognac);
}

/* =============================================================================
   Main Content Area
   ============================================================================= */
.main-content {
  min-height: calc(100vh - 200px);
  padding: var(--spacing-xl) 0;
}

/* =============================================================================
   Container override — DESIGN_BIBLE §4: max-width 1312px
   ============================================================================= */
.container, .container-fluid {
  --bs-gutter-x: var(--spacing-sm);
}

@media (min-width: 1200px) {
  .container {
    max-width: 1312px;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1312px; /* Cap at 1312px even on wide screens */
  }
}

/* =============================================================================
   Footer Styles — White surface with top shadow
   Mirrors the header's bottom shadow for visual consistency.
   ============================================================================= */
.footer {
  background-color: #ffffff;
  color: var(--color-content-primary);
  padding: var(--spacing-xl) 0 var(--spacing-lg) 0;
  margin-top: auto;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

/* ---- Footer Logo — 3x enlarged (240% of actual image width = 8862px) ---- */
.footer-logo {
  width: 8862px;
  max-width: 100%;
  height: auto;
  display: inline-block;
}

.footer-logo-link {
  display: inline-block;
  text-decoration: none;
  transition: opacity 0.3s var(--ease-out);
}

.footer-logo-link:hover {
  opacity: 0.85;
}

/* ---- Footer Panel Text — lorem ipsum placeholder styling ---- */
.footer-panel-text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-content-primary);
  margin-bottom: 0;
}

/* ---- Footer Bottom Text ---- */
.footer-bottom-text {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-content-muted);
  margin-bottom: 0;
}

/* =============================================================================
   Site Layout — Off-canvas Navigation Architecture — Tawny Umber Edition
   DESIGN_BIBLE §4 (Civic Grid), §11 (Navigational Wayfinding)
   Tawny Umber backdrop with Parchment Cream and Deep Navy accents —
   warm, grounded luxury with crisp readable contrast.

   The offcanvas-nav sits absolutely within the site-wrapper at the same
   depth as the page-wrapper. When the page-wrapper slides right, the
   offcanvas-nav is revealed underneath. The site-wrapper's min-height
   ensures the offcanvas-nav stretches to match the full document height.

   Hierarchical Category Tree:
   - .offcanvas-nav__item--leaf       → direct link (no children)
   - .offcanvas-nav__item--parent     → toggle button that expands a sublist
   - .offcanvas-nav__sublist          → collapsible sub-category list
   - .offcanvas-nav__sublist.is-open  → expanded state
   - .offcanvas-nav__chevron          → rotates 180° when expanded

   Colour Architecture on Tawny Umber (#987458):
   - Primary text:     Parchment Cream (#F7EEDA) — warm, luminous contrast
   - Accent/emphasis:  Deep Navy (#3c477a) — authoritative, cool counterpoint
   - Secondary text:   Muted Silver (#C4C4C0) — subdued, hierarchical depth
   - Interactive hover: Deep Navy — distinct colour shift from brown base
   - Underline/divider: Parchment Cream — clean, cohesive with text
   - Guarantee border:  Deep Navy — structural weight, brand trust
   ============================================================================= */

/* ---- Site Wrapper — shared container ---- */
.site-wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

/* ---- Off-canvas Navigation Panel ---- */
.offcanvas-nav {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 75%;
  background-color: var(--tawny-umber);
  color: var(--parchment-cream);
  z-index: 1010;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.offcanvas-nav__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* The drawer now opens on the utility deck, so the deep crown once kept for
     a single floating label relaxes to one Lane (§5). */
  padding: var(--spacing-lg);
}

.offcanvas-nav__header {
  margin-bottom: var(--spacing-lg);
}

/* ---- Brand — Parchment Cream on Tawny Umber: crisp, luminant ---- */
.offcanvas-nav__brand {
  display: block;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--parchment-cream);
  margin-bottom: var(--spacing-quark);
}

/* ---- Accent Line — Parchment Cream, harmonised with brand text ---- */
.offcanvas-nav__accent-line {
  width: 36px;
  height: 2px;
  background-color: var(--parchment-cream);
  margin-top: var(--spacing-nano);
}

/* =============================================================================
   Off-canvas Utility Deck — Account · Currency · Search
   DESIGN_BIBLE §4 (Civic Grid), §7 (Palette), §8 (Button Geometry),
   §11 (Navigational Wayfinding), §14 (Accessibility — WCAG AA)

   The deck sits at the head of the drawer, in the drawer's own content column,
   so the drawer opens on identity and intent before it opens on inventory.

   The deck is unplated: the modules stand on the Tawny Umber ground itself.
   Register and the currency switch carry rules, not plates — only the search
   field keeps a surface of its own, because a field has to receive type.

   Structural labels (Account / Currency / Search) take the exact register of the
   drawer's own Browse label — Parchment Cream, Univers Bold, 0.625rem, uppercase,
   set straight on the Tawny Umber — so the drawer reads as one signage system.

   Contrast:
     Parchment Cream on Imperial Plum    14.0:1  Sign In, submit CTA, chosen currency
     Parchment Cream on Slate Charcoal    6.0:1  every hover in the deck
     Slate Charcoal on White .........   6.6:1   search field and placeholder
     Parchment Cream on Tawny Umber ..   3.8:1   labels, the Register rule and the
                                                 whole currency rail — the
                                                 drawer's Browse register
   ============================================================================= */

/* ---- Deck — unplated: the modules stand on the Tawny Umber ground itself.
        One fill register serves every solid control in the drawer: Imperial Plum
        at rest, Slate Charcoal while hovered, and back to the resting register
        under the finger while the §8 press physics carry the touch. Declared
        once here so the register can be moved in a single line. ---- */
.offcanvas-nav__deck {
  --deck-fill: var(--imperial-plum);
  --deck-fill-hover: var(--slate-charcoal);
  margin-bottom: var(--spacing-xxl);
}

/* ---- Module — a doubled Lane between Blocks (§4): 64px of ground from one
        section's last control to the next section's heading ---- */
.offcanvas-nav__module + .offcanvas-nav__module {
  margin-top: var(--spacing-xl);
}

/* ---- Module label — the Browse register, verbatim: Parchment Cream,
        Univers Bold, 0.625rem, uppercase, one quark to its rule ---- */
.offcanvas-nav__module-label {
  display: block;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--parchment-cream);
  margin-bottom: var(--spacing-quark);
}

/* ---- Label rule — the drawer's own accent line, re-used verbatim beneath each
        heading, so it sits at the same 8px beneath Account, Currency and Search
        as it does beneath Browse (the 4px label margin collapses into the 8px
        rule margin, exactly as it does in the header). The deck adds only the
        Lane that carries the eye from rule to the control below. ---- */
.offcanvas-nav__deck .offcanvas-nav__accent-line {
  margin-bottom: var(--spacing-xxs);
}

/* ---- The first heading opens on air: Account takes the deep crown the panel
        carried before the deck arrived (80px, on top of the drawer's own 40px
        Lane — 120px of ground before the first word). The margin lands on the
        heading itself and collapses out through the module and the deck, so the
        space stays attached to Account however the deck is rearranged. ---- */
.offcanvas-nav__module:first-child .offcanvas-nav__module-label {
  margin-top: var(--spacing-xxxl);
}

/* =============================================================================
   Account — Sign In / Register
   Both ride the §8 mandate from .btn in components.css (Univers Extended 400 /
   1rem / uppercase, sharp top corners, 9px bottom radius). Only the colour
   register is declared here: Sign In takes the deck's fill register — Imperial
   Plum at rest, Slate Charcoal while hovered — and Register is unplated, a
   Parchment Cream rule and label on the Tawny Umber ground that fills Slate
   Charcoal only while it is hovered.
   ============================================================================= */
.offcanvas-nav__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-quark);
}

.offcanvas-nav .offcanvas-nav__action {
  flex: 1 1 8.5rem;
  white-space: nowrap;
}

.offcanvas-nav .offcanvas-nav__action--signin {
  --bs-btn-bg: var(--deck-fill);
  --bs-btn-border-color: var(--deck-fill);
  --bs-btn-color: var(--parchment-cream);
  --bs-btn-hover-bg: var(--deck-fill-hover);
  /* Slate Charcoal stands only 1.6:1 against the Tawny Umber ground, so the
     hover keeps its edge as a Parchment Cream rule (3.8:1) rather than
     dissolving into the drawer floor. */
  --bs-btn-hover-border-color: var(--parchment-cream);
  --bs-btn-hover-color: var(--parchment-cream);   /* 6.0:1 on Slate Charcoal */
  --bs-btn-active-bg: var(--deck-fill);
  --bs-btn-active-border-color: var(--deck-fill);
  --bs-btn-active-color: var(--parchment-cream);
}

.offcanvas-nav .offcanvas-nav__action--register {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--parchment-cream);
  --bs-btn-color: var(--parchment-cream);
  --bs-btn-hover-bg: var(--deck-fill-hover);
  --bs-btn-hover-border-color: var(--parchment-cream);
  --bs-btn-hover-color: var(--parchment-cream);
  --bs-btn-active-bg: var(--imperial-plum);
  --bs-btn-active-border-color: var(--imperial-plum);
  --bs-btn-active-color: #ffffff;
}

/* ---- Focus — an inset cream ring, legible on every ground and every fill
        (the global cognac ring would vanish into the Tawny Umber) ---- */
.offcanvas-nav .offcanvas-nav__action:focus-visible,
.offcanvas-nav .offcanvas-nav__search-submit:focus-visible {
  outline: 2px solid var(--parchment-cream);
  outline-offset: -3px;
}

/* =============================================================================
   Currency — a three-position selector switch drawn in a Parchment Cream rule,
   standing on the drawer's own ground like the Register CTA beside it. A control,
   not a CTA: it keeps the house geometry (§8) but takes the control typography —
   the symbol leads at Univers Black, the ISO code answers in Univers Medium —
   which three segments can still carry at 375px, where the CTA standard could
   not. Outer rule at full strength, internal divisions at a whisper: the rail
   reads as one instrument, the segments as its three positions.
   ============================================================================= */
.offcanvas-nav__currency {
  display: flex;
  background-color: transparent;
  border: 1px solid var(--parchment-cream);
  border-radius: 0 0 9px 9px;
  overflow: hidden;
}

.offcanvas-nav__currency-option {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--spacing-quark);
  padding: 0.75rem var(--spacing-quark);
  background-color: transparent;
  border: none;
  border-left: 1px solid rgba(249, 243, 229, 0.28);
  color: var(--parchment-cream);
  font-family: var(--font-primary);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.offcanvas-nav__currency-option:first-child {
  border-left: none;
}

/* Slate Charcoal at 30% — a wash, so hover never reads as a selection ---- */
.offcanvas-nav__currency-option:hover {
  background-color: rgba(94, 93, 90, 0.3);
}

/* ---- Chosen position — the one fill on the rail, and it is a state, not a
        plate: the deck's fill register ---- */
.offcanvas-nav__currency-option[aria-checked="true"] {
  background-color: var(--deck-fill);
  color: var(--parchment-cream);
}

/* The chosen position takes Slate Charcoal like every other solid control in
   the deck; Parchment Cream holds 6.0:1 there, so the label stays where it is ---- */
.offcanvas-nav__currency-option[aria-checked="true"]:hover {
  background-color: var(--deck-fill-hover);
}

/* ---- Press physics — the inset shadow alone: a 1px shift would open a seam
        along the top of the rail the segment is seated in ---- */
.offcanvas-nav__currency-option:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ---- Keyboard focus — inset (the rail clips any outward ring) and cream,
        which reads on the bare ground and on the chosen navy alike (§14) ---- */
.offcanvas-nav__currency-option:focus-visible {
  outline: 2px solid var(--parchment-cream);
  outline-offset: -3px;
}

.offcanvas-nav__currency-symbol {
  font-weight: 700;   /* Univers Black — the mark leads */
  font-size: 1rem;
  line-height: 1;
}

.offcanvas-nav__currency-code {
  font-weight: 500;
  font-size: 0.625rem;
  line-height: 1;
  text-transform: uppercase;
}

/* =============================================================================
   Search — a white field seated against a Deep Navy submit CTA.
   type="search" keeps the native semantics; the platform's own cancel glyph is
   suppressed so the instrument reads as one Del Plaza control.
   ============================================================================= */
.offcanvas-nav__search {
  display: flex;
  align-items: stretch;
}

.offcanvas-nav .offcanvas-nav__search-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  background-color: #ffffff;
  border: 1px solid var(--color-border-primary);
  border-right: none;
  border-radius: 0 0 0 9px;
  color: var(--color-content-primary);   /* Slate Charcoal — 6.6:1 on white */
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.5;
  transition: border-color 0.2s var(--ease-out);
}

.offcanvas-nav .offcanvas-nav__search-input::placeholder {
  color: var(--color-content-primary);
  font-weight: 300;
  font-size: 0.875rem;
}

.offcanvas-nav .offcanvas-nav__search-input::-webkit-search-cancel-button,
.offcanvas-nav .offcanvas-nav__search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* ---- Focus — the border marks the field against white (8.9:1), the cream
        ring reads against the Tawny Umber ground (3.8:1) ---- */
.offcanvas-nav .offcanvas-nav__search-input:focus,
.offcanvas-nav .offcanvas-nav__search-input:focus-visible {
  border-color: var(--deep-navy);
  outline: 2px solid var(--parchment-cream);
  outline-offset: 2px;
}

.offcanvas-nav .offcanvas-nav__search-submit {
  --bs-btn-bg: var(--deck-fill);
  --bs-btn-border-color: var(--deck-fill);
  --bs-btn-color: var(--parchment-cream);
  --bs-btn-hover-bg: var(--deck-fill-hover);
  --bs-btn-hover-border-color: var(--parchment-cream);
  --bs-btn-hover-color: var(--parchment-cream);   /* 6.0:1 on Slate Charcoal */
  --bs-btn-active-bg: var(--deck-fill);
  --bs-btn-active-border-color: var(--deck-fill);
  --bs-btn-active-color: var(--parchment-cream);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.875rem;
  padding: 0;
  border-radius: 0 0 9px 0;
  font-size: 1rem;
}

/* =============================================================================
   Deck — narrow viewports (§15, mobile-first)
   The drawer narrows its own Lanes and the deck stacks its CTAs; the search
   field holds 16px so iOS does not zoom the drawer when it takes focus.
   ============================================================================= */
@media (max-width: 575.98px) {
  .offcanvas-nav__inner {
    padding: var(--spacing-sm);
  }

  .offcanvas-nav .offcanvas-nav__action {
    padding-left: var(--spacing-xxs);
    padding-right: var(--spacing-xxs);
  }

  .offcanvas-nav .offcanvas-nav__search-input {
    font-size: 1rem;
  }

  .offcanvas-nav .offcanvas-nav__search-input::placeholder {
    font-size: 0.8125rem;
  }
}

/* ---- Primary Category List ---- */
.offcanvas-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.offcanvas-nav__list--secondary {
  margin-top: var(--spacing-xxs);
}

/* ---- Category Items ---- */

/* Leaf item (no sub-categories) */
.offcanvas-nav__item--leaf {
  margin-bottom: var(--spacing-tiny);
}

/* Parent item (has sub-categories) */
.offcanvas-nav__item--parent {
  margin-bottom: var(--spacing-tiny);
}

/* ---- Leaf Category Link — Univers 500 (Bold weight), Parchment Cream ---- */
.offcanvas-nav__link--leaf {
  display: block;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  color: var(--parchment-cream);
  text-decoration: none;
  padding: var(--spacing-quark) 0;
  transition: color 0.25s var(--ease-out), padding-left 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
  position: relative;
  line-height: 1.4;
  border-radius: 0 0 3px 3px;
}

.offcanvas-nav__link--leaf::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--deep-navy);
  transition: width 0.35s var(--ease-out);
}

.offcanvas-nav__link--leaf:hover {
  color: var(--deep-navy);
  padding-left: var(--spacing-xs);
}

.offcanvas-nav__link--leaf:hover::after {
  width: 100%;
}

/* ---- Parent Toggle Button — Univers 500 (Bold weight), Parchment Cream — matches leaf ---- */
.offcanvas-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-quark) 0;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  color: var(--parchment-cream);
  text-align: left;
  position: relative;
  transition: color 0.25s var(--ease-out), padding-left 0.25s var(--ease-out);
  border-radius: 0 0 3px 3px; /* DESIGN_BIBLE §8: sharp top, rounded bottom */
  line-height: 1.4;
}

.offcanvas-nav__toggle::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--deep-navy);
  transition: width 0.35s var(--ease-out);
}

.offcanvas-nav__toggle:hover {
  color: var(--deep-navy);
  padding-left: var(--spacing-xs);
}

.offcanvas-nav__toggle:hover::after {
  width: 100%;
}

/* ---- Toggle Text ---- */
.offcanvas-nav__toggle-text {
  flex: 1;
}

/* ---- Chevron Indicator — Parchment Cream, matching parent text ---- */
.offcanvas-nav__chevron {
  font-size: 0.8125rem;
  color: var(--parchment-cream);
  transition: transform 0.35s var(--ease-out), color 0.25s var(--ease-out);
  flex-shrink: 0;
  margin-left: var(--spacing-nano);
}

.offcanvas-nav__toggle:hover .offcanvas-nav__chevron {
  color: var(--deep-navy);
}

.offcanvas-nav__toggle[aria-expanded="true"] .offcanvas-nav__chevron {
  transform: rotate(180deg);
  color: var(--parchment-cream);
}

/* ---- Sub-category List (collapsible) ---- */
.offcanvas-nav__sublist {
  list-style: none;
  padding: 0;
  margin: var(--spacing-quark) 0 var(--spacing-nano) 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out), opacity 0.3s var(--ease-out);
  opacity: 0;
}

.offcanvas-nav__sublist.is-open {
  max-height: 300px;
  opacity: 1;
}

/* ---- Sub-category Item ---- */
.offcanvas-nav__subitem {
  margin: 0;
}

/* ---- Sub-category Link — Univers 500 (Bold weight), Muted Silver — weight matches category ---- */
.offcanvas-nav__sublink {
  display: block;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(0.9375rem, 1.8vw, 1.125rem);
  color: var(--muted-silver);
  text-decoration: none;
  padding: var(--spacing-quark) 0 var(--spacing-quark) var(--spacing-xs);
  transition: color 0.25s var(--ease-out), padding-left 0.25s var(--ease-out);
  position: relative;
  line-height: 1.5;
  border-left: 1px solid rgba(247, 238, 218, 0.15);
}

.offcanvas-nav__sublink::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  width: 0;
  height: 1px;
  background-color: var(--parchment-cream);
  transition: width 0.35s var(--ease-out);
  transform: translateY(-50%);
}

.offcanvas-nav__sublink:hover {
  color: var(--parchment-cream);
  padding-left: calc(var(--spacing-xs) + var(--spacing-quark));
}

.offcanvas-nav__sublink:hover::before {
  width: 14px;
}

/* Remove the ::after underline for sublinks (keeps hierarchy clean) */
.offcanvas-nav__sublink::after {
  display: none;
}

/* ---- Divider — Parchment Cream gradient on Tawny Umber ---- */
.offcanvas-nav__divider {
  height: 1px;
  background: linear-gradient(90deg, var(--parchment-cream) 0%, rgba(247, 238, 218, 0.3) 40%, transparent 100%);
  margin: var(--spacing-sm) 0;
}

/* ---- Secondary Links — Univers 400 (Regular), Muted Silver ---- */
.offcanvas-nav__list--secondary .offcanvas-nav__link {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--muted-silver);
  display: block;
  text-decoration: none;
  padding: var(--spacing-quark) 0;
  transition: color 0.25s var(--ease-out), padding-left 0.25s var(--ease-out);
  line-height: 1.6;
}

.offcanvas-nav__list--secondary .offcanvas-nav__link:hover {
  color: var(--deep-navy);
  padding-left: var(--spacing-xs);
}

/* ---- Footer ---- */
.offcanvas-nav__footer {
  margin-top: auto;
  padding-top: var(--spacing-lg);
}

/* ---- Guarantee Badge — Deep Navy border, Parchment Cream text ---- */
.offcanvas-nav__guarantee {
  display: inline-block;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--parchment-cream);
  padding: var(--spacing-quark) var(--spacing-nano);
  border: 1px solid var(--deep-navy);
  border-radius: var(--border-radius-sticker);
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.offcanvas-nav__guarantee:hover {
  background-color: var(--deep-navy);
  color: var(--parchment-cream);
}

/* ---- Page Wrapper (slides on toggle) ---- */
.page-wrapper {
  position: relative;
  z-index: 1020;
  background-color: var(--color-surface-secondary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 0.45s var(--ease-out);
  will-change: transform;
}

.page-wrapper.is-menu-open {
  transform: translateX(75%);
}

/* Prevent body scroll when menu is open - coupled with html overflow-x: hidden */
body.menu-open {
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* ---- Menu Icon state (list -> cancel) ---- */
.header-icon-left.is-pressed {
  color: var(--cognac);
}

/* =============================================================================
   Flag Selector — DESIGN_BIBLE §8, §13
   Placed just before the cart icon on the right side of the header.
   Uses flagcdn.com for country flag imagery.
   Height matches the header-icon (2.75rem) for visual alignment.

   Simplified: displays only the German flag (no dropdown, no list menu).
   ============================================================================= */
.flag-selector {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(var(--spacing-sm) + 2.75rem + var(--spacing-nano));
  margin-right: 20px;
  z-index: 1030;
}

.flag-selector__display {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-quark);
  height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  background-color: #ffffff;
  border: none;
  border-radius: 0 0 3px 3px; /* DESIGN_BIBLE §8: sharp top, rounded bottom */
}

.flag-selector__text {
  font-family: var(--font-primary);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-content-primary);
  line-height: 1;
}

.flag-selector__num {
  font-weight: 700; /* Univers Black — black regular weight */
}

.flag-selector__letter {
  font-weight: 700;
  font-stretch: condensed;
  font-style: oblique; /* Univers Bold Condensed Oblique */
}

.flag-selector__flag {
  display: block;
  width: auto;
  height: 17px;
  flex-shrink: 0;
}

/* ---- Responsive: consistent sizing on narrow screens ---- */
@media (max-width: 575.98px) {
  .flag-selector {
    right: calc(var(--spacing-nano) + 2.75rem + var(--spacing-quark));
  }
}