/* =========================================================================
   SuperDeal — main stylesheet
   Tokens follow 设计定调.md. Rules held here on purpose:
   - zero box-shadows anywhere; depth comes from 1px borders and ground tones
   - exactly two radii: 4px (components) and 999px (pills)
   - green is reserved for "this button buys it"
   ========================================================================= */

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Variable.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* Metric-matched fallback. Without it the swap from the system font to Inter
   re-measures every line and shifts the header: measured one 0.0136 layout
   shift at t=1085ms with sources FORM.sd-search / SELECT.orderby / LI.menu-item.
   These overrides make the fallback occupy Inter's exact box, so the swap is
   invisible and CLS returns to 0. */
@font-face {
	font-family: 'Inter Fallback';
	src: local('Arial');
	size-adjust: 107%;
	ascent-override: 90%;
	descent-override: 22.43%;
	line-gap-override: 0%;
}

:root {
	--sd-orange: #ff5a1f;
	--sd-orange-dark: #e2430c;
	/* Text step of the same hue. --sd-orange-dark measures only 3.80–3.82:1 as
	   text on the light grounds (#f5f5f5 / #fff2ec); this measures 4.90–4.92:1.
	   Needed because audit.js only contrast-checks leaf elements, so every label
	   that carries an inline icon escapes its check — these four all did. */
	--sd-orange-text: #c63505;
	--sd-red: #e02020;
	/* White on #16a34a measured 3.30:1 — under AA. #12833c measures 4.84:1
	   and was already the system's dark green, so it becomes the base. */
	--sd-green: #12833c;
	--sd-green-dark: #0f6e32;

	--sd-ink: #111827;
	--sd-ink-2: #4b5563;
	/* #9ca3af measured 2.54:1 on white — too light for real text. Same third
	   rung, corrected so it clears AA on BOTH grounds the theme uses:
	   5.18:1 on #fff, 4.75:1 on the #f5f5f5 page ground. */
	--sd-ink-3: #646e7a;
	--sd-line: #e5e7eb;
	--sd-ground: #f5f5f5;
	--sd-white: #fff;

	--sd-wrap: 1280px;
	--sd-wrap-tight: 1080px;
	--sd-wrap-narrow: 680px;

	--sd-r: 4px;
	--sd-pill: 999px;

	--sd-font: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

	--sd-header-h: 60px;
	--sd-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------------------------------
   Reset / base
   ---------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; font-family: var(--sd-font); }

body {
	margin: 0;
	font-family: var(--sd-font);
	font-size: 13px;
	line-height: 1.55;
	color: var(--sd-ink);
	background: var(--sd-ground);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
/* Form controls do not inherit the font by default: without this, plugin-rendered
   inputs and selects fall back to Arial and break the single-family rule. */
button,
input,
select,
textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
	outline: 3px solid var(--sd-orange);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.sd-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--sd-ink);
	color: #fff;
	padding: 12px 18px;
	font-weight: 700;
}
.sd-skip:focus { left: 8px; top: 8px; }

.sd-wrap {
	width: 100%;
	max-width: var(--sd-wrap);
	margin-inline: auto;
	padding-inline: 16px;
}
.sd-wrap--tight { max-width: var(--sd-wrap-tight); }
.sd-wrap--narrow { max-width: var(--sd-wrap-narrow); }

.sd-page { background: var(--sd-ground); }
.sd-main { display: block; min-height: 40vh; }

.sd-h1 { font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.sd-h2 {
	font-size: 22px;
	font-weight: 800;
	display: flex;
	align-items: center;
	gap: 8px;
	letter-spacing: -0.015em;
}

.sd-icon { display: block; flex: none; }

/* -------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */

.sd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 12px 22px;
	border: 0;
	border-radius: var(--sd-r);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.01em;
	cursor: pointer;
	background: var(--sd-ink);
	color: #fff;
	transition: background 0.15s var(--sd-ease), transform 0.12s var(--sd-ease);
}
.sd-btn:hover { background: #000; }
.sd-btn:active { transform: translateY(1px); }

/* Green means: pressing this buys the thing. Used nowhere else. */
.sd-btn--buy { background: var(--sd-green); color: #fff; }
.sd-btn--buy:hover { background: var(--sd-green-dark); }
.sd-btn--block { width: 100%; }

.sd-iconbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	background: transparent;
	border: 0;
	border-radius: var(--sd-r);
	cursor: pointer;
	color: var(--sd-ink);
}
.sd-iconbtn:hover { background: rgba(17, 24, 39, 0.06); }

.sd-cart-count {
	position: absolute;
	top: 2px; right: 0;
	min-width: 17px; height: 17px;
	padding: 0 4px;
	border-radius: var(--sd-pill);
	background: var(--sd-red);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	line-height: 17px;
	text-align: center;
}
.sd-cart-count.is-empty { display: none; }

/* -------------------------------------------------------------------------
   Top bars
   ---------------------------------------------------------------------- */

.sd-topbar {
	background: var(--sd-ink);
	color: #fff;
	font-size: 11px;
	letter-spacing: 0.02em;
}
.sd-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	min-height: 32px;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
}
.sd-topbar__inner::-webkit-scrollbar { display: none; }
.sd-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	opacity: 0.92;
	scroll-snap-align: start;
}

.sd-promo {
	background: var(--sd-orange);
	color: var(--sd-ink);
}
.sd-promo__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 36px;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: center;
}
.sd-promo__clock {
	font-variant-numeric: tabular-nums;
	background: var(--sd-ink);
	color: #fff;
	border-radius: var(--sd-r);
	padding: 2px 8px;
}

/* -------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------- */

.sd-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: #fff;
	border-bottom: 1px solid var(--sd-line);
}
.sd-header__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: var(--sd-header-h);
}
.sd-header__brand { flex: none; }

.sd-logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 900;
	letter-spacing: -0.03em;
}
.sd-logo { transition: opacity 0.15s var(--sd-ease); }
.sd-logo:hover { opacity: 0.78; }
.sd-logo__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	border-radius: var(--sd-r);
	background: var(--sd-orange);
	color: #fff;
}
.custom-logo { max-height: 40px; width: auto; }

.sd-search {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	max-width: 560px;
	border: 2px solid var(--sd-ink);
	border-radius: var(--sd-r);
	background: #fff;
	overflow: hidden;
}
.sd-search__field {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	padding: 9px 12px;
	font-size: 13px;
	font-family: inherit;
	background: transparent;
}
.sd-search__field:focus { outline: none; }
.sd-search__submit {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	align-self: stretch;
	border: 0;
	background: var(--sd-ink);
	color: #fff;
	cursor: pointer;
}
.sd-search__submit:hover { background: var(--sd-orange); }

.sd-header__actions {
	flex: none;
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: auto;
}

.sd-catnav {
	border-top: 1px solid var(--sd-line);
	background: #fff;
}
.sd-catnav__list {
	display: flex;
	align-items: center;
	gap: 22px;
	overflow-x: auto;
	scrollbar-width: none;
	min-height: 40px;
}
.sd-catnav__list::-webkit-scrollbar { display: none; }
.sd-catnav__list > li > a {
	display: inline-block;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 600;
	color: var(--sd-ink-2);
	padding: 10px 0;
	border-bottom: 2px solid transparent;
}
.sd-catnav__list > li > a:hover,
.sd-catnav__list > li.current-menu-item > a {
	color: var(--sd-ink);
	border-bottom-color: var(--sd-orange);
}

/* -------------------------------------------------------------------------
   Drawer
   ---------------------------------------------------------------------- */

.sd-drawer { position: fixed; inset: 0; z-index: 200; }
.sd-drawer[hidden] { display: none; }
.sd-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(17, 24, 39, 0.5);
	opacity: 0;
	transition: opacity 0.22s var(--sd-ease);
}
.sd-drawer.is-open .sd-drawer__scrim { opacity: 1; }

.sd-drawer__panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: min(360px, 88vw);
	background: #fff;
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform 0.26s var(--sd-ease);
	border-left: 1px solid var(--sd-line);
}
.sd-drawer.is-open .sd-drawer__panel { transform: translateX(0); }

.sd-drawer__head {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 10px 10px 18px;
	background: #fff;
	border-bottom: 1px solid var(--sd-line);
}
.sd-drawer__title { font-size: 15px; font-weight: 800; }

.sd-drawer__cart {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	background: var(--sd-green);
	color: #fff;
	font-weight: 800;
	font-size: 15px;
}
.sd-drawer__cart:hover { background: var(--sd-green-dark); }
.sd-drawer__cart-label { flex: 1 1 auto; }
.sd-drawer__cart-count {
	min-width: 22px;
	padding: 1px 7px;
	border-radius: var(--sd-pill);
	background: rgba(0, 0, 0, 0.22);
	font-size: 11px;
	text-align: center;
}

.sd-drawer__heading {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sd-ink-3);
	padding: 18px 18px 8px;
	margin: 0;
}
.sd-drawer__list > li { border-bottom: 1px solid var(--sd-line); }
.sd-drawer__list > li > a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 18px;
	font-size: 15px;
	font-weight: 600;
}
.sd-drawer__list > li > a:hover { background: var(--sd-ground); }
.sd-drawer__catimg {
	width: 38px; height: 38px;
	border-radius: var(--sd-r);
	object-fit: cover;
	background: var(--sd-ground);
}
.sd-drawer__catname { flex: 1 1 auto; }
.sd-drawer__catnum { color: var(--sd-ink-3); font-size: 11px; font-weight: 600; }

.sd-drawer__pagelist > li > a,
.sd-drawer__contactlist > li > a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px;
	font-size: 15px;
	font-weight: 600;
	border-bottom: 1px solid var(--sd-line);
}
.sd-drawer__pagelist > li > a:hover,
.sd-drawer__contactlist > li > a:hover { background: var(--sd-ground); }
.sd-drawer__contact { padding-bottom: 30px; }

/* -------------------------------------------------------------------------
   Hero — one protagonist per screen
   ---------------------------------------------------------------------- */

.sd-hero { background: #fff; border-bottom: 1px solid var(--sd-line); }
.sd-hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 32px;
	align-items: center;
	padding-block: 40px;
}
.sd-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 14px;
	padding: 4px 10px;
	border-radius: var(--sd-pill);
	background: #fff2ec;
	color: var(--sd-orange-text);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.sd-hero__title {
	font-size: 44px;
	font-weight: 900;
	letter-spacing: -0.035em;
	margin-bottom: 14px;
}
.sd-hero__text {
	font-size: 15px;
	color: var(--sd-ink-2);
	max-width: 46ch;
	margin-bottom: 22px;
}
.sd-hero__cta { padding-inline: 28px; min-height: 50px; font-size: 15px; }
.sd-hero__clock {
	margin: 16px 0 0;
	font-size: 11px;
	font-weight: 700;
	color: var(--sd-ink-2);
	display: flex;
	align-items: center;
	gap: 8px;
}

.sd-hero__product {
	display: block;
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r);
	background: #fff;
	overflow: hidden;
}
.sd-hero__media { position: relative; aspect-ratio: 4 / 3; background: var(--sd-ground); }
.sd-hero__img { width: 100%; height: 100%; object-fit: cover; }
.sd-hero__prodmeta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 14px;
	border-top: 1px solid var(--sd-line);
}
.sd-hero__prodname { font-size: 13px; font-weight: 700; }
.sd-hero__prodprice { display: flex; align-items: baseline; gap: 7px; flex: none; }

/* -------------------------------------------------------------------------
   Price + signature "slam"
   ---------------------------------------------------------------------- */

.sd-price,
.sd-price .amount {
	color: var(--sd-red);
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}
.sd-price { font-size: 18px; }
.sd-price__was,
.sd-price__was .amount {
	color: var(--sd-ink-3);
	font-size: 11px;
	font-weight: 600;
	text-decoration: line-through;
}

/* The one signature move: the price drops in and the block takes the hit. */
/* Amplitude picked from the measured RMS curve, not by feel:
   scaleX 1.03 = RMS 37.0 (1.055 was 48.2, reading as the text resizing);
   translateY -8px = RMS 59.7 (-14px was 65.5, nearly half a line-height).
   See 设计定调.md for the full sweep and why the sheen rubric does not apply. */
@keyframes sd-slam {
	0%   { transform: translateY(-8px) scaleX(1);    opacity: 0; }
	55%  { transform: translateY(0)    scaleX(1);    opacity: 1; }
	72%  { transform: translateY(0)    scaleX(1.03); }
	100% { transform: translateY(0)    scaleX(1); }
}
@keyframes sd-strike {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}

.js-slam { transform-origin: left center; }
.js-slam.is-slammed { animation: sd-slam 0.52s var(--sd-ease) both; }
.js-slam.is-slammed .sd-price__was { animation: sd-strike 0.34s var(--sd-ease) 0.3s both; }

/* -------------------------------------------------------------------------
   Category rail
   ---------------------------------------------------------------------- */

.sd-cats { padding-block: 30px 8px; }
.sd-cats__rail {
	overflow-x: auto;
	scrollbar-width: none;
	padding-block: 16px 4px;
}
.sd-cats__rail::-webkit-scrollbar { display: none; }
.sd-cats__list {
	display: flex;
	gap: 10px;
	width: max-content;
	max-width: none;
	padding-inline: max(16px, calc((100vw - var(--sd-wrap)) / 2 + 16px));
}
.sd-cats__item > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 116px;
	padding: 14px 8px;
	background: #fff;
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r);
	text-align: center;
	transition: border-color 0.15s var(--sd-ease), transform 0.15s var(--sd-ease);
}
.sd-cats__item > a:hover {
	border-color: var(--sd-orange);
	transform: translateY(-2px);
}
.sd-cats__media {
	width: 60px; height: 60px;
	border-radius: var(--sd-pill);
	overflow: hidden;
	background: var(--sd-ground);
	display: block;
}
.sd-cats__media img { width: 100%; height: 100%; object-fit: cover; }
.sd-cats__name { font-size: 11px; font-weight: 700; line-height: 1.3; }
.sd-cats__num { font-size: 11px; color: var(--sd-ink-3); font-weight: 600; }

/* -------------------------------------------------------------------------
   Section heads
   ---------------------------------------------------------------------- */

.sd-sechead {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-block: 22px 14px;
	flex-wrap: wrap;
}
.sd-sechead--flash .sd-h2 { color: var(--sd-orange-text); }
.sd-sechead__clock {
	font-size: 13px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	background: var(--sd-ink);
	color: #fff;
	padding: 3px 9px;
	border-radius: var(--sd-r);
}
.sd-sechead__all {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 13px;
	font-weight: 700;
	color: var(--sd-orange-text);
}
.sd-sechead__all:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   Product grid — packed, no shadows, hairline separated
   ---------------------------------------------------------------------- */

.sd-deals, .sd-best { padding-bottom: 34px; }

ul.products {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0;
	background: #fff;
	border-top: 1px solid var(--sd-line);
	border-left: 1px solid var(--sd-line);
	border-radius: var(--sd-r);
	overflow: hidden;
	margin: 0;
	padding: 0;
}
ul.products.sd-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Separators live on the cards, so a short final row leaves plain white space
   rather than a grey ghost cell where no product exists. */
ul.products > li.product {
	display: block;
	background: #fff;
	margin: 0;
	padding: 0;
	width: auto;
	float: none;
	border-right: 1px solid var(--sd-line);
	border-bottom: 1px solid var(--sd-line);
}

.sd-card { display: flex; flex-direction: column; height: 100%; background: #fff; }
.sd-card:hover .sd-card__title { color: var(--sd-orange-text); }

.sd-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--sd-ground);
	overflow: hidden;
}
.sd-card__img { width: 100%; height: 100%; object-fit: cover; }
.sd-card__img--empty {
	display: block;
	width: 100%; height: 100%;
	background: repeating-linear-gradient(45deg, #efefef 0 10px, #e7e7e7 10px 20px);
}

/* Cut-corner tag at top right — deliberately not the left-corner red square
   every comparable store uses. */
.sd-tag {
	position: absolute;
	top: 0; right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	min-width: 46px;
	padding: 5px 7px 6px;
	background: var(--sd-red);
	color: #fff;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.sd-tag b { font-size: 15px; font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.sd-tag i { font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 0.1em; opacity: 0.9; }
.sd-tag--lg { min-width: 68px; padding: 9px 12px 11px; }
.sd-tag--lg b { font-size: 22px; }
.sd-tag--lg i { font-size: 10px; }

.sd-card__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 10px 11px 12px;
	flex: 1 1 auto;
}
.sd-card__title {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
	transition: color 0.15s var(--sd-ease);
}
.sd-card__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: auto;
}
.sd-card__rating { white-space: nowrap; overflow: hidden; }
.sd-card__sold { margin: 0; font-size: 11px; color: var(--sd-ink-3); }
.sd-card__sold b { color: var(--sd-ink-2); font-weight: 700; }

/* Stars */
.sd-stars {
	position: relative;
	display: inline-block;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 1px;
	vertical-align: -1px;
}
.sd-stars__track { color: var(--sd-line); }
/* #ffa41c measured 1.99:1 on white. The brand orange-dark measures 4.17:1
   and keeps the palette to two warm hues instead of adding a gold. */
.sd-stars__fill {
	position: absolute;
	top: 0; left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--sd-orange-dark);
}
.sd-stars__text {
	margin-left: 5px;
	font-size: 11px;
	font-weight: 700;
	color: var(--sd-ink-2);
}

/* -------------------------------------------------------------------------
   Dark stat strip
   ---------------------------------------------------------------------- */

.sd-strip { background: var(--sd-ink); color: #fff; }
.sd-strip__inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	padding-block: 30px;
}
.sd-strip__item strong {
	display: block;
	font-size: 32px;
	font-weight: 900;
	letter-spacing: -0.03em;
	color: var(--sd-orange);
	margin-bottom: 4px;
}
.sd-strip__item span { font-size: 13px; color: rgba(255, 255, 255, 0.75); }

/* -------------------------------------------------------------------------
   Product detail page
   ---------------------------------------------------------------------- */

.sd-woo { padding-block: 0 40px; }
.sd-archive__head { padding-block: 24px 4px; }
.sd-archive__count { font-size: 11px; color: var(--sd-ink-3); font-weight: 600; margin: 0 0 16px; }
.sd-archive__desc { max-width: 62ch; color: var(--sd-ink-2); }

/* Sorting control: kept (it is genuinely useful on a 60-product shop) but
   styled into the theme instead of left as a raw browser select. */
.sd-woo .woocommerce-ordering {
	max-width: var(--sd-wrap-tight);
	margin: 0 auto 16px;
	padding-inline: 16px;
	display: flex;
	justify-content: flex-end;
}
.sd-woo .woocommerce-ordering select {
	min-height: 40px;
	padding: 8px 12px;
	border: 2px solid var(--sd-line);
	border-radius: var(--sd-r);
	background: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--sd-ink);
	cursor: pointer;
}
.sd-woo .woocommerce-ordering select:focus { border-color: var(--sd-orange); outline: none; }
@media (max-width: 720px) {
	.sd-woo .woocommerce-ordering { justify-content: stretch; }
	.sd-woo .woocommerce-ordering select { width: 100%; }
}
.sd-woo .woocommerce-notices-wrapper { max-width: var(--sd-wrap-tight); margin-inline: auto; padding-inline: 16px; }

.sd-woo--pdp .product {
	max-width: var(--sd-wrap-tight);
	margin-inline: auto;
	padding: 0 16px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 34px;
	align-items: start;
}
.sd-woo--pdp .product > .sd-story,
.sd-woo--pdp .product > .sd-specs,
.sd-woo--pdp .product > .sd-reviews,
.sd-woo--pdp .product > .related,
.sd-woo--pdp .product > #reviews,
.sd-woo--pdp .product > .woocommerce-tabs { grid-column: 1 / -1; }

/* Gallery — WooCommerce FlexSlider restyled, never replaced. */
.sd-woo--pdp .woocommerce-product-gallery {
	position: relative;
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r);
	background: #fff;
	overflow: hidden;
	margin-top: 24px;
}
.sd-woo--pdp .woocommerce-product-gallery__wrapper { margin: 0; }
.sd-woo--pdp .woocommerce-product-gallery--without-images {
	aspect-ratio: 1 / 1;
	background: repeating-linear-gradient(45deg, #efefef 0 10px, #e7e7e7 10px 20px);
}
.sd-woo--pdp .woocommerce-product-gallery__image { aspect-ratio: 1 / 1; }
.sd-woo--pdp .woocommerce-product-gallery__image img { width: 100%; height: 100%; object-fit: cover; }
.sd-woo--pdp .flex-control-thumbs {
	display: flex;
	gap: 8px;
	padding: 10px;
	margin: 0;
	border-top: 1px solid var(--sd-line);
	overflow-x: auto;
	scrollbar-width: none;
}
.sd-woo--pdp .flex-control-thumbs::-webkit-scrollbar { display: none; }
.sd-woo--pdp .flex-control-thumbs li { width: 62px; flex: none; }
.sd-woo--pdp .flex-control-thumbs img {
	width: 62px; height: 62px;
	object-fit: cover;
	border: 2px solid transparent;
	border-radius: var(--sd-r);
	cursor: pointer;
	opacity: 0.65;
}
.sd-woo--pdp .flex-control-thumbs img.flex-active,
.sd-woo--pdp .flex-control-thumbs img:hover { opacity: 1; border-color: var(--sd-orange); }

.sd-woo--pdp .flex-direction-nav { margin: 0; }
.sd-woo--pdp .flex-direction-nav a {
	position: absolute;
	top: calc(50% - 40px);
	width: 38px; height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-pill);
	color: var(--sd-ink);
	font-size: 0;
	z-index: 3;
	text-indent: 0;
	opacity: 1;
}
.sd-woo--pdp .flex-direction-nav a::before {
	font-size: 18px;
	font-weight: 900;
	line-height: 1;
	font-family: inherit;
}
.sd-woo--pdp .flex-direction-nav .flex-prev { left: 10px; }
.sd-woo--pdp .flex-direction-nav .flex-prev::before { content: '‹'; }
.sd-woo--pdp .flex-direction-nav .flex-next { right: 10px; }
.sd-woo--pdp .flex-direction-nav .flex-next::before { content: '›'; }
.sd-woo--pdp .flex-direction-nav a:hover { background: #fff; border-color: var(--sd-orange); }
/* One image only: no dead arrows, no empty thumbnail rail. */
.sd-woo--pdp .woocommerce-product-gallery--columns-1 .flex-direction-nav,
.sd-woo--pdp .woocommerce-product-gallery--columns-1 .flex-control-thumbs { display: none; }

.sd-woo--pdp .summary { margin: 0; padding-top: 24px; width: auto; float: none; }

.sd-pdp__title {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	margin-bottom: 8px;
}
.sd-pdp__rating { margin-bottom: 14px; }
.sd-pdp__rating a { display: inline-flex; align-items: center; }
.sd-pdp__rating a:hover .sd-stars__text { text-decoration: underline; }

.sd-pdp__bullets {
	border-top: 1px solid var(--sd-line);
	border-bottom: 1px solid var(--sd-line);
	padding-block: 12px;
	margin-bottom: 16px;
}
.sd-pdp__bullets p { margin: 0 0 7px; font-size: 13px; line-height: 1.5; }
.sd-pdp__bullets p:last-child { margin-bottom: 0; }
.sd-pdp__bullets strong { font-weight: 800; }

/* Buy box */
.sd-buybox { margin-bottom: 14px; }
.sd-buybox__deadline {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 8px 11px;
	margin-bottom: 14px;
	border-radius: var(--sd-r);
	background: #fff2ec;
	color: var(--sd-orange-text);
	font-size: 11px;
	font-weight: 800;
}
.sd-buybox__deadline .sd-countdown {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
	background: var(--sd-orange);
	color: #fff;
	padding: 2px 8px;
	border-radius: var(--sd-r);
}

.sd-tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	border: 0;
	margin: 0 0 22px;
	padding: 0;
}
.sd-tiers__legend {
	grid-column: 1 / -1;
	padding: 0;
	margin-bottom: 2px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sd-ink-3);
}
/* position:relative so the visually-hidden input stays inside its own label
   instead of escaping to the initial containing block (which put it off-screen
   and dragged the focus ring with it). */
.sd-tier { display: block; cursor: pointer; position: relative; }
.sd-tier__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	appearance: none;
}
.sd-tier__box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 14px 6px 10px;
	border: 2px solid var(--sd-line);
	border-radius: var(--sd-r);
	background: #fff;
	text-align: center;
	transition: border-color 0.15s var(--sd-ease), background 0.15s var(--sd-ease);
}
.sd-tier__input:checked + .sd-tier__box { border-color: var(--sd-orange); background: #fff8f5; }
.sd-tier__input:focus-visible + .sd-tier__box { outline: 3px solid var(--sd-orange); outline-offset: 2px; }
.sd-tier__qty { font-size: 18px; font-weight: 900; letter-spacing: -0.02em; }
.sd-tier__unit { font-size: 11px; font-weight: 800; color: var(--sd-red); }
.sd-tier__unit .amount { color: inherit; }
.sd-tier__unit small { display: block; font-size: 10px; font-weight: 600; color: var(--sd-ink-3); }
.sd-tier__save {
	position: absolute;
	top: -1px; right: -1px;
	background: var(--sd-red);
	color: #fff;
	font-size: 10px;
	font-weight: 900;
	padding: 2px 5px;
	border-radius: 0 var(--sd-r) 0 var(--sd-r);
}
.sd-tier__tag {
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	background: var(--sd-ink);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: var(--sd-pill);
}

.sd-priceblock {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
	padding-top: 4px;
	transform-origin: left center;
}
.sd-priceblock__now,
.sd-priceblock__now .amount {
	font-size: 32px;
	font-weight: 900;
	color: var(--sd-red);
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.sd-priceblock__was,
.sd-priceblock__was .amount {
	font-size: 15px;
	font-weight: 600;
	color: var(--sd-ink-3);
	text-decoration: line-through;
}
.sd-priceblock__off {
	background: var(--sd-red);
	color: #fff;
	font-size: 11px;
	font-weight: 900;
	padding: 3px 7px;
	border-radius: var(--sd-r);
}

.sd-stock { margin-bottom: 16px; }
.sd-stock__bar {
	height: 6px;
	border-radius: var(--sd-pill);
	background: var(--sd-line);
	overflow: hidden;
	margin-bottom: 5px;
}
.sd-stock__bar span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--sd-red), var(--sd-orange));
}
/* --sd-orange-dark measured 3.82:1 on the #f5f5f5 ground. This deeper step of
   the same hue measures 4.92:1 and still reads as the warm urgency colour. */
.sd-stock__text { margin: 0; font-size: 11px; font-weight: 700; color: var(--sd-orange-text); }

/* Add-to-cart — the client asked for this to be big. */
.sd-woo--pdp form.cart {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin-bottom: 12px;
}
.sd-woo--pdp form.cart .quantity {
	flex: none;
	display: flex;
	align-items: center;
	border: 2px solid var(--sd-line);
	border-radius: var(--sd-r);
	overflow: hidden;
}
.sd-woo--pdp form.cart .quantity input.qty {
	width: 62px;
	height: 100%;
	min-height: 56px;
	border: 0;
	text-align: center;
	font-size: 15px;
	font-weight: 800;
	font-family: inherit;
	background: #fff;
	-moz-appearance: textfield;
}
.sd-woo--pdp form.cart .quantity input.qty::-webkit-outer-spin-button,
.sd-woo--pdp form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sd-woo--pdp form.cart .quantity label { display: none; }

.sd-woo--pdp form.cart button.single_add_to_cart_button,
.sd-woo--pdp form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 56px;
	padding: 16px 24px;
	border: 0;
	border-radius: var(--sd-r);
	background: var(--sd-green);
	color: #fff;
	font-size: 18px;
	font-weight: 900;
	letter-spacing: 0.01em;
	cursor: pointer;
	text-transform: none;
	transition: background 0.15s var(--sd-ease), transform 0.12s var(--sd-ease);
}
.sd-woo--pdp form.cart button.single_add_to_cart_button:hover { background: var(--sd-green-dark); }
.sd-woo--pdp form.cart button.single_add_to_cart_button:active { transform: translateY(1px); }
.sd-woo--pdp form.cart button.single_add_to_cart_button.loading { opacity: 0.75; }

.sd-reassure {
	display: grid;
	gap: 7px;
	padding: 12px 14px;
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r);
	background: #fff;
}
.sd-reassure li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 11px;
	font-weight: 600;
	color: var(--sd-ink-2);
}
.sd-reassure li .sd-icon { color: var(--sd-green); }

/* Story / specs / reviews */
.sd-story { padding-block: 34px 0; }
.sd-specs { padding-block: 30px 0; }
.sd-specs__table { margin-top: 14px; border: 1px solid var(--sd-line); background: #fff; border-radius: var(--sd-r); overflow: hidden; }
.sd-specs__table th,
.sd-specs__table td {
	padding: 10px 14px;
	font-size: 13px;
	text-align: left;
	border-bottom: 1px solid var(--sd-line);
	vertical-align: top;
}
.sd-specs__table tr:last-child th,
.sd-specs__table tr:last-child td { border-bottom: 0; }
.sd-specs__table th { width: 38%; font-weight: 700; color: var(--sd-ink-2); background: var(--sd-ground); }

.sd-prose { font-size: 15px; line-height: 1.7; color: var(--sd-ink-2); }
.sd-prose h2 { font-size: 22px; color: var(--sd-ink); margin: 28px 0 10px; }
.sd-prose h3 { font-size: 15px; color: var(--sd-ink); margin: 22px 0 8px; }
.sd-prose > *:first-child { margin-top: 0; }
.sd-prose img { border-radius: var(--sd-r); margin-block: 18px; }
.sd-prose ul { margin: 0 0 1em; padding-left: 1.2em; }
.sd-prose ul li { list-style: disc; margin-bottom: 5px; }

/* WooCommerce reviews */
.sd-reviews { padding-block: 34px 0; }
.sd-reviews .sd-wrap { padding-inline: 0; }
.sd-woo--pdp #reviews { padding-block: 0; }
#reviews .woocommerce-Reviews-title { font-size: 22px; font-weight: 800; margin-bottom: 16px; }
#reviews ol.commentlist { display: grid; gap: 1px; background: var(--sd-line); border: 1px solid var(--sd-line); border-radius: var(--sd-r); overflow: hidden; }
#reviews ol.commentlist li { background: #fff; padding: 14px 16px; }
#reviews .comment-text { margin: 0; }
#reviews .woocommerce-review__author { font-weight: 800; font-size: 13px; }
#reviews .woocommerce-review__published-date { color: var(--sd-ink-3); font-size: 11px; margin-left: 6px; }
/* WooCommerce's own .star-rating glyphs also come from the dequeued
   woocommerce-general.css; without a replacement every review printed the raw
   text "Rated 5 out of 5". The inline width on the inner span carries the
   proportion, so it drives the fill. */
.star-rating {
	position: relative;
	display: block;
	width: 5.6em;
	height: 1.1em;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.1;
	letter-spacing: 1px;
	margin-bottom: 5px;
}
.star-rating::before {
	content: '\2605\2605\2605\2605\2605';
	position: absolute;
	inset: 0;
	color: var(--sd-line);
}
.star-rating > span {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	text-indent: -9999px;
	white-space: nowrap;
}
.star-rating > span::before {
	content: '\2605\2605\2605\2605\2605';
	position: absolute;
	left: 0;
	top: 0;
	text-indent: 0;
	color: var(--sd-orange-dark);
}

/* Every seeded reviewer resolves to the same grey mystery-person gravatar, which
   reads as placeholder art. The reference site shows name + verified badge and no
   avatar, so the column is dropped rather than filled with identical silhouettes. */
#reviews .commentlist .avatar { display: none; }
#reviews .description { font-size: 13px; color: var(--sd-ink-2); }
/* Star rating selector. WooCommerce ships this control's glyphs in
   woocommerce-general.css, which the theme dequeues — without a replacement the
   control degraded to plain text links reading "1 of 5 stars" with no hover.
   Rebuilt here with the same star and the same orange the display rating uses. */
.stars { margin: 0 0 6px; line-height: 1; }
.stars > span { display: inline-flex; gap: 3px; }
.stars a {
	position: relative;
	display: block;
	width: 24px;
	height: 24px;
	overflow: hidden;
	text-indent: -9999px;
}
.stars a::before {
	content: '\2605';
	position: absolute;
	inset: 0;
	text-indent: 0;
	font-size: 22px;
	line-height: 24px;
	text-align: center;
	color: var(--sd-line);
	transition: color 0.12s var(--sd-ease);
}
/* Fill left-to-right while pointing, then unfill everything after the cursor. */
.stars:hover a::before { color: var(--sd-orange-dark); }
.stars a:hover ~ a::before { color: var(--sd-line); }
/* Once chosen, keep everything up to and including the picked star filled. */
.stars.selected a::before { color: var(--sd-orange-dark); }
.stars.selected a.active ~ a::before { color: var(--sd-line); }
.stars a:focus-visible::before { outline: 3px solid var(--sd-orange); outline-offset: 1px; }

#reviews .comment-respond { margin-top: 22px; }
#reviews .comment-form { display: grid; gap: 12px; max-width: 620px; }
#reviews .comment-form input[type="text"],
#reviews .comment-form input[type="email"],
#reviews .comment-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 2px solid var(--sd-line);
	border-radius: var(--sd-r);
	font-family: inherit;
	font-size: 13px;
	background: #fff;
}
#reviews .comment-form .submit {
	justify-self: start;
	min-height: 46px;
	padding: 12px 26px;
	border: 0;
	border-radius: var(--sd-r);
	background: var(--sd-ink);
	color: #fff;
	font-weight: 800;
	font-size: 15px;
	cursor: pointer;
	transition: background 0.15s var(--sd-ease);
}
#reviews .comment-form .submit:hover { background: var(--sd-orange-dark); }

/* Related */
.sd-woo--pdp .related { padding-block: 38px 0; }
.sd-woo--pdp .related > h2 { font-size: 22px; font-weight: 800; margin-bottom: 14px; }

/* -------------------------------------------------------------------------
   Sticky add-to-cart bar (the piece the client circled in green)
   ---------------------------------------------------------------------- */

.sd-sticky {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 120;
	background: #fff;
	border-top: 1px solid var(--sd-line);
	transform: translateY(100%);
	transition: transform 0.24s var(--sd-ease);
}
.sd-sticky[hidden] { display: none; }
.sd-sticky.is-visible { transform: translateY(0); }
.sd-sticky__inner {
	max-width: var(--sd-wrap-tight);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 9px 16px;
}
.sd-sticky__meta { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.sd-sticky__img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--sd-r); flex: none; }
.sd-sticky__text { display: flex; flex-direction: column; min-width: 0; }
.sd-sticky__name {
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sd-sticky__price,
.sd-sticky__price .amount {
	font-size: 15px;
	font-weight: 900;
	color: var(--sd-red);
	font-variant-numeric: tabular-nums;
}
.sd-sticky .sd-btn--buy { flex: none; min-height: 46px; padding-inline: 26px; font-size: 15px; }

/* -------------------------------------------------------------------------
   Cart / checkout / account — designed surfaces, not plugin leftovers
   ---------------------------------------------------------------------- */

.woocommerce-cart .sd-woo,
.woocommerce-checkout .sd-woo,
.woocommerce-account .sd-woo { padding-top: 26px; }

.woocommerce-cart .sd-woo > .woocommerce,
.woocommerce-checkout .sd-woo > .woocommerce,
.woocommerce-account .sd-woo > .woocommerce,
.woocommerce-cart .sd-woo > .cart-empty,
.sd-woo .woocommerce-message,
.sd-woo .woocommerce-error,
.sd-woo .woocommerce-info {
	max-width: var(--sd-wrap-tight);
	margin-inline: auto;
	padding-inline: 16px;
}

.sd-woo .woocommerce-message,
.sd-woo .woocommerce-error,
.sd-woo .woocommerce-info {
	list-style: none;
	padding: 12px 16px;
	margin-bottom: 18px;
	border: 1px solid var(--sd-line);
	border-left: 4px solid var(--sd-green);
	border-radius: var(--sd-r);
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.sd-woo .woocommerce-error { border-left-color: var(--sd-red); }
.sd-woo .woocommerce-info { border-left-color: var(--sd-orange); }
.sd-woo .woocommerce-message .button,
.sd-woo .woocommerce-error .button,
.sd-woo .woocommerce-info .button { margin-left: auto; }

.sd-woo table.shop_table {
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r);
	background: #fff;
	overflow: hidden;
	margin-bottom: 22px;
}
.sd-woo table.shop_table th,
.sd-woo table.shop_table td {
	padding: 12px 14px;
	text-align: left;
	font-size: 13px;
	border-bottom: 1px solid var(--sd-line);
	vertical-align: middle;
}
.sd-woo table.shop_table th { font-weight: 800; background: var(--sd-ground); }
.sd-woo table.shop_table tr:last-child td { border-bottom: 0; }
.sd-woo table.shop_table img { width: 56px; border-radius: var(--sd-r); }
/* On the #f5f5f5 table ground --sd-green measured 4.44:1, just under AA at 11px. */
.sd-cart-note { display: block; font-size: 11px; font-weight: 700; color: var(--sd-green-dark); }

.sd-woo .cart-collaterals { display: grid; justify-content: end; }
.sd-woo .cart_totals {
	width: min(420px, 100%);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r);
	background: #fff;
	padding: 16px;
}
.sd-woo .cart_totals h2 { font-size: 15px; margin-bottom: 10px; }

.sd-woo .button,
.sd-woo .woocommerce a.button,
.sd-woo button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 12px 22px;
	border: 0;
	border-radius: var(--sd-r);
	background: var(--sd-ink);
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	font-family: inherit;
	cursor: pointer;
	text-align: center;
}
.sd-woo .button:hover { background: #000; }
/* Buy actions. Specific enough to beat `.sd-woo .woocommerce a.button`, which
   otherwise painted "Proceed to checkout" in ink instead of the buy green. */
.sd-woo a.checkout-button,
.sd-woo .woocommerce a.checkout-button,
.sd-woo button#place_order,
.sd-woo #place_order {
	width: 100%;
	background: var(--sd-green);
	color: #fff;
	min-height: 54px;
	font-size: 15px;
	font-weight: 900;
}
.sd-woo a.checkout-button:hover,
.sd-woo .woocommerce a.checkout-button:hover,
.sd-woo button#place_order:hover,
.sd-woo #place_order:hover { background: var(--sd-green-dark); }

.sd-woo .woocommerce-billing-fields,
.sd-woo .woocommerce-shipping-fields,
.sd-woo .woocommerce-additional-fields { margin-bottom: 20px; }
.sd-woo .woocommerce-billing-fields h3,
.sd-woo #order_review_heading { font-size: 15px; font-weight: 800; margin-bottom: 12px; }
.sd-woo .form-row { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px; padding: 0; width: 100%; float: none; }
.sd-woo .form-row label { font-size: 11px; font-weight: 700; }
.sd-woo .form-row .required { color: var(--sd-red); text-decoration: none; }
.sd-woo .form-row input.input-text,
.sd-woo .form-row textarea,
.sd-woo .form-row .select2-container .select2-selection--single,
.sd-woo .form-row select {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 2px solid var(--sd-line);
	border-radius: var(--sd-r);
	font-family: inherit;
	font-size: 15px;
	background: #fff;
	color: var(--sd-ink);
}
.sd-woo .form-row input.input-text:focus,
.sd-woo .form-row textarea:focus { border-color: var(--sd-orange); outline: none; }
.sd-woo .form-row.woocommerce-invalid input.input-text { border-color: var(--sd-red); }
.sd-woo .select2-container .select2-selection--single { display: flex; align-items: center; }
.sd-woo .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); }

.sd-woo .woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 30px; align-items: start; }
.sd-woo #customer_details { min-width: 0; }
.sd-woo #order_review,
.sd-woo .woocommerce-checkout-review-order {
	min-width: 0;
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r);
	background: #fff;
	padding: 16px;
	position: sticky;
	top: calc(var(--sd-header-h) + 14px);
}
.sd-woo .woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.sd-woo .woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 0; margin: 0 0 14px; }
.sd-woo .woocommerce-checkout #payment ul.payment_methods li { border: 1px solid var(--sd-line); border-radius: var(--sd-r); padding: 11px 13px; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.sd-woo .woocommerce-checkout #payment div.payment_box { background: var(--sd-ground); border-radius: var(--sd-r); font-size: 11px; font-weight: 500; margin-top: 8px; padding: 10px 12px; }
.sd-woo .woocommerce-checkout #payment div.payment_box::before { display: none; }

.sd-woo .woocommerce-MyAccount-navigation ul { display: grid; gap: 1px; background: var(--sd-line); border: 1px solid var(--sd-line); border-radius: var(--sd-r); overflow: hidden; }
.sd-woo .woocommerce-MyAccount-navigation li a { display: block; padding: 11px 14px; background: #fff; font-size: 13px; font-weight: 700; }
.sd-woo .woocommerce-MyAccount-navigation li.is-active a { background: var(--sd-ink); color: #fff; }
/* `woocommerce-account` is a body class: written as `.sd-woo .woocommerce-account`
   it can never match, which left the account nav full-width above the content at
   every viewport. It has to be an ancestor selector. */
.woocommerce-account .sd-woo > .woocommerce {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: 26px;
	align-items: start;
}
.sd-woo .woocommerce-MyAccount-content { min-width: 0; }

.sd-woo .woocommerce-form-login,
.sd-woo .woocommerce-form-register {
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r);
	background: #fff;
	padding: 20px;
}

/* Empty states */
.sd-empty { text-align: center; padding-block: 60px; }
/* Was var(--sd-line) at 1.14:1 — effectively invisible. --sd-orange measured
   2.86:1 on the #f5f5f5 ground (still under the 3:1 large-text bar); the darker
   step of the same hue measures 3.82:1. */
.sd-empty__code { font-size: 44px; font-weight: 900; color: var(--sd-orange-dark); margin: 0 0 6px; letter-spacing: -0.04em; }
.sd-empty__title { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.sd-empty__text { color: var(--sd-ink-2); margin-bottom: 18px; }
.sd-woo .woocommerce-no-products-found { text-align: center; padding-block: 50px; }

/* -------------------------------------------------------------------------
   Blog / pages
   ---------------------------------------------------------------------- */

.sd-archive { padding-block: 26px 46px; }
.sd-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sd-post { background: #fff; border: 1px solid var(--sd-line); border-radius: var(--sd-r); overflow: hidden; }
.sd-post__media img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.sd-post__body { padding: 14px 16px 18px; }
.sd-post__title { font-size: 15px; font-weight: 800; margin-bottom: 6px; line-height: 1.3; }
.sd-post__excerpt { font-size: 13px; color: var(--sd-ink-2); }
.sd-post__more { font-size: 13px; font-weight: 800; color: var(--sd-orange-text); }

.sd-page { padding-block: 30px 50px; }
.sd-page--woo { padding-block: 24px 50px; }
.sd-page--woo .sd-h1 { margin-bottom: 18px; }
.sd-page__meta { font-size: 11px; color: var(--sd-ink-3); margin-bottom: 16px; }
.sd-page__media { margin: 0 0 20px; }
.sd-editorial { padding-block: 10px 46px; }

.woocommerce-pagination ul,
.navigation.pagination .nav-links {
	display: flex;
	gap: 6px;
	justify-content: center;
	margin-top: 26px;
	border: 0;
}
.woocommerce-pagination ul li { border: 0; }
.woocommerce-pagination a, .woocommerce-pagination span,
.navigation.pagination a, .navigation.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px; height: 38px;
	padding: 0 10px;
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r);
	background: #fff;
	font-size: 13px;
	font-weight: 700;
}
.woocommerce-pagination .current,
.navigation.pagination .current { background: var(--sd-ink); color: #fff; border-color: var(--sd-ink); }

/* -------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */

.sd-footer { background: var(--sd-ink); color: rgba(255, 255, 255, 0.72); margin-top: 20px; }
.sd-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr);
	gap: 30px;
	padding-block: 40px 32px;
}
.sd-footer__brandcol .sd-logo { color: #fff; margin-bottom: 12px; }
.sd-footer__about { font-size: 13px; max-width: 42ch; }
.sd-footer__social { display: flex; gap: 8px; margin-top: 14px; }
.sd-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--sd-r);
	color: #fff;
}
.sd-footer__social a:hover { background: var(--sd-orange); border-color: var(--sd-orange); }
.sd-footer__heading { font-size: 11px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.sd-footer__list li { margin-bottom: 8px; }
.sd-footer__list a { font-size: 13px; }
.sd-footer__list a:hover { color: #fff; text-decoration: underline; }
.sd-footer__list--contact a { display: inline-flex; align-items: center; gap: 8px; }

.sd-footer__bar { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.sd-footer__barinner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-block: 14px;
}
.sd-footer__copy { margin: 0; font-size: 11px; }
.sd-footer__pay { display: flex; gap: 8px; flex-wrap: wrap; }
.sd-footer__pay li {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--sd-r);
	padding: 4px 8px;
}

/* Floating contact rail — sits above the consent banner, never over it. */
.sd-float {
	position: fixed;
	right: 12px;
	bottom: 84px;
	z-index: 110;
	display: grid;
	gap: 8px;
}
.sd-float__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: var(--sd-pill);
	background: var(--sd-ink);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.15);
}
.sd-float__btn--whatsapp { background: #25d366; }
.sd-float__btn:hover { background: var(--sd-orange); }

/* -------------------------------------------------------------------------
   Entrance sequence — layer 1 of the four.
   The motif is drop & settle, so the words arrive from above and stop dead.
   Deliberately excludes the hero product image: that is the LCP element on the
   front page (measured LCP 972ms on IMG.sd-card__img), and animating its
   opacity would push LCP back by the length of the animation. The protagonist
   is already there; only the copy arrives.
   Total sequence 0.30 + 4x0.08 + 0.42 = 1.04s, inside the 1.4s ceiling.
   ---------------------------------------------------------------------- */

@keyframes sd-drop-in {
	0%   { opacity: 0; transform: translateY(-10px); }
	100% { opacity: 1; transform: none; }
}

.sd-js .sd-hero.is-entering .sd-hero__eyebrow,
.sd-js .sd-hero.is-entering .sd-hero__title,
.sd-js .sd-hero.is-entering .sd-hero__text,
.sd-js .sd-hero.is-entering .sd-hero__cta,
.sd-js .sd-hero.is-entering .sd-hero__clock {
	animation: sd-drop-in 0.42s var(--sd-ease) both;
}
.sd-js .sd-hero.is-entering .sd-hero__eyebrow { animation-delay: 0.30s; }
.sd-js .sd-hero.is-entering .sd-hero__title   { animation-delay: 0.38s; }
.sd-js .sd-hero.is-entering .sd-hero__text    { animation-delay: 0.46s; }
.sd-js .sd-hero.is-entering .sd-hero__cta     { animation-delay: 0.54s; }
.sd-js .sd-hero.is-entering .sd-hero__clock   { animation-delay: 0.62s; }

/* -------------------------------------------------------------------------
   Page transition — layer 4 of the four.
   Cross-document view transitions are progressive: browsers without support
   simply navigate as before, so nothing depends on it.
   ---------------------------------------------------------------------- */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: sd-vt-out 0.18s var(--sd-ease) both; }
::view-transition-new(root) { animation: sd-vt-in 0.26s var(--sd-ease) both; }

@keyframes sd-vt-out { to { opacity: 0; } }
@keyframes sd-vt-in { from { opacity: 0; transform: translateY(6px); } }

/* -------------------------------------------------------------------------
   Reveal-on-scroll (IntersectionObserver adds .is-in)
   Both classes are applied by JS, never by the server, so a script failure
   leaves every card and section fully visible.
   ---------------------------------------------------------------------- */

/* Product cards: the drop-and-settle motif at grid scale — a short rise with
   no overshoot, so a wall of 20 cards reads as arriving, not as bouncing. */
.js-rise { opacity: 0; transform: translateY(10px); }
.js-rise.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.38s var(--sd-ease), transform 0.38s var(--sd-ease);
}

.js-reveal { opacity: 0; transform: translateY(14px); }
.js-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.45s var(--sd-ease), transform 0.45s var(--sd-ease);
}

/* -------------------------------------------------------------------------
   Responsive — mobile is the main surface, built for it rather than shrunk
   ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	ul.products.sd-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sd-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sd-footer__grid { grid-template-columns: 1fr 1fr; }
	.sd-woo .woocommerce-checkout { grid-template-columns: minmax(0, 1fr); }
	.sd-woo #order_review, .sd-woo .woocommerce-checkout-review-order { position: static; }
}

@media (max-width: 860px) {
	.sd-woo--pdp .product { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.sd-woo--pdp .summary { padding-top: 16px; }
	.sd-woo--pdp .woocommerce-product-gallery { margin-top: 14px; }
	.sd-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-block: 26px; }
	.sd-hero__title { font-size: 32px; }
	.sd-strip__inner { grid-template-columns: 1fr; gap: 18px; padding-block: 24px; }
	.woocommerce-account .sd-woo > .woocommerce { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
	body { font-size: 13px; }

	/* Two-column packed grid — the density is the point on mobile. */
	ul.products,
	ul.products.sd-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.sd-header__inner { flex-wrap: wrap; gap: 8px; min-height: 52px; padding-block: 8px; }
	.sd-header__brand { order: 1; }
	.sd-header__actions { order: 2; margin-left: auto; }
	.sd-search { order: 3; flex-basis: 100%; max-width: none; }
	.sd-catnav { display: none; }

	.sd-topbar__inner {
		justify-content: flex-start;
		gap: 18px;
		padding-right: 34px;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent 100%);
		mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent 100%);
	}
	.sd-promo__inner { font-size: 11px; gap: 7px; }

	.sd-h1 { font-size: 22px; }
	.sd-h2 { font-size: 18px; }
	.sd-hero__title { font-size: 32px; }
	.sd-hero__text { font-size: 15px; }

	.sd-cats__list { padding-inline: 16px; }
	.sd-cats__item > a { width: 92px; padding: 10px 6px; }
	.sd-cats__media { width: 50px; height: 50px; }

	.sd-pdp__title { font-size: 18px; }
	.sd-priceblock__now, .sd-priceblock__now .amount { font-size: 32px; }

	/* Signature is stronger on mobile, not weaker. */
	.js-slam.is-slammed { animation-name: sd-slam-mobile; }

	.sd-woo--pdp form.cart { flex-wrap: wrap; }
	.sd-woo--pdp form.cart .quantity { flex: none; }
	.sd-woo--pdp .single_add_to_cart_button { flex: 1 1 200px; min-height: 54px; font-size: 15px; }

	/* Sticky bar occupies the thumb zone; page gets padding so nothing hides. */
	body.single-product { padding-bottom: 66px; }
	.sd-sticky__inner { padding: 8px 12px; gap: 10px; }
	.sd-sticky__img { width: 40px; height: 40px; }
	.sd-sticky .sd-btn--buy { padding-inline: 18px; font-size: 15px; min-height: 44px; }
	.sd-float { bottom: 132px; right: 10px; }

	.sd-posts { grid-template-columns: minmax(0, 1fr); }
	.sd-footer__grid { grid-template-columns: 1fr; gap: 24px; padding-block: 28px 22px; }
	.sd-footer__barinner { justify-content: flex-start; }

	/* Only the cart's column headers collapse. The checkout review table uses
	   <th> for row labels (Subtotal, Shipping, Total) — hiding those left three
	   bare figures with nothing naming them. */
	.sd-woo table.shop_table.shop_table_responsive thead th { display: none; }
	.sd-woo table.shop_table.shop_table_responsive td { display: block; text-align: right; border-bottom: 1px solid var(--sd-line); }
	.sd-woo table.shop_table.shop_table_responsive td::before { content: attr(data-title) ': '; float: left; font-weight: 800; }
	.sd-woo table.woocommerce-checkout-review-order-table th,
	.sd-woo table.woocommerce-checkout-review-order-table td { display: table-cell; text-align: left; }
	.sd-woo table.woocommerce-checkout-review-order-table td { text-align: right; }
	/* Each summary row already names itself; the column header is redundant here. */
	.sd-woo table.woocommerce-checkout-review-order-table thead { display: none; }
	.sd-woo .cart-collaterals { justify-content: stretch; }
	.sd-woo .cart_totals { width: 100%; }
}

@media (max-width: 420px) {
	.sd-tiers { gap: 6px; }
	.sd-tier__box { padding: 12px 3px 9px; }
	.sd-tier__qty { font-size: 15px; }
	.sd-tier__unit { font-size: 11px; }
	.sd-tag { min-width: 40px; padding: 4px 5px 5px; }
	.sd-tag b { font-size: 11px; }
}

/* Mobile keeps the signature proportionally stronger (the brief calls it the
   main surface) but scaled from the same measured curve, not doubled blind. */
@keyframes sd-slam-mobile {
	0%   { transform: translateY(-11px) scaleX(1);    opacity: 0; }
	55%  { transform: translateY(0)     scaleX(1);    opacity: 1; }
	72%  { transform: translateY(0)     scaleX(1.045); }
	100% { transform: translateY(0)     scaleX(1); }
}

/* -------------------------------------------------------------------------
   Reduced motion — everything lands on its final state immediately
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.js-reveal, .js-rise { opacity: 1; transform: none; }
	.js-slam.is-slammed { animation: none; }
	.sd-js .sd-hero.is-entering * { animation: none !important; }
	::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
	.js-slam.is-slammed .sd-price__was { animation: none; clip-path: none; }
	.sd-sticky { transition: none; }
	.sd-drawer__panel { transition: none; }
}

/* Content must be readable even if JS never runs. */
.no-js .js-reveal,
.no-js .js-rise { opacity: 1; transform: none; }