/* =========================================================================
   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;
	/* Hover step for the solid Buy Now button. White on #e02020 measures
	   4.78:1 and on #b81a1a 6.57:1 — both clear AA, so the hover darkens
	   without ever dropping below the base. */
	--sd-red-dark: #b81a1a;
	/* 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); }

/* The sticky bar's purchase pair. Outlined = park it in the cart and keep
   shopping; solid red = pay now. Ranked by fill, not by size, so the two
   can sit at the same height without the secondary reading as disabled.
   Inset box-shadow rather than a border: the ring costs no layout box, so
   both buttons keep the identical 46px min-height the pair depends on.
   #e02020 as text on white measures 4.78:1 — AA for the 15px/800 label. */
.sd-btn--cart {
	background: var(--sd-white);
	color: var(--sd-red);
	box-shadow: inset 0 0 0 2px var(--sd-red);
}
.sd-btn--cart:hover { background: #fff1f1; }
.sd-btn--now { background: var(--sd-red); color: #fff; }
.sd-btn--now:hover { background: var(--sd-red-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; }
/* Tool-level, not a call to action. As a solid --sd-ink block this measured
   16.27:1 against the page ground and came out as the loudest control on all
   12 templates — on the product page it beat Buy Now (74.8 vs 64.2) and Add to
   Cart (58). It reuses .sd-iconbtn's transparent/ink/6%-hover treatment rather
   than introducing a new surface, and the search box's own 2px border plus a
   hairline divider still read it as part of the control. */
.sd-search__submit {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	align-self: stretch;
	border: 0;
	border-left: 1px solid var(--sd-line);
	background: transparent;
	color: var(--sd-ink);
	cursor: pointer;
}
.sd-search__submit:hover { background: rgba(17, 24, 39, 0.06); }

.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 — a product offer, not a brand statement.
   Every reference store in this genre (superzebra, 拼多多, Wish) opens on an
   offer or straight onto product; none opens on a slogan about the shop. The
   image is the protagonist and the price is the headline.
   ---------------------------------------------------------------------- */

.sd-hero { background: #fff; border-bottom: 1px solid var(--sd-line); }
.sd-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: 32px;
	align-items: center;
	padding-block: 28px;
}

.sd-hero__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--sd-ground);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-r);
	overflow: hidden;
}
.sd-hero__img { width: 100%; height: 100%; object-fit: cover; }

.sd-hero__offer { min-width: 0; }
.sd-hero__offer--empty { grid-column: 1 / -1; text-align: center; }

.sd-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
	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: 32px;
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.03em;
	margin-bottom: 10px;
}
.sd-hero__title a:hover { color: var(--sd-orange-text); }

.sd-hero__rating { margin-bottom: 14px; }

.sd-hero__price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 18px;
	transform-origin: left center;
}
.sd-hero__now,
.sd-hero__now .amount {
	font-size: 44px;
	font-weight: 900;
	color: var(--sd-red);
	letter-spacing: -0.04em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.sd-hero__was,
.sd-hero__was .amount {
	font-size: 18px;
	font-weight: 600;
	color: var(--sd-ink-3);
	text-decoration: line-through;
}
.sd-hero__off {
	background: var(--sd-red);
	color: #fff;
	font-size: 13px;
	font-weight: 900;
	padding: 4px 8px;
	border-radius: var(--sd-r);
}

.sd-hero__cta { min-height: 54px; padding-inline: 30px; font-size: 18px; }

.sd-hero__clock {
	margin: 14px 0 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--sd-ink-2);
	display: flex;
	align-items: center;
	gap: 8px;
}

/* -------------------------------------------------------------------------
   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; min-height: 44px; }
.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;
	flex-wrap: wrap;
	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; }

/* Buy Now takes its own row at the full width of the one above it. Sitting the
   two side by side would have halved the payment click the client explicitly
   asked to keep big, and the quantity box already owns part of that row. Same
   height and type size as the green button so neither reads as the lesser of
   the two; colour alone ranks them. */
.sd-woo--pdp form.cart .sd-buynow {
	flex: 1 0 100%;
	/* 60px, not 56: the green button shares a row with the quantity box and
	   `align-items: stretch` pulls it up to that box's height (56px input +
	   2px border top and bottom). Buy Now is alone on its own row, so it has
	   to be told the same number or it sits 6px shorter on mobile. */
	min-height: 60px;
	padding: 16px 24px;
	border-radius: var(--sd-r);
	font-size: 18px;
	font-weight: 900;
	letter-spacing: 0.01em;
}

.sd-reassure {
	display: grid;
	/* Two columns. One column left the right half of the box empty — the client
	   circled that void and asked for a payment-security line in it. Four items
	   in 2x2 fill the box instead of making it taller. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 7px 14px;
	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__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.sd-sticky .sd-btn--cart,
.sd-sticky .sd-btn--now { flex: none; min-height: 46px; padding-inline: 20px; 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; }
/* The link columns are conditional (contact only renders when it is
   configured), so a fixed 4-track grid left an empty track and clustered the
   content on the left. auto-flow sizes the row to whatever actually rendered. */
.sd-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 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-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-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)); }
	/* Two columns, with the brand block spanning both — left in a single cell
	   it pushed the third link column onto a new row starting back at column 1,
	   which reads as a broken grid. */
	.sd-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
	.sd-footer__brandcol { grid-column: 1 / -1; }
	.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; }
	/* Compact horizontal deal card. Stacked, the hero filled the whole first
	   screen (measured 630px of an 844px viewport) and pushed the first product
	   card to y=1149 — a screen and a half before any merchandise. This keeps
	   the offer but gets the category rail and the grid up into view. */
	.sd-hero__inner {
		grid-template-columns: 148px minmax(0, 1fr);
		gap: 12px;
		padding-block: 12px;
		align-items: stretch;
	}
	/* width:100% + align-self pins the box to its 132px track. Without them the
	   stretched row height (260px) drives aspect-ratio backwards and the image
	   renders 260px wide, overlapping the offer column. */
	.sd-hero__media { aspect-ratio: 1 / 1; width: 100%; align-self: center; }
	/* The large tag covered half of a 148px thumbnail; use the standard size. */
	.sd-hero__media .sd-tag--lg { min-width: 44px; padding: 4px 6px 5px; }
	.sd-hero__media .sd-tag--lg b { font-size: 13px; }
	.sd-hero__media .sd-tag--lg i { font-size: 10px; }
	.sd-hero__offer { display: flex; flex-direction: column; justify-content: center; }
	.sd-hero__eyebrow { margin-bottom: 6px; padding: 3px 8px; font-size: 11px; }
	.sd-hero__title {
		font-size: 15px;
		line-height: 1.3;
		margin-bottom: 6px;
		display: -webkit-box;
		/* 3, not 2: these names carry the benefit and the brand after the dash,
		   and two lines cut both off on every phone width. */
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.sd-hero__rating { margin-bottom: 8px; }
	.sd-hero__price { margin-bottom: 10px; gap: 7px; }
	.sd-hero__now, .sd-hero__now .amount { font-size: 32px; }
	.sd-hero__was, .sd-hero__was .amount { font-size: 13px; }
	.sd-hero__off { font-size: 11px; padding: 2px 6px; }
	/* nowrap + 12px: at 360px the label needed 169px of a 168px button and wrapped,
	   making this CTA 71px tall against 47px at 390px. */
	.sd-hero__cta { min-height: 46px; padding-inline: 12px; font-size: 15px; width: 100%; white-space: nowrap; }
	.sd-hero__clock { margin-top: 10px; font-size: 13px; }
	.sd-hero__offer--empty { grid-column: 1 / -1; }
	.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; }

	/* Touch targets. Measured 16-19 controls under 44px per page at 390px —
	   the hamburger and cart were 40x40, the search submit 34px tall, the
	   pagination 38px and "See all" only 20px. 44px is the floor people can
	   hit reliably with a thumb. */
	.sd-iconbtn { width: 44px; height: 44px; }
	.sd-search__submit { min-width: 48px; }
	.sd-search__field { min-height: 44px; }
	.sd-sechead__all { min-height: 44px; padding-inline: 4px; }
	.sd-catnav__list > li > a { padding-block: 14px; }
	.woocommerce-pagination a,
	.woocommerce-pagination span,
	.navigation.pagination a,
	.navigation.pagination span { min-width: 44px; height: 44px; }
	.sd-woo .woocommerce-ordering select { min-height: 44px; }
	.sd-footer__list a,
	.sd-drawer__list > li > a,
	.sd-drawer__pagelist > li > a,
	.sd-drawer__contactlist > li > a { min-height: 44px; display: flex; align-items: center; }
	.sd-footer__social a { width: 44px; height: 44px; }

	/* iOS zooms the whole page when a focused field is under 16px. */
	input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
	input[type="password"], input[type="number"], textarea, select { font-size: 16px; }

	/* 11px is fine for a badge, too small for anything you have to read. */
	.sd-promo__text,
	.sd-archive__count,
	.sd-drawer__catnum,
	.sd-stars__text,
	.sd-card__sold { 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 used to be reset to 32px here. That is the pre-redesign
	   scale: the compact 148px-thumb hero at max-860px sets 15px with a 2-line
	   clamp, and this later rule blew the type back up inside the same clamp —
	   measured 374px of text squeezed into 83px at 360px, so the shopper saw
	   "Magic Foam Cleaner -" and none of the benefit or the brand. */
	
	.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; }
	/* Type steps down with the green button; the height does not — see above. */
	.sd-woo--pdp form.cart .sd-buynow { font-size: 15px; padding: 14px 20px; }

	/* 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__actions { gap: 6px; }
	.sd-sticky .sd-btn--cart,
	.sd-sticky .sd-btn--now { padding-inline: 14px; font-size: 14px; min-height: 44px; }
	.sd-float { bottom: 132px; right: 10px; }

	.sd-posts { grid-template-columns: minmax(0, 1fr); }

	/* Footer. Single-column stacking plus the 44px tap-target floor made this
	   903px tall on an 844px viewport — taller than the whole screen, and
	   mostly air. Two columns halve it; the brand block and the contact list
	   stay full width because their content is prose, not a link list. */
	.sd-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-flow: row;
		gap: 8px 16px;
		padding-block: 24px 18px;
	}
	.sd-footer__brandcol { grid-column: 1 / -1; }
	.sd-footer__grid > .sd-footer__col:has(.sd-footer__list--contact) { grid-column: 1 / -1; }
	.sd-footer__about {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.sd-footer__heading { margin-bottom: 4px; }
	.sd-footer__list li { margin-bottom: 0; }
	/* Stays on the 44px tap-target floor set for the rest of the mobile UI —
	   two columns already halve the height, so there is nothing to buy by
	   shaving it. */
	.sd-footer__list a { min-height: 44px; }
	.sd-footer__social { margin-top: 12px; }

	.sd-footer__barinner { justify-content: flex-start; gap: 10px; padding-block: 12px; }
	.sd-footer__pay { gap: 6px; }
	.sd-footer__pay li { padding: 3px 7px; }

	/* 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; }
	/* Label left, value right, sharing one baseline. The old rule floated the
	   label and right-aligned the whole cell, so a long product name wrapped
	   into a ragged left edge. */
	.sd-woo table.shop_table.shop_table_responsive td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 14px;
		text-align: right;
		border-bottom: 1px solid var(--sd-line);
	}
	.sd-woo table.shop_table.shop_table_responsive td::before {
		content: attr(data-title) ': ';
		flex: none;
		font-weight: 800;
		text-align: left;
	}
	/* WooCommerce ships the remove x, the thumbnail and the coupon row without
	   a data-title, so `attr(data-title) ': '` printed the separator on its own
	   as a stray ':'. The client circled two of them. */
	.sd-woo table.shop_table.shop_table_responsive td:not([data-title])::before,
	.sd-woo table.shop_table.shop_table_responsive td[data-title='']::before { content: none; }
	/* A name is read left to right; only money lines up on the right. */
	.sd-woo table.shop_table.shop_table_responsive td.product-name { text-align: left; }
	.sd-woo table.shop_table.shop_table_responsive td.product-remove { justify-content: flex-end; }
	.sd-woo table.shop_table.shop_table_responsive td.product-thumbnail { justify-content: flex-start; }

	/* Coupon row. The field and its button were fighting over one 328px line
	   and wrapping, which stranded Update cart underneath them in a dark stack. */
	.sd-woo table.shop_table.shop_table_responsive td.actions { display: grid; gap: 8px; }
	.sd-woo td.actions .coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 0; }
	.sd-woo td.actions .coupon input.input-text { width: 100%; min-width: 0; }
	.sd-woo td.actions .coupon .button { white-space: nowrap; }
	.sd-woo td.actions > .button { width: 100%; }

	.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; }
	/* Same reason as the cart: the name column reads left, the money column right. */
	.sd-woo table.woocommerce-checkout-review-order-table td.product-name { text-align: left; }
	/* Each summary row already names itself; the column header is redundant here. */
	.sd-woo table.woocommerce-checkout-review-order-table thead { display: none; }
	/* Measured at 390px: the label column was taking 230 of the table's 324px,
	   leaving 93px and breaking "Free shipping" onto two lines. 45% still clears
	   the widest label and hands the value column 178px. */
	.sd-woo table.woocommerce-checkout-review-order-table tfoot th { width: 45%; }

	/* The totals table keeps real <th> row labels, so the generated one repeated
	   them word for word — "Subtotal | Subtotal: $31.80". */
	.sd-woo .cart_totals table.shop_table_responsive td { display: table-cell; text-align: right; }
	.sd-woo .cart_totals table.shop_table_responsive td::before { content: none; }

	.sd-woo .cart-collaterals { justify-content: stretch; }
	.sd-woo .cart_totals { width: 100%; }
}

@media (max-width: 480px) {
	/* Measured at 360px: bar padding 24 + thumb 50 + gap 14 leaves 272px,
	   and the labelled pair with its cart icon wants 226px. Dropping the
	   icon and the product name returns ~74px to the price, which needs 55.
	   Both labels stay readable — neither button becomes a bare glyph. */
	.sd-sticky__name { display: none; }
	.sd-sticky .sd-btn--cart svg { display: none; }
	.sd-sticky .sd-btn--cart { gap: 0; padding-inline: 12px; }
	.sd-sticky .sd-btn--now { padding-inline: 12px; }
}

@media (max-width: 380px) {
	/* 360px is the narrowest phone in real use and the only width where three
	   title lines still overflow (needed 78px, had 59px). 28px off the thumb
	   buys the offer column the room instead of shrinking the type again. */
	.sd-hero__inner { grid-template-columns: 120px minmax(0, 1fr); }
}

@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; }