/* ============================================================================
   RARA · pdp.css · product detail page (Slice-4 beautification).
   Layout: framed bottle + long ficha on the left, a sticky buy rail on the right.
   Ficha tecnica regrouped into three designed chunks (Notas · Caracter · Formato)
   with a stacked notes pyramid and reveal-animated bars (scaleX, never width).
   The ONE ficha bar component (_bar.html / components.css) is reused; only its
   PDP-specific animation + richer fill are layered here (pdp.css loads last).
   Single accent = --burgundy; gold lives only on the Colección badge.
   ============================================================================ */

.crumb{font-size:11px;letter-spacing:.1em;color:var(--warm-grey);padding:16px 0 4px}
.crumb a{color:var(--warm-grey)}
.crumb a:hover{color:var(--burgundy)}

/* ---------- layout: media (left) + right rail (buy panel + acta) ----------
   The right rail spans both left-column rows so the sticky buy panel keeps its
   scroll runway, and the Acta de Verificacion sits beneath it — filling the
   right-column void and placing the certificate next to the buy decision. Source
   order gallery→rail→ficha linearizes cleanly on mobile: bottle, purchase + acta,
   then the deep-dive.
   SECTION-SPREAD FIX (owner 2K screenshots): with both rows auto, grid intrinsic
   sizing distributes the tall spanning rail's excess height across BOTH rows
   equally, inflating the media row past the gallery (measured +511..688px dead
   band before NOTAS at 2560w). grid-template-rows:auto 1fr excludes the
   flex-track-crossing rail from the media row's intrinsic size, so row 1 hugs
   the gallery and ALL rail excess resolves into the ficha row — left sections
   flow immediately (gallery → row-gap → ficha), and the fr row still grows to a
   longer ficha when the LEFT column is the long one (fr floors at content in an
   indefinite-height container). DOM order untouched. */
.pdp{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  grid-template-rows:auto 1fr;
  grid-template-areas:"media rail" "ficha rail";
  column-gap:56px;row-gap:44px;
  padding:20px 0 24px;
  align-items:start;
}
/* min-width:0 lets the grid children shrink below their content's min-content, so a
   nowrap descendant (the acta microprint strip) can't force horizontal overflow —
   the strip's own overflow:hidden then clips it. Required for the 375px no-scroll rule. */
.gallery{grid-area:media;min-width:0}
.pdp-rail{grid-area:rail;min-width:0}
.pdp-ficha{grid-area:ficha;min-width:0}

/* ---------- gallery: a matted frame around the bottle ----------
   The <img> carries .vt-product-image + --vt-name: product-<slug>, the shared
   name the catalog card sets on its image, so the bottle morphs card→detail via
   cross-document View Transitions (contract; must be exactly product-<slug>). */
.gallery{position:relative;margin:0;padding:12px;background:var(--brand-mat);border:1px solid var(--line-2);border-radius:6px}
.gallery .sku{position:absolute;top:24px;left:24px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--cream);background:rgba(89,28,42,.92);padding:6px 10px}
.gallery-mat{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:#FFFFFF;border:1px solid var(--line);border-radius:3px}
.gallery-mat img{width:100%;height:100%;object-fit:contain;background:#FFFFFF;display:block}

/* ---------- right rail: buy panel + the acta beneath it (desktop) ----------
   Owner ruling 2026-07-12: follow-scroll removed, panel is static in the rail.
   z-index + opaque page-bg kept so the acta still tucks cleanly beneath it.
   The acta's extra top gap clears the wax seal (which overhangs its top-right
   corner) and separates it from the buy panel. */
.pdp-buy{z-index:2;background:var(--bg)}
.pdp-rail .acta{margin-top:34px}
.buy-badges{display:flex;flex-wrap:wrap;gap:8px}
.pdp-buy .house{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--warm-grey);margin:16px 0 4px}
.pdp-buy h1{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4vw,46px);line-height:1.02;letter-spacing:-.01em;margin:2px 0 10px}
.buy-conc{font-size:12px;letter-spacing:.04em;color:var(--warm-grey)}
.pdp .price{font-family:var(--serif);font-size:32px;margin:18px 0 2px}
.pdp .msi{font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:20px}
/* ---------- compare-at (owner directive 2026-07-07): muted was-price + burgundy
   save chip, shown only when the selected size has an anchor above its live price
   (Alpine x-show="compare > price"). Achromatic canvas: existing tokens only. ---- */
.pdp .price-was{font-family:var(--serif);font-size:20px;color:var(--warm-grey);margin-right:10px;text-decoration:line-through;text-decoration-thickness:1px}
.pdp .price-save{display:inline-block;margin-left:10px;padding:3px 9px;font-size:11px;letter-spacing:.06em;line-height:1.4;color:var(--cream);background:var(--burgundy);vertical-align:3px;white-space:nowrap}

/* size selector */
.section-label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin:8px 0 2px}
.sizes{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 18px}
.sizes button{border:1px solid var(--line-2);background:none;padding:11px 18px;font-family:var(--mono);font-size:13px;cursor:pointer;min-height:44px;color:var(--ink);transition:border-color var(--dur-fast,.2s) var(--ease-out,ease),background var(--dur-fast,.2s) var(--ease-out,ease)}
.sizes button:hover{border-color:var(--burgundy)}
.sizes button[aria-pressed=true]{border-color:var(--burgundy);background:var(--burgundy);color:var(--cream)}
/* Non-STANDARD variant kind chip (tester / limited edition), owner point 6. */
.sizes button .opt-kind{display:block;font-size:9px;letter-spacing:.04em;text-transform:uppercase;opacity:.7;margin-top:2px}

/* ---------- per-size availability (honest numbers law: real stock_qty only) ----------
   Sold-out size buttons stay clickable (cart semantics unchanged — display only):
   dashed hairline + greyed label + an "Agotado/Sold out" sub-chip; the chip
   inherits cream when the sold-out size is the selected (burgundy) one. The
   .size-stock line under the selector is Alpine-reactive off the same per-button
   state as price (stock:N) and renders the REAL count — burgundy emphasis only
   when the real number is 0..3, never an invented threshold. */
.sizes button.is-soldout{border-style:dashed;color:var(--warm-grey)}
.sizes button.is-soldout:hover{border-color:var(--burgundy)}
.sizes button .opt-stock{display:block;font-size:9px;letter-spacing:.04em;text-transform:uppercase;margin-top:2px;color:var(--burgundy)}
.sizes button[aria-pressed=true] .opt-stock{color:inherit}
.size-stock{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);margin:-8px 0 14px}
.size-stock.is-low,.size-stock.is-out{color:var(--burgundy)}

/* add-to-cart with loading / added / error states (Alpine toggles the classes) */
.buy-btn{width:100%;justify-content:space-between;margin:6px 0 12px}
.buy-btn .buy-icon{font-size:16px;line-height:1}
.buy-btn.is-loading{opacity:.9;cursor:progress;animation:buyPulse 1s var(--ease-out) infinite}
.buy-btn.is-added{background:var(--good)}
.buy-btn.is-added:hover{background:var(--good)}
.buy-btn.is-error{animation:buyShake .4s var(--ease-out) 1}
@keyframes buyPulse{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes buyShake{10%,90%{transform:translateX(-1px)}30%,70%{transform:translateX(2px)}50%{transform:translateX(-2px)}}
.buy-error{display:flex;align-items:baseline;gap:8px;margin:-4px 0 12px;font-size:12px;letter-spacing:.01em;color:var(--burgundy)}
.buy-error::before{content:"!";display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;font-family:var(--mono);font-size:11px;color:var(--cream);background:var(--burgundy)}
.buy-ship{font-size:11px;letter-spacing:.02em;color:var(--warm-grey)}

/* ---------- ficha chunks: Notas · Carácter · Formato ---------- */
.pdp-ficha{margin-top:4px}
.chunk{margin:0}
.chunk-h{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin:0 0 18px}
.chunk-h::before{content:"";width:18px;height:2px;background:var(--burgundy)}
.chunk-lead{color:var(--muted);font-size:15px;margin:-4px 0 18px}
.chunk-rule{border:0;border-top:1px solid var(--line);margin:34px 0}

/* ---------- "De la misma casa" (casa8) ----------
   Moved from BELOW the .pdp grid into the ficha column's tail (owner 2026-07-14
   spacing blocker): below the grid it stranded the rail-tail void (measured
   1557..1784px of blank left column at 1366..2560w) and started ~1.6k px after
   the last left-column content. As the ficha's last chunk it fills that band.
   The .grid card idiom stays but is pinned 2-up: the base 4..7-up tracks assume
   wrap width, not a ~50% column — and with `related` capped at 4 same-house
   cards, 2-up renders full rows (2x1 or 2x2), never orphan tracks. ≤1000px the
   pdp is single-column full-width and the same 2-up gives the bigger-card read
   the owner chose for the interesa rail / home showcase. */
.pdp-casa .grid{grid-template-columns:repeat(2,1fr)}

.sub-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--warm-grey);margin:24px 0 12px}
/* When-to-wear honesty qualifier: this block is an editorial estimate from the
   accords, not community data (honesty rule) — a quiet mono note under the title. */
.ficha-when-note{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--muted);margin:-6px 0 14px}

/* ---------- the notes pyramid: 3 stacked tiers, narrowest on top ----------
   Pure CSS: the stepped max-widths (centered) form the pyramid silhouette; a
   faint spine shows only in the gaps between the opaque tier bands. NOT a table. */
.pyr-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--warm-grey);margin:2px 0 12px}
.pyramid{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px}
.pyramid::before{content:"";position:absolute;top:8px;bottom:8px;left:50%;width:1px;transform:translateX(-.5px);background:var(--line-2)}
.pyr-tier{position:relative;width:100%;display:flex;align-items:baseline;gap:16px;padding:15px 22px;background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--burgundy)}
.pyr-tier--1{max-width:64%}
.pyr-tier--2{max-width:82%}
.pyr-tier--3{max-width:100%}
.pyr-k{flex:0 0 auto;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--burgundy)}
.pyr-v{font-family:var(--serif);font-size:16px;line-height:1.3;color:var(--ink)}

/* ---------- house note (authored longevity / sillage, distinct from the bars) ---------- */
.house-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-top:16px}
.house-note-k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--warm-grey)}
.house-note-v{font-family:var(--serif);font-size:15px;color:var(--ink)}

/* ---------- Formato: a designed definition grid (no hairline row-per-spec table) ---------- */
.formato{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin:0}
.fmt{display:flex;flex-direction:column;gap:5px}
.fmt dt{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--warm-grey)}
.fmt dd{margin:0;font-family:var(--serif);font-size:16px;color:var(--ink)}
.fmt dd.mono{font-family:var(--mono);font-size:13px;letter-spacing:.04em}

/* ---------- Presentacion: rail format and reference facts ---------- */
.pdp-presenta{margin-top:34px}
.presenta-hero{display:flex;align-items:center;gap:20px;margin:6px 0 22px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.presenta-flacon{flex:0 0 auto;display:block}
.presenta-figure{display:flex;flex-direction:column;gap:4px;min-width:0}
.presenta-size{font-family:var(--serif);font-size:38px;line-height:1;color:var(--ink)}
.presenta-cap{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-grey)}

.pdp-desc{color:var(--muted);font-size:15px;line-height:1.65;margin-top:28px}   /* justify via .prose-just (components.css) */

/* ---------- bars: richer fill + reveal-driven scaleX (transform only, never width) ----------
   _bar.html sets the resting length via inline width:<pct>%; the fill starts
   scaled to 0 and sweeps to full when its .fbars group reveals. A per-bar delay
   staggers the sweep. The group's own [data-reveal] is softened to an opacity-only
   fade so it does not also translate while the bars fill. */
.pdp .fbars[data-reveal]{transform:none}
.pdp .fbar{grid-template-columns:104px 1fr auto;column-gap:16px}
.pdp .fbar-track{height:9px;background:var(--cream-2)}
/* Gold retired from meters (design-lead WCAG 1.4.11 ruling): the default fill is the
   brand accent for non-semantic intensity bars (Duración/Estela); accord/season/
   day-night bars override this inline with their semantic family/season hue. */
.pdp .fbar-fill{background:var(--burgundy);transform-origin:left center;transform:scaleX(0);transition:transform var(--dur-slow) var(--ease-out)}
.pdp .fbars.is-revealed .fbar-fill{transform:scaleX(1)}
.pdp .fbars .fbar:nth-child(1) .fbar-fill{transition-delay:0ms}
.pdp .fbars .fbar:nth-child(2) .fbar-fill{transition-delay:70ms}
.pdp .fbars .fbar:nth-child(3) .fbar-fill{transition-delay:140ms}
.pdp .fbars .fbar:nth-child(4) .fbar-fill{transition-delay:210ms}
.pdp .fbars .fbar:nth-child(5) .fbar-fill{transition-delay:280ms}
.pdp .fbars .fbar:nth-child(n+6) .fbar-fill{transition-delay:350ms}
.pdp .fbar-trail{font-family:var(--serif);font-size:15px;color:var(--burgundy)}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  /* single column: drop the two-row template (rows are the 3 stacked areas) */
  .pdp{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"media" "rail" "ficha";column-gap:0;row-gap:32px}
  .pdp-buy{position:static;z-index:auto}
  .pdp-rail .acta{margin-top:24px}
}
@media(max-width:600px){
  .pyr-tier--1,.pyr-tier--2,.pyr-tier--3{max-width:100%}
  .pyramid::before{display:none}
  .formato{grid-template-columns:1fr;gap:16px}
  .pdp .fbar{grid-template-columns:84px 1fr auto}
}

/* ---------- wide-screen tiers (Slice · widescreen pass) ----------
   The .pdp two-column ratio (1.05fr 1fr) already scales with --wrap, and the
   gallery/rail legitimately benefit from the extra room (bigger bottle photo,
   more breathing room round the buy panel). The ONE thing that must NOT scale
   unbounded is running prose: pdp-desc / chunk-lead / the scent-story paragraphs
   had no measure cap at all, so left alone they'd run 150+ characters wide at
   3840px. Cap them to a readable ~66ch and let the freed column width become
   intentional whitespace instead. column-gap widens in step with --wrap so the
   two-column composition still reads as considered, not just "wider". Guarded
   to min-width:1920px — the <=1600px PDP is byte-for-byte unchanged. */
@media(min-width:1920px){
  .pdp{column-gap:72px}
  .pdp-desc,.chunk-lead,.pdp-story-body p{max-width:66ch}
}
@media(min-width:2560px){
  .pdp{column-gap:88px}
}

/* ---------- reduced motion: bars shown at full, no button motion ----------
   motion.css resets [data-reveal] globally but not the fill's scaleX or the buy
   states, so neutralize them here (bars would otherwise stay at scaleX(0)). */
@media(prefers-reduced-motion:reduce){
  .pdp .fbar-fill{transform:scaleX(1)!important;transition:none!important}
  .buy-btn.is-loading,.buy-btn.is-error{animation:none!important}
}

/* ============================================================================
   Slice 5 · gallery reel (cover + ordered ProductImages) + coming-soon buy rail.
   Only transform/opacity animate; single accent = --burgundy; AA holds on every
   text/bg pair. prefers-reduced-motion neutralizes the slide (see bottom).
   ============================================================================ */

/* ---------- reel carousel ---------- */
.gallery[tabindex]:focus-visible{outline:2px solid var(--burgundy);outline-offset:3px}
.reel-mat{position:relative}
.reel-track{display:flex;height:100%;width:100%;
  transition:transform var(--dur-mid) var(--ease-out);will-change:transform}
.reel-img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;background:#FFFFFF;display:block;user-select:none}

/* nav arrows: over the mat on the single accent. Hidden until hover/focus on
   fine pointers; always shown on touch (no hover) and under reduced motion. */
.reel-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:0;cursor:pointer;font-size:26px;line-height:1;color:var(--cream);
  background:rgba(89,28,42,.86);opacity:0;
  transition:opacity var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.reel-nav:hover{background:var(--burgundy)}
.reel-nav:focus-visible{opacity:1;outline:2px solid var(--cream);outline-offset:-4px}
.gallery.has-reel:hover .reel-nav,.gallery.has-reel:focus-within .reel-nav{opacity:1}
.reel-prev{left:14px}
.reel-next{right:14px}
@media(hover:none){.reel-nav{opacity:1}}

.reel-counter{position:absolute;top:24px;right:24px;z-index:2;font-family:var(--mono);
  font-size:11px;letter-spacing:.08em;color:var(--cream);background:rgba(89,28,42,.86);padding:5px 9px}
.reel-dots{position:absolute;left:0;right:0;bottom:16px;z-index:2;
  display:flex;justify-content:center;gap:8px}
.reel-dot{width:9px;height:9px;padding:0;border:1px solid var(--cream);background:transparent;
  border-radius:50%;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.reel-dot.is-on{background:var(--cream)}
.reel-dot:hover{transform:scale(1.2)}
.reel-dot:focus-visible{outline:2px solid var(--cream);outline-offset:2px}

/* ---------- tagline (render-when-present, under the title) ---------- */
.pdp-tagline{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.35;
  color:var(--muted);margin:0 0 10px}

/* ---------- coming-soon rail: availability block + no-payment interest form ---------- */
.badge-soon{border-color:var(--burgundy);background:var(--burgundy);color:var(--cream)}
.preorder-block{margin:18px 0 8px;padding:16px 18px;background:var(--surface);
  border:1px solid var(--line-2);border-left:2px solid var(--burgundy)}
.preorder-price{font-family:var(--serif);font-size:30px;line-height:1.15;margin:8px 0 10px;color:var(--ink)}
.preorder-price .badge{vertical-align:5px;margin-left:8px}
.preorder-price-label{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--warm-grey);margin-bottom:3px}
.preorder-note{font-size:13px;line-height:1.45;color:var(--muted);margin:8px 0}
.preorder-disclosure{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--warm-grey);margin-top:-4px}
.preorder-block .buy-btn{margin-top:14px}
.preorder-title{font-family:var(--serif);font-size:19px;line-height:1.15;color:var(--ink);margin:0 0 8px}
.preorder-discount-note{font-size:12px;line-height:1.4;color:var(--burgundy);margin:2px 0 8px}
.preorder-rail{display:flex;align-items:flex-end;gap:6px}
.opt{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:7px;background:transparent;border:0;cursor:pointer;padding:8px 2px 7px;border-radius:3px;position:relative;transition:background .14s ease}
.opt:hover{background:var(--surface)}
.opt .flac{display:flex;align-items:flex-end;height:62px}
.opt .flac svg{display:block}
.opt .flac img{max-width:38px;max-height:100%;object-fit:contain;display:block}
.opt .stroke{stroke:var(--muted)}
.opt .fillb{fill:transparent}
.opt .ml{font:600 12px/1 var(--mono);color:var(--ink);letter-spacing:.02em}
.opt .sub{font:500 9.5px/1 var(--mono);color:var(--warm-grey);letter-spacing:.08em;text-transform:uppercase}
.opt[aria-pressed="true"]{background:var(--sel,#FBF4F2)}
.opt[aria-pressed="true"] .stroke{stroke:var(--burgundy)}
.opt[aria-pressed="true"] .fillb{fill:var(--burgundy);fill-opacity:.07}
.opt[aria-pressed="true"] .ml{color:var(--burgundy)}
.opt[aria-pressed="true"]::after{content:"";position:absolute;left:14%;right:14%;bottom:0;height:2px;background:var(--burgundy);border-radius:2px}
.opt .tag{position:absolute;top:2px;right:6px;font:600 8.5px/1 var(--mono);letter-spacing:.04em;color:#fff;background:var(--burgundy);border-radius:2px;padding:2px 4px}
.opt:focus-visible{outline:2px solid var(--burgundy);outline-offset:2px}
.baseline{height:1px;background:var(--line);margin:2px 2px 0}
.preorder-pick-h{display:flex;justify-content:space-between;align-items:baseline}
.preorder-pick-hint{color:var(--warm-grey);font-weight:500;letter-spacing:.02em;text-transform:none}
@media (prefers-reduced-motion:reduce){.opt{transition:none}}
.soon-avail{margin:18px 0 6px;padding:15px 18px;background:var(--surface);
  border:1px solid var(--line-2);border-left:2px solid var(--burgundy)}
.soon-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:4px 0}
.soon-row + .soon-row{border-top:1px solid var(--line);margin-top:6px;padding-top:12px}
.soon-k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--warm-grey);flex:0 0 auto}
.soon-v{font-family:var(--serif);font-size:18px;color:var(--ink)}
.soon-note{flex-basis:100%;font-size:11px;color:var(--warm-grey);letter-spacing:.01em}
.soon-form{margin-top:22px;border-top:1px solid var(--line);padding-top:20px}
.soon-title{font-family:var(--serif);font-size:22px;line-height:1.1;margin-bottom:4px}
.soon-sub{color:var(--muted);font-size:14px;margin:0 0 16px}
.soon-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.soon-lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-grey)}
.soon-input{font-family:var(--sans);font-size:15px;padding:13px 14px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink);min-height:48px}
.soon-input:focus{outline:2px solid var(--burgundy);outline-offset:-1px;border-color:var(--burgundy)}
.soon-input[aria-invalid=true]{border-color:var(--burgundy)}
.soon-err{font-size:12px;color:var(--burgundy);margin:0}
.soon-btn{width:100%;justify-content:center;margin-top:4px}
.soon-reveal-btn{width:100%;justify-content:center;min-height:44px;cursor:pointer}
.soon-reveal-btn:hover{background:var(--cream-2);border-color:var(--burgundy)}
.soon-dupe{margin:12px 0 0;font-size:13px;color:var(--muted)}
.soon-nopay{margin:12px 0 0;font-size:11px;letter-spacing:.02em;color:var(--warm-grey)}

/* Pre-order PDP: the notify option is the SUBORDINATE alternative to the paid
   "Pagar por adelantado" CTA (design ruling) — a hairline tile with an OUTLINE submit,
   never a second filled burgundy CTA (scarcity law: one filled CTA per screen). */
.soon-form.is-preorder-alt{margin-top:20px;border-top:0;border:1px solid var(--line);padding:16px 18px}
.soon-form.is-preorder-alt .soon-title{font-size:16px}
.soon-form.is-preorder-alt .soon-sub{font-size:13px;margin-bottom:12px}
.soon-form.is-preorder-alt .soon-btn{background:transparent;color:var(--burgundy);border:1px solid var(--line-2);min-height:44px}
.soon-form.is-preorder-alt .soon-btn:hover{background:var(--cream-2);border-color:var(--burgundy)}

.soon-ok{display:flex;align-items:center;gap:14px;margin-top:22px;padding:22px;
  background:var(--surface);border:1px solid var(--line-2);border-left:2px solid var(--good)}
.soon-ok-mark{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--good);color:var(--cream);font-size:18px}
.soon-ok p{margin:0;font-size:15px;color:var(--ink)}

/* honeypot: off-screen, NOT display:none (bots skip type=hidden / display:none) */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- scent story block (render-when-present) ---------- */
.pdp-story-body p{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 12px}   /* justify inherited from .prose-just on the container */
.pdp-story-body p:last-child{margin-bottom:0}

/* reduced motion: no slide, arrows always visible (no hover-reveal reliance) */
@media(prefers-reduced-motion:reduce){
  .reel-track{transition:none!important}
  .reel-nav{opacity:1}
  .reel-dot:hover{transform:none}
}

/* ============================================================================
   LAYOUT-DENSITY prototype v1 · rail dossier — fills the desktop right-column void
   beneath the acta with the REAL verification process, framed as certificate
   furniture beside the buy decision. Hairline panel (mirrors the acta paper),
   burgundy step markers, mono eyebrow head. NO gold (retired); tokens only; AA holds.
   ============================================================================ */
.pdp-dossier{margin-top:24px;padding:18px 20px 4px;
  background:var(--surface);border:1px solid var(--line);border-radius:6px}
.pdp-dossier-h{margin:0 0 6px}
.pdp-dossier-lead{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 16px;max-width:36ch}
.pdp-dossier-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.pdp-dossier-steps li{display:flex;gap:14px;align-items:baseline;padding-top:14px;border-top:1px solid var(--line)}
.pdp-dossier-steps li:first-child{padding-top:0;border-top:0}
.pdp-dossier-n{flex:0 0 auto;font-size:12px;letter-spacing:.12em;color:var(--burgundy)}
.pdp-dossier-b h3{font-family:var(--serif);font-weight:500;font-size:16px;line-height:1.2;margin:0 0 4px;color:var(--ink)}
.pdp-dossier-b p{color:var(--muted);font-size:13px;line-height:1.5;margin:0}

/* ============================================================================
   PDP right-column dead-space fill (owner ruling) · community rating badge +
   compact "Te puede interesar" rail, both render-when-present. Single accent
   = --burgundy; no gold; reuses existing tokens/typography scale only.
   ============================================================================ */

/* ---------- community rating badge ----------
   A quiet hairline row (not a filled chip) beneath the buy box/acta — reads as a
   trust signal, not decoration. Coverage is a small subset of the catalog, so
   most PDPs render unchanged (the template gates on p.rating_count). */
.pdp-rating{display:flex;align-items:baseline;gap:8px;margin-top:20px;padding:11px 14px;
  background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--burgundy)}
.pdp-rating-star{color:var(--burgundy);font-size:15px;line-height:1}
.pdp-rating-value{font-family:var(--serif);font-size:17px;color:var(--ink)}
.pdp-rating-sep{color:var(--line-2)}
.pdp-rating-count{font-size:12px;letter-spacing:.01em;color:var(--muted)}
/* Source credit under the community rating (catalog/_community_attribution.html):
   one quiet hairline, aligned to the badge's left edge — present, never loud. */
.community-attrib{margin-top:6px;font-size:10.5px;letter-spacing:.05em;color:var(--muted);opacity:.9}

/* ---------- "Te puede interesar" — scent-similarity recommendation cards ----------
   Owner directive 2026-07-13: BIGGER, proper cards with larger imagery, ranked by
   scent similarity (catalog.merchandising.related_products) — not the old thin
   thumbnail rows. A 2-up grid of compact vertical cards echoing the catalog card
   idiom (_card.html): image plate on top, mono house eyebrow, serif name, mono
   price. Collapses to one column only when the rail is very narrow. Still renders
   LAST in the right column (owner law) and keeps cover-or-fallback (NO-IMAGELESS
   LAW). */
.pdp-rail-related{margin-top:36px}
.pdp-rail-related-h{margin:0 0 18px}
.pdp-rail-related-grid{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
.pdp-rail-related-cell{min-width:0}
.pdp-rec-card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.pdp-rec-ph{position:relative;display:block;aspect-ratio:3/4;
  background:linear-gradient(150deg,var(--cream-2),var(--ph-1));
  border:1px solid var(--line);border-radius:4px;overflow:hidden}
/* higher specificity than the components.css `.card .ph img` fallback rule */
.pdp-rec-ph img{width:100%;height:100%;object-fit:contain;background:#FFFFFF;display:block}
.pdp-rec-soon-chip{position:absolute;top:8px;left:8px;z-index:1;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream);background:rgba(89,28,42,.92);padding:3px 7px;border-radius:2px}
.pdp-rec-house{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--warm-grey);margin:12px 0 4px}
.pdp-rec-name{font-family:var(--serif);font-size:18px;line-height:1.16;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pdp-rec-card:hover .pdp-rec-name{color:var(--burgundy)}
.pdp-rec-price{font-size:12.5px;color:var(--muted);margin-top:6px}
@media(max-width:380px){
  .pdp-rail-related-grid{grid-template-columns:1fr}
}