/*
 * Spicy Pedals — front-end styles.
 *
 * theme.json owns the tokens (colour, type scale, spacing). This file owns
 * the things theme.json cannot express: the numbered section header, the
 * grit texture, the cream reading surface, and the spec seal.
 *
 * Rules of the house:
 *   - No external requests. Ever.
 *   - Every grid column gets minmax(0, …) so nothing can overflow.
 *   - Anything that moves is gated behind prefers-reduced-motion.
 */

/* ---------------------------------------------------------------- reset */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg { display: block; max-width: 100%; height: auto; }

/* ------------------------------------------------------------ a11y base */

/*
 * Skip link. WordPress renders this itself as
 * <a class="skip-link screen-reader-text" href="#content">, styled by
 * wp-includes/css/wp-block-template-skip-link.css — which paints it #444 on
 * #eee. The markup is core's, so the hook has to be core's class too; a
 * theme-private .sp-skip-link matches nothing and was dead CSS.
 *
 * Only the paint is overridden: core keeps owning the clip-path/position
 * dance that hides it until focus. Specificity (0,3,0) and app.css loads
 * after the core sheet, so this wins.
 *
 * bone-2 on fire-deep measures 5.6:1.
 */
.skip-link.screen-reader-text:focus {
	padding: 1rem 1.5rem;
	background-color: var(--wp--preset--color--fire-deep);
	color: var(--wp--preset--color--bone-2);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: .1em;
	text-decoration: none;
}

/*
 * :is() rather than :where() on purpose. :where() contributes zero, which put
 * the focus ring at specificity (0,1,0) — losing to any plugin rule of the
 * shape `.some-block a:focus { outline: none }`, of which core's navigation
 * and MediaElement both ship one. :is() takes the weight of its heaviest
 * argument ([tabindex] → (0,1,0)), so the ring lands at (0,2,0) and holds.
 */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--fire-hot);
	outline-offset: 3px;
}

/* Cream and seal surfaces need the deep orange to stay AA against bone. */
:is(.is-style-cream, .is-style-seal) :is(a, button, input, select, textarea, summary):focus-visible {
	outline-color: var(--wp--preset--color--fire-deep);
}

/* ------------------------------------------------- numbered section head */

.sp-section-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--10);
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 1.5px solid var(--wp--preset--color--line-strong);
}

@media (min-width: 48rem) {
	.sp-section-head {
		grid-template-columns: 8ch minmax(0, 1fr) minmax(0, 22ch);
		align-items: start;
		gap: var(--wp--preset--spacing--20);
	}
}

.sp-section-head__num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--fire-hot);
	letter-spacing: .12em;
}

.sp-section-head__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	line-height: .95;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.sp-section-head__note {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	color: var(--wp--preset--color--bone-dim);
}

@media (min-width: 48rem) {
	.sp-section-head__note { text-align: right; }
}

/* --------------------------------------------------------- grit texture */

/*
 * The poster's worn-ink look, done with a repeating gradient rather than an
 * image. Applied to the text itself via background-clip so it scales with
 * the type instead of sitting behind it in a fixed-size tile.
 */
.is-style-grit {
	background-image:
		radial-gradient(circle at 50% 50%, transparent 38%, rgba(10, 9, 8, .55) 39%);
	background-size: 3px 3px;
	background-repeat: repeat;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/*
 * Older engines that cannot clip to text still get readable type. The
 * background-*colour* has to go too: the blocks that carry this style also
 * carry has-bone-background-color, so without this the fallback painted a
 * bone box behind bone text and the headline vanished.
 */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.is-style-grit {
		background-image: none;
		background-color: transparent;
		color: var(--wp--preset--color--bone);
		-webkit-text-fill-color: currentColor;
	}
}

.is-style-brush {
	font-family: var(--wp--preset--font-family--script);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.25;
	color: var(--wp--preset--color--fire-hot);
}

/* ------------------------------------------------ cream reading surface */

/*
 * Long-form lives on bone, not ink. Full-bleed via viewport-width padding
 * trick so the band breaks out of the content column without JS.
 */
.is-style-cream {
	background: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--ink);
	padding-block: var(--wp--preset--spacing--50);
}

.is-style-cream :where(h1, h2, h3, h4, h5) { color: var(--wp--preset--color--ink); }
.is-style-cream :where(h6) { color: var(--wp--preset--color--fire-deep); }
.is-style-cream :where(a) { color: var(--wp--preset--color--fire-deep); }
.is-style-cream :where(a:hover) { color: var(--wp--preset--color--ink); }
.is-style-cream .sp-section-head { border-block-start-color: rgba(10, 9, 8, .55); }
.is-style-cream .sp-section-head__num { color: var(--wp--preset--color--fire-deep); }
.is-style-cream .sp-section-head__note { color: #55503E; }

/*
 * Captions inherit bone-dim from theme.json's `caption` element, which is
 * 1.6:1 on bone — invisible the moment an image with a caption is dropped
 * into a cream band.
 */
.is-style-cream :where(figcaption, .wp-element-caption) { color: var(--wp--preset--color--ink-3); }

/* Reading measure — prose should never run the full 1440px. */
.sp-prose {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
	max-width: var(--wp--custom--measure--prose);
}

.sp-prose > * + * { margin-block-start: 1.2em; }

/* ------------------------------------------------------------ spec seal */

.is-style-seal {
	background: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--ink);
	border-block: 6px solid var(--wp--preset--color--fire);
	padding-block: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: .1em;
}

/*
 * The seal is a bone surface, so it needs the same colour flip cream gets.
 * Without it theme.json's link colour (fire-hot) lands on bone at 2.2:1 —
 * latent today because the seal happens to hold no links on any published
 * page, live the moment a product attribute term renders as one inside
 * woocommerce/product-specifications.
 */
.is-style-seal :where(a) { color: var(--wp--preset--color--fire-deep); }
.is-style-seal :where(a:hover) { color: var(--wp--preset--color--ink); }

/* --------------------------------------------------------- ruled layout */

.is-style-ruled {
	gap: 0;
}

.is-style-ruled > .wp-block-column {
	min-width: 0; /* the overflow guard */
	padding: var(--wp--preset--spacing--20);
	border-inline-start: 1px solid var(--wp--preset--color--line);
}

.is-style-ruled > .wp-block-column:first-child { border-inline-start: 0; }

@media (max-width: 47.999rem) {
	.is-style-ruled > .wp-block-column {
		border-inline-start: 0;
		border-block-start: 1px solid var(--wp--preset--color--line);
	}
	.is-style-ruled > .wp-block-column:first-child { border-block-start: 0; }
}

/* --------------------------------------------------------- data strip */

.sp-datastrip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--wp--preset--color--bone-dim);
	padding-block: var(--wp--preset--spacing--20);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

/*
 * The strip's accent figures. The hero pattern marks them up as <mark> with a
 * preset colour class, so the old `b`-only selector matched nothing anywhere.
 * <mark> is included for the colour but deliberately not for the weight — the
 * hero numbers are not bold today and this is not the place to change that.
 */
.sp-datastrip :is(b, strong, mark) { color: var(--wp--preset--color--fire-hot); }
.sp-datastrip :is(b, strong) { font-weight: 700; }

/* --------------------------------------------------------- hero figure */

/*
 * The drawing in the hero is a link, not decoration. One click target covering
 * the whole figure, a text label that says where it goes (the SVG is
 * aria-hidden — it is a generic stompbox, it must not claim to be a product),
 * and the global :focus-visible ring lands on it for free because it is an <a>.
 */
.sp-hero-figure {
	display: grid;
	justify-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--bone);
	text-decoration: none;
}

.sp-hero-figure svg {
	width: 100%;
	max-width: 15rem;
	height: auto;
}

.sp-hero-figure__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--wp--preset--color--bone-dim);
}

.sp-hero-figure:hover .sp-hero-figure__label,
.sp-hero-figure:focus-visible .sp-hero-figure__label {
	color: var(--wp--preset--color--fire-hot);
}

/* ------------------------------------------------------- product cards */

.sp-card { position: relative; min-width: 0; }

.sp-card__ghost {
	position: absolute;
	inset-block-start: .25em;
	inset-inline-end: .25em;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1;
	color: rgba(223, 215, 180, .07);
	pointer-events: none;
	user-select: none;
}

/*
 * The ghost number itself. A CSS counter rather than authored text, so it stays
 * correct however many products the query returns. Lives here — not inline in a
 * single template — because the catalogue loop now also appears in page content.
 */
.sp-catalogue { counter-reset: sp-pedal; }
.sp-catalogue .sp-card { counter-increment: sp-pedal; }
.sp-catalogue .sp-card__ghost::before { content: counter(sp-pedal, decimal-leading-zero); }

/* --------------------------------------------------- newsletter form */

/*
 * The subscribe form on the front page. Lived in an inline <style> inside
 * <main> until now — which is invalid placement and shipped a second,
 * duplicate copy of the counter rules above.
 */
.sp-form { display: grid; gap: var(--wp--preset--spacing--20); max-width: 34rem; }

.sp-form label {
	display: block;
	margin-block-end: .45rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--wp--preset--color--bone-dim);
}

.sp-form input {
	width: 100%;
	min-width: 0;
	padding: .7rem .1rem;
	font: inherit;
	font-family: var(--wp--preset--font-family--serif);
	color: inherit;
	background: transparent;
	border: 0;
	border-block-end: 2px solid var(--wp--preset--color--bone-dim);
	border-radius: 0;
}

.sp-form input::placeholder { color: var(--wp--preset--color--bone-dim); }
.sp-form input:focus { border-block-end-color: var(--wp--preset--color--fire-hot); }
.sp-form button { justify-self: start; border: 0; cursor: pointer; }

/* ------------------------------------------------------- embedded media */

/*
 * [video] renders <div class="wp-video" style="width:720px"> with a matching
 * width attribute on the <video>. MediaElement's JS rewrites both on load, so
 * the overflow only shows up with JS off or before the player boots — which
 * is exactly when nothing else is there to catch it. max-width beats the
 * inline width without needing !important.
 */
.wp-video,
.wp-video-shortcode,
.mejs-container,
.mejs-overlay { max-width: 100%; }

/* -------------------------------------------- WooCommerce form controls */

/*
 * WooCommerce ships its controls essentially unstyled — its only colour
 * declaration on the variation picker is `background-color: initial`. On a
 * near-black theme that leaves the UA defaults showing through: measured on
 * /product/texas-toaster/, the variation <select> rendered its label in
 * #000000 on ink #0A0908 — 1.02:1, i.e. invisible. The quantity field was the
 * mirror image: a white box with black text punched into a black page.
 *
 * This is the same treatment the dealer form gets further down, so the only
 * two forms on the site now look like the same site.
 *
 * Contrast against ink-2 #131110:
 *   bone     on ink-2   13.0:1   control text
 *   bone-dim on ink-2    8.3:1   control border (1.4.11 floor is 3:1)
 *
 * `appearance` is deliberately left alone: the native disclosure arrow
 * inherits `color`, so it comes along for free rather than needing redrawing.
 *
 * The long WooCommerce-shaped selector is required, not stylistic — see the
 * note in the variable-product block below.
 */
.woocommerce div.product form.cart .variations select,
.woocommerce div.product form.cart .quantity input.qty {
	border: 1px solid var(--wp--preset--color--bone-dim);
	border-radius: 0;
	background-color: var(--wp--preset--color--ink-2);
	color: var(--wp--preset--color--bone);
	font-size: var(--wp--preset--font-size--x-small);
}

/*
 * Font and line-height are set on the quantity field only. Chrome lays the
 * selected-option text of a <select> out in an internal box that ignores
 * line-height but still honours padding, so `line-height: 1.5` plus vertical
 * padding clipped the glyphs; and the mono stack's first entry, ui-monospace,
 * is a system keyword that platform select widgets resolve inconsistently.
 * Neither risk is worth taking for a control the UA already renders legibly
 * once it has the right colours.
 */
.woocommerce div.product form.cart .quantity input.qty {
	font-family: var(--wp--preset--font-family--mono);
	line-height: 1.5;
}

/*
 * Height via min-height, not vertical padding: Chrome sizes a <select>'s
 * internal text box from the content box, so padding-block shrinks the space
 * the glyphs get and clips their lower half. Inline padding is safe.
 */
.woocommerce div.product form.cart .variations select {
	padding-block: 0;
	padding-inline: 1rem;
	min-height: 3rem;
}
.woocommerce div.product form.cart .quantity input.qty { padding: .85rem .5rem; text-align: center; }

/* The dropdown popup is a separate paint; without this it stays UA-white. */
.woocommerce div.product form.cart .variations select option {
	background-color: var(--wp--preset--color--ink-2);
	color: var(--wp--preset--color--bone);
}

.woocommerce div.product form.cart :is(select, input.qty):focus {
	border-color: var(--wp--preset--color--fire-hot);
	background-color: var(--wp--preset--color--ink-3);
}

/* ------------------------------------------------- variable product form */

/*
 * Measured at 360px: WooCommerce's variation picker laid out 340px of content
 * inside a 328px column and the 12px difference was being swallowed by
 * body{overflow-x:hidden} — clipped, not scrollable, so the right-hand edge of
 * the select was simply unreachable.
 *
 * The width comes from Woo's own smallscreen rules: table.variations is
 * switched to display:block (so it no longer shrinks to its container) while
 * the select keeps min-width:70% plus a 1em right margin, and the label cell
 * still reserves 69px beside it.
 *
 * Stacking label over control below the same 48rem breakpoint Woo uses removes
 * the overflow at source and reads better on a phone besides. The label stays
 * a <label for>, so nothing about the association changes.
 */
@media (max-width: 47.999rem) {
	.variations_form .variations,
	.variations_form .variations :is(tbody, tr, th, td) {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.variations_form .variations :is(th, td) {
		padding-inline: 0;
		text-align: start;
	}

	/*
	 * Woo's own selector shape, deliberately. Its rule is
	 * `.woocommerce div.product form.cart .variations select { margin-right: 1em }`
	 * at (0,4,3) — a shorter selector here loses the tie-break and leaves 16px
	 * of margin hanging off a 100%-wide control, which was the last 16px of the
	 * overflow. Same specificity, later stylesheet, so this wins cleanly
	 * without !important.
	 */
	.woocommerce div.product form.cart .variations select {
		width: 100%;
		min-width: 0;
		max-width: 100%;
		margin-right: 0;
	}
}

/* ------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

@media (prefers-reduced-motion: no-preference) {
	a,
	.wp-block-button__link { transition: color .15s ease, background-color .15s ease; }
}

/* ========================================================== forms (WPForms)
 *
 * The dealer enquiry form on /dealers/ is a WPForms Lite form embedded with
 * the wpforms/form-selector block. WPForms runs on its *classic* render
 * engine with its own stylesheet switched off (wpforms_settings.disable-css
 * = 3), so everything below is the entire visual definition of the form. If
 * that setting is ever flipped back to 1 or 2, the plugin's 65-169 KB
 * stylesheet lands on top of this and the form stops looking like the site.
 *
 * Scoped to .wpforms-container, so any future WPForms form inherits the same
 * treatment without needing extra classes in the block.
 *
 * Colour rule of the house: this form sits on ink, so accents are fire-hot.
 * The .is-style-cream block at the end flips them to fire-deep, in case the
 * form is ever moved onto a bone surface.
 *
 * Contrast, all measured against ink #0A0908:
 *   bone     on ink   19.0:1   field text
 *   bone-dim on ink    8.7:1   field borders. Clears the 3:1 floor that
 *                              1.4.11 sets for control boundaries, which
 *                              line-strong (2.5:1) does not.
 *   fire-hot on ink    6.3:1   required marks, errors, focus ring
 *   ink on fire-hot    6.3:1   submit label. Deliberately NOT the theme.json
 *                              button pair (fire + bone-2): that measures
 *                              3.9:1 and fails AA at this text size.
 */

.wpforms-container {
	margin-block-start: var(--wp--preset--spacing--30);
}

.wpforms-form {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 1.5px solid var(--wp--preset--color--line-strong);
}

/* ------------------------------------------------------------ field rows */

.wpforms-field-container {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.wpforms-field {
	display: grid;
	gap: .5rem;
	min-width: 0;
}

.wpforms-field-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--wp--preset--color--bone);
}

.wpforms-required-label {
	margin-inline-start: .35em;
	color: var(--wp--preset--color--fire-hot);
}

.wpforms-field-description {
	order: 3;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	color: var(--wp--preset--color--bone-dim);
}

/* --------------------------------------------------------------- inputs */

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container input[type="number"],
.wpforms-container textarea,
.wpforms-container select {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: .85rem 1rem;
	border: 1px solid var(--wp--preset--color--bone-dim);
	border-radius: 0;
	background-color: var(--wp--preset--color--ink-2);
	color: var(--wp--preset--color--bone);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	appearance: none;
}

.wpforms-container textarea {
	min-height: 9rem;
	resize: vertical;
}

.wpforms-container ::placeholder {
	color: var(--wp--preset--color--bone-dim);
	opacity: 1;
}

/*
 * The focus ring itself comes from the global :focus-visible rule. This adds
 * the fill shift, so the active field still reads as active where an outline
 * is suppressed or repainted by the OS.
 */
.wpforms-container :is(input, textarea, select):focus {
	border-color: var(--wp--preset--color--fire-hot);
	background-color: var(--wp--preset--color--ink-3);
}

/*
 * Chrome paints autofilled inputs white with black text, which would punch a
 * hole in the page. The inset shadow repaints the fill; the background
 * property itself cannot be overridden.
 */
.wpforms-container :is(input, textarea, select):-webkit-autofill,
.wpforms-container :is(input, textarea, select):-webkit-autofill:focus {
	-webkit-text-fill-color: var(--wp--preset--color--bone);
	-webkit-box-shadow: 0 0 0 100px var(--wp--preset--color--ink-3) inset;
	caret-color: var(--wp--preset--color--bone);
}

/* ---------------------------------------------------------------- errors */

/* jQuery Validate appends the error last; order pulls it back under its input. */
.wpforms-container label.wpforms-error {
	display: block;
	order: 2;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .04em;
	color: var(--wp--preset--color--fire-hot);
}

.wpforms-container label.wpforms-error::before { content: "\2014\00a0"; }

.wpforms-container :is(input, textarea, select).wpforms-error,
.wpforms-container .wpforms-has-error :is(input, textarea, select) {
	border-color: var(--wp--preset--color--fire-hot);
	border-width: 2px;
}

/* Form-level notices: the AJAX failure banner and the no-JS warning. */
.wpforms-container .wpforms-error-container,
.wpforms-container .wpforms-error-noscript {
	display: block;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border-inline-start: var(--wp--custom--rule--seal) solid var(--wp--preset--color--fire-hot);
	background-color: var(--wp--preset--color--ink-3);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
	color: var(--wp--preset--color--bone);
}

.wpforms-container .wpforms-error-container p { margin: 0; }

/* --------------------------------------------------------------- submit */

.wpforms-submit-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
}

.wpforms-container button.wpforms-submit {
	padding: 1rem 1.75rem;
	border: 0;
	border-radius: 0;
	background-color: var(--wp--preset--color--fire-hot);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	cursor: pointer;
}

.wpforms-container button.wpforms-submit:hover {
	background-color: var(--wp--preset--color--bone-2);
	color: var(--wp--preset--color--ink);
}

.wpforms-container button.wpforms-submit[disabled],
.wpforms-container button.wpforms-submit.wpforms-disabled {
	opacity: .55;
	cursor: progress;
}

/* WPForms toggles this spinner inline; keep it from shifting the baseline. */
.wpforms-container .wpforms-submit-spinner {
	display: inline-block;
	width: 26px;
	height: 26px;
	margin: 0;
}

/* --------------------------------------------------------- confirmation */

.wpforms-confirmation-container,
.wpforms-confirmation-container-full {
	padding: var(--wp--preset--spacing--20);
	border: 1.5px solid var(--wp--preset--color--fire-hot);
	background-color: var(--wp--preset--color--ink-3);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--bone);
}

.wpforms-confirmation-container p:first-child { margin-block-start: 0; }
.wpforms-confirmation-container p:last-child  { margin-block-end: 0; }

/* ----------------------------------------------- on a bone/cream surface */

/*
 * Unused today: the dealer form sits on ink. Kept so the form survives a move
 * onto .is-style-cream without breaking the fire-deep-on-bone rule.
 * fire-deep + bone-2 measures 5.6:1.
 */
.is-style-cream .wpforms-container input[type="text"],
.is-style-cream .wpforms-container input[type="email"],
.is-style-cream .wpforms-container textarea {
	border-color: var(--wp--preset--color--ink-3);
	background-color: var(--wp--preset--color--bone-2);
	color: var(--wp--preset--color--ink);
}

.is-style-cream .wpforms-field-label { color: var(--wp--preset--color--ink); }
.is-style-cream .wpforms-field-description { color: var(--wp--preset--color--ink-3); }

.is-style-cream .wpforms-required-label,
.is-style-cream .wpforms-container label.wpforms-error { color: var(--wp--preset--color--fire-deep); }

.is-style-cream .wpforms-container button.wpforms-submit {
	background-color: var(--wp--preset--color--fire-deep);
	color: var(--wp--preset--color--bone-2);
}

.is-style-cream .wpforms-container button.wpforms-submit:hover {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bone-2);
}

/* ================================================== single product page
 *
 * Everything below is scoped to the product template: the WooCommerce
 * gallery, the long description now that it renders as page content
 * instead of a tab panel, and the related-products row.
 */

/* ------------------------------------------------------- gallery frame */

/*
 * The large image sits in a 1/1 box that is almost always wider than the
 * photo inside it (the shop's product shots are portrait crops of a square
 * file). Unframed, that left the arrows floating in undifferentiated black
 * with nothing to belong to. A one-pixel rule and a slightly lifted ground
 * make the box read as a viewer.
 */
.wc-block-product-gallery-large-image {
	background-color: var(--wp--preset--color--ink-2);
	border: 1px solid var(--wp--preset--color--line);
}

/* --------------------------------------------- gallery next / previous */

/*
 * As shipped these are `background:#fff; border:none; width:40px` with the
 * chevron set to `color: inherit` — which on this theme inherits bone
 * #DFD7B4 onto white, 1.5:1. The arrows were invisible and all that was
 * left were two white rectangles pinned to the edges of the frame. The
 * owner's words: "las flechas de la galeria parecen dos cuadros grandes".
 *
 * Woo's own rules are all inside :where(), i.e. specificity zero, so a
 * single class overrides every one of them without !important.
 *
 * Contrast, chevron against the button ground (ink at 82% over a photo,
 * worst case a white photo — measured against the flattened value):
 *   bone   #DFD7B4 on #2B2A28   9.3:1
 *   bone-2 #EAE4CB on fire #C4441F   5.3:1   (hover)
 */
.wc-block-next-previous-buttons__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background-color: rgba(10, 9, 8, .82);
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 0;
	color: var(--wp--preset--color--bone);
	cursor: pointer;
}

/*
 * 44x44 is the WCAG 2.5.8 target-size floor, and the buttons overlap the
 * photo, so they are inset far enough that the 3px focus ring at 3px
 * offset clears the frame's `overflow: hidden`.
 */
.wc-block-product-gallery-large-image .wc-block-next-previous-buttons {
	padding-inline: var(--wp--preset--spacing--10);
}

/*
 * The shipped chevron is an 8x12 <svg> with no viewBox, so `height: auto`
 * from the reset has nothing to solve against — both axes are set here.
 */
.wc-block-next-previous-buttons__icon {
	width: 9px;
	height: 14px;
}

.wc-block-next-previous-buttons__button:hover {
	background-color: var(--wp--preset--color--fire);
	border-color: var(--wp--preset--color--fire);
	color: var(--wp--preset--color--bone-2);
}

.wc-block-next-previous-buttons__button:active {
	background-color: var(--wp--preset--color--fire-deep);
	border-color: var(--wp--preset--color--fire-deep);
	color: var(--wp--preset--color--bone-2);
}

/*
 * Woo sets `outline-offset: -2px` on the button, which draws the focus ring
 * inside the 44px box where it collides with the chevron. The global ring
 * in this file already sets `outline-offset: 3px` at (0,2,0) and wins, but
 * the border colour is restated so a keyboard user gets the same shape a
 * mouse user gets on hover.
 */
.wc-block-next-previous-buttons__button:focus-visible {
	border-color: var(--wp--preset--color--fire-hot);
}

/*
 * Disabled keeps the same opaque ground. Fading the whole chip instead —
 * the obvious move — backfired on the product shots taken against white
 * (/product/la-ratita/): a half-transparent chip over a white photo
 * resolves to mid-grey and the arrow turns back into the featureless
 * rectangle this whole section exists to get rid of. The state is carried
 * by the chevron, which Woo already drops to 30% opacity, plus the quieter
 * border and colour here.
 */
.wc-block-next-previous-buttons__button[aria-disabled="true"],
.wc-block-next-previous-buttons__button[aria-disabled="true"]:hover {
	background-color: rgba(10, 9, 8, .82);
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--bone-dim);
}

@media (prefers-reduced-motion: no-preference) {
	.wc-block-next-previous-buttons__button {
		transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	}
}

/* ------------------------------------------------------ gallery thumbs */

/*
 * The thumbnail strip had no edge of its own, so on ink the darker product
 * shots bled into the page and the strip read as a ragged column rather
 * than a row of choices. The active one is marked with the brand orange
 * instead of Woo's `filter: brightness(.8)`, which dims the current
 * selection — the one thumbnail that should not look switched off.
 */
.wc-block-product-gallery-thumbnails__thumbnail__image {
	background-color: var(--wp--preset--color--ink-2);
	border: 1px solid var(--wp--preset--color--line);
	cursor: pointer;
}

.wc-block-product-gallery-thumbnails__thumbnail__image:hover {
	border-color: var(--wp--preset--color--bone-dim);
}

.wc-block-product-gallery-thumbnails__thumbnail__image--is-active {
	border-color: var(--wp--preset--color--fire);
	filter: none;
}

/*
 * Below 601px Woo hides the next/previous buttons and turns the thumbnail
 * strip horizontal, which is the right call on a phone — swipe drives the
 * gallery. All that is needed here is breathing room between the frame and
 * the strip, which Woo's `gap: 2%` does not give at that width.
 */
@media (max-width: 37.5rem) {
	.wc-block-product-gallery-thumbnails {
		margin-block-start: var(--wp--preset--spacing--10);
	}
}

/* ----------------------------------------------------- the long story */

/*
 * The description is the product page's main text now, not a tab panel.
 * .sp-prose caps the measure; these rules handle what a description
 * actually contains — subheadings, lists and the occasional demo clip.
 */
.sp-product-story .sp-prose > :first-child { margin-block-start: 0; }

.sp-product-story .sp-prose :where(h2, h3, h4) {
	margin-block-start: 1.6em;
	margin-block-end: .5em;
}

.sp-product-story .sp-prose :where(ul, ol) {
	padding-inline-start: 1.2em;
}

.sp-product-story .sp-prose :where(li + li) { margin-block-start: .5em; }

/*
 * Product demos are shot vertical: [video] on /product/texas-toaster/ is
 * 720x900, which at full prose measure is a 735px-tall black rectangle
 * dropped in the middle of a paragraph. Capped so a clip reads as an
 * inline demo rather than a section break.
 */
.sp-product-story .wp-video,
.sp-product-story .wp-video-shortcode { max-width: 22rem; }

/*
 * The seal is the same bone surface as the story band above it, so the two
 * are butted together and the seal's 6px fire rules do the dividing. The
 * default block gap between them left a ~30px black stripe that read as a
 * rendering fault rather than a decision.
 */
.sp-product-story + .is-style-seal { margin-block-start: 0; }

/* -------------------------------------------------- related products */

/*
 * Three cards in a flex row with no shared baseline: a two-line pedal name
 * pushed its price and button down while its neighbours' sat higher. Grid
 * with an explicit row order aligns them, and the button is pinned to the
 * bottom so the row of calls to action lines up whatever the titles do.
 */
.sp-related .wc-block-product-template > li {
	display: flex;
	flex-direction: column;
}

.sp-related .wc-block-product-template > li > .wp-block-woocommerce-product-button {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--10);
}


/* ------------------------------------------------------ draft gap marker */

/*
 * .sp-gap marks a hole in a manual: a field nobody has confirmed yet.
 *
 * The whole point of the manuals project is that an unverified number never
 * gets stated as fact, so these paragraphs have to be impossible to mistake
 * for body copy. On the cream reading surface a plain <p> in serif would read
 * as part of the manual, which is exactly the failure mode to avoid.
 *
 * So: struck out of the prose flow entirely — hazard stripes down the left
 * edge, mono type, and a PENDING label that says what it is. Anyone who ever
 * sees one of these on a published page knows immediately that something is
 * unfinished, and Rolf can find them all with a browser search for "PENDING".
 */
.sp-prose .sp-gap,
.sp-gap {
	position: relative;
	margin-block: 1.6em;
	padding: .9em 1em .9em 1.35em;
	border: 1.5px dashed var(--wp--preset--color--fire-deep, #9E340F);
	border-inline-start: 0;
	background: rgba(158, 52, 15, .07);
	color: #6B2A10;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: var(--wp--preset--font-size--x-small, .82rem);
	line-height: 1.5;
	text-transform: none;
	letter-spacing: 0;
}

/* Hazard stripes down the leading edge — reads as "roadworks", not as text. */
.sp-gap::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: .55rem;
	background: repeating-linear-gradient(
		135deg,
		var(--wp--preset--color--fire-deep, #9E340F) 0 .3rem,
		transparent .3rem .6rem
	);
}

/*
 * The label. Generated content, so it never ends up in the post body and can
 * never be mistaken for something Rolf wrote.
 */
.sp-gap::after {
	content: "PENDING — NOT CONFIRMED";
	display: block;
	margin-block-start: .55em;
	color: var(--wp--preset--color--fire-deep, #9E340F);
	font-weight: 700;
	font-size: .85em;
	text-transform: uppercase;
	letter-spacing: .12em;
}

/* Dark surfaces (anything outside the cream reading band). */
:where(:not(.is-style-cream)) > .sp-gap,
.is-style-cream .sp-gap { color: #6B2A10; }

@media (prefers-contrast: more) {
	.sp-gap { background: rgba(158, 52, 15, .16); color: #4A1C0A; }
}

/*
 * Print: a manual printed for the bench must still show its holes. Stripes
 * survive as a solid rule; the label stays.
 */
@media print {
	.sp-gap { background: none; border-style: dashed; }
	.sp-gap::before { background: var(--wp--preset--color--fire-deep, #9E340F); }
}

/* ========================================================= discontinued
 *
 * The mark for a product that is never coming back.
 *
 * There are already two "something is wrong here" treatments in this sheet and
 * this is neither of them, so the shapes are deliberately kept apart:
 *
 *   .sp-gap        hazard stripes + PENDING label. Means "unfinished, do not
 *                  trust this yet". A discontinued pedal is the opposite of
 *                  unfinished — it is finished for good — so no stripes.
 *   store notices  WooCommerce's own red error banner. Means "the page just
 *                  failed". Landing on a discontinued product is not a failure
 *                  and must not look like one.
 *
 * What is borrowed instead is .is-style-seal: the 6px fire rule that already
 * says "this block is a matter of record, not a call to action". Here it is one
 * rule on the top edge only, plus a stamped word set in a box. It reads as a
 * file stamp on a page that stays in the archive — which is exactly the
 * decision it is reporting.
 *
 * Markup comes from mu-plugins/spicy-discontinued.php, in the slot the buy
 * button used to occupy:
 *   .sp-disc       the panel on the product page
 *   .sp-disc-tag   the one-line mark on a catalogue card
 *   ...--discontinued  the stock indicator, via woocommerce_get_availability
 */

.sp-disc {
	margin-block-start: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--line-strong);
	border-block-start: 6px solid var(--wp--preset--color--fire);
	background: rgba(196, 68, 31, .07);
}

.sp-disc > * { margin-block: 0; }
.sp-disc > * + * { margin-block-start: .85em; }

/*
 * The stamp. Rotated a hair so it reads as something pressed onto the page
 * after the fact rather than as a button — the one thing it must never be
 * mistaken for, sitting where the add-to-cart button used to be.
 *
 * A transform, not an animation: nothing here moves, so this is outside the
 * scope of the prefers-reduced-motion block further up.
 *
 * fire-hot on ink measures 6.2:1.
 */
.sp-disc__stamp {
	display: inline-block;
	padding: .3em .75em;
	border: 2px solid var(--wp--preset--color--fire-hot);
	color: var(--wp--preset--color--fire-hot);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .18em;
	transform: rotate(-1.5deg);
	transform-origin: left center;
}

.sp-disc__lede {
	color: var(--wp--preset--color--bone);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.15;
}

.sp-disc__body,
.sp-disc__links {
	color: var(--wp--preset--color--bone-dim);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.sp-disc__links {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: .12em;
	line-height: 1.9;
}

.sp-disc__links a { color: var(--wp--preset--color--fire-hot); }
.sp-disc__links a:hover { color: var(--wp--preset--color--bone); }

/*
 * On bone. The panel is only rendered on the single-product buy column today,
 * which is ink — but .is-style-cream and .is-style-seal are full-width bands on
 * the same page, and the day this mark is moved into one of them fire-hot would
 * land on bone at 2.2:1. Written now, for the same reason the seal's link
 * colour was.
 */
:is(.is-style-cream, .is-style-seal) .sp-disc {
	border-color: rgba(10, 9, 8, .35);
	border-block-start-color: var(--wp--preset--color--fire-deep);
	background: rgba(158, 52, 15, .08);
}

:is(.is-style-cream, .is-style-seal) .sp-disc__stamp {
	border-color: var(--wp--preset--color--fire-deep);
	color: var(--wp--preset--color--fire-deep);
}

:is(.is-style-cream, .is-style-seal) .sp-disc__lede { color: var(--wp--preset--color--ink); }
:is(.is-style-cream, .is-style-seal) :is(.sp-disc__body, .sp-disc__links) { color: #55503E; }
:is(.is-style-cream, .is-style-seal) .sp-disc__links a { color: var(--wp--preset--color--fire-deep); }
:is(.is-style-cream, .is-style-seal) .sp-disc__links a:hover { color: var(--wp--preset--color--ink); }

/* ----------------------------------------------- the catalogue card mark */

/*
 * Same stamp, one line, in the column where the card's button sits. It has to
 * survive next to a real "Add to cart" two rows down without being read as
 * another one, hence the box outline and no fill.
 */
.sp-disc-tag {
	margin-block-start: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--fire-hot);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .18em;
	line-height: 1.5;
}

.sp-disc-tag::before {
	content: "";
	display: block;
	width: 2.5rem;
	margin-block-end: .7em;
	border-block-start: 3px solid var(--wp--preset--color--fire);
}

/* The qualifier. Says what the stamp means, quietly, so nobody has to guess. */
.sp-disc-tag__note {
	display: block;
	margin-block-start: .35em;
	color: var(--wp--preset--color--bone-dim);
	font-weight: 400;
	letter-spacing: .12em;
}

/*
 * The stock line. WooCommerce composes this class from the 'class' key of
 * woocommerce_get_availability, so --discontinued only exists because the
 * mu-plugin puts it there. It sits inside .sp-datastrip, which already sets the
 * mono/uppercase treatment; all that is left is the colour, so the word does
 * not read as the same order of fact as the SKU next to it.
 */
.wc-block-components-product-stock-indicator--discontinued {
	color: var(--wp--preset--color--fire-hot);
	font-weight: 700;
}

:is(.is-style-cream, .is-style-seal) .wc-block-components-product-stock-indicator--discontinued {
	color: var(--wp--preset--color--fire-deep);
}

@media (prefers-contrast: more) {
	.sp-disc { background: rgba(196, 68, 31, .16); }
	.sp-disc__body,
	.sp-disc__links { color: var(--wp--preset--color--bone-2); }
}

/*
 * Print. Someone printing a product page for their records should still get
 * the fact that the pedal is gone; a background tint will not survive the
 * printer, the rules and the stamp box will.
 */
@media print {
	.sp-disc { background: none; }
}


/* ================================================ discontinued · succession
 *
 * El bloque de sucesión, y la línea de sucesor en el catálogo.
 *
 * Añadido después de la sección "discontinued" de arriba, que sigue siendo la
 * dueña de .sp-disc y .sp-disc-tag. Esto es lo que hace falta encima cuando un
 * producto descontinuado tiene sustituto — hoy sólo uno: La Ratita → La Ratita:
 * Black Label.
 *
 * EL PROBLEMA DE DISEÑO. En la misma columna hay ahora dos bloques que compiten:
 * "esto no se vende" y "esto sí". Si los dos van sobre ink con la misma paleta,
 * gana el de arriba y quien buscaba La Ratita se va sin ver la Black Label. Si
 * el sucesor grita más de la cuenta, la ficha parece un anuncio metido en una
 * página que el visitante pidió por su nombre.
 *
 * LA SOLUCIÓN, con el sistema que ya existe. .sp-succ toma prestada la
 * superficie de .is-style-cream: bone macizo sobre la página ink. Es el único
 * bloque claro de esa columna, así que gana por contraste de material y no por
 * cuerpo de letra ni por color de alerta. Y ese mismo bone es el que este sitio
 * usa para "aquí se lee algo", no para "aquí hay una oferta".
 *
 * .sp-disc queda debajo, con su regla fire y su sello, exactamente igual que en
 * los descontinuados sin sucesor: el hecho no pierde peso, sólo deja de ser lo
 * único que hay.
 *
 * Marcado: mu-plugins/spicy-discontinued.php, spicy_disc_successor_html().
 *   .sp-succ            el bloque entero (<aside>)
 *   .sp-succ__kicker    la línea de contexto, encima de la tarjeta
 *   .sp-succ__card      la tarjeta: es UN <a>, todo lo de dentro es <span>
 *   .sp-disc-tag__succ  la línea equivalente en la tarjeta de /shop/
 */

.sp-succ {
	margin-block-start: var(--wp--preset--spacing--20);
}

/*
 * La línea de contexto. Va fuera de la tarjeta y sobre ink, porque es lo que
 * ordena leer primero: dice el hecho ("X is discontinued") antes de ofrecer
 * nada. Mismo tratamiento mono/versalita que .sp-datastrip, que en esta columna
 * ya significa "dato, no reclamo".
 */
.sp-succ__kicker {
	margin-block: 0 .8em;
	color: var(--wp--preset--color--bone-dim);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: .12em;
	line-height: 1.6;
}

/*
 * La tarjeta. Un solo enlace, en flex, con la foto a la izquierda.
 *
 * border-inline-start de 6px en fire-deep: es la misma regla gruesa de
 * .is-style-seal, girada al lateral. Sobre bone se usa fire-deep y no fire-hot
 * — fire-hot sobre bone queda en 2.2:1 y está fuera de norma; fire-deep da 5.4:1.
 */
.sp-succ__card {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	padding: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--bone);
	border-inline-start: 6px solid var(--wp--preset--color--fire-deep);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/*
 * El foco tiene que verse sobre bone, donde el outline por defecto del
 * navegador (oscuro y fino) se pierde contra el borde de la tarjeta. Se saca
 * fuera con offset.
 */
.sp-succ__card:focus-visible {
	outline: 3px solid var(--wp--preset--color--fire-deep);
	outline-offset: 3px;
}

/*
 * Al pasar por encima se invierte a ink. No se mueve nada y no cambia de
 * tamaño: en esta hoja el hover es siempre cambio de color, nunca
 * desplazamiento.
 */
.sp-succ__card:hover,
.sp-succ__card:focus-visible {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bone);
}

.sp-succ__thumb {
	flex: 0 0 84px;
	line-height: 0;
}

.sp-succ__thumb img {
	display: block;
	width: 84px;
	height: 84px;
	object-fit: cover;
	background: var(--wp--preset--color--ink);
}

.sp-succ__body {
	display: block;
	min-width: 0;
}

.sp-succ__name {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.01em;
}

/* Precio y stock. El precio lo imprime WooCommerce con su propio marcado. */
.sp-succ__meta {
	display: block;
	margin-block-start: .45em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .08em;
}

.sp-succ__meta .woocommerce-Price-amount { font-weight: 700; }

/*
 * "In stock". Es la mitad del argumento del bloque —el otro producto no sólo
 * existe, además se puede comprar hoy— así que se separa del precio con la
 * misma barra con la que .sp-datastrip separa sus campos.
 */
.sp-succ__stock::before {
	content: "\00B7";
	margin-inline: .5em;
	opacity: .55;
}

/*
 * El botón falso. Es un <span> dentro del <a>, no un enlace aparte: subrayado
 * en vez de caja, para que no se lea como un segundo destino y para que no
 * compita con el "Add to cart" de verdad que hay más abajo en la misma página.
 */
.sp-succ__cta {
	display: block;
	margin-block-start: .85em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .18em;
	text-decoration: underline;
	text-underline-offset: .35em;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--wp--preset--color--fire-deep);
}

.sp-succ__cta::after {
	content: " \2192";
	text-decoration: none;
}

.sp-succ__card:hover .sp-succ__cta,
.sp-succ__card:focus-visible .sp-succ__cta {
	text-decoration-color: var(--wp--preset--color--fire-hot);
}

/*
 * Móvil. Por debajo de 480px la foto de 84px más el texto deja el nombre del
 * producto partido en dos o tres líneas; en columna se lee de una vez.
 */
@media (max-width: 480px) {
	.sp-succ__card {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* --------------------------------------- la línea de sucesor en el catálogo */

/*
 * Debajo de .sp-disc-tag, en la columna donde va el botón de la tarjeta de
 * /shop/. Aquí NO se repite el tratamiento bone del bloque de la ficha: en un
 * listado de dieciséis tarjetas sobre ink, una caja clara en una sola de ellas
 * se lee como un fallo de maquetación. Un enlace basta, porque quien lo lee ya
 * está examinando la lista.
 */
.sp-disc-tag__succ {
	margin-block-start: .8em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: .12em;
	line-height: 1.5;
}

.sp-disc-tag__succ a {
	color: var(--wp--preset--color--fire-hot);
	text-decoration: underline;
	text-underline-offset: .3em;
}

.sp-disc-tag__succ a:hover { color: var(--wp--preset--color--bone); }

@media (prefers-contrast: more) {
	.sp-succ__card { border-inline-start-width: 8px; }
	.sp-succ__cta { text-decoration-thickness: 3px; }
}

/*
 * Impresión. Quien imprima la ficha de un descontinuado se lleva también el
 * nombre del sustituto, que en papel no se puede pulsar: se escribe la URL al
 * lado. El fondo bone no se imprime; el borde grueso sí.
 */
@media print {
	.sp-succ__card { background: none; border: 1px solid #000; border-inline-start-width: 6px; }
	.sp-succ__card::after { content: " (" attr(href) ")"; font-size: .8em; }
	.sp-succ__thumb { display: none; }
}

/* ------------------------------------------------------- header cart link */

/*
 * Replaces the WooCommerce Mini Cart block. Same job, 22 fewer scripts:
 * a link with a live count instead of a React-rendered drawer.
 */

.sp-cart-link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .4rem .5rem;
	color: var(--wp--preset--color--bone);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1;
	/* 44px minimum touch target, without inflating the visual box. */
	min-height: 44px;
	min-width: 44px;
	justify-content: center;
}

.sp-cart-link:hover { color: var(--wp--preset--color--fire-hot); }

.sp-cart-link__icon { display: inline-flex; }

.sp-cart-link__count {
	background: var(--wp--preset--color--fire);
	color: var(--wp--preset--color--bone-2);
	border-radius: 999px;
	padding: .15em .5em;
	font-weight: 700;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}