/**
 * ApiNature mreža izdelkov
 *
 * Postavitev prevzame WooCommerce shortcode [products] (ul.products), samo
 * postavitev v mrežo prepišemo z lastno CSS mrežo, da je št. stolpcev
 * neodvisno od Woo/teme in nadzorovano prek Elementor kontrol.
 */

.apn-product-grid {
	--apn-prod-columns: 4;
	--apn-prod-gap: 24px;

	position: relative;
	width: 100%;
}

.apn-product-grid ul.products {
	display: grid !important;
	grid-template-columns: repeat(var(--apn-prod-columns), 1fr) !important;
	gap: var(--apn-prod-gap) !important;
	width: 100%;
	margin-left: 0;
}

.apn-product-grid ul.products li.product {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	width: 100% !important;
	height: 100%;
	margin: 0 !important;
	float: none !important;
}

/*
 * Shoptimizer sicer gumb "Dodaj v košarico" postavi absolutno (bottom: 0) in
 * ga prikaže šele na hover, kar je pri različno dolgih naslovih/cenah
 * neporavnano in na mobilnem/tablici neuporabno (ni hoverja). Povezava
 * izdelka (slika/naslov/cena – WooCommerce jo vedno označi s tem razredom,
 * ne glede na to, ali CommerceKit pred njo doda ikono za seznam želja) zato
 * zraste (flex-grow) in gumb potisne na dno – enako za vse kartice v vrsti,
 * ne glede na to, koliko dodatne vsebine (npr. variante) je še za njim.
 */
.apn-product-grid ul.products li.product > a.woocommerce-loop-product__link,
.apn-product-grid ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex !important;
	flex: 1 1 auto !important;
	flex-direction: column;
}

.apn-product-grid ul.products li.product .button,
.apn-product-grid ul.products li.product .added_to_cart,
.apn-product-grid ul.products li.product .add_to_cart_button {
	position: static !important;
	opacity: 1 !important;
	margin-top: auto !important;
	width: 100% !important;
}

/*
 * Na napravah z miško (pravi "desktop") gumb privzeto skrijemo in ga
 * prikažemo šele na hover, enako kot je privzeto v temi – le da ostane v
 * toku (position: static), zato kartice ostanejo enako visoke ne glede na
 * stanje hoverja. Na dotik (mobilnik/tablica brez hoverja) ostane viden.
 */
@media (hover: hover) and (pointer: fine) {
	.apn-product-grid ul.products li.product .button,
	.apn-product-grid ul.products li.product .added_to_cart,
	.apn-product-grid ul.products li.product .add_to_cart_button {
		opacity: 0 !important;
		transition: opacity 0.15s ease;
	}

	.apn-product-grid ul.products li.product:hover .button,
	.apn-product-grid ul.products li.product:focus-within .button,
	.apn-product-grid ul.products li.product:hover .added_to_cart,
	.apn-product-grid ul.products li.product:focus-within .added_to_cart,
	.apn-product-grid ul.products li.product:hover .add_to_cart_button,
	.apn-product-grid ul.products li.product:focus-within .add_to_cart_button {
		opacity: 1 !important;
	}
}

/*
 * Shoptimizer ob hoveru nad izdelkom sicer prikaže belo senčeno kartico
 * (.site-main ul.products li.product:hover::before) po vsej strani. V tej
 * mreži tega učinka nočemo, zato ga tu izklopimo.
 */
.site-main .apn-product-grid ul.products li.product:not(.product-category)::before,
.apn-product-grid ul.products li.product:not(.product-category)::before {
	content: none;
	box-shadow: none;
}

/* --- Vodoravno drsenje na mobilnem --------------------------------------- */

@media (max-width: 767px) {
	.apn-product-grid--scroll-mobile ul.products {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		padding-bottom: 0;
	}

	/*
	 * Clearfix psevdoelementa (WooCommerce/tema) bi v flex vrstici postala
	 * prazna »izdelka« z dodatnim razmikom na začetku in koncu traku.
	 */
	.apn-product-grid--scroll-mobile ul.products::before,
	.apn-product-grid--scroll-mobile ul.products::after {
		content: none !important;
		display: none !important;
	}

	/*
	 * Širina kartice sledi nastavljenemu št. stolpcev na mobilnem (privzeto
	 * 2), preostali izdelki ostanejo skriti za robom in se odkrijejo z
	 * drsenjem, namesto da se prelomijo v novo vrstico.
	 */
	.apn-product-grid--scroll-mobile ul.products {
		align-items: stretch !important;
	}

	/*
	 * V flex vrstici se height: 100% ne more izračunati (trak nima določene
	 * višine), zato bi bila vsaka kartica le tako visoka kot njena vsebina in
	 * gumb »Dodaj v košarico« bi skakal glede na dolžino naslova. Z
	 * height: auto se kartice raztegnejo na višino najvišje v vrstici.
	 */
	.apn-product-grid--scroll-mobile ul.products li.product {
		flex: 0 0 calc((100% - (var(--apn-prod-columns) - 1) * var(--apn-prod-gap)) / var(--apn-prod-columns));
		align-self: stretch !important;
		height: auto !important;
		scroll-snap-align: start;
	}

	.apn-product-grid--scroll-mobile ul.products {
		scrollbar-width: none;
	}

	.apn-product-grid--scroll-mobile ul.products::-webkit-scrollbar {
		display: none;
	}
}

/*
 * --- Puščice za drsenje: skupni videz ------------------------------------
 * Enake kot v gradniku »Nakupujte glede na vaš cilj« (goal-slider.css):
 * siv krog z belo puščico po dizajnu, ob hoverju zelen.
 */

.apn-product-grid__nav {
	display: none;
	align-items: center;
	justify-content: center;
	width: 31px;
	height: 31px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: #b5b5b5;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.apn-product-grid__nav svg {
	width: 16px;
	height: 16px;
}

.apn-product-grid__nav:hover:not([disabled]) {
	background-color: #6f9710;
}

.apn-product-grid__nav:focus-visible {
	background-color: #6f9710;
	outline: 2px solid #6f9710;
	outline-offset: 2px;
}

.apn-product-grid__nav[disabled] {
	opacity: 0.4;
	cursor: default;
}

/*
 * Na mobilnem sta puščici skupaj pod izdelki, poravnani desno, v normalnem
 * toku (ne prekrivata izdelkov kot na računalniku).
 */
@media (max-width: 767px) {
	/* Na telefonu puščice nadomesti indikator položaja (pikice). */
	.apn-product-grid--scroll-mobile .apn-product-grid__nav-group {
		display: none;
	}

	.apn-product-grid--scroll-mobile .apn-product-grid__dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: 12px;
	}
}

.apn-product-grid__dots {
	display: none;
}

.apn-product-grid__dot {
	width: 8px;
	height: 8px;
	min-height: 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: #d0d0d0;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.apn-product-grid__dot.is-active {
	background-color: #6f9710;
	transform: scale(1.25);
}

/*
 * Na računalniku puščici stojita čez levi/desni rob mreže, navpično na
 * sredini.
 */
@media (min-width: 1025px) {
	.apn-product-grid--scroll-desktop ul.products {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		overscroll-behavior-x: contain;
		padding-bottom: 0;
	}

	.apn-product-grid--scroll-desktop ul.products::before,
	.apn-product-grid--scroll-desktop ul.products::after {
		content: none !important;
		display: none !important;
	}

	.apn-product-grid--scroll-desktop ul.products {
		align-items: stretch !important;
	}

	.apn-product-grid--scroll-desktop ul.products li.product {
		flex: 0 0 calc((100% - (var(--apn-prod-columns) - 1) * var(--apn-prod-gap)) / var(--apn-prod-columns));
		align-self: stretch !important;
		height: auto !important;
		scroll-snap-align: start;
	}

	.apn-product-grid--scroll-desktop ul.products {
		scrollbar-width: none;
	}

	.apn-product-grid--scroll-desktop ul.products::-webkit-scrollbar {
		display: none;
	}

	.apn-product-grid--scroll-desktop .apn-product-grid__nav {
		display: flex;
		position: absolute;
		top: 45%;
		z-index: 2;
		transform: translateY(-50%);
	}

	.apn-product-grid--scroll-desktop .apn-product-grid__nav--prev {
		left: -16px;
	}

	.apn-product-grid--scroll-desktop .apn-product-grid__nav--next {
		right: -16px;
	}
}