/**
 * DeShop — base.css
 *
 * Loaded on every page. Contains, in order:
 * 1. Design tokens (aliases of theme.json presets)
 * 2. Font fallbacks with metric overrides (reduces layout shift)
 * 3. Modern reset
 * 4. Typography
 * 5. Layout primitives (container, stack, grid)
 * 6. Accessibility helpers (skip link, screen-reader text, focus)
 * 7. Media and WordPress core classes
 * 8. Utilities
 *
 * Design tokens come from theme.json (--wp--preset--*, --wp--custom--*).
 * Components use the short --ds-* aliases below, never raw values, so the
 * Customizer only has to override the theme.json variables.
 *
 * @package DeShop
 */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
	/* Color */
	--ds-primary: var(--wp--preset--color--primary, #1f3d2b);
	--ds-primary-hover: var(--wp--preset--color--primary-hover, #16301f);
	--ds-primary-soft: var(--wp--preset--color--primary-soft, #e6ede8);
	--ds-accent: var(--wp--preset--color--accent, #b8975a);
	--ds-bg: var(--wp--preset--color--background, #fbf9f4);
	--ds-surface: var(--wp--preset--color--surface, #fff);
	--ds-muted: var(--wp--preset--color--muted, #f2eee6);
	--ds-border: var(--wp--preset--color--border, #e4ded3);
	--ds-text: var(--wp--preset--color--text, #1c1c1a);
	--ds-text-muted: var(--wp--preset--color--text-muted, #6b6760);
	--ds-sale: var(--wp--preset--color--sale, #a23b3b);
	--ds-success: var(--wp--preset--color--success, #2e7d4f);
	--ds-warning: var(--wp--preset--color--warning, #b7791f);
	--ds-on-primary: var(--ds-surface);

	/* Type */
	--ds-font-heading: var(--wp--preset--font-family--heading, Georgia, serif);
	--ds-font-body: var(--wp--preset--font-family--body, system-ui, sans-serif);
	--ds-fs-xs: var(--wp--preset--font-size--x-small, 0.8125rem);
	--ds-fs-sm: var(--wp--preset--font-size--small, 0.875rem);
	--ds-fs-md: var(--wp--preset--font-size--medium, 1rem);
	--ds-fs-lg: var(--wp--preset--font-size--large, 1.25rem);
	--ds-fs-xl: var(--wp--preset--font-size--x-large, 1.75rem);
	--ds-fs-2xl: var(--wp--preset--font-size--xx-large, 2.5rem);
	--ds-fs-3xl: var(--wp--preset--font-size--huge, 3.75rem);
	--ds-lh-heading: var(--wp--custom--line-height--heading, 1.15);
	--ds-lh-body: var(--wp--custom--line-height--body, 1.6);

	/* Space (4px base) */
	--ds-space-2xs: var(--wp--preset--spacing--10, 0.25rem);
	--ds-space-xs: var(--wp--preset--spacing--20, 0.5rem);
	--ds-space-sm: var(--wp--preset--spacing--30, 0.75rem);
	--ds-space-md: var(--wp--preset--spacing--40, 1rem);
	--ds-space-lg: var(--wp--preset--spacing--50, 1.5rem);
	--ds-space-xl: var(--wp--preset--spacing--60, 2rem);
	--ds-space-2xl: var(--wp--preset--spacing--70, 3rem);
	--ds-space-3xl: var(--wp--preset--spacing--80, 4rem);
	--ds-space-4xl: var(--wp--preset--spacing--90, 6rem);

	/* Shape & depth */
	--ds-radius-sm: var(--wp--custom--radius--sm, 4px);
	--ds-radius-md: var(--wp--custom--radius--md, 8px);
	--ds-radius-lg: var(--wp--custom--radius--lg, 16px);
	--ds-radius-full: var(--wp--custom--radius--full, 9999px);
	--ds-shadow-sm: var(--wp--preset--shadow--sm, 0 1px 2px rgb(28 28 26 / 6%));
	--ds-shadow-md: var(--wp--preset--shadow--md, 0 4px 16px rgb(28 28 26 / 8%));
	--ds-shadow-lg: var(--wp--preset--shadow--lg, 0 12px 40px rgb(28 28 26 / 12%));

	/* Motion */
	--ds-dur-fast: var(--wp--custom--motion--fast, 150ms);
	--ds-dur: var(--wp--custom--motion--base, 250ms);
	--ds-dur-slow: var(--wp--custom--motion--slow, 400ms);
	--ds-ease: var(--wp--custom--motion--easing, cubic-bezier(0.2, 0.7, 0.2, 1));

	/* Layout */
	--ds-container: 1280px;
	--ds-content: 760px;
	--ds-gutter: var(--wp--custom--gutter--mobile, 16px);
	--ds-tap: var(--wp--custom--tap-target, 44px);
	--ds-header-h: 56px;

	/* Layers */
	--ds-z-header: var(--wp--custom--z--header, 100);
	--ds-z-bottom-nav: var(--wp--custom--z--bottom-nav, 110);
	--ds-z-drawer: var(--wp--custom--z--drawer, 200);
	--ds-z-modal: var(--wp--custom--z--modal, 300);
	--ds-z-toast: var(--wp--custom--z--toast, 400);

	/* Safe areas (notch, home indicator) */
	--ds-safe-top: env(safe-area-inset-top, 0px);
	--ds-safe-bottom: env(safe-area-inset-bottom, 0px);
	--ds-safe-left: env(safe-area-inset-left, 0px);
	--ds-safe-right: env(safe-area-inset-right, 0px);

	color-scheme: light;
}

@media (min-width: 768px) {
	:root {
		--ds-gutter: var(--wp--custom--gutter--tablet, 24px);
		--ds-header-h: 72px;
	}
}

@media (min-width: 1024px) {
	:root {
		--ds-gutter: var(--wp--custom--gutter--desktop, 32px);
		--ds-header-h: 80px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ds-dur-fast: 0ms;
		--ds-dur: 0ms;
		--ds-dur-slow: 0ms;
	}
}

/* 2. Font fallbacks ---------------------------------------------------------
 * Local fonts scaled to match the web fonts' metrics, so text does not jump
 * when Inter / Cormorant Garamond finish loading (lower CLS).
 */

@font-face {
	font-family: "DeShop Sans Fallback";
	src: local("Arial"), local("Liberation Sans"), local("Helvetica");
	size-adjust: 109.38%;
	ascent-override: 88.57%;
	descent-override: 22.05%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "DeShop Serif Fallback";
	src: local("Times New Roman"), local("Liberation Serif"), local("Times");
	size-adjust: 96.3%;
	ascent-override: 95.95%;
	descent-override: 29.8%;
	line-gap-override: 0%;
}

/* 3. Reset ------------------------------------------------------------------ */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	scroll-padding-top: calc(var(--ds-header-h) + var(--ds-space-md));
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	background-color: var(--ds-bg);
	color: var(--ds-text);
	font-family: var(--ds-font-body);
	font-size: var(--ds-fs-md);
	line-height: var(--ds-lh-body);
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip; /* Prevent accidental sideways scroll on mobile. */
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

/* :where() keeps specificity at zero so components can set their own spacing. */
:where(ul[role="list"], ol[role="list"], .menu, .menu ul) {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

img,
video {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

button {
	cursor: pointer;
}

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

textarea {
	resize: vertical;
}

table {
	width: 100%;
	border-collapse: collapse;
}

hr {
	height: 1px;
	margin: var(--ds-space-xl) 0;
	border: 0;
	background: var(--ds-border);
}

[hidden] {
	display: none !important;
}

/* 4. Typography ------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
.ds-heading {
	font-family: var(--ds-font-heading);
	font-weight: 500;
	line-height: var(--ds-lh-heading);
	letter-spacing: -0.01em;
	color: var(--ds-text);
	text-wrap: balance;
	overflow-wrap: break-word;
}

h1 { font-size: var(--ds-fs-3xl); }
h2 { font-size: var(--ds-fs-2xl); }
h3 { font-size: var(--ds-fs-xl); }
h4 { font-size: var(--ds-fs-lg); }

h5,
h6 {
	font-family: var(--ds-font-body);
	font-weight: 600;
	letter-spacing: 0;
}

h5 { font-size: var(--ds-fs-md); }
h6 { font-size: var(--ds-fs-sm); }

p,
li {
	text-wrap: pretty;
	overflow-wrap: break-word;
}

a {
	color: var(--ds-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--ds-dur-fast) var(--ds-ease);
}

a:hover {
	color: var(--ds-primary-hover);
}

strong,
b {
	font-weight: 600;
}

small {
	font-size: var(--ds-fs-sm);
}

blockquote {
	padding-inline-start: var(--ds-space-lg);
	border-inline-start: 2px solid var(--ds-accent);
	font-family: var(--ds-font-heading);
	font-size: var(--ds-fs-xl);
	font-style: italic;
	line-height: 1.35;
}

code,
kbd,
pre,
samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

pre {
	overflow-x: auto;
	padding: var(--ds-space-md);
	border-radius: var(--ds-radius-md);
	background: var(--ds-muted);
}

/* Eyebrow: small uppercase label above section headings. */
.ds-eyebrow {
	display: inline-block;
	font-family: var(--ds-font-body);
	font-size: var(--ds-fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ds-accent);
}

.ds-lead {
	font-size: var(--ds-fs-lg);
	color: var(--ds-text-muted);
}

.ds-price,
.price {
	font-variant-numeric: tabular-nums;
}

/* Rhythm inside long-form content (posts, pages, product descriptions). */
.ds-prose > * + *,
.entry__content > * + * {
	margin-block-start: var(--ds-space-md);
}

.ds-prose > :is(h2, h3, h4),
.entry__content > :is(h2, h3, h4) {
	margin-block-start: var(--ds-space-xl);
}

/* Only lists written in the content get an indent; component lists keep their own. */
:where(.ds-prose, .entry__content) > :where(ul, ol),
:where(.ds-prose, .entry__content) :where(li) > :where(ul, ol) {
	padding-inline-start: 1.25em;
}

/* 5. Layout ------------------------------------------------------------------ */

.container {
	width: 100%;
	max-width: calc(var(--ds-container) + var(--ds-gutter) * 2);
	margin-inline: auto;
	padding-inline: max(var(--ds-gutter), var(--ds-safe-left)) max(var(--ds-gutter), var(--ds-safe-right));
}

.container--narrow {
	max-width: calc(var(--ds-content) + var(--ds-gutter) * 2);
}

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.site-main {
	flex: 1 0 auto;
	outline: 0;
}

.content-area {
	padding-block: var(--ds-space-2xl);
}

.ds-section {
	padding-block: var(--ds-space-3xl);
}

.ds-section--muted {
	background: var(--ds-muted);
}

.ds-stack {
	display: flex;
	flex-direction: column;
	gap: var(--ds-stack-gap, var(--ds-space-md));
}

.ds-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ds-cluster-gap, var(--ds-space-sm));
}

/* Responsive grid: set --ds-cols (desktop) and --ds-cols-sm (mobile). */
.ds-grid {
	display: grid;
	grid-template-columns: repeat(var(--ds-cols-sm, 2), minmax(0, 1fr));
	gap: var(--ds-grid-gap, var(--ds-space-md));
}

@media (min-width: 768px) {
	.ds-grid {
		grid-template-columns: repeat(var(--ds-cols-md, 3), minmax(0, 1fr));
		--ds-grid-gap: var(--ds-space-lg);
	}
}

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

/* Section header: eyebrow + title + optional link, aligned on one row. */
.ds-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ds-space-sm) var(--ds-space-lg);
	margin-block-end: var(--ds-space-xl);
}

.ds-section-head__title {
	font-size: var(--ds-fs-2xl);
}

.ds-section-head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* 6. Accessibility ---------------------------------------------------------- */

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

.skip-link:focus,
.screen-reader-text:focus {
	position: fixed !important;
	top: calc(var(--ds-safe-top) + var(--ds-space-sm));
	left: var(--ds-space-sm);
	z-index: 100000;
	width: auto;
	height: auto;
	padding: var(--ds-space-sm) var(--ds-space-md);
	clip: auto;
	clip-path: none;
	border-radius: var(--ds-radius-md);
	background: var(--ds-primary);
	color: var(--ds-on-primary);
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--ds-shadow-md);
}

:focus-visible {
	outline: 2px solid var(--ds-accent);
	outline-offset: 2px;
}

:focus:not(:focus-visible) {
	outline: 0;
}

/* 7. Media & WordPress core -------------------------------------------------- */

.alignleft {
	float: left;
	margin: 0 var(--ds-space-lg) var(--ds-space-md) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--ds-space-md) var(--ds-space-lg);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignwide {
	width: min(100vw - var(--ds-gutter) * 2, var(--ds-container));
	max-width: none;
	margin-inline: calc(50% - min(100vw - var(--ds-gutter) * 2, var(--ds-container)) / 2);
}

.alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.wp-caption,
figure {
	max-width: 100%;
}

.wp-caption-text,
figcaption,
.wp-element-caption {
	margin-block-start: var(--ds-space-xs);
	font-size: var(--ds-fs-sm);
	color: var(--ds-text-muted);
}

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

.gallery-columns-2 { --gallery-cols: 2; }
.gallery-columns-4 { --gallery-cols: 4; }

.sticky,
.bypostauthor,
.gallery-caption {
	/* Required by the WordPress theme checks; styled per context. */
	outline: 0;
}

/* Media with a fixed aspect ratio (cards, heroes). Prevents CLS. */
.ds-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--ds-ratio, 4 / 5);
	background: var(--ds-muted);
}

.ds-media > img,
.ds-media > picture > img,
.ds-media > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 8. Utilities ---------------------------------------------------------------- */

.ds-text-center { text-align: center; }
.ds-text-muted { color: var(--ds-text-muted); }
.ds-nowrap { white-space: nowrap; }

.ds-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ds-line-clamp {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--ds-lines, 2);
	line-clamp: var(--ds-lines, 2);
}

/* Hide on small screens / show only on small screens (768px breakpoint). */
@media (max-width: 767.98px) {
	.ds-hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
	.ds-hide-desktop { display: none !important; }
}

/* Horizontal scroll row with snap — base for carousels and chip rows. */
.ds-scroller {
	position: relative; /* Contain absolutely positioned descendants (badges, SR text). */
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--ds-item-w, 72%);
	gap: var(--ds-space-md);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--ds-gutter);
	padding-inline: var(--ds-gutter);
	margin-inline: calc(var(--ds-gutter) * -1);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.ds-scroller::-webkit-scrollbar {
	display: none;
}

.ds-scroller > * {
	position: relative;
	min-width: 0;
	scroll-snap-align: start;
}

@media (min-width: 768px) {
	.ds-scroller {
		--ds-item-w: calc((100% - var(--ds-space-md) * 2) / 3);
	}
}

@media (min-width: 1024px) {
	.ds-scroller {
		--ds-item-w: calc((100% - var(--ds-space-md) * 3) / 4);
		padding-inline: 0;
		margin-inline: 0;
		scroll-padding-inline: 0;
	}
}

/* Print: keep content readable, drop chrome. */
@media print {
	.site-header,
	.site-footer,
	.ds-bottom-nav,
	.ds-no-print {
		display: none !important;
	}

	body {
		background: #fff;
	}
}