/* ==========================================================================
   SEDDIR — Page layouts
   intro · home · catalogue · about · product · legal
   ========================================================================== */

.page { padding-top: var(--page-top); }
.section-gap    { margin-top: 70px; }
.section-gap-lg { margin-top: 160px; }
.footer-gap     { margin-top: 160px; }
@media (max-width: 1024.98px) {
  .section-gap    { margin-top: 48px; }
  .section-gap-lg { margin-top: 80px; }
  .footer-gap     { margin-top: 80px; }
}
@media (max-width: 767.98px) {
  .section-gap-lg { margin-top: 48px; }
  .footer-gap     { margin-top: 56px; }
}

/* ==== Intro (home): colour swatch book =====================================
   home.js flips --i-bg / --i-fg through the logo-on-colour pairs, then
   .is-seam   → an orange piping cord draws across the middle
   .is-split  → the two halves part up and down, revealing the page
   ======================================================================== */
.intro {
  --i-bg: var(--c-paper); --i-fg: var(--c-orange);
  position: fixed; inset: 0; z-index: var(--z-intro); pointer-events: none;
}
.no-intro .intro { display: none; }
.intro__half {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--i-bg); color: var(--i-fg);
  transition: transform .64s cubic-bezier(.76, 0, .24, 1);
}
.intro__half--top { clip-path: inset(0 0 50% 0); }
.intro__half--bot { clip-path: inset(50% 0 0 0); }
.intro.is-split .intro__half--top { transform: translateY(-51%); }
.intro.is-split .intro__half--bot { transform: translateY(51%); }
.intro__brand { width: min(62vw, 880px); }
.intro__seam {
  position: absolute; left: 0; right: 0; top: 50%;
  height: clamp(10px, 1.5vw, 20px); transform: translateY(-50%) scaleX(0); border-radius: 99px;
  background: repeating-linear-gradient(115deg, rgb(0 0 0 / .12) 0 3px, transparent 3px 9px), var(--c-orange);
  box-shadow: 0 4px 8px rgb(0 0 0 / .3);
  transition: transform .32s var(--ease-io), opacity .26s;
}
.intro.is-seam .intro__seam { transform: translateY(-50%) scaleX(1); }
.intro.is-split .intro__seam { transform: translateY(-50%) scaleX(1) scaleY(.2); opacity: 0; transition-delay: .05s; }

@media (max-width: 767.98px) {
  .intro__brand { width: 84vw; }
}

/* ==== Home · hero slider ================================================== */
/* Full-bleed, full-height: the header floats over it (components.css), so the
   copy clears the bar and the arrows sit at the bottom, away from the icons. */
[data-page="home"] { --page-top: 0px; }
.hero {
  position: relative; overflow: hidden; container-type: size;
  height: max(560px, 100svh);
  color: var(--c-paper);
  background: var(--c-navy);
}
/* Slides change like a curtain: the next photo rises over the current one,
   led by a piping cord in that cushion's piping colour (home.js). */
.hero__slide { position: absolute; inset: 0; visibility: hidden; }
.hero__slide.is-active { visibility: visible; z-index: 2; }
.hero__slide.is-leaving { visibility: visible; z-index: 1; }
.hero.is-ready .hero__slide.is-active { animation: hero-in .95s var(--ease-io) both; }
@keyframes hero-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
.hero__cord {
  position: absolute; left: -2%; right: -2%; top: 0; z-index: 4; pointer-events: none;
  height: clamp(9px, 1.1vw, 16px); margin-top: calc(clamp(9px, 1.1vw, 16px) / -2); border-radius: 99px;
  background: repeating-linear-gradient(115deg, rgb(0 0 0 / .14) 0 3px, transparent 3px 9px), var(--pip, var(--c-orange));
  box-shadow: 0 6px 14px rgb(0 0 0 / .3);
  opacity: 0;
}
.hero__cord.is-run { animation: hero-cord .95s var(--ease-io) both; }
@keyframes hero-cord {
  from { transform: translateY(100cqh); opacity: 1; }
  88%  { opacity: 1; }
  to   { transform: translateY(0); opacity: 0; }
}
.hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s linear; }
.hero__slide.is-active img { transform: scale(1); }
.hero__shade {
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(90deg, rgb(0 0 0 / .55) 0%, rgb(0 0 0 / .25) 55%, rgb(0 0 0 / .05) 100%);
}
.hero__content {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--bar-h) + 64px) 70px 62px;
  max-width: 760px;
}
.hero__title { font-size: var(--fs-hero); line-height: var(--lh-hero); font-stretch: var(--wdth-max); letter-spacing: -.01em; color: var(--c-paper); }
.hero__lead { font-size: var(--fs-hero-p); line-height: var(--lh-hero-p); max-width: 590px; margin-bottom: 30px; }
.hero__nav { position: absolute; bottom: 62px; right: 70px; z-index: 6; display: flex; align-items: center; gap: 14px; }
.hero__step {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgb(245 248 245 / .55); color: var(--c-paper);
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.hero__step:hover, .hero__step:focus-visible { background: var(--c-paper); border-color: var(--c-paper); color: var(--c-black); }
.hero__step svg { width: 18px; height: 18px; }
.hero__dots { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.hero__dots button { display: block; position: relative; width: 46px; height: 28px; }
.hero__dots i { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; overflow: hidden; background: rgb(245 248 245 / .35); }
.hero__dots i::after { content: ""; position: absolute; inset: 0; background: var(--c-paper); transform: scaleX(0); transform-origin: 0 50%; }
.hero__dots [aria-current] i::after { animation: hero-fill 6s linear forwards; }   /* autoplay clock: home.js advances on animationend */
.hero:is(:hover, :focus-within) .hero__dots [aria-current] i::after { animation-play-state: paused; }
@keyframes hero-fill { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero.is-ready .hero__slide.is-active, .hero__cord.is-run { animation: none; }
  .hero__dots [aria-current] i::after { animation: none; transform: scaleX(1); }
}

@media (max-width: 1024.98px) {
  .hero__content { padding: calc(var(--bar-h) + 40px) 40px 48px; }
  .hero__nav { bottom: 48px; right: 40px; }
  .hero__shade { background: linear-gradient(180deg, rgb(0 0 0 / .45) 0%, rgb(0 0 0 / .1) 40%, rgb(0 0 0 / .55) 100%); }
}
@media (max-width: 767.98px) {
  .hero__content { padding: calc(var(--bar-h) + 24px) 20px 84px; }
  .hero__nav { bottom: 22px; left: 20px; right: 20px; justify-content: space-between; gap: 8px; }
  .hero__step { width: 38px; height: 38px; }
  .hero__dots button { width: 30px; }
  .hero__lead { margin-bottom: 18px; }
}

/* ==== Home · colour picker =================================================
   Sized to the viewport below the header, so the photo, the name and every
   swatch are visible together without scrolling; the name scales with its
   column so long names (Mandalina) never overflow. */
.picker {
  display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  height: clamp(440px, calc(100svh - var(--head-total) - var(--inset) - 32px), min(760px, 62vw));
  background: var(--c-paper);
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px -24px rgb(25 50 94 / .45);
}
.picker__media { position: relative; min-height: 0; overflow: hidden; background: var(--c-navy); }
.picker__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.picker__media img.is-active { opacity: 1; }
.picker__info {
  container-type: inline-size; min-width: 0; min-height: 0;
  display: grid; align-content: center; gap: clamp(12px, 3vh, 28px);
  padding: clamp(20px, 4vh, 48px) clamp(24px, 5vw, 80px);
}
.picker__eyebrow { font: 700 13px/1 var(--ff-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.picker__panel { display: grid; justify-items: start; gap: clamp(10px, 2.2vh, 18px); }
.picker__panel.is-active { animation: picker-in .45s var(--ease-spring); }
@keyframes picker-in { from { opacity: 0; transform: translateY(10px); } }
.picker__name { font-size: min(120px, 12.5cqi, 12svh); line-height: .9; color: var(--c-navy); white-space: nowrap; }
.picker__bar { display: block; width: clamp(110px, 32cqi, 220px); height: clamp(8px, 1.6cqi, 13px); border-radius: 99px; background: var(--pip); box-shadow: 0 3px 5px rgb(0 0 0 / .18); }
.picker__desc { font-size: clamp(15px, 2.8cqi, 19px); font-weight: 600; }
.picker__price { font: 800 clamp(18px, 3.4cqi, 22px)/1 var(--ff-display); }
.picker__price s { font-size: .7em; font-weight: 600; opacity: .45; margin-left: 6px; }
.picker__swatches { --gap: clamp(10px, 2.4cqi, 16px); display: flex; flex-wrap: wrap; gap: var(--gap); padding: 6px; margin: -6px; }
.picker__sw {                                     /* a cushion: fabric inside, piping round the edge */
  width: min(54px, (100cqi - 5 * var(--gap) - 12px) / 6); aspect-ratio: 1; border-radius: 50%;
  background: var(--f); border: 9px solid var(--p); border-width: clamp(6px, 16%, 9px);
  box-shadow: 0 3px 6px rgb(0 0 0 / .2);
  transition: transform var(--dur) var(--ease-bounce), box-shadow var(--dur-fast);
}
.picker__sw:hover { transform: scale(1.08); }
.picker__sw[aria-pressed="true"] { transform: scale(1.14); box-shadow: 0 0 0 4px var(--c-paper), 0 0 0 7px var(--c-navy); }

@media (max-width: 767.98px) {
  .picker {
    grid-template-columns: 1fr; grid-template-rows: minmax(140px, 1fr) auto;
    height: clamp(500px, calc(100svh - var(--head-total) - 2 * var(--inset) - 8px), 820px);
  }
  .picker__info { padding: 18px 16px 20px; gap: 14px; }
  .picker__panel { grid-template-columns: auto 1fr; align-items: center; gap: 10px 16px; }
  .picker__name, .picker__bar, .picker__desc { grid-column: 1 / -1; }
  .picker__name { font-size: min(64px, 13cqi); }
  .picker__panel .btn { justify-self: start; padding-block: 10px; }
}

/* ==== Catalogue =========================================================== */
.catalog { padding-inline: var(--inset); }
/* Swatch book: title left, one cushion per colour right; a thin bar carries the
   count and the sort menu; cards are numbered like a fabric swatch book. */
.catalog__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px 56px;
  max-width: 1180px; margin: 0 auto; padding-top: 32px;
}
.catalog__title { font-size: clamp(44px, 7vw, 110px); line-height: .92; }
.catalog__intro { max-width: 440px; margin-top: 16px; color: var(--ink-soft); }
.kartela { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; max-width: 420px; padding-bottom: 10px; }
.kartela__sw {
  position: relative; width: 50px; aspect-ratio: 1; border-radius: 50%;
  background: var(--f); border: 8px solid var(--p); box-shadow: 0 3px 8px rgb(0 0 0 / .22);
  transition: transform var(--dur) var(--ease-bounce);
}
.kartela__sw:is(:hover, :focus-visible) { transform: translateY(-5px) rotate(-12deg) scale(1.08); }
.kartela__sw::after {                              /* name label under the cushion */
  content: attr(data-name); position: absolute; left: 50%; top: calc(100% + 14px);
  padding: 6px 9px; border-radius: 99px; background: var(--c-black); color: var(--c-paper);
  font: 700 12px/1 var(--ff-display); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateX(-50%) rotate(12deg) translateY(4px);
  transition: opacity var(--dur-fast), transform var(--dur) var(--ease-spring);
}
.kartela__sw:is(:hover, :focus-visible)::after { opacity: 1; transform: translateX(-50%) rotate(12deg); }
.catalog__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  max-width: 1180px; margin: 40px auto 44px; padding: 12px 0;
  border-top: 2px solid currentColor; border-bottom: 1px solid var(--line);
}
.catalog__count { font: 800 13px/1 var(--ff-display); letter-spacing: .1em; text-transform: uppercase; }
.sort { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1 var(--ff-display); }
.sort select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding: 9px 36px 9px 14px; border: 1.5px solid currentColor; border-radius: 999px; background: transparent; color: inherit;
  font: 700 13px/1 var(--ff-display);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.sort select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.grid .p-card { scroll-margin: calc(var(--head-total) + 24px); }
.grid .p-card.is-found .p-card__media { animation: found 1.2s var(--ease-io); }
@keyframes found { 25% { box-shadow: 0 0 0 6px var(--accent), 0 8px 24px rgb(0 0 0 / .1); } }
.filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.filters button {
  padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid var(--c-red); color: var(--c-red);
  font: 700 13px/1 var(--ff-display);
  transition: background-color var(--dur-fast), color var(--dur-fast), transform var(--dur) var(--ease-bounce);
}
.filters button:hover { transform: translateY(-2px); }
.filters button[aria-pressed="true"] { background: var(--c-red); color: var(--c-paper); }
.grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 56px 40px;
  max-width: 1180px; margin: 0 auto;
}
.grid .p-card.is-moving { animation: card-in .6s var(--ease-spring) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(16px); } }
@media (max-width: 1024.98px) { .grid { gap: 40px 20px; } }
@media (max-width: 767.98px)  {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
  .catalog__head { grid-template-columns: 1fr; gap: 20px; }
  .kartela { justify-content: flex-start; gap: 10px; padding-bottom: 0; }
  .kartela__sw { width: 40px; border-width: 7px; }
  .kartela__sw::after { display: none; }
  .catalog__bar { margin: 28px 0 28px; }
}

/* ==== About: fabric and text =============================================== */
.about { padding: var(--page-top) var(--inset) 0; background: var(--c-paper); }
.about__split {
  display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  min-height: calc(100svh - var(--page-top));
}
.about__media { position: relative; overflow: hidden; background: #7d1a24; }
.about__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: about-img 1.4s var(--ease-out-circ) both;
}
@keyframes about-img { from { transform: scale(1.08); opacity: 0; } }
.about__text {
  --px: clamp(28px, 4.6vw, 80px);
  position: relative; z-index: 1;
  display: grid; align-content: center; gap: 28px;
  padding: 56px var(--px) 96px;
}
.about__logo { width: min(360px, 62%); color: var(--c-red); }
.about__h { font-size: clamp(34px, 4vw, 60px); line-height: 1; color: var(--c-navy); text-wrap: balance; }
.about__cord {                                   /* the photo's piping runs on into the text */
  display: block; height: clamp(10px, 1.1vw, 16px); border-radius: 99px;
  width: calc(var(--px) + min(520px, 70%)); margin-left: calc(-1 * var(--px) - 6vw);
  background: repeating-linear-gradient(115deg, rgb(0 0 0 / .12) 0 3px, transparent 3px 9px), linear-gradient(180deg, #ffa21f 0 45%, #d97b00 100%);
  box-shadow: 0 4px 6px rgb(0 0 0 / .22);
  transform-origin: 0 50%; animation: about-cord 1.1s var(--ease-out-circ) .35s both;
}
@keyframes about-cord { from { transform: scaleX(0); } }
.about__cols { columns: 2; column-gap: 40px; font-size: 16px; line-height: 1.5; }
.about__cols p { break-inside: avoid; }
.about__cols p + p { margin-top: .8em; }
.about__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.about__social { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.about__social a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.about__social a:hover { color: var(--c-red); }
.about__social svg { width: 18px; height: 18px; }
.about__mail { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.about__mail a { color: var(--c-red); font: 800 clamp(22px, 2.4vw, 34px)/1.05 var(--ff-display); font-stretch: 108%; }
.copy-btn {
  padding: 6px 12px; background: var(--c-black); color: var(--c-paper);
  font: 700 12px/1.3 var(--ff-display);
  transition: background-color var(--dur-fast), transform var(--dur) var(--ease-bounce);
}
.copy-btn:hover { transform: scale(1.06); }
.copy-btn.is-done { background: var(--c-green); }

@media (max-width: 1024.98px) {
  .about__cols { columns: 1; }
}
@media (max-width: 767.98px) {
  .about { padding-inline: 0; }
  .about__split { grid-template-columns: 1fr; min-height: 0; }
  .about__media { aspect-ratio: 4 / 3; }
  .about__text { --px: 18px; gap: 18px; padding: 28px var(--px) 64px; }
  .about__logo { width: 56%; }
  .about__cord { width: 72%; margin-left: calc(-1 * var(--px)); }
}

/* ==== Product ============================================================= */
.product { padding-inline: var(--inset); }
.product__crumb { display: flex; gap: 8px; font-size: 13px; max-width: 1180px; margin: 0 auto 18px; }
.product__crumb a { text-decoration: underline; text-underline-offset: 3px; }
.product__crumb a:hover { color: var(--accent); }
.product__crumb span[aria-hidden] { opacity: .4; }
.product__crumb [aria-current] { font-weight: 700; }
.product__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px;
  max-width: 1180px; margin: 0 auto;
}
.gallery__main { position: relative; aspect-ratio: 3 / 4; background: #fff; padding: 10px; box-shadow: 0 10px 40px rgb(0 0 0 / .12); overflow: hidden; }
.gallery__main img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: cover; opacity: 0; transition: opacity .5s ease-in-out; }
.gallery__main img.is-active { opacity: 1; }
.gallery__thumbs { display: flex; gap: 12px; margin-top: 16px; }
.gallery__thumbs button {
  width: 76px; aspect-ratio: 3 / 4; padding: 3px; background: #fff;
  box-shadow: 0 2px 8px rgb(0 0 0 / .12); outline: 2px solid transparent; outline-offset: 2px;
  transition: outline-color var(--dur-fast), transform var(--dur) var(--ease-bounce);
}
.gallery__thumbs button:hover { transform: translateY(-3px); }
.gallery__thumbs button[aria-current="true"] { outline-color: var(--c-navy); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.buy { align-self: start; position: sticky; top: calc(var(--head-total) + 24px); }
.buy__title { font: 800 clamp(34px, 3.6vw, 52px)/1 var(--ff-display); font-stretch: var(--wdth-wide); text-transform: uppercase; }
.buy__variant { font: 700 18px/1.2 var(--ff-display); margin-top: 6px; color: var(--ink-soft); }
.buy__price { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; font: 800 26px/1 var(--ff-display); }
.buy__price s { font-size: 16px; opacity: .45; font-weight: 600; }
.buy__desc { margin-top: 18px; font-size: 15px; line-height: 1.5; max-width: 520px; }
.buy__list { margin-top: 14px; font-size: 14px; display: grid; gap: 6px; }
.buy__list li { padding-left: 20px; position: relative; }
.buy__list li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid var(--c-red); }
.opt { margin-top: 22px; }
fieldset.opt { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
fieldset.opt legend { width: 100%; padding: 0; }
.opt__label { display: flex; justify-content: space-between; font: 700 13px/1 var(--ff-display); text-transform: uppercase; margin-bottom: 10px; }
.opt__label button { text-transform: none; text-decoration: underline; font-weight: 600; }
.colors { display: flex; gap: 10px; flex-wrap: wrap; }
.colors a {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--a) 0 58%, var(--b) 58% 100%);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18); outline: 2px solid transparent; outline-offset: 3px;
  transition: transform var(--dur) var(--ease-bounce), outline-color var(--dur-fast);
}
.colors a:hover { transform: scale(1.12); }
.colors a[aria-current="page"] { outline-color: var(--c-navy); }
.sizes { display: flex; gap: 8px; flex-wrap: wrap; }
.sizes label { position: relative; }
.sizes input { position: absolute; opacity: 0; inset: 0; }
.sizes span {
  display: block; min-width: 64px; padding: 9px 12px; text-align: center;
  border: 1.5px solid var(--c-navy); font: 700 14px/1 var(--ff-display);
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.sizes input:checked + span { background: var(--c-navy); color: var(--c-paper); }
.sizes input:focus-visible + span { outline: 3px solid var(--c-yellow); outline-offset: 2px; }
.buy .qty { margin-top: 0; }
.buy__actions { display: grid; gap: 10px; margin-top: 22px; max-width: 420px; }
.buy__note { margin-top: 12px; max-width: 420px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.buy__soldout { margin-top: 22px; max-width: 420px; font: 700 15px/1.35 var(--ff-display); color: var(--c-red); }

.dialog { border: 0; padding: 0; max-width: min(520px, calc(100vw - 32px)); background: var(--c-paper); color: var(--ink); box-shadow: 0 30px 80px rgb(0 0 0 / .35); }
.dialog::backdrop { background: var(--shade); }
.dialog[open] { animation: dialog-in .45s var(--ease-bounce); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.dialog__inner { padding: 28px; }
.dialog h2 { font: 800 24px/1 var(--ff-display); text-transform: uppercase; margin-bottom: 16px; }
.dialog table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dialog th, .dialog td { text-align: left; padding: 10px 6px; border-bottom: 1px solid var(--line); }
.dialog__close { position: absolute; top: 14px; right: 14px; }
.dialog__close svg { width: 20px; height: 20px; }

@media (max-width: 1024.98px) {
  .product__grid { gap: 32px; }
}
@media (max-width: 767.98px) {
  .product__grid { grid-template-columns: 1fr; }
  .buy { position: static; }
}

/* ==== Legal =============================================================== */
.legal { max-width: 760px; margin: 0 auto; padding-inline: var(--inset); }
.legal h1 { font-size: clamp(40px, 6vw, 80px); line-height: .95; }
.legal section { margin-top: 48px; scroll-margin-top: calc(var(--head-total) + 24px); }
.legal h2 { font: 800 24px/1.1 var(--ff-display); margin-bottom: 12px; }
.legal p { line-height: 1.6; }
.legal .note { padding: 12px 16px; background: var(--c-yellow); font-weight: 600; margin-top: 24px; }

/* ==== Rich text (admin-edited descriptions, about, legal) ================= */
.rich > * + * { margin-top: .75em; }
.rich ul { list-style: disc; padding-left: 1.3em; }
.rich ol { list-style: decimal; padding-left: 1.3em; }
.rich a { text-decoration: underline; text-underline-offset: 2px; }
.rich h3 { font: 800 1.15em/1.2 var(--ff-display); }
.rich h4 { font: 700 1em/1.2 var(--ff-display); }
.filters--categories { margin: 0; }
.filters--categories button { border-color: var(--c-navy); color: var(--c-navy); }
.filters--categories button[aria-pressed="true"] { background: var(--c-navy); color: var(--c-paper); }