/* =====================================================================
   Header — forest bar with desktop mega menu + mobile drawer accordion
   ===================================================================== */

:root {
  --dm-ease: cubic-bezier(.22, .61, .36, 1);
  /* Easing + duration the mega menu (and its page scrim) fade in with. */
  --dm-nav-ease: cubic-bezier(0, 0, 0.2, 1);
  --dm-nav-dur: .4s;
  /* Forest tone the header + mega panel take while a mega menu is open. */
  --dm-nav-open-bg: var(--dm-bg-default-tertiary);
  /* Header bar height — consumed by transparent-header pages to pull a hero up
     underneath the overlaid header. Kept in sync with .dm-header-inner. */
  --dm-header-h: 92px;
}

@media (max-width: 1023.98px) {
  :root { --dm-header-h: 88px; }
}

/* Reserve the scrollbar gutter so opening the mega panel (which can make the
   page tall enough to add a scrollbar) never shifts the layout width. Without
   this the header "shakes" as the scrollbar toggles on/off. */
html {
  scrollbar-gutter: stable;
}

.site-logo img {
  max-width: 100% !important;
}

/* ---------------------------------------------------------------------
   Sticky, hide-on-scroll header behavior
   ---------------------------------------------------------------------
   Scoped to .dm-header (the site header from header.php). This was a bare
   `header` element selector, which also caught every other <header> in a
   template — a single post's title block, for one — and pinned it to the
   top of the viewport.
   --------------------------------------------------------------------- */
.dm-header {
  position: sticky;
  top: 0;
  z-index: 50;
  will-change: transform;
  transition: transform 250ms ease-in-out;
}

.dm-header.header--hidden {
  transform: translateY(-100%);
}

/* ---------------------------------------------------------------------
   Shell
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   Announcement / top bar (above the header; Customizer-controlled)
   --------------------------------------------------------------------- */
.dm-topbar {
  background-color: var(--color-forest);
  color: var(--color-cream);
  /* Above the mega-menu scrim (z-index 40): the announcement bar is part of the
     header furniture, so it must not be dimmed and blurred along with the page
     when a mega panel opens. */
  position: relative;
  z-index: 51;
}

.dm-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;                      /* Fixed 32px */
}

.dm-topbar-text {
  margin: 0;
  text-align: center;
  font-family: var(--font-default); /* Roboto Condensed */
  font-size: 14px;                   /* body/sm/regular */
  font-weight: 400;                  /* Regular */
  line-height: 1.4;                  /* 140% */
  letter-spacing: 0;                 /* 0% */
}

.dm-header {
  position: sticky; /* also acts as containing block for the mega panel */
  background-color: var(--color-cream);
  color: var(--color-forest);
  border-bottom: 1px solid color-mix(in srgb, var(--dm-ext-black) 15%, transparent);
}

.dm-header a {
  color: inherit;
}

/* Header shell: logo column (vertically centered) + right stack of the two rows.
   Fixed height in every state (no shrink-on-scroll). */
.dm-header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 92px;
  max-height: 92px;
}

/* Keep a side gutter on desktop. Tailwind's .container is full-width at each
   exact breakpoint (1024px, 1280px…), so with no padding the logo/nav clipped
   at ~1024px. 16px matches the hero + section gutter so everything left-aligns. */
@media (min-width: 1024px) {
  .dm-header-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.dm-header-right {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Utility row (desktop) */
.dm-util {
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
  padding-top: 8px;
  padding-bottom: 4px;
}

.dm-util-link {
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  color: var(--color-forest);
  font-family: var(--font-default);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: capitalize;
  opacity: 1;
  transition: opacity .18s var(--dm-ease);
}

/* Language code stays as a compact uppercase abbreviation (e.g. EN). */
.dm-util-link.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Small down caret next to the language code (max 8px wide). */
.lang-caret {
  width: 8px;
  height: auto;
  flex: 0 0 auto;
}

.dm-util-link:hover,
.dm-util-link:focus-visible {
  opacity: .82;
}

.dm-util .lang-dropdown,
.dm-util .mini-cart-container {
  display: inline-flex;
  align-items: center;
  color: var(--color-forest);
}

/* Main row (primary nav; sits under the utility row in the right stack) */
.dm-main {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.dm-logo {
  display: flex;
  align-items: center;
}

.dm-logo-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 157px;
  max-height: 56px;
  object-fit: contain;
}

/* Shopping cart icon (max 17px wide). */
.dm-cart-icon {
  display: block;
  width: auto;
  height: auto;
  max-width: 17px;
}

/* ---------------------------------------------------------------------
   Desktop primary nav
   --------------------------------------------------------------------- */
.dm-nav-wrap {
  align-items: center;
}

/* Compare + cart sit after the primary nav, evenly spaced. */
.dm-nav-wrap .dm-compare-link {
  margin-left: 30px;
}

.dm-nav-wrap .header-mini-cart {
  display: inline-flex;
  align-items: center;
  margin-left: 30px;
  color: var(--color-forest);
}

/* Cart item count: a small badge pushed out to the icon's top-right corner,
   matching the compare badge beside it (.dm-compare-badge). The button's
   Tailwind classes only offset it 4px (-top-1/-right-1), so it sat over the
   icon itself. */
.dm-lc-cart-button > span {
  position: relative;
  display: inline-flex;
}

.dm-lc-cart-count {
  position: absolute;
  top: -9px;
  right: -11px;
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-forest);
  color: var(--dm-fg-default-white);
  font-family: var(--font-default, sans-serif);
  font-size: 10px;
  font-weight: 700;
  line-height: 18px !important;
  text-align: center;
  box-shadow: 0 0 0 2px var(--color-cream);
}

.dm-lc-cart-count[hidden] {
  display: none;
}

.dm-pnav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-family: var(--font-default); /* Roboto Condensed */
  font-size: 14px;                   /* body/sm/strong */
  line-height: 1.4;                  /* 140% */
  letter-spacing: 0;                 /* 0% */
  text-transform: uppercase;
  font-weight: 500;                  /* Medium */
  color: var(--color-forest);
}

.dm-item {
  position: static; /* lets the mega panel span the full header width */
  /* Flex items honour z-index without positioning, so the whole row sits above
     the open mega panel (z-index 40). Needed because the dimming rule below
     drops opacity < 1, which creates a stacking context and would otherwise
     trap each item's own z-index inside it, letting the panel's full-width
     hover bridge swallow clicks on the neighbouring links. */
  z-index: 45;
  transition: opacity .28s var(--dm-ease);
}

/* Hovering the nav dims every top-level item, then the hovered one lifts back
   to full opacity — a soft focus-pull on the item under the cursor. */
.dm-pnav:hover .dm-item {
  opacity: .45;
}

.dm-pnav .dm-item:hover,
.dm-pnav .dm-item:focus-within {
  opacity: 1;
}

/* The item whose panel is open drops one level, so every other top-level link
   paints and hit-tests above that panel no matter where it sits in the row. */
.dm-has-mega:hover,
.dm-has-mega:focus-within,
.dm-has-mega.is-open {
  z-index: 44;
}

.dm-lnk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 0;
  position: relative;
  /* Keep the trigger above the open mega panel + its invisible hover bridges
     (z-index 40) so the top-level link stays clickable while the panel is open. */
  z-index: 45;
  cursor: pointer;
  transition: color .18s var(--dm-ease);
}

/* Animated underline. It lives on the label span, not on .dm-lnk, so it tracks
   the text only and stops short of the mega chevron. */
.dm-lnk-label {
  position: relative;
  display: inline-block;
}

.dm-lnk-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  /* Sits just under the text baseline box — the label span is exactly as tall
     as the line box, so a small negative offset keeps the rule tight. */
  bottom: -3px;
  height: 1px;
  background: var(--color-forest);
  transition: right .25s var(--dm-ease);
}

.dm-item:hover .dm-lnk-label::after,
.dm-item:focus-within .dm-lnk-label::after {
  right: 0;
}

/* Current page: the same underline, held open. Set by delmaguey_nav_is_current()
   in inc/header-nav.php, which also marks a mega parent when one of its cards is
   the current page. */
.dm-item.is-current .dm-lnk-label::after {
  right: 0;
}

/* Invisible hover bridge: spans the gap between the trigger and the mega
   panel (the header's bottom padding) so moving the cursor down into the
   panel never crosses a dead zone that would close the menu. */
.dm-has-mega .dm-lnk::before {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  top: 100%;
  /* Only bridge the small gap down to the panel's top edge. Kept short so this
     (now raised above the panel — see .dm-lnk z-index) can't overlay and block
     clicks on the first mega card sitting beneath the trigger. The full-width
     .dm-mega::before handles keeping the menu open across the rest of the gap. */
  height: 12px;
}

.dm-chev {
  width: 16px;
  height: 16px;
  transition: transform .25s var(--dm-ease);
}

.dm-has-mega:hover .dm-chev,
.dm-has-mega:focus-within .dm-chev,
.dm-has-mega.is-open .dm-chev {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------------
   Mega panel
   --------------------------------------------------------------------- */
.dm-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  /* Pull the panel up so it opens close to the nav row (smaller dead gap). */
  margin-top: -18px;
  background: var(--color-cream);
  padding-bottom: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  pointer-events: none;
  z-index: 40;
  /* Closing is deliberately near-instant (see the mouseleave handler in
     assets/js/header.js, which removes .is-open with no timer). */
  transition: opacity .12s var(--dm-ease), transform .12s var(--dm-ease), visibility 0s .12s;
}

/* Full-width invisible bridge across the gap between the nav row and the
   panel. It belongs to the panel, so it is only hoverable while the panel is
   open (pointer-events is inherited) — keeping the menu open even if the
   cursor pauses in the gap or moves diagonally toward the first card. */
.dm-mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  /* Just tall enough to cover the gap — anything taller reaches up into the
     nav row and keeps the panel open while the cursor is on another link. */
  height: 22px;
}

.dm-has-mega:hover .dm-mega,
.dm-has-mega:focus-within .dm-mega,
.dm-has-mega.is-open .dm-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  /* Opening is the slow, eased move; closing keeps the short transition above
     so the panel never outlives the cursor. */
  transition: opacity var(--dm-nav-dur) var(--dm-nav-ease), transform var(--dm-nav-dur) var(--dm-nav-ease), visibility 0s;
  transition-delay: 0s;
}

/* Visible panel box. Full-width by default so the cream/glass background still
   spans the header; give it margin/padding/border-radius to inset the panel. */
.dm-mega-inner {
  position: relative;
}

.dm-mega-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  padding-top: 24px;
  padding-bottom: 18px;
}

.dm-card {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: block;
  border-radius: 8px;
  background: var(--color-forest-light);
  opacity: 0;
  transform: translateY(14px);
  /* Closed state: no stagger, short fade — the cards must not outlive the
     panel when the cursor leaves. The stagger belongs to the open state only. */
  transition: opacity .12s var(--dm-ease), transform .12s var(--dm-ease);
  transition-delay: 0s;
}

.dm-has-mega:hover .dm-card,
.dm-has-mega:focus-within .dm-card,
.dm-has-mega.is-open .dm-card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .3s var(--dm-ease), transform .3s var(--dm-ease);
}

.dm-has-mega:hover .dm-card:nth-child(1),
.dm-has-mega:focus-within .dm-card:nth-child(1),
.dm-has-mega.is-open .dm-card:nth-child(1) { transition-delay: .02s; }
.dm-has-mega:hover .dm-card:nth-child(2),
.dm-has-mega:focus-within .dm-card:nth-child(2),
.dm-has-mega.is-open .dm-card:nth-child(2) { transition-delay: .06s; }
.dm-has-mega:hover .dm-card:nth-child(3),
.dm-has-mega:focus-within .dm-card:nth-child(3),
.dm-has-mega.is-open .dm-card:nth-child(3) { transition-delay: .10s; }
.dm-has-mega:hover .dm-card:nth-child(4),
.dm-has-mega:focus-within .dm-card:nth-child(4),
.dm-has-mega.is-open .dm-card:nth-child(4) { transition-delay: .14s; }
.dm-has-mega:hover .dm-card:nth-child(5),
.dm-has-mega:focus-within .dm-card:nth-child(5),
.dm-has-mega.is-open .dm-card:nth-child(5) { transition-delay: .18s; }
.dm-has-mega:hover .dm-card:nth-child(6),
.dm-has-mega:focus-within .dm-card:nth-child(6),
.dm-has-mega.is-open .dm-card:nth-child(6) { transition-delay: .22s; }

.dm-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--dm-ease);
}

.dm-card:hover .dm-card-img {
  transform: scale(1.06);
}

/* Hover: the photo gives way to the collection's Zapotec pattern panel
   (assets/images/card-patterns/). The pattern colour cycles through the four
   panels by position, matching the `color` variant on the Figma card. */
.dm-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--dm-card-pattern);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .45s var(--dm-ease);
  pointer-events: none;
}

.dm-card:hover::before,
.dm-card:focus-visible::before {
  opacity: 1;
}

/* Keep the caption and its scrim above the pattern layer. */
.dm-card-shade { z-index: 2; }
.dm-card-cap { z-index: 3; }

.dm-card:nth-child(4n + 1) { --dm-card-pattern: url("../images/card-patterns/green.webp"); }
.dm-card:nth-child(4n + 2) { --dm-card-pattern: url("../images/card-patterns/yellow.webp"); }
.dm-card:nth-child(4n + 3) { --dm-card-pattern: url("../images/card-patterns/pink.webp"); }
.dm-card:nth-child(4n + 4) { --dm-card-pattern: url("../images/card-patterns/blue.webp"); }

/* ---------------------------------------------------------------------
   Placeholder card (no image set yet) — tinted panel with a centered icon
   --------------------------------------------------------------------- */
.dm-card--ph {
  background: linear-gradient(160deg, var(--color-forest-light) 0%, var(--color-forest) 100%);
}

.dm-card-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .5s var(--dm-ease);
}

.dm-card--ph:hover .dm-card-ph {
  transform: scale(1.06);
}

.dm-card-icon {
  width: 34px;
  height: auto;
  color: var(--color-cream);
  opacity: .45;
  transition: opacity .3s var(--dm-ease);
}

.dm-card--ph:hover .dm-card-icon {
  opacity: .7;
}

.dm-card-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--dm-ext-black) 82%, transparent) 0%, color-mix(in srgb, var(--dm-ext-black) 40%, transparent) 32%, transparent 62%);
}

.dm-card-cap {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  color: var(--dm-fg-default-white);
}

.dm-card-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--dm-fg-default-white);
  max-width: 9ch;
  text-transform: none;
  letter-spacing: 0;
}

.dm-card .dm-arrow {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  transition: transform .25s var(--dm-ease);
}

.dm-card:hover .dm-arrow {
  transform: translateX(4px);
}

/* ---------------------------------------------------------------------
   Mobile actions (in the forest bar)
   --------------------------------------------------------------------- */
.dm-mobile-actions {
  align-items: center;
  gap: 18px;
}

/* Top-bar cart icon sized to match the burger next to it. */
.dm-mobile-actions .dm-cart-icon {
  width: auto;
  height: 20px;
  max-width: none;
  object-fit: contain;
}

.dm-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: var(--color-forest);
}

.dm-burger-icon {
  display: block;
  width: 22px;
  height: auto;
}

/* Mobile header bar: shorter bar (max 88px) with left/right edge padding. */
@media (max-width: 1023.98px) {
  .dm-header-inner {
    min-height: 88px;
    gap: 16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .dm-logo-img {
    max-height: 40px;
  }
}

/* ---------------------------------------------------------------------
   Drawer (mobile)
   --------------------------------------------------------------------- */
.header-drawer {
  background-color: var(--color-forest);
  position: relative;
  z-index: 61 !important;
  /* Grow with content so the background covers the full scroll height
     (not just the first 100vh) when the expanded menu overflows. */
  min-height: 100%;
}

/* The wrapper carries Tailwind's z-50, and a positioned element with a z-index
   opens a stacking context — so the 55/60/61 below are resolved *inside* it and
   the whole drawer paints at 50. The announcement bar is 51, which is why it
   covered the top strip of the open drawer: the logo and the cart/close icons.
   Lift the wrapper over the bar and the panel's own order still holds inside. */
.drawer.drawer-end { z-index: 70; }

.drawer .drawer-overlay { z-index: 55 !important; }
.drawer .drawer-side { z-index: 60 !important; }

.dm-drawer-inner {
  color: var(--dm-fg-default-white);
}

/* Drawer header: logo | (cart + close) */
.dm-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-white) 18%, transparent);
}

.dm-drawer-logo-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 112px;
  max-height: 40px;
  object-fit: contain;
}

.dm-drawer-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.dm-drawer-actions .dm-cart-icon {
  width: 16px;
  height: 20px;
  max-width: none;
  object-fit: contain;
}

.dm-drawer-close {
  display: inline-flex;
  cursor: pointer;
  color: var(--dm-fg-default-white);
}

.dm-drawer-close-icon {
  width: 20px;
  height: 20px;
  display: block;
}

/* Nav list */
.dm-drawer-nav {
  padding-top: 6px;
}

.dm-dnav {
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dm-dnav li {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

/* Top-level rows (plain links + accordion titles) */
.dm-dnav .dm-drow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 0;
  border: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--dm-fg-default-white);
  text-transform: none;
  background: none;
}

.dm-dnav :where(li > a):hover,
.dm-dnav :where(li > a):focus {
  color: var(--dm-fg-default-white) !important;
  background: transparent;
}

/* Current page in the drawer. The label is underlined rather than the whole
   row, so accordion triggers don't drag their chevron into the rule. */
.dm-dnav a.dm-drow.is-current,
.dm-dnav button.dm-drow.is-current .dm-drow-lbl,
.dm-dnav .dm-acc-head.is-current .dm-drow-lbl {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* Accordion (custom, JS-toggled) */
.dm-dnav .dm-macc-item { padding: 0; }

/* Accordion trigger (button) shares the top-row look with plain links */
.dm-acc-trigger {
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
}

/* Rows whose label links to the parent page: the <a> takes the row's text,
   the chevron button sits beside it with a wider tap target. */
.dm-acc-head .dm-acc-trigger {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  align-self: stretch;
  width: 48px;
  margin-right: -12px;
  padding-right: 12px;
}

.dm-drow-lbl {
  flex: 1;
  min-width: 0;
  color: inherit;
}

.dm-dnav .dm-acc-head .dm-drow-lbl:hover,
.dm-dnav .dm-acc-head .dm-drow-lbl:focus {
  color: var(--dm-fg-default-white);
}

/* Chevron on the accordion trigger */
.dm-dnav .dm-drow .dm-chev {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--dm-fg-default-white);
  transition: transform .3s var(--dm-ease);
}

.dm-acc-trigger[aria-expanded="true"] .dm-chev {
  transform: rotate(180deg);
}

/* Chevron sizing/colour again for the linked-label row (its button is nested,
   so it misses the `.dm-drow .dm-chev` rule above). */
.dm-dnav .dm-acc-head .dm-chev {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--dm-fg-default-white);
  transition: transform .3s var(--dm-ease);
}

/* Collapsible panel: animates height via the 0fr -> 1fr grid trick.
   Collapsed by default; JS flips aria-expanded on the trigger. */
.dm-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--dm-ease);
}

.dm-macc-item.is-open > .dm-acc-panel {
  grid-template-rows: 1fr;
}

/* Divider under a group only while it is expanded */
.dm-macc-item.is-open {
  border-bottom: 1px solid color-mix(in srgb, var(--color-white) 18%, transparent);
  margin-bottom: 4px;
  padding-bottom: 6px;
}

.dm-sub {
  overflow: hidden;
  min-height: 0;
  display: block;
  padding-bottom: 6px;
}

.dm-subrow {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  padding-left: 12px;
}

.dm-thumb {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  flex: 0 0 auto;
  object-fit: cover;
}

.dm-thumb--empty {
  background: var(--color-forest-light);
}

.dm-sub-lbl {
  flex: 1;
  font-family: var(--font-default);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--dm-fg-default-white);
  text-transform: none;
}

.dm-subrow .dm-arrow {
  width: 20px;
  height: 20px;
  opacity: .9;
  flex: 0 0 auto;
  color: var(--dm-fg-default-white);
}

/* Bottom utility links (Shop Now / Find Us / EN) */
.dm-drawer-util {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--color-white) 18%, transparent);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.dm-drawer-util-link {
  font-family: var(--font-default);
  font-size: 15px;
  font-weight: 700;
  color: var(--dm-fg-default-white);
  text-transform: capitalize;
  letter-spacing: .02em;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.dm-drawer-lang .lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
}

header .lang-dropdown ul li a {
  gap: 2px;
  font-family: var(--font-default);
  font-size: 14px;
  font-weight: 400;
}

/* The open menu sits on a cream panel (bg-base-100), so its links must be
   forest — otherwise they inherit the white from .dm-drawer-inner or the
   transparent-header state and vanish into the panel. Deliberately NOT scoped
   to `header`: the mobile drawer is a sibling of <header>, not a child of it
   (see header.php). Targeting the <a> directly beats those inherited colours
   regardless of selector weight. */
/* !important: over a hero (home, collections) the header turns every link
   cream through several stacked states (transparent, scrolled, mega-open —
   the last outweighs any plain selector), which left cream text on this cream
   panel. The panel's own colours must win in every one of them. */
.lang-menu {
  background-color: var(--color-cream) !important;
}

.lang-menu li a {
  color: var(--color-forest) !important;
}

.lang-menu li a:hover,
.lang-menu li a:focus-visible,
.lang-menu li a.active {
  color: var(--color-forest) !important;
  background-color: color-mix(in srgb, var(--color-forest) 8%, transparent);
}

/* Desktop language switcher: always open the menu downward, aligned under
   the trigger, so it can't get clipped by the top of the header. */
.header-lang {
  position: relative;
}

.header-lang .dropdown-content.lang-menu {
  position: absolute;
  top: 100%;
  bottom: auto;
  right: 0;
  left: auto;
  margin-top: 8px;
  inset-block-start: 100%;
  inset-block-end: auto;
  z-index: 60;
}

/* ---------------------------------------------------------------------
   Logo variants
   The light logo only appears when the header is transparent over a hero.
   --------------------------------------------------------------------- */
.dm-logo-img--light {
  display: none;
}

/* ---------------------------------------------------------------------
   Transparent header over a hero (collection PLPs)

   Body gets .dm-transparent-header. The header floats over the hero with no
   background and cream text/logo; once the hero scrolls past, header.js adds
   .dm-scrolled to <body> and the bar fades back to the standard cream look.
   --------------------------------------------------------------------- */
body.dm-transparent-header .dm-header {
  background-color: transparent;
  /* No layout border here: the header height must equal --dm-header-h exactly so
     the hero can be pulled flush under it with no 1px seam. The scrolled-state
     divider is drawn with box-shadow (below) so it never changes layout. */
  border-bottom-width: 0;
  box-shadow: 0 1px 0 transparent;
  color: var(--color-cream);
  transition: background-color .35s var(--dm-ease), box-shadow .35s var(--dm-ease), color .35s var(--dm-ease);
}

/* Everything that normally reads forest turns cream over the hero. */
body.dm-transparent-header .dm-header a,
body.dm-transparent-header .dm-util-link,
body.dm-transparent-header .dm-pnav,
body.dm-transparent-header .dm-lnk,
body.dm-transparent-header .dm-burger,
body.dm-transparent-header .dm-util .lang-dropdown,
body.dm-transparent-header .dm-util .mini-cart-container,
body.dm-transparent-header .dm-nav-wrap .header-mini-cart {
  color: var(--color-cream);
}

/* Animated nav underline uses currentColor's cream over the hero. */
body.dm-transparent-header .dm-lnk-label::after {
  background: var(--color-cream);
}

/* Swap to the light logo over the hero. */
body.dm-transparent-header .dm-logo-img--dark {
  display: none;
}
body.dm-transparent-header .dm-logo-img--light {
  display: block;
}

/* Scrolled past the hero → restore the standard cream bar. */
body.dm-transparent-header.dm-scrolled .dm-header {
  background-color: var(--color-cream);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--dm-ext-black) 15%, transparent);
  color: var(--color-forest);
}

body.dm-transparent-header.dm-scrolled .dm-header a,
body.dm-transparent-header.dm-scrolled .dm-util-link,
body.dm-transparent-header.dm-scrolled .dm-pnav,
body.dm-transparent-header.dm-scrolled .dm-lnk,
body.dm-transparent-header.dm-scrolled .dm-burger,
body.dm-transparent-header.dm-scrolled .dm-util .lang-dropdown,
body.dm-transparent-header.dm-scrolled .dm-util .mini-cart-container,
body.dm-transparent-header.dm-scrolled .dm-nav-wrap .header-mini-cart {
  color: var(--color-forest);
}

body.dm-transparent-header.dm-scrolled .dm-lnk-label::after {
  background: var(--color-forest);
}

body.dm-transparent-header.dm-scrolled .dm-logo-img--dark {
  display: block;
}
body.dm-transparent-header.dm-scrolled .dm-logo-img--light {
  display: none;
}

/* Mega menu over the hero: drop the solid cream panel for a frosted-glass look —
   transparent tint + a smooth backdrop blur of the hero behind it. Only while
   the header is transparent (over the hero); once scrolled it returns to cream.

   The glass sits on .dm-mega-inner rather than on .dm-mega itself, so its box
   can be inset from the panel with ordinary margin/padding without moving the
   panel's positioning or its hover bridge. .dm-mega stays a bare wrapper in
   this state — its cream background has to be cleared or it would paint solid
   behind the tint. */
body.dm-transparent-header:not(.dm-scrolled) .dm-mega {
  background: transparent;
}

body.dm-transparent-header:not(.dm-scrolled) .dm-mega-inner {
  /* Float the glass panel clear of the nav row. .dm-mega is absolutely
     positioned, so it establishes a BFC and this margin can't collapse out
     through it — the gap stays inside the panel's hover area. */
  margin-top: 20px;
  background: color-mix(in srgb, var(--color-forest) 28%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
}

/* ---------------------------------------------------------------------
   Mega menu open state — forest header + page scrim

   While a desktop mega panel is open, header.js puts .dm-mega-open on <body>.
   The bar and the panel share one forest tone (var(--color-forest)) with cream text, and a
   blurred black scrim fades in over the page beneath them. Both fade with the
   same 0.4s cubic-bezier(0, 0, 0.2, 1) the panel itself uses.
   --------------------------------------------------------------------- */

/* Full-viewport scrim. Sits under the sticky header (z-index 50) and its mega
   panel, over everything else. Inert until the menu opens. */
.dm-nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--dm-ext-black) 45%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dm-nav-dur) var(--dm-nav-ease), visibility 0s var(--dm-nav-dur);
}

body.dm-mega-open .dm-nav-scrim {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Closing snaps too: header.js flags the body for one frame as the menu closes,
   so the bar drops straight back to its own colour instead of cross-fading past
   the panel on its way out. */
body.dm-mega-snap .dm-header,
body.dm-transparent-header.dm-mega-snap .dm-header {
  transition: none;
}

/* The bar itself. Also wins over the transparent-header (over-hero) rules, so
   the open menu reads the same on every page. */
body.dm-mega-open .dm-header,
body.dm-transparent-header.dm-mega-open .dm-header,
body.dm-transparent-header.dm-scrolled.dm-mega-open .dm-header {
  background-color: var(--dm-nav-open-bg);
  border-bottom-color: transparent;
  box-shadow: none;
  color: var(--color-cream);
  /* Snap, don't fade. While the bar cross-faded to forest the panel below it
     was already solid, so the two greens met at a visible seam across the
     header's bottom edge. The bar is forest the instant the menu opens; only
     the panel and the scrim fade. */
  transition: none;
}

body.dm-mega-open .dm-header a,
body.dm-mega-open .dm-util-link,
body.dm-mega-open .dm-pnav,
body.dm-mega-open .dm-lnk,
body.dm-mega-open .dm-burger,
body.dm-mega-open .dm-util .lang-dropdown,
body.dm-mega-open .dm-util .mini-cart-container,
body.dm-mega-open .dm-nav-wrap .header-mini-cart,
body.dm-transparent-header.dm-scrolled.dm-mega-open .dm-header a,
body.dm-transparent-header.dm-scrolled.dm-mega-open .dm-util-link,
body.dm-transparent-header.dm-scrolled.dm-mega-open .dm-pnav,
body.dm-transparent-header.dm-scrolled.dm-mega-open .dm-lnk,
body.dm-transparent-header.dm-scrolled.dm-mega-open .dm-burger,
body.dm-transparent-header.dm-scrolled.dm-mega-open .dm-util .lang-dropdown,
body.dm-transparent-header.dm-scrolled.dm-mega-open .dm-util .mini-cart-container,
body.dm-transparent-header.dm-scrolled.dm-mega-open .dm-nav-wrap .header-mini-cart {
  color: var(--color-cream);
}

body.dm-mega-open .dm-lnk-label::after,
body.dm-transparent-header.dm-scrolled.dm-mega-open .dm-lnk-label::after {
  background: var(--color-cream);
}

/* Cream logo on the forest bar. */
body.dm-mega-open .dm-logo-img--dark,
body.dm-transparent-header.dm-scrolled.dm-mega-open .dm-logo-img--dark {
  display: none;
}
body.dm-mega-open .dm-logo-img--light,
body.dm-transparent-header.dm-scrolled.dm-mega-open .dm-logo-img--light {
  display: block;
}

/* The panel itself takes the same forest tone — including over a hero, where it
   would otherwise stay the frosted-glass box. */
body.dm-mega-open .dm-mega,
body.dm-transparent-header.dm-mega-open .dm-mega {
  background: var(--dm-nav-open-bg);
}

body.dm-transparent-header.dm-mega-open .dm-mega-inner {
  margin-top: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Mobile: no mega panel, so neither the scrim nor the forest bar applies. */
@media (max-width: 1023.98px) {
  .dm-nav-scrim {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dm-header *,
  .dm-mega,
  .dm-nav-scrim,
  .dm-card {
    transition: none !important;
  }
  .dm-card {
    opacity: 1;
    transform: none;
  }
}

/* Mini-cart: on mobile, line the close (X) button up with the "Shopping Cart"
   title. The utility class sets top-9 (2.25rem), which sits ~13px below the
   smaller mobile title; nudge it up so both share one line. Desktop keeps top-9.
   Two-class selector wins over the single utility class regardless of load order. */
@media (max-width: 767px) {
  .liquidcommerce-mini-cart-dialog .liquidcommerce-mini-cart-close {
    top: 1.5rem;
  }

  /* Nudge the header cart icon up 1px so it optically lines up with the
     neighbouring header icons on mobile. */
  .dm-cart-icon {
    margin-bottom: 1px;
  }
}

/* ---- Small desktop (1024-1280): match the Figma board ---------------- *
 * Figma "Home Page - Small Desktop" (1987:16173):
 *   ui-banner        text at x=100, width 1080  -> the bare 1080 container
 *   ui-navigation    logo at x=120, menu right edge at 1160 -> 120px gutters
 * The shared .container is capped at 1080 in this range (tailwind.css), which
 * lands its edges at 100/1180; the extra 20px here brings the header's own
 * content to the board's 120. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
  .dm-topbar-inner {
    padding-inline: 0;
  }

  /* Inner pages (PLP board 2021:16522): 92 tall, logo at x=100 - i.e. the
     bare 1080 container with no extra inset. */
  .dm-header-inner {
    padding-left: 0;
    padding-right: 0;
  }

  /* Home (board 1987:16187): the header is transparent and overlaid on the
     hero, and is taller - py-32 around the 60px menu stack = 124 - with the
     logo at x=120, so 20px inside the 1080 container.
     --dm-header-h MUST track this: the hero pulls itself up by exactly that
     much, and if it is smaller than the bar the page background shows as a
     strip between the topbar and the hero. */
  body.dm-transparent-header {
    --dm-header-h: 124px;
  }

  body.dm-transparent-header .dm-header-inner {
    padding-left: 20px;
    padding-right: 20px;
    min-height: 124px;
    max-height: 124px;
  }

  /* 20px between the utility row and the main nav row. */
  .dm-header-right {
    row-gap: 20px;
  }

  .dm-util {
    gap: 24px;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* body/sm/regular — the board sets no tracking on these. */
  .dm-util-link {
    letter-spacing: 0;
  }

  /* Language chevron: 16px on the board. */
  .dm-util-link.lang-trigger svg {
    width: 16px;
  }

  .dm-main {
    gap: 32px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .dm-pnav {
    gap: 32px;
  }
}

/* ---- 404 page, small desktop (1024-1280) ------------------------------
 * No Figma board and no stylesheet of its own (404.php is the page-header
 * block + a short message), so its few overrides live here. Shared 1280
 * rules: capped 1080 container, page title 60, 80px section padding. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
	.error404 .site-main > section:first-child > .mx-auto {
		/* The capped 1080 container already provides the 100px gutter. */
		padding-inline: 0;
	}

	.error404 .site-main > section:first-child {
		aspect-ratio: auto;
		min-height: 480px;
	}

	.error404 .site-main > section:first-child h1 {
		font-size: 60px;
		line-height: 1.1;
	}

	.error404 .site-main > section:last-child {
		padding-block: 80px;
	}
}