/* One component stylesheet; all colors, type and spacing inherit Phase 01 tokens. */
:root {
	--scc-form-control-height: 50px; /* Approved approximately 50px standard control. */
	--scc-component-border-width: 1px; /* Approved native/form/divider primitive. */
}

/* Actions and their native states. */
.scc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--scc-space-2);
	min-block-size: var(--scc-control-min-target);
	min-inline-size: var(--scc-control-min-target);
	max-inline-size: 100%;
	padding: var(--scc-space-3) var(--scc-space-4);
	border: var(--scc-component-border-width) solid transparent;
	border-radius: var(--scc-control-radius);
	font-size: var(--scc-type-button-size);
	line-height: var(--scc-type-button-line-height);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	overflow-wrap: anywhere;
	cursor: pointer;
}

.scc-button--primary {
	background: var(--scc-brand-primary-background);
	color: var(--scc-color-white);
}

.scc-button--secondary {
	background: var(--scc-brand-background);
	color: var(--scc-brand-foreground);
	border-color: var(--scc-color-ink);
}

.scc-button--text {
	background: transparent;
	color: var(--scc-brand-foreground);
	padding-inline: var(--scc-space-2);
	text-decoration: underline;
}

.scc-button--primary:not(:disabled):hover {
	background: color-mix(in srgb, var(--scc-brand-primary-background) 90%, var(--scc-color-ink));
}
.scc-button--primary:not(:disabled):active {
	background: color-mix(in srgb, var(--scc-brand-primary-background) 80%, var(--scc-color-ink));
}
.scc-button--secondary:not(:disabled):hover,
.scc-button--secondary:not(:disabled):active {
	background: var(--scc-brand-foreground);
	color: var(--scc-brand-background);
}
.scc-button--text { text-underline-offset: var(--scc-space-1); }
.scc-button--text:not(:disabled):hover,
.scc-button--text:not(:disabled):active { color: var(--scc-brand-primary-background); }

.scc-button:disabled {
	border-style: dashed;
	cursor: not-allowed;
}

.scc-button__status {
	font-size: var(--scc-type-label-size);
}

/* Shared native form language. */
.scc-field {
	display: grid;
	gap: var(--scc-space-2);
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.scc-field__label {
	font-size: var(--scc-type-form-label-size);
	line-height: var(--scc-type-label-line-height);
	font-weight: 600;
	margin-block-end: var(--scc-space-2);
}

.scc-control,
.scc-quantity input[type="number"] {
	inline-size: 100%;
	min-inline-size: 0;
	min-block-size: var(--scc-form-control-height);
	padding: var(--scc-space-3);
	border: var(--scc-component-border-width) solid var(--scc-color-muted);
	border-radius: var(--scc-control-radius);
	background: var(--scc-brand-background);
	color: var(--scc-brand-foreground);
	font-size: var(--scc-type-body-size);
	line-height: var(--scc-type-body-line-height);
}

.scc-control:enabled:hover {
	border-color: var(--scc-color-ink);
}

.scc-control[aria-invalid="true"],
.scc-choice:has([aria-invalid="true"]) {
	border-color: var(--scc-color-ink);
	border-style: dashed;
}

.scc-field__help,
.scc-field__error {
	font-size: var(--scc-type-form-help-size);
	line-height: var(--scc-type-label-line-height);
	overflow-wrap: anywhere;
}

.scc-field__help {
	color: var(--scc-brand-muted);
}

.scc-choice {
	display: flex;
	align-items: center;
	gap: var(--scc-space-3);
	min-block-size: var(--scc-control-min-target);
	padding: var(--scc-space-2);
	border: var(--scc-component-border-width) solid transparent;
	font-size: var(--scc-type-body-size);
	overflow-wrap: anywhere;
	cursor: pointer;
}

.scc-choice input {
	flex: none;
	accent-color: var(--scc-brand-accent);
}

.scc-choice:has(:disabled) {
	cursor: not-allowed;
}

.scc-radio legend {
	padding: 0;
}

.scc-quantity label {
	font-size: var(--scc-type-form-label-size);
}

.scc-quantity .qty {
	max-inline-size: calc(var(--scc-control-min-target) * 3);
}

/* Header, a single menu tree, product search, footer. */
.scc-header,
.scc-footer {
	border-block: var(--scc-component-border-width) solid var(--scc-brand-border);
}

.scc-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--scc-space-3) var(--scc-space-5);
	padding-block: var(--scc-space-3);
}

.scc-header__identity {
	min-inline-size: 0;
	flex: 1 1 auto;
}

.scc-header__inner { position: relative; }
.scc-header__actions { display: flex; align-items: center; flex: none; margin-inline-start: auto; }
.scc-header__search { min-inline-size: 0; }
.scc-header__search summary { list-style: none; cursor: pointer; }
.scc-header__search summary::-webkit-details-marker { display: none; }
.scc-header__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	inline-size: var(--scc-control-min-target);
	block-size: var(--scc-control-min-target);
	flex: none;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--scc-brand-foreground);
	text-decoration: none;
	cursor: pointer;
}
.scc-header__action:is(:hover, :active) { color: var(--scc-brand-primary-background); text-decoration: none; }
.scc-header__action:focus-visible { outline: var(--scc-focus-ring-width) solid var(--scc-brand-primary-background); outline-offset: var(--scc-focus-ring-offset); }
.scc-header__actions .scc-icon { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
.scc-header__search-panel {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	z-index: 20;
	padding: var(--scc-space-4);
	background: var(--scc-brand-background);
	border: var(--scc-component-border-width) solid var(--scc-brand-border);
}
.scc-header__search-panel .scc-control { flex: 1 1 0; min-inline-size: 0; }
.scc-header__cart-count {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	display: grid;
	place-items: center;
	min-inline-size: 1.25rem;
	block-size: 1.25rem;
	padding-inline: var(--scc-space-1);
	border-radius: 50%;
	font-size: var(--scc-type-label-size);
	font-weight: 500;
	line-height: 1;
	background: var(--scc-brand-foreground);
	color: var(--scc-brand-background);
	font-variant-numeric: tabular-nums;
}

.scc-header__title {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--scc-control-min-target);
	font-size: var(--scc-type-h3-size);
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.scc-header .custom-logo {
	inline-size: auto;
	max-block-size: var(--scc-space-10); /* REQUIRES IMPLEMENTATION CALIBRATION: logo cap. */
}

.scc-search {
	display: flex;
	gap: var(--scc-space-2);
	flex: 1 1 100%;
	min-inline-size: 0;
}

.scc-search .scc-button {
	flex: none;
}

.scc-mobile-navigation {
	inline-size: 100%;
}

.scc-mobile-navigation__toggle[hidden],
.scc-mobile-navigation__panel[hidden],
.scc-accordion__panel[hidden] {
	display: none;
}

.scc-navigation__list,
.scc-navigation .sub-menu {
	display: flex;
	flex-direction: column;
	gap: var(--scc-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.scc-navigation .sub-menu {
	padding-inline-start: var(--scc-space-4);
}

.scc-navigation a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--scc-control-min-target);
	padding-inline: var(--scc-space-2);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.scc-navigation a:hover,
.scc-navigation a:active { color: var(--scc-brand-primary-background); }

.scc-navigation a[aria-current] {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: var(--scc-space-1);
}

.scc-footer__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--scc-space-6);
	padding-block: var(--scc-space-9);
}

.scc-footer__identity {
	font-weight: 600;
	overflow-wrap: anywhere;
}
.scc-footer__identity { grid-column: 1 / -1; }
.scc-footer__title { font-size: var(--scc-type-h3-size); text-decoration: none; }
.scc-footer__copy { max-inline-size: 32ch; font-size: var(--scc-type-body-small-size); color: var(--scc-brand-muted); font-weight: 400; margin-block-start: var(--scc-space-2); }
.scc-footer__group { min-inline-size: 0; }
.scc-footer__groups { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--scc-space-6); }
.scc-footer__group h2 { font-size: var(--scc-type-label-size); line-height: var(--scc-type-label-line-height); margin-block-end: var(--scc-space-2); }
.scc-footer__group .scc-navigation__list { flex-direction: column; gap: 0; }
.scc-footer__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--scc-space-4); border-block-start: var(--scc-component-border-width) solid var(--scc-brand-border); padding-block: var(--scc-space-4); font-size: var(--scc-type-body-small-size); }

/* Hierarchy supplied by native contexts or structured breadcrumb items. */
.scc-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--scc-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--scc-type-breadcrumb-size);
}

.scc-breadcrumbs li {
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.scc-breadcrumbs li + li::before {
	content: '/';
	margin-inline-end: var(--scc-space-2);
	color: var(--scc-brand-muted);
}

.scc-breadcrumbs a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--scc-control-min-target);
}

.scc-breadcrumbs [aria-current] {
	font-weight: 600;
}

/* One product primitive; grid is structural, never a product query. */
.scc-product-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--scc-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.scc-product-grid > li {
	min-inline-size: 0;
}

.scc-product-card {
	display: grid;
	gap: var(--scc-space-2);
	min-inline-size: 0;
}

.scc-product-card__link {
	display: grid;
	gap: var(--scc-space-3);
	color: var(--scc-brand-foreground);
	text-decoration: none;
}

.scc-product-card__link:hover .scc-product-card__title,
.scc-product-card__link:active .scc-product-card__title {
	text-decoration: underline;
	text-underline-offset: var(--scc-space-1);
}

.scc-product-card__media {
	display: grid;
	place-items: center;
	aspect-ratio: var(--scc-product-card-image-ratio); /* REQUIRES IMPLEMENTATION CALIBRATION. */
	border-radius: var(--scc-card-media-radius); /* REQUIRES IMPLEMENTATION CALIBRATION. */
	overflow: hidden;
	background: var(--scc-brand-background);
}

.scc-product-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.scc-product-card__title {
	font-size: var(--scc-type-body-size);
	line-height: var(--scc-type-body-line-height);
	overflow-wrap: anywhere;
	min-block-size: calc(2em * var(--scc-type-body-line-height));
}

.scc-product-card__missing,
.scc-product-card__status,
.scc-price__unavailable {
	font-size: var(--scc-type-body-small-size);
	color: var(--scc-brand-muted);
	overflow-wrap: anywhere;
}

.scc-price--standard {
	font-size: var(--scc-type-price-standard-size);
}

.scc-price--large {
	font-size: var(--scc-type-price-large-size);
}

.scc-price ins {
	text-decoration: none;
	font-weight: 600;
}

.scc-price del {
	color: var(--scc-brand-muted);
}

/* Disclosure and content primitives remain unframed. */
.scc-accordion__item {
	border-block-end: var(--scc-component-border-width) solid var(--scc-brand-border);
}

.scc-accordion__trigger {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--scc-space-4);
	inline-size: 100%;
	min-block-size: var(--scc-control-min-target);
	padding: var(--scc-space-4) 0;
	border: 0;
	background: transparent;
	color: var(--scc-brand-foreground);
	font: inherit;
	text-align: start;
	overflow-wrap: anywhere;
	cursor: pointer;
}

.scc-accordion__trigger:hover,
.scc-accordion__trigger:active {
	color: var(--scc-brand-primary-background);
}
.scc-accordion__trigger[aria-expanded="true"] { font-weight: 600; }

[data-scc-enhanced] .scc-accordion__trigger::after {
	content: '-';
	flex: none;
}

[data-scc-enhanced] .scc-accordion__trigger[aria-expanded="false"]::after {
	content: '+';
}

.scc-accordion__panel {
	padding-block-end: var(--scc-space-4);
	overflow-wrap: anywhere;
}

.scc-trust-item {
	display: flex;
	align-items: start;
	gap: var(--scc-space-3);
	padding-block: var(--scc-space-4);
	border-block-end: var(--scc-component-border-width) solid var(--scc-brand-border);
}

.scc-trust-item__icon {
	flex: none;
	inline-size: var(--scc-space-6); /* REQUIRES IMPLEMENTATION CALIBRATION: supplied icon size. */
}

.scc-trust-item__label {
	font-weight: 600;
}

.scc-trust-item__copy,
.scc-section-header__copy {
	margin-block-start: var(--scc-space-2);
	color: var(--scc-brand-muted);
}

.scc-trust-item,
.scc-section-header,
.scc-empty-state,
.scc-cta-block {
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.scc-section-header__context {
	font-size: var(--scc-type-label-size);
	margin-block-end: var(--scc-space-2);
}

.scc-cta-block,
.scc-empty-state {
	display: grid;
	justify-items: start;
	gap: var(--scc-space-4);
}
.scc-cta-block__actions { display: flex; flex-wrap: wrap; gap: var(--scc-space-3); max-inline-size: 100%; }
.scc-cta-block--center { justify-items: center; text-align: center; }
.scc-cta-block--center .scc-cta-block__actions { justify-content: center; }

.scc-empty-state__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--scc-space-3);
}

.scc-notice {
	padding-block: var(--scc-space-3);
	border-block: var(--scc-component-border-width) solid var(--scc-brand-border);
	overflow-wrap: anywhere;
}

/* REQUIRES IMPLEMENTATION CALIBRATION: 48rem enables the horizontal menu and
   requested grid column config when content has room. Not a frozen breakpoint. */
@media (min-width: 48rem) {
	.scc-trust-item--inline { border-block-end: 0; border-inline-end: var(--scc-component-border-width) solid var(--scc-brand-border); padding-inline-end: var(--scc-space-4); }
	.scc-trust-item--inline:last-child { border-inline-end: 0; }
	.scc-header__identity { flex: 0 1 auto; }
	.scc-header .scc-mobile-navigation { inline-size: auto; flex: 1 1 0; }
	.scc-header .scc-navigation__list { justify-content: center; }
	.scc-footer__inner { grid-template-columns: minmax(0, 1fr); }
	.scc-footer__identity { grid-column: auto; }
	.scc-footer__groups { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--scc-space-7); }

	.scc-navigation__list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--scc-space-1) var(--scc-space-2);
	}

	.scc-product-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.scc-product-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Four editable groups reuse the same Footer on every theme surface. */
@media (width < 48rem) {
	.l-container { width: min(100% - (clamp(var(--scc-space-4), 4.6vw, var(--scc-space-5)) * 2), var(--scc-container-max)); }
	.scc-header__inner { display: grid; grid-template-columns: minmax(0, 1fr) var(--scc-control-min-target) auto; }
	.scc-header__identity { grid-column: 1; grid-row: 1; }
	.scc-header__actions { grid-column: 3; grid-row: 1; }
	.scc-header .scc-mobile-navigation { display: contents; }
	.scc-header .scc-mobile-navigation__toggle { grid-column: 2; grid-row: 1; inline-size: var(--scc-control-min-target); block-size: var(--scc-control-min-target); padding: 0; text-decoration: none; }
	.scc-header .scc-mobile-navigation__panel { grid-column: 1 / -1; grid-row: 2; min-inline-size: 0; }
	.scc-header .scc-navigation a,
	.scc-footer .scc-navigation a { min-inline-size: var(--scc-control-min-target); }
	.scc-footer__title { display: inline-flex; align-items: center; min-block-size: var(--scc-control-min-target); }
	.scc-footer__copy { font-size: var(--scc-type-body-size); line-height: var(--scc-type-body-large-line-height); max-inline-size: 48ch; }
	.scc-footer__group h2 { font-size: var(--scc-type-body-large-size); }
	.scc-footer__meta { font-size: var(--scc-type-body-size); flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--scc-space-3); }
	.scc-footer__meta > .scc-navigation { order: -1; min-inline-size: 0; }
	.scc-footer__meta .scc-navigation__list { gap: 0; }
	.scc-footer__meta .scc-navigation a { padding-inline: 0; }
}
@media (min-width: 60rem) {
	.scc-footer__inner { grid-template-columns: minmax(0, 1.35fr); align-items: start; padding-block: var(--scc-space-10); gap: var(--scc-space-7); }
	.scc-footer__inner:has(.scc-footer__group) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
	.scc-footer__inner:has(.scc-footer__group:nth-child(2)) { grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)); }
	.scc-footer__inner:has(.scc-footer__group:nth-child(3)) { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); }
	.scc-footer__inner:has(.scc-footer__group:nth-child(4)) { grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr)); }
	.scc-footer__groups { display: contents; }
	.scc-footer__group h2 { font-size: var(--scc-type-body-large-size); font-weight: 600; margin-block-end: var(--scc-space-3); }
	.scc-footer__group .scc-navigation a { font-size: var(--scc-type-body-large-size); padding-inline: 0; }
	.scc-footer__copy { max-inline-size: 20rem; font-size: var(--scc-type-body-size); }
	.scc-footer__meta { font-size: var(--scc-type-body-size); font-weight: 400; }
	.scc-footer__meta .scc-navigation a { font-weight: 500; text-decoration: none; }
}