/* Direction F+ — "Monogram x Capsule".
   Loaded on all 52 routes, after main.css. It re-skins the shared shell
   (announce, header, mega, sheet, search, cart, newsletter, footer, product
   cards) in a light monochrome theme and lays out the mix the client chose: the
   Monogram hero and black category band, the Capsule product rails, the product
   parade, the category line, the pole-native band, the service band, the
   community band.
   No new colour: white, off-white, black and neutral greys. The store accent
   is neutralised here. The shared sheet is never edited. */

:root {
  --black: #ffffff;      /* page background, light theme */
  --s-1: #f5f5f3;        /* off-white band */
  --s-2: #ececea;
  --s-3: #e3e3e0;
  --s-4: #d8d8d4;
  --warm: #000000;       /* announce bar */

  --text: #111111;
  --text-2: #4a4a4a;
  --text-3: #6f6f6f;

  /* The store accent stays out of direction F. --accent is also the focus
     ring, so it has to read on white and on black. Measured: #6f6f6f is 5.0:1 on
     white, 4.6:1 on the #f5f5f3 band and 4.18:1 on black. That clears the 3:1
     non-text ring everywhere, but it is not enough for 12px text on the black
     bands (see .community-band --text-3 and .catband --text-3). */
  --accent: #6f6f6f;
  --button: #000000;     /* full black fill, declared in DIRECTION.md */
  --button-text: #ffffff;

  --hair: rgba(17, 17, 17, 0.35);
  --hair-soft: rgba(17, 17, 17, 0.12);

  /* One rail card. Overridden per breakpoint so four whole cards fill the
     container at 1440. */
  --mx-card: min(74vw, 300px);
  --mx-serif: Georgia, "Times New Roman", serif;
}

/* ---------- shared shell, re-skinned ---------- */

/* The ticker: one compact line at every width, the text travelling left. The owner
   read the wrapped sentence as broken ("non dovrebbe essere un testo così, ma un
   testo a scorrimento"). A transform on the track is composited, so the bar costs
   nothing to paint, and reduced motion stops it on the first set. */
.announce {
  background: var(--warm);
  color: #ffffff;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 0;
  overflow: hidden;
}
.announce__track { display: flex; width: max-content; animation: announce-ticker 26s linear infinite; }
.announce__set { display: flex; align-items: center; gap: 16px; padding-inline-end: 48px; white-space: nowrap; }
/* One set of six travels per loop, so the seam never reaches the window. */
@keyframes announce-ticker { from { transform: translateX(0); } to { transform: translateX(-16.6667%); } }
@media (prefers-reduced-motion: reduce) { .announce__track { animation: none; } }
.announce b { color: #ffffff; font-weight: 600; }
/* One middot between the three strings, inside its own flex item so it can never
   land alone on a line. Decoration, hidden from assistive tech. The bar is shell,
   so this is the same on all 52 routes. */
.announce__sep { color: rgba(255, 255, 255, 0.55); }

.site-head {
  padding-bottom: 0;
  background: #ffffff;
  border-bottom: 1px solid var(--hair-soft);
}
.nav {
  width: auto;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Menu left, wordmark centred, utilities right, at the wrap edge. The wordmark
   is centred absolutely: at 390px four utility icons leave no room for a
   centred logo to clear them, so it drops to the left edge under 720px. */
.nav__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter)));
}
.nav__bar > nav { min-width: 0; }
.nav__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 148px;
  padding: 0;
}
.nav__logo img { filter: none; }
.nav__tools { margin-left: auto; }
.nav__link { color: var(--text); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.nav__link:hover { background: var(--s-2); color: var(--text); }
.nav__link[aria-current="page"],
.nav__link[aria-expanded="true"] { background: var(--s-2); color: var(--text); }
.nav__cart-count { background: #000000; color: #ffffff; }
.icon-btn:hover { background: var(--s-2); }

/* The mega is attached to the header. Chosen in live mode on 18/9 after the owner
   reported a white space between the header and the menu: the panel sat at
   top: calc(100% + 8px), so an 8px slit of page showed between the header and the
   panel's own edge. It is flush now, flat (no shadow, no side borders: the top
   hairline is the seam), the content lines up with the container the way the nav
   bar does, and the category names carry the eye while the counts caption them.

   The rules of the house are unchanged: white panel, hairline instead of a box
   edge, 0 radius, Manrope only, counts at 12px/600 uppercase in Ash, names at
   18px/800 in Graphite. */
.mega {
  top: 100%;
  left: 0;
  width: 100%;
  transform: none;
  padding: 26px max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter))) 32px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(220px, 300px);
  gap: 0 40px;
  align-items: start;
  background: #ffffff;
  border: 0;
  border-top: 1px solid var(--hair-soft);
  border-radius: 0;
  box-shadow: none;
}
.mega[data-open="true"] { transform: none; }
.mega > div:not(.mega__media) { padding-left: 24px; border-left: 1px solid var(--hair-soft); }
.mega > div:first-child { padding-left: 0; border-left: 0; }
.mega .label { margin: 0 0 14px; color: var(--text-3); }
.mega ul { gap: 10px; }
.mega li a { display: grid; gap: 2px; padding: 0; border-radius: 0; color: var(--text); }
.mega__count { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.mega__name { font-size: 18px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
.mega li a:hover { background: transparent; }
.mega li a:hover .mega__name { text-decoration: underline; text-underline-offset: 4px; }
.mega__media img { aspect-ratio: 4 / 3; border-radius: 0; }
.mega__media img { filter: grayscale(1); }

.sheet { background: rgba(255, 255, 255, 0.97); }
.sheet__top img { filter: none; }
.sheet nav a { color: var(--text); text-transform: uppercase; letter-spacing: -0.01em; }
.sheet nav a:hover { color: var(--text-3); }

.search { background: rgba(255, 255, 255, 0.97); }
.search input { background: #ffffff; color: var(--text); }
.search__results a:hover { background: var(--s-1); }
.search__results img { background: var(--s-2); }
.search__empty { background: var(--s-1); }

.cart { background: #ffffff; }

.btn { border-radius: 0; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; padding: 12px 20px; }
.btn:hover { background: #333333; color: #ffffff; }
.btn--ghost { color: var(--text); }
.btn--ghost:hover { background: var(--s-2); color: var(--text); }

/* ---------- Monogram bands ---------- */
section { scroll-margin-top: 84px; }

h1.hero__word,
.h2,
.mx-rail__title {
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h2 { font-size: clamp(28px, 4.4vw, 52px); line-height: 1; }

/* 1. Hero — the video full-bleed, the word over it */
.hero { padding: 0; }
.hero__frame {
  position: relative;
  /* The script measures the live announcement + header stack. The fallback
     keeps the first paint close while the measured value is being set. */
  height: var(--esempio-hero-height, calc(100svh - 122px));
  min-height: 0;
  overflow: hidden;
  background: #000000;
  isolation: isolate;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The clip is 720x1280 vertical and is a montage of seven scenes. The band
     that carries the subject in all seven is 40-80% from the top, so the window
     is centred on the subject at 60%. The offset is set on the screenshot, not
     by widening the video. */
  object-position: 50% 60%;
}
/* Dense exactly where the text sits: the top label, the word band and the
   bottom row. Measured against the average pixel under each text block. */
.hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.18) 22%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.78) 100%
  );
}
.hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  padding-top: 28px;
  padding-bottom: 28px;
}
.hero__stage { display: grid; gap: 20px; justify-items: center; text-align: center; }
h1.hero__word {
  margin: 0;
  font-size: min(19vw, 264px);
  line-height: 0.82;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #ffffff;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  white-space: nowrap;
}
.hero__tagline { font-size: 14px; line-height: 20px; letter-spacing: 0.02em; color: #ffffff; }
.hero__proposition { max-width: 46ch; font-size: 16px; line-height: 24px; color: #ffffff; text-wrap: pretty; }
.hero__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
/* A black button would sink into the veil, so the hero button is white. */
.hero .btn {
  background: #ffffff;
  color: #111111;
  border-color: #ffffff;
}
.hero .btn:hover { background: transparent; color: #ffffff; }
.hero__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 44px touch target without pushing the underline away from the words. */
  min-height: 44px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  text-underline-offset: 4px;
}
.hero__more:hover { text-decoration-color: #ffffff; }
.hero__more svg,
.parade__all svg { width: 14px; height: 14px; transform: rotate(-90deg); }
/* The owner removed the pause control and the Luxe note from the hero, so the
   foot holds the two actions and nothing else: no reservation for a control, no
   note to keep clear of one. */

/* 3. Categories — black band. A static grid, all seven categories visible at
   once: no rail, no arrows, nothing to scroll. Four columns from 1024px up (so
   4 + 3 on two rows), three from 768 to 1023, two below. */
.catband {
  background: #000000;
  color: #ffffff;
  --text: #ffffff;
  --text-2: #cfcfcf;
  --text-3: #9a9a9a;
  --hair: rgba(255, 255, 255, 0.3);
  --hair-soft: rgba(255, 255, 255, 0.14);
  padding: clamp(72px, 8vw, 124px) 0;
}
.catband__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.catband__head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
}
.catband__title { color: #9a9a9a; display: block; }
/* The same column rhythm as the parade grid: 20px between tiles, 32px between
   the two rows. */
.catband__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
/* On a phone the band is a rail with two and a half tiles in view: the owner asked
   for it, and seven stacked tiles no longer cost a screen and a half. */
@media (max-width: 1023px) {
  .catband__grid { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 8px; scrollbar-width: none; }
  .catband__grid::-webkit-scrollbar { display: none; }
  .catband__grid .catcol { flex: 0 0 36vw; }
}
.catcol { display: grid; gap: 16px; align-content: start; }
.catcol__media { display: block; overflow: hidden; }
.catcol__thumb {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  outline: 1px solid rgba(255, 255, 255, 0.12);
  transition: scale 150ms cubic-bezier(0.2, 0, 0, 1);
}
@media (hover: hover) { .catcol__media:hover .catcol__thumb { scale: 1.02; } }
.catcol__body { display: grid; gap: 8px; align-content: start; }
.catcol__name { font-size: clamp(24px, 2.8vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }
.catcol__name a { text-decoration: none; color: var(--text); }
.catcol__name a:hover { text-decoration: underline; }
.catcol__count { font-size: 12px; line-height: 16px; letter-spacing: 0.1em; text-transform: uppercase; color: #9a9a9a; }

/* 4 and 5. Product rails */
.mx-rail { padding: 64px 0; background: #ffffff; }
.mx-rail--split { background: var(--s-1); }
.mx-rail--center { background: #ffffff; border-top: 1px solid var(--hair-soft); }
.mx-rail__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  /* Containing block and clip so the abspos sr-only size-chart legend inside a
     card can never add a horizontal scrollbar to the document. */
  position: relative;
  overflow-x: clip;
}
.mx-rail__head { margin-bottom: 32px; }
.mx-rail--split .mx-rail__head { max-width: 52ch; }
.mx-rail--center .mx-rail__head { max-width: 640px; margin: 0 auto 32px; text-align: center; }
.mx-rail__title { font-size: clamp(30px, 4.4vw, 56px); line-height: 1; }
.mx-rail__lead { margin-top: 16px; font-size: 16px; line-height: 24px; color: var(--text-2); }
.mx-rail--split .mx-rail__lead { max-width: 46ch; }
.mx-rail--center .mx-rail__lead { max-width: 52ch; margin-left: auto; margin-right: auto; }
/* The arrows sit in a margin reserved out of the track's own width, one on each
   side, so no button rectangle can ever meet a card rectangle from 768 to 1920.
   The padding lives on the viewport, not on the scroller: content would scroll
   under padding on a scroll container. Container queries: the arrow's vertical
   place is derived from the card's width, which is a share of this box. */
.mx-rail__viewport { position: relative; }
/* The arrow belongs to the photograph, not to the card. Centred on the track it
   sat below the photo's centre by half the text block under it: 97px on the Luxe
   rail, 70px on New-in, measured at 1024, 1280, 1440 and 1920. The row now starts
   at the track's top, and each arrow is pushed down by half the media box, taken
   from the card's own width so it holds at every breakpoint instead of being a
   constant that only fits the rail it was measured on. */
.mx-rail__controls {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}
.mx-rail__controls[hidden] { display: none; }
.mx-rail__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 4px 0 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--hair) var(--hair-soft);
}
.mx-rail__track::-webkit-scrollbar { height: 8px; }
.mx-rail__track::-webkit-scrollbar-track { background: rgba(17, 17, 17, 0.06); border-radius: var(--r-full); }
.mx-rail__track::-webkit-scrollbar-thumb { background: var(--hair); border-radius: var(--r-full); }
.mx-rail__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.mx-rail__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-top: 24px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mx-rail__foot a { color: var(--text-3); text-underline-offset: 3px; }
/* Scoped off `.btn`: this rule (0,2,1) used to beat `.btn:hover` (0,2,0) for
   the colour and left #111111 on the .btn:hover background #333333 = 1.49:1. */
.mx-rail__foot a:not(.btn):hover { color: var(--text); }
.mx-rail__btn {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  /* The arrow's vertical place is set by monogram.js, which reads the first card's
     media box. The half of the text block under the photo is what put the arrow
     below the photo's centre: 97px on the Luxe rail and 141px on New-in, so a single
     stylesheet constant fits one rail and misses the other. */
  transition: color 500ms var(--ease), opacity 500ms var(--ease), transform 500ms var(--ease);
}
.mx-rail__btn svg { width: 22px; height: 22px; }
.mx-rail__btn--prev svg { transform: rotate(90deg); }
.mx-rail__btn--next svg { transform: rotate(-90deg); }
.mx-rail__btn { pointer-events: auto; }
.mx-rail__btn:hover { color: var(--text); }
.mx-rail__btn--next:hover { transform: translateX(4px); }
.mx-rail__btn--prev:hover { transform: translateX(-4px); }
.mx-rail__btn:active { transform: scale(0.96); }
.mx-rail__btn[disabled] { opacity: 0.2; pointer-events: none; }

/* The shared product card, flattened for the light rails and the parade. */
.mx-rail .card,
.parade .card {
  min-width: 0;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  align-content: start;
}
.mx-rail .card { flex: 0 0 var(--mx-card); scroll-snap-align: start; }
.mx-rail .card__media,
.parade .card__media { border-radius: 0; background: var(--s-2); }
.mx-rail .card__body,
.parade .card__body { padding: 0; gap: 8px; }
.mx-rail .card__head,
.parade .card__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
}
.mx-rail .card__head h3,
.parade .card__head h3 { font-size: 15px; line-height: 22px; font-weight: 600; }
.mx-rail .card__head .price,
.parade .card__head .price { font-size: 14px; }
.mx-rail .card__meta,
.parade .card__meta { color: var(--text-3); }
/* main.css paints the badge dark on dark: on a plain collection card the
   detector measured #111111 over a composited #424242, i.e. 1.9:1. The light
   chip used to be patched for the rails only; it is the rule everywhere now. */
.card__badge,
.mx-rail .card__badge,
.parade .card__badge { background: #ffffff; color: var(--text); border: 1px solid var(--hair-soft); }
.mx-rail .btn--ghost,
.parade .btn--ghost { color: var(--text); border-color: var(--hair); }
.mx-rail .btn--ghost:hover,
.parade .btn--ghost:hover { background: var(--text); border-color: var(--text); color: #ffffff; }
/* #4a4a4a (--text-2) on white is 8.86:1, so the light ground keeps the card
   feedback readable. */
.mx-rail .card__note,
.parade .card__note { color: var(--text-2); }
/* Under the add-to-cart button on every card, on every route: the shipping
   threshold and the return window, each linked to its policy page. */
/* The two assurances as objects, not as a running sentence: chosen in live mode on
   18/9 after the owner said he did not like the old line. Each fact is a hairline pill
   with the size chip's radius; the facts and the two policy links are unchanged. */
.card__assure { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 12px; }
.card__assure a {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  text-decoration: none;
}
.card__assure a:hover { border-color: var(--hair); color: var(--text); }
/* On a phone the pair filled two rows of a 165px card and took 102px of it. */
@media (max-width: 767px) {
  .card__assure { gap: 4px 6px; margin-top: 10px; }
  .card__assure a { font-size: 10px; line-height: 1.2; padding: 4px 8px; letter-spacing: 0.05em; }
}

/* 5. The parade */
.parade { padding: 72px 0; background: #ffffff; border-top: 1px solid var(--hair-soft); }
.parade__inner { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.parade__head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
}
.parade__head > div { max-width: 64ch; }
.parade__head .h2 { margin-top: 8px; }
.parade__lead { margin-top: 12px; font-size: 16px; line-height: 24px; color: var(--text-2); }
.parade__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--hair);
  padding-bottom: 2px;
}
.parade__all:hover { border-bottom-color: var(--text); }
.parade__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
/* The parade above the reviews was two and a half screens of stacked cards on a
   phone. Same pieces, smaller, side by side: a rail that shows it scrolls. */
@media (max-width: 1023px) {
  .parade__grid { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 8px; scrollbar-width: none; }
  .parade__grid::-webkit-scrollbar { display: none; }
  .parade__grid .card { flex: 0 0 38vw; }
}

/* 6. Trust — the demonstration reviews (PLACEHOLDER_REVIEWS in
   tools/gen/home.mjs) and the two store facts the home did not carry. White
   ground between the parade and the black pole band. The reviews are quotes in
   a row, separated by hairlines, not a grid of icon cards; the rating is the
   store's own star SVG in two layers, base and fill clipped to the score. */
.trustband {
  /* Column gutter of the three reviews. Measured against the band's own 48px
     section rhythm: at the old 32px the three hairline-topped quotes read as
     one broken rule. --tb-gap is read by the facts row below, which lines its
     value up with the second review column. */
  --tb-gap: 28px;
  padding: 72px 0;
  background: #ffffff;
  border-top: 1px solid var(--hair-soft);
}
.trustband__inner { display: grid; gap: 48px; }
/* The band opens with proof-shaped content and only declares itself as a
   demonstration 507px later. The marking now rides the heading row. */
.trustband__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.trustband__mark { margin: 0; font-size: 13px; line-height: 20px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.trustband__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-2);
}
.trustband__score b { color: var(--text); font-weight: 700; }
.stars { position: relative; display: inline-block; width: max-content; line-height: 0; }
.stars__base,
.stars__fill { display: inline-flex; gap: 2px; }
.stars__base { color: var(--s-4); }
.stars__fill {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: var(--pct, 100%);
  overflow: hidden;
  color: var(--text);
}
.stars svg { width: 16px; height: 16px; }
.trustband__grid {
  display: grid;
  gap: 28px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}.trustband__card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding-top: 20px;
  border-top: 1px solid var(--hair-soft);
}
.trustband__quote { font-size: 16px; line-height: 24px; color: var(--text-2); }
.trustband__who {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.trustband__note { max-width: 60ch; margin-top: 28px; font-size: 12px; line-height: 18px; color: var(--text-2); }
.trustband__list { margin: 0; }
.trustband__row { display: grid; gap: 8px; padding: 16px 0; border-top: 1px solid var(--hair-soft); }
.trustband__row dt {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.trustband__row dd { margin: 0; font-size: 16px; line-height: 24px; color: var(--text); }
.trustband__row a { color: inherit; }
.trustband__row a:hover { text-decoration: underline; }

/* 8. Pole-native: the brand, the size question and the store's risk notice.
   The second black band, between the white trust band and the black community
   band, so the page still alternates ground around it. */
.pole-band {
  padding: 72px 0;
  background: #000000;
  color: #ffffff;
  --text: #ffffff;
  --text-2: #cfcfcf;
  --text-3: #9a9a9a;
  --hair: rgba(255, 255, 255, 0.3);
}
.pole-band__head { max-width: 52ch; margin-bottom: 32px; }
.pole-band__head .h2 { margin-top: 8px; }
.pole-band__grid { display: grid; gap: 32px; }
.pole-point h3 { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.pole-point p { margin-top: 12px; font-size: 16px; line-height: 24px; color: var(--text-2); }
.pole-point__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--hair);
}
.pole-point__link:hover { border-bottom-color: #ffffff; }
.pole-point__link svg { width: 14px; height: 14px; transform: rotate(-90deg); }

/* 8. Services */
.services { padding: 48px 0; background: #ffffff; border-top: 1px solid var(--hair-soft); }
.services__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 32px;
}
.service { display: grid; gap: 12px; align-content: start; }
.service svg { width: 28px; height: 28px; }
.service h3 { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.service p { font-size: 14px; line-height: 20px; color: var(--text-2); }

/* 9. Community — dark ground, the only serif in the direction. --text-3 rises
   to #9a9a9a here (7.46:1 on black) because .label uses it at 12px, where
   #6f6f6f is only 4.18:1. */
.community-band {
  padding: 72px 0;
  background: #000000;
  color: #ffffff;
  --text-3: #9a9a9a;
}
.community-band__inner { display: grid; gap: 32px; justify-items: center; text-align: center; }
.community-band__title {
  font-family: var(--mx-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -0.01em;
}
.community-band__lead { max-width: 52ch; margin-top: 16px; font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, 0.8); }
.community-band__strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 1080px;
}
.community-band__strip img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #171717;
}
.community-band__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 24px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--r-full);
  color: #ffffff;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 500ms var(--ease), color 500ms var(--ease);
}
.community-band__link:hover { background: #ffffff; color: #111111; }
.community-band__link svg { width: 18px; height: 18px; }
.community-band__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
}
/* The strip moves on its own, so it takes focus and a named pause control. */
.community-band__strip:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; }
.community-band__pause {
  min-height: 44px;
  padding: 8px 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--r-full);
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.community-band__pause:hover { background: #ffffff; color: #111111; }
.community-band__pause[aria-pressed="true"] { background: #ffffff; color: #111111; }

/* ---------- shell bands in the Monogram theme ---------- */
.news { background: var(--s-1); }
.foot { background: #ffffff; }
.foot__logo { filter: none; }

/* ---------- breakpoints ---------- */
@media (min-width: 768px) {
  .mx-rail { padding: 96px 0; }
  /* Room for one control plus the gap on each side: 48px + 12px. The track
     loses exactly that, so the arrows stand beside the cards, never on them. */
  .mx-rail__viewport { padding-inline: calc(48px + 12px); }
  .mx-rail__viewport:has(.mx-rail__controls[hidden]) { padding-inline: 0; }
  .parade { padding: 96px 0; }
  .catband__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trustband { padding: 96px 0; --tb-gap: 48px; }
  .trustband__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--tb-gap); }
  /* The facts' value starts where the second review column starts: one review
     column plus the gutter, less this row's own 24px gap. */
  .trustband__row {
    grid-template-columns: minmax(0, calc((100% - 2 * var(--tb-gap)) / 3 + var(--tb-gap) - 24px)) minmax(0, 1fr);
    gap: 24px;
    align-items: baseline;
  }
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .community-band { padding: 96px 0; }
  .community-band__strip { gap: 12px; }
  .news__grid { align-items: center; }
  :root { --mx-card: min(38vw, 300px); }
}
@media (min-width: 1024px) {
  .services__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-head { position: sticky; }
  /* Four whole cards fill the container: card = (track width - 3 gaps) / 4, so
     the Luxe rail shows four with nothing clipped and no control on top. */
  :root { --mx-card: calc((100% - 72px) / 4); }
  .parade__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* ticket-F-critique-2: seven tiles in one row. Stacked 4+3 the grid was
     1,169px and the first product and the first price landed at 3.6 screens;
     in one row it is about 250px, and all seven categories stay visible with no
     interaction, which is what the owner asked for when the arrows came out. */
  .catband__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 24px 16px; }
  .catcol__name { font-size: 18px; line-height: 1.15; letter-spacing: -0.01em; }
}
@media (max-width: 719px) {
  .mega { display: none; }
  .nav__bar { padding: 10px var(--gutter); }
  .nav__logo { position: static; transform: none; width: 124px; }
  .hero__foot { justify-content: flex-start; }
}
/* Rails move by swipe and by keyboard below 768px; the arrows would sit on top
   of the first and last card at that width, and the reserved margin goes with
   them so the cards keep the full width. */
@media (max-width: 767px) {
  .mx-rail__controls { display: none; }
  .mx-rail__viewport { padding-inline: 0; }
}

/* ---------- client homepage pass ---------- */
.nav__bar { justify-content: flex-start; }
.nav__logo {
  position: static;
  transform: none;
  width: 136px;
  flex: 0 0 auto;
  margin-right: clamp(16px, 3vw, 44px);
}
.nav__bar > nav { order: 1; }
.nav__tools { order: 2; margin-left: auto; }
#wishlist-toggle[aria-pressed="true"] svg { fill: currentColor; }

.services { padding: 36px 0; }
.services__grid { gap: 24px; }
.service { padding-top: 0; }

.card__quick { border-top: 1px solid var(--hair-soft); }
.card__quick summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.card__quick summary::-webkit-details-marker { display: none; }
.card__quick summary svg { width: 16px; height: 16px; transition: rotate 150ms cubic-bezier(0.2, 0, 0, 1); }
.card__quick[open] summary svg { rotate: 180deg; }
.card__quick-body { display: grid; gap: 12px; padding: 4px 0 12px; }
.card__quick .card__sizes { margin: 0; }
.card__quick .btn:active { scale: 0.96; }

.community-band { overflow: hidden; }
.community-band__inner { max-width: none; padding-inline: 0; }
.community-band__inner > .reveal,
.community-band__cta { padding-inline: var(--gutter); }
.community-band__viewport { width: 100%; overflow: hidden; }
.community-band__strip {
  /* The movement is a programmatic scroll, twenty writes a second: tell the
     browser so it can composite the strip instead of repainting it. */
  will-change: scroll-position;
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-inline: var(--gutter);
}
.community-band__strip::-webkit-scrollbar { display: none; }
.community-card {
  flex: 0 0 min(76vw, 320px);
  margin: 0;
  text-align: left;
}
.community-card img { outline: 1px solid rgba(255, 255, 255, 0.12); }
.community-card figcaption {
  padding-top: 10px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.foot__grid { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
.foot__legal { display: flex; justify-content: space-between; gap: 20px; }

@media (min-width: 768px) {
  .community-card { flex-basis: min(30vw, 360px); }
}

@media (min-width: 1024px) {
  /* Three complete cards plus a deliberate preview of the fourth. */
  :root { --mx-card: 29.5%; }
}

@media (max-width: 719px) {
  .nav__logo { width: 124px; margin-right: 0; }
  .hero__frame { height: var(--esempio-hero-height, calc(100svh - 149px)); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__grid > div:first-child { grid-column: 1 / -1; }
  .foot__legal { flex-direction: column; }
}

/* ---------- client revision: direct navigation, frictionless commerce ---------- */
.nav__bar { padding-inline: clamp(20px, 2.5vw, 40px); }
.nav__logo { margin-right: 0; }
.mega__media img { filter: none; }


/* The arrows sit in the margin reserved on .mx-rail__viewport, one at each end
   at the height of the track, so no circle can land on a card. */
.mx-rail__track {
  padding-bottom: 4px;
  scrollbar-width: none;
}
.mx-rail__track::-webkit-scrollbar { display: none; }
.mx-rail__foot { margin-top: 32px; }
.mx-rail__foot .btn { color: #ffffff; text-decoration: none; }

.card__quick-body { padding-top: 8px; }
.card__quick .card__foot .btn { min-height: 44px; }

/* Product pages use the same F visual system as the homepage. */
.pdp__stage,
.pdp__thumb { border-radius: 0; }
.pdp__stage { border-color: var(--hair-soft); }
.pdp__thumbs { align-content: start; }
.pdp__info h1 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.pdp__price { font-size: 24px; font-variant-numeric: tabular-nums; }
.pdp__buy .btn { min-height: 52px; }
.pdp__points { gap: 0; border-block: 1px solid var(--hair-soft); }
.pdp__benefit { min-height: 44px; padding-block: 12px; }
.pdp__benefit + .pdp__benefit { border-top: 1px solid var(--hair-soft); }
.pdp__size-guide { background: #ffffff; }
/* G3: the frame takes the file's ratio, and the frame fits the first screen
   whole. `--pdp-ar` is that ratio, written on the grid by
   tools/gen/products.mjs from the file itself and moved by the thumbnail swap,
   so the frame reserves its shape before the photo arrives and keeps it if the
   photo changes. The frame no longer imposes 4:5 (main.css's aspect-ratio on
   .pdp__stage img): an explicit 4:5 box letterboxed every other file, 23 of the
   27 first images, which is the same lie in the other direction.
   The one ceiling left is the fold, measured from the frame's top edge on the
   first painted frame at scrollY 0: 254.3px of announce bar, header, breadcrumb
   and band padding at 1440x900, plus the 64px the gallery's .reveal entry
   starts below its resting place (main.css:1120-1124). --pdp-chrome reserves
   that budget (264px, 284px under 1024px); `100svh` keeps the cap on the small
   viewport height, so a browser toolbar can only add margin.
   These numbers sit on .pdp__grid because the grid column is what hugs the
   photo (T3); the stage inherits them. */
.pdp__grid {
  --pdp-chrome: 264px;
  --pdp-clear: 12px;
  --pdp-rail: 88px;                    /* 76px thumbnails + 12px gutter */
  --pdp-white: clamp(64px, 6vw, 96px); /* T3: white between photo and text */
}
.pdp__stage {
  width: min(100%, calc((100svh - var(--pdp-chrome) - var(--pdp-clear)) * var(--pdp-ar, 0.8)));
}
.pdp__stage img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--pdp-ar, 0.8);
  object-fit: contain;
}
/* G5: the fit link is its own row under the buy button (see tools/gen/products.mjs),
   clear of the size chips. */
/* T2: 24-32px between the last size chip and Add to cart. */
.pdp__info [data-add-scope] { display: grid; gap: 28px; }
.pdp__size-help { margin-top: 16px; }
.pdp__pair { background: var(--s-1); }

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

@media (min-width: 1024px) {
  .nav__bar > nav {
    position: absolute;
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }
  .nav__tools { margin-left: auto; }
  /* T3: the first column hugs the photo — thumbnails plus the fold cap — so
     the white between the photo and the text is exactly --pdp-white (64-96px)
     instead of the 403px the 1.35fr column left. The text keeps a 370-460px
     measure and the leftover width sits to its right. The first min() keeps a
     very tall window from pushing the text out; at every measured height the
     fold cap is the smaller term, so the photo does not change size. */
  .pdp__grid {
    grid-template-columns:
      min(calc(100% - var(--pdp-white) - 370px),
          calc(var(--pdp-rail) + (100svh - var(--pdp-chrome) - var(--pdp-clear)) * var(--pdp-ar, 0.8)))
      minmax(370px, 460px);
    column-gap: var(--pdp-white);
    justify-content: start;
  }
  .pdp__gallery { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .pdp__thumbs { display: grid; gap: 10px; order: 0; }
  .pdp__stage { order: 1; }
  .pdp__info { position: sticky; top: 120px; }
}

@media (max-width: 767px) {
  .mx-rail__controls { display: none; }
  .pdp__gallery { display: flex; flex-direction: column; }
  .pdp__stage { order: 0; }
  .pdp__thumbs { order: 1; display: grid; grid-template-columns: repeat(2, 72px); }
}

@media (max-width: 360px) {
  .nav__bar { padding-inline: 8px; gap: 4px; }
  .nav__logo { width: 92px; }
  .nav__tools { gap: 0; }
}

/* ---------- ticket-F-space-above-products: what the first screen shows ---- */
/* Two 96px band paddings either side of the collection title put the top edge
   of the first product card at 845px on a 900px screen, with 46px of a photo
   showing: above the fold, useless as a shop. 40px is the bottom of the 40-48px
   range the ticket sets. The same padding is the PDP's whole fold budget — the
   photo cap below counts it in --pdp-chrome — so the band is one lever for
   both, and it cannot move without moving the photo. */
.band--tight { padding: 40px 0; }

/* One collection band instead of two, with the title and the toolbar in one
   row. Two bands charged two paddings between the title and the count row
   (216px measured); stacked, they would put the count row at y=366 and the
   first card at y=442, and no 40-48px rhythm reaches the 340px the guard asks
   for. The description and the sizing link move under the grid, so nothing
   descriptive stands between the reader and the first card. */
.plp__head { display: grid; gap: 16px; margin-bottom: 20px; }
.plp__title .label { display: block; margin-bottom: 8px; }
.plp__title h1 { margin: 0; }
.plp__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; margin-bottom: 0; }
/* The toolbar reads sort, then filters, then the count, in that order at every
   width (the owner asked for it). Closed on a phone: sort and the filter pill
   share the row, the count sits under them. */
.plp__sort { grid-area: 1 / 1; }
.plp__panel { grid-area: 1 / 2; padding: 8px; border-radius: var(--r-full); }
.plp__count { grid-area: 2 / 1 / 3 / 3; margin: 0; }
.plp__panel[open] { border-radius: var(--r-2xl); }
/* Opened, the panel takes the whole row and comes first: a facet group in the
   143px the toolbar leaves beside the sort is a column of one. */
.plp__bar:has(.plp__panel[open]) { grid-template-columns: minmax(0, 1fr); }
.plp__bar:has(.plp__panel[open]) .plp__panel { grid-area: 1 / 1; }
.plp__bar:has(.plp__panel[open]) .plp__count { grid-area: 2 / 1; }
.plp__bar:has(.plp__panel[open]) .plp__sort { grid-area: 3 / 1; }
.plp__summary { min-height: 44px; padding: 0 14px; }
.plp__summary-short { display: none; }
/* Sort and the filter pill were 39px and 44px tall on a phone, over a grid whose
   cards are 165px wide. */
@media (max-width: 767px) {
  /* A touch control cannot go under 44px, so the pill loses weight instead of
     height: smaller type, a shorter label, tighter padding. The closed panel's
     box stays in the 56-68px band the harness pins. */
  .plp__summary { padding: 0 12px; font-size: 13px; }
  .plp__sort select { font-size: 13px; }
  .plp__summary-long { display: none; }
  .plp__summary-short { display: inline; }
}
.plp__summary svg { width: 16px; height: 16px; }
.plp__groups { padding: 16px 8px 8px; }
.plp__note { display: grid; gap: 8px; max-width: 680px; margin-top: 40px; }
.plp__note .body { margin: 0; }

@media (min-width: 768px) {
  .plp__head { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(62px, auto); align-items: end; gap: 24px 40px; margin-bottom: 40px; }
  .plp__bar { grid-template-columns: auto auto auto; gap: 20px; transform: translateY(11px); }
  /* T1: the closed pill rides the h1's line. The head keeps its 62px row (the
     breadcrumb-to-header gap is measured on it) and the title keeps its place,
     so the pill is 46px and the toolbar drops by the half-difference between
     the h1 line centre (50px from the head top) and the pill's end-aligned
     centre (62 - 46/2 = 39): 11px. Pill, count and sort share that centre. */
  .plp__panel { padding: 0; }
  .plp__panel[open] { padding: 8px; }
  .plp__head:has(.plp__panel[open]) .plp__bar { transform: none; }
  .plp__panel,
  .plp__count,
  .plp__sort { grid-area: auto; }
  /* Opened, the panel takes the band's full width, under the sort and the
     count; closed, it is one control in the toolbar. */
  .plp__head:has(.plp__panel[open]) .plp__bar { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; }
  .plp__head:has(.plp__panel[open]) .plp__sort { grid-area: 1 / 1; }
  .plp__head:has(.plp__panel[open]) .plp__count { grid-area: 1 / 2; justify-self: end; }
  .plp__head:has(.plp__panel[open]) .plp__panel { grid-area: 2 / 1 / 3 / 3; }
}

/* ticket-F-space-above-products 0: the demonstration notice is the protection
   that declares the reviews as demonstration content, so it spans the three
   review columns instead of one and reads at 14px; and the empty star of the
   4-of-5 review is #8a8a86 (3.45:1 on white) instead of the #d8d8d4 base that
   came out at 1.43:1 and read as a smudge. The rating stays 4 of 5. */
.trustband__note { max-width: none; margin-top: 32px; font-size: 14px; line-height: 20px; }
.stars__base { color: #8a8a86; }

/* ticket-F-space-above-products 3 and 5. Below 1024px .pdp__thumb's width:100%
   landed in a single-column gallery, so two 4:5 thumbnails stacked full width
   above the stage and the photo sat at y=2049. The thumbnails stay in their own
   76px column from 768px up, which leaves the photo in the first screen.
   --pdp-chrome is the fold budget: announce bar (36) + header (86.3) + crumbs
   (36) + band padding (40) + the 64px the gallery's .reveal entry starts below
   its resting place. Reserving 264 leaves the photo whole with a clear margin
   at every width the guard reads. */
@media (min-width: 768px) {
  .pdp__gallery { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .pdp__thumbs { display: grid; gap: 10px; }
  .pdp__thumb { width: 100%; }
}
@media (max-width: 1023px) {
  /* 768-1023px: the header runs 20px taller and the crumb block is 36px, so
     the stage rests at 218.3 and the fold budget grows with it. */
  .pdp__grid { --pdp-chrome: 284px; }
}