/*
Theme Name: SkimmaDisc
Theme URI: https://skimmadisc.co.za/
Author: DevRocket
Author URI: https://devrocket.co.za/
Description: Bespoke WooCommerce theme for SkimmaDisc, the soft silicone throwing disc. Brand palette extracted from the SkimmaDisc logo.
Version: 1.1.0
Requires at least: 6.9
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skimmadisc
Tags: e-commerce, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	/* Brand palette, sampled from logo.png via ImageMagick histogram */
	--sd-navy:        #043068;
	--sd-navy-deep:   #01245c;
	--sd-navy-soft:   #1e4779;
	--sd-sky:         #0d9fe4;
	--sd-sky-dark:    #0b97db;
	--sd-sky-light:   #6fd0f7;
	--sd-orange:      #fe6f05;
	--sd-orange-dark: #e05f00;
	--sd-amber:       #fa8c14;
	--sd-lime:        #74c208;
	--sd-lime-dark:   #5ba30f;

	--sd-white:       #ffffff;
	--sd-paper:       #f4f9fd;
	--sd-mist:        #e4eef7;
	--sd-grey:        #6b7f95;
	--sd-ink:         #12243a;

	/* Typography */
	--sd-font-head: "Fredoka", "Trebuchet MS", "Segoe UI", sans-serif;
	--sd-font-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;

	/* Spacing + shape */
	--sd-radius:    18px;
	--sd-radius-lg: 32px;
	--sd-radius-pill: 999px;
	--sd-shadow:    0 10px 30px rgba(4, 48, 104, .10);
	--sd-shadow-lg: 0 22px 60px rgba(4, 48, 104, .18);
	--sd-ring:      0 0 0 4px rgba(13, 159, 228, .28);

	--sd-wrap: 1200px;
	--sd-gutter: clamp(1rem, 4vw, 2.5rem);

	--sd-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ==========================================================================
   2. Reset + base
   ========================================================================== */

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

/*
 * overflow-x on the root, not just body. The off-canvas mobile nav is
 * position:fixed, so its containing block is the viewport and body's
 * overflow-x cannot clip it. Without this the parked panel adds ~330px of
 * document scroll width and pushes every section wider than the screen.
 */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

body {
	margin: 0;
	font-family: var(--sd-font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--sd-ink);
	background: var(--sd-white);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

a { color: var(--sd-sky-dark); text-decoration: none; transition: color .2s var(--sd-ease); }
a:hover { color: var(--sd-orange); }

h1, h2, h3, h4, h5 {
	font-family: var(--sd-font-head);
	color: var(--sd-navy);
	line-height: 1.1;
	margin: 0 0 .5em;
	font-weight: 600;
	letter-spacing: -.01em;
}

h1 { font-size: clamp(2.2rem, 5.5vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }

p { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }

:focus-visible { outline: 3px solid var(--sd-amber); outline-offset: 3px; border-radius: 6px; }

.sd-wrap { width: min(100% - (var(--sd-gutter) * 2), var(--sd-wrap)); margin-inline: auto; }

.screen-reader-text {
	border: 0; clip-path: inset(50%); height: 1px; overflow: hidden;
	position: absolute !important; width: 1px; white-space: nowrap;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--sd-navy); color: #fff; padding: .8rem 1.4rem; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ==========================================================================
   3. Buttons
   ========================================================================== */

/* Flat buttons: colour change only, no offset shadow and no movement. */
.sd-btn,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt,
.wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	font-family: var(--sd-font-head); font-weight: 600; font-size: .97rem;
	line-height: 1; text-align: center; cursor: pointer;
	padding: .88em 1.75em;
	border: 0; border-radius: var(--sd-radius-pill);
	background: var(--sd-orange); color: #fff;
	box-shadow: none;
	transition: background-color .18s var(--sd-ease), color .18s var(--sd-ease);
	text-decoration: none; white-space: nowrap;
}

.sd-btn:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.wp-block-button__link:hover {
	background: var(--sd-orange-dark); color: #fff;
	transform: none; box-shadow: none;
}

.sd-btn:active,
.woocommerce a.button:active, .woocommerce button.button:active,
.woocommerce input.button:active, .woocommerce button.button.alt:active {
	background: #c85400; transform: none; box-shadow: none;
}

.sd-btn--sky, .woocommerce a.button.sd-btn--sky { background: var(--sd-sky); }
.sd-btn--sky:hover { background: var(--sd-sky-dark); }

.sd-btn--lime { background: var(--sd-lime); color: var(--sd-navy); }
.sd-btn--lime:hover { background: var(--sd-lime-dark); color: #fff; }

.sd-btn--navy { background: var(--sd-navy); }
.sd-btn--navy:hover { background: var(--sd-navy-deep); }

.sd-btn--ghost {
	background: transparent; color: var(--sd-navy);
	box-shadow: inset 0 0 0 2px var(--sd-mist);
}
.sd-btn--ghost:hover {
	background: var(--sd-navy); color: #fff;
	box-shadow: inset 0 0 0 2px var(--sd-navy);
}

.sd-btn--lg { font-size: 1.05rem; padding: 1em 2.1em; }

/*
 * Every other icon context sizes its own SVG, and buttons were the one that
 * never did. With the base reset setting height:auto on an SVG that carries
 * only a viewBox, the arrows collapsed to zero and never appeared. Sizing in
 * em keeps them tied to whichever button they sit in.
 */
.sd-btn svg { width: 1.05em; height: 1.05em; flex: none; }

/* Disabled / loading states */
.woocommerce a.button.disabled, .woocommerce button.button:disabled,
.woocommerce button.button.disabled, .woocommerce input.button:disabled,
.woocommerce button.button.alt.disabled, .woocommerce button.button.alt:disabled,
.woocommerce a.button.disabled:hover, .woocommerce button.button:disabled:hover,
.woocommerce button.button.alt.disabled:hover, .woocommerce button.button.alt:disabled:hover {
	background: var(--sd-mist); color: var(--sd-grey);
	opacity: 1; cursor: not-allowed; transform: none; box-shadow: none;
}

/* ==========================================================================
   4. Header
   ========================================================================== */

.sd-topbar {
	background: var(--sd-navy);
	color: #cfe6f8;
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.sd-topbar__inner {
	display: flex; align-items: center; justify-content: center; gap: 1.6rem;
	min-height: 40px; text-align: center; flex-wrap: wrap;
}
.sd-topbar__item { display: inline-flex; align-items: center; gap: .45rem; }
.sd-topbar__item svg { width: 16px; height: 16px; flex: none; }

.sd-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid var(--sd-mist);
	transition: box-shadow .25s var(--sd-ease);
}
.sd-header.is-stuck { box-shadow: 0 8px 28px rgba(4, 48, 104, .10); }

.sd-header__inner {
	display: flex; align-items: center; gap: 1.2rem;
	min-height: 84px;
}

/* Both the fallback text mark and core's the_custom_logo() output. */
.sd-logo,
.custom-logo-link {
	flex: none; display: block; margin-right: auto; line-height: 0;
}
.sd-logo img,
.custom-logo-link img,
img.custom-logo {
	max-height: 58px; width: auto; max-width: 210px; object-fit: contain;
}
@media (max-width: 600px) {
	.sd-logo img, .custom-logo-link img, img.custom-logo { max-height: 44px; max-width: 150px; }
}
.sd-logo__text {
	font-family: var(--sd-font-head); font-size: 1.6rem; font-weight: 700;
	color: var(--sd-navy); letter-spacing: -.02em;
}
.sd-logo__text span { color: var(--sd-sky); }

/* Primary nav */
.sd-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .35rem; align-items: center; }
.sd-nav li { position: relative; }
.sd-nav a {
	display: block; padding: .6rem 1rem; border-radius: var(--sd-radius-pill);
	font-family: var(--sd-font-head); font-weight: 500; font-size: 1.02rem;
	color: var(--sd-navy);
	transition: background .2s var(--sd-ease), color .2s var(--sd-ease);
}
.sd-nav a:hover { background: var(--sd-paper); color: var(--sd-sky-dark); }
.sd-nav .current-menu-item > a,
.sd-nav .current_page_item > a,
.sd-nav .current-menu-parent > a {
	background: var(--sd-sky); color: #fff;
}
.sd-nav .current-menu-item > a:hover { color: #fff; }

/* Dropdowns */
.sd-nav ul ul {
	position: absolute; top: calc(100% + .4rem); left: 0; z-index: 20;
	display: block; min-width: 210px; padding: .5rem;
	background: #fff; border-radius: var(--sd-radius); box-shadow: var(--sd-shadow-lg);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .2s var(--sd-ease), transform .2s var(--sd-ease), visibility .2s;
}
.sd-nav li:hover > ul, .sd-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.sd-nav ul ul li { width: 100%; }
.sd-nav ul ul a { border-radius: 12px; }

/* Header actions */
.sd-header__actions { display: flex; align-items: center; gap: .55rem; flex: none; }

.sd-icon-btn {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--sd-paper); color: var(--sd-navy); border: 0; cursor: pointer;
	transition: background .2s var(--sd-ease), color .2s var(--sd-ease), transform .2s var(--sd-ease);
}
.sd-icon-btn:hover { background: var(--sd-sky); color: #fff; }
.sd-icon-btn svg { width: 22px; height: 22px; }

.sd-cart__count {
	position: absolute; top: -3px; right: -3px;
	min-width: 21px; height: 21px; padding: 0 5px;
	display: grid; place-items: center;
	background: var(--sd-orange); color: #fff;
	font-family: var(--sd-font-head); font-size: .72rem; font-weight: 600;
	border-radius: var(--sd-radius-pill);
	border: 2px solid #fff;
}
.sd-cart__count[data-count="0"] { display: none; }

.sd-header__cta { display: none; }
@media (min-width: 1080px) { .sd-header__cta { display: inline-flex; } }

/* Mobile toggle */
.sd-burger { display: none; }
.sd-burger span {
	display: block; width: 22px; height: 2.5px; border-radius: 2px;
	background: currentColor; transition: transform .25s var(--sd-ease), opacity .2s;
}
.sd-burger span + span { margin-top: 5px; }
.sd-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.sd-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sd-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 979px) {
	.sd-burger { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }

	/*
	 * backdrop-filter establishes a containing block for fixed-position
	 * descendants. The off-canvas panel lives inside .sd-header, so with the
	 * blur on it was being positioned against the 85px header box instead of
	 * the viewport: a 136px tall stub rather than a full-height drawer.
	 * The blur stays on desktop, where there is no drawer.
	 */
	.sd-header { backdrop-filter: none; background: rgba(255, 255, 255, .98); }
	.sd-nav {
		position: fixed; inset: 0 0 0 auto; width: min(85vw, 340px); z-index: 200;
		background: #fff; padding: 6.5rem 1.4rem 2rem; overflow-y: auto;
		box-shadow: -20px 0 60px rgba(4, 48, 104, .2);
		transform: translateX(100%);
		/* Hidden from the tab order while closed, not just moved off-screen. */
		visibility: hidden;
		transition: transform .32s var(--sd-ease), visibility .32s var(--sd-ease);
	}
	.sd-nav.is-open { transform: translateX(0); visibility: visible; }

	/*
	 * Lift the header above the scrim while the panel is open, otherwise the
	 * close button sits behind the overlay and reads as dimmed and dead.
	 */
	body.sd-nav-open .sd-header { z-index: 210; }

	/*
	 * The panel is a sibling of the logo and the header controls inside
	 * .sd-header__inner. Those are position:static, so the positioned panel
	 * paints over them and swallows the close button. Giving them a stacking
	 * position above the panel keeps the burger, cart and account tappable.
	 */
	.sd-logo,
	.custom-logo-link,
	.sd-header__actions {
		position: relative;
		z-index: 205;
	}
	.sd-nav ul { flex-direction: column; align-items: stretch; gap: .2rem; }
	.sd-nav a { padding: .85rem 1rem; font-size: 1.1rem; }
	.sd-nav ul ul {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; padding: 0 0 0 .9rem; min-width: 0;
	}
	.sd-nav-overlay {
		position: fixed; inset: 0; z-index: 150;
		background: rgba(4, 48, 104, .45); backdrop-filter: blur(2px);
		opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
	}
	.sd-nav-overlay.is-open { opacity: 1; visibility: visible; }
	body.sd-nav-open { overflow: hidden; }
}

/* ==========================================================================
   5. Hero
   ========================================================================== */

.sd-hero {
	position: relative; overflow: hidden;
	color: #fff;
	padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(4rem, 10vw, 8rem);
	isolation: isolate;
	/*
	 * Every brand colour is present as a radial wash over a blue base: sky
	 * upper right, lime down the left edge, orange bottom right, a pink hint
	 * along the bottom. Deliberately no vignette: an earlier one darkened the
	 * corners and cancelled out these exact accents.
	 */
	background:
		radial-gradient(1000px 800px at 80% -6%, rgba(29, 178, 245, .92), transparent 60%),
		radial-gradient(900px 620px at 98% 104%, rgba(254, 111, 5, .50), transparent 56%),
		radial-gradient(760px 600px at 4% 96%, rgba(13, 159, 228, .38), transparent 62%),
		linear-gradient(152deg, #0a4a97 0%, #073d81 34%, var(--sd-navy) 68%, var(--sd-navy-deep) 100%);
}

/*
 * Soft diagonal streaks echoing the motion lines in the logo. Sky and orange
 * only: lime over navy turns muddy olive, so it stays an accent colour on the
 * marquee and buttons rather than a background wash.
 */
.sd-hero::before {
	content: ""; position: absolute; inset: -30% -15%; z-index: -1; pointer-events: none;
	background:
		linear-gradient(104deg, transparent 36%, rgba(255, 255, 255, .08) 40%, transparent 44%),
		linear-gradient(104deg, transparent 52%, rgba(111, 208, 247, .18) 55%, transparent 59%),
		linear-gradient(104deg, transparent 70%, rgba(254, 111, 5, .16) 73%, transparent 77%);
}

.sd-hero__grid {
	display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
	grid-template-columns: 1fr;
}
@media (min-width: 900px) { .sd-hero__grid { grid-template-columns: 1.05fr .95fr; } }

.sd-hero h1 { color: #fff; margin-bottom: .35em; }
.sd-hero h1 em {
	font-style: normal; color: var(--sd-amber);
	display: block;
}
.sd-hero__lead {
	font-size: clamp(1.06rem, 1.9vw, 1.28rem);
	color: #cfe4f6; max-width: 46ch; margin-bottom: 2rem;
}
.sd-hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.sd-hero__actions .sd-btn--ghost {
	color: #fff; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35);
}
.sd-hero__actions .sd-btn--ghost:hover { background: #fff; color: var(--sd-navy); box-shadow: inset 0 0 0 3px #fff; }

.sd-eyebrow {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .45rem 1.1rem; margin-bottom: 1.4rem;
	background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--sd-radius-pill);
	font-family: var(--sd-font-head); font-size: .84rem; font-weight: 600;
	letter-spacing: .07em; text-transform: uppercase; color: var(--sd-sky-light);
	/* Flex items shrink by default, which was wrapping the label inside the pill. */
	white-space: nowrap; max-width: 100%;
}
.sd-eyebrow svg { flex: none; width: 16px; height: 16px; }
@media (max-width: 420px) { .sd-eyebrow { white-space: normal; } }
.sd-eyebrow--dark { background: var(--sd-paper); border-color: var(--sd-mist); color: var(--sd-sky-dark); }

/* Hero trust strip */
.sd-hero__trust {
	display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2.4rem;
	padding-top: 1.8rem; border-top: 1px solid rgba(255, 255, 255, .16);
}
.sd-hero__trust li { list-style: none; }
.sd-hero__trust ul { display: contents; }
.sd-hero__trust strong {
	display: block; font-family: var(--sd-font-head); font-size: 1.5rem; color: var(--sd-lime);
}
.sd-hero__trust span { font-size: .88rem; color: #a9c7e2; }

/* Hero visual, CSS-drawn disc */
.sd-hero__visual { position: relative; display: grid; place-items: center; min-height: 320px; }
.sd-disc {
	position: relative; width: min(78%, 400px); aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, #fff 0 17%, transparent 17.5%),
		conic-gradient(from 210deg, var(--sd-orange), var(--sd-amber), var(--sd-lime), var(--sd-sky), var(--sd-orange));
	box-shadow:
		0 0 0 12px rgba(255, 255, 255, .95),
		0 0 0 22px var(--sd-navy),
		0 40px 70px rgba(0, 0, 0, .38);
	transform: rotate(-14deg) skewY(-7deg);
	animation: sd-spin 14s linear infinite;
}
.sd-disc::after {
	content: ""; position: absolute; inset: 20%;
	border-radius: 50%; border: 10px solid rgba(255, 255, 255, .9);
}
@keyframes sd-spin { to { transform: rotate(346deg) skewY(-7deg); } }
@media (prefers-reduced-motion: reduce) { .sd-disc { animation: none; } }

.sd-hero__visual img { position: relative; z-index: 2; filter: drop-shadow(0 24px 50px rgba(0, 0, 0, .4)); }

/* ==========================================================================
   6. Sections + benefit cards
   ========================================================================== */

.sd-section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.sd-section--paper { background: var(--sd-paper); }
.sd-section--navy { background: var(--sd-navy); color: #d6e8f7; }
.sd-section--navy h2, .sd-section--navy h3 { color: #fff; }

.sd-section__head { max-width: 720px; margin: 0 auto clamp(2.2rem, 5vw, 3.4rem); text-align: center; }
.sd-section__head p { color: var(--sd-grey); font-size: 1.1rem; margin-bottom: 0; }
.sd-section--navy .sd-section__head p { color: #a9c7e2; }

.sd-grid { display: grid; gap: 1.5rem; }
.sd-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.sd-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

.sd-card {
	position: relative; overflow: hidden;
	background: #fff; border-radius: var(--sd-radius-lg);
	padding: 2.2rem 1.9rem;
	box-shadow: var(--sd-shadow);
	border: 1px solid var(--sd-mist);
	transition: transform .28s var(--sd-ease), box-shadow .28s var(--sd-ease);
}
.sd-card:hover { transform: translateY(-4px); box-shadow: var(--sd-shadow-lg); }
.sd-card h3 { margin-bottom: .5rem; }
.sd-card p { color: var(--sd-grey); margin-bottom: 0; font-size: .99rem; }

.sd-card__icon {
	width: 62px; height: 62px; border-radius: 20px;
	display: grid; place-items: center; margin-bottom: 1.3rem;
	background: var(--sd-paper); color: var(--sd-sky);
}
.sd-card__icon svg { width: 30px; height: 30px; }
.sd-card--sky   .sd-card__icon { background: rgba(13, 159, 228, .12); color: var(--sd-sky-dark); }
.sd-card--lime  .sd-card__icon { background: rgba(116, 194, 8, .14);  color: var(--sd-lime-dark); }
.sd-card--orange .sd-card__icon { background: rgba(254, 111, 5, .12); color: var(--sd-orange); }
.sd-card--amber .sd-card__icon { background: rgba(250, 140, 20, .14); color: var(--sd-amber); }
.sd-card--navy  .sd-card__icon { background: rgba(4, 48, 104, .10);   color: var(--sd-navy); }

/* Colour strip along card top */
.sd-card::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
	background: var(--sd-sky); opacity: 0; transition: opacity .28s var(--sd-ease);
}
.sd-card:hover::before { opacity: 1; }
.sd-card--lime::before { background: var(--sd-lime); }
.sd-card--orange::before { background: var(--sd-orange); }
.sd-card--amber::before { background: var(--sd-amber); }
.sd-card--navy::before { background: var(--sd-navy); }

/* Split feature block */
.sd-split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 880px) { .sd-split { grid-template-columns: 1fr 1fr; } }
.sd-split--flip .sd-split__media { order: -1; }
@media (max-width: 879px) { .sd-split--flip .sd-split__media { order: 0; } }

.sd-split__media img { border-radius: var(--sd-radius-lg); box-shadow: var(--sd-shadow-lg); }

.sd-checklist { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .85rem; }
.sd-checklist li { display: flex; gap: .8rem; align-items: flex-start; }
.sd-checklist svg { width: 24px; height: 24px; flex: none; color: var(--sd-lime); margin-top: 2px; }

/* Step / how-it-works */
.sd-steps { counter-reset: sd-step; }
.sd-step { position: relative; padding-left: 4.2rem; }
.sd-step::before {
	counter-increment: sd-step; content: counter(sd-step);
	position: absolute; left: 0; top: 0;
	width: 52px; height: 52px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--sd-sky); color: #fff;
	font-family: var(--sd-font-head); font-size: 1.4rem; font-weight: 600;
}
.sd-step:nth-child(2)::before { background: var(--sd-lime); }
.sd-step:nth-child(3)::before { background: var(--sd-orange); }

/* Marquee strip */
.sd-strip {
	position: relative;
	background: linear-gradient(90deg, var(--sd-lime) 0%, #8ad60c 50%, var(--sd-lime) 100%);
	color: var(--sd-navy);
	padding: 1.15rem 0; overflow: hidden;
	font-family: var(--sd-font-head); font-weight: 700;
	font-size: clamp(1.05rem, 2vw, 1.45rem);
	letter-spacing: .06em; text-transform: uppercase;
	border-top: 3px solid var(--sd-navy);
	border-bottom: 3px solid var(--sd-navy);
}

/* Fade the strip into the page edges so words don't hard-cut mid-letter. */
.sd-strip::before,
.sd-strip::after {
	content: ""; position: absolute; top: 0; bottom: 0; width: clamp(40px, 8vw, 120px); z-index: 2;
	pointer-events: none;
}
.sd-strip::before { left: 0; background: linear-gradient(90deg, var(--sd-lime), transparent); }
.sd-strip::after { right: 0; background: linear-gradient(270deg, var(--sd-lime), transparent); }

.sd-strip__track { display: flex; white-space: nowrap; animation: sd-marquee 26s linear infinite; }
.sd-strip__group { display: flex; align-items: center; flex: none; }
.sd-strip__group i { font-style: normal; display: inline-flex; align-items: center; }

/* Each divider is a small disc, cycling through the brand palette. */
.sd-strip__group i::after {
	content: ""; display: inline-block;
	width: .58em; height: .58em; border-radius: 50%;
	margin: 0 1.5rem; vertical-align: middle;
	background: var(--sd-navy);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
}
.sd-strip__group i:nth-child(6n + 1)::after { background: var(--sd-orange); }
.sd-strip__group i:nth-child(6n + 2)::after { background: var(--sd-navy); }
.sd-strip__group i:nth-child(6n + 3)::after { background: #f60360; }
.sd-strip__group i:nth-child(6n + 4)::after { background: var(--sd-sky-dark); }
.sd-strip__group i:nth-child(6n + 5)::after { background: #f91b00; }
.sd-strip__group i:nth-child(6n)::after     { background: #fddb02; }
@keyframes sd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sd-strip__track { animation: none; } }

/* CTA band */
/*
 * A straight sky to navy gradient put white text over #0d9fe4 at the light end,
 * which measures 2.9:1 and fails AA. Navy carries the band now and sky comes
 * back as a corner wash, so the brand look survives while the brightest point
 * a word can land on still holds 5.4:1.
 */
.sd-cta {
	position: relative; overflow: hidden;
	background:
		radial-gradient(680px 420px at 10% 6%, rgba(13, 159, 228, .45), transparent 62%),
		radial-gradient(560px 380px at 94% 98%, rgba(254, 111, 5, .28), transparent 58%),
		linear-gradient(135deg, var(--sd-navy-soft) 0%, var(--sd-navy) 55%, var(--sd-navy-deep) 100%);
	color: #fff; border-radius: var(--sd-radius-lg);
	padding: clamp(2.5rem, 6vw, 4.5rem);
	text-align: center;
}
.sd-cta h2 { color: #fff; }
.sd-cta p { color: #eaf4fd; max-width: 55ch; margin-inline: auto; font-size: 1.1rem; }
.sd-cta__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 1.8rem; }

/*
 * The outline ghost button only reads on the hero's deep navy. On this band it
 * goes solid, which takes "Ask us anything" from roughly 3:1 to 12.9:1 and
 * leaves orange holding the primary action.
 */
.sd-cta .sd-btn--ghost {
	background: #fff; color: var(--sd-navy);
	box-shadow: inset 0 0 0 2px #fff;
}
.sd-cta .sd-btn--ghost:hover {
	background: var(--sd-paper); color: var(--sd-navy-deep);
	box-shadow: inset 0 0 0 2px var(--sd-paper);
}

/* ==========================================================================
   7. WooCommerce, shared
   ========================================================================== */

.woocommerce .sd-wrap > .woocommerce-notices-wrapper:empty { display: none; }

.sd-page-header {
	background: var(--sd-paper);
	border-bottom: 1px solid var(--sd-mist);
	padding: clamp(2.2rem, 5vw, 3.6rem) 0;
	text-align: center;
}
.sd-page-header h1 { margin-bottom: .3rem; }
.sd-page-header p { color: var(--sd-grey); margin: 0; }

.woocommerce-breadcrumb {
	font-size: .9rem; color: var(--sd-grey); margin: 0 0 1.6rem;
}
.woocommerce-breadcrumb a { color: var(--sd-sky-dark); }

.sd-main { padding: clamp(2.5rem, 6vw, 4rem) 0; }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border: 0; border-radius: var(--sd-radius);
	padding: 1.1rem 1.4rem 1.1rem 3.2rem;
	background: var(--sd-paper); color: var(--sd-navy);
	box-shadow: var(--sd-shadow); list-style: none;
	position: relative; margin-bottom: 1.6rem;
	font-weight: 600;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before {
	left: 1.2rem; top: 1.15rem;
}
.woocommerce-message { border-left: 5px solid var(--sd-lime); }
.woocommerce-message::before { color: var(--sd-lime); }
.woocommerce-info { border-left: 5px solid var(--sd-sky); }
.woocommerce-info::before { color: var(--sd-sky); }
.woocommerce-error { border-left: 5px solid var(--sd-orange); background: #fff4ec; }
.woocommerce-error::before { color: var(--sd-orange); }
.woocommerce-message .button, .woocommerce-info .button { padding: .7em 1.5em; font-size: .92rem; }

/* Product loop grid */
.woocommerce ul.products,
ul.products {
	display: grid; gap: 1.6rem; margin: 0 0 2.5rem; padding: 0; list-style: none;
	/* auto-fit (not auto-fill) so leftover tracks collapse instead of leaving
	   a dead column when the row isn't full. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
/* Cap the stretch so three products don't become enormous on a wide screen. */
.woocommerce ul.products.columns-3, ul.products.columns-3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	max-width: 1100px; margin-inline: auto;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product {
	width: auto !important; margin: 0 !important; float: none !important; clear: none !important;
}

.sd-product-card {
	position: relative; display: flex; flex-direction: column; height: 100%;
	background: #fff; border: 1px solid var(--sd-mist); border-radius: var(--sd-radius-lg);
	overflow: hidden; box-shadow: var(--sd-shadow);
	transition: transform .28s var(--sd-ease), box-shadow .28s var(--sd-ease), border-color .28s;
}
.sd-product-card:hover {
	transform: translateY(-4px); box-shadow: var(--sd-shadow-lg); border-color: var(--sd-sky-light);
}
.sd-product-card__media {
	position: relative; display: block; overflow: hidden;
	background: var(--sd-paper); aspect-ratio: 1;
}
.sd-product-card__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .5s var(--sd-ease);
}
.sd-product-card:hover .sd-product-card__media img { transform: scale(1.06); }

.sd-product-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.4rem 1.6rem; }
.sd-product-card__title {
	font-family: var(--sd-font-head); font-size: 1.22rem; font-weight: 600;
	margin: 0 0 .45rem; line-height: 1.25;
}
.sd-product-card__title a { color: var(--sd-navy); }
.sd-product-card__title a:hover { color: var(--sd-sky-dark); }
.sd-product-card__excerpt { font-size: .93rem; color: var(--sd-grey); margin: 0 0 1rem; }
.sd-product-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.sd-product-card .price { margin: 0; }
.sd-product-card .button { padding: .82em 1.5em; font-size: .93rem; }

/* Price */
.woocommerce .price, .woocommerce div.product p.price, .woocommerce div.product span.price {
	font-family: var(--sd-font-head); font-weight: 600; color: var(--sd-orange);
	font-size: 1.3rem;
}
.woocommerce .price del, .woocommerce div.product p.price del {
	color: var(--sd-grey); font-size: .82em; font-weight: 500; opacity: .8; margin-right: .35em;
}
.woocommerce .price ins, .woocommerce div.product p.price ins { text-decoration: none; color: var(--sd-orange); }

/* Badges */
.sd-badge {
	position: absolute; z-index: 3; top: 1rem; left: 1rem;
	display: inline-flex; align-items: center; gap: .3rem;
	padding: .45rem .95rem; border-radius: var(--sd-radius-pill);
	font-family: var(--sd-font-head); font-size: .82rem; font-weight: 600;
	background: var(--sd-lime); color: var(--sd-navy);
	box-shadow: 0 6px 16px rgba(4, 48, 104, .18);
}
.sd-badge--save { background: var(--sd-orange); color: #fff; }
.sd-badge--best { background: var(--sd-amber); color: var(--sd-navy); left: auto; right: 1rem; }
.woocommerce span.onsale { display: none; }

/* Star ratings */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before { color: var(--sd-amber); }
.woocommerce .star-rating { margin: 0 0 .5rem; }

/* ==========================================================================
   8. WooCommerce, single product
   ========================================================================== */

.woocommerce div.product { display: block; }
.sd-single-product { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .sd-single-product { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Woo's core CSS floats these at 48%, which collapses them inside the grid. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	width: 100%; float: none; margin: 0; clear: none;
}

.woocommerce div.product div.images { margin-bottom: 0; }
.woocommerce div.product div.images img { border-radius: var(--sd-radius-lg); box-shadow: var(--sd-shadow); }

/* Static gallery (no FlexSlider): the featured image plus a thumbnail strip. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
	display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none;
	grid-template-columns: repeat(5, 1fr);
}
.woocommerce div.product div.images .woocommerce-product-gallery__image:first-child {
	grid-column: 1 / -1;
}
/* Core sets `.__wrapper .__image:nth-child(n+2){width:25%}`, a longer selector
   than a bare .__image rule, so the wrapper must be named here to win. Inside a
   grid cell that 25% collapsed the thumbnails to a few pixels. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:nth-child(n+2) {
	width: 100%; display: block; float: none;
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image > a {
	display: block; width: 100%;
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img {
	width: 100%;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image:not(:first-child) img {
	border-radius: 14px; box-shadow: none;
	border: 2px solid var(--sd-mist);
	aspect-ratio: 1; object-fit: cover;
	transition: border-color .2s var(--sd-ease), transform .2s var(--sd-ease);
}
.woocommerce div.product div.images .woocommerce-product-gallery__image:not(:first-child) img:hover {
	border-color: var(--sd-sky); transform: translateY(-2px);
}

/* Zoom/lightbox trigger */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	top: 1rem; right: 1rem; z-index: 4;
	background: #fff; border-radius: 50%; box-shadow: var(--sd-shadow);
}

.woocommerce div.product .product_title { margin-bottom: .4rem; }
.woocommerce div.product .woocommerce-product-rating { margin-bottom: 1rem; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--sd-grey); font-size: 1.04rem; }
.woocommerce div.product p.price { font-size: 2rem; margin: 1rem 0 1.4rem; }

.woocommerce div.product form.cart { margin-bottom: 1.8rem; }
/* Stack the variation table so swatches get the full column width instead of
   being squeezed into a narrow value cell. */
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	display: block; width: 100%; padding: 0; border: 0; text-align: left;
}
.woocommerce div.product form.cart .variations { margin-bottom: 1.5rem; }
.woocommerce div.product form.cart .variations tr + tr { margin-top: 1.2rem; }
.woocommerce div.product form.cart .variations th.label,
.woocommerce div.product form.cart .variations th.label label {
	font-family: var(--sd-font-head); color: var(--sd-navy); font-weight: 600;
	font-size: 1rem; margin: 0 0 .6rem;
}
.woocommerce div.product form.cart .reset_variations {
	font-size: .86rem; color: var(--sd-grey); display: inline-block; margin-top: .4rem;
}

/* Selects + inputs */
.woocommerce select, .woocommerce input[type="text"], .woocommerce input[type="email"],
.woocommerce input[type="tel"], .woocommerce input[type="password"], .woocommerce input[type="number"],
.woocommerce textarea, .sd-field input, .sd-field textarea, .sd-field select {
	width: 100%; padding: .85rem 1.05rem;
	font-family: var(--sd-font-body); font-size: 1rem; color: var(--sd-ink);
	background: #fff; border: 2px solid var(--sd-mist); border-radius: 14px;
	transition: border-color .2s, box-shadow .2s;
	appearance: none;
}
.woocommerce select, .sd-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23043068' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px;
	padding-right: 2.8rem;
}
.woocommerce select:focus, .woocommerce input:focus, .woocommerce textarea:focus,
.sd-field input:focus, .sd-field textarea:focus, .sd-field select:focus {
	outline: none; border-color: var(--sd-sky); box-shadow: var(--sd-ring);
}

/* Quantity */
.woocommerce .quantity { display: inline-flex; }
.woocommerce .quantity .qty {
	width: 84px; text-align: center; padding: .85rem .6rem;
	border-radius: 14px; border: 2px solid var(--sd-mist);
	font-family: var(--sd-font-head); font-weight: 600; font-size: 1.05rem;
}
.woocommerce div.product form.cart div.quantity { margin-right: .8rem; float: none; }
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.woocommerce div.product form.cart.variations_form { display: block; }
.woocommerce div.product form.cart .single_add_to_cart_button { flex: none; }

/* Trust row under add-to-cart */
.sd-product-trust {
	display: grid; gap: .8rem; margin: 1.8rem 0 0; padding: 1.4rem 0 0;
	border-top: 1px solid var(--sd-mist); list-style: none;
}
.sd-product-trust li { display: flex; gap: .7rem; align-items: center; font-size: .95rem; color: var(--sd-grey); }
.sd-product-trust svg { width: 22px; height: 22px; color: var(--sd-lime); flex: none; }

.woocommerce div.product .product_meta { font-size: .9rem; color: var(--sd-grey); margin-top: 1.4rem; }
.woocommerce div.product .product_meta > span { display: block; margin-bottom: .3rem; }

/* Tabs */
.woocommerce div.product .woocommerce-tabs { margin-top: clamp(2.5rem, 6vw, 4rem); }
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0; margin: 0 0 1.8rem; display: flex; flex-wrap: wrap; gap: .5rem;
	border-bottom: 2px solid var(--sd-mist);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block; padding: .9rem 1.4rem; margin-bottom: -2px;
	font-family: var(--sd-font-head); font-weight: 600; font-size: 1.02rem;
	color: var(--sd-grey); border-bottom: 3px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--sd-navy); border-bottom-color: var(--sd-orange);
}
.woocommerce div.product .woocommerce-tabs .panel { margin: 0; padding: 0; }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 1.5rem; }

/* Related products */
.woocommerce .related > h2, .woocommerce .up-sells > h2, .woocommerce .cross-sells > h2 {
	text-align: center; margin-bottom: 2rem;
}
.woocommerce section.related, .woocommerce section.up-sells {
	margin-top: clamp(3rem, 7vw, 5rem); padding-top: clamp(2.5rem, 6vw, 4rem);
	border-top: 1px solid var(--sd-mist);
}

/* ==========================================================================
   9. WooCommerce, cart + checkout + account
   ========================================================================== */

.woocommerce table.shop_table {
	border: 1px solid var(--sd-mist); border-radius: var(--sd-radius-lg);
	border-collapse: separate; border-spacing: 0; overflow: hidden;
	background: #fff; box-shadow: var(--sd-shadow);
}
.woocommerce table.shop_table th {
	background: var(--sd-paper); font-family: var(--sd-font-head);
	color: var(--sd-navy); font-weight: 600; padding: 1.1rem 1.2rem; border: 0;
}
.woocommerce table.shop_table td { padding: 1.2rem; border-top: 1px solid var(--sd-mist); }
.woocommerce table.shop_table img { width: 74px; border-radius: 12px; }

.woocommerce a.remove {
	color: var(--sd-orange) !important; font-weight: 400;
	width: 28px; height: 28px; line-height: 26px;
}
.woocommerce a.remove:hover { background: var(--sd-orange); color: #fff !important; }

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce .cart_totals {
	background: var(--sd-paper); border: 1px solid var(--sd-mist);
	border-radius: var(--sd-radius-lg); padding: 1.8rem;
}
.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-checkout h3 { font-size: 1.35rem; }
.woocommerce .cart_totals table.shop_table { box-shadow: none; border: 0; background: transparent; }
.woocommerce .cart_totals table.shop_table th { background: transparent; padding: .8rem 0; }
.woocommerce .cart_totals table.shop_table td { padding: .8rem 0; border-color: var(--sd-mist); }
.woocommerce .cart_totals .order-total .amount { color: var(--sd-orange); font-size: 1.4rem; }

.woocommerce .wc-proceed-to-checkout { padding: 1.2rem 0 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button { display: flex; width: 100%; font-size: 1.1rem; }

.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register {
	border: 1px solid var(--sd-mist); border-radius: var(--sd-radius-lg);
	padding: 1.8rem; background: #fff;
}
.woocommerce form .form-row label { font-weight: 700; color: var(--sd-navy); margin-bottom: .4rem; display: block; }
.woocommerce form .form-row { padding: 0; margin-bottom: 1.1rem; }
.woocommerce .required { color: var(--sd-orange); }

.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods {
	border: 0; padding: 0; margin: 0 0 1.2rem; list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li {
	background: #fff; border: 2px solid var(--sd-mist); border-radius: 14px;
	padding: 1rem 1.2rem; margin-bottom: .7rem;
}
.woocommerce-checkout #payment div.payment_box {
	background: var(--sd-paper); border-radius: 12px; color: var(--sd-grey); font-size: .93rem;
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--sd-paper); }
.woocommerce-checkout #payment #place_order { width: 100%; font-size: 1.12rem; }

.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block; padding: .8rem 1.1rem; border-radius: 12px;
	font-family: var(--sd-font-head); font-weight: 500; color: var(--sd-navy);
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--sd-paper); }
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { background: var(--sd-sky); color: #fff; }

/* Shop toolbar */
.woocommerce .woocommerce-result-count { color: var(--sd-grey); font-size: .95rem; margin: 0; }
.woocommerce .woocommerce-ordering { margin: 0; }
.sd-shop-toolbar {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	flex-wrap: wrap; margin-bottom: 2rem; padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--sd-mist);
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; gap: .4rem; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
	min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
	border-radius: 50%; font-family: var(--sd-font-head); font-weight: 600;
	background: var(--sd-paper); color: var(--sd-navy);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--sd-sky); color: #fff; }

/* ==========================================================================
   10. Contact form
   ========================================================================== */

.sd-contact { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .sd-contact { grid-template-columns: 1fr 1.15fr; } }

.sd-contact__aside {
	background: var(--sd-navy); color: #cfe4f6;
	border-radius: var(--sd-radius-lg); padding: clamp(1.8rem, 4vw, 2.6rem);
	position: relative; overflow: hidden;
}
.sd-contact__aside h2 { color: #fff; }
.sd-contact__aside::after {
	content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%;
	bottom: -150px; right: -110px;
	background: radial-gradient(circle, rgba(13, 159, 228, .5), transparent 65%);
}
.sd-contact-list { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: 1.3rem; position: relative; z-index: 1; }
.sd-contact-list li { display: flex; gap: 1rem; align-items: flex-start; }
.sd-contact-list__icon {
	width: 46px; height: 46px; border-radius: 14px; flex: none;
	display: grid; place-items: center;
	background: rgba(255, 255, 255, .12); color: var(--sd-sky-light);
}
.sd-contact-list__icon svg { width: 22px; height: 22px; }
.sd-contact-list strong { display: block; color: #fff; font-family: var(--sd-font-head); font-weight: 600; }
.sd-contact-list a { color: var(--sd-sky-light); }
.sd-contact-list a:hover { color: var(--sd-amber); }

.sd-form {
	background: #fff; border: 1px solid var(--sd-mist);
	border-radius: var(--sd-radius-lg); padding: clamp(1.6rem, 4vw, 2.4rem);
	box-shadow: var(--sd-shadow);
}
.sd-form__grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .sd-form__grid { grid-template-columns: 1fr 1fr; } }
.sd-field--full { grid-column: 1 / -1; }

.sd-field label {
	display: block; margin-bottom: .45rem;
	font-family: var(--sd-font-head); font-weight: 600; font-size: .96rem; color: var(--sd-navy);
}
.sd-field .sd-req { color: var(--sd-orange); }
.sd-field textarea { min-height: 150px; resize: vertical; }
.sd-field input.sd-invalid, .sd-field textarea.sd-invalid { border-color: var(--sd-orange); }
.sd-field__error { display: none; margin: .35rem 0 0; font-size: .86rem; color: var(--sd-orange); font-weight: 600; }
.sd-field input.sd-invalid ~ .sd-field__error,
.sd-field textarea.sd-invalid ~ .sd-field__error { display: block; }

/* Honeypot, visually removed, still focusable-hidden from AT */
.sd-hp {
	position: absolute !important; left: -9999px; top: auto;
	width: 1px; height: 1px; overflow: hidden;
}

.sd-form__foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; }
.sd-form__note { font-size: .87rem; color: var(--sd-grey); margin: 0; }

.sd-form__status { margin: 1.2rem 0 0; padding: 0; }
.sd-form__status:empty { display: none; }
.sd-form__status .sd-alert {
	display: flex; gap: .7rem; align-items: flex-start;
	padding: 1rem 1.2rem; border-radius: 14px; font-weight: 600; margin: 0;
}
.sd-alert--ok { background: rgba(116, 194, 8, .12); color: #3f6b06; border-left: 5px solid var(--sd-lime); }
.sd-alert--err { background: rgba(254, 111, 5, .10); color: #a24400; border-left: 5px solid var(--sd-orange); }
.sd-alert svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }

.sd-form.is-busy { opacity: .65; pointer-events: none; }

.sd-spinner {
	width: 17px; height: 17px; border-radius: 50%; flex: none;
	border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff;
	animation: sd-rotate .7s linear infinite; display: none;
}
.sd-form.is-busy .sd-spinner { display: inline-block; }
@keyframes sd-rotate { to { transform: rotate(360deg); } }

/* ==========================================================================
   11. Footer
   ========================================================================== */

.sd-footer { background: var(--sd-navy-deep); color: #9fc0dd; padding: clamp(3rem, 7vw, 4.5rem) 0 0; }
.sd-footer a { color: #cfe4f6; }
.sd-footer a:hover { color: var(--sd-amber); }
.sd-footer h4 {
	font-family: var(--sd-font-head); color: #fff; font-size: 1.1rem;
	margin: 0 0 1.1rem; font-weight: 600;
}
.sd-footer__grid {
	display: grid; gap: 2.2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	padding-bottom: 2.8rem;
}
.sd-footer__brand img { max-height: 62px; width: auto; margin-bottom: 1.1rem; }
.sd-footer__brand p { font-size: .95rem; max-width: 34ch; }
.sd-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.sd-footer ul a { font-size: .97rem; }

.sd-social { display: flex; gap: .6rem; margin-top: 1.3rem; }
.sd-social a {
	width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
	background: rgba(255, 255, 255, .09); color: #fff;
	transition: background .2s var(--sd-ease), transform .2s var(--sd-ease);
}
.sd-social a:hover { background: var(--sd-sky); color: #fff; }
.sd-social svg { width: 20px; height: 20px; }

.sd-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, .10);
	padding: 1.4rem 0; display: flex; flex-wrap: wrap; gap: 1rem;
	align-items: center; justify-content: space-between;
	font-size: .89rem;
}
.sd-footer__bar p { margin: 0; }
.sd-footer__entity { display: block; margin-top: .25rem; font-size: .82rem; color: #9fc0dd; }
.sd-payments { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.sd-payments span {
	padding: .35rem .7rem; border-radius: 8px; font-size: .76rem; font-weight: 700;
	background: rgba(255, 255, 255, .09); color: #cfe4f6; letter-spacing: .03em;
}

/* ==========================================================================
   12. Misc pages
   ========================================================================== */

.sd-entry { max-width: 760px; margin-inline: auto; }
.sd-entry img { border-radius: var(--sd-radius); }
.sd-entry h2, .sd-entry h3 { margin-top: 1.8em; }

/* Policy pages */
.sd-legal__meta {
	font-size: .9rem; color: var(--sd-grey);
	text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
.sd-legal__intro {
	font-size: 1.12rem; color: var(--sd-ink);
	padding: 1.3rem 1.5rem; margin-bottom: 2.5rem;
	background: var(--sd-paper); border-radius: var(--sd-radius);
	border-left: 5px solid var(--sd-sky);
}
.sd-legal h2 {
	font-size: 1.5rem;
	padding-top: 1.6rem; border-top: 2px solid var(--sd-mist);
}
.sd-legal h3 { font-size: 1.14rem; margin-top: 1.5em; }
.sd-legal ul, .sd-legal ol { padding-left: 1.3rem; margin-bottom: 1.2rem; }
.sd-legal li { margin-bottom: .55rem; }

/* Wide policy tables scroll inside themselves rather than the page. */
.sd-legal__table {
	display: block; overflow-x: auto;
	width: 100%; margin: 0 0 1.6rem; border-collapse: collapse;
	font-size: .96rem;
}
.sd-legal__table th, .sd-legal__table td {
	padding: .8rem 1rem; text-align: left; vertical-align: top;
	border-bottom: 1px solid var(--sd-mist);
}
.sd-legal__table thead th {
	background: var(--sd-navy); color: #fff;
	font-family: var(--sd-font-head); font-weight: 600;
	border-bottom: 0; white-space: nowrap;
}
.sd-legal__table tbody th {
	background: var(--sd-paper); color: var(--sd-navy);
	font-weight: 700; white-space: nowrap;
}
.sd-legal__table thead th:first-child { border-top-left-radius: var(--sd-radius); }
.sd-legal__table thead th:last-child  { border-top-right-radius: var(--sd-radius); }

/*
 * Placeholders that must be filled before this page is fit to publish. Loud on
 * purpose, so an unfinished policy cannot quietly go live looking finished.
 */
.sd-todo {
	background: #fff3c4; color: #7a4b00;
	padding: .12em .5em; border-radius: 6px;
	font-weight: 700; box-shadow: inset 0 0 0 2px #f0c14b;
}

.sd-404 { text-align: center; padding: clamp(3rem, 9vw, 6rem) 0; }
.sd-404 .sd-404__code {
	font-family: var(--sd-font-head); font-size: clamp(5rem, 18vw, 10rem);
	line-height: 1; color: var(--sd-sky); margin: 0;
}

/* ==========================================================================
   13. Colour swatches
   ========================================================================== */

/* Home page colour showcase */
.sd-swatch-row {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 4vw, 3rem);
	justify-content: center;
}
.sd-swatch-item { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.sd-swatch-item__dot {
	width: clamp(84px, 13vw, 124px); aspect-ratio: 1; border-radius: 50%;
	background: var(--dot);
	box-shadow: 0 0 0 6px #fff, 0 0 0 8px var(--sd-mist), 0 16px 32px rgba(4, 48, 104, .16);
	transition: transform .3s var(--sd-ease);
}
.sd-swatch-item:hover .sd-swatch-item__dot { transform: translateY(-6px) scale(1.04); }
.sd-swatch-item strong {
	font-family: var(--sd-font-head); font-weight: 600; color: var(--sd-navy); font-size: 1rem;
}

/* Variation swatches on the product page */
.sd-swatches { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: .3rem; }
.sd-swatch {
	width: 48px; height: 48px; padding: 4px; cursor: pointer;
	background: #fff; border: 2px solid var(--sd-mist); border-radius: 50%;
	transition: border-color .2s var(--sd-ease), transform .2s var(--sd-ease), box-shadow .2s;
}
.sd-swatch__dot { display: block; width: 100%; height: 100%; border-radius: 50%; }
.sd-swatch:hover { border-color: var(--sd-sky-light); }
.sd-swatch[aria-pressed="true"] {
	border-color: var(--sd-navy);
	box-shadow: 0 0 0 3px rgba(4, 48, 104, .12);
}
/* Sold out: fade only the colour dot so the strike-through stays legible. */
.sd-swatch:disabled { cursor: not-allowed; transform: none; border-color: var(--sd-mist); background: var(--sd-paper); }
.sd-swatch:disabled .sd-swatch__dot { opacity: .25; }
.sd-swatch:disabled:hover { transform: none; border-color: var(--sd-mist); }

/* The native select stays in the DOM for WooCommerce, hidden from view but
   reachable by keyboard users who tab to it. */
.sd-select-hidden {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   13b. WooCommerce Cart & Checkout blocks
   --------------------------------------------------------------------------
   Woo 11 ships the React-based cart/checkout by default. These pages use
   wc-block-* class names rather than the classic markup styled above, so the
   brand is reapplied here instead of downgrading to the legacy shortcodes.
   ========================================================================== */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout { max-width: 100%; margin-inline: 0; }

/* Buttons */
.wc-block-components-button:not(.is-link) {
	font-family: var(--sd-font-head); font-weight: 600;
	border-radius: var(--sd-radius-pill); border: 0;
	background: var(--sd-orange); color: #fff;
	padding: .9em 1.8em; min-height: 0;
	box-shadow: none;
	transition: background-color .18s var(--sd-ease);
}
.wc-block-components-button:not(.is-link):hover:not(:disabled) {
	background: var(--sd-orange-dark); color: #fff;
	transform: none; box-shadow: none;
}
.wc-block-components-button:not(.is-link):active:not(:disabled) {
	background: #c85400; transform: none; box-shadow: none;
}
.wc-block-components-button:not(.is-link):disabled {
	background: var(--sd-mist); color: var(--sd-grey); opacity: 1; transform: none;
}
.wc-block-components-button.is-link { color: var(--sd-sky-dark); }

/* Headings + type */
.wc-block-components-title,
.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-checkout h2 {
	font-family: var(--sd-font-head); color: var(--sd-navy); font-weight: 600;
}
.wc-block-components-product-name { color: var(--sd-navy); font-weight: 700; }
.wc-block-components-product-name:hover { color: var(--sd-sky-dark); }

/* Money */
.wc-block-components-formatted-money-amount,
.wc-block-components-product-price__value {
	font-family: var(--sd-font-head); font-weight: 600; color: var(--sd-navy);
}
.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount {
	color: var(--sd-orange); font-size: 1.35rem;
}
.wc-block-components-product-price__regular { color: var(--sd-grey); opacity: .8; }

/* Sidebar / totals panel */
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar,
.wp-block-woocommerce-checkout-order-summary-block {
	background: var(--sd-paper);
	border: 1px solid var(--sd-mist);
	border-radius: var(--sd-radius-lg);
	padding: 1.6rem;
}

/* Inputs */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-block-components-select__container {
	border: 2px solid var(--sd-mist); border-radius: 14px;
	font-family: var(--sd-font-body);
}
.wc-block-components-text-input.is-active input:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus {
	outline: none; border-color: var(--sd-sky); box-shadow: var(--sd-ring);
}
.wc-block-components-text-input label { font-family: var(--sd-font-body); }

/* Quantity stepper */
.wc-block-components-quantity-selector {
	border: 2px solid var(--sd-mist); border-radius: var(--sd-radius-pill);
}
.wc-block-components-quantity-selector::after { content: none; }
.wc-block-components-quantity-selector__button { color: var(--sd-navy); font-weight: 700; }
.wc-block-components-quantity-selector__input {
	font-family: var(--sd-font-head); font-weight: 600; color: var(--sd-navy);
}

/* Cart line items */
.wc-block-cart-items__row { border-bottom: 1px solid var(--sd-mist); }
.wc-block-cart-item__image img { border-radius: 14px; }
.wc-block-cart-item__remove-link { color: var(--sd-grey); }
.wc-block-cart-item__remove-link:hover { color: var(--sd-orange); }
.wc-block-components-product-badge {
	border-radius: var(--sd-radius-pill); border-color: var(--sd-lime); color: var(--sd-lime-dark);
}

/* Radios (shipping + payment) */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	border-radius: 14px;
}
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option:has(input:checked) {
	border-color: var(--sd-sky); box-shadow: 0 0 0 1px var(--sd-sky);
}

/* Notices */
.wc-block-components-notice-banner {
	border-radius: var(--sd-radius); font-family: var(--sd-font-body);
}
.wc-block-components-notice-banner.is-success { border-left-color: var(--sd-lime); }
.wc-block-components-notice-banner.is-error { border-left-color: var(--sd-orange); }
.wc-block-components-notice-banner.is-info { border-left-color: var(--sd-sky); }

/* Panels + steps */
.wc-block-components-checkout-step__heading-content,
.wc-block-components-checkout-step__description { color: var(--sd-grey); }
.wc-block-components-checkout-step__title {
	font-family: var(--sd-font-head); color: var(--sd-navy);
}

/* Empty cart */
.wp-block-woocommerce-empty-cart-block { text-align: center; }

/* ==========================================================================
   13c. Pack colour pickers
   ========================================================================== */

.sd-pack-picker {
	margin: 0 0 1.6rem;
	padding: 1.3rem 1.4rem;
	background: var(--sd-paper);
	border: 2px solid var(--sd-mist);
	border-radius: var(--sd-radius-lg);
	transition: border-color .2s var(--sd-ease);
}
.sd-pack-picker.is-invalid { border-color: var(--sd-orange); }

.sd-pack-picker__intro {
	margin: 0 0 1.1rem;
	font-size: .95rem;
	color: var(--sd-grey);
}

.sd-pack-picker__row + .sd-pack-picker__row {
	margin-top: 1.1rem;
	padding-top: 1.1rem;
	border-top: 1px dashed var(--sd-mist);
}
.sd-pack-picker__row label {
	display: block; margin-bottom: .55rem;
	font-family: var(--sd-font-head); font-weight: 600; color: var(--sd-navy);
}
.sd-pack-picker__row.is-missing label { color: var(--sd-orange); }
.sd-pack-picker__row.is-missing .sd-swatch { border-color: rgba(254, 111, 5, .45); }

.sd-pack-picker .sd-swatches { margin-bottom: 0; }

/* Sold-out colours get a solid diagonal strike across the swatch. */
.sd-swatch:disabled { position: relative; overflow: hidden; }
.sd-swatch:disabled::after {
	content: ""; position: absolute;
	left: 50%; top: 50%; width: 132%; height: 3px;
	margin: -1.5px 0 0 -66%;
	background: var(--sd-navy); opacity: .55;
	transform: rotate(-45deg);
}

/* Stock line on pack pages */
.woocommerce div.product p.stock.in-stock { color: var(--sd-lime-dark); font-weight: 700; }
.woocommerce div.product p.stock.out-of-stock { color: var(--sd-orange); font-weight: 700; }

/* ==========================================================================
   14. Widgets + misc
   ========================================================================== */

.sd-widget { margin-bottom: 2rem; }
.sd-widget__title { font-size: 1.1rem; margin-bottom: .9rem; }
.sd-widget ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }

.sd-pagelinks { margin-top: 1.5rem; font-weight: 700; }

.pagination, .nav-links {
	display: flex; gap: .4rem; justify-content: center; margin-top: 2.5rem; flex-wrap: wrap;
}
.pagination .page-numbers, .nav-links .page-numbers {
	min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0 .6rem;
	border-radius: var(--sd-radius-pill); background: var(--sd-paper); color: var(--sd-navy);
	font-family: var(--sd-font-head); font-weight: 600;
}
.pagination .page-numbers.current, .nav-links .page-numbers:hover {
	background: var(--sd-sky); color: #fff;
}

/* Utilities */
.sd-center { text-align: center; }
.sd-mt-0 { margin-top: 0; }
.sd-mb-0 { margin-bottom: 0; }
.sd-stack > * + * { margin-top: 1rem; }

/* ==========================================================================
   15. Motion
   ========================================================================== */

/*
 * Reveal states only exist once main.js has confirmed IntersectionObserver is
 * available and that the visitor has not asked for reduced motion. Without the
 * sd-reveal-on class on the root the page renders fully visible, so a no-JS
 * visitor never lands on a page of invisible elements.
 */
.sd-reveal-on .sd-reveal {
	opacity: 0;
	transform: translateY(18px);
}
.sd-reveal-on .sd-reveal.is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity .55s var(--sd-ease) var(--sd-reveal-delay, 0ms),
		transform .55s var(--sd-ease) var(--sd-reveal-delay, 0ms);
}

/* The disc breathes just enough to read as alive without pulling focus. */
.sd-hero__visual { animation: sd-float 7s ease-in-out infinite; }
@keyframes sd-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}

/*
 * Pointer parallax lands on the image so it composes with the float on the
 * wrapper instead of the two fighting over one transform.
 */
.sd-hero__visual img {
	transform: translate3d(var(--sd-par-x, 0px), var(--sd-par-y, 0px), 0);
	transition: transform .5s var(--sd-ease);
}
.sd-hero__visual.is-tracking img { transition: transform .15s linear; }

/* The counter reacts when a fragment refresh brings a higher number in. */
@keyframes sd-bump {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.4); }
	100% { transform: scale(1); }
}
.sd-cart__count.is-bumped { animation: sd-bump .45s var(--sd-ease); }

@media (prefers-reduced-motion: reduce) {
	.sd-hero__visual { animation: none; }
	.sd-hero__visual img { transform: none; transition: none; }
	.sd-cart__count.is-bumped { animation: none; }
}