/* =============================================================================
   _category-grid.css — MaskeZaMob Grid Podkategorija

   Scope:     .mzm-catgrid-wrap
   Zavisnost: _design-tokens.css (mora biti enqueue-ovan pre)
   Enqueue:   mzm_enqueue_category_grid_styles() — samo na category pages
              sa podkategorijama
   ============================================================================= */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */

/* Kutiju sadržaja NOSI RODITELJ, ne ovaj omotač (F-044, 10.08.2026.).
 *
 * Ovde je do 10.08. stajalo `max-width: 1200px; padding: 0 16px 64px` —
 * peta širina na sajtu, i na 1440 je gurala mrežu modela 49.75px udesno od
 * breadcrumbs-a.
 *
 * Prva ispravka (F-043) je omotaču dala `.row` kutiju, 1282.5px / 7.5px.
 * Poklopilo se sa breadcrumbs-ima, ali su OBA bila 38.75px izvan linije
 * logotipa i menija — vidi `_design-tokens.css` → „KOJA JE LINIJA PRAVA".
 *
 * Sada `.shop-container` iz `_layout.css` ima `max-width` i `margin: auto`,
 * dakle ponaša se kao `.container`. Ovaj omotač je blok element unutar njega
 * i tu kutiju dobija bez ijednog pravila. Svako `max-width` ili bočni padding
 * ovde bi ga ponovo izmestio — zato ih nema.
 *
 * `padding-bottom` nije deo kutije nego razmak do footera i ostaje.
 *
 * ⚠️ Ne vraćati `max-width` ovamo. Ako grid ikad treba UŽI od ostatka strane,
 * to je dizajnerska odluka i ide uz obrazloženje, a ne kao zatečena vrednost. */
.mzm-catgrid-wrap {
	padding: 0 0 64px;
}


/* ── Header: naslov + search ─────────────────────────────────────────────── */

.mzm-catgrid-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.mzm-catgrid-title {
	font-family: var(--mzm-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--mzm-navy, #0e1629);
	margin: 0;
	line-height: 1.2;
}

.mzm-catgrid-search-wrap {
	position: relative;
	flex-shrink: 0;
}

.mzm-catgrid-search {
	font-family: var(--mzm-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 0.9rem;
	color: var(--mzm-navy, #0e1629);
	background: var(--mzm-surface, #f8f9fb);
	border: 1px solid var(--mzm-border, #e5e7eb);
	border-radius: var(--mzm-radius-md, 8px);
	padding: 10px 40px 10px 14px;
	width: 240px;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.mzm-catgrid-search:focus {
	border-color: var(--mzm-accent, #3c83f5);
	box-shadow: 0 0 0 3px rgba(60, 131, 245, 0.14);
}

.mzm-catgrid-search::placeholder {
	color: #9ca3af;
}

/* Reset browser default "x" clear button na type=search */
.mzm-catgrid-search::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* ⚠️ Flatsome gazi i `border-radius` i `margin` na `input` — izmereno 12.08.2026.
 *
 * `getComputedStyle(input).borderRadius` je vraćao **0px**, iako je pravilo iznad
 * tražilo 8px. Zaobljenja nikad nije ni bilo.
 *
 * Druga posledica je bila pomerena lupica. Izmereno:
 *
 *   wrap visina    54.42
 *   input visina   38.91
 *   razlika        15.52   ← Flatsome-ova donja margina + razmak ispod inline-block-a
 *   ikona niža za   7.75   ← tačno pola razlike
 *
 * Ikona je bila ispravno centrirana — samo na POGREŠNU kutiju. `top: 50%` se
 * računa na omotač, a omotač je bio viši od polja. Nije greška u ikoni.
 *
 * Selektor je namerno specifičnosti 0,3,1 (`header` + `wrap` + `input.klasa`) —
 * dovoljno da nadjača Flatsome bez `!important`. */
.mzm-catgrid-header .mzm-catgrid-search-wrap input.mzm-catgrid-search {
	display: block;              /* gasi razmak ispod inline-block-a */
	margin: 0;                   /* gasi Flatsome-ovu donju marginu */
	border-radius: var(--mzm-radius-full, 9999px);
}

.mzm-catgrid-search-icon {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #9ca3af;
	pointer-events: none;
	display: flex;
	align-items: center;
	line-height: 0;
}


/* ── Grid ────────────────────────────────────────────────────────────────── */

.mzm-catgrid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}


/* ── Card item ───────────────────────────────────────────────────────────── */

.mzm-catgrid__item[hidden] {
	display: none;
}

.mzm-catgrid__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	gap: 10px;
	transition: transform 0.18s ease;
}

.mzm-catgrid__link:hover,
.mzm-catgrid__link:focus-visible {
	transform: translateY(-3px);
	outline: none;
}

.mzm-catgrid__link:focus-visible .mzm-catgrid__img-wrap {
	box-shadow: 0 0 0 3px var(--mzm-accent, #3c83f5);
}

.mzm-catgrid__link:hover .mzm-catgrid__img-wrap {
	box-shadow: 0 8px 24px rgba(14, 22, 41, 0.11);
	border-color: var(--mzm-accent, #3c83f5);
}


/* ── Image wrap ──────────────────────────────────────────────────────────── */

.mzm-catgrid__img-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--mzm-radius-md, 8px);
	overflow: hidden;
	background: var(--mzm-surface, #f8f9fb);
	border: 1px solid var(--mzm-border, #e5e7eb);
	transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.mzm-catgrid__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8px;
	display: block;
	transition: transform 0.18s ease;
}

.mzm-catgrid__link:hover .mzm-catgrid__img {
	transform: scale(1.03);
}

/* Placeholder kada kategorija nema sliku */
.mzm-catgrid__img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #c8cdd8;
	padding: 20%;
}

.mzm-catgrid__img--placeholder svg {
	width: 100%;
	height: 100%;
}


/* ── Badge: NOVO / POPULARNO / AKCIJA ────────────────────────────────────── */

/* ⚠️ Do 12.08.2026. je boja stajala na osnovnom pravilu, pa bi svi badge-evi
   bili iste boje. Sada je nosi modifikator; osnovno pravilo drži oblik i položaj.

   „NOVO" je namerno **accent plava**, ne zelena. Token `--mzm-new-badge`
   (#22c55e) je postojao od početka, ali se praktično nije video — grid je za
   „NOVO" koristio accent, a karusel jeste zelenu, samo je ta sekcija bila retko
   gledana. Zelena bi bila jedina zelena boja na celom sajtu, pa je token
   obrisan 12.08. kao mrtav — isto kao `--mzm-container-max` u `F-043`. */

.mzm-catgrid__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	color: #fff;
	font-family: var(--mzm-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 7px;
	border-radius: 4px;
	line-height: 1.4;
	user-select: none;
}

/* Modifikatori IDU POSLE osnovnog pravila — iste su specifičnosti, pa odlučuje
   redosled. Obrnuto bi sve tri bile u istoj boji. */
.mzm-catgrid__badge--novo      { background: var(--mzm-accent, #3c83f5); }
.mzm-catgrid__badge--popularno { background: var(--mzm-navy, #0e1629); }
.mzm-catgrid__badge--akcija    { background: var(--mzm-sale-badge, #ee4343); }


/* ── Category name ───────────────────────────────────────────────────────── */

.mzm-catgrid__name {
	font-family: var(--mzm-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--mzm-navy, #0e1629);
	text-align: center;
	line-height: 1.35;
	transition: color 0.15s ease;
}

.mzm-catgrid__link:hover .mzm-catgrid__name {
	color: var(--mzm-accent, #3c83f5);
}


/* ── No results (JS toggle) ──────────────────────────────────────────────── */

.mzm-catgrid-no-results {
	text-align: center;
	color: #6b7280;
	font-family: var(--mzm-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 0.95rem;
	padding: 40px 0 0;
	margin: 0 0 40px;
}

.mzm-catgrid-no-results[hidden] {
	display: none;
}


/* ── Trust bar ───────────────────────────────────────────────────────────── */

/* ⚠️ SNIŽENA 05.09.2026., na Verin zahtev („treba da bude dosta manja").
 *
 * Traka je zauzimala ~110px visine na strani na koju kupac dolazi po
 * proizvode. Nije obrisana — nosi četiri obećanja koja smanjuju nesigurnost pri
 * prvoj kupovini — ali je svedena na traku umesto na blok.
 *
 * Šta je smanjeno i za koliko:
 *   padding   24px → 14px
 *   gap       24px → 16px
 *   margina   48px → 28px
 *   ikonica   32px → 20px
 *   raspored  ikona IZNAD teksta → ikona PORED teksta
 *
 * ⚠️ Najviše visine je uzeo RASPORED, ne razmaci: ikona iznad teksta pravi dva
 *    reda po stavci. Vodoravno je jedan red, pa traka pada na ~48px.
 */
.mzm-trust-bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	background: var(--mzm-surface, #f8f9fb);
	border: 1px solid var(--mzm-border, #e5e7eb);
	border-radius: var(--mzm-radius-md, 8px);
	padding: 14px 18px;
	margin-bottom: 28px;
}

.mzm-trust-bar__item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: left;
}

.mzm-trust-bar__icon {
	width: 20px;
	height: 20px;
	color: var(--mzm-accent, #3c83f5);
	flex-shrink: 0;
}

/* ⚠️ Ispod 550px se vraća uspravno i u dve kolone — četiri stavke u jednom redu
   na telefonu daju po dve reči po redu, što je nečitljivo. Prag 550 je granica
   koju projekat već koristi. */
@media (max-width: 549px) {
	.mzm-trust-bar {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		padding: 12px;
	}

	.mzm-trust-bar__item {
		flex-direction: column;
		text-align: center;
		gap: 4px;
	}
}

.mzm-trust-bar__item span {
	font-family: var(--mzm-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--mzm-navy, #0e1629);
	line-height: 1.3;
}


/* ── SEO tekst ───────────────────────────────────────────────────────────── */

.mzm-catgrid-seo {
	font-family: var(--mzm-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 0.9rem;
	color: #4b5563;
	line-height: 1.75;
	margin-top: 28px;
	margin-bottom: 48px;
	max-width: 800px;
}

/* ⚠️ 09.10.2026. (`D-088`) — opisi kategorija od danas počinju `<h2>` naslovom.
   Ispod spiska proizvoda je opis stajao 5px od brojeva strana (izmereno na
   1440: pag_dno 1907, seo_vrh 1912). `margin-top` 28px = `margin-bottom` trust
   trake, pa se u grid režimu (Audio) margine SPAJAJU i razmak ostaje isti. */
.mzm-catgrid-seo h2 {
	margin-top: 0;
}

.mzm-catgrid-seo p {
	margin: 0 0 1em;
}

.mzm-catgrid-seo p:last-child {
	margin-bottom: 0;
}


/* ── FAQ accordion ───────────────────────────────────────────────────────── */

.mzm-faq {
	margin-bottom: 32px;
}

.mzm-faq__title {
	font-family: var(--mzm-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--mzm-navy, #0e1629);
	margin: 0 0 16px;
}

/* ── Dve nezavisne kolone (05.09.2026.) ─────────────────────────────────────
 *
 * Devet pitanja u jednoj koloni pravi ~450px praznine ispod proizvoda. Dve
 * kolone to prepolove.
 *
 * ⚠️ Kolone su DVA ODVOJENA SPISKA iz šablona, ne jedan prelomljen CSS-om.
 *    Da je jedan, otvaranje pitanja levo pomeralo bi i desnu kolonu — kupac
 *    klikne jedno, a pomeri mu se ono što čita. Ovako svaka raste za sebe.
 *
 * ⚠️ `align-items: start` je OBAVEZAN: bez njega se obe kolone razvuku na
 *    visinu one duže, pa kraća dobije prazan rep. Ista zamka kao kod lepljivog
 *    rezimea na blagajni (`F-070`), samo obrnut smer.
 *
 * ⚠️ Ispod 850px ostaje jedna kolona — dve kolone akordeona na telefonu daju
 *    dugmad širine dve reči. Prag 850 je granica koju projekat već koristi.
 */
.mzm-faq__kolone {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px 20px;
	align-items: start;
}

@media (min-width: 850px) {
	.mzm-faq__kolone {
		grid-template-columns: 1fr 1fr;
	}
}

.mzm-faq__item {
	border: 1px solid var(--mzm-border, #e5e7eb);
	border-radius: var(--mzm-radius-md, 8px);
	overflow: hidden;
	margin-bottom: 6px;
}

/* ⚠️ SNIŽENO 05.09.2026., na Verin zahtev („i česta pitanja dosta manja").
 *
 * Akordeon je već postojao i već se otvarao na strelicu — problem nije bio u
 * ponašanju nego u visini: svako pitanje je bilo blok od ~54px, pa je devet
 * pitanja pravilo pola strane praznine ispod proizvoda.
 *
 *   padding      15px 20px → 10px 14px
 *   font         0,92rem   → 0,85rem
 *   razmak       8px       → 6px
 *   šiljak       20px      → 16px
 *
 * ⚠️ NIJE dirano ponašanje ni `aria-expanded` — pristupačnost ostaje ista.
 *    Menjani su samo razmaci i veličine.
 */
.mzm-faq__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	/*
	 * ⛔⛔ `margin: 0` NIJE ukras — bez njega svako pitanje nosi ~16px praznine
	 *     ispod sebe, UNUTAR okvira, i izgleda kao da je odgovor otvoren pa
	 *     prazan.
	 *
	 * Flatsome daje `margin-bottom` SVAKOM `<button>`, a pitanje jeste dugme.
	 * ⚠️ ČETVRTI put isti obrazac u ovom projektu: bočna margina dugmadi
	 *    (21.08.), puna širina dugmeta, `border-radius` i margina na `<input>`.
	 *    **Kad se koristi `<button>` ili `<input>`, margina se gasi odmah, ne
	 *    kad se primeti.**
	 *
	 * ⚠️ Bez `!important` — specifičnost `0,1,0` je dovoljna jer Flatsome cilja
	 *    goli `button`. Provereno istim putem kao kod polja za pretragu.
	 */
	margin: 0;
	padding: 10px 14px;
	background: var(--mzm-surface, #f8f9fb);
	border: none;
	cursor: pointer;
	font-family: var(--mzm-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--mzm-navy, #0e1629);
	text-align: left;
	transition: background 0.15s ease;
}

.mzm-faq__question:hover,
.mzm-faq__question[aria-expanded="true"] {
	background: #eef3fd;
}

.mzm-faq__question:focus-visible {
	outline: 2px solid var(--mzm-accent, #3c83f5);
	outline-offset: -2px;
}

.mzm-faq__chevron {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--mzm-accent, #3c83f5);
	transition: transform 0.2s ease;
}

.mzm-faq__question[aria-expanded="true"] .mzm-faq__chevron {
	transform: rotate(180deg);
}

.mzm-faq__answer {
	padding: 16px 20px;
	font-family: var(--mzm-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 0.9rem;
	color: #4b5563;
	line-height: 1.7;
	background: #fff;
	border-top: 1px solid var(--mzm-border, #e5e7eb);
}

.mzm-faq__answer p {
	margin: 0;
}

.mzm-faq__answer[hidden] {
	display: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tablet landscape: 4 kolone */
@media (max-width: 1100px) {
	.mzm-catgrid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Tablet portrait: 3 kolone */
@media (max-width: 768px) {
	.mzm-catgrid {
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
	}

	.mzm-catgrid-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.mzm-catgrid-search,
	.mzm-catgrid-search-wrap {
		width: 100%;
	}

	.mzm-catgrid-title {
		font-size: 1.4rem;
	}

	.mzm-trust-bar {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
		padding: 16px;
	}
}

/* Mobile: 2 kolone */
@media (max-width: 480px) {
	.mzm-catgrid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.mzm-catgrid__name {
		font-size: 0.78rem;
	}

	/* Ovde je do 10.08.2026. stajalo `padding-left/right: 12px`, čime je grid
	   na telefonu imao TREĆU vrednost (16 desktop / 12 mobilni / 7.5 listing).
	   Obrisano — bočni prostor na svim širinama nosi `.shop-container`. Ako se
	   posle provere na 360/390 pokaže da treba više, menja se
	   `--mzm-sadrzaj-pad`, čime se pomeraju SVE kutije zajedno. (F-044) */

	.mzm-faq__question {
		font-size: 0.88rem;
		padding: 13px 14px;
	}

	.mzm-faq__answer {
		padding: 13px 14px;
	}
}

/* ── Quick Tags ──────────────────────────────────────────────────────────── */
.mzm-quick-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}

.mzm-quick-tags__tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1.5px solid var(--mzm-accent, #3C83F5);
    color: var(--mzm-accent, #3C83F5);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.mzm-quick-tags__tag:hover {
    background: var(--mzm-accent, #3C83F5);
    color: #fff;
}


/* ==========================================================
 * POGOCI IZ DUBLJIH KATEGORIJA (05.09.2026.)
 * ==========================================================
 *
 * Na „Maske i stakla" kartice su MARKE, a kupac kuca MODEL. Uz kartice zato
 * postoji skriven spisak dubljih kategorija; vidi se samo dok se kuca.
 *
 * ⚠️ NAMERNO bez slika. Spisak ima red veličine 300 stavki *(izmereno: 444
 *    kategorije ukupno, od toga Samsung 111 i iPhone 41)*. Sa sličicama bi to
 *    bio nov trošak umesto rešenja — `PF-01`: slike su na ovom projektu
 *    problem, ne kod.
 *
 * ⚠️ Ovo NIJE mreža kartica nego spisak rezultata. Namerno izgleda drugačije:
 *    kupac mora da vidi da je pretraga izbacila nešto **iz drugog nivoa**, a ne
 *    da su se kartice prerasporedile.
 * ========================================================== */

.mzm-catgrid-hits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
}

.mzm-catgrid-hit {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    background: #fff;
    color: var(--mzm-text-primary, #1f2937);
    font-size: 14px;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

.mzm-catgrid-hit:hover {
    border-color: var(--mzm-accent, #3C83F5);
    color: var(--mzm-accent, #3C83F5);
}

/* ⛔⛔ OVO PRAVILO JE OBAVEZNO — bez njega pretraga NE RADI.
 *
 * `[hidden] { display: none }` dolazi iz pregledača i ima NAJSLABIJU
 * specifičnost. Čim se elementu zada bilo kakav `display` — ovde
 * `inline-flex` — atribut `hidden` prestaje da ima ikakvo dejstvo.
 *
 * Posledica izmerena na živoj strani 05.09.2026.: JS je uredno postavljao
 * `hidden` na svaki nepogođen model, a strana je prikazivala **sve modele**.
 * Kucanje „iphone 17" davalo je spisak koji počinje Alcatelom.
 *
 * ⚠️ **Filter je bio tačan; prikaz ga je poništio.** Isti obrazac koji je
 *    05.09. već triput naplaćen — popravka stigne na pravo mesto, a ne radi
 *    jer je nešto jače od nje.
 *
 * ⚠️ Isto važi za omotač: i on dobija `display: flex`, pa i njemu treba par.
 */
.mzm-catgrid-hit[hidden],
.mzm-catgrid-hits[hidden] {
    display: none;
}

/* Red „još N — suzi pretragu". Puni ga JS; prazan stoji sakriven.
 * ⚠️ NAMERNO bez `display` — `<p>` je ionako blok, pa `[hidden]` radi sam od
 *    sebe. Da mu je zadat `display`, trebao bi mu par kao gore. */
.mzm-catgrid-hits__vise {
    width: 100%;
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--mzm-text-muted, #6b7280);
}

/* ⚠️ Marka uz model NIJE ukras — „17 Pro" bez „iPhone" ne kaže dovoljno, a u
   spisku stoje modeli iz svih marki jedan pored drugog. */
.mzm-catgrid-hit__put {
    font-size: 12px;
    color: var(--mzm-text-muted, #6b7280);
}

/* ⚠️ `align-items: baseline`, ne `center` — naziv i marka su različite
   veličine, a oko ih čita kao istu liniju samo po osnovnoj liniji. */