/**
 * Stray Commerce — main stylesheet (structure).
 *
 * The reusable *structure* of the theme. Skinned entirely through the token
 * layers (css/tokens/). Consumes ONLY semantic tokens, never raw primitives.
 *
 * @package Stray_Commerce
 */

/* ==========================================================================
   Fonts — self-hosted Jost (woff2, weights 400/500/600/700, latin+latin-ext)
   Files live in fonts/jost/. font-display: swap so text paints immediately
   with the system fallback and swaps to Jost when ready.
   ========================================================================== */

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/jost/jost-v20-latin_latin-ext-regular.woff2") format("woff2");
}

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/jost/jost-v20-latin_latin-ext-500.woff2") format("woff2");
}

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/jost/jost-v20-latin_latin-ext-600.woff2") format("woff2");
}

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/jost/jost-v20-latin_latin-ext-700.woff2") format("woff2");
}

/* ==========================================================================
   Breakpoint reference
   --------------------------------------------------------------------------
   Pure CSS can't tokenize media-query conditions, so the breakpoint scale is
   documented here and these exact values are used in every @media rule.
   (Mirrors the scale documented in css/tokens/primitives.css.)

     tablet   768px  (48rem)
     desktop  1024px (64rem)

   Mobile-first: base rules target mobile; min-width queries step up.
   The one max-width query (47.99rem) is the typography step-down below tablet.
   ========================================================================== */

/* ==========================================================================
   Reset / base
   ========================================================================== */

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

:root { color-scheme: light; }

html {
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
}

/* Strip default margins on the common flow elements; keep list margins so
   content lists remain legible and a11y semantics are untouched. */
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

body {
	background: var(--background-primary);
	color: var(--content-primary);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	/* Break long unbroken strings (URLs, SKUs, codes) instead of overflowing. */
	overflow-wrap: break-word;
}

/* Media defaults to block-level and never overflows its container. */
img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}

/* Form controls inherit typography and colour rather than UA defaults. */
input, button, textarea, select {
	font: inherit;
	color: inherit;
}

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

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--content-primary);
}

h1 {
	font-size: var(--text-4xl);
	line-height: var(--leading-tight);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-heading);
}

h2 {
	font-size: var(--text-3xl);
	line-height: var(--leading-tight);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-heading);
}

h3 {
	font-size: var(--text-2xl);
	line-height: var(--leading-snug);
	font-weight: var(--weight-semibold);
}

h4 {
	font-size: var(--text-xl);
	line-height: var(--leading-snug);
	font-weight: var(--weight-medium);
}

h5 {
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
	font-weight: var(--weight-medium);
}

h6 {
	font-size: var(--text-md);
	line-height: var(--leading-normal);
	font-weight: var(--weight-semibold);
}

p {
	font-size: var(--text-base);
	line-height: var(--leading-body);
	font-weight: var(--weight-regular);
	/* Keep prose to a readable measure without constraining layout blocks. */
	max-width: var(--measure);
}

a {
	color: var(--content-primary);
	text-decoration: underline;
}

a:hover {
	color: var(--content-secondary);
}

strong, b {
	font-weight: var(--weight-bold);
}

/* Mobile step-down (below tablet): tame the two largest display sizes. */
@media (max-width: 47.99rem) {
	h1 {
		font-size: var(--text-3xl);
	}

	h2 {
		font-size: var(--text-2xl);
	}
}

/* ==========================================================================
   Accessibility base
   ========================================================================== */

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

/* Focusable variant: the skip link reveals itself on keyboard focus. */
.screen-reader-text:focus {
	background: var(--background-primary);
	color: var(--content-primary);
	clip: auto !important;
	clip-path: none;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--space-3) var(--space-4);
	overflow: visible;
	position: fixed !important;
	top: var(--space-3);
	left: var(--space-3);
	z-index: var(--z-toast);
	text-decoration: none;
	outline: var(--focus-ring-width) solid var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
}

/* Visible, consistent keyboard focus across interactive elements. */
:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
}

/* The main region is a skip-link focus target, not an interactive control —
   don't ring the whole region when focus lands on it. */
.site-main:focus {
	outline: none;
}

::selection {
	background: var(--primary-a);
	color: var(--primary-b);
}

/* ==========================================================================
   Icons (Remix Icon sprite system)
   --------------------------------------------------------------------------
   Markup is produced by strc_icon(); icons inherit text colour and size from
   the type/icon tokens. See inc/template-tags.php for the sprite + helper.
   ========================================================================== */

.strc-icon {
	width: var(--icon-md);
	height: var(--icon-md);
	fill: currentColor;
	flex: none;
}

.strc-icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.strc-icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.strc-icon--xl { width: var(--icon-xl); height: var(--icon-xl); }

/* ==========================================================================
   Layout / grid
   --------------------------------------------------------------------------
   Token-driven. The only literal breakpoints are the documented 48rem
   (tablet) and 64rem (desktop); gutters and padding always come from tokens.
   ========================================================================== */

/* Container — centres content, caps at --container-max (1440px), and inherits
   the responsive horizontal margin (16px -> 32px) from --container-pad. */
.strc-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* Narrow variant for long-form, single-column reading (articles, checkout). */
.strc-container--narrow {
	max-width: var(--measure);
}

/* Base grid — column count and gap both shift with the grid tokens:
   6 cols / 4px (mobile) -> 6 cols / 8px (tablet) -> 12 cols / 8px (desktop).
   minmax(0, 1fr) stops long content (URLs, media) from blowing tracks out. */
.strc-grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
	gap: var(--grid-gutter);
}

/* Column-span utilities — direct children of .strc-grid span N columns.
   Mobile-first cascade: base (6-col) -> tablet (6-col) -> desktop (12-col);
   later tiers override earlier ones because they appear later in source. */

/* Mobile (base, 6-col) */
.strc-col-1 { grid-column: span 1; }
.strc-col-2 { grid-column: span 2; }
.strc-col-3 { grid-column: span 3; }
.strc-col-4 { grid-column: span 4; }
.strc-col-5 { grid-column: span 5; }
.strc-col-6 { grid-column: span 6; }

/* Tablet (6-col) */
@media (min-width: 48rem) {
	.strc-col-t-1 { grid-column: span 1; }
	.strc-col-t-2 { grid-column: span 2; }
	.strc-col-t-3 { grid-column: span 3; }
	.strc-col-t-4 { grid-column: span 4; }
	.strc-col-t-5 { grid-column: span 5; }
	.strc-col-t-6 { grid-column: span 6; }
}

/* Desktop (12-col) */
@media (min-width: 64rem) {
	.strc-col-d-1  { grid-column: span 1; }
	.strc-col-d-2  { grid-column: span 2; }
	.strc-col-d-3  { grid-column: span 3; }
	.strc-col-d-4  { grid-column: span 4; }
	.strc-col-d-5  { grid-column: span 5; }
	.strc-col-d-6  { grid-column: span 6; }
	.strc-col-d-7  { grid-column: span 7; }
	.strc-col-d-8  { grid-column: span 8; }
	.strc-col-d-9  { grid-column: span 9; }
	.strc-col-d-10 { grid-column: span 10; }
	.strc-col-d-11 { grid-column: span 11; }
	.strc-col-d-12 { grid-column: span 12; }
}

/* Product grid — modifier on .strc-grid for shop loops. Explicit column
   counts step 2 -> 3 -> 4 across the breakpoints; gap is inherited from
   .strc-grid (--grid-gutter).

   To later switch to a self-sizing approach, define a --product-col-min token
   (e.g. 16rem) and replace the three column rules below with a single:
     grid-template-columns: repeat(auto-fill, minmax(var(--product-col-min), 1fr)); */
.strc-grid--products {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48rem) {
	.strc-grid--products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.strc-grid--products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Content grid — block content (single / page / static front page)
   Normal blocks sit at --measure, .alignwide at --container-max, .alignfull
   spans the viewport. Named-line "content-grid" pattern: no negative margins,
   no 100vw scrollbar bug. Block-content templates only.
   -------------------------------------------------------------------------- */

.entry-content {
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--container-pad), 1fr)
		[wide-start] minmax(0, calc((var(--container-max) - var(--measure)) / 2))
		[content-start] min(var(--measure), 100% - (var(--container-pad) * 2)) [content-end]
		minmax(0, calc((var(--container-max) - var(--measure)) / 2)) [wide-end]
		minmax(var(--container-pad), 1fr) [full-end];
	row-gap: var(--space-stack);
}

.entry-content > * {
	grid-column: content;
	min-width: 0; /* let long content shrink instead of overflowing */
}

.entry-content > .alignwide {
	grid-column: wide;
}

.entry-content > .alignfull {
	grid-column: full;
}

/* Wide/full media fills its track. */
.entry-content > .alignfull img,
.entry-content > .alignwide img,
.entry-content > .alignfull video,
.entry-content > .alignwide video,
.entry-content > .alignfull .wp-block-cover,
.entry-content > .alignwide .wp-block-cover {
	width: 100%;
}

.entry-content iframe,
.entry-content embed,
.entry-content object {
	max-width: 100%;
}

/* Inline alignment inside flowing content (basic, float-based). */
.entry-content .alignleft {
	float: left;
	margin-inline-end: var(--space-4);
	margin-block-end: var(--space-2);
}

.entry-content .alignright {
	float: right;
	margin-inline-start: var(--space-4);
	margin-block-end: var(--space-2);
}

.entry-content .aligncenter {
	margin-inline: auto;
}

/* Direct grid children can't float — align them within the content track. */
.entry-content > .alignleft {
	justify-self: start;
}

.entry-content > .alignright {
	justify-self: end;
}

.entry-content > .aligncenter {
	justify-self: center;
}

/* Content-width band: aligns entry header/meta/footer, post nav and comments
   with the grid's content track on block-content templates. */
.strc-content-width {
	max-width: calc(var(--measure) + (var(--container-pad) * 2));
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* ==========================================================================
   Components
   ========================================================================== */

/* --------------------------------------------------------------------------
   Button — reusable action component (.strc-button)
   Variants: (default = primary) --secondary, --outline, --ghost.
   Sizes:    (default) --sm, --lg.   Modifier: --block (full width).
   Works on <button> and <a>; supports a leading strc_icon() via the gap.
   -------------------------------------------------------------------------- */

.strc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	border: 1px solid transparent;
	border-radius: 0; /* sharp corners, matching the theme's flat aesthetic */
	background: var(--action-primary);
	color: var(--action-on-primary);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.strc-button:hover {
	background: var(--action-primary-hover);
	color: var(--action-on-primary);
}

.strc-button:active {
	background: var(--action-primary-pressed);
}

/* Secondary */
.strc-button--secondary {
	background: var(--action-secondary);
	color: var(--action-on-secondary);
}

.strc-button--secondary:hover {
	background: var(--action-secondary-hover);
	color: var(--action-on-secondary);
}

.strc-button--secondary:active {
	background: var(--action-secondary-pressed);
}

/* Outline */
.strc-button--outline {
	background: transparent;
	color: var(--action-on-secondary);
	border-color: var(--border-selected);
}

.strc-button--outline:hover {
	background: var(--action-secondary);
	color: var(--action-on-secondary);
}

.strc-button--outline:active {
	background: var(--action-secondary-pressed);
}

/* Ghost (text-only, tinted hover) */
.strc-button--ghost {
	background: transparent;
	color: var(--content-primary);
}

.strc-button--ghost:hover {
	background: var(--background-interactive-hover);
	color: var(--content-primary);
}

/* Sizes */
.strc-button--sm {
	padding: var(--space-2) var(--space-4);
}

.strc-button--lg {
	padding: var(--space-4) var(--space-6);
	font-size: var(--text-base);
}

/* Full-width */
.strc-button--block {
	display: flex;
	width: 100%;
}

/* Disabled (real attribute, ARIA, or class) */
.strc-button:disabled,
.strc-button[aria-disabled="true"],
.strc-button.is-disabled {
	background: var(--action-disabled);
	color: var(--action-on-disabled);
	border-color: transparent;
	cursor: not-allowed;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Accordion — native <details>/<summary> disclosure (.strc-accordion)
   Accessible and progressive with no JS; see strc_accordion() in template-tags.
   -------------------------------------------------------------------------- */

.strc-accordion {
	border-top: 1px solid var(--border-opaque);
}

.strc-accordions > .strc-accordion:last-child {
	border-bottom: 1px solid var(--border-opaque);
}

.strc-accordion__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-4) 0;
	font-size: var(--text-md);
	font-weight: var(--weight-medium);
	color: var(--content-primary);
	cursor: pointer;
	list-style: none; /* remove default disclosure marker */
}

/* Remove the default marker (Safari/older Chrome). */
.strc-accordion__header::-webkit-details-marker {
	display: none;
}

.strc-accordion__header .strc-icon {
	flex: none;
	transition: transform var(--transition-fast);
}

.strc-accordion[open] .strc-accordion__header .strc-icon {
	transform: rotate(180deg);
}

.strc-accordion__panel {
	padding-bottom: var(--space-4);
	color: var(--content-secondary);
}

/* --------------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------------- */

.site-header {
	position: relative;
	z-index: var(--z-header);
	background: var(--background-primary);
	border-bottom: 1px solid var(--border-opaque);
}

.site-header__inner {
	/* 3-column header: nav (left) | logo (centre) | actions (right). The equal
	   1fr side columns keep the centre column at the true page centre. */
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--space-4);
	padding-block: var(--space-3);
	/* Positioning context for the desktop mega panel (spans container width). */
	position: relative;
}

.site-header__nav {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	min-width: 0;
}

.site-header__brand {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
	display: flex;
	align-items: center;
}

.site-header__brand .site-title {
	margin: 0;
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
}

.site-header__brand a {
	color: var(--content-primary);
	text-decoration: none;
}

.site-header__brand .custom-logo {
	width: auto;
	max-height: var(--space-7);
}

.site-header__actions {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

/* Shared icon button (search / account / cart / toggles). */
.strc-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-2);
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--content-primary);
	text-decoration: none;
	cursor: pointer;
}

.strc-icon-button:hover {
	background: var(--background-interactive-hover);
}

/* Cart badge. */
.strc-cart {
	position: relative;
}

.strc-cart-badge {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(35%, -35%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--icon-md);
	height: var(--icon-md);
	padding-inline: var(--space-1);
	background: var(--action-primary);
	color: var(--action-on-primary);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	line-height: 1;
}

.strc-cart-badge.is-empty {
	display: none;
}

/* --------------------------------------------------------------------------
   Primary navigation — menu
   -------------------------------------------------------------------------- */

.strc-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.strc-menu__link {
	display: block;
	padding: var(--space-2) var(--space-3);
	color: var(--content-primary);
	text-decoration: none;
	font-weight: var(--weight-medium);
}

.strc-menu__link:hover {
	color: var(--content-secondary);
}

/* Submenus are output now but stay hidden until Phase 7 (mega menu) /
   Phase 8 (drill-down) wire their reveal behaviour. */
.strc-submenu {
	margin: 0;
	padding: 0;
	list-style: none;
	display: none;
}

/* Per-parent submenu toggle (scaffold; behaviour added in later phases). */
.strc-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-1);
	border: 0;
	background: transparent;
	color: var(--content-primary);
	cursor: pointer;
}

/* The off-canvas head (title + close) only appears in the mobile panel. */
.strc-primary-nav__head {
	display: none;
}

/* Mobile toggle hidden by default; shown only with JS, below desktop. */
.strc-nav-toggle {
	display: none;
}

/* --------------------------------------------------------------------------
   Below desktop (< 64rem)
   -------------------------------------------------------------------------- */

@media (max-width: 63.99rem) {
	/* With JS, the primary nav becomes an off-canvas panel. */
	.js .strc-nav-toggle {
		display: inline-flex;
	}

	.js .strc-primary-nav {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: var(--z-drawer);
		width: var(--drawer-width);
		background: var(--background-primary);
		/* Flex column: fixed head + a flex-filling level viewport. */
		display: flex;
		flex-direction: column;
		overflow: hidden;
		visibility: hidden;
		transform: translateX(-100%);
		transition: transform var(--transition-base), visibility var(--transition-base);
	}

	.js .strc-primary-nav.is-open {
		visibility: visible;
		transform: translateX(0);
	}

	/* Panel head (site menu label + close) stays put above the levels. */
	.js .strc-primary-nav__head {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: space-between;
		padding: var(--space-4);
	}

	.js .strc-primary-nav__title {
		font-weight: var(--weight-semibold);
	}

	/* Level viewport — clips the off-screen levels (no horizontal scroll). */
	.js .main-navigation {
		position: relative;
		flex: 1 1 auto;
		overflow: hidden;
	}

	/* Each level (root + every submenu) fills the viewport and slides. */
	.js .strc-menu,
	.js .strc-primary-nav .strc-submenu {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		position: absolute;
		inset: 0;
		padding: var(--space-4);
		background: var(--background-primary);
		overflow-y: auto;
		transition: transform var(--transition-base);
	}

	/* Root is the initial active level; submenus start off to the right. */
	.js .strc-menu {
		transform: translateX(0);
	}

	.js .strc-primary-nav .strc-submenu {
		transform: translateX(100%);
	}

	.js .strc-primary-nav .strc-submenu.is-active {
		transform: translateX(0);
	}

	/* Rows: label (navigates) and chevron (drills) are distinct tap targets. */
	.js .strc-menu > li,
	.js .strc-primary-nav .strc-submenu > li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-2);
	}

	.js .strc-menu__link {
		flex: 1 1 auto;
	}

	.js .strc-submenu-toggle {
		flex: none;
	}

	/* Reuse the existing chevron-down icon, rotated to point right (drill in). */
	.js .strc-submenu-toggle .strc-icon {
		transform: rotate(-90deg);
	}

	/* Injected per-level header: back button + current level title. */
	.js .strc-drill-head {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		margin-bottom: var(--space-3);
		padding-bottom: var(--space-3);
		border-bottom: 1px solid var(--border-opaque);
	}

	.js .strc-drill-back {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: var(--space-2);
		border: 0;
		background: transparent;
		color: var(--content-primary);
		border-radius: var(--radius-sm);
		cursor: pointer;
	}

	.js .strc-drill-title {
		font-weight: var(--weight-semibold);
	}

	/* Without JS the menu stays in normal flow and reachable (wraps below). */
	.no-js .strc-primary-nav {
		flex-basis: 100%;
		order: 3;
	}

	@media (prefers-reduced-motion: reduce) {
		.js .strc-menu,
		.js .strc-primary-nav .strc-submenu {
			transition: none;
		}
	}
}

/* --------------------------------------------------------------------------
   Desktop (>= 64rem)
   -------------------------------------------------------------------------- */

@media (min-width: 64rem) {
	.strc-nav-toggle {
		display: none;
	}

	.strc-menu {
		display: flex;
		align-items: center;
		gap: var(--space-5);
	}

	/* Deeper submenu toggles aren't needed on desktop — grandchildren render
	   inside the open mega panel. The top-level toggle (a direct child of the
	   level-0 item, not inside a .strc-submenu) stays visible as the chevron. */
	.strc-submenu .strc-submenu-toggle {
		display: none;
	}

	/* The JS-injected drill-down level headers are mobile-only. */
	.strc-drill-head {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Overlay scrim + scroll lock (shared by drawers/panels)
   -------------------------------------------------------------------------- */

.strc-scrim {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	background: var(--background-scrim);
}

.strc-scroll-locked {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Header search reveal
   -------------------------------------------------------------------------- */

.strc-search-region {
	border-top: 1px solid var(--border-opaque);
	padding-block: var(--space-4);
}

/* Search form */
.strc-search-form {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.strc-search-form__field {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	padding: var(--space-3);
	font-size: var(--text-base);
	color: var(--content-primary);
	background: var(--background-primary);
	border: 1px solid var(--border-opaque);
	border-radius: 0;
}

/* Live results panel — scrolls if long; the product grid inside is styled by
   the global product-card rules (css/woocommerce.css). */
.strc-search-results {
	margin-top: var(--space-4);
	max-height: 70vh;
	overflow-y: auto;
}

.strc-search-results__status {
	margin: 0;
	padding: var(--space-3) 0;
	color: var(--content-tertiary);
}

@media (prefers-reduced-motion: reduce) {
	.js .strc-primary-nav {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Desktop mega menu (>= 64rem)
   Reveals the existing nested <ul> (from the walker) as a container-width
   dropdown panel. Desktop only — the < 64rem state is untouched.
   -------------------------------------------------------------------------- */

@media (min-width: 64rem) {
	/* No chevron on desktop — labels only. The mega panel opens on hover /
	   keyboard focus; the toggle stays in the DOM (display:none) so its
	   aria-expanded still drives the reveal, but it isn't shown. */
	.menu-item.has-children[data-level="0"] > .strc-submenu-toggle {
		display: none;
	}

	/* Mega panel = a top-level item's first submenu. */
	.menu-item.has-children[data-level="0"] > .strc-submenu[data-level="1"] {
		/* display:grid overrides the global `.strc-submenu { display:none }`;
		   visibility/opacity (not display) drive the reveal so it can animate. */
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); /* 12rem: column min-width, no token fits */
		gap: var(--space-5) var(--space-6);

		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: var(--z-dropdown);

		padding: var(--space-6) var(--container-pad);
		background: var(--background-primary);
		border: 1px solid var(--border-opaque);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-lg);

		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(calc(-1 * var(--space-2)));
		transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base);
	}

	/* Reveal — JS/AT path: driven by aria-expanded on the toggle (general
	   sibling of the panel). Works under .js for hover, focus, and click. */
	.menu-item.has-children[data-level="0"] > .strc-submenu-toggle[aria-expanded="true"] ~ .strc-submenu[data-level="1"] {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
	}

	/* Reveal — no-JS keyboard fallback only. Scoped to .no-js so that, when JS
	   is present, a focused toggle can still close the panel (otherwise
	   :focus-within would keep it open while the toggle holds focus). */
	.no-js .menu-item.has-children[data-level="0"]:focus-within > .strc-submenu[data-level="1"] {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
	}

	/* Column heading (level-1 link). */
	.menu-item[data-level="0"] > .strc-submenu[data-level="1"] > .menu-item > .strc-menu__link {
		padding-inline: 0;
		font-weight: var(--weight-medium);
		color: var(--content-primary);
	}

	/* Grandchildren (level-2) always shown inside the open panel. */
	.menu-item[data-level="0"] .strc-submenu[data-level="2"] {
		display: block;
		margin-top: var(--space-2);
	}

	.menu-item[data-level="0"] .strc-submenu[data-level="2"] > .menu-item > .strc-menu__link {
		padding-inline: 0;
		padding-block: var(--space-1);
		font-weight: var(--weight-regular);
		color: var(--content-secondary);
		border-radius: var(--radius-sm);
	}

	.menu-item[data-level="0"] .strc-submenu[data-level="2"] > .menu-item > .strc-menu__link:hover {
		color: var(--content-primary);
		background: var(--overlay-hover);
	}
}

@media (min-width: 64rem) and (prefers-reduced-motion: reduce) {
	.menu-item.has-children[data-level="0"] > .strc-submenu[data-level="1"] {
		transition: none;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Cart drawer (slide-out mini-cart)
   Right-side drawer built on WooCommerce's woocommerce_mini_cart(). Class-based
   selectors target Woo's markup, which survives its fragment replacement.
   -------------------------------------------------------------------------- */

.strc-cart-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: var(--z-drawer);
	width: var(--drawer-width);
	max-width: 100%;
	display: flex;
	flex-direction: column;
	background: var(--background-primary);
	visibility: hidden;
	transform: translateX(100%);
	transition: transform var(--transition-base), visibility var(--transition-base);
}

.strc-cart-drawer.is-open {
	visibility: visible;
	transform: translateX(0);
}

.strc-cart-drawer__header {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-4);
	border-bottom: 1px solid var(--border-opaque);
}

.strc-cart-drawer__title {
	margin: 0;
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
}

.strc-cart-drawer__body {
	flex: 1 1 auto;
	display: flex;
	min-height: 0;
	overflow: hidden;
}

/* Woo's mini-cart wrapper — persists across fragment replacement. */
.strc-cart-drawer .widget_shopping_cart_content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
}

/* Item list scrolls; totals + buttons stay pinned below it. */
.strc-cart-drawer ul.woocommerce-mini-cart {
	flex: 1 1 auto;
	overflow-y: auto;
	min-height: 0;
	margin: 0;
	padding: var(--space-4);
	list-style: none;
}

.strc-cart-drawer li.woocommerce-mini-cart-item {
	position: relative;
	padding: var(--space-3) 0;
	padding-right: var(--space-6); /* room for the remove × */
	border-bottom: 1px solid var(--border-opaque);
}

.strc-cart-drawer li.woocommerce-mini-cart-item a:not(.remove) {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--content-primary);
	text-decoration: none;
	font-weight: var(--weight-medium);
}

.strc-cart-drawer li.woocommerce-mini-cart-item img {
	width: var(--space-8);
	height: auto;
	aspect-ratio: var(--ratio-product);
	object-fit: cover;
	border-radius: var(--radius-sm);
}

.strc-cart-drawer li.woocommerce-mini-cart-item .quantity {
	display: block;
	margin-top: var(--space-1);
	color: var(--content-secondary);
	font-size: var(--text-sm);
}

.strc-cart-drawer .remove_from_cart_button {
	position: absolute;
	top: var(--space-3);
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--icon-md);
	height: var(--icon-md);
	color: var(--content-tertiary);
	font-size: var(--text-lg);
	line-height: 1;
	text-decoration: none;
	border-radius: var(--radius-full);
}

.strc-cart-drawer .remove_from_cart_button:hover {
	color: var(--status-danger);
	background: var(--overlay-hover);
}

/* Subtotal row (emphasised). */
.strc-cart-drawer .woocommerce-mini-cart__total {
	flex: none;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-4);
	border-top: 1px solid var(--border-opaque);
	font-weight: var(--weight-semibold);
}

.strc-cart-drawer .woocommerce-mini-cart__total .woocommerce-Price-amount {
	font-size: var(--text-lg);
}

/* Button footer (stays visible). */
.strc-cart-drawer .woocommerce-mini-cart__buttons {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-4);
	padding-top: 0;
}

.strc-cart-drawer .woocommerce-mini-cart__buttons .button {
	display: block;
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 0;
	border-radius: var(--radius-sm);
	font-weight: var(--weight-medium);
	text-align: center;
	text-decoration: none;
	/* Default = secondary action (e.g. View cart). */
	background: var(--action-secondary);
	color: var(--action-on-secondary);
}

.strc-cart-drawer .woocommerce-mini-cart__buttons .button:hover {
	background: var(--action-secondary-hover);
}

/* Checkout = primary action. */
.strc-cart-drawer .woocommerce-mini-cart__buttons .checkout {
	background: var(--action-primary);
	color: var(--action-on-primary);
}

.strc-cart-drawer .woocommerce-mini-cart__buttons .checkout:hover {
	background: var(--action-primary-hover);
}

/* Empty state. */
.strc-cart-drawer .woocommerce-mini-cart__empty-message {
	margin: 0;
	padding: var(--space-6) var(--space-4);
	color: var(--content-tertiary);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.strc-cart-drawer {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Core blocks (editor content) — on-brand via tokens
   -------------------------------------------------------------------------- */

/* Buttons — primary action. */
.wp-block-button__link {
	display: inline-block;
	padding: var(--space-3) var(--space-5);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: var(--action-primary);
	color: var(--action-on-primary);
	font-weight: var(--weight-medium);
	text-decoration: none;
	transition: background-color var(--transition-fast);
}

.wp-block-button__link:hover {
	background: var(--action-primary-hover);
	color: var(--action-on-primary);
}

.wp-block-button__link:active {
	background: var(--action-primary-pressed);
}

/* Outline / secondary button style. */
.wp-block-button.is-style-strc-outline .wp-block-button__link {
	background: transparent;
	color: var(--action-on-secondary);
	border-color: var(--border-selected);
}

.wp-block-button.is-style-strc-outline .wp-block-button__link:hover {
	background: var(--action-secondary);
	color: var(--action-on-secondary);
}

/* Cover — content reads white over the dim layer (native overlay untouched). */
.wp-block-cover {
	padding: var(--space-7) var(--space-5);
}

.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover h3,
.wp-block-cover h4,
.wp-block-cover h5,
.wp-block-cover h6,
.wp-block-cover p {
	color: var(--content-on-color);
	/* Subtle shadow holds white text legible over light images (covers the
	   Hero and Promo patterns). Soft, not a halo. */
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Hero style — 16:9 on tablet+, legible min-height on mobile. */
.wp-block-cover.is-style-strc-hero {
	align-items: center;
	justify-content: center;
	min-height: 28rem; /* hero min-height (mobile): keeps headline + CTA legible; layout literal */
	text-align: center;
}

@media (min-width: 48rem) {
	.wp-block-cover.is-style-strc-hero {
		min-height: 0;
		aspect-ratio: var(--ratio-hero);
		/* Cap on ultrawide so 16:9 doesn't produce an enormous hero; the cover
		   image still crops via its object-fit. */
		max-height: 80vh;
	}
}

/* Group / Columns. */
.wp-block-group.has-background,
.wp-block-columns.has-background {
	padding: var(--space-6);
	border-radius: var(--radius-md);
}

.wp-block-group.is-style-strc-surface {
	padding: var(--space-7) var(--space-6);
	background: var(--surface);
	border-radius: var(--radius-md);
}

/* Image. */
.wp-block-image.is-style-strc-rounded img {
	border-radius: var(--radius-md);
}

.wp-block-image figcaption {
	margin-top: var(--space-2);
	color: var(--content-tertiary);
	font-size: var(--text-sm);
	text-align: center;
}

/* Quote / pullquote — accent rule via the medium-divider token. */
.wp-block-quote {
	border-left: var(--space-1) solid var(--border-strong);
	padding-left: var(--space-5);
	color: var(--content-secondary);
}

.wp-block-quote cite {
	color: var(--content-tertiary);
	font-size: var(--text-sm);
	font-style: normal;
}

.wp-block-pullquote {
	border-top: var(--space-1) solid var(--border-strong);
	border-bottom: var(--space-1) solid var(--border-strong);
	padding: var(--space-6) 0;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Touch targets — comfortable hit areas on coarse pointers only.
   Desktop (fine pointer) sizing is left untouched.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
	.strc-icon-button,
	.strc-submenu-toggle,
	.strc-drill-back {
		min-width: var(--tap-target);
		min-height: var(--tap-target);
	}

	.strc-menu__link {
		display: flex;
		align-items: center;
		min-height: var(--tap-target);
	}
}