/* ==========================================================================
   AliFlori — karty produktów w pętli WooCommerce
   Wspólne dla strony głównej, sklepu, kategorii, wyszukiwarki i cross-sells.
   Selektory celowo bez wrappera .aliflori-products, aby objąć archiwa.
   ========================================================================== */

ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 1.5rem !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

ul.products::before,
ul.products::after {
	content: none !important;
}

/* Motyw nadrzędny dokłada na hover białą płytę ::before (100% + 30px, ostre rogi,
   cień) wystającą pod kartą. Karta ma własny stan hover, więc płytę wyłączamy. */
ul.products li.product::before,
ul.products li.product:hover::before,
ul.products li.product:focus-within::before {
	content: none !important;
}

ul.products li.product {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	background-color: var(--aliflori-white, #ffffff) !important;
	border: 1.5px solid var(--aliflori-border, #dfe6d2) !important;
	border-radius: var(--aliflori-radius-card, 20px) !important;
	padding: 1.25rem !important;
	display: flex !important;
	flex-direction: column !important;
	transition: border-color 0.2s ease, transform 0.2s ease !important;
	box-shadow: none !important;
	/* Motyw nadrzędny wymusza align-self: flex-start na elementach siatki,
	   przez co karty w rzędzie nie rozciągają się do wspólnej wysokości. */
	align-self: stretch !important;
}

ul.products li.product:hover {
	border-color: var(--aliflori-stem, #5f8a63) !important;
	transform: translateY(-3px) !important;
}

ul.products li.product img {
	border-radius: 14px !important;
	aspect-ratio: 4 / 5 !important;
	object-fit: cover !important;
	background: #ffffff !important;
	width: 100% !important;
	height: auto !important;
	margin-bottom: 0.75rem !important;
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--aliflori-font-heading, "Outfit", sans-serif) !important;
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	color: var(--aliflori-leaf, #2f5d3f) !important;
	line-height: 1.35 !important;
	margin: 0 0 0.35rem !important;
	min-height: 2.84rem;
}

/* Cena startuje od dołu dostępnej przestrzeni, CTA idzie tuż pod nią.
   Dzięki temu przyciski w całym rzędzie leżą na jednej linii. Odstęp do
   przycisku daje margin-top samego przycisku, a nie margin-bottom ceny. */
ul.products li.product .price {
	font-family: var(--aliflori-font-heading, "Outfit", sans-serif) !important;
	font-size: 1.15rem !important;
	font-weight: 600 !important;
	color: var(--aliflori-shadow, #1c2a1f) !important;
	display: block !important;
	margin: auto 0 0 !important;
	padding-top: 0.75rem;
}

ul.products li.product .price ins {
	text-decoration: none;
	color: var(--aliflori-leaf, #2f5d3f);
}

ul.products li.product .price del {
	color: #7a8a77;
	font-size: 0.9em;
}

ul.products li.product .button {
	width: 100% !important;
	max-width: 100% !important;
	min-height: 48px;
	height: auto !important;
	position: static !important;
	display: inline-flex !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none;
	transform: translateY(8px) !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0.8rem 1rem !important;
	margin-top: 0.75rem !important;
	background-color: var(--aliflori-lemon, #d9e84f) !important;
	color: var(--aliflori-shadow, #1c2a1f) !important;
	border: none !important;
	border-radius: var(--aliflori-radius-pill, 999px) !important;
	font-family: var(--aliflori-font-heading, "Outfit", sans-serif) !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	text-align: center !important;
	text-decoration: none !important;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, box-shadow 0.2s ease !important;
}

/* CTA produktu ma pojawiać się po najechaniu na kartę, nie znikać. */
ul.products li.product:hover .button,
ul.products li.product:focus-within .button {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto;
	transform: translateY(0) !important;
}

ul.products li.product .button:hover {
	background-color: var(--aliflori-lemon, #d9e84f) !important;
	color: var(--aliflori-shadow, #1c2a1f) !important;
	box-shadow: inset 0 0 0 2px var(--aliflori-shadow, #1c2a1f) !important;
}

/* Link dodany przez WooCommerce po AJAX ma być osobną akcją pod CTA.
   Motyw nadrzędny pozycjonuje go przy dolnej krawędzi bez odstępu. */
ul.products li.product .added_to_cart {
	position: static !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	min-height: 48px;
	height: auto !important;
	box-sizing: border-box;
	margin: 0.75rem 0 0 !important;
	padding: 0.8rem 1rem !important;
	border-radius: var(--aliflori-radius-pill, 999px) !important;
	background-color: var(--aliflori-leaf, #2f5d3f) !important;
	color: var(--aliflori-white, #ffffff) !important;
	font-family: var(--aliflori-font-heading, "Outfit", sans-serif) !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	text-align: center;
	text-decoration: none;
	opacity: 1 !important;
}

/* Urządzenia dotykowe nie mają stanu hover — CTA musi pozostać dostępne. */
@media (hover: none) {
	ul.products li.product .button {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto;
		transform: translateY(0) !important;
	}
}

/* Responsywność ----------------------------------------------------------- */
@media (max-width: 1024px) {
	ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 768px) {
	ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 1rem !important;
	}
}

@media (max-width: 480px) {
	ul.products {
		grid-template-columns: 1fr !important;
	}
}

/* Łańcuch flex musi być ciągły od li.product aż do CTA, inaczej margin-top:auto
   na przycisku nie ma czego rozpychać i CTA wędruje za wysokością tytułu.
   a.woocommerce-LoopProduct-link nie występuje w renderowanym DOM (Task 0/2) —
   opakowuje wyłącznie obrazek wewnątrz .woocommerce-image__wrapper, więc łańcuch
   flex domykamy bezpośrednio na .woocommerce-card__header. */
ul.products li.product .woocommerce-card__header {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	min-height: 0;
}

ul.products li.product .woocommerce-image__wrapper {
	flex: 0 0 auto;
}

/* Stała, zarezerwowana wysokość dwóch pól tekstowych: wyrównuje ceny w rzędzie
   i utrzymuje CLS < 0.05 (treść nie doskakuje po dociągnięciu fontów). */
ul.products li.product .product__categories {
	font-family: var(--aliflori-font-body, "Figtree", sans-serif) !important;
	font-size: 0.8rem !important;
	line-height: 1.3 !important;
	color: var(--aliflori-stem, #5f8a63) !important;
	margin: 0 0 0.35rem !important;
	min-height: 1.04rem;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* display wymaga !important, bo bez niego -webkit-box jest nadpisywane
   (wyliczone flow-root) i line-clamp nie obcina tytułu. Selektor obejmuje
   też wewnętrzny <a>, bo ten ma własne display: flex z motywu nadrzędnego —
   bez obcięcia linka tekst i tak przelewa się poza rezerwowaną wysokość. */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title > a {
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Cross-sells (koszyk) i up-sells (strona produktu) renderują ul.products
   w wąskiej kolumnie obok innej treści — 4 kolumny dałyby miniatury ~100px,
   więc zawężamy siatkę niezależnie od reguł bazowych i responsywnych powyżej. */
.cross-sells ul.products,
.up-sells ul.products {
	grid-template-columns: repeat(2, 1fr) !important;
}

@media (max-width: 768px) {
	.cross-sells ul.products,
	.up-sells ul.products {
		grid-template-columns: 1fr !important;
	}
}