/* Prodavnica (WooCommerce arhiva) - po Figma "Proizvodi - Global 1" dizajnu */

.civava-shop {
	padding-top: 86px;
	padding-bottom: 0;
}

.civava-shop__title {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 40px;
	font-weight: 500;
	line-height: 56.16px;
	color: #1c1612;
}

/* Sidebar + filter/search traka su "sticky" dok se skroluje lista - obe se
   "otkace" prirodno na kraju .civava-shop__scroll-area (pre sekcije
   "Најпродаваније"), bez JS-a. */
.civava-shop__scroll-area {
	position: relative;
}

.civava-shop__filter-bar {
	position: sticky;
	top: 108px;
	z-index: 10;
	background: var(--c-white);
	padding: 20px 0;
	margin-bottom: 40px;
}

.civava-shop__top-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.civava-shop__filters {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-left: auto;
}

.civava-shop__sort {
	position: relative;
	display: flex;
	align-items: center;
}

.civava-shop__sort select {
	display: flex;
	width: 250px;
	height: 49px;
	padding: 12.8px 16px;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	appearance: none;
	border: 1px solid #d1c4af;
	border-radius: 0;
	background: var(--c-white);
	font-family: var(--font-body);
	font-size: 14.4px;
	font-weight: 400;
	color: #7a6e63;
}

.civava-shop__sort svg {
	position: absolute;
	right: 16px;
	width: 16px;
	height: 16px;
	pointer-events: none;
	color: #7a6e63;
}

.civava-shop__search {
	display: flex;
	gap: 0;
}

.civava-shop__search input {
	display: flex;
	width: 250px;
	height: 49px;
	padding: 12.8px 16px;
	align-items: center;
	flex-shrink: 0;
	border: 1px solid #d1c4af;
	border-right: none;
	border-radius: 0;
	font-family: var(--font-body);
	font-size: 14.4px;
	font-weight: 400;
	color: var(--c-ink);
}

.civava-shop__search input::placeholder {
	color: rgba(122, 110, 99, 0.5);
}

.civava-shop__search .civava-btn {
	border-radius: 0;
	height: 49px;
	width: 49px;
	padding: 0;
	flex-shrink: 0;
}

.civava-shop__search .civava-btn svg {
	width: 20px;
	height: 20px;
	color: #fff;
}

.civava-shop__layout {
	display: grid;
	grid-template-columns: 246px 1fr;
	gap: 64px;
	align-items: start;
}

.civava-shop__sidebar-sticky {
	position: sticky;
	top: calc(108px + 90px + 65px);
}

/* --- Sidebar kategorija --- */

.civava-shop-sidebar {
	display: flex;
	flex-direction: column;
}

.civava-shop-sidebar__item {
	padding: 0;
	border-bottom: 1px solid rgba(122, 110, 99, 0.5);
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 600;
	line-height: 40px;
	color: #1c1612;
}

a.civava-shop-sidebar__item {
	display: flex;
	align-items: center;
	height: 64px;
}

a.civava-shop-sidebar__item.is-active {
	color: #a17c5c;
}

.civava-shop-sidebar__accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	padding: 0;
	list-style: none;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 600;
	line-height: 40px;
	color: #1c1612;
}

.civava-shop-sidebar__accordion summary::-webkit-details-marker {
	display: none;
}

.civava-shop-sidebar__accordion summary a {
	color: inherit;
}

.civava-shop-sidebar__accordion summary.is-active a {
	color: #a17c5c;
}

.civava-shop-sidebar__accordion summary svg {
	color: #7a6e63;
	flex-shrink: 0;
}

.civava-shop-sidebar__icon-open {
	display: none;
}

.civava-shop-sidebar__accordion[open] .civava-shop-sidebar__icon-closed {
	display: none;
}

.civava-shop-sidebar__accordion[open] .civava-shop-sidebar__icon-open {
	display: inline-flex;
}

.civava-shop-sidebar__sublist {
	padding-bottom: 12px;
}

.civava-shop-sidebar__sublist a {
	display: block;
	padding: 4px 0;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 400;
	color: #7a6e63;
}

.civava-shop-sidebar__sublist a.is-active,
.civava-shop-sidebar__sublist a:hover {
	color: #a17c5c;
}

.civava-product-grid--3col {
	grid-template-columns: repeat(3, 1fr);
}

.civava-shop__results--full {
	width: 100%;
}

.civava-shop__results.is-loading {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

/* --- Tabovi kategorija (Global 2 layout, vidi shop-category-tabs.php) --- */

.civava-shop-tabs {
	display: flex;
	align-items: stretch;
	width: 100%;
	border-bottom: 1px solid rgba(122, 110, 99, 0.3);
	margin-top: 20px;
}

.civava-shop-tabs__item-wrap {
	position: relative;
	flex: 1 1 0;
}

.civava-shop-tabs__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 100%;
	padding: 12px 0;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #7a6e63;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
}

.civava-shop-tabs__item svg {
	width: 12px;
	height: 12px;
	transition: transform 0.2s ease;
}

.civava-shop-tabs__item.is-active,
.civava-shop-tabs__item-wrap:hover .civava-shop-tabs__item,
.civava-shop-tabs__item-wrap:focus-within .civava-shop-tabs__item {
	color: #1c1612;
	border-bottom-color: #1c1612;
}

.civava-shop-tabs__item-wrap:hover .civava-shop-tabs__item svg,
.civava-shop-tabs__item-wrap:focus-within .civava-shop-tabs__item svg {
	transform: rotate(180deg);
}

.civava-shop-tabs__dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 15;
	display: flex;
	width: 309px;
	padding: 16px 12px;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-50%) translateY(4px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.civava-shop-tabs__item-wrap:hover .civava-shop-tabs__dropdown,
.civava-shop-tabs__item-wrap:focus-within .civava-shop-tabs__dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.civava-shop-tabs__dropdown a {
	display: block;
	width: 100%;
	text-align: left;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
	color: #7a6e63;
	white-space: nowrap;
}

.civava-shop-tabs__dropdown a.is-active,
.civava-shop-tabs__dropdown a:hover {
	color: #a17c5c;
}

.civava-pagination {
	margin-top: 48px;
	display: flex;
	justify-content: center;
}

.civava-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	margin: 0 4px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
	color: var(--c-text);
}

.civava-pagination .page-numbers.current {
	background: var(--c-bronze);
	color: var(--c-white);
	border-color: var(--c-bronze);
}

/* --- Najprodavanije --- */

.civava-shop__bestsellers {
	border-top: 1px solid rgba(122, 110, 99, 0.25);
	padding-top: 100px;
	padding-bottom: 110px;
}



.civava-shop__bestsellers-head .civava-eyebrow {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	line-height: 14.4px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #8c6d3f;
}

.civava-shop__bestsellers-title {
	font-family: var(--font-serif);
	font-size: 36px;
	font-weight: 500;
	line-height: 56.16px;
	color: #1c1612;
}

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

	.civava-shop__sidebar-sticky {
		position: static;
	}

	/* Razmak ispod reda sa filterima. Bilo je 20px paddinga + 40px margine =
	   60px praznine do kategorija, što na telefonu gura proizvode ispod ivice
	   ekrana pre nego što se i jedan vidi. */
	.civava-shop__filter-bar {
		position: static;
		padding-block: 12px;
		margin-bottom: 16px;
	}

	.civava-product-grid--3col {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	.civava-shop {
		padding-top: 36px;
	}

	.civava-shop__bestsellers {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.civava-shop-tabs {
		overflow-x: auto;
		gap: 24px;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.civava-shop-tabs::-webkit-scrollbar {
		display: none;
	}
}

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

	.civava-shop__sort select,
	.civava-shop__search input {
		width: 100%;
	}
}

/* --- Fioka sa filterima: na desktopu je nema ---
   display:contents sklanja omotac iz rasporeda, pa sidebar/tabovi ostaju
   tacno gde su i bili. Zaglavlje i dugme "Примени филтере" su mobilni dodaci. */
.civava-shop-drawer {
	display: contents;
}

.civava-shop-drawer__head,
.civava-shop-drawer__foot,
.civava-shop__filters-toggle,
.civava-shop__sort-price {
	display: none;
}

/* ===========================================================================
   MOBILNI PRIKAZ (<= 600px)
   Figma "Mobile Proizvodi global" (275:8403) i "Mobile филтрација производа"
   (275:9145), fajl Ub6KR0WLgKThfonWqvzoRn.

   - naslov ide u svoj red, centriran;
   - ispod njega dugme "Филтери" + pretraga;
   - proizvodi u DVE kolone;
   - kategorije (sidebar ili tabovi, zavisno od ACF opcije) sele se u fioku
     preko celog ekrana koju otvara dugme "Филтери".
   Isti kod pokriva oba rasporeda prodavnice.
   =========================================================================== */
@media (max-width: 600px) {

	/* --- Gornji red --- */
	.civava-shop__top-row {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.civava-shop__title {
		text-align: center;
		font-size: 28px;
		line-height: 36px;
	}

	.civava-shop__filters {
		margin-left: 0;
		flex-wrap: nowrap;
		gap: 12px;
	}

	/* Dugme za fioku zauzima preostalu sirinu, pretraga se skuplja na ikonicu.

	   Visina se postavlja IZRIČITO, a ne kroz padding: „Filteri" je od
	   paddinga ispadao 53px, a dugme pretrage je 56px — tri piksela razlike,
	   taman toliko da se vidi da nisu poravnati. 48px je niže nego oba, a i
	   dalje pouzdana meta za prst. */
	.civava-shop__filters-toggle {
		display: block;
		flex: 1 1 auto;
		height: 48px;
		padding: 0 16px;
		border: 1px solid var(--c-border);
		background: none;
		color: #7a6e63;
		font-family: var(--font-body);
		font-size: 14px;
		font-weight: 400;
		letter-spacing: 2px;
		text-transform: uppercase;
		cursor: pointer;
	}

	/* Sortiranje na dizajnu stoji u fioci, ne u gornjem redu - premesta ga
	   assets/js/shop-filters.js da se polje ne bi dupliralo. */
	.civava-shop__sort {
		display: none;
	}

	.civava-shop__search input {
		display: none;
	}

	/* Isto 48px kao dugme „Filteri" pored njega — kvadratno, da ostane meta
	   za prst i kad je samo ikonica. */
	.civava-shop__search .civava-btn {
		width: 48px;
		height: 48px;
		padding: 0;
	}

	/* Sidebar je na mobilnom prazan - sav sadrzaj mu je u fioci koja je
	   position:fixed. Kao grid stavka bi i dalje pravio svoj red i 64px
	   razmaka iznad proizvoda, pa se grid ovde gasi. Ne moze display:none
	   na sam sidebar: time bi nestala i fioka koja je u njemu. */
	.civava-shop__layout {
		display: block;
	}

	/* --- Proizvodi: dve kolone --- */
	.civava-product-grid--3col,
	.civava-shop__results .civava-product-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	/* --- Fioka --- */
	.civava-shop-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		inset: 0;
		z-index: 1200;
		background: var(--c-white);
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
	}

	.civava-shop-drawer.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	.civava-shop-drawer__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		flex: 0 0 auto;
		padding: 24px 20px;
	}

	.civava-shop-drawer__title {
		font-family: var(--font-body);
		font-size: 18px;
		font-weight: 600;
		color: var(--c-ink);
	}

	.civava-shop-drawer__close {
		display: inline-flex;
		padding: 4px;
		border: 0;
		background: none;
		color: var(--c-ink);
		cursor: pointer;
	}

	.civava-shop-drawer__close svg {
		width: 24px;
		height: 24px;
	}

	.civava-shop-drawer__body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		padding: 0 20px;
	}

	.civava-shop-drawer__foot {
		display: block;
		flex: 0 0 auto;
		padding: 20px;
	}

	.civava-shop-drawer__foot .civava-btn {
		width: 100%;
		justify-content: center;
		padding: 18px;
	}

	/* --- Sortiranje u fioci: dva izbora po ceni ---
	   Na mobilnom dizajnu nema padajuceg menija sa pet opcija, nego samo dva
	   izbora po ceni. Select ostaje u markup-u (desktop), ovde se sakriva, a
	   shop-filters.js se stara da se salje samo onaj koji je u upotrebi. */
	.civava-shop-drawer__body .civava-shop__sort {
		display: block;
		width: 100%;
		margin-top: 32px;
	}

	.civava-shop-drawer__body .civava-shop__sort-select,
	.civava-shop-drawer__body .civava-shop__sort > svg {
		display: none;
	}

	.civava-shop__sort-price {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.civava-shop__sort-price-title {
		font-family: var(--font-body);
		font-size: 16px;
		font-weight: 600;
		color: var(--c-bronze);
	}

	/* Izgled samog kruga dolazi iz .civava-radio (base.css). */

	/* --- Kategorije u fioci: neaktivne sivo-braon, aktivna crna --- */
	.civava-shop-drawer__body .civava-shop-sidebar__item,
	.civava-shop-drawer__body .civava-shop-sidebar__item a,
	.civava-shop-drawer__body .civava-shop-sidebar__accordion summary,
	.civava-shop-drawer__body .civava-shop-sidebar__accordion summary a,
	.civava-shop-drawer__body .civava-shop-tabs__item,
	.civava-shop-drawer__body .civava-shop-tabs__dropdown a {
		color: #7a6e63;
	}

	.civava-shop-drawer__body .civava-shop-sidebar__item.is-active,
	.civava-shop-drawer__body .civava-shop-sidebar__item.is-active a,
	.civava-shop-drawer__body .civava-shop-sidebar__accordion summary.is-active,
	.civava-shop-drawer__body .civava-shop-sidebar__accordion summary.is-active a,
	.civava-shop-drawer__body .civava-shop-sidebar__sublist a.is-active,
	.civava-shop-drawer__body .civava-shop-tabs__item.is-active,
	.civava-shop-drawer__body .civava-shop-tabs__dropdown a.is-active {
		color: var(--c-ink);
	}

	/* Kategorije u fioci idu jedna ispod druge, i kad su na desktopu tabovi. */
	.civava-shop-drawer__body .civava-shop-tabs {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		overflow: visible;
	}

	/* "Најпродаваније" karusel: dve kartice u redu kao na dizajnu (158px),
	   umesto podrazumevane osnove za cetiri po redu sa desktopa. */
	.civava-shop__bestsellers .civava-product-grid--slider {
		gap: 16px;
	}

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

	/* Dok je fioka otvorena, stranica iza ne skroluje. */
	body.civava-filters-open {
		overflow: hidden;
	}
}

/* --- Kategorije kao vodoravni red (samo telefon) --- */

/* Na desktopu i tabletu kategorije stoje u sidebar-u; ovaj red bi bio
   udvajanje. Pojavljuje se tek tamo gde je sidebar sklonjen u fioku. */
.civava-shop__kat-mob {
	display: none;
}

@media (max-width: 600px) {
	.civava-shop__kat-mob {
		display: block;
		padding-block: 0 14px;
	}

	/* Sve kategorije se VIDE odjednom — prelamaju se u više redova umesto da
	   se skroluju. Kupac tako odmah zna šta sve postoji; ono što je van ekrana
	   po pravilu se i ne potraži. */
	.civava-shop-kat-mob {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px;
	}

	.civava-shop-kat-mob__stavka {
		flex: 0 0 auto;
		padding: 7px 11px;
		border: 1px solid var(--c-border);
		font-family: var(--font-body);
		font-size: 12.5px;
		line-height: 1.2;
		white-space: nowrap;
		color: var(--c-text);
		text-decoration: none;
		background: var(--c-white);
		transition: color var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease, background var(--duration-fast, 150ms) ease;
	}

	/* Podkategorije su uvučene jedan nivo — tačka ih vezuje za roditelja. */
	.civava-shop-kat-mob__stavka--dete {
		font-size: 11.5px;
		color: var(--c-gray);
	}

	.civava-shop-kat-mob__stavka--dete::before {
		content: "· ";
		color: var(--c-border);
	}

	.civava-shop-kat-mob__stavka.is-active {
		color: var(--c-white);
		background: var(--c-bronze);
		border-color: var(--c-bronze);
	}

	.civava-shop-kat-mob__stavka:focus-visible {
		outline: 2px solid var(--c-bronze);
		outline-offset: 2px;
	}
}