/* =========================================================
   8Erikas — main.css
   Layer order: tokens → reset → layout → components → utilities
   ========================================================= */

/* ---------- Tokens ---------- */
/* Palette ported from the Fiora reference (Tailwind stone + rose scales). */
:root {
	--stone-50:  #fafaf9;
	--stone-100: #f5f5f4;
	--stone-200: #e7e5e4;
	--stone-300: #d6d3d1;
	--stone-400: #a8a29e;
	--stone-500: #78716c;
	--stone-600: #57534e;
	--stone-700: #44403c;
	--stone-900: #1c1917;

	--rose-100: #ffe4e6;
	--rose-200: #fecdd3;
	--rose-400: #fb7185;
	--rose-700: #be123c;

	--amber-100: #fef3c7;
	--amber-300: #fcd34d;
	--amber-500: #f59e0b;
	--amber-800: #92400e;

	--color-bg: var(--stone-50);
	--color-fg: var(--stone-900);
	--color-muted: var(--stone-500);
	--color-line: var(--stone-200);

	/* Brand accent — was --stone-900 (near-black); every interactive
	   "active"/primary surface (focus rings, current-page state, tab
	   underline, primary buttons, card add/compare) reads this token, so
	   the whole site re-skins from these two lines. */
	--color-accent: var(--rose-400);
	--color-accent-hover: var(--rose-700);
	--color-accent-fg: #ffffff;
	--color-surface: #ffffff;

	--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-serif: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
	--font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
	--leading: 1.6;

	--shadow-soft: 0 10px 40px -12px rgba(41, 37, 36, 0.18);
	--radius-lg: 24px;
	--radius-pill: 999px;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2.5rem;
	--space-6: 4rem;

	--radius: 4px;

	/* ---------- Product card ----------
	   Vienas rinkinys VISIEMS prekių sąrašams: parduotuvės archyvui,
	   /akcijos/, /populiariausi/, susijusioms prekėms ir pagrindinio puslapio
	   eilutėms. Kortelės taisyklės gyvena tik šiame faile — shop.css ir
	   home.css turi teisę keisti tik KONTEKSTĄ (tinklelio stulpelius), niekada
	   pačią kortelę. Kitaip du beveik vienodi stiliai išsiskiria per pirmą
	   pataisymą, kuris pritaikomas tik viename iš jų.

	   --card-pad telefone mažesnis sąmoningai: 2 kortelės 360px ekrane su 20px
	   tarpu paliktų nuotraukai ~100px. Ženkliukai naudoja tą patį kintamąjį,
	   tad jie visada lygiuojasi su vidiniu tarpu. */
	--card-pad: 14px;
	--card-radius: var(--radius-lg);
	--card-media-radius: 16px;
	--card-ink: #111111;
	--card-muted: #777777;
	--card-btn: var(--rose-400);
	--card-btn-hover: var(--rose-700);
	--card-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);

	/* Plonas kortelės apvadas. Atskiras nuo --color-line: tas yra sąsajos
	   linija (laukai, skirtukai), šis — šiltesnis, beveik nematomas kortelės
	   kontūras. */
	--border-subtle: #f0ece9;

	/* Ženkliukų paletės. Tik dvi reikšmės kiekvienai, kad naujo ženkliuko
	   pridėjimas būtų viena eilutė, o ne naujas atspalvių rinkinys. */
	--badge-best-bg: #fef3d6;
	--badge-best-fg: #935a16;
	--badge-sale-bg: #fce8e6;
	--badge-sale-fg: #c04848;
	--badge-new-bg: #e8f1ec;
	--badge-new-fg: #2f6b4f;

	/* ---------- Container scale ----------
	   Single source of truth for every horizontal shell in the theme.
	   Nothing else may declare its own site-width: header, footer, promo bar,
	   .wrap, .container and the shop shells all resolve to these four values.

	   --container-width   content box, gutters excluded
	   --container-padding fluid gutter, 1rem on phones → 2rem from ~800px up
	   --container-max     the value shells actually set as max-width
	   --measure           readable line length for long-form prose            */
	--container-width: 1280px;
	--container-padding: clamp(1rem, 4vw, 2rem);
	--container-max: calc(var(--container-width) + var(--container-padding) * 2);

	/* Narrow (prose) and wide (store grid) variants of the same scale.
	   --container-wide is an alias by design: the shop grid and the header must
	   share an edge. Set it to 87.5rem only if you also accept a header that no
	   longer lines up with the content below it. */
	--container-narrow: 45rem;
	--container-wide: var(--container-width);
	--measure: 68ch;

	/* Deprecated alias — kept so any stray third-party rule still resolves. */
	--container: var(--container-width);
}

/* Vienintelis kintamasis, kurį tema perrašo pagal ekraną. Taip kortelės
   vidinis tarpas IR ženkliukų padėtis pasikeičia kartu, vienoje vietoje. */
@media (min-width: 640px) {
	:root { --card-pad: 20px; }
}

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

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

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size);
	line-height: var(--leading);
	color: var(--color-fg);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 var(--space-3); text-wrap: balance; }
p, ul, ol { margin: 0 0 var(--space-3); }
p { text-wrap: pretty; }

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

a { color: inherit; text-underline-offset: 2px; }

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

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

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

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

/* The same element also carries .screen-reader-text, whose position is
   !important — so this one has to be too, or the focused link is positioned
   against the document and scrolls away. */
.skip-link:focus {
	position: fixed !important;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 100;
	width: auto; height: auto;
	clip-path: none;
	padding: var(--space-2) var(--space-3);
	background: var(--color-accent);
	color: var(--color-accent-fg);
}

/* ---------- Layout ----------
   THE SHELL GROUP.
   Every element that is allowed to define the page's left and right edge is
   listed here, once. They are identical by construction, so the header can
   never drift away from the content below it — on any template, with any
   combination of stylesheets loaded.

   Geometry: width:100% + max-width (rather than `width: min()`) so the gutter
   is real padding. That keeps a shell's *content* capped at --container-width
   while the gutter grows with the viewport, and lets children opt out of the
   gutter with a negative inline margin of exactly --container-padding.      */
.wrap,
.container,
.site-header__inner,
.promo-bar__inner,
.newsletter__inner,
.footer-quick__list,
.site-footer__columns,
.footer-trust,
.footer-wordmark__inner,
.site-footer__bottom-inner {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

/* Width variants. Only the cap changes; the gutter is constant, so a narrow
   shell and a wide shell still start their padding at the same offset. */
.wrap--narrow,
.container--narrow { max-width: calc(var(--container-narrow) + var(--container-padding) * 2); }

.wrap--wide { max-width: calc(var(--container-wide) + var(--container-padding) * 2); }

/* Escape hatch: a child of any shell that must reach the viewport edge. */
.bleed {
	margin-inline: calc(var(--container-padding) * -1);
	padding-inline: var(--container-padding);
}

.container { padding-block: var(--space-5); }

/* =========================================================
   ANNOUNCEMENT BAR
   ========================================================= */
.promo-bar {
	background: var(--stone-900);
	color: var(--stone-100);
}

.promo-bar__inner {
	/* Geometry from the shell group. */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding-block: 0.5rem;
	text-align: center;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}

@media (min-width: 640px) { .promo-bar__inner { font-size: 0.75rem; } }

.promo-bar__dot { color: var(--stone-500); }

/* The second message and its separator are desktop-only — two lines of promo
   on a 360px screen pushes the header itself below the fold. */
.promo-bar__dot,
.promo-bar__msg--extra { display: none; }

@media (min-width: 640px) {
	.promo-bar__dot,
	.promo-bar__msg--extra { display: inline; }
}

.promo-bar__code {
	display: inline-block;
	margin-inline: 0.25rem;
	border-radius: 6px;
	background: var(--stone-700);
	padding: 0.125rem 0.375rem;
	font-family: inherit;
	font-weight: 600;
	color: #fff;
}

/* =========================================================
   HEADER
   ---------------------------------------------------------
   Translucent, blurred, hairline bottom border. Sticky is a
   Customizer toggle, so the rule hangs off a modifier class
   rather than being unconditional.
   ========================================================= */
.site-header {
	position: relative;
	z-index: 50;
	border-bottom: 1px solid rgba(231, 229, 228, 0.7);
	background: rgba(250, 250, 249, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.site-header--sticky { position: sticky; top: 0; }

/* Fallback for browsers without backdrop-filter: an 85%-opaque bar over
   scrolling content is unreadable without the blur, so go fully opaque. */
@supports not (backdrop-filter: blur(12px)) {
	.site-header { background: var(--stone-50); }
}

.site-header__inner {
	/* Geometry from the shell group — never re-declare width here, and never
	   override it from a page-specific stylesheet. */
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 4rem;
}

/* ---------- Burger ---------- */
.site-header__burger {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	margin-inline-start: -0.5rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--stone-700);
	cursor: pointer;
	transition: background-color 0.2s;
}

.site-header__burger:hover { background: rgba(231, 229, 228, 0.6); }

/* Both glyphs occupy the same grid cell and are swapped by aria-expanded.
   The shared `.icon` rule further down this file sets display:block at the
   same specificity, so these have to be pinned with the parent selector or
   the close glyph reappears on top of the burger. */
.site-header__burger .icon { grid-area: 1 / 1; width: 1.25rem; height: 1.25rem; }
.site-header__burger .site-header__burger-close { display: none; }

.site-header__burger[aria-expanded="true"] .site-header__burger-open { display: none; }
.site-header__burger[aria-expanded="true"] .site-header__burger-close { display: block; }

@media (min-width: 1024px) { .site-header__burger { display: none; } }

/* ---------- Brand ---------- */
.site-brand {
	margin: 0;
	flex: 0 0 auto;
	font-size: inherit;
	font-weight: 400;
	line-height: 1;
}

.site-brand__link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.375rem;
	text-decoration: none;
	color: var(--stone-900);
}

.site-brand__name {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	letter-spacing: -0.01em;
}

.site-brand__suffix {
	display: none;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	color: var(--stone-400);
}

@media (min-width: 640px) { .site-brand__suffix { display: inline; } }

/* Cap the Customizer logo — without one a large upload renders at its natural
   width and blows the header out. */
.site-brand__logo {
	width: auto;
	max-width: 180px;
	max-height: 40px;
	object-fit: contain;
}

/* ---------- Primary nav ---------- */
.site-nav { display: none; }

@media (min-width: 1024px) {
	.site-nav { display: block; margin-inline-start: 0.5rem; }
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__list > li { position: relative; }

.site-nav__list a {
	display: block;
	padding-block: 0.5rem;
	font-size: 0.875rem;
	color: var(--stone-600);
	text-decoration: none;
	transition: color 0.2s;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-ancestor > a {
	color: var(--stone-900);
}

/* Underline grows from the centre on hover. Uses a pseudo-element rather than
   text-decoration so it can animate. */
.site-nav__list > li > a::after {
	content: "";
	display: block;
	height: 1px;
	margin-top: 2px;
	background: var(--stone-900);
	transform: scaleX(0);
	transition: transform 0.25s var(--ease-out);
}

.site-nav__list > li:hover > a::after,
.site-nav__list > li.current-menu-item > a::after { transform: scaleX(1); }

/* Shared "panel appears" animation for anything that mounts or reveals a
   floating dropdown — desktop nav submenus below and the select2 popup in
   shop.css. Kept here (main.css loads on every page) so both can use it. */
@keyframes erikas-dropdown-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Submenus */
.site-nav__list .sub-menu {
	position: absolute;
	inset-inline-start: -0.75rem;
	top: 100%;
	z-index: 10;
	min-width: 12rem;
	list-style: none;
	margin: 0;
	padding: 0.5rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: var(--shadow-soft);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px) scale(0.98);
	transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0.22s;
}

.site-nav__list > li:hover > .sub-menu,
.site-nav__list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.site-nav__list .sub-menu a {
	border-radius: 12px;
	padding: 0.5rem 0.75rem;
	white-space: nowrap;
}

.site-nav__list .sub-menu a:hover { background: var(--stone-100); }
.site-nav__list .sub-menu a::after { display: none; }

/* ---------- Header actions ---------- */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.125rem;
	margin-inline-start: auto;
}

.header-action {
	position: relative;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--stone-800);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s;
}

.header-action:hover { background: rgba(231, 229, 228, 0.6); }
.header-action .icon { width: 1.25rem; height: 1.25rem; }

/* Soft rose count badge. min-width keeps a two-digit count circular-ish
   instead of clipping. Compare/wishlist ship theirs with the `hidden`
   attribute until a module has a real count to show — the UA default for
   [hidden] loses to the unconditional `display: grid` above, so it has to be
   reasserted here, same as .search-panel/.mobile-nav/.cart-drawer below. */
.header-action__badge {
	position: absolute;
	inset-block-start: -1px;
	inset-inline-end: -1px;
	display: grid;
	place-items: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding-inline: 0.25rem;
	border-radius: var(--radius-pill);
	background: var(--rose-400);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.header-action__badge[hidden] { display: none; }

.header-action--account { display: none; }

@media (min-width: 640px) { .header-action--account { display: grid; } }

/* Fast Search shortcode wrapper ([fast_search mode="expand"], rendered by
   erikas_header_search() in inc/chrome.php). The plugin owns everything
   inside — its own icon, input and expand interaction — so this only lines
   its resting footprint up with the rest of the actions row (same 40×40 box,
   same hover tint) using loose, low-specificity element selectors rather
   than guessing at the plugin's own class names. Revisit once the plugin's
   live markup is visible on a running site; it may render its own sizing
   that makes some of this redundant. */
.header-action--search {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
}

.header-action--search button,
.header-action--search > a {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--stone-800);
	cursor: pointer;
	transition: background-color 0.2s;
}

.header-action--search button:hover,
.header-action--search > a:hover { background: rgba(231, 229, 228, 0.6); }

.header-action--search svg,
.header-action--search img { width: 1.25rem; height: 1.25rem; }

.header-action--search input[type="search"],
.header-action--search input[type="text"] {
	height: 2.5rem;
	border: 1px solid var(--stone-200);
	border-radius: var(--radius-pill);
	background: var(--stone-50);
	padding-inline: 1rem;
	font-size: 0.875rem;
}

/* Four action icons now share the row on every viewport (previously two
   below 640px). Tightens the gap on very narrow phones so search, compare,
   wishlist and cart never force the actions row to wrap or overflow next to
   the burger + brand. */
@media (max-width: 380px) {
	.site-header__actions { gap: 0; }
}

/* =========================================================
   MOBILE NAV DRAWER
   ========================================================= */
.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 60;
}

.mobile-nav[hidden] { display: none; }

.mobile-nav__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(28, 25, 23, 0.4);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.3s var(--ease-out);
}

.mobile-nav.is-open .mobile-nav__backdrop { opacity: 1; }

.mobile-nav__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: min(20rem, 85vw);
	display: flex;
	flex-direction: column;
	background: var(--color-bg);
	box-shadow: var(--shadow-soft);
	padding: 1.25rem;
	overflow-y: auto;
	transform: translateX(-100%);
	transition: transform 0.3s var(--ease-out);
}

.mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); }

.mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.mobile-nav__title {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	color: var(--stone-400);
}

.mobile-nav__close {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--stone-500);
	cursor: pointer;
}

.mobile-nav__close:hover { background: var(--stone-200); color: var(--stone-900); }

.mobile-nav__list,
.mobile-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-nav__list a {
	display: block;
	border-radius: 14px;
	padding: 0.6875rem 0.75rem;
	font-size: 0.9375rem;
	color: var(--stone-700);
	text-decoration: none;
	transition: background-color 0.2s;
}

.mobile-nav__list a:hover,
.mobile-nav__list .current-menu-item > a { background: rgba(231, 229, 228, 0.6); color: var(--stone-900); }

.mobile-nav__list .sub-menu { margin-inline-start: 0.75rem; }
.mobile-nav__list .sub-menu a { font-size: 0.875rem; color: var(--stone-500); }

.mobile-nav__foot {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--color-line);
}

.mobile-nav__account {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	border-radius: 14px;
	padding: 0.6875rem 0.75rem;
	font-size: 0.9375rem;
	color: var(--stone-700);
	text-decoration: none;
}

.mobile-nav__account:hover { background: rgba(231, 229, 228, 0.6); }
.mobile-nav__account .icon { width: 1.125rem; height: 1.125rem; }

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

/* =========================================================
   CART DRAWER
   ========================================================= */
.cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 65;
}

.cart-drawer[hidden] { display: none; }

.cart-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(28, 25, 23, 0.4);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.3s var(--ease-out);
}

.cart-drawer.is-open .cart-drawer__backdrop { opacity: 1; }

.cart-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(26rem, 100vw);
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	box-shadow: var(--shadow-soft);
	transform: translateX(100%);
	transition: transform 0.3s var(--ease-out);
}

.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }

/* Dim + block input while an AJAX update is in flight, so a fast double-click
   cannot queue two conflicting quantity writes. */
.cart-drawer.is-busy .cart-drawer__body { opacity: 0.55; pointer-events: none; }

.cart-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-bottom: 1px solid var(--color-line);
	padding: 1.25rem 1.5rem;
}

.cart-drawer__title {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--stone-900);
}

.cart-drawer__close {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--stone-400);
	cursor: pointer;
}

.cart-drawer__close:hover { background: var(--stone-100); color: var(--stone-900); }

/* Failure notice.
   Sits between the header and the body, so it survives the fragment swap that
   replaces .cart-drawer__body on every change (see assets/js/cart.js). Hidden
   via the `hidden` attribute rather than :empty — the script owns the state
   explicitly instead of inferring it from the text content. */
.cart-drawer__notice {
	margin: 0;
	padding: 0.75rem 1.5rem;
	border-bottom: 1px solid var(--rose-200);
	background: var(--rose-100);
	color: var(--rose-700);
	font-size: 0.875rem;
	line-height: 1.45;
}

.cart-drawer__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	transition: opacity 0.2s;
}

.cart-drawer__items {
	list-style: none;
	margin: 0;
	padding: 1rem 1.5rem;
	overflow-y: auto;
	flex: 1 1 auto;
	scrollbar-width: thin;
}

.cart-drawer__items::-webkit-scrollbar { width: 6px; }
.cart-drawer__items::-webkit-scrollbar-thumb { background: var(--stone-300); border-radius: var(--radius-pill); }

/* ---------- Cart item ---------- */
.cart-item {
	display: flex;
	gap: 0.875rem;
	padding-block: 1rem;
}

.cart-item + .cart-item { border-top: 1px solid var(--stone-100); }

.cart-item__thumb {
	flex: 0 0 auto;
	width: 4rem;
	height: 4rem;
	border-radius: 16px;
	background: var(--stone-100);
	overflow: hidden;
}

.cart-item__thumb img { width: 100%; height: 100%; object-fit: cover; }

.cart-item__body { flex: 1 1 auto; min-width: 0; }

.cart-item__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
}

.cart-item__name { font-size: 0.875rem; font-weight: 500; color: var(--stone-900); }
.cart-item__name a { text-decoration: none; }
.cart-item__name a:hover { text-decoration: underline; }

.cart-item__remove {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--stone-300);
	cursor: pointer;
	transition: color 0.2s, background-color 0.2s;
}

.cart-item__remove:hover { background: var(--rose-100); color: var(--rose-700); }
.cart-item__remove .icon { width: 0.9375rem; height: 0.9375rem; }

.cart-item__meta { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--stone-500); }
.cart-item__meta p { margin: 0; }

.cart-item__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.625rem;
}

.cart-item__price { font-size: 0.875rem; font-weight: 600; color: var(--stone-900); }
.cart-item__qty-fixed { font-size: 0.75rem; color: var(--stone-500); }

/* ---------- Quantity stepper ---------- */
.qty-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--stone-200);
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.qty-stepper__btn {
	display: grid;
	place-items: center;
	width: 1.875rem;
	height: 1.875rem;
	border: 0;
	background: transparent;
	color: var(--stone-600);
	cursor: pointer;
	transition: background-color 0.2s;
}

.qty-stepper__btn:hover:not([disabled]) { background: var(--stone-100); }
.qty-stepper__btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.qty-stepper__btn .icon { width: 0.875rem; height: 0.875rem; }

/*
 * Buvo <span>, dabar <input type="number"> (assets/js/cart.js įveda kiekį
 * tiesiogiai, ne tik +/- mygtukais) — nulinam standartinę lauko išvaizdą, kad
 * jis toliau atrodytų kaip skaičius tarp dviejų mygtukų, o ne kaip forma.
 */
.qty-stepper__value {
	width: 2.25rem;
	min-width: 1.75rem;
	border: 0;
	background: transparent;
	padding: 0;
	text-align: center;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--stone-900);
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}

.qty-stepper__value::-webkit-outer-spin-button,
.qty-stepper__value::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.qty-stepper__value:focus-visible {
	outline: none;
	border-radius: var(--radius-sm, 4px);
	box-shadow: 0 0 0 2px var(--color-accent);
}

/* ---------- Drawer footer ---------- */
.cart-drawer__foot {
	border-top: 1px solid var(--color-line);
	background: var(--stone-50);
	padding: 1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom));
}

.cart-drawer__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.9375rem;
	color: var(--stone-600);
}

.cart-drawer__row strong { font-size: 1.125rem; color: var(--stone-900); }

.cart-drawer__note { margin: 0.375rem 0 1rem; font-size: 0.75rem; color: var(--stone-400); }

.btn.cart-drawer__checkout,
.btn.cart-drawer__view { display: block; width: 100%; text-align: center; }
.btn.cart-drawer__view { margin-top: 0.5rem; }

/* ---------- Empty state ---------- */
.cart-drawer__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	flex: 1 1 auto;
	padding: 3rem 1.5rem;
	text-align: center;
}

.cart-drawer__empty-icon {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: 0.5rem;
	border-radius: var(--radius-pill);
	background: var(--stone-100);
	color: var(--stone-400);
}

.cart-drawer__empty-icon .icon { width: 1.5rem; height: 1.5rem; }

.cart-drawer__empty-title {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 1.125rem;
	color: var(--stone-900);
}

.cart-drawer__empty-text { margin: 0 0 1rem; font-size: 0.875rem; color: var(--stone-500); }

/* Body scroll lock shared by all three overlays. */
body.has-overlay { overflow: hidden; }

/* Keep in-page anchor targets clear of the sticky bar. Without this, jumping
   to #newsletter lands with the heading tucked under the header. */
body.has-sticky-header { scroll-padding-top: 5rem; }

/* ---------- Post grid ---------- */
.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-4);
}

.card__media img { border-radius: var(--radius); }
.card__title { font-size: 1.125rem; margin-block: var(--space-3) var(--space-1); }
.card__title a { text-decoration: none; }
.entry__meta { color: var(--color-muted); font-size: 0.875rem; }

/* ---------- Entry ---------- */
.entry__content > * + * { margin-top: var(--space-3); }
.entry__thumb { margin: 0 0 var(--space-4); }
.entry__thumb img { border-radius: var(--radius); }

/* =========================================================
   DEFAULT PAGE TEMPLATE (page.php, non-Woo branch)
   ---------------------------------------------------------
   The shell is the full site container — same edges as the header — and the
   *typography* is what gets narrowed, not the layout box. That is the whole
   fix: the old template put a 720px cap on the container itself, so a page
   with a table, a gallery or a wide image had nowhere to put it.

   Mechanism: .entry--page .entry__content is a three-column grid whose middle
   track is the reading measure. Children land in `content` by default; the
   handful of things that deserve the full container opt into `full`. No
   negative margins, no per-block width juggling.
   ========================================================= */
.page-content { padding-block: clamp(2rem, 5vw, 4rem); }

.entry--page .entry__header { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.entry--page .entry__title {
	font-family: var(--font-serif);
	font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0;
	max-width: 20ch;
	color: var(--stone-900);
}

.entry--page .entry__lede {
	margin: 1rem 0 0;
	max-width: 46ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--stone-500);
}

.entry--page .entry__thumb {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--stone-100);
}

.entry--page .entry__thumb img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0;
}

/* The content well. Two tracks, not three: the measure column starts flush
   with the container's left edge so body copy lines up with the <h1> above it,
   and the spare track on the right is what `full` reclaims. */
.entry--page .entry__content {
	display: grid;
	grid-template-columns:
		[full-start content-start] min(var(--measure), 100%) [content-end]
		minmax(0, 1fr) [full-end];
}

.entry--page .entry__content > * { grid-column: content; }

/* Things that read better edge-to-edge inside the container. */
.entry--page .entry__content > .alignwide,
.entry--page .entry__content > .alignfull,
.entry--page .entry__content > figure,
.entry--page .entry__content > .wp-block-image,
.entry--page .entry__content > .wp-block-gallery,
.entry--page .entry__content > .wp-block-embed,
.entry--page .entry__content > .wp-block-columns,
.entry--page .entry__content > .wp-block-table,
.entry--page .entry__content > .wp-block-cover { grid-column: full; }

/* A grid's children ignore adjacent-sibling margin collapse, so rhythm is
   declared once here rather than through * + *. */
.entry--page .entry__content > * { margin-block: 0; }
.entry--page .entry__content > * + * { margin-top: 1.25rem; }
.entry--page .entry__content > * + :is(h2, h3, h4) { margin-top: 2.5rem; }

.entry--page .entry__content :is(h2, h3, h4) {
	font-family: var(--font-serif);
	font-weight: 400;
	letter-spacing: -0.015em;
	color: var(--stone-900);
}

.entry--page .entry__content h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); }
.entry--page .entry__content h3 { font-size: 1.25rem; }

.entry--page .entry__content :is(p, li) { line-height: 1.75; color: var(--stone-700); }
.entry--page .entry__content a:not(.btn) { color: var(--stone-900); text-decoration: underline; text-underline-offset: 3px; }

.entry--page .entry__content :is(img, video, iframe) { border-radius: var(--radius-lg); }

.entry--page .entry__content blockquote {
	border-inline-start: 2px solid var(--stone-900);
	padding-inline-start: 1.25rem;
	font-family: var(--font-serif);
	font-size: 1.25rem;
	font-style: italic;
	color: var(--stone-900);
}

/* Tables and pre are the classic overflow culprits — let them scroll rather
   than stretching the page and reintroducing a horizontal scrollbar. */
.entry--page .entry__content :is(table, pre) { display: block; overflow-x: auto; max-width: 100%; }

.entry--page .entry__pagelinks { margin-top: 2.5rem; font-size: 0.875rem; color: var(--stone-500); }

.post-nav a { color: var(--color-muted); }
.post-nav__label { display: block; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Pagination ---------- */
.pagination .nav-links {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
	margin-top: var(--space-5);
}

.pagination .page-numbers {
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--color-accent);
	color: var(--color-accent-fg);
	border-color: var(--color-accent);
}

/* ---------- Forms ---------- */
/* get_search_form() output — 404 pages, empty search results, any widget.
   Same pill language as the header search panel. */
.search-form { display: flex; gap: var(--space-2); max-width: 28rem; }

.search-form__input {
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	padding-inline: 1.25rem;
}

.search-form__submit {
	flex: 0 0 auto;
	border: 1px solid var(--stone-900);
	border-radius: var(--radius-pill);
	background: var(--stone-900);
	color: #fff;
	padding: 0.6em 1.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s;
}

.search-form__submit:hover { background: var(--stone-700); }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
	width: 100%;
	padding: 0.6em 0.75em;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: var(--color-bg);
}

/* =========================================================
   FOOTER
   ---------------------------------------------------------
   Three bands: newsletter, link columns, bottom bar. Columns
   whose menu is unassigned render nothing (footer.php), so
   auto-fit keeps the grid balanced whatever survives.
   ========================================================= */
.site-footer {
	/* Suapvalintos viršutinės kampinės + gradientas.

	   KODĖL `overflow: hidden` YRA BŪTINAS, O NE KOSMETINIS.
	   Be jo suapvalinti kampai neturėtų ką nukirpti — gradientinis fonas
	   nusipieštų stačiakampiu virš jų. Antra, .footer-wordmark__inner juda
	   per transform ir siaurame lange gali išsikišti už krašto; be clip'o tai
	   pridėtų horizontalią slinktį VISUOSE puslapiuose — defektas, kurį
	   pastebi tik telefonas.

	   `position: relative` — vandens ženklas pozicionuojamas jo atžvilgiu. */
	position: relative;
	overflow: hidden;
	margin-top: 5rem;
	border-top: 1px solid var(--color-line);
	border-start-start-radius: var(--footer-radius);
	border-start-end-radius: var(--footer-radius);
	background:
		radial-gradient(80rem 32rem at 50% 0%, rgba(255, 228, 230, 0.38), transparent 62%),
		linear-gradient(180deg, var(--stone-50) 0%, var(--color-surface) 34%);
}

/* Telefone apvalinimas mažesnis: 32px ant 360px pločio atrodo kaip klaida,
   ne kaip sprendimas. */
:root { --footer-radius: 1.5rem; }

@media (min-width: 768px) {
	:root { --footer-radius: 2rem; }
}

/* ---------- Newsletter ---------- */
.newsletter { border-bottom: 1px solid var(--color-line); }

.newsletter__inner {
	/* Geometry from the shell group. */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	padding-block: 3rem;
	text-align: center;
}

.newsletter__title {
	margin: 0;
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
	font-weight: 400;
	color: var(--stone-900);
}

.newsletter__text {
	max-width: 30rem;
	margin: 0.5rem auto 0;
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--stone-500);
}

.newsletter__form { width: min(100%, 30rem); margin: 0; }

.newsletter__row { display: flex; gap: 0.5rem; }

/* Paired with the type selector: the generic `input[type="email"]` rule in
   the Forms section is (0,1,1) and outranks a lone class whatever the order,
   which left this field with 4px corners next to a pill button. */
.newsletter__input,
input[type="email"].newsletter__input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	border: 1px solid var(--stone-200);
	border-radius: var(--radius-pill);
	background: var(--stone-50);
	padding: 0.8125rem 1.25rem;
	font-size: 0.875rem;
	color: var(--stone-900);
	outline: none;
	transition: border-color 0.2s;
}

.newsletter__input:focus { border-color: var(--stone-900); }
.newsletter__input::placeholder { color: var(--stone-400); }

.btn.newsletter__submit { flex: 0 0 auto; padding: 0.8125rem 1.5rem; }
.btn.newsletter__submit[disabled] { opacity: 0.6; cursor: wait; }
.newsletter__form.is-busy { opacity: 0.7; }

/* Success state — the button turns emerald and keeps its width. */
.newsletter__form.is-done .newsletter__submit { background: #10b981; border-color: #10b981; }

/* The honeypot must be reachable by bots parsing the DOM but invisible and
   unfocusable for humans, so it is offset rather than display:none. */
.newsletter__hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.newsletter__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: 0.75rem;
	text-align: start;
	font-size: 0.6875rem;
	line-height: 1.6;
	color: var(--stone-400);
	cursor: pointer;
}

.newsletter__consent input {
	width: 0.9375rem;
	height: 0.9375rem;
	margin: 0.1875rem 0 0;
	flex: 0 0 auto;
	accent-color: var(--color-accent);
}

.newsletter__consent a { color: var(--stone-600); }

.newsletter__msg {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
}

/* The element is always in the DOM so the script has somewhere to write.
   `:empty` only matches when PHP emits no whitespace inside it — see
   inc/newsletter.php, where the message is built before the tag is printed. */
.newsletter__msg:empty { display: none; margin: 0; }
.newsletter__msg.is-ok { color: #047857; }
.newsletter__msg.is-error { color: var(--rose-700); }
.newsletter__msg .icon { width: 0.9375rem; height: 0.9375rem; }

@media (max-width: 480px) {
	.newsletter__row { flex-direction: column; }
	.btn.newsletter__submit { width: 100%; }
}

/* ---------- Link columns ---------- */
.site-footer__columns {
	/* Geometry from the shell group. */
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	padding-block: 3rem;
}

/* auto-fit, ne fiksuotas stulpelių skaičius: meniu vietų dabar keturios plius
   socialinių tinklų stulpelis, o kiekviena jų dingsta, kai meniu nepriskirtas
   (inc/chrome.php erikas_footer_menu_column). Fiksuotas `repeat(4, …)` reikštų
   tuščius langelius kiekvienam nepanaudotam meniu. */
@media (min-width: 768px) {
	.site-footer__columns {
		grid-template-columns: 1.7fr repeat(auto-fit, minmax(8.5rem, 1fr));
	}
}

.site-footer__col--brand { grid-column: 1 / -1; }

@media (min-width: 768px) {
	.site-footer__col--brand { grid-column: auto; }
}

/* The brand block reuses .site-brand from the header, so only the overrides
   the footer context needs are declared here. */
.site-footer__col--brand .site-brand__name { font-size: 1.5rem; }

.site-footer__tagline {
	max-width: 20rem;
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--stone-500);
}

.site-footer__badge {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin: 1rem 0 0;
	font-size: 0.75rem;
	color: var(--stone-500);
}

.site-footer__badge .icon { width: 1rem; height: 1rem; color: #10b981; flex: 0 0 auto; }

.site-footer__heading {
	margin: 0 0 0.75rem;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--stone-500);
}

.site-footer__links,
.site-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.875rem;
}

.site-footer__links a,
.site-footer__social a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--stone-600);
	text-decoration: none;
	transition: color 0.2s;
}

.site-footer__links a:hover,
.site-footer__social a:hover { color: var(--stone-900); }

.site-footer__social .icon { width: 1rem; height: 1rem; color: var(--stone-400); }
.site-footer__social a:hover .icon { color: var(--stone-700); }

/* ---------- Quick-link pills ----------
   Poraštės pagrindinė navigacija. Renderinasi iš kodo (inc/footer.php), tad
   ji yra vienintelė poraštės dalis, kuri garantuotai vienoda kiekviename
   puslapyje — žr. footer.php docblock'ą. */
.footer-quick { border-block-end: 1px solid var(--color-line); }

.footer-quick__list {
	/* Geometry from the shell group. */
	list-style: none;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.625rem;
	padding-block: 1.75rem;
}

.footer-quick__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	padding: 0.625rem 1.125rem;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1;
	color: var(--stone-600);
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(41, 37, 36, 0.04);
	transition: transform 0.25s var(--ease-out), border-color 0.25s, color 0.25s, box-shadow 0.25s;
}

.footer-quick__btn .icon {
	width: 1rem;
	height: 1rem;
	color: var(--stone-400);
	flex: 0 0 auto;
	transition: color 0.25s;
}

.footer-quick__btn:hover,
.footer-quick__btn:focus-visible {
	transform: translateY(-2px);
	border-color: var(--color-accent);
	color: var(--stone-900);
	box-shadow: var(--shadow-soft);
}

.footer-quick__btn:hover .icon,
.footer-quick__btn:focus-visible .icon { color: var(--color-accent); }

/* ---------- Contact buttons ---------- */
.footer-contact {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.footer-contact__btn,
.footer-contact__note {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: var(--stone-50);
	padding: 0.5rem 0.875rem;
	font-size: 0.8125rem;
	color: var(--stone-600);
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.footer-contact .icon { width: 0.9375rem; height: 0.9375rem; color: var(--stone-400); flex: 0 0 auto; }

.footer-contact__btn:hover,
.footer-contact__btn:focus-visible {
	border-color: var(--color-accent);
	background: var(--color-surface);
	color: var(--stone-900);
}

/* Darbo laikas nėra nuoroda — tas pats apvalkalas, bet be žymeklio ir be
   hover būsenos, kad niekas nebandytų jo spausti. */
.footer-contact__note { cursor: default; color: var(--stone-500); }

/* ---------- Trust band ---------- */
.site-footer__trust-band { border-block-start: 1px solid var(--color-line); }

.footer-trust {
	/* Geometry from the shell group. */
	list-style: none;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	padding-block: 1.5rem;
}

@media (min-width: 640px) {
	.footer-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.footer-trust__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--stone-500);
}

.footer-trust__item .icon { width: 1.125rem; height: 1.125rem; color: var(--color-accent); flex: 0 0 auto; }

/* ---------- Parallax wordmark ----------
   Dekoratyvus sluoksnis (aria-hidden markup'e).

   JUDESIO SUTARTIS. assets/js/main.js rašo TIK du kintamuosius:
   --wordmark-shift (px) ir --wordmark-fade (0–1). Numatytos reikšmės žemiau
   yra be-JS būsena: ženklas stovi vietoje ir yra pilnai matomas. Todėl
   scenarijui neįsikrovus poraštė atrodo teisingai, o ne tuščia — parallax
   yra pagerinimas, ne sąlyga.

   Dydis matuojamas vw, ne rem: ženklas turi lygiuotis su poraštės pločiu, o
   ne su šrifto skale, ir per visą diapazoną likti šiek tiek platesnis už
   turinį — nukirptas kraštas yra pati efekto esmė. */
.footer-wordmark {
	--wordmark-shift: 0px;
	--wordmark-fade: 1;

	/* Neutralizuoja apatinės juostos viršutinį rėmelį: ženklas turi liestis
	   su ja, o ne kaboti virš atskiros linijos. */
	margin-block-end: -1px;
	padding-block-start: 1rem;
	pointer-events: none;
	user-select: none;
}

.footer-wordmark__inner {
	/* Geometry from the shell group. */
	display: flex;
	justify-content: center;
	opacity: var(--wordmark-fade);
	transform: translate3d(0, var(--wordmark-shift), 0);
	/* will-change tik čia: vienas sluoksnis visame puslapyje, ne dešimt. */
	will-change: transform;
}

.footer-wordmark__text {
	display: block;
	font-family: var(--font-serif);
	font-size: clamp(3.5rem, 17vw, 15rem);
	font-weight: 400;
	line-height: 0.82;
	letter-spacing: -0.03em;
	white-space: nowrap;

	/* Gradientinis tekstas: viršus beveik nematomas, apačia nukerpama
	   apatinės juostos. Fallback — vientisa stone-200 spalva toms
	   naršyklėms, kurios nemoka background-clip: text. */
	color: var(--stone-200);
	background: linear-gradient(180deg, var(--stone-300) 0%, var(--stone-100) 78%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.footer-wordmark__logo {
	display: block;
	width: auto;
	max-width: min(100%, 40rem);
	height: auto;
	opacity: 0.14;
}

/* Numatytoji reikšmė žemiau lango: JS ją pakeis, bet jei scenarijus
   neįsikraus, ženklas jau matomas (žr. .footer-wordmark). Judesys išjungiamas
   kartu su visais kitais — globalus prefers-reduced-motion blokas failo
   viršuje nuima tranzicijas, o initFooterWordmark() tokiu atveju apskritai
   nepaleidžiamas. */

/* ---------- Back to top ---------- */
.back-to-top {
	/* fixed + <body> lygis — žr. erikas_back_to_top() komentarą
	   inc/footer.php dėl to, kodėl jis NĖRA poraštės viduje.
	   z-index žemesnis nei krepšelio drawer'io, aukštesnis nei turinio. */
	position: fixed;
	inset-block-end: 1.25rem;
	inset-inline-end: 1.25rem;
	z-index: 60;

	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--color-line);
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--stone-600);
	cursor: pointer;
	box-shadow: var(--shadow-soft);

	/* Paslėpta būsena.

	   KODĖL `visibility`, O NE VIEN `opacity: 0`.
	   Permatomas elementas VIS TIEK gaudo pelės paspaudimus ir vis tiek yra
	   prieinamumo medyje. Vien su opacity apatiniame dešiniajame kampe liktų
	   nematomas 44×44px mygtukas, valgantis paspaudimus ant viso puslapio
	   ilgio — o ekrano skaitytuvas skelbtų mygtuką, kurio ekrane nėra.

	   `visibility` tranzicija su 0s trukme ir 0.25s delsa: slepiant ji laukia,
	   kol baigsis išnykimas, rodant — įsijungia iškart. Taip gaunamas ir
	   sklandus efektas, ir švarus paslėpimas. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(0.5rem);
	transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out),
		border-color 0.2s, color 0.2s, visibility 0s linear 0.25s;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out),
		border-color 0.2s, color 0.2s, visibility 0s;
}

.back-to-top:hover,
.back-to-top:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }

.back-to-top__icon {
	width: 1.125rem;
	height: 1.125rem;
	/* Ikonų registre yra tik „chevron" (žemyn). Pasukame, o ne pridedame
	   antrą kelią — vienas registras, viena tiesa. */
	transform: rotate(180deg);
}

/* Telefone mygtukas keliamas aukščiau: apačioje sėdi plugin'o palyginimo
   juosta (.ses-compare-bar) ir naršyklės UI. */
@media (max-width: 640px) {
	.back-to-top { inset-block-end: 4.5rem; }
}

/* ---------- Bottom bar ---------- */
.site-footer__bottom {
	position: relative; /* virš vandens ženklo */
	border-top: 1px solid var(--color-line);
	background: var(--color-surface);
}

.site-footer__bottom-inner {
	/* Geometry from the shell group. */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-block: 1.5rem;
	font-size: 0.75rem;
	color: var(--stone-500);
}

.site-footer__copy { margin: 0; }

.site-footer__legal,
.site-footer__payments {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.site-footer__legal a { color: inherit; text-decoration: none; }
.site-footer__legal a:hover { color: var(--stone-900); }

.site-footer__payments li {
	border: 1px solid var(--color-line);
	border-radius: 8px;
	padding: 0.1875rem 0.5rem;
	font-size: 0.6875rem;
	letter-spacing: 0.02em;
	color: var(--stone-400);
}

@media (max-width: 640px) {
	.site-footer__bottom-inner { flex-direction: column; text-align: center; }
	.site-footer__legal,
	.site-footer__payments { justify-content: center; gap: 0.75rem; }
}

/* =========================================================
   SHARED COMPONENTS
   Used by the homepage, the shop archive and single products.
   Kept in main.css (rather than home.css/shop.css) so all three
   render from one definition.
   ========================================================= */
/* ---------- Shared shell ----------
   .wrap / .wrap--wide / .wrap--narrow geometry lives in the shell group at the
   top of this file. Kept there so one edit moves the whole site. */

.section { padding-block: 3.5rem; }

.section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.section__title {
	font-family: var(--font-serif);
	font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.25rem);
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0;
	color: var(--stone-900);
}

.section__subtitle {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	color: var(--stone-500);
}

.section__link {
	flex-shrink: 0;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--stone-700);
	text-decoration: none;
	text-underline-offset: 4px;
}

.section__link:hover { text-decoration: underline; }

@media (max-width: 640px) {
	.section__link { display: none; }
	.section__head { display: block; }
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-block;
	border-radius: var(--radius-pill);
	padding: 0.875rem 1.75rem;
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
	cursor: pointer;
}

.btn--solid { background: var(--color-accent); color: var(--color-accent-fg); }
.btn--solid:hover { background: var(--color-accent-hover); }

.btn--ghost { border-color: var(--stone-300); color: var(--stone-700); }
.btn--ghost:hover { border-color: var(--stone-900); }

.btn--light { background: #fff; color: var(--stone-900); }
.btn--light:hover { background: var(--stone-200); }

/* ---------- Pill / eyebrow ---------- */
.pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid var(--color-line);
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(6px);
	border-radius: var(--radius-pill);
	padding: 0.25rem 0.75rem;
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--stone-500);
}

/* ---------- Icons ----------
   Vienintelė vieta, kur gyvena ikonų stilius.

   inc/icons.php emit'ina tik viewBox, fill="none" ir stroke="currentColor" —
   piešimo modelį, be kurio ikona neatsivaizduotų. Visa kita (storis, dydis,
   linijų galai) yra čia, todėl temą galima perpiešti nepaliečiant PHP. */
.icon {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Site chrome — čia erikas_chrome_icon() piešė 1.8. Sąrašas surinktas iš visų
   buvusių jos kvietimų; pražiūrėta vieta atsidurtų prie 1.6, t. y. plaukelio
   storio skirtumas, o ne sugedusi ikona. */
.site-header .icon,
.mobile-nav .icon,
.cart-drawer .icon,
.site-footer .icon,
.newsletter .icon,
.announcement-bar .icon { stroke-width: 1.8; }

/* =========================================================
   PRODUCT GRID + CARD
   -----------------------------------------------------------
   .product-grid  — pagrindinio puslapio eilutės (template-parts/home).
   ul.products    — WooCommerce sąrašas: archyvas, /akcijos/,
                    /populiariausi/, susijusios prekės.

   Viena bazė ir VIENA stulpelių rampa abiem. Anksčiau jos skyrėsi:
   `ul.products` ėjo 2 -> 3 -> 4, o `.product-grid` šokdavo 2 -> 4, t. y.
   pagrindiniame puslapyje nuo 768px iki 1023px likdavo dvi kortelės eilėje.
   Tai buvo tylus regresas: 900px pločio ekrane kortelė išsipūsdavo iki ~430px,
   o nuotraukos dėžė — iki ~490px aukščio. Prekės kortelė tokio dydžio
   nustoja būti kortele.

   Vienišos ketvirtos kortelės planšetėje (3 + 1) baimė buvo nepagrįsta:
   tinklelis išlaiko stulpelio plotį, tad „orphan" tėra tuščias tarpas
   dešinėje — įprastas ir daug geresnis už dvi milžiniškas korteles.

   Vienintelė teisėta išimtis lieka shop.css: su filtrų šonine juosta turinio
   stulpelis siauresnis, tad 4 stulpeliai atidedami iki 1280px.
   ========================================================= */
/*
 * `ul.products[class*="columns-"]` yra sąmoningas specifiškumo pakėlimas.
 *
 * WooCommerce sąrašui uždeda `columns-4` (ar kiek nustatyta), ir tiek Woo
 * legacy CSS, tiek įskiepiai mėgsta kabintis būtent prie tos klasės. Plikas
 * `ul.products` (0,1,1) tokiai taisyklei pralaimi; `ul.products[class*=…]`
 * (0,2,1) — ne. Viena eilutė uždengia visus `columns-1…6` variantus, tad
 * nereikia jų vardyti po vieną.
 *
 * Lūžio taškai ir tarpai fiksuoti pikseliais, o ne rem: tinklelio tarpas yra
 * išdėstymo konstanta, kuri neturi šokinėti kartu su vartotojo šrifto dydžiu.
 */
/*
 * `.products` (be `ul`) SĄMONINGAI čia nebeliko.
 *
 * WooCommerce susijusių/papildomų prekių apvalkalas yra
 * `<div class="related products">` / `<div class="upsells products">` —
 * antra klasė ta pati „products", kurią naudoja ir pats sąrašas
 * (`<ul class="products">`) viduje. Plika `.products` taisyklė pavertė TĄ
 * IŠORINĮ div'ą tinkleliu, ir jo du vaikai (`<h2>` + `<ul class="products">`)
 * atsidurdavo greta kaip du tinklelio langeliai — būtent tas „susiaurėjęs,
 * sulūžęs" susijusių prekių blokas prekės puslapio apačioje. Sąrašo pats
 * tinklelis lieka per `ul.products` žemiau; jokio šablono šioje temoje
 * `class="products"` neuždeda ant ne-`<ul>` elemento (patikrinta), tad šis
 * pašalinimas nieko kito nekeičia.
 */
.product-grid,
ul.products,
ul.products[class*="columns-"] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.product-grid,
	ul.products,
	ul.products[class*="columns-"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}
}

@media (min-width: 1024px) {
	.product-grid,
	ul.products,
	ul.products[class*="columns-"] {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px;
	}
}

/*
 * Woo legacy float tinklelio neutralizavimas.
 *
 * Tema išmeta visą Woo CSS (inc/woocommerce.php), tad normaliai šito nereikia.
 * Bet užtenka vieno įskiepio, kuris `woocommerce-layout.css` užkrauna atgal, ir
 * `li.product { float: left; width: 22.05%; }` grįžta. Float'inti, procentinio
 * pločio elementai grid konteineryje duoda būtent tą vaizdą, kurio ieškota:
 * siaurą vertikalų stulpelį. Pigus draudiklis šalia tinklelio, kuriam priklauso
 * išdėstymas.
 */
.product-grid > li,
ul.products > li {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	list-style: none;
}

/* ---------- Kortelė ----------
   Balta dėžė su vidiniu tarpu iš visų pusių. Flex stulpelis, kad kainos ir
   mygtuko eilutė per `margin-top: auto` visada priliptų prie apačios —
   nesvarbu, ar prekė turi aprašymą, ar ne, ar pavadinimas užima vieną eilutę,
   ar dvi. Būtent dėl to tinklelio kortelės lieka vienodo aukščio be jokio JS.

   `overflow: hidden` čia NĖRA. Nuotrauką apkerpa jos pati media dėžė, o
   kortelės lygyje jis nukirstų ženkliukus, jei kada nors išlįstų už krašto.

   ---------------------------------------------------------------------------
   KORTELĖS ŠAKNIS — TRYS SELEKTORIAI, VIENA REIKŠMĖ. Kodėl ne vien `.product-card`:

   tą klasę `<li>` elementui prideda PHP filtras. Filtras gali nesuveikti, ir
   vieną kartą jau nesuveikė — katalogas atsivaizdavo su teisingu markup'u,
   pilnu Woo klasių rinkiniu (`product type-product … first instock sale`) ir
   visiškai be dizaino, nes `product-card` `<li>` elemento nepasiekė. Toks
   gedimas nekelia klaidos ir nesimato log'e; jį pastebi pirkėjas.

   Kortelė YRA sąrašo elementas — tai struktūrinė tiesa, ne stiliaus kabliukas.
   Todėl dizainas pririštas ir prie struktūros, o klasė lieka pirmuoju,
   patogiausiu kabliuku (žr. dvigubą filtrą inc/product/loop-hooks.php).

   `:not(.product-category)` — Woo potipių plytelėms (`<li class="product-category
   product">`) kortelės dėžė netinka; jos turi savo taisykles shop.css.

   Kaina: šis rinkinys specifiškesnis už pliką `.product-card`, tad child tema,
   norinti perrašyti kortelės DĖŽĘ, turi kartoti tą patį selektorių. Vidinės
   taisyklės žemiau to nereikalauja — jos remiasi `.product-card__*` klasėmis,
   kurias visada piešia pačios temos hook'ai.
   --------------------------------------------------------------------------- */
.product-card,
ul.products > li.product:not(.product-category),
.product-grid > li {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border-subtle);
	border-radius: var(--card-radius);
	background: var(--color-surface);
	padding: var(--card-pad);
	transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

/*
 * Pakilimas tik ten, kur yra tikras pelės žymeklis.
 *
 * Jutikliniame ekrane `:hover` po bakstelėjimo LIEKA įjungtas, kol paliečiamas
 * kitas elementas — be šio guard'o kortelė liktų pakelta ir su šešėliu, o
 * pirkėjui tai atrodo kaip pasirinkta būsena. Nuotraukos didinimas iš tos
 * pačios priežasties yra čia pat.
 */
@media (hover: hover) {
	:is(.product-card, ul.products > li.product:not(.product-category), .product-grid > li):hover {
		transform: translateY(-4px);
		box-shadow: var(--card-shadow);
	}

	:is(.product-card, ul.products > li.product:not(.product-category), .product-grid > li):hover .product-card__img { transform: scale(1.04); }
}

/* Klaviatūra: fokusas kortelės viduje duoda tą patį pakylėjimą, kad
   naršant TAB'u būtų matoma, kur esi. */
:is(.product-card, ul.products > li.product:not(.product-category), .product-grid > li):focus-within { box-shadow: var(--card-shadow); }

/* ---------- Ženkliukai ----------
   Kortelės viršutiniame kairiajame kampe, TIESIOGINIS .product-card vaikas
   (markup'ą deda inc/product/loop-hooks.php ir template-parts/home/product-card.php).
   `--card-pad` čia tas pats, kuris duoda kortelės vidinį tarpą, tad ženkliukas
   ir tekstas žemiau visada lygiuojasi į tą pačią liniją.

   `pointer-events: none` — ženkliukas guli virš nuotraukos nuorodos ir neturi
   iš jos atimti paspaudimo. */
.product-card__badges {
	position: absolute;
	inset-block-start: var(--card-pad);
	inset-inline-start: var(--card-pad);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.375rem;
	pointer-events: none;
}

.badge {
	border-radius: 50px;
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.45;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

.badge--new  { background: var(--badge-new-bg);  color: var(--badge-new-fg); }
.badge--best { background: var(--badge-best-bg); color: var(--badge-best-fg); }

/* „Akcija" ir „-30%" yra tas pats pranešimas dviem tikslumo lygiais, tad ir
   paletė ta pati. Kortelėje jie niekada nesikartoja: kai žinomas procentas,
   erikas_archive_percent_badge() (inc/shop-custom-archives.php) bendrinį
   pakeičia, o ne prideda. */
.badge--sale,
.badge--pct {
	background: var(--badge-sale-bg);
	color: var(--badge-sale-fg);
}

.badge--pct { font-variant-numeric: tabular-nums; }

/* ---------- Nuotrauka ----------
   `object-fit: contain` ant skaidraus fono: kosmetikos pakuotė nuotraukoje
   dažniausiai jau iškirpta, ir `cover` jai nukirsdavo dangtelį arba pagrindą.
   Kaina — šiek tiek oro iš šonų, kai proporcijos nesutampa; tai sąmoningas
   mainas į tai, kad prekė visada matoma visa. */
.product-card__media {
	position: relative;
	aspect-ratio: 1 / 1.15;
	overflow: hidden;
	border-radius: var(--card-media-radius);
	background: transparent;
}

.product-card__img-link {
	display: block;
	width: 100%;
	height: 100%;
}

.product-card__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.3s ease;
}

/* ---------- Greita peržiūra ----------
   Media fonui tapus skaidriam, permatoma balta kapsulė ant baltos kortelės
   nebeturėtų krašto — todėl apvadas, o ne šešėlis. */
.product-card__quickview {
	position: absolute;
	inset-inline: 0.5rem;
	inset-block-end: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(6px);
	padding: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--stone-700);
	text-decoration: none;
	opacity: 0;
	transition: opacity 0.3s, background-color 0.3s;
}

.product-card__quickview .icon { width: 1rem; height: 1rem; }

:is(.product-card, ul.products > li.product:not(.product-category), .product-grid > li):hover .product-card__quickview,
.product-card__quickview:focus-visible { opacity: 1; }

/* Be pelės nėra hover, tad kapsulė matoma visada. */
@media (hover: none) {
	.product-card__quickview { opacity: 1; }
}

/* ---------- Turinys ---------- */
.product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding-block-start: 0.875rem;
}

/* Įvertinimas rodomas tik tada, kai atsiliepimų yra (erikas_star_rating()
   grąžina tuščią, kai reitingas 0), tad tarpas kabinamas ant jo paties, o ne
   ant pavadinimo — kitaip prekė be atsiliepimų gautų tuščią eilutę. */
.product-card__body .stars { margin-block-end: 0.5rem; }

/*
 * Pavadinimas ir aprašymas ribojami eilutėmis, ne žodžiais.
 *
 * PHP pusė vis tiek trumpina aprašymą (wp_trim_words), ir tai lieka: be jo į
 * HTML keliautų visas tekstas, kurį naršyklė tik paslėptų — nemokamas svoris
 * kiekvienoje kortelėje. Eilučių ribojimas čia tvarko tai, ko žodžių skaičius
 * negali: skirtingą žodžių ilgį ir skirtingą stulpelio plotį.
 */
.product-card__title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--card-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-card__title a { text-decoration: none; transition: color 0.2s; }
.product-card__title a:hover { color: var(--stone-600); }

.product-card__excerpt {
	margin: 0.375rem 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--card-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- Kaina ir mygtukas ----------
   `margin-top: auto` prispaudžia eilutę prie kortelės apačios. Tai vienintelė
   priežastis, kodėl .product-card ir .product-card__body yra flex stulpeliai. */
.product-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-block-start: auto;
	padding-block-start: 16px;
}

.product-card__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 0 0 auto;
}

.product-card__price {
	min-width: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--card-ink);
}

/*
 * Woo `get_price_html()` akcijai grąžina <del> ... <ins>, ir ta eilė paliekama.
 * Perstumti juos vietomis (pvz. `flex-direction: row-reverse`) reikštų
 * sujaukti tarp jų einantį `.screen-reader-text` sakinį („Original price
 * was: …"), o ekrano skaitytuvas gautų kainas atvirkščiai. Hierarchiją čia
 * kuria dydis ir spalva, ne eilė: senoji kaina 13px pilka, naujoji – 17px juoda.
 */
.product-card__price del {
	display: inline-block;
	margin-inline-end: 0.375rem;
	font-size: 13px;
	font-weight: 400;
	color: var(--card-muted);
	text-decoration-thickness: 1px;
}

.product-card__price ins {
	text-decoration: none;
	background: none;
	color: inherit;
}

.product-card__add {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--card-btn);
	color: #fff;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.product-card__add .icon {
	width: 1rem;
	height: 1rem;
	stroke-width: 2;
}

.product-card__add:hover {
	background: var(--card-btn-hover);
	transform: scale(1.05);
}

.product-card__add.added { background: #10b981; }
.product-card__add.loading { opacity: 0.6; pointer-events: none; }

/* ---------- "Palyginti" (compare) toggle ----------
   Markup is inc/product/loop-hooks.php erikas_loop_compare_button(): a
   button carrying BOTH product-card__compare (this file, the look) and the
   loveproducts plugin's own ses-compare-button ses-compare-button--loop
   (assets/css/frontend.css there, the click/is-active/aria-pressed logic,
   via its existing assets/js/frontend.js — nothing plugin-side had to
   change for the JS). Every selector below compounds .ses-compare-button
   onto .product-card__compare, which is what makes this rule 0-2-0 (or
   0-3-0 with :hover/.is-active) against the plugin's 0-1-0/0-2-0 rules for
   the same classes — so this card look always wins regardless of which
   stylesheet the browser happens to parse second. Active state is the
   brand accent on every archive (catalog, akcijos, populiariausi) and the
   homepage rows, since all of them render through erikas_loop_card_foot(). */
.product-card__compare.ses-compare-button {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	gap: 0;
	border: 1px solid var(--border-subtle);
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--card-muted);
	font-size: 0;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s var(--ease-out),
		border-color 0.2s var(--ease-out),
		color 0.2s var(--ease-out),
		transform 0.2s var(--ease-out);
}

.product-card__compare .icon { width: 1rem; height: 1rem; stroke-width: 2; }

.product-card__compare.ses-compare-button:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.product-card__compare.ses-compare-button:focus-visible { outline-offset: 2px; }

.product-card__compare.ses-compare-button.is-active {
	border-color: var(--color-accent);
	background: var(--color-accent);
	color: var(--color-accent-fg);
}

.product-card__compare.ses-compare-button.is-active:hover {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
}

/* Woo injects a "View cart" link after an AJAX add — hide it, the header
   cart bubble already updates via fragments. Kabinama prie `__foot`, o ne prie
   kortelės šaknies: nuoroda įterpiama iškart po mygtuku, o `__foot` piešia
   pati tema, tad ši taisyklė nepriklauso nuo `<li>` klasės. */
.product-card__foot .added_to_cart { display: none; }

/*
 * Siauri stulpeliai.
 *
 * 390px ekrane dvi kortelės palieka ~137px turinio pločio. Akcijos kaina ten
 * yra dvi eilutės („buvo" ir „dabar"), ir taip ji skaitosi gerai — bet kartu
 * su 38px mygtuku dydžiai ima grumtis. Mygtukas ir šriftai truputį
 * sumažinami; kortelės struktūra nesikeičia.
 */
@media (max-width: 479px) {
	.product-card__price { font-size: 16px; line-height: 1.35; }
	.product-card__price del { font-size: 12px; }

	/* Two round buttons now share this row instead of one — a touch smaller
	   and tighter-gapped than the 640px+ size so the price keeps its room.
	   Compound selector on __compare for the same specificity reason as the
	   base rule above — beats the plugin's own .ses-compare-button--loop
	   width regardless of stylesheet order. */
	.product-card__add,
	.product-card__compare.ses-compare-button { width: 32px; height: 32px; }
	.product-card__add .icon,
	.product-card__compare .icon { width: 0.8125rem; height: 0.8125rem; }

	.product-card__foot { gap: 0.375rem; padding-block-start: 12px; }
	.product-card__actions { gap: 0.25rem; }
}

/*
 * Sumažintas judesys.
 *
 * Anksčiau šios trys eilutės gulėjo home.css — faile, kuris kraunamas TIK
 * pagrindiniame puslapyje. Parduotuvės archyve kortelės ir toliau šokinėjo
 * žmonėms, kurie sistemoje aiškiai paprašė to nedaryti. Bendra kortelė —
 * bendra ir jos prieinamumo taisyklė.
 *
 * Globalus reset failo viršuje nunulina tik `transition-duration`; `transform`
 * be šito liktų pritaikytas iškart, be perėjimo.
 */
@media (prefers-reduced-motion: reduce) {
	/* Vandens ženklas lieka matomas, tik nustoja judėti — paslėpti jį būtų
	   turinio pakeitimas, o ne judesio sumažinimas. */
	.footer-wordmark__inner { transform: none; opacity: 1; will-change: auto; }
	.back-to-top { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	:is(.product-card, ul.products > li.product:not(.product-category), .product-grid > li):hover,
	:is(.product-card, ul.products > li.product:not(.product-category), .product-grid > li):hover .product-card__img,
	.product-card__add:hover { transform: none; }

	/* Pakilimo nėra, bet šešėlis ir toliau parodo, kur žymeklis. */
	:is(.product-card, ul.products > li.product:not(.product-category), .product-grid > li):hover { box-shadow: var(--card-shadow); }
}

/* Star rating */
.stars {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
}

.stars__icons { display: flex; color: var(--stone-300); }
.stars__star .icon { width: 0.875rem; height: 0.875rem; }
.stars__star.is-filled { color: var(--amber-500); }
.stars__star.is-filled .icon { fill: currentColor; }
.stars__value { color: var(--stone-500); }
.stars__count { color: var(--stone-400); }

/* =========================================================
   Comments

   Blog-side only. Products never reach comments.php — WooCommerce swaps in
   its own review template — so nothing here is scoped against .woocommerce.

   Every value is a token: the block inherits the palette, the measure and the
   radius from :root, so re-skinning the site re-skins the discussion too.
   ========================================================= */
.comments {
	margin-block-start: var(--space-6);
	padding-block-start: var(--space-5);
	border-block-start: 1px solid var(--color-line);
}

.comments__title {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	font-weight: 500;
	margin-block-end: var(--space-4);
}

.comments__list,
.comments__list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Threaded replies step in once; deeper levels reuse the same indent so a
   long thread cannot walk itself off the right edge on a phone. */
.comments__list .children {
	margin-inline-start: clamp(var(--space-3), 4vw, var(--space-5));
	border-inline-start: 1px solid var(--color-line);
	padding-inline-start: var(--space-3);
}

.comments__list .comment,
.comments__list .pingback {
	padding-block: var(--space-4);
	border-block-start: 1px solid var(--color-line);
}

.comments__list > .comment:first-child { border-block-start: 0; }

.comments__list .comment-body { display: block; }

.comments__list .comment-author {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 500;
}

.comments__list .comment-author img.avatar {
	inline-size: 40px;
	block-size: 40px;
	border-radius: var(--radius-pill);
}

.comments__list .comment-author .says { display: none; }

.comments__list .comment-meta,
.comments__list .comment-metadata,
.comments__list .comment-metadata a {
	font-size: 0.8125rem;
	color: var(--color-muted);
}

.comments__list .comment-content {
	margin-block-start: var(--space-2);
	max-inline-size: var(--measure, 68ch);
}

.comments__list .comment-content p { margin-block: 0 var(--space-2); }
.comments__list .comment-content > :last-child { margin-block-end: 0; }

.comments__list .reply { margin-block-start: var(--space-2); }

.comments__list .reply a {
	font-size: 0.8125rem;
	color: var(--color-accent-hover);
	text-decoration: none;
	border-block-end: 1px solid transparent;
}

.comments__list .reply a:hover { border-block-end-color: currentColor; }

/* Held for moderation — visible, but clearly not published yet. */
.comments__list .comment-awaiting-moderation {
	display: inline-block;
	margin-block-start: var(--space-2);
	padding: 0.125rem 0.5rem;
	border-radius: var(--radius-pill);
	background: var(--amber-100);
	color: var(--amber-800);
	font-size: 0.75rem;
}

.comments__nav {
	margin-block-start: var(--space-4);
	font-size: 0.875rem;
}

.comments__closed {
	margin-block-start: var(--space-4);
	color: var(--color-muted);
	font-size: 0.875rem;
}

.comments__respond { margin-block-start: var(--space-5); }

.comments__notes,
.comments__form .comment-notes,
.comments__form .comment-form-cookies-consent label {
	font-size: 0.8125rem;
	color: var(--color-muted);
}

.comments__form p { margin-block-end: var(--space-3); }

.comments__form label {
	display: block;
	margin-block-end: var(--space-1);
	font-size: 0.875rem;
	font-weight: 500;
}

/* The consent checkbox is the one row whose label sits beside the control. */
.comments__form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
}

.comments__form .comment-form-cookies-consent label {
	margin-block-end: 0;
	font-weight: 400;
}

.comments__form input[type="text"],
.comments__form input[type="email"],
.comments__form input[type="url"],
.comments__form textarea {
	inline-size: 100%;
	max-inline-size: var(--measure, 68ch);
}

.comments__form textarea { resize: vertical; }

.comments__form .required { color: var(--color-accent-hover); }

/* Author / email / url sit side by side once there is room for them. */
@media (min-width: 640px) {
	.comments__form .comment-form-author,
	.comments__form .comment-form-email,
	.comments__form .comment-form-url {
		display: inline-block;
		inline-size: calc(33.333% - var(--space-2));
		vertical-align: top;
		margin-inline-end: var(--space-2);
	}

	.comments__form .comment-form-url { margin-inline-end: 0; }
}