/*
Theme Name: Steepwell
Theme URI: https://example.com/steepwell
Author: Studio
Author URI: https://example.com
Description: Quiet teaware retail WooCommerce theme on a porcelain-white base with deep tea-brown typography and a soft celadon-green accent. Tea-bowl arc and rising-steam curve motifs drawn in pure CSS and inline SVG, 8px corners, generous vessel-like whitespace. Configurable homepage sections, generic spec tables with reusable presets, floating contact rail with QR modals. All copy and imagery is managed from the admin, so the theme fits any product category.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: steepwell
Tags: e-commerce, custom-menu, custom-logo, featured-images, translation-ready

Fonts: EB Garamond (headings) & Mukta (body), both licensed under the
SIL Open Font License 1.1 (commercial web use permitted), loaded from
Google Fonts. https://fonts.google.com/specimen/EB+Garamond
https://fonts.google.com/specimen/Mukta
*/

/* ================= Design tokens ================= */
:root {
	--bg: #f8f6f2;
	--surface: #ffffff;
	--surface-2: #efeae1;
	--ink: #372a1f;
	--ink-soft: #4c3e30;
	--muted: #80715f;
	--accent: #8fb5a3;
	--accent-deep: #6d9682;
	--accent-soft: #e7efe9;
	--accent-text: #55806b;
	--accent-lite: #b7d2c4;
	--warm: #c2a181;
	--warm-soft: #f1e9de;
	--okay: #4c7a5e;
	--dark: #372a1f;
	--dark-2: #2a1f16;
	--dark-ink: #f6f1e8;
	--dark-muted: #b2a493;
	--danger: #a2543e;
	--line: rgba(55, 42, 31, 0.14);
	--line-dark: rgba(246, 241, 232, 0.16);
	--radius: 8px;
	--radius-sm: 6px;
	--shadow: 0 26px 48px -32px rgba(55, 42, 31, 0.42);
	--font-display: "EB Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--font-body: "Mukta", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--wrap: 1200px;
	/* rising steam: a slim S-curve wisp, tiled with offsets so a strip of
	   them reads like steam drifting off a warm cup (tile 44x64) */
	--steam: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='64' viewBox='0 0 44 64'%3E%3Cpath d='M22 58c-7-6 7-10 0-16s7-10 0-16 7-10 0-16' fill='none' stroke='rgba(55,42,31,0.16)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	--steam-accent: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='64' viewBox='0 0 44 64'%3E%3Cpath d='M22 58c-7-6 7-10 0-16s7-10 0-16 7-10 0-16' fill='none' stroke='rgba(143,181,163,0.5)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	--steam-dark: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='64' viewBox='0 0 44 64'%3E%3Cpath d='M22 58c-7-6 7-10 0-16s7-10 0-16 7-10 0-16' fill='none' stroke='rgba(246,241,232,0.22)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	/* tea-bowl arc: an open bowl silhouette with a foot ring, stroked */
	--bowl: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='44' viewBox='0 0 84 44'%3E%3Cpath d='M8 6a34 34 0 0 0 68 0' fill='none' stroke='rgba(55,42,31,0.18)' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M30 41h24' fill='none' stroke='rgba(55,42,31,0.18)' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	--bowl-accent: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='44' viewBox='0 0 84 44'%3E%3Cpath d='M8 6a34 34 0 0 0 68 0' fill='none' stroke='rgba(143,181,163,0.55)' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M30 41h24' fill='none' stroke='rgba(143,181,163,0.55)' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	--bowl-dark: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='44' viewBox='0 0 84 44'%3E%3Cpath d='M8 6a34 34 0 0 0 68 0' fill='none' stroke='rgba(246,241,232,0.24)' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M30 41h24' fill='none' stroke='rgba(246,241,232,0.24)' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ================= Base ================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* clip, not hidden: hidden would break the sticky header */
html,
body {
	overflow-x: clip;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--ink-soft);
	background: var(--bg);
}

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

a {
	color: inherit;
}

::selection {
	background: var(--accent);
	color: #ffffff;
}

:focus-visible {
	outline: 3px solid var(--accent-deep);
	outline-offset: 3px;
	border-radius: 6px;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.16;
	margin: 0;
	color: var(--ink);
	letter-spacing: 0.004em;
}

p {
	margin: 0;
}

.wrap {
	width: min(var(--wrap), calc(100% - 48px));
	margin-inline: auto;
}

.section-pad {
	padding-block: 98px;
}

.sec {
	padding-block: 108px;
	position: relative;
}

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

.skip-link {
	position: absolute;
	top: -60px;
	left: 16px;
	z-index: 200;
	background: var(--ink);
	color: var(--dark-ink);
	padding: 10px 18px;
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	text-decoration: none;
	transition: top 0.2s ease;
}

.skip-link:focus {
	top: 0;
}

body.no-scroll {
	overflow: hidden;
}

/* ================= Reveal animation =================
   Default CSS hides nothing: only when JS adds .fx to <html>
   (and the visitor has not requested reduced motion) do the
   [data-rv] elements start hidden, then rise gently like steam
   lifting off a fresh pour. */
html.fx [data-rv] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.64s ease, transform 0.64s cubic-bezier(0.23, 0.62, 0.24, 1);
	will-change: opacity, transform;
}

html.fx [data-rv].rv-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html.fx [data-rv] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ================= Buttons ================= */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 30px;
	border-radius: var(--radius);
	background: var(--ink);
	color: var(--dark-ink);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-decoration: none;
	border: 1px solid var(--ink);
	cursor: pointer;
	transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.btn:hover {
	background: var(--accent-deep);
	border-color: var(--accent-deep);
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 14px 26px -16px rgba(109, 150, 130, 0.85);
}

.btn-accent {
	background: var(--accent-deep);
	border-color: var(--accent-deep);
	color: #ffffff;
}

.btn-accent:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--dark-ink);
}

.btn-ghost {
	background: transparent;
	border-color: rgba(55, 42, 31, 0.34);
	color: var(--ink);
}

.btn-ghost:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--dark-ink);
}

.btn-ghost-light {
	background: rgba(246, 241, 232, 0.06);
	border-color: rgba(246, 241, 232, 0.55);
	color: #f6f1e8;
}

.btn-ghost-light:hover {
	background: rgba(246, 241, 232, 0.94);
	border-color: rgba(246, 241, 232, 0.94);
	color: var(--ink);
}

.btn-dark-on-accent {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--dark-ink);
}

.btn-dark-on-accent:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--accent-deep);
}

.btn-sm {
	padding: 10px 18px;
	font-size: 14px;
}

.btn .icon {
	flex: none;
	transition: transform 0.22s ease;
}

.btn:hover .icon {
	transform: translateX(3px);
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--accent-text);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, gap 0.2s ease;
}

.text-link:hover {
	border-color: var(--accent-deep);
	gap: 12px;
}

/* ================= Section headings ================= */
.kicker {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 16px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--accent-text);
}

/* a tiny tea bowl: open arc with a foot line, sipped from the motif set */
.kicker::before {
	content: "";
	width: 17px;
	height: 11px;
	background:
		radial-gradient(circle at 8.5px -3.4px, transparent 9.4px, currentColor 9.6px 11px, transparent 11.2px),
		linear-gradient(currentColor, currentColor) 50% 100% / 9px 1.6px no-repeat;
	flex: none;
	opacity: 0.9;
}

.sec-head {
	max-width: 660px;
	margin-bottom: 56px;
}

.sec-title {
	font-size: clamp(30px, 3.8vw, 43px);
	text-wrap: balance;
}

.sec-sub {
	margin-top: 16px;
	font-size: 17px;
	color: var(--muted);
}

.sec-dark {
	background: linear-gradient(180deg, var(--dark), var(--dark-2));
	position: relative;
	overflow: hidden;
}

/* celadon and warm-clay glows pooling in the corners of dark panels */
.sec-dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(54% 78% at 88% 0%, rgba(143, 181, 163, 0.18), transparent 64%),
		radial-gradient(48% 70% at 4% 100%, rgba(194, 161, 129, 0.13), transparent 70%);
	pointer-events: none;
}

/* steam wisps drifting along the top edge of dark panels */
.sec-dark::after {
	content: "";
	position: absolute;
	top: 6px;
	left: 50%;
	translate: -50% 0;
	width: min(560px, 70vw);
	height: 64px;
	background-image: var(--steam-dark);
	background-size: 44px 64px;
	opacity: 0.8;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, #000, transparent);
	mask-image: linear-gradient(180deg, #000, transparent);
}

.sec-dark > .wrap {
	position: relative;
	z-index: 1;
}

.sec-dark .sec-title {
	color: var(--dark-ink);
}

.sec-dark .sec-sub {
	color: var(--dark-muted);
}

.sec-dark .kicker {
	color: var(--accent-lite);
}
/* ================= Header ================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(248, 246, 242, 0.94);
	border-bottom: 1px solid transparent;
	transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* glaze line across the very top: tea-brown dipping into celadon */
.site-header::before {
	content: "";
	display: block;
	height: 3px;
	background: linear-gradient(90deg, var(--ink), var(--warm) 45%, var(--accent));
}

.site-header.scrolled {
	background: rgba(255, 255, 255, 0.98);
	border-bottom-color: var(--line);
	box-shadow: 0 14px 30px -26px rgba(55, 42, 31, 0.5);
}

.header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-height: 80px;
}

.brand {
	flex: none;
	display: flex;
	align-items: center;
}

.brand img {
	max-height: 52px;
	width: auto;
}

.brand-text {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
}

/* rounded vessel tile holding the teapot mark */
.brand-mark {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px 12px 16px 16px;
	background: linear-gradient(170deg, #4d3b2a, var(--ink) 72%);
	color: var(--accent-lite);
}

.brand-name {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 21px;
	letter-spacing: 0.01em;
	color: var(--ink);
}

.main-nav {
	flex: 1;
	min-width: 0;
	display: flex;
	justify-content: center;
}

.nav-list {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-list > li {
	position: relative;
}

.nav-list > li > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 9px 15px;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 15.5px;
	font-weight: 500;
	letter-spacing: 0.015em;
	color: var(--ink-soft);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease;
}

.nav-list > li > a:hover,
.nav-list > li.current-menu-item > a,
.nav-list > li.current-menu-ancestor > a {
	background: rgba(143, 181, 163, 0.18);
	color: var(--ink);
}

.nav-list > li.menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.4px solid currentColor;
	border-bottom: 1.4px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	opacity: 0.55;
}

.nav-list .sub-menu {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	translate: -50% 0;
	min-width: 240px;
	margin: 0;
	padding: 10px;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 40;
}

/* a small celadon bowl arc resting at the dropdown's top */
.nav-list .sub-menu::before {
	content: "";
	display: block;
	margin: 2px auto 8px;
	width: 56px;
	height: 22px;
	background: var(--bowl-accent) no-repeat center / 42px 22px;
	opacity: 0.9;
}

.nav-list > li:hover > .sub-menu,
.nav-list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.nav-list .sub-menu a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	font-size: 15px;
	font-weight: 500;
	color: var(--ink-soft);
	text-decoration: none;
}

.nav-list .sub-menu a:hover {
	background: rgba(143, 181, 163, 0.14);
	color: var(--ink);
}

.header-actions {
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
}

.hbtn {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid transparent;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	position: relative;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.hbtn:hover {
	background: rgba(143, 181, 163, 0.18);
	border-color: rgba(109, 150, 130, 0.4);
}

.cart-count {
	position: absolute;
	top: -3px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	display: grid;
	place-items: center;
	background: var(--accent-deep);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 9px;
	line-height: 1;
}

.nav-toggle {
	display: none;
}

/* ================= Drawer (mobile nav) ================= */
.drawer,
.search-layer,
.qr-modal {
	position: fixed;
	inset: 0;
	z-index: 160;
}

.drawer[hidden],
.search-layer[hidden],
.qr-modal[hidden] {
	display: none;
}

.drawer-scrim,
.search-scrim,
.qr-scrim {
	position: absolute;
	inset: 0;
	background: rgba(42, 31, 22, 0.62);
	opacity: 0;
	transition: opacity 0.24s ease;
}

.drawer.open .drawer-scrim,
.search-layer.open .search-scrim,
.qr-modal.open .qr-scrim {
	opacity: 1;
}

.drawer-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(360px, 88vw);
	background: var(--surface);
	display: flex;
	flex-direction: column;
	padding: 20px 24px 32px;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.28s cubic-bezier(0.23, 0.62, 0.24, 1);
	border-left: 3px solid var(--accent);
	border-radius: 14px 0 0 14px;
}

.drawer.open .drawer-panel {
	transform: none;
}

.drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(143, 181, 163, 0.45);
	margin-bottom: 14px;
}

.drawer-title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 20px;
	letter-spacing: 0.01em;
	color: var(--ink);
}

.drawer-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.drawer-nav > li {
	border-bottom: 1px solid var(--line);
}

.drawer-nav a {
	display: block;
	padding: 14px 4px;
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--ink);
	text-decoration: none;
	border-radius: var(--radius-sm);
}

.drawer-nav a:hover {
	color: var(--accent-text);
}

.drawer-nav .sub-menu {
	list-style: none;
	margin: 0 0 10px;
	padding: 0 0 0 16px;
}

.drawer-nav .sub-menu a {
	padding: 8px 4px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--ink-soft);
}

.drawer-links {
	margin-top: 18px;
	display: grid;
	gap: 4px;
}

.drawer-links a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 4px;
	font-weight: 600;
	color: var(--ink-soft);
	text-decoration: none;
}

/* ================= Search overlay ================= */
.search-panel {
	position: absolute;
	left: 50%;
	top: 18vh;
	translate: -50% 0;
	width: min(620px, calc(100vw - 40px));
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--surface);
	border-radius: var(--radius);
	border-top: 3px solid var(--accent);
	padding: 14px;
	box-shadow: var(--shadow);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.24s ease, transform 0.24s ease;
}

.search-layer.open .search-panel {
	opacity: 1;
	transform: none;
}

.search-layer .search-form {
	flex: 1;
}

.search-layer .hbtn {
	flex: none;
}

.search-form {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 4px 6px 4px 18px;
	transition: border-color 0.2s ease;
}

.search-form:focus-within {
	border-color: var(--accent-deep);
}

.search-field {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: var(--font-body);
	font-size: 15.5px;
	color: var(--ink);
	padding: 9px 0;
	outline: none;
}

.search-field::placeholder {
	color: var(--muted);
}

.search-submit {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--ink);
	color: var(--dark-ink);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.search-submit:hover {
	background: var(--accent-deep);
	color: #ffffff;
}

/* ================= Hero ================= */
.hero {
	position: relative;
	min-height: 660px;
	display: flex;
	align-items: center;
	color: #f6f1e8;
	overflow: hidden;
	background: var(--dark);
}

.hero-media {
	position: absolute;
	inset: 0;
}

.hero-media img.hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.8s ease;
}

.hero-video.ready {
	opacity: 1;
}

.hero-shade {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 100% at 90% 6%, rgba(143, 181, 163, 0.26), transparent 58%),
		linear-gradient(97deg, rgba(42, 31, 22, 0.93) 12%, rgba(42, 31, 22, 0.6) 52%, rgba(55, 42, 31, 0.12) 100%);
}

/* steam wisps rising from the hero's bottom edge */
.hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 72px;
	background-image: var(--steam-dark);
	background-size: 44px 64px;
	opacity: 0.7;
	z-index: 3;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(0deg, #000, transparent);
	mask-image: linear-gradient(0deg, #000, transparent);
}

.hero-in {
	position: relative;
	z-index: 2;
	padding-block: 124px 118px;
	max-width: 720px;
}

.hero-kicker {
	color: var(--accent-lite);
}

.hero-title {
	font-size: clamp(40px, 5.2vw, 62px);
	color: #faf7f1;
	text-wrap: balance;
	letter-spacing: 0.002em;
}

.hero-sub {
	margin-top: 22px;
	max-width: 540px;
	font-size: 18px;
	line-height: 1.7;
	color: rgba(246, 241, 232, 0.88);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 36px;
}

/* warm hairline above the stats row */
.hero-stats {
	display: flex;
	gap: 48px;
	margin: 54px 0 0;
	padding-top: 28px;
	border-top: 1px solid rgba(194, 161, 129, 0.5);
}

.hero-stats .stat {
	display: grid;
	gap: 3px;
}

.hero-stats dd {
	margin: 0;
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 500;
	color: var(--accent-lite);
	order: -1;
}

.hero-stats dt {
	font-size: 12.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(246, 241, 232, 0.62);
}

/* ================= Perks ================= */
.perks {
	padding-block: 46px;
	background: var(--bg);
}

.perks-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	padding-block: 30px;
	border-block: 1px solid var(--line);
}

.perk {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 16px;
	align-items: center;
	padding: 14px 6px;
}

.perk:hover .perk-icon {
	transform: translateY(-3px);
}

/* a glazed vessel tile: porcelain top melting into a celadon base */
.perk-icon {
	grid-row: span 2;
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 14px 14px 20px 20px;
	background:
		linear-gradient(180deg, transparent 68%, rgba(143, 181, 163, 0.42)),
		linear-gradient(170deg, #ffffff, var(--surface-2));
	border: 1px solid rgba(55, 42, 31, 0.1);
	color: var(--accent-deep);
	transition: transform 0.25s ease;
}

.perk-title {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 500;
	align-self: end;
}

.perk-text {
	font-size: 14.5px;
	color: var(--muted);
	line-height: 1.55;
	align-self: start;
}

/* ================= Category grid ================= */
.cats {
	background: var(--bg);
	position: relative;
}

.cats-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	position: relative;
}

.cat-card {
	position: relative;
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	background: var(--surface-2);
	border: 1px solid var(--line);
	box-shadow: 0 16px 30px -26px rgba(55, 42, 31, 0.4);
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.cat-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow);
	border-color: rgba(109, 150, 130, 0.5);
}

.cat-media {
	display: block;
	aspect-ratio: 4 / 3.4;
	background: linear-gradient(170deg, var(--surface-2), #e4ddd0);
}

.cat-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.55s ease;
}

.cat-card:hover .cat-media img {
	transform: scale(1.05);
}

/* porcelain label bar pinned to the bottom, celadon hairline on top */
.cat-meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: grid;
	gap: 1px;
	padding: 15px 18px;
	padding-right: 66px;
	background: rgba(255, 255, 255, 0.94);
	border-top: 2px solid rgba(143, 181, 163, 0.6);
	border-radius: var(--radius) var(--radius) 0 0;
	transition: background 0.25s ease;
}

.cat-card:hover .cat-meta {
	background: #ffffff;
}

.cat-name {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 19px;
	letter-spacing: 0.01em;
	color: var(--ink);
}

.cat-count {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.cat-arrow {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--accent-deep);
	color: #ffffff;
	transform: translateY(6px);
	opacity: 0;
	transition: transform 0.25s ease, opacity 0.25s ease;
	z-index: 1;
}

.cat-card:hover .cat-arrow,
.cat-card:focus-visible .cat-arrow {
	transform: none;
	opacity: 1;
}

/* ================= Product cards (front page) ================= */
.prod-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}

.prod-card {
	background: rgba(246, 241, 232, 0.05);
	border: 1px solid var(--line-dark);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.28s ease, background 0.28s ease, border-color 0.28s ease;
}

.prod-card:hover {
	transform: translateY(-5px);
	background: rgba(246, 241, 232, 0.09);
	border-color: rgba(183, 210, 196, 0.5);
}

.prod-media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: #e6e0d4;
}

.prod-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.55s ease;
}

.prod-card:hover .prod-media img {
	transform: scale(1.05);
}

.badge {
	display: inline-block;
	padding: 5px 12px;
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	color: var(--ink-soft);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.badge-sale {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--accent-deep);
	color: #ffffff;
}

.prod-body {
	padding: 18px 20px 22px;
	display: grid;
	gap: 8px;
	justify-items: start;
}

.prod-name {
	font-size: 16.5px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0.01em;
	font-family: var(--font-body);
}

.prod-name a {
	color: var(--dark-ink);
	text-decoration: none;
	transition: color 0.2s ease;
}

.prod-name a:hover {
	color: var(--accent-lite);
}

.prod-price {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 500;
	color: var(--dark-muted);
	letter-spacing: 0.01em;
}

.prod-price del {
	opacity: 0.6;
	margin-right: 8px;
	font-weight: 400;
}

.prod-price ins {
	text-decoration: none;
	color: var(--accent-lite);
	font-weight: 500;
}

.prod-btn {
	margin-top: 6px;
	background: transparent;
	border-color: rgba(246, 241, 232, 0.4);
	color: var(--dark-ink);
}

.prod-btn:hover {
	background: var(--accent-deep);
	border-color: var(--accent-deep);
	color: #ffffff;
}

/* ================= Split (image + copy) ================= */
.split {
	background: var(--bg);
}

.split-in {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
	gap: 72px;
	align-items: center;
}

.split-media {
	position: relative;
}

/* a celadon-rimmed panel offset behind the photo, brushed with steam */
.split-media::before {
	content: "";
	position: absolute;
	inset: 22px -22px -22px 22px;
	border-radius: 16px;
	border: 1.5px solid rgba(143, 181, 163, 0.55);
	background-image: var(--steam-accent);
	background-size: 44px 64px;
	background-position: 8px 10px;
	background-color: rgba(143, 181, 163, 0.08);
	z-index: 0;
}

/* a bowl arc floating off the panel edge, like a cup seen in profile */
.split-media::after {
	content: "";
	position: absolute;
	right: -40px;
	top: 44%;
	width: 58px;
	height: 34px;
	background: var(--bowl-accent) no-repeat center / 58px 30px;
	opacity: 0.95;
	z-index: 0;
}

.split-media img {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3.1;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	z-index: 1;
}

.split-flip .split-media {
	order: 2;
}

.split-flip .split-media::before {
	inset: 22px 22px -22px -22px;
}

.split-flip .split-media::after {
	right: auto;
	left: -40px;
}

.split-body .sec-title {
	margin-bottom: 20px;
}

.split-text {
	color: var(--muted);
	font-size: 16.5px;
	margin-bottom: 28px;
}
/* ================= Steps ================= */
.steps {
	background: linear-gradient(180deg, var(--surface-2), var(--bg));
	position: relative;
	overflow: hidden;
}

.steps-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: step;
}

.step {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 32px 26px 30px;
	overflow: hidden;
}

/* faint steam drifting along each card's top edge */
.step::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	right: 0;
	height: 26px;
	background-image: var(--steam-accent);
	background-size: 36px 52px;
	opacity: 0.55;
	-webkit-mask-image: linear-gradient(180deg, #000, transparent);
	mask-image: linear-gradient(180deg, #000, transparent);
}

/* round pour-counter, like a drop of fresh glaze */
.step-num {
	display: inline-grid;
	place-items: center;
	width: 50px;
	height: 50px;
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	color: #ffffff;
	background: linear-gradient(170deg, var(--accent), var(--accent-deep));
	border-radius: 50%;
	margin-bottom: 16px;
	letter-spacing: 0;
}

.step-title {
	font-size: 20px;
	margin-bottom: 9px;
}

.step-text {
	font-size: 14.5px;
	color: var(--muted);
	line-height: 1.62;
}

/* ================= Quotes ================= */
.quotes-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

/* porcelain-toned cards resting on the tea-brown panel */
.quote {
	margin: 0;
	background: rgba(246, 241, 232, 0.05);
	border: 1px solid var(--line-dark);
	border-radius: var(--radius);
	padding: 30px 28px;
	display: grid;
	gap: 16px;
	align-content: start;
	position: relative;
	overflow: hidden;
}

.quote::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	right: 0;
	height: 22px;
	background-image: var(--steam-dark);
	background-size: 34px 50px;
	opacity: 0.8;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, #000, transparent);
	mask-image: linear-gradient(180deg, #000, transparent);
}

.quote-mark {
	color: var(--warm);
	opacity: 0.95;
}

.quote blockquote {
	margin: 0;
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.62;
	color: var(--dark-ink);
}

.quote figcaption {
	display: grid;
	gap: 2px;
}

.quote-name {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 16.5px;
	letter-spacing: 0.01em;
	color: var(--dark-ink);
}

.quote-role {
	font-size: 13px;
	color: var(--dark-muted);
}

/* ================= Blog teaser ================= */
.post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.post-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.post-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow);
	border-color: rgba(109, 150, 130, 0.45);
}

.post-media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--surface-2);
}

.post-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.55s ease;
}

.post-card:hover .post-media img {
	transform: scale(1.04);
}

.post-body {
	padding: 24px 26px 28px;
	display: grid;
	gap: 10px;
	justify-items: start;
}

.post-date {
	font-family: var(--font-body);
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-text);
	font-weight: 600;
}

.post-title {
	font-size: 21px;
	line-height: 1.3;
	letter-spacing: 0.005em;
}

.post-title a {
	color: var(--ink);
	text-decoration: none;
	transition: color 0.2s ease;
}

.post-title a:hover {
	color: var(--accent-text);
}

.post-excerpt {
	font-size: 15px;
	color: var(--muted);
	line-height: 1.66;
}

.post-card .text-link {
	margin-top: 4px;
}

/* ================= CTA band ================= */
.cta-band {
	background: linear-gradient(115deg, var(--accent-deep), var(--accent) 55%, #a7c7b6 100%);
	position: relative;
	overflow: hidden;
	padding-block: 78px;
}

/* porcelain sheen and tea-brown shadow drifting across the celadon band */
.cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(52% 90% at 12% 6%, rgba(248, 246, 242, 0.28), transparent 66%),
		radial-gradient(48% 80% at 90% 96%, rgba(55, 42, 31, 0.34), transparent 70%);
	pointer-events: none;
}

/* an oversized bowl arc spanning the band, like a cup raised in profile */
.cta-band::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	width: min(720px, 86vw);
	height: 150px;
	background:
		radial-gradient(ellipse 46% 88% at 50% -30%, transparent 62%, rgba(248, 246, 242, 0.3) 63% 64.6%, transparent 66%),
		linear-gradient(rgba(248, 246, 242, 0.3), rgba(248, 246, 242, 0.3)) 50% 100% / 132px 2px no-repeat;
	pointer-events: none;
}

.cta-in {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 34px;
}

.cta-title {
	font-size: clamp(30px, 3.8vw, 43px);
	color: #ffffff;
}

.cta-text {
	margin-top: 12px;
	color: rgba(255, 255, 255, 0.94);
	font-size: 16.5px;
	max-width: 560px;
}

/* ================= Page hero ================= */
.page-hero {
	position: relative;
	background: linear-gradient(180deg, var(--surface-2), var(--bg));
	padding: 80px 0 58px;
	overflow: hidden;
	border-bottom: 1px solid var(--line);
}

/* steam brushing the corner of every page hero */
.page-hero::before {
	content: "";
	position: absolute;
	top: 4px;
	right: 4%;
	width: min(300px, 32vw);
	height: 72px;
	background-image: var(--steam);
	background-size: 44px 64px;
	opacity: 0.9;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(200deg, #000 40%, transparent);
	mask-image: linear-gradient(200deg, #000 40%, transparent);
}

/* a lone bowl arc resting near the steam */
.page-hero::after {
	content: "";
	position: absolute;
	top: 44px;
	right: calc(4% + 60px);
	width: 54px;
	height: 30px;
	background: var(--bowl) no-repeat center / 54px 28px;
	opacity: 0.85;
	pointer-events: none;
}

.page-hero .wrap {
	position: relative;
	z-index: 1;
}

.page-hero .kicker {
	margin-bottom: 12px;
}

.page-hero-title {
	font-size: clamp(32px, 4.3vw, 50px);
	text-wrap: balance;
}

.page-hero-sub {
	margin-top: 14px;
	max-width: 640px;
	color: var(--muted);
	font-size: 17px;
}

/* ================= Entry content ================= */
.entry {
	max-width: 820px;
}

.entry-content > * + * {
	margin-top: 20px;
}

.entry-content h2 {
	font-size: 28px;
	margin-top: 46px;
}

.entry-content h3 {
	font-size: 22px;
	margin-top: 34px;
}

.entry-content a {
	color: var(--accent-text);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

.entry-content img {
	border-radius: var(--radius);
}

.entry-content ul,
.entry-content ol {
	padding-left: 26px;
	margin: 20px 0 0;
}

.entry-content li {
	margin-top: 8px;
}

.entry-content blockquote {
	margin: 26px 0 0;
	padding: 22px 28px;
	border-left: 3px solid var(--accent);
	background: var(--surface);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 500;
	color: var(--ink);
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	background: var(--surface);
	border-radius: var(--radius);
	overflow: hidden;
}

.entry-content th,
.entry-content td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	text-align: left;
}

/* FAQ-style accordions */
.entry-content details {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0;
	overflow: hidden;
}

.entry-content details + details {
	margin-top: 12px;
}

.entry-content summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 54px 18px 22px;
	position: relative;
	font-weight: 600;
	color: var(--ink);
	transition: background 0.2s ease;
}

.entry-content summary:hover {
	background: rgba(143, 181, 163, 0.08);
}

.entry-content summary::-webkit-details-marker {
	display: none;
}

.entry-content summary::after {
	content: "";
	position: absolute;
	right: 22px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 1.6px solid var(--accent-deep);
	border-bottom: 1.6px solid var(--accent-deep);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s ease;
}

.entry-content details[open] summary::after {
	transform: translateY(-30%) rotate(225deg);
}

.entry-content details > *:not(summary) {
	margin: 0;
	padding: 0 22px 6px;
	color: var(--ink-soft);
}

.entry-content details > p:last-child {
	padding-bottom: 20px;
}

.entry-hero-img {
	margin: 0 0 36px;
}

.entry-hero-img img {
	width: 100%;
	aspect-ratio: 16 / 8.5;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.entry-single .entry-hero-img {
	margin-top: -20px;
}

.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	margin-top: 56px;
	padding-top: 28px;
	border-top: 1px solid rgba(143, 181, 163, 0.48);
}

.post-nav a {
	color: var(--accent-text);
	font-weight: 600;
	text-decoration: none;
	max-width: 44ch;
}

.post-nav a:hover {
	text-decoration: underline;
}

.post-nav-next {
	text-align: right;
	margin-left: auto;
}

/* ================= Contact cards ================= */
.contact-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 10px;
}

.contact-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 3px solid var(--accent);
	border-radius: var(--radius);
	padding: 28px 26px;
}

.contact-card h3 {
	font-size: 20px;
	margin-bottom: 8px;
}

.contact-card p {
	color: var(--muted);
	font-size: 15px;
	margin-top: 4px;
}

.contact-card a {
	color: var(--accent-text);
	font-weight: 600;
	text-decoration: none;
}

.contact-card a:hover {
	text-decoration: underline;
}

/* ================= Pagination ================= */
.pagination-nav {
	margin-top: 48px;
	display: flex;
	justify-content: center;
}

.pagination-nav .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 10px;
	margin: 0 3px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-soft);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14.5px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pagination-nav .page-numbers.current {
	background: var(--ink);
	border-color: var(--ink);
	color: #ffffff;
}

.pagination-nav a.page-numbers:hover {
	background: var(--accent-deep);
	border-color: var(--accent-deep);
	color: #ffffff;
}

/* ================= Search results ================= */
.search-again {
	max-width: 560px;
	margin-bottom: 40px;
}

.result-list {
	display: grid;
	gap: 14px;
}

.result-card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 20px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px 20px;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.result-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
	border-color: rgba(109, 150, 130, 0.45);
}

.result-media {
	display: block;
	width: 76px;
	height: 76px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--surface-2);
}

.result-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.result-body {
	min-width: 0;
	display: grid;
	gap: 5px;
	justify-items: start;
}

.result-body .badge {
	background: var(--accent-soft);
	color: var(--accent-text);
}

.result-title {
	font-size: 20px;
}

.result-title a {
	color: var(--ink);
	text-decoration: none;
}

.result-title a:hover {
	color: var(--accent-text);
}

.result-excerpt {
	color: var(--muted);
	font-size: 14.5px;
}

.result-price {
	color: var(--ink-soft);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 17px;
}

.result-price ins {
	text-decoration: none;
	color: var(--accent-text);
}

.result-arrow {
	color: var(--accent-deep);
}

/* ================= Empty state ================= */
.empty-state {
	max-width: 560px;
	margin-inline: auto;
	text-align: center;
	padding: 64px 20px;
}

.empty-state h2 {
	font-size: 31px;
	margin-bottom: 12px;
}

.empty-state p {
	color: var(--muted);
	margin-bottom: 24px;
}

.empty-search {
	margin: 26px 0;
}

.empty-search .search-form {
	max-width: 420px;
	margin-inline: auto;
}

.empty-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}

/* ================= Footer ================= */
.site-footer {
	background: linear-gradient(180deg, var(--dark), var(--dark-2));
	color: var(--dark-muted);
	position: relative;
	overflow: hidden;
}

/* glaze line along the footer's top edge */
.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--accent), var(--warm) 55%, var(--ink));
	z-index: 1;
}

/* celadon glow and a resting bowl arc in the footer's corners */
.site-footer::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		var(--bowl-dark) no-repeat right 6% bottom 18% / 130px 68px,
		radial-gradient(54% 78% at 86% 2%, rgba(143, 181, 163, 0.15), transparent 66%),
		radial-gradient(46% 66% at 8% 98%, rgba(194, 161, 129, 0.11), transparent 70%);
	pointer-events: none;
}

.footer-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 56px;
	padding-block: 80px 56px;
}

.f-col {
	min-width: 0;
}

.f-brand .brand-text {
	margin-bottom: 18px;
}

.f-brand .brand-mark {
	width: 38px;
	height: 38px;
	background: linear-gradient(170deg, var(--accent), var(--accent-deep));
	color: #ffffff;
}

.f-brand .brand-name {
	color: var(--dark-ink);
}

.f-about {
	font-size: 15px;
	line-height: 1.75;
	max-width: 38ch;
	margin-bottom: 22px;
}

.f-title {
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--warm);
	margin-bottom: 20px;
}

.f-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.f-menu li {
	margin-bottom: 11px;
}

.f-menu a {
	color: var(--dark-muted);
	text-decoration: none;
	font-size: 15px;
	transition: color 0.2s ease;
}

.f-menu a:hover {
	color: var(--accent-lite);
}

.f-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 13px;
}

.f-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 15px;
}

.f-contact-list .icon {
	flex: none;
	margin-top: 4px;
	color: var(--accent-lite);
}

.f-contact-list a {
	color: var(--dark-muted);
	text-decoration: none;
}

.f-contact-list a:hover {
	color: var(--accent-lite);
}

.social-row {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.social-link {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--line-dark);
	background: transparent;
	color: var(--dark-muted);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.social-link:hover {
	background: var(--accent-deep);
	border-color: var(--accent-deep);
	color: #ffffff;
}

/* hairline above the legal strip */
.footer-bottom {
	position: relative;
	z-index: 1;
	border-top: 1px solid rgba(246, 241, 232, 0.16);
}

.footer-bottom-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding-block: 24px;
}

.copyright {
	font-size: 13.5px;
}

.policy-menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0;
	padding: 0;
}

.policy-menu a {
	font-size: 13.5px;
	color: var(--dark-muted);
	text-decoration: none;
}

.policy-menu a:hover {
	color: var(--accent-lite);
}

/* ================= Contact rail & QR modal ================= */
.contact-rail {
	position: fixed;
	top: 50%;
	translate: 0 -50%;
	z-index: 120;
	display: grid;
	gap: 8px;
	padding: 9px;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: var(--shadow);
}

.contact-rail.rail-right {
	right: 18px;
}

.contact-rail.rail-left {
	left: 18px;
}

.rail-btn {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	background: transparent;
	color: var(--ink-soft);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.rail-btn:hover {
	background: var(--accent-deep);
	color: #ffffff;
	transform: scale(1.06);
}

.qr-panel {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	width: min(360px, calc(100vw - 40px));
	background: var(--surface);
	border-radius: var(--radius);
	border-top: 3px solid var(--accent);
	box-shadow: var(--shadow);
	padding: 32px 28px;
	text-align: center;
	opacity: 0;
	transform: scale(0.94);
	transition: opacity 0.24s ease, transform 0.24s ease;
}

.qr-modal.open .qr-panel {
	opacity: 1;
	transform: scale(1);
}

.qr-close {
	position: absolute;
	top: 10px;
	right: 10px;
}

.qr-title {
	font-size: 22px;
	margin-bottom: 16px;
}

.qr-img {
	width: 210px;
	height: auto;
	border-radius: var(--radius-sm);
	border: 1.5px solid rgba(143, 181, 163, 0.55);
	padding: 8px;
	background: #fff;
}

.qr-text {
	margin-top: 14px;
	font-size: 14px;
	color: var(--muted);
}

.qr-btn {
	margin-top: 18px;
}
/* ================= WooCommerce: breadcrumb & shop header ================= */
.woocommerce-breadcrumb {
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--muted);
}

.woocommerce-breadcrumb a {
	color: var(--ink-soft);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	color: var(--accent-text);
}

.bc-sep {
	margin: 0 8px;
	opacity: 0.5;
}

.page-hero-shop {
	padding: 40px 0 30px;
}

.page-hero-shop .woocommerce-breadcrumb {
	margin-bottom: 0;
}

.single-bc {
	padding: 28px 0 0;
}

.single-bc .woocommerce-breadcrumb {
	margin: 0;
}

.wc-page .page-title {
	font-size: clamp(30px, 3.8vw, 43px);
	margin-bottom: 8px;
}

.shop-sub {
	color: var(--muted);
	max-width: 620px;
	margin: 8px 0 0;
	font-size: 16.5px;
}

.woocommerce-result-count {
	color: var(--muted);
	font-size: 14px;
	margin: 26px 0 0;
	float: left;
}

.woocommerce-ordering {
	float: right;
	margin: 20px 0 0;
}

select,
.woocommerce select,
.woocommerce-ordering select {
	appearance: none;
	-webkit-appearance: none;
	padding: 10px 38px 10px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234c3e30' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center;
	font-family: var(--font-body);
	font-size: 14.5px;
	color: var(--ink);
	cursor: pointer;
}

.wc-page .woocommerce-notices-wrapper:not(:empty) {
	margin-bottom: 24px;
}

/* ================= WooCommerce: product loop ================= */
ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	list-style: none;
	margin: 36px 0 0;
	padding: 0;
	clear: both;
}

/* kill Woo's clearfix pseudo elements: they become grid items */
ul.products::before,
ul.products::after {
	content: none !important;
}

ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	min-width: 0;
	position: relative;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
}

ul.products li.product:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow);
	border-color: rgba(109, 150, 130, 0.45);
}

ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-decoration: none;
	color: inherit;
}

ul.products li.product img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
	background: var(--surface-2);
}

ul.products li.product .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 5px 12px;
	border-radius: var(--radius-sm);
	background: var(--accent-deep);
	color: #ffffff;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

ul.products li.product .woocommerce-loop-product__title {
	font-size: 16.5px;
	font-weight: 500;
	line-height: 1.35;
	padding: 16px 18px 0;
	color: var(--ink);
	letter-spacing: 0.01em;
	font-family: var(--font-body);
}

ul.products li.product .price {
	padding: 6px 18px 0;
	color: var(--ink-soft);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 17.5px;
	letter-spacing: 0.01em;
}

ul.products li.product .price del {
	opacity: 0.55;
	margin-right: 7px;
	font-weight: 400;
}

ul.products li.product .price ins {
	text-decoration: none;
	color: var(--accent-text);
	font-weight: 500;
}

ul.products li.product .button {
	margin: 14px 18px 20px;
	align-self: start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--dark-ink);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

ul.products li.product .button:hover {
	background: var(--accent-deep);
	border-color: var(--accent-deep);
	color: #ffffff;
}

ul.products li.product .button.loading {
	opacity: 0.6;
	pointer-events: none;
}

ul.products li.product .added_to_cart {
	margin: -8px 18px 20px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--accent-text);
	text-decoration: none;
}

.woocommerce-pagination {
	margin-top: 48px;
	display: flex;
	justify-content: center;
	clear: both;
}

.woocommerce-pagination ul.page-numbers {
	list-style: none;
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.woocommerce-pagination .page-numbers li .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 10px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-soft);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14.5px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.woocommerce-pagination .page-numbers li .page-numbers.current {
	background: var(--ink);
	border-color: var(--ink);
	color: #ffffff;
}

.woocommerce-pagination .page-numbers li a.page-numbers:hover {
	background: var(--accent-deep);
	border-color: var(--accent-deep);
	color: #ffffff;
}

.woocommerce-no-products-found {
	padding: 60px 0;
	text-align: center;
	color: var(--muted);
}

/* ================= WooCommerce: notices ================= */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	list-style: none;
	margin: 0 0 22px;
	padding: 15px 20px;
	border-radius: var(--radius-sm);
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 3px solid var(--ink);
	color: var(--ink-soft);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 15px;
}

.woocommerce-message {
	border-left-color: var(--accent-deep);
}

.woocommerce-error {
	border-left-color: var(--danger);
}

.woocommerce-error li {
	margin: 0;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	order: 2;
	display: inline-flex;
	padding: 9px 16px;
	border-radius: var(--radius-sm);
	background: var(--ink);
	color: var(--dark-ink);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	border: 0;
	cursor: pointer;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
	background: var(--accent-deep);
	color: #ffffff;
}

/* ================= WooCommerce: single product ================= */
.wc-page div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	gap: 60px;
	align-items: start;
	position: relative;
}

.wc-page div.product .summary {
	min-width: 0;
	float: none !important;
	width: auto !important;
}

.wc-page div.product > .onsale {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 5;
	padding: 6px 14px;
	border-radius: var(--radius-sm);
	background: var(--accent-deep);
	color: #ffffff;
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.woocommerce-product-gallery {
	position: relative;
	float: none !important;
	width: auto !important;
}

.woocommerce-product-gallery__wrapper {
	margin: 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface-2);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
}

.woocommerce-product-gallery img {
	width: 100%;
	height: auto;
	display: block;
}

.woocommerce-product-gallery .flex-control-thumbs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
}

.woocommerce-product-gallery .flex-control-thumbs li {
	width: 84px;
}

.woocommerce-product-gallery .flex-control-thumbs img {
	border-radius: var(--radius-sm);
	border: 2px solid transparent;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover {
	opacity: 1;
	border-color: var(--accent-deep);
}

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 9;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	text-indent: -9999px;
	overflow: hidden;
	border: 1px solid var(--line);
}

.woocommerce-product-gallery__trigger::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23372a1f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat center;
}

.summary .product_title {
	font-size: clamp(28px, 3.2vw, 38px);
	margin-bottom: 14px;
}

.summary .price {
	font-size: 25px;
	font-family: var(--font-display);
	font-weight: 500;
	color: var(--ink);
	margin-bottom: 18px;
	display: block;
	letter-spacing: 0.01em;
}

.summary .price del {
	opacity: 0.5;
	margin-right: 10px;
	font-size: 0.8em;
	font-weight: 400;
}

.summary .price ins {
	text-decoration: none;
	color: var(--accent-text);
}

.summary .woocommerce-product-details__short-description {
	color: var(--muted);
	font-size: 16.5px;
	margin-bottom: 24px;
}

.summary form.cart {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 6px 0 26px;
}

.summary .quantity .qty {
	width: 84px;
	padding: 13px 8px 13px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	font-family: var(--font-body);
	font-size: 15.5px;
	color: var(--ink);
}

.summary .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 15px 32px;
	border-radius: var(--radius);
	border: 1px solid var(--accent-deep);
	background: var(--accent-deep);
	color: #ffffff;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.summary .single_add_to_cart_button:hover {
	background: var(--ink);
	border-color: var(--ink);
	transform: translateY(-2px);
}

/* celadon hairline above the meta block */
.summary .product_meta {
	display: grid;
	gap: 6px;
	padding-top: 20px;
	border-top: 1px solid rgba(143, 181, 163, 0.48);
	font-size: 14px;
	color: var(--muted);
}

.summary .product_meta > span {
	display: block;
}

.summary .product_meta a {
	color: var(--accent-text);
	text-decoration: none;
}

.summary .stock.in-stock {
	color: var(--okay);
	font-weight: 600;
}

.summary .stock.out-of-stock {
	color: var(--danger);
	font-weight: 600;
}

/* ================= WooCommerce: tabs & specs ================= */
.woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: 26px;
}

.woocommerce-tabs ul.tabs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
	border-bottom: 1px solid var(--line);
}

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 11px 20px;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.02em;
	color: var(--muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--ink);
	border-bottom-color: var(--accent-deep);
}

.woocommerce-tabs .panel {
	color: var(--ink-soft);
}

.woocommerce-tabs .panel > h2:first-child {
	display: none;
}

.prod-specs {
	grid-column: 1 / -1;
	margin-top: 40px;
}

.prod-specs-title {
	font-size: 25px;
	margin-bottom: 18px;
}

.prod-specs-scroll {
	overflow-x: auto;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--surface);
}

.prod-specs-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 420px;
}

.prod-specs-table th {
	width: 34%;
	text-align: left;
	padding: 14px 22px;
	font-weight: 600;
	color: var(--ink);
	border-bottom: 1px solid var(--line);
	background: var(--accent-soft);
}

.prod-specs-table td {
	padding: 14px 22px;
	border-bottom: 1px solid var(--line);
	color: var(--ink-soft);
}

.prod-specs-table tr:last-child td,
.prod-specs-table tr:last-child th {
	border-bottom: 0;
}

.wc-page div.product .up-sells,
.wc-page div.product .related.products {
	grid-column: 1 / -1;
	margin-top: 48px;
}

.up-sells > h2,
.related.products > h2 {
	font-size: 28px;
	margin-bottom: 8px;
}

.up-sells ul.products,
.related.products ul.products {
	margin-top: 22px;
}

/* ================= WooCommerce: forms ================= */
.woocommerce form .form-row {
	margin-bottom: 16px;
	padding: 0;
}

.woocommerce form .form-row label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 6px;
}

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
	font-family: var(--font-body);
	font-size: 15.5px;
	color: var(--ink);
	transition: border-color 0.2s ease;
}

.woocommerce input:focus,
.woocommerce textarea:focus {
	outline: none;
	border-color: var(--accent-deep);
}

.woocommerce .required {
	color: var(--danger);
	text-decoration: none;
}

.select2-container .select2-selection--single {
	height: 47px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
}

.select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 44px;
	padding-left: 16px;
	color: var(--ink);
}

.select2-container .select2-selection--single .select2-selection__arrow {
	height: 44px;
	right: 8px;
}

/* ================= WooCommerce: cart ================= */
table.shop_table {
	width: 100%;
	border-collapse: collapse;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

table.shop_table th,
table.shop_table td {
	padding: 16px 18px;
	text-align: left;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
}

table.shop_table thead th {
	background: var(--accent-soft);
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
}

table.shop_table tbody tr:last-child td,
table.shop_table tbody tr:last-child th {
	border-bottom: 0;
}

table.shop_table .product-thumbnail img {
	width: 74px;
	height: 74px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	display: block;
}

table.shop_table .product-name a {
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

table.shop_table .product-name a:hover {
	color: var(--accent-text);
}

table.shop_table .product-remove a {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--surface-2);
	color: var(--ink-soft);
	font-size: 19px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

table.shop_table .product-remove a:hover {
	background: var(--danger);
	color: #fff;
}

table.shop_table .quantity .qty {
	width: 76px;
	padding: 9px 6px 9px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--bg);
	font-family: var(--font-body);
	font-size: 14.5px;
}

.woocommerce-cart-form {
	margin-bottom: 30px;
}

.woocommerce-cart-form .coupon {
	display: flex;
	align-items: center;
	gap: 10px;
	float: left;
}

.woocommerce-cart-form .coupon .input-text {
	width: 190px;
	padding: 11px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--bg);
	font-family: var(--font-body);
	font-size: 14px;
}

.woocommerce-cart-form td.actions {
	padding: 16px 18px;
}

/* generic Woo buttons (coupon, update cart, form submits) */
button.wp-element-button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--dark-ink);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

button.wp-element-button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover {
	background: var(--accent-deep);
	border-color: var(--accent-deep);
	color: #ffffff;
}

.woocommerce-cart-form td.actions > .button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.cart-collaterals {
	display: flex;
	justify-content: flex-end;
}

.cart-collaterals .cart_totals {
	width: min(430px, 100%);
	float: none !important;
}

.cart-collaterals .cart_totals > h2 {
	font-size: 23px;
	margin-bottom: 14px;
}

.wc-proceed-to-checkout {
	padding-top: 18px;
}

.wc-proceed-to-checkout .checkout-button {
	width: 100%;
	justify-content: center;
	padding: 15px 28px;
	font-size: 15px;
	letter-spacing: 0.02em;
	background: var(--accent-deep);
	border-color: var(--accent-deep);
	color: #ffffff;
}

.wc-proceed-to-checkout .checkout-button:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: #ffffff;
}

/* ================= WooCommerce: checkout ================= */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 44px;
	align-items: start;
}

.woocommerce-checkout form.checkout > #customer_details {
	min-width: 0;
}

.woocommerce-checkout form.checkout > #order_review_heading,
.woocommerce-checkout form.checkout > #order_review {
	grid-column: 2;
	min-width: 0;
}

.woocommerce-checkout #order_review_heading {
	font-size: 23px;
	margin: 0 0 14px;
}

.woocommerce-checkout #order_review {
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 3px solid var(--accent);
	border-radius: var(--radius);
	padding: 26px;
	position: sticky;
	top: 100px;
}

.woocommerce-checkout #order_review table.shop_table {
	border: 0;
	border-radius: 0;
	background: transparent;
}

.woocommerce-billing-fields > h3,
.woocommerce-additional-fields > h3 {
	font-size: 23px;
	margin: 0 0 18px;
}

.woocommerce-additional-fields > h3 {
	margin-top: 26px;
}

#payment ul.wc_payment_methods {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: grid;
	gap: 10px;
}

#payment ul.wc_payment_methods li {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 14px 16px;
}

.woocommerce input[type="radio"],
.woocommerce input[type="checkbox"] {
	accent-color: var(--accent-deep);
	margin-right: 8px;
}

#payment div.payment_box {
	margin-top: 10px;
	font-size: 14px;
	color: var(--muted);
}

.woocommerce #payment #place_order {
	width: 100%;
	justify-content: center;
	padding: 15px 28px;
	font-size: 15px;
	letter-spacing: 0.02em;
	background: var(--accent-deep);
	border-color: var(--accent-deep);
	color: #ffffff;
}

.woocommerce #payment #place_order:hover {
	background: var(--ink);
	border-color: var(--ink);
}

.woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 16px;
	font-size: 14px;
	color: var(--muted);
}

/* ================= WooCommerce: account ================= */
body.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 44px;
	align-items: start;
}

body.woocommerce-account .woocommerce > h2 {
	grid-column: 1 / -1;
}

.woocommerce-MyAccount-navigation {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 12px;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 11px 16px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink-soft);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
	background: rgba(143, 181, 163, 0.14);
	color: var(--ink);
}

.woocommerce-MyAccount-content {
	min-width: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 30px;
}

.woocommerce-MyAccount-content > h3 {
	font-size: 23px;
	margin-bottom: 16px;
}

.woocommerce-MyAccount-content fieldset {
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 18px;
	margin: 22px 0;
}

.woocommerce-MyAccount-content legend {
	font-weight: 600;
	color: var(--ink);
	padding: 0 8px;
}

.woocommerce-ResetPassword,
.woocommerce-form-login,
.woocommerce-form-register {
	max-width: 460px;
}

.woocommerce-ResetPassword .button,
.woocommerce-form-login .button,
.woocommerce-form-register .button {
	margin-top: 8px;
}

.woocommerce-LostPassword {
	font-size: 14px;
	margin-top: 12px;
}

.woocommerce-privacy-policy-text {
	font-size: 13.5px;
	color: var(--muted);
	margin: 12px 0;
}

.woocommerce-privacy-policy-text a {
	color: var(--accent-text);
}

.show-password-input {
	display: none;
}

.woocommerce-order ul.order_details {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 30px;
	padding: 20px 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.woocommerce-order ul.order_details li {
	flex: 1 1 160px;
	padding: 6px 18px;
	border-right: 1px solid var(--line);
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--muted);
}

.woocommerce-order ul.order_details li:last-child {
	border-right: 0;
}

.woocommerce-order ul.order_details li strong {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ink);
}

.woocommerce-order .woocommerce-notice {
	font-size: 19px;
	font-weight: 600;
	color: var(--okay);
	margin-bottom: 22px;
}

.woocommerce-customer-details address {
	font-style: normal;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px 24px;
	line-height: 1.8;
}

.woocommerce-column__title {
	font-size: 22px;
	margin: 26px 0 12px;
}
/* ================= Responsive ================= */
@media (max-width: 1200px) {
	.prod-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.up-sells ul.products,
	.related.products ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.main-nav {
		display: none;
	}

	.nav-toggle {
		display: inline-grid;
	}

	.cats-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.steps-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.perks-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer-grid {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: 40px;
	}

	ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
		gap: 26px;
	}
}

@media (max-width: 900px) {
	.sec {
		padding-block: 72px;
	}

	.section-pad {
		padding-block: 66px;
	}

	.prod-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.quotes-grid {
		grid-template-columns: 1fr;
	}

	.split-in {
		grid-template-columns: 1fr;
		gap: 46px;
	}

	.split-flip .split-media {
		order: 0;
	}

	.split-media::after {
		right: 12px;
		top: -20px;
	}

	.split-flip .split-media::after {
		left: 12px;
	}

	.wc-page div.product {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.woocommerce-checkout form.checkout {
		grid-template-columns: 1fr;
	}

	.woocommerce-checkout form.checkout > #order_review_heading,
	.woocommerce-checkout form.checkout > #order_review {
		grid-column: 1;
	}

	.woocommerce-checkout #order_review {
		position: static;
	}

	.contact-cards {
		grid-template-columns: 1fr;
	}

	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.up-sells ul.products,
	.related.products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	body {
		font-size: 16px;
	}

	.wrap {
		width: calc(100% - 36px);
	}

	.hero {
		min-height: 540px;
	}

	.hero-in {
		padding-block: 92px 84px;
	}

	.hero-stats {
		gap: 26px;
		flex-wrap: wrap;
	}

	.hero::after {
		height: 46px;
	}

	.cta-in {
		flex-direction: column;
		align-items: flex-start;
	}

	.cta-band::after {
		width: min(420px, 80vw);
		height: 110px;
	}

	.perks-grid {
		grid-template-columns: 1fr;
		gap: 4px;
		padding-block: 14px;
	}

	.split-media::before {
		inset: 14px -14px -14px 14px;
	}

	.split-flip .split-media::before {
		inset: 14px 14px -14px -14px;
	}

	.woocommerce-result-count,
	.woocommerce-ordering {
		float: none;
		margin: 10px 0 0;
	}

	.woocommerce-ordering {
		margin-bottom: 4px;
	}

	/* cart table collapses into stacked rows */
	table.shop_table.cart {
		border: 0;
		background: transparent;
	}

	table.shop_table.cart > thead {
		display: none;
	}

	table.shop_table.cart > tbody,
	table.shop_table.cart > tbody > tr {
		display: block;
	}

	table.shop_table.cart > tbody > tr {
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--radius);
		padding: 8px 14px;
		margin-bottom: 14px;
	}

	table.shop_table.cart > tbody > tr > td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		border-bottom: 1px dashed var(--line);
		padding: 12px 4px;
	}

	table.shop_table.cart > tbody > tr > td:last-child {
		border-bottom: 0;
	}

	table.shop_table.cart td[data-title]::before {
		content: attr(data-title);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--muted);
	}

	table.shop_table.cart td.product-thumbnail::before,
	table.shop_table.cart td.actions::before {
		content: none;
	}

	.woocommerce-cart-form .coupon {
		float: none;
		flex-wrap: wrap;
	}

	.woocommerce-cart-form .coupon .input-text {
		flex: 1;
		min-width: 0;
	}

	.woocommerce-cart-form td.actions {
		display: grid !important;
		gap: 12px;
	}

	.cart-collaterals {
		justify-content: stretch;
	}

	.cart-collaterals .cart_totals {
		width: 100%;
	}

	.contact-rail {
		top: auto;
		translate: 0 0;
		bottom: 14px;
		display: flex;
		padding: 8px;
	}

	.contact-rail.rail-right {
		right: 14px;
	}

	.contact-rail.rail-left {
		left: 14px;
	}

	.rail-btn {
		width: 42px;
		height: 42px;
	}

	.rail-no-mobile {
		display: none;
	}
}

@media (max-width: 560px) {
	.header-bar {
		min-height: 62px;
		gap: 12px;
	}

	.brand-mark {
		width: 36px;
		height: 36px;
		border-radius: 10px 10px 13px 13px;
	}

	.brand-name {
		font-size: 18px;
	}

	.hbtn {
		width: 38px;
		height: 38px;
	}

	.header-actions {
		gap: 4px;
	}

	.post-grid {
		grid-template-columns: 1fr;
	}

	.cats-grid {
		grid-template-columns: 1fr;
	}

	.steps-grid {
		grid-template-columns: 1fr;
	}

	.prod-grid {
		grid-template-columns: 1fr;
	}

	.footer-grid {
		grid-template-columns: 1fr;
		gap: 36px;
		padding-block: 56px 42px;
	}

	.footer-bottom-in {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.hero-actions .btn {
		width: 100%;
		justify-content: center;
	}

	.split-media::before {
		inset: 10px -10px -10px 10px;
	}

	.split-flip .split-media::before {
		inset: 10px 10px -10px -10px;
	}

	.summary form.cart {
		flex-wrap: wrap;
	}

	.summary form.cart .single_add_to_cart_button {
		flex: 1 1 100%;
		justify-content: center;
	}

	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	ul.products li.product .woocommerce-loop-product__title {
		font-size: 14.5px;
		padding: 12px 14px 0;
	}

	ul.products li.product .price {
		padding: 4px 14px 0;
	}

	ul.products li.product .button {
		margin: 10px 14px 16px;
	}

	.up-sells ul.products,
	.related.products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 390px band: keep all four header buttons on one row */
@media (max-width: 400px) {
	.header-bar {
		gap: 8px;
	}

	.brand-text {
		gap: 7px;
	}

	.brand-mark {
		width: 32px;
		height: 32px;
		border-radius: 9px 9px 12px 12px;
	}

	.brand-name {
		font-size: 15px;
		letter-spacing: 0;
	}

	.header-actions {
		gap: 2px;
	}

	.header-actions > a.hbtn:not(.cart-btn) {
		display: none;
	}

	.hbtn {
		width: 36px;
		height: 36px;
	}

	.wrap {
		width: calc(100% - 28px);
	}

	.split-media::after {
		display: none;
	}

	.page-hero::before {
		width: min(200px, 46vw);
	}

	.page-hero::after {
		display: none;
	}
}