/* ==========================================================================
   Fungo Medic — shop stranica
   Lokacija: child-tema/assets/css/fungo-shop.css

   Font se nigde ne postavlja — sve se nasleđuje iz teme.
   Boje se menjaju samo u :root bloku ispod.
   ========================================================================== */

:root {
	--fungo-gold: #8C714A;
	--fungo-gold-dark: #7a6240;
	--fungo-green: #98B536;
	--fungo-green-dark: #86a02f;
	--fungo-on-color: #ffffff;
	--fungo-gap-x: 32px;
	--fungo-gap-y: 48px;
}

/* --------------------------------------------------------------------------
   1. Mreža
   `!important` na width/float je namerno: WooCommerce i teme postavljaju
   procentualne širine i float na li.product sa istom specifičnošću.
   -------------------------------------------------------------------------- */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--fungo-gap-y) var(--fungo-gap-x);
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

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

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	display: flex;
	flex-direction: column;
	text-align: left;
}

@media (max-width: 900px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 36px 24px;
	}
}

@media (max-width: 560px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* --------------------------------------------------------------------------
   2. Slika i naslov
   -------------------------------------------------------------------------- */

.fungo-card__media {
	display: block;
	margin: 0 0 18px;
}

.fungo-card__media img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.woocommerce ul.products li.product .fungo-card__title {
	margin: 0 0 18px;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

.fungo-card__title a {
	color: inherit;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   3. Ponude
   -------------------------------------------------------------------------- */

.fungo-offers {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: auto; /* poravnava blokove kod kartica različite visine */
}

.fungo-offer {
	display: flex;
	align-items: stretch;
}

.fungo-offer__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	background: var(--fungo-gold);
	color: var(--fungo-on-color);
}

.fungo-offer__label {
	flex: 0 0 auto;
	font-size: 15px;
	line-height: 1.3;
}

.fungo-offer__prices {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	gap: 2px;
}

.fungo-offer__row {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 14px;
}

.woocommerce ul.products li.product .fungo-offer__old {
	font-size: 15px;
	text-decoration: line-through;
	opacity: 0.85;
	white-space: nowrap;
}

.woocommerce ul.products li.product .fungo-offer__new {
	font-size: 17px;
	font-weight: 700;
	white-space: nowrap;
}

.fungo-offer__save {
	font-size: 14px;
	line-height: 1.3;
}

/* Woo umotava iznos u .amount koji tema ume da oboji — nasledi belu. */
.fungo-offer .woocommerce-Price-amount,
.fungo-offer .woocommerce-Price-currencySymbol,
.fungo-offer del,
.fungo-offer ins {
	color: inherit;
	background: none;
	text-decoration: none;
	font-size: inherit;
	font-weight: inherit;
	opacity: 1;
}

/* --------------------------------------------------------------------------
   4. Dugme
   -------------------------------------------------------------------------- */

.woocommerce ul.products li.product a.fungo-offer__btn,
.woocommerce ul.products li.product a.fungo-offer__btn.button {
	flex: 0 0 118px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 10px 8px;
	background: var(--fungo-green);
	color: var(--fungo-on-color);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.woocommerce ul.products li.product a.fungo-offer__btn:hover,
.woocommerce ul.products li.product a.fungo-offer__btn:focus {
	background: var(--fungo-green-dark);
	color: var(--fungo-on-color);
}

.woocommerce ul.products li.product a.fungo-offer__btn:focus-visible {
	outline: 2px solid var(--fungo-gold-dark);
	outline-offset: 2px;
}

/* Puna širina za rezervni prikaz (varijabilni / rasprodato). */
.woocommerce ul.products li.product a.fungo-offer__btn--wide {
	flex: 1 1 auto;
	padding: 16px;
}

/* Woo posle AJAX dodavanja ubaci "Prikaži korpu" link i klasu "added". */
.woocommerce ul.products li.product .fungo-offer .added_to_cart {
	display: none;
}

.woocommerce ul.products li.product a.fungo-offer__btn.loading {
	opacity: 0.75;
}

/* --------------------------------------------------------------------------
   5. Vrlo uski ekrani — dugme ide ispod trake sa cenom
   -------------------------------------------------------------------------- */

@media (max-width: 380px) {
	.fungo-offer {
		flex-direction: column;
	}

	.woocommerce ul.products li.product a.fungo-offer__btn {
		flex: 0 0 auto;
		padding: 12px;
	}

	.fungo-offer__btn br {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product a.fungo-offer__btn {
		transition: none;
	}
}