/* ==========================================================================
   Rooster One product card on shop and category grids (AIEO_Card).
   From the design spec of 27 Oct 2026 and its rooster-card.css
   (ai-eshop-optimizer/docs/design/archive-card/designer/). Every colour,
   corner and type value is a role read from the theme's presets, with a
   fallback. Bundled identically in both plugins.

   Stage 1: block themes. WooCommerce's Product Template is the grid
   (.rc-grid), each item a card (.rc-card) of seven tracks shared with its
   row through subgrid: 1 picture, 2 swatches, 3 title, 4 rating, 5 price,
   6 status, 7 action. A theme that wraps the card in one group (Rooster
   Zero's .rooster-product-card) passes the tracks on to it.
   ========================================================================== */

/* 1. Roles ---------------------------------------------------------------- */
.rc-grid,
.rc-scope {
	--rc-color-background: var(--wp--preset--color--bg, var(--wp--preset--color--base, #ffffff));
	--rc-color-text: var(--wp--preset--color--fg, var(--wp--preset--color--contrast, #111111));
	--rc-color-surface: var(--wp--preset--color--subtle, var(--wp--preset--color--base-2, #f4f4f4));
	--rc-color-border: var(--wp--preset--color--line, #dddddd);
	--rc-color-accent: var(--wp--preset--color--accent, #b3264a);
	/* The accent as text on the background (contract C2: a bright accent is darkened for it). */
	--rc-color-accent-text: var(--wp--preset--color--accent-text, var(--rc-color-accent));
	--rc-color-success: var(--wp--preset--color--success, #1d7a43);
	--rc-color-contrast: var(--wp--preset--color--contrast, var(--rc-color-text));
	--rc-color-text-muted: var(--wp--preset--color--muted, #5f5f5f);

	--rc-radius-media: var(--wp--custom--rooster--shape--media, 8px);
	--rc-radius-chip: var(--wp--custom--rooster--shape--chip, 999px);

	--rc-font-size-small: var(--wp--preset--font-size--sm, var(--wp--preset--font-size--small, 0.875rem));
	--rc-font-size-medium: var(--wp--preset--font-size--md, var(--wp--preset--font-size--medium, 1rem));
	--rc-title-weight: 500;
	--rc-color-on-contrast: var(--rc-color-background);
	--rc-radius-button: var(--wp--custom--rooster--shape--button, 6px);
	--rc-radius-control: var(--wp--custom--rooster--shape--control, 6px);
	--rc-radius-panel: var(--wp--custom--rooster--shape--panel, 12px);
	/* A family, never `inherit`: a custom property set to `inherit` takes its parent's
	   (empty) value, and every `font:` shorthand that reads it is then dropped. */
	--rc-font-body: var(--wp--preset--font-family--body, system-ui, sans-serif);
	--rc-font-heading: var(--wp--preset--font-family--heading, var(--rc-font-body));

	--rc-text-xs: calc(var(--rc-font-size-small) * 0.857);
	--rc-text-2xs: calc(var(--rc-font-size-small) * 0.786);
	--rc-color-control-line: color-mix(in srgb, var(--rc-color-text) 48%, var(--rc-color-background));
	--rc-color-swatch-edge: color-mix(in srgb, var(--rc-color-text) 22%, transparent);
	--rc-media-plate: #ffffff; /* packshots are made for white, in both schemes */
	--rc-focus: var(--rc-color-text);

	--rc-row-gap: 28px;
}

@media (min-width: 600px) {
	.rc-grid { --rc-row-gap: 36px; }
}

@media (min-width: 1024px) {
	.rc-grid { --rc-row-gap: 48px; }
}

.rc-grid :focus-visible,
.rc-scope :focus-visible {
	outline: 2px solid var(--rc-focus);
	outline-offset: 2px;
}

/* Under the theme's design authority, the theme's focus ring (contract C2, the accent at 35%). */
html[data-rooster-design="theme"] .rc-grid :focus-visible,
html[data-rooster-design="theme"] .rc-scope :focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--rooster--focus-ring);
}

/* 2. The grid and the card: seven tracks shared by each row --------------- */
.rc-grid:not(.rooster-products--list) {
	row-gap: 0 !important; /* the space between rows is each card's bottom padding */
}

.rc-grid:not(.rooster-products--list) > .rc-card,
.rc-grid:not(.rooster-products--list) > .rc-card > .wp-block-group {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: subgrid;
	gap: 0 !important;
	min-inline-size: 0;
}

/* Under Rooster Zero's tile (Design `card_surface: tile`, `rooster-card-surface--tile` on the body; 11.3.10) the tile's
   recipe draws the parts' type, alignment and spacing: the card's own centring, title, price, button cap and part
   paddings stand down there (each behind `:where(body:not(.rooster-card-surface--tile))`, which adds no specificity).
   What stays under the tile: the seven shared tracks, the room between rows (the card's bottom padding, outside the
   tile), and the picture's white plate (the owner's ruling R9: product photos on white, in both schemes). */
:where(body:not(.rooster-card-surface--tile)) .rc-grid:not(.rooster-products--list) > .rc-card,
:where(body:not(.rooster-card-surface--tile)) .rc-grid:not(.rooster-products--list) > .rc-card > .wp-block-group {
	text-align: center;
}

.rc-grid:not(.rooster-products--list) > .rc-card {
	position: relative;
	grid-row: span 7;
	block-size: auto !important;
	padding-block-end: var(--rc-row-gap);
	color: var(--rc-color-text);
}

.rc-grid:not(.rooster-products--list) > .rc-card > .wp-block-group {
	grid-row: 1 / span 7;
	min-block-size: 0 !important;
	padding: 0 !important;
}

.rc-grid:not(.rooster-products--list) .rc-card :is(
	.wp-block-woocommerce-product-image,
	.rc-swatches,
	.wp-block-post-title,
	.wp-block-woocommerce-product-rating,
	.wp-block-woocommerce-product-price,
	.wp-block-woocommerce-product-button
) {
	min-inline-size: 0;
	margin: 0 !important;
}

.rc-grid:not(.rooster-products--list) .rc-card .wp-block-woocommerce-product-image { grid-row: 1; }
.rc-grid:not(.rooster-products--list) .rc-card .wp-block-post-title { grid-row: 3; }
/* What goes under the picture (the owner, 8 Nov 2026): by default the stars (track 2) and the swatches under the title
   (track 4); `rc-grid--swatches-first` the other way. Rooster One's stars, the voting ones too, take their track like
   WooCommerce's rating: left to the grid they fell into the first empty track, above the title on a card without
   swatches and under it on one with swatches (census 5, FE-K1: two part orders; again with the voting stars). */
.rc-grid:not(.rooster-products--list) .rc-card :is(.wp-block-woocommerce-product-rating, .aieo-rating-aggregate, .aieo-rating-stars--archive) { grid-row: 2; }
.rc-grid:not(.rooster-products--list) .rc-card .rc-swatches { grid-row: 4; }
.rc-grid--swatches-first:not(.rooster-products--list) .rc-card :is(.wp-block-woocommerce-product-rating, .aieo-rating-aggregate, .aieo-rating-stars--archive) { grid-row: 4; }
.rc-grid--swatches-first:not(.rooster-products--list) .rc-card .rc-swatches { grid-row: 2; }
/* A product without variations has Rooster Zero's short description where a variable one has its swatches (its
   designer's card, 11 Nov 2026: the owner, "the descriptions appear only in the simple products, to make up for the
   absence of the swatches"): the swatches' track in every order. */
.rc-grid:not(.rooster-products--list) .rc-card .rooster-product-card__summary { grid-row: 4; }
.rc-grid--swatches-first:not(.rooster-products--list) .rc-card .rooster-product-card__summary { grid-row: 2; }
/* The name under the picture (`rc-grid--name-first`, the designer's direction B; the store's choice, 11 Nov 2026): the
   brand and the name, then the swatches or the description, then the stars. */
.rc-grid--name-first:not(.rooster-products--list) .rc-card .wp-block-post-title { grid-row: 2; }
.rc-grid--name-first:not(.rooster-products--list) .rc-card :is(.rc-swatches, .rooster-product-card__summary) { grid-row: 3; }
.rc-grid--name-first:not(.rooster-products--list) .rc-card :is(.wp-block-woocommerce-product-rating, .aieo-rating-aggregate, .aieo-rating-stars--archive) { grid-row: 4; }
:where(body:not(.rooster-card-surface--tile)) .rc-grid:not(.rooster-products--list) .rc-card .aieo-rating-aggregate { justify-content: center; }
.rc-grid:not(.rooster-products--list) .rc-card .wp-block-woocommerce-product-price { grid-row: 5; }
.rc-grid:not(.rooster-products--list) .rc-card .wp-block-woocommerce-product-button { grid-row: 7; align-self: end; }

/* The status under the price, inside the price's box (AIEO_Card::after_price(); the designer's archive B, 11 Nov 2026:
   the price, the lowest price and the stock line are one part, so the rows stay aligned across the grid): the lowest
   price in 30 days of a product on sale, muted at the small size, then the stock line, the warning's ink when it asks
   for haste or patience, muted when the product is sold out. The card's own alignment (the list's end column sets its
   own). Theme tokens only. */
.rc-status { display: grid; gap: 2px; padding-block-start: 6px; color: var(--wp--preset--color--muted); font-size: var(--rc-text-xs); line-height: 1.4; font-variant-numeric: tabular-nums; }
.rc-status > * { margin: 0; }
.rc-status__lowest .woocommerce-Price-amount { font-weight: inherit; }
.rc-status__stock { font-weight: 600; color: var(--wp--preset--color--warning-ink); }
.rc-status__stock.is-out { color: var(--wp--preset--color--muted); }

/* Where subgrid is missing: a column with the button at the foot. */
@supports not (grid-template-rows: subgrid) {
	.rc-grid:not(.rooster-products--list) > .rc-card,
	.rc-grid:not(.rooster-products--list) > .rc-card > .wp-block-group {
		display: flex !important;
		flex-direction: column;
	}

	.rc-grid:not(.rooster-products--list) > .rc-card > .wp-block-group {
		flex: 1;
	}

	.rc-grid:not(.rooster-products--list) .rc-card .wp-block-woocommerce-product-button {
		margin-block-start: auto !important;
	}

	.rc-grid:not(.rooster-products--list) .rc-card .wp-block-post-title a {
		min-block-size: calc(3em * 1.35);
	}
}

/* In Rooster Zero's slider (is-style-rooster-slider): one row that scrolls sideways,
   a grid flowing in columns so its cards still share the seven tracks. The slider
   keeps its scrolling, snap points, buttons and progress line, and sets how many
   cards a row shows (--rooster-slider-cards) and the space between them. */
.is-style-rooster-slider .rc-grid:not(.rooster-products--list) {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(7, auto);
	grid-auto-columns: calc((100% - (var(--rooster-slider-cards, 4) - 1) * var(--rooster-slider-gap, 24px)) / var(--rooster-slider-cards, 4));
	column-gap: var(--rooster-slider-gap, 24px);
}

.is-style-rooster-slider .rc-grid:not(.rooster-products--list) > .rc-card {
	padding-block-end: 0; /* one row: the progress line below has its own space */
}

/* 3. Picture (track 1) ---------------------------------------------------- */
.rc-grid .rc-card .wp-block-woocommerce-product-image {
	container: rc-media / inline-size;
	overflow: hidden;
	border-radius: var(--rc-radius-media);
	background: var(--rc-media-plate);
}

.rc-grid .rc-card .wp-block-woocommerce-product-image img {
	object-fit: contain !important;
	transition: transform 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
	.rc-grid .rc-card .wp-block-woocommerce-product-image:hover img {
		transform: scale(1.03);
	}
}

/* Labels on the picture: two on narrow cards, three from 200 px. The server
   prints them in priority order; all of them stay on the product page. */
.rc-grid .rc-card .aieo-badge-stack .aieo-badge:nth-child(n + 4) {
	display: none;
}

@container rc-media (max-width: 199.98px) {
	.rc-grid .rc-card .aieo-badge-stack .aieo-badge:nth-child(3) {
		display: none;
	}
}

/* 4. Swatches (track 2) ----------------------------------------------------
   Up to 8 swatches and one "+N" chip carrying the remainder for every
   capacity (data-rest-3 … data-rest-8, "" when all fit). The visible count
   follows the card's width: no script, no jump. */
.rc-swatches {
	container: rc-sw / inline-size;
	display: flex;
	align-items: center;
}

:where(body:not(.rooster-card-surface--tile)) .rc-swatches {
	justify-content: center;
	padding-block-start: 12px; /* 4 px of it is headroom for in-cart badges */
}

/* The list view starts the swatch row at the card's top edge, where a top-right favourites heart sits: the row keeps
   the heart's corner free (its "+N" chip under the heart failed axe's target size on the phone, census 5), and its
   capacity follows the narrower box. Right, not end: the heart's place is physical. */
.rooster-products--list .rc-card:has(.aieo-wishlist-heart--archive.aieo-wishlist-pos-top-right) .rc-swatches {
	box-sizing: border-box;
	padding-right: 44px;
}

.rc-swatches > * {
	--rc-sw-size: 28px;
	--rc-sw-gap: 4px;
	flex: none;
	margin: 0;
}

.rc-swatches > * + * {
	margin-inline-start: var(--rc-sw-gap);
}

.rc-swatch {
	position: relative;
	display: block;
	box-sizing: border-box;
	inline-size: var(--rc-sw-size);
	block-size: var(--rc-sw-size);
	padding: 0;
	border: 0;
	border-radius: var(--rc-radius-chip);
	background: var(--rc-sw, var(--rc-color-surface)) center / cover no-repeat;
	box-shadow: inset 0 0 0 1px var(--rc-color-swatch-edge);
	text-decoration: none;
	cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
	.rc-swatch:hover {
		outline: 2px solid var(--rc-color-text);
		outline-offset: 2px;
	}
}

/* Picked in the card (every swatch shows): the button adds this variation. */
.rc-swatch.is-active {
	outline: 2px solid var(--rc-color-text);
	outline-offset: 2px;
}

/* Text chips ("50 ml", "100 ml") */
.rc-swatches--text .rc-swatch {
	display: inline-flex;
	align-items: center;
	inline-size: auto;
	min-inline-size: var(--rc-sw-size);
	padding: 0 10px;
	background: var(--rc-color-background);
	box-shadow: inset 0 0 0 1px var(--rc-color-control-line);
	color: var(--rc-color-text);
	font-size: var(--rc-text-xs);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	unicode-bidi: plaintext;
}

/* The "+N": plain words after the swatches, the designer's (the owner, 11 Nov 2026: "the numbers of variations are
   not in circle are plain"), muted, on the swatches' line; still a control of the swatches' height and 28 px at least
   across, so the target keeps its size (axe's target size), only the circle goes. */
.rc-more {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
	min-inline-size: 28px;
	block-size: var(--rc-sw-size);
	padding: 0 2px;
	border-radius: var(--rc-radius-control);
	background: none;
	color: var(--rc-color-text-muted);
	font-size: var(--rc-text-xs);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.rc-swatches .rc-more::after {
	direction: ltr; /* "+44" reads the same on RTL sites */
	unicode-bidi: isolate;
}

.rc-more:hover {
	color: var(--rc-color-text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Capacity 4 (S, 158–171 px): 3 swatches + "+N" */
.rc-swatches > .rc-swatch:nth-child(n + 4) { display: none; }
.rc-swatches:not(.rc-swatches--text):has(> .rc-more[data-rest-4=""]) > .rc-swatch:nth-child(4) { display: block; }
.rc-more::after { content: attr(data-rest-4); }
.rc-more[data-rest-4=""] { display: none; }

/* Text chips use capacity 3 on S: 2 chips + "+N" */
.rc-swatches--text > .rc-swatch:nth-child(n + 3) { display: none; }
.rc-swatches--text:has(> .rc-more[data-rest-3=""]) > .rc-swatch:nth-child(3) { display: inline-flex; }
.rc-swatches--text > .rc-more::after { content: attr(data-rest-3); }
.rc-swatches--text > .rc-more[data-rest-4] { display: inline-flex; }
.rc-swatches--text > .rc-more[data-rest-3=""] { display: none; }

/* Capacity 5 (S, ≥ 172 px): 4 swatches + "+N" */
@container rc-sw (min-width: 172px) {
	.rc-swatches:not(.rc-swatches--text) > .rc-swatch:nth-child(4) { display: block; }
	.rc-swatches:not(.rc-swatches--text) > .rc-swatch:nth-child(n + 5) { display: none; }
	.rc-swatches:not(.rc-swatches--text):has(> .rc-more[data-rest-5=""]) > .rc-swatch:nth-child(5) { display: block; }
	.rc-swatches:not(.rc-swatches--text) > .rc-more::after { content: attr(data-rest-5); }
	.rc-swatches:not(.rc-swatches--text) > .rc-more[data-rest-4] { display: inline-flex; }
	.rc-swatches:not(.rc-swatches--text) > .rc-more[data-rest-5=""] { display: none; }
}

/* M and L (≥ 200 px): 32 px swatches, 6 px gaps */
@container rc-sw (min-width: 200px) {
	.rc-swatches > * {
		--rc-sw-size: 32px;
		--rc-sw-gap: 6px;
	}

	.rc-more {
		min-inline-size: 40px;
		padding: 0 8px;
	}

	/* text chips: capacity 4, 3 chips + "+N" */
	.rc-swatches--text > .rc-swatch:nth-child(3) { display: inline-flex; }
	.rc-swatches--text > .rc-swatch:nth-child(n + 4) { display: none; }
	.rc-swatches--text:has(> .rc-more[data-rest-4=""]) > .rc-swatch:nth-child(4) { display: inline-flex; }
	.rc-swatches--text > .rc-more::after { content: attr(data-rest-4); }
	.rc-swatches--text > .rc-more[data-rest-3] { display: inline-flex; }
	.rc-swatches--text > .rc-more[data-rest-4=""] { display: none; }
}

/* Capacity 6 (≥ 232 px) */
@container rc-sw (min-width: 232px) {
	.rc-swatches:not(.rc-swatches--text) > .rc-swatch:nth-child(5) { display: block; }
	.rc-swatches:not(.rc-swatches--text) > .rc-swatch:nth-child(n + 6) { display: none; }
	.rc-swatches:not(.rc-swatches--text):has(> .rc-more[data-rest-6=""]) > .rc-swatch:nth-child(6) { display: block; }
	.rc-swatches:not(.rc-swatches--text) > .rc-more::after { content: attr(data-rest-6); }
	.rc-swatches:not(.rc-swatches--text) > .rc-more[data-rest-5] { display: inline-flex; }
	.rc-swatches:not(.rc-swatches--text) > .rc-more[data-rest-6=""] { display: none; }
}

/* Capacity 7 (≥ 270 px) */
@container rc-sw (min-width: 270px) {
	.rc-swatches:not(.rc-swatches--text) > .rc-swatch:nth-child(6) { display: block; }
	.rc-swatches:not(.rc-swatches--text) > .rc-swatch:nth-child(n + 7) { display: none; }
	.rc-swatches:not(.rc-swatches--text):has(> .rc-more[data-rest-7=""]) > .rc-swatch:nth-child(7) { display: block; }
	.rc-swatches:not(.rc-swatches--text) > .rc-more::after { content: attr(data-rest-7); }
	.rc-swatches:not(.rc-swatches--text) > .rc-more[data-rest-6] { display: inline-flex; }
	.rc-swatches:not(.rc-swatches--text) > .rc-more[data-rest-7=""] { display: none; }
}

/* Capacity 8 (≥ 308 px), the most a card shows */
@container rc-sw (min-width: 308px) {
	.rc-swatches:not(.rc-swatches--text) > .rc-swatch:nth-child(7) { display: block; }
	.rc-swatches:not(.rc-swatches--text) > .rc-swatch:nth-child(n + 8) { display: none; }
	.rc-swatches:not(.rc-swatches--text):has(> .rc-more[data-rest-8=""]) > .rc-swatch:nth-child(8) { display: block; }
	.rc-swatches:not(.rc-swatches--text) > .rc-more::after { content: attr(data-rest-8); }
	.rc-swatches:not(.rc-swatches--text) > .rc-more[data-rest-7] { display: inline-flex; }
	.rc-swatches:not(.rc-swatches--text) > .rc-more[data-rest-8=""] { display: none; }
}

/* 5. Title (track 3): full width, centred, three lines at most ----------- */
.rc-grid .rc-card .wp-block-post-title {
	container: rc-name / inline-size;
	max-inline-size: none !important;
	min-block-size: 0 !important;
}

:where(body:not(.rooster-card-surface--tile)) .rc-grid .rc-card .wp-block-post-title {
	padding-block-start: 10px;
	line-height: 1.35;
	text-align: center;
}
/* The stars under the picture (the default): the title follows them closely, their own space is above them (the owner,
   8 Nov 2026: "the gap ... is too much between the ratings and the title"); after the swatches it keeps its 10 px. */
:where(body:not(.rooster-card-surface--tile)) .rc-grid:not(.rc-grid--swatches-first, .rooster-products--list) .rc-card .wp-block-post-title {
	padding-block-start: 2px;
}

.rc-grid .rc-card .wp-block-post-title a {
	color: var(--rc-color-text);
	text-decoration: none;
	text-wrap: pretty;
	overflow-wrap: break-word;
}

/* Three lines at most, 500, small, a step larger on a wide card; under the tile its two lines, 600, small. On Rooster
   Zero the lines are clamped on the name inside the link (`.rooster-product-card__name`): the theme makes the link a
   block that reaches the 24 px of a touch target with paddings its margins give back (FE-O1, 11 Nov 2026), and a
   clamped box would show its next line in its own padding; the clamp on the link then does nothing. */
:where(body:not(.rooster-card-surface--tile)) .rc-grid .rc-card .wp-block-post-title a {
	font-size: var(--rc-font-size-small);
	font-weight: var(--rc-title-weight);
	line-height: 1.35;
}

:where(body:not(.rooster-card-surface--tile)) .rc-grid .rc-card .wp-block-post-title a,
:where(body:not(.rooster-card-surface--tile)) .rc-grid .rc-card .wp-block-post-title .rooster-product-card__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.rc-grid .rc-card .wp-block-post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

@container rc-name (min-width: 240px) {
	:where(body:not(.rooster-card-surface--tile)) .rc-grid .rc-card .wp-block-post-title a { font-size: var(--rc-font-size-medium); }
}

/* 6. Rating (track 4) ----------------------------------------------------- */
:where(body:not(.rooster-card-surface--tile)) .rc-grid .rc-card .wp-block-woocommerce-product-rating {
	padding-block-start: 5px;
}

/* Under the tile the stars read from the start edge, as the tile's other parts; so in the list, the text column. */
:is(.rooster-card-surface--tile .rc-grid, .rc-grid.rooster-products--list) .rc-card :is(.aieo-rating-stars--archive, .aieo-rating-aggregate) {
	align-items: flex-start;
	justify-content: flex-start;
}

/* Their margins stand down under the tile, whose parts are spaced by its own padding above each. */
.rooster-card-surface--tile .rc-grid .rc-card :is(.aieo-rating-stars--archive, .aieo-rating-aggregate) {
	margin-block: 0;
}

:is(.rooster-card-surface--tile .rc-grid, .rc-grid.rooster-products--list) .rc-card :is(.aieo-rating-stars--archive, .aieo-rating-aggregate) .aieo-rating-caption {
	text-align: start;
}

/* 7. Price (track 5) ------------------------------------------------------ */
.rc-grid .rc-card .wp-block-woocommerce-product-price {
	min-block-size: 0 !important;
}

:where(body:not(.rooster-card-surface--tile)) .rc-grid .rc-card .wp-block-woocommerce-product-price {
	padding-block-start: 6px;
}

.rc-grid .rc-card .wc-block-components-product-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 6px;
	row-gap: 2px;
	color: var(--rc-color-text);
	font-size: var(--rc-font-size-medium) !important;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
}

:where(body:not(.rooster-card-surface--tile)) .rc-grid .rc-card .wc-block-components-product-price {
	justify-content: center;
	font-weight: 700;
}

.rc-grid .rc-card .wc-block-components-product-price del {
	color: var(--rc-color-text-muted);
	font-size: var(--rc-text-xs);
	font-weight: 400;
	text-decoration-thickness: 1px;
}

.rc-grid .rc-card .wc-block-components-product-price ins {
	color: var(--rc-color-accent-text);
	text-decoration: none;
}

/* Under the theme's design the sale price is in the text colour: the SALE badge says it is a
   sale, and a row of cards had one orange price (owner, 28 Oct 2026). */
html[data-rooster-design="theme"] .rc-grid .rc-card .wc-block-components-product-price ins,
html[data-rooster-design="theme"] .rc-vrow__price ins,
html[data-rooster-design="theme"] .rc-vrow__amount ins {
	color: var(--rc-color-text);
}

/* Chosen options in the theme's accent, as its pressed states, not a grey fill (theme brief,
   28 Oct 2026): the swatch picked in the card, and a ticked row's tint (several rows can be
   ticked, so a wash rather than a solid fill; the theme draws the checkbox itself). */
html[data-rooster-design="theme"] .rc-swatch.is-active {
	outline-color: var(--rc-color-accent);
}

html[data-rooster-design="theme"] .rc-vrow.is-checked {
	background: color-mix(in srgb, var(--rc-color-accent) 12%, transparent);
}

/* The list's primary button is the theme's button (contract C2, Buttons), as the cards' own. */
html[data-rooster-design="theme"] .rc-btn--primary {
	background: var(--wp--custom--rooster--button--background, var(--rc-color-accent));
	color: var(--wp--custom--rooster--button--text, var(--wp--preset--color--on-accent, var(--rc-color-on-contrast)));
}

html[data-rooster-design="theme"] .rc-btn--primary:hover {
	background: color-mix(in srgb, var(--wp--custom--rooster--button--background, var(--rc-color-accent)) 85%, var(--rc-color-text));
}

.rc-grid .rc-card .wc-block-components-product-price :is(bdi, del, ins) {
	unicode-bidi: isolate;
}

/* 8. Action (track 7): one button, full width, 240 px at most from 280 px - */
.rc-grid .rc-card .wp-block-woocommerce-product-button {
	container: rc-action / inline-size;
	display: flex;
	flex-direction: column;
	align-items: center;
}

:where(body:not(.rooster-card-surface--tile)) .rc-grid .rc-card .wp-block-woocommerce-product-button {
	padding-block-start: 12px;
}

.rc-grid .rc-card .wp-block-woocommerce-product-button > :is(a, button) {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 44px;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rc-grid .rc-card .wp-block-woocommerce-product-button > .is-loading {
	opacity: 0.6;
	pointer-events: none;
}

@container rc-action (min-width: 280px) {
	:where(body:not(.rooster-card-surface--tile)) .rc-grid .rc-card .wp-block-woocommerce-product-button > :is(a, button) {
		max-inline-size: 240px;
	}
}

/* The list view (Rooster Zero's grid or list switch): the theme lays the card out;
   the text column reads from the start edge. */
.rc-grid.rooster-products--list .rc-swatches { justify-content: flex-start; }
/* The picture keeps its square, the same box on every card: the theme's column runs the card's full height, and the
   picture's plate stretched with it into a tall strip. On the plain surface it stands at the top of its column; under
   the tile the tile's list recipe places it (its row puts the picture, the text and the button on one line). */
.rc-grid.rooster-products--list .rc-card .wp-block-woocommerce-product-image {
	aspect-ratio: 1;
	block-size: auto !important;
}

:where(body:not(.rooster-card-surface--tile)) .rc-grid.rooster-products--list .rc-card .wp-block-woocommerce-product-image {
	align-self: start;
}
.rc-grid.rooster-products--list .rc-card .wp-block-post-title { text-align: start; }
.rc-grid.rooster-products--list .rc-card .wc-block-components-product-price { justify-content: flex-start; }

/* ==========================================================================
   10. The variations list (spec 7.2): a bottom sheet on phones and touch
   screens, a centred dialog on desktop. From the designer's rooster-card.css,
   sections 2, 3, 14 (stepper) and 16. Built by aieo-card.js on first open.
   ========================================================================== */
.rc-scope {
	--rc-icon-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.2-4.4-7.2-10.1A4.1 4.1 0 0 1 12 7.2a4.1 4.1 0 0 1 7.2 2.7C19.2 15.6 12 20 12 20z'/%3E%3C/svg%3E");
	--rc-icon-heart-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.2-4.4-7.2-10.1A4.1 4.1 0 0 1 12 7.2a4.1 4.1 0 0 1 7.2 2.7C19.2 15.6 12 20 12 20z'/%3E%3C/svg%3E");
	--rc-icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6 6.6.8-4.9 4.6 1.3 6.5L12 17.3l-5.9 3.2 1.3-6.5-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E");
	--rc-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--rc-icon-gift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M4.5 11h15v9h-15zM3.5 7.5h17V11h-17zM12 7.5V20M12 7.5C10.6 4.6 7.5 4.2 7.5 6c0 1.6 3 1.5 4.5 1.5s4.5.1 4.5-1.5c0-1.8-3.1-1.4-4.5 1.5'/%3E%3C/svg%3E");
	--rc-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
	--rc-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
	--rc-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");
	--rc-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
	--rc-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
	--rc-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.2'/%3E%3C/svg%3E");
	--rc-icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M6.5 16.5V11a5.5 5.5 0 0 1 11 0v5.5l1.5 2h-14zM10 20.5a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
}

.rc-scope .rc-icon {
	display: inline-block;
	flex: none;
	inline-size: 1.15em;
	block-size: 1.15em;
	background: currentColor;
	mask: var(--rc-i) center / contain no-repeat;
}

.rc-icon--check { --rc-i: var(--rc-icon-check); }
.rc-icon--gift { --rc-i: var(--rc-icon-gift); }
.rc-icon--clock { --rc-i: var(--rc-icon-clock); }
.rc-icon--alert { --rc-i: var(--rc-icon-alert); }
.rc-icon--bell { --rc-i: var(--rc-icon-bell); }
.rc-icon--search { --rc-i: var(--rc-icon-search); }


.rc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 44px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: var(--rc-radius-button);
	font: 600 var(--rc-font-size-small) / 1.2 var(--rc-font-body);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.rc-btn--primary {
	background: var(--rc-color-contrast);
	color: var(--rc-color-on-contrast);
}

.rc-btn--primary:hover {
	background: color-mix(in srgb, var(--rc-color-contrast) 84%, var(--rc-color-background));
}

.rc-btn--secondary {
	background: transparent;
	color: var(--rc-color-text);
	border-color: var(--rc-color-control-line);
}

.rc-btn--secondary:hover {
	background: var(--rc-color-surface);
}

.rc-btn[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
}

.rc-btn.is-loading {
	color: transparent;
	position: relative;
	pointer-events: none;
}

.rc-btn.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	inline-size: 18px;
	block-size: 18px;
	border-radius: 50%;
	border: 2px solid var(--rc-color-on-contrast);
	border-inline-end-color: transparent;
	animation: rc-spin 0.8s linear infinite;
}

.rc-btn--secondary.is-loading::after {
	border-color: var(--rc-color-text);
	border-inline-end-color: transparent;
}

.rc-btn--incart::before {
	content: "";
	inline-size: 18px;
	block-size: 18px;
	flex: none;
	background: var(--rc-color-success);
	mask: var(--rc-icon-check) center / contain no-repeat;
}

.rc-icon-btn {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 44px;
	block-size: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--rc-radius-button);
	background: transparent;
	color: var(--rc-color-text);
	cursor: pointer;
}

.rc-icon-btn::before {
	content: "";
	inline-size: 20px;
	block-size: 20px;
	background: currentColor;
	mask: var(--rc-i, var(--rc-icon-close)) center / contain no-repeat;
}

.rc-icon-btn:hover {
	background: var(--rc-color-surface);
}

@keyframes rc-spin {
	to { transform: rotate(1turn); }
}


/* Stepper: quantity already in the cart (simple products) and in the list */
.rc-stepper {
	display: flex;
	align-items: stretch;
	box-sizing: border-box;
	min-block-size: 44px;
	border: 1px solid var(--rc-color-control-line);
	border-radius: var(--rc-radius-button);
	background: var(--rc-color-background);
	color: var(--rc-color-text);
	overflow: hidden;
}

.rc-stepper__btn {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.rc-stepper__btn::before {
	content: "";
	inline-size: 18px;
	block-size: 18px;
	background: currentColor;
	mask: var(--rc-icon-minus) center / contain no-repeat;
}

.rc-stepper__btn--plus::before {
	mask-image: var(--rc-icon-plus);
}

/* The ground under the pointer is the same on every stepper of the shop, 7 % of the text's colour, and it fades in
 * (the owner, 12 Nov 2026: "this colour on hover of the - and + buttons", "This is global, it is in pop ups, the
 * product cards and the side cart"). */
.rc-stepper__btn:not(:disabled):hover {
	background: color-mix(in srgb, currentColor 7%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
	.rc-stepper__btn {
		transition: background-color 160ms;
	}
}

.rc-stepper__btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.rc-stepper__value {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-inline-size: 0;
	font: 600 var(--rc-font-size-small) / 1 var(--rc-font-body);
	white-space: nowrap;
}

.rc-stepper__value::before {
	content: "";
	inline-size: 15px;
	block-size: 15px;
	background: var(--rc-color-success);
	mask: var(--rc-icon-check) center / contain no-repeat;
}

.rc-stepper__unit {
	font-weight: 500;
}

.rc-stepper--sm {
	min-block-size: 32px;
	border-radius: var(--rc-radius-control);
}

.rc-stepper--sm .rc-stepper__btn {
	inline-size: 32px;
}

.rc-stepper--sm .rc-stepper__value {
	min-inline-size: 28px;
	flex: none;
}

.rc-stepper--sm .rc-stepper__value::before {
	content: none;
}


/* 16. The variations list: in the card (desktop) or as a sheet (phone) --- */
.rc-panel {
	position: absolute;
	z-index: 3;
	inset: 0 0 var(--rc-row-gap) 0;
	/* No container (11.3.10): no query reads one, and its inline-size containment kept the window from taking its
	   title's width. Its parts in a column: the head, the search (hidden: no room), the list, the foot. The list's
	   room (11.3.10) is its rows' count, which aieo-card.js sets when the window opens from what the card printed
	   (--rc-rows), times a row's height (its 48 px swatch, 8 px above and below, and the line above it, .rc-vrow), with
	   the list's padding and lines less the first row's line: reserved at the opening, so nothing grows when the rows
	   arrive. Where the window reaches its cap, the list alone gives way and its rows scroll; the head and the foot
	   stay in sight. */
	--rc-list-row: 65px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	border: 1px solid var(--rc-color-border);
	border-radius: var(--rc-radius-panel);
	background: var(--rc-color-background);
	color: var(--rc-color-text);
	box-shadow: 0 14px 36px rgb(0 0 0 / 0.18);
	font-family: var(--rc-font-body);
	text-align: start;
	overflow: hidden;
}

.rc-panel > * {
	flex: none;
}

.rc-panel > .rc-vlist {
	box-sizing: border-box;
	flex: 0 1 calc(var(--rc-rows, 6) * var(--rc-list-row) + 5px);
	min-block-size: 0;
}

.rc-panel__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 4px 6px 12px;
}

.rc-panel__thumb {
	display: none;
	flex: none;
	inline-size: 48px;
	block-size: 48px;
	border-radius: var(--rc-radius-media);
	background: var(--rc-media-plate);
	object-fit: contain;
}

.rc-panel__heading {
	flex: 1;
	min-inline-size: 0;
}

.rc-panel__title {
	margin: 0;
	font: 600 var(--rc-font-size-medium) / 1.3 var(--rc-font-heading);
	/* The whole title, on as many lines as it takes (owner, 27 Oct; the spec had one line). */
	overflow-wrap: break-word;
	text-wrap: pretty;
}

.rc-panel__title .rc-panel__link {
	color: inherit;
	text-decoration: none;
}

.rc-panel__title .rc-panel__link:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.rc-panel__sub {
	margin: 2px 0 0;
	color: var(--rc-color-text-muted);
	font: 400 var(--rc-text-xs) / 1.3 var(--rc-font-body);
}

.rc-panel__search {
	position: relative;
	padding: 0 12px 10px;
}

.rc-panel__search::before {
	content: "";
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 24px;
	inline-size: 16px;
	block-size: 16px;
	background: var(--rc-color-text-muted);
	mask: var(--rc-icon-search) center / contain no-repeat;
	pointer-events: none;
}

.rc-field {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 40px;
	margin: 0;
	padding: 0 12px 0 36px;
	border: 1px solid var(--rc-color-control-line);
	border-radius: var(--rc-radius-control);
	background: var(--rc-color-background);
	color: var(--rc-color-text);
	font: 400 var(--rc-font-size-small) / 1.2 var(--rc-font-body);
}

.rc-field::placeholder {
	color: var(--rc-color-text-muted);
	opacity: 1;
}

.rc-vlist {
	margin: 0;
	padding: 2px 0;
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-block: 1px solid var(--rc-color-border);
}

/* A row: its parts in the Row layout's order (by default tick, swatch, name and price, stepper), all on the
   row's middle line. The swatch is the shopper's guide here (a shade, a pattern), so it is large. The same row in
   the card's list and in the product page's drop-down. */
/* A row the search leaves out stays out: the row's display otherwise beats the attribute, and
   the list showed every row whatever was typed (owner, 28 Oct 2026). */
.rc-vrow[hidden] {
	display: none;
}

.rc-vrow {
	--rc-vrow-sw: 48px;
	--rc-vrow-gap: 12px;
	/* The stepper's place, kept on every row: a tick moves nothing. */
	--rc-vrow-step: 96px;
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	gap: var(--rc-vrow-gap);
	box-sizing: border-box;
	min-block-size: calc(var(--rc-vrow-sw) + 16px);
	padding: 8px 12px;
	cursor: pointer;
}

.rc-vrow.is-disabled {
	cursor: default;
}

@media (hover: hover) and (pointer: fine) {
	.rc-vrow:not(.is-disabled):not(.is-checked):hover {
		background: color-mix(in srgb, var(--rc-color-surface) 45%, transparent);
	}
}

.rc-vrow + .rc-vrow {
	border-block-start: 1px solid color-mix(in srgb, var(--rc-color-border) 60%, transparent);
}

.rc-vrow.is-checked {
	background: color-mix(in srgb, var(--rc-color-surface) 70%, transparent);
}

.rc-check {
	flex: none;
	inline-size: 20px;
	block-size: 20px;
	margin: 0;
	accent-color: var(--rc-color-contrast);
	cursor: pointer;
}

/* The row's hit area: its box's label over the whole row, under the stepper (the owner, 29 Oct 2026: a tap
   anywhere on the line ticks it, apart from the quantity). Two classes: WooCommerce's `.woocommerce-page label`
   gives a label a bottom margin. */
.rc-vrow .rc-vrow__hit {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
	cursor: inherit;
}

.rc-vrow > .rc-swatch {
	--rc-sw-size: var(--rc-vrow-sw);
	flex: none;
}

.rc-vrow__text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-inline-size: 0;
}

.rc-vrow__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font: 500 var(--rc-font-size-medium) / 1.3 var(--rc-font-body);
}

.rc-vrow__price {
	color: var(--rc-color-text-muted);
	font: 400 var(--rc-font-size-small) / 1.3 var(--rc-font-body);
}

/* The price as a part of its own, when the Row layout does not put it next to the name. */
.rc-vrow__amount {
	flex: none;
	font: 500 var(--rc-font-size-small) / 1.3 var(--rc-font-body);
	white-space: nowrap;
}

.rc-vrow__incart {
	color: var(--rc-color-success);
	font-weight: 600;
}

/* Its empty place ticks the row as the rest of it does: only the stepper is its own. */
.rc-vrow__step {
	position: relative;
	z-index: 2;
	display: flex;
	flex: none;
	justify-content: flex-end;
	inline-size: var(--rc-vrow-step);
	pointer-events: none;
}

.rc-vrow__step > * {
	pointer-events: auto;
}

/* On a touch screen the stepper's buttons are 44 px (FE-O1), and its place as wide. */
@media (pointer: coarse) {
	.rc-vrow {
		--rc-vrow-step: 118px;
	}

	/* 44 px inside its 1 px border */
	.rc-vrow .rc-stepper--sm {
		min-block-size: 46px;
	}

	.rc-vrow .rc-stepper--sm .rc-stepper__btn {
		inline-size: 44px;
	}

	.rc-vrow .rc-check {
		inline-size: 22px;
		block-size: 22px;
	}
}

/* an action on the row's end ("Notify me" for a sold-out shade) */
.rc-vrow__end {
	grid-column: 3;
	grid-row: 1;
	margin: 0;
}

.rc-vrow.is-disabled .rc-vrow__name,
.rc-vrow.is-disabled .rc-swatch {
	opacity: 0.5;
}

.rc-link-btn {
	min-block-size: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--rc-color-text);
	font: 600 var(--rc-text-xs) / 1.3 var(--rc-font-body);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	cursor: pointer;
}

.rc-panel__foot {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 12px 12px;
}

.rc-panel__sum {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	color: var(--rc-color-text-muted);
	font: 500 var(--rc-text-xs) / 1.3 var(--rc-font-body);
}

.rc-panel__sum strong {
	color: var(--rc-color-text);
	font-weight: 700;
}

.rc-panel__msg {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font: 500 var(--rc-text-xs) / 1.35 var(--rc-font-body);
}

.rc-panel__msg--success {
	color: var(--rc-color-success);
	font-weight: 600;
}

.rc-panel__msg--error {
	color: var(--rc-color-text);
}

.rc-panel__msg .rc-icon {
	margin-block-start: 1px;
}

.rc-panel__actions {
	display: flex;
	gap: 8px;
}

.rc-panel__actions > .rc-btn {
	flex: 1;
	min-inline-size: 0;
}

/* The same list as a bottom sheet over the grid (phones) */
.rc-scrim {
	position: fixed;
	z-index: 50;
	inset: 0;
	background: rgb(0 0 0 / 0.5);
}

.rc-panel--sheet {
	position: fixed;
	z-index: 51;
	inset: auto 0 0 0;
	max-block-size: 85dvh;
	border-width: 1px 0 0;
	border-radius: var(--rc-radius-panel) var(--rc-radius-panel) 0 0;
	box-shadow: 0 -8px 32px rgb(0 0 0 / 0.22);
}

.rc-panel--sheet::before {
	content: "";
	position: absolute;
	inset-block-start: 6px;
	inset-inline-start: 50%;
	translate: -50% 0;
	inline-size: 36px;
	block-size: 4px;
	border-radius: 2px;
	background: var(--rc-color-border);
}

.rc-panel--sheet .rc-panel__head {
	padding: 18px 8px 10px 16px;
}

.rc-panel--sheet .rc-panel__thumb {
	display: block;
}

.rc-panel--sheet .rc-panel__search {
	padding: 0 16px 12px;
}

.rc-panel--sheet .rc-panel__search::before {
	inset-block-start: 14px;
	inset-inline-start: 28px;
}

.rc-panel--sheet .rc-field {
	min-block-size: 44px;
	font-size: max(16px, var(--rc-font-size-small)); /* under 16px, iOS zooms the page on focus */
}

.rc-panel--sheet .rc-vrow {
	padding: 8px 16px;
}

.rc-panel--sheet .rc-check {
	inline-size: 22px;
	block-size: 22px;
}

.rc-panel--sheet .rc-panel__foot {
	padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
}

.rc-panel--sheet .rc-btn {
	min-block-size: 48px;
}

[dir="rtl"] .rc-panel--sheet::before {
	translate: 50% 0;
}


/* Over everything on the page, Rooster One's own phone bar (the side cart's
   floating shell, 999996) included: the list is modal. */
.rc-scrim {
	z-index: 999998;
}

.rc-panel--sheet,
.rc-panel--dialog {
	z-index: 999999;
}

/* A row's price reads as quiet text: WooCommerce's sale markup without its underline. */
.rc-vrow__price ins,
.rc-vrow__amount ins {
	color: var(--rc-color-accent-text);
	text-decoration: none;
}

.rc-vrow__price del,
.rc-vrow__amount del {
	opacity: 0.8;
}

/* Desktop: a centred dialog over the grid, as large as what it holds (11.3.10; the owner, 10 Nov 2026: "ought to be
   wider for products with long titles. Also not have such a height if there are no variations ... without introducing
   cls"). Centred as the browser centres a <dialog>: fixed in the room under the bars that stay over the page's top (the
   theme's --rooster-sticky-top) less a margin, auto margins, its own size, all known when it opens.
   - Its width is its title's: at least 420 px (a short title keeps the window it had), at most 44rem; a longer title
     wraps inside. The parts whose words change while it is open (the count under the title, the search, the list,
     the foot) take no part in it (inline-size containment), so the width never changes while it is open.
   - Its height is its parts': the head, the list's reserved room (.rc-panel) and the foot, up to the room under the
     bars, above which the rows scroll. No empty block under a few rows. */
.rc-panel--dialog {
	--rc-dialog-margin: 24px;
	position: fixed;
	z-index: 999999; /* above its scrim (999998), see above */
	inset: calc(var(--rooster-sticky-top, 0px) + var(--rc-dialog-margin)) var(--rc-dialog-margin) var(--rc-dialog-margin);
	margin: auto;
	inline-size: fit-content;
	min-inline-size: min(420px, 100vw - 2 * var(--rc-dialog-margin));
	max-inline-size: min(44rem, 100vw - 2 * var(--rc-dialog-margin));
	block-size: fit-content;
	max-block-size: calc(100dvh - var(--rooster-sticky-top, 0px) - 2 * var(--rc-dialog-margin));
}

.rc-panel--dialog :is(.rc-panel__sub, .rc-panel__search, .rc-vlist, .rc-panel__foot) {
	contain: inline-size;
}

/* The title takes the focus when the panel opens, for screen readers; Tab never reaches it,
   so it draws no ring (the theme's ring is a box-shadow). The link inside keeps its own. */
.rc-panel__title:focus {
	outline: none;
	box-shadow: none;
}

/* While the list loads: six placeholder rows, no spinner. */
.rc-vrow--ph {
	cursor: default;
}

.rc-vrow--ph::before,
.rc-vrow--ph::after {
	content: "";
	display: block;
	block-size: 12px;
	border-radius: 6px;
	background: var(--rc-color-surface);
}

.rc-vrow--ph::before {
	inline-size: 20px;
	block-size: 20px;
}

.rc-vrow--ph::after {
	flex: 0 1 60%;
}

.rc-vrow__none {
	padding: 16px 12px;
	color: var(--rc-color-text-muted);
	font-size: var(--rc-text-xs);
}

.rc-panel.is-busy .rc-vlist {
	opacity: 0.6;
	pointer-events: none;
}

.rc-lock,
.rc-lock body {
	overflow: hidden;
}

/* The page under the window keeps its place: the scroll bar's room stays while the lock takes the bar away (FE-M1;
   aieo-card.js adds it only where the page had a bar). */
.rc-lock--gutter {
	scrollbar-gutter: stable;
}

/* 17. A rail's outlines before its cards come ------------------------------
   The product page's recommendation rails print this card (11.3.5). Until a
   rail's cards arrive, the server's frame holds four outlines made of the
   card's own parts, in the card's tracks: the picture's square, a title of two
   lines, the rating's line and the price's, on the surface colour of the
   theme's palette (both schemes). */
.rc-grid .rc-card.is-skeleton .wp-block-woocommerce-product-image {
	aspect-ratio: 1;
	background: var(--rc-color-surface);
}

.rc-grid .rc-card.is-skeleton :is(.wp-block-post-title, .aieo-rating-aggregate, .wp-block-woocommerce-product-price)::before {
	content: "";
	display: block;
	margin-inline: auto;
	border-radius: var(--rc-radius-control);
	background: var(--rc-color-surface);
}

.rc-grid .rc-card.is-skeleton .wp-block-post-title::before {
	inline-size: 80%;
	block-size: calc(2 * 1.35 * var(--rc-font-size-small) - 4px);
	margin-block-start: 2px;
}

.rc-grid .rc-card.is-skeleton .aieo-rating-aggregate {
	padding-block-start: 5px;
}

.rc-grid .rc-card.is-skeleton .aieo-rating-aggregate::before {
	inline-size: 60%;
	block-size: 1.25rem;
}

.rc-grid .rc-card.is-skeleton .wp-block-woocommerce-product-price::before {
	inline-size: 40%;
	block-size: calc(1.25 * var(--rc-font-size-medium));
}

/* 9. Motion and forced colours ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.rc-grid .rc-card .wp-block-woocommerce-product-image img {
		transition: none;
	}

	.rc-grid .rc-card .wp-block-woocommerce-product-image:hover img {
		transform: none;
	}
}

@media (forced-colors: active) {
	.rc-swatch,
	.rc-more {
		border: 1px solid CanvasText;
	}
}

/* A card below the first view (data-rc-far: its photo is lazy) keeps its swatches' images until it nears the window
   (aieo-card.js); meanwhile each swatch shows the surface colour its image then covers. */
.rc-card[data-rc-far] .rc-swatch {
	--rc-sw: initial;
}