.cd-container {
	width: 100%;
	/* Outer width includes responsive gutters via the global border-box rule. */
	max-width: var(--cd-container);
	margin-inline: auto;
	padding-inline: var(--cd-gutter);
}

.cd-surface {
	min-width: 0;
	padding: var(--cd-space-6);
	border: 1px solid var(--cd-color-surface-border);
	border-radius: var(--cd-radius-card);
	background: var(--cd-surface-raised);
	box-shadow: var(--cd-shadow-raised);
}

.cd-surface--inset {
	border-color: var(--cd-color-inset-border);
	background: color-mix(in srgb, var(--cd-surface-inset) 88%, var(--cd-color-border));
	box-shadow: var(--cd-shadow-inset);
}

.cd-button,
.cd-control-select,
.cd-catalog .orderby {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cd-space-2);
	min-height: var(--cd-control-size);
	max-width: 100%;
	padding: var(--cd-space-3) var(--cd-space-6);
	border: 1px solid var(--cd-color-border);
	border-radius: var(--cd-radius-md);
	background: var(--cd-gradient-raised);
	color: var(--cd-color-text);
	box-shadow: var(--cd-shadow-raised-soft);
	font: inherit;
	font-weight: var(--cd-weight-semibold);
	line-height: var(--cd-line-height-heading);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow var(--cd-transition), background-color var(--cd-transition), transform var(--cd-transition);
}

.cd-button--primary {
	border-color: var(--cd-color-primary-border);
	background: var(--cd-gradient-primary);
	color: var(--cd-color-surface);
	box-shadow: var(--cd-shadow-primary);
}

.cd-button--secondary,
.cd-control-select,
.cd-catalog .orderby {
	background: var(--cd-gradient-secondary);
	color: var(--cd-color-text);
}

.cd-button--icon {
	width: var(--cd-control-size);
	padding: var(--cd-space-2);
	flex-shrink: 0;
	aspect-ratio: 1;
	border-radius: var(--cd-radius-pill);
}

.cd-button--icon:where(:not(.cd-button--primary)) {
	box-shadow: var(--cd-shadow-raised-soft);
}

.cd-button--icon svg {
	width: var(--cd-icon-size);
	height: var(--cd-icon-size);
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (hover: hover) {
	.cd-button:where(:not(:disabled):not([aria-disabled="true"])):hover {
		color: var(--cd-color-text);
		box-shadow: var(--cd-shadow-raised);
		transform: translateY(var(--cd-lift-hover));
	}
	.cd-button--primary:where(:not(:disabled):not([aria-disabled="true"])):hover {
		background: var(--cd-gradient-primary-hover);
		color: var(--cd-color-surface);
		box-shadow: var(--cd-shadow-primary-hover);
	}
}

.cd-button:where(:not(:disabled):not([aria-disabled="true"])):active {
	transform: translateY(var(--cd-press-offset));
	box-shadow: var(--cd-shadow-pressed);
}
.cd-button--primary:where(:not(:disabled):not([aria-disabled="true"])):active {
	background: var(--cd-gradient-primary-active);
	box-shadow: var(--cd-shadow-primary-inset);
}
/* Confirmed cart state remains distinct from the primary purchase action. */
.cd-button.cd-in-cart, .cd-button.cd-in-cart:is(:hover, :active) {
	background: var(--cd-gradient-pill-active);
	color: var(--cd-color-text);
	border-color: var(--cd-border-soft);
	box-shadow: var(--cd-shadow-pressed);
}
.cd-button:focus-visible,
.cd-control-select:focus-visible,
.cd-catalog .orderby:focus-visible {
	outline: var(--cd-focus-width) solid var(--cd-focus-color);
	outline-offset: var(--cd-focus-offset);
}
.cd-button:disabled,
.cd-button[aria-disabled="true"] {
	color: var(--cd-color-muted);
	background: var(--cd-color-background);
	border-color: var(--cd-color-border);
	box-shadow: none;
	cursor: not-allowed;
}

.cd-pill, .cd-badge {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: var(--cd-space-1) var(--cd-space-3);
	border-radius: var(--cd-radius-pill);
	background: var(--cd-color-background);
	color: var(--cd-color-muted);
	font-size: var(--cd-font-sm);
	font-weight: var(--cd-weight-semibold);
}
.cd-pill {
	padding: var(--cd-space-2) var(--cd-space-4);
	border: 1px solid var(--cd-border-soft);
	background: var(--cd-gradient-raised);
	color: var(--cd-color-text);
	box-shadow: var(--cd-shadow-raised-soft);
	line-height: var(--cd-line-height);
	text-decoration: none;
	transition: box-shadow var(--cd-transition), transform var(--cd-transition);
}
.cd-pill--active,
.cd-pill:not(.cd-pill--choice):has(input[type="radio"]:checked) {
	background: var(--cd-gradient-pill-active);
	border-color: var(--cd-color-border);
	color: var(--cd-color-accent-active);
	box-shadow: var(--cd-shadow-pressed);
}
/* Only interactive pills respond to pointer states. */
.cd-pill:where(button, a[href]) {
	min-height: var(--cd-control-size);
	cursor: pointer;
}
@media (hover: hover) {
	.cd-pill:where(button, a[href]):where(:not(:disabled):not([aria-disabled="true"])):hover {
		box-shadow: var(--cd-shadow-raised);
		transform: translateY(var(--cd-lift-hover));
	}
}
.cd-pill:where(button, a[href]):where(:not(:disabled):not([aria-disabled="true"])):active {
	box-shadow: var(--cd-shadow-pressed);
	transform: translateY(var(--cd-press-offset));
}
.cd-pill:focus-visible,
.cd-pill input:focus-visible {
	outline: var(--cd-focus-width) solid var(--cd-focus-color);
	outline-offset: var(--cd-focus-offset);
}
.cd-pill:disabled,
.cd-pill[aria-disabled="true"] {
	background: var(--cd-color-background);
	color: var(--cd-color-muted);
	box-shadow: none;
	cursor: not-allowed;
}
.cd-badge--hit { color: var(--cd-color-hit); background: var(--cd-color-hit-soft); }
.cd-badge--new { color: var(--cd-color-link); background: var(--cd-color-accent-soft); }
.cd-badge--sale { color: var(--cd-color-sale-ink); background: var(--cd-color-sale-badge); }
.cd-badge--stock { color: var(--cd-color-success); background: var(--cd-color-success-soft); }
.cd-badge--digital { color: var(--cd-color-digital); background: var(--cd-color-digital-soft); }

/* Temporary UI Kit layout; no storefront page styling. */
.cd-ui-kit { padding-block: var(--cd-space-12); }
.cd-ui-kit > section { margin-top: var(--cd-space-8); }
.cd-ui-kit__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cd-space-4);
}
.cd-ui-kit__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--cd-space-6);
}
.cd-ui-kit__muted { color: var(--cd-color-muted); }
.cd-surface > :last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	.cd-button, .cd-pill { transition: none; }
	.cd-button:where(:not(:disabled):not([aria-disabled="true"])):hover,
	.cd-button:where(:not(:disabled):not([aria-disabled="true"])):active,
	.cd-pill:where(button, a[href]):hover,
	.cd-pill:where(button, a[href]):active { transform: none; }
}

/* Scoped card media only; standalone content images retain their own styling. */
.cd-surface > .cd-surface { border-radius: var(--cd-radius-inner); }
.cd-surface > img,
.cd-surface > picture,
.cd-surface > .wp-block-image { border-radius: var(--cd-radius-media); }
.cd-surface > picture,
.cd-surface > .wp-block-image { overflow: hidden; }
.cd-surface > picture > img,
.cd-surface > .wp-block-image img { border-radius: inherit; }

/* Shared field treatment, extracted unchanged from checkout. */
.cd-input,
.cd-checkout-page .cd-checkout-field input {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--cd-control-size);
	padding: var(--cd-space-3) var(--cd-space-4);
	border: 1px solid var(--cd-color-field-border);
	border-radius: var(--cd-radius-sm);
	background: var(--cd-surface-inset);
	color: var(--cd-color-text);
	font: inherit;
	box-shadow: var(--cd-shadow-inset);
}
/* Canonical controls separate tonally from the raw inset building block. */
.cd-input { background: color-mix(in srgb, var(--cd-surface-inset) 88%, var(--cd-color-border)); }
.cd-input[aria-invalid="true"],
.cd-checkout-page .cd-checkout-field input[aria-invalid="true"] { border-color: var(--cd-color-sale); }
.cd-input:focus-visible,
.cd-checkout-page .cd-checkout-field input:focus-visible {
	outline: var(--cd-focus-width) solid var(--cd-focus-color);
	outline-offset: var(--cd-focus-offset);
}

.cd-field-error { color: var(--cd-color-error-text); font-size: var(--cd-font-sm); margin: 0; }
.cd-field-error:empty { display: none; }

/* Compact consent: shared by Legal Layer forms and native Woo consent controls. */
.cd-legal-choice,
.wc-block-checkout__terms .wc-block-components-checkbox,
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
	font-size: var(--cd-font-sm);
	font-weight: var(--cd-weight-normal);
	line-height: var(--cd-line-height);
	color: var(--cd-color-muted);
	margin-block: var(--cd-space-1);
}
.cd-legal-choice {
	display: flex; align-items: flex-start; gap: var(--cd-space-2);
	min-block-size: var(--cd-space-6); padding-block: 0;
	text-align: left; cursor: pointer;
}
.cd-legal-choice > span { min-width: 0; overflow-wrap: anywhere; }
.cd-legal-choice input[type="checkbox"] {
	flex: 0 0 auto; inline-size: var(--cd-space-4); block-size: var(--cd-space-4);
	margin: var(--cd-space-1) 0 0; accent-color: var(--cd-color-muted); cursor: inherit;
}
.cd-legal-choice input:focus-visible {
	outline: var(--cd-focus-width) solid var(--cd-focus-color);
	outline-offset: var(--cd-focus-offset);
}
.wc-block-checkout__terms .wc-block-components-checkbox__label { font: inherit; color: inherit; }
.cd-legal-note, .woocommerce-privacy-policy-text {
	font-size: var(--cd-font-sm); line-height: var(--cd-line-height);
	color: var(--cd-color-muted); overflow-wrap: anywhere; margin-block: var(--cd-space-2);
}
:is(.cd-legal-choice, .cd-legal-note, .woocommerce-privacy-policy-text, .wc-block-checkout__terms, .woocommerce-terms-and-conditions-wrapper) a {
	color: inherit; font-weight: inherit; text-decoration: underline; text-underline-offset: var(--cd-space-1);
}
:is(.cd-legal-choice, .cd-legal-note, .woocommerce-privacy-policy-text, .wc-block-checkout__terms, .woocommerce-terms-and-conditions-wrapper) a:hover {
	color: var(--cd-color-text);
}

/* Information inset: shared with the approved Warranty notice. */
.cd-surface--notice, .cd-warranty-notice {
 background: color-mix(in srgb, var(--cd-surface-inset) 75%, var(--cd-color-surface));
 border-color: var(--cd-border-soft);
 border-radius: var(--cd-radius-card);
 box-shadow: var(--cd-shadow-pressed);
}
/* Radio rail uses the Content Pages tabs depth and nested-radius pattern. */
.cd-choice-rail {
 padding: var(--cd-space-2);
 border-radius: var(--cd-radius-md);
 background: color-mix(in srgb, var(--cd-surface-inset) 88%, var(--cd-color-border));
 box-shadow: var(--cd-shadow-inset);
}
.cd-choice-rail > .cd-pill {
 min-width: 0;
 border-radius: calc(var(--cd-radius-md) - var(--cd-space-2));
 background: transparent;
 box-shadow: none;
}
.cd-choice-rail > .cd-pill:has(input:checked) {
 background: var(--cd-surface-raised);
 box-shadow: var(--cd-shadow-raised-soft);
 color: var(--cd-color-text);
}

/* P0 contract for new development; existing page recipes are not migrated. */
.cd-surface--raised-soft { box-shadow: var(--cd-shadow-raised-soft); }
/* .cd-choice-rail defaults to raised-selected (Delivery/Contacts reference).
 * Opt into pressed-selected only for a fixed/pressed selection context. */
.cd-choice-rail--pressed > .cd-pill:has(input:checked) {
 background: var(--cd-gradient-pill-active);
 box-shadow: var(--cd-shadow-inset);
 color: var(--cd-color-text);
}
/* Preview geometry only; samples use the actual shared visual recipes. */
.cd-ui-kit__sample { min-width: 0; }
.cd-ui-kit__sample > p { margin-top: var(--cd-space-3); color: var(--cd-color-muted); font-size: var(--cd-font-sm); }
.cd-ui-kit__fields { display: grid; gap: var(--cd-space-4); max-width: var(--cd-container-narrow); }
.cd-ui-kit__fields label { display: block; margin-bottom: var(--cd-space-2); font-weight: var(--cd-weight-semibold); }
.cd-ui-kit__fields textarea { resize: vertical; }
.cd-ui-kit__choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.cd-ui-kit__choice legend { margin-bottom: var(--cd-space-2); }
.cd-ui-kit__choice .cd-choice-rail { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--cd-space-2); }
.cd-ui-kit__choice label { gap: var(--cd-space-2); min-height: var(--cd-control-size); cursor: pointer; }
.cd-ui-kit__choice input { flex-shrink: 0; accent-color: var(--cd-color-link); }
.cd-ui-kit__media-demo { min-height: calc(var(--cd-space-12) * 3); display: grid; place-items: center; padding: var(--cd-space-4); background: var(--cd-surface-base); color: var(--cd-color-muted); }
@media (max-width: 40rem) { .cd-ui-kit__choice .cd-choice-rail { grid-template-columns: minmax(0,1fr); } }

/* Preserve the approved legacy navigation surface until its own migration. */
.cd-mega-column.cd-surface--inset { background: var(--cd-surface-inset); }

/* Selectable pills retain native form inputs and the existing pill depth recipe. */
.cd-pill--choice { position: relative; cursor: pointer; min-height: var(--cd-control-size); font-weight: var(--cd-weight-normal); }
.cd-pill--choice input { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cd-pill--choice:has(input:checked) { background: var(--cd-gradient-pill-active); border-color: var(--cd-color-border); color: var(--cd-color-text); box-shadow: var(--cd-shadow-pressed); font-weight: var(--cd-weight-semibold); }
.cd-pill--choice:has(input:focus-visible) { outline: var(--cd-focus-width) solid var(--cd-focus-color); outline-offset: var(--cd-focus-offset); }
.cd-pill--choice[hidden] { display: none; }
/* Dense native-input pills; 32px minimum target, shared with compact pickers. */
.cd-pill--compact { min-height: var(--cd-space-8); padding: var(--cd-space-1) var(--cd-space-2); font-size: calc(var(--cd-font-sm) - .0625rem); line-height: var(--cd-line-height-heading); }
/* Accessible select presentation; native select remains the form data source. */
.cd-select { position: relative; min-width: 0; }
.cd-select__trigger { width: 100%; justify-content: space-between; }
.cd-select__list { position: fixed; z-index: 100; max-width: calc(100vw - 2rem); border-radius: var(--cd-radius-sm); border-color: var(--cd-border-soft); box-shadow: var(--cd-shadow-raised-soft); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: var(--cd-space-1); }
.cd-select__list[hidden], .cd-catalog .orderby[hidden] { display: none; }
.cd-select__option { padding: var(--cd-space-2) var(--cd-space-3); border-radius: var(--cd-radius-sm); font-size: var(--cd-font-sm); line-height: var(--cd-line-height-heading); cursor: pointer; }
.cd-select__option[aria-selected="true"] { font-weight: var(--cd-weight-semibold); }

/* Active-descendant focus is drawn on the option, not as a frame around the menu. */
.cd-select__list:focus-visible { outline: none; }

/* Editorial recipes: quieter than raised commerce surfaces; no nested card stack. */
.cd-surface--editorial { background: color-mix(in srgb, var(--cd-color-surface) 60%, var(--cd-surface-base)); border: 0; box-shadow: none; }
.cd-editorial-accent { --cd-editorial-tone: var(--cd-color-muted); border-inline-start: 2px solid color-mix(in srgb, var(--cd-editorial-tone) 40%, transparent); padding: var(--cd-space-2) var(--cd-space-4); }
.cd-editorial-accent--info { --cd-editorial-tone: var(--cd-color-link); }
.cd-editorial-accent--important { --cd-editorial-tone: var(--cd-color-hit); }
.cd-editorial-accent--rumor { --cd-editorial-tone: var(--cd-color-digital); }
.cd-editorial-accent > .cd-editorial-label { color: var(--cd-editorial-tone); }
.cd-disclosure { border-bottom: 1px solid var(--cd-border-soft); padding-block: var(--cd-space-2); }
.cd-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--cd-space-4); min-height: var(--cd-control-size); cursor: pointer; list-style: none; font-weight: var(--cd-weight-semibold); }
.cd-disclosure > summary::-webkit-details-marker { display: none; }
.cd-disclosure > summary::marker { content: ''; }
.cd-disclosure__chevron { width: .75rem; height: .75rem; flex: none; transition: transform var(--cd-transition); }
.cd-disclosure[open] > summary .cd-disclosure__chevron { transform: rotate(180deg); }
.cd-disclosure[open] > summary { margin-bottom: var(--cd-space-2); }
@media (prefers-reduced-motion: reduce) { .cd-disclosure__chevron { transition: none; } }

/* Editorial card link: whole-story target, native keyboard focus, no raised commerce chrome. */
.cd-story-link { color: var(--cd-color-text); text-decoration: none; border-radius: var(--cd-radius-md); }
.cd-story-link:hover { color: var(--cd-color-text); }
.cd-story-link:hover :is(h2, h3), .cd-story-link:focus-visible :is(h2, h3) { color: var(--cd-color-link); }