/*
 * LilVastr design system.
 * Every color/size decision reads a --lv-* token; tokens are printed from
 * the Customizer (inc/Customizer.php). Do not hardcode brand values here.
 */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
ul, ol { padding: 0; margin: 0; }

/* ---------- Base ---------- */
:root {
	/* Fallbacks only — real values are injected from the Customizer. */
	--lv-primary: #000000;
	--lv-secondary: #ffe9e6;
	--lv-text: #141414;
	--lv-muted: #767676;
	--lv-bg: #ffffff;
	--lv-surface: #f7f7f7;
	--lv-border: #dfe0df;
	--lv-sale: #e04f4f;
	--lv-font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
	--lv-font-body: "Plus Jakarta Sans", system-ui, sans-serif;
	--lv-font-script: "Gwendolyn", cursive;
	--lv-font-display: "Playwrite US Trad", cursive;
	--lv-container: 1440px;   /* canvas; 80px padding → 1280 content (Figma) */
	--lv-radius: 12px;        /* Figma card radius */
	--lv-radius-sm: 5px;      /* Figma input/small radius */
	--lv-btn-radius: 24px;    /* Figma pill radius */
	--lv-shop-cols: 4;

	/* Derived / static scale */
	--lv-shadow-sm: 0 1px 3px rgb(16 24 40 / .07);
	--lv-shadow-md: 0 8px 28px rgb(16 24 40 / .10);
	--lv-shadow-lg: 0 20px 50px rgb(16 24 40 / .16);
	/* Figma section vertical padding: 40px (mobile) → 80px (desktop). */
	--lv-space: clamp(40px, 6vw, 80px);
	/* Figma inter-section gap scale. */
	--lv-gap-sm: 16px;
	--lv-gap: 24px;
	--lv-gap-md: 32px;
	--lv-gap-lg: 57px;
	--lv-gap-xl: 64px;
	--lv-transition: .22s cubic-bezier(.4, 0, .2, 1);
}

html { scroll-behavior: smooth; }
/* Global horizontal-overflow guard. `clip` (not `hidden`) stops any stray
   element from creating a sideways scroll / off-canvas "overlay" on mobile
   without turning the page into a scroll container — so position:sticky headers
   keep working. Paired with break-word so long words/URLs never push width. */
html, body { overflow-x: clip; max-width: 100%; }

body.lv-theme {
	font-family: var(--lv-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--lv-text);
	background: var(--lv-bg);
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
	word-break: break-word;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--lv-font-heading);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 .5em;
	letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }
a { text-decoration: none; transition: color var(--lv-transition); }

.lv-container {
	width: 100%;
	max-width: var(--lv-container);
	margin-inline: auto;
	padding-inline: 80px; /* design global.css: container padding 0 80px */
}
@media (max-width: 1024px) { .lv-container { padding-inline: 40px; } }
@media (max-width: 768px) { .lv-container { padding-inline: 20px; } }

.lv-section { padding-block: var(--lv-space); }

.lv-section-title {
	font-size: clamp(26px, 3.4vw, 40px);
	font-weight: 400;
	color: #232323;
	text-align: center;
	margin-bottom: 32px;
}

/* Script accent — logo & home section titles per the LilVastr design. */
.lv-script,
.lv-section-title--script {
	font-family: var(--lv-font-script);
	font-weight: 700;
	letter-spacing: 0;
}
.lv-section-title--script { font-size: clamp(32px, 4vw, 48px); }

/* Force the script font on Elementor headings tagged .lv-script (home page). */
.lv-script .elementor-heading-title,
.elementor-widget-heading.lv-script .elementor-heading-title {
	font-family: var(--lv-font-script) !important;
	font-weight: 700;
}

/* Display / hero handwriting (Playwrite US Trad) — e.g. "Tiny Trends. Big
   Smiles." In Elementor, tag the hero heading with the CSS class `lv-display`. */
.lv-display,
.lv-display .elementor-heading-title,
.elementor-widget-heading.lv-display .elementor-heading-title {
	font-family: var(--lv-font-display) !important;
	font-weight: 400;
}

.lv-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--lv-primary);
	color: #fff;
	padding: 10px 18px;
	z-index: 1000;
}
.lv-skip-link:focus { left: 12px; top: 12px; }

/* ---------- Buttons ---------- */
.lv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 28px;
	border-radius: var(--lv-btn-radius);
	border: 1.5px solid transparent;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	transition: all var(--lv-transition);
	text-align: center;
}
.lv-btn--primary { background: var(--lv-primary); color: #fff; }
.lv-btn--primary:hover { opacity: .8; }
.lv-btn--secondary { background: var(--lv-secondary); color: var(--lv-text); }
.lv-btn--secondary:hover { opacity: .85; }
.lv-btn--ghost { border-color: var(--lv-border); background: transparent; color: var(--lv-text); }
.lv-btn--ghost:hover { border-color: var(--lv-text); }
.lv-btn--dark { background: var(--lv-text); color: #fff; }
.lv-btn--dark:hover { opacity: .88; }
.lv-btn--sm { padding: 9px 18px; font-size: 14px; }
.lv-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.lv-btn.is-loading { pointer-events: none; opacity: .7; }

/* ---------- Forms ---------- */
.lv-input, .lv-select, .lv-textarea,
.lv-theme input[type="text"], .lv-theme input[type="email"], .lv-theme input[type="tel"],
.lv-theme input[type="password"], .lv-theme input[type="search"], .lv-theme input[type="number"],
.lv-theme select, .lv-theme textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1.5px solid var(--lv-border);
	border-radius: var(--lv-radius-sm);
	background: var(--lv-bg);
	transition: border-color var(--lv-transition), box-shadow var(--lv-transition);
	outline: none;
}
.lv-theme input:focus, .lv-theme select:focus, .lv-theme textarea:focus {
	border-color: var(--lv-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--lv-primary) 15%, transparent);
}
/* Field labels stack above their control; checkbox/radio/swatch rows are inline
   components and must be exempt (otherwise the box stacks above its text). */
.lv-theme label:not(.lv-check):not(.lv-radio):not(.lv-swatch) { font-weight: 500; font-size: 14px; display: block; margin-bottom: 6px; }

/* ---------- Announcement bar (design: soft-pink top strip) ---------- */
.lv-announcement {
	background: var(--lv-secondary);
	color: var(--lv-text);
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	padding-block: 10px;
	letter-spacing: .01em;
}
.lv-announcement a { color: inherit; text-decoration: underline; }

/* ---------- Header ---------- */
.lv-header {
	background: var(--lv-bg);
	border-bottom: 1px solid var(--lv-border);
	z-index: 90;
}
.lv-header--sticky { position: sticky; top: 0; }
.lv-header.is-scrolled { box-shadow: var(--lv-shadow-sm); }
.lv-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	min-height: 76px;
}
.lv-header__logo { justify-self: center; }
.lv-header__logo img { max-height: 52px; width: auto; }
.lv-header__brand {
	font-family: var(--lv-font-script);
	font-size: 34px;
	font-weight: 700;
	color: var(--lv-text);
	line-height: 1;
}
.lv-header__start { display: flex; align-items: center; gap: 8px; }
.lv-header__nav { display: flex; justify-content: flex-start; }
.lv-header__actions { justify-self: end; }
.lv-header__burger {
	display: none;
	background: none;
	border: 0;
	padding: 8px;
	cursor: pointer;
}
.lv-header__actions { display: flex; align-items: center; gap: 6px; }
.lv-header__action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--lv-text);
	transition: background var(--lv-transition);
}
.lv-header__action:hover { background: var(--lv-surface); }
.lv-count {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	border-radius: 999px;
	background: var(--lv-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}
.lv-count:empty, .lv-count[data-count="0"] { display: none; }

/* Primary menu */
.lv-menu { display: flex; gap: 4px; list-style: none; }
.lv-menu__item { position: relative; }
.lv-menu__item > a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 10px 14px;
	font-weight: 500;
	font-size: 15px;
	border-radius: 8px;
}
.lv-menu__item > a:hover, .lv-menu__item--active > a { color: var(--lv-primary); }
.lv-menu__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--lv-bg);
	border: 1px solid var(--lv-border);
	border-radius: var(--lv-radius);
	box-shadow: var(--lv-shadow-md);
	padding: 8px;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all var(--lv-transition);
	z-index: 95;
}
.lv-menu__item:hover > .lv-menu__submenu,
.lv-menu__item:focus-within > .lv-menu__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.lv-menu__submenu a {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 14px;
}
.lv-menu__submenu a:hover { background: var(--lv-surface); color: var(--lv-primary); }
.lv-menu__submenu .lv-menu__submenu { top: 0; left: 100%; }

/* Header search panel */
.lv-header__search {
	border-top: 1px solid var(--lv-border);
	padding-block: 16px;
	background: var(--lv-bg);
}
.lv-search-form {
	display: flex;
	align-items: center;
	gap: 12px;
}
.lv-search-form svg { flex-shrink: 0; color: var(--lv-muted); }
.lv-search-form input[type="search"] { border: 0; box-shadow: none !important; padding-inline: 0; }

/* Mobile menu drawer */
.lv-mobile-menu {
	position: fixed;
	inset: 0 auto 0 0;
	width: min(340px, 86vw);
	background: var(--lv-bg);
	z-index: 120;
	transform: translateX(-100%);
	transition: transform .3s ease;
	overflow-y: auto;
	padding: 20px;
}
.lv-mobile-menu.is-open { transform: translateX(0); }
.lv-mobile-menu[hidden] { display: block; visibility: hidden; }
.lv-mobile-menu.is-open[hidden] { visibility: visible; }
.lv-mobile-menu__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 700;
	margin-bottom: 16px;
}
.lv-mobile-menu__head button { background: none; border: 0; padding: 6px; cursor: pointer; }
.lv-mobile-menu__list { list-style: none; }
.lv-mobile-menu__list a {
	display: block;
	padding: 12px 8px;
	border-bottom: 1px solid var(--lv-border);
	font-weight: 500;
}
.lv-mobile-menu__list .lv-menu__submenu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	border: 0;
	box-shadow: none;
	padding-left: 16px;
}

/* Overlay */
.lv-overlay {
	position: fixed;
	inset: 0;
	background: rgb(15 18 25 / .45);
	z-index: 110;
	opacity: 0;
	transition: opacity .25s ease;
}
.lv-overlay.is-open { opacity: 1; }
.lv-overlay[hidden] { display: block; visibility: hidden; pointer-events: none; }
.lv-overlay.is-open[hidden] { visibility: visible; pointer-events: auto; }
/* Safety net: a closed overlay must never capture clicks, even if the JS
   failed to re-add [hidden]. Prevents the "site becomes unclickable" bug. */
.lv-overlay:not(.is-open) { pointer-events: none; opacity: 0; }

/* ---------- Page header / breadcrumbs ---------- */
.lv-page-header {
	background: var(--lv-surface);
	padding-block: clamp(28px, 4vw, 56px);
}
.lv-page-header__title { font-size: clamp(26px, 4vw, 40px); margin: 0; }
.lv-page-header__subtitle { color: var(--lv-muted); margin: 8px 0 0; }
.lv-breadcrumbs { margin-bottom: 10px; }
.lv-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	font-size: 13px;
	color: var(--lv-muted);
}
.lv-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; opacity: .5; }
.lv-breadcrumbs a:hover { color: var(--lv-primary); }

/* ---------- Product card ---------- */
.lv-card-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.lv-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--lv-radius);
	background: var(--lv-bg);
	transition: transform var(--lv-transition);
}
.lv-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--lv-radius);
	background: var(--lv-surface);
}
/* 4:5 ratio via padding — gives the box a definite height so the absolutely
   positioned images fill it reliably. The images sit inside an <a> wrapper,
   so height:100% on the <img> alone couldn't resolve; absolute-fill both the
   link and the image and it works everywhere (shop, home/Elementor, etc.). */
.lv-card__media::before {
	content: '';
	display: block;
	padding-top: 125%;
}
.lv-card__media > a {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 1;
}
/* `.lv-card` prefix raises specificity to (0,2,1) so this beats Elementor's
   `.elementor img { height:auto }` (0,1,1) which otherwise wins on the home
   page (it loads after the theme CSS) and left the image at intrinsic height. */
.lv-card .lv-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .35s ease, transform .5s ease;
}
.lv-card .lv-card__img--hover {
	opacity: 0;
}
.lv-card:hover .lv-card__img--hover { opacity: 1; }
.lv-card:hover .lv-card__img--main { transform: scale(1.04); }
.lv-card__labels {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 2;
}
.lv-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--lv-text);
	color: #fff;
}
.lv-label--sale { background: var(--lv-sale); }
.lv-label--new { background: var(--lv-primary); }
.lv-label--featured { background: var(--lv-secondary); color: var(--lv-text); }
.lv-label--oos { background: var(--lv-muted); }
.lv-label--trending { background: #7c3aed; }
.lv-label--bestseller { background: #0ea5e9; }

.lv-card__actions {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 2;
	opacity: 0;
	transform: translateX(8px);
	transition: all var(--lv-transition);
}
.lv-card:hover .lv-card__actions, .lv-card:focus-within .lv-card__actions { opacity: 1; transform: none; }
.lv-card__action {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 0;
	background: var(--lv-bg);
	box-shadow: var(--lv-shadow-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--lv-text);
	transition: all var(--lv-transition);
}
.lv-card__action:hover { background: var(--lv-primary); color: #fff; }
.lv-card__action.is-active { background: var(--lv-sale); color: #fff; }
/* Wishlisted: keep the white button, just fill the heart red (like a real
   wishlist), instead of turning the whole circle red. */
.lv-card__action[data-lv-wishlist].is-active { background: var(--lv-bg); color: var(--lv-sale); }
.lv-card__action[data-lv-wishlist].is-active svg { fill: var(--lv-sale); }
.lv-card__action[data-lv-wishlist].is-active:hover { background: var(--lv-sale); color: #fff; }
.lv-card__action[data-lv-wishlist].is-active:hover svg { fill: #fff; }

.lv-card__atc {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	opacity: 0;
	transform: translateY(8px);
	transition: all var(--lv-transition);
}
.lv-card:hover .lv-card__atc, .lv-card:focus-within .lv-card__atc { opacity: 1; transform: none; }
.lv-card__atc .lv-btn { width: 100%; box-shadow: var(--lv-shadow-md); }

.lv-card__body {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 2px 4px;
}
.lv-card__info { min-width: 0; }
.lv-card__cat {
	font-size: 13px;
	color: var(--lv-muted);
	margin: 0 0 6px;
}
.lv-card__cat a { color: inherit; }
.lv-card__title { font-size: 15px; font-weight: 500; margin: 0 0 3px; }
.lv-card__title a:hover { color: var(--lv-muted); }
.lv-card__dots { display: inline-flex; gap: 5px; padding-top: 4px; flex-shrink: 0; }
.lv-card__dots i {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--dot, #ddd);
	box-shadow: 0 0 0 1px rgb(0 0 0 / .08);
}
.lv-card__price { font-weight: 500; font-size: 15px; }
.lv-card__price del { color: var(--lv-muted); font-weight: 400; margin-right: 6px; }
.lv-card__price ins { text-decoration: none; color: var(--lv-sale); }
.lv-card__rating { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--lv-muted); }
.lv-card__rating svg { color: #f5a623; }

/* ---------- Blog cards ---------- */
.lv-post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.lv-post-card__media { display: block; border-radius: var(--lv-radius); overflow: hidden; }
.lv-post-card__media img { transition: transform .5s ease; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.lv-post-card:hover .lv-post-card__media img { transform: scale(1.04); }
.lv-post-card__body { padding-top: 14px; }
.lv-post-card__date { font-size: 13px; color: var(--lv-muted); }
.lv-post-card__title { font-size: 19px; margin: 6px 0; }
.lv-post-card__title a:hover { color: var(--lv-primary); }
.lv-post-card__excerpt { color: var(--lv-muted); font-size: 14px; margin: 0; }

/* ---------- Pagination ---------- */
.lv-pagination, .woocommerce-pagination { margin-top: 48px; text-align: center; }
.lv-pagination .nav-links, .woocommerce-pagination ul {
	display: inline-flex;
	gap: 8px;
	list-style: none;
	align-items: center;
}
.lv-pagination a, .lv-pagination span.current, .lv-pagination span.dots,
.woocommerce-pagination a, .woocommerce-pagination span.current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 8px;
	border-radius: 50%;
	border: 1.5px solid var(--lv-border);
	font-weight: 600;
	font-size: 14px;
	transition: all var(--lv-transition);
}
.lv-pagination a:hover, .woocommerce-pagination a:hover { border-color: var(--lv-primary); color: var(--lv-primary); }
.lv-pagination span.current, .woocommerce-pagination span.current {
	background: var(--lv-primary);
	border-color: var(--lv-primary);
	color: #fff;
}

/* ---------- Trust badges strip ---------- */
.lv-trust { margin-top: var(--lv-space); padding-block: 8px 56px; }
.lv-trust__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	text-align: center;
}
.lv-trust__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-bottom: 12px;
	color: var(--lv-text);
}
.lv-trust__title { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.lv-trust__text { color: var(--lv-muted); font-size: 13px; max-width: 260px; margin-inline: auto; }

/* ---------- Footer ---------- */
.lv-footer { border-top: 1px solid var(--lv-border); }
.lv-footer > .lv-container { padding-block: clamp(40px, 5vw, 64px); }
.lv-footer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1.4fr;
	gap: 48px;
}
.lv-footer__title {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding-bottom: 12px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--lv-border);
}
.lv-footer__menu { list-style: none; display: grid; gap: 12px; font-size: 14px; }
.lv-footer__menu a { color: var(--lv-text); }
.lv-footer__menu a:hover { color: var(--lv-muted); }
.lv-footer__note { font-size: 14px; color: var(--lv-muted); }
.lv-footer__social {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	font-size: 14px;
	font-weight: 500;
}
.lv-footer__social-link {
	font-weight: 600;
	padding: 6px 14px;
	border: 1.5px solid var(--lv-border);
	border-radius: 999px;
	font-size: 13px;
	transition: border-color var(--lv-transition), color var(--lv-transition);
}
.lv-footer__social-link:hover { border-color: var(--lv-text); }
/* Icon-only social buttons — each in its own brand colour (icons use currentColor). */
.lv-footer__social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1.5px solid var(--lv-border);
	color: var(--brand, var(--lv-text));
	transition: background var(--lv-transition), color var(--lv-transition), border-color var(--lv-transition);
}
.lv-footer__social-icon[href*="wa.me"], .lv-footer__social-icon[href*="whatsapp"] { --brand: #25D366; }
.lv-footer__social-icon[href*="facebook"] { --brand: #1877F2; }
.lv-footer__social-icon[href*="instagram"] { --brand: #E4405F; }
.lv-footer__social-icon[href*="pinterest"] { --brand: #E60023; }
.lv-footer__social-icon:hover { background: var(--brand, var(--lv-text)); color: #fff; border-color: var(--brand, var(--lv-text)); }
.lv-footer__social-icon svg { width: 19px; height: 19px; }
.lv-footer__bar { background: var(--lv-text); color: #fff; }
.lv-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 16px;
	font-size: 13px;
}
.lv-footer__copy { margin: 0; }
.lv-footer__legal { display: flex; gap: 18px; list-style: none; }
.lv-footer__legal a { color: #fff; opacity: .85; }
.lv-footer__legal a:hover { opacity: 1; }

/* ---------- Misc ---------- */
.lv-prose { max-width: 760px; }
.lv-prose img { border-radius: var(--lv-radius); }

.lv-empty { text-align: center; color: var(--lv-muted); padding-block: 48px; }

.lv-404 { text-align: center; }
.lv-404__code {
	font-family: var(--lv-font-heading);
	font-size: clamp(80px, 14vw, 140px);
	font-weight: 800;
	color: var(--lv-surface);
	-webkit-text-stroke: 2px var(--lv-primary);
	line-height: 1;
	margin: 0;
}
.lv-404__actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }

.lv-accordion__item {
	border: 1px solid var(--lv-border);
	border-radius: calc(var(--lv-radius) * .7);
	margin-bottom: 10px;
	overflow: hidden;
}
.lv-accordion__item summary {
	padding: 14px 18px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	position: relative;
}
.lv-accordion__item summary::after {
	content: "+";
	position: absolute;
	right: 18px;
	font-size: 18px;
	color: var(--lv-muted);
}
.lv-accordion__item[open] summary::after { content: "–"; }
.lv-accordion__item > div { padding: 0 18px 16px; color: var(--lv-muted); }

/* Toast notices */
.lv-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translate(-50%, 16px);
	background: var(--lv-text);
	color: #fff;
	padding: 12px 22px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	box-shadow: var(--lv-shadow-lg);
	z-index: 200;
	opacity: 0;
	transition: all .3s ease;
	pointer-events: none;
}
.lv-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.lv-toast--success { background: var(--lv-primary); }
.lv-toast--error { background: var(--lv-sale); }

/* Screen-reader text (WP + Woo) */
.screen-reader-text {
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.lv-card-row { grid-template-columns: repeat(3, 1fr); }
	.lv-footer__grid { grid-template-columns: 1fr 1fr; }
	.lv-post-grid { grid-template-columns: repeat(2, 1fr); }
	.lv-trust__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 782px) {
	.lv-header__nav { display: none; }
	.lv-header__burger { display: inline-flex; }
	.lv-card-row { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.lv-card__actions { opacity: 1; transform: none; }
	.lv-card__atc { opacity: 1; transform: none; left: 8px; right: 8px; bottom: 8px; }
	/* Keep "Add to Cart" on ONE line inside the narrow 2-up cards. */
	.lv-card__atc .lv-btn { padding: 9px 10px; font-size: 12.5px; gap: 6px; white-space: nowrap; }
	.lv-card__atc .lv-btn svg { width: 15px; height: 15px; }
	/* Smaller hover-action circles so they don't crowd the thumbnail. */
	.lv-card__action { width: 34px; height: 34px; }
}

@media (max-width: 560px) {
	.lv-post-grid { grid-template-columns: 1fr; }
	.lv-footer__grid { grid-template-columns: 1fr; gap: 28px; }
	.lv-trust__grid { grid-template-columns: 1fr; }
	.lv-footer__bar-inner { justify-content: center; text-align: center; }
	.lv-footer__legal { justify-content: center; flex-wrap: wrap; }
}

/* Cap oversized headings on phones. Elementor's home headings (.lv-display /
   .lv-script) and the section titles can carry desktop font-sizes that overflow
   a phone; these mobile-only caps shrink them fluidly without touching desktop.
   The min() keeps them from ever exceeding the viewport width. */
@media (max-width: 768px) {
	h1 { font-size: clamp(26px, 7vw, 34px); }
	h2 { font-size: clamp(22px, 6vw, 30px); }
	.lv-section-title { font-size: clamp(22px, 6.4vw, 30px); }
	.lv-section-title--script { font-size: clamp(24px, 7vw, 34px); }
	.lv-display .elementor-heading-title,
	.elementor-widget-heading.lv-display .elementor-heading-title,
	.lv-display { font-size: clamp(26px, 8vw, 40px) !important; line-height: 1.18; }
	.lv-script .elementor-heading-title,
	.elementor-widget-heading.lv-script .elementor-heading-title,
	.lv-script { font-size: clamp(24px, 7vw, 36px) !important; line-height: 1.2; }
	/* Any Elementor heading that still overflows on mobile. */
	.elementor-heading-title { overflow-wrap: break-word; }
}

/* Small phones: tighten the header and drop the pink strip's letter noise. */
@media (max-width: 480px) {
	.lv-header__inner { gap: 10px; min-height: 64px; }
	.lv-header__logo img { max-height: 42px; }
	.lv-header__brand { font-size: 26px; }
	.lv-header__action { width: 38px; height: 38px; }
	.lv-announcement { font-size: 12px; padding-block: 8px; }
	.lv-btn { padding: 12px 22px; font-size: 14px; }
}

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