/**
 * Barex — shop archive.
 *
 * Loaded by inc/front/catalog/shop.php on shop, category, hair-type and brand
 * archives only. This file is the home for everything that styles the catalogue,
 * so that shop appearance stops being spread across WP Additional CSS, the
 * Filter Everything settings box and inline style attributes in PHP.
 *
 * P0 (2026-08-16): only the declarations lifted out of inline attributes. They
 * are reproduced exactly — this phase changes nothing on screen.
 */

/* --------------------------------------------------------------------------
 * Archive backlink — "rodyti visus produktus"
 *
 * Was: echo '<p style="color:#888; font-size:14px;">' with a second
 * style="color:#888" on the <a>. Same values, now reachable from a stylesheet.
 * The !important is inherited from the situation, not chosen: a broad rule in
 * WP Additional CSS sets 36px SilkSerif on this class, and the inline styles
 * these replace used to be what beat it. It goes when that rule does, in P1.
 * ---------------------------------------------------------------------------- */
.show-all-products-link.barex-archive-backlink {
	color: #888;
	font-size: 14px !important;
}

.show-all-products-link.barex-archive-backlink a {
	color: #888;
}

/* ==========================================================================
 * P1 — the boutique card and the grid.
 *
 * EVERYTHING below is scoped under body.barex-shop-v2. That class is added by
 * inc/front/catalog/redesign.php only while the redesign is switched on, so
 * turning it off in Išvaizda → Barex parduotuvė makes this entire block stop
 * matching. Nothing here needs to be removed to roll back — please keep it
 * that way and do not write an unscoped rule in this section.
 * ========================================================================== */

/* ---------------- the grid ---------------- */

.barex-shop-v2 ul.products.barex-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 560px) {
	.barex-shop-v2 ul.products.barex-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 14px; }
}
@media (min-width: 1000px) {
	.barex-shop-v2 ul.products.barex-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 12px; }
}
@media (min-width: 1400px) {
	.barex-shop-v2 ul.products.barex-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 12px; }
}

/* Neutralise the float/width rules the theme's Isotope grid applies. */
.barex-shop-v2 ul.products.barex-grid > li.barex-card {
	width: auto;
	margin: 0;
	float: none;
	clear: none;
	position: relative;
	display: flex;
	flex-direction: column;
}

/* ---------------- media ---------------- */

.barex-shop-v2 .barex-card-media {
	position: relative;
	display: block;
	background: #f6f6f6;
	overflow: hidden;
}

.barex-shop-v2 .barex-card-media .wtbx-product-image,
.barex-shop-v2 .barex-card-media .wtbx-product-image-wrapper,
.barex-shop-v2 .barex-card-media .wtbx-product-thumb {
	display: block;
	height: 100%;
}

/* The theme sets a per-image padding-bottom ratio inline; 4:5 for every card
   is what makes the grid read as a grid rather than a ragged column. */
.barex-shop-v2 .barex-card-media .wtbx-image-crop {
	padding-bottom: 125% !important;
	position: relative;
	overflow: hidden;
}

.barex-shop-v2 .barex-card-media .wtbx-image-crop img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8%;
	mix-blend-mode: multiply;
}

/* ---------------- badges ----------------
 * Colour and shape are deliberately NOT set here. The Scape badge takes its
 * background from the theme option (product-badge-bg, printed into
 * style-custom.css) and .onsale — which is where B2BKing's named dynamic-rule
 * badge lands — takes the sale colour. Forcing black here made the two
 * indistinguishable and ignored the setting. We only place them.
 * ---------------------------------------- */

.barex-shop-v2 .barex-card-media .wtbx-badges {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin: 0;
}

.barex-shop-v2 .barex-card-media .wtbx-product-badge,
.barex-shop-v2 .barex-card-media .onsale {
	position: static;
	display: inline-block;
	margin: 0;
	padding: 4px 8px;
	border-radius: 2px;
	font-size: 9px;
	line-height: 2.1em;
	padding: 0 .95em;
	min-width: 0;
	min-height: 0;
}

/* The theme's grid absolutely-positions the brand line over the image and
   flexes the image crop, both of which assume the old card. Undone with
   specificity rather than !important — li.barex-card outranks the theme rule. */
.barex-shop-v2 li.barex-card .barex-card-media .wtbx-image-crop {
	display: block;
}

.barex-shop-v2 li.barex-card .barex-card-body .pwb-brands-in-loop {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	width: auto;
	text-align: left;
	opacity: 1;
	transform: none;
}

/* The cart anchor holds two icons — an empty bag and a filled one — and the
   theme swaps them on its own .added state. Outside its markup neither was
   hidden, so both drew at once. */
.barex-shop-v2 .barex-card-footer .button .added-to-cart { display: none; }
.barex-shop-v2 .barex-card-footer .button.added .not-added-to-cart { display: none; }
.barex-shop-v2 .barex-card-footer .button.added .added-to-cart { display: block; }

/* ---------------- body ---------------- */

.barex-shop-v2 .barex-card-body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 2px 0;
}

.barex-shop-v2 .barex-card-body .wtbx-product-title,
.barex-shop-v2 .barex-card-body h3 {
	margin: 0;
	padding: 0;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.barex-shop-v2 .barex-card-body .pwb-brands-in-loop {
	margin: 2px 0 0;
	font-size: 9.5px;
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: 1.3;
}

.barex-shop-v2 .barex-card-body .pwb-brands-in-loop a {
	color: #8a8a8a;
	text-decoration: none;
}

/* ---------------- price + buy ---------------- */

.barex-shop-v2 .barex-card-footer {
	margin-top: 6px;
	padding: 0;
	border: 0;
	min-height: 0;
}

.barex-shop-v2 .barex-card-footer .price {
	display: block;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: #101010;
	font-variant-numeric: tabular-nums;
}

.barex-shop-v2 .barex-card-footer .price del { color: #a0a0a0; font-weight: 400; }
.barex-shop-v2 .barex-card-footer .price ins { text-decoration: none; }

/* "Prof. kaina:" — the label is quiet, the number is not. */
.barex-shop-v2 .barex-price-pro-label {
	display: block;
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #8a8a8a;
}

/* Sold out keeps its wording and stops looking purchasable. */
.barex-shop-v2 .barex-card-footer .text-neturime {
	font-size: 12px;
	font-weight: 500;
	color: #8a8a8a;
}
.barex-shop-v2 li.outofstock .barex-card-media { opacity: .62; }

/* The buy button is lifted out of the footer flow and onto the image's lower
   right. Negative top against .barex-card-body, which begins where the media
   ends — no measurement, no JS, correct at every column count. */
.barex-shop-v2 .barex-card-footer .button:not(.cart-label) {
	position: absolute;
	top: -46px;
	right: 6px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #e4e4e2;
	border-radius: 50%;
	background: #fff;
	color: #101010;
	font-size: 15px;
	line-height: 1;
	box-shadow: 0 1px 3px rgba(16,16,16,.07);
}

.barex-shop-v2 .barex-card-footer .button:not(.cart-label):active {
	background: #101010;
	border-color: #101010;
	color: #fff;
}

/* The text twin ("Į krepšelį" / "Pasirinkti savybes") stays in the DOM for
   screen readers and for the theme's AJAX callbacks, but is not drawn. */
.barex-shop-v2 .barex-card-footer .cart-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Out of stock has no button to show. */
.barex-shop-v2 li.outofstock .barex-card-footer .button:not(.cart-label) { display: none; }

/* ---------------- the card link ---------------- */

.barex-shop-v2 .barex-card-link {
	position: absolute;
	inset: 0;
	z-index: 2;              /* under the buy button (4), over everything else */
	display: block;
	text-indent: -9999px;
	overflow: hidden;
}

/* ---------------- result count + pagination ---------------- */

.barex-shop-v2 .woocommerce-result-count {
	display: block;
	margin: 0 0 14px;
	font-size: 12px;
	color: #8a8a8a;
	font-variant-numeric: tabular-nums;
}

.barex-shop-v2 .woocommerce-pagination { margin-top: 34px; }

/* ---------------- quick-pick sheet ---------------- */

.barex-pick-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100001;
	background: rgba(16,16,16,.38);
	opacity: 0;
	visibility: hidden;
	transition: opacity .24s ease, visibility 0s linear .24s;
}

.barex-pick-backdrop.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .24s ease, visibility 0s linear 0s;
}

.barex-pick {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100002;
	background: #fff;
	border-radius: 14px 14px 0 0;
	padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
	transform: translate3d(0, 100%, 0);
	transition: transform .28s cubic-bezier(.22,.61,.36,1);
	max-height: 82vh;
	overflow-y: auto;
	box-shadow: 0 -10px 30px -18px rgba(0,0,0,.5);
}

.barex-pick.is-open { transform: none; }

.barex-pick-grab {
	width: 34px;
	height: 3.5px;
	border-radius: 2px;
	background: #e4e4e2;
	margin: 0 auto 12px;
}

.barex-pick-title {
	margin: 0 0 3px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -.01em;
}

.barex-pick-sub {
	margin: 0 0 12px;
	font-size: 11.5px;
	color: #8a8a8a;
}

.barex-pick-list { display: flex; flex-direction: column; gap: 8px; }

.barex-pick-opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 50px;
	padding: 12px 14px;
	border: 1px solid #e4e4e2;
	border-radius: 3px;
	background: #fff;
	color: #101010;
	font-family: inherit;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.barex-pick-opt b { font-weight: 600; }
.barex-pick-opt span { font-size: 13px; font-variant-numeric: tabular-nums; color: #41464a; }
.barex-pick-opt:active { border-color: #101010; }

.barex-pick-opt[disabled] { opacity: .45; cursor: default; }
.barex-pick-opt[disabled] span { font-size: 11.5px; }

.barex-pick-more {
	display: block;
	margin-top: 12px;
	text-align: center;
	font-size: 12.5px;
	color: #8a8a8a;
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.barex-pick, .barex-pick-backdrop { transition: none !important; }
}

/* The theme's image preloader ring is hidden by the Isotope reveal callback,
   which no longer runs now the grid is CSS. Without this it stays drawn over
   every product image — a direct, and easily missed, consequence of dropping
   Isotope rather than a styling oversight. */
.barex-shop-v2 .barex-card-media .wtbx-preloader-wrapper,
.barex-shop-v2 .barex-card-media .wtbx-preloader {
	display: none;
}

/* Same reason: the reveal animation leaves cards at opacity 0 if it never fires. */
.barex-shop-v2 li.barex-card,
.barex-shop-v2 li.barex-card .wtbx-product-image,
.barex-shop-v2 li.barex-card .wtbx-product-thumb {
	opacity: 1;
	visibility: visible;
	transform: none;
}


/* ==========================================================================
 * QA round 1 — 2026-08-17
 * ========================================================================== */

/* ---- toolbar: result count + sorting on one row, above a full-width grid ----
 * The theme floats .woocommerce-ordering right, which made the grid flow around
 * it and lose a whole column (830px of a 1090px content area). */
.barex-shop-v2 .barex-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 0 18px;
}

.barex-shop-v2 .barex-shop-toolbar .woocommerce-result-count {
	margin: 0;
	order: 1;
}

.barex-shop-v2 .barex-shop-toolbar .woocommerce-ordering {
	float: none;
	margin: 0;
	order: 2;
}

.barex-shop-v2 .barex-grid-wrapper { clear: both; }

@media (max-width: 559px) {
	.barex-shop-v2 .barex-shop-toolbar .woocommerce-ordering { width: 100%; }
}

/* ---- alignment: everything on the card reads from the same left edge ----
 * .wtbx-product-title is a flex container that the theme centres, so the title
 * looked centred while text-align still computed to start — which is why it
 * could not be fixed with text-align alone. */
.barex-shop-v2 .barex-card-body,
.barex-shop-v2 .barex-card-title,
.barex-shop-v2 .barex-card-body h3,
.barex-shop-v2 .barex-card-body .pwb-brands-in-loop,
.barex-shop-v2 .barex-card-footer,
.barex-shop-v2 .barex-card-footer .price {
	text-align: left;
}

.barex-shop-v2 li.barex-card .barex-card-title {
	display: block;
	justify-content: flex-start;
	align-items: flex-start;
}

/* ---- title: the sans the rest of the card uses ----
 * The theme sets SilkSerif on loop titles. A serif at 13.5px next to a Roboto
 * brand line and a Roboto price read as three different systems. */
.barex-shop-v2 li.barex-card .barex-card-body h3,
.barex-shop-v2 li.barex-card .barex-card-title h3 a {
	font-family: Roboto, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -.005em;
	text-transform: none;
}

/* ---- the gallery hover image ----
 * Products WITH a gallery image render a SECOND .wtbx-product-thumb. The theme
 * stacks them absolutely for its hover swap; once they were in normal flow the
 * media box doubled in height, which is why the Olioseta Glow group rendered at
 * 538px against 326px for everything else. Restored to a stack, and the swap
 * kept for pointer devices. */
.barex-shop-v2 .barex-card-media .wtbx-product-image-wrapper { position: relative; }

.barex-shop-v2 .barex-card-media .wtbx-product-secondary {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}

@media (hover: hover) {
	.barex-shop-v2 li.barex-card:hover .wtbx-product-secondary { opacity: 1; }
}

/* height:100% on the thumb made its height depend on the wrapper, which was
   itself sized by the thumb — the media box could not settle. Let the aspect
   ratio on .wtbx-image-crop be the only thing defining height. */
.barex-shop-v2 .barex-card-media .wtbx-product-thumb,
.barex-shop-v2 .barex-card-media .wtbx-product-image,
.barex-shop-v2 .barex-card-media .wtbx-product-image-wrapper {
	height: auto;
}

/* ---- rating: image's lower-left, opposite the buy button ---- */
.barex-shop-v2 .barex-card-rating {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 3;
	line-height: 1;
}

.barex-shop-v2 .barex-card-rating:empty { display: none; }

.barex-shop-v2 .barex-card-rating .star-rating {
	margin: 0;
	float: none;
	font-size: 11px;
}

/* Nudge the buy button to match the rating's inset so the two corners agree. */
.barex-shop-v2 .barex-card-footer .button:not(.cart-label) {
	top: -50px;
	right: 10px;
}

/* Tighten the text block. The theme gives loop titles a generous margin meant
   for a centred card; left-aligned and stacked it just opened a gap between
   the name and the brand. */
.barex-shop-v2 li.barex-card .barex-card-body { gap: 0; padding-top: 10px; }
.barex-shop-v2 li.barex-card .barex-card-title { margin: 0 0 3px; }
.barex-shop-v2 li.barex-card .barex-card-body h3 { margin: 0; }
.barex-shop-v2 li.barex-card .barex-card-body .pwb-brands-in-loop {
	margin: 0 0 5px;
	font-size: 9px;
	letter-spacing: .01em;
	line-height: 1.4;
}
.barex-shop-v2 li.barex-card .barex-card-footer { margin-top: 0; }


/* ==========================================================================
 * QA round 2 — 2026-08-17
 * ========================================================================== */

/* ---- type ----
 * The !important here is a counter, not a habit. WP Additional CSS carries an
 * unscoped `h1, h2, h3 { font-weight: 400 !important; }` and a
 * `.wtbx-product-title { font-weight: 400 !important; }`, and no amount of
 * specificity beats !important. Scoping those two rules to
 * body:not(.barex-shop-v2) would have been the tidier fix, but the first one
 * governs every heading on the site, so switching it off across the whole shop
 * archive to restyle a card is the larger risk. This is deliberately confined
 * to the card title. */
.barex-shop-v2 li.barex-card .barex-card-body h3,
.barex-shop-v2 li.barex-card .barex-card-title h3,
.barex-shop-v2 li.barex-card .barex-card-title h3 a {
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.3;
}

/* The centring came from a rule in WP Additional CSS written for the old card,
   where the brand was absolutely positioned over the image. That rule is now
   scoped to body:not(.barex-shop-v2) so it still applies when the redesign is
   switched off — this is the rollback design doing its job rather than a
   delete. What remains here is only the V2 presentation. */
.barex-shop-v2 li.barex-card .barex-card-body .pwb-brands-in-loop {
	font-size: 10px;
	letter-spacing: .01em;
	padding: 0;
	margin: 0 0 6px;
	text-align: left;
}

/* The name and its brand are one unit; they were reading as two. */
.barex-shop-v2 li.barex-card .barex-card-title { margin: 0 0 1px; }

/* ---- hover ----
 * One transform on the card and a slight lift on the image. Deliberately small:
 * a grid of 25 cards amplifies motion, and anything springier reads as noise.
 * Pointer devices only, and off entirely under prefers-reduced-motion. */
/* The image no longer moves on hover. It was dropped on request: it added
   nothing at this card size, and `will-change: transform` on the crop promoted
   it to its own compositing layer, which resampled the product shots and left
   them looking soft. The button lift stays — that one is a real affordance. */
@media (hover: hover) {
	.barex-shop-v2 li.barex-card .barex-card-footer .button:not(.cart-label) {
		transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, background-color .2s ease;
	}

	.barex-shop-v2 li.barex-card:hover .barex-card-footer .button:not(.cart-label) {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px -4px rgba(16,16,16,.28);
	}
}

@media (prefers-reduced-motion: reduce) {
	.barex-shop-v2 li.barex-card .barex-card-footer .button:not(.cart-label) {
		transition: none !important;
		transform: none !important;
	}
}

/* ---- the gallery hover image ----
 * Removed rather than restyled. The theme scales the secondary image to its own
 * ratio, so it cross-faded at a different size and the two briefly overlapped
 * into a doubled picture. One clean image beats a swap that has to be fought. */
.barex-shop-v2 .barex-card-media .wtbx-product-secondary { display: none; }

/* Pagination is our own template now (woocommerce/loop/pagination.php) — the
   theme's markup used .page-numbers for both number links and arrow wrappers,
   which is what made the row look crooked once numbers were shown on phones. */

/* ---- added-to-cart toast ---- */
.barex-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 16px);
	z-index: 100003;
	display: flex;
	align-items: center;
	gap: 9px;
	max-width: calc(100vw - 32px);
	padding: 12px 18px;
	border-radius: 3px;
	background: #101010;
	color: #fff;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
	opacity: 0;
	visibility: hidden;
	transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
	box-shadow: 0 8px 24px -10px rgba(0,0,0,.5);
}

.barex-toast.is-open {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition: opacity .22s ease, transform .22s ease, visibility 0s linear 0s;
}

.barex-toast svg { width: 17px; height: 17px; flex: 0 0 auto; }
.barex-toast a { color: #fff; text-decoration: underline; margin-left: 4px; }

@media (prefers-reduced-motion: reduce) {
	.barex-toast { transition: opacity .01s !important; transform: translate(-50%, 0) !important; }
}

/* The theme reserves two lines on .wtbx-product-title so that floated cards
   stay aligned — 40px of box around a 20px heading, which read as a gap
   between the name and the brand. CSS grid aligns rows on its own, so the
   reservation is not needed and titles can be their real height. */
/* Two lines reserved on purpose, so every card in a row ends at the same place.
   A third line would push the price out of alignment, so titles clamp at two
   with an ellipsis — the name is important enough to give it the room, and
   important enough not to let it silently break the grid either. */
.barex-shop-v2 li.barex-card .barex-card-title {
	min-height: 40px;
	overflow: hidden;
}

.barex-shop-v2 li.barex-card .barex-card-title h3 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ==========================================================================
 * QA round 3 — 2026-08-17
 * ========================================================================== */

/* ---- hover: scale the crop, not the <img> ----
 * The theme owns the <img> — it carries a lazyload reveal transition on
 * opacity/visibility and its own transform handling. Animating the crop box
 * instead keeps our transform off an element the theme is already driving,
 * and overflow:hidden on the crop gives the zoom a clean edge. */
/* ---- button states ----
 * Pressed: black plate, white mark. In cart: white plate, black mark (Woo adds
 * .added). The icon is an icon-font glyph, so it takes `color` — it has to be
 * set on the <i> as well, or the mark stays dark on a dark plate. */
.barex-shop-v2 .barex-card-footer .button:not(.cart-label):active,
.barex-shop-v2 .barex-card-footer .button:not(.cart-label):active i {
	background-color: #101010;
	color: #fff;
}

.barex-shop-v2 .barex-card-footer .button:not(.cart-label):active i {
	background-color: transparent;
}

.barex-shop-v2 .barex-card-footer .button.added:not(.cart-label),
.barex-shop-v2 .barex-card-footer .button.added:not(.cart-label) i {
	background-color: #fff;
	color: #101010;
}

.barex-shop-v2 .barex-card-footer .button.added:not(.cart-label) i {
	background-color: transparent;
}

/* WooCommerce appends its own "Krepšelis" link after a successful AJAX add.
   The toast already says it, and in a grid the extra link lands under the card
   and pushes the row. */
.barex-shop-v2 li.barex-card a.added_to_cart { display: none !important; }

/* ---- toast: fade rather than cut ---- */
.barex-toast {
	transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}

.barex-toast.is-open {
	transition: opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}

/* ---- quick-pick sheet: name first, brand under it ---- */
.barex-pick-title {
	margin: 0 0 1px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
}

.barex-pick-brand {
	margin: 0 0 10px;
	font-size: 10px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #8a8a8a;
}

.barex-pick-brand[hidden] { display: none; }
.barex-pick-sub { display: none; }


/* ---------------- pagination ---------------- */

.barex-shop-v2 .barex-pagination {
	margin: 34px 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	border: 0;
	float: none;
	clear: both;
}

.barex-shop-v2 .barex-pagination-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.barex-shop-v2 .barex-pagination-list li { margin: 0; padding: 0; list-style: none; }

/* One rule for every item, whatever kind it is — that is the whole point of
   rendering it ourselves. */
.barex-shop-v2 .barex-pagination-list .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid #e4e4e2;
	border-radius: 50%;
	background: #fff;
	color: #101010;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.barex-shop-v2 .barex-pagination-list .page-numbers.current {
	background: #101010;
	border-color: #101010;
	color: #fff;
	font-weight: 600;
}

.barex-shop-v2 .barex-pagination-list .page-numbers.dots {
	border-color: transparent;
	background: none;
	width: 22px;
	color: #a0a0a0;
}

.barex-shop-v2 .barex-pagination-list a.page-numbers:active {
	border-color: #101010;
}

@media (hover: hover) {
	.barex-shop-v2 .barex-pagination-list a.page-numbers:hover { border-color: #101010; }
}

.barex-shop-v2 .barex-page-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.barex-shop-v2 .barex-page-arrow svg { width: 15px; height: 15px; display: block; }
.barex-shop-v2 .barex-page-prev svg { transform: rotate(180deg); }

.barex-shop-v2 .barex-pagination-count {
	margin: 0;
	font-size: 11.5px;
	color: #8a8a8a;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 400px) {
	.barex-shop-v2 .barex-pagination-list { gap: 5px; }
	.barex-shop-v2 .barex-pagination-list .page-numbers { width: 35px; height: 35px; font-size: 12.5px; }
}

/* ==========================================================================
 * P2 — the filters: category rail, applied row, bottom sheet.
 *
 * Markup comes from inc/front/catalog/filters.php and filters/barex-*.php.
 * Still scoped under body.barex-shop-v2, so the rollback flag covers this
 * phase exactly as it covers P1: switch it off and every rule below stops
 * matching, Filter Everything renders its own templates into the theme
 * sidebar again, and nothing here has to be deleted.
 *
 * Two families of selector appear here. barex-* are ours and safe to rename.
 * wpc-* belong to the plugin and are load-bearing — its JavaScript finds the
 * apply button, the live counters and the term checkboxes by those names — so
 * they are styled, never renamed, and never restructured in the templates.
 * ========================================================================== */

.barex-shop-v2 .barex-filters {
	margin: 0 0 20px;
}

/* ---------------- the category rail ----------------
 * One row, one tap per category, scrolls sideways when it does not fit rather
 * than wrapping into a second row that pushes the grid down the page. The
 * archive already starts ~900px in on a phone; the rail must not add to that.
 */

.barex-shop-v2 .barex-rail {
	margin: 0 0 14px;
}

.barex-shop-v2 .barex-rail-list {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 2px 0 8px;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #d8d8d6 transparent;
}

/* A quiet scrollbar: present enough to signal "there is more", not a UI element. */
.barex-shop-v2 .barex-rail-list::-webkit-scrollbar { height: 3px; }
.barex-shop-v2 .barex-rail-list::-webkit-scrollbar-track { background: transparent; }
.barex-shop-v2 .barex-rail-list::-webkit-scrollbar-thumb { background: #e2e2e0; border-radius: 3px; }

.barex-shop-v2 .barex-rail-tile {
	flex: 0 0 auto;
	scroll-snap-align: start;
	margin: 0;
}

.barex-shop-v2 .barex-rail-tile > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 5px;
	width: 82px;
	min-height: 84px;
	padding: 11px 6px 9px;
	border: 1px solid #ececea;
	border-radius: 11px;
	background: #fff;
	color: #101010;
	text-decoration: none !important;
	text-align: center;
	transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

/* The icon library is drawn on a 24x24 box with a 1.1 hairline stroke and a
 * tonal fill under it. Sizing the <svg> is all that is needed — the marks are
 * currentColor throughout, so they follow the tile's colour in every state. */
.barex-shop-v2 .barex-rail-icon {
	width: 26px;
	height: 26px;
	display: block;
	flex: 0 0 auto;
}

.barex-shop-v2 .barex-rail-name {
	font-size: 10.5px;
	line-height: 1.25;
	font-weight: 500;
	letter-spacing: .005em;
	/* Two lines, then ellipsis: "Aliejai ir kremai" must not make one tile
	 * taller than its neighbours and break the row's baseline. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.barex-shop-v2 .barex-rail-count {
	font-size: 9.5px;
	line-height: 1;
	color: #9a9a9a;
	font-variant-numeric: tabular-nums;
}

.barex-shop-v2 .barex-rail-tile.is-on > a {
	border-color: #101010;
	background: #101010;
	color: #fff;
}

.barex-shop-v2 .barex-rail-tile.is-on .barex-rail-count { color: rgba(255,255,255,.62); }

/* Nothing behind this tile in the current filter context. Dimmed rather than
 * removed — a rail whose tiles disappear as you filter is disorienting, and
 * the count next to the name already explains the state. */
.barex-shop-v2 .barex-rail-tile.is-empty > a {
	opacity: .38;
}

@media (hover: hover) {
	.barex-shop-v2 .barex-rail-tile:not(.is-on) > a:hover {
		border-color: #cfcfcc;
		background: #fafaf9;
	}
}

@media (min-width: 1000px) {
	.barex-shop-v2 .barex-rail-list { gap: 9px; }
	.barex-shop-v2 .barex-rail-tile > a { width: 90px; min-height: 88px; }
	.barex-shop-v2 .barex-rail-name { font-size: 11px; }
}

/* ---------------- applied filters ----------------
 * Always in the DOM, even with nothing selected: the plugin refills this list
 * over AJAX after a recount, so removing it when empty would leave the first
 * selection nowhere to appear. It collapses to zero height instead. */

.barex-shop-v2 .barex-filters-applied {
	margin: 0 0 4px;
}

.barex-shop-v2 ul.barex-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.barex-shop-v2 ul.barex-chips.wpc-empty-chips-container { display: none; }

.barex-shop-v2 .barex-chips .wpc-filter-chip { margin: 0; }

.barex-shop-v2 .barex-chips .wpc-filter-chip > a,
.barex-shop-v2 .barex-chips .wpc-filter-chip > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px 5px 11px;
	border: 1px solid #e4e4e2;
	border-radius: 999px;
	background: #f7f7f6;
	color: #101010;
	font-size: 11.5px;
	line-height: 1.4;
	text-decoration: none !important;
	transition: border-color .18s ease, background-color .18s ease;
}

.barex-shop-v2 .barex-chips .wpc-chip-content {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.barex-shop-v2 .barex-chips .wpc-chip-remove-icon {
	display: inline-flex;
	align-items: center;
	color: #9a9a9a;
}

.barex-shop-v2 .barex-chips .barex-chip-x { width: 11px; height: 11px; display: block; }

/* "Atstatyti" — the plugin's own reset chip, given the opposite weight so it
 * does not read as one more active filter. The class is wpc-chip-reset-ALL;
 * wpc-chip-reset alone matches nothing here. */
.barex-shop-v2 .barex-chips .wpc-chip-reset-all > a,
.barex-shop-v2 .barex-chips .wpc-chip-reset-all > span,
.barex-shop-v2 .barex-chips .wpc-chip-reset > a,
.barex-shop-v2 .barex-chips .wpc-chip-reset > span {
	background: transparent;
	border-color: transparent;
	color: #8a8a8a;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

@media (hover: hover) {
	.barex-shop-v2 .barex-chips .wpc-filter-chip > a:hover {
		border-color: #101010;
		background: #fff;
	}
	.barex-shop-v2 .barex-chips .wpc-filter-chip > a:hover .wpc-chip-remove-icon { color: #101010; }
	.barex-shop-v2 .barex-chips .wpc-chip-reset > a:hover { color: #101010; background: transparent; border-color: transparent; }
}

/* ---------------- the trigger, in P1's toolbar ----------------
 * The plugin's own stylesheet hides .wpc-filters-open-button-container outright
 * and only reveals it under 768px for its mobile popup. We show it at every
 * width, because the sidebar the desktop filters used to live in is gone. */

.barex-shop-v2 .barex-shop-toolbar .barex-filters-trigger {
	order: 1;
	margin: 0;
}

.barex-shop-v2 .barex-filters-button-wrap {
	display: block !important;
	margin: 0 !important;
}

.barex-shop-v2 a.barex-filters-button {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 8px 14px !important;
	border: 1px solid #101010 !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: #101010 !important;
	font-size: 12.5px !important;
	font-weight: 500;
	line-height: 1.4 !important;
	text-decoration: none !important;
}

.barex-shop-v2 a.barex-filters-button .wpc-button-inner {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.barex-shop-v2 .barex-filters-icon { width: 16px; height: 16px; display: block; }

@media (hover: hover) {
	.barex-shop-v2 a.barex-filters-button:hover { background: #101010 !important; color: #fff !important; }
}

/* ---- the floating trigger (see js/barex-shop.js) ----
 * A second Filtrai button, fixed to the bottom of the viewport, shown only
 * while the toolbar one is scrolled out of sight. Black on white is the
 * toolbar button's hover state; here it is the resting state so the pill
 * reads as a control floating over content rather than part of it.
 * Visibility is transitioned with a delay so the fade-out completes before
 * the element stops taking clicks, and the fade-in starts from a few px
 * lower — the same entrance the added-to-cart toast makes. */
.barex-shop-v2 .barex-filters-float {
	position: fixed;
	left: 50%;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: 100000;              /* under the scrim (100001), sheet (100002), toast (100003) */
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 11px 18px;
	border: 1px solid #101010;
	border-radius: 999px;
	background: #101010;
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: inherit;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 8px 24px -10px rgba(0,0,0,.5);
	-webkit-appearance: none;
	appearance: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(-50%, 16px);
	transition: opacity .32s ease, transform .32s ease, visibility 0s linear .32s;
}

.barex-shop-v2 .barex-filters-float.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
	transition: opacity .32s ease, transform .32s ease, visibility 0s linear 0s;
}

.barex-shop-v2 .barex-filters-float .wpc-button-inner {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.barex-shop-v2 .barex-filters-float .barex-filters-icon { width: 16px; height: 16px; display: block; }

/* Out of the way while the sheet is open (it would sit under the scrim
 * anyway), while the added-to-cart toast occupies the same spot, and while
 * the Complianz cookie banner is up on a first visit (it adds cmplz-show to
 * the banner until a choice is made). */
body.barex-shop-v2.barex-filters-open .barex-filters-float.is-visible,
body.barex-shop-v2:has(.barex-toast.is-open) .barex-filters-float.is-visible,
body.barex-shop-v2:has(.cmplz-cookiebanner.cmplz-show) .barex-filters-float.is-visible {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(-50%, 16px);
	transition: opacity .32s ease, transform .32s ease, visibility 0s linear .32s;
}

@media (hover: hover) {
	.barex-shop-v2 .barex-filters-float:hover { background: #fff; color: #101010; }
}

.barex-shop-v2 .barex-filters-float:focus-visible { outline: 2px solid #101010; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.barex-shop-v2 .barex-filters-float { transition: opacity .01s, visibility 0s linear .01s; transform: translate(-50%, 0); }
	.barex-shop-v2 .barex-filters-float.is-visible { transition: opacity .01s, visibility 0s; }
}

/* The result count keeps the left, the trigger sits beside it, sorting stays
 * right — one row, in reading order. */
.barex-shop-v2 .barex-shop-toolbar .woocommerce-result-count { order: 0; }
.barex-shop-v2 .barex-shop-toolbar .woocommerce-ordering { order: 2; margin-left: auto; }

/* ---------------- the sheet ----------------
 * Same geometry language as P1's quick-pick sheet, deliberately: two sheets
 * that slide from the same edge at different speeds read as two different
 * systems. */

.barex-shop-v2 .barex-filters-scrim {
	position: fixed;
	inset: 0;
	z-index: 100001;
	background: rgba(16,16,16,.38);
	opacity: 0;
	visibility: hidden;
	transition: opacity .24s ease, visibility 0s linear .24s;
}

.barex-shop-v2 .barex-filters-scrim.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .24s ease, visibility 0s linear 0s;
}

.barex-shop-v2 .barex-filters-sheet[hidden] { display: block; }

.barex-shop-v2 .barex-filters-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100002;
	display: flex;
	flex-direction: column;
	max-height: 84vh;
	background: #fff;
	border-radius: 14px 14px 0 0;
	box-shadow: 0 -10px 30px -18px rgba(0,0,0,.5);
	transform: translate3d(0, 100%, 0);
	visibility: hidden;
	transition: transform .28s cubic-bezier(.22,.61,.36,1), visibility 0s linear .28s;
}

.barex-shop-v2 .barex-filters-sheet.is-open {
	transform: none;
	visibility: visible;
	transition: transform .28s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s;
}

.barex-shop-v2 .barex-sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px 10px;
	border-bottom: 1px solid #f0f0ee;
	flex: 0 0 auto;
}

.barex-shop-v2 .barex-sheet-title {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -.01em;
}

.barex-shop-v2 .barex-sheet-close {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #101010;
	cursor: pointer;
}

.barex-shop-v2 .barex-sheet-close svg { width: 17px; height: 17px; display: block; }

.barex-shop-v2 .barex-sheet-body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 4px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}

/* On a wide screen a full-width sheet would stretch a checkbox list across
 * 1400px. It becomes a panel on the right instead — same object, same motion,
 * bounded width. */
@media (min-width: 900px) {
	.barex-shop-v2 .barex-filters-sheet {
		left: auto;
		top: 0;
		width: 380px;
		max-height: none;
		border-radius: 0;
		transform: translate3d(100%, 0, 0);
		box-shadow: -10px 0 34px -20px rgba(0,0,0,.5);
	}
}

/* ---------------- filter sections inside the sheet ---------------- */

.barex-shop-v2 .barex-sheet-body .wpc-filters-main-wrap {
	display: block;
	position: static;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

/* The plugin prints its own open button inside the widget as well; ours lives
 * in the toolbar, and a second one inside the sheet that opens the sheet you
 * are already in is just confusing. */
.barex-shop-v2 .barex-sheet-body .wpc-filters-open-button-container,
.barex-shop-v2 .barex-sheet-body .wpc-filter-set-widget-title,
.barex-shop-v2 .barex-filters .wpc-filters-overlay {
	display: none !important;
}

.barex-shop-v2 .barex-filter {
	padding: 14px 0;
	border-bottom: 1px solid #f2f2f0;
}

.barex-shop-v2 .barex-filter:last-of-type { border-bottom: 0; }

.barex-shop-v2 .barex-sheet-body .wpc-filter-header .widget-title,
.barex-shop-v2 .barex-sheet-body .wpc-filter-title {
	margin: 0 0 2px;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: .02em;
	text-transform: none;
}

.barex-shop-v2 .barex-sheet-body .wpc-filter-title button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 6px 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.barex-shop-v2 .barex-sheet-body .wpc-filters-ul-list {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.barex-shop-v2 .barex-sheet-body .wpc-term-item {
	margin: 0;
	padding: 0;
}

.barex-shop-v2 .barex-sheet-body .wpc-term-item-content-wrapper {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 0;
}

.barex-shop-v2 .barex-sheet-body .wpc-term-item label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex: 1 1 auto;
	margin: 0;
	font-size: 13px;
	line-height: 1.35;
	cursor: pointer;
}

.barex-shop-v2 .barex-sheet-body .wpc-term-item label a {
	color: #101010;
	text-decoration: none !important;
}

/* The live count. In apply-button mode the plugin rewrites this number in the
 * browser after every tick — it is the "live counts" half of the design, and
 * it comes from the plugin, not from us. */
.barex-shop-v2 .barex-sheet-body .wpc-term-count {
	color: #9a9a9a;
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
}

.barex-shop-v2 .barex-sheet-body .wpc-term-selected label a { font-weight: 600; }

.barex-shop-v2 .barex-sheet-body .wpc-term-disabled,
.barex-shop-v2 .barex-sheet-body .wpc-term-item.wpc-term-count-0 { opacity: .42; }

.barex-shop-v2 .barex-sheet-body input[type="checkbox"] {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: #101010;
	cursor: pointer;
}

/* ---------------- the sheet's footer ---------------- */

.barex-shop-v2 .barex-filters-sheet .wpc-filters-widget-controls-container {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid #f0f0ee;
	background: #fff;
	position: sticky;
	bottom: 0;
}

.barex-shop-v2 a.barex-sheet-apply {
	flex: 1 1 auto;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 12px 18px !important;
	border: 1px solid #101010 !important;
	border-radius: 999px !important;
	background: #101010 !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 500;
	text-decoration: none !important;
}

.barex-shop-v2 a.barex-sheet-cancel {
	flex: 0 0 auto;
	color: #8a8a8a !important;
	font-size: 12.5px !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
}

.barex-shop-v2 .barex-posts-found {
	margin: 0;
	padding: 8px 0 0;
	font-size: 12px;
	color: #8a8a8a;
}

.barex-shop-v2 .barex-posts-found p { margin: 0; }

/* Sheet open: the page behind must not scroll under it. overflow:hidden is
 * the desktop half; iOS needs the body pinned too, which barex-shop.js does
 * (position:fixed at the current offset, restored on close). touch-action on
 * the scrim stops a swipe over it from reaching the page. */
body.barex-filters-open { overflow: hidden; }
.barex-shop-v2 .barex-filters-scrim { touch-action: none; }
.barex-shop-v2 .barex-filters-sheet { overscroll-behavior: contain; }

@media (prefers-reduced-motion: reduce) {
	.barex-shop-v2 .barex-filters-sheet,
	.barex-shop-v2 .barex-filters-scrim {
		transition: none;
	}
	.barex-shop-v2 .barex-rail-tile > a { transition: none; }
}

/* ---- duplicates the widget brings with it ----
 * The plugin renders three things inside the widget that we already provide
 * outside it, because we placed its pieces ourselves: its own chips list, its
 * own Apply/Reset pair, and its own open button. All three are hidden rather
 * than removed from the markup — the plugin's JavaScript keeps them in sync
 * with the live recount, and an element it expects to update must exist. Both
 * apply buttons carry the identical href (verified: each resolves to
 * /parduotuve/prekes-linija-techni-lab/ after ticking that brand), so hiding
 * one loses nothing. */
.barex-shop-v2 .barex-sheet-body .barex-chips,
.barex-shop-v2 .barex-sheet-body .wpc-inner-widget-chips-wrapper,
.barex-shop-v2 .barex-sheet-body .wpc-filter-layout-submit-button,
.barex-shop-v2 .barex-sheet-body .wpc-filters-widget-top-container {
	display: none !important;
}

/* "Atstatyti" belongs at the end of the applied row, after the things it
 * resets. The plugin prints it first. */
.barex-shop-v2 .barex-chips .wpc-filter-chip { order: 0; }
.barex-shop-v2 .barex-chips .wpc-chip-reset-all { order: 1; }

/* The footer is the sheet's, not a filter section's. */
.barex-shop-v2 .barex-filters-sheet .wpc-filters-widget-controls-wrapper {
	flex: 0 0 auto;
	background: #fff;
}

/* ---- three fixes measured in the sheet ---- */

/* The plugin's posts-found line, hidden inside the sheet.
 *
 * On an unfiltered archive its count is NULL and the template falls back to a
 * non-breaking space, so it occupied 41px of nothing at the top of the sheet
 * and read as a gap under the header. It is also redundant here: the footer's
 * "Rodyti (110)" is the same number, kept live by the same recount, and one
 * count per sheet is enough. Hidden rather than dropped from the markup —
 * it carries data-found, which the plugin's JavaScript reads. */
.barex-shop-v2 .barex-sheet-body .wpc-posts-found {
	display: none !important;
}

/* The footer sticks to the bottom of the scrolling body, so it must paint over
 * the terms passing beneath it — full-bleed, because the body has 16px of side
 * padding and a footer that stops short of the edges looks like a mistake. */
.barex-shop-v2 .barex-filters-sheet .wpc-filters-widget-controls-container {
	margin: 0 -16px;
	padding-left: 16px;
	padding-right: 16px;
	box-shadow: 0 -6px 14px -12px rgba(0,0,0,.45);
}

.barex-shop-v2 .barex-filters-sheet .wpc-filters-widget-controls-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 0;
}

/* "Rodyti" and its count are two flex items, and flex drops the whitespace text
 * node between them — which is why it rendered as "Rodyti(110)". */
.barex-shop-v2 a.barex-sheet-apply { gap: 5px; }

/* ==========================================================================
 * Retired: the Filter Everything custom-CSS box.
 *
 * These four rules lived in Filter Everything → Settings → custom CSS, a
 * second hidden place where shop appearance was configured and one a git tag
 * cannot restore. They are moved here verbatim, scoped to
 * body:not(.barex-shop-v2), and the plugin's box is emptied — the same
 * treatment P1 gave the superseded rules in WP Additional CSS, and for the same
 * reason: nothing is deleted, so the rollback flag still restores exactly what
 * the site looked like before.
 *
 * They are superseded rather than wrong. V2 draws its own trigger button and
 * its own term rows, and the toolbar puts the sort control and the button on
 * one row at every width, so the 768px block has nothing left to correct.
 *
 * Original: /root/stage-setup/fe-custom-css-backup-2026-08-17.css (466 bytes).
 * ========================================================================== */

body:not(.barex-shop-v2) .wpc-filters-main-wrap li.wpc-term-item a {
	padding-left: 22px;
}

body:not(.barex-shop-v2) .wpc-filters-open-widget {
	border: 1px solid #f3f3f3 !important;
	border-radius: 25px !important;
	color: #000000 !important;
	font-weight: 500 !important;
}

@media (max-width: 768px) {
	body:not(.barex-shop-v2) .wpc-filters-open-widget,
	body:not(.barex-shop-v2) .woocommerce-ordering {
		width: 100%;
		margin-bottom: 5px;
	}
}

/* ==========================================================================
 * P2 — owner QA round 1, 2026-08-17
 * ========================================================================== */

/* ---- tiles: one height, whatever the name does ----
 * "Aliejai ir Kremai", "Apsauga nuo karščio", "Plaukų kvepalai" and
 * "Džiovintuvai ir kiti prietaisai" wrap to two lines and were growing their
 * tile, so the row had two different heights in it. The name box now reserves
 * two lines always — empty on the short ones — and the count is pinned to the
 * bottom, so every tile is the same height and every count sits on the same
 * line across the row. */
.barex-shop-v2 .barex-rail-list {
	align-items: stretch;
}

.barex-shop-v2 .barex-rail-tile > a {
	height: 100%;
	justify-content: flex-start;
	gap: 6px;
}

.barex-shop-v2 .barex-rail-name {
	/* 2 lines × 1.25 line-height at 10.5px, reserved rather than measured. */
	min-height: calc(10.5px * 1.25 * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.barex-shop-v2 .barex-rail-count {
	margin-top: auto;
}

/* ---- desktop: rows, not a scrollbar ----
 * A horizontal scrollbar is the right affordance on a phone and the wrong one
 * on a 1440px screen, where there is room to show every category at once and a
 * sideways scroller reads as something broken. Wraps from 1000px up; below
 * that it keeps scrolling. */
@media (min-width: 1000px) {
	.barex-shop-v2 .barex-rail-list {
		flex-wrap: wrap;
		overflow-x: visible;
		row-gap: 9px;
		padding-bottom: 2px;
		scroll-snap-type: none;
	}
}

@media (min-width: 1000px) {
	.barex-shop-v2 .barex-rail-name { min-height: calc(11px * 1.25 * 2); }
}

/* ---- the term count sits next to its name ----
 * It was pushed to the far right of the row by `justify-content: space-between`,
 * which put 200px of white between "OLIOSETA NOURISH" and "(14)" and made the
 * pair hard to read as one thing. */
.barex-shop-v2 .barex-sheet-body .wpc-term-item label {
	justify-content: flex-start;
	gap: 7px;
}

.barex-shop-v2 .barex-sheet-body .wpc-term-count {
	margin-left: 0;
}

/* ---- the sheet must not scroll sideways ----
 * Something inside the plugin's markup is a few pixels wider than the panel —
 * enough that a vertical flick also nudged the panel horizontally. There is
 * nothing here that should ever scroll on the x axis. */
.barex-shop-v2 .barex-sheet-body {
	overflow-x: hidden;
	overscroll-behavior: contain;
}

.barex-shop-v2 .barex-filters-sheet,
.barex-shop-v2 .barex-sheet-body .wpc-filters-main-wrap,
.barex-shop-v2 .barex-sheet-body .wpc-filters-widget-content,
.barex-shop-v2 .barex-sheet-body .wpc-filters-widget-containers-wrapper,
.barex-shop-v2 .barex-sheet-body .wpc-filters-scroll-container,
.barex-shop-v2 .barex-sheet-body .wpc-filters-widget-wrapper {
	max-width: 100%;
	overflow-x: hidden;
}

/* ---- the footer sits at the bottom of the panel, however short the list ----
 *
 * The plugin prints Apply/Cancel as the last row INSIDE its filter list, so with
 * two short filters they floated halfway up the panel. `position: sticky` cannot
 * fix that: a sticky element still stops where its content stops.
 *
 * Moving the row into a footer element of our own DID fix the position and broke
 * applying — the plugin looks up its apply button and live counter within the
 * widget container, so outside it they stopped being updated (href stuck on the
 * unfiltered URL, count stuck at 110). Verified, then reverted.
 *
 * So the row stays exactly where the plugin puts it, and the panel becomes a
 * flex column all the way down to it. Each wrapper passes the available height
 * to the next, the list takes the slack, and `margin-top: auto` pushes the row
 * to the bottom — which also means it stops needing to be sticky at all. The
 * `min-height: 0` on each level is what allows the list to scroll inside a flex
 * column rather than stretching its parent.
 *
 * The background is opaque and the padding runs into the safe area, because the
 * transparent strip under it let the page show through beneath the buttons on
 * phones with a home indicator.
 */
.barex-shop-v2 .barex-sheet-body,
.barex-shop-v2 .barex-sheet-body > .widget,
.barex-shop-v2 .barex-sheet-body .wpc-filters-main-wrap,
.barex-shop-v2 .barex-sheet-body .wpc-filters-widget-content,
.barex-shop-v2 .barex-sheet-body .wpc-filters-widget-containers-wrapper,
.barex-shop-v2 .barex-sheet-body .wpc-filters-scroll-container,
.barex-shop-v2 .barex-sheet-body .wpc-filters-widget-wrapper {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.barex-shop-v2 .barex-filters-sheet .wpc-filters-widget-controls-container {
	flex: 0 0 auto;
	margin: 0 -16px;
	margin-top: auto;
	padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid #f0f0ee;
	background: #fff;
	position: static;
	box-shadow: 0 -6px 14px -12px rgba(0,0,0,.45);
}

.barex-shop-v2 .barex-filters-sheet .wpc-filters-widget-controls-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 0;
	flex: 0 0 auto;
}

.barex-shop-v2 .barex-sheet-body .barex-sheet-apply-wrap { flex: 1 1 auto; }
.barex-shop-v2 .barex-sheet-body .barex-sheet-cancel-wrap { flex: 0 0 auto; }

/* The filter sections are the part that scrolls; they must not be stretched by
 * the flex column above them. */
.barex-shop-v2 .barex-sheet-body .wpc-filters-section {
	flex: 0 0 auto;
}

/* ---- the panel opens from the LEFT on desktop ----
 * Where the filters used to live, and where this catalogue's shoppers — and
 * most shops — expect them. The phone sheet still comes up from the bottom;
 * that is the platform convention there, not a habit. */
@media (min-width: 900px) {
	.barex-shop-v2 .barex-filters-sheet {
		left: 0;
		right: auto;
		transform: translate3d(-100%, 0, 0);
		box-shadow: 10px 0 34px -20px rgba(0,0,0,.5);
	}
}

/* The scrolling area carries no bottom padding of its own: the controls row
 * below it provides the spacing, and any padding here just leaves a strip
 * between the buttons and the edge of the sheet. */
.barex-shop-v2 .barex-sheet-body {
	padding-bottom: 0;
}

/* The apply button takes the width the footer gives it. Its wrapper is the flex
 * item; the anchor inside is inline-flex, so it needs to be told to fill the
 * wrapper or it shrinks back to the width of its own label. */
.barex-shop-v2 .barex-sheet-body .barex-sheet-apply-wrap {
	display: flex;
}

.barex-shop-v2 a.barex-sheet-apply {
	flex: 1 1 auto;
	width: 100%;
}

/* ==========================================================================
 * P2 — owner QA round 2: the rail, tightened.
 *
 * Same three tiles, less of everything else. The count moves to the top of the
 * tile and the name takes the space underneath, which does two things at once:
 * it removes the fixed two-line block that left a hole under every one-line
 * name, and it lets the tile be shorter without crowding the long names.
 * ========================================================================== */

.barex-shop-v2 .barex-rail-tile > a {
	width: 76px;
	min-height: 78px;
	padding: 7px 5px 8px;
	gap: 3px;
	border-radius: 10px;
	justify-content: flex-start;
}

/* Top of the tile, and quiet — it is a detail about the label, not the label. */
.barex-shop-v2 .barex-rail-count {
	order: -1;
	margin: 0 0 1px;
	font-size: 9px;
	line-height: 1;
	letter-spacing: .01em;
}

.barex-shop-v2 .barex-rail-icon {
	width: 23px;
	height: 23px;
}

/* The label box takes whatever height is left and centres the name in it, so a
 * one-line name sits in the middle of the space two lines would occupy instead
 * of hugging the top and leaving a gap beneath. Two-line names fill it. */
.barex-shop-v2 .barex-rail-label {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 0;
}

.barex-shop-v2 .barex-rail-name {
	min-height: 0;
	font-size: 10px;
	line-height: 1.2;
	letter-spacing: 0;
}

@media (min-width: 1000px) {
	.barex-shop-v2 .barex-rail-tile > a { width: 82px; min-height: 80px; }
	.barex-shop-v2 .barex-rail-name { font-size: 10.5px; }
	.barex-shop-v2 .barex-rail-icon { width: 24px; height: 24px; }
}

/* ---- even rows on desktop ----
 * Wrapping fills each row to capacity and dumps the remainder on the last one:
 * 21 tiles came out as 13 + 8, which reads as a mistake rather than a layout.
 * A grid lets js/barex-shop.js set a balanced column count (11 + 10 for the
 * same 21), and the tiles align in real columns instead of merely queueing.
 * Below 1000px the rail still scrolls in one row, where that is correct. */
@media (min-width: 1000px) {
	.barex-shop-v2 .barex-rail-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
		justify-content: start;
		column-gap: 8px;
		row-gap: 8px;
	}

	.barex-shop-v2 .barex-rail-tile > a { width: 100%; }
}

/* Grid rows size to their own content, so a row holding a two-line name came
 * out 2px taller than a row of one-line names. `1fr` makes every row the height
 * of the tallest, which is what "all the tiles are the same" has to mean once
 * there is more than one row. */
@media (min-width: 1000px) {
	.barex-shop-v2 .barex-rail-list { grid-auto-rows: 1fr; }
}

/* The count belongs in the tile's top-LEFT corner, not centred over the icon.
 * Centred it read as a heading for the tile; in the corner it reads as a
 * quantity badge, which is what it is — and it stops competing with the icon
 * for the middle of the tile. */
.barex-shop-v2 .barex-rail-count {
	align-self: flex-start;
	margin-left: 1px;
}

/* ==========================================================================
 * P2 — owner QA round 4: nine tiles plus "Visos", and tiles inside the sheet.
 *
 * The rail was showing all 21 categories on desktop, which read as clutter. It
 * now shows the first nine in the owner's order plus a tenth tile that opens
 * the sheet, where every category lives as the same tile. Capping alone would
 * have hidden categories; capping with a door to the rest makes it a "top nine
 * and everything else" row.
 *
 * The phone rail is untouched: it scrolls horizontally, so every tile is
 * already reachable and an overflow tile would be a dead end.
 * ========================================================================== */

/* The overflow tile exists in the markup everywhere and is shown only where the
 * cap applies. */
.barex-shop-v2 .barex-rail-more { display: none; }

@media (min-width: 1000px) {
	.barex-shop-v2 .barex-rail-tile:nth-child(n+10):not(.barex-rail-more) { display: none; }
	.barex-shop-v2 .barex-rail-more { display: block; }
}

/* The button has to look exactly like the anchors beside it. */
.barex-shop-v2 .barex-rail-more-btn {
	font: inherit;
	cursor: pointer;
	text-align: center;
	appearance: none;
	-webkit-appearance: none;
}

.barex-shop-v2 .barex-rail-more-btn,
.barex-shop-v2 .barex-rail-tile > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 3px;
	width: 76px;
	min-height: 78px;
	padding: 7px 5px 8px;
	border: 1px solid #ececea;
	border-radius: 10px;
	background: #fff;
	color: #101010;
	text-decoration: none !important;
	transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

/* Dashed, so "Visos" reads as a way through rather than a twenty-second
 * category. */
.barex-shop-v2 .barex-rail-more-btn {
	border-style: dashed;
	border-color: #dcdcda;
}

@media (hover: hover) {
	.barex-shop-v2 .barex-rail-more-btn:hover { border-color: #101010; background: #fafaf9; }
}

@media (min-width: 1000px) {
	.barex-shop-v2 .barex-rail-more-btn { width: 100%; min-height: 80px; }
}

/* ---- the category filter as tiles inside the sheet ----
 * Same filter, same plugin markup, same checkbox mechanics — the list becomes a
 * grid and each row becomes a tile. The checkbox itself is hidden rather than
 * removed: it is what the plugin ticks, counts and applies. */

.barex-shop-v2 .barex-sheet-body .barex-filter-tiles .wpc-filters-ul-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 8px;
	margin-top: 8px;
}

.barex-shop-v2 .barex-sheet-body .barex-filter-tiles .wpc-term-item {
	margin: 0;
	padding: 0;
}

.barex-shop-v2 .barex-sheet-body .barex-filter-tiles .wpc-term-item-content-wrapper {
	display: block;
	padding: 0;
	height: 100%;
}

/* Visually hidden, not display:none — a hidden input can still be checked by
 * script and read by assistive tech, and the plugin needs it either way. */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.barex-shop-v2 .barex-sheet-body .barex-filter-tiles label {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 3px;
	height: 100%;
	min-height: 80px;
	padding: 8px 5px;
	border: 1px solid #ececea;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.barex-shop-v2 .barex-sheet-body .barex-filter-tiles label a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: inherit;
	text-decoration: none !important;
	pointer-events: none; /* the label drives the checkbox; the href is the no-JS fallback */
}

.barex-shop-v2 .barex-sheet-body .barex-filter-tiles .barex-rail-icon {
	width: 23px;
	height: 23px;
}

.barex-shop-v2 .barex-sheet-body .barex-filter-tiles .barex-tile-name {
	font-size: 10px;
	line-height: 1.2;
	font-weight: 500;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.barex-shop-v2 .barex-sheet-body .barex-filter-tiles .wpc-term-count {
	order: -1;
	align-self: flex-start;
	font-size: 9px;
	line-height: 1;
	color: #9a9a9a;
}

/* Selected — the checkbox is the state, so the tile follows it rather than a
 * class we would have to keep in sync. */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles input[type="checkbox"]:checked + label {
	border-color: #101010;
	background: #101010;
	color: #fff;
}

.barex-shop-v2 .barex-sheet-body .barex-filter-tiles input[type="checkbox"]:checked + label .wpc-term-count {
	color: rgba(255,255,255,.62);
}

/* Keyboard focus has to be visible once the checkbox itself is not. */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles input[type="checkbox"]:focus-visible + label {
	outline: 2px solid #101010;
	outline-offset: 2px;
}

@media (hover: hover) {
	.barex-shop-v2 .barex-sheet-body .barex-filter-tiles input[type="checkbox"]:not(:checked) + label:hover {
		border-color: #cfcfcc;
		background: #fafaf9;
	}
}

/* ---- a wider panel, now that it holds a grid ----
 * 380px fitted a checkbox list. A tile grid wants room for four columns without
 * the tiles turning into stamps. */
@media (min-width: 900px) {
	.barex-shop-v2 .barex-filters-sheet { width: 440px; }
}

@media (min-width: 1200px) {
	.barex-shop-v2 .barex-filters-sheet { width: 500px; }
}

/* The styled checkbox mark, which is drawn as label::before rather than by the
 * input itself. Hiding the input alone left a stray 14px square sitting in the
 * middle of every tile — in a tile the selected state IS the tile, so the mark
 * has nothing left to say. Any padding reserved for it goes too. */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles label::before,
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles label::after {
	content: none !important;
	display: none !important;
}

.barex-shop-v2 .barex-sheet-body .barex-filter-tiles label,
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles label a {
	padding-left: 0;
	padding-right: 0;
	text-align: center;
}

.barex-shop-v2 .barex-sheet-body .barex-filter-tiles label {
	padding: 8px 5px;
}

/* ==========================================================================
 * P2 — owner QA round 5: the rail spans the grid, and every filter can be tiles.
 * ========================================================================== */

/* ---- the rail is exactly as wide as the products below it ----
 * Ten fixed-width tiles left-aligned in a 1080px row left a ragged gap on the
 * right, which read as an unfinished row rather than a deliberate one. Ten
 * equal columns across the full width instead: the rail now lines up with the
 * grid's left and right edges, and the tiles get bigger for free. */
@media (min-width: 1000px) {
	.barex-shop-v2 .barex-rail-list {
		grid-template-columns: repeat(10, minmax(0, 1fr));
	}

	.barex-shop-v2 .barex-rail-tile > a,
	.barex-shop-v2 .barex-rail-more-btn {
		width: 100%;
		min-height: 88px;
	}

	.barex-shop-v2 .barex-rail-icon { width: 26px; height: 26px; }
	.barex-shop-v2 .barex-rail-name { font-size: 11px; }
}

/* ---- marks inside tiled filters ---- */

/* Brand lines get their initials, the drawer's rule: twenty near-identical
 * bottles would carry no information, and there are no line logos to draw from. */
.barex-shop-v2 .barex-sheet-body .barex-tile-monogram {
	display: block;
	height: 23px;
	line-height: 23px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
}

/* A tiled filter with longer labels — brands, hair types — needs a wider
 * column than the categories do, or "ITALIANO GENTILUOMO" clamps to nothing. */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles.wpc-filter-pwb-brand .wpc-filters-ul-list,
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles.wpc-filter-product_tag .wpc-filters-ul-list {
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}

/* Brand names are set in capitals in the data; at tile size they need the
 * smaller step or every second one clamps. */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles.wpc-filter-pwb-brand .barex-tile-name {
	font-size: 9.5px;
	letter-spacing: .01em;
}

/* ==========================================================================
 * P2 — the third filter design: line cards.
 *
 * Two columns of a mark and a label on one line. More compact than tiles and
 * still stylised, for filters whose labels are too long to read at tile width
 * — brand lines and hair types especially. Shares the tile markup exactly; only
 * the layout differs, which is why .barex-filter-lines is added ALONGSIDE
 * .barex-filter-tiles rather than instead of it.
 * ========================================================================== */

/* Two classes on the element, to out-rank the per-taxonomy column rules above
 * (.barex-filter-tiles.wpc-filter-pwb-brand sets its own minmax, and would
 * otherwise win and give line cards four columns). */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles.barex-filter-lines .wpc-filters-ul-list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 7px;
}

.barex-shop-v2 .barex-sheet-body .barex-filter-lines label {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	min-height: 0;
	padding: 8px 10px;
	text-align: left;
}

.barex-shop-v2 .barex-sheet-body .barex-filter-lines label a {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
}

.barex-shop-v2 .barex-sheet-body .barex-filter-lines .barex-rail-icon,
.barex-shop-v2 .barex-sheet-body .barex-filter-lines .barex-tile-monogram {
	width: 20px;
	height: 20px;
	line-height: 20px;
	flex: 0 0 auto;
	font-size: 10.5px;
}

.barex-shop-v2 .barex-sheet-body .barex-filter-tiles.barex-filter-lines .barex-tile-name {
	font-size: 11px;
	line-height: 1.25;
	text-align: left;
	-webkit-line-clamp: 2;
	min-width: 0;
}

/* The count returns to the end of the row — there is no "top" of a line card. */
.barex-shop-v2 .barex-sheet-body .barex-filter-lines .wpc-term-count {
	order: 0;
	align-self: center;
	margin-left: auto;
	flex: 0 0 auto;
}

/* One column when the panel is a phone-width sheet, where two would clamp every
 * label to a word and a half. */
@media (max-width: 560px) {
	.barex-shop-v2 .barex-sheet-body .barex-filter-tiles.barex-filter-lines .wpc-filters-ul-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* An uploaded image standing in for an icon — same box, cropped to it. */
.barex-shop-v2 .barex-mark-img {
	object-fit: contain;
	display: block;
}

/* ---- room between the last product and the footer ----
 * Measured at 0px: the pagination's bottom edge and the footer's top edge were
 * the same pixel, so the grid ended and the footer began with nothing in
 * between. The theme puts no padding on #content and our pagination carries no
 * bottom margin, so neither side was going to provide it.
 *
 * On the content box rather than the pagination, because the archive can end in
 * a pagination row, a "no products found" notice or the last card, and all three
 * need the same air. */
.barex-shop-v2 #content {
	padding-bottom: 56px;
}

@media (max-width: 767px) {
	.barex-shop-v2 #content { padding-bottom: 36px; }
}

/* ==========================================================================
 * The discounts view — /parduotuve/?akcijos=1
 * ========================================================================== */

/* THE HERO IS DELIBERATELY LEFT ALONE ON THE DISCOUNTS VIEW.
 *
 * Hiding it (display:none on #page-header) worked and looked better — the
 * products moved from ~900px down to ~310px. But this theme overlays a
 * TRANSPARENT header on the hero and picks its skin to suit the hero's dark
 * image, so with the hero gone the menu, search and cart went white-on-white.
 *
 * There is no clean way to fix that: wtbx_option_levelled(), which decides the
 * header skin, reads theme options and post meta with no filter anywhere in the
 * chain. The two available routes are re-declaring the theme's whole generated
 * skin stylesheet under a body class, or hijacking get_post_metadata to fake a
 * per-page setting for one query argument. Both are the kind of change that
 * looks fine until a theme update, so neither was taken.
 *
 * The per-page setting cannot help either: /parduotuve/ and
 * /parduotuve/?akcijos=1 are the SAME page, so a per-page skin cannot differ
 * between them.
 *
 * If a hero-less discounts view is wanted, the clean route is a separate PAGE
 * (like /nuolaidos/) where the theme's own per-page settings apply — hero off,
 * header skin set, all in the UI with no code. The trade-off is that Filter
 * Everything cannot attach filters to a page. See inc/front/catalog/akcijos.php.
 */

.barex-shop-v2 .barex-akcijos-lede {
	margin: 4px 0 0;
	font-size: 13px;
	color: #8a8a8a;
}

/* The archive heading here goes through the same Additional CSS rule that sizes
 * the category titles (36px SilkSerif), so it needs no type of its own — only
 * the spacing the hero used to provide. */
body.barex-akcijos-archive .barex-archive-title {
	margin-top: 4px;
}

/* ==========================================================================
 * Sheet tiles — contrast and proportion.
 *
 * Two measured problems, not two preferences:
 *
 * 1. Every tile label was rendering at rgb(135,135,135). `color: inherit` on
 *    the anchor inherits from the label, which inherits the theme's link grey —
 *    so the names were quietly two shades lighter than intended and the whole
 *    grid read as unavailable. The colour is now stated rather than inherited.
 *
 * 2. Category tiles were 87px wide against 111px for hair types, because each
 *    taxonomy had its own minmax. Narrower tiles wrap more names to two lines,
 *    and a grid row takes the height of its tallest cell — which is why the
 *    categories block came out 102px tall against 90px and looked heavier. One
 *    column width for every tiled filter fixes both.
 * ========================================================================== */

/* One grid for all tiled filters — the per-taxonomy widths above are overridden
 * deliberately, and this rule is last so it wins without !important. */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles:not(.barex-filter-lines) .wpc-filters-ul-list {
	/* 84px, not 96: at 96 the 500px panel fits four columns instead of five, and
	 * unifying the width was supposed to make the tiles smaller, not the grid
	 * taller. Five columns of 84 plus four 7px gaps clears the panel's inner
	 * width with room to spare, and both filters get the same five. */
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 7px;
}

/* Stated, not inherited. */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles .barex-tile-name,
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles label a {
	color: #101010;
}

.barex-shop-v2 .barex-sheet-body .barex-filter-tiles input[type="checkbox"]:checked + label .barex-tile-name,
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles input[type="checkbox"]:checked + label a {
	color: #fff;
}

/* A touch more definition on the resting state, so an available tile looks
 * available rather than disabled. */
/* Border colour applies to both shapes; the box metrics are the tile's only —
 * a line card is a row, and giving it a tile's min-height turned the compact
 * option into a 72px block. */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles label {
	border-color: #dededa;
}

.barex-shop-v2 .barex-sheet-body .barex-filter-tiles:not(.barex-filter-lines) label {
	justify-content: center;
	min-height: 72px;
	padding: 7px 5px;
}

.barex-shop-v2 .barex-sheet-body .barex-filter-tiles .wpc-term-count {
	color: #8a8a8a;
}

/* The brand names keep the smaller step only where they are tiles; as line
 * cards they have the room for the full size. */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles.wpc-filter-pwb-brand:not(.barex-filter-lines) .barex-tile-name {
	font-size: 10px;
}

/* Rows size to their own content, so a row holding "Apsauga nuo karščio" came
 * out 12px taller than the rows around it. Every row takes the height of the
 * tallest, the same rule the rail already follows — within one filter the tiles
 * are now identical whatever the names do. */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles:not(.barex-filter-lines) .wpc-filters-ul-list {
	grid-auto-rows: 1fr;
}

/* Uniform rows cost height: every row takes the two-line case, so the whole
 * grid sat at 100px. Trimmed back where it does not hurt legibility — the icon,
 * the padding and the internal gaps — rather than by clamping the names to one
 * line, which would have hidden half of "Džiovintuvai ir kiti prietaisai". */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles:not(.barex-filter-lines) label {
	min-height: 0;
	padding: 5px 4px 6px;
	gap: 2px;
}

.barex-shop-v2 .barex-sheet-body .barex-filter-tiles:not(.barex-filter-lines) label a {
	gap: 2px;
}

.barex-shop-v2 .barex-sheet-body .barex-filter-tiles:not(.barex-filter-lines) .barex-rail-icon,
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles:not(.barex-filter-lines) .barex-tile-monogram {
	width: 20px;
	height: 20px;
	line-height: 20px;
}

/* ==========================================================================
 * Sheet tiles — fixed anatomy.
 *
 * count (top-left) · icon (always the same line) · name box (two lines
 * reserved, text centred in it)
 *
 * Previously the whole group was centred as one block, so the icon moved up or
 * down depending on how many lines the label took and a row of tiles read as
 * ragged. Now only the NAME moves inside its own reserved box; everything above
 * it is at a fixed offset, so the icons line up across the row whatever the
 * words do.
 * ========================================================================== */

.barex-shop-v2 .barex-sheet-body .barex-filter-tiles:not(.barex-filter-lines) label {
	justify-content: flex-start;
	padding: 5px 4px 7px;
	gap: 2px;
}

/* Full width, or the anchor shrinks to its longest child and centres against
 * that instead of against the tile — which is what put the icon and the label
 * a few pixels left of centre. */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles:not(.barex-filter-lines) label a {
	width: 100%;
	flex: 1 1 auto;
	justify-content: flex-start;
	gap: 3px;
}

.barex-shop-v2 .barex-sheet-body .barex-filter-tiles:not(.barex-filter-lines) .barex-rail-icon,
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles:not(.barex-filter-lines) .barex-tile-monogram {
	flex: 0 0 auto;
}

/* Two lines reserved at 10px/1.2 = 24px, with the text centred inside — so a
 * one-line name sits in the middle of the space two lines would occupy. */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles .barex-tile-label {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 24px;
}

/* Long single words — "Besipučiantiems" is wider than an 88px tile — break with
 * a hyphen where the browser has a dictionary for the page language, and break
 * without one where it does not, rather than overflowing either way.
 * Chrome's Lithuanian support is not guaranteed; break-word is the floor. */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles .barex-tile-name {
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
	word-break: normal;
}

/* The count is information, not a footnote — it was quiet enough to read as
 * decoration. */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles .wpc-term-count {
	font-size: 9.5px;
	font-weight: 500;
	color: #6f6f6f;
}

.barex-shop-v2 .barex-sheet-body .barex-filter-tiles input[type="checkbox"]:checked + label .wpc-term-count {
	color: rgba(255,255,255,.72);
}

/* Line cards keep their own box: the label wrapper must not stretch there. */
.barex-shop-v2 .barex-sheet-body .barex-filter-lines .barex-tile-label {
	min-height: 0;
	justify-content: flex-start;
	flex: 1 1 auto;
}

/* The plugin puts margin-right:6px on a term's link — correct spacing between
 * the label and the count in a checkbox ROW, wrong in a tile, where it shifted
 * the anchor 6px left and put the icon and the name 3px off centre. Measured,
 * not guessed: the anchor's box was 78px inside an 80px content area, flush
 * left. */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles label a {
	margin: 0;
}

/* The tile's height comes from its contents now that the anatomy is fixed —
 * count, icon and a two-line name box. The old 72px floor was stretching every
 * tile ~19px past what it needed and putting the extra space at the bottom,
 * which is what read as "too much empty space in the buttons". */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles:not(.barex-filter-lines) label {
	min-height: 0;
}

/* grid-auto-rows:1fr is no longer needed and was doing harm.
 *
 * It existed to stop a row with a two-line name being taller than its
 * neighbours. The reserved name box solves that at the source — count, icon and
 * a 24px label box give every tile the same natural height — while 1fr went on
 * stretching rows to fill the grid, adding ~19px of dead space at the bottom of
 * every tile. That was the remaining "empty space in the buttons". */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles:not(.barex-filter-lines) .wpc-filters-ul-list {
	grid-auto-rows: auto;
	align-items: start;
}

/* And the actual source of the dead space: align-content.
 *
 * The sheet body is a flex column, so the filter's <ul> receives a definite
 * height larger than its rows need — and a grid's default align-content
 * stretches its ROWS to fill that. Every tile was inflated to 92px while its
 * contents measured 72.5, and the surplus sat at the bottom of each tile. Rows
 * pack from the top now and take the height they need. */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles .wpc-filters-ul-list {
	align-content: start;
}

/* The label no longer stretches to a row it does not control. */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles:not(.barex-filter-lines) label {
	height: auto;
}

/* ⚠ THE DEAD SPACE WAS A WHITESPACE TEXT NODE.
 *
 * The plugin's term markup has a newline between the <a> and the count span.
 * In a flex container that stray whitespace becomes an ANONYMOUS FLEX ITEM one
 * line tall — 17.55px here — plus a 2px gap, which is exactly the 19.5px that
 * would not go away. It survived every align-content, grid-auto-rows and
 * height:auto attempt because it was never a sizing rule: it was content.
 *
 * Zeroing the line-height on the label collapses that anonymous item; the real
 * children carry their own line-height, so nothing else moves. */
.barex-shop-v2 .barex-sheet-body .barex-filter-tiles label {
	line-height: 0;
}

.barex-shop-v2 .barex-sheet-body .barex-filter-tiles .barex-tile-name {
	line-height: 1.2;
}

.barex-shop-v2 .barex-sheet-body .barex-filter-tiles .wpc-term-count {
	line-height: 1;
}

/* ------------------------------------------------------------------ *
 * [barex_products] sections — home page / landing pages (2026-08-22).
 * The card inside is the catalogue card untouched; only the container differs.
 * ------------------------------------------------------------------ */
.barex-shop-v2 .barex-section { margin: 0 0 48px; }
.barex-shop-v2 .barex-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.barex-shop-v2 .barex-section-title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.barex-shop-v2 .barex-section-link { font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; border-bottom: 1px solid currentColor; }

/* Strip: one row, horizontal, snaps per card; cards keep the grid's own width
   by sizing to the same column count the grid would use at that breakpoint. */
.barex-shop-v2 .barex-strip { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 6px; margin: 0 -6px; padding-left: 6px; padding-right: 6px; }
.barex-shop-v2 .barex-strip:focus-visible { outline: 2px solid #131313; outline-offset: 4px; }
.barex-shop-v2 .barex-strip .barex-grid-wrapper { clear: none; }
.barex-shop-v2 .barex-strip ul.products.barex-grid { display: flex; flex-wrap: nowrap; gap: 12px; grid-template-columns: none; }
.barex-shop-v2 .barex-strip ul.products.barex-grid > li.barex-card { flex: 0 0 calc((100% - 12px) / 2); scroll-snap-align: start; max-width: none; }
@media (min-width: 560px)  { .barex-shop-v2 .barex-strip ul.products.barex-grid > li.barex-card { flex-basis: calc((100% - 2 * 12px) / 3); } }
@media (min-width: 1000px) { .barex-shop-v2 .barex-strip ul.products.barex-grid > li.barex-card { flex-basis: calc((100% - 3 * 12px) / 4); } }
@media (min-width: 1400px) { .barex-shop-v2 .barex-strip ul.products.barex-grid > li.barex-card { flex-basis: calc((100% - 4 * 12px) / 5); } }
/* Hint that it scrolls: the last visible card fades on the right edge until the
   strip has been scrolled to its end (JS toggles .is-end). Scrollbar is hidden
   unless the shortcode asks for it (scrollbar="yes"). */
.barex-shop-v2 .barex-section-scroll { position: relative; }
.barex-shop-v2 .barex-section-scroll::after { content: ""; position: absolute; z-index: 2; /* cards are position:relative; z-index:1 */ top: 0; right: -6px; bottom: 0; width: 22%; max-width: 180px; pointer-events: none; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 55%, #fff 100%); transition: opacity .25s; }
.barex-shop-v2 .barex-section-scroll.is-end::after, .barex-shop-v2 .barex-section-scroll.is-static::after { opacity: 0; }
.barex-shop-v2 .barex-section-scroll .barex-section-head { position: relative; z-index: 1; }
.barex-shop-v2 .barex-section[data-scrollbar="no"] .barex-strip { scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 0; }
.barex-shop-v2 .barex-section[data-scrollbar="no"] .barex-strip::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .barex-shop-v2 .barex-section-scroll::after { transition: none; } }