@charset "UTF-8";
/*
 * Smart Home Hardware — the theme's entire stylesheet.
 *
 * Plain CSS with no build step, on purpose.
 * An earlier project used Tailwind and lost days to cascade wars with WooCommerce
 * (Woo's CSS is not in an @layer, so it beats layered rules at any specificity).
 * This file is enqueued at priority 20, which already puts it after Woo in the queue.
 *
 * Contents
 *   1. Tokens
 *   2. Reset + typography
 *   3. Reusable pieces (buttons / badges / section headings)
 *   4. Header
 *   5. Home page
 *   6. Shop + product cards
 *   7. Single product page
 *   8. Cart / checkout / my account
 *   9. Pages / posts / search results
 *  10. Footer
 *  11. Small screens
 */

/* ── 1. Tokens ────────────────────────────────────────────── */
:root {
	--ink: #112c20;
	--ink-rgb: 17 44 32;
	--ink-2: #284536;
	--muted: #586e60;
	--muted-2: #627568;

	/* Logo: green #009925 and orange #ff7f00. Darker green keeps white button labels
	   readable; orange remains the secondary accent, with a dark variant for light surfaces. */
	--brand: #00761c;
	--brand-hover: #005b16;
	--brand-bright: #009925;
	--brand-soft: #eef8ed;
	--brand-line: #bedec4;
	--accent: #b35700;
	--accent-button: #c65300;
	--accent-hover: #a84400;
	--forest: color-mix(in srgb, var(--ink) 20%, color-mix(in srgb, var(--brand) 25%, #003828));
	--hero-mint: #e4f8eb;
	--accent-bright: #ff7f00;
	--accent-soft: #fff4e6;
	--accent-line: #ffd9a8;

	--leaf: #00761c;
	--leaf-bright: #009925;
	--leaf-soft: #e6f6ea;
	--leaf-line: #b7e0c2;

	--bg: #ffffff;
	--surface: #f5f9f7;
	--surface-2: #eaf3ee;
	--line: #dce7dd;
	--line-soft: #edf2eb;
	/* Darker rule for unchecked checkbox/radio outlines: --line is too faint to read
	   as an interactive control. Measured 3.09:1 against white — above the 3:1 that
	   WCAG 1.4.11 asks of a UI component boundary. */
	--line-strong: #819889;

	--radius: 14px;
	--radius-sm: 10px;

	/* One size for every form control on the site. Each control used to carry its own padding
	   and font-size, which put five different heights (40/43/48/49/50px) on a single page. */
	--control-h: 46px;
	--control-px: 14px;
	--control-fs: 15px;
	--radius-lg: 20px;

	--shadow-1: 0 1px 2px rgb(var(--ink-rgb) / .06), 0 1px 3px rgb(var(--ink-rgb) / .05);
	--shadow-2: 0 4px 12px rgb(var(--ink-rgb) / .07), 0 12px 28px rgb(var(--ink-rgb) / .06);
	--shadow-3: 0 18px 48px rgb(var(--ink-rgb) / .14);

	--wrap: 1280px;
	--page-gutter: clamp(20px, 3.5vw, 48px);
	--section-space: clamp(32px, 4vw, 44px);
	--gap: 24px;

	--font: "Noto Sans Thai", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* WordPress's admin bar overlaps the sticky header unless its height is compensated for. */
	--admin-offset: 0px;
}

.admin-bar { --admin-offset: 32px; }

/* WordPress moves #wpadminbar in two steps, and the offset has to follow both. At 782px it grows
   to 46px but stays `position: fixed`, so that height still has to be cleared. Only at 600px does
   it become `position: absolute` and scroll away with the page — and there, reserving 46px left
   the sticky header floating with a transparent strip above it that page content slid up through:
   on /my-account/ the "แผงควบคุม" card appeared to hover over the header. Nothing left to clear
   once the bar has scrolled off, so the offset goes to zero there and only there. */
@media (max-width: 782px) { .admin-bar { --admin-offset: 46px; } }
@media (max-width: 600px) { .admin-bar { --admin-offset: 0px; } }

/* ── 2. Reset + typography ────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand); }

h1, h2, h3, h4 { margin: 0; line-height: 1.28; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

/* ── Form controls, one look for the whole site ──────────────────────────────
   Styled by input TYPE, not by wrapper class. Scoping these to .form-row was
   why the same field looked different on the cart, the register form and the
   login screen — anything outside a known wrapper got the browser default.

   Deliberately NOT wrapped in :where(). At specificity 0 every WooCommerce and
   widget rule outranked it, so controls kept their own paddings and the page
   ended up with five different field heights. As a plain compound selector this
   is (0,1,1) — it beats single-class rules like .input-text and .search-field,
   while the handful of genuine exceptions below (the borderless header search,
   the quantity box) match it exactly and win on source order by sitting later.

   min-height is what actually guarantees one height: padding alone cannot,
   because a control that needs different padding (a select with room for its
   arrow) would otherwise come out a different size. */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"], input[type="date"],
textarea, select {
	min-height: var(--control-h);
	padding: 0 var(--control-px);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--ink);
	font-size: var(--control-fs);
	line-height: 1.4;
	transition: border-color .16s, box-shadow .16s;
}
textarea { min-height: 110px; padding: 12px var(--control-px); resize: vertical; }

/* Every <select> is appearance:none so it can share the input styling — but that also removes the
   native arrow, leaving something that looks like a text box you cannot type in. Put the arrow
   back once, here, instead of per component. The right padding keeps the text off it. */
select {
	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='%2364748b' 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 12px center;
	background-size: 16px;
	padding-right: 38px;
	cursor: pointer;
}
/* A <select> inside a form row fills the row like every other control. WooCommerce's country
   field ships with a single option once selling is limited to Thailand, and without this it
   shrank to the width of the word — 55px next to 966px fields. */
:is(.form-row, .woocommerce-form-row, .shh-field) select,
:is(.woocommerce, .woocommerce-page) form .form-row select { width: 100%; }
input::placeholder, textarea::placeholder { color: var(--muted-2); }

:where(input, textarea, select):focus-visible {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 4px var(--brand-soft);
}
:where(input, textarea, select):disabled { background: var(--surface); color: var(--muted); cursor: not-allowed; }

/* Checkbox and radio. Native controls sit at ~13px, too small beside 15px text
   and unstyleable beyond the tick colour, so these are drawn from scratch.
   The tick is an inline SVG mask rather than a background-image: mask inherits
   currentColor, so one rule covers light and dark surfaces alike. */
:where(input[type="checkbox"], input[type="radio"]) {
	appearance: none;
	flex: none;
	width: 20px; height: 20px;
	margin: 0;
	border: 2px solid var(--line-strong);
	border-radius: 6px;
	background: #fff;
	display: inline-grid;
	place-content: center;
	cursor: pointer;
	transition: background-color .14s, border-color .14s;
}
:where(input[type="radio"]) { border-radius: 999px; }

:where(input[type="checkbox"], input[type="radio"])::before {
	content: "";
	width: 12px; height: 12px;
	transform: scale(0);
	transition: transform .14s cubic-bezier(.2, .9, .3, 1.3);
	background: #fff;
}
:where(input[type="checkbox"])::before {
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.2 12.4 2.4 8.6l1.5-1.5 2.3 2.3 5.9-5.9 1.5 1.5z"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6.2 12.4 2.4 8.6l1.5-1.5 2.3 2.3 5.9-5.9 1.5 1.5z"/></svg>') center / contain no-repeat;
}
:where(input[type="radio"])::before { width: 8px; height: 8px; border-radius: 999px; }

:where(input[type="checkbox"], input[type="radio"]):checked {
	background: var(--brand);
	border-color: var(--brand);
}
:where(input[type="checkbox"], input[type="radio"]):checked::before { transform: scale(1); }
:where(input[type="checkbox"], input[type="radio"]):disabled { background: var(--surface); border-color: var(--line); cursor: not-allowed; }
:where(input[type="checkbox"], input[type="radio"]):disabled:checked { background: var(--muted-2); border-color: var(--muted-2); }

/* A checkbox is nearly always followed by its label text — keep them on one
   line and vertically centred without every template needing its own rule. */
:where(label):has(> input[type="checkbox"], > input[type="radio"]) {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid color-mix(in srgb, var(--brand) 55%, white);
	outline-offset: 2px;
	border-radius: 6px;
}

.sr-only {
	position: absolute; 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: 16px; top: -60px; z-index: 999;
	background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 8px;
	transition: top .18s;
}
.skip-link:focus { top: var(--admin-offset); color: #fff; }

.wrap { width: min(100% - var(--page-gutter) * 2, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - var(--page-gutter) * 2, 820px); }

.sec { padding-block: var(--section-space); }
.sec--tight { padding-block: 24px; }
.sec--why { background: var(--surface); }

.icon { flex: none; }

/* ── 3. Reusable pieces ───────────────────────────────────── */

/* In several places Woo's .button has exactly the same specificity as a bare .btn, so these
   reach down to the type selector (a.btn / button.btn) to win outright. */
.btn,
a.btn,
button.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	transition: background-color .16s, color .16s, border-color .16s, transform .12s, box-shadow .16s;
}
.btn:active { transform: translateY(1px); }

.btn--lg, a.btn--lg { padding: 14px 26px; font-size: 16px; }

.btn--primary, a.btn--primary, button.btn--primary {
	background: var(--brand);
	color: #fff;
	box-shadow: var(--shadow-1);
}
.btn--primary:hover, a.btn--primary:hover, button.btn--primary:hover {
	background: var(--brand-hover);
	color: #fff;
	box-shadow: var(--shadow-2);
}

.btn--ghostdark, a.btn--ghostdark, button.btn--ghostdark {
	background: #fff;
	color: var(--ink);
	border-color: var(--line);
}
.btn--ghostdark:hover, a.btn--ghostdark:hover { border-color: var(--ink); color: var(--ink); }

/* Transparent button on a dark background — a .68 border measures 4.65:1 against ink. Measured, not guessed. */
.btn--onlight, a.btn--onlight, button.btn--onlight {
	background: transparent;
	color: #fff;
	border-color: rgb(255 255 255 / .68);
}
.btn--onlight:hover, a.btn--onlight:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--ghost, a.btn--ghost { background: transparent; border-color: var(--line); }

.btn--line, a.btn--line { background: #06c755; color: #fff; }
.btn--line:hover, a.btn--line:hover { background: #05a648; color: #fff; }

.btn--block, a.btn--block { width: 100%; }

.badge {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 4px 9px;
	border-radius: 999px;
	font-size: 12px; font-weight: 600; line-height: 1.4;
	white-space: nowrap;
}
.badge--sale { background: var(--brand); color: #fff; }
.badge--out { background: var(--ink); color: #fff; }
.badge--wholesale { background: var(--leaf-soft); color: var(--leaf); border: 1px solid color-mix(in srgb, var(--leaf) 25%, white); }

.sec-head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 20px; margin-bottom: 26px; flex-wrap: wrap;
}
.sec-head__title { font-size: clamp(21px, 2.4vw, 28px); }
.sec-head__sub { color: var(--muted); margin-top: 6px; font-size: 15px; }
.sec-head__link {
	display: inline-flex; align-items: center; gap: 4px;
	font-weight: 600; font-size: 15px; color: var(--accent);
	white-space: nowrap;
}
.sec-head__link:hover { color: var(--accent-hover); }

.crumbs { border-bottom: 1px solid var(--line-soft); background: var(--bg); }
.crumbs .wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-block: 12px; font-size: 13.5px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand); }
.crumbs__sep { color: var(--line); }

.pagehead { padding-block: var(--section-space) clamp(24px, 3vw, 32px); }
.pagehead + .sec { padding-top: 0; }
.pagehead__kicker + .pagehead__title { margin-top: 10px; }
.pagehead__kicker { color: var(--brand); font-weight: 600; font-size: 14px; }
.pagehead__title { font-size: clamp(24px, 3.4vw, 36px); }
.pagehead__desc { color: var(--muted); margin-top: 8px; max-width: 68ch; }

.empty { text-align: center; padding: 48px 0; color: var(--muted); display: grid; gap: 16px; justify-items: center; }
.empty__code { font-size: 64px; font-weight: 700; color: var(--surface-2); line-height: 1; }
.empty__title { font-size: 26px; color: var(--ink); }

/* ── 4. Header ────────────────────────────────────────────── */
.site-head {
	position: sticky;
	top: var(--admin-offset);
	z-index: 60;
	background: var(--bg);
	box-shadow: 0 1px 0 var(--line);
}

.topbar { background: var(--forest); color: #fff; font-size: 13.5px; }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.topbar__note { display: inline-flex; align-items: center; gap: 8px; color: rgb(255 255 255 / .88); }
.topbar__links { display: flex; align-items: center; gap: 18px; }
.topbar__links a { display: inline-flex; align-items: center; gap: 6px; color: rgb(255 255 255 / .88); font-weight: 500; }
.topbar__links a:hover { color: #fff; }

.mainbar__in { display: flex; align-items: center; gap: 20px; padding-block: 14px; }

.mainbar__burger { display: none; }

.icon-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px;
	background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm);
	cursor: pointer;
}
.icon-btn:hover { border-color: var(--ink); }

.brand { flex: none; }
.brand__text { display: flex; align-items: center; gap: 11px; }
.brand__mark { display: grid; place-items: center; flex: none; }
.brand__words { display: grid; }
.brand__name { font-weight: 700; font-size: 18px; letter-spacing: -.02em; line-height: 1.2; }
.brand__tag { font-size: 11.5px; color: var(--muted); letter-spacing: .01em; }
.custom-logo { max-height: 52px; width: auto; }

/* Search box */
/* `form.search`, not `.search`: WordPress puts a bare `search` class on <body> for every
   search-results page, so an unscoped `.search { display: flex }` turned the whole document
   into a flex row — header, main and footer ended up side by side. Same family of bug as the
   unscoped `.actions` that hit WooCommerce's cart cell. Qualifying by element makes the
   collision impossible: <body> is never a <form>. */
form.search {
	flex: 1 1 auto;
	display: flex;
	align-items: stretch;
	max-width: 660px;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	background: #fff;
	overflow: hidden;
	transition: border-color .16s, box-shadow .16s;
}
form.search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }

.search__scope { position: relative; display: none; align-items: center; border-right: 1px solid var(--line); background: var(--surface); }
.search__scope select {
	appearance: none;
	border: 0; background: transparent;
	padding: 0 34px 0 14px;
	height: 100%;
	max-width: 190px;
	/* Matches the text field beside it — two different sizes inside one box read as a mistake. */
	font-size: var(--control-fs); color: var(--ink-2);
	cursor: pointer;
	text-overflow: ellipsis;
}
.search__scope .icon { position: absolute; right: 11px; pointer-events: none; color: var(--muted); }

/* .search clips to its rounded corners, and its children sit 1.5px from that edge — less than
   the 5px an offset outline needs (3px ring + 2px offset), so the global focus ring came out
   sliced on three sides. Drawing it inside the child keeps the full ring visible. */
form.search :is(select, button):focus-visible { outline-offset: -3px; }

.search__field { flex: 1 1 auto; display: flex; }
.search__field input {
	flex: 1 1 auto;
	border: 0; background: transparent;
	padding: 12px 16px;
	font-size: 15px;
	min-width: 0;
}
.search__field input:focus { outline: none; }
.search__field input::placeholder { color: var(--muted-2); }

.search__go {
	display: inline-flex; align-items: center; gap: 8px;
	border: 0; background: var(--accent-button); color: #fff;
	padding: 0 22px;
	font-weight: 600; font-size: 15px;
	cursor: pointer;
	transition: background-color .16s;
}
.search__go:hover { background: var(--accent-hover); }

/* Scoped to .mainbar on purpose: WooCommerce's cart table has its own <td class="actions">,
   and an unscoped .actions was hitting it — turning that cell into a flex box with
   margin-left:auto, which crushed the coupon row to 56px and wrapped the buttons.
   The BEM children below (.actions__*) are unique names and need no scoping. */
.mainbar .actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.actions__item {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 8px 12px; border-radius: var(--radius-sm);
	transition: background-color .16s;
}
.actions__item:hover { background: var(--surface); color: var(--ink); }
.actions__label { display: grid; line-height: 1.25; }
.actions__label small { font-size: 11.5px; color: var(--muted); }
.actions__label b { font-size: 14px; font-weight: 600; }
.actions__cartwrap { position: relative; display: grid; place-items: center; }
.actions__count {
	position: absolute; top: -7px; right: -9px;
	min-width: 19px; height: 19px; padding: 0 5px;
	display: grid; place-items: center;
	background: var(--accent-button); color: #fff;
	border-radius: 999px; font-size: 11px; font-weight: 700;
	border: 2px solid #fff;
}

/* Nav bar */
.navbar { border-top: 1px solid var(--line-soft); background: var(--bg); }
.navbar__in { display: flex; align-items: center; gap: 6px; }

.navbar__all {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--brand); color: #fff;
	padding: 12px 18px; margin-right: 10px;
	border-radius: var(--radius-sm);
	font-weight: 600; font-size: 15px;
}
.navbar__all:hover { background: var(--brand-hover); color: #fff; }

.navbar__menu { display: flex; align-items: center; gap: 2px; }
.navbar__menu li { position: relative; }
.navbar__menu > li > a {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 13px 14px;
	font-weight: 500; font-size: 15px;
	border-bottom: 2px solid transparent;
}
.navbar__menu > li > a:hover,
.navbar__menu > li.current-menu-item > a,
.navbar__menu > li.current-menu-parent > a {
	color: var(--brand); border-bottom-color: var(--brand);
}
.navbar__menu .menu-item-has-children > a::after {
	content: ""; width: 6px; height: 6px; flex: none;
	border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.navbar__menu .sub-menu {
	position: absolute; top: 100%; left: 0; z-index: 20;
	min-width: 250px; padding: 8px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow-3);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .16s, transform .16s, visibility .16s;
}
.navbar__menu li:hover > .sub-menu,
.navbar__menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.navbar__menu .sub-menu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14.5px; }
.navbar__menu .sub-menu a:hover { background: var(--brand-soft); color: var(--brand); }
.navbar__menu .sub-menu .sub-menu { top: -8px; left: 100%; }

.navbar__cta {
	display: inline-flex; align-items: center; gap: 8px;
	margin-left: auto;
	padding: 9px 15px;
	border: 1px solid var(--accent-line); background: #fff;
	color: var(--accent); border-radius: 999px;
	font-weight: 600; font-size: 14px;
}
.navbar__cta:hover { background: var(--accent-soft); color: var(--accent-hover); border-color: var(--accent); }

/* Small-screen drawer */
.drawer { position: fixed; inset: 0; z-index: 200; display: flex; }
.drawer[hidden] { display: none; }
.drawer__scrim { position: absolute; inset: 0; background: rgb(var(--ink-rgb) / .5); border: 0; cursor: pointer; }
.drawer__panel {
	position: relative; z-index: 1;
	width: min(88vw, 340px); height: 100%;
	background: #fff; padding: 16px;
	display: flex; flex-direction: column; gap: 8px;
	overflow-y: auto;
	animation: drawer-in .2s ease-out;
}
@keyframes drawer-in { from { transform: translateX(-100%); } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.drawer__all { display: flex; align-items: center; gap: 8px; padding: 12px; background: var(--ink); color: #fff; border-radius: var(--radius-sm); font-weight: 600; }
.drawer__menu a { display: block; padding: 11px 12px; border-radius: 8px; font-weight: 500; }
.drawer__menu a:hover { background: var(--surface); }
.drawer__menu .sub-menu { padding-left: 12px; border-left: 2px solid var(--line-soft); margin-left: 12px; }
.drawer__menu .sub-menu a { font-size: 14.5px; color: var(--muted); padding: 8px 12px; }
.drawer__foot { margin-top: auto; display: grid; gap: 8px; padding-top: 16px; }

/* ── 5. Home page ─────────────────────────────────────────── */
.hero {
	position: relative;
	background: var(--hero-mint);
	color: var(--forest);
	overflow: hidden;
}
/* Soft mint shapes echo the reference without replacing the shop's decorative image. */
.hero::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background:
		radial-gradient(ellipse 36% 100% at 25% 25%, rgb(255 255 255 / .3) 62%, transparent 62.3%),
		linear-gradient(55deg, rgb(128 220 155 / .16) 12%, transparent 12.1%);
	pointer-events: none;
}
/* Keep the copy on opaque mint, then reveal the original tools on the right. */
.hero--photo::after {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background-image: linear-gradient(100deg, var(--hero-mint) 0%, var(--hero-mint) 38%, rgb(228 248 235 / .94) 48%, rgb(228 248 235 / .55) 59%, rgb(0 56 40 / .08) 74%), var(--hero-img);
	background-size: cover; background-position: center;
}
.hero__in {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 48px; align-items: center;
	padding-block: clamp(44px, 6vw, 76px);
}
.hero__eyebrow {
	display: inline-block;
	font-size: 13.5px; font-weight: 600; letter-spacing: .06em;
	color: var(--brand);
	text-transform: uppercase;
	margin-bottom: 14px;
}
.hero__title { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.15; letter-spacing: -.02em; }
.hero__text { margin-top: 12px; font-size: clamp(15.5px, 1.4vw, 18px); color: var(--ink-2); max-width: 52ch; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.hero .btn--primary { background: var(--accent-button); color: #fff; }
.hero .btn--primary:hover { background: var(--accent-hover); }
.hero .btn--onlight { background: rgb(255 255 255 / .3); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 50%, white); }
.hero .btn--onlight:hover { background: #fff; border-color: var(--brand); }
.hero__trust {
	display: flex; flex-wrap: wrap; gap: 10px 26px;
	margin-top: 22px;
	font-size: 14.5px; color: var(--ink-2);
}
.hero__trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust .icon { color: var(--brand); stroke-width: 3; }

.herotiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.herotile a {
	display: grid; gap: 6px;
	padding: 20px 18px;
	background: rgb(255 255 255 / .07);
	border: 1px solid rgb(255 255 255 / .16);
	border-radius: var(--radius);
	color: #fff;
	backdrop-filter: blur(2px);
	transition: background-color .16s, transform .16s, border-color .16s;
}
.herotile a:hover { background: rgb(255 255 255 / .13); border-color: rgb(255 255 255 / .34); transform: translateY(-2px); color: #fff; }
.herotile__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgb(255 127 0 / .22); color: #ffb865; margin-bottom: 6px; }
.herotile__label { font-weight: 700; font-size: 17px; }
.herotile__desc { font-size: 13px; color: rgb(255 255 255 / .68); }

/* Categories */
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--gap); }
/* Keep the list item transparent: the rounded link owns the background and lifts on hover. */
.cat__link {
	display: block; height: 100%;
	background: #fff; border: 1px solid var(--line);
	border-radius: var(--radius); overflow: hidden;
	transition: border-color .16s, box-shadow .16s, transform .16s;
}
.cat__link:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.cat__media { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--surface); padding: 16px; }
.cat__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cat__ph { color: var(--muted-2); }
.cat__body { display: grid; gap: 2px; padding: 14px 16px 16px; border-top: 1px solid var(--line-soft); }
.cat__name { font-weight: 600; font-size: 15.5px; color: var(--ink); }
.cat__count { font-size: 13px; color: var(--muted); }

/* Promotion banner */
.promo {
	position: relative; overflow: hidden;
	border-radius: var(--radius-lg);
	background: linear-gradient(120deg, #713608 0%, var(--accent) 58%, #c3640d 100%);
	color: #fff;
}
.promo--photo::before {
	content: ""; position: absolute; inset: 0;
	/* Keep the text side dark while revealing the decorative image on the right. */
	background-image: linear-gradient(100deg, rgb(94 30 8 / .92) 0%, rgb(126 40 8 / .76) 50%, rgb(140 46 10 / .18) 100%), var(--promo-img);
	background-size: cover; background-position: center;
}
.promo__in { position: relative; padding: clamp(30px, 4vw, 52px); max-width: 62ch; }
.promo__eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; color: rgb(255 255 255 / .92); text-transform: uppercase; }
.promo__title { font-size: clamp(23px, 3.2vw, 36px); margin-top: 10px; text-wrap: balance; }
.promo__text { margin-top: 10px; color: rgb(255 255 255 / .96); font-size: 16px; }
.promo__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
.promo__badge {
	display: inline-flex; align-items: center; gap: 7px;
	background: rgb(255 255 255 / .16); border: 1px dashed rgb(255 255 255 / .58);
	padding: 9px 15px; border-radius: 999px; font-weight: 600; font-size: 14px;
}

/* Wholesale sign-up panel */
.b2b {
	display: grid; grid-template-columns: minmax(0, 1fr);
	background: var(--ink); color: #fff;
	border-radius: var(--radius-lg); overflow: hidden;
}
.b2b--photo { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.b2b__copy { min-width: 0; padding: clamp(24px, 3.4vw, 44px); }
.b2b__art { position: relative; min-width: 0; overflow: hidden; }
.b2b__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; opacity: .8; }
/* Match the copy panel exactly at the seam, then reveal the original decorative image.
   Keep the artwork in its own grid cell so it never overlaps text or controls. */
.b2b__art::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, var(--ink) 0%, rgb(var(--ink-rgb) / .9) 12%, rgb(var(--ink-rgb) / .38) 44%, rgb(var(--ink-rgb) / .06) 82%);
}
.b2b__eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #ffb865; font-weight: 600; font-size: 14px; }
.b2b__title { font-size: clamp(21px, 2.6vw, 30px); margin-top: 16px; line-height: 1.5; }
.b2b__text { margin-top: 16px; color: rgb(255 255 255 / .82); max-width: 62ch; }
.b2b__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.b2b__act .btn { min-width: 160px; }

/* "Why order from us" */
.whys { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--gap); }
.why { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.why__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); margin-bottom: 14px; }
.why__title { font-size: 16.5px; }
.why__text { margin-top: 8px; color: var(--muted); font-size: 14.5px; }

/* ── 6. Shop + product cards ──────────────────────────────── */
/* Header, results and sidebar have separate cells; widget content may shrink and wrap. */
.shop { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }
.shop:not(:has(.filters)) { grid-template-columns: minmax(0, 1fr); }
.shop .woocommerce-products-header { grid-column: 1 / -1; }
.shop-results { grid-column: 2; grid-row: 2; min-width: 0; }
.shop:not(:has(.filters)) .shop-results { grid-column: 1; }
.shop-results > .woocommerce-notices-wrapper:empty { display: none; }
.filters {
	grid-column: 1; grid-row: 2; min-width: 0;
	/* Keep every widget in page flow, including on short screens and when zoomed. */
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px;
}
.filters > * { min-width: 0; overflow-wrap: anywhere; }

.filter-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.filter-box__title { font-size: 15px; margin-bottom: 10px; }
.filter-box ul { display: grid; gap: 6px; font-size: 14.5px; }
.filter-box ul li a { color: var(--ink-2); }
.filter-box ul li a:hover { color: var(--brand); }
.filter-box .count { color: var(--muted-2); font-size: 13px; }
.filter-box .product-categories .children { padding-left: 12px; margin-top: 6px; border-left: 2px solid var(--line-soft); display: grid; gap: 6px; }
.filter-box .product-categories li.current-cat > a { color: var(--brand); font-weight: 700; }

/* Woo's price range slider ships purple, which is the plugin's colour, not the brand's. */
.filter-box .price_slider_wrapper .ui-slider { background: var(--surface-2); height: 5px; border-radius: 99px; margin: 18px 0 14px; }
.filter-box .price_slider_wrapper .ui-slider .ui-slider-range { background: var(--brand); }
.filter-box .price_slider_wrapper .ui-slider .ui-slider-handle {
	width: 17px; height: 17px; top: -6px; margin-left: -8px;
	background: #fff; border: 3px solid var(--brand); border-radius: 99px; box-shadow: var(--shadow-1);
}
.filter-box .price_slider_amount { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.filter-box .price_slider_amount .price_label { color: var(--muted); order: 2; }
.filter-box .price_slider_amount button.button { order: 1; padding: 8px 16px; font-size: 14px; }
.filter-box .woocommerce-product-search { display: flex; gap: 6px; }
.filter-box .woocommerce-product-search input[type="search"] { flex: 1 1 auto; min-width: 0; }
.filter-box .woocommerce-product-search button { flex: none; min-height: var(--control-h); padding: 0 16px; border: 0; border-radius: var(--radius-sm); background: var(--ink); color: #fff; font-size: var(--control-fs); cursor: pointer; }

.woocommerce-products-header { margin-bottom: 4px; }
.woocommerce-products-header__title { font-size: clamp(23px, 3vw, 32px); }
.term-description { color: var(--muted); margin-top: 8px; max-width: 72ch; }

.shopbar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px; flex-wrap: wrap;
	padding: 12px 0 18px;
	border-bottom: 1px solid var(--line-soft);
	margin-bottom: 22px;
}
.shopbar .shopbar__filter { display: none; }
.woocommerce-result-count { color: var(--muted); font-size: 14.5px; margin: 0; }
/* Wide enough for "ราคา น้อยไปมาก", the longest option; otherwise the arrow overlaps the text
   when that option is selected. */
.woocommerce-ordering select {
	appearance: none;
	min-width: 210px;
	padding: 0 40px 0 var(--control-px);
	border: 1px solid var(--line); border-radius: var(--radius-sm);
	background: #fff 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='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat;
	font-size: var(--control-fs); cursor: pointer;
}

/* Product grid — auto-fit so a partial row leaves no empty gaps. */
ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
	gap: var(--gap);
	margin: 0;
}
/* Woo adds ::before/::after with content to clear floats. Once the ul is a grid those two become
   "ghost cells" occupying two slots, leaving the first row ragged.
   The selector has to match Woo's exactly or it will not win. */
ul.products::before, ul.products::after,
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after { content: none; display: none; }

/* A trap that was actually measured: Woo sets `.woocommerce ul.products.columns-5 li.product{width:16.95%}`,
   specificity (0,4,2), which beats our `ul.products li.product` at (0,2,2).
   Worse, once the ul is a grid the % resolves against the *track* width, not the ul's width
   → 16.95% × 236.8px = 40.13px, so the cards collapsed to slivers.
   Fixed by adding .card to match specificity at (0,4,2) and winning on load order (enqueue priority 20). */
/* li.product-category carries no .card class — it comes from a different Woo template.
   If the client turns on "show subcategories" in the shop, those category cards hit the same
   width bug, so it is handled up front: li.product-category gives (0,4,2), equal to Woo's, and
   load order decides. */
ul.products li.product.card,
.woocommerce ul.products li.product.card,
.woocommerce-page ul.products li.product.card,
.woocommerce ul.products li.product-category,
.woocommerce-page ul.products li.product-category {
	width: auto;
	margin: 0;
	float: none;
	clear: none;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color .16s, box-shadow .16s, transform .16s;
}
ul.products li.product.card:hover,
.woocommerce ul.products li.product.card:hover,
.woocommerce-page ul.products li.product.card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); transform: translateY(-3px); }

.card__media {
	position: relative; display: block;
	aspect-ratio: 1; background: #fff;
	padding: 14px;
}
.card__media img { width: 100%; height: 100%; object-fit: contain; }
.card__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

.card__body { display: flex; flex-direction: column; gap: 5px; padding: 4px 16px 16px; flex: 1 1 auto; }
.card__cat { font-size: 12px; color: var(--muted-2); text-transform: none; }
.card__title { font-size: 14.8px; font-weight: 600; line-height: 1.45; }
.card__title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__sku { font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.card__rating { display: flex; align-items: center; gap: 6px; }
.card__reviews { font-size: 12.5px; color: var(--muted-2); }

.card__foot { margin-top: auto; padding-top: 12px; display: grid; gap: 10px; }
.card__price { display: grid; gap: 2px; }
.card__price .price { font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.25; }

/* Discounted price — the old price goes on its own line above, small and struck through; the
   real price sits below in large brand-coloured type, so the eye lands first on the amount
   actually payable. Both prices used to share one line, and at a glance it was impossible to
   tell which one you pay. */
.card__price--cut .price { display: grid; gap: 1px; }
.card__price--cut .price del {
	display: block;
	font-size: 13px; font-weight: 500;
	color: var(--muted-2); text-decoration: line-through;
	text-decoration-thickness: 1.5px;
	order: -1;
}
.card__price--cut .price ins {
	text-decoration: none;
	font-size: 21px; font-weight: 800; color: var(--brand);
	letter-spacing: -.01em;
}
.card__price .price del { font-size: 13px; font-weight: 500; color: var(--muted-2); }
.card__price .price ins { text-decoration: none; color: var(--brand); }

.card__saved {
	justify-self: start;
	margin-top: 3px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--leaf-soft);
	color: var(--leaf);
	font-size: 12px; font-weight: 700;
	white-space: nowrap;
}
.card__saved .woocommerce-Price-amount { font-weight: 700; }
.wholesale-note { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--leaf); }

/* Woo sets `.woocommerce ul.products li.product .button{display:inline-block}` = (0,4,2).
   Writing `ul.products li.product a.button` = (0,2,3) loses, so the button falls back to
   display:block and its label piles up on the left despite justify-content (flex never applies
   because the box is not actually flex).
   → Prefix with .woocommerce/.woocommerce-page and reach a.button to get (0,4,3). */
:is(.woocommerce, .woocommerce-page) ul.products li.product a.button,
:is(.woocommerce, .woocommerce-page) ul.products li.product button.button,
ul.products li.product.card a.button,
ul.products li.product.card button.button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 10px 14px;
	background: #fff;
	color: var(--brand);
	border: 1px solid var(--brand-line);
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.2;
	text-align: center;
	transition: background-color .16s, color .16s, border-color .16s;
}
:is(.woocommerce, .woocommerce-page) ul.products li.product a.button:hover,
:is(.woocommerce, .woocommerce-page) ul.products li.product button.button:hover,
ul.products li.product.card a.button:hover,
ul.products li.product.card button.button:hover {
	background: var(--brand); color: #fff; border-color: var(--brand);
}
ul.products li.product a.added_to_cart {
	display: block; text-align: center; margin-top: 8px;
	font-size: 13.5px; font-weight: 600; color: var(--leaf);
}

/* Woo: `.woocommerce nav.woocommerce-pagination ul{display:inline-block}` = (0,2,2)
   and `… ul li a` = (0,2,4). Anything shorter loses to both.
   Symptom when it loses: page numbers shrink to 27px wide, cramped and hard to tap on mobile. */
:is(.woocommerce, .woocommerce-page) nav.woocommerce-pagination { margin-top: 36px; }
:is(.woocommerce, .woocommerce-page) nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	border: 0;
	margin: 0;
	padding: 0;
}
:is(.woocommerce, .woocommerce-page) nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
	padding: 0;
	overflow: visible;
	float: none;
	display: block;
}
:is(.woocommerce, .woocommerce-page) nav.woocommerce-pagination ul li a,
:is(.woocommerce, .woocommerce-page) nav.woocommerce-pagination ul li span {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 15px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--ink-2);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	transition: border-color .16s, color .16s, background-color .16s;
}
:is(.woocommerce, .woocommerce-page) nav.woocommerce-pagination ul li a:hover,
:is(.woocommerce, .woocommerce-page) nav.woocommerce-pagination ul li a:focus {
	border-color: var(--brand);
	color: var(--brand);
	background: var(--brand-soft);
}
:is(.woocommerce, .woocommerce-page) nav.woocommerce-pagination ul li span.current {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}
:is(.woocommerce, .woocommerce-page) nav.woocommerce-pagination ul li a.prev,
:is(.woocommerce, .woocommerce-page) nav.woocommerce-pagination ul li a.next { font-weight: 700; }

/* ── 7. Single product page ───────────────────────────────── */
.sec--single div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 46px; align-items: start; }

/* Woo: `.woocommerce div.product div.images{width:48%;float:left}` = (0,3,2)
   `.sec--single .product .woocommerce-product-gallery` = (0,3,0) → same class count, fewer
   type selectors, so it loses.
   (Count specificity in full: div.product is 1 class + 1 type, not just a class.)
   → Adding div and the .images class reaches (0,4,2) and wins outright, no !important needed.
   Left unfixed the product image renders at 48% of its grid track — half the width it should be. */
.sec--single div.product div.woocommerce-product-gallery.images,
.sec--single div.product div.summary.entry-summary {
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
}

.summary :is(.product_title, .product_meta, .woocommerce-product-details__short-description) { overflow-wrap: anywhere; }
.sec--single .summary > .badge--sale { width: fit-content; max-width: 100%; margin-bottom: 12px; }

.sec--single div.product .woocommerce-tabs,
.sec--single div.product .related,
.sec--single div.product .upsells,
.sec--single div.product .woocommerce-notices-wrapper { grid-column: 1 / -1; }

.woocommerce-product-gallery { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: #fff; position: relative; }
.woocommerce-product-gallery__image img { border-radius: var(--radius-sm); }
.woocommerce-product-gallery .flex-control-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; padding: 0; }
.woocommerce-product-gallery .flex-control-thumbs li { width: auto; float: none; margin: 0; }
.woocommerce-product-gallery .flex-control-thumbs img { border: 1px solid var(--line); border-radius: 8px; opacity: .72; transition: opacity .16s, border-color .16s; }
.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--brand); }

/* This store's real product names are very long (keywords packed in for SEO). At a normal
   heading size they run 4–5 lines and push the buy button below the fold. */
.summary .product_title { font-size: clamp(20px, 2.1vw, 26px); line-height: 1.4; }
.summary .woocommerce-product-rating { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
/* Match Woo's product selectors so its default olive colour/size cannot override us. */
.woocommerce div.product .summary .price {
	display: grid; gap: 12px;
	margin: 18px 0 14px;
	font-size: clamp(32px, 2.8vw, 36px); font-weight: 800; color: var(--ink);
	line-height: 1.25; letter-spacing: -.015em;
}
.woocommerce div.product .summary .price del {
	order: -1;
	font-size: 20px; font-weight: 400; color: var(--muted); opacity: 1;
	text-decoration: line-through; text-decoration-thickness: 2px;
}
.woocommerce div.product .summary .price ins { text-decoration: none; font-weight: inherit; }
/* Inline-block amounts interrupt the strike-through inherited from <del>. */
.woocommerce div.product .summary .price .woocommerce-Price-amount { display: inline; white-space: nowrap; }

.shh-saved {
	display: inline-flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
	margin: 0 0 18px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--leaf-soft); color: var(--leaf);
	font-size: 14px; font-weight: 700; line-height: 1.5;
}
.summary .woocommerce-product-details__short-description { color: var(--ink-2); padding: 16px 0; border-block: 1px solid var(--line-soft); }
.summary .stock.in-stock { color: var(--leaf); font-weight: 600; }
.summary .stock.out-of-stock { color: var(--brand); font-weight: 600; }

.summary form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 22px 0; }
.summary form.cart .quantity { display: flex; }
.summary form.cart .quantity input.qty {
	width: 92px; min-height: var(--control-h); padding: 0 12px; text-align: center;
	border: 1px solid var(--line); border-radius: var(--radius-sm);
	font-weight: 600;
}
.summary form.cart button.single_add_to_cart_button {
	flex: 1 1 240px;
	display: flex; align-items: center; justify-content: center;
	height: 50px; padding: 0 28px;
	background: var(--brand); color: #fff;
	border: 0; border-radius: var(--radius-sm);
	font-weight: 700; font-size: 16px; cursor: pointer;
	transition: background-color .16s;
}
.summary form.cart button.single_add_to_cart_button:hover { background: var(--brand-hover); }
.summary .variations { width: 100%; }
.summary .variations th { text-align: left; padding: 8px 12px 8px 0; font-weight: 600; font-size: 14.5px; }
.summary .variations select {
	appearance: none; padding: 10px 38px 10px 14px; min-width: 220px;
	border: 1px solid var(--line); border-radius: var(--radius-sm);
	background: #fff 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='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat;
}

.assure { display: grid; gap: 10px; margin: 22px 0; padding: 18px; background: var(--surface); border-radius: var(--radius); }
.assure li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); }
.assure .icon { color: var(--brand); margin-top: 2px; }

.product_meta { font-size: 14px; color: var(--muted); display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.product_meta > span { display: block; }
.product_meta a { color: var(--ink-2); }

/* The product grid already supplies the space between sections. */
.sec--single div.product > .woocommerce-tabs { margin-top: 0; }
/* Override Woo's folder-shaped tabs, including their corner pseudo-elements. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex; flex-wrap: wrap; gap: 6px;
	padding: 6px; margin: 0 0 28px;
	background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
	overflow: visible; isolation: isolate;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent; border: 0; border-radius: 10px;
	margin: 0; padding: 0; min-width: 0; box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 11px 20px;
	font-weight: 600; font-size: 15px; line-height: 1.5;
	color: var(--muted); border: 0; border-radius: 10px;
	text-decoration: none; text-shadow: none; overflow-wrap: anywhere;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	background: var(--brand-soft); color: var(--ink);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	background: var(--ink); color: #fff; box-shadow: 0 2px 5px rgb(var(--ink-rgb) / .12);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus-visible {
	outline: 2px solid var(--brand); outline-offset: 2px;
}
@media (max-width: 600px) {
	.woocommerce div.product .woocommerce-tabs ul.tabs { gap: 4px; padding: 5px; margin-bottom: 24px; }
	.woocommerce div.product .woocommerce-tabs ul.tabs li { flex: 1 1 auto; }
	.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 10px; font-size: 14px; }
}
.woocommerce-tabs .panel h2 { font-size: 20px; margin-bottom: 14px; }
.woocommerce-tabs table.shop_attributes { width: 100%; border-collapse: collapse; }
.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); text-align: left; font-size: 14.5px; }
.woocommerce-tabs table.shop_attributes th { width: 220px; background: var(--surface); font-weight: 600; }
.woocommerce-tabs table.shop_attributes td p { margin: 0; }

.related > h2, .upsells > h2 { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 22px; }
.sec--single div.product > :is(.related, .upsells) { margin-top: 0; }

/* Reviews */
#reviews .commentlist { display: grid; gap: 16px; }
#reviews .commentlist li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
#reviews .comment_container { display: flex; gap: 14px; }
#reviews img.avatar { width: 44px; height: 44px; border-radius: 999px; border: 0; position: static; padding: 0; }
#reviews .woocommerce-review__author { font-weight: 700; }
#reviews .woocommerce-review__published-date { color: var(--muted-2); font-size: 13px; }
#reviews .woocommerce-review__verified { color: var(--leaf); font-weight: 600; font-size: 13px; }
#review_form_wrapper { margin-top: 26px; padding: 22px; background: var(--surface); border-radius: var(--radius); }
/* The "verified buyers only" notice WooCommerce shows in place of the review form. */
p.woocommerce-verification-required {
	margin-top: 26px; padding: 16px 20px;
	background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--radius);
	color: var(--ink-2); font-size: 14.5px;
}

.shh-wholesale-cta {
	display: flex; flex-wrap: wrap; gap: 6px;
	margin: -8px 0 18px; padding: 11px 15px;
	background: var(--leaf-soft); border: 1px solid color-mix(in srgb, var(--leaf) 22%, white);
	border-radius: var(--radius-sm);
	font-size: 14px; color: var(--ink-2);
}
.shh-wholesale-cta a { color: var(--leaf); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.shh-cart-login {
	margin-top: 14px; padding: 13px 16px;
	background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--radius-sm);
	font-size: 14.5px;
}
.shh-cart-login a { color: var(--brand); font-weight: 700; }

/* The wholesale-account request block on the registration page. */
.shh-wholesale-optin { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.shh-business { margin-top: 10px; padding: 16px; background: var(--surface); border-radius: var(--radius-sm); }
/* Business details pair up in columns. Stacked full width they made one very long column, so the
   short ones pair up two per row and only the ones that genuinely need the width — the address
   textarea and the intro note — span both. The class comes from the field type, so adding a
   field to Config::business_fields() lands in the right place without touching this rule.

   :not([hidden]) is load-bearing. The panel is shown and hidden through the `hidden` attribute,
   and `display: grid` on the bare class beats the browser's own `[hidden] { display: none }` —
   so the eight fields stayed on screen, ~950px of them, for every visitor who never asked to
   register a shop. Scoping the layout to the visible state lets the attribute do its job again,
   which also takes the fields back out of the tab order. */
.shh-business:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 0 18px; }
.shh-business__note,
.shh-business > h3,
.shh-business .shh-field--textarea { grid-column: 1 / -1; }
@media (max-width: 640px) {
	.shh-business:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
}
.shh-business__note { margin-bottom: 14px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.shh-business__note strong { color: var(--ink-2); }

/* ── 8. Cart / checkout / account ─────────────────────────── */
.shh-tax-invoice { margin-top: 22px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.woocommerce form .shh-tax-invoice .form-row[hidden] { display: none; }
.woocommerce form .shh-tax-invoice label.checkbox { display: inline-flex; align-items: center; gap: 9px; }
.woocommerce form .shh-tax-invoice input[type="checkbox"] { display: inline-grid; margin: 0; }
.woocommerce form .shh-tax-invoice .woocommerce-input-wrapper .description { display: block; margin-top: 7px; padding: 0; background: transparent; font-size: 13px; color: var(--muted); }
.woocommerce form .shh-tax-invoice .description::before { display: none; }
/* WooCommerce ships these notices with a thick coloured stripe down the left edge. It reads as a
   leftover from another design here, so the whole box carries the colour instead: a tinted border
   all the way round plus a matching background. Same three states, no stripe. */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice {
	display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
	padding: 14px 18px; margin: 0 0 22px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface); color: var(--ink-2);
	list-style: none;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: none; }
.woocommerce-message { border-color: var(--leaf-line); background: var(--leaf-soft); }
.woocommerce-error { border-color: var(--brand-line); background: var(--brand-soft); }
/* Woo prints the action button as the FIRST child of a notice, so `margin-left:auto` on it
   absorbed all the free space on its left and the whole notice looked indented. Reorder it to
   the end instead, and size it down — a notice button should not read louder than the notice. */
/* The generic Woo button block further down this file matches at the same specificity and wins on
   source order, so these carry an extra :is() to outrank it. */
:is(.woocommerce, .woocommerce-page, body) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) :is(a, button, input).button {
	order: 2; margin-left: auto;
	min-height: 0; height: auto;
	padding: 9px 16px; font-size: 14px; line-height: 1.2;
}

/* Cart and checkout use the classic shortcodes, not the blocks. (The block cart makes the §12
   field changes hard, and its Thai strings would have to be translated across four layers.)
   .wc-page is just an empty box; unlike .prose it imposes no width limit. */
.wc-page > * + * { margin-top: 22px; }

/* Every rule in this block has to out-count Woo on specificity — see trap 1 in the README.
   Woo uses `.woocommerce table.shop_table` (0,2,1) and `.woocommerce table.shop_table td` (0,2,2). */
:is(.woocommerce, .woocommerce-page) table.shop_table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	margin: 0 0 24px;
}
:is(.woocommerce, .woocommerce-page) table.shop_table th,
:is(.woocommerce, .woocommerce-page) table.shop_table td {
	padding: 14px 16px;
	border: 0;
	border-bottom: 1px solid var(--line-soft);
	text-align: left;
	font-size: 14.5px;
	vertical-align: middle;
}
:is(.woocommerce, .woocommerce-page) table.shop_table thead th {
	background: var(--surface); font-weight: 600; font-size: 13.5px; color: var(--ink-2);
}
/* Woo forces `.woocommerce table.shop_table img{width:32px}` (0,2,2), leaving cart thumbnails
   tiny. Reaching td.product-thumbnail img gets (0,2,3). */
:is(.woocommerce, .woocommerce-page) table.shop_table td.product-thumbnail img {
	width: 64px; height: 64px; object-fit: contain;
	border: 1px solid var(--line-soft); border-radius: 8px;
}

/* Column widths are pinned here; otherwise the product name eats the space and crushes every
   other column, and the leftmost cell (the remove button) stays stuck as a large empty gap. */
:is(.woocommerce, .woocommerce-page) table.shop_table.cart { table-layout: fixed; }
.shop_table.cart th.product-remove, .shop_table.cart td.product-remove { width: 56px; }
.shop_table.cart th.product-thumbnail, .shop_table.cart td.product-thumbnail { width: 92px; }
.shop_table.cart th.product-price, .shop_table.cart td.product-price { width: 120px; }
.shop_table.cart th.product-quantity, .shop_table.cart td.product-quantity { width: 118px; }
.shop_table.cart th.product-subtotal, .shop_table.cart td.product-subtotal { width: 130px; text-align: right; }
.shop_table.cart td.product-name { word-break: break-word; }
.shop_table .product-name a { font-weight: 600; }
.shop_table .product-remove a.remove {
	display: grid; place-items: center; width: 28px; height: 28px;
	border-radius: 999px; background: var(--surface-2); color: var(--ink);
	font-size: 18px; line-height: 1;
}
.shop_table .product-remove a.remove:hover { background: var(--brand); color: #fff; }
/* The bottom row of the cart table: coupon on the left, "update cart" on the right.
   Woo floats .coupon left and leaves the update button loose in the cell, which collapses
   the moment the cell is anything but a plain table-cell — so the float is dropped and the
   whole row is laid out as one flex line instead. */
/* Do NOT put display:flex on this <td>. A table cell that becomes a flex container drops out
   of the table layout algorithm, so its colspan="6" stops applying and the cell shrink-wraps —
   measured at 56px wide inside a 1248px table. It has to stay a table-cell; the two halves are
   placed with a float instead, which is what the table model supports. */
.shop_table td.actions {
	background: var(--surface);
	display: table-cell;
	text-align: right;
	vertical-align: middle;
}
.shop_table td.actions::after { content: ""; display: table; clear: both; }
.shop_table td.actions .coupon { display: flex; gap: 8px; float: left; width: auto; margin: 0; }
.shop_table td.actions .coupon input#coupon_code { width: auto; min-width: 190px; }
/* Both buttons keep their label on one line — "ปรับปรุงตะกร้า" was wrapping to two. */
.shop_table td.actions :is(button, input[type="submit"]) { white-space: nowrap; }
/* Woo disables "update cart" until a quantity actually changes. Its default styling for that
   state is the enabled colour at 50% opacity, which left dark text on mid-orange — unreadable.
   A flat neutral reads as disabled without the contrast problem. */
.shop_table td.actions button[name="update_cart"]:disabled,
.shop_table td.actions button[name="update_cart"][disabled] {
	background: var(--surface-2);
	color: var(--muted);
	opacity: 1;
	cursor: not-allowed;
}
.shop_table .quantity input.qty {
	width: 84px; padding: 0 8px; text-align: center;
	border: 1px solid var(--line); border-radius: var(--radius-sm);
}

/* Woo: `.woocommerce .cart-collaterals .cart_totals{float:right;width:48%}` = (0,3,0)
   Adding div. reaches (0,3,1); without it the totals box floats right and shrinks to 201px. */
.cart-collaterals { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 28px; }
:is(.woocommerce, .woocommerce-page) .cart-collaterals div.cart_totals,
:is(.woocommerce, .woocommerce-page) .cart-collaterals div.cross-sells {
	float: none;
	width: auto;
}
.cart-collaterals .cart_totals { grid-column: 2; }

/* Cart page as two columns: the item list on the left, the totals card top-right.
   Woo emits the cart form and .cart-collaterals as siblings stacked vertically; making their
   shared parent a grid is enough to place them side by side without forking cart.php.
   Notices span the full width, then auto-placement drops the form and the card into the same
   row — form pinned to column 1, card to column 2. */
.woocommerce-cart .wc-page > .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 370px);
	gap: 28px;
	align-items: start;
}
.woocommerce-cart .wc-page > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart .woocommerce-cart-form { grid-column: 1; }
.woocommerce-cart .cart-collaterals {
	grid-column: 2;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 0;
	position: sticky;
	top: calc(var(--admin-offset) + 16px);
}
.woocommerce-cart .cart-collaterals .cart_totals { grid-column: 1; }

/* Empty cart spans the populated cart's two-column grid as one centred card. */
.woocommerce-cart .shh-empty-cart {
	grid-column: 1 / -1;
	display: flex; flex-direction: column; align-items: center;
	width: 100%; padding: clamp(32px, 5vw, 64px) 24px;
	border: 1px solid var(--line); border-radius: 20px;
	background: linear-gradient(180deg, #f1faf4, #fff 85%);
	text-align: center;
}
.shh-empty-cart__icon {
	display: grid; place-items: center; flex: none;
	width: 88px; height: 88px; margin-bottom: 24px;
	border: 1px solid #cce7d6; border-radius: 50%;
	background: #e3f4e9; color: var(--forest);
}
.woocommerce .shh-empty-cart .cart-empty {
	margin: 0; padding: 0; border: 0; background: transparent;
	color: var(--forest); font-size: clamp(22px, 3vw, 28px);
	font-weight: 700; line-height: 1.5;
}
.shh-empty-cart__description {
	max-width: 38ch; margin: 12px 0 0;
	color: var(--ink-2); font-size: 16px; line-height: 1.8;
}
.shh-empty-cart .return-to-shop { margin: 28px 0 0; }
:is(.woocommerce, .woocommerce-page) .shh-empty-cart a.button.wc-backward {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 48px; padding: 12px 28px; border-radius: 10px;
	background: var(--accent-button); border-color: var(--accent-button);
	color: #fff; font-size: 16px; line-height: 1.5;
}
:is(.woocommerce, .woocommerce-page) .shh-empty-cart a.button.wc-backward:hover {
	background: var(--accent-hover); border-color: var(--accent-hover); color: #fff;
}
.shh-empty-cart a.button:focus-visible { outline: 3px solid var(--forest); outline-offset: 4px; }
/* Third home for the ghost-cell trap (see ul.products and .col2-set above). Woo's clearfix
   pseudo-elements each take a grid row here, and with a 28px gap between rows the totals card
   was pushed 28px below the top of the item table instead of lining up with it.
   The giveaway is grid-template-rows computing to "0px <card> 0px". */
:is(.woocommerce, .woocommerce-page) .cart-collaterals::before,
:is(.woocommerce, .woocommerce-page) .cart-collaterals::after { content: none; display: none; }

/* Coupon field, now living inside the totals card (see shh_cart_coupon_form). */
.shh-coupon { display: grid; gap: 8px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.shh-coupon__label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.shh-coupon__row { display: flex; gap: 8px; }
.shh-coupon__row input { flex: 1 1 auto; min-width: 0; }
.shh-coupon__row .btn { flex: none; min-height: var(--control-h); white-space: nowrap; }
.cart_totals h2 { font-size: 19px; margin-bottom: 14px; }
:is(.woocommerce, .woocommerce-page) .cart_totals table.shop_table { margin: 0; }
.cart_totals .order-total td { font-size: 20px; font-weight: 700; color: var(--brand); }
.cart_totals .woocommerce-shipping-destination { font-size: 13px; color: var(--muted); }
.wc-proceed-to-checkout { margin-top: 16px; }
:is(.woocommerce, .woocommerce-page) .wc-proceed-to-checkout a.checkout-button { width: 100%; padding: 15px 24px; font-size: 16px; }

/* Woo: `.woocommerce .col2-set .col-1{float:left;width:48%}` = (0,3,0) → adding div. reaches (0,3,1).
   This has to cover checkout as well as the login/registration page.
   (Woo reuses the same .col2-set in both; scoping it to checkout alone leaves the login and
   registration forms stacked full width.) */
/* Woo's ::before/::after clearfix becomes a ghost cell in a grid, exactly as with ul.products.
   Left on, the forms get pushed into columns 2–3 and a gap opens on the left. */
:is(.woocommerce, .woocommerce-page) .col2-set::before,
:is(.woocommerce, .woocommerce-page) .col2-set::after,
:is(.woocommerce, .woocommerce-page) .u-columns::before,
:is(.woocommerce, .woocommerce-page) .u-columns::after { content: none; display: none; }

:is(.woocommerce, .woocommerce-page) .col2-set,
#customer_login.col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	align-items: start;
}
/* Login asks for two fields, registration for ten. An even split left the registration side
   cramped while half the login side sat empty, so the space is handed to the column that needs it. */
#customer_login.col2-set { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
@media (max-width: 860px) {
	:is(.woocommerce, .woocommerce-page) .col2-set,
	#customer_login.col2-set { grid-template-columns: minmax(0, 1fr); }
}
:is(.woocommerce, .woocommerce-page) .col2-set div.col-1,
:is(.woocommerce, .woocommerce-page) .col2-set div.col-2,
:is(.woocommerce, .woocommerce-page) .col2-set div.u-column1,
:is(.woocommerce, .woocommerce-page) .col2-set div.u-column2 { width: auto; float: none; }
#order_review_heading { margin-top: 34px; font-size: 19px; }
.woocommerce-checkout-review-order {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	padding: 20px; margin-top: 14px;
}
.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; border: 0; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td { padding: 11px 4px; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; text-align: left; }
.woocommerce-checkout-review-order-table .order-total td { font-size: 20px; font-weight: 700; color: var(--brand); }
#payment { background: transparent; border-radius: 0; margin-top: 18px; }
#payment ul.payment_methods { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: #fff; }
#payment div.form-row { padding: 16px 0 0; }
#payment .place-order button.button { width: 100%; }

/* All forms */
.form-row { display: grid; gap: 7px; margin: 0 0 18px; padding: 0; }
.form-row label { font-weight: 600; font-size: 14px; color: var(--ink-2); }

/* Woo ships `.woocommerce form .form-row { padding: 3px; margin: 0 0 6px }` at (0,3,0), which
   beat the rule above — so 46px-tall fields sat 6px apart with their labels 6px away, giving
   the form no rhythm at all: one flat block of identical gaps. Matching that specificity and
   declaring later restores a readable label/field/row hierarchy. */
:is(.woocommerce, .woocommerce-page) form .form-row {
	display: grid;
	gap: 7px;
	margin: 0 0 18px;
	padding: 0;
}
:is(.woocommerce, .woocommerce-page) form .form-row:last-child { margin-bottom: 0; }
/* Breathing room between field groups (billing / shipping / order notes). */
:is(.woocommerce, .woocommerce-page) :is(.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields) h3 {
	margin: 32px 0 16px;
}
:is(.woocommerce, .woocommerce-page) :is(.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields):first-child > h3:first-child { margin-top: 0; }
.form-row .required { color: var(--brand); text-decoration: none; }
:is(.form-row, .woocommerce-form-row, .shh-field) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], textarea, select) {
	width: 100%;
	min-height: var(--control-h);
	padding: 0 var(--control-px);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: #fff;
	font-size: var(--control-fs);
	transition: border-color .16s, box-shadow .16s;
}
:is(.form-row, .woocommerce-form-row, .shh-field) textarea { padding: 12px var(--control-px); }
:is(.form-row, .woocommerce-form-row, .shh-field) :is(input, textarea, select):focus {
	outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft);
}

/* The address screens (edit-address, and the address block on checkout) read better as one
   stacked column: WooCommerce pairs first/last name side by side and leaves everything else full
   width, which looked like a mistake rather than a layout. One column, one field per line. */
.woocommerce-account .woocommerce-address-fields .form-row,
.woocommerce-account .woocommerce-MyAccount-content form .form-row {
	float: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* Checkout and address forms carry WooCommerce's own field styling at (0,3,2) —
   `.woocommerce form .form-row input.input-text` — which outranks everything above and was
   painting a dark red-brown border (rgba(32,7,7,.8)) with a 4px radius. Matching that
   specificity exactly is enough, because this stylesheet is enqueued after Woo's (priority 20),
   so an equal-weight rule declared later wins. */
:is(.woocommerce, .woocommerce-page) form .form-row input.input-text,
:is(.woocommerce, .woocommerce-page) form .form-row textarea.input-text,
:is(.woocommerce, .woocommerce-page) form .form-row textarea,
:is(.woocommerce, .woocommerce-page) form .form-row select,
:is(.woocommerce, .woocommerce-page) .woocommerce-address-fields input.input-text,
:is(.woocommerce, .woocommerce-page) .woocommerce-billing-fields input.input-text,
:is(.woocommerce, .woocommerce-page) .woocommerce-shipping-fields input.input-text {
	min-height: var(--control-h);
	padding: 0 var(--control-px);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--ink);
	font-size: var(--control-fs);
	line-height: 1.4;
	box-shadow: none;
}
:is(.woocommerce, .woocommerce-page) form .form-row textarea,
:is(.woocommerce, .woocommerce-page) form .form-row textarea.input-text {
	min-height: 110px;
	padding: 12px var(--control-px);
}
/* The country select survives with a single option once selling is limited to Thailand, and
   Woo does not style it — it was the one control left on browser defaults (16px, UA border).
   Selected by id so it cannot drift back to the default look. */
:is(.woocommerce, .woocommerce-page) form .form-row select#billing_country,
:is(.woocommerce, .woocommerce-page) form .form-row select#shipping_country,
:is(.woocommerce, .woocommerce-page) form .form-row select.country_select,
:is(.woocommerce, .woocommerce-page) form .form-row select.state_select {
	min-height: var(--control-h);
	/* Longhands, not `padding:` and `background:`. The shorthands reset padding-right and
	   background-image, which wiped the dropdown arrow set on `select` above and let the text
	   run under where the arrow should be. This rule carries an id, so it wins everything —
	   it must not clobber properties it does not mean to set. */
	padding-block: 0;
	padding-left: var(--control-px);
	/* The arrow is repeated here rather than inherited from `select` above, because this rule
	   carries an id and several WooCommerce rules in between set padding/background on the same
	   element. Declaring it at the winning specificity is the only way it survives. */
	padding-right: 38px;
	width: 100%;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background-color: #fff;
	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='%2364748b' 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 12px center;
	background-size: 16px;
	font-size: var(--control-fs);
}

:is(.woocommerce, .woocommerce-page) form .form-row :is(input.input-text, textarea, select):focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 4px var(--brand-soft);
}
/* SelectWoo (Woo's bundled select2) for country and province.
   Only the closed box was themed before, so opening it dropped the browser straight back to
   select2's own stylesheet — square panel, blue highlight, a search field with its own margins.
   The panel is portalled to <body>, so none of these can be nested under .woocommerce. */
/* select2 puts 7.5px of vertical padding on the label and expects a fixed line-height to cancel
   it out. The two stack instead: a 59px line box inside a 46px control, so the text sat 7.5px
   below centre. Centre it with flex and let the label be an ordinary single line. */
.select2-container--default .select2-selection--single {
	display: flex; align-items: center;
	height: var(--control-h); border: 1px solid var(--line); border-radius: var(--radius-sm);
	font-size: var(--control-fs); background: #fff;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	flex: 1 1 auto; min-width: 0;
	line-height: 1.4; padding-top: 0; padding-bottom: 0;
	padding-left: var(--control-px); padding-right: 34px;
	font-size: var(--control-fs); color: var(--ink);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: calc(var(--control-h) - 2px); right: 10px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted); }

/* Open: the box and the panel read as one piece, so the seam between them is flattened. */
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft);
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
	border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
	border-top-left-radius: 0; border-top-right-radius: 0;
}

.select2-container--default .select2-dropdown {
	border: 1px solid var(--brand); border-radius: var(--radius-sm);
	box-shadow: var(--shadow-2); overflow: hidden; background: #fff;
}
.select2-container--default .select2-dropdown--below { border-top-color: var(--line); border-top-left-radius: 0; border-top-right-radius: 0; }
.select2-container--default .select2-dropdown--above { border-bottom-color: var(--line); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.select2-container--default .select2-search--dropdown { padding: 8px; border-bottom: 1px solid var(--line-soft); }
.select2-container--default .select2-search--dropdown .select2-search__field {
	min-height: 38px; padding: 0 12px;
	border: 1px solid var(--line); border-radius: var(--radius-sm);
	font-size: var(--control-fs); font-family: inherit;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}

.select2-container--default .select2-results > .select2-results__options { max-height: 280px; }
.select2-container--default .select2-results__option {
	padding: 9px var(--control-px); font-size: var(--control-fs); color: var(--ink-2);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--brand-soft); color: var(--ink);
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--brand); color: #fff; font-weight: 600;
}

/* Stock Woo buttons that we do not add our own classes to. */
:is(.woocommerce, .woocommerce-page) a.button,
:is(.woocommerce, .woocommerce-page) button.button,
:is(.woocommerce, .woocommerce-page) input.button,
:is(.woocommerce, .woocommerce-page) button.button.alt,
:is(.woocommerce, .woocommerce-page) a.button.alt {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 22px;
	background: var(--brand); color: #fff;
	border: 1px solid transparent; border-radius: var(--radius-sm);
	font-weight: 600; font-size: 15px; line-height: 1.2;
	text-shadow: none; box-shadow: none;
	transition: background-color .16s;
}
:is(.woocommerce, .woocommerce-page) :is(a, button, input).button:hover { background: var(--brand-hover); color: #fff; }
:is(.woocommerce, .woocommerce-page) a.button.wc-backward { background: #fff; color: var(--ink); border-color: var(--line); }
:is(.woocommerce, .woocommerce-page) a.button.wc-backward:hover { background: var(--surface); color: var(--ink); }

/* My account — logged out there is no left menu, so an unconditional 2-column layout squeezes the form. */
/* Woo: `.woocommerce-account .woocommerce-MyAccount-navigation{float:left;width:30%}` = (0,2,0)
   Adding nav./div. reaches (0,2,1); without it the left menu floats over the grid content.
   And when logged out there is no left menu at all, so a hardcoded 2-column layout would crush
   the login form to 250px. Hence the :has() check before splitting into columns. */
.woocommerce-account .woocommerce { display: grid; gap: 32px; }
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
.woocommerce-account nav.woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; float: none; width: auto; }
.woocommerce-account div.woocommerce-MyAccount-content { grid-column: 2; grid-row: 1; float: none; width: auto; }
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) div.woocommerce-MyAccount-content { grid-column: 1; }
.woocommerce-MyAccount-navigation ul { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); font-weight: 500; font-size: 14.5px; }
.woocommerce-MyAccount-navigation li:last-child a { border-bottom: 0; }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--brand-soft); color: var(--brand); font-weight: 700; }

/* The saved-addresses screen was the one account page with no theme styling at all: WooCommerce
   prints two bare <address> blocks, so they read as loose text beside the white cards used
   everywhere else on the site. Same card treatment as the totals box and the account menu. */
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account .u-columns.woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}
.woocommerce-account .woocommerce-Address {
	display: grid;
	gap: 10px;
	align-content: start;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	width: auto;
	float: none;
}
.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line-soft);
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 { font-size: 16px; margin: 0; }
.woocommerce-account .woocommerce-Address-title .edit {
	flex: none; font-size: 14px; font-weight: 600; color: var(--brand);
}
.woocommerce-account .woocommerce-Address address {
	font-style: normal; line-height: 1.75; color: var(--ink-2); font-size: 14.5px;
}
/* An address that has never been filled in prints a single line; keep it from looking broken. */
.woocommerce-account .woocommerce-Address address:empty::before { content: "ยังไม่ได้บันทึกที่อยู่"; color: var(--muted); }

/* Login / registration page */
.shh-auth { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; align-items: start; }
.shh-auth-card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
}
/* The wrapper around the login and registration forms is a layout grid, not a card. Styling it
   as one wrapped a white 26px-padded box around two more white 26px-padded boxes, and the
   business-details panel added a third — fields ended up ~509px wide inside a 1248px page. */
.woocommerce-account:not(.logged-in) .woocommerce > .u-columns {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}
.woocommerce-form-login, .woocommerce-form-register {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; margin: 0;
}
.woocommerce-form-login h2, .woocommerce-form-register h2 { font-size: 20px; margin-bottom: 6px; }
/* WooCommerce ships `.woocommerce form .form-row label { display: block }` at (0,3,0), which
   outranks both the shared control layer and a plain class here — the checkbox and its text
   ended up on separate lines. And the old `… input { width: auto }` below collapsed the box to
   16px wide against its own 20px height. Both need selectors that actually outrank Woo's. */
:is(.woocommerce, .woocommerce-page) form label.woocommerce-form__label-for-checkbox,
:is(.woocommerce, .woocommerce-page) form .form-row label:has(> input[type="checkbox"]),
label.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 500;
}
/* Square again. `width: auto` on an appearance:none control resolves from content, not the
   declared size, so height and width disagreed. */
:is(.woocommerce, .woocommerce-page) form :is(input[type="checkbox"], input[type="radio"]),
label.woocommerce-form__label-for-checkbox input[type="checkbox"] {
	width: 20px;
	height: 20px;
	flex: none;
}
.woocommerce-form-login__rememberme { margin-right: auto; }

/* ── Payment slip (แจ้งชำระเงิน) ──────────────────────────────
   Reuses the shared control layer, so the fields here match every other form on the site. */
.shh-slip-prompt {
	display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
	margin-top: 24px; padding: 18px 20px;
	background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--radius);
}
.shh-slip-prompt__text { display: grid; gap: 3px; }
.shh-slip-prompt__text strong { font-size: 15.5px; color: var(--ink); }
.shh-slip-prompt__text span { font-size: 14px; color: var(--muted); }

.shh-slip { display: grid; gap: 22px; max-width: 640px; }
.shh-slip__head h2 { font-size: 22px; margin-bottom: 6px; }
.shh-slip__head p { color: var(--muted); font-size: 14.5px; }

.shh-slip__bank,
.shh-slip__current {
	padding: 16px 18px; background: var(--surface); border-radius: var(--radius-sm);
}
.shh-slip__bank h3,
.shh-slip__current h3 { font-size: 15px; margin-bottom: 10px; }
.shh-slip__bank ul { display: grid; gap: 10px; }
.shh-slip__bank li { display: grid; gap: 2px; font-size: 14.5px; }
.shh-slip__bankname { font-weight: 600; color: var(--ink); }
.shh-slip__accno { font-size: 18px; font-weight: 700; letter-spacing: .04em; color: var(--brand); }
.shh-slip__meta { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.shh-slip__view { font-weight: 600; color: var(--brand); }

.shh-slip__hint { font-size: 13px; color: var(--muted); }
/* Two short fields side by side; the file input above stays full width. */
.shh-slip__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.shh-slip__form input[type="file"] {
	min-height: var(--control-h); padding: 9px var(--control-px);
	border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
	background: #fff; width: 100%; cursor: pointer;
}
.shh-slip__done { padding: 14px 16px; background: var(--surface); border-radius: var(--radius-sm); color: var(--muted); }

@media (max-width: 640px) {
	.shh-slip__grid { grid-template-columns: minmax(0, 1fr); }
	.shh-slip-prompt { flex-direction: column; align-items: stretch; }
}

/* ── 9. Pages / posts / search results ────────────────────── */
.page-article__cover { margin: 0 0 26px; border-radius: var(--radius); overflow: hidden; }
.page-article__body { padding-bottom: clamp(48px, 6vw, 80px); }
.page-article__body > .prose + .prose { margin-top: 32px; }
.prose { display: flow-root; font-size: 16.5px; line-height: 1.85; color: var(--ink-2); overflow-wrap: anywhere; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(22px, 2.4vw, 26px); line-height: 1.5; margin-top: 1.6em; color: var(--ink); }
.prose h3 { font-size: 19px; line-height: 1.5; margin-top: 1.5em; color: var(--ink); }
.prose > :first-child { margin-top: 0; }
.prose > :is(h2, h3, h4) + * { margin-top: 16px; }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: var(--radius); }
.prose blockquote { border-left: 3px solid var(--brand); padding-left: 18px; color: var(--muted); font-style: italic; }
.prose table { width: 100%; border-collapse: collapse; }
.prose :is(th, td) { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.prose th { background: var(--surface); }

.postgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--gap); }
.shh-journal-head {
	padding-block: clamp(36px, 5vw, 64px);
	background: radial-gradient(ellipse at 50% 0, #def3e6, transparent 75%), #f6faf7;
	border-bottom: 1px solid var(--line);
	text-align: center;
}
.shh-journal-head__inner { max-width: 840px; }
.shh-journal-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 14px; border: 1px solid #cce5d5; border-radius: 999px;
	background: rgb(255 255 255 / .8); color: var(--brand); font-size: 13px; font-weight: 600;
}
.shh-journal-head .pagehead__title { margin-top: 18px; font-size: clamp(36px, 4.5vw, 52px); line-height: 1.3; }
.shh-journal-head .pagehead__desc { margin: 14px auto 0; font-size: 16px; line-height: 1.85; }
.shh-journal-search {
	display: flex; align-items: center; gap: 12px; max-width: 620px;
	margin: 28px auto 0; padding: 7px 7px 7px 18px;
	border: 1px solid #c7ddcf; border-radius: 14px; background: #fff;
	box-shadow: 0 6px 20px rgb(var(--ink-rgb) / .05); text-align: left;
}
.shh-journal-search > .icon { flex: none; color: var(--muted); }
.shh-journal-search input[type="search"] { flex: 1; width: 0; min-width: 0; padding-inline: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 16px; }
.shh-journal-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--leaf-soft); }
.shh-journal-search .btn { flex: none; min-height: 46px; padding-inline: 24px; border-radius: 9px; background: var(--accent-button); border-color: var(--accent-button); }
.shh-journal-search .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.shh-journal-content { max-width: 1160px; padding-block: 40px 24px; }
.shh-journal-section-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.shh-journal-section-head h2 { font-size: clamp(21px, 2.4vw, 26px); }
.shh-journal-section-head > span { color: var(--muted); font-size: 14px; white-space: nowrap; }
.postgrid.shh-journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.shh-journal-grid .pcard { border-radius: 18px; box-shadow: 0 4px 16px rgb(var(--ink-rgb) / .035); transition: box-shadow .2s, border-color .2s; }
.shh-journal-grid .pcard:hover, .shh-journal-grid .pcard:focus-within { border-color: #9cc9aa; box-shadow: 0 10px 28px rgb(var(--ink-rgb) / .08); }
.shh-journal-grid .pcard__media { aspect-ratio: 16 / 9; }
.shh-journal-grid .pcard__body { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 30px; }
.shh-journal-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.shh-journal-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--leaf-soft); color: var(--brand); }
.shh-journal-grid .pcard__date { font-size: 13px; }
.shh-journal-grid .pcard__title { font-size: clamp(21px, 2vw, 24px); line-height: 1.55; }
.shh-journal-grid .pcard__ex { font-size: 16px; line-height: 1.85; padding-bottom: 12px; }
.shh-journal-read { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding-top: 16px; margin-top: auto; border-top: 1px solid var(--line-soft); color: var(--accent); font-size: 15px; font-weight: 600; }
.shh-journal-read__arrow { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); }
.shh-journal-read:hover { color: var(--accent-hover); }
@media (max-width: 640px) {
	.shh-journal-head .pagehead__desc { font-size: 14px; }
	.shh-journal-search { gap: 8px; padding-left: 12px; }
	.shh-journal-search .btn { padding-inline: 16px; }
	.shh-journal-search > .icon { width: 18px; }
	.shh-journal-content { padding-top: 30px; }
	.postgrid.shh-journal-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.shh-journal-grid .pcard__body { padding: 24px; }
}
.shh-article-nav { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.shh-article-nav .nav-links { display: flex; flex-wrap: wrap; gap: 16px; }
.shh-review-avatar { color: var(--muted-2); background: var(--surface-2); border-radius: 50%; padding: 4px; }
.shh-product-options { margin: 20px 0; }
.shh-product-options__label { font-weight: 600; margin: 0 0 10px; }
.shh-product-options__items { display: flex; flex-wrap: wrap; gap: 10px; }
.shh-product-option { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 18px; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; }
.shh-product-option.is-current, .shh-product-option:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--forest); }
.shh-product-option.is-current { box-shadow: inset 0 0 0 1px var(--brand); font-weight: 700; }
.shh-product-option small { font-size: 12px; color: var(--muted); }
.pcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.pcard__media { aspect-ratio: 16 / 10; background: var(--surface); display: block; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; }
.pcard__ph { display: block; width: 100%; height: 100%; background: var(--surface-2); }
.pcard__body { padding: 18px; display: grid; gap: 6px; }
.pcard__date { font-size: 12.5px; color: var(--muted-2); }
.pcard__title { font-size: 17px; }
.pcard__ex { color: var(--muted); font-size: 14.5px; }

.resultlist { display: grid; gap: 18px; }
.result { padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.result__title { font-size: 18px; }
.result__ex { color: var(--muted); margin-top: 6px; }

.pagination .nav-links, .pager .nav-links { display: flex; gap: 6px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.pagination :is(a, span).page-numbers, .nav-links :is(a, span).page-numbers {
	display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 14px;
	border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font-weight: 600; font-size: 14.5px;
}
.nav-links span.current { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ── 10. Footer ───────────────────────────────────────────── */
.site-foot { background: var(--forest); color: rgb(255 255 255 / .78); margin-top: 64px; }
.site-foot__grid {
	display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(160px, 1fr));
	gap: 40px; padding-block: 52px;
}
.site-foot__name { display: block; color: #fff; font-size: 17px; margin-top: 12px; }
.site-foot__about { margin-top: 10px; font-size: 14.5px; max-width: 44ch; }
.site-foot__contact { margin-top: 18px; display: grid; gap: 8px; font-size: 14.5px; }
.site-foot__contact li { display: flex; align-items: flex-start; gap: 9px; }
.site-foot__contact a { color: #fff; }
.site-foot__contact a:hover { color: #ffb865; }
.site-foot__social { display: flex; gap: 10px; margin-top: 20px; }
.site-foot__social a {
	display: grid; place-items: center; width: 40px; height: 40px;
	border: 1px solid rgb(255 255 255 / .2); border-radius: 999px; color: #fff;
	transition: background-color .16s, border-color .16s;
}
.site-foot__social a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Cut-out details inside a brand mark (the letters in the LINE bubble, the fold on the Lazada
   bag). They have to match the surface behind the mark, not the mark's own colour — white on
   white made the LINE logo a featureless blob in the footer.
   Each surface that shows a mark declares the colour sitting behind it. */
.mark__knockout { fill: var(--mark-knockout, #fff); }
.topbar,
.site-foot { --mark-knockout: var(--forest); }
.site-foot__social a:hover { --mark-knockout: var(--brand); }
/* No override for .b2b: that panel is white, so the default white knockout is already right. */
.btn--line, a.btn--line { --mark-knockout: #06c755; }
.btn--line:hover, a.btn--line:hover { --mark-knockout: #05a648; }
.site-foot__coltitle { color: #fff; font-size: 15px; margin-bottom: 14px; }
.site-foot__list { display: grid; gap: 9px; font-size: 14.5px; }
.site-foot__list a:hover { color: #ffb865; }
.site-foot__bar { border-top: 1px solid rgb(255 255 255 / .12); }
.site-foot__barin { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 18px; font-size: 13.5px; }

/* Icon only — a round button, no label. The accessible name comes from the .sr-only span in
   footer.php, so screen readers still announce it. */
.floatline {
	position: fixed; right: 20px; bottom: 20px; z-index: 90;
	opacity: 1; visibility: visible;
	display: flex; flex-direction: column; gap: 10px;
	transition: transform .16s, opacity .16s, visibility .16s;
}
.floatline__btn {
	display: grid; place-items: center;
	width: 48px; height: 48px;
	border-radius: 999px;
	color: #fff;
	box-shadow: var(--shadow-3);
	transition: transform .16s, filter .16s;
}
.floatline__btn:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.08); }

/* Each channel keeps its own brand colour so it is recognisable at a glance without a label.
   --mark-knockout is the colour BEHIND the mark, used by the cut-out paths inside the SVG
   (the letters in the LINE bubble, the bolt in the Messenger circle, the YouTube play triangle).
   Set it per button or those cut-outs vanish into the mark. */
.floatline__btn--line      { background: #06c755; --mark-knockout: #06c755; }
.floatline__btn--phone     { background: var(--brand); }
.floatline__btn--messenger { background: #0084ff; --mark-knockout: #0084ff; }
.floatline__btn--youtube   { background: #ff0000; --mark-knockout: #ff0000; }
.floatline__btn--tiktok    { background: #010101; }

/* The white control rotates from a plus when closed to an X when open. */
.floatline__toggle {
	display: grid; place-items: center;
	width: 48px; height: 48px;
	border: 1px solid var(--line); border-radius: 999px;
	background: #fff; color: var(--ink);
	box-shadow: var(--shadow-3);
	cursor: pointer;
	transition: transform .16s, background-color .16s;
}
.floatline__toggle[hidden] { display: none; }
.floatline__toggle:hover { background: var(--surface-2); }
.floatline__toggle .icon { transform: rotate(-45deg); transition: transform .25s ease; stroke-width: 2.5; }
.floatline__toggle[aria-expanded="true"] .icon { transform: rotate(90deg); }

/* Hidden by default so the page is usable with JavaScript off too — without the script the
   toggle never appears, and these stay put. `[hidden]` would lose to the grid display above,
   so the collapse is driven by a class on the container instead. */
.floatline.is-collapsed .floatline__btn--more {
	display: none;
}

/* A stack this tall runs out of room on a short screen before it runs out of channels. */
@media (max-height: 620px) {
	.floatline { gap: 7px; }
	.floatline__btn, .floatline__toggle { width: 40px; height: 40px; }
	.floatline__btn .icon { width: 20px; height: 20px; }
}

/* The button is fixed to the bottom-right corner, which is also where a full-width form control
   ends up once the page is scrolled so that control sits at the bottom of the screen. On a phone
   it covered a 35×46px bite out of the filter's own search button. Adding padding to the end of
   the page does not help — the collision happens mid-scroll, wherever the user currently is.
   So the button steps aside while the visitor is working a form, and comes back afterwards:
   `is-tucked` is set while the filter panel is open or a field has focus. LINE stays one tap away
   the moment the form is done with, and the cookie button in the opposite corner is untouched. */
.floatline.is-tucked {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(8px);
}

/* ── 11. Small screens ────────────────────────────────────── */
@media (min-width: 900px) {
	.search__scope { display: flex; }
}

@media (max-width: 1080px) {
	.hero__in { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.shop { grid-template-columns: minmax(0, 1fr); }
	.shop .shop-results { grid-column: 1; grid-row: 2; }
	.shop:has(.filters.is-open) .shop-results { grid-row: 3; }
	.shop :is(.woocommerce-products-header, .shopbar, .products, .woocommerce-pagination, .woocommerce-info, .woocommerce-no-products-found) { grid-column: 1; }
	.filters { position: static; grid-row: 2; grid-column: 1; display: none; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
	.filters.is-open { display: grid; }
	.shopbar .shopbar__filter { display: inline-flex; }
	.sec--single div.product { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.cart-collaterals { grid-template-columns: minmax(0, 1fr); }
	.cart-collaterals .cart_totals { grid-column: 1; }
	/* Narrow screens: back to one column, totals under the items, and unstick the card —
	   a sticky panel on a short viewport just eats the screen. */
	.woocommerce-cart .wc-page > .woocommerce { grid-template-columns: minmax(0, 1fr); }
	.woocommerce-cart .woocommerce-cart-form,
	.woocommerce-cart .cart-collaterals { grid-column: 1; position: static; }
}

@media (max-width: 860px) {
	.topbar__note { display: none; }
	.topbar__in { justify-content: center; }
	.navbar { display: none; }
	.mainbar__burger { display: inline-flex; }
	.mainbar__in { flex-wrap: wrap; gap: 12px; }
	form.search { order: 3; flex-basis: 100%; max-width: none; }
	.mainbar .actions { gap: 2px; }
	.actions__label { display: none; }
	.actions__item { padding: 9px; }
	.b2b { grid-template-columns: minmax(0, 1fr); }
	.b2b__art { aspect-ratio: 16 / 7; }
	.b2b__art::after { background: linear-gradient(180deg, var(--ink) 0%, rgb(var(--ink-rgb) / .82) 14%, rgb(var(--ink-rgb) / .26) 48%, rgb(var(--ink-rgb) / .06) 82%); }
	.b2b__act .btn { flex: 1 1 160px; }
	/* The desktop rules pin the menu to column 1 and the content to column 2 using
	   `.woocommerce-account div.woocommerce-MyAccount-content` (0,2,1). Collapsing the grid to one
	   column is not enough on its own — the content stayed pinned to a column 2 that no longer
	   existed, so the browser created an implicit one sized to its contents: the menu took the
	   whole 1fr and the actual page was squeezed to 205px. The reset has to match that
	   specificity, not undercut it. */
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns: minmax(0, 1fr); }
	.woocommerce-account nav.woocommerce-MyAccount-navigation,
	.woocommerce-account div.woocommerce-MyAccount-content { grid-column: 1; grid-row: auto; }
	.site-foot__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 40px; }
}

@media (max-width: 640px) {
	ul.products { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 14px; }
	.card__body { padding: 4px 12px 14px; }
	.card__title { font-size: 14px; }
	.card__price .price { font-size: 16.5px; }
	.cats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.herotiles { gap: 10px; }
	.herotile a { padding: 15px 13px; }
	.herotile__label { font-size: 15px; }
	.herotile__desc { display: none; }
	.hero__trust { gap: 8px 18px; font-size: 13.5px; }
	.floatline span { display: none; }
	.floatline { padding: 15px; }
	.search__go { padding: 0 16px; }
	.search__gotext { display: none; }
	.shop_table thead { display: none; }
	.shop_table :is(tr, td) { display: block; width: auto; }
	.shop_table tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
	.shop_table td { border: 0; padding: 6px 14px; }
	.shop_table td::before { content: attr(data-title) ": "; font-weight: 600; color: var(--muted); }
	.shop_table td.product-thumbnail::before, .shop_table td.product-remove::before { content: none; }
	.shop_table td.actions { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── 12. Cookie consent banner ────────────────────────────── */
/* .cc itself must occupy no space in normal flow, or it pushes the whole page down. */
.cc { display: contents; }

.cc__bar {
	position: fixed; inset: auto 0 0 0; z-index: 150;
	background: #e7f7ed; color: var(--ink);
	border-top: 1px solid var(--brand-line);
	box-shadow: 0 -4px 20px rgb(var(--ink-rgb) / .06);
	animation: cc-up .25s ease-out;
}
.cc__bar[hidden] { display: none; }
@keyframes cc-up { from { transform: translateY(100%); } }

.cc__bar-in {
	width: min(100% - var(--page-gutter) * 2, var(--wrap));
	margin-inline: auto;
	display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
	padding-block: 16px;
}
.cc__text { flex: 1 1 420px; font-size: 14px; line-height: 1.65; color: var(--ink-2); margin: 0; }
.cc__text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cc__acts { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.cc__btn { white-space: nowrap; }
/* Mint consent bar with green secondary actions and an orange primary action. */
.cc__bar .btn--ghostdark { background: transparent; color: var(--brand); border-color: color-mix(in srgb, var(--brand) 50%, white); }
.cc__bar .btn--ghostdark:hover { background: #fff; color: var(--brand-hover); border-color: var(--brand); }
.cc__bar .btn--primary { background: var(--accent-button); color: #fff; }
.cc__bar .btn--primary:hover { background: var(--accent-hover); }

.cc__panel { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.cc__panel[hidden] { display: none; }
.cc__scrim { position: absolute; inset: 0; background: rgb(var(--ink-rgb) / .55); }
.cc__box {
	position: relative; z-index: 1;
	width: min(100%, 620px); max-height: min(86vh, 760px);
	display: flex; flex-direction: column;
	background: #fff; color: var(--ink);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
	overflow: hidden;
}
.cc__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.cc__title { font-size: 19px; }
.cc__body { padding: 8px 22px 4px; overflow-y: auto; }
.cc__row { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.cc__row:last-child { border-bottom: 0; }
.cc__desc { margin-top: 6px; padding-left: 60px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }

/* Toggle switch — hides the real checkbox while keeping it keyboard focusable. */
.cc__switch { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.cc__switch input { position: absolute; opacity: 0; width: 46px; height: 26px; margin: 0; cursor: pointer; }
.cc__track {
	flex: none; position: relative;
	width: 46px; height: 26px; border-radius: 999px;
	background: var(--surface-2); transition: background-color .16s;
}
.cc__track::after {
	content: ""; position: absolute; top: 3px; left: 3px;
	width: 20px; height: 20px; border-radius: 999px; background: #fff;
	box-shadow: var(--shadow-1); transition: transform .16s;
}
.cc__switch input:checked + .cc__track { background: var(--leaf); }
.cc__switch input:checked + .cc__track::after { transform: translateX(20px); }
.cc__switch input:disabled + .cc__track { background: var(--leaf); opacity: .45; }
.cc__switch input:disabled ~ .cc__label { cursor: default; }
.cc__switch input:focus-visible + .cc__track { outline: 3px solid color-mix(in srgb, var(--brand) 55%, white); outline-offset: 2px; }
.cc__label { display: grid; gap: 1px; font-size: 15px; }
.cc__label em { font-style: normal; font-size: 12.5px; color: var(--muted); }

.cc__foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 18px 22px; border-top: 1px solid var(--line); background: var(--surface); }
.cc__foot .btn--ghostdark { background: #fff; color: var(--ink); border-color: var(--line); }
.cc__foot .btn--ghostdark:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink); }

/* The reopen button — kept small and recessed so it does not compete with the LINE button. */
.cc__reopen {
	position: fixed; left: 16px; bottom: 16px; z-index: 90;
	padding: 8px 14px;
	background: rgb(255 255 255 / .94); color: var(--muted);
	border: 1px solid var(--line); border-radius: 999px;
	font-size: 12.5px; cursor: pointer;
	box-shadow: var(--shadow-1);
}
.cc__reopen:hover { color: var(--ink); border-color: var(--ink); }
/* Before the banner is answered it already covers the bottom of the screen, so this button
   would only stack on top of it. */
.cc[data-answered="0"] ~ .cc__reopen,
.cc[data-answered="0"] .cc__reopen { display: none; }

@media (max-width: 860px) {
	.cc__bar-in { gap: 14px; padding-block: 14px; }
	.cc__acts { margin-left: 0; width: 100%; }
	.cc__acts .btn { flex: 1 1 auto; }
	.cc__text { font-size: 13.5px; }
	.cc__reopen { left: 12px; bottom: 12px; padding: 7px 12px; font-size: 12px; }
	.cc__desc { padding-left: 0; }
}

/* The client's real logo is a roughly square 300x269 image with the company name inside it.
   At 52px tall that lettering shrinks to ~8px and becomes unreadable, so the mark and live text
   are paired: the image acts as the symbol, the text carries the reading. */
.brand__mark img { width: auto; height: 46px; }
.site-foot__logo { display: block; }
.site-foot__logo img { width: auto; height: 64px; }
/* The transparent logo stays legible on the footer's navy because the mark itself is bright
   orange/green. Warm accents sit on the dark green surface. */

@media (max-width: 640px) {
	.brand__mark img { height: 38px; }
	.brand__tag { display: none; }
	.brand__name { font-size: 16px; }
}

/* Cookie settings button — icon only.
   It used to be a wide "ตั้งค่าคุกกี้" pill that covered the copyright line in the footer and
   competed with the LINE button, despite being a utility control. */
.cc__reopen {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: #fff;
	border: 1px solid var(--line);
	opacity: .75;
	transition: opacity .16s, transform .16s, border-color .16s;
}
.cc__reopen img { width: 26px; height: 26px; }
.cc__reopen:hover { opacity: 1; border-color: var(--brand-line); transform: translateY(-2px); }

/* Footer content owns this space; preferences remain available in its normal flow. */
.cc__reopen.is-at-footer { visibility: hidden; opacity: 0; pointer-events: none; }
.cc__footer {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 8px 12px; max-width: 100%;
	border: 1px solid rgb(255 255 255 / .25); border-radius: 8px;
	background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.cc__footer img { width: 20px; height: 20px; }
.cc__footer:hover { border-color: #ffbd7a; color: #ffbd7a; }

/* Keeps the floating buttons off the copyright line at the bottom of the page. */
.site-foot__bar { padding-bottom: 18px; }
@media (max-width: 640px) {
	.site-foot__barin { padding-left: 56px; }
}

/* The official LINE logo is a filled shape, not stroked like the rest of the icon set, so it needs no stroke. */
.icon--line { flex: none; }
.floatline .icon--line { width: 26px; height: 26px; }

/* Contract 1.3–1.4: a clearer catalogue, with consistent touch targets and focus states. */
:root { --muted-2: #627568; --line-soft: #e8efe6; }
.site-head .mainbar__burger { display: none; }
.hero__in { grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); gap: 64px; padding-block: 38px; }
.hero--copy-only .hero__in { grid-template-columns: minmax(0, 1fr); }
.hero--copy-only .hero__copy { max-width: 760px; }
.hero--copy-only.hero--photo::after { background-image: linear-gradient(100deg, var(--hero-mint) 0%, rgb(228 248 235 / .97) 65%, rgb(228 248 235 / .8)), var(--hero-img); }
.hero__title { max-width: 17ch; font-size: clamp(32px, 3.4vw, 49px); line-height: 1.25; text-wrap: balance; }
.hero__text { max-width: 45ch; line-height: 1.65; }
.hero__eyebrow { color: var(--brand); letter-spacing: .01em; }
.hero-catalog { padding: 20px 24px; border: 1px solid rgb(255 255 255 / .8); border-radius: var(--radius); background: rgb(255 255 255 / .96); box-shadow: var(--shadow-2); }
.hero-catalog__label { margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--brand); }
.hero-catalog .herotiles { grid-template-columns: 1fr; gap: 0; }
.hero-catalog .herotile a { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; background: none; color: var(--ink); }
.hero-catalog .herotile a:hover { color: var(--brand); background: var(--brand-soft); transform: none; }
.hero-catalog .herotile .icon { color: var(--brand); flex-shrink: 0; }
.sec-head { align-items: flex-end; gap: 18px; }
.sec-head__title { font-size: clamp(23px, 2.3vw, 30px); }
.sec-head__sub { line-height: 1.8; }
.sec-head__link, .shop-reset { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.shop-reset { font-size: 14px; color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }
.home .sec--cats { background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.home .cats { gap: 18px; }
.woocommerce ul.products li.product.card, ul.products li.product.card { border-color: var(--line); border-radius: 16px; box-shadow: 0 2px 6px rgb(var(--ink-rgb) / .025); }
.card__body { padding: 10px 18px 18px; gap: 7px; }
.card__title { font-size: 16px; line-height: 1.65; }
.card__title a { -webkit-line-clamp: 3; }
.card__sku { overflow-wrap: anywhere; font-size: 12px; }
.card__media { background: #fff; border-radius: 16px 16px 0 0; }
.card__foot { padding-top: 16px; gap: 14px; }
.card__price > .woocommerce-Price-amount,
.card__price > ins .woocommerce-Price-amount { font-size: 22px; font-weight: 700; color: var(--ink); }
.card__price del { color: var(--muted); font-size: 13px; }
.card__price ins { text-decoration: none; }
.woocommerce ul.products li.product.card .button, ul.products li.product.card .button { min-height: 44px; }
.shopbar { flex-wrap: wrap; }
.b2b__text { line-height: 1.85; }
.site-foot__barin { flex-wrap: wrap; gap: 16px; }
.drawer__menu .menu-item-has-children { position: relative; }
.drawer__menu .menu-item-has-children > a { padding-right: 52px; }
.submenu-toggle { position: absolute; right: 0; top: 2px; min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer; }
.submenu-toggle[aria-expanded="true"] { color: var(--brand); background: var(--brand-soft); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.hero :focus-visible { outline-color: var(--brand); }
.site-foot :focus-visible { outline-color: #ffbd7a; }
@media (max-width: 1024px) {
	.hero--photo::after { background-image: linear-gradient(100deg, var(--hero-mint) 0%, rgb(228 248 235 / .97) 48%, rgb(228 248 235 / .7) 66%, rgb(0 56 40 / .08)), var(--hero-img); }
	.hero__in { gap: 28px; grid-template-columns: minmax(0, 1.2fr) minmax(250px, .8fr); }
}
@media (max-width: 800px) {
	.hero--photo::after,
	.hero--copy-only.hero--photo::after { background-image: linear-gradient(105deg, rgb(228 248 235 / .98), rgb(228 248 235 / .94)), var(--hero-img); }
	.site-head .mainbar__burger { display: inline-flex; }
	.hero__in { grid-template-columns: 1fr; padding-block: 36px; }
	.hero__title { max-width: 23ch; }
	.hero-catalog { padding: 16px 20px; }
	.hero-catalog .herotiles { grid-template-columns: 1fr 1fr; gap: 0 20px; }
	.hero-catalog .herotile__label { font-size: 14px; }
	.hero-catalog .herotile a { padding-block: 13px; }
}
@media (max-width: 600px) {
	.promo--photo::before { background-image: linear-gradient(100deg, rgb(94 30 8 / .88), rgb(94 30 8 / .7)), var(--promo-img); }
	.hero__title { font-size: 32px; }
	.hero__btns { margin-top: 22px; gap: 10px; }
	.hero__trust { font-size: 12px; gap: 10px 16px; }
	.hero__text { font-size: 15px; }
	.hero-catalog__label { margin-bottom: 8px; }
	.card__body { padding: 8px 12px 14px; }
	.card__title { font-size: 14px; line-height: 1.6; }
	.card__sku { font-size: 11px; }
	.card__price > .woocommerce-Price-amount, .card__price > ins .woocommerce-Price-amount { font-size: 19px; }
	.sec-head { align-items: flex-start; }
	.sec-head__link { white-space: nowrap; font-size: 12px; }
	.home .cats { gap: 12px; }
	.shopbar .woocommerce-ordering { width: 100%; }
	.shopbar .woocommerce-ordering select { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.shh-demo-notice { padding: 9px 20px; text-align: center; font-size: 13px; line-height: 1.7; background: #fff4e6; color: #713d0a; border-bottom: 1px solid #e9cba4; }
@media (min-width: 1025px) {
	.home .woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.site-head .mainbar__burger { display: inline-flex; }
	.mainbar .mainbar__in { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px 8px; }
	.mainbar .brand { min-width: 0; }
	.mainbar .brand__text { gap: 8px; }
	.mainbar .brand__name { font-size: 14px; white-space: normal; line-height: 1.4; }
	.mainbar .brand__mark { width: 32px; flex: 0 0 32px; }
	.mainbar .brand__tag { display: none; }
	.mainbar form.search { grid-column: 1 / -1; grid-row: 2; width: 100%; }
	.mainbar .actions { margin-left: 0; }
	.mainbar .actions__item { padding: 8px; }
}
@media (max-width: 360px) {
	.mainbar .brand__mark { display: none; }
	.mainbar .brand__name { font-size: 13px; }
}
/* Checkout: keep the order summary beside the address form on wide screens. */
@media (min-width: 1081px) {
	.woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "notices notices" "customer heading" "customer review"; grid-template-rows: min-content min-content 1fr; column-gap: 32px; row-gap: 16px; align-items: start; }
	.woocommerce-checkout form.checkout .woocommerce-NoticeGroup-checkout { grid-area: notices; }
	.woocommerce-checkout form.checkout #customer_details { grid-area: customer; display: block; padding: 24px; border: 1px solid var(--line); border-radius: 16px; }
	.woocommerce-checkout form.checkout #customer_details .col-1,
	.woocommerce-checkout form.checkout #customer_details .col-2 { width: 100%; float: none; }
	.woocommerce-checkout form.checkout #customer_details .col-2 { margin-top: 24px; }
	.woocommerce-checkout form.checkout #order_review_heading { grid-area: heading; margin: 0; }
	.woocommerce-checkout form.checkout #order_review { grid-area: review; min-width: 0; margin-top: 0; }
}
.woocommerce-checkout #payment { background: var(--surface); border-radius: 12px; }
.woocommerce-checkout #payment div.payment_box { background: var(--surface-2); color: var(--ink-2); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--surface-2); }
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name { overflow-wrap: anywhere; }