/* ============================================================ RHINORY v13 PAINT over the wordpress-for-wineries STOREFRONT ------------------------------------------------------------ Brief: docs/briefs/2026-08-16-shop-embeddable-catalog.md (B1 — pin + paint). The plugin (gsati-dev/wordpress-for-wineries v0.97.0) owns STRUCTURE and BEHAVIOR of the `winery/*` storefront display blocks. This file owns PAINT only, via the two surfaces the plugin publishes: 1. `--winery-*` custom properties (contract.md § Storefront styling tokens) 2. `.winery-*` class hooks (contract.md § CSS class hooks (.winery-*)) Boundary per ~/dev/wordpress-for-wineries/docs/operator-storefront-styling.md § Styling boundary — additive declarations only. No renderer fork, no class rename, no data-attribute rewrite, and nothing here touches the FROZEN `.winery-c7-*` / `data-winery-c7-*` / `winery-c7:*` surface the cards co-emit for member reveal, live pricing and cart writes. Design source (do not re-derive — these are ports): prototypes/13/11-shop-all.html + prototypes/13/shop-all.css (catalog + card) prototypes/13/15-sale-price-treatment.html + sale-price.css (sale treatment) prototypes/13/v13-shared.css (type scale) and their already-WP-ported twin, assets/css/shop-all.css, which is the in-production paint for the equivalent `rhinory/*` blocks. REGISTER: light / paper. The dark Reserve-cool chrome (nav, campaign bar, footer) is untouched — every `--winery-*` token is only ever read by a `.winery-*` selector, so a `:root` override cannot leak into site chrome. WHY THE LOCAL `--rhw-*` NAMES: style.css already defines `--ink`, `--paper` and `--rule` at `:root` with DARK values. Re-using those names here would read as the dark register to anyone skimming, so the light palette is declared under its own `--rhw-` (Rhinory winery) prefix and scoped to the block roots. WHY THE TOKENS ARE DECLARED ON THE BLOCK ROOTS AND NOT ONLY `:root`: the plugin derives its aliases at ITS `:root` (e.g. `--winery-card-background: var(--winery-shop-color-surface)`), so a var() in an alias resolves against `:root`'s value of the primitive. Overriding a primitive further down the tree would therefore NOT reach an alias declared above it. Declaring the whole set on both `:root` and each block root keeps the paint correct regardless of stylesheet order or nesting depth. WHY A FEW SELECTORS DOUBLE THEIR CLASS (`.winery-product-card.winery-product-card`): those rules match a block ROOT, where the plugin's own rule carries identical (0,1,0) specificity, so the winner would otherwise be decided by stylesheet print order. Doubling the class decides it here instead. Every other rule in this file is already a root-scoped descendant (0,2,0) and needs no help. ============================================================ */ :root, .winery-product-catalog, .winery-product-card, .winery-featured-row, .winery-ad-tile, .winery-gift-sets{ /* ---- v13 light palette (prototypes/13/shop-all.css:.shop-all) ---- */ --rhw-paper: #FBF7EE; --rhw-paper-2: #F7F1E5; --rhw-card: #F4EEE0; --rhw-card-2: #EAE1CE; --rhw-card-3: #E2D6BE; --rhw-ink: #2D2926; --rhw-ink-2: #4A443D; --rhw-muted: #8A8177; --rhw-burgundy: #520000; --rhw-burgundy-2: #3D0000; --rhw-burgundy-tint: rgba(82, 0, 0, 0.07); --rhw-acacia: #B97727; --rhw-acacia-soft: #E2C58F; --rhw-carbon: #241C16; --rhw-rule: rgba(45, 41, 38, 0.11); --rhw-rule-2: rgba(45, 41, 38, 0.20); --rhw-rule-burg: rgba(82, 0, 0, 0.24); --rhw-ff-display: "Cormorant Garamond", Georgia, serif; --rhw-ff-label: "Josefin Sans", system-ui, sans-serif; --rhw-ff-body: "Lora", Georgia, serif; /* v13 type scale (prototypes/13/v13-shared.css:370-377) */ --rhw-type-h2: clamp(40px, 5.4vw, 76px); --rhw-type-h3: clamp(26px, 2.6vw, 34px); --rhw-type-lede: 18px; --rhw-type-body: 16px; --rhw-type-meta: 14px; --rhw-type-eyebrow: 11px; /* ---- shared color primitives ---- */ --winery-shop-color-text: var(--rhw-ink); --winery-shop-color-muted: var(--rhw-muted); --winery-shop-color-surface: var(--rhw-paper); --winery-shop-color-surface-subtle: var(--rhw-paper); --winery-shop-color-surface-emphasis: var(--rhw-card-2); --winery-shop-color-border: var(--rhw-rule); --winery-shop-color-control-border: var(--rhw-rule-2); --winery-shop-color-accent: var(--rhw-burgundy); --winery-shop-color-accent-hover: var(--rhw-burgundy-2); --winery-shop-color-accent-contrast: var(--rhw-paper); --winery-shop-color-focus: var(--rhw-burgundy); --winery-shop-color-sale: var(--rhw-burgundy); --winery-shop-color-success: #1F4F37; --winery-shop-color-warning: var(--rhw-acacia); --winery-shop-color-disabled: var(--rhw-muted); --winery-shop-color-overlay: rgba(45, 41, 38, 0.52); /* ---- shared typography primitives ---- */ --winery-shop-font-family-body: var(--rhw-ff-body); --winery-shop-font-family-heading: var(--rhw-ff-display); --winery-shop-font-size-xs: 10.5px; --winery-shop-font-size-sm: var(--rhw-type-meta); --winery-shop-font-size-base: var(--rhw-type-body); --winery-shop-font-size-lg: var(--rhw-type-lede); --winery-shop-font-size-xl: var(--rhw-type-h3); --winery-shop-font-size-2xl: var(--rhw-type-h2); --winery-shop-font-weight-normal: 400; --winery-shop-font-weight-medium: 500; --winery-shop-font-weight-semibold: 600; --winery-shop-line-height-tight: 1.04; --winery-shop-line-height-base: 1.55; --winery-shop-letter-spacing-eyebrow: 0.14em; --winery-shop-text-transform-eyebrow: uppercase; /* ---- shared spacing / shape / motion primitives ---- v13 is a hairline-and-square register: radii collapse to the 2px the prototype uses on chips and buttons, and card elevation is a hover-only shadow rather than a resting one. */ --winery-shop-space-1: 4px; --winery-shop-space-2: 8px; --winery-shop-space-3: 12px; --winery-shop-space-4: 18px; --winery-shop-space-5: 24px; --winery-shop-space-6: 34px; --winery-shop-space-7: 64px; --winery-shop-radius-sm: 2px; --winery-shop-radius-md: 0px; --winery-shop-radius-lg: 0px; --winery-shop-radius-pill: 2px; --winery-shop-border-width: 1px; --winery-shop-shadow-card: none; --winery-shop-shadow-popover: 0 26px 64px -26px rgba(45, 41, 38, 0.6); --winery-shop-transition: 220ms ease; --winery-shop-focus-ring: 2px solid var(--rhw-burgundy); --winery-shop-control-min-height: 44px; --winery-shop-button-padding: 12px 18px; /* ---- shared layout tokens (v0.99.0) ---- winery/product-catalog, winery/featured-row and winery/gift-sets all read --winery-shop-max-width / --winery-shop-inline-gutter directly (the catalog's --winery-catalog-* pair now aliases these), so setting them here is enough to line up all three sections on one page — no per-block gutter override needed (contract.md § Storefront styling tokens; closes B2/B4 contract gap #3/#5, see brief B5 changelog). */ --winery-shop-max-width: 2100px; --winery-shop-inline-gutter: 44px; /* ---- catalog aliases ---- --winery-catalog-card-min-width IS overridden as of the 2026-08-19 fidelity pass (docs/2026-08-19-shop-b6-fidelity-gaps.md gap #7): B6 deliberately left it at the plugin's 12rem/192px default to hold 5-up at 1440px, but that reads as too-narrow cards against the prototype's own `.sa-grid` `minmax(300px,1fr)` floor (prototypes/13/shop-all.css:229). Restoring ~300px (18.75rem) trades 5-up-at-1440 for wider cards that step to fewer columns sooner as the column narrows, which is the prototype's stated intent ("4-up at full width, steps to 3/2/1 as the product column narrows, not the viewport") — 5 columns is still reachable at the ~2100px max-width. `--winery-catalog-columns-max: 5` stays unoverridden as the ceiling; the floor is what does the work now. SUPERSEDED 2026-08-29 (v13.2): the floor is 21.25rem/340px, not 300px. The reasoning above still holds — the floor is what does the work — but 300px turned out to be too tight for real Commerce7 names and was cutting them. See the declaration's own comment below. --winery-catalog-max-width / --winery-catalog-inline-gutter ARE overridden directly here too (2026-08-19 fidelity rework, gap #7 cont.): headless measurement showed `.winery-product-catalog__layout` still computing --winery-catalog-max-width as the plugin's own 100rem default and --winery-catalog-inline-gutter as its clamp(1rem,4vw,2rem) default, NOT the 2100px/44px set above via the shared --winery-shop-* tokens they're documented to alias (contract.md § Storefront styling tokens). The alias is declared on the plugin's own block root at the same (0,1,0) specificity as this ruleset's `.winery-product-catalog` selector, so which declaration wins is a source-order tie the theme must not depend on (see rhinory_v4_attach_winery_storefront_paint() docblock) — same class of collision the doubled `.winery-product-card. winery-product-card` selectors below resolve. Setting the catalog- prefixed tokens directly, the same way --winery-catalog-sidebar-width already does two lines down, settles it without relying on alias resolution order. */ --winery-catalog-max-width: 2100px; --winery-catalog-inline-gutter: 44px; /* 21.25rem / 340px, RAISED from the prototype's own 300px `.sa-grid` floor (shop-all.css:229) — see the § 2b title-reserve note for the reasoning. Short version: the design's 300px was drawn against curated short names, and real Commerce7 names are longer. Measured at the 34px desktop size, the longest live name ("Keras Cabernet Franc") needs a 333px column to hold one line, and "Roussanne-Marsanne" is a single unbreakable 283px token. At 300px the grid packed 5-up at ~304px in the 1876-1920 band and BOTH Keras names ran to three lines and were cut with an ellipsis — the one thing the card system forbids. 340px steps each band down a column before it reaches that width. It is deliberately under 362px so /shop/ keeps 3-up at 1440 and 5-up at the 2100px max-width, both of which hold every live name on one line. */ --winery-catalog-card-min-width: 21.25rem; /* The SAME 340px below the plugin's 48rem rail breakpoint, where the grid switches to its own compact floor (product-catalog/style.css:587) and the plugin's 15rem/240px default took over. Two live names were cut with an ellipsis at 560px on that default. 340px is the binding number here for a second reason as well: the card's own `@container (max-width: 332px)` block reserves 74px of the title's measure for the stacked vintage/ABV mark, so a card under 332px loses that width off the name before the name is even measured — which is what made six titles wrap at 640px on a 283px card. Holding every card above 332px keeps that block off the catalog entirely; it stays as the safety net it was written to be. Effect: 640px and below go 1-up, which is what the prototype does (`.sa-grid` is a single 567px column at 640 — shop-all.css:846). */ --winery-catalog-card-min-width-compact: 21.25rem; --winery-catalog-background: var(--rhw-paper); --winery-catalog-block-padding: 0px; --winery-catalog-sidebar-width: 220px; --winery-catalog-grid-gap: 0px; --winery-catalog-toolbar-gap: 18px; --winery-catalog-facet-gap: 0px; /* ---- product-card aliases ---- */ --winery-card-background: var(--rhw-paper); --winery-card-border-color: var(--rhw-rule); --winery-card-border-radius: 0px; --winery-card-shadow: none; --winery-card-shadow-hover: 0 10px 22px -14px rgba(45, 41, 38, 0.28); --winery-card-padding: 22px; --winery-card-content-gap: 0px; --winery-card-media-aspect-ratio: 3 / 3.4; --winery-card-image-fit: contain; --winery-card-badge-background: var(--rhw-card-3); --winery-card-badge-color: var(--rhw-burgundy); --winery-card-sale-color: var(--rhw-burgundy); --winery-card-cta-background: var(--rhw-burgundy); --winery-card-cta-background-hover: var(--rhw-burgundy-2); --winery-card-cta-color: var(--rhw-paper); /* stack order is the plugin's documented paint knob. v13.1 (CD card pass, 2026-08-29) moves the sale mark BELOW the price row's hairline, so the sale label is ordered AFTER the price row rather than before it — the whole relocation is this one token, no markup assumption. See § 2b. */ --winery-card-member-preview-order: 1; --winery-card-price-row-order: 3; --winery-card-sale-label-order: 4; /* the struck retail's reserved width on the price row's second line, and that line's own height. Both are read by § 2b's sale rules; see the comment there for why the reserve exists and how it was sized. ABSOLUTE, not `ch`: the element that consumes this reserve is the sale label, and that label carries `font-size: 0` (§ 2b explains why), so a font-relative unit resolves to ZERO there and the mark lands on top of the struck figure. Measured instead: "$189" sets 38.7px in the struck figure's own type (Cormorant Garamond 20px/500, tabular), + the prototype's 8px gap = 47px. */ --rhw-sale-was-reserve: 47px; --rhw-sale-line-h: 20px; /* ---- shared sale aliases (prototypes/13/sale-price.css) ---- */ --winery-sale-label-color: var(--rhw-burgundy); --winery-sale-label-font-size: 10px; --winery-sale-was-strike-color: rgba(45, 41, 38, 0.52); --winery-sale-was-strike-thickness: 1px; --winery-sale-savings-color: var(--rhw-burgundy); --rhw-was-size: 20px; /* ---- featured-row / ad-tile / gift-set aliases ---- --winery-featured-row-background is intentionally NOT overridden: the v0.100.0 default (var(--winery-shop-color-surface)) already resolves to --rhw-paper through the primitive above, matching the v13 design; a "transparent" override here would fight the class rule below that already paints --rhw-paper explicitly (B6 cleanup). */ --winery-featured-row-gap: 0px; --winery-featured-row-min-card-width: 300px; --winery-ad-tile-background: var(--rhw-card); --winery-ad-tile-color: var(--rhw-ink); --winery-ad-tile-border-color: var(--rhw-rule); --winery-ad-tile-border-radius: 0px; --winery-ad-tile-padding: clamp(30px, 3.4vw, 50px); --winery-ad-tile-min-height: 270px; --winery-ad-tile-media-width: 46%; --winery-gift-sets-background: var(--rhw-card); --winery-gift-sets-grid-gap: 0px; } /* ============================================================ 1 · CATALOG SECTION (.winery-product-catalog) Ports .sa-hero / .sa-shopby / .sa-layout / .sa-rail / .sa-results-bar from prototypes/13/shop-all.css. ============================================================ */ .winery-product-catalog.winery-product-catalog{ background: var(--rhw-paper); color: var(--rhw-ink); font-family: var(--rhw-ff-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-block: 64px; } .winery-product-catalog.winery-product-catalog a:not([class]){ color: var(--rhw-burgundy); text-decoration: none; } .winery-product-catalog.winery-product-catalog a:not([class]):hover{ color: var(--rhw-burgundy-2); } /* ---- header ---- */ .winery-product-catalog .winery-product-catalog__header{ padding-bottom: 26px; } .winery-product-catalog .winery-product-catalog__eyebrow{ font-family: var(--rhw-ff-label); font-size: var(--rhw-type-eyebrow); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rhw-burgundy); display: inline-flex; align-items: center; gap: 12px; margin: 0; } .winery-product-catalog .winery-product-catalog__eyebrow::before{ content: ""; width: 24px; height: 1px; background: currentColor; flex: none; } .winery-product-catalog .winery-product-catalog__title{ font-family: var(--rhw-ff-display); font-weight: 500; font-size: var(--rhw-type-h2); line-height: 0.98; letter-spacing: -0.01em; color: var(--rhw-ink); text-transform: none; margin: 18px 0 0 0; text-wrap: pretty; max-width: 16ch; } .winery-product-catalog .winery-product-catalog__description{ font-family: var(--rhw-ff-body); font-size: var(--rhw-type-lede); line-height: 1.64; max-width: 60ch; color: var(--rhw-ink-2); margin: 20px 0 0 0; } /* ---- shop-by strip (.sa-shopby port) ---- */ .winery-product-catalog .winery-product-catalog__shop-by{ padding-block: 26px; border-top: 1px solid var(--rhw-rule); display: flex; align-items: center; gap: 18px 22px; flex-wrap: wrap; } .winery-product-catalog .winery-product-catalog__shop-by-label{ font-family: var(--rhw-ff-label); font-size: var(--rhw-type-eyebrow); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rhw-muted); } .winery-product-catalog .winery-product-catalog__shop-by-list{ display: flex; flex-wrap: wrap; gap: 7px; align-items: center; list-style: none; margin: 0; padding: 0; } /* the collection group and the region group are separated by container CSS, not a divider element (contract.md § Product catalog) */ /* v13 draws this as a standalone 1px x 22px mark centred on the chip row (`.sa-shopby-div`, shop-all.css:124 — `margin:0 4px` inside the list's own 7px gap, so 11px of air each side). A `border-left` on the item can only be the item's FULL height (42px chips), which reads as a hard column divider rather than the short centred tick the design uses. Same geometry, drawn as a centred pseudo-element instead: 4px + 1px + 11px reproduces the prototype's 7+4 / 4+7 spacing exactly. MATCHED ON THE GROUP BOUNDARY, not on `:first-of-type`. `:first-of-type` reads element TYPE only and ignores the rest of the compound, so `li[…="region"]:first-of-type` asks for "the first `li`, which also happens to be a region" — and the first `li` is always a collection chip, so it matched nothing and the divider never painted (measured: no such element in the rendered page). The adjacent-sibling form asks the real question: the region chip that follows a collection chip. It also degrades correctly — a list with no collections gets no divider, which is right. */ .winery-product-catalog .winery-product-catalog__shop-by-item[data-winery-catalog-shop-by-group="collection"] + .winery-product-catalog__shop-by-item[data-winery-catalog-shop-by-group="region"]{ position: relative; margin-left: 4px; padding-left: 12px; border-left: 0; } .winery-product-catalog .winery-product-catalog__shop-by-item[data-winery-catalog-shop-by-group="collection"] + .winery-product-catalog__shop-by-item[data-winery-catalog-shop-by-group="region"]::before{ content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 22px; background: var(--rhw-rule-2); } .winery-product-catalog .winery-product-catalog__shop-by-chip{ display: inline-flex; align-items: center; white-space: nowrap; padding: 10px 15px; min-height: 42px; background: none; border: 1px solid var(--rhw-rule-2); border-radius: 2px; cursor: pointer; font-family: var(--rhw-ff-label); font-size: var(--rhw-type-eyebrow); font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--rhw-ink); transition: border-color 0.2s, background 0.2s, color 0.2s; } .winery-product-catalog .winery-product-catalog__shop-by-chip:hover{ border-color: var(--rhw-burgundy); color: var(--rhw-burgundy); } .winery-product-catalog .winery-product-catalog__shop-by-chip[aria-pressed="true"]{ background: var(--rhw-burgundy); border-color: var(--rhw-burgundy); color: var(--rhw-paper); } /* term-description popover (D — v0.102.0 ships this as a real hover/focus popover, `aria-describedby`-linked, no native title=; item B's earlier plan to read title= into a JS tooltip is superseded). Reveal/position/pointer- events stay the plugin's own mechanics (blocks/product-catalog/style.css `.winery-product-catalog__shop-by-item:hover` / `:focus-within`) — this only paints, matching v13's `.sa-shopby-chip[data-tip]::after` tooltip. Unscoped by a `.winery-product-catalog` ancestor because the identical shared markup also renders inside the standalone `.winery-shop-by` hero wrapper (contract.md § Product catalog: "same shared descendants"). */ .winery-product-catalog__shop-by-description{ /* plugin default opens DOWNWARD (top:calc(100% + space-1)), which the hero's overflow:hidden clips at the bottom. v13's .sa-shopby-chip[data-tip]::after opens ABOVE the chip instead (shop-all.css:115-122) — flip the anchor. */ top: auto; bottom: calc(100% + 10px); left: 0; right: auto; width: max-content; max-width: 260px; padding: 12px 14px; background: var(--rhw-paper); border: 1px solid var(--rhw-rule-2); border-radius: 2px; box-shadow: 0 18px 40px -20px rgba(45, 41, 38, 0.5); font-family: var(--rhw-ff-body); font-size: var(--rhw-type-meta); font-weight: 400; line-height: 1.5; color: var(--rhw-ink-2); /* long region/collection term descriptions run the tower to ~425px tall; cap the popover at 5 lines and keep the full copy in the rail info + PDP where there's room for it. */ display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; max-height: 7.5em; } /* ---- standalone shop-by (winery/shop-by, v0.101.0) — hero-copy placement ---- Same shared .winery-product-catalog__shop-by* descendants as the in-catalog strip above (contract.md § winery/shop-by "Shared strip markup"), wrapped in the plugin's structural-only `.winery-shop-by` root instead of `.winery-product-catalog`. Scoped to `.sa-hero-copy` (rhinory/shop-hero-reel's InnerBlocks slot) so this doesn't repaint a standalone strip dropped anywhere else on the site; a bare top rule/padding (matching the in-catalog port) would read wrong stacked directly under the hero sub-paragraph, so this port swaps the prototype's own `.sa-shopby` spacing (prototypes/13/shop-all.css:96-98) instead: a top margin, no top rule. */ /* The hero grid carries no vertical padding of its own (v13 — see shop-hero-reel.css), so the 26px of air the prototype puts UNDER the chips comes from `.sa-shopby`'s own padding-bottom. Without it the chip row butts the hero's bottom rule, which is visible the moment the column stacks. */ .sa-hero-copy .winery-shop-by .winery-product-catalog__shop-by{ margin-top: 30px; padding-block: 0 26px; border-top: 0; display: flex; align-items: center; gap: 18px 22px; flex-wrap: wrap; } .sa-hero-copy .winery-shop-by .winery-product-catalog__shop-by-label{ font-family: var(--rhw-ff-label); font-size: var(--rhw-type-eyebrow); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rhw-muted); } .sa-hero-copy .winery-shop-by .winery-product-catalog__shop-by-list{ display: flex; flex-wrap: wrap; gap: 7px; align-items: center; list-style: none; margin: 0; padding: 0; } /* group-boundary match, and the centred-tick geometry, both for the reasons given on the in-catalog copy of these two rules above. */ .sa-hero-copy .winery-shop-by .winery-product-catalog__shop-by-item[data-winery-catalog-shop-by-group="collection"] + .winery-product-catalog__shop-by-item[data-winery-catalog-shop-by-group="region"]{ position: relative; margin-left: 4px; padding-left: 12px; border-left: 0; } .sa-hero-copy .winery-shop-by .winery-product-catalog__shop-by-item[data-winery-catalog-shop-by-group="collection"] + .winery-product-catalog__shop-by-item[data-winery-catalog-shop-by-group="region"]::before{ content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 22px; background: var(--rhw-rule-2); } .sa-hero-copy .winery-shop-by .winery-product-catalog__shop-by-chip{ display: inline-flex; align-items: center; white-space: nowrap; padding: 10px 15px; min-height: 42px; background: none; border: 1px solid var(--rhw-rule-2); border-radius: 2px; cursor: pointer; font-family: var(--rhw-ff-label); font-size: var(--rhw-type-eyebrow); font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--rhw-ink); transition: border-color 0.2s, background 0.2s, color 0.2s; } .sa-hero-copy .winery-shop-by .winery-product-catalog__shop-by-chip:hover{ border-color: var(--rhw-burgundy); color: var(--rhw-burgundy); } .sa-hero-copy .winery-shop-by .winery-product-catalog__shop-by-chip[aria-pressed="true"]{ background: var(--rhw-burgundy); border-color: var(--rhw-burgundy); color: var(--rhw-paper); } /* ---- rail + results split (.sa-layout port) ---- */ .winery-product-catalog .winery-product-catalog__layout{ gap: 44px; padding-top: 44px; } /* rail-collapse breakpoint widened to the prototype's 1024px (gap #7, 2026-08-19 fidelity rework). The plugin's own off-canvas facets drawer — __layout to a single column, __filter-toggle shown, __facets pinned fixed + slid off-screen, __facet-scrim dimming behind it — only activates at its documented <=48rem/ 768px breakpoint (contract.md § Storefront styling tokens, __catalog-card- min-width-compact row). The prototype gates that same treatment to <=1024px (`.sa-layout`, `.sa-filter-toggle`, `.sa-rail-close`, `.sa-rail-scrim` all switch together at prototypes/13/shop-all.css:779-811), which is also what frees the grid to reach 3-up at 1024 instead of 2-up. This block mirrors the plugin's own <=48rem declarations (read off computed styles in-browser, not its source, per the do-not-grep-plugin-source rule) at the wider prototype breakpoint: a no-op duplicate for <=768px, and the only rule in effect for the 768-1024px gap the plugin's own query doesn't cover. The click-to-open/ close JS targets classes/attributes, not viewport width, so widening which range shows the toggle doesn't touch behavior. */ @media (max-width: 1024px){ .winery-product-catalog .winery-product-catalog__layout{ grid-template-columns: 1fr; gap: 0; } .winery-product-catalog .winery-product-catalog__filter-toggle{ display: flex; } .winery-product-catalog .winery-product-catalog__facets-close{ display: flex; } .winery-product-catalog .winery-product-catalog__facets{ position: fixed; top: 0; left: 0; bottom: 0; width: var(--winery-catalog-sidebar-width); z-index: 1001; background: var(--rhw-paper); box-shadow: 0 26px 64px -26px rgba(45, 41, 38, 0.6); padding: 24px; overflow-y: auto; transform: translateX(-100%); transition: transform 0.22s; } .winery-product-catalog .winery-product-catalog__facets--open{ transform: translateX(0); } .winery-product-catalog .winery-product-catalog__facet-scrim{ display: none; } .winery-product-catalog .winery-product-catalog__facet-scrim:not([hidden]){ display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(45, 41, 38, 0.52); } } .winery-product-catalog .winery-product-catalog__facets-header{ display: flex; align-items: center; justify-content: space-between; gap: 14px; /* min-height is the alignment mechanism (matches .winery-featured-row__header's own min-height below): both headers float to the same 56px floor regardless of their differing content, so the two border-bottom rules land on the same Y without hand-tuning padding per header (v13 .sa-rail-head/.sa-featured-head both use this exact min-height:56px/padding-bottom:20px pair). */ /* height (not min-height): the rail title + Clear-all control's intrinsic line height pushed a min-height box to 59px, 3px past the featured-row header's matching box — a fixed border-box height locks both to exactly 56px regardless of child intrinsic size. */ height: 56px; padding-bottom: 14px; border-bottom: 1px solid var(--rhw-rule-2); } .winery-product-catalog .winery-product-catalog__facets-title{ font-family: var(--rhw-ff-label); font-size: var(--rhw-type-eyebrow); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rhw-ink); } .winery-product-catalog .winery-product-catalog__facets-clear, .winery-product-catalog .winery-product-catalog__facets-close{ background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--rhw-ff-label); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rhw-muted); transition: color 0.2s; } .winery-product-catalog .winery-product-catalog__facets-clear:hover, .winery-product-catalog .winery-product-catalog__facets-close:hover{ color: var(--rhw-burgundy); } .winery-product-catalog .winery-product-catalog__facet{ border-bottom: 1px solid var(--rhw-rule); padding: 20px 0; } .winery-product-catalog .winery-product-catalog__facet-toggle{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font-family: var(--rhw-ff-label); font-size: var(--rhw-type-eyebrow); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rhw-ink); } .winery-product-catalog .winery-product-catalog__facet-options{ display: flex; flex-direction: column; gap: 2px; margin-top: 14px; } .winery-product-catalog .winery-product-catalog__facet-option-row{ position: relative; display: flex; align-items: center; gap: 8px; } .winery-product-catalog .winery-product-catalog__facet-option{ flex: 1; display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; font-family: var(--rhw-ff-body); font-size: var(--rhw-type-meta); color: var(--rhw-ink-2); transition: color 0.2s; } .winery-product-catalog .winery-product-catalog__facet-option:hover{ color: var(--rhw-ink); } .winery-product-catalog .winery-product-catalog__facet-check{ appearance: none; width: 17px; height: 17px; flex: none; margin: 0; cursor: pointer; background: var(--rhw-paper); border: 1px solid var(--rhw-rule-2); border-radius: 2px; display: inline-grid; place-items: center; transition: background 0.2s, border-color 0.2s; } .winery-product-catalog .winery-product-catalog__facet-check:checked{ background: var(--rhw-burgundy); border-color: var(--rhw-burgundy); } .winery-product-catalog .winery-product-catalog__facet-check:checked::after{ content: ""; width: 5px; height: 9px; margin-top: -2px; border: solid var(--rhw-paper); border-width: 0 2px 2px 0; transform: rotate(45deg); } .winery-product-catalog .winery-product-catalog__facet-check:focus-visible{ outline: 2px solid var(--rhw-burgundy); outline-offset: 2px; } .winery-product-catalog .winery-product-catalog__facet-label{ flex: 1; } .winery-product-catalog .winery-product-catalog__facet-count{ font-family: var(--rhw-ff-label); font-size: var(--rhw-type-eyebrow); font-weight: 600; letter-spacing: 0.06em; color: var(--rhw-muted); } .winery-product-catalog .winery-product-catalog__facet-info{ background: none; border: 1px solid var(--rhw-rule-2); border-radius: 50%; width: 19px; height: 19px; flex: none; cursor: pointer; line-height: 1; font-family: var(--rhw-ff-display); font-size: 12px; font-weight: 600; font-style: italic; color: var(--rhw-muted); transition: border-color 0.18s, color 0.18s, background 0.18s; } .winery-product-catalog .winery-product-catalog__facet-info:hover, .winery-product-catalog .winery-product-catalog__facet-info:focus-visible{ border-color: var(--rhw-burgundy); color: var(--rhw-burgundy); background: var(--rhw-burgundy-tint); } /* term-description popover (D — v0.102.0 hover/focus popover, `aria- describedby`-linked, no native title=). Reveal/position/pointer-events stay the plugin's own mechanics (blocks/product-catalog/style.css `.winery-product-catalog__facet-option-row:hover` / `:focus-within`) — this only paints, matching v13's `.sa-info-pop` tooltip. */ .winery-product-catalog .winery-product-catalog__facet-description{ /* plugin default anchors right:0, which extends LEFTWARD off-screen for the leftmost rail (it sits at the far left of the page). Anchor left:0 instead so it opens inward, matching v13's .sa-info-pop (shop-all.css:719). */ top: calc(100% + 8px); left: 0; right: auto; width: 236px; padding: 13px 15px; background: var(--rhw-paper); border: 1px solid var(--rhw-rule-burg); border-left: 2px solid var(--rhw-burgundy); border-radius: 0; box-shadow: 0 22px 54px -24px rgba(45, 41, 38, 0.55); font-family: var(--rhw-ff-body); font-size: var(--rhw-type-meta); line-height: 1.5; color: var(--rhw-ink-2); } .winery-product-catalog .winery-product-catalog__facet-select{ width: 100%; margin-top: 12px; padding: 10px 12px; min-height: 44px; background: var(--rhw-paper); border: 1px solid var(--rhw-rule-2); border-radius: 2px; font-family: var(--rhw-ff-body); font-size: var(--rhw-type-meta); color: var(--rhw-ink); } /* chip + range facets (.sa-shopby-chip / .sa-range2 port) */ .winery-product-catalog .winery-product-catalog__facet-chips{ display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; } .winery-product-catalog .winery-product-catalog__facet-chip{ display: inline-flex; align-items: center; padding: 9px 13px; min-height: 40px; background: none; border: 1px solid var(--rhw-rule-2); border-radius: 2px; cursor: pointer; font-family: var(--rhw-ff-label); font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--rhw-ink); transition: border-color 0.2s, background 0.2s, color 0.2s; } .winery-product-catalog .winery-product-catalog__facet-chip:hover{ border-color: var(--rhw-burgundy); color: var(--rhw-burgundy); } .winery-product-catalog .winery-product-catalog__facet-chip--active{ background: var(--rhw-burgundy); border-color: var(--rhw-burgundy); color: var(--rhw-paper); } .winery-product-catalog .winery-product-catalog__facet-range-values{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 14px; font-family: var(--rhw-ff-display); font-size: 20px; font-weight: 600; color: var(--rhw-ink); font-variant-numeric: lining-nums; } .winery-product-catalog .winery-product-catalog__facet-range-track{ background: var(--rhw-rule-2); } .winery-product-catalog .winery-product-catalog__facet-range-fill{ background: var(--rhw-burgundy); } .winery-product-catalog .winery-product-catalog__facet-range-handle{ background: var(--rhw-paper); border: 2px solid var(--rhw-burgundy); box-shadow: 0 1px 4px rgba(45, 41, 38, 0.28); } .winery-product-catalog .winery-product-catalog__facets-apply{ width: 100%; margin-top: 18px; padding: 14px 20px; min-height: 44px; background: var(--rhw-burgundy); color: var(--rhw-paper); border: 0; border-radius: 2px; cursor: pointer; font-family: var(--rhw-ff-label); font-size: var(--rhw-type-eyebrow); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } /* ---- toolbar (.sa-results-bar port) ---- */ .winery-product-catalog .winery-product-catalog__toolbar{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--winery-catalog-toolbar-gap); padding-bottom: 16px; border-bottom: 1px solid var(--rhw-rule-2); } .winery-product-catalog .winery-product-catalog__result-count{ font-family: var(--rhw-ff-body); font-size: var(--rhw-type-meta); color: var(--rhw-ink-2); margin: 0; } .winery-product-catalog .winery-product-catalog__result-count b{ font-family: var(--rhw-ff-display); font-size: 22px; font-weight: 600; color: var(--rhw-ink); margin-right: 4px; } .winery-product-catalog .winery-product-catalog__per-page, .winery-product-catalog .winery-product-catalog__sort{ display: flex; align-items: center; gap: 10px; font-family: var(--rhw-ff-label); font-size: var(--rhw-type-eyebrow); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rhw-muted); } .winery-product-catalog .winery-product-catalog__per-page select, .winery-product-catalog .winery-product-catalog__sort select{ padding: 9px 12px; min-height: 40px; background: var(--rhw-paper); border: 1px solid var(--rhw-rule-2); border-radius: 2px; font-family: var(--rhw-ff-body); font-size: var(--rhw-type-meta); color: var(--rhw-ink); cursor: pointer; } .winery-product-catalog .winery-product-catalog__filter-toggle{ padding: 11px 16px; min-height: 44px; background: none; border: 1px solid var(--rhw-rule-2); border-radius: 2px; cursor: pointer; font-family: var(--rhw-ff-label); font-size: var(--rhw-type-eyebrow); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rhw-ink); } .winery-product-catalog .winery-product-catalog__filter-toggle:hover{ border-color: var(--rhw-burgundy); color: var(--rhw-burgundy); } /* ---- active filter pills (.sa-active .pill port) ---- */ .winery-product-catalog .winery-product-catalog__active-filters{ display: flex; flex-wrap: wrap; gap: 9px; padding: 18px 0 2px 0; } .winery-product-catalog .winery-product-catalog__active-filter{ display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; background: var(--rhw-burgundy-tint); border: 1px solid var(--rhw-rule-burg); border-radius: 2px; cursor: pointer; font-family: var(--rhw-ff-label); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rhw-burgundy); } .winery-product-catalog .winery-product-catalog__active-filter:hover{ background: var(--rhw-card-2); } /* ---- cellar grid (.sa-grid port) ---- gap:0 with a top+left hairline on the container and a right+bottom hairline on each card draws the continuous ledger rule the prototype uses. */ .winery-product-catalog .winery-product-catalog__grid{ margin-top: 24px; background: var(--rhw-paper); border-top: 1px solid var(--rhw-rule); border-left: 1px solid var(--rhw-rule); } /* ---- pagination (.sa-page port) ---- */ .winery-product-catalog .winery-product-catalog__pagination{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 34px; } .winery-product-catalog .winery-product-catalog__page-link{ min-width: 42px; min-height: 42px; padding: 10px 13px; background: none; border: 1px solid var(--rhw-rule-2); border-radius: 2px; cursor: pointer; font-family: var(--rhw-ff-label); font-size: var(--rhw-type-eyebrow); font-weight: 600; letter-spacing: 0.1em; color: var(--rhw-ink); transition: border-color 0.2s, background 0.2s, color 0.2s; } .winery-product-catalog .winery-product-catalog__page-link:hover{ border-color: var(--rhw-burgundy); color: var(--rhw-burgundy); } .winery-product-catalog .winery-product-catalog__page-link--current{ background: var(--rhw-burgundy); border-color: var(--rhw-burgundy); color: var(--rhw-paper); } .winery-product-catalog .winery-product-catalog__load-more{ margin: 34px auto 0; display: block; padding: 14px 26px; min-height: 44px; background: var(--rhw-burgundy); color: var(--rhw-paper); border: 0; border-radius: 2px; cursor: pointer; font-family: var(--rhw-ff-label); font-size: var(--rhw-type-eyebrow); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } .winery-product-catalog .winery-product-catalog__load-more:hover{ background: var(--rhw-burgundy-2); } /* ---- empty state (.sa-empty port) ---- */ .winery-product-catalog .winery-product-catalog__empty{ padding: 64px 0; text-align: center; } .winery-product-catalog .winery-product-catalog__empty-title{ font-family: var(--rhw-ff-display); font-weight: 500; font-size: var(--rhw-type-h3); color: var(--rhw-ink); text-transform: none; margin: 0; } .winery-product-catalog .winery-product-catalog__empty-message{ font-family: var(--rhw-ff-body); font-size: var(--rhw-type-body); line-height: 1.6; color: var(--rhw-ink-2); margin: 12px 0 0 0; } .winery-product-catalog .winery-product-catalog__empty-clear{ margin-top: 20px; padding: 12px 22px; min-height: 44px; background: var(--rhw-burgundy); color: var(--rhw-paper); border: 0; border-radius: 2px; cursor: pointer; font-family: var(--rhw-ff-label); font-size: var(--rhw-type-eyebrow); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } /* ============================================================ 2 · PRODUCT CARD (.winery-product-card) Ports .sa-badge / .sa-body / .sa-buy PAINT from prototypes/13/shop-all.css (and their WP twin in assets/css/shop-all.css) onto the plugin's OWN card structure. PAINT-ONLY as of B5 (docs/briefs/2026-08-16-shop-embeddable-catalog.md). v0.98.0 fixed contract gap #1: blocks/product-card/style.css is now enqueued by the shared render_product_card() choke point on every render (it was previously silent because `winery/product-card` is never a saved block). This file therefore no longer needs to (and must not) restate the card's box model, media centering, badge positioning, or control layout — the plugin's own neutral default already provides all of that. What remains below is either (a) a genuine v13 visual decision the token layer can't express (asymmetric hairline border, inset/zoomed bottle image, stacked badges, dashed-underline member-preview, sale eyebrow, ledger grid look), or (b) a targeted cancellation of a DEFAULT declaration that would otherwise fight one of those decisions (documented inline at each site — these are real collisions the strip surfaced, not leftover layout). ============================================================ */ .winery-product-card.winery-product-card{ border-right: 1px solid var(--rhw-rule); border-bottom: 1px solid var(--rhw-rule); transition: background 0.22s, transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1); } .winery-product-card.winery-product-card::after{ content: ""; position: absolute; inset: 0; border: 1px solid transparent; pointer-events: none; transition: border-color 0.22s; } .winery-product-card.winery-product-card:hover{ background: var(--rhw-paper-2); } .winery-product-card.winery-product-card:hover::after, .winery-product-card.winery-product-card:focus-within::after{ border-color: var(--rhw-burgundy); } .winery-product-card.winery-product-card:hover, .winery-product-card.winery-product-card:focus-within{ transform: translateY(-2px); } /* ---- media (.sa-shot port) ---- The default __media/__media-link already centers a full-bleed image via grid + place-items:center; the v13 "inset bottle" (image smaller than its box, drop-shadow, hard hover-zoom) is a sizing/paint change on __image alone, so no centering-mechanism override is needed here. */ .winery-product-card .winery-product-card__media{ background: transparent; border-bottom: 1px solid var(--rhw-rule); position: relative; } .winery-product-card .winery-product-card__image, .winery-product-card .winery-product-card__secondary-image{ /* max-height:88% used to over-constrain taller/narrower bottles (Keras Cab Franc/Sauv): percentage heights don't resolve against an aspect-ratio- derived cell height (not a definite containing-block height in these engines), so max-height resolved to none and the img took its max-width:76%-derived intrinsic height, overflowing the fixed 3/3.4 media cell and getting clipped by its overflow:hidden (docs/2026-08-19-shop-prod-walk-fixes.md item A; rework 2026-08-19). position:absolute + inset:0 + width/height:100% forces the img ELEMENT itself to the cell's box (which aspect-ratio does size), then object-fit:contain letterboxes the source inside it — no overflow for any source aspect. */ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: saturate(0.96) contrast(1.03) drop-shadow(0 14px 26px rgba(45, 41, 38, 0.16)); transform-origin: 50% var(--rhw-label-y, 86%); transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); } /* the intentional hard zoom into the bottle label (assets/css/shop-all.css) */ .winery-product-card:hover .winery-product-card__image{ transform: scale(1.55); } /* a card with a real secondary image cross-fades instead of zooming. */ .winery-product-card--has-secondary-image .winery-product-card__secondary-image{ transition: opacity 1.2s ease; } /* the lifestyle flip shot (unlike the bottle) should fill the media box edge-to-edge rather than letterbox — bottle shot above stays `contain`. ROUND 2 (2026-08-25): `cover` alone still left a 16px inset frame because the shared position:absolute;inset:0 rule above resolves against this img's nearest positioned ancestor, .winery-product-card__media-link (position:relative, 0 padding of its own) — NOT .winery-product-card__media, which is where the plugin's 16px inset (--winery-card-media-inset, 1rem) actually lives, one level further out. Pulling inset negative by exactly that padding breaks the image out of __media-link's box and lands it flush on __media's edges; __media's own overflow:hidden clips it there. Two dead ends first: (1) `inset:-16px` alone, keeping the shared rule's width/height:100% — over-constrained, so the engine solves top+left and silently drops right/bottom, only the top-left corner moves. (2) adding width/height:auto on top of that — for an absolutely-positioned replaced element (an ) with all of top/right/bottom/left AND width/height auto, engines fall back to the image's own intrinsic ratio instead of solving the box from the insets, so it stretched to the wrong aspect. Explicitly sizing width/height in calc() off the 100%-of-link baseline and positioning only top+left (leaving right/bottom auto, so nothing is over-constrained) sidesteps both. A third dead end even after that: the base stylesheet's global `img{ max-width:100% }` (style.css) still resolves against this img's own containing block (the un-inset link box) and clamps the calc()'d width straight back down to it — `max-width:none` is needed alongside the explicit width or the cap wins regardless of selector specificity, since max-width and width are separate properties. Primary bottle image is untouched (still inset:0/100%/100%, still `contain`). */ .winery-product-card .winery-product-card__secondary-image{ object-fit: cover; object-position: center; top: calc(var(--winery-card-media-inset, 1rem) * -1); left: calc(var(--winery-card-media-inset, 1rem) * -1); right: auto; bottom: auto; width: calc(100% + (var(--winery-card-media-inset, 1rem) * 2)); height: calc(100% + (var(--winery-card-media-inset, 1rem) * 2)); max-width: none; } /* cancels the base hover zoom so a secondary-image card fades instead of zooming; the opacity swap itself is already the plugin's own default behavior. */ .winery-product-card--has-secondary-image:hover .winery-product-card__image, .winery-product-card--has-secondary-image:focus-within .winery-product-card__image{ transform: none; transition: opacity 1.2s ease; } .winery-product-card .winery-product-card__image-placeholder{ padding: 20px; font-family: var(--rhw-ff-label); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rhw-muted); line-height: 1.7; background: repeating-linear-gradient(-45deg, rgba(45, 41, 38, 0.045) 0 10px, transparent 10px 20px), var(--rhw-card); } /* ---- Sumatran Sparkles overlay (.sa-sparkle port) ---- (prototypes/13/11-shop-all.html:238-241, shop-all.css:281-286) — gold twinkle stars over the bottle on hover, ONE product only (a nod to the name). Injected theme-side by assets/js/shop-catalog-polish.js, matched by product title text (not price/collection — those aren't reliably Sumatran-specific), gated behind `.has-sparkle` on the card root so no other card's media cell picks up the animation rule. */ .winery-product-card .rhinory-sparkle{ position: absolute; inset: 0; z-index: 2; pointer-events: none; } .winery-product-card .rhinory-sparkle i{ position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); opacity: 0; background: radial-gradient(circle at 50% 50%, #FFF7E4 0%, #F1C878 45%, #B97727 100%); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 6px rgba(241, 200, 120, .9)) drop-shadow(0 0 12px rgba(185, 119, 39, .5)); } .winery-product-card.has-sparkle:hover .rhinory-sparkle i{ animation: rhinory-v4-twinkle 1.5s ease-in-out var(--d) infinite; } @keyframes rhinory-v4-twinkle{ 0%{ opacity: 0; transform: scale(.3) rotate(0deg); } 40%, 60%{ opacity: 1; transform: scale(1) rotate(90deg); } 100%{ opacity: 0; transform: scale(.3) rotate(160deg); } } @media (prefers-reduced-motion: reduce){ .winery-product-card.has-sparkle:hover .rhinory-sparkle i{ animation: none; opacity: .9; } } /* ---- badges (.sa-badge port) ---- v13 stacks badges in a column; the default wraps them in a row. The plugin's own absolute top/left positioning is left alone. */ .winery-product-card .winery-product-card__badges{ flex-direction: column; align-items: flex-start; gap: 6px; } /* v13's `.sa-badge` (shop-all.css:296-301) is a label-register chit: Josefin 9.5/700 at .14em, uppercase, 5x10 padding. The plugin's neutral default is body-register (Lora 10.5/500, sentence case, 4x8), so only the chit COLOURS were being themed and the type was still reading as the host default. The featured chit above is drawn to these same metrics, so the two registers have to agree or a card carrying both would show two different badge shapes. */ .winery-product-card .winery-product-card__badge{ padding: 5px 10px; font-family: var(--rhw-ff-label); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.55; gap: 6px; } .winery-product-card .winery-product-card__badge--featured{ background: var(--rhw-burgundy); color: var(--rhw-paper); } .winery-product-card .winery-product-card__badge--bestseller{ background: var(--rhw-card-3); color: var(--rhw-burgundy); } .winery-product-card .winery-product-card__badge--library{ background: var(--rhw-paper); color: var(--rhw-burgundy); border: 1px solid var(--rhw-rule-burg); } .winery-product-card .winery-product-card__badge--member{ background: var(--rhw-carbon); color: var(--rhw-acacia-soft); } .winery-product-card .winery-product-card__badge--sale{ background: var(--rhw-burgundy); color: var(--rhw-paper); } .winery-product-card .winery-product-card__badge--region{ background: var(--rhw-paper); color: var(--rhw-ink-2); border: 1px solid var(--rhw-rule-2); } /* The availability chip is deliberately NOT restyled here. The card co-emits the frozen `.winery-c7-availability-badge` root, and the theme already owns that surface in assets/css/c7-overrides.css `[data-winery-c7-availability] .winery-c7-availability-badge` (ink-glass chip, top-left, gold for low-stock/allocation). Restyling it here would fight a considered treatment and, because both rules set an inline-start, stretch the chip across the whole media box. Only make room for it. */ .winery-product-card .winery-product-card__media:has(.winery-product-card__availability) .winery-product-card__badges{ top: 52px; } /* ---- body (.sa-body port) ---- */ .winery-product-card .winery-product-card__body{ position: relative; padding: var(--winery-card-padding) var(--winery-card-padding) 24px var(--winery-card-padding); } .winery-product-card .winery-product-card__eyebrow{ font-family: var(--rhw-ff-label); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rhw-burgundy); align-items: center; gap: 7px; /* The eyebrow is the row's baseline reference: the ABV + vintage cluster is positioned off THIS text's baseline, not the other way round. Its 1em top margin and `normal` (font-metric) line-height are both inputs to the cluster's `top` in the `@container (width > 332px)` block below — change either and re-measure the three baselines together. */ margin: 1em 0; padding-right: 64px; } /* repaints the default's own eyebrow-separator dot rather than adding a second one — the default already draws "·" via this exact selector/pseudo-element; duplicating it on a different selector (::after / :not(:last-child)) would double the dot. */ .winery-product-card .winery-product-card__eyebrow-item + .winery-product-card__eyebrow-item::before{ content: "\00b7"; color: var(--rhw-rule-2); margin-right: 7px; } .winery-product-card .winery-product-card__vintage{ position: absolute; top: 35px; right: 22px; z-index: 3; line-height: 1; background: none; font-family: var(--rhw-ff-label); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rhw-ink-2); text-align: right; } /* ---- ABV spec (Google Alcohol advertising policy, eff. 2026-09-30) ---- Ported from prototypes/13/shop-all.css:333-364. Bound to _wc7_abv, rendered by the plugin's own native `showAbv` opt-in as of wordpress-for-wineries v0.116.0 (enabled on the Shop's `winery/product-catalog` + `winery/featured-row` instances in page-shop.html) — contract.md § `winery/product-card` `showAbv` attribute + `.winery-product-card__abv` frozen DOM row. Unlike the retired stopgap (docs/briefs/2026-08-28-abv-native-retire.md), `.winery-product-card__abv` is a plain sibling of `.winery-product-card__vintage`, not nested inside it — the plugin emits its own positive-only "% ABV" text and omits the element entirely when empty/null/zero, so no `:empty` guard is needed here. Positioned to sit INLINE, to the LEFT of the vintage mark, matching placement A (prototypes/13/shop-all.css:333-364) and the original nested layout: right-anchored past the widest observed vintage text ("NV" ~38px) plus the separator's own width, so the group reads as one line regardless of which vintage form (NV / 'YY) is present. The base `top` / `right` below are the narrow-column + no-container-query fallback geometry; the wide/inline cluster's own geometry lives in the `@container (width > 332px)` block further down, which is what actually paints on the catalog grid. */ .winery-product-card .winery-product-card__abv{ position: absolute; top: 41px; right: 76px; z-index: 3; line-height: 1; text-align: right; white-space: nowrap; font-family: var(--rhw-ff-label); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: var(--rhw-muted); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "lnum" 1, "tnum" 1; } .winery-product-card .winery-product-card__abv::after{ content: "\00b7"; margin-left: 6px; opacity: 0.55; } /* The mark is absolute, so the eyebrow reserves room for it rather than running under it. Only cards that actually carry an ABV pay the reserve. */ .winery-product-card__body:has(.winery-product-card__abv) .winery-product-card__eyebrow{ padding-right: 96px; } .winery-product-card{ container-type: inline-size; } /* ---- wide/inline layout: ABV + vintage as one baseline-shared cluster ---- The two marks are separate absolutely-positioned siblings in the plugin's frozen DOM (no wrapper to hand a flex/`align-items: baseline` to, and the theme does not restructure plugin markup), so a shared baseline has to be built out of their box geometry instead: baseline_y = box top + line-height/2 + font-size * (ascent - descent) / 2 Give both marks the SAME `top`, no padding, and line-heights as ABSOLUTE lengths that differ by exactly `(12px - 10px) * (ascent - descent)` — 20px on the vintage, 21px on the ABV — and every term cancels: the baselines coincide, by construction rather than by a hand-tuned nudge. Josefin Sans's own metrics supply the one constant, read off the used face rather than guessed (`canvas` `measureText().fontBoundingBoxAscent/Descent` at `600 100px "Josefin Sans"` -> ascent 0.75em, descent 0.25em, so `ascent - descent` = 0.5 and the two line-heights differ by 2px * 0.5 = 1px). Retune either font-size and the same one-line arithmetic gives the new pair. Verified live, both marks probed with a zero-size `display:inline-block` appended to the mark (its bottom margin edge sits ON that line's baseline): delta 0.00px across all six vintage forms in the catalog, at both devicePixelRatio 1 and 2. The unequal-line-height form beats the simpler equal-line-height one, which measured -1.00px at dpr 1. Two things had to be normalised away to get there. The vintage carries the plugin's own chip padding (`4px 8px`) and, being an absolutely-positioned `inline-flex`, blockifies to a `flex` box — the theme already drops its background, so the padding is dead space that only offsets its text; `padding: 0` plus `display: block` removes both the 4px vertical offset and the flex box that makes the mark's own baseline unreadable. The offsets then re-add what that padding used to contribute (`right` + 8px, `line-height` = 12px text + the 8px of vertical padding) so the vintage's glyphs stay on exactly the pixel they painted on before this rule existed — verified by probe, not by eye. Vertical datum: the cluster reads as one row with the eyebrow to its left, so the eyebrow's text baseline — not the vintage's box — is what both marks are positioned against. The eyebrow's baseline sits at `card padding + 1em margin + normal-line-height half-leading + ascent` below the body's padding box; the cluster's at `top + line-height/2 + font-size * (ascent - descent) / 2`. Solving the two for a shared baseline gives an 8px offset, and because BOTH sides carry the same `--winery-card-padding` term it cancels — one constant holds at the 22px and the 16px padding alike. Measured: the earlier `13px` (which had been derived against the vintage box alone, never against the eyebrow) left the whole cluster 4.7px low on prod / 5.00px on DDEV. At 8px all three baselines land on 0.00px in headed Chrome, and the neighbouring candidates come back at exactly their arithmetic difference (7.75px -> -0.25, 8.25px -> +0.25) — the check that the value is solved, not eyeballed. The closed-form answer is 8.2625px; the 0.26px gap to it, and the +0.50px the same 8px measures under headless Chromium (identical font metrics — line-height 16.275px, ascent 0.75em, descent 0.25em — so it is rasterizer baseline snapping, not a metric mismatch), are why this is tuned to the browser people actually read the page in. Every environment measured lands inside +/-0.5px. Both offsets are derived from `--winery-card-padding` rather than hard-coded, because the card's own `@media (max-width: 640px)` block drops that token 22px -> 16px and re-pins the vintage to match (`top: 29px; right: 16px`). A hard-coded pair here would be silently overridden there, and that window is real: phones proper fall through to the stacked branch (a 390px viewport leaves a 301px card), but the band between them does not — a 500px viewport gives a single 411px column, wide branch, 16px card padding. The doubled `.winery-product-card.winery-product-card` class is what wins against that later media block, the same specificity trick the stacked branch below uses. Note for anyone re-measuring: `Range.getBoundingClientRect()` over a text node returns its LINE box, not its baseline, so matching two ranges' `bottom` values aligns line boxes and leaves the baselines apart whenever the font-sizes differ. That is how the earlier `top: 41px` value was arrived at. Probe the baseline itself. Horizontal: the gap to the vintage used to be a fixed `right`, so it drifted with the vintage string's own width — measured from the ABV box's right edge to the vintage text, 24.3px on `NV` vs 26.2px on `'24` vs 28.7px on `'21`, all of them loose. CSS anchor positioning pins the ABV's right edge — the middot's trailing edge — a flat 6.00px off the vintage's left edge for every vintage form. The `@supports` fallback keeps the fixed offset, tuned to the widest observed vintage ("NV"), for engines without anchor positioning. */ @container (width > 332px){ .winery-product-card.winery-product-card .winery-product-card__vintage{ display: block; padding: 0; line-height: 20px; top: calc(var(--winery-card-padding) + 8px); right: calc(var(--winery-card-padding) + 8px); anchor-name: --rhw-vintage-mark; } .winery-product-card.winery-product-card .winery-product-card__abv{ line-height: 21px; top: calc(var(--winery-card-padding) + 8px); right: calc(var(--winery-card-padding) + 36px); } @supports (anchor-name: --rhw-probe){ .winery-product-card.winery-product-card .winery-product-card__abv{ position-anchor: --rhw-vintage-mark; /* the fallback length is the widest vintage's own left edge — it only comes into play on a card that carries an ABV but no vintage to anchor to. */ right: calc(anchor(left, calc(var(--winery-card-padding) + 30px)) + 6px); } } } /* Column-aware, like the grid itself. The catalog packs a 300px minimum column, and below ~332px the longest eyebrow plus the 96px reserve stops clearing — there the mark stacks (vintage over ABV, right-aligned), the middot hides, and the reserve moves from the eyebrow to the title, so the eyebrow never wraps at any width the grid reaches. */ @container (max-width: 332px){ /* A compact breakpoint re-pins .winery-product-card__vintage's `right` from 22px to 16px on small viewports. Attributed to the plugin when this block was written; walking the live CSSOM for the rules that match the mark shows it is this file's own `@media (max-width: 640px)` block, further down. Pinning both marks to the same fixed 22px here keeps their stacked right edges flush regardless of that. */ .winery-product-card.winery-product-card .winery-product-card__vintage{ top: 35px; right: 22px; } .winery-product-card .winery-product-card__abv{ top: 60px; right: 22px; left: auto; } .winery-product-card .winery-product-card__abv::after{ content: none; } .winery-product-card__body:has(.winery-product-card__abv) .winery-product-card__eyebrow{ padding-right: 0; } .winery-product-card__body:has(.winery-product-card__abv) .winery-product-card__title{ padding-right: 74px; } } .winery-product-card .winery-product-card__title{ font-family: var(--rhw-ff-display); font-weight: 600; font-size: var(--rhw-type-h3); line-height: 1.04; letter-spacing: -0.004em; color: var(--rhw-ink); text-transform: none; margin: 5px 0 0 0; /* raw Commerce7 product names are long; the prototype's curated short names never wrapped, so the 2-line clamp is a theme-side addition that keeps the grid's per-row height rhythm. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.1em; } .winery-product-card .winery-product-card__title-link:hover, .winery-product-card .winery-product-card__title-link:focus-visible{ text-decoration: underline; } .winery-product-card .winery-product-card__teaser{ font-family: var(--rhw-ff-label); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rhw-ink-2); margin: 11px 0 0 0; line-height: 1.5; } /* same double-dot avoidance as the eyebrow separator above. */ .winery-product-card .winery-product-card__teaser-term + .winery-product-card__teaser-term::before{ content: "\00b7"; color: var(--rhw-burgundy); margin-right: 3px; } .winery-product-card .winery-product-card__varietal{ font-family: var(--rhw-ff-label); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rhw-muted); margin: 12px 0 0 0; } .winery-product-card .winery-product-card__excerpt{ font-family: var(--rhw-ff-body); font-size: var(--rhw-type-body); line-height: 1.5; color: var(--rhw-ink-2); margin: 10px 0 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---- member preview (.sa-memberest / .sa-crashsub port) ---- v0.102.0 ships this as a real hover/focus popover (button + absolutely- positioned popover, `.is-open`/`.is-closed` pin state, `aria-expanded` synced across hover/focus/pin) — the plugin owns reveal/dismiss mechanics entirely (blocks/product-card/style.css `.winery-product-card__member- preview:hover:not(.is-closed)` / `.is-open`), this section only paints. */ .winery-product-card .winery-product-card__member-preview{ /* cancels the default's boxed top+bottom rule (a considered v13 choice: a dashed-underline summary reads lighter than a bordered panel) and keeps the auto-margin foot-pin the default doesn't apply here. v13.1: the 16px padding-top is gone. This element is the TOP of the bottom-pinned selling block, so its own padding was extra air between the middle region and the qualifier line; the reserved middle regions in § 2b now make that gap deterministic without it. */ margin-top: auto; margin-bottom: 0; padding-top: 0; border-top: 0; border-bottom: 0; } .winery-product-card .winery-product-card__member-preview-toggle{ /* inline-flex + min-height:0 trade the default's full-width 44px control for a compact inline mark — the dashed underline IS the affordance. */ display: inline-flex; min-height: 0; gap: 6px; padding: 0 0 3px 0; border-bottom: 1px dashed var(--rhw-rule-2); font-family: var(--rhw-ff-body); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; color: var(--rhw-ink-2); font-variant-numeric: tabular-nums; transition: color 0.2s, border-color 0.2s; } .winery-product-card .winery-product-card__member-preview-toggle strong{ font-family: var(--rhw-ff-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--rhw-burgundy); line-height: 1; font-variant-numeric: lining-nums; } .winery-product-card .winery-product-card__member-preview-toggle span{ font-family: var(--rhw-ff-body); font-size: 12px; font-style: italic; text-transform: none; letter-spacing: 0; color: var(--rhw-muted); } /* aria-expanded is the plugin's own synced state across hover/focus/pin (contract.md § Product card, __member-preview-toggle row) — one selector covers every reveal path instead of re-deriving hover/open separately. */ .winery-product-card .winery-product-card__member-preview-toggle:hover, .winery-product-card .winery-product-card__member-preview-toggle[aria-expanded="true"]{ color: var(--rhw-burgundy); border-color: var(--rhw-rule-burg); } .winery-product-card .winery-product-card__member-preview-popover{ /* the plugin's own default draws a full 1px border in --winery-card-border-color (blocks/product-card/style.css); adding only a left border on top of that left the thin default border on the other 3 sides, reading as a broken corner frame behind the burgundy bar. Reset the border fully, then apply the v13 single treatment (shop-all.css:406-415 .sa-crashsub-pop). The plugin's default box-shadow (--winery-shop-shadow-popover, a 16px/40px/0 drop with no negative spread) was the ACTUAL offset-frame culprit: on a popover that opens upward, that shadow paints a large hazy rectangle bleeding down past the box edge toward the toggle, reading as a second offset frame behind the v13 box. Swap it for v13's tighter shadow (26px/64px/-26px spread hugs the box) and zero the plugin's 8px border-radius default, which v13 never sets. */ margin-top: 12px; padding-block-start: 18px; padding-inline: 18px 20px; background: var(--rhw-paper); border: 1px solid var(--rhw-rule-burg); border-left: 2px solid var(--rhw-burgundy); border-radius: 0; box-shadow: 0 26px 64px -26px rgba(45, 41, 38, 0.6); width: min(300px, 84vw); /* LOAD-BEARING: contract.md:1250 — this token is the ONLY source for the popover's block-end padding AND the join anchor's hover-bridge hit region (blocks/product-card/style.css:356/407-408). A theme that changes the popover's block-end padding MUST set this token and let both consumers read it; a hardcoded padding-bottom here (the prior `padding: 18px 20px 18px 18px` shorthand) desyncs the two and opens a ~6px dead zone between the popover edge and the join CTA's real hit area, since the anchor was still bridging off the unset 12px default. */ --winery-card-member-popover-padding-block-end: 18px; } .winery-product-card .winery-product-card__member-preview-popover::after{ /* v13 rotated-square arrow (shop-all.css:409-412 .sa-crashsub-pop::after) */ content: ""; position: absolute; left: 20px; top: 100%; width: 12px; height: 12px; margin-top: -6px; background: var(--rhw-paper); border-right: 1px solid var(--rhw-rule-burg); border-bottom: 1px solid var(--rhw-rule-burg); transform: rotate(45deg); } .winery-product-card .winery-product-card__member-preview-join{ /* v13 .sa-crashsub-pop .cs-link (shop-all.css:397-404) — burgundy text link + the trailing arrow the plugin already appends to the label. Deliberately uses text-decoration, not border-bottom/padding-bottom: the anchor's own padding-block-end/margin-block-end are the LOAD- BEARING hover-bridge hit region above (contract.md:1003) — a literal border-bottom would sit at the token-extended box edge instead of under the text, and a literal padding-bottom would fight the token math and reopen the dead zone this pass exists to close. */ display: inline-block; margin-block-start: 13px; font-family: var(--rhw-ff-label); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rhw-burgundy); text-decoration-line: underline; text-decoration-color: var(--rhw-rule-burg); text-underline-offset: 3px; transition: text-decoration-color 0.2s, color 0.2s; } .winery-product-card .winery-product-card__member-preview-join:hover, .winery-product-card .winery-product-card__member-preview-join:focus-visible{ text-decoration-color: var(--rhw-burgundy); } .winery-product-card .winery-product-card__member-preview-title{ font-family: var(--rhw-ff-display); font-size: 19px; line-height: 1.14; text-transform: none; } .winery-product-card .winery-product-card__member-preview-tiers{ margin: 9px 0 11px; gap: 7px; } .winery-product-card .winery-product-card__member-preview-tier{ align-items: baseline; gap: 18px; font-family: var(--rhw-ff-body); font-size: 13px; line-height: 1.2; color: var(--rhw-ink); } .winery-product-card .winery-product-card__member-preview-tier strong{ font-family: var(--rhw-ff-label); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rhw-burgundy); } .winery-product-card .winery-product-card__member-preview-savings, .winery-product-card .winery-product-card__member-preview-note{ font-family: var(--rhw-ff-body); line-height: 1.5; color: var(--rhw-ink-2); margin: 8px 0 0 0; } .winery-product-card .winery-product-card__member-preview-note{ font-style: italic; color: var(--rhw-muted); } /* ---- Crash "Subscribe & Save" — v13 hover/focus popover (prototypes/13/11-shop-all.html:447-455, shop-all.css:389-437 .sa-crashsub--pop) — injected theme-side by assets/js/shop-catalog- polish.js for Crash-collection cards, which never carry a `.winery-product-card__member-preview` (Crash routes to the Crash Club, not the Conservation Circle preview). The wrapper occupies the IDENTICAL body slot + foot-pin the member-preview uses (margin-top:auto, padding-top:16px, no border) and the toggle is stretched full-width (v13's `.sa-crashsub-mark` is only as wide as its label; the plugin's own `__member-preview-toggle` is a `