/* ============================================================================
   Core theme — Header.

   Every rule is scoped under .storly-header, and every value comes from a
   --hdr-* custom property set on the header root. Nothing is written to :root,
   so header design cannot reach any other section.

   One canonical markup drives three deliberate compositions (desktop, tablet,
   mobile) — there is no second header and no duplicated navigation.
   ============================================================================ */

.storly-header {
  /* Surface */
  /* Global Design supplies the header surface; `inherit` (the default) never
     writes --hdr-bg, so this resolves dynamically. */
  --hdr-bg: var(--core-surface);
  --hdr-text: #121417;
  --hdr-border: #e6e7ea;
  --hdr-border-width: 1px;
  --hdr-shadow: none;
  --hdr-transparent-text: #ffffff;
  --hdr-transparent-icon: #ffffff;

  /* Dimensions */
  --hdr-height: 72px;
  --hdr-height-tablet: 64px;
  --hdr-height-mobile: 58px;
  --hdr-pad: 32px;
  --hdr-pad-tablet: 24px;
  --hdr-pad-mobile: 16px;
  --hdr-zone-gap: 32px;

  /* Branding */
  --hdr-logo-width: 132px;
  --hdr-logo-width-tablet: 112px;
  --hdr-logo-width-mobile: 96px;
  --hdr-logo-gap: 10px;
  --hdr-name-color: var(--hdr-text);
  --hdr-name-size: 18px;
  --hdr-name-weight: 700;
  --hdr-name-tracking: .02em;

  /* Navigation */
  --hdr-nav-color: var(--hdr-text);
  --hdr-nav-hover: #5f6368;
  --hdr-nav-active: var(--hdr-text);
  --hdr-nav-size: 14px;
  --hdr-nav-weight: 500;
  --hdr-nav-tracking: 0em;
  --hdr-nav-gap: 28px;
  --hdr-nav-indicator: var(--hdr-text);
  --hdr-nav-indicator-size: 2px;
  --hdr-nav-arrow: #8b908f;
  --hdr-nav-arrow-size: 11px;

  /* Actions */
  --hdr-icon-color: var(--hdr-text);
  --hdr-icon-hover: #5f6368;
  --hdr-icon-size: 20px;
  --hdr-action-size: 40px;
  --hdr-action-bg: transparent;
  --hdr-action-hover-bg: #f2f3f4;
  --hdr-action-border: transparent;
  --hdr-action-radius: 999px;
  --hdr-action-gap: 4px;
  --hdr-badge-bg: #121417;
  --hdr-badge-color: #ffffff;
  --hdr-badge-size: 18px;
  --hdr-cta-bg: #121417;
  --hdr-cta-color: #ffffff;
  --hdr-cta-hover-bg: #2b2f36;
  --hdr-cta-radius: 8px;

  /* Dropdowns */
  --hdr-dropdown-bg: #ffffff;
  --hdr-dropdown-color: #121417;
  --hdr-dropdown-hover-bg: #f4f4f2;
  --hdr-dropdown-hover-color: #121417;
  --hdr-dropdown-border: #e6e7ea;
  --hdr-dropdown-radius: 10px;
  --hdr-dropdown-shadow: 0 10px 30px rgba(12, 14, 18, .10);
  --hdr-dropdown-width: 220px;
  --hdr-dropdown-pad: 8px;
  --hdr-dropdown-item-gap: 2px;
  --hdr-dropdown-offset: 8px;

  /* Sticky */
  --hdr-sticky-bg: var(--hdr-bg);
  --hdr-sticky-text: var(--hdr-text);
  --hdr-sticky-nav: var(--hdr-nav-color);
  --hdr-sticky-icon: var(--hdr-icon-color);
  --hdr-sticky-border: var(--hdr-border);
  --hdr-sticky-shadow: 0 1px 3px rgba(12, 14, 18, .06);
  --hdr-sticky-height: 60px;

  /* Mobile + drawer */
  --hdr-mobile-bg: var(--hdr-bg);
  --hdr-mobile-text: var(--hdr-text);
  --hdr-mobile-icon: var(--hdr-icon-color);
  --hdr-drawer-width: 320px;
  --hdr-drawer-bg: #ffffff;
  --hdr-drawer-text: #121417;
  --hdr-drawer-link: #121417;
  --hdr-drawer-link-active: #121417;
  --hdr-drawer-link-hover-bg: #f4f4f2;
  --hdr-drawer-border: #e6e7ea;
  --hdr-drawer-header-height: 64px;
  --hdr-drawer-pad: 20px;
  --hdr-drawer-link-gap: 2px;
  --hdr-drawer-link-size: 16px;
  --hdr-drawer-link-weight: 500;
  --hdr-drawer-section-gap: 18px;
  --hdr-drawer-link-radius: 10px;
  --hdr-drawer-link-height: 48px;
  --hdr-drawer-label: #6b706f;
  --hdr-chip-bg: #f4f4f2;
  --hdr-chip-color: #121417;
  --cats-mega-bg: #ffffff;
  --cats-mega-width: 760px;
  --cats-mega-gap: 20px;
  --cats-mega-pad: 24px;
  --cats-item: #121417;
  --cats-item-hover: #5f6368;
  --cats-desc: #6b706f;
  --cats-icon: #6b706f;
  --cats-icon-size: 16px;
  --cats-image-radius: 10px;
  --cats-image-ratio: 1;
  --cats-all: #121417;
  --hdr-drawer-indent: 16px;
  --hdr-overlay-color: #0b0d10;
  --hdr-overlay-opacity: .45;

  position: relative;
  z-index: 140;
  font-family: var(--font);
}

.storly-header *,
.storly-header *::before,
.storly-header *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------- bar */

.storly-header__bar {
  background: var(--hdr-bg);
  color: var(--hdr-text);
  border-bottom: var(--hdr-border-width) solid var(--hdr-border);
  box-shadow: var(--hdr-shadow);
  transition: background-color var(--dur, .25s) var(--ease, ease),
              color var(--dur, .25s) var(--ease, ease),
              box-shadow var(--dur, .25s) var(--ease, ease);
}

.storly-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--hdr-zone-gap);
  width: 100%;
  max-width: var(--container-max, 1360px);
  min-height: var(--hdr-height);
  margin-inline: auto;
  padding-inline: var(--hdr-pad);
}

.storly-header[data-container="narrow"] .storly-header__inner { max-width: 1040px; }
.storly-header[data-container="wide"]   .storly-header__inner { max-width: 1520px; }
.storly-header[data-container="full"]   .storly-header__inner { max-width: none; }

/* ------------------------------------------------------------------ sticky

   --header-sticky-top is published by the announcement bar when it is itself
   sticky, so the two stack instead of overlapping. */

/* The announcement bar publishes its own height as --ann-bar-height on <body>
   and adds .has-sticky-announcement (server-side in layout.php, and again from
   its script once the real height is known). Bridging it here is what keeps a
   sticky header stacked below a sticky bar instead of on top of it. */
.has-sticky-announcement { --header-sticky-top: var(--ann-bar-height, 40px); }

.storly-header[data-sticky="1"] {
  position: sticky;
  top: var(--header-sticky-top, 0px);
}
.storly-header.is-stuck .storly-header__bar {
  background: var(--hdr-sticky-bg);
  color: var(--hdr-sticky-text);
  border-bottom-color: var(--hdr-sticky-border);
  box-shadow: var(--hdr-sticky-shadow);
}
.storly-header.is-stuck .storly-header__inner { min-height: var(--hdr-sticky-height); }
.storly-header.is-stuck .storly-header__nav-link { color: var(--hdr-sticky-nav); }
.storly-header.is-stuck .storly-header__action { color: var(--hdr-sticky-icon); }

/* Reveal on scroll up — transform rather than display so it animates. */
.storly-header[data-sticky-mode="scroll-up"] { transition: transform var(--dur, .28s) var(--ease, ease); }
.storly-header[data-sticky-mode="scroll-up"].is-hidden { transform: translateY(-100%); }

/* ------------------------------------------------------------- transparent

   The header sits over the section below until the page scrolls, so it leaves
   the flow and the next section starts at the top of the page. */

/* Doubled class so this outranks .storly-header[data-sticky="1"] above — a
   transparent header is nearly always sticky too, and the sticky rule would
   otherwise keep it in flow and the overlay would never happen. */
.storly-header.storly-header--transparent:not(.is-stuck) {
  position: absolute;
  inset-inline: 0;
  top: 0;
}

/* ...but never inside the Builder. There the section is wrapped in
   .storly-section[data-section-id] (preview mode only), and an absolutely
   positioned header collapses that wrapper to a zero-height strip: the green
   outline, the HEADER badge and the insert controls all detach from the header
   the merchant can see, and the navigation appears to float inside the Hero.
   The header keeps its place in the flow whenever a Builder wrapper is present,
   so the section always measures its true height. */
.storly-section[data-section-id] .storly-header.storly-header--transparent:not(.is-stuck) {
  position: relative;
  inset-inline: auto;
  top: auto;
}

/* Because it stays in the flow there, it is no longer overlaying anything — it
   sits on the page background. The transparent palette (light text meant to
   read against a dark hero) would then paint white text on a white page, and
   the header would look empty until a scroll added .is-stuck and swapped in the
   sticky colours. Transparency is a property of overlaying, so inside the
   Builder the header renders its own normal, authoritative surface instead. */
.storly-section[data-section-id] .storly-header--transparent .storly-header__bar {
  background: var(--hdr-bg);
  color: var(--hdr-text);
  border-bottom-color: var(--hdr-border);
  box-shadow: var(--hdr-shadow);
}
.storly-section[data-section-id] .storly-header--transparent .storly-header__nav-link { color: var(--hdr-nav-color); }
.storly-section[data-section-id] .storly-header--transparent .storly-header__name { color: var(--hdr-name-color); }
.storly-section[data-section-id] .storly-header--transparent .storly-header__action { color: var(--hdr-icon-color); }
.storly-section[data-section-id] .storly-header--transparent .storly-header__nav-link:hover { color: var(--hdr-nav-hover); }
.storly-header--transparent .storly-header__bar {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  color: var(--hdr-transparent-text);
}
.storly-header--transparent .storly-header__nav-link,
.storly-header--transparent .storly-header__name { color: var(--hdr-transparent-text); }
.storly-header--transparent .storly-header__action { color: var(--hdr-transparent-icon); }
.storly-header.storly-header--transparent.is-stuck {
  position: sticky;
  top: var(--header-sticky-top, 0px);
}
.storly-header--transparent.is-stuck .storly-header__bar { background: var(--hdr-sticky-bg); color: var(--hdr-sticky-text); }
.storly-header--transparent.is-stuck .storly-header__nav-link { color: var(--hdr-sticky-nav); }
.storly-header--transparent.is-stuck .storly-header__name { color: var(--hdr-name-color); }
.storly-header--transparent.is-stuck .storly-header__action { color: var(--hdr-sticky-icon); }

/* ------------------------------------------------------------------- brand */

.storly-header__brand {
  display: inline-flex;
  min-width: 0;
  /* The store name is a link home: give it a real target, not just the height
     of its own type. */
  min-height: 40px;
  align-items: center;
  gap: var(--hdr-logo-gap);
  color: inherit;
  text-decoration: none;
}
.storly-header__logo {
  display: block;
  width: var(--hdr-logo-width);
  max-width: 100%;
  /* Auto height keeps the merchant's aspect ratio — never stretch a logo. */
  height: auto;
  object-fit: contain;
}
.storly-header__name {
  color: var(--hdr-name-color);
  font-size: var(--hdr-name-size);
  font-weight: var(--hdr-name-weight);
  letter-spacing: var(--hdr-name-tracking);
  line-height: 1.1;
  white-space: nowrap;
}
.storly-header__brand:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

/* -------------------------------------------------------------- navigation */

.storly-header__nav { min-width: 0; }

.storly-header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--hdr-nav-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.storly-header[data-nav-align="start"]  .storly-header__nav-list { justify-content: flex-start; }
.storly-header[data-nav-align="center"] .storly-header__nav-list { justify-content: center; }
.storly-header[data-nav-align="end"]    .storly-header__nav-list { justify-content: flex-end; }

.storly-header__nav-item { position: relative; }

.storly-header__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* The link's box is the tap target: 40px tall on a phone and a comfortable
     one with a mouse, while the type keeps its own rhythm. */
  min-height: 40px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--hdr-nav-color);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--hdr-nav-size);
  font-weight: var(--hdr-nav-weight);
  letter-spacing: var(--hdr-nav-tracking);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast, .16s) var(--ease, ease);
}
.storly-header[data-nav-uppercase="1"] .storly-header__nav-link { text-transform: uppercase; }
.storly-header__nav-link:hover { color: var(--hdr-nav-hover); }
.storly-header__nav-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 3px; }

.storly-header__nav-link.is-active,
.storly-header__nav-item[data-open="1"] > .storly-header__nav-link { color: var(--hdr-nav-active); }

.storly-header__nav-link > span { position: relative; }
.storly-header[data-nav-indicator="underline"] .storly-header__nav-link.is-active > span::after {
  position: absolute;
  inset-inline: 0;
  bottom: -5px;
  height: var(--hdr-nav-indicator-size);
  background: var(--hdr-nav-indicator);
  border-radius: 2px;
  content: "";
}
.storly-header[data-nav-indicator="dot"] .storly-header__nav-link.is-active > span::after {
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: calc(var(--hdr-nav-indicator-size) + 2px);
  height: calc(var(--hdr-nav-indicator-size) + 2px);
  border-radius: 50%;
  background: var(--hdr-nav-indicator);
  content: "";
  transform: translateX(-50%);
}

.storly-header__caret {
  display: inline-flex;
  color: var(--hdr-nav-arrow);
  transition: transform var(--dur-fast, .16s) var(--ease, ease);
}
.storly-header__caret svg { width: var(--hdr-nav-arrow-size); height: var(--hdr-nav-arrow-size); }
.storly-header__nav-item[data-open="1"] .storly-header__caret { transform: rotate(180deg); }

/* --------------------------------------------------------------- dropdowns */

.storly-header__dropdown {
  position: absolute;
  z-index: 20;
  inset-inline-start: 0;
  top: calc(100% + var(--hdr-dropdown-offset));
  min-width: var(--hdr-dropdown-width);
  padding: var(--hdr-dropdown-pad);
  border: 1px solid var(--hdr-dropdown-border);
  border-radius: var(--hdr-dropdown-radius);
  background: var(--hdr-dropdown-bg);
  box-shadow: var(--hdr-dropdown-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast, .16s) var(--ease, ease),
              transform var(--dur-fast, .16s) var(--ease, ease),
              visibility var(--dur-fast, .16s);
}
/* Flipped by JS when the menu would leave the viewport. */
.storly-header__nav-item[data-flip="1"] .storly-header__dropdown {
  inset-inline-start: auto;
  inset-inline-end: 0;
}
.storly-header__nav-item[data-open="1"] .storly-header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.storly-header__dropdown ul { display: grid; gap: var(--hdr-dropdown-item-gap); margin: 0; padding: 0; list-style: none; }
.storly-header__dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: max(0px, calc(var(--hdr-dropdown-radius) - 4px));
  color: var(--hdr-dropdown-color);
  font-size: 14px;
  text-decoration: none;
  transition: background-color var(--dur-fast, .16s) var(--ease, ease),
              color var(--dur-fast, .16s) var(--ease, ease);
}
.storly-header__dropdown a:hover {
  background: var(--hdr-dropdown-hover-bg);
  color: var(--hdr-dropdown-hover-color);
}
.storly-header__dropdown a:focus-visible { outline: 2px solid var(--hdr-dropdown-color); outline-offset: -2px; }

/* ----------------------------------------------------------------- actions */

.storly-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--hdr-action-gap);
}

.storly-header__action {
  position: relative;
  display: inline-grid;
  width: var(--hdr-action-size);
  height: var(--hdr-action-size);
  flex: none;
  padding: 0;
  border: 1px solid var(--hdr-action-border);
  border-radius: var(--hdr-action-radius);
  background: var(--hdr-action-bg);
  color: var(--hdr-icon-color);
  cursor: pointer;
  place-items: center;
  text-decoration: none;
  transition: background-color var(--dur-fast, .16s) var(--ease, ease),
              color var(--dur-fast, .16s) var(--ease, ease);
}
.storly-header__action svg { width: var(--hdr-icon-size); height: var(--hdr-icon-size); }
.storly-header__action:hover { background: var(--hdr-action-hover-bg); color: var(--hdr-icon-hover); }
.storly-header__action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.storly-header__badge {
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  display: grid;
  min-width: var(--hdr-badge-size);
  height: var(--hdr-badge-size);
  padding-inline: 4px;
  border-radius: 999px;
  background: var(--hdr-badge-bg);
  color: var(--hdr-badge-color);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  place-items: center;
}
.storly-header__badge[hidden] { display: none; }
.storly-header__drawer-count[hidden] { display: none; }

.storly-header__cta {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0 18px;
  margin-inline-start: 6px;
  border-radius: var(--hdr-cta-radius);
  background: var(--hdr-cta-bg);
  color: var(--hdr-cta-color);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast, .16s) var(--ease, ease);
}
.storly-header__cta:hover { background: var(--hdr-cta-hover-bg); }
.storly-header__cta:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* The menu trigger only exists where navigation collapses. */
.storly-header__menu { display: none; }

/* ================================================================ layouts === */

/* Centred: brand on its own row, navigation beneath. */
.storly-header[data-layout="centered"] .storly-header__inner {
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "menu brand actions"
    "nav  nav   nav";
  row-gap: 6px;
  padding-block: 12px;
}
.storly-header[data-layout="centered"] .storly-header__menu { grid-area: menu; justify-self: start; }
.storly-header[data-layout="centered"] .storly-header__brand { grid-area: brand; justify-self: center; }
.storly-header[data-layout="centered"] .storly-header__actions { grid-area: actions; }
.storly-header[data-layout="centered"] .storly-header__nav { grid-area: nav; }
.storly-header[data-layout="centered"] .storly-header__nav-list { justify-content: center; }

/* Split: navigation leads, brand is optically centred, actions close. */
.storly-header[data-layout="split"] .storly-header__inner { position: relative; }
.storly-header[data-layout="split"] .storly-header__brand {
  position: absolute;
  inset-inline: 0;
  justify-content: center;
  pointer-events: none;
}
.storly-header[data-layout="split"] .storly-header__brand > * { pointer-events: auto; }
.storly-header[data-layout="split"] .storly-header__nav-list { justify-content: flex-start; }

/* ================================================================= tablet === */

@media (max-width: 1024px) {
  .storly-header__inner {
    min-height: var(--hdr-height-tablet);
    padding-inline: var(--hdr-pad-tablet);
    gap: calc(var(--hdr-zone-gap) * .6);
  }
  .storly-header__logo { width: var(--hdr-logo-width-tablet); }

  /* Collapse to the drawer unless the merchant kept the full navigation. */
  .storly-header[data-tablet-nav="drawer"] .storly-header__nav { display: none; }
  .storly-header[data-tablet-nav="drawer"] .storly-header__menu { display: inline-grid; }
  .storly-header[data-tablet-nav="drawer"] .storly-header__inner,
  .storly-header[data-tablet-nav="drawer"][data-layout="centered"] .storly-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: none;
    row-gap: 0;
    padding-block: 0;
  }
  .storly-header[data-tablet-nav="drawer"] .storly-header__brand {
    position: static;
    justify-self: start;
    pointer-events: auto;
  }

  .storly-header[data-tablet-search="0"] .storly-header__search { display: none; }
}

/* ================================================================= mobile ===
   A deliberate three-zone composition, not a squeezed desktop header. */

@media (max-width: 767px) {
  .storly-header__bar { background: var(--hdr-mobile-bg); color: var(--hdr-mobile-text); }
  .storly-header__action { color: var(--hdr-mobile-icon); }
  .storly-header__name { color: var(--hdr-mobile-text); }

  .storly-header__inner,
  .storly-header[data-layout="centered"] .storly-header__inner {
    display: flex;
    grid-template-areas: none;
    align-items: center;
    gap: 8px;
    min-height: var(--hdr-height-mobile);
    padding-inline: var(--hdr-pad-mobile);
    padding-block: 0;
  }

  .storly-header__nav { display: none; }
  .storly-header__menu { display: inline-grid; order: 1; flex: none; }
  .storly-header__brand {
    order: 2;
    position: static;
    flex: 1;
    justify-content: center;
    pointer-events: auto;
  }
  .storly-header__actions { order: 3; flex: none; }

  /* Logo first when the merchant prefers it. */
  .storly-header[data-mobile-layout="logo-menu-actions"] .storly-header__brand { order: 1; justify-content: flex-start; }
  .storly-header[data-mobile-layout="logo-menu-actions"] .storly-header__menu { order: 2; }

  .storly-header__logo { width: var(--hdr-logo-width-mobile); }
  .storly-header__name { font-size: calc(var(--hdr-name-size) * .85); }

  /* Touch targets stay usable regardless of the design value. */
  .storly-header__action { width: max(var(--hdr-action-size), 40px); height: max(var(--hdr-action-size), 40px); }

  .storly-header[data-mobile-search="0"] .storly-header__search { display: none; }
  .storly-header[data-mobile-account="0"] .storly-header__account { display: none; }
  .storly-header[data-mobile-wishlist="0"] .storly-header__wishlist { display: none; }
  .storly-header[data-mobile-cart="0"] .storly-header__cart { display: none; }
  .storly-header__cta { display: none; }
}

/* ================================================================= drawer ===

   The drawer is the whole navigation on a phone, so it reads like the store,
   not like a widget: the theme's font, palette, borders and radii, a plain
   list with hairline rules, children that open underneath their parent, and
   the account links at the foot. The cart lives in the header bar and is not
   repeated here. Every size and colour is a --hdr-drawer-* setting. */

.storly-header__overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--hdr-overlay-color);
  opacity: 0;
  transition: opacity .3s var(--ease, ease);
}
.storly-header__overlay[hidden] { display: none; }
.storly-header.is-drawer-open .storly-header__overlay { opacity: var(--hdr-overlay-opacity); }

.storly-header__drawer {
  /* Row height after density; every row in the drawer follows it. */
  --hdr-drawer-row: var(--hdr-drawer-link-height, 48px);
  position: fixed;
  z-index: 310;
  inset-block: 0;
  inset-inline-start: 0;
  display: flex;
  width: min(var(--hdr-drawer-width), 88vw);
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-block-end: env(safe-area-inset-bottom, 0px);
  padding-inline-start: env(safe-area-inset-left, 0px);
  padding-inline-end: env(safe-area-inset-right, 0px);
  background: var(--hdr-drawer-bg);
  color: var(--hdr-drawer-text);
  font-family: var(--font, inherit);
  transform: translateX(var(--hdr-drawer-x, -100%));
  transition: transform .34s cubic-bezier(.4, 0, .2, 1);
}
.storly-header__drawer[hidden] { display: none; }
.storly-header[data-drawer-side="end"] .storly-header__drawer {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

/* translateX does not flip with direction, so the closed offset is stated per
   direction. Each condition sits inside :where() so all three stay at one
   class of specificity — stated normally, the RTL + end selector outranks the
   .is-drawer-open rule below and the drawer animates open while still off
   screen. Source order resolves RTL + end, which matches all three. */
:where(.storly-header[data-drawer-side="end"]) .storly-header__drawer { --hdr-drawer-x: 100%; }
:where([dir="rtl"]) .storly-header__drawer { --hdr-drawer-x: 100%; }
:where([dir="rtl"] .storly-header[data-drawer-side="end"]) .storly-header__drawer { --hdr-drawer-x: -100%; }
.storly-header.is-drawer-open .storly-header__drawer { --hdr-drawer-x: 0%; }

.storly-header[data-drawer-density="compact"] .storly-header__drawer { --hdr-drawer-row: max(44px, calc(var(--hdr-drawer-link-height, 48px) - 6px)); }
.storly-header[data-drawer-density="spacious"] .storly-header__drawer {
  --hdr-drawer-row: calc(var(--hdr-drawer-link-height, 48px) + 8px);
  --hdr-drawer-gap-extra: 10px;
}

/* Applied to <html> while the drawer is open. The lock fixes <body>, so it
   needs its offset back or the page jumps to the top behind the drawer. */
.storly-drawer-open { overflow: hidden; }
html.storly-drawer-open body {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  top: calc(var(--storly-drawer-scroll, 0px) * -1);
}

/* ── Head ─────────────────────────────────────────────────────────────────── */

.storly-header__drawer-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  min-height: var(--hdr-drawer-header-height);
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: env(safe-area-inset-top, 0px) var(--hdr-drawer-pad) 0;
  border-bottom: 1px solid var(--hdr-drawer-border);
  background: var(--hdr-drawer-bg);
}
.storly-header__drawer-brand { display: flex; align-items: center; min-width: 0; min-height: 44px; }
.storly-header__drawer-brand img {
  display: block;
  width: auto;
  max-width: 150px;
  max-height: calc(var(--hdr-drawer-header-height) - 26px);
  object-fit: contain;
}
/* The store's name, set like the name in the header bar. */
.storly-header__drawer-title {
  overflow: hidden;
  font-family: var(--font-display, inherit);
  font-size: 17px;
  font-weight: var(--hdr-name-weight, 700);
  letter-spacing: var(--hdr-name-tracking, 0);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.storly-header__drawer-close {
  display: grid;
  width: 44px;
  height: 44px;
  flex: none;
  margin-inline-end: -10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
  place-items: center;
}
.storly-header__drawer-close svg { width: 20px; height: 20px; }
.storly-header__drawer-close:hover { background: var(--hdr-drawer-link-hover-bg); }
.storly-header__drawer-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ── Search: the theme's own field ────────────────────────────────────────── */

.storly-header__drawer-search {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  margin: 16px var(--hdr-drawer-pad) 4px;
  padding-inline: 14px 2px;
  border: 1px solid var(--input-border-color, var(--hdr-drawer-border));
  border-radius: var(--input-radius, 8px);
  background: var(--input-bg, var(--hdr-drawer-bg));
  transition: border-color .16s var(--ease, ease);
}
.storly-header__drawer-search:focus-within { border-color: var(--hdr-drawer-text); }
.storly-header__drawer-search input {
  min-width: 0;
  height: 46px;
  flex: 1;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 16px; /* 16px keeps iOS from zooming into the field */
}
.storly-header__drawer-search input::placeholder { color: var(--hdr-drawer-label); opacity: 1; }
.storly-header__drawer-search input:focus { outline: none; }
.storly-header__drawer-search button {
  display: grid;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  place-items: center;
}
.storly-header__drawer-search svg { width: 19px; height: 19px; }

/* ── Navigation: one list, hairline rules, children underneath ────────────── */

.storly-header__drawer-nav { flex: none; padding: 6px var(--hdr-drawer-pad) calc(var(--hdr-drawer-section-gap, 18px) + var(--hdr-drawer-gap-extra, 0px)); }
.storly-header__drawer-nav ul,
.storly-header__drawer-group ul { display: grid; gap: var(--hdr-drawer-link-gap); margin: 0; padding: 0; list-style: none; }

.storly-header__drawer-link {
  display: flex;
  width: 100%;
  min-height: var(--hdr-drawer-row);
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--hdr-drawer-link);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--hdr-drawer-link-size);
  font-weight: var(--hdr-drawer-link-weight);
  letter-spacing: var(--hdr-drawer-link-tracking, 0);
  line-height: 1.3;
  text-align: start;
  text-decoration: none;
  transition: color .16s var(--ease, ease), opacity .16s var(--ease, ease);
}
.storly-header__drawer-link:hover { opacity: .7; }
.storly-header__drawer-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.storly-header__drawer-link.is-active { color: var(--hdr-drawer-link-active); font-weight: 600; }
.storly-header[data-drawer-caps="1"] .storly-header__drawer-link { text-transform: uppercase; }

/* The top level is the menu itself: a touch larger than its children. */
.storly-header__drawer-nav > ul > li > .storly-header__drawer-link { font-size: calc(var(--hdr-drawer-link-size) + 1px); }

.storly-header__drawer-toggle .storly-header__caret {
  display: grid;
  width: 20px;
  height: 20px;
  flex: none;
  opacity: .6;
  place-items: center;
  transition: transform .22s var(--ease, ease);
}
.storly-header__drawer-toggle .storly-header__caret svg { width: 16px; height: 16px; }
.storly-header__drawer-toggle[aria-expanded="true"] .storly-header__caret { transform: rotate(180deg); }

/* Rules between top-level entries: hairline (default), full width, or none.
   Separators are the older switch for the same line and still draw it. */
.storly-header[data-drawer-divider="hairline"] .storly-header__drawer-nav > ul > li + li,
.storly-header[data-drawer-separators="1"] .storly-header__drawer-nav > ul > li + li {
  border-block-start: 1px solid var(--hdr-drawer-border);
}
.storly-header[data-drawer-divider="full"] .storly-header__drawer-nav > ul > li + li {
  margin-inline: calc(var(--hdr-drawer-pad) * -1);
  padding-inline: var(--hdr-drawer-pad);
  border-block-start: 1px solid var(--hdr-drawer-border);
}

/* Children — sub-menus and Categories alike — open underneath as a list. */
.storly-header__drawer-sub { margin: -4px 0 10px; padding-inline-start: var(--hdr-drawer-indent); }
.storly-header__drawer-sub[hidden] { display: none; }
.storly-header__drawer-link--sub {
  min-height: max(40px, calc(var(--hdr-drawer-row) - 8px));
  justify-content: flex-start;
  gap: 10px;
  padding-block: 6px;
  color: var(--hdr-drawer-text);
  font-size: calc(var(--hdr-drawer-link-size) - 1px);
  font-weight: 400;
  opacity: .82;
}
.storly-header__drawer-link--sub:hover { opacity: 1; }
.storly-header__drawer-all { font-weight: 600; opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* ── Secondary links ──────────────────────────────────────────────────────── */

.storly-header__drawer-group {
  flex: none;
  padding: calc(var(--hdr-drawer-section-gap, 18px) + var(--hdr-drawer-gap-extra, 0px)) var(--hdr-drawer-pad);
  border-block-start: 1px solid var(--hdr-drawer-border);
}
.storly-header__drawer-label {
  margin: 0 0 6px;
  color: var(--hdr-drawer-label, var(--text-s));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.storly-header__drawer-link--quiet { min-height: max(40px, calc(var(--hdr-drawer-row) - 8px)); font-size: calc(var(--hdr-drawer-link-size) - 2px); font-weight: 400; }

/* ── Account and wishlist: quiet rows at the foot ─────────────────────────── */

.storly-header__drawer-customer {
  display: grid;
  gap: 0;
  margin-block-start: auto; /* sits at the bottom when the menu is short */
}
.storly-header__drawer-row {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  color: var(--hdr-drawer-text);
  font-size: calc(var(--hdr-drawer-link-size) - 2px);
  font-weight: 500;
  text-decoration: none;
  transition: opacity .16s var(--ease, ease);
}
.storly-header__drawer-row:hover { opacity: .7; }
.storly-header__drawer-row:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.storly-header__drawer-row svg { flex: none; width: 20px; height: 20px; opacity: .85; }
.storly-header__drawer-count {
  min-width: 20px;
  margin-inline-start: auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--hdr-badge-bg);
  color: var(--hdr-badge-color);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.storly-header__drawer-count[hidden] { display: none; }

.storly-header__drawer-foot {
  flex: none;
  padding: 14px var(--hdr-drawer-pad) calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hdr-drawer-border);
}
.storly-header__drawer-note { margin: 0; color: var(--hdr-drawer-label); font-size: 12.5px; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .storly-header__drawer,
  .storly-header__overlay { transition-duration: .01ms; }
}

/* ================================================================ categories

   The Categories entry is a configured component: a plain dropdown list or a
   mega menu of cards. Icons, images and descriptions only render when the
   merchant actually filled them in on the category, so an empty field never
   leaves a hole in the layout. */

.storly-header__cat-icon {
  flex: none;
  width: var(--cats-icon-size, 16px);
  color: var(--cats-icon, var(--text-s));
  font-size: var(--cats-icon-size, 16px);
  line-height: 1;
  text-align: center;
}

/* A dot indicator replaces the caret; "none" hides both. */
.storly-header[data-cats-indicator="none"] .storly-header__cats .storly-header__caret { display: none; }
.storly-header[data-cats-indicator="dot"] .storly-header__cats .storly-header__caret { display: none; }
.storly-header[data-cats-indicator="dot"] .storly-header__cats > .storly-header__nav-link::after {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--hdr-nav-indicator);
  content: "";
  inset-inline-start: auto;
  opacity: .85;
}

.storly-header__cats-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--hdr-dropdown-border);
  color: var(--cats-all, var(--hdr-dropdown-color));
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.storly-header__cats-all:hover { background: var(--hdr-dropdown-hover-bg); }
.storly-header__cats-all svg { width: 14px; height: 14px; transform: rotate(-90deg); }

/* ------------------------------------------------------------- mega menu --- */

.storly-header__mega {
  width: min(var(--cats-mega-width, 760px), calc(100vw - 32px));
  padding: var(--cats-mega-pad, 24px);
  background: var(--cats-mega-bg, var(--hdr-dropdown-bg));
}
.storly-header__mega-grid {
  display: grid;
  /* auto-fit keeps the cards even when there are fewer than the column count. */
  grid-template-columns: repeat(var(--hdr-mega-cols, 4), minmax(0, 1fr));
  gap: var(--cats-mega-gap, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.storly-header__mega-item {
  display: grid;
  gap: 8px;
  border-radius: var(--cats-image-radius, 10px);
  color: var(--cats-item, var(--hdr-dropdown-color));
  text-decoration: none;
}
.storly-header__mega-item:hover { color: var(--cats-item-hover, var(--hdr-dropdown-hover-color)); }
.storly-header__mega-item:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.storly-header__mega-media {
  display: block;
  overflow: hidden;
  border-radius: var(--cats-image-radius, 10px);
  aspect-ratio: 1 / var(--cats-image-ratio, 1);
  background: var(--hdr-dropdown-hover-bg);
}
.storly-header__mega-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur, .28s) var(--ease, ease);
}
.storly-header__mega-item:hover .storly-header__mega-media img { transform: scale(1.04); }

.storly-header__mega-text { display: grid; gap: 2px; min-width: 0; }
.storly-header__mega-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}
.storly-header__mega-desc {
  color: var(--cats-desc, var(--text-s));
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  /* Two lines maximum: descriptions vary wildly in length and must not push
     the cards out of alignment. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.storly-header__mega .storly-header__cats-all { margin-top: var(--cats-mega-gap, 20px); }

/* The mega menu is centred under the header rather than hung off its trigger. */
.storly-header__cats[data-cats-style="mega"] { position: static; }
.storly-header__cats[data-cats-style="mega"] .storly-header__dropdown {
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(4px);
}
.storly-header__cats[data-cats-style="mega"][data-open="1"] .storly-header__dropdown {
  transform: translateX(-50%) translateY(0);
}
[dir="rtl"] .storly-header__cats[data-cats-style="mega"] .storly-header__dropdown {
  transform: translateX(50%) translateY(4px);
}
[dir="rtl"] .storly-header__cats[data-cats-style="mega"][data-open="1"] .storly-header__dropdown {
  transform: translateX(50%) translateY(0);
}

@media (max-width: 1024px) {
  .storly-header__mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ========================================================== reduced motion === */

@media (prefers-reduced-motion: reduce) {
  .storly-header,
  .storly-header__bar,
  .storly-header__drawer,
  .storly-header__overlay,
  .storly-header__dropdown,
  .storly-header__caret,
  .storly-header__action,
  .storly-header__nav-link { transition-duration: .01ms; }
}