/* ==========================================================================
   BONACIEUX: Page-scoped blocks: hero, creed, PDP, shop, cart, checkout
   ========================================================================== */

/* --- Home hero ------------------------------------------------------------
   A split: full-bleed portrait on one side, the season's three words on the
   other. No overlay text on the photograph, so nothing needs a scrim. */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  /* svh, not vh: on mobile browsers vh is the *largest* viewport, so a vh hero
     sits partly under the retracted URL bar until the user scrolls. */
  min-height: calc(100svh - 5.5rem);
}
@supports not (height: 1svh) {
  .hero { min-height: calc(100vh - 5.5rem); }
}
.hero__media {
  position: relative;
  background: var(--paper-2);
  overflow: hidden;
  min-height: 520px;
}
.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: 50% 25%;
}
.hero__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  /* Cap the inset on very wide screens: the split is full-bleed, but copy that
     hugs a 2500px viewport's edge reads as a mistake. */
  padding: var(--space-7) clamp(var(--space-5), 5vw, 6rem);
}
.hero__title { font-size: clamp(3rem, 5.2vw, 5.5rem); line-height: 1.02; letter-spacing: -0.015em; }
.hero__verse { font-style: italic; font-size: var(--step-2); line-height: 1.45; color: var(--ink-soft); max-width: 26ch; }
.hero__sub { font-size: var(--step-1); color: var(--ink-soft); max-width: 42ch; }
.hero__cta { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: var(--space-2); }

/* --- Home hero: the film variant -----------------------------------------
   about.html reuses the split above for its masthead, so the full-bleed
   treatment is a modifier, not a redefinition. Here the film *is* the panel:
   it fills the window under the header, cover-cropped from its native 16:9,
   with the season's three words over it, bottom-left. */
.hero--film {
  grid-template-columns: 1fr;
  position: relative;
  align-content: end;
  min-height: calc(100svh - 5.5rem - 1px);   /* -1px: .site-header border-bottom */
  overflow: hidden;
  background: var(--ink);   /* no white flash before the poster decodes */
  color: var(--paper);
}
@supports not (height: 1svh) {
  .hero--film { min-height: calc(100vh - 5.5rem - 1px); }
}
/* The film carries .hero__media itself rather than sitting inside a panel, so
   this overrides the panel rules above. max-width/height are re-declared
   because base.css caps every video at 100%, which would stop `cover` filling
   a hero taller than 16:9. */
.hero--film .hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: 50% 40%;
}
/* Scrim, two layers: a bottom-weighted vertical gradient carries the copy
   block, and a left-weighted horizontal one holds it when a bright frame
   drifts through the lower-left. The light mid-stops keep the film readable. */
.hero--film::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20,17,15,0.62) 0%, rgba(20,17,15,0.24) 46%, rgba(20,17,15,0) 72%),
    linear-gradient(180deg, rgba(20,17,15,0.40) 0%, rgba(20,17,15,0.10) 34%, rgba(20,17,15,0.82) 100%);
}
/* Only padding-block: the inline gutter comes from .container on the same
   element, so the copy shares the page's alignment and its breakpoints. The
   block is bottom-aligned, so a large top inset would buy nothing but height
   and push the CTAs past the fold; the bottom inset is viewport-relative so
   short laptop windows keep the whole block inside it. */
.hero--film .hero__body {
  position: relative;
  z-index: 1;
  justify-content: flex-end;
  align-items: flex-start;
  padding-block: var(--space-5) clamp(var(--space-5), 9svh, var(--space-7));
  padding-inline: var(--space-5);   /* mirrors .container's gutter */
}
.hero--film .hero__title {
  text-shadow: 0 2px 40px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.4);
}
/* The house gold is tuned for paper and goes muddy on a mid-tone frame; mix it
   toward paper so the eyebrow carries over the footage. */
.hero--film .eyebrow {
  color: color-mix(in srgb, var(--gold) 62%, var(--paper));
  text-shadow: 0 1px 14px rgba(0,0,0,0.6);
}
.hero--film .hero__verse {
  color: var(--paper);
  text-shadow: 0 1px 16px rgba(0,0,0,0.55);
}
.hero--film .hero__sub {
  color: #efe9e0;   /* a step off pure paper, as the sub is secondary */
  text-shadow: 0 1px 14px rgba(0,0,0,0.55);
}
.hero--film .hero__cta { gap: var(--space-4); }

/* Entrance: the hero is above the fold, so it cannot use [data-reveal]'s
   IntersectionObserver - it runs on load instead, staggered down the block.
   base.css's reduced-motion block collapses the duration to ~0 and the `both`
   fill-mode still lands each element at its end state. */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero--film .hero__body > * { animation: hero-rise 0.8s var(--ease) both; }
.hero--film .hero__body > :nth-child(2) { animation-delay: 0.10s; }
.hero--film .hero__body > :nth-child(3) { animation-delay: 0.20s; }
.hero--film .hero__body > :nth-child(4) { animation-delay: 0.30s; }
.hero--film .hero__body > :nth-child(5) { animation-delay: 0.40s; }

/* Scroll cue: a hairline that fills downward on a loop. Decorative only - it
   is aria-hidden and not focusable, so it duplicates no navigation. */
.hero__scroll {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: var(--space-5);
  width: 1px;
  height: 3.25rem;
  background: rgba(245, 241, 235, 0.28);
  overflow: hidden;
}
.hero__scroll::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 45%;
  background: var(--paper);
  animation: hero-scroll-cue 2.4s var(--ease) infinite;
}
@keyframes hero-scroll-cue {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(222%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll { display: none; }
}

/* --- Creed strip ---------------------------------------------------------- */
.creed {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-4) var(--space-5);
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 300;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  /* base.css caps every <p> at 64ch; this one is a full-bleed rule. */
  max-width: none;
}
.creed span[aria-hidden] { color: var(--gold); letter-spacing: 0; }

/* --- Section heading ------------------------------------------------------ */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.section-head--center { flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); }
.section-head--center .eyebrow { order: -1; }

/* --- House statement ------------------------------------------------------ */
.statement {
  background: var(--paper-2);
  padding-block: var(--space-7);
}
.statement__inner {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.statement__script { font-family: var(--font-script); font-size: clamp(2.6rem, 5vw, 3.5rem); line-height: 1; }
.statement__body { font-size: var(--step-2); font-weight: 300; line-height: 1.55; max-width: none; }

/* --- Editorial split feature ---------------------------------------------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; }
.feature--reverse .feature__media { order: 2; }
.feature__media { position: relative; overflow: hidden; background: var(--paper-2); min-height: 600px; }
.feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature__body {
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-6);
}
.feature__body h2 { font-size: clamp(2.2rem, 3.6vw, 3.6rem); line-height: 1.08; }
.feature__body p { font-size: var(--step-1); color: var(--ink-soft); max-width: 44ch; }
.feature__body .link-rule { align-self: flex-start; margin-top: var(--space-2); }

/* --- Lookbook ------------------------------------------------------------- */
.lookbook__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.lookbook__item { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.lookbook__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.lookbook__item:hover img { transform: scale(1.04); }

/* --- Creed trio (three virtues) ------------------------------------------- */
.virtues { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.virtue { display: flex; flex-direction: column; gap: var(--space-2); }
.virtue h3 {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.virtue p { font-size: var(--step-1); color: var(--ink-soft); }

/* --- Collection cards (home) ---------------------------------------------- */
.collection-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.collection-card {
  position: relative;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--paper-2);
  color: var(--paper);
}
.collection-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
  transition: transform 0.9s var(--ease);
}
.collection-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(20, 17, 15, 0.78));
}
.collection-card:hover img { transform: scale(1.05); }
.collection-card__body { position: relative; z-index: 1; padding: var(--space-4); display: flex; flex-direction: column; gap: 4px; }
.collection-card__body h3 { color: var(--paper); font-size: var(--step-2); }
.collection-card__body .eyebrow { color: var(--gold); }
.collection-card:hover { color: var(--paper); }

/* --- Ink panel (closing statement) ---------------------------------------- */
.ink-panel { background: var(--ink); color: var(--paper); text-align: center; padding-block: var(--space-7); }
.ink-panel__script { font-family: var(--font-script); font-size: clamp(2.8rem, 6vw, 4rem); line-height: 1; }
.ink-panel p { margin: var(--space-4) auto 0; max-width: 44ch; font-size: var(--step-1); color: rgba(245, 241, 235, 0.72); }

/* --- Page head ------------------------------------------------------------ */
.page-head { padding-block: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.page-head--center { align-items: center; text-align: center; }
/* .section--tight already sets the top rhythm; a page-head that stacks another
   full step on top of it just pushes the content down. */
.page-head--flush { padding-top: 0; }
.page-head h1 { font-size: clamp(2.4rem, 4.6vw, 4.5rem); }
.page-head .eyebrow { order: -1; }

/* --- Shop layout ---------------------------------------------------------- */
.shop-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-6); align-items: start; }
.filters { position: sticky; top: 7rem; }
.filters__group { padding-block: var(--space-3); border-bottom: 1px solid var(--line); }
.filters__group h2 {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--space-2);
}
.filters__opt { display: flex; align-items: center; gap: 0.65rem; padding: 0.35rem 0; cursor: pointer; }
.filters__opt input { accent-color: var(--gold-deep); }
.shop-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3); margin-bottom: var(--space-4);
}
.shop-toolbar .count {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.shop-search { flex: 0 1 20rem; margin: 0; }
.sort-field { margin: 0; flex-direction: row; align-items: center; gap: 0.7rem; }
.sort-field .select { width: auto; }

/* Active-filter chips */
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.filter-chips:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.6rem 0.4rem 0.85rem;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.chip button { display: grid; place-items: center; width: 16px; height: 16px; color: var(--text-muted); }
.chip button:hover { color: var(--ink); }
.chip--clear { border-style: dashed; color: var(--text-muted); padding: 0.4rem 0.85rem; }
.chip--clear:hover { color: var(--ink); border-color: var(--ink); }

/* Mobile "Filters" trigger: hidden on desktop */
.filters-trigger { display: none; }

/* --- Collection hero ------------------------------------------------------ */
.collection-hero { text-align: center; padding-block: var(--space-6); background: var(--paper-2); }

/* --- Product detail (PDP) ------------------------------------------------- */
.pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-6); align-items: start; }
.pdp__gallery { display: grid; grid-template-columns: 76px 1fr; gap: var(--space-3); }
.pdp__thumbs { display: flex; flex-direction: column; gap: var(--space-2); }
.pdp__thumb { aspect-ratio: 4/5; overflow: hidden; border: 1px solid transparent; background: var(--paper-2); }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.pdp__thumb[aria-pressed="true"] { border-color: var(--ink); }
.pdp__main { aspect-ratio: 4/5; overflow: hidden; background: var(--paper-2); }
.pdp__main img { width: 100%; height: 100%; object-fit: cover; }
.pdp__info { position: sticky; top: 7.5rem; display: flex; flex-direction: column; gap: var(--space-4); }
.pdp__info h1 { font-size: clamp(2.2rem, 3.4vw, 3.25rem); }
.pdp__sub { font-style: italic; font-size: var(--step-2); color: var(--text-muted); }
.pdp__price { font-family: var(--font-ui); font-size: var(--step-1); font-weight: 300; letter-spacing: 0.08em; }
.pdp__desc { font-size: var(--step-1); color: var(--ink-soft); }
.pdp__rule { height: 1px; background: rgba(20, 17, 15, 0.14); }
.pdp__row { display: flex; flex-direction: column; gap: var(--space-2); }
.pdp__row-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
/* Both are inline-flex, but as children of a column flex row they would
   stretch to the full column and read as an empty rule. */
.pdp__row .swatch-btn,
.pdp__row .qty { align-self: flex-start; }
.pdp__row-head h2 {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pdp__actions { display: flex; gap: var(--space-2); align-items: stretch; }
.pdp__actions .btn { flex: 1 1 auto; }
.pdp__actions .card__wish { position: static; width: 56px; height: auto; border: 1px solid var(--line); border-radius: 0; background: transparent; }
.pdp__assurances {
  display: flex; flex-direction: column; gap: 8px;
  font-size: var(--step-0); color: var(--text-muted); line-height: 1.6;
}

/* --- Cart ----------------------------------------------------------------- */
.cart-layout { display: grid; grid-template-columns: 1.4fr 0.8fr; gap: var(--space-6); align-items: start; }
.cart-line {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
  align-items: start;
}
.cart-line__media { aspect-ratio: 4/5; background: var(--paper-2); overflow: hidden; }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.cart-line__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cart-line__title { font-family: var(--font-display); font-size: var(--step-1); line-height: var(--leading-snug); }
.cart-line__meta {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cart-line__aside {
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-end; text-align: right; gap: var(--space-3);
  font-family: var(--font-ui); font-size: var(--step--1); letter-spacing: 0.08em;
}
.cart-line__save { text-align: left; }
.cart-line__save,
.cart-line__remove {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cart-line__save:hover { color: var(--gold-deep); }
.cart-line__remove:hover { color: var(--danger); }

.summary { background: var(--paper-2); padding: var(--space-5); position: sticky; top: 7.5rem; display: flex; flex-direction: column; gap: var(--space-3); }
.summary__label {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.summary__row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--step-1); }
.summary__row--muted { color: var(--text-muted); }
.summary__rule { height: 1px; background: rgba(20, 17, 15, 0.16); }
.summary__row--total { font-size: var(--step-2); }
.summary__note { font-style: italic; font-size: var(--step-0); color: var(--text-muted); text-align: center; }
.empty-state { text-align: center; padding-block: var(--space-7); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.empty-state p { font-style: italic; font-size: var(--step-1); color: var(--text-muted); }

/* --- Checkout ------------------------------------------------------------- */
.checkout-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-6); align-items: start; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
.form-grid .field--full { grid-column: 1 / -1; }
.form-legend {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--space-3);
}
/* Column-flex so the confirmation stacks on one gap: the block used to be
   spaced by a margin on every child. */
.confirm {
  text-align: center;
  padding-block: var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.confirm__mark { font-family: var(--font-script); font-size: 4rem; line-height: 1; color: var(--gold); }

/* --- Contact -------------------------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
.contact-details { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: var(--step-1); color: var(--ink-soft); }

/* --- Content pages -------------------------------------------------------- */
.prose { max-width: 68ch; font-size: var(--step-1); line-height: 1.75; color: var(--ink-soft); }
.prose h2 { margin-top: var(--space-5); margin-bottom: var(--space-3); color: var(--ink); }
.prose h3 { margin-top: var(--space-4); margin-bottom: var(--space-2); color: var(--ink); }
.prose p, .prose ul { margin-bottom: var(--space-3); }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.4rem; }

/* A five-column measurement table cannot compress below ~330px, so it scrolls
   inside its own box rather than pushing the page sideways. */
.table-scroll { overflow-x: auto; margin-block: var(--space-4); -webkit-overflow-scrolling: touch; }
.size-table { width: 100%; min-width: 32rem; border-collapse: collapse; }
.size-table th, .size-table td {
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  text-align: left;
  font-size: var(--step-0);
}
.size-table thead th {
  background: var(--paper-2);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.size-table tbody th { font-family: var(--font-ui); font-weight: 400; letter-spacing: 0.1em; }

/* --- Related rail --------------------------------------------------------- */
.rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }

/* --- Mobile sticky bars (PDP + bag) --------------------------------------- */
.pdp-sticky,
.cart-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-header);
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
  background: rgba(245, 241, 235, 0.96);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.pdp-sticky .btn,
.cart-sticky .btn { min-height: 48px; margin-left: auto; }
.pdp-sticky__price,
.cart-sticky__total { font-family: var(--font-ui); font-size: var(--step-0); letter-spacing: 0.08em; }
/* product.js toggles .is-shown once the inline add button leaves the viewport. */
.pdp-sticky:not(.is-shown) { transform: translateY(100%); opacity: 0; pointer-events: none; }
.pdp-sticky { transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; }
  .hero__media { min-height: 60svh; }
  .hero__body { padding: var(--space-6) var(--space-5); }
  .hero--film .hero__media { min-height: 0; }
  .hero--film .hero__body { padding-block: var(--space-5) var(--space-6); }
  .feature { grid-template-columns: 1fr; }
  .feature--reverse .feature__media { order: 0; }
  .feature__media { min-height: 0; aspect-ratio: 4 / 3; }
  .feature__body { padding: var(--space-6) var(--space-5); }
}

@media (max-width: 980px) {
  .pdp, .cart-layout, .checkout-layout, .contact-layout { grid-template-columns: 1fr; }
  .pdp__info, .summary, .filters { position: static; }
  .shop-layout { grid-template-columns: 1fr; }
  .rail { grid-template-columns: repeat(3, 1fr); }
  .lookbook__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .virtues { grid-template-columns: 1fr; gap: var(--space-4); }
  .collection-cards { grid-template-columns: 1fr; }
  /* Three stacked 3:4 cards is ~1300px of scroll; a square crop keeps the set
     skimmable, biased upward so the collar and mark survive the crop. */
  .collection-card { aspect-ratio: 1 / 1; }
}

@media (max-width: 760px) {
  .rail { grid-template-columns: repeat(2, 1fr); }
  .pdp__gallery { grid-template-columns: 1fr; }
  .pdp__thumbs { flex-direction: row; order: 2; overflow-x: auto; scrollbar-width: none; }
  .pdp__thumbs::-webkit-scrollbar { display: none; }
  .pdp__thumb { flex: 0 0 68px; }
  /* Leave room for the sticky bar so the footer clears it. product.js and
     cart.js append theirs to <body>, so :has() scopes this without a new flag. */
  body:has(.pdp-sticky, .cart-sticky) { padding-bottom: 5.5rem; }
  .pdp-sticky, .cart-sticky { display: flex; }

  /* Text-only buttons on a bag line still need a thumb-sized target. */
  .cart-line__save,
  .cart-line__remove { min-height: 44px; display: inline-flex; align-items: center; }
  .form-grid { grid-template-columns: 1fr; }
  .cart-layout { gap: var(--space-5); }

  /* The toolbar is a single no-wrap flex row; on mobile its min-content width
     forces the whole shop grid wider than the viewport. Search takes its own
     row, Filters and Sort share the next, and the count drops beneath them. */
  .shop-toolbar { flex-wrap: wrap; row-gap: var(--space-2); align-items: stretch; }
  .shop-search { order: -1; flex: 1 0 100%; }
  .shop-toolbar .count { order: 3; flex: 1 0 100%; }
  .filters-trigger { flex: 0 0 auto; }
  .sort-field { flex: 1 1 auto; justify-content: flex-end; }
  .sort-field .select { flex: 0 1 auto; min-width: 0; }
  .shop-layout > * { min-width: 0; }

  /* Filter rail collapses into a left slide-in drawer; show the trigger. */
  .filters-trigger {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.85em 1.4em;
    font-family: var(--font-ui);
    font-size: var(--step--1); font-weight: 300;
    letter-spacing: var(--tracking-wide); text-transform: uppercase;
    border: 1px solid var(--ink);
  }
  .shop-aside {
    position: fixed;
    top: 0; left: 0;
    width: min(86vw, 360px); height: 100dvh;
    z-index: var(--z-drawer);
    background: var(--paper);
    border-right: 1px solid var(--line);
    padding: var(--space-4);
    overflow-y: auto;
    transform: translateX(-100%);
    /* visibility, not just transform: the closed rail must leave the tab order
       and the a11y tree. It carries no aria-hidden precisely because this same
       element is the visible sidebar above 760px. */
    visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility var(--dur);
  }
  .shop-aside.is-open { transform: translateX(0); visibility: visible; }

  .statement__body { font-size: var(--step-1); }
  .hero__body { gap: var(--space-3); }
  .hero__verse { font-size: var(--step-1); }
  /* The button goes full-width, so the secondary link takes its own row;
     tighten the block so that row still clears the fold. */
  .hero--film .hero__body { padding-block: var(--space-5); padding-inline: var(--space-4); }
  .hero--film .hero__cta { width: 100%; gap: var(--space-3); margin-top: var(--space-1); }
  .hero--film .hero__cta .btn { flex: 1 1 100%; }   /* min-height:48px from components.css */
  .hero--film .hero__cta .link-rule { margin-inline: auto; }
  .hero__scroll { display: none; }   /* the fold is obvious on a phone */
  .creed { gap: var(--space-4); letter-spacing: 0.24em; }
}

@media (max-width: 560px) {
  /* .site-header__inner drops to 4.25rem here (layout.css), so the film hero
     must subtract that instead of 5.5rem or it overshoots the fold. */
  .hero--film { min-height: calc(100svh - 4.25rem - 1px); }
  .hero--film .hero__body { padding-inline: var(--space-3); }
  .cart-line { grid-template-columns: 80px 1fr; gap: var(--space-3); }
  /* 110px thumb + stepper + price column exceeds a narrow viewport, so the
     price/remove pair drops beneath the details instead. */
  /* Scoped to .cart-line: the mini-bag reuses .mini-cart__aside precisely so
     it cannot inherit a grid-column that its own three-track line lacks. */
  .cart-line .cart-line__aside { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
  .rail { grid-template-columns: repeat(2, 1fr); }
}

/* The in-aside header and footer only appear in the mobile filter drawer */
.shop-aside__head,
.shop-aside__foot { display: none; }
@media (max-width: 760px) {
  .shop-aside__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
  /* The grid re-renders behind an opaque full-height panel, so the drawer has
     to report the result count itself. */
  .shop-aside__foot {
    display: block;
    position: sticky; bottom: 0;
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    background: var(--paper);
  }
}

/* --- Film hero on short viewports -----------------------------------------
   The copy is bottom-aligned, so on a short window (1366x768 laptops, phones
   in landscape) anything that does not fit pushes the CTAs below the fold.
   Height-based, not width-based: a wide laptop and a short phone hit the same
   problem. Placed last so it wins over the width tiers above. */
@media (max-height: 800px) {
  .hero--film .hero__body {
    gap: var(--space-3);
    padding-block: var(--space-4) var(--space-5);
  }
  .hero--film .hero__title { font-size: clamp(2.5rem, 4.4vw, 4rem); }
  .hero--film .hero__verse { font-size: var(--step-1); }
}
@media (max-height: 620px) {
  .hero--film .hero__body {
    gap: var(--space-2);
    padding-block: var(--space-3) var(--space-4);
  }
  .hero--film .hero__title { font-size: clamp(2rem, 7vw, 2.75rem); }
  .hero--film .hero__cta { margin-top: 0; }
}