/* GW Header Menu
   Desktop nav + mega menus: Figma 31:2326 (Shop open) / 31:2628 (Blog open).
   Mobile drawer: Figma 31:2892 (main panel) / 112:215 + 112:407 (sub-panels).
   Markup: snippets/gw-nav-desktop.liquid, snippets/gw-nav-drawer.liquid.
   Behaviour: assets/gw-header-menu.js (<gw-mega-nav>, <gw-drawer-nav>).

   Figma draws every 1px line INSIDE its box and outside auto-layout, so a
   bordered box keeps the Figma size with padding reduced by 1px on that side
   (boxed row 56 = 15 + 24 + 15 + 2x1). Line-height is Figma "Auto", i.e.
   line-height: normal (EB Garamond: 14→18, 16→21, 18→23, 20→26). */

/* ---------- desktop nav row ---------- */

.gw-nav__list {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* assets/theme.min.css gives EVERY li a margin-bottom:4.5px, and inside the
   nav wrapper `.top-links ul li:not(:has(...))` (0,2,2) makes each li an
   inline-block with an 18px / 28.8px line box; `.top-links.site-header__nav a`
   (0,2,1, assets/custom.css) forces 16px on every link. The nav rules below
   are therefore anchored on #AccessibleNav. */
#AccessibleNav li {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: normal;
  list-style: none;
}

.gw-drawer li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gw-nav__item {
  position: static;
}

.gw-nav__trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 21px;
}

/* Bridges the 40.43px between the link box and the panel top (nav row
   bottom), so the pointer can travel down without leaving the item. */
.gw-nav__item--mega.is-open .gw-nav__trigger::after {
  content: "";
  position: absolute;
  left: -16px;
  right: -16px;
  top: 100%;
  height: 42px;
}

#AccessibleNav .gw-nav__link,
#AccessibleNav .gw-nav__link:visited {
  font-family: "EB Garamond", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  text-transform: none;
  color: #242424;
  text-decoration: none;
  white-space: nowrap;
  padding: 0;
}

/* Hover underline on plain links only: Figma's open (hovered) mega items
   carry no underline — the flipped chevron is the only open-state cue. */
#AccessibleNav .gw-nav__item:not(.gw-nav__item--mega) .gw-nav__link:hover,
#AccessibleNav .gw-nav__link:focus-visible {
  color: #242424;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.gw-nav__toggle {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #1e1e1e;
  line-height: 0;
  cursor: pointer;
}

.gw-nav__chevron,
.gw-nav__chevron svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* Rotated on the wrapper: a transform on the inlined <svg> root computed as
   identity in Chrome here, even inline !important. */
.gw-nav__chevron {
  transition: transform 0.15s ease;
}

.gw-nav__item.is-open .gw-nav__chevron {
  transform: rotate(180deg);
}

.gw-nav__link:focus-visible,
.gw-nav__toggle:focus-visible,
.gw-mega a:focus-visible,
.gw-drawer a:focus-visible,
.gw-drawer button:focus-visible {
  outline: 1px solid #242424;
  outline-offset: 2px;
}

/* ---------- mega panels (shared) ---------- */

/* Positioned against header.site-header (sticky), so the panel spans the
   full viewport and starts at the nav row's bottom edge (Figma y 165.852). */
.gw-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  box-sizing: border-box;
  background: #ffffff;
  font-family: "EB Garamond", serif;
  letter-spacing: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

.gw-mega *,
.gw-mega *::before,
.gw-mega *::after {
  box-sizing: border-box;
}

.gw-nav__item.is-open > .gw-mega,
gw-mega-nav:not(:defined) .gw-nav__item--mega:hover > .gw-mega {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.15s ease;
}

.gw-mega__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 1px dashed currentColor;
  color: #6b6b6b;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

/* ---------- Shop panel: link columns + photo column ---------- */

/* Equal tracks, as Figma's flex 1 0 0: (1440 - 64) / 3 = 458.667 each. A
   flex row would hand the columns their 32px of padding on top of an equal
   share, leaving the photo column 21px short. */
.gw-mega--columns {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: start;
  height: 416px;
  padding: 0 0 0 64px;
  overflow: hidden;
}

.gw-mega__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  padding: 24px 16px;
}

#AccessibleNav .gw-mega__heading,
#AccessibleNav .gw-mega__heading:visited,
#AccessibleNav .gw-mega__heading:hover {
  font-family: "EB Garamond", serif;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  color: #343a40;
  text-decoration: none;
  white-space: nowrap;
}

#AccessibleNav .gw-mega__heading:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.gw-mega__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 0;
}

#AccessibleNav .gw-mega__link,
#AccessibleNav .gw-mega__link:visited {
  font-family: "EB Garamond", serif;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  color: #242424;
  text-decoration: none;
  white-space: nowrap;
}

#AccessibleNav .gw-mega__link:hover,
#AccessibleNav .gw-mega__link:focus-visible {
  color: #242424;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.gw-mega__promos {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 2px;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

.gw-mega__promo {
  position: relative;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 0;
  padding: 24px 16px;
  overflow: hidden;
  text-decoration: none;
}

.gw-mega__promo-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}

.gw-mega__promo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(19, 23, 27, 0.2);
}

/* Pinned rather than padded: `.top-links.site-header__nav a` sets
   padding-bottom:0 !important on the photo link. Figma inset: 16 / 24. */
.gw-mega__promo-label {
  position: absolute;
  left: 16px;
  bottom: 24px;
  font-family: "EB Garamond", serif;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  color: #ffffff;
  text-decoration: underline solid;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  white-space: nowrap;
}

.gw-mega__promo.gw-mega__placeholder {
  justify-content: center;
  align-items: center;
}

/* ---------- Blog panel: image tiles ---------- */

.gw-mega--tiles {
  padding: 26px 64px;
}

.gw-mega__tiles {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  margin: 0;
  padding: 0;
}

.gw-mega__tiles-item {
  flex: none;
  width: 231px;
  height: 96px;
}

.gw-mega__tile {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gw-mega__tile-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.gw-mega__tiles-item.gw-mega__placeholder {
  padding: 8px;
  font-size: 12px;
}

/* ---------- mobile drawer ---------- */

/* #NavDrawer is the theme's drawer (sections/header.liquid). The theme sizes
   it 390px / 90% and slides it translateX(390px); the design is full-screen. */
#NavDrawer.gw-drawer-host {
  left: -100%;
  width: 100%;
  max-width: none;
  padding: 0;
  border-right: 0;
  /* component-mobile-menu.min.css gives #NavDrawer a 15px shadow; with the
     drawer parked at left:-100% it bled a grey strip down the viewport's left
     edge at every width. A full-screen panel has no edge to shade. */
  box-shadow: none;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.js-drawer-open-left #NavDrawer.gw-drawer-host {
  transform: translateX(100%);
}

.gw-drawer {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: #ffffff;
  color: #242424;
  font-family: "EB Garamond", serif;
  letter-spacing: 0;
  text-align: left;
}

.gw-drawer *,
.gw-drawer *::before,
.gw-drawer *::after {
  box-sizing: border-box;
}

.gw-drawer ul {
  margin: 0;
  padding: 0;
}

.gw-drawer button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: inherit;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
}

/* Close is first in the DOM so the theme's focus trap lands on it; the row
   is reversed to put the logo on the left as drawn. */
.gw-drawer__header {
  display: flex;
  flex: none;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 15px;
  border-bottom: 1px solid #efefef;
  background: #ffffff;
}

/* Figma 31:2934 zooms into the padded logo PNG: fill 198.02% x 145.65% of the
   123 x 69.852 box, offset -45.3% / -22.83%. The PNG's own 2.394 ratio equals
   the fill's, so nothing stretches. A replacement logo with different padding
   needs these four numbers revisited. */
.gw-drawer__logo {
  position: relative;
  display: block;
  width: 123px;
  height: 69.852px;
  overflow: hidden;
  line-height: 0;
}

.gw-drawer__logo-img {
  position: absolute;
  left: -45.3%;
  top: -22.83%;
  display: block;
  width: 198.02%;
  height: 145.65%;
  max-width: none;
  object-fit: fill;
}

.gw-drawer__logo-text {
  font-size: 18px;
  line-height: 69.852px;
  color: #242424;
}

/* theme.min.css: `.mobile-menu--close-btn:not(.filter-drawer-btn)`
   margin-right:-12px (0,2,0) — the class stays for MobileMenu's binding. */
.gw-drawer .gw-drawer__close.mobile-menu--close-btn {
  margin: 0;
}

.gw-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: #111111;
  line-height: 0;
}

.gw-drawer__close svg {
  display: block;
  width: 24px;
  height: 24px;
}

.gw-drawer__panels {
  display: grid;
  flex: 1 0 auto;
  align-content: start;
  padding: 16px 16px 0;
  overflow-x: clip;
}

.gw-drawer__panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gw-drawer__panel[hidden] {
  display: none;
}

.gw-drawer__panel--sub {
  gap: 10px;
}

.gw-drawer__boxed {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gw-drawer__box,
.gw-drawer__box:visited,
.gw-drawer__back {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 15px;
  border: 1px solid #f2ead8;
  background: #fdfaf4;
  color: #242424;
  font-size: 18px;
  font-weight: 400;
  /* Figma's 18px text box is 23; the browser's normal is 23.44, which made
     the chevron-less rows 55.5 instead of 55 and drifted everything below. */
  line-height: 23px;
  text-transform: none;
  text-decoration: none;
}

.gw-drawer__box {
  justify-content: space-between;
  gap: 16px;
}

.gw-drawer__box-label {
  flex: 1 1 auto;
  min-width: 0;
}

.gw-drawer__chevron,
.gw-drawer__back-icon {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  color: #242424;
}

.gw-drawer__chevron svg,
.gw-drawer__back-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* gw-chevron-down.svg is the same Figma "arrow-down" as both drawer glyphs:
   24px = its 14px viewBox scaled; the back "<" is it turned 90° clockwise
   (on the wrapper — see .gw-nav__chevron). */
.gw-drawer__back-icon {
  transform: rotate(90deg);
}

.gw-drawer__back {
  justify-content: flex-start;
  gap: 12px;
}

.gw-drawer__plain {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0 !important;
}

.gw-drawer__plain-link,
.gw-drawer__plain-link:visited {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: #242424;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  text-transform: none;
  text-decoration: none;
}

.gw-drawer__rows {
  display: flex;
  flex-direction: column;
}

.gw-drawer__row,
.gw-drawer__row:visited {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 20px 16px 19px;
  border: 0;
  border-bottom: 1px solid #e8dabd;
  background: none;
  color: #242424;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
}

/* No hover effect anywhere in the drawer (touch UI; Figma draws none):
   no underline, and none of the theme's grey hover colour —
   `.drawer#NavDrawer a:hover:not(.mobile-menu--close-btn)` (1,3,1,
   theme.min.css) is matched at equal weight and wins by load order. */
.drawer#NavDrawer.gw-drawer-host a:hover,
.drawer#NavDrawer.gw-drawer-host a:focus,
.drawer#NavDrawer.gw-drawer-host a:hover span,
.drawer#NavDrawer.gw-drawer-host a:focus span,
.drawer#NavDrawer.gw-drawer-host button:not(.gw-drawer__close):hover,
.drawer#NavDrawer.gw-drawer-host button:not(.gw-drawer__close):hover span {
  color: #242424;
  text-decoration: none;
}

.gw-drawer__usps {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 8px;
  margin-top: auto !important;
  padding: 16px 16px 16px !important;
}

.gw-drawer__usp {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 18px;
}

.gw-drawer__usp-icon {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  color: #897244;
}

.gw-drawer__usp-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.gw-drawer__usp-label {
  color: #3c3c3c;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}

.gw-drawer__placeholder {
  padding: 12px;
  border: 1px dashed currentColor;
  color: #6b6b6b;
  font-size: 14px;
  line-height: 1.4;
}

/* Panel swap (classes set by <gw-drawer-nav>): the incoming panel slides in
   from the right over the outgoing one, which fades; reversed on Back. */
.gw-drawer__panel.is-animating {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.gw-drawer__panel.is-offstage-right {
  transform: translateX(100%);
}

.gw-drawer__panel.is-faded {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .gw-nav__chevron,
  .gw-mega,
  .gw-nav__item.is-open > .gw-mega,
  .gw-drawer__panel.is-animating {
    transition: none;
  }
}