/*
Theme Name: Kilnora
Theme URI: https://example.com/kilnora
Author: Studio
Author URI: https://example.com
Description: Quiet, editorial WooCommerce theme for handmade goods. Kaolin-white base, kiln-brown ink panels and a celadon-glaze accent; Frank Ruhl Libre serif set for both headlines and body copy; a folded-map hero built from solid-colour panels split by hard crease lines; concentric thrown-ring motifs drawn as flat-colour shapes, never as gradients or tiled textures; 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: kilnora
Tags: e-commerce, custom-menu, custom-logo, featured-images, translation-ready

Fonts: Frank Ruhl Libre, used for both headings and body copy, licensed
under the SIL Open Font License 1.1 (commercial web use permitted), loaded
from Google Fonts. https://fonts.google.com/specimen/Frank+Ruhl+Libre
*/

/* ================= Design tokens ================= */
:root {
	--bg: #f7f4ef;
	--surface: #fffdf9;
	--ink: #3a2e26;
	--ink-soft: #57493d;
	--muted: #8a7b6c;
	--clay: #3a2e26;
	--clay-deep: #2e241d;
	--clay-dark: #251c15;
	--clay-ink: #f4efe6;
	--clay-muted: #b3a493;
	--celadon: #7fa693;
	--celadon-deep: #5f8a76;
	--celadon-text: #47705d;
	--celadon-soft: #a3c4b4;
	--celadon-ink: #12211a;
	--danger: #a8452f;
	--line: rgba(58, 46, 38, 0.14);
	--line-dark: rgba(244, 239, 230, 0.14);
	--radius: 16px;
	--radius-sm: 10px;
	--radius-btn: 4px;
	--radius-btn-hover: 10px;
	--shadow: 0 24px 48px -30px rgba(58, 46, 38, 0.42);
	--font-display: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
	--font-body: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
	--wrap: 1200px;
}

/* ================= 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: 16px;
	line-height: 1.7;
	color: var(--ink-soft);
	background: var(--bg);
}

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

a {
	color: inherit;
}

::selection {
	background: var(--celadon);
	color: var(--celadon-ink);
}

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

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

p {
	margin: 0;
}

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 42px);
}

.section-pad {
	padding-block: clamp(54px, 7.5vw, 96px);
}

.sec {
	padding-block: clamp(54px, 7.5vw, 96px);
}

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

.skip-link {
	position: absolute;
	top: -60px;
	left: 16px;
	z-index: 200;
	background: var(--clay);
	color: var(--clay-ink);
	padding: 12px 20px;
	border-radius: var(--radius-sm);
	transition: top 0.2s;
}

.skip-link:focus {
	top: 12px;
}

body.no-scroll {
	overflow: hidden;
}

/* ================= Reveal animation (content never hidden by default) ================= */
html.fx [data-rv] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.65s cubic-bezier(0.25, 0.7, 0.3, 1), transform 0.65s cubic-bezier(0.25, 0.7, 0.3, 1);
}

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 (soft rectangles, quiet) ================= */
/*
 * Button group: double-back-and-forth radius. Corners rest at a tight 4px.
 * On hover the radius plays a single one-shot pulse -- out past a rounded
 * 18px, then settling back to a softer 10px -- and stays there only while
 * hovered; it never loops or continues animating.
 */
@keyframes btn-radius-pulse {
	0% {
		border-radius: var(--radius-btn);
	}
	55% {
		border-radius: 18px;
	}
	100% {
		border-radius: var(--radius-btn-hover);
	}
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 52px;
	padding: 0 28px;
	background: var(--clay);
	color: var(--clay-ink);
	border: 1.5px solid var(--clay);
	border-radius: var(--radius-btn);
	font-family: var(--font-body);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.22s, color 0.22s, border-color 0.22s, transform 0.22s;
}

.btn:hover,
.btn:focus-visible {
	animation: btn-radius-pulse 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
	.btn:hover,
	.btn:focus-visible {
		animation: none;
		border-radius: var(--radius-btn-hover);
	}
}

.btn:hover {
	background: var(--clay-dark);
	border-color: var(--clay-dark);
	transform: translateY(-2px);
}

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

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

.btn-ghost {
	background: transparent;
	border-color: rgba(58, 46, 38, 0.35);
	color: var(--ink);
}

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

.btn-ghost-light {
	background: rgba(244, 239, 230, 0.08);
	border-color: rgba(244, 239, 230, 0.55);
	color: #fff;
}

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

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

.btn-dark-on-accent:hover {
	background: transparent;
	color: var(--celadon-ink);
	border-color: rgba(18, 33, 26, 0.55);
	transform: translateY(-2px);
}

.btn-sm {
	height: 44px;
	padding: 0 20px;
	font-size: 13.5px;
}

.btn .icon {
	flex: none;
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 2px solid rgba(127, 166, 147, 0.75);
	padding-bottom: 2px;
}

.text-link:hover {
	border-color: var(--celadon-deep);
	color: var(--celadon-text);
}

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

/* concentric thrown-ring dot: solid centre + two solid ring outlines, flat colour only */
.kicker::before {
	content: "";
	width: 9px;
	height: 9px;
	flex: none;
	border-radius: 50%;
	background: var(--celadon);
	box-shadow:
		0 0 0 3px var(--bg),
		0 0 0 4.5px rgba(127, 166, 147, 0.55),
		0 0 0 6px var(--bg),
		0 0 0 7px rgba(127, 166, 147, 0.28);
}

.sec-head {
	max-width: 720px;
	margin-bottom: clamp(28px, 4.5vw, 48px);
}

.sec-title {
	font-size: clamp(30px, 3.9vw, 44px);
	font-weight: 600;
}

.sec-sub {
	margin-top: 12px;
	font-size: 16.5px;
	color: var(--muted);
	max-width: 620px;
}

.sec-dark {
	background: var(--clay-deep);
	color: var(--clay-ink);
}

.sec-dark .sec-title {
	color: #fbf8f1;
}

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

.sec-dark .kicker {
	color: var(--celadon-soft);
}

.sec-dark .kicker::before {
	background: var(--celadon-soft);
	box-shadow:
		0 0 0 3px var(--clay-deep),
		0 0 0 4.5px rgba(163, 196, 180, 0.5),
		0 0 0 6px var(--clay-deep),
		0 0 0 7px rgba(163, 196, 180, 0.26);
}

/* ================= Site header ================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(247, 244, 239, 0.92);
	border-bottom: 1px solid var(--line);
	transition: box-shadow 0.25s, background 0.25s;
}

.site-header.scrolled {
	background: #f7f4ef;
	box-shadow: 0 14px 32px -26px rgba(58, 46, 38, 0.55);
}

.header-bar {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 38px);
	min-height: 78px;
}

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

.brand img {
	max-height: 44px;
	width: auto;
	display: block;
}

.brand-text {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	color: var(--ink);
}

/* potter's wheel mark: a true circle with an inner glaze ring */
.brand-mark {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--celadon);
	color: var(--celadon-ink);
	box-shadow: inset 0 0 0 3px rgba(247, 244, 239, 0.35), inset 0 0 0 4.5px rgba(18, 33, 26, 0.18);
	display: grid;
	place-items: center;
	flex: none;
}

.brand-name {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.005em;
	white-space: nowrap;
}

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

.nav-list {
	display: flex;
	align-items: center;
	gap: clamp(4px, 1vw, 14px);
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.nav-list > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 10px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	color: var(--ink-soft);
	border-radius: 8px;
	transition: color 0.2s;
	white-space: nowrap;
	text-underline-offset: 7px;
	text-decoration-thickness: 2px;
}

.nav-list > li > a:hover,
.nav-list > li.current-menu-item > a,
.nav-list > li.current-menu-ancestor > a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--celadon);
	text-decoration-thickness: 2px;
}

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

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

.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;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ink-soft);
	text-decoration: none;
	border-radius: 8px;
}

.nav-list .sub-menu a:hover {
	background: rgba(127, 166, 147, 0.14);
	color: var(--ink);
}

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

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

.hbtn:hover {
	border-color: var(--celadon-deep);
	color: var(--ink);
	background: rgba(127, 166, 147, 0.14);
}

.cart-count {
	position: absolute;
	top: -6px;
	right: -7px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--celadon);
	color: var(--celadon-ink);
	font-size: 11px;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
}

.nav-toggle {
	display: none;
}

/* ================= Drawer / search / QR overlays ================= */
.drawer,
.search-layer,
.qr-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
}

/* keep hidden state truly hidden so transparent layers never eat clicks */
.drawer[hidden],
.search-layer[hidden],
.qr-modal[hidden] {
	display: none !important;
}

.drawer-scrim,
.search-scrim,
.qr-scrim {
	position: absolute;
	inset: 0;
	background: rgba(37, 28, 21, 0.55);
	opacity: 0;
	transition: opacity 0.24s;
}

.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(380px, 92vw);
	background: var(--bg);
	color: var(--ink);
	padding: 20px 24px 40px;
	overflow-y: auto;
	transform: translateX(102%);
	transition: transform 0.3s cubic-bezier(0.3, 0.9, 0.35, 1);
	border-radius: var(--radius) 0 0 var(--radius);
	border-left: 4px solid var(--celadon);
}

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

.drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.drawer-title {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 600;
}

.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: 19px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
}

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

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

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

.drawer-links {
	display: flex;
	gap: 18px;
	margin-top: 22px;
}

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

.search-panel {
	position: absolute;
	left: 50%;
	top: 14vh;
	transform: translate(-50%, -14px);
	width: min(680px, calc(100vw - 40px));
	display: flex;
	align-items: center;
	gap: 12px;
	opacity: 0;
	transition: opacity 0.24s, transform 0.24s;
}

.search-layer.open .search-panel {
	opacity: 1;
	transform: translate(-50%, 0);
}

.search-layer .search-form {
	flex: 1;
	max-width: none;
	background: var(--bg);
}

.search-layer .hbtn {
	background: var(--bg);
}

.search-form {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 560px;
	padding: 5px 6px 5px 20px;
	border: 1.5px solid var(--clay);
	border-radius: 12px;
	background: var(--surface);
	color: var(--ink);
}

.search-field {
	flex: 1;
	min-width: 0;
	height: 46px;
	border: 0;
	background: transparent;
	font: inherit;
	color: inherit;
	outline: none;
}

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

.search-submit {
	flex: none;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 9px;
	background: var(--celadon);
	color: var(--celadon-ink);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.search-submit:hover {
	background: var(--clay);
	color: var(--clay-ink);
}

/* ================= Hero: H-2Y folded map ================= */
/*
 * The hero reads as a folded instruction sheet: three solid-colour panels
 * (ink / photo / celadon) meet at two straight crease lines that lean at
 * different angles -- not a grid, just two independent folds. Each panel is
 * an absolutely-positioned full-bleed layer, clipped with clip-path so the
 * three trapezoids tile the hero with zero gap or overlap. The crease itself
 * is a solid-colour, zero-blur drop-shadow that traces the exact clipped
 * edge, so it always lines up regardless of viewport width.
 */
.hero {
	position: relative;
	min-height: min(88vh, 800px);
	background: var(--clay-dark);
	color: #fff;
	overflow: clip;
	border-bottom: 5px solid var(--celadon);
}

.hero-folds {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.fold {
	position: absolute;
	inset: 0;
	overflow: clip;
}

.fold-a {
	display: flex;
	align-items: flex-end;
	background: var(--clay-dark);
	clip-path: polygon(0 0, 54% 0, 50% 100%, 0 100%);
	z-index: 3;
	filter: drop-shadow(3px 0 0 rgba(244, 239, 230, 0.45));
}

.fold-b {
	background: var(--clay);
	clip-path: polygon(54% 0, 86% 0, 90% 100%, 50% 100%);
	z-index: 1;
}

/*
 * fold-c is absolutely positioned across the FULL hero width (inset: 0) and
 * only *painted* inside its trapezoid via clip-path -- so its flex content
 * has to be anchored to the right edge (where the visible sliver actually
 * is), never centred, or it lands outside the clip and simply disappears.
 */
.fold-c {
	background: var(--celadon);
	clip-path: polygon(86% 0, 100% 0, 100% 100%, 90% 100%);
	z-index: 3;
	filter: drop-shadow(-3px 0 0 rgba(18, 33, 26, 0.35));
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding: clamp(70px, 10vw, 120px) clamp(20px, 3vw, 36px) clamp(64px, 8.5vw, 104px) 0;
}

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

.hero-img,
.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-video {
	opacity: 0;
	transition: opacity 1.1s ease;
}

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

/*
 * Giant number + vertical label living inside the narrow celadon fold.
 * Both run bottom-to-top (vertical-rl, rotated) so their long axis uses the
 * fold's generous height instead of its narrow width -- that is what keeps
 * an oversized number from being clipped by the fold's own trapezoid.
 */
.fold-number {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--font-display);
	font-size: clamp(30px, 3.6vw, 46px);
	font-weight: 700;
	color: var(--celadon-ink);
	white-space: nowrap;
}

.fold-vert-label {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(18, 33, 26, 0.72);
	white-space: nowrap;
}

.hero-in {
	width: 100%;
	padding-block: clamp(70px, 10vw, 120px) clamp(64px, 8.5vw, 104px);
}

.hero-copy {
	max-width: min(560px, 46vw);
}

.hero-kicker {
	color: var(--celadon-soft);
}

.hero-kicker::before {
	background: var(--celadon-soft);
	box-shadow:
		0 0 0 3px var(--clay-dark),
		0 0 0 4.5px rgba(163, 196, 180, 0.5),
		0 0 0 6px var(--clay-dark),
		0 0 0 7px rgba(163, 196, 180, 0.26);
}

.hero-title {
	font-size: clamp(38px, 4.6vw, 60px);
	font-weight: 500;
	color: #fdfbf5;
	letter-spacing: -0.012em;
	line-height: 1.08;
}

.hero-sub {
	margin-top: 18px;
	font-size: 16.5px;
	line-height: 1.75;
	color: rgba(244, 239, 230, 0.88);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.hero-actions .btn-accent {
	background: var(--celadon);
	border-color: var(--celadon);
	color: var(--celadon-ink);
}

.hero-actions .btn-accent:hover {
	background: #fff;
	border-color: #fff;
	color: var(--clay-dark);
}

.hero-stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 3vw, 40px);
	margin: 40px 0 0;
	padding-top: 22px;
	border-top: 1px solid rgba(244, 239, 230, 0.28);
}

.hero-stats .stat {
	display: flex;
	flex-direction: column-reverse;
}

.hero-stats dd {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 500;
	color: var(--celadon-soft);
	line-height: 1.1;
}

.hero-stats dt {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(244, 239, 230, 0.62);
	margin-top: 6px;
}

/* ================= Perks strip ================= */
.perks {
	background: var(--bg);
}

.perks-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	padding-block: clamp(42px, 6vw, 68px);
}

.perk {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 22px;
	transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.perk:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
	border-color: rgba(127, 166, 147, 0.6);
}

/* thrown-ring icon chip: flat tint disc + one solid ring outline */
.perk-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(127, 166, 147, 0.16);
	box-shadow: inset 0 0 0 1.5px rgba(127, 166, 147, 0.4);
	color: var(--celadon-text);
	margin-bottom: 15px;
}

.perk-title {
	font-size: 18.5px;
	margin-bottom: 7px;
}

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

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

.cat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: clip;
	text-decoration: none;
	color: inherit;
	transition: transform 0.25s, box-shadow 0.25s;
}

.cat-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow);
}

.cat-media {
	display: block;
	aspect-ratio: 4 / 3;
	background: #ece7de;
	overflow: hidden;
}

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

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

.cat-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-top: 3px solid rgba(127, 166, 147, 0.4);
	transition: border-color 0.25s;
}

.cat-card:hover .cat-meta {
	border-top-color: var(--celadon);
}

.cat-name {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 600;
	color: var(--ink);
}

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

.cat-arrow {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--celadon);
	color: var(--celadon-ink);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.25s, transform 0.25s;
	box-shadow: 0 10px 20px -10px rgba(37, 28, 21, 0.55);
}

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

/* ================= Featured product cards (kiln-brown panel) ================= */
.prod-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.prod-card {
	display: flex;
	flex-direction: column;
	background: rgba(244, 239, 230, 0.05);
	border: 1px solid var(--line-dark);
	border-radius: var(--radius);
	overflow: clip;
	transition: transform 0.25s, border-color 0.25s;
}

.prod-card:hover {
	transform: translateY(-5px);
	border-color: rgba(127, 166, 147, 0.6);
}

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

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

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

.badge {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 8px;
	background: var(--clay);
	color: var(--clay-ink);
	font-family: var(--font-body);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.badge-sale {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--celadon);
	color: var(--celadon-ink);
}

.prod-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px;
	flex: 1;
}

.prod-name {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
}

.prod-name a {
	color: var(--clay-ink);
	text-decoration: none;
}

.prod-name a:hover {
	color: var(--celadon-soft);
}

.prod-price {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--celadon-soft);
}

.prod-price del {
	color: var(--clay-muted);
	font-weight: 400;
	margin-right: 8px;
}

.prod-price ins {
	text-decoration: none;
}

.prod-btn {
	margin-top: auto;
	align-self: flex-start;
	background: transparent;
	border-color: rgba(244, 239, 230, 0.38);
	color: var(--clay-ink);
}

.prod-btn:hover {
	background: var(--celadon);
	border-color: var(--celadon);
	color: var(--celadon-ink);
	transform: none;
}

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

.split-in {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(32px, 5vw, 68px);
	align-items: center;
}

/* photo sits over a solid celadon card, corner notched to echo the hero fold */
.split-media {
	position: relative;
}

.split-media::before {
	content: "";
	position: absolute;
	inset: -18px -14px 14px -18px;
	background: var(--celadon);
	clip-path: polygon(0 0, 100% 0, 100% 84%, 84% 100%, 0 100%);
	z-index: 0;
}

.split-media img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	z-index: 1;
}

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

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

.split-text {
	font-size: 16px;
	line-height: 1.85;
	color: var(--muted);
	margin-bottom: 26px;
	white-space: pre-line;
}

/* ================= Steps ================= */
.steps {
	background: var(--bg);
}

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

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

/* serif numeral inside a double glaze ring */
.step-num {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1.5px solid var(--celadon-deep);
	box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 5.5px rgba(127, 166, 147, 0.5);
	color: var(--celadon-text);
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 15px;
	background: var(--surface);
}

.step-title {
	font-size: 18.5px;
	margin-bottom: 7px;
}

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

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

.quote {
	margin: 0;
	background: rgba(244, 239, 230, 0.05);
	border: 1px solid var(--line-dark);
	border-top: 3px solid rgba(127, 166, 147, 0.55);
	border-radius: var(--radius);
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
}

.quote-mark {
	color: var(--celadon-soft);
	margin-bottom: 14px;
}

.quote blockquote {
	margin: 0 0 18px;
	font-family: var(--font-display);
	font-size: 18px;
	font-style: italic;
	font-weight: 500;
	line-height: 1.6;
	color: var(--clay-ink);
	flex: 1;
}

.quote-name {
	display: block;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14.5px;
	color: #fff;
}

.quote-role {
	display: block;
	font-size: 13px;
	color: var(--clay-muted);
	margin-top: 2px;
}

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

.post-card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: clip;
	transition: transform 0.25s, box-shadow 0.25s;
}

.post-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow);
}

.post-media {
	display: block;
	aspect-ratio: 16 / 10;
	background: #ece7de;
	overflow: hidden;
}

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

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

.post-body {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 22px;
	flex: 1;
}

.post-date {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--celadon-text);
	font-weight: 700;
}

.post-title {
	font-family: var(--font-display);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.3;
}

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

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

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

.post-card .text-link {
	margin-top: 2px;
	align-self: flex-start;
}

/* ================= CTA band (celadon glaze, kiln-brown copy) ================= */
.cta-band {
	background: var(--celadon);
	color: var(--celadon-ink);
	position: relative;
	overflow: clip;
}

/* soft kiln-brown disc floating in the corner */
.cta-band::after {
	content: "";
	position: absolute;
	top: -150px;
	right: -90px;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	border: 46px solid rgba(18, 33, 26, 0.08);
	pointer-events: none;
}

.cta-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
	padding-block: clamp(44px, 6vw, 72px);
	position: relative;
	z-index: 1;
}

.cta-title {
	font-size: clamp(28px, 3.7vw, 44px);
	font-weight: 600;
	color: #14231c;
}

.cta-text {
	margin-top: 10px;
	font-size: 15.5px;
	color: rgba(18, 33, 26, 0.8);
	max-width: 560px;
}

/* ================= Inner page hero ================= */
.page-hero {
	background: var(--clay-deep);
	color: var(--clay-ink);
	padding: clamp(42px, 6vw, 70px) 0 clamp(46px, 6vw, 76px);
	position: relative;
	overflow: clip;
	border-bottom: 4px solid var(--celadon);
}

.page-hero .kicker {
	color: var(--celadon-soft);
}

.page-hero-title {
	font-size: clamp(34px, 4.6vw, 54px);
	font-weight: 500;
	color: #fdfbf5;
	max-width: 880px;
}

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

/* ================= Entry content ================= */
.entry-content {
	max-width: 760px;
	font-size: 16.5px;
	line-height: 1.85;
	color: var(--ink-soft);
}

.entry-content > * + * {
	margin-top: 1.1em;
}

.entry-content h2 {
	font-size: 29px;
	margin-top: 2em;
}

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

.entry-content a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: rgba(127, 166, 147, 0.75);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

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

.entry-content ul,
.entry-content ol {
	padding-left: 24px;
}

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

.entry-content blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--celadon);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.08em;
	color: var(--ink);
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

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

.entry-content details {
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
}

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

.entry-content summary {
	cursor: pointer;
	padding: 16px 46px 16px 20px;
	font-weight: 600;
	font-family: var(--font-display);
	font-size: 18px;
	color: var(--ink);
	list-style: none;
	position: relative;
}

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

.entry-content summary::after {
	content: "+";
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-display);
	font-size: 22px;
	color: var(--celadon-deep);
}

.entry-content details[open] summary::after {
	content: "\2212";
}

.entry-content details > *:not(summary) {
	padding: 0 20px;
}

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

.entry-hero-img {
	margin: 0 auto 42px;
	max-width: 960px;
}

.entry-hero-img img {
	width: 100%;
	border-radius: var(--radius);
}

.entry-single .entry-content,
.entry-single .entry-hero-img {
	margin-inline: auto;
}

.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	max-width: 760px;
	margin: 56px auto 0;
	padding-top: 24px;
	border-top: 1px solid rgba(127, 166, 147, 0.5);
	font-weight: 600;
	font-size: 14.5px;
}

.post-nav a {
	color: var(--ink);
	text-decoration: none;
}

.post-nav a:hover {
	text-decoration: underline;
	text-decoration-color: var(--celadon);
}

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

.contact-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 8px;
}

.contact-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 3px solid rgba(127, 166, 147, 0.75);
	border-radius: var(--radius);
	padding: 26px 24px;
}

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

.contact-card p {
	font-size: 14.5px;
	color: var(--muted);
	margin: 0 0 6px;
}

.contact-card a {
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid rgba(127, 166, 147, 0.7);
}

/* ================= Archives / search / 404 ================= */
.pagination-nav {
	margin-top: 52px;
	text-align: center;
}

.pagination-nav .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	margin: 0 3px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--ink);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	background: var(--surface);
}

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

.pagination-nav a.page-numbers:hover {
	border-color: var(--celadon-deep);
	color: var(--ink);
}

.search-again {
	margin-bottom: 34px;
}

.result-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 840px;
}

.result-card {
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px 20px;
	transition: transform 0.2s, box-shadow 0.2s;
}

.result-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}

.result-media {
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: #ece7de;
}

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

.result-body {
	flex: 1;
	min-width: 0;
}

.result-body .badge {
	margin-bottom: 8px;
	background: rgba(127, 166, 147, 0.18);
	color: var(--celadon-text);
}

.result-title {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 600;
}

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

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

.result-excerpt,
.result-price {
	margin-top: 5px;
	font-size: 14px;
	color: var(--muted);
}

.result-price ins {
	text-decoration: none;
	font-weight: 600;
	color: var(--ink);
}

.result-arrow {
	flex: none;
	color: var(--celadon-deep);
}

.empty-state {
	max-width: 560px;
	margin-inline: auto;
	text-align: center;
	padding: clamp(30px, 5vw, 60px) 20px;
}

.empty-state h2 {
	font-size: 30px;
	margin-bottom: 14px;
}

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

.empty-search {
	margin: 0 auto 26px;
	max-width: 460px;
}

.empty-search .search-form {
	margin-inline: auto;
}

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

/* ================= Footer (kiln-brown, celadon glaze rim on top) ================= */
.site-footer {
	background: var(--clay-dark);
	color: var(--clay-ink);
	border-top: 4px solid var(--celadon);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1.3fr;
	gap: clamp(28px, 5vw, 72px);
	padding-block: clamp(46px, 6vw, 78px) clamp(30px, 4vw, 54px);
}

.f-brand .brand-text {
	color: var(--clay-ink);
	margin-bottom: 16px;
}

.f-brand .brand-mark {
	background: var(--celadon);
	color: var(--celadon-ink);
}

.f-about {
	color: var(--clay-muted);
	font-size: 14.5px;
	max-width: 380px;
	margin-bottom: 22px;
	line-height: 1.75;
}

.f-title {
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(244, 239, 230, 0.5);
	margin-bottom: 18px;
}

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

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

.f-menu a {
	color: var(--clay-ink);
	text-decoration: none;
	font-size: 15px;
}

.f-menu a:hover {
	color: var(--celadon-soft);
}

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

.f-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 12px;
	font-size: 14.5px;
	color: var(--clay-muted);
}

.f-contact-list .icon {
	flex: none;
	margin-top: 3px;
	color: var(--celadon-soft);
}

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

.f-contact-list a:hover {
	color: var(--celadon-soft);
}

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

.social-link {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line-dark);
	border-radius: 50%;
	color: var(--clay-ink);
	background: transparent;
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s, transform 0.2s;
}

.social-link:hover {
	border-color: var(--celadon-soft);
	color: var(--celadon-soft);
	transform: translateY(-2px);
}

.footer-bottom {
	border-top: 1px solid var(--line-dark);
}

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

.copyright {
	font-size: 13px;
	color: var(--clay-muted);
}

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

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

.policy-menu a:hover {
	color: var(--celadon-soft);
}

/* ================= Contact rail / QR modal ================= */
.contact-rail {
	position: fixed;
	bottom: 26px;
	z-index: 80;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

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

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

.rail-btn {
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: var(--clay);
	color: var(--clay-ink);
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 14px 28px -12px rgba(37, 28, 21, 0.65), inset 0 0 0 2px rgba(244, 239, 230, 0.12);
	transition: transform 0.2s, background 0.2s, color 0.2s;
}

.rail-btn:hover {
	background: var(--celadon);
	color: var(--celadon-ink);
	transform: translateY(-3px);
}

.qr-modal {
	z-index: 130;
	display: grid;
	place-items: center;
	padding: 20px;
}

.qr-panel {
	position: relative;
	width: min(360px, calc(100vw - 40px));
	max-height: calc(100vh - 60px);
	overflow: auto;
	background: var(--surface);
	color: var(--ink);
	border-radius: var(--radius);
	border-top: 4px solid var(--celadon);
	padding: 32px 26px 26px;
	text-align: center;
	transform: translateY(16px);
	opacity: 0;
	transition: transform 0.24s, opacity 0.24s;
}

.qr-modal.open .qr-panel {
	transform: none;
	opacity: 1;
}

.qr-close {
	position: absolute;
	top: 12px;
	right: 12px;
	border-color: var(--line);
	color: var(--ink);
}

.qr-title {
	font-size: 24px;
	margin-bottom: 14px;
}

.qr-img {
	width: 210px;
	height: auto;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
}

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

.qr-btn {
	margin-top: 16px;
}

/* ================= WooCommerce: breadcrumb & shop head ================= */
.woocommerce-breadcrumb {
	font-size: 13px;
	color: var(--clay-muted);
}

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

.woocommerce-breadcrumb a:hover {
	color: var(--celadon-soft);
}

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

.page-hero-shop {
	padding-top: 24px;
}

.page-hero-shop .woocommerce-breadcrumb {
	padding-bottom: 20px;
}

.single-bc {
	padding-top: 22px;
}

.single-bc .woocommerce-breadcrumb {
	color: var(--muted);
}

.single-bc .woocommerce-breadcrumb a {
	color: var(--ink-soft);
}

.single-bc .woocommerce-breadcrumb a:hover {
	color: var(--celadon-text);
}

.wc-page .page-title {
	font-size: clamp(32px, 4.4vw, 48px);
	margin-bottom: 8px;
}

.shop-sub {
	color: var(--muted);
	max-width: 640px;
	margin-bottom: 8px;
}

.woocommerce-result-count {
	font-size: 14px;
	color: var(--muted);
	margin: 0;
	display: inline-block;
}

.woocommerce-ordering {
	margin: 0 0 0 12px;
	display: inline-block;
}

.woocommerce-ordering select,
select {
	font: inherit;
	font-size: 14px;
	padding: 10px 38px 10px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%233a2e26' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 16px center;
	appearance: none;
	color: var(--ink);
}

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

/* ================= Product grid (kills Woo clearfix / floats) ================= */
ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
}

ul.products::before,
ul.products::after {
	content: none !important;
	display: none !important;
}

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

ul.products li.product:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow);
}

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 / 1;
	object-fit: cover;
	display: block;
	background: #ece7de;
}

ul.products li.product .onsale {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 5px 12px;
	border-radius: 8px;
	background: var(--celadon);
	color: var(--celadon-ink);
	font-family: var(--font-body);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	color: var(--ink);
	padding: 18px 18px 0;
}

ul.products li.product .price {
	padding: 8px 18px 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink-soft);
	display: block;
}

ul.products li.product .price del {
	color: var(--muted);
	font-weight: 400;
	margin-right: 8px;
}

ul.products li.product .price ins {
	text-decoration: none;
	color: var(--celadon-text);
}

ul.products li.product .button {
	margin: 14px 18px 18px;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 20px;
	background: transparent;
	border: 1.5px solid var(--clay);
	border-radius: var(--radius-sm);
	color: var(--clay);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
	margin-top: auto;
}

ul.products li.product .button:hover {
	background: var(--clay);
	border-color: var(--clay);
	color: var(--clay-ink);
}

ul.products li.product .button.loading {
	opacity: 0.6;
}

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

.woocommerce-pagination {
	margin-top: 52px;
	text-align: center;
}

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

.woocommerce-pagination .page-numbers li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--ink);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}

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

.woocommerce-no-products-found {
	max-width: 560px;
	padding: clamp(30px, 5vw, 60px) 20px;
	margin-inline: auto;
	text-align: center;
	color: var(--muted);
}

/* ================= Notices ================= */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 4px solid var(--celadon);
	border-radius: var(--radius-sm);
	padding: 15px 20px;
	margin: 0 0 18px;
	font-size: 14.5px;
	color: var(--ink-soft);
	list-style: none;
}

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

.woocommerce-error li {
	margin: 0;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	order: 2;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 18px;
	border: 1.5px solid var(--clay);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--clay);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-message .button:hover {
	background: var(--clay);
	color: var(--clay-ink);
}

/* ================= Single product ================= */
.wc-page div.product {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(30px, 4.5vw, 64px);
	align-items: start;
}

.wc-page div.product .woocommerce-product-gallery,
.wc-page div.product .summary {
	min-width: 0;
}

.wc-page div.product > .onsale {
	display: none;
}

.woocommerce-product-gallery {
	position: relative;
}

.woocommerce-product-gallery__wrapper {
	margin: 0;
}

.woocommerce-product-gallery img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	background: #ece7de;
}

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

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

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

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

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 5;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 253, 249, 0.94);
	color: var(--ink);
	text-decoration: none;
	font-size: 18px;
	border: 1px solid var(--line);
}

.summary .product_title {
	font-size: clamp(32px, 3.8vw, 44px);
	font-weight: 500;
	margin-bottom: 14px;
}

.summary .price {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 16px;
	display: block;
}

.summary .price del {
	color: var(--muted);
	font-weight: 400;
	font-size: 20px;
	margin-right: 10px;
}

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

.summary .woocommerce-product-details__short-description {
	font-size: 16px;
	line-height: 1.8;
	color: var(--ink-soft);
	margin-bottom: 10px;
}

.summary form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin: 24px 0 22px;
}

.summary .quantity .qty {
	width: 92px;
	height: 52px;
	border: 1.5px solid var(--clay);
	border-radius: 12px;
	text-align: center;
	font: inherit;
	font-weight: 600;
	background: var(--surface);
	color: var(--ink);
}

.summary .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 34px;
	background: var(--celadon);
	color: var(--celadon-ink);
	border: 1.5px solid var(--celadon);
	border-radius: var(--radius-btn);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.summary .single_add_to_cart_button:hover,
.summary .single_add_to_cart_button:focus-visible {
	animation: btn-radius-pulse 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) forwards;
}

.summary .single_add_to_cart_button:hover {
	background: var(--celadon-deep);
	border-color: var(--celadon-deep);
	color: #fff;
}

.summary .product_meta {
	font-size: 13.5px;
	color: var(--muted);
	border-top: 1px solid rgba(127, 166, 147, 0.45);
	padding-top: 18px;
}

.summary .product_meta > span {
	display: block;
	margin-bottom: 6px;
}

.summary .product_meta a {
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid rgba(127, 166, 147, 0.7);
}

.summary .stock.in-stock {
	color: #38684f;
	font-weight: 600;
	font-size: 14px;
}

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

.wc-page div.product .woocommerce-tabs,
.wc-page div.product .prod-specs,
.wc-page div.product .related.products,
.wc-page div.product .up-sells {
	grid-column: 1 / -1;
}

.woocommerce-tabs {
	margin-top: clamp(28px, 4vw, 52px);
}

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

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 13px 22px;
	font-family: var(--font-body);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--muted);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--ink);
	border-bottom-color: var(--celadon);
}

.woocommerce-tabs .panel {
	padding: 26px 0 0;
	max-width: 840px;
	font-size: 16px;
	line-height: 1.85;
	color: var(--ink-soft);
}

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

.prod-specs {
	margin-top: clamp(28px, 4vw, 52px);
}

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

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

.prod-specs-table {
	width: 100%;
	min-width: 460px;
	border-collapse: collapse;
	font-size: 15px;
}

.prod-specs-table th {
	width: 30%;
	text-align: left;
	padding: 14px 20px;
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom: 1px solid var(--line);
	background: rgba(127, 166, 147, 0.08);
}

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

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

.related.products > h2,
.up-sells > h2 {
	font-size: 29px;
	margin: clamp(30px, 5vw, 56px) 0 6px;
}

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

/* ================= Forms / cart / checkout / account ================= */
.woocommerce form .form-row {
	margin: 0 0 16px;
	padding: 0;
}

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

.input-text,
.woocommerce textarea,
.woocommerce select {
	width: 100%;
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 13px 16px;
	transition: border-color 0.2s;
}

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

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

table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

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

table.shop_table thead th {
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	background: rgba(127, 166, 147, 0.08);
}

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: 72px;
	height: 72px;
	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-remove a {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--muted);
	font-size: 18px;
	text-decoration: none;
	line-height: 1;
}

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

table.shop_table .quantity .qty {
	width: 74px;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	text-align: center;
	font: inherit;
	background: var(--surface);
}

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

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

.woocommerce-cart-form .coupon .input-text {
	width: 200px;
	border-radius: var(--radius-sm);
	padding: 12px 16px;
}

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

.woocommerce-cart-form td.actions > .button,
.woocommerce-cart-form .coupon .button,
.wc-proceed-to-checkout .checkout-button,
.woocommerce #payment #place_order,
.woocommerce-form-login .button,
.woocommerce-form-register .button,
.woocommerce-address-fields .button,
.woocommerce-EditAccountForm .button,
.woocommerce form.checkout_coupon .button,
.woocommerce-form-track-order .button,
.woocommerce-ResetPassword .button,
button.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 28px;
	background: var(--clay);
	color: var(--clay-ink);
	border: 1.5px solid var(--clay);
	border-radius: 12px;
	font-family: var(--font-body);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.woocommerce-cart-form td.actions > .button:hover,
.wc-proceed-to-checkout .checkout-button:hover,
.woocommerce #payment #place_order:hover {
	background: var(--celadon);
	border-color: var(--celadon);
	color: var(--celadon-ink);
}

.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(460px, 100%);
}

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

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

.wc-proceed-to-checkout .checkout-button {
	width: 100%;
	height: 56px;
}

.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.woocommerce-checkout form.checkout > #customer_details {
	min-width: 0;
	grid-row: 1 / span 2;
}

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

.woocommerce-checkout #order_review_heading {
	grid-row: 1;
	font-size: 27px;
	margin-bottom: 0;
	align-self: end;
}

.woocommerce-checkout #order_review {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px;
	margin-top: 14px;
}

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

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

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

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

#payment ul.wc_payment_methods li {
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
	font-size: 14.5px;
}

#payment ul.wc_payment_methods input[type="radio"],
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"] {
	accent-color: var(--celadon-deep);
	width: 16px;
	height: 16px;
	margin-right: 8px;
}

#payment div.payment_box {
	font-size: 13.5px;
	color: var(--muted);
	padding: 10px 0 0;
}

.woocommerce #payment #place_order {
	width: 100%;
	height: 56px;
}

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

/* ================= My account / order confirmation ================= */
.woocommerce-MyAccount-navigation {
	float: none;
	width: 100%;
}

body.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: clamp(26px, 4vw, 52px);
	align-items: start;
}

body.woocommerce-account .woocommerce > .woocommerce-notices-wrapper,
body.woocommerce-account .woocommerce > .woocommerce-form-login,
body.woocommerce-account .woocommerce > .woocommerce-form-register,
body.woocommerce-account .woocommerce > .woocommerce-ResetPassword,
body.woocommerce-account .woocommerce > h2 {
	grid-column: 1 / -1;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 13px 18px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink-soft);
	text-decoration: none;
	border-bottom: 1px solid var(--line);
	border-left: 3px solid transparent;
}

.woocommerce-MyAccount-navigation li:last-child a {
	border-bottom: 0;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
	background: rgba(127, 166, 147, 0.12);
	color: var(--ink);
	border-left-color: var(--celadon);
}

.woocommerce-MyAccount-content {
	min-width: 0;
	font-size: 15.5px;
	color: var(--ink-soft);
}

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

.woocommerce-MyAccount-content fieldset {
	border: 0;
	padding: 0;
	margin: 22px 0 0;
}

.woocommerce-MyAccount-content legend {
	font-family: var(--font-display);
	font-size: 21px;
	font-weight: 600;
	margin-bottom: 12px;
	color: var(--ink);
}

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
	max-width: 460px;
	margin-inline: auto;
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 4px solid var(--celadon);
	border-radius: var(--radius);
	padding: clamp(24px, 3vw, 36px);
}

.woocommerce-form-login .button,
.woocommerce-form-register .button,
.woocommerce-ResetPassword .button {
	width: 100%;
	margin-top: 6px;
}

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

.woocommerce-LostPassword a,
.woocommerce-privacy-policy-text a {
	color: var(--ink);
}

.woocommerce-privacy-policy-text {
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 14px;
}

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

.woocommerce-order ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
	list-style: none;
	margin: 0 0 26px;
	padding: 20px 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 4px solid var(--celadon);
	border-radius: var(--radius);
	font-size: 13.5px;
	color: var(--muted);
}

.woocommerce-order ul.order_details li strong {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	color: var(--ink);
}

.woocommerce-order .woocommerce-notice {
	font-family: var(--font-display);
	font-size: 23px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 20px;
}

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

/* ================= Responsive ================= */
@media (max-width: 1200px) {
	.related.products ul.products,
	.up-sells ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.main-nav {
		display: none;
	}
	.nav-toggle {
		display: grid;
	}
	.cats-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.perks-grid,
	.steps-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.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;
	}
	.split-flip .split-media {
		order: 0;
	}
	.wc-page div.product {
		grid-template-columns: 1fr;
	}
	.woocommerce-checkout form.checkout {
		grid-template-columns: 1fr;
	}
	.woocommerce-checkout form.checkout > #customer_details,
	.woocommerce-checkout form.checkout > #order_review_heading,
	.woocommerce-checkout form.checkout > #order_review {
		grid-column: 1;
		grid-row: auto;
	}
	.contact-cards {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	body {
		font-size: 15px;
	}
	.hero {
		min-height: 0;
		border-bottom: 0;
	}
	/*
	 * Below the fold-panel breakpoint, the crease geometry can't guarantee
	 * enough room for real copy, so the three folds give up the clipped
	 * trapezoids and stack as plain full-width bands instead -- still three
	 * solid-colour panels in fold order, just without the diagonal creases.
	 */
	.hero-folds {
		position: static;
	}
	.fold {
		position: relative;
		inset: auto;
	}
	.fold-a {
		clip-path: none;
		filter: none;
		display: block;
		padding: clamp(56px, 13vw, 84px) 0 30px;
	}
	.fold-b {
		clip-path: none;
		height: 260px;
		overflow: clip;
	}
	.fold-c {
		clip-path: none;
		filter: none;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 12px;
		padding: 20px 0;
	}
	.fold-vert-label {
		writing-mode: horizontal-tb;
		transform: none;
	}
	.fold-number {
		writing-mode: horizontal-tb;
		transform: none;
	}
	.hero-in {
		padding-block: 0;
	}
	.hero-copy {
		max-width: none;
	}
	.hero-stats {
		gap: 22px 34px;
		margin-top: 38px;
	}
	.cta-in {
		flex-direction: column;
		align-items: flex-start;
	}
	table.shop_table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	table.shop_table > tbody,
	table.shop_table > thead {
		min-width: 560px;
	}
	.woocommerce-cart-form td.actions {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
	}
	.contact-rail {
		bottom: 18px;
	}
	.contact-rail.rail-right {
		right: 14px;
	}
	.contact-rail.rail-left {
		left: 14px;
	}
	.rail-btn {
		width: 47px;
		height: 47px;
	}
	.rail-no-mobile {
		display: none;
	}
}

@media (max-width: 560px) {
	/* long brand name + 4 header buttons must fit a 390px viewport */
	.header-bar {
		gap: 10px;
		min-height: 64px;
	}
	.brand-mark {
		width: 34px;
		height: 34px;
	}
	.brand-name {
		font-size: 18px;
	}
	.hbtn {
		width: 38px;
		height: 38px;
	}
	.header-actions {
		gap: 6px;
	}
	.perks-grid,
	.steps-grid,
	.cats-grid,
	.post-grid {
		grid-template-columns: 1fr;
	}
	.footer-grid {
		grid-template-columns: 1fr;
	}
	.footer-bottom-in {
		flex-direction: column;
		align-items: flex-start;
	}
	.hero-actions .btn {
		width: 100%;
	}
	.split-media::before {
		inset: -14px -10px 8px -14px;
	}
	.summary form.cart {
		align-items: stretch;
	}
	.summary form.cart .single_add_to_cart_button {
		flex: 1;
	}
}

@media (max-width: 400px) {
	.prod-grid,
	ul.products {
		grid-template-columns: 1fr;
	}
	.related.products ul.products,
	.up-sells ul.products {
		grid-template-columns: 1fr;
	}
}