/*
EsEm Tactical — filteri na stranici kategorije.
Kartica proizvoda (esem-kartica, kar-*) ostaje u kartica.css; ovdje je
samo bočni panel, alatka, chips, prazno stanje, straničenje i opis kategorije.
*/

.kat-omot { display: grid; grid-template-columns: 274px 1fr; gap: 36px; align-items: start; }

.kat-filteri { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; padding-right: 4px; }

.f-grupa { border-bottom: 1px solid var(--linija); }
.f-glava {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 15px 0; background: none; border: 0; cursor: pointer;
	font-family: 'Saira Condensed', sans-serif; font-size: 16px; letter-spacing: .06em;
	text-transform: uppercase; color: var(--maslina-tamna); text-align: left;
}
.f-glava .strelica-f {
	width: 9px; height: 9px; border-right: 2px solid var(--sivi); border-bottom: 2px solid var(--sivi);
	transform: rotate(45deg); transition: transform .2s; flex: none; margin-bottom: 3px;
}
.f-grupa.zatvorena .strelica-f { transform: rotate(-45deg); }
.f-tijelo { padding-bottom: 16px; }
.f-grupa.zatvorena .f-tijelo { display: none; }

.f-red { display: flex; align-items: center; gap: 9px; padding: 5px 0; cursor: pointer; font-size: 14.5px; }
.f-red input { width: 16px; height: 16px; accent-color: var(--maslina); cursor: pointer; flex: none; }
.f-red .f-ime { flex: 1; min-width: 0; }
.f-red .f-broj { font-size: 12.5px; color: var(--sivi); flex: none; }
.f-red.nema { opacity: .4; pointer-events: none; }

.f-tacka { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.f-tacka[data-stanje="odmah"] { background: var(--zelena); }
.f-tacka[data-stanje="sedam"] { background: var(--zuta); }
.f-tacka[data-stanje="deset"] { background: var(--crvena); }
.f-tacka[data-stanje="nema"]  { background: #b6b3ab; }

.f-mrlja { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--linija); flex: none; }

.f-vel-mreza { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.f-vel { position: relative; display: block; }
.f-vel input { position: absolute; opacity: 0; width: 0; height: 0; }
.f-vel span {
	display: block; text-align: center; padding: 8px 4px; border: 1px solid var(--linija);
	font-size: 14px; cursor: pointer; transition: .15s; user-select: none;
}
.f-vel input:checked + span { background: var(--maslina); border-color: var(--maslina); color: #fff; }
.f-vel span:hover { border-color: var(--maslina); }
.f-vel.nema span { opacity: .35; text-decoration: line-through; pointer-events: none; }

.f-cijena { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.f-cijena input {
	width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--linija);
	font-family: inherit; font-size: 14px; outline: none;
}
.f-cijena input:focus { border-color: var(--maslina); }

.f-primijeni {
	display: none; width: 100%; margin-top: 20px; padding: 14px; background: var(--maslina); color: #fff;
	border: 0; font-family: 'Saira Condensed', sans-serif; font-size: 16px; letter-spacing: .08em;
	text-transform: uppercase; cursor: pointer;
}

.cipovi { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cip {
	display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--krem);
	border: 1px solid var(--linija); font-size: 13.5px;
}
.cip button { background: none; border: 0; font-size: 17px; line-height: 1; color: var(--sivi); cursor: pointer; padding: 0; }
.cip button:hover { color: var(--crvena); }
.cip-ocisti { background: none; border: 0; font-size: 13.5px; color: var(--crvena); cursor: pointer; text-decoration: underline; padding: 6px 2px; }

.kat-alatka {
	display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--linija);
}
.kat-broj { font-size: 15px; color: var(--sivi); }
.kat-broj b { color: var(--maslina-tamna); }
.kat-desno { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.kat-sort, .kat-po-str { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--sivi); }
.kat-sort select, .kat-po-str select {
	padding: 9px 12px; border: 1px solid var(--linija); background: #fff;
	font-family: inherit; font-size: 14.5px; color: var(--tekst); cursor: pointer; outline: none;
}
.kat-sort select:focus, .kat-po-str select:focus { border-color: var(--maslina); }
.f-dugme { display: none; }

.kat-prazno { padding: 50px 20px; text-align: center; color: var(--sivi); border: 1px dashed var(--linija); }
.kat-prazno b { display: block; font-family: 'Saira Condensed', sans-serif; font-size: 19px; color: var(--maslina-tamna); margin-bottom: 8px; }

.strane { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 32px; flex-wrap: wrap; }
.strane button {
	min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--linija); background: #fff;
	font-family: 'Saira Condensed', sans-serif; font-size: 15px; color: var(--tekst); cursor: pointer; transition: .15s;
}
.strane button:hover:not(:disabled) { border-color: var(--maslina); }
.strane button.tekuca { background: var(--maslina); border-color: var(--maslina); color: #fff; }
.strane button:disabled { opacity: .35; cursor: default; }

.kat-opis { margin-top: 46px; border-top: 1px solid var(--linija); padding-top: 26px; }
.kat-opis h2 { font-family: 'Saira Condensed', sans-serif; font-size: 22px; margin: 0 0 12px; }
.kat-opis .tekst { position: relative; max-height: 104px; overflow: hidden; transition: max-height .3s ease; }
.kat-opis .tekst::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52px;
	background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}
.kat-opis.otvoren .tekst { max-height: 1400px; }
.kat-opis.otvoren .tekst::after { display: none; }
.kat-opis p { margin-bottom: 12px; line-height: 1.75; }
.kat-vise {
	margin-top: 12px; background: none; border: 0; font-family: 'Saira Condensed', sans-serif; font-size: 14.5px;
	letter-spacing: .06em; text-transform: uppercase; color: var(--maslina); cursor: pointer; padding: 0; text-decoration: underline;
}

/* Karticu koju je filter odbio jednostavno sakrijemo. */
#katMreza .esem-kartica.sakriven { display: none; }

/* ---------- mobilni ekran ---------- */

@media (max-width: 1000px) {
	.kat-omot { grid-template-columns: 1fr; gap: 0; }

	.kat-filteri {
		position: fixed; inset: 0; z-index: 120; background: #fff; overflow-y: auto; max-height: none;
		padding: 18px 18px 30px; transform: translateY(100%); transition: transform .26s ease; visibility: hidden;
	}
	.kat-filteri.otvoreni { transform: translateY(0); visibility: visible; }

	.f-vrh {
		display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
		position: sticky; top: -18px; background: #fff; padding: 10px 0;
	}
	.f-vrh h2 { font-family: 'Saira Condensed', sans-serif; font-size: 21px; text-transform: uppercase; margin: 0; }
	.f-zatvori { background: none; border: 0; font-size: 30px; line-height: 1; color: var(--sivi); cursor: pointer; padding: 0 4px; }

	.f-primijeni { display: block; }

	.f-dugme {
		display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--linija);
		background: #fff; font-family: 'Saira Condensed', sans-serif; font-size: 14.5px; letter-spacing: .06em;
		text-transform: uppercase; color: var(--maslina-tamna); cursor: pointer;
	}
	.f-dugme b { background: var(--maslina); color: #fff; border-radius: 10px; padding: 1px 7px; font-size: 12px; }

	.kat-desno { gap: 10px; }
}

@media (max-width: 760px) {
	.kat-po-str { display: none; }
}

/* ---------- opis brenda na listi proizvoda brenda ---------- */
.kat-brend{background:var(--maslina-tamna,#272c20);color:var(--coyote-svijetla,#e3d5bd);padding:26px 30px 24px;margin:0 0 18px;text-align:center}
.kat-brend .kat-brend-logo{height:52px!important;width:auto!important;max-width:240px!important;display:block;margin:0 auto 14px;filter:invert(1) brightness(1.7)}
.kat-brend-ime{font-family:'Oswald',sans-serif;font-size:26px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#fff;margin-bottom:10px}
.kat-brend-tekst{max-width:760px;margin:0 auto;font-size:15px;line-height:1.65}
.kat-brend-vise{margin-top:10px;background:none!important;border:0!important;color:var(--coyote,#b99a6b)!important;font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0!important;box-shadow:none!important}
@media (max-width:760px){
	.kat-brend{padding:20px 18px 18px;margin-bottom:14px}
	.kat-brend .kat-brend-logo{height:40px!important;margin-bottom:10px}
	.kat-brend-tekst{font-size:14px;line-height:1.6}
	.kat-brend.skraceno .kat-brend-tekst{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
}