/* header.css - header + footer section styles (ST-M5).
 *
 * OWNED BY ST-M5. Do not edit from another milestone.
 *
 * Consumes the design tokens declared inline by the layout (--primary/--bg/--text/--maxw) and
 * the per-section padding props stamped on .nscms-section (see base.css). Served fingerprinted
 * + immutable via {{ 'header.css' | asset_url }}.
 *
 * Loaded AFTER base.css, and every rule here is class-based (0,1,0) while base.css styles the
 * bare `header` / `footer` elements (0,0,1) - so these win on specificity regardless of order.
 * base.css is owned by ST-M1 and is not edited from here; where it draws something
 * unconditionally that is now a setting (the header's bottom border) the rule is overridden
 * below rather than removed there.
 *
 * Layout mirrors Shopify/dawn's header: logo / inline nav / icon row, with the arrangement
 * driven by the `logo_position` + `mobile_logo_position` settings and stickiness by
 * `sticky_header_type` (verified against dawn @ main 2026-07-27; see sections/header.liquid).
 */

/* --- shared -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Dawn ships a skip link as the first focusable element of the page. */
.skip-to-content-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 0.6rem 1rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid currentColor;
  border-radius: 0 0 8px 0;
}

.skip-to-content-link:focus {
  left: 0;
}

/* --- header -------------------------------------------------------------------------- */

.header-wrapper {
  display: block;
  background: var(--bg);
}

/* `show_line_separator`. base.css draws this border on every <header>, so the OFF state has
   to be an explicit override rather than the absence of a rule. */
.header-wrapper:not(.header-wrapper--border-bottom) > .header {
  border-bottom: 0;
}

/* `sticky_header_type`. `always` + `reduce-logo-size` pin the header; `on-scroll-up` (Dawn's
   default) hides on scroll-down and reveals on scroll-up, which needs a scroll listener we do
   not ship yet, so it deliberately scrolls away exactly like `none` rather than pretending. */
.header-wrapper[data-sticky-type="always"],
.header-wrapper[data-sticky-type="reduce-logo-size"] {
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-wrapper[data-sticky-type="reduce-logo-size"] .header__logo-image {
  max-height: 26px;
}

.header-wrapper[data-sticky-type="reduce-logo-size"] .header__heading {
  font-size: 1rem;
}

/* 10-15-C fix2 — the pinned header really pins. The rule above never could: a sticky box only moves
   inside its parent, and the header's parent is the section wrapper the renderer prints around it
   (#nscms-section-<id>, .nscms-section--header), which is exactly as tall as the header, so there was
   no room to stick in. The WRAPPER is the sticky box instead: its parent is <body>, the whole page.
   Only a header set to Always or Reduce logo size matches (the wrapper's direct child carries the
   choice), so every other header, and every other section, is untouched; with no :has() support it
   simply scrolls away, as before. The announcement bar sits inside the same section, so it stays
   pinned above the header. The background repeats the section's own (its colour scheme, else the
   page's), so the wrapper's padding, when it has any, does not show the page through it while
   pinned; at rest that is the colour already behind it. */
.nscms-section--header:has(> .header-wrapper[data-sticky-type="always"]),
.nscms-section--header:has(> .header-wrapper[data-sticky-type="reduce-logo-size"]) {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--section-background, var(--bg));
}

/* 10-15-C §5 (X1) — "Logo backdrop": a rounded tab behind the logo, in the header's colour, hanging
   below the bar so the logo sits on a lip. Only a header with the setting on carries the class, so
   none of this reaches any other header.
     --logo-tab-pad     how far the tab reaches past the logo on each side
     --logo-tab-depth   how far it hangs below the bar
     --logo-tab-radius  its two bottom corners
   The tab is painted with --bg, the same token as the bar, so it follows the header's colour scheme.
   It sits at z-index -1 inside the wrapper's stacking context: over the bar's background, under the
   logo and everything else in the bar. The wrapper becomes that stacking context here (relative,
   z-index 50, the sticky header's own z-index) so the hanging part is drawn over the page below it; a
   sticky header keeps its own `position: sticky` (its selector is the more specific one) and the tab
   moves with it. */
.header-wrapper--logo-backdrop {
  position: relative;
  z-index: 50;
}

.header-wrapper--logo-backdrop .header {
  position: relative;
}

/* Wide screens: the tab is an absolutely placed grid child. `grid-column: heading` puts its sides on
   the logo's column (an auto-width column in every desktop layout), and with no row placement its
   top and bottom are the header's padding edges, so it spans the whole bar however tall the bar is
   (the centred layouts have a second row for the menu) and hangs from the bar's real bottom edge. */
.header-wrapper--logo-backdrop .header::before {
  content: "";
  position: absolute;
  z-index: -1;
  grid-column: heading;
  top: 0;
  bottom: calc(-1 * var(--logo-tab-depth, 16px));
  left: calc(-1 * var(--logo-tab-pad, 12px));
  right: calc(-1 * var(--logo-tab-pad, 12px));
  border-radius: 0 0 var(--logo-tab-radius, 24px) var(--logo-tab-radius, 24px);
  background: var(--bg);
  pointer-events: none;
}

/* Phones: the logo's column is the flexible middle one there, so the tab hangs from the logo link
   itself instead. The header is a single row on a phone; the link is stretched to that row's height
   (the logo stays centred inside it) and the tab reaches out through the header's top and bottom
   padding, which is restated here from .header so the two cannot drift apart. */
@media screen and (max-width: 749px) {
  .header-wrapper--logo-backdrop .header {
    --logo-tab-bar-pad: clamp(1.25rem, 4.17vw, 5rem);
    padding-block: var(--logo-tab-bar-pad);
  }

  .header-wrapper--logo-backdrop .header::before {
    content: none;
  }

  .header-wrapper--logo-backdrop .header__heading-link {
    position: relative;
    align-self: stretch;
  }

  .header-wrapper--logo-backdrop .header__heading-link::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(-1 * var(--logo-tab-bar-pad));
    bottom: calc(-1 * var(--logo-tab-bar-pad) - var(--logo-tab-depth, 16px));
    left: calc(-1 * var(--logo-tab-pad, 12px));
    right: calc(-1 * var(--logo-tab-pad, 12px));
    border-radius: 0 0 var(--logo-tab-radius, 24px) var(--logo-tab-radius, 24px);
    background: var(--bg);
    pointer-events: none;
  }
}

/* --- Basic (ST-M10a) ------------------------------------------------------------------
   Measured off the design's Navbar frame (477:4195), not eyeballed:
     container   190px side padding, 80px top/bottom at 1920 — expressed in rem and clamped
                 so it collapses sensibly instead of pushing the nav off a laptop screen.
     wordmark    35px, uppercase, 1.4px tracking.
     nav link    14px, uppercase, 1.4px tracking, 32px gap.
     icons       20px, 24px gap.
     active      a 1px rule under the link, transparent until current/hover — the design draws
                 it on every item at opacity 0, which is the same thing said differently.
   Colour stays on the theme's own tokens rather than the design's literal #1b1b1b: the
   merchant picks their scheme, and hard-coding the mock's near-black would ignore it. */
.header {
  display: grid;
  gap: 0.5rem clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  grid-template-areas: "drawer heading nav icons";
  grid-template-columns: auto auto 1fr auto;
  /* The header spans the window and lines its contents up with the page's content column: the
     side padding is whatever is left either side of --maxw (190px at 1920 with the design's
     1540px page). base.css caps every bare <header> at --maxw, which is what used to squeeze the
     logo and icons into a narrower band than the sections below them. */
  max-width: none;
  margin: 0;
  padding-inline: max(1.25rem, calc((100% - var(--maxw)) / 2));
  padding-block: clamp(1.25rem, 4.17vw, 5rem); /* 80px at 1920 (477:4195) */
}

/* 10-16 Header › Tab shape "Oval": instead of a box with rounded bottom corners, the tab is an oval twice as
   wide as it is tall (Snifl's 114×56 lip), its sides on the logo's column plus the tab width, and its bottom
   the tab depth below the bar. Height comes from aspect-ratio, so the top is wherever that lands (hidden by
   the bar, same colour). Phones do the same on the logo link's own ::before. */
.header-wrapper--logo-oval .header::before,
.header-wrapper--logo-oval .header__heading-link::before {
  top: auto;
  height: auto;
  aspect-ratio: 2 / 1;
  border-radius: 50%;
}

.header-wrapper--logo-oval .header::before {
  bottom: calc(-1 * var(--logo-tab-depth, 16px));
}

@media screen and (max-width: 749px) {
  .header-wrapper--logo-oval .header__heading-link::before {
    bottom: calc(-1 * var(--logo-tab-bar-pad) - var(--logo-tab-depth, 16px));
  }
}

/* 10-16 Header › Space above and below the logo. A fixed size replaces the growing padding above at
   every width; the logo tab's phone padding (--logo-tab-bar-pad) follows it so the tab still reaches the
   bar's edges. The wrapper in the selector outranks the logo-tab rule's own padding-block. Only a header
   with the class carries any of this. */
.header-wrapper .header.header--pad-0 { --logo-tab-bar-pad: 0px; padding-block: 0; }
.header-wrapper .header.header--pad-8 { --logo-tab-bar-pad: 8px; padding-block: 8px; }
.header-wrapper .header.header--pad-12 { --logo-tab-bar-pad: 12px; padding-block: 12px; }
.header-wrapper .header.header--pad-16 { --logo-tab-bar-pad: 16px; padding-block: 16px; }
.header-wrapper .header.header--pad-24 { --logo-tab-bar-pad: 24px; padding-block: 24px; }
.header-wrapper .header.header--pad-32 { --logo-tab-bar-pad: 32px; padding-block: 32px; }

/* 10-16 Header › Full-width header: a 24px gutter on wide screens instead of lining up with the page
   column (phones keep their 20px). */
@media screen and (min-width: 750px) {
  .header-wrapper .header.header--full-width { padding-inline: 24px; }
}

.header--top-center,
.header--middle-center {
  grid-template-areas: "drawer heading icons" "nav nav nav";
  grid-template-columns: auto 1fr auto;
  justify-items: center;
}

.header--top-center .header__heading-link,
.header--middle-center .header__heading-link {
  justify-self: center;
}

.header--top-left,
.header--top-center {
  align-items: start;
}

.header__drawer {
  grid-area: drawer;
  position: relative;
}

.header__heading-link {
  grid-area: heading;
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.header__heading-link:hover {
  text-decoration: none;
}

.header__heading {
  /* The wordmark takes the HEADING font, not the body one. It is a <span>, so without this it
     would inherit the body face and the design's serif/sans pairing would collapse to one face. */
  font-family: var(--font-heading, var(--font-body));
  font-size: clamp(1.5rem, 2.2vw, 2.1875rem); /* 35px at the design's width */
  font-weight: 400;                           /* the mock's wordmark is regular, not bold */
  letter-spacing: var(--caps-spacing, 0.0875rem); /* 1.4px */
  text-transform: var(--caps-transform, uppercase);
  line-height: 1.2;
  white-space: nowrap;
}

.header__logo-image {
  display: block;
  width: auto;
  max-width: 180px;
  max-height: 44px;
  object-fit: contain;
}

/* 10-16 G1 §2 — "Logo width" / "Logo width on phones". Only a header with a width set carries the
   class (and the custom property in its style attribute), so every other header keeps the size above.
   The image takes the width exactly and its height follows its own proportions; the theme's 180 x 44
   box no longer applies. The two widths are independent: each one only reaches its own screens.
   "Always, smaller logo" still makes the logo smaller: the 26px height above wins, and the width set
   here becomes the most it may take. */
@media screen and (min-width: 750px) {
  .header--logo-width .header__logo-image {
    width: var(--logo-width);
    height: auto;
    max-width: none;
    max-height: none;
  }

  .header-wrapper[data-sticky-type="reduce-logo-size"] .header--logo-width .header__logo-image {
    width: auto;
    max-width: var(--logo-width);
    max-height: 26px;
  }
}

@media screen and (max-width: 749px) {
  .header--logo-width-mobile .header__logo-image {
    width: var(--logo-width-mobile);
    height: auto;
    max-width: none;
    max-height: none;
  }

  .header-wrapper[data-sticky-type="reduce-logo-size"] .header--logo-width-mobile .header__logo-image {
    width: auto;
    max-width: var(--logo-width-mobile);
    max-height: 26px;
  }
}

.header__inline-menu {
  grid-area: nav;
  min-width: 0;
}

/* 10-16 G1 §3 — "Menu position". Centred (no class) is the theme's own look. Next to the logo / Right
   push the links to either end of the menu's space; the menu box is stretched first, because the
   centred-logo layouts centre their grid items and would otherwise shrink it around its links. */
.header--menu-left .header__inline-menu,
.header--menu-right .header__inline-menu {
  justify-self: stretch;
}

.header--menu-left .header__menu {
  justify-content: flex-start;
}

.header--menu-right .header__menu {
  justify-content: flex-end;
}

.header__menu,
.header__drawer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem; /* 32px between items */
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: center;
}

.header__drawer-menu {
  flex-direction: column;
  gap: 0.1rem;
  justify-content: flex-start;
}

.header__menu-item > a,
.header__submenu-toggle {
  font-size: 0.875rem;        /* 14px */
  letter-spacing: var(--caps-spacing, 0.0875rem); /* 1.4px */
  text-transform: var(--caps-transform, uppercase);
}

.header__menu-item > a {
  display: inline-block;
  padding: 0.35rem 0;
  color: inherit;
  /* The design's "Active" rule: a 1px line under the link, transparent until it is the current
     page or hovered. A border rather than text-decoration so it spans the whole item and does
     not shift the text when it appears. */
  border-bottom: 1px solid transparent;
}

.header__menu-item > a:hover,
.header__menu-item > a[aria-current] {
  text-decoration: none;
  border-bottom-color: currentColor;
}

/* --- drop-down menus (audit F11.4) ----------------------------------------------------
   A <details> disclosure, so it needs no JS - the same pattern as the header search and the
   mobile drawer below, and the only thing the Liquid sandbox allows. Markup in
   snippets/header-menu.liquid. */

.header__submenu {
  position: relative;
}

.header__submenu-toggle {
  display: inline-flex;
  align-items: center;
  /* The design sets the 16px caret hard against the label (477:4203 has no gap), and the whole
     item — label AND caret — carries the 1px "Active" rule, exactly like a plain link. */
  gap: 0;
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  /* A <summary> is a BUTTON that happens to be made of text. Without this, clicking it to open
     the menu selects the word instead — and a second click, or the smallest drag, paints the
     label and the panel behind it in the browser's selection blue. It reads as a broken,
     unstyled dropdown when nothing is wrong with the styling at all. */
  -webkit-user-select: none;
  user-select: none;
}

.header__submenu-toggle::-webkit-details-marker {
  display: none;
}

.header__submenu-toggle::marker {
  content: "";
}

/* Hover and open draw the same 1px rule a plain link gets — NOT an underline. An underline runs
   under the letters only, stops short of the caret and sits at a different depth from the links'
   rule beside it, which is what made "TENTANG KAMI" look broken on hover. */
.header__submenu[open] > .header__submenu-toggle,
.header__submenu-toggle:hover {
  text-decoration: none;
  border-bottom-color: currentColor;
}

/* The design's Arrows / caret-down, 16px, drawn in the label's colour. */
.header__submenu-caret {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform 0.15s ease;
}

.header__submenu[open] > .header__submenu-toggle .header__submenu-caret {
  transform: rotate(180deg);
}

/* The panel is the Dashboard DS "Dropdown Menu" (Menu Item 4:6163): a white card with a hairline
   border, 4px inset, 32px rows with a 6px radius and a faint grey hover. Sentence case at 14px —
   the menu reads as a list of pages, not as more nav bar. The DS draws it in Geist, the theme's
   body face stands in for it so the panel belongs to the shop, not to the admin. */
.header__submenu-list {
  position: absolute;
  left: -0.5rem;
  z-index: 61;
  display: grid;
  gap: 0;
  margin: 0;
  margin-top: 0.5rem;
  padding: 0.25rem;
  min-width: 12rem;
  list-style: none;
  background: var(--bg);
  border: 1px solid #e7e7e9;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  text-transform: none;
  letter-spacing: 0;
}

.header__submenu-item > a,
.header__submenu--nested > .header__submenu-toggle {
  display: flex;
  align-items: center;
  min-height: 2rem;          /* 32px */
  padding: 0.375rem 0.5rem;  /* 6px 8px */
  border-radius: 6px;
  color: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.125rem;     /* 18px */
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.header__submenu--nested > .header__submenu-toggle {
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  border-bottom: 0;
}

.header__submenu--nested > .header__submenu-toggle .header__submenu-caret {
  transform: rotate(-90deg);
}

.header__submenu-item > a:hover,
.header__submenu-item > a:focus-visible,
.header__submenu--nested > .header__submenu-toggle:hover {
  text-decoration: none;
  border-bottom-color: transparent;
  background: #f7f7f8;
}

/* The parent's own link is repeated as the first row (see header-menu.liquid: a <summary> is a
   toggle, not a link, so without this row the parent page is unreachable). The DS separator — a
   1px rule with 4px either side — says "this is the section, those are its pages". */
.header__submenu-list > .header__submenu-item:first-child {
  padding-bottom: 0.25rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid #e7e7e9;
}

.header__submenu-list > .header__submenu-item:first-child > a {
  font-weight: 500;
}

/* The third level flies out beside its parent rather than below it: a panel inside a panel
   would cover the row that opened it. */
.header__submenu--nested > .header__submenu-list {
  top: 0;
  left: 100%;
  margin-top: 0;
  margin-left: 0.3rem;
}

/* Inside the mobile drawer the panels are already inside a narrow popover, so an absolutely
   positioned one would hang off the screen. Nest them inline instead, which is what Dawn's
   menu-drawer does. */
.header__drawer-menu .header__submenu-list,
.header__drawer-menu .header__submenu--nested > .header__submenu-list {
  position: static;
  min-width: 0;
  margin: 0.1rem 0 0.1rem 0.55rem;
  padding: 0 0 0 0.5rem;
  background: transparent;
  border: none;
  border-left: 1px solid #eee;
  border-radius: 0;
  box-shadow: none;
}

.header__icons {
  grid-area: icons;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 1.5rem; /* 24px, per the design's icon row */
}

.header__icon {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: inherit;
  white-space: nowrap;
}

.header__icon .icon {
  width: 20px;
  height: 20px;
  flex: none;
}

/* The design's icon row is icons ONLY — no words beside them (477:4218), so that is the default.
   The label stays in the markup and stays announced to a screen reader either way: an icon with
   no accessible name is a worse trade than a slightly longer stylesheet.
   A merchant who WANTS the words back turns on "Show text beside the header icons" — the theme
   lets them rename those labels, so removing the only way to see them would have made that
   rename pointless. */
.header__icon-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.header--icon-labels .header__icon-label {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

/* --- language toggle (ID / EN) ------------------------------------------------------------
   The Dashboard DS "Toggle Group" in its Ghost / sm form (Toggle 164:1573): two 36px-tall
   buttons, 8px side padding, 8px radius, 14px medium. The PRESSED half takes the subtle fill;
   the other stays bare and takes the same fill only while hovered — which is how the DS draws
   Default / Hover / Active. Before this rule existed the two buttons fell back to the browser's
   own grey bevelled buttons, which is what the owner's screenshot showed.
   The fill is derived from the page's text colour rather than the DS's literal #e7e7e9 so a
   merchant's dark scheme gets a fill that shows up on it. */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}

.lang-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.125rem;
  letter-spacing: 0;
  cursor: pointer;
  opacity: 0.6;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.lang-toggle button:hover,
.lang-toggle button[aria-pressed="true"] {
  background: color-mix(in srgb, currentColor 10%, transparent);
  opacity: 1;
}

.lang-toggle button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* --- header search ------------------------------------------------------------------- */

/* Collapsed trigger + popover panel (a <details> disclosure, so it needs no JS — same pattern
   as the mobile drawer below). Shopify's header shows a trigger, never an expanded field: an
   always-visible input put two search boxes on /search next to the search template's own. */

.header__search-disclosure {
  position: relative;
}

/* The design draws search as a bare glyph in the icon row, not a bordered button — the same
   treatment as account and cart (477:4218). Its word follows show_icon_labels with the other two,
   so the three read as one row rather than one button and two icons. */
.header__search-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  list-style: none;
  padding: 0;
  border: 0;
  opacity: 1;
}

.header__search-toggle::-webkit-details-marker {
  display: none;
}

.header__search-toggle::marker {
  content: "";
}

.header__search-disclosure[open] > .header__search-toggle {
  opacity: 1;
}

.header__search-toggle .icon {
  width: 20px;   /* the design's icon row is three 20px glyphs (477:4219-4221) */
  height: 20px;
}

/* ONE square field in the Basic style (the design's inputs: square, a thin dark line, no rounded
   card) with the magnifier inside it as the submit button — not an input plus a second "Search"
   button, which read as two search bars under a header icon that is already a magnifier. */
.header__search-panel {
  position: absolute;
  right: 0;
  z-index: 60;
  margin-top: 0.75rem;
  width: 22rem;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--text);
  border-radius: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.header__search {
  position: relative;
  display: flex;
  align-items: center;
}

.header__search-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  padding: 0.9rem 3rem 0.9rem 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  outline: none;
}

.header__search-input::placeholder {
  color: var(--text);
  opacity: 0.5;
}

.header__search-submit {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.75;
}

.header__search-submit:hover,
.header__search-submit:focus-visible {
  opacity: 1;
}

.header__search-submit .icon {
  width: 18px;
  height: 18px;
}

/* Suggestions as you type (BUILD_BRIEF_2026-10-09-B §5, search-suggest.js): under the field, inside the
   same square panel, separated by its thin line. Small caps headings like the design's labels; the
   highlighted row (arrow keys or the pointer) gets the soft band. */
.predictive {
  max-height: min(28rem, 70vh);
  overflow-y: auto;
  border-top: 1px solid var(--text);
  padding: 0.5rem 0;
  font-size: 0.875rem;
}

.predictive[hidden],
.predictive__group[hidden],
.predictive__none[hidden] {
  display: none;
}

.predictive__group + .predictive__group {
  margin-top: 0.25rem;
}

.predictive__heading {
  margin: 0;
  padding: 0.5rem 1rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--caps-spacing, 0.08em);
  text-transform: var(--caps-transform, uppercase);
  opacity: 0.6;
}

.predictive__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.predictive__link,
.predictive__all {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 1rem;
  color: inherit;
  text-decoration: none;
}

.predictive__item.is-active .predictive__link,
.predictive__link:hover,
.predictive__all.is-active,
.predictive__all:hover {
  background: rgba(0, 0, 0, 0.05);
}

.predictive__img {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  background: #f1f0ee;
}

.predictive__title,
.predictive__text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.predictive__price {
  flex: none;
  white-space: nowrap;
  opacity: 0.75;
}

.predictive__none {
  margin: 0;
  padding: 0.5rem 1rem;
  opacity: 0.7;
}

.predictive__all {
  margin-top: 0.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 0.65rem;
  font-weight: 500;
}

html[data-theme="dark"] .predictive__item.is-active .predictive__link,
html[data-theme="dark"] .predictive__link:hover,
html[data-theme="dark"] .predictive__all.is-active,
html[data-theme="dark"] .predictive__all:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* --- mobile drawer (a <details> disclosure, so it needs no JS) ------------------------ */

.header__drawer-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding: 0.3rem;
  border-radius: 8px;
  border: 1px solid currentColor;
  opacity: 0.75;
}

.header__drawer-toggle::-webkit-details-marker {
  display: none;
}

.header__drawer-toggle::marker {
  content: "";
}

.header__drawer[open] > .header__drawer-toggle {
  opacity: 1;
}

.header__drawer-toggle .icon {
  width: 20px;
  height: 20px;
}

.header__drawer-panel {
  position: absolute;
  left: 0;
  z-index: 60;
  margin-top: 0.4rem;
  min-width: 200px;
  padding: 0.5rem 0.75rem;
  background: var(--bg);
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}

/* The drawer is the small-screen affordance; the inline nav is the wide-screen one. Dawn makes
   the same swap at 750px. */
@media screen and (min-width: 750px) {
  .header__drawer {
    display: none;
  }

  /* With the drawer hidden its grid column would still be there, empty, and still earn a column
     gap — which pushed the logo 48px in from the content edge the rest of the page lines up on. */
  .header--middle-left,
  .header--top-left {
    grid-template-areas: "heading nav icons";
    grid-template-columns: auto 1fr auto;
  }

  .header--top-center,
  .header--middle-center {
    grid-template-areas: ". heading icons" "nav nav nav";
    grid-template-columns: 1fr auto 1fr;
  }
}

@media screen and (max-width: 749px) {
  .header__inline-menu {
    display: none;
  }

  .header {
    grid-template-areas: "drawer heading icons";
    grid-template-columns: auto 1fr auto;
  }

  .header--mobile-center .header__heading-link {
    justify-self: center;
  }

  .header--mobile-left .header__heading-link {
    justify-self: start;
  }

  /* The panel is a right-anchored popover; 22rem would overhang a narrow viewport. */
  .header__search-panel {
    width: min(22rem, calc(100vw - 2rem));
  }
}

/* --- footer -------------------------------------------------------------------------- */

/* Basic (ST-M10a), measured off the design's Footer frame (477:4293): a DARK band, 190px side
   padding, 100px above the columns and 100px between them and the bottom bar, which is separated
   by a hairline rule and sits on 32px/64px padding.
   The dark band is the design's own, not a colour scheme — it is what the footer IS in this theme,
   the way the header is the page background. A merchant re-schemes sections, not the footer. */
.footer {
  --footer-fg: #fefefe;
  background: #0b0b0e;
  color: var(--footer-fg);
  /* Full window width, contents on the page's content column — see .header. base.css caps the
     bare <footer> at --maxw, which is what left the dark band short of both screen edges. */
  max-width: none;
  margin: 0;
  border-top: 0;
  font-size: inherit;
  padding-inline: max(1.25rem, calc((100% - var(--maxw)) / 2));
  /* The design's 100px of air above the columns lives on the COLUMNS, not on the footer. A store
     with no footer blocks hides that row entirely (see below), and padding on the footer itself
     would survive it — leaving a tall empty black band above the rule, which is exactly what the
     owner's shop showed. Put the space on the thing it is spacing and it leaves with it. */
  padding-top: 0;
  padding-bottom: 0;
}

.footer a {
  color: inherit;
}

.footer__blocks {
  /* The design is four uneven columns — brand, two link lists, then a wide newsletter (630px of
     1540). A wrapping flex row keeps each column at its own width and spreads them across the
     page, and folds them onto new lines where there is no room. */
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 4vw, 3.5rem);
  justify-content: space-between;
  align-items: flex-start;
  padding-top: clamp(2.5rem, 5vw, 6.25rem);
  margin-bottom: clamp(2.5rem, 5vw, 6.25rem);
}

/* A footer whose blocks all render to nothing must not leave a tall empty dark band above the
   rule — the design's 100px gaps are spacing AROUND content, not a reserved void. The section
   already skips this div when there are NO blocks; this covers the other case, where blocks exist
   but produce no markup (an unfinished block, or a type the snippet does not draw).
   `:not(:has(*))` rather than `:empty` on purpose: Liquid leaves newlines inside the div, and
   `:empty` counts whitespace as content, so it never matched. */
.footer__blocks:not(:has(*)) {
  display: none;
  padding: 0;
  margin: 0;
}

/* …and with no columns the bottom bar becomes the whole footer, so it needs its own air above
   the rule rather than sitting flush against the page. */
.footer:has(.footer__blocks:not(:has(*))) .footer__bottom,
.footer:not(:has(.footer__blocks)) .footer__bottom {
  margin-top: 2.5rem;
}

.footer-block__heading {
  margin: 0 0 1.25rem;
  /* Lustria in the design (477:4304): the heading face, 18px, lightly tracked, uppercase. */
  font-family: var(--font-heading, var(--font-body));
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: var(--caps-spacing, 0.045rem);
  text-transform: var(--caps-transform, uppercase);
  color: inherit;
}

.footer-block__menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  /* 14px, 1.4px tracking, uppercase, generous 2.2 leading — the design's link rhythm. */
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 2.2;
  letter-spacing: var(--caps-spacing, 0.0875rem);
  text-transform: var(--caps-transform, uppercase);
}

.footer-block__text > :first-child {
  margin-top: 0;
}

.footer-block__text > :last-child {
  margin-bottom: 0;
}

.footer-block__image,
.footer-block__brand-logo {
  display: block;
  height: auto;
  max-width: 100%;
}

.footer-block__brand-logo {
  max-width: 160px;
  margin-bottom: 0.5rem;
}

/* --- Basic footer columns (477:4294) -------------------------------------------------------
   Brand: the wordmark exactly as the header draws it (heading face, 35px, 1.4px tracking), a
   14px subtitle 20px under it, then the social icons 20px lower. */
.footer-block--brand {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  max-width: 16rem;
}

.footer-block__wordmark {
  margin: 0;
  font-family: var(--font-heading, var(--font-body));
  font-size: clamp(1.5rem, 2.2vw, 2.1875rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--caps-spacing, 0.0875rem);
  text-transform: var(--caps-transform, uppercase);
}

.footer-block__subtitle,
.footer-block--brand .footer-block__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Newsletter: one bar — a bordered email field with a white button fused onto its right end,
   73px tall on the design (477:4317). */
.footer-block--newsletter {
  flex: 0 1 39.375rem; /* 630px */
  min-width: min(100%, 22rem);
}

.footer-block--menu,
.footer-block--text {
  flex: 0 0 auto;
  min-width: 8rem;
}

.footer-newsletter {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}

.footer-newsletter__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.footer-newsletter__field {
  flex: 1 1 auto;
  display: flex;
  min-width: 0;
}

.footer-newsletter input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 4.5rem;
  padding: 0 1.5rem 0 2.5rem;
  border: 1px solid rgba(254, 254, 254, 0.85);
  border-right: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1rem;
}

.footer-newsletter input[type="email"]::placeholder {
  color: inherit;
  opacity: 0.85;
}

.footer-newsletter input[type="email"]:focus-visible {
  outline: 2px solid #fefefe;
  outline-offset: -2px;
}

.footer-newsletter button {
  flex: none;
  min-width: 11rem;
  padding: 0 2rem;
  border: 1px solid #fefefe;
  border-radius: var(--button-radius, 0); /* 10-15-C §1: Button shape; square when unset */
  background: #fefefe;
  color: #0b0b0e;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.0875rem;
  text-transform: var(--button-text-transform, uppercase); /* 10-15-C §3: Button text; capitals when unset */
  cursor: pointer;
}

.footer-newsletter button:hover {
  background: #e7e7e9;
}

@media (max-width: 749px) {
  .footer-newsletter input[type="email"] {
    height: 3.25rem;
    padding-left: 1rem;
  }

  .footer-newsletter button {
    min-width: 0;
    padding: 0 1.25rem;
  }
}

.footer-block--align-center .footer-block__image {
  margin-left: auto;
  margin-right: auto;
}

.footer-block--align-right .footer-block__image {
  margin-left: auto;
}

/* The bottom bar: a hairline above it, copyright left, the rest right (477:4324). The rule is
   drawn with the design's own light border on the dark band rather than a token, because the
   footer's colours are the footer's own — see the note on .footer. */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  position: relative;
  padding-top: 2rem;
  padding-bottom: 4rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: var(--caps-spacing, 0.0875rem);
  text-transform: var(--caps-transform, uppercase);
}

/* The hairline runs the full window width (477:4324 is 1920 wide), not just the content column
   the footer's padding confines its children to. body clips the overflow (base.css). */
.footer__bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-top: 1px solid rgba(231, 231, 233, 0.25);
}

.footer-policies {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  align-items: center;
}

/* The design puts the copyright at the FAR LEFT and everything else at the right (477:4324).
   In the markup it comes last, after the social icons, the region selector and the policies — so
   it is re-ordered here rather than moved, because its position in the document is the reading
   order a screen reader should get (the shop's name and note belong after its links, not before). */
.footer__copyright {
  order: -1;
  margin: 0 auto 0 0;
  /* The design sets the copyright a step smaller than the links beside it (12px / 1.2px). */
  font-size: 0.75rem;
  letter-spacing: 0.075rem;
}

/* Social icons (WEBSITE_EDITOR_PRD.md 6). They inherit the footer's colour, so they follow the
   colour scheme rather than carrying colours of their own. */
.footer__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 26px between 20px glyphs in the design (477:4298). The links below have no padding of their
     own any more, so this gap is the whole spacing rather than half of it. */
  gap: 1.625rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Bare glyphs, not 32px tap-pills: the design draws the icons on their own. Sized to the icon
     so the row's spacing is the gap above and nothing else. */
  width: 20px;
  height: 20px;
  color: inherit;
}

.footer__social-link:hover {
  opacity: 0.7;
}

.icon-social {
  width: 20px;
  height: 20px;
}

/* 10-15-C §2 (S9) — the footer's payment icons (sections/footer.liquid, snippets/payment-icon.liquid).
   A row of its own above the bottom bar, aligned by the footer's "Payment icons alignment". The marks
   are the payment companies' own colours on purpose (a shopper looks for the logo they know), so only
   the text fallback takes the footer's colour. 4px apart, wrapping on a phone. */
.footer__payments {
  display: flex;
  padding-top: 2rem;
}

.footer__payments--left {
  justify-content: flex-start;
}

.footer__payments--center {
  justify-content: center;
}

.footer__payments--right {
  justify-content: flex-end;
}

.footer__payment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__payment-list > li {
  display: flex;
}

/* 10-15-C fix (S9): the row keeps the bottom bar's own 2rem on its far side of the hairline, so
   the icons no longer sit on the rule. Under the columns, their own bottom margin is the air
   above the row (no second gap on top of it), and the bottom bar drops the 2.5rem it adds when
   there are no columns, since the row already stands between it and the page. */
.footer__payments {
  padding-bottom: 2rem;
}

.footer__blocks:has(*) + .footer__payments {
  padding-top: 0;
}

.footer .footer__payments + .footer__bottom {
  margin-top: 0;
}

/* A wrapped second line follows the chosen alignment too, not just the row as a whole. */
.footer__payments--left .footer__payment-list {
  justify-content: flex-start;
}

.footer__payments--center .footer__payment-list {
  justify-content: center;
}

.footer__payments--right .footer__payment-list {
  justify-content: flex-end;
}

/* 2026-10-16: each mark is the brand's own logo (snippets/payment-icon.liquid) in a white 40x28 cell
   with a hairline border and 2px corners, the logo fitted in a 32x20 box: the first client's row
   (SITE_MEASUREMENTS.md §2.5). The cell stays white on a dark footer too, the way card logos are shown
   everywhere, so every logo keeps its own colours. A method with no logo is its name in the same cell. */
.payment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 28px;
  min-width: 40px;
  padding: 4px;
  background: #fff;
  border: 0.5px solid rgba(34, 34, 34, 0.1);
  border-radius: 2px;
}

.payment-icon svg {
  display: block;
  width: 32px;
  height: 20px;
}

.payment-icon--text {
  padding: 0 0.4rem;
  color: #222;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* 10-16 G1 §1 — footer "Colours: Use the colour scheme". The rules above draw the theme's own dark
   band; a footer set to use its colour scheme carries .footer--scheme and takes every colour from the
   scheme's tokens instead: --bg / --text (re-pointed by the section wrapper when the scheme is not the
   base one, otherwise the page's own), and the scheme's solid button for the newsletter button. The
   lines that were light-on-dark become the text colour at the same strength. Nothing here reaches a
   footer left on "Theme's dark footer". */
.footer.footer--scheme {
  --footer-fg: var(--text);
  background: var(--bg);
  color: var(--text);
}

.footer--scheme .footer-newsletter input[type="email"] {
  border-color: color-mix(in srgb, currentColor 85%, transparent);
}

.footer--scheme .footer-newsletter input[type="email"]:focus-visible {
  outline-color: currentColor;
}

.footer--scheme .footer-newsletter button {
  border-color: var(--color-button, var(--text));
  background: var(--color-button, var(--text));
  color: var(--color-button-text, var(--bg));
}

.footer--scheme .footer-newsletter button:hover {
  background: var(--color-button, var(--text));
  opacity: 0.85;
}

.footer--scheme .footer__bottom::before {
  border-top-color: color-mix(in srgb, currentColor 25%, transparent);
}

/* --- 2026-10-16 footer options (first client site, docs/clients/snifl/SITE_MEASUREMENTS.md §2.5) ----
   Each rule hangs off a class the section prints only when its option is on, so a footer on the
   defaults matches none of this.

   EVEN GRID (.footer--grid, Column layout "Even grid"): equal columns, --ft-cols on computers and
   --ft-cols-tablet on tablets (both stamped by the section), one column on phones. 24px between columns
   and 32px between rows on a computer, 32/64 on a tablet, 32 on a phone. A block may span two columns
   (the whole row on a tablet) or the whole row; a whole-row block (a logo across the top) stands 24px
   above the next row whatever the row gap. "Last on tablets and phones" moves a block after the others
   below 1200px. An image pinned to the corner leaves the grid on computers and tablets and sits on the
   bottom-right corner of the columns; on a phone it follows the other blocks, centred. 40px above the
   columns (32 on a phone) and 48 under them. */
.footer--grid {
  padding-inline: max(24px, calc((100% - var(--maxw)) / 2));
}

.footer--grid .footer__blocks {
  --ft-row-gap: 32px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--ft-cols, 4), minmax(0, 1fr));
  gap: var(--ft-row-gap) 24px;
  align-items: start;
  justify-content: stretch;
  padding-top: 40px;
  margin-bottom: 48px;
}

.footer--grid .footer-block {
  min-width: 0;
  max-width: none;
}

.footer--grid .footer-block--span-2 {
  grid-column: span 2;
}

.footer--grid .footer-block--span-full {
  grid-column: 1 / -1;
  margin-bottom: calc(24px - var(--ft-row-gap));
}

.footer--grid .footer-block--corner {
  position: absolute;
  right: 0;
  bottom: 0;
}

.footer--grid .footer-block--corner .footer-block__image {
  margin: 0;
}

/* On a computer the pinned image takes the last column UNDER the others instead (a two-column block
   beside it reaches down past them), so it never covers a short column's text; wider than the column,
   it grows to the left. */
@media screen and (min-width: 1200px) {
  .footer--grid .footer__blocks:has(> .footer-block--corner) > .footer-block--span-2 {
    grid-row: span 2;
  }

  .footer--grid .footer-block--corner {
    position: static;
    grid-column: -2 / -1;
    justify-self: end;
    align-self: end;
  }
}

@media screen and (max-width: 1199px) {
  .footer--grid .footer__blocks {
    --ft-row-gap: 64px;
    grid-template-columns: repeat(var(--ft-cols-tablet, 2), minmax(0, 1fr));
    column-gap: 32px;
  }

  .footer--grid .footer-block--span-2 {
    grid-column: 1 / -1;
  }

  .footer--grid .footer-block--last-small {
    order: 1;
  }
}

@media screen and (max-width: 749px) {
  .footer--grid {
    padding-inline: 16px;
  }

  .footer--grid .footer__blocks {
    --ft-row-gap: 32px;
    grid-template-columns: minmax(0, 1fr);
    padding-top: 32px;
  }

  .footer--grid .footer-block--span-full {
    padding-inline: 8px;
  }

  .footer--grid .footer-block--corner {
    position: static;
  }

  .footer--grid .footer-block--corner .footer-block__image {
    margin-inline: auto;
  }
}

/* An image block's "Width on phones" (any layout): the inline max-width is the computer one. */
@media screen and (max-width: 749px) {
  .footer-block__image--w-m {
    max-width: var(--fb-w-m) !important;
  }
}

/* TEXT STYLE "Regular text" (.footer--plain): headings 18/25 medium, links and text 16/22 regular, the
   shop's own capitals (no forced upper case), 10px between lines, 18px under a heading (6px in a
   newsletter column, whose heading leads straight into its text). A numbered list keeps its numbers
   tucked in at the left edge. */
.footer--plain .footer-block__heading {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

.footer--plain .footer-block__menu {
  gap: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

.footer--plain .footer-block__text {
  font-size: 16px;
  line-height: 1.4;
}

.footer--plain .footer-block__text p {
  margin: 0;
}

.footer--plain .footer-block__text p + p {
  margin-top: 10px;
}

.footer--plain .footer-block__text ol,
.footer--plain .footer-block__text ul {
  margin: 0;
  padding-left: 1.3125em;
}

.footer--plain .footer-block--newsletter > .footer-block__heading {
  margin-bottom: 6px;
}

/* NEWSLETTER "Button under the field" (.footer-block--newsletter-stacked): the field on its own line,
   43px, filled (the block's Field background, else a light shade of the text), 6px corners, no border;
   the button 46px under it at the field's width, in the scheme's solid button colours and the theme's
   button shape; at most 400px wide on wider screens. The block's text sits 24px above the form, the
   social icons 24px under it. */
.footer-block--newsletter-stacked {
  display: grid;
  align-content: start;
}

.footer-block--newsletter-stacked > .footer-block__text {
  margin-bottom: 24px;
}

.footer-block--newsletter-stacked .footer-newsletter {
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
}

.footer .footer-block--newsletter-stacked .footer-newsletter input[type="email"] {
  height: auto;
  padding: 12px 16px;
  border: 0;
  border-radius: 6px;
  background: var(--ft-field-bg, color-mix(in srgb, currentColor 8%, transparent));
  font-size: 16px;
  line-height: 1.2;
}

.footer .footer-block--newsletter-stacked .footer-newsletter input[type="email"]::placeholder {
  opacity: 0.85;
}

.footer .footer-block--newsletter-stacked .footer-newsletter button {
  min-width: 0;
  width: 100%;
  padding: 10px 32px;
  border: 0;
  border-radius: var(--button-radius, 32px);
  background: var(--color-button, var(--text));
  color: var(--color-button-text, var(--bg));
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.02em;
}

.footer .footer-block--newsletter-stacked .footer-newsletter button:hover {
  background: var(--color-button, var(--text));
  opacity: 0.85;
}

.footer-block--newsletter-stacked .footer__social {
  margin-top: 24px;
}

@media screen and (max-width: 749px) {
  .footer-block--newsletter-stacked .footer-newsletter {
    max-width: none;
  }
}

/* SOCIAL STYLE "Icon in a circle" (.footer--social-circle): each icon 24px in a 32px circle filled
   with the Circle colour (--ft-social-bg) or a light shade of the text, 12px apart. */
.footer--social-circle .footer__social {
  gap: 12px;
}

.footer--social-circle .footer__social-link {
  width: 32px;
  height: 32px;
  border-radius: 100px;
  background: var(--ft-social-bg, color-mix(in srgb, currentColor 8%, transparent));
}

.footer--social-circle .icon-social {
  width: 24px;
  height: 24px;
}

/* BOTTOM BAR "Regular text, a full line above" (.footer--bottom-plain): a 1px line in the text colour
   across the window, the copyright and the policy links in 14px regular at 80% (12px on a tablet), no
   dots, 24px between links; the copyright left and the links right, stacked on a phone. */
.footer--bottom-plain .footer__bottom {
  gap: 10px 24px;
  padding-top: 24px;
  padding-bottom: 32px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in srgb, currentColor 80%, transparent);
}

.footer--bottom-plain .footer__bottom::before {
  border-top: 1px solid var(--footer-fg, currentColor);
}

.footer--bottom-plain .footer-policies {
  gap: 10px 24px;
}

.footer--bottom-plain .footer__copyright {
  font-size: inherit;
  letter-spacing: 0;
}

@media screen and (min-width: 750px) and (max-width: 1199px) {
  .footer--bottom-plain .footer__bottom {
    font-size: 12px;
  }
}

@media screen and (max-width: 749px) {
  .footer--bottom-plain .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* The grid footer's payment row: 24px under it, as above it. */
.footer--grid .footer__payments {
  padding-bottom: 24px;
}

/* Payment icons alignment on phones, when it differs from the row's own. */
@media screen and (max-width: 749px) {
  .footer__payments--m-left,
  .footer__payments--m-left .footer__payment-list {
    justify-content: flex-start;
  }

  .footer__payments--m-center,
  .footer__payments--m-center .footer__payment-list {
    justify-content: center;
  }

  .footer__payments--m-right,
  .footer__payments--m-right .footer__payment-list {
    justify-content: flex-end;
  }
}

/* 10-19 §6 FOLD LINK COLUMNS ON PHONES (.footer--fold, the footer's "Fold link columns on phones"). Each menu
   column with a heading is a <details> (snippets/footer-block): on a phone one closed row, the heading and the
   shared Disclosure's down-chevron, that opens on tap (the chevron turns up) with no JavaScript; rows that
   follow one another share one line between them. Tablets and computers show the column open, the heading
   plain and no chevron, exactly as an unfolded column; ::details-content shows the links there without JS,
   and the footer's script keeps the element open for a browser that lacks it. */
.footer--fold .footer-block__fold-summary {
  display: block;
  list-style: none;
  cursor: default;
}

.footer--fold .footer-block__fold-summary::-webkit-details-marker {
  display: none;
}

.footer--fold .footer-block__fold-chevron {
  display: none;
}

@media screen and (min-width: 750px) {
  .footer--fold .footer-block--fold::details-content {
    content-visibility: visible;
  }

  .footer--fold .footer-block__fold-summary {
    pointer-events: none;
  }
}

@media screen and (max-width: 749px) {
  .footer--fold .footer-block--fold {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
    border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  }

  /* The footer's row gap is 32px on a phone in both layouts; a fold right after a fold closes it up. */
  .footer--fold .footer-block--fold + .footer-block--fold {
    margin-top: -32px;
    border-top: 0;
  }

  .footer--fold .footer-block__fold-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 12px 0;
    cursor: pointer;
  }

  .footer--fold .footer-block--fold .footer-block__heading {
    margin: 0;
  }

  .footer--fold .footer-block__fold-chevron {
    display: block;
    flex: none;
    transition: transform 0.2s ease;
  }

  .footer--fold .footer-block--fold[open] .footer-block__fold-chevron {
    transform: rotate(180deg);
  }

  .footer--fold .footer-block--fold .footer-block__menu {
    padding-bottom: 16px;
  }

  .footer--fold .footer-block__fold-summary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer--fold .footer-block__fold-chevron {
    transition: none;
  }
}

/* --- dark mode (shopper preference; base.css owns the tokens) ------------------------- */

html[data-theme="dark"] .header__search-input {
  border-color: #334155;
}

html[data-theme="dark"] .header__drawer-panel,
html[data-theme="dark"] .header__search-panel,
html[data-theme="dark"] .header__submenu-list {
  border-color: #334155;
}

/* The separator under the parent row, and the panel's own shadow, are both tuned for a light
   page. On dark the black shadow is invisible and a black hairline disappears entirely.
   Scoped to .header__menu — the DESKTOP nav — on purpose: the mobile drawer deliberately has
   no panel (transparent, no border, no shadow), and this rule sits after the one that strips
   them, so an unscoped selector would hand the drawer a floating shadow back in dark mode. */
html[data-theme="dark"] .header__menu .header__submenu-list {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .header__submenu-list > .header__submenu-item:first-child {
  border-bottom-color: #334155;
}

html[data-theme="dark"] .header__drawer-menu .header__submenu-list {
  border-color: transparent;
  border-left-color: #334155;
}

html[data-theme="dark"] .header__submenu-item > a:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Announcement bar (WEBSITE_EDITOR_PRD.md 4) - a thin strip above the header. Its two colours
   are inline, from the section's own settings; everything else is layout, so a merchant who
   turns it off leaves nothing behind. Full-bleed like the header, with the same page gutter. */
.announcement-bar {
  padding: .45rem 1rem;
  text-align: center;
  font-size: .85rem;
  line-height: 1.4;
}

.announcement-bar__message {
  margin: 0;
  max-width: var(--maxw);
  margin-inline: auto;
}

.announcement-bar__link {
  display: block;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.announcement-bar__link:hover {
  text-decoration-thickness: 2px;
}

/* --- 2026-10-16 header options (first client site, docs/clients/snifl/SITE_MEASUREMENTS.md §2.1-2.3) --
   Every rule below hangs off a class the header prints only when its option is on. */

/* Announcement "Words in bold" and a fixed "Text size" (the bar is then the text plus 6px above and
   below, with a 32px side gutter). */
.announcement-bar__strong {
  font-weight: 600;
}

.announcement-bar--size-12,
.announcement-bar--size-14,
.announcement-bar--size-16 {
  padding: 6px 32px;
  line-height: 1.4;
}

.announcement-bar--size-12 { font-size: 12px; }
.announcement-bar--size-14 { font-size: 14px; }
.announcement-bar--size-16 { font-size: 16px; }

/* "Space above and below the logo" = 16 px above, none below: the logo sits on the bar's bottom edge
   (and on its tab). The phone tab then hangs from the bar's bottom, not from a bottom padding. */
.header-wrapper .header.header--pad-16-0 {
  --logo-tab-bar-pad: 16px;
  padding-block: 16px 0;
}

@media screen and (max-width: 749px) {
  .header-wrapper--logo-backdrop .header--pad-16-0 .header__heading-link::before,
  .header-wrapper--logo-oval .header--pad-16-0 .header__heading-link::before {
    bottom: calc(-1 * var(--logo-tab-depth, 16px));
  }
}

/* Menu link style "Larger": 16/22 links in the shop's own capitals, 32px after the logo and between
   links; pointing at a link draws a 1px line under it that grows from a 4px dash to the full width.
   The page you are on gets no line in this style. */
.header.header--menu-large {
  column-gap: 32px;
}

.header--menu-large .header__menu-item > a,
.header--menu-large .header__menu > .header__menu-item > .header__submenu > .header__submenu-toggle {
  position: relative;
  padding: 0;
  border-bottom: 0;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

.header--menu-large .header__menu-item > a::after,
.header--menu-large .header__menu > .header__menu-item > .header__submenu > .header__submenu-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 4px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: width 0.3s ease, opacity 0.3s ease;
}

.header--menu-large .header__menu-item > a:hover::after,
.header--menu-large .header__menu > .header__menu-item > .header__submenu > .header__submenu-toggle:hover::after {
  width: 100%;
  opacity: 1;
}

.header--menu-large .header__menu-item > a[aria-current] {
  border-bottom: 0;
}

/* "Larger tap areas around the icons": each icon centred in a 40px square, the squares side by side. */
.header--icon-taps .header__icons {
  gap: 0;
}

.header--icon-taps .header__icon,
.header--icon-taps .header__search-toggle {
  justify-content: center;
  min-width: 40px;
  height: 40px;
}

/* Phone header "Logo left, the cart and the menu button on the right": the menu button moves to the
   right edge as two lines (a cross while open), the cart sits 16px before it, search and account are
   not shown, and the bar keeps a 16px side gutter. */
.icon-menu-close {
  display: none;
}

@media screen and (max-width: 749px) {
  .header-wrapper .header.header--m-menu-right {
    grid-template-areas: "heading icons drawer";
    grid-template-columns: 1fr auto auto;
    column-gap: 16px;
    padding-inline: 16px;
  }

  .header--m-menu-right .header__heading-link {
    justify-self: start;
  }

  .header--m-menu-right .header__search-disclosure,
  .header--m-menu-right .header__icon--account,
  .header--m-menu-right .lang-toggle {
    display: none;
  }

  /* "Show the account icon on phones" (owner, 2026-10-22, Snifl): the account icon comes back, before the cart. */
  .header--m-menu-right.header--m-account .header__icon--account {
    display: inline-flex;
  }

  .header--m-menu-right .header__drawer-toggle {
    padding: 0;
    border: 0;
    border-radius: 0;
    opacity: 1;
  }

  .header--m-menu-right .header__drawer-toggle .icon {
    width: 32px;
    height: 32px;
  }

  .header--m-menu-right .header__drawer[open] .icon-menu-lines {
    display: none;
  }

  .header--m-menu-right .header__drawer[open] .icon-menu-close {
    display: block;
  }

  .header--m-menu-right .header__drawer-panel {
    left: auto;
    right: 0;
  }
}

/* Phone menu "The whole screen": the menu covers the page in the header's own colour; the logo and the
   menu button stay on top of it (the announcement bar steps aside so the bar sits at the very top),
   the links are large and centred in the space, and the sign-in buttons and social row sit at the
   foot. The page under it does not scroll while it is open. */
.header__drawer-foot {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.header__drawer-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.header__drawer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--color-button, var(--text));
  border-radius: var(--button-radius, 100px);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.02em;
  text-decoration: none;
  text-align: center;
}

.header__drawer-button--solid {
  background: var(--color-button, var(--text));
  color: var(--color-button-text, var(--bg));
}

.header__drawer-button--outline {
  background: transparent;
  color: var(--color-button, var(--text));
}

.header__drawer-button:hover {
  text-decoration: none;
  opacity: 0.85;
}

.header__drawer-social {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.header__drawer-social-label {
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
  color: color-mix(in srgb, currentColor 80%, transparent);
}

.header__drawer-social .footer__social {
  gap: 20px;
}

.header__drawer-social .footer__social-link,
.header__drawer-social .icon-social {
  width: 24px;
  height: 24px;
}

@media screen and (max-width: 749px) {
  html:has(.header--drawer-full .header__drawer[open]) {
    overflow: hidden;
  }

  html:has(.header--drawer-full .header__drawer[open]) .chat-fab {
    display: none;
  }

  .nscms-section--header:has(.header--drawer-full .header__drawer[open]) .announcement-bar {
    display: none;
  }

  .header--drawer-full .header__drawer[open] > .header__drawer-toggle,
  .header--drawer-full:has(.header__drawer[open]) .header__heading-link {
    position: relative;
    z-index: 2;
  }

  .header--drawer-full .header__drawer-panel {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 68px 16px 80px;
    overflow-y: auto;
    background: var(--bg);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .header--drawer-full .header__drawer-menu {
    margin-block: auto;
    gap: 25px;
  }

  .header--drawer-full .header__drawer-menu .header__menu-item > a,
  .header--drawer-full .header__drawer-menu .header__submenu-toggle {
    padding: 0;
    border-bottom: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
  }

  .header--drawer-full .header__drawer-foot {
    gap: 52px;
    margin-top: 0;
  }
}

/* An in-page jump (a button to "#section", owner 2026-10-23: Snifl's Become a Reseller to its form) must
   not land under a pinned header. Only with a sticky header; a little more than the bar itself, so the
   section's heading has room. Pure CSS: no script, no change to a page that never jumps. */
html:has(.header-wrapper[data-sticky-type="always"]) [id^="nscms-section-"],
html:has(.header-wrapper[data-sticky-type="reduce-logo-size"]) [id^="nscms-section-"] {
  scroll-margin-top: 6.5rem;
}

@media screen and (max-width: 749px) {
  html:has(.header-wrapper[data-sticky-type="always"]) [id^="nscms-section-"],
  html:has(.header-wrapper[data-sticky-type="reduce-logo-size"]) [id^="nscms-section-"] {
    scroll-margin-top: 5rem;
  }
}