/*
Theme Name: Kimnim
Theme URI: https://kimnim.com/
Author: Kimnim
Description: A hand-built, dependency-free storefront theme for Kimnim — an embroidery studio. No page builder, no CSS framework, no jQuery outside WooCommerce. Fast by construction, with structured data baked in.
Version: 1.3.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kimnim
Tags: e-commerce, blog, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
WC requires at least: 8.0
WC tested up to: 10.9
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
	--ink: #171512;
	--body: #56514A;
	--muted: #8B857A;
	--brand: #E07C0E;
	--brand-dark: #B4620A;
	--brand-soft: #FDF2E1;
	--sun: #F6C445;
	--cream: #FBF7F0;
	--surface: #fff;
	--line: #EBE4D9;
	--line-soft: #F3EDE4;
	--ok: #2E7D5B;

	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Noto Sans", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;

	/* Type scale — one consistent ~1.16 ratio, no gaps wider than 2x
	   between elements that sit next to each other. 12px is the floor:
	   nothing on the site is allowed to render smaller than that. */
	--fs-2xs: .75rem;                                      /* 12    */
	--fs-xs: .8125rem;                                     /* 13    */
	--fs-sm: .875rem;                                      /* 14    */
	--fs-base: 1rem;                                       /* 16    */
	--fs-md: 1.125rem;                                     /* 18    */
	--fs-lg: clamp(1.25rem, 1.13rem + .38vw, 1.4375rem);   /* 20→23 */
	--fs-xl: clamp(1.5rem, 1.31rem + .62vw, 1.75rem);      /* 24→28 */
	--fs-2xl: clamp(1.75rem, 1.47rem + .9vw, 2.125rem);    /* 28→34 */
	--fs-3xl: clamp(2rem, 1.6rem + 1.3vw, 2.5rem);         /* 32→40 */

	--r-sm: 8px;
	--r: 12px;
	--r-lg: 18px;
	--r-pill: 999px;

	/* Spacing scale — used for control padding so nothing hugs its edge. */
	--sp-1: .25rem;
	--sp-2: .5rem;
	--sp-3: .75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--control-h: 46px;

	--sh-sm: 0 1px 2px rgba(23, 21, 18, .05);
	--sh: 0 6px 20px rgba(23, 21, 18, .07);
	--sh-lg: 0 18px 46px rgba(23, 21, 18, .11);

	--wrap: 1260px;
	--gap: clamp(1rem, .6rem + 1.4vw, 1.875rem);
	--header-h: 68px;
}

/* ==========================================================================
   2. 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: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--fs-base);
	line-height: 1.65;
	color: var(--body);
	background: var(--surface);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
	margin: 0 0 .5em;
	color: var(--ink);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.015em;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-dark); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--brand); }

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

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

strong, b { color: var(--ink); font-weight: 650; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

table { border-collapse: collapse; width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, .5rem + 2vw, 2rem); }
.wrap--narrow { max-width: 860px; }
.wrap--mid { max-width: 1060px; }

.section { padding-block: clamp(2.5rem, 1.6rem + 3vw, 4.5rem); }
.section--tight { padding-block: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.section--cream { background: var(--cream); }

.section__head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 1rem; margin-bottom: clamp(1.25rem, .9rem + 1vw, 2rem);
	flex-wrap: wrap;
}
.section__title { margin: 0; }
.section__lead { margin: .5rem 0 0; color: var(--muted); max-width: 54ch; font-size: var(--fs-md); }
.section__head--center { flex-direction: column; align-items: center; text-align: center; }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) {
	.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.grid--2, .grid--3 { grid-template-columns: 1fr; }
	.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}

/* ==========================================================================
   4. Buttons, tags, badges
   ========================================================================== */
.btn {
	--btn-bg: var(--brand);
	--btn-fg: #fff;
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .8rem 1.6rem;
	background: var(--btn-bg); color: var(--btn-fg) !important;
	border: 1px solid transparent; border-radius: var(--r-pill);
	font-weight: 650; font-size: var(--fs-sm); line-height: 1.2;
	cursor: pointer; text-align: center;
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
}
.btn:hover { --btn-bg: var(--brand-dark); transform: translateY(-1px); box-shadow: var(--sh); }
.btn:active { transform: translateY(0); }
.btn--soft { --btn-bg: var(--brand-soft); --btn-fg: var(--brand-dark); border-color: #F5E1C4; }
.btn--soft:hover { --btn-bg: #FBE7CD; --btn-fg: var(--brand-dark); }
.btn--ink { --btn-bg: var(--ink); }
.btn--ink:hover { --btn-bg: #000; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); }
.btn--ghost:hover { --btn-bg: var(--cream); --btn-fg: var(--ink); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn--block { width: 100%; }
.btn--lg { padding: 1rem 2rem; font-size: var(--fs-base); }
.btn .icon { flex: none; }

.link-more {
	display: inline-flex; align-items: center; gap: .4rem; padding-block: .35rem; min-height: 32px;
	font-weight: 650; font-size: var(--fs-base); color: var(--ink);
}
.link-more .icon { transition: transform .18s ease; }
.link-more:hover { color: var(--brand-dark); }
.link-more:hover .icon { transform: translateX(3px); }

.tag {
	display: inline-block; padding: .4rem .8rem;
	background: var(--brand-soft); color: var(--brand-dark) !important;
	border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase; line-height: 1.4;
}

/* ==========================================================================
   5. Header
   ========================================================================== */
.topbar {
	background: var(--ink); color: #F2EDE4;
	font-size: var(--fs-xs); letter-spacing: .01em;
}
.topbar__inner { display: flex; justify-content: center; align-items: center; gap: .5rem; min-height: 34px; text-align: center; }

.header {
	position: sticky; top: 0; z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--line-soft);
	transition: box-shadow .2s ease;
}
.header__inner {
	display: flex; align-items: center; gap: clamp(.75rem, .3rem + 1.6vw, 2rem);
	min-height: var(--header-h);
}
.brand { flex: none; display: flex; align-items: center; }
.brand img { max-height: 42px; width: auto; }
.brand__text { font-size: var(--fs-lg); font-weight: 800; color: var(--ink); letter-spacing: -.02em; }

.nav { flex: 1; }
.nav__list { display: flex; align-items: center; gap: clamp(.5rem, .1rem + 1.2vw, 1.5rem); list-style: none; margin: 0; padding: 0; }
.nav__list a {
	display: block; padding: .5rem .1rem;
	color: var(--ink); font-weight: 600; font-size: var(--fs-sm);
	position: relative;
}
.nav__list a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 2px;
	background: var(--brand); border-radius: 2px; transform: scaleX(0); transform-origin: left;
	transition: transform .2s ease;
}
.nav__list a:hover::after,
.nav__list .current-menu-item > a::after,
.nav__list .current_page_item > a::after,
.nav__list .current-menu-parent > a::after { transform: scaleX(1); }
.nav__list .current-menu-item > a, .nav__list .current_page_item > a { color: var(--brand-dark); }

/* Dropdowns */
.nav__list li { position: relative; }
.nav__list .sub-menu {
	position: absolute; top: calc(100% + .35rem); left: -1rem; min-width: 220px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--r);
	box-shadow: var(--sh-lg); padding: .5rem; margin: 0; list-style: none;
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 20;
}
.nav__list li:hover > .sub-menu,
.nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__list .sub-menu a { padding: .5rem .75rem; border-radius: var(--r-sm); font-weight: 550; }
.nav__list .sub-menu a::after { display: none; }
.nav__list .sub-menu a:hover { background: var(--cream); color: var(--brand-dark); }
.nav__list .menu-item-has-children > a::before {
	content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .45em; vertical-align: .12em;
	border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg); opacity: .55;
}

.header__actions { flex: none; display: flex; align-items: center; gap: .25rem; }
.hbtn {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .5rem .6rem; border-radius: var(--r-pill);
	color: var(--ink); background: transparent; border: 0; cursor: pointer;
	position: relative; transition: background .18s ease, color .18s ease;
}
.hbtn:hover { background: var(--cream); color: var(--brand-dark); }
.hbtn--cart { background: var(--ink); color: #fff; padding: .5rem .95rem; font-weight: 650; font-size: var(--fs-sm); }
.hbtn--cart:hover { background: var(--brand); color: #fff; }
.hbtn__total { white-space: nowrap; }
.hbtn__count {
	position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px;
	display: grid; place-items: center; padding: 0 4px;
	background: var(--sun); color: var(--ink);
	border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 700; line-height: 1;
}
.hbtn--menu { display: none; }

/* Search drawer */
.searchbar {
	display: none; border-top: 1px solid var(--line-soft); background: #fff;
	padding-block: 1rem;
}
.searchbar.is-open { display: block; }
.searchbar form { display: flex; gap: .5rem; max-width: 640px; margin-inline: auto; }
.searchbar input[type="search"] {
	flex: 1; padding: .8rem 1.1rem; border: 1px solid var(--line);
	border-radius: var(--r-pill); background: var(--cream);
}
.searchbar input[type="search"]:focus { background: #fff; border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(224, 124, 14, .13); }

/* Mobile nav */
@media (max-width: 900px) {
	.hbtn--menu { display: inline-flex; order: -1; margin-left: -.4rem; }
	.nav {
		position: fixed; inset: 0 0 0 auto; width: min(84vw, 340px);
		background: #fff; box-shadow: var(--sh-lg); padding: 1.25rem 1.25rem 2rem;
		transform: translateX(100%); transition: transform .28s ease; z-index: 120;
		overflow-y: auto; display: flex; flex-direction: column;
	}
	.nav.is-open { transform: translateX(0); }
	.nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav__list > li { border-bottom: 1px solid var(--line-soft); }
	.nav__list a { padding: .9rem .25rem; font-size: var(--fs-md); }
	.nav__list a::after { display: none; }
	.nav__list .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; padding: 0 0 .5rem .75rem; min-width: 0;
	}
	.nav__close { align-self: flex-end; margin-bottom: .5rem; }
	.nav-backdrop {
		position: fixed; inset: 0; background: rgba(23, 21, 18, .45);
		opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; z-index: 110;
	}
	.nav-backdrop.is-open { opacity: 1; visibility: visible; }
	body.nav-open { overflow: hidden; }
}
@media (min-width: 901px) { .nav__close { display: none; } }

/* ==========================================================================
   6. Page head + breadcrumbs
   ========================================================================== */
.pagehead {
	background: linear-gradient(180deg, var(--cream), #fff);
	border-bottom: 1px solid var(--line-soft);
	padding-block: clamp(1.75rem, 1.2rem + 2vw, 3rem);
	text-align: center;
}
.pagehead__title { margin: 0 0 .35rem; font-size: clamp(1.625rem, 1.4rem + .7vw, 2rem); }
.pagehead__sub { margin: .55rem auto 0; max-width: 62ch; color: var(--muted); font-size: var(--fs-md); }
.crumbs {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .45rem;
	margin-top: .9rem; font-size: var(--fs-sm); color: var(--muted);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand-dark); }
.crumbs__sep { opacity: .5; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   7. Home — hero
   ========================================================================== */
.hero {
	position: relative;
	background: var(--cream);
	overflow: hidden;
}
.hero::before {
	content: ""; position: absolute; inset: 0;
	background-image: repeating-linear-gradient(115deg, rgba(224, 124, 14, .045) 0 2px, transparent 2px 26px);
	pointer-events: none;
}
.hero__inner {
	position: relative;
	display: grid; grid-template-columns: 1.02fr 1fr; align-items: center;
	gap: clamp(1.5rem, 1rem + 3vw, 4rem);
	padding-block: clamp(2rem, 1.2rem + 4vw, 4.5rem);
}
.hero__eyebrow {
	display: inline-flex; align-items: center; gap: .45rem;
	font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: var(--brand-dark); margin-bottom: .9rem;
}
.hero__title { font-size: var(--fs-3xl); margin-bottom: .6rem; }
.hero__title em { font-style: normal; color: var(--brand); }
.hero__text { font-size: var(--fs-lg); font-weight: 400; line-height: 1.55; max-width: 46ch; margin-bottom: 1.6rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; }
.hero__proof { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.hero__proof li { list-style: none; display: flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); color: var(--body); }
.hero__proof .icon { color: var(--brand); flex: none; }
.hero__proof ul { display: contents; }

.hero__media { position: relative; }
.hero__media img {
	width: 100%; aspect-ratio: 4 / 5; max-height: min(72vh, 560px); object-fit: cover;
	border-radius: calc(var(--r-lg) + 6px);
	box-shadow: var(--sh-lg);
}
.hero__badge {
	position: absolute; left: -1.1rem; bottom: 1.6rem;
	background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-lg);
	padding: .85rem 1.1rem; display: flex; align-items: center; gap: .7rem; max-width: 260px;
}
.hero__badge .icon { color: var(--brand); flex: none; }
.hero__badge strong { display: block; font-size: var(--fs-sm); color: var(--ink); }
.hero__badge span { font-size: var(--fs-xs); color: var(--muted); }

@media (max-width: 860px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__media { order: -1; }
	.hero__media img { aspect-ratio: 16 / 11; }
	.hero__badge { left: auto; right: 1rem; bottom: -1rem; }
	.hero__proof { gap: .75rem 1.1rem; }
}

/* ==========================================================================
   8. Category circles
   ========================================================================== */
.catrow { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, .5rem + 2vw, 2.75rem); }
.catrow__item { text-align: center; width: clamp(96px, 8vw, 132px); }
.catrow__media {
	width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
	background: var(--cream); border: 1px solid var(--line);
	display: grid; place-items: center;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.catrow__item:hover .catrow__media { transform: translateY(-4px); box-shadow: var(--sh); border-color: var(--brand); }
.catrow__media img { width: 100%; height: 100%; object-fit: cover; }
.catrow__name { display: block; margin-top: .7rem; font-size: var(--fs-sm); font-weight: 650; color: var(--ink); }
.catrow__count { display: block; font-size: var(--fs-xs); color: var(--muted); }

/* ==========================================================================
   9. Product cards
   ========================================================================== */
ul.products {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: var(--gap);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1080px) { ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { ul.products { grid-template-columns: 1fr; } }

ul.products li.product {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
	overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
ul.products li.product:hover { transform: translateY(-3px); box-shadow: var(--sh); border-color: var(--line); }

.pcard__media {
	position: relative; display: block; aspect-ratio: 1; background: var(--cream); overflow: hidden;
}
.pcard__img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease, transform .5s ease; }
.pcard__img--empty { display: grid; place-items: center; color: var(--muted); }
.pcard__img--hover { position: absolute; inset: 0; opacity: 0; }
.pcard__media:hover .pcard__img--hover { opacity: 1; }
.pcard__media:hover .pcard__img { transform: scale(1.03); }
.pcard__flag {
	position: absolute; top: .7rem; left: .7rem; z-index: 2;
	background: var(--ink); color: #fff; font-size: var(--fs-xs); font-weight: 700;
	padding: .22rem .6rem; border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: .04em;
}
.pcard__body { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.05rem 1.15rem; flex: 1; }
.pcard__cat { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pcard__title { font-size: var(--fs-base); margin: 0; line-height: 1.35; }
.pcard__title a { color: var(--ink); }
.pcard__title a:hover { color: var(--brand-dark); }
.pcard__sizes { display: flex; flex-wrap: wrap; gap: .3rem; margin: .1rem 0; }
.pcard__sizes span {
	font-size: var(--fs-2xs); font-weight: 650; color: var(--muted);
	border: 1px solid var(--line); border-radius: 5px; padding: .1rem .38rem;
}
.pcard__price { margin: .15rem 0 .75rem; font-weight: 700; color: var(--ink); font-size: var(--fs-md); }
.pcard__price del { color: var(--muted); font-weight: 500; margin-right: .35rem; }
.pcard__price ins { text-decoration: none; color: var(--brand-dark); }
.pcard__body .btn { margin-top: auto; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 0; font-size: inherit; }

/* Loop utility bar */
.woocommerce-notices-wrapper:empty { display: none; }
.shopbar {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	flex-wrap: wrap; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-soft);
}
.woocommerce-result-count { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.woocommerce-ordering select, .shopbar select {
	padding: .55rem 2rem .55rem .9rem; border: 1px solid var(--line); border-radius: var(--r-pill);
	background: #fff; font-size: var(--fs-sm); cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B857A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right .7rem center;
}

/* ==========================================================================
   10. Promo banner (custom embroidery)
   ========================================================================== */
.promo {
	display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
	background: var(--ink); border-radius: var(--r-lg); overflow: hidden; color: #F0EBE2;
}
.promo__body { padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); display: flex; flex-direction: column; justify-content: center; }
.promo__body h2 { color: #fff; }
.promo__body p { color: #C9C2B6; max-width: 44ch; font-size: var(--fs-md); }
.promo__steps { list-style: none; margin: .5rem 0 1.6rem; padding: 0; display: grid; gap: .6rem; }
.promo__steps li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-sm); }
.promo__steps .n {
	flex: none; width: 22px; height: 22px; border-radius: 50%;
	background: var(--brand); color: #fff; display: grid; place-items: center;
	font-size: var(--fs-2xs); font-weight: 700;
}
.promo__media { position: relative; min-height: 280px; }
.promo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) {
	.promo { grid-template-columns: 1fr; }
	.promo__media { min-height: 220px; order: -1; }
}

/* ==========================================================================
   11. Feature strip
   ========================================================================== */
.usps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 900px) { .usps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .usps { grid-template-columns: 1fr; } }
.usps__item {
	background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
	padding: 1.4rem 1.3rem; text-align: left;
}
.usps__icon {
	width: 42px; height: 42px; border-radius: var(--r); background: var(--brand-soft);
	color: var(--brand-dark); display: grid; place-items: center; margin-bottom: .85rem;
}
.usps__item h3 { font-size: var(--fs-base); margin-bottom: .3rem; }
.usps__item p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

/* Product page trust list */
.usp { list-style: none; margin: 1.25rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line-soft); display: grid; gap: .55rem; }
.usp li { display: flex; align-items: center; gap: .6rem; font-size: var(--fs-sm); }
.usp .icon { color: var(--brand); flex: none; }

/* ==========================================================================
   12. Newsletter + instagram
   ========================================================================== */
.newsletter {
	background: var(--brand-soft); border-radius: var(--r-lg);
	padding: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); text-align: center;
}
.newsletter h2 { margin-bottom: .35rem; }
.newsletter p { color: var(--body); max-width: 52ch; margin-inline: auto; font-size: var(--fs-md); }
.newsletter form { display: flex; gap: .6rem; max-width: 460px; margin: 1.4rem auto 0; align-items: stretch; }
.newsletter input[type="email"] {
	flex: 1; padding: .85rem 1.2rem; border: 1px solid #F0DCBC; border-radius: var(--r-pill); background: #fff;
}
.newsletter input[type="email"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(224, 124, 14, .16); }
.newsletter__note { font-size: var(--fs-xs); color: var(--muted); margin-top: .8rem; }
@media (max-width: 520px) { .newsletter form { flex-direction: column; gap: .7rem; } }

.gallery-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; }
@media (max-width: 900px) { .gallery-strip { grid-template-columns: repeat(3, 1fr); } }
.gallery-strip a { display: block; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--cream); }
.gallery-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery-strip a:hover img { transform: scale(1.06); }

/* ==========================================================================
   13. Blog
   ========================================================================== */
.card {
	display: flex; flex-direction: column; background: #fff;
	border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden;
	transition: transform .22s ease, box-shadow .22s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.card__media { position: relative; display: block; aspect-ratio: 16 / 11; background: var(--cream); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card__media img { transform: scale(1.04); }
.card__media-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.card__date {
	position: absolute; top: .75rem; left: .75rem; background: #fff; border-radius: var(--r-sm);
	padding: .35rem .55rem; text-align: center; line-height: 1.05; box-shadow: var(--sh-sm);
}
.card__date strong { display: block; font-size: var(--fs-base); color: var(--ink); }
.card__date span { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.card__body { padding: 1.1rem 1.2rem 1.35rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card__title { font-size: var(--fs-lg); margin: 0; line-height: 1.3; }
.card__title a { color: var(--ink); }
.card__title a:hover { color: var(--brand-dark); }
.card__excerpt { color: var(--body); font-size: var(--fs-sm); margin: 0; }
.card__meta { font-size: var(--fs-xs); color: var(--muted); margin: 0; }
.card__link { margin-top: auto; display: inline-flex; align-items: center; gap: .35rem; font-weight: 650; font-size: var(--fs-sm); }
.card__link .icon { transition: transform .18s ease; }
.card__link:hover .icon { transform: translateX(3px); }

/* Reading layout: TOC | article | sidebar */
.reading {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	padding-block: clamp(2rem, 1.4rem + 2vw, 3.25rem);
	align-items: start;
}
.reading__main { min-width: 0; }
.reading__toc {
	position: sticky; top: calc(var(--header-h) + 1.25rem);
	max-height: calc(100vh - var(--header-h) - 3rem); overflow: auto;
	scrollbar-width: thin;
}
.reading__side { min-width: 0; }

/* Two columns: article + sidebar */
@media (min-width: 900px) {
	.reading { grid-template-columns: minmax(0, 1fr) 290px; }
	.reading__side { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}
/* Three columns: contents + article + sidebar. Ordinary laptop width. */
@media (min-width: 1100px) {
	.reading--toc { grid-template-columns: 220px minmax(0, 1fr) 290px; }
	.reading--toc .reading__inline-toc { display: none; }
}
@media (min-width: 1340px) {
	.reading--toc { grid-template-columns: 250px minmax(0, 1fr) 320px; }
}
/* Below the three-column breakpoint the contents live inline, above the text. */
@media (max-width: 1099px) {
	.reading__toc { display: none; }
}

.toc { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.05rem 1rem; }
.toc__title {
	margin: 0 0 .6rem; padding-bottom: .55rem; border-bottom: 2px solid var(--brand);
	font-size: var(--fs-xs); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.toc__list { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc__item { margin: 0; }
.toc__item a {
	display: block; padding: .42rem .55rem; border-radius: var(--r-sm);
	font-size: var(--fs-sm); line-height: 1.35; color: var(--body);
	border-left: 2px solid transparent;
}
.toc__item a:hover { background: var(--brand-soft); color: var(--brand-dark); }
.toc__item--h3 a { padding-left: 1.3rem; font-size: var(--fs-xs); color: var(--muted); }
.toc__item a.is-active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 650; border-left-color: var(--brand); }

.reading__inline-toc { margin: 0 0 1.75rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--cream); }
.reading__inline-toc > summary {
	cursor: pointer; list-style: none; padding: .95rem 1.1rem; font-weight: 650; color: var(--ink);
	display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.reading__inline-toc > summary::-webkit-details-marker { display: none; }
.reading__inline-toc > summary::after {
	content: ""; width: .5em; height: .5em; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
	transform: rotate(45deg); transition: transform .2s ease; flex: none;
}
.reading__inline-toc[open] > summary::after { transform: rotate(-135deg); }
.reading__inline-toc .toc { border: 0; background: transparent; padding-top: 0; }
.reading__inline-toc .toc__title { display: none; }

.entry-hero { margin-bottom: 1.5rem; }
.entry-hero img { width: 100%; border-radius: var(--r-lg); }
.entry__title { margin-bottom: .5rem; }
.entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; color: var(--muted); font-size: var(--fs-sm); margin-bottom: 1.4rem; }
.entry__meta .dot { opacity: .5; }

/* Long-form typography */
.prose { color: var(--body); font-size: var(--fs-md); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
	font-size: var(--fs-xl); margin-top: 2.2em; margin-bottom: .5em;
	scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.prose h3 { font-size: var(--fs-lg); margin-top: 1.7em; margin-bottom: .4em; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--brand); }
.prose img, .prose figure { border-radius: var(--r); }
.prose figure { margin: 1.6em 0; }
.prose figcaption { font-size: var(--fs-sm); color: var(--muted); text-align: center; margin-top: .6em; }
.prose blockquote {
	margin: 1.6em 0; padding: 1rem 1.3rem; border-left: 3px solid var(--brand);
	background: var(--cream); border-radius: 0 var(--r) var(--r) 0; color: var(--ink); font-size: var(--fs-md);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose a { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; text-decoration-color: rgba(224, 124, 14, .45); }
.prose a:hover { text-decoration-color: currentColor; }
.prose code {
	background: var(--cream); border: 1px solid var(--line-soft); border-radius: 5px;
	padding: .12em .4em; font-size: .9em;
}
.prose table { margin: 1.6em 0; font-size: var(--fs-sm); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.prose thead { background: var(--cream); }
.prose th, .prose td { padding: .7rem .85rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
.prose th { color: var(--ink); font-weight: 650; }
.prose tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

.entry__footer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.share { display: flex; align-items: center; gap: .5rem; }
.share span { font-size: var(--fs-sm); color: var(--muted); }
.share a {
	width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
	background: var(--cream); color: var(--ink); border: 1px solid var(--line);
}
.share a:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

.postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
@media (max-width: 620px) { .postnav { grid-template-columns: 1fr; } }
.postnav a {
	border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem 1.15rem;
	display: block; background: #fff;
}
.postnav a:hover { border-color: var(--brand); background: var(--cream); }
.postnav small { display: block; color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .25rem; }
.postnav strong { color: var(--ink); font-weight: 650; font-size: var(--fs-sm); line-height: 1.35; display: block; }
.postnav .is-next { text-align: right; }

/* Sidebar widgets */
.widget + .widget { margin-top: 1.5rem; }
.widget {
	background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 1.2rem 1.25rem;
}
.widget__title { font-size: var(--fs-base); margin: 0 0 .9rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line-soft); }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li + li { margin-top: .55rem; }
.widget a { color: var(--body); font-size: var(--fs-sm); }
.widget a:hover { color: var(--brand-dark); }

.minipost { display: flex; gap: .8rem; align-items: flex-start; }
.minipost + .minipost { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.minipost__thumb { flex: none; width: 64px; height: 64px; border-radius: var(--r-sm); overflow: hidden; background: var(--cream); }
.minipost__thumb img { width: 100%; height: 100%; object-fit: cover; }
.minipost__title { font-size: var(--fs-sm); font-weight: 650; color: var(--ink); line-height: 1.35; display: block; }
.minipost__title:hover { color: var(--brand-dark); }
.minipost__date { font-size: var(--fs-xs); color: var(--muted); margin-top: .2rem; display: block; }

.promo-card { background: var(--ink); color: #EDE7DD; border-color: var(--ink); }
.promo-card .widget__title { color: #fff; border-bottom-color: rgba(255, 255, 255, .14); }
.promo-card p { font-size: var(--fs-sm); color: #C9C2B6; }
.promo-card img { border-radius: var(--r); margin-bottom: .9rem; }

/* ==========================================================================
   14. FAQ
   ========================================================================== */
.faq-intro { text-align: center; color: var(--muted); max-width: 62ch; margin: 0 auto 2.25rem; }
.faq-group + .faq-group { margin-top: 2.75rem; }
.faq-group__head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.faq-group__icon {
	width: 40px; height: 40px; border-radius: var(--r); background: var(--brand-soft);
	color: var(--brand-dark); display: grid; place-items: center; flex: none;
}
.faq-group__head h2 { margin: 0; font-size: var(--fs-lg); }

.faq {
	border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff;
	transition: box-shadow .22s ease, border-color .22s ease;
	overflow: hidden;
}
.faq + .faq { margin-top: .7rem; }
.faq[open] { box-shadow: var(--sh); border-color: #F0D5AE; }
.faq > summary {
	list-style: none; cursor: pointer; padding: 1.05rem 3.2rem 1.05rem 1.25rem;
	font-weight: 650; color: var(--ink); position: relative; font-size: var(--fs-md);
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after,
.faq > summary::before {
	content: ""; position: absolute; right: 1.25rem; top: 50%; background: var(--brand);
	border-radius: 2px; transition: transform .25s ease, opacity .25s ease;
}
.faq > summary::after { width: 13px; height: 2px; transform: translateY(-50%); }
.faq > summary::before { width: 2px; height: 13px; right: 1.6rem; transform: translateY(-50%); }
.faq[open] > summary::before { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.faq > summary:hover { color: var(--brand-dark); }
.faq__answer { padding: 1.15rem 1.25rem 1.35rem; margin: 0 1.25rem; border-top: 1px solid var(--line-soft); color: var(--body); }
.faq__answer > * + * { margin-top: .85rem; }
.faq__answer > *:first-child { margin-top: 0; }

.faq-cta {
	margin-top: 3rem; text-align: center; color: #fff;
	background: linear-gradient(135deg, var(--brand) 0%, #F2A93F 100%);
	border-radius: var(--r-lg); padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}
.faq-cta h2 { color: #fff; margin-bottom: .4rem; }
.faq-cta p { color: rgba(255, 255, 255, .92); margin-bottom: 1.3rem; font-size: var(--fs-md); }
.faq-cta .btn { margin: 0 .3rem .4rem; }

/* ==========================================================================
   15. Contact
   ========================================================================== */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 820px) { .contact-cards { grid-template-columns: 1fr; } }
.contact-card {
	background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
	padding: 1.5rem 1.4rem; text-align: center;
	transition: transform .22s ease, box-shadow .22s ease;
}
.contact-card:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.contact-card__icon {
	width: 46px; height: 46px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark);
	display: grid; place-items: center; margin: 0 auto .85rem;
}
.contact-card h3 { font-size: var(--fs-base); margin-bottom: .25rem; }
.contact-card a, .contact-card p { font-size: var(--fs-sm); color: var(--body); margin: 0; }
.contact-card small { display: block; margin-top: .3rem; color: var(--muted); font-size: var(--fs-xs); }

.contact-form-card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
	box-shadow: var(--sh); padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
	max-width: 800px; margin: clamp(1.75rem, 1.2rem + 2vw, 2.75rem) auto 0;
}
.contact-form-card h2 { text-align: center; margin-bottom: .3rem; }
.contact-form-card .lead { text-align: center; color: var(--muted); font-size: var(--fs-sm); margin-bottom: 1.6rem; }

/* Generic form styling (Contact Form 7, comments, WooCommerce) */
input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="password"], input[type="number"], input[type="search"], textarea, select {
	width: 100%; padding: .8rem 1rem;
	border: 1px solid var(--line); border-radius: var(--r);
	background: #FDFBF7; color: var(--ink);
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
textarea { min-height: 150px; resize: vertical; }
input:focus, textarea:focus, select:focus {
	outline: none; border-color: var(--brand); background: #fff;
	box-shadow: 0 0 0 3px rgba(224, 124, 14, .14);
}
::placeholder { color: #A9A297; }
label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); display: block; margin-bottom: .35rem; }

.wpcf7 p { margin-bottom: 1rem; }
.wpcf7 input[type="submit"], .wpcf7 button[type="submit"] {
	display: block; margin: .4rem auto 0; width: auto;
	background: var(--brand); color: #fff; border: 0; border-radius: var(--r-pill);
	padding: .95rem 2.4rem; font-weight: 650; cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}
.wpcf7 input[type="submit"]:hover { background: var(--brand-dark); transform: translateY(-1px); }
.wpcf7-not-valid-tip { color: #C0392B; font-size: var(--fs-xs); }
.wpcf7 form .wpcf7-response-output {
	border-radius: var(--r); border-width: 1px; margin: 1.2rem 0 0; padding: .8rem 1rem; font-size: var(--fs-sm);
}

/* ==========================================================================
   16. WooCommerce pages
   ========================================================================== */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice {
	background: var(--cream); border: 1px solid var(--line); border-left: 3px solid var(--brand);
	border-radius: var(--r); padding: .95rem 1.15rem; margin: 0 0 1.5rem; list-style: none;
	font-size: var(--fs-sm); display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
}
.woocommerce-error { border-left-color: #C0392B; }
.woocommerce-message .button, .woocommerce-info .button { margin-left: auto; }

.product-main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .product-main { grid-template-columns: 1fr; } }

.woocommerce div.product div.images { margin: 0; }
.woocommerce div.product div.images img { border-radius: var(--r-lg); }
.woocommerce div.product div.images .flex-control-thumbs { margin-top: .7rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; padding: 0; }
.woocommerce div.product div.images .flex-control-thumbs li { width: 100%; float: none; margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs img { border-radius: var(--r-sm); opacity: .65; transition: opacity .18s ease; }
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs .flex-active { opacity: 1; }

.woocommerce div.product .product_title { font-size: var(--fs-2xl); margin-bottom: .4rem; }
.woocommerce div.product p.price, .woocommerce div.product span.price {
	color: var(--ink); font-size: var(--fs-xl); font-weight: 750; margin: .5rem 0 1rem;
}
.woocommerce div.product p.price del { color: var(--muted); font-size: var(--fs-base); font-weight: 500; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--brand-dark); }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--body); margin-bottom: 1rem; }
.wc-sku { font-size: var(--fs-xs); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }

/* Variation swatches */
.woocommerce div.product form.cart .variations { margin-bottom: 1.1rem; border: 0; width: 100%; }
.woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th { padding: 0 0 .5rem; border: 0; display: block; text-align: left; }
.woocommerce div.product form.cart .variations label { font-weight: 650; margin-bottom: .45rem; }
.woocommerce div.product form.cart .reset_variations { font-size: var(--fs-xs); color: var(--muted); margin-left: .5rem; }


/* The cart form flows in a SINGLE COLUMN.
   It used to be a flex row that only wrapped because every child WooCommerce
   is known to output was forced to width:100%. Any child a plugin injected —
   a size-guide button, a subscription toggle — joined the row instead and
   pushed the quantity box and Add-to-cart button off the side of the page.
   A one-column grid has no such failure mode: an unknown child gets its own
   row, whatever it is. */
.woocommerce div.product form.cart {
	margin-bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr);
	gap: .85rem; align-items: start;
}
.woocommerce div.product form.cart > * { min-width: 0; }

/* The one row that IS horizontal is declared explicitly. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart .kimnim-buyrow {
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: stretch;
}
.woocommerce div.product form.cart .quantity { grid-column: 1; }
.woocommerce div.product form.cart .single_add_to_cart_button { grid-column: 2; }
.woocommerce .quantity .qty {
	width: 84px; min-height: var(--control-h); text-align: center; padding: .7rem var(--sp-3); border-radius: var(--r-pill);
	border: 1px solid var(--line); background: #fff;
}
.woocommerce div.product form.cart .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit {
	background: var(--brand); color: #fff; border-radius: var(--r-pill);
	padding: .85rem 1.8rem; font-weight: 650; font-size: var(--fs-sm); border: 0;
	transition: background .18s ease, transform .18s ease; line-height: 1.3;
}
.woocommerce div.product form.cart .button { width: 100%; min-width: 0; }
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce div.product form.cart .button:hover {
	background: var(--brand-dark); color: #fff; transform: translateY(-1px);
}
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--ink); }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: #000; }



/* Editorial two-column sections: label left, content right. Full-bleed body
   copy ran to ~140 characters a line, which nobody reads comfortably. */
.prod-section {
	border-top: 1px solid var(--line);
	margin-top: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
	padding-top: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
}
.prod-section__title { font-size: var(--fs-lg); margin: 0 0 1.1rem; }
@media (min-width: 901px) {
	.prod-section {
		display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
		gap: 3rem; align-items: start;
	}
	.prod-section > .prod-section__title { grid-column: 1; margin: 0; }
	.prod-section > *:not(.prod-section__title) { grid-column: 2; }
	.prod-section--reviews { display: block; }
}
.prod-section .prose { max-width: 70ch; }
.prod-section .prose > *:first-child { margin-top: 0; }
.specs { display: grid; grid-template-columns: 180px 1fr; gap: 0; margin: 0; font-size: var(--fs-sm); }
.specs dt { padding: .7rem 0; color: var(--ink); font-weight: 650; border-bottom: 1px solid var(--line-soft); }
.specs dd { padding: .7rem 0; margin: 0; border-bottom: 1px solid var(--line-soft); }
@media (max-width: 620px) { .specs { grid-template-columns: 1fr; } .specs dt { border-bottom: 0; padding-bottom: 0; } }

.related, .up-sells, .cross-sells { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.related > h2, .up-sells > h2, .cross-sells > h2 { font-size: var(--fs-xl); margin-bottom: 1.25rem; }

/* Cart / checkout */
.woocommerce table.shop_table {
	border: 1px solid var(--line); border-radius: var(--r-lg); border-collapse: separate; border-spacing: 0; overflow: hidden;
}
.woocommerce table.shop_table th { background: var(--cream); color: var(--ink); font-size: var(--fs-sm); padding: .9rem 1rem; }
.woocommerce table.shop_table td { padding: 1rem; border-top: 1px solid var(--line-soft); }
.woocommerce table.shop_table img { width: 64px; border-radius: var(--r-sm); }
.woocommerce .cart_totals, .woocommerce-checkout #order_review {
	background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem;
}
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.woocommerce form .form-row { display: block; margin-bottom: 1rem; padding: 0; }
.woocommerce form .form-row label { margin-bottom: .35rem; }
.select2-container--default .select2-selection--single {
	height: auto; padding: .5rem .35rem; border-radius: var(--r); border-color: var(--line);
}

/* Pagination */
.pager, .woocommerce-pagination { margin-top: 2.5rem; }
.pager .nav-links, .woocommerce-pagination ul {
	display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; border: 0;
}
.pager .page-numbers, .woocommerce-pagination .page-numbers {
	display: inline-flex; align-items: center; gap: .3rem;
	min-width: 40px; height: 40px; padding: 0 .8rem; justify-content: center;
	border: 1px solid var(--line); border-radius: var(--r-pill);
	color: var(--ink); font-size: var(--fs-sm); font-weight: 600; background: #fff;
}
.woocommerce-pagination li { border: 0 !important; margin: 0; }
.pager .page-numbers:hover, .woocommerce-pagination .page-numbers:hover { border-color: var(--brand); color: var(--brand-dark); }
.pager .page-numbers.current, .woocommerce-pagination .page-numbers.current {
	background: var(--ink); border-color: var(--ink); color: #fff;
}
.pager .dots { border: 0; }

/* ==========================================================================
   17. Comments
   ========================================================================== */
.comments { margin-top: 3rem; }
.comments__title { font-size: var(--fs-lg); margin-bottom: 1.25rem; }
.comment-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.comment-list li { margin-bottom: 1.25rem; }
.comment-body { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 1.15rem 1.25rem; }
.comment-author { display: flex; align-items: center; gap: .6rem; font-size: var(--fs-sm); color: var(--ink); font-weight: 650; }
.comment-author img { border-radius: 50%; }
.comment-metadata { font-size: var(--fs-xs); color: var(--muted); margin-bottom: .5rem; }
.comment-respond { background: var(--cream); border-radius: var(--r-lg); padding: 1.5rem; }
.comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); }
.comment-form input[type="checkbox"] { width: 18px; }
.comment-reply-title { font-size: var(--fs-lg); }

/* WooCommerce reviews */
.woocommerce #reviews #comments ol.commentlist { padding: 0; }
.woocommerce #reviews #comments ol.commentlist li .comment-text { border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 1.15rem 1.25rem; }
.star-rating { color: var(--brand); }

/* ==========================================================================
   18. Footer
   ========================================================================== */
.footer { background: var(--cream); border-top: 1px solid var(--line); margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.footer__grid {
	display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	padding-block: clamp(2.25rem, 1.6rem + 2.5vw, 3.5rem);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand img { max-height: 40px; width: auto; margin-bottom: .9rem; }
.footer__about { font-size: var(--fs-sm); color: var(--muted); max-width: 34ch; }
.footer__social { display: flex; gap: .5rem; margin-top: 1.1rem; }
.footer__social a {
	width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
	background: #fff; border: 1px solid var(--line); color: var(--ink);
	transition: background .18s ease, color .18s ease, transform .18s ease;
}
.footer__social a:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px); }
.footer__title { font-size: var(--fs-base); margin-bottom: .9rem; }
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li + li { margin-top: .55rem; }
.footer__list a { font-size: var(--fs-sm); color: var(--body); }
.footer__list a:hover { color: var(--brand-dark); }
.footer__contact li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-sm); }
.footer__contact .icon { color: var(--brand); flex: none; margin-top: .18rem; }
.footer__cta { margin-top: 1rem; }
.footer__bar {
	border-top: 1px solid var(--line); padding-block: 1.1rem;
	display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
	font-size: var(--fs-xs); color: var(--muted);
}
.footer__pay { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.footer__pay span {
	border: 1px solid var(--line); background: #fff; border-radius: 5px;
	padding: .2rem .5rem; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; color: var(--muted);
}

/* ==========================================================================
   19. Misc
   ========================================================================== */
.notfound { text-align: center; padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.notfound__code { font-size: clamp(3rem, 2rem + 3.4vw, 4.5rem); font-weight: 800; color: var(--brand-soft); line-height: 1; margin: 0; }
.notfound h1 { margin-top: -.4em; }

.searchresult { border-bottom: 1px solid var(--line-soft); padding-block: 1.35rem; }
.searchresult h2 { font-size: var(--fs-lg); margin-bottom: .3rem; }
.searchresult__kind { font-size: var(--fs-xs); color: var(--brand-dark); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }

.empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }

.back-to-top {
	position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90;
	width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
	background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer;
	box-shadow: var(--sh); opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.back-to-top .icon { transform: rotate(-90deg); }

/* Admin bar offset for the sticky header */
body.admin-bar .header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .header { top: 46px; } }

/* ==========================================================================
   20. WooCommerce layout (replaces woocommerce-layout.css)
   ========================================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product { width: auto; float: none; margin: 0; }
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { float: none; margin: 0; }

/* Single product: gallery + summary side by side */
.woocommerce div.product {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	column-gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
	align-items: start;
}
.woocommerce div.product > * { grid-column: 1 / -1; min-width: 0; }
.woocommerce div.product > .woocommerce-product-gallery { grid-column: 1; grid-row: 1; float: none; width: auto; }
.woocommerce div.product > .summary { grid-column: 2; grid-row: 1; float: none; width: auto; margin: 0; }
.woocommerce div.product > span.onsale { position: absolute; top: 1rem; left: 1rem; z-index: 3; }
@media (max-width: 900px) {
	.woocommerce div.product { grid-template-columns: 1fr; }
	.woocommerce div.product > .woocommerce-product-gallery,
	.woocommerce div.product > .summary { grid-column: 1; grid-row: auto; }
	.woocommerce div.product > .summary { margin-top: 1.5rem; }
}
.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__trigger {
	position: absolute; top: .85rem; right: .85rem; z-index: 4;
	width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: var(--sh-sm);
	display: grid; place-items: center; font-size: 0; border: 1px solid var(--line);
}
.woocommerce-product-gallery__trigger::before {
	content: ""; width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 50%;
	box-shadow: 6px 6px 0 -4px var(--ink);
}
.woocommerce div.product .woocommerce-product-rating { margin-bottom: .6rem; }
.woocommerce .product_meta { margin-top: 1.25rem; font-size: var(--fs-xs); color: var(--muted); display: grid; gap: .3rem; }
.woocommerce .product_meta a { color: var(--body); }

/* Cart */
@media (min-width: 900px) {
	.woocommerce-cart .woocommerce {
		display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
		gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); align-items: start;
	}
	.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
	.woocommerce-cart .woocommerce > .cart-empty,
	.woocommerce-cart .woocommerce > .emptystate__sub,
	.woocommerce-cart .woocommerce > .emptystate__links,
	.woocommerce-cart .woocommerce > .return-to-shop { grid-column: 1 / -1; }

	/* No cart table, no two columns — otherwise the empty state gets dealt
	   out across them a line at a time. */
	.woocommerce-cart .woocommerce:not(:has(form.woocommerce-cart-form)) { display: block; }
}
.woocommerce .cart-collaterals { width: auto; float: none; }
.woocommerce .cart-collaterals .cart_totals { width: auto; float: none; }
.woocommerce table.cart td.actions .coupon { display: flex; gap: .5rem; flex-wrap: wrap; }
.woocommerce table.cart td.actions .coupon input { width: auto; min-width: 180px; }
.woocommerce a.remove { color: var(--muted) !important; font-size: 1.2rem; line-height: 1; }
.woocommerce a.remove:hover { color: #C0392B !important; background: transparent; }

/* Checkout */
@media (min-width: 900px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: clamp(1.5rem, 1rem + 2vw, 3rem);
		align-items: start;
	}
	/* One row, two columns. Both columns open with an h3 carrying the same
	   margin, so the first billing field and the order card share a top edge. */
	.woocommerce-checkout form.checkout > .col2-set,
	.woocommerce-checkout form.checkout > #customer_details { grid-column: 1; grid-row: 1; }
	.woocommerce-checkout form.checkout > .checkout__aside { grid-column: 2; grid-row: 1; align-self: start; }
	/* Fallback if the wrapper hooks are unavailable (older WooCommerce). */
	.woocommerce-checkout form.checkout > h3#order_review_heading { grid-column: 2; margin-top: 0; }
	.woocommerce-checkout form.checkout > #order_review { grid-column: 2; align-self: start; }
	.woocommerce-checkout form.checkout > .woocommerce-notices-wrapper,
	.woocommerce-checkout form.checkout > .woocommerce-form-coupon-toggle { grid-column: 1 / -1; grid-row: auto; }
}
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; float: none; }
@media (min-width: 560px) {
	.woocommerce #customer_details .col-1, .woocommerce #customer_details .col-2 { width: auto; float: none; }
	.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: calc(50% - .5rem); display: inline-block; vertical-align: top; }
	.woocommerce form .form-row-first { margin-right: .9rem; }
}
#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment { background: transparent; border-radius: var(--r); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--line); padding: 0 0 1rem; }
.woocommerce-checkout #payment div.payment_box { background: #fff; border: 1px solid var(--line); border-radius: var(--r); font-size: var(--fs-sm); }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment div.form-row { padding: 1rem 0 0; }
.woocommerce .woocommerce-checkout-review-order-table { margin-bottom: 1.25rem; }

/* My account */
@media (min-width: 820px) {
	.woocommerce-account .woocommerce {
		display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2rem; align-items: start;
	}
	.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
}
.woocommerce-account .woocommerce-MyAccount-navigation { width: auto; float: none; }
.woocommerce-account .woocommerce-MyAccount-content { width: auto; float: none; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li a { display: block; padding: .6rem .85rem; border-radius: var(--r); color: var(--body); font-size: var(--fs-sm); }
.woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover { background: var(--cream); color: var(--ink); font-weight: 650; }
.woocommerce-form-login, .woocommerce-form-register {
	border: 1px solid var(--line) !important; border-radius: var(--r-lg) !important; padding: 1.5rem !important;
}
.woocommerce form.login, .woocommerce form.register { max-width: 480px; }

/* Small screens */
@media (max-width: 620px) {
	.woocommerce table.shop_table_responsive thead { display: none; }
	.woocommerce table.shop_table_responsive tr { display: block; border-bottom: 1px solid var(--line); }
	.woocommerce table.shop_table_responsive td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .5rem 1rem; }
	.woocommerce table.shop_table_responsive td::before { content: attr(data-title); font-weight: 650; color: var(--ink); }
	.woocommerce table.shop_table_responsive td.product-remove::before { content: ""; }
}


/* ==========================================================================
   21. Small-screen refinements
   ========================================================================== */
@media (max-width: 900px) {
	/* An off-canvas panel must not add to the document's scroll width. */
	.nav:not(.is-open) { visibility: hidden; }
	html, body { overflow-x: clip; }
}
@media (max-width: 560px) {
	.header__inner { gap: .35rem; }
	.brand img { max-height: 32px; }
	.hbtn { padding: .45rem .45rem; }
	.hbtn--cart { padding: .45rem .7rem; }
	.hbtn--cart .hbtn__total { display: none; }
	.topbar__inner { font-size: var(--fs-2xs); padding-block: .35rem; line-height: 1.45; }
	.hero__badge { position: static; margin-top: .9rem; max-width: none; box-shadow: var(--sh); }
	.section__head { align-items: flex-start; }
	.faq > summary { font-size: var(--fs-base); padding-right: 2.8rem; }
	.footer__grid { gap: 1.75rem; }
}
@media (max-width: 420px) {
	.catrow { gap: 1rem; }
	.catrow__item { width: calc(33.333% - .75rem); }
}
.pagehead--compact { padding-block: .9rem; background: #fff; }
.pagehead--compact .crumbs { margin-top: 0; justify-content: flex-start; }
.woocommerce .cart-empty::before, .woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { display: none; }

/* ==========================================================================
   22. WooCommerce hardening
   --------------------------------------------------------------------------
   WooCommerce ships a float-based grid (woocommerce-layout.css). The theme
   dequeues it, but caching plugins can re-inline an older copy, so the rules
   below neutralise it explicitly instead of relying on load order.
   ========================================================================== */

/* Product grids: always CSS grid, never floats. */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
	display: grid !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after,
.woocommerce div.product::before, .woocommerce div.product::after,
.woocommerce .related::before, .woocommerce .related::after,
.woocommerce .cart-collaterals::before, .woocommerce .cart-collaterals::after,
.woocommerce-page .col2-set::before, .woocommerce-page .col2-set::after,
.woocommerce .col2-set::before, .woocommerce .col2-set::after { content: none !important; display: none !important; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	clear: none !important;
}
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last { clear: none !important; }

/* Single product: gallery and summary are grid items, not floats. */
.woocommerce div.product > .woocommerce-product-gallery,
.woocommerce div.product > div.images,
.woocommerce div.product > .summary,
.woocommerce div.product > .entry-summary {
	float: none !important;
	width: auto !important;
	margin-bottom: 0 !important;
}
.woocommerce div.product .woocommerce-product-gallery__image { width: auto; }
.woocommerce #content div.product div.images, .woocommerce div.product div.images { width: auto !important; float: none !important; }
.woocommerce #content div.product div.summary, .woocommerce div.product div.summary { width: auto !important; float: none !important; }

/* Cart / checkout / account columns. */
.woocommerce .cart-collaterals, .woocommerce-page .cart-collaterals,
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals,
.woocommerce-cart .wc-proceed-to-checkout { width: auto !important; float: none !important; }
.woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1, .woocommerce-page .col2-set .col-2 { width: auto !important; float: none !important; }
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { width: auto !important; float: none !important; }

/* Tables must never force a horizontal scrollbar. */
.woocommerce table.shop_table, .woocommerce-page table.shop_table { width: 100% !important; min-width: 0 !important; }
.wc-page .table-scroll, .woocommerce .table-scroll { overflow: visible !important; }

/* The WooCommerce shortcode pages (cart, checkout, account) run through
   page.php; this is their container. */
.wc-page__content > .woocommerce { max-width: 100%; }
.wc-page h2 { font-size: var(--fs-lg); }
.wc-page .woocommerce-billing-fields h3,
.wc-page .woocommerce-additional-fields h3,
.wc-page #order_review_heading { font-size: var(--fs-lg); margin-bottom: 1rem; }

/* ==========================================================================
   23. Variation swatches (rendered server-side)
   ========================================================================== */
.kimnim-swatches { display: flex; flex-wrap: wrap; gap: .45rem; margin: .1rem 0 .25rem; }
.kimnim-swatch {
	min-width: 48px; padding: .55rem .8rem; text-align: center;
	border: 1px solid var(--line); border-radius: var(--r); background: #fff;
	font-size: var(--fs-sm); font-weight: 650; color: var(--ink); cursor: pointer; line-height: 1.2;
	transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}
.kimnim-swatch:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-dark); transform: translateY(-1px); }
.kimnim-swatch.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.kimnim-swatch.is-disabled, .kimnim-swatch:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

/* The native select stays for assistive tech, visually hidden — and crucially
   with no width, so it can never create a horizontal scrollbar. */
.js .kimnim-select {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	padding: 0 !important; margin: -1px !important;
	overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
	white-space: nowrap !important; border: 0 !important;
}
/* Without JavaScript the select is the control, so show it and drop the buttons. */
html:not(.js) .kimnim-swatches { display: none; }
html:not(.js) .kimnim-select select { width: 100%; }

/* WooCommerce marks its related/upsell wrappers with the same "products"
   class as the list itself — they must stay plain blocks. */
.woocommerce .related, .woocommerce .upsells, .woocommerce .cross-sells,
.woocommerce-page .related, .woocommerce-page .upsells, .woocommerce-page .cross-sells,
section.related.products, section.upsells.products, section.cross-sells.products {
	display: block !important;
	grid-template-columns: none !important;
	width: auto !important;
	float: none !important;
}

/* Variation form spacing: WooCommerce leaves empty containers behind. */
.woocommerce div.product form.cart .variations { margin-bottom: .35rem !important; }
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr { display: block; }
.woocommerce div.product form.cart .single_variation_wrap { margin-top: 0; }
.woocommerce div.product form.cart .woocommerce-variation { margin: 0 0 .5rem; }
.woocommerce div.product form.cart .woocommerce-variation:empty { display: none; }
.woocommerce div.product form.cart .woocommerce-variation-price { font-size: var(--fs-lg); font-weight: 700; color: var(--ink); }
.woocommerce div.product form.cart .woocommerce-variation-availability p { margin: 0; font-size: var(--fs-sm); color: var(--ok); }
.woocommerce div.product form.cart .reset_variations { display: inline-block; margin: .35rem 0 0; }

/* A disabled add-to-cart should look disabled, not faded orange. */
.woocommerce div.product form.cart .button.disabled,
.woocommerce div.product form.cart .button:disabled,
.woocommerce a.button.disabled, .woocommerce button.button:disabled {
	background: #E7E2D8 !important; color: #8B857A !important; cursor: not-allowed; opacity: 1 !important; transform: none !important;
}
.woocommerce form .woocommerce-form-login__submit, .woocommerce form .button { float: none !important; }

/* select2 (country / state pickers) — match the theme's inputs. */
.select2-container--default .select2-selection--single {
	height: auto !important; min-height: 48px;
	padding: .35rem .5rem !important;
	border: 1px solid var(--line) !important; border-radius: var(--r) !important;
	background: #FDFBF7 !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 34px !important; padding-left: .55rem !important; color: var(--ink) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px !important; right: .5rem !important; }
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--brand) !important; background: #fff !important;
	box-shadow: 0 0 0 3px rgba(224, 124, 14, .14);
}
.select2-dropdown { border-color: var(--line) !important; border-radius: var(--r) !important; overflow: hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--brand) !important; }
.select2-container--default .select2-search--dropdown .select2-search__field { border-radius: var(--r-sm); border-color: var(--line); }

/* Checkout order summary reads as a card. */
@media (min-width: 900px) {
	.checkout__aside { position: sticky; top: calc(var(--header-h) + 1rem); }
}
.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: 1.25rem; }

/* ==========================================================================
   24. Account forms
   ========================================================================== */
.woocommerce-account .woocommerce > .u-columns,
.woocommerce-account .woocommerce > .col2-set { max-width: 1000px; margin-inline: auto; }
@media (min-width: 900px) {
	.woocommerce-account .u-columns.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
	.woocommerce-account .u-columns .col-1, .woocommerce-account .u-columns .col-2 { margin: 0; }
}
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register { max-width: none; margin: 0; }
.woocommerce-account h2 { text-align: center; }
@media (min-width: 900px) { .woocommerce-account h2 { text-align: left; } }

/* Password field with its reveal toggle. */
.woocommerce form .password-input, .woocommerce-page form .password-input { position: relative; display: block; }
.woocommerce form .password-input input { padding-right: 3.1rem; }
.woocommerce form .show-password-input {
	position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
	width: 34px; height: 34px; border: 0; border-radius: var(--r-sm);
	padding: 0; cursor: pointer; opacity: .5;
	background: no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171512' stroke-width='1.6'%3E%3Cpath d='M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6-10-6-10-6Z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E");
}
.woocommerce form .show-password-input:hover { opacity: .9; }
.woocommerce form .show-password-input::after { display: none; }

/* Remember me + submit sit on one tidy row. */
.woocommerce form.woocommerce-form-login .form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-weight: 500; }
.woocommerce-form-login__rememberme input { width: auto; }
.woocommerce-LostPassword { margin: .9rem 0 0; font-size: var(--fs-sm); }
.woocommerce-privacy-policy-text, .woocommerce-password-hint { font-size: var(--fs-sm); color: var(--muted); }

/* ==========================================================================
   25. Control rhythm
   Every interactive control gets the same height, the same breathing room
   inside its box, and a guaranteed gap from whatever sits next to it.
   ========================================================================== */

/* --- shared control geometry ------------------------------------------- */
/* Text fields, selects and the real buttons all land on the same height.
   Icon-only buttons and swatches are listed out; they have their own. */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"], input[type="date"],
textarea, select, .btn,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit,
.wpcf7 input[type="submit"], .wpcf7 button[type="submit"] {
	min-height: var(--control-h);
}
textarea { min-height: 150px; }
.hbtn, .nav__close, .back-to-top, .show-password-input,
.kimnim-swatch, .quantity .qty, .woocommerce a.remove, .btn--sm {
	min-height: revert;
}
.kimnim-swatch { min-height: 40px; }
textarea { padding: var(--sp-3) var(--sp-4); }

/* Checkboxes and radios were rendering at the browser default 13px. */
input[type="checkbox"], input[type="radio"] {
	width: 18px; height: 18px; min-height: 0; flex: none;
	accent-color: var(--brand); cursor: pointer; margin: 0;
}
label > input[type="checkbox"], label > input[type="radio"] { margin-right: .55rem; }

/* A checkbox and its label should never touch. */
.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce-form__label-for-checkbox,
.comment-form-cookies-consent {
	display: inline-flex; align-items: center; gap: .6rem; line-height: 1.5;
	margin: 0; font-weight: 500;
}

/* --- search form outside the header drawer ------------------------------ */
.widget .searchform,
.searchresults .searchform,
.notfound .searchform {
	display: flex; gap: var(--sp-2); align-items: stretch;
}
.widget .searchform input[type="search"] { flex: 1 1 auto; min-width: 0; }
.widget .searchform .btn { flex: none; padding-inline: var(--sp-4); }
.widget .searchform .btn span { display: none; }
@media (max-width: 400px) {
	.widget .searchform { flex-direction: column; }
	.widget .searchform .btn span { display: inline; }
}

/* --- stacked form rows keep a consistent gap ---------------------------- */
.woocommerce form .form-row { margin-bottom: var(--sp-4); }
.woocommerce form .form-row:last-child { margin-bottom: 0; }
.woocommerce-billing-fields__field-wrapper > .form-row:last-child { margin-bottom: var(--sp-4); }

/* Contact Form 7 keeps its spinner off the submit button. */
.wpcf7-spinner { margin: var(--sp-3) auto 0; display: block; }
.wpcf7 form.submitting .wpcf7-spinner { visibility: visible; }

/* --- badge / pill padding ----------------------------------------------- */
.badge, .pcard__badge, .pcard__sizes span, .footer__pay span, .card__date span {
	line-height: 1.45;
}
.pcard__sizes span { padding: .2rem .5rem; }
.footer__pay span { padding: .3rem .65rem; }
.hbtn__count { min-width: 20px; height: 20px; padding-inline: .3rem; }

/* --- buttons standing next to each other -------------------------------- */
.btn + .btn, .btn + .link-more, .link-more + .btn { margin-left: var(--sp-2); }
.woocommerce .actions .button + .button { margin-left: var(--sp-2); }

/* Strays that inherit a size from WooCommerce / core rather than the scale. */
.woocommerce-noreviews, .woocommerce-Reviews p.form-submit + p { font-size: var(--fs-md); }
.comment-reply-title small, .comment-reply-title small a { font-size: var(--fs-sm); font-weight: 500; }
.woocommerce a.remove { font-size: var(--fs-lg) !important; }

/* Tag pills clear the 32px minimum like every other tappable thing. */
.tag { min-height: 32px; display: inline-flex; align-items: center; }

/* Register column: the button needs air after the privacy paragraph. */
.woocommerce-form-register .woocommerce-privacy-policy-text { margin-bottom: var(--sp-4); }
.woocommerce-form-register button[type="submit"],
.woocommerce-form-login button[type="submit"] { margin-top: 0; }
.woocommerce-form-row + .woocommerce-form-row { margin-top: var(--sp-4); }

/* ==========================================================================
   26. Product purchase panel
   The right-hand column of a product page, rebuilt as a self-contained panel
   rather than inheriting whatever order WooCommerce and its plugins emit.
   ========================================================================== */

.woocommerce div.product > .summary { display: grid; gap: 0; align-content: start; }

/* --- headline block ------------------------------------------------------ */
.woocommerce div.product .product_title { margin: 0 0 .5rem; line-height: 1.2; }
.woocommerce div.product .woocommerce-product-rating { margin: 0 0 .75rem; }
.woocommerce div.product p.price,
.woocommerce div.product span.price { margin: 0 0 .9rem; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.woocommerce div.product .woocommerce-product-details__short-description {
	margin: 0 0 1.4rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line-soft);
	font-size: var(--fs-md); line-height: 1.6;
}

/* --- option label row: "Size" left, size-guide link right ----------------- */
.woocommerce div.product form.cart .variations { margin: 0; }
.woocommerce div.product form.cart .variations th.label { padding-bottom: .55rem; }
.woocommerce div.product form.cart .variations label {
	display: flex; align-items: center; justify-content: space-between; gap: .75rem;
	margin: 0; font-size: var(--fs-sm); font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
/* Size-guide buttons plugins drop next to the options get a home here. */
.woocommerce div.product form.cart .variations label a,
.woocommerce div.product form.cart .variations label .sg-btn {
	margin-left: auto; font-size: var(--fs-xs); font-weight: 650;
	letter-spacing: 0; text-transform: none; color: var(--brand-dark);
}

.kimnim-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.kimnim-swatch {
	min-width: 52px; min-height: 44px; padding: .5rem .95rem;
	border: 1px solid var(--line); border-radius: var(--r);
	background: #fff; color: var(--ink); font-size: var(--fs-sm); font-weight: 650;
	cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.kimnim-swatch:hover { border-color: var(--ink); }
.kimnim-swatch.is-active {
	border-color: var(--ink); color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--ink);
}
.kimnim-swatch.is-disabled, .kimnim-swatch:disabled {
	color: var(--muted); border-color: var(--line-soft); cursor: not-allowed;
	background: linear-gradient(to top left, transparent calc(50% - 1px), var(--line) 50%, transparent calc(50% + 1px));
}

/* The native select stays usable until JavaScript takes over. Hiding it
   unconditionally would strand anyone whose JS is deferred or blocked. */
.kimnim-select { margin-top: .6rem; }
html.kn-js .kimnim-swatches + .kimnim-select {
	position: absolute; width: 1px; height: 1px; margin: -1px;
	clip-path: inset(50%); overflow: hidden;
}

/* --- the buy row --------------------------------------------------------- */
.woocommerce div.product form.cart .quantity { display: block; }
.woocommerce div.product form.cart .single_variation_wrap { display: grid; gap: .8rem; }
.woocommerce div.product form.cart .single_add_to_cart_button { min-height: 54px; font-size: var(--fs-base); }
.woocommerce div.product form.cart .quantity .qty { height: 100%; }
@media (max-width: 420px) {
	.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
	.woocommerce div.product form.cart .kimnim-buyrow { grid-template-columns: minmax(0, 1fr); }
	.woocommerce div.product form.cart .quantity .qty { width: 100%; }
}

/* --- express payment region ---------------------------------------------- */
/* Everything a payment plugin injects after the cart form is contained here,
   behind a labelled divider, so an iframe cannot displace the buy row. */
.buy { display: grid; gap: 0; }
.buy__express:not(:empty) {
	position: relative; margin-top: 1.6rem; padding-top: 2.1rem; display: grid;
}
.buy__express:not(:empty)::after {
	content: ""; position: absolute; top: 1rem; left: 0; right: 0;
	height: 1px; background: var(--line);
}
.buy__express:not(:empty)::before {
	content: attr(data-express-label); position: absolute; top: 0; left: 50%;
	transform: translateX(-50%); z-index: 1; background: var(--surface); padding: 0 .8rem;
	font-size: var(--fs-xs); line-height: 2; color: var(--muted);
	text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
}
.buy__express > * { width: 100%; margin: 0 !important; }
.buy__express > * + * { margin-top: .6rem !important; }
.ppcp-messages { margin-top: .6rem; }

/* --- trust list ---------------------------------------------------------- */
.usp { margin-top: 1.5rem; padding-top: 1.4rem; }

/* --- meta ---------------------------------------------------------------- */
.woocommerce .product_meta { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line-soft); }

/* --- gallery ------------------------------------------------------------- */
/* Two levels on purpose. A sticky grid ITEM is clamped by the whole grid, not
   by its own row, so it would slide down over the sections underneath. The
   outer div stretches to the row's height; the inner one sticks inside it. */
.woocommerce div.product > .pgallery {
	grid-column: 1; grid-row: 1; min-width: 0; align-self: stretch;
}
.woocommerce div.product .pgallery .images,
.woocommerce div.product .pgallery .woocommerce-product-gallery {
	/* WooCommerce's own position:relative stays; the offset must not. */
	top: auto; margin: 0;
}
@media (min-width: 901px) {
	.pgallery__inner { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}

/* ==========================================================================
   27. Reviews
   ========================================================================== */
.prod-section--reviews .woocommerce-Reviews-title { display: none; }
.reviews-head {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 1rem; padding-bottom: .9rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--line);
}
.reviews-head__score { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; }
.reviews-head__avg { font-size: var(--fs-xl); font-weight: 750; color: var(--ink); line-height: 1; }
.reviews-head__count { font-size: var(--fs-sm); color: var(--muted); }
.reviews-head__empty { margin: .35rem 0 0; color: var(--muted); font-size: var(--fs-md); }
.prod-section__title--bare { border: 0; padding: 0; margin: 0; }

/* The empty state used to be a lone button floating in 300px of white. */
.prod-section--reviews .woocommerce-noreviews { display: none; }
.prod-section--reviews #review_form_wrapper {
	background: var(--cream); border: 1px solid var(--line-soft);
	border-radius: var(--r-lg); padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
}
.prod-section--reviews #reply-title { margin-top: 0; }
.prod-section--reviews .comment-form { display: grid; gap: 0; }
.prod-section--reviews .comment-form p { margin-bottom: var(--sp-4); }
.prod-section--reviews .comment-form p:last-child { margin-bottom: 0; }

/* --- variation area rhythm ------------------------------------------------
   Two things used to open a ~70px hole between the swatches and the buy row:
   the "Clear" link, which WooCommerce only hides with `visibility` so it kept
   reserving a full line, and plugin buttons landing below the buy row.
   ------------------------------------------------------------------------- */
.woocommerce div.product form.cart .variations td.value { position: relative; }
.woocommerce div.product form.cart .reset_variations {
	position: absolute; right: 0; bottom: calc(100% + .75rem); margin: 0;
	font-size: var(--fs-xs); line-height: 1; min-height: 0;
}

/* Anything a plugin adds inside the variation wrap sits above the buy row. */
.woocommerce div.product form.cart .single_variation_wrap > * { order: 1; }
.woocommerce div.product form.cart .woocommerce-variation { order: 0; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart { order: 2; }
.woocommerce div.product form.cart .single_variation_wrap > a:not(.button) {
	justify-self: start; font-size: var(--fs-sm); font-weight: 650; color: var(--brand-dark);
}

/* ==========================================================================
   28. Checkout order panel
   ========================================================================== */

/* The two columns start on the same line.
   The order card used to begin ~10px below the first billing field because the
   two headings carried different bottom margins. */
.woocommerce-checkout form.checkout > h3#order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout #order_review_heading {
	margin: 0 0 1.5rem; font-size: var(--fs-lg); line-height: 1.3;
}
@media (min-width: 900px) {
	.woocommerce-checkout form.checkout > #order_review { margin-top: 0; }
}

.woocommerce-checkout #order_review {
	background: var(--cream); border: 1px solid var(--line-soft);
	border-radius: var(--r-lg); padding: clamp(1.1rem, .85rem + .9vw, 1.6rem);
}
.woocommerce-checkout #order_review .shop_table {
	background: var(--surface); border: 1px solid var(--line-soft);
	border-radius: var(--r); overflow: hidden; margin-bottom: 1.25rem;
}

/* --- coupon row ----------------------------------------------------------
   Whether WooCommerce or a plugin puts the coupon in the order table, it gets
   the same gutters as every other row instead of sitting flush to the edge. */
.woocommerce-checkout #order_review .coupon-row td,
.woocommerce-checkout #order_review td.coupon,
.woocommerce-checkout #order_review .cart-discount td {
	padding: 1rem 1.15rem;
	background: var(--cream); border-top: 1px solid var(--line-soft);
}
form.checkout_coupon_inline,
.woocommerce-checkout #order_review form.checkout_coupon,
.woocommerce-checkout .woocommerce-form-coupon {
	display: grid; grid-template-columns: minmax(0, 1fr) auto;
	gap: .6rem; align-items: stretch; margin: 0; padding: 0; border: 0;
}
form.checkout_coupon_inline p,
.woocommerce-checkout #order_review form.checkout_coupon p { margin: 0; }
form.checkout_coupon_inline input[type="text"],
.woocommerce-checkout #order_review form.checkout_coupon input[type="text"] {
	width: 100%; min-width: 0; margin: 0;
}
form.checkout_coupon_inline .button,
.woocommerce-checkout #order_review form.checkout_coupon .button {
	width: auto; white-space: nowrap; padding-inline: 1.5rem;
	background: var(--ink);
}
form.checkout_coupon_inline .button:hover { background: #000; }
@media (max-width: 420px) {
	form.checkout_coupon_inline,
	.woocommerce-checkout #order_review form.checkout_coupon { grid-template-columns: minmax(0, 1fr); }
}

/* --- totals rows ---------------------------------------------------------- */
.woocommerce-checkout #order_review .shop_table tfoot th,
.woocommerce-checkout #order_review .shop_table tfoot td { padding: .85rem 1.15rem; }
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td { font-size: var(--fs-md); }
.woocommerce-checkout #payment { padding-top: .25rem; }
.woocommerce-checkout #payment ul.payment_methods { padding-top: 0; }

/* ==========================================================================
   29. Finish pass
   ========================================================================== */

/* The header lifts off the page only once you have scrolled past it. */
.header.is-stuck { box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(23, 21, 18, .05); }

/* A spec list should not draw a rule under its last row and then have the
   section draw another one immediately below it. */
.specs dt:last-of-type, .specs dd:last-of-type { border-bottom: 0; padding-bottom: 0; }

/* Empty cart: one centred block, not a notice pinned left with a button
   orphaned underneath it. */
.woocommerce-cart .cart-empty {
	background: none; border: 0; padding: 0; margin: 0 0 .6rem;
	display: block; text-align: center;
	font-size: var(--fs-xl); font-weight: 700; color: var(--ink);
}
.emptystate__sub {
	max-width: 46ch; margin: 0 auto 1.6rem; text-align: center;
	color: var(--muted); font-size: var(--fs-md);
}
.emptystate__links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.woocommerce-cart .return-to-shop { margin: 1.6rem 0 0; text-align: center; }
.woocommerce-cart .wc-page__content { padding-block: clamp(1rem, .5rem + 2vw, 2.5rem); }

/* Section heads: title and "view all" link share a baseline. */
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem 1.5rem; }
.section__head--center { justify-content: center; text-align: center; flex-direction: column; align-items: center; }

/* Related products sit on their own footing rather than butting into the
   section above them. */
.related, .up-sells, .cross-sells {
	margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
	padding-top: clamp(2rem, 1.6rem + 1.6vw, 3rem);
	border-top: 1px solid var(--line);
}

/* Quantity box and Add to cart read as one control pair. */
.woocommerce .quantity .qty { font-weight: 650; }

/* Focus is always visible, and always the same shape. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm);
}

/* --- cart actions row -----------------------------------------------------
   Coupon on the left, "Update cart" on the right, on one line. It used to
   stack because the cell stayed a table-cell and both children were blocks. */
/* The cell stays a table-cell on purpose. Giving a <td> display:flex takes it
   out of the table formatting context and the whole row's columns collapse. */
.woocommerce table.cart td.actions {
	padding: 1rem 1.15rem; background: var(--cream); text-align: right;
}
.woocommerce table.cart td.actions::after { content: ""; display: block; clear: both; }
.woocommerce table.cart td.actions .coupon {
	float: left; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem;
	width: min(440px, 62%); margin: 0; text-align: left;
}
.woocommerce table.cart td.actions .coupon input { width: 100%; min-width: 0; }
.woocommerce table.cart td.actions .coupon .button { white-space: nowrap; }
.woocommerce table.cart td.actions button[name="update_cart"],
.woocommerce table.cart td.actions input[name="update_cart"] {
	background: transparent; color: var(--ink); border: 1px solid var(--line);
}
.woocommerce table.cart td.actions button[name="update_cart"]:hover:not(:disabled) {
	background: var(--ink); color: #fff; border-color: var(--ink);
}
@media (max-width: 620px) {
	.woocommerce table.cart td.actions { text-align: left; }
	.woocommerce table.cart td.actions .coupon {
		float: none; width: 100%; grid-template-columns: minmax(0, 1fr); margin-bottom: .6rem;
	}
	.woocommerce table.cart td.actions button[name="update_cart"] { width: 100%; }
}

/* Express checkout inside the cart totals gets the same labelled divider as
   the product page, so an empty SDK container never looks like a gap. */
/* No rule above the express buttons: if the payment SDK fails to render, a
   border would be left hanging over nothing. Spacing only. */
.wc-proceed-to-checkout .ppc-button-wrapper { margin-top: 1rem; }
.wc-proceed-to-checkout .ppc-button-wrapper:empty,
.wc-proceed-to-checkout .ppcp-messages:empty { display: none; }