/*
 * Sekcia „Naše produkty“ na úvodnej stránke — slider kategórií z Ultimate
 * Addons (widget „Woo – Categories“) v podobe schválenej dlaždice.
 *
 * Návrh: prezentace.tridvajedna.cz/show/hagroland-v1/set/9/1 — biela karta
 * so zaoblenými rohmi, celý render produktu na bielej ploche, pod ním tučný
 * tmavozelený názov vľavo a žlté pruhy. Rozmery, farby a pruhy sú prevzaté
 * z našej dlaždice (.hgl-r-dlazdica v dlazdica.css).
 *
 * Všetko visí na triede .homepage_nase_produkty, ktorú má v Elementore
 * nastavený rodičovský kontajner sekcie (Rozšírené → CSS triedy). Iné
 * slidery kategórií na webe sa tak nemenia.
 *
 * Elementor si štýly widgetu generuje so selektorom typu
 * „.elementor-1306 .elementor-element.elementor-element-660a776 …“ (6 tried).
 * Prefix nižšie má preto štyri triedy, aby sme ho prebili bez !important
 * a bez väzby na konkrétne ID stránky či prvku.
 */

/* ------------------------------------------------------- Šírka sekcie */

/**
 * Návrh počíta s obsahom širokým 1400px, globálne nastavenie Elementora
 * (Site Settings → Layout) dáva kontajnerom 1200px. Meníme ho len pre túto
 * sekciu a len na desktope — tablet a mobil si nechávajú svoje hodnoty.
 */
@media (min-width: 1025px) {
	.elementor .e-con.homepage_nase_produkty {
		--container-max-width: 1400px;
	}
}

/* ------------------------------------------------- Rovnaká výška kariet */

/**
 * UAEL slidy vertikálne centruje a odkaz okolo obsahu nemá plnú výšku, takže
 * kratšie karty „plávali“ v strede. Natiahneme ich na výšku najvyššej.
 */
.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element .slick-slide {
	align-items: stretch;
}

/* ------------------------------------------------------------- Karta */

.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element li.product-category > a {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 16px;
	background-color: #ffffff;
	text-decoration: none;
}

.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element .uael-product-cat-inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
	/* Rámik okolo karty návrh nemá — kartu ohraničuje len biela plocha na žltom. */
	border: 0 !important;
}

/**
 * Náhľady sú rendery produktov na bielom/priehľadnom pozadí s rôznym pomerom
 * strán. Orez by z nich ukrojil strechu či kolesá, preto contain na
 * jednotnej štvorcovej ploche — všetky názvy tak začínajú v rovnakej výške.
 */
.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element .uael-product-cat-inner img {
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	height: auto;
	padding: 8px 8px 0;
	object-fit: contain;
	transition: transform 0.3s ease;
}

.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element li.product-category > a:hover img {
	transform: scale(1.04);
}

/**
 * Fotka do gridu B (viď slider_obrazok_kategorie() v inc/kategorie-slider.php).
 *
 * Leží presne nad fotkou A — obe majú rovnaký štvorec a odsadenie z pravidla
 * vyššie a A je prvá v .uael-product-cat-inner, takže stačí top/left 0.
 * Pri prejdení myšou ju okamžite vystrieda, bez prechodu aj bez zväčšenia,
 * rovnako ako v dlaždiciach podkategórií (dlazdica.css). Fotka A sa
 * zároveň skryje, aby cez priehľadné miesta B nepresvitala.
 */
.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element .uael-product-cat-inner img.hgl-r-dlazdica__hover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transition: none;
}

.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element li.product-category > a:hover .uael-product-cat-inner:has(.hgl-r-dlazdica__hover) img {
	transform: none;
}

.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element li.product-category > a:hover img.hgl-r-dlazdica__hover,
.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element li.product-category > a:focus-visible img.hgl-r-dlazdica__hover {
	opacity: 1;
}

.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element li.product-category > a:hover .uael-product-cat-inner:has(.hgl-r-dlazdica__hover) img:not(.hgl-r-dlazdica__hover),
.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element li.product-category > a:focus-visible .uael-product-cat-inner:has(.hgl-r-dlazdica__hover) img:not(.hgl-r-dlazdica__hover) {
	opacity: 0;
}

/* ------------------------------------------------------ Názov a pruhy */

/**
 * Biela plocha patrí celej karte, nie len textu — UAEL tu má polopriehľadné
 * biele pozadie a verzálky, oboje návrh nemá. Blok vyplní zvyšok karty,
 * takže dvojriadkový názov kartu nepredĺži voči susedom.
 */
.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element .uael-woo-categories li.product .uael-category__title-wrap,
.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element .uael-woo-categories li.product > a:hover .uael-category__title-wrap {
	flex: 1 1 auto;
	padding: 16px 0 28px;
	background-color: transparent;
	text-align: left;
	text-transform: none;
}

/**
 * Názov je <h2>, takže mu Astra dáva písmo nadpisov (Michroma — široké,
 * technické). Návrh má v dlaždici obyčajný tučný bezpätkový rez, teda
 * písmo tela stránky (Figtree).
 */
.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element .uael-woo-categories li.product .woocommerce-loop-category__title,
.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element .uael-woo-categories li.product > a:hover .woocommerce-loop-category__title {
	margin: 0;
	padding: 0 24px;
	text-align: left;
	font-family: "Figtree", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	color: #183f22;
	text-transform: none;
}

/*
 * Rovnaké pruhy ako v .hgl-r-dlazdica__pruhy — tam sú <img>, tu do šablóny
 * UAEL nevidíme. Visia na názve, nie na obale, aby lícovali s jeho odsadením.
 */
.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element .uael-woo-categories li.product .woocommerce-loop-category__title::after {
	content: "";
	display: block;
	width: 80px;
	height: 10px;
	margin-top: 0.6rem;
	background: url("strips-yellow.png") no-repeat 0 0 / 80px 10px;
}

/* ------------------------------------------------------------- Šípky */

/* Tmavozelené krúžky s bielou šípkou podľa návrhu. */
.e-con.homepage_nase_produkty .uael-woo-category-slider.uael-woo-cat-arrow-circle.elementor-element .slick-slider .slick-arrow {
	width: 36px;
	height: 36px;
	font-size: 18px;
	line-height: 36px;
	/* Téma (custom.scss) farbí šípku na žlto s !important; návrh ju má bielu. */
	color: #ffffff !important;
	background-color: #183f22;
	transition: background-color 0.2s ease;
}

.e-con.homepage_nase_produkty .uael-woo-category-slider.uael-woo-cat-arrow-circle.elementor-element .slick-slider .slick-arrow:hover,
.e-con.homepage_nase_produkty .uael-woo-category-slider.uael-woo-cat-arrow-circle.elementor-element .slick-slider .slick-arrow:focus-visible {
	background-color: #255a33;
}