/* Components. Specs from guidelines p.8 (badges), p.11 (radii, elevation), p.14 (buttons, inputs, card). */

/* Buttons: 44px high, 4px radius, Inter 600 at 16px ------------------------ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--tap-min);
	padding: var(--space-2) var(--space-4);
	border: var(--hairline) solid transparent;
	border-radius: var(--r-control);
	background: transparent;
	color: var(--color-text);
	font-family: var(--stack-body);
	font-size: var(--body);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-caption);
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease),
		transform var(--dur-fast) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn .icon { width: var(--space-4); height: var(--space-4); transition: transform var(--dur-base) var(--ease); }
.btn--block { width: 100%; }

/* Primary: lime fill, Carbon label, 16.4:1. The inset edge is the proposed
   revision for light grounds (CLAUDE.md, resolved ambiguity 3). */
.btn--primary {
	background: var(--color-cta);
	color: var(--color-cta-text);
	box-shadow: inset 0 0 0 var(--hairline) var(--lime-700);
}
.theme-dark .btn--primary { box-shadow: none; }
.btn--primary:hover { background: var(--color-cta-hover); }
.btn--primary:active { background: var(--color-cta-active); }
.btn--primary:focus-visible { box-shadow: var(--focus); }

/* Secondary: 1px border in the text colour of the surface */
.btn--secondary { border-color: var(--color-text); }
.btn--secondary:hover { background: var(--color-text); color: var(--color-ground); }
.btn--secondary:focus-visible {
	outline: var(--hairline) solid transparent;
	border-color: var(--color-focus);
	box-shadow: var(--focus);
}

/* Tertiary: link with an arrow that steps forward on hover */
.btn--tertiary {
	padding-inline: 0;
	color: var(--color-link);
}
.btn--tertiary:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.btn--tertiary:hover .icon { transform: translateX(var(--space-1)); }

/* Icon button: 44px square ---------------------------------------------- */
.icon-btn {
	display: inline-grid;
	place-items: center;
	width: var(--tap-min);
	height: var(--tap-min);
	padding: 0;
	border: 0;
	border-radius: var(--r-control);
	background: transparent;
	color: var(--color-text);
	transition: background-color var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--color-surface); }
.theme-dark .icon-btn:hover { background: var(--color-dark-surface); }

.icon {
	width: var(--space-6);
	height: var(--space-6);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: square;
	stroke-linejoin: miter;
}
.icon__fill { fill: currentColor; stroke: none; }

/* Header cart: the one lime element in the header (p.13) ------------------ */
.header-cart {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--tap-min);
	padding-inline: var(--space-3);
	border-radius: var(--r-control);
	background: var(--color-cta);
	color: var(--color-cta-text);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease);
}
.header-cart:hover { background: var(--color-cta-hover); }
.header-cart:active { background: var(--color-cta-active); }
.header-cart .icon { width: var(--space-6); height: var(--space-6); }
.header-cart__label,
.header-cart__sep { display: none; }
.header-cart__count { display: inline-block; min-width: 1ch; }
.header-cart__count.is-bumped { animation: count-bump var(--dur-slow) var(--ease); }
@media (min-width: 768px) {
	.header-cart { padding-inline: var(--space-4); }
	.header-cart__label,
	.header-cart__sep { display: inline; }
}
@keyframes count-bump {
	40% { transform: scale(1.35); }
}

/* Search ------------------------------------------------------------------ */
.search-form { position: relative; }
.search-form__input {
	width: 100%;
	min-height: var(--tap-min);
	padding: var(--space-2) var(--tap-min) var(--space-2) var(--space-3);
	border: var(--hairline) solid var(--color-border-input);
	border-radius: var(--r-control);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--body);
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.theme-dark .search-form__input { border-color: var(--color-dark-border); }
.search-form__input::placeholder { color: var(--color-text-muted); opacity: 1; }
.search-form__input:focus-visible {
	outline: var(--hairline) solid transparent;
	border-color: var(--color-focus);
	box-shadow: var(--focus);
}
.search-form__input::-webkit-search-cancel-button { display: none; }
.search-form__submit {
	position: absolute;
	top: 0;
	right: 0;
	display: grid;
	place-items: center;
	width: var(--tap-min);
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--r-control);
	background: transparent;
	color: var(--color-text-muted);
	transition: color var(--dur-fast) var(--ease);
}
.search-form__submit:hover { color: var(--color-text); }

/* Badges: Inter 600, 12px, 2px radius; label on the tint (p.8) ------------ */
.badge {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--r-badge);
	font-size: var(--caption);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-caption);
	white-space: nowrap;
}
.badge--sale { background: var(--lime-500); color: var(--n-900); }
.badge--warranty { background: var(--warranty-tint); color: var(--warranty); }
.badge--cod { background: var(--cod-tint); color: var(--cod-text); }
.badge--stock { background: var(--warning-tint); color: var(--warning-text); }

/* Rating: filled stars clipped over an empty track ------------------------ */
.rating {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--small-m);
	line-height: var(--lh-small);
}
.rating__stars {
	--star-size: var(--space-3);
	--star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.8 2.8 5.7 6.3.9-4.55 4.43 1.07 6.27L12 17.13 6.38 20.1l1.07-6.27L2.9 9.4l6.3-.9L12 2.8Z'/%3E%3C/svg%3E");
	flex: none;
	width: calc(var(--star-size) * 5);
	height: var(--star-size);
	background: linear-gradient(to right, var(--star) var(--rating-fill), var(--n-300) var(--rating-fill));
	-webkit-mask: var(--star-mask) repeat-x 0 0 / var(--star-size) var(--star-size);
	mask: var(--star-mask) repeat-x 0 0 / var(--star-size) var(--star-size);
}
.rating__value { white-space: nowrap; }
@media (min-width: 768px) {
	.rating { font-size: var(--small); }
	.rating__stars { --star-size: var(--space-4); }
}

/* Price: Space Grotesk 500, tabular (p.9) --------------------------------- */
.price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--space-2);
}
.price__current {
	font-family: var(--stack-display);
	font-size: var(--body-lg-m);
	font-weight: var(--fw-medium);
	line-height: var(--lh-h5);
}
.price__regular {
	color: var(--color-text-muted);
	font-size: var(--small-m);
}
@media (min-width: 768px) {
	.price__current { font-size: var(--body-lg); }
	.price__regular { font-size: var(--small); }
}

/* Product card: border at rest, no shadow (p.11) -------------------------- */
.product-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gutter-m);
	list-style: none;
}
@media (min-width: 768px) {
	.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter-t); }
}
@media (min-width: 1024px) {
	.product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
	.product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.product-grid__item { display: flex; }
.product-grid__item[hidden] { display: none; }

.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	border: var(--border);
	border-radius: var(--r-card);
	background: var(--color-surface);
	overflow: hidden;
	transition: border-color var(--dur-base) var(--ease);
}
.product-card:hover { border-color: var(--color-border-input); }

.product-card__media {
	position: relative;
	aspect-ratio: 1;
	background: var(--color-fill);
	overflow: hidden;
}
.product-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}
.product-card:hover .product-card__image { transform: scale(1.03); }
.product-card__sale {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
}

.product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-3);
}
@media (min-width: 768px) {
	.product-card__body { padding: var(--space-4); }
}

.product-card__title {
	display: -webkit-box;
	overflow: hidden;
	font-family: var(--stack-body);
	font-size: var(--body-m);
	font-weight: var(--fw-medium);
	line-height: var(--lh-h6);
	letter-spacing: 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}
@media (min-width: 768px) {
	.product-card__title { font-size: var(--body); }
}
.product-card__link { color: inherit; text-decoration: none; }
.product-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.product-card__link:hover { text-decoration: underline; }
.product-card__link:focus-visible { outline: none; box-shadow: none; }
.product-card:has(.product-card__link:focus-visible) {
	border-color: var(--color-focus);
	box-shadow: var(--focus);
}

.product-card__specs {
	color: var(--color-text-muted);
	font-size: var(--small-m);
	line-height: var(--lh-small);
}
@media (min-width: 768px) {
	.product-card__specs { font-size: var(--small); }
}

.product-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	list-style: none;
}
/* Two-across cards are narrow: COD is already stated in the header bar and trust strip */
@media (max-width: 767px) {
	.product-card__badges li:has(.badge--cod) { display: none; }
}
.product-card__form {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding-top: var(--space-2);
}

/* Category tiles ----------------------------------------------------------- */
.category-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gutter-m);
	list-style: none;
}
@media (min-width: 768px) {
	/* Fills the row whatever the count: 3 categories today, 4 when Accessories has stock */
	.category-grid { grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-24) * 1.75), 1fr)); gap: var(--gutter-t); }
}
@media (min-width: 1024px) {
	.category-grid { gap: var(--gutter); }
}

.category-tile {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: var(--border);
	border-radius: var(--r-card);
	background: var(--color-surface);
	color: var(--color-text);
	text-decoration: none;
	overflow: hidden;
	transition: border-color var(--dur-base) var(--ease);
}
.category-tile:hover { border-color: var(--color-border-input); }
.category-tile:focus-visible { outline-offset: 0; }
.category-tile__media { display: block; aspect-ratio: 1; background: var(--color-fill); overflow: hidden; }
.category-tile__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}
.category-tile:hover .category-tile__image { transform: scale(1.03); }
.category-tile__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-3);
}
@media (min-width: 768px) {
	.category-tile__body { padding: var(--space-4); }
}
.category-tile__name {
	display: block;
	font-family: var(--stack-display);
	font-size: var(--h4-m);
	font-weight: var(--fw-medium);
	line-height: var(--lh-h4);
	letter-spacing: var(--tr-h4);
}
.category-tile .icon {
	flex: none;
	width: var(--space-6);
	height: var(--space-6);
	color: var(--color-link);
	transition: transform var(--dur-base) var(--ease);
}
.category-tile:hover .icon { transform: translateX(var(--space-1)); }

/* Cart drawer: native dialog, elevation 2 (p.11) ------------------------- */
.cart-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(100%, calc(var(--space-24) * 4 + var(--space-8)));
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--color-surface);
	color: var(--color-text);
	box-shadow: var(--shadow-2);
	transform: translateX(100%);
	transition:
		transform var(--dur-slow) var(--ease),
		overlay var(--dur-slow) allow-discrete,
		display var(--dur-slow) allow-discrete;
}
.cart-drawer[open] { transform: none; }
@starting-style {
	.cart-drawer[open] { transform: translateX(100%); }
}
.cart-drawer::backdrop {
	background: color-mix(in srgb, var(--n-900) 55%, transparent);
	opacity: 0;
	transition:
		opacity var(--dur-slow) var(--ease),
		overlay var(--dur-slow) allow-discrete,
		display var(--dur-slow) allow-discrete;
}
.cart-drawer[open]::backdrop { opacity: 1; }
@starting-style {
	.cart-drawer[open]::backdrop { opacity: 0; }
}

.cart-drawer__panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	min-height: 100%;
	padding: var(--space-4) var(--space-6) var(--space-6);
}
.cart-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-bottom: var(--space-4);
	border-bottom: var(--border);
}
.cart-drawer__title {
	font-size: var(--h4-m);
	font-weight: var(--fw-medium);
	line-height: var(--lh-h4);
	letter-spacing: var(--tr-h4);
}
.cart-drawer__close { margin-right: calc(var(--space-3) * -1); }
.cart-drawer__close:hover { background: var(--color-fill); }
.cart-drawer__notes {
	display: grid;
	gap: var(--space-2);
	padding: var(--space-4);
	border: var(--border);
	border-radius: var(--r-card);
	list-style: none;
	color: var(--color-text-muted);
	font-size: var(--small);
}
.cart-drawer__notes li { display: flex; align-items: center; gap: var(--space-2); }
.cart-drawer__notes .icon { flex: none; width: var(--space-4); height: var(--space-4); color: var(--color-brand); }
.cart-drawer__continue { align-self: center; }
.cart-drawer__body { flex: 1; }

/* Filter chips: selected state uses Signal Blue's role (p.7) on the info tint (p.8, 6.1:1) */
.filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-6);
}
.filter-chips[hidden] { display: none; }
.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--tap-min);
	padding: var(--space-2) var(--space-4);
	border: var(--hairline) solid var(--color-border-input);
	border-radius: var(--r-control);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--small);
	font-weight: var(--fw-medium);
	transition:
		background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--color-text); }
.chip[aria-pressed="true"] {
	border-color: var(--color-brand);
	background: var(--cod-tint);
	color: var(--cod-text);
}
.chip:focus-visible {
	outline: var(--hairline) solid transparent;
	border-color: var(--color-focus);
	box-shadow: var(--focus);
}
.chip__count { color: var(--color-text-muted); font-size: var(--caption); }
.chip[aria-pressed="true"] .chip__count { color: inherit; }

/* Cards fade back in after a filter changes, never on first paint. On the
   homepage assets/js/home.js moves them instead ([data-flip]). */
[data-filtered]:not([data-flip]) > .product-grid__item { animation: card-in var(--dur-base) var(--ease); }
@keyframes card-in {
	from { opacity: 0; transform: translateY(var(--space-2)); }
}

/* Spec sheet: label over value, ruled like a datasheet */
.spec-sheet {
	display: flex;
	margin: 0;
	border-block: var(--hairline) solid var(--color-border);
}
.spec-sheet__row { flex: 1 1 auto; min-width: 0; padding: var(--space-3) var(--space-3) var(--space-3) 0; }
.spec-sheet__row + .spec-sheet__row { padding-left: var(--space-3); border-left: var(--hairline) solid var(--color-border); }
.spec-sheet__label {
	color: var(--color-text-muted);
	font-size: var(--caption);
	font-weight: var(--fw-medium);
	line-height: var(--lh-caption);
	letter-spacing: var(--tr-caption);
	text-transform: uppercase;
}
.spec-sheet__value {
	margin: var(--space-1) 0 0;
	font-family: var(--stack-display);
	font-size: var(--h5-m);
	font-weight: var(--fw-medium);
	line-height: var(--lh-h5);
}
@media (min-width: 768px) {
	.spec-sheet__value { font-size: var(--h5); }
}

/* Help list: ways to reach a person */
.help-list {
	margin-top: var(--space-6);
	border-top: var(--border);
	list-style: none;
}
.help-list > li { border-bottom: var(--border); }
.help-list__link,
.help-list__placeholder {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--tap-min);
	padding-block: var(--space-2);
	overflow-wrap: anywhere;
}
.help-list__link { color: var(--color-text); text-decoration: none; }
.help-list__link:hover span { text-decoration: underline; }
.help-list__placeholder { color: var(--color-text-muted); }
.help-list .icon { flex: none; color: var(--color-brand); }

/* Timeline ---------------------------------------------------------------- */
/* Stepper nodes are the one place the pill radius is allowed (p.11). The
   track is drawn in two layers: a Neutral 700 rule, then the 2px blue
   accent rule that draws across it once (the page's one scroll moment). */
.timeline {
	--node: var(--space-4);
	position: relative;
	display: grid;
	gap: var(--space-8);
	margin-top: var(--space-8);
	list-style: none;
}
.timeline::before,
.timeline::after {
	content: "";
	position: absolute;
	top: calc(var(--node) / 2);
	bottom: calc(var(--node) / 2);
	left: calc(var(--node) / 2 - var(--rule-accent) / 2);
	width: var(--rule-accent);
	background: var(--color-border);
}
.timeline::after {
	background: var(--color-brand);
	transform-origin: top;
	transition: transform calc(var(--dur-slow) * 4) var(--ease);
}
@media (scripting: enabled) {
	.timeline[data-reveal]:not(.is-in)::after { transform: scaleY(0); }
	.timeline[data-reveal]:not(.is-in) .timeline__stage::before { background: var(--color-ground); }
}

.timeline__stage { position: relative; padding-left: calc(var(--node) + var(--space-4)); }
.timeline__stage::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: var(--node);
	height: var(--node);
	border: var(--rule-accent) solid var(--color-brand);
	border-radius: var(--r-pill);
	background: var(--color-brand);
	transition: background-color var(--dur-base) var(--ease);
}
.timeline__stage:nth-child(2)::before { transition-delay: var(--dur-slow); }
.timeline__stage:nth-child(3)::before { transition-delay: calc(var(--dur-slow) * 2); }
.timeline__stage:nth-child(4)::before { transition-delay: calc(var(--dur-slow) * 3); }

.timeline__when {
	font-size: var(--h4-m);
	line-height: var(--lh-h4);
	letter-spacing: var(--tr-h4);
}
.timeline__text { margin-top: var(--space-2); color: var(--color-text-muted); }

@media (min-width: 768px) {
	.timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter-t); }
	.timeline::before,
	.timeline::after {
		top: calc(var(--node) / 2 - var(--rule-accent) / 2);
		right: 0;
		bottom: auto;
		left: 0;
		width: auto;
		height: var(--rule-accent);
	}
	.timeline::after { transform-origin: left; }
	.timeline__stage { padding-top: calc(var(--node) + var(--space-6)); padding-left: 0; }
	.timeline__when { font-size: var(--h4); }
}
@media (min-width: 768px) and (scripting: enabled) {
	.timeline[data-reveal]:not(.is-in)::after { transform: scaleX(0); }
}
@media (min-width: 1024px) {
	.timeline { margin-top: var(--space-12); gap: var(--gutter); }
}

/* FAQ: native disclosures; height animates where the browser supports it --- */

.faq__list { border-top: var(--border); }
.faq__item { border-bottom: var(--border); }
.faq__item::details-content {
	block-size: 0;
	overflow: hidden;
	transition:
		block-size var(--dur-base) var(--ease),
		content-visibility var(--dur-base) allow-discrete;
}
.faq__item[open]::details-content { block-size: auto; }

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: var(--tap-min);
	padding-block: var(--space-4);
	font-size: var(--h6-m);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-h6);
	list-style: none;
	cursor: pointer;
	border-radius: var(--r-control);
	transition: color var(--dur-fast) var(--ease);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question:hover { color: var(--color-link); }
.faq__question .icon {
	flex: none;
	color: var(--color-icon);
	transition: transform var(--dur-base) var(--ease);
}
.faq__item[open] .faq__question .icon { transform: rotate(180deg); }
.faq__answer {
	display: grid;
	gap: var(--space-2);
	max-width: var(--measure);
	padding-bottom: var(--space-4);
	color: var(--color-text-muted);
}
@media (min-width: 768px) {
	.faq__question { font-size: var(--h6); }
}

/* Timeline with progress: done and current stages fill; the rest wait */
.timeline--progress::after { transform: scaleY(calc(var(--progress) / (var(--stages) - 1))); }
.timeline--progress .timeline__stage--todo::before {
	border-color: var(--color-border-input);
	background: var(--color-surface);
}
.timeline--progress .timeline__stage--current::before { box-shadow: var(--focus); }
.timeline--progress .timeline__stage--todo .timeline__when { color: var(--color-text-muted); }
@media (min-width: 768px) {
	.timeline--progress::after { transform: scaleX(calc(var(--progress) / (var(--stages) - 1))); }
}

/* Breadcrumbs ---------------------------------------------------------------- */
.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	color: var(--color-text-muted);
	font-size: var(--small-m);
}
.breadcrumbs__item { display: inline-flex; align-items: center; }
.breadcrumbs__item + .breadcrumbs__item::before {
	content: "/";
	padding-inline: var(--space-2);
	color: var(--n-400);
}
.breadcrumbs__item[aria-current] { color: var(--color-text); }
.breadcrumbs__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
	color: inherit;
	text-decoration: none;
}
.breadcrumbs__link:hover { color: var(--color-text); text-decoration: underline; }
@media (min-width: 768px) {
	.breadcrumbs__list { font-size: var(--small); }
}

/* Page header ------------------------------------------------------------- */
.page-header {
	padding-block: var(--space-2) var(--space-8);
	border-bottom: var(--border);
	background: var(--color-surface);
}
.page-header__title { margin-top: var(--space-2); }
.page-header__intro {
	max-width: var(--measure);
	margin-top: var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--body-lg-m);
}
@media (min-width: 768px) {
	.page-header__intro { font-size: var(--body-lg); }
}

/* Notices: label text on the tinted fill (p.8) ------------------------------- */
.notices { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 var(--space-4);
	padding: var(--space-1) var(--space-4);
	border: var(--hairline) solid currentColor;
	border-radius: var(--r-control);
	font-weight: var(--fw-medium);
}
.notice__text { padding-block: var(--space-2); }
/* Undo after a removal: a text action, full 44px target */
.notice__undo {
	min-height: var(--tap-min);
	padding: 0 var(--space-2);
	border: 0;
	border-radius: var(--r-control);
	background: transparent;
	color: inherit;
	font-weight: var(--fw-semibold);
	text-decoration: underline;
	text-decoration-thickness: var(--hairline);
	text-underline-offset: 0.2em;
}
.notice__undo:hover { text-decoration-thickness: var(--rule-accent); }
.notice--success { background: var(--warranty-tint); color: var(--success-text); }
.notice--info { background: var(--cod-tint); color: var(--cod-text); }
.notice--error { background: var(--danger-tint); color: var(--danger-text); }

/* Error summary --------------------------------------------------------------- */
.error-summary {
	display: grid;
	gap: var(--space-2);
	padding: var(--space-4);
	border: var(--hairline) solid var(--danger);
	border-radius: var(--r-control);
	background: var(--danger-tint);
	color: var(--danger-text);
}
.error-summary:focus-visible { outline-offset: var(--focus-offset); }
.error-summary__title { font-weight: var(--fw-semibold); }
.error-summary__list { display: grid; gap: var(--space-1); padding-left: var(--space-6); }
.error-summary__list a { color: inherit; }

/* Form fields: 44px, Neutral 300 border, blue focus with halo (p.14) -------- */
.field { display: grid; gap: var(--space-2); }
.field__label { font-weight: var(--fw-medium); }
.field__optional { color: var(--color-text-muted); font-weight: var(--fw-regular); }
.field__hint { color: var(--color-text-muted); font-size: var(--small); }
.field__control {
	width: 100%;
	min-height: var(--tap-min);
	padding: var(--space-2) var(--space-3);
	border: var(--hairline) solid var(--color-border-input);
	border-radius: var(--r-control);
	background: var(--white);
	color: var(--n-900);
	font-size: var(--body);
	line-height: var(--lh-small);
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
textarea.field__control { resize: vertical; }
.field__control::placeholder { color: var(--n-500); opacity: 1; }
.field__control:hover { border-color: var(--n-400); }
.field__control:focus-visible {
	outline: var(--hairline) solid transparent;
	border-color: var(--color-focus);
	box-shadow: var(--focus);
}
.field--error .field__control { border-color: var(--danger); }
.field__error { color: var(--danger-text); font-size: var(--small); font-weight: var(--fw-medium); }

.form-card {
	display: grid;
	align-content: start;
	gap: var(--space-4);
	padding: var(--space-6);
	border: var(--border);
	border-radius: var(--r-card);
	background: var(--color-surface);
}
.form-card__title { font-size: var(--h4-m); font-weight: var(--fw-medium); line-height: var(--lh-h4); }
@media (min-width: 768px) {
	.form-card { padding: var(--space-8); }
	.form-card__title { font-size: var(--h4); }
}

/* Choice card (radio) and checkbox row */
.choice {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-4);
	border: var(--hairline) solid var(--color-border-input);
	border-radius: var(--r-card);
	background: var(--white);
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.choice:has(:checked) { border-color: var(--color-brand); background: var(--cod-tint); }
.choice__input { flex: none; width: var(--space-4); height: var(--space-4); margin-top: var(--space-1); }
.choice__body { display: grid; gap: var(--space-1); }
.choice__title { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); }
.choice__title .icon { color: var(--color-brand); }
.choice__text { color: var(--color-text-muted); font-size: var(--small); }
.check { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); cursor: pointer; }
.check__input { flex: none; width: var(--space-4); height: var(--space-4); }

/* Stepper: pill radius is reserved for steppers (p.11) ------------------------ */
.stepper {
	display: inline-flex;
	align-items: center;
	/* The border sits outside the 44px controls, so they keep the full target */
	height: calc(var(--tap-min) + var(--hairline) * 2);
	border: var(--hairline) solid var(--color-border-input);
	border-radius: var(--r-pill);
	background: var(--white);
}
.stepper:focus-within { border-color: var(--color-focus); box-shadow: var(--focus); }
.stepper__btn {
	display: grid;
	place-items: center;
	width: var(--tap-min);
	height: var(--tap-min);
	padding: 0;
	border: 0;
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--n-900);
	transition: background-color var(--dur-fast) var(--ease);
}
.stepper__btn[hidden] { display: none; }
.stepper__btn:hover { background: var(--n-100); }
.stepper__btn:disabled { color: var(--n-400); cursor: not-allowed; background: transparent; }
.stepper__btn .icon { width: var(--space-4); height: var(--space-4); }
.stepper__input {
	width: var(--space-12);
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--n-900);
	font-size: var(--body);
	font-weight: var(--fw-semibold);
	text-align: center;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	appearance: textfield;
}
.stepper__input:focus-visible { outline: none; box-shadow: none; }
.stepper__input::-webkit-inner-spin-button,
.stepper__input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }

/* Buttons: Carbon fill ("Buy now") and the one red control ("Remove"), p.14 */
.btn--dark { background: var(--n-900); color: var(--white); }
.btn--dark:hover { background: var(--n-700); }
.btn--dark:active { background: var(--n-600); }
.btn--danger { border-color: var(--danger); background: var(--danger-tint); color: var(--danger-text); }
.btn--danger:hover { background: var(--danger); color: var(--white); }
.btn--dark .icon,
.btn--danger .icon { width: var(--space-4); height: var(--space-4); }

/* Empty state and placeholder ------------------------------------------------- */
.empty-state {
	display: grid;
	justify-items: center;
	gap: var(--space-3);
	margin-block: var(--space-8);
	padding: var(--space-12) var(--space-6);
	border: var(--border);
	border-radius: var(--r-card);
	background: var(--color-surface);
	text-align: center;
}
.empty-state__title { font-size: var(--h4-m); font-weight: var(--fw-medium); line-height: var(--lh-h4); }
.empty-state__text { max-width: var(--measure); color: var(--color-text-muted); }
.empty-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }
@media (min-width: 768px) {
	.empty-state__title { font-size: var(--h4); }
}

.placeholder {
	padding: var(--space-3) var(--space-4);
	border: var(--hairline) dashed var(--n-400);
	border-radius: var(--r-control);
	background: var(--n-100);
	color: var(--n-600);
	font-size: var(--small);
}
.placeholder__label {
	margin-right: var(--space-2);
	font-size: var(--caption);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tr-caption);
	text-transform: uppercase;
}

/* Order summary ------------------------------------------------------------- */
.order-summary {
	display: grid;
	align-content: start;
	gap: var(--space-4);
	padding: var(--space-6);
	border: var(--border);
	border-radius: var(--r-card);
	background: var(--color-surface);
}
@media (min-width: 1024px) {
	.order-summary { position: sticky; top: calc(var(--tap-min) + var(--space-8) + var(--space-6)); }
}
.order-summary__title { font-size: var(--h4-m); font-weight: var(--fw-medium); line-height: var(--lh-h4); }
.order-summary__items { display: grid; gap: var(--space-3); list-style: none; }
.order-summary__item {
	display: grid;
	grid-template-columns: var(--space-12) minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--small);
}
.order-summary__image { width: var(--space-12); height: var(--space-12); border-radius: var(--r-control); background: var(--color-fill); }
.order-summary__qty { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.order-summary__line,
.order-summary__totals dd { font-variant-numeric: tabular-nums; }
.order-summary__totals { display: grid; gap: var(--space-2); margin: 0; padding-top: var(--space-4); border-top: var(--border); }
.order-summary__row { display: flex; justify-content: space-between; gap: var(--space-4); }
.order-summary__row dd { margin: 0; text-align: right; }
.order-summary__pending { color: var(--color-text-muted); }
.order-summary__row--total {
	padding-top: var(--space-3);
	border-top: var(--border);
	font-family: var(--stack-display);
	font-size: var(--body-lg);
	font-weight: var(--fw-medium);
}
.order-summary__notes { display: grid; gap: var(--space-2); list-style: none; color: var(--color-text-muted); font-size: var(--small); }
.order-summary__notes li { display: flex; align-items: center; gap: var(--space-2); }
.order-summary__notes .icon { flex: none; width: var(--space-4); height: var(--space-4); color: var(--color-brand); }
@media (min-width: 768px) {
	.order-summary__title { font-size: var(--h4); }
}

/* Details list (order confirmation) */
.details-list { display: grid; gap: var(--space-3); margin: 0; }
.details-list > div { display: grid; grid-template-columns: calc(var(--space-24) + var(--space-4)) minmax(0, 1fr); gap: var(--space-4); }
.details-list dt { color: var(--color-text-muted); }
.details-list dd { margin: 0; overflow-wrap: anywhere; }

/* Prose: local content now, editor output (the_content) in WordPress -------- */
.entry-content { max-width: var(--measure); }
.entry-content > * + * { margin-top: var(--space-4); }
.entry-content h2 {
	margin-top: var(--space-8);
	font-size: var(--h4-m);
	font-weight: var(--fw-medium);
	line-height: var(--lh-h4);
	letter-spacing: var(--tr-h4);
}
.entry-content > h2:first-child { margin-top: 0; }
.entry-content ul { display: grid; gap: var(--space-2); padding-left: var(--space-6); list-style: square; }
.entry-content li::marker { color: var(--color-brand); }
@media (min-width: 768px) {
	.entry-content h2 { font-size: var(--h4); }
}

/* Mini cart (drawer contents) ---------------------------------------------- */
.mini-cart,
.mini-cart--empty { display: grid; align-content: start; gap: var(--space-4); }
.mini-cart__empty { color: var(--color-text-muted); }
.mini-cart__items { display: grid; gap: var(--space-2); list-style: none; }
.mini-cart__item {
	display: grid;
	grid-template-columns: var(--space-16) minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2);
	border-radius: var(--r-card);
}
.mini-cart__item--added { background: var(--color-ground); }
.mini-cart__image { width: var(--space-16); height: var(--space-16); border-radius: var(--r-control); background: var(--color-fill); }
.mini-cart__info { display: grid; justify-items: start; gap: var(--space-1); min-width: 0; }
.mini-cart__name { color: var(--color-text); font-weight: var(--fw-medium); text-decoration: none; }
.mini-cart__name:hover { text-decoration: underline; }
.mini-cart__qty { color: var(--color-text-muted); font-size: var(--small); font-variant-numeric: tabular-nums; }
.mini-cart__line { font-family: var(--stack-display); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.mini-cart__totals { display: grid; gap: var(--space-2); margin: 0; padding-top: var(--space-4); border-top: var(--border); }
.mini-cart__actions { display: grid; gap: var(--space-2); }

/* Checkout progress: numbered because the order matters ---------------------- */
.steps { margin-top: var(--space-6); }
.steps__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); list-style: none; }
.steps__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--small);
	font-weight: var(--fw-medium);
}
.steps__item + .steps__item::before {
	content: "";
	width: var(--space-8);
	height: var(--hairline);
	margin-right: var(--space-1);
	background: var(--color-border-input);
}
.steps__num {
	display: grid;
	place-items: center;
	width: var(--space-6);
	height: var(--space-6);
	border: var(--hairline) solid var(--color-border-input);
	border-radius: var(--r-pill);
	background: var(--color-surface);
	font-size: var(--caption);
	font-variant-numeric: tabular-nums;
}
.steps__num .icon { width: var(--space-4); height: var(--space-4); }
.steps__item--current { color: var(--color-text); }
.steps__item--current .steps__num { border-color: var(--blue-700); background: var(--blue-700); color: var(--white); }
.steps__item--done .steps__num { border-color: var(--color-brand); background: var(--cod-tint); color: var(--cod-text); }
.steps__label { color: inherit; }
a.steps__label { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--color-link); }

/* Search suggestions: a light overlay panel, elevation 1 (p.11) -------------- */
.suggest {
	position: absolute;
	top: calc(100% + var(--space-1));
	right: 0;
	z-index: 40;
	display: grid;
	width: max(100%, min(calc(var(--space-24) * 4), calc(100vw - var(--margin-m) * 2)));
	padding: var(--space-2);
	border: var(--border);
	border-radius: var(--r-card);
	background: var(--white);
	color: var(--n-900);
	box-shadow: var(--shadow-1);
}
.suggest[hidden] { display: none; }
.suggest__list { display: grid; list-style: none; }
.suggest__item {
	display: grid;
	grid-template-columns: var(--space-12) minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--tap-min);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--r-control);
	color: var(--n-900);
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease);
}
.suggest__item:hover,
.suggest__item:focus-visible { background: var(--n-50); }
.suggest__image { width: var(--space-12); height: var(--space-12); border-radius: var(--r-control); background: var(--n-100); }
.suggest__name { overflow: hidden; font-size: var(--small); font-weight: var(--fw-medium); text-overflow: ellipsis; white-space: nowrap; }
.suggest__price { font-family: var(--stack-display); font-size: var(--small); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.suggest__all {
	display: flex;
	align-items: center;
	min-height: var(--tap-min);
	margin-top: var(--space-1);
	padding: 0 var(--space-2);
	border-top: var(--border);
	color: var(--blue-700);
	font-size: var(--small);
	font-weight: var(--fw-semibold);
}

/* Article card and grid: journal index and the homepage buying guides --------- */
.article-grid { display: grid; gap: var(--gutter-m); list-style: none; }
@media (min-width: 768px) {
	.article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter-t); }
}
@media (min-width: 1024px) {
	.article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
}
.article-grid > li { display: flex; }
.article-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	border: var(--border);
	border-radius: var(--r-card);
	background: var(--color-surface);
	overflow: hidden;
	transition: border-color var(--dur-base) var(--ease);
}
.article-card:hover { border-color: var(--color-border-input); }
.article-card:has(.article-card__link:focus-visible) { border-color: var(--color-focus); box-shadow: var(--focus); }
.article-card__media { aspect-ratio: 16 / 9; background: var(--color-fill); overflow: hidden; }
.article-card__image { width: 100%; height: 100%; object-fit: cover; }
.article-card__body { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-4); }
.article-card__meta,
.article__meta { color: var(--color-text-muted); font-size: var(--small); font-variant-numeric: tabular-nums; }
.article-card__title { font-size: var(--h5-m); font-weight: var(--fw-medium); line-height: var(--lh-h5); letter-spacing: 0; }
.article-card__link { color: var(--color-text); text-decoration: none; }
.article-card__link::after { content: ""; position: absolute; inset: 0; }
.article-card__link:hover { text-decoration: underline; }
.article-card__link:focus-visible { outline: none; box-shadow: none; }
.article-card__excerpt { color: var(--color-text-muted); font-size: var(--small); }
@media (min-width: 768px) {
	.article-card__title { font-size: var(--h5); }
}
.article-card__image--contain { object-fit: contain; }

/* Tooltips for icon-only controls (icon-buttons skill): the visible twin of
   the accessible name, on hover and on keyboard focus. Elevation 1 (p.11).
   display:none at rest, so a tooltip near an edge never widens the page. */
/* Zero specificity: a control that is already positioned (the search
   submit sits absolute in its field) keeps its own position */
:where([data-tip]) { position: relative; }
[data-tip]::after {
	content: attr(data-tip);
	position: absolute;
	top: calc(100% + var(--space-2));
	left: 50%;
	z-index: 30;
	display: none;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--r-control);
	background: var(--n-900);
	color: var(--white);
	font-family: var(--stack-body);
	font-size: var(--caption);
	font-weight: var(--fw-medium);
	line-height: var(--lh-caption);
	letter-spacing: 0;
	white-space: nowrap;
	box-shadow: var(--shadow-1);
	pointer-events: none;
	transform: translateX(-50%);
}
[data-tip-align="end"]::after { right: 0; left: auto; transform: none; }
.theme-dark [data-tip]::after { background: var(--white); color: var(--n-900); }
.site-header__menu[aria-expanded="true"]::after { content: attr(data-tip-open); }
@media (hover: hover) {
	[data-tip]:hover::after { display: block; }
}
[data-tip]:focus-visible::after { display: block; }
@media (prefers-reduced-motion: no-preference) {
	[data-tip]::after { transition: opacity var(--dur-fast) var(--ease), display var(--dur-fast) allow-discrete; }
	@starting-style {
		[data-tip]:hover::after,
		[data-tip]:focus-visible::after { opacity: 0; }
	}
}

/* Add to cart in flight: the button keeps its label and gains a spinner
   (loaders skill: 100 ms to 1 s, feedback on the control that was pressed) */
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::after {
	content: "";
	width: var(--space-4);
	height: var(--space-4);
	border: var(--rule-accent) solid currentColor;
	border-right-color: transparent;
	border-radius: var(--r-pill);
	animation: btn-spin calc(var(--dur-slow) * 2) linear infinite;
}
@keyframes btn-spin {
	to { transform: rotate(1turn); }
}