/* ==========================================================================
   ZDIEĽANÉ KOMPONENTY — používa ich viac ako jedna sekcia.
   ========================================================================== */

/* ---- Dlaždica kategórie ----------------------------------------------- */
/*
 * Figma: biela dlaždica, radius 5px, ikona vľavo, text Figtree Bold.
 * Rovnaký komponent v dvoch kontextoch:
 *   mega menu (node 1:1516)      → 275×71.4, text 18px
 *   sekcia Kategórie (node 1:267) → 275×105,  text 22px
 * Rozmery preto nastavuje kontext, nie komponent — tu je len vzhľad.
 */

.pc-tile {
	display: flex;
	align-items: center;
	/* Figma: ikona začína na 14.7px, text vždy na 71.18px — bez ohľadu na
	   to, aká široká je ikona. Preto pevný slot, nie šírka podľa obsahu. */
	gap: 15px;
	height: 100%;
	min-height: var(--pc-tile-height, 72px);
	padding-inline: var(--pc-tile-padding, 15px);
	background: var(--pc-white);
	border-radius: var(--pc-radius-sm);
	color: var(--pc-black);
	transition:
		background-color var(--pc-duration) var(--pc-ease),
		box-shadow var(--pc-duration) var(--pc-ease);
}

.pc-tile:hover,
.pc-tile:focus-visible {
	background: var(--pc-sky);
	text-decoration: none;
}

.pc-tile--highlight {
	background: var(--pc-leaf);
}

.pc-tile--highlight:hover,
.pc-tile--highlight:focus-visible {
	background: var(--pc-leaf);
	box-shadow: inset 0 0 0 1px var(--pc-blue);
}

.pc-tile__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Najširšia ikona z Figmy má 40.07px — slot je preto 41px. */
	flex: 0 0 var(--pc-tile-icon, 41px);
	width: var(--pc-tile-icon, 41px);
}

/*
 * Ikony si nesú vlastné width/height z Figmy, takže sa kreslia vo svojej
 * navrhnutej veľkosti (30–41px) a nie sú nasilu naťahané na jeden rozmer.
 * `max-width` je len poistka pre menšie varianty dlaždice.
 */
.pc-tile__icon svg {
	max-width: 100%;
	height: auto;
}

/*
 * Obrázok nahratý pri kategórii. Na rozdiel od ikon z Figmy nemá
 * navrhnutú veľkosť, preto sa vpisuje do slotu — `contain`, aby sa
 * nikdy neorezal, a strop výšky, aby vysoká fotka nerozťahovala riadok.
 */
.pc-tile__icon img {
	width: 100%;
	height: auto;
	max-height: var(--pc-tile-icon, 41px);
	object-fit: contain;
}

.pc-tile__label {
	font-family: var(--pc-font-tile);
	font-size: var(--pc-tile-label, var(--pc-fs-small));
	font-weight: var(--pc-weight-bold);
	/*
	 * Riadkovanie je pomerové, nie pevných 26px. Tie boli vypočítané pre
	 * najväčší variant a pri menšom písme z dvojriadkového názvu robili
	 * rozlietaný blok.
	 */
	line-height: 1.25;
}

/* ---- Vyhľadávací formulár ---------------------------------------------- */
/*
 * Rovnaký vzhľad ako polia v obchode: biele pole s 1px okrajom #b5b5b5,
 * výška 48px, vedľa neho modré tlačidlo. Ikona lupy v poli je stlmená,
 * aby needovala pozornosť textu.
 */

.pc-search-form {
	display: flex;
	align-items: stretch;
	gap: var(--pc-space-12);
	width: 100%;
}

.pc-search-form__field {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
}

.pc-search-form__icon {
	position: absolute;
	left: 18px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	color: var(--pc-icon-muted);
	pointer-events: none;
}

.pc-search-form__icon svg {
	width: 100%;
	height: 100%;
}

.pc-search-form input[type='search'] {
	width: 100%;
	min-height: 48px;
	padding: 0 var(--pc-space-16) 0 50px;
	border: 1px solid #b5b5b5;
	border-radius: var(--pc-radius-xs);
	background: var(--pc-white);
	font-family: var(--pc-font);
	font-size: var(--pc-fs-small);
	color: var(--pc-black);
	appearance: none;
}

.pc-search-form input[type='search']::placeholder {
	color: var(--pc-grey);
}

.pc-search-form input[type='search']:focus-visible {
	border-color: var(--pc-blue);
	outline: none;
	box-shadow: 0 0 0 1px var(--pc-blue);
}

.pc-search-form__submit {
	flex: 0 0 auto;
	min-height: 48px;
	padding-inline: var(--pc-space-32);
}

@media (max-width: 560px) {
	.pc-search-form {
		flex-direction: column;
	}

	.pc-search-form__submit {
		width: 100%;
	}
}

/* ---- Formulár ---------------------------------------------------------- */
/*
 * Základ formulárov (kontakt, registrácia). Je tu, nie v CSS jednej
 * sekcie — inak by sa polia na stránke s druhým formulárom nenaštýlovali.
 * Vzhľad podľa Figmy: biele pole, okraj 1px #cfcfcf, radius 5, výška 50.
 */

.pc-form {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 31px 40px;
	margin-top: 40px;
}

.pc-form__row {
	margin: 0;
	min-width: 0;
}

.pc-form__row--full {
	grid-column: 1 / -1;
}

/* Súhlasy sedia pod sebou na celú šírku. */
.pc-form__row--check {
	grid-column: 1 / -1;
}

/*
 * IČO v kontaktnom formulári má zmysel len pri B2B — preto sa ukáže až
 * po zaškrtnutí. Cez `:has()`, teda bez skriptu: pole tak nikdy
 * neprebleskne pri načítaní stránky. (Registrácia má vlastný firemný
 * blok, ten sa riadi `pc-form__row--company`.)
 */
.pc-form__row--ico {
	display: none;
	grid-column: 1 / -1;
}

.pc-form:has(input[name='pc_b2b']:checked) .pc-form__row--ico {
	display: block;
}

.pc-form input[type='text'],
.pc-form input[type='email'],
.pc-form input[type='tel'],
.pc-form input[type='password'],
.pc-form textarea {
	width: 100%;
	min-height: 50px;
	padding: 15px 16px;
	border: 1px solid #cfcfcf;
	border-radius: 5px;
	background: var(--pc-white);
	font-family: var(--pc-font);
	font-size: var(--pc-fs-small);
	line-height: 1.25;
	color: var(--pc-black);
}

.pc-form textarea {
	min-height: 268px;
	resize: vertical;
}

.pc-form ::placeholder {
	color: var(--pc-caption);
	opacity: 1;
}

.pc-form input:focus-visible,
.pc-form textarea:focus-visible {
	border-color: var(--pc-blue);
	outline: none;
	box-shadow: 0 0 0 1px var(--pc-blue);
}

.pc-form .pc-check__label {
	font-family: var(--pc-font);
	font-size: var(--pc-fs-base);
	line-height: 1.3;
}

.pc-form__submit {
	width: 320px;
	max-width: 100%;
	min-height: 60px;
}

/* Pasca na roboty — pre človeka neviditeľná, pre čítačky skrytá. */
.pc-form__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.pc-form__note {
	max-width: 680px;
	margin-top: 32px;
	padding: var(--pc-space-16);
	border-radius: 5px;
	font-size: var(--pc-fs-base);
}

.pc-form__note--ok {
	background: var(--pc-leaf);
}

.pc-form__note--error {
	background: var(--pc-sky);
}


/* ---- Kontaktný riadok -------------------------------------------------- */
/*
 * Telefón a e-mail s ikonou. Používa sa v sekcii FAQ, v boku obchodu
 * aj inde — preto je tu, v globálnych komponentoch. Keď to bolo v CSS
 * sekcie FAQ, na výpise produktov sa štýl nenačítal a ikony narástli
 * do svojej pôvodnej veľkosti.
 */

.pc-contact {
	display: flex;
	flex-direction: column;
}

.pc-contact__item {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: var(--pc-contact-height, 50px);
	font-size: var(--pc-contact-size, var(--pc-fs-small));
	font-weight: var(--pc-weight-bold);
	line-height: var(--pc-contact-height, 50px);
	color: var(--pc-black);
	transition: opacity var(--pc-duration) var(--pc-ease);
}

.pc-contact__item:hover,
.pc-contact__item:focus-visible {
	opacity: 0.7;
	text-decoration: none;
}

.pc-contact__icon {
	display: grid;
	place-items: center;
	flex: 0 0 var(--pc-contact-icon, 27px);
	width: var(--pc-contact-icon, 27px);
	height: var(--pc-contact-icon, 27px);
}

.pc-contact__icon svg {
	width: 100%;
	height: 100%;
}

/* ---- Fotka s dekoratívnym nápisom -------------------------------------- */
/*
 * Používa sekcia FAQ na homepage aj stránka Časté otázky, preto je tu.
 * Nápis presahuje spodný okraj fotky, obal ho teda neoreže.
 */

.pc-faq__figure {
	position: relative;
	/* Nápis sa škáluje z fotky, nie z okna — fotka má pevný stĺpec. */
	container-type: inline-size;
	/* Figma: nadpis končí na 4381, fotka začína na 4409 */
	margin: 28px 0 0;
}

.pc-faq__photo {
	display: block;
	aspect-ratio: 319.887 / 371;
	border-radius: 10px;
	overflow: hidden;
}

.pc-faq__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Dekoratívny nápis presahuje spodný okraj fotky — vo Figme je jeho
 * spodok pod fotkou, preto `overflow` na obale nie je orezaný.
 */
.pc-faq__overlay {
	position: absolute;
	left: 50.3%;
	top: 67.3%;
	font-family: var(--pc-font-display);
	/* Figma: 100.2px na fotke širokej 319.9 → 31.3 % */
	font-size: 31.3cqw;
	font-weight: 800;
	line-height: 1;
	color: var(--pc-white);
	pointer-events: none;
}


/* ---- Akordeón --------------------------------------------------------- */
/*
 * Postavený na natívnom <details>, takže funguje bez JavaScriptu.
 * Marker skrývame — šípku kreslíme sami podľa Figmy.
 */

.pc-faq__item {
	border-bottom: 1px solid var(--pc-border);
}

.pc-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-24);
	/* Figma: riadok otázky 68.75px */
	min-height: 68.75px;
	padding-block: 12px;
	font-size: 24px;
	line-height: 1.25;
	cursor: pointer;
	list-style: none;
}

.pc-faq__question::-webkit-details-marker {
	display: none;
}

.pc-faq__question::marker {
	content: '';
}

.pc-faq__chevron {
	display: grid;
	place-items: center;
	flex: 0 0 18px;
	width: 18px;
	height: 10px;
}

/* Zdrojové SVG je zvislé (9.8 × 17.8); otočením smeruje nadol. */
.pc-faq__chevron svg {
	width: 10px;
	height: 18px;
	transform: rotate(-90deg);
	transition: transform var(--pc-duration) var(--pc-ease);
}

[open] > .pc-faq__question .pc-faq__chevron svg {
	transform: rotate(90deg);
}

.pc-faq__answer {
	padding-bottom: var(--pc-space-24);
	font-size: var(--pc-fs-base);
	line-height: 1.5;
}

.pc-faq__answer > * + * {
	margin-top: var(--pc-space-12);
}


/* Akordeón sa na užších displejoch zmenšuje — patrí ku komponentu,
   nie k jednej sekcii, inak by to na stránke Časté otázky nefungovalo. */
@media (max-width: 900px) {
	.pc-faq__question {
		min-height: 56px;
		font-size: var(--pc-fs-lead);
	}
}

@media (max-width: 560px) {
	.pc-faq__question {
		font-size: var(--pc-fs-base);
	}
}

/* ---- Karta príspevku --------------------------------------------------- */
/*
 * Zdieľaná medzi „Videorecenzie a návody" (náhľad na výšku, 1122:1402)
 * a „Najnovšie články" (na šírku, 320:259.66). Pomer strán nastavuje
 * sekcia cez --pc-postcard-ratio.
 */

.pc-postcard {
	display: flex;
	flex-direction: column;
	width: 100%;
	/* Karta musí vyplniť bunku mriežky, inak nemá `margin-top: auto`
	   na tlačidle o čo sa oprieť a tlačidlá sa rozídu. */
	height: 100%;
	min-width: 0;
}

.pc-postcard__media {
	position: relative;
	display: block;
	aspect-ratio: var(--pc-postcard-ratio, 1122 / 1402);
	border-radius: 10px;
	overflow: hidden;
	background: var(--pc-mist);
}

.pc-postcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Figma: 12px od ľavého okraja, 9px od spodku náhľadu. */
.pc-postcard__play {
	position: absolute;
	left: 12px;
	bottom: 9px;
	display: block;
	width: 46px;
	height: 46px;
	pointer-events: none;
}

.pc-postcard__play svg {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 1px 4px rgb(0 0 0 / 0.35));
}

.pc-postcard__title {
	margin-top: var(--pc-postcard-title-gap, 35px);
	font-size: 20px;
	font-weight: var(--pc-weight-bold);
	line-height: 1.2;
}

/*
 * Perex je orezaný na pevný počet riadkov, takže všetky karty v riadku
 * majú rovnako dlhý popis a tlačidlá sedia v jednej línii. Bez orezania
 * by pri rôzne dlhých článkoch tlačidlá skákali.
 */
.pc-postcard__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--pc-postcard-lines, 6);
	line-clamp: var(--pc-postcard-lines, 6);
	overflow: hidden;
	margin-top: 9px;
	/* Odstup k tlačidlu patrí sem, nie na tlačidlo — tam by prebil
	   `margin-top: auto`, ktorý drží tlačidlá v jednej línii. */
	margin-bottom: 16px;
	font-size: var(--pc-fs-base);
	line-height: 1.25;
}

/*
 * `margin-top: auto` drží tlačidlá zarovnané naprieč riadkom aj pri
 * rôzne dlhých perexoch a nadpisoch na dva riadky.
 *
 * Žiadne `margin-top` inde na tlačidle — aj o jednu triedu presnejší
 * selektor by `auto` prebil a tlačidlá by opäť skákali.
 */
.pc-postcard__cta {
	align-self: flex-start;
	min-width: 110px;
	margin-top: auto;
}

/* ==========================================================================
   DOPRAVA ZADARMO — ukazovateľ

   Globálny komponent, lebo ho používa aj mini-košík v hlavičke (a ten je
   na každej stránke), nielen košík a pokladňa.

   Farbu podkladu si berie z premennej, aby vyzeral správne na sivom boxe
   v košíku aj na bielom paneli mini-košíka.
   ========================================================================== */

.pc-freeship {
	--pc-freeship-track: var(--pc-white);
}

.pc-freeship__bar {
	height: 9px;
	border-radius: 999px;
	background: var(--pc-freeship-track);
	overflow: hidden;
}

.pc-freeship__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--pc-blue);
}

.pc-freeship__text {
	margin-top: var(--pc-space-16);
	font-size: var(--pc-fs-small);
	line-height: 1.3;
}

/*
 * Zvýraznená dlaždica — vo Figme končí mriežka kategórií tlačidlom,
 * nie ďalšou kategóriou. Preto plná farba a žiadna ikona.
 */
.pc-tile--cta {
	justify-content: center;
	border-color: var(--pc-blue);
	background: var(--pc-blue);
	color: var(--pc-white);
	text-align: center;
}

.pc-tile--cta:hover,
.pc-tile--cta:focus-visible {
	border-color: var(--pc-blue-dark);
	background: var(--pc-blue-dark);
	color: var(--pc-white);
}

/* ==========================================================================
   ZĽAVNENÁ CENA V KOŠÍKU

   Pôvodná cena prečiarknutá a stlmená, zľavnená zvýraznená. Používa sa
   v košíku, v mini-košíku aj v súhrne objednávky, preto je tu.
   ========================================================================== */

.pc-price-old {
	color: var(--pc-grey);
	font-weight: var(--pc-weight-regular);
	text-decoration: line-through;
}

.pc-price-new {
	color: var(--pc-black);
	text-decoration: none;
}

/* V užších miestach (mini-košík) ide zľavnená cena pod pôvodnú. */
.pc-minicart__price .pc-price-old,
.pc-minicart__price .pc-price-new {
	display: block;
}

/* ==========================================================================
   IKONKY VYUŽITIA

   Podľa dizajnu ležia v ľavom hornom rohu fotky, pod sebou. Používa ich
   detail produktu aj produktová karta, preto sú tu a nie v CSS jednej
   z nich.

   Farbu podkladu si nesie každá ikonka sama (premenné v `style`).
   ========================================================================== */

.pc-badges {
	position: absolute;
	left: var(--pc-space-12);
	top: var(--pc-space-12);
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
	/* Fotka pod ikonkami musí ostať klikateľná. */
	pointer-events: none;
}

.pc-badges__item {
	margin: 0;
}

.pc-badges__tile {
	display: grid;
	place-items: center;
	width: var(--pc-badge-size, 44px);
	height: var(--pc-badge-size, 44px);
	border-radius: var(--pc-radius-sm);
	background: var(--pc-badge-bg, var(--pc-sky));
	color: var(--pc-badge-fg, var(--pc-black));
	pointer-events: auto;
}

.pc-badges__icon {
	width: 60%;
	height: 60%;
	object-fit: contain;
}

/* V karte je fotka menšia, takže aj ikonky. */
.pc-card .pc-badges {
	--pc-badge-size: 34px;

	left: 0;
	top: 0;
}

/* Karta musí byť vzťažný bod, inak by ikonky odleteli na okraj stránky. */
.pc-card {
	position: relative;
}

/* ==========================================================================
   TABUĽKY WOOCOMMERCE

   WooCommerce dáva všetkým svojim tabuľkám `width: 70%`
   (`.woocommerce-page table.shop_table`). V našich rozloženiach majú
   vždy zaplniť svoj stĺpec — inak visia v treťom stĺpci prázdno.
   Selektor je o element `body` špecifickejší než ten jeho.
   ========================================================================== */

body.woocommerce-page table.shop_table,
body.woocommerce table.shop_table {
	width: 100%;
}

/* ==========================================================================
   BLOK „MÁTE OTÁZKU?"  —  fotka, kontakty a formulár

   Zdieľaný komponent (`pc_contact_cta()`): stránka Časté otázky, stránka
   Kontakt aj samostatná sekcia pre landing pages. Preto je vzhľad tu,
   nie v CSS jednej sekcie — inak by sa na landing page nenačítal.

   Miery z Figmy (node 1:1141): fotka 320 × 371, formulár 805,
   nadpis Inter Bold 30.
   ========================================================================== */

.pc-cta-form {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.pc-cta-form__figure {
	margin: 0;
}

.pc-cta-form__title {
	margin: 0;
	font-size: var(--pc-fs-heading);
	font-weight: var(--pc-weight-bold);
	line-height: 1.2;
}

.pc-cta-form__text {
	margin: 17px 0 0;
	font-size: var(--pc-fs-base);
}

/* Kontakt je tu vo veľkom prevedení, rovnako ako na stránke Kontakt. */
.pc-cta-form__contact {
	--pc-contact-size: 28.7px;
	--pc-contact-height: 74px;
	--pc-contact-icon: 40px;

	margin-top: 32px;
}

.pc-cta-form .pc-form {
	max-width: 680px;
}

/* Ako samostatná sekcia potrebuje vlastný odstup od okolia. */
.pc-cta-form-section {
	padding-block: var(--pc-space-section);
}

@media (max-width: 900px) {
	.pc-cta-form {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--pc-space-32);
	}

	.pc-cta-form__figure {
		max-width: 320px;
	}

	.pc-cta-form__contact {
		--pc-contact-size: var(--pc-fs-lead);
		--pc-contact-height: 48px;
		--pc-contact-icon: 32px;
	}
}

/* Štítok karty — „Videonávod" alebo kategória článku (blog, videá). */
.pc-postcard__label {
	margin-top: var(--pc-space-16);
	font-size: var(--pc-fs-micro);
	font-weight: var(--pc-weight-bold);
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pc-blue);
}

/* Za štítkom už nadpis nepotrebuje celý odstup od náhľadu. */
.pc-postcard__label + .pc-postcard__title {
	margin-top: var(--pc-space-8);
}

/*
 * Pásik cez spodok náhľadu článku. Bežná fotografia bez neho pôsobí
 * prázdno a karty sa opticky rozpadávajú; pásik ich zjednotí a povie,
 * o aký typ obsahu ide.
 */
.pc-postcard__ribbon {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 10px var(--pc-space-16);
	background: var(--pc-blue);
	font-size: var(--pc-fs-small);
	font-weight: var(--pc-weight-bold);
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--pc-white);
	pointer-events: none;
}

/* Ikona prehrávania si musí nájsť miesto nad pásikom. */
.pc-postcard__ribbon ~ .pc-postcard__play,
.pc-postcard__play {
	bottom: 56px;
}

/* ---- Bublina pri ikonke ------------------------------------------------ */
/*
 * Krátky popis pri prejdení myšou na ikonku bez textu (srdiečko,
 * porovnanie). Text nesie atribút `data-pc-tip`. Bublina je vľavo od
 * ikonky — ikonky sedia pri pravom okraji fotky a vpravo by bublina
 * vytŕčala z karty. Na dotykových zariadeniach sa neukazuje.
 */
@media (hover: hover) {
	[data-pc-tip] {
		overflow: visible;
	}

	[data-pc-tip]::after {
		content: attr(data-pc-tip);
		position: absolute;
		z-index: 5;
		top: 50%;
		right: calc(100% + var(--pc-space-8));
		padding: var(--pc-space-4) var(--pc-space-8);
		border-radius: var(--pc-radius-xs);
		background: var(--pc-black);
		color: var(--pc-white);
		font-size: var(--pc-fs-micro);
		font-weight: var(--pc-weight-medium);
		line-height: 1.3;
		white-space: nowrap;
		pointer-events: none;
		opacity: 0;
		transform: translate(4px, -50%);
		transition:
			opacity var(--pc-duration) var(--pc-ease),
			transform var(--pc-duration) var(--pc-ease);
	}

	[data-pc-tip]:hover::after,
	[data-pc-tip]:focus-visible::after {
		opacity: 1;
		transform: translate(0, -50%);
	}
}

/* Kontakt: nadpis bloku je h2 kvôli poradiu nadpisov, vzhľad ostáva ako h3. */
h2.pc-contact-block__title {
	font-size: var(--pc-fs-lead);
}

/* Právne stránky: pôvodné h4 sú kvôli poradiu nadpisov h2, vzhľad ostáva ako h4. */
.pc-text__body h2.pc-h4 {
	margin-top: 0;
	font-size: 17px;
	line-height: 1.15;
}

.pc-text__body > * + h2.pc-h4 {
	margin-top: var(--pc-space-16);
}