/** Shopify CDN: Minification failed

Line 2804:0 Unexpected "}"

**/
/* ==========================================================================
   Bloomé Editorial — high-contrast, full-bleed, display-led
   Tokens come from theme settings. Every var() has a literal fallback.
   ========================================================================== */

:root {
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 8px 28px rgba(0,0,0,.08);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg, #fff);
  color: var(--ink, #000);
  font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
  font-size: var(--font-size-base, 16px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }

/* Display type is the whole personality. Serif, huge, tight. */
h1, h2, h3, h4 {
  font-family: var(--font-heading, ui-serif, Georgia, serif);
  font-weight: var(--font-heading-weight, 400);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 .4em;
  text-wrap: balance;
}
h1 { font-size: calc(clamp(2.4rem, 1.2rem + 5vw, 4.8rem) * var(--heading-scale, 1)); line-height: 1.04; }
h2 { font-size: calc(clamp(2.1rem, 1rem + 4.6vw, 4.4rem) * var(--heading-scale, 1)); line-height: 1.06; }
h3 { font-size: calc(clamp(1.4rem, 1.1rem + 1.2vw, 2rem) * var(--heading-scale, 1)); line-height: 1.12; }
h4 { font-size: 1.1rem; line-height: 1.2; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Small headings that sit in the sans, not the serif */
.h-ui { font-family: var(--font-body, sans-serif); font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: 0; }

/* ---------- layout: edge to edge by default ---------- */

.page-width { max-width: var(--page-width, 1600px); margin: 0 auto; padding: 0 max(var(--gutter, 0px), 20px); }
.page-width--flush { max-width: none; padding: 0 var(--gutter, 0px); }
.page-width--boxed { max-width: 1180px; }
.page-width--narrow { max-width: 760px; }

/* Vertical rhythm.
   A section's padding_top/padding_bottom is the DESKTOP value. --space-k
   compresses it on smaller screens and --space-scale is the store-wide
   "Section spacing" setting, so every gap on the site moves together. */
.section {
  padding-top: calc(var(--pt, 96px) * var(--space-k) * var(--space-scale));
  padding-bottom: calc(var(--pb, 96px) * var(--space-k) * var(--space-scale));
}
.section--tight { }
.section--flush { padding: 0; }
.section--soft { background: var(--brand-soft, #f5f5f5); }
.section--invert { background: var(--ink, #000); color: var(--bg, #fff); }
.section--invert h1, .section--invert h2, .section--invert h3 { color: inherit; }
.section--invert .muted { color: rgba(255,255,255,.62); }

/* Section head.
   A hairline under it gives every block the same structural anchor, and the
   heading sits on its own scale so it never competes with a hero. */
.section-head {
  margin: 0 0 clamp(28px, 3.2vw, 44px);
  padding-bottom: clamp(14px, 1.4vw, 20px);
  border-bottom: 1px solid var(--line, #e5e5e5);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.section-head > *:first-child { flex: 1 1 auto; min-width: 0; }
.section-head--center {
  display: block; text-align: center; max-width: 780px; margin-inline: auto;
  border-bottom: 0; padding-bottom: 0;
}
.section-head--plain { border-bottom: 0; padding-bottom: 0; }
.section--invert .section-head { border-color: var(--hair-light, rgba(255,255,255,.22)); }
.section-head h2 {
  margin: 0; line-height: 1.02;
  font-size: calc(clamp(1.35rem, .95rem + 1.5vw, 2.05rem) * var(--heading-scale, 1));
}
.section-head .eyebrow { margin-bottom: 10px; }
.section-head p { color: var(--muted, #6e6e6e); margin: 12px 0 0; max-width: 460px; }
.section-head .button--link {
  flex: none; font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
}

.eyebrow { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #6e6e6e); margin: 0 0 18px; font-weight: 500; }
.muted { color: var(--muted, #6e6e6e); }
.center { text-align: center; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip-link:focus { left: 12px; top: 12px; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--ink, #000); outline-offset: 3px; }

/* ---------- buttons: pill, outline-first ---------- */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 40px;
  border: 1px solid var(--ink, #000);
  border-radius: var(--btn-radius, 40px);
  background: var(--bg, #fff); color: var(--ink, #000);
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1.2;
  letter-spacing: var(--label-spacing, .01em); text-transform: var(--label-transform, none);
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease);
}
.button:hover { background: var(--ink, #000); color: var(--bg, #fff); }
.button--solid { background: var(--btn, #000); color: var(--btn-ink, #fff); border-color: var(--btn, #000); }
.button--solid:hover { background: transparent; color: var(--ink, #000); }
.button--full { width: 100%; }
.button--lg { padding: 17px 46px; font-size: 15px; }
.button--ghost { border-color: var(--line, #e5e5e5); }
.button--ghost:hover { background: var(--ink, #000); color: var(--bg, #fff); border-color: var(--ink, #000); }
.button[disabled], .button[aria-disabled='true'] { opacity: .35; cursor: not-allowed; }
.button[disabled]:hover { background: var(--bg, #fff); color: var(--ink, #000); }
.button--link { background: none; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: 0 0 3px; font-size: 14px; }
.button--link:hover { background: none; color: var(--muted, #6e6e6e); }
.section--invert .button { border-color: #fff; color: #fff; background: transparent; }
.section--invert .button:hover { background: #fff; color: var(--ink, #000); }
.shopify-payment-button__button--unbranded {
  background: transparent !important; color: var(--ink, #000) !important;
  border: 1px solid var(--ink, #000) !important;
  border-radius: var(--btn-radius, 40px) !important;
  padding: 16px 40px !important; font-weight: 500 !important;
}

/* ---------- forms ---------- */

.field { display: grid; gap: 7px; margin-bottom: 18px; }
::placeholder { color: var(--muted, #6e6e6e); opacity: .75; }
.field label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #6e6e6e); }
.input, input[type='text'], input[type='email'], input[type='password'],
input[type='search'], input[type='tel'], input[type='number'], textarea, select {
  width: 100%; padding: 15px 20px; font: inherit; color: var(--ink, #000);
  background: transparent; border: 1px solid var(--line, #e5e5e5);
  border-radius: var(--btn-radius, 40px); transition: border-color .15s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ink, #000); }
textarea { min-height: 140px; resize: vertical; border-radius: 12px; }
select {
  appearance: none; padding-right: 46px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.3' d='m1 1 4.5 4.5L10 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 20px center;
}
.form-status { padding: 14px 18px; border-radius: 12px; margin-bottom: 16px; font-size: 14px; border: 1px solid var(--line, #e5e5e5); }
.form-status--error { border-color: #e0b4b0; }
.form-status--success { border-color: #b0d6bf; }

/* ---------- primitives ---------- */

.card { border: 1px solid var(--line, #e5e5e5); border-radius: 14px; padding: 26px; }
.badge {
  display: inline-block; padding: 6px 14px; border-radius: 100px;
  font-size: 11px; font-weight: 500; letter-spacing: .06em;
  background: var(--ink, #000); color: var(--bg, #fff); white-space: nowrap;
}
.badge--sale { background: var(--sale, #b3261e); }
.badge--soft { background: var(--bg, #fff); color: var(--ink, #000); border: 1px solid var(--ink, #000); }
.notice { display: flex; gap: 13px; align-items: flex-start; background: var(--notice-bg, #f5f5f5); border: 1px solid var(--notice-line, #e5e5e5); border-radius: 14px; padding: 16px 18px; font-size: 14px; }
.notice svg { flex: none; margin-top: 3px; }

.price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price__now { font-size: 15px; }
.price__was { color: var(--muted, #6e6e6e); text-decoration: line-through; font-size: 14px; }
.price__off { color: var(--sale, #b3261e); font-size: 13px; }

.rte > :first-child { margin-top: 0; }
.rte > :last-child { margin-bottom: 0; }
.rte ul, .rte ol { padding-left: 1.2em; }
.rte a { text-underline-offset: 3px; }

.editor-note {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 760px; margin: 0 auto 28px; padding: 12px 16px;
  border: 1px dashed #c9a227; border-radius: 8px;
  background: #fdfaf0; color: #6b5a1e; font-size: 13px; line-height: 1.5; text-align: left;
}
.editor-note svg { flex: none; margin-top: 1px; }

/* ==========================================================================
   Header — burger left, wordmark centred
   ========================================================================== */

.header { background: var(--bg, #fff); position: relative; z-index: 30; }
.header--sticky { position: sticky; top: 0; }
/* Shopify wraps every section in its own div, and that box is only as tall as
   the header — so a sticky header inside it has no range to stick within and
   scrolls away. The wrapper has to carry the sticky, not the header. */
@supports selector(:has(*)) {
  .header-group > .shopify-section:has(.header--sticky) { position: sticky; top: 0; z-index: 30; }
}
/* An overlaid header covers the top of the page. Sections whose root is
   .section start with text, so they need at least the header's height of
   clearance. Sections built to run under it — the hero, the image banner, the
   product gallery — do not use .section, so they are untouched and keep
   showing through the frosted bar. */
@supports selector(:has(*)) {
  .header-group:has(.header--overlay) ~ main > .shopify-section:first-child > .section {
    padding-top: max(var(--pt, 96px), calc(var(--header-h, 72px) + 16px));
  }
  @media (max-width: 749px) {
    .header-group:has(.header--overlay) ~ main > .shopify-section:first-child > .section {
      padding-top: max(calc(var(--pt, 96px) * .62), calc(var(--header-h, 72px) + 16px));
    }
  }
}
/* Overlay header. The whole header group is lifted out of flow, not just the
   header, so an enabled announcement bar still stacks above it correctly.
   The wrapper is display:contents until then, so a sticky header keeps the
   body as its containing block and does not scroll away immediately. */
.header-group { display: contents; }
@supports selector(:has(*)) {
  .header-group:has(.header--overlay) {
    display: block; position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  }
  .header-group:has(.header--overlay-fixed) { position: fixed; }
}
.header--overlay { color: var(--header-ink, #000); }
/* The tint and blur live on a layer of their own rather than on the header.
   An element with backdrop-filter becomes a backdrop root, and a descendant
   that also has one then samples that root instead of the page — which is why
   the dropdown looked tinted but never actually blurred. As a sibling layer
   the bar and the panel each blur the real page, identically.
   The flat colour is the fallback for browsers with no backdrop-filter. */
.header--overlay { background: transparent; }
.header--overlay > * { position: relative; z-index: 1; }
.header--overlay::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  bottom: 0;
  pointer-events: none;
  background: var(--header-bg-flat, rgba(255, 255, 255, .82));
  transition: bottom .24s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .header--overlay::before { transition: none; } }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .header--overlay::before {
    background: var(--header-bg, rgba(255, 255, 255, .45));
    -webkit-backdrop-filter: blur(var(--header-blur, 14px)) saturate(1.5);
    backdrop-filter: blur(var(--header-blur, 14px)) saturate(1.5);
  }
}
/* Announcement bar and header as one surface. The frosted layer moves up to the
   group that holds both, so there is a single blur with no seam between them —
   two abutting backdrop-filter layers cannot sample across their shared edge.
   The header's own layer steps aside. Only in overlay mode, and only for the
   bar inside the header group: a bar placed further down a page stays black. */
@supports selector(:has(*)) {
  .header-group:has(.header--overlay)::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; z-index: 0;
    bottom: 0;
    pointer-events: none;
    background: var(--header-bg-flat, rgba(255, 255, 255, .82));
    transition: bottom .24s var(--ease);
  }
  .header-group:has(.header--overlay) > * { position: relative; z-index: 1; }
  .header-group:has(.header--overlay) .header--overlay::before { display: none; }
  .header-group:has(.header--overlay) .announcement {
    background: transparent; color: var(--header-ink, #000);
  }
}
@supports selector(:has(*)) and ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header-group:has(.header--overlay)::before {
    background: var(--header-bg, rgba(255, 255, 255, .45));
    -webkit-backdrop-filter: blur(var(--header-blur, 14px)) saturate(1.5);
    backdrop-filter: blur(var(--header-blur, 14px)) saturate(1.5);
  }
}
@media (prefers-reduced-motion: reduce) { .header-group::before { transition: none; } }

/* --------------------------------------------------- clear, then solid */
/* Over a full-bleed first section the bar carries nothing of its own: no
   tint, no blur, just light text straight on the photograph. A few pixels of
   scroll turn it solid and the ink flips dark. theme.js only sets .is-stuck;
   both states and the fade between them are CSS, so the bar still reads
   correctly if the script never runs — it simply stays clear.
   These rules come after the frosted ones on purpose: same specificity, so
   source order is what lets them win. */
.header--clear { --header-ink: var(--header-ink-top, #fff); }
.header--clear.is-stuck { --header-ink: var(--header-ink-solid, #000); }
.header-group:has(.header--clear) .announcement { color: var(--header-ink-top, #fff); }
.header-group:has(.header--clear.is-stuck) .announcement { color: var(--header-ink-solid, #000); }

.header--clear::before,
.header-group:has(.header--clear)::before {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), bottom .24s var(--ease);
}
.header--clear.is-stuck::before,
.header-group:has(.header--clear.is-stuck)::before {
  background: var(--header-bg-solid, #fff);
  border-bottom-color: var(--header-line, rgba(0, 0, 0, .12));
}
/* A dropdown opened while the bar is still clear would otherwise read over
   the photograph. Hovering a menu borrows the solid state for as long as the
   panel is open. */
.header-group:has(.header--clear .nav-item--has-menu:hover),
.header-group:has(.header--clear .nav-item--has-menu:focus-within),
.header--clear:has(.nav-item--has-menu:hover),
.header--clear:has(.nav-item--has-menu:focus-within) { --header-ink: var(--header-ink-solid, #000); }
.header-group:has(.header--clear .nav-item--has-menu:hover)::before,
.header-group:has(.header--clear .nav-item--has-menu:focus-within)::before {
  background: var(--header-bg-solid, #fff);
  border-bottom-color: var(--header-line, rgba(0, 0, 0, .12));
}
@media (prefers-reduced-motion: reduce) {
  .header--clear::before,
  .header-group:has(.header--clear)::before { transition: none; }
}

/* Two marks, one slot. Which one shows follows the bar's state. The ordinary
   mark steps aside only where a light one was actually uploaded — otherwise
   :has() finds nothing and the single mark stays visible in both states,
   rather than the slot going empty. */
.brand-mark--light { display: none; }
.header--clear .brand-mark--light { display: block; }
.header--clear .header__logo:has(.brand-mark--light) .brand-mark--dark { display: none; }
.header--clear.is-stuck .brand-mark--light,
.header--clear:has(.nav-item--has-menu:hover) .brand-mark--light { display: none; }
.header--clear.is-stuck .header__logo:has(.brand-mark--light) .brand-mark--dark,
.header--clear:has(.nav-item--has-menu:hover) .header__logo:has(.brand-mark--light) .brand-mark--dark { display: block; }

/* The same bar on a page that starts with text: no overlay to speak of, just
   the solid colours the scrolled state uses, so the two never disagree. */
.header--solid {
  background: var(--header-bg-solid, #fff);
  color: var(--header-ink-solid, #000);
  box-shadow: inset 0 -1px 0 var(--header-line, rgba(0, 0, 0, .12));
}
.header--solid .header__logo-text,
.header--solid .header__icon,
.header--solid .nav-list a { color: var(--header-ink-solid, #000); }

.header--overlay .header__logo-text,
.header--overlay .header__icon,
.header--overlay .nav-list a { color: var(--header-ink, #000); }
/* One knob for the whole bar: the row is centred inside min-height, so the
   header is exactly --header-h tall unless a large logo forces it taller. */
/* padding-block only: a `padding` shorthand here would wipe out the side
   padding .page-width sets, which is what pushed the menu to the screen edge. */
.header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding-block: 0; padding-inline: max(var(--gutter, 0px), var(--header-pad, 24px));
  min-height: var(--header-h, 72px); }
.header__nav { display: none; }
.header__logo { justify-self: center; text-decoration: none; }
.header__logo img {
  display: block; height: auto;
  width: var(--logo-w, 120px); max-width: 100%;
  /* object-fit keeps the ratio if a tall logo would otherwise stretch the bar */
  max-height: calc(var(--header-h, 72px) - 12px); object-fit: contain; object-position: center;
}
/* The drawer is a sibling of <header>, so this only touches the bar itself. */
@media (min-width: 750px) { .header .header__logo img { width: var(--logo-w-desktop, 160px); } }
/* max-width wins over the inline width the logo setting writes, so a wide
   logo cannot push the close button out of the drawer. */
.mobile-menu__logo { max-width: 62%; }
.mobile-menu__logo img { width: var(--logo-w, 120px); max-height: none; }
.header__logo-text {
  font-family: var(--font-heading, ui-serif, Georgia, serif);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-weight: 800;
  letter-spacing: .26em; text-transform: uppercase; white-space: nowrap;
  padding-left: .26em; /* balances the trailing letter-space */
}
.header__actions { justify-self: end; display: flex; align-items: center; gap: 4px; }
.header__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; position: relative; transition: opacity .15s; }
.header__icon:hover { opacity: .55; }
.cart-count { position: absolute; top: 7px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 100px; background: var(--ink, #000); color: var(--bg, #fff); font-size: 10px; display: grid; place-items: center; border: 2px solid var(--bg, #fff); box-sizing: content-box; }
.cart-count[hidden] { display: none; }
.nav-list { list-style: none; display: flex; gap: 32px; margin: 0; padding: 0; }
.nav-list a { text-decoration: none; font-size: var(--nav-size, 17px); position: relative; padding-bottom: 3px; }
.nav-list a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right .3s var(--ease); }
.nav-list a:hover::after { right: 0; }

/* Drop menu. A panel down the left of the window with the rest of the page
   blurred behind it, rather than a bar that unrolls across the top. Two
   columns inside: the links, a hairline, and one tall picture. The trigger's
   hover area is stretched with padding and pulled back with an equal negative
   margin, so there is no dead gap for the pointer to fall through on the way
   down into the panel. */
.nav-item--has-menu { padding-block: 16px; margin-block: -16px; }
.mega {
  /* The bar's row sits inside .page-width, so anchoring to it would inset the
     layer by the page gutter. Centred on that box — which is itself centred —
     a 100vw width reaches both edges of the window instead. body already
     clips horizontally, so the scrollbar cannot start a sideways scroll. */
  position: absolute; top: 100%; left: 50%; width: 100vw; margin-left: -50vw;
  height: calc(100vh - var(--header-h, 72px)); z-index: 40;
  visibility: hidden;
  /* The layer spans the window, but only the panel itself should hold the
     pointer: moving out over the blurred page leaves the menu item and the
     panel closes, the way it does on a site that darkens the rest. */
  pointer-events: none;
}
.nav-item--has-menu:hover > .mega,
.nav-item--has-menu:focus-within > .mega { visibility: visible; }
/* Below the breakpoint the bar shows a burger and the slide-out drawer takes
   over, so the panel has no business being in the document at all. */
@media (max-width: 989px) { .mega { display: none; } }

.mega__scrim {
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, .5);
  opacity: 0; transition: opacity .28s var(--ease);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .mega__scrim {
    background: rgba(255, 255, 255, .34);
    -webkit-backdrop-filter: blur(22px) saturate(1.1);
    backdrop-filter: blur(22px) saturate(1.1);
  }
}
.mega__inner {
  position: relative; pointer-events: auto;
  height: 100%; width: min(900px, 74vw);
  display: grid; grid-template-columns: minmax(210px, 300px) 1fr;
  background: var(--header-bg-solid, #fff);
  border-right: 1px solid var(--header-line, rgba(0, 0, 0, .12));
  opacity: 0; transition: opacity .2s var(--ease);
}
.mega__inner--no-media { width: min(320px, 62vw); grid-template-columns: 1fr; }
.nav-item--has-menu:hover > .mega > .mega__scrim,
.nav-item--has-menu:focus-within > .mega > .mega__scrim,
.nav-item--has-menu:hover > .mega > .mega__inner,
.nav-item--has-menu:focus-within > .mega > .mega__inner { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mega__scrim, .mega__inner { transition: none; }
}

.mega__cols {
  padding: 38px 30px 40px max(var(--header-pad, 24px), 30px);
  border-right: 1px solid var(--header-line, rgba(0, 0, 0, .12));
  overflow-y: auto; min-height: 0;
}
.mega__inner--no-media .mega__cols { border-right: 0; }
.mega__group {
  margin: 0 0 14px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  opacity: .42;
}
.mega__rule { border: 0; border-top: 1px solid var(--header-line, rgba(0, 0, 0, .12)); margin: 26px 0 20px; }

/* One link style for every level of the panel. Resting state is grey and
   hover is full black — the list reads as a block of texture until the
   pointer picks a line out of it.
   The colour has to be stated here rather than inherited: the bar paints
   every link inside .nav-list with the header's own ink, which while the
   header is clear is white — invisible on this white panel. */
.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__sub { list-style: none; margin: 0 0 10px; padding: 0; }
.header .nav-list .mega a,
.header .nav-list .mega summary {
  display: block; padding: 6px 0; text-decoration: none;
  font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--header-ink-solid, var(--ink, #000));
  opacity: .42; transition: opacity .18s var(--ease);
}
.mega a::after { display: none; }
.header .nav-list .mega a:hover,
.header .nav-list .mega a:focus-visible,
.header .nav-list .mega a[aria-current],
.header .nav-list .mega summary:hover { opacity: 1; }
.mega__sub a { padding-left: 0; }

.header .nav-list .mega__fold summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer; list-style: none;
}
.mega__fold summary::-webkit-details-marker { display: none; }
.mega__fold summary::marker { content: ''; }
.mega__fold summary svg { flex: none; transition: transform .22s var(--ease); }
.mega__fold[open] summary { opacity: 1; }
.mega__fold[open] summary svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .mega__fold summary svg { transition: none; } }

/* The picture fills the height of the panel the way a shop window does, so
   the menu reads as one tall image with a list beside it. */
.mega__media { padding: 26px 26px 26px 30px; min-height: 0; min-width: 0; }
.header .nav-list .mega .mega__shot {
  display: flex; flex-direction: column; height: 100%;
  padding: 0; opacity: 1; text-transform: none; letter-spacing: 0;
}
.mega__shot img { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: cover; }
.mega__caption {
  display: block; margin-top: 12px; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; opacity: .5;
}

/* Mobile: a native <details> fold, no JS involved. */
.nav-fold summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0; font-family: var(--font-heading, serif); font-size: 2rem;
}
.nav-fold summary::-webkit-details-marker { display: none; }
.nav-fold summary svg { flex: none; opacity: .5; transition: transform .25s var(--ease); }
.nav-fold[open] summary svg { transform: rotate(180deg); }
.nav-fold__list { list-style: none; margin: 0 0 10px; padding: 0 0 0 2px; }
/* Ink at reduced opacity rather than a fixed grey: on a translucent drawer the
   ground shifts with whatever is behind it, and grey-on-grey fell to 1.1:1
   over a dark photo. This holds 7:1 in the same place. */
.mobile-menu .nav-list .nav-fold__list a {
  display: block; padding: 11px 0;
  font-family: var(--font-body, sans-serif); font-size: 1rem;
  color: var(--ink, #000); opacity: .75;
}
.mobile-menu .nav-list .nav-fold__list a:hover { opacity: 1; }
.nav-fold__list a::after { display: none; }
/* Nested fold: same control as the top level, one step quieter. */
.nav-fold--sub summary {
  font-family: var(--font-body, sans-serif); font-size: 1rem;
  padding: 11px 0; color: var(--ink, #000); opacity: .75;
}
.nav-fold--sub[open] summary { opacity: 1; }
.nav-fold--sub summary svg { opacity: .6; }
.nav-fold__sub { list-style: none; margin: 0 0 6px; padding: 0 0 0 14px; }
.mobile-menu .nav-list .nav-fold__sub a { display: block; padding: 11px 0; font-family: var(--font-body, sans-serif);
  font-size: .92rem; color: var(--ink, #000); opacity: .7; }
.mobile-menu .nav-list .nav-fold__sub a:hover { opacity: 1; }
.nav-fold__sub a::after { display: none; }
.header__menu-toggle { justify-self: start; }

/* Same frosted material as the header bar. The drawer type is 2rem, which
   counts as large text, and black on this tint clears 3:1 even over a pure
   black photo — so the header's own opacity is safe here too. */
.mobile-menu { position: fixed; inset: 0; z-index: 60; background: var(--header-bg-flat, var(--bg, #fff)); transform: translateX(-100%); transition: transform .34s var(--ease); display: flex; flex-direction: column; padding: 22px; }
/* The drawer is a fixed, full-height flex column. Without min-height:0 the nav
   refuses to shrink below its content, so a long menu overflowed the screen
   with nothing to scroll. */
.mobile-menu > nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.mobile-menu__head { flex: none; }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .mobile-menu {
    /* The bar is a thin strip over a mostly light hero; this covers the whole
       screen over whatever happens to be behind it, so it uses the more solid
       of the two tints. Same blur, same colour, just less see-through. */
    background: var(--header-bg-flat, rgba(255, 255, 255, .78));
    -webkit-backdrop-filter: blur(var(--header-blur, 14px)) saturate(1.5);
    backdrop-filter: blur(var(--header-blur, 14px)) saturate(1.5);
  }
}
.mobile-menu.is-open { transform: none; }
.mobile-menu__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 36px; }
.mobile-menu .nav-list { flex-direction: column; gap: 0; }
.mobile-menu .nav-list a { display: block; padding: 14px 0; font-family: var(--font-heading, serif); font-size: 2rem; border-bottom: 0; }
.mobile-menu .nav-list a::after { display: none; }

.announcement { background: var(--ink, #000); color: var(--bg, #fff); font-size: 12px; }
.announcement__inner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 0; text-align: center; }
.marquee { overflow: hidden; padding: 0; }
.marquee__track { display: flex; width: max-content; animation: marquee-shift var(--marquee-duration, 42s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; flex: none; }
.marquee__item { display: inline-flex; align-items: center; gap: 10px; flex: none; padding: 12px var(--marquee-gap, 72px) 12px 0; white-space: nowrap; letter-spacing: .04em; }
/* A phone shows far less of the strip, so the same gap there would leave
   only one message on screen at a time. */
@media (max-width: 749px) { .marquee__item { padding-right: calc(var(--marquee-gap, 72px) * .6); } }
/* Sitting directly on the header, the bar needs less air of its own — the
   header row already brings plenty underneath it. */
.header-group .marquee__item { padding-top: 8px; padding-bottom: 7px; }
.header-group .announcement__inner { padding-top: 8px; padding-bottom: 7px; }
@keyframes marquee-shift { to { transform: translateX(calc(-1 * var(--marquee-shift, 50%))); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; }
  .marquee__group + .marquee__group { display: none; }
}

/* Big scrolling display text, the signature Bricks move */
.ticker { overflow: hidden; padding-top: calc(var(--pt, 40px) * var(--space-k) * var(--space-scale)); padding-bottom: calc(var(--pb, 40px) * var(--space-k) * var(--space-scale)); border-top: 1px solid var(--line, #e5e5e5); border-bottom: 1px solid var(--line, #e5e5e5); }
.ticker--plain { border: 0; }
.ticker__track { display: flex; width: max-content; animation: marquee-shift var(--ticker-speed, 35s) linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; flex: none; align-items: center; }
.ticker__item {
  font-family: var(--font-heading, serif);
  font-size: clamp(2.2rem, 6vw, 5rem); line-height: 1;
  /* --caps: the tracked marquee used on the sport brand */
  padding-right: .5em; white-space: nowrap; display: inline-flex; align-items: center; gap: .4em;
}
.ticker__dot { width: .12em; height: .12em; border-radius: 50%; background: currentColor; display: inline-block; }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* The icon buttons are 44px with a centred glyph, so they already carry ~11px
   of their own inset. On a phone the full padding on top of that reads as a
   gap, so take it down to 60% there. */
@media (max-width: 749px) {
  .header__inner { padding-inline: max(var(--gutter, 0px), calc(var(--header-pad, 24px) * .6)); }
}
@media (min-width: 990px) { .header__nav { display: block; justify-self: start; } .header__menu-toggle { display: none; } }

/* ==========================================================================
   Product cards
   ========================================================================== */

.grid-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--card-gap, 4px); }
.pcard { position: relative; }
.pcard__img {
  display: block; overflow: hidden; position: relative;
  background: var(--brand-soft, #f5f5f5); border-radius: var(--radius, 0);
  margin-bottom: 16px; text-decoration: none;
}
.pcard--overlay .pcard__img { margin-bottom: 0; }
/* Quick add. The button never sits inside the image link — nesting one
   interactive element in another is invalid and breaks keyboard use — so it is
   a sibling, either under the card or floated over the image corner. */
.pcard__frame { position: relative; }
.pcard__atc {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body, sans-serif); font-size: 13px; line-height: 1;
  border: 1px solid var(--ink, #000); background: var(--ink, #000); color: var(--bg, #fff);
  border-radius: var(--btn-radius, 40px); padding: 12px 22px;
  min-height: 44px; /* tap target */
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.pcard__atc { position: relative; }
.pcard__atc:hover { background: transparent; color: var(--ink, #000); }
.pcard__atc[disabled] { opacity: .55; cursor: default; }
.pcard__atc--out {
  background: transparent; color: var(--muted, #6e6e6e);
  border-color: var(--line, #e5e5e5); cursor: default;
}
.pcard__atc--out:hover { background: transparent; color: var(--muted, #6e6e6e); }

.pcard--atc-bar .pcard__atc-wrap { margin-top: 14px; }
.pcard--atc-bar .pcard__atc { width: 100%; }

/* Top right, not bottom right: the overlay title sits along the bottom, and
   on a two-up phone grid the card is ~169px wide, so a bottom button ran
   straight through the title. The sale flag uses the top left. */
.pcard--atc-corner .pcard__atc-wrap { position: absolute; right: 12px; top: 12px; z-index: 3; }
.pcard--atc-corner .pcard__atc {
  padding: 10px 18px; font-size: 12px;
  background: rgba(255, 255, 255, .9); color: var(--ink, #000); border-color: transparent;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .pcard--atc-corner .pcard__atc {
    background: rgba(255, 255, 255, .58);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
  }
}
.pcard--atc-corner .pcard__atc:hover { background: var(--ink, #000); color: var(--bg, #fff); }

/* Icon only: a plain round button, no label, no width beyond the circle. */
.pcard--atc-icon .pcard__atc-wrap { position: absolute; right: 10px; top: 10px; z-index: 3; }
.pcard--atc-icon .pcard__atc {
  width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .9); color: var(--ink, #000); border-color: transparent;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .pcard--atc-icon .pcard__atc {
    background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
  }
}
.pcard--atc-icon .pcard__atc:hover { background: var(--ink, #000); color: var(--bg, #fff); }
.pcard--atc-icon .pcard__atc svg { display: block; }
/* The circle is 40px, so pad the hit area out to 44 without growing the shape. */
.pcard--atc-icon .pcard__atc::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
}
@media (max-width: 749px) {
  .pcard__atc { padding: 10px 16px; font-size: 12px; }
  .pcard--atc-corner .pcard__atc { padding: 10px 14px; font-size: 11px; }
}

/* height:auto, not 100%: as a grid item the card stretches to the tallest in
   the row, and a 100% height let the image absorb that stretch instead of
   keeping its aspect ratio — which pushed anything below it out of the card. */
.pcard__img img { width: 100%; height: auto; object-fit: cover; transition: opacity .45s var(--ease), transform 1.1s var(--ease); }
.pcard__img--tall img     { aspect-ratio: 2 / 3; }
.pcard__img--portrait img { aspect-ratio: 3 / 4; }
.pcard__img--square img   { aspect-ratio: 1 / 1; }
.pcard__img--natural img  { aspect-ratio: auto; }
.pcard__alt { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease); }
/* The hover image is absolutely positioned, so here 100% has a definite box
   to resolve against and correctly fills the frame. */
.pcard__alt img { height: 100%; }
.pcard:hover .pcard__alt { opacity: 1; }
.pcard__flag { position: absolute; top: 14px; left: 14px; z-index: 3; }

/* Overlay treatment: text sits on the image over a gradient scrim */
.pcard__scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 44%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, .08) 40%,
    rgba(0, 0, 0, .58) 72%,
    rgba(0, 0, 0, .74) 100%);
  pointer-events: none; z-index: 1;
}
.pcard__overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: grid; gap: 5px;
  padding: clamp(16px, 1.6vw, 24px);
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
}
.pcard--overlay .pcard__title { color: #fff; font-size: 16px; line-height: 1.25; }
.pcard--overlay .pcard__meta { color: rgba(255, 255, 255, .88); font-size: 14px; }
.pcard--overlay .pcard__meta s { opacity: .65; margin-left: 6px; }
.pcard--overlay .pcard__swatches { margin-top: 4px; }
.pcard--overlay .pcard__swatch { border-color: rgba(255, 255, 255, .6); }

.pcard__title { text-decoration: none; display: block; font-size: 15px; margin-bottom: 5px; }
.pcard__meta { font-size: 14px; color: var(--muted, #6e6e6e); }
.pcard__swatches { display: flex; gap: 6px; margin-top: 10px; }
.pcard__swatch { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line, #e5e5e5); }

@media (min-width: 750px) { .grid-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .grid-cards { grid-template-columns: repeat(4, 1fr); } }
.grid-cards--2 { grid-template-columns: repeat(2, 1fr) !important; }
/* One long row on a computer. `columns` cards are visible at once and the rest
   scroll behind arrows — a mouse cannot swipe, so without them the extra cards
   would be unreachable for most people. */
.fc-rail { position: relative; }
.fc-rail__arrow { display: none; }
@media (min-width: 750px) {
  .grid-cards--drow {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; gap: var(--card-gap, 4px); scroll-behavior: smooth;
  }
  .grid-cards--drow::-webkit-scrollbar { display: none; }
  .grid-cards--drow > * {
    flex: none; scroll-snap-align: start;
    width: calc((100% - (var(--row-cols, 4) - 1) * var(--card-gap, 4px)) / var(--row-cols, 4));
  }
  .fc-rail--row .fc-rail__arrow {
    display: grid; place-items: center; position: absolute; top: 50%; z-index: 4;
    width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; border: 0; cursor: pointer;
    color: var(--ink, #000); background: rgba(255, 255, 255, .9);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
    transition: opacity .2s var(--ease), background .2s var(--ease);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .fc-rail--row .fc-rail__arrow {
      background: rgba(255, 255, 255, .62);
      -webkit-backdrop-filter: blur(14px) saturate(1.5);
      backdrop-filter: blur(14px) saturate(1.5);
    }
  }
  .fc-rail--row .fc-rail__arrow:hover { background: var(--ink, #000); color: var(--bg, #fff); }
  .fc-rail__arrow--prev { left: 12px; }
  .fc-rail__arrow--next { right: 12px; }
  .fc-rail__arrow[disabled] { opacity: 0; pointer-events: none; }
}
@media (min-width: 750px) and (hover: hover) {
  .grid-cards--drow { cursor: grab; }
  /* Snap and smooth-scroll both fight a drag, so they are off only while it lasts */
  .grid-cards--drow.is-dragging {
    cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none;
  }
  .grid-cards--drow.is-dragging * { pointer-events: none; }
  .grid-cards--drow img { -webkit-user-drag: none; }
}
@media (min-width: 750px) {
  .grid-cards--drow.is-wheeling { scroll-snap-type: none; scroll-behavior: auto; }
}

/* One swipeable row on a phone. Same rail mechanics as the category row:
   bleed to the screen edges, snap points that respect the inset, and vertical
   room so the card shadow is not cut off by overflow-x. */
@media (max-width: 749px) {
  .grid-cards--mscroll {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    gap: var(--card-gap, 4px);
    margin-inline: calc(-1 * max(var(--gutter, 0px), 20px));
    padding-inline: max(var(--gutter, 0px), 20px);
    scroll-padding-inline: max(var(--gutter, 0px), 20px);
    padding-block: 4px 28px;
    margin-block: -4px -28px;
  }
  .grid-cards--mscroll::-webkit-scrollbar { display: none; }
  .grid-cards--mscroll > * { flex: none; width: var(--card-msize, 62vw); scroll-snap-align: start; }
}


@media (min-width: 1100px) { .grid-cards--3 { grid-template-columns: repeat(3, 1fr) !important; } }

/* horizontal product rail */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 68%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 750px) { .rail { grid-auto-columns: 34%; gap: 20px; } }
@media (min-width: 1100px) { .rail { grid-auto-columns: 23%; gap: 22px; } }

/* collection tiles */
.tiles { display: grid; grid-template-columns: 1fr; gap: 4px; }
.tiles--m2 { grid-template-columns: repeat(2, 1fr); }
.tile { position: relative; display: block; text-decoration: none; overflow: hidden; background: var(--brand-soft, #f5f5f5); }
.tile img { width: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tiles--tall      .tile img { aspect-ratio: 3 / 4; }
.tiles--square    .tile img { aspect-ratio: 1 / 1; }
.tiles--landscape .tile img { aspect-ratio: 4 / 3; }
.tiles--wide      .tile img { aspect-ratio: 16 / 9; }
.tile:hover img { transform: scale(1.045); }
.tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.62)); }
.tile__body h3 { margin: 0 0 4px; color: #fff; font-size: clamp(1.15rem, 4vw, 2.4rem); }
.tile__body span { font-size: 13px; opacity: .9; }
@media (min-width: 750px) { .tiles, .tiles--m2 { grid-template-columns: repeat(3, 1fr); } .tiles--2 { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Hero / slideshow / editorial
   ========================================================================== */

.hero { position: relative; }
.hero__media { position: relative; overflow: hidden; }
.hero__media img,
.hero__media video,
.hero__media .hero__video { width: 100%; object-fit: cover; display: block; }
.hero__media [class*="video-wrapper"] { height: 100%; }
.hero--full .hero__media img,
.hero--full .hero__media video { height: clamp(460px, 78vh, 860px); }
.hero--tall .hero__media img,
.hero--tall .hero__media video { height: clamp(560px, 92vh, 980px); }
.hero__overlay { position: absolute; inset: 0; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(0,0,0,.55)); pointer-events: none; }
.hero--center .hero__scrim, .hero__content--middle ~ .hero__scrim { background: rgba(0,0,0,.28); }
.hero__content { position: absolute; inset: 0; display: grid; align-items: end; }
.hero__content--middle { align-items: center; }
.hero__inner { max-width: var(--page-width, 1600px); margin: 0 auto; padding: clamp(36px, 6vw, 80px) max(var(--gutter, 0px), 20px); width: 100%; }
.hero__box { max-width: 640px; color: #fff; }
.hero__box--dark { color: var(--ink, #000); }
.hero__box h1 { color: inherit; margin-bottom: 22px; }
.hero__box p { font-size: 1rem; margin-bottom: 30px; max-width: 420px; opacity: .92; font-family: var(--font-body, sans-serif); }
.hero--right .hero__box { margin-left: auto; }
.hero--center .hero__box { margin-inline: auto; text-align: center; max-width: 760px; }
.hero--center .hero__box p { margin-inline: auto; }
.hero--split { display: grid; grid-template-columns: 1fr; }
.hero--split .hero__content { position: static; }
.hero--split .hero__media img,
.hero--split .hero__media video { height: clamp(380px, 58vw, 700px); }
@media (min-width: 900px) {
  .hero--split { grid-template-columns: 1fr 1fr; align-items: center; }
  .hero--split .hero__inner { padding: 0 clamp(36px, 5vw, 80px); }
  .hero--split.hero--media-right .hero__media { order: 2; }
    .hero--split .hero__box { max-width: 560px; }
}

.split { display: grid; gap: 0; align-items: stretch; }
.split__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.split__body { padding: calc(var(--pt, 72px) * var(--space-k) * var(--space-scale)) max(var(--gutter, 0px), 22px) calc(var(--pb, 72px) * var(--space-k) * var(--space-scale)); display: grid; align-content: center; }
.split__body-inner { max-width: 560px; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-right .split__media { order: 2; }
  .split__media img { aspect-ratio: auto; min-height: 560px; }
}

.quote { text-align: center; max-width: 1000px; margin-inline: auto; }
.quote blockquote { font-family: var(--font-heading, serif); font-size: clamp(1.7rem, 3.4vw, 3rem); line-height: 1.14; margin: 0 0 24px; }
.quote cite { font-style: normal; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #6e6e6e); }

.usp { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 20px; text-align: center; }
.usp__item svg { margin: 0 auto 14px; }
.usp__item h3 { font-family: var(--font-body, sans-serif); font-size: 14px; font-weight: 500; margin: 0 0 6px; }
.usp__item p { font-size: 13px; color: var(--muted, #6e6e6e); margin: 0; }
@media (min-width: 750px) { .usp { grid-template-columns: repeat(4, 1fr); gap: 36px; } }

/* Contact */
.contact { display: grid; gap: clamp(32px, 5vw, 64px); align-items: start; }
.contact__row { display: grid; gap: 0 18px; }
.contact__optional { text-transform: none; letter-spacing: 0; opacity: .7; }
.contact__fields .button { margin-top: 6px; }
.contact__aside { display: grid; gap: 26px; align-content: start; }
.contact__image { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius, 0); }
/* The icon rides with the label rather than in its own column, so rows with and
   without an icon still start at the same left edge. */
.contact__detail-label { display: flex; align-items: center; gap: 8px; }
.contact__detail-label svg { opacity: .5; flex: none; }
.contact__detail .eyebrow { margin: 0 0 6px; }
.contact__detail .rte p { margin: 0; }
.contact__detail + .contact__detail { border-top: 1px solid var(--line, #e5e5e5); padding-top: 26px; }
@media (min-width: 900px) {
  .contact--details, .contact--image { grid-template-columns: 1.15fr .85fr; }
  .contact__row { grid-template-columns: 1fr 1fr; }
}

.newsletter { max-width: 520px; margin-inline: auto; text-align: center; }
.newsletter form { display: flex; gap: 8px; margin-top: 26px; }
.newsletter input { flex: 1; }

/* ==========================================================================
   Product page
   ========================================================================== */

.product { display: grid; grid-template-columns: 1fr; gap: 0; }
.media { display: grid; gap: 4px; }
/* Stacked, the thumbnails belong under the main image. The DOM keeps them
   first so keyboard focus reaches the picker early; the wide layout below
   places both by grid area, where order has no effect. */
.media__main { order: 1; }
.media__thumbs { order: 2; }
.media__main { position: relative; overflow: hidden; background: var(--brand-soft, #f5f5f5); }
.media__viewport { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.media__viewport::-webkit-scrollbar { display: none; }
.media__slide { flex: 0 0 100%; scroll-snap-align: center; }
.media__slide img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.media__thumbs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.media__thumbs::-webkit-scrollbar { display: none; }
.media__thumb { flex: none; width: 66px; padding: 0; cursor: pointer; border: 0; background: none; overflow: hidden; opacity: .45; transition: opacity .2s; }
.media__thumb img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.media__thumb[aria-current='true'] { opacity: 1; }

.pinfo { display: grid; gap: 20px; align-content: start; padding: calc(var(--pt, 40px) * var(--space-k) * var(--space-scale)) max(var(--gutter, 0px), 22px) calc(var(--pb, 56px) * var(--space-k) * var(--space-scale)); }
.pinfo__rating { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted, #6e6e6e); margin-top: -8px; }
.pinfo__stars { display: inline-flex; gap: 2px; color: #c8952f; }
.pinfo__title { margin: 0; font-size: calc(clamp(2rem, 1.4rem + 2.2vw, 3.2rem) * var(--heading-scale, 1)); }
.pinfo__price { font-size: 1.05rem; }
.pinfo__desc { color: var(--muted, #6e6e6e); }

.opt { display: grid; gap: 12px; }
.opt__label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #6e6e6e); }
.opt__label b { color: var(--ink, #000); font-weight: 400; letter-spacing: 0; text-transform: none; margin-left: 8px; }
.opt__values { display: flex; flex-wrap: wrap; gap: 8px; }
.opt__values input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt__values label { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; min-width: 52px; padding: 12px 20px; font-size: 14px; border: 1px solid var(--line, #e5e5e5); border-radius: var(--btn-radius, 40px); transition: border-color .15s, background .15s, color .15s; }
.opt__values input:checked + label { border-color: var(--ink, #000); background: var(--ink, #000); color: var(--bg, #fff); }
.opt__values input:focus-visible + label { outline: 2px solid var(--ink, #000); outline-offset: 2px; }
.opt__values input:disabled + label { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.opt--swatch label { min-width: 0; width: 36px; height: 36px; padding: 0; border-radius: 50%; }
.opt--swatch input:checked + label { box-shadow: 0 0 0 1px var(--bg,#fff), 0 0 0 2.5px var(--ink, #000); background: none; }

.qty-row { display: flex; gap: 10px; align-items: stretch; }
.qty-row .qty { border: 1px solid var(--line, #e5e5e5); border-radius: var(--btn-radius, 40px); margin: 0; }
.acc { border-top: 1px solid var(--line, #e5e5e5); }
.acc details { border-bottom: 1px solid var(--line, #e5e5e5); }
.acc summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 2px; cursor: pointer; list-style: none; font-size: 14px; }
.acc summary::-webkit-details-marker { display: none; }
.acc__sign { position: relative; flex: none; width: 12px; height: 12px; }
.acc__sign::before, .acc__sign::after { content: ''; position: absolute; background: currentColor; transition: transform .25s var(--ease); }
.acc__sign::before { top: 5px; left: 0; width: 12px; height: 1px; }
.acc__sign::after { left: 5px; top: 0; width: 1px; height: 12px; }
.acc details[open] .acc__sign::after { transform: scaleY(0); }
.acc__body { padding: 0 0 24px; color: var(--muted, #6e6e6e); font-size: 14.5px; max-width: 560px; }

@media (min-width: 700px) { .media__slide img { aspect-ratio: 3 / 4; } }
@media (min-width: 900px) {
  .product { grid-template-columns: 1.25fr 1fr; }
  .product__info { position: sticky; top: 0; align-self: start; }
  .media { grid-template-columns: 74px 1fr; grid-template-areas: 'thumbs main'; padding: 4px; }
  .media__thumbs { grid-area: thumbs; flex-direction: column; overflow-y: auto; max-height: 90vh; }
  .media__main { grid-area: main; }
}

/* ==========================================================================
   Collection toolbar, cart, footer
   ========================================================================== */

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 40px; border-bottom: 1px solid var(--line, #e5e5e5); }
.toolbar__count { font-size: 13px; color: var(--muted, #6e6e6e); }
.toolbar select { width: auto; min-width: 200px; padding: 10px 44px 10px 18px; font-size: 14px; border-color: var(--line, #e5e5e5); }

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 64px; list-style: none; padding: 0; }
.pagination a, .pagination span { display: grid; place-items: center; min-width: 42px; height: 42px; border: 1px solid transparent; border-radius: 100px; text-decoration: none; font-size: 14px; }
.pagination a:hover { border-color: var(--line, #e5e5e5); }
.pagination [aria-current] { border-color: var(--ink, #000); }

.cart-drawer { position: fixed; inset: 0; z-index: 70; visibility: hidden; pointer-events: none; }
.cart-drawer.is-open { visibility: visible; pointer-events: auto; }
.cart-drawer__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.4); opacity: 0; transition: opacity .3s var(--ease); }
.cart-drawer.is-open .cart-drawer__overlay { opacity: 1; }
.cart-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--bg, #fff); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .36s var(--ease); }
.cart-drawer.is-open .cart-drawer__panel { transform: none; }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line, #e5e5e5); }
.cart-drawer__head h2 { margin: 0; font-size: 1.4rem; }
.cart-drawer__items { flex: 1; overflow-y: auto; padding: 22px 24px; }
.cart-drawer__gift { border-top: 1px solid var(--line, #e5e5e5); padding: 18px 24px; }
.cart-drawer__gift[hidden] { display: none; }
.cart-drawer__gift.is-busy { opacity: .5; pointer-events: none; }
.gift__head { margin: 0; font-family: var(--font-body, sans-serif); font-size: 13px; font-weight: 500; }
.gift__note { margin: 3px 0 12px; font-size: 12.5px; color: var(--muted, #6e6e6e); }
.gift__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* Same overlay treatment as the category cards: the name sits on the image over
   a gradient, not underneath it. */
.gift__opt {
  display: block; padding: 0; cursor: pointer;
  border: 0; background: none; font: inherit; color: inherit;
}
.gift__img {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 1/1; border-radius: 12px; background: var(--brand-soft, #f5f5f5);
}
.gift__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gift__img--none { border: 1px dashed var(--line, #e5e5e5); background: none; }
.gift__scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 78%; z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0)    0%,
    rgba(0, 0, 0, .015) 14%,
    rgba(0, 0, 0, .05)  27%,
    rgba(0, 0, 0, .10)  38%,
    rgba(0, 0, 0, .17)  48%,
    rgba(0, 0, 0, .26)  58%,
    rgba(0, 0, 0, .36)  67%,
    rgba(0, 0, 0, .47)  76%,
    rgba(0, 0, 0, .57)  84%,
    rgba(0, 0, 0, .66)  92%,
    rgba(0, 0, 0, .74)  100%);
}
.gift__name {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 8px 8px 9px; text-align: center;
  font-family: var(--font-body, sans-serif); font-size: 11.5px; line-height: 1.25;
  color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
}
/* A ring inside the image, so choosing one shifts nothing */
.gift__img::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 0 var(--ink, #000);
  transition: box-shadow .18s var(--ease);
}
.gift__opt:hover .gift__img::after { box-shadow: inset 0 0 0 1px var(--ink, #000); }
.gift__opt.is-on .gift__img::after { box-shadow: inset 0 0 0 3px var(--ink, #000); }
.gift__opt:focus-visible { outline: 2px solid var(--ink, #000); outline-offset: 3px; }
.gift__img--none .gift__name { color: var(--ink, #000); text-shadow: none; }
.gift__img--none .gift__scrim { display: none; }
.line-item--gift .line-item__price { color: var(--success, #1f7a4a); }

.cart-drawer__foot { border-top: 1px solid var(--line, #e5e5e5); padding: 22px 24px calc(22px + env(safe-area-inset-bottom)); display: grid; gap: 14px; }
.shipbar { font-size: 12.5px; }
.shipbar__track { height: 2px; background: var(--line, #e5e5e5); overflow: hidden; margin-top: 10px; }
.shipbar__fill { height: 100%; background: var(--ink, #000); transition: width .5s var(--ease); }
.line-item { display: grid; grid-template-columns: 82px 1fr auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line, #e5e5e5); }
.line-item:first-child { padding-top: 0; }
.line-item:last-child { border-bottom: 0; }
.line-item__img { width: 82px; aspect-ratio: 3/4; object-fit: cover; background: var(--brand-soft, #f5f5f5); }
/* Square in the drawer on a phone: the row is short, and a 3:4 image made it
   taller than its own text. */
@media (max-width: 749px) { .line-item__img { aspect-ratio: 1/1; } }
.line-item__title { font-size: 14px; text-decoration: none; display: block; }
.line-item__variant { font-size: 13px; color: var(--muted, #6e6e6e); }
.line-item__price { text-align: right; font-size: 14px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line, #e5e5e5); border-radius: 100px; margin-top: 10px; }
.qty button { width: 32px; height: 32px; border: 0; background: none; cursor: pointer; font-size: 15px; color: inherit; border-radius: 50%; }
.qty input { width: 32px; border: 0; text-align: center; padding: 0; font: inherit; font-size: 14px; background: none; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-empty { text-align: center; padding: 64px 0; color: var(--muted, #6e6e6e); }
.cart-totals { display: flex; justify-content: space-between; font-size: 1.05rem; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #6e6e6e); padding-bottom: 14px; border-bottom: 1px solid var(--line, #e5e5e5); font-weight: 500; }
.cart-table td { padding: 22px 0; border-bottom: 1px solid var(--line, #e5e5e5); vertical-align: top; }

.footer { border-top: 1px solid var(--line, #e5e5e5); padding-top: calc(var(--pt, 72px) * var(--space-k) * var(--space-scale)); padding-bottom: calc(var(--pb, 32px) * var(--space-k) * var(--space-scale)); }
.footer__grid { display: grid; gap: 40px; }
.footer h3 { font-family: var(--font-body, sans-serif); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; color: var(--muted, #6e6e6e); font-weight: 500; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer a { text-decoration: none; font-size: 14px; }
.footer a:hover { opacity: .6; }
.footer__bottom { border-top: 1px solid var(--line, #e5e5e5); margin-top: 48px; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 12.5px; color: var(--muted, #6e6e6e); align-items: center; }
.social { display: flex; gap: 16px; }
.auth-card { max-width: 460px; margin: 0 auto; }
@media (min-width: 750px) { .footer__grid { grid-template-columns: 1.8fr 1fr 1fr 1.4fr; gap: 52px; } }


/* ==========================================================================
   Scroll reveal
   Elements start hidden only when JS is running, so a failed script or a
   crawler still sees fully visible content.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .85s var(--ease), transform .85s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }

  .reveal-ready [data-reveal='fade'] { transform: none; }

  /* Images bloom out of their frame rather than sliding */
  .reveal-ready [data-reveal-img] { overflow: hidden; }
  .reveal-ready [data-reveal-img] img,
  .reveal-ready [data-reveal-img] svg { transform: scale(1.07); transition: transform 1.4s var(--ease); }
  .reveal-ready [data-reveal-img].is-in img,
  .reveal-ready [data-reveal-img].is-in svg { transform: none; }

  /* Display headings rise a touch further, which reads as deliberate */
  .reveal-ready h1[data-reveal], .reveal-ready h2[data-reveal] { transform: translateY(34px); }
}


/* Show/hide per device. The breakpoint is the theme's usual 750px. */
@media (min-width: 750px) { .hide-on-desktop { display: none; } }
@media (max-width: 749px) { .hide-on-mobile { display: none; } }

/* Category row: tinted cards with a cut-out image and a label underneath */
.chips { display: grid; grid-template-columns: repeat(var(--chip-cols, 6), minmax(0, 1fr)); gap: var(--chip-gap, 24px); }
/* On a wide screen the row would otherwise stretch each card across a fifth of
   1600px. Cap the card instead and centre the row, so the extra width becomes
   air on both sides rather than oversized cards. */
@media (min-width: 750px) {
  .chips {
    grid-template-columns: repeat(var(--chip-cols, 6), minmax(0, var(--chip-max, 200px)));
    justify-content: center;
  }
}
.chip {
  display: block; text-decoration: none; color: inherit;
  background: var(--chip-bg, #f4f4f5);
  border-radius: var(--chip-radius, 16px);
  padding: var(--chip-pad, 18px);
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s;
}
.chip:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.07); }
.chip__media { display: block; position: relative; overflow: hidden; border-radius: max(0px, calc(var(--chip-radius, 16px) - var(--chip-pad, 0px))); }
.chips--square .chip__media { aspect-ratio: 1 / 1; }
.chips--tall   .chip__media { aspect-ratio: 4 / 5; }
.chips--wide   .chip__media { aspect-ratio: 4 / 3; }
.chip__media img, .chip__media svg { width: 100%; height: 100%; display: block; }
.chips--fit-contain .chip__media img { object-fit: contain; }
.chips--fit-cover   .chip__media img { object-fit: cover; }
.chip__title {
  display: block; margin-top: 14px;
  font-family: var(--font-body, sans-serif); font-weight: 600;
  font-size: clamp(13px, 1vw, 15px); line-height: 1.3;
  text-align: var(--chip-align, center);
  color: var(--chip-ink, inherit);
}
/* Title on the image: same scrim + text-shadow the product cards use */
.chip__scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 78%;
  /* Many stops on an eased curve rather than four on a steep one: same
     darkness under the text, but no visible edge where the fade starts. */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0)    0%,
    rgba(0, 0, 0, .015) 14%,
    rgba(0, 0, 0, .05)  27%,
    rgba(0, 0, 0, .10)  38%,
    rgba(0, 0, 0, .17)  48%,
    rgba(0, 0, 0, .26)  58%,
    rgba(0, 0, 0, .36)  67%,
    rgba(0, 0, 0, .47)  76%,
    rgba(0, 0, 0, .57)  84%,
    rgba(0, 0, 0, .66)  92%,
    rgba(0, 0, 0, .74)  100%);
  pointer-events: none; z-index: 1;
}
.chip__title--on {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  margin-top: 0; padding: clamp(10px, 1.2vw, 16px);
  color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
}
/* Seven cards will not fit a phone in a grid, so the default is a swipe rail
   that bleeds to both screen edges. */
@media (max-width: 749px) {
  .chips--mscroll {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    /* Bleed to the screen edges, then set the inset from the inside, so the
       amount is adjustable without the rail overflowing the page. */
    margin-inline: calc(-1 * max(var(--gutter, 0px), 20px));
    padding-inline: var(--chip-edge, 20px);
    /* Without this the snap points sit on the padding box, so the first card
       snaps flush to the screen edge and the inset never shows. */
    scroll-padding-inline: var(--chip-edge, 20px);
    /* overflow-x: auto makes the Y axis clip too, which cuts the card shadow
       off flat at the top and bottom of the rail. Open up room inside the
       scroll box and take the same amount back off the outside, so the shadow
       has somewhere to fall without changing where the row sits. */
    padding-block: var(--chip-shadow-room, 40px);
    margin-block: calc(-1 * var(--chip-shadow-room, 40px));
  }
  .chips--mscroll::-webkit-scrollbar { display: none; }
  .chips--mscroll .chip { flex: none; width: var(--chip-msize, 44vw); scroll-snap-align: start; }
  .chips--mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Two-panel hero */
.hero--duo { display: grid; gap: 2px; }
.hero--duo-side  { grid-template-columns: 1fr 1fr; }
.hero--duo-stack { grid-template-columns: 1fr; }
.hero__panel { position: relative; overflow: hidden; display: block; text-decoration: none; background: var(--brand-soft, #f5f5f5); }
.hero__panel img, .hero__panel svg {
  width: 100%;
  object-fit: cover;
  height: auto;
  aspect-ratio: var(--duo-ar, 5 / 4);
  min-height: var(--duo-min, 460px);
  max-height: var(--duo-max, 820px);
}
.hero--duo-h-short  { --duo-ar: 3 / 2; --duo-min: 380px; --duo-max: 660px; }
.hero--duo-h-medium { --duo-ar: 5 / 4; --duo-min: 460px; --duo-max: 820px; }
.hero--duo-h-tall   { --duo-ar: 1 / 1; --duo-min: 560px; --duo-max: 960px; }
/* Two panels in a phone-width column need smaller type to stay readable */
.hero--duo-side .hero__panel-body { padding: clamp(14px, 3.4vw, 56px); }
.hero--duo-side .hero__panel-body h2 { font-size: clamp(1.15rem, 5vw, 3.2rem); margin-bottom: 7px; }
.hero--duo-side .hero__panel-cta { font-size: clamp(11px, 2.8vw, 14px); }
/* Side by side on a phone gives each panel roughly 187px. A fixed viewport
   height there makes them narrow towers, so tie height to width instead. */
@media (max-width: 749px) {
  .hero--duo-side.hero--duo-h-short  { --duo-ar: 4 / 5; --duo-min: 0px; --duo-max: none; }
  .hero--duo-side.hero--duo-h-medium { --duo-ar: 5 / 8; --duo-min: 0px; --duo-max: none; }
  .hero--duo-side.hero--duo-h-tall   { --duo-ar: 1 / 2; --duo-min: 0px; --duo-max: none; }
  .hero--duo-stack.hero--duo-h-short  { --duo-ar: 4 / 3; --duo-min: 0px; --duo-max: none; }
  .hero--duo-stack.hero--duo-h-medium { --duo-ar: 1 / 1; --duo-min: 0px; --duo-max: none; }
  .hero--duo-stack.hero--duo-h-tall   { --duo-ar: 4 / 5; --duo-min: 0px; --duo-max: none; }
}
.hero__panel-scrim { position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,.55)); pointer-events: none; }
.hero__panel-body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(26px, 3.4vw, 56px); color: #fff; }
.hero__panel-body h2 { color: #fff; margin: 0 0 12px; font-size: clamp(1.9rem, 3.4vw, 3.2rem); }
.hero__panel-cta { font-family: var(--font-body, sans-serif); font-size: 14px; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
@media (min-width: 750px) { .hero--duo { grid-template-columns: 1fr 1fr; } }

/* Sticky add to cart */
.sticky-atc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--header-bg-flat, rgba(255, 255, 255, .82)); border-top: 1px solid rgba(0, 0, 0, .06);
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  transform: translateY(110%); transition: transform .34s var(--ease);
}
/* Same frosted material as the header, so the bar reads as part of the brand chrome. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .sticky-atc {
    background: var(--header-bg, rgba(255, 255, 255, .45));
    -webkit-backdrop-filter: blur(var(--header-blur, 14px)) saturate(1.5);
    backdrop-filter: blur(var(--header-blur, 14px)) saturate(1.5);
  }
}
.sticky-atc.is-visible { transform: none; }
.sticky-atc__inner { display: flex; align-items: center; gap: 16px; }
.sticky-atc__img { width: 46px; aspect-ratio: 1/1; object-fit: cover; flex: none; border-radius: 10px; }
.sticky-atc__info { flex: 1; min-width: 0; }
.sticky-atc__title { margin: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-atc__price { margin: 2px 0 0; font-size: 13px; color: var(--muted, #6e6e6e); }
.sticky-atc form { flex: none; }
.sticky-atc .button { padding: 13px 30px; }
@media (min-width: 600px) { .sticky-atc__img { width: 52px; border-radius: 12px; } }
@media (prefers-reduced-motion: reduce) { .sticky-atc { transition: none; } }

/* Guarantee */
/* Outlined numeral behind the heading. Transparent fill plus a text stroke,
   so it reads as a watermark rather than a second headline. */
.guarantee__head { position: relative; }
.guarantee__head > * { position: relative; z-index: 1; }
.guarantee__mark {
  position: absolute; z-index: 0; left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% + var(--mark-shift, 0px)));
  font-family: var(--font-heading, sans-serif);
  font-weight: 600; line-height: .78; letter-spacing: -.02em;
  font-size: min(var(--mark-size, 260px), 46vw);
  white-space: nowrap; pointer-events: none; user-select: none;
  color: rgba(0, 0, 0, var(--mark-alpha, .12));
}
@supports (-webkit-text-stroke: 1px currentColor) {
  .guarantee__mark {
    color: transparent;
    -webkit-text-stroke: var(--mark-stroke, 2px) rgba(0, 0, 0, var(--mark-alpha, .12));
  }
}
.section--invert .guarantee__mark { color: rgba(255, 255, 255, var(--mark-alpha, .12)); }
@supports (-webkit-text-stroke: 1px currentColor) {
  .section--invert .guarantee__mark {
    color: transparent;
    -webkit-text-stroke: var(--mark-stroke, 2px) rgba(255, 255, 255, var(--mark-alpha, .12));
  }
}
.guarantee__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 20px; margin-top: 44px; }
.guarantee__item { display: grid; justify-items: center; gap: 10px; font-size: 13.5px; }
.guarantee__item svg { opacity: .75; }
@media (min-width: 750px) { .guarantee__row { grid-template-columns: repeat(4, 1fr); gap: 32px; } }

/* Bundle builder */
.bundle__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
.bcard { position: relative; }
.bcard__pick {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  text-align: left; cursor: pointer; color: inherit; font: inherit;
}
.bcard__img {
  display: block; position: relative; overflow: hidden;
  background: var(--brand-soft, #f5f5f5); border-radius: var(--radius, 0);
}
.bcard__img img, .bcard__img svg {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block;
  transition: transform .9s var(--ease);
}
.bcard__pick:hover .bcard__img img { transform: scale(1.04); }
/* A ring rather than a border, so nothing shifts when it is selected */
.bcard__img::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 0 var(--ink, #000);
  transition: box-shadow .2s var(--ease);
}
.bcard.is-chosen .bcard__img::after { box-shadow: inset 0 0 0 3px var(--ink, #000); }
/* Position badge, stays for as long as the piece is in the set */
.bcard__badge {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  padding: 6px 12px; border-radius: 100px;
  background: var(--ink, #000); color: var(--bg, #fff);
  font-family: var(--font-body, sans-serif); font-size: 11px; letter-spacing: .04em;
  white-space: nowrap;
  transform: scale(.6); opacity: 0;
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.bcard.is-chosen .bcard__badge { transform: none; opacity: 1; }

/* The confirmation, using the same frosted material as the header bar. Nothing
   above it has a backdrop-filter, so its blur samples the image as intended. */
.bcard__flash {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  padding: 14px; text-align: center; pointer-events: none;
  background: var(--header-bg-flat, rgba(255, 255, 255, .82));
  opacity: 0; transition: opacity .28s var(--ease);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .bcard__flash {
    background: var(--header-bg, rgba(255, 255, 255, .45));
    -webkit-backdrop-filter: blur(var(--header-blur, 14px)) saturate(1.5);
    backdrop-filter: blur(var(--header-blur, 14px)) saturate(1.5);
  }
}
.bcard.is-flashing .bcard__flash { opacity: 1; }
.bcard__flash-text {
  font-family: var(--font-body, sans-serif); font-size: 13px; line-height: 1.35;
  color: var(--ink, #000);
  transform: translateY(6px); transition: transform .28s var(--ease);
}
.bcard.is-flashing .bcard__flash-text { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .bcard__flash, .bcard__flash-text, .bcard__badge { transition: none; }
}
.bcard__title { display: block; margin-top: 12px; font-size: 14px; line-height: 1.3; }
.bcard__price { display: block; margin-top: 3px; font-size: 13px; color: var(--muted, #6e6e6e); }
.bcard__variant { margin-top: 10px; padding: 9px 34px 9px 14px; font-size: 13px; background-position: right 14px center; }
.bcard.is-muted { opacity: .42; }
.bcard--out { opacity: .38; }
.bcard--out .bcard__pick { cursor: not-allowed; }
.bcard__pick:focus-visible { outline: 2px solid var(--ink, #000); outline-offset: 4px; }

.bundle__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 24px; margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: 24px; border-top: 1px solid var(--line, #e5e5e5);
}
.bundle__count { margin: 0; font-size: 14px; }
.bundle__prices { margin: 6px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
/* display:flex here beats the [hidden] attribute's display:none, so the
   stale price stayed on screen after everything was deselected. */
.bundle__prices[hidden], .bundle__prices s[hidden] { display: none; }
.bundle__prices s { color: var(--muted, #6e6e6e); font-size: 14px; }
.bundle__prices b { font-size: 1.15rem; font-weight: 500; }
.bundle__save { font-size: 13px; color: var(--muted, #6e6e6e); }
.bundle.is-full .bundle__save { color: var(--success, #1f7a4a); }
.bundle__note { margin: 16px 0 0; font-size: 12.5px; color: var(--muted, #6e6e6e); }
@media (min-width: 750px) {
  .bundle__grid { gap: 32px 18px; }
  .bundle__grid--3 { grid-template-columns: repeat(3, 1fr); }
  .bundle__grid--4 { grid-template-columns: repeat(4, 1fr); }
  .bundle__grid--5 { grid-template-columns: repeat(5, 1fr); }
  .bundle__grid--6 { grid-template-columns: repeat(6, 1fr); }
}
/* The bar is the whole point of the section, so keep it in reach on a phone. */
@media (max-width: 749px) {
  .bundle__bar {
    position: sticky; bottom: 0; z-index: 5;
    background: var(--bg, #fff); margin-inline: calc(-1 * max(var(--gutter, 0px), 20px));
    padding: 16px max(var(--gutter, 0px), 20px) calc(16px + env(safe-area-inset-bottom));
  }
  .section--soft .bundle__bar { background: var(--brand-soft, #f5f5f5); }
  .bundle__bar .button { flex: 1; }
}

/* Reviews */
.reviews__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.5vw, 48px); }
.reviews__head > *:first-child { flex: 1 1 auto; min-width: 0; }
.reviews__head h2 { margin: 0; }
.reviews__score { display: grid; justify-items: start; gap: 3px; }
.reviews__score-num { font-family: var(--font-heading, sans-serif); font-size: 2.4rem; line-height: 1; letter-spacing: -0.03em; }
.reviews__stars { display: inline-flex; gap: 2px; color: #c8952f; }
.reviews__score-text { font-size: 12.5px; color: var(--muted, #6e6e6e); }

.reviews {
  display: grid; grid-auto-flow: column; grid-auto-columns: 84%;
  gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 4px;
}
.reviews::-webkit-scrollbar { display: none; }
.review { margin: 0; scroll-snap-align: start; display: grid; gap: 0; align-content: start; }
.review__img { display: block; overflow: hidden; background: var(--brand-soft, #f5f5f5); }
.review__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease); }
.review:hover .review__img img { transform: scale(1.04); }
.review__body { display: grid; gap: 12px; padding: 20px 2px 0; }
.review__stars { display: inline-flex; gap: 2px; color: #c8952f; }
.review__text {
  margin: 0; font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); line-height: 1.38; letter-spacing: -0.022em;
}
.review__by { display: grid; gap: 3px; font-size: 13px; }
.review__name { font-weight: 500; }
.review__meta { color: var(--muted, #6e6e6e); display: inline-flex; align-items: center; gap: 5px; }
.review__meta svg { color: var(--success, #1f7a4a); }
@media (min-width: 750px) {
  .reviews { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; gap: 32px 24px; }
  .reviews__score { justify-items: end; text-align: right; }
}

/* Buy-box benefits */
.pbenefits { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 18px; }
.pbenefits li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.3; }
.pbenefits svg { flex: none; opacity: .7; }
.pinfo__note { font-size: 12.5px; color: var(--muted, #6e6e6e); margin: 0; text-align: center; }

/* ==========================================================================
   Image sections
   ========================================================================== */

/* Gallery grid */
/* Instagram */
.ig-handle {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  text-decoration: none; font-family: var(--font-body, sans-serif); font-size: 15px;
}
.ig-handle span { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.ig-handle:hover { opacity: .6; }
.ig-grid { display: grid; grid-template-columns: repeat(var(--ig-cols, 4), 1fr); gap: var(--ig-gap, 4px); }
.ig-item {
  position: relative; display: block; overflow: hidden;
  background: var(--brand-soft, #f5f5f5); border-radius: var(--radius, 0);
}
.ig-item img, .ig-item svg {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  transition: transform 1.1s var(--ease), opacity .4s var(--ease);
}
.ig-item:hover img { transform: scale(1.05); }
.ig-item__mark {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; background: rgba(0, 0, 0, .28);
  opacity: 0; transition: opacity .3s var(--ease); pointer-events: none;
}
.ig-item:hover .ig-item__mark, .ig-item:focus-visible .ig-item__mark { opacity: 1; }
/* No hover on a phone, so the mark would never show — keep it hidden there. */
@media (hover: none) { .ig-item__mark { display: none; } }
@media (max-width: 749px) {
  .ig-grid--m2 { grid-template-columns: repeat(2, 1fr); }
  .ig-grid--m3 { grid-template-columns: repeat(3, 1fr); }
}

.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gallery-gap, 4px); }
.gtile { position: relative; display: block; overflow: hidden; background: var(--brand-soft, #f5f5f5); text-decoration: none; }
.gtile img, .gtile svg { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
a.gtile:hover img { transform: scale(1.045); }
.gtile--tall img      { aspect-ratio: 2 / 3; }
.gtile--portrait img  { aspect-ratio: 3 / 4; }
.gtile--square img    { aspect-ratio: 1 / 1; }
.gtile--landscape img { aspect-ratio: 4 / 3; }
.gtile--natural img   { aspect-ratio: auto; }
.gtile__caption--over {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(16px, 2vw, 26px);
  color: #fff; font-size: 14px; z-index: 2;
  background: linear-gradient(transparent, rgba(0,0,0,.06) 40%, rgba(0,0,0,.58));
}
.gtile__caption--under { display: block; padding: 12px 2px 0; font-size: 13px; color: var(--muted, #6e6e6e); }
@media (min-width: 750px) {
  .gallery-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .gtile--wide { grid-column: span 2; }
}

/* Full-bleed image banner */
.banner { position: relative; }
.banner__media { position: relative; overflow: hidden; }
.banner__media img, .banner__media svg { width: 100%; object-fit: cover; }
.banner--short  .banner__media img { height: clamp(280px, 42vh, 460px); }
.banner--medium .banner__media img { height: clamp(380px, 62vh, 660px); }
.banner--tall   .banner__media img { height: clamp(480px, 82vh, 860px); }
.banner__overlay, .banner__scrim { position: absolute; inset: 0; pointer-events: none; }
.banner__scrim { background: linear-gradient(transparent 40%, rgba(0,0,0,.5)); }
.banner__content { position: absolute; inset: 0; display: grid; align-items: end; }
.banner__content > .page-width { width: 100%; padding-top: calc(var(--pt, 56px) * var(--space-k) * var(--space-scale)); padding-bottom: calc(var(--pb, 56px) * var(--space-k) * var(--space-scale)); }
.banner__box { max-width: 560px; color: #fff; }
.banner__box--dark { color: var(--ink, #000); }
.banner__box h2 { color: inherit; margin: 0 0 16px; }
.banner__box p { font-family: var(--font-body, sans-serif); font-size: 1rem; max-width: 420px; margin-bottom: 26px; opacity: .92; }
.banner--center .banner__box { margin-inline: auto; text-align: center; }
.banner--center .banner__box p { margin-inline: auto; }
.banner--right .banner__box { margin-left: auto; }

/* Horizontal image rail */
.rail-wrap { position: relative; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc(var(--rail-size, 70) * 1%);
  gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 max(var(--gutter, 0px), 20px);
}
.rail::-webkit-scrollbar { display: none; }
.rail__item { position: relative; scroll-snap-align: start; overflow: hidden; display: block; text-decoration: none; background: var(--brand-soft, #f5f5f5); }
.rail__item img, .rail__item svg { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
a.rail__item:hover img { transform: scale(1.045); }
.rail__item--portrait img  { aspect-ratio: 3 / 4; }
.rail__item--square img    { aspect-ratio: 1 / 1; }
.rail__item--landscape img { aspect-ratio: 4 / 3; }
.rail__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(16px, 2vw, 26px);
  color: #fff; font-size: 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.06) 40%, rgba(0,0,0,.58));
}
@media (min-width: 750px) { .rail { grid-auto-columns: calc(var(--rail-size, 70) * 0.48%); gap: 6px; } }

/* ==========================================================================
   Auto-scrolling rails
   Same engine as the announcement marquee: the track is cloned until it is
   wider than the viewport, then shifted by exactly one group.
   ========================================================================== */

.rail-auto, .reviews-auto { overflow: hidden; }
.rail-auto__track, .reviews-auto__track {
  display: flex; width: max-content;
  animation: marquee-shift var(--marquee-duration, 60s) linear infinite;
}
.rail-auto:hover .rail-auto__track,
.reviews-auto:hover .reviews-auto__track,
.rail-auto:focus-within .rail-auto__track,
.reviews-auto:focus-within .reviews-auto__track { animation-play-state: paused; }

.rail-auto__group { display: flex; flex: none; gap: 4px; padding-right: 4px; }
.rail-auto .rail__item { flex: none; width: calc(var(--rail-size, 70) * 1vw); }

.reviews-auto__group { display: flex; flex: none; gap: 24px; padding-right: 24px; align-items: start; }
.reviews-auto .review { flex: none; width: calc(var(--review-size, 70) * 1vw); }

@media (min-width: 750px) {
  .rail-auto .rail__item { width: calc(var(--rail-size, 70) * 0.48vw); }
  .reviews-auto .review { width: calc(var(--review-size, 70) * 0.46vw); }
}

@media (prefers-reduced-motion: reduce) {
  .rail-auto, .reviews-auto { overflow-x: auto; scrollbar-width: none; }
  .rail-auto::-webkit-scrollbar, .reviews-auto::-webkit-scrollbar { display: none; }
  .rail-auto__track, .reviews-auto__track { animation: none; }
  .rail-auto__group[aria-hidden='true'], .reviews-auto__group[aria-hidden='true'] { display: none; }
}


/* (Phone scaling now lives in --space-k, declared with the brand tokens.) */


/* ---------- collection filter: glass pill + frosted drawer ---------- */

/* A black pill set in a ring of the header's frosted glass. The ring carries
   the blur; the core is solid so the label stays crisp on any background. */
.filter-pill {
  position: relative; display: inline-flex; padding: 6px; border: 0; cursor: pointer;
  border-radius: 999px; font: inherit; color: inherit;
  background: #ececec;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .09),
    inset 0 1px 1px rgba(255, 255, 255, .95),
    inset 0 -2px 3px rgba(0, 0, 0, .06),
    0 6px 18px rgba(0, 0, 0, .08);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .filter-pill {
    background: linear-gradient(180deg, rgba(248, 248, 248, .72), rgba(214, 214, 214, .5));
    -webkit-backdrop-filter: blur(var(--header-blur, 14px)) saturate(1.5);
    backdrop-filter: blur(var(--header-blur, 14px)) saturate(1.5);
  }
}
.filter-pill__core {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 30px; border-radius: 999px;
  background: var(--btn, #000); color: var(--btn-ink, #fff);
  font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: .01em;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.filter-pill:hover .filter-pill__core { background: #222; }
.filter-pill:active .filter-pill__core { transform: scale(.97); }
.filter-pill:focus-visible { outline: 2px solid var(--ink, #000); outline-offset: 3px; }
.filter-pill__count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: #fff; color: #000; font-size: 11.5px; font-weight: 600;
}

.filter-chips { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -24px 0 32px; padding: 0; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 14px;
  border: 1px solid var(--line, #e5e5e5); border-radius: 999px;
  font-size: 13px; color: var(--ink, #000); text-decoration: none;
  transition: border-color .2s var(--ease);
}
.filter-chip:hover { border-color: var(--ink, #000); }
.filter-chips__clear { font-size: 13px; color: var(--muted, #6e6e6e); margin-left: 4px; }

.filter-drawer { position: fixed; inset: 0; z-index: 70; visibility: hidden; pointer-events: none; }
.filter-drawer.is-open { visibility: visible; pointer-events: auto; }
.filter-drawer__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .25); opacity: 0; transition: opacity .3s var(--ease); }
.filter-drawer.is-open .filter-drawer__overlay { opacity: 1; }
.filter-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); margin: 0;
  display: flex; flex-direction: column;
  background: var(--header-bg-flat, rgba(255, 255, 255, .82)); color: var(--ink, #000);
  transform: translateX(100%); transition: transform .36s var(--ease);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .filter-drawer__panel {
    background: var(--header-bg-flat, rgba(255, 255, 255, .78));
    -webkit-backdrop-filter: blur(var(--header-blur, 14px)) saturate(1.5);
    backdrop-filter: blur(var(--header-blur, 14px)) saturate(1.5);
  }
}
.filter-drawer.is-open .filter-drawer__panel { transform: none; }
.filter-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.filter-drawer__head h2 { margin: 0; font-size: 1.4rem; }
.filter-drawer__x { display: grid; place-items: center; width: 40px; height: 40px; margin-right: -8px; border: 0; background: none; color: inherit; cursor: pointer; }
.filter-drawer__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 24px 12px; }
.filter-drawer__hint { font-size: 13px; color: var(--muted, #6e6e6e); padding: 18px 0; }

.filter-group { border-bottom: 1px solid rgba(0, 0, 0, .08); }
.filter-group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 0; list-style: none; cursor: pointer; font-size: 15px; font-weight: 500;
}
.filter-group > summary::-webkit-details-marker { display: none; }
.filter-group > summary svg { transition: transform .25s var(--ease); }
.filter-group[open] > summary svg { transform: rotate(180deg); }
.filter-group__list { display: grid; gap: 2px; padding: 0 0 16px; }

.filter-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 0; cursor: pointer; font-size: 14px; }
.filter-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.filter-opt__box {
  flex: none; width: 18px; height: 18px; border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, .35); background: rgba(255, 255, 255, .6);
  display: grid; place-items: center; transition: background .15s, border-color .15s;
}
.filter-opt__box--round { border-radius: 50%; }
.filter-opt input:checked + .filter-opt__box { background: var(--ink, #000); border-color: var(--ink, #000); }
.filter-opt input:checked + .filter-opt__box::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px;
  border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.filter-opt input:checked + .filter-opt__box--round::after { width: 6px; height: 6px; margin: 0; border: 0; border-radius: 50%; background: #fff; transform: none; }
.filter-opt input:focus-visible + .filter-opt__box { outline: 2px solid var(--ink, #000); outline-offset: 2px; }
.filter-opt__label { flex: 1; }
.filter-opt__n { font-size: 12px; color: rgba(0, 0, 0, .55); }
.filter-opt.is-empty { opacity: .4; cursor: default; }

.filter-price { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 0 18px; }
.filter-price label { display: grid; gap: 6px; font-size: 12px; color: rgba(0, 0, 0, .6); }
.filter-price input { padding: 10px 14px; font-size: 14px; background: rgba(255, 255, 255, .7); }

.filter-drawer__foot { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(0, 0, 0, .08); }
.filter-drawer__foot .button { padding-left: 16px; padding-right: 16px; }
.filter-drawer__foot .button--ghost, .filter-drawer__foot .button--ghost:hover { background: transparent; color: var(--ink, #000); }
.filter-drawer__foot .button--ghost:hover { border-color: var(--ink, #000); }

@media (prefers-reduced-motion: reduce) {
  .filter-drawer__panel, .filter-drawer__overlay, .filter-pill__core { transition: none; }
}
.filter-group > summary:focus-visible { outline-offset: -2px; border-radius: 10px; }

/* Phones: the filter pill floats at the bottom centre so it is always reachable. */
@media (max-width: 749px) {
  .toolbar .filter-pill {
    position: fixed; z-index: 50; left: 50%; transform: translateX(-50%);
    bottom: calc(18px + env(safe-area-inset-bottom));
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, .09),
      inset 0 1px 1px rgba(255, 255, 255, .95),
      inset 0 -2px 3px rgba(0, 0, 0, .06),
      0 10px 30px rgba(0, 0, 0, .18);
  }
  .toolbar .filter-pill:active .filter-pill__core { transform: scale(.96); }
}

/* Filter pill, frosted only: one glass layer with black text, no black core. */
.filter-pill { padding: 0; }
.filter-pill__core {
  padding: 13px 34px; background: transparent; color: var(--ink, #000);
}
.filter-pill:hover .filter-pill__core { background: rgba(255, 255, 255, .35); }
.filter-pill__count { background: var(--ink, #000); color: #fff; }

/* Filter pill as clear glass: little tint, a bright rim of light, barely any shadow. */
.filter-pill {
  background: rgba(255, 255, 255, .5);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .6),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(255, 255, 255, .25),
    0 0 0 .5px rgba(0, 0, 0, .06),
    0 4px 16px rgba(0, 0, 0, .08);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .filter-pill {
    background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .14));
    -webkit-backdrop-filter: blur(18px) saturate(1.8) brightness(1.08);
    backdrop-filter: blur(18px) saturate(1.8) brightness(1.08);
  }
}
.filter-pill__core { padding: 13px 32px; }
.filter-pill:hover .filter-pill__core { background: rgba(255, 255, 255, .18); }
@media (max-width: 749px) {
  .toolbar .filter-pill {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .6),
      inset 0 1px 0 rgba(255, 255, 255, .95),
      inset 0 -1px 0 rgba(255, 255, 255, .25),
      0 0 0 .5px rgba(0, 0, 0, .06),
      0 6px 20px rgba(0, 0, 0, .1);
  }
}

/* Card spacing: one value for phones, another from tablet width up (Theme settings → Layout). */
@media (min-width: 750px) { :root { --card-gap: var(--card-gap-desktop, 4px); } }

/* Sticky add to cart floats as a rounded glass bar, lifted off the bottom and sides. */
.sticky-atc {
  left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  padding: 10px 0; border-radius: 24px; border-top: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 8px 28px rgba(0, 0, 0, .12);
  transform: translateY(calc(100% + 40px));
}
.sticky-atc.is-visible { transform: none; }
.sticky-atc .page-width { padding-inline: 10px 10px; max-width: none; }
.sticky-atc__img { border-radius: 14px; }

/* Sale flag: the same frosted glass as the cart button opposite it, with the saving spelled out. */
.pcard__flag.pcard__save {
  top: 10px; left: 10px;
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px;
  border-radius: 999px; white-space: nowrap;
  font-family: var(--font-body, sans-serif); font-size: 13px; font-weight: 500; letter-spacing: .01em;
  color: var(--ink, #000); background: rgba(255, 255, 255, .9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .pcard__flag.pcard__save {
    background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
  }
}
/* Refined: smaller than the cart button and centred on it, figures only. */
.pcard__flag.pcard__save {
  top: 16px; left: 12px; height: 28px; padding: 0 11px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
}

/* ==========================================================================
   Motion polish
   Everything here sits behind the theme's Animations setting and the visitor's
   reduced-motion preference, so it can be switched off in one place.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html:not([data-animations='off']) { scroll-behavior: smooth; }

  /* Page to page: the new page fades in over the old one. The old page stays
     opaque underneath, so the header (identical on both) never dips. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: vt-in .45s cubic-bezier(.22, .61, .36, 1) both; }
  @keyframes vt-in { from { opacity: 0; } }

  /* Product cards: the photo drifts in slowly on hover, the name lifts a touch. */
  @media (hover: hover) {
    html:not([data-animations='off']) .pcard__img img { transition: opacity .45s var(--ease), transform 1.2s cubic-bezier(.16, 1, .3, 1); }
    html:not([data-animations='off']) .pcard:hover .pcard__img img,
    html:not([data-animations='off']).reveal-ready .pcard:hover [data-reveal-img].is-in img { transform: scale(1.045); }
    .pcard__overlay { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
    html:not([data-animations='off']) .pcard:hover .pcard__overlay { transform: translateY(-4px); }
    .pcard--atc-icon .pcard__atc { transition: background .25s var(--ease), color .25s var(--ease), transform .35s cubic-bezier(.34, 1.56, .64, 1); }
    html:not([data-animations='off']) .pcard--atc-icon .pcard__atc:hover { transform: scale(1.08); }
  }

  /* Buttons give under the finger. */
  html:not([data-animations='off']) :is(.button, .pcard__atc, .header__icon, .filter-chip) { transition-property: background, color, border-color, opacity, transform; transition-duration: .25s; }
  html:not([data-animations='off']) :is(.button, .pcard__atc, .header__icon):active { transform: scale(.96); }

  /* Cart icon gives a small bounce when something is added. */
  @keyframes cart-bump { 0% { transform: scale(1); } 35% { transform: scale(1.22) rotate(-6deg); } 65% { transform: scale(.94) rotate(3deg); } 100% { transform: scale(1); } }
  .header__icon.is-bumped svg { animation: cart-bump .6s cubic-bezier(.34, 1.56, .64, 1); }

  /* Dropdown columns and drawer contents arrive one after another. */
  @keyframes rise-in { from { opacity: 0; transform: translateY(8px); } }
  html:not([data-animations='off']) .nav-item--has-menu:is(:hover, :focus-within) .mega__cols,
  html:not([data-animations='off']) .nav-item--has-menu:is(:hover, :focus-within) .mega__media { animation: rise-in .4s cubic-bezier(.22, .61, .36, 1) both; }
  .nav-item--has-menu:is(:hover, :focus-within) .mega__media { animation-delay: 60ms !important; }

  html:not([data-animations='off']) .mobile-menu.is-open .nav-list > li { animation: rise-in .5s cubic-bezier(.22, .61, .36, 1) both; }
  .mobile-menu.is-open .nav-list > li:nth-child(1) { animation-delay: 120ms; }
  .mobile-menu.is-open .nav-list > li:nth-child(2) { animation-delay: 170ms; }
  .mobile-menu.is-open .nav-list > li:nth-child(3) { animation-delay: 220ms; }
  .mobile-menu.is-open .nav-list > li:nth-child(4) { animation-delay: 270ms; }
  .mobile-menu.is-open .nav-list > li:nth-child(n+5) { animation-delay: 320ms; }
  html:not([data-animations='off']) .nav-fold[open] > .nav-fold__list { animation: rise-in .35s cubic-bezier(.22, .61, .36, 1) both; }

  html:not([data-animations='off']) :is(.cart-drawer, .filter-drawer).is-entering :is(.line-item, .filter-group, .cart-drawer__gift, .cart-drawer__foot) { animation: rise-in .5s cubic-bezier(.22, .61, .36, 1) both; }
  :is(.cart-drawer, .filter-drawer).is-entering :is(.line-item, .filter-group):nth-child(1) { animation-delay: 90ms; }
  :is(.cart-drawer, .filter-drawer).is-entering :is(.line-item, .filter-group):nth-child(2) { animation-delay: 140ms; }
  :is(.cart-drawer, .filter-drawer).is-entering :is(.line-item, .filter-group):nth-child(3) { animation-delay: 190ms; }
  :is(.cart-drawer, .filter-drawer).is-entering :is(.line-item, .filter-group):nth-child(n+4) { animation-delay: 240ms; }
  .cart-drawer.is-entering :is(.cart-drawer__gift, .cart-drawer__foot) { animation-delay: 220ms; }

  /* Drawers glide with a softer curve and their overlays blur the page behind. */
  .cart-drawer__panel, .filter-drawer__panel, .mobile-menu { transition-timing-function: cubic-bezier(.32, .72, 0, 1); transition-duration: .5s; }
  html:not([data-animations='off']) :is(.cart-drawer, .filter-drawer).is-open > [class$='__overlay'] { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

  /* Filter pill floats up into place on phones. */
  @keyframes pill-in { from { opacity: 0; transform: translate(-50%, 24px); } }
  @media (max-width: 749px) {
    html:not([data-animations='off']) .toolbar .filter-pill { animation: pill-in .6s .3s cubic-bezier(.34, 1.4, .64, 1) both; }
  }
}

/* Sale flag, stronger: solid black with white text so it stands out on any photo. */
.pcard__flag.pcard__save {
  top: 14px; left: 12px; height: 32px; padding: 0 14px;
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  color: #fff; background: var(--ink, #000);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes save-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } }
  html:not([data-animations='off']) .pcard.is-in .pcard__save { animation: save-pop .55s .35s cubic-bezier(.34, 1.56, .64, 1) both; }
}

/* Bundle cards wear the product-card look: same image ratio, overlay name and
   price, same spacing. Selection ring, badge and flash sit on top of that. */
.bundle__grid { gap: var(--card-gap, 4px); }
.bcard__img img, .bcard__img svg { aspect-ratio: 2 / 3; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.bcard__img.pcard__img--portrait img { aspect-ratio: 3 / 4; }
.bcard__img.pcard__img--square img { aspect-ratio: 1 / 1; }
.bcard__img.pcard__img--natural img { aspect-ratio: auto; }
.bcard__img .pcard__overlay { text-align: left; }
.bcard__img::after { z-index: 3; }
.bcard__flash { z-index: 4; }
.bcard__badge { z-index: 5; }
.bcard .pcard--overlay, .bcard__img .pcard__title { color: #fff; font-size: 16px; line-height: 1.25; }
.bcard__img .pcard__meta { color: rgba(255, 255, 255, .88); font-size: 14px; }
.bcard__img .pcard__meta s { opacity: .65; margin-left: 6px; }
.bcard__img .pcard__overlay { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) { .bcard__pick:hover .pcard__overlay { transform: translateY(-4px); } }
.bcard__variant { margin-top: 8px; }
@media (min-width: 750px) { .bundle__grid { gap: var(--card-gap, 4px); } }

/* ==========================================================================
   Search panel: drops from the top in the header's frosted material
   ========================================================================== */

.search-panel { position: fixed; inset: 0; z-index: 75; visibility: hidden; pointer-events: none; }
.search-panel.is-open { visibility: visible; pointer-events: auto; }
.search-panel__overlay {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .22);
  opacity: 0; transition: opacity .35s var(--ease);
}
.search-panel.is-open .search-panel__overlay { opacity: 1; }
.search-panel__sheet {
  position: absolute; left: 0; right: 0; top: 0;
  max-height: min(88vh, 760px); display: flex; flex-direction: column;
  background: var(--header-bg-flat, rgba(255, 255, 255, .9)); color: var(--ink, #000);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
  transform: translateY(-104%); transition: transform .5s cubic-bezier(.32, .72, 0, 1);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .search-panel__sheet {
    background: var(--header-bg-flat, rgba(255, 255, 255, .78));
    -webkit-backdrop-filter: blur(var(--header-blur, 14px)) saturate(1.5);
    backdrop-filter: blur(var(--header-blur, 14px)) saturate(1.5);
  }
  .search-panel.is-open .search-panel__overlay { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
}
.search-panel.is-open .search-panel__sheet { transform: none; }

.search-panel__form {
  display: flex; align-items: center; gap: 12px;
  padding: 18px max(var(--gutter, 0px), var(--header-pad, 24px));
  padding-top: calc(18px + env(safe-area-inset-top));
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.search-panel__icon { display: grid; place-items: center; flex: none; opacity: .6; }
.search-panel__input {
  flex: 1; min-width: 0; border: 0 !important; background: transparent !important;
  padding: 10px 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -.01em; color: inherit;
}
.search-panel__input::placeholder { color: rgba(0, 0, 0, .42); }
.search-panel__input::-webkit-search-cancel-button { display: none; }
.search-panel__input:focus { outline: none; }
.search-panel__close { display: grid; place-items: center; width: 44px; height: 44px; flex: none; margin-right: -10px; border: 0; background: none; color: inherit; cursor: pointer; }

.search-panel__results { overflow-y: auto; overscroll-behavior: contain; padding: 0 max(var(--gutter, 0px), var(--header-pad, 24px)); }
.search-panel.has-query .search-panel__results { padding-top: 20px; padding-bottom: 28px; }
.search-panel.is-loading .search-panel__results { opacity: .55; transition: opacity .2s; }
.search-panel__label { margin: 0 0 12px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(0, 0, 0, .55); }
.search-panel__empty { margin: 4px 0 8px; font-size: 15px; color: rgba(0, 0, 0, .65); }

.search-panel__grid { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap, 4px); }
@media (min-width: 750px) { .search-panel__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .search-panel__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.search-hit { display: block; text-decoration: none; color: inherit; }
.search-hit__img { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--brand-soft, #f5f5f5); border-radius: var(--radius, 0); }
.search-hit__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
.search-hit:hover .search-hit__img img { transform: scale(1.05); }
.search-hit__title { display: block; margin-top: 8px; font-size: 14px; line-height: 1.3; }
.search-hit__price { display: block; margin-top: 2px; font-size: 13px; color: rgba(0, 0, 0, .6); }
.search-hit__price s { margin-left: 4px; opacity: .7; }

.search-panel__links { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.search-panel__links a { display: inline-block; padding: 8px 16px; border: 1px solid rgba(0, 0, 0, .14); border-radius: 999px; font-size: 14px; text-decoration: none; color: inherit; transition: border-color .2s; }
.search-panel__links a:hover { border-color: var(--ink, #000); }
.search-panel__all { width: 100%; }
@media (min-width: 750px) { .search-panel__all { width: auto; } }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-animations='off']) .search-panel__grid > li { animation: rise-in .45s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--i, 0) * 40ms); }
}
@media (prefers-reduced-motion: reduce) {
  .search-panel__sheet, .search-panel__overlay { transition: none; }
}

/* Search, floating liquid glass: the field is a pill inset from every edge,
   results sit in their own glass card just below it. */
.search-panel__sheet {
  top: calc(12px + env(safe-area-inset-top)); left: 12px; right: 12px;
  max-height: calc(100vh - 24px - env(safe-area-inset-top));
  max-height: calc(100dvh - 24px - env(safe-area-inset-top));
  gap: 8px; background: none !important; box-shadow: none; border-radius: 0;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  transform: translateY(calc(-100% - 40px));
}
@media (min-width: 750px) {
  .search-panel__sheet { top: 16px; left: 50%; right: auto; width: min(1100px, calc(100% - 40px)); transform: translate(-50%, calc(-100% - 40px)); }
  .search-panel.is-open .search-panel__sheet { transform: translate(-50%, 0); }
}
.search-panel__form, .search-panel.has-query .search-panel__results {
  background: rgba(255, 255, 255, .72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .55),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(255, 255, 255, .3),
    0 0 0 .5px rgba(0, 0, 0, .06),
    0 12px 40px rgba(0, 0, 0, .14);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .search-panel__form, .search-panel.has-query .search-panel__results {
    background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .22));
    -webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(1.06);
    backdrop-filter: blur(22px) saturate(1.9) brightness(1.06);
  }
}
.search-panel__form {
  flex: none; border-radius: 999px; border-bottom: 0;
  padding: 8px 10px 8px 22px;
}
.search-panel__input { font-size: clamp(17px, 2vw, 22px); padding: 12px 0 !important; }
.search-panel__close { margin-right: 0; border-radius: 50%; transition: background .2s; }
.search-panel__close:hover { background: rgba(255, 255, 255, .5); }
.search-panel__results { flex: 0 1 auto; min-height: 0; border-radius: 28px; padding: 0 20px; }
.search-panel.has-query .search-panel__results { padding-top: 20px; padding-bottom: 20px; }
.search-panel:not(.has-query) .search-panel__results { display: none; }
.search-panel__overlay { background: rgba(0, 0, 0, .12); }

/* Phones: products as compact rows (thumbnail, name, price) so four of them
   plus the collection links fit without scrolling. */
@media (max-width: 749px) {
  .search-panel__grid { grid-template-columns: 1fr; gap: 8px; margin-bottom: 20px; }
  .search-hit { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-content: center; align-items: end; }
  .search-hit__img { grid-row: 1 / 3; width: 64px; border-radius: 12px; }
  .search-hit__title { margin-top: 0; align-self: end; font-size: 15px; }
  .search-hit__price { align-self: start; }
}

/* ==========================================================================
   Search page
   ========================================================================== */

.search-hero { max-width: 760px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; }
.search-hero .eyebrow { margin-bottom: 14px; }
.search-hero__title {
  margin: 0; font-weight: 700; letter-spacing: -.03em; line-height: 1;
  font-size: calc(clamp(2.4rem, 1.2rem + 5vw, 4.8rem) * var(--heading-scale, 1));
  overflow-wrap: anywhere;
}
.search-hero__count { margin: 14px 0 0; font-size: 15px; color: var(--muted, #6e6e6e); }

/* The same liquid-glass pill as the search panel, on a soft tinted ground so
   the glass has something to catch on a plain white page. */
.search-field {
  position: relative; display: flex; align-items: center; gap: 12px;
  max-width: 620px; margin: clamp(26px, 4vw, 40px) auto 0;
  padding: 7px 7px 7px 22px; border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .6),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 0 0 1px rgba(0, 0, 0, .07),
    0 10px 34px rgba(0, 0, 0, .08);
  transition: box-shadow .3s var(--ease);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .search-field {
    background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .3));
    -webkit-backdrop-filter: blur(22px) saturate(1.9); backdrop-filter: blur(22px) saturate(1.9);
  }
}
.search-field:focus-within { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(0, 0, 0, .9), 0 14px 40px rgba(0, 0, 0, .1); }
.search-field__icon { display: grid; place-items: center; opacity: .55; flex: none; }
.search-field__input {
  flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important;
  padding: 12px 0 !important; border-radius: 0 !important; font-size: 17px; color: inherit;
}
.search-field__input:focus { outline: none; }
.search-field__input::-webkit-search-cancel-button { display: none; }
.search-field__go {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%;
  border: 0; cursor: pointer; background: var(--btn, #000); color: var(--btn-ink, #fff);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background .2s;
}
.search-field__go:hover { transform: translateX(3px); }
.search-field__go:active { transform: scale(.94); }

/* A soft wash of colour behind the hero, so the page is not a white void. */
.search-page { position: relative; isolation: isolate; }
.search-page::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 0;
  width: min(1100px, 120vw); height: 520px; transform: translateX(-50%);
  background:
    radial-gradient(40% 55% at 30% 45%, color-mix(in srgb, var(--brand-soft, #f1eee8) 90%, transparent), transparent 70%),
    radial-gradient(35% 50% at 72% 40%, rgba(214, 222, 204, .55), transparent 70%);
  filter: blur(20px); pointer-events: none;
}

.search-suggest { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.search-suggest__label { font-size: 13px; color: var(--muted, #6e6e6e); }
.search-suggest__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.search-chip {
  display: inline-block; padding: 8px 16px; border-radius: 999px; font-size: 14px; text-decoration: none; color: inherit;
  background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
  transition: background .2s, color .2s, box-shadow .2s, transform .2s;
}
.search-chip:hover { box-shadow: 0 0 0 1px var(--ink, #000); transform: translateY(-1px); }
.search-chip.is-active { background: var(--ink, #000); color: #fff; box-shadow: none; }

.search-page__grid { margin-top: 0; }
.search-block { margin-top: clamp(40px, 6vw, 72px); }
.search-block:first-child { margin-top: 0; }
.search-block__label { margin: 0 0 18px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #6e6e6e); font-weight: 500; }

.search-empty { text-align: center; margin: -28px auto clamp(40px, 6vw, 64px); max-width: 460px; }
.search-empty__text { margin: 0; color: var(--muted, #6e6e6e); font-size: 15px; }

.search-colls { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--card-gap, 4px); }
@media (min-width: 750px) { .search-colls { grid-template-columns: repeat(4, 1fr); } }
.search-coll { position: relative; display: block; overflow: hidden; text-decoration: none; color: #fff; border-radius: var(--radius, 0); background: var(--brand-soft, #f5f5f5); }
.search-coll__img { display: block; aspect-ratio: 4 / 5; }
.search-coll__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.search-coll:hover .search-coll__img img { transform: scale(1.05); }
.search-coll__title {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: clamp(14px, 1.6vw, 22px); font-size: 17px; text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
}
.search-coll__title svg { transition: transform .35s var(--ease); }
.search-coll:hover .search-coll__title svg { transform: translateX(4px); }

.search-more { margin-top: clamp(40px, 6vw, 64px); max-width: 760px; }
.search-more__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line, #e5e5e5); }
.search-more__item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 4px; border-bottom: 1px solid var(--line, #e5e5e5); text-decoration: none; color: inherit;
}
.search-more__item svg { transition: transform .35s var(--ease); flex: none; }
.search-more__item:hover svg { transform: translateX(4px); }
.search-more__type { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #6e6e6e); }
.search-more__title { display: block; margin-top: 3px; font-size: 17px; }

/* Phones: the bundle grid's side margin equals the gap between its cards. */
@media (max-width: 749px) {
  .bundle__grid { margin-inline: calc(var(--card-gap, 4px) - max(var(--gutter, 0px), 20px)); }
}
.search-page__coll-link { margin: clamp(32px, 5vw, 56px) 0 0; text-align: center; }

/* Chosen pieces as thumbnails in the bundle bar; empty slots show their number. */
.bundle__bar { justify-content: flex-start; }
.bundle__bar .bundle__status { flex: 1 1 auto; min-width: 0; }
.bundle__slots { display: flex; gap: 6px; flex: none; }
.bundle__slot {
  position: relative; display: grid; place-items: center; overflow: hidden;
  width: 52px; height: 52px; border-radius: 12px;
  border: 1px dashed rgba(0, 0, 0, .22); background: rgba(255, 255, 255, .5);
}
.bundle__slot-n { font-size: 13px; color: rgba(0, 0, 0, .4); }
.bundle__slot.is-filled { border: 0; }
.bundle__slot.is-filled .bundle__slot-n { display: none; }
.bundle__slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes slot-in { from { opacity: 0; transform: scale(.7); } }
  html:not([data-animations='off']) .bundle__slot img { animation: slot-in .45s cubic-bezier(.34, 1.56, .64, 1) both; }
}
@media (max-width: 749px) {
  .bundle__slot { width: 46px; height: 46px; border-radius: 10px; }
  .bundle__bar { gap: 14px; }
}

/* Specs (product metafields) as a tidy two-column list inside an accordion */
.spec { margin: 0; display: grid; }
.spec__row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line, #e5e5e5); }
.spec__row:last-child { border-bottom: 0; }
.spec dt { color: var(--muted, #6e6e6e); }
.spec dd { margin: 0; text-align: right; }

/* Phones and small tablets: the product photo runs edge to edge; the thumbnail
   strip under it keeps the usual side inset. */
@media (max-width: 899px) {
  .product__media { margin-inline: calc(-1 * max(var(--gutter, 0px), 20px)); }
  .media__thumbs { padding-inline: max(var(--gutter, 0px), 20px); scroll-padding-inline: max(var(--gutter, 0px), 20px); }
}

/* Thumbnails are square, and on phones sit as close to the edge as the gap
   between them. */
.media__thumb img { aspect-ratio: 1 / 1; }
@media (max-width: 899px) {
  .media__thumbs { gap: 4px; padding-inline: 4px; scroll-padding-inline: 4px; }
}

/* ==========================================================================
   Product urgency: stock, ship-today clock, delivery window, sale countdown
   ========================================================================== */

.urg { display: grid; gap: 10px; padding: 16px 18px; border-radius: 18px; background: var(--brand-soft, #f5f5f5); }
.urg__row { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 14px; line-height: 1.4; }
.urg__row svg { flex: none; margin-top: 1px; }
.urg__row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.urg__eta { display: block; color: var(--muted, #6e6e6e); font-size: 13px; margin-top: 2px; }

.urg__dot { position: relative; flex: none; width: 9px; height: 9px; margin: 6px 4px 0; border-radius: 50%; background: var(--success, #1f7a4a); }
.urg__stock[data-state='low'] .urg__dot { background: #d97706; }
.urg__stock[data-state='out'] .urg__dot { background: #9ca3af; }
.urg__stock[data-state='low'] { font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .urg__dot::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit;
    animation: urg-pulse 2s cubic-bezier(.22, .61, .36, 1) infinite;
  }
  .urg__stock[data-state='out'] .urg__dot::after { animation: none; }
  @keyframes urg-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.8); opacity: 0; } }
}

.urg-sale {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: -6px 0 0;
  padding: 8px 8px 8px 14px; border-radius: 999px; background: var(--ink, #000); color: #fff; font-size: 13px;
  justify-self: start;
}
.urg-sale[hidden] { display: none; }
.urg-sale__time { display: inline-flex; gap: 4px; font-variant-numeric: tabular-nums; }
.urg-sale__time span { display: inline-flex; align-items: baseline; gap: 1px; padding: 3px 7px; border-radius: 8px; background: rgba(255, 255, 255, .16); font-weight: 600; }
.urg-sale__time i { font-style: normal; font-weight: 400; opacity: .7; font-size: 11px; }

/* Free gift, a quiet line under the price */
.pgift { display: flex; align-items: center; gap: 8px; margin: -8px 0 0; font-size: 13.5px; }
.pgift svg { flex: none; }
.pgift__note { color: var(--muted, #6e6e6e); }
.pgift__emoji { flex: none; font-size: 16px; line-height: 1; }

/* Vendor, title and price read as one group: pulled in from the column's 20px rhythm. */
.pinfo > .eyebrow + .pinfo__title { margin-top: -12px; }
.pinfo__title { line-height: 1.05; }
.pinfo__title + .pinfo__price, .pinfo__rating + .pinfo__price { margin-top: -10px; }

/* Related products: loading placeholders the same size as the cards */
.recs__skeleton { pointer-events: none; }
.recs__ghost { aspect-ratio: 2 / 3; background: var(--brand-soft, #f3f3f3); position: relative; overflow: hidden; }
@media (min-width: 750px) {
  .recs__skeleton { display: grid; grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 749px) {
  .recs__skeleton .recs__ghost { flex: none; width: var(--card-msize, 62vw); }
}
@media (prefers-reduced-motion: no-preference) {
  .recs__ghost::after {
    content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: recs-shimmer 1.4s infinite;
  }
  @keyframes recs-shimmer { to { transform: translateX(100%); } }
}
/* Gift note on its own line under "Gratis gave med i købet" */
.pgift { align-items: flex-start; line-height: 1.35; }
.pgift__emoji { margin-top: 1px; }
.pgift__note { display: block; font-size: 13px; }
.pinfo__buy { margin-top: 10px; }

/* Related products rail: softer snapping, and a hairline progress bar */
.recs__rail .grid-cards--mscroll, .recs__rail .grid-cards--drow { scroll-snap-type: x proximity; }
.recs__rail .grid-cards > * { transform-origin: center; transition: transform .18s linear, opacity .18s linear; will-change: transform; }
.rail-progress {
  position: relative; height: 1px; margin-top: 20px; overflow: hidden;
  background: rgba(0, 0, 0, .1); opacity: 0; transition: opacity .3s;
}
.has-overflow > .rail-progress { opacity: 1; }
.rail-progress__bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 30%;
  background: var(--ink, #000); transition: transform .12s linear;
}
@media (max-width: 749px) {
  .recs__rail .rail-progress { margin-top: 18px; }
}

/* "Læg i kurv" and the quantity stepper in the same liquid glass as the filter
   pill and search: clear tint, bright rim, soft shadow, black text. */
.pinfo [data-add-button], .pinfo .qty-row .qty {
  border: 0; color: var(--ink, #000);
  background: linear-gradient(180deg, rgba(248, 248, 248, .9), rgba(228, 228, 228, .75));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .7),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(255, 255, 255, .3),
    0 0 0 .5px rgba(0, 0, 0, .08),
    0 6px 18px rgba(0, 0, 0, .08);
  transition: background .25s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .pinfo [data-add-button], .pinfo .qty-row .qty {
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(225, 225, 225, .4));
    -webkit-backdrop-filter: blur(18px) saturate(1.8) brightness(1.04);
    backdrop-filter: blur(18px) saturate(1.8) brightness(1.04);
  }
}
.pinfo [data-add-button]:hover:not([disabled]) {
  color: var(--ink, #000);
  background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(235, 235, 235, .6));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .8),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 0 .5px rgba(0, 0, 0, .12),
    0 10px 24px rgba(0, 0, 0, .12);
}
.pinfo [data-add-button][disabled] { opacity: .55; }

/* "Køb nu" in the same liquid glass, but smoked black so it stays the main button. */
.pinfo [data-buy-now] {
  border: 0; color: #fff;
  background: linear-gradient(180deg, rgba(40, 40, 40, .96), rgba(0, 0, 0, .96));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .14),
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgba(255, 255, 255, .06),
    0 0 0 .5px rgba(0, 0, 0, .3),
    0 8px 22px rgba(0, 0, 0, .18);
  transition: background .25s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .pinfo [data-buy-now] {
    background: linear-gradient(180deg, rgba(45, 45, 45, .82), rgba(0, 0, 0, .86));
    -webkit-backdrop-filter: blur(18px) saturate(1.8);
    backdrop-filter: blur(18px) saturate(1.8);
  }
}
.pinfo [data-buy-now]:hover:not([disabled]) {
  color: #fff;
  background: linear-gradient(180deg, rgba(60, 60, 60, .86), rgba(10, 10, 10, .9));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .2),
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 0 0 .5px rgba(0, 0, 0, .3),
    0 12px 28px rgba(0, 0, 0, .22);
}

/* "Køb nu": plain solid black */
.pbuy { margin-top: 10px; }
.pbuy .pinfo__buy { margin-top: 0; }
.pinfo .pbuy [data-buy-now] {
  background: #000; color: #fff; border: 0; box-shadow: none; text-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.pinfo .pbuy [data-buy-now]:hover:not([disabled]) { background: #222; color: #fff; }
.pcta [data-add-button], .pcta [data-buy-now] { white-space: nowrap; padding-left: 18px; padding-right: 18px; }
.pcta [data-add-button] { flex: 1; min-width: 0; }

/* Free shipping progress: at the top of the drawer, clear and friendly */
.cart-drawer__ship { padding: 14px 24px 16px; border-bottom: 1px solid var(--line, #e5e5e5); }
.cart-drawer__ship[hidden] { display: none; }
.shipbar { font-size: 14px; }
.shipbar__text { display: flex; align-items: center; gap: 10px; margin: 0; line-height: 1.3; }
.shipbar__text svg { flex: none; }
.shipbar__text b { font-weight: 600; font-variant-numeric: tabular-nums; }
.shipbar__track { height: 6px; margin-top: 10px; border-radius: 999px; background: var(--brand-soft, #efefef); overflow: hidden; }
.shipbar__fill {
  height: 100%; border-radius: inherit; background: var(--ink, #000);
  transition: width .6s cubic-bezier(.22, .61, .36, 1), background .3s;
}
.shipbar.is-done .shipbar__fill { background: var(--success, #1f7a4a); }
.shipbar.is-done .shipbar__text { color: var(--success, #1f7a4a); }
.shipbar--page { max-width: 520px; margin: 0 0 28px; }

/* Shipping bar, on brand: hairline track, black fill, black text throughout */
.shipbar__text { gap: 8px; font-size: 13.5px; }
.shipbar__emoji { flex: none; font-size: 16px; line-height: 1; }
.shipbar__track { height: 2px; margin-top: 10px; border-radius: 0; background: rgba(0, 0, 0, .1); }
.shipbar__fill { border-radius: 0; background: var(--ink, #000); }
.shipbar.is-done .shipbar__fill { background: var(--ink, #000); }
.shipbar.is-done .shipbar__text { color: inherit; }

/* Bottom of the drawer is one calm block: gift, free-shipping bar, total and
   checkout, with no dividing lines between them. The bar sits with the total,
   outside the scrolling list, so it is always in view. */
.cart-drawer__ship { flex: none; padding: 16px 24px 0; border: 0; }
.cart-drawer__gift { flex: none; border-top: 0; }
.cart-drawer__foot { flex: none; border-top: 0; padding-top: 16px; }

/* Cart timer: a small glass pill just under the header */
.cart-timer {
  position: fixed; left: 50%; top: 90px; z-index: 55; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 13px; color: var(--ink, #000);
  background: rgba(255, 255, 255, .8);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .6),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 0 0 .5px rgba(0, 0, 0, .08),
    0 6px 20px rgba(0, 0, 0, .12);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .cart-timer {
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(235, 235, 235, .38));
    -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8);
  }
}
.cart-timer[hidden] { display: none; }
.cart-timer b { font-weight: 600; font-variant-numeric: tabular-nums; }
.cart-timer__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink, #000); }
@media (prefers-reduced-motion: no-preference) {
  .cart-timer.is-low .cart-timer__dot { animation: timer-blink 1s steps(2, start) infinite; }
  @keyframes timer-blink { to { visibility: hidden; } }
  @keyframes timer-in { from { opacity: 0; transform: translate(-50%, -8px); } }
  .cart-timer:not([hidden]) { animation: timer-in .4s cubic-bezier(.22, .61, .36, 1); }
}

/* Timer pill without the white rim */
.cart-timer { box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }

/* The same countdown inside the cart, under the heading */
.cart-drawer__timer {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 24px;
  font-size: 13px; background: var(--brand-soft, #f5f5f5);
}
.cart-drawer__timer[hidden] { display: none; }
.cart-drawer__timer b { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .cart-drawer__timer.is-low .cart-timer__dot { animation: timer-blink 1s steps(2, start) infinite; }
}

/* Elegant italic heading option (image with text) */
.h-italic {
  font-family: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  font-style: italic; font-weight: 500; letter-spacing: -.01em; line-height: 1.02;
  font-size: calc(clamp(2.4rem, 1.4rem + 3.4vw, 4rem) * var(--heading-scale, 1));
}
.h-italic--playfair { font-family: "Playfair Display", Georgia, serif; font-weight: 400; letter-spacing: -.015em; }
.h-italic--instrument { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; letter-spacing: -.01em; }
.h-italic--bodoni { font-family: "Bodoni Moda", Georgia, serif; font-weight: 400; letter-spacing: -.01em; }
.h-italic--parisienne { font-family: "Parisienne", cursive; font-style: normal; font-weight: 400; letter-spacing: 0; line-height: 1.2; }
.h-italic--pinyon { font-family: "Pinyon Script", cursive; font-style: normal; font-weight: 400; letter-spacing: 0; line-height: 1.2; }
.recs__rail .grid-cards > * { transform: none; opacity: 1; will-change: auto; }

/* Gallery: segment lines instead of thumbnails */
.media__thumbs { display: none; }
.media__dots {
  order: 3; display: flex; gap: 6px; padding: 12px max(var(--gutter, 0px), 20px) 0;
}
.media__dot {
  flex: 1; max-width: 44px; height: 3px; padding: 0; border: 0; cursor: pointer;
  background: rgba(0, 0, 0, .14); border-radius: 2px;
  transition: background .3s var(--ease), max-width .3s var(--ease);
  position: relative;
}
/* bigger tap target than the 3px line */
.media__dot::before { content: ''; position: absolute; inset: -10px 0; }
.media__dot[aria-current='true'] { background: var(--ink, #000); }
.media__dot:focus-visible { outline: 2px solid var(--ink, #000); outline-offset: 4px; }
@media (min-width: 900px) {
  .media { grid-template-columns: 1fr; grid-template-areas: 'main' 'dots'; }
  .media__dots { grid-area: dots; padding: 14px 0 0; }
  .media__viewport { cursor: grab; }
}
/* Line the segments up with the product title below */
@media (max-width: 899px) {
  .media__dots { padding-left: calc(max(var(--gutter, 0px), 20px) + max(var(--gutter, 0px), 22px)); padding-right: calc(max(var(--gutter, 0px), 20px) + max(var(--gutter, 0px), 22px)); }
}
.media__dots { justify-content: center; }

/* USP strip on phones: the items share one cell and cross-fade */
@media (max-width: 749px) {
  .usp.is-rotating { grid-template-columns: 1fr; gap: 0; }
  .usp.is-rotating .usp__item {
    grid-area: 1 / 1; opacity: 0; transform: none;
    transition: opacity .8s ease-in-out; pointer-events: none;
  }
  .usp.is-rotating .usp__item.is-active { opacity: 1; pointer-events: auto; }
}
@media (max-width: 749px) {
  /* beat the scroll-reveal's opacity rule */
  html .usp.is-rotating .usp__item:not(.is-active) { opacity: 0; }
  html .usp.is-rotating .usp__item.is-active { opacity: 1; }
  html .usp.is-rotating .usp__item { transform: none; transition: opacity .8s ease-in-out; transition-delay: 0s; }
}
@media (max-width: 749px) {
  html .usp.is-rotating .usp__item { transition: opacity 1.4s ease-in-out; }
}
/* Computer: the product photo is square */
@media (min-width: 900px) { .media__slide img { aspect-ratio: 1 / 1; } }

/* Promo pill on top of the product photo */
.media { position: relative; }
.promo-strip {
  position: absolute; z-index: 4; left: 14px; top: 14px;
  max-width: calc(100% - 28px); margin: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 9px 18px; border-radius: 999px;
  background: rgba(0, 0, 0, .82); color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  font-family: var(--font-body, sans-serif); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .promo-strip {
    background: rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  }
}
@media (max-width: 899px) { .promo-strip { font-size: 11.5px; letter-spacing: .06em; padding: 8px 14px; } }
.spec__note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted, #6e6e6e); }

/* ==========================================================================
   Password / coming soon page
   ========================================================================== */

.template-password { margin: 0; }
.pw {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; color: var(--pw-ink, #fff);
  background: var(--ink, #101533);
}
.pw--plain { background: var(--bg, #fff); color: var(--ink, #101533); }
.pw__media { position: absolute; inset: 0; overflow: hidden; }
.pw__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pw__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 50% 55%, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 70%),
    linear-gradient(to bottom, rgba(0,0,0,.38) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.55) 100%),
    rgba(0, 0, 0, var(--pw-scrim, .45));
}
.pw__inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-rows: auto 1fr auto; gap: 32px;
  padding: clamp(28px, 5vw, 56px) max(var(--gutter, 0px), 24px);
}
.pw__head { display: flex; justify-content: center; }
.pw__logo { width: var(--pw-logo-w, 170px); max-width: 60vw; height: auto; }
.pw__wordmark {
  margin: 0; font-family: var(--font-heading, sans-serif); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px); letter-spacing: .22em; text-transform: uppercase;
}
.pw__body { align-self: center; text-align: center; max-width: 620px; margin: 0 auto;
  text-shadow: 0 1px 24px rgba(0,0,0,.28); }
.pw--plain .pw__body { text-shadow: none; }
.pw__eyebrow {
  margin: 0 0 14px; font-family: var(--font-body, sans-serif);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .8;
}
.pw__heading {
  margin: 0; color: inherit; line-height: 1.04; letter-spacing: -.02em;
  font-size: calc(clamp(2.2rem, 1.2rem + 4.4vw, 4rem) * var(--heading-scale, 1));
}
.pw__text { margin-top: 16px; font-size: 16px; line-height: 1.5; opacity: .9; }
.pw__text p { margin: 0; }

.pw__signup { margin-top: 28px; max-width: 520px; margin-inline: auto; text-shadow: none; }
.pw__field {
  display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 18px;
  border-radius: 999px; background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .pw__field { -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); }
}
.pw--plain .pw__field { background: rgba(0, 0, 0, .04); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.pw__field input {
  flex: 1; min-width: 0; border: 0 !important; background: transparent !important;
  box-shadow: none !important; padding: 12px 0 !important; border-radius: 0 !important;
  color: inherit; font-size: 15px;
}
.pw__field input::placeholder { color: currentColor; opacity: .6; }
.pw__field input:focus { outline: none; }
.pw__field button {
  flex: none; border: 0; cursor: pointer; border-radius: 999px;
  padding: 12px 24px; font: inherit; font-size: 14px; font-weight: 600;
  background: var(--pw-ink, #fff); color: var(--ink, #101533);
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.pw--plain .pw__field button { background: var(--btn, #000); color: var(--btn-ink, #fff); }
.pw__field button:hover { opacity: .88; }
.pw__field button:active { transform: scale(.97); }
.pw__ok, .pw__err { margin: 12px 0 0; font-size: 14px; }
.pw__err { color: #ffb4b4; }
.pw--plain .pw__err { color: var(--sale, #d6316b); }

.pw__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.pw__social { margin: 0; display: flex; gap: 18px; }
.pw__foot a { color: inherit; text-decoration: none; opacity: .85; }
.pw__foot a:hover { opacity: 1; text-decoration: underline; }
.pw__login:only-child { margin-inline: auto; }
.pw__login summary { cursor: pointer; list-style: none; opacity: .75; }
.pw__login summary::-webkit-details-marker { display: none; }
.pw__login summary:hover { opacity: 1; }
.pw__login[open] summary { margin-bottom: 10px; }
.pw__login .pw__field { padding-left: 16px; }
.pw__login .pw__field button { padding: 10px 18px; }
@media (max-width: 749px) {
  .pw__inner { gap: 24px; }
  .pw__foot { justify-content: center; text-align: center; }
  .pw__login { width: 100%; }
}

/* ==========================================================================
   Brand layer — Avento
   Dark, flash-lit sport editorial: square corners, hairlines, tracked caps,
   display type that runs big and tight. Keep this block self-contained so the
   brand can be re-tuned without touching the component styles above.
   ========================================================================== */

:root {
  /* Vertical rhythm. --space-k compresses the authored desktop padding on
     narrow screens; --space-scale is overridden by theme.liquid from the
     "Section spacing" setting. Both default to 1 so nothing breaks if a
     layout forgets to emit them. */
  --space-k: 1;
  --space-scale: 1;

  --court: var(--brand, #1b45f0);
  --ball: #d9f24b;
  --hair: rgba(0, 0, 0, .12);
  --hair-light: rgba(255, 255, 255, .22);
}

/* Tracked caps used for labels, eyebrows and small CTAs */
.eyebrow,
.poster__label,
.showcase__label {
  font-family: var(--font-body, sans-serif);
  font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
}

/* ---------- Campaign poster ---------- */
.poster { position: relative; display: flex; color: var(--poster-ink, #fff); isolation: isolate; }
.poster__media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.poster__media img,
.poster__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster__scrim { position: absolute; inset: 0; }
.poster--grain .poster__media::after {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .14; mix-blend-mode: overlay; pointer-events: none;
}
.poster--short { min-height: clamp(320px, 46vw, 540px); }
.poster--tall { min-height: clamp(520px, 74vw, 840px); }
.poster--screen { min-height: 100svh; }
.poster__inner {
  position: relative; z-index: 1; width: 100%;
  max-width: var(--page-width, 1600px); margin: 0 auto;
  padding: clamp(28px, 5vw, 72px) max(var(--gutter, 0px), 20px);
  display: flex;
}
.poster--bl .poster__inner { align-items: flex-end; justify-content: flex-start; }
.poster--bc .poster__inner { align-items: flex-end; justify-content: center; text-align: center; }
.poster--ml .poster__inner { align-items: center; justify-content: flex-start; }
.poster--mc .poster__inner { align-items: center; justify-content: center; text-align: center; }
.poster__body { max-width: 720px; }
.poster__label { margin: 0 0 18px; opacity: .85; }
.poster__heading {
  margin: 0; color: inherit;
  font-weight: 600; line-height: 1.04; letter-spacing: -.02em;
  font-size: calc(clamp(1.9rem, 1rem + 2.6vw, 3.1rem) * var(--heading-scale, 1));
}
.poster__text { margin: 18px 0 0; max-width: 46ch; font-size: 16px; line-height: 1.5; opacity: .9; }
.poster--bc .poster__text, .poster--mc .poster__text { margin-inline: auto; }
.poster__cta {
  display: inline-block; margin-top: 26px; color: inherit; text-decoration: none;
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  padding-bottom: 7px; border-bottom: 1px solid currentColor;
  transition: opacity .25s ease, letter-spacing .25s ease;
}
.poster__cta:hover { opacity: .7; letter-spacing: .22em; }

/* ---------- Product showcase ---------- */
.showcase__rows { display: grid; gap: clamp(48px, 7vw, 112px); }
.showcase__row {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 4vw, 72px);
}
.showcase__row--flip > .showcase__media { order: 2; }
.showcase__media { display: block; overflow: hidden; background: var(--brand-soft, #f5f5f5); }
.showcase__media img,
.showcase__media svg { width: 100%; height: 100%; display: block; aspect-ratio: 4 / 5; object-fit: cover;
  transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.showcase__media:hover img { transform: scale(1.03); }
.showcase__body { padding-inline: max(var(--gutter, 0px), 20px); max-width: 560px; }
.showcase__label { margin: 0 0 16px; color: var(--muted, #6e6e6e); }
.section--invert .showcase__label { color: rgba(255, 255, 255, .62); }
.showcase__title {
  margin: 0; font-weight: 600; letter-spacing: -.018em; line-height: 1.1;
  font-size: calc(clamp(1.5rem, 1rem + 1.6vw, 2.2rem) * var(--heading-scale, 1));
}
.showcase__text { margin: 16px 0 0; color: var(--muted, #6e6e6e); line-height: 1.6; max-width: 44ch; }
.section--invert .showcase__text { color: rgba(255, 255, 255, .7); }
.showcase__specs { margin: 28px 0 0; display: grid; gap: 0; border-top: 1px solid var(--hair); }
.section--invert .showcase__specs { border-color: var(--hair-light); }
.showcase__specs > div {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 12px 0; border-bottom: 1px solid var(--hair);
  font-size: 14px;
}
.section--invert .showcase__specs > div { border-color: var(--hair-light); }
.showcase__specs dt { margin: 0; color: var(--muted, #6e6e6e); letter-spacing: .04em; }
.section--invert .showcase__specs dt { color: rgba(255, 255, 255, .62); }
.showcase__specs dd { margin: 0; font-weight: 600; text-align: right; }
.showcase__foot { margin-top: 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.showcase__price { font-weight: 600; font-size: 16px; }

@media (max-width: 749px) {
  .showcase__row { grid-template-columns: 1fr; gap: 22px; }
  .showcase__row--flip > .showcase__media { order: 0; }
  .showcase__media img, .showcase__media svg { aspect-ratio: 3 / 4; }
  .poster__body { max-width: none; }
}

.ticker--caps .ticker__item {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(11px, .9vw, 13px); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; line-height: 1;
  padding-right: 2.6em; gap: 2.6em;
}
.ticker--caps .ticker__dot { width: 3px; height: 3px; opacity: .5; }

/* ---------- Collection banner ---------- */
.chero { position: relative; display: flex; color: var(--chero-ink, #fff); overflow: hidden; }
.chero--plain { color: var(--ink, #0b0b0c); background: var(--brand-soft, #f2f2f2); }
.chero--short { min-height: clamp(300px, 34vw, 440px); }
.chero--tall { min-height: clamp(420px, 56vw, 680px); }
.chero__media { position: absolute; inset: 0; }
.chero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chero__scrim { position: absolute; inset: 0; }
.chero__inner {
  position: relative; z-index: 1; width: 100%;
  max-width: var(--page-width, 1600px); margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) max(var(--gutter, 0px), 20px);
  display: flex; align-items: flex-end;
}
.chero__body { max-width: 680px; }
.chero__label {
  margin: 0 0 14px; font-family: var(--font-body, sans-serif);
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .85;
}
.chero__title {
  margin: 0; color: inherit;
  font-weight: 600; line-height: 1.06; letter-spacing: -.02em;
  font-size: calc(clamp(1.7rem, 1rem + 2.2vw, 2.6rem) * var(--heading-scale, 1));
}
.chero__text { margin: 18px 0 0; max-width: 52ch; line-height: 1.55; opacity: .9; }

/* ---------- Editorial grid ---------- */
.egrid__wrap {
  display: grid; gap: clamp(16px, 2.2vw, 32px);
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
}
.egrid figure { margin: 0; }
.egrid__a { grid-column: 1 / span 7; }
.egrid__text { grid-column: 9 / span 4; padding-top: clamp(24px, 6vw, 96px); }
.egrid__b { grid-column: 9 / span 4; }
.egrid__wrap--right .egrid__a { grid-column: 6 / span 7; grid-row: 1 / span 2; }
.egrid__wrap--right .egrid__text { grid-column: 1 / span 4; }
.egrid__wrap--right .egrid__b { grid-column: 1 / span 4; }
.egrid__wrap--left .egrid__a { grid-row: 1 / span 2; }

.egrid__a img, .egrid__a svg { width: 100%; display: block; aspect-ratio: 4 / 5; object-fit: cover; }
.egrid__b img, .egrid__b svg { width: 100%; display: block; aspect-ratio: 3 / 4; object-fit: cover; }
.egrid__cap {
  margin-top: 12px; display: flex; gap: 10px; align-items: baseline;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted, #6e6e6e);
}
.section--invert .egrid__cap { color: rgba(255,255,255,.6); }
.egrid__cap span { font-variant-numeric: tabular-nums; opacity: .55; }
.egrid__heading {
  margin: 0; font-weight: 600; line-height: 1.12; letter-spacing: -.016em;
  font-size: calc(clamp(1.4rem, .95rem + 1.4vw, 2rem) * var(--heading-scale, 1));
}
.egrid__body { margin-top: 18px; color: var(--muted, #6e6e6e); line-height: 1.65; }
.section--invert .egrid__body { color: rgba(255,255,255,.7); }
.egrid__body p { margin: 0 0 14px; }
.egrid__cta {
  display: inline-block; margin-top: 22px; color: inherit; text-decoration: none;
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  padding-bottom: 6px; border-bottom: 1px solid currentColor;
  transition: letter-spacing .25s ease, opacity .25s ease;
}
.egrid__cta:hover { letter-spacing: .22em; opacity: .7; }

@media (max-width: 989px) {
  .egrid__wrap, .egrid__wrap--right { grid-template-columns: 1fr 1fr; }
  .egrid__a, .egrid__wrap--right .egrid__a { grid-column: 1 / -1; grid-row: auto; }
  .egrid__text, .egrid__wrap--right .egrid__text { grid-column: 1 / -1; padding-top: 8px; }
  .egrid__b, .egrid__wrap--right .egrid__b { grid-column: 1 / span 1; }
}

/* Category tiles (hero duo) read as labels, not headlines */
.hero--duo .hero__panel-body h2 {
  font-weight: 600; letter-spacing: -.018em; line-height: 1.1;
}
.hero--duo .hero__panel-cta {
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}

/* "New in" flag — quiet counterpart to the sale flag */
.pcard__flag.pcard__new {
  background: var(--bg, #fff); color: var(--ink, #0b0b0c);
  padding: 5px 9px; font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

/* Section and banner headings run in caps — the training-club register */
.section-head h2,
.banner__body h2,
.banner__body h1 {
  letter-spacing: -.018em; font-weight: 600;
}

/* ==========================================================================
   Card in the "below" style — image, then name and price underneath.
   ========================================================================== */
.pcard--below .pcard__media { background: var(--brand-soft, #f2f2f2); }
.pcard--below .pcard__title {
  margin: 14px 0 4px; font-family: var(--font-body, sans-serif);
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.35; color: var(--ink, #0b0b0c);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .4s cubic-bezier(.16, 1, .3, 1);
}
.pcard--below:hover .pcard__title { background-size: 100% 1px; }
.pcard--below .pcard__meta {
  font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--ink, #0b0b0c);
}
.pcard--below .pcard__meta s { color: var(--muted, #6e6e6e); margin-left: 8px; }
.pcard--below .pcard__swatches { margin-top: 10px; }

/* ==========================================================================
   Motion — everything here is gated on Theme settings → Animations.
   ========================================================================== */
/* Cards: the photo breathes, the second shot takes over */
html:not([data-animations='off']) .pcard__media img { transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); }
html:not([data-animations='off']) .pcard:hover .pcard__media img { transform: scale(1.04); }
html:not([data-animations='off']) .pcard__alt { transition: opacity .6s ease; }



}



/* The rhythm compresses as the viewport narrows. One place, every section. */
@media (max-width: 1099px) { :root { --space-k: .82; } }
@media (max-width: 749px)  { :root { --space-k: .60; } }

/* ==========================================================================
   Rail card — a quiet retail card: small technical label, product on a light
   field, then name and price on one line with the colour underneath. Built to
   sit flush beside its neighbours, separated only by a hairline.
   ========================================================================== */
.pcard--rail { display: flex; flex-direction: column; background: var(--bg, #fff); }
.pcard--rail > .pcard__label { padding: 12px 14px 8px; min-height: 0; }
.pcard--rail .pcard__label {
  margin: 0; padding: 0 0 8px;
  font-family: var(--font-body, sans-serif);
  font-size: 12px; font-weight: 400; letter-spacing: .01em;
  color: var(--muted, #6e6e6e); min-height: 1em;
}
.pcard--rail .pcard__frame { position: relative; }
/* The photo fills the cell edge to edge. Insetting it leaves a dead grey
   margin that makes every card look like a thumbnail in a box. */
.pcard--rail .pcard__img { display: block; padding: 0; background: var(--brand-soft, #f2f2f2); }
.pcard--rail .pcard__img img { width: 100%; height: 100%; object-fit: cover; }

/* Quick add sits in the corner of the image, not over the type */
.pcard--rail .pcard__atc-wrap { position: absolute; right: 12px; bottom: 12px; z-index: 2; }
.pcard--rail .pcard__atc {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: transparent; border: 0; color: var(--ink, #0b0b0c);
  opacity: .55; transition: opacity .25s ease, transform .25s ease; cursor: pointer;
}
.pcard--rail .pcard__atc::before { content: "+"; font-size: 19px; line-height: 1; font-weight: 400; }
.pcard--rail .pcard__atc svg { display: none; }
.pcard--rail:hover .pcard__atc { opacity: 1; }
.pcard--rail .pcard__atc:hover { transform: scale(1.15); }

.pcard--rail .pcard__foot { padding: 12px 14px 18px; display: grid; gap: 3px; }
.pcard--rail .pcard__line { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.pcard--rail .pcard__title {
  margin: 0; font-family: var(--font-body, sans-serif);
  font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
  line-height: 1.35; color: var(--ink, #0b0b0c); background-image: none;
}
.pcard--rail .pcard__price { font-size: 13px; font-weight: 400; white-space: nowrap; }
.pcard--rail .pcard__price .price__was { color: var(--muted, #6e6e6e); margin-left: 7px; }
.pcard--rail .pcard__colour { margin: 0; font-size: 13px; color: var(--muted, #6e6e6e); }
.pcard--rail .pcard__swatches { margin-top: 6px; display: flex; align-items: center; gap: 7px; }
.pcard--rail .pcard__swatch { width: 11px; height: 11px; }
.pcard--rail .pcard__colour-count { font-size: 12px; color: var(--muted, #6e6e6e); margin-left: 3px; }
.pcard--rail .pcard__flag { top: 12px; left: 12px; }

/* ==========================================================================
   Product rail — edge to edge, cards flush, hairlines between them.
   ========================================================================== */
.section--flushx { padding-left: 0; padding-right: 0; }
.prail__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: var(--prail-w, 20%);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  border-top: 1px solid var(--line, #e5e5e5);
  border-bottom: 1px solid var(--line, #e5e5e5);
  scrollbar-width: none;
}
.prail__track::-webkit-scrollbar { display: none; }
.prail__cell {
  scroll-snap-align: start;
  border-right: 1px solid var(--line, #e5e5e5);
  min-width: 0;
}
.prail__cell:last-child { border-right: 0; }
.section--invert .prail__track,
.section--invert .prail__cell { border-color: var(--hair-light, rgba(255,255,255,.22)); }

.prail__foot { display: flex; justify-content: center; padding-top: clamp(28px, 3vw, 44px); }
.prail__link {
  display: inline-flex; align-items: center; gap: 12px;
  color: inherit; text-decoration: none;
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  padding-bottom: 8px; border-bottom: 1px solid currentColor;
}
.prail__arrow { transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.prail__link:hover .prail__arrow { transform: translateX(5px); }

@media (max-width: 749px) {
  .prail__track { grid-auto-columns: var(--prail-w-m, 60vw); }
}

/* Hero heading scale — a hero does not have to shout */
.hero--hmedium .hero__box h1 { font-size: calc(clamp(1.8rem, 1.1rem + 2.1vw, 2.9rem) * var(--heading-scale, 1)); }
.hero--hsmall  .hero__box h1 { font-size: calc(clamp(1.45rem, 1rem + 1.2vw, 2.1rem) * var(--heading-scale, 1)); letter-spacing: -.015em; }
.hero--hsmall .hero__box p, .hero--hmedium .hero__box p { font-size: 14px; }

/* Two actions side by side under the hero copy */
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero--center .hero__actions, .hero__box--center .hero__actions { justify-content: center; }
.hero__actions .button { min-width: 160px; justify-content: center; }

/* A rail with only a couple of products centres instead of hugging the left */
.prail__track--few { justify-content: center; }
@media (max-width: 749px) { .prail__track--few { justify-content: start; } }

/* ==========================================================================
   Collection head — a retail listing, not a campaign page.
   ========================================================================== */
.coll-head {
  /* Clears the overlay header, which sits on top of the first section. */
  padding-top: max(clamp(28px, 3.5vw, 52px), calc(var(--header-h, 64px) + 28px));
  padding-bottom: clamp(20px, 2.2vw, 30px);
  max-width: 68ch;
}
.collection-title { font-size: calc(clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem) * var(--heading-scale, 1)); }
.collection-title { margin: 0; line-height: 1.05; }
.coll-head__count {
  font-size: .38em; font-weight: 500; vertical-align: super; margin-left: .35em;
  color: var(--muted, #6e6e6e); letter-spacing: 0;
}
.coll-head__text { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--muted, #6e6e6e); }
.coll-head__text p { margin: 0 0 10px; }
.coll-count {
  margin: clamp(32px, 4vw, 56px) 0 0; text-align: center;
  font-size: 12px; letter-spacing: .06em; color: var(--muted, #6e6e6e);
}

/* ==========================================================================
   Rail card, corrected: no label strip, no box, and a quick-add drawn as a
   large thin cross in the bottom right rather than a button in a circle.
   ========================================================================== */

/* No box: the cards meet with nothing between them and the photo sits on the
   page, not in a tinted panel. */
.prail__track { border-top: 0; border-bottom: 0; }
.prail__cell { border-right: 0; }
.pcard--rail .pcard__img { background: transparent; }
.pcard--rail .pcard__media { background: transparent; }

/* Quick add: bottom right, hairline cross, nothing behind it. */
.pcard--rail.pcard--atc-icon .pcard__atc-wrap {
  position: absolute; right: 14px; bottom: 14px; top: auto; z-index: 3;
}
.pcard--rail.pcard--atc-icon .pcard__atc,
.pcard--rail .pcard__atc {
  width: 26px; height: 26px; padding: 0; min-width: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  color: var(--ink, #0b0b0c); opacity: .75;
  display: block; position: relative;
  transition: opacity .25s ease;
}
.pcard--rail.pcard--atc-icon .pcard__atc:hover,
.pcard--rail .pcard__atc:hover {
  background: transparent; color: var(--ink, #0b0b0c); opacity: 1; transform: none;
}
.pcard--rail .pcard__atc svg { display: none; }
.pcard--rail.pcard--atc-icon .pcard__atc svg { display: none; }
.pcard--rail .pcard__atc::before,
.pcard--rail .pcard__atc::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: currentColor; border-radius: 0; font-size: 0;
}
.pcard--rail .pcard__atc::before {
  width: 26px; height: 1px; transform: translate(-50%, -50%);
}
.pcard--rail .pcard__atc::after {
  width: 1px; height: 26px; transform: translate(-50%, -50%);
}

/* ==========================================================================
   Rail card interactions: the quick-add turns as you approach it, and the
   sizes rise out of the bottom of the photo when the card is hovered.
   Sold-out sizes stay visible with a line through them — telling someone a
   size exists but is gone is more useful than hiding it.
   ========================================================================== */
.pcard--rail .pcard__frame { overflow: hidden; }

.pcard--rail.pcard--atc-icon .pcard__atc-wrap { right: 18px; bottom: 18px; }
.pcard--rail .pcard__atc { transition: opacity .25s ease, transform .4s cubic-bezier(.16, 1, .3, 1); }
.pcard--rail .pcard__atc:hover { transform: rotate(90deg); }

.pcard__sizes {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 2px;
  padding: 10px 14px;
  background: linear-gradient(to top, rgba(255,255,255,.96) 55%, rgba(255,255,255,0));
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.16, 1, .3, 1);
}
.pcard--rail:hover .pcard__sizes,
.pcard--rail:focus-within .pcard__sizes { opacity: 1; transform: none; pointer-events: auto; }
.pcard__sizes form { margin: 0; }
.pcard__size {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  padding: 5px 9px; font-family: var(--font-body, sans-serif);
  font-size: 12px; letter-spacing: .06em; color: var(--ink, #0b0b0c);
  transition: background .2s ease, color .2s ease;
}
.pcard__size:hover { background: var(--ink, #0b0b0c); color: var(--bg, #fff); }
.pcard__size--out {
  color: var(--muted, #6e6e6e); cursor: default; position: relative; opacity: .7;
}
.pcard__size--out::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 50%;
  height: 1px; background: currentColor;
}
@media (hover: none) {
  .pcard__sizes { position: static; opacity: 1; transform: none; pointer-events: auto;
    background: none; padding: 10px 14px 0; }
}

/* On a card that has sizes, the sizes ARE the add to cart — so the cross
   steps aside on hover instead of fighting them for the same corner. */
.pcard--rail.pcard--sized:hover .pcard__atc-wrap,
.pcard--rail.pcard--sized:focus-within .pcard__atc-wrap {
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.pcard--rail .pcard__atc-wrap { transition: opacity .25s ease; }
.pcard--rail.pcard--sized .pcard__sizes { padding-right: 14px; }

/* Banner text can sit anywhere on the image: three positions up and down,
   three across, set per banner in the theme editor. */
.banner--vtop .banner__content { align-items: start; }
.banner--vmiddle .banner__content { align-items: center; }
.banner--vbottom .banner__content { align-items: end; }

/* Hero text can sit high, centred or low on the image. */
.hero__content--top { align-items: start; }
.hero__content--middle { align-items: center; }
.hero__content--bottom { align-items: end; }

/* Campaign poster: the full nine positions. */
.poster--tl .poster__inner { align-items: flex-start; justify-content: flex-start; }
.poster--tc .poster__inner { align-items: flex-start; justify-content: center; text-align: center; }
.poster--tr .poster__inner { align-items: flex-start; justify-content: flex-end; text-align: right; }
.poster--mr .poster__inner { align-items: center; justify-content: flex-end; text-align: right; }
.poster--br .poster__inner { align-items: flex-end; justify-content: flex-end; text-align: right; }
.poster--tr .poster__text, .poster--mr .poster__text, .poster--br .poster__text { margin-left: auto; }

/* ==========================================================================
   Product page: size selection
   Sold-out values stay on the page with a line through them, matching the
   cards. A size guide opens in place under the row rather than in a modal,
   so the choice and the measurements can be read at the same time.
   ========================================================================== */
.opt__label { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: 100%; }
.opt__guide {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body, sans-serif); font-size: 12px; letter-spacing: .04em;
  color: var(--muted, #6e6e6e); text-decoration: underline; text-underline-offset: 3px;
}
.opt__guide:hover { color: var(--ink, #0b0b0c); }

.opt__values label.opt__value--out {
  position: relative; color: var(--muted, #6e6e6e); opacity: .6;
}
.opt__values label.opt__value--out::after {
  content: ""; position: absolute; left: 8%; right: 8%; top: 50%;
  height: 1px; background: currentColor; pointer-events: none;
}
.opt--swatch label.opt__value--out::after { left: -2px; right: -2px; }

.sguide { margin-top: 16px; border-top: 1px solid var(--line, #e5e5e5); padding-top: 14px; }
.sguide[hidden] { display: none; }
.sguide__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sguide__table th, .sguide__table td {
  text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line, #e5e5e5);
}
.sguide__table th { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
.sguide__table tr:last-child td { border-bottom: 0; }
.sguide__note { margin: 10px 0 0; font-size: 12px; color: var(--muted, #6e6e6e); }

/* ==========================================================================
   Buttons sitting on photography.
   A solid white block stamped on an image reads as a banner ad. These sit
   as translucent panels instead: the picture stays visible through them and
   the label does the work.
   ========================================================================== */
.hero__box .button,
.banner__box .button,
.poster__body .button {
  background: rgba(22, 22, 24, .55);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
  color: #fff;
  border: 0; border-radius: 0;
  padding: 15px 30px;
  font-family: var(--font-body, sans-serif);
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  transition: background .25s ease;
}
.hero__box .button:hover,
.banner__box .button:hover,
.poster__body .button:hover { background: rgba(22, 22, 24, .78); }

/* The hero's second action is the quieter of the two */
.hero__box .button--ghost {
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}
.hero__box .button--ghost:hover { background: rgba(255, 255, 255, .24); }

/* Dark text variant, for a button over a pale photograph */
.hero__box--dark .button,
.banner__box--dark .button {
  background: rgba(255, 255, 255, .82); color: var(--ink, #0b0b0c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.hero__box--dark .button:hover,
.banner__box--dark .button:hover { background: #fff; }

/* Sold out takes the price's place, in the same size, quietly */
.pcard--rail .pcard__soldout {
  font-size: 13px; font-weight: 400; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted, #6e6e6e); white-space: nowrap;
}

/* ==========================================================================
   Product rail arrows
   Round, sitting over the left and right edges of the row. They appear only
   when there is actually something to scroll to in that direction, so the
   row never offers a dead control.
   ========================================================================== */
.prail { position: relative; }
.prail__arrow {
  position: absolute; top: 38%; z-index: 4;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--bg, #fff); color: var(--ink, #0b0b0c);
  border: 0; box-shadow: 0 1px 10px rgba(0, 0, 0, .14);
  font-size: 16px; line-height: 1;
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.prail__arrow[hidden] { display: none; }
.prail__arrow:hover { transform: scale(1.07); box-shadow: 0 2px 16px rgba(0, 0, 0, .2); }
.prail__arrow--prev { left: 14px; }
.prail__arrow--next { right: 14px; }

@media (max-width: 749px) { .prail__arrow { display: none; } }

/* Outlined button — the quiet variant both reference sites use over imagery:
   a hairline box, no fill, small tracked caps. */
.button--outline,
.hero--duo .hero__panel-cta {
  display: inline-block;
  background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 0; padding: 14px 34px;
  font-family: var(--font-body, sans-serif);
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease;
}
.button--outline:hover,
.hero--duo .hero__panel-cta:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }

/* The duo panels centre their label and button, as a category split does */
.hero--duo .hero__panel-body { text-align: center; display: grid; justify-items: center; gap: 16px; }