/**
 * Catalogue cards v2 (hidden test ?gm_v2=1). Direction approved by Miguel on 11 Nov 2026:
 * white card with a carbon edge at rest, whole card carbon when selected, and one fixed
 * tone of the brand palette per machine family so the colour means something.
 */

/* Family tones. --gm-tone-on is the text colour that reads on top of the tone. */
body.gm-site-v2 .gm-card-li {
	--gm-tone: var(--gm-color-brand, #de881f);
	--gm-tone-on: #221f20;
}

body.gm-site-v2 .gm-card-li.product_cat-pastry-equipment { --gm-tone: var(--gm-palette-chocolate, #804108); --gm-tone-on: #fff; }
body.gm-site-v2 .gm-card-li.product_cat-pizza-equipment { --gm-tone: var(--gm-palette-liver-dogs, #b2640c); --gm-tone-on: #fff; }
body.gm-site-v2 .gm-card-li.product_cat-complete-line-bakery { --gm-tone: var(--gm-palette-seal-brown, #4e1e04); --gm-tone-on: #fff; }
body.gm-site-v2 .gm-card-li.product_cat-cutting { --gm-tone: var(--gm-palette-seal-brown, #4e1e04); --gm-tone-on: #fff; }
body.gm-site-v2 .gm-card-li.product_cat-proofing { --gm-tone: var(--gm-palette-harvest-gold, #d68b20); --gm-tone-on: #221f20; }
body.gm-site-v2 .gm-card-li.product_cat-rounding { --gm-tone: var(--gm-palette-honey-yellow, #f9b233); --gm-tone-on: #221f20; }
body.gm-site-v2 .gm-card-li.product_cat-moulding { --gm-tone: var(--gm-palette-persimmon, #ea5b0c); --gm-tone-on: #221f20; }
body.gm-site-v2 .gm-card-li.product_cat-dough-dividing { --gm-tone: var(--gm-color-brand, #de881f); --gm-tone-on: #221f20; }
body.gm-site-v2 .gm-card-li.product_cat-ciabatta-machines { --gm-tone: var(--gm-palette-sinopia, #ca3f0d); --gm-tone-on: #fff; }
body.gm-site-v2 .gm-card-li:is(.product_cat-deck-ovens, .product_cat-rotary-ovens, .product_cat-ovens) { --gm-tone: var(--gm-palette-rufous, #aa230e); --gm-tone-on: #fff; }

/* Card at rest */
body.gm-site-v2 .gm-card-li .gm-card {
	border: 1px solid var(--gm-color-ink, #221f20);
	border-top: 5px solid var(--gm-tone);
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	transform: none;
	transition: background-color 0.14s ease-out;
}

body.gm-site-v2 .gm-card-li .gm-card::before,
body.gm-site-v2 .gm-card-li .gm-card::after {
	content: none;
}

/* Family tag: the family tone as a solid block */
body.gm-site-v2 .gm-card-li .gm-card__eyebrow {
	border: 0;
	border-radius: 0;
	background: var(--gm-tone);
	color: var(--gm-tone-on);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.07em;
}

body.gm-site-v2 .gm-card-li .gm-card__price-label {
	color: var(--gm-color-muted, #565352);
	font-size: 11px;
}

body.gm-site-v2 .gm-card-li .gm-card__price-hint {
	font-size: 11px;
}

/* Card selected (mouse or keyboard): the text half goes carbon, the photo stays on white */
body.gm-site-v2 .gm-card-li .gm-card:is(:hover, :focus-within) {
	background: var(--gm-color-ink, #221f20);
	box-shadow: none;
	transform: none;
}

body.gm-site-v2 .gm-card-li .gm-card:is(:hover, :focus-within) .gm-card__media {
	background: #fff;
}

body.gm-site-v2 .gm-card-li .gm-card:is(:hover, :focus-within) .gm-card__body,
body.gm-site-v2 .gm-card-li .gm-card:is(:hover, :focus-within) .gm-card__body * {
	background-color: transparent;
	color: #fff !important;
}

body.gm-site-v2 .gm-card-li .gm-card:is(:hover, :focus-within) .gm-card__price-label {
	color: var(--gm-palette-honey-yellow, #f9b233) !important;
}

body.gm-site-v2 .gm-card-li .gm-card__link:focus-visible {
	outline: 3px solid var(--gm-color-brand, #f39200);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	body.gm-site-v2 .gm-card-li .gm-card {
		transition: none;
	}
}

/* =====================================================================
   Multicolour band (Miguel, 11 Nov): the brand strip stays, but the family
   tone takes most of it. When the card is selected the family tone runs
   across and the other tones are squeezed into thin stripes at the right.
   Hard-edged blocks, no blends.
   ===================================================================== */
@property --gm-band-main {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 58%;
}

body.gm-site-v2 .gm-card-li .gm-card,
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a {
	--gm-band-main: 58%;
	--gm-band-step: calc((100% - var(--gm-band-main)) / 4);
	--gm-band: linear-gradient(
		90deg,
		var(--gm-tone, var(--gm-family-tone)) 0 var(--gm-band-main),
		var(--gm-palette-seal-brown, #4e1e04) var(--gm-band-main) calc(var(--gm-band-main) + var(--gm-band-step)),
		var(--gm-palette-rufous, #aa230e) calc(var(--gm-band-main) + var(--gm-band-step)) calc(var(--gm-band-main) + var(--gm-band-step) * 2),
		var(--gm-palette-persimmon, #ea5b0c) calc(var(--gm-band-main) + var(--gm-band-step) * 2) calc(var(--gm-band-main) + var(--gm-band-step) * 3),
		var(--gm-palette-honey-yellow, #f9b233) calc(var(--gm-band-main) + var(--gm-band-step) * 3) 100%
	);
	border-top: 0;
	padding-top: 7px;
	background-color: #fff;
	background-image: var(--gm-band);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 100% 7px;
	transition: --gm-band-main 0.42s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.14s ease-out;
}

body.gm-site-v2 .gm-card-li .gm-card:is(:hover, :focus-within),
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:is(:hover, :focus-visible) {
	--gm-band-main: 90%;
	background-color: var(--gm-color-ink, #221f20);
	background-image: var(--gm-band);
}

:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a {
	padding-top: 17px;
}

@media (prefers-reduced-motion: reduce) {
	body.gm-site-v2 .gm-card-li .gm-card,
	:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a {
		transition: background-color 0.14s ease-out;
	}
}

/* Family name: the band already carries the colour, so the tag is plain type on the card */
body.gm-site-v2 .gm-card-li .gm-card__eyebrow {
	padding: 0;
	border: 0;
	background: none;
	color: var(--gm-color-ink, #221f20);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	box-shadow: none;
}

/* Selected: keep the band as a 7 px strip (the earlier "background" shorthand reset its size) */
body.gm-site-v2 .gm-card-li .gm-card:is(:hover, :focus-within),
:is(body.gm-site-v2, body.gm-pdp-v2) .gm-mega-menu__card > a:is(:hover, :focus-visible) {
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 100% 7px;
}