/* ============================================================
   RHINORY v13 PAINT for the theme-authored `winery/catalog-slot` content
   ------------------------------------------------------------
   Brief: docs/briefs/2026-08-29-shop-v13-fidelity-restore.md (Scope 1).
   Supersedes the flattened treatment first shipped under
   docs/briefs/2026-08-26-catalog-content-slot.md.

   Design source (this file is a PORT, do not re-derive):
     prototypes/13/11-shop-all.html  — `.sa-promo` (~L501-516), `.sa-slot` (~L521-528)
     prototypes/13/shop-all.css      — `.sa-promo*` (L758-773, L802-803),
                                       `.sa-slot*`  (L555-566)

   The plugin owns the slot WRAPPER (`.winery-catalog-slot` front end /
   `.winery-catalog-slot-edit` in the editor canvas) and stays brand-neutral.
   Everything painted here is the THEME-authored core-block content inside it
   (group / image / heading / paragraph / list / buttons), so every selector is
   rooted on a `.rhinory-shop-*` class rather than on a `.winery-*` hook — that
   is what lets one file serve the front end AND both editor canvases, where the
   plugin's wrapper class differs.

   WHY EVERY RULE IS ROOTED (`.rhinory-shop-slot .rhinory-shop-slot__note`, not
   the bare element class): the content is core blocks, so core's own
   `.is-layout-flow > :where(:not(:first-child))` margin rule and
   `.wp-block-image img` sizing rule both match at (0,1,0)/(0,1,1). Rooting each
   rule one class deeper wins on specificity instead of on print order, which is
   not guaranteed against core's block-library stylesheet.

   TOKENS: `--rhw-*` come from assets/css/winery-storefront.css, which declares
   them at `:root` as well as on the block roots. Each var() still carries the
   literal v13 fallback so this file paints correctly on its own if the
   storefront paint is ever absent (e.g. a slot embedded outside a catalog).
   ============================================================ */

/* ------------------------------------------------------------
   MEMBERSHIP PROMO — v13 `.sa-promo`
   Two-column media + copy, square corners, burgundy hairline.
   ------------------------------------------------------------ */

.rhinory-shop-promo {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	align-items: stretch;
	background: var(--rhw-card, #F4EEE0);
	color: var(--rhw-ink, #2D2926);
	border: 1px solid var(--rhw-rule-burg, rgba(82, 0, 0, 0.24));
	overflow: hidden;
}

/* Both slot roots host core blocks, so core's flow layout would otherwise put a
   24px block-gap on every child after the first — inside a grid/flex parent
   that reads as a stray 24px offset on the second column, not as spacing. */
.rhinory-shop-promo.rhinory-shop-promo > *,
.rhinory-shop-promo .rhinory-shop-promo__copy > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.rhinory-shop-promo .rhinory-shop-promo__media {
	position: relative;
	margin: 0;
	min-height: 270px;
	background-color: var(--rhw-card-2, #EAE1CE);
}

.rhinory-shop-promo .rhinory-shop-promo__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* NO right-edge fade overlay. shop-all.css:761 declares one on `.sa-promo-media`,
   but 11-shop-all.html's `<style id="replay-2026-08-07">` block overrides it
   away ("Item 4 — promo photo at full strength: drop the right-edge fade
   overlay"), and the rendered prototype is the pixel target, not the stylesheet
   read in isolation. Ported as the photo at full strength. */

/* container-type carries the v13 headline clamp (`min(--type-h2, 9cqw)`), so
   the display line scales against the copy COLUMN, not the viewport. */
.rhinory-shop-promo .rhinory-shop-promo__copy {
	padding: clamp(30px, 3.4vw, 50px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	container-type: inline-size;
}

/* NOT REMOVED with the markup: the slot's contents are core blocks an operator
   can re-add in the Site Editor, and paint that only exists while the default
   copy is in place is paint that breaks the first time someone restores it. */
.rhinory-shop-promo .rhinory-shop-promo__eyebrow {
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 11px;
	font-family: var(--rhw-ff-label, "Josefin Sans", system-ui, sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rhw-burgundy, #520000);
}

/* v13's `<span class="pip">` — a pseudo-element here so the eyebrow stays a
   plain editable paragraph in the Site Editor. */
.rhinory-shop-promo .rhinory-shop-promo__eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	flex: none;
	background: var(--rhw-burgundy, #520000);
}

/* The eyebrow above this is gone (v13 CD pass 2026-08-29 — decorative eyebrows
   removed across the page), so the 14px that used to separate the two would now
   read as a stray offset at the top of the copy column. The headline is the
   first element; it starts at zero. */
.rhinory-shop-promo .rhinory-shop-promo__headline {
	margin: 0;
	max-width: 22ch;
	font-family: var(--rhw-ff-display, "Cormorant Garamond", Georgia, serif);
	font-weight: 500;
	font-size: min(var(--rhw-type-h2, clamp(40px, 5.4vw, 76px)), 9cqw);
	line-height: 1.04;
	letter-spacing: -0.008em;
	color: var(--rhw-ink, #2D2926);
	text-wrap: pretty;
}

.rhinory-shop-promo .rhinory-shop-promo__headline em {
	font-style: italic;
	font-weight: 500;
	color: var(--rhw-burgundy, #520000);
}

.rhinory-shop-promo .rhinory-shop-promo__points {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.rhinory-shop-promo .rhinory-shop-promo__points li {
	display: flex;
	align-items: baseline;
	gap: 11px;
	font-family: var(--rhw-ff-body, "Lora", Georgia, serif);
	font-size: var(--rhw-type-body, 16px);
	line-height: 1.45;
	color: var(--rhw-ink-2, #4A443D);
}

.rhinory-shop-promo .rhinory-shop-promo__points li::before {
	content: "";
	width: 5px;
	height: 5px;
	flex: none;
	transform: translateY(-2px);
	background: var(--rhw-burgundy, #520000);
}

.rhinory-shop-promo .rhinory-shop-promo__cta {
	margin: 26px 0 0;
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}

.rhinory-shop-promo .rhinory-shop-promo__cta > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.rhinory-shop-promo .rhinory-shop-promo__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 26px;
	min-height: 48px;
	background: var(--rhw-burgundy, #520000);
	color: var(--rhw-paper, #FBF7EE);
	border: 1px solid var(--rhw-burgundy, #520000);
	border-radius: 2px;
	font-family: var(--rhw-ff-label, "Josefin Sans", system-ui, sans-serif);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s, transform 0.18s;
}

/* Decorative arrow as generated content, matching v13's `aria-hidden` span —
   keeps the button LABEL a clean editable string in the inserter. */
.rhinory-shop-promo .rhinory-shop-promo__cta .wp-block-button__link::after {
	content: "\2192";
	font-size: 13px;
	line-height: 1;
}

.rhinory-shop-promo .rhinory-shop-promo__cta .wp-block-button__link:hover,
.rhinory-shop-promo .rhinory-shop-promo__cta .wp-block-button__link:focus {
	background: var(--rhw-burgundy-2, #3D0000);
	color: var(--rhw-paper, #FBF7EE);
	transform: translateY(-1px);
}

.rhinory-shop-promo .rhinory-shop-promo__note {
	margin: 0;
	max-width: 30ch;
	font-family: var(--rhw-ff-label, "Josefin Sans", system-ui, sans-serif);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.65;
	color: var(--rhw-muted, #8A8177);
}

/* ------------------------------------------------------------
   PROMOTIONAL BAR — v13 `.sa-slot`
   Compact horizontal band: icon + copy + inline arrow link.
   ------------------------------------------------------------ */

.rhinory-shop-slot {
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 26px 34px;
	flex-wrap: wrap;
	background: var(--rhw-burgundy-tint, rgba(82, 0, 0, 0.07));
	border: 1px solid var(--rhw-rule-burg, rgba(82, 0, 0, 0.24));
}

/* Same core flow-layout reset as the promo above (0,2,0) — core's own rule is
   (0,1,0), so doubling the class decides this on specificity, not print order. */
.rhinory-shop-slot.rhinory-shop-slot > *,
.rhinory-shop-slot .rhinory-shop-slot__copy > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* v13 inlines a 24-box stroked truck SVG. Masked rather than embedded so the
   glyph takes --rhw-burgundy (single-accent discipline) and the slot content
   stays pure core blocks — no core/html block for an operator to break. */
.rhinory-shop-slot::before {
	content: "";
	width: 30px;
	height: 30px;
	flex: none;
	background-color: var(--rhw-burgundy, #520000);
	-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='M2 7h11v9H2z'/%3E%3Cpath d='M13 10h5l3 3v3h-8z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='17.5' cy='18' r='2'/%3E%3C/svg%3E") no-repeat center / contain;
	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='M2 7h11v9H2z'/%3E%3Cpath d='M13 10h5l3 3v3h-8z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='17.5' cy='18' r='2'/%3E%3C/svg%3E") no-repeat center / contain;
}

.rhinory-shop-slot .rhinory-shop-slot__copy {
	flex: 1 1 340px;
}

.rhinory-shop-slot .rhinory-shop-slot__headline {
	margin: 0;
	font-family: var(--rhw-ff-label, "Josefin Sans", system-ui, sans-serif);
	font-size: 11.5px;
	font-weight: 600;
	/* v13's `.sa-slot-h` declares no line-height and inherits 1.55 from the page;
	   a WP heading resets to 1, which would shave 6px off the bar. */
	line-height: 1.55;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rhw-burgundy, #520000);
}

.rhinory-shop-slot .rhinory-shop-slot__note {
	margin: 7px 0 0;
	max-width: 70ch;
	font-family: var(--rhw-ff-body, "Lora", Georgia, serif);
	font-size: var(--rhw-type-body, 16px);
	line-height: 1.55;
	color: var(--rhw-ink-2, #4A443D);
}

/* Stand-in marker. The copy in this slot is an editable example, not a standing
   offer (the plugin carries the machine-readable twin as `data-winery-stand-in`
   on the wrapper); this is the human-readable half. Set in the label register so
   it reads as a marker rather than as another line of body copy, which is what
   keeps the bar at v13's compact height. */
.rhinory-shop-slot .rhinory-shop-slot__disclaimer {
	margin: 8px 0 0;
	font-family: var(--rhw-ff-label, "Josefin Sans", system-ui, sans-serif);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rhw-muted, #8A8177);
}

/* v13's link is the flex item itself; here it is wrapped in an editable
   paragraph, so the wrapper collapses onto the anchor's box (display:flex) —
   otherwise the paragraph's own line-height re-centers the row 4px off. */
.rhinory-shop-slot .rhinory-shop-slot__link {
	margin: 0;
	display: flex;
}

.rhinory-shop-slot .rhinory-shop-slot__link a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	font-family: var(--rhw-ff-label, "Josefin Sans", system-ui, sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--rhw-burgundy, #520000);
}

.rhinory-shop-slot .rhinory-shop-slot__link a::after {
	content: "\2192";
	transition: transform 0.2s;
}

.rhinory-shop-slot .rhinory-shop-slot__link a:hover::after,
.rhinory-shop-slot .rhinory-shop-slot__link a:focus::after {
	transform: translateX(3px);
}

/* ------------------------------------------------------------
   RESPONSIVE — v13 shop-all.css L802-803 (viewport breakpoint, ported as-is)
   ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.rhinory-shop-promo {
		grid-template-columns: 1fr;
	}

	.rhinory-shop-promo .rhinory-shop-promo__media {
		min-height: 200px;
	}
}

@media (max-width: 640px) {
	.rhinory-shop-slot {
		gap: 18px;
		padding: 22px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.rhinory-shop-promo .rhinory-shop-promo__cta .wp-block-button__link,
	.rhinory-shop-slot .rhinory-shop-slot__link a::after {
		transition: none;
	}

	.rhinory-shop-promo .rhinory-shop-promo__cta .wp-block-button__link:hover,
	.rhinory-shop-promo .rhinory-shop-promo__cta .wp-block-button__link:focus {
		transform: none;
	}
}