/*
Theme Name: Velocore
Theme URI: https://example.com/velocore
Author: Studio
Author URI: https://example.com
Description: High-visibility urban gear WooCommerce theme on a cloud-white base with graphite ink and a restrained hi-vis chartreuse accent. Diagonal reflective-stripe bands and chain-link dot seams drawn with pure CSS, 8px corners, 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: velocore
Tags: e-commerce, custom-menu, custom-logo, featured-images, translation-ready

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

/* ================= Design tokens ================= */
:root {
	--bg: #f5f6f7;
	--surface: #ffffff;
	--surface-2: #e8eaed;
	--ink: #232527;
	--ink-soft: #43474c;
	--muted: #74787e;
	--accent: #b5d334;
	--accent-deep: #97b31c;
	--accent-soft: #d3e87a;
	--accent-text: #5d6f0d;
	--steel: #4c5257;
	--steel-deep: #3a3f43;
	--dark: #232527;
	--dark-2: #191b1d;
	--dark-ink: #eef0f1;
	--dark-muted: #a2a7ac;
	--danger: #b23a2c;
	--line: rgba(35, 37, 39, 0.13);
	--line-dark: rgba(238, 240, 241, 0.14);
	--chain: rgba(35, 37, 39, 0.32);
	--chain-dark: rgba(238, 240, 241, 0.34);
	--radius: 8px;
	--radius-sm: 5px;
	--shadow: 0 22px 42px -28px rgba(35, 37, 39, 0.4);
	--font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
	--font-body: "Readex Pro", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--wrap: 1200px;
	/*
	 * Hi-vis reflective band token: a hard-edge, single-direction (115deg)
	 * two-tone stripe -- no blur, no alpha fade, never used as an area fill.
	 * Only ever painted onto small trim bands/chips/badges (a few px to a
	 * few dozen px), standing in for the reflective safety tape on real
	 * cycling gear. Not a gradient wash and not a grid (one direction only).
	 */
	--hivis: repeating-linear-gradient(115deg, #232527 0 9px, #b5d334 9px 20px);
	/* graphite/ink variant of the same hard-edge stripe, used on light panels */
	--hivis-dark: repeating-linear-gradient(115deg, #3a3f43 0 9px, #232527 9px 20px);
}

/* ================= 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.68;
	color: var(--ink-soft);
	background: var(--bg);
}

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

a {
	color: inherit;
}

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

: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: 600;
	line-height: 1.04;
	margin: 0;
	color: var(--ink);
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

p {
	margin: 0;
}

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

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

.sec {
	padding-block: 92px;
	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 and slide in. */
html.fx [data-rv] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.25, 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: double-frame offset.
   Every button is drawn as two stacked rectangular outline frames --
   the button body itself (front frame) and a second free-standing
   frame (::before) sitting 4deg out of true behind it. At rest the
   back frame's corners poke out past the front one. On hover/focus
   the back frame rotates flush, so the two frames read as one crisp
   rectangle. Pure solid strokes/fills throughout, zero blur.
   ================================================================= */
.btn {
	--btn-line: var(--ink);
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 26px;
	border-radius: 0;
	background: var(--ink);
	color: var(--dark-ink);
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid var(--btn-line);
	cursor: pointer;
	transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

/* the offset back frame -- same rectangle, rotated a shallow 1.25deg,
   no fill. Kept small on purpose: at 4deg a wide label (e.g. "Inside
   the Ride Lab") swings its far corner out much further than a short
   one ("Shop the Range"), so two adjacent buttons of different widths
   read as rotated by different amounts -- like a broken transform --
   even though the angle is identical. A shallow angle keeps the poke
   sub-6px on any label length so the pair reads as one consistent
   family. */
.btn::before {
	content: "";
	position: absolute;
	inset: -4px;
	border: 2px solid var(--btn-line);
	transform: rotate(1.25deg);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease;
	pointer-events: none;
	z-index: -1;
}

.btn:hover,
.btn:focus-visible {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--ink);
	--btn-line: var(--accent);
}

.btn:hover::before,
.btn:focus-visible::before {
	transform: rotate(0deg);
}

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

.btn-accent:hover,
.btn-accent:focus-visible {
	background: var(--accent-deep);
	border-color: var(--accent-deep);
	color: var(--ink);
	--btn-line: var(--accent-deep);
}

.btn-ghost {
	--btn-line: rgba(35, 37, 39, 0.4);
	background: transparent;
	border-color: rgba(35, 37, 39, 0.4);
	color: var(--ink);
}

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

.btn-ghost-light {
	--btn-line: rgba(238, 240, 241, 0.6);
	background: rgba(238, 240, 241, 0.06);
	border-color: rgba(238, 240, 241, 0.6);
	color: #f2f4f5;
}

.btn-ghost-light:hover,
.btn-ghost-light:focus-visible {
	background: rgba(238, 240, 241, 0.94);
	border-color: rgba(238, 240, 241, 0.94);
	color: var(--ink);
	--btn-line: rgba(238, 240, 241, 0.94);
}

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

.btn-dark-on-accent:hover,
.btn-dark-on-accent:focus-visible {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--ink);
	--btn-line: #ffffff;
}

.btn-sm {
	padding: 9px 17px;
	font-size: 13px;
}

.btn-sm::before {
	inset: -4px;
}

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

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

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--accent-text);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 2px dotted transparent;
	transition: border-color 0.2s ease, gap 0.2s ease;
}

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

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

/* hi-vis chip: a tiny reflective band swatch with diagonal stripes */
.kicker::before {
	content: "";
	width: 28px;
	height: 9px;
	border-radius: 2px;
	background: var(--hivis);
	flex: none;
}

.sec-head {
	max-width: 640px;
	margin-bottom: 46px;
}

.sec-title {
	font-size: clamp(34px, 4.4vw, 50px);
}

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

.sec-dark {
	background: var(--dark-2);
	position: relative;
	overflow: hidden;
}

/* chain-link dot seam running along the top edge */
.sec-dark::after {
	content: "";
	position: absolute;
	top: 14px;
	left: 0;
	right: 0;
	border-top: 3px dotted rgba(238, 240, 241, 0.14);
	pointer-events: none;
}

.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);
}

/* ================= Header ================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(245, 246, 247, 0.94);
	border-bottom: 1px solid transparent;
	transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* hi-vis reflective band running across the very top of the site */
.site-header::before {
	content: "";
	display: block;
	height: 6px;
	background: var(--hivis);
}

.site-header.scrolled {
	background: rgba(255, 255, 255, 0.97);
	border-bottom-color: var(--line);
	box-shadow: 0 14px 30px -24px rgba(35, 37, 39, 0.4);
}

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

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

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

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

.brand-mark {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius);
	background: var(--ink);
	color: var(--accent);
	box-shadow: 0 10px 20px -12px rgba(35, 37, 39, 0.8);
}

.brand-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 21px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink);
}

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

.nav-list {
	display: flex;
	align-items: center;
	gap: 4px;
	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 14px;
	border-radius: var(--radius-sm);
	font-family: var(--font-display);
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	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(181, 211, 52, 0.22);
	color: var(--ink);
}

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

.nav-list .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	translate: -50% 0;
	min-width: 230px;
	margin: 0;
	padding: 8px;
	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;
}

/* chain-link dot seam along the dropdown top */
.nav-list .sub-menu::before {
	content: "";
	display: block;
	margin: 2px 6px 6px;
	border-top: 3px dotted var(--chain);
	opacity: 0.4;
}

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

.nav-list .sub-menu a:hover {
	background: rgba(181, 211, 52, 0.22);
	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: var(--radius);
	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(181, 211, 52, 0.24);
	border-color: rgba(151, 179, 28, 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(--ink);
	color: var(--accent);
	font-size: 11px;
	font-weight: 700;
	border-radius: 6px;
	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(25, 27, 29, 0.6);
	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 22px 30px;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.25, 1);
	border-left: 6px solid var(--accent);
}

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

.drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 16px;
	border-bottom: 3px dotted var(--chain);
	margin-bottom: 14px;
}

.drawer-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	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: 17px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	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;
	text-transform: none;
	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: 6px 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: 1.5px 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: var(--radius-sm);
	background: var(--ink);
	color: var(--dark-ink);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

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

/* =================================================================
   Hero: telescoping frames.
   Three concentric rectangular outlines (like a viewfinder zooming
   in) sit over the full-bleed photo, each carrying a small corner
   label. The fourth, innermost "frame" is a solid ink panel that
   holds the real hero copy -- a reversed (light-on-dark) block
   nested inside the outlines. Two isolated industry shapes (a chain
   link segment, a reflective chevron strip) clip onto the outer
   frames' edges.
   ================================================================= */
.hero {
	position: relative;
	min-height: 560px;
	color: #f2f4f5;
	overflow: hidden;
	background: var(--dark);
}

.hero-media {
	position: absolute;
	inset: 0;
	z-index: 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;
}

/* the one permitted photo overlay: pure-black, single direction, text legibility only */
.hero-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.32));
}

/* hi-vis reflective band along the hero's bottom edge */
.hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 10px;
	background: var(--hivis);
	z-index: 4;
}

/*
 * hero-frames is in normal flow (not absolute), so its own box -- and
 * therefore .hero's height -- is set by its content (the padding here
 * plus the panel). The three decorative outlines are then absolutely
 * positioned relative to that same box, so they always nest correctly
 * around the panel no matter how tall the copy inside it runs.
 */
.hero-frames {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	/* the ring set must hug the panel it frames, not stretch to the
	   hero's full photo width -- otherwise the three outlines land as
	   stray hairlines out in the open photo instead of nesting around
	   the copy like a viewfinder. Capping the box is what keeps them
	   anchored. */
	width: 100%;
	max-width: 960px;
	margin-inline: auto;
	/* both floors sit comfortably above the frame-3 inset (84px) so the
	   innermost ring never clips into the panel at any viewport width */
	padding: clamp(78px, 8vw, 104px) clamp(92px, 9vw, 140px);
}

.hero-frame {
	position: absolute;
	border: 1px solid rgba(242, 244, 245, 0.28);
	pointer-events: none;
}

.hero-frame-1 {
	inset: 16px;
}

.hero-frame-2 {
	inset: 40px;
	border-color: rgba(242, 244, 245, 0.42);
}

.hero-frame-3 {
	inset: 64px;
	border-color: var(--accent);
}

.frame-tag {
	position: absolute;
	display: inline-block;
	background: var(--dark-2);
	color: rgba(242, 244, 245, 0.72);
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 4px 9px;
	white-space: nowrap;
}

.hero-frame-3 .frame-tag {
	color: var(--accent);
}

.tag-tl {
	top: -11px;
	left: 16px;
}

.tag-tr {
	top: -11px;
	right: 16px;
}

.tag-bl {
	bottom: -11px;
	left: 16px;
}

.tag-br {
	bottom: -11px;
	right: 16px;
}

/* bike chain link segment: pinned just inside the outer frame's left edge */
.hero-shape-chain {
	position: absolute;
	top: 56%;
	left: 10px;
	transform: translateY(-50%);
	color: var(--accent);
}

/* reflective chevron strip: single-direction hi-vis stripe, sits alone
   in frame-1's top-right corner (frame-2's tag-tr sits well clear, further
   inward on its own smaller frame) */
.hero-shape-chevron {
	position: absolute;
	top: -14px;
	right: 20px;
	width: 64px;
	height: 26px;
	background: var(--hivis);
	clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%);
}

.hero-panel {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 720px;
	background: var(--ink);
	padding: clamp(28px, 3.6vw, 42px) clamp(26px, 4vw, 48px);
}

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

.hero-kicker::before {
	background: var(--hivis);
}

.hero-title {
	font-size: clamp(38px, 4.6vw, 60px);
	color: #f6f8f9;
	text-wrap: balance;
	letter-spacing: 0.01em;
}

.hero-sub {
	margin-top: 14px;
	max-width: 540px;
	font-size: 16.5px;
	line-height: 1.6;
	color: rgba(242, 244, 245, 0.85);
}

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

/* chain-link dot seam above the stats row */
.hero-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 26px 40px;
	margin: 28px 0 0;
	padding-top: 20px;
	border-top: 3px dotted rgba(238, 240, 241, 0.32);
}

.hero-stats .stat {
	display: grid;
	gap: 2px;
	flex: 1 1 150px;
	max-width: 210px;
}

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

.hero-stats dt {
	font-size: 12.5px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: rgba(242, 244, 245, 0.6);
}

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

.perks-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	padding-block: 26px;
	border-block: 3px dotted var(--chain);
}

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

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

/* chain-ring icon chip: dotted ring like a chain link */
.perk-icon {
	grid-row: span 2;
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--surface);
	border: 3px dotted rgba(93, 111, 13, 0.55);
	color: var(--accent-text);
	transition: transform 0.25s ease;
}

.perk-title {
	font-size: 18px;
	font-weight: 600;
	align-self: end;
}

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

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

.cats-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	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(35, 37, 39, 0.5);
	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(151, 179, 28, 0.55);
}

.cat-media {
	display: block;
	aspect-ratio: 4 / 3.4;
	background: var(--surface-2);
}

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

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

/* label bar pinned to the bottom, chain-dotted along its top edge */
.cat-meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: grid;
	gap: 1px;
	padding: 14px 18px;
	padding-right: 66px;
	background: rgba(255, 255, 255, 0.94);
	border-top: 3px dotted var(--chain);
	transition: background 0.25s ease;
}

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

.cat-name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink);
}

.cat-count {
	font-size: 12px;
	letter-spacing: 0.08em;
	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: var(--radius);
	background: var(--accent);
	color: var(--ink);
	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: 20px;
}

.prod-card {
	background: rgba(238, 240, 241, 0.04);
	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(238, 240, 241, 0.08);
	border-color: rgba(181, 211, 52, 0.45);
}

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

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

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

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

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

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

.prod-name {
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	font-family: var(--font-body);
	text-transform: none;
}

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

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

.prod-price {
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 600;
	color: var(--dark-muted);
	letter-spacing: 0.03em;
}

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

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

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

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

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

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

.split-media {
	position: relative;
}

/* offset chain-dotted panel behind the photo, like a spare link plate */
.split-media::before {
	content: "";
	position: absolute;
	inset: 22px -22px -22px 22px;
	border-radius: var(--radius);
	border: 3px dotted rgba(93, 111, 13, 0.45);
	background: rgba(181, 211, 52, 0.08);
	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);
}

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

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

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

.split-text {
	color: var(--muted);
	font-size: 16.5px;
	margin-bottom: 26px;
}

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

.steps-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	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: 30px 24px 28px;
	overflow: hidden;
}

/* graphite reflective sliver across each card's top edge */
.step::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: var(--hivis-dark);
}

.step-num {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	color: var(--accent-deep);
	margin-bottom: 14px;
	letter-spacing: 0;
}

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

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

/* ================= Quotes ================= */
.quotes {
	background: var(--surface-2);
}

.quotes-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

/* chain-dotted patch cards */
.quote {
	margin: 0;
	background: var(--surface);
	border: 3px dotted var(--chain);
	border-radius: var(--radius);
	padding: 28px 26px;
	display: grid;
	gap: 16px;
	align-content: start;
}

.quote-mark {
	color: var(--accent-deep);
	opacity: 0.9;
}

.quote blockquote {
	margin: 0;
	font-family: var(--font-body);
	font-size: 17.5px;
	font-weight: 500;
	line-height: 1.56;
	color: var(--ink);
}

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

.quote-name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
}

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

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

.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(151, 179, 28, 0.5);
}

.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.5s ease;
}

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

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

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

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

.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.62;
}

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

/* ================= CTA band ================= */
.cta-band {
	background: var(--accent);
	position: relative;
	overflow: hidden;
	padding-block: 70px;
}

/* chain-link dot seams running along the band's edges */
.cta-band::after {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 0;
	right: 0;
	border-top: 3px dotted rgba(35, 37, 39, 0.3);
	border-bottom: 3px dotted rgba(35, 37, 39, 0.3);
	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, 44px);
	color: var(--ink);
}

.cta-text {
	margin-top: 10px;
	color: rgba(35, 37, 39, 0.78);
	font-size: 16.5px;
	max-width: 560px;
}

/* ================= Page hero ================= */
.page-hero {
	position: relative;
	background: var(--surface-2);
	padding: 72px 0 54px;
	overflow: hidden;
	border-bottom: 3px dotted var(--chain);
}

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

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

.page-hero-title {
	font-size: clamp(36px, 5vw, 56px);
	text-wrap: balance;
}

.page-hero-sub {
	margin-top: 12px;
	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: 30px;
	margin-top: 44px;
}

.entry-content h3 {
	font-size: 23px;
	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: 20px 26px;
	border-left: 4px solid var(--accent);
	background: var(--surface);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: 18px;
	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: 700;
	color: var(--ink);
	transition: background 0.2s ease;
}

.entry-content summary:hover {
	background: rgba(181, 211, 52, 0.12);
}

.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: 2px solid var(--accent-deep);
	border-bottom: 2px 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 34px;
}

.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: 54px;
	padding-top: 26px;
	border-top: 3px dotted var(--chain);
}

.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: 18px;
	margin-top: 10px;
}

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

.contact-card h3 {
	font-size: 19px;
	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: 46px;
	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-display);
	font-weight: 600;
	font-size: 15px;
	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: var(--accent);
}

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

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

.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(151, 179, 28, 0.5);
}

.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: rgba(181, 211, 52, 0.2);
	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: 600;
	font-size: 16px;
}

.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: 60px 20px;
}

.empty-state h2 {
	font-size: 32px;
	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: var(--dark-2);
	color: var(--dark-muted);
	position: relative;
	overflow: hidden;
}

/* hi-vis band across the footer's top edge */
.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 8px;
	background: var(--hivis);
	z-index: 1;
}

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

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

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

.f-brand .brand-mark {
	width: 36px;
	height: 36px;
}

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

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

.f-title {
	font-family: var(--font-display);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 18px;
}

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

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

.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);
}

.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);
}

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

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

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

.social-link {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius);
	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);
	border-color: var(--accent);
	color: var(--ink);
}

/* chain-link dot seam above the legal strip */
.footer-bottom {
	position: relative;
	z-index: 1;
	border-top: 3px dotted rgba(238, 240, 241, 0.2);
}

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

.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);
}

/* ================= 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.95);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	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: var(--radius-sm);
	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);
	color: var(--ink);
	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: 6px solid var(--accent);
	box-shadow: var(--shadow);
	padding: 30px 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: 3px dotted var(--chain);
	padding: 6px;
	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.04em;
	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: 38px 0 28px;
}

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

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

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

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

.shop-sub {
	color: var(--muted);
	max-width: 620px;
	margin: 6px 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: 1.5px 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='%2343474c' stroke-width='1.8' 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: 20px;
	list-style: none;
	margin: 34px 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(151, 179, 28, 0.5);
}

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 11px;
	border-radius: var(--radius-sm);
	background: var(--accent);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

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

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

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: 700;
}

ul.products li.product .button {
	margin: 14px 18px 20px;
	align-self: start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 17px;
	border-radius: var(--radius-sm);
	border: 1.5px solid var(--ink);
	background: var(--ink);
	color: var(--dark-ink);
	font-family: var(--font-display);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	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);
	border-color: var(--accent);
	color: var(--ink);
}

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: 46px;
	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-display);
	font-weight: 600;
	font-size: 15px;
	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: var(--accent);
}

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

.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: 4px solid var(--steel);
	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);
}

.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: 8px 15px;
	border-radius: var(--radius-sm);
	background: var(--ink);
	color: var(--dark-ink);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	cursor: pointer;
}

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

/* ================= WooCommerce: single product ================= */
.wc-page div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	gap: 56px;
	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 13px;
	border-radius: var(--radius-sm);
	background: var(--accent);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 13px;
	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: var(--radius-sm);
	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='%23232527' 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(30px, 3.6vw, 44px);
	margin-bottom: 14px;
}

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

.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: 12px 8px 12px 16px;
	border: 1.5px 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: 14px 30px;
	border-radius: var(--radius);
	border: 1.5px solid var(--accent);
	background: var(--accent);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	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(--accent-deep);
	border-color: var(--accent-deep);
	transform: translateY(-2px);
}

/* chain-link dot seam above the meta block */
.summary .product_meta {
	display: grid;
	gap: 6px;
	padding-top: 20px;
	border-top: 3px dotted var(--chain);
	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: #47701e;
	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-display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--muted);
	text-decoration: none;
	border-bottom: 2.5px 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);
}

.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: 27px;
	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: 700;
	color: var(--ink);
	border-bottom: 1px solid var(--line);
	background: rgba(181, 211, 52, 0.1);
}

.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: 29px;
	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: 1.5px 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: 1.5px 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: rgba(181, 211, 52, 0.12);
	font-family: var(--font-display);
	font-size: 13px;
	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: var(--radius-sm);
	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: 1.5px 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: 1.5px 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: 11px 21px;
	border-radius: var(--radius-sm);
	border: 1.5px solid var(--ink);
	background: var(--ink);
	color: var(--dark-ink);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	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);
	border-color: var(--accent);
	color: var(--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(430px, 100%);
	float: none !important;
}

.cart-collaterals .cart_totals > h2 {
	font-size: 25px;
	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: 15.5px;
	background: var(--accent);
	border-color: var(--accent);
	color: var(--ink);
}

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

/* ================= 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: 25px;
	margin: 0 0 14px;
}

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

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

.woocommerce-billing-fields > h3,
.woocommerce-additional-fields > h3 {
	font-size: 25px;
	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: 1.5px 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: 15.5px;
	background: var(--accent);
	border-color: var(--accent);
	color: var(--ink);
}

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

.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(181, 211, 52, 0.2);
	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: 700;
	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: 3px dotted var(--chain);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	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: #47701e;
	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: 68px;
	}

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

	.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: 44px;
	}

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

	.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: 0;
	}

	.hero-frames {
		padding: 44px 40px 32px;
	}

	/* collapse the middle ring on small screens: outer line + accent
	   line + solid panel still reads as nested, without crowding */
	.hero-frame-1 {
		inset: 12px;
	}

	.hero-frame-2 {
		display: none;
	}

	.hero-frame-3 {
		inset: 34px;
	}

	.hero-panel {
		width: 100%;
		padding: 30px 24px;
	}

	.hero-shape-chevron {
		right: 22px;
		width: 58px;
		height: 24px;
	}

	.hero-shape-chain {
		left: 16px;
	}

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

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

	.perks-grid {
		grid-template-columns: 1fr;
		gap: 4px;
		padding-block: 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: 3px dotted var(--chain);
		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: 12.5px;
		font-weight: 700;
		letter-spacing: 0.06em;
		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: 34px;
		height: 34px;
	}

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

	.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: 54px 40px;
	}

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

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

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

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

	.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: 30px;
		height: 30px;
	}

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

	.header-actions {
		gap: 2px;
	}

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

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

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

	ul.products {
		grid-template-columns: 1fr;
	}
}