/* =====================================================================
   LAAS · Ring-Lock · the buy page
   Loaded after darkroom.css: the voices, the nav capsule, the menu, the
   footer, António's buy block and the FAQ come from there. This file lays
   out a calm product page: the real lock in 3D (turn it by dragging), the
   title, the price and the buy card; then a few details and questions.
   Phone first in spirit: one column of generous spacing.
   (cart-v2.html and checkout-v2.html load this file too, for the base rules.)
   ===================================================================== */

/* an ordinary page: no snap, no fixed ground */
html { scroll-snap-type: none; scroll-behavior: smooth; scroll-padding-top: 96px; background: var(--paper); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.buy-page { background: var(--paper); }
.buy-page main { position: relative; }

/* the nav: the capsule is already afloat on this page */
.nav__cart { height: 48px; padding: 0 8px 0 18px; gap: 10px; font: 500 15px/1 var(--display); color: var(--ink); background: rgba(255, 255, 255, .5); }
.nav__cart b { min-width: 30px; height: 32px; display: grid; place-items: center; padding: 0 8px; border-radius: 30px; background: var(--ink); color: var(--paper); font-weight: 500; font-size: 13px; }
.nav__cart[hidden] { display: none; }

/* ------------------------------------------------------------ the product */
.pdp {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, 460px); column-gap: clamp(40px, 6vw, 112px); align-items: center;
  max-width: 1200px; margin: 0 auto; padding: 120px var(--gutter) clamp(72px, 8vw, 120px);
}

/* the lock: the real model on a transparent canvas, a soft shadow under it, nothing behind it */
.pdp__stage { display: grid; justify-items: center; gap: 4px; }
.lock3d {
  position: relative; width: 100%; height: clamp(400px, calc(100vh - 320px), 560px);
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.lock3d.is-drag { cursor: grabbing; }
.lock3d:focus-visible { outline-offset: -8px; border-radius: 28px; }
.lock3d canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; transition: opacity .6s var(--ease); }
.lock3d.is-3d canvas { opacity: 1; }
.lock3d__still { position: absolute; left: 50%; top: 50%; z-index: 1; width: var(--ring, 56%); height: auto; aspect-ratio: 1; translate: -50% -50%; object-fit: contain; transition: opacity .4s var(--ease); pointer-events: none; }
.lock3d.is-3d .lock3d__still { opacity: 0; }
.lock3d__floor { position: absolute; z-index: 0; left: 50%; top: var(--fy, 80%); width: var(--fw, 46%); height: 30px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(32, 47, 48, .3), rgba(32, 47, 48, 0)); filter: blur(8px); pointer-events: none; }
.lock3d__hint { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; transition: opacity .6s var(--ease); }
.lock3d__hint::before, .lock3d__hint::after { content: ""; width: 26px; border-top: var(--dash); }
.lock3d__hint.is-used { opacity: 0; }

/* the column: title, price, one line, the card */
.pdp__title { font-size: clamp(40px, 3.8vw, 58px); }
.pdp__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; }
.pdp__price strong { font: 600 clamp(32px, 2.6vw, 40px)/1 var(--display); letter-spacing: -0.04em; }
.pdp__price s { color: var(--muted); font-size: 17px; text-decoration-thickness: 1px; }
.pdp__intro { align-self: center; padding: 7px 11px; border-radius: 20px; background: rgba(155, 205, 208, .55); color: var(--ink); font-size: 11px; }
.pdp__sub { margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }

/* António's block, on a white card (the same card as on index.html #buy) */
.buybox {
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px; margin-top: 28px;
  padding: clamp(24px, 2.2vw, 32px); border-radius: 24px; background: #FFFFFF;
  box-shadow: 0 1px 1px rgba(32, 47, 48, .04), 0 24px 60px -30px rgba(32, 47, 48, .35);
}
.buybox > * { margin: 0; }
.buy-btn { cursor: pointer; border: 0; }
.buy-btn:disabled { opacity: .7; cursor: progress; }
.buy-btn.is-added { background: var(--ink); }
.pdp__ship { margin-top: 16px; font-size: 14px; }

/* ------------------------------------------------------------ details */
.details {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); align-items: center;
  max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter) clamp(72px, 8vw, 120px);
}
.details__photo { margin: 0; overflow: hidden; border-radius: 24px; aspect-ratio: 1; background: #DADDDC; }
.details__photo img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s var(--ease); }
.details__photo img.is-out { opacity: 0; }
.details__h { font: 600 22px/1.15 var(--display); letter-spacing: -0.02em; margin-bottom: 14px; }
.details__h--box { margin: 32px 0 8px; font-size: 17px; }
.specs__list { display: grid; border-top: 1px solid rgba(32, 47, 48, .12); }
.specs__list div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 13px 0; border-bottom: 1px solid rgba(32, 47, 48, .12); font-size: 15px; }
.specs__list dt { color: var(--muted); flex: none; }
.specs__list dd { text-align: right; color: var(--ink); font-weight: 500; }
.details__box { font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 34em; }

/* ------------------------------------------------------------ questions */
.pdp-faq { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter) clamp(80px, 9vw, 128px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 112px); }
.pdp-faq .details__h { grid-column: 1; }
.pdp-faq .faq, .pdp-faq__more { grid-column: 2; }
.pdp-faq .faq { grid-row: 1; }
.pdp-faq__more { margin-top: 18px; font-size: 14px; }

/* ------------------------------------------------------------ the mobile buy bar */
.buybar { display: none; }
.nav__buy--pdp { display: none !important; }
@media (min-width: 761px) { html.pdp-box-gone .nav__buy--pdp { display: inline-flex !important; animation: pdp-pill .35s cubic-bezier(.2, .7, .2, 1); } }
@keyframes pdp-pill { from { opacity: 0; translate: 0 -6px; } }

/* ------------------------------------------------------------ phones */
@media (max-width: 760px) {
  html { scroll-padding-top: 76px; }
  .nav__cart { display: none !important; }
  .pdp { display: flex; flex-direction: column; align-items: stretch; padding: 72px var(--gutter) 64px; }
  .lock3d { height: auto; aspect-ratio: 1 / .86; --ring: 62%; }
  .pdp__stage { margin-bottom: 18px; }
  .pdp__title { font-size: clamp(34px, 9.6vw, 40px); }
  .pdp__price { margin-top: 12px; }
  .pdp__price strong { font-size: 32px; }
  .pdp__sub { font-size: 15.5px; margin-top: 10px; }
  .buybox { margin-top: 22px; padding: 20px; gap: 16px; align-items: stretch; }
  .buybox .finishes { justify-content: flex-start; }
  .buybox .qty-row { width: 100%; }

  .details { display: flex; flex-direction: column; align-items: stretch; gap: 28px; padding-bottom: 64px; }
  .details__photo { border-radius: 20px; aspect-ratio: 4 / 3; }
  .specs__list div { font-size: 14.5px; padding: 12px 0; flex-direction: column; align-items: flex-start; gap: 2px; }
  .specs__list dd { text-align: left; margin: 0; }
  .pdp-faq { display: block; padding-bottom: 96px; }
  .pdp-faq__more { margin-top: 16px; }

  /* the mobile buy bar, once the buy card has scrolled away */
  .buybar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 45;
    padding: 6px 6px 6px 18px; border-radius: 22px; border: 1px solid rgba(32, 47, 48, .1);
    background: color-mix(in srgb, var(--paper) 82%, transparent); -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 14px 40px -20px rgba(32, 47, 48, .45);
    translate: 0 calc(100% + 24px); visibility: hidden; transition: translate .45s var(--ease), visibility 0s linear .45s;
  }
  .buybar.is-on { translate: 0 0; visibility: visible; transition: translate .45s var(--ease), visibility 0s; }
  .buybar__what { display: grid; gap: 2px; font-size: 13px; color: var(--muted); }
  .buybar__what b { font: 600 15px/1.1 var(--display); color: var(--ink); letter-spacing: -0.01em; }
  .buybar__btn { flex: none; min-height: 46px; padding: 0 20px; font-size: 15px; }
}

.flex-ask button:focus:not(:focus-visible) { outline: none; }

/* ------------------------------------------------------------ v2: the landing page's buy chapter */
.pdp--v2 { grid-template-columns: minmax(220px, .85fr) minmax(0, 1.3fr) minmax(340px, 430px); column-gap: clamp(24px, 3vw, 56px); max-width: 1480px; padding-top: 112px; }
.pdp__head .void__index { margin-bottom: 18px; }
.pdp__fins { font-size: clamp(40px, 4.2vw, 68px); line-height: .98; }
.pdp__fins span[data-fin] { display: block; width: max-content; transition: opacity .5s var(--ease); }
[data-metal="steel"] .pdp__fins span[data-fin]:not([data-fin="steel"]),
[data-metal="copper"] .pdp__fins span[data-fin]:not([data-fin="copper"]),
[data-metal="black"] .pdp__fins span[data-fin]:not([data-fin="black"]) { opacity: .34; }
.pdp--v2 .pdp__sub { max-width: 19em; margin-top: 20px; }
.pdp--v2 .lock3d { height: clamp(380px, calc(100vh - 300px), 600px); }
.pdp__turn { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
.pdp__turn .turn { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 1px rgba(32, 47, 48, .06), 0 6px 18px -8px rgba(32, 47, 48, .3); }
.pdp__turn .turn svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pdp__turn .lock3d__hint.is-used { opacity: .5; }
.pdp--v2 .buybox { margin-top: 0; }
.pdp--v2 .price-line { margin: 0; }
@media (max-width: 1100px) and (min-width: 761px) {
  .pdp--v2 { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
  .pdp--v2 .pdp__head { grid-column: 1 / -1; margin-bottom: 12px; }
}
@media (max-width: 760px) {
  .pdp--v2 { padding-top: 84px; }
  .pdp__fins { font-size: clamp(34px, 10vw, 44px); }
  .pdp__fins span[data-fin] { display: inline; }
  .pdp--v2 .pdp__sub { font-size: 15px; margin-top: 12px; }
  .pdp--v2 .lock3d { height: auto; aspect-ratio: 1 / .9; }
  .pdp--v2 .pdp__stage { margin: 4px 0 18px; }
}

/* the lock fills its column; the turn buttons sit right under it */
.pdp--v2 .lock3d { height: clamp(360px, calc(100vh - 330px), 540px); --ring: 76%; }
.pdp--v2 .pdp__turn { margin-top: -18px; position: relative; z-index: 2; }
@media (max-width: 760px) { .pdp--v2 .lock3d { --ring: 72%; } .pdp--v2 .pdp__turn { margin-top: -8px; } }
@media (max-width: 760px) { .pdp--v2 .pdp__col { width: 100%; } .pdp--v2 .buybox { width: 100%; } }
@media (max-width: 760px) { .pdp--v2 .lock3d { height: auto; width: 100%; aspect-ratio: 1 / .9; } }
/* the studio renders carry a margin round the ring: the picture fills the stage */
.pdp--v2 .lock3d { --ring: 100%; }
@media (max-width: 760px) { .pdp--v2 .lock3d { --ring: 100%; } }
/* details: the lock from above, the render on a white card, the numbers beside it */
.details__photo { background: #DADDDC; }
.details__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .details__photo { aspect-ratio: 1; } }

/* reviews (after 21st.dev's testimonial cards): real Trustpilot reviews, the score as Trustpilot shows it */
.rv { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter) clamp(72px, 8vw, 120px); }
.rv__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-bottom: 28px; }
.rv__top .details__h { margin: 0; }
.rv__sum { display: flex; align-items: center; gap: 0; color: var(--ink); }
.rv__faces { display: flex; padding-right: 14px; margin-right: 14px; border-right: 1px solid var(--line); }
.rv__faces i, .rv__face { display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #ECECEA; font: 600 13px/1 var(--display); font-style: normal; letter-spacing: .02em; }
.rv__faces i { width: 40px; height: 40px; border: 2px solid var(--paper); margin-left: -10px; transition: translate .2s var(--ease); }
.rv__faces i:first-child { margin-left: 0; }
.rv__faces i:nth-child(2) { background: var(--green); } .rv__faces i:nth-child(3) { background: #458A8E; } .rv__faces i:nth-child(4) { background: #606A74; }
.rv__sum:hover .rv__faces i { translate: 0 -2px; }
.rv__score { display: inline-flex; align-items: center; gap: 8px; }
.rv__score b { font: 600 16px/1 var(--display); }
.rv__count { margin-left: 14px; font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.rv__count b { color: var(--ink); font-weight: 600; }
.rv__stars { display: inline-flex; gap: 3px; margin: 0; }
.rv__stars svg { width: 16px; height: 15px; fill: #00B67A; }
.rv__stars svg.off { fill: rgba(32, 47, 48, .18); }
.rv__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rv__card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 28px 32px; border-radius: 24px; background: #FFFFFF; }
.rv__face { width: 64px; height: 64px; font-size: 18px; }
.rv__card:nth-child(2) .rv__face { background: var(--green); } .rv__card:nth-child(3) .rv__face { background: #458A8E; }
.rv__name { margin: 12px 0 0; font: 600 17px/1.2 var(--display); color: var(--ink); }
.rv__meta { margin: 2px 0 12px; font-size: 13px; color: var(--muted); }
.rv__text { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 860px) { .rv__list { grid-template-columns: 1fr; } .rv__count { margin-left: 10px; } }
/* the reviews as a band that drifts to the right, small cards, twice over so it never ends; it stops under the
   pointer and for reduced motion (then it scrolls by hand) */
.rv__band { overflow: hidden; margin: 0 calc(-1 * var(--gutter)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rv__list { display: flex !important; gap: 12px; width: max-content; padding: 0 var(--gutter); animation: rv-drift 60s linear infinite; }
.rv__band:hover .rv__list, .rv__band:focus-within .rv__list { animation-play-state: paused; }
@keyframes rv-drift { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.rv__card { width: 280px; flex: none; align-items: flex-start; text-align: left; padding: 18px 20px 20px; border-radius: 20px; }
.rv__who { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rv__face { width: 36px; height: 36px; font-size: 12px; flex: none; }
.rv__card .rv__name { margin: 0; font-size: 14px; }
.rv__card .rv__meta { margin: 1px 0 0; font-size: 12px; }
.rv__card .rv__stars svg { width: 13px; height: 12px; }
.rv__card .rv__text { margin-top: 8px; font-size: 13.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rv__card:nth-child(6n+4) .rv__face { background: #606A74; } .rv__card:nth-child(6n+5) .rv__face { background: var(--green); } .rv__card:nth-child(6n) .rv__face { background: #458A8E; }
@media (prefers-reduced-motion: reduce) { .rv__band { overflow-x: auto; } .rv__list { animation: none; } }
@media (max-width: 860px) { .rv__card { width: 240px; } }

/* the first screen is the buy card alone: the reviews start below the fold */
.pdp--v2 { min-height: 100vh; min-height: 100svh; }


.pdp__turn .turn { background: transparent; box-shadow: none; border: 0; border-radius: 12px; transition: translate .25s var(--ease), opacity .2s; }
.pdp__turn .turn:hover { opacity: .7; background: transparent; }
.pdp__turn .turn:first-child:hover { translate: -2px 0; }
.pdp__turn .turn:last-child:hover { translate: 2px 0; }
.pdp__turn .turn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* the details without a photo: one column, the width of the reviews */
.details { display: block; }
.details__text { max-width: 760px; }

/* questions: one calm column the width of the details above, the heading with a link to the whole FAQ, smaller
   questions in the faq.html voice, and the two ways to ask as small rows (owner, 10 Oct) */
.details { padding-bottom: clamp(48px, 5vw, 72px); }
.pdp-faq { display: block; max-width: 1200px; padding-bottom: clamp(72px, 8vw, 112px); }
.pdp-faq > * { max-width: 760px; }
.pdp-faq__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.pdp-faq__head .details__h { margin: 0; }
.pdp-faq__all { font-size: 14px; white-space: nowrap; }
.pdp-faq__all::after { content: " →"; }
.pdp-faq .qa summary { gap: 16px; min-height: 56px; padding: 14px 0; font: 500 18px/1.35 var(--display); letter-spacing: -0.01em; }
.pdp-faq .qa summary i { width: 28px; height: 28px; }
.pdp-faq .qa summary i::before, .pdp-faq .qa summary i::after { width: 11px; }
.pdp-faq .qa p { padding-bottom: 18px; font-size: 15px; }
.pdp-faq__ask { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pdp-faq__ask a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; border-radius: 16px; background: #FFFFFF; color: var(--ink); font: 500 15px/1.25 var(--display); transition: box-shadow .2s, translate .2s var(--ease); box-shadow: inset 0 0 0 1px rgba(32, 47, 48, .08); }
.pdp-faq__ask a:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.pdp-faq__ask a:active { translate: 0 1px; }
.pdp-faq__ask svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--green); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pdp-faq__ask small { display: block; margin-bottom: 2px; font: 400 12px/1.2 var(--body); color: var(--muted); }
@media (max-width: 760px) {
  .pdp-faq .qa summary { font-size: 16px; min-height: 52px; padding: 12px 0; }
  .pdp-faq__ask { grid-template-columns: 1fr; }
}

/* the Flex Mount on its own: one tidy card between the details and the questions (in their 760 px column), rising in once */
.acc { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter) clamp(48px, 5vw, 72px); scroll-margin-top: 96px; }
.acc__card { max-width: 760px; display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 14px 22px 14px 14px; border-radius: 22px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(32, 47, 48, .08); }
.acc__card > * { min-width: 0; }
.acc__pic { display: block; width: 100%; height: auto; aspect-ratio: 680 / 411; object-fit: cover; border-radius: 14px; background: #DADDDC; }
.acc__kicker { margin: 0 0 6px; color: var(--green); }
.acc__h { margin: 0; font: 600 20px/1.2 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.acc__p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 30em; }
.acc__buy { display: grid; justify-items: end; gap: 10px; }
.acc__price { margin: 0; font: 600 20px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.acc__btn { min-width: 0; height: 44px; padding: 0 20px; font-size: 15px; white-space: nowrap; }
html.reveal-on .acc__card[data-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px); }
html.reveal-on .acc__card[data-reveal] { transition: opacity .7s var(--ease), transform .7s var(--ease); }
@media (max-width: 760px) {
  .acc__card { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 12px; border-radius: 20px; }
  .acc__pic { border-radius: 10px; }
  .acc__buy { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; justify-items: stretch; gap: 14px; }
  .acc__btn { width: 100%; justify-content: center; }
  .acc__h { font-size: 18px; } .acc__p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { html.reveal-on .acc__card[data-reveal] { transition: none; } }

/* ------------------------------------------------------------ details, v2 (loop round 1): four numbers, a real photo,
   the box as pictures, three rows for what the numbers do not say */
.details.details--v2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.details--v2 .details__text { max-width: none; }
.details--v2 .details__photo { position: sticky; top: 104px; margin: 50px 0 0; aspect-ratio: 1; border-radius: 24px; }
.dnum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.dnum li { display: grid; gap: 8px; align-content: start; padding: 18px 16px 16px; border-radius: 18px; background: #FFFFFF; }
.dnum b { font: 600 clamp(20px, 1.6vw, 26px)/1 var(--display); white-space: nowrap; letter-spacing: -0.03em; color: var(--ink); }
.dnum span { font-size: 13px; line-height: 1.3; color: var(--muted); }
.details--v2 .details__h--box { margin-top: 36px; }
.dbox { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.dbox li { display: grid; justify-items: center; align-content: start; gap: 10px; padding: 18px 8px 14px; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(32, 47, 48, .12); text-align: center; font-size: 13px; line-height: 1.25; color: var(--ink); }
.dbox svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.details--v2 .details__box { font-size: 13px; }
/* they rise into place once, one after the other */
html.reveal-on .details--v2 [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px); }
html.reveal-on .details--v2 [data-reveal] { transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.reveal-on .dnum[data-reveal] li, html.reveal-on .dbox[data-reveal] li { transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.reveal-on .dnum[data-reveal]:not(.is-in) li, html.reveal-on .dbox[data-reveal]:not(.is-in) li { opacity: 0; transform: translateY(10px); }
.dnum li:nth-child(2), .dbox li:nth-child(2) { transition-delay: .06s !important; }
.dnum li:nth-child(3), .dbox li:nth-child(3) { transition-delay: .12s !important; }
.dnum li:nth-child(4), .dbox li:nth-child(4) { transition-delay: .18s !important; }
html.reveal-on .dnum[data-reveal]:not(.is-in), html.reveal-on .dbox[data-reveal]:not(.is-in) { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.reveal-on .details--v2 [data-reveal], html.reveal-on .details--v2 [data-reveal] li { transition: none; } }
@media (max-width: 1000px) and (min-width: 761px) { .dnum, .dbox { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .details.details--v2 { display: flex; flex-direction: column; gap: 22px; }
  .details--v2 .details__photo { position: static; margin: 0; aspect-ratio: 4 / 3; border-radius: 20px; }
  .dnum { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dnum li { padding: 16px 14px 14px; }
  .dbox { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dbox li { grid-template-columns: 26px minmax(0, 1fr); justify-items: start; align-items: center; gap: 10px; padding: 12px 12px; text-align: left; }
  .dbox svg { width: 26px; height: 26px; }
}

/* review round 1: the small label sits at the top of its column, not alone in the middle */
.pdp--v2 .pdp__head { align-self: start; padding-top: 8px; }
/* the lower page: the accessory card and the questions sit centred in the container */
.acc__card, .pdp-faq > * { margin-inline: auto; }
/* the label says what it is on one line on a phone: the dash gives way first */
/* the eyebrow stays on one line at every width; the dash takes what is left */
.pdp__head .void__index { gap: 10px; white-space: nowrap; }
.pdp__head .void__index::after { flex: 1 1 0; width: auto; min-width: 12px; }

/* Liz's copy (16 Oct) ---------------------------------------------------------------------------------------------- */
/* the shop card: her line under the finishes, and her 57-day line under the badges */
.buybox .buy__polish { margin: -8px 0 0; }
.buy__day57 { margin: 0; font-size: 13px; line-height: 1.4; color: #606A74; text-align: center; }
.buy__day57 a { color: inherit; text-decoration: none; }
.buy__day57 a:hover { color: #1D5F63; text-decoration: underline; }
/* in the box: her eyebrow over the heading */
.details__kicker { margin: 36px 0 0; color: var(--muted); font-size: 11px; }
.details--v2 .details__kicker + .details__h--box { margin-top: 6px; }
/* under the hood: four white cards, then the security note on dark */
.hood .details__text { max-width: 1200px; }
.hood__lead { margin: 0 0 18px; max-width: 34em; font-size: 16px; line-height: 1.5; color: var(--ink); }
.hood__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.hood__grid li { padding: 20px 22px; border-radius: 18px; background: #FFFFFF; }
.hood__grid h3 { margin: 0 0 6px; font: 600 16px/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.hood__grid p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.hood__sec { margin-top: 10px; padding: 26px 24px; border-radius: 18px; background: #202F30; color: #ECECEA; }
.hood__sec .label { margin: 0 0 10px; color: #9BCDD0; font-size: 11px; }
.hood__sec h3 { margin: 0; font: 600 clamp(22px, 2.2vw, 28px)/1.1 var(--display); letter-spacing: -0.02em; }
.hood__sub { margin: 6px 0 12px; font-size: 15px; color: #9BCDD0; }
.hood__sec p:last-child { margin: 0; max-width: 40em; font-size: 15px; line-height: 1.55; }
html.reveal-on .hood [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px); }
html.reveal-on .hood [data-reveal] { transition: opacity .7s var(--ease), transform .7s var(--ease); }
@media (max-width: 760px) { .hood__grid { grid-template-columns: 1fr; } .hood__grid li { padding: 18px; } .hood__sec { padding: 22px 18px; } }
/* the cart and the checkout: what you are covered by, under the sum */
.co-trust { margin-top: 18px !important; }
.co-final { margin: 12px 0 0; }



/* the promises page: the trial as words only (its logo is not approved yet), and Marcus's warranty terms */
.pr__head--text { grid-template-columns: 1fr; }
.pr__terms { margin-top: 24px; padding: 20px 22px; border-radius: 18px; background: var(--paper, #ECECEA); }
.pr__terms h3 { margin: 18px 0 6px; font: 600 16px/1.2 var(--display); color: var(--ink); }
.pr__terms h3:first-child { margin-top: 0; }
.pr__terms p, .pr__terms li { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.pr__terms ul { margin: 6px 0 10px; padding-left: 20px; display: grid; gap: 4px; }
.pr__contact { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px !important; }
/* About LAAS: the founder photo under the heading, two cards, the workshop and the prototype between them */
.ab__hero, .ab__pics figure { margin: 0; overflow: hidden; border-radius: 24px; background: #DADDDC; }
.ab__hero { margin-top: 24px; aspect-ratio: 16 / 9; }
.ab__hero img, .ab__pics img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab__card h2 { margin: 6px 0 12px; font: 600 clamp(24px, 3vw, 32px)/1.1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.ab__card p { margin: 0 0 10px; max-width: 38em; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.ab__card p:last-child { margin-bottom: 0; }
.ab__kicker { margin: 0 !important; color: var(--muted) !important; font-size: 11px !important; }
.ab__lead { font: 600 18px/1.4 var(--display) !important; color: var(--ink) !important; }
.ab__sign { display: grid; gap: 2px; margin-top: 16px !important; }
.ab__sign b { font: 600 16px/1.2 var(--display); color: var(--ink); }
.ab__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.ab__pics figure { aspect-ratio: 4 / 5; }
.ab__team { font: 500 17px/1.5 var(--display) !important; color: var(--ink) !important; }
@media (max-width: 760px) { .ab__hero { aspect-ratio: 4 / 5; border-radius: 20px; } .ab__pics { gap: 8px; } .ab__pics figure { border-radius: 18px; } }
/* About: the pictures fill their frames (a picture element is inline by default), and the founder photo is framed on
   Marcus and his bike, not the wall above him */
.ab__hero picture, .ab__pics picture { display: block; height: 100%; }
.ab__hero { aspect-ratio: 4 / 3; }
.ab__hero img { object-position: 50% 64%; }
.ab__pics figure:first-child img { object-position: 22% 50%; }
@media (max-width: 760px) { .ab__hero { aspect-ratio: 4 / 5; } .ab__hero img { object-position: 50% 60%; } }

/* ===================================================================== design pass: buy page (18 Oct)
   The buy page in the home page's voice: the section headings at the home page's chapter size, every section from
   gutter to gutter, and on a computer or a landscape tablet the home page's Help & Guides layout (the heading on the
   left, the content on the right). The first screen as the home page's shop chapter: the label top left, the lock
   large on the left, the card on the right. Scoped to buy.html (the only .buy-page without .shop-page). */
.buy-page:not(.shop-page) h2.details__h { margin: 0; font: 600 var(--fs-heading)/.98 var(--display); letter-spacing: -0.04em; text-wrap: balance; color: var(--ink); }
.buy-page:not(.shop-page) :is(.details, .rv, .acc, .pdp-faq) { max-width: none; margin: 0; padding: 0 var(--gutter) clamp(72px, 8vw, 128px); }
.buy-page:not(.shop-page) .details .details__text, .buy-page:not(.shop-page) .hood .details__text { max-width: none; }
.buy-page:not(.shop-page) .hood__lead { max-width: 26em; font-size: var(--fs-body); line-height: 1.38; }
.buy-page:not(.shop-page) .acc__card, .buy-page:not(.shop-page) .pdp-faq > * { max-width: none; margin-inline: 0; }
/* one column (phones and portrait tablets): the heading on top, the content under it */
.buy-page:not(.shop-page) .details--v2 h2.details__h { margin-bottom: 22px; }
.buy-page:not(.shop-page) .hood h2.details__h { margin-bottom: 18px; }
.buy-page:not(.shop-page) .hood__lead { margin-bottom: 26px; }
.buy-page:not(.shop-page) .rv__top { align-items: flex-end; }
.buy-page:not(.shop-page) .pdp-faq__head { align-items: baseline; margin-bottom: 22px; }

/* two columns: a computer, and a tablet held sideways (the home page's .void--help grid) */
@media (min-width: 1101px), (min-width: 761px) and (min-aspect-ratio: 1/1) {
  .buy-page:not(.shop-page) :is(.details--v2, .hood, .acc, .pdp-faq) {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); column-gap: clamp(32px, 5vw, 90px); row-gap: 0; align-items: start;
  }
  .buy-page:not(.shop-page) :is(.details--v2, .hood) .details__text { display: contents; }
  .buy-page:not(.shop-page) :is(.details--v2, .hood, .acc, .pdp-faq) > *,
  .buy-page:not(.shop-page) :is(.details--v2, .hood) .details__text > * { grid-column: 2; }
  .buy-page:not(.shop-page) :is(.details--v2, .hood) h2.details__h { grid-column: 1; grid-row: 1; margin: 0; }
  /* details: the heading, and the photo under it on the left; the numbers, the rows and the box on the right */
  .buy-page:not(.shop-page) .details--v2 { grid-template-rows: repeat(6, auto) 1fr; }
  .buy-page:not(.shop-page) .details--v2 .details__photo { grid-column: 1; grid-row: 2 / -1; position: sticky; top: 104px; margin: 28px 0 0; width: min(100%, 520px); }
  .buy-page:not(.shop-page) .details--v2 .dnum { grid-row: 1; }
  /* under the hood: the heading and the line under it on the left, the cards on the right */
  .buy-page:not(.shop-page) .hood { grid-template-rows: auto 1fr auto; }
  .buy-page:not(.shop-page) .hood .hood__lead { grid-column: 1; grid-row: 2; margin: 26px 0 0; }
  .buy-page:not(.shop-page) .hood .hood__grid { grid-row: 1 / span 2; }
  .buy-page:not(.shop-page) .hood .hood__sec { grid-row: 3; }
  /* the Flex-Mount card in the content column */
  .buy-page:not(.shop-page) .acc__card { grid-column: 2; }
  /* questions: the heading, the link to all questions and the two ways to ask on the left (as Help & Guides) */
  .buy-page:not(.shop-page) .pdp-faq { grid-template-rows: auto 1fr; }
  .buy-page:not(.shop-page) .pdp-faq__head { grid-column: 1; grid-row: 1; display: grid; justify-items: start; gap: 18px; margin: 0; }
  .buy-page:not(.shop-page) .pdp-faq .faq { grid-column: 2; grid-row: 1 / span 2; }
  .buy-page:not(.shop-page) .pdp-faq__ask { grid-column: 1; grid-row: 2; align-self: start; grid-template-columns: 1fr; max-width: 360px; margin-top: 28px; }
  .buy-page:not(.shop-page) .pdp-faq .qa summary { min-height: 0; padding: 20px 0; font: 600 clamp(18px, 1.45vw, 22px)/1.25 var(--display); letter-spacing: -0.02em; }
}
@media (min-width: 761px) and (max-width: 1100px) and (min-aspect-ratio: 1/1) {
  .buy-page:not(.shop-page) :is(.details--v2, .hood, .acc, .pdp-faq) { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 40px; }
  .buy-page:not(.shop-page) .dnum, .buy-page:not(.shop-page) .dbox { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the first screen, as the home page's shop chapter on a computer and a landscape tablet: the label pinned top left,
   the lock as large as the screen allows on the left, the card on the right */
@media (min-width: 1101px), (min-width: 761px) and (min-aspect-ratio: 1/1) {
  .buy-page:not(.shop-page) .pdp--v2 {
    position: relative; max-width: none; margin: 0; grid-template-columns: minmax(0, 1fr) minmax(380px, 420px); column-gap: clamp(32px, 5vw, 90px);
    padding: 120px var(--gutter) 72px; --lh: clamp(380px, calc(100svh - 250px), 680px);
  }
  .buy-page:not(.shop-page) .pdp--v2 .pdp__head { position: absolute; top: 120px; left: var(--gutter); grid-column: auto; margin: 0; padding: 0; }
  .buy-page:not(.shop-page) .pdp--v2 .pdp__stage { grid-column: 1; grid-row: 1; }
  .buy-page:not(.shop-page) .pdp--v2 .pdp__col { grid-column: 2; grid-row: 1; }
  .buy-page:not(.shop-page) .pdp--v2 .lock3d { height: var(--lh); }
  .buy-page:not(.shop-page) .pdp--v2 .lock3d__still { width: auto; height: 100%; max-width: 100%; }
}
@media (min-width: 761px) and (max-width: 1100px) and (min-aspect-ratio: 1/1) {
  .buy-page:not(.shop-page) .pdp--v2 { grid-template-columns: minmax(0, 1fr) minmax(340px, 380px); column-gap: 24px; padding-top: 104px; --lh: clamp(360px, calc(100svh - 200px), 600px); }
  .buy-page:not(.shop-page) .pdp--v2 .pdp__head { top: 104px; }
}
/* a portrait tablet: the lock as large as on the home page (the studio renders carry a margin round the ring) */
@media (min-width: 761px) and (max-width: 1100px) and (max-aspect-ratio: 1/1) {
  .buy-page:not(.shop-page) .pdp--v2 .lock3d__still { width: 128%; max-width: none; }
}
/* a phone: the link to all questions under the heading, not squeezed beside it */
@media (max-width: 760px) {
  .buy-page:not(.shop-page) .pdp-faq__head { display: grid; justify-items: start; gap: 10px; }
  .buy-page:not(.shop-page) .rv__top { align-items: flex-start; flex-direction: column; gap: 14px; }
}
/* a phone: the Trustpilot line keeps its stars full size; the count goes under it when it does not fit */
@media (max-width: 760px) {
  .buy-page:not(.shop-page) .rv__sum { flex-wrap: wrap; row-gap: 10px; }
  .buy-page:not(.shop-page) .rv__stars { flex: none; }
  .buy-page:not(.shop-page) .rv__stars svg { flex: none; }
  .buy-page:not(.shop-page) .rv__count { white-space: nowrap; }
}
/* critic round 1 ---------------------------------------------------------------------------------------------------- */
/* the label's dash: the home page's 80 px, also when the label is pinned top left */
@media (min-width: 1101px), (min-width: 761px) and (min-aspect-ratio: 1/1) {
  /* the turn arrows sit just under the ring (the renders carry a margin round it), as on the home page */
  .buy-page:not(.shop-page) .pdp--v2 .pdp__turn { margin-top: calc(var(--lh) * -0.12); }
  /* the Flex-Mount card across the content width, in line with the reviews above it */
  .buy-page:not(.shop-page) .acc__card { grid-column: 1 / -1; grid-template-columns: 240px minmax(0, 1fr) auto; gap: 28px; padding: 16px 28px 16px 16px; border-radius: 24px; }
}
@media (min-width: 761px) and (max-width: 1100px) and (max-aspect-ratio: 1/1) {
  .buy-page:not(.shop-page) .pdp--v2 .pdp__turn { margin-top: -64px; }
  /* details on a portrait tablet: one column as on a phone, the photo under the box (not a small square beside it) */
  .buy-page:not(.shop-page) .details.details--v2 { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .buy-page:not(.shop-page) .details--v2 .details__photo { position: static; margin: 32px 0 0; aspect-ratio: 16 / 10; border-radius: 24px; }
}
/* a landscape tablet: the four hood cards one under the other, so their lines do not break every two words */
@media (min-width: 761px) and (max-width: 1100px) and (min-aspect-ratio: 1/1) {
  .buy-page:not(.shop-page) .hood__grid { grid-template-columns: 1fr; }
}
/* very wide screens: the home page's shared edge (darkroom.css pins the buy pages to 32 px) */
@media (min-width: 1600px) { body.buy-page:not(.shop-page) main { --gutter: max(32px, calc((100vw - 1536px) / 2)); } }
/* the label's dash at every size: the home page's 80 px, shorter only where the line would not fit (a phone) */
.buy-page:not(.shop-page) .pdp__head .void__index::after { flex: 0 1 auto; width: 80px; min-width: 12px; }
@media (max-width: 760px) { .buy-page:not(.shop-page) .pdp__head .void__index::after { flex: 1 1 0; width: auto; max-width: 80px; } }
/* ===================================================================== end of design pass: buy page */

/* design pass round 2 (18 Oct): overlaps */
/* the buy page's bar at the bottom of a phone: nearly solid, so the page never shows through it as a second layer of
   text while it scrolls beneath (the same 96% the phone header uses); its button at the 56 px standard */
@media (max-width: 760px) {
  .buybar { background: color-mix(in srgb, var(--paper) 96%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .buybar__btn { min-height: 56px; padding: 0 24px; font-size: 16px; }
}
/* a 320 px phone: the label over the lock ran 9 px past the screen (sideways scroll); it may use two lines there */
@media (max-width: 359px) {
  .pdp__head .void__index { white-space: normal; flex-wrap: wrap; letter-spacing: .08em; }
  .buy-page:not(.shop-page) .pdp__head .void__index::after { display: none; }
}
/* round 2 critic: the bar is solid and sits on a strip of the page colour down to the screen's edge, so no line of the
   page shows through it or peeks out below it; a little more room round its button */
@media (max-width: 760px) {
  .buybar { background: var(--paper); padding-block: 8px; }
  .buybar::before { content: ""; position: absolute; z-index: -1; left: -10px; right: -10px; top: -10px; bottom: calc(-60px - env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 1px solid rgba(32, 47, 48, .1); pointer-events: none; }
}
/* round 3: the page title in the shared heading size (it is clipped for screen readers only, so nothing visible moves) */
.pdp__fins { font-size: var(--fs-heading); line-height: 1; }

/* phone centring (18 Oct): on the narrowest phones the Pre-order button stays inside the buy box (it ran 12 px past
   the card's right padding at 320 px, so the row sat 20 px from the left edge and 8 px from the right) */
@media (max-width: 360px) {
  .buybox .qty-row { grid-template-columns: auto minmax(0, 1fr); }
  .buybox .qty-row .buy-btn { min-width: 0; padding-inline: 12px; }
}

/* phone centring (18 Oct): the lock still takes its render's own offset (--lx, --ly from buy.js), so the ring stands
   optically centred in the stage at every angle and width */
.lock3d__still { translate: calc(-50% + var(--lx, 0%)) calc(-50% + var(--ly, 0%)); }
/* the stage's keyboard focus (arrow keys turn the lock): drawn on the stage's own edge in the cards' shape (24 px
   corners, a faint teal wash), so it reads as the stage lighting up, evenly inset, not as a stray outline 8 px inside */
.lock3d:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; border-radius: 24px; background: rgba(29, 95, 99, .05); }