/* =============================================================================
   Del Plaza — layout
   Header, icons, footer, off-canvas navigation & flag selector
   =============================================================================*/

/* =============================================================================
   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*/
.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);
}

/* Basket mark — the design's own outlined basket, and the glow it wears while it holds something.
   An empty basket is drawn in the header's ink and keeps still. A basket holding something turns
   between the house's own cognac and its deep navy, back and forth, for as long as it holds
   anything: a change of colour, not a halo and not a second drawing, so the basket tells the
   visitor it is not empty without ever moving. */
.header-icon--basket-full i {
  animation: basketGlow 2.8s var(--ease-in-out) infinite;
}

@keyframes basketGlow {
  0%, 100% { color: var(--cognac); }
  50%      { color: var(--deep-navy); }
}

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

/* =============================================================================
   Container override —: 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 Column Heading — an overline over its own accent rule ----*/
.footer-title {
  position: relative;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-content-heading);
  margin-bottom: var(--spacing-lg);
}

/* The rule under each column heading, echoing the off-canvas brand rule.
   components.css centres it (and the column) on narrow screens.*/
.footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--spacing-xxs));
  width: 36px;
  height: 2px;
  background-color: var(--color-border-accent);
}

/* ---- Footer Menu — a column's links ----*/
.footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-menu__item + .footer-menu__item {
  margin-top: var(--spacing-nano);
}

.footer-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-content-primary);
  text-decoration: none;
}

.footer-link:hover,
.footer-link:focus-visible {
  color: var(--color-interactive-hover);
  text-decoration: none;
}

/* ---- Footer Contact — the concierge's note above its addresses ----*/
.footer-contact {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-content-primary);
  margin-bottom: var(--spacing-sm);
}

/* ---- 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*/

/* ---- 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%;
  /* ---- The ground — herringbone wood, Study II (Cognac) at weight V4 ----
     Tawny Umber laid in herringbone and taken light. The parquet, its fibre and
     its glaze are eight gradients drawn in CSS — the same technique as the
     guarantee masthead's tartan — so there is no image to load and nothing to
     fail. The weight is one knob: every layer's alpha is its own base alpha
     times --wood-weight, so the whole floor turns lighter or darker by one
     number without a layer being retyped. The tints are Cognac in the light and
     Imperial Plum in the shade. */
  --wood-plank: 44px;
  --wood-weight: 0.27;
  --wood-light:   162, 99, 48;    --wood-light-a:  0.32;
  --wood-dark:    46, 26, 71;     --wood-dark-a:   0.24;
  --wood-glaze:   162, 99, 48;    --wood-glaze-a:  0.38;
  --wood-patina:  46, 26, 71;     --wood-patina-a: 0.30;
  --wood-fibre-a: 0.05;
  background-color: var(--tawny-umber);
  background-image:
    /* glaze */
    radial-gradient(120% 90% at 28% 4%,
        rgba(var(--wood-glaze), calc(var(--wood-glaze-a) * var(--wood-weight))) 0%,
        transparent 58%),
    /* patina */
    radial-gradient(135% 115% at 88% 116%,
        rgba(var(--wood-patina), calc(var(--wood-patina-a) * var(--wood-weight))) 0%,
        transparent 62%),
    /* fibre, one way */
    repeating-linear-gradient(45deg,
        rgba(0, 0, 0, calc(var(--wood-fibre-a) * var(--wood-weight))) 0 1px,
        transparent 1px 7px),
    /* fibre, the other */
    repeating-linear-gradient(-45deg,
        rgba(0, 0, 0, calc(var(--wood-fibre-a) * var(--wood-weight))) 0 1px,
        transparent 1px 7px),
    /* arm, light */
    linear-gradient(135deg,
        rgba(var(--wood-light), calc(var(--wood-light-a) * var(--wood-weight))) 25%,
        transparent 25%),
    /* arm, dark */
    linear-gradient(225deg,
        rgba(var(--wood-dark), calc(var(--wood-dark-a) * var(--wood-weight))) 25%,
        transparent 25%),
    /* arm, light */
    linear-gradient(315deg,
        rgba(var(--wood-light), calc(var(--wood-light-a) * var(--wood-weight))) 25%,
        transparent 25%),
    /* arm, dark */
    linear-gradient(45deg,
        rgba(var(--wood-dark), calc(var(--wood-dark-a) * var(--wood-weight))) 25%,
        transparent 25%);
  background-size:
    auto, auto, auto, auto,
    var(--wood-plank) var(--wood-plank),
    var(--wood-plank) var(--wood-plank),
    var(--wood-plank) var(--wood-plank),
    var(--wood-plank) var(--wood-plank);
  background-position:
    0 0, 0 0, 0 0, 0 0,
    calc(var(--wood-plank) / -2) 0,
    calc(var(--wood-plank) / -2) 0,
    0 0,
    0 0;
  color: var(--parchment-cream);
  z-index: 1010;
  overflow-y: auto;
  /* Never a lateral scroll: the panel is a single column, and the open
     category's plate bleeds to its edges (see below). */
  overflow-x: hidden;
  /* The drawer's Lane — the one measure the inner frame and the open
     category's plate both take their inset from, so the two can never
     disagree at any viewport. They did below 576px: the frame narrowed to
     24px while the plate kept 40px, and the plate overshot the panel by
     16px a side — a horizontal scrollbar on the drawer. */
  --drawer-lane: var(--spacing-lg);
  /* The category name's underline — the very fade the list's closing divider
     draws, so the two rules read as one instrument: solid where the name
     begins, a 30% wash by 40%, gone by the far edge. Only the colour answers
     to the ground (White here; Golden Milk on the plate, below). White, not
     Deep Navy: navy is 2.09:1 on Tawny Umber. */
  --category-underline: linear-gradient(90deg,
      #ffffff 0%,
      rgba(255, 255, 255, 0.3) 40%,
      transparent 100%);
  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 .*/
  padding: var(--drawer-lane);
}

.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 — Search · Account · Currency*/

/* Deck — unplated: the modules stand on the Tawny Umber ground itself.*/
.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: 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);
}

/*        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);
}

.offcanvas-nav__deck .offcanvas-nav__accent-line {
  margin-bottom: var(--spacing-xxs);
}

/* The first heading takes the crown of the panel: one step of air above Account — the same
   step the modules keep between them — rather than the deep crown it carried before.*/
.offcanvas-nav__module:first-child .offcanvas-nav__module-label {
  margin-top: var(--spacing-xl);
}

/* Account — Sign In / Register*/
.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*/
  --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*/
.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 ---*/
.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.*/
.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*/
@media (max-width: 575.98px) {
  /* The Lane narrows for the whole drawer — frame and plate together.*/
  .offcanvas-nav {
    --drawer-lane: 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);
}

/* ---- Active Plate — the open category's ground ----
   Tawny Umber + 40% Black (#000000) composites to #5B4635. No new hue is
   introduced: the same ground is simply sunk into shadow. It covers the open
   category and the sub-category links beneath it only — dormant categories
   stay on Tawny Umber. Full-bleed to both drawer edges: the two Lanes taken
   by the negative margins are handed straight back as padding, so the content
   itself does not move. Keyed off the aria-expanded state the accordion
   already maintains — no JavaScript required.*/
.offcanvas-nav__item--parent:has(.offcanvas-nav__toggle[aria-expanded="true"]) {
  background-color: rgba(0, 0, 0, 0.4);
  margin-left: calc(var(--drawer-lane) * -1);
  margin-right: calc(var(--drawer-lane) * -1);
  margin-top: var(--spacing-nano);    /* 8px — the ground stands clear of the item above */
  margin-bottom: var(--spacing-xxs);  /* 16px — and clears the item below by a full Lane */
  padding: var(--spacing-xs) var(--drawer-lane); /* 20px crown & foot · the drawer's Lanes */
  border-radius: 0 0 3px 3px; /* Sticker geometry — sharp top, rounded bottom */
  transition: background-color 0.35s var(--ease-out);
}

/* Inside the plate the parent-to-sub-category break is the widest gap in the
   Block (32px against 16px between sub-links), so the hierarchy reads from the
   spacing before the eye has to read the colour. The plate's own foot closes
   the Block, so the sub-list carries no bottom margin of its own here.*/
.offcanvas-nav__item--parent:has(.offcanvas-nav__toggle[aria-expanded="true"]) .offcanvas-nav__sublist {
  margin-top: var(--spacing-xs); /* 20px + the toggle's 4px + the sub-link's own 8px = 32px break */
  margin-bottom: 0;
}

/* On the plate the parent underline draws in Gold, so it reads against the
   recessed ground exactly as it reads against the drawer ground — and it takes
   the same fade, so the expanded category's rule is the list's closing divider
   drawn under a name.*/
.offcanvas-nav__item--parent:has(.offcanvas-nav__toggle[aria-expanded="true"]) .offcanvas-nav__toggle::after {
  --category-underline: linear-gradient(90deg,
      var(--golden-milk) 0%,
      rgba(236, 217, 172, 0.3) 40%,
      transparent 100%);
}

/* ---- 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-image: var(--category-underline);
  transition: width 0.35s var(--ease-out);
}

.offcanvas-nav__link--leaf:hover {
  color: #ffffff; /* lifts off the ground instead of sinking into it */
  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; /* : sharp top, rounded bottom*/
  line-height: 1.4;
}

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

.offcanvas-nav__toggle:hover {
  color: #ffffff; /* lifts off the ground instead of sinking into it */
  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: #ffffff;
}

.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), Golden Milk — 6.36:1 on the plate.
   Second tier reads softer than the Parchment parent through luminosity alone,
   never through faintness. ----*/
.offcanvas-nav__sublink {
  display: block;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(0.9375rem, 1.8vw, 1.125rem);
  color: var(--golden-milk); /* was Muted Silver — 2.41:1 */
  text-decoration: none;
  padding: var(--spacing-nano) 0 var(--spacing-nano) var(--spacing-sm); /* 16px between listings */
  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(236, 217, 172, 0.55); /* Gold hairline — the old 15% Parchment was ~1.15:1 */
}

.offcanvas-nav__sublink::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  width: 0;
  height: 1px;
  background-color: var(--golden-milk); /* the gold rule, extended on hover */
  transition: width 0.35s var(--ease-out);
  transform: translateY(-50%);
}

.offcanvas-nav__sublink:hover {
  color: #ffffff; /* lifts — 8.85:1 on the plate */
  padding-left: calc(var(--spacing-sm) + 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;
}

/* ---- Active Branch — "you are here" ----
   The branch the visitor walked is lit: the current child and its parent both
   stand at Parchment Cream, their dormant siblings stay in Golden Milk, and
   hover still lifts to White. Rest and hover colours are unchanged. */

/* Active sub-link, on the recessed plate ground #5B4635 */
.offcanvas-nav__sublink.is-active,
.offcanvas-nav__sublink[aria-current="page"] {
  color: var(--parchment-cream);                /* 8.00:1 — lifts the walked branch to the parent's light */
  border-left: 1px solid var(--golden-milk);    /* the gold rule, drawn solid */
  font-weight: 700;
}

/* Extend the tick permanently so "you are here" reads without hovering */
.offcanvas-nav__sublink.is-active::before,
.offcanvas-nav__sublink[aria-current="page"]::before {
  width: 14px;
}

/* Active leaf / active parent on the plain Tawny Umber ground #987458 */
.offcanvas-nav__link--leaf.is-active,
.offcanvas-nav__link--leaf[aria-current="page"],
.offcanvas-nav__item--parent.is-active .offcanvas-nav__toggle {
  color: #ffffff;                               /* 4.22:1 on #987458 */
}

/* Draw their underline fully */
.offcanvas-nav__link--leaf.is-active::after,
.offcanvas-nav__link--leaf[aria-current="page"]::after,
.offcanvas-nav__item--parent.is-active .offcanvas-nav__toggle::after {
  width: 100%;
}

/* ---- 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), Parchment Cream ----*/
.offcanvas-nav__list--secondary .offcanvas-nav__link {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--parchment-cream); /* was 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: #ffffff; /* was Deep Navy — 2.09:1 on Tawny Umber */
  padding-left: var(--spacing-xs);
}

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

/* ---- Guarantee Badge — Golden Milk border, Parchment Cream text.
   A link to the guarantee's own page; ink and border set here, so it reads as
   the badge whether it is reached or hovered. ----*/
.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);
  text-decoration: none;
  padding: var(--spacing-quark) var(--spacing-nano);
  border: 1px solid var(--golden-milk);
  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*/
.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; /* : sharp top, rounded bottom*/
  /* A control, not a link: clicking it opens the tooltip and goes no further */
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.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-family: 'Univers Condensed', var(--font-primary); /* Univers Bold Condensed Oblique */
  font-weight: 700;
  font-style: oblique;
}

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

/* ---- The shape each flag is drawn at ----
   Height is one size for every market; the width follows the flag's own proportions.
   Most of the flag service's files state those proportions in themselves, and the browser
   reads the width straight off them. Denmark's file does not — it arrives carrying only a
   viewBox — so the browser had nothing to size it by and the Danish flag came out of a
   guessed box, squashed. Each flag's proportions are therefore stated here, taken from the
   file it is fetched from. A flag added to the market list wants a line here too. */
.flag-selector__flag[data-market="de"] { aspect-ratio: 5 / 3; }
.flag-selector__flag[data-market="fr"] { aspect-ratio: 3 / 2; }
.flag-selector__flag[data-market="it"] { aspect-ratio: 3 / 2; }
.flag-selector__flag[data-market="ch"] { aspect-ratio: 1 / 1; }
.flag-selector__flag[data-market="ru"] { aspect-ratio: 3 / 2; }
.flag-selector__flag[data-market="es"] { aspect-ratio: 3 / 2; }
.flag-selector__flag[data-market="dk"] { aspect-ratio: 37 / 28; }
.flag-selector__flag[data-market="hr"] { aspect-ratio: 2 / 1; }

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