/* ==========================================================================
   DESCOL Commerce Core — global primitives.
   Tokens come from theme.json (--wp--preset--*, --wp--custom--*).
   Keep this file small: block-specific CSS ships with the block.
   ========================================================================== */

/* ---- Responsive gutters (spec: mobile 16–20, tablet 24–32, desktop 40–64) ---- */
:root { --dc-gutter: clamp(16px, 4.4vw, 20px); }
@media (min-width: 600px) { :root { --dc-gutter: clamp(24px, 3.2vw, 32px); } }
@media (min-width: 1024px) { :root { --dc-gutter: clamp(40px, 3.6vw, 64px); } }

.wp-site-blocks > * { margin-block-start: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--wp--custom--header--height, 72px) + 16px); }
body { overflow-x: clip; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; height: auto; }

/* ---- Accessibility basics ---- */
.screen-reader-text {
	border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus { clip-path: none; height: auto; width: auto; margin: 0; padding: 12px 16px; z-index: 100000; background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 2px;
}
.skip-link.screen-reader-text:focus { top: 8px; left: 8px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- Controls: CTA height 44–52px, ≥24px targets (WCAG 2.5.8) ---- */
:where(.wp-element-button, .wp-block-button__link, button.button, a.button, .single_add_to_cart_button) {
	min-height: var(--wp--custom--control--height, 48px);
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	transition: background-color var(--wp--custom--motion--fast, 120ms) linear;
}
:where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="hidden"]), select, textarea) {
	min-height: var(--wp--custom--control--height-sm, 44px);
	padding: 8px 12px; font: inherit; font-size: max(16px, 1em); /* 16px+ avoids iOS zoom */
	color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--muted); border-radius: var(--wp--custom--radius--control, 2px);
	box-sizing: border-box;
}
:where(input[type="checkbox"], input[type="radio"]) { width: 20px; height: 20px; accent-color: var(--wp--preset--color--contrast); }

/* ---- Header shell (grid: mobile burger|logo|actions, desktop logo|nav|actions) ---- */
.dc-header { position: relative; z-index: 40; background: var(--wp--preset--color--base); }
.dc-header.is-sticky { position: sticky; top: 0; }
.admin-bar .dc-header.is-sticky { top: var(--wp-admin--admin-bar--height, 0px); }
.dc-header__row {
	display: grid; align-items: center;
	grid-template-columns: 1fr auto 1fr; grid-template-areas: "burger logo actions";
	min-height: var(--wp--custom--header--height-mobile, 60px);
	column-gap: 12px;
}
.dc-header__row > * { margin-block: 0 !important; }
.dc-header__row > .dc-nav { display: contents; }
.dc-header__row .dc-nav__burger { grid-area: burger; justify-self: start; }
.dc-header__row .dc-nav__desktop { grid-area: nav; }
.dc-header__row > :is(.wp-block-site-logo, .wp-block-site-title) { grid-area: logo; margin: 0; justify-self: center; }
.dc-header__row > .dc-header__actions { grid-area: actions; justify-self: end; }
@media (min-width: 1024px) {
	.dc-header__row { grid-template-columns: auto 1fr auto; grid-template-areas: "logo nav actions"; min-height: var(--wp--custom--header--height, 72px); column-gap: var(--wp--preset--spacing--60); }
	.dc-header__row > :is(.wp-block-site-logo, .wp-block-site-title) { justify-self: start; }
	/* Centered-logo variant */
	.dc-header--centered .dc-header__row { grid-template-columns: 1fr auto 1fr; grid-template-areas: "nav logo actions"; }
	.dc-header--centered .dc-header__row > :is(.wp-block-site-logo, .wp-block-site-title) { justify-self: center; }
}
.dc-header__actions { display: flex; align-items: center; gap: 4px; }
.dc-header__actions > * { margin: 0 !important; }
.dc-header__actions :is(a, button) { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.dc-header .wp-block-site-title { font-size: var(--wp--preset--font-size--medium); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-align: center; line-height: 1.2; }
@media (min-width: 1024px) { .dc-header .wp-block-site-title { font-size: var(--wp--preset--font-size--large); text-align: start; } }
.dc-header .wp-block-site-title a { display: inline-block; padding-block: 12px; text-decoration: none; } /* ≥44px target */
/* Search: hide the inline field on small screens (drawer has its own search). */
@media (max-width: 1023px) { .dc-header__actions .wp-block-search { display: none; } }
.dc-header__actions .wp-block-search__button { background: none; color: inherit; padding: 0; min-height: 44px; min-width: 44px; border: 0; }
.dc-header__actions .wp-block-search__button svg { width: 24px; height: 24px; }
.dc-header__actions .wp-block-search__inside-wrapper { border: 0; padding: 0; }
.dc-header__actions .wp-block-search.wp-block-search__searchfield-hidden .wp-block-search__input { border: 0; padding: 0; }
.dc-header__actions .wp-block-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input { border-bottom: 1px solid currentColor; min-height: 40px; }

/* Transparent header — only applied when the hero opts in AND guarantees contrast (see docs). */
.dc-header--overlay { position: absolute; inset-inline: 0; top: 0; background: transparent; color: var(--wp--preset--color--base); }

/* Announcement bar */
.dc-announcement { font-size: var(--wp--preset--font-size--x-small); letter-spacing: .04em; text-align: center; }
.dc-announcement p { margin: 0; padding-block: 8px; }

/* ---- Catalog grid: desktop 4 (3/5 optional), tablet 3, mobile 2 ---- */
.dc-grid .wc-block-product-template,
.dc-grid .wc-block-product-template.is-flex-container {
	display: grid !important;
	grid-template-columns: repeat(var(--dc-cols-mobile, 2), minmax(0, 1fr));
	gap: var(--wp--custom--grid--gap-y, 32px) var(--wp--custom--grid--gap-x, 16px);
	margin: 0; padding: 0;
}
.dc-grid .wc-block-product-template > li { width: auto !important; margin: 0 !important; }
@media (min-width: 768px) { .dc-grid .wc-block-product-template { grid-template-columns: repeat(var(--dc-cols-tablet, 3), minmax(0, 1fr)); } }
@media (min-width: 1200px) { .dc-grid .wc-block-product-template { grid-template-columns: repeat(var(--dc-cols, 4), minmax(0, 1fr)); } }
.dc-grid--3 { --dc-cols: 3; }
.dc-grid--5 { --dc-cols: 5; --dc-cols-tablet: 3; }

/* ---- Product card primitive (works inside woocommerce/product-template) ---- */
.dc-card { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; }
.dc-card > * { margin: 0 !important; }
.dc-card .wc-block-components-product-image { margin: 0 0 8px !important; }
.dc-card .wc-block-components-product-image,
.dc-card .wc-block-components-product-image img {
	aspect-ratio: var(--dc-card-ratio, var(--wp--custom--image--ratio, 3 / 4)) !important;
	object-fit: cover; width: 100%; height: auto;
	border-radius: var(--wp--custom--radius--media, 0);
	background: var(--wp--preset--color--surface);
}
.dc-card--ratio-45 { --dc-card-ratio: var(--wp--custom--image--ratio-alt, 4 / 5); }
.dc-card .wp-block-post-title { margin: 0; font-family: var(--wp--preset--font-family--ui); font-size: var(--wp--preset--font-size--small); font-weight: 500; line-height: 1.4; letter-spacing: 0; }
.dc-card .wp-block-post-title a { text-decoration: none; }
.dc-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable, one tab stop */
.dc-card :is(.wc-block-components-product-sale-badge, .wc-block-components-product-button, .dc-card__actions) { position: relative; z-index: 2; }
.dc-card .wc-block-components-product-price { margin: 0; font-size: var(--wp--preset--font-size--small); }
.dc-card .wc-block-components-product-stock-indicator { margin: 0; font-size: var(--wp--preset--font-size--x-small); }
/* On cards only exceptions are shown (low stock / out of stock / backorder). */
.dc-card .wc-block-components-product-stock-indicator--in-stock { display: none; }

/* Price: sale price must be distinguishable without colour alone (strikethrough + SR text from WC). */
.wc-block-components-product-price del, .price del { color: var(--wp--preset--color--muted); opacity: 1; }
.wc-block-components-product-price ins, .price ins { color: var(--wp--preset--color--sale); text-decoration: none; font-weight: 600; }

/* Badges */
.wc-block-components-product-sale-badge {
	border: 0 !important; border-radius: var(--wp--custom--radius--control, 2px) !important;
	background: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--contrast) !important;
	font-size: var(--wp--preset--font-size--x-small) !important; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	padding: 4px 8px !important;
}
.dc-card .wc-block-components-product-sale-badge { position: absolute !important; top: 8px; inset-inline-start: 8px; margin: 0 !important; }

/* Stock indicator — text, not colour only */
.wc-block-components-product-stock-indicator--in-stock { color: var(--wp--preset--color--success); }
.wc-block-components-product-stock-indicator--out-of-stock { color: var(--wp--preset--color--muted); }
.wc-block-components-product-stock-indicator--low-stock { color: var(--wp--preset--color--warning); }

/* Catalog toolbar */
.dc-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; border-block: 1px solid var(--wp--preset--color--border); }
.dc-toolbar .woocommerce-result-count, .dc-toolbar .woocommerce-ordering { margin: 0 !important; font-size: var(--wp--preset--font-size--small); }

/* Breadcrumbs */
.woocommerce-breadcrumb, .wc-block-breadcrumbs { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted); }

/* Pagination targets */
.wp-block-query-pagination a, .wp-block-query-pagination span.current { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

/* Footer */
.dc-footer { font-size: var(--wp--preset--font-size--small); }
.dc-footer a { text-decoration: none; }
.dc-footer a:hover { text-decoration: underline; }
.dc-footer :is(ul) { list-style: none; padding: 0; margin: 0; }
.dc-footer li a { display: inline-block; padding-block: 6px; }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: var(--wp--custom--radius--control, 2px); }

/* WooCommerce mini-cart drawer: when closed it is aria-hidden but its controls stay focusable
   (axe: aria-hidden-focus). Hide it from the focus order too; delay keeps the close animation. */
.wc-block-mini-cart__drawer[aria-hidden="true"],
.wc-block-mini-cart__drawer.wc-block-components-drawer__screen-overlay--is-hidden { visibility: hidden; transition: visibility 0s linear .3s; }