/*
 * NSV Recommendations - layout štýly.
 * Zámerne bez definície nových farieb - vizuálne dedí zo Shoptimizer témy
 * (blok používa rovnaké triedy ako natívne "related products").
 */

.nsv-recommendations {
	margin-top: 40px;
	clear: both;
	position: relative;
}

/*
 * OPRAVA (18.8.2026, PC šírka mriežky): na stránke Košík je nadradený
 * kontajner `.entry-content` u tohto klienta nastavený na `display: flex`
 * (nie je to bežný "block" layout). Bez explicitnej šírky/flex-grow sa
 * naša sekcia .nsv-recommendations správala v takomto flex kontexte ako
 * "shrink-to-fit" flex položka - namiesto vyplnenia celej šírky rámčeka sa
 * zmenšila iba na šírku potrebnú pre obsah, čím vznikla veľká prázdna
 * medzera vľavo (nahlásené klientom, screenshot 18.8.2026). Explicitne
 * vynucujeme 100% šírku a "stretch" bez ohľadu na to, či je rodič flex
 * alebo block kontajner.
 */
.nsv-recommendations[data-nsv-layer] {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
	align-self: stretch !important;
	box-sizing: border-box !important;
}

/*
 * Skrytie natívneho WooCommerce Cart Cross-Sells bloku ("Mohlo by vás
 * zaujímať…"). Tento blok je súčasťou natívneho obsahu stránky Košík
 * (WooCommerce Cart Block, nie shortcode) a zobrazuje sa nezávisle od
 * nášho pluginu, keď majú produkty v košíku nastavené natívne "Cross-sells"
 * v administrácii produktu. Keďže náš vlastný blok odporúčaní už rieši
 * presne túto úlohu (a robí to personalizovane), natívny blok by bol
 * duplicitný a mätúci - preto ho na stránke košíka skrývame.
 */
.wp-block-woocommerce-cart-cross-sells-block,
.wc-block-cart-cross-sells-block,
.woocommerce-cart .cross-sells {
	display: none !important;
}

.nsv-recommendations h2 {
	margin-bottom: 20px;
	font-weight: 600;
	position: relative;
	padding-left: 14px;
}

/*
 * Malý farebný akcent pred nadpisom - jemný "moderný" detail, ktorý blok
 * vizuálne odlíši od okolitého obsahu bez toho, aby menil farebnú paletu
 * webu (používa farbu z primárneho tlačidla motívu).
 */
.nsv-recommendations h2::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 4px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.35;
}

/* Prevencia CLS (Cumulative Layout Shift) - rezervovanie miesta pre obrázok. */
.nsv-recommendations .products .product img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/*
 * Tlačidlá s minimálnou dotykovou plochou 44px (Časť 3.2 zadania).
 * POZNÁMKA (oprava): pôvodné pravidlo malo nižšiu CSS špecifickosť ako
 * natívne štýly témy Shoptimizer pre WooCommerce tlačidlá
 * (napr. `.woocommerce ul.products li.product .button`, 4 triedy), takže sa
 * v praxi vôbec neaplikovalo - tlačidlá zostávali cca 34px vysoké namiesto
 * požadovaných 44px. Pridané !important, aby toto konkrétne, zámerne úzko
 * cielené prístupnostné pravidlo vždy vyhralo nad štýlmi témy.
 */
.nsv-recommendations .add_to_cart_button,
.nsv-recommendations .button {
	min-height: 44px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px !important;
}

/*
 * KĽÚČOVÁ OPRAVA (rozloženie mriežky): blok zdieľa CSS triedy "related
 * products" s natívnymi WooCommerce/Shoptimizer sekciami (kvôli vizuálnemu
 * dedeniu štýlu kariet - obrázok, nadpis, cena, tlačidlo). Motív Shoptimizer
 * má ale vlastné, veľmi špecifické pravidlo:
 *   .related.products ul.products, .upsells.products ul.products {
 *       display: flex !important; flex-wrap: nowrap !important; ...
 *   }
 * ktoré vynucuje JEDEN riadok bez zalamovania - úplne nezávisle od šírky
 * obrazovky. Keďže ide o !important pravidlo, žiadne naše pôvodné pravidlo
 * bez !important (napr. predvolené .columns-4 správanie na desktope, alebo
 * "grid" na tablete) ho nemohlo prebiť - produkty sa preto vždy tlačili do
 * jedného natlačeného riadku (na desktope aj tablete), namiesto zalomenia
 * do mriežky. Preto teraz EXPLICITNE definujeme rozloženie pre KAŽDÚ
 * šírku obrazovky, vždy s !important, aby sme spoľahlivo vyhrali nad
 * pravidlom motívu.
 *
 * POZNÁMKA (špecificita): pravidlo motívu má rovnakú CSS špecificitu ako
 * malo naše pôvodné pravidlo (3 triedy + 1 element, obe s !important) - pri
 * zhode špecificity rozhoduje poradie v zdroji (posledné pravidlo vyhráva),
 * a keďže inline <style> motívu sa v <head> vypisuje AŽ PO našom
 * stylesheete, motív stále vyhrával. Preto pridávame atribútový selektor
 * [data-nsv-layer] (vždy prítomný na našej sekcii), ktorý zvýši našu
 * špecificitu o 1 a zaručí výhru nezávisle od poradia v zdroji.
 */
.nsv-recommendations[data-nsv-layer] ul.products.nsv-products-grid {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 20px !important;
	margin: 0 0 0 0 !important;
	padding: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.nsv-recommendations[data-nsv-layer] ul.products.nsv-products-grid li.product {
	margin: 0 !important;
}

/*
 * Desktop (viac ako 992px): 5 stĺpcov (predtým 4).
 * OPRAVA (19.8.2026, zadanie klienta): "aspoň 5 produktov v rade a dve
 * riadky" - zmena zo 4 na 5 stĺpcov. Pri gap: 20px a 5 stĺpcoch je odpočet
 * na položku (5-1)*20px / 5 = 16px (predtým pri 4 stĺpcoch (4-1)*20/4 = 15px).
 */
@media ( min-width: 993px ) {
	.nsv-recommendations[data-nsv-layer] ul.products.nsv-products-grid li.product {
		flex: 0 0 calc( 20% - 16px ) !important;
		max-width: calc( 20% - 16px ) !important;
	}
}

/*
 * RÁMČEK OKOLO CELÉHO BLOKU (iba PC/desktop, podľa požiadavky klienta z
 * 18.8.2026 - "chcem to takto pekne ako je rámček, len na počítači").
 * Zámerne iba od 993px vyššie (desktop) - na mobile/tablete si to klient
 * nepriamo neželal ("toto chcem len na počítači takto"), a na menších
 * šírkach by rámček navyše zbytočne uberal už aj tak obmedzené miesto.
 */
@media ( min-width: 993px ) {
	.nsv-recommendations[data-nsv-layer] {
		border: 1px solid #e2e2e2;
		border-radius: 16px;
		padding: 28px 28px 24px 28px;
		background: #fcfcfc;
	}
}

/*
 * Mobil aj tablet (do 992px): 2 stĺpce ("dve vedľa seba").
 * POZNÁMKA (oprava zadania 18.8.2026): pôvodne bol na mobile (do 480px)
 * jeden vertikálny stĺpec (produkty pod sebou), keďže klient pôvodne písal
 * "4 produkty pod sebou". Klient to následne spresnil - v skutočnosti chcel
 * na mobile "dve vedľa seba a tri riadky", teda rovnakú 2-stĺpcovú mriežku
 * ako na tablete, nie jeden stĺpec. Preto teraz zjednocujeme mobil aj
 * tablet do jedného pravidla (0-992px = 2 stĺpce) a rušíme samostatný
 * vertikálny stĺpec pre mobil. Aby vyšli presne 3 riadky (2×3 = 6), počet
 * zobrazených produktov pre mobil/tablet je v nastaveniach zvýšený na 6
 * (pôvodne 4 - to by pri 2 stĺpcoch dalo iba 2 riadky).
 */
@media ( max-width: 992px ) {
	.nsv-recommendations[data-nsv-layer] ul.products.nsv-products-grid li.product {
		flex: 0 0 calc( 50% - 10px ) !important;
		max-width: calc( 50% - 10px ) !important;
	}
}

/*
 * Moderná karta produktu (všetky šírky) - jemný rámček a "lift" efekt pri
 * hoveri (na dotykových zariadeniach bez hoveru jednoducho neaktívne).
 * Zámerne bez zmeny farieb webu, iba tvar/tieň/odsadenie.
 */
.nsv-recommendations[data-nsv-layer] ul.products.nsv-products-grid li.product {
	background: #fff !important;
	border: 1px solid #ececec !important;
	border-radius: 12px !important;
	padding: 14px !important;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.nsv-recommendations[data-nsv-layer] ul.products.nsv-products-grid li.product:hover {
	box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.08 );
	border-color: #e0e0e0 !important;
	transform: translateY( -3px );
}

/* Veľmi malé obrazovky: o čosi menšia medzera a odsadenie karty. */
@media ( max-width: 480px ) {
	.nsv-recommendations[data-nsv-layer] ul.products.nsv-products-grid {
		gap: 12px !important;
	}

	.nsv-recommendations[data-nsv-layer] ul.products.nsv-products-grid li.product {
		padding: 10px !important;
	}
}