/* (C)2026 Badger Commerce Limited, a subsidiary of Kedos Consulting Limited */

/* ==========================================================================================
   ATELIER
   An editorial, image-first premium theme. Cool stone paper and deep ink, one glaze-green accent,
   a display serif (Instrument Serif) against a quiet grotesque (Hanken Grotesk) whose small caps
   carry every label. Corners are 2px. Listings run as an asymmetric grid of mixed card sizes;
   on the "feature" cards, and on the main product picture, the product's name is set enormous
   in the serif and cropped by the bottom edge of the picture (the signature). Hover swaps to the
   second picture. Filters drop down from a bar rather than sitting in a rail, the header is
   transparent over a hero where one exists, and "added to basket" slides over from the right.

   Layered over Nova (and Nova over Bootstrap): Nova's bdgr.css loads first, this file second,
   the Design Brief's theme.css (brand colour / font / shape) last.

   Structure of this file
   1. Tokens: Atelier's palette, and Nova's design tokens re-pointed at it, so every page Atelier
      has not replaced (basket, checkout, account, blog, content extensions) picks up the palette,
      fonts and corners without a template of its own.
   2. Base and small parts (buttons, pills, chips, badges).
   3. Header, menu, search sheet, drawer.
   4. Listings: heading, filter bar, drawer, grid, cards, pagination, rails.
   5. Footer.
   6. Product page.
   7. "Added to basket" slide-over.
   8. Nova compatibility, forms, the pages Atelier does not replace.
   ========================================================================================== */

:root {
  /* ── Atelier palette ─────────────────────────────────────────────────────────────────── */
  --at-paper: #F0F2F1;
  --at-stone: #E3E7E6;
  --at-mist: #CDD5D3;
  --at-ink: #11181B;
  --at-ink-soft: #46535A;
  --at-line: rgba(17, 24, 27, 0.16);
  --at-glaze: #2C6A58;
  --at-glaze-deep: #17352F;
  --at-glaze-pale: #A9CBBD;
  --at-on-dark: #F4F7F6;
  --at-on-dark-soft: rgba(244, 247, 246, 0.74);
  --at-danger: #9A2F2F;

  /* ── Nova tokens, re-pointed ─────────────────────────────────────────────────────────── */
  /* Glaze green: white text on it is 6:1, so Nova's white-on-primary buttons stay legible. */
  --color-primary: #2C6A58;
  --color-primary-dark: #205244;
  --color-primary-light: #A9CBBD;
  --color-primary-50: #E6F0EC;
  --color-primary-ring: rgba(44, 106, 88, 0.24);
  --color-primary-tint: rgba(44, 106, 88, 0.07);
  --color-secondary: #17352F;
  --color-secondary-dark: #0F2621;
  --color-accent: #A9CBBD;

  /* A cool stone neutral ramp. */
  --color-gray-50: #F6F8F7;
  --color-gray-100: #F0F2F1;
  --color-gray-200: #E3E7E6;
  --color-gray-300: #CDD5D3;
  --color-gray-400: #8C9A9F;
  --color-gray-500: #5E6C72;
  --color-gray-600: #46535A;
  --color-gray-700: #34424A;
  --color-gray-800: #222E33;
  --color-gray-900: #11181B;
  --color-gray-950: #0B1113;

  --color-success: #2C6A58;
  --color-error: #9A2F2F;
  --color-error-dark: #7A2323;
  --color-warning: #8A5A12;

  --font-family-base: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  /* Instrument Serif has a single (regular) weight; anything heavier would be faux-bold. */
  --font-weight-heading: 400;
  --letter-spacing-heading: -0.01em;

  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 2px;
  --radius-2xl: 2px;

  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: 0 8px 24px -12px rgba(17, 24, 27, 0.25);
  --shadow-lg: 0 16px 40px -16px rgba(17, 24, 27, 0.3);
  --shadow-xl: 0 24px 60px -20px rgba(17, 24, 27, 0.35);

  --product-image-ratio: 4 / 5;
  --container-max-width: 1480px;
  --container-padding: clamp(16px, 4vw, 56px);

  /* ── Atelier roles ───────────────────────────────────────────────────────────────────── */
  --at-font-display: var(--font-family-display);
  --at-font-body: var(--font-family-base);
  --at-gutter: clamp(16px, 4vw, 56px);
  --at-col-gap: clamp(12px, 2vw, 32px);
  --at-header-h: 68px;
  --at-radius: 2px;
  --at-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --at-dur: 0.45s;
  --at-ls-caps: 0.14em;
  /* Aliases used by the standalone auth pages (fragment/auth-head). */
  --at-surface: var(--at-paper);
  --at-subtle: var(--at-stone);
  --at-line-strong: var(--at-ink-soft);
  --at-header-offset: var(--at-header-h);   /* set by atelier.js to the header's real height */
}
@media (max-width: 759px) { :root { --at-header-h: 60px; } }

/* ==========================================================================================
   BASE
   ========================================================================================== */

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  background: var(--at-paper);
  color: var(--at-ink);
  font-family: var(--at-font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

a { color: inherit; }
a:hover { color: inherit; }
/* Links inside running copy (tenant content) stay recognisable. */
:where(p, li, dd, td) > a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--at-glaze);
  outline-offset: 3px;
  box-shadow: none;
}

.at-wrap {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--at-gutter);
}

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

.at-num { font-variant-numeric: tabular-nums; }

.at-caps {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--at-ls-caps);
  text-transform: uppercase;
}

.at-icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.at-skip {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 2000;
  padding: 12px 16px;
  background: var(--at-ink);
  color: #fff;
}
.at-skip:focus { top: 16px; color: #fff; }
#at-content:focus { outline: none; }

.at-main { display: block; }

/* ==========================================================================================
   SMALL PARTS: buttons, pills, chips, badges, text links
   ========================================================================================== */

.at-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 1.6em;
  border: 1px solid var(--at-ink);
  border-radius: var(--at-radius);
  background: var(--at-ink);
  color: var(--at-paper);
  font: 500 0.75rem/1.1 var(--at-font-body);
  letter-spacing: var(--at-ls-caps);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.at-btn:hover { background: var(--at-glaze); border-color: var(--at-glaze); color: #fff; }
.at-btn[disabled], .at-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.at-btn--ghost { background: transparent; color: var(--at-ink); }
.at-btn--ghost:hover { background: var(--at-mist); border-color: var(--at-ink); color: var(--at-ink); }
.at-btn--text { background: transparent; border-color: transparent; color: var(--at-ink-soft); text-decoration: underline; text-underline-offset: 3px; letter-spacing: 0.08em; }
.at-btn--text:hover { background: transparent; border-color: transparent; color: var(--at-ink); }
.at-btn--block { display: flex; width: 100%; }
.at-btn--sm { min-height: 40px; padding: 0 1.1em; }

.at-textbtn {
  padding: 8px 0;
  border: 0;
  background: none;
  color: inherit;
  font: 500 0.75rem/1 var(--at-font-body);
  letter-spacing: var(--at-ls-caps);
  text-transform: uppercase;
  cursor: pointer;
}
.at-textbtn:hover { text-decoration: underline; text-underline-offset: 4px; }

.at-linkline {
  display: inline-block;
  width: fit-content;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--at-ls-caps);
  text-transform: uppercase;
  text-decoration: none;
}
.at-linkline:hover { color: var(--at-glaze); }

.at-pill {
  padding: 0.8em 1.2em;
  border: 1px solid var(--at-ink);
  border-radius: var(--at-radius);
  background: transparent;
  color: var(--at-ink);
  font: 500 0.6875rem/1 var(--at-font-body);
  letter-spacing: var(--at-ls-caps);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.at-pill:hover { background: var(--at-mist); }
.at-pill[aria-expanded="true"] { background: var(--at-ink); color: var(--at-paper); }

.at-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.at-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.85em;
  border-radius: var(--at-radius);
  background: var(--at-stone);
  color: var(--at-ink);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: background-color 0.2s;
}
.at-chip:hover { background: var(--at-mist); color: var(--at-ink); }
.at-chip.is-current { background: var(--at-ink); color: var(--at-stone); }

.at-badge {
  display: inline-block;
  padding: 0.4em 0.8em;
  border-radius: var(--at-radius);
  background: var(--at-paper);
  color: var(--at-ink);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--at-ls-caps);
  line-height: 1.2;
  text-transform: uppercase;
}
.at-badge--out { background: var(--at-ink); color: var(--at-paper); }

/* ==========================================================================================
   HEADER
   Solid and sticky by default. Only where a hero is the first thing in <main> (matched with :has(),
   so a browser without it just keeps the solid bar) does the bar go transparent and sit over it;
   atelier.js adds .is-solid once the shopper scrolls past, or any panel is open.
   ========================================================================================== */

.at-announce {
  margin: 0;
  padding: 9px var(--at-gutter);
  background: var(--at-ink);
  color: var(--at-on-dark);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--at-ls-caps);
  text-align: center;
  text-transform: uppercase;
}
.at-announce a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.at-header {
  --at-hdr-fg: var(--at-ink);
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--at-header-h);
  background: var(--at-paper);
  color: var(--at-hdr-fg);
  border-bottom: 1px solid var(--at-line);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.at-header:has(~ .at-main > :is(.nova-hero, .at-hero):first-child, ~ .at-main > section:first-child > :is(.nova-hero, .at-hero):first-child) {
  margin-bottom: calc(var(--at-header-h) * -1);
}
.at-header:has(~ .at-main > :is(.nova-hero, .at-hero):first-child, ~ .at-main > section:first-child > :is(.nova-hero, .at-hero):first-child):not(.is-solid):not(:hover):not(:focus-within) {
  --at-hdr-fg: #fff;
  background: transparent;
  border-bottom-color: transparent;
}
.at-header:has(~ .at-main > :is(.nova-hero, .at-hero):first-child, ~ .at-main > section:first-child > :is(.nova-hero, .at-hero):first-child):not(.is-solid):not(:hover):not(:focus-within)::before {
  content: '';
  position: absolute;
  inset: 0 0 -24px 0;
  z-index: -1;
  background: linear-gradient(rgba(8, 20, 18, 0.5), transparent);
  pointer-events: none;
}

.at-header__in {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "left brand tools";
  align-items: center;
  column-gap: 24px;
  padding-inline: var(--at-gutter);
}
.at-header__menu, .at-header__nav { grid-area: left; }
.at-header__brand { grid-area: brand; }
.at-header__tools { grid-area: tools; }

.at-header__link,
.at-header__menu,
.at-menu__link {
  position: relative;
  padding: 8px 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--at-font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--at-ls-caps);
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.at-header__link::after,
.at-header .at-menu__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--at-ease);
}
.at-header__link:hover::after,
.at-header .at-menu__item:hover > .at-menu__row > .at-menu__link::after,
.at-header .at-menu__item.is-current > .at-menu__row > .at-menu__link::after,
.at-header .at-menu__item.is-open > .at-menu__row > .at-menu__link::after { transform: scaleX(1); }

.at-header__brand {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.at-header__name {
  display: block;
  font-family: var(--at-font-display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
}
.at-header__logo { display: block; height: 34px; width: auto; }
.at-header__name--with-logo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.at-header__tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}
/* Room after the label for the bracketed count; no badge overhangs anything. */
.at-action--basket { display: inline-flex; gap: 0.4em; align-items: baseline; white-space: nowrap; }
.at-action__bracket { margin-left: 8px; letter-spacing: 0.04em; }
.at-action--basket .at-action__label + .at-action__bracket { margin-left: 0; }

.at-header__menu { display: none; justify-self: start; }

/* Category menu (desktop): small-caps links, a full-width panel beneath the bar. */
.at-header__nav .at-menu { display: flex; gap: clamp(16px, 1.6vw, 32px); margin: 0; padding: 0; list-style: none; }
.at-header__nav .at-menu__link { white-space: nowrap; }
.at-menu__item { list-style: none; }
.at-menu__row { display: flex; align-items: center; gap: 2px; }
.at-menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.at-menu__caret { margin-left: 4px; font-size: 0.875rem; }
.at-header .at-menu__toggle { display: none; }
@media (hover: none) { .at-header .at-menu__toggle { display: inline-flex; } }
.at-header .at-menu__link--button { display: inline-flex; align-items: center; }

.at-menu__panel {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  padding-block: 32px 40px;
  border-bottom: 1px solid var(--at-line);
  background: var(--at-paper);
  color: var(--at-ink);
  box-shadow: 0 24px 40px -28px rgba(17, 24, 27, 0.35);
}
.at-menu__item.is-open > .at-menu__panel { display: block; }
@media (hover: hover) {
  .at-header .at-menu__item.has-panel:hover > .at-menu__panel,
  .at-header .at-menu__item.has-panel:focus-within > .at-menu__panel { display: block; }
}
.at-menu__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 48px;
  align-items: start;
}
.at-menu__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px 32px; }
.at-menu__heading {
  display: block;
  margin: 0 0 12px;
  color: var(--at-glaze);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--at-ls-caps);
  text-transform: uppercase;
  text-decoration: none;
}
.at-menu__heading--link:hover { text-decoration: underline; text-underline-offset: 3px; }
.at-menu__list { margin: 0; padding: 0; list-style: none; }
.at-menu__list--flow { columns: 2; column-gap: 32px; }
.at-menu__sublink {
  display: inline-block;
  padding: 4px 0;
  font-family: var(--at-font-display);
  font-size: 1.375rem;
  line-height: 1.15;
  text-decoration: none;
}
.at-menu__sublink:hover { text-decoration: underline; text-underline-offset: 4px; }
.at-menu__more, .at-menu__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--at-ls-caps);
  text-decoration: none;
  text-transform: uppercase;
}
.at-menu__more:hover, .at-menu__all:hover { color: var(--at-glaze); }
.at-menu__group--panel { grid-column: 1 / -1; }

/* Search sheet: drops from the bar. Hidden until asked for (atelier.js); <noscript> in head shows it. */
.at-searchsheet {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  padding: 16px var(--at-gutter) 20px;
  border-bottom: 1px solid var(--at-line);
  background: var(--at-paper);
  color: var(--at-ink);
  box-shadow: 0 24px 40px -28px rgba(17, 24, 27, 0.35);
}
.at-searchsheet.is-open { display: block; }
.at-searchsheet__in { display: flex; align-items: center; gap: 24px; max-width: 960px; margin-inline: auto; }
.at-searchbar { position: relative; flex: 1 1 auto; min-width: 0; }
.at-search {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border-bottom: 1px solid var(--at-ink);
}
.at-search__icon { font-size: 1.25rem; color: var(--at-ink-soft); }
.at-search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.7em 0;
  border: 0;
  background: transparent;
  color: var(--at-ink);
  font-family: var(--at-font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  outline: none;
}
.at-search__input::placeholder { color: var(--at-ink-soft); opacity: 0.8; }
/* the header search scope (fragment/search-scope) reads like the text it sits beside */
.at-search__scope { color: var(--at-ink); }
.at-search__input:focus-visible { outline: none; }
.at-search__input::-webkit-search-decoration,
.at-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.at-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 0;
  background: transparent;
  color: var(--at-ink-soft);
  font-size: 1.125rem;
  cursor: pointer;
}
.at-search__clear[hidden] { display: none; }
.at-search__submit {
  padding: 0 0 0 8px;
  border: 0;
  background: none;
  color: var(--at-ink);
  font: 500 0.75rem/1 var(--at-font-body);
  letter-spacing: var(--at-ls-caps);
  text-transform: uppercase;
  cursor: pointer;
}
.at-search__submit:hover { color: var(--at-glaze); }
.at-searchsheet__close { flex: none; padding: 8px 0; border: 0; background: none; color: var(--at-ink-soft); font: 500 0.75rem/1 var(--at-font-body); letter-spacing: var(--at-ls-caps); text-transform: uppercase; cursor: pointer; }
.at-searchsheet__close:hover { color: var(--at-ink); }

/* Suggestions panel (rendered by Nova's searchBar.js) */
.at-search__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  z-index: 60;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: 8px;
  background: var(--at-paper);
  border: 1px solid var(--at-line);
  border-radius: var(--at-radius);
  box-shadow: var(--shadow-lg);
}
.at-search__panel[hidden] { display: none; }
.at-searchbar .nova-searchbar__section-title {
  padding: 10px 12px 4px;
  color: var(--at-glaze);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--at-ls-caps);
  text-transform: uppercase;
}
.at-searchbar .nova-searchbar__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--at-radius);
  color: var(--at-ink);
  text-decoration: none;
}
.at-searchbar .nova-searchbar__option:hover,
.at-searchbar .nova-searchbar__option.is-active,
.at-searchbar .nova-searchbar__footer:hover,
.at-searchbar .nova-searchbar__footer.is-active { background: var(--at-stone); }
.at-searchbar .nova-searchbar__thumb {
  width: 48px; height: 60px;
  flex: none;
  object-fit: cover;
  background: var(--at-mist);
  border-radius: var(--at-radius);
}
.at-searchbar .nova-searchbar__cat-icon {
  width: 48px; height: 48px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--at-radius);
  background: var(--at-stone);
  color: var(--at-ink);
}
.at-searchbar .nova-searchbar__option-text { flex: 1 1 auto; min-width: 0; }
.at-searchbar .nova-searchbar__name {
  font-family: var(--at-font-display);
  font-size: 1.125rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.at-searchbar .nova-searchbar__brand {
  color: var(--at-ink-soft);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.at-searchbar .nova-searchbar__price-row { display: flex; align-items: baseline; gap: 8px; flex: none; }
.at-searchbar .nova-searchbar__price { font-size: 0.875rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.at-searchbar .nova-searchbar__compare { color: var(--at-ink-soft); font-size: 0.75rem; text-decoration: line-through; }
.at-searchbar .nova-searchbar__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 12px;
  border-top: 1px solid var(--at-line);
  color: var(--at-ink);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--at-ls-caps);
  text-decoration: none;
  text-transform: uppercase;
}
.at-searchbar .nova-searchbar__empty { padding: 20px 12px; color: var(--at-ink-soft); font-size: 0.875rem; text-align: center; }

/* Small screens: menu button instead of the category row; Search and Account move into the drawer. */
@media (max-width: 759px) {
  .at-header__nav, .at-header__link--search, .at-header__link--account { display: none; }
  .at-header__menu { display: block; }
  .at-header__name { font-size: 1.5rem; }
  .at-header__tools { gap: 16px; }
  .at-search__input { font-size: 1.25rem; }
  .at-searchsheet__in { gap: 12px; }
  /* the category scope takes a line of its own under the term, so neither is squeezed */
  .at-search:has(.at-search__scope) { flex-wrap: wrap; row-gap: 0; }
  .at-search__scope { order: 5; flex: 1 0 100%; max-width: none; padding: 10px 1.9em 10px 0; border-left: 0; border-top: 1px solid var(--at-line); background-position: right 0.2em center; }
}
@media (min-width: 760px) { .at-drawer { display: none !important; } }

/* Drawer: the same menu, as a list of large serif lines with an accordion for sub-categories. */
.at-drawer { position: fixed; inset: 0; z-index: 80; }
.at-drawer[hidden] { display: none; }
.at-drawer__scrim { position: absolute; inset: 0; background: rgba(10, 20, 22, 0.5); opacity: 0; transition: opacity 0.3s; }
.at-drawer.is-open .at-drawer__scrim { opacity: 1; }
.at-drawer__panel {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  width: min(420px, 92vw);
  background: var(--at-paper);
  color: var(--at-ink);
  transform: translateX(-100%);
  transition: transform 0.4s var(--at-ease);
}
.at-drawer.is-open .at-drawer__panel { transform: none; }
.at-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--at-gutter); border-bottom: 1px solid var(--at-line); }
.at-drawer__title { font-family: var(--at-font-display); font-size: 1.75rem; line-height: 1; }
.at-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 8px var(--at-gutter); }
.at-drawer__body .at-menu { margin: 0; padding: 0; list-style: none; }
.at-drawer__body .at-menu__row { justify-content: space-between; border-bottom: 1px solid var(--at-line); }
.at-drawer__body .at-menu__link {
  flex: 1 1 auto;
  padding: 12px 0;
  font-family: var(--at-font-display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: none;
}
.at-drawer__body .at-menu__toggle { width: 44px; height: 44px; font-size: 1.125rem; }
.at-drawer__body .at-menu__toggle .at-icon { transition: transform 0.25s; }
.at-drawer__body .at-menu__item.is-open > .at-menu__row .at-icon { transform: rotate(180deg); }
.at-drawer__body .at-menu__panel { position: static; padding: 8px 0 16px 16px; border: 0; box-shadow: none; background: transparent; }
.at-drawer__body .at-menu__inner { display: block; }
.at-drawer__body .at-menu__groups { display: block; }
.at-drawer__body .at-menu__group { margin-bottom: 12px; }
.at-drawer__body .at-menu__list--flow { columns: 1; }
.at-drawer__body .at-menu__sublink { font-family: var(--at-font-body); font-size: 1rem; }
.at-drawer__foot { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 16px var(--at-gutter) 24px; border-top: 1px solid var(--at-line); }
.at-drawer__link { font-size: 0.75rem; font-weight: 500; letter-spacing: var(--at-ls-caps); text-decoration: none; text-transform: uppercase; }
html.at-scroll-lock { overflow: hidden; }

/* ==========================================================================================
   BREADCRUMB (Nova markup)
   ========================================================================================== */

.nova-breadcrumb { padding-block: 20px 0; }
.nova-breadcrumb__list { font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--at-ls-caps); text-transform: uppercase; }
.nova-breadcrumb__item,
.nova-breadcrumb__link { color: var(--at-ink-soft); }
.nova-breadcrumb__link:hover { color: var(--at-ink); text-decoration: underline; text-underline-offset: 3px; }
.nova-breadcrumb__item + .nova-breadcrumb__item::before { color: var(--at-ink-soft); }
.nova-breadcrumb__item[aria-current="page"], .nova-breadcrumb__item:last-child { color: var(--at-ink); }

/* Content-page (/p/...) trail: sits between the header and the page. When the header floats transparent over a
   leading hero, the trail floats with it: pinned just under the header in white, taking no space, so the hero
   still starts at the top of the page. */
.nova-page-crumbs .nova-breadcrumb { padding-block: 14px; margin: 0; }
.at-header:has(~ .at-main > :is(.nova-hero, .at-hero):first-child, ~ .at-main > section:first-child > :is(.nova-hero, .at-hero):first-child) ~ .nova-page-crumbs {
  position: relative;
  z-index: 39;
  height: 44px;
  margin-top: var(--at-header-h);
  margin-bottom: calc((var(--at-header-h) + 44px) * -1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.at-header:has(~ .at-main > :is(.nova-hero, .at-hero):first-child, ~ .at-main > section:first-child > :is(.nova-hero, .at-hero):first-child) ~ .nova-page-crumbs :is(.nova-breadcrumb__item, .nova-breadcrumb__link, .nova-breadcrumb__current),
.at-header:has(~ .at-main > :is(.nova-hero, .at-hero):first-child, ~ .at-main > section:first-child > :is(.nova-hero, .at-hero):first-child) ~ .nova-page-crumbs .nova-breadcrumb__item + .nova-breadcrumb__item::before {
  color: #fff;
}

/* ==========================================================================================
   LISTINGS: heading, filter bar, filter drawer
   ========================================================================================== */

.at-plp-head { padding-block: 32px 8px; }
.at-plp-head__eyebrow { margin: 0 0 12px; color: var(--at-glaze); }
.at-plp-head__title {
  margin: 0;
  font-family: var(--at-font-display);
  font-size: clamp(3.25rem, 9vw, 7rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.at-plp-head__intro {
  max-width: 34em;
  margin-top: 20px;
  font-family: var(--at-font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.18;
  text-wrap: pretty;
}
.at-plp-head__intro p { margin: 0 0 0.6em; }
/* "Results for … in …" on a category searched with q, and the search-in-this-category box */
.at-plp-head__scope { margin: 12px 0 0; font-size: 0.9375rem; color: var(--at-ink-soft); }
.at-plp-head__scope a { color: var(--at-ink); }
.at-scope-search { display: flex; align-items: stretch; max-width: 420px; margin: 20px 0 0; border-bottom: 1px solid var(--at-ink); }
.at-scope-search:focus-within { border-bottom-color: var(--at-glaze); box-shadow: 0 1px 0 var(--at-glaze); }
.at-scope-search__input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0; border: 0; background: transparent; color: var(--at-ink); font-size: 16px; outline: none; }
.at-scope-search__btn { flex: none; width: 44px; border: 0; background: transparent; color: var(--at-ink); cursor: pointer; }
.at-scope-search__btn .at-icon { font-size: 18px; }
.at-plp-head__intro em { color: var(--at-glaze); }
.at-plp-head__intro a { text-decoration: underline; text-underline-offset: 4px; }
.at-plp-head--search { padding-block-end: 0; }

.at-fbar {
  position: sticky;
  top: var(--at-header-offset);
  z-index: 30;
  margin-top: 28px;
  background: rgba(240, 242, 241, 0.96);
  border-block: 1px solid var(--at-line);
}
@supports (backdrop-filter: blur(8px)) {
  .at-fbar { background: rgba(240, 242, 241, 0.82); backdrop-filter: blur(10px); }
}
.at-fbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 12px var(--at-gutter);
}
.at-fbar__count { margin: 0 auto 0 0; color: var(--at-ink-soft); }
.at-fbar__badge {
  display: inline-block;
  min-width: 1.6em;
  margin-left: 0.4em;
  padding: 0.15em 0.4em;
  border-radius: var(--at-radius);
  background: var(--at-glaze);
  color: #fff;
  text-align: center;
}
.at-pill[aria-expanded="true"] .at-fbar__badge { background: var(--at-paper); color: var(--at-ink); }

.at-applied { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.at-applied .at-chip .at-icon { font-size: 0.75rem; }

.at-sort { display: flex; align-items: center; gap: 8px; margin: 0; }
.at-sort__label { margin: 0; color: var(--at-ink-soft); font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--at-ls-caps); text-transform: uppercase; }
.at-select { position: relative; display: inline-flex; align-items: center; }
.at-select__control {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.3em 1.6em 0.3em 0.2em;
  border: 0;
  border-bottom: 1px solid var(--at-ink);
  border-radius: 0;
  background: transparent;
  color: var(--at-ink);
  font-family: var(--at-font-body);
  font-size: 0.875rem;
  cursor: pointer;
}
.at-select__chevron { position: absolute; right: 2px; pointer-events: none; font-size: 0.875rem; }

/* Filter drawer: columns dropped from the bar. Always open without JS. */
.at-filters { border-top: 1px solid var(--at-line); background: var(--at-paper); }
.at-js .at-filters { display: none; }
.at-js .at-filters.is-open { display: block; }
.at-filters__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 32px;
  align-items: end;
  padding: 32px var(--at-gutter);
}
.at-facets { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 32px 40px; }
.at-facet__title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--at-ink-soft); }
.at-facet__selected { display: inline-block; min-width: 1.5em; padding: 0.1em 0.4em; border-radius: var(--at-radius); background: var(--at-glaze); color: #fff; font-size: 0.625rem; text-align: center; }
.at-facet__values { margin: 0; padding: 0; list-style: none; }
.at-facet__values.is-long:not(.is-expanded) li:nth-child(n+7) { display: none; }
.at-facet__value {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  color: var(--at-ink);
  font-size: 0.875rem;
  text-decoration: none;
}
.at-facet__box {
  flex: none;
  width: 16px; height: 16px;
  border: 1px solid var(--at-ink);
  border-radius: var(--at-radius);
  background: transparent;
  transition: background-color 0.15s;
}
.at-facet__value:hover .at-facet__box { background: var(--at-mist); }
.at-facet__values .is-selected .at-facet__box {
  background: var(--at-glaze) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center / 100% no-repeat;
  border-color: var(--at-glaze);
}
.at-facet__label { flex: 1 1 auto; min-width: 0; }
.at-facet__count { color: var(--at-ink-soft); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.at-facet__more { margin-top: 6px; padding: 4px 0; border: 0; background: none; color: var(--at-ink); font-size: 0.8125rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.at-facet__more[hidden] { display: none; }
/* Groups the results chose are the columns; the rest fold away under "More filters", full width below them */
.at-facets-more { grid-column: 1 / -1; border-top: 1px solid var(--at-line); padding-top: 16px; }
.at-facets-more__toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--at-ink); cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.at-facets-more__toggle::-webkit-details-marker { display: none; }
.at-facets--more { margin-top: 16px; }
/* Price: min and max with their captions above, the dash and Go on the input row */
.at-pricefilter { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; grid-template-rows: auto 40px; column-gap: 8px; row-gap: 4px; align-items: center; margin-top: 12px; }
.at-pricefilter__field { display: contents; }
.at-pricefilter__caption { grid-row: 1; color: var(--at-ink-soft); font-size: 0.75rem; }
.at-pricefilter__field:first-of-type .at-pricefilter__caption { grid-column: 1; }
.at-pricefilter__field:last-of-type .at-pricefilter__caption { grid-column: 3; }
.at-pricefilter__input { grid-row: 2; display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 8px; border: 1px solid var(--at-line-strong); border-radius: var(--at-radius); background: var(--at-surface); }
.at-pricefilter__field:first-of-type .at-pricefilter__input { grid-column: 1; }
.at-pricefilter__field:last-of-type .at-pricefilter__input { grid-column: 3; }
.at-pricefilter__input:focus-within { border-color: var(--at-glaze); }
.at-pricefilter__symbol { color: var(--at-ink-soft); font-size: 0.875rem; }
.at-pricefilter__input input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--at-ink); font-size: 16px; font-variant-numeric: tabular-nums; outline: none; }
.at-pricefilter__to { grid-row: 2; grid-column: 2; color: var(--at-ink-soft); }
.at-pricefilter__go { grid-row: 2; grid-column: 4; height: 40px; padding: 0 12px; border: 1px solid var(--at-ink); border-radius: var(--at-radius); background: transparent; color: var(--at-ink); font-size: 0.8125rem; cursor: pointer; }
.at-pricefilter__go:hover { background: var(--at-ink); color: var(--at-paper); }
/* category chips on listings carry a result count */
.at-chip__count { color: var(--at-ink-soft); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.at-chip.is-current .at-chip__count { color: var(--at-mist); }
.at-filters__clear { align-self: end; color: var(--at-ink); font-size: 0.875rem; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.at-filters__foot { display: flex; justify-content: flex-end; padding: 0 var(--at-gutter) 16px; }
@media (max-width: 759px) {
  .at-filters__body { grid-template-columns: 1fr; padding-block: 24px; }
  .at-facets { grid-template-columns: 1fr 1fr; gap: 24px; }
  /* the price inputs need the full width on a phone; dense packing fills the gap that leaves */
  .at-facet:has(.at-pricefilter) { grid-column: 1 / -1; }
  .at-facets { grid-auto-flow: row dense; }
  /* "Show N pieces" stays in reach at the foot of the screen while the drawer is open */
  .at-filters__foot { position: sticky; bottom: 0; z-index: 2; padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--at-line); background: var(--at-paper); }
  .at-fbar__count { flex-basis: 100%; }
  .at-sort { margin-left: auto; }
}

/* ==========================================================================================
   EDITORIAL GRID + CARDS
   Nine cards make a rhythm (positions by :nth-child, so the server needs no per-card data). The 1st,
   4th and 7th are the feature cards and carry the oversized name. .is-flat drops the rhythm for a
   plain grid: search results and any filtered or re-sorted list.
   ========================================================================================== */

.at-shelf { padding: 40px var(--at-gutter) 0; max-width: calc(var(--container-max-width) + 2 * var(--at-gutter)); margin-inline: auto; }
.at-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px var(--at-col-gap);
  align-items: start;
}
.at-grid > .at-card:nth-child(9n + 1),
.at-grid > .at-card:nth-child(9n + 7) { grid-column: 1 / -1; }

.at-card { position: relative; min-width: 0; }
.at-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  container-type: inline-size;
  background: var(--at-mist);
  border-radius: var(--at-radius);
  color: var(--at-ink);
}
.at-card:nth-child(9n + 1) .at-card__media { aspect-ratio: 5 / 6; }
.at-card:nth-child(9n + 2) .at-card__media,
.at-card:nth-child(9n + 8) .at-card__media,
.at-card:nth-child(9n + 9) .at-card__media { aspect-ratio: 1 / 1; }
.at-card:nth-child(9n + 7) .at-card__media { aspect-ratio: 4 / 3; }

.at-card__img,
.at-card__media img.at-card__img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: opacity var(--at-dur) var(--at-ease), transform 1.2s var(--at-ease);
}
.at-card__img--alt { opacity: 0; }
@media (hover: hover) {
  .at-card:hover .at-card__img--alt,
  .at-card:focus-within .at-card__img--alt { opacity: 1; }
}
.at-card__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 18%;
  object-fit: contain;
  opacity: 0.5;
}
.at-card.is-unavailable .at-card__img { opacity: 0.55; }

/* The signature. Size follows the name's length (--n, set by the template) so a short name is huge and a
   long one still shows its opening, cropped by the frame. Shown on the feature positions only. */
.at-card__display { display: none; }
.at-grid:not(.is-flat) > .at-card:nth-child(9n + 1) .at-card__display,
.at-grid:not(.is-flat) > .at-card:nth-child(9n + 4) .at-card__display,
.at-grid:not(.is-flat) > .at-card:nth-child(9n + 7) .at-card__display {
  display: block;
  position: absolute;
  left: -0.03em;
  bottom: -0.2em;
  z-index: 2;
  font-family: var(--at-font-display);
  font-size: 3rem;
  font-size: clamp(2.5rem, calc(100cqw / (var(--n, 8) * 0.42)), 24cqw);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--at-ink);
  pointer-events: none;
}
/* A fade to chalk under the name keeps the ink legible on any photograph. */
.at-grid:not(.is-flat) > .at-card:nth-child(9n + 1) .at-card__media::after,
.at-grid:not(.is-flat) > .at-card:nth-child(9n + 4) .at-card__media::after,
.at-grid:not(.is-flat) > .at-card:nth-child(9n + 7) .at-card__media::after {
  content: '';
  position: absolute;
  inset: 40% 0 0 0;
  z-index: 1;
  background: linear-gradient(transparent, rgba(240, 242, 241, 0.82));
  pointer-events: none;
}

.at-card__badges { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; }

/* wraps so a sale price with its was-price drops under the title in a narrow card instead of running
   past its edge (and widening the page on a phone) */
.at-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-top: 12px; }
.at-card__meta > :first-child { min-width: 0; }
.at-card__title { margin: 0; font-family: var(--at-font-display); font-size: 1.5rem; font-weight: 400; line-height: 1.1; letter-spacing: 0; }
.at-card__title a { color: inherit; text-decoration: none; }
.at-card__title a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.at-card__brand { display: block; margin-top: 2px; color: var(--at-ink-soft); font-family: var(--at-font-body); font-size: 0.875rem; line-height: 1.4; }
.at-card__price { margin: 0; white-space: nowrap; font-size: 1rem; font-weight: 500; }
.at-card__from { margin-right: 0.3em; color: var(--at-ink-soft); font-weight: 400; }
.at-card__was { margin-left: 0.5em; color: var(--at-ink-soft); font-weight: 400; }
.at-card__now.is-sale { color: var(--at-glaze); }
.at-card__actions { margin-top: 8px; }
.at-card__actions form { margin: 0; }
.at-card__cta {
  display: inline-block;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--at-glaze);
  font: 500 0.6875rem/1.2 var(--at-font-body);
  letter-spacing: var(--at-ls-caps);
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.at-card__cta:hover { color: var(--at-ink); }

@media (min-width: 900px) {
  .at-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 112px; }
  .at-grid > .at-card:nth-child(9n + 1) { grid-column: 1 / 8; }
  /* square, not 5:6, on wide screens: the first feature card alone would otherwise fill the viewport */
  .at-grid:not(.is-flat) > .at-card:nth-child(9n + 1) .at-card__media { aspect-ratio: 1 / 1; }
  .at-grid > .at-card:nth-child(9n + 2) { grid-column: 9 / 13; align-self: end; }
  .at-grid > .at-card:nth-child(9n + 3) { grid-column: 1 / 5; }
  .at-grid > .at-card:nth-child(9n + 4) { grid-column: 5 / 9; margin-top: 112px; }
  .at-grid > .at-card:nth-child(9n + 5) { grid-column: 9 / 13; margin-top: 32px; }
  .at-grid > .at-card:nth-child(9n + 6) { grid-column: 1 / 6; margin-top: 112px; }
  .at-grid > .at-card:nth-child(9n + 7) { grid-column: 6 / 13; }
  .at-grid > .at-card:nth-child(9n + 8) { grid-column: 2 / 7; }
  .at-grid > .at-card:nth-child(9n + 9) { grid-column: 8 / 12; margin-top: 112px; }
  .at-card__title { font-size: 1.75rem; }
  .at-grid.is-flat { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 72px; }
  .at-grid.is-flat.at-grid--dense { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* The flat grid: even columns, one ratio, no offsets. */
.at-grid.is-flat > .at-card { grid-column: auto !important; margin-top: 0 !important; align-self: start; }
.at-grid.is-flat .at-card__media { aspect-ratio: 4 / 5 !important; }
.at-grid.is-flat .at-card__media::after { display: none !important; }
/* A one-off unrelated item in the list (e.g. a page of two products) must not leave a hole. */
.at-grid > .at-card:only-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .at-grid > .at-card:only-child { grid-column: 1 / 8; } }

.at-empty { padding: 96px 0; }
.at-empty__title { margin: 0 0 16px; font-family: var(--at-font-display); font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 400; line-height: 1.2; }
.at-empty__body { max-width: 40em; margin: 0 0 24px; color: var(--at-ink-soft); }

/* ==========================================================================================
   PAGINATION
   ========================================================================================== */

.at-pager { margin-top: 96px; padding-top: 24px; border-top: 1px solid var(--at-line); text-align: center; }
.at-pager__summary { margin: 0 0 16px; color: var(--at-ink-soft); font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--at-ls-caps); text-transform: uppercase; }
.at-pager__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.at-pager__step,
.at-pager__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px; height: 44px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--at-radius);
  color: var(--at-ink);
  font-size: 0.875rem;
  text-decoration: none;
}
.at-pager__step { font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--at-ls-caps); text-transform: uppercase; }
.at-pager__page:hover, .at-pager__step:hover { border-color: var(--at-ink); }
.at-pager__page.is-current { border-color: var(--at-ink); background: var(--at-ink); color: var(--at-paper); }
.at-pager__gap { padding: 0 4px; color: var(--at-ink-soft); }

/* ==========================================================================================
   RAILS (trending, featured, recently viewed): "You may also like"
   ========================================================================================== */

.at-rail { padding: 112px 0 0; }
.at-rail__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px 24px; margin-bottom: 32px; }
.at-rail__title { margin: 0; font-family: var(--at-font-display); font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 400; line-height: 1; letter-spacing: -0.02em; }
.at-rail__subtitle { margin: 0; max-width: 32em; color: var(--at-ink-soft); }
.at-rail__track {
  display: flex;
  gap: var(--at-col-gap);
  overflow-x: auto;
  margin-inline: calc(var(--at-gutter) * -1);
  padding-inline: var(--at-gutter);
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--at-gutter);
  scrollbar-width: none;
}
.at-rail__track::-webkit-scrollbar { display: none; }
.at-rail__track > .at-card { flex: 0 0 62%; scroll-snap-align: start; }
@media (min-width: 900px) {
  .at-rail__track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; align-items: start; }
  .at-rail__track > .at-card { flex: none; }
  .at-rail__track > .at-card:nth-child(even) { margin-top: 64px; }
  .at-rail__track > .at-card:nth-child(3) { margin-top: 24px; }
}
.at-card--rail .at-card__title { font-size: 1.375rem; }

/* ==========================================================================================
   FOOTER
   ========================================================================================== */

.at-footer {
  --at-focus-on-dark: #fff;
  margin-top: 112px;
  overflow: hidden;
  background: #0F1719;
  color: var(--at-on-dark);
}
.at-footer :where(a, button, summary):focus-visible { outline-color: #fff; }
.at-footer a { color: inherit; }
.at-assure {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
  margin: 0;
  padding: 24px var(--at-gutter);
  list-style: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--at-on-dark-soft);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--at-ls-caps);
  text-transform: uppercase;
}
.at-footer__main { padding-block: 64px 32px; }
.at-footer__brand { margin: 0 0 16px; font-family: var(--at-font-display); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1; }
.at-footer__main :where(h1, h2, h3, h4, h5, h6) { color: var(--at-on-dark-soft); font-family: var(--at-font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--at-ls-caps); text-transform: uppercase; }
.at-footer__main :where(li a, p, address) { font-size: 0.875rem; color: var(--at-on-dark); }
.at-footer__main li a { display: inline-block; padding: 3px 0; text-decoration: none; }
.at-footer__main li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.at-footer__big {
  margin: 0;
  padding-inline: var(--at-gutter);
  margin-bottom: -0.14em;
  color: #1E3833;
  font-family: var(--at-font-display);
  font-size: 4rem;
  font-size: clamp(3rem, calc(100vw / (var(--n, 10) * 0.42)), 17rem);
  font-weight: 400;
  line-height: 0.72;
  letter-spacing: -0.035em;
  white-space: nowrap;
  user-select: none;
}
.at-footer__base { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.12); background: #0F1719; }
.at-footer__base-inner { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; padding-block: 16px; }
.at-footer__legal { color: var(--at-on-dark-soft); font-size: 0.75rem; }
.at-footer__legal p { margin: 0; }
.at-footer__pay { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.at-footer__pay li { display: inline-flex; }
.at-footer__pay svg { width: 36px; height: 24px; }

/* ==========================================================================================
   PRODUCT PAGE
   Desktop: margin notes | gallery | buy box (sticky). Mobile: gallery, buy box, notes.
   ========================================================================================== */

.at-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px var(--at-col-gap);
  align-items: start;
  padding-top: 24px;
}
.at-pdp__gallery { order: 1; display: grid; gap: 24px; position: relative; }
.at-pdp__info { order: 2; }
.at-notes { order: 3; padding-top: 24px; border-top: 1px solid var(--at-line); }
.at-notes__title { margin: 0 0 16px; color: var(--at-glaze); }
.at-notes__list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px var(--at-col-gap); margin: 0; }
.at-notes__list dt { color: var(--at-ink-soft); font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--at-ls-caps); text-transform: uppercase; }
.at-notes__list dd { margin: 2px 0 0; font-family: var(--at-font-display); font-size: 1.125rem; line-height: 1.25; overflow-wrap: anywhere; }
.at-notes__quote { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--at-line); color: var(--at-glaze); font-family: var(--at-font-display); font-size: 1.25rem; font-style: italic; line-height: 1.3; }
.at-notes__quote p { margin: 0 0 0.5em; }

.at-pdp__badges { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; }
.at-gfig {
  position: relative;
  margin: 0;
  overflow: hidden;
  container-type: inline-size;
  background: var(--at-mist);
  border-radius: var(--at-radius);
}
.at-gfig--a { aspect-ratio: 4 / 5; }
.at-gfig--b { aspect-ratio: 1 / 1; width: 72%; justify-self: end; }
.at-gfig--c { aspect-ratio: 3 / 4; width: 58%; }
.at-gfig--video { aspect-ratio: 16 / 9; width: 100%; }
.at-gfig--video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.at-gfig__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.at-gfig__placeholder { position: absolute; inset: 0; width: 100%; height: 100%; padding: 22%; object-fit: contain; opacity: 0.5; }
.at-gfig__display {
  position: absolute;
  left: -0.03em;
  bottom: -0.2em;
  z-index: 2;
  font-family: var(--at-font-display);
  font-size: 4rem;
  font-size: clamp(2.5rem, calc(100cqw / (var(--n, 10) * 0.42)), 26cqw);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: var(--at-ink);
  pointer-events: none;
}
.at-gfig--a:has(.at-gfig__display)::after {
  content: '';
  position: absolute;
  inset: 45% 0 0 0;
  z-index: 1;
  background: linear-gradient(transparent, rgba(240, 242, 241, 0.82));
  pointer-events: none;
}
/* Nova's gallery extension (a productGallery slot) keeps its own layout. */
.at-pdp__gallery .nova-gallery { grid-column: 1 / -1; }

@media (min-width: 1000px) {
  .at-pdp { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-top: 32px; }
  .at-notes { order: 1; grid-column: 1 / 3; position: sticky; top: calc(var(--at-header-offset) + 24px); padding-top: 0; border-top: 0; }
  .at-notes__list { grid-template-columns: 1fr; gap: 16px; }
  .at-pdp__gallery { order: 2; grid-column: 3 / 9; }
  .at-pdp__info { order: 3; grid-column: 9 / 13; position: sticky; top: calc(var(--at-header-offset) + 24px); }
  .at-pdp--nonotes .at-pdp__gallery { grid-column: 1 / 9; }
}

.at-buybox__brand { margin: 0 0 12px; color: var(--at-glaze); font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--at-ls-caps); text-transform: uppercase; }
.at-buybox__title { margin: 0; font-family: var(--at-font-display); font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 400; line-height: 0.95; letter-spacing: -0.02em; overflow-wrap: anywhere; text-wrap: balance; }
.at-rating { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--at-ink-soft); font-size: 0.8125rem; }
.at-rating__stars { display: inline-flex; gap: 2px; color: var(--at-mist); }
.at-icon--star { fill: none; stroke-width: 1.4; }
.at-icon--star.is-on { fill: var(--at-glaze); stroke: var(--at-glaze); }

.at-price { margin: 24px 0 8px; }
.at-price__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.at-price__now { font-family: var(--at-font-display); font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1; }
.at-price__now.is-sale { color: var(--at-glaze); }
.at-price__from { color: var(--at-ink-soft); font-size: 0.875rem; }
.at-price__was { color: var(--at-ink-soft); font-size: 1rem; }
.at-price__save { align-self: center; background: var(--at-glaze); color: #fff; }
.at-price__note { margin: 8px 0 0; color: var(--at-ink-soft); font-size: 0.8125rem; }

/* Options (markup built by Nova's variants.js). Sizes and the like are boxed tiles; a colour group with
   real colour names becomes square swatches (atelier.js adds .at-swatch and --at-sw). */
.at-pdp .nova-variant-group { margin: 32px 0 0; }
.at-pdp .nova-variant-label-row { display: flex; gap: 8px; align-items: baseline; margin-bottom: 12px; }
.at-pdp .nova-variant-label { color: var(--at-ink-soft); font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--at-ls-caps); text-transform: uppercase; }
.at-pdp .nova-variant-label-value { color: var(--at-ink); font-size: 0.875rem; font-weight: 600; }
.at-pdp .nova-variant-btn-group { display: flex; flex-wrap: wrap; gap: 12px; }
.at-pdp .nova-variant-btn {
  min-width: 52px;
  min-height: 52px;
  padding: 10px 16px;
  border: 1px solid var(--at-line);
  border-radius: var(--at-radius);
  background: transparent;
  color: var(--at-ink);
  font-size: 0.875rem;
  line-height: 1.35;
  transition: border-color 0.2s, background-color 0.2s;
}
.at-pdp .nova-variant-btn:hover:not(.nova-variant-btn--disabled):not(.nova-variant-btn--selected) { border-color: var(--at-ink); background: transparent; color: var(--at-ink); transform: none; }
.at-pdp .nova-variant-btn--selected,
.at-pdp .nova-variant-btn--disabled.nova-variant-btn--selected { border-color: var(--at-ink); background: transparent; color: var(--at-ink); box-shadow: inset 0 0 0 1px var(--at-ink); }
.at-pdp .nova-variant-btn--disabled { color: var(--at-ink-soft); border-style: dashed; opacity: 0.7; }
.at-pdp .nova-variant-btn.at-swatch {
  width: 52px;
  height: 52px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--at-sw, var(--at-mist));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
  outline: 1px solid transparent;
  outline-offset: 3px;
  font-size: 0;
  transition: outline-color 0.2s;
}
.at-pdp .nova-variant-btn.at-swatch.nova-variant-btn--selected { outline: 2px solid var(--at-ink); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); background: var(--at-sw, var(--at-mist)); }
.at-pdp .nova-variant-btn.at-swatch:hover:not(.nova-variant-btn--disabled):not(.nova-variant-btn--selected) { outline-color: var(--at-ink-soft); background: var(--at-sw, var(--at-mist)); }
.at-pdp .nova-variant-btn.at-swatch:focus-visible { outline: 2px solid var(--at-glaze); outline-offset: 5px; }
.at-pdp .nova-variant-btn.at-swatch.nova-variant-btn--disabled { opacity: 0.4; border-style: none; }
.at-pdp #notAvailable { border: 1px solid var(--at-line); border-radius: var(--at-radius) !important; background: var(--at-stone) !important; color: var(--at-ink) !important; }

.at-buybox__purchase { margin-top: 32px; }
.at-buybox__row { display: flex; align-items: stretch; gap: 12px; }
.at-buybox__qty .nova-quantity-select,
.at-buybox__qty .nova-input,
.at-buybox__qty input,
.at-buybox__qty select {
  min-height: 52px;
  border: 1px solid var(--at-ink);
  border-radius: var(--at-radius);
  background: transparent;
  color: var(--at-ink);
  font-size: 1rem;
  box-shadow: none;
}
.at-buybox__add { flex: 1 1 auto; }
.at-stock { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; color: var(--at-ink-soft); font-size: 0.875rem; }
.at-stock[hidden] { display: none; }
.at-stock__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--at-glaze); }
.at-stock.is-low .at-stock__dot { background: #B7791F; }
.at-stock.is-out .at-stock__dot { background: transparent; box-shadow: inset 0 0 0 1px var(--at-ink-soft); }
.at-buybox__unavailable { margin: 16px 0 0; color: var(--at-ink-soft); }

.at-promises { display: grid; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; color: var(--at-ink-soft); font-size: 0.875rem; }
.at-promises li { display: flex; align-items: center; gap: 10px; }
.at-promises .at-icon { font-size: 1.125rem; color: var(--at-glaze); }

.at-details { margin-top: 40px; border-top: 1px solid var(--at-line); }
.at-details__item { border-bottom: 1px solid var(--at-line); }
.at-details__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--at-ls-caps);
  list-style: none;
  text-transform: uppercase;
  cursor: pointer;
}
.at-details__summary::-webkit-details-marker { display: none; }
.at-details__summary::after { content: '+'; font-size: 1.4rem; font-weight: 400; line-height: 1; letter-spacing: 0; }
.at-details__item[open] > .at-details__summary::after { content: '\2212'; }
.at-details__body { padding: 0 0 20px; color: var(--at-ink-soft); font-size: 0.875rem; max-width: 56ch; }
.at-details__body > :first-child { margin-top: 0; }
.at-details__body > :last-child { margin-bottom: 0; }
.at-details__body strong { color: var(--at-ink); font-weight: 600; }
.at-details__body img { max-width: 100%; height: auto; }
.at-buybox__social { margin-top: 24px; }
.at-pdp-lower { margin-top: 0; }

.at-rating__text { font-variant-numeric: tabular-nums; }
.at-prose p { margin: 0 0 0.9em; }
.at-prose ul, .at-prose ol { margin: 0 0 0.9em; padding-left: 1.2em; list-style: revert; }
.at-prose h2, .at-prose h3, .at-prose h4 { margin: 1.2em 0 0.4em; color: var(--at-ink); font-size: 1.25rem; }
.at-chip--up .at-icon { font-size: 0.875rem; }
.at-footer__default { display: grid; gap: 8px; }

/* Docked buy bar (small screens), driven by Nova's sticky-buybar.js. */
.at-dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  padding: 10px var(--at-gutter) calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--at-line);
  background: var(--at-paper);
  transform: translateY(110%);
  transition: transform 0.26s var(--at-ease);
}
.at-dock.nova-sticky-buybar--visible { transform: none; }
.at-dock__inner { display: flex; align-items: center; gap: 12px; }
.at-dock__details { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.at-dock__name { display: none; }
.at-dock__variant { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 0; border: 0; background: none; color: var(--at-ink-soft); font-size: 0.8125rem; text-align: left; cursor: pointer; }
.at-dock__variant .nova-sticky-buybar__variant-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-dock__change { color: var(--at-ink); text-decoration: underline; text-underline-offset: 2px; }
.at-dock__price { font-family: var(--at-font-display); font-size: 1.5rem; line-height: 1; }
.at-dock__btn { flex: none; }
.at-dock__btn[aria-disabled="true"] { opacity: 0.5; }
@media (min-width: 1000px) { .at-dock { display: none; } }

/* ==========================================================================================
   "ADDED TO BASKET" slide-over
   ========================================================================================== */

.at-added { position: fixed; inset: 0; z-index: 90; }
.at-added[hidden] { display: none; }
.at-added__scrim { position: absolute; inset: 0; background: rgba(10, 20, 22, 0.5); opacity: 0; transition: opacity 0.35s; }
.at-added.is-open .at-added__scrim { opacity: 1; }
.at-added__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(460px, 100%);
  background: var(--at-paper);
  color: var(--at-ink);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform 0.45s var(--at-ease);
}
.at-added.is-open .at-added__panel { transform: none; }
.at-added__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--at-line); }
.at-added__title { margin: 0; font-family: var(--at-font-display); font-size: 1.75rem; font-weight: 400; line-height: 1; }
.at-added__title:focus { outline: none; }
.at-added__item { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 16px; padding: 24px; border-bottom: 1px solid var(--at-line); }
.at-added__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--at-radius); background: var(--at-mist); }
.at-added__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.at-added__img[hidden] { display: none; }
.at-added__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.at-added__name { font-family: var(--at-font-display); font-size: 1.25rem; line-height: 1.1; }
.at-added__meta { color: var(--at-ink-soft); font-size: 0.875rem; }
.at-added__price { font-size: 0.875rem; font-weight: 500; }
.at-added__foot { display: grid; gap: 12px; margin-top: auto; padding: 24px; border-top: 1px solid var(--at-line); background: var(--at-stone); }
.at-added__totals { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; }
.at-added__totals[hidden] { display: none; }
.at-added__totals dt { font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--at-ls-caps); text-transform: uppercase; }
.at-added__totals dd { margin: 0; font-family: var(--at-font-display); font-size: 1.75rem; line-height: 1; }
.at-added__count { color: var(--at-ink-soft); font-weight: 400; letter-spacing: 0; text-transform: none; }
.at-added__promise { margin: 0; color: var(--at-ink-soft); font-size: 0.8125rem; }
html.at-scroll-lock body { overflow: hidden; }

/* ==========================================================================================
   NOVA COMPATIBILITY
   Pages Atelier has not replaced (basket, checkout, account, blog, content extensions) still render
   Nova's markup. The token re-points above carry most of it; these keep the buttons and inputs on-system.
   ========================================================================================== */

.nova-container { max-width: var(--container-max-width); padding-inline: var(--container-padding); }
h1, h2, h3, .nova-heading { font-family: var(--at-font-display); font-weight: 400; letter-spacing: 0; }
/* Instrument Serif is a narrow display face: below about 22px it reads cramped, so Nova's small
   card and line-item titles get a size floor, and the smallest heading levels use the body face. */
h4, h5, h6 { font-family: var(--at-font-body); font-weight: 600; letter-spacing: 0; }
.nova-btn {
  border-radius: var(--at-radius);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--at-ls-caps);
  text-transform: uppercase;
}
.nova-btn-primary,
.btn-primary { background: var(--at-ink); border-color: var(--at-ink); color: var(--at-paper); }
.nova-btn-primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled) { background: var(--at-glaze); border-color: var(--at-glaze); color: #fff; }
.nova-btn-secondary,
.nova-btn-outline { background: transparent; border-color: var(--at-ink); color: var(--at-ink); }
.nova-btn-outline:hover,
.nova-btn-secondary:hover { background: var(--at-mist); color: var(--at-ink); }

/* Nova's basket (templates/nova/extensions/fullBasket) is skinned by tokens, not overrides: see
   fragment/commerceTokens.html for the list. Atelier's basket: a hairline-ruled list on the paper, the display serif
   for the title and the total, small caps for every label, and the order summary as a stone panel. */
:root {
  --nb-card-bg: transparent;
  --nb-card-border: 1px solid var(--at-line);
  --nb-card-radius: var(--at-radius);
  --nb-summary-bg: var(--at-stone);
  --nb-summary-border: 0;
  --nb-rule: var(--at-line);
  --nb-control-border: 1px solid var(--at-line);
  --nb-control-radius: var(--at-radius);
  --nb-bar-bg: var(--at-paper);
  --nb-sticky-top: calc(var(--at-header-offset) + 24px);

  --nb-title-size: clamp(2.75rem, 2rem + 4vw, 4.5rem);
  --nb-title-ls: -0.015em;
  /* Instrument Serif is narrow and single-weight: line titles need a size floor and no bold. */
  --nb-item-title-size: 1.375rem;
  --nb-item-title-size-lg: 1.625rem;
  --nb-item-title-weight: 400;
  --nb-total-font: var(--at-font-display);
  --nb-total-size: 2.25rem;
  --nb-total-weight: 400;

  --nb-label-case: uppercase;
  --nb-label-ls: var(--at-ls-caps);
  --nb-label-size: 0.6875rem;

  --nb-cta-bg: var(--at-ink);
  --nb-cta-fg: var(--at-paper);
  --nb-cta-hover-bg: var(--at-glaze);
  --nb-cta-hover-fg: #fff;
  --nb-cta-radius: var(--at-radius);
  --nb-cta-case: uppercase;
  --nb-cta-ls: var(--at-ls-caps);
  --nb-cta-size: 0.75rem;
  --nb-cta-weight: 500;

  /* Checkout steps: the same sheet, with the header band left bare and the serif at a size it can carry. */
  --nb-head-bg: transparent;
  --nb-input-bg: transparent;
  --nb-card-title-size: 1.625rem;
  --nb-legend-size: 1.5rem;
}

.nova-input,
.at-input {
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--at-line);
  border-radius: var(--at-radius);
  background-color: transparent;
  color: var(--at-ink);
  font-size: 1rem;
}
.nova-input:hover,
.at-input:hover { border-color: var(--at-ink-soft); }
.nova-input:focus,
.at-input:focus { outline: none; border-color: var(--at-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--at-glaze) 22%, transparent); }
select.nova-input { min-height: 48px; }

/* Standalone sign-in / register / password pages (fragment/auth-head). */
.auth-header h1 { font-family: var(--at-font-display); font-weight: 400; letter-spacing: -0.02em; }

/* ==========================================================================================
   MOTION
   The header colour change, the drawers and the image swap all animate; none of it is needed.
   ========================================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* Phones: 16px stops iOS zooming the page when the sort control is focused (must stay last to beat the
   control's own size rules above). */
@media (max-width: 1023px) {
  .at-select__control { font-size: 16px; }
}