/* ============================================================
   MERCH PDP — v13 LIGHT register (rhinory/merch-pdp block).
   Ported from prototypes/13/17-merch-pdp.html (view-source-is-contract).
   Brief: docs/briefs/2026-08-15-product-variant-selector.md (S1 — host
   surface only; the `.pv` variant-selector component ships in S2 from
   prototypes/13/variant-selector.css and is deliberately absent here).

   SCOPING DISCIPLINE (guardrail, mirrors wine-pdp.css): the prototype
   scopes every light token to `.mpdp13`, NOT :root, so the light register
   never re-skins the dark site chrome (nav / mega-menu / campaign bar /
   footer). This block's own wrapper — `.rhinory-merch-pdp`, emitted by
   get_block_wrapper_attributes() in render.php — IS that scope boundary;
   there is no separate `.mpdp13` class. Generic names that collide with
   the dark chrome's globals in style.css (`.wrap`, `.eyebrow`, `.section`)
   keep the prototype's `.wp-wrap` / `.wp-eyebrow` / `.wp-sec` renames.

   TOKEN SELF-SUFFICIENCY: the prototype inherits `--paper` / `--card` /
   `--ink-warm` / `--rhino-warm` / `--type-*` from `.light-warm` in
   v13-shared.css, which this theme does NOT ship (`--type-*` is defined
   nowhere in style.css). So the block scope declares the full set locally,
   exactly as .rhinory-wine-pdp does — values copied from v13-shared.css
   §type-scale and the prototype's own .mpdp13 block, not re-derived.

   Fonts: Cormorant Garamond (display) / Josefin Sans (labels) / Lora
   (body) are already enqueued site-wide via RHINORY_V4_FONTS_URL.

   Section inventory (S1): breadcrumb -> hero (shot + buy row) ->
   description -> conservation closer.
   ============================================================ */

.rhinory-merch-pdp{
  /* light-warm register (prototype .light-warm + .mpdp13 locals) */
  --paper:#FBF7EE;
  --card:#F4EEE0;
  --card-2:#EAE1CE;
  --ink-warm:#2D2926;
  --ink-warm-2:#3A352F;
  --rhino-warm:#717271;
  --rule-warm:rgba(45,41,38,0.10);
  --rule-warm-2:rgba(45,41,38,0.18);
  --burgundy:#520000;
  --burgundy-2:#3d0000;
  --rule-burg:rgba(82,0,0,0.24);
  --acacia:#B97727;
  /* type scale — v13-shared.css :root, copied because the theme has none */
  --type-hero:clamp(46px,6vw,84px);
  --type-h2:clamp(40px,5.4vw,76px);
  --type-h3:clamp(26px,2.6vw,34px);
  --type-lede:18px;
  --type-body-editorial:18px;
  --type-eyebrow:11px;
  --ff-display:"Cormorant Garamond",Georgia,serif;
  --ff-label:"Josefin Sans",system-ui,sans-serif;
  --ff-body:"Lora",Georgia,serif;
  display:block;
  background:var(--paper);
  color:var(--ink-warm);
  font-family:var(--ff-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.rhinory-merch-pdp *{ box-sizing:border-box }
.rhinory-merch-pdp a{ color:var(--burgundy); text-decoration:none }
.rhinory-merch-pdp a:hover{ color:var(--burgundy-2) }
.rhinory-merch-pdp .wp-wrap{ width:100%; max-width:1280px; margin:0 auto; padding:0 56px }
.rhinory-merch-pdp .wp-eyebrow{
  font-family:var(--ff-label); font-size:var(--type-eyebrow); font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--burgundy);
  display:inline-flex; align-items:center; gap:12px; margin:0;
}
.rhinory-merch-pdp .wp-eyebrow::before{ content:""; width:24px; height:1px; background:var(--burgundy) }
.rhinory-merch-pdp section{ scroll-margin-top:96px }

/* ---- breadcrumb ---- */
.rhinory-merch-pdp .wp-crumb{ padding:30px 0 0 0 }
.rhinory-merch-pdp .wp-crumb-row{ display:flex; flex-wrap:wrap; align-items:center; gap:11px; font-family:var(--ff-label); font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase }
.rhinory-merch-pdp .wp-crumb-row a{ color:var(--ink-warm-2); transition:color .2s }
.rhinory-merch-pdp .wp-crumb-row a:hover{ color:var(--burgundy) }
.rhinory-merch-pdp .wp-crumb-row .sep{ color:var(--rule-warm-2) }
.rhinory-merch-pdp .wp-crumb-row .current{ color:var(--burgundy) }

/* ---- HERO — product shot left / details right ---- */
.rhinory-merch-pdp .hp-hero{ padding:56px 0 96px 0; border-bottom:1px solid var(--rule-warm-2) }
.rhinory-merch-pdp .hp-grid{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:72px; align-items:stretch }
.rhinory-merch-pdp .hp-shot{ position:relative; overflow:hidden; margin:0; border:1px solid var(--rule-warm-2); background:var(--card); min-height:640px }
.rhinory-merch-pdp .hp-shot::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--burgundy); opacity:.5 }
.rhinory-merch-pdp .hp-shot picture{ position:absolute; inset:0; display:block }
.rhinory-merch-pdp .hp-shot img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block }
.rhinory-merch-pdp .hp-detail{ display:flex; flex-direction:column; padding-top:6px }
/* No photograph: no figure, the detail column takes the row (render.php is-no-shot). */
.rhinory-merch-pdp .hp-grid.is-no-shot{ grid-template-columns:minmax(0,1fr); max-width:760px }
.rhinory-merch-pdp .hp-name{ font-family:var(--ff-display); font-weight:500; font-size:var(--type-hero); line-height:0.96; letter-spacing:-0.008em; color:var(--ink-warm); margin:14px 0 0 0 }
/* Commerce7 titles run long ("2024 Texas The Horn Red Blend Mulled Wine Spice
   Gift Set"). The display size steps down in two bands and the wrap is balanced,
   so a long name lands in two lines instead of three or four. Which band applies
   is decided from the RENDERED LINE COUNT in blocks/merch-pdp/view.js
   § bootTitleFit — a short name can still wrap to three lines at hero size, so
   character count picked the wrong band.
   Ported from prototypes/13/17-merch-pdp.html § .hp-name.is-long / .is-xlong. */
.rhinory-merch-pdp .hp-name{ text-wrap:balance }
.rhinory-merch-pdp .hp-name.is-long{ font-size:calc(var(--type-hero) * 0.80); line-height:1.0 }
.rhinory-merch-pdp .hp-name.is-xlong{ font-size:calc(var(--type-hero) * 0.64); line-height:1.04 }
.rhinory-merch-pdp .hp-teaser{ font-family:var(--ff-body); font-size:var(--type-body-editorial); line-height:1.62; color:var(--ink-warm-2); margin:26px 0 0 0; max-width:56ch }

/* ---- buy row (shared with the wine PDP, verbatim grammar) ---- */
.rhinory-merch-pdp .hp-buy{ margin-top:34px; padding-top:30px; border-top:1px solid var(--rule-warm-2); display:flex; flex-wrap:wrap; align-items:center; gap:26px 28px }
.rhinory-merch-pdp .hp-price{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.rhinory-merch-pdp .hp-price .amt{ font-family:var(--ff-display); font-weight:500; font-size:58px; line-height:1; letter-spacing:-0.01em; color:var(--ink-warm); font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1 }
.rhinory-merch-pdp .hp-actions{ display:flex; flex-wrap:wrap; gap:12px; width:100%; margin-top:6px }
.rhinory-merch-pdp .hp-add{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px; min-height:52px; background:var(--burgundy); color:var(--paper);
  font-family:var(--ff-label); font-size:12px; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; border:1px solid var(--burgundy); border-radius:2px;
  cursor:pointer; box-shadow:0 14px 30px -18px rgba(82,0,0,0.55);
  transition:background .25s, color .25s, transform .2s; flex:1 1 auto;
}
.rhinory-merch-pdp .hp-add .arr{ transition:transform .25s }
.rhinory-merch-pdp .hp-add:hover{ background:var(--burgundy-2); transform:translateY(-1px) }
.rhinory-merch-pdp .hp-add:hover .arr{ transform:translateX(4px) }
.rhinory-merch-pdp .hp-add[disabled]{ background:var(--card); color:var(--rhino-warm); border-color:var(--rule-warm-2); box-shadow:none; cursor:not-allowed }
.rhinory-merch-pdp .hp-add[disabled]:hover{ background:var(--card); transform:none }
.rhinory-merch-pdp .hp-sec{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:16px 24px; min-height:52px; background:none; color:var(--ink-warm-2);
  font-family:var(--ff-label); font-size:11px; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; border:1px solid var(--rule-warm-2); border-radius:2px; cursor:pointer;
}
.rhinory-merch-pdp .hp-sec:hover{ border-color:var(--burgundy); color:var(--burgundy) }
.rhinory-merch-pdp .hp-sec .ic{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }

/* ---- winery/add-to-cart atom: the buy slot on a Club-gated product ----
   Brief docs/briefs/2026-10-21-pdp-gated-member-buy.md. render.php hands a
   gated product's buy slot to the plugin atom, which ships every state in the
   server HTML (entitled Add to Bag and not-eligible both `hidden`, Sign in
   visible) and flips them per viewer. Dissolve the atom's grid wrapper so its
   controls are direct flex participants in .hp-actions beside the secondary
   link, exactly as the wine PDP does, and paint them in the .hp-add grammar:
   the guest's Sign in and the member's Add to Bag are the row's one solid
   burgundy action, the not-eligible "Members exclusive" is the disabled
   .hp-add. No [hidden] guard here: the plugin's
   `.winery-add-to-cart [hidden]{ display:none !important }` already beats the
   display below. The atom emits plain-text labels, so the arrow is a ::after.
   The sign-in rules carry three classes to out-rank both the plugin's
   two-class link reset and this page's `a:hover` colour.
   Contract: ~/dev/wordpress-for-wineries/docs/contract.md § Storefront display blocks — winery/add-to-cart. */
.rhinory-merch-pdp .winery-add-to-cart{ display:contents }
.rhinory-merch-pdp .winery-add-to-cart__button,
.rhinory-merch-pdp .winery-add-to-cart .winery-add-to-cart__sign-in,
.rhinory-merch-pdp .winery-add-to-cart__members-only{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; box-sizing:border-box;
  padding:16px 30px; min-height:52px; background:var(--burgundy); color:var(--paper);
  font-family:var(--ff-label); font-size:12px; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; text-decoration:none; border:1px solid var(--burgundy); border-radius:2px;
  cursor:pointer; box-shadow:0 14px 30px -18px rgba(82,0,0,0.55); opacity:1;
  transition:background .25s, color .25s, transform .2s; flex:1 1 auto;
}
.rhinory-merch-pdp .winery-add-to-cart__button::after,
.rhinory-merch-pdp .winery-add-to-cart .winery-add-to-cart__sign-in::after{ content:"\2192"; transition:transform .25s }
.rhinory-merch-pdp .winery-add-to-cart__button:hover,
.rhinory-merch-pdp .winery-add-to-cart .winery-add-to-cart__sign-in:hover{ background:var(--burgundy-2); color:var(--paper); transform:translateY(-1px) }
.rhinory-merch-pdp .winery-add-to-cart__button:hover::after,
.rhinory-merch-pdp .winery-add-to-cart .winery-add-to-cart__sign-in:hover::after{ transform:translateX(4px) }
.rhinory-merch-pdp .winery-add-to-cart__button:disabled,
.rhinory-merch-pdp .winery-add-to-cart__members-only{ background:var(--card); color:var(--rhino-warm); border-color:var(--rule-warm-2); box-shadow:none; cursor:not-allowed }
.rhinory-merch-pdp .winery-add-to-cart__button:disabled::after{ content:none }
.rhinory-merch-pdp .winery-add-to-cart__button:disabled:hover{ background:var(--card); color:var(--rhino-warm); transform:none }
/* The cart proxy's refusal (a member of a club this product does not list) and
   the multi-variant prompt each take a full-width row under the buttons;
   `order` moves them past the secondary link too, which the atom's source order
   would otherwise push onto a row of its own. The plugin gives the message no
   colour of its own; it is said in the page's accent. Empty, the plugin
   collapses it (`:empty{ display:none }`). */
.rhinory-merch-pdp .winery-add-to-cart__message,
.rhinory-merch-pdp .winery-add-to-cart__gate-hint{ flex:0 0 100%; order:1; margin:0; font-family:var(--ff-body); font-size:14px; line-height:1.55 }
.rhinory-merch-pdp .winery-add-to-cart__message{ color:var(--burgundy) }
.rhinory-merch-pdp .winery-add-to-cart__gate-hint{ color:var(--rhino-warm) }
/* Quantity stepper (plugin v0.181.0 showQuantity), prototypes/13/17-merch-pdp.html
   § 11-03 pass .hp-qty: before Add to Bag in the row; at phone width the two
   share a line. */
.rhinory-merch-pdp .winery-add-to-cart__quantity{ display:inline-flex; align-items:stretch; flex:none; min-height:52px; border:1px solid var(--rule-warm-2); border-radius:2px; background:var(--paper); overflow:hidden }
.rhinory-merch-pdp .winery-add-to-cart__quantity-step{ width:44px; display:flex; align-items:center; justify-content:center; margin:0; padding:0; background:none; border:0; border-radius:0; color:var(--ink-warm-2); font-family:var(--ff-label); font-size:18px; line-height:1; cursor:pointer; transition:color .2s, background .2s, transform .12s }
.rhinory-merch-pdp .winery-add-to-cart__quantity-step:hover:not([aria-disabled="true"]){ color:var(--burgundy); background:rgba(82,0,0,0.05) }
.rhinory-merch-pdp .winery-add-to-cart__quantity-step:active:not([aria-disabled="true"]){ transform:scale(.94) }
.rhinory-merch-pdp .winery-add-to-cart__quantity-step[aria-disabled="true"]{ color:var(--rule-warm-2); cursor:default }
.rhinory-merch-pdp .winery-add-to-cart__quantity-step:focus-visible,
.rhinory-merch-pdp .winery-add-to-cart__quantity-input:focus-visible{ outline:2px solid var(--burgundy); outline-offset:-2px }
.rhinory-merch-pdp .winery-add-to-cart__quantity-input{ width:44px; min-width:0; margin:0; padding:0; border:0; border-inline:1px solid var(--rule-warm); border-radius:0; background:none; text-align:center; font-family:var(--ff-label); font-size:14px; font-weight:600; color:var(--ink-warm); font-variant-numeric:tabular-nums; -moz-appearance:textfield; appearance:textfield }
.rhinory-merch-pdp .winery-add-to-cart__quantity-input::-webkit-inner-spin-button,
.rhinory-merch-pdp .winery-add-to-cart__quantity-input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0 }
@media (max-width:560px){
  .rhinory-merch-pdp .hp-actions:has(.winery-add-to-cart__quantity){ flex-direction:row; flex-wrap:wrap }
  .rhinory-merch-pdp .hp-actions:has(.winery-add-to-cart__quantity) .winery-add-to-cart__button{ width:auto; flex:1 1 0; min-width:0 }
  .rhinory-merch-pdp .hp-actions:has(.winery-add-to-cart__quantity) .hp-sec{ width:100%; flex:1 1 100% }
}

/* ---- shared section shell ---- */
.rhinory-merch-pdp .wp-sec{ padding:104px 0; border-bottom:1px solid var(--rule-warm-2) }
.rhinory-merch-pdp .wp-sec.alt{ background:var(--card) }
.rhinory-merch-pdp .wp-head{ max-width:920px }
.rhinory-merch-pdp .wp-title{ font-family:var(--ff-display); font-weight:500; font-size:var(--type-h2); line-height:1.0; letter-spacing:-0.005em; color:var(--ink-warm); margin:14px 0 0 0 }
.rhinory-merch-pdp .wp-title em{ font-style:italic; color:var(--burgundy) }
.rhinory-merch-pdp .wp-body{ font-family:var(--ff-body); font-size:var(--type-body-editorial); line-height:1.8; color:var(--ink-warm-2); margin:22px 0 0 0; max-width:60ch }
.rhinory-merch-pdp .wp-body > *:first-child{ margin-top:0 }
.rhinory-merch-pdp .wp-body p{ margin:0 0 1.1em 0 }
.rhinory-merch-pdp .wp-body p:last-child{ margin-bottom:0 }
.rhinory-merch-pdp .wp-body strong{ color:var(--ink-warm); font-weight:600 }
.rhinory-merch-pdp .wp-body em{ font-style:italic; color:var(--burgundy) }

/* ---- image stand-in (Frank Ditta Artwork has no synced image) ---- */

/* ---- dark closer (register returns to Reserve-cool at the foot) ---- */
.rhinory-merch-pdp .cl-close{ position:relative; overflow:hidden; background:#1A1512; color:var(--paper); text-align:center; padding:120px 0 }
.rhinory-merch-pdp .cl-close .wp-wrap{ position:relative; z-index:2 }
.rhinory-merch-pdp .cl-close .wp-eyebrow{ color:rgba(251,247,238,0.72); justify-content:center }
.rhinory-merch-pdp .cl-close .wp-eyebrow::before{ background:rgba(251,247,238,0.5) }
.rhinory-merch-pdp .cl-close h2{ font-family:var(--ff-display); font-weight:500; font-size:var(--type-h2); line-height:1.02; letter-spacing:-0.01em; margin:18px auto 24px auto; max-width:18ch }
.rhinory-merch-pdp .cl-close h2 em{ font-style:italic; color:var(--acacia) }
.rhinory-merch-pdp .cl-close .sig{ font-family:var(--ff-display); font-style:italic; font-weight:500; font-size:32px; color:var(--paper); display:inline-block; padding:18px 40px; border-top:1px solid rgba(251,247,238,0.28); border-bottom:1px solid rgba(251,247,238,0.28) }
.rhinory-merch-pdp .cl-close .triad{ margin-top:30px; font-family:var(--ff-label); font-size:11px; font-weight:600; letter-spacing:0.28em; text-transform:uppercase; color:rgba(251,247,238,0.6) }
.rhinory-merch-pdp .cl-close .triad span{ color:#E8B4A0; margin:0 6px }

/* ---- responsive ---- */
@media (max-width:1024px){
  .rhinory-merch-pdp .wp-wrap{ padding:0 40px }
  .rhinory-merch-pdp .hp-grid{ grid-template-columns:1fr; gap:44px }
  .rhinory-merch-pdp .hp-shot{ width:100%; max-width:460px; margin:0 auto; aspect-ratio:3/3.8; min-height:0 }
}
@media (max-width:560px){
  .rhinory-merch-pdp .wp-wrap{ padding:0 22px }
  .rhinory-merch-pdp .wp-sec{ padding:72px 0 }
  .rhinory-merch-pdp .hp-hero{ padding:40px 0 60px 0 }
  .rhinory-merch-pdp .hp-shot{ max-width:100% }
  .rhinory-merch-pdp .hp-actions{ flex-direction:column }
  .rhinory-merch-pdp .hp-add,
  .rhinory-merch-pdp .winery-add-to-cart__button,
  .rhinory-merch-pdp .winery-add-to-cart .winery-add-to-cart__sign-in,
  .rhinory-merch-pdp .winery-add-to-cart__members-only,
  .rhinory-merch-pdp .hp-sec{ width:100%; flex:1 1 auto }
}

/* ---- `.pv` surface integration (S2 fix pass) ----
   The ported variant-selector.css is verbatim from
   prototypes/13/variant-selector.css and stays that way; these two rules are
   the HOST surface's own, and belong here for the same reason the light
   tokens do.

   `.pv-member` sets `display:flex`, which outranks the UA stylesheet's
   `[hidden]{display:none}` — so the server-rendered-empty member row would
   paint as a blank block for every anonymous visitor without this. (The
   sheet ships `[hidden]` rules for `.pv-from` and `.pv-chosen`; `.pv-member`
   is never hidden in the mockup, so it has none.)
   `--muted` is the sheet's own fallback chain token, mapped here to this
   block's warm muted ink so the note reads in the light register. */
.rhinory-merch-pdp .pv-member[hidden]{ display:none; }
.rhinory-merch-pdp .pv-member{ --muted:var(--rhino-warm); margin:0 0 22px 0; }

/* ---- 2026-11-03 pass (prototypes/13/17-merch-pdp.html) ----
   Closer photo + scrim, the closer's body line, a reveal on the closer and a
   slow Ken Burns on its photo (view.js adds .is-in; nothing hides without
   html.js, inc/wine-pdp-head.php), off under reduced motion. No hero zoom,
   no parallax. */
.rhinory-merch-pdp .cl-rhino{ position:absolute; inset:0; z-index:0; }
.rhinory-merch-pdp .cl-rhino img{ width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; display:block; transform:scale(1.02); transform-origin:50% 45%; }
.rhinory-merch-pdp .cl-rhino.is-in img{ animation:rhinoryMerchKb 22s ease-out forwards; }
@keyframes rhinoryMerchKb{ from{ transform:scale(1.02); } to{ transform:scale(1.12); } }
.rhinory-merch-pdp .cl-scrim{ position:absolute; inset:0; z-index:1; background:radial-gradient(120% 96% at 50% 44%, rgba(26,21,18,0.52) 0%, rgba(26,21,18,0.82) 62%, rgba(26,21,18,0.95) 100%), linear-gradient(180deg, rgba(26,21,18,0.72) 0%, rgba(26,21,18,0.5) 45%, rgba(26,21,18,0.9) 100%); }
.rhinory-merch-pdp .cl-close h2{ margin-top:0; }
.rhinory-merch-pdp .cl-close .body{ font-family:var(--ff-body); font-size:var(--type-body-editorial); line-height:1.7; color:rgba(251,247,238,0.9); max-width:60ch; margin:0 auto 34px auto; }
.js .rhinory-merch-pdp .wp-rv:not(.is-in) > *{ opacity:0; }
.js .rhinory-merch-pdp .wp-rv.is-in > *{ animation:rhinoryMerchRv 1s cubic-bezier(.2,.7,.2,1) backwards; }
.js .rhinory-merch-pdp .wp-rv.is-in > *:nth-child(2){ animation-delay:.1s; }
.js .rhinory-merch-pdp .wp-rv.is-in > *:nth-child(3){ animation-delay:.2s; }
.js .rhinory-merch-pdp .wp-rv.is-in > *:nth-child(4){ animation-delay:.3s; }
@keyframes rhinoryMerchRv{ from{ opacity:0; transform:translateY(20px); } }

/* Name-only options (flat price, e.g. shirt sizes): the name is the whole
   option, so it takes the figure's display setting, and the row stays one row
   on a phone rather than stacking. */
.rhinory-merch-pdp .pv--seg .pv-opt:has(> .nm:only-child){ justify-content:center; align-items:center; min-height:56px; padding:12px 10px; }
.rhinory-merch-pdp .pv--seg .pv-opt .nm:only-child{ font-family:var(--ff-display); font-size:21px; font-weight:500; line-height:1; letter-spacing:0; text-transform:none; font-variant-numeric:lining-nums; }
@container (max-width:520px){
  .rhinory-merch-pdp .pv--seg .pv-grid:has(> .pv-opt > .nm:only-child){ flex-direction:row; }
  .rhinory-merch-pdp .pv--seg .pv-opt:has(> .nm:only-child){ border-top:0; border-left:1px solid var(--rule-2,var(--rule-warm-2)); padding:12px 4px; }
  .rhinory-merch-pdp .pv--seg .pv-opt:has(> .nm:only-child):first-child{ border-left:0; }
}

/* Nicole Oct 29 (prototypes/13/17-merch-pdp.html, 2026-11-04): options wrap rather than squeeze.
   Five or more PRICED options (Blake's Bricks): one row gave each cell about 73px at 1440 and broke
   "Customizable" mid-word, so they take two columns, an odd last cell spanning the row; under 520px
   the stacked list still applies. Seven or more name-only sizes on a phone wrap to rows of four. */
@container (min-width:521px){
  .rhinory-merch-pdp .pv--seg .pv-grid:has(> .pv-opt:nth-child(5)):not(:has(> .pv-opt > .nm:only-child)){ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rhinory-merch-pdp .pv--seg .pv-grid:has(> .pv-opt:nth-child(5)):not(:has(> .pv-opt > .nm:only-child)) > .pv-opt{ border-left:1px solid var(--rule-2,var(--rule-warm-2)); border-top:1px solid var(--rule-2,var(--rule-warm-2)); }
  .rhinory-merch-pdp .pv--seg .pv-grid:has(> .pv-opt:nth-child(5)):not(:has(> .pv-opt > .nm:only-child)) > .pv-opt:nth-child(odd){ border-left:0; }
  .rhinory-merch-pdp .pv--seg .pv-grid:has(> .pv-opt:nth-child(5)):not(:has(> .pv-opt > .nm:only-child)) > .pv-opt:nth-child(-n+2){ border-top:0; }
  .rhinory-merch-pdp .pv--seg .pv-grid:has(> .pv-opt:nth-child(5)):not(:has(> .pv-opt > .nm:only-child)) > .pv-opt:last-child:nth-child(odd){ grid-column:1 / -1; }
  .rhinory-merch-pdp .pv--seg .pv-grid:has(> .pv-opt:nth-child(5)):not(:has(> .pv-opt > .nm:only-child)) .nm{ overflow-wrap:normal; hyphens:manual; }
}
@container (max-width:520px){
  .rhinory-merch-pdp .pv--seg .pv-grid:has(> .pv-opt:nth-child(7)):has(> .pv-opt > .nm:only-child){ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .rhinory-merch-pdp .pv--seg .pv-grid:has(> .pv-opt:nth-child(7)):has(> .pv-opt > .nm:only-child) > .pv-opt{ border-left:1px solid var(--rule-2,var(--rule-warm-2)); border-top:1px solid var(--rule-2,var(--rule-warm-2)); }
  .rhinory-merch-pdp .pv--seg .pv-grid:has(> .pv-opt:nth-child(7)):has(> .pv-opt > .nm:only-child) > .pv-opt:nth-child(4n+1){ border-left:0; }
  .rhinory-merch-pdp .pv--seg .pv-grid:has(> .pv-opt:nth-child(7)):has(> .pv-opt > .nm:only-child) > .pv-opt:nth-child(-n+4){ border-top:0; }
}

/* The gated Add to Bag stays natively disabled (an unchosen variant must never
   reach the plugin's buy handler); a press on it falls through to the actions
   row, which moves focus to the options (assets/js/variant-selector.js). */
.rhinory-merch-pdp button.pv-gate[disabled]{ pointer-events:none; }

@media (prefers-reduced-motion:reduce){
  .js .rhinory-merch-pdp .wp-rv:not(.is-in) > *{ opacity:1; }
  .js .rhinory-merch-pdp .wp-rv.is-in > *{ animation:none; }
  .rhinory-merch-pdp .cl-rhino img, .rhinory-merch-pdp .cl-rhino.is-in img{ animation:none; transform:none; }
}

/* Hero gallery (2026-11-03 dispatch § C, prototypes/13/17-merch-pdp.html
   § HERO GALLERY). Only a product with two or more photos gets .hp-media: the
   photos stack in the frame and cross-fade, and the rail of toggle buttons sits
   under the photo on paper, never over it (blocks/merch-pdp/view.js). */
.rhinory-merch-pdp .hp-media{ display:flex; flex-direction:column; gap:8px; min-width:0 }
.rhinory-merch-pdp .hp-media .hp-shot{ flex:1 1 auto }
.rhinory-merch-pdp .hp-shot.has-gallery{ touch-action:pan-y }
.rhinory-merch-pdp .hp-shot__slide{ position:absolute; inset:0; opacity:0; transition:opacity .9s cubic-bezier(.2,.7,.2,1) }
.rhinory-merch-pdp .hp-shot__slide.is-on{ opacity:1 }
.rhinory-merch-pdp .hp-shot__slide > img{ position:absolute; inset:0 }
.rhinory-merch-pdp .hp-thumbs{ display:flex; gap:8px }
.rhinory-merch-pdp .hp-thumbs[hidden]{ display:none }
.rhinory-merch-pdp .hp-thumb{ flex:0 1 112px; min-width:0; aspect-ratio:4/3; padding:0; overflow:hidden; border:1px solid var(--rule-warm-2); border-radius:1px; background:var(--card); cursor:pointer; filter:saturate(.86) brightness(.94); transition:filter .3s ease, box-shadow .25s ease, transform .25s ease }
.rhinory-merch-pdp .hp-thumb img{ display:block; width:100%; height:100%; object-fit:cover }
.rhinory-merch-pdp .hp-thumb:hover{ filter:saturate(1) brightness(1) }
.rhinory-merch-pdp .hp-thumb.is-on{ filter:saturate(1) brightness(1); box-shadow:0 0 0 2px var(--burgundy); transform:translateY(-2px) }
.rhinory-merch-pdp .hp-thumb:focus-visible{ outline:2px solid var(--burgundy); outline-offset:2px }
@media (max-width:1024px){
  .rhinory-merch-pdp .hp-media{ width:100%; max-width:460px; margin:0 auto }
  .rhinory-merch-pdp .hp-media .hp-shot{ max-width:none }
}
@media (max-width:560px){
  .rhinory-merch-pdp .hp-media{ max-width:100% }
}
@media (prefers-reduced-motion:reduce){
  .rhinory-merch-pdp .hp-shot__slide,
  .rhinory-merch-pdp .hp-thumb{ transition:none }
}