/* ============================================================
WINE PDP — v12 LIGHT register (rhinory/wine-pdp block).
Ported from prototypes/12/12-wine-pdp-wijde-light.html (view-source-is-
contract). Supersedes the dark-register build (docs/briefs/
2026-06-10-port-12-wine-pdp.md); this file is the SAME path evolved in
place per docs/briefs/2026-07-10-port-12-wine-pdp-light.md.
SCOPING DISCIPLINE (guardrail): the prototype scopes every light token to
`.wijde-pdp`, 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-wine-pdp`, emitted by get_block_wrapper_attributes()
in render.php — IS that scope boundary; there is no separate `.wijde-pdp`
class. Generic names that collide with the dark chrome's global classes
in style.css (`.wrap`, `.eyebrow`, `.section`) are renamed `.wp-wrap` /
`.wp-eyebrow` / `.wp-sec` here, exactly as the prototype renames them,
so nothing bleeds in either direction.
Fonts: Cormorant Garamond (display) / Josefin Sans (labels) / Lora
(body) are already enqueued site-wide via RHINORY_V4_FONTS_URL
(functions.php) as of the v12 homepage port — no additional font
loading needed here.
Section inventory (brief order): breadcrumb -> hero (bottle + buy) ->
Taste Profile (5 dials) -> Craft & Origin (content prose + blend viz +
lifestyle image) -> Recipe & Pairings -> The Region -> Inner Circle
(club) -> conservation closer.
============================================================ */
.rhinory-wine-pdp{
--paper:#FBF7EE;
--card:#F4EEE0;
--card-2:#EAE1CE;
--land:#D8C6A0;
--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;
--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-wine-pdp *{ box-sizing:border-box; }
.rhinory-wine-pdp .wp-wrap{ width:100%; max-width:1280px; margin:0 auto; padding:0 56px; }
.rhinory-wine-pdp .wp-eyebrow{
font-family:var(--ff-label); font-size:13px; font-weight:600;
letter-spacing:0.18em; text-transform:uppercase; color:var(--burgundy);
display:inline-flex; align-items:center; gap:12px; margin:0;
}
.rhinory-wine-pdp .wp-eyebrow::before{ content:""; width:24px; height:1px; background:var(--burgundy); }
.rhinory-wine-pdp section{ scroll-margin-top:96px; }
/* ---- Breadcrumbs ---- */
.rhinory-wine-pdp .wp-crumb{ padding:30px 0 0 0; }
.rhinory-wine-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-wine-pdp .wp-crumb-row a{ color:var(--rhino-warm); text-decoration:none; transition:color .2s; }
.rhinory-wine-pdp .wp-crumb-row a:hover{ color:var(--burgundy); }
.rhinory-wine-pdp .wp-crumb-row .sep{ color:var(--rule-warm-2); }
.rhinory-wine-pdp .wp-crumb-row .current{ color:var(--burgundy); }
/* ============================================================
HERO — bottle edge-to-edge / details column
============================================================ */
.rhinory-wine-pdp .hp-hero{ padding:56px 0 96px 0; border-bottom:1px solid var(--rule-warm-2); }
.rhinory-wine-pdp .hp-grid{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:72px; align-items:stretch; }
/* Codex M1: empty image_url — render.php omits .hp-bottle entirely and
adds this modifier so the details column goes full-width rather than
sitting in the narrower 0.92fr track meant for the bottle figure. */
.rhinory-wine-pdp .hp-grid--no-bottle{ grid-template-columns:1fr; }
/* Bottle figure — the real C7 image fills the frame edge-to-edge (no
cream-in-cream double frame): object-fit:cover, no inner padding box. */
.rhinory-wine-pdp .hp-bottle{
position:relative; overflow:hidden; margin:0;
border:1px solid var(--rule-warm-2); background:var(--card);
min-height:640px;
}
.rhinory-wine-pdp .hp-bottle::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--burgundy); opacity:.5;
}
.rhinory-wine-pdp .hp-bottle img{
width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}
.rhinory-wine-pdp .hp-bottle .cap{
position:absolute; left:24px; bottom:22px;
font-family:var(--ff-label); font-size:11px; font-weight:600;
letter-spacing:0.16em; text-transform:uppercase; color:var(--rhino-warm);
}
.rhinory-wine-pdp .hp-detail{ display:flex; flex-direction:column; padding-top:6px; }
.rhinory-wine-pdp .hp-vintage{
font-family:var(--ff-display); font-style:italic; font-weight:500; font-size:28px;
line-height:1; color:var(--rhino-warm); margin:20px 0 4px 0;
}
.rhinory-wine-pdp .hp-name{
font-family:var(--ff-display); font-weight:500; font-size:clamp(52px,6vw,88px);
line-height:0.96; letter-spacing:-0.008em; color:var(--ink-warm); margin:6px 0 0 0;
}
.rhinory-wine-pdp .hp-name em{ font-style:italic; color:var(--burgundy); }
.rhinory-wine-pdp .hp-region{
font-family:var(--ff-label); font-size:12px; font-weight:600;
letter-spacing:0.2em; text-transform:uppercase; color:var(--rhino-warm);
margin:22px 0 0 0; display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.rhinory-wine-pdp .hp-region .sep{ opacity:.4; }
.rhinory-wine-pdp .hp-region b{ color:var(--burgundy); font-weight:600; }
/* ---- ABV spec (Google Alcohol advertising policy, eff. 2026-09-30) ----
Ported verbatim from prototypes/13/12-wine-pdp-wijde-light.html:126-132. The figure
sits a shade darker than the line so it reads as the fact; tracking eases off because
0.2em on digits reads as decoration. Bound to _wc7_abv; the element carries its own
leading middot so hiding it (empty field) removes the separator too — never an
orphaned dot, never an empty label, never "N/A". No burgundy: this is a compliance
fact, not a selling number. */
.rhinory-wine-pdp .hp-abv{
white-space:nowrap; letter-spacing:0.14em; font-variant-numeric:tabular-nums lining-nums;
font-feature-settings:"lnum" 1,"tnum" 1;
}
.rhinory-wine-pdp .hp-abv .sep{ margin-right:9px; }
.rhinory-wine-pdp .hp-abv .n{ color:var(--ink-warm-2); }
.rhinory-wine-pdp .hp-abv:empty, .rhinory-wine-pdp .hp-abv[hidden]{ display:none; }
.rhinory-wine-pdp .hp-teaser{
font-family:var(--ff-body); font-size:18px; line-height:1.62; color:var(--ink-warm-2);
margin:26px 0 0 0; max-width:56ch;
}
/* buy row */
.rhinory-wine-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;
}
/* ---- Public price row -> winery/product-price atom (S6c scope 1) ------------
The plugin atom replaced the theme's bespoke .hp-price cluster. Its frozen
.winery-product-price* classes are styled here to the v13 paper register so the
rendered public / sale / member states read as they did before the swap. The
plugin's pricing-live.js reveals __member-eyebrow / __reg / __member-savings for
a saving club member (showMemberChrome:true emits them); showMemberPreview:false
suppresses the atom's own recruit line so .rhinory-member-preview stays the one
member-recruit surface. The theme's .pt-saleline eyebrow + .pt-note frame it.
Contract: ~/dev/wordpress-for-wineries/docs/contract.md § .winery-product-price */
/* Root: a COLUMN of lines (treatment §02), like the old .hp-price. */
.rhinory-wine-pdp .winery-product-price{
display:flex; flex-direction:column; align-items:flex-start; gap:0;
color:var(--ink-warm); font-family:var(--ff-body);
}
/* Figure line: a wrapping baseline row. Member state adds an eyebrow above and a
savings badge below via flex-basis:100% + order (see below). */
.rhinory-wine-pdp .winery-product-price__row{
display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
/* Current public figure — the old .amt. */
.rhinory-wine-pdp .winery-product-price__now,
.rhinory-wine-pdp .winery-product-price__price-now{
font-family:var(--ff-display); font-weight:500; font-size:58px; line-height:1;
letter-spacing:-0.01em; color:var(--ink-warm);
}
/* Per-bottle unit — a REAL slot the atom emits from unitLabel:"/ bottle" (plugin
v0.128.0), retiring the old ::after content hack in favour of selectable, i18n-able
DOM. The atom drops one __unit-suffix as a __row sibling right after __now and a
second inside __member after the live value, so both the public and club figures
read "$X / bottle". Label voice, matching the old pseudo-element exactly. */
.rhinory-wine-pdp .winery-product-price__unit-suffix{
margin-left:2px;
font-family:var(--ff-label); font-size:11px; font-weight:600;
letter-spacing:0.18em; text-transform:uppercase; color:var(--rhino-warm);
}
/* The public suffix is a direct __row flex item, so the row's 10px gap would sit it a
full control-gap out — the retired ::after hugged __now at 2px. Cancel the gap so it
hugs identically (2px − 10px row gap); downstream sale chrome (was-label/was) keeps
its own 10px gap and lands exactly where it did before. The member suffix is inside
__member (not a __row child), so it is unaffected and keeps the plain 2px hug. */
.rhinory-wine-pdp .winery-product-price__row > .winery-product-price__unit-suffix{
margin-left:calc(2px - 10px);
}
/* The public suffix does NOT ride __now's display (it is a sibling, not a child). Hide
it in the member state exactly when the atom hides __now — its
:has(__reg:not([hidden])) rule — so the promoted club figure's own inner suffix is
the only "/ bottle" left. On a public sale __now stays visible and so, correctly,
does its suffix. */
.rhinory-wine-pdp .winery-product-price:has(.winery-product-price__reg:not([hidden])) .winery-product-price__row > .winery-product-price__unit-suffix{
display:none;
}
/* "From" prefix on a varying-price wine (rare here) — quiet label voice. */
.rhinory-wine-pdp .winery-product-price__prefix{
font-family:var(--ff-label); font-size:11px; font-weight:600;
letter-spacing:0.18em; text-transform:uppercase; color:var(--rhino-warm);
}
/* The atom's own Sale pill + "N% off" fragment are suppressed: the theme's
.pt-saleline "On sale · N% off" eyebrow above the row is the single sale label. */
.rhinory-wine-pdp .winery-product-price__badge,
.rhinory-wine-pdp .winery-product-price__savings{ display:none; }
/* Struck retail on a public sale — the old .pt-was: italic Cormorant with a
centered pseudo-element rule (NOT text-decoration, which misrenders on the
italic face). "was" sits outside the strike. Overrides the atom's token-based
strike (its --winery-sale-was-strike-* tokens are unset in this register). */
.rhinory-wine-pdp .winery-product-price__was-label{
font-family:var(--ff-label); font-size:9.5px; font-weight:600;
letter-spacing:0.16em; text-transform:uppercase; color:rgba(45,41,38,0.52);
}
.rhinory-wine-pdp .winery-product-price__was,
.rhinory-wine-pdp .winery-product-price__price-was{
font-family:var(--ff-display); font-size:30px; font-weight:500; font-style:italic;
line-height:1; color:rgba(45,41,38,0.52); position:relative;
font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
}
.rhinory-wine-pdp .winery-product-price__was::after,
.rhinory-wine-pdp .winery-product-price__price-was::after{
left:-2px; right:-2px; height:1px; background:currentColor;
}
/* ---- Member state (revealed by the plugin's pricing-live.js) -------------- */
/* "Club price" eyebrow — the old .hp-club-eyebrow: burgundy small-caps with a
solid square pip, on its own line above the figure. */
.rhinory-wine-pdp .winery-product-price__member-eyebrow{
order:-1; flex:0 0 100%; display:inline-flex; align-items:center; gap:10px;
margin-bottom:12px;
font-family:var(--ff-label); font-size:11.5px; font-weight:600;
letter-spacing:0.2em; text-transform:uppercase; color:var(--burgundy);
}
.rhinory-wine-pdp .winery-product-price__member-eyebrow::before{
content:""; width:7px; height:7px; background:var(--burgundy); flex:0 0 auto;
}
/* Club figure — promoted to the primary 58px display. The atom's own :has() rule
promotes __member when the eyebrow reveals; this restyles it to the v13 register.
The atom's inner "member" qualifier (__unit) is hidden below in favour of the
__unit-suffix "/ bottle" the atom now emits inside __member (v0.128.0). */
.rhinory-wine-pdp .winery-product-price:has(.winery-product-price__member-eyebrow:not([hidden])) .winery-product-price__member{
font-family:var(--ff-display); font-weight:500; font-size:58px; line-height:1;
letter-spacing:-0.01em; color:var(--ink-warm);
}
.rhinory-wine-pdp .winery-product-price__member .winery-product-price__unit{ display:none; }
/* "reg. $65" demotion — the old .reg. The atom hides __now and drops __reg onto
its own line under the club figure. NO strike: a benefit is not a markdown. */
.rhinory-wine-pdp .winery-product-price__reg{
flex:0 0 100%; margin-top:8px;
font-family:var(--ff-label); font-size:12px; font-weight:600;
letter-spacing:0.06em; text-transform:uppercase; color:var(--rhino-warm);
}
/* Member savings badge — the old .hp-save: additive, burgundy, small-caps, on its
own line below, with a leading star. savingsFormat:"amount" (v0.128.0) restores
the dollar-amount copy ("Save $X") the retired theme badge showed, replacing the
atom's default "Save N%" percentage — pricing-live.js formats the amount off the
live member/public delta. */
.rhinory-wine-pdp .winery-product-price__member-savings{
flex:0 0 100%; order:1; margin-top:14px;
display:inline-flex; align-items:center; gap:8px;
font-family:var(--ff-label); font-size:10.5px; font-weight:600;
letter-spacing:0.18em; text-transform:uppercase; color:var(--burgundy);
}
.rhinory-wine-pdp .winery-product-price__member-savings::before{
content:""; width:14px; height:14px; flex:0 0 auto;
background:url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
/* The slots above server-render `hidden` and are revealed by pricing-live.js. The
member `display:inline-flex` declarations on __member-eyebrow / __member-savings
here tie the atom's own `.winery-product-price [hidden]` rule on specificity
(both (0,2,0)) and win on source order (theme CSS loads after the plugin's), so
the empty slot would paint. `!important` makes `hidden` unconditionally
authoritative for every opt-in slot — the same "hidden must win" posture this
file's entitlement gate takes — so no reveal/revert/variant transition that
leaves a slot `hidden` can ever paint it, independent of the atom's promote
specificity (whose (0,4,0) rule sets type, not display). */
.rhinory-wine-pdp .winery-product-price__member-eyebrow[hidden],
.rhinory-wine-pdp .winery-product-price__member[hidden],
.rhinory-wine-pdp .winery-product-price__reg[hidden],
.rhinory-wine-pdp .winery-product-price__member-savings[hidden]{ display:none !important; }
/* ---- PUBLIC SALE — prototypes/13/sale-price.css, Context 1 (PDP hero row) --
Ported verbatim from the shared treatment file rather than re-derived here,
so the PDP, the catalog card and the gift card speak one sale vocabulary.
The literal token values are the prototype's own declarations; they coincide
with this file's --burgundy / --ink-warm-at-52%, and are left literal so a
change to the shared treatment lands as a one-for-one diff.
TWO PRICE MEANINGS, TWO LOOKS (the treatment's own rule): a PUBLIC SALE is
the price right now — full price size, price ink, exact, no qualifier — while
the MEMBER PREVIEW below it is a small burgundy "join and you would pay less"
figure that keeps its estimate wording. Nothing here touches .mp-*. */
.rhinory-wine-pdp .pt-sale{ --pt-accent:#520000; --pt-was:rgba(45,41,38,0.52); }
/* "On sale" label — the house eyebrow device (24px leading tick), sitting
directly above the figure it qualifies. */
.rhinory-wine-pdp .pt-saleline{
display:flex; align-items:center; gap:10px; margin:0 0 10px;
font-family:var(--ff-label); font-size:10px; font-weight:600;
letter-spacing:0.22em; text-transform:uppercase; color:var(--pt-accent);
}
.rhinory-wine-pdp .pt-saleline::before{ content:""; width:24px; height:1px; background:currentColor; flex:none; }
.rhinory-wine-pdp .pt-saleline .d{ opacity:.45; }
.rhinory-wine-pdp .pt-saleline .pct{ opacity:.78; }
/* Reassurance line — PDP only, and only because the sale figure is exact. */
.rhinory-wine-pdp .pt-note{
margin:0; font-family:var(--ff-body); font-style:italic;
font-size:14px; line-height:1.6; color:var(--pt-was);
}
.rhinory-wine-pdp .hp-buy.pt-sale .pt-saleline{ flex:0 0 100%; margin:0 0 -14px; font-size:11px; letter-spacing:0.2em; }
.rhinory-wine-pdp .hp-buy.pt-sale .pt-note{ flex:0 0 100%; margin-top:-8px; max-width:52ch; }
/* ---- Prospective-member club price preview (anonymous, cacheable) ----
Brief: docs/briefs/2026-07-23-wine-pdp-member-preview-build.md.
The hard rule from the round-3 pricing treatment: retail stays the single
large number. Every figure in here is a small label — the preview recruits,
it never competes for the price slot. No strikethrough anywhere: a club
price is a membership benefit, not a markdown (the strike stays sale-only).
`flex-basis:100%` drops it onto its own row inside the .hp-buy flex line,
directly beneath the retail number it is subordinate to. Do NOT add a
max-width here: flex line-breaking measures the CLAMPED hypothetical size,
so a capped basis lets the block ride up beside the price instead of
wrapping under it. Line length is capped on .mp-recruit instead. */
.rhinory-wine-pdp .rhinory-member-preview{
flex:1 1 100%; margin-top:-10px;
padding:14px 0 0 0; border-top:1px solid var(--rule-warm);
}
/* view.js sets `hidden` when the member state promotes; the flex display
above would otherwise out-specify the UA [hidden] rule (same trap as the
.member marker above). */
.rhinory-wine-pdp .rhinory-member-preview[hidden]{ display:none; }
.rhinory-wine-pdp .mp-eyebrow{
margin:0; font-family:var(--ff-label); font-size:10px; font-weight:600;
letter-spacing:0.2em; text-transform:uppercase; color:var(--burgundy);
display:flex; align-items:center; gap:8px;
}
.rhinory-wine-pdp .mp-eyebrow::before{
content:""; width:6px; height:6px; background:var(--burgundy); flex:0 0 auto;
}
.rhinory-wine-pdp .mp-recruit{
margin:8px 0 0 0; font-family:var(--ff-body); font-size:14px;
line-height:1.5; color:var(--ink-warm-2); max-width:44ch;
}
.rhinory-wine-pdp .mp-lead{
margin:6px 0 0 0; display:flex; align-items:baseline; flex-wrap:wrap; gap:7px;
font-family:var(--ff-label); font-size:11px; font-weight:600;
letter-spacing:0.14em; text-transform:uppercase; color:var(--rhino-warm);
}
/* The preview's own headline figure — Cormorant italic at 20px, matching the
member strip's scale, i.e. roughly a third of the 58px retail .amt. */
.rhinory-wine-pdp .mp-lead-price{
font-family:var(--ff-display); font-style:italic; font-weight:500;
font-size:20px; letter-spacing:0; text-transform:none; color:var(--burgundy);
}
.rhinory-wine-pdp .mp-lead .sep{ color:var(--rule-warm-2); }
.rhinory-wine-pdp .mp-tiers{ margin-top:10px; }
.rhinory-wine-pdp .mp-tiers-toggle{
display:inline-flex; align-items:center; gap:7px; cursor:pointer;
font-family:var(--ff-label); font-size:11px; font-weight:600;
letter-spacing:0.14em; text-transform:uppercase; color:var(--rhino-warm);
list-style:none; transition:color .2s;
}
.rhinory-wine-pdp .mp-tiers-toggle::-webkit-details-marker{ display:none; }
.rhinory-wine-pdp .mp-tiers-toggle:hover{ color:var(--burgundy); }
.rhinory-wine-pdp .mp-tiers-toggle:focus-visible{ outline:2px solid var(--burgundy); outline-offset:3px; }
.rhinory-wine-pdp .mp-chev{ transition:transform .2s; }
.rhinory-wine-pdp .mp-tiers[open] .mp-chev{ transform:rotate(180deg); }
.rhinory-wine-pdp .mp-tier-list{ list-style:none; margin:10px 0 0 0; padding:0; }
.rhinory-wine-pdp .mp-tier{
display:flex; flex-wrap:wrap; align-items:baseline; gap:6px;
padding:7px 0; border-top:1px solid var(--rule-warm);
font-family:var(--ff-label); font-size:11px; font-weight:600;
letter-spacing:0.08em; color:var(--rhino-warm);
}
.rhinory-wine-pdp .mp-tier-name{ color:var(--ink-warm-2); text-transform:none; letter-spacing:0.04em; }
.rhinory-wine-pdp .mp-tier-price{
font-family:var(--ff-display); font-style:italic; font-weight:500;
font-size:16px; letter-spacing:0; color:var(--burgundy);
}
.rhinory-wine-pdp .mp-tier-save{ text-transform:uppercase; }
.rhinory-wine-pdp .mp-tier-note{ color:var(--rhino-warm); opacity:.75; text-transform:none; letter-spacing:0.04em; }
.rhinory-wine-pdp .mp-tier .sep{ color:var(--rule-warm-2); }
.rhinory-wine-pdp .mp-estimate{
margin:10px 0 0 0; font-family:var(--ff-label); font-size:10px;
font-weight:600; letter-spacing:0.1em; color:var(--rhino-warm);
}
.rhinory-wine-pdp .mp-join{
display:inline-flex; align-items:center; gap:8px; margin-top:12px;
font-family:var(--ff-label); font-size:11px; font-weight:600;
letter-spacing:0.16em; text-transform:uppercase; color:var(--burgundy);
text-decoration:none; border-bottom:1px solid rgba(82,0,0,0.30);
padding-bottom:3px; transition:border-color .2s;
}
.rhinory-wine-pdp .mp-join .arr{ transition:transform .25s; }
.rhinory-wine-pdp .mp-join:hover{ border-bottom-color:var(--burgundy); }
.rhinory-wine-pdp .mp-join:hover .arr{ transform:translateX(4px); }
@media (prefers-reduced-motion:reduce){
.rhinory-wine-pdp .mp-chev,
.rhinory-wine-pdp .mp-join .arr{ transition:none; }
}
.rhinory-wine-pdp .hp-actions{ display:flex; flex-wrap:wrap; gap:12px; width:100%; margin-top:6px; }
.rhinory-wine-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);
cursor:pointer; transition:background .25s, color .25s, transform .2s; flex:1 1 auto;
}
.rhinory-wine-pdp .hp-add .arr{ transition:transform .25s; }
.rhinory-wine-pdp .hp-add:hover{ background:#3d0000; transform:translateY(-1px); }
.rhinory-wine-pdp .hp-add:hover .arr{ transform:translateX(4px); }
.rhinory-wine-pdp .hp-add.is-added{ background:var(--card); color:var(--burgundy); }
.rhinory-wine-pdp .hp-add.is-error{ background:var(--card-2); color:var(--burgundy); border-color:var(--burgundy); }
/* Non-purchasable / allocation-fallback CTA (Codex M2, availability_state
gating): sold-out, coming-soon, or a resolvable-join-URL-less allocation
state all fall back to this disabled label rather than a dead "#" link. */
.rhinory-wine-pdp .hp-add:disabled{
background:var(--card-2); color:var(--ink-warm-2); border-color:var(--rule-warm-2);
cursor:not-allowed;
}
.rhinory-wine-pdp .hp-add:disabled:hover{ background:var(--card-2); transform:none; }
/* winery/add-to-cart atom (S6c #2, docs/briefs/2026-09-02-pdp-atomic-blocks.md).
The atom replaces the plain purchasable Add-to-Bag button with its own
wrapper div + .winery-add-to-cart__button. Dissolve the wrapper so the button
is a direct flex participant in .hp-actions (identical treatment to
.rhinory-pdp-gate above), and paint the atom button as .hp-add so the row is
visually unchanged. The atom emits a plain-text label with no .arr span, so
the trailing "->" is restored as a ::after pseudo (hidden during the theme's
confirm/error innerHTML swap, which carries its own arrow). */
.rhinory-wine-pdp .winery-add-to-cart{ display:contents; }
.rhinory-wine-pdp .winery-add-to-cart__button{
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);
cursor:pointer; transition:background .25s, color .25s, transform .2s; flex:1 1 auto;
}
.rhinory-wine-pdp .winery-add-to-cart__button::after{ content:"\2192"; transition:transform .25s; }
.rhinory-wine-pdp .winery-add-to-cart__button:hover{ background:#3d0000; transform:translateY(-1px); }
.rhinory-wine-pdp .winery-add-to-cart__button:hover::after{ transform:translateX(4px); }
.rhinory-wine-pdp .winery-add-to-cart__button.is-added{ background:var(--card); color:var(--burgundy); }
.rhinory-wine-pdp .winery-add-to-cart__button.is-added::after{ content:none; }
.rhinory-wine-pdp .winery-add-to-cart__button.is-error{ background:var(--card-2); color:var(--burgundy); border-color:var(--burgundy); }
.rhinory-wine-pdp .winery-add-to-cart__button.is-error::after{ content:none; }
.rhinory-wine-pdp .winery-add-to-cart__button:disabled{
background:var(--card-2); color:var(--ink-warm-2); border-color:var(--rule-warm-2);
cursor:not-allowed;
}
.rhinory-wine-pdp .winery-add-to-cart__button:disabled::after{ content:none; }
.rhinory-wine-pdp .winery-add-to-cart__button:disabled:hover{ background:var(--card-2); transform:none; }
/* The atom also emits a multi-variant gate hint; single-variant wines never
show it, but keep it out of the flex row's baseline if a mapped wine ever does. */
.rhinory-wine-pdp .winery-add-to-cart__gate-hint{ flex:1 1 100%; margin:0; }
/* Commerce7 product entitlement gate (docs/briefs/2026-08-03-product-security-entitlement-gate.md).
The gate owns the whole CTA slot rather than sitting beside the buy button,
so `display:contents` lets its children inherit .hp-actions' flex layout and
the row reads identically whether the viewer is gated, upgraded, or public.
`[hidden]` is forced because .hp-add sets display:inline-flex, which would
otherwise beat the UA hidden rule and paint all three states at once. */
.rhinory-wine-pdp .rhinory-pdp-gate{ display:contents; }
.rhinory-wine-pdp .rhinory-pdp-gate [hidden]{ display:none !important; }
/* The two DENIED treatments group a caption with a button — but the group must
not become a flex CELL. As a column box it stretched to the row height and
handed its button only the leftover, so the primary CTA painted 52.6px low
and short beside a "Taste It Here" the same wrapper had stretched to 79.6px
(measured on /wine/june-allocation-wine-1/). The member Add to Bag and the
disabled close never had the fault because they are bare .hp-add buttons.
`display:contents` dissolves the grouping box so caption and button are
independent participants in .hp-actions, which is what the other two
treatments already were — one layout for all four states.
Consequences worth knowing before editing: this wrapper has no box, so
padding / background / border on it paint nothing; and the [hidden] rule
above still governs it, because `display:none !important` beats
`display:contents` — hiding a treatment still takes its caption with it. */
.rhinory-wine-pdp .rhinory-pdp-gate__prompt{ display:contents; }
/* Full-width caption, its own row above the buttons: a 100% flex-basis eats the
line box so every CTA wraps beneath it. .hp-actions' own 12px gap is the
spacing — no margin here, or the row gap doubles. */
.rhinory-wine-pdp .rhinory-pdp-gate__line{
flex:0 0 100%; width:100%;
margin:0; font-family:var(--ff-label); font-size:11px; font-weight:600;
letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-warm-2);
}
.rhinory-wine-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);
cursor:pointer; transition:border-color .2s, color .2s; text-decoration:none;
}
.rhinory-wine-pdp .hp-sec:hover{ border-color:var(--burgundy); color:var(--burgundy); }
.rhinory-wine-pdp .hp-sec .ic{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
/* ---- Crash subscription CTAs (brief 2026-07-24-wine-pdp-crash-subscription)
Both are SUBORDINATE to Add to Bag by construction: label-scale type, no
fill — Add to Bag stays the single solid burgundy button in the row. The
`.rhinory-crash-cta` wrapper takes the full flex row beneath the CTA pair so
neither affordance competes with Add to Bag for width, and the recruit link
keeps its natural inline size inside it. No strikethrough anywhere (the
strike stays sale-only, same rule as the member preview above).
Both carry an explicit [hidden] rule: the flex display below would otherwise
out-specify the UA [hidden] { display:none }, and BOTH are toggled by
view.js — the manage link is server-hidden until a Crash subscriber
resolves, the recruit link is hidden the moment one does. */
.rhinory-wine-pdp .rhinory-crash-cta{ flex:1 1 100%; margin-top:2px; }
.rhinory-wine-pdp .rhinory-crash-join[hidden],
.rhinory-wine-pdp .rhinory-crash-manage[hidden]{ display:none; }
.rhinory-wine-pdp .rhinory-crash-join{
display:inline-flex; align-items:center; gap:8px;
font-family:var(--ff-label); font-size:11px; font-weight:600;
letter-spacing:0.16em; text-transform:uppercase; color:var(--burgundy);
text-decoration:none; border-bottom:1px solid rgba(82,0,0,0.30);
padding-bottom:3px; transition:border-color .2s;
}
.rhinory-wine-pdp .rhinory-crash-join:hover{ border-bottom-color:var(--burgundy); }
.rhinory-wine-pdp .rhinory-crash-join .arr{ transition:transform .25s; }
.rhinory-wine-pdp .rhinory-crash-join:hover .arr{ transform:translateX(4px); }
/* Two lines: the action, then the honesty note that says WHERE the add
happens. The note is not optional copy — the deep link routes, it never
adds (Commerce7 has no inject API). */
.rhinory-wine-pdp .rhinory-crash-manage{
display:flex; flex-direction:column; gap:4px; text-decoration:none;
padding:12px 16px; background:var(--card); border:1px solid var(--rule-warm-2);
transition:border-color .2s;
}
.rhinory-wine-pdp .rhinory-crash-manage:hover{ border-color:var(--burgundy); }
.rhinory-wine-pdp .cs-label{
display:inline-flex; align-items:center; gap:8px;
font-family:var(--ff-label); font-size:11px; font-weight:600;
letter-spacing:0.16em; text-transform:uppercase; color:var(--burgundy);
}
.rhinory-wine-pdp .cs-label .arr{ transition:transform .25s; }
.rhinory-wine-pdp .rhinory-crash-manage:hover .cs-label .arr{ transform:translateX(4px); }
.rhinory-wine-pdp .cs-note{
font-family:var(--ff-body); font-size:13px; line-height:1.45;
color:var(--ink-warm-2); max-width:44ch;
}
@media (prefers-reduced-motion:reduce){
.rhinory-wine-pdp .rhinory-crash-join .arr,
.rhinory-wine-pdp .cs-label .arr{ transition:none; }
}
/* ============================================================
SHARED SECTION SHELL
============================================================ */
.rhinory-wine-pdp .wp-sec{ padding:104px 0; border-bottom:1px solid var(--rule-warm-2); }
.rhinory-wine-pdp .wp-sec.alt{ background:var(--card); }
.rhinory-wine-pdp .wp-sec-head{ margin:0 0 40px 0; }
.rhinory-wine-pdp .wp-sec-title{
font-family:var(--ff-display); font-weight:500; font-size:clamp(38px,4.4vw,58px);
line-height:1.0; letter-spacing:-0.005em; color:var(--ink-warm); margin:14px 0 0 0;
}
.rhinory-wine-pdp .wp-sec-title em{ font-style:italic; color:var(--burgundy); }
.rhinory-wine-pdp .wp-sec-lede{ font-family:var(--ff-body); font-size:18px; line-height:1.7; color:var(--ink-warm-2); margin:20px 0 0 0; max-width:56ch; }
/* ---- TASTE PROFILE — per-dial fill icons ---- */
.rhinory-wine-pdp .tp-panel{ display:flex; flex-direction:column; }
.rhinory-wine-pdp .tp-dials{ margin-top:44px; border-top:1px solid var(--rule-warm-2); max-width:920px; }
.rhinory-wine-pdp .tp-dial{
display:grid; grid-template-columns:76px 1fr auto;
column-gap:30px; align-items:center;
padding:24px 0; border-bottom:1px solid var(--rule-warm);
}
.rhinory-wine-pdp .tp-ic-wrap{ width:62px; height:62px; display:flex; align-items:center; justify-content:center; }
.rhinory-wine-pdp .tp-ic{ width:56px; height:56px; display:block; overflow:visible; }
.rhinory-wine-pdp .tp-ic .ic-line{ fill:none; stroke:var(--ink-warm-2); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.rhinory-wine-pdp .tp-ic .ic-fill{ fill:var(--burgundy); }
.rhinory-wine-pdp .tp-ic .ic-empty{ fill:var(--card-2); }
.rhinory-wine-pdp .tp-info{ display:flex; flex-direction:column; gap:7px; }
.rhinory-wine-pdp .tp-dial .k{
font-family:var(--ff-label); font-size:14px; font-weight:600;
letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-warm);
}
.rhinory-wine-pdp .tp-scale-hint{
font-family:var(--ff-label); font-size:10.5px; font-weight:500;
letter-spacing:0.14em; text-transform:uppercase; color:var(--rhino-warm);
display:inline-flex; align-items:center; gap:9px;
}
.rhinory-wine-pdp .tp-scale-hint .arw{ opacity:.45; }
.rhinory-wine-pdp .tp-bar{ display:flex; gap:5px; max-width:280px; }
.rhinory-wine-pdp .tp-seg{ flex:1 1 0; height:7px; border-radius:3px; background:var(--card-2); }
.rhinory-wine-pdp .tp-seg.is-on{ background:var(--burgundy); }
.rhinory-wine-pdp .tp-dial .v{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.rhinory-wine-pdp .tp-dial .v .word{
font-family:var(--ff-display); font-style:italic; font-size:29px; font-weight:500;
line-height:1.08; color:var(--burgundy); max-width:9ch; text-wrap:balance;
}
/* ---- CRAFT & ORIGIN — content prose + blend viz + lifestyle image ---- */
.rhinory-wine-pdp .wine-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:72px; align-items:center; }
.rhinory-wine-pdp .wine-figure{ margin:0; max-width:520px; justify-self:end; width:100%; }
.rhinory-wine-pdp .wine-figure picture{ display:block; position:relative; }
.rhinory-wine-pdp .wine-figure picture::after{
content:""; position:absolute; inset:0; pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(45,41,38,0.16);
}
.rhinory-wine-pdp .wine-figure img{ width:100%; height:auto; display:block; }
.rhinory-wine-pdp .wine-figure figcaption{
margin-top:14px;
font-family:var(--ff-label); font-size:11px; font-weight:600;
letter-spacing:0.16em; text-transform:uppercase; color:var(--rhino-warm);
display:flex; align-items:center; gap:12px;
}
.rhinory-wine-pdp .wine-figure figcaption::before{ content:""; width:24px; height:1px; background:var(--rule-warm-2); }
.rhinory-wine-pdp .wine-grid .wine-body{ max-width:none; margin:0; }
.rhinory-wine-pdp .wine-body > p{
font-family:var(--ff-body); font-size:18px; line-height:1.8; color:var(--ink-warm-2);
margin:0 0 26px 0;
}
/* The Craft & Origin description now renders through core/post-content (an
editable in-canvas slot — brief 2026-09-02-wine-pdp-canvas-render.md item 0),
which wraps the prose in `.wp-block-post-content` rather than emitting the
`