/* =============================================================================
   SIM THEME — main.css
   Sports Island Mallorca — premium clean WooCommerce theme.

   Design language: Salomon-inspired (mountain-sport premium minimalist)
   × Hudy-inspired e-commerce structure.

   Philosophy:
   - Mobile-first. Default styles = mobile, scale up via min-width queries.
   - Token-driven. Spacing, type, color all flow from CSS variables.
   - 8px grid. All spacing is a multiple of 4 (half-step) or 8.
   - Borders, not shadows. Salomon look = hairline 1px lines on whitespace.
   - Roboto everywhere. 900 for display, 700 for headings, 500 for UI labels.

   Sections:
     1.  Tokens (custom properties)
     2.  Reset / normalize
     3.  Typography
     4.  Layout primitives (container, grid utilities)
     5.  Base components (button, form, badge, accordion)
     6.  Topbar
     7.  Site header
     8.  Hero
     9.  Section heads
     10. Product cards & grids
     11. Footer
     12. WooCommerce general overrides
     13. Utilities
     14. Responsive (tablet ≥768, desktop ≥1024, large ≥1440)
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. TOKENS
   ----------------------------------------------------------------------------- */

:root {

	/* Colors — monochrome + single accent.
	   Naming: --c-{role}-{shade}. Use semantic vars where possible. */
	--c-bg:           #ffffff;
	--c-ink:          #0a0a0a;   /* primary text */
	--c-ink-soft:     #2a2a2a;   /* slightly softer body text */
	--c-muted:        #6b6b6b;   /* secondary text, captions */
	--c-mute-soft:    #a8a8a8;   /* tertiary, disabled-ish */
	--c-line:         #e5e5e5;   /* borders, hairlines */
	--c-line-soft:    #f0f0f0;   /* subtle dividers */
	--c-surface:      #f5f5f5;   /* card bg, hover bg */
	--c-surface-2:    #fafafa;   /* lightest surface */

	--c-accent:       #e63946;   /* CTAs, sale flash, brand accent */
	--c-accent-ink:   #ffffff;   /* text on accent */
	--c-accent-hover: #c52936;   /* darker accent for hover */

	--c-success:      #2a9d8f;
	--c-warning:      #e9b949;
	--c-danger:       #d62828;

	/* Inverted (dark sections — footer, topbar) */
	--c-inv-bg:       #0a0a0a;
	--c-inv-ink:      #ffffff;
	--c-inv-muted:    rgba(255,255,255,0.65);
	--c-inv-line:     rgba(255,255,255,0.15);


	/* Typography — Roboto family.
	   System font stack as fallback before Roboto loads. */
	--ff-base: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
	           Helvetica, Arial, sans-serif;

	/* Type scale — fluid clamps for fluid sizes. */
	--text-xs:      11px;
	--text-sm:      13px;
	--text-base:    15px;          /* body */
	--text-md:      16px;
	--text-lg:      18px;
	--text-xl:      clamp(20px, 1.6vw, 24px);
	--text-2xl:     clamp(24px, 2.2vw, 32px);
	--text-3xl:     clamp(28px, 3vw, 40px);     /* h2 section */
	--text-4xl:     clamp(36px, 4vw, 56px);     /* h1 page */
	--text-display: clamp(48px, 8vw, 112px);    /* hero claim */

	/* Weights */
	--fw-regular: 400;
	--fw-medium:  500;
	--fw-bold:    700;
	--fw-black:   900;

	/* Line heights */
	--lh-tight: 1.05;     /* headings */
	--lh-snug:  1.25;
	--lh-base:  1.55;     /* body */
	--lh-loose: 1.75;

	/* Letter spacing */
	--ls-tight:    -0.02em;
	--ls-tighter:  -0.04em;
	--ls-normal:   0;
	--ls-wide:     0.08em;     /* UI labels */
	--ls-wider:    0.15em;     /* badges, kickers */
	--ls-widest:   0.25em;     /* small caps eyebrows */


	/* Spacing — 4px base, 8px-grid multiples */
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-5:  20px;
	--space-6:  24px;
	--space-7:  32px;
	--space-8:  40px;
	--space-9:  48px;
	--space-10: 64px;
	--space-11: 80px;
	--space-12: 96px;
	--space-13: 128px;
	--space-14: 160px;

	/* Section padding — adapts via media queries */
	--section-y:  var(--space-9);
	--gutter:     var(--space-4);  /* horizontal page padding (mobile) */


	/* Layout */
	--container-max:   1440px;
	--content-max:     1280px;     /* prose / forms */
	--narrow-max:      720px;      /* article body */


	/* Borders & radius */
	--bw:           1px;
	--bw-thick:     2px;
	--radius-sm:    2px;
	--radius-md:    4px;
	--radius-lg:    8px;
	/* No --radius-xl on purpose — Salomon is hard-edged. */


	/* Elevation — used sparingly. Prefer borders. */
	--shadow-sm:    0 1px 2px rgba(0,0,0,0.04);
	--shadow-md:    0 4px 12px rgba(0,0,0,0.06);
	--shadow-lg:    0 12px 32px rgba(0,0,0,0.10);


	/* Z-index scale */
	--z-base:       1;
	--z-elevated:   10;
	--z-sticky:     100;
	--z-drawer:     200;
	--z-overlay:    300;
	--z-modal:      400;
	--z-toast:      500;


	/* Motion */
	--ease:           cubic-bezier(0.2, 0, 0.2, 1);
	--ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in:        cubic-bezier(0.4, 0, 1, 1);
	--dur-fast:       0.15s;
	--dur-base:       0.25s;
	--dur-slow:       0.4s;


	/* Forms */
	--input-h:        44px;       /* touch target minimum */
	--input-h-lg:     52px;
	--input-px:       14px;


	/* Header height — referenced by sticky offsets, hero */
	--header-h:       64px;
}


/* -----------------------------------------------------------------------------
   2. RESET / NORMALIZE
   ----------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	-moz-tab-size: 4;
	tab-size: 4;
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-h);
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--ff-base);
	font-size: var(--text-base);
	font-weight: var(--fw-regular);
	line-height: var(--lh-base);
	color: var(--c-ink);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

svg {
	flex-shrink: 0;        /* don't squish icons in flex containers */
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease),
	            opacity var(--dur-fast) var(--ease);
}

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

button {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

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

ul,
ol {
	list-style: none;
	padding: 0;
	margin: 0;
}

hr {
	border: 0;
	border-top: var(--bw) solid var(--c-line);
	margin: var(--space-7) 0;
}

::selection {
	background: var(--c-ink);
	color: var(--c-bg);
}

:focus-visible {
	outline: 2px solid var(--c-ink);
	outline-offset: 2px;
}

/* Reduce motion preference — respect users who request it. */
@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;
	}
}


/* -----------------------------------------------------------------------------
   3. TYPOGRAPHY
   ----------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ff-base);
	font-weight: var(--fw-black);
	letter-spacing: var(--ls-tight);
	line-height: var(--lh-tight);
	color: var(--c-ink);
	margin: 0 0 var(--space-4);
}

h1 { font-size: var(--text-4xl); letter-spacing: var(--ls-tighter); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); font-weight: var(--fw-bold); }
h4 { font-size: var(--text-xl);  font-weight: var(--fw-bold); }
h5 { font-size: var(--text-lg);  font-weight: var(--fw-bold); }
h6 { font-size: var(--text-md);  font-weight: var(--fw-bold); }

p {
	margin: 0 0 var(--space-4);
}

p:last-child { margin-bottom: 0; }

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

small { font-size: var(--text-sm); color: var(--c-muted); }

/* "Eyebrow" / kicker label above headings */
.eyebrow {
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: var(--space-3);
}

/* Lead paragraph */
.lead {
	font-size: var(--text-lg);
	line-height: var(--lh-base);
	color: var(--c-ink-soft);
}

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

.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--c-ink);
	color: var(--c-inv-ink);
	padding: var(--space-3) var(--space-4);
	z-index: var(--z-toast);
}

.skip-link:focus { top: 0; }


/* -----------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   ----------------------------------------------------------------------------- */

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

/* Container — centers content, applies horizontal gutter. */
.container,
.u-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--narrow-max); }
.container--content { max-width: var(--content-max); }

/* Section spacing */
.section {
	padding-block: var(--section-y);
}

.section--tight { padding-block: var(--space-7); }
.section--loose { padding-block: var(--space-11); }


/* -----------------------------------------------------------------------------
   5. BASE COMPONENTS
   ----------------------------------------------------------------------------- */

/* --- Buttons --- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--input-h);
	padding: 0 var(--space-6);
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	border: var(--bw) solid transparent;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition:
		background-color var(--dur-base) var(--ease),
		color            var(--dur-base) var(--ease),
		border-color     var(--dur-base) var(--ease),
		transform        var(--dur-fast) var(--ease);
	white-space: nowrap;
	user-select: none;
}

.btn:active { transform: translateY(1px); }

/* Primary — solid black */
.btn--primary {
	background: var(--c-ink);
	color: var(--c-bg);
	border-color: var(--c-ink);
}

.btn--primary:hover {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-accent-ink);
}

/* Secondary — outlined */
.btn--secondary {
	background: transparent;
	color: var(--c-ink);
	border-color: var(--c-ink);
}

.btn--secondary:hover {
	background: var(--c-ink);
	color: var(--c-bg);
}

/* Ghost — no border, just text + arrow style */
.btn--ghost {
	background: transparent;
	color: var(--c-ink);
	border-color: transparent;
	padding-inline: var(--space-3);
}

.btn--ghost:hover {
	color: var(--c-accent);
}

/* Accent — solid red, for sale CTAs */
.btn--accent {
	background: var(--c-accent);
	color: var(--c-accent-ink);
	border-color: var(--c-accent);
}

.btn--accent:hover {
	background: var(--c-accent-hover);
	border-color: var(--c-accent-hover);
}

/* Sizes */
.btn--lg {
	min-height: var(--input-h-lg);
	padding-inline: var(--space-8);
	font-size: var(--text-md);
}

.btn--sm {
	min-height: 36px;
	padding-inline: var(--space-4);
	font-size: var(--text-xs);
}

.btn--block {
	display: flex;
	width: 100%;
}

/* Icon button (just an SVG, used in header/cart/forms) */
.btn--icon {
	min-height: 44px;
	min-width: 44px;
	padding: 0;
	border-radius: var(--radius-md);
}

/* Arrow nudge on hover for buttons with icon */
.btn svg { transition: transform var(--dur-base) var(--ease); }
.btn:hover svg { transform: translateX(3px); }


/* --- Form elements --- */

.field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-5);
}

.field__label {
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-ink);
}

.field__hint {
	font-size: var(--text-sm);
	color: var(--c-muted);
}

.field__error {
	font-size: var(--text-sm);
	color: var(--c-danger);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
select,
textarea,
.input {
	width: 100%;
	min-height: var(--input-h);
	padding: 0 var(--input-px);
	font-family: inherit;
	font-size: var(--text-md);
	color: var(--c-ink);
	background: var(--c-bg);
	border: var(--bw) solid var(--c-line);
	border-radius: var(--radius-md);
	transition:
		border-color var(--dur-fast) var(--ease),
		background   var(--dur-fast) var(--ease);
}

textarea,
.textarea {
	min-height: 120px;
	padding: var(--space-3) var(--input-px);
	line-height: var(--lh-base);
	resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
	border-color: var(--c-mute-soft);
}

input:focus,
select:focus,
textarea:focus {
	outline: 0;
	border-color: var(--c-ink);
}

input::placeholder,
textarea::placeholder {
	color: var(--c-mute-soft);
}

input[disabled],
textarea[disabled] {
	background: var(--c-surface);
	cursor: not-allowed;
}

/* Native select arrow replacement */
select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%230a0a0a' stroke-width='1.5'%3E%3Cpolyline points='1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-4) center;
	padding-right: var(--space-9);
}

/* Checkbox & radio — minimal restyle, keep system feel */
input[type="checkbox"],
input[type="radio"] {
	min-height: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--c-ink);
	cursor: pointer;
}

.checkbox-row,
.radio-row {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	cursor: pointer;
	user-select: none;
}


/* --- Badges --- */

.badge {
	display: inline-flex;
	align-items: center;
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	padding: var(--space-1) var(--space-3);
	text-transform: uppercase;
	background: var(--c-ink);
	color: var(--c-bg);
	border-radius: var(--radius-sm);
	line-height: 1.2;
}

.badge--sale    { background: var(--c-accent); }
.badge--new     { background: var(--c-bg);   color: var(--c-ink);  border: var(--bw) solid var(--c-ink); }
.badge--soldout { background: var(--c-mute-soft); }
.badge--success { background: var(--c-success); }


/* --- Accordion --- */

.accordion__item {
	border-bottom: var(--bw) solid var(--c-line);
}

.accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--space-5) 0;
	font-size: var(--text-md);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	text-align: left;
	background: none;
	color: var(--c-ink);
}

.accordion__trigger::after {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-left: var(--space-4);
	transition: transform var(--dur-base) var(--ease);
}

.accordion__trigger[aria-expanded="true"]::after {
	transform: rotate(-135deg);
}

.accordion__panel {
	padding: 0 0 var(--space-5);
	font-size: var(--text-md);
	line-height: var(--lh-base);
	color: var(--c-ink-soft);
}

.accordion__panel[hidden] { display: none; }


/* -----------------------------------------------------------------------------
   6. TOPBAR
   ----------------------------------------------------------------------------- */

.site-topbar {
	background: var(--c-inv-bg);
	color: var(--c-inv-ink);
	font-size: var(--text-xs);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
}

.site-topbar__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;            /* fall to multi-line on narrow screens */
	padding: var(--space-2) var(--gutter);
	max-width: var(--container-max);
	margin-inline: auto;
}

.site-topbar__promo {
	font-weight: var(--fw-medium);
	opacity: 0.92;
}

.site-topbar__right {
	display: flex;
	gap: var(--space-6);
	align-items: center;
}

/* Phone — keep promo, hide secondary store link, smaller type */
@media (max-width: 767px) {
	.site-topbar {
		font-size: 11px;
	}
	.site-topbar__promo {
		flex: 1 1 100%;
		text-align: center;
	}
	.site-topbar__right {
		flex: 1 1 100%;
		justify-content: center;
		gap: var(--space-4);
	}
	.site-topbar .topbar-link {
		display: none;            /* hide store link on mobile to declutter */
	}
}

.topbar-link {
	color: var(--c-inv-ink);
	opacity: 0.7;
}

.topbar-link:hover { opacity: 1; }

.lang-switch {
	display: flex;
	gap: var(--space-2);
}

.lang-switch a,
.lang-switch span {
	color: var(--c-inv-ink);
	opacity: 0.45;
	transition: opacity var(--dur-fast) var(--ease);
}

.lang-switch a:hover,
.lang-switch a.active,
.lang-switch span.active {
	opacity: 1;
	font-weight: var(--fw-bold);
}


/* -----------------------------------------------------------------------------
   7. SITE HEADER
   ----------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	background: var(--c-bg);
	border-bottom: var(--bw) solid var(--c-line);
	z-index: var(--z-sticky);
}

.site-header__inner {
	position: relative;     /* offset parent for mega-menu dropdowns */
	display: grid;
	grid-template-columns: auto 1fr auto;     /* mobile: hamburger | logo | actions */
	align-items: stretch;
	gap: var(--space-4);
	/* No padding-block: it would create a dead zone between the menu link
	   bottom and the dropdown's `top: 100%` anchor, breaking hover. The
	   header's vertical breathing room comes from min-height alone. */
	padding: 0 var(--gutter);
	max-width: var(--container-max);
	margin-inline: auto;
	min-height: var(--header-h);
}

/* Centre the non-menu items vertically (logo, action buttons) since the
   inner now stretches its grid items by default. */
.site-header__inner > .site-branding,
.site-header__inner > .site-actions,
.site-header__inner > .menu-toggle {
	align-self: center;
}

/* Primary nav (desktop only — hidden by default on mobile) */
.site-nav--primary {
	display: none;
}

/* Stretch the nav, ul, and li to the full header height so there's no
   "padding gap" between the bottom of the link text and the bottom of the
   header — that gap is dead space where neither <li>:hover nor .sub-menu:hover
   fires, and the dropdown closes the moment the cursor crosses it. With
   align-self: stretch all the way down, li bottom == header bottom, so the
   dropdown sits flush against a fully-hover-aware trigger. */
.site-nav--primary {
	align-self: stretch;
	height: 100%;
}

.nav-main {
	display: flex;
	align-items: stretch;
	height: 100%;
	gap: var(--space-7);
	margin: 0;
	padding: 0;
}

.nav-main > li {
	display: flex;
	align-items: center;
}

.nav-main > li > a {
	color: var(--c-ink);
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	display: flex;
	align-items: center;
	height: 100%;          /* fills the full li height */
	padding: 0;            /* no internal padding — gap absorbed by li */
	position: relative;
}

.nav-main > li > a::after {
	content: '';
	position: absolute;
	left: 0;
	right: auto;
	/* Position the underline ~6px below the text baseline. The link is
	   flex-centered to fill the full header height, so we anchor relative
	   to the vertical middle and offset down by half the line-height plus
	   a bit. */
	top: calc(50% + 0.65em);
	width: 0;
	height: 1.5px;
	background: var(--c-ink);
	transition: width var(--dur-slow) var(--ease);
}

.nav-main > li:hover > a::after,
.nav-main > li:focus-within > a::after { width: 100%; }


/* Branding (logo / wordmark) */
.site-branding {
	justify-self: center;
	text-align: center;
}

.site-logo,
.site-branding .custom-logo-link {
	display: inline-block;
	font-family: var(--ff-base);
	font-weight: var(--fw-black);
	font-size: var(--text-lg);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	line-height: 1;
}

.site-logo__name {
	display: block;
	font-weight: var(--fw-black);
}

.site-logo__tag {
	display: block;
	font-weight: var(--fw-regular);
	font-size: 9px;
	letter-spacing: var(--ls-widest);
	color: var(--c-muted);
	margin-top: var(--space-1);
	text-transform: uppercase;
}


/* Header actions (search, account, cart, hamburger) */
.site-actions {
	display: flex;
	justify-self: end;
	align-items: center;
	gap: var(--space-2);
}

.action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	width: 44px;
	height: 44px;
	color: var(--c-ink);
	border-radius: var(--radius-md);
	position: relative;
	transition: background var(--dur-fast) var(--ease);
}

.action-btn:hover {
	background: var(--c-surface);
}

/* Hide account button on mobile — only shown from tablet up. (We can't use
   .u-hidden-mobile here because its `display: revert` would clobber the
   inline-flex centering on the link.) */
@media (max-width: 767px) {
	.action-btn--account {
		display: none;
	}
}

.cart-count {
	position: absolute;
	top: 4px;
	right: 4px;
	background: var(--c-accent);
	color: var(--c-accent-ink);
	font-size: 10px;
	font-weight: var(--fw-bold);
	border-radius: 50%;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.cart-count[data-count="0"] { display: none; }

/* Hamburger button — mobile only */
.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--c-ink);
	border-radius: var(--radius-md);
}


/* -----------------------------------------------------------------------------
   7b. SITE HEADER — scrolled state (compact)
   ----------------------------------------------------------------------------- */

.site-header.is-scrolled {
	box-shadow: var(--shadow-sm);
}

/* Compact-on-scroll: shrink min-height instead of adding padding-block
   (padding-block would re-introduce the hover-gap problem). */
.site-header.is-scrolled .site-header__inner {
	min-height: calc(var(--header-h) - 8px);
}


/* -----------------------------------------------------------------------------
   7c. MEGA MENU (desktop hover dropdown)
   ----------------------------------------------------------------------------- */

/* Sub-menus hidden by default; shown on hover/focus on desktop only. */
.nav-main .sub-menu {
	display: none;
}

@media (min-width: 1024px) {

	.nav-main > li {
		position: relative;
	}

	/* The submenu sits flush below its trigger — no translateY animation,
	   because any vertical offset creates a transient hover gap that closes
	   the menu when the cursor crosses it. We animate with opacity only. */
	.nav-main > li > .sub-menu {
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		min-width: 280px;
		background: var(--c-bg);
		border: var(--bw) solid var(--c-line);
		border-radius: var(--radius-md);
		padding: var(--space-5);
		box-shadow: var(--shadow-md);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition:
			opacity    var(--dur-base) var(--ease),
			visibility 0s linear var(--dur-base);
		z-index: var(--z-elevated);
	}

	.nav-main > li:hover > .sub-menu,
	.nav-main > li:focus-within > .sub-menu {
		display: block;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(-50%);
		transition-delay: 0s;
	}

	.nav-main .sub-menu li {
		display: block;
	}

	.nav-main .sub-menu a {
		display: block;
		padding: var(--space-2) 0;
		font-size: var(--text-sm);
		font-weight: var(--fw-medium);
		letter-spacing: var(--ls-normal);
		text-transform: none;
		color: var(--c-ink-soft);
	}

	.nav-main .sub-menu a:hover,
	.nav-main .sub-menu a:focus {
		color: var(--c-accent);
	}

	/* Wide variant — full mega menu.
	   Triggered by either:
	     - .menu-mega       (added via SIM_Theme_Mega_Menu_Walker for new menus)
	     - .is-mega-menu    (legacy class from imported Botiga / SiteOrigin menus)

	   Anchored to .site-header__inner (which is position: relative) so the
	   dropdown spans the container width regardless of where the trigger
	   item sits in the row. Without this, leftmost items push the dropdown
	   off-screen. */
	.nav-main > li.menu-mega,
	.nav-main > li.is-mega-menu {
		position: static;
	}

	.nav-main > li.menu-mega > .sub-menu,
	.nav-main > li.is-mega-menu > .sub-menu {
		left: 0;
		right: 0;
		top: 100%;
		transform: none;       /* mega menu sits flush, no vertical animation */
		width: auto;
		max-width: none;
		min-width: 0;
		padding: var(--space-7) var(--space-6);
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: var(--space-6) var(--space-7);
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}

	.nav-main > li.menu-mega:hover > .sub-menu,
	.nav-main > li.menu-mega:focus-within > .sub-menu,
	.nav-main > li.is-mega-menu:hover > .sub-menu,
	.nav-main > li.is-mega-menu:focus-within > .sub-menu {
		transform: none;
	}

	/* Mega menu sub-menu items: heading style for first level, links below.
	   When a column has children (is-mega-menu-column with sub-menu), show
	   the column label as a heading. */
	.nav-main .is-mega-menu .sub-menu .menu-item-has-children > a,
	.nav-main .menu-mega .sub-menu .menu-item-has-children > a {
		font-size: var(--text-xs);
		font-weight: var(--fw-bold);
		letter-spacing: var(--ls-wide);
		text-transform: uppercase;
		color: var(--c-ink);
		padding-bottom: var(--space-2);
		border-bottom: var(--bw) solid var(--c-line);
		margin-bottom: var(--space-2);
	}

	/* Inner sub-menus inside mega menu — render as flat list of links. */
	.nav-main .is-mega-menu .sub-menu .sub-menu,
	.nav-main .menu-mega .sub-menu .sub-menu {
		display: block;
		position: static;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		padding: 0;
		border: 0;
		box-shadow: none;
		min-width: 0;
		background: transparent;
	}
}


/* -----------------------------------------------------------------------------
   7d. DRAWER (off-canvas mobile menu)
   ----------------------------------------------------------------------------- */

.drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
	visibility: hidden;
	pointer-events: none;
}

.drawer[aria-hidden="false"] {
	visibility: visible;
	pointer-events: auto;
}

.drawer__backdrop {
	position: absolute;
	inset: 0;
	z-index: 1;     /* below panel — clicks on panel content must reach the panel */
	background: rgba(0, 0, 0, 0.5);
	border: 0;
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease);
}

.drawer[aria-hidden="false"] .drawer__backdrop {
	opacity: 1;
}

.drawer__panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 2;     /* above backdrop so close button & content are clickable */
	width: min(86vw, 380px);
	background: var(--c-bg);
	color: var(--c-ink);
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform var(--dur-base) var(--ease-out);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.drawer[aria-hidden="false"] .drawer__panel {
	transform: translateX(0);
}

.drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) var(--space-5);
	border-bottom: var(--bw) solid var(--c-line);
}

.drawer__title {
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
}

.drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: calc(var(--space-3) * -1);
	color: var(--c-ink);
}

.drawer__close:hover {
	color: var(--c-accent);
}

.drawer__nav {
	flex: 1;
	padding: var(--space-3) 0;
}

.drawer-menu li {
	border-bottom: var(--bw) solid var(--c-line-soft);
}

.drawer-menu li:last-child {
	border-bottom: 0;
}

.drawer-menu a {
	display: block;
	padding: var(--space-4) var(--space-5);
	font-size: var(--text-md);
	font-weight: var(--fw-medium);
	color: var(--c-ink);
}

.drawer-menu a:hover,
.drawer-menu a:focus {
	background: var(--c-surface);
	color: var(--c-accent);
}

.drawer-menu .sub-menu {
	display: block;
	background: var(--c-surface-2);
	padding: var(--space-2) 0;
}

.drawer-menu .sub-menu a {
	padding-left: var(--space-8);
	font-size: var(--text-sm);
	font-weight: var(--fw-regular);
	color: var(--c-ink-soft);
}

.drawer__foot {
	padding: var(--space-5);
	border-top: var(--bw) solid var(--c-line);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.drawer__action {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-ink);
}

.drawer__action:hover {
	color: var(--c-accent);
}

.drawer__foot .lang-switch {
	gap: var(--space-3);
}

.drawer__foot .lang-switch a,
.drawer__foot .lang-switch span {
	color: var(--c-muted);
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.drawer__foot .lang-switch a.active,
.drawer__foot .lang-switch span.active {
	color: var(--c-ink);
}


/* -----------------------------------------------------------------------------
   7d2. MINI CART DRAWER
   Built on the same .drawer foundation; right-side variant.
   ----------------------------------------------------------------------------- */

.mini-cart .drawer__panel {
	width: min(92vw, 420px);
}

.mini-cart__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: var(--space-5);
	overflow-y: auto;
}

/* Empty cart message */
.mini-cart .woocommerce-mini-cart__empty-message {
	font-size: var(--text-md);
	color: var(--c-muted);
	text-align: center;
	padding: var(--space-9) 0;
}

/* Cart items */
.mini-cart ul.cart_list,
.mini-cart .woocommerce-mini-cart {
	flex: 1;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
}

.mini-cart ul.cart_list li,
.mini-cart .woocommerce-mini-cart li {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	column-gap: var(--space-3);
	padding: var(--space-4) 0;
	border-bottom: var(--bw) solid var(--c-line);
	position: relative;
	align-items: start;
}

.mini-cart ul.cart_list li img,
.mini-cart .woocommerce-mini-cart li img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	background: var(--c-surface);
	margin: 0;
	float: none;
}

.mini-cart ul.cart_list li a:not(.remove),
.mini-cart .woocommerce-mini-cart li a:not(.remove) {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	color: var(--c-ink);
	line-height: var(--lh-snug);
	margin-bottom: var(--space-1);
}

.mini-cart ul.cart_list li a:hover {
	color: var(--c-accent);
}

.mini-cart .quantity {
	font-size: var(--text-xs);
	color: var(--c-muted);
	letter-spacing: var(--ls-wide);
}

.mini-cart .quantity .amount {
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}

/* Variation list inside mini cart */
.mini-cart .variation,
.mini-cart dl.variation {
	font-size: var(--text-xs);
	color: var(--c-muted);
	margin: var(--space-1) 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-2);
}

.mini-cart .variation dt,
.mini-cart .variation dd {
	margin: 0;
	display: inline;
}

.mini-cart .variation dt::after { content: ':'; margin-right: var(--space-1); }

/* Remove button */
.mini-cart .remove,
.mini-cart .remove_from_cart_button {
	position: static !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-size: 18px !important;
	color: var(--c-muted);
	background: var(--c-surface) !important;
	border-radius: 50% !important;
	font-weight: var(--fw-bold) !important;
	line-height: 1 !important;
	text-decoration: none !important;
	grid-column: 3;
	grid-row: 1;
}

.mini-cart .remove:hover,
.mini-cart .remove_from_cart_button:hover {
	background: var(--c-accent) !important;
	color: var(--c-bg) !important;
}

/* Subtotal + buttons (footer) */
.mini-cart .total,
.mini-cart .woocommerce-mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	font-size: var(--text-md);
	font-weight: var(--fw-bold);
	padding: var(--space-4) 0;
	border-top: var(--bw) solid var(--c-line);
	margin: 0;
}

.mini-cart .total strong {
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-muted);
}

.mini-cart .total .amount,
.mini-cart .total .woocommerce-Price-amount {
	font-size: var(--text-lg);
	color: var(--c-ink);
}

.mini-cart .buttons,
.mini-cart .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding-top: var(--space-3);
}

.mini-cart .buttons .button,
.mini-cart .woocommerce-mini-cart__buttons .button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--input-h);
	padding: 0 var(--space-5);
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	border-radius: var(--radius-sm);
	transition: background var(--dur-base) var(--ease);
}

.mini-cart .buttons .button.wc-forward:not(.checkout) {
	background: var(--c-bg);
	color: var(--c-ink);
	border: var(--bw) solid var(--c-ink);
}

.mini-cart .buttons .button.wc-forward:not(.checkout):hover {
	background: var(--c-ink);
	color: var(--c-bg);
}

.mini-cart .buttons .checkout,
.mini-cart .checkout {
	background: var(--c-ink);
	color: var(--c-bg);
	border: var(--bw) solid var(--c-ink);
}

.mini-cart .buttons .checkout:hover,
.mini-cart .checkout:hover {
	background: var(--c-accent);
	border-color: var(--c-accent);
}


/* -----------------------------------------------------------------------------
   7e. SEARCH OVERLAY (full-screen)
   ----------------------------------------------------------------------------- */

.search-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	visibility: hidden;
	opacity: 0;
	transition:
		opacity    var(--dur-base) var(--ease),
		visibility 0s linear var(--dur-base);
}

.search-overlay[aria-hidden="false"] {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

.search-overlay__inner {
	max-width: 880px;
	margin-inline: auto;
	padding: var(--space-9) var(--gutter);
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
}

.search-overlay__close {
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--c-ink);
	border-radius: var(--radius-md);
}

.search-overlay__close:hover {
	background: var(--c-surface);
	color: var(--c-accent);
}

.search-overlay__form {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	border-bottom: var(--bw-thick) solid var(--c-ink);
	padding-bottom: var(--space-3);
}

.search-overlay__icon {
	flex-shrink: 0;
	color: var(--c-ink);
}

.search-overlay__input {
	flex: 1;
	min-height: 0;
	padding: var(--space-3) 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: clamp(20px, 3vw, 28px);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
}

.search-overlay__input:hover,
.search-overlay__input:focus {
	border: 0;
	background: transparent;
	outline: 0;
}

.search-overlay__input::placeholder {
	color: var(--c-mute-soft);
	font-weight: var(--fw-regular);
}

.search-overlay__submit {
	flex-shrink: 0;
}

@media (max-width: 767px) {
	.search-overlay__submit {
		display: none;     /* mobile: rely on enter key */
	}
	.search-overlay__inner {
		padding-top: var(--space-6);
		gap: var(--space-5);
	}
}


/* -----------------------------------------------------------------------------
   7f. BODY SCROLL LOCK (when drawer / overlay open)
   ----------------------------------------------------------------------------- */

body.has-overlay-open {
	overflow: hidden;
}


/* -----------------------------------------------------------------------------
   8. HERO
   ----------------------------------------------------------------------------- */

.hero {
	position: relative;
	min-height: 80vh;
	overflow: hidden;
	background: var(--c-inv-bg);
	color: var(--c-inv-ink);
	display: flex;
}

.hero__bg {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.20) 50%, rgba(0,0,0,0.65) 100%),
		var(--c-ink-soft);
	background-size: cover;
	background-position: center;
}

.hero__content {
	position: relative;
	z-index: var(--z-base);
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* Bottom padding accounts for the CTA height (~52px) plus iOS safe-area
	   inset on notched devices, so the CTA never sits under the home bar. */
	padding:
		var(--space-9)
		var(--gutter)
		calc(var(--space-9) + env(safe-area-inset-bottom, 0px));
}

.hero__tag {
	font-size: var(--text-xs);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	margin-bottom: var(--space-5);
	opacity: 0.92;
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
}

.hero__tag::before {
	content: '';
	width: 32px;
	height: 1.5px;
	background: var(--c-accent);
}

.hero__title {
	font-size: var(--text-display);
	font-weight: var(--fw-black);
	line-height: 0.94;
	letter-spacing: var(--ls-tighter);
	margin: 0 0 var(--space-7);
	max-width: 14ch;
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}

/* Phone — clamp tighter so very long words don't bleed off-screen */
@media (max-width: 480px) {
	.hero__title {
		font-size: clamp(36px, 11vw, 56px);
		line-height: 1.0;
	}
}

.hero__title em {
	font-style: normal;
	color: var(--c-accent);
}

.hero__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-5);
}

.hero__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	background: var(--c-bg);
	color: var(--c-ink);
	padding: var(--space-4) var(--space-7);
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	border-radius: var(--radius-sm);
	transition: all var(--dur-base) var(--ease);
}

.hero__cta:hover {
	background: var(--c-accent);
	color: var(--c-accent-ink);
}

.hero__cta svg { transition: transform var(--dur-base) var(--ease); }
.hero__cta:hover svg { transform: translateX(6px); }

.hero__info {
	font-size: var(--text-sm);
	letter-spacing: var(--ls-wide);
	line-height: var(--lh-base);
	max-width: 320px;
	opacity: 0.85;
	margin: 0;
}


/* -----------------------------------------------------------------------------
   9. SECTION HEADS
   ----------------------------------------------------------------------------- */

.home-section {
	padding: var(--section-y) var(--gutter);
	max-width: var(--container-max);
	margin-inline: auto;
}

.section-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	margin-bottom: var(--space-7);
	border-bottom: var(--bw) solid var(--c-line);
	padding-bottom: var(--space-5);
}

.section-head__label {
	font-size: var(--text-xs);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--c-muted);
	font-weight: var(--fw-bold);
	margin-bottom: var(--space-1);
}

.section-head__title {
	font-size: var(--text-3xl);
	font-weight: var(--fw-black);
	letter-spacing: var(--ls-tighter);
	line-height: var(--lh-tight);
	margin: 0;
}

.section-head__link {
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	border-bottom: 1.5px solid var(--c-ink);
	padding-bottom: var(--space-1);
	white-space: nowrap;
	margin-top: var(--space-2);
}

.section-head__link:hover {
	color: var(--c-accent);
	border-color: var(--c-accent);
}


/* -----------------------------------------------------------------------------
   10. PRODUCT CARDS & GRIDS
   ----------------------------------------------------------------------------- */

/* Product grids — 1 col on small mobile, 2 on phablet+, 4 on desktop.
   Override WC's default float-based layout (`li.product { float: left; }`)
   via grid display, which removes the floats automatically.

   IMPORTANT: only target the <ul class="products"> grid container, NOT
   <section class="related products"> wrappers. The latter share the
   `.products` class but also contain a heading; gridding them collapses
   the heading and products into adjacent grid cells. */
ul.products,
.woocommerce ul.products,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6 {
	display: grid;
	grid-template-columns: 1fr;          /* phone: 1 col */
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products li.product,
ul.products li.product {
	float: none;          /* kill WC's default float */
	width: 100%;
	max-width: 360px;     /* cap card size on wide viewports / sparse grids */
	margin: 0;
	clear: none;
}

/* Sparse grids — a single result on a category page would otherwise sit
   forlorn in column 1 of 4. Span across and centre it. The :nth-last-child
   pattern catches "only one product" without needing :has() support. */
.woocommerce ul.products li.product:only-child,
ul.products li.product:only-child {
	grid-column: 1 / -1;
	justify-self: center;
}

.product-card {
	display: block;
}

.product-card__link {
	display: block;
	color: var(--c-ink);
}

.product-card__media {
	position: relative;
	aspect-ratio: 1;
	background: var(--c-surface);
	overflow: hidden;
	margin-bottom: var(--space-3);
}

.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}

.product-card:hover .product-card__media img,
.product-card:focus-within .product-card__media img {
	transform: scale(1.04);
}

.product-card__badges {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	z-index: var(--z-elevated);
}

.product-card__quick {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--c-ink);
	color: var(--c-inv-ink);
	text-align: center;
	padding: var(--space-3);
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	transform: translateY(100%);
	transition: transform var(--dur-base) var(--ease);
}

.product-card:hover .product-card__quick,
.product-card:focus-within .product-card__quick {
	transform: translateY(0);
}

/* Touch devices have no hover state — surface the quick-view affordance
   permanently so customers know the whole card is tappable. */
@media (hover: none) {
	.product-card__quick {
		transform: translateY(0);
	}
}

.product-card__brand {
	font-size: var(--text-xs);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--c-muted);
	font-weight: var(--fw-bold);
	margin-bottom: var(--space-1);
}

.product-card__title {
	font-family: var(--ff-base);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-normal);
	line-height: var(--lh-snug);
	margin: 0 0 var(--space-1);
	color: var(--c-ink);
}

.product-card__price {
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
}

.product-card__price del {
	color: var(--c-mute-soft);
	font-weight: var(--fw-regular);
	margin-right: var(--space-2);
}

.product-card__price ins {
	color: var(--c-accent);
	text-decoration: none;
}


/* -----------------------------------------------------------------------------
   10a. SHOP ARCHIVE LAYOUT
   ----------------------------------------------------------------------------- */

.shop-main {
	padding-block: var(--space-6) var(--space-11);
}

.shop-header {
	margin-block: var(--space-5) var(--space-8);
}

.shop-header .woocommerce-products-header__title {
	font-size: var(--text-4xl);
	letter-spacing: var(--ls-tighter);
	font-weight: var(--fw-black);
	line-height: var(--lh-tight);
	margin: 0 0 var(--space-3);
}

.shop-header .term-description,
.shop-header .woocommerce-products-header__description {
	font-size: var(--text-md);
	color: var(--c-ink-soft);
	line-height: var(--lh-base);
	max-width: var(--narrow-max);
}

/* Layout: mobile = single column; desktop = sidebar + grid */
.shop-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
}

@media (min-width: 1024px) {
	.shop-layout--with-sidebar {
		grid-template-columns: 280px 1fr;
		gap: var(--space-9);
	}
}

@media (min-width: 1440px) {
	.shop-layout--with-sidebar {
		grid-template-columns: 300px 1fr;
	}
}


/* --- Sidebar --- */
.shop-sidebar {
	display: none;     /* hidden on mobile — replaced by drawer */
}

.shop-sidebar__heading {
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--c-ink);
	margin: 0 0 var(--space-5);
	padding-bottom: var(--space-3);
	border-bottom: var(--bw) solid var(--c-ink);
}

.shop-sidebar .widget {
	margin-bottom: var(--space-7);
	padding-bottom: var(--space-5);
	border-bottom: var(--bw) solid var(--c-line);
}

.shop-sidebar .widget:last-child {
	border-bottom: 0;
}

.shop-sidebar .widget-title,
.shop-sidebar .widgettitle {
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-ink);
	margin: 0 0 var(--space-4);
}

.shop-sidebar ul {
	font-size: var(--text-sm);
	line-height: var(--lh-base);
}

.shop-sidebar ul li {
	margin-bottom: var(--space-2);
}

.shop-sidebar ul a {
	color: var(--c-ink-soft);
}

.shop-sidebar ul a:hover {
	color: var(--c-accent);
}

.shop-sidebar .count {
	color: var(--c-mute-soft);
	font-size: var(--text-xs);
	margin-left: var(--space-1);
}

/* WC price filter */
.shop-sidebar .widget_price_filter .price_slider_wrapper {
	margin-block: var(--space-4);
}

.shop-sidebar .widget_price_filter .price_label {
	font-size: var(--text-sm);
	color: var(--c-ink-soft);
	margin-bottom: var(--space-3);
}

.shop-sidebar .widget_price_filter .button {
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	background: var(--c-ink);
	color: var(--c-bg);
	padding: var(--space-2) var(--space-4);
	border: 0;
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.shop-sidebar .widget_price_filter .button:hover {
	background: var(--c-accent);
}

@media (min-width: 1024px) {
	.shop-sidebar {
		display: block;
	}

	.shop-sidebar__sticky {
		position: sticky;
		top: calc(var(--header-h) + var(--space-5));
		max-height: calc(100vh - var(--header-h) - var(--space-7));
		overflow-y: auto;
		padding-right: var(--space-2);
	}

	/* Hide the mobile-only filter toggle button on desktop */
	.shop-toolbar__filter-toggle {
		display: none;
	}
}


/* --- Toolbar (result count + sort + filter button) --- */
.shop-toolbar {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	align-items: flex-start;
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-4);
	border-bottom: var(--bw) solid var(--c-line);
}

.shop-toolbar__left,
.shop-toolbar__right {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.shop-toolbar__right {
	margin-left: auto;
}

.shop-toolbar .woocommerce-result-count {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--c-muted);
}

.shop-toolbar .woocommerce-ordering {
	margin: 0;
	float: none;
}

.shop-toolbar .woocommerce-ordering select {
	min-height: 40px;
	font-size: var(--text-sm);
}

@media (min-width: 768px) {
	.shop-toolbar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}


/* --- Empty state --- */
.shop-empty {
	padding: var(--space-9) 0;
	text-align: center;
	color: var(--c-muted);
}


/* --- Right-side drawer variant (filters) --- */
.drawer--right .drawer__panel {
	left: auto;
	right: 0;
	transform: translateX(100%);
}

.drawer--right[aria-hidden="false"] .drawer__panel {
	transform: translateX(0);
}

.drawer__body {
	flex: 1;
	padding: var(--space-5);
	overflow-y: auto;
}

.drawer__body .widget {
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-5);
	border-bottom: var(--bw) solid var(--c-line);
}

.drawer__body .widget:last-child { border-bottom: 0; }

.drawer__body .widget-title,
.drawer__body .widgettitle {
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	margin: 0 0 var(--space-3);
}

.drawer__body ul {
	font-size: var(--text-sm);
}

.drawer__body ul li {
	margin-bottom: var(--space-2);
}


/* -----------------------------------------------------------------------------
   10b. SINGLE PRODUCT PAGE
   ----------------------------------------------------------------------------- */

.single-product-main {
	padding-block: var(--space-6) var(--space-11);
}

.single-product-main .breadcrumbs,
.single-product-main .woocommerce-breadcrumb {
	margin-block: var(--space-4) var(--space-6);
}

/* Two-column grid: gallery / summary. Mobile = stacked. */
.single-product-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
	margin-bottom: var(--space-11);
}


/* --- Gallery ---
   We rely on WooCommerce's FlexSlider for slide behavior (active-only
   visibility, thumbnail nav, swipe). Don't apply our own grid/flex layout
   to .woocommerce-product-gallery__wrapper or it fights FlexSlider. */
.single-product__gallery {
	position: relative;
}

.woocommerce-product-gallery {
	position: relative;
}

/* Make the slides figure the offset parent for arrows so they center on
   the main image, not on (image + thumbnails row below). */
.woocommerce-product-gallery__wrapper {
	position: relative;
}

/* Main image — clean, no rounded corners */
.woocommerce-product-gallery__image {
	background: var(--c-surface);
	overflow: hidden;
	max-width: 100%;
}

/* Hard cap on every image inside the single-product gallery — defensive
   against plugin overrides (variation swatches Pro, photoswipe, etc.) that
   might inject images at their natural pixel size and break the layout.
   `!important` chosen deliberately: a 2400px-wide image escaping its
   container makes the page unreadable on every device. */
.single-product .woocommerce-product-gallery img,
.single-product__gallery img,
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__image > a img {
	max-width: 100% !important;
	width: 100% !important;
	height: auto !important;
	display: block;
}

/* Pre-init / no-JS fallback. If FlexSlider hasn't initialized (script blocked,
   race condition, Variation Swatches Pro intercepting), stack only the first
   image visibly so the page doesn't grow to 10 000 px. The .flexslider class
   is added by FlexSlider on init; until then, hide siblings. */
.woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__image:nth-of-type(n+2) {
	display: none !important;
}

/* Swiper-based galleries (Radius Theme rtwpvg, similar plugins).
   Same idea: pre-init, hide everything but the first slide so a 10-image
   gallery doesn't render as a 10 000px-tall column. Once Swiper adds the
   `swiper-initialized` class on the container, this rule disables and the
   plugin's own slider takes over. */
.single-product__gallery .swiper:not(.swiper-initialized) .swiper-slide:nth-of-type(n+2),
.loading-rtwpvg .swiper-slide:nth-of-type(n+2) {
	display: none !important;
}

/* Hard-cap any image in the rtwpvg gallery too — same defensive cap as
   the WC native gallery. */
.rtwpvg-wrapper img,
.rtwpvg-gallery-image img,
.rtwpvg-single-image-container img {
	max-width: 100% !important;
	width: 100% !important;
	height: auto !important;
	display: block;
}

/* Plugin wrapper itself never wider than its grid column. */
.rtwpvg-wrapper,
.rtwpvg-container,
.rtwpvg-slider-wrapper,
.rtwpvg-slider {
	max-width: 100%;
}

.woocommerce-product-gallery__image a {
	display: block;
}

/* The gallery container itself must never exceed its grid column. */
.single-product__gallery,
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper {
	max-width: 100%;
}

/* Thumbnail row beneath the main slide */
.flex-control-nav.flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
	padding: 0;
	list-style: none;
}

.flex-control-nav.flex-control-thumbs li {
	margin: 0;
	cursor: pointer;
	background: var(--c-surface);
	overflow: hidden;
	aspect-ratio: 1;
	border: var(--bw) solid transparent;
	transition: border-color var(--dur-fast) var(--ease);
}

.flex-control-nav.flex-control-thumbs li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.6;
	transition: opacity var(--dur-fast) var(--ease);
}

.flex-control-nav.flex-control-thumbs li img:hover,
.flex-control-nav.flex-control-thumbs li img.flex-active {
	opacity: 1;
}

.flex-control-nav.flex-control-thumbs li img.flex-active {
	border-color: var(--c-ink);
}

/* Hide pre-init duplicate slides — FlexSlider handles via JS once loaded,
   but during page load all slides briefly stack. Keep first visible. */
.woocommerce-product-gallery:not(.woocommerce-product-gallery--with-images) .woocommerce-product-gallery__image:not(:first-of-type),
.woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__image:not(:first-of-type) {
	display: none;
}

/* --- FlexSlider direction nav (prev/next arrows) ---
   Enabled via woocommerce_single_product_carousel_options filter. */
.woocommerce-product-gallery .flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;       /* let images receive clicks; only arrows are clickable */
}

.woocommerce-product-gallery .flex-direction-nav li {
	margin: 0;
	pointer-events: auto;
}

.woocommerce-product-gallery .flex-direction-nav a {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-bg);
	color: var(--c-ink);
	border: var(--bw) solid var(--c-line);
	border-radius: 50%;
	font-size: 0;            /* hide WC's "Previous" / "Next" text */
	text-decoration: none;
	opacity: 0;
	transition:
		opacity     var(--dur-base) var(--ease),
		background  var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease);
	z-index: var(--z-elevated);
	cursor: pointer;
}

.woocommerce-product-gallery:hover .flex-direction-nav a,
.woocommerce-product-gallery .flex-direction-nav a:focus-visible {
	opacity: 1;
}

.woocommerce-product-gallery .flex-direction-nav a:hover {
	background: var(--c-ink);
	color: var(--c-bg);
	border-color: var(--c-ink);
}

/* Chevron rendered as a rotated border square (no SVG dependency on WC's text). */
.woocommerce-product-gallery .flex-direction-nav a::before {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.woocommerce-product-gallery .flex-direction-nav .flex-prev {
	left: var(--space-3);
}

.woocommerce-product-gallery .flex-direction-nav .flex-prev::before {
	transform: rotate(-135deg);    /* arrow ◄ */
	margin-left: 3px;
}

.woocommerce-product-gallery .flex-direction-nav .flex-next {
	right: var(--space-3);
}

.woocommerce-product-gallery .flex-direction-nav .flex-next::before {
	transform: rotate(45deg);      /* arrow ► */
	margin-right: 3px;
}

/* Disabled arrows when at first/last slide (animationLoop is on, so unused) */
.woocommerce-product-gallery .flex-direction-nav .flex-disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

/* Mobile: always show arrows, smaller */
@media (max-width: 767px) {
	.woocommerce-product-gallery .flex-direction-nav a {
		opacity: 1;
		width: 36px;
		height: 36px;
	}
}

/* Sale flash on gallery */
.single-product .onsale,
.single-product .single-product__gallery .onsale {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: var(--z-elevated);
	display: inline-flex;
	align-items: center;
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	padding: var(--space-1) var(--space-3);
	text-transform: uppercase;
	background: var(--c-accent);
	color: var(--c-accent-ink);
	border-radius: var(--radius-sm);
	min-height: 0;
	line-height: 1.2;
}


/* --- Summary --- */
.single-product__summary {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.single-product__summary .product_title,
.single-product .product_title {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: var(--fw-black);
	letter-spacing: var(--ls-tighter);
	line-height: var(--lh-tight);
	margin: 0;
}

/* Brand-like meta line — Woo doesn't always render this; placeholder hook. */
.single-product__summary .posted_in,
.single-product__summary .tagged_as {
	font-size: var(--text-xs);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--c-muted);
}


/* Price */
.single-product__summary .price,
.single-product .price {
	font-size: var(--text-2xl);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.single-product .price del,
.single-product .price del .amount {
	color: var(--c-mute-soft);
	font-weight: var(--fw-regular);
	font-size: 0.7em;
}

.single-product .price ins,
.single-product .price ins .amount {
	color: var(--c-accent);
	text-decoration: none;
}


/* Short description */
.single-product__summary .woocommerce-product-details__short-description {
	font-size: var(--text-md);
	line-height: var(--lh-base);
	color: var(--c-ink-soft);
	border-top: var(--bw) solid var(--c-line);
	padding-top: var(--space-5);
}


/* --- Variations form (selects, swatches) --- */
.variations_form .variations {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.variations_form .variations tr {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.variations_form .variations th,
.variations_form .variations td {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

.variations_form .variations th {
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-ink);
}

.variations_form .reset_variations {
	display: inline-block;
	margin-top: var(--space-2);
	font-size: var(--text-xs);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-muted);
	border-bottom: 1px solid var(--c-mute-soft);
	padding-bottom: 2px;
}

.variations_form .reset_variations:hover {
	color: var(--c-accent);
	border-bottom-color: var(--c-accent);
}

/* --- Variation swatches (sim-theme custom) ---
   The select stays in the DOM (hidden) so WC variations.js still listens.
   Swatch buttons mirror the select via JS in main.js. */
.variation-swatches-wrap {
	position: relative;
}

.variation-swatches-wrap__select {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	pointer-events: none;
}

.swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.swatches__item {
	margin: 0;
}

/* Pill swatches — text labels (sizes, designs, etc.) */
.swatch--pill {
	min-height: 40px;
	min-width: 44px;
	padding: 0 var(--space-3);
	background: var(--c-bg);
	color: var(--c-ink);
	border: var(--bw) solid var(--c-line);
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-normal);
	text-transform: none;
	cursor: pointer;
	transition:
		border-color var(--dur-fast) var(--ease),
		background   var(--dur-fast) var(--ease),
		color        var(--dur-fast) var(--ease);
}

.swatch--pill:hover {
	border-color: var(--c-ink);
}

.swatch--pill.is-selected {
	background: var(--c-ink);
	color: var(--c-bg);
	border-color: var(--c-ink);
}

.swatch--pill:disabled,
.swatch--pill.is-unavailable {
	opacity: 0.3;
	cursor: not-allowed;
	text-decoration: line-through;
	text-decoration-color: var(--c-mute-soft);
}

/* Color swatches — circles */
.swatch--color {
	width: 36px;
	height: 36px;
	padding: 3px;
	background: transparent;
	border: var(--bw) solid transparent;
	border-radius: 50%;
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease);
}

.swatch--color .swatch__dot {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--swatch-color, var(--c-mute-soft));
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.swatch--color:hover {
	border-color: var(--c-mute-soft);
}

.swatch--color.is-selected {
	border-color: var(--c-ink);
}

.swatch--color:disabled,
.swatch--color.is-unavailable {
	opacity: 0.35;
	cursor: not-allowed;
}


/* Variation availability message */
.woocommerce-variation-availability {
	font-size: var(--text-sm);
	color: var(--c-muted);
	margin-block: var(--space-3);
}

.woocommerce-variation-price {
	font-size: var(--text-xl);
	font-weight: var(--fw-bold);
	margin-block: var(--space-3);
}


/* --- WooCommerce default button overrides ---
   WC's "alt" buttons (add-to-cart, place-order) are bright purple/pink by
   default. Override with our ink + accent design language across every
   place WC outputs them. Uses !important to win over woocommerce.css's
   `.woocommerce a.button.alt { background:... }` specificity. */
.woocommerce .single_add_to_cart_button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page .button.alt {
	background: var(--c-ink) !important;
	color: var(--c-inv-ink) !important;
	border: var(--bw) solid var(--c-ink) !important;
	border-radius: var(--radius-sm) !important;
	text-transform: uppercase !important;
	letter-spacing: var(--ls-wider) !important;
	font-weight: var(--fw-bold) !important;
	font-size: var(--text-sm) !important;
	padding: 0 var(--space-7) !important;
	min-height: var(--input-h-lg);
	line-height: var(--input-h-lg);
	transition:
		background-color var(--dur-base) var(--ease),
		border-color     var(--dur-base) var(--ease),
		color            var(--dur-base) var(--ease) !important;
}

.woocommerce .single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce-page .button.alt:hover {
	background: var(--c-accent) !important;
	border-color: var(--c-accent) !important;
	color: var(--c-accent-ink) !important;
}

.woocommerce .single_add_to_cart_button:disabled,
.woocommerce .single_add_to_cart_button.disabled,
.woocommerce button.button.alt:disabled {
	background: var(--c-mute-soft) !important;
	border-color: var(--c-mute-soft) !important;
	cursor: not-allowed;
	opacity: 0.7;
}

/* Non-alt buttons (Update cart, Apply coupon, ghost variants) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: transparent;
	color: var(--c-ink);
	border: var(--bw) solid var(--c-ink);
	border-radius: var(--radius-sm);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	font-weight: var(--fw-bold);
	font-size: var(--text-sm);
	padding: 0 var(--space-5);
	min-height: var(--input-h);
	line-height: var(--input-h);
	transition:
		background-color var(--dur-base) var(--ease),
		color            var(--dur-base) var(--ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--c-ink);
	color: var(--c-bg);
}


/* --- Add to cart row --- */
.single-product .cart {
	display: flex;
	gap: var(--space-3);
	align-items: stretch;
	flex-wrap: wrap;
	border-top: var(--bw) solid var(--c-line);
	padding-top: var(--space-5);
}

.single-product .cart .quantity {
	display: inline-flex;
	align-items: stretch;
	border: var(--bw) solid var(--c-line);
	border-radius: var(--radius-sm);
}

.single-product .cart .quantity input.qty {
	width: 64px;
	min-height: var(--input-h-lg);
	border: 0;
	border-radius: 0;
	text-align: center;
	font-weight: var(--fw-bold);
	background: transparent;
}

.single-product .cart .quantity input.qty:focus {
	outline: 0;
	border: 0;
	background: var(--c-surface);
}

.single-product .single_add_to_cart_button,
.single-product button[name="add-to-cart"],
.single-product .cart .button {
	flex: 1;
	min-height: var(--input-h-lg);
	padding: 0 var(--space-7);
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	background: var(--c-ink);
	color: var(--c-bg);
	border: var(--bw) solid var(--c-ink);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition:
		background-color var(--dur-base) var(--ease),
		border-color     var(--dur-base) var(--ease);
}

.single-product .single_add_to_cart_button:hover,
.single-product button[name="add-to-cart"]:hover {
	background: var(--c-accent);
	border-color: var(--c-accent);
}

.single-product .single_add_to_cart_button:disabled {
	background: var(--c-mute-soft);
	border-color: var(--c-mute-soft);
	cursor: not-allowed;
}


/* --- Product meta (SKU, categories, tags) --- */
.product_meta {
	font-size: var(--text-xs);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-muted);
	border-top: var(--bw) solid var(--c-line);
	padding-top: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.product_meta .sku_wrapper,
.product_meta .posted_in,
.product_meta .tagged_as {
	display: block;
}

.product_meta a {
	color: var(--c-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.product_meta a:hover { color: var(--c-ink); }


/* --- Below the fold: tabs (accordion) + related + upsells --- */
.single-product-secondary {
	margin-top: var(--space-9);
}

.product-info {
	border-top: var(--bw) solid var(--c-line);
	margin-bottom: var(--space-11);
}

.product-info__item .accordion__panel {
	font-size: var(--text-md);
	line-height: var(--lh-base);
	color: var(--c-ink-soft);
	max-width: var(--narrow-max);
}

.product-info__panel p { margin-bottom: var(--space-4); }

.product-info__panel ul,
.product-info__panel ol {
	padding-left: var(--space-5);
	margin-bottom: var(--space-4);
}

.product-info__panel ul { list-style: disc; }
.product-info__panel ol { list-style: decimal; }


/* Related & upsells: section heading + product grid */
.related.products,
.upsells.products {
	margin-bottom: var(--space-9);
}

.related.products > h2,
.upsells.products > h2 {
	font-size: var(--text-2xl);
	letter-spacing: var(--ls-tighter);
	margin-bottom: var(--space-5);
	border-bottom: var(--bw) solid var(--c-line);
	padding-bottom: var(--space-4);
}

.related.products > ul.products,
.upsells.products > ul.products {
	margin-top: 0;
}


/* --- Tablet & desktop layout: 2-column grid --- */
@media (min-width: 768px) {
	.single-product-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
	}
}

@media (min-width: 1024px) {
	.single-product-grid {
		grid-template-columns: 1.4fr 1fr;
		gap: var(--space-10);
		margin-bottom: var(--space-13);
	}

	/* Sticky gallery on desktop — info column scrolls past it. */
	.single-product__gallery {
		position: sticky;
		top: calc(var(--header-h) + var(--space-5));
		align-self: flex-start;
	}

	.single-product__summary {
		gap: var(--space-6);
		padding-top: var(--space-3);
	}
}


/* --- Mobile: sticky bottom add-to-cart bar (optional progressive enhancement)
       Hidden by default; JS can toggle .has-sticky-cta on body. --- */
.single-product-sticky-cta {
	display: none;
}


/* -----------------------------------------------------------------------------
   10c. HOMEPAGE — category tiles & editorial
   ----------------------------------------------------------------------------- */

/* --- Category tiles --- */
.category-tiles {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

.category-tile {
	position: relative;
	display: block;
	color: var(--c-ink);
	background: var(--c-surface);
	overflow: hidden;
	aspect-ratio: 4 / 5;
}

.category-tile__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.category-tile__media img,
.category-tile__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.category-tile:hover .category-tile__media img,
.category-tile:focus-within .category-tile__media img {
	transform: scale(1.05);
}

.category-tile__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--space-6);
	color: var(--c-inv-ink);
	background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
}

.category-tile__count {
	display: block;
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	opacity: 0.85;
	margin-bottom: var(--space-2);
}

.category-tile__title {
	font-size: clamp(24px, 3vw, 36px);
	font-weight: var(--fw-black);
	letter-spacing: var(--ls-tighter);
	line-height: var(--lh-tight);
	margin: 0 0 var(--space-3);
	color: var(--c-inv-ink);
}

.category-tile__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	border-bottom: 1.5px solid currentColor;
	padding-bottom: 2px;
	transition: gap var(--dur-base) var(--ease);
}

.category-tile:hover .category-tile__cta,
.category-tile:focus-within .category-tile__cta {
	gap: var(--space-3);
}

@media (min-width: 768px) {
	.category-tiles {
		grid-template-columns: repeat(2, 1fr);     /* tablet: 2 cols */
		gap: var(--space-4);
	}
}

@media (min-width: 1024px) {
	.category-tiles {
		grid-template-columns: repeat(3, 1fr);     /* desktop: 3 cols */
	}
}


/* --- Featured brand tiles ---
   Visually similar to category tiles but landscape aspect (16:10) and a
   center-aligned overlay. Reads more like a dealer showcase than a category. */
.brand-tiles {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

.brand-tile {
	position: relative;
	display: block;
	color: var(--c-inv-ink);
	background: var(--c-ink);
	overflow: hidden;
	aspect-ratio: 16 / 11;
}

.brand-tile__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.brand-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.85;
	transition: transform 0.6s var(--ease), opacity var(--dur-base) var(--ease);
}

.brand-tile:hover .brand-tile__media img,
.brand-tile:focus-within .brand-tile__media img {
	transform: scale(1.05);
	opacity: 1;
}

.brand-tile__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-5);
	background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 100%);
	gap: var(--space-2);
}

.brand-tile__name {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: var(--fw-black);
	letter-spacing: var(--ls-tighter);
	line-height: var(--lh-tight);
	color: var(--c-inv-ink);
	text-transform: uppercase;
}

.brand-tile__count {
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--c-inv-ink);
	opacity: 0.85;
}

.brand-tile__cta {
	margin-top: var(--space-3);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	border-bottom: 1.5px solid currentColor;
	padding-bottom: 2px;
	transition: gap var(--dur-base) var(--ease);
}

.brand-tile:hover .brand-tile__cta,
.brand-tile:focus-within .brand-tile__cta {
	gap: var(--space-3);
}

@media (min-width: 768px) {
	.brand-tiles {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-4);
	}
}


/* --- Editorial block --- */
.home-editorial {
	background: var(--c-surface);
	padding: var(--space-11) var(--gutter);
}

.home-editorial__inner {
	max-width: var(--narrow-max);
	margin-inline: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
}

.home-editorial__label {
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--c-muted);
}

.home-editorial__title {
	font-size: var(--text-3xl);
	font-weight: var(--fw-black);
	letter-spacing: var(--ls-tighter);
	line-height: var(--lh-tight);
	margin: 0;
	max-width: 22ch;
}

.home-editorial__text {
	font-size: var(--text-md);
	line-height: var(--lh-loose);
	color: var(--c-ink-soft);
	margin: 0;
	max-width: 56ch;
}


/* -----------------------------------------------------------------------------
   10d. CART
   ----------------------------------------------------------------------------- */

.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--section-y) var(--gutter);
}

/* All cart rules are scoped under `.woocommerce-cart` (body class) so they
   beat WooCommerce's default `.woocommerce table.shop_table` specificity.
   Source order also has us loading AFTER woocommerce-general (see enqueue.php). */

.woocommerce-cart .woocommerce-cart-form {
	margin-bottom: var(--space-6);
}

.woocommerce-cart .woocommerce table.shop_table,
.woocommerce-cart table.shop_table,
.woocommerce-cart table.cart {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	border-radius: 0;
	margin: 0;
	background: transparent;
}

.woocommerce-cart table.shop_table thead {
	background: transparent;
}

.woocommerce-cart table.shop_table thead th {
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-muted);
	padding: var(--space-4) var(--space-3);
	text-align: left;
	background: transparent;
	border: 0;
	border-bottom: var(--bw) solid var(--c-line);
}

.woocommerce-cart table.shop_table tbody tr {
	background: transparent;
}

.woocommerce-cart table.shop_table tbody td {
	padding: var(--space-5) var(--space-3);
	border: 0;
	border-bottom: var(--bw) solid var(--c-line);
	vertical-align: middle;
	font-size: var(--text-sm);
	background: transparent;
}

.woocommerce-cart table.shop_table .product-thumbnail {
	width: 100px;
}

.woocommerce-cart table.shop_table .product-thumbnail img {
	width: 80px;
	height: 80px;
	max-width: 80px;
	object-fit: cover;
	background: var(--c-surface);
}

.woocommerce-cart table.shop_table .product-name a {
	font-weight: var(--fw-bold);
	color: var(--c-ink);
	text-decoration: none;
}

.woocommerce-cart table.shop_table .product-name a:hover {
	color: var(--c-accent);
}

.woocommerce-cart table.shop_table .product-name dl.variation {
	font-size: var(--text-xs);
	color: var(--c-muted);
	margin: var(--space-1) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-2);
}

.woocommerce-cart table.shop_table .product-name dl.variation dt,
.woocommerce-cart table.shop_table .product-name dl.variation dd {
	margin: 0;
	float: none;
	display: inline;
	font-size: var(--text-xs);
}

.woocommerce-cart table.shop_table .product-name dl.variation dt::after {
	content: ':';
	margin-right: var(--space-1);
}

.woocommerce-cart table.shop_table .product-price,
.woocommerce-cart table.shop_table .product-subtotal {
	font-weight: var(--fw-bold);
	color: var(--c-ink);
	white-space: nowrap;
}

.woocommerce-cart table.shop_table .product-quantity {
	width: 120px;
}

.woocommerce-cart table.shop_table .product-quantity .quantity {
	display: inline-flex;
	border: var(--bw) solid var(--c-line);
	border-radius: var(--radius-sm);
}

.woocommerce-cart table.shop_table .product-quantity .qty {
	width: 60px;
	min-height: 38px;
	padding: 0 var(--space-2);
	text-align: center;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.woocommerce-cart table.shop_table .product-remove {
	width: 40px;
	text-align: center;
}

.woocommerce-cart table.shop_table .product-remove a.remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-size: 18px !important;
	color: var(--c-muted) !important;
	border-radius: 50% !important;
	background: var(--c-surface) !important;
	text-decoration: none !important;
	font-weight: var(--fw-bold) !important;
	line-height: 1 !important;
	margin: 0 auto;
}

.woocommerce-cart table.shop_table .product-remove a.remove:hover {
	background: var(--c-accent) !important;
	color: var(--c-bg) !important;
}

/* Cart actions row (coupon + update cart) */
.woocommerce-cart table.cart td.actions {
	padding: var(--space-5) 0;
	border-bottom: 0;
	background: transparent;
}

.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	gap: var(--space-2);
	align-items: stretch;
	flex-wrap: wrap;
	float: none;
}

.woocommerce-cart table.cart td.actions .coupon label {
	display: none;
}

.woocommerce-cart table.cart td.actions .coupon input.input-text {
	min-width: 200px;
	min-height: 40px;
	width: auto;
}

.woocommerce-cart table.cart td.actions input,
.woocommerce-cart table.cart td.actions button,
.woocommerce-cart table.cart td.actions .button {
	min-height: 40px;
	padding: 0 var(--space-5);
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	background: var(--c-ink);
	color: var(--c-bg);
	border: var(--bw) solid var(--c-ink);
	border-radius: var(--radius-sm);
	cursor: pointer;
	margin: 0;
}

.woocommerce-cart table.cart td.actions button[name="apply_coupon"],
.woocommerce-cart table.cart td.actions input[name="apply_coupon"] {
	background: transparent;
	color: var(--c-ink);
}

.woocommerce-cart table.cart td.actions button:hover {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-bg);
}

/* Cart totals card */
.woocommerce-cart .cart-collaterals {
	width: 100%;
	float: none;
}

.woocommerce-cart .cart_totals {
	width: 100% !important;
	float: none !important;
	background: var(--c-surface);
	padding: var(--space-7);
	border-radius: var(--radius-md);
	margin: 0;
}

.woocommerce-cart .cart_totals h2 {
	font-size: var(--text-xl);
	margin: 0 0 var(--space-5);
	letter-spacing: var(--ls-tighter);
}

.woocommerce-cart .cart_totals table.shop_table {
	width: 100%;
	margin: 0 0 var(--space-5);
	background: transparent;
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
	padding: var(--space-3) 0;
	border: 0;
	border-bottom: var(--bw) solid rgba(0,0,0,0.06);
	font-size: var(--text-sm);
	text-align: left;
	background: transparent;
}

.woocommerce-cart .cart_totals table th {
	font-weight: var(--fw-medium);
	color: var(--c-muted);
	width: auto;
}

.woocommerce-cart .cart_totals table td {
	text-align: right;
	font-weight: var(--fw-bold);
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	font-size: var(--text-md);
	color: var(--c-ink);
	border-bottom: 0;
	padding-top: var(--space-4);
}

.woocommerce-cart .wc-proceed-to-checkout {
	padding: 0;
	margin: 0;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-cart .cart_totals .checkout-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--input-h-lg);
	background: var(--c-ink);
	color: var(--c-bg);
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	border: 0;
	border-radius: var(--radius-sm);
	margin: 0;
	padding: 0 var(--space-5);
	transition: background var(--dur-base) var(--ease);
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
	background: var(--c-accent);
}

/* Empty cart state */
.woocommerce-cart .cart-empty.woocommerce-info,
.woocommerce-cart .wc-empty-cart-message {
	font-size: var(--text-md);
	background: transparent;
	border-left: 3px solid var(--c-ink);
	padding: var(--space-4) var(--space-5);
	color: var(--c-ink);
}

.woocommerce-cart .return-to-shop {
	margin-top: var(--space-5);
}

/* Cart desktop layout — items left / totals right.
   .woocommerce wrapper has multiple direct children (notices wrapper, the
   form, cart-collaterals, cross-sells, etc.). Explicit grid-column rules
   put the form and totals where we want them; everything else spans the
   full width above or below. */
@media (min-width: 1024px) {
	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: 1.5fr 1fr;
		gap: var(--space-9);
		align-items: flex-start;
	}

	/* Default: any direct child spans both columns. */
	.woocommerce-cart .woocommerce > * {
		grid-column: 1 / -1;
	}

	/* The cart form lives in the left column. */
	.woocommerce-cart .woocommerce > .woocommerce-cart-form {
		grid-column: 1;
	}

	/* The totals card lives in the right column, sticky. */
	.woocommerce-cart .woocommerce > .cart-collaterals {
		grid-column: 2;
		grid-row: 2;       /* same row as form (which is implicit row 2 after notices) */
		position: sticky;
		top: calc(var(--header-h) + var(--space-5));
	}

	/* Push the cart form to the same row as totals so they sit side by side. */
	.woocommerce-cart .woocommerce > .woocommerce-cart-form {
		grid-row: 2;
	}

	/* Empty cart — let it flow naturally */
	.woocommerce-cart .woocommerce:has(.cart-empty) {
		display: block;
	}
}


/* -----------------------------------------------------------------------------
   10e. CHECKOUT
   ----------------------------------------------------------------------------- */

.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

@media (min-width: 1024px) {
	.woocommerce-checkout form.checkout {
		grid-template-columns: 1.5fr 1fr;
	}

	.woocommerce-checkout form.checkout #order_review_heading,
	.woocommerce-checkout form.checkout #order_review {
		grid-column: 2;
	}

	.woocommerce-checkout form.checkout .col2-set,
	.woocommerce-checkout form.checkout #customer_details {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
}

.woocommerce-checkout h3 {
	font-size: var(--text-xl);
	letter-spacing: var(--ls-tighter);
	margin: 0 0 var(--space-5);
	padding-bottom: var(--space-3);
	border-bottom: var(--bw) solid var(--c-line);
}

.woocommerce-checkout .form-row {
	margin-bottom: var(--space-4);
}

.woocommerce-checkout .form-row label {
	display: block;
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	margin-bottom: var(--space-2);
	color: var(--c-ink);
}

.woocommerce-checkout .form-row .required {
	color: var(--c-accent);
	text-decoration: none;
}

#order_review_heading {
	margin-top: 0;
}

#order_review {
	background: var(--c-surface);
	padding: var(--space-6);
	border-radius: var(--radius-md);
}

#order_review .shop_table {
	background: transparent;
}

#order_review .shop_table th,
#order_review .shop_table td {
	padding: var(--space-3) 0;
	background: transparent;
	border-bottom: var(--bw) solid rgba(0,0,0,0.06);
}

#payment ul.payment_methods {
	margin: 0 0 var(--space-5);
	padding: 0;
	list-style: none;
	border: var(--bw) solid var(--c-line);
	border-radius: var(--radius-md);
	overflow: hidden;
}

#payment ul.payment_methods li {
	padding: var(--space-4);
	border-bottom: var(--bw) solid var(--c-line);
}

#payment ul.payment_methods li:last-child { border-bottom: 0; }

#payment ul.payment_methods .payment_box {
	margin-top: var(--space-3);
	padding: var(--space-4);
	background: var(--c-surface-2);
	font-size: var(--text-sm);
	border-radius: var(--radius-sm);
}

.place-order .button,
#place_order {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--input-h-lg);
	background: var(--c-ink);
	color: var(--c-bg);
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	border: 0;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--dur-base) var(--ease);
}

#place_order:hover {
	background: var(--c-accent);
}


/* -----------------------------------------------------------------------------
   10f. MY ACCOUNT
   ----------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation {
	margin-bottom: var(--space-6);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: var(--bw) solid var(--c-line);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: var(--bw) solid var(--c-line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--space-3) var(--space-5);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--c-ink-soft);
	transition: background var(--dur-fast) var(--ease);
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	background: var(--c-surface);
	color: var(--c-ink);
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	background: var(--c-ink);
	color: var(--c-bg);
}

.woocommerce-account .woocommerce-MyAccount-content {
	font-size: var(--text-md);
	line-height: var(--lh-base);
}

.woocommerce-account .woocommerce-MyAccount-content h2 {
	font-size: var(--text-2xl);
	letter-spacing: var(--ls-tighter);
	margin: 0 0 var(--space-5);
}

@media (min-width: 1024px) {
	.woocommerce-account .woocommerce {
		display: grid;
		grid-template-columns: 240px 1fr;
		gap: var(--space-8);
		align-items: flex-start;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 0;
	}
}

/* Login / register form */
.woocommerce-account .u-columns,
.u-columns.col2-set {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
}

@media (min-width: 768px) {
	.woocommerce-account .u-columns,
	.u-columns.col2-set {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce-form-login,
.woocommerce-form-register {
	background: var(--c-surface);
	padding: var(--space-7);
	border-radius: var(--radius-md);
}

.woocommerce-form-login h2,
.woocommerce-form-register h2 {
	font-size: var(--text-xl);
	margin: 0 0 var(--space-5);
}

.woocommerce-form-login__rememberme {
	display: inline-flex;
	gap: var(--space-2);
	align-items: center;
	margin-block: var(--space-3);
	font-size: var(--text-sm);
}

.woocommerce-LostPassword {
	font-size: var(--text-sm);
	margin-top: var(--space-3);
}

.woocommerce-LostPassword a {
	color: var(--c-muted);
	border-bottom: 1px solid var(--c-mute-soft);
}


/* -----------------------------------------------------------------------------
   10f2. WOOCOMMERCE BLOCKS (Gutenberg cart/checkout/mini-cart)
   Production uses [woocommerce_cart] and [woocommerce_checkout] shortcodes
   so this is just defensive coverage if the user ever adds the block
   versions in Gutenberg. We dequeue wc-blocks-style in inc/woocommerce.php
   so we have to provide our own minimal styling. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	max-width: var(--container-max);
	margin-inline: auto;
}

.wc-block-cart__main,
.wc-block-checkout__main {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
}

.wc-block-components-product-name {
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}

.wc-block-components-product-price {
	font-weight: var(--fw-bold);
}

.wc-block-components-button.contained,
.wc-block-cart__submit-button,
.wc-block-checkout__actions_row .wc-block-components-button {
	background: var(--c-ink) !important;
	color: var(--c-bg) !important;
	border-radius: var(--radius-sm) !important;
	font-weight: var(--fw-bold) !important;
	letter-spacing: var(--ls-wider) !important;
	text-transform: uppercase !important;
}

.wc-block-components-button.contained:hover,
.wc-block-cart__submit-button:hover {
	background: var(--c-accent) !important;
}

.wc-block-components-text-input input,
.wc-block-components-textarea {
	border-radius: var(--radius-md) !important;
	border-color: var(--c-line) !important;
	min-height: var(--input-h) !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus {
	border-color: var(--c-ink) !important;
	box-shadow: none !important;
}

@media (min-width: 1024px) {
	.wp-block-woocommerce-cart .wc-block-cart {
		display: grid;
		grid-template-columns: 1.5fr 1fr;
		gap: var(--space-9);
	}

	.wp-block-woocommerce-checkout .wc-block-checkout {
		display: grid;
		grid-template-columns: 1.5fr 1fr;
		gap: var(--space-9);
	}
}


/* -----------------------------------------------------------------------------
   10g. 404 PAGE
   ----------------------------------------------------------------------------- */

.site-main--404 {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - var(--header-h) * 2);
	padding: var(--section-y) var(--gutter);
}

.error-404__inner {
	max-width: 540px;
	margin-inline: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	align-items: center;
}

.error-404__eyebrow {
	font-size: var(--text-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--c-muted);
}

.error-404__title {
	font-size: clamp(40px, 7vw, 88px);
	font-weight: var(--fw-black);
	letter-spacing: var(--ls-tighter);
	line-height: var(--lh-tight);
	margin: 0;
}

.error-404__text {
	font-size: var(--text-md);
	line-height: var(--lh-base);
	color: var(--c-ink-soft);
	max-width: 44ch;
	margin: 0;
}

.error-404__search {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	border: var(--bw) solid var(--c-line);
	border-radius: var(--radius-md);
	padding: 0 var(--space-4);
	width: 100%;
	max-width: 420px;
	transition: border-color var(--dur-fast) var(--ease);
}

.error-404__search:focus-within {
	border-color: var(--c-ink);
}

.error-404__search-icon {
	flex-shrink: 0;
	color: var(--c-muted);
}

.error-404__search input {
	flex: 1;
	border: 0;
	background: transparent;
	min-height: var(--input-h);
	padding: 0;
	font-size: var(--text-md);
	border-radius: 0;
}

.error-404__search input:hover,
.error-404__search input:focus {
	border: 0;
	outline: 0;
	background: transparent;
}

.error-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: center;
	margin-top: var(--space-3);
}


/* -----------------------------------------------------------------------------
   10h. SEARCH RESULTS PAGE
   ----------------------------------------------------------------------------- */

.site-main--search {
	padding: var(--space-6) 0 var(--space-11);
}

.search-header {
	margin-bottom: var(--space-7);
	padding-bottom: var(--space-5);
	border-bottom: var(--bw) solid var(--c-line);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	align-items: flex-start;
}

.search-header__title {
	font-size: var(--text-3xl);
	font-weight: var(--fw-black);
	letter-spacing: var(--ls-tighter);
	margin: 0;
}

.search-header__title em {
	font-style: normal;
	color: var(--c-accent);
}

.search-header form {
	width: 100%;
	max-width: 480px;
}

.search-empty {
	padding: var(--space-9) 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	align-items: center;
	color: var(--c-muted);
	font-size: var(--text-md);
}


/* -----------------------------------------------------------------------------
   11. FOOTER
   ----------------------------------------------------------------------------- */

.site-footer {
	background: var(--c-inv-bg);
	color: var(--c-inv-ink);
	padding: var(--space-11) var(--gutter) var(--space-6);
	margin-top: auto;
}

.site-footer__top {
	display: grid;
	grid-template-columns: 1fr;     /* mobile: stack */
	gap: var(--space-8);
	max-width: var(--container-max);
	margin-inline: auto;
	padding-bottom: var(--space-9);
	border-bottom: var(--bw) solid var(--c-inv-line);
}

.footer-brand .site-logo,
.footer-brand .custom-logo-link {
	color: var(--c-inv-ink);
	margin-bottom: var(--space-3);
}

.footer-brand .site-logo__tag {
	color: var(--c-inv-muted);
}

.footer-brand__desc {
	font-size: var(--text-sm);
	line-height: var(--lh-loose);
	color: var(--c-inv-muted);
	max-width: 320px;
	margin-bottom: var(--space-5);
}

.newsletter {
	display: flex;
	border-bottom: var(--bw) solid rgba(255,255,255,0.4);
	padding-bottom: var(--space-2);
	max-width: 320px;
	gap: var(--space-2);
}

.newsletter input {
	flex: 1;
	background: none;
	border: none;
	color: var(--c-inv-ink);
	font: inherit;
	font-size: var(--text-sm);
	min-height: 0;
	padding: var(--space-2) 0;
	border-radius: 0;
}

.newsletter input::placeholder { color: rgba(255,255,255,0.5); }

.newsletter input:hover,
.newsletter input:focus {
	border: none;
	background: none;
}

.newsletter button {
	background: none;
	border: none;
	color: var(--c-inv-ink);
	padding: var(--space-2);
}

.footer-col h5 {
	font-family: var(--ff-base);
	font-size: var(--text-xs);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	margin: 0 0 var(--space-5);
	font-weight: var(--fw-bold);
	color: var(--c-inv-ink);
}

.footer-menu li {
	margin-bottom: var(--space-2);
}

.footer-menu a {
	color: var(--c-inv-muted);
	font-size: var(--text-sm);
}

.footer-menu a:hover { color: var(--c-inv-ink); }

.site-footer__bottom {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-top: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	font-size: var(--text-xs);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-inv-muted);
}


/* -----------------------------------------------------------------------------
   12. WOOCOMMERCE GENERAL OVERRIDES
   ----------------------------------------------------------------------------- */

.shop-main,
.site-main {
	padding: var(--section-y) var(--gutter);
	max-width: var(--container-max);
	margin-inline: auto;
	width: 100%;
}

.woocommerce-products-header {
	margin-bottom: var(--space-7);
}

.woocommerce-products-header__title {
	font-size: var(--text-4xl);
	letter-spacing: var(--ls-tighter);
	margin: 0 0 var(--space-3);
}

.woocommerce-breadcrumb,
.breadcrumbs {
	font-size: var(--text-xs);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: var(--space-5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
}

.breadcrumbs a,
.woocommerce-breadcrumb a { color: var(--c-muted); }
.breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover { color: var(--c-ink); }
.breadcrumb-sep { color: var(--c-mute-soft); }

.woocommerce-result-count {
	font-size: var(--text-sm);
	color: var(--c-muted);
	margin-bottom: var(--space-5);
}

.woocommerce-ordering select {
	min-height: 40px;
}

/* WC notices — match base notice styling */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: var(--space-4) var(--space-5);
	margin-bottom: var(--space-6);
	border-left: 3px solid var(--c-ink);
	background: var(--c-surface);
	font-size: var(--text-sm);
	border-radius: 0;
	list-style: none;
}

.woocommerce-error  { border-left-color: var(--c-danger); }
.woocommerce-info   { border-left-color: var(--c-success); }


/* Pagination */
.woocommerce-pagination {
	margin: var(--space-9) 0;
	text-align: center;
}

.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	gap: var(--space-1);
	padding: 0;
}

.woocommerce-pagination .page-numbers {
	min-width: 44px;
	min-height: 44px;
	padding: var(--space-3) var(--space-4);
	border: var(--bw) solid var(--c-line);
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	color: var(--c-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
}

.woocommerce-pagination .page-numbers:hover {
	border-color: var(--c-ink);
	background: var(--c-surface);
}

.woocommerce-pagination .page-numbers.current {
	background: var(--c-ink);
	color: var(--c-bg);
	border-color: var(--c-ink);
}


/* -----------------------------------------------------------------------------
   13. UTILITIES
   ----------------------------------------------------------------------------- */

.sim-icon { display: inline-block; vertical-align: middle; }

.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }

.u-hidden        { display: none !important; }
.u-hidden-mobile { display: none !important; }

.u-mt-0 { margin-top: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }

/* Visually hidden but accessible (alias for screen-reader-text) */
.u-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* -----------------------------------------------------------------------------
   14. RESPONSIVE — mobile-first, scale up.
   ----------------------------------------------------------------------------- */

/* --- Tablet (≥768px) --- */
@media (min-width: 768px) {

	:root {
		--gutter:    var(--space-6);
		--section-y: var(--space-10);
	}

	/* Header gets wider gutter at tablet+ (no padding-block — see note above) */
	.site-header__inner {
		padding: 0 var(--gutter);
	}

	/* Section heads side-by-side */
	.section-head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--space-6);
	}

	/* Product grid: 2 cols at tablet (phablet+) */
	ul.products,
	.woocommerce ul.products,
	.woocommerce ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-7) var(--space-5);
	}

	/* Hero bigger */
	.hero {
		min-height: 85vh;
	}

	.hero__meta {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--space-7);
	}

	.hero__info {
		text-align: right;
	}

	/* Footer 2-col */
	.site-footer__top {
		grid-template-columns: 2fr 1fr 1fr;
	}

	.site-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
	}

	.u-hidden-mobile { display: revert !important; }
	.u-hidden-tablet { display: none !important; }
}

/* --- Desktop (≥1024px) --- */
@media (min-width: 1024px) {

	:root {
		--gutter:    var(--space-7);
		--section-y: var(--space-11);
		--header-h:  72px;
	}

	/* Header layout reverts to nav | logo | actions */
	.site-header__inner {
		grid-template-columns: 1fr auto 1fr;
		padding: 0 var(--gutter);    /* never padding-block — see hover note above */
	}

	.site-nav--primary {
		display: block;
		justify-self: start;
	}

	/* Hide hamburger on desktop */
	.menu-toggle { display: none; }

	/* Product grid: 4 cols at desktop */
	ul.products,
	.woocommerce ul.products,
	.woocommerce ul.products[class*="columns-"] {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-9) var(--space-6);
	}

	/* Hero full bleed */
	.hero {
		min-height: 90vh;
	}

	.hero__content {
		padding: var(--space-10) var(--gutter) var(--space-11);
	}

	/* Footer 4-col + brand wider */
	.site-footer__top {
		grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
		gap: var(--space-9);
	}

	.u-hidden-desktop { display: none !important; }
}

/* --- Large desktop (≥1440px) --- */
@media (min-width: 1440px) {

	:root {
		--gutter: var(--space-8);
	}
}