/*
Theme Name: Smart Shack
Theme URI: https://example.com/smart-shack
Author: Smart Shack
Author URI: https://example.com
Description: A modern, dark-first WooCommerce theme built for The Smart Shack — a smart home & tech products store. Includes a light mode toggle, mega-menu navigation, and fully custom-styled shop, product, cart and checkout pages.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: smart-shack
Tags: e-commerce, dark-mode, custom-colors, custom-menu, custom-logo, translation-ready, one-column, two-columns, right-sidebar, threaded-comments
*/

/* =========================================================
   1. DESIGN TOKENS — dark is the default theme
   ========================================================= */
html[data-theme="dark"],
:root {
	--ss-bg: #0a0c11;
	--ss-bg-alt: #10131b;
	--ss-surface: #151924;
	--ss-surface-2: #1c212f;
	--ss-border: #262c3c;
	--ss-border-strong: #333a4d;
	--ss-text: #eef1f8;
	--ss-text-muted: #9aa3ba;
	--ss-text-faint: #6d7590;
	--ss-accent: #3a53a5;
	--ss-accent-hover: #4c67c4;
	--ss-accent-active: #2f4488;
	--ss-accent-soft: rgba(58, 83, 165, 0.16);
	--ss-accent-contrast: #ffffff;
	--ss-success: #37b874;
	--ss-success-soft: rgba(55, 184, 116, 0.14);
	--ss-danger: #ef5a5a;
	--ss-danger-soft: rgba(239, 90, 90, 0.14);
	--ss-warning: #e8b34a;
	--ss-star: #f2b93b;
	--ss-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
	--ss-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
	--ss-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
	--ss-radius-sm: 8px;
	--ss-radius: 14px;
	--ss-radius-lg: 22px;
	--ss-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ss-font-display: 'Sora', 'Inter', -apple-system, sans-serif;
	--ss-header-h: 76px;
}

html[data-theme="light"] {
	--ss-bg: #f6f7fb;
	--ss-bg-alt: #eef0f6;
	--ss-surface: #ffffff;
	--ss-surface-2: #f3f4f9;
	--ss-border: #e3e6ef;
	--ss-border-strong: #ccd1e0;
	--ss-text: #12141c;
	--ss-text-muted: #565e73;
	--ss-text-faint: #848c9f;
	--ss-accent: #3a53a5;
	--ss-accent-hover: #2f4488;
	--ss-accent-active: #263a75;
	--ss-accent-soft: rgba(58, 83, 165, 0.08);
	--ss-accent-contrast: #ffffff;
	--ss-success: #1f9d5c;
	--ss-success-soft: rgba(31, 157, 92, 0.1);
	--ss-danger: #d43f3f;
	--ss-danger-soft: rgba(212, 63, 63, 0.1);
	--ss-warning: #b4790f;
	--ss-star: #e0a52c;
	--ss-shadow-sm: 0 2px 8px rgba(20, 25, 45, 0.06);
	--ss-shadow: 0 12px 32px rgba(20, 25, 45, 0.1);
	--ss-shadow-lg: 0 24px 60px rgba(20, 25, 45, 0.14);
}

/* =========================================================
   2. RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--ss-bg);
	color: var(--ss-text);
	font-family: var(--ss-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	transition: background-color .25s ease, color .25s ease;
	overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--ss-accent); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--ss-accent-hover); }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--ss-font-display);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 .5em;
	color: var(--ss-text);
	letter-spacing: -0.01em;
}
p { margin: 0 0 1em; color: var(--ss-text-muted); }
input, textarea, select, button { font-family: inherit; font-size: 1rem; color: inherit; }
button { cursor: pointer; }
hr { border: none; border-top: 1px solid var(--ss-border); margin: 2em 0; }
::selection { background: var(--ss-accent); color: #fff; }

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px,1px,1px,1px);
	width: 1px; height: 1px; overflow: hidden;
}
.skip-link {
	position: fixed; top: -100px; left: 1rem; z-index: 10000;
	background: var(--ss-accent); color: #fff; padding: .75rem 1.25rem; border-radius: var(--ss-radius-sm);
	transition: top .2s ease;
}
.skip-link:focus { top: 1rem; color: #fff; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

svg { width: 20px; height: 20px; }

/* =========================================================
   3. BUTTONS
   ========================================================= */
.button, button.button, input[type="submit"], .wp-block-button__link,
a.button, .woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit, .woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	font-family: var(--ss-font-body);
	font-weight: 600;
	font-size: .95rem;
	padding: .8em 1.6em;
	border-radius: 999px;
	border: 1px solid transparent;
	background: var(--ss-surface-2);
	color: var(--ss-text);
	white-space: nowrap;
	transition: all .18s ease;
}
.button:hover, button.button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce input.button:hover {
	background: var(--ss-border-strong);
	color: var(--ss-text);
	transform: translateY(-1px);
}
.button-primary, .woocommerce #respond input#submit, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #payment #place_order, .single_add_to_cart_button,
.checkout-button, .wp-block-button__link {
	background: var(--ss-accent) !important;
	color: #fff !important;
	border-color: var(--ss-accent) !important;
	box-shadow: 0 4px 14px rgba(58, 83, 165, 0.35);
}
.button-primary:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.single_add_to_cart_button:hover, .checkout-button:hover {
	background: var(--ss-accent-hover) !important;
	border-color: var(--ss-accent-hover) !important;
	box-shadow: 0 6px 18px rgba(58, 83, 165, 0.45);
}
.button-ghost {
	background: transparent;
	color: var(--ss-text);
	border-color: var(--ss-border-strong);
}
html[data-theme="light"] .button-ghost {
	border-color: var(--ss-text-faint);
}
.button-ghost:hover { background: var(--ss-surface-2); }
.button-large { padding: 1em 2em; font-size: 1rem; }
.button:disabled, .woocommerce a.button.disabled, button:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* =========================================================
   4. FORMS
   ========================================================= */
input[type="text"], input[type="email"], input[type="search"], input[type="password"],
input[type="tel"], input[type="number"], input[type="url"], textarea, select,
.select2-container--default .select2-selection--single {
	width: 100%;
	background: var(--ss-surface);
	border: 1px solid var(--ss-border);
	border-radius: var(--ss-radius-sm);
	padding: .75em 1em;
	color: var(--ss-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--ss-accent);
	box-shadow: 0 0 0 3px var(--ss-accent-soft);
}
label { font-size: .9rem; color: var(--ss-text-muted); display: block; margin-bottom: .4em; }
::placeholder { color: var(--ss-text-faint); }

/* =========================================================
   5. HEADER / NAVIGATION / MEGA MENU
   ========================================================= */
.site-header {
	position: sticky; top: 0; z-index: 500;
	background: color-mix(in srgb, var(--ss-bg) 88%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--ss-border);
}
.header-inner {
	display: flex; align-items: center; gap: 28px;
	height: var(--ss-header-h);
}
/* min-width: 0 lets this flex item actually shrink below its text's natural
   width instead of forcing the row wider / wrapping the title onto several
   lines when the mobile toggle + header icons squeeze the space available. */
.site-branding { margin-right: auto; min-width: 0; overflow: hidden; }
.site-branding img { max-height: var(--ss-logo-height, 40px); width: auto; }
.site-title-link { display: inline-flex; max-width: 100%; min-width: 0; }
.site-title {
	font-family: var(--ss-font-display);
	font-size: 1.35rem; font-weight: 800; color: var(--ss-text); letter-spacing: -.02em;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%;
}
.mobile-nav-toggle, .header-actions { flex-shrink: 0; }

.primary-nav { display: none; }
.primary-menu { display: flex; align-items: center; gap: 4px; }
.primary-menu > li { position: static; } /* static, not relative — lets the mega panel position against .site-header for a true full-width span */
.primary-menu > li > a {
	display: flex; align-items: center; gap: 6px;
	padding: 10px 14px; border-radius: 999px;
	color: var(--ss-text); font-weight: 500; font-size: .95rem;
}
.primary-menu > li > a:hover, .primary-menu > li.current-menu-item > a { background: var(--ss-surface-2); color: var(--ss-text); }
.primary-menu > li.menu-item-has-children > a::after {
	content: ""; width: 8px; height: 8px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg); margin-top: -4px; opacity: .6;
}

/* =====================================================
   Mega-menu panel — auto-populated from the product category
   tree (see inc/mega-menu.php). Spans the FULL viewport width
   (positioned against .site-header, which is the nearest
   positioned ancestor), with its content clamped and centered
   to match the site's normal 1280px container via padding —
   same "full-bleed background, aligned content" trick used by
   most real mega menus, without needing extra markup.
   ===================================================== */
.primary-menu > li.menu-item-has-children > .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	margin: 0;
	background: var(--ss-surface);
	border: none;
	border-top: 1px solid var(--ss-border);
	border-bottom: 1px solid var(--ss-border);
	border-radius: 0;
	box-shadow: var(--ss-shadow-lg);
	padding: 36px max(24px, calc((100vw - 1280px) / 2 + 24px));
	opacity: 0; visibility: hidden; transform: translateY(6px);
	pointer-events: none;
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
	z-index: 50;
	column-gap: 40px;
}
/* Opening/closing is JS-controlled (see initMegaMenu in theme.js) rather
   than pure CSS :hover, so there's a short hover-intent delay before it
   opens — stops it flashing open when the mouse just passes over the nav
   on its way somewhere else.

   pointer-events: none above matters more than it looks: the panel stays
   geometrically in place (full width, right below the header) even while
   "closed" — only opacity/visibility hide it. The nested-submenu rule
   further down explicitly sets visibility: visible on depth-2+ lists (so
   they display inline within their column), which — without this — was
   enough to make that whole invisible strip hoverable/clickable even
   when nothing was actually open, causing the panel to pop open from
   mouse movement nowhere near the actual "Shop" link. */
.primary-menu li.menu-item-has-children.is-open > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
	pointer-events: auto;
}
/* Nested (depth 2+) sub-menus render inline, always visible, as the
   plain link list under their column's bold header. */
.primary-menu .sub-menu .sub-menu {
	position: static; opacity: 1; visibility: visible; transform: none;
	box-shadow: none; border: none; margin: 10px 0 0; padding: 0; background: transparent;
}
/* Columns fill in as a category group has more subcategories to show. */
.primary-menu > li.menu-item-has-children > .sub-menu { column-count: 2; }
.primary-menu > li.menu-item-has-children > .sub-menu:has(> li:nth-child(5)) { column-count: 3; }
.primary-menu > li.menu-item-has-children > .sub-menu:has(> li:nth-child(8)) { column-count: 4; }

.primary-menu .sub-menu > li { break-inside: avoid; margin-bottom: 26px; }
.primary-menu .sub-menu > li:last-child { margin-bottom: 0; }
.primary-menu .sub-menu a {
	display: block; padding: 6px 0; border-radius: var(--ss-radius-sm);
	color: var(--ss-text-muted); font-size: .88rem;
}
.primary-menu .sub-menu a:hover { color: var(--ss-accent); }

/* Column headers — top-level category groups inside the panel. */
.primary-menu .sub-menu > li.menu-item-has-children > a {
	display: flex;
	font-family: var(--ss-font-display); font-weight: 700; font-size: 1rem;
	color: var(--ss-text); padding-bottom: 10px; margin-bottom: 10px;
	border-bottom: 1px solid var(--ss-border);
}
.primary-menu .sub-menu > li.menu-item-has-children > a:hover { color: var(--ss-accent); }

/* flex: 1 (not width: 100%) so this still leaves room for a sibling —
   e.g. the mobile menu's JS-added expand arrow sits next to this, and a
   hard 100% width would push it out of view. */
.menu-item-title-wrap { display: inline-flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.menu-item-icon {
	font-size: 20px; color: var(--ss-accent); line-height: 1; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
}
.primary-menu .sub-menu > li > .sub-menu .menu-item-icon { font-size: 16px; width: 20px; }
.primary-menu .sub-menu > li > .sub-menu .menu-item-title-wrap { gap: 8px; }

.header-actions { display: flex; align-items: center; gap: 6px; }
.header-actions button, .header-actions a {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 999px;
	background: transparent; border: 1px solid transparent; color: var(--ss-text);
}
.header-actions button:hover, .header-actions a:hover { background: var(--ss-surface-2); }

.theme-toggle .icon-moon, .theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.cart-toggle .cart-count {
	position: absolute; top: 2px; right: 2px;
	min-width: 17px; height: 17px; padding: 0 4px;
	border-radius: 999px; background: var(--ss-accent); color: #fff;
	font-size: .65rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
	line-height: 1;
}

/* Mobile nav toggle */
.mobile-nav-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--ss-border);
	background: var(--ss-surface); color: var(--ss-text);
}
.mobile-nav-toggle .icon-close { display: none; }
.mobile-nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.mobile-nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Full-screen rather than a narrow slide-in drawer — the auto-populated
   category menu (with icons, nested subcategories) needs real room, and
   a ~340px sliver made it cramped and prone to text/icon overlap. */
.mobile-nav {
	position: fixed; top: 0; right: 0; height: 100dvh; width: 100vw;
	background: var(--ss-surface); border-left: none;
	transform: translateX(100%); transition: transform .28s ease;
	z-index: 900; overflow-y: auto; overflow-x: hidden;
	padding: calc(var(--ss-header-h) + 16px) 24px 40px;
	box-sizing: border-box;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-menu { width: 100%; }
.mobile-menu li { border-bottom: 1px solid var(--ss-border); }
.mobile-menu a {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 4px; color: var(--ss-text); font-weight: 500;
}
/* Sub-menus start closed — only shown once JS adds .is-open to the parent
   <li> on tap. Without this, every category/subcategory the mega-menu
   auto-injects rendered fully expanded on page load, and the very first
   tap on a parent item then looked like it did nothing (it was already
   "open" as far as the toggle's own state was concerned). */
.mobile-menu .sub-menu { padding-left: 16px; display: none; }
.mobile-menu li.is-open > .sub-menu { display: block; }
.mobile-menu .sub-menu a { color: var(--ss-text-muted); font-weight: 400; padding: 12px 4px; }
.mobile-menu .sub-menu .sub-menu { padding-left: 14px; }
.mobile-menu .submenu-toggle {
	flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
	color: var(--ss-text-faint); font-size: 1.1rem; transition: transform .2s ease;
}
.mobile-menu li.is-open > a > .submenu-toggle { transform: rotate(90deg); color: var(--ss-accent); }
.mobile-nav-account { margin-top: 18px; }
.mobile-nav-account a { display: flex; align-items: center; gap: 8px; color: var(--ss-text); font-weight: 500; }

.mobile-nav-backdrop {
	position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden;
	transition: opacity .28s ease, visibility .28s; z-index: 800;
}
.mobile-nav-backdrop.is-open { opacity: 1; visibility: visible; }

.search-overlay {
	position: fixed; top: 0; left: 0; right: 0; background: var(--ss-bg);
	border-bottom: 1px solid var(--ss-border);
	transform: translateY(-100%); opacity: 0; visibility: hidden;
	transition: transform .22s ease, opacity .22s ease, visibility .22s;
	z-index: 700; padding: 110px 0 40px;
}
.search-overlay.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
/* Base search form (used in the sidebar, 404 page, no-results notice, etc). */
.search-form { position: relative; }
.search-form .search-field { padding-right: 46px; }
.search-form .search-submit {
	position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--ss-accent); color: #fff; border: none;
	display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.search-form .search-submit svg { width: 16px; height: 16px; }

.search-overlay .search-form { max-width: 640px; margin: 0 auto; }
.search-overlay .search-field { font-size: 1.3rem; padding: .9em 3em .9em 1.2em; }
.search-overlay .search-submit { width: 42px; height: 42px; right: 6px; }

/* =========================================================
   6. HERO / HOMEPAGE
   ========================================================= */
.hero { padding: 64px 0 40px; position: relative; overflow: hidden; }
.hero-inner { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.hero-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--ss-accent-soft); color: var(--ss-accent);
	font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.hero-title { font-size: clamp(2.1rem, 5vw, 3.6rem); margin-bottom: .4em; }
.hero-subtitle { font-size: 1.1rem; max-width: 46ch; margin-bottom: 1.8em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* min-width: 0 — same CSS grid item blowout issue fixed elsewhere in
   this theme (product cards): without it, an oversized child can force
   this grid column wider than its track, instead of shrinking to fit. */
.hero-visual { position: relative; min-height: 280px; min-width: 0; display: flex; align-items: center; justify-content: center; }
.hero-content { min-width: 0; }
.hero-glow {
	position: absolute; width: 340px; height: 340px; border-radius: 50%;
	background: radial-gradient(circle, var(--ss-accent) 0%, transparent 70%);
	opacity: .35; filter: blur(10px);
}
/* Floating badge cards — always absolutely positioned against
   .hero-visual (not laid out in flow) so they read as "floating" over
   whatever's behind them, whether that's the decorative glow or a real
   product photo. Anchored near the corners rather than dead-center so
   they don't cover the subject of a photo. */
.hero-card {
	position: absolute; z-index: 2; max-width: 190px;
	display: flex; align-items: center; gap: 10px;
	background: var(--ss-surface); border: 1px solid var(--ss-border);
	padding: 14px 18px; border-radius: var(--ss-radius); box-shadow: var(--ss-shadow);
	font-weight: 600; font-size: .9rem;
}
.hero-card-icon { color: var(--ss-accent); width: 22px; height: 22px; flex-shrink: 0; }
.hero-card-1 { top: 6%; left: -6%; }
.hero-card-2 { bottom: 6%; right: -6%; }

/* Multi-slide hero carousel (see inc/hero-slides.php + front-page.php).
   Each .hero-slide carries its own padding/background so this works
   whether it's a plain slide (decorative glow, like the single-hero
   default) or a full-bleed background-image slide. */
.hero-slider { padding: 0; position: relative; }
.hero-slides { position: relative; }
.hero-slide { display: none; padding: 64px 0 76px; position: relative; overflow: hidden; }
.hero-slide.is-active { display: block; animation: heroFadeIn .5s ease; }
@keyframes heroFadeIn { from { opacity: 0; } to { opacity: 1; } }
.hero-slide.has-bg-image {
	padding: 96px 0 108px;
}
/* The photo lives on a ::before layer (not the slide's own background)
   so it can sit at a fixed, aspect-ratio-correct background-size: cover
   while only its transform animates — animating background-size itself
   (the old approach) scales width/height as two independent percentages,
   which stretches/distorts the photo whenever its natural proportions
   don't match the slide's. Scaling via transform instead grows the
   image uniformly, so proportions are always preserved; .hero-slide's
   existing overflow:hidden clips the zoomed edges. */
.hero-slide.has-bg-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--hero-bg-image);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	transform-origin: 50% 50%;
	will-change: transform;
	/* Slow, continuous drift/zoom (a "Ken Burns" effect) rather than a
	   static photo — restarts each time a slide becomes active. */
	animation: ss-hero-kenburns 22s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
	.hero-slide.has-bg-image::before { animation: none; }
}
@keyframes ss-hero-kenburns {
	from { transform: scale(1.06) translate(-1.5%, -1%); }
	to   { transform: scale(1.16) translate(1.5%, 1%); }
}
.hero-slide-overlay {
	position: absolute; inset: 0; z-index: 0;
	/* --hero-overlay-opacity is set inline per-slide (Slide Content meta
	   box in wp-admin) — higher darkens the photo for readability, lower
	   lets more of it show through. Bottom stop is capped well short of
	   fully solid so the photo still reads all the way to the bottom
	   edge instead of the gradient flattening out into a hard band of
	   solid colour partway down. */
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--ss-bg) var(--hero-overlay-opacity, 55%), transparent) 0%,
		color-mix(in srgb, var(--ss-bg) min(80%, calc(var(--hero-overlay-opacity, 55%) + 20%)), transparent) 100%
	);
}
.hero-slide.has-bg-image .hero-inner { position: relative; z-index: 1; }
.hero-slide.has-bg-image .hero-title,
.hero-slide.has-bg-image .hero-subtitle { color: #fff; }
.hero-slide.has-bg-image .hero-eyebrow { background: rgba(255, 255, 255, .18); color: #fff; }

/* Side-image layout: a real photo in the hero-visual column (instead of
   the decorative glow) with the floating badge cards layered on top,
   same as the default hero's composition. */
/* !important throughout: WordPress's core image markup carries explicit
   width/height HTML attributes (from the registered image size), and
   WooCommerce Blocks CSS (loaded for the Product Filters feature) has
   repeatedly won sizing fights against plain rules elsewhere in this
   theme (product card photos, gallery thumbnails) — same fix here. */
.hero-visual-image {
	position: relative; z-index: 1;
	display: block !important;
	width: 100% !important;
	max-width: 460px !important;
	height: auto !important;
	aspect-ratio: 4 / 3 !important;
	object-fit: cover !important;
	border-radius: var(--ss-radius-lg); box-shadow: var(--ss-shadow-lg);
	border: 1px solid var(--ss-border);
}

/* Overlaid on the bottom of the active slide (not a separate row below
   it) — previously this sat in normal flow underneath .hero-slides,
   which read as a flat, disconnected black bar under the photo. The
   prev/next buttons and dots all use solid (non-transparent) surface
   colours already, so they stay legible over any part of the image. */
.hero-slider-nav {
	display: flex; align-items: center; justify-content: center; gap: 16px;
	position: absolute; left: 0; right: 0; bottom: 22px; z-index: 2;
}
.hero-slider-prev, .hero-slider-next {
	flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid var(--ss-border); background: var(--ss-surface); color: var(--ss-text);
	display: inline-flex; align-items: center; justify-content: center;
}
.hero-slider-prev:hover, .hero-slider-next:hover { background: var(--ss-surface-2); }
.hero-slider-prev svg, .hero-slider-next svg { width: 16px; height: 16px; }
.hero-slider-prev svg { transform: rotate(180deg); }
.hero-slider-dots { display: flex; gap: 8px; }
.hero-slider-dot {
	width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
	background: var(--ss-border-strong);
	transition: background .2s ease, transform .2s ease;
}
.hero-slider-dot.is-active { background: var(--ss-accent); transform: scale(1.35); }

.usp-strip { border-top: 1px solid var(--ss-border); border-bottom: 1px solid var(--ss-border); background: var(--ss-bg-alt); }
.usp-strip-inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 22px 0; }
.usp-item { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .88rem; color: var(--ss-text-muted); }
.usp-item svg { color: var(--ss-accent); flex-shrink: 0; }

.section-title { font-size: 1.6rem; }
.section-heading-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; gap: 12px; flex-wrap: wrap; }
.section-link { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.category-strip { padding: 56px 0 8px; }
.category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; }
.category-card {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius);
	padding: 26px 12px; text-align: center; transition: transform .18s ease, border-color .18s ease;
}
.category-card:hover { transform: translateY(-3px); border-color: var(--ss-accent); }
.category-card img { width: 52px; height: 52px; object-fit: cover; border-radius: 50%; }
.category-card-fallback {
	width: 52px; height: 52px; border-radius: 50%; background: var(--ss-accent-soft); color: var(--ss-accent);
	display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.3rem;
}
.category-card-icon {
	width: 52px; height: 52px; border-radius: 50%; background: var(--ss-accent-soft); color: var(--ss-accent);
	display: flex; align-items: center; justify-content: center; transition: background .18s ease, color .18s ease;
}
.category-card-icon .mdi { font-size: 26px; line-height: 1; }
.category-card:hover .category-card-icon { background: var(--ss-accent); color: #fff; }
.category-card-name { font-weight: 600; font-size: .9rem; color: var(--ss-text); }

.featured-products { padding: 56px 0; }
.empty-shop-notice { padding: 40px; text-align: center; border: 1px dashed var(--ss-border-strong); border-radius: var(--ss-radius); }

.newsletter-cta { background: var(--ss-surface); border-top: 1px solid var(--ss-border); border-bottom: 1px solid var(--ss-border); padding: 48px 0; }
.newsletter-cta-inner { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.newsletter-cta p { margin-bottom: 0; }
.newsletter-form { display: flex; gap: 10px; width: 100%; }
.newsletter-form input { flex: 1; }

/* =========================================================
   7. PRODUCT GRID / CARDS (WooCommerce loop)
   ========================================================= */
ul.products.smart-shack-product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	min-width: 0;
}
ul.products.smart-shack-product-grid::before,
ul.products.smart-shack-product-grid::after { content: none !important; }
/* min-width: 0 on the grid items themselves — CSS grid items default to
   min-width: auto, which lets an image's intrinsic size push a card wider
   than its column track on narrow (mobile) screens instead of shrinking
   to fit. That mismatch between the actual rendered column and the image
   trying to keep its natural size is what read as "squashed". */
.product-card { list-style: none; min-width: 0; }
.product-card-inner {
	background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius);
	overflow: hidden; height: 100%; display: flex; flex-direction: column;
	min-width: 0;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.product-card-inner:hover { transform: translateY(-4px); border-color: var(--ss-border-strong); box-shadow: var(--ss-shadow); }
.product-card-media { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; background: var(--ss-surface-2); overflow: hidden; }
/* !important: WooCommerce Blocks CSS (loaded for Product Filters) can
   also set width/height/object-fit on product images and, depending on
   load order, was winning — stretching non-square photos to fill the
   square card instead of cropping them, which looked squished. */
.product-card-media img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	transition: transform .4s ease;
}
.product-card-inner:hover .product-card-media img { transform: scale(1.05); }
.product-card-media .onsale, .out-of-stock-badge {
	position: absolute; top: 10px; left: 10px; z-index: 2;
	background: var(--ss-accent); color: #fff; font-size: .7rem; font-weight: 700;
	padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em;
}
.out-of-stock-badge { background: var(--ss-text-faint); left: auto; right: 10px; }
.product-card-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card-cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ss-text-faint); font-weight: 600; }
.product-card-title { font-size: 1rem; margin: 0; }
.product-card-title a { color: var(--ss-text); }
.product-card-rating .star-rating { color: var(--ss-star); font-size: .85rem; }
.product-card-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; }
.product-card-price, .price { font-family: var(--ss-font-display); font-weight: 700; color: var(--ss-text); }
.price del { color: var(--ss-text-faint); font-weight: 400; margin-right: 6px; }
.price ins { text-decoration: none; }
.woocommerce-price-suffix { font-family: var(--ss-font-body); font-size: .62em; font-weight: 500; color: var(--ss-text-faint); text-transform: none; margin-left: 3px; letter-spacing: 0; }
/* !important + a text-indent/overflow-clip pattern (rather than relying on
   font-size:0) because WooCommerce Blocks CSS (loaded for the Product
   Filters feature) also targets .add_to_cart_button and can reset
   font-size back to normal depending on load order. Clipping the text via
   fixed width + overflow:hidden + text-indent survives that, and the "+"
   is an absolutely-positioned pseudo-element with its own font-size so
   it's unaffected either way. */
.product-card-footer .add_to_cart_button {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	max-width: 38px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-indent: 200% !important;
	box-sizing: border-box !important;
	background: var(--ss-accent-soft);
	color: transparent !important;
	border: 1px solid transparent;
	flex-shrink: 0;
}
.product-card-footer .add_to_cart_button::before {
	content: "+";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-indent: 0;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1;
	color: var(--ss-accent);
}
.product-card-footer .add_to_cart_button:hover { background: var(--ss-accent); }
.product-card-footer .add_to_cart_button:hover::before { color: #fff; }
.product-card-footer .added_to_cart { display: none; }

.shop-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin: 8px 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--ss-border); flex-wrap: wrap; }
.shop-toolbar-order select { width: auto; min-width: 180px; }

.star-rating { overflow: hidden; position: relative; height: 1em; line-height: 1; width: 5.4em; font-family: serif; }
.star-rating::before { content: "☆☆☆☆☆"; color: var(--ss-star); float: left; top: 0; left: 0; position: absolute; }
.star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; }
.star-rating span::before { content: "★★★★★"; color: var(--ss-star); position: absolute; top: 0; left: 0; }

/* =========================================================
   8. SINGLE PRODUCT
   ========================================================= */
.woocommerce div.product {
	display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 56px;
}
/* Custom product gallery (woocommerce/single-product/product-image.php) —
   replaces WooCommerce's default flexslider + PhotoSwipe zoom gallery, so
   this theme fully controls sizing (no more squashed thumbnails) and
   there's no magnifier/zoom icon. */
.smart-shack-gallery { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.smart-shack-gallery-main {
	position: relative; aspect-ratio: 1 / 1; width: 100%;
	background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius);
	overflow: hidden;
}
.smart-shack-gallery-main-item {
	position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.smart-shack-gallery-main-item.is-active { opacity: 1; pointer-events: auto; }
.smart-shack-gallery-main-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.smart-shack-gallery-main .onsale {
	position: absolute; top: 14px; left: 14px; z-index: 2;
	background: var(--ss-accent); color: #fff; font-size: .75rem; font-weight: 700;
	padding: 5px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em;
}
.smart-shack-gallery-thumbs {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px;
}
.smart-shack-gallery-thumb {
	aspect-ratio: 1 / 1; min-width: 0; border-radius: var(--ss-radius-sm); overflow: hidden;
	border: 2px solid transparent; background: var(--ss-surface-2); padding: 0; cursor: pointer;
	opacity: .65; transition: border-color .2s ease, opacity .2s ease;
}
.smart-shack-gallery-thumb:hover { opacity: 1; }
.smart-shack-gallery-thumb.is-active { border-color: var(--ss-accent); opacity: 1; }
.smart-shack-gallery-thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.smart-shack-gallery--placeholder img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--ss-radius); }

.woocommerce div.product .product_title { font-size: 1.9rem; margin-bottom: .3em; }
.woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 1.6rem; color: var(--ss-text); margin-bottom: .6em; display: inline-block; }
.woocommerce div.product .woocommerce-product-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 1.2em; }
.woocommerce div.product .woocommerce-review-link { color: var(--ss-text-muted); font-size: .9rem; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--ss-text-muted); margin-bottom: 1.4em; }

.woocommerce div.product form.cart {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius);
	padding: 18px; margin-bottom: 1.6em;
}
.woocommerce div.product form.cart .quantity { margin: 0; }

/* Touch-friendly quantity stepper — JS (initQuantitySteppers in theme.js)
   wraps every .quantity input with visible −/+ buttons instead of relying
   on the browser's tiny native number-input spinner arrows, which are
   awkward to tap accurately on mobile. Applies wherever WooCommerce
   renders a quantity field: single product, cart table, mini-cart. */
.quantity {
	display: inline-flex; align-items: stretch;
	border: 1px solid var(--ss-border); border-radius: var(--ss-radius-sm);
	overflow: hidden; background: var(--ss-surface);
}
.quantity .qty {
	width: 48px; min-width: 0; border: none; border-radius: 0;
	text-align: center; padding: .7em .3em; background: transparent;
	-moz-appearance: textfield;
}
.quantity .qty:focus { box-shadow: none; }
.quantity .qty::-webkit-inner-spin-button,
.quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-btn {
	flex-shrink: 0; width: 38px; min-height: 40px; border: none;
	background: var(--ss-surface-2); color: var(--ss-text);
	font-size: 1.15rem; font-weight: 600; line-height: 1;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.qty-btn:hover { background: var(--ss-border-strong); }
.qty-btn:active { background: var(--ss-accent); color: #fff; }
/* Variation attribute picker (variable products) — a plain, themed
   <select> dropdown per attribute row (WooCommerce's default markup is a
   bare, unstyled browser control on a dark theme, so this just re-skins
   it: dark background, custom chevron, consistent spacing — the native
   dropdown behaviour, AJAX price/stock updates etc. are all untouched). */
table.variations { width: 100%; border: none; margin-bottom: 0; }
table.variations tbody, table.variations tr, table.variations td { display: block; }
table.variations tr { margin-bottom: 18px; }
table.variations tr:last-child { margin-bottom: 0; }
table.variations td { padding: 0; border: none; }
table.variations td.label {
	font-size: .8rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: .04em; color: var(--ss-text-muted); margin-bottom: 8px;
}
table.variations td.label label { margin: 0; }
table.variations select {
	width: 100%; min-width: 0; max-width: 320px;
	padding: .7em 2.2em .7em 1em; background-color: var(--ss-surface); color: var(--ss-text);
	border: 1px solid var(--ss-border); border-radius: var(--ss-radius-sm);
	appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a0a8c0'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%23a0a8c0' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}

.single_variation_wrap { margin-top: 4px; }
.woocommerce-variation {
	background: var(--ss-surface-2); border: 1px solid var(--ss-border);
	border-radius: var(--ss-radius-sm); padding: 14px 16px; margin-bottom: 1em;
}
.woocommerce-variation:empty { display: none; margin: 0; padding: 0; border: 0; }
.woocommerce-variation-price .price { font-size: 1.3rem; margin: 0 0 .3em; display: block; }
.woocommerce-variation-availability .stock { margin: 0; font-size: .88rem; }
.woocommerce-variation-availability .in-stock { color: var(--ss-success); }
.woocommerce-variation-availability .out-of-stock { color: var(--ss-danger); }
.woocommerce-variation-description { font-size: .88rem; color: var(--ss-text-muted); margin-top: .5em; }
.woocommerce-variation-description > *:last-child { margin-bottom: 0; }
a.reset_variations {
	display: inline-block; margin-top: 10px; font-size: .82rem;
	color: var(--ss-text-muted); text-decoration: underline;
}
a.reset_variations:hover { color: var(--ss-accent); }

.woocommerce-product-meta { font-size: .88rem; color: var(--ss-text-faint); border-top: 1px solid var(--ss-border); padding-top: 14px; }
.woocommerce-product-meta > span { display: block; margin-bottom: 4px; }
.woocommerce-product-meta a { color: var(--ss-text-muted); }

/* .woocommerce div.product is a 2-column grid (gallery | summary) — the
   tabs and related/upsell products are siblings that follow it, so they
   need to explicitly span both columns or they'd get squeezed into a
   single grid cell instead of running the full width of the product. */
.woocommerce-tabs { margin-top: 40px; grid-column: 1 / -1; }
.woocommerce-tabs ul.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--ss-border); margin-bottom: 24px; flex-wrap: wrap; }
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a { display: inline-block; padding: 12px 18px; color: var(--ss-text-muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.woocommerce-tabs ul.tabs li.active a { color: var(--ss-accent); border-color: var(--ss-accent); }
.woocommerce-tabs .panel { max-width: none; }
.woocommerce-Tabs-panel--additional_information h2 { font-size: 1.3rem; margin-bottom: 20px; }

/* "Additional information" tab — WooCommerce's default markup is a bare
   <table> with no borders/background/column widths, so rows just read as
   ragged, inconsistently-indented text. Turned into a proper bordered
   card with a fixed-width label column so every row lines up. */
table.woocommerce-product-attributes {
	width: 100%; border-collapse: collapse;
	background: var(--ss-surface); border: 1px solid var(--ss-border);
	border-radius: var(--ss-radius); overflow: hidden;
}
table.woocommerce-product-attributes tr { border-bottom: 1px solid var(--ss-border); }
table.woocommerce-product-attributes tr:last-child { border-bottom: none; }
table.woocommerce-product-attributes th,
table.woocommerce-product-attributes td {
	padding: 14px 20px; text-align: left; vertical-align: top; font-weight: 400; font-size: .92rem;
}
table.woocommerce-product-attributes th.woocommerce-product-attributes-item__label {
	width: 220px; font-weight: 700; color: var(--ss-text); background: var(--ss-surface-2);
}
table.woocommerce-product-attributes td.woocommerce-product-attributes-item__value {
	color: var(--ss-text-muted);
}
table.woocommerce-product-attributes td.woocommerce-product-attributes-item__value p { margin: 0; }
@media (max-width: 599px) {
	table.woocommerce-product-attributes { display: block; }
	table.woocommerce-product-attributes tbody { display: block; }
	table.woocommerce-product-attributes tr { display: block; padding: 10px 0; }
	table.woocommerce-product-attributes th,
	table.woocommerce-product-attributes td { display: block; width: auto; padding: 2px 16px; }
	table.woocommerce-product-attributes th.woocommerce-product-attributes-item__label {
		background: transparent; padding-top: 12px; padding-bottom: 4px; font-size: .8rem;
		text-transform: uppercase; letter-spacing: .03em; color: var(--ss-text-muted);
	}
	table.woocommerce-product-attributes td.woocommerce-product-attributes-item__value { padding-bottom: 12px; }
}

.related.products, .upsells.products { margin-top: 56px; grid-column: 1 / -1; }
.related.products > h2, .upsells.products > h2 { font-size: 1.5rem; margin-bottom: 24px; }

.manual-download-button {
	display: inline-flex; width: 100%; margin-bottom: 1.6em;
}
.manual-download-button svg { width: 18px; height: 18px; }

/* =========================================================
   9. CART / CHECKOUT
   ========================================================= */
.woocommerce-cart table.shop_table, .woocommerce-checkout table.shop_table {
	width: 100%; border-collapse: collapse; background: var(--ss-surface);
	border: 1px solid var(--ss-border); border-radius: var(--ss-radius); overflow: hidden;
}
.shop_table th, .shop_table td { padding: 14px 16px; border-bottom: 1px solid var(--ss-border); text-align: left; }
.shop_table thead th { background: var(--ss-surface-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-text-muted); }
.shop_table tr:last-child td { border-bottom: none; }
.product-remove a.remove {
	display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
	border-radius: 50%; background: var(--ss-danger-soft); color: var(--ss-danger) !important; font-weight: 700;
}
.woocommerce-cart-form .product-thumbnail img { width: 64px; border-radius: var(--ss-radius-sm); }
.cart-collaterals { margin-top: 32px; display: grid; gap: 24px; }
.cart_totals { background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius); padding: 22px; }
.cart_totals h2 { font-size: 1.2rem; }
.wc-proceed-to-checkout { margin-top: 16px; }
.wc-proceed-to-checkout a.checkout-button { display: flex; width: 100%; }

.woocommerce-checkout .col2-set { display: grid; gap: 24px; }
.woocommerce-checkout h3 { font-size: 1.2rem; margin-top: 1.4em; }
.woocommerce-checkout .form-row { margin-bottom: 14px; }
.woocommerce-checkout #order_review {
	background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius); padding: 20px;
}
.woocommerce-checkout-payment { background: var(--ss-surface-2); border-radius: var(--ss-radius); padding: 18px; margin-top: 16px; }
.woocommerce-checkout-payment ul.payment_methods { border: none; padding: 0; }
.woocommerce-checkout-payment li { padding: 10px 0; border-bottom: 1px solid var(--ss-border); }

.woocommerce-form-coupon-toggle, .woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-noreviews {
	background: var(--ss-accent-soft); border: 1px solid var(--ss-accent); color: var(--ss-text);
	border-radius: var(--ss-radius-sm); padding: 14px 18px; list-style: none; margin-bottom: 20px;
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.woocommerce-error { background: var(--ss-danger-soft); border-color: var(--ss-danger); }
.woocommerce-message .button { margin-left: auto; }

/* =========================================================
   10. MY ACCOUNT
   ========================================================= */
.woocommerce-account .woocommerce-MyAccount-navigation ul { border: 1px solid var(--ss-border); border-radius: var(--ss-radius); overflow: hidden; background: var(--ss-surface); }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--ss-border); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-account .woocommerce-MyAccount-navigation a { display: block; padding: 14px 18px; color: var(--ss-text-muted); font-weight: 500; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--ss-accent); background: var(--ss-accent-soft); }
.woocommerce-account .woocommerce-MyAccount-content { margin-top: 24px; }
.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--ss-danger); }

/* =========================================================
   11. BLOG / POST CARDS / SIDEBAR
   ========================================================= */
.content-layout { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.post-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.post-card { background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius); overflow: hidden; }
.post-card-media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.post-card-body { padding: 22px; }
.post-card-meta { font-size: .8rem; color: var(--ss-text-faint); display: flex; gap: 12px; margin-bottom: 10px; }
.post-card-meta svg { width: 14px; height: 14px; display: inline; vertical-align: -2px; margin-right: 4px; }
.post-card-title { font-size: 1.3rem; }
.post-card-title a { color: var(--ss-text); }
.post-card-readmore { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin-top: 6px; }
.post-card-footer { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ss-border); font-size: .85rem; }
.post-card-footer span { margin-right: 10px; color: var(--ss-text-faint); }

.widget { background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius); padding: 20px; margin-bottom: 20px; }
.widget-title { font-size: 1rem; margin-bottom: .8em; }
.widget ul li { padding: 6px 0; border-bottom: 1px solid var(--ss-border); }
.widget ul li:last-child { border-bottom: none; }
.widget a { color: var(--ss-text-muted); }

/* Shop sidebar — the "Filter Products" widgets (Price / Category /
   Availability etc.) get generic card treatment here since their exact
   markup comes from WooCommerce/plugin widgets, not this theme. Sticks
   in view while scrolling the grid, with its own scroll if it runs
   taller than the viewport. */
.shop-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
@media (min-width: 900px) {
	.shop-sidebar {
		position: sticky;
		top: calc(var(--ss-header-h) + 20px);
		max-height: calc(100vh - var(--ss-header-h) - 40px);
		overflow-y: auto;
		padding-right: 4px;
	}
	.shop-sidebar::-webkit-scrollbar { width: 6px; }
	.shop-sidebar::-webkit-scrollbar-thumb { background: var(--ss-border-strong); border-radius: 999px; }
}
.shop-sidebar > * {
	background: var(--ss-surface);
	border: 1px solid var(--ss-border);
	border-radius: var(--ss-radius);
	padding: 20px;
	flex-shrink: 0;
	max-width: 100%;
	box-sizing: border-box;
}
/* Safety net: filter widget markup comes from WooCommerce/plugin blocks
   (price slider, number inputs, etc.), not this theme, so nothing in
   here should ever be allowed to force the card wider than its column
   and cause horizontal overflow. */
.shop-sidebar * { max-width: 100%; box-sizing: border-box; }
.shop-sidebar-search .search-form { margin: 0; }
.shop-sidebar h1, .shop-sidebar h2, .shop-sidebar h3, .shop-sidebar h4 {
	font-size: 1rem;
	margin-bottom: .8em;
}
.shop-sidebar label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--ss-text-muted);
	font-size: .9rem;
	font-weight: 400;
	margin-bottom: 10px;
	cursor: pointer;
}
.shop-sidebar input[type="checkbox"],
.shop-sidebar input[type="radio"] {
	width: 16px;
	height: 16px;
	accent-color: var(--ss-accent);
	cursor: pointer;
	flex-shrink: 0;
}
.shop-sidebar input[type="range"] {
	width: 100%;
	accent-color: var(--ss-accent);
}
.shop-sidebar input[type="number"] {
	width: auto;
	max-width: 90px;
	padding: .5em .6em;
}
/* Generic filter "Apply"-style buttons get the theme's ghost-button look
   (small, subtle) rather than a full-width solid CTA — this also covers
   "Show N more" toggle buttons, which shouldn't look like a primary
   action. The search button is explicitly excluded: it has its own
   circular, absolutely-positioned style further up and would otherwise
   get stretched to 100% width by this rule too. */
.shop-sidebar button:not(.search-submit),
.shop-sidebar [type="submit"]:not(.search-submit),
.shop-sidebar [type="button"]:not(.search-submit) {
	margin-top: 10px;
	width: auto;
	max-width: 100%;
	padding: .55em 1.1em;
	font-size: .85rem;
	background: transparent;
	color: var(--ss-text-muted);
	border: 1px solid var(--ss-border-strong);
	white-space: normal;
}
.shop-sidebar button:not(.search-submit):hover,
.shop-sidebar [type="submit"]:not(.search-submit):hover,
.shop-sidebar [type="button"]:not(.search-submit):hover {
	background: var(--ss-surface-2);
	color: var(--ss-text);
}
.shop-sidebar-search .search-form { margin-bottom: 0; }

/* Numbered pagination — shared styling for the blog (.smart-shack-pagination)
   and WooCommerce's own shop pagination (.woocommerce-pagination), which by
   default renders as a bare <ul><li> list with no theme styling. */
.smart-shack-pagination,
.woocommerce-pagination {
	margin-top: 40px;
}
.smart-shack-pagination .nav-links,
.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-pagination ul.page-numbers li {
	display: inline-flex;
	list-style: none;
}
.smart-shack-pagination .page-numbers,
.woocommerce-pagination .page-numbers {
	min-width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid var(--ss-border);
	background: var(--ss-surface);
	color: var(--ss-text-muted);
	padding: 0 14px;
	font-weight: 600;
	font-size: .9rem;
	transition: all .15s ease;
}
.smart-shack-pagination a.page-numbers:hover,
.woocommerce-pagination a.page-numbers:hover {
	background: var(--ss-surface-2);
	color: var(--ss-text);
	border-color: var(--ss-border-strong);
}
.smart-shack-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers.current {
	background: var(--ss-accent);
	color: #fff;
	border-color: var(--ss-accent);
}
.smart-shack-pagination .page-numbers.dots,
.woocommerce-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	min-width: auto;
	padding: 0 4px;
}

/* Infinite scroll (progressive enhancement over the pagination above) */
.is-infinite-hidden { display: none !important; }
.infinite-scroll-sentinel { height: 1px; }
.infinite-scroll-loader {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 32px 0;
}
.infinite-scroll-loader span {
	width: 9px; height: 9px; border-radius: 50%; background: var(--ss-accent);
	animation: ss-bounce 1s infinite ease-in-out both;
}
.infinite-scroll-loader span:nth-child(2) { animation-delay: .15s; }
.infinite-scroll-loader span:nth-child(3) { animation-delay: .3s; }
@keyframes ss-bounce {
	0%, 80%, 100% { transform: scale(.6); opacity: .5; }
	40% { transform: scale(1); opacity: 1; }
}
.infinite-scroll-end {
	text-align: center; padding: 32px 0; color: var(--ss-text-faint); font-size: .88rem;
}

.site-main { display: block; padding-top: 36px; padding-bottom: 24px; }
.site-main.woocommerce-page { padding-bottom: 60px; }
.site-main.front-page { padding-top: 0; } /* hero section already provides its own top spacing */

.smart-shack-breadcrumbs, .woocommerce-breadcrumb { font-size: .82rem; color: var(--ss-text-faint); margin: 0 0 24px; }
.smart-shack-breadcrumbs a, .woocommerce-breadcrumb a { color: var(--ss-text-faint); }
.smart-shack-breadcrumbs .sep, .woocommerce-breadcrumb { margin: 0 6px; }

.page-header { padding: 0 0 28px; }
.page-title { font-size: 2rem; }
.page-featured-image img { border-radius: var(--ss-radius); margin-bottom: 24px; }
.page-body { max-width: 76ch; }
.page-body img { border-radius: var(--ss-radius); }

.post-navigation { display: flex; justify-content: space-between; gap: 20px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--ss-border); }
.post-navigation a { display: block; background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius); padding: 14px 18px; }
.nav-subtitle { display: block; font-size: .75rem; color: var(--ss-text-faint); text-transform: uppercase; letter-spacing: .04em; }
.nav-title { color: var(--ss-text); font-weight: 600; }

.error-404 { text-align: center; padding: 80px 0; max-width: 560px; margin: 0 auto; }
.error-code { font-family: var(--ss-font-display); font-size: 5rem; font-weight: 800; color: var(--ss-accent); display: block; }
.error-404 .search-form { margin: 24px auto; max-width: 420px; position: relative; }
.error-404 .button { margin-top: 12px; }

/* =========================================================
   11b. COMMENTS
   ========================================================= */
.comments-area { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--ss-border); }
.comments-title { font-size: 1.3rem; }
.comment-list { list-style: none; margin: 24px 0; }
.comment-list .comment-body {
	background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: var(--ss-radius);
	padding: 18px; margin-bottom: 16px;
}
.comment-list .children { list-style: none; padding-left: 28px; }
.comment-author { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.comment-author .avatar { border-radius: 50%; }
.comment-author .fn { font-style: normal; font-weight: 600; color: var(--ss-text); }
.comment-metadata { font-size: .78rem; color: var(--ss-text-faint); }
.comment-metadata a { color: var(--ss-text-faint); }
.comment-reply-link { font-size: .82rem; font-weight: 600; }
.comment-respond { margin-top: 24px; }
.comment-form p { margin-bottom: 14px; }
.comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; }
.comment-form-cookies-consent input { width: auto; }

/* =========================================================
   12. FOOTER
   ========================================================= */
.site-footer { border-top: 1px solid var(--ss-border); margin-top: 64px; background: var(--ss-bg-alt); }
.footer-top { padding: 56px 0 32px; }
.footer-columns { display: grid; grid-template-columns: 1fr; gap: 36px; }
.footer-brand .site-title { font-size: 1.3rem; }
/* the_custom_logo() has its own <img> with native width/height attributes
   from the uploaded file — the header constrains its logo via
   .site-branding img (var(--ss-logo-height)), but that selector never
   reaches this footer copy, so without a rule here it renders at full
   uploaded size (e.g. a large square logo shows "massive" and looks
   stretched next to the tagline text). Sized smaller/fixed here since
   the footer is a much tighter column than the header bar. */
.footer-brand .custom-logo-link { display: inline-block; }
.footer-brand img.custom-logo { max-height: 32px; width: auto; display: block; }
.footer-tagline { max-width: 40ch; margin-top: 10px; }
.footer-trust { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.footer-trust span { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--ss-text-muted); }
.footer-trust svg { color: var(--ss-accent); width: 18px; height: 18px; }
/* Whatever gets dropped into the footer widget columns (footer-1/2/3/4)
   should read exactly like the plain Quick Links menu next to it — no
   card background/border, no divider lines. This has to cover two very
   different possible markups: a classic widget (wrapped in the .widget
   div this theme's register_sidebar() adds) AND a block dropped straight
   into WordPress's block-based widgets editor — e.g. a native "Page
   List" block, which renders its own markup (ul.wp-block-page-list,
   li.wp-block-pages-list__item) with NO .widget wrapper and no title at
   all, so selectors scoped to ".widget" alone never reach it. !important
   throughout because a block's own default styling (and WordPress's
   sitewide block-library base CSS) otherwise wins outright — the same
   kind of specificity fight already handled elsewhere in this theme
   against WooCommerce Blocks CSS. */
.footer-widget-col,
.footer-widget-col > div,
.footer-widget-col .widget,
.footer-widget-col ul,
.footer-widget-col ol {
	background: transparent !important; border: none !important;
	border-radius: 0 !important; box-shadow: none !important;
	padding: 0 !important; list-style: none !important;
}
.footer-widget-col .widget { margin: 0; }
.footer-widget-col li,
.footer-widget-col .wp-block-pages-list__item,
.footer-widget-col .page_item {
	background: none !important; border: none !important;
	padding: 5px 0 !important; margin: 0 !important;
}
.footer-widget-col .widget-title,
.footer-widget-col h1, .footer-widget-col h2, .footer-widget-col h3,
.footer-widget-col h4, .footer-widget-col h5, .footer-widget-col h6 {
	font-size: .9rem; text-transform: uppercase; letter-spacing: .04em;
	color: var(--ss-text-faint); margin: 0 0 .8em;
}
.footer-widget-col a { color: var(--ss-text-muted); }
.footer-widget-col a:hover { color: var(--ss-accent); }
.footer-widget-col select { width: 100%; }
.footer-bottom { border-top: 1px solid var(--ss-border); padding: 20px 0; }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.footer-copyright { font-size: .82rem; color: var(--ss-text-faint); margin: 0; }
.back-to-top { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ss-border); background: var(--ss-surface); color: var(--ss-text); display: inline-flex; align-items: center; justify-content: center; }
.back-to-top svg { transform: rotate(-90deg); width: 16px; height: 16px; }

/* =========================================================
   13. RESPONSIVE
   ========================================================= */
@media (min-width: 700px) {
	.usp-strip-inner { grid-template-columns: repeat(4, 1fr); }
	.category-grid { grid-template-columns: repeat(3, 1fr); }
	ul.products.smart-shack-product-grid { grid-template-columns: repeat(3, 1fr); }
	.newsletter-cta-inner { flex-direction: row; align-items: center; justify-content: space-between; }
	.newsletter-form { width: auto; min-width: 380px; }
	.footer-columns { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
	.woocommerce div.product { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
	.mobile-nav-toggle { display: none; }
	.primary-nav { display: block; }
	.hero-inner { grid-template-columns: 1.1fr .9fr; }
	/* A slide with only a background image and no side image/badges skips
	   the visual column entirely — let the text take the full width
	   instead of leaving an empty second column. */
	.hero-inner:not(:has(.hero-visual)) { grid-template-columns: 1fr; }
	.category-grid { grid-template-columns: repeat(6, 1fr); }
	ul.products.smart-shack-product-grid { grid-template-columns: repeat(4, 1fr); }
	/* Only split into two columns when there's actually a sidebar to show —
	   keeps the shop grid full-width on pages with no filter widgets. */
	.content-layout:has(.content-sidebar) { grid-template-columns: 2.4fr 1fr; }
}

@media (max-width: 899px) {
	.search-overlay { padding-top: calc(var(--ss-header-h) + 20px); }

	/* Extra breathing room in the cramped mobile header row (menu toggle
	   + logo + search/theme/account/cart icons all fit on one line). */
	.header-inner { gap: 10px; }
	.site-title { font-size: 1.1rem; }

	/* Filters read above the product grid on mobile/tablet rather than
	   buried underneath it — the "Filter products" toggle these blocks
	   ship with keeps this compact until someone taps it open. */
	.content-layout:has(.shop-sidebar) .shop-sidebar { order: -1; margin-bottom: 8px; }

	/* Tighter card padding + smaller price inputs so filter widgets
	   (price range, checkboxes) have enough room on narrow screens
	   without forcing horizontal scroll. */
	.shop-sidebar > * { padding: 16px; }
	.shop-sidebar input[type="number"] { max-width: 64px; padding: .5em .4em; font-size: .85rem; }
	.shop-sidebar label { font-size: .85rem; }

	/* Mobile off-canvas menu: keep auto-injected category icons compact
	   and evenly aligned regardless of nesting depth. */
	.mobile-menu .menu-item-icon { font-size: 18px; width: 22px; text-align: center; }
	.mobile-menu .sub-menu .menu-item-icon { font-size: 16px; width: 20px; }
	.mobile-menu .menu-item-title-wrap { gap: 10px; }
	.mobile-menu li.menu-item-has-children > a { font-weight: 600; }

	/* Hero slider: less vertical padding so a background-image slide
	   doesn't push content off-screen, and bigger, easier-to-tap prev/
	   next buttons. */
	.hero-slide { padding: 40px 0 64px; }
	.hero-slide.has-bg-image { padding: 56px 0 76px; }
	.hero-title { font-size: clamp(1.8rem, 7vw, 2.6rem); }
	.hero-slider-nav { bottom: 14px; }
	.hero-slider-prev, .hero-slider-next { width: 44px; height: 44px; }

	/* Product gallery: smaller thumbnails so 4–5 fit comfortably without
	   crowding the screen edge-to-edge. */
	.smart-shack-gallery-thumbs { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; }

	/* Bigger tap targets on the quantity stepper buttons. */
	.qty-btn { width: 42px; min-height: 44px; }
	.quantity .qty { width: 40px; }
}

@media (min-width: 640px) {
	.woocommerce-cart-form .product-thumbnail img { width: 84px; }
}

/* Below ~420px, two columns leaves each product image quite small and
   cramped against the card padding/text — a single column gives it
   proper room instead of looking squashed. */
@media (max-width: 420px) {
	ul.products.smart-shack-product-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   17. DYNAMIC COLOUR THEME (optional, Customizer-controlled)
   ---------------------------------------------------------
   Once activated (see assets/js/theme.js → initDynamicColors),
   JS builds a 2–3 colour palette (default, or fully custom from
   the Customizer) and drives two things in tandem:

   - --ss-dyn-gradient: a real multi-stop gradient built from the
     palette. Always shows every colour at once, travelling via
     the @keyframes below — used for the top bar, animated box
     edges (background-clip "gradient border" trick, still
     respects border-radius) and primary buttons.
   - --ss-accent (+ hover/active/soft) and --ss-star: a single
     solid colour continuously interpolated between the same
     palette stops every animation frame, for text links, icons,
     badges, the mega menu and the hero glow, which already read
     these variables throughout this file with no extra CSS
     needed here.
   ========================================================= */
:root {
	--ss-dyn-gradient: linear-gradient(90deg, #3a53a5, #a855f7, #ec4899, #3a53a5);
	--ss-dyn-cycle: 30s;
}

@keyframes ss-gradient-shift {
	0% { background-position: 0% 50%; }
	100% { background-position: 300% 50%; }
}
@keyframes ss-border-flow {
	0% { background-position: 0 0, 0% 0; }
	100% { background-position: 0 0, 300% 0; }
}

.dynamic-gradient-bar {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 3px;
	background-image: var(--ss-dyn-gradient);
	background-size: 300% 100%;
	opacity: 0;
	pointer-events: none;
	z-index: 5000;
	transition: opacity 1.2s ease;
}
html.dynamic-colors-active .dynamic-gradient-bar {
	opacity: 1;
	animation-name: ss-gradient-shift;
	animation-duration: var(--ss-dyn-cycle);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/* Animated rainbow edges on the theme's card-style "boxes". Border goes
   transparent and is repainted by a second gradient layer clipped to just
   the border area — background-clip: padding-box/border-box — which,
   unlike border-image, still respects each box's rounded corners. */
html.dynamic-colors-active .product-card-inner,
html.dynamic-colors-active .hero-card,
html.dynamic-colors-active .category-card,
html.dynamic-colors-active .widget,
html.dynamic-colors-active .shop-sidebar > *,
html.dynamic-colors-active .cart_totals,
html.dynamic-colors-active .post-card,
html.dynamic-colors-active .smart-shack-gallery-main {
	border-color: transparent;
	border-width: 2px;
	background-image: linear-gradient(var(--ss-surface), var(--ss-surface)), var(--ss-dyn-gradient);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	background-size: 100% 100%, 300% 100%;
	animation-name: ss-border-flow;
	animation-duration: var(--ss-dyn-cycle);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/* Primary buttons pick up the same travelling gradient instead of a flat
   fill once the effect is active. */
html.dynamic-colors-active .button-primary,
html.dynamic-colors-active .woocommerce #respond input#submit,
html.dynamic-colors-active .woocommerce a.button.alt,
html.dynamic-colors-active .woocommerce button.button.alt,
html.dynamic-colors-active .woocommerce input.button.alt,
html.dynamic-colors-active .woocommerce #payment #place_order,
html.dynamic-colors-active .single_add_to_cart_button,
html.dynamic-colors-active .checkout-button,
html.dynamic-colors-active .wp-block-button__link {
	background-image: var(--ss-dyn-gradient) !important;
	background-size: 300% 100% !important;
	border-color: transparent !important;
	animation-name: ss-gradient-shift;
	animation-duration: var(--ss-dyn-cycle);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@media (prefers-reduced-motion: reduce) {
	.dynamic-gradient-bar { display: none; }
	html.dynamic-colors-active .product-card-inner,
	html.dynamic-colors-active .hero-card,
	html.dynamic-colors-active .category-card,
	html.dynamic-colors-active .widget,
	html.dynamic-colors-active .shop-sidebar > *,
	html.dynamic-colors-active .cart_totals,
	html.dynamic-colors-active .post-card,
	html.dynamic-colors-active .smart-shack-gallery-main,
	html.dynamic-colors-active .button-primary {
		animation: none;
	}
}