/* ============================================================
   GIFT-CARD PDP — v13 LIGHT register (rhinory/gift-card-pdp block).
   Ported from prototypes/13/18-giftcard-pdp.html (view-source-is-contract).
   Brief: docs/briefs/2026-08-22-giftcard-pdp-wp-build.md.

   ONE SCREEN. The 2026-08-20 simplification cut the separate compose
   section, the live card-face preview, the gift-summary rows and the
   "how it works" list; what remains is the hero grid (card mockup +
   one decision column) and the shared dark closer. The rules for the
   removed surfaces (.cp-grid / .cp-preview / .cp-cardshot / .cp-summary
   / .cp-sumrow / .cp-note / .cp-step / .cp-actions / .cp-gate / .hw /
   .hp-grid / .hp-shot / .hp-overline / .hp-meta / .wp-sec / .wp-title /
   .wp-lead / .wp-body) went with them.

   SCOPING DISCIPLINE (mirrors merch-pdp.css / wine-pdp.css): the prototype
   scopes every light token to `.gcpdp13`, 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-gift-card-pdp`, emitted by
   get_block_wrapper_attributes() in render.php — IS that scope boundary;
   there is no separate `.gcpdp13` class. Generic names that collide with
   the dark chrome's globals in style.css keep the prototype's `.wp-wrap` /
   `.wp-eyebrow` 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. So the block scope
   declares the full set locally, exactly as .rhinory-merch-pdp does —
   values copied, not re-derived. The `--ink` / `--muted` / `--rule*` /
   `--burgundy-*` aliases are what let variant-selector.css resolve here
   without shop-all.css, same as the prototype's own aliases.

   STRIPPED ON PORT (CD README §7 — review scaffold, ships nothing):
   the `.rvw` state-switcher rules and `.cp-input.is-focus-demo`, the
   review-only mirror of the native focus ring. The `.cp-sdk` side-cart
   mock is likewise design-review commentary, not storefront copy, and is
   not rendered by render.php — its rules are absent here too.
   ============================================================ */

.rhinory-gift-card-pdp{
  /* light-warm register (prototype .light-warm + .gcpdp13 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;
  --burgundy-tint:rgba(82,0,0,0.07);
  --rule-burg:rgba(82,0,0,0.24);
  --acacia:#B97727;
  /* aliases variant-selector.css resolves against */
  --ink:#2D2926;
  --ink-2:#3A352F;
  --muted:#717271;
  --rule:rgba(45,41,38,0.10);
  --rule-2:rgba(45,41,38,0.18);
  /* Error hue is NOT burgundy. Burgundy is the accent that paints every CTA
     on this surface, so an error painted in it reads as an invitation. This
     is the warm red already established for form errors in 13/14-login.html
     (--c7-error #8A1F1F, ~5.7:1 on paper) reused verbatim, not a new colour. */
  --err:#8A1F1F;
  --err-bg:rgba(138,31,31,0.06);
  --err-rule:rgba(138,31,31,0.45);
  /* 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-gift-card-pdp *{ box-sizing:border-box }
.rhinory-gift-card-pdp a{ color:var(--burgundy); text-decoration:none }
.rhinory-gift-card-pdp a:hover{ color:var(--burgundy-2) }
.rhinory-gift-card-pdp .wp-wrap{ width:100%; max-width:1280px; margin:0 auto; padding:0 56px }
.rhinory-gift-card-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-gift-card-pdp .wp-eyebrow::before{ content:""; width:24px; height:1px; background:var(--burgundy) }
.rhinory-gift-card-pdp section{ scroll-margin-top:96px }

/* ---- breadcrumb ----
   Inside the hero decision column, so the card art can start at y=0 of
   <main> with no paper band above it. */
.rhinory-gift-card-pdp .wp-crumb-row{ margin:0 0 26px 0; 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-gift-card-pdp .wp-crumb-row a{ color:var(--rhino-warm); transition:color .2s }
.rhinory-gift-card-pdp .wp-crumb-row a:hover{ color:var(--burgundy) }
.rhinory-gift-card-pdp .wp-crumb-row .sep{ color:var(--rule-warm-2) }
.rhinory-gift-card-pdp .wp-crumb-row .current{ color:var(--burgundy) }

/* ---- HERO ----
   The gift-card mockup flush to the top-left corner of <main>, and ONE
   column beside it carrying everything a shopper decides: amount, recipient
   email, gift message, add. The mockup is deliberately smaller than the
   bundle PDP's lifestyle frame, because on this surface the decisions are
   the product. */
.rhinory-gift-card-pdp .hp-hero{ display:grid; grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr); align-items:start; border-bottom:1px solid var(--rule-warm-2) }
.rhinory-gift-card-pdp .gh-card{ position:relative; margin:0; padding:0; overflow:hidden; aspect-ratio:4/3; background:var(--card-2); border-right:1px solid var(--rule-warm-2) }
.rhinory-gift-card-pdp .gh-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; filter:saturate(.96) contrast(1.02) }
.rhinory-gift-card-pdp .gh-card::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--burgundy); opacity:.45; z-index:2 }
/* No synced image and no featured image — the honest stand-in, never a broken <img>. */
.rhinory-gift-card-pdp .gh-card .img-slot{ position:absolute; inset:0; display:grid; place-items:center; padding:24px; text-align:center; background:var(--card-2); font-family:var(--ff-label); font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--rhino-warm) }
.rhinory-gift-card-pdp .hp-detail{ display:flex; flex-direction:column; padding:26px 56px 96px 56px; max-width:720px }
.rhinory-gift-card-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:18px 0 0 0 }
.rhinory-gift-card-pdp .hp-name em{ font-style:italic; color:var(--burgundy) }
.rhinory-gift-card-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-gift-card-pdp .hp-region .sep{ opacity:.4 }
.rhinory-gift-card-pdp .hp-region b{ color:var(--burgundy); font-weight:600 }
.rhinory-gift-card-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 }
.rhinory-gift-card-pdp .hp-teaser strong{ color:var(--ink-warm); font-weight:600 }
.rhinory-gift-card-pdp .hp-teaser em{ font-style:italic; color:var(--burgundy) }

/* ---- buy row ---- */
.rhinory-gift-card-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-gift-card-pdp .hp-price{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.rhinory-gift-card-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-gift-card-pdp .hp-price .unit{ font-family:var(--ff-label); font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--rhino-warm) }
.rhinory-gift-card-pdp .hp-actions{ display:flex; flex-wrap:wrap; gap:12px; width:100%; margin-top:6px }
.rhinory-gift-card-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-gift-card-pdp .hp-add .arr{ transition:transform .25s }
.rhinory-gift-card-pdp .hp-add:hover{ background:var(--burgundy-2); transform:translateY(-1px) }
.rhinory-gift-card-pdp .hp-add:hover .arr{ transform:translateX(4px) }
.rhinory-gift-card-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-gift-card-pdp .hp-sec:hover{ border-color:var(--burgundy); color:var(--burgundy) }
.rhinory-gift-card-pdp .hp-sec .ic{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }

/* ============================================================
   THE TWO GIFT FIELDS — recipient email + gift message, in the hero.
   The inputs feed the plugin's buy-trigger attributes
   data-winery-c7-gift-recipient-email (required) and
   data-winery-c7-gift-message (optional, 500 cap). Everything the
   plugin cannot forward is absent: recipient name, scheduled
   delivery, and from-name.
   Contract: ~/dev/wordpress-for-wineries/docs/contract.md
     § data-winery-c7-gift-recipient-email / -gift-message.
   ============================================================ */
.rhinory-gift-card-pdp .cp-form{ display:flex; flex-direction:column; gap:0; margin-top:30px; padding-top:28px; border-top:1px solid var(--rule-warm-2) }
.rhinory-gift-card-pdp .cp-fields{ display:grid; grid-template-columns:1fr; gap:22px }
.rhinory-gift-card-pdp .cp-field{ display:flex; flex-direction:column; gap:9px }
.rhinory-gift-card-pdp .cp-field.wide{ grid-column:1 / -1 }
.rhinory-gift-card-pdp .cp-lbl{ font-family:var(--ff-label); font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-warm) }
.rhinory-gift-card-pdp .cp-lbl .opt{ color:var(--rhino-warm); margin-left:8px }
.rhinory-gift-card-pdp .cp-input,
.rhinory-gift-card-pdp .cp-textarea{ width:100%; min-height:52px; padding:14px 16px; background:var(--paper); border:1px solid var(--rule-warm-2); border-radius:2px; font-family:var(--ff-body); font-size:16px; line-height:1.5; color:var(--ink-warm) }
.rhinory-gift-card-pdp .cp-textarea{ min-height:112px; resize:vertical }
.rhinory-gift-card-pdp .cp-input::placeholder,
.rhinory-gift-card-pdp .cp-textarea::placeholder{ color:var(--rhino-warm); font-style:italic }
.rhinory-gift-card-pdp .cp-input:focus-visible,
.rhinory-gift-card-pdp .cp-textarea:focus-visible{ outline:2px solid var(--burgundy); outline-offset:2px; border-color:var(--burgundy) }

/* ------------------------------------------------------------
   RECIPIENT EMAIL — required, and honest about it.
   The required mark is a word, not a bare asterisk: this is the one
   field on the page that decides whether a stranger ever sees the
   gift, so it is worth eleven characters of Josefin.
   ------------------------------------------------------------ */
.rhinory-gift-card-pdp .cp-lbl .req{ font-size:9.5px; letter-spacing:0.2em; color:var(--burgundy); margin-left:9px }
.rhinory-gift-card-pdp .cp-help{ margin:0; font-family:var(--ff-body); font-size:14px; line-height:1.55; color:var(--rhino-warm) }
.rhinory-gift-card-pdp .cp-err{ display:none; align-items:flex-start; gap:9px; margin:0; font-family:var(--ff-body); font-size:14px; line-height:1.5; color:var(--err) }
.rhinory-gift-card-pdp .cp-err .x{ flex:0 0 auto; width:16px; height:16px; margin-top:2px; border:1px solid var(--err-rule); border-radius:50%; display:grid; place-items:center; font-family:var(--ff-label); font-size:10px; font-weight:600; line-height:1 }
.rhinory-gift-card-pdp .cp-field.is-invalid .cp-err{ display:flex }
.rhinory-gift-card-pdp .cp-field.is-invalid .cp-help{ display:none }
.rhinory-gift-card-pdp .cp-field.is-invalid .cp-input{ border-color:var(--err); background:var(--err-bg) }
.rhinory-gift-card-pdp .cp-field.is-invalid .cp-input:focus-visible{ outline-color:var(--err); border-color:var(--err) }

/* ---- gift message expander (mirrors the live C7 SDK affordance) ---- */
.rhinory-gift-card-pdp .cp-exp{ margin-top:30px; width:100%; display:flex; align-items:center; gap:12px; min-height:52px; padding:16px 0; background:none; border:0; border-top:1px solid var(--rule-warm-2); border-bottom:1px solid var(--rule-warm-2); cursor:pointer; font-family:var(--ff-label); font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--burgundy); text-align:left }
.rhinory-gift-card-pdp .cp-exp .pm{ flex:0 0 auto; width:20px; height:20px; border:1px solid var(--rule-burg); display:grid; place-items:center; font-size:13px; line-height:1; transition:background .2s, border-color .2s }
.rhinory-gift-card-pdp .cp-exp .pm::after{ content:"+" }
.rhinory-gift-card-pdp .cp-exp[aria-expanded="true"] .pm::after{ content:"\2212" }
.rhinory-gift-card-pdp .cp-exp:hover .pm{ border-color:var(--burgundy); background:var(--burgundy-tint) }
.rhinory-gift-card-pdp .cp-exp .opt{ margin-left:auto; color:var(--rhino-warm); font-size:10px; letter-spacing:0.18em }
.rhinory-gift-card-pdp .cp-exp:focus-visible{ outline:2px solid var(--burgundy); outline-offset:3px }
.rhinory-gift-card-pdp .cp-msgpanel{ padding:22px 0 4px }
.rhinory-gift-card-pdp .cp-count{ display:flex; justify-content:flex-end; margin:9px 0 0; font-family:var(--ff-label); font-size:10px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--rhino-warm); font-variant-numeric:tabular-nums }
.rhinory-gift-card-pdp .cp-count.is-near{ color:var(--burgundy) }

/* ---- buy-trigger states (in-flight, added, failed) ---- */
.rhinory-gift-card-pdp .hp-add[aria-busy="true"]{ opacity:.74; cursor:progress; transform:none }
.rhinory-gift-card-pdp .hp-add[aria-busy="true"]:hover{ background:var(--burgundy); transform:none }
.rhinory-gift-card-pdp .cp-spin{ display:inline-block; width:13px; height:13px; border:1.5px solid rgba(251,247,238,0.4); border-top-color:var(--paper); border-radius:50%; animation:rhinoryGcSpin .72s linear infinite }
@keyframes rhinoryGcSpin{ to{ transform:rotate(360deg) } }

.rhinory-gift-card-pdp .cp-status{ margin-top:24px; border:1px solid var(--rule-warm-2); border-left:2px solid var(--burgundy); background:var(--paper); padding:22px 24px }
.rhinory-gift-card-pdp .cp-status .k{ display:flex; align-items:center; gap:9px; font-family:var(--ff-label); font-size:10px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--burgundy); margin:0 0 11px }
.rhinory-gift-card-pdp .cp-status p{ margin:0; font-family:var(--ff-body); font-size:15px; line-height:1.66; color:var(--ink-warm) }
.rhinory-gift-card-pdp .cp-status p + p{ margin-top:10px }
.rhinory-gift-card-pdp .cp-status.is-error{ border-left-color:var(--err); background:var(--err-bg) }
.rhinory-gift-card-pdp .cp-status.is-error .k{ color:var(--err) }
.rhinory-gift-card-pdp .cp-retry{ margin-top:16px; display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:12px 20px; background:none; border:1px solid var(--err-rule); border-radius:2px; cursor:pointer; font-family:var(--ff-label); font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--err) }
.rhinory-gift-card-pdp .cp-retry:hover{ background:rgba(138,31,31,0.09) }
.rhinory-gift-card-pdp .cp-retry:focus-visible{ outline:2px solid var(--err); outline-offset:2px }
.rhinory-gift-card-pdp .cp-code{ display:inline-block; margin-top:14px; padding:5px 9px; border:1px dashed var(--err-rule); background:rgba(255,255,255,0.5); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px; letter-spacing:0.02em; color:var(--err); word-break:break-all }
.rhinory-gift-card-pdp .cp-code b{ font-weight:400; opacity:.62 }

/* ---- dark closer ----
   The SHARED cross-page band, matching the wine + bundle PDPs — same
   photograph, same scrim. Without the image this was a flat near-black strip
   stacked directly on the dark site footer, and the two read as a duplicated
   footer; the photograph is what makes a closer a closer. */
.rhinory-gift-card-pdp .cl-close{ position:relative; overflow:hidden; background:#1A1512; color:var(--paper); text-align:center; padding:120px 0 }
.rhinory-gift-card-pdp .cl-rhino{ position:absolute; inset:0; z-index:0 }
/* `display:contents` on the <picture> the image pipeline emits — the wrapper
   must stay transparent to the box model or the cover image loses its frame. */
.rhinory-gift-card-pdp .cl-rhino picture{ display:contents }
.rhinory-gift-card-pdp .cl-rhino img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block }
.rhinory-gift-card-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-gift-card-pdp .cl-close .wp-wrap{ position:relative; z-index:2 }
.rhinory-gift-card-pdp .cl-close .wp-eyebrow{ color:rgba(251,247,238,0.72); justify-content:center }
.rhinory-gift-card-pdp .cl-close .wp-eyebrow::before{ background:rgba(251,247,238,0.5) }
.rhinory-gift-card-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:20ch }
.rhinory-gift-card-pdp .cl-close h2 em{ font-style:italic; color:var(--acacia) }
.rhinory-gift-card-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 }
.rhinory-gift-card-pdp .cl-close .body em{ font-style:italic; color:var(--bone) }
.rhinory-gift-card-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-gift-card-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-gift-card-pdp .cl-close .triad span{ color:#E8B4A0; margin:0 6px }

/* ---- responsive ---- */
@media (max-width:1024px){
  .rhinory-gift-card-pdp .wp-wrap{ padding:0 40px }
  .rhinory-gift-card-pdp .hp-hero{ grid-template-columns:1fr }
  .rhinory-gift-card-pdp .gh-card{ border-right:0; border-bottom:1px solid var(--rule-warm-2) }
  .rhinory-gift-card-pdp .hp-detail{ padding:30px 40px 76px 40px; max-width:none }
}
@media (max-width:560px){
  .rhinory-gift-card-pdp .wp-wrap{ padding:0 22px }
  .rhinory-gift-card-pdp .hp-detail{ padding:26px 22px 60px 22px }
  .rhinory-gift-card-pdp .hp-actions{ flex-direction:column }
  .rhinory-gift-card-pdp .hp-add,
  .rhinory-gift-card-pdp .hp-sec{ width:100%; flex:1 1 auto }
  .rhinory-gift-card-pdp .cp-fields{ grid-template-columns:1fr }
}
@media (prefers-reduced-motion:reduce){
  .rhinory-gift-card-pdp .cp-spin{ animation-duration:2.4s }
}