/* Lofvi components, "white & ink". Tokens only (see tokens.css); no colour
   literals. One system: white pages, ink type, hairlines, square geometry,
   one sage accent; motion is short, eased and switched off on request. */

/* ── Base ─────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Full-bleed sliders reach the viewport edge; the page never scrolls sideways. */
  overflow-x: clip;
}

html.has-sheet {
  overflow: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

main {
  flex: 1 0 auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-title);
  text-wrap: balance;
}

p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

button,
input,
select {
  font: inherit;
  color: inherit;
  border-radius: var(--radius);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

::selection {
  background: var(--tile-hover);
}

.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: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--ink);
  color: var(--paper);
}

.skip-link:focus {
  top: var(--space-2);
}

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

/* Small label above a title: sentence case, quiet, never shouting. */
.eyebrow {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  line-height: var(--leading-snug);
  text-transform: uppercase;
}

/* Quiet text link: ink, a hairline underline that darkens on hover. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 6px;
  white-space: nowrap;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}

.text-link:hover {
  text-decoration-color: currentColor;
}

/* Buttons: solid ink (the one action) or an ink outline (secondary). */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-2) var(--space-6);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-ui);
  font-weight: var(--fw-medium);
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.button:hover {
  background: var(--ink-deep);
}

.button--quiet {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--ink);
}

.button--quiet:hover {
  border-color: var(--ink);
  background: transparent;
}

/* Card and tile grid: 2 → 3 → 4 columns. */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap-y) var(--grid-gap-x);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Image fields ─────────────────────────────────────────────────── */
/* Square, flat, white: a packshot sits in it with room to breathe. */
.frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--paper-card);
}

.frame img {
  /* White packshot backgrounds take on the field's tone. */
  mix-blend-mode: multiply;
  position: absolute;
  /* Wide packshots (sofas, sideboards) never touch the field's edge. */
  inset: var(--frame-pad, 9%);
  width: calc(100% - 2 * var(--frame-pad, 9%));
  height: calc(100% - 2 * var(--frame-pad, 9%));
  object-fit: contain;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease);
}

/* Fitted photo (images.rs): the product's content box, not the whole photo,
   is contained in the inset area, so a small stool in a tall studio shot
   fills the tile like a sofa does. The frame is the size container; the
   photo is scaled and placed from its box (--bx/--by/--bw/--bh, fractions)
   and aspect ratio (--ar). Whatever lies outside the frame is clipped. */
.frame,
.gallery__thumb {
  container-type: size;
}

.frame img.fit,
.gallery__thumb img.fit {
  --inner-w: calc(100cqw * (1 - 2 * var(--fit-pad, 0.12)));
  --inner-h: calc(100cqh * (1 - 2 * var(--fit-pad, 0.12)));
  --w: min(calc(var(--inner-w) / var(--bw)), calc(var(--inner-h) * var(--ar) / var(--bh)));
  inset: auto;
  top: calc(50cqh - (var(--by) + var(--bh) / 2) * var(--w) / var(--ar));
  left: calc(50cqw - (var(--bx) + var(--bw) / 2) * var(--w));
  width: var(--w);
  max-width: none;
  height: calc(var(--w) / var(--ar));
  object-fit: fill;
}

/* A coloured studio photo is scaled at least to cover the frame (the box
   still inside it, images.rs checks), and kept covering when it is moved to
   centre the product: the photo's edge and its gradient never show. */
.frame img.fit--cover {
  --cover-w: max(100cqw, calc(100cqh * var(--ar)));
  --box-max-w: min(calc(100cqw * 0.96 / var(--bw)), calc(100cqh * 0.96 * var(--ar) / var(--bh)));
  --w: min(
    max(min(calc(var(--inner-w) / var(--bw)), calc(var(--inner-h) * var(--ar) / var(--bh))), var(--cover-w)),
    var(--box-max-w)
  );
  top: clamp(calc(100cqh - var(--w) / var(--ar)), calc(50cqh - (var(--by) + var(--bh) / 2) * var(--w) / var(--ar)), 0px);
  left: clamp(calc(100cqw - var(--w)), calc(50cqw - (var(--bx) + var(--bw) / 2) * var(--w)), 0px);
}

/* A studio photo that is not white: the frame takes the photo's own colour
   (multiplied like the photo), so the photo's edge never shows. */
.frame[style*='--photo-bg'] {
  background: linear-gradient(var(--photo-bg), var(--photo-bg)), var(--paper-card);
  background-blend-mode: multiply;
}

/* Hover on a pointer device: the photo eases a little closer; a card with a
   second photo (another version) cross-fades to it. */
.frame__alt {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  a:hover > .frame img,
  a:hover > .frame img.fit {
    transform: scale(1.035);
  }

  a:hover > .frame--swap img:not(.frame__alt) {
    opacity: 0;
  }

  a:hover > .frame--swap .frame__alt {
    opacity: 1;
  }
}

/* Placeholder fields: until a photograph is mapped, an off-white field with
   a small outline mark. Same ratio as a photo, so nothing moves later. */
.frame--placeholder {
  background: var(--paper-soft);
  color: var(--line-strong);
}

.frame__mark {
  width: clamp(28px, 14%, 44px);
  height: auto;
  stroke-width: 1;
}

/* ── Sections ─────────────────────────────────────────────────────── */
.block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  padding-block: var(--section-y) 0;
}

.block + .block,
.block + .rail-block,
.rail-block + .block {
  padding-top: var(--section-y);
}

.block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
}

.block__heading {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.block__title {
  font-size: var(--text-h3);
}

.block__tools {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-left: auto;
}

.page-end {
  padding-bottom: var(--section-y);
}

/* A section right under the page header needs no second gap. */
.ph + .block {
  padding-top: var(--space-4);
}

main > :last-child:not(.band):not(.page-end) {
  padding-bottom: var(--section-y);
}

/* A quiet, full-width off-white band. */
.band {
  margin-top: var(--section-y);
  background: var(--paper-soft);
}

.band > .block {
  padding-block: var(--section-y);
}

/* Page transitions: sites/_shared/assets/css/transitions.css. */

/* ── Sliders ──────────────────────────────────────────────────────── */
/* A row that scrolls sideways (Apple style): it runs from the content edge
   to the edge of the screen, snaps to cards and lets the next card peek in.
   Touch: swipe. Keyboard: focus moves it. Mouse: the arrow buttons
   (js/slider.js). Cards in view: 1.6 → 2.5 → 3.4 → 4.3. */
.rail {
  --bleed: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
  --per-view: 1.6;
  display: grid;
  min-width: 0;
  grid-auto-flow: column;
  /* Cards in view count against the content width (the row itself is as
     wide as the content plus both bleeds), so the next one peeks past. */
  grid-auto-columns: calc((min(100vw, var(--container-max)) - 2 * var(--gutter) - (var(--per-view) - 1) * var(--grid-gap-x)) / var(--per-view));
  gap: var(--grid-gap-x);
  margin: 0 calc(-1 * var(--bleed));
  padding: var(--space-1) var(--bleed) var(--space-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--bleed);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}

.rail::-webkit-scrollbar {
  display: none;
}

@media (min-width: 600px) {
  .rail {
    --per-view: 2.5;
  }
}

@media (min-width: 900px) {
  .rail {
    --per-view: 3.4;
  }
}

@media (min-width: 1180px) {
  .rail {
    --per-view: 4.3;
  }
}

.rail__item {
  /* Positioned, so visually hidden text inside stays inside the row. */
  position: relative;
  min-width: 0;
  scroll-snap-align: start;
}

/* Category and brand tiles are smaller: more of them in view. */
.rail--tiles,
.rail--brands {
  --per-view: 2.4;
}

@media (min-width: 600px) {
  .rail--tiles,
  .rail--brands {
    --per-view: 3.5;
  }
}

@media (min-width: 900px) {
  .rail--tiles,
  .rail--brands {
    --per-view: 4.5;
  }
}

@media (min-width: 1180px) {
  .rail--tiles,
  .rail--brands {
    --per-view: 6;
  }
}

.slider-nav {
  display: flex;
  gap: var(--space-2);
}

.slider-nav[hidden] {
  display: none;
}

/* Touch screens (and every phone-sized screen) swipe; the buttons are
   for a mouse. */
@media (hover: none), (pointer: coarse), (max-width: 599px) {
  .slider-nav {
    display: none;
  }
}

.slider-nav__btn {
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.slider-nav__btn:hover:not(:disabled) {
  border-color: var(--ink);
}

.slider-nav__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ── Header ───────────────────────────────────────────────────────── */
.hdr {
  position: relative;
  z-index: 20;
  background: var(--paper);
}

.hdr-utility {
  background: var(--paper-soft);
  color: var(--text-muted);
}

.hdr-utility__inner {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  margin-block: 0;
  padding-block: var(--space-2);
  list-style: none;
  font-size: var(--text-caption);
  line-height: var(--leading-snug);
}

.hdr-utility__inner li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* A small sage tick before each statement: the accent, used once. */
.hdr-utility__inner li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sage);
}

.hdr-row1 {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding-block: var(--space-5) var(--space-4);
}

.wordmark {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  color: var(--ink);
  font-family: var(--font-editorial);
  font-size: var(--text-title-sm);
  font-weight: 480;
  letter-spacing: var(--tracking-snug);
  line-height: 1;
  text-decoration: none;
}

/* The logo beside the 48 px search field on wide screens. */
@media (min-width: 900px) {
  .wordmark {
    font-size: 2rem;
  }
}

/* The mark beside the wordmark, as in the logo lockup
   (scripts/build-mediakit-assets.py): its flat bottom on the baseline, its
   flat top on the cap line (Newsreader's capitals: 0.67 em), the gap
   1.25 dot diameters (1.25 × 13/48 of the cap height = 0.227 em). */
.brand-mark {
  flex: none;
  width: calc(0.67em * 43 / 48);
  height: 0.67em;
  margin-right: 0.227em;
}

.brand-mark__l {
  fill: var(--ink);
}

.brand-mark__dot {
  fill: var(--sage);
}

.hdr-search {
  display: flex;
  flex: 1 1 560px;
  max-width: 680px;
  min-width: 0;
  border: 1px solid var(--paper-input);
  background: var(--paper-input);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.hdr-search:hover {
  border-color: var(--line-strong);
}

.hdr-search:focus-within {
  border-color: var(--ink);
  background: var(--paper);
}

.hdr-search input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 0;
  background: transparent;
  font-size: var(--text-ui);
}

.hdr-search input:focus {
  outline: none;
}

.hdr-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.hdr-search button {
  display: grid;
  place-items: center;
  width: 52px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hdr-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
}

.hdr-action {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  text-decoration: none;
  white-space: nowrap;
}

.hdr-action--locale {
  gap: var(--space-2);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease);
}

.hdr-action--icon {
  justify-content: center;
  min-width: var(--touch);
}

.hdr-action--icon[aria-disabled='true'] {
  cursor: default;
}

.hdr-row2 {
  position: relative;
  border-bottom: 1px solid var(--line);
}

.hdr-cats {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--space-7);
  margin-block: 0;
  list-style: none;
}

.hdr-cat {
  display: flex;
}

/* Category links: an ink underline grows from the left on hover and marks
   the open menu. */
.hdr-cat__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2) var(--space-4);
  font-size: var(--text-ui);
  text-decoration: none;
  white-space: nowrap;
}

.hdr-cat__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}

.hdr-cat:hover > .hdr-cat__link::after,
.hdr-cat__link:focus-visible::after,
.hdr-cat--mega:focus-within > .hdr-cat__link::after {
  transform: scaleX(1);
}

.hdr-cat__link--strong {
  font-weight: var(--fw-semibold);
}

.hdr-caret {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.25px solid currentColor;
  border-bottom: 1.25px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.hdr-cat--mega:hover .hdr-caret,
.hdr-cat--mega:focus-within .hdr-caret {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.hdr-cat--end {
  margin-left: auto;
}

/* Mega menu: full width under the row, opens on hover (after a short
   intent delay) and on keyboard focus, fading and settling into place. */
.mega {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border-top: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 24px 40px -24px rgb(17 17 17 / 18%);
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease) 80ms, transform var(--dur) var(--ease) 80ms, visibility 0s linear 240ms;
}

.hdr-cat--mega:hover > .mega,
.hdr-cat--mega:focus-within > .mega {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity var(--dur) var(--ease) 120ms, transform var(--dur) var(--ease-out) 120ms, visibility 0s linear 120ms;
}

.hdr-cat--mega:focus-within > .mega {
  transition-delay: 0s;
}

.hdr-cat--mega.is-closed > .mega {
  visibility: hidden;
  opacity: 0;
  transition: none;
}

.mega__inner {
  display: grid;
  grid-template-columns: repeat(var(--mega-cols, 4), minmax(0, 1fr));
  gap: var(--space-10);
  padding-block: var(--space-10) var(--space-12);
}

.mega__col--rooms {
  padding-left: var(--space-10);
  border-left: 1px solid var(--line);
}

.mega__h {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-decoration: none;
  text-transform: uppercase;
}

a.mega__h:hover {
  color: var(--ink);
}

.mega__col ul {
  display: grid;
  gap: 2px;
  padding: 0;
  list-style: none;
}

.mega__col li a {
  display: inline-block;
  padding-block: var(--space-1);
}

.mega__col a:not(.mega__h),
.mega__brandlist a {
  font-size: var(--text-ui);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.mega__col .mega__all {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 5px;
}

.mega a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.mega__brands {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: var(--space-12);
  padding-block: var(--space-10) var(--space-12);
}

.mega__lede {
  max-width: 30ch;
  margin: var(--space-3) 0 var(--space-2);
  color: var(--text-body);
  font-size: var(--text-sm);
}

/* Long brand lists stay multi-column; the wrapper scrolls, never the multicol list. */
.mega__scroll {
  max-height: min(60vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mega__brandlist {
  columns: 4;
  column-gap: var(--space-10);
  padding: 0;
  list-style: none;
}

.mega__brandlist li {
  break-inside: avoid;
  padding-block: 6px;
}

.mega__brandlist a {
  font-family: var(--font-editorial);
  font-size: var(--text-subtitle);
  line-height: var(--leading-snug);
}

@media (max-width: 1180px) {
  .mega__brandlist {
    columns: 3;
  }

  .mega__inner {
    gap: var(--space-6);
  }

  .mega__col--rooms {
    padding-left: var(--space-6);
  }

  .hdr-cats {
    gap: var(--space-5);
  }
}

/* The header row keeps one line: on narrower desktops the last
   hand-picked categories give way (they stay in the Products menu). */
@media (max-width: 1040px) {
  .hdr-cat:nth-child(n + 8):not(.hdr-cat--end):not(.hdr-cat--end ~ .hdr-cat) {
    display: none;
  }
}

/* Country switcher */
.hdr-locale {
  position: relative;
}

.hdr-locale > summary {
  cursor: pointer;
  list-style: none;
}

.hdr-locale > summary::-webkit-details-marker {
  display: none;
}

.hdr-locale[open] > summary,
.hdr-locale > summary:hover {
  color: var(--ink);
}

.hdr-locale__list {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 30;
  min-width: 16rem;
  margin: 0;
  padding: var(--space-2) 0;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  box-shadow: var(--shadow);
  list-style: none;
  animation: pop-in var(--dur) var(--ease-out);
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.hdr-locale__list a {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 var(--space-5);
  color: var(--text-body);
  font-size: var(--text-sm);
  text-decoration: none;
}

.hdr-locale__list a:hover {
  background: var(--paper-soft);
  color: var(--ink);
}

.hdr-locale__list a[aria-current='true'] {
  color: var(--ink);
  font-weight: var(--fw-medium);
}

.hdr-locale__list a[aria-current='true']::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--sage);
}

/* ── Phone menu ───────────────────────────────────────────────────── */
.mnav {
  display: none;
}

.mnav__trigger {
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  margin-left: calc(-1 * var(--space-3));
  cursor: pointer;
  list-style: none;
}

.mnav__trigger::-webkit-details-marker {
  display: none;
}

.mnav__trigger .mnav__close,
.mnav[open] .mnav__trigger .mnav__open {
  display: none;
}

.mnav[open] .mnav__trigger .mnav__close {
  display: block;
}

/* The sheet fills the screen under the header row and scrolls on its own. */
.mnav__sheet {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 40;
  height: calc(100dvh - 100%);
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4) var(--gutter) var(--space-16);
  border-top: 1px solid var(--line);
  background: var(--paper);
  animation: sheet-in var(--dur) var(--ease-out);
}

@keyframes sheet-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.mnav__h {
  margin-block: var(--space-8) var(--space-2);
}

.mnav__h:first-child {
  margin-top: var(--space-2);
}

.mnav__list,
.mnav__sub,
.mnav__brands {
  padding: 0;
  list-style: none;
}

.mnav__list > li {
  border-bottom: 1px solid var(--line);
}

.mnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  font-family: var(--font-editorial);
  font-size: 1.5rem;
  letter-spacing: var(--tracking-snug);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.mnav__group > summary::-webkit-details-marker {
  display: none;
}

/* A plus that turns into a minus. */
.mnav__group > summary::after {
  content: "";
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 14px 1.25px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.25px 14px no-repeat;
  transition: transform var(--dur) var(--ease);
}

.mnav__group[open] > summary::after {
  background: linear-gradient(var(--ink), var(--ink)) center / 14px 1.25px no-repeat;
  transform: rotate(180deg);
}

.mnav__sub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-4);
  padding-bottom: var(--space-4);
  animation: pop-in var(--dur) var(--ease-out);
}

.mnav__sub a,
.mnav__brands a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  color: var(--text-body);
  font-size: var(--text-ui);
  text-decoration: none;
}

.mnav__sub a:hover,
.mnav__brands a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.mnav__all {
  color: var(--ink) !important;
  font-weight: var(--fw-medium);
}

.mnav__brands {
  columns: 2;
  column-gap: var(--space-4);
}

.mnav__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.mnav__chips a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease);
}

.mnav__chips a:hover {
  border-color: var(--ink);
}

.mnav__more {
  margin-top: var(--space-1);
  margin-right: var(--space-5);
}

@media (max-width: 1024px) {
  .hdr-utility__inner {
    justify-content: center;
  }

  .hdr-utility__inner li:not(:first-child) {
    display: none;
  }
}

@media (max-width: 900px) {
  .hdr-row2 {
    display: none;
  }

  .mnav {
    display: block;
  }

  .hdr-row1 {
    position: relative;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    padding-block: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--line);
  }

  .hdr-search {
    order: 10;
    flex: 1 1 100%;
    max-width: none;
  }

  .hdr-search input {
    min-height: var(--touch);
  }

  .hdr-actions {
    gap: var(--space-4);
  }
}

@media (max-width: 480px) {
  .hdr-action--locale span {
    display: none;
  }
}

/* ── Footer ───────────────────────────────────────────────────────── */
.ftr {
  margin-top: var(--section-y);
  background: var(--paper-soft);
  color: var(--text);
}

main:has(> .band:last-child) + .ftr {
  margin-top: 0;
  border-top: 1px solid var(--line);
}

.ftr__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: var(--space-10);
  padding-block: var(--space-20) var(--space-14);
}

.ftr__brand p {
  max-width: 30ch;
  margin-top: var(--space-5);
  color: var(--text-body);
  font-size: var(--text-sm);
}

.ftr__wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-editorial);
  font-size: var(--text-title-sm);
  font-weight: 480;
  letter-spacing: var(--tracking-snug);
  line-height: 1;
  text-decoration: none;
}

.ftr__h {
  margin-bottom: var(--space-4);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.ftr__col ul {
  display: grid;
  gap: 2px;
  padding: 0;
  list-style: none;
}

.ftr__col a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: var(--text-body);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.ftr__col a:hover,
.ftr__locale[aria-current='true'] {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ftr__locale[aria-current='true'] {
  font-weight: var(--fw-medium);
}

.ftr__more {
  color: var(--ink) !important;
  font-weight: var(--fw-medium);
}

.ftr__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-8);
  padding-block: var(--space-6) var(--space-8);
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: var(--text-caption);
}

@media (max-width: 900px) {
  .ftr__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-10) var(--space-6);
    padding-block: var(--space-14) var(--space-10);
  }

  .ftr__brand {
    grid-column: 1 / -1;
  }

  .ftr__col a {
    min-height: var(--touch);
  }
}

/* ── Page header ──────────────────────────────────────────────────── */
.ph {
  padding-block: var(--header-y) var(--header-y-end);
}

.ph .crumbs {
  margin-bottom: var(--space-8);
}

.ph__lead {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.ph__title {
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-display);
  overflow-wrap: break-word;
}

.ph__meta {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.ph__lede {
  max-width: var(--measure);
  margin-top: var(--space-5);
  color: var(--text-body);
  font-size: var(--text-body-lg);
}

/* ── Breadcrumbs ──────────────────────────────────────────────────── */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.crumbs li + li::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 var(--space-3) 2px;
  border-top: 1px solid var(--text-faint);
  border-right: 1px solid var(--text-faint);
  transform: rotate(45deg);
}

.crumbs a {
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.crumbs [aria-current] {
  color: var(--text);
}

/* ── Tiles (categories, brands) ───────────────────────────────────── */
.tile {
  display: grid;
  gap: var(--space-1);
  text-decoration: none;
}

.tile .frame {
  margin-bottom: var(--space-3);
}

.tile__name {
  font-size: var(--text-ui);
  font-weight: var(--fw-medium);
  line-height: var(--leading-snug);
}

.tile__caption {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

/* Typographic tiles (brands without photos): the name set in the display
   serif on an off-white field. */
.tile__type {
  background: var(--paper-soft);
  transition: background-color var(--dur) var(--ease);
}

.tile__type span {
  padding: var(--space-4);
  color: var(--ink);
  font-family: var(--font-editorial);
  font-size: var(--text-h4);
  line-height: var(--leading-snug);
  text-align: center;
}

.tile:hover .tile__type {
  background: var(--paper-2);
}

/* Placeholder field colours are gone: every field is the same off-white. */
.field-0,
.field-1,
.field-2,
.field-3,
.field-4,
.field-5 {
  --field: var(--paper-soft);
}

/* ── Cards ────────────────────────────────────────────────────────── */
/* Cards in a row share their height; the link takes the spare room, so
   prices line up whether or not a card has a configuration line. */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.card__link {
  display: grid;
  flex: 1 0 auto;
  align-content: start;
  gap: var(--space-4);
  text-decoration: none;
}

.card__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.card__brand {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

/* The model name: at most two lines; the configuration below it: one
   smaller line. Both clamp; the whole name is the element's title. */
.card__name {
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: var(--text-ui);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: var(--leading-snug);
  text-wrap: pretty;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.card__detail {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__link:hover .card__name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.card__price {
  margin-top: var(--space-1);
  color: var(--text-body);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.card__link:focus-visible,
.tile:focus-visible {
  outline-offset: 4px;
}

/* ── Home ─────────────────────────────────────────────────────────── */
/* The opening: a statement beside one product, on an off-white band. */
.hero {
  background: var(--paper-soft);
}

.open {
  display: grid;
  gap: var(--space-10);
  align-items: center;
  padding-block: var(--space-16);
}

@media (min-width: 900px) {
  .open {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-16);
    padding-block: var(--space-16);
  }
}

.open__text {
  display: grid;
  gap: var(--space-6);
  max-width: 38rem;
}

.open__stats {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.open__stats::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage);
}

.open__title {
  font-size: var(--text-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.02;
}

.open__lede {
  max-width: 32rem;
  color: var(--text-body);
  font-size: var(--text-lead);
  line-height: 1.55;
}

.open__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.open__figure {
  display: grid;
  gap: var(--space-4);
}

/* The lead product floats on the band: its white studio ground takes the
   band's tone (multiply), so there is no box around it. */
.open__photo {
  display: block;
}

.open__figure .frame {
  --frame-pad: 4%;
  --fit-pad: 0.06;
  aspect-ratio: 4 / 3;
  background: transparent;
}

/* Stacked: a wide field, so the lead product does not push the rows a
   screen down. */
@media (max-width: 899px) {
  .open__figure .frame {
    aspect-ratio: 16 / 10;
  }
}

.open__caption {
  display: grid;
  gap: 2px;
  justify-items: start;
  font-size: var(--text-sm);
}

.open__caption a {
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.open__caption a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.open__brand {
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}

.open__detail,
.open__price {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.how {
  display: grid;
  gap: var(--space-8) var(--grid-gap-x);
  padding: 0;
  list-style: none;
  counter-reset: how;
}

@media (min-width: 900px) {
  .how {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-12);
  }
}

.how li {
  max-width: 26rem;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-strong);
  color: var(--text-body);
  counter-increment: how;
}

.how li::before {
  content: counter(how);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: var(--space-4);
  border: 1px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  font-size: var(--text-caption);
  font-weight: var(--fw-medium);
}

/* ── Listing ──────────────────────────────────────────────────────── */
.children {
  padding-bottom: var(--space-10);
}

.listing {
  position: relative;
  display: grid;
  gap: var(--space-6);
}

.listing__results {
  min-width: 0;
}

.listing__grid {
  row-gap: var(--space-14);
}

/* The toolbar: filters, the count and the sort control on one line that
   stays under the finger while scrolling. */
.results-bar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--space-3) var(--gutter);
  border-block: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
}

.results-bar--end {
  justify-content: flex-end;
}

.results-bar__count {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.results-bar__rank {
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.results-bar__rank:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.sort {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.sort__label {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.sort__select {
  min-height: var(--touch);
  padding: 0 var(--space-10) 0 var(--space-4);
  border: 1px solid var(--line);
  background:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%) no-repeat calc(100% - 19px) 52% / 5px 5px,
    linear-gradient(135deg, var(--ink) 50%, transparent 50%) no-repeat calc(100% - 14px) 52% / 5px 5px,
    var(--paper);
  font-size: var(--text-sm);
  appearance: none;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}

.sort__select:hover {
  border-color: var(--ink);
}

.sort.is-enhanced .sort__apply {
  display: none;
}

.sort__apply {
  min-height: var(--touch);
  font-size: var(--text-sm);
}

/* Filters: a button that opens a panel. Wide screens: the panel drops
   down under the toolbar with the groups side by side. Phones: a sheet. */
.facets {
  position: static;
  min-width: 0;
}

.facets__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
  padding: 0 var(--space-5) 0 var(--space-4);
  border: 1px solid var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.facets__toggle::-webkit-details-marker {
  display: none;
}

.facets[open] > .facets__toggle,
.facets__toggle:hover {
  background: var(--ink);
  color: var(--paper);
}

.facets__n {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--sage-deep);
  color: var(--paper);
  font-size: var(--text-caption);
  line-height: 1;
}

.facets__body {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 16;
  display: grid;
  gap: var(--space-6);
  max-height: min(70vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-8) var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 24px 40px -24px rgb(17 17 17 / 18%);
  animation: pop-in var(--dur) var(--ease-out);
}

.facets__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-8) var(--space-12);
}

/* A long group (brands) takes the room it needs in columns. */
.facets__group:has(.facets__list > li:nth-child(12)) {
  grid-column: span 3;
}

.facets__h {
  margin-bottom: var(--space-3);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.facets__list {
  columns: 13rem;
  column-gap: var(--space-8);
  padding: 0;
  list-style: none;
}

.facets__list li {
  break-inside: avoid;
}

.facets__opt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 40px;
  font-size: var(--text-sm);
  text-decoration: none;
}

.facets__opt:hover .facets__label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.facets__box {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.facets__opt:hover .facets__box {
  border-color: var(--ink);
}

.facets__opt[aria-current="true"] .facets__box {
  border-color: var(--ink);
  background: var(--ink);
}

.facets__opt[aria-current="true"] .facets__box::after {
  content: "";
  width: 9px;
  height: 5px;
  margin-top: -2px;
  border-left: 1.5px solid var(--paper);
  border-bottom: 1.5px solid var(--paper);
  transform: rotate(-45deg);
}

.facets__opt[aria-current="true"] {
  font-weight: var(--fw-medium);
}

.facets__label {
  min-width: 0;
}

.facets__count {
  color: var(--text-muted);
  font-size: var(--text-caption);
}

.facets__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.facets__note {
  max-width: var(--measure);
  color: var(--text-muted);
  font-size: var(--text-caption);
}

.facets__done[hidden] {
  display: none;
}

/* Wide screens: the panel closes by its button in the toolbar. */
@media (min-width: 900px) {
  .facets__done {
    display: none;
  }

  .facets__foot:not(:has(a)) {
    display: none;
  }
}

/* Applied filters as chips, each removes itself. */
.chips__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 0 var(--space-3) 0 var(--space-4);
  border: 1px solid var(--line);
  background: var(--paper-soft);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease);
}

.chip:hover {
  border-color: var(--ink);
}

.chip svg {
  color: var(--text-muted);
}

.chips__clear {
  margin-left: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.chips__clear:hover {
  color: var(--ink);
}

/* Phones and tablets: the toolbar is two equal buttons (filters, sort);
   the count follows on its own line; the panel is a sheet from below. */
@media (max-width: 899px) {
  /* Solid, without backdrop-filter: a filter would become the containing
     block of the fixed filter sheet and pin it to the toolbar. */
  .results-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .results-bar--end {
    display: flex;
  }

  /* Second line: the count, and "how we rank" at its end. */
  .results-bar__count {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: calc(100% - 9rem);
    font-size: var(--text-xs);
  }

  .results-bar__rank {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: end;
  }

  .results-bar:not(:has(.facets)) .sort {
    grid-column: 1 / -1;
  }

  .facets__toggle {
    justify-content: center;
    width: 100%;
  }

  .sort {
    margin: 0;
  }

  .sort__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .sort__select {
    width: 100%;
    font-weight: var(--fw-medium);
  }

  .sort:not(.is-enhanced) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .facets__body {
    position: fixed;
    z-index: 16;
    top: auto;
    bottom: 0;
    max-height: 82dvh;
    padding: var(--space-6) var(--gutter) 0;
    border-top: 1px solid var(--line);
    box-shadow: 0 -24px 60px rgb(17 17 17 / 22%);
    animation: sheet-up var(--dur) var(--ease-out);
  }

  /* The page behind the sheet dims; a tap on it closes the sheet
     (js/listing.js). */
  .facets[open]::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 15;
    background: rgb(17 17 17 / 32%);
    animation: fade-in var(--dur) var(--ease);
  }

  .facets__groups {
    grid-template-columns: 1fr;
  }

  .facets__group:has(.facets__list > li:nth-child(12)) {
    grid-column: auto;
  }

  .facets__list {
    columns: 2 9rem;
    column-gap: var(--space-5);
  }

  .facets__opt {
    min-height: var(--touch);
  }

  .facets__foot {
    position: sticky;
    bottom: 0;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-inline: calc(-1 * var(--gutter));
    padding: var(--space-3) var(--gutter) max(var(--space-3), env(safe-area-inset-bottom));
    background: var(--paper);
  }

  .facets__done {
    flex: 1 1 auto;
    max-width: 16rem;
    margin-left: auto;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes sheet-up {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}

/* Empty results */
.empty-state {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding: var(--space-10);
  background: var(--paper-soft);
}

.empty-state__title {
  font-family: var(--font-editorial);
  font-size: var(--text-h4);
  line-height: var(--leading-snug);
}

.empty-state p:not(.empty-state__title) {
  color: var(--text-body);
  font-size: var(--text-sm);
}

/* ── Pagination ───────────────────────────────────────────────────── */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
}

.pager__pages {
  display: flex;
  gap: var(--space-1);
  padding: 0;
  list-style: none;
}

.pager__page,
.pager__gap,
.pager__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch);
  min-height: var(--touch);
  text-decoration: none;
}

.pager__step {
  padding-inline: var(--space-3);
}

.pager a {
  transition: background-color var(--dur-fast) var(--ease);
}

.pager a:hover {
  background: var(--paper-soft);
}

.pager__page[aria-current="page"] {
  background: var(--ink);
  color: var(--paper);
  font-weight: var(--fw-medium);
}

.pager__gap {
  color: var(--text-muted);
}

/* ── A–Z letters (brands, designers) ──────────────────────────────── */
.letters {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-1);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

/* Phones: the letters run in one line that scrolls sideways. */
@media (max-width: 767px) {
  .letters {
    flex-wrap: nowrap;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .letters::-webkit-scrollbar {
    display: none;
  }

  .letters a {
    flex: none;
  }
}

.letters a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: var(--touch);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}

.letters a:hover {
  background: var(--paper-soft);
}

.letter-group {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-8);
  border-top: 1px solid var(--line);
  scroll-margin-top: var(--space-6);
}

@media (min-width: 768px) {
  .letter-group {
    grid-template-columns: 8rem minmax(0, 1fr);
  }
}

.letter-group__h {
  font-size: var(--text-h2);
}

.letter-group__list {
  columns: 3 16rem;
  column-gap: var(--space-12);
  padding: 0;
  list-style: none;
}

.letter-group__list li {
  break-inside: avoid;
}

.letter-group__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--touch);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--line-faint);
  text-decoration: none;
}

.letter-group__name {
  font-family: var(--font-editorial);
  font-size: var(--text-h4);
  line-height: var(--leading-snug);
}

.letter-group__list a:hover .letter-group__name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.letter-group__count {
  color: var(--text-muted);
  font-size: var(--text-caption);
  white-space: nowrap;
}

/* ── Brand page and overview ──────────────────────────────────────── */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.jump a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  color: var(--text-body);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.jump a:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.jump__label {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-right: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* The name set large beside a mosaic of the brand's own photos: one large
   and four small, or fewer when the brand has fewer photos. Phones: the
   name, then three photos in a row. */
.brand-hero__grid {
  display: grid;
  gap: var(--space-10);
  align-items: end;
}

.brand-hero__name {
  margin-top: var(--space-3);
  font-size: clamp(3rem, 1.6rem + 5vw, 6rem);
  letter-spacing: -0.025em;
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.brand-hero__facts {
  margin-top: var(--space-5);
  color: var(--text-body);
  font-size: var(--text-sm);
  text-wrap: balance;
}

.brand-hero__lede {
  margin-top: var(--space-5);
}

.brand-mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.brand-mosaic__item a {
  display: block;
}

.brand-mosaic .frame {
  background: var(--paper-soft);
}

.brand-mosaic__item:nth-child(n + 4) {
  display: none;
}

@media (min-width: 900px) {
  .brand-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: var(--space-16);
  }

  .brand-mosaic {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, auto);
  }

  .brand-mosaic__item:nth-child(n + 4) {
    display: block;
  }

  .brand-mosaic--5 .brand-mosaic__item:first-child,
  .brand-mosaic--3 .brand-mosaic__item:first-child {
    display: grid;
    grid-row: span 2;
  }

  .brand-mosaic--3 {
    grid-template-columns: 2fr 1fr;
  }

  .brand-mosaic--1,
  .brand-mosaic--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-mosaic--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* The large photo fills both rows (its frame is not square). */
  .brand-mosaic--5 .brand-mosaic__item:first-child .frame,
  .brand-mosaic--3 .brand-mosaic__item:first-child .frame {
    --fit-pad: 0.1;
    aspect-ratio: auto;
    height: 100%;
  }
}

.brand-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12) var(--grid-gap-x);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .brand-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .brand-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.brand-tiles li {
  scroll-margin-top: var(--space-6);
}

.brand-tile {
  display: grid;
  gap: 2px;
  text-decoration: none;
}

/* Four photos in a square: 2 × 2 (three: one tall and two; fewer: side by
   side), on the off-white surface so the four read as one tile. */
.brand-tile__mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  aspect-ratio: 1 / 1;
  margin-bottom: var(--space-4);
  overflow: hidden;
  background: var(--paper);
}

.brand-tile__mosaic .frame {
  --fit-pad: 0.1;
  aspect-ratio: auto;
  background: var(--paper-soft);
}

.brand-tile__mosaic .frame img {
  transition: transform var(--dur-slow) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .brand-tile:hover .brand-tile__mosaic .frame img {
    transform: scale(1.04);
  }
}

.brand-tile__mosaic--3 .frame:first-child {
  grid-row: span 2;
}

.brand-tile__mosaic--1 {
  grid-template-columns: 1fr;
}

.brand-tile__mosaic--2 .frame {
  grid-row: span 2;
}

.brand-tile__type {
  margin-bottom: var(--space-4);
}

.brand-tile:hover .brand-tile__type {
  background: var(--paper-2);
}

.brand-tile__name {
  color: var(--ink);
  font-family: var(--font-editorial);
  font-size: var(--text-h4);
  line-height: var(--leading-snug);
}

.brand-tile:hover .brand-tile__name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.brand-tile__facts,
.brand-tile__count {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

/* ── Not found ────────────────────────────────────────────────────── */
.nf {
  display: grid;
  gap: var(--space-6);
  justify-items: start;
  padding-block: var(--space-20) var(--space-8);
}

.nf__title {
  max-width: 16ch;
  font-size: var(--text-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.02;
}

.nf__lede {
  max-width: 44ch;
  color: var(--text-body);
  font-size: var(--text-lead);
}

.nf__search {
  display: flex;
  width: 100%;
  max-width: 600px;
  margin-top: var(--space-2);
}

.nf__search input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-right: 0;
  background: var(--paper);
}

.nf__search input:focus {
  border-color: var(--ink);
  outline: none;
}

/* Phones: the field takes the full width so its placeholder is not cut. */
@media (max-width: 480px) {
  .nf__search {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .nf__search input {
    flex-basis: 100%;
    border-right: 1px solid var(--line-strong);
  }
}

/* ── Information pages ────────────────────────────────────────────── */
/* Text at a readable measure on the left, aligned with the page title; a
   sticky side column at the right with the other information pages, a
   contact card and the date the text last changed. On phones the side
   column follows the text as one compact block. */
.info {
  display: grid;
  gap: var(--space-12);
}

@media (min-width: 1000px) {
  .info {
    grid-template-columns: minmax(0, 42rem) minmax(15rem, 20rem);
    justify-content: space-between;
    column-gap: var(--space-16);
    align-items: start;
  }

  .info-aside__inner {
    position: sticky;
    top: var(--space-8);
  }

  .info__body {
    max-width: none;
    font-size: var(--text-body-lg);
  }
}

.info__body {
  display: grid;
  gap: var(--space-12);
  max-width: var(--measure);
}

.info__section {
  display: grid;
  gap: var(--space-4);
}

.info__h {
  font-size: var(--text-h3);
}

.info__section p {
  color: var(--text-body);
}

.info__section a {
  color: var(--ink);
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
}

.info__section a:hover {
  text-decoration-color: currentColor;
}

.info__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 1.4em;
  color: var(--text-body);
}

.info__list li {
  padding-left: var(--space-1);
}

.info__list li::marker {
  color: var(--text-muted);
}

.info-aside__inner {
  display: grid;
  gap: var(--space-8);
}

.info-aside__title {
  margin-bottom: var(--space-3);
}

.info-aside__nav ul {
  display: grid;
  padding: 0;
  list-style: none;
}

.info-aside__nav a {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  padding-left: var(--space-4);
  border-left: 1px solid var(--line);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.info-aside__nav a:hover {
  border-left-color: var(--line-strong);
  color: var(--ink);
}

.info-aside__nav a[aria-current='page'] {
  border-left: 2px solid var(--ink);
  padding-left: calc(var(--space-4) - 1px);
  color: var(--ink);
  font-weight: var(--fw-medium);
}

.info-aside__contact {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--paper-soft);
  font-size: var(--text-sm);
}

.info-aside__contact p {
  color: var(--text-body);
}

.info-aside__contact .info-aside__contact-title {
  color: var(--ink);
  font-family: var(--font-editorial);
  font-size: var(--text-h4);
  line-height: var(--leading-snug);
}

.info-aside__mail {
  justify-self: start;
  margin-top: var(--space-2);
  color: var(--ink);
  font-weight: var(--fw-medium);
  overflow-wrap: anywhere;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
}

.info-aside__mail:hover {
  text-decoration-color: currentColor;
}

.info-aside__updated {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

@media (max-width: 999px) {
  .info-aside {
    padding-top: var(--space-8);
    border-top: 1px solid var(--line);
  }

  .info-aside__nav ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
  }

  .info-aside__contact {
    padding: var(--space-5);
  }
}

.notice {
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--sage);
  background: var(--paper-soft);
  color: var(--text-body);
  font-size: var(--text-sm);
}

.notice strong {
  color: var(--ink);
  font-weight: var(--fw-semibold);
}

/* ── Focus inside tight containers ────────────────────────────────── */
.hdr-search:focus-within {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.facets__opt:focus-visible,
.mega a:focus-visible,
.info-aside__nav a:focus-visible,
.hdr-locale__list a:focus-visible {
  outline-offset: -2px;
}

/* ── Product page ─────────────────────────────────────────────────────
   Gallery left (sticky on wide screens), one calm column right: brand,
   name, designer; the price that matters (the first shop offer, else the
   manufacturer's price); the choices; the comparison of shops; short
   facts. Product information in tabs below; the series after that. */
.pdp-crumbs {
  padding-top: var(--space-6);
}

.pdp-crumbs .crumbs {
  margin: 0;
}

.pdp {
  display: grid;
  gap: var(--space-8);
  align-items: start;
  padding-block: var(--space-6) var(--section-y);
}

@media (min-width: 900px) {
  .pdp {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: var(--space-12);
  }

  .pdp__media {
    position: sticky;
    top: var(--space-6);
  }
}

@media (min-width: 1280px) {
  .pdp {
    gap: var(--space-20);
  }
}

.pdp__col {
  display: grid;
  gap: var(--space-8);
  align-content: start;
  min-width: 0;
  transition: opacity var(--dur) var(--ease);
}

/* Loading a version (js/variant-picker.js): the column quiets down until
   the new one is in; the photo cross-fades on its own. */
.pdp[aria-busy='true'] .pdp__col {
  opacity: 0.55;
}

/* Gallery */
.gallery {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.gallery__main {
  position: relative;
}

/* The large product photo on the off-white surface: the one place a
   packshot is framed, so the page has a calm anchor. */
.gallery__main .frame {
  --frame-pad: 7%;
  --fit-pad: 0.1;
  background: var(--paper-soft);
  view-transition-name: pdp-photo;
}

::view-transition-old(pdp-photo),
::view-transition-new(pdp-photo) {
  animation-duration: var(--dur);
  animation-timing-function: var(--ease);
}

/* Phones and tablets: the photo runs edge to edge, square on a phone and
   never taller than 60 % of the screen, so the name follows in view. */
@media (max-width: 899px) {
  .gallery__main .frame {
    aspect-ratio: auto;
    height: min(100vw, 60vh);
    margin-inline: calc(-1 * var(--gutter));
  }
}

.gallery__thumbs {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0 0 var(--space-1);
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.gallery__thumb {
  position: relative;
  display: block;
  flex: none;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 1px solid transparent;
  background: var(--paper-soft);
  transition: border-color var(--dur-fast) var(--ease);
}

.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.gallery__thumb img.fit {
  --fit-pad: 0.1;
  position: absolute;
}

.gallery__thumb:hover {
  border-color: var(--line-strong);
}

.gallery__thumb[aria-current='true'] {
  border-color: var(--ink);
}

.pdp__media-note {
  color: var(--text-muted);
  font-size: var(--text-caption);
}

/* Several photos (js/gallery.js): one row that snaps photo by photo, the
   same calm feel as the sliders. The row, not each photo, cross-fades on a
   version switch. Phones: swipe, dots under the photo. From 600 px:
   thumbnails; with a mouse, round buttons appear over the photo. */
.gallery--multi .gallery__main .frame {
  view-transition-name: none;
}

.gallery__viewport {
  view-transition-name: pdp-photo;
}

.gallery__track {
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}

.gallery__track::-webkit-scrollbar {
  display: none;
}

.gallery__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.gallery__slide .frame {
  cursor: zoom-in;
}

.gallery__slide .frame:focus-visible {
  outline-offset: -3px;
}

@media (max-width: 899px) {
  .gallery--multi .gallery__viewport {
    margin-inline: calc(-1 * var(--gutter));
  }

  .gallery--multi .gallery__main .frame {
    margin-inline: 0;
  }
}

.gallery__nav {
  position: absolute;
  inset: 50% var(--space-4) auto;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  translate: 0 -50%;
}

.gallery__nav[hidden] {
  display: none;
}

.gallery__btn {
  pointer-events: auto;
  border-color: transparent;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), border-color var(--dur-fast) var(--ease);
}

.gallery__main:hover .gallery__btn:not(:disabled),
.gallery__btn:focus-visible {
  opacity: 1;
}

.gallery__btn:disabled {
  visibility: hidden;
}

@media (hover: none), (pointer: coarse), (max-width: 599px) {
  .gallery__nav {
    display: none;
  }
}

.gallery__count {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-3);
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.gallery__count[hidden] {
  display: none;
}

.gallery__dots {
  display: none;
}

@media (max-width: 599px) {
  .gallery--multi .gallery__thumbs {
    display: none;
  }

  /* Dots for a few photos; beyond ten the counter alone says where you are. */
  .gallery--multi.is-ready .gallery__dots:not(.gallery__dots--many) {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: var(--space-1) 0 0;
    list-style: none;
  }

  .gallery--multi.is-ready:has(.gallery__dots:not(.gallery__dots--many)) .gallery__count {
    display: none;
  }
}

.gallery__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background-color var(--dur) var(--ease), scale var(--dur) var(--ease);
}

.gallery__dot[data-current] {
  background: var(--ink);
  scale: 1.15;
}

.gallery__thumbs {
  position: relative;
}

/* Full-screen view: white, the photo whole and as large as the screen
   allows, the controls quiet in the corners. */
.has-lightbox {
  overflow: hidden;
}

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}

.lightbox[open] {
  animation: lightbox-in var(--dur) var(--ease-out);
}

.lightbox::backdrop {
  background: var(--paper);
}

@keyframes lightbox-in {
  from {
    opacity: 0;
    scale: 0.985;
  }
}

.lightbox__track {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
}

.lightbox__track::-webkit-scrollbar {
  display: none;
}

.lightbox.is-zoomed .lightbox__track {
  overflow: hidden;
}

.lightbox__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.lightbox__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: clamp(var(--space-4), 5vh, var(--space-16)) clamp(var(--space-4), 6vw, var(--space-20));
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: scale var(--dur) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .lightbox__slide img {
    cursor: zoom-in;
  }
}

.lightbox__slide img.is-zoomed {
  scale: var(--zoom, 2);
  cursor: zoom-out;
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.lightbox__btn:hover:not(:disabled) {
  border-color: var(--ink);
}

.lightbox__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.lightbox__close {
  top: var(--space-4);
  right: var(--space-4);
}

.lightbox__prev,
.lightbox__next {
  top: 50%;
  translate: 0 -50%;
}

.lightbox__prev {
  left: var(--space-4);
}

.lightbox__next {
  right: var(--space-4);
}

/* Touch screens (and every phone-sized screen) swipe; the arrows are for a mouse. */
@media (hover: none), (pointer: coarse), (max-width: 599px) {
  .lightbox__prev,
  .lightbox__next {
    display: none;
  }
}

.lightbox__count {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  margin: 0;
  translate: -50% 0;
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.badges {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.badge {
  padding: var(--space-1) var(--space-3);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-caption);
  font-weight: var(--fw-medium);
  line-height: var(--leading-snug);
}

/* Name and designer */
.pdp__intro {
  display: grid;
  gap: var(--space-3);
}

.pdp__intro .eyebrow a {
  text-decoration: none;
}

.pdp__intro .eyebrow a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.pdp__title {
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

@media (min-width: 900px) {
  .pdp__title {
    font-size: var(--text-h2-lg);
  }
}

/* The configuration under the model name: quiet, never a second headline. */
.pdp__config {
  margin-top: calc(-1 * var(--space-1));
  color: var(--text-body);
  font-size: var(--text-ui);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}

.pdp__designer {
  color: var(--text-body);
  font-family: var(--font-editorial);
  font-size: var(--text-lead);
  font-style: italic;
}

.pdp__designer a {
  color: var(--ink);
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
}

.pdp__designer a:hover {
  text-decoration-color: currentColor;
}

.pdp__variant {
  color: var(--ink);
  font-size: var(--text-sm);
}

/* The leading offer: the figure the comparison is ranked by, large; one
   solid button; the link down to every shop. */
.pdp__lead {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.pdp__lead-amount {
  color: var(--ink);
  font-size: 2rem;
  font-weight: var(--fw-medium);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.pdp__lead-note {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.pdp__lead-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-4);
}

.pdp__lead-cta {
  flex: 1 1 14rem;
  min-height: 52px;
}

/* Choice rows */
.choices {
  display: grid;
  gap: var(--space-6);
}

.choice {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.choice__label {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.choice__selected {
  color: var(--ink);
  font-weight: var(--fw-medium);
}

.choice--fixed {
  display: block;
  font-size: var(--text-sm);
}

.choice--fixed .choice__label {
  display: block;
  margin-bottom: var(--space-1);
}

.choice__values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch);
  min-height: var(--touch);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

/* Text choices: a hairline box; the chosen one is ink with white text.
   One state, one border. */
.opt--chip {
  max-width: 100%;
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.opt__text {
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.opt--chip:hover {
  border-color: var(--ink);
}

.opt--chip[aria-current='true'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* Photo swatches: a round crop of the version's own photo; the chosen one
   has a single 2 px ink ring, nothing else. */
.opt--photo {
  position: relative;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
}

.opt--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  transform: scale(1.7);
  transition: transform var(--dur) var(--ease-out);
}

a.opt--photo:hover {
  border-color: var(--line-strong);
}

a.opt--photo:hover img {
  transform: scale(1.85);
}

.opt--photo[aria-current='true'] {
  border: 2px solid var(--ink);
}

.opt--photo:focus-visible {
  outline-offset: 3px;
}

/* Not made in this combination with the choices above. */
.opt.is-off {
  color: var(--text-faint);
  cursor: not-allowed;
}

.opt--chip.is-off {
  border-style: dashed;
  background: transparent;
}

.opt--chip.is-off .opt__text {
  text-decoration: line-through;
  text-decoration-color: var(--line-strong);
}

.opt--photo.is-off img {
  opacity: 0.35;
}

.opt--photo.is-off::after {
  position: absolute;
  inset: 50% -4px auto;
  height: 1px;
  background: var(--text-faint);
  content: '';
  transform: rotate(-45deg);
}

.choice__more > summary,
.allv > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 6px;
  cursor: pointer;
  list-style: none;
}

.choice__more > summary:hover,
.allv > summary:hover {
  text-decoration-color: currentColor;
}

.choice__more > summary::-webkit-details-marker,
.allv > summary::-webkit-details-marker {
  display: none;
}

.choice__more > summary::after,
.allv > summary::after {
  content: '+';
  font-weight: var(--fw-regular);
  text-decoration: none;
}

.choice__more[open] > summary::after,
.allv[open] > summary::after {
  content: '−';
}

.choice__more[open] > summary {
  margin-bottom: var(--space-2);
}

/* Every version, on request */
.allv {
  margin-top: calc(-1 * var(--space-4));
}

.allv__list {
  max-height: 22rem;
  margin: var(--space-2) 0 0;
  padding: 0;
  overflow-y: auto;
  border-bottom: 1px solid var(--line-faint);
  list-style: none;
  overscroll-behavior: contain;
}

.allv__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--space-4);
  padding: var(--space-2) var(--space-1) var(--space-2) 0;
  border-top: 1px solid var(--line-faint);
  font-size: var(--text-sm);
}

.allv__row a {
  min-width: 0;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.allv__row a:hover,
.allv__row a[aria-current='true'] {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.allv__row a[aria-current='true'] {
  font-weight: var(--fw-medium);
}

.allv__meta {
  display: flex;
  gap: var(--space-3);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.allv__price {
  color: var(--ink);
}

.allv__more {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* The manufacturer's price: labelled, in its own currency, never an offer.
   Without shop offers it is the page's price (large, with the maker's
   link as the one action); with offers a smaller reference below them. */
.pdp__price {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.pdp__price-value {
  margin-top: var(--space-1);
  color: var(--ink);
  font-size: 2rem;
  font-weight: var(--fw-medium);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.pdp__price-kind {
  color: var(--text-body);
  font-size: var(--text-sm);
}

.pdp__price-note {
  max-width: 44ch;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.pdp__source {
  justify-self: start;
  margin-top: var(--space-4);
}

.pdp__price--ref .pdp__price-value {
  font-size: var(--text-subtitle);
}

.pdp__price--ref .pdp__source {
  margin-top: var(--space-1);
}

/* Shop offers */
.shops-slot {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  background: var(--paper-soft);
  scroll-margin-top: var(--space-6);
}

.shops-slot__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
}

.shops-slot__rank {
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.shops-slot__rank:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.shops-slot__empty {
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}

.shops-slot__note {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.shops-slot__alert {
  justify-self: start;
  margin-top: var(--space-2);
}

.offers {
  display: grid;
  margin: var(--space-2) 0 var(--space-1);
  padding: 0;
  list-style: none;
}

.offer {
  display: grid;
  gap: 2px;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
}

.offer__main,
.offer__meta,
.offer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--space-4);
}

.offer__shop {
  color: var(--ink);
  font-weight: var(--fw-medium);
}

.offer__amount {
  color: var(--ink);
  font-size: var(--text-subtitle);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

.offer__stock,
.offer__label,
.offer__detail,
.offer__checked {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.offer__detail {
  color: var(--text-body);
}

.offer__drop {
  justify-self: start;
  margin-top: var(--space-1);
  padding: 2px var(--space-2);
  background: var(--tile);
  color: var(--sage-deep);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
}

.offer__foot {
  align-items: center;
  margin-top: var(--space-2);
}

.offer__cta {
  min-height: var(--touch);
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-sm);
  background: var(--paper);
}

.offer--unavailable .offer__shop,
.offer--unavailable .offer__amount {
  color: var(--text-muted);
}

/* Factual highlights from the manufacturer's data */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-4) var(--space-6);
  margin: 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.facts__item {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
}

.facts dt {
  color: var(--text-muted);
  font-size: var(--text-caption);
}

.facts dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

/* The key facts in sentences, above the manufacturer's description. */
.pdp-about {
  display: grid;
  gap: var(--space-4);
}

.pdp__summary {
  max-width: var(--measure);
  color: var(--ink);
  font-size: var(--text-ui);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}

.pdp__updated {
  color: var(--text-body);
  font-size: var(--text-sm);
}

.pdp__description {
  max-width: var(--measure);
  color: var(--text-body);
  font-family: var(--font-editorial);
  font-size: var(--text-h4);
  line-height: 1.5;
}

/* Product information: stacked sections, tabs once the script runs. */
.pinfo {
  padding-top: var(--section-y);
}

.tabs {
  display: grid;
  gap: var(--space-8);
  min-width: 0;
}

.tabs.is-tabbed {
  gap: var(--space-8);
}

.tabs__list {
  display: flex;
  gap: var(--space-8);
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}

.tabs__list[hidden] {
  display: none;
}

.tabs__tab {
  position: relative;
  flex: none;
  min-height: 52px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-ui);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

.tabs__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}

.tabs__tab:hover {
  color: var(--ink);
}

.tabs__tab[aria-selected='true'] {
  color: var(--ink);
  font-weight: var(--fw-medium);
}

.tabs__tab[aria-selected='true']::after {
  transform: scaleX(1);
}

.tabs__tab:focus-visible {
  outline-offset: -2px;
}

.tabs__panel {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
  animation: pop-in var(--dur) var(--ease-out);
}

.tabs__panel[hidden] {
  display: none;
}

.tabs__panel:focus-visible {
  outline-offset: 4px;
}

.tabs__heading {
  font-size: var(--text-h4);
}

.is-tabbed .tabs__heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Label/value grid: two or three columns of groups on wide screens. */
.sgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-8) var(--space-12);
  align-items: start;
}

.sgrid__h {
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
}

.sgrid dl {
  margin: 0;
}

.sgrid__row {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
}

.sgrid dt {
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.sgrid dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

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

@media (max-width: 480px) {
  .tabs__list {
    gap: var(--space-5);
  }

  .tabs__tab {
    font-size: var(--text-sm);
  }
}

/* ── Transparency ─────────────────────────────────────────────────── */
/* Paid placements (none today): the label always sits above the item. */
.ad-label {
  justify-self: start;
  margin: 0 0 var(--space-1);
  padding: 1px var(--space-2);
  border: 1px solid var(--line-strong);
  color: var(--text-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-medium);
}

/* "Trending now" note under its title. */
.rail__note {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.rail__rank {
  margin-left: var(--space-2);
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.rail__rank:hover {
  color: var(--ink);
}

/* ── Search: suggestions, hints, empty state ──────────────────────── */
.hdr-search.has-suggest {
  position: relative;
}

.suggest {
  position: absolute;
  z-index: 40;
  top: calc(100% + var(--space-2));
  left: -1px;
  right: -1px;
  max-height: min(70vh, 560px);
  margin: 0;
  padding: var(--space-2) 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  box-shadow: var(--shadow);
  animation: pop-in var(--dur) var(--ease-out);
}

.suggest__item[data-kind]::before {
  content: attr(data-kind);
  display: block;
  padding: var(--space-3) var(--space-4) var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.suggest__item a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch);
  padding: var(--space-1) var(--space-4);
  color: var(--ink);
  font-size: var(--text-ui);
  text-decoration: none;
}

.suggest__item[aria-selected="true"] a,
.suggest__item a:hover {
  background: var(--paper-soft);
}

.suggest__item img {
  flex: none;
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: var(--paper);
}

.suggest__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggest__detail {
  flex: none;
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.suggest__item--all {
  margin-top: var(--space-2);
  border-top: 1px solid var(--line);
}

.suggest__item--all a {
  font-weight: var(--fw-medium);
}

.search-hint {
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.search-hint__link {
  color: var(--ink);
  font-weight: var(--fw-medium);
}

.search-browse {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-12) var(--section-y);
}

.search-browse__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-browse__chip {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-6);
  background: var(--tile);
  color: var(--ink);
  font-size: var(--text-ui);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}

.search-browse__chip:hover {
  background: var(--tile-hover);
}