/* ==========================================================================
   EXAPC Gaming – komponentai
   Taisyklė: vienos klasės selektoriai (BEM), kad nesusidurtų specifiškumas.
   Žalia – tik veiksmas, būsena „sandėlyje“ ir fokusas.
   ========================================================================== */

/* Mygtukai --------------------------------------------------------------- */
.btn {
	--btn-bg: transparent;
	--btn-fg: var(--c-text);
	--btn-bd: var(--c-line-strong);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-height: 2.75rem; /* 44px – patogu liesti */
	padding: 0 var(--s-5);
	border: 1px solid var(--btn-bd);
	border-radius: var(--r-control);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--f-display);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.btn:hover { --btn-bd: var(--c-text); color: var(--btn-fg); }
.btn svg { width: 1.125em; height: 1.125em; flex: none; }

.btn--primary {
	--btn-bg: var(--c-accent);
	--btn-fg: var(--c-on-accent);
	--btn-bd: var(--c-accent);
}
.btn--primary:hover { --btn-bg: var(--c-accent-strong); --btn-bd: var(--c-accent-strong); }

.btn--quiet {
	--btn-bd: transparent;
	--btn-fg: var(--c-muted);
	padding-inline: var(--s-3);
}
.btn--quiet:hover { --btn-bd: transparent; --btn-fg: var(--c-text); }

.btn--sm { min-height: 2.25rem; padding-inline: var(--s-4); font-size: var(--fs-sm); }
.btn--lg { min-height: 3.25rem; padding-inline: var(--s-6); font-size: var(--fs-md); }
.btn--block { width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
	--btn-bg: var(--c-surface-2);
	--btn-fg: var(--c-muted);
	--btn-bd: var(--c-line);
	cursor: not-allowed;
}

/* Žymos ------------------------------------------------------------------ */
/* Nuolaida: užpildyta gintaro spalva – vienintelė „šilta“ spalva sąsajoje. */
.tag {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.2em 0.6em;
	border-radius: var(--r-chip);
	font-family: var(--f-display);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}
.tag--deal { background: var(--c-deal); color: var(--c-on-deal); font-variant-numeric: tabular-nums; }

/* Būklė: kontūrinė – informacija, ne raginimas. */
.tag--condition {
	border: 1px solid var(--c-line-strong);
	color: var(--c-text);
	background: transparent;
}
.tag--condition::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	border: 1.5px solid currentColor;
}
.tag--condition-nauja::before { background: currentColor; }
.tag--condition-atnaujinta::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }

/* Ant šviesaus foto stalo */
.tag--on-well { background: var(--c-base); color: var(--c-text); border-color: var(--c-base); }

/* Likutis: taškas + tekstas (spalva niekada nėra vienintelis požymis). */
.stock {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--fs-sm);
	color: var(--c-muted);
}
.stock::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--c-line-strong);
	flex: none;
}
.stock--in { color: var(--c-text); }
.stock--in::before { background: var(--c-accent); }
.stock--low { color: var(--c-deal); }
.stock--low::before { background: var(--c-deal); }
.stock--out::before { background: transparent; border: 1.5px solid var(--c-line-strong); }

/* Kaina ------------------------------------------------------------------ */
.price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--s-2);
	font-family: var(--f-display);
	font-variant-numeric: tabular-nums;
	margin: 0;
}
.price__now { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; color: var(--c-text); white-space: nowrap; }
.price__was { font-size: var(--fs-sm); color: var(--c-muted); text-decoration: line-through; text-decoration-thickness: 1px; white-space: nowrap; }
.price__save { flex-basis: 100%; font-family: var(--f-body); font-size: var(--fs-xs); color: var(--c-deal); }
.price--lg .price__now { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
.price--lg .price__was { font-size: var(--fs-md); }
.price--lg .price__save { font-size: var(--fs-sm); }
.price > .tag { align-self: center; }

/* Formos ----------------------------------------------------------------- */
.field { display: grid; gap: var(--s-2); }
.field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); }
.field__hint { font-size: var(--fs-xs); color: var(--c-muted); }
.field__error { font-size: var(--fs-xs); color: var(--c-danger); }

.input,
.select,
.textarea {
	width: 100%;
	min-height: 2.75rem;
	padding: 0 var(--s-3);
	background: var(--c-surface-2);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-control);
	color: var(--c-text);
	transition: border-color var(--t-fast) ease;
}
.textarea { min-height: 7rem; padding-block: var(--s-3); resize: vertical; }
.input::placeholder,
.textarea::placeholder { color: var(--c-muted); opacity: 1; }
.input:hover,
.select:hover,
.textarea:hover { border-color: var(--c-muted); }
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible { border-color: var(--c-accent); }
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] { border-color: var(--c-danger); }

.select {
	appearance: none;
	padding-right: 2.25rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A7B0B8' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
}

.check {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	min-height: 2.25rem;
	font-size: var(--fs-sm);
	cursor: pointer;
}
.check input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--c-accent); flex: none; }
.check__count { margin-left: auto; color: var(--c-muted); font-variant-numeric: tabular-nums; }

/* Filtrų žymos (pasirinkti filtrai) */
.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	min-height: 2rem;
	padding: 0 var(--s-2) 0 var(--s-3);
	border-radius: var(--r-chip);
	background: var(--c-surface-2);
	border: 1px solid var(--c-line);
	font-size: var(--fs-sm);
	color: var(--c-text);
	text-decoration: none;
}
.chip:hover { border-color: var(--c-line-strong); color: var(--c-text); }
.chip__x { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; color: var(--c-muted); }
.chip:hover .chip__x { background: var(--c-line); color: var(--c-text); }

/* Prekės kortelė ---------------------------------------------------------
   Foto stalas: šviesi plokštuma tamsioje sąsajoje. Baltų fonų nuotraukos
   atrodo vientisai, o skirtingų proporcijų nuotraukos – tvarkingai. */
.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	height: 100%;
	padding: var(--s-2) var(--s-2) var(--s-4);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-card);
	transition: border-color var(--t-base) ease;
}
.product-card:hover { border-color: var(--c-line-strong); }
.product-card:focus-within { border-color: var(--c-line-strong); }

.product-card__well {
	position: relative;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	padding: 8%;
	background: var(--c-well);
	border-radius: var(--r-well);
	overflow: hidden;
}
.product-card__well img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply; /* baltas nuotraukos fonas susilieja su stalu */
}
.product-card__flags {
	position: absolute;
	top: var(--s-2);
	left: var(--s-2);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1);
}
.product-card--sold .product-card__well img { opacity: 0.55; filter: grayscale(0.6); }
.product-card__sold {
	position: absolute;
	inset: auto var(--s-2) var(--s-2) auto;
}

.product-card__body { display: flex; flex-direction: column; gap: var(--s-2); padding-inline: var(--s-2); flex: 1; }
.product-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }

.product-card__title {
	margin: 0;
	font-family: var(--f-body);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.product-card__link { color: var(--c-text); text-decoration: none; }
.product-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); } /* visa kortelė paspaudžiama */
.product-card__link:hover { color: var(--c-text); }
.product-card__link:focus-visible { box-shadow: none; }
.product-card__link:focus-visible::after { box-shadow: var(--focus-ring); }

/* Trumpa specifikacija kortelėje: etiketė + reikšmė */
.spec-mini {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.15rem var(--s-3);
	margin: 0;
	font-size: var(--fs-xs);
}
.spec-mini dt { color: var(--c-muted); }
.spec-mini dd { margin: 0; color: var(--c-text); font-variant-numeric: tabular-nums; }

.product-card__foot {
	margin-top: auto;
	padding-top: var(--s-2);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s-2) var(--s-3);
}
.product-card__foot .price { flex: 1 1 auto; }
.product-card__foot .btn { position: relative; z-index: 1; } /* virš visos kortelės nuorodos */
/* Kortelėse veiksmas tylus – kitaip tinklelis taptų žalias. Žalias tik užvedus/fokusavus. */
.btn--card { --btn-bd: var(--c-line-strong); }
.btn--card:hover,
.btn--card:focus-visible { --btn-bg: var(--c-accent); --btn-fg: var(--c-on-accent); --btn-bd: var(--c-accent); }

/* Specifikacijų lentelė -------------------------------------------------- */
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.spec-table caption {
	text-align: left;
	font-family: var(--f-display);
	font-size: var(--fs-lg);
	font-weight: 600;
	padding-bottom: var(--s-3);
}
.spec-table th,
.spec-table td { padding: var(--s-3) 0; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.spec-table th { width: 38%; padding-right: var(--s-4); font-weight: 400; color: var(--c-muted); }
.spec-table td { color: var(--c-text); }
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }

/* Pranešimai ------------------------------------------------------------- */
.notice {
	display: flex;
	gap: var(--s-3);
	align-items: flex-start;
	padding: var(--s-3) var(--s-4);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-left: 3px solid var(--notice-c, var(--c-muted));
	border-radius: var(--r-control);
	font-size: var(--fs-sm);
}
.notice p { margin: 0; }
.notice__icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--notice-c, var(--c-muted)); }
.notice--success { --notice-c: var(--c-accent); }
.notice--error { --notice-c: var(--c-danger); }
.notice--info { --notice-c: var(--c-muted); }

/* Navigacija ------------------------------------------------------------- */
.breadcrumbs { font-size: var(--fs-sm); color: var(--c-muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--c-line-strong); }
.breadcrumbs a { color: var(--c-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-text); }
.breadcrumbs [aria-current] { color: var(--c-text); }

.pagination ul { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.pagination a,
.pagination span {
	display: inline-grid;
	place-items: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 var(--s-2);
	border-radius: var(--r-control);
	font-family: var(--f-display);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	color: var(--c-muted);
}
.pagination a:hover { background: var(--c-surface-2); color: var(--c-text); }
.pagination [aria-current] { background: var(--c-surface-2); color: var(--c-text); box-shadow: inset 0 -2px 0 var(--c-accent); }

/* Skyriaus antraštė su nuoroda */
.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-4);
	margin-bottom: var(--s-5);
}
.section-head h2 { margin: 0; font-size: var(--fs-xl); }
.section-head a { font-size: var(--fs-sm); color: var(--c-muted); white-space: nowrap; }
.section-head a:hover { color: var(--c-text); }

/* Prekių tinklelis */
.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: var(--s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 30rem) {
	.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
	.product-card { padding: var(--s-1) var(--s-1) var(--s-3); gap: var(--s-2); }
	.product-card__body { padding-inline: var(--s-1); }
	.product-card__foot { flex-direction: column; align-items: stretch; }
	.spec-mini { display: none; }
}

/* Nuotraukos neturinti prekė: lustas ant foto stalo */
.product-card__placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--c-ink); opacity: 0.28; }
.product-card__placeholder svg { width: 46%; height: auto; stroke-width: 1; }

/* AJAX „Į krepšelį“ būsenos (WooCommerce prideda .loading / .added) */
.btn.loading { opacity: 0.7; pointer-events: none; }
.btn.loading::after { content: ""; width: 0.9em; height: 0.9em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: exapc-spin 0.7s linear infinite; }
.btn.added::after { content: "✓"; }
a.added_to_cart { display: none; } /* Prekių skaičius antraštėje pakanka. */
@keyframes exapc-spin { to { transform: rotate(360deg); } }

/* Kategorijų kortelės (pagrindinis puslapis, [product_categories]) ------------------------------------------------------------ */
.cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
	gap: var(--s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 30rem) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); } }
.cat-card {
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 0.15rem;
	height: 100%;
	padding: var(--s-2) var(--s-2) var(--s-3);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-card);
	color: var(--c-text);
	text-decoration: none;
	transition: border-color var(--t-base) ease;
}
.cat-card:hover { border-color: var(--c-line-strong); color: var(--c-text); }
.cat-card__well {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	margin-bottom: var(--s-2);
	padding: 10%;
	background: var(--c-well);
	border-radius: var(--r-well);
	color: var(--c-ink);
	overflow: hidden;
}
.cat-card__well img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cat-card__well--icon {
	position: relative;
	padding: 0;
	background:
		radial-gradient(70% 70% at 50% 45%, rgb(57 216 117 / 0.07), transparent 70%),
		linear-gradient(180deg, var(--c-surface-2), var(--c-base));
	border: 1px solid var(--c-line);
	color: var(--c-muted);
}
.cat-icon {
	width: 46%;
	max-width: 6rem;
	height: auto;
	transition: color var(--t-base) ease, transform var(--t-base) ease;
}
.cat-icon .a { stroke: var(--c-accent); opacity: 0.85; }
.cat-card:hover .cat-card__well--icon,
.cat-card:focus-visible .cat-card__well--icon { color: var(--c-text); }
.cat-card:hover .cat-icon { transform: translateY(-2px); }
.cat-card:hover .cat-icon .a { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cat-icon { transition: none; } .cat-card:hover .cat-icon { transform: none; } }
.cat-card__name { padding-inline: var(--s-1); font-weight: 600; line-height: 1.3; }
.cat-card__count { padding-inline: var(--s-1); font-size: var(--fs-xs); color: var(--c-muted); font-variant-numeric: tabular-nums; }

/* [product_categories] sąrašas (pvz., puslapis „Komponentai“) – kaip pagrindinio puslapio kortelės */
.product-grid:has(> li.product-category) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--s-4); }
@media (max-width: 30rem) { .product-grid:has(> li.product-category) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); } }
.product-grid > li.product-category { list-style: none; }
.prose:has(.product-grid) { max-width: none; }
.prose .product-grid { margin: 0; padding: 0; }
.prose .product-grid > li + li { margin-top: 0; }
.prose a.cat-card,
.prose a.cat-card:hover { color: var(--c-text); text-decoration: none; }