/* Úpravy vzhľadu WooCommerce — katalóg a detail produktu. */

/* ------------------------------------------------------ Odznak zľavy */

/**
 * Astra kreslí odznak ako kruh s pevnou výškou riadku 3–3,5em, do ktorého
 * sa „Zľava!“ nezmestí. Selektory kopírujú tie Astrine, aby sme vyhrali
 * poradím načítania, nie vyššou špecificitou.
 */
.woocommerce-js span.onsale,
.woocommerce-js div.product span.onsale,
.woocommerce-js ul.products li.product .onsale {
	border-radius: 5px;
	padding: 5px 10px;
	height: auto;
	min-height: auto;
	line-height: 1.4;
	font-weight: bold;
	font-size: 13px;
}

/* -------------------------------------------------- Zoradenie výpisu */

/**
 * Astra selectu berie pozadie aj rámik, takže v katalógu vyzerá ako obyčajný
 * text. Meníme len background-color, nie celé background — šípka selectu
 * môže byť obrázok na pozadí.
 */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	background-color: var(--ast-global-color-5, #fff);
	border: 1px solid #cfd8d2;
	border-radius: 5px;
	padding: 0.5em 2em 0.5em 0.75em;
	color: var(--ast-global-color-3, #1c1c1d);
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.woocommerce .woocommerce-ordering select:hover,
.woocommerce-page .woocommerce-ordering select:hover,
.woocommerce .woocommerce-ordering select:focus,
.woocommerce-page .woocommerce-ordering select:focus {
	border-color: var(--ast-global-color-1, #3e8e54);
	border-style: solid;
	outline: none;
}

/* --------------------------------------- Krátky popis pod nadpisom */

.hgl-kratky-popis {
	margin: 0.25em 0 1.25em;
	font-size: 1.05em;
	line-height: 1.6;
}

.hgl-kratky-popis > :last-child {
	margin-bottom: 0;
}

/* ------------------------------------- Breadcrumbs v detaile produktu */

/**
 * Breadcrumbs stoja nad bielym blokom (pozri inc/obchod.php). Horný odstup
 * kopíruje margin-top #primary na kategóriách (60 px), ktorý detail
 * produktu nemá — bez neho by sa breadcrumbs lepili na hlavičku.
 */
.single-product #primary > .woocommerce-breadcrumb {
	margin: 60px 0 1.5em;
}

@media (max-width: 921px) {
	.single-product #primary > .woocommerce-breadcrumb {
		margin-top: 30px;
	}
}

/* ------------------------------------------- Náhľad produktu A / B */

/**
 * Fotka render B leží presne nad A a pri prejdení myšou ju bez prechodu
 * vystrieda — rovnako ako dlaždica podkategórie (dlazdica.css). Obal je
 * blokový, aby sa B zarovnala s A a nie s celým odkazom karty.
 *
 * Selektor s ul.products li.product preto, aby prebil Woo pravidlo
 * „ul.products li.product a img“ — to obrázku dáva spodný okraj, ktorý
 * by B pri absolútnom umiestnení posunul. Obe fotky sú vo veľkosti
 * woocommerce_thumbnail, takže B stačí prilepiť k hornému okraju A.
 */
.hgl-nahlad {
	position: relative;
	display: block;
}

ul.products li.product .hgl-nahlad img.hgl-nahlad__hover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;
	opacity: 0;
	transition: none;
}

ul.products li.product:hover .hgl-nahlad img.hgl-nahlad__hover,
ul.products li.product a:focus-visible .hgl-nahlad img.hgl-nahlad__hover {
	opacity: 1;
}

/* A sa pri hoveri skryje, inak by presvitala cez priehľadné miesta B. */
ul.products li.product:hover .hgl-nahlad:has(.hgl-nahlad__hover) img:not(.hgl-nahlad__hover),
ul.products li.product a:focus-visible .hgl-nahlad:has(.hgl-nahlad__hover) img:not(.hgl-nahlad__hover) {
	opacity: 0;
}

/* ---------------------------------------------- Nadpis karty produktu */

/**
 * Názov produktu na karte je <h2>, takže mu Astra dáva písmo nadpisov
 * (Michroma, 15px, tenký rez). Zjednocujeme ho s dlaždicami „Naše produkty“
 * na úvodnej stránke (kategorie-slider.css): tučný Figtree v tmavozelenej.
 *
 * Platí pre všetky výpisy produktov — archív kategórie, obchod, súvisiace
 * produkty v detaile — aby karty vyzerali všade rovnako.
 */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	font-family: "Figtree", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	color: #183f22;
	text-transform: none;
}

/* --------------------------------------------- Obrázok karty produktu */

/**
 * Náhľad je neorezaný (medium_large, pozri NAHLAD_VELKOST v obchod.php),
 * takže fotky prichádzajú v rôznom pomere strán. Vpíšeme ich celé do
 * jednotného štvorca — karty v riadku tak ostanú rovnako vysoké a názvy
 * začínajú v rovnakej výške. Fotka B (.hgl-nahlad__hover) má rovnaký
 * štvorec, takže leží presne nad A.
 */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}