/* ==========================================================================
   DETAIL PRODUKTU  —  Figma node 1:676

   Galéria 680 + nákupný panel 680, medzera 40.
   Markup galérie, formulára a záložiek generuje WooCommerce — tu ho
   len prispôsobujeme dizajnu, aby ostali funkčné varianty, Mix & Match
   a zľavové pluginy.

   Miery z Figmy:
     nadpis      Inter Bold 56.7
     pôv. cena   Inter Regular 32.5, prečiarknutá
     cena        Inter ExtraBold 52.9
     s DPH       Inter Regular 32.5
     množstvo    320 × 60, tlačidlo 320 × 60
     zľavy       box 153 × 76, radius 2.3, okraj #cdcdcd, aktívny #e0e621
     záložky     276 × 60, #f9f9f9, Inter Bold 22, podčiarknutie 4px
   ========================================================================== */

.pc-product {
	padding-block: var(--pc-space-32) var(--pc-space-section);
}

/* ---- Spätný odkaz ------------------------------------------------------ */

/*
 * Vo Figme je to modré tlačidlo so šípkou doľava, nie odkaz v rámčeku.
 * Šípka je zrkadlený chevron — vlastnú ikonu netreba.
 */
.pc-product__back {
	min-height: 44px;
	margin-bottom: var(--pc-space-32);
}

.pc-product__back-icon {
	display: grid;
	place-items: center;
	width: 16px;
	height: 13px;
}

.pc-product__back-icon svg {
	width: 100%;
	height: 100%;
	/* Ikona z Figmy smeruje doprava — do tlačidla „Späť" ju zrkadlíme. */
	transform: scaleX(-1);
}

/* ---- Rozloženie -------------------------------------------------------- */

.pc-product__layout {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	align-items: start;
	margin-top: 56px;
}

/* ---- Galéria (markup z WooCommerce) ------------------------------------ */

/* Vzťažný bod pre ikonky využitia, ktoré ležia na fotke. */
.pc-product__gallery {
	position: relative;
}

.pc-product__gallery .woocommerce-product-gallery {
	width: 100% !important;
	float: none;
}

.pc-product__gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.pc-product__gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.pc-product__gallery .flex-control-thumbs li {
	margin: 0;
	width: auto;
}

.pc-product__gallery .flex-control-thumbs img {
	width: 100%;
	height: auto;
	border-radius: 5px;
	opacity: 0.7;
	cursor: pointer;
	transition: opacity var(--pc-duration) var(--pc-ease);
}

.pc-product__gallery .flex-control-thumbs img.flex-active,
.pc-product__gallery .flex-control-thumbs img:hover {
	opacity: 1;
}

/* ---- Nákupný panel ----------------------------------------------------- */

/* Zľava a Porovnať v jednom riadku, zarovnané na stred výšky. */
.pc-product__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-space-12);
	margin-bottom: var(--pc-space-12);
}

.pc-product__meta .pc-cmp--single {
	margin-bottom: 0;
}

.pc-product__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.pc-product__badges .badge {
	min-width: 130px;
	min-height: 26px;
	font-size: var(--pc-fs-micro);
}

.pc-product__title {
	margin-top: 14px;
	font-size: 56.7px;
	font-weight: var(--pc-weight-bold);
	line-height: 1.15;
}

.pc-product__excerpt {
	margin-top: 24px;
	font-size: var(--pc-fs-base);
	line-height: var(--pc-lh-base);
}

.pc-product__buy {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	align-items: end;
	margin-top: 56px;
}

/* ---- Ceny -------------------------------------------------------------- */

.pc-product__prices {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
}

.pc-product__price-old {
	flex-basis: 100%;
	font-size: 32.5px;
	line-height: 1.2;
	text-decoration: line-through;
}

.pc-product__price {
	font-size: 52.9px;
	font-weight: var(--pc-weight-extrabold);
	line-height: 1.2;
	white-space: nowrap;
}

.pc-product__vat {
	font-size: 32.5px;
	line-height: 1.2;
}

.pc-product__prices .woocommerce-Price-amount {
	font: inherit;
	color: inherit;
}

/* ---- Formulár do košíka (markup z WooCommerce) ------------------------- */

.pc-product__buy form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-space-16);
	margin-top: 24px;
}

.pc-product__buy .quantity {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 200px;
	min-height: 60px;
	padding-inline: var(--pc-space-16);
	border: 1px solid #b5b5b5;
	border-radius: var(--pc-radius-xs);
}

.pc-product__buy .quantity input {
	width: 100%;
	border: 0;
	background: none;
	font-family: var(--pc-font);
	font-size: var(--pc-fs-lead);
	text-align: center;
	appearance: textfield;
}

.pc-product__buy .single_add_to_cart_button {
	flex: 1 1 220px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	padding-inline: var(--pc-space-24);
	border: 0;
	border-radius: var(--pc-radius-xs);
	background: var(--pc-blue);
	font-family: var(--pc-font);
	font-size: var(--pc-fs-base);
	font-weight: var(--pc-weight-bold);
	color: var(--pc-white);
	cursor: pointer;
	transition: background-color var(--pc-duration) var(--pc-ease);
}

.pc-product__buy .single_add_to_cart_button:hover {
	background: var(--pc-blue-dark);
}

/* Varianty a atribúty — Woo tabuľka prevedená na bežný zoznam polí. */
.pc-product__buy .variations {
	width: 100%;
	margin-bottom: var(--pc-space-16);
	border-collapse: collapse;
}

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

.pc-product__buy .variations label {
	font-size: var(--pc-fs-base);
	font-weight: var(--pc-weight-bold);
}

/*
 * Vlastná šípka namiesto natívnej: tá sedí natlačená na okraji a jej
 * odstup sa nedá ovplyvniť. Box je zároveň vyšší — pri 42.5px sa
 * dlhšie názvy volieb orezávali zospodu.
 */
.pc-product__buy .variations select {
	width: 100%;
	min-height: 52px;
	margin-block: 6px 16px;
	padding: 12px 48px 12px var(--pc-space-16);
	border: 1px solid #b5b5b5;
	border-radius: var(--pc-radius-xs);
	background-color: var(--pc-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%231b1b1b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	appearance: none;
	font-family: var(--pc-font);
	font-size: var(--pc-fs-small);
	line-height: 1.4;
	text-overflow: ellipsis;
}

/* ---- Darček k produktu -------------------------------------------------
   Sedí v tej istej bunke ako množstevné zľavy. Keď má produkt oboje,
   darček je pod pásmami a odlíšený zelenou.                              */

/*
 * Darček má VLASTNÚ triedu, nezdieľa ju s pásmami. Kým mal element
 * obidve (`pc-bulk pc-gift`), sedeli naň obidve sady pravidiel naraz —
 * na mobile si tak vypýtal riadok pásiem aj riadok darčeka a skončil
 * navrchu, priamo na výbere varianty.
 */
.pc-gift {
	padding: var(--pc-space-16);
	border-radius: var(--pc-radius-sm);
	background: var(--pc-leaf);
}

.pc-gift__title {
	margin: 0;
	font-size: var(--pc-fs-base);
	font-weight: var(--pc-weight-bold);
	line-height: 1.25;
}

.pc-gift__item {
	display: flex;
	align-items: center;
	gap: var(--pc-space-12);
	margin-top: var(--pc-space-12);
}

.pc-gift__thumb {
	flex: 0 0 48px;
	width: 48px;
}

.pc-gift__thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pc-radius-xs);
	background: var(--pc-white);
}

.pc-gift__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pc-gift__name {
	font-size: var(--pc-fs-small);
	font-weight: var(--pc-weight-bold);
	line-height: 1.25;
}

.pc-gift__value {
	font-size: var(--pc-fs-micro);
	color: var(--pc-grey);
}

/* ---- Množstevné zľavy -------------------------------------------------- */

.pc-bulk__title {
	font-size: var(--pc-fs-base);
	font-weight: var(--pc-weight-bold);
	line-height: 1.25;
}

.pc-bulk {
	/* Figma: žltá dlaždica odporúčaného aj zvoleného pásma. */
	--pc-bulk-active: #e0e621;
}

.pc-bulk__tiers {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	/* Figma: nadpis končí na 711, pásma začínajú na 743 */
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.pc-bulk__tier {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1 1 140px;
	min-height: 76px;
	border: 0.566px solid #cdcdcd;
	border-radius: 2.263px;
	background: var(--pc-white);
	text-align: center;
}

.pc-bulk__tier--highlight {
	background: var(--pc-bulk-active);
}

/* ---- Pásma ako prepínač množstva ---------------------------------------
   Atribúty `role` a `tabindex` dopĺňa skript, takže tieto pravidlá
   platia len tam, kde sa pásma naozaj dajú kliknúť.                      */

.pc-bulk__tier[role='button'] {
	cursor: pointer;
	transition:
		background-color var(--pc-duration) var(--pc-ease),
		border-color var(--pc-duration) var(--pc-ease);
}

.pc-bulk__tier[role='button']:hover,
.pc-bulk__tier[role='button']:focus-visible {
	border-color: var(--pc-black);
}

.pc-bulk__tier.is-active {
	background: var(--pc-bulk-active);
	border-color: #b9be09;
}

/*
 * Kým si zákazník nič nezvolil, svieti odporúčané pásmo z nastavení
 * produktu. Po voľbe smie svietiť len to jeho — dve zvýraznené dlaždice
 * vedľa seba nepovedia, ktorá platí.
 */
.pc-bulk--chosen .pc-bulk__tier--highlight:not(.is-active) {
	background: var(--pc-white);
}

.pc-bulk__qty {
	font-size: 22.7px;
	font-weight: var(--pc-weight-bold);
	line-height: 1.2;
}

.pc-bulk__saving {
	font-size: 14.65px;
	line-height: 1.2;
}

.pc-product__stock {
	margin-top: var(--pc-space-16);
	font-size: var(--pc-fs-base);
}

.pc-product__stock .stock {
	margin: 0;
}

/* ---- Box s poradcom ---------------------------------------------------- */

.pc-product__advisor {
	position: relative;
	display: flex;
	align-items: center;
	/* Figma: 678 × 244, fotka na pozadí s textom vľavo */
	aspect-ratio: 678 / 244;
	margin-top: 46px;
	border-radius: 10px;
	overflow: hidden;
}

.pc-product__advisor-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pc-product__advisor-body {
	position: relative;
	padding-inline: 48px;
}

.pc-product__advisor-title {
	max-width: 286px;
	font-size: 27.7px;
	font-weight: var(--pc-weight-bold);
	line-height: 1;
}

.pc-product__advisor-contact {
	--pc-contact-size: var(--pc-fs-small);
	--pc-contact-height: 36px;
	--pc-contact-icon: 27px;
	margin-top: 11px;
}

/* ---- Záložky (markup z WooCommerce) ------------------------------------ */

.pc-product .woocommerce-tabs {
	margin-top: 88px;
}

.pc-product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-product .woocommerce-tabs ul.tabs li {
	flex: 1 1 200px;
	margin: 0;
	background: #f9f9f9;
}

.pc-product .woocommerce-tabs ul.tabs li a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	padding-inline: var(--pc-space-16);
	border-bottom: 4px solid transparent;
	font-size: var(--pc-fs-lead);
	font-weight: var(--pc-weight-bold);
	text-align: center;
}

.pc-product .woocommerce-tabs ul.tabs li.active a {
	border-bottom-color: var(--pc-blue);
	text-decoration: none;
}

/*
 * Každá záložka má vlastnú kartu s obsahom. Rámček je zámerne
 * priehľadný — drží rozmery, ale nekreslí sa.
 */
.pc-product .woocommerce-tabs .panel {
	/* Figma: záložky končia na 1393, text začína na 1444 */
	margin-top: 51px;
	padding: var(--pc-space-32);
	border: 1px solid transparent;
	border-radius: var(--pc-radius-sm);
	font-size: var(--pc-fs-base);
	line-height: var(--pc-lh-base);
}

.pc-product .woocommerce-tabs .panel[hidden] {
	display: none;
}

@media (max-width: 700px) {
	.pc-product .woocommerce-tabs .panel {
		margin-top: var(--pc-space-24);
		padding: 0;
	}
}

.pc-product .woocommerce-tabs .panel > h2:first-child {
	/* Woo pridáva nadpis, ktorý Figma nemá — záložka ho už pomenúva. */
	display: none;
}

.pc-product .woocommerce-tabs .panel > * + * {
	margin-top: var(--pc-space-24);
}

.pc-product .woocommerce-tabs .panel img {
	border-radius: 10px;
}

/* Prázdne odseky z importu nesmú meniť výšku popisu. */
.pc-product .woocommerce-tabs .panel p:empty {
	display: none;
}

.pc-product .woocommerce-tabs .panel > :last-child,
.pc-product .woocommerce-tabs .panel > :last-child > :last-child {
	margin-bottom: 0;
}

/*
 * Súvisiace produkty (sekcia zo stránky Produkty) nadväzujú na detail
 * produktu — medzeru drží len spodok detailu, nie súčet dvoch odsadení.
 */
.pc-product + .pc-products {
	padding-top: 0;
}

/* ==========================================================================
   RESPONZIVITA
   ========================================================================== */

@media (max-width: 1000px) {
	.pc-product__layout {
		grid-template-columns: 1fr;
		gap: var(--pc-space-48);
		margin-top: var(--pc-space-32);
	}

	.pc-product__title {
		font-size: clamp(28px, 5vw, 56.7px);
	}

	.pc-product__price {
		font-size: clamp(32px, 5vw, 52.9px);
	}

	.pc-product__price-old,
	.pc-product__vat {
		font-size: var(--pc-fs-lead);
	}

	.pc-product__buy {
		grid-template-columns: 1fr;
		gap: var(--pc-space-32);
		margin-top: var(--pc-space-32);
	}

	.pc-product__advisor {
		aspect-ratio: auto;
		padding-block: var(--pc-space-24);
	}

	.pc-product__advisor-body {
		padding-inline: var(--pc-space-24);
	}

	.pc-product .woocommerce-tabs {
		margin-top: var(--pc-space-48);
	}
}

@media (max-width: 600px) {
	.pc-product__gallery .flex-control-thumbs {
		grid-template-columns: repeat(3, 1fr);
	}

	.pc-product__buy form.cart {
		flex-direction: column;
		align-items: stretch;
	}
}

/*
 * Záložky na mobile a tablete: jeden riadok, ktorý sa posúva prstom do
 * strany — namiesto stĺpca šiestich záložiek pod sebou na stred, ktorý
 * zabral celú obrazovku. Aktívna záložka je podčiarknutá, pravý okraj
 * sa jemne stráca a naznačuje, že ďalšie záložky sú vedľa.
 */
@media (max-width: 900px) {
	.pc-product .woocommerce-tabs ul.tabs {
		position: relative;
		flex-wrap: nowrap;
		gap: var(--pc-space-4);
		margin-inline: calc(-1 * var(--pc-gutter));
		padding-inline: var(--pc-gutter);
		overflow-x: auto;
		border-bottom: 1px solid var(--pc-border);
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
	}

	.pc-product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
		display: none;
	}

	.pc-product .woocommerce-tabs ul.tabs li {
		flex: 0 0 auto;
		background: none;
		scroll-snap-align: start;
	}

	.pc-product .woocommerce-tabs ul.tabs li:last-child {
		padding-inline-end: var(--pc-space-32);
	}

	.pc-product .woocommerce-tabs ul.tabs li a {
		justify-content: flex-start;
		min-height: 48px;
		margin-bottom: -1px;
		padding-inline: var(--pc-space-12);
		border-bottom-width: 3px;
		font-size: var(--pc-fs-base);
		white-space: nowrap;
		color: var(--pc-grey);
	}

	.pc-product .woocommerce-tabs ul.tabs li.active a {
		color: var(--pc-black);
	}
}

/*
 * WooCommerce vykresľuje galériu s `opacity: 0` a odkrýva ju až jeho
 * skript (flexslider). Ak sa skript nenačíta — napríklad keď ho
 * odloží optimalizačný plugin — galéria ostane neviditeľná.
 * Preto ju odkrývame natvrdo; slider funguje ďalej, len sa
 * nespolieha na JS pri prvom zobrazení.
 */
.pc-product__gallery .woocommerce-product-gallery {
	opacity: 1 !important;
}

/* ==========================================================================
   NÁKUPNÝ PANEL — prestavba podľa Figmy (node 1:676)

   Jedna mriežka namiesto dvoch stĺpcov. Formulár WooCommerce dostane
   `display: contents`, takže jeho časti sadnú do mriežky priamo —
   markup formulára ostáva natívny aj so všetkými hookmi.

   Rozloženie:
     riadok 1   varianty (len variabilný produkt)   |  box so zľavami
     riadok 2   cena                                |  (box pokračuje)
     riadok 3   množstvo                            |  skladová hláška
     riadok 4   (prázdne)                           |  Pridať do košíka
   ========================================================================== */

.pc-product__buy {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 40px;
	row-gap: var(--pc-space-24);
	align-items: start;
	/* Obsah panela sa drží pri spodku, aby cena aj tlačidlo končili na
	   rovnakej linke ako spodok galérie vedľa. */
	align-content: end;
	margin-top: var(--pc-space-32);
}

.pc-product__buy form.cart,
.pc-product__buy .woocommerce-variation-add-to-cart {
	display: contents;
}

/*
 * `.single_variation_wrap` je obal, ktorý WooCommerce pridáva LEN pri
 * variabilných produktoch — a práve on bol príčinou toho, že množstvo
 * a tlačidlo skončili pod sebou. Nie sú totiž jeho súrodencami
 * v mriežke, ale deťmi tohto obalu, takže sa im priradenie stĺpca
 * a riadka vôbec neuplatnilo.
 *
 * `!important` je tu nutné: skript variantov obal rozbaľuje cez
 * `slideDown()`, ktorý mu dopíše `display: block` priamo do atribútu
 * `style` — a ten by naše pravidlo prebil.
 */
.pc-product__buy .single_variation_wrap,
.pc-product__buy .woocommerce-variation {
	display: contents !important;
}

/* ---- Bez variantov ------------------------------------------------------
   Množstvo a tlačidlo sú v ROVNAKOM riadku, aby boli zarovnané —
   vo Figme končia na tej istej linke.                                     */

/*
 * Cena stojí v RIADKU SO SKLADOM, hneď nad dvojicou množstvo + tlačidlo.
 * Predtým bola hore vedľa zliav a keď produkt zľavy nemal, ostávala
 * medzi ňou a tlačidlom diera cez pol panela.
 */
.pc-product__prices {
	grid-column: 1;
	grid-row: 3;
	align-self: end;
	margin: 0;
}

.pc-product__buy .pc-bulk {
	grid-column: 2;
	grid-row: 1;
}

/*
 * Darček ide cez celú šírku panela, nie do pravého stĺpca. Názov
 * produktu s náhľadom sa do polovice šírky nezmestí a lámal sa po
 * jednom slove.
 */
.pc-product__buy .pc-gift {
	grid-column: 1 / -1;
	grid-row: 2;
	align-self: end;
}

/* Bez pásiem si darček vezme ich riadok, aby hore neostala diera. */
.pc-product__buy:not(:has(.pc-bulk)) .pc-gift {
	grid-row: 1;
}

.pc-product__buy .quantity {
	grid-column: 1;
	grid-row: 4;
	align-self: end;
}

/*
 * Skladová hláška je vo Figme nad tlačidlom, modrá a zarovnaná na stred
 * jeho šírky (node 1:690). MUSÍ mať vlastný riadok — keď sedela
 * v rovnakej bunke ako tlačidlo, tlačidlo ju prekrylo a vyzeralo to,
 * že sa nezobrazuje vôbec.
 */
/*
 * Skladová hláška patrí NAD dvojicu množstvo + tlačidlo, nie vedľa ceny.
 * Riadok 3 drží celú šírku, takže rozloženie vyzerá rovnako aj vtedy,
 * keď produkt nemá množstevné zľavy a pravý stĺpec je prázdny.
 */
.pc-product__stock {
	grid-column: 2;
	grid-row: 3;
	align-self: end;
	margin: 0;
	font-size: var(--pc-fs-small);
	font-weight: var(--pc-weight-bold);
	color: var(--pc-blue);
	text-align: center;
}

.pc-product__stock .stock {
	margin: 0;
	color: inherit;
	text-align: right;
}

.pc-product__stock .pc-stock--out {
	color: var(--pc-grey);
}

/*
 * Dostupnosť vypisujú aj šablóny WooCommerce a niektoré pluginy —
 * na detaile by potom bola dvakrát. Necháme len tú našu.
 */
.pc-product .stock {
	display: none;
}

.pc-product__stock .stock {
	display: block;
}

.pc-product__buy .single_add_to_cart_button {
	grid-column: 2;
	grid-row: 4;
	align-self: end;
	width: 100%;
}

.pc-product__buy .reset_variations {
	grid-column: 1;
	grid-row: 5;
	font-size: var(--pc-fs-small);
}

/* ---- S variantmi: výber sa vsunie nad cenu ------------------------------ */

.pc-product__buy:has(.variations) .variations {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}

/* Popis varianty má vlastný riadok — v bunke s výberom by ho prekryl. */
.pc-product__buy:has(.variations) .woocommerce-variation-description {
	grid-column: 1;
	grid-row: 3;
	margin: 0;
	font-size: var(--pc-fs-small);
}

.pc-product__buy:has(.variations) .pc-product__prices,
.pc-product__buy .woocommerce-variation-price {
	grid-column: 1;
	grid-row: 3;
	align-self: end;
}

.pc-product__buy:has(.variations) .pc-product__prices {
	align-self: end;
}

.pc-product__buy:has(.variations) .pc-bulk {
	grid-row: 1 / span 2;
}

/*
 * Pri variantoch NEROZŤAHUJEME sklad cez obidva stĺpce. S `1 / -1`
 * sedel v tej istej bunke ako cena (obe v riadku 3) a text sa
 * doslova prekrýval — „s DPH" a „Skladom" cez seba.
 */
.pc-product__buy:has(.variations) .pc-product__stock {
	grid-row: 3;
	grid-column: 2;
}

.pc-product__buy:has(.variations) .reset_variations {
	grid-row: 5;
}

/*
 * Množstvo a tlačidlo pri variantoch — rovnaký riadok ako bez nich.
 * Vo Figme (node 1:676) je množstvo vľavo pod cenou a tlačidlo vpravo
 * pod skladovou hláškou, oboje zarovnané na spodok.
 */
.pc-product__buy:has(.variations) .quantity {
	grid-column: 1;
	grid-row: 4;
	align-self: end;
}

.pc-product__buy:has(.variations) .single_add_to_cart_button {
	grid-column: 2;
	grid-row: 4;
	align-self: end;
}

/* Dostupnosť varianty duplikuje našu skladovú hlášku. */
.pc-product__buy .woocommerce-variation-availability {
	display: none;
}

/*
 * Cena varianty od WooCommerce. Kým skript neprepisuje našu cenu,
 * musí ostať viditeľná — inak by pri vypnutom JavaScripte zákazník
 * cenu varianty nevidel vôbec. Triedu `pc-price-synced` pridáva
 * skript až vtedy, keď si prepis prevzal.
 */
.pc-product__buy.pc-price-synced .woocommerce-variation-price {
	display: none;
}

/* ==========================================================================
   ZAŠKRTÁVACIE POLE ATRIBÚTU  (uzáver: s rozprašovačom)

   Markup skladá skript z pôvodného `<select>`, ktorý ostáva v stránke
   skrytý — variantový skript WooCommerce číta práve jeho. Vzhľad je
   rovnaký ako pri ostatných zaškrtávacích poliach témy (.pc-check).
   ========================================================================== */

.pc-choice {
	display: inline-flex;
	align-items: center;
	gap: var(--pc-space-12);
	cursor: pointer;
}

.pc-choice__select {
	display: none;
}

/* Pôvodné políčko ostáva pre čítačky a klávesnicu, len ho nevidno. */
.pc-choice__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.pc-choice__box {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 1px solid #cdcdcd;
	border-radius: var(--pc-radius-xs);
	background: var(--pc-white);
	transition:
		background-color var(--pc-duration) var(--pc-ease),
		border-color var(--pc-duration) var(--pc-ease);
}

.pc-choice__box::after {
	content: '';
	width: 12px;
	height: 6px;
	border-inline-start: 2px solid var(--pc-white);
	border-block-end: 2px solid var(--pc-white);
	transform: rotate(-45deg) translate(1px, -1px);
	opacity: 0;
}

.pc-choice__input:checked + .pc-choice__box {
	border-color: var(--pc-blue);
	background: var(--pc-blue);
}

.pc-choice__input:checked + .pc-choice__box::after {
	opacity: 1;
}

.pc-choice__input:focus-visible + .pc-choice__box {
	outline: 2px solid var(--pc-blue);
	outline-offset: 2px;
}

.pc-choice__label {
	font-size: var(--pc-fs-small);
	line-height: 1.3;
}

.pc-choice__input:disabled ~ .pc-choice__label,
.pc-choice__input:disabled + .pc-choice__box {
	opacity: 0.45;
}

/*
 * Keď sú všetky atribúty zaškrtávacie polia, odkaz „Vymazať" nemá čo
 * mazať — pole je vždy v jednom z dvoch stavov. Triedu pridáva skript,
 * takže pri kombinácii so zoznamom odkaz ostáva.
 */
.pc-product__buy.pc-choice-only .reset_variations {
	display: none;
}

/* ==========================================================================
   MNOŽSTVO — vlastné − a +

   Natívne šípky číselného poľa vyzerajú v každom prehliadači inak
   a na dotyku sa takmer nedajú trafiť. Tlačidlá dopĺňa skript
   (assets/js/woo-qty.js), tu je len ich vzhľad.
   ========================================================================== */

.pc-qty {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	border: 1px solid #b5b5b5;
	border-radius: var(--pc-radius-xs);
	background: var(--pc-white);
	overflow: hidden;
}

.pc-qty__btn {
	flex: 0 0 auto;
	width: 48px;
	height: 56px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--pc-font);
	font-size: 22px;
	line-height: 1;
	color: var(--pc-black);
	cursor: pointer;
	transition: background var(--pc-duration) var(--pc-ease);
}

.pc-qty__btn:hover {
	background: var(--pc-mist);
}

.pc-qty__btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* Systémové šípky preč — máme vlastné. */
.pc-qty input[type='number'] {
	width: 100%;
	min-width: 48px;
	height: 56px;
	border: 0;
	background: none;
	font-family: var(--pc-font);
	font-size: var(--pc-fs-base);
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

.pc-qty input[type='number']::-webkit-outer-spin-button,
.pc-qty input[type='number']::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

/*
 * V košíku je riadok nižší než na detaile. Tlačidlá boli 30px široké
 * a lepili sa na číslo — teraz majú vlastný priestor a číslo si berie
 * zvyšok šírky bunky.
 */
.pc-cart__qty .pc-qty__btn,
.pc-cart__qty .pc-qty input[type='number'] {
	height: 43px;
}

.pc-cart__qty .pc-qty__btn {
	width: 40px;
	font-size: 20px;
}

.pc-cart__qty .pc-qty input[type='number'] {
	flex: 1 1 auto;
	min-width: 0;
}

/* ==========================================================================
   RESPONZIVITA NÁKUPNÉHO PANELA
   ========================================================================== */

@media (max-width: 700px) {
	.pc-product__buy {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Na mobile je poradie iné než na desktope: cena, zľavy, množstvo,
	 * sklad, tlačidlo. Preto sa priradenia prepíšu, nie zrušia — inak
	 * by sa poradie riadilo poradím v HTML, kde je formulár posledný.
	 */
	.pc-product__buy .variations,
	.pc-product__buy:has(.variations) .variations { grid-row: 1; }

	.pc-product__prices,
	.pc-product__buy .woocommerce-variation-price,
	.pc-product__buy:has(.variations) .pc-product__prices { grid-row: 2; }

	.pc-product__buy .pc-bulk,
	.pc-product__buy:has(.variations) .pc-bulk { grid-row: 3; }

	.pc-product__buy .pc-gift,
	.pc-product__buy:not(:has(.pc-bulk)) .pc-gift { grid-row: 4; }

	.pc-product__stock,
	.pc-product__buy:has(.variations) .pc-product__stock { grid-row: 5; }

	.pc-product__buy .quantity { grid-row: 6; }
	.pc-product__buy .single_add_to_cart_button { grid-row: 7; }

	.pc-product__buy .reset_variations,
	.pc-product__buy:has(.variations) .reset_variations { grid-row: 8; }

	/* Na jednom stĺpci nemá „drž sa pri spodku" čo zarovnávať. */
	.pc-product__buy {
		align-content: start;
	}

	.pc-product__stock {
		text-align: start;
	}

	/*
	 * Fotka poradkyne je v absolútne umiestnenej vrstve. WooCommerce
	 * jej cez `.woocommerce img { height: auto }` zoberie výšku a z boxu
	 * potom trčí — tu ju musíme vrátiť natvrdo.
	 */
	.pc-product__advisor-photo {
		height: 100% !important;
	}

	.pc-product__buy > *,
	.pc-product__buy .pc-bulk,
	.pc-product__buy .pc-gift,
	.pc-product__buy .quantity,
	.pc-product__buy .single_add_to_cart_button,
	.pc-product__buy:has(.variations) .pc-product__stock {
		grid-column: 1;
	}

	.pc-product__stock .stock {
		text-align: left;
	}

}

/* ==========================================================================
   NA STIAHNUTIE  —  záložka ako kartičky
   ========================================================================== */

/* Na celú šírku panela — súbory sú zoznam, nie mriežka dlaždíc. */
.pc-downloads {
	display: grid;
	gap: var(--pc-space-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-downloads__link {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--pc-space-16);
	padding: var(--pc-space-16) var(--pc-space-24);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-sm);
	background: var(--pc-white);
	color: var(--pc-black);
	text-decoration: none;
	transition:
		border-color var(--pc-duration) var(--pc-ease),
		background var(--pc-duration) var(--pc-ease);
}

/*
 * Výzva na stiahnutie je vpravo. Nie je to samostatné tlačidlo —
 * klikateľný je celý riadok, takže sa cieľ nedá minúť.
 */
.pc-downloads__link::after {
	content: attr(data-cta);
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding-inline: var(--pc-space-24);
	border-radius: var(--pc-radius-xs);
	background: var(--pc-blue);
	font-size: var(--pc-fs-small);
	font-weight: var(--pc-weight-bold);
	color: var(--pc-white);
	white-space: nowrap;
}

.pc-downloads__link:hover::after,
.pc-downloads__link:focus-visible::after {
	background: var(--pc-blue-dark);
}

@media (max-width: 560px) {
	.pc-downloads__link {
		grid-template-columns: 44px minmax(0, 1fr);
	}

	.pc-downloads__link::after {
		grid-column: 1 / -1;
		justify-content: center;
	}
}

.pc-downloads__link:hover,
.pc-downloads__link:focus-visible {
	border-color: var(--pc-blue);
	background: var(--pc-sky);
	text-decoration: none;
}

/* Prípona namiesto ikony — netreba udržiavať sadu ikon pre každý formát. */
.pc-downloads__ext {
	display: grid;
	place-items: center;
	flex: 0 0 52px;
	height: 52px;
	border-radius: var(--pc-radius-xs);
	background: var(--pc-blue);
	font-size: var(--pc-fs-micro);
	font-weight: var(--pc-weight-bold);
	color: var(--pc-white);
}

.pc-downloads__body {
	min-width: 0;
}

.pc-downloads__label {
	display: block;
	font-size: var(--pc-fs-base);
	font-weight: var(--pc-weight-bold);
	line-height: 1.3;
}

.pc-downloads__note {
	display: block;
	margin-top: 2px;
	font-size: var(--pc-fs-small);
	color: var(--pc-grey);
}

/* ==========================================================================
   ČASTÉ OTÁZKY NA PRODUKTE  —  rozbaľovacie kartičky

   Rozbaľovanie robí `<details>`, nie skript: funguje bez JavaScriptu
   a prehliadač v ňom vie hľadať cez Ctrl+F.
   ========================================================================== */

/* Otázky používajú spoločný akordeón (.pc-faq__item v components.css)
   a zaberajú celú šírku záložky. */
.pc-pfaq {
	width: 100%;
}

/* ==========================================================================
   GALÉRIA — hlavná fotka a náhľady

   Prepínanie robí assets/js/woo-gallery.js. Bez skriptu ostane
   viditeľná prvá fotka a zvyšok sa jednoducho vypíše pod ňou —
   produkt teda nikdy neostane bez obrázka.
   ========================================================================== */

/*
 * Javisko má stály štvorcový tvar. Fotky produktov sú raz na výšku,
 * raz na šírku — bez pevného pomeru raz zaberie galéria pol obrazovky
 * a inokedy tretinu, a nákupný panel vedľa nej poskakuje.
 * `contain` zaručí, že sa nič neoreže.
 */
.pc-gallery__stage {
	position: relative;
	display: grid;
	aspect-ratio: 1 / 1;
}

/* Fotky ležia na sebe, aby javisko malo výšku najvyššej z nich. */
.pc-gallery__stage .woocommerce-product-gallery__image {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.35s var(--pc-ease),
		visibility 0s linear 0.35s;
}

.pc-gallery__stage .woocommerce-product-gallery__image.is-current {
	opacity: 1;
	visibility: visible;
	transition:
		opacity 0.35s var(--pc-ease),
		visibility 0s;
}

/*
 * Reťaz troch tried je nutná: WooCommerce dáva `.woocommerce img`
 * `height: auto` a pri rovnakej špecificite rozhoduje poradie súborov,
 * ktoré nemáme pod kontrolou. Bez pevnej výšky sa fotka do javiska
 * nevpíše a pomer strán nemá čo držať.
 */
.pc-product__gallery .pc-gallery__stage img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Lupa (assets/js/woo-gallery.js) — len na zariadeniach s myšou. */
.pc-gallery__stage {
	overflow: hidden;
	border-radius: 10px;
	cursor: zoom-in;
}

.pc-product__gallery .pc-gallery__stage--zoom img {
	transition: transform var(--pc-duration) var(--pc-ease);
}

.pc-product__gallery .pc-gallery__stage--zoom.is-zooming .is-current img {
	transform: scale(2);
}

.pc-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-space-12);
	margin: var(--pc-space-24) 0 0;
	padding: 0;
	list-style: none;
}

/* Náhľady sú štvorce — rovnaký tvar bez ohľadu na orientáciu fotky. */
.pc-gallery__thumb {
	display: block;
	width: 96px;
	height: 96px;
	padding: 6px;
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-sm);
	background: var(--pc-white);
	cursor: pointer;
	transition: border-color var(--pc-duration) var(--pc-ease);
}

.pc-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pc-gallery__thumb[aria-current='true'] {
	border-color: var(--pc-blue);
}

.pc-gallery__thumb:hover {
	border-color: var(--pc-blue);
}

@media (max-width: 700px) {
	.pc-gallery__thumb {
		width: 72px;
		height: 72px;
	}
}


/* ==========================================================================
   MIX & MATCH  —  zostava „Vyberte si N položiek"

   Plugin WooCommerce Mix and Match kreslí vnútri `form.cart` celú
   tabuľku podproduktov, vlastný stav („0/5 items") aj vlastné tlačidlo.

   Formulár sa preto NEROZPÚŠŤA do mriežky panela. `display: contents`
   je správne pre bežný Woo formulár, kde sú v ňom len množstvo
   a tlačidlo — tu by sa tabuľka, stav a tlačidlo rozsypali po bunkách
   mriežky a tabuľka by skončila pod boxom množstevných zliav.

   Zostava dostane vlastný riadok cez celú šírku, pod cenou a hláškou.
   ========================================================================== */

.pc-product__buy form.cart.mnm_form {
	display: block;
	grid-column: 1 / -1;
	/* Riadok 4 — pod pásmami (1), darčekom (2) a cenou so skladom (3). */
	grid-row: 4;
	margin-top: 0;
}

.pc-product__buy .mnm_child_products {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.pc-product__buy .mnm_child_products th,
.pc-product__buy .mnm_child_products td {
	padding: var(--pc-space-12) var(--pc-space-8);
	border-bottom: 1px solid var(--pc-border);
	text-align: start;
	vertical-align: middle;
}

.pc-product__buy .mnm_child_products th {
	font-size: var(--pc-fs-small);
	font-weight: var(--pc-weight-bold);
}

.pc-product__buy .mnm_child_products .product-thumbnail {
	width: 88px;
}

.pc-product__buy .mnm_child_products .product-thumbnail img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: contain;
}

/* Výber množstva patrí k pravému okraju, nech tvorí zvislý stĺpec. */
.pc-product__buy .mnm_child_products .product-quantity {
	width: 180px;
	text-align: end;
}

.pc-product__buy .mnm_child_products .quantity {
	margin-inline-start: auto;
}

/* Názov podproduktu je odkaz, nie nadpis — ostáva v texte panela. */
.pc-product__buy .mnm_child_products .product-details .mnm_product_title,
.pc-product__buy .mnm_child_products .product-details .woocommerce-loop-product__title {
	margin: 0;
	font-size: var(--pc-fs-base);
	font-weight: var(--pc-weight-bold);
	line-height: 1.25;
}

/*
 * Varianta podproduktu („UZÁVER: s rozprašovačom") na jednom riadku.
 * WooCommerce ju kreslí ako `<dl>` a prehliadač dáva `dt` a `dd` pod
 * seba — z jedného údaja boli dva riadky a zoznam sa neúmerne natiahol.
 */
.pc-product__buy .mnm_child_products .variation {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	margin: 4px 0 0;
	font-size: var(--pc-fs-micro);
	line-height: 1.3;
	color: var(--pc-grey);
}

.pc-product__buy .mnm_child_products .variation dt,
.pc-product__buy .mnm_child_products .variation dd {
	margin: 0;
	padding: 0;
}

.pc-product__buy .mnm_child_products .variation dd p {
	margin: 0;
}

/*
 * Skladová hláška pri podproduktoch sa NEZOBRAZUJE. Balík hlási svoju
 * dostupnosť ako celok (`.pc-product__stock`) a zopakovaná pri každej
 * položke pôsobí ako iná informácia o tom istom.
 */
.pc-product__buy .mnm_child_products .stock {
	display: none;
}

.pc-product__buy .mnm_cart,
.pc-product__buy .mnm_button_wrap {
	margin-top: var(--pc-space-16);
}

/* ---- Pevné zloženie balíka ---------------------------------------------

   Množstvá vyplní skript po jednom kuse a stĺpec s výberom sa skryje —
   z rozpisu ostane zoznam „1× PROFI-FAST", presne ako na starom webe.
   Polia zostávajú v stránke, len ich nevidno: bez nich by sa balík
   nemal ako odoslať.
   ---------------------------------------------------------------------- */

.pc-mnm-locked .mnm_child_products .product-quantity {
	display: none;
}

/*
 * Stav konfigurátora („29,90 € (5/5 items) — Vybrali ste 5 položiek")
 * je pri pevnom balíku informácia o ničom: zloženie sa nedá zmeniť,
 * takže niet čo počítať. Cena je vyššie vo vlastnom riadku.
 *
 * Skrýva sa, NEODSTRAŇUJE — v tom istom prvku sú `data-` atribúty,
 * z ktorých číta skript pluginu.
 */
.pc-mnm-locked .mnm_cart {
	display: none;
}

.pc-mnm-locked .mnm_reset {
	display: none !important;
}

.pc-mnm-qty {
	font-weight: var(--pc-weight-bold);
}

/*
 * Množstvo a tlačidlo vedľa seba, rovnako ako pri bežnom produkte.
 * Formulár Mix & Match nie je `display: contents`, takže sa na jeho
 * vnútro nevzťahuje mriežka panela — obidva prvky by inak ostali
 * blokové a roztiahli sa cez celú šírku pod seba.
 */
.pc-product__buy .mnm_button_wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--pc-space-16);
}

.pc-product__buy .mnm_button_wrap .quantity {
	flex: 0 0 auto;
}

.pc-product__buy .mnm_button_wrap .single_add_to_cart_button,
.pc-product__buy .mnm_button_wrap button[type='submit'] {
	flex: 1 1 240px;
	width: auto;
	margin: 0;
}

@media (max-width: 700px) {
	/* Na telefóne sa náhľad, názov a množstvo do troch stĺpcov nezmestia. */
	.pc-product__buy .mnm_child_products .product-thumbnail {
		width: 64px;
	}

	.pc-product__buy .mnm_child_products .product-thumbnail img {
		width: 52px;
		height: 52px;
	}

	.pc-product__buy .mnm_child_products .product-quantity {
		width: 132px;
	}
}


/* ==========================================================================
   INTERNÝ SKLAD  —  panel pre obsluhu obchodu

   Zákazník ho nikdy neuvidí (vykresľuje sa len prihlásenej obsluhe),
   takže nie je z Figmy. Vyzerá zámerne inak než zvyšok stránky —
   je to prevádzkový údaj, nie súčasť ponuky.
   ========================================================================== */

.pc-stockbox {
	margin-top: var(--pc-space-24);
	padding: var(--pc-space-16);
	border: 1px dashed var(--pc-border);
	border-radius: var(--pc-radius-sm);
	background: var(--pc-mist);
}

.pc-stockbox__title {
	margin: 0 0 var(--pc-space-12);
	font-size: var(--pc-fs-micro);
	font-weight: var(--pc-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--pc-caption);
}

.pc-stockbox__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-space-8);
}

.pc-stockbox__row + .pc-stockbox__row {
	margin-top: var(--pc-space-8);
}

.pc-stockbox__card {
	padding: 6px 10px;
	border-radius: var(--pc-radius-sm);
	background: var(--pc-white);
	font-size: var(--pc-fs-micro);
	line-height: 1.2;
	white-space: nowrap;
}

/* Sklad, z ktorého sa predáva — jediné číslo, ktoré rozhoduje o predaji. */
.pc-stockbox__card--home {
	background: var(--pc-leaf);
	font-weight: var(--pc-weight-bold);
}

.pc-stockbox__card--total {
	background: var(--pc-sky);
	font-weight: var(--pc-weight-bold);
}

/* Katalógové číslo variantu — kotva riadka, nie údaj o zásobe. */
.pc-stockbox__card--sku {
	background: var(--pc-white);
	font-weight: var(--pc-weight-bold);
}

.pc-stockbox__card--missing {
	color: var(--pc-caption);
}

.pc-stockbox__empty {
	margin: 0;
	font-size: var(--pc-fs-micro);
	color: var(--pc-caption);
}

/*
 * Prepočet pri množstevných pásmach: cena za kus sa zmení a pod ňou
 * pribudne celková suma. Riadok dopĺňa skript (assets/js/woo-buy.js),
 * v HTML nie je.
 */
.pc-product__total {
	flex-basis: 100%;
	font-size: var(--pc-fs-small);
	font-weight: var(--pc-weight-regular);
	line-height: 1.3;
	color: var(--pc-caption);
}

/* ==========================================================================
   PRED A PO  —  posuvné porovnanie

   Fotka PO leží dole, PRED nad ňou orezaná zľava po polohu posuvníka
   (`--pc-ba-pos`). Posuvník je neviditeľný `<input type="range">` cez
   celú plochu — ťahá sa myšou aj prstom a funguje šípkami.
   ========================================================================== */

.pc-before-after__pairs {
	/*
	 * Všetky porovnania majú rovnaký rámik, takže stačí obyčajná mriežka.
	 * Najviac tri stĺpce, na užšej obrazovke dva a na telefóne jeden.
	 * `auto-fill` drží prázdne stĺpce — jedno porovnanie má teda šírku
	 * tretiny, nie celého riadka.
	 */
	--pc-ba-gap: var(--pc-space-32);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(260px, calc((100% - 2 * var(--pc-ba-gap)) / 3)), 1fr));
	gap: var(--pc-ba-gap);
	margin-bottom: var(--pc-space-32);
}

.pc-ba {
	margin: 0;
}


.pc-ba__stage {
	position: relative;
	overflow: hidden;
	/* Pevný rámik na výšku — fotky sa doň orežú (pozri product-extras.php). */
	aspect-ratio: 3 / 4;
	border-radius: var(--pc-radius-sm);
	/* Svetlý podklad — fotka s iným pomerom strán má okolo seba okraj. */
	background: var(--pc-mist);
	user-select: none;
}

/* Dve triedy: .woocommerce img { height: auto } by inak fotku nenaťahal na výšku rámika. */
.pc-ba .pc-ba__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.pc-ba__img--before {
	clip-path: inset(0 calc(100% - var(--pc-ba-pos)) 0 0);
}

/* Zvislá čiara s okrúhlym úchytom v strede. */
.pc-ba__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pc-ba-pos);
	width: 2px;
	margin-left: -1px;
	background: var(--pc-white);
	pointer-events: none;
}

.pc-ba__knob {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: var(--pc-space-48);
	height: var(--pc-space-48);
	border: 2px solid var(--pc-white);
	border-radius: 50%;
	background: var(--pc-blue);
	color: var(--pc-white);
	transform: translate(-50%, -50%);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.pc-ba__knob svg {
	width: 24px;
	height: 24px;
}

.pc-ba__label {
	position: absolute;
	bottom: var(--pc-space-12);
	padding: var(--pc-space-4) var(--pc-space-8);
	border-radius: var(--pc-radius-xs);
	font-size: var(--pc-fs-small);
	font-weight: var(--pc-weight-bold);
	color: var(--pc-white);
	background: rgba(0, 0, 0, 0.45);
	pointer-events: none;
}

.pc-ba__label--before {
	left: var(--pc-space-12);
}

.pc-ba__label--after {
	right: var(--pc-space-12);
}

.pc-ba__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	touch-action: pan-y;
}

.pc-ba__range:focus-visible ~ .pc-ba__handle .pc-ba__knob,
.pc-ba:focus-within .pc-ba__handle .pc-ba__knob {
	outline: 2px solid var(--pc-blue-dark);
	outline-offset: 2px;
}

.pc-ba__caption {
	margin-top: var(--pc-space-12);
	font-size: var(--pc-fs-small);
	color: var(--pc-caption);
	text-align: center;
}

.pc-before-after__title {
	margin: var(--pc-space-48) 0 var(--pc-space-16);
	font-size: var(--pc-fs-lead);
	font-weight: var(--pc-weight-bold);
}

.pc-before-after__pairs:empty + .pc-before-after__title,
.pc-before-after > .pc-before-after__title:first-child {
	margin-top: 0;
}

/*
 * Rovnaká mozaika ako porovnania nad ňou — fotky sú v pôvodnom pomere
 * strán (nič sa neoreže) a dosť veľké, aby bolo výsledok vidieť bez
 * klikania. Klik otvorí fotku v lightboxe.
 */
.pc-before-after__gallery {
	columns: 3 280px;
	column-gap: var(--pc-space-24);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-before-after__shot {
	break-inside: avoid;
	margin-bottom: var(--pc-space-24);
}

.pc-before-after__shot a {
	display: block;
	overflow: hidden;
	border-radius: var(--pc-radius-sm);
	cursor: zoom-in;
}

.pc-before-after__shot img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform var(--pc-duration) var(--pc-ease);
}

.pc-before-after__shot a:hover img {
	transform: scale(1.04);
}

/* ==========================================================================
   NÁVOD NA POUŽITIE  —  video z Bunny Stream v záložke
   ========================================================================== */

.pc-product-guides {
	display: grid;
	gap: var(--pc-space-32);
	max-width: 960px;
	/* Video stojí na strede záložky, nie pri ľavom okraji. */
	margin-inline: auto;
}

.pc-product-guides__item {
	margin: 0;
}

.pc-product-guides__player {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--pc-radius-sm);
	background: var(--pc-black);
}

.pc-product-guides__player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.pc-product-guides__caption {
	margin-top: var(--pc-space-12);
	font-size: var(--pc-fs-small);
	font-weight: var(--pc-weight-bold);
}

/* ==========================================================================
   RECENZIE  —  záložka „Recenzie" (woocommerce/single-product-reviews.php)

   Poradie: úvodná veta, nadpis so súhrnom hviezd, karta „Napíšte
   hodnotenie" (formulár alebo prihlásenie), pod ňou recenzie.
   Štýly WooCommerce pre hviezdy sa tu prebíjajú — hviezdy sú znaky „★".
   ========================================================================== */

.pc-previews {
	display: grid;
	gap: var(--pc-space-24);
	max-width: 880px;
}

.pc-previews__intro {
	margin: 0;
	font-size: var(--pc-fs-base);
}

.pc-previews__head {
	display: grid;
	gap: var(--pc-space-8);
}

.pc-previews__title {
	margin: 0;
	font-size: var(--pc-fs-title);
	font-weight: var(--pc-weight-bold);
	line-height: var(--pc-lh-tight);
}

.pc-previews__summary {
	display: flex;
	align-items: center;
	gap: var(--pc-space-12);
	margin: 0;
	font-size: var(--pc-fs-base);
}

.pc-previews__empty {
	margin: 0;
	font-size: var(--pc-fs-base);
	color: var(--pc-caption);
}

/* ---- Karta „Napíšte hodnotenie" ---------------------------------------- */

.pc-previews__card {
	display: grid;
	gap: var(--pc-space-16);
	max-width: 640px;
	padding: var(--pc-space-32);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	background: var(--pc-mist);
}

.pc-previews .pc-previews__card-title {
	margin: 0;
	font-size: var(--pc-fs-price);
	font-weight: var(--pc-weight-bold);
	line-height: var(--pc-lh-tight);
}

.pc-previews__card-text {
	margin: 0;
	font-size: var(--pc-fs-base);
	line-height: var(--pc-lh-base);
}

.pc-previews__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-space-16);
	margin: var(--pc-space-8) 0 0;
}

/* Formulár */
.pc-previews #respond {
	margin: 0;
}

.pc-previews .comment-form {
	display: grid;
	gap: var(--pc-space-16);
	margin: var(--pc-space-16) 0 0;
}

.pc-previews .comment-form p {
	margin: 0;
}

.pc-previews .comment-form label,
.pc-previews__rating legend {
	display: block;
	margin-bottom: var(--pc-space-8);
	padding: 0;
	font-size: var(--pc-fs-small);
	font-weight: var(--pc-weight-bold);
}

.pc-previews .comment-form textarea,
.pc-previews .comment-form input[type="text"],
.pc-previews .comment-form input[type="email"] {
	width: 100%;
	padding: var(--pc-space-12) var(--pc-space-16);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-xs);
	background: var(--pc-white);
	font: inherit;
	font-size: var(--pc-fs-base);
}

.pc-previews .comment-form textarea {
	min-height: 140px;
	resize: vertical;
}

.pc-previews .comment-form textarea:focus {
	outline: 2px solid var(--pc-blue);
	outline-offset: 1px;
}

.pc-previews .form-submit {
	margin: 0;
}

.pc-previews .form-submit .submit {
	cursor: pointer;
}

/* Hviezdy vo formulári — prepínače od 5 po 1, obrátené cez row-reverse,
   aby `~` podsvietil všetky hviezdy po vybranú. */
.pc-previews__rating {
	margin: 0;
	padding: 0;
	border: 0;
}

.pc-stars-input {
	display: inline-flex;
	flex-direction: row-reverse;
	gap: var(--pc-space-4);
}

.pc-stars-input input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.pc-previews .pc-stars-input label {
	margin: 0;
	font-size: 34px;
	line-height: 1;
	color: var(--pc-border);
	cursor: pointer;
	transition: color var(--pc-duration) var(--pc-ease);
}

.pc-stars-input label::before {
	content: "★";
}

.pc-stars-input label:hover,
.pc-stars-input label:hover ~ label,
.pc-stars-input input:checked ~ label {
	color: var(--pc-star);
}

/* Pri prejdení nad hviezdami sa ukazuje hover, nie uložený výber. */
.pc-stars-input:hover input:checked ~ label:not(:hover):not(:hover ~ label) {
	color: var(--pc-border);
}

.pc-stars-input input:focus-visible + label {
	outline: 2px solid var(--pc-blue);
	outline-offset: 2px;
	border-radius: var(--pc-radius-xs);
}

/* ---- Zoznam recenzií --------------------------------------------------- */
/*
 * Štýly WooCommerce (woocommerce.css sa na detaile produktu načítava)
 * cielia `.woocommerce #reviews #comments ol.commentlist li …` — dve ID,
 * preto sú selektory nižšie zámerne rovnako silné a o prvok silnejšie.
 * Inak by ostalo odsadenie textu o 50 px, rámik okolo textu a avatar
 * prilepený v rohu.
 */

.pc-previews__list {
	max-width: 640px;
}

.pc-previews .commentlist {
	display: grid;
	gap: var(--pc-space-16);
	margin: 0;
	padding: 0;
	list-style: none;
}

body .pc-product #reviews #comments ol.commentlist li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

body .pc-product #reviews #comments ol.commentlist li .comment_container {
	display: block;
	padding: var(--pc-space-24);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	background: var(--pc-white);
}

/* Avatar vynechávame — zákazníci ho nemajú, všade by bola tá istá sivá ikonka. */
body .pc-product #reviews #comments ol.commentlist li img.avatar {
	display: none;
}

body .pc-product #reviews #comments ol.commentlist li .comment-text {
	display: grid;
	gap: var(--pc-space-8);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

body .pc-product #reviews #comments ol.commentlist li .comment-text .star-rating {
	float: none;
	margin: 0;
}

body .pc-product #reviews #comments ol.commentlist li .comment-text p.meta {
	margin: 0;
	font-size: var(--pc-fs-small);
	color: var(--pc-caption);
}

.pc-previews .woocommerce-review__author {
	font-weight: var(--pc-weight-bold);
	color: var(--pc-black);
}

.pc-previews .woocommerce-review__dash {
	margin-inline: var(--pc-space-4);
}

body .pc-product #reviews #comments ol.commentlist li .comment-text .description {
	margin: var(--pc-space-4) 0 0;
	font-size: var(--pc-fs-base);
	line-height: var(--pc-lh-base);
	color: var(--pc-black);
}

body .pc-product #reviews #comments ol.commentlist li .comment-text .description p {
	margin: 0;
}

body .pc-product #reviews #comments ol.commentlist li .comment-text .description p + p {
	margin-top: var(--pc-space-8);
}

/* Odpoveď obchodu na recenziu — odsadená pod pôvodnou. */
body .pc-product #reviews #comments ol.commentlist ul.children {
	margin: var(--pc-space-12) 0 0 var(--pc-space-32);
	padding: 0;
	list-style: none;
}

body .pc-product #reviews #comments ol.commentlist ul.children .comment_container {
	background: var(--pc-mist);
}

/* Hviezdy pri recenzii a v súhrne — sivý podklad, žlté orezané na šírku. */
.pc-product .star-rating {
	position: relative;
	float: none;
	width: 5.4em;
	height: 1.1em;
	overflow: hidden;
	font-family: var(--pc-font);
	font-size: var(--pc-fs-tile);
	line-height: 1;
	letter-spacing: 0.08em;
}

.pc-product .star-rating::before {
	content: "★★★★★";
	position: absolute;
	inset: 0;
	color: var(--pc-border);
}

.pc-product .star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	padding-top: 2em;
}

.pc-product .star-rating span::before {
	content: "★★★★★";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--pc-star);
}

@media (max-width: 760px) {
	.pc-previews__title {
		font-size: var(--pc-fs-heading);
	}

	.pc-previews__card {
		padding: var(--pc-space-24);
	}

	.pc-previews .pc-previews__card-title {
		font-size: var(--pc-fs-lead);
	}
}

/* ==========================================================================
   LEPIACI PRUH S PRODUKTOM  —  assets/js/woo-buybar.js

   Vysunie sa pod hlavičkou, keď je nákupný panel odrolovaný.
   ========================================================================== */

.pc-buybar {
	position: fixed;
	inset-inline: 0;
	top: var(--pc-buybar-top, 0);
	z-index: 150;
	border-bottom: 1px solid var(--pc-border);
	background: var(--pc-white);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	animation: pc-buybar-in var(--pc-duration) var(--pc-ease);
}

.pc-buybar[hidden] {
	display: none;
}

@keyframes pc-buybar-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
}

.pc-buybar__inner {
	display: flex;
	align-items: center;
	gap: var(--pc-space-16);
	padding-block: var(--pc-space-8);
}

.pc-buybar__img {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.pc-buybar__title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	font-weight: var(--pc-weight-bold);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.pc-buybar__price {
	flex: 0 0 auto;
	margin: 0;
	font-size: var(--pc-fs-lead);
	font-weight: var(--pc-weight-bold);
}

.pc-buybar__btn {
	flex: 0 0 auto;
}

@media (max-width: 600px) {
	.pc-buybar__img {
		display: none;
	}

	.pc-buybar__title {
		font-size: var(--pc-fs-small);
	}

	.pc-buybar__price {
		font-size: var(--pc-fs-base);
	}
}

/* ==========================================================================
   MOBIL: PRODUKTY S VÝBEROM (napr. uzáver s rozprašovačom)

   Pravidlá `:has(.variations)` pre množstvo a tlačidlo majú vyššiu
   prioritu ako mobilné pravidlá vyššie, takže tlačidlo ostávalo
   v 2. stĺpci. Mriežka sa tým na telefóne rozdelila na dve polovice
   a box „Nakúpte viac a ušetrite“ mal len ~130 px. Tu ich vraciame
   do jedného stĺpca v mobilnom poradí. (31.10.2026)
   ========================================================================== */

@media (max-width: 700px) {
	.pc-product__buy:has(.variations) .quantity {
		grid-column: 1;
		grid-row: 6;
	}

	.pc-product__buy:has(.variations) .single_add_to_cart_button {
		grid-column: 1;
		grid-row: 7;
	}

	.pc-product__buy:has(.variations) .woocommerce-variation-description {
		grid-column: 1;
		grid-row: auto;
	}
}

/* ==========================================================================
   BOX „POTREBUJETE PORADIŤ S VÝBEROM?“: TEXT VĽAVO V GRAFIKE, ŽENA VOĽNÁ

   Box je navrhnutý na ~680 px. Keď je užší (detail produktu na notebooku,
   košík na počítači), text s pevnou veľkosťou zasahoval do ženy na
   grafike. Kontajnerový dotaz sa riadi šírkou boxu: text sa zmenšuje
   pomerne k šírke (cqw), aby ostal v ľavej, prázdnej časti grafiky.
   Pod 440 px (telefón) sa text vedľa ženy čitateľne nezmestí, preto ide
   nad grafiku na biele pozadie a grafika je pod ním celá. (31.10.2026)
   ========================================================================== */

:has(> .pc-product__advisor) {
	container-type: inline-size;
}

@container (min-width: 440px) {
	.pc-product__advisor {
		aspect-ratio: 678 / 244;
		padding-block: 0;
	}

	.pc-product__advisor-photo {
		object-position: right center;
	}

	.pc-product__advisor-body {
		padding-inline: clamp(16px, 7cqw, 48px);
	}

	.pc-product__advisor-title {
		max-width: 45cqw;
		font-size: clamp(18px, 4.1cqw, 27.7px);
	}

	.pc-product__advisor-contact {
		--pc-contact-size: clamp(12px, 2.4cqw, 16px);
		--pc-contact-height: clamp(26px, 5.3cqw, 36px);
		--pc-contact-icon: clamp(18px, 4cqw, 27px);
		margin-top: clamp(6px, 1.6cqw, 11px);
	}
}

@container (max-width: 439.98px) {
	.pc-product__advisor {
		flex-direction: column;
		align-items: stretch;
		aspect-ratio: auto;
		padding: 0;
		border-radius: 0;
		overflow: visible;
		background: none;
	}

	.pc-product__advisor-body {
		order: 1;
		padding: 0 0 var(--pc-space-16);
	}

	.pc-product__advisor-title {
		max-width: none;
	}

	.pc-product__advisor-photo {
		position: static;
		order: 2;
		width: 100%;
		height: auto !important;
		aspect-ratio: 678 / 244;
		border-radius: 10px;
		object-fit: cover;
	}
}