/* ============================================================
   RHINORY v13 GIFTING: /gifting/
   ------------------------------------------------------------
   Brief: docs/briefs/2026-10-08-port-09-gifting-v13.md
   Design source (ports, not re-derivations):
     prototypes/13/09-gifts.html + 09-gifts.css @ 5333623d
     prototypes/13/v13-shared.css (palette, type scale)

   TWO JOBS, ONE FILE (the arrangement assets/css/gifts.css had before it):

   (1) PAINT of the theme-authored sections in templates/page-gifting.html:
       hero, section heads, the Drawn to Protect gate rows, corporate band,
       "Beyond the bottle" strip and the closer. Class hooks `gx-*`.

   (2) LAYOUT of the plugin's winery/product-catalog cards in this page's
       four product slots (`.gx-slot--featured / --grid / --magnums /
       --crash`). Paint on published `.winery-*` class hooks and `--winery-*`
       tokens only. Nothing here forks a renderer, renames a class or touches
       the frozen `.winery-c7-*` / `data-winery-c7-*` surface. The site-wide
       card system (assets/css/winery-storefront.css) still draws the member
       line, the member-price popover and the price row; this file adjusts
       what it must for the gift photography and the wide cards.
       Contract: ~/dev/wordpress-for-wineries/docs/contract.md § Product card,
       § winery/product-catalog

   Every rule is rooted on `.rhinory-page--gifting` (the template's <main>).
   That keeps the unconditional editor-style registration in functions.php
   inert on every other canvas, and it settles the cascade against
   winery-storefront.css by specificity rather than print order.

   NOT PORTED from the prototype: the review scaffold (`.rv`), the order-by
   `data-seasonal` / `body[data-season]` switch (an operator hides a section
   or the order-by line with the Site Editor's "Hide" instead, which renders
   nothing at all), the per-card category label (Cowork triage G3: no data
   source) and the "Members from (est.)" script (the plugin's own
   `__member-preview--estimate` does that job).
   ============================================================ */

/* ============================================================
   0 · SCOPE, TOKENS, RHYTHM
   ============================================================ */
.rhinory-page--gifting {
	--gx-paper: #FBF7EE;
	--gx-paper-2: #F7F1E5;
	--gx-card: #F4EEE0;
	--gx-card-2: #EAE1CE;
	--gx-ink: #2D2926;
	--gx-ink-2: #3A352F;
	--gx-ink-3: #4A443D;
	--gx-muted: #717271;
	--gx-burgundy: #520000;
	--gx-burgundy-2: #3D0000;
	--gx-burgundy-tint: rgba(82, 0, 0, 0.06);
	--gx-acacia: #B97727;
	--gx-reserve: #211B18;
	--gx-ivory: #F3F2ED;
	--gx-carbon: #1A1512;
	--gx-rule: rgba(45, 41, 38, 0.11);
	--gx-rule-2: rgba(45, 41, 38, 0.18);
	--gx-rule-burg: rgba(82, 0, 0, 0.24);
	--gx-closer: color-mix(in oklab, #717271 16%, #FBF7EE);
	--gx-ff-display: "Cormorant Garamond", Georgia, serif;
	--gx-ff-label: "Josefin Sans", system-ui, sans-serif;
	--gx-ff-body: "Lora", Georgia, serif;
	--gx-type-hero: clamp(46px, 6vw, 84px);
	--gx-type-h2: clamp(40px, 5.4vw, 76px);
	--gx-type-h3: clamp(26px, 2.6vw, 34px);
	--gx-max: 1360px;
	--gx-gutter: 56px;
	--gx-sec-pad: 112px;
	display: block;
	background: var(--gx-paper);
	color: var(--gx-ink);
	font-family: var(--gx-ff-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
@media (max-width: 1024px) {
	.rhinory-page--gifting { --gx-gutter: 40px; }
}
@media (max-width: 900px) {
	.rhinory-page--gifting { --gx-sec-pad: 76px; }
}
@media (max-width: 560px) {
	.rhinory-page--gifting { --gx-gutter: 22px; }
}
/* Core's flow layout hangs a block-gap margin off every direct child of a
   core/group. Every band here sets its own rhythm from its own padding, so the
   inherited gap is zeroed once; anything that wants a margin declares it
   below at higher or equal specificity. */
.rhinory-page--gifting > *,
.rhinory-page--gifting .wp-block-group > *,
.rhinory-page--gifting .wp-block-wp-commerce7-audience > * {
	margin-block: 0;
}
/* The theme's <main> keeps a bottom padding for pages that end on paper; this
   one ends on the closer band, which runs into the footer. Class doubled for
   (0,2,0) so print order does not decide it. */
.rhinory-page.rhinory-page--gifting {
	padding-bottom: 0;
}
.rhinory-page--gifting .gx-wrap {
	width: 100%;
	max-width: var(--gx-max);
	margin-inline: auto;
	padding-inline: var(--gx-gutter);
}
/* (0,0,1) on purpose: the plugin's card CTAs are links too and colour
   themselves with a single class; this must not outrank them. */
:where(.rhinory-page--gifting) a {
	color: var(--gx-burgundy);
	text-decoration: none;
}
.rhinory-page--gifting h1,
.rhinory-page--gifting h2,
.rhinory-page--gifting h3 {
	font-family: var(--gx-ff-display);
	font-weight: 500;
	color: var(--gx-ink);
	margin: 0;
	text-wrap: pretty;
}
/* Headline rule (prototype canon § 4): two lines, the second italic, at most
   one accent word in burgundy. The accent is core's text-colour format
   (`mark.has-inline-color`), so an operator can move or drop it in the canvas
   with the Highlight tool; `gx-acc` is the class this page paints. */
.rhinory-page--gifting h1 em,
.rhinory-page--gifting h2 em {
	font-style: italic;
	font-weight: 500;
	color: inherit;
}
.rhinory-page--gifting mark.gx-acc {
	background: transparent;
	color: var(--gx-burgundy);
}

/* ============================================================
   1 · BUTTONS  (prototype `.g-btn`): a paragraph of links, same size, no wrap
   ============================================================ */
.rhinory-page--gifting .gx-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
.rhinory-page--gifting .gx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	min-width: 220px;
	padding: 17px 30px;
	border: 1px solid var(--gx-acacia);
	border-radius: 2px;
	background: var(--gx-acacia);
	color: #1C1916;
	font-family: var(--gx-ff-label);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background 0.2s, transform 0.18s, color 0.2s, border-color 0.2s;
}
.rhinory-page--gifting .gx-btn:hover,
.rhinory-page--gifting .gx-btn:focus-visible {
	background: var(--gx-reserve);
	border-color: var(--gx-reserve);
	color: var(--gx-ivory);
	transform: translateY(-1px);
}
.rhinory-page--gifting .gx-btn--out {
	background: transparent;
	color: var(--gx-burgundy);
	border-color: var(--gx-rule-burg);
}
.rhinory-page--gifting .gx-btn--out:hover,
.rhinory-page--gifting .gx-btn--out:focus-visible {
	background: var(--gx-burgundy-tint);
	border-color: var(--gx-burgundy);
	color: var(--gx-burgundy);
}
/* gold pair on the dark corporate band */
.rhinory-page--gifting .gx-btn--gold {
	background: var(--gx-acacia);
	border-color: var(--gx-acacia);
	color: var(--gx-reserve);
	box-shadow: 0 12px 34px -14px rgba(185, 119, 39, 0.55);
}
.rhinory-page--gifting .gx-btn--gold:hover,
.rhinory-page--gifting .gx-btn--gold:focus-visible {
	background: var(--gx-ivory);
	border-color: var(--gx-ivory);
	color: var(--gx-reserve);
}
.rhinory-page--gifting .gx-btn--gold-out {
	background: transparent;
	border-color: rgba(243, 242, 237, 0.32);
	color: var(--gx-ivory);
	letter-spacing: 0.12em;
}
.rhinory-page--gifting .gx-btn--gold-out:hover,
.rhinory-page--gifting .gx-btn--gold-out:focus-visible {
	background: rgba(185, 119, 39, 0.08);
	border-color: var(--gx-acacia);
	color: var(--gx-ivory);
}
/* The phone glyph is painted, not authored: an inline <svg> does not survive
   a RichText edit, and the number itself is the label. */
.rhinory-page--gifting .gx-btn--phone::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 480px) {
	.rhinory-page--gifting .gx-btns .gx-btn { flex: 1 1 100%; }
}

/* ============================================================
   2 · HERO  (prototype `.g-hero`)
   ============================================================ */
.rhinory-page--gifting .gx-hero {
	background: var(--gx-paper);
	border-bottom: 1px solid var(--gx-rule-2);
	overflow: hidden;
}
.rhinory-page--gifting .gx-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: 76px;
	align-items: center;
	padding-block: 96px;
}
@media (max-width: 1100px) {
	.rhinory-page--gifting .gx-hero__grid {
		grid-template-columns: 1fr;
		gap: 40px;
		padding-block: 56px;
	}
}
.rhinory-page--gifting .gx-hero__headline {
	font-size: var(--gx-type-hero);
	line-height: 0.96;
	letter-spacing: -0.012em;
}
.rhinory-page--gifting .gx-hero__sub {
	margin-top: 26px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--gx-ink-2);
}
.rhinory-page--gifting .gx-hero .gx-btns {
	margin-top: 36px;
}
.rhinory-page--gifting .gx-hero__media {
	min-width: 0;
}

/* ---- the two editorial photos (blocks/gifting-photo) ----
   `--photo-focal` is the shared photo control's focal point; unset, the
   photo sits centred, as both prototype frames do. */
.rhinory-page--gifting .gx-photo {
	position: relative;
	overflow: hidden;
	background: var(--gx-carbon);
	aspect-ratio: 4 / 3;
}
.rhinory-page--gifting .gx-photo__img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: var(--photo-focal, 50% 50%);
	filter: saturate(0.94) contrast(1.04);
}
.rhinory-page--gifting .gx-photo--hero {
	box-shadow: 0 40px 84px -40px rgba(45, 41, 38, 0.52);
}
/* The hero's slow Ken Burns drift (assets/js/gifting.js writes --gx-kb; no
   scroll parallax since the 2026-11-03 pass). The frame bleeds 4% so the
   scale never shows an edge. */
.rhinory-page--gifting .gx-photo--hero .gx-photo__img {
	inset: -4%;
	transform: scale(var(--gx-kb, 1.02));
	will-change: transform;
}

/* ============================================================
   3 · SECTIONS + SECTION HEAD  (prototype `.gx-sec` / `.gx-head`)
   Grounds alternate paper / card, one dark interlude, gray closer.
   ============================================================ */
.rhinory-page--gifting .gx-sec {
	padding-block: var(--gx-sec-pad);
	border-top: 1px solid var(--gx-rule-2);
	scroll-margin-top: 96px;
}
.rhinory-page--gifting .gx-sec--card { background: var(--gx-card); }
.rhinory-page--gifting .gx-sec--paper { background: var(--gx-paper); }
.rhinory-page--gifting .gx-head {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 1100px;
	margin-bottom: 52px;
}
@media (max-width: 900px) {
	.rhinory-page--gifting .gx-head { margin-bottom: 36px; }
}
.rhinory-page--gifting .gx-head__heading {
	font-size: var(--gx-type-h2);
	line-height: 1.02;
	letter-spacing: -0.01em;
}
.rhinory-page--gifting .gx-lede {
	max-width: 56ch;
	font-size: 18px;
	line-height: 1.7;
	color: var(--gx-ink-2);
}
/* the logged-out member note under the grid's lede (an audience block) */
.rhinory-page--gifting .gx-member {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	font-family: var(--gx-ff-label);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--gx-ink-2);
}
.rhinory-page--gifting .gx-member::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: none;
	background: var(--gx-burgundy);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rhinory-page--gifting .gx-member a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.rhinory-page--gifting .gx-member a:hover { color: var(--gx-ink); }

/* ============================================================
   4 · PRODUCT SLOTS: the plugin's catalog, laid into this page
   ============================================================ */
/* Token overrides sit on the block roots, not on the page scope:
   winery-storefront.css declares the `--winery-*` set ON
   `.winery-product-catalog` / `.winery-product-card`, so a page-scope
   declaration would be shadowed (the same reasoning as gifts.css had). */
.rhinory-page--gifting .gx-slot,
.rhinory-page--gifting .gx-slot .winery-product-card {
	/* the slot already sits inside `.gx-wrap`: no second measure or gutter */
	--winery-catalog-max-width: none;
	--winery-catalog-inline-gutter: 0px;
	--winery-shop-max-width: none;
	--winery-shop-inline-gutter: 0px;
	--winery-catalog-headerless-block-start-padding: 0;
	--winery-catalog-background: transparent;
	--winery-catalog-grid-gap: 24px;
	--winery-card-background: var(--gx-paper);
	--winery-card-border-color: var(--gx-rule-2);
	--winery-card-media-aspect-ratio: 4 / 3;
	/* gift photography is full-bleed, not a bottle on a ground */
	--winery-card-media-inset: 0px;
	--winery-card-padding: 24px;
	--winery-card-cta-background: var(--gx-burgundy);
	--winery-card-cta-background-hover: var(--gx-burgundy-2);
	--winery-card-cta-color: var(--gx-paper);
}
.rhinory-page--gifting .gx-slot.winery-product-catalog {
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
}
/* The layout wrapper is the plugin's two-track grid (facet rail + products);
   no slot here has a rail, and a single-card slot otherwise sizes its card to
   the rail's 220px track. */
.rhinory-page--gifting .gx-slot .winery-product-catalog__layout {
	display: block;
	/* the plugin's lead above a headerless catalog; the section head here
	   already sets the 52px (prototype `.gx-head`) */
	padding: 0;
}
.rhinory-page--gifting .gx-slot .winery-product-catalog__grid {
	margin-top: 0;
	background: none;
	border: 0;
}
.rhinory-page--gifting .gx-slot.winery-product-catalog--single .winery-product-catalog__grid {
	grid-template-columns: minmax(0, 1fr);
	justify-content: stretch;
}

/* ---- the card, every slot ---- */
.rhinory-page--gifting .gx-slot .winery-product-card.winery-product-card {
	background: var(--gx-paper);
	border: 1px solid var(--gx-rule-2);
	transition: background 0.22s, border-color 0.22s;
}
.rhinory-page--gifting .gx-slot .winery-product-card.winery-product-card:hover,
.rhinory-page--gifting .gx-slot .winery-product-card.winery-product-card:focus-within {
	background: var(--gx-paper-2);
	border-color: var(--gx-rule-burg);
	transform: none;
}
/* /shop/'s hover ring would double the border above */
.rhinory-page--gifting .gx-slot .winery-product-card.winery-product-card::after { content: none; }
.rhinory-page--gifting .gx-slot .winery-product-card__media {
	background: var(--gx-card-2);
	border-bottom: 1px solid var(--gx-rule);
}
.rhinory-page--gifting .gx-slot .winery-product-card__image,
.rhinory-page--gifting .gx-slot .winery-product-card__secondary-image {
	object-fit: cover;
	filter: saturate(0.96) contrast(1.03);
	transform-origin: 50% 50%;
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rhinory-page--gifting .gx-slot .winery-product-card:hover .winery-product-card__image,
.rhinory-page--gifting .gx-slot .winery-product-card:focus-within .winery-product-card__image {
	transform: scale(1.05);
}
.rhinory-page--gifting .gx-slot .winery-product-card__body {
	padding: 24px var(--winery-card-padding) var(--winery-card-padding);
}
/* No category label (Cowork triage G3): the plugin's eyebrow is the primary
   collection, which reads "Keras" / "Signature" here and on one set carries a
   year. Hidden on this page, not removed: /shop/ and the PDPs keep it. */
.rhinory-page--gifting .gx-slot .winery-product-card__eyebrow,
.rhinory-page--gifting .gx-slot .winery-product-card__vintage {
	display: none;
}
.rhinory-page--gifting .gx-slot .winery-product-card__title {
	font-family: var(--gx-ff-display);
	font-weight: 500;
	font-size: 28px;
	line-height: 1.08;
	margin: 0;
}
.rhinory-page--gifting .gx-slot .winery-product-card__title-link { color: var(--gx-ink); }
.rhinory-page--gifting .gx-slot .winery-product-card__title-link:hover { color: var(--gx-burgundy); }
/* The one-line teaser is the plugin's card-teaser field (Cowork triage D2):
   an operator writes it on the product, and it pushes to Commerce7. Until
   one exists the slot shows nothing. The plugin's fallback, the stripped
   excerpt, is hidden in every slot here: it is the long product description,
   and some of those name a partner in a way the page's canon does not allow. */
.rhinory-page--gifting .gx-slot .winery-product-card__excerpt {
	display: none;
}
.rhinory-page--gifting .gx-slot .winery-product-card__teaser {
	margin: 10px 0 0;
	font-family: var(--gx-ff-body);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.55;
	text-transform: none;
	color: var(--gx-ink-2);
	text-wrap: pretty;
}
/* ---- the bottle list (prototype `.gx-bottles`): one hairline row a bottle.
   The count ("3 bottles") is dropped where the list is shown; the Crash card
   shows the count instead of the list (§ 7). ---- */
.rhinory-page--gifting .gx-slot .winery-product-card__bundle-contents {
	margin: 16px 0 0;
}
.rhinory-page--gifting .gx-slot .winery-product-card__bundle-count {
	display: none;
}
.rhinory-page--gifting .gx-slot .winery-product-card__bundle-items {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rhinory-page--gifting .gx-slot .winery-product-card__bundle-item {
	display: block;
	padding: 9px 0;
	border-top: 1px solid var(--gx-rule);
	font-family: var(--gx-ff-body);
	font-size: 15px;
	line-height: 1.4;
	color: var(--gx-ink);
}
.rhinory-page--gifting .gx-slot .winery-product-card__bundle-item::before {
	content: none;
}
.rhinory-page--gifting .gx-slot .winery-product-card__price,
.rhinory-page--gifting .gx-slot .winery-product-card__price-now {
	font-size: 32px;
}
/* A refused add (plugin 0.162.0): the cart answers with a readable reason,
   and the card writes it into its status region in place of the generic
   retry line. It reads in the page's body voice on its own line under the
   buttons; empty, the plugin keeps the live region visually hidden and out
   of flow (its `:empty` rule), so it takes no space. The price row is a
   wrapping flex row, or a two-column grid once the live member figure is
   shown (winery-storefront.css), so the line takes the full row in both:
   each layout ignores the other's property (Codex M1).
   Contract: ~/dev/wordpress-for-wineries/docs/contract.md § CSS class
   hooks : winery-c7-cart-add-status ; § JS events : winery-c7:cart-add-error */
.rhinory-page--gifting .gx-slot .winery-c7-cart-add-status:not(:empty) {
	flex-basis: 100%;
	grid-column: 1 / -1;
	margin: 10px 0 0;
	font-family: var(--gx-ff-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--gx-burgundy);
}

/* ---- perk badges ("Free shipping", "Gift box"), prototype `.gx-perks--sm` ----
   Brief 2026-10-08-catalog-badge-collections. One Commerce7 collection per
   perk, `free-shipping` (the collection the free-shipping promotion is
   scoped to) and `gift-box`, read from production on 2026-10-22. Every slot
   opts both in through `badgeCollections`, and the card emits
   `.winery-product-card__badge--<slug>` only for a collection its product is
   in, so which card says what is Commerce7 data: moving a product in or out
   of a collection changes its card at the next sync, with no deploy. No
   background: the badge sits on the card, which changes colour on hover.
   Contract: ~/dev/wordpress-for-wineries/docs/contract.md § Product card :
   .winery-product-card__badge--<term-slug> ; badgeCollections */
.rhinory-page--gifting .gx-slot .winery-product-card__badges {
	gap: 6px;
}
.rhinory-page--gifting .gx-slot .winery-product-card__badge--free-shipping,
.rhinory-page--gifting .gx-slot .winery-product-card__badge--gift-box {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 22px;
	padding: 0 7px;
	border: 1px solid var(--gx-rule-2);
	border-radius: 2px;
	background: none;
	font-family: var(--gx-ff-label);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--gx-ink-2);
}
.rhinory-page--gifting .gx-slot .winery-product-card__badge--free-shipping::before,
.rhinory-page--gifting .gx-slot .winery-product-card__badge--gift-box::before {
	content: "";
	width: 12px;
	height: 12px;
	flex: none;
	background: var(--gx-burgundy);
	-webkit-mask: var(--gx-perk-icon) center / contain no-repeat;
	mask: var(--gx-perk-icon) center / contain no-repeat;
}
.rhinory-page--gifting .gx-slot .winery-product-card__badge--free-shipping {
	--gx-perk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E");
}
.rhinory-page--gifting .gx-slot .winery-product-card__badge--gift-box {
	--gx-perk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5C10 3 12 8 12 8s2-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
}

/* Placement, grid and magnum cards: the prototype draws the perks in the
   body's top row, never on the photo. The plugin emits its badge group inside
   `__media`, so the photo's clip moves from the media box to the link inside
   it (which is what the image is positioned against), the group hangs just
   below the photo, and the body makes room for it only when the card has a
   badge group. The two wide cards place the group in the text column
   instead (§ 6 featured, § 7 Crash). */
.rhinory-page--gifting :is(.gx-slot--grid, .gx-slot--magnums) .winery-product-card__media {
	overflow: visible;
}
.rhinory-page--gifting :is(.gx-slot--grid, .gx-slot--magnums) .winery-product-card__media-link {
	overflow: hidden;
}
.rhinory-page--gifting :is(.gx-slot--grid, .gx-slot--magnums) .winery-product-card__badges {
	top: calc(100% + 24px);
	left: var(--winery-card-padding);
	right: var(--winery-card-padding);
	flex-direction: row;
	flex-wrap: wrap;
	z-index: 1;
}
/* The site card drops its badge group below an availability chip
   (winery-storefront.css, `__media:has(__availability) __badges`, specificity
   0,4,0), which would pull the perks back onto the photo; here they already
   sit under it (Codex M2). */
.rhinory-page--gifting :is(.gx-slot--grid, .gx-slot--magnums) .winery-product-card__media:has(.winery-product-card__availability) .winery-product-card__badges {
	top: calc(100% + 24px);
}
.rhinory-page--gifting :is(.gx-slot--grid, .gx-slot--magnums) .winery-product-card:has(.winery-product-card__badges) .winery-product-card__body {
	padding-top: calc(24px + 22px + 12px);
}

/* ============================================================
   5 · THE GRID + MAGNUMS  (prototype `.gx-grid`)
   ============================================================ */
/* The 300px column floor gifts.css established for the 3-up shelf: the
   plugin keeps three columns down to 64rem, which packs a column under 300px
   between 1025px and 1080px and cuts a set name. Step to two columns there.
   The lower bound stays one pixel above the plugin's own 48rem one-column
   step so this rule never holds two columns below it. */
@media (min-width: 48.0625rem) and (max-width: 1080px) {
	.rhinory-page--gifting .gx-slot--grid.winery-product-catalog--3-up .winery-product-catalog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.rhinory-page--gifting .gx-slot--magnums .winery-product-card {
	--winery-card-media-aspect-ratio: 16 / 9;
}
.rhinory-page--gifting .gx-slot--magnums .winery-product-card__image {
	object-position: 50% 48%;
}

/* ============================================================
   6 · FEATURED: Drawn to Protect, the wide card with the gate rows
   ------------------------------------------------------------
   The prototype draws the "Members exclusive" badge, the card body and the
   log-in / join rows as ONE right-hand column beside the photo. The badge
   and the rows are theme blocks; the photo and the body belong to the
   plugin's card. So the slot's wrappers and the card itself are given
   `display: contents` and `.gx-feature` lays the card's media and body out
   on its own grid, beside the badge and the rows.
   Front end only (`body:not(.editor-styles-wrapper)`): a boxless block
   wrapper cannot be selected in the Site Editor canvas, so there the card
   keeps its own box and the rows stack under it.
   The card's buttons are the plugin's (brief
   2026-10-08-gated-card-member-unlock). Drawn to Protect is a Club-only
   product, so the plugin renders its card gated for every viewer and picks
   the button in the browser: "Sign in" for a guest, "View details" once
   signed in, and "Add to cart" once the entitlement check says this
   customer may buy it; the cart re-checks every add. The theme hides one:
   the guest's "Sign in", because the log-in row beside the card is this
   page's sign-in and the prototype's signed-out state shows only the rows
   (Erik, 2026-10-21). Signed in, the plugin hides "Sign in" itself, so the
   rule changes nothing there.
   The perks (§ 4) take the prototype's foot slot, between the body and the
   gate rows. The plugin emits them inside the photo box, so on the front end
   that box is unwrapped too: its link takes the photo frame, and the badge
   group and any availability chip become items of `.gx-feature`'s grid. The
   chip keeps its place on the photo because `.gx-feature` is its containing
   block and its grid area is the photo's (an absolutely positioned grid child
   is positioned against its grid area).
   Contract: ~/dev/wordpress-for-wineries/docs/contract.md § Catalog
   anonymous security floor (0.142.0) : Member unlock on the card ;
   § Product card : .winery-product-card__badges */
.rhinory-page--gifting .gx-feature {
	background: var(--gx-paper);
	border: 1px solid var(--gx-rule-2);
}
.rhinory-page--gifting .gx-feature .gx-slot--featured .winery-product-card.winery-product-card {
	border: 0;
	background: transparent;
}
.rhinory-page--gifting .gx-feature .winery-product-card__cta--login {
	display: none;
}
body:not(.editor-styles-wrapper) .rhinory-page--gifting .gx-feature {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	grid-template-rows: 1fr auto auto auto auto 1fr;
	grid-template-areas:
		"media ."
		"media badge"
		"media body"
		"media perks"
		"media gate"
		"media .";
}
body:not(.editor-styles-wrapper) .rhinory-page--gifting .gx-feature .gx-slot--featured,
body:not(.editor-styles-wrapper) .rhinory-page--gifting .gx-feature .gx-slot--featured .winery-product-catalog__layout,
body:not(.editor-styles-wrapper) .rhinory-page--gifting .gx-feature .gx-slot--featured .winery-product-catalog__products,
body:not(.editor-styles-wrapper) .rhinory-page--gifting .gx-feature .gx-slot--featured .winery-product-catalog__grid,
body:not(.editor-styles-wrapper) .rhinory-page--gifting .gx-feature .gx-slot--featured .winery-product-card,
body:not(.editor-styles-wrapper) .rhinory-page--gifting .gx-feature .winery-product-card__media {
	display: contents;
}
/* The photo frame keeps the prototype's 4:3 and stretches with the column
   beside it when that runs taller; the plugin's absolutely placed image
   covers the link either way. */
body:not(.editor-styles-wrapper) .rhinory-page--gifting .gx-feature .winery-product-card__media-link {
	grid-area: media;
	position: relative;
	aspect-ratio: 4 / 3;
	/* Both axes stretched explicitly: a grid item with an aspect ratio is
	   otherwise sized from its stretched height and pushes into the body
	   column. The ratio still sets the row's minimum height. */
	justify-self: stretch;
	align-self: stretch;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background: var(--gx-card-2);
	border-right: 1px solid var(--gx-rule);
}
body:not(.editor-styles-wrapper) .rhinory-page--gifting .gx-feature .winery-product-card__availability {
	grid-area: media;
}
/* Sold out / coming soon: the site card dims `__media` to 0.62
   (winery-storefront.css), which paints nothing once it is boxless, so the
   photo frame and its chip carry the dimming here (Codex M1). */
body:not(.editor-styles-wrapper) .rhinory-page--gifting .gx-feature :is(.winery-product-card--sold-out, .winery-product-card--coming-soon) :is(.winery-product-card__media-link, .winery-product-card__availability) {
	opacity: 0.62;
}
body:not(.editor-styles-wrapper) .rhinory-page--gifting .gx-feature .winery-product-card__body {
	grid-area: body;
	min-width: 0;
	padding: 0 40px;
}
body:not(.editor-styles-wrapper) .rhinory-page--gifting .gx-feature .gx-badge {
	grid-area: badge;
	margin: 36px 40px 14px;
}
body:not(.editor-styles-wrapper) .rhinory-page--gifting .gx-feature .winery-product-card__badges {
	grid-area: perks;
	position: static;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 18px 40px 0;
}
body:not(.editor-styles-wrapper) .rhinory-page--gifting .gx-feature .gx-gate {
	grid-area: gate;
	padding: 18px 40px 34px;
}
@media (max-width: 980px) {
	body:not(.editor-styles-wrapper) .rhinory-page--gifting .gx-feature {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-template-areas:
			"media"
			"badge"
			"body"
			"perks"
			"gate";
	}
	body:not(.editor-styles-wrapper) .rhinory-page--gifting .gx-feature .winery-product-card__media-link {
		border-right: 0;
		border-bottom: 1px solid var(--gx-rule);
	}
	body:not(.editor-styles-wrapper) .rhinory-page--gifting .gx-feature .winery-product-card__body {
		padding: 0 26px;
	}
	body:not(.editor-styles-wrapper) .rhinory-page--gifting .gx-feature .gx-badge {
		margin: 28px 26px 14px;
	}
	body:not(.editor-styles-wrapper) .rhinory-page--gifting .gx-feature .winery-product-card__badges {
		margin: 16px 26px 0;
	}
	body:not(.editor-styles-wrapper) .rhinory-page--gifting .gx-feature .gx-gate {
		padding: 16px 26px 28px;
	}
}
/* The site card's 74px selling-block reserve and its bottom-pinning auto
   margin line buttons up across a row of cards. This card is alone in its
   column, so the price row keeps its hairline and neither of those. */
.rhinory-page--gifting .gx-feature .winery-product-card__price-row {
	min-height: 0;
	margin-top: 16px;
}
.rhinory-page--gifting .gx-feature .winery-product-card__body {
	padding-bottom: 0;
}
.rhinory-page--gifting .gx-feature .winery-product-card__title {
	font-size: clamp(28px, 2.4vw, 38px);
	line-height: 1.02;
	letter-spacing: -0.008em;
}
/* "Members exclusive" (prototype `.gx-badge--member`), an editable label */
.rhinory-page--gifting .gx-badge {
	justify-self: start;
	align-self: start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: max-content;
	padding: 7px 12px;
	border-radius: 2px;
	font-family: var(--gx-ff-label);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
}
.rhinory-page--gifting .gx-badge--member {
	background: #241C16;
	color: #E8C9A0;
}
.rhinory-page--gifting .gx-badge--member::before {
	content: "";
	width: 13px;
	height: 13px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='12' height='8' rx='1'/%3E%3Cpath d='M8 10V7a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='12' height='8' rx='1'/%3E%3Cpath d='M8 10V7a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* ---- the gate rows (two wp-commerce7/audience blocks) ----
   Each row is a sentence and one button. The plugin paints the audience
   wrapper's pending / hidden states; this only lays out a shown row. */
.rhinory-page--gifting .gx-gate__row:not(.winery-c7-audience--hidden):not(.winery-c7-audience--pending) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px 22px;
	padding: 16px 0;
	border-top: 1px solid var(--gx-rule);
}
.rhinory-page--gifting .gx-gate__text {
	flex: 1 1 220px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--gx-ink);
}

/* ============================================================
   7 · CRASH: the wide card, mirrored, no gate
   ------------------------------------------------------------
   The perks (§ 4) sit in the text column under the body, as on the featured
   card: the photo box is unwrapped so its link takes the photo frame and the
   badge group becomes a grid item. The two 1fr rows centre the text column
   beside the photo. The card is the availability chip's containing block
   (plugin `position: relative`), and the chip shares the photo's grid area.
   ============================================================ */
.rhinory-page--gifting .gx-slot--crash .winery-product-card.winery-product-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	grid-template-rows: 1fr auto auto 1fr;
	grid-template-areas:
		".     media"
		"body  media"
		"perks media"
		".     media";
}
.rhinory-page--gifting .gx-slot--crash .winery-product-card__media {
	display: contents;
}
.rhinory-page--gifting .gx-slot--crash .winery-product-card__media-link {
	grid-area: media;
	position: relative;
	aspect-ratio: 4 / 3;
	justify-self: stretch;
	align-self: stretch;
	min-width: 0;
	overflow: hidden;
	background: var(--gx-card-2);
	border-left: 1px solid var(--gx-rule);
}
.rhinory-page--gifting .gx-slot--crash .winery-product-card__availability {
	grid-area: media;
}
/* the § 6 dimming, for the same reason (Codex M1) */
.rhinory-page--gifting .gx-slot--crash :is(.winery-product-card--sold-out, .winery-product-card--coming-soon) :is(.winery-product-card__media-link, .winery-product-card__availability) {
	opacity: 0.62;
}
.rhinory-page--gifting .gx-slot--crash .winery-product-card__image {
	object-position: 50% 40%;
}
.rhinory-page--gifting .gx-slot--crash .winery-product-card__body {
	grid-area: body;
	padding: 52px 52px 48px;
}
.rhinory-page--gifting .gx-slot--crash .winery-product-card:has(.winery-product-card__badges) .winery-product-card__body {
	padding-bottom: 0;
}
.rhinory-page--gifting .gx-slot--crash .winery-product-card__badges {
	grid-area: perks;
	position: static;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 18px 52px 48px;
}
.rhinory-page--gifting .gx-slot--crash .winery-product-card__title {
	font-size: clamp(34px, 3.4vw, 48px);
	line-height: 1.02;
	letter-spacing: -0.008em;
}
/* six bottles: the count is the spec line, the list would be a wall */
.rhinory-page--gifting .gx-slot--crash .winery-product-card__bundle-count {
	display: block;
	margin: 10px 0 0;
	font-family: var(--gx-ff-label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--gx-ink-2);
}
.rhinory-page--gifting .gx-slot--crash .winery-product-card__bundle-items {
	display: none;
}
@media (max-width: 980px) {
	.rhinory-page--gifting .gx-slot--crash .winery-product-card.winery-product-card {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-template-areas:
			"media"
			"body"
			"perks";
	}
	.rhinory-page--gifting .gx-slot--crash .winery-product-card__media-link {
		border-left: 0;
		border-bottom: 1px solid var(--gx-rule);
	}
	.rhinory-page--gifting .gx-slot--crash .winery-product-card__body {
		padding: 32px 26px 28px;
	}
	.rhinory-page--gifting .gx-slot--crash .winery-product-card__badges {
		margin: 16px 26px 28px;
	}
}

/* ============================================================
   8 · CORPORATE: the one dark interlude (prototype `.gx-corp`)
   ============================================================ */
.rhinory-page--gifting .gx-corp {
	padding-block: var(--gx-sec-pad);
	background: var(--gx-reserve);
	color: var(--gx-ivory);
	border-top: 1px solid rgba(243, 242, 237, 0.12);
	scroll-margin-top: 96px;
}
.rhinory-page--gifting .gx-corp__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 72px;
	align-items: center;
}
@media (max-width: 1000px) {
	.rhinory-page--gifting .gx-corp__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}
.rhinory-page--gifting .gx-corp__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.rhinory-page--gifting .gx-corp__heading {
	font-size: clamp(40px, 4.4vw, 64px);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.012em;
	color: var(--gx-ivory);
}
.rhinory-page--gifting .gx-corp__heading em { font-weight: 600; }
.rhinory-page--gifting .gx-corp mark.gx-acc { color: var(--gx-acacia); }
.rhinory-page--gifting .gx-corp__body p {
	max-width: 54ch;
	font-size: 16px;
	line-height: 1.62;
	color: rgba(243, 242, 237, 0.9);
}
.rhinory-page--gifting .gx-corp__list {
	max-width: 54ch;
	margin: 4px 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(243, 242, 237, 0.16);
}
.rhinory-page--gifting .gx-corp__list li {
	position: relative;
	padding: 13px 0 13px 22px;
	border-bottom: 1px solid rgba(243, 242, 237, 0.16);
	font-size: 16px;
	line-height: 1.5;
	color: var(--gx-ivory);
}
.rhinory-page--gifting .gx-corp__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	background: var(--gx-acacia);
	transform: rotate(45deg);
}
.rhinory-page--gifting .gx-corp .gx-btns { margin-top: 12px; }
/* "Or email sales@... Order by December 14 ..." reads as one line; the
   seasonal sentence is its own paragraph so it can drop out of season. */
.rhinory-page--gifting .gx-corp-note p {
	display: inline;
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #E6DFD2;
}
.rhinory-page--gifting .gx-corp-note p + p::before { content: " "; }
.rhinory-page--gifting .gx-corp-note a {
	color: var(--gx-acacia);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.rhinory-page--gifting .gx-corp-note a:hover { color: var(--gx-ivory); }
/* The bundled ribbon photo's crop on this page (prototype 09). */
.rhinory-page--gifting .gx-photo--corporate.gx-photo--bundled .gx-photo__img {
	background-size: 120% auto;
	background-position: 15% 45%;
}

/* ============================================================
   9 · BEYOND THE BOTTLE  (prototype `.gx-tsr`)
   Ships hidden (Site Editor "Hide") until /legacybricks/ and the Wanda's Wee
   Zoo page exist on the new site; un-hiding it needs no code.
   ============================================================ */
.rhinory-page--gifting .gx-tsr {
	padding-block: 64px;
	background: var(--gx-paper);
	border-block: 1px solid var(--gx-rule-2);
}
.rhinory-page--gifting .gx-tsr__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 48px;
	align-items: center;
}
.rhinory-page--gifting .gx-tsr__copy {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 70ch;
}
.rhinory-page--gifting .gx-tsr__line {
	font-family: var(--gx-ff-display);
	font-weight: 500;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.28;
	color: var(--gx-ink);
	text-wrap: pretty;
}
.rhinory-page--gifting .gx-tsr__line em {
	font-style: italic;
	color: var(--gx-burgundy);
}
.rhinory-page--gifting .gx-tsr__meta {
	font-family: var(--gx-ff-label);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--gx-ink-2);
}
.rhinory-page--gifting .gx-tsr__sep {
	margin: 0 10px;
	color: var(--gx-burgundy);
}
.rhinory-page--gifting .gx-tsr__links {
	display: grid;
	grid-template-columns: repeat(2, minmax(220px, 1fr));
	gap: 12px;
}
.rhinory-page--gifting .gx-tsr__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid var(--gx-rule-2);
	font-family: var(--gx-ff-label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: border-color 0.2s, background 0.2s;
}
.rhinory-page--gifting .gx-tsr__link:hover,
.rhinory-page--gifting .gx-tsr__link:focus-visible {
	border-color: var(--gx-burgundy);
	background: rgba(82, 0, 0, 0.05);
}
@media (max-width: 1080px) {
	.rhinory-page--gifting .gx-tsr__grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	.rhinory-page--gifting .gx-tsr__links { justify-self: start; }
}
@media (max-width: 560px) {
	.rhinory-page--gifting .gx-tsr__links {
		grid-template-columns: 1fr;
		justify-self: stretch;
	}
}
/* The Bricks walkway photo leads the strip (prototype `.gx-tsr--photo`). */
.rhinory-page--gifting .gx-tsr__grid:has(> .gx-tsr__photo) {
	grid-template-columns: auto minmax(0, 1fr) auto;
}
.rhinory-page--gifting .gx-tsr__photo {
	width: 220px;
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 2px;
}
.rhinory-page--gifting .gx-tsr__photo a { display: block; height: 100%; }
.rhinory-page--gifting .gx-tsr__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 70%;
	filter: saturate(0.92) contrast(1.04);
}
@media (max-width: 1080px) {
	.rhinory-page--gifting .gx-tsr__grid:has(> .gx-tsr__photo) { grid-template-columns: auto minmax(0, 1fr); }
	.rhinory-page--gifting .gx-tsr__grid:has(> .gx-tsr__photo) .gx-tsr__links { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.rhinory-page--gifting .gx-tsr__grid:has(> .gx-tsr__photo) { grid-template-columns: 1fr; }
	.rhinory-page--gifting .gx-tsr__photo { width: 100%; }
}

/* ============================================================
   10 · CLOSER: gray band, two equal doors, the Conservation Circle bridge
   ============================================================ */
.rhinory-page--gifting .gx-close {
	padding-block: 104px 96px;
	background: var(--gx-closer);
	border-top: 1px solid var(--gx-rule-2);
	text-align: center;
}
@media (max-width: 900px) {
	.rhinory-page--gifting .gx-close { padding-block: 72px; }
}
.rhinory-page--gifting .gx-close__heading {
	font-size: var(--gx-type-h2);
	line-height: 1.02;
	letter-spacing: -0.01em;
}
.rhinory-page--gifting .gx-doors {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	max-width: 1040px;
	margin: 52px auto 0;
	text-align: left;
}
@media (max-width: 760px) {
	.rhinory-page--gifting .gx-doors { grid-template-columns: 1fr; }
}
.rhinory-page--gifting .gx-door {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-bottom: 28px;
	background: var(--gx-paper);
	border: 1px solid var(--gx-rule-2);
}
.rhinory-page--gifting .gx-door__img {
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #e7e7ea;
	border-bottom: 1px solid var(--gx-rule);
}
.rhinory-page--gifting .gx-door__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}
/* the gift-card photo is a studio shot on its own grey: cover, centred, with
   the prototype's lighter ground behind it while it loads */
.rhinory-page--gifting .gx-door__img--fit { background: #e9e9ec; }
.rhinory-page--gifting .gx-door__img--fit img {
	object-position: 50% 50%;
}
.rhinory-page--gifting .gx-door__heading {
	padding: 10px 28px 0;
	font-size: var(--gx-type-h3);
	line-height: 1.1;
}
.rhinory-page--gifting .gx-door__body {
	padding: 0 28px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--gx-ink-2);
}
.rhinory-page--gifting .gx-door__cta {
	margin-top: auto;
	padding: 0 28px;
}

/* ============================================================
   11 · REVEAL: assets/js/gifting.js adds `.gx-reveal`, then `.is-in`.
   Never applied under reduced motion (the script checks first), so the
   visual specs, which force it, see every section at rest.
   ============================================================ */
.rhinory-page--gifting .gx-reveal {
	opacity: 0;
	transform: translate3d(0, 20px, 0);
	transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rhinory-page--gifting .gx-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* ============================================================
   12 · REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.rhinory-page--gifting .gx-btn,
	.rhinory-page--gifting .gx-tsr__link,
	.rhinory-page--gifting .gx-slot .winery-product-card__image {
		transition: none;
	}
	.rhinory-page--gifting .gx-btn:hover,
	.rhinory-page--gifting .gx-slot .winery-product-card:hover .winery-product-card__image,
	.rhinory-page--gifting .gx-slot .winery-product-card:focus-within .winery-product-card__image {
		transform: none;
	}
	.rhinory-page--gifting .gx-photo--hero .gx-photo__img {
		transform: scale(1.02);
	}
	.rhinory-page--gifting .gx-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}