/*
Theme Name: Kings Marketplace
Theme URI: https://kingsmarketplace.com
Author: Kings Distro Inc.
Author URI: https://kingsdistro.com
Description: Custom wholesale distribution marketplace theme for Kings Distro Inc. Built for a B2B/B2C storefront serving convenience stores, smoke shops, and gas station retailers with vape, THCa, Kratom, and novelty products. WooCommerce-ready.
Version: 1.15.2
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.8
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kings-marketplace
Tags: e-commerce, custom, wholesale
*/

/* ==========================================================================
   DESIGN TOKENS
   Concept: a wholesale distribution "manifest" — the visual language of
   shipping manifests, warehouse lot tags, and ledger sheets. Not a
   consumer vape-shop look; this reads like a serious B2B supply operation.
   ========================================================================== */

:root{
	--ink:        #0E1A2B;
	--ink-2:      #16283F;
	--ink-3:      #1F3550;
	--ink-line:   rgba(237,238,234,0.14);

	--paper:      #EDEEEA;
	--paper-2:    #F7F7F5;
	--paper-3:    #E3E4DD;
	--line:       #D3D3C7;

	--amber:      #C6902E;
	--amber-deep: #93691F;
	--amber-tint: #F3E4C4;

	--verify:     #3F6B4A;
	--verify-tint:#DEE9E0;

	--alert:      #A23B2E;

	--text:       #17202B;
	--text-soft:  #545F6D;
	--text-mute:  #838C97;

	--on-ink:      #EDEEEA;
	--on-ink-soft: #9FB0C3;
	--on-ink-mute: #6C7E93;

	/* A radius scale, not one value. Controls and chips take --radius;
	   anything that reads as a surface -- a card, a panel, a dialog --
	   takes --radius-lg, so the hierarchy is visible at a glance. */
	--radius:      10px;
	--radius-sm:    8px;
	--radius-lg:   16px;
	--radius-pill: 999px;

	/* Already-opened links. The browser knows which products this
	   person has looked at; the shop may as well say so, the way every
	   catalogue people already use does. */
	--visited:     #6B4E9E;
	--visited-dk:  #B49BE0;

	/* Shadow does the separating that hairlines used to do. */
	--shadow-sm: 0 1px 2px rgba(14,26,43,0.05), 0 1px 3px rgba(14,26,43,0.04);
	--shadow-md: 0 4px 12px rgba(14,26,43,0.07), 0 1px 3px rgba(14,26,43,0.05);
	--shadow-lg: 0 14px 34px rgba(14,26,43,0.12), 0 2px 8px rgba(14,26,43,0.06);

	--container: 1220px;

	--font-head: "Oswald", "Arial Narrow", sans-serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior:auto; }
	*, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

body{
	margin:0;
	background:var(--paper);
	color:var(--text);
	font-family:var(--font-body);
	font-size:16px;
	line-height:1.55;
	-webkit-font-smoothing:antialiased;
}

body.age-gate-locked{ overflow:hidden; height:100vh; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input, select, textarea{ font-family:inherit; font-size:1rem; }

h1,h2,h3,h4{
	font-family:var(--font-head);
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:0.01em;
	line-height:1.08;
	margin:0 0 0.5em;
	color:var(--ink);
}

p{ margin:0 0 1.1em; max-width:62ch; }
p:last-child{ margin-bottom:0; }

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

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

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

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

.btn{
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:14px 26px;
	font-family:var(--font-head);
	font-size:0.86rem;
	font-weight:600;
	letter-spacing:0.06em;
	text-transform:uppercase;
	border:1px solid transparent;
	border-radius:var(--radius);
	box-shadow:var(--shadow-sm);
	cursor:pointer;
	transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
	           box-shadow 0.15s ease, transform 0.08s ease;
}
.btn:hover{ box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(1px); box-shadow:var(--shadow-sm); }
.btn-outline,
.btn-outline-light{ box-shadow:none; }

.btn-amber{ background:var(--amber); color:var(--ink); }
.btn-amber:hover{ background:var(--amber-deep); color:var(--on-ink); }

.btn-ink{ background:var(--ink); color:var(--on-ink); }
.btn-ink:hover{ background:var(--ink-2); }

.btn-outline{ background:transparent; border-color:currentColor; color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); }

.btn-outline-light{ background:transparent; border-color:var(--ink-line); color:var(--on-ink); }
.btn-outline-light:hover{ background:var(--on-ink); color:var(--ink); border-color:var(--on-ink); }

/* ==========================================================================
   TOP COMPLIANCE STRIP
   ========================================================================== */

.top-strip{
	background:var(--ink);
	color:var(--on-ink-soft);
	font-family:var(--font-mono);
	font-size:0.72rem;
	letter-spacing:0.05em;
	text-transform:uppercase;
}
.top-strip .container{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding-top:9px;
	padding-bottom:9px;
	gap:16px;
	flex-wrap:wrap;
}
.top-strip .tag-verify{
	color:var(--amber);
}
@media (max-width: 600px){
	.top-strip .container{ justify-content:center; padding-top:7px; padding-bottom:7px; }
	.top-strip .tag-verify{ display:none; }
}

/* ==========================================================================
   STORE HEADER — main bar (logo · search · account · cart) on ink, then a
   category strip. The sticky wrapper (.km-header-wrap) is styled by the
   motion layer; the header itself never sticks on its own.
   ========================================================================== */

.site-header{
	background:var(--ink);
	color:var(--on-ink);
	border-bottom:1px solid rgba(255,255,255,0.06);
}

.km-head{
	display:grid;
	grid-template-columns:auto minmax(0,1fr) auto;
	align-items:center;
	gap:12px 28px;
	padding-top:12px;
	padding-bottom:12px;
}

/* Let the header shrink to the phone it is on.

   A grid or flex child starts at min-width:auto, which means it refuses
   to shrink below its own content. One stubborn child in here was
   holding the header open at 412px inside a 319px screen, and the
   surplus made the whole page swipe sideways onto bare canvas. Nothing
   in this row needs its full width badly enough to do that. */
.km-head > *{ min-width:0; }
.km-search{ min-width:0; }

/* A net for anything that tries the same trick later. Clip rather than
   hidden: hidden on the root turns the page into a scroll container and
   breaks the sticky header, clip just refuses the sideways room. */
html{ overflow-x:clip; }

.site-logo{
	display:flex;
	flex-direction:column;
	line-height:1;
	font-family:var(--font-head);
	color:var(--on-ink);
}
.site-logo .mark{ display:flex; align-items:baseline; gap:6px; }
.site-logo .mark strong{ font-size:1.45rem; letter-spacing:0.02em; color:var(--on-ink); }
.site-logo .mark span{ font-size:1.45rem; color:var(--amber); }
.site-logo small{
	margin-top:4px;
	font-family:var(--font-mono);
	font-size:0.58rem;
	letter-spacing:0.14em;
	text-transform:uppercase;
	color:var(--on-ink-mute);
}

/* Search */
.km-search{
	display:flex;
	align-items:stretch;
	height:44px;
	max-width:720px;
	width:100%;
	border-radius:var(--radius-pill);
	overflow:hidden;
	background:#fff;
	box-shadow:0 0 0 1px rgba(255,255,255,0.10);
	transition:box-shadow 0.15s ease;
}
.km-search:focus-within{ box-shadow:0 0 0 3px var(--amber); }
.km-search__cat{
	flex:0 0 auto;
	max-width:130px;
	border:0;
	border-right:1px solid var(--line);
	background:var(--paper-3);
	color:var(--text-soft);
	font-family:var(--font-body);
	font-size:0.82rem;
	padding:0 8px;
	cursor:pointer;
}
.km-search__cat:focus-visible{ outline:none; background:var(--paper-2); }
.km-search__input{
	flex:1 1 auto;
	min-width:0;
	border:0;
	padding:0 14px;
	font-size:0.98rem;
	color:var(--text);
	background:#fff;
}
.km-search__input:focus{ outline:none; }
.km-search__input::-webkit-search-decoration{ display:none; }
.km-search__go{
	flex:0 0 52px;
	border:0;
	background:var(--amber);
	color:var(--ink);
	display:inline-flex; align-items:center; justify-content:center;
	cursor:pointer;
	transition:background 0.15s ease;
}
.km-search__go:hover{ background:#D9A542; }
.km-search__go svg{ width:20px; height:20px; }

/* Scan, on the edge of the search box.
 *
 * A barcode is a search term someone is holding in their hand, so the
 * way in sits where they are already typing rather than in a corner of
 * the screen they have to go looking for. */
.km-search__scan{
	flex:0 0 46px;
	border:0;
	border-left:1px solid var(--line);
	background:#fff;
	color:var(--text-soft);
	display:inline-flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition:background 0.15s ease, color 0.15s ease;
}
.km-search__scan:hover,
.km-search__scan:focus-visible{ background:var(--paper-2); color:var(--ink); }
.km-search__scan svg{ width:21px; height:21px; }

@media (max-width: 560px){
	.km-search__scan{ flex-basis:42px; }
	.km-search__scan svg{ width:19px; height:19px; }
}

/* Account · Orders · Cart */
.header-actions{ display:flex; align-items:center; gap:4px; }
.km-head__link,
.km-head__cart{
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:6px 10px;
	border-radius:var(--radius);
	color:var(--on-ink);
	line-height:1.15;
	border:1px solid transparent;
	white-space:nowrap;
}
.km-head__link:hover,
.km-head__cart:hover{ border-color:rgba(255,255,255,0.35); }
.km-head__small{ font-size:0.72rem; color:var(--on-ink-soft); }
.km-head__big{ font-family:var(--font-head); font-size:0.9rem; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; }
.km-head__cart{ flex-direction:row; align-items:flex-end; gap:6px; }
.km-head__cart-icon{ position:relative; display:inline-flex; width:32px; height:30px; align-items:flex-end; justify-content:center; }
.km-head__cart-icon svg{ width:28px; height:28px; }
.cart-count{
	position:absolute;
	top:-6px; right:-2px;
	min-width:18px; height:18px; padding:0 5px;
	background:var(--amber);
	color:var(--ink);
	font-family:var(--font-mono);
	font-size:0.68rem;
	font-weight:700;
	border-radius:var(--radius-pill);
	display:flex; align-items:center; justify-content:center;
}

/* Category strip */
.main-nav{ background:var(--ink-2); }
.km-nav{
	display:flex;
	align-items:center;
	gap:4px;
	min-height:42px;
}

.km-cats{ position:relative; flex:0 0 auto; }
.km-cats__toggle{
	list-style:none;
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:0 14px 0 10px;
	height:42px;
	font-family:var(--font-head);
	font-size:0.84rem;
	font-weight:600;
	letter-spacing:0.05em;
	text-transform:uppercase;
	color:var(--on-ink);
	cursor:pointer;
	border-right:1px solid var(--ink-line);
	margin-right:6px;
}
.km-cats__toggle::-webkit-details-marker{ display:none; }
.km-cats__toggle svg{ width:20px; height:20px; }
.km-cats[open] .km-cats__toggle{ background:var(--paper); color:var(--ink); }
.km-cats__panel{
	position:absolute;
	left:0; top:100%;
	z-index:80;
	min-width:min(640px, calc(100vw - 56px));
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
	gap:0;
	background:var(--paper);
	color:var(--text);
	border:1px solid var(--line);
	border-top:3px solid var(--amber);
	box-shadow:0 22px 48px rgba(14,26,43,0.22);
}
.km-cats__col{ padding:20px 22px 22px; border-right:1px solid var(--line); }
.km-cats__col:last-child{ border-right:0; }
.km-cats__col h3,
.km-cats__col h4{
	margin:0 0 10px;
	font-family:var(--font-mono);
	font-size:0.66rem;
	letter-spacing:0.14em;
	text-transform:uppercase;
	color:var(--text-mute);
}
.km-cats__col li a{
	display:flex; justify-content:space-between; align-items:baseline; gap:12px;
	padding:7px 0;
	font-size:0.94rem;
	color:var(--text);
	border-bottom:1px solid transparent;
}
.km-cats__col li a:hover{ color:var(--amber-deep); }
.km-cats__col li a span{ font-family:var(--font-mono); font-size:0.7rem; color:var(--text-mute); }

.km-navlinks{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.km-navlinks a{
	display:inline-flex; align-items:center;
	height:42px;
	padding:0 13px;
	font-family:var(--font-head);
	font-size:0.84rem;
	font-weight:500;
	letter-spacing:0.05em;
	text-transform:uppercase;
	color:var(--on-ink-soft);
	border-bottom:3px solid transparent;
	transition:color 0.15s ease, border-color 0.15s ease;
}
.km-navlinks a:hover,
.km-navlinks .current-menu-item > a{ color:var(--on-ink); border-bottom-color:var(--amber); }

.km-nav__end{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.km-nav__cta{
	display:inline-flex; align-items:center;
	height:30px; padding:0 14px;
	border:1px solid var(--amber);
	border-radius:var(--radius-pill);
	font-family:var(--font-head);
	font-size:0.76rem;
	font-weight:600;
	letter-spacing:0.06em;
	text-transform:uppercase;
	color:var(--amber);
	transition:background 0.15s ease, color 0.15s ease;
}
.km-nav__cta:hover{ background:var(--amber); color:var(--ink); }
.km-nav__cta--staff{ background:var(--amber); color:var(--ink); }
.km-nav__cta--staff:hover{ background:#D9A542; }
.km-nav__pill{
	font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase;
	color:var(--verify); background:var(--verify-tint); padding:5px 10px; border-radius:var(--radius-pill);
}

.nav-toggle{
	display:none;
	flex-direction:column;
	gap:5px;
	background:none;
	border:0;
	padding:8px;
}
.nav-toggle span{ width:24px; height:2px; background:var(--on-ink); display:block; }
.nav-scrim{ display:none; }

@media (max-width: 1100px){
	.km-head__small{ display:none; }
	.km-head__link{ padding:8px 10px; }
}

@media (max-width: 900px){
	.km-head{ grid-template-columns:auto auto 1fr; gap:10px 14px; }
	.nav-toggle{ display:flex; order:1; }
	.site-logo{ order:2; }
	.site-logo small{ display:none; }
	.header-actions{ order:3; justify-self:end; }
	.km-search{ order:4; grid-column:1 / -1; max-width:none; height:40px; }
	.km-search__cat{ display:none; }
	.km-head__big{ font-size:0.78rem; }
	.km-head__link--orders{ display:none; }
	.km-head__link,
	.km-head__cart{ padding:6px 6px; }

	/* The category strip becomes the slide-in drawer. */
	.main-nav{
		position:fixed;
		inset:0 auto 0 0;
		width:min(340px, 88vw);
		height:100vh;
		overflow-y:auto;
		background:var(--ink);
		transform:translateX(-100%);
		transition:transform 0.25s ease;
		padding:24px 0 40px;
		z-index:70;
	}
	.main-nav.is-open{ transform:translateX(0); }
	.km-nav{ flex-direction:column; align-items:stretch; gap:0; }
	.km-cats{ position:static; }
	.km-cats__toggle{ display:none; }
	.km-cats__panel{
		position:static; min-width:0; display:block;
		background:transparent; color:var(--on-ink); border:0; box-shadow:none;
	}
	.km-cats__col{ border-right:0; border-bottom:1px solid var(--ink-line); padding:14px 0 16px; }
	.km-cats__col h3,
	.km-cats__col h4{ color:var(--amber); }
	.km-cats__col li a{ color:var(--on-ink); font-size:1rem; padding:10px 0; }
	.km-cats__col li a span{ color:var(--on-ink-mute); }
	.km-navlinks{ display:none; }
	.km-nav__end{ margin:18px 0 0; }
	.nav-scrim{
		display:none;
		position:fixed; inset:0; background:rgba(14,26,43,0.55); z-index:65;
	}
	.nav-scrim.is-open{ display:block; }
}

/* Small shared bits used by several templates */
.hero-eyebrow{
	font-family:var(--font-mono);
	font-size:0.78rem;
	letter-spacing:0.1em;
	color:var(--text-soft);
	margin-bottom:18px;
	padding-bottom:14px;
	border-bottom:1px solid var(--line);
	display:flex;
	gap:18px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ==========================================================================
   HOMEPAGE — banner with category tiles, trust strip, product shelves
   ========================================================================== */

.km-hero{
	background:var(--ink);
	color:var(--on-ink);
	padding:44px 0 48px;
	background-image:
		radial-gradient(ellipse at 15% 20%, rgba(198,144,46,0.18), transparent 55%),
		linear-gradient(180deg, var(--ink-2), var(--ink));
}
.km-hero__grid{
	display:grid;
	grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);
	gap:40px;
	align-items:center;
}
.km-eyebrow--light{ color:var(--amber); }
.km-hero h1{
	color:var(--on-ink);
	font-size:clamp(1.9rem, 3.4vw, 2.8rem);
	max-width:18ch;
	margin-bottom:14px;
	text-wrap:balance;
}
.km-hero p{ color:var(--on-ink-soft); font-size:1.02rem; max-width:46ch; margin-bottom:26px; }

.km-tiles{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:12px;
}
.km-tile{
	display:flex; flex-direction:column; gap:4px;
	padding:18px 18px 16px;
	background:var(--paper);
	color:var(--text);
	border-radius:8px;
	border:1px solid rgba(255,255,255,0.06);
	transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.km-tile:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,0.25); }
.km-tile__icon{ width:34px; height:34px; color:var(--amber-deep); margin-bottom:6px; }
.km-tile__icon svg{ width:34px; height:34px; }
.km-tile__name{ font-family:var(--font-head); font-size:1.15rem; text-transform:uppercase; letter-spacing:0.02em; color:var(--ink); }
.km-tile__desc{ font-size:0.86rem; color:var(--text-soft); line-height:1.4; }
.km-tile__go{ margin-top:8px; font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--amber-deep); }

/* Signed-out visitors: the catalogue is members-only, so the banner's
   right-hand side is the sign-in form instead of the category tiles. */
.km-gate-card{
	background:#fff;
	color:var(--text);
	border-radius:8px;
	padding:26px 26px 22px;
	box-shadow:0 24px 50px rgba(0,0,0,0.3);
	max-width:440px;
	justify-self:end;
	width:100%;
}
.km-gate-card h2{ font-size:1.35rem; margin:6px 0 8px; }
.km-gate-card > p{ font-size:0.92rem; color:var(--text-soft); margin-bottom:16px; }
.km-gate-card .woocommerce-form-login{ background:transparent; border:0; padding:0; margin:0; }
.km-gate-card .woocommerce-form-login .form-row{ margin:0 0 12px; padding:0; }
.km-gate-card .woocommerce-form-login label{
	display:block; font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-soft); margin-bottom:5px;
}
.km-gate-card .woocommerce-form-login input.input-text{
	width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; font-size:0.98rem;
}
.km-gate-card .woocommerce-form-login input.input-text:focus{ outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber); }
.km-gate-card .woocommerce-form-login .woocommerce-form-login__rememberme{
	display:flex; align-items:center; gap:8px; margin:2px 0 12px; font-family:var(--font-body); font-size:0.88rem; text-transform:none; letter-spacing:0;
}
.km-gate-card .woocommerce-form-login .button,
.woocommerce .km-gate-card button.button{
	width:100%; background:var(--amber); color:var(--ink); border-radius:var(--radius); padding:13px 20px;
}
.km-gate-card .woocommerce-form-login .button:hover,
.woocommerce .km-gate-card button.button:hover{ background:var(--amber-deep); color:#fff; }
.km-gate-card .woocommerce-LostPassword{ font-size:0.84rem; margin:10px 0 0; }
.km-gate-card .woocommerce-LostPassword a{ color:var(--text-soft); text-decoration:underline; text-underline-offset:2px; }
.km-gate-card__foot{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line); font-size:0.86rem; color:var(--text-soft); }
.km-gate-card__foot a{ color:var(--amber-deep); font-weight:600; }
.km-gate-card__foot a:hover{ text-decoration:underline; }
.km-hero__grid--gate{ align-items:center; }
@media (max-width: 1100px){ .km-gate-card{ justify-self:start; } }

.km-trust{ background:var(--paper-2); border-bottom:1px solid var(--line); }
.km-trust .container{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:0 20px;
	padding-top:16px;
	padding-bottom:16px;
}
.km-trust__item{
	display:flex; flex-direction:column; gap:2px;
	padding:6px 0 6px 18px;
	border-left:1px solid var(--line);
}
.km-trust__item:first-child{ border-left:0; padding-left:0; }
.km-trust__item .num,
.km-trust__item strong{ font-family:var(--font-head); font-size:1.25rem; color:var(--ink); line-height:1.1; }
.km-trust__item .num{ color:var(--amber-deep); }
.km-trust__item span:last-child{ font-size:0.82rem; color:var(--text-soft); }

/* Section chrome (shelves reuse it) */
.section{ padding:44px 0 8px; }
.section-alt{ background:var(--paper-2); }
.section-head{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	gap:24px;
	margin-bottom:18px;
	padding-bottom:12px;
	border-bottom:1px solid var(--line);
}
.section-head h2{ font-size:clamp(1.3rem, 2vw, 1.6rem); margin:0; }
.section-head .section-note{
	display:block;
	margin-top:4px;
	font-size:0.86rem;
	color:var(--text-soft);
}
.km-shelf__tools{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.km-shelf__more{
	font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
	color:var(--amber-deep); margin-right:8px; white-space:nowrap;
}
.km-shelf__more:hover{ text-decoration:underline; text-underline-offset:3px; }
.km-shelf__btn{
	width:34px; height:34px;
	border:1px solid var(--line);
	border-radius:50%;
	background:#fff;
	color:var(--ink);
	font-size:1.3rem; line-height:1;
	display:inline-flex; align-items:center; justify-content:center;
	transition:background 0.15s ease, border-color 0.15s ease;
}
.km-shelf__btn:hover{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
.km-shelf__btn[disabled]{ opacity:0.3; cursor:default; }

/* The shelf track: the [products] shortcode's list, laid out as a
   horizontal, snapping row instead of a grid. */
.km-shelf__viewport{ margin:0 -28px; padding:4px 28px 18px; }
.km-shelf__viewport .woocommerce{ display:block; }
.km-shelf__viewport ul.products,
.km-shelf__viewport .woocommerce ul.products[class*="columns-"]{
	display:flex !important;
	flex-wrap:nowrap;
	gap:14px;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-padding-left:28px;
	padding:2px 0 8px !important;
	scrollbar-width:thin;
	scrollbar-color:var(--line) transparent;
}
.km-shelf__viewport ul.products li.product{
	flex:0 0 218px;
	scroll-snap-align:start;
}
.km-shelf__viewport .woocommerce-info,
.km-shelf__viewport .woocommerce-no-products-found{ display:none; }

.km-brands{ padding-bottom:40px; }
.km-brands__row{ display:flex; flex-wrap:wrap; gap:10px; }
.km-brand{
	display:inline-flex; align-items:center; gap:8px;
	padding:10px 16px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--radius-pill);
	font-family:var(--font-head);
	font-size:0.9rem;
	text-transform:uppercase;
	letter-spacing:0.03em;
	color:var(--ink);
	transition:border-color 0.15s ease, background 0.15s ease;
}
.km-brand:hover{ border-color:var(--ink); background:var(--paper-2); }
.km-brand span{ font-family:var(--font-mono); font-size:0.68rem; color:var(--text-mute); }

.site-main-home .cta-band{ margin-top:36px; }

@media (max-width: 1100px){
	.km-hero__grid{ grid-template-columns:1fr; gap:28px; }
	.km-hero h1{ max-width:24ch; }
}
@media (max-width: 900px){
	.km-trust .container{ grid-template-columns:repeat(2, 1fr); gap:10px 20px; }
	.km-trust__item{ border-left:0; padding-left:0; }
	.km-shelf__viewport ul.products li.product{ flex-basis:180px; }
}
@media (max-width: 560px){
	.km-tiles{ grid-template-columns:1fr 1fr; gap:8px; }
	.km-tile{ padding:14px; }
	.km-tile__desc{ display:none; }
	.km-shelf__viewport ul.products li.product{ flex-basis:160px; }
	.km-shelf__btn{ display:none; }
}

/* ==========================================================================
   PRODUCT GRID (WooCommerce)
   ========================================================================== */

ul.products{
	display:grid !important;
	grid-template-columns:repeat(4, 1fr);
	gap:26px;
	margin:0 !important;
	padding:0 !important;
}
/* Layout only. How a card actually looks is decided once, in the shop
   section further down -- two rules competing over the same corner is
   how the radius ended up ignored the first time. */
ul.products li.product{
	list-style:none;
	position:relative;
}
ul.products li.product a.woocommerce-LoopProduct-link{ display:block; color:inherit; }
ul.products li.product img{
	width:100%;
	aspect-ratio:1/1;
	object-fit:contain;          /* a cropped box is an unrecognisable box */
	background:var(--paper-2);
	padding:14px;
	margin-bottom:16px;
	border-bottom:1px solid rgba(211,211,199,0.5);
}
ul.products li.product .woocommerce-loop-product__title{
	font-family:var(--font-head);
	font-size:0.98rem;
	text-transform:none;
	letter-spacing:0;
	margin:0 20px 6px;
	color:var(--ink);
}
ul.products li.product .price{
	margin:0 20px;
	font-family:var(--font-mono);
	font-weight:600;
	color:var(--ink);
}
ul.products li.product .price del{ color:var(--text-mute); opacity:0.7; margin-right:8px; }
ul.products li.product .price ins{ text-decoration:none; color:var(--amber-deep); }
ul.products li.product .button{
	margin:16px 20px 0;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-family:var(--font-head);
	font-size:0.72rem;
	letter-spacing:0.06em;
	text-transform:uppercase;
	padding:11px 16px;
	background:var(--ink);
	color:var(--on-ink);
	border:1px solid var(--ink);
	border-radius:var(--radius);
	cursor:pointer;
	transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
ul.products li.product .button:hover{ background:var(--ink-2); border-color:var(--ink-2); color:var(--on-ink); }
ul.products li.product .button:active{ transform:translateY(1px); }

/* The two line actions stack and fill, so the card ends on a clean edge. */
ul.products li.product .km-line-tile__actions{
	display:flex;
	flex-direction:column;
	gap:8px;
	margin:16px 20px 0;
}
ul.products li.product .km-line-tile__actions .button{ margin:0; width:100%; }
ul.products li.product .onsale{
	position:absolute; top:12px; left:12px;
	background:var(--amber); color:var(--ink);
	font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase;
	padding:4px 11px;
	border-radius:var(--radius-pill);
	box-shadow:var(--shadow-sm);
}
ul.products li.product .star-rating{ display:none; }

@media (max-width: 1080px){ ul.products{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 760px){ ul.products{ grid-template-columns:repeat(2,1fr); gap:16px; } }
@media (max-width: 480px){ ul.products{ grid-template-columns:1fr; } }

/* ==========================================================================
   WHOLESALE PROCESS STEPS
   ========================================================================== */

.process{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:36px;
}
.process-step{ border-top:3px solid var(--amber); padding-top:20px; }
.process-step .step-no{
	font-family:var(--font-mono);
	color:var(--amber-deep);
	font-size:0.85rem;
	letter-spacing:0.06em;
	display:block;
	margin-bottom:10px;
}
.process-step h3,
.process-step h4{ font-size:1.1rem; margin-bottom:10px; }
.process-step p{ color:var(--text-soft); font-size:0.95rem; }
.process--stack{ grid-template-columns:1fr; gap:22px; }
.process--stack .process-step{ border-top:0; border-left:3px solid var(--amber); padding:2px 0 2px 16px; }
.process--stack .step-no{ margin-bottom:4px; }
.process--stack .process-step h3,
.process--stack .process-step h4{ font-size:1rem; margin-bottom:4px; }
.process--stack .process-step p{ font-size:0.9rem; }
@media (max-width: 900px){ .process{ grid-template-columns:1fr; } }

/* ==========================================================================
   COMPLIANCE / CTA BAND
   ========================================================================== */

.cta-band{
	background:var(--ink);
	color:var(--on-ink);
	padding:64px 0;
}
.cta-band .container{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:30px;
	flex-wrap:wrap;
}
.cta-band h2{ color:var(--on-ink); margin-bottom:10px; font-size:1.7rem; }
.cta-band p{ color:var(--on-ink-soft); max-width:52ch; }
.cta-band .cta-actions{ display:flex; gap:14px; flex-shrink:0; }

.tag-verify-inline{
	display:inline-flex; align-items:center; gap:8px;
	background:var(--verify-tint); color:var(--verify);
	font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase;
	padding:6px 12px; border-radius:var(--radius);
}

/* ==========================================================================
   GENERIC PAGE / CONTENT AREA
   ========================================================================== */

.site-main{ padding:64px 0 90px; }
.page-header{ margin-bottom:36px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.page-header h1{ font-size:clamp(1.9rem,3vw,2.6rem); }

.entry-content h2{ margin-top:1.6em; }
.entry-content h3{ margin-top:1.4em; font-size:1.2rem; }
.entry-content ul, .entry-content ol{ margin:0 0 1.2em; padding-left:1.4em; list-style:disc; max-width:62ch; }
.entry-content ol{ list-style:decimal; }
.entry-content a{ color:var(--amber-deep); text-decoration:underline; text-underline-offset:2px; }
.entry-content blockquote{
	border-left:3px solid var(--amber);
	padding-left:20px;
	margin:1.6em 0;
	color:var(--text-soft);
	font-style:italic;
}

/* WooCommerce content wrapper uses .content-area / .site-main from theme,
   plus its own inner elements below. */

.woocommerce-breadcrumb{
	font-family:var(--font-mono);
	font-size:0.78rem;
	color:var(--text-mute);
	margin-bottom:28px;
	text-transform:uppercase;
	letter-spacing:0.04em;
}
.woocommerce-breadcrumb a{ color:var(--text-soft); }

.woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-noreviews{
	background:var(--paper-2);
	border:1px solid var(--line);
	border-left:4px solid var(--amber);
	padding:16px 20px;
	margin:0 0 26px;
	list-style:none;
	font-size:0.94rem;
}
.woocommerce-error{ border-left-color:var(--alert); }

/* WooCommerce drops an icon from its own font into these boxes, placed
   absolutely at left:1.5em and expecting the 3.5em of left padding its
   stylesheet sets. This theme pads to 20px and says the same thing with
   the coloured left border instead -- amber for a notice, red for an
   error -- so the icon had nothing to sit in and landed on the first
   letter of the sentence. The border is the signal; the icon goes. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-noreviews::before,
body .woocommerce-message::before,
body .woocommerce-error::before,
body .woocommerce-info::before{
	content:none;
	display:none;
}

.woocommerce-form-row label{
	display:block;
	font-family:var(--font-mono);
	font-size:0.78rem;
	letter-spacing:0.03em;
	text-transform:uppercase;
	color:var(--text-soft);
	margin-bottom:6px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce table.shop_table input,
.woocommerce-page table.shop_table input,
.select2-container .select2-selection--single{
	width:100%;
	border:1px solid var(--line);
	background:var(--paper-2);
	padding:11px 14px;
	border-radius:var(--radius);
	color:var(--text);
}
.woocommerce table.shop_table{
	border-collapse:collapse;
	width:100%;
	margin:0 0 30px;
}
.woocommerce table.shop_table th{
	font-family:var(--font-mono);
	font-size:0.72rem;
	letter-spacing:0.06em;
	text-transform:uppercase;
	color:var(--text-mute);
	text-align:left;
	border-bottom:1px solid var(--line);
	padding:12px 10px;
}
.woocommerce table.shop_table td{ padding:14px 10px; border-bottom:1px solid var(--line); }

.woocommerce div.product .summary{ max-width:none; }
.woocommerce div.product p.price, .woocommerce div.product span.price{
	font-family:var(--font-mono); font-size:1.4rem; color:var(--ink); font-weight:600;
}
.woocommerce div.product .woocommerce-product-details__short-description{ color:var(--text-soft); }
.woocommerce div.product form.cart .quantity{ margin-right:12px; }
.woocommerce div.product form.cart .quantity input{
	width:64px; padding:12px; border:1px solid var(--line); background:var(--paper-2); border-radius:var(--radius);
}
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
	font-family:var(--font-head); text-transform:uppercase; letter-spacing:0.05em; font-size:0.82rem;
	background:var(--ink); color:var(--on-ink); border:0; padding:14px 26px; border-radius:var(--radius);
}
.woocommerce div.product form.cart .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover{ background:var(--amber); color:var(--ink); }

/* ==========================================================================
   MY ACCOUNT
   The account page renders through page.php, so everything WooCommerce
   outputs lands inside .entry-content and inherits its bullets, underlines
   and reading-width cap. Those are right for an article and wrong for an
   application screen, so they are undone here before the layout is set.
   ========================================================================== */

.entry-content{ max-width:760px; }
.woocommerce-account .entry-content{ max-width:none; }

/* Signed-in account pages: sidebar + content. Scoped to .logged-in so the
   sign-in screen, which shares the same wrapper, keeps its own layout. */
.woocommerce-account.logged-in .woocommerce{
	display:grid;
	grid-template-columns:240px minmax(0,1fr);
	gap:48px;
	align-items:start;
}
/* WooCommerce drops an (often empty) notices div into the wrapper first.
   Left alone it would take the first grid cell and shove the nav sideways. */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper{ grid-column:1 / -1; }
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper:empty{ display:none; }
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation{ grid-column:1; }
.woocommerce-account.logged-in .woocommerce-MyAccount-content{ grid-column:2; }
/* WooCommerce's own stylesheet floats these; the grid makes that moot. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{ float:none; width:auto; min-width:0; }

/* Account header (page.php) */
.km-eyebrow{
	display:block;
	font-family:var(--font-mono);
	font-size:0.7rem;
	letter-spacing:0.14em;
	text-transform:uppercase;
	color:var(--amber-deep);
	margin-bottom:6px;
}
.km-acct-head{
	display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 28px;
	margin-bottom:36px; padding-bottom:22px; border-bottom:1px solid var(--line);
}
.km-acct-head h1{ margin:0; font-size:clamp(1.7rem,2.6vw,2.3rem); }
.km-acct-meta{
	display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
	margin-top:8px; color:var(--text-soft); font-size:0.92rem;
}
.km-acct-actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* Address cards */
.woocommerce-account .col2-set{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2{ float:none; width:auto; max-width:none; }
.woocommerce-Address{
	background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px;
}
.woocommerce-Address-title{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
.woocommerce-Address-title h2,
.woocommerce-Address-title h3{ margin:0; font-size:1rem; letter-spacing:0.04em; }
.woocommerce-Address-title .edit{
	font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--amber-deep);
}
.woocommerce-Address address{ font-style:normal; line-height:1.65; color:var(--text-soft); }

/* Forms: account details, addresses, sign-in */
.woocommerce-account form .form-row{ margin:0 0 16px; padding:0; }
.woocommerce-account form .form-row label{
	display:block; font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.05em; text-transform:uppercase;
	color:var(--text-soft); margin-bottom:6px;
}
.woocommerce-account form .form-row label .required{ color:var(--alert); text-decoration:none; }
.woocommerce-account form .form-row input.input-text,
.woocommerce-account form .form-row select,
.woocommerce-account form .form-row textarea{
	width:100%; padding:11px 14px; border:1px solid var(--line); background:#fff; border-radius:var(--radius); color:var(--text);
}
.woocommerce-account form .form-row input.input-text:focus,
.woocommerce-account form .form-row textarea:focus{ outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber); }
.woocommerce-account form fieldset{
	border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px 6px; margin:26px 0 22px;
}
.woocommerce-account form fieldset legend{
	font-family:var(--font-head); font-size:0.9rem; letter-spacing:0.05em; text-transform:uppercase; padding:0 8px;
}

/* Sign-in screen (signed out) */
.woocommerce-account:not(.logged-in) .woocommerce{ max-width:920px; }
.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-form-login{ max-width:520px; }
.woocommerce-form-login,
.woocommerce-form-register{
	background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; margin:0;
}
.woocommerce-account .u-columns > div > h2{ font-size:1.15rem; margin:0 0 14px; }
.woocommerce-form-login .woocommerce-form-login__rememberme{
	display:flex; align-items:center; gap:8px; margin:6px 0 16px;
	font-family:var(--font-body); font-size:0.9rem; text-transform:none; letter-spacing:0; color:var(--text);
}
.woocommerce-form-login .lost_password{ font-size:0.88rem; margin:12px 0 0; }
.woocommerce-form-register .woocommerce-privacy-policy-text{ font-size:0.88rem; color:var(--text-soft); }

@media (max-width: 781px){
	.woocommerce-account .col2-set{ grid-template-columns:1fr; }
	.km-acct-head{ align-items:flex-start; }
}

.woocommerce-MyAccount-navigation ul{
	list-style:none; margin:0; padding:0; max-width:none;
	background:var(--paper-2);
	border:1px solid var(--line);
	border-radius:var(--radius);
	overflow:hidden;
}
.woocommerce-MyAccount-navigation li{ margin:0; border-bottom:1px solid var(--line); }
.woocommerce-MyAccount-navigation li:last-child{ border-bottom:0; }
.woocommerce-MyAccount-navigation li a{
	display:block;
	padding:13px 18px 13px 15px;
	border-left:3px solid transparent;
	font-family:var(--font-head);
	font-size:0.82rem;
	letter-spacing:0.05em;
	text-transform:uppercase;
	color:var(--text);
	text-decoration:none;
	transition:background .15s ease, color .15s ease;
}
.woocommerce-MyAccount-navigation li a:hover{ background:var(--paper-3); color:var(--ink); }
.woocommerce-MyAccount-navigation li.is-active a{
	background:var(--ink);
	color:var(--on-ink);
	border-left-color:var(--amber);
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a{ color:var(--text-mute); }

.woocommerce-MyAccount-content{ padding-top:0; }
.woocommerce-MyAccount-content p{ max-width:62ch; }
.woocommerce-MyAccount-content a{ color:var(--amber-deep); text-decoration:none; }
.woocommerce-MyAccount-content a:hover{ text-decoration:underline; text-underline-offset:2px; }
.woocommerce-MyAccount-content a.button,
.woocommerce-MyAccount-content .button{ text-decoration:none; }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3{ margin-top:0; }
.woocommerce-MyAccount-content table.shop_table{ margin-top:4px; }
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info{ margin-top:0; }

/* Dashboard panel (template: woocommerce/myaccount/dashboard.php) */
.km-acct-hello{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 16px; margin-bottom:6px; }
.km-acct-hello h2{ margin:0; font-size:1.6rem; }
.km-acct-pill{
	font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
	padding:4px 10px; border-radius:var(--radius);
	background:var(--paper-3); color:var(--text-soft);
}
.km-acct-pill--ok{ background:var(--verify-tint); color:var(--verify); }
.km-acct-pill--warn{ background:var(--amber-tint); color:var(--amber-deep); }
.km-acct-lead{ color:var(--text-soft); margin:0 0 26px; }
.km-acct-owed{
	display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px;
	background:var(--paper-2); border:1px solid var(--line); border-left:4px solid var(--amber);
	padding:16px 20px; margin:0 0 26px; border-radius:var(--radius);
}
.km-acct-owed strong{ font-family:var(--font-mono); font-size:1.25rem; color:var(--ink); }
.km-acct-grid{
	display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:14px; margin:0 0 8px;
}
.km-acct-card{
	display:block; padding:18px 18px 16px;
	background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
	color:var(--text); text-decoration:none !important;
	transition:border-color .15s ease, transform .15s ease;
}
.km-acct-card:hover{ border-color:var(--ink); transform:translateY(-1px); }
.km-acct-card b{
	display:block; font-family:var(--font-head); font-size:0.95rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink); margin-bottom:4px;
}
.km-acct-card span{ display:block; font-size:0.9rem; color:var(--text-soft); line-height:1.45; }

/* Account home: Shop now (inactive until approval) and the store chooser. */
.km-acct-shop{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:0 0 26px; }
.km-acct-shop__btn{ min-height:48px; padding-left:34px; padding-right:34px; }
.km-acct-shop__btn.is-disabled{ opacity:.45; cursor:not-allowed; pointer-events:none; filter:grayscale(.4); }
.km-acct-shop__note{ font-size:0.9rem; color:var(--text-soft); }
.km-store-chooser{ margin:0 0 26px; }
.km-store-chooser h3{ font-size:1.05rem; margin:0 0 12px; }
.km-store-chooser__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:14px; }
.km-store-chooser__card{
	display:flex; flex-direction:column; gap:6px; margin:0; padding:16px 18px;
	background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
}
.km-store-chooser__card.is-on{ border-color:var(--amber); box-shadow:inset 4px 0 0 var(--amber); }
.km-store-chooser__card b{ font-family:var(--font-head); letter-spacing:0.03em; text-transform:uppercase; color:var(--ink); }
.km-store-chooser__card span{ font-size:0.9rem; color:var(--text-soft); flex:1 1 auto; }
.km-store-chooser__card .btn{ margin-top:6px; min-height:44px; justify-content:center; }

/* Adding to an order already placed (B2B plugin order-actions.php). */
.km-addto{
	display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:12px 16px;
	background:var(--amber-tint); border-bottom:2px solid var(--amber); color:var(--ink); font-weight:600;
}
.km-addto > span{ flex:1 1 260px; }
.km-addto__form{ margin:0; }
.km-addto__form .btn{ min-height:44px; }
.km-addto__form .btn[disabled]{ opacity:.5; cursor:not-allowed; }
.km-addto__stop{ font-size:0.9rem; text-decoration:underline; color:var(--ink); }
.km-panel__foot .km-addto__form{ margin-top:10px; }
.km-panel__foot .km-addto__form .btn{ width:100%; justify-content:center; }
.km-order-actions{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
.km-order-actions .button{ min-height:44px; display:inline-flex; align-items:center; }
.km-pod{ margin:12px 0; color:var(--text-soft); }

@media (max-width: 781px){
	.woocommerce-account .woocommerce{ grid-template-columns:1fr; gap:26px; }
	.woocommerce-MyAccount-navigation ul{ display:flex; flex-wrap:wrap; }
	.woocommerce-MyAccount-navigation li{ border-bottom:0; border-right:1px solid var(--line); }
	.woocommerce-MyAccount-navigation li a{ padding:11px 14px; border-left:0; border-bottom:3px solid transparent; }
	.woocommerce-MyAccount-navigation li.is-active a{ border-left:0; border-bottom-color:var(--amber); }
}

/* ==========================================================================
   AGE VERIFICATION GATE
   ========================================================================== */

.age-gate{
	position:fixed; inset:0; z-index:9999;
	background:var(--ink);
	color:var(--on-ink);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px;
}
.age-gate-panel{
	max-width:460px;
	width:100%;
	text-align:center;
	border:1px solid var(--ink-line);
	padding:44px 36px;
	position:relative;
}
.age-gate-panel::before,
.age-gate-panel::after{
	content:""; position:absolute; width:20px; height:20px; border:2px solid var(--amber);
}
.age-gate-panel::before{ top:-6px; left:-6px; border-right:0; border-bottom:0; }
.age-gate-panel::after{ bottom:-6px; right:-6px; border-left:0; border-top:0; }
.age-gate-eyebrow{
	font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
	color:var(--amber); margin-bottom:18px;
}
.age-gate-panel h2{ color:var(--on-ink); font-size:1.5rem; margin-bottom:14px; }
.age-gate-panel p{ color:var(--on-ink-soft); margin:0 auto 26px; font-size:0.94rem; }
.age-gate-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
.age-gate-legal{
	margin-top:22px; font-family:var(--font-mono); font-size:0.68rem; color:var(--on-ink-mute); line-height:1.6;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer{
	background:var(--ink);
	color:var(--on-ink-soft);
	padding-top:64px;
}
.footer-grid{
	display:grid;
	grid-template-columns:1.4fr 1fr 1fr 1.2fr;
	gap:40px;
	padding-bottom:48px;
	border-bottom:1px solid var(--ink-line);
}
.footer-col h3,
.footer-col h4{
	color:var(--on-ink);
	font-size:0.86rem;
	letter-spacing:0.06em;
	margin-bottom:18px;
}
.footer-col p, .footer-col address{ font-style:normal; color:var(--on-ink-soft); font-size:0.92rem; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col ul a{ color:var(--on-ink-soft); font-size:0.92rem; }
.footer-col ul a:hover{ color:var(--amber); }
.footer-logo{ font-family:var(--font-head); font-size:1.3rem; color:var(--on-ink); margin-bottom:14px; display:block; }
.footer-logo span{ color:var(--amber); }

.footer-bottom{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:20px;
	flex-wrap:wrap;
	padding:26px 0;
	font-family:var(--font-mono);
	font-size:0.72rem;
	color:var(--on-ink-mute);
}

.footer-disclaimer{
	padding:26px 0;
	border-top:1px solid var(--ink-line);
	font-family:var(--font-mono);
	font-size:0.72rem;
	line-height:1.8;
	color:var(--on-ink-mute);
}
.footer-disclaimer strong{ color:var(--on-ink-soft); }

@media (max-width: 900px){
	.footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
	.footer-grid{ grid-template-columns:1fr; }
	.section-head{ flex-direction:column; align-items:flex-start; }
	.section-head .section-note{ text-align:left; }
}

/* ==========================================================================
   SHOP FILTERS — facet sidebar + results bar
   ========================================================================== */

.km-shop{ display:grid; grid-template-columns:236px minmax(0,1fr); gap:32px; align-items:start; }
.km-shop__side{ position:sticky; top:24px; }
.km-shop__main{ min-width:0; }
.km-shop__main ul.products{ grid-template-columns:repeat(3, 1fr); gap:18px; }
@media (min-width: 1200px){ .km-shop__main ul.products{ grid-template-columns:repeat(4, 1fr); } }

/* WooCommerce's own archive title block, above the sidebar/grid split. */
.woocommerce-products-header{ margin:0 0 18px; }
.woocommerce-products-header__title,
.woocommerce-content h1.page-title{ font-size:clamp(1.5rem, 2.4vw, 2rem); margin:0 0 14px; }
.woocommerce-products-header .term-description,
.woocommerce-products-header .term-description p{ color:var(--text-soft); font-size:0.95rem; margin:0; }
.woocommerce-content .woocommerce-breadcrumb{ margin-bottom:14px; }
.site-main.woocommerce-content{ padding:22px 0 70px; }

.km-facet__sub{ margin:2px 0 4px 14px; border-left:1px solid var(--line); padding-left:10px; }
.km-facet__sub li a{ font-size:0.86rem; padding:4px 0; }

.km-facets{
	background:#fff;
	border:1px solid rgba(211,211,199,0.55);
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow-sm);
	padding:4px 18px 6px;
}
.km-facets__toggle{ display:none; }
.km-facets__toggle::-webkit-details-marker{ display:none; }

.km-facet{ padding:16px 0; border-bottom:1px solid var(--line); }
.km-facet:last-child, .km-facet--actions{ border-bottom:0; }
.km-facet h3,
.km-facet h4{
	margin:0 0 10px;
	font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase;
	color:var(--text-soft);
}
.km-facet__hint{ margin:0; font-size:0.85rem; color:var(--text-mute); }

.km-facet__list li a{
	display:flex; justify-content:space-between; align-items:baseline; gap:10px;
	padding:5px 0; font-size:0.92rem; color:var(--text);
}
.km-facet__list li a:hover{ color:var(--ink); }
.km-facet__list li a.is-on{ color:var(--ink); font-weight:600; }
.km-facet__list li a.is-on::before{ content:"\2713\00a0"; color:var(--amber-deep); }
.km-facet__list li a span{ font-family:var(--font-mono); font-size:0.7rem; color:var(--text-mute); }

.km-check{ display:flex; align-items:center; gap:9px; padding:5px 0; font-size:0.92rem; cursor:pointer; }
.km-check input{ accent-color:var(--ink); width:16px; height:16px; margin:0; }
.km-check em{ margin-left:auto; font-style:normal; font-family:var(--font-mono); font-size:0.7rem; color:var(--text-mute); }

.km-facet__search{ display:flex; gap:6px; }
.km-facet__search input{ flex:1 1 auto; min-width:0; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; font-size:0.92rem; }
.km-facet__search input:focus-visible,
.km-facet__range input:focus-visible,
.km-sort select:focus-visible{ outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber); }
.km-facet__search .btn{ padding:0 14px; font-size:1rem; }

.km-facet__range{ display:flex; align-items:center; gap:6px; margin-top:10px; }
.km-facet__range input{ width:68px; min-width:0; padding:9px 10px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; font-size:0.9rem; }
.km-facet__range span{ color:var(--text-mute); }
.km-facet__range .btn{ padding:8px 12px; font-size:0.72rem; }

.km-facet--actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding-top:18px; }
.km-facet--actions .btn{ padding:11px 18px; }
.km-facet__clear{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--amber-deep); }
.km-facet__clear:hover{ text-decoration:underline; }

.km-results{
	display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 20px;
	margin:0 0 18px; padding:10px 16px;
	background:#fff;
	border:1px solid rgba(211,211,199,0.55);
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow-sm);
}
.km-results .woocommerce-result-count{
	margin:0; font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-mute);
}
.km-sort{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-soft); }
.km-sort select{ padding:9px 32px 9px 12px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; font-family:var(--font-body); font-size:0.9rem; color:var(--text); cursor:pointer; }

.km-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.km-chip{
	display:inline-flex; align-items:center; gap:8px;
	padding:6px 10px 6px 13px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-pill);
	box-shadow:var(--shadow-sm);
	font-size:0.82rem; color:var(--text);
}
.km-chip a{ font-weight:700; color:var(--text-mute); line-height:1; }
.km-chip a:hover{ color:var(--alert); }

@media (max-width: 900px){
	.km-shop{ grid-template-columns:1fr; gap:18px; }
	.km-shop__side{ position:static; }
	.km-facets{ padding:0 16px; }
	.km-facets__toggle{
		display:flex; align-items:center; gap:10px; padding:12px 0; cursor:pointer;
		font-family:var(--font-head); font-size:0.86rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink);
	}
	.km-facets__toggle::after{ content:"\25BE"; margin-left:auto; color:var(--text-mute); }
	.km-facets[open] .km-facets__toggle::after{ content:"\25B4"; }
	.km-facets__n{ background:var(--amber); color:var(--ink); font-family:var(--font-mono); font-size:0.66rem; padding:2px 7px; border-radius:var(--radius-pill); }
	.km-facets[open] .km-facets__toggle{ border-bottom:1px solid var(--line); }
	.km-shop__main ul.products{ grid-template-columns:repeat(2, 1fr); gap:14px; }
}

/* ==========================================================================
   PRODUCT CARDS — override WooCommerce's float/percentage widths, which
   were shrinking every card to 22% of its grid cell, then lay the card
   out the way a shopper expects: photo on white, plain-case name, big
   price, stock line, full-width button.
   ========================================================================== */

.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after,
ul.products::before, ul.products::after{ content:none; display:none; }

.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
.woocommerce ul.products li.product,
ul.products li.product{
	width:auto; float:none; margin:0; clear:none;
	display:flex; flex-direction:column;
	background:#fff;
	border:1px solid rgba(211,211,199,0.55);
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow-sm);
	padding:0 0 16px;
	overflow:hidden;
	transition:border-color .15s ease, box-shadow .18s ease, transform .18s ease;
}
.woocommerce ul.products li.product:hover,
ul.products li.product:hover{
	border-color:rgba(211,211,199,0.9);
	box-shadow:var(--shadow-lg);
	transform:translateY(-2px);
}
@media ( prefers-reduced-motion: reduce ){
	.woocommerce ul.products li.product:hover,
	ul.products li.product:hover{ transform:none; }
}

ul.products li.product a.woocommerce-LoopProduct-link{ display:flex; flex-direction:column; flex:1 1 auto; }
ul.products li.product img,
ul.products li.product .attachment-woocommerce_thumbnail{
	width:100%; aspect-ratio:1/1; object-fit:contain;
	background:var(--paper-2); padding:16px; margin:0 0 12px;
	border-bottom:1px solid rgba(211,211,199,0.5);
}
ul.products li.product .woocommerce-loop-product__title{
	font-family:var(--font-body);
	font-size:0.95rem; font-weight:500; line-height:1.35;
	text-transform:none; letter-spacing:0;
	margin:0 16px 6px; color:var(--ink);
	min-height:2.7em;
}
ul.products li.product .km-stock{
	margin:0 16px 6px;
	font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase;
}
ul.products li.product .km-stock--in{ color:var(--verify); }
ul.products li.product .km-stock--low{ color:var(--amber-deep); }
ul.products li.product .km-stock--out{ color:var(--alert); }
ul.products li.product .price{
	margin:auto 16px 0; padding-top:4px;
	font-family:var(--font-body); font-size:1.18rem; font-weight:700; color:var(--ink);
}
ul.products li.product .price del{ font-size:0.85rem; font-weight:400; }
ul.products li.product .price ins{ font-weight:700; }
ul.products li.product .button{
	margin:12px 16px 0; display:block; text-align:center;
	padding:11px 14px; font-size:0.78rem; white-space:nowrap; border-radius:var(--radius);
}
ul.products li.product .button.loading{ opacity:0.6; }
ul.products li.product .added_to_cart{ display:none; }   /* the drawer opens instead */

/* Cart & checkout pages render through page.php — lift the article limits. */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content{ max-width:none; }
.woocommerce-cart .entry-content ul,
.woocommerce-checkout .entry-content ul{ list-style:none; padding:0; max-width:none; }
.woocommerce-cart .entry-content a,
.woocommerce-checkout .entry-content a{ text-decoration:none; }

/* Brand line under the product name on every card. */
ul.products li.product .km-brand-line{
	margin:-2px 16px 6px;
	font-family:var(--font-mono);
	font-size:0.66rem;
	letter-spacing:0.08em;
	text-transform:uppercase;
	color:var(--text-mute);
}

.cta-band h2{ margin-top:12px; }

/* ==========================================================================
   WHOLESALE APPLICATION PAGE — pitch beside the form
   ========================================================================== */

.km-wholesale__head{
	display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:20px 40px;
}
.km-wholesale__lead{ color:var(--text-soft); max-width:56ch; margin:10px 0 0; }
.km-facts{ display:flex; gap:26px; flex-shrink:0; }
.km-facts li{ display:flex; flex-direction:column; gap:2px; padding-left:16px; border-left:2px solid var(--amber); }
.km-facts strong{ font-family:var(--font-head); font-size:1.4rem; line-height:1; color:var(--ink); }
.km-facts span{ font-size:0.8rem; color:var(--text-soft); }

.km-wholesale__grid{
	display:grid;
	grid-template-columns:minmax(0,1fr) 340px;
	gap:40px;
	align-items:start;
}
.km-apply{ max-width:640px; }
.km-apply h2{ font-size:1.1rem; letter-spacing:0.04em; margin:30px 0 14px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.km-apply h2:first-child{ margin-top:0; }
.km-apply .woocommerce-form-row{ margin-bottom:18px; }
.km-apply__row{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.km-apply__note{ margin:-4px 0 18px; font-size:0.9rem; color:var(--text-soft); }
.km-apply__hint{ display:block; font-size:0.86rem; color:var(--text-mute); margin-bottom:6px; }
.km-apply .input-text,
.km-apply textarea.input-text{
	width:100%; border:1px solid var(--line); background:#fff; padding:11px 14px; border-radius:var(--radius); color:var(--text);
}
.km-apply .input-text:focus,
.km-apply textarea:focus{ outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber); }
.km-apply input[type="file"]{ width:100%; font-size:0.9rem; }
/* Outranks .woocommerce-form-row label (small mono caps for field names):
   this label is the sentence the applicant is agreeing to. */
.km-apply .woocommerce-form-row .km-apply__check{
	display:flex; align-items:center; gap:12px; min-height:44px; margin:0; cursor:pointer;
	font-family:var(--font-body); font-size:1rem; font-weight:600; letter-spacing:0; text-transform:none; color:var(--text);
}
.km-apply .km-apply__check input[type="checkbox"]{ flex:0 0 auto; width:22px; height:22px; margin:0; accent-color:var(--amber); }
.km-apply .btn{ margin-top:8px; }

.km-aside-card{
	background:#fff; border:1px solid var(--line); border-radius:6px; padding:22px 22px 20px; margin-bottom:16px;
}
.km-aside-card h3{ font-size:1rem; letter-spacing:0.05em; margin:0 0 16px; }
.km-aside-card--ink{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
.km-aside-card--ink h3{ color:var(--amber); }
.km-ticks li{
	position:relative; padding:6px 0 6px 24px; font-size:0.92rem; color:var(--on-ink);
	border-bottom:1px solid var(--ink-line);
}
.km-ticks li:last-child{ border-bottom:0; }
.km-ticks li::before{ content:"\2713"; position:absolute; left:2px; top:6px; color:var(--amber); font-weight:700; }
.km-aside-card__foot{ margin:16px 0 0; font-size:0.86rem; color:var(--on-ink-soft); }
.km-aside-card__foot a{ color:var(--amber); text-decoration:underline; text-underline-offset:2px; }

@media (max-width: 900px){
	.km-wholesale__grid{ grid-template-columns:1fr; gap:28px; }
	.km-wholesale__aside{ order:-1; }
	.km-facts{ gap:18px; }
}
@media (max-width: 560px){
	.km-apply__row{ grid-template-columns:1fr; }
}

/* Cart: the way back to the shelves, beside the way on to checkout. */
.woocommerce .cart .actions .km-continue{
	float:left;
	margin-right:10px;
	background:var(--paper-3);
	color:var(--text);
	border:1px solid var(--line);
}
.woocommerce .cart .actions .km-continue:hover{ background:#fff; border-color:var(--ink); }
.km-checkout-back{ margin:0 0 18px; font-size:.95rem; }
.km-checkout-back a{ color:var(--text-soft); text-decoration:none; }
.km-checkout-back a:hover{ color:var(--ink); text-decoration:underline; }

/* ---------------------------------------------------------------------
 * Phones
 *
 * Placed last on purpose: the 900px block above also sets the header
 * grid, and whichever rule comes later wins when both match.
 *
 * Letting the header shrink (min-width:0, further up) stopped the page
 * swiping sideways, but a header that can shrink can also collapse into
 * itself -- the wordmark was running straight through ACCOUNT and the
 * cart. So the row is sized to actually fit a phone rather than merely
 * allowed to squash.
 * ------------------------------------------------------------------- */
@media (max-width: 560px){
	.km-head{ gap:8px 10px; }
	.site-logo{ min-width:0; }
	.site-logo .mark{ min-width:0; flex-wrap:nowrap; gap:5px; }
	.site-logo .mark strong,
	.site-logo .mark span{ font-size:1rem; white-space:nowrap; }
	.km-head__big{ font-size:0.64rem; }
	.km-head__link,
	.km-head__cart{ padding:6px 3px; }
	.km-head__cart{ gap:4px; }
	.km-head__cart-icon{ width:24px; height:24px; }
	.km-head__cart-icon svg{ width:22px; height:22px; }
}

/* Below this the full wordmark cannot fit beside the account links
   without one running into the other, so it shortens to KINGS. */
@media (max-width: 365px){
	.site-logo .mark span{ display:none; }
}

/* ---------------------------------------------------------------------
 * Accessibility
 *
 * Last in the file on purpose: these correct rules declared earlier and
 * have to win on source order.
 * ------------------------------------------------------------------- */

/* Skip link. Off screen until it is tabbed to, then it is the first
   thing on the page -- the header and the category mega-menu are a long
   way to tab past on every single page otherwise. */
.km-skip{
	position:absolute;
	left:-9999px;
	top:0;
	z-index:1000;
	padding:12px 20px;
	background:var(--amber);
	color:var(--ink);
	font-family:var(--font-head);
	font-size:0.85rem;
	font-weight:600;
	text-decoration:none;
	border-radius:0 0 6px 0;
}
.km-skip:focus{
	left:0;
	outline:3px solid var(--ink);
	outline-offset:-3px;
}

/* The landing point should not draw a focus ring of its own; it is a
   region, not a control. */
#km-main:focus{ outline:none; }

/* The hero eyebrow was reading at 3.5:1 on the dark panel, under the
   4.5:1 small text needs. The --light modifier was already meant to fix
   this, but the base .km-eyebrow rule is declared further down the file
   at equal specificity and quietly won. */
.km-eyebrow.km-eyebrow--light{ color:var(--amber); }

/* 2.2:1 on white. Pale grey on white looks restrained and is unreadable
   to anyone whose eyes are not perfect. */
.woocommerce-form-login .lost_password a,
.woocommerce-form-login .lost_password{ color:var(--text-soft); }

/* Menu entries were 18px tall. A target in a menu is not inline text
   and wants 24px, which is also just easier to hit on a phone. */
.km-cats__col ul li a{
	display:block;
	padding:5px 0;
	min-height:24px;
}

/* The count riding on the bar's cart button, for signed-in buyers.

   Styled by where it sits rather than by a class of its own: WooCommerce
   replaces every .cart-count wholesale when the basket changes, so any
   extra class on it survives exactly until the first add to cart. */
.km-bar__cta .cart-count{
	/* The badge on the header's cart icon is absolutely positioned at
	   top:-6px right:-2px, deliberately hanging off the icon's corner.
	   This one rides inside a pill button whose sheen needs
	   overflow:hidden -- so left absolute it hung outside the button and
	   was sliced off at the rounded edge. It sits in the flow instead. */
	position:static;
	top:auto; right:auto;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:20px;
	height:20px;
	margin-left:8px;
	padding:0 6px;
	border-radius:10px;
	background:var(--ink);
	color:var(--on-ink);
	font-size:0.72rem;
	font-weight:700;
	line-height:1;
}

/* A filtered page that found nothing still has to explain itself. */
.km-empty{ padding:22px 24px; }
.km-empty__line{ margin:0 0 14px; font-size:1rem; }
.km-empty__act{ margin:0; }
.km-chips__clear{
	align-self:center;
	margin-left:4px;
	font-size:0.78rem;
	color:var(--text-soft);
	text-decoration:underline;
}
.km-chips__clear:hover{ color:var(--ink); }

/* ---------------------------------------------------------------------
 * Product names on the grid
 *
 * These were being cut through the middle of a line, and the half-line
 * left showing was the pack size -- 5PK against 10PK is a different
 * product, so it is the last thing that should be guessed at.
 *
 * The old rule asked for -webkit-line-clamp, which needs
 * display:-webkit-box. The browser refuses that here and computes
 * flow-root instead, even when the value is set inline, so the clamp
 * never ran and the box got clipped at an arbitrary height.
 *
 * Height is set to an exact multiple of the line instead. A cut then
 * always lands between lines rather than through one, and because the
 * minimum and maximum agree, every card in the row is the same height.
 * Four lines holds the longest name in the catalogue as it stands.
 * ------------------------------------------------------------------- */
ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
	display:block;
	line-height:1.35;
	min-height:5.4em;
	max-height:5.4em;
	overflow:hidden;
}

/* ---------------------------------------------------------------------
 * One gutter down the card
 *
 * WooCommerce's own sheet sets margin:0 on the loop title at the same
 * weight as the theme's rule, so the name -- alone among everything on
 * the card -- sat hard against both edges while the price and buttons
 * were inset. Leading with `body` puts these one step above that rule
 * so the gutter actually lands, and every element takes the same one,
 * so the card reads as a column instead of a stack of near-misses.
 * ------------------------------------------------------------------- */
:root{ --card-gutter: 18px; }

body.woocommerce ul.products li.product .woocommerce-loop-product__title,
body ul.products li.product .woocommerce-loop-product__title{
	margin:0 0 6px;
	padding:0 var(--card-gutter);
}

body ul.products li.product .price,
body ul.products li.product .km-stock,
body ul.products li.product .km-brand-line,
body ul.products li.product .km-line-tile__actions{
	margin-left:0;
	margin-right:0;
	padding-left:var(--card-gutter);
	padding-right:var(--card-gutter);
}

body ul.products li.product .button{
	margin-left:var(--card-gutter);
	margin-right:var(--card-gutter);
}

/* The tile's actions are pills.
 *
 * They sit under a rounded card and above a pill-shaped stepper, so a
 * 10px corner was the one square-ish thing left in the column. Stated
 * here, below the shop section, so it beats the rule that set the
 * general control radius. */
body ul.products li.product .button,
body.woocommerce ul.products li.product .button{
	border-radius:var(--radius-pill);
}

/* The actions already carry the gutter as padding; their buttons must
   not add it again on top. */
body ul.products li.product .km-line-tile__actions .button{
	margin-left:0;
	margin-right:0;
}

@media (max-width: 560px){
	:root{ --card-gutter: 14px; }
}

/* Shop grouped by line: the tile opens a family, it does not buy one. */
.km-line-back{ margin:0 0 6px; font-size:.9rem; }
.km-line-back a{ color:var(--text-soft); text-decoration:none; }
.km-line-back a:hover{ color:var(--ink); text-decoration:underline; }
.km-line-title{
	margin:0 0 18px;
	font-size:1.25rem;
	display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.km-line-title span{
	font-family:var(--font-mono);
	font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
	color:var(--text-mute);
}
ul.products li.product .km-line-tile__go{
	display:block;
	text-align:center;
}

/* ==========================================================================
   PHONE — iPhone and Safari
   Appended last so these win over anything above them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Nothing is ever cut

   The loop title used to be pinned to an exact four lines so a row of
   cards matched. The longest name in the catalogue is 110 characters and
   needs far more than four lines on a phone, and what got cut was the end
   of the name -- where the pack size lives. 5PK against 10PK is a
   different product, so the end of the name is the last thing to lose.

   The minimum stays, because it keeps short names from collapsing a card;
   the maximum goes. Cards in a grid row stretch to the tallest anyway, and
   the actions are pushed to the bottom so they still line up.
   -------------------------------------------------------------------------- */

ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
	max-height:none;
	overflow:visible;
	overflow-wrap:break-word;
	hyphens:none;
}

/* Cards in a row stretch to the tallest, so the actions are pushed to the
   bottom and still line up across the row however long the names run. */
body ul.products li.product .km-line-tile__actions{ margin-top:auto; }

/* A long unbroken code or word must wrap rather than push the page wide. */
body{ overflow-wrap:break-word; }

/* --------------------------------------------------------------------------
   2 · Safari must not zoom when a field is tapped

   iOS zooms the whole page whenever a focused field is under 16px, and
   then leaves the page zoomed. Every control that takes typing is 16px on
   a touch device -- it is the difference between the shop feeling steady
   and feeling like it jumps away from your thumb.
   -------------------------------------------------------------------------- */

@media (pointer: coarse), (max-width: 900px){
	input, select, textarea,
	.km-search__input,
	.km-facet__search input,
	.km-facet__range input,
	.km-sort select,
	.km-apply input[type="file"],
	.km-gate-card .woocommerce-form-login input.input-text{
		font-size:16px;
	}

	/* Room for the larger text in the two narrow ones. */
	.km-facet__range input{ width:78px; }
	.km-search__cat{ max-width:112px; }
}

/* --------------------------------------------------------------------------
   3 · The notch and the home indicator

   Everything pinned to an edge sat under the rounded corners or the home
   bar. viewport-fit=cover is on the page now, so these resolve to real
   numbers on an iPhone and to zero everywhere else.
   -------------------------------------------------------------------------- */

@supports (padding: max(0px)){
	.km-panel{
		padding-bottom:max(0px, env(safe-area-inset-bottom));
	}
	.main-nav{
		padding-bottom:max(40px, calc(40px + env(safe-area-inset-bottom)));
	}
	body.age-gate-locked .km-age-gate{
		padding-bottom:max(0px, env(safe-area-inset-bottom));
	}
}

/* --------------------------------------------------------------------------
   4 · Smoothness

   Scrolling inside a drawer must not drag the page behind it, momentum
   must survive, and a tap must not flash a grey box over a button.
   -------------------------------------------------------------------------- */

.km-panel,
.km-panel__body,
.km-cats__panel,
.main-nav{
	-webkit-overflow-scrolling:touch;
	overscroll-behavior:contain;
}

a, button, summary, .km-qty__btn, input[type="submit"]{
	-webkit-tap-highlight-color:rgba(198,144,46,0.18);
}

/* Tables and code carry their own sideways scroll; the page never does. */
html, body{ max-width:100%; }

/* --------------------------------------------------------------------------
   5 · Touch targets

   Anything a thumb aims at is at least 44px on a phone, which is the size
   Apple's own guidance asks for.
   -------------------------------------------------------------------------- */

@media (pointer: coarse){
	.km-qty__btn,
	.km-search__go,
	.km-search__scan,
	.nav-toggle,
	.km-panel__close{
		min-width:44px;
		min-height:44px;
	}
	.km-facet__list li a,
	.km-check{ min-height:40px; align-items:center; }
}

/* Footer and list links are read and tapped, so they get a real target
   on a touch screen rather than the 17px a line of text gives them. */
@media (pointer: coarse){
	.footer-col a,
	.footer-links a,
	.km-cats__col li a{
		display:inline-flex;
		align-items:center;
		min-height:40px;
	}
}

/* "Added in the last 30 days" — the line that makes New arrivals mean
   something rather than being the shop in another order. */
.km-newnote{
	margin:0 0 14px;
	font-family:var(--font-mono);
	font-size:0.74rem;
	letter-spacing:0.06em;
	text-transform:uppercase;
	color:var(--text-mute);
}

/* The homepage hero, for someone already signed in.
 *
 * That block explains what Kings Distro is and invites an application.
 * A buyer who is already approved knows both, and every line of it
 * pushes the products further down the page. So for them it shrinks to
 * a strip and the merchandise leads. Signed-out visitors keep the full
 * pitch, because for them it is doing the work. */
.km-hero--tight{ padding-block:clamp(18px,3vw,30px); }
.km-hero--tight .km-hero__copy h1{
	font-size:clamp(1.5rem,3.4vw,2.1rem);
	margin-bottom:8px;
}
.km-hero--tight .km-hero__copy p{
	font-size:0.95rem;
	max-width:62ch;
	margin-bottom:16px;
}
.km-hero--tight .hero-actions .btn{ padding:11px 20px; }

/* ==========================================================================
   QUICK CATEGORIES — phones only
   The full category bar is inside the slide-out menu below 900px, so this
   strip carries the same destinations where a thumb can reach them.
   ========================================================================== */

.km-quickcats{ display:none; }

@media (max-width: 900px){
	.km-quickcats{
		display:block;
		background:var(--ink-2);
		border-top:1px solid var(--ink-line);
	}
	.km-quickcats__row{
		display:flex;
		gap:8px;
		margin:0;
		padding:10px 16px;
		list-style:none;
		overflow-x:auto;
		-webkit-overflow-scrolling:touch;
		overscroll-behavior-x:contain;
		scrollbar-width:none;
	}
	.km-quickcats__row::-webkit-scrollbar{ display:none; }
	.km-quickcats__row li{ flex:0 0 auto; }
	.km-quickcats__row a{
		display:inline-flex;
		align-items:center;
		min-height:40px;
		padding:0 15px;
		border-radius:var(--radius-pill);
		background:rgba(237,238,234,0.08);
		border:1px solid var(--ink-line);
		color:var(--on-ink);
		font-family:var(--font-head);
		font-size:0.78rem;
		letter-spacing:0.05em;
		text-transform:uppercase;
		white-space:nowrap;
		text-decoration:none;
	}
	.km-quickcats__row a:hover{ background:rgba(237,238,234,0.16); }
	.km-quickcats__row li.is-on a{
		background:var(--amber);
		border-color:var(--amber);
		color:var(--ink);
	}
	.km-quickcats__row a:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }

	/* The strip already carries the categories, so the menu button is
	   just for brands and the quick links now. */
	.nav-toggle{ margin-right:2px; }
}

@supports ( padding: max(0px) ){
	@media (max-width: 900px){
		.km-quickcats__row{
			padding-left:max(16px, env(safe-area-inset-left));
			padding-right:max(16px, env(safe-area-inset-right));
		}
	}
}

/* ==========================================================================
   ALREADY SEEN
   A product whose page has been opened reads back in a different colour, so
   a buyer working through a long line can tell at a glance where they got
   to. This is the browser's own :visited state -- nothing is recorded on our
   side and nothing follows them to another device.

   :visited can only carry colour, and only on the link itself, so the title
   inherits from its anchor rather than setting a colour of its own.
   ========================================================================== */

ul.products li.product a.woocommerce-LoopProduct-link,
ul.products li.product a.woocommerce-loop-product__link{
	color:var(--text);
}
ul.products li.product a.woocommerce-LoopProduct-link:visited,
ul.products li.product a.woocommerce-loop-product__link:visited{
	color:var(--visited);
}
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3{
	color:inherit;
}

/* The flavour rows inside a line, and the line tiles on the shop front. */
.km-flavour__name:visited,
.km-line__name:visited,
.km-tile__name:visited{
	color:var(--visited);
}

@media ( prefers-color-scheme: dark ){
	:root:not([data-theme="light"]){
		--visited: var(--visited-dk);
	}
}

/* ==========================================================================
   MY ACCOUNT ON A PHONE

   The account area was built as a 240px sidebar beside the content, and that
   grid had no mobile layer. On a phone the sidebar kept its 240px and the
   content column was left with 31 pixels -- measured -- so the orders table
   spilled out of a sliver and the menu wrapped into a broken lattice.

   Below 900px the two columns become one, the menu becomes a row of pills
   that scrolls sideways, and every table folds into cards with its own
   column headings as labels.
   ========================================================================== */

/* WooCommerce sets the menu list to flex-wrap, which is what tore it into a
   lattice inside the narrow sidebar. Stacked is what a sidebar menu wants. */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
	display:block;
}

@media (max-width: 900px){

	/* One column, in reading order: who you are, where to go, what is there. */
	.woocommerce-account.logged-in .woocommerce{
		grid-template-columns:minmax(0,1fr);
		gap:22px;
	}
	.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
	.woocommerce-account.logged-in .woocommerce-MyAccount-content{
		grid-column:1;
	}

	/* The menu as a thumb-sized strip rather than a boxed list. */
	.woocommerce-account .woocommerce-MyAccount-navigation ul{
		display:flex;
		flex-wrap:nowrap;
		gap:8px;
		padding:2px;
		background:none;
		border:0;
		border-radius:0;
		overflow-x:auto;
		overflow-y:hidden;
		-webkit-overflow-scrolling:touch;
		overscroll-behavior-x:contain;
		scrollbar-width:none;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{ display:none; }

	.woocommerce-account .woocommerce-MyAccount-navigation li{
		flex:0 0 auto;
		/* The separators belong to a stacked list. These are pills. */
		border:0;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation li a{
		display:inline-flex;
		align-items:center;
		min-height:44px;
		padding:0 16px;
		border:1px solid var(--line);
		border-left:1px solid var(--line);
		border-radius:var(--radius-pill);
		background:var(--paper-2);
		white-space:nowrap;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
	.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a{
		background:var(--ink);
		border-color:var(--ink);
		color:var(--on-ink);
	}

	/* Tables become cards. Every cell already carries its column name in
	   data-title, so each line can label itself without a header row. */
	.woocommerce-account table.shop_table thead{
		position:absolute;
		width:1px; height:1px;
		overflow:hidden;
		clip-path:inset(50%);
		white-space:nowrap;
	}
	.woocommerce-account table.shop_table,
	.woocommerce-account table.shop_table tbody,
	.woocommerce-account table.shop_table tr,
	.woocommerce-account table.shop_table td{
		display:block;
		width:auto;
		border-collapse:separate;
	}
	.woocommerce-account table.shop_table{ border:0; }
	.woocommerce-account table.shop_table tr{
		margin:0 0 12px;
		padding:4px 16px;
		background:#FFFFFF;
		border:1px solid var(--line);
		border-radius:var(--radius);
	}
	.woocommerce-account table.shop_table td{
		display:flex;
		flex-wrap:wrap;
		align-items:baseline;
		/* The label is pushed left and everything after it groups to the
		   right, so a value in two parts -- "$1,284.50 for 34 items" --
		   reads as one thing instead of being spread across the row. */
		justify-content:flex-end;
		column-gap:8px;
		row-gap:2px;
		padding:11px 0;
		border-top:0;
		border-bottom:1px solid var(--paper-3);
		text-align:right;
	}
	.woocommerce-account table.shop_table td:last-child{ border-bottom:0; }
	.woocommerce-account table.shop_table td::before{
		content:attr(data-title);
		flex:0 0 auto;
		margin-right:auto;
		padding-right:12px;
		text-align:left;
		font-family:var(--font-mono);
		font-size:0.68rem;
		letter-spacing:0.08em;
		text-transform:uppercase;
		color:var(--text-mute);
	}
	/* A cell with no column name of its own shouldn't leave a blank gutter. */
	.woocommerce-account table.shop_table td:not([data-title])::before{ content:none; }

	/* The actions cell is buttons, not a value: give them the full width. */
	.woocommerce-account table.shop_table td.woocommerce-orders-table__cell-order-actions{
		flex-direction:column;
		align-items:stretch;
		gap:8px;
	}
	.woocommerce-account table.shop_table td.woocommerce-orders-table__cell-order-actions::before{
		text-align:left;
		margin-bottom:2px;
	}
	.woocommerce-account table.shop_table td .button,
	.woocommerce-account table.shop_table td .woocommerce-button{
		display:flex;
		align-items:center;
		justify-content:center;
		width:100%;
		min-height:44px;
		margin:0;
		text-decoration:none;
	}

	/* The header above it all. */
	.km-acct-head{
		flex-direction:column;
		align-items:stretch;
		gap:18px;
		margin-bottom:24px;
	}
	.km-acct-actions{ gap:10px; }
	.km-acct-actions .btn{
		flex:1 1 0;
		min-height:46px;
		display:inline-flex;
		align-items:center;
		justify-content:center;
		text-align:center;
	}

	.woocommerce-account .col2-set{ grid-template-columns:minmax(0,1fr); }
}

/* Buttons in the account area are buttons, not prose links: the underline
   comes from .entry-content and has no business on them. */
.woocommerce-account .entry-content .btn,
.woocommerce-account .entry-content .button,
.woocommerce-account .entry-content .woocommerce-button,
.woocommerce-account .entry-content .woocommerce-MyAccount-navigation a{
	text-decoration:none;
}

/* ==========================================================================
   PRODUCT CARDS — the photo carries the card, the price is the answer

   Set against the way Amazon lays out a result: the picture is nearly the
   full width of the column, the name is small and quiet, and the price is
   the biggest piece of text on the card.

   Every rule here is written twice. WooCommerce styles the same elements
   through selectors that carry an extra .woocommerce class, so the theme's
   own card rules were losing the cascade on every shop page -- which is
   why the price was rendering at WooCommerce's 0.857em (13.7px), the
   smallest thing on a card that exists to sell at that price. The
   body.woocommerce copy outranks it; the bare copy still covers the
   shelves on the front page, which render outside that wrapper.

   The name is NOT clamped to a fixed number of lines. These names run to
   110 characters and the pack size at the end is what tells two otherwise
   identical products apart, so a clamp hides the one word that matters.
   Smaller type is what buys the space back instead.
   ========================================================================== */

ul.products li.product img,
ul.products li.product .attachment-woocommerce_thumbnail,
body.woocommerce ul.products li.product img,
body.woocommerce ul.products li.product .attachment-woocommerce_thumbnail{
	/* 6px instead of 16px: the photo is already object-fit:contain, so the
	   padding was shrinking an image that had nothing to bleed. */
	padding:6px;
	margin:0 0 10px;
}

ul.products li.product .woocommerce-loop-product__title,
body.woocommerce ul.products li.product .woocommerce-loop-product__title{
	font-family:var(--font-body);
	font-size:0.88rem;
	font-weight:500;
	line-height:1.3;
	margin:0 14px 4px;
	text-transform:none;
	letter-spacing:0;
	/* Keeps the prices on one line across a row without capping the name. */
	min-height:2.6em;
	color:var(--ink);
}

ul.products li.product .km-brand-line,
body.woocommerce ul.products li.product .km-brand-line{
	margin:0 14px 5px;
	font-size:0.62rem;
}

ul.products li.product .price,
body.woocommerce ul.products li.product .price{
	margin:auto 14px 0;
	padding-top:2px;
	font-family:var(--font-body);
	font-size:1.22rem;
	font-weight:700;
	color:var(--ink);
	line-height:1.2;
}
ul.products li.product .price del,
body.woocommerce ul.products li.product .price del{
	font-size:0.8rem; font-weight:400; color:var(--text-mute);
}
ul.products li.product .price ins,
body.woocommerce ul.products li.product .price ins{
	text-decoration:none; font-weight:700; color:var(--amber-deep);
}

ul.products li.product .button,
body.woocommerce ul.products li.product .button{
	margin:8px 14px 0;
	padding:10px 12px;
	font-size:0.74rem;
}

.woocommerce ul.products li.product,
ul.products li.product{ padding:0 0 12px; }

@media ( max-width: 600px ){
	ul.products li.product img,
	ul.products li.product .attachment-woocommerce_thumbnail,
	body.woocommerce ul.products li.product img,
	body.woocommerce ul.products li.product .attachment-woocommerce_thumbnail{ padding:4px; }

	ul.products li.product .woocommerce-loop-product__title,
	body.woocommerce ul.products li.product .woocommerce-loop-product__title{
		font-size:0.84rem;
		margin:0 12px 4px;
	}
	ul.products li.product .km-brand-line,
	body.woocommerce ul.products li.product .km-brand-line,
	ul.products li.product .price,
	body.woocommerce ul.products li.product .price{ margin-left:12px; margin-right:12px; }

	ul.products li.product .price,
	body.woocommerce ul.products li.product .price{ font-size:1.14rem; }

	ul.products li.product .button,
	body.woocommerce ul.products li.product .button{ margin:8px 12px 0; }
}

/* Card actions are a full thumb's height on touch screens.
 *
 * At 10px padding the "See flavours" / "Quick order" pills came out
 * 34px tall on a phone -- under the 44px a finger needs, and the two sit
 * stacked 8px apart. Coarse pointers cover tablets too, which share the
 * problem but not the phone breakpoint. Flex keeps the label centred
 * once the box is taller than its text. */
@media ( max-width: 700px ), ( pointer: coarse ){
	ul.products li.product .button,
	body.woocommerce ul.products li.product .button{
		min-height:44px;
		display:flex;
		align-items:center;
		justify-content:center;
		box-sizing:border-box;
	}
}

/* The line actions own the gutter, at every width.
 *
 * The general card-button rule is restated with `body.woocommerce` (to
 * beat WooCommerce) and so outranked the earlier rule zeroing the side
 * margins inside the actions -- each pill was pushed 12-14px right and
 * hung off its card. The same ancestry plus the actions class wins. */
body ul.products li.product .km-line-tile__actions .button,
body.woocommerce ul.products li.product .km-line-tile__actions .button{
	margin-left:0;
	margin-right:0;
}

/* The slide-out menu's buttons stack, full width, at a thumb's height.
 *
 * Side by side in a 340px drawer, "Sign in to shop" and "Wholesale
 * accounts" wrapped onto two lines inside a fixed 30px pill and spilled
 * out of it. Stacked, each label has the drawer's full width to sit on
 * one line, and the height follows the text instead of clipping it. */
@media (max-width: 900px){
	.km-nav__end{
		flex-direction:column;
		align-items:stretch;
		gap:10px;
	}
	.km-nav__cta{
		height:auto;
		min-height:44px;
		padding:10px 18px;
		justify-content:center;
		text-align:center;
		line-height:1.25;
		font-size:0.85rem;
	}
	.km-nav__pill{
		align-self:flex-start;
	}
}

/* No yellow progress line across the top when a link is tapped.
 * The owner found it distracting; the page's own fade-out still shows
 * that something is happening. (motion.js still adds the element; it is
 * simply never shown.) */
.km-progress{ display:none !important; }

/* ------------------------------------------------------------------
   Password eye (1.13.3): sits inside its field, vertically centred,
   with a 44px tap target. (An old top:38px pushed it below the box.)
   ------------------------------------------------------------------ */
.woocommerce form .password-input,
.woocommerce-page form .password-input{ position:relative; display:block; width:100%; }
.woocommerce form .password-input input.input-text,
.woocommerce-page form .password-input input.input-text{ padding-right:52px !important; }
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input,
.woocommerce-account form .show-password-input{
	position:absolute !important; top:50% !important; right:4px !important; bottom:auto !important;
	transform:translateY(-50%); width:44px; height:44px; margin:0 !important; padding:0 !important;
	display:flex; align-items:center; justify-content:center;
	background:transparent !important; border:0 !important; box-shadow:none !important; line-height:1;
}

/* Phone sweep (1.13.3) ------------------------------------------------ */
@media (max-width: 560px){
	/* Wholesale page facts: three equal columns instead of a row that ran
	   ~150px off the right edge (the third fact was cut off). */
	.km-facts{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; width:100%; flex-shrink:1; }
	.km-facts li{ padding-left:10px; min-width:0; }
	.km-facts strong{ font-size:1.15rem; }
	.km-facts span{ font-size:0.72rem; line-height:1.25; }
	/* The logo and "Hello, sign in" were 16px / 26px tall to tap. */
	.site-logo{ min-height:44px; justify-content:center; }
	.km-head__link,
	.km-head__cart{ min-height:44px; }
}

/* ==========================================================================
   Card inset (1.14.3)

   Everything inside a product card sits on one inner edge. Before this the
   name ran to the card's edge on the home page (WooCommerce's own
   ".woocommerce ul.products li.product .woocommerce-loop-product__title"
   outranked the theme there), sat doubly indented on category pages, and
   the Add to cart button / stepper filled the card edge to edge. The
   "html:root body" prefix (one more class-weight than the theme's
   body.woocommerce rules) lets this one block win in every context; the
   inset lives in one variable.
   ========================================================================== */
ul.products{ --km-card-inset:14px; }
@media ( max-width: 600px ){
	ul.products{ --km-card-inset:12px; }
}

html:root body ul.products li.product .woocommerce-loop-product__title,
html:root body .woocommerce ul.products li.product .woocommerce-loop-product__title{
	margin:0 0 4px;
	padding:0 var(--km-card-inset);
}

html:root body ul.products li.product .km-brand-line,
html:root body .woocommerce ul.products li.product .km-brand-line,
html:root body ul.products li.product .price,
html:root body .woocommerce ul.products li.product .price,
html:root body ul.products li.product .km-stock,
html:root body .woocommerce ul.products li.product .km-stock{
	margin-left:0;
	margin-right:0;
	padding-left:var(--km-card-inset);
	padding-right:var(--km-card-inset);
}

html:root body ul.products li.product > .km-qty,
html:root body .woocommerce ul.products li.product > .km-qty,
html:root body ul.products li.product > .button,
html:root body .woocommerce ul.products li.product > .button,
html:root body ul.products li.product > .km-line-tile__actions,
html:root body .woocommerce ul.products li.product > .km-line-tile__actions{
	align-self:stretch;
	width:auto;
	margin-left:var(--km-card-inset);
	margin-right:var(--km-card-inset);
}

html:root body ul.products li.product > .km-wish,
html:root body .woocommerce ul.products li.product > .km-wish{
	align-self:flex-start;
	margin-left:var(--km-card-inset);
}

/* ---------------------------------------------------------------------
   Order page: "Your check" card + address grid (1.14.5–1.14.6)
   The check box used to share the class .km-check with the filter
   checkboxes, which squeezed it into one row and shrank its file picker
   to 16px; it now has its own .km-checkpay card. WooCommerce's clearfix
   ::before on .col2-set became the first cell of the address grid,
   pushing Billing to the right and Shipping down a row.
   --------------------------------------------------------------------- */
.woocommerce-account .col2-set::before,
.woocommerce-account .col2-set::after{ content:none; display:none; }
/* Billing and Shipping boxes line up at the same height. */
.woocommerce-customer-details .col2-set > .col-1,
.woocommerce-customer-details .col2-set > .col-2{ display:flex; flex-direction:column; }
.woocommerce-customer-details .col2-set address{ flex:1 1 auto; }

html:root body .km-checkpay{
	background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
	padding:18px 22px; margin:24px 0;
}
html:root body .km-checkpay__title{ margin:0 0 6px; }
html:root body .km-checkpay__status{ margin:0 0 14px; color:var(--text-soft); }
html:root body .km-checkpay__form{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0; }
html:root body .km-checkpay__file{
	flex:1 1 240px; min-width:0; width:auto; height:auto; margin:0;
	font-size:16px; padding:6px; background:#fff;
	border:1px solid var(--line); border-radius:var(--radius-sm);
}
html:root body .km-checkpay__file::file-selector-button{
	margin-right:12px; padding:8px 14px; min-height:36px;
	border:1px solid var(--line); border-radius:var(--radius-pill);
	background:var(--paper-2); color:var(--ink); font:inherit; font-size:.9rem; cursor:pointer;
}
html:root body .km-checkpay__form .button{ flex:0 0 auto; margin:0; min-height:44px; }
@media (max-width: 600px){
	html:root body .km-checkpay{ padding:16px; }
	html:root body .km-checkpay__form .button{ flex:1 1 100%; }
}

/* ==========================================================================
   PROMOTIONS + RECOMMENDATIONS -- inc/upsell.php + assets/js/upsell.js

   Flash Sales strip + page, deal badges on cards, bundles, Buy more save
   more, Frequently bought together, cart progress + "Complete your
   order", sponsored category banner / Featured row. Every rule carries
   the "html:root body" prefix so it outranks WooCommerce's ".woocommerce"
   card rules (see the card inset note above). Shells are sized before the
   data arrives (skeletons, .is-reserved) so nothing jumps.
   ========================================================================== */

html:root body{
	--km-up-red:   #A23B2E;
	--km-up-green: #3F6B4A;
	--km-up-track: #E3E4DD;
}

/* ---- shared bits ------------------------------------------------------ */
html:root body .km-up-icon{ width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
html:root body .km-up-icon--bolt{ fill:currentColor; stroke:none; }

html:root body .km-up-chip{
	display:inline-flex; align-items:center;
	min-height:22px; padding:2px 9px;
	border-radius:var(--radius-pill);
	background:var(--ink); color:#fff;
	font-family:var(--font-mono); font-size:0.68rem; font-weight:600;
	letter-spacing:0.04em; line-height:1.2; white-space:nowrap;
}
html:root body .km-up-chip--discount{ background:var(--km-up-red); }
html:root body .km-up-chip--limited{ background:var(--amber); color:var(--ink); }
html:root body .km-up-chip--new{ background:var(--km-up-green); }
html:root body .km-up-chip--best{ background:var(--ink); }
html:root body .km-up-chip--save{ background:var(--verify-tint); color:var(--km-up-green); }

html:root body .km-up-bar{
	position:relative; display:block; width:100%; height:6px;
	border-radius:var(--radius-pill); background:var(--km-up-track); overflow:hidden;
}
html:root body .km-up-bar__fill{
	position:absolute; inset:0 auto 0 0;
	border-radius:inherit; background:var(--amber);
	transition:width .4s ease;
}

html:root body .km-up-clock{ display:inline-flex; align-items:center; gap:8px; }
html:root body .km-up-clock[hidden]{ display:none; }
html:root body .km-up-clock__label{ font-size:0.8rem; }
html:root body .km-up-clock__time{
	display:inline-block; min-width:9ch;
	padding:3px 10px; border-radius:var(--radius-sm);
	background:var(--amber); color:var(--ink);
	font-family:var(--font-mono); font-weight:700; font-size:0.9rem;
	font-variant-numeric:tabular-nums; text-align:center;
}

html:root body .km-up-price{ display:inline-flex; align-items:baseline; gap:8px; max-width:100%; white-space:nowrap; overflow:hidden; }
html:root body .km-up-price ins{ text-decoration:none; color:var(--km-up-red); font-weight:700; }
html:root body .km-up-price del{ color:var(--text-mute); font-size:0.8em; font-weight:400; overflow:hidden; text-overflow:ellipsis; }

html:root body .km-up-note{ margin:6px 0 0; font-size:0.82rem; color:var(--km-up-red); min-height:0; }
html:root body .km-up-note:empty{ display:none; }
html:root body .km-up-h2{ font-size:clamp(1.2rem, 2vw, 1.45rem); margin:0 0 14px; }
html:root body .km-up-empty{ padding:40px 0; text-align:center; color:var(--text-soft); }

/* Skeletons: the height of what is coming. */
html:root body .km-up-skel{
	display:flex; flex-direction:column; gap:10px;
	flex:0 0 180px; min-height:330px; padding:12px;
	border-radius:var(--radius-lg); background:#fff;
	border:1px solid rgba(211,211,199,0.55);
}
html:root body .km-up-skel span{ display:block; border-radius:var(--radius-sm); background:linear-gradient(90deg, var(--paper-3) 0%, var(--paper-2) 50%, var(--paper-3) 100%); background-size:200% 100%; animation:km-up-shimmer 1.4s linear infinite; }
html:root body .km-up-skel__pic{ aspect-ratio:1/1; width:100%; }
html:root body .km-up-skel__line{ height:12px; width:90%; }
html:root body .km-up-skel__line--short{ width:55%; }
html:root body .km-up-skel--bundle{ flex-basis:320px; min-height:300px; }
html:root body .km-up-skelrow{ display:flex; gap:14px; overflow:hidden; padding:2px 0 8px; }
html:root body .km-up-skelrow .km-up-skel{ flex-basis:218px; min-height:380px; }
@keyframes km-up-shimmer{ from{ background-position:100% 0; } to{ background-position:-100% 0; } }
@media ( prefers-reduced-motion: reduce ){
	html:root body .km-up-skel span{ animation:none; }
	html:root body .km-up-bar__fill{ transition:none; }
}

/* ---- deal badges on product cards ------------------------------------ */
html:root body ul.products li.product .km-up-badges{
	position:absolute; top:10px; left:10px; z-index:3;
	display:flex; flex-wrap:wrap; gap:4px; max-width:calc(100% - 64px);
	pointer-events:none;
}
html:root body ul.products li.product .km-up-badges[hidden]{ display:none; }
/* WooCommerce's own "Sale!" flash would sit on the same corner. */
html:root body ul.products li.product.km-up-has-badges .onsale{ display:none; }
html:root body ul.products li.product .price .km-up-price ins{ font-size:1em; }

/* ---- Flash Sales strip (home) ---------------------------------------- */
html:root body .km-up-flash{ padding:22px 0 6px; }
html:root body .km-up-flash__frame{
	background:#fff; border-radius:var(--radius-lg);
	box-shadow:var(--shadow-sm); border:1px solid rgba(211,211,199,0.55);
	overflow:hidden;
}
html:root body .km-up-flash__head{
	display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px;
	padding:12px 18px; background:var(--ink); color:var(--on-ink);
}
html:root body .km-up-flash__title{
	display:inline-flex; align-items:center; gap:8px; margin:0;
	font-size:1.2rem; color:#fff; letter-spacing:0.02em;
}
html:root body .km-up-flash__title svg{ width:20px; height:20px; fill:var(--amber); }
html:root body .km-up-flash__all{
	margin-left:auto; display:inline-flex; align-items:center; min-height:44px;
	color:var(--amber); font-weight:600; font-size:0.9rem;
}
html:root body .km-up-flash__all:hover{ color:#fff; }
html:root body .km-up-flash__track{
	display:flex; gap:12px; padding:14px 18px 16px;
	overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
	scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
html:root body .km-up-flash__track > *{ scroll-snap-align:start; }

/* ---- a deal card (strip + Flash Sales page) -------------------------- */
html:root body .km-up-deal{
	position:relative; display:flex; flex-direction:column; gap:6px;
	flex:0 0 180px; min-width:0; padding:10px 10px 12px;
	background:#fff; border:1px solid rgba(211,211,199,0.55); border-radius:var(--radius-lg);
	transition:box-shadow .18s ease, border-color .15s ease;
}
html:root body .km-up-deal:hover{ box-shadow:var(--shadow-md); border-color:rgba(211,211,199,0.9); }
html:root body .km-up-deal.is-out{ opacity:0.6; }
html:root body .km-up-deal__pic{ position:relative; display:block; border-radius:var(--radius); background:var(--paper-2); overflow:hidden; }
html:root body .km-up-deal__pic img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; padding:10px; margin:0; border:0; }
html:root body .km-up-deal__off{
	position:absolute; top:8px; right:8px;
	padding:3px 8px; border-radius:var(--radius-pill);
	background:var(--km-up-red); color:#fff;
	font-family:var(--font-mono); font-size:0.75rem; font-weight:700;
}
html:root body .km-up-deal__name{
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
	min-height:2.7em; font-size:0.86rem; line-height:1.35; color:var(--ink);
}
html:root body .km-up-deal__price{ display:flex; align-items:baseline; gap:8px; white-space:nowrap; overflow:hidden; }
html:root body .km-up-deal__price ins{ text-decoration:none; font-size:1.08rem; font-weight:700; color:var(--ink); }
html:root body .km-up-deal__price del{ font-size:0.8rem; color:var(--text-mute); overflow:hidden; text-overflow:ellipsis; }
html:root body .km-up-stock{ display:flex; flex-direction:column; gap:4px; }
html:root body .km-up-stock__text{ font-size:0.74rem; font-weight:600; color:var(--km-up-red); }
html:root body .km-up-stock.is-out .km-up-stock__text{ color:var(--text-mute); }
html:root body .km-up-deal__limit{ margin:0; font-size:0.72rem; color:var(--text-soft); }
html:root body .km-up-deal .km-qty{ margin-top:auto; }
html:root body .km-up-deal__off-btn{
	margin-top:auto; min-height:40px; width:100%;
	border-radius:var(--radius-pill); border:1px solid var(--line);
	background:var(--paper-2); color:var(--text-mute); font-weight:600; font-size:0.82rem;
}

/* ---- Flash Sales page ------------------------------------------------ */
html:root body .km-up-flashpage{ padding:28px 0 48px; }
html:root body .km-up-flashpage__head h1{ display:flex; align-items:center; gap:10px; margin:0 0 6px; }
html:root body .km-up-flashpage__head h1 svg{ width:28px; height:28px; fill:var(--amber); }
html:root body .km-up-flashpage__head p{ margin:0 0 22px; color:var(--text-soft); max-width:60ch; }
html:root body .km-up-flashpage__grid{
	display:grid; gap:14px;
	grid-template-columns:repeat(auto-fill, minmax(176px, 1fr));
}
html:root body .km-up-flashpage__grid > *{ flex-basis:auto; }
html:root body .km-up-flashsec{ margin:0 0 30px; }
html:root body .km-up-flashsec.is-ended{ opacity:0.55; }
html:root body .km-up-flashsec__head{
	display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px;
	margin:0 0 14px; padding:12px 16px; border-radius:var(--radius-lg);
	background:var(--ink); color:var(--on-ink);
}
html:root body .km-up-flashsec__title{ display:inline-flex; align-items:center; gap:8px; margin:0; font-size:1.1rem; color:#fff; }
html:root body .km-up-flashsec__title .km-up-icon{ color:var(--amber); }

/* ---- bundles ---------------------------------------------------------- */
html:root body .km-up-bundles__track{
	display:flex; gap:14px; padding:2px 0 10px;
	overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
html:root body .km-up-bundle{
	display:flex; flex-direction:column; gap:12px;
	flex:0 0 340px; max-width:100%; min-width:0; padding:16px;
	scroll-snap-align:start;
	background:#fff; border:1px solid rgba(211,211,199,0.55); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
}
html:root body .km-up-bundle.is-ended{ opacity:0.55; }
html:root body .km-up-bundle__top{ display:flex; gap:12px; align-items:flex-start; }
html:root body .km-up-bundle__pic{ flex:0 0 76px; width:76px; height:76px; object-fit:contain; border-radius:var(--radius); background:var(--paper-2); padding:6px; margin:0; }
html:root body .km-up-bundle__copy{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
html:root body .km-up-bundle__title{ margin:0; font-family:var(--font-body); font-size:1rem; font-weight:600; line-height:1.3; text-transform:none; letter-spacing:0; }
html:root body .km-up-bundle__desc{ margin:0; font-size:0.82rem; color:var(--text-soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
html:root body .km-up-bundle__ends{ margin:0; font-size:0.76rem; color:var(--text-soft); }
html:root body .km-up-bundle__ends .km-up-clock__time{ font-size:0.76rem; padding:1px 6px; }
html:root body .km-up-bundle__items{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
html:root body .km-up-bundle__item a{ position:relative; display:block; width:56px; height:56px; border-radius:var(--radius-sm); background:var(--paper-2); border:1px solid var(--line); }
html:root body .km-up-bundle__item img{ width:100%; height:100%; object-fit:contain; padding:4px; margin:0; border:0; }
html:root body .km-up-bundle__qty{ position:absolute; right:-4px; bottom:-4px; padding:1px 5px; border-radius:var(--radius-pill); background:var(--ink); color:#fff; font-family:var(--font-mono); font-size:0.66rem; }
html:root body .km-up-bundle__plus{ color:var(--text-mute); font-weight:700; }
html:root body .km-up-bundle__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:auto; }
html:root body .km-up-bundle__prices{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; flex:1 1 140px; min-width:0; }
html:root body .km-up-bundle__label{ flex:1 0 100%; font-size:0.72rem; color:var(--text-soft); text-transform:uppercase; letter-spacing:0.06em; font-family:var(--font-mono); }
html:root body .km-up-bundle__now{ font-size:1.25rem; color:var(--ink); }
html:root body .km-up-bundle__was{ font-size:0.85rem; color:var(--text-mute); }
html:root body .km-up-bundle__add{ min-height:44px; padding:0 18px; border-radius:var(--radius-pill); white-space:nowrap; }
html:root body .km-up-bundle__add[disabled]{ opacity:0.5; cursor:default; }
html:root body .km-up-bundle__foot .km-up-note{ flex:1 0 100%; }

/* ---- product page ---------------------------------------------------- */
html:root body .km-up-pdp-deal{ margin:10px 0 14px; }
html:root body .km-up-pdp-deal.is-reserved{ min-height:118px; }
html:root body .km-up-pdp-deal:empty:not(.is-reserved){ display:none; }
html:root body .km-up-pdp-deal__chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
html:root body .km-up-flashbox{ border:1px solid var(--amber); border-radius:var(--radius-lg); overflow:hidden; background:#fff; }
html:root body .km-up-flashbox.is-ended{ opacity:0.55; }
html:root body .km-up-flashbox__head{
	display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px;
	padding:8px 14px; background:var(--ink); color:var(--on-ink);
}
html:root body .km-up-flashbox__title{ display:inline-flex; align-items:center; gap:6px; color:#fff; font-size:0.95rem; }
html:root body .km-up-flashbox__title .km-up-icon{ color:var(--amber); }
html:root body .km-up-flashbox__head .km-up-clock{ margin-left:auto; }
html:root body .km-up-flashbox__body{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; padding:10px 14px 6px; }
html:root body .km-up-flashbox__price{ display:inline-flex; align-items:baseline; gap:10px; }
html:root body .km-up-flashbox__price ins{ text-decoration:none; font-size:1.5rem; font-weight:700; color:var(--km-up-red); }
html:root body .km-up-flashbox__price del{ color:var(--text-mute); }
html:root body .km-up-flashbox .km-up-stock{ padding:0 14px 12px; }

html:root body .km-up-tiers{ margin:16px 0; }
html:root body .km-up-tiers:empty{ margin:0; }
html:root body .km-up-tiers__card{ border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; overflow:hidden; }
html:root body .km-up-tiers__title{
	display:flex; align-items:center; gap:8px; margin:0; padding:12px 14px;
	font-family:var(--font-body); font-size:0.95rem; font-weight:700; text-transform:none; letter-spacing:0;
	background:var(--paper-2); border-bottom:1px solid var(--line);
}
html:root body .km-up-tiers__title .km-up-icon{ color:var(--amber-deep); }
html:root body .km-up-tiers__table{ width:100%; margin:0; border-collapse:collapse; font-size:0.9rem; }
html:root body .km-up-tiers__table th,
html:root body .km-up-tiers__table td{ height:44px; padding:6px 14px; text-align:left; border:0; border-bottom:1px solid rgba(211,211,199,0.6); background:transparent; }
html:root body .km-up-tiers__table thead th{ height:34px; font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-soft); font-weight:500; }
html:root body .km-up-tiers__table tbody tr:last-child th,
html:root body .km-up-tiers__table tbody tr:last-child td{ border-bottom:0; }
html:root body .km-up-tiers__table tbody tr.is-on th,
html:root body .km-up-tiers__table tbody tr.is-on td{ background:var(--amber-tint); }
html:root body .km-up-tiers__table tbody tr.is-on th{ box-shadow:inset 4px 0 0 var(--amber); }
html:root body .km-up-tiers__note{ margin:0; padding:10px 14px; font-size:0.84rem; color:var(--text-soft); border-top:1px solid rgba(211,211,199,0.6); }
html:root body .km-up-tiers__note:empty{ display:none; }

html:root body .km-up-pdp-more{ clear:both; display:flex; flex-direction:column; gap:28px; margin:8px 0 28px; }
html:root body .km-up-pdp-more > [hidden]{ display:none; }
html:root body .km-up-fbt.is-reserved{ min-height:300px; }
html:root body .km-up-pdp-bundles.is-reserved{ min-height:330px; }
html:root body .km-up-fbt__list{ display:flex; align-items:stretch; gap:10px; margin:0; padding:0; list-style:none; }
html:root body .km-up-fbt__item{
	position:relative; display:flex; flex-direction:column; gap:6px;
	flex:0 1 190px; min-width:0; padding:10px;
	background:#fff; border:1px solid rgba(211,211,199,0.55); border-radius:var(--radius-lg);
}
html:root body .km-up-fbt__item.is-off{ opacity:0.55; }
html:root body .km-up-fbt__plus{ align-self:center; color:var(--text-mute); font-weight:700; font-size:1.2rem; }
html:root body .km-up-fbt__tick{
	position:absolute; top:4px; left:4px; z-index:2;
	display:flex; align-items:center; justify-content:center; width:44px; height:44px; cursor:pointer;
}
html:root body .km-up-fbt__tick input{ width:22px; height:22px; margin:0; accent-color:var(--ink); cursor:pointer; }
html:root body .km-up-fbt__pic{ display:block; border-radius:var(--radius); background:var(--paper-2); }
html:root body .km-up-fbt__pic img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; padding:10px; margin:0; border:0; }
html:root body .km-up-fbt__name{ font-size:0.85rem; line-height:1.35; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
html:root body .km-up-fbt__name em{ font-style:normal; font-weight:600; }
html:root body .km-up-fbt__price{ margin-top:auto; font-weight:700; color:var(--ink); }
html:root body .km-up-fbt__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:14px; }
html:root body .km-up-fbt__total{ font-size:0.95rem; color:var(--text-soft); }
html:root body .km-up-fbt__sum{ color:var(--ink); font-size:1.15rem; }
html:root body .km-up-fbt__add{ min-height:44px; padding:0 20px; border-radius:var(--radius-pill); }
html:root body .km-up-fbt__add[disabled]{ opacity:0.5; cursor:default; }
html:root body .km-up-fbt__foot .km-up-note{ flex:1 0 100%; }
@media ( max-width: 600px ){
	/* One product per row: picture, name, price, a big tick box. */
	html:root body .km-up-fbt__list{ flex-direction:column; gap:8px; }
	html:root body .km-up-fbt__plus{ display:none; }
	html:root body .km-up-fbt__item{
		flex:0 0 auto; display:grid; grid-template-columns:44px 64px minmax(0,1fr) auto;
		align-items:center; gap:10px; padding:8px 12px 8px 4px;
	}
	html:root body .km-up-fbt__tick{ position:static; }
	html:root body .km-up-fbt__pic img{ padding:6px; }
	html:root body .km-up-fbt__price{ margin-top:0; }
	html:root body .km-up-fbt__add{ flex:1 1 100%; }
	html:root body .km-up-fbt.is-reserved{ min-height:380px; }
	html:root body .km-up-bundle{ flex-basis:300px; }
}

/* ---- category: sponsored banner + Featured row ----------------------- */
html:root body .km-up-catbanner{
	position:relative; display:flex; align-items:center; overflow:hidden;
	min-height:150px; margin:0 0 18px; border-radius:var(--radius-lg);
	background:var(--ink); color:var(--on-ink); text-decoration:none;
}
html:root body .km-up-catbanner__pic{ position:absolute; inset:0; }
html:root body .km-up-catbanner__pic img{ width:100%; height:100%; object-fit:cover; margin:0; }
html:root body .km-up-catbanner__pic::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,26,43,0.88) 0%, rgba(14,26,43,0.55) 45%, rgba(14,26,43,0) 80%); }
html:root body .km-up-catbanner__copy{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:6px; max-width:min(520px, 100%); padding:22px 26px; }
html:root body .km-up-catbanner__tag{ font-family:var(--font-mono); font-size:0.64rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--on-ink-soft); }
html:root body .km-up-catbanner__title{ font-family:var(--font-head); font-size:clamp(1.25rem, 3vw, 1.8rem); line-height:1.15; color:#fff; }
html:root body .km-up-catbanner__sub{ font-size:0.92rem; color:var(--on-ink); }
html:root body .km-up-catbanner__go{ display:inline-flex; align-items:center; min-height:44px; padding:0 18px; margin-top:4px; border-radius:var(--radius-pill); background:var(--amber); color:var(--ink); font-weight:600; font-size:0.88rem; }
html:root body a.km-up-catbanner:hover .km-up-catbanner__go{ background:#fff; }
html:root body .km-up-featured{ margin:0 0 22px; }
html:root body .km-up-featured .section-head{ margin-bottom:10px; }
html:root body .km-up-featured .km-shelf__viewport{ margin:0; padding:4px 0 12px; }

/* ---- cart drawer, cart page, checkout -------------------------------- */
html:root body .km-up-cart{ display:flex; flex-direction:column; gap:10px; margin:0 0 14px; }
html:root body .km-up-cart:empty,
html:root body .km-up-cart[hidden]{ display:none; }
html:root body .km-up-cartpage{ display:flex; flex-direction:column; gap:10px; margin:0 0 22px; padding:16px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); }
html:root body .km-up-cartpage[hidden]{ display:none; }
html:root body .km-up-prog{ display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-radius:var(--radius); background:var(--paper-2); }
html:root body .km-up-prog__text{ display:flex; align-items:center; gap:8px; margin:0; font-size:0.86rem; font-weight:600; color:var(--ink); }
html:root body .km-up-prog__text .km-up-icon{ color:var(--amber-deep); }
html:root body .km-up-prog.is-done{ background:var(--verify-tint); }
html:root body .km-up-prog.is-done .km-up-prog__text,
html:root body .km-up-prog.is-done .km-up-icon{ color:var(--km-up-green); }
html:root body .km-up-prog.is-done .km-up-bar__fill{ background:var(--km-up-green); }
html:root body .km-up-nudge{
	display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:4px 8px;
	padding:8px 12px; border-radius:var(--radius); border:1px dashed var(--amber); background:#fff;
	font-size:0.84rem; color:var(--ink);
}
html:root body .km-up-nudge .km-up-icon{ color:var(--amber-deep); }
html:root body .km-up-nudge__reward{ color:var(--km-up-green); white-space:nowrap; }
html:root body .km-up-nudge .km-up-bar{ grid-column:1 / -1; height:4px; }
html:root body .km-up-sugg__title{ margin:6px 0 8px; font-family:var(--font-body); font-size:0.92rem; font-weight:700; text-transform:none; letter-spacing:0; }
html:root body .km-up-sugg__row{
	display:flex; gap:10px; margin:0; padding:0 0 6px; list-style:none;
	overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:thin;
}
html:root body .km-up-sugg__item{
	display:flex; flex-direction:column; gap:4px; flex:0 0 128px; min-width:0; padding:8px;
	scroll-snap-align:start; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
}
html:root body .km-up-sugg__pic{ display:block; border-radius:var(--radius-sm); background:var(--paper-2); }
html:root body .km-up-sugg__pic img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; padding:6px; margin:0; border:0; }
html:root body .km-up-sugg__name{ font-size:0.78rem; line-height:1.3; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
html:root body .km-up-sugg__price{ font-weight:700; font-size:0.88rem; color:var(--ink); }
html:root body .km-up-sugg__add{
	min-height:44px; margin-top:auto; border-radius:var(--radius-pill);
	border:1px solid var(--ink); background:var(--ink); color:#fff; font-weight:600; font-size:0.8rem; cursor:pointer;
}
html:root body .km-up-sugg__add:hover{ background:var(--ink-2); }
html:root body .km-up-sugg__add[disabled]{ opacity:0.6; cursor:default; }
html:root body .km-up-cartpage .km-up-sugg__item{ flex-basis:150px; }

/* Fee lines in the drawer totals: deals read as savings. */
html:root body .km-panel__total--fee span:first-child{ font-size:0.86rem; color:var(--text-soft); min-width:0; overflow-wrap:anywhere; padding-right:10px; }
html:root body .km-panel__total--saving span:last-child{ color:var(--km-up-green); font-weight:600; white-space:nowrap; }

/* ---- phone ------------------------------------------------------------ */
@media ( max-width: 600px ){
	html:root body .km-up-flash{ padding-top:14px; }
	html:root body .km-up-flash__head{ padding:10px 14px; gap:6px 12px; }
	html:root body .km-up-flash__title{ font-size:1.05rem; }
	html:root body .km-up-flash__track{ padding:12px 14px 14px; gap:10px; }
	html:root body .km-up-deal,
	html:root body .km-up-skel{ flex-basis:152px; }
	html:root body .km-up-skel{ min-height:300px; }
	html:root body .km-up-skelrow .km-up-skel{ flex-basis:160px; min-height:330px; }
	html:root body .km-up-flashpage__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
	html:root body .km-up-clock__label{ font-size:0.74rem; }
	html:root body .km-up-catbanner{ min-height:132px; }
	html:root body .km-up-catbanner__copy{ padding:16px 18px; }
	html:root body .km-up-catbanner__pic::after{ background:linear-gradient(90deg, rgba(14,26,43,0.9) 0%, rgba(14,26,43,0.6) 70%, rgba(14,26,43,0.35) 100%); }
}
html:root body .km-up-nudge.is-done{ border-style:solid; border-color:var(--km-up-green); background:var(--verify-tint); }
html:root body .km-up-nudge.is-done .km-up-bar__fill{ background:var(--km-up-green); }
/* The drawer's own .km-qty outline (motion.css) is not wanted on deal cards. */
html:root body .km-up-deal .km-qty{ border:0; border-radius:0; background:transparent; }

/* ==========================================================================
   REDESIGN 2026-10-30 -- marketplace storefront (Jumia + Amazon)

   Everything the storefront looks like now is decided in this one block.
   The rules above it are the old "manifest" look; where they fought this
   block they are neutralised HERE (listed in the notes below) rather than
   deleted, so a revert is one cut.

   PREFIX. Every component rule starts with
       html:root body:not(#km-rd)
   The :not(#id) adds one ID's worth of weight, which beats every
   class-only selector above AND WooCommerce's ".woocommerce ul.products
   li.product ..." chains (the reason card rules used to be written twice)
   without !important. Consequences:
     - a state written as a bare class/attribute elsewhere (e.g.
       .km-qty__add[hidden]) would lose to a display set here, so the
       [hidden] attribute is re-asserted below, and display is only set
       here on things that are never toggled by a class;
     - base element rules (h1, body text) use :where(), weight 0, so the
       old per-component colours still win where they are meant to.
   Dashboard pages (.km-dashboard-page) keep their own look: tokens and
   base rules skip them.

   TYPE   Ubuntu 400/500/700 (assets/fonts.css), fallback system stack.
          body 14px/1.45 #313133; card name 14px/19.6px #535357 (2 lines
          on shelves, 3 on grids); card price 18px/700; section title
          32px/700 desktop -> 20px phone; product title 24px/500;
          product price 28px/700. Sentence case everywhere.
   COLOUR navy #0E1A2B header + panels, gold #C6902E CTAs, crimson
          #BE1D3E flash panel + deal panel titles, green #15803D discount
          badges, amber #CA8A04 on #FFF2D6 stock strip, lavender #F3E9FF /
          #6D3FD6, warm tint #FCF1DC, page #F1F1F2, panels #fff.
   SPACE  container 1232px content (16px gutters, 8px on phones);
          panels radius 16 / padding 16 / 16px apart; cards radius 12,
          12px apart (8px on phones).
   ========================================================================== */

/* ---- 0 · tokens + base --------------------------------------------------- */

html:root body:not(#km-rd):not(.km-dashboard-page){
	--font-head: "Ubuntu", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
	--font-body: "Ubuntu", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
	--font-mono: "Ubuntu", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;

	--text:      #313133;
	--text-soft: #535357;
	--text-mute: #75757A;
	--paper:     #F1F1F2;
	--paper-2:   #F7F7F8;
	--paper-3:   #EDEDEF;
	--line:      #E3E3E6;

	--rd-navy:    #0E1A2B;
	--rd-navy-2:  #16283F;
	--rd-gold:    #C6902E;
	--rd-gold-hi: #D9A542;
	--rd-gold-dk: #93691F;
	--rd-crimson: #BE1D3E;
	--rd-green:   #15803D;
	--rd-amber:   #A16207;
	--rd-amber-bg:#FFF2D6;
	--rd-lav:     #F3E9FF;
	--rd-purple:  #6D3FD6;
	--rd-tint:    #FCF1DC;
	--rd-pink:    #FDECEF;
	--rd-card-w:  186px;
	--rd-plus:    32px;
	--rd-gap:     12px;

	background:#F1F1F2;
	color:#313133;
	font-family:var(--font-body);
	font-size:14px;
	line-height:1.45;
}
@media (pointer: coarse){
	html:root body:not(#km-rd):not(.km-dashboard-page){ --rd-plus:44px; }
}
@media (max-width: 600px){
	html:root body:not(#km-rd):not(.km-dashboard-page){ --rd-gap:8px; }
}

/* Anything carrying the hidden attribute stays hidden, whatever display
   a rule in this block gives its class. */
html:root body:not(#km-rd) [hidden]{ display:none !important; }

:where(body:not(.km-dashboard-page)) h1,
:where(body:not(.km-dashboard-page)) h2,
:where(body:not(.km-dashboard-page)) h3,
:where(body:not(.km-dashboard-page)) h4{
	font-family:var(--font-head);
	font-weight:700;
	text-transform:none;
	letter-spacing:0;
	line-height:1.25;
	color:#313133;
}
:where(body:not(.km-dashboard-page)) p{ max-width:none; }

/* Old caps + monospace labels -> sentence case in the body face. */
html:root body:not(#km-rd) :is(
	.top-strip, .site-logo small, .km-head__big, .km-cats__toggle, .km-cats__col h3, .km-cats__col h4,
	.km-navlinks a, .km-nav__cta, .km-nav__pill, .km-quickcats__row a, .km-eyebrow, .age-gate-eyebrow,
	.km-tile__name, .km-tile__go, .km-shelf__more, .km-brand, .km-brand span, .tag-verify-inline, .btn,
	.woocommerce-breadcrumb, .km-facet h3, .km-facet h4, .km-facet__clear, .km-facets__toggle,
	.km-results .woocommerce-result-count, .km-sort, .km-line-title span, .km-newnote,
	.km-acct-card b, .km-acct-pill, .km-store-chooser__card b, .woocommerce-MyAccount-navigation li a,
	.woocommerce-Address-title .edit, .woocommerce-form-row label, .woocommerce-account form .form-row label,
	.woocommerce-account form fieldset legend, .km-gate-card .woocommerce-form-login label,
	.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
	.woocommerce table.shop_table th, ul.products li.product .button, ul.products li.product .km-brand-line,
	ul.products li.product .km-stock, ul.products li.product .onsale,
	.km-up-bundle__label, .km-up-catbanner__tag, .km-up-tiers__table thead th,
	.km-again__title, .km-again__name, .km-again__sku, .km-again__price, .km-flavours th,
	.km-endless__more, .km-endless__status, .km-ad__headline, .km-ad__cta, .km-pick__name, .km-pick__go,
	.km-promo__headline, .km-promo__cta, .km-quick__eyebrow, .km-quick__summary, .km-quick__table th,
	.km-ls__head, .km-ls__clear, .km-bar__name, .km-bar__price, .km-cart-line__remove, .km-cart-tools__btn,
	.km-panel__head h2, .km-panel__total, .km-cart-line__price, .km-cart-line__total, .km-qty__n,
	.km-wishlist__move, .km-wishlist__remove, .km-wishlist__price, .km-scan-fab, .km-trust__item .num,
	.km-trust__item strong, .footer-bottom, .footer-disclaimer, .km-facet__list li a span, .km-check em,
	.km-cats__col li a span, .km-acct-owed strong, .km-facts strong, .km-up-chip, .km-up-clock__time,
	.km-up-deal__off, .km-up-bundle__qty, .process-step .step-no, .km-panel__wish-n, .cart-count
){
	text-transform:none;
	letter-spacing:0;
	font-family:var(--font-body);
}
html:root body:not(#km-rd) .woocommerce-account table.shop_table td::before{
	text-transform:none; letter-spacing:0; font-family:var(--font-body); font-size:12px;
}

/* Containers: 1232px of content, 16px gutters (8px on a phone). */
html:root body:not(#km-rd):not(.km-dashboard-page) .container{ max-width:1264px; padding-left:16px; padding-right:16px; }
@media (max-width: 600px){
	html:root body:not(#km-rd):not(.km-dashboard-page) .container{ padding-left:8px; padding-right:8px; }
}

/* Buttons: sentence-case pills. */
html:root body:not(#km-rd) .btn{
	min-height:44px;
	padding:10px 22px;
	gap:8px;
	justify-content:center;
	font-size:15px;
	font-weight:500;
	line-height:1.2;
	border-radius:999px;
	box-shadow:none;
}
html:root body:not(#km-rd) .btn-amber{ background:var(--rd-gold); color:var(--rd-navy); }
html:root body:not(#km-rd) .btn-amber:hover{ background:var(--rd-gold-hi); color:var(--rd-navy); }
html:root body:not(#km-rd) .btn-ink{ background:var(--rd-navy); color:#fff; }
html:root body:not(#km-rd) .btn-outline{ background:#fff; color:#313133; border:1px solid #D9D9DC; }
html:root body:not(#km-rd) .btn-outline:hover{ background:#F1F1F2; color:#313133; border-color:#C9C9CD; }
html:root body:not(#km-rd) .woocommerce a.button,
html:root body:not(#km-rd) .woocommerce button.button,
html:root body:not(#km-rd) .woocommerce input.button{
	font-size:15px; font-weight:500; padding:12px 22px; border-radius:999px; line-height:1.2;
	background:var(--rd-navy); color:#fff;
}
html:root body:not(#km-rd) .woocommerce a.button:hover,
html:root body:not(#km-rd) .woocommerce button.button:hover{ background:var(--rd-navy-2); color:#fff; }
html:root body:not(#km-rd) .woocommerce a.button.alt,
html:root body:not(#km-rd) .woocommerce button.button.alt{ background:var(--rd-gold); color:var(--rd-navy); }
html:root body:not(#km-rd) .woocommerce a.button.alt:hover,
html:root body:not(#km-rd) .woocommerce button.button.alt:hover{ background:var(--rd-gold-hi); color:var(--rd-navy); }

/* ---- 1 · header ---------------------------------------------------------- */

html:root body:not(#km-rd) .top-strip{ background:#E7E7EA; color:#535357; font-size:12px; }
html:root body:not(#km-rd) .top-strip .container{ padding-top:5px; padding-bottom:5px; }
html:root body:not(#km-rd) .top-strip .tag-verify{ color:var(--rd-gold-dk); font-weight:500; }
html:root body:not(#km-rd) .top-strip .container > span{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width: 600px){
	html:root body:not(#km-rd) .top-strip .container{ flex-wrap:nowrap; }
	html:root body:not(#km-rd) .km-ad__pic img{ max-height:150px; }
}

html:root body:not(#km-rd) .site-header{ background:var(--rd-navy); border-bottom:0; }
html:root body:not(#km-rd) .km-head{ gap:10px 24px; padding-top:10px; padding-bottom:10px; min-height:68px; }

html:root body:not(#km-rd) .site-logo{ justify-content:center; }
html:root body:not(#km-rd) .site-logo .mark{ gap:6px; align-items:baseline; }
html:root body:not(#km-rd) .site-logo .mark strong,
html:root body:not(#km-rd) .site-logo .mark span{ font-family:var(--font-head); font-size:24px; font-weight:700; letter-spacing:-0.01em; }
html:root body:not(#km-rd) .site-logo .mark strong{ color:#fff; }
html:root body:not(#km-rd) .site-logo .mark span{ color:var(--rd-gold); }
html:root body:not(#km-rd) .site-logo small{ margin-top:2px; font-size:11px; color:#9FB0C3; }

/* Search: one white pill, gold "Search" pill inside it on the right. */
html:root body:not(#km-rd) .km-search{
	height:46px; max-width:680px; padding:2px;
	border-radius:999px; background:#fff; box-shadow:none;
}
html:root body:not(#km-rd) .km-search:focus-within{ box-shadow:0 0 0 3px var(--rd-gold); }
html:root body:not(#km-rd) .km-search__cat{
	max-width:120px; padding:0 8px 0 14px; border:0; border-right:1px solid #E3E3E6;
	border-radius:999px 0 0 999px; background:#F1F1F2; color:#535357; font-size:13px;
}
html:root body:not(#km-rd) .km-search__input{
	padding:0 12px 0 38px; font-size:15px; color:#313133; background:#fff no-repeat 12px 50% / 18px 18px;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375757A' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.8-3.8'/%3E%3C/svg%3E");
}
html:root body:not(#km-rd) .km-search__input::placeholder{ color:#75757A; }
html:root body:not(#km-rd) .km-search__scan{ flex-basis:42px; border-left:0; border-radius:999px; color:#535357; background:#fff; }
html:root body:not(#km-rd) .km-search__scan:hover{ background:#F1F1F2; }
html:root body:not(#km-rd) .km-search__go{
	flex:0 0 auto; gap:6px; padding:0 20px; margin-left:4px;
	border-radius:999px; background:var(--rd-gold); color:var(--rd-navy);
	font-size:14px; font-weight:500;
}
html:root body:not(#km-rd) .km-search__go:hover{ background:var(--rd-gold-hi); }
html:root body:not(#km-rd) .km-search__go svg{ display:none; }

/* Account / Orders / Cart: icon + two lines. */
html:root body:not(#km-rd) .header-actions{ gap:2px; }
html:root body:not(#km-rd) .km-head__link,
html:root body:not(#km-rd) .km-head__cart{
	display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto;
	align-items:center; column-gap:8px; row-gap:0;
	padding:6px 10px; min-height:48px; border:0; border-radius:10px; color:#fff;
}
html:root body:not(#km-rd) .km-head__link:hover,
html:root body:not(#km-rd) .km-head__cart:hover{ background:rgba(255,255,255,0.08); border-color:transparent; }
html:root body:not(#km-rd) .km-head__icon{ grid-row:1 / span 2; width:26px; height:26px; }
html:root body:not(#km-rd) .km-head__small{ grid-column:2; font-size:12px; color:#9FB0C3; line-height:1.2; }
html:root body:not(#km-rd) .km-head__big{ grid-column:2; font-size:15px; font-weight:500; line-height:1.2; color:#fff; }
html:root body:not(#km-rd) .km-head__cart .km-head__cart-icon{ grid-row:1 / span 2; width:32px; height:32px; align-items:center; }
html:root body:not(#km-rd) .km-head__cart .km-head__cart-icon svg{ width:28px; height:28px; }
html:root body:not(#km-rd) .km-head__cart .km-head__big{ grid-row:1 / span 2; align-self:center; }
html:root body:not(#km-rd) .cart-count{
	min-width:20px; height:20px; top:-4px; right:-6px; padding:0 5px;
	background:var(--rd-gold); color:var(--rd-navy); font-size:12px; font-weight:700;
	box-shadow:0 0 0 2px var(--rd-navy);
}

/* Category bar: white, icon + label (desktop). The phone drawer below
   900px keeps its own navy look. */
@media (min-width: 901px){
	/* padding-bottom: the drawer's safe-area padding (section "3 · The notch")
	   was applied at every width and made the desktop bar 40px too tall. */
	html:root body:not(#km-rd) .main-nav{ background:#fff; border-bottom:1px solid #E3E3E6; padding-bottom:0; }
	html:root body:not(#km-rd) .km-nav{ min-height:48px; gap:0; }
	html:root body:not(#km-rd) .km-cats__toggle{
		height:48px; padding:0 16px 0 4px; margin-right:4px; gap:8px;
		font-size:15px; font-weight:500; color:#313133; border-right:1px solid #E3E3E6;
	}
	html:root body:not(#km-rd) .km-cats[open] .km-cats__toggle{ background:#F1F1F2; color:#313133; }
	html:root body:not(#km-rd) .km-cats__panel{
		top:calc(100% + 1px); background:#fff; border:0; border-radius:0 0 12px 12px;
		box-shadow:0 18px 40px rgba(14,26,43,0.18);
	}
	html:root body:not(#km-rd) .km-cats__col{ border-right:1px solid #EDEDEF; padding:16px 20px; }
	html:root body:not(#km-rd) .km-cats__col h3,
	html:root body:not(#km-rd) .km-cats__col h4{ font-size:13px; font-weight:700; color:#75757A; }
	html:root body:not(#km-rd) .km-cats__col li a{ font-size:14px; color:#313133; padding:6px 0; }
	html:root body:not(#km-rd) .km-cats__col li a:hover{ color:var(--rd-gold-dk); }
	html:root body:not(#km-rd) .km-navlinks{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:0; min-width:0; }
	html:root body:not(#km-rd) .km-navlinks::-webkit-scrollbar{ display:none; }
	html:root body:not(#km-rd) .km-navlinks a{
		height:48px; padding:0 12px; gap:8px; white-space:nowrap;
		font-size:15px; font-weight:400; color:#313133;
		border-bottom:3px solid transparent; border-top:3px solid transparent;
	}
	html:root body:not(#km-rd) .km-navlinks a:hover,
	html:root body:not(#km-rd) .km-navlinks .current-menu-item > a{ color:var(--rd-navy); border-bottom-color:var(--rd-gold); }
	html:root body:not(#km-rd) .km-navlinks__deals a{ color:var(--rd-crimson); font-weight:500; }
	html:root body:not(#km-rd) .km-nav__end{ gap:8px; padding-left:12px; flex:0 0 auto; }
	html:root body:not(#km-rd) .km-nav__cta{
		height:34px; padding:0 14px; font-size:13px; font-weight:500;
		border:1px solid var(--rd-gold); color:var(--rd-gold-dk); background:#fff;
	}
	html:root body:not(#km-rd) .km-nav__cta:hover{ background:var(--rd-gold); color:var(--rd-navy); }
	html:root body:not(#km-rd) .km-nav__cta--staff{ background:var(--rd-gold); color:var(--rd-navy); }
	html:root body:not(#km-rd) .km-nav__pill{ font-size:12px; font-weight:500; padding:6px 12px; }
}
html:root body:not(#km-rd) .km-navicon{ display:inline-flex; width:18px; height:18px; flex:0 0 18px; color:#535357; }
html:root body:not(#km-rd) .km-navicon svg{ width:18px; height:18px; }

@media (max-width: 1100px){
	html:root body:not(#km-rd) .km-head__small{ display:none; }
	html:root body:not(#km-rd) .km-head__icon{ grid-row:auto; }
	html:root body:not(#km-rd) .km-head__link .km-head__big{ grid-row:1; }
}

/* Phones + small tablets: navy bar (menu, logo, account, cart), the
   search pill on its own row, then the category chips. */
@media (max-width: 900px){
	html:root body:not(#km-rd) .km-head{ gap:8px 6px; padding-top:8px; padding-bottom:10px; min-height:0; }
	html:root body:not(#km-rd) .site-logo .mark strong,
	html:root body:not(#km-rd) .site-logo .mark span{ font-size:18px; }
	html:root body:not(#km-rd) .km-search{ height:46px; }
	html:root body:not(#km-rd) .km-search__go{ padding:0; width:40px; margin-left:2px; }
	html:root body:not(#km-rd) .km-search__go svg{ display:block; width:20px; height:20px; }
	html:root body:not(#km-rd) .km-search__go-text{ display:none; }
	html:root body:not(#km-rd) .km-head__link,
	html:root body:not(#km-rd) .km-head__cart{ padding:4px 6px; min-height:44px; min-width:44px; justify-content:center; }
	html:root body:not(#km-rd) .km-head__link .km-head__big{ display:none; }
	html:root body:not(#km-rd) .km-head__icon{ width:26px; height:26px; }
	html:root body:not(#km-rd) .km-cats__col li a{ font-size:15px; }

	html:root body:not(#km-rd) .km-quickcats{ background:#fff; border-top:0; border-bottom:1px solid #E3E3E6; }
	html:root body:not(#km-rd) .km-quickcats__row{ padding:8px 12px; gap:8px; }
	html:root body:not(#km-rd) .km-quickcats__row a{
		min-height:44px; padding:0 14px 0 10px; gap:6px;
		background:#F1F1F2; border:0; color:#313133;
		font-size:14px; font-weight:500;
	}
	html:root body:not(#km-rd) .km-quickcats__row a:hover{ background:#E7E7EA; }
	html:root body:not(#km-rd) .km-quickcats__row li.is-on a{ background:var(--rd-navy); color:#fff; }
	html:root body:not(#km-rd) .km-quickcats__row li.is-on .km-navicon{ color:var(--rd-gold); }
}
@media (max-width: 560px){
	html:root body:not(#km-rd) .site-logo .mark strong,
	html:root body:not(#km-rd) .site-logo .mark span{ font-size:16px; }
	html:root body:not(#km-rd) .km-head__cart .km-head__big{ display:none; }
	html:root body:not(#km-rd) .km-search__cat{ display:none; }
}

/* ---- 2 · page + section panels ------------------------------------------ */

html:root body:not(#km-rd) .site-main-home{ padding:16px 0 32px; }
html:root body:not(#km-rd) .site-main-home > .section,
html:root body:not(#km-rd) .site-main-home > section{ padding:0; margin:0 0 16px; background:transparent; border:0; }
html:root body:not(#km-rd) .section-alt{ background:transparent; }

html:root body:not(#km-rd) .km-sec{
	background:#fff;
	border-radius:16px;
	padding:16px;
	color:#313133;
}
html:root body:not(#km-rd) .km-sec--navy{ background:var(--rd-navy); color:#fff; }
html:root body:not(#km-rd) .km-sec--lav{ background:var(--rd-lav); }
html:root body:not(#km-rd) .km-sec--tint{ background:var(--rd-tint); }
html:root body:not(#km-rd) .km-sec--deal{ background:var(--rd-pink); }

html:root body:not(#km-rd) .section-head{
	display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
	gap:8px 16px; margin:0 0 12px; padding:0; border:0;
}
html:root body:not(#km-rd) .section-head h2{
	margin:0; font-size:clamp(20px, 2.35vw, 32px); font-weight:700; line-height:1.3; color:#313133;
}
html:root body:not(#km-rd) .section-head .section-note{ margin-top:0; font-size:14px; color:#75757A; }
html:root body:not(#km-rd) .km-sec--navy .section-head h2{ color:#fff; }
html:root body:not(#km-rd) .km-sec--navy .section-head .section-note{ color:#B9C6D6; }
html:root body:not(#km-rd) .km-sec--lav .section-head h2{ color:var(--rd-purple); }
html:root body:not(#km-rd) .km-sec--tint .section-head h2{ color:var(--rd-gold-dk); }
html:root body:not(#km-rd) .km-sec--deal .section-head h2{ color:var(--rd-crimson); }

/* "See all ->" is a pill on the right. */
html:root body:not(#km-rd) .km-shelf__tools{ gap:8px; }
html:root body:not(#km-rd) .km-shelf__more{
	display:inline-flex; align-items:center; gap:6px;
	min-height:40px; padding:0 18px; margin:0;
	border-radius:999px; background:#fff; border:1px solid #E3E3E6;
	font-size:14px; font-weight:500; color:#313133; white-space:nowrap;
}
html:root body:not(#km-rd) .km-shelf__more:hover{ text-decoration:none; background:#F1F1F2; }
html:root body:not(#km-rd) .km-sec[class*="km-sec--"] .km-shelf__more{ border-color:transparent; }
html:root body:not(#km-rd) .km-shelf__btn{
	width:40px; height:40px; border:1px solid #E3E3E6; background:#fff; color:#313133; font-size:22px;
}
html:root body:not(#km-rd) .km-shelf__btn:hover{ background:var(--rd-navy); color:#fff; border-color:var(--rd-navy); }
html:root body:not(#km-rd) .km-sec[class*="km-sec--"] .km-shelf__btn{ border-color:transparent; }

/* The shelf track: cards in a row, ~6 visible on desktop, swipe on a phone. */
html:root body:not(#km-rd) .km-shelf__viewport{ margin:0; padding:0; }
html:root body:not(#km-rd) .km-shelf__viewport ul.products,
html:root body:not(#km-rd) .related.products ul.products,
html:root body:not(#km-rd) .upsells.products ul.products,
html:root body:not(#km-rd) .cross-sells ul.products{
	display:flex !important;
	flex-wrap:nowrap;
	gap:var(--rd-gap);
	margin:0 !important;
	padding:0 0 6px !important;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-padding-left:0;
	overscroll-behavior-x:contain;
	scrollbar-width:thin;
	scrollbar-color:#D3D3D6 transparent;
}
html:root body:not(#km-rd) .km-shelf__viewport ul.products li.product,
html:root body:not(#km-rd) .related.products ul.products li.product,
html:root body:not(#km-rd) .upsells.products ul.products li.product,
html:root body:not(#km-rd) .cross-sells ul.products li.product{
	flex:0 0 var(--rd-card-w);
	width:var(--rd-card-w);
	scroll-snap-align:start;
}
html:root body:not(#km-rd) .km-up-skelrow{ gap:var(--rd-gap); }
html:root body:not(#km-rd) .km-up-skelrow .km-up-skel,
html:root body:not(#km-rd) .km-up-skel{ flex:0 0 var(--rd-card-w); min-height:316px; border:0; border-radius:12px; padding:0 0 12px; }
html:root body:not(#km-rd) .km-up-skel__pic{ border-radius:0 !important; }
html:root body:not(#km-rd) .km-up-skel .km-up-skel__line{ margin:0 8px; }

/* Cards on a white panel get a hairline so they read as cards. */
html:root body:not(#km-rd) .km-sec:not([class*="km-sec--"]) ul.products li.product,
html:root body:not(#km-rd) .related.products ul.products li.product,
html:root body:not(#km-rd) .upsells.products ul.products li.product,
html:root body:not(#km-rd) .km-up-featured ul.products li.product{ box-shadow:0 0 0 1px #EBEBED; }

@media (max-width: 900px){
	html:root body:not(#km-rd):not(.km-dashboard-page){ --rd-card-w:172px; }
}
@media (max-width: 600px){
	/* About 2.3 cards across a phone, so the next one says "swipe". */
	html:root body:not(#km-rd) .km-shelf__viewport ul.products li.product,
	html:root body:not(#km-rd) .related.products ul.products li.product,
	html:root body:not(#km-rd) .upsells.products ul.products li.product,
	html:root body:not(#km-rd) .km-up-flash__track > .km-up-deal,
	html:root body:not(#km-rd) .km-again__item,
	html:root body:not(#km-rd) .km-up-skelrow .km-up-skel,
	html:root body:not(#km-rd) .km-up-flash__track > .km-up-skel{ flex-basis:calc((100% - 2 * var(--rd-gap)) / 2.3); width:auto; min-width:0; }
	html:root body:not(#km-rd) .km-sec{ padding:12px; border-radius:12px; }
	html:root body:not(#km-rd) .site-main-home > section{ margin-bottom:8px; }
	html:root body:not(#km-rd) .site-main-home{ padding-top:8px; }
	html:root body:not(#km-rd) .section-head{ margin-bottom:10px; }
	html:root body:not(#km-rd) .section-head .section-note{ font-size:13px; flex-basis:100%; order:3; }
	html:root body:not(#km-rd) .km-shelf__btn{ display:none; }
	html:root body:not(#km-rd) .km-shelf__more{ min-height:44px; padding:0 14px; font-size:13px; }
	html:root body:not(#km-rd) .section-head{ flex-direction:row; align-items:center; }
	html:root body:not(#km-rd) .section-head > div:first-child{ min-width:0; flex:1 1 0; }
	html:root body:not(#km-rd) .section-head > .km-shelf__tools,
	html:root body:not(#km-rd) .section-head > .km-shelf__more{ flex:0 0 auto; }
}

/* ---- 3 · product card (shelves, grids, search, recommended, featured) --- */

html:root body:not(#km-rd) ul.products li.product{
	position:relative;
	display:flex;
	flex-direction:column;
	width:auto;
	min-width:0;
	float:none;
	margin:0;
	padding:0 0 12px;
	background:#fff;
	border:0;
	border-radius:12px;
	box-shadow:none;
	overflow:hidden;
	transform:none;
	transition:box-shadow .18s ease;
	list-style:none;
}
html:root body:not(#km-rd) ul.products li.product:hover{ box-shadow:0 4px 16px rgba(14,26,43,0.14); transform:none; border-color:transparent; }
html:root body:not(#km-rd) .km-sec:not([class*="km-sec--"]) ul.products li.product:hover{ box-shadow:0 0 0 1px #EBEBED, 0 4px 16px rgba(14,26,43,0.14); }

html:root body:not(#km-rd) ul.products li.product a.woocommerce-LoopProduct-link,
html:root body:not(#km-rd) ul.products li.product a.woocommerce-loop-product__link{
	display:flex; flex-direction:column; flex:1 1 auto; min-width:0; color:#535357;
}

/* The photo fills the card, square, edge to edge. */
html:root body:not(#km-rd) ul.products li.product img,
html:root body:not(#km-rd) ul.products li.product .attachment-woocommerce_thumbnail{
	order:0;
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:1/1;
	object-fit:contain;
	margin:0;
	padding:6px;
	background:#fff;
	border:0;
	border-radius:0;
	box-shadow:none;
}

/* Stock as a strip right under the photo (Jumia's "20 items in stock"). */
html:root body:not(#km-rd) ul.products li.product .km-stock{
	order:1;
	margin:0;
	padding:3px 8px;
	font-size:12px;
	font-weight:500;
	line-height:16px;
	text-align:center;
	color:var(--rd-green);
	background:#EAF6EE;
}
html:root body:not(#km-rd) ul.products li.product .km-stock--low{ color:var(--rd-amber); background:var(--rd-amber-bg); }
html:root body:not(#km-rd) ul.products li.product .km-stock--out{ color:#75757A; background:#F1F1F2; }

/* Name: 14px, two lines on a shelf, three on a grid page. */
html:root body:not(#km-rd) ul.products li.product .woocommerce-loop-product__title,
html:root body:not(#km-rd) ul.products li.product h2,
html:root body:not(#km-rd) ul.products li.product h3{
	order:2;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	overflow:hidden;
	min-height:calc(2 * 19.6px);
	max-height:none;
	margin:0;
	padding:8px 8px 0;
	box-sizing:content-box;
	font-family:var(--font-body);
	font-size:14px;
	font-weight:400;
	line-height:19.6px;
	letter-spacing:0;
	text-transform:none;
	color:#535357;
	overflow-wrap:anywhere;
}
html:root body:not(#km-rd) .km-shop__main > ul.products li.product .woocommerce-loop-product__title{
	-webkit-line-clamp:3;
	min-height:calc(3 * 19.6px);
}
html:root body:not(#km-rd) ul.products li.product a.woocommerce-LoopProduct-link:visited .woocommerce-loop-product__title{ color:var(--visited); }

html:root body:not(#km-rd) ul.products li.product .km-brand-line{
	order:3; margin:0; padding:2px 8px 0; font-size:12px; color:#75757A; line-height:16px;
}

/* Price: big and bold; the old price small and struck under it. */
html:root body:not(#km-rd) ul.products li.product .price,
html:root body:not(#km-rd) ul.products li.product .km-up-price{
	order:4;
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	gap:0 6px;
	margin:auto 0 0;
	padding:4px 8px 0;
	font-family:var(--font-body);
	font-size:18px;
	font-weight:700;
	line-height:1.3;
	color:#313133;
	white-space:normal;
	overflow:visible;
}
html:root body:not(#km-rd) ul.products li.product .price ins,
html:root body:not(#km-rd) ul.products li.product .km-up-price ins{
	order:0; flex:0 0 100%; text-decoration:none; font-size:18px; font-weight:700; color:#313133; background:none;
}
html:root body:not(#km-rd) ul.products li.product .price del,
html:root body:not(#km-rd) ul.products li.product .km-up-price del{
	order:1; font-size:12px; font-weight:400; color:#75757A; opacity:1;
}
html:root body:not(#km-rd) ul.products li.product .price .km-up-price{ order:0; display:contents; }

/* WooCommerce's "Sale!" flash -> a small green tag (deal badges replace it). */
html:root body:not(#km-rd) ul.products li.product .onsale{
	position:absolute; top:8px; left:8px; right:auto; z-index:3;
	min-width:0; min-height:0; margin:0; padding:2px 6px;
	border-radius:4px; background:var(--rd-green); color:#fff;
	font-size:12px; font-weight:500; line-height:16px; box-shadow:none;
}

/* Deal badges (upsell.js) top-left of the photo. */
html:root body:not(#km-rd) ul.products li.product .km-up-badges{ top:8px; left:8px; gap:4px; max-width:calc(100% - var(--rd-plus) - 24px); }
html:root body:not(#km-rd) .km-up-chip{
	min-height:20px; padding:2px 6px; border-radius:4px;
	font-size:12px; font-weight:500; line-height:16px; letter-spacing:0;
}
html:root body:not(#km-rd) .km-up-chip--discount{ background:var(--rd-green); color:#fff; }
html:root body:not(#km-rd) .km-up-chip--limited{ background:var(--rd-crimson); color:#fff; }
html:root body:not(#km-rd) .km-up-chip--new{ background:var(--rd-navy); color:#fff; }
html:root body:not(#km-rd) .km-up-chip--save{ background:#EAF6EE; color:var(--rd-green); }

/* Quantity control laid over the photo: a round "+" at the top-right
   until it is in the basket, then the - n + stepper across the foot of
   the photo. The card never changes height either way. The overlay is a
   square the size of the photo (aspect-ratio), click-through except for
   its own controls. cart-stepper.js drives it exactly as before. */
html:root body:not(#km-rd) ul.products li.product > .km-qty,
html:root body:not(#km-rd) .km-up-deal .km-qty,
html:root body:not(#km-rd) .km-again__item .km-qty{
	position:absolute;
	top:0; left:0; right:0;
	z-index:4;
	display:grid;
	grid-template-columns:minmax(0,1fr) auto;
	grid-template-rows:auto minmax(0,1fr) auto auto;
	width:auto;
	height:auto;
	min-height:0;
	aspect-ratio:1/1;
	margin:0;
	padding:8px;
	border:0;
	border-radius:0;
	background:transparent;
	pointer-events:none;
}
html:root body:not(#km-rd) ul.products li.product > .km-qty > *,
html:root body:not(#km-rd) .km-up-deal .km-qty > *,
html:root body:not(#km-rd) .km-again__item .km-qty > *{ pointer-events:auto; }

html:root body:not(#km-rd) ul.products li.product > .km-qty .km-qty__add,
html:root body:not(#km-rd) .km-up-deal .km-qty .km-qty__add,
html:root body:not(#km-rd) .km-again__item .km-qty .km-qty__add{
	grid-column:2; grid-row:1;
	justify-self:end; align-self:start;
	position:relative;
	width:var(--rd-plus); height:var(--rd-plus);
	min-width:0; padding:0;
	border:0; border-radius:50%;
	background:#313133; color:#fff;
	font-size:0; line-height:0;
	box-shadow:0 2px 8px rgba(0,0,0,0.25);
	transition:background .15s ease, transform .15s ease;
}
html:root body:not(#km-rd) ul.products li.product > .km-qty .km-qty__add::before,
html:root body:not(#km-rd) .km-up-deal .km-qty .km-qty__add::before,
html:root body:not(#km-rd) .km-again__item .km-qty .km-qty__add::before{
	content:"";
	position:absolute; inset:0; margin:auto;
	width:14px; height:14px;
	background:
		linear-gradient(#fff, #fff) center / 14px 2px no-repeat,
		linear-gradient(#fff, #fff) center / 2px 14px no-repeat;
}
html:root body:not(#km-rd) ul.products li.product > .km-qty .km-qty__add:hover,
html:root body:not(#km-rd) .km-up-deal .km-qty .km-qty__add:hover,
html:root body:not(#km-rd) .km-again__item .km-qty .km-qty__add:hover{ background:var(--rd-gold-dk); transform:scale(1.06); }

html:root body:not(#km-rd) ul.products li.product > .km-qty .km-qty__step,
html:root body:not(#km-rd) .km-up-deal .km-qty .km-qty__step,
html:root body:not(#km-rd) .km-again__item .km-qty .km-qty__step{
	grid-column:1 / -1; grid-row:3;
	width:auto; height:36px; padding:0 2px;
	border:0; border-radius:999px;
	background:#fff; color:#313133;
	box-shadow:0 2px 10px rgba(14,26,43,0.22), inset 0 0 0 2px var(--rd-gold);
}
html:root body:not(#km-rd) ul.products li.product > .km-qty .km-qty__btn,
html:root body:not(#km-rd) .km-up-deal .km-qty .km-qty__btn,
html:root body:not(#km-rd) .km-again__item .km-qty .km-qty__btn{ flex:0 0 32px; width:32px; height:32px; min-width:0; min-height:0; font-size:20px; color:#313133; }
html:root body:not(#km-rd) ul.products li.product > .km-qty .km-qty__count,
html:root body:not(#km-rd) .km-up-deal .km-qty .km-qty__count,
html:root body:not(#km-rd) .km-again__item .km-qty .km-qty__count{ height:30px; font-size:15px; font-weight:700; color:#313133; }
html:root body:not(#km-rd) ul.products li.product > .km-qty .km-qty__note,
html:root body:not(#km-rd) .km-up-deal .km-qty .km-qty__note,
html:root body:not(#km-rd) .km-again__item .km-qty .km-qty__note{
	grid-column:1 / -1; grid-row:4;
	min-height:0; margin:4px 0 0; padding:2px 6px;
	border-radius:6px; background:rgba(255,255,255,0.95);
	font-size:11px; color:var(--rd-amber); text-align:center;
}
html:root body:not(#km-rd) ul.products li.product > .km-qty .km-qty__note:empty,
html:root body:not(#km-rd) .km-up-deal .km-qty .km-qty__note:empty,
html:root body:not(#km-rd) .km-again__item .km-qty .km-qty__note:empty{ display:none; }
@media (pointer: coarse){
	html:root body:not(#km-rd) ul.products li.product > .km-qty .km-qty__step,
	html:root body:not(#km-rd) .km-up-deal .km-qty .km-qty__step,
	html:root body:not(#km-rd) .km-again__item .km-qty .km-qty__step{ height:44px; }
	html:root body:not(#km-rd) ul.products li.product > .km-qty .km-qty__btn,
	html:root body:not(#km-rd) .km-up-deal .km-qty .km-qty__btn,
	html:root body:not(#km-rd) .km-again__item .km-qty .km-qty__btn{ flex:0 0 44px; width:44px; height:44px; min-width:44px; min-height:44px; }
	html:root body:not(#km-rd) ul.products li.product > .km-qty .km-qty__count,
	html:root body:not(#km-rd) .km-up-deal .km-qty .km-qty__count,
	html:root body:not(#km-rd) .km-again__item .km-qty .km-qty__count{ font-size:16px; }
	/* The picker arrow (touch only) takes the "+"'s corner once the item is
	   in the basket; the stepper keeps the full width of the photo. */
	html:root body:not(#km-rd) ul.products li.product > .km-qty .km-qty__more,
	html:root body:not(#km-rd) .km-up-deal .km-qty .km-qty__more,
	html:root body:not(#km-rd) .km-again__item .km-qty .km-qty__more{
		grid-column:2; grid-row:1; justify-self:end; align-self:start;
		width:44px; min-height:44px; margin:0;
		background:#fff; border:0; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,0.22);
	}
	html:root body:not(#km-rd) ul.products li.product > .km-qty:not(.is-in-cart) .km-qty__more,
	html:root body:not(#km-rd) .km-up-deal .km-qty:not(.is-in-cart) .km-qty__more,
	html:root body:not(#km-rd) .km-again__item .km-qty:not(.is-in-cart) .km-qty__more{ display:none; }
}

/* Heart (touch screens) under the "+"; on a mouse it lives in the hover
   tray, which moves down out of the "+"'s way and drops its own Add
   button (the "+" is that button now). */
html:root body:not(#km-rd) ul.products li.product > .km-wish{
	position:absolute; z-index:4;
	top:calc(16px + var(--rd-plus)); right:8px;
	width:var(--rd-plus); min-width:0; height:var(--rd-plus); padding:0; margin:0;
	border:0; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.18);
}
html.km-can-hover:root body:not(#km-rd) ul.products li.product > .km-wish{ display:none; }
/* In the basket the "+" corner holds the picker, so the heart moves to
   the left, under the deal badges, clear of the stepper. */
html:root body:not(#km-rd) ul.products li.product:has(> .km-qty.is-in-cart) > .km-wish{ top:36px; right:auto; left:8px; }
html:root body:not(#km-rd) ul.products li.product .km-hover{ top:8px; right:8px; z-index:5; }
html:root body:not(#km-rd) ul.products li.product:has(> .km-qty) .km-hover{ top:calc(16px + var(--rd-plus)); }
html:root body:not(#km-rd) ul.products li.product:has(> .km-qty) .km-hover__add{ display:none; }
html:root body:not(#km-rd) ul.products li.product .km-hover .km-wish{ width:36px; min-width:36px; height:36px; padding:0; border:0; }
html:root body:not(#km-rd) .km-hover__add{ height:36px; font-size:13px; font-weight:500; border-radius:999px; }

/* Cards that cannot take the overlay (line tiles, "Read more", staff
   view): their actions sit under the price, full width. */
html:root body:not(#km-rd) ul.products li.product > .button,
html:root body:not(#km-rd) ul.products li.product > a.button,
html:root body:not(#km-rd) ul.products li.product > .added_to_cart + .button{
	align-self:stretch;
	display:flex; align-items:center; justify-content:center;
	width:auto; min-height:36px; margin:8px 8px 0; padding:6px 12px;
	border-radius:999px; border:0;
	background:var(--rd-navy); color:#fff;
	font-size:13px; font-weight:500; white-space:normal; text-align:center;
}
html:root body:not(#km-rd) ul.products li.product > .km-line-tile__actions{
	display:flex; flex-direction:column; gap:6px;
	align-self:stretch; width:auto; margin:8px 8px 0; padding:0;
}
html:root body:not(#km-rd) ul.products li.product > .km-line-tile__actions .button{
	display:flex; align-items:center; justify-content:center;
	width:100%; min-height:36px; margin:0; padding:6px 12px;
	border-radius:999px; font-size:13px; font-weight:500; white-space:nowrap; text-align:center;
}
html:root body:not(#km-rd) ul.products li.product .km-line-tile__go{ background:var(--rd-navy); color:#fff; border:0; }
html:root body:not(#km-rd) ul.products li.product .km-line-tile__go:hover{ background:var(--rd-navy-2); }
html:root body:not(#km-rd) ul.products li.product .km-line-tile__quick{ background:#fff; color:var(--rd-navy); border:1px solid var(--rd-gold); }
html:root body:not(#km-rd) ul.products li.product .km-line-tile__quick:hover{ background:var(--rd-tint); }
@media (max-width: 700px), (pointer: coarse){
	html:root body:not(#km-rd) ul.products li.product > .button,
	html:root body:not(#km-rd) ul.products li.product > a.button,
	html:root body:not(#km-rd) ul.products li.product > .km-line-tile__actions .button{ min-height:44px; }
}

/* ---- 4 · home: banner, picture tiles, category icons, welcome, trust ---- */

html:root body:not(#km-rd) .km-ads{ background:transparent; padding:0; margin:0 0 16px; }
html:root body:not(#km-rd):not(.km-dashboard-page) .km-ads__frame{
	max-width:1232px; width:calc(100% - 32px); margin:0 auto; padding:0;
	border-radius:16px; overflow:hidden;
	background:radial-gradient(ellipse at 85% 30%, rgba(198,144,46,0.35), transparent 55%), linear-gradient(120deg, #16283F, #0E1A2B 60%);
}
html:root body:not(#km-rd) .km-ads__track{ min-height:340px; }
html:root body:not(#km-rd) .km-ad{ padding:32px 72px 44px; gap:32px; }
html:root body:not(#km-rd) .km-ad__headline{ font-size:clamp(26px, 3.3vw, 44px); font-weight:700; line-height:1.15; color:#fff; margin:0 0 12px; }
html:root body:not(#km-rd) .km-ad__body{ font-size:16px; color:#C9D3E0; margin:0 0 20px; }
html:root body:not(#km-rd) .km-ad__cta{ min-height:46px; padding:0 26px; font-size:15px; font-weight:500; background:var(--rd-gold); color:var(--rd-navy); }
html:root body:not(#km-rd) .km-ad__pic img{ max-height:270px; }
html:root body:not(#km-rd) .km-ads__arrow{ width:44px; height:44px; background:rgba(255,255,255,0.92); color:#313133; border:0; box-shadow:0 2px 8px rgba(0,0,0,.2); }
html:root body:not(#km-rd) .km-ads__arrow--prev{ left:12px; }
html:root body:not(#km-rd) .km-ads__arrow--next{ right:12px; }
html:root body:not(#km-rd) .km-ads__dots{
	left:50%; right:auto; transform:translateX(-50%); bottom:14px;
	gap:6px; padding:5px 8px; border-radius:999px; background:rgba(14,26,43,0.45);
}
html:root body:not(#km-rd) .km-ads__dot{ width:8px; height:8px; background:rgba(255,255,255,0.55); }
html:root body:not(#km-rd) .km-ads__dot.is-on{ width:24px; background:#fff; }

html:root body:not(#km-rd) .km-picks{ background:transparent; padding:0; margin:0 0 16px; }
/* Picture tiles: one row of square-ish tiles on a lavender panel (Jumia's
   "Find all your essentials"), swiping sideways on a phone. hero.css's
   span-per-count rules are replaced by an even single row. */
html:root body:not(#km-rd) .km-picks__grid{
	display:grid; grid-auto-flow:column; grid-auto-columns:minmax(150px, 1fr); grid-template-columns:none;
	gap:12px; padding:16px; border-radius:16px; background:var(--rd-lav);
	overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain;
}
html:root body:not(#km-rd) .km-picks__grid::-webkit-scrollbar{ display:none; }
html:root body:not(#km-rd) .km-picks__grid > *,
html:root body:not(#km-rd) .km-picks__grid--5 > *:nth-child(n+4){ grid-column:auto; }
html:root body:not(#km-rd) .km-pick{ border:0; border-radius:12px; box-shadow:none; padding:0 0 12px; background:#fff; overflow:hidden; }
html:root body:not(#km-rd) a.km-pick:hover{ transform:none; box-shadow:0 4px 16px rgba(14,26,43,0.14); }
html:root body:not(#km-rd) .km-pick__pic{ aspect-ratio:4/3; background:#F7F7F8; border:0; padding:0; }
html:root body:not(#km-rd) .km-pick__pic img{ width:100%; height:100%; max-height:none; object-fit:cover; }
html:root body:not(#km-rd) .km-pick__name{ margin:10px 12px 0; font-size:16px; font-weight:700; line-height:1.3; color:#313133; }
html:root body:not(#km-rd) .km-pick__desc{ margin:2px 12px 0; font-size:13px; line-height:1.35; color:#535357; }
html:root body:not(#km-rd) .km-pick__go{
	align-self:flex-start; margin:10px 12px 0; padding:4px 12px; border-radius:999px;
	background:var(--rd-navy); color:#fff; font-size:12px; font-weight:500;
}
@media (max-width: 600px){
	html:root body:not(#km-rd) .km-picks__grid{ grid-auto-columns:42%; padding:12px; gap:8px; }
	html:root body:not(#km-rd) .km-pick__name{ font-size:14px; margin:8px 10px 0; }
	html:root body:not(#km-rd) .km-pick__desc{ font-size:12px; margin:2px 10px 0; }
	html:root body:not(#km-rd) .km-pick__go{ margin:8px 10px 0; }
}

/* Round category icons. */
html:root body:not(#km-rd) .km-catrow__list{
	display:flex; gap:8px; margin:0; padding:0 0 4px; list-style:none;
	overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain;
}
html:root body:not(#km-rd) .km-catrow__list::-webkit-scrollbar{ display:none; }
html:root body:not(#km-rd) .km-catrow__list li{ flex:1 0 96px; max-width:132px; }
html:root body:not(#km-rd) .km-catrow__item{
	display:flex; flex-direction:column; align-items:center; gap:8px;
	padding:6px 4px; border-radius:12px; color:#313133; text-align:center;
}
html:root body:not(#km-rd) .km-catrow__item:hover{ background:#F7F7F8; }
html:root body:not(#km-rd) .km-catrow__icon{
	display:flex; align-items:center; justify-content:center;
	width:76px; height:76px; border-radius:50%;
	background:var(--rd-tint); color:var(--rd-navy);
	transition:transform .15s ease;
}
html:root body:not(#km-rd) .km-catrow__item:hover .km-catrow__icon{ transform:scale(1.05); }
html:root body:not(#km-rd) .km-catrow__icon svg{ width:36px; height:36px; }
html:root body:not(#km-rd) .km-catrow__item--deal .km-catrow__icon{ background:var(--rd-pink); color:var(--rd-crimson); }
html:root body:not(#km-rd) .km-catrow__name{ font-size:13px; font-weight:500; line-height:1.25; }
@media (max-width: 600px){
	html:root body:not(#km-rd) .km-catrow__list li{ flex:0 0 76px; }
	html:root body:not(#km-rd) .km-catrow__icon{ width:60px; height:60px; }
	html:root body:not(#km-rd) .km-catrow__icon svg{ width:28px; height:28px; }
	html:root body:not(#km-rd) .km-catrow__name{ font-size:12px; }
}

/* Welcome banner (signed out: the pitch + sign-in card). */
html:root body:not(#km-rd) .km-hero{ background:transparent; padding:0; margin:0 0 16px; }
html:root body:not(#km-rd):not(.km-dashboard-page) .km-hero__grid{
	max-width:1232px; width:calc(100% - 32px); margin:0 auto; padding:40px 44px;
	gap:32px; border-radius:16px; color:#fff;
	background:radial-gradient(ellipse at 12% 18%, rgba(198,144,46,0.28), transparent 55%), linear-gradient(135deg, #16283F, #0E1A2B 65%);
}
html:root body:not(#km-rd) .km-hero h1{ font-size:clamp(28px, 3.4vw, 44px); line-height:1.15; color:#fff; max-width:20ch; margin:0 0 14px; }
html:root body:not(#km-rd) .km-hero p{ font-size:16px; line-height:1.5; color:#C9D3E0; max-width:52ch; margin:0 0 24px; }
html:root body:not(#km-rd) .km-eyebrow{ font-size:13px; font-weight:500; color:var(--rd-gold-dk); margin-bottom:8px; }
html:root body:not(#km-rd) .km-eyebrow.km-eyebrow--light{ color:var(--rd-gold); }
html:root body:not(#km-rd) .km-hero .hero-actions{ gap:10px; }
html:root body:not(#km-rd) .km-hero .btn-outline-light{ border-color:rgba(255,255,255,0.4); color:#fff; background:transparent; }
html:root body:not(#km-rd) .km-hero .btn-outline-light:hover{ background:#fff; color:var(--rd-navy); }
html:root body:not(#km-rd):not(.km-dashboard-page) .km-hero--tight .km-hero__grid{ padding:24px 32px; }
html:root body:not(#km-rd) .km-hero--tight h1{ font-size:clamp(22px, 2.6vw, 32px); }
html:root body:not(#km-rd) .km-tiles{ gap:12px; }
html:root body:not(#km-rd) .km-hero__grid--gate .km-tiles{ grid-column:1 / -1; grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width: 900px){
	html:root body:not(#km-rd) .km-hero__grid--gate .km-tiles{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
html:root body:not(#km-rd) .km-tile{ padding:16px; border:0; border-radius:12px; background:#fff; gap:4px; }
html:root body:not(#km-rd) .km-tile:hover{ transform:none; box-shadow:0 6px 20px rgba(0,0,0,0.25); }
html:root body:not(#km-rd) .km-tile__icon{ width:44px; height:44px; padding:8px; border-radius:50%; background:var(--rd-tint); color:var(--rd-navy); }
html:root body:not(#km-rd) .km-tile__icon svg{ width:28px; height:28px; }
html:root body:not(#km-rd) .km-tile__name{ font-size:16px; font-weight:700; color:#313133; }
html:root body:not(#km-rd) .km-tile__desc{ font-size:13px; color:#535357; }
html:root body:not(#km-rd) .km-tile__go{ font-size:13px; font-weight:500; color:var(--rd-gold-dk); }
html:root body:not(#km-rd) .km-gate-card{ border-radius:16px; padding:24px; box-shadow:0 18px 40px rgba(0,0,0,0.28); }
html:root body:not(#km-rd) .km-gate-card h2{ font-size:22px; color:#313133; }
html:root body:not(#km-rd) .km-gate-card > p{ font-size:14px; color:#535357; }
html:root body:not(#km-rd) .km-gate-card .woocommerce-form-login label{ font-size:13px; font-weight:500; color:#535357; }
html:root body:not(#km-rd) .km-gate-card .woocommerce-form-login input.input-text{ border-color:#D9D9DC; border-radius:8px; padding:11px 12px; font-size:15px; }
html:root body:not(#km-rd) .km-gate-card .woocommerce-form-login .button,
html:root body:not(#km-rd) .woocommerce .km-gate-card button.button{ min-height:46px; border:0; font-size:15px; font-weight:500; background:var(--rd-gold); color:var(--rd-navy); }
@media (max-width: 600px){
	html:root body:not(#km-rd):not(.km-dashboard-page) .km-hero__grid,
	html:root body:not(#km-rd):not(.km-dashboard-page) .km-ads__frame{ width:calc(100% - 16px); border-radius:12px; }
	html:root body:not(#km-rd):not(.km-dashboard-page) .km-hero__grid{ padding:24px 18px; }
	html:root body:not(#km-rd) .km-ads__track{ min-height:0; }
	html:root body:not(#km-rd) .km-ad{ padding:20px 16px 56px; }
	html:root body:not(#km-rd) .km-picks__grid{ padding:12px; border-radius:12px; gap:8px; }
}

html:root body:not(#km-rd) .km-trust{ background:transparent; border:0; margin:0 0 16px; }
html:root body:not(#km-rd) .km-trust .container{
	max-width:1232px; width:calc(100% - 32px);
	padding:16px 20px; gap:12px 20px;
	background:#fff; border-radius:16px;
}
html:root body:not(#km-rd) .km-trust__item{ border-left:1px solid #EDEDEF; padding:2px 0 2px 16px; }
html:root body:not(#km-rd) .km-trust__item:first-child{ border-left:0; padding-left:0; }
html:root body:not(#km-rd) .km-trust__item .num,
html:root body:not(#km-rd) .km-trust__item strong{ font-size:20px; font-weight:700; color:var(--rd-navy); }
html:root body:not(#km-rd) .km-trust__item .num{ color:var(--rd-gold-dk); }
html:root body:not(#km-rd) .km-trust__item span:last-child{ font-size:13px; color:#535357; }
@media (max-width: 600px){
	html:root body:not(#km-rd) .km-trust .container{ width:calc(100% - 16px); border-radius:12px; padding:14px; }
	html:root body:not(#km-rd) .km-trust__item{ border-left:0; padding-left:0; }
}

html:root body:not(#km-rd) .cta-band{ background:transparent; padding:0; margin:0 0 16px; }
html:root body:not(#km-rd) .cta-band .container{
	max-width:1232px; width:calc(100% - 32px); padding:28px 32px;
	border-radius:16px; background:var(--rd-navy);
}
html:root body:not(#km-rd) .cta-band h2{ font-size:clamp(22px, 2.4vw, 30px); color:#fff; }
html:root body:not(#km-rd) .cta-band p{ font-size:15px; color:#C9D3E0; }
html:root body:not(#km-rd) .tag-verify-inline{ font-size:12px; font-weight:500; border-radius:999px; padding:4px 10px; }
@media (max-width: 600px){
	html:root body:not(#km-rd) .cta-band .container{ width:calc(100% - 16px); padding:20px 16px; border-radius:12px; }
	html:root body:not(#km-rd) .cta-band .cta-actions{ width:100%; flex-wrap:wrap; }
	html:root body:not(#km-rd) .cta-band .cta-actions .btn{ flex:1 1 140px; }
}

html:root body:not(#km-rd) .km-brands__row{ gap:8px; }
html:root body:not(#km-rd) .km-brand{
	padding:8px 14px; min-height:40px; border-radius:999px;
	border:1px solid #E3E3E6; background:#fff; font-size:14px; font-weight:500; color:#313133;
}
html:root body:not(#km-rd) .km-brand span{ font-size:12px; color:#75757A; }
html:root body:not(#km-rd) .km-brand:hover{ border-color:var(--rd-navy); background:#fff; }

/* ---- 5 · Flash Sales (crimson panel) + deal cards ------------------------ */

html:root body:not(#km-rd) .km-up-flash{ padding:0; margin:0 0 16px; }
html:root body:not(#km-rd) .km-up-flash__frame{
	padding:16px; border:0; border-radius:16px; box-shadow:none; overflow:hidden;
	background:var(--rd-crimson);
}
html:root body:not(#km-rd) .km-up-flash__head{ gap:8px 14px; padding:0 0 14px; background:transparent; color:#fff; }
html:root body:not(#km-rd) .km-up-flash__title{ gap:8px; font-size:clamp(22px, 2.35vw, 32px); font-weight:700; line-height:1.3; color:#fff; letter-spacing:0; }
html:root body:not(#km-rd) .km-up-flash__title svg{ width:26px; height:26px; fill:#FFD54A; }
html:root body:not(#km-rd) .km-up-flash__head .km-up-clock{
	gap:6px; padding:4px 10px 4px 8px; border-radius:8px; background:#fff; color:var(--rd-crimson);
}
html:root body:not(#km-rd) .km-up-flash__head .km-up-clock::before{
	content:""; width:16px; height:16px; flex:0 0 16px;
	background:currentColor;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}
html:root body:not(#km-rd) .km-up-flash__head .km-up-clock__label{ font-size:13px; font-weight:500; color:#313133; }
html:root body:not(#km-rd) .km-up-flash__head .km-up-clock__time{
	min-width:0; padding:0; background:transparent; color:var(--rd-crimson);
	font-size:15px; font-weight:700;
}
html:root body:not(#km-rd) .km-up-flash__all{
	min-height:40px; padding:0 18px; gap:6px; border-radius:999px;
	background:#fff; color:#313133; font-size:14px; font-weight:500;
}
html:root body:not(#km-rd) .km-up-flash__all:hover{ color:var(--rd-crimson); background:#fff; }
html:root body:not(#km-rd) .km-up-flash__track{
	gap:var(--rd-gap); padding:0 0 4px;
	scrollbar-color:rgba(255,255,255,0.5) transparent;
}

html:root body:not(#km-rd) .km-up-deal{
	flex:0 0 var(--rd-card-w);
	gap:0; padding:0 0 12px;
	border:0; border-radius:12px; background:#fff; overflow:hidden;
}
html:root body:not(#km-rd) .km-up-deal:hover{ box-shadow:0 4px 16px rgba(0,0,0,0.25); border-color:transparent; }
html:root body:not(#km-rd) .km-up-deal__pic{ order:0; border-radius:0; background:#fff; }
html:root body:not(#km-rd) .km-up-deal__pic img{ padding:6px; }
html:root body:not(#km-rd) .km-up-deal__off{
	top:8px; left:8px; right:auto;
	padding:2px 6px; border-radius:4px; background:var(--rd-green);
	font-size:12px; font-weight:500; line-height:16px;
}
html:root body:not(#km-rd) .km-up-deal .km-up-stock{ order:1; gap:0; }
html:root body:not(#km-rd) .km-up-stock__text{
	display:block; padding:3px 8px; text-align:center;
	font-size:12px; font-weight:500; line-height:16px;
	color:var(--rd-amber); background:var(--rd-amber-bg);
}
html:root body:not(#km-rd) .km-up-deal .km-up-bar{ height:3px; border-radius:0; background:#F6E3B8; }
html:root body:not(#km-rd) .km-up-deal .km-up-bar__fill{ background:var(--rd-gold); border-radius:0; }
html:root body:not(#km-rd) .km-up-deal__name{
	order:2; min-height:calc(2 * 19.6px); padding:8px 8px 0; box-sizing:content-box;
	font-size:14px; line-height:19.6px; color:#535357;
}
html:root body:not(#km-rd) .km-up-deal__price{
	order:3; flex-wrap:wrap; gap:0 6px; padding:4px 8px 0; margin-top:auto; white-space:normal;
}
html:root body:not(#km-rd) .km-up-deal__price ins{ flex:0 0 100%; font-size:18px; font-weight:700; color:#313133; }
html:root body:not(#km-rd) .km-up-deal__price del{ font-size:12px; color:#75757A; }
html:root body:not(#km-rd) .km-up-deal__limit{ order:4; padding:4px 8px 0; font-size:12px; }
html:root body:not(#km-rd) .km-up-deal__off-btn{
	order:5; width:auto; margin:8px 8px 0; min-height:36px; border-radius:999px; font-size:13px;
}

/* Flash Sales page */
html:root body:not(#km-rd) .km-up-flashpage{ padding:16px 0 48px; }
html:root body:not(#km-rd) .km-up-flashpage__head h1{ font-size:clamp(24px, 2.6vw, 32px); }
html:root body:not(#km-rd) .km-up-flashpage__head h1 svg{ fill:var(--rd-crimson); }
html:root body:not(#km-rd) .km-up-flashsec__head{ border-radius:12px; background:var(--rd-crimson); padding:12px 16px; }
html:root body:not(#km-rd) .km-up-flashsec__title{ font-size:22px; }
html:root body:not(#km-rd) .km-up-flashsec__head .km-up-clock__time{ background:#fff; color:var(--rd-crimson); }
html:root body:not(#km-rd) .km-up-flashsec__head .km-up-clock__label{ color:#fff; }
html:root body:not(#km-rd) .km-up-flashpage__grid{ gap:var(--rd-gap); grid-template-columns:repeat(auto-fill, minmax(176px, 1fr)); }

/* ---- 6 · bundles (navy panel), recommended + recently viewed rows ------- */

html:root body:not(#km-rd) .km-up-bundles__track{ gap:var(--rd-gap); padding:0 0 4px; }
html:root body:not(#km-rd) .km-up-bundle{
	flex:0 0 340px; gap:12px; padding:14px;
	border:0; border-radius:12px; box-shadow:none; background:#fff; color:#313133;
}
html:root body:not(#km-rd) .km-up-bundle__title{ font-size:16px; font-weight:700; color:#313133; }
html:root body:not(#km-rd) .km-up-bundle__desc{ font-size:13px; color:#535357; }
html:root body:not(#km-rd) .km-up-bundle__pic{ border-radius:8px; background:#fff; border:1px solid #EDEDEF; }
html:root body:not(#km-rd) .km-up-bundle__item a{ border-color:#EDEDEF; background:#fff; border-radius:8px; }
html:root body:not(#km-rd) .km-up-bundle__label{ font-size:12px; color:#75757A; }
html:root body:not(#km-rd) .km-up-bundle__now{ font-size:22px; font-weight:700; color:#313133; }
html:root body:not(#km-rd) .km-up-bundle__was{ font-size:13px; }
html:root body:not(#km-rd) .km-up-bundle__add{ min-height:44px; font-size:15px; font-weight:500; }
html:root body:not(#km-rd) .km-sec--navy .km-up-skel{ background:#fff; }
@media (max-width: 600px){
	html:root body:not(#km-rd) .km-up-bundle{ flex-basis:min(300px, 86%); }
}

/* ---- 7 · shop + category pages ----------------------------------------- */

html:root body:not(#km-rd) .site-main.woocommerce-content{ padding:16px 0 48px; }
html:root body:not(#km-rd) .woocommerce-breadcrumb{ margin:0 0 12px; font-size:13px; color:#75757A; }
html:root body:not(#km-rd) .woocommerce-breadcrumb a{ color:#535357; }
html:root body:not(#km-rd) .woocommerce-products-header{ margin:0 0 12px; }
html:root body:not(#km-rd) .woocommerce-products-header__title,
html:root body:not(#km-rd) .woocommerce-content h1.page-title{ font-size:clamp(22px, 2.2vw, 28px); margin:0 0 6px; }
html:root body:not(#km-rd) .woocommerce-products-header .term-description,
html:root body:not(#km-rd) .woocommerce-products-header .term-description p{ font-size:14px; color:#535357; }

html:root body:not(#km-rd) .km-shop{ grid-template-columns:240px minmax(0,1fr); gap:16px; }
html:root body:not(#km-rd) .km-shop__side{ top:16px; }
html:root body:not(#km-rd) .km-facets{ border:0; border-radius:12px; box-shadow:none; padding:4px 16px 8px; background:#fff; }
html:root body:not(#km-rd) .km-facet{ padding:14px 0; border-bottom:1px solid #EDEDEF; }
html:root body:not(#km-rd) .km-facet h3,
html:root body:not(#km-rd) .km-facet h4{ font-size:14px; font-weight:700; color:#313133; margin:0 0 8px; }
html:root body:not(#km-rd) .km-facet__list li a{ justify-content:flex-start; gap:4px; font-size:14px; color:#313133; padding:5px 0; }
html:root body:not(#km-rd) .km-facet__list li a span{ margin-left:auto; }
html:root body:not(#km-rd) .km-facet__list li a.is-on::before{ content:"\2713"; color:var(--rd-gold-dk); }
html:root body:not(#km-rd) .km-facet__list li a:hover{ color:var(--rd-gold-dk); }
html:root body:not(#km-rd) .km-facet__list li a.is-on{ color:var(--rd-navy); font-weight:700; }
html:root body:not(#km-rd) .km-facet__list li a span,
html:root body:not(#km-rd) .km-check em{ font-size:12px; color:#75757A; }
html:root body:not(#km-rd) .km-check{ font-size:14px; }
html:root body:not(#km-rd) .km-check input{ width:18px; height:18px; accent-color:var(--rd-navy); }
html:root body:not(#km-rd) .km-facet__range input,
html:root body:not(#km-rd) .km-facet__search input{ border-color:#D9D9DC; border-radius:8px; font-size:14px; }
html:root body:not(#km-rd) .km-facet__range .btn{ min-height:38px; padding:0 14px; font-size:13px; }
html:root body:not(#km-rd) .km-facet--actions .btn{ min-height:40px; font-size:14px; }
html:root body:not(#km-rd) .km-facet__clear{ font-size:13px; font-weight:500; }

html:root body:not(#km-rd) .km-results{
	margin:0 0 12px; padding:8px 8px 8px 16px; border:0; border-radius:12px; box-shadow:none; background:#fff;
}
html:root body:not(#km-rd) .km-results .woocommerce-result-count{ font-size:14px; color:#535357; }
html:root body:not(#km-rd) .km-sort{ font-size:14px; color:#535357; gap:8px; }
html:root body:not(#km-rd) .km-sort select{ min-height:40px; border-color:#D9D9DC; border-radius:8px; font-size:14px; padding:6px 32px 6px 12px; }
html:root body:not(#km-rd) .km-chips{ margin:0 0 12px; }
html:root body:not(#km-rd) .km-chip{ box-shadow:none; border-color:#E3E3E6; font-size:13px; min-height:32px; }

/* The grid: 5 across beside the filters on a desktop, then 4, 3, 2. */
html:root body:not(#km-rd) ul.products{ gap:var(--rd-gap); }
html:root body:not(#km-rd) .km-shop__main > ul.products{
	display:grid !important;
	grid-template-columns:repeat(5, minmax(0, 1fr));
	gap:var(--rd-gap);
	margin:0 !important;
	padding:0 !important;
}
@media (max-width: 1199px){
	html:root body:not(#km-rd) .km-shop{ grid-template-columns:220px minmax(0,1fr); }
	html:root body:not(#km-rd) .km-shop__main > ul.products{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px){
	html:root body:not(#km-rd) .km-shop{ grid-template-columns:minmax(0,1fr); gap:10px; }
	html:root body:not(#km-rd) .km-shop__main > ul.products{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
	html:root body:not(#km-rd) .km-facets{ padding:0 14px; }
	html:root body:not(#km-rd) .km-facets__toggle{ min-height:48px; font-size:15px; font-weight:500; }
	html:root body:not(#km-rd) .km-results{ padding:6px 6px 6px 12px; }
}
@media (max-width: 600px){
	html:root body:not(#km-rd) .km-shop__main > ul.products{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
	html:root body:not(#km-rd) .site-main.woocommerce-content{ padding-top:10px; }
	html:root body:not(#km-rd) .km-results{ flex-wrap:nowrap; }
	html:root body:not(#km-rd) .km-results .woocommerce-result-count{ font-size:13px; }
	html:root body:not(#km-rd) .km-sort > span{ display:none; }
	html:root body:not(#km-rd) .km-sort select{ min-height:44px; max-width:180px; }
}

/* Endless shop button */
html:root body:not(#km-rd) .km-endless__more{ min-height:44px; padding:0 28px; font-size:15px; font-weight:500; border-color:#D9D9DC; }
html:root body:not(#km-rd) .km-endless__status{ font-size:13px; }

/* Buy again row (plugin buy-again.php) as a panel of cards. */
html:root body:not(#km-rd) .km-again{ margin:0 0 12px; padding:16px; border:0; border-radius:16px; background:var(--rd-tint); }
html:root body:not(#km-rd) .km-again__title{ font-size:clamp(20px, 2vw, 26px); font-weight:700; color:var(--rd-gold-dk); }
html:root body:not(#km-rd) .km-again__sub{ font-size:14px; color:#535357; }
html:root body:not(#km-rd) .km-again__row{ gap:var(--rd-gap); padding:0 0 4px; }
html:root body:not(#km-rd) .km-again__item{
	position:relative; flex:0 0 var(--rd-card-w); gap:0; padding:0 0 12px;
	border:0; border-radius:12px; background:#fff; overflow:hidden;
}
html:root body:not(#km-rd) .km-again__pic{ border-radius:0; background:#fff; }
html:root body:not(#km-rd) .km-again__pic img{ padding:6px; }
html:root body:not(#km-rd) .km-again__name{ padding:8px 8px 0; font-size:14px; line-height:19.6px; color:#535357; }
html:root body:not(#km-rd) .km-again__sku{ padding:2px 8px 0; font-size:12px; color:#75757A; }
html:root body:not(#km-rd) .km-again__price{ padding:4px 8px 0; font-size:18px; font-weight:700; color:#313133; }
@media (max-width: 600px){
	html:root body:not(#km-rd) .km-again{ padding:12px; border-radius:12px; }
	html:root body:not(#km-rd) .km-again__item{ flex-basis:calc((100% - 2 * var(--rd-gap)) / 2.3); }
}

/* Sponsored category banner + "Featured in" row */
html:root body:not(#km-rd) .km-up-catbanner{ border-radius:16px; margin:0 0 12px; }
html:root body:not(#km-rd) .km-up-catbanner__title{ font-family:var(--font-head); font-weight:700; }
html:root body:not(#km-rd) .km-up-catbanner__go{ font-size:14px; font-weight:500; }
html:root body:not(#km-rd) .km-up-featured{ margin:0 0 12px; padding:16px; border-radius:16px; background:#fff; }
html:root body:not(#km-rd) .km-up-featured .section-head h2{ font-size:clamp(20px, 2vw, 26px); }

/* A line opened as a flavour table. */
html:root body:not(#km-rd) .km-line-title{ font-size:clamp(20px, 2.2vw, 26px); margin:0 0 12px; }
html:root body:not(#km-rd) .km-line-title span{ font-size:13px; color:#75757A; }
html:root body:not(#km-rd) .km-flavours{ border:0; border-radius:12px; box-shadow:none; font-size:14px; }
html:root body:not(#km-rd) .km-flavours th{ font-size:12px; font-weight:500; color:#75757A; border-bottom:1px solid #E3E3E6; }
html:root body:not(#km-rd) .km-flavours td{ border-bottom-color:#EDEDEF; }
html:root body:not(#km-rd) .km-flavour__name a{ font-weight:500; color:#313133; }
html:root body:not(#km-rd) .km-flavour__price{ font-weight:700; color:#313133; }
html:root body:not(#km-rd) .km-flavour__in{ color:var(--rd-green); font-size:13px; }
html:root body:not(#km-rd) .km-newnote{ font-size:13px; color:#75757A; }

/* ---- 8 · product page ---------------------------------------------------- */

html:root body:not(#km-rd) .single-product .site-main.woocommerce-content{ padding-top:12px; }
html:root body:not(#km-rd) div.product{
	position:relative;
	isolation:isolate;
	display:grid;
	grid-template-columns:minmax(0, 44fr) minmax(0, 56fr);
	column-gap:0;
	align-items:start;
}
/* One white backdrop behind the photo + the details (row 1 only). */
html:root body:not(#km-rd) div.product::before{
	content:"";
	grid-column:1 / -1;
	grid-row:1;
	align-self:stretch;
	z-index:-1;
	border-radius:16px;
	background:#fff;
}
html:root body:not(#km-rd) div.product > *{ grid-column:1 / -1; min-width:0; }
html:root body:not(#km-rd) div.product > .woocommerce-product-gallery,
html:root body:not(#km-rd) div.product > div.images{
	grid-column:1; grid-row:1;
	float:none; width:auto; margin:0; padding:16px;
}
html:root body:not(#km-rd) div.product > .summary{
	grid-column:2; grid-row:1;
	float:none; width:auto; margin:0; padding:20px 24px 20px 12px;
}
html:root body:not(#km-rd) div.product > span.onsale{
	grid-column:1; grid-row:1; position:absolute; top:24px; left:24px; z-index:3;
	min-height:0; min-width:0; margin:0; padding:3px 8px; border-radius:4px;
	background:var(--rd-green); color:#fff; font-size:13px; font-weight:500; line-height:18px;
}

html:root body:not(#km-rd) div.product div.images img{ border-radius:8px; background:#fff; }
html:root body:not(#km-rd) div.product div.images .woocommerce-product-gallery__image{ border-radius:8px; overflow:hidden; }
html:root body:not(#km-rd) div.product div.images .flex-control-thumbs{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; padding:0; }
html:root body:not(#km-rd) div.product div.images .flex-control-thumbs li{ width:64px; float:none; margin:0; }
html:root body:not(#km-rd) div.product div.images .flex-control-thumbs li img{
	width:64px; height:64px; object-fit:contain; padding:4px; border:1px solid #E3E3E6; border-radius:8px; opacity:1;
}
html:root body:not(#km-rd) div.product div.images .flex-control-thumbs li img.flex-active{ border-color:var(--rd-gold); box-shadow:0 0 0 1px var(--rd-gold); }

html:root body:not(#km-rd) div.product .product_title{
	margin:0 0 8px; font-size:24px; font-weight:500; line-height:1.3; color:#313133;
}
html:root body:not(#km-rd) div.product .summary p.price,
html:root body:not(#km-rd) div.product .summary span.price{
	display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
	margin:8px 0 6px; font-family:var(--font-body); font-size:28px; font-weight:700; color:#313133;
}
html:root body:not(#km-rd) div.product .summary p.price ins,
html:root body:not(#km-rd) div.product .summary .price ins{ order:0; text-decoration:none; color:#313133; font-weight:700; }
html:root body:not(#km-rd) div.product .summary p.price del,
html:root body:not(#km-rd) div.product .summary .price del{ order:1; font-size:16px; font-weight:400; color:#75757A; opacity:1; }
html:root body:not(#km-rd) div.product .summary .km-up-price{ display:inline-flex; gap:10px; }
html:root body:not(#km-rd) div.product .summary .km-up-price ins{ color:var(--rd-crimson); }
html:root body:not(#km-rd) div.product .summary .tag-verify-inline{ margin:4px 0 10px !important; }
html:root body:not(#km-rd) div.product .woocommerce-product-details__short-description{ font-size:14px; color:#535357; margin:10px 0 14px; }
html:root body:not(#km-rd) div.product .woocommerce-product-details__short-description p{ margin:0 0 8px; }
html:root body:not(#km-rd) div.product p.stock{ margin:0 0 10px; font-size:14px; font-weight:500; }
html:root body:not(#km-rd) div.product p.stock.in-stock{ color:var(--rd-green); }
html:root body:not(#km-rd) div.product p.stock.out-of-stock{ color:var(--rd-crimson); }

html:root body:not(#km-rd) div.product form.cart{
	display:flex; flex-wrap:wrap; align-items:stretch; gap:10px;
	margin:14px 0 12px; padding:14px; border-radius:12px; background:#F7F7F8;
}
html:root body:not(#km-rd) div.product form.cart::before,
html:root body:not(#km-rd) div.product form.cart::after{ display:none; }
html:root body:not(#km-rd) div.product form.cart div.quantity{ float:none; margin:0; }
html:root body:not(#km-rd) div.product form.cart div.quantity input.qty,
html:root body:not(#km-rd) div.product form.cart .quantity input{
	width:84px; height:48px; padding:0 8px; border:1px solid #D9D9DC; border-radius:10px; background:#fff;
	font-size:16px; font-weight:500; text-align:center;
}
html:root body:not(#km-rd) div.product form.cart .single_add_to_cart_button,
html:root body:not(#km-rd) div.product form.cart .button{
	float:none; flex:1 1 200px; min-height:48px; padding:0 24px; margin:0;
	border-radius:999px; background:var(--rd-gold); color:var(--rd-navy);
	font-size:16px; font-weight:700; letter-spacing:0;
}
html:root body:not(#km-rd) div.product form.cart .single_add_to_cart_button:hover{ background:var(--rd-gold-hi); color:var(--rd-navy); }
html:root body:not(#km-rd) div.product .km-wish--label{ min-height:44px; font-size:14px; font-weight:500; margin:0 0 12px; }
html:root body:not(#km-rd) div.product .product_meta{
	margin-top:14px; padding-top:12px; border-top:1px solid #EDEDEF;
	font-size:13px; color:#75757A; display:flex; flex-direction:column; gap:4px;
}
html:root body:not(#km-rd) div.product .product_meta a{ color:var(--rd-navy); font-weight:500; }

/* Flash box + volume tiers inside the details. */
html:root body:not(#km-rd) .km-up-flashbox{ border:0; border-radius:12px; background:#fff; box-shadow:0 0 0 1px #F2C9D2; }
html:root body:not(#km-rd) .km-up-flashbox__head{ padding:8px 12px; background:var(--rd-crimson); }
html:root body:not(#km-rd) .km-up-flashbox__title{ font-size:15px; font-weight:700; }
html:root body:not(#km-rd) .km-up-flashbox__title .km-up-icon{ color:#FFD54A; }
html:root body:not(#km-rd) .km-up-flashbox__head .km-up-clock__label{ color:#fff; font-size:13px; }
html:root body:not(#km-rd) .km-up-flashbox__head .km-up-clock__time{ background:#fff; color:var(--rd-crimson); font-size:14px; border-radius:6px; }
html:root body:not(#km-rd) .km-up-flashbox__price ins{ font-size:26px; color:var(--rd-crimson); }
html:root body:not(#km-rd) .km-up-flashbox .km-up-stock{ padding:0 12px 12px; gap:4px; }
html:root body:not(#km-rd) .km-up-flashbox .km-up-stock__text{ text-align:left; padding:0; background:transparent; }
html:root body:not(#km-rd) .km-up-flashbox .km-up-bar{ height:6px; background:#F6E3B8; }
html:root body:not(#km-rd) .km-up-tiers__card{ border:1px solid #E3E3E6; border-radius:12px; }
html:root body:not(#km-rd) .km-up-tiers__title{ font-size:15px; background:var(--rd-tint); border-bottom-color:#F1E2C2; }
html:root body:not(#km-rd) .km-up-tiers__table{ font-size:14px; }
html:root body:not(#km-rd) .km-up-tiers__table thead th{ font-size:12px; font-weight:500; color:#75757A; }
html:root body:not(#km-rd) .km-up-tiers__table tbody tr.is-on th,
html:root body:not(#km-rd) .km-up-tiers__table tbody tr.is-on td{ background:#EAF6EE; }
html:root body:not(#km-rd) .km-up-tiers__table tbody tr.is-on th{ box-shadow:inset 4px 0 0 var(--rd-green); }

/* Everything under the photo + details: white panels. */
html:root body:not(#km-rd) div.product > .woocommerce-tabs,
html:root body:not(#km-rd) div.product > .km-up-pdp-more > section,
html:root body:not(#km-rd) div.product > .related.products,
html:root body:not(#km-rd) div.product > .upsells.products{
	margin:16px 0 0; padding:16px; border-radius:16px; background:#fff;
}
html:root body:not(#km-rd) div.product > .km-up-pdp-more{ margin:0; gap:0; }
html:root body:not(#km-rd) div.product > .km-up-pdp-more > [hidden]{ display:none; }
html:root body:not(#km-rd) .related.products > h2,
html:root body:not(#km-rd) .upsells.products > h2,
html:root body:not(#km-rd) .km-up-h2{ margin:0 0 12px; font-size:clamp(20px, 2vw, 26px); font-weight:700; color:#313133; }
html:root body:not(#km-rd) .km-up-fbt__item{ border:1px solid #EBEBED; border-radius:12px; }
html:root body:not(#km-rd) .km-up-fbt__name{ font-size:14px; color:#535357; }
html:root body:not(#km-rd) .km-up-fbt__price{ font-size:16px; }
html:root body:not(#km-rd) .km-up-fbt__sum{ font-size:20px; font-weight:700; }
html:root body:not(#km-rd) .km-up-fbt__add{ font-size:15px; font-weight:500; }
html:root body:not(#km-rd) .km-up-pdp-bundles .km-up-bundle{ box-shadow:0 0 0 1px #EBEBED; }

html:root body:not(#km-rd) div.product .woocommerce-tabs ul.tabs{
	display:flex; gap:4px; margin:0 0 12px; padding:0; border-bottom:1px solid #E3E3E6; overflow-x:auto;
}
html:root body:not(#km-rd) div.product .woocommerce-tabs ul.tabs::before,
html:root body:not(#km-rd) div.product .woocommerce-tabs ul.tabs li::before,
html:root body:not(#km-rd) div.product .woocommerce-tabs ul.tabs li::after{ display:none; }
html:root body:not(#km-rd) div.product .woocommerce-tabs ul.tabs li{
	margin:0; padding:0; border:0; border-radius:0; background:transparent;
}
html:root body:not(#km-rd) div.product .woocommerce-tabs ul.tabs li a{
	display:inline-flex; align-items:center; min-height:44px; padding:0 14px;
	font-size:15px; font-weight:500; color:#535357; border-bottom:3px solid transparent;
}
html:root body:not(#km-rd) div.product .woocommerce-tabs ul.tabs li.active a{ color:#313133; border-bottom-color:var(--rd-gold); }
html:root body:not(#km-rd) div.product .woocommerce-tabs .panel{ margin:0; font-size:14px; color:#535357; }
html:root body:not(#km-rd) div.product .woocommerce-tabs .panel h2{ font-size:18px; }

@media (max-width: 900px){
	html:root body:not(#km-rd) div.product{ grid-template-columns:minmax(0,1fr); }
	html:root body:not(#km-rd) div.product::before{ grid-row:1 / span 2; }
	html:root body:not(#km-rd) div.product > .woocommerce-product-gallery,
	html:root body:not(#km-rd) div.product > div.images{ grid-column:1; grid-row:1; padding:12px 12px 0; }
	html:root body:not(#km-rd) div.product > .summary{ grid-column:1; grid-row:2; padding:12px 14px 16px; }
	html:root body:not(#km-rd) div.product .product_title{ font-size:20px; }
	html:root body:not(#km-rd) div.product .summary p.price,
	html:root body:not(#km-rd) div.product .summary span.price{ font-size:24px; }
}
@media (max-width: 600px){
	html:root body:not(#km-rd) div.product > .woocommerce-tabs,
	html:root body:not(#km-rd) div.product > .km-up-pdp-more > section,
	html:root body:not(#km-rd) div.product > .related.products,
	html:root body:not(#km-rd) div.product > .upsells.products{ margin-top:8px; padding:12px; border-radius:12px; }
	html:root body:not(#km-rd) div.product::before{ border-radius:12px; }
	html:root body:not(#km-rd) div.product form.cart{ padding:10px; }
}

/* Floating bar (product page / scroll) */
html:root body:not(#km-rd) .km-bar__inner{ background:#fff; border:0; border-radius:14px; box-shadow:0 10px 30px rgba(14,26,43,0.2); }
html:root body:not(#km-rd) .km-bar__name{ font-family:var(--font-body); font-size:14px; font-weight:500; color:#313133; }
html:root body:not(#km-rd) .km-bar__price{ font-size:14px; font-weight:700; color:#313133; }

/* ---- 9 · cart drawer + cart page ---------------------------------------- */

html:root body:not(#km-rd) .km-panel{ width:min(420px, 100%); background:#fff; border-radius:16px 0 0 16px; }
html:root body:not(#km-rd) .km-panel__head{ padding:12px 12px 12px 16px; border-bottom:1px solid #EDEDEF; }
html:root body:not(#km-rd) .km-panel__head h2{ font-family:var(--font-head); font-size:19px; font-weight:700; color:#313133; }
html:root body:not(#km-rd) .km-panel__close{ width:44px; height:44px; padding:0; border-radius:50%; font-size:26px; color:#535357; }
html:root body:not(#km-rd) .km-panel__close:hover{ background:#F1F1F2; }
html:root body:not(#km-rd) .km-panel__body{ padding:12px 16px; background:#fff; }
html:root body:not(#km-rd) .km-panel__foot{ padding:12px 16px 16px; border-top:1px solid #EDEDEF; background:#fff; box-shadow:0 -6px 16px rgba(14,26,43,0.06); }

html:root body:not(#km-rd) .km-up-cart{ gap:8px; margin:0 0 10px; }
html:root body:not(#km-rd) .km-up-prog{ gap:6px; padding:10px 12px; border-radius:10px; background:var(--rd-amber-bg); }
html:root body:not(#km-rd) .km-up-prog__text{ font-size:13px; font-weight:500; color:#313133; }
html:root body:not(#km-rd) .km-up-prog__text .km-up-icon{ color:var(--rd-amber); }
html:root body:not(#km-rd) .km-up-bar{ height:6px; background:rgba(14,26,43,0.1); }
html:root body:not(#km-rd) .km-up-bar__fill{ background:var(--rd-gold); }
html:root body:not(#km-rd) .km-up-prog.is-done{ background:#EAF6EE; }
html:root body:not(#km-rd) .km-up-prog.is-done .km-up-prog__text,
html:root body:not(#km-rd) .km-up-prog.is-done .km-up-icon{ color:var(--rd-green); }
html:root body:not(#km-rd) .km-up-prog.is-done .km-up-bar__fill{ background:var(--rd-green); }
html:root body:not(#km-rd) .km-up-nudge{ border-radius:10px; border-color:var(--rd-gold); font-size:13px; }
html:root body:not(#km-rd) .km-up-sugg__title{ margin:6px 0 8px; font-size:15px; font-weight:700; color:#313133; }
html:root body:not(#km-rd) .km-up-sugg__row{ gap:8px; }
/* "Complete your order": compact side-by-side cards (photo, name, price,
   round +) so the basket lines stay above the fold on a phone. */
html:root body:not(#km-rd) .km-up-sugg__item{
	display:grid; grid-template-columns:56px minmax(0,1fr) auto; grid-template-rows:auto auto;
	align-items:center; column-gap:8px; row-gap:2px;
	flex:0 0 236px; padding:6px 6px 6px 6px;
	border:1px solid #EBEBED; border-radius:10px; overflow:hidden; background:#fff;
}
html:root body:not(#km-rd) .km-up-sugg__pic{ grid-row:1 / span 2; grid-column:1; border-radius:8px; background:#fff; }
html:root body:not(#km-rd) .km-up-sugg__pic img{ width:56px; height:56px; padding:3px; }
html:root body:not(#km-rd) .km-up-sugg__name{ grid-column:2; grid-row:1; min-height:0; padding:0; font-size:12px; line-height:1.3; color:#535357; }
html:root body:not(#km-rd) .km-up-sugg__price{ grid-column:2; grid-row:2; padding:0; font-size:14px; font-weight:700; color:#313133; }
html:root body:not(#km-rd) .km-up-sugg__add{
	grid-column:3; grid-row:1 / span 2; position:relative;
	width:40px; height:40px; min-height:0; margin:0; padding:0;
	border-radius:50%; border:0; background:#313133; color:#fff; font-size:0;
}
html:root body:not(#km-rd) .km-up-sugg__add::before{
	content:""; position:absolute; inset:0; margin:auto; width:14px; height:14px;
	background:linear-gradient(#fff,#fff) center / 14px 2px no-repeat, linear-gradient(#fff,#fff) center / 2px 14px no-repeat;
}
html:root body:not(#km-rd) .km-up-sugg__add[disabled]::before{ opacity:.5; }
html:root body:not(#km-rd) .km-up-sugg__add:hover{ background:var(--rd-gold-dk); }
html:root body:not(#km-rd) .km-panel__total--fee .woocommerce-Price-currencySymbol,
html:root body:not(#km-rd) .km-panel__total--fee .woocommerce-Price-amount span{ padding-right:0; }
html:root body:not(#km-rd) .km-up-cartpage{ border:0; border-radius:16px; }
html:root body:not(#km-rd) .km-up-cartpage .km-up-sugg__item{ flex-basis:260px; }

html:root body:not(#km-rd) .km-cart-tools{ gap:4px 14px; padding:0 0 8px; border-bottom:1px solid #EDEDEF; }
html:root body:not(#km-rd) .km-cart-tools__all{ font-size:14px; font-weight:500; }
html:root body:not(#km-rd) .km-cart-tools__btn{ font-size:13px; font-weight:500; color:#535357; }
html:root body:not(#km-rd) .km-cart-confirm{ border-radius:10px; }

html:root body:not(#km-rd) .km-cart-line{ gap:10px; padding:12px 0; border-bottom:1px solid #EDEDEF; }
html:root body:not(#km-rd) .km-cart-line img{ width:64px; height:64px; flex:0 0 64px; padding:4px; border:1px solid #EDEDEF; border-radius:8px; background:#fff; }
html:root body:not(#km-rd) .km-cart-line__name{ font-size:14px; font-weight:500; line-height:1.35; color:#313133; }
html:root body:not(#km-rd) .km-cart-line__price{ font-size:12px; color:#75757A; margin-top:2px; }
html:root body:not(#km-rd) .km-cart-line__row{ gap:8px 10px; margin-top:8px; }
/* The drawer's stepper is its own pill (motion.css). cart-stepper.css's
   card rules (display:block, and a 2-column grid on touch screens) also
   match .km-qty, and depending on load order squashed it -- pinned here. */
html:root body:not(#km-rd) .km-cart-line .km-qty{
	display:inline-flex; align-items:center; width:auto; min-height:0;
	grid-template-columns:none; column-gap:0;
	border:1px solid #D9D9DC; border-radius:999px; background:#fff;
}
html:root body:not(#km-rd) .km-cart-line .km-qty__btn{ flex:0 0 32px; width:32px; height:32px; }
@media (pointer: coarse), (max-width: 900px){
	html:root body:not(#km-rd) .km-cart-line .km-qty__btn{ flex:0 0 44px; width:44px; height:44px; }
}
html:root body:not(#km-rd) .km-qty__n{ font-family:var(--font-body); font-weight:700; font-size:15px; }
html:root body:not(#km-rd) .km-cart-line__total{ font-size:15px; font-weight:700; color:#313133; }
html:root body:not(#km-rd) .km-cart-line__remove{ font-size:12px; font-weight:500; color:#75757A; text-decoration:underline; text-underline-offset:2px; }

html:root body:not(#km-rd) .km-panel__totals{ margin-bottom:10px; }
html:root body:not(#km-rd) .km-panel__total{ padding:4px 0; margin:0; font-size:14px; color:#535357; }
html:root body:not(#km-rd) .km-panel__total--grand{ padding-top:10px; margin-top:6px; border-top:1px solid #EDEDEF; color:#313133; font-size:16px; font-weight:700; }
html:root body:not(#km-rd) .km-panel__total--grand strong{ font-family:var(--font-body); font-size:20px; font-weight:700; }
html:root body:not(#km-rd) .km-panel__note{ font-size:12px; color:#75757A; }
html:root body:not(#km-rd) .km-panel__actions{ gap:8px; }
html:root body:not(#km-rd) .km-panel__actions .btn{ min-height:48px; font-size:15px; }
html:root body:not(#km-rd) .km-panel__actions .btn-amber{ font-weight:700; }
@media (max-width: 520px){
	html:root body:not(#km-rd) .km-panel{ border-radius:0; }
}

/* Cart page (classic) + checkout */
html:root body:not(#km-rd) .woocommerce-cart .page-header,
html:root body:not(#km-rd) .woocommerce-checkout .page-header{ margin-bottom:12px; padding-bottom:0; border:0; }
html:root body:not(#km-rd) .woocommerce-cart .page-header h1,
html:root body:not(#km-rd) .woocommerce-checkout .page-header h1{ font-size:clamp(22px, 2.2vw, 28px); }
html:root body:not(#km-rd) .woocommerce-cart table.shop_table{ background:#fff; border:0; border-radius:16px; overflow:hidden; }
html:root body:not(#km-rd) .woocommerce-cart table.shop_table th{ font-size:13px; font-weight:500; color:#75757A; }
html:root body:not(#km-rd) .woocommerce-cart table.shop_table td{ border-color:#EDEDEF; font-size:14px; }
html:root body:not(#km-rd) .woocommerce-cart table.cart img{ width:64px; border-radius:8px; border:1px solid #EDEDEF; }
html:root body:not(#km-rd) .woocommerce-cart .cart-collaterals .cart_totals{ padding:16px; background:#fff; border-radius:16px; }
html:root body:not(#km-rd) .woocommerce-cart .wc-proceed-to-checkout .checkout-button{
	min-height:52px; font-size:17px; font-weight:700; background:var(--rd-gold); color:var(--rd-navy); border-radius:999px;
}

/* ---- 10 · account, generic pages, footer ------------------------------- */

html:root body:not(#km-rd) .site-main{ padding:20px 0 48px; }
html:root body:not(#km-rd) .page-header{ margin-bottom:16px; padding-bottom:12px; }
html:root body:not(#km-rd) .page-header h1{ font-size:clamp(24px, 2.6vw, 32px); }
html:root body:not(#km-rd) .km-acct-head{ margin-bottom:16px; padding:16px 20px; border:0; border-radius:16px; background:#fff; }
html:root body:not(#km-rd) .km-acct-head h1{ font-size:clamp(22px, 2.4vw, 28px); }
html:root body:not(#km-rd) .woocommerce-MyAccount-navigation ul{ background:#fff; border:0; border-radius:12px; }
html:root body:not(#km-rd) .woocommerce-MyAccount-navigation li{ border-bottom-color:#EDEDEF; }
html:root body:not(#km-rd) .woocommerce-MyAccount-navigation li a{ font-size:14px; font-weight:500; padding:12px 16px; }
html:root body:not(#km-rd) .woocommerce-MyAccount-navigation li.is-active a{ background:var(--rd-navy); color:#fff; border-left-color:var(--rd-gold); }
html:root body:not(#km-rd) .woocommerce-account.logged-in .woocommerce-MyAccount-content{ padding:20px; background:#fff; border-radius:16px; }
html:root body:not(#km-rd) .woocommerce-form-login,
html:root body:not(#km-rd) .woocommerce-form-register{ background:#fff; border:0; border-radius:16px; }
html:root body:not(#km-rd) .km-acct-card,
html:root body:not(#km-rd) .km-store-chooser__card,
html:root body:not(#km-rd) .woocommerce-Address,
html:root body:not(#km-rd) .km-acct-owed{ background:#F7F7F8; border-color:#EDEDEF; border-radius:12px; }
html:root body:not(#km-rd) .km-acct-card b,
html:root body:not(#km-rd) .km-store-chooser__card b{ font-size:15px; font-weight:700; }
html:root body:not(#km-rd) .woocommerce-form-row label,
html:root body:not(#km-rd) .woocommerce-account form .form-row label{ font-size:13px; font-weight:500; color:#535357; }
@media (max-width: 900px){
	html:root body:not(#km-rd) .woocommerce-account .woocommerce-MyAccount-navigation ul{ background:none; }
	html:root body:not(#km-rd) .woocommerce-account .woocommerce-MyAccount-navigation li a{ background:#fff; border-color:#E3E3E6; }
	html:root body:not(#km-rd) .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background:var(--rd-navy); border-color:var(--rd-navy); color:#fff; }
	html:root body:not(#km-rd) .woocommerce-account.logged-in .woocommerce-MyAccount-content{ padding:14px; }
}

html:root body:not(#km-rd) .woocommerce-message,
html:root body:not(#km-rd) .woocommerce-error,
html:root body:not(#km-rd) .woocommerce-info{ background:#fff; border:0; border-left:4px solid var(--rd-gold); border-radius:10px; font-size:14px; }
html:root body:not(#km-rd) .woocommerce-error{ border-left-color:var(--rd-crimson); }

html:root body:not(#km-rd) .site-footer{ background:var(--rd-navy); padding-top:40px; margin-top:16px; }
html:root body:not(#km-rd) .footer-col h3,
html:root body:not(#km-rd) .footer-col h4{ font-size:15px; font-weight:700; color:#fff; margin-bottom:12px; }
html:root body:not(#km-rd) .footer-col p,
html:root body:not(#km-rd) .footer-col address,
html:root body:not(#km-rd) .footer-col ul a{ font-size:14px; }
html:root body:not(#km-rd) .footer-logo{ font-family:var(--font-head); font-size:22px; font-weight:700; }
html:root body:not(#km-rd) .footer-bottom,
html:root body:not(#km-rd) .footer-disclaimer{ font-size:12px; }

html:root body:not(#km-rd) .age-gate-panel h2{ font-size:26px; color:#fff; }
html:root body:not(#km-rd) .age-gate-eyebrow{ font-size:13px; font-weight:500; }

/* ---- 11 · phones: inputs stay 16px (no iOS zoom) ------------------------ */

@media (pointer: coarse), (max-width: 900px){
	html:root body:not(#km-rd) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
	html:root body:not(#km-rd) select,
	html:root body:not(#km-rd) textarea,
	html:root body:not(#km-rd) .km-search__input,
	html:root body:not(#km-rd) .km-search__cat,
	html:root body:not(#km-rd) .km-sort select,
	html:root body:not(#km-rd) .km-facet__range input,
	html:root body:not(#km-rd) .km-facet__search input,
	html:root body:not(#km-rd) .km-qty__count,
	html:root body:not(#km-rd) .km-qty__n{ font-size:16px; }
	html:root body:not(#km-rd) .km-shelf__more,
	html:root body:not(#km-rd) .km-up-flash__all{ min-height:44px; }
	html:root body:not(#km-rd) .km-cart-tools__btn,
	html:root body:not(#km-rd) .km-cart-line__remove{ min-height:44px; }
	html:root body:not(#km-rd) .km-up-sugg__add{ width:44px; height:44px; }
	html:root body:not(#km-rd) .km-quickcats__row a{ min-width:44px; justify-content:center; }
	html:root body:not(#km-rd) .footer-col a,
	html:root body:not(#km-rd) .footer-links a{ min-height:44px; }
	html:root body:not(#km-rd) .km-chip{ min-height:44px; padding-right:0; }
	html:root body:not(#km-rd) .km-chip a{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin:-6px 0; font-size:18px; }
	/* The banner dots stay small to look at but get a thumb-sized hit area. */
	html:root body:not(#km-rd) .km-ads__dot{ position:relative; }
	html:root body:not(#km-rd) .km-ads__dot::after{ content:""; position:absolute; left:-4px; right:-4px; top:-18px; bottom:-18px; }
}

/* Pack size tag (2026-10-30): names are cut to 2 lines on shelves and 3 on
   grid pages, so the pack size from the end of the name ("Case of 24")
   gets its own tag under it. km_loop_pack_size() / packTag() in upsell.js. */
html:root body:not(#km-rd) ul.products li.product .km-pack,
html:root body:not(#km-rd) .km-up-deal .km-pack{
	order:2;
	align-self:flex-start;
	display:inline-block;
	margin:4px 8px 0;
	padding:1px 6px;
	border-radius:4px;
	background:#F1F1F2;
	color:#313133;
	font-size:12px;
	font-weight:500;
	line-height:18px;
	white-space:nowrap;
}

/* ==========================================================================
   HERO ARTWORK + ESSENTIALS ROW + GOLD ACCENTS (2026-10-30, Jumia pass)

   Banner (inc/upsell.php km_up_render_hero): every slide is a navy panel
   with a bold gold diagonal on the right (.km-ad__stage). The picture
   decides the rest, detected server-side from the file:
     .km-ad--art       transparent PNG/WebP (product cluster, a person):
                       floats over the diagonal, edge to edge;
     .km-ad--grounded  ...and solid along its bottom edge (a person cut
                       at the waist): stands on the banner's bottom edge;
     .km-ad--photo     an ordinary photo: a white framed card, tilted;
     .km-ad--plain     no picture: the diagonal + rings alone.
   Headline: live HTML, Ubuntu 700, gold words from *markup*, optional
   crimson pill from a leading [Pill]. Slides share one grid cell, so the
   banner is as tall as its tallest slide and never jumps as it turns.
   Essentials (functions.php km_home_essentials): navy cards on a lavender
   panel, gold circle + product cut-out, white pill caption.
   Text on gold is always navy (WCAG AA: #0E1A2B on #C6902E = 6.4:1).
   ========================================================================== */

/* ---- banner frame + slides ------------------------------------------------ */
html:root body:not(#km-rd):not(.km-dashboard-page) .km-ads--art .km-ads__frame{
	background:var(--rd-navy);
	border-radius:20px;
	box-shadow:0 10px 30px rgba(14,26,43,0.18);
}
html:root body:not(#km-rd) .km-ads--art .km-ads__track{ display:grid; min-height:0; }
html:root body:not(#km-rd) .km-ads--art .km-ad{
	position:relative; inset:auto; grid-area:1 / 1;
	display:grid; grid-template-columns:minmax(0, 45fr) minmax(0, 55fr); align-items:center;
	gap:0; padding:0; min-height:clamp(380px, 37vw, 460px);
	overflow:hidden; isolation:isolate; text-align:left;
}

/* The stage: navy with a soft glow behind the words, the gold diagonal, and
   a thin light stripe running beside it (the "split"). Pure decoration. */
html:root body:not(#km-rd) .km-ad__stage{
	position:absolute; inset:0; z-index:-3; pointer-events:none;
	background:
		radial-gradient(ellipse 60% 80% at 8% 20%, rgba(38,64,99,0.9), transparent 70%),
		var(--rd-navy);
}
html:root body:not(#km-rd) .km-ad__stage::before,
html:root body:not(#km-rd) .km-ad__stage::after{ content:""; position:absolute; inset:0; }
html:root body:not(#km-rd) .km-ad__stage::before{
	background:
		radial-gradient(circle at 72% 46%, rgba(255,226,160,0.55), transparent 42%),
		linear-gradient(160deg, #DDAA4A 0%, var(--rd-gold) 45%, #A9771F 100%);
	clip-path:polygon(54% 0, 100% 0, 100% 100%, 42% 100%);
}
html:root body:not(#km-rd) .km-ad__stage::after{
	background:var(--rd-gold-hi);
	opacity:.55;
	clip-path:polygon(51.2% 0, 52.4% 0, 40.4% 100%, 39.2% 100%);
}

/* Words. */
html:root body:not(#km-rd) .km-ads--art .km-ad__copy{
	order:1; position:relative; z-index:2;
	padding:44px 24px 60px 72px; min-width:0;
}
html:root body:not(#km-rd) .km-ad__pill{
	display:inline-flex; align-items:center; min-height:26px;
	margin:0 0 14px; padding:0 12px; border-radius:999px;
	background:var(--rd-crimson); color:#fff;
	font-size:12px; font-weight:700; letter-spacing:.08em; line-height:1; text-transform:uppercase;
}
html:root body:not(#km-rd) .km-ads--art .km-ad__headline{
	margin:0 0 14px; max-width:14ch;
	font-family:var(--font-head); font-weight:700; text-transform:none; letter-spacing:-0.015em;
	font-size:clamp(34px, 4.3vw, 58px); line-height:1.02; color:#fff;
	text-wrap:balance;
}
html:root body:not(#km-rd) .km-ad__hl{ color:var(--rd-gold-hi); }
html:root body:not(#km-rd) .km-ads--art .km-ad__body{
	margin:0 0 24px; max-width:36ch;
	font-size:18px; line-height:1.45; color:#C9D3E0;
}
html:root body:not(#km-rd) .km-ads--art .km-ad__cta{
	display:inline-flex; align-items:center; gap:10px;
	min-height:52px; padding:0 26px 0 30px; border-radius:999px;
	background:var(--rd-gold); color:var(--rd-navy);
	font-family:var(--font-head); font-size:16px; font-weight:700; letter-spacing:0; text-transform:none;
	box-shadow:0 8px 22px rgba(198,144,46,0.35);
	transition:background .15s ease, transform .15s ease;
}
html:root body:not(#km-rd) .km-ads--art .km-ad__cta svg{ width:20px; height:20px; transition:transform .15s ease; }
html:root body:not(#km-rd) .km-ads--art .km-ad__cta:hover{ background:var(--rd-gold-hi); color:var(--rd-navy); text-decoration:none; }
html:root body:not(#km-rd) .km-ads--art .km-ad__cta:hover svg{ transform:translateX(3px); }
html:root body:not(#km-rd) .km-ads--art .km-ad__cta:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

/* Picture column. */
html:root body:not(#km-rd) .km-ads--art .km-ad__pic{
	order:2; position:relative; align-self:stretch; display:block;
	min-width:0; min-height:0; padding:0; isolation:isolate;
}
/* A soft light behind the picture so dark packs lift off the gold. */
html:root body:not(#km-rd) .km-ads--art .km-ad--art .km-ad__pic::before{
	content:""; position:absolute; z-index:-1; left:50%; top:50%;
	width:min(78%, 440px); aspect-ratio:1; transform:translate(-50%, -50%);
	border-radius:50%;
	background:radial-gradient(circle, rgba(255,240,205,0.75), rgba(255,240,205,0) 66%);
}
html:root body:not(#km-rd) .km-ads--art .km-ad--art .km-ad__pic img{
	position:absolute; left:0; top:4%; width:100%; height:92%;
	max-width:none; max-height:none; margin:0;
	object-fit:contain; object-position:center; filter:none;
	/* A small lift as a slide turns in (hero.js moves .is-on); the slide's
	   own fade comes from hero.css. Never hidden by default. */
	transform:scale(.97) translateY(8px);
	transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
html:root body:not(#km-rd) .km-ads--art .km-ad--art.is-on .km-ad__pic img{ transform:none; }
/* A person cut at the waist stands on the bottom edge. */
html:root body:not(#km-rd) .km-ads--art .km-ad--grounded .km-ad__pic img{ top:2%; height:98%; object-position:center bottom; }
html:root body:not(#km-rd) .km-ads--art .km-ad--grounded .km-ad__pic::before{ top:46%; }

/* Ordinary photo: framed white card, tilted, on the gold. */
html:root body:not(#km-rd) .km-ads--art .km-ad--photo .km-ad__pic{ display:flex; align-items:center; justify-content:center; padding:32px 40px 48px 18%; }
html:root body:not(#km-rd) .km-ads--art .km-ad--photo .km-ad__pic img{
	width:auto; height:auto; max-width:100%; max-height:300px;
	padding:16px; border-radius:18px; background:#fff; object-fit:contain;
	box-shadow:0 18px 40px rgba(14,26,43,0.35); filter:none;
	transform:rotate(-3deg);
}

/* No picture: two gold rings fill the diagonal. */
html:root body:not(#km-rd) .km-ads--art .km-ad--plain{ grid-template-columns:minmax(0, 1fr); }
html:root body:not(#km-rd) .km-ads--art .km-ad--plain .km-ad__copy{ max-width:60%; }
html:root body:not(#km-rd) .km-ads--art .km-ad--plain .km-ad__stage::before{
	background:
		radial-gradient(circle at 76% 50%, transparent 0 110px, rgba(14,26,43,0.18) 111px 122px, transparent 123px 170px, rgba(14,26,43,0.12) 171px 180px, transparent 181px),
		radial-gradient(circle at 76% 50%, rgba(255,226,160,0.6), transparent 42%),
		linear-gradient(160deg, #DDAA4A 0%, var(--rd-gold) 45%, #A9771F 100%);
}

/* Controls on the designed banner. */
html:root body:not(#km-rd) .km-ads--art .km-ads__arrow--prev{ left:14px; }
html:root body:not(#km-rd) .km-ads--art .km-ads__arrow--next{ right:14px; }
/* Dots sit under the words, off the artwork. */
html:root body:not(#km-rd) .km-ads--art .km-ads__dots{ left:72px; right:auto; transform:none; bottom:18px; background:rgba(255,255,255,0.12); }
html:root body:not(#km-rd) .km-ads--art .km-ads__dot{ background:rgba(255,255,255,0.45); }
html:root body:not(#km-rd) .km-ads--art .km-ads__dot.is-on{ background:var(--rd-gold-hi); }

/* Tablet: the words get a little more room. */
@media (max-width: 1000px) and (min-width: 701px){
	html:root body:not(#km-rd) .km-ads--art .km-ad{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); min-height:360px; }
	html:root body:not(#km-rd) .km-ads--art .km-ad__copy{ padding:36px 12px 56px 64px; }
	html:root body:not(#km-rd) .km-ads--art .km-ad__body{ font-size:16px; }
	html:root body:not(#km-rd) .km-ad__stage::before{ clip-path:polygon(58% 0, 100% 0, 100% 100%, 46% 100%); }
	html:root body:not(#km-rd) .km-ad__stage::after{ clip-path:polygon(55.2% 0, 56.4% 0, 44.4% 100%, 43.2% 100%); }
}

/* Phone: words on top, picture below on its own gold block (diagonal top
   edge), whole picture always shown -- a person keeps head and box. */
@media (max-width: 700px){
	html:root body:not(#km-rd):not(.km-dashboard-page) .km-ads--art .km-ads__frame{ border-radius:14px; }
	html:root body:not(#km-rd) .km-ads--art .km-ad{
		grid-template-columns:minmax(0, 1fr); grid-template-rows:auto auto; align-items:stretch; min-height:0;
	}
	html:root body:not(#km-rd) .km-ad__stage::before,
	html:root body:not(#km-rd) .km-ad__stage::after{ display:none; }
	html:root body:not(#km-rd) .km-ads--art .km-ad__copy{ padding:22px 20px 4px; text-align:left; }
	html:root body:not(#km-rd) .km-ad__pill{ min-height:24px; margin-bottom:10px; font-size:11px; }
	html:root body:not(#km-rd) .km-ads--art .km-ad__headline{ max-width:none; margin-bottom:8px; font-size:clamp(27px, 8vw, 34px); line-height:1.06; }
	html:root body:not(#km-rd) .km-ads--art .km-ad__body{ margin:0 0 14px; font-size:15px; }
	html:root body:not(#km-rd) .km-ads--art .km-ad__cta{ min-height:46px; padding:0 20px 0 24px; font-size:15px; }
	html:root body:not(#km-rd) .km-ads--art .km-ad__pic{
		margin-top:6px; padding:0 0 46px; aspect-ratio:auto; height:auto;
	}
	/* The gold block sits behind the picture and runs to the bottom edge. */
	html:root body:not(#km-rd) .km-ads--art .km-ad__pic::after{
		content:""; position:absolute; z-index:-2; left:0; right:0; top:14%; bottom:0;
		background:
			radial-gradient(circle at 50% 40%, rgba(255,226,160,0.55), transparent 55%),
			linear-gradient(160deg, #DDAA4A 0%, var(--rd-gold) 45%, #A9771F 100%);
		clip-path:polygon(0 18%, 100% 0, 100% 100%, 0 100%);
	}
	html:root body:not(#km-rd) .km-ads--art .km-ad--art .km-ad__pic img{
		position:relative; left:auto; top:auto; display:block;
		width:100%; height:auto; max-height:300px; margin:0 auto;
	}
	html:root body:not(#km-rd) .km-ads--art .km-ad--grounded .km-ad__pic{ padding-bottom:0; }
	html:root body:not(#km-rd) .km-ads--art .km-ad--grounded .km-ad__pic img{ height:auto; max-height:320px; }
	html:root body:not(#km-rd) .km-ads--art .km-ad--art .km-ad__pic::before{ top:58%; width:70%; }
	html:root body:not(#km-rd) .km-ads--art .km-ad--photo .km-ad__pic{ padding:24px 24px 56px; }
	html:root body:not(#km-rd) .km-ads--art .km-ad--photo .km-ad__pic img{ max-height:200px; }
	html:root body:not(#km-rd) .km-ads--art .km-ad--plain .km-ad__copy{ max-width:none; padding-bottom:64px; }
	/* Phones swipe (hero.js); the arrows would sit on the artwork, so only
	   the dots stay, small, at the foot. */
	html:root body:not(#km-rd) .km-ads--art .km-ads__arrow{ display:none; }
	html:root body:not(#km-rd) .km-ads--art .km-ads__dots{ left:50%; transform:translateX(-50%); bottom:10px; background:rgba(14,26,43,0.55); }
}

@media (prefers-reduced-motion: reduce){
	html:root body:not(#km-rd) .km-ads--art .km-ad--art .km-ad__pic img{ transition:none; transform:none; }
}

/* ---- "Shop your essentials in one place" ---------------------------------- */
html:root body:not(#km-rd) .km-ess{ padding:0; margin:0 0 16px; }
html:root body:not(#km-rd) .km-ess__panel .section-head h2{ color:var(--rd-purple); }
html:root body:not(#km-rd) .km-ess__row{
	display:flex; gap:12px; margin:0; padding:2px 2px 4px; list-style:none;
	overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain;
	scroll-snap-type:x proximity;
}
html:root body:not(#km-rd) .km-ess__row::-webkit-scrollbar{ display:none; }
html:root body:not(#km-rd) .km-ess__row > li{ flex:0 0 184px; margin:0; scroll-snap-align:start; }
html:root body:not(#km-rd) .km-ess__card{
	position:relative; display:flex; flex-direction:column; align-items:center;
	height:184px; padding:12px 12px 12px; border-radius:16px;
	border:4px solid #fff; background:var(--rd-navy); color:#fff;
	overflow:hidden; text-decoration:none;
	box-shadow:0 1px 2px rgba(14,26,43,0.08);
	transition:transform .18s ease, box-shadow .18s ease;
}
html:root body:not(#km-rd) .km-ess__card:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(14,26,43,0.22); text-decoration:none; color:#fff; }
html:root body:not(#km-rd) .km-ess__card:focus-visible{ outline:3px solid var(--rd-gold); outline-offset:2px; }
html:root body:not(#km-rd) .km-ess__title{
	align-self:flex-start; position:relative; z-index:2;
	font-size:15px; font-weight:700; line-height:1.2; color:#fff;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
html:root body:not(#km-rd) .km-ess__art{
	position:relative; flex:1 1 auto; width:100%; min-height:0;
	display:flex; align-items:center; justify-content:center;
}
html:root body:not(#km-rd) .km-ess__art::before{
	content:""; position:absolute; left:50%; top:50%; width:96px; height:96px;
	transform:translate(-50%, -50%); border-radius:50%;
	background:radial-gradient(circle at 35% 30%, var(--rd-gold-hi), var(--rd-gold) 60%, #A9771F);
	box-shadow:0 0 0 6px rgba(198,144,46,0.18);
}
html:root body:not(#km-rd) .km-ess__art picture{ position:relative; z-index:1; display:block; }
html:root body:not(#km-rd) .km-ess__art img{
	display:block; width:132px; height:auto; max-width:none;
	transform:rotate(-4deg); transition:transform .25s ease;
}
html:root body:not(#km-rd) .km-ess__card:hover .km-ess__art img{ transform:rotate(0) scale(1.06); }
html:root body:not(#km-rd) .km-ess__cap{
	position:relative; z-index:2;
	display:inline-flex; align-items:center; justify-content:center; max-width:100%;
	min-height:24px; padding:0 12px; border-radius:999px;
	background:#fff; color:var(--rd-navy);
	font-size:11px; font-weight:700; letter-spacing:.06em; line-height:1; text-transform:uppercase;
	white-space:nowrap;
}
/* Desktop: all tiles in view, two rows of four -- no hidden sideways strip a
   mouse cannot reach. Phones keep the swipe row. */
@media (min-width: 900px){
	html:root body:not(#km-rd) .km-ess__row{
		display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
		overflow:visible; scroll-snap-type:none;
	}
	html:root body:not(#km-rd) .km-ess__row > li{ min-width:0; }
}
@media (max-width: 600px){
	html:root body:not(#km-rd) .km-ess__row{ gap:8px; }
	html:root body:not(#km-rd) .km-ess__row > li{ flex-basis:148px; }
	html:root body:not(#km-rd) .km-ess__card{ height:156px; padding:10px; border-width:3px; border-radius:14px; }
	html:root body:not(#km-rd) .km-ess__title{ font-size:14px; }
	html:root body:not(#km-rd) .km-ess__art::before{ width:78px; height:78px; }
	html:root body:not(#km-rd) .km-ess__art img{ width:108px; }
	html:root body:not(#km-rd) .km-ess__cap{ font-size:10px; min-height:22px; padding:0 10px; }
}
@media (prefers-reduced-motion: reduce){
	html:root body:not(#km-rd) .km-ess__card,
	html:root body:not(#km-rd) .km-ess__art img{ transition:none; }
	html:root body:not(#km-rd) .km-ess__card:hover{ transform:none; }
}

/* ---- bolder gold accents (navy text on gold everywhere) ------------------- */
/* "See all ->" pills: gold outline on white panels, gold fill on coloured ones. */
html:root body:not(#km-rd) .km-shelf__more{ border:2px solid var(--rd-gold); color:var(--rd-navy); font-weight:700; }
html:root body:not(#km-rd) .km-shelf__more:hover{ background:var(--rd-gold); border-color:var(--rd-gold); color:var(--rd-navy); }
html:root body:not(#km-rd) .km-sec[class*="km-sec--"] .km-shelf__more{ background:var(--rd-gold); border-color:var(--rd-gold); color:var(--rd-navy); }
html:root body:not(#km-rd) .km-sec[class*="km-sec--"] .km-shelf__more:hover{ background:var(--rd-gold-hi); border-color:var(--rd-gold-hi); }
/* Category circles: gold-tinted with a gold ring. */
html:root body:not(#km-rd) .km-catrow__icon{
	background:radial-gradient(circle at 35% 30%, #FBE7BF, #F2D193);
	box-shadow:inset 0 0 0 2px var(--rd-gold);
	color:var(--rd-navy);
}
html:root body:not(#km-rd) .km-catrow__item:hover .km-catrow__icon{ background:var(--rd-gold); }
html:root body:not(#km-rd) .km-catrow__item--deal .km-catrow__icon{ background:var(--rd-pink); box-shadow:inset 0 0 0 2px var(--rd-crimson); color:var(--rd-crimson); }
html:root body:not(#km-rd) .km-catrow__item--deal:hover .km-catrow__icon{ background:#F9D5DC; }
/* Primary buttons are already gold (REDESIGN 0/3); make the label bold. */
html:root body:not(#km-rd) .btn-amber{ font-weight:700; }