/* ==========================================================================
   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--border, #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;
	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 .rc-swatches { grid-row: 2; }
.rc-grid:not(.rooster-products--list) .rc-card .wp-block-post-title { grid-row: 3; }
/* Rooster One's own rating (the theme's card prints it) takes the rating's track too: placed by the grid, it fell
   into the empty swatch track above the title on a card without swatches (census 5, FE-K1: two part orders). */
.rc-grid:not(.rooster-products--list) .rc-card :is(.wp-block-woocommerce-product-rating, .aieo-rating-aggregate) { grid-row: 4; }
.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; }

/* 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;
	justify-content: center;
	align-items: 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" chip */
.rc-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-inline-size: 34px;
	block-size: var(--rc-sw-size);
	padding: 0 6px;
	border-radius: var(--rc-radius-chip);
	background: var(--rc-color-surface);
	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;
	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 {
	background: color-mix(in srgb, var(--rc-color-text) 10%, var(--rc-color-surface));
}

/* 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;
	padding-block-start: 10px;
	min-block-size: 0 !important;
	line-height: 1.35;
	text-align: center;
}

.rc-grid .rc-card .wp-block-post-title a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	color: var(--rc-color-text);
	font-size: var(--rc-font-size-small);
	font-weight: var(--rc-title-weight);
	line-height: 1.35;
	text-decoration: none;
	text-wrap: pretty;
	overflow-wrap: break-word;
}

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

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

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

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

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

.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;
	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) {
	.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 at the top of its column: the theme's column runs the
   card's full height, and the picture's plate stretched with it into a tall strip. */
.rc-grid.rooster-products--list .rc-card .wp-block-woocommerce-product-image {
	align-self: start;
	aspect-ratio: 1;
	block-size: auto !important;
}
.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);
}

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

.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;
	container: rc-panel / inline-size;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto minmax(0, 1fr) auto;
	/* Named: a hidden search leaves its row empty, the list keeps the row that scrolls
	   and the foot stays in sight (unnamed, the list took the search's auto row). */
	grid-template-areas: "head" "search" "list" "foot";
	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__head { grid-area: head; }
.rc-panel__search { grid-area: search; }
.rc-vlist { grid-area: list; }
.rc-panel__foot { grid-area: foot; }

.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. */
.rc-panel--dialog {
	position: fixed;
	z-index: 999999; /* above its scrim (999998), see above */
	inset: 50% auto auto 50%;
	translate: -50% -50%;
	inline-size: min(420px, calc(100vw - 32px));
	block-size: min(640px, 80dvh);
}

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

/* 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;
}

/* 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;
}