/*
 * Collector's Cache - front-end foundation.
 *
 * Every colour, radius, font and space below reads a design token emitted by
 * the Website Customizer. Do not hard-code a value in this file: add a field
 * to the settings registry instead.
 *
 * This is the Phase 1 foundation (tokens, primitives, utilities). Storefront
 * components - product cards, grids, filters, the header - arrive in Phase 3
 * and build on these primitives.
 */

/* --------------------------------------------------------------------------
   Fallbacks: the tokens are printed inline in <head>, but a cached page or a
   disabled plugin should never render unreadable text.

   These live in a cascade layer on purpose. This stylesheet loads *after* the
   inline token block, so at equal specificity these values would win - and
   every customizer setting that differed from the value written here would be
   silently ignored. Unlayered styles always beat layered ones, so putting the
   fallbacks in a layer makes them do what their name says: apply only when
   nothing else has.
   -------------------------------------------------------------------------- */
@layer cc-fallback {

:root {
	--cc-color-bg: #101114;
	--cc-color-surface: #181a1f;
	--cc-color-surface-elevated: #202329;
	--cc-color-border: #2a2d33;
	--cc-color-text: #f2f2f2;
	--cc-color-text-muted: #a0a4ac;
	--cc-color-accent: #a33a34;
	--cc-color-accent-hover: #b8443d;
	--cc-color-accent-contrast: #ffffff;
	--cc-color-accent-text: #d07168;
	--cc-color-danger-text: #d9736b;
	--cc-color-success: #4f9d69;
	--cc-color-warning: #c08a3e;
	--cc-color-danger: #b4534b;
	--cc-container: 1240px;
	--cc-gutter: 20px;
	--cc-space: 8px;
	--cc-space-2: 16px;
	--cc-space-3: 24px;
	--cc-space-4: 32px;
	--cc-space-6: 48px;
	--cc-space-8: 64px;
	--cc-radius: 10px;
	--cc-radius-sm: 6px;
	--cc-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--cc-font-heading: var(--cc-font-body);
	--cc-font-size: 16px;
	--cc-line-height: 1.6;
	--cc-transition: 150ms ease;
}

} /* @layer cc-fallback */

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.cc-container {
	width: 100%;
	max-width: var(--cc-container);
	margin-inline: auto;
	padding-inline: var(--cc-gutter);
}

.cc-section {
	padding-block: var(--cc-space-6);
}

.cc-stack > * + * {
	margin-top: var(--cc-space-2);
}

.cc-grid {
	display: grid;
	gap: var(--cc-space-3);
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 480px) {
	.cc-grid--products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.cc-grid--products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.cc-grid--products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */
.cc-card {
	background: var(--cc-color-surface);
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius);
	color: var(--cc-color-text);
	overflow: hidden;
}

.cc-card--elevated {
	background: var(--cc-color-surface-elevated);
}

.cc-muted {
	color: var(--cc-color-text-muted);
}

/* --------------------------------------------------------------------------
   Buttons. The body carries cc-buttons-solid | -outline | -soft from the
   customizer, so a store-wide button style is one setting, not a rebuild.
   -------------------------------------------------------------------------- */
.cc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cc-space);
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: var(--cc-radius-sm);
	background: var(--cc-color-accent);
	color: var(--cc-color-accent-contrast);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--cc-transition), border-color var(--cc-transition), color var(--cc-transition);
}

.cc-button:hover,
.cc-button:focus-visible {
	background: var(--cc-color-accent-hover);
	color: var(--cc-color-accent-contrast);
}

.cc-button--secondary {
	background: transparent;
	border-color: var(--cc-color-border);
	color: var(--cc-color-text);
}

.cc-button--secondary:hover,
.cc-button--secondary:focus-visible {
	background: var(--cc-color-surface-elevated);
	color: var(--cc-color-text);
}

.cc-button[disabled],
.cc-button[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
}

.cc-buttons-outline .cc-button {
	background: transparent;
	border-color: var(--cc-color-accent);
	color: var(--cc-color-accent-text);
}

.cc-buttons-outline .cc-button:hover,
.cc-buttons-outline .cc-button:focus-visible {
	background: var(--cc-color-accent);
	color: var(--cc-color-accent-contrast);
}

.cc-buttons-soft .cc-button {
	background: color-mix(in srgb, var(--cc-color-accent) 18%, transparent);
	color: var(--cc-color-text);
}

.cc-buttons-soft .cc-button:hover,
.cc-buttons-soft .cc-button:focus-visible {
	background: color-mix(in srgb, var(--cc-color-accent) 30%, transparent);
}

/* --------------------------------------------------------------------------
   Tags and status pills. Colour is never the only signal: each pill carries
   its own text (spec 76).
   -------------------------------------------------------------------------- */
.cc-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 9px;
	border: 1px solid var(--cc-tag-border, var(--cc-color-border));
	border-radius: 999px;
	background: var(--cc-tag-bg, transparent);
	color: var(--cc-tag-color, var(--cc-color-text-muted));
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.cc-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	font-weight: 600;
}

.cc-status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.cc-status--available {
	color: var(--cc-color-success);
}

.cc-status--pending {
	color: var(--cc-color-warning);
}

.cc-status--soldout {
	color: var(--cc-color-danger-text);
}

/* --------------------------------------------------------------------------
   Theme toggle
   -------------------------------------------------------------------------- */
.cc-theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 6px 12px;
	border: 1px solid var(--cc-color-border);
	border-radius: var(--cc-radius-sm);
	background: transparent;
	color: var(--cc-color-text);
	font: inherit;
	cursor: pointer;
}

.cc-theme-toggle:hover {
	background: var(--cc-color-surface-elevated);
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
.cc-container :focus-visible,
.cc-button:focus-visible,
.cc-theme-toggle:focus-visible {
	/* The text variant is used here too: a focus ring needs 3:1 against its
	   surroundings, and the solid accent does not reach that on near-black. */
	outline: 2px solid var(--cc-color-accent-text);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.cc-button,
	.cc-card,
	.cc-theme-toggle {
		transition: none !important;
	}
}