/* Kartica proizvoda - deljena izmedju naslovne, prodavnice i "slicni proizvodi".
   Isti princip kao kategorije na naslovnoj: slika popunjava celu karticu, info
   boks (kategorija/naziv/cena) "pluta" preko donjeg dela slike sa blur
   pozadinom, na hover se zamenjuje sa "Pogledaj detalje" (slide up). */

.civava-product-card {
	/* Visina info boksa stoji na JEDNOM mestu: i boks i donji padding slike
	   je čitaju. Bez toga slika ostaje centrirana preko cele kartice, pa joj
	   donjih ~80px završi iza opisa — što je i bio slučaj. */
	--info-visina: 130px;

	position: relative;
	display: block;
	height: 422px;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	overflow: hidden;
}

.civava-product-card__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--c-white);
}

.civava-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Donji padding je visina opisa — slika se tako centrira IZNAD njega. */
	padding: 24px 24px var(--info-visina);
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.civava-product-card:hover .civava-product-card__media img {
	transform: scale(1.08);
}

.civava-product-card__info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--info-visina);
	overflow: hidden;
	border-top: 1px solid var(--c-border);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.civava-product-card__body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 12px;
	transform: translateY(0);
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.civava-product-card__body--hover {
	transform: translateY(100%);
}

.civava-product-card:hover .civava-product-card__body--default {
	transform: translateY(-100%);
}

.civava-product-card:hover .civava-product-card__body--hover {
	transform: translateY(0);
}

.civava-product-card__cat {
	display: block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--c-gray);
	margin-bottom: 4px;
}

.civava-product-card__title {
	display: block;
	font-family: var(--font-serif);
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 8px;
}

.civava-product-card__body--hover .civava-product-card__title {
	margin-bottom: 0;
}

.civava-product-card__price {
	display: block;
	font-family: var(--font-serif);
	font-size: 16px;
	font-weight: 700;
	color: var(--c-ink);
}

.civava-product-card__price del {
	font-weight: 400;
	color: var(--c-gray);
	opacity: 0.7;
	margin-right: 6px;
}

.civava-product-card__price ins {
	text-decoration: none;
	color: var(--c-ink);
}

/* "Istaknuti proizvodi" (naslovna) - tacne vrednosti sa Figme, skopirano na
   ovu sekciju (.civava-carousel), ne menja izgled kartica u prodavnici/"slicni
   proizvodi" dok se to eksplicitno ne zatrazi. */
.civava-carousel .civava-product-card__info,
.civava-shop__results .civava-product-card__info {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.civava-carousel .civava-product-card__body,
.civava-shop__results .civava-product-card__body {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.civava-carousel .civava-product-card__cat,
.civava-shop__results .civava-product-card__cat {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 500;
	line-height: 14.4px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #7a6e63;
	margin-bottom: 0;
}

.civava-carousel .civava-product-card__title,
.civava-shop__results .civava-product-card__title {
	font-family: var(--font-serif);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #8c6d3f;
}

.civava-carousel .civava-product-card__body--hover .civava-product-card__title,
.civava-shop__results .civava-product-card__body--hover .civava-product-card__title {
	color: #1c1612;
}

.civava-carousel .civava-product-card__price,
.civava-shop__results .civava-product-card__price {
	font-family: var(--font-serif);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 2px;
	color: #1c1612;
}

/* Grid - koristi se u prodavnici i "slicni proizvodi" */
.civava-product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

/* Slider - koristi se za "Istaknuti proizvodi" na naslovnoj (vidi
   content-homepage.php i assets/js/main.js) */
.civava-carousel {
	position: relative;
}

.civava-carousel__viewport {
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.civava-carousel__viewport::-webkit-scrollbar {
	display: none;
}

.civava-product-grid--slider {
	display: flex;
	gap: 24px;
}

.civava-product-grid--slider .civava-product-card {
	flex: 0 0 calc((100% - 24px * 3) / 4);
	scroll-snap-align: start;
}

.civava-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	background: #fff;
	border: 1px solid rgba(122, 110, 99, 0.5);
	border-radius: 0;
	color: #7a6e63;
	opacity: 0;
	transition: opacity 0.25s ease, border-color 0.15s ease, color 0.15s ease;
	height: 40px;
	width: 40px;
}

.civava-carousel__nav svg {
	display: block;
	width: 14px;
	height: 14px;
}

.civava-carousel__nav:hover {
	border-color: var(--c-ink);
	color: var(--c-ink);
}

.civava-carousel__nav--prev {
	left: -20px;
}

.civava-carousel__nav--next {
	right: -20px;
}

.civava-featured:hover .civava-carousel__nav {
	opacity: 1;
}

/* Strelice karusela gore desno, jedna pored druge (umesto flankiranja
   levo/desno oko cele trake kao na naslovnoj) - koristi se na "Најпродаваније"
   (prodavnica) i "Слични производи" (single proizvod). */
.civava-carousel--top-nav {
	padding-top: 38px;
}

.civava-carousel--top-nav .civava-carousel__nav {
	position: absolute;
	top: -46px;
	transform: none;
	opacity: 1;
}

.civava-carousel--top-nav .civava-carousel__nav--prev {
	left: auto;
	right: 56px;
}

.civava-carousel--top-nav .civava-carousel__nav--next {
	right: 0;
}

@media (max-width: 1024px) {
	.civava-product-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.civava-product-grid--slider .civava-product-card {
		flex: 0 0 calc((100% - 24px) / 2);
	}
}

@media (max-width: 560px) {
	.civava-product-grid {
		grid-template-columns: 1fr;
	}

	.civava-product-grid--slider .civava-product-card {
		flex: 0 0 80%;
	}

	.civava-carousel__nav {
		opacity: 1;
	}
}

/* ===========================================================================
   MOBILNI PRIKAZ (<= 600px)
   Kartica je po dizajnu niza: 292px umesto 422px (Figma "Mobile Proizvodi
   global" 275:8403 i "Mobile Proizvodi single" 277:10990 - kartice su tamo
   160x292 odnosno 158x292).

   Visina se postavlja samo na kartici: .civava-product-card__media je
   position:absolute inset:0 pa prati kutiju, a __info ostaje 130px preko
   dna - slika tako dobija preostalih 162px.
   =========================================================================== */
@media (max-width: 600px) {
	.civava-product-card {
		height: 292px;
	}

	/* Prostor za sliku se sa 292px spustio na 161px, pa 24px paddinga (mera
	   za desktop karticu) ostavlja previse belog - srazmerno se smanjuje. */
	.civava-product-card__media img {
		padding: 12px 12px var(--info-visina);
	}

	/* Izuzetak: karusel istaknutih na naslovnoj je po dizajnu siri (280px)
	   i zato visi - 280x422, jedna kartica centrirana sa provirivanjem. */
	.civava-featured .civava-product-card {
		height: 422px;
	}
}