/* =========================================================
   8Erikas — shop.css
   Loaded only on WooCommerce pages (inc/enqueue.php).

   ALL default Woo CSS is disabled, so this file is the entire visual
   layer for the store. Shared primitives (.wrap, .btn, .product-card,
   .badge, .stars, .product-grid) come from main.css.
   ========================================================= */

/*
 * CONTAINER POLICY — removed on purpose, do not put it back.
 *
 * This file used to redefine .wrap--wide at 87.5rem and then re-point
 * .site-header__inner / .site-footer__inner at the same value to compensate.
 * Because shop.css only loads on WooCommerce pages, that made the header a
 * different width on /visos-prekes than on the homepage — the exact symptom
 * it was trying to hide.
 *
 * All shell geometry now lives in the shell group at the top of main.css and
 * resolves through --container-width / --container-padding. .wrap--wide is
 * declared there too and reads --container-wide, so if the store ever needs a
 * wider grid, that one token is the place to change it — and the header will
 * follow instead of drifting.
 *
 * (.site-footer__inner never existed in footer.php; that half of the override
 * was dead code.)
 */

/* =========================================================
   ARCHIVE — shop header + category pills
   -----------------------------------------------------------
   Renders before the two-column container (woocommerce.php), so
   it spans the full width and is never a grid item.
   ========================================================= */
.shop-header {
	border-bottom: 1px solid rgba(231, 229, 228, 0.7);
	padding-block: 2rem 1.5rem;
}

@media (min-width: 640px) { .shop-header { padding-block: 2.5rem 1.75rem; } }

.shop-header__head { margin-bottom: 1.5rem; }

.shop-header__eyebrow {
	margin: 0;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	color: var(--stone-400);
}

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

/* ---------- Category pills ---------- */
.pills {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	/* Bleed to the viewport edge so the row scrolls cleanly on mobile. Tied to
	   the container gutter rather than a hard 1rem, so it keeps reaching the
	   edge now that the gutter is fluid. */
	margin-inline: calc(var(--container-padding) * -1);
	padding: 0.125rem var(--container-padding);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.pills::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
	.pills {
		flex-wrap: wrap;
		overflow: visible;
		margin-inline: 0;
		padding: 0;
	}
}

.pill-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex: 0 0 auto;
	scroll-snap-align: start;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--stone-700);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.2s var(--ease-out),
	            background-color 0.2s var(--ease-out),
	            color 0.2s var(--ease-out);
}

.pill-link:hover { border-color: var(--stone-400); color: var(--stone-900); }

/* Active state — rose accent, per the reference palette. */
.pill-link.is-active {
	border-color: var(--rose-400);
	background: var(--rose-100);
	color: var(--rose-700);
}

.pill-link__count { font-size: 0.6875rem; font-weight: 600; color: var(--stone-400); }
.pill-link.is-active .pill-link__count { color: var(--rose-400); }

/* =========================================================
   ARCHIVE — two-column layout
   ========================================================= */
.woo { padding-block: 2rem; }

.woo--with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

@media (min-width: 1024px) {
	.woo--with-sidebar {
		grid-template-columns: 17rem minmax(0, 1fr);
		gap: 2.5rem;
	}
}

.woo__content { min-width: 0; }

/*
 * Safety net: only the sidebar and the content column may occupy a single
 * grid track. Anything else spans both rather than silently stealing the
 * sidebar cell.
 */
.woo--with-sidebar > *:not(.shop-sidebar):not(.woo__content) {
	grid-column: 1 / -1;
}

/* =========================================================
   FILTER SIDEBAR
   -----------------------------------------------------------
   A single <form method="get"> of real checkboxes. The mobile
   collapse is a checkbox-hack disclosure — reliable and JS-free
   (a closed <details> hides its children in the UA stylesheet,
   which authors cannot dependably override).
   ========================================================= */
.shop-sidebar { min-width: 0; }

@media (min-width: 1024px) {
	.shop-sidebar { position: sticky; top: 1.5rem; }
}

/* The toggle checkbox itself is never visible. */
.shop-sidebar__cb {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.shop-sidebar__toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	padding: 0.75rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--stone-700);
	cursor: pointer;
	user-select: none;
	transition: border-color 0.2s;
}

.shop-sidebar__toggle:hover { border-color: var(--stone-400); }

.shop-sidebar__toggle .icon {
	width: 1rem;
	height: 1rem;
	margin-inline-start: auto;
	transition: transform 0.3s var(--ease-out);
}

.shop-sidebar__cb:checked ~ .shop-sidebar__toggle .icon { transform: rotate(180deg); }

.shop-sidebar__cb:focus-visible ~ .shop-sidebar__toggle {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.shop-sidebar__badge {
	display: grid;
	place-items: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.375rem;
	border-radius: var(--radius-pill);
	background: var(--rose-400);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
}

/* Collapsed by default on mobile — grid-rows animates from 0fr to 1fr,
   which (unlike a max-height guess) always matches the panel's real content
   height exactly, so the reveal never looks clipped or jumpy. The inner
   wrapper carries overflow:hidden plus the card chrome, so the border/
   background/padding collapse away with the height instead of sitting there
   as an empty box while .shop-sidebar__body itself is at 0fr. */
.shop-sidebar__body {
	display: grid;
	grid-template-rows: 0fr;
	margin-top: 0.75rem;
	opacity: 0;
	transition: grid-template-rows 0.32s var(--ease-out), opacity 0.24s var(--ease-out);
}

.shop-sidebar__cb:checked ~ .shop-sidebar__body {
	grid-template-rows: 1fr;
	opacity: 1;
}

.shop-sidebar__body-inner {
	overflow: hidden;
	min-height: 0;
	border: 1px solid rgba(231, 229, 228, 0.7);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	padding: 1.5rem;
}

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

	.shop-sidebar__body {
		display: block;
		margin-top: 0;
		opacity: 1;
		transition: none;
	}
}

.shop-sidebar__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.shop-sidebar__title {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--stone-900);
}

.shop-sidebar__clear {
	font-size: 0.75rem;
	color: var(--stone-500);
	text-decoration: none;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.shop-sidebar__clear:hover { color: var(--stone-900); text-decoration: underline; }

/* ---------- Filter group ---------- */
.fgroup + .fgroup {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-line);
}

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

.fgroup__body {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

/* ---------- Checkbox row ---------- */
.fcheck {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	border-radius: 12px;
	padding: 0.5rem;
	margin: 0;
	font-size: 0.875rem;
	color: var(--stone-700);
	cursor: pointer;
	transition: background-color 0.2s;
}

.fcheck:hover { background: var(--stone-100); }

/* The native input stays in the DOM for a11y and form submission. */
.fcheck input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.fcheck__box {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	border: 1px solid var(--stone-300);
	border-radius: 7px;
	background: var(--color-surface);
	color: transparent;
	transition: background-color 0.2s var(--ease-out),
	            border-color 0.2s var(--ease-out),
	            color 0.2s var(--ease-out);
}

.fcheck__box .icon { width: 0.875rem; height: 0.875rem; stroke-width: 2.5; }

.fcheck input:checked + .fcheck__box {
	border-color: var(--stone-900);
	background: var(--stone-900);
	color: #fff;
}

.fcheck input:focus-visible + .fcheck__box {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.fcheck__label { flex: 1; min-width: 0; }
.fcheck input:checked ~ .fcheck__label { color: var(--stone-900); font-weight: 500; }

.fcheck__count { font-size: 0.6875rem; color: var(--stone-400); }

/* ---------- Price inputs ---------- */
.fprice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.fprice__field {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
	border: 1px solid var(--color-line);
	border-radius: 12px;
	background: var(--color-surface);
	padding-inline-start: 0.625rem;
	transition: border-color 0.2s;
}

.fprice__field:focus-within { border-color: var(--stone-900); }

.fprice__cur { font-size: 0.75rem; color: var(--stone-400); }

.fprice__field input {
	width: 100%;
	min-width: 0;
	border: 0;
	background: none;
	padding: 0.5rem 0.625rem;
	font-size: 0.875rem;
	color: var(--stone-900);
	-moz-appearance: textfield;
	appearance: textfield;
}

.fprice__field input:focus { outline: none; }

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

.fprice__dash { color: var(--stone-300); }

/* ---------- Apply ---------- */
.shop-sidebar__actions { margin-top: 1.5rem; }

.btn--block { display: block; width: 100%; border: 0; cursor: pointer; }

.shop-sidebar__widgets {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-line);
}

.shop-sidebar__widgets ul { list-style: none; margin: 0; padding: 0; }

.shop-sidebar__widgets li a {
	display: block;
	border-radius: 12px;
	padding: 0.5rem;
	font-size: 0.875rem;
	color: var(--stone-700);
	text-decoration: none;
}

.shop-sidebar__widgets li a:hover { background: var(--stone-100); }

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

/* =========================================================
   AJAX LOADING STATE
   -----------------------------------------------------------
   shop-filter.js toggles .is-loading on .woo__content while a
   fetch is in flight, and sets data-erikas-ajax="on" on .woo
   once it has booted.
   ========================================================= */
.woo__content {
	position: relative;
	transition: opacity 0.2s var(--ease-out);
}

.woo__content.is-loading {
	opacity: 0.45;
	pointer-events: none;
}

/* Spinner, centred over the grid and pinned inside the viewport so it stays
   visible on long result lists. */
.woo__content.is-loading::after {
	content: "";
	position: absolute;
	top: 6rem;
	left: 50%;
	width: 2rem;
	height: 2rem;
	margin-left: -1rem;
	border: 2px solid var(--stone-200);
	border-top-color: var(--stone-900);
	border-radius: 50%;
	animation: erikas-spin 0.7s linear infinite;
	pointer-events: none;
}

@keyframes erikas-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.woo__content.is-loading::after { animation-duration: 2s; }
	.woo__content { transition: none; }
}

/*
 * The Apply button is the no-JS path. Once the script boots, every change
 * filters instantly and the button is redundant — but it stays in the DOM so
 * a keyboard user can still submit if a fetch fails and we fall back.
 */
.woo[data-erikas-ajax="on"] .shop-sidebar__actions {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.woo[data-erikas-ajax="on"] .shop-sidebar__actions:focus-within {
	position: static;
	width: auto;
	height: auto;
	clip-path: none;
}

/* ---------- Toolbar ---------- */
.shop-toolbar {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
	.shop-toolbar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.woocommerce-result-count {
	margin: 0;
	font-size: 0.875rem;
	color: var(--stone-600);
}

.woocommerce-ordering { margin: 0; }

.woocommerce-ordering select {
	width: auto;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	padding: 0.625rem 1rem;
	font-size: 0.875rem;
	color: var(--stone-700);
	transition: border-color 0.2s, box-shadow 0.2s;
}

.woocommerce-ordering select:hover { border-color: var(--stone-400); }

.woocommerce-ordering select:focus-visible {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.2);
}

/* ---------- Grid ----------
   `ul.products` bazė IR stulpelių rampa gyvena main.css kartu su
   `.product-grid` — abu sąrašai piešia tą pačią kortelę, tad ir laužosi
   vienodai. Čia buvo tų pačių eilučių kopija; ji ištrinta, nes dvi kopijos
   reiškia, kad tarpo ar lūžio taško pakeitimas suveikia arba parduotuvėje,
   arba pagrindiniame puslapyje, bet ne abiejuose.

   Lieka VIENINTELĖ tikra archyvo išimtis — filtrų šoninė juosta, kurios
   main.css apie ją nieko nežino. */

/* With the filter sidebar present the content column is narrower, so hold
   3 across until there is room for 4. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.woo--with-sidebar ul.products,
	.woo--with-sidebar ul.products[class*="columns-"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Related / upsells sit inside the single-product grid at full width. */
.related ul.products,
.upsells ul.products {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1024px) {
	.related ul.products,
	.upsells ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

ul.products li.product { margin: 0; }

/* Woo prints its own sale flash in some contexts — ours is .badge. */
ul.products li.product > .onsale { display: none; }

/* ---------- Subcategory tiles ----------
   When "Shop page display" is set to show categories, Woo injects
   <li class="product-category"> into the same ul.products. Those use the
   woocommerce_before_subcategory_* hooks, not our card hooks, so they get
   their own minimal styling here. */
li.product-category {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--stone-100);
}

li.product-category > a { display: block; text-decoration: none; }

li.product-category img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform 0.5s var(--ease-out);
}

li.product-category:hover img { transform: scale(1.05); }

li.product-category h2 {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	margin: 0;
	padding: 1rem;
	background: linear-gradient(to top, rgba(28, 25, 23, 0.7), transparent);
	color: #fff;
	font-size: 1rem;
	font-weight: 500;
}

li.product-category h2 .count { font-size: 0.75rem; color: var(--stone-300); }

/* ---------- Empty state ---------- */
.woocommerce-info--empty {
	border: 1px dashed var(--stone-300);
	border-radius: var(--radius-lg);
	padding: 5rem 1.5rem;
	text-align: center;
	color: var(--stone-600);
}

/* ---------- Archyvo apačia ----------
   Viena eilutė: skaičiaus pasirinkimas kairėje, pagination'as dešinėje.
   Markup'ą deda erikas_shop_footer_open() (inc/product/loop-hooks.php).

   Į dešinę pagination'ą nuveda `margin-inline-start: auto`, o ne
   `justify-content: space-between` — taip jis lieka prilipęs prie dešinio
   krašto ir tada, kai kairės pusės nėra. */
.shop-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--color-line);
}

/* Bazinė .woocommerce-pagination taisyklė turi savo margin-top (ji naudojama ir
   ne eilutėje) — čia jį nuimam, tarpą duoda pati .shop-footer. */
.shop-footer .woocommerce-pagination {
	margin: 0;
	margin-inline-start: auto;
}

/* Iki 640px viskas centruojama, o pagination'as pakyla į viršų: puslapiavimas
   svarbesnis už tankumo pasirinkimą, tad telefone jis eina pirmas. */
@media (max-width: 639px) {
	.shop-footer {
		flex-direction: column-reverse;
		justify-content: center;
		gap: 0.875rem;
	}

	.shop-footer .woocommerce-pagination {
		margin: 0;
		margin-inline-start: 0;
	}

	.shop-perpage { justify-content: center; }
}

/* ---------- Pagination ----------
   SVARBU dėl selektorių: paginate_links( 'type' => 'list' ) uždeda klasę
   `page-numbers` DVIEM lygiams — ir <ul>, ir kiekvienam <a>/<span> jos viduje:

     <ul class="page-numbers">
       <li><span class="page-numbers current">1</span></li>
       <li><a   class="page-numbers" href="…">2</a></li>
     </ul>

   Todėl elemento taisyklės privalo eiti per `li >`. Anksčiau čia buvo
   `.woocommerce-pagination .page-numbers` (0,2,0) — jis pataikydavo ir į patį
   <ul>, ir specifiškumu nurungdavo `.woocommerce-pagination ul` (0,1,1), tad
   sąrašas gaudavo `display: grid` be `grid-template-columns` ir kiekvienas
   puslapio numeris nusileisdavo į naują eilę.

   Dizainas: be rėmelių ir be fonų. Aktyvus puslapis — vienintelė tamsi dėmė
   eilėje, tad akis jį randa iškart. Rėmeliai ant visų šešių mygtukų kūrė šešis
   vienodo svorio stačiakampius ir tik gadino tinklelio ritmą. */
.woocommerce-pagination {
	margin-top: 2.5rem;
	display: flex;
	justify-content: center;
}

.woocommerce-pagination ul,
.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.125rem;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	height: auto;
	min-width: 0;
}

.woocommerce-pagination li { margin: 0; list-style: none; }

.woocommerce-pagination li > .page-numbers {
	display: grid;
	place-items: center;
	min-width: 1.875rem;
	height: 1.875rem;
	padding: 0 0.25rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: none;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--stone-500);
	text-decoration: none;
	transition: color 0.2s, background-color 0.2s;
}

.woocommerce-pagination li > a.page-numbers:hover {
	background: var(--stone-100);
	color: var(--stone-900);
}

.woocommerce-pagination li > .page-numbers.current {
	background: var(--stone-900);
	color: #fff;
}

/* Ellipsis („…") nėra mygtukas — jokio hover'io, jokio fono. */
.woocommerce-pagination li > .page-numbers.dots {
	min-width: 1rem;
	background: none;
	color: var(--stone-400);
}

/* Rodyklės („←" / „→") laikomos truputį atokiau nuo skaičių bloko. */
.woocommerce-pagination li > .page-numbers.prev { margin-inline-end: 0.25rem; }
.woocommerce-pagination li > .page-numbers.next { margin-inline-start: 0.25rem; }

.woocommerce-pagination li > .page-numbers.prev,
.woocommerce-pagination li > .page-numbers.next { color: var(--stone-400); }

/* ---------- Prekių skaičius puslapyje ----------
   Vien skaičiai, be užrašo — žr. erikas_shop_per_page().
   Neaktyvūs pilki ir be jokio apvado, aktyvus — tamsus su plona linija po
   juo. Linija ne per `border-bottom`, o per `box-shadow`, kad perėjimas tarp
   pasirinkimų nepajudintų eilutės aukščio. */
.shop-perpage {
	display: flex;
	align-items: center;
}

.shop-perpage__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.shop-perpage__list li { margin: 0; }

.shop-perpage__btn {
	display: block;
	/* Simetriškas padding'as: apatinis daro vietos aktyvaus elemento linijai,
	   viršutinis grąžina tekstą į eilutės centrą, kad skaičiai atsistotų viename
	   lygyje su pagination'o apskritimais. */
	padding-top: 0.1875rem;
	padding-bottom: 0.1875rem;
	border: 0;
	background: none;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
	color: var(--stone-400);
	text-decoration: none;
	transition: color 0.2s, box-shadow 0.2s;
}

.shop-perpage__btn:hover { color: var(--stone-700); }

.shop-perpage__btn.is-active {
	color: var(--stone-900);
	box-shadow: inset 0 -1px 0 var(--stone-900);
}

/* =========================================================
   SINGLE PRODUCT
   ========================================================= */
.woo-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	padding-top: 1.5rem;
	font-size: 0.75rem;
	color: var(--stone-500);
}

.woo-breadcrumb a { color: inherit; text-decoration: none; }
.woo-breadcrumb a:hover { color: var(--stone-800); }
.woo-breadcrumb__sep { color: var(--stone-300); }

.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

@media (min-width: 1024px) {
	.single-product div.product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 3.5rem;
	}
}

/* ---------- Gallery ---------- */
.woocommerce-product-gallery {
	position: relative;
	display: flex;
	flex-direction: column-reverse;
	gap: 1rem;
	/*
	 * Woo prints inline `opacity:0` and relies on its own JS to reveal the
	 * gallery. assets/js/product.js clears it, but this guarantees the images
	 * are visible even if that script fails to run.
	 */
	opacity: 1 !important;
}

@media (min-width: 640px) {
	.woocommerce-product-gallery { flex-direction: row; }
}

.woocommerce-product-gallery__wrapper {
	flex: 1;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--stone-100);
}

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

.woocommerce-product-gallery__image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.woocommerce-product-gallery__image a { display: block; }

/* With JS: only the active image shows. Without: all stack, still usable. */
.pgallery .woocommerce-product-gallery__image { display: none; }
.pgallery .woocommerce-product-gallery__image.is-active {
	display: block;
	animation: erikas-fade-in 0.25s ease-out;
}

@keyframes erikas-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.pgallery__thumbs {
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	padding-bottom: 0.25rem;
}

@media (min-width: 640px) {
	.pgallery__thumbs {
		flex-direction: column;
		overflow: visible;
		padding: 0;
	}
}

.pgallery__thumb {
	flex: 0 0 auto;
	width: 4rem;
	height: 5rem;
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: 16px;
	background: var(--stone-100);
	cursor: pointer;
	transition: border-color 0.2s;
}

@media (min-width: 640px) {
	.pgallery__thumb { width: 5rem; height: 6rem; }
}

.pgallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pgallery__thumb:hover { border-color: var(--stone-300); }
.pgallery__thumb.is-active { border-color: var(--stone-900); }

/* Sale flash inside the gallery */
.single-product div.product > .onsale {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 2;
	border-radius: var(--radius-pill);
	background: var(--rose-100);
	color: var(--rose-700);
	padding: 0.25rem 0.75rem;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* ---------- Summary column ---------- */
.summary { min-width: 0; }

@media (min-width: 1024px) { .summary { padding-block: 0.5rem; } }

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

.summary__eyebrow a { text-decoration: none; }
.summary__eyebrow a:hover { color: var(--stone-600); }

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

.woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0.75rem 0 0;
	font-size: 0.75rem;
}

.woocommerce-product-rating .woocommerce-review-link { color: var(--stone-500); text-decoration: none; }
.woocommerce-product-rating .woocommerce-review-link:hover { text-decoration: underline; }

.summary__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.summary__price .price {
	margin: 0;
	font-size: 1.875rem;
	font-weight: 600;
	color: var(--stone-900);
}

.summary__price .price del {
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--stone-400);
	margin-inline-end: 0.5rem;
}

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

.summary__discount {
	border-radius: var(--radius-pill);
	background: var(--rose-100);
	color: var(--rose-700);
	padding: 0.25rem 0.625rem;
	font-size: 0.75rem;
	font-weight: 600;
}

.woocommerce-product-details__short-description {
	margin-top: 1.25rem;
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--stone-600);
}

/* ---------- Variations ---------- */
.variations {
	width: 100%;
	margin: 1.75rem 0 0;
	border-collapse: collapse;
}

.variations th,
.variations td {
	display: block;
	text-align: start;
	padding: 0;
}

.variations th.label {
	margin-bottom: 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--stone-500);
}

.variations td.value { margin-bottom: 1rem; }

.variations select {
	width: 100%;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.variations select:focus-visible {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.2);
}

/* ---------- Select2 / selectWoo ----------
   Nothing is hidden or force-shown here any more.

   The old block in this spot did two things: `display: none` on
   .select2-container, and a forced `display: block; position: static` on the
   native <select> that selectWoo marks `.select2-hidden-accessible`. Between
   them they guaranteed the exact bug they were meant to prevent — a native
   multi-hundred-row country <select> rendered in flow with the widget that
   normally hides it switched off. It is gone, along with the script/style
   dequeues in inc/woocommerce.php that made it seem necessary.

   WooCommerce now loads `select2`/`selectWoo` and the `select2` stylesheet
   on checkout and account pages exactly as it ships. All this section does
   is hand the widget the theme's typography and box shape so it does not
   look bolted on. */
.select2-container,
.select2-container .select2-selection__rendered,
.select2-container .select2-results__option,
.select2-container .select2-search__field {
	font-family: inherit;
	font-size: 0.875rem;
}

.select2-container--default .select2-selection--single {
	height: auto;
	min-height: 2.6rem;
	border: 1px solid var(--color-line);
	border-radius: 16px;
	background: var(--color-surface);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 2.6rem;
	color: var(--stone-900);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 2.6rem;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--stone-900);
}

.reset_variations {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.75rem;
	color: var(--stone-500);
}

.woocommerce-variation-price { margin: 1rem 0; }

/* ---------- Add to cart ---------- */
form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 1.75rem 0 0;
}

form.variations_form.cart { display: block; }
form.variations_form .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	overflow: hidden;
}

.quantity input.qty {
	width: 2.75rem;
	border: 0;
	background: none;
	padding: 0;
	text-align: center;
	font-size: 0.875rem;
	font-weight: 500;
	-moz-appearance: textfield;
	appearance: textfield;
}

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

.qty-step {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 0;
	background: none;
	color: var(--stone-600);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s;
}

.qty-step:hover { background: var(--stone-100); }

/* Without the stepper JS the native input still needs sane width. */
.quantity:not(.quantity--stepper) input.qty {
	width: 5rem;
	padding: 0.75rem 0.5rem;
}

.single_add_to_cart_button {
	flex: 1 1 12rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--stone-900);
	color: #fff;
	padding: 0.875rem 1.75rem;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.3s, transform 0.1s;
}

.single_add_to_cart_button:hover { background: var(--stone-700); }
.single_add_to_cart_button:active { transform: scale(0.98); }
.single_add_to_cart_button.disabled { opacity: 0.5; cursor: not-allowed; }

.stock.out-of-stock { color: var(--rose-700); font-size: 0.875rem; }

/* ---------- Reassurance ---------- */
.reassure {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	margin-top: 1.5rem;
	border: 1px solid rgba(231, 229, 228, 0.7);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	padding: 1rem;
}

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

.reassure__item {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.875rem;
	color: var(--stone-600);
}

.reassure__icon { flex-shrink: 0; color: var(--stone-500); }
.reassure__icon.is-green { color: #10b981; }

/* ---------- Meta ---------- */
.product_meta {
	margin-top: 1.5rem;
	font-size: 0.75rem;
	color: var(--stone-500);
}

.product_meta > span { display: block; margin-bottom: 0.25rem; }
.product_meta a { color: inherit; }

/* =========================================================
   PRODUCT TABS
   -----------------------------------------------------------
   Markup'as VISAS temos — ir juosta, ir paneliai: erikas_output_product_tabs()
   inc/product/single-hooks.php. Woo `tabs.php` išvedimas nuimtas nuo hook'o.

   Dvi priežastys, abi ten išsamiai aprašytos: Woo antraštę leidžia per
   esc_html() (ikonos neįdėsi), o Woo single-product.js ant `.woocommerce-tabs`
   pakabina savo valdiklį, kuris visiems paneliams įrašo inline `display:none`.
   Todėl žemiau NIEKUR nėra `.woocommerce-tabs` kaip konteinerio — jis
   pervadintas į `.ptabs__panels`.

   NULINIS CLS. JS nieko nepertvarko — jis tik uždeda klases. Pradinis vaizdas
   (pirmas panelis matomas, likę paslėpti) vienodas ir su JS, ir be jo, tad
   deferred skriptui pasileidus niekas nepašoka.
   ========================================================= */
.ptabs {
	grid-column: 1 / -1;
	margin-top: 3.5rem;
}

.ptabs__nav {
	position: relative;
	border-bottom: 1px solid var(--color-line);
}

.ptabs__list {
	position: relative;
	display: flex;
	gap: 0.125rem;

	/* Siauruose ekranuose juosta slenka horizontaliai, o ne laužosi į eilutes:
	   septyni tab'ai dviem eilutėm nustumtų turinį žemyn per pusę ekrano. */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ptabs__list::-webkit-scrollbar { display: none; }

.ptabs__tab {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 1rem;
	scroll-snap-align: start;
	font-size: 0.875rem;

	/* Storis nekinta aktyviame būvyje sąmoningai. Perėjus į 600, tab'as
	   praplatėtų, juosta persidėliotų, o slenkantis pabraukimas šokinėtų —
	   spalvos užtenka, ir ji animuojasi be jokio perskaičiavimo. */
	font-weight: 500;
	line-height: 1.2;
	color: var(--stone-500);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.25s var(--ease-out);
}

.ptabs__tab:hover { color: var(--stone-700); }

/* Outline inward: an offset ring would be cut off by the scroll container. */
.ptabs__tab:focus-visible { outline-offset: -2px; border-radius: 2px; }
.ptabs__tab.is-active { color: var(--stone-900); }

.ptabs__icon {
	display: inline-flex;
	color: var(--stone-400);
	transition: color 0.25s var(--ease-out);
}

.ptabs__icon .icon { width: 1rem; height: 1rem; }
.ptabs__tab.is-active .ptabs__icon { color: var(--stone-900); }

@media (max-width: 640px) {
	.ptabs__tab { padding-inline: 0.75rem; }
	.ptabs__icon { display: none; }
}

/* ---------- Pabraukimas ----------
   Du mechanizmai tam pačiam brūkšniui, ir vienu metu veikia tik vienas:
     be JS  — kiekvieno tab'o ::after, atsiskleidžiantis scaleX
     su JS  — vienas .ptabs__ink, slenkantis tarp tab'ų
   Todėl perjungimas niekada neatrodo kaip du brūkšniai. */
.ptabs__tab::after {
	content: "";
	position: absolute;
	inset-inline: 1rem;
	bottom: 0;
	height: 2px;
	background: var(--color-accent);
	transform: scaleX(0);
	transition: transform 0.3s var(--ease-out);
}

.ptabs:not(.is-enhanced) .ptabs__tab.is-active::after { transform: scaleX(1); }

/* Be JS panelį renkasi :target, o juostoje serverio pažymėtas „aktyvus" lieka
   pirmas. Vietoj melagingo brūkšnio nerodome jokio — geriau nieko, negu
   rodyklė ne į tą vietą. */
.ptabs:not(.is-enhanced):has(.woocommerce-Tabs-panel:target) .ptabs__tab.is-active::after {
	transform: scaleX(0);
}

.ptabs.is-enhanced .ptabs__tab::after { display: none; }

.ptabs__ink {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--color-accent);
	opacity: 0;
	transform: translateX(var(--ink-x, 0px));
	transition: transform 0.38s var(--ease-out), width 0.38s var(--ease-out), opacity 0.2s linear;
	pointer-events: none;
}

.ptabs.is-enhanced .ptabs__ink {
	width: var(--ink-w, 0px);
	opacity: 1;
}

/* ---------- Paneliai ----------
   Konteineris VADINASI .ptabs__panels, o ne .woocommerce-tabs, ir tai ne
   pavadinimo skonis: Woo single-product.js savo tab'ų valdiklį kabina būtent
   ant `.woocommerce-tabs, .wc-tabs-wrapper` ir visiems vidiniams paneliams
   įrašo inline `display:none`. Pervadinus konteinerį, jis mūsų nebemato.
   Žr. inc/product/single-hooks.php 4 sekciją. */
.woocommerce-Tabs-panel {
	display: none;
	padding-top: 1.75rem;
	max-width: 68ch;
}

/* Be JS: adresu pasirinktas panelis, o be adreso — pirmas. */
.ptabs:not(.is-enhanced) .woocommerce-Tabs-panel:target { display: block; }

.ptabs:not(.is-enhanced) .ptabs__panels:not(:has(.woocommerce-Tabs-panel:target)) .woocommerce-Tabs-panel:first-of-type {
	display: block;
}

/* Su JS: klasė, ir tik ji. */
.ptabs.is-enhanced .woocommerce-Tabs-panel { display: none; }

.ptabs.is-enhanced .woocommerce-Tabs-panel.is-active {
	display: block;
	animation: ptabs-in 0.34s var(--ease-out) both;
}

/* Tik opacity ir translateY — aukščio neanimuojame. Aukščio perėjimas
   reikalautų išmatuoti kiekvieną panelį ir vis tiek atrodytų kaip guma;
   turinys tiesiog atsiranda vietoje. */
@keyframes ptabs-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.woocommerce-Tabs-panel > *:first-child { margin-top: 0; }
.woocommerce-Tabs-panel > *:last-child { margin-bottom: 0; }

.woocommerce-Tabs-panel p,
.woocommerce-Tabs-panel li {
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--stone-600);
}

.woocommerce-Tabs-panel h2,
.woocommerce-Tabs-panel h3,
.woocommerce-Tabs-panel h4 {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--stone-900);
	margin: 1.5rem 0 0.5rem;
}

.woocommerce-Tabs-panel ul {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.woocommerce-Tabs-panel ul li {
	position: relative;
	padding-inline-start: 1.125rem;
	margin-bottom: 0.375rem;
}

.woocommerce-Tabs-panel ul li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.6875rem;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--stone-300);
}

.woocommerce-Tabs-panel ol { padding-inline-start: 1.125rem; }
.woocommerce-Tabs-panel a { color: var(--stone-900); }

/* Atributų lentelė — `specs` tab'e po redaktoriaus teksto. */
.shop_attributes {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.woocommerce-Tabs-panel > .shop_attributes:not(:first-child) { margin-top: 1.5rem; }

.shop_attributes th,
.shop_attributes td {
	padding: 0.5rem 0;
	text-align: start;
	border-bottom: 1px solid var(--color-line);
	vertical-align: top;
}

.shop_attributes th { font-weight: 500; color: var(--stone-900); width: 40%; }
.shop_attributes td { color: var(--stone-600); }
.shop_attributes td p { margin: 0; }

/* =========================================================
   REVIEWS
   ========================================================= */
#reviews .commentlist {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

#reviews .comment_container {
	display: flex;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--color-line);
}

#reviews .comment_container img {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	flex-shrink: 0;
}

#reviews .comment-text { flex: 1; min-width: 0; }
#reviews .meta { font-size: 0.75rem; color: var(--stone-500); margin-bottom: 0.5rem; }
#reviews .description { font-size: 0.875rem; line-height: 1.7; color: var(--stone-600); }

#review_form .comment-form { display: grid; gap: 0.75rem; }
#review_form .comment-form-rating p.stars { display: flex; gap: 0.25rem; }

/* =========================================================
   RELATED / UPSELLS
   ========================================================= */
.related,
.upsells {
	grid-column: 1 / -1;
	margin-top: 4rem;
}

.related > h2,
.upsells > h2 {
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
	letter-spacing: -0.02em;
	margin: 0 0 1.5rem;
	color: var(--stone-900);
}

.woo-back {
	grid-column: 1 / -1;
	margin: 3rem 0 0;
	font-size: 0.875rem;
}

.woo-back a {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--stone-600);
	text-decoration: none;
}

.woo-back a:hover { color: var(--stone-900); }

/* =========================================================
   WOO PAGES — Cart / Checkout / My Account
   -----------------------------------------------------------
   These are ordinary WP pages, so they come through page.php,
   which wraps them in .woo-page (see page.php).

   IMPORTANT: this styles the SHORTCODE Cart/Checkout
   ([woocommerce_cart] / [woocommerce_checkout]). The Cart/Checkout
   *blocks* render different markup — see SHOP.md.
   ========================================================= */
.woo-page { padding-block: 2.5rem 4rem; }

.woo-page__head { margin-bottom: 2rem; }

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

/*
 * The cart shortcode wraps its output in <div class="woocommerce">, so that
 * div — not .woo-page__inner — is the real parent of the form and the totals.
 * Grid it directly rather than nesting two grids.
 */
.woo-page.is-cart .woo-page__inner > .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 1024px) {
	.woo-page.is-cart .woo-page__inner > .woocommerce {
		grid-template-columns: minmax(0, 1fr) minmax(0, 23rem);
	}
}

/* Notices and cross-sells span the full width. */
.woocommerce-notices-wrapper,
.cart-empty,
.return-to-shop,
.cross-sells { grid-column: 1 / -1; }

/* =========================================================
   CART — items table
   -----------------------------------------------------------
   Every cell rule is prefixed with .shop_table.cart so it
   outranks the base `.shop_table.cart tbody td` padding.
   ========================================================= */
.woocommerce-cart-form { margin: 0; min-width: 0; }

.shop_table.cart {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 0.875rem;
}

.shop_table.cart thead th {
	padding: 0 0.75rem 0.75rem;
	border-bottom: 1px solid var(--color-line);
	text-align: start;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--stone-400);
}

.shop_table.cart tbody td {
	padding: 1.25rem 0.75rem;
	border-bottom: 1px solid var(--color-line);
	vertical-align: middle;
}

/*
 * Remove (x) + thumbnail column widths.
 *
 * The crater between the x and the photo was never padding — it was the auto
 * table layout. `.shop_table.cart` is `width: 100%` with no `table-layout`,
 * so the browser sizes each column from the widest constraint it can find and
 * then hands the LEFTOVER width out. Binding a width on `td.product-remove`
 * alone left the matching `thead th` unconstrained and — the part that
 * actually mattered — left every other column unconstrained too. With no cell
 * staking a claim on the surplus, it pooled in the first column.
 *
 * Hence the shape below: widths on `th` AND `td` for the two fixed columns,
 * and `width: 100%` on .product-name so the slack has somewhere to go.
 *
 * Specificity is deliberately held at this file's existing (0,3,1). Raising
 * it — a `.woocommerce-cart-form` prefix, or `!important` — would outrank the
 * stacked-mobile block below, which resets these same widths to `auto` to
 * hand the cells to a grid.
 */
.shop_table.cart th.product-remove,
.shop_table.cart td.product-remove {
	width: 2.75rem;
	padding-inline: 0;
	text-align: center;
}

.shop_table.cart td.product-remove a.remove {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	color: var(--stone-400);
	font-size: 1.125rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

.shop_table.cart td.product-remove a.remove:hover {
	background: var(--stone-100);
	color: var(--stone-900);
}

/* Thumbnail — small start padding, not zero, so the image doesn't touch the remove button's circle. */
.shop_table.cart th.product-thumbnail,
.shop_table.cart td.product-thumbnail {
	width: 5.5rem;
	padding-inline: 0.25rem 0.75rem;
}

.shop_table.cart td.product-thumbnail img {
	display: block;
	width: 4.5rem;
	height: 5.5rem;
	object-fit: cover;
	/*
	 * min-width + max-width are the guard, and both are load-bearing. The base
	 * rule in main.css is `img { max-width: 100%; height: auto }`, so an image
	 * in a column the table has squeezed resolves its own max-width against
	 * that squeezed cell and collapses to 0x0 — a photo that silently vanishes
	 * rather than overflowing, which is why it read as "the column broke".
	 * min-width also feeds the column's min-content width, so the table cannot
	 * squeeze it in the first place.
	 */
	min-width: 4.5rem;
	max-width: none;
	border-radius: 16px;
	background: var(--stone-100);
}

/*
 * Every other column is pinned, so this is the only `auto` one left and the
 * table's surplus width has nowhere else to go. It is deliberately NOT
 * `width: 100%`: that makes .product-name demand the whole table, the
 * remaining columns get squeezed toward their min-content, and the thumbnail
 * image — `max-width: 100%` from main.css — collapses to nothing.
 */
.shop_table.cart th.product-name,
.shop_table.cart td.product-name {
	width: auto;
}

.shop_table.cart th.product-price,
.shop_table.cart td.product-price { width: 7rem; }

.shop_table.cart th.product-quantity,
.shop_table.cart td.product-quantity { width: 8.5rem; }

.shop_table.cart th.product-subtotal,
.shop_table.cart td.product-subtotal { width: 7rem; }

/* Name + variation meta */
.shop_table.cart td.product-name a {
	color: var(--stone-900);
	font-weight: 500;
	text-decoration: none;
}

.shop_table.cart td.product-name a:hover { color: var(--stone-600); }

.shop_table.cart td.product-name .variation {
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	color: var(--stone-400);
}

.shop_table.cart td.product-name .variation dt,
.shop_table.cart td.product-name .variation dd { display: inline; margin: 0; }

.shop_table.cart td.product-name .variation dd + dt::before { content: " \00B7 "; }

.shop_table.cart td.product-price { color: var(--stone-600); }
.shop_table.cart td.product-subtotal { font-weight: 600; color: var(--stone-900); }
.shop_table.cart td.product-quantity .quantity { display: inline-flex; }

/*
 * Actions row: coupon + update.
 *
 * DO NOT put `display: flex` back on this td. Woo renders it as
 * `<td colspan="6" class="actions">`, and `colspan` is a presentational hint
 * that only applies to a box which is still a `table-cell`. Give the td any
 * other `display` and the table fixup wraps it in an ANONYMOUS table-cell,
 * the colspan is discarded, and the whole coupon-plus-buttons row is crammed
 * into column 1 — whose min-content width it then dictates. A ~12rem coupon
 * field plus two pill buttons is where the ~300px of "dead space" beside the
 * remove (x) came from: not padding, and not the width bindings below, which
 * is why trimming either never moved it. The row is laid out with a float
 * instead so the cell stays a real table-cell.
 *
 * The stacked mobile block re-applies flex on purpose — there the table is
 * `display: block`, so there is no colspan left to lose.
 */
.shop_table.cart td.actions {
	padding: 1.25rem 0 0;
	border-bottom: 0;
}

/* Contain the floated update button, or the cell collapses to zero height. */
.shop_table.cart td.actions::after {
	content: "";
	display: table;
	clear: both;
}

.shop_table.cart td.actions .coupon {
	display: inline-flex;
	gap: 0.5rem;
	float: none;
}

.shop_table.cart td.actions .coupon input[type="text"] {
	width: auto;
	max-width: 12rem;
	border-radius: var(--radius-pill);
	padding: 0.625rem 1rem;
	font-size: 0.875rem;
}

.shop_table.cart td.actions button[name="update_cart"] {
	float: inline-end;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--stone-700);
	padding: 0.625rem 1.25rem;
	font-size: 0.875rem;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}

.shop_table.cart td.actions button[name="update_cart"]:hover:not([disabled]) {
	border-color: var(--stone-900);
	color: var(--stone-900);
}

.shop_table.cart td.actions button[name="update_cart"][disabled] {
	opacity: 0.4;
	cursor: default;
}

/* ---------- Stacked cart rows on small screens ----------
   Woo puts data-title on every cart cell, which makes a card
   layout possible without touching the template. */
@media (max-width: 767px) {
	.shop_table.cart thead { display: none; }

	.shop_table.cart,
	.shop_table.cart tbody,
	.shop_table.cart tr,
	.shop_table.cart tbody td { display: block; width: 100%; }

	.shop_table.cart tr.cart_item {
		position: relative;
		display: grid;
		grid-template-columns: 4.5rem minmax(0, 1fr);
		grid-template-areas:
			"thumb name"
			"thumb price"
			"qty   subtotal";
		gap: 0.5rem 1rem;
		padding: 1rem 2rem 1rem 0;
		border-bottom: 1px solid var(--color-line);
	}

	.shop_table.cart tr.cart_item td { padding: 0; border: 0; }

	/*
	 * `width: auto` on every one of these is a reset, not decoration. The
	 * desktop rules pin each column at (0,3,1), which outranks the
	 * `tbody td { width: 100% }` above it (0,2,2) — so without these the
	 * pinned rem widths would follow the cells into the grid and the row would
	 * stop filling its tracks. Any new pinned column above needs a reset here.
	 */
	.shop_table.cart td.product-thumbnail { grid-area: thumb; width: auto; }
	.shop_table.cart td.product-name      { grid-area: name; width: auto; }
	.shop_table.cart td.product-price     { grid-area: price; width: auto; }
	.shop_table.cart td.product-quantity  { grid-area: qty; align-self: center; width: auto; }
	.shop_table.cart td.product-subtotal  { grid-area: subtotal; text-align: end; align-self: center; width: auto; }

	.shop_table.cart td.product-remove {
		position: absolute;
		top: 0.75rem;
		right: 0;
		width: auto;
	}

	/* Label the price/subtotal cells from their data-title. */
	.shop_table.cart td.product-price::before,
	.shop_table.cart td.product-subtotal::before {
		content: attr(data-title) ": ";
		color: var(--stone-400);
		font-size: 0.75rem;
	}

	/*
	 * Restores what the desktop rule used to supply by specificity. Safe here:
	 * the table is `display: block` in this block, so there is no colspan to
	 * lose (see the desktop comment above).
	 */
	.shop_table.cart td.actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		padding-top: 1.25rem;
	}
	.shop_table.cart td.actions .coupon { width: 100%; }
	.shop_table.cart td.actions .coupon input[type="text"] { flex: 1; max-width: none; }
}

/* =========================================================
   CART — totals panel
   ========================================================= */
.cart-collaterals { min-width: 0; }

@media (min-width: 1024px) {
	.cart_totals { position: sticky; top: 1.5rem; }
}

.cart_totals {
	border: 1px solid rgba(231, 229, 228, 0.7);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	padding: 1.5rem;
}

.cart_totals > h2 {
	margin: 0 0 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--stone-500);
}

.cart_totals table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 0.875rem;
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
	padding: 0.5rem 0;
	border: 0;
	text-align: start;
	vertical-align: top;
	font-weight: 400;
	color: var(--stone-600);
}

.cart_totals table.shop_table td { text-align: end; }

.cart_totals tr.order-total th,
.cart_totals tr.order-total td {
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-line);
	font-size: 1rem;
	font-weight: 600;
	color: var(--stone-900);
}

.cart_totals .woocommerce-shipping-destination {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	color: var(--stone-400);
}

.cart_totals ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: start;
}

.cart_totals ul#shipping_method li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
	font-size: 0.8125rem;
}

.cart_totals ul#shipping_method input { width: auto; }

.cart_totals .shipping-calculator-button {
	font-size: 0.75rem;
	color: var(--stone-500);
}

.wc-proceed-to-checkout { margin-top: 1.25rem; }

.wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	border-radius: var(--radius-pill);
	background: var(--stone-900);
	color: #fff;
	padding: 0.875rem 1.5rem;
	text-align: center;
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s;
}

.wc-proceed-to-checkout a.checkout-button:hover { background: var(--stone-700); }

/* Empty cart */
.cart-empty {
	border: 1px dashed var(--stone-300);
	border-radius: var(--radius-lg);
	padding: 4rem 1.5rem;
	text-align: center;
	color: var(--stone-600);
}

.return-to-shop { margin-top: 1rem; text-align: center; }

/* Cross-sells, moved below the cart in inc/product-hooks.php */
.cross-sells { margin-top: 4rem; }

.cross-sells > h2 {
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
	letter-spacing: -0.02em;
	margin: 0 0 1.5rem;
	color: var(--stone-900);
}

/* =========================================================
   CHECKOUT
   ========================================================= */
/* Login only. The coupon twins (.woocommerce-form-coupon-toggle and
   form.checkout_coupon) are gone from this page on purpose:
   erikas_checkout_unhook_coupon_form() takes Woo's coupon block off
   woocommerce_before_checkout_form and erikas_checkout_coupon_row() reprints
   it, minimally, inside #order_review. Their rules are removed rather than
   left behind so the next person does not spend an afternoon wondering why
   editing them changes nothing. */
.woocommerce-form-login-toggle { margin-bottom: 1rem; }

form.woocommerce-form-login {
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

/* ---------- Checkout grid ----------
   THE ROW GAP IS ZERO AND THE SECOND ROW IS `1fr` ON PURPOSE. Both fix the
   same bug, which is what put a screen-tall gap under "Jūsų užsakymas".

   The form has three top-level children — #customer_details,
   #order_review_heading, #order_review — and the desktop layout puts the
   first in column 1 spanning both rows, the other two stacked in column 2.

   1. With `grid-template-rows` unset, both rows sized as `auto`, and the
      grid algorithm distributes a spanning item's height across every
      intrinsic track it crosses. #customer_details is the tallest thing on
      the page, so roughly half of it was pushed into row 1 — a row whose
      only real occupant is a one-line uppercase heading. Sizing row 2 as
      `1fr` takes it out of that distribution entirely (items spanning a
      flexible track are excluded from the spanning-item step), so row 1
      shrinks back to the height of the heading.

   2. `gap: 2.5rem` applied to rows as well as columns, and in this layout
      the row gap falls between the heading and its OWN table — 2.5rem on
      top of the heading's 1rem margin. Only the column gap is wanted here,
      so the row gap is zero and #order_review_heading carries its own
      margin-top for the stacked layout below 1024px.

   THE FORM NOW HAS FOUR TOP-LEVEL CHILDREN, NOT THREE.
   erikas_checkout_top_controls() prints .erikas-checkout-controls on
   woocommerce_checkout_before_customer_details, so the control row is a
   sibling of #customer_details rather than a node inside its billing column.
   Every cell of the desktop grid below is explicitly claimed, which means an
   unplaced fourth child would be auto-placed into a NEW row underneath
   #order_review — the control row would drop to the bottom of the page. It
   is therefore placed by hand like the other three. */
form.checkout.woocommerce-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 2.5rem;
	row-gap: 0;
	align-items: start;
}

@media (min-width: 1024px) {
	form.checkout.woocommerce-checkout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
		grid-template-rows: auto auto auto 1fr;
	}

	/* ROW 1 IS FOR WOO'S ERROR BLOCK, AND IT HAS TO BE PLACED BY HAND.
	   Woo's checkout.js answers a failed submission with
	   `$checkout_form.prepend( '<div class="woocommerce-NoticeGroup …">' )` —
	   a fifth grid child that no PHP hook produces and that therefore cannot
	   be placed at render time. Auto-placement starts its cursor at row 1 and
	   drops it in the first free cell; with the control row occupying row 1
	   column 1, that free cell is the 26rem summary column, so every
	   "Užpildykite privalomus laukus" error would land squeezed above
	   "Jūsų užsakymas" and shove the whole summary down. Spanning it across
	   both columns at row 1 puts validation errors where a shopper looks for
	   them — the top of the form, full width — and the track costs nothing
	   when no error is showing, because an auto row with no items is 0px and
	   the row gap is already zero.

	   Row 2 is the control row, column 1 only: the toggles belong to the
	   address form, not above the order summary. Column 2 of row 2 is left
	   empty deliberately, so the order-summary heading still starts level
	   with the first billing label instead of floating above its own box.
	   ANY FURTHER UNPLACED CHILD OF THIS FORM WILL LAND IN THAT CELL — a
	   plugin printing on woocommerce_checkout_after_customer_details, say.
	   Anything this theme adds here gets an explicit placement.

	   #customer_details keeps spanning down into the `1fr` track for exactly
	   the reason it did before — an item spanning a flexible track is
	   excluded from the grid algorithm's spanning-item height distribution,
	   which is what keeps the auto rows at their own content height. */
	.woocommerce-NoticeGroup { grid-column: 1 / -1; grid-row: 1; }
	.erikas-checkout-controls { grid-column: 1; grid-row: 2; }
	#customer_details { grid-column: 1; grid-row: 3 / span 2; }
	#order_review_heading { grid-column: 2; grid-row: 3; }
	#order_review { grid-column: 2; grid-row: 4; }
}

/* Woo prepends this on a failed submission, at every width. The margin is
   the row gap this grid deliberately does not have. */
.woocommerce-NoticeGroup { margin-bottom: 1.5rem; }

/* ---------- Billing / shipping columns ----------
   WooCommerce's form-checkout.php gives us exactly two wrappers:

     #customer_details > .col-1   billing fields
     #customer_details > .col-2   shipping fields AND the order-notes block

   That pairing is the whole difficulty. The shipping half has to collapse
   when "Norite pristatyti kitu adresu?" is off, but the order notes sitting
   in the same wrapper must stay visible — collapsing .col-2 wholesale would
   silently take the notes field with it.

   `display: contents` on .col-2 solves it without a template override: the
   wrapper stops generating a box and its two children become grid items of
   #customer_details directly, so they can be placed independently —
   shipping into column 2, notes back under billing in column 1.

   Collapsed vs expanded is one class on the form, toggled by
   assets/js/checkout.js, and two interpolatable properties:

     grid-template-columns  minmax(0, 0fr) -> minmax(0, 1fr)   (>=1280px)
     grid-template-rows     minmax(0, 0fr) -> minmax(0, 1fr)   (the block)

   Both sides are written as minmax() with the same shape on purpose: track
   lists only interpolate when their functions match, so `0fr -> minmax(0,1fr)`
   would snap instead of animating.

   The row collapse runs at EVERY width, including the two-column layout, and
   that is not redundant. A grid item in a zero-width track still lays its
   content out — every label wrapping to one word per line — so without the
   height collapse the collapsed shipping block would inflate row 1 to a
   couple of thousand pixels of invisible text. */
#customer_details {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 0;
	row-gap: 0;
	align-items: start;
}

#customer_details .col-1 { min-width: 0; margin-bottom: 2rem; }
#customer_details .col-2 { display: contents; }

.woocommerce-shipping-fields {
	display: grid;
	grid-template-rows: minmax(0, 0fr);
	min-width: 0;
	overflow: hidden;
}

.checkout.is-shipping-visible .woocommerce-shipping-fields {
	grid-template-rows: minmax(0, 1fr);
}

/* `display: block !important` overrides the inline style WooCommerce's own
   checkout.js writes here — it calls .hide() on this div and .slideDown() to
   bring it back. Woo keeps owning the CHECKBOX (it is what posts
   ship_to_different_address and what Woo's validation reads); it just no
   longer owns the reveal, because a jQuery height slide inside a CSS column
   animation is two animations fighting over the same box.

   The bottom padding lives inside the collapsible rather than as a margin on
   it, so a collapsed block contributes exactly zero vertical space — an
   outside margin would survive the collapse and leave a permanent gap. */
.woocommerce-shipping-fields > .shipping_address {
	display: block !important;
	min-height: 0;
	overflow: hidden;
	padding-bottom: 2rem;
	opacity: 0;
}

.checkout.is-shipping-visible .woocommerce-shipping-fields > .shipping_address {
	opacity: 1;
}

/* Two columns once there is genuinely room for two address forms plus the
   26rem order summary. Below this the shipping block simply expands
   downwards, which is the same animation with the other axis. */
@media (min-width: 1280px) {
	#customer_details {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
	}

	.checkout.is-shipping-visible #customer_details {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 2.5rem;
	}

	#customer_details > .col-1 { grid-column: 1; grid-row: 1; }
	#customer_details .woocommerce-shipping-fields { grid-column: 2; grid-row: 1; }
	#customer_details .woocommerce-additional-fields { grid-column: 1; grid-row: 2; }
}

/* ---------- Reveal animation ----------
   Gated behind .is-animated, which assets/js/checkout.js adds one frame after
   its initial sync. Without that gate, a returning customer whose saved
   shipping address differs — Woo restores that checkbox checked — would watch
   the whole column animate open on page load.

   The content fade is deliberately offset from the box: on expand it waits
   for the box to finish growing, on collapse it clears out first. Overlapping
   them means watching every label reflow through the width change. */
.checkout.is-animated #customer_details {
	transition: grid-template-columns 0.38s cubic-bezier(0.4, 0, 0.2, 1),
	            column-gap 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.checkout.is-animated .woocommerce-shipping-fields {
	transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.checkout.is-animated .woocommerce-shipping-fields > .shipping_address {
	transition: opacity 0.15s ease;
}

.checkout.is-animated.is-shipping-visible .woocommerce-shipping-fields > .shipping_address {
	transition: opacity 0.25s ease 0.2s;
}

@media (prefers-reduced-motion: reduce) {
	.checkout.is-animated #customer_details,
	.checkout.is-animated .woocommerce-shipping-fields,
	.checkout.is-animated .woocommerce-shipping-fields > .shipping_address {
		transition: none;
	}
}

.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3,
.woocommerce-additional-fields > h3,
.erikas-section-title,
#order_review_heading {
	margin: 0 0 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--stone-500);
}

/* Stacked layout only: replaces the row gap removed above, so the order
   summary still separates from the fields it sits under. Reset to 0 on
   desktop, where the heading starts its own column and any top margin would
   push it out of line with the first billing label. */
#order_review_heading { margin-top: 2.5rem; }

@media (min-width: 1024px) {
	#order_review_heading { margin-top: 0; }
}

/* ---------- Custom top controls (inc/checkout.php) ----------
   erikas_checkout_top_controls() prints two plain checkboxes on
   woocommerce_checkout_before_customer_details — ABOVE the #customer_details
   wrapper, not inside its billing column. On the old hook
   (woocommerce_before_checkout_billing_form) the row rendered inside .col-1,
   so the moment #customer_details split into two columns the toggles were
   squeezed into the left half on top of the billing inputs. As a sibling of
   that wrapper the row spans the full width of the address area and stays a
   header for BOTH columns, whichever is showing.

   Neither checkbox carries a `name`, so neither is posted:

     #custom_toggle_company  — shows/hides .erikas-company-group and makes
                               assets/js/checkout.js inject the
                               billing_is_company hidden input.
     #custom_toggle_shipping — a proxy that clicks WooCommerce's own
                               #ship-to-different-address-checkbox, so Woo
                               core keeps owning the slide animation and the
                               shipping fieldset's state.

   :has() is baseline in every evergreen browser; without it the rows simply
   render in their unchecked style while staying fully functional. */
.erikas-checkout-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	/* Width is stated rather than inherited from the grid item's default
	   stretch, because this row is the one part of the checkout that a
	   plugin-modified wrapper can hand a shrink-to-fit box — and two pills
	   shrink-wrapped against the left edge read as a broken header rather
	   than as a control row. min-width: 0 keeps a long translated label from
	   widening the whole column. */
	width: 100%;
	min-width: 0;
	margin: 0 0 1.5rem;
}

.erikas-checkout-control {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	flex: 1 1 14rem;
	min-width: 0;
	margin: 0;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	line-height: 1.3;
	color: var(--stone-700);
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s;
}

.erikas-checkout-control:hover { border-color: var(--stone-400); }

.erikas-checkout-control:has(input:checked) {
	border-color: var(--stone-900);
	background: var(--stone-50);
}

.erikas-checkout-control:has(input:focus-visible) {
	box-shadow: 0 0 0 3px rgba(28, 25, 23, 0.12);
}

.erikas-checkout-control input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--color-accent);
	cursor: pointer;
}

/* WooCommerce's own "Ship to a different address?" row. Hidden, never
   removed: #custom_toggle_shipping clicks the real checkbox inside it, and
   Woo core's checkout.js needs it in the DOM to run its own slideDown /
   slideUp on div.shipping_address. */
#ship-to-different-address { display: none !important; }

.woocommerce form .form-row {
	display: block;
	margin: 0 0 1rem;
	padding: 0;
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.75rem;
	color: var(--stone-500);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	width: 100%;
	border: 1px solid var(--color-line);
	border-radius: 16px;
	background: var(--color-surface);
	padding: 0.625rem 1rem;
	font-size: 0.875rem;
	color: var(--stone-900);
	transition: border-color 0.2s;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { border-color: var(--stone-900); outline: none; }

/* Woo's two-up rows */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
	width: 100%;
	float: none;
}

/* Woo's two-up rows, sized against THE COLUMN rather than the viewport.
   This was a `@media (min-width: 640px)` query, which is wrong the moment
   billing and shipping sit side by side: on a 1400px screen each address
   column is around 360px, the media query still reports "wide", and every
   form-row-first/last pair would be crushed into two ~165px inputs. A
   container query asks the only question that matters — how much room does
   THIS column actually have — so the same fields go two-up in one column and
   stack in two, with no breakpoint bookkeeping.

   Without container query support the wrapper stays single-column
   everywhere: taller, never broken. */
.woocommerce-billing-fields,
.woocommerce-shipping-fields {
	container-type: inline-size;
	container-name: checkout-col;
}

@container checkout-col (min-width: 32rem) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 1rem;
	}
	.woocommerce form .form-row-wide,
	.woocommerce form .form-row.notes { grid-column: 1 / -1; }
}

.required { color: var(--rose-700); text-decoration: none; }

/* ---------- Company field group (inc/checkout.php) ----------
   billing_company and billing_company_code are `required => true` server
   side, so they are hidden here rather than removed from the form.
   assets/js/checkout.js adds .is-visible when #custom_toggle_company is
   checked and strips the `required` attribute while the group is hidden (a
   hidden required control blocks native form submission outright);
   erikas_checkout_exempt_company_fields() drops the matching server-side
   errors whenever billing_is_company was not posted.

   Hidden by CSS from the moment this sheet loads — not by JS on DOM ready —
   so the group never flashes visible, and stays hidden even if the script
   fails to run at all. !important on both, because
   `.woocommerce form .form-row { display: block; }` further up is
   equal-specificity author CSS in this same file. */
.erikas-company-group { display: none !important; }
.erikas-company-group.is-visible { display: block !important; }

#order_review {
	border: 1px solid rgba(231, 229, 228, 0.7);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	padding: 1.5rem;
}

@media (min-width: 1024px) {
	#order_review { position: sticky; top: 1.5rem; }
}

table.shop_table.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: 0.5rem 0;
	border: 0;
	text-align: start;
	font-weight: 400;
	color: var(--stone-600);
}

.woocommerce-checkout-review-order-table td { text-align: end; }

.woocommerce-checkout-review-order-table thead th {
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--color-line);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--stone-400);
}

.woocommerce-checkout-review-order-table .cart_item td { padding: 0.75rem 0; }

/* The blanket `td { text-align: end }` above is meant for money columns; it
   was also right-aligning the product name against the left edge of its own
   column. Amount cells get `nowrap` for the same reason — inside the 26rem
   sticky summary "16,00 €" was breaking across two lines. */
.woocommerce-checkout-review-order-table td.product-name {
	text-align: start;
	color: var(--stone-900);
	font-weight: 500;
}

.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout-review-order-table tfoot td {
	padding-inline-start: 1rem;
	white-space: nowrap;
}

.woocommerce-checkout-review-order-table tfoot tr:last-child th,
.woocommerce-checkout-review-order-table tfoot tr:last-child td {
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-line);
	font-size: 1rem;
	font-weight: 600;
	color: var(--stone-900);
}

/* ---------- Discount code (inc/checkout.php) ----------
   Printed on woocommerce_checkout_order_review @15, so it renders as a direct
   child of #order_review between the totals table and the payment box.

   Minimal by construction: closed, it is one line of muted underlined text
   under a hairline — the same visual weight as a footnote, which is the right
   weight for a control most shoppers never use. It only becomes an input pair
   once someone says they have a code.

   The panel's display is keyed off `:not([hidden])` rather than a class, so
   the field is closed from the first paint and stays closed if the script
   never runs — the same reasoning as .erikas-company-group above. Writing
   `display: flex` on the bare class would have beaten the UA's
   `[hidden] { display: none }` and left the field permanently open. */
.erikas-coupon {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-line);
}

.erikas-coupon__toggle {
	display: inline;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: 0.8125rem;
	color: var(--stone-500);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
	transition: color 0.2s;
}

.erikas-coupon__toggle:hover { color: var(--stone-900); }

.erikas-coupon__toggle:focus-visible {
	outline: 2px solid var(--stone-900);
	outline-offset: 3px;
	border-radius: 4px;
}

.erikas-coupon__panel { display: none; }

.erikas-coupon__panel:not([hidden]) {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.erikas-coupon__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	padding: 0.5rem 0.875rem;
	font-size: 0.8125rem;
	color: var(--stone-900);
	transition: border-color 0.2s;
}

.erikas-coupon__input:focus { border-color: var(--stone-900); outline: none; }

.erikas-coupon__apply {
	flex: 0 0 auto;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--stone-900);
	color: #fff;
	padding: 0.5rem 1.125rem;
	font-size: 0.8125rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s, opacity 0.2s;
}

.erikas-coupon__apply:hover { background: var(--stone-700); }
.erikas-coupon__apply[disabled] { opacity: 0.55; cursor: default; }

/* `:empty` keeps the node in the DOM for its aria-live region — a live region
   inserted at the same moment as its text is announced unreliably — while
   contributing no space until Woo's notice arrives. */
.erikas-coupon__notice { margin-top: 0.75rem; font-size: 0.8125rem; line-height: 1.4; }
.erikas-coupon__notice:empty { display: none; }

.erikas-coupon__notice ul,
.erikas-coupon__notice p { list-style: none; margin: 0; padding: 0; }

.erikas-coupon__notice .woocommerce-error { color: var(--rose-700); }
.erikas-coupon__notice .woocommerce-message { color: var(--stone-700); }

/* Woo's notices ship with a "Peržiūrėti krepšelį" button; inside a 26rem
   summary column it is noise next to a one-line message. */
.erikas-coupon__notice .button { display: none; }

#payment { margin-top: 1.25rem; }

#payment ul.payment_methods {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	border: 1px solid var(--color-line);
	border-radius: 16px;
	overflow: hidden;
}

#payment ul.payment_methods li {
	margin: 0;
	padding: 1rem;
	border-bottom: 1px solid var(--color-line);
	font-size: 0.875rem;
}

#payment ul.payment_methods li:last-child { border-bottom: 0; }
#payment ul.payment_methods li input { width: auto; margin-inline-end: 0.5rem; }
#payment ul.payment_methods label { display: inline; font-weight: 500; }

#payment .payment_box {
	margin-top: 0.75rem;
	border-radius: 12px;
	background: var(--stone-100);
	padding: 0.75rem;
	font-size: 0.8125rem;
	color: var(--stone-600);
}

#payment .payment_box p:last-child { margin-bottom: 0; }

#payment .woocommerce-terms-and-conditions-wrapper { margin-bottom: 1rem; font-size: 0.8125rem; }
#payment .form-row.place-order { margin: 0; }

#place_order {
	width: 100%;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--stone-900);
	color: #fff;
	padding: 0.875rem 1.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s;
}

#place_order:hover { background: var(--stone-700); }

/* Order received */
.woocommerce-order {
	max-width: 45rem;
}

.woocommerce-thankyou-order-details {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	list-style: none;
	margin: 1.5rem 0;
	padding: 1.25rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	font-size: 0.875rem;
}

.woocommerce-thankyou-order-details li { display: flex; flex-direction: column; gap: 0.25rem; }

.woocommerce-thankyou-order-details li strong { color: var(--stone-900); font-weight: 600; }

/* =========================================================
   MY ACCOUNT
   -----------------------------------------------------------
   Moved to assets/css/account.css, which is enqueued only on
   account pages and loads after this file. Keeping the old
   navigation and orders-table rules here too would mean two
   sources of truth for the same selectors.
   ========================================================= */

/* =========================================================
   BUTTONS + NOTICES
   -----------------------------------------------------------
   Not scoped under .woocommerce: on Cart/Checkout/Account pages
   the <body> gets woocommerce-cart / -checkout / -account and
   woocommerce-page, but NOT a plain `woocommerce` class.
   ========================================================= */
.button,
button.button,
input.button,
a.button,
.woocommerce-button {
	display: inline-block;
	border: 1px solid var(--stone-900);
	border-radius: var(--radius-pill);
	background: var(--stone-900);
	color: #fff;
	padding: 0.75rem 1.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s;
}

.button:hover,
button.button:hover,
input.button:hover,
a.button:hover { background: var(--stone-700); }

.button.loading { opacity: 0.6; pointer-events: none; }
.button.disabled,
.button[disabled] { opacity: 0.5; cursor: not-allowed; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1.5rem;
	padding: 1rem;
	border: 1px solid var(--color-line);
	border-inline-start: 3px solid var(--stone-900);
	border-radius: 16px;
	background: var(--color-surface);
	font-size: 0.875rem;
	color: var(--stone-700);
}

.woocommerce-error { border-inline-start-color: var(--rose-700); }
.woocommerce-message { border-inline-start-color: #10b981; }

.woocommerce-error li { margin: 0; }

/* Woo's screen-reader-only headings */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* =========================================================
   VIRTUALŪS ARCHYVAI — /akcijos/ ir /populiariausi/
   -----------------------------------------------------------
   Markup'ą deda inc/shop-custom-archives.php ir
   template-parts/shop/category-pills.php.

   PLOČIO POLITIKA: nė vienos naujos max-width reikšmės. Antraštė
   naudoja tą patį `.wrap.wrap--wide` apvalkalą, kaip ir tinklelis,
   tad abu kraštai sutampa su header'iu ir footer'iu per
   --container-width. Žr. „CONTAINER POLICY" šio failo viršuje.

   Bazinės `.shop-header`, `.pills` ir `.pill-link` taisyklės lieka
   aukščiau; čia tik modifikatoriai, kad parduotuvės archyvas ir
   virtualus archyvas niekada neišsiskirtų per klaidą.
   ========================================================= */
.shop-header--archive {
	position: relative;
	border-bottom: 1px solid rgba(231, 229, 228, 0.7);
	padding-block: 2.5rem 1.75rem;
	background:
		radial-gradient(90rem 22rem at 12% -40%, var(--stone-100) 0%, transparent 60%),
		var(--color-surface);
}

@media (min-width: 768px) {
	.shop-header--archive { padding-block: 3.5rem 2rem; }
}

/* Akcentinė linija viršuje — vienintelis dalykas, skiriantis du archyvo tipus. */
.shop-header--archive::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--rose-400), var(--rose-200) 60%, transparent);
}

.shop-header--bestsellers::before {
	background: linear-gradient(90deg, var(--amber-500), var(--amber-300) 60%, transparent);
}

/* Antraštės blokas laikomas skaitomo pločio, nors konteineris platus. */
.archive-hero__head {
	max-width: 46rem;
	margin-bottom: 1.5rem;
}

.archive-hero__count {
	margin: 0.75rem 0 0;
	font-size: 1rem;
	font-weight: 500;
	color: var(--stone-700);
}

.archive-hero__lede {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--stone-500);
	text-wrap: pretty;
}

/* ---------- Nuolaidų žymos ----------
   Ta pati juostelės mechanika, kaip pilėse: mobilėje horizontalus
   slinkimas be scrollbar'o, nuo 768px — laužomos eilutės. */
.dtags {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	margin-inline: calc(var(--container-padding) * -1);
	margin-bottom: 0.875rem;
	padding: 0.125rem var(--container-padding);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.dtags::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
	.dtags {
		flex-wrap: wrap;
		overflow: visible;
		margin-inline: 0;
		padding: 0;
	}
}

.pill-link--tag {
	border-style: dashed;
	font-variant-numeric: tabular-nums;
}

.pill-link--tag.is-active {
	border-style: solid;
	border-color: var(--stone-900);
	background: var(--stone-900);
	color: #fff;
}

/* ---------- Pilių juostelė archyve ----------
   `scroll-margin-inline` reikalingas dėl JS: perjungus kategoriją
   aktyvi pilė nuslenkama į matomą sritį, ir be šito ji atsiremtų
   tiksliai į konteinerio kraštą. */
.pills--archive { margin-bottom: 0.25rem; }
.pills--archive .pill-link { scroll-margin-inline: var(--container-padding); }

/* Perjungimo metu juostelė prigesinama, kad pasikeitimas būtų matomas
   ir tada, kai tinklelis lieka toks pat. */
.pills.is-switching { opacity: 0.55; transition: opacity 0.2s var(--ease-out); }

/* =========================================================
   ARCHYVO TINKLELIS
   -----------------------------------------------------------
   `.woo--archive` nekeičia stulpelių — juos jau valdo
   `ul.products` ir `.woo--with-sidebar` taisyklės aukščiau.
   Keičiasi tik oras aplink, kad antraštė ir tinklelis skaitytųsi
   kaip vienas blokas.
   ========================================================= */
.woo--archive { padding-block: 2rem 3rem; }

@media (min-width: 768px) {
	.woo--archive { padding-block: 2.5rem 4rem; }
}

/* ---------- Procentinis ženkliukas ----------
   Perkeltas į main.css, prie `.badge--sale`, su kuriuo dabar dalijasi paletę.
   Čia jis buvo perrašomas PO main.css, tad kortelės ženkliukų sistema turėjo
   dvi tiesas: viena galiojo parduotuvėje, kita — visur kitur. */

/* ---------- Vietos numeris bestsellerių kortelėje ---------- */
.rank-chip {
	margin: 0 0 0.375rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--amber-800);
	font-variant-numeric: tabular-nums;
}

/* ---------- Tuščias rezultatas ---------- */
.archive-empty {
	border: 1px dashed var(--color-line);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	padding: 3rem 1.5rem;
	text-align: center;
}

.archive-empty__title {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 1.25rem;
	color: var(--stone-900);
}

.archive-empty__text {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	color: var(--stone-500);
}

.archive-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
}