/*
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.14.6
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%; }
}