/* =========================================================================
   PRODUCTRA / SKULLMEN - front-end design system
   Palette pulled directly from the brand mark: black cap, bone skull, gold
   type + crossbones. Built on top of the bundled Bootstrap grid - this file
   overrides Bootstrap's defaults rather than fighting them.

   ORDER OF THIS FILE:
   1. Tokens and reset
   2. Global (buttons, sections, eyebrow, WhatsApp float, overlay, and the
      patterns shared by several components: ghost type, disclosure rows,
      keyboard focus ring)
   3. Header (3a: mega menu)
   4. Footer
   5. Front page, in the order sections appear on the page:
      Hero -> Trust strip -> Product grid and card -> New arrivals carousel ->
      Collections strip -> Browse by category -> How it works -> About ->
      Testimonials -> Newsletter
   6. Archive / filter bar (shared with the front page's product grid)
   7. Single product template
   8. About page template
   9. Contact page template
   10. 404 page template

   Every component keeps its own media queries directly below its base
   rules, listed from the largest breakpoint to the smallest.

   BREAKPOINTS (only these four are used, matching Bootstrap's scale):
   1199px  laptop and below
    991px  tablet and below
    767px  large phone and below
    575px  small phone
   CSS variables cannot be used inside @media queries, so these numbers
   are typed out. Do not add new widths - reuse one of the four.

   COLOUR RULES:
   - Never hard-code a colour that exists as a token. For transparency use
     rgba(var(--sm-bone-rgb), 0.x), rgba(var(--sm-ink-rgb), 0.x), etc.
   - Dark sections (default, .sm-alt) use bone text. Light sections
     (.sm-light) use ink text and --sm-gold-deep, never --sm-gold, for text.
   - Keep sections alternating dark / alt / light down the page.
   - THE GOLD FAMILY, EACH SHADE WITH A JOB:
       --sm-gold-grad   (champagne > antique > deep, 135deg)
                      = "primary emphasis": solid buttons, the hero headline
                      highlight, the ticker, the "New" tag.
       --sm-gold-light  (champagne)
                      = "readable accent on dark": prices, outline buttons,
                      outline chips and their hover borders, carousel and
                      card dots, 404 zero, hero progress bar.
       --sm-gold        (antique)
                      = "structure and hover fills": links, eyebrows,
                      diamonds, nav underline, mega-menu and footer headings,
                      icons, hairlines, frames, rings, brackets, large
                      display numbers, hover/checked fills (filters, arrows,
                      tiles), the Bestseller tag.
       --sm-gold-deep / --sm-gold-text
                      = all gold text and borders on light sections.
       --sm-yellow      (bright)
                      = a single small spark only: the live slide number in
                      the hero counter. Do not use it for anything else.
     Never use two gold shades on the same small element, except the
     gradient, which already blends them.

   SHARED KEYFRAMES: sm-spin and sm-reveal (both defined in 5a). sm-spin is
   also used by the 404 page.
   ========================================================================= */

/* =========================================================================
   1. TOKENS AND RESET
   ========================================================================= */

:root {
	/* brand palette */
	--sm-ink: #0b0b0c;
	/*
	 * GOLD OPTIONS. The original #c9a227 reads as yellow. Pick ONE set:
	 * the first is active; to switch, swap the four gold lines and the
	 * --sm-gold-rgb line further down (values for each set are listed here).
	 *
	 *   A. Antique gold (active)  gold #bf8f3c  deep #8a5f1c  shadow #2a1e0e  text #6b4812  rgb 191, 143, 60
	 *   B. Champagne (softest)    gold #c9a96e  deep #8c6d3a  shadow #231c10  text #66491f  rgb 201, 169, 110
	 *   C. Burnished (richest)    gold #c8872a  deep #8a561a  shadow #2b1a0a  text #6a3f10  rgb 200, 135, 42
	 *   (Original yellow)         gold #c9a227  deep #8a6a1e  shadow #2b2410  text #6f5418  rgb 201, 162, 39
	 */
	--sm-charcoal: #17140f;
	--sm-bone: #ece3d0;
	--sm-bone-dim: #b9ad93;
	--sm-gold: #bf8f3c;
	--sm-gold-deep: #8a5f1c;
	--sm-gold-shadow: #2a1e0e;
	--sm-gold-text: #6b4812; /* small gold text on bone, AA contrast */
	--sm-gold-light: #e2c98f; /* champagne: readable accent on dark sections */
	--sm-gold-grad: linear-gradient(135deg, #e2c98f 0%, #bf8f3c 55%, #a8742a 100%);
	--sm-yellow: #d6ac2b; /* bright yellow: one small spark only (hero slide number) */
	--sm-rust: #6b2b23;
	--sm-white: #fff;
	--sm-black: #050505;

	/* fonts, sizing, animation */
	--sm-font-display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
	--sm-font-body: 'Work Sans', -apple-system, 'Segoe UI', sans-serif;
	--sm-container-max: 1320px;
	--animate-duration: 0.6s;
	--animate-delay: 0s;

	/* colour channels, for use inside rgba() */
	--sm-ink-rgb: 11, 11, 12;
	--sm-charcoal-rgb: 23, 20, 15;
	--sm-bone-rgb: 236, 227, 208;
	--sm-gold-rgb: 191, 143, 60;
	--sm-gold-light-rgb: 226, 201, 143;
	--sm-yellow-rgb: 214, 172, 43;

	/* text on light sections */
	--sm-ink-muted: rgba(var(--sm-ink-rgb), 0.6);
	--sm-ink-soft: rgba(var(--sm-ink-rgb), 0.68);
	--sm-ink-faint: rgba(var(--sm-ink-rgb), 0.5);

	/* borders and lines */
	--sm-line-gold: rgba(var(--sm-gold-rgb), 0.25);
	--sm-line-bone: rgba(var(--sm-bone-rgb), 0.15);
	--sm-line-ink: rgba(var(--sm-ink-rgb), 0.1);

	/* spacing */
	--sm-space-xs: 10px;
	--sm-space-sm: 12px;
	--sm-section-pad: 76px;
	--sm-section-pad-lg: 96px;
	--sm-head-gap: 56px;
	--sm-head-max: 560px;

	/* Distance from the top of the viewport for sticky side panels (filters, product info). Clears the header. */
	--sm-sticky-top: 110px;

	/*
	 * Left/right edge of .sm-container content; use for full-bleed elements
	 * that must line up with it. Uses 100% (not 100vw) so the scrollbar width
	 * is not counted. Only valid where the containing block is full width.
	 */
	--sm-gutter: max(20px, calc((100% - var(--sm-container-max)) / 2 + 20px));

	/* type */
	--sm-lh-copy: 1.6;
	--sm-text-sm: 0.82rem;
	--sm-text-base: 0.92rem;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body.productra {
	margin: 0;
	background: var(--sm-ink);
	color: var(--sm-bone);
	font: 16px/1.65 var(--sm-font-body);
	-webkit-font-smoothing: antialiased;
}

.productra a {
	color: var(--sm-gold);
	text-decoration: none;
}

/* Hide the ring for mouse clicks only; keyboard focus stays visible */
.productra a:focus:not(:focus-visible) {
	outline: none;
}

.productra a:hover {
	color: var(--sm-bone);
}

.productra img {
	display: block;
	max-width: 100%;
}

.productra h1,
.productra h2,
.productra h3,
.productra .sm-display {
	margin: 0 0 0.4em;
	color: var(--sm-bone);
	font-family: var(--sm-font-display);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0.01em;
}

.productra h1 {
	font-size: clamp(2.4rem, 6vw, 4.6rem);
}

.productra h2 {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.productra h3 {
	font-size: clamp(1.2rem, 2.4vw, 1.5rem);
}


/* =========================================================================
   2. GLOBAL
   ========================================================================= */

body.sm-menu-open {
	overflow: hidden;
}

/*
 * Hidden only when JS is available, so content never stays invisible if the
 * animation script fails. Requires the `js` class on <html>, e.g. inline in
 * header.php: document.documentElement.classList.add('js')
 */
.js .wow {
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.wow {
		visibility: visible !important;
		animation: none !important;
	}
}

#ast-scroll-top {
	display: none !important;
}

.sm-container {
	max-width: var(--sm-container-max);
	margin: 0 auto;
	padding: 0 20px;
}

.sm-body-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
	z-index: 90;
	bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    height: 100vw;
}

.sm-body-overlay.is-visible {
	opacity: 1;
	visibility: visible;
}

.whatsapp-float {
	position: fixed;
	right: 24px;
	bottom: 24px;
	display: none;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 10px 17px;
	background: #25d366; /* WhatsApp brand green */
	color: var(--sm-white) !important;
	font-size: 0.94rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
	z-index: 99999;
}

.whatsapp-float:hover {
	background: #20bd5a;
	color: var(--sm-white) !important;
	transform: translateY(-2px);
	box-shadow: 0 7px 20px rgba(0, 0, 0, 0.22);
}

.whatsapp-float:focus-visible {
	outline: 3px solid rgba(37, 211, 102, 0.35);
	outline-offset: 3px;
}

.whatsapp-float__icon {
	width: 23px;
	height: 23px;
	flex: 0 0 23px;
	color: var(--sm-white);
}

.productra .sm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	color: var(--sm-gold);
	font-family: var(--sm-font-body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.productra .sm-eyebrow::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	background: var(--sm-gold);
	transform: rotate(45deg);
}

/* Prefixed to beat `.productra .sm-eyebrow` */
.productra .sm-eyebrow-muted {
	color: var(--sm-bone-dim);
}

/* Buttons */
.sm-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 26px;
	border: 1px solid var(--sm-gold-light);
	color: var(--sm-gold-light);
	background: transparent;
	cursor: pointer;
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-base);
	font-weight: 600;
	letter-spacing: 0.02em;
	transition:
		background 0.18s ease,
		color 0.18s ease,
		border-color 0.18s ease;
}

/* .productra prefix so this beats `.productra a:hover` when the button is a link */
.productra .sm-btn:hover {
	background: var(--sm-gold);
	border-color: var(--sm-gold);
	color: var(--sm-ink);
}

.sm-btn.sm-btn-sm {
	gap: 7px;
	padding: 9px 18px;
	font-size: var(--sm-text-sm);
}

.sm-btn.sm-btn-solid {
	background: var(--sm-gold-grad);
	border-color: var(--sm-gold);
	color: var(--sm-ink);
}

/* Prefixed so it beats `.productra .sm-btn:hover` above */
.productra .sm-btn.sm-btn-solid:hover {
	background: var(--sm-gold-deep);
	border-color: var(--sm-gold-deep);
	color: var(--sm-bone);
}

.sm-btn.sm-btn-ghost {
	border-color: rgba(var(--sm-bone-rgb), 0.35);
	color: var(--sm-bone);
}

.productra .sm-btn.sm-btn-ghost:hover {
	background: var(--sm-bone);
	color: var(--sm-ink);
	border-color: var(--sm-bone);
}

/* ---- Button colour variants (add next to .sm-btn) ---- */

/* Black: strong on bone sections, bone-outlined on dark ones */
.sm-btn.sm-btn-ink {
	background: var(--sm-ink);
	border-color: rgba(var(--sm-bone-rgb), 0.35);
	color: var(--sm-bone);
}
.productra .sm-btn.sm-btn-ink:hover {
	background: var(--sm-bone);
	border-color: var(--sm-bone);
	color: var(--sm-ink);
}

/* Bone: light button for dark sections and hero */
.sm-btn.sm-btn-bone {
	background: var(--sm-bone);
	border-color: var(--sm-bone);
	color: var(--sm-ink);
}
.productra .sm-btn.sm-btn-bone:hover {
	background: var(--sm-gold);
	border-color: var(--sm-gold);
	color: var(--sm-ink);
}

/* Deep bronze: calm secondary action */
.sm-btn.sm-btn-deep {
	background: var(--sm-gold-deep);
	border-color: var(--sm-gold-deep);
	color: var(--sm-bone);
}
.productra .sm-btn.sm-btn-deep:hover {
	background: var(--sm-gold-grad);
	border-color: var(--sm-gold);
	color: var(--sm-ink);
}

/* Rust: sale, limited drop, or destructive actions */
.sm-btn.sm-btn-rust {
	background: var(--sm-rust);
	border-color: var(--sm-rust);
	color: var(--sm-bone);
}
.productra .sm-btn.sm-btn-rust:hover {
	background: var(--sm-gold);
	border-color: var(--sm-gold);
	color: var(--sm-ink);
}

/* WhatsApp green: matches the floating button */
.sm-btn.sm-btn-whatsapp {
	background: #25d366;
	border-color: #25d366;
	color: var(--sm-white);
}
.productra .sm-btn.sm-btn-whatsapp:hover {
	background: #20bd5a;
	border-color: #20bd5a;
	color: var(--sm-white);
}

/* Ink outline: the outline button for light (bone) sections */
.sm-btn.sm-btn-outline-ink {
	border-color: var(--sm-ink);
	color: var(--sm-ink);
}
.productra .sm-btn.sm-btn-outline-ink:hover {
	background: var(--sm-ink);
	border-color: var(--sm-ink);
	color: var(--sm-bone);
}

/* Keyboard focus for every button */
.sm-btn:focus-visible {
	outline: 2px solid var(--sm-gold-light);
	outline-offset: 3px;
}
.sm-section.sm-light .sm-btn:focus-visible {
	outline-color: var(--sm-gold-deep);
}

/* Gold on bone is too faint, so solid buttons flip to ink on light sections */
.sm-section.sm-light .sm-btn.sm-btn-solid {
	background: var(--sm-ink);
	border-color: var(--sm-ink);
	color: var(--sm-bone);
}

.productra .sm-section.sm-light .sm-btn.sm-btn-solid:hover {
	background: var(--sm-gold-deep);
	border-color: var(--sm-gold-deep);
	color: var(--sm-bone);
}

/* Sections */
.sm-section {
	padding: var(--sm-section-pad) 0;
}

.sm-section.sm-alt {
	background: var(--sm-charcoal);
}

.sm-section.sm-light {
	background: var(--sm-bone);
	color: var(--sm-ink);
}

.sm-section.sm-light h2,
.sm-section.sm-light h3 {
	color: var(--sm-ink);
}

.sm-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 40px;
	flex-wrap: wrap;
}

.sm-section-head-center {
	display: flex;
	justify-content: center;
	max-width: var(--sm-head-max);
	margin: 0 auto var(--sm-head-gap);
	text-align: center;
}

.sm-section-head-center > div {
	width: 100%;
}

.sm-section-head-center h2 {
	margin: var(--sm-space-xs) 0 var(--sm-space-sm);
}

/* Default sections are dark, so the intro copy is bone; light sections flip it */
.sm-section-head-center p {
	color: var(--sm-bone-dim);
	line-height: var(--sm-lh-copy);
}

.sm-section.sm-light .sm-section-head-center p {
	color: var(--sm-ink-muted);
}

/* ---- Shared: outlined display-type watermark behind section content.
   Each one sets its own font size, stroke and position further down. ---- */

.sm-slide-ghost,
.sm-about-ghost,
.sm-newsletter-ghost,
.sm-contact-ghost,
.sm-404-ghost {
	position: absolute;
	color: transparent;
	white-space: nowrap;
	pointer-events: none;
}

/* ---- Shared: disclosure rows (filter groups in 6, product accordions in 7) ---- */

.sm-filter-group,
.sm-accordion {
	border-bottom: 1px solid var(--sm-line-bone);
}

.sm-filter-group summary,
.sm-accordion summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0;
	list-style: none;
	cursor: pointer;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.sm-filter-group summary::-webkit-details-marker,
.sm-accordion summary::-webkit-details-marker {
	display: none;
}

.sm-filter-group summary::after,
.sm-accordion summary::after {
	content: "+";
	font-size: 1.2rem;
	line-height: 1;
}

.sm-filter-group[open] summary::after,
.sm-accordion[open] summary::after {
	content: "\2212";
}

/* ---- Shared: one keyboard focus ring for the gold-ringed controls.
   Controls that need a different offset set only `outline-offset` where
   they are styled (hero, cards and the lightbox keep their own variants). ---- */

.sm-filter-group summary:focus-visible,
.sm-accordion summary:focus-visible,
.sm-filter-option input:focus-visible + span,
.sm-catbar-more summary:focus-visible,
.sm-pdp-dots button:focus-visible,
.sm-arrivals-nav button:focus-visible,
.sm-cat-tile:focus-visible,
.sm-pdp-zoom:focus-visible,
.sm-pdp-play:focus-visible,
.sm-lb button:focus-visible {
	outline: 2px solid var(--sm-gold);
	outline-offset: 2px;
}

/* Tablets and phones: floating Enquire replaces the header button */
@media (max-width: 991px) {
	.whatsapp-float {
		display: inline-flex;
	}
}

@media (max-width: 767px) {
	:root {
		--sm-section-pad: 56px;
		--sm-section-pad-lg: 72px;
		--sm-head-gap: 40px;
	}

	.whatsapp-float {
		right: 16px;
		bottom: 16px;
		padding: 10px 15px;
		font-size: 0.9rem;
		transition: none;
	}

	.whatsapp-float__icon {
		width: 22px;
		height: 22px;
		flex-basis: 22px;
	}

	.whatsapp-float:hover {
		transform: translateY(0);
	}
}


/* =========================================================================
   3. HEADER
   ========================================================================= */

.sm-header {
	/*
	 * Space between the bottom of a top-level link and the bottom of the bar:
	 * (logo 64px + bar padding 32px - link height ~38px) / 2. On desktop each
	 * top-level item is stretched by this amount, so the pointer never crosses
	 * a dead zone between the link and its dropdown. Update it if the logo
	 * height or bar padding changes.
	 */
	--sm-bar-gap: 29px;

	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(var(--sm-ink-rgb), 0.94);
	border-bottom: 1px solid var(--sm-line-gold);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.sm-header .sm-bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
}

.sm-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.sm-logo img {
	display: block;
	width: auto;
	height: 64px;
}

.sm-mobile-menu-header {
	display: none;
}

.sm-nav {
	display: flex;
	align-items: center;
}

.sm-nav > ul {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-nav li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Desktop: each top-level item fills the bar height (see --sm-bar-gap) */
@media (min-width: 992px) {
	.sm-nav > ul > li {
		padding: var(--sm-bar-gap) 0;
		margin: calc(var(--sm-bar-gap) * -1) 0;
	}
}

.sm-nav a {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 8px 0;
	color: var(--sm-bone);
	font-family: var(--sm-font-body);
	font-size: 0.94rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: color 0.2s ease;
}

/* Gold underline that grows in under the top-level links */
.sm-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: calc(var(--sm-bar-gap) * -1);
	width: 0;
	height: 2px;
	background: var(--sm-gold);
	transition: width 0.2s ease;
}

.sm-nav > ul > li:hover > a::after,
.sm-nav > ul > li.current-menu-item > a::after,
.sm-nav > ul > li.current-menu-ancestor > a::after,
.sm-nav > ul > li.current-menu-parent > a::after {
	width: 100%;
}

.sm-nav > ul > li.menu-item-has-children > a {
	gap: 9px;
}

.sm-nav > ul > li.menu-item-has-children > a::before {
	content: "";
	width: 6px;
	height: 6px;
	flex: 0 0 6px;
	margin-top: -2px;
	order: 2;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.sm-nav > ul > li.menu-item-has-children:hover > a::before,
.sm-nav > ul > li.menu-item-has-children:focus-within > a::before {
	transform: rotate(225deg);
}

.sm-nav .dropdown-menu-toggle {
	display: none !important;
}

/* Dropdown: starts at the bottom of its (stretched) parent item */
.sm-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -18px;
	display: block;
	width: max-content;
	min-width: 210px;
	margin: 0;
	padding: 9px 0;
	list-style: none;
	background: var(--sm-charcoal);
	border: 1px solid var(--sm-line-gold);
	box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition:
		opacity 0.18s ease,
		transform 0.18s ease,
		visibility 0.18s ease;
	z-index: 1000;
}

.sm-nav li:hover > .sub-menu,
.sm-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sm-nav .sub-menu li {
	display: block;
	width: 100%;
}

.sm-nav .sub-menu a {
	display: flex;
	align-items: center;
	width: 100%;
	min-width: 210px;
	padding: 10px 18px;
	color: var(--sm-bone-dim);
	font-size: 0.88rem;
	font-weight: 500;
	white-space: nowrap;
	transition:
		color 0.18s ease,
		background 0.18s ease;
}

.sm-nav .sub-menu a::after {
	display: none;
}

.sm-nav .sub-menu a:hover,
.sm-nav .sub-menu a:focus-visible {
	color: var(--sm-bone);
	background: rgba(var(--sm-gold-rgb), 0.08);
}

.sm-nav .sub-menu .sub-menu {
	top: -10px;
	left: calc(100% + 1px);
}

.sm-burger {
	display: none;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sm-bone);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

.sm-burger svg {
	width: 28px;
	height: 28px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: square;
}

.sm-burger:hover {
	color: var(--sm-gold);
	background: transparent;
}

.sm-search-form {
	position: relative;
	display: flex;
	align-items: center;
	width: 280px;
}

/* The input's own outline is off, so the whole form shows the focus ring */
.sm-search-form:focus-within {
	outline: 2px solid var(--sm-gold);
	outline-offset: 2px;
}

.sm-search-form input {
	width: 100%;
	height: 41px;
	padding: 0 42px 0 13px;
	border: 0;
	border-radius: 0;
	background: var(--sm-charcoal);
	color: var(--sm-bone);
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-sm);
	outline: none;
}

.sm-search-form input::placeholder {
	color: var(--sm-bone-dim);
}

.sm-search-form input:focus {
	background: rgba(var(--sm-charcoal-rgb), 0.6);
	border: none;
	color: var(--sm-bone);
}

.sm-search-form input:focus ~ button {
	color: var(--sm-gold);
}

.sm-search-form button {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 41px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sm-bone-dim);
	cursor: pointer;
}

.sm-search-form button:hover {
	color: var(--sm-bone);
}

.sm-search-form svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
}

.sm-header-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

@media (max-width: 1199px) {

	/* The form is only the icon; it never changes size */
	.sm-search-form {
		width: 40px;
		height: 38px;
	}

	/* No ring around the bare icon (desktop rule); the dropdown input gets its own */
	.sm-search-form:focus-within {
		outline: none;
	}

	/* Input becomes a dropdown panel */
	.sm-search-form input {
		position: absolute;
		top: calc(100% + 10px);
		right: 0;
		z-index: 100;
		width: min(320px, calc(100vw - 32px));
		height: 44px;
		padding: 0 14px;
		background: var(--sm-charcoal);
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
		opacity: 0;
		visibility: hidden; /* removes it from tab order while closed */
		transform: translateY(-6px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	}

	.sm-search-form.is-open input {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
		top: calc(100% + 18px);
	}

	/* Keep the dropdown opaque and give it the gold focus ring */
	.sm-search-form input:focus {
		background: var(--sm-charcoal);
		outline: 2px solid var(--sm-gold);
		outline-offset: 2px;
	}

	/* Icon stays visible and highlights while open */
	.sm-search-form button {
		color: var(--sm-bone);
	}

	.sm-search-form.is-open button {
		color: var(--sm-gold);
	}
}

@media (max-width: 991px) {

	.sm-header-actions {
		gap: 8px;
	}

	.sm-header .sm-bar {
		padding: 12px 0;
	}

	.sm-logo img {
		height: 48px;
	}

	.sm-mobile-menu-header {
		display: flex;
		align-items: center;
		padding-bottom: 16px;
		margin-bottom: 10px;
		border-bottom: 1px solid var(--sm-line-gold);
	}

	.sm-mobile-menu-header span {
		color: var(--sm-gold);
		font-family: var(--sm-font-display);
		font-size: 1.25rem;
		font-weight: 400;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.sm-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: auto;
		z-index: 100;
		display: block;
		width: min(320px, 85vw);
		height: 100vh; /* fallback */
		height: 100dvh;
		padding: 90px 24px 30px;
		background: var(--sm-ink);
		border-right: 1px solid var(--sm-line-gold);
		border-bottom: 0;
		box-shadow: 14px 0 30px rgba(0, 0, 0, 0.28);
		overflow-y: auto;
		transform: translateX(-100%);
		visibility: hidden;
		transition:
			transform 0.3s ease,
			visibility 0.3s ease;
	}

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

	.sm-nav > ul {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 0;
	}

	.sm-nav > ul > li {
		width: 100%;
		border-bottom: 1px solid rgba(var(--sm-bone-rgb), 0.08);
	}

	.sm-nav > ul > li:last-child {
		border-bottom: 0;
	}

	.sm-nav > ul > li > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 14px 0;
		font-size: 0.95rem;
	}

	.sm-nav > ul > li > a::after {
		display: none;
	}

	.sm-nav > ul > li.menu-item-has-children > a {
		gap: 12px;
	}

	.sm-nav > ul > li.menu-item-has-children > a::before {
		border-color: var(--sm-gold);
	}

	/* On touch, :hover sticks; the chevron follows .is-open instead */
	.sm-nav > ul > li.menu-item-has-children:hover > a::before,
	.sm-nav > ul > li.menu-item-has-children:focus-within > a::before {
		transform: rotate(45deg);
	}

	.sm-nav > ul > li.menu-item-has-children.is-open > a::before {
		transform: rotate(225deg);
	}

	/*
	 * Submenus become an accordion: hidden until .is-open (set by productra.js).
	 * visibility is inherited from .sm-nav, so a closed slide-in menu cannot be
	 * reached with the keyboard.
	 */
	.sm-nav .sub-menu {
		position: static;
		display: none;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0 0 10px;
		background: transparent;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: inherit;
		transform: none;
		transition: none;
	}

	.sm-nav .menu-item-has-children.is-open > .sub-menu {
		display: block;
	}

	.sm-nav .sub-menu .sub-menu {
		padding-left: 18px;
	}

	/* Only what differs from the desktop submenu link */
	.sm-nav .sub-menu a {
		min-width: 0;
		padding: 9px 0 9px 18px;
	}

	.sm-nav .sub-menu a:hover,
	.sm-nav .sub-menu a:focus-visible {
		background: transparent;
	}

	.sm-burger {
		display: inline-flex;
		order: 2;
	}

	.sm-header-actions .sm-btn {
		display: none;
	}
}

@media (max-width: 575px) {

	/* On small phones the open search field spans the screen under the header */
	.sm-search-form.is-open input {
		position: fixed;
		top: calc(100% + 1px);
		left: 5%;
		right: 5%;
		width: auto;
	}

}


/* ---- 3a. Mega menu ---------------------------------------------------------

   Built in Appearance > Menus. No walker or plugin is needed.
   (Turn on "CSS Classes" under Screen Options at the top of that page.)

   STRUCTURE (three levels, so header.php must use 'depth' => 3):

     Shop                    <- top level, CSS class: sm-mega
       Clothing              <- level 2 = column heading
         T-shirts            <- level 3 = links in that column
         Hoodies
         View all            <- optional class: sm-mega-viewall
       Accessories
         Caps
         Bags

   CLASSES
   On the top-level item:
     sm-mega            turns its dropdown into a full-width panel (4 columns)
     sm-mega-2 / -3 / -5  optional, add next to sm-mega to change the column count
   On a level-2 item:
     sm-mega-nolink     heading that cannot be clicked (use "#" as its link)
     sm-mega-feature    column shown as a highlighted card
   On a level-3 item:
     sm-mega-viewall    gold "View all" style link with an arrow

   A level-2 item that has no level-3 items under it shows as a normal link.

   Desktop rules use min-width: 992px, which is the other side of the 991px
   breakpoint, so no new width is introduced. On tablets and phones the mega
   menu is a plain accordion inside the slide-in menu.
   ------------------------------------------------------------------------- */

.sm-nav .sm-mega-nolink > a {
	pointer-events: none;
	cursor: default;
}

/* Column heading (level 2 with children): same look on every screen size */
.sm-nav .sm-mega > .sub-menu > li.menu-item-has-children > a {
	color: var(--sm-gold);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/*
 * "View all" links: the mega menu's optional level-3 link, and the "All
 * {category}" link added by productra.js (phones and tablets only).
 */
.sm-nav .sm-menu-viewall {
	display: none !important;
}

.sm-nav .sm-mega .sm-mega-viewall > a,
.sm-nav .sub-menu .sm-menu-viewall > a {
	color: var(--sm-gold);
	font-weight: 600;
}

.sm-nav .sm-mega .sm-mega-viewall > a::after,
.sm-nav .sub-menu .sm-menu-viewall > a::after {
	content: "\2192";
	display: inline-block;
	margin-left: 8px;
	transition: transform 0.18s ease;
}

.sm-nav .sm-mega .sm-mega-viewall > a:hover::after,
.sm-nav .sub-menu .sm-menu-viewall > a:hover::after {
	transform: translateX(4px);
}

@media (min-width: 992px) {

	/*
	 * The panel is positioned against .sm-bar (the container), not the menu
	 * item. Its top is the base `top: 100%`, which meets the bottom of the
	 * stretched top-level item, so there is no gap to bridge.
	 */
	.sm-nav > ul > li.sm-mega {
		--sm-mega-cols: 4;
		position: static;
	}

	.sm-nav > ul > li.sm-mega-2 { --sm-mega-cols: 2; }
	.sm-nav > ul > li.sm-mega-3 { --sm-mega-cols: 3; }
	.sm-nav > ul > li.sm-mega-5 { --sm-mega-cols: 5; }

	.sm-nav > ul > li.sm-mega > .sub-menu {
		left: 0;
		right: 0;
		display: grid;
		grid-template-columns: repeat(var(--sm-mega-cols), minmax(0, 1fr));
		align-items: start;
		gap: 28px 36px;
		width: auto;
		min-width: 0;
		max-height: calc(100vh - 140px);
		padding: 32px 36px 28px;
		overflow-y: auto;
		/* A closed panel must never catch the pointer (it sits over the hero) */
		pointer-events: none;
	}

	.sm-nav > ul > li.sm-mega:hover > .sub-menu,
	.sm-nav > ul > li.sm-mega:focus-within > .sub-menu {
		pointer-events: auto;
	}

	.sm-nav .sm-mega > .sub-menu > li {
		min-width: 0;
	}

	/* Level 2 with children: column heading (desktop extras) */
	.sm-nav .sm-mega > .sub-menu > li.menu-item-has-children > a {
		min-width: 0;
		margin-bottom: 8px;
		padding: 0 0 12px;
		border-bottom: 1px solid var(--sm-line-gold);
		white-space: normal;
	}

	.sm-nav .sm-mega > .sub-menu > li.menu-item-has-children > a:hover,
	.sm-nav .sm-mega > .sub-menu > li.menu-item-has-children > a:focus-visible {
		background: transparent;
		color: var(--sm-bone);
	}

	/* Level 2 without children: an ordinary link inside the panel */
	.sm-nav .sm-mega > .sub-menu > li:not(.menu-item-has-children) > a {
		min-width: 0;
		white-space: normal;
	}

	/*
	 * Level 3: always shown inside its column, never a flyout. Visibility is
	 * inherited from the panel, so a closed panel hides its columns too.
	 * (`visible` here left the closed columns hoverable over the hero and
	 * opened the whole menu.)
	 */
	.sm-nav .sm-mega .sub-menu .sub-menu {
		position: static;
		display: block;
		width: auto;
		min-width: 0;
		padding: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: inherit;
		transform: none;
		transition: none;
	}

	.sm-nav .sm-mega .sub-menu .sub-menu a {
		min-width: 0;
		padding: 7px 0;
		font-size: 0.88rem;
		white-space: normal;
	}

	.sm-nav .sm-mega .sub-menu .sub-menu a:hover,
	.sm-nav .sm-mega .sub-menu .sub-menu a:focus-visible {
		background: transparent;
		color: var(--sm-gold);
	}

	/* Optional: highlighted column */
	.sm-nav .sm-mega > .sub-menu > li.sm-mega-feature {
		padding: 20px;
		background: rgba(var(--sm-gold-rgb), 0.06);
		border: 1px solid var(--sm-line-gold);
	}
}

/* Tablets and phones: the mega menu is an accordion in the slide-in menu */
@media (max-width: 991px) {
	/* Level 3 is shown as soon as the top-level item is opened */
	.sm-nav .sm-mega .sub-menu .sub-menu {
		display: block;
		padding: 0 0 6px 18px;
	}

	.sm-nav .sm-mega > .sub-menu > li.menu-item-has-children > a {
		padding-top: 14px;
	}

	.sm-nav .sm-menu-viewall {
		display: block !important;
	}
}


/* =========================================================================
   4. FOOTER
   ========================================================================= */

.sm-footer {
	background: var(--sm-black);
	border-top: 1px solid var(--sm-line-gold);
	padding: 56px 0 26px;
}

.sm-footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 34px;
}

.sm-footer-socials {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
}

.sm-footer-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(var(--sm-bone-rgb), 0.18);
	color: var(--sm-bone-dim);
	transition:
		color 0.18s ease,
		border-color 0.18s ease,
		background 0.18s ease;
}

.sm-footer-socials a:hover {
	color: var(--sm-gold);
	border-color: var(--sm-gold);
	background: rgba(var(--sm-gold-rgb), 0.06);
}

.sm-footer-socials svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Icons 2 to 4 are solid glyphs rather than outlines (depends on icon order) */
.sm-footer-socials a:nth-child(n + 2) svg {
	fill: currentColor;
	stroke: none;
}

.sm-footer .sm-footer-title {
	margin: 0 0 16px;
	color: var(--sm-gold);
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-sm);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.03em;
}

.sm-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-footer li {
	margin-bottom: 10px;
}

.sm-footer a {
	color: var(--sm-bone-dim);
	font-size: var(--sm-text-base);
}

.sm-footer a:hover {
	color: var(--sm-bone);
}

.sm-footer-bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 46px;
	padding-top: 22px;
	border-top: 1px solid rgba(var(--sm-bone-rgb), 0.08);
	color: var(--sm-bone-dim);
	font-size: 0.8rem;
}

@media (max-width: 991px) {
	.sm-footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 575px) {
	.sm-footer-grid {
		grid-template-columns: 1fr;
	}
}


/* =========================================================================
   5. FRONT PAGE
   ========================================================================= */


/* ---- 5a. Hero ---- */

.sm-hero-slider {
	--hero-gold: var(--sm-gold);
	--hero-gold-light: var(--sm-gold-light);
	--hero-yellow: var(--sm-yellow);
	--hero-bone: var(--sm-bone);
	--hero-ink: var(--sm-ink);

	position: relative;
	height: 100vh; /* fallback */
	height: 100dvh;
	min-height: 600px;
	max-height: 900px;
	background: var(--hero-ink);
	color: var(--hero-bone);
	overflow: hidden;
}

.sm-hero-slider .owl-carousel,
.sm-hero-slider .owl-stage-outer,
.sm-hero-slider .owl-stage,
.sm-hero-slider .owl-item {
	height: 100%;
}

/* Film grain */
.sm-hero-slider::after {
	content: "";
	position: absolute;
	inset: -50%;
	z-index: 5;
	pointer-events: none;
	opacity: 0.09;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	animation: sm-grain 1s steps(6) infinite;
}

@keyframes sm-grain {
	0% { transform: translate(0, 0); }
	20% { transform: translate(-3%, 2%); }
	40% { transform: translate(2%, -3%); }
	60% { transform: translate(-2%, -1%); }
	80% { transform: translate(3%, 3%); }
	100% { transform: translate(0, 0); }
}

.sm-slide {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
}

/* Faint vertical guide lines for a poster / blueprint feel */
.sm-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: repeating-linear-gradient(
		90deg,
		rgba(var(--sm-bone-rgb), 0.035) 0,
		rgba(var(--sm-bone-rgb), 0.035) 1px,
		transparent 1px,
		transparent 120px
	);
}

.sm-slide-bg {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at 75% 40%,
		var(--sm-gold-shadow) 0%,
		var(--sm-charcoal) 55%,
		var(--sm-black) 100%
	) center / cover no-repeat;
	transform: scale(1.02);
}

.sm-slide-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.85) 0%,
		rgba(0, 0, 0, 0.35) 60%,
		rgba(0, 0, 0, 0.6) 100%
	);
}

.owl-item.active .sm-slide-bg {
	animation: sm-kenburns 9s ease-out forwards;
}

@keyframes sm-kenburns {
	from { transform: scale(1.02); }
	to { transform: scale(1.14) translate(-1.5%, 1%); }
}

.sm-slide-ghost {
	right: -2vw;
	bottom: 6%;
	z-index: 1;
	font: 400 clamp(8rem, 26vw, 24rem) / 0.8 var(--sm-font-display);
	letter-spacing: 0.02em;
	-webkit-text-stroke: 2px rgba(var(--sm-bone-rgb), 0.14);
	opacity: 0;
	transform: translateX(8%);
	transition:
		opacity 1.2s ease 0.3s,
		transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s;
}

.owl-item.active .sm-slide-ghost {
	opacity: 1;
	transform: none;
}

/* Two columns: copy on the left, product stage on the right */
.sm-slide-inner {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 40px;
	padding-bottom: 60px;
}

.sm-slide-inner.has-product {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.sm-slide-tag {
	display: inline-block;
	position: relative;
	overflow: hidden;
	padding: 6px 12px;
	margin-bottom: 20px;
	border: 1px solid var(--hero-gold);
	color: var(--hero-gold);
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	clip-path: inset(0 100% 0 0);
}

.owl-item.active .sm-slide-tag {
	animation: sm-wipe 0.7s ease 0.25s forwards;
}

@keyframes sm-wipe {
	to { clip-path: inset(0 0 0 0); }
}

/*
 * The first slide is an <h1> and the others are <h2>. The .productra prefix
 * makes this beat `.productra h1` / `.productra h2` so every slide title
 * renders identically whichever tag it uses.
 */
.productra .sm-slide-title {
	margin: 0 0 0.4em;
	color: var(--hero-bone);
	font-size: clamp(2.4rem, 6vw, 3.6rem);
	line-height: 1.05;
	letter-spacing: 0.01em;
}

.sm-line {
	display: block;
	overflow: hidden;
	padding-bottom: 0.06em;
}

.sm-line > span {
	display: block;
	transform: translateY(110%);
}

/* Second line: champagne-to-antique gold gradient text (colour is the fallback) */
.sm-line:nth-child(2) > span {
	color: var(--hero-gold-light);
	background: var(--sm-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.owl-item.active .sm-line > span {
	animation: sm-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
	animation-delay: calc(0.35s + var(--d) * 0.14s);
}

@keyframes sm-rise {
	to { transform: none; }
}

/*
 * The glitch runs on the title itself, not on the line spans, so it never
 * replaces the spans' entrance animation (which would replay on mouse-out).
 */
.sm-slide-title:hover {
	animation: sm-glitch 0.35s steps(2) 2;
}

/* Deliberate off-palette red/cyan: the glitch effect is meant to clash with the brand colours */
@keyframes sm-glitch {
	0% { text-shadow: 3px 0 #ff2d55, -3px 0 #27e0ff; transform: translateX(-2px); }
	50% { text-shadow: -3px 0 #ff2d55, 3px 0 #27e0ff; transform: translateX(2px); }
	100% { text-shadow: none; transform: none; }
}

.sm-slide-copy {
	max-width: 42ch;
	margin: 0 0 28px;
	color: rgba(var(--sm-bone-rgb), 0.8);
	font-size: 1.1rem;
	line-height: 1.6;
	opacity: 0;
	transform: translateY(16px);
}

.sm-slide-cta {
	opacity: 0;
	transform: translateY(16px);
}

.owl-item.active .sm-slide-copy {
	animation: sm-reveal 0.7s ease 0.9s forwards;
}

.owl-item.active .sm-slide-cta {
	animation: sm-reveal 0.7s ease 1.05s forwards;
}

/* Shared: fade and slide into place. Used by the copy, CTA, chip, glow and product image. */
@keyframes sm-reveal {
	to { opacity: 1; transform: none; }
}


/* ---- Product stage (right column) ---- */

.sm-slide-product {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-self: center;
	width: 100%;
	max-width: 560px;
	aspect-ratio: 1 / 1.05;
}

.sm-slide-product:focus-visible {
	outline: 2px solid var(--hero-gold);
	outline-offset: 6px;
}

/* Corner brackets framing the stage */
.sm-slide-product::before,
.sm-slide-product::after {
	content: "";
	position: absolute;
	width: 38px;
	height: 38px;
	border: 2px solid var(--hero-gold);
	opacity: 0.7;
	pointer-events: none;
}

.sm-slide-product::before {
	top: 0;
	left: 0;
	border-right: 0;
	border-bottom: 0;
}

.sm-slide-product::after {
	right: 0;
	bottom: 0;
	border-left: 0;
	border-top: 0;
}

/* Soft gold spotlight behind the piece */
.sm-product-glow {
	position: absolute;
	inset: 6%;
	border-radius: 50%;
	background: radial-gradient(
		circle at 50% 45%,
		rgba(var(--sm-gold-rgb), 0.38) 0%,
		rgba(var(--sm-gold-rgb), 0.1) 52%,
		transparent 70%
	);
	opacity: 0;
	transform: scale(0.6);
	transition: filter 0.4s ease;
}

.sm-slide-product:hover .sm-product-glow {
	filter: brightness(1.35);
}

/* Slowly rotating dashed ring with a diamond marker */
.sm-product-ring {
	position: absolute;
	inset: 4%;
	border: 1px dashed rgba(var(--sm-gold-rgb), 0.5);
	border-radius: 50%;
	opacity: 0;
}

.sm-product-ring::after {
	content: "";
	position: absolute;
	top: -5px;
	left: 50%;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	background: var(--hero-gold);
	transform: rotate(45deg);
}

.sm-product-img {
	position: relative;
	z-index: 2;
	width: 90%;
	height: 90%;
	object-fit: contain;
	filter: drop-shadow(0 30px 36px rgba(0, 0, 0, 0.6));
	opacity: 0;
	transform: translateX(14%) scale(0.9) rotate(4deg);
	transition: filter 0.4s ease;
}

.sm-slide-product:hover .sm-product-img {
	filter: drop-shadow(0 34px 44px rgba(0, 0, 0, 0.7));
}

.sm-product-chip {
	position: absolute;
	left: -4%;
	bottom: 8%;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 170px;
	padding: 12px 18px 12px 16px;
	background: rgba(var(--sm-ink-rgb), 0.86);
	border-left: 3px solid var(--hero-gold);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transform: translateY(16px);
}

.sm-product-chip small {
	color: var(--hero-gold);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sm-product-chip b {
	color: var(--hero-bone);
	font-family: var(--sm-font-body);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Price on the chip: champagne, the readable accent on dark */
.sm-product-chip i {
	color: var(--hero-gold-light);
	font-family: var(--sm-font-display);
	font-size: 1.1rem;
	font-style: normal;
	letter-spacing: 0.04em;
}

/* Entrance, then a gentle idle float; all triggered by Owl's .active */
.owl-item.active .sm-product-glow {
	animation: sm-reveal 1s ease 0.3s forwards;
}

.owl-item.active .sm-product-ring {
	animation:
		sm-ring-in 0.8s ease 0.4s forwards,
		sm-spin 40s linear 1.2s infinite;
}

.owl-item.active .sm-product-img {
	animation:
		sm-reveal 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards,
		sm-float 6s ease-in-out 1.4s infinite;
}

.owl-item.active .sm-product-chip {
	animation: sm-reveal 0.7s ease 1.2s forwards;
}

@keyframes sm-ring-in {
	to { opacity: 1; }
}

/* Shared: also used by the 404 page */
@keyframes sm-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes sm-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-14px); }
}


/* ---- Slider furniture ---- */

.sm-fadeIn {
	animation: sm-in 0.9s ease both;
}

.sm-fadeOut {
	animation: sm-out 0.9s ease both;
}

@keyframes sm-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes sm-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

/* Counter and arrows line up with .sm-container content via --sm-gutter */
.sm-hero-ui {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 64px;
	z-index: 6;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 0 var(--sm-gutter);
	pointer-events: none;
}

.sm-hero-count {
	display: flex;
	align-items: center;
	gap: 10px;
	font: 400 1rem var(--sm-font-display);
	letter-spacing: 0.1em;
}

/* The one place bright yellow is kept: the live slide number */
.sm-hero-count b {
	color: var(--hero-yellow);
	font-weight: 400;
}

.sm-hero-count i {
	width: 28px;
	height: 1px;
	background: rgba(var(--sm-bone-rgb), 0.4);
}

.sm-hero-count span {
	opacity: 0.5;
}

.sm-hero-progress {
	flex: 0 0 140px;
	height: 2px;
	background: rgba(var(--sm-bone-rgb), 0.2);
	overflow: hidden;
}

.sm-hero-progress span {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--hero-gold-light);
	transform: scaleX(0);
	transform-origin: left;
}

.sm-hero-progress span.run {
	animation: sm-progress var(--dur, 6s) linear forwards;
}

/* Set by productra.js while autoplay is paused (hover, focus or the pause button) */
.sm-hero-progress.is-paused span {
	animation-play-state: paused;
}

@keyframes sm-progress {
	to { transform: scaleX(1); }
}

.sm-owl-hero .owl-nav {
	position: absolute;
	right: var(--sm-gutter);
	bottom: 58px;
	z-index: 6;
	display: flex;
	gap: 8px;
	margin: 0;
}

.sm-owl-hero .owl-nav button {
	width: 48px;
	height: 48px;
	margin: 0 !important;
	border: 1px solid rgba(var(--sm-bone-rgb), 0.4) !important;
	border-radius: 0;
	background: rgba(0, 0, 0, 0.35) !important;
	color: var(--hero-bone) !important;
	font-size: 1.4rem !important;
	line-height: 1;
	transition:
		background 0.25s,
		color 0.25s,
		border-color 0.25s;
}

.sm-owl-hero .owl-nav button:hover {
	background: var(--hero-gold) !important;
	color: var(--sm-ink) !important;
	border-color: var(--hero-gold) !important;
}

.sm-owl-hero .owl-nav button:focus-visible {
	outline: 2px solid var(--hero-gold-light);
	outline-offset: 2px;
}

/*
 * Pause / play button added by productra.js (WCAG 2.2.2). It sits to the left
 * of the arrows and has the same square outline look; on phones, where the
 * arrows are hidden, it moves to the right edge.
 */
.sm-hero-toggle {
	position: absolute;
	right: calc(var(--sm-gutter) + 112px);
	bottom: 58px;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(var(--sm-bone-rgb), 0.4);
	border-radius: 0;
	background: rgba(0, 0, 0, 0.35);
	color: var(--hero-bone);
	font-size: 0.9rem;
	line-height: 1;
	cursor: pointer;
	transition:
		background 0.25s,
		color 0.25s,
		border-color 0.25s;
}

.sm-hero-toggle:hover {
	background: var(--hero-gold);
	border-color: var(--hero-gold);
	color: var(--sm-ink);
}

.sm-hero-toggle:focus-visible {
	outline: 2px solid var(--hero-gold-light);
	outline-offset: 2px;
}

.sm-owl-hero .owl-dots {
	display: none;
}

.sm-ticker {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	padding: 10px 0;
	background: var(--sm-gold-grad);
	color: var(--sm-ink);
	overflow: hidden;
}

.sm-ticker-track {
	display: inline-flex;
	align-items: center;
	gap: 28px;
	white-space: nowrap;
	animation: sm-marquee 28s linear infinite;
}

.sm-ticker-track span:not(.sm-ticker-dot) {
	font: 400 1rem var(--sm-font-display);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sm-ticker-dot {
	width: 8px;
	height: 8px;
	flex: none;
	background: var(--sm-ink);
	transform: rotate(45deg);
}

@keyframes sm-marquee {
	to { transform: translateX(-50%); }
}


/* ---- Responsive ---- */

@media (max-width: 991px) {
	.sm-slide-inner {
		gap: 24px;
	}

	.sm-slide-product {
		max-width: 420px;
	}

	.sm-product-chip {
		left: 0;
		min-width: 150px;
	}
}

/* Phones: product stacks above the copy, smaller, without the chip clutter */
@media (max-width: 767px) {
	.sm-hero-slider {
		min-height: 700px;
		max-height: none;
	}

	/* Saves battery: the grain layer animates forever */
	.sm-hero-slider::after {
		display: none;
	}

	.sm-owl-hero .owl-nav {
		display: none;
	}

	.sm-hero-toggle {
		right: var(--sm-gutter);
	}

	.sm-hero-progress {
		flex-basis: 90px;
	}

	.sm-slide-ghost {
		bottom: 18%;
	}

	.sm-slide-inner,
	.sm-slide-inner.has-product {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		padding-top: 16px;
		padding-bottom: 130px;
	}

	.sm-slide-product {
		order: -1;
		max-width: 250px;
		aspect-ratio: 1 / 0.9;
	}

	.sm-slide-copy {
		margin-bottom: 20px;
		font-size: 1rem;
	}
}

@media (max-width: 575px) {
	.sm-product-chip {
		display: none;
	}

	.sm-slide-product {
		max-width: 220px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sm-hero-slider *,
	.sm-hero-slider::after {
		animation: none !important;
		transition: none !important;
	}

	.sm-slide-copy,
	.sm-slide-cta,
	.sm-slide-ghost,
	.sm-product-glow,
	.sm-product-ring,
	.sm-product-img,
	.sm-product-chip {
		opacity: 1;
		transform: none;
	}

	.sm-slide-tag {
		clip-path: none;
	}

	.sm-line > span {
		transform: none;
	}
}


/* ---- 5b. Trust strip ---- */

.sm-trust {
	background: var(--sm-ink);
	color: var(--sm-bone);
	padding: 44px 0;
}

.sm-trust-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

.sm-trust-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.sm-trust-item svg {
	flex: none;
	margin-top: 2px;
	stroke: var(--sm-gold);
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Paragraphs, not headings: the strip sits before the page's first <h2> */
.sm-trust-item .sm-trust-title {
	margin: 0 0 4px;
	color: var(--sm-bone);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

.sm-trust-item .sm-trust-copy {
	margin: 0;
	color: var(--sm-bone-dim);
	font-size: var(--sm-text-sm);
	line-height: 1.5;
}

@media (max-width: 991px) {
	.sm-trust-row {
		grid-template-columns: 1fr 1fr;
		row-gap: 28px;
	}
}

@media (max-width: 575px) {
	.sm-trust-row {
		grid-template-columns: 1fr;
	}
}


/* ---- 5c. Product grid and card (shared by new arrivals and archive pages, see section 6) ---- */

.sm-product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px 22px;
}

.sm-product-card {
	display: block;
}

.sm-product-card .sm-thumb {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--sm-charcoal);
	border: 1px solid transparent;
	transition: border-color 0.18s ease;
}

.sm-product-card:hover .sm-thumb {
	border-color: var(--sm-gold);
}

.sm-product-card .sm-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Card image slider: a strip of images moved by the dots */
.sm-product-card .sm-card-link {
	display: block;
	height: 100%;
}

.sm-product-card .sm-card-track {
	display: flex;
	height: 100%;
	transition: transform 0.35s ease;
}

.sm-product-card .sm-card-track img {
	flex: 0 0 100%;
	min-width: 0;
}

/* The meta block is a link: keep the old text colours */
.sm-product-card .sm-meta {
	display: block;
	padding-top: 12px;
	color: inherit;
}

.sm-card-dots {
	position: absolute;
	left: 50%;
	bottom: 10px;
	z-index: 2;
	display: flex;
	gap: 2px;
	padding: 2px 4px;
	transform: translateX(-50%);
	background: rgba(var(--sm-ink-rgb), 0.55);
	border-radius: 999px;

	/* Hidden until the card is hovered or focused */
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.sm-product-card:hover .sm-card-dots,
.sm-product-card:focus-within .sm-card-dots {
	opacity: 1;
	pointer-events: auto;
}

/* Touch screens have no hover, so the dots stay visible there */
@media (hover: none) {
	.sm-card-dots {
		opacity: 1;
		pointer-events: auto;
	}
}

/* Small dot, bigger tap area */
.sm-card-dots button {
	position: relative;
	width: 14px;
	height: 14px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.sm-card-dots button::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	border-radius: 50%;
	background: rgba(var(--sm-bone-rgb), 0.5);
	transition: background 0.18s ease, transform 0.18s ease;
}

.sm-card-dots button.is-active::before {
	background: var(--sm-gold-light);
	transform: scale(1.3);
}

.sm-card-dots button:focus-visible {
	outline: 2px solid var(--sm-gold);
	outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
	.sm-product-card .sm-card-track {
		transition: none;
	}
}

/* Default badge ("New" and any badge without its own rule): gold gradient */
.sm-tag {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 5px 9px 4px;
	background: var(--sm-gold-grad);
	color: var(--sm-ink);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.sm-tag.sm-tag-out {
	background: var(--sm-rust) !important;
	color: var(--sm-bone) !important;
}

/* Badge colours. Plain .sm-tag (gold gradient) is used for "New" and any badge without a rule. */
.sm-tag.sm-tag-limited {
	background: var(--sm-bone) !important;
	color: var(--sm-ink) !important;
}

.sm-tag.sm-tag-bestseller {
	background: var(--sm-gold) !important;
	color: var(--sm-ink) !important;
}

.sm-product-card .sm-cat {
	color: var(--sm-bone-dim);
	font-size: 0.74rem;
	letter-spacing: 0.02em;
}

.sm-product-card h3 {
	margin: 3px 0 4px;
	font-family: var(--sm-font-body);
	font-size: 1.05rem;
	font-weight: 600;
}

.sm-product-card .sm-price {
	color: var(--sm-gold-light);
	font-size: 0.95rem;
	font-weight: 600;
}

/* Product cards on a light section (Featured): darker text for contrast on bone */
.sm-section.sm-light .sm-product-card .sm-cat {
	color: var(--sm-ink-muted);
}

.sm-section.sm-light .sm-product-card .sm-price {
	color: var(--sm-gold-text);
}

@media (max-width: 991px) {
	.sm-product-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.sm-product-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px 14px;
	}
}


/* ---- 5d. New arrivals carousel (reuses the .sm-product-card styles above) ---- */

.sm-arrivals-tools {
	display: flex;
	align-items: center;
	gap: 14px;
}

.sm-arrivals-nav {
	display: flex;
	gap: 8px;
}

/* Owl adds .disabled when every card already fits on screen */
.sm-arrivals-nav.disabled {
	display: none;
}

.sm-arrivals-nav button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(var(--sm-bone-rgb), 0.35);
	border-radius: 0;
	background: transparent;
	color: var(--sm-bone);
	cursor: pointer;
	transition:
		background 0.18s ease,
		color 0.18s ease,
		border-color 0.18s ease,
		opacity 0.18s ease;
}

.sm-arrivals-nav button:hover:not(.disabled) {
	background: var(--sm-gold);
	border-color: var(--sm-gold);
	color: var(--sm-ink);
}

.sm-arrivals-nav button.disabled {
	opacity: 0.3;
	cursor: default;
}

.sm-arrivals-nav svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: square;
}

/* Arrows on a light section (Featured): ink instead of bone */
.sm-section.sm-light .sm-arrivals-nav button {
	border-color: rgba(var(--sm-ink-rgb), 0.35);
	color: var(--sm-ink);
}

.sm-section.sm-light .sm-arrivals-nav button:hover:not(.disabled) {
	background: var(--sm-gold);
	border-color: var(--sm-gold);
	color: var(--sm-ink);
}

.sm-section.sm-light .sm-arrivals-nav button:focus-visible {
	outline-color: var(--sm-gold-deep);
}

/* Swiping is enough on small phones, so the arrows are hidden there */
@media (max-width: 575px) {
	.sm-arrivals-nav {
		display: none;
	}
}


/* ---- 5e. Collections strip ---- */

.sm-collection-card {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--sm-charcoal);
	border: 1px solid rgba(var(--sm-gold-rgb), 0.2);
}

.sm-collection-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.sm-collection-card:hover img {
	transform: scale(1.06);
}

.sm-collection-card .sm-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 18px;
	background: linear-gradient(
		0deg,
		rgba(var(--sm-ink-rgb), 0.92),
		transparent
	);
}

.sm-collection-card .sm-cap h3 {
	margin: 0;
}

/* Same treatment as the category tiles' piece count */
.sm-collection-card .sm-cap span {
	display: block;
	color: var(--sm-bone-dim);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
}

/* Grid of collection cards on /collections/ (cards are the ones above) */
.sm-collection-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

@media (max-width: 1199px) {
	.sm-collection-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.sm-collection-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
}

@media (max-width: 575px) {
	.sm-collection-grid {
		gap: 10px;
	}
}


/* ---- 5f. Browse by category ---- */

.sm-cat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.sm-cat-tile {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	isolation: isolate;
	background: var(--sm-ink);
	border: 1px solid var(--sm-line-gold);
	transition:
		border-color 0.25s ease,
		box-shadow 0.25s ease;
}

.sm-cat-tile:hover {
	border-color: var(--sm-gold);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
}

/* Ring colour and width come from the shared focus rule in section 2 */
.sm-cat-tile:focus-visible {
	outline-offset: 3px;
}

/* Image (or icon fallback) */
.sm-cat-tile-media {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(
		ellipse at 50% 35%,
		var(--sm-gold-shadow) 0%,
		var(--sm-ink) 70%
	);
}

.sm-cat-tile-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.25) contrast(1.05);
	transition:
		transform 0.6s ease,
		filter 0.6s ease;
}

.sm-cat-tile:hover .sm-cat-tile-media img {
	transform: scale(1.08);
	filter: none;
}

/* Dark gradient so the text always reads, whatever the photo */
.sm-cat-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		0deg,
		rgba(var(--sm-ink-rgb), 0.94) 0%,
		rgba(var(--sm-ink-rgb), 0.35) 45%,
		transparent 75%
	);
}

/* Gold line that draws in along the bottom edge on hover */
.sm-cat-tile::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--sm-gold-grad);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s ease;
}

.sm-cat-tile:hover::after {
	transform: scaleX(1);
}

/* Text + arrow */
.sm-cat-tile-body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	padding: 20px;
}

.sm-cat-tile .sm-cat-tile-name {
	margin: 0;
	color: var(--sm-bone);
	font-size: 1.35rem;
	line-height: 1.05;
	text-transform: uppercase;
}

.sm-cat-tile-count {
	display: block;
	margin-top: 6px;
	color: var(--sm-bone-dim);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
}

.sm-cat-tile-arrow {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(var(--sm-bone-rgb), 0.4);
	border-radius: 50%;
	color: var(--sm-bone);
	transition:
		background 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease;
}

.sm-cat-tile:hover .sm-cat-tile-arrow {
	background: var(--sm-gold);
	border-color: var(--sm-gold);
	color: var(--sm-ink);
	transform: rotate(-45deg);
}

.sm-cat-tile-arrow svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 767px) {
	.sm-cat-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
}

@media (max-width: 575px) {
	.sm-cat-grid {
		gap: 10px;
	}

	.sm-cat-tile-body {
		padding: 14px;
	}

	.sm-cat-tile .sm-cat-tile-name {
		font-size: 1.05rem;
	}

	.sm-cat-tile-count {
		font-size: 0.72rem;
	}

	.sm-cat-tile-arrow {
		width: 32px;
		height: 32px;
	}

	.sm-cat-tile-arrow svg {
		width: 14px;
		height: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sm-cat-tile,
	.sm-cat-tile::after,
	.sm-cat-tile-media img,
	.sm-cat-tile-arrow {
		transition: none;
	}
}


/* ---- 5g. How it works (dark section: bone copy, bone dividers) ---- */

.sm-how-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

.sm-how-step {
	position: relative;
	padding: 0 28px;
	text-align: left;
}

.sm-how-step:not(:first-child) {
	border-left: 1px solid var(--sm-line-bone);
}

.sm-how-num {
	display: block;
	margin-bottom: 14px;
	color: var(--sm-gold);
	font: 400 2.6rem / 1 var(--sm-font-display);
	-webkit-text-stroke: 1px var(--sm-gold-deep);
}

.sm-how-step h3 {
	margin: 0 0 10px;
	font-size: 1.1rem;
	letter-spacing: 0.01em;
}

.sm-how-step p {
	max-width: 30ch;
	color: var(--sm-bone-dim);
	font-size: var(--sm-text-base);
	line-height: var(--sm-lh-copy);
}

@media (max-width: 991px) {
	.sm-how-steps {
		grid-template-columns: 1fr 1fr;
		row-gap: 36px;
	}

	.sm-how-step:nth-child(3) {
		border-left: 0;
	}
}

@media (max-width: 575px) {
	.sm-how-steps {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}

	/* Same selector as the base divider rule, so no !important is needed */
	.sm-how-step,
	.sm-how-step:not(:first-child) {
		padding: 0;
		border-left: 0;
	}
}


/* ---- 5h. About (front page) ---- */

.sm-about {
	position: relative;
	overflow: hidden;
}

.sm-about-ghost {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font: 400 clamp(6rem, 16vw, 14rem) / 1 var(--sm-font-display);
	letter-spacing: 0.04em;
	-webkit-text-stroke: 1.5px rgba(var(--sm-ink-rgb), 0.06);
	z-index: 0;
}

.sm-about-hero {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 64px;
	align-items: center;
}

/*
 * gold-deep, not gold, for any text on the bone background; the darker
 * gold-text reaches AA contrast for small text. Only meaningful on light
 * sections, so there is no base rule.
 */
.productra .sm-section.sm-light .sm-eyebrow-gold {
	color: var(--sm-gold-text);
}

.productra .sm-section.sm-light .sm-eyebrow-gold::before {
	background: var(--sm-gold-deep);
}

.sm-about-copy h2 {
	margin: 14px 0 18px;
	font: 400 clamp(2.2rem, 4.2vw, 3.4rem) / 1.05 var(--sm-font-display);
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.sm-about-copy h2 span {
	color: var(--sm-gold-deep);
}

.sm-about-copy p {
	max-width: 48ch;
	margin: 0 0 28px;
	color: var(--sm-ink-soft);
	font-size: 1.05rem;
	line-height: 1.7;
}

.sm-about-stats {
	display: flex;
	gap: 28px;
	margin-bottom: 32px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--sm-line-ink);
}

.sm-about-stats div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sm-about-stats b {
	color: var(--sm-gold-deep);
	font: 400 1.9rem / 1 var(--sm-font-display);
}

.sm-about-stats span {
	color: var(--sm-ink-muted);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sm-about-portrait {
	position: relative;
}

.sm-about-frame {
	position: relative;
	isolation: isolate;
}

.sm-about-frame::before {
	content: "";
	position: absolute;
	inset: 18px -18px -18px 18px;
	border: 2px solid var(--sm-gold);
	z-index: -1;
	transition: inset 0.4s ease;
}

.sm-about-frame:hover::before {
	inset: 12px -24px -24px 12px;
}

.sm-about-frame img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	filter: grayscale(0.15) contrast(1.05);
	transition:
		transform 0.6s ease,
		filter 0.6s ease;
}

.sm-about-frame:hover img {
	transform: scale(1.03);
	filter: grayscale(0) contrast(1.05);
}

.sm-about-badge {
	position: absolute;
	left: -14px;
	bottom: 34px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	background: var(--sm-ink);
	color: var(--sm-bone);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

.sm-about-badge i {
	width: 4px;
	height: 4px;
	flex: none;
	background: var(--sm-gold);
	border-radius: 50%;
}

@media (max-width: 991px) {
	.sm-about-hero {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.sm-about-frame::before {
		inset: 14px -14px -14px 14px;
	}

	.sm-about-badge {
		left: 14px;
	}

	.sm-about-stats {
		gap: 20px;
		flex-wrap: wrap;
	}
}


/* ---- 5i. Testimonials (alt section: bone cards on charcoal) ---- */

.sm-testimonial-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.sm-testimonial-card {
	padding: 32px 28px;
	background: var(--sm-bone);
	border: 1px solid var(--sm-line-ink);
}

.sm-testimonial-stars {
	display: flex;
	gap: 3px;
	margin-bottom: 16px;
}

.sm-testimonial-stars svg {
	fill: var(--sm-gold-deep);
}

.sm-testimonial-quote {
	margin: 0 0 24px;
	color: var(--sm-ink-soft);
	font-size: 1rem;
	line-height: 1.65;
}

.sm-testimonial-person {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sm-testimonial-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	background: var(--sm-ink);
	color: var(--sm-gold);
	font: 400 0.85rem var(--sm-font-display);
	letter-spacing: 0.02em;
	border-radius: 50%;
}

.sm-testimonial-person b {
	display: block;
	color: var(--sm-ink);
	font-size: var(--sm-text-base);
}

/* Scoped to the text block so it never reaches the avatar span */
.sm-testimonial-person div span {
	display: block;
	color: var(--sm-ink-muted);
	font-size: 0.78rem;
}

@media (max-width: 991px) {
	.sm-testimonial-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}


/* ---- 5j. Newsletter ---- */

.sm-newsletter {
	position: relative;
	overflow: hidden;
	padding: var(--sm-section-pad-lg) 0;
	background: var(--sm-ink);
	color: var(--sm-bone);
	text-align: center;
}

.sm-newsletter-ghost {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font: 400 clamp(4.5rem, 13vw, 11rem) / 1 var(--sm-font-display);
	letter-spacing: 0.03em;
	-webkit-text-stroke: 1.5px rgba(var(--sm-bone-rgb), 0.06);
	z-index: 0;
}

.sm-newsletter-inner {
	position: relative;
	z-index: 1;
	max-width: 640px;
	margin: 0 auto;
}

.sm-newsletter h2 {
	margin: 14px 0 18px;
	font: 400 clamp(2.2rem, 5vw, 3.6rem) / 1.1 var(--sm-font-display);
	text-transform: uppercase;
}

.sm-newsletter p {
	max-width: 46ch;
	margin: 0 auto 36px;
	color: rgba(var(--sm-bone-rgb), 0.68);
	line-height: 1.7;
}

.sm-newsletter-form {
	display: flex;
	max-width: 460px;
	margin: 0 auto;
	border: 1px solid rgba(var(--sm-bone-rgb), 0.25);
	background: rgba(var(--sm-bone-rgb), 0.04);
	transition: border-color 0.25s ease;
}

.sm-newsletter-form:focus-within {
	border-color: var(--sm-gold);
}

.sm-newsletter-form input[type="email"] {
	flex: 1;
	min-width: 0;
	padding: 16px 18px;
	border: 0;
	background: transparent;
	color: var(--sm-bone);
	font-family: var(--sm-font-body);
	font-size: 1rem;
}

.sm-newsletter-form input[type="email"]::placeholder {
	color: rgba(var(--sm-bone-rgb), 0.4);
}

.sm-newsletter-form input[type="email"]:focus {
	outline: none;
}

/* Uses the shared .sm-btn .sm-btn-solid; only the form-specific fit is set here */
.sm-newsletter-form .sm-btn {
	flex: none;
	justify-content: center;
	padding: 0 22px;
	border: 0;
}

.sm-newsletter-form .sm-btn svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.sm-newsletter-note {
	display: block;
	margin-top: 16px;
	color: rgba(var(--sm-bone-rgb), 0.4);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
}

@media (max-width: 575px) {
	.sm-newsletter-form {
		flex-direction: column;
	}

	.sm-newsletter-form .sm-btn {
		padding: 14px 22px;
	}
}


/* =========================================================================
   6. ARCHIVE / FILTERS / CATEGORY BAR (product archive and taxonomy pages)

   Order: Heading band -> Shared pieces -> Category bar -> Layout ->
   Filter sidebar -> Toolbar and chips -> Responsive -> Load more.
   ========================================================================= */

/* ---- 6a. Heading band (sits directly above the product list) ---- */

.sm-section.sm-archive-head {
	padding-top: 56px;
	padding-bottom: 0;
}

.sm-archive-head .sm-section-head {
	margin-bottom: 0;
}

.sm-archive-desc {
	max-width: 60ch;
	margin: 12px 0 0;
	color: var(--sm-bone-dim);
	line-height: var(--sm-lh-copy);
}

.sm-section.sm-section--flush {
	padding-top: 32px;
}

@media (max-width: 767px) {
	.sm-section.sm-archive-head {
		padding-top: 40px;
	}

	.sm-section.sm-section--flush {
		padding-top: 24px;
	}
}


/* ---- 6b. Shared pieces (the focus ring lives in section 2) ---- */

/* One slim scrollbar for every scrolling panel in this section */
.sm-filters,
.sm-catbar-panel {
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--sm-bone-rgb), 0.18) transparent;
}

.sm-filters::-webkit-scrollbar,
.sm-catbar-panel::-webkit-scrollbar {
	width: 4px;
}

.sm-filters::-webkit-scrollbar-track,
.sm-catbar-panel::-webkit-scrollbar-track {
	background: transparent;
}

.sm-filters::-webkit-scrollbar-thumb,
.sm-catbar-panel::-webkit-scrollbar-thumb {
	background: rgba(var(--sm-bone-rgb), 0.18);
	border-radius: 4px;
}

.sm-filters::-webkit-scrollbar-thumb:hover,
.sm-catbar-panel::-webkit-scrollbar-thumb:hover {
	background: rgba(var(--sm-gold-rgb), 0.5);
}

/* Outlined pill links: the old filter bar (still used by the 404 page) and the category bar */
.sm-filterbar a,
.sm-catbar-list a {
	border: 1px solid rgba(var(--sm-bone-rgb), 0.25);
	color: var(--sm-bone-dim);
}

.sm-filterbar a:hover,
.sm-filterbar a.is-active,
.sm-catbar-list a:hover,
.sm-catbar-list a.is-active {
	border-color: var(--sm-gold-light);
	color: var(--sm-gold-light);
}

.sm-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 40px;
}

.sm-filterbar a {
	padding: 8px 16px;
	font-size: 0.85rem;
}


/* ---- 6c. Category bar: one line, small pills, "View all" panel ---- */

.sm-catbar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 32px;
}

/* Single line: scrolls sideways instead of wrapping */
.sm-catbar-list {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	gap: 8px;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
}

.sm-catbar-list::-webkit-scrollbar {
	display: none;
}

.sm-catbar-list a,
.sm-catbar-more summary {
	flex: none;
	padding: 5px 13px;
	font-size: 0.78rem;
	line-height: 1.5;
}

.sm-catbar-more {
	position: relative;
	flex: none;
}

.sm-catbar-more summary {
	display: flex;
	align-items: center;
	gap: 7px;
	list-style: none;
	border: 1px solid var(--sm-gold-light);
	color: var(--sm-gold-light);
	cursor: pointer;
}

.sm-catbar-more summary::-webkit-details-marker {
	display: none;
}

.sm-catbar-more summary::after {
	content: "";
	width: 5px;
	height: 5px;
	margin-top: -3px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.sm-catbar-more[open] summary::after {
	margin-top: 2px;
	transform: rotate(225deg);
}

.sm-catbar-more summary:hover,
.sm-catbar-more[open] summary {
	background: var(--sm-gold);
	border-color: var(--sm-gold);
	color: var(--sm-ink);
}

.sm-catbar-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 20;
	width: min(420px, 90vw);
	max-height: 60vh;
	padding: 10px 0;
	overflow-y: auto;
	background: var(--sm-charcoal);
	border: 1px solid var(--sm-line-gold);
	box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35);
}

.sm-catbar-panel ul {
	columns: 2;
	column-gap: 8px;
	margin: 0;
	padding: 0 10px;
	list-style: none;
}

.sm-catbar-panel li {
	break-inside: avoid;
}

.sm-catbar-panel a {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px;
	color: var(--sm-bone-dim);
	font-size: 0.85rem;
}

.sm-catbar-panel a span {
	opacity: 0.6;
	font-size: 0.75rem;
}

.sm-catbar-panel a:hover,
.sm-catbar-panel a.is-active {
	background: rgba(var(--sm-gold-rgb), 0.08);
	color: var(--sm-gold);
}

@media (max-width: 575px) {
	.sm-catbar-panel ul {
		columns: 1;
	}
}


/* ---- 6d. Layout ---- */

.sm-archive-results {
	min-width: 0;
}

.sm-archive-layout.has-filters {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

/* The sidebar takes a column, so the grid drops from 4 to 3 across */
.sm-archive-layout.has-filters .sm-product-grid {
	grid-template-columns: repeat(3, 1fr);
}


/* ---- 6e. Filter sidebar (group rows are the shared disclosure rows in section 2) ---- */

.sm-filters {
	position: sticky;
	top: var(--sm-sticky-top);
	max-height: calc(100vh - 130px);
	overflow-y: auto;
	padding-right: 6px;
}

.sm-filters-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--sm-line-bone);
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.sm-filters-head a {
	color: var(--sm-bone-dim);
	font-size: var(--sm-text-sm);
	letter-spacing: 0;
	text-decoration: underline;
	text-transform: none;
}

.sm-filters-head a:hover {
	color: var(--sm-gold);
}

.sm-filter-options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 0 16px;
}

/* The checkbox is invisible and covers the label; the span is the visible chip */
.sm-filter-option {
	position: relative;
	margin: 0;
	cursor: pointer;
}

.sm-filter-option input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.sm-filter-option span {
	display: block;
	min-width: 34px;
	padding: 4px 10px;
	border: 1px solid rgba(var(--sm-bone-rgb), 0.35);
	color: var(--sm-bone);
	font-size: 0.74rem;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	transition:
		background 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease;
}

.sm-filter-option:hover span {
	border-color: var(--sm-gold-light);
	color: var(--sm-gold-light);
}

.sm-filter-option input:checked + span {
	background: var(--sm-gold);
	border-color: var(--sm-gold);
	color: var(--sm-ink);
}

/*
 * The Apply button is a fallback for when JS is off: ticking a box submits
 * the form. productra.js hides it (initArchiveFilters), so it needs no
 * `.js` rule here.
 */
.sm-filters-apply {
	justify-content: center;
	width: 100%;
	margin-top: 20px;
}


/* ---- 6f. Toolbar and active filter chips ---- */

.sm-archive-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.sm-archive-count {
	margin: 0 0 0 auto;
	color: var(--sm-bone-dim);
	font-size: var(--sm-text-sm);
}

/* Only shown on tablets and phones, where the sidebar is collapsed */
.sm-filters-toggle {
	display: none;
}

.sm-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 22px;
}

.sm-active-filters a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border: 1px solid var(--sm-gold-light);
	color: var(--sm-gold-light);
	font-size: 0.8rem;
}

.sm-active-filters a::after {
	content: "\00d7";
	font-size: 1rem;
	line-height: 1;
}

.sm-active-filters a:hover {
	background: var(--sm-gold);
	border-color: var(--sm-gold);
	color: var(--sm-ink);
}

/* "Clear all" is a plain text link, not a chip */
.sm-active-filters .sm-active-clear {
	padding-left: 4px;
	padding-right: 4px;
	border-color: transparent;
	color: var(--sm-bone-dim);
	text-decoration: underline;
}

.sm-active-filters .sm-active-clear::after {
	content: none;
}

.sm-active-filters .sm-active-clear:hover {
	background: transparent;
	border-color: transparent;
	color: var(--sm-gold-light);
}


/* ---- 6g. Responsive (filters and layout) ---- */

@media (max-width: 1199px) {
	.sm-archive-layout.has-filters {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 32px;
	}
}

@media (max-width: 991px) {
	.sm-archive-layout.has-filters {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	/* The sidebar becomes a panel that opens under the Filters button */
	.sm-filters {
		display: none;
		position: static;
		max-height: none;
		margin-bottom: 24px;
		padding: 18px;
		overflow: visible;
		border: 1px solid var(--sm-line-bone);
	}

	.sm-filters.is-open {
		display: block;
	}

	.sm-filters-toggle {
		display: inline-flex;
	}
}

@media (max-width: 767px) {
	.sm-archive-layout.has-filters .sm-product-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* ---- 6h. Load more ---- */

/* The [hidden] attribute must win over the display rules below */
.sm-pagination[hidden],
.sm-loadmore[hidden] {
	display: none;
}

.sm-loadmore {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 44px;
}

.sm-loadmore-status {
	margin: 0;
	color: var(--sm-bone-dim);
	font-size: var(--sm-text-sm);
}

.sm-loadmore .sm-btn {
	justify-content: center;
	min-width: 200px;
}

.sm-loadmore .sm-btn:disabled {
	opacity: 0.6;
	cursor: progress;
}

@media (max-width: 767px) {
	.sm-loadmore {
		margin-top: 32px;
	}
}


/* =========================================================================
   7. SINGLE PRODUCT
   ========================================================================= */

.sm-product {
	padding: 54px 0 90px;
}

.sm-breadcrumb {
	margin-bottom: 26px;
	color: var(--sm-bone-dim);
	font-size: 0.82rem;
}

/* ---- Layout: gallery left, sticky info right ---------------------------- */

.sm-product-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

.sm-product-media {
	min-width: 0;
}

/* ---- Gallery: 2-column image grid on desktop, swipe slider below ---- */

.sm-pdp-gallery {
	position: relative;
}

.sm-pdp-track {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.sm-pdp-gallery.is-single .sm-pdp-track {
	grid-template-columns: minmax(0, 1fr);
}

.sm-pdp-item {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--sm-charcoal);
}

.sm-pdp-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sm-pdp-dots {
	display: none;
}

/* Badge / Featured tags over the first image */
.sm-product-tags {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: flex;
	gap: 6px;
}

.sm-product-tags .sm-tag {
	position: static;
	display: inline-block;
}

/* Video */
.sm-pdp-video iframe,
.sm-pdp-video video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
	background: #000;
}

.sm-pdp-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.4);
	cursor: pointer;
}

.sm-pdp-play span {
	position: relative;
	width: 56px;
	height: 56px;
	border: 2px solid var(--sm-white);
	border-radius: 50%;
}

.sm-pdp-play span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-35%, -50%);
	border-left: 16px solid var(--sm-white);
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

/* Ring colour and width come from the shared focus rule in section 2 */
.sm-pdp-play:focus-visible {
	outline-offset: -6px;
}

@media (max-width: 991px) {
	.sm-pdp-track {
		display: flex;
		gap: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.sm-pdp-track::-webkit-scrollbar {
		display: none;
	}

	.sm-pdp-item {
		flex: 0 0 100%;
		scroll-snap-align: center;
	}

	.sm-pdp-dots {
		position: absolute;
		left: 50%;
		bottom: 12px;
		z-index: 2;
		display: flex;
		gap: 2px;
		padding: 2px 6px;
		transform: translateX(-50%);
		background: rgba(var(--sm-ink-rgb), 0.55);
		border-radius: 999px;
	}

	.sm-pdp-dots button {
		position: relative;
		width: 16px;
		height: 16px;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	.sm-pdp-dots button::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 6px;
		height: 6px;
		margin: -3px 0 0 -3px;
		border-radius: 50%;
		background: rgba(var(--sm-bone-rgb), 0.5);
		transition: background 0.18s ease, transform 0.18s ease;
	}

	.sm-pdp-dots button.is-active::before {
		background: var(--sm-gold-light);
		transform: scale(1.3);
	}
}

.sm-product-gallery-main.is-video .sm-product-tags {
	display: none;
}

/* ---- Video: slide inside the main frame, play icon on its thumbnail ----- */

.sm-product-video-link {
	margin-top: 1rem;
}

.sm-thumb-video::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.45);
}

.sm-thumb-video .sm-play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 26px;
	height: 26px;
	transform: translate(-50%, -50%);
	border: 2px solid var(--sm-white);
	border-radius: 50%;
}

.sm-thumb-video .sm-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-35%, -50%);
	border-left: 8px solid var(--sm-white);
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

/* ---- Info column (sticky on desktop) ------------------------------------ */

.sm-product-info {
	position: sticky;
	top: var(--sm-sticky-top);
	align-self: start;
}

.sm-product-info .sm-eyebrow {
	margin-bottom: 10px;
}

.sm-product-info h1 {
	margin: 0 0 14px;
	font-size: clamp(1.7rem, 2.6vw, 2.4rem);
	line-height: 1.15;
}

.sm-short-desc {
	margin: 0 0 24px;
	color: var(--sm-bone-dim);
	line-height: 1.6;
}

.sm-product-option {
	margin: 22px 0;
}

.sm-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
}

.sm-swatches span {
	min-width: 46px;
	padding: 9px 14px;
	border: 1px solid rgba(var(--sm-bone-rgb), 0.3);
	font-size: 0.8rem;
	text-align: center;
}

/* ---- Colour variants (sibling products in the same variant group) ---- */

.sm-variant-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.productra .sm-variant {
	display: block;
	width: 60px;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--sm-charcoal);
	border: 1px solid rgba(var(--sm-bone-rgb), 0.3);
	transition: border-color 0.18s ease;
}

.productra .sm-variant:hover {
	border-color: var(--sm-gold-light);
}

.productra .sm-variant.is-current {
	border-color: var(--sm-gold);
	box-shadow: inset 0 0 0 1px var(--sm-gold);
}

.sm-variant:focus-visible {
	outline: 2px solid var(--sm-gold);
	outline-offset: 2px;
}

.sm-variant img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sm-variant-text {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 4px;
	font-size: 0.7rem;
	text-align: center;
}

.sm-product-cta {
	display: block;
	width: 100%;
	margin: 28px 0 0;
	text-align: center;
}

/* ---- Accordions (rows are the shared disclosure rows in section 2) ------ */

.sm-accordions {
	margin-top: 30px;
	border-top: 1px solid var(--sm-line-bone);
}

.sm-accordion-body {
	padding: 0 0 18px;
	color: var(--sm-bone-dim);
	line-height: 1.7;
}

.sm-accordion-body p:last-child {
	margin-bottom: 0;
}

/* ---- Specs list ("Product details" accordion) --------------------------- */

.sm-specs {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-specs li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(var(--sm-bone-rgb), 0.1);
	font-size: var(--sm-text-base);
}

.sm-specs li:last-child {
	border-bottom: 0;
}

.sm-specs li span:first-child {
	color: var(--sm-bone-dim);
}

.sm-specs li span:last-child {
	text-align: right;
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 1199px) {
	.sm-product-layout {
		gap: 40px;
	}
}

@media (max-width: 991px) {
	.sm-product {
		padding: 40px 0 72px;
	}

	.sm-product-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.sm-product-info {
		position: static;
	}
}

@media (max-width: 767px) {
	.sm-product {
		padding: 28px 0 56px;
	}
}

@media (max-width: 575px) {
	.sm-product-gallery-thumbs button {
		flex-basis: 60px;
	}

	.sm-specs li {
		flex-direction: column;
		gap: 2px;
	}

	.sm-specs li span:last-child {
		text-align: left;
	}
}

/* Related products: 5-column grid */
.sm-product-grid--5 {
	grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1199px) {
	.sm-product-grid--5 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 991px) {
	.sm-product-grid--5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
	.sm-product-grid--5 { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Fullscreen gallery (lightbox) ---------------------------------------- */

.sm-pdp-zoom {
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: zoom-in;
}

.sm-pdp-zoom:hover,
.sm-pdp-zoom:focus {
	background: transparent;
}

/* Ring colour and width come from the shared focus rule in section 2 */
.sm-pdp-zoom:focus-visible {
	outline-offset: -4px;
}

body.sm-lb-open {
	overflow: hidden;
}

/* z-index sits above the WhatsApp button (99999) */
.sm-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	background: rgba(var(--sm-ink-rgb), 0.96);
}

.sm-lb[hidden] {
	display: none;
}

.sm-lb-thumbs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 16px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--sm-bone-rgb), 0.18) transparent;
}

.sm-lb-thumbs button {
	flex: none;
	width: 100%;
	aspect-ratio: 4 / 5;
	padding: 0;
	border: 1px solid var(--sm-line-bone);
	background: none;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.sm-lb-thumbs button:hover,
.sm-lb-thumbs button.is-active {
	background: none;
	border-color: var(--sm-gold);
	opacity: 1;
}

.sm-lb-thumbs img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sm-lb-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 24px 80px;
	touch-action: pan-y;
}

.sm-lb-stage img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	object-fit: contain;
}

/* Arrows and close share the carousel arrow look */
.sm-lb-nav,
.sm-lb-close {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(var(--sm-bone-rgb), 0.35);
	border-radius: 0;
	background: rgba(var(--sm-ink-rgb), 0.6);
	color: var(--sm-bone);
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.sm-lb-nav:hover,
.sm-lb-close:hover {
	background: var(--sm-gold);
	border-color: var(--sm-gold);
	color: var(--sm-ink);
}

.sm-lb-nav {
	top: 50%;
	margin-top: -22px;
}

.sm-lb-prev { left: 112px; }
.sm-lb-next { right: 16px; }

.sm-lb-close {
	top: 16px;
	right: 16px;
}

.sm-lb svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: square;
}

/* One image only: nothing to browse */
.sm-lb.is-single .sm-lb-thumbs,
.sm-lb.is-single .sm-lb-nav {
	display: none;
}

.sm-lb.is-single {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 991px) {
	.sm-lb {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) auto;
	}

	/* Thumbs move under the image as a scrolling row */
	.sm-lb-thumbs {
		order: 2;
		flex-direction: row;
		padding: 10px 12px;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.sm-lb-thumbs button {
		flex: 0 0 52px;
		width: 52px;
	}

	.sm-lb-stage {
		order: 1;
		padding: 64px 12px 12px;
	}

	.sm-lb-stage img {
		max-height: calc(100vh - 150px);
		max-height: calc(100dvh - 150px);
	}

	.sm-lb-prev { left: 8px; }
	.sm-lb-next { right: 8px; }
}

/* Swiping is enough on small phones */
@media (max-width: 575px) {
	.sm-lb-nav {
		display: none;
	}
}


/* =========================================================================
   8. ABOUT PAGE (templates/page-about.php)

   Class names use the .sm-page-about-* prefix so they never collide with the
   front page's About section (.sm-about-*, section 5h).
   ========================================================================= */

/* ---- Story (light) ---- */

.sm-page-about-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: center;
}

.sm-page-about-portrait {
	aspect-ratio: 4 / 5;
	background: var(--sm-charcoal);
	overflow: hidden;
}

.sm-page-about-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 991px) {
	.sm-page-about-hero {
		grid-template-columns: 1fr;
	}
}


/* ---- Values (alt) ---- */

.sm-values {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 50px;
}

.sm-values .sm-value {
	padding-top: 16px;
	border-top: 2px solid var(--sm-gold);
}

@media (max-width: 767px) {
	.sm-values {
		grid-template-columns: 1fr;
	}
}


/* ---- Enquire CTA (ink) ---- */

.sm-page-cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	width: 100%;
	text-align: center;
}


/* =========================================================================
   9. CONTACT PAGE

   Order: Hero (dark) -> Layout grid -> Form card -> WhatsApp card ->
   Other channels. Breakpoints: 991 / 767 / 575.
   ========================================================================= */

/* ---- 9a. Hero (dark) ---- */

.sm-contact-hero {
	position: relative;
	overflow: hidden;
	padding: var(--sm-section-pad-lg) 0 var(--sm-section-pad);
	background: radial-gradient(
		ellipse at 85% 0%,
		var(--sm-gold-shadow) 0%,
		var(--sm-ink) 65%
	);
	border-bottom: 1px solid var(--sm-line-gold);
}

.sm-contact-ghost {
	right: -2vw;
	bottom: -0.1em;
	font: 400 clamp(6rem, 18vw, 15rem) / 0.8 var(--sm-font-display);
	letter-spacing: 0.02em;
	-webkit-text-stroke: 1.5px rgba(var(--sm-bone-rgb), 0.1);
}

.sm-contact-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 640px;
}

.productra .sm-contact-hero h1 {
	margin: 14px 0 16px;
	text-transform: uppercase;
}

.sm-contact-hero-inner > p {
	max-width: 46ch;
	margin: 0 0 28px;
	color: var(--sm-bone-dim);
	font-size: 1.1rem;
	line-height: var(--sm-lh-copy);
}

.sm-contact-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-contact-meta li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-left: 14px;
	border-left: 2px solid var(--sm-gold);
}

.sm-contact-meta b {
	color: var(--sm-bone);
	font-size: var(--sm-text-base);
	font-weight: 600;
}

.sm-contact-meta span {
	color: var(--sm-bone-dim);
	font-size: var(--sm-text-sm);
}

@media (max-width: 767px) {
	.sm-contact-hero {
		padding: var(--sm-section-pad) 0 var(--sm-section-pad-lg);
	}
}


/* ---- 9b. Layout (light section) ---- */

.sm-contact-main {
	padding-top: var(--sm-section-pad-lg);
	padding-bottom: var(--sm-section-pad-lg);
}

.sm-contact-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 60px;
	align-items: start;
}

@media (max-width: 991px) {
	.sm-contact-grid {
		grid-template-columns: 1fr;
		gap: 44px;
	}
}

@media (max-width: 767px) {
	.sm-contact-main {
		padding-top: var(--sm-section-pad);
		padding-bottom: var(--sm-section-pad);
	}
}


/* ---- 9c. Form card ---- */

/* Confirmation / error message above the form */
.sm-contact-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 24px;
	padding: 14px 18px;
	background: var(--sm-white);
	border-left: 3px solid var(--sm-gold-deep);
	color: var(--sm-ink);
}

.sm-contact-notice p {
	margin: 0;
	font-size: var(--sm-text-base);
	line-height: 1.5;
}

.sm-contact-notice svg {
	flex: none;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: var(--sm-gold-deep);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sm-contact-notice-error {
	border-left-color: var(--sm-rust);
}

.sm-contact-notice-error svg {
	stroke: var(--sm-rust);
}

.sm-contact-card {
	padding: 36px;
	background: var(--sm-white);
	border: 1px solid var(--sm-line-ink);
	border-top: 3px solid var(--sm-gold);
	box-shadow: 0 18px 40px rgba(var(--sm-ink-rgb), 0.08);
}

.sm-contact-card h2 {
	margin: 0 0 8px;
	font-size: clamp(1.5rem, 3vw, 1.9rem);
	text-transform: uppercase;
}

.sm-contact-card > p {
	max-width: 48ch;
	margin: 0 0 28px;
	color: var(--sm-ink-muted);
	font-size: var(--sm-text-base);
	line-height: var(--sm-lh-copy);
}

/* Form fields */
.productra .sm-form label {
	display: block;
	margin-bottom: 6px;
	color: var(--sm-ink);
	font-size: var(--sm-text-sm);
	font-weight: 600;
}

.productra .sm-form .sm-field {
	margin-bottom: 20px;
}

.sm-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 18px;
}

.productra .sm-form input,
.productra .sm-form select,
.productra .sm-form textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid rgba(var(--sm-ink-rgb), 0.25);
	border-radius: 0;
	background: var(--sm-white);
	color: var(--sm-ink);
	font-family: var(--sm-font-body);
	font-size: 0.95rem;
}

.productra .sm-form input:focus,
.productra .sm-form select:focus,
.productra .sm-form textarea:focus {
	outline: 2px solid var(--sm-gold);
	outline-offset: 1px;
}

.productra .sm-form textarea {
	resize: vertical;
	min-height: 140px;
}

/* Field-level validation message (added by the inline script in page-contact.php) */
.productra .sm-form .sm-field-error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-top: 6px;
	color: var(--sm-rust);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Diamond marker, so the error is not signalled by colour alone */
.productra .sm-form .sm-field-error::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	margin-top: 0.45em;
	background: currentColor;
	transform: rotate(45deg);
}

/* Invalid field: rust border and focus ring instead of the neutral ones */
.productra .sm-form [aria-invalid="true"] {
	border-color: var(--sm-rust);
}

.productra .sm-form [aria-invalid="true"]:focus {
	outline-color: var(--sm-rust);
}

/* Honeypot: invisible to people, still in the DOM for bots */
.sm-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sm-contact-submit {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 20px;
	margin-top: 6px;
}

.sm-contact-submit small {
	color: var(--sm-ink-faint);
	font-size: 0.78rem;
}

@media (max-width: 575px) {
	.sm-contact-card {
		padding: 22px;
	}

	.sm-field-row {
		grid-template-columns: 1fr;
	}

	.sm-contact-submit .sm-btn {
		justify-content: center;
		width: 100%;
	}
}


/* ---- 9d. Side column: WhatsApp card ---- */

.sm-contact-side {
	display: grid;
	gap: 28px;
}

/* Ink panel on the bone section */
.sm-contact-wa {
	padding: 32px;
	background: var(--sm-ink);
	color: var(--sm-bone);
	border: 1px solid var(--sm-line-gold);
}

.sm-contact-wa > svg {
	width: 34px;
	height: 34px;
	margin-bottom: 16px;
	fill: none;
	stroke: var(--sm-gold);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sm-section.sm-light .sm-contact-wa h2 {
	margin: 0 0 8px;
	color: var(--sm-bone);
	font-size: clamp(1.4rem, 2.6vw, 1.7rem);
	text-transform: uppercase;
}

.sm-contact-wa p {
	margin: 0 0 22px;
	color: var(--sm-bone-dim);
	font-size: var(--sm-text-base);
	line-height: var(--sm-lh-copy);
}

/* The light-section rule turns solid buttons ink, which vanishes on this ink card */
.sm-section.sm-light .sm-contact-wa .sm-btn.sm-btn-solid {
	background: var(--sm-gold-grad);
	border-color: var(--sm-gold);
	color: var(--sm-ink);
}

.productra .sm-section.sm-light .sm-contact-wa .sm-btn.sm-btn-solid:hover {
	background: var(--sm-bone);
	border-color: var(--sm-bone);
	color: var(--sm-ink);
}

@media (max-width: 575px) {
	.sm-contact-wa {
		padding: 22px;
	}
}


/* ---- 9e. Side column: other channels ---- */

.sm-contact-channels {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--sm-line-ink);
}

.sm-contact-channels li {
	display: flex;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--sm-line-ink);
}

.sm-contact-channels svg {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	fill: none;
	stroke: var(--sm-gold-deep);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sm-contact-channels h3 {
	margin: 0 0 4px;
	font-family: var(--sm-font-body);
	font-size: var(--sm-text-base);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

.sm-contact-channels p {
	margin: 0;
	color: var(--sm-ink-soft);
	font-size: var(--sm-text-base);
	line-height: 1.5;
}

/* gold-text, not gold, for links on bone (AA contrast) */
.productra .sm-section.sm-light .sm-contact-channels a {
	color: var(--sm-gold-text);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.productra .sm-section.sm-light .sm-contact-channels a:hover {
	color: var(--sm-ink);
}


/* =========================================================================
   10. 404 PAGE (templates/404.php)

   Order: Hero (dark) -> Latest pieces (reuses the product grid).
   Breakpoints: 991 / 767 / 575.
   ========================================================================= */

.sm-404-hero {
	position: relative;
	overflow: hidden;
	padding: var(--sm-section-pad-lg) 0;
	background: radial-gradient(
		ellipse at 50% 0%,
		var(--sm-gold-shadow) 0%,
		var(--sm-ink) 65%
	);
	border-bottom: 1px solid var(--sm-line-gold);
	text-align: center;
}

.sm-404-ghost {
	left: 50%;
	bottom: -0.12em;
	transform: translateX(-50%);
	font: 400 clamp(8rem, 30vw, 26rem) / 0.8 var(--sm-font-display);
	letter-spacing: 0.04em;
	-webkit-text-stroke: 1.5px rgba(var(--sm-bone-rgb), 0.07);
}

.sm-404-inner {
	position: relative;
	z-index: 1;
	max-width: 680px;
	margin: 0 auto;
}

/* Big 404: outlined digits, solid champagne zero with a spinning dashed ring */
.sm-404-num {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.04em;
	margin-bottom: 18px;
	font: 400 clamp(6.5rem, 24vw, 14rem) / 0.95 var(--sm-font-display);
	letter-spacing: 0.02em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(var(--sm-gold-rgb), 0.85);
	user-select: none;
}

.sm-404-zero {
	position: relative;
	padding: 0 0.1em;
	color: var(--sm-gold-light);
	-webkit-text-stroke: 0;
	text-shadow: 0 0 60px rgba(var(--sm-gold-light-rgb), 0.3);
}

.sm-404-zero::before {
	content: "";
	position: absolute;
	inset: 2% -6%;
	border: 1px dashed rgba(var(--sm-gold-rgb), 0.5);
	border-radius: 50%;
	animation: sm-spin 40s linear infinite;
}

/* Diamond marker, same motif as the hero ring and eyebrow */
.sm-404-zero::after {
	content: "";
	position: absolute;
	top: calc(2% - 5px);
	left: 50%;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	background: var(--sm-gold);
	transform: rotate(45deg);
}

.productra .sm-404-hero h1 {
	margin: 14px 0 16px;
	text-transform: uppercase;
}

.sm-404-inner > p:not(.sm-404-path) {
	max-width: 52ch;
	margin: 0 auto 30px;
	color: var(--sm-bone-dim);
	font-size: 1.05rem;
	line-height: var(--sm-lh-copy);
}

.sm-404-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 32px;
}

.sm-404-search .sm-search-form {
	width: min(420px, 100%);
	margin: 0 auto 26px;
	border: 1px solid var(--sm-line-gold);
}

.sm-404-search .sm-search-form input {
	height: 44px;
	font-size: var(--sm-text-base);
}

.sm-404-search .sm-search-form button {
	height: 44px;
	width: 46px;
}

.sm-404-cats {
	justify-content: center;
	margin-bottom: 26px;
}

.sm-404-path {
	margin: 0;
	color: rgba(var(--sm-bone-rgb), 0.45);
	font-size: var(--sm-text-sm);
}

.sm-404-path code {
	padding: 2px 8px;
	background: rgba(var(--sm-bone-rgb), 0.06);
	border: 1px solid var(--sm-line-bone);
	color: var(--sm-bone-dim);
	font-size: inherit;
	overflow-wrap: anywhere;
}

@media (max-width: 767px) {
	.sm-404-hero {
		padding: var(--sm-section-pad) 0 var(--sm-section-pad-lg);
	}
}

@media (max-width: 575px) {
	.sm-404-num {
		-webkit-text-stroke-width: 1.5px;
	}

	.sm-404-actions .sm-btn {
		justify-content: center;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sm-404-zero::before {
		animation: none;
	}
}