/* ==========================================================================
   SVFIT — main stylesheet
   Organized top to bottom: fonts, tokens, reset, layout, header, footer,
   sections (hero/category/banner/products), WooCommerce, forms, utilities.
   ========================================================================== */

/* -- Self-hosted Archivo (variable font), split into the same subsets
      Google Fonts serves so a browser only ever downloads the glyphs a
      page actually needs (e.g. a Latin-only visitor never fetches the
      Vietnamese subset). Italic is not used anywhere in this design. -- */
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/archivo/archivo-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/archivo/archivo-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/archivo/archivo-vietnamese.woff2') format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* -- Design tokens -------------------------------------------------------- */
:root {
	--color-black: #000000;
	--color-text: #414141;
	--color-white: #ffffff;
	--color-gray-100: #f5f5f5;
	--color-gray-200: #ececec;
	--color-gray-300: #d9d9d9;
	--color-gray-500: #9a9a9a;
	--color-gray-600: #767676;
	--color-error: #c0392b;

	/* Archivo has no CJK glyphs (Latin-only OFL font); when Google Translate
	   writes Japanese text into the DOM, the browser silently falls back to
	   the visitor's installed system JP font instead of downloading a heavy
	   webfont like Noto Sans JP just for that edge case. */
	--font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;

	--header-height: 100px;
	--promo-bar-height: 40px;
	--container-max: 1440px;
	--container-padding: 24px;

	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;

	--z-header: 100;
	--z-overlay: 200;
	--z-drawer: 300;
}

/* -- Reset ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x:hidden is the standard mobile Safari defense against
   third-party widgets (payment iframes, translation toolbars, etc.) that
   render wider than the viewport before their own JS constrains them:
   without a clipping ancestor, Safari's shrink-to-fit layout can expand
   the whole page's effective viewport width to match the widest content,
   shrinking everything else down with it. Deliberately set on <html>
   only, not <body>: giving body its own overflow-x turns it into a
   scroll container, which per spec forces its overflow-y to `auto` too —
   that breaks the sticky header below, since its nearest scrolling
   ancestor becomes body instead of the viewport. This is a safety net on
   top of, not a replacement for, constraining known offenders directly
   (see #wc-stripe-express-checkout-element below). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
/* Toggled by the mobile menu, search overlay, and gallery lightbox JS
   while each is open — was already being added/removed by main.js with
   no matching rule here at all, so it never actually locked anything;
   the page just kept scrolling underneath every one of those overlays. */
html.has-locked-scroll { overflow: hidden; }
body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-text);
	background: var(--color-white);
	-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
/* Visually-hidden-but-readable text. WordPress core only ships this rule
   inside wp-block-library CSS and WooCommerce inside its own stylesheet —
   both are dequeued sitewide (inc/setup.php, inc/enqueue.php), yet
   WooCommerce's cart.php / quantity-input markup still emits
   .screen-reader-text labels (the product name on every quantity field,
   the "Remove item" / "Thumbnail image" column headers, the coupon
   label), so without this rule that text renders visibly. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}
/* Headings get breathing room below them by default, same reasoning as
   the p rule below — matters most for free-form WYSIWYG content (page
   content, FAQ answers) where an editor's H2/H3 has no component class to
   carry its own spacing. Every structural/component heading in this file
   (.section-heading, .product_title, etc.) already sets its own explicit
   margin-bottom, which wins here on specificity, so this default only
   actually applies where nothing more specific already claimed it. */
h1, h2, h3, h4 { margin: 0 0 16px; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

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

.icon { width: 22px; height: 22px; fill: currentColor; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
	white-space: nowrap;
}
.btn-primary { background: var(--color-black); color: var(--color-white); }
.btn-primary:hover { background: #222; }
.btn-outline { background: transparent; color: var(--color-white); border: 1px solid currentColor; }
.btn-outline:hover { background: var(--color-white); color: var(--color-black); }

/* ==========================================================================
   Header
   ========================================================================== */
.promo-bar {
	background: var(--promo-bar-bg, var(--color-black));
	color: var(--promo-bar-text, var(--color-white));
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	position: relative;
	min-height: var(--promo-bar-height);
	display: flex;
	align-items: center;
	justify-content: center;
}
.promo-bar-inner { position: relative; padding: 10px 40px; min-height: 1.7em; width: 100%; max-width: 700px; cursor: grab; touch-action: pan-y; user-select: none; }
.promo-bar-inner.is-dragging { cursor: grabbing; }
.promo-bar-message {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}
.promo-bar-message[data-active] { opacity: 1; pointer-events: auto; }
.promo-bar-message a { color: var(--promo-bar-link, currentColor); text-decoration: underline; text-underline-offset: 2px; }
.promo-bar-close {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--promo-bar-text, var(--color-white));
}
.promo-bar-close .icon { width: 14px; height: 14px; }
.promo-bar.is-dismissed { display: none; }

/*
 * The header always stays in normal document flow as position:sticky —
 * right after the promo bar, wherever that puts it. A transparent header
 * "floating over the hero" is an illusion created by pulling the hero
 * section up underneath it with a negative margin (see .section-hero-slider
 * below), not by taking the header out of flow with position:absolute.
 * That earlier absolute approach depended on the browser's "auto" static-
 * position fallback, which is exactly the kind of implicit behavior that's
 * easy to get subtly wrong across states (promo bar on/off, admin bar
 * on/off) — sticky-in-flow has no such ambiguity: it renders exactly where
 * document flow puts it until scroll would carry it past `top`.
 */
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--color-white);
	color: var(--color-black);
	transition: background-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}
.site-header.is-transparent {
	background: transparent;
	color: var(--color-white);
}
.site-header.is-transparent.is-scrolled {
	background: var(--color-white);
	color: var(--color-black);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* Room for WordPress's own fixed admin toolbar (logged-in users only).
   Breakpoints match WP core's admin-bar.css exactly: 32px above 782px,
   46px from 601-782px, and not fixed at all at 600px and below (so no
   offset is needed there — it scrolls away with the page). */
body.admin-bar .site-header,
body.admin-bar .search-overlay,
body.admin-bar .cart-drawer {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar .site-header,
	body.admin-bar .search-overlay,
	body.admin-bar .cart-drawer {
		top: 46px;
	}
}
@media screen and (max-width: 600px) {
	body.admin-bar .site-header,
	body.admin-bar .search-overlay,
	body.admin-bar .cart-drawer {
		top: 0;
	}
}
.site-header-inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 0 var(--container-padding);
	height: var(--header-height);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 24px;
}

.site-logo { display: inline-flex; align-items: center; }
.site-logo img { max-height: 80px; width: auto; }
.site-logo--text { font-size: 20px; font-weight: 800; letter-spacing: 0.04em; }
.site-logo--light { display: none; }
.site-header.is-transparent:not(.is-scrolled) .site-logo--dark { display: none; }
.site-header.is-transparent:not(.is-scrolled) .site-logo--light { display: inline-flex; }

.header-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	position: relative;
	color: currentColor;
}
.header-icons { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.header-language-switcher { display: flex; align-items: center; margin-right: 8px; font-size: 12px; }
.header-language-switcher select,
.header-language-switcher .gt_selector { max-width: 110px; }
.cart-trigger .cart-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 999px;
	background: var(--color-black);
	color: var(--color-white);
	font-size: 10px;
	line-height: 16px;
	text-align: center;
}
.site-header.is-transparent:not(.is-scrolled) .cart-trigger .cart-count {
	background: var(--color-white);
	color: var(--color-black);
}
.cart-trigger .cart-count:empty,
.cart-trigger .cart-count[data-count="0"] { display: none; }

.wishlist-trigger .wishlist-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 999px;
	background: var(--color-black);
	color: var(--color-white);
	font-size: 10px;
	line-height: 16px;
	text-align: center;
}
.site-header.is-transparent:not(.is-scrolled) .wishlist-trigger .wishlist-count {
	background: var(--color-white);
	color: var(--color-black);
}
.wishlist-trigger .wishlist-count:empty,
.wishlist-trigger .wishlist-count[data-count="0"] { display: none; }

.mobile-menu-toggle { display: none; }

/* Primary nav + dropdowns (desktop) */
.primary-nav { justify-self: center; }
.primary-menu { display: flex; align-items: center; gap: 32px; }
.primary-menu > li { position: relative; }
.primary-menu .menu-link {
	display: inline-block;
	padding: 8px 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.primary-menu .submenu-toggle { display: none; }
.primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	min-width: 220px;
	background: var(--color-white);
	color: var(--color-black);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
	padding: 12px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(4px);
	transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
.primary-menu > li:hover > .sub-menu,
.primary-menu > li:focus-within > .sub-menu,
.primary-menu > li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.primary-menu .sub-menu .menu-link {
	display: block;
	padding: 8px 20px;
	font-size: 13px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
	white-space: nowrap;
}
.primary-menu .sub-menu .menu-link:hover { background: var(--color-gray-100); }

/* Search overlay */
.search-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-overlay);
	background: var(--color-white);
	color: var(--color-black);
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform var(--transition-base), visibility var(--transition-base);
}
.search-overlay.is-open { transform: translateY(0); visibility: visible; }
.search-overlay-form {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 24px var(--container-padding);
	display: flex;
	align-items: center;
	gap: 16px;
}
.search-overlay-input {
	flex: 1;
	border: 0;
	border-bottom: 1px solid var(--color-gray-300);
	font-size: 20px;
	padding: 8px 0;
}
.search-overlay-input:focus { outline: none; border-color: var(--color-black); }

/* Mobile menu (off-canvas) */
.mobile-menu {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(360px, 100%);
	background: var(--color-white);
	color: var(--color-black);
	z-index: var(--z-drawer);
	transform: translateX(-100%);
	transition: transform var(--transition-base);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: calc(var(--z-drawer) - 1);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-base), visibility var(--transition-base);
}
.mobile-menu-backdrop.is-open { opacity: 1; visibility: visible; }
.mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--color-gray-200); }
.mobile-menu-list .menu-link { display: block; padding: 16px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--color-gray-200); }
.mobile-menu-list li { position: relative; }
.mobile-menu-list .submenu-toggle {
	position: absolute;
	right: 8px;
	top: 4px;
	width: 40px;
	height: 40px;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mobile-menu-list .sub-menu { display: none; padding: 0 16px 12px 28px; }
.mobile-menu-list li.is-open > .sub-menu { display: block; }
.mobile-menu-list .sub-menu .menu-link { border-bottom: 0; padding: 8px 0; font-size: 13px; font-weight: 500; text-transform: none; }
.mobile-menu-language-switcher { padding: 16px; border-bottom: 1px solid var(--color-gray-200); }
.mobile-menu-footer { margin-top: auto; padding: 16px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--color-black); color: var(--color-gray-300); }
.site-footer-top {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 64px var(--container-padding) 40px;
	display: grid;
	grid-template-columns: 1.2fr 1.7fr 1.3fr;
	gap: 40px;
}
.footer-brand { display: flex; flex-direction: column; gap: 20px; }
.footer-logo { color: var(--color-white); font-size: 20px; font-weight: 800; letter-spacing: 0.04em; }
.social-links { display: flex; gap: 12px; }
.social-links-item a { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 999px; color: var(--color-white); }
.social-links-item .icon { width: 28px; height: 28px; }

.footer-block-heading { color: var(--color-white); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }
.footer-about p { font-size: 13px; line-height: 1.7; }

.footer-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-menu { display: flex; flex-direction: column; gap: 12px; }
.footer-menu a { font-size: 14px; color: var(--color-gray-300); }
.footer-menu a:hover { color: var(--color-white); }

.footer-side { display: flex; flex-direction: column; gap: 32px; }
.footer-address-list { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.6; }
.footer-address-list a { color: var(--color-gray-300); }
.footer-address-list a:hover { color: var(--color-white); }

.footer-newsletter-heading { color: var(--color-white); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
.footer-newsletter-subtext { font-size: 13px; margin-bottom: 16px; }
.newsletter-form-field { display: flex; border: 1px solid var(--color-gray-600); }
.newsletter-form-input { flex: 1; background: transparent; border: 0; padding: 12px 14px; color: var(--color-white); }
.newsletter-form-input::placeholder { color: var(--color-gray-500); }
.newsletter-form-submit { padding: 0 16px; color: var(--color-white); }
.newsletter-form-honeypot { position: absolute; left: -9999px; }
.newsletter-form-message { margin: 10px 0 0; font-size: 12px; min-height: 1em; }
.newsletter-form-message.is-error { color: #ff8a80; }
.newsletter-form-message.is-success { color: #a5d6a7; }

/* Contact Form 7 variant of the footer newsletter (Theme Options → Footer →
   "Newsletter form"). CF7 wraps every field in its own
   <span class="wpcf7-form-control-wrap"> and appends its own response output
   and spinner, none of which the built-in markup has — these rules make that
   structure sit in the same bordered row and use the same dark-footer colours,
   so both options look identical. Scoped to .footer-newsletter so a CF7 form
   anywhere else on the site is untouched. */
/* WordPress runs wpautop over a CF7 form template, so the field row's contents
   arrive wrapped in a <p> that would otherwise become the only flex item and
   collapse the row. display:contents removes that <p> from the box tree so the
   input wrapper and button become direct flex children again — and costs
   nothing if autop is ever disabled and no <p> exists. */
.footer-newsletter .newsletter-form-field > p { display: contents; }
.footer-newsletter .wpcf7-form-control-wrap { flex: 1; display: block; min-width: 0; }
/* Three classes on purpose: this theme's own general CF7 input styling further
   down (.wpcf7-form-control.wpcf7-email — for the light-background contact
   page) gives inputs a grey border and a 16px bottom margin, which inside the
   footer's bordered field drew a second box and left the row 18px taller than
   the built-in form. A two-class selector only ties with it and loses on order.
   Written against CF7's own control classes rather than the class: option in
   the form template, so the layout holds even if that class is left out. */
.footer-newsletter .wpcf7-form-control.wpcf7-email {
	flex: 1;
	width: 100%;
	border: 0;
	margin: 0;
	padding: 12px 14px;
	background: transparent;
	color: var(--color-white);
}
.footer-newsletter .wpcf7-form-control.wpcf7-email::placeholder { color: var(--color-gray-500); }
/* CF7's submit is a real <button> in the form template (not [submit], which
   renders an <input> that cannot carry a ::after arrow). min-width matches the
   width the built-in form's SVG arrow gives its button, so switching between
   the two options doesn't change the field's proportions. */
.footer-newsletter .wpcf7-form .newsletter-form-submit {
	min-width: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.footer-newsletter .wpcf7-form .newsletter-form-submit::after {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
}
.footer-newsletter .wpcf7-spinner { position: absolute; margin: 0 0 0 8px; }
.footer-newsletter form.wpcf7-form { position: relative; }
/* CF7 ships its response output with a border and generous margins; the
   built-in form's message is a plain line of text under the field. */
/* Selector carries `form.wpcf7-form` to outrank CF7's own
   `.wpcf7 form .wpcf7-response-output`, which boxes the message in a 2px
   coloured border with 2em margins — the built-in form shows a plain line of
   text under the field instead. */
.footer-newsletter form.wpcf7-form .wpcf7-response-output {
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	font-size: 12px;
}
.footer-newsletter form.wpcf7-form.invalid .wpcf7-response-output,
.footer-newsletter form.wpcf7-form.failed .wpcf7-response-output,
.footer-newsletter form.wpcf7-form.aborted .wpcf7-response-output { color: #ff8a80; }
.footer-newsletter form.wpcf7-form.sent .wpcf7-response-output { color: #a5d6a7; }
/* CF7 renders its per-field tip inside .wpcf7-form-control-wrap, i.e. inside
   the bordered field — it stretched the box and duplicated the message the
   response output below already shows. The built-in form has exactly one
   message line, so this keeps that shape. The error still reaches assistive
   tech through CF7's own .screen-reader-response region. */
.footer-newsletter .wpcf7-not-valid-tip { display: none; }

.site-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 20px var(--container-padding); }
.footer-copyright { max-width: var(--container-max); margin: 0 auto; font-size: 12px; color: var(--color-gray-500); }

/* ==========================================================================
   Homepage sections
   ========================================================================== */
.section-hero-slider {
	position: relative;
	z-index: 1; /* below the sticky header (--z-header: 100) in the shared stacking context */
	height: 92vh;
	min-height: 520px;
	overflow: hidden;
}
/* Pulls the hero up underneath the (in-flow, sticky) transparent header by
   exactly the header's own height, creating the overlay look without ever
   taking the header out of normal flow. */
body.has-transparent-header .site-main--front > .section-hero-slider:first-child {
	margin-top: calc(-1 * var(--header-height));
}
/* "Match the image" height mode: the slider takes the first slide's aspect
   ratio (wide 2:1 promo banners) instead of the viewport, so nothing is cropped. */
.section-hero-slider.is-height-image {
	--svfit-hero-ratio: 2 / 1;
	height: auto;
	min-height: 0;
	aspect-ratio: var(--svfit-hero-ratio);
	max-height: 92vh;
}
.hero-slider-track { position: relative; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; user-select: none; }
.hero-slider-track.is-dragging { cursor: grabbing; }
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 600ms ease; }
.hero-slide[data-active] { opacity: 1; visibility: visible; }
.hero-slide-image { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-drag: none; }
.hero-slide-content { position: absolute; left: var(--container-padding); bottom: 64px; max-width: 480px; }
.hero-slide.is-theme-light .hero-slide-content { color: var(--color-white); }
.hero-slide.is-theme-dark .hero-slide-content { color: var(--color-black); }
.hero-slide-subheading { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.hero-slide-heading { font-size: clamp(28px, 4vw, 48px); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 20px; }
.hero-slider-dots { position: absolute; right: var(--container-padding); bottom: 24px; display: flex; gap: 8px; }
.hero-slider-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.5); }
.hero-slider-dot.is-active { background: var(--color-white); }

.section-heading { text-align: center; font-size: 22px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 48px var(--container-padding) 24px; }

.category-grid {
	--svfit-columns: 3;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 0 var(--container-padding) 48px;
	display: grid;
	grid-template-columns: repeat(var(--svfit-columns), minmax(0, 1fr));
	gap: 16px;
}
.category-tile { display: block; text-align: center; }
.category-tile-media { display: block; aspect-ratio: 1 / 1; background: var(--color-gray-100); overflow: hidden; }
.category-tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base); }
.category-tile:hover .category-tile-media img { transform: scale(1.04); }
.category-tile-title { display: block; margin-top: 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

.section-banner { position: relative; }
.section-banner-image { width: 100%; height: 60vh; min-height: 360px; object-fit: cover; }
.section-banner-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 64px; max-width: 560px; }
.section-banner.is-align-center .section-banner-content { align-items: center; text-align: center; margin-inline: auto; }
.section-banner.is-align-right .section-banner-content { margin-left: auto; align-items: flex-end; text-align: right; }
.section-banner.is-theme-light .section-banner-content { color: var(--color-white); }
.section-banner.is-theme-dark .section-banner-content { color: var(--color-black); }
.section-banner.has-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	pointer-events: none;
}
.section-banner.has-overlay .section-banner-content { z-index: 1; }
.section-banner-subheading { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.section-banner-heading { font-size: clamp(24px, 3.5vw, 40px); font-weight: 800; text-transform: uppercase; margin-bottom: 20px; }

.section-featured-products { padding-bottom: 48px; }

/* Per-section background colour (Sections → Background colour / Light text).
   The colour sits on the <section> itself, so sections that normally rely on
   the page background for breathing room get vertical padding here — except
   the edge-to-edge ones, whose own geometry would break. */
.has-section-bg { padding-top: 48px; padding-bottom: 48px; }
.has-section-bg .section-heading { padding-top: 0; }
.has-section-bg.section-hero-slider,
.has-section-bg.section-banner,
.has-section-bg.section-media-content,
/* A full-width HTML embed paints its own edge-to-edge artwork, so the
   section must not inset it — otherwise the colour shows as bands above
   and below that the embed's own effects can never reach. */
.has-section-bg.section-html.is-full-width { padding-top: 0; padding-bottom: 0; }

.is-text-light { color: var(--color-white); }
.is-text-light .section-heading,
.is-text-light h1, .is-text-light h2, .is-text-light h3, .is-text-light h4,
.is-text-light p, .is-text-light li,
.is-text-light a:not(.btn),
.is-text-light .product-card-title,
.is-text-light .product-card-price,
.is-text-light .post-card-title a,
.is-text-light .post-card-date,
.is-text-light .post-card-category,
.is-text-light .category-tile-title,
.is-text-light .testimonial-role,
.is-text-light .section-media-content-text,
.is-text-light .section-media-content-subheading { color: inherit; }
.is-text-light .product-card-price del { color: rgba(255, 255, 255, 0.55); }
.is-text-light .testimonial { background: rgba(255, 255, 255, 0.08); }
.is-text-light .testimonial-quote::before { color: rgba(255, 255, 255, 0.35); }
.is-text-light .svfit-view-all { border-color: rgba(255, 255, 255, 0.35); }
.is-text-light .accordion-item { border-color: rgba(255, 255, 255, 0.2); }

/* Light sweep (Sections → Light sweep). The shine is drawn on the section
   itself so it crosses the full band, including any full-width embed inside
   it — an overlay inside the embed can only ever cover the embed's own box. */
.has-section-sweep { position: relative; isolation: isolate; overflow: hidden; }
.has-section-sweep::after {
	content: "";
	position: absolute;
	inset: -35% -42%;
	z-index: 3;
	background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.62) 49%, rgba(255, 255, 255, 0.18) 52%, transparent 60%);
	opacity: 0;
	pointer-events: none;
	transform: translateX(-62%) rotate(8deg);
}
@media (prefers-reduced-motion: no-preference) {
	.has-section-sweep::after { animation: svfit-section-sweep 8.5s 1.1s ease-in-out infinite; }
}
@keyframes svfit-section-sweep {
	0%, 16% { opacity: 0; transform: translateX(-62%) rotate(8deg); }
	34% { opacity: 0.78; }
	52%, 100% { opacity: 0; transform: translateX(62%) rotate(8deg); }
}

/* Image Grid (promo tiles). feature-left = first tile spans two rows. */
.section-image-grid { padding-bottom: 48px; }
.image-grid {
	--svfit-columns: 3;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 0 var(--container-padding);
	display: grid;
	grid-template-columns: repeat(var(--svfit-columns), minmax(0, 1fr));
	gap: 16px;
}
.section-image-grid.is-layout-feature-left .image-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
.section-image-grid.is-layout-feature-left .image-grid-tile:first-child { grid-row: span 2; }
.image-grid-tile { display: block; overflow: hidden; background: var(--color-gray-100); aspect-ratio: 1 / 1; }
.section-image-grid.is-layout-feature-left .image-grid-tile:first-child { aspect-ratio: 1 / 2; }
.image-grid-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base); }
a.image-grid-tile:hover img { transform: scale(1.03); }

/* Latest Posts (blog cards) */
.section-latest-posts { padding-bottom: 48px; }
.latest-posts-grid {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 0 var(--container-padding);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}
.post-card-media { display: block; aspect-ratio: 4 / 3; background: var(--color-gray-100); overflow: hidden; }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base); }
.post-card:hover .post-card-media img { transform: scale(1.04); }
.post-card-body { padding-top: 14px; }
.post-card-category { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gray-600); margin-bottom: 6px; }
.post-card-title { font-size: 16px; font-weight: 700; line-height: 1.35; margin-bottom: 6px; }
.post-card-title a:hover { text-decoration: underline; }
.post-card-date { display: block; font-size: 12px; color: var(--color-gray-500); }
.post-card-excerpt { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--color-gray-600); }
.latest-posts-grid > .post-card { min-width: 0; }

/* Classic-editor homepage fallback (page content used when no Sections
   are defined): USP list, stacked banners, promo figures, testimonials. */
.svfit-usp-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; font-size: 13px; letter-spacing: 0.04em; }
.svfit-usp-list li { padding: 12px; background: var(--color-gray-100); }
.svfit-home-banners figure, .svfit-home-promos figure { margin: 0 0 16px; }
.svfit-home-promos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.svfit-home-posts { list-style: none; padding: 0; }
.svfit-home-posts li { padding: 8px 0; border-bottom: 1px solid var(--color-gray-200); }
.svfit-home-posts small { color: var(--color-gray-500); margin-left: 8px; }
.svfit-testimonial { display: flex; gap: 16px; align-items: flex-start; margin: 0 0 24px; padding: 20px; background: var(--color-gray-100); }
.svfit-testimonial img { width: 64px; height: 64px; border-radius: 999px; object-fit: cover; flex: none; }
.svfit-testimonial p { margin: 0 0 8px; }
.svfit-testimonial cite { font-size: 13px; font-style: normal; font-weight: 700; }
h2 .svfit-view-all { display: inline; margin: 0 0 0 12px; padding: 0; font-size: 12px; border: 0; }

/* Testimonials */
.section-testimonials { padding-bottom: 48px; }
.testimonials-grid {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 0 var(--container-padding);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}
.testimonial { margin: 0; padding: 32px 28px; background: var(--color-gray-100); text-align: center; display: flex; flex-direction: column; align-items: center; }
.testimonial-photo { width: 72px; height: 72px; border-radius: 999px; object-fit: cover; margin-bottom: 16px; }
.testimonial-quote { margin: 0 0 16px; font-size: 15px; line-height: 1.7; }
.testimonial-quote::before { content: "\201C"; display: block; font-size: 40px; line-height: 0.5; color: var(--color-gray-300); margin-bottom: 12px; }
.testimonial-author { display: flex; flex-direction: column; gap: 2px; }
.testimonial-name { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.testimonial-role { font-size: 12px; color: var(--color-gray-600); }

/* Homepage product grids (Featured Products, Products by Category): the
   base ul.products rule below already gives a 4-column grid by default, so
   nothing extra is needed on desktop — this class only matters at the
   782px breakpoint, where it becomes a horizontal scroll-snap slider
   unconditionally (unlike the Shop archive, which is opt-in). */
.svfit-products-section-inner { max-width: var(--container-max); margin-inline: auto; padding: 0 var(--container-padding); }

.svfit-view-all {
	display: block;
	max-width: var(--container-max);
	margin: 24px auto 0;
	padding: 16px var(--container-padding);
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-top: 1px solid var(--color-gray-200);
}

.svfit-load-more-btn {
	display: block;
	margin: 32px auto 0;
	padding: 14px 40px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid var(--color-black);
	background: transparent;
}
.svfit-load-more-btn:hover { background: var(--color-black); color: var(--color-white); }
.svfit-load-more-btn.is-loading { opacity: 0.5; pointer-events: none; }
.svfit-load-more-btn.is-hidden { display: none; }

.section-faq { padding-bottom: 48px; }
.section-faq-inner { max-width: 760px; margin-inline: auto; padding: 0 var(--container-padding); }
.section-faq-inner .section-heading { padding-top: 0; }
.section-faq-subheading { text-align: center; color: var(--color-gray-600); margin-top: -16px; margin-bottom: 24px; }
.svfit-accordion-group .svfit-accordion:last-child { border-bottom: 1px solid var(--color-gray-200); }
.svfit-accordion-group .svfit-accordion-panel { color: var(--color-gray-600); font-size: 14px; line-height: 1.7; }
.svfit-accordion-group .svfit-accordion-panel p:first-child { margin-top: 0; }
.svfit-accordion-group .svfit-accordion-panel p:last-child { margin-bottom: 0; }

.section-media-content { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.section-media-content.is-media-right { direction: rtl; }
.section-media-content.is-media-right > * { direction: ltr; }
.section-media-content-media { min-height: 420px; background: var(--color-gray-100); }
.section-media-content-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.section-media-content-body { display: flex; align-items: center; }
.section-media-content-inner { max-width: 440px; margin-inline: auto; padding: 48px var(--container-padding); }
.section-media-content-subheading { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gray-600); margin-bottom: 8px; }
.section-media-content-heading { font-size: clamp(22px, 2.8vw, 32px); font-weight: 800; text-transform: uppercase; margin-bottom: 16px; }
.section-media-content-text { color: var(--color-gray-600); font-size: 14px; line-height: 1.7; margin-bottom: 24px; }
.section-media-content-text p:last-child { margin-bottom: 0; }

/* ==========================================================================
   WooCommerce: product grid / card
   ========================================================================== */
/* Not scoped under .woocommerce: that body class is only present on
   WooCommerce-recognized pages (shop, category, cart…) — the homepage's
   Featured Products block reuses this exact same ul.products markup but
   lives on a plain page, so scoping to .woocommerce silently dropped the
   entire grid there (cards fell back to default <ul> block stacking,
   full viewport width each). */
ul.products {
	display: grid;
	/* minmax(0, …) so a card's min-content (image/title) can never widen a track past the viewport on phones */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px 12px;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 0 var(--container-padding) 48px;
	list-style: none;
}
ul.products.svfit-products-grid { padding-top: 0; }

.product-card { position: relative; list-style: none; }
.product-card-media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--color-white); border: 1px solid var(--color-gray-200); overflow: hidden; }
/* Fill the tile. These packshots are landscape on a plain background, so a
   centred cover crop only trims the empty margins; object-position keeps the
   product (always centred in the source) in frame. */
.product-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.product-card-media img.product-card-image-hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--transition-base);
}
.product-card:hover .product-card-image-hover { opacity: 1; }

.product-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	background: var(--color-white);
	color: var(--color-black);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 8px;
}
.product-badge--sale { background: var(--color-black); color: var(--color-white); }
.product-badge--sold-out { background: var(--color-gray-600); color: var(--color-white); }

/* .outofstock is added automatically by wc_product_class() (content-product.php)
   — no PHP branching needed here for the faded-image treatment itself, only
   for the badge (content-product.php) and hiding the quick-add icon
   (loop/add-to-cart.php), neither of which CSS alone can do. Faded rather
   than removed/placeholder'd: still recognizable as the product a visitor
   may have seen elsewhere (a category page, a search result, an ad), just
   visibly unavailable. */
.product-card.outofstock .product-card-media img { opacity: 0.35; }
.product-card.outofstock .product-card-image-hover { display: none; }

.product-card-wishlist {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-white);
	color: var(--color-black);
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	transition: transform var(--transition-fast);
}
.product-card-wishlist:hover { transform: scale(1.08); }
.product-card-wishlist .icon { width: 15px; height: 15px; }
.product-card-wishlist .icon-heart-filled { display: none; color: var(--color-error); }
.product-card-wishlist.is-active .icon-heart-outline { display: none; }
.product-card-wishlist.is-active .icon-heart-filled { display: block; }
.product-card-wishlist.is-loading { opacity: 0.5; pointer-events: none; }

.product-card-quick-add,
a.product-card-quick-add {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 1;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-white);
	color: var(--color-black);
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	transition: transform var(--transition-fast);
}
.product-card-quick-add:hover { transform: scale(1.08); }
.product-card-quick-add .icon { width: 16px; height: 16px; }
.product-card-quick-add.loading { opacity: 0.5; pointer-events: none; }
.added_to_cart.wc-forward { display: none; } /* the drawer opening is our "added" feedback */

.product-card-info { padding: 12px 2px 0; }
.product-card-title { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.product-card-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.product-card-price { color: var(--color-black); font-weight: 700; }
.product-card-price ins { text-decoration: none; }
.product-card-price del { color: var(--color-gray-500); font-weight: 400; margin-right: 6px; }
.product-card-colors { color: var(--color-gray-600); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }

.cart-drawer-upsell .products,
.up-sells.products {
	grid-template-columns: repeat(3, 1fr);
}
/* Related Products: 4 per row on desktop — same column count as the base
   ul.products default, stated explicitly so it doesn't silently drift if
   that default ever changes. */
.related.products ul.products { grid-template-columns: repeat(4, 1fr); }

/* ==========================================================================
   Mini-cart drawer
   ========================================================================== */
.cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 100%);
	background: var(--color-white);
	color: var(--color-black);
	z-index: var(--z-drawer);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--transition-base);
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: calc(var(--z-drawer) - 1);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-base), visibility var(--transition-base);
}
.cart-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.cart-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--color-gray-200); }
.cart-drawer-title { font-size: 16px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; margin: 0; }
.widget_shopping_cart_content { flex: 1; overflow-y: auto; padding: 0 20px; }

.cart-drawer-items { display: flex; flex-direction: column; gap: 20px; padding: 20px 0; }
.cart-drawer-item { display: flex; gap: 14px; }
.cart-drawer-item-media { width: 80px; flex-shrink: 0; background: var(--color-gray-100); }
.cart-drawer-item-media img { width: 100%; aspect-ratio: 1/1; object-fit: contain; background: var(--color-white); }
.cart-drawer-item-details { flex: 1; min-width: 0; }
.cart-drawer-item-name { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.cart-drawer-item-meta { font-size: 12px; color: var(--color-gray-600); margin-bottom: 4px; }
.cart-drawer-item-price { font-size: 13px; margin-bottom: 8px; }
.cart-drawer-item-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cart-drawer-item-remove { font-size: 11px; text-decoration: underline; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-gray-600); }
.cart-drawer-item-remove:hover { color: var(--color-black); }

.cart-drawer-upsell { border-top: 1px solid var(--color-gray-200); padding: 20px 0; }
.cart-drawer-upsell-heading { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; }
.cart-drawer-upsell-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0; }
.cart-drawer-upsell-list .product-card-info { padding-top: 6px; }
.cart-drawer-upsell-list .product-card-title { font-size: 11px; }
.cart-drawer-upsell-list .product-card-meta { font-size: 11px; }

.cart-drawer-footer { padding: 20px; border-top: 1px solid var(--color-gray-200); }
.cart-drawer-subtotal { display: flex; align-items: center; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.cart-drawer-shipping-note { font-size: 12px; color: var(--color-gray-600); margin-bottom: 16px; }
.cart-drawer-buttons { display: flex; gap: 12px; margin: 0; }
.cart-drawer-buttons .btn { flex: 1; padding: 14px; }
.btn-outline-dark { background: transparent; color: var(--color-black); border: 1px solid var(--color-black); }
.btn-outline-dark:hover { background: var(--color-black); color: var(--color-white); }
.cart-drawer-empty { padding: 40px 20px; text-align: center; margin: 0; }

.svfit-quantity { display: inline-flex; align-items: center; border: 1px solid var(--color-gray-300); }
.svfit-quantity .quantity-btn { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; }
.svfit-quantity .quantity-btn .icon { width: 12px; height: 12px; }
.svfit-quantity input.qty {
	width: 36px;
	height: 46px;
	border: 0;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
	background: transparent;
}
.svfit-quantity input.qty::-webkit-outer-spin-button,
.svfit-quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ==========================================================================
   Single product
   ========================================================================== */

/* The gallery and .summary are siblings inside WooCommerce's own
   #product-{id}.product wrapper (no content-single-product.php override),
   so the 2-column layout targets that wrapper directly. Anything rendered
   after the summary (related products, recently viewed) is a further
   sibling of the two — it's pulled full-width below via grid-column. */
.single-product div.product {
	position: relative;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 40px var(--container-padding) 0;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 56px;
	align-items: start;
}
/* WooCommerce hooks the sale badge onto the same action as the gallery
   (woocommerce_before_single_product_summary), as a plain sibling — left
   on grid auto-placement, it would claim column 1 for itself and push the
   real gallery into column 2 and the summary onto a second row. Explicitly
   placing the gallery and summary (rather than trusting auto-placement to
   guess right around however many extra siblings a hook adds) sidesteps
   that entirely, and lets .onsale share the gallery's own cell — sized to
   match the gallery exactly, including its internal thumbnail column, so
   the badge's inset is correct without hardcoding any of that layout's
   pixel widths. */
.single-product div.product > .woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
.single-product div.product > .summary { grid-column: 2; grid-row: 1; }
.single-product div.product > .related.products,
.single-product div.product > .svfit-recently-viewed {
	grid-column: 1 / -1;
}

.single-product span.onsale {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	align-self: start;
	position: relative;
	z-index: 2;
	/* The gallery cell's own start edge is the *thumbnail* column's start
	   (flex order:1, to the left of the main image on desktop) — the extra
	   left margin skips past its width (76px) and gap (12px) to land the
	   badge over the main image instead, matching .svfit-gallery-thumbs
	   width and .woocommerce-product-gallery gap above. Mobile stacks
	   thumbnails below the image instead, so no offset is needed there. */
	margin: 16px 0 0 104px;
	background: var(--color-black);
	color: var(--color-white);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 8px;
}

/* Gallery: a single large image with prev/next arrows, plus a thumbnail
   strip (Layout/full-single-product.png) — a custom Swiper build (see
   inc/woocommerce/product-gallery.php for why, and assets/js/product-gallery.js
   for the JS), not WooCommerce's own FlexSlider. min-width: 0 matters here
   specifically: Swiper sets each slide's transform inline to translate
   between them — a bare grid item has no minimum-width cap by default, so
   an oversized child can inflate the *grid track* itself (not just this
   element), blowing out the whole 2-column layout. */
.woocommerce-product-gallery { min-width: 0; position: relative; display: flex; gap: 12px; overflow: hidden; }
/* .svfit-gallery-main is also .swiper (see the template) — Swiper's own
   bundled CSS already gives .swiper position:relative/overflow:hidden and
   .swiper-wrapper/.swiper-slide height:100%, entirely from a stylesheet
   that's present from first paint, with no JS-injected wrapper element and
   no JS-driven show/hide step for *any* of this theme's own layout rules
   to race against — unlike FlexSlider, which only created its equivalent
   (.flex-viewport) via JS well after the page had already painted, and
   which switched each slide from display:none to display:block inside a
   separate, later setTimeout — both real, repeatedly-hit races this
   architecture doesn't have an equivalent of at all.
   aspect-ratio here (matching .woocommerce-product-gallery__image below)
   is what makes .swiper-wrapper/.swiper-slide's height:100% resolve to
   something correct in the first place: a pure function of this element's
   own (immediately-resolvable) width, independent of any JS or of its
   children's content. */
.svfit-gallery-main { flex: 1 1 0; min-width: 0; order: 2; aspect-ratio: 1 / 1; }
/* flex-shrink:0 is essential, not decorative: Swiper's own bundled CSS
   normally provides this on its default .swiper-slide class, but
   product-gallery.js points Swiper at this class instead (slideClass) so
   wc_get_gallery_image_html()'s own output needs no changes — CSS can't
   follow that JS-side rename, so Swiper's base slide styling has to be
   reproduced here by hand. Without it, the browser's flex algorithm
   shrinks all slides proportionally to fit side-by-side in the wrapper
   (which Swiper sizes to hold exactly one slide-width), instead of
   respecting Swiper's own per-slide inline width and stacking them for
   its transform to slide between — multiple images visibly cropped and
   squeezed into one row instead of one full-size image at a time. */
.woocommerce-product-gallery__image { background: var(--color-white); border: 1px solid var(--color-gray-200); aspect-ratio: 1 / 1; overflow: hidden; flex-shrink: 0; }
.woocommerce-product-gallery__image img { width: 100%; height: 100%; object-fit: contain; }

/* Prev/next arrows, direct children of .svfit-gallery-main rather than
   nested in a <ol>/<li> (FlexSlider's directionNav shape) — Swiper's
   navigation module just needs two elements to bind click handlers to,
   nothing about their markup shape is prescribed. Hidden by default (the
   thumbnail column already covers navigation on desktop); the 782px
   breakpoint below turns it back on for mobile, where there's no hover
   state to discover the thumbnail strip with. Swiper adds
   swiper-button-disabled at either end (no loop mode) — pointer-events
   and opacity communicate that without needing a separate style per state. */
.svfit-gallery-nav { display: none; }
.svfit-gallery-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	transform: translateY(-50%);
	background: var(--color-white);
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.svfit-gallery-nav.swiper-button-disabled { opacity: 0.35; pointer-events: none; }
.svfit-gallery-nav::before {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--color-black);
	border-bottom: 2px solid var(--color-black);
}
.svfit-gallery-nav--prev { left: 16px; }
.svfit-gallery-nav--prev::before { transform: rotate(135deg) translate(-1px, -1px); }
.svfit-gallery-nav--next { right: 16px; }
.svfit-gallery-nav--next::before { transform: rotate(-45deg); }

/* Thumbnail strip: a vertical column to the left of the main image on
   desktop, a horizontal scroll strip below it on mobile (782px breakpoint
   below) — plain server-rendered buttons (see the template), not a
   separate Swiper instance: nothing about a short, non-overflowing column
   of thumbnails on desktop or a natively-scrollable (overflow-x:auto) strip
   on mobile needs Swiper's own slide/transform machinery, only the
   click-to-navigate and active-state behavior product-gallery.js adds. */
.svfit-gallery-thumbs {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 76px;
	flex: 0 0 auto;
	order: 1;
}
.svfit-gallery-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 1px solid transparent;
	background: none;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity var(--transition-base), border-color var(--transition-base);
}
.svfit-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--color-white); }
.svfit-gallery-thumb.is-active,
.svfit-gallery-thumb:hover { opacity: 1; border-color: var(--color-black); }

/* Lightbox: opened by clicking the main gallery image (see
   product-gallery.js), a second, full-screen Swiper instance rather than
   a separate lightbox library. Kept out of layout flow (visibility+opacity,
   not display:none) so Swiper can size it correctly the moment it's
   initialized, before the very first time it's opened. */
/* Quick Buy modal — see assets/js/quick-buy.js. Same visibility technique as
   the gallery lightbox below (visibility+opacity rather than display:none) so
   the panel has real dimensions the moment it opens, and the same
   html.has-locked-scroll convention the mobile menu uses. */
.svfit-quick-buy {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-base), visibility var(--transition-base);
}
.svfit-quick-buy.is-open { opacity: 1; visibility: visible; }
.svfit-quick-buy-panel {
	position: relative;
	width: 100%;
	max-width: 880px;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--color-white);
	padding: 28px;
}
.svfit-quick-buy-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
}
.svfit-quick-buy-close::before,
.svfit-quick-buy-close::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 2px;
	background: var(--color-black);
}
.svfit-quick-buy-close::before { transform: rotate(45deg); }
.svfit-quick-buy-close::after { transform: rotate(-45deg); }
.svfit-quick-buy-body { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.svfit-quick-buy-media img { width: 100%; height: auto; display: block; }
.svfit-quick-buy-title { display: block; font-size: 18px; font-weight: 800; text-transform: uppercase; margin-bottom: 6px; }
.svfit-quick-buy-price { font-size: 15px; color: var(--color-gray-600); margin-bottom: 16px; }
.svfit-quick-buy-oos { font-size: 13px; font-weight: 600; color: var(--color-error); }
.svfit-quick-buy-full-link { display: inline-block; margin-top: 14px; font-size: 12px; text-decoration: underline; }
.svfit-quick-buy-loading,
.svfit-quick-buy-error { grid-column: 1 / -1; padding: 40px 0; text-align: center; color: var(--color-gray-600); }
/* The modal reuses the single-product add-to-cart markup, whose Buy Now button
   and wishlist row belong to that page's fuller layout — the modal is a
   shortcut to the cart, not a second product page. */
.svfit-quick-buy-body .buy-now-button,
.svfit-quick-buy-body .svfit-wishlist-btn,
.svfit-quick-buy-body .svfit-accordion { display: none; }

@media (max-width: 782px) {
	.svfit-quick-buy { padding: 0; align-items: flex-end; }
	.svfit-quick-buy-panel { max-width: none; max-height: 88vh; padding: 22px 18px 28px; }
	.svfit-quick-buy-body { grid-template-columns: 1fr; gap: 16px; }
	/* On a phone the image would push the actual buying controls below the
	   fold, which defeats the point of a quick-buy shortcut. */
	.svfit-quick-buy-media { max-width: 140px; }
}

.svfit-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.95);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-base), visibility var(--transition-base);
}
.svfit-lightbox.is-open { opacity: 1; visibility: visible; }
.svfit-lightbox-main { width: 100%; height: 100%; }
.svfit-lightbox-slide { display: flex; align-items: center; justify-content: center; }
.svfit-lightbox-slide .swiper-zoom-container img {
	max-width: 90%;
	max-height: 90%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.svfit-lightbox-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
}
.svfit-lightbox-close::before,
.svfit-lightbox-close::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 2px;
	background: var(--color-white);
}
.svfit-lightbox-close::before { transform: rotate(45deg); }
.svfit-lightbox-close::after { transform: rotate(-45deg); }
/* The gallery's own .svfit-gallery-nav is display:none outside the
   mobile breakpoint (desktop relies on the thumbnail column instead) —
   the lightbox has no such column to fall back on at any width, so its
   copy of those buttons needs to stay visible unconditionally. */
.svfit-lightbox .svfit-gallery-nav { display: flex; }

/* min-width: 0 for the same reason as .woocommerce-product-gallery above:
   a grid item's default min-width:auto refuses to shrink below its
   content's natural size, which a long product title or the add-to-cart
   row's fixed-width buttons can exceed on a narrow screen — overflowing
   the grid track instead of wrapping. */
.summary { min-width: 0; overflow: hidden; }

/* Stripe's Express Checkout element (Apple Pay / Google Pay quick-buy
   button) renders on the single product page too, not just checkout —
   the existing #wc-stripe-express-checkout-element rule further down is
   scoped to .woocommerce-checkout's grid and doesn't reach this context.
   The Google Pay iframe it injects doesn't reliably respect its
   container's width on first render, and left unconstrained here it
   inflates the whole page's layout viewport (the .summary min-width:0 +
   overflow:hidden above is the containment; this is the width cap on the
   iframe itself), which — since the gallery's width:100% is computed
   against that same inflated container — is what made the main product
   image render far taller than its intended aspect-ratio on real
   devices.
   !important is required: the gateway plugin's own build/express-checkout.css
   ships `#wc-stripe-express-checkout-element iframe{max-width:unset}`,
   which beats a plain `#id *` rule on specificity alone (id+type beats
   id+universal) regardless of enqueue order — silently defeating the
   non-!important version of this rule. */
#wc-stripe-express-checkout-element,
#wc-stripe-express-checkout-element * { max-width: 100% !important; }
.product_title { font-size: 22px; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; overflow-wrap: break-word; }
.summary .price { display: block; font-size: 16px; color: var(--color-gray-600); margin-bottom: 8px; }
.summary .sku_wrapper { display: block; font-size: 12px; color: var(--color-gray-500); margin-bottom: 20px; }
.summary .woocommerce-product-rating { margin-bottom: 8px; }

/* Variation pickers: large swatch tiles with a visible label under each,
   matching the BLACK/NAVY/GREEN/D.GREY layout in the reference — not the
   small circular dots used on product-card quick view. */
.svfit-variations { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }
.svfit-variation-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 10px; }
.svfit-variation-options { display: flex; flex-wrap: wrap; gap: 10px; }
.svfit-swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 84px;
	padding: 4px;
	border: 1px solid transparent;
}
.svfit-swatch-image { display: block; width: 100%; aspect-ratio: 1; background: var(--color-gray-100); overflow: hidden; }
.svfit-swatch-image img { width: 100%; height: 100%; object-fit: cover; }
.svfit-swatch-label { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-gray-600); }
.svfit-swatch.is-selected { border-color: var(--color-black); }
.svfit-swatch.is-selected .svfit-swatch-label { color: var(--color-black); }
.svfit-option-btn { min-width: 48px; padding: 10px 14px; border: 1px solid var(--color-gray-300); font-size: 13px; font-weight: 600; }
.svfit-option-btn.is-selected { border-color: var(--color-black); background: var(--color-black); color: var(--color-white); }

/* Out-of-stock combination (see initVariationAvailability() in
   product-variations.js) — grayed out with a diagonal line through it,
   rather than removed, so the option's still visible as a size/color that
   exists, just not currently choosable in this combination. */
.svfit-swatch:disabled,
.svfit-option-btn:disabled {
	position: relative;
	opacity: 0.4;
	cursor: not-allowed;
}
.svfit-swatch:disabled::after,
.svfit-option-btn:disabled::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--color-gray-500) calc(50% - 0.5px), var(--color-gray-500) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.svfit-variations-native { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.single_variation_wrap { margin-bottom: 16px; }
.woocommerce-variation-price .price { margin-bottom: 4px; }

/* The stock quantity/status text (WooCommerce core's own "N in stock" /
   "Out of stock" markup — `.stock` for simple products, rendered inside
   .woocommerce-variation-availability once a variation is picked for
   variable ones) has zero styling from either WooCommerce's own
   dequeued stylesheet or this theme otherwise, so it was rendering as
   unstyled inline text easy to miss entirely rather than actually
   hidden. */
.summary .stock {
	display: inline-block;
	margin: 4px 0 8px;
	font-size: 13px;
	font-weight: 600;
}
.summary .stock.in-stock { color: #2e7d32; }
/* Unavailability is communicated by the toast on add-to-cart instead (see
   product-variations.js) — not this text label. */
.summary .stock.out-of-stock { display: none; }
.summary .stock.available-on-backorder { color: #e65100; }
.woocommerce-variation-availability:empty { margin: 0; }
.woocommerce-variation-add-to-cart,
form.cart .svfit-quantity-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
form.cart .single_add_to_cart_button { flex: 1; min-width: 200px; }
.buy-now-button { flex: 1; min-width: 200px; }

/* Until a variation is chosen, WooCommerce marks the add-to-cart button
   .disabled.wc-variation-selection-needed and refuses the add — but nothing
   styled that state, so the button looked completely normal and a customer
   could click it repeatedly with no visible reason for the refusal (they only
   got the toast from product-variations.js after clicking). Dimming it makes
   "choose an option first" legible before the click rather than after it.
   Note this is only ever reached when the product has NO default variation
   configured; with a default set, the swatch UI now shows that selection up
   front (see initSelectedSync in product-variations.js) and the button is
   live immediately. */
form.cart .single_add_to_cart_button.disabled,
form.cart .single_add_to_cart_button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.svfit-wishlist-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	padding: 0 18px;
	margin-top: 10px;
	border: 1px solid var(--color-gray-300);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
	transition: border-color var(--transition-fast), color var(--transition-fast);
}
.svfit-wishlist-btn .icon { width: 16px; height: 16px; }
.svfit-wishlist-btn .icon-heart-filled { display: none; }
.svfit-wishlist-btn.is-active .icon-heart-outline { display: none; }
.svfit-wishlist-btn.is-active .icon-heart-filled { display: block; }
.svfit-wishlist-btn:hover { border-color: var(--color-black); }
.svfit-wishlist-btn.is-active { border-color: var(--color-black); }
.svfit-wishlist-btn.is-loading { opacity: 0.5; pointer-events: none; }

.wishlist-empty { padding: 60px 0; text-align: center; color: var(--color-gray-600); }
.wishlist-empty p { margin-bottom: 20px; }

/* Flat description + bullets (no tabs) + collapsible details accordion —
   see inc/woocommerce/single-product-layout.php for the hook rearrangement
   that puts these here, after Add to Cart, instead of WC's default order. */
.woocommerce-product-details__short-description,
.svfit-product-description { margin-top: 24px; font-size: 14px; line-height: 1.7; }
.svfit-product-description ul { padding-left: 18px; list-style: disc; }

/* WYSIWYG content (product description, FAQ answers, page content, the
   media+content section) can contain a pasted <table> with its own inline
   width — a fixed pixel width beats any CSS max-width on the same
   property, so instead of fighting it, the same pattern as .shop_table
   turns the table into a horizontally-scrollable strip: display:block
   lets it shrink/scroll while explicitly restoring thead/tbody/tfoot's
   table-*-group display keeps the rows and cells inside laid out
   correctly (tr/td keep their own UA-default table-row/table-cell display
   regardless of the table's own display change).
   .page-content also wraps the Cart / Checkout / My Account pages
   (page.php), whose WooCommerce .shop_table tables are laid out by their
   own rules further down — the :not() keeps them out of this: without
   it the cart table shrank to its content width on desktop, and the
   higher specificity here beat the cart table's own mobile layout. */
.svfit-product-description table,
.page-content table:not(.shop_table),
.svfit-accordion-panel table,
.section-media-content-text table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.svfit-product-description table thead,
.page-content table:not(.shop_table) thead,
.svfit-accordion-panel table thead,
.section-media-content-text table thead { display: table-header-group; }
.svfit-product-description table tbody,
.page-content table:not(.shop_table) tbody,
.svfit-accordion-panel table tbody,
.section-media-content-text table tbody { display: table-row-group; }
.svfit-product-description table tfoot,
.page-content table:not(.shop_table) tfoot,
.svfit-accordion-panel table tfoot,
.section-media-content-text table tfoot { display: table-footer-group; }

.svfit-accordion { border-top: 1px solid var(--color-gray-200); margin-top: 28px; }
.svfit-accordion-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.svfit-accordion-icon { width: 14px; height: 14px; transition: transform var(--transition-fast); }
.svfit-accordion-trigger[aria-expanded="true"] .svfit-accordion-icon { transform: rotate(45deg); }
.svfit-accordion-panel { padding-bottom: 20px; }
.svfit-attributes-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.svfit-attributes-table th { text-align: left; width: 40%; padding: 8px 0; color: var(--color-gray-600); font-weight: 600; }
.svfit-attributes-table td { padding: 8px 0; }

.related.products > h2,
.svfit-recently-viewed > h2 { font-size: 18px; font-weight: 800; text-transform: uppercase; margin: 56px 0 20px; }
.related.products > ul.products,
.svfit-recently-viewed > ul.products { padding: 0; }

/* Recently Viewed: always a horizontal scroll-snap slider, desktop
   included — unlike Related Products (a full grid), this is meant to read
   as a quick, skimmable strip regardless of viewport. Bottom margin keeps
   it from sitting flush against the footer, since it's the last thing on
   the single-product page before it. */
.svfit-recently-viewed { margin-bottom: 64px; }
ul.products.svfit-recently-viewed-grid {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	gap: 16px;
	padding-bottom: 12px;
	scrollbar-width: none;
}
ul.products.svfit-recently-viewed-grid::-webkit-scrollbar { display: none; }
ul.products.svfit-recently-viewed-grid > li { flex: 0 0 calc(25% - 12px); scroll-snap-align: start; }

@media (max-width: 1024px) {
	ul.products.svfit-recently-viewed-grid > li { flex: 0 0 calc(50% - 8px); }
}
@media (max-width: 782px) {
	ul.products.svfit-recently-viewed-grid > li { flex: 0 0 calc(50% - 8px); }
}

/* ==========================================================================
   Checkout
   ========================================================================== */
.woocommerce-checkout .container,
.woocommerce-cart .container { max-width: var(--container-max); margin-inline: auto; padding: 40px var(--container-padding) 64px; }
/* grid-template-columns alone only sets up the grid; `order` controls
   sequence within auto-placement but does NOT group items into the same
   cell — #order_review_heading and #order_review are separate elements
   with equal order, so auto-placement was wrapping #order_review onto its
   own new row in column 1 instead of stacking it under the heading in
   column 2. Explicit grid-column/grid-row on every direct child that
   should participate fixes that; the Stripe Express Checkout button
   block and its "— OR —" divider (rendered above the two columns on a
   live Stripe-configured checkout) are pulled out of the 2-column flow
   entirely so they span full width instead of being squeezed into column 1. */
.woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: auto 1fr; gap: 0 48px; align-items: start; }
/* Shipping goes to the billing address (WooCommerce "billing_only"), so the
   billing block gets the whole left column; the order-notes block simply
   follows it instead of WC's default side-by-side .col2-set split. */
.woocommerce-checkout #customer_details.col2-set { display: block; max-width: none; padding: 0; margin: 0; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; max-width: 560px; }
.woocommerce-checkout #customer_details .col-2 { margin-top: 32px; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { width: auto; float: none; }
.woocommerce-checkout .form-row-wide,
.woocommerce-checkout #billing_first_name_field,
.woocommerce-checkout #billing_email_field,
.woocommerce-checkout #billing_address_1_field,
.woocommerce-checkout .create-account,
.woocommerce-checkout #order_comments_field { grid-column: 1 / -1; }
#wc-stripe-express-checkout-element,
#wc-stripe-express-checkout-button-separator { grid-column: 1 / -1; }
#customer_details { grid-column: 1; grid-row: 1 / span 2; }
#order_review_heading { grid-column: 2; grid-row: 1; background: var(--color-gray-100); padding: 28px 28px 0; margin: 0; }
#order_review { grid-column: 2; grid-row: 2; background: var(--color-gray-100); padding: 16px 28px 28px; }
#order_review_heading,
#customer_details h3,
.woocommerce-cart .cart_totals h2 { font-size: 15px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 20px; }
#order_review_heading { margin: 0; }
#customer_details h3 { margin-top: 8px; }
#customer_details .woocommerce-billing-fields + .woocommerce-shipping-fields,
#customer_details .woocommerce-additional-fields { margin-top: 32px; }
.woocommerce form .form-row { margin: 0 0 16px; }
.woocommerce form .form-row label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.woocommerce form .form-row label .required { color: var(--color-error); text-decoration: none; }
.woocommerce form .form-row .select2-container .select2-selection--single { height: 46px; border: 1px solid var(--color-gray-300); border-radius: 0; }
.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__rendered { line-height: 44px; padding-left: 14px; }
.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__arrow { height: 44px; }
/* Login / coupon prompts above the checkout form: one compact row each, expanding form indented */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { margin: 0 0 12px; }
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.woocommerce-form-login { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; max-width: 560px; margin: 0 0 24px; padding: 16px 20px; border: 1px solid var(--color-gray-200); }
.woocommerce-checkout form.checkout_coupon p:first-child { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--color-gray-600); }
.woocommerce-checkout form.checkout_coupon .form-row { margin: 0; }
.woocommerce-checkout form.checkout_coupon .form-row-first { flex: 1 1 220px; }
.woocommerce-checkout form.checkout_coupon .form-row-last { flex: 0 0 auto; }
.woocommerce-checkout form.checkout_coupon .form-row-last .button { width: auto; padding: 13px 24px; }
/* Order review table */
#order_review .shop_table th, #order_review .shop_table td { padding: 12px 0; }
#order_review .shop_table thead th { border-bottom: 1px solid var(--color-gray-300); }
#order_review .shop_table tfoot th, #order_review .shop_table tfoot td { border-bottom: 1px solid var(--color-gray-300); }
#order_review .shop_table tfoot tr.order-total th, #order_review .shop_table tfoot tr.order-total td { border-bottom: 0; font-size: 16px; padding-top: 16px; }
#order_review .shop_table .product-total, #order_review .shop_table tfoot td { text-align: right; }
#order_review .shop_table .woocommerce-shipping-totals ul { list-style: none; margin: 0; padding: 0; }
/* Payment box */
#payment { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--color-gray-300); }
#payment ul.wc_payment_methods { list-style: none; margin: 0 0 16px; padding: 0; }
#payment ul.wc_payment_methods li { padding: 12px 16px; margin-bottom: 8px; background: var(--color-white); border: 1px solid var(--color-gray-200); }
#payment ul.wc_payment_methods li > label { font-weight: 700; cursor: pointer; }
#payment ul.wc_payment_methods li input[type="radio"] { margin-right: 8px; }
#payment .payment_box { margin: 8px 0 0; padding: 0; font-size: 13px; color: var(--color-gray-600); line-height: 1.6; }
#payment .payment_box p:last-child { margin-bottom: 0; }
#payment .woocommerce-privacy-policy-text { font-size: 12px; color: var(--color-gray-600); line-height: 1.6; margin: 12px 0; }
#payment .woocommerce-terms-and-conditions-wrapper { margin: 12px 0 20px; }
#payment .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0; }
#payment .woocommerce-terms-and-conditions-checkbox-text { font-size: 13px; }
.woocommerce #payment #place_order { width: 100%; padding: 16px 28px; font-size: 14px; }
.woocommerce-checkout #customer_details .form-row.create-account { margin-top: 8px; }
/* Cart: items on the left, totals as a sidebar card */
.woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; }
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; padding: 0; }
.woocommerce-cart .woocommerce-cart-form { min-width: 0; }
.woocommerce-cart .cart-collaterals { position: sticky; top: calc(var(--header-height) + 24px); }
.woocommerce-cart .cart_totals { background: var(--color-gray-100); padding: 28px; }
.woocommerce-cart .cart_totals .shop_table th, .woocommerce-cart .cart_totals .shop_table td { padding: 12px 0; vertical-align: top; }
.woocommerce-cart .cart_totals .shop_table th { width: 38%; padding-right: 12px; }
.woocommerce-cart .cart_totals .shop_table td { text-align: right; }
.woocommerce-cart .cart_totals .shop_table tr.order-total th, .woocommerce-cart .cart_totals .shop_table tr.order-total td { border-bottom: 0; font-size: 16px; padding-top: 16px; }
.woocommerce-cart .cart_totals .woocommerce-shipping-destination { font-size: 12px; color: var(--color-gray-600); margin: 6px 0 0; }
.woocommerce-cart .cart_totals .woocommerce-shipping-calculator { margin-top: 8px; text-align: right; }
.woocommerce-cart .cart_totals .shipping-calculator-form .form-row { text-align: left; }
.woocommerce-cart .cart_totals .shipping-calculator-button { font-size: 12px; text-decoration: underline; }
.woocommerce-cart .wc-proceed-to-checkout { margin-top: 20px; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; text-align: center; padding: 16px 28px; font-size: 14px; }
/* Coupon + update row under the cart items */
/* td.actions must stay a table cell (a flex td stops spanning the row), so
   the coupon group is inline-flex on the left and the update button floats right. */
.woocommerce-cart .shop_table .actions { padding: 20px 0 0; border-bottom: 0; }
.woocommerce-cart .shop_table .actions::after { content: ""; display: table; clear: both; }
.woocommerce-cart .shop_table .actions .coupon { display: inline-flex; gap: 8px; width: 420px; max-width: 100%; vertical-align: middle; float: left; }
.woocommerce-cart .shop_table .actions > .button { float: right; }
.woocommerce-cart .shop_table .actions .coupon label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.woocommerce-cart .shop_table .actions .coupon .input-text { flex: 1 1 auto; min-width: 0; height: 46px; }
.woocommerce-cart .shop_table .actions .coupon .button { height: 46px; padding: 0 22px; white-space: nowrap; }
.woocommerce-cart .shop_table .actions > .button { height: 46px; padding: 0 22px; background: var(--color-white); color: var(--color-black); border: 1px solid var(--color-black); }
.woocommerce-cart .shop_table .actions > .button:hover { background: var(--color-black); color: var(--color-white); }
.woocommerce-cart .shop_table .actions > .button:disabled { opacity: 0.4; cursor: not-allowed; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border: 1px solid var(--color-gray-300);
	padding: 12px 14px;
	width: 100%;
}
.woocommerce #payment #place_order,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
	background: var(--color-black);
	color: var(--color-white);
	border-radius: 0;
	padding: 14px 28px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.woocommerce #payment #place_order:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover { background: #222; }

/* WooCommerce notices (add-to-cart confirmation, form errors, etc.) —
   restyled to the theme's black/white palette instead of WC's default blue. */
.woocommerce-notices-wrapper { max-width: var(--container-max); margin-inline: auto; padding: 0 var(--container-padding); }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	list-style: none;
	background: var(--color-gray-100);
	border: 1px solid var(--color-gray-300);
	border-left: 3px solid var(--color-black);
	color: var(--color-text);
	padding: 14px 20px;
	margin: 20px 0;
	font-size: 13px;
}
.woocommerce-error { border-left-color: var(--color-error); }
.woocommerce-message .button, .woocommerce-info .button { order: 2; }

/* ==========================================================================
   Shop / category archive
   ========================================================================== */
.shop-header { padding: 32px var(--container-padding) 0; }
.shop-title { font-size: 24px; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; }
.breadcrumbs,
.svfit-breadcrumbs { font-size: 12px; color: var(--color-gray-600); margin-bottom: 8px; }
.breadcrumbs a,
.svfit-breadcrumbs a { text-decoration: underline; }

.shop-category-banner { max-width: var(--container-max); margin: 20px auto 0; padding: 0 var(--container-padding); }
.shop-category-banner img { width: 100%; height: auto; max-height: 320px; object-fit: cover; display: block; }

.shop-layout {
	padding: 24px var(--container-padding) 80px;
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 40px;
	align-items: start;
}
/* Same fix as the product gallery above: grid items default to
   min-width: auto, so without an explicit 0 here, unbreakable min-content
   width anywhere inside .shop-filters (long labels, number inputs, etc.)
   can force the whole grid wider than the viewport — most visible on the
   single-column mobile layout, where there's no 2nd column left to absorb it. */
.shop-filters,
.shop-main { min-width: 0; }

.shop-filters { display: flex; flex-direction: column; }
.shop-filter-group { padding: 20px 0; border-bottom: 1px solid var(--color-gray-200); }
.shop-filter-group__title { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; }
.shop-filter-group__options { display: flex; flex-direction: column; gap: 10px; }

.shop-filter-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.shop-filter-checkbox input { width: 15px; height: 15px; accent-color: var(--color-black); }
.shop-filter-checkbox__count { color: var(--color-gray-500); font-size: 12px; }
.shop-filter-checkbox.is-checked span:first-of-type { font-weight: 600; }

.shop-filter-group__options--pills { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-filter-group__options--pills .shop-filter-checkbox {
	border: 1px solid var(--color-gray-300);
	padding: 6px 12px;
	gap: 4px;
}
.shop-filter-group__options--pills .shop-filter-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.shop-filter-group__options--pills .shop-filter-checkbox.is-checked { border-color: var(--color-black); background: var(--color-black); color: var(--color-white); }
.shop-filter-group__options--pills .shop-filter-checkbox.is-checked .shop-filter-checkbox__count { color: var(--color-gray-300); }

.shop-filter-group__options--swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.shop-filter-swatch { position: relative; width: 32px; height: 32px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; }
.shop-filter-swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.shop-filter-swatch__media { display: block; width: 100%; height: 100%; border-radius: 999px; overflow: hidden; background: var(--color-gray-200); }
.shop-filter-swatch__media img { width: 100%; height: 100%; object-fit: cover; }
.shop-filter-swatch.is-checked { border-color: var(--color-black); }

.shop-filter-select { position: relative; }
.shop-filter-select select {
	width: 100%;
	appearance: none;
	border: 1px solid var(--color-gray-300);
	padding: 10px 30px 10px 12px;
	font-size: 13px;
	background: transparent;
}
.shop-filter-select select:hover { border-color: var(--color-black); }
.shop-filter-select .icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; pointer-events: none; }

.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--color-gray-200); margin-bottom: 24px; }
.shop-view-toggle { display: flex; gap: 4px; }
.shop-view-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; opacity: 0.35; }
.shop-view-btn.is-active { opacity: 1; }
.shop-view-btn .icon { width: 16px; height: 16px; }
.shop-result-count { font-size: 12px; color: var(--color-gray-600); margin: 0; }
.shop-sort { position: relative; display: inline-flex; align-items: center; }
.shop-sort select {
	appearance: none;
	border: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding-right: 20px;
	background: transparent;
}
.shop-sort .icon { position: absolute; right: 0; width: 12px; height: 12px; pointer-events: none; }

.shop-results ul.products.svfit-products-grid { padding: 0; margin: 0; }
.shop-results ul.products[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.shop-no-results { grid-column: 1 / -1; padding: 60px 0; text-align: center; color: var(--color-gray-600); margin: 0; }

/* Smooth cross-fade whenever the grid is replaced by a filter/sort/reset —
   is-loading is added right before the request fires (fade out) and
   removed a couple of frames after the new markup lands (fade back in),
   from shop-filters.js. */
.shop-results { transition: opacity 0.25s ease; }
.shop-results.is-loading { opacity: 0.35; }

.shop-load-more { display: flex; justify-content: center; margin-top: 40px; }
.shop-load-more .btn { min-width: 200px; }
.shop-load-more.is-loading .btn { opacity: 0.5; pointer-events: none; }

.shop-filters-reset {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 10px 14px;
	margin-bottom: 20px;
	border: 1px solid var(--color-black);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--color-black);
	color: var(--color-white);
}
.shop-filters-reset .icon { width: 12px; height: 12px; }
.shop-filters-reset:hover { background: #262626; }

.shop-filters-toggle { display: none; }

@media (max-width: 1024px) {
	.shop-layout { grid-template-columns: 200px 1fr; gap: 24px; }
}

@media (max-width: 782px) {
	.shop-layout { grid-template-columns: 1fr; }
	.shop-filters-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 14px 16px;
		border: 1px solid var(--color-gray-300);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		margin-bottom: 16px;
	}
	.shop-filters { display: none; border: 1px solid var(--color-gray-200); padding: 0 16px; margin-bottom: 24px; }
	.shop-filters.is-open { display: flex; }
	.shop-toolbar { flex-wrap: wrap; }
}

.svfit-product-breadcrumbs { max-width: var(--container-max); margin-inline: auto; padding: 16px var(--container-padding) 0; font-size: 12px; color: var(--color-gray-600); }
.svfit-product-breadcrumbs a:hover { text-decoration: underline; }

/* Back to top — appears once the viewport has scrolled past one screen.
   Square and black like the theme's other buttons; sits under the cart
   drawer (--z-drawer) so it never covers it. */
.back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: calc(var(--z-header) - 1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--color-black);
	color: var(--color-white);
	border: 1px solid var(--color-black);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base), background-color var(--transition-fast);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: #222; }
.back-to-top:focus-visible { outline: 2px solid var(--color-black); outline-offset: 2px; }
.back-to-top .icon { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
	.back-to-top { transition: none; }
}

/* ==========================================================================
   My Account
   ========================================================================== */
.woocommerce-account .entry-content,
.woocommerce-account .woocommerce {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 40px var(--container-padding) 96px;
}
/* Two columns (navigation + content) only once logged in — the logged-out
   login/register form has no navigation and must not be squeezed into a
   220px column. */
.woocommerce-account.logged-in .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 56px;
	align-items: start;
}
.woocommerce-account:not(.logged-in) .woocommerce-form-login,
.woocommerce-account:not(.logged-in) .woocommerce-form-register,
.woocommerce-account:not(.logged-in) .u-columns { max-width: 480px; margin-inline: auto; }

.woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: 2px; padding: 0; }
.woocommerce-MyAccount-navigation li { list-style: none; }
.woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: 12px 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-gray-600);
	border-left: 2px solid transparent;
	transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}
.woocommerce-MyAccount-navigation-link a:hover { color: var(--color-black); background: var(--color-gray-100); }
.woocommerce-MyAccount-navigation-link a[aria-current="page"],
.woocommerce-MyAccount-navigation-link.is-active a {
	color: var(--color-black);
	background: var(--color-gray-100);
	border-left-color: var(--color-black);
}
.woocommerce-MyAccount-navigation-link--customer-logout a { color: #b3261e; }

.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content > p:first-child { font-size: 14px; margin-bottom: 24px; }
.woocommerce-MyAccount-content > p:first-child a { text-decoration: underline; }
.woocommerce-MyAccount-content h2 { font-size: 18px; font-weight: 800; text-transform: uppercase; margin-bottom: 16px; }
.woocommerce-MyAccount-content h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.woocommerce-MyAccount-content fieldset { border: 1px solid var(--color-gray-200); padding: 20px; margin-top: 24px; }
.woocommerce-MyAccount-content fieldset legend { font-size: 12px; font-weight: 700; text-transform: uppercase; padding: 0 8px; }

/* Orders / downloads tables */
.woocommerce-orders-table,
.shop_table { width: 100%; border-collapse: collapse; font-size: 13px; }
.woocommerce-orders-table th,
.shop_table th {
	text-align: left;
	padding: 12px;
	border-bottom: 1px solid var(--color-gray-300);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-gray-600);
}
.woocommerce-orders-table td,
.shop_table td { padding: 14px 12px; border-bottom: 1px solid var(--color-gray-200); }
.woocommerce-orders-table__cell-order-status .order-status {
	display: inline-block;
	padding: 4px 10px;
	background: var(--color-gray-100);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.woocommerce-orders-table__cell-order-actions .button { padding: 8px 14px; font-size: 11px; margin: 2px; }
.woocommerce-Pagination { margin-top: 20px; }

/* Cart table — WooCommerce's own stylesheet is dequeued sitewide
   (woocommerce_enqueue_styles filter) since the theme styles every
   WooCommerce component itself, but that also means nothing was ever
   constraining these cells' native <img width="800" height="1000">
   attributes: without an explicit max-width the browser renders it at
   (up to) its full intrinsic size instead of a thumbnail. */
.shop_table .product-thumbnail { width: 84px; }
.shop_table .product-thumbnail img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: contain;
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
}
.shop_table .product-remove { width: 32px; text-align: center; }
.shop_table .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	font-size: 18px;
	line-height: 1;
	color: var(--color-gray-500);
}
.shop_table .product-remove a.remove:hover { color: var(--color-black); background: var(--color-gray-100); }
.shop_table .product-name a { font-weight: 600; }
.shop_table .product-quantity .svfit-quantity { margin: 0; }
.shop_table .actions { padding-top: 20px; }
.shop_table .coupon { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.shop_table .coupon .input-text { border: 1px solid var(--color-gray-300); padding: 10px 14px; min-width: 180px; }

@media (max-width: 782px) {
	.shop_table .product-thumbnail img { width: 56px; height: 56px; }

	/* WooCommerce's own shop_table_responsive stylesheet (also dequeued)
	   is what normally stacks these rows into label/value pairs on
	   mobile; the safety net here is deliberately lighter than
	   reproducing that — a horizontal scroll keeps every column legible
	   and correctly proportioned rather than letting them get squeezed
	   into an unreadable jumble. */
	.shop_table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.shop_table thead { display: table-header-group; }
	.shop_table tbody { display: table-row-group; }
	.shop_table tfoot { display: table-footer-group; }

	/* Cart page line items: the scroll fallback above is not good enough
	   here. A six-column row (remove / thumb / name / price / stepper /
	   subtotal) cannot fit a phone, and because the text columns wrap
	   instead of overflowing, the table never actually grows wide enough
	   to scroll — the browser just squeezes every cell (thumbnail down to
	   a sliver, the 128px stepper spilling out of its cell) with the
	   subtotal cut off past the edge. So on mobile each <tr> becomes a
	   card: thumbnail in a fixed left column, name / price / stepper +
	   subtotal stacked on the right, remove (×) pinned top-right. Scoped
	   to the cart form table only — the checkout review, cart totals and
	   My Account order tables have different columns and keep the plain
	   scroll fallback. */
	.woocommerce-cart-form__contents { overflow: visible; }
	.woocommerce-cart-form__contents thead { display: none; }
	.woocommerce-cart-form__contents tbody,
	.woocommerce-cart-form__contents tr { display: block; }
	.woocommerce-cart-form__contents tr.cart_item {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb name   remove"
			"thumb price  price"
			"thumb qty    subtotal";
		column-gap: 14px;
		row-gap: 6px;
		align-items: start;
		padding: 16px 0;
		border-bottom: 1px solid var(--color-gray-200);
	}
	.woocommerce-cart-form__contents tr.cart_item td { display: block; width: auto; padding: 0; border: 0; }
	.woocommerce-cart-form__contents .product-thumbnail { grid-area: thumb; }
	.woocommerce-cart-form__contents .product-thumbnail img { width: 72px; height: 72px; }
	.woocommerce-cart-form__contents .product-name { grid-area: name; font-size: 14px; line-height: 1.4; }
	.woocommerce-cart-form__contents .product-name .variation { margin-top: 4px; font-size: 12px; color: var(--color-gray-600); }
	.woocommerce-cart-form__contents .product-remove { grid-area: remove; text-align: right; margin: -4px -4px 0 0; }
	.woocommerce-cart-form__contents .product-price { grid-area: price; color: var(--color-gray-600); }
	.woocommerce-cart-form__contents .product-quantity { grid-area: qty; align-self: end; }
	.woocommerce-cart-form__contents .product-subtotal { grid-area: subtotal; align-self: end; text-align: right; font-weight: 600; font-size: 14px; padding-bottom: 12px; }

	.woocommerce-cart-form__contents td.actions { display: block; padding-inline: 0; }
	.woocommerce-cart .shop_table .actions .coupon { float: none; width: 100%; margin-bottom: 12px; }
	.woocommerce-cart .shop_table .actions > .button { float: none; width: 100%; }
	.woocommerce-cart-form__contents .coupon { flex-wrap: nowrap; }
	.woocommerce-cart-form__contents .coupon .input-text { flex: 1; min-width: 0; }
	.woocommerce-cart-form__contents .coupon .button { flex-shrink: 0; }
	.woocommerce-cart-form__contents .actions > .button { width: 100%; margin-top: 12px; }
}

/* Addresses */
.woocommerce-Addresses.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: none; padding: 0; margin: 0; }
.woocommerce-Address {
	border: 1px solid var(--color-gray-200);
	padding: 24px;
}
.woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-gray-200);
}
.woocommerce-Address-title h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.woocommerce-Address-title .edit {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 6px 12px;
	border: 1px solid var(--color-gray-300);
}
.woocommerce-Address-title .edit:hover { border-color: var(--color-black); }
address { font-style: normal; font-size: 14px; line-height: 1.8; color: var(--color-gray-600); }

/* Login / Register (form-login.php) — WC's own col2-set/u-column layout CSS
   is intentionally disabled sitewide (woocommerce_enqueue_styles filter),
   so the grid below replaces just enough of it to keep the two columns. */
.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 720px; margin-inline: auto; padding: 40px var(--container-padding) 96px; }
.col2-set .woocommerce-form h2 { font-size: 16px; font-weight: 800; text-transform: uppercase; margin-bottom: 16px; }
.woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; text-transform: none; }
.lost_password { margin-top: 12px; font-size: 12px; }
.lost_password a { text-decoration: underline; }
@media (max-width: 782px) {
	.col2-set { grid-template-columns: 1fr; gap: 32px; }
	.woocommerce-account.logged-in .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; gap: 24px; }
	.woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; }
	.woocommerce-Addresses.col2-set { grid-template-columns: 1fr; }
	.woocommerce-Address-title { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Default page template header: breadcrumb + title on a black band, used by
   plain content pages (page.php, page-wishlist.php) that don't open with
   their own Flexible Content hero/banner section. */
.page-header-banner { background: var(--color-black); }
.page-header-inner { max-width: var(--container-max); margin-inline: auto; padding: 40px var(--container-padding); }
.page-header-banner .breadcrumbs,
.page-header-banner .svfit-breadcrumbs { color: rgba(255, 255, 255, 0.6); }
.page-header-banner .breadcrumbs a,
.page-header-banner .svfit-breadcrumbs a { color: var(--color-white); }
.page-header-banner .breadcrumb-separator { color: rgba(255, 255, 255, 0.4); }
.page-header-banner .page-title { color: var(--color-white); font-size: 26px; font-weight: 800; text-transform: uppercase; margin: 8px 0 0; }

/* Contact page */
.page-content { max-width: var(--container-max); margin-inline: auto; padding: 40px var(--container-padding) 96px; }
.contact-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; margin-top: 24px; }
.contact-info .page-title { margin-bottom: 16px; }
.contact-info > p { font-size: 14px; line-height: 1.7; margin-bottom: 24px; }
.contact-info-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; padding-top: 24px; border-top: 1px solid var(--color-gray-200); }
.contact-info-list li { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.contact-info-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-gray-500); }
.contact-info .social-links-item a { color: var(--color-black); }
.contact-form { background: var(--color-gray-100); padding: 32px; }
@media (max-width: 782px) {
	.contact-layout { grid-template-columns: 1fr; gap: 40px; }
	.post-list { grid-template-columns: 1fr; gap: 32px; }
	.blog-archive, .single-layout { padding-bottom: 56px; }
	.single-post-content { font-size: 15px; }
	.single-post-content h2 { font-size: 21px; }
	.single-post-content h3 { font-size: 18px; }
	.contact-form { padding: 24px; }
}

/* ==========================================================================
   Blog: archive + single
   ========================================================================== */
.blog-archive { padding: 40px var(--container-padding) 80px; }
.blog-archive-intro { max-width: 800px; margin: 0 auto 40px; font-size: 15px; line-height: 1.8; color: var(--color-gray-600); }
.blog-archive-empty { padding: 40px 0 80px; text-align: center; color: var(--color-gray-600); }

.post-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 24px;
}
.post-list .post-card-title { font-size: 17px; }

/* Pagination (the_posts_pagination) */
.navigation.pagination { margin-top: 56px; }
.navigation.pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--color-gray-300);
	font-size: 13px;
	font-weight: 600;
}
.navigation.pagination .page-numbers:hover { border-color: var(--color-black); }
.navigation.pagination .page-numbers.current { background: var(--color-black); border-color: var(--color-black); color: var(--color-white); }
.navigation.pagination .page-numbers.dots { border-color: transparent; }

/* Single post: a fixed 800px reading column with the table of contents
   beside it. minmax(0, …) on the second track keeps a long heading in the
   contents from widening the column. */
.single-layout {
	display: grid;
	grid-template-columns: minmax(0, 800px) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
	padding: 40px var(--container-padding) 80px;
}
.single-layout.has-no-toc { grid-template-columns: minmax(0, 800px); justify-content: center; }
.single-layout > .single-post { order: 1; min-width: 0; }
.single-layout > .svfit-toc { order: 2; }

.single-post-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--color-gray-500); margin-bottom: 20px; }
.single-post-category { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-black); }
.single-post-category:hover { text-decoration: underline; }
.single-post-thumbnail { margin-bottom: 32px; background: var(--color-gray-100); }
.single-post-thumbnail img { display: block; width: 100%; height: auto; }

.single-post-content { font-size: 16px; line-height: 1.8; }
.single-post-content > * + * { margin-top: 1.1em; }
.single-post-content h2 { font-size: 24px; font-weight: 800; line-height: 1.3; margin-top: 2em; scroll-margin-top: calc(var(--header-height) + 24px); }
.single-post-content h3 { font-size: 19px; font-weight: 700; line-height: 1.35; margin-top: 1.6em; scroll-margin-top: calc(var(--header-height) + 24px); }
.single-post-content h4 { font-size: 17px; font-weight: 700; margin-top: 1.4em; }
.single-post-content img { max-width: 100%; height: auto; }
.single-post-content ul,
.single-post-content ol { padding-left: 1.3em; }
.single-post-content li + li { margin-top: 0.4em; }
.single-post-content a { text-decoration: underline; text-underline-offset: 2px; }
.single-post-content blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--color-black);
	font-size: 17px;
}
.single-post-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.single-post-content th,
.single-post-content td { padding: 10px 12px; border: 1px solid var(--color-gray-200); text-align: left; }

/* Table of contents */
.svfit-toc {
	position: sticky;
	top: calc(var(--header-height) + 24px);
	/* Hugs the right edge of the page rather than filling the whole
	   remaining track, which would leave a very wide list of short links. */
	max-width: 340px;
	margin-left: auto;
	border: 1px solid var(--color-gray-200);
	background: var(--color-gray-100);
}
.svfit-toc-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 16px 18px;
	text-align: left;
	cursor: pointer;
}
.svfit-toc-title { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.svfit-toc-chevron { width: 16px; height: 16px; flex: none; transition: transform var(--transition-base); }
.svfit-toc-toggle[aria-expanded="true"] .svfit-toc-chevron { transform: rotate(180deg); }
.svfit-toc-list {
	list-style: none;
	margin: 0;
	padding: 0 18px 18px;
	max-height: min(60vh, 520px);
	overflow-y: auto;
	counter-reset: svfit-toc;
}
.svfit-toc-toggle[aria-expanded="false"] + .svfit-toc-list { display: none; }
.svfit-toc-item { font-size: 13px; line-height: 1.5; }
.svfit-toc-item + .svfit-toc-item { margin-top: 10px; }
.svfit-toc-item.is-level-3 { padding-left: 14px; font-size: 12.5px; }
.svfit-toc-item a { color: var(--color-gray-600); }
.svfit-toc-item a:hover { color: var(--color-black); text-decoration: underline; }
.svfit-toc-item.is-active > a { color: var(--color-black); font-weight: 700; }

/* Contact Form 7 */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel { border: 1px solid var(--color-gray-300); padding: 12px 14px; width: 100%; margin-bottom: 16px; }
.wpcf7-form-control.wpcf7-submit {
	background: var(--color-black);
	color: var(--color-white);
	border: 0;
	border-radius: 0;
	padding: 14px 28px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
}
.wpcf7-form-control.wpcf7-submit:hover { background: #222; }
.wpcf7-not-valid-tip { color: var(--color-error); font-size: 12px; margin-top: -12px; margin-bottom: 12px; }
.wpcf7-response-output { border: 1px solid var(--color-gray-300); padding: 12px; margin-top: 16px; font-size: 13px; }

/* -- Responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
	.site-footer-top { grid-template-columns: 1fr 1fr; }
	.footer-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 40px; }
	.footer-side > * { flex: 1 1 240px; }
	.back-to-top { right: 16px; bottom: 16px; width: 40px; height: 40px; }
	.category-grid { --svfit-columns: 2 !important; }
	.image-grid { --svfit-columns: 2 !important; }
	.section-image-grid.is-layout-feature-left .image-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
	.section-image-grid.is-layout-feature-left .image-grid-tile:first-child { grid-row: auto; aspect-ratio: 1 / 1; }
	.latest-posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.single-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.single-layout > .svfit-toc { order: 0; position: static; max-width: none; margin-left: 0; }

	/* Latest Posts, "Swipeable slider" mobile layout: same native scroll-snap
	   treatment as the product rows, so no slider library is involved. */
	.latest-posts-grid:not(.is-mobile-grid) {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 12px;
		padding-bottom: 12px;
	}
	.latest-posts-grid:not(.is-mobile-grid) > .post-card { flex: 0 0 68%; scroll-snap-align: start; }
	.svfit-usp-list, .svfit-home-promos { grid-template-columns: 1fr; }

	/* Homepage product grids (Featured Products, Products by Category) and
	   Related Products become a horizontal scroll-snap slider on tablet
	   too — no JS library needed, native scroll-snap handles paging,
	   momentum, and keyboard/trackpad scrolling for free. The Shop archive
	   grid is deliberately excluded here: its own mobile-slider behavior is
	   opt-in, gated by body.shop-mobile-slider below. */
	ul.products.svfit-home-products:not(.is-mobile-grid),
	.related ul.products {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 12px;
		padding-bottom: 12px;
	}
	ul.products.svfit-home-products:not(.is-mobile-grid) > li,
	.related ul.products > li {
		flex: 0 0 calc(50% - 6px);
		scroll-snap-align: start;
	}
	/* "Grid" mobile layout opt-out: stays a real grid instead of a slider. */
	ul.products.svfit-home-products.is-mobile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	body.shop-mobile-slider .shop-results ul.products {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 12px;
	}
	body.shop-mobile-slider .shop-results ul.products > li {
		flex: 0 0 68%;
		scroll-snap-align: start;
	}
}

@media (max-width: 782px) {
	:root { --header-height: 60px; }
	.site-logo img { max-height: 40px; }

	.mobile-menu-toggle { display: inline-flex; }
	.primary-nav { display: none; }
	.site-header-inner { grid-template-columns: auto auto 1fr; padding: 0 10px; gap: 8px; }
	.header-icons { justify-self: end; gap: 0; }
	.header-icon-account,
	.wishlist-trigger,
	.header-icons .header-language-switcher { display: none; }

	.site-footer-top { grid-template-columns: 1fr; padding: 40px var(--container-padding); gap: 32px; }
	.footer-side { flex-direction: column; gap: 32px; }
	.footer-columns { grid-template-columns: 1fr; gap: 8px; }
	.social-links-item a { width: 32px; height: 32px; }
	.social-links-item .icon { width: 16px; height: 16px; }

	.section-hero-slider { height: 460px; min-height: 0; }
	/* "Match the image" mode is only ~100vw/ratio tall on phones, so the
	   caption shrinks and hugs the bottom edge instead of covering the banner. */
	.section-hero-slider.is-height-image .hero-slide-content { bottom: 12px; max-width: 70%; }
	.section-hero-slider.is-height-image .hero-slide-heading { font-size: 20px; margin-bottom: 8px; }
	.section-hero-slider.is-height-image .hero-slide-subheading { font-size: 11px; margin-bottom: 4px; }
	.section-hero-slider.is-height-image .hero-slide-content .btn { padding: 8px 14px; font-size: 11px; }
	.hero-slide-content { bottom: 40px; }

	.section-banner-image { height: 42vh; min-height: 280px; }
	.section-banner-content { padding: 0 24px; }

	.section-media-content,
	.section-media-content.is-media-right { grid-template-columns: 1fr; direction: ltr; }
	.section-media-content-media { min-height: 280px; }
	.section-media-content-inner { padding: 32px var(--container-padding); }

	body.shop-mobile-slider .shop-results ul.products > li { flex: 0 0 58%; }
	ul.products.svfit-home-products:not(.is-mobile-grid) > li { flex: 0 0 68%; }
	ul.products.svfit-home-products.is-mobile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
	/* Related Products: 2 per view on mobile, matching Recently Viewed. */
	.related ul.products > li { flex: 0 0 calc(50% - 6px); }

	/* The 2/4-column desktop toggle remaps to 1/2 columns on mobile — the
	   same data-columns value keeps its "denser" vs "looser" meaning, it's
	   just relative to a narrower viewport. Default (data-columns="4") lands
	   on 2 per row on mobile, matching the shop's default grid density. */
	body:not(.shop-mobile-slider) .shop-results ul.products[data-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body:not(.shop-mobile-slider) .shop-results ul.products[data-columns="2"] { grid-template-columns: repeat(1, 1fr); }

	/* Shop by category: same horizontal-slider treatment as the product
	   grids, mobile only (tablet keeps the 2-column grid from the 1024px
	   breakpoint above). */
	.category-grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 12px;
	}
	.category-tile { flex: 0 0 58%; scroll-snap-align: start; }

	/* display:block instead of a 1-column grid: a `1fr` track still has to
	   be *computed* (against the container's width, itself dependent on
	   ancestors/viewport), and on a real device — slower than headless
	   testing — that computation could transiently run before the gallery
	   images/JS have settled, momentarily resolving wider than the
	   viewport and overflowing the whole page (this is what the live site
	   showed and headless testing mostly didn't catch). A single column
	   was always just "stack everything full-width" anyway, which is
	   exactly what block-level children do by default with no
	   track-sizing math involved at all. */
	.single-product div.product { display: block; padding-top: 24px; }
	.single-product div.product > .woocommerce-product-gallery,
	.single-product div.product > .summary { margin-bottom: 24px; }

	/* .onsale's desktop positioning (grid-column/row + justify/align-self)
	   is meaningless once the parent isn't display:grid — position:absolute
	   here does the same job the plain way: anchored to div.product's own
	   position:relative, with no thumbnail column to the image's left on
	   mobile (thumbnails move below instead), so no extra offset is needed. */
	.single-product span.onsale {
		position: absolute;
		/* div.product's own padding-top (24px) plus the gap before the
		   image within .woocommerce-product-gallery (12px) puts the image's
		   real top edge ~36px down from div.product's own edge, which is
		   what top/left are measured from — 16px alone left the badge
		   mostly above the image instead of overlapping it. */
		top: 44px;
		left: 16px;
		margin: 0;
	}

	/* Thumbnails move below the main image, as a horizontal scroll strip,
	   once there's no room for a side column. */
	.woocommerce-product-gallery { flex-direction: column; }
	/* flex: 1 1 0 (desktop rule) sizes the main gallery along the row's
	   width axis; reused unchanged here it would instead flex-basis:0 the
	   *height* with nothing to grow into (column direction, container has
	   no explicit height), collapsing the main image to 0px. flex-basis:auto
	   here instead resolves height from the aspect-ratio set on this same
	   element further up (width:100% is definite, so per spec aspect-ratio
	   resolves the height before flex-basis:auto would otherwise have to
	   fall back to measuring content) — a pure function of this element's
	   own width, independent of any JS or of its children's content.
	   max-height is a hard safety net on top of that, independent of
	   whatever sets the actual height, for anything that still manages to
	   force an explicit height here despite the above. 150vw is
	   deliberately well above the ~125vw (100vw × 4/5) a correctly-
	   rendered image needs, so it never clips a working render; Swiper's
	   own overflow:hidden is what makes the clip at this cap invisible
	   instead of showing a hard crop line. vw rather than vh: this box's
	   height is meant to track its own *width*-driven aspect-ratio, and vw
	   sidesteps iOS Safari's dynamic address bar changing vh mid-session. */
	.svfit-gallery-main { order: 1; flex: 0 0 auto; width: 100%; max-height: 150vw; }
	.svfit-gallery-thumbs {
		flex-direction: row;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-x;
		width: 100%;
		order: 2;
		padding-bottom: 4px;
	}
	.svfit-gallery-thumb { flex: 0 0 76px; }

	/* Arrow nav is only useful once there's no thumbnail strip to reach for
	   — kept on mobile (touch users have no hover affordance otherwise),
	   hidden on desktop where the thumbnail column already does the job. */
	.svfit-gallery-nav { display: flex; }

	.cart-drawer { width: 100%; }

	/* Single column now, so the explicit grid-column/grid-row placement
	   from the desktop rule must be reset to auto — otherwise these three
	   would still try to occupy the (now nonexistent) 2-column/2-row
	   arrangement instead of stacking in a sensible order. */
	.woocommerce-checkout form.checkout { grid-template-columns: 1fr; gap: 0; }
	.woocommerce-checkout #customer_details { margin-bottom: 32px; }
	.woocommerce-cart .woocommerce { grid-template-columns: 1fr; gap: 32px; }
	.woocommerce-cart .cart-collaterals { position: static; }
	#customer_details { grid-column: auto; grid-row: auto; order: 1; }
	#order_review_heading { grid-column: auto; grid-row: auto; order: 2; }
	#order_review { grid-column: auto; grid-row: auto; order: 3; }
}

/* ==========================================================================
   Toast notifications
   ========================================================================== */
.svfit-toast-container {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	pointer-events: none;
	max-width: calc(100vw - 32px);
}
.svfit-toast {
	background: var(--color-black);
	color: var(--color-white);
	padding: 14px 22px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 4px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.svfit-toast.is-visible { opacity: 1; transform: translateY(0); }
.svfit-toast--error { background: var(--color-error); }

/* ==========================================================================
   Variation validation
   ========================================================================== */
.svfit-variation-attribute.has-error .svfit-variation-options { border: 1px solid var(--color-error); border-radius: 4px; padding: 8px; margin: -8px; }
.svfit-variation-attribute.has-error .svfit-variation-label { color: var(--color-error); }