/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* Metrički fallback za Baloo 2 (2026-07-23): font-display:swap menja metriku kad
   pravi font stigne (fallback je širi), pa se centrirani tekstovi (cena u korpi
   „0 RSD") pomere 1-2px. size-adjust suzi fallback na metriku Baloo 2 — pre-swap
   frejm ima (skoro) iste širine, posle swap-a izgled NEPROMENJEN.
   Dva fallback-a: opšti za naslove/UI i uži za cene/brojeve (weight 400).
   Vrednosti su empirijski izmerene (C:\tmp\pw\_font_tune.js, sweep + validacija).
   NALAZ: fallback (jedan Arial face) ne prati font-weight — faux-bold zadržava
   isti advance, a Baloo 2 se ŠIRI sa weightom. Zato je cena (weight 400) čista i
   tesna, dok opšti (naslovi 500-700) ne može ispod ~3% proseka jednim size-adjust;
   97,5% je optimum koji najbolje pokriva centrirane bold elemente (dugmad/bedževi). */
@font-face {
  font-family: "Baloo 2 zamena";
  src: local("Arial"), local("Roboto");
  size-adjust: 97.5%;   /* EMPIRIJSKI TJUNIRANO (opšti optimum, avg |odstup.| ~2,9%) */
}
@font-face {
  font-family: "Baloo 2 zamena cena";
  src: local("Arial"), local("Roboto");
  size-adjust: 86%;   /* EMPIRIJSKI TJUNIRANO (cena weight 400; „0 RSD" ~0,5%) */
}

/* ============================================================
   REBRAND 2026 — DESIGN TOKENS (design_handoff_negic_store)
   Topla butik paleta: teal brend + clay akcenat + krem papir.
   Izvor vrednosti: design_handoff styles.css (NE README proza gde se razlikuje).
   ============================================================ */
:root {
  /* ---- Brand teal scale (usidren na logo #17a89d) ---- */
  --teal-950: oklch(0.32 0.055 192);
  --teal-900: oklch(0.43 0.082 190);
  --teal-800: oklch(0.52 0.095 189);
  --teal-700: oklch(0.585 0.105 188);
  --teal-600: oklch(0.645 0.108 187);  /* ≈ #17a89d, boja logoa */
  --teal-500: oklch(0.71 0.105 186);
  --teal-200: oklch(0.88 0.052 186);
  --teal-100: oklch(0.945 0.030 187);
  --teal-50:  oklch(0.975 0.016 187);

  --brand:        var(--teal-600);   /* primarni brend: dugmad, akcenti */
  --brand-strong: var(--teal-900);   /* hover, naslovi/linkovi na svetlom */
  --brand-deep:   var(--teal-950);   /* topbar/footer tamna */
  --brand-tint:   var(--teal-100);   /* svetli tint (badge, ikon-pozadina) */
  --brand-tint-2: var(--teal-50);    /* najsvetliji tint (sekcije, hover) */
  --brand-text:   var(--teal-800);   /* sitni tekst-linkovi na svetlim pozadinama:
                                        teal-600 je 3.0:1 na krem (ispod AA 4.5),
                                        teal-800 = 5.0:1 (izmereno 2026-06-13) */

  /* ---- Topli akcenat (clay) ---- */
  --accent:        oklch(0.71 0.125 52);   /* ≈ #cf7a44 — akcija badge, sezonski CTA */
  --accent-strong: oklch(0.60 0.135 48);   /* ≈ #b3602e — hover akcenta */
  --accent-tint:   oklch(0.95 0.035 64);   /* ≈ #f6e7da — bundle pozadina */

  /* ---- Sale crveno (brand paleta: accent sale #E63946) — rezervisano za PRAVA sniženja
     (sale cena / -X% badge). Nav „Naš izbor" više NIJE crven (nije sniženje, 2026-07-08). ---- */
  --sale:        oklch(0.60 0.19 22);   /* ≈ #e63946 */
  --sale-strong: oklch(0.51 0.19 22);   /* ≈ #c22836 — hover */
  --sale-tint:   oklch(0.95 0.025 22);  /* ≈ #fdeef0 — pozadina na hover */

  /* ---- Topli neutralci ---- */
  --ink:    oklch(0.27 0.014 210);  /* ≈ #283034 glavni tekst */
  --ink-2:  oklch(0.42 0.012 215);  /* ≈ #5a646a sekundarni */
  --muted:  oklch(0.55 0.010 215);  /* ≈ #7c858a prigušeni */
  --faint:  oklch(0.70 0.008 215);  /* ≈ #a7adb0 najsvetliji tekst */
  --line:   oklch(0.905 0.008 210); /* ≈ #e2e6e8 granice */
  --line-2: oklch(0.945 0.006 210); /* ≈ #eef0f1 svetlije granice */
  --paper:  oklch(0.987 0.006 80);  /* ≈ #fbf8f3 topla krem pozadina sajta */
  --card:   #ffffff;

  /* ---- Oblik i pokret ---- */
  --r:      16px;   /* osnovni radius */
  --r-sm:   8px;
  --r-lg:   24px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(40,60,60,.05), 0 2px 8px rgba(40,60,60,.05);
  --shadow-md: 0 4px 14px rgba(40,60,60,.08), 0 1px 3px rgba(40,60,60,.06);
  --shadow-lg: 0 20px 48px rgba(35,48,52,.16), 0 4px 14px rgba(35,48,52,.08);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- Tipografija ---- */
  --font-head: "Baloo 2", "Baloo 2 zamena", system-ui, sans-serif;   /* naslovi, dugmad */
  --font-body: "Mulish", system-ui, sans-serif;     /* telo, UI */
  --font-mono: "Space Mono", ui-monospace, monospace; /* mono labele, cene, šifre */

  --maxw: 1240px;

  /* ---- LEGACY MOST: stari --negic-* sad pokazuju na nove tokene ----
     Sva ranija pravila (kartice, badge, footer, PDP, statične strane)
     automatski prelaze na novu paletu bez prepisivanja svakog selektora. */
  --negic-primary:        var(--brand);         /* bilo #17A89D */
  --negic-primary-dark:   var(--brand-strong);  /* bilo #0E7C70 → tamniji teal */
  --negic-primary-darker: var(--brand-deep);    /* bilo #0A5C53 */
  --negic-primary-light:  var(--brand-tint);    /* bilo #A8DDD8 → svetli teal tint */
  --negic-sale:           var(--accent);        /* AKCIJA sad clay/narandžasto (ne crveno) */
  --negic-text:           var(--ink);
}

/* ---- Rebrand baza: topla krem pozadina sajta ---- */
body,
#wrapper { background-color: var(--paper); }
body { color: var(--ink); }

/* === Sale badge (-X%): jasan crveni pill === */
/* Na karticama bedž ide GORE-DESNO (2026-07-04): proizvođači (S-Cool i sl.) utiskuju
   svoj logo u gornji levi ugao fotografije, pa je bedž tamo preklapao logo. */
.product-small .badge-container,
.box .badge-container {
  top: -9px !important; left: auto !important; right: 21px !important; bottom: auto !important;
  display: flex !important; flex-direction: column; gap: 6px; align-items: flex-end; width: auto !important;
}
/* PDP galerija: bedž GORE-DESNO (isto kao kartice) jer proizvođači (S-Cool i sl.)
   utiskuju logo u gornji levi ugao fotografije, pa je NOVO tamo preklapao logo. */
.single-product .product-gallery .badge-container {
  top: -9px !important; left: auto !important; right: 21px !important; bottom: auto !important;
  display: flex !important; flex-direction: column; gap: 6px; align-items: flex-end; width: auto !important;
}
.product-small .onsale,
.box .onsale,
span.onsale,
.onsale {
  position: static !important;      /* teče unutar badge-container (ne ispada iz okvira) */
  margin: 0 !important;
  background: var(--accent) !important; /* Akcija = clay (dizajn .badge-sale) */
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--r-pill) !important;
  padding: 4px 9px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: 1.1 !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  z-index: 5;
}

/* === NOVO badge: tirkizni pill, na karticama gore-desno (pari sa -X% AKCIJA; ne preklapaju se,
   NOVO se sakriva na sniženju) === */
/* Tirkizna mora da pobedi `.product-small .onsale` (0,2,0) jer NOVO span nosi i klasu
   `onsale` (za istu poziciju/oblik kao -X%). Zato selektor sa 2 klase + kontekst. */
.product-small .onsale.negic-new-badge,
.box .onsale.negic-new-badge,
span.onsale.negic-new-badge,
.negic-new-badge {
  position: static !important;   /* teče unutar badge-container, kao i -X% */
  z-index: 5;
  background: var(--brand) !important; /* NOVO = brand teal (dizajn .badge-new) */
  color: #fff !important;
  border: 0;
  border-radius: var(--r-pill);
  padding: 4px 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: none;
}
.single-product div.product { position: relative; }
.negic-new-badge--single { top: 24px !important; left: 24px !important; }

/* === Mobilni header: tamna boja pretrage/korpe (defanzivno, ne dira raspored) === */
.mobile-nav.nav-right .nav-top-link { color: var(--negic-text, #1A1A1A) !important; }

/* Pretraga dropdown na mobilnom: poravnaj uz desnu ivicu i ograniči širinu da
   ne izlazi van ekrana (default se otvarao udesno i sekao se na ivici). */
@media (max-width: 849px) {
  .mobile-nav .header-search-dropdown .nav-dropdown {
    left: auto !important;
    right: 0 !important;
    width: 86vw !important;
    max-width: 340px !important;
  }
  /* strelica/caret dropdown-a na desnu stranu (iznad ikone pretrage) */
  .mobile-nav .header-search-dropdown .nav-dropdown:before,
  .mobile-nav .header-search-dropdown .nav-dropdown:after {
    left: auto !important;
    right: 14px !important;
  }
  .mobile-nav .header-search-dropdown .nav-dropdown .searchform,
  .mobile-nav .header-search-dropdown .nav-dropdown .searchform-wrapper { width: 100% !important; }
}

/* === Header: "Novo" istaknuto dugme u glavnom (donjem) meniju === */
.header-bottom-nav li.menu-novo-btn,
ul.header-nav li.menu-novo-btn {
  display: flex;
  align-items: center;
}
.header-bottom-nav li.menu-novo-btn > a,
ul.header-nav li.menu-novo-btn > a {
  background: var(--negic-primary-dark);
  color: #fff !important;
  border-radius: 999px;       /* puna pilula */
  padding: 6px 18px !important;
  line-height: 1.2 !important;
  margin-left: 8px;
}
.header-bottom-nav li.menu-novo-btn > a:hover,
.header-bottom-nav li.menu-novo-btn.current-menu-item > a,
ul.header-nav li.menu-novo-btn > a:hover {
  background: var(--negic-primary-darker);
  color: #fff !important;
}

/* === Header: FiboSearch popunjava centar (logo levo, search sredina) === */
.header-main .nav > li.html.html_nav_position_text_top {
  flex: 1 1 auto;
  max-width: 520px;
  margin: 0 auto;
}
.header-main li.html.html_nav_position_text_top .dgwt-wcas-search-wrapp {
  width: 100%;
  max-width: 520px;
}

/* === Trust bar (topbar): beli linkovi === */
#top-bar a { color: #fff; }
#top-bar a:hover { opacity: .85; }

/* ============ HOMEPAGE ============ */
/* Eyebrow (mali tirkizni nadnaslov sa akcent crticom) */
.negic-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--negic-primary-dark);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 12px;
}
.negic-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--negic-primary);
  display: inline-block;
}
.home h1 { font-weight: 500; line-height: 1.2; }
.home h2 { font-weight: 500; }
.negic-hero-sub { font-size: 16px; color: #5C5C5C; max-width: 32em; }

/* Paketi: chip-ovi sa cenama */
.negic-chip {
  display: inline-block;
  background: #fff;
  border: 1px solid #E5D9C2;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 500;
  margin: 0 6px 8px 0;
}

/* Brend strip: sivi logoi, boja na hover */
.negic-brand-strip img {
  filter: grayscale(100%);
  opacity: .6;
  transition: filter .25s ease, opacity .25s ease;
  max-height: 46px;
  width: auto;
  margin: 0 auto;
}
.negic-brand-strip img:hover { filter: none; opacity: 1; }

/* === Strana /brendovi — grid kartica brendova === */
.negic-brendovi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 24px 0;
}
.negic-brend-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: 18px;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  background: #fff;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.negic-brend-card:hover {
  transform: translateY(-3px);
  border-color: var(--negic-primary);
  box-shadow: 0 10px 24px rgba(14,124,112,.10);
}
.negic-brend-card img { max-height: 64px; width: auto; filter: grayscale(100%); opacity: .7; transition: filter .2s ease, opacity .2s ease; }
.negic-brend-card:hover img { filter: none; opacity: 1; }
.negic-brend-naziv { font-weight: 500; color: #1A1A1A; }
@media (max-width: 48em) {
  .negic-brendovi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Naslov sekcije sa linkom desno */
/* Section head: naslov levo, link ("Sve kategorije →") DESNO u istom redu
   (dizajn .sec-head: space-between, flex-end). Razmak ispod pre proizvoda. */
.negic-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 24px;
  margin-bottom: 28px;
}
.negic-section-head h2 { margin: 0; font-size: clamp(26px, 2.6vw, 34px); }   /* veće, kao dizajn .sec-head h2 */
.negic-section-head p { margin: 0; flex-shrink: 0; }
.negic-section-head a { font-size: 14.5px; font-weight: 700; color: var(--brand); white-space: nowrap; }   /* desni link bold, brand (dizajn .sec-head .link) */

/* === Homepage polish === */
/* Hero: jači naslov, zaobljena slika sa senkom */
.home h1 { font-size: 2.45em; line-height: 1.18; margin-bottom: 14px; }
.negic-hero-sub { margin-bottom: 22px; }
.negic-hero-img img { border-radius: 12px; box-shadow: 0 14px 34px rgba(14,124,112,.14); }

/* Kategorije — foto pločice sa tirkiznom label trakom (Korak 5, Krokodil/Bambi model) */
.home .product-category .box {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #F4F6F6;
  border: 1px solid #E6E6E6;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.home .product-category .box-image {
  position: relative;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  height: auto !important;
  padding: 0 !important;
}
.home .product-category .box-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.home .product-category:hover .box {
  transform: translateY(-4px);
  border-color: var(--negic-primary);
  box-shadow: 0 12px 26px rgba(14,124,112,.14);
}
.home .product-category:hover .box-image img { transform: scale(1.05); }
/* Label traka: tirkizni gradijent preko dna, belo ime sentence case */
.home .product-category .box-text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 30px 16px 14px;
  text-align: left;
  background: linear-gradient(to top,
    rgba(10,92,83,.94) 0%, rgba(14,124,112,.70) 50%, rgba(14,124,112,0) 100%);
}
.home .product-category .box-text .header-title,
.home .product-category .box-text .category-name,
.home .product-category .box-text a {
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  text-transform: none !important;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
}
.home .product-category .box-text .count {
  color: rgba(255,255,255,.88);
  font-size: 12px;
  text-transform: none !important;
  margin-top: 3px;
}

/* Paketi slika: čista bela uokvirena kartica sa senkom (proizvod je na belom,
   pa beli okvir na amber pozadini izgleda namerno, ne kao goli pravougaonik) */
.negic-paketi-img img {
  border-radius: 14px;
  max-height: 380px;
  object-fit: contain;
  width: 100%;
  background: #fff;
  padding: 22px;
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}

/* === Ikone u "Kategorije" dropdown meniju === */
.nav-dropdown li > a .negic-svg-icon,
.nav-sidebar li > a .negic-svg-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 9px;
  color: var(--negic-primary);
}
/* Mobilni off-canvas meni: ikone kategorija tirkizne (ne crne) */
.nav-sidebar .negic-svg-icon { color: var(--negic-primary) !important; }
.negic-menu-cat-label { vertical-align: middle; }

/* Off-canvas „Sve kategorije": male sličice kategorija (kao desktop megameni
   32px), a NE ogromne foto-pločice. Sidebar nije pod #wide-nav scope-om gde
   thumbnail dobija veličinu, pa su slike išle u prirodnoj (ogromnoj) veličini. */
.nav-sidebar .negic-menu-cat-thumb {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  margin-right: 10px;
  border-radius: 7px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  background: var(--brand-tint-2);
}
.nav-sidebar .negic-menu-cat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: multiply;  /* belo iz fotografije stopi sa mint podlogom (nema belog okvira) */
}

/* Off-canvas: logična hijerarhija veličina fonta. Flatsome je obrnuo skalu —
   podkategorije su nasleđivale default 16px, a roditelji bili 12.8px, pa su
   najdublje stavke izgledale najveće. Vraćamo opadajući red preko li-nesting-a
   (li > a = nivo 1; li li > a = kategorija; li li li > a = podkategorija). */
#main-menu .nav-sidebar li > a {
  font-size: 15px !important;
  font-weight: 600 !important;
}
#main-menu .nav-sidebar li li > a {
  font-size: 14px !important;
  font-weight: 600 !important;
}
#main-menu .nav-sidebar li li li > a {
  font-size: 13px !important;
  font-weight: 400 !important;
}

/* === Traka kategorija (chipovi) na vrhu prodavnice === */
.negic-cat-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}
.negic-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid #E5E5E5;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: #1A1A1A;
  background: #fff;
  line-height: 1;
  transition: all .18s ease;
}
.negic-cat-chip .negic-svg-icon { width: 17px; height: 17px; color: var(--negic-primary); }
.negic-cat-chip:hover { border-color: var(--negic-primary); color: var(--negic-primary-dark); }
.negic-cat-chip.is-active { background: var(--negic-primary-dark); border-color: var(--negic-primary-dark); color: #fff; }
.negic-cat-chip.is-active .negic-svg-icon { color: #fff; }

@media (max-width: 48em) {
  .negic-cat-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .negic-cat-chip { flex: 0 0 auto; }
}

/* === Footer === */
#footer .widget-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #1A1A1A;
  text-transform: none;
  margin-bottom: 12px;
  letter-spacing: 0;
}
#footer .footer-widgets ul { list-style: none; margin: 0; padding: 0; }
#footer .footer-widgets ul li { border: 0; padding: 4px 0; }
#footer .footer-widgets a { color: #5C5C5C; font-size: 13px; }
#footer .footer-widgets a:hover { color: var(--negic-primary-dark); }
.absolute-footer { font-size: 12px; }
/* Donji footer: © levo i "Plaćanje" desno na istoj liniji, vertikalno centrirani
   (Flatsome default koristi float pa se ne poravnaju). */
.absolute-footer .container {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
}
/* clearfix ::before/::after postaju flex-itemi i guraju sadržaj — gasimo ih */
.absolute-footer .container::before,
.absolute-footer .container::after { display: none !important; }
.absolute-footer .footer-secondary,
.absolute-footer .footer-primary { float: none !important; margin: 0; padding: 0; }
.absolute-footer .copyright-footer { margin: 0; padding: 0; }
@media (max-width: 549px) {
  .absolute-footer .container { flex-direction: column; gap: 4px; text-align: center; }
}


/* ============ HERO v2 (jača hijerarhija + badge + trust mikro-linija) ============ */
.home h1.negic-hero-h1 {
  font-size: 2.85em;
  line-height: 1.14;
  letter-spacing: -.01em;
  margin-bottom: 16px;
  max-width: 12em;
}
.negic-hero-sub { font-size: 17px; line-height: 1.55; }

/* Mikro-trust linija ispod dugmadi */
.negic-hero-micro {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 22px 0 0;
  font-size: 13px;
  color: #5C5C5C;
}
.negic-hero-micro span {
  position: relative;
  padding-left: 22px;
}
.negic-hero-micro span::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--negic-primary-light);
  box-shadow: inset 0 0 0 2px var(--negic-primary-dark);
}

/* Slika sestara + badge "35+ godina" */
.negic-hero-media { position: relative; display: inline-block; width: 100%; }
.negic-hero-badge {
  position: absolute;
  left: -14px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--negic-primary-dark);
  color: #fff;
  padding: 12px 18px;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(14,124,112,.30);
}
.negic-hero-badge strong { font-size: 30px; font-weight: 500; line-height: 1; }
.negic-hero-badge > span { font-size: 12px; line-height: 1.25; opacity: .95; }

/* ============ USP redizajn (ikona u tirkiznom krugu) ============ */
.negic-usp {
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  padding: 26px 18px;
  background: #fff;
  text-align: center;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.negic-usp:hover {
  transform: translateY(-3px);
  border-color: var(--negic-primary);
  box-shadow: 0 10px 24px rgba(14,124,112,.10);
}
.negic-usp i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  margin: 0 auto 14px;
  font-size: 24px;
  color: var(--negic-primary-dark);
  background: var(--negic-primary-light);
  border-radius: 50%;
}
.negic-usp h4 { font-size: 16px; margin-bottom: 4px; }
.negic-usp p { font-size: 13px; }

/* ============ Product kartice — KORAK 1 (gust grid + jasna kartica) ============ */
/* NB: Flatsome shop koristi div.product-small.col (grid item) + div.product-small.box
   (sama kartica). NEMA ul.products/li.product — zato klasni selektori. */
/* Slika: 1:1 contain u blago sivom „wellu". mix-blend multiply uklapa bele
   pozadine fotki u sivu (većina kataloških slika je na belom). */
.product-small .box-image {
  background: #F4F6F6;
  border-radius: 8px;
  overflow: hidden;
}
.product-small .box-image img {
  aspect-ratio: 1 / 1;
  object-fit: contain !important;
  width: 100%;
  padding: 14px;
  mix-blend-mode: multiply;
}
/* Kartica: vidljiv okvir + meka senka u mirovanju, lift na hover */
.product-small.box {
  border: 1px solid #E6E6E6;
  border-radius: 12px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-small.col:hover .product-small.box {
  transform: translateY(-4px);
  border-color: var(--negic-primary);
  box-shadow: 0 12px 26px rgba(14,124,112,.12);
}

/* Tekst kartice */
.product-small .box-text { padding: 12px 6px 8px; }
/* Meta linija (brend/kategorija) iznad naslova */
.product-small .category,
ul.products .box-text .category {
  font-size: 11px;
  letter-spacing: .04em;
  color: #8A8A8A;
  text-transform: uppercase;
}
/* Naslov: TAMAN (ne tirkizan), 2 reda max → jednaka visina kartica */
.product-small .product-title a,
ul.products .box-text .product-title a {
  color: #1A1A1A;
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.35;
}
.product-small .product-title a:hover,
ul.products .box-text .product-title a:hover { color: var(--negic-primary-dark); }
/* Naslovi kartica uvek 2 reda → sve kartice u redu iste visine. Clamp ide na <a>
   (tekst je u linku), jer Flatsome forsira display:flow-root na .product-title pa clamp
   na wrapperu ne radi. Wrapper drži min-visinu za 2 reda. (Milan 2026-07-04) */
.product-small .product-title,
ul.products .box-text .product-title {
  min-height: 2.7em;
  margin-bottom: 4px;
}
.product-small .product-title a,
ul.products .box-text .product-title a {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
/* Cena: nova istaknuta, stara precrtana siva (sistem sniženja) */
.product-small .price,
ul.products .box-text .price {
  color: #1A1A1A;
  font-weight: 500;
  font-size: 15px;
}
.product-small .price del,
ul.products .box-text .price del {
  color: #9AA0A0;
  font-weight: 400;
  font-size: 13px;
  opacity: 1;
  margin-right: 6px;
}
.product-small .price ins,
ul.products .box-text .price ins {
  color: var(--negic-sale);
  text-decoration: none;
  font-weight: 500;
}

/* ===== Dodaj u korpu na kartici (Korak 3 mobilni + Korak 4 desktop hover) ===== */
.add-to-cart-button { margin: 8px 6px 2px; }
.add-to-cart-button .button {
  width: 100%;
  margin: 0;
  border-radius: 8px;
  font-size: 12.5px;
  padding: 0 12px;
  line-height: 2.6;
  min-height: 0;
}
/* Desktop: skriveno dok se kartica ne hover-uje (prostor rezervisan → bez skoka) */
@media (min-width: 850px) {
  .product-small .add-to-cart-button {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
  }
  .product-small.col:hover .add-to-cart-button {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}
/* Mobilni: uvek vidljivo, lakši outline izgled da ne dominira 2-kolonskim gridom */
@media (max-width: 849px) {
  .add-to-cart-button .button {
    background: transparent;
    color: var(--negic-primary-dark);
    border: 1px solid var(--negic-primary-dark);
  }
  .add-to-cart-button .button.loading,
  .add-to-cart-button .button.added {
    background: var(--negic-primary-dark);
    color: #fff;
  }
}

/* Naslov sekcije centriran (tabovi) */
.negic-section-head--center { justify-content: center; text-align: center; }
.negic-eyebrow--center { justify-content: center; }

/* Link "Svi brendovi" ispod strip-a */
.negic-brand-all {
  display: inline-block;
  margin-top: 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--negic-primary-dark);
}
.negic-brand-strip img { max-height: 54px; opacity: .55; }

/* ============ PDP: procena dostave + trust red ============ */
.negic-pdp-delivery {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--negic-primary-light);
  background: #F0FAF9;
  border: 1px solid #CDEAE6;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 4px 0 20px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #1A1A1A;
}
.negic-pdp-delivery .negic-pdp-icon { color: var(--negic-primary-dark); flex: 0 0 auto; margin-top: 1px; }
.negic-pdp-delivery strong { font-weight: 500; }

/* Trust red 3-kol po dizajnu .pdp-trust (ikona + tekst, bez kruga). */
.negic-pdp-trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 4 stuba → 2×2 (2026-07-08, bilo 3 u redu) */
  gap: 14px 18px;
  margin: 22px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line-2);
}
.negic-pdp-trust-item { display: flex; align-items: flex-start; gap: 10px; color: var(--brand-strong); }
.negic-pdp-trust-item .negic-pdp-icon { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; background: none; border-radius: 0; margin-top: 1px; color: var(--brand-strong); }
.negic-pdp-trust-item > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.negic-pdp-trust-item strong { display: block; font-family: var(--font-head); font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.negic-pdp-trust-item span { display: block; font-size: 12.5px; line-height: 1.3; color: var(--muted); }

/* "Podeli" dugme na PDP-u (Web Share API na mobilnom / "Kopiraj link" na desktopu):
   diskretan sekundarni link, ne konkuriše "Dodaj u korpu". Sivo → tirkizno na
   hover i na "Kopirano ✓". (UX odluka 2026-07-04, Fable konsultacija.) */
.negic-share {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 10px 0 0; padding: 6px 2px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: 14px;
  color: var(--ink-2);
  transition: color .16s var(--ease);
}
.negic-share:hover,
.negic-share.is-copied { color: var(--brand); }
.negic-share .negic-share-ico { flex: 0 0 auto; width: 16px; height: 16px; }

/* Mobilni PDP: smanji prevelike razmake — posle „Podeli" do trust reda (bilo ~44px)
   i posle trust reda do „Opis" tabova (bilo ~70px). (Milan 2026-07-04) */
@media (max-width: 849px) {
  .single-product .negic-pdp-trust { margin-top: 14px !important; padding-top: 14px !important; }
  .single-product .product-info.summary { padding-bottom: 10px !important; }
  .single-product .woocommerce-tabs.wc-tabs-wrapp { padding-top: 14px !important; }
}


/* PDP lightbox (PhotoSwipe): tamni scrim + iznad headera/cookie banera; slika "gola"
   (bez radijusa/senke — to je stil grid kartice, ne uvećanog prikaza); gradijent pod
   kontrolama za čitljivost na beloj slici. Rešava "pozadina se vidi kroz lightbox"
   i "kontrole deluju otkačeno" (na tamnom scrimu su ćošak-ekrana kontrole standardne).
   (UX odluka 2026-07-04, Fable konsultacija.) */
.pswp { z-index: 100000 !important; }
.pswp__bg { background: #0d0d0d !important; opacity: .92 !important; }
.pswp__img { border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }
/* Kontrole (X) se JS-om zakače za gornji desni ćošak SAME slike (js/lightbox-pos.js), pa
   full-width gradient traka nema smisla. Umesto toga dugme dobija tamni krug iza belog
   glifa da bude vidljivo i na beloj slici. Kad je slika veća od ekrana (zoom), JS klampuje
   kontrole u ćošak ekrana. (2026-07-04)

   2026-07-13, Milan: razmak NIJE bio simetričan — `margin: 6px 3px` znači 6px od vrha a
   samo 3px sa strane. (Tih 3px je PhotoSwipe MEĐUrazmak između dugmadi u redu; kod nas su
   ostala dugmad sakrivena pa je ostao bez svrhe.) Sada 8px sa svih strana.
   PROBANO PA ODBAČENO isti dan: X u ćošku EKRANA. Radi, i ne luta po visini, ALI se na
   tamnom scrimu tamni krug stapa sa pozadinom pa se X slabo vidi (Milan). U okviru slike
   krug ima kontrast prema beloj podlozi packshota. Zato ostaje uz sliku. */
.pswp__top-bar { background: none !important; }
/* Samo dugme za zatvaranje (Milan 2026-07-04): fullscreen/zoom/share sakriveni; preloader
   takođe (zauzimao je krajnje-desno mesto pa X nije bio uz ćošak slike). */
.pswp__button--fs,
.pswp__button--zoom,
.pswp__button--share,
.pswp__preloader { display: none !important; }
.pswp__top-bar .pswp__button--close {
  background-color: rgba(15, 15, 15, .55) !important;
  border-radius: 50% !important;
  margin: 8px !important;   /* SIMETRIČNO (bilo 6px 3px, pa se X lepio uz desnu ivicu) */
  opacity: 1 !important;
}
.pswp__top-bar .pswp__button--close:hover { background-color: rgba(15, 15, 15, .82) !important; }
/* Bočne ◄ ► strelice (listanje fotografija): sakrij kad proizvod ima samo jednu sliku
   (mrtve strelice). Klasu .negic-lb-single dodaje js/lightbox-pos.js. (Milan 2026-07-04) */
.negic-lb-single .pswp__button--arrow--left,
.negic-lb-single .pswp__button--arrow--right { display: none !important; }

/* ============ Tabovi "Izdvajamo" — segmentovane pilule ============ */
.home ul.nav-line {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  margin: 24px auto 32px;
  padding: 5px;
  gap: 4px;
  background: var(--brand-tint-2);
  border: 0;
  border-radius: var(--r-pill);
}
.home ul.nav-line > li { margin: 0; }
.home ul.nav-line > li > a {
  display: block;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  padding: 9px 20px;
  border-radius: var(--r-pill);
  letter-spacing: 0;
  transition: background .18s ease, color .18s ease;
}
.home ul.nav-line > li > a:hover { color: var(--brand-strong); box-shadow: none; }
.home ul.nav-line > li.active > a {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
/* Ukloni Flatsome animirani podvlaka-indikator */
.home ul.nav-line > li > a::before { display: none !important; }

/* "Roditelji ih najčešće biraju": tabovi desno u istom redu kao naslov (dizajn .sec-head .tabs).
   Nav ostaje u .tabbed-content (Flatsome handleri), samo ga CSS-om dignemo u header red. */
.negic-featured-section .col { position: relative; }
.negic-featured-section .negic-section-head { text-align: left; margin-bottom: 28px; padding-right: 320px; }
.negic-featured-section .tabbed-content > ul.nav-line {
  position: absolute; top: 24px; right: 15px; z-index: 2;  /* vertikalni centar sa h2 */
  margin: 0 !important; width: auto !important;
}
@media (max-width: 849px) {
  /* na manjim ekranima vrati tabove u normalan tok (ispod naslova) */
  .negic-featured-section .negic-section-head { padding-right: 0; }
  .negic-featured-section .tabbed-content > ul.nav-line { position: static; margin: 0 0 18px !important; }
}

/* ============ Footer: social ikone (umesto naziva) ============ */
.negic-footer-social { display: flex; gap: 14px; margin-top: 12px; }
.negic-footer-social a {
  display: inline-flex;
  line-height: 0;
  color: #9AA0A0;
  transition: color .2s ease, transform .2s ease;
}
.negic-footer-social a:hover { color: var(--negic-primary); transform: translateY(-2px); }

/* ============================================================
   STATIČNE STRANE (O nama, Kontakt) — portovano iz astra-child.
   negic-section = vertikalni ritam; varijante = tinted/quote/cta.
   ============================================================ */
.negic-section { padding: 56px 24px; }
.negic-section-tinted { background-color: #F0FAF9; }
.negic-section-quote { background-color: #F7F9F9; }
.negic-section-quote p { font-size: 18px; line-height: 1.8; color: #1A1A1A; }
.negic-divider { border: 0; border-top: 1px solid #E5E5E5; margin: 32px 0; }
.negic-cta { text-align: center; }
.negic-section ul { line-height: 1.9; }

/* Zaobljene slike (hero O nama) */
.negic-rounded img { border-radius: 10px; }

/* Portret Dragana (osnivača) */
.negic-dragan { max-width: 280px; margin: 0 auto 4px; }
.negic-dragan img { border-radius: 12px; }
.negic-dragan figcaption { text-align: center; font-size: 13px; color: #5C5C5C; margin-top: 8px; }
.negic-oca .negic-dragan { max-width: 100%; margin: 0; }
.negic-oca .negic-dragan figcaption { text-align: left; }
.negic-oca .wp-block-heading { margin-top: 0; }

/* Kontakt kanali — kartice sa ikonama iznad naslova */
.negic-kanali .wp-block-column {
  background-color: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  padding: 20px 14px;
  padding-top: 56px;
  text-align: center;
  position: relative;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.negic-kanali .wp-block-column:hover {
  transform: translateY(-3px);
  border-color: var(--negic-primary);
  box-shadow: 0 10px 24px rgba(14,124,112,.10);
}
.negic-kanali .wp-block-column h3 { margin-top: 0; color: var(--negic-primary-dark); }
/* Vrednost kanala (email/telefon/handle): stane u jedan red, bez ružnog preloma sredinom reči */
.negic-kanali .wp-block-column p,
.negic-kanali .wp-block-column p a {
  font-size: 12px;
  word-break: normal;
  overflow-wrap: break-word;
}
.negic-kanali .wp-block-column::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.negic-kanali .wp-block-column:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%2317A89D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-3 2a11 11 0 005 5l2-3 5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z'/%3E%3C/svg%3E");
}
.negic-kanali .wp-block-column:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%2317A89D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}
.negic-kanali .wp-block-column:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%2317A89D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Cpath d='M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'/%3E%3C/svg%3E");
}
.negic-kanali .wp-block-column:nth-child(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%2317A89D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z'/%3E%3C/svg%3E");
}
.negic-kanali .wp-block-column:nth-child(5)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%2317A89D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12a4 4 0 1 0 4 4v-12a5 5 0 0 0 5 5'/%3E%3C/svg%3E");
}

/* Pravne strane: čitljivost */
.negic-pravna h1 { margin-bottom: 8px; }
.negic-pravna h2 { font-size: 18px; margin-top: 32px; margin-bottom: 8px; }
.negic-pravna p { line-height: 1.7; color: #1A1A1A; }

/* Google Maps embed okvir */
.negic-map { margin-top: 16px; border-radius: 10px; overflow: hidden; line-height: 0; }

/* FAQ accordion (details/summary) */
.wp-block-details { border: 1px solid #E5E5E5; border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; }
.wp-block-details summary { cursor: pointer; font-weight: 500; }

/* Kontakt forma (Contact Form 7) */
.wpcf7-form label { display: block; margin-bottom: 16px; font-weight: 500; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  padding: 10px 12px;
  margin-top: 6px;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  background-color: #fff;
}
/* Fokus polja usklađen sa search barom u header-u (ista boja ivice i prsten). */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.wpcf7-form textarea { min-height: 130px; }
.wpcf7-form .wpcf7-submit {
  background-color: var(--negic-primary-dark);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 28px;
  font-size: 16px;
  cursor: pointer;
}
.wpcf7-form .wpcf7-submit:hover { background-color: var(--negic-primary-darker); }
.wpcf7-response-output { border-radius: 8px; margin-top: 12px !important; }

/* Gutenberg blok dugmad (CTA na O nama/Kontakt) — brand tirkizno */
.wp-block-button__link {
  background-color: var(--negic-primary-dark);
  border-color: var(--negic-primary-dark);
  color: #fff;
  border-radius: 4px;
}
.wp-block-button__link:hover {
  background-color: var(--negic-primary-darker);
  border-color: var(--negic-primary-darker);
  color: #fff;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--negic-primary-dark);
  border-color: var(--negic-primary-dark);
  background-color: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  color: #fff;
  background-color: var(--negic-primary-dark);
  border-color: var(--negic-primary-dark);
}
.wp-block-buttons { gap: 12px; }

/* ============ Brendovi sekcija — balansiran gornji/donji razmak ============ */
.negic-brendovi-section .row { margin-bottom: 0; }
.negic-brendovi-section .col { padding-bottom: 0; }
.negic-brendovi-section .negic-brand-all { margin-top: 14px; }

/* ============ Filter sidebar (prodavnica) — dizajn kartice ============ */
/* Po design_handoff: svaki filter blok je bela kartica (radius 16, meka
   ivica, padding 18), naslovi font-head 15px/600 (odluka 2026-07-16; staro
   pravilo max 500 ne važi od rebranda 2026-06-04), labeli 400. Sidebar =
   sticky stack sa razmakom. */

/* Widget kontejner bez svoje ivice — kartice nose vizuelni okvir */
.shop-sidebar .widget-woof,
#shop-sidebar .widget-woof { border: 0; padding: 0; }
.shop-sidebar .widget-woof .widget-title,
.widget-woof .widget-title {
  font-family: var(--font-head);
  font-weight: 500 !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

/* Svaki WOOF blok = bela kartica */
.shop-sidebar .woof_container,
#shop-sidebar .woof_container {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 16px 18px;
  margin-bottom: 8px !important;
}
.woof_container .woof_container_inner { margin: 0 !important; padding: 0 !important; }

/* Naslovi kartica */
.woof_container h4,
.woof_container .woof_redraw_zone h4,
.woof_container .woof_container_title {
  font-family: var(--font-head);
  font-weight: 600 !important;
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 12px;
}

/* Labeli i checkbox liste */
.woof_container label,
.widget-woof label {
  font-family: var(--font-body);
  font-weight: 400 !important;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.5;
  transition: color .12s ease;
}
/* 9px (bilo 5px): korak reda ~27px — redovi dišu, lakše ciljanje mišem
   (Milan + Fable 2026-07-07). Prefiks .widget .woof_redraw_zone je OBAVEZAN:
   WOOF front.css pravilo `.widget .woof_redraw_zone ul li { margin: 0 }`
   (0,2,2) tuče golu `.woof_list_checkbox li` (0,1,1) — stara 5px margina
   zapravo NIKAD nije važila. */
.woof_list_checkbox li,
.widget .woof_redraw_zone .woof_list_checkbox li { margin-bottom: 9px; }
.woof_list_checkbox li:last-child,
.widget .woof_redraw_zone .woof_list_checkbox li:last-child { margin-bottom: 0; }
/* Filter checkbox redovi: vertikalno centriraj icheck kutiju (22px) sa labelom.
   inline-block + vertical-align:middle nije pravi centar; flex align-items:center jeste.
   flex-wrap + ul na 100% spušta podlistu (potkategorije) u svoj red. (2026-06-05) */
.woof_list_checkbox li { display: flex; align-items: center; flex-wrap: wrap; }
.woof_list_checkbox li > ul { flex: 0 0 100%; }
.woof_checkbox_sales_container .woof_container_inner { display: flex; align-items: center; }
/* Label je imao padding-top:4px + line-height 1.5 (box viši od icheck kutije 22px),
   pa mu je centar bio iznad kvadratića. Nuliramo vert. padding i poravnavamo
   line-height da se box poklopi sa kvadratićem → flex align-items:center centrira tačno. */
.woof_list_checkbox li > label,
.woof_checkbox_sales_container label {
  padding-top: 0 !important; padding-bottom: 0 !important;
  margin-top: 0; margin-bottom: 0; line-height: 1.25;
}
/* Duga labela (npr. „Za vaspitače i nastavnike") da prelama TEKST pored kvadratića,
   a ne da cela padne u nov red ispod checkboxa. Bez flex:1/min-width:0 flex-wrap
   spušta celu labelu (flex-element) u sledeći red. (2026-07-02) */
.woof_list_checkbox li > label { flex: 1 1 0; min-width: 0; }
/* Razmak pre (broj) kod 'Samo na akciji' filtera — span je bez klase i zalepljen za tekst. */
.woof_checkbox_sales_container label span { margin-left: 5px; }
/* Pre-iCheck skin (Milan 2026-07-08): dok iCheck JS ne obuče čekbokse (~1,8s
   izmereno), sirovi input je izgledao drugačije I naduvavao red na 35px (finalno
   18px) jer nosi Flatsome globalni margin-bottom:16px — pa se ceo sidebar vidno
   slegne kad iCheck stigne. Ovde sirovi input izgleda IDENTIČNO finalnom
   kvadratiću (18px, 2px #cfd8d8 ivica, radius 4, brend kvačica na :checked),
   bez zalutale margine → zamena je neprimetna. Posle iCheck-a input je nevidljiv
   unutar .icheckbox_square-blue pa ova pravila ničemu ne smetaju. */
.woof_container input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; box-sizing: border-box;
  margin: 0; flex: none; /* margin 0 = labela na istom x kao posle iCheck-a (159px, izmereno) */
  border: 2px solid #cfd8d8; border-radius: 4px;
  background: none; cursor: pointer;
}
.woof_container input[type="checkbox"]:checked {
  background: #2BAFA5 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.5 2.5 4.5-5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
  border-color: #2BAFA5;
}
/* Kategorija filter: ravna lista glavnih kategorija (po dizajnu).
   WOOF ubacuje „+" expander (a.woof_childs_list_opener) za kategorije sa
   potkategorijama (npr. Pernice → Prazne/Pune pernice). Dizajn drži glavne
   kategorije ravno, a Potkategorija je zasebna kartica (još nemamo je), pa
   sklanjamo expander i ugnježdene potkategorije. */
.woof_container_product_cat .woof_childs_list_opener,
.woof_container_product_cat .woof_childs_list { display: none !important; }

/* Dugme „Poništi" na dnu sidebara je redundantno: aktivni filteri se poništavaju
   preko čipova iznad grida (pojedinačno ✕ ili „Poništi sve"). WOOF ga u ovoj
   verziji renderuje uvek kad je filter aktivan (show_notes=true pregazi opciju
   woof_reset_btn_txt, pa 'none' trik iz views/woof.php ne radi) — zato CSS. */
.woof_submit_search_form_container { display: none !important; }

/* --- Boja facet: krugovi boje (dizajn category.jsx .swatches), pilot 2026-07-04.
   Markup je WOOF checkbox lista; krug ubacuje negic_woof_boja_swatch (functions.php).
   iCheck kockica se sakriva, klik ostaje na label-u (WOOF label handler radi i bez
   vidljivog checkbox-a); čekirano stanje = .woof_checkbox_label_selected posle
   full-reload-a. Ime boje i brojač OSTAJU u DOM-u (hideZeros JS čita "(0)" iz
   textContent-a, čitači ekrana čitaju ime) — sakriveni su clip tehnikom. */
.woof_container_pa_boja .woof_list_checkbox { display: flex; flex-wrap: wrap; gap: 9px; }
.woof_container_pa_boja .woof_list_checkbox li {
  display: block !important; margin: 0 !important; flex: none;
}
.woof_container_pa_boja .woof_list_checkbox li > div[class*="icheckbox"] { display: none !important; }
.woof_container_pa_boja .woof_list_checkbox li > label {
  display: block; position: relative; padding: 0 !important; margin: 0 !important;
  line-height: 0; cursor: pointer; flex: none;
}
.woof_container_pa_boja .woof_checkbox_label span:not(.negic-swatch) {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.negic-swatch {
  display: inline-block; width: 30px; height: 30px; border-radius: 50%;
  transition: transform .12s ease;
}
.woof_container_pa_boja label:hover .negic-swatch { transform: scale(1.1); }
.negic-swatch--light { box-shadow: inset 0 0 0 1px var(--line-2); }
.negic-swatch--rainbow {
  background: conic-gradient(from 90deg, #e489b0, #e3b53a, #5aa86b, #3b82c4, #e489b0);
}
/* izabrano: teal prsten + bela kvačica (dizajn .swatch.on) */
.woof_container_pa_boja .woof_checkbox_label_selected .negic-swatch {
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--brand);
}
.negic-swatch::after {
  content: ""; display: block; width: 100%; height: 100%; opacity: 0;
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="20 6 9 17 4 12"/%3E%3C/svg%3E') center / 14px 14px no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.woof_container_pa_boja .woof_checkbox_label_selected .negic-swatch::after { opacity: 1; }
/* izabrana svetla (bela/žuta): prsten dobija i tanku unutrašnju liniju da se krug ne stopi */
.woof_container_pa_boja .woof_checkbox_label_selected .negic-swatch--light {
  box-shadow: inset 0 0 0 1px var(--line-2), 0 0 0 2px var(--card), 0 0 0 4px var(--brand);
}

/* ============ WOOF loading indikator (filter / paginacija / sortiranje) ============
   Default WOOF popup (#woof_html_buffer) je tamno-siva kutija sa „Učitavam…" u
   Oswald fontu, pozicionirana top/left:48% BEZ translate, pa na mobilnom bega sa
   sredine. Svodimo ga na čist brend-tirkizni spinner u maloj beloj kartici i
   centriramo ga pravilno. Tekst sakrivamo (font-size:0); spinner je pseudo-element
   pa ostaje vidljiv i kad jQuery (fadeTo) inline-uje display na kutiju. */
#woof_html_buffer.woof_info_popup {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  padding: 0;
  font-size: 0;                 /* sakriva „Učitavam…" tekstualni node */
  color: transparent;
  background: var(--card, #fff);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
}
#woof_html_buffer.woof_info_popup::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;      /* centriranje (transform je zauzet rotacijom) */
  border: 3px solid var(--line, #E5E7EB);
  border-top-color: var(--negic-primary, #2BAFA5);
  border-radius: 50%;
  animation: negic-woof-spin .7s linear infinite;
}
@keyframes negic-woof-spin { to { transform: rotate(360deg); } }
/* Poštuje sistemsku „smanji animacije" postavku — sporiji spin umesto trzanja */
@media (prefers-reduced-motion: reduce) {
  #woof_html_buffer.woof_info_popup::before { animation-duration: 1.6s; }
}

/* ============ Opis kategorije (term description) iznad grida ============ */
/* Bio je zalepljen za proizvode (margin-bottom 0). Dodajemo razmak i
   čistu čitljivost: sekundarni tekst, ugodan line-height, ograničena širina. */
.term-description {
  margin-bottom: 28px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 70ch;
}
.term-description p:last-child { margin-bottom: 0; }

/* ---- Price slider (ion.rangeSlider v2) — čist, po dizajnu ----
   Tanak track, brand fill, kružne bele ručke sa brand ivicom, mono
   vrednosti bez obojenih „bubble" pozadina. */
/* irs--round skin (specifičnost 0,2,0, učitan posle) nadjačava obične
   .irs-* selektore; zato ciljamo .irs--round .irs-* sa !important da
   potpuno kontrolišemo vertikalni raspored. Model (kontejner 40px):
   labela gore (0–16px), pa razmak, pa track (top 28), ručke centrirane. */
.woof_price_filter .irs,
.woof_price_filter .irs--round,
.woof_price_filter .irs--round.irs-with-grid {
  /* bez bočne margine: krugovi i labele počinju u liniji naslova "Cena"
     (Milan 2026-07-07); padding kontejnera (12px) je dovoljan okvir */
  height: 40px !important; margin: 4px 0 0; font-family: var(--font-mono);
}
/* ion ugnježdava DRUGI .irs unutar spoljnog: ručke žive u spoljnom, labele
   from/to u unutrašnjem. Gornja margina je pogađala OBA, pa je unutrašnji bio
   uvučen još 16px sa svake strane — labele su plutale ka sredini umesto da
   počinju od ručki. Unutrašnji bez margine = labela poravnata sa ručkom. */
.woof_price_filter .irs--round > .irs { margin: 0; }
/* Tick-grid (96 · 3.072 · 6.048 · 12.000) — dizajn ga nema, samo min/max iznad */
.woof_price_filter .irs-grid { display: none !important; }
.woof_price_filter .irs--round .irs-line {
  top: 28px !important; height: 4px !important;
  background: var(--line) !important; border: 0 !important; border-radius: 999px !important;
}
.woof_price_filter .irs--round .irs-bar {
  top: 28px !important; height: 4px !important;
  background: var(--negic-primary) !important; border: 0 !important;
}
/* Ručke: manje (14px), centrirane na track, dovoljno ispod labela */
.woof_price_filter .irs--round .irs-handle {
  top: 23px !important; width: 14px !important; height: 14px !important;
  background: var(--card) !important;
  border: 2px solid var(--negic-primary) !important;
  border-radius: 50% !important;
  box-shadow: var(--shadow-sm) !important;
  cursor: grab;
}
.woof_price_filter .irs--round .irs-handle:active { cursor: grabbing; }
.woof_price_filter .irs--round .irs-handle > i,
.woof_price_filter .irs--round .irs-handle i { display: none !important; }
/* Vrednosti iznad ručki — suptilne mono labele, bez pozadinskog bloka */
.woof_price_filter .irs--round .irs-from,
.woof_price_filter .irs--round .irs-to,
.woof_price_filter .irs--round .irs-single {
  top: 0 !important; padding: 0 !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-size: 11.5px !important; font-weight: 400 !important;
}
.woof_price_filter .irs--round .irs-from::before,
.woof_price_filter .irs--round .irs-to::before,
.woof_price_filter .irs--round .irs-single::before { display: none !important; }
/* Statične min/max u uglovima — ne trebaju, vrednosti su iznad ručki */
.woof_price_filter .irs--round .irs-min,
.woof_price_filter .irs--round .irs-max { display: none !important; }
/* Labele PINUJEMO na ivice umesto da plutaju nad ručkama: ion.rangeSlider ih
   inline-pozicionira `left`-om iznad sredine ručki, pa kad se opseg suzi labela
   ode u minus i levi deo („90 RSD") se iseče. Pin: niža vrednost levo, viša desno.
   Nikad ne izlazi iz okvira. */
.woof_price_filter .irs--round .irs-from {
  left: 0 !important; right: auto !important; text-align: left !important;
  visibility: visible !important; /* ion bi je sakrio kad su ručke blizu */
}
.woof_price_filter .irs--round .irs-to {
  left: auto !important; right: 0 !important; text-align: right !important;
  visibility: visible !important;
}
/* Kombinovana labela „990 RSD — 3.750 RSD": ion je uključi kad proceni da bi se
   from/to preklopile (kad ručke pređu pola). Crtica između brojeva nam ne treba —
   uvek prikazujemo zasebne from/to pinovane na ivice. */
.woof_price_filter .irs--round .irs-single { display: none !important; }
/* Submit dugme price filtera (ako se prikaže) — brand */
.woof_price_filter .woof_submit_search_form_container { margin-top: 12px; }

/* ============ Sortiranje dropdown (toolbar iznad grida) ============ */
/* Goli native select je bio sitan i nečitljiv; ovde dobija brand stil:
   krem-bela pozadina, meka ivica, custom chevron, čitljiv tekst. */
.woocommerce-ordering select.orderby,
.woocommerce-ordering select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
  height: auto;
  padding: 10px 38px 10px 14px;
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  max-width: 100%;
  /* chevron strelica desno */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a646a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.woocommerce-ordering select.orderby:hover { border-color: var(--negic-primary); }
.woocommerce-ordering select.orderby:focus {
  outline: none;
  border-color: var(--negic-primary);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.woocommerce-ordering select.orderby option { color: var(--ink); }

/* Toolbar (broj rezultata + sort): vertikalno centriran.
   Result count tekst je bio viši od pill dugmeta; line-height = visina
   pill-a (38px) centrira tekst uz dugme. */
.woocommerce-result-count {
  line-height: 38px;
  margin: 0 24px 0 0;        /* razmak do sort dropdown-a (bili su zalepljeni) */
  vertical-align: middle;
  color: var(--ink-2);
  font-size: 13.5px;
}
.woocommerce-ordering { vertical-align: middle; margin: 0; }

/* ============ Paginacija (po dizajnu .pager) ============ */
/* Bili pravougaoni (42×33) sa line-height razmimoilaženjem pa broj van centra.
   Sad: kvadrat 42×42, broj centriran (inline-flex), radius 12, brand za aktivnu. */
.woocommerce-pagination ul.page-numbers {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 8px; margin: 40px 0 0; padding: 0; border: 0;
}
.woocommerce-pagination ul.page-numbers li {
  margin: 0; border: 0; display: inline-flex;
}
.woocommerce-pagination ul.page-numbers li a.page-number,
.woocommerce-pagination ul.page-numbers li span.page-number,
.woocommerce-pagination ul.page-numbers li a.page-numbers,
.woocommerce-pagination ul.page-numbers li span.page-numbers {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px;
  /* Baloo 2 sedi optički visoko (prostor za dijakritike); 2px gore gura broj
     na optički centar. */
  padding: 2px 0 0 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-2);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15px;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease);
}
.woocommerce-pagination ul.page-numbers li a.page-number:hover,
.woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
  border-color: var(--negic-primary);
  color: var(--negic-primary);
  background: var(--card);
}
.woocommerce-pagination ul.page-numbers li .page-number.current,
.woocommerce-pagination ul.page-numbers li span.current {
  background: var(--negic-primary) !important;
  border-color: var(--negic-primary);
  color: #fff;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

  /* Statične strane: manji vertikalni ritam na mobilnom */
  .negic-section { padding: 36px 20px; }

  /* Na mobilnom "Novo"/"Naš izbor" u off-canvas meniju su obične stavke, ne pilule */
  .nav-sidebar li.menu-akcija-btn > a,
  .nav-sidebar li.menu-novo-btn > a {
    background: none !important;
    color: inherit !important;
    border-radius: 0 !important;
    margin-left: 0 !important;
    display: inline !important;
  }

  /* Hero na mobilnom: manji naslov, badge bez negativnog ofseta */
  .home h1.negic-hero-h1 { font-size: 2em; max-width: none; }
  .negic-hero-media { margin-top: 18px; }
  .negic-hero-badge { left: 12px; bottom: 12px; padding: 9px 14px; }
  .negic-hero-badge strong { font-size: 24px; }
  .negic-hero-micro { gap: 10px 16px; }

  /* Trust band: 2x2 na mobilnom */
  .negic-trust { grid-template-columns: repeat(2, 1fr); }
  .negic-trust-item { padding: 18px 14px; gap: 10px; }
  .negic-trust-item:nth-child(odd) { border-left: 0; }
  .negic-trust-item:nth-child(3),
  .negic-trust-item:nth-child(4) { border-top: 1px solid #EFEFEF; }
  .negic-trust-item strong { font-size: 26px; }

}

/* ============================================================
   REBRAND 2026 — FAZA 2: ZAGLAVLJE I NAVIGACIJA
   Topbar (tamni teal) → header (krem) → nav (belo).
   Mapirano na Flatsome Header Builder markup:
   #top-bar / .header-main / #wide-nav.header-bottom.
   ============================================================ */

/* --- Topbar: najtamniji teal, svetli tekst --- */
#top-bar.header-top {
  background-color: var(--brand-deep);
  font-family: var(--font-body);
  font-size: 13px;
}
#top-bar .html,
#top-bar a { color: oklch(0.93 0.02 190); }
#top-bar a { transition: color .15s ease; }
#top-bar a:hover { color: #fff; opacity: 1; }

/* --- Header: topla krem pozadina + tanka donja granica --- */
.header-main,
#header.stuck .header-main {
  background-color: var(--paper);
  border-bottom: 1px solid var(--line-2);
}

/* --- Pretraga: puna pilula (FiboSearch solaris) --- */
.header-main .nav > li.html.html_nav_position_text_top,
.header-main .html_nav_position_text_top .dgwt-wcas-search-wrapp {
  max-width: 560px;
}
.header-main .dgwt-wcas-search-input {
  height: 48px !important;
  border-radius: var(--r-pill) !important;
  border: 1.5px solid var(--line) !important;
  background: #fff !important;
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.header-main .dgwt-wcas-search-input:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px var(--brand-tint) !important;
  outline: none !important;
}
/* Lupa (FiboSearch ikona): brend tirkizna umesto sive #444, i „jača" —
   tamnija (brend-strong), malo veća i deblja (stroke na glifu). Cilja
   FiboSearch wrapper da važi i za desktop i za mobilnu pretragu. */
.header-main .dgwt-wcas-ico-magnifier,
.header-main .dgwt-wcas-ico-magnifier path,
.dgwt-wcas-search-wrapp .dgwt-wcas-ico-magnifier,
.dgwt-wcas-search-wrapp .dgwt-wcas-ico-magnifier path {
  fill: var(--brand-strong) !important;
  stroke: var(--brand-strong) !important;
  /* non-scaling-stroke: viewBox je ~0 0 51 51 mapiran na ~20px, pa bi stroke u
     user-jedinicama bio mikroskopski; ovako je 1.4 = 1.4px na ekranu. */
  vector-effect: non-scaling-stroke !important;
  stroke-width: 1.4px !important;
  paint-order: stroke fill !important;
  stroke-linejoin: round !important;
}
.header-main .dgwt-wcas-ico-magnifier,
.dgwt-wcas-search-wrapp .dgwt-wcas-ico-magnifier {
  width: 22px !important;
  height: 22px !important;
  /* Glif dodiruje ivicu viewBox-a; deblji stroke izlazi van pa ga svg inače
     seče (odsečeno levo/gore). overflow:visible pušta da se vidi ceo. */
  overflow: visible !important;
}

/* Cookie baner (Complianz): "Uvek aktivan" labela ide u brend tirkiznu.
   Complianz generiše ovu boju kao doslovno "green" (hardkodovano), pa je
   ovde override-ujemo na brend. Ostale boje banera su u Complianz configu. */
.cmplz-cookiebanner .cmplz-always-active {
  color: var(--brand) !important;
}

/* ============================================================
   Cookie baner (Complianz) — redizajn po dizajnu: plutajuća
   kartica dole-levo (.cc-banner), NE više pun-širina traka.
   Zaobljena, sa senkom, ikona-bedž u headeru, pilule dugmad,
   i okrugli FAB ("Kolačići") za ponovno otvaranje posle izbora.
   Boje dolaze iz Complianz config-a; ovde je oblik/layout.
   Isti izgled na desktopu i mobilnom (samo margine se smanje).
   ============================================================ */

/* Kartica: fiksirana dole-levo. Override Complianz pun-širina/poziciju.
   VAŽNO: prikaz je vezan za .cmplz-show (koje Complianz JS dodaje SAMO kad baner
   treba da se vidi). Ranije je golo .optin forsiralo display:flex pa se baner
   nakratko video na SVAKOM učitavanju (i posle datog pristanka) — to je „bljeskalo"
   pri AJAX/reload filtera u prodavnici. Bez golog .optin nema FOUC-a. */
.cmplz-cookiebanner.optin.cmplz-show,
.cmplz-cookiebanner.optin.cmplz-show:hover {
  position: fixed !important;
  /* z-index u našem <head> CSS-u (ne čekamo Complianz-ov kasni 99999) da kartica
     bude iznad sadržaja OD PRVOG iscrtavanja — inače se kartice sa transformom
     (novi stacking context) nakratko vide ISPRED pa odu iza. Vrednost 1000:
     iznad celog sadržaja strane, ali ISPOD modala (brzi pregled / korpa = 1043),
     da ti popup-i ostanu preko kolačić-kartice. */
  z-index: 1000 !important;
  left: 24px !important;
  right: auto !important;
  bottom: 24px !important;
  top: auto !important;
  width: min(440px, calc(100vw - 48px)) !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 24px 24px 22px !important;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  row-gap: 0;
}

/* Bez „razvlačenja" pri prelazu kartica→modal: baner i kontejneri imaju
   transition:all (Complianz/Flatsome), pa se promena geometrije (širina
   440→560, pozicija, padding) animira. Gasimo transition SAMO na njima —
   dugmad (.cmplz-btn) i switch (.cmplz-label) zadrže svoje hover/slide. */
.cmplz-cookiebanner.optin,
.cmplz-cookiebanner.optin .cmplz-body,
.cmplz-cookiebanner.optin .cmplz-categories,
.cmplz-cookiebanner.optin .cmplz-category {
  transition: none !important;
}

/* Posle izbora kartica nestaje (naš display:flex !important bi inače
   nadjačao Complianz-ovo .cmplz-dismissed{display:none}). */
.cmplz-cookiebanner.cmplz-dismissed { display: none !important; }
/* X (zatvori) nam ne treba — korisnik bira dugmetom. */
.cmplz-cookiebanner .cmplz-close { display: none !important; }

/* Header: ikona-bedž (brend-tint) + naslov u jednom redu. */
.cmplz-cookiebanner .cmplz-header {
  display: flex !important;
  align-items: center;
  gap: 13px;
  margin-bottom: 12px;
  grid-template-columns: none !important;
}
/* Prazni .cmplz-logo div postaje brend-tint bedž sa cookie ikonom. */
.cmplz-cookiebanner .cmplz-logo {
  display: block !important;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  margin: 0 !important;
  border-radius: 14px;
  background: var(--brand-tint) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230E7C70'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%2010%2010%204%204%200%200%201-5-5%204%204%200%200%201-5-5'/%3E%3Cpath%20d='M8.5%208.5v.01'/%3E%3Cpath%20d='M16%2015.5v.01'/%3E%3Cpath%20d='M12%2012v.01'/%3E%3Cpath%20d='M11%2017v.01'/%3E%3Cpath%20d='M7%2014v.01'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}
.cmplz-cookiebanner .cmplz-title {
  display: block !important;
  font-family: var(--font-head) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Telo: poruka iznad (kategorije se pokažu kad se klikne Podešavanja). */
.cmplz-cookiebanner .cmplz-body {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
}
.cmplz-cookiebanner .cmplz-message {
  color: var(--ink-2) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 0 18px !important;
  /* Complianz u proširenom stanju daje poruci ~50% širine (za svoj
     2-kolonski layout). Forsiramo punu širinu da tekst ne bude stešnjen. */
  width: 100% !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}
.cmplz-cookiebanner .cmplz-message a {
  color: var(--brand);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cmplz-cookiebanner .cmplz-message a:hover { color: var(--brand-strong); }

/* Kategorije (vidljive tek kad se otvori "Podešavanja"): redovi
   sa nazivom + opisom + toggle, kao u dizajnu (.cc-cat). */
.cmplz-cookiebanner .cmplz-categories {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 4px !important;
}
.cmplz-cookiebanner .cmplz-category {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--line-2) !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  margin: 0 !important;
}
.cmplz-cookiebanner .cmplz-category:last-child { border-bottom: none !important; }
.cmplz-cookiebanner .cmplz-category-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
}
.cmplz-cookiebanner .cmplz-description span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
/* Bez „bljeska" proširenog stanja na učitavanju: kategorije i „Sačuvaj izbor"
   su skriveni dok Complianz ne doda .cmplz-categories-visible. Naš CSS se učita
   u <head> (kartica se odmah vidi), a Complianz-ov generisani CSS koji ih inače
   krije ume da stigne kasnije — pa bi se nakratko video otvoren panel. */
.cmplz-cookiebanner:not(.cmplz-categories-visible) .cmplz-categories,
.cmplz-cookiebanner:not(.cmplz-categories-visible) .cmplz-save-preferences {
  display: none !important;
}
/* Duga lista manage-linkova i divideri ne trebaju na kartici. */
.cmplz-cookiebanner .cmplz-links { display: none !important; }
.cmplz-cookiebanner .cmplz-divider { display: none !important; }
/* Duplikat "Podešavanja" (link-dugme) — aktivno je view-preferences. */
.cmplz-cookiebanner .cmplz-buttons .cmplz-manage-options { display: none !important; }

/* Dugmad: Prihvati + Odbij u redu, Podešavanja kao tekst-dugme ispod. */
.cmplz-cookiebanner .cmplz-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
  /* flex-grow:1 sa !important: Complianz generisani CSS forsira grow:0 pa bi se
     dugmad skupila levo; dizajn ih traži da popune red (Prihvati/Samo neophodne
     po ~50%). */
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  /* Bez „bljeska" visine: Flatsome dugmadima daje default margin 0 .3em .3em 0
     (~14.5px), koji Complianz inače poništava tek svojim kasno-učitanim CSS-om —
     pa se kartica na prvi load vidi ~31px viša, pa se „skupi". Poništavamo ga
     odmah u našem <head> CSS-u da visina bude konačna od prvog iscrtavanja. */
  margin: 0 !important;
  font-family: var(--font-head) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
  padding: 13px 22px !important;
  border-radius: var(--r-pill) !important;
  text-align: center;
  transition: transform .18s var(--ease), background .2s, box-shadow .2s, color .2s;
}
/* Prihvati + Samo neophodne: tačno po pola reda (flex-basis:0 da dužina teksta
   ne utiče). Cilja SAMO ta dva dugmeta — „Podešavanja" (.cmplz-view-preferences)
   ostaje pun red ispod. */
.cmplz-cookiebanner .cmplz-buttons .cmplz-accept,
.cmplz-cookiebanner .cmplz-buttons .cmplz-deny {
  flex: 1 1 0 !important;
}
/* Prihvati = primarno (brend). */
.cmplz-cookiebanner .cmplz-accept {
  background: var(--brand) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 16px oklch(0.585 0.105 188 / 0.30) !important;
}
.cmplz-cookiebanner .cmplz-accept:hover {
  background: var(--brand-strong) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px oklch(0.585 0.105 188 / 0.36) !important;
}
/* Odbij = ghost (obrub). */
.cmplz-cookiebanner .cmplz-deny {
  background: transparent !important;
  color: var(--brand-strong) !important;
  box-shadow: inset 0 0 0 1.5px var(--line) !important;
  border: none !important;
}
.cmplz-cookiebanner .cmplz-deny:hover {
  box-shadow: inset 0 0 0 1.5px var(--brand) !important;
  color: var(--brand) !important;
}
/* Sačuvaj izbor (u proširenom stanju) = primarno. */
.cmplz-cookiebanner .cmplz-save-preferences {
  background: var(--brand) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 16px oklch(0.585 0.105 188 / 0.30) !important;
}
.cmplz-cookiebanner .cmplz-save-preferences:hover {
  background: var(--brand-strong) !important;
  transform: translateY(-1px);
}
/* Podešavanja = tekst-dugme, pun red ispod, centrirano sa sliders ikonom. */
.cmplz-cookiebanner .cmplz-buttons .cmplz-view-preferences {
  flex: 0 0 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  color: var(--muted) !important;
  font-size: 13.5px !important;
  padding: 8px 6px !important;
  /* Odmaknuto od dugmadi iznad (Prihvati/Samo neophodne) — Milan 2026-06-18. */
  margin-top: 12px !important;
}
/* Sliders (podešavanja) ikona ispred teksta — stroke u boji teksta dugmeta. */
.cmplz-cookiebanner .cmplz-view-preferences::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='21'%20y1='4'%20x2='14'%20y2='4'/%3E%3Cline%20x1='10'%20y1='4'%20x2='3'%20y2='4'/%3E%3Cline%20x1='21'%20y1='12'%20x2='12'%20y2='12'/%3E%3Cline%20x1='8'%20y1='12'%20x2='3'%20y2='12'/%3E%3Cline%20x1='21'%20y1='20'%20x2='16'%20y2='20'/%3E%3Cline%20x1='12'%20y1='20'%20x2='3'%20y2='20'/%3E%3Cline%20x1='14'%20y1='2'%20x2='14'%20y2='6'/%3E%3Cline%20x1='8'%20y1='10'%20x2='8'%20y2='14'/%3E%3Cline%20x1='16'%20y1='18'%20x2='16'%20y2='22'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='21'%20y1='4'%20x2='14'%20y2='4'/%3E%3Cline%20x1='10'%20y1='4'%20x2='3'%20y2='4'/%3E%3Cline%20x1='21'%20y1='12'%20x2='12'%20y2='12'/%3E%3Cline%20x1='8'%20y1='12'%20x2='3'%20y2='12'/%3E%3Cline%20x1='21'%20y1='20'%20x2='16'%20y2='20'/%3E%3Cline%20x1='12'%20y1='20'%20x2='3'%20y2='20'/%3E%3Cline%20x1='14'%20y1='2'%20x2='14'%20y2='6'/%3E%3Cline%20x1='8'%20y1='10'%20x2='8'%20y2='14'/%3E%3Cline%20x1='16'%20y1='18'%20x2='16'%20y2='22'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cmplz-cookiebanner .cmplz-view-preferences:hover { color: var(--brand) !important; }

/* U proširenom stanju (kategorije vidljive) dugmad dobijaju razmak i
   tanku liniju iznad — da ne budu zalepljena za poslednji red kategorija. */
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons {
  margin-top: 16px !important;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}

/* Ponovno otvaranje cookie podešavanja (2026-07-03): FAB kružić dole-levo je
   ugašen nativno (manage_consent_options='hide-everywhere' u _cmplz_banner.php),
   umesto njega footer widget Pravno ima <button class="cmplz-manage-consent">
   "Podešavanje kolačića" (Complianz JS otvara baner samo na <button>, ne <a>).
   Reset zbog Flatsome <button> stilova (min-height ~65px + margin), pa izgled
   identičan footer linkovima. */
#footer .footer-widgets button.cmplz-manage-consent {
  display: inline;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  font-family: inherit;
  font-size: 14px;          /* kao #footer .footer-1 ul li a */
  font-weight: normal;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: oklch(0.82 0.015 190);  /* kao linkovi tamnog footera */
  cursor: pointer;
  transition: color .15s;
}
#footer .footer-widgets button.cmplz-manage-consent:hover {
  color: #fff;
  background: none;
}

/* ============================================================
   "Podešavanja kolačića" — centrirani modal + zamućena pozadina.
   Kada se klikne "Podešavanja", Complianz dodaje .cmplz-categories-visible
   na ISTI banner (nema poseban modal). Tada plutajuću karticu dole-levo
   pretvaramo u modal na sredini ekrana, a iza njega pravimo zamućeni sloj
   preko cele strane (dizajn .cc-overlay + .cc-modal). Backdrop je ::before
   pseudo-element u stacking kontekstu modala (z-index:-1 → iza kartice,
   ali preko cele strane). Tekst koji se razlikuje od banera (naslov,
   podnaslov, "Odbij sve") menjamo preko ::before jer Complianz ima jedan
   string po dugmetu za oba stanja. ============================================================ */
/* Kontejner banera postaje overlay (sloj preko cele strane sa zamućenjem);
   banner se centrira unutar njega (dizajn .cc-overlay > .cc-modal). :has()
   cilja samo prošireno stanje — na kartici kontejner ostaje prazan/bez efekta.
   (Backdrop NE sme biti ::before samog banera: negativni z-index se iscrtava
   IZNAD bele pozadine kartice pa bi tintovao unutrašnjost modala.) */
#cmplz-cookiebanner-container:has(.cmplz-cookiebanner.optin.cmplz-categories-visible:not(.cmplz-dismissed):not(.cmplz-hidden)) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1100 !important;       /* iznad svih popupa (korpa/brzi pregled = 1043) */
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  background: oklch(0.22 0.02 200 / 0.52);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
/* Banner u modal-stanju: centriran karticom kontejnera, bez fiksnog pozicioniranja. */
.cmplz-cookiebanner.optin.cmplz-categories-visible,
.cmplz-cookiebanner.optin.cmplz-categories-visible.cmplz-show,
.cmplz-cookiebanner.optin.cmplz-categories-visible.cmplz-show:hover {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: min(560px, 100%) !important;
  max-height: 88vh !important;
  padding: 0 !important;          /* delovi (head/body/foot) nose svoj padding */
  overflow: hidden !important;    /* zaobljeni uglovi seku sadržaj */
  /* Samo brzi fade — bez slide/scale „razvlačenja" prozora (dizajn nema
     animaciju širenja; modal se otvori direktno pune visine). */
  animation: ccFade .14s var(--ease);
}
@keyframes ccFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Glava modala: ikona + naslov + (X). Naslov → "Podešavanja kolačića". */
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-header {
  padding: 24px 26px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--line-2);
  align-items: center;
}
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-title {
  font-size: 0 !important;        /* sakrij banner-naslov "Kolačići na našem sajtu" */
}
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-title::before {
  content: "Podešavanja kolačića";
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
/* X (zatvori) — u modalu ga vraćamo (na kartici je skriven). Vraća na plutajuću karticu. */
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-close {
  display: grid !important;
  place-items: center;
  margin-left: auto !important;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--ink-2);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .18s var(--ease), color .18s;
}
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-close:hover {
  background: var(--brand-tint);
  color: var(--brand-strong);
}
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-close svg {
  width: 13px;
  height: 13px;
}

/* Telo: scroll lista kategorija. Banner-poruka → podnaslov modala. */
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 0 !important;
}
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-message {
  font-size: 0 !important;        /* sakrij dugu banner-poruku */
  padding: 14px 26px 10px !important;
  margin: 0 !important;
}
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-message::before {
  content: "Izaberite koje kolačiće dozvoljavate. Neophodni su uvek uključeni.";
  display: block;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-categories {
  padding: 0 26px !important;
  margin: 0 !important;
}
/* Kategorije: opisi UVEK vidljivi (Complianz koristi <details>, koji ih krije
   dok nisu otvoreni), bez chevrona — kao flat redovi u dizajnu (.cc-cat). */
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-category .cmplz-description {
  display: block !important;
}
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-category .cmplz-icon.cmplz-open {
  display: none !important;
}
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-category summary {
  cursor: default;
  list-style: none;
}
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-category summary::-webkit-details-marker {
  display: none;
}
/* Skup kategorija po dizajnu: Neophodni / Funkcionalni / Analitika.
   Complianz po difoltu prikazuje Marketing (a mi nemamo oglase) i krije
   Preferences (nema preference-kolačiće) — ovde to obrćemo. DOM red je
   functional → preferences → statistics → marketing, pa skrivanjem Marketinga
   i prikazom Preferences dobijamo tačno dizajnerski redosled.
   NAPOMENA: kad se uvede tracking (Faza 7, GA4), skup kategorija podesiti u
   Complianz configu (consent mode / per-service) umesto ovog CSS override-a. */
.cmplz-cookiebanner .cmplz-category.cmplz-marketing { display: none !important; }
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-category.cmplz-preferences { display: block !important; }

/* Naslovi kategorija i switch po dizajnu (.cc-cat-body b = 15.5px, .cc-switch =
   46×27, knob 21px). Complianz default je sitan (naslov 14px, switch 28×15). */
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-category-title {
  font-size: 15.5px !important;
  line-height: 1.3 !important;
}
/* Red zaglavlja kategorije: naslov levo, kontrola (switch / „Uvek aktivan")
   desno, bez prelamanja. Complianz koristi display:grid čije se kolone na
   uskom (mobilnom) ekranu prelome pa kontrola padne ispod naslova — forsiramo
   čist flex red koji radi na svim širinama. */
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-category-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
}
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-category-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-category-header .cmplz-always-active,
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-category-header .cmplz-banner-checkbox {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}
/* Switch: track (.cmplz-label:before) i knob (:after) na dizajn-dimenzije.
   Complianz koristi skriveni checkbox + label sa dva pseudo-elementa. */
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-banner-checkbox .cmplz-label {
  padding-left: 46px !important;
  height: 27px !important;
  display: block !important;
}
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-banner-checkbox .cmplz-label::before {
  width: 46px !important;
  height: 27px !important;
  border-radius: 999px !important;
  top: 0 !important;
  left: 0 !important;
  padding: 0 !important;
  line-height: 27px !important;
}
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-banner-checkbox .cmplz-label::after {
  width: 21px !important;
  height: 21px !important;
  border-radius: 50% !important;
  top: 3px !important;
  left: 3px !important;
}
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::after {
  left: 22px !important;
}
/* Klik-meta (nevidljivi input) prati novu veličinu switcha. */
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-banner-checkbox input.cmplz-consent-checkbox {
  width: 46px !important;
  height: 27px !important;
  top: 0 !important;
  margin-top: 0 !important;
}
/* Neophodni kolačići: bez switcha (uvek uključeno) — ostaje samo „Uvek aktivan"
   tekst, kao u dizajnu (badge umesto kontrole). */
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-functional .cmplz-banner-checkbox {
  display: none !important;
}
/* „Uvek aktivan" = mono uppercase badge sa kvačicom (dizajn .cc-locked: 10.5px
   mono, letter-spacing, brend, bold). Namerno malo — to NIJE greška, badge je. */
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-functional .cmplz-always-active {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--brand) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-functional .cmplz-always-active::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  background: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='20%206%209%2017%204%2012'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='20%206%209%2017%204%2012'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Bez sporog „fadeIn 1s" na kategorijama (Complianz dodaje .cmplz-fade-in pa se
   tekst polako pojavljuje). Modal se otvori odjednom — sadržaj odmah vidljiv. */
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-categories,
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-categories.cmplz-fade-in {
  animation: none !important;
  -webkit-animation: none !important;
}

/* Podnožje: dugmad u redu, linija iznad. Redosled kao dizajn: Odbij | Sačuvaj | Prihvati. */
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons {
  padding: 16px 26px 22px !important;
  margin: 0 !important;
  border-top: 1px solid var(--line-2);
  gap: 10px !important;
}
/* "Podešavanja" (view-preferences) ne treba u podnožju modala. */
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-view-preferences {
  display: none !important;
}
/* Dugmad popunjavaju red jednakih širina (dizajn .cc-modal-foot .btn:
   flex:1 1 160px). Complianz generisani CSS forsira flex-grow:0 (pa se
   skupljaju levo) — vraćamo grow:1 sa !important. */
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons .cmplz-btn {
  flex: 1 1 160px !important;
}
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-deny { order: 1; font-size: 0 !important; }
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-deny::before {
  content: "Odbij sve";
  font-family: var(--font-head);
  font-size: 14.5px;
  font-weight: 600;
}
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-save-preferences { order: 2; }
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-accept { order: 3; }

/* Mobilni: kartica sa manjim marginama (dizajn @max-width:540px). */
@media (max-width: 540px) {
  .cmplz-cookiebanner.optin,
  .cmplz-cookiebanner.optin.cmplz-show,
  .cmplz-cookiebanner.optin.cmplz-show:hover {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    width: auto !important;
    /* Stegnut vertikalni padding (bio 20/18) da niža kartica stane ~260px. */
    padding: 16px 18px 12px !important;
  }
  /* Complianz krije naslov <425px; nama treba. */
  .cmplz-cookiebanner .cmplz-title { display: block !important; }

  /* Stegnuti razmaci SAMO na kartici (ne na modalu) da kraća poruka + dugmad
     stanu u nižu karticu. :not(.cmplz-categories-visible) čuva modal netaknutim. */
  .cmplz-cookiebanner.optin:not(.cmplz-categories-visible) .cmplz-header {
    margin-bottom: 6px !important;
  }
  .cmplz-cookiebanner.optin:not(.cmplz-categories-visible) .cmplz-message {
    margin-bottom: 8px !important;
    line-height: 1.5 !important;
  }
  .cmplz-cookiebanner.optin:not(.cmplz-categories-visible) .cmplz-view-preferences {
    margin-top: 5px !important;
    padding: 5px 6px !important;
  }
  /* Uski ekrani (Galaxy S24 = 360px): „Samo neophodne" na 15px/pad 22 izlazi iz
     dugmeta za ~4px (scrollWidth 144 > width 140, uočeno 2026-07-22). Manji font
     + tešnji horizontalni padding na OBA polu-dugmeta — staje i na 320px. */
  .cmplz-cookiebanner .cmplz-buttons .cmplz-accept,
  .cmplz-cookiebanner .cmplz-buttons .cmplz-deny {
    font-size: 14px !important;
    padding: 12px 8px !important;
  }

  /* Modal (Podešavanja) na mobilnom: niža kartica 72vh (desktop ostaje 88vh) —
     88vh je gutalo skoro ceo mali ekran. Interni skrol tela već postoji. */
  .cmplz-cookiebanner.optin.cmplz-categories-visible,
  .cmplz-cookiebanner.optin.cmplz-categories-visible.cmplz-show,
  .cmplz-cookiebanner.optin.cmplz-categories-visible.cmplz-show:hover {
    max-height: 72vh !important;
  }

  /* Podnožje modala u DVA reda na mobilnom: „Odbij sve" i „Prihvati sve" po pola
     reda gore, „Sačuvaj izbor" pun red ISPOD njih kao glavno dugme. Ranije: tri
     naslagana puna dugmeta (~180px visine). Desktop ostaje tri u jednom redu.
     Save dobija flex-basis 100% pa se prelomi u svoj red; deny/accept basis 0
     pa dele gornji red na pola. */
  .cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons .cmplz-deny,
  .cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons .cmplz-accept {
    flex: 1 1 0 !important;
  }
  .cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons .cmplz-save-preferences {
    flex: 1 1 100% !important;
  }
  .cmplz-cookiebanner.cmplz-categories-visible .cmplz-deny { order: 1; }
  .cmplz-cookiebanner.cmplz-categories-visible .cmplz-accept { order: 2; }
  .cmplz-cookiebanner.cmplz-categories-visible .cmplz-save-preferences { order: 3; }
}

/* Ukloni "top-divider" (dupla linija ispod headera) — ne treba nam. */
.top-divider { display: none !important; }

/* Pozadina sajta = topla krem (--paper); #main je bio beo i prekrivao je.
   Kartice i nav ostaju beli (svoja pozadina). (dizajn: paper bg + bele kartice) */
#main { background-color: transparent !important; }

/* Sadržaj iste širine kao header (logo levo, korpa desno). Sekcija je imala 30px
   horizontalni padding koji ju je sužavao — uklanjamo ga (header je ~1080 / 1050 sadržaj). */
.home #content .section { padding-left: 0 !important; padding-right: 0 !important; }

/* "od 1990." tagline pored logoa (kao design .logo-txt span: body, prigušeno).
   Logo kolona je bila fiksna 110px pa je tagline ulazio pod search; puštamo je
   da se širi po sadržaju. */
.header-main .flex-col.logo {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}
.header-main #logo a {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  overflow: visible;
}
.header-main #logo a::after {
  content: "od 1990.";
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Ne sve velikim slovima (Milan): broj proizvoda u kat gridu i eyebrow labele -> sentence case. */
.negic-katcard-count { text-transform: none !important; }
.negic-eyebrow { text-transform: none !important; letter-spacing: .02em; }

/* --- Korpa: brojač u clay boji --- */
.header-main .cart-icon strong {
  background-color: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.header-main a:hover .cart-icon strong { background-color: var(--accent-strong); }

/* --- Header korpa: ikona gore, "Korpa" tekst ISPOD (dizajn .cart-btn) + dizajn cart ikona --- */
.header-cart-link.nav-top-link {
  display: inline-flex !important;
  flex-direction: column-reverse !important;   /* DOM: tekst, pa ikona -> ikona gore, tekst dole */
  align-items: center !important; justify-content: center; gap: 3px; line-height: 1.05;
}
/* Prikazi samo "Korpa" (kratko, centrirano ispod ikonice) umesto "Korpa / 0 RSD". */
.header-cart-link .header-cart-title { font-size: 0 !important; line-height: 1; text-align: center; }
.header-cart-link .header-cart-title::after {
  content: "Korpa"; font-family: var(--font-body); font-size: 11px; font-weight: 500; color: var(--ink-2);
}
/* zameni Flatsome basket glyph dizajn cart ikonom (::before = ikona, ::after ostaje brojač) */
.header-cart-link.nav-top-link { text-align: center !important; }
.header-cart-link .icon-shopping-basket {
  position: relative; display: block !important;
  width: 26px !important; height: 26px; margin: 0 auto !important; padding: 0 !important;
}
.header-cart-link .icon-shopping-basket::before {
  content: ""; display: block; width: 26px; height: 26px; margin: 0 auto;
  background-color: var(--ink);
  -webkit-mask: var(--negic-cart-ico) center / contain no-repeat;
          mask: var(--negic-cart-ico) center / contain no-repeat;
}
.header-cart-link:hover .icon-shopping-basket::before { background-color: var(--brand-strong); }
:root { --negic-cart-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6h16l-1.5 9H7L5 6Z'/%3E%3Cpath d='M5 6 4 3H2'/%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3C/svg%3E"); }

/* --- Bedž korpe u stuck headeru: par px vazduha od vrha ekrana ---
   Bedž sa brojem artikala je ::after pseudo ikone korpe, spušten negativnim top
   offsetom (Flatsome [data-icon-label]:after { top:-10px }). Kad header pređe u
   stuck (top:0), vrh bedža padne na y≈0 i dodirne gornju ivicu browsera. U stuck
   stanju smanjujemo negativni offset (top:-5px) da bedž ostane par px ispod ivice.
   Samo desktop (≥850px); na mobilnom bedž već ima dovoljno vazduha. */
@media (min-width: 850px) {
  .header-wrapper.stuck .header-cart-link .icon-shopping-basket[data-icon-label]::after {
    top: -5px;
  }
}

/* --- Nav red: bela pozadina + tanka granica --- */
#wide-nav.header-bottom {
  background-color: var(--card);
  border-bottom: 1px solid var(--line-2);
}
/* nav linkovi: Baloo 2 600, pilule na hover (sentence case, ne uppercase) */
#wide-nav .header-bottom-nav > li > a.nav-top-link {
  font-family: var(--font-body);   /* dizajn: category linkovi su body (Mulish), ne Baloo */
  font-weight: 600;                /* 500→600 2026-07-04: nav = glavni ulaz u kupovinu, zaslužuje prisustvo; ne ići na 700 */
  font-size: 14px;
  color: var(--ink-2);
  border-radius: var(--r-pill);
  padding: 6px 11px !important;   /* uža nav traka vertikalno (~54px kao dizajn) */
  text-transform: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
#wide-nav .header-bottom-nav > li > a.nav-top-link:hover,
#wide-nav .header-bottom-nav > li.current-menu-item > a.nav-top-link {
  background: var(--brand-tint-2);
  color: var(--brand-strong);
}
/* Flatsome animirani podvlaka-indikator off na nav-u */
#wide-nav .header-bottom-nav > li > a.nav-top-link::before { display: none !important; }

/* "Kategorije" = brand pilula (trigger dropdown-a). Malo viša (~10%) od ostalih nav stavki. */
#wide-nav .header-bottom-nav > li.menu-item-38 > a.nav-top-link {
  background: var(--brand);
  color: #fff;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
#wide-nav .header-bottom-nav > li.menu-item-38 > a.nav-top-link:hover {
  background: var(--brand-strong);
  color: #fff;
}

/* "Novo" featured = clay tekst link (po design .nav-new), ne puna pilula.
   Ikona dolazi iz postojećeg .negic-nav-ico SVG-a (currentColor), pa boja
   linka boji i ikonu. #wide-nav prefiks diže specifičnost da pobedi
   Flatsome-ov #wide-nav nav-top-link:hover (koji je inače belio tekst). */
#wide-nav .header-bottom-nav li.menu-novo-btn > a,
ul.header-nav li.menu-novo-btn > a {
  background: transparent !important;
  color: var(--accent-strong) !important;
  padding: 7px 12px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
}
/* Span unutar linka (tekst "Novo") — SAMO boja, bez padding/gap (inače je ikona
   dobijala 12px padding pa je zvezdica bila predaleko od teksta). */
#wide-nav .header-bottom-nav li.menu-novo-btn > a span { color: var(--accent-strong) !important; }
/* Ikona uz "Novo": poništi opšti margin-right (7px), ostaje samo flex gap 5px. */
#wide-nav .header-bottom-nav li.menu-novo-btn > a .negic-nav-ico { margin-right: 0 !important; padding: 0 !important; }
#wide-nav .header-bottom-nav li.menu-novo-btn > a:hover,
#wide-nav .header-bottom-nav li.menu-novo-btn > a:hover span,
#wide-nav .header-bottom-nav li.menu-novo-btn.current-menu-item > a,
#wide-nav .header-bottom-nav li.menu-novo-btn.current-menu-item > a span {
  background: transparent !important;
  color: var(--accent-strong) !important;
}
#wide-nav .header-bottom-nav li.menu-novo-btn > a:hover {
  background: var(--accent-tint) !important;
}

/* „Naš izbor" featured = brand teal tekst link (2026-07-08: bilo crveno „Akcija", ali crveno =
   sniženje, a ovo nije sniženje nego kuriran izbor). Teal se razlikuje od clay „Novo" da se dve
   specijalne stavke ne stope u istu boju. Isti oblik kao „Novo". Klasa menu-akcija-btn ostaje. */
.header-bottom-nav li.menu-akcija-btn,
ul.header-nav li.menu-akcija-btn { display: flex; align-items: center; }
#wide-nav .header-bottom-nav li.menu-akcija-btn > a,
ul.header-nav li.menu-akcija-btn > a {
  background: transparent !important;
  color: var(--brand-strong) !important;
  padding: 7px 12px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
}
#wide-nav .header-bottom-nav li.menu-akcija-btn > a span { color: var(--brand-strong) !important; }
#wide-nav .header-bottom-nav li.menu-akcija-btn > a .negic-nav-ico { margin-right: 0 !important; padding: 0 !important; }
#wide-nav .header-bottom-nav li.menu-akcija-btn > a:hover,
#wide-nav .header-bottom-nav li.menu-akcija-btn > a:hover span,
#wide-nav .header-bottom-nav li.menu-akcija-btn.current-menu-item > a,
#wide-nav .header-bottom-nav li.menu-akcija-btn.current-menu-item > a span {
  background: transparent !important;
  color: var(--brand-deep) !important;
}
#wide-nav .header-bottom-nav li.menu-akcija-btn > a:hover {
  background: var(--brand-tint-2) !important;
}

/* "Komplet za prvaka" featured = clay tekst link (outline na hover) */
.header-bottom-nav li.menu-komplet-btn > a.nav-top-link {
  color: var(--accent-strong) !important;
  font-weight: 600;
}
.header-bottom-nav li.menu-komplet-btn > a.nav-top-link:hover {
  background: var(--accent-tint) !important;
  color: var(--accent-strong) !important;
}
/* Donji nav: jedan red, bez prelamanja. Na užim ekranima (laptop) inline kategorije
   (Školski pribor…Igračke) se kriju da „Komplet za prvaka" ne padne u drugi red —
   sve kategorije ostaju dostupne u „Sve kategorije" dropdown-u. Jezgro (Sve
   kategorije / Brendovi / Novo / Komplet) uvek staje. */
#wide-nav .header-bottom-nav { flex-wrap: nowrap; white-space: nowrap; justify-content: flex-start !important; }
@media (max-width: 1100px) {
  #wide-nav .header-bottom-nav > li.menu-inline-cat { display: none !important; }
}
/* Donja nav geometrija — sprečava lom ikone IZNAD teksta (regresija 2026-07-08,
   kad je „Akcija"→„Naš izbor" + srce proširilo sadržaj preko kapaciteta trake).
   Uzrok: Flatsome daje <a> flex-wrap:wrap, pa pod flex-shrink pritiskom ikona i
   tekst padnu u dva reda (li visine 50-57px umesto ~34px). Fix u dva koraka:
   (1) flex-wrap:nowrap na ne-pilula linkove da ikona i tekst OSTANU u istom redu;
   (2) oslobodi ~13px horizontalno (margine stavki 7→6; „Brendovi" levi 12→8 i
   separator padding 18→14 dole) pa prirodna širina padne na ~1029px (≤1035, kao
   naštimovano 2026-06-04) i sve stane bez kompresije. „Sve kategorije" pilulu
   (menu-item-38, chevron u 2. redu) NAMERNO NE diramo. */
#wide-nav .header-bottom-nav > li:not(.menu-item-38) > a {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
#wide-nav .header-bottom-nav > li:not(.menu-item-38) {
  margin-left: 6px !important;
  margin-right: 6px !important;
}

/* --- Dropdown kategorija: mekana bela kartica --- */
#wide-nav .nav-dropdown {
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 8px;
}
#wide-nav .nav-dropdown li > a {
  /* radius/transition su ranije stizali iz top-nav pravila (#wide-nav li.menu-item > a)
     koje je scope-ovano na .header-bottom-nav; vraćamo ih ovde da Brendovi/inline
     dropdown hover izgleda identično kao pre — Milan 2026-07-14. */
  border-radius: var(--r-pill);
  transition: background .15s, color .15s;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink-2);
  padding: 9px 12px;
}
#wide-nav .nav-dropdown li > a:hover {
  background: var(--brand-tint-2);
  color: var(--brand-strong);
}
/* Mega „Sve kategorije" (12 odeljenja): ograniči visinu na viewport i skroluj interno
   da ne pojede ceo ekran na nižim laptopovima. 3-kolonski raspored ostaje. 2026-07-01 */
#wide-nav li.menu-item-38 > .nav-dropdown {
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ============================================================
   REBRAND 2026 — FAZA 3: HOMEPAGE
   Hero, kategorije (ikon-pločice), traka poverenja, komplet,
   promo kartice, tabovi. Po design_handoff home.jsx + styles.css.
   ============================================================ */

/* --- Globalno: dugmad u Baloo 2 (dizajn .btn) --- */
.button,
a.button,
button.button {
  font-family: var(--font-head);
  font-weight: 600;
}

/* --- Naslovi na homepage-u: puna težina 700 (Baloo 2) --- */
.home h1,
.home h1.negic-hero-h1,
.home h2 { font-weight: 700; }

/* --- Eyebrow: Space Mono uppercase sa clay crticom --- */
.negic-eyebrow {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .14em;
  font-size: 12px;
  color: var(--brand-strong);
}
.negic-eyebrow::before { background: var(--accent); }

/* --- Hero: clay badge + chip pilule (umesto mikro-dot linije) --- */
.negic-hero-badge {
  background: var(--accent);
  box-shadow: 0 12px 30px rgba(207,122,68,.30);
}
.negic-hero-micro {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.negic-hero-micro span {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  padding: 7px 14px 7px 26px;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}
.negic-hero-micro span::before {
  content: "";
  position: absolute;
  left: 12px; top: 50%;
  width: 7px; height: 7px;
  margin: 0;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--brand);
  box-shadow: none;
}
.negic-hero-micro span:last-child::before { background: var(--accent); }

/* --- Kategorije: ikon-pločice na tintu (dizajn .cat-grid) --- */
.negic-katgrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);   /* 6 kategorija u jednom redu (kao dizajn), šire kartice */
  gap: 16px;
}
.negic-katcard {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.negic-katcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-tint);
}
.negic-katcard-ico {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--brand-tint);
  color: var(--brand-strong);
  position: relative;
  overflow: hidden;
}
.negic-katcard-ico .negic-svg-icon { width: 36px; height: 36px; }
/* Full-bleed fotografija koja popunjava pločicu (dizajn .cat-thumb cover). */
.negic-katcard-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
  mix-blend-mode: normal;
}
.negic-katcard-name { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink); }
.negic-katcard-count { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
/* per-kategorija tintovi (oklch iz design data.jsx) */
.negic-katcard[data-cat="skolski-pribor"] .negic-katcard-ico { background: oklch(0.93 0.045 250); color: oklch(0.42 0.10 255); }
.negic-katcard[data-cat="rancevi"]        .negic-katcard-ico { background: oklch(0.93 0.05 200);  color: oklch(0.42 0.09 205); }
.negic-katcard[data-cat="pernice"]        .negic-katcard-ico { background: oklch(0.94 0.045 20);  color: oklch(0.52 0.13 25); }
.negic-katcard[data-cat="knjige"]         .negic-katcard-ico { background: oklch(0.94 0.05 120);  color: oklch(0.42 0.09 135); }
.negic-katcard[data-cat="igracke"]        .negic-katcard-ico { background: oklch(0.94 0.05 300);  color: oklch(0.45 0.11 305); }
.negic-katcard[data-cat="likovno"]        .negic-katcard-ico { background: oklch(0.94 0.06 70);   color: oklch(0.52 0.12 60); }

/* --- Traka poverenja: 4 horizontalne karte (dizajn .trust) --- */
.negic-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.negic-trust-card {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 22px;
  display: flex;
  gap: 15px;
  align-items: flex-start;
  /* Kartica je link: nasleđuje boju teksta, bez podvlačenja. */
  color: inherit;
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.negic-trust-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-tint);
}
.negic-trust-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.negic-trust-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--brand-tint);
  color: var(--brand-strong);
}
.negic-trust-ico .negic-svg-icon { width: 22px; height: 22px; }
.negic-trust-tx strong { font-family: var(--font-head); font-weight: 700; font-size: 15px; display: block; color: var(--ink); }
.negic-trust-tx span { font-size: 13px; color: var(--muted); }

/* --- Komplet banner: opcione kartice Klasik/Premium (dizajn .bundle-opt) --- */
.negic-bundle-opts { display: flex; gap: 12px; margin: 18px 0 22px; flex-wrap: wrap; }
.negic-bundle-opt {
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: var(--r);
  padding: 14px 18px;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.negic-bundle-opt:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--accent); }
.negic-bundle-opt .bo-name { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink); }
.negic-bundle-opt .bo-price { font-family: var(--font-mono); font-weight: 700; color: var(--accent-strong); font-size: 15px; }
.negic-bundle-opt .bo-meta { font-size: 12px; color: var(--muted); }

/* --- Promo "Najtraženije pred polazak": slika levo, naslov, strelica --- */
/* Više vazduha iznad sekcije, da se naslov odvoji od banera (2026-07-04).
   !important jer Flatsome upisuje inline padding-top po ID selektoru sekcije. */
.negic-najtrazenije-sec { padding-top: 48px !important; }
@media (max-width: 849px) {
  .negic-najtrazenije-sec { padding-top: 32px !important; }
}
.negic-promo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.negic-promo-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 16px 18px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.negic-promo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.negic-promo-img {
  width: 88px; height: 88px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  flex-shrink: 0; overflow: hidden;
  background: var(--brand-tint);
  color: var(--brand-strong);
}
.negic-promo-img .negic-svg-icon { width: 34px; height: 34px; }
.negic-promo-img .negic-promo-photo,
.negic-promo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.negic-promo-title { font-family: var(--font-head); font-weight: 700; font-size: 16px; line-height: 1.22; color: var(--ink); }
.negic-promo-arrow { margin-left: auto; color: var(--brand); flex-shrink: 0; display: inline-flex; transition: transform .18s var(--ease); }
.negic-promo-card:hover .negic-promo-arrow { transform: translateX(3px); }
.negic-promo-card[data-cat="rancevi"] .negic-promo-img { background: oklch(0.93 0.05 200); color: oklch(0.42 0.09 205); }
.negic-promo-card[data-cat="pernice"] .negic-promo-img { background: oklch(0.94 0.045 20); color: oklch(0.52 0.13 25); }
.negic-promo-card[data-cat="knjige"]  .negic-promo-img { background: oklch(0.94 0.05 120); color: oklch(0.42 0.09 135); }

/* --- Landing „Sve za školu" (strana sve-za-skolu) --- */
.negic-skola-uvod .negic-pagehead { margin-bottom: 2px; }
.negic-skola-kat { margin-top: 6px; }
/* Traka poverenja — deljena između „Sve za školu" i „Galanterija" landinga (2026-07-14). */
.negic-skola-trust-box, .negic-trust-box {
  background: var(--brand-tint);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 18px 22px;
  text-align: center;
}
.negic-skola-trust-box p, .negic-trust-box p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.negic-skola-trust-box b, .negic-trust-box b { color: var(--ink); }

/* --- Landing „Sve za školu" — popravke rasporeda 2026-07-08 ---
   Sve je scope-ovano na body.page-id-9337 da homepage (.negic-promo-grid,
   .negic-section-head) i prodavnica ostanu netaknuti. UX Builder padding sekcija
   dolazi kroz #section_XXX { padding } (ID selektor), pa nam ovde treba !important. */

/* P5: „+" dugme UVEK desno i na uskim (140px) karticama. Uzrok problema: na uskoj
   kartici šira cena („1.190 RSD") gura dugme u novi red levo. Rešenje: cena dobija
   mali flex-basis (40px) + min-width:0 pa par (cena + dugme) staje u isti red i cena
   se skuplja umesto da lomi dugme; margin-left:auto drži dugme uz desnu ivicu.
   NB: flex-basis:0% ovde NE raste (sudar sa .screen-reader-text{flex:0 0 100%}),
   zato mali nenulti basis. */
body.page-id-9337 .product-small .box-text .price-wrapper { flex: 1 1 40px; min-width: 0; }
body.page-id-9337 .product-small .box-text .add-to-cart-button { margin-left: auto; }

/* P4: traka poverenja — stegni razmak iznad (od kartica) i ispod (do footera), oba viewporta.
   2026-07-09: ".col" je hvatao i kartice grida (2x4, mobilni 4x2) pa je 6px postao
   razmak red-na-red; suženo na kolonu-omotač, kartice drže default 19.6px (ritam
   prodavnice). Zbir ispod poslednjeg reda (bio 6+6+8=20px) čuvamo: kartica 19.6
   + omotač 6->0 + sekcija 8->0. */
body.page-id-9337 .negic-skola-izdvajamo { padding-bottom: 0 !important; }
body.page-id-9337 .negic-skola-izdvajamo .section-content > .row > .col { padding-bottom: 0 !important; }
body.page-id-9337 .negic-skola-trust-sec { padding-top: 8px !important; padding-bottom: 8px !important; }
body.page-id-9337 .negic-skola-trust-sec .col { padding-top: 0 !important; padding-bottom: 0 !important; }
body.page-id-9337 #content { padding-bottom: 12px !important; }

/* P3: manje praznine na vrhu (desktop; mobilni dodatno u media bloku ispod).
   Napomena: ispod 70px headera na mobilnom stoje globalna .negic-msearch (56px) i
   .negic-mpromo (44px) traka — to je chrome celog sajta, van ovog obima. */
body.page-id-9337 .negic-skola-uvod { padding-top: 14px !important; }

@media (max-width: 849px) {
  /* P1: mreža „Kupovina po odeljenju" = 2 kolone pune širine, kompaktnije kartice.
     Scope na .negic-skola-kat + page-id da homepage .negic-promo-grid ostane 1 kolona. */
  body.page-id-9337 .negic-skola-kat { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.page-id-9337 .negic-skola-kat .negic-promo-card { gap: 10px; padding: 10px 12px; }
  body.page-id-9337 .negic-skola-kat .negic-promo-img { width: 46px; height: 46px; }
  body.page-id-9337 .negic-skola-kat .negic-promo-title { font-size: 13.5px; line-height: 1.2; }
  body.page-id-9337 .negic-skola-kat .negic-promo-arrow { display: none; }

  /* P2: section-head teče punom širinom (h2 ceo red, link ispod), ne lomi se u 3 reda. */
  body.page-id-9337 .negic-section-head { flex-wrap: wrap; gap: 2px 20px; align-items: baseline; margin-bottom: 16px; }
  body.page-id-9337 .negic-section-head h2 { flex: 1 1 100%; }

  /* P5 dopuna: kartice proizvoda na ovoj strani su bile uže (140px) od shop kartica
     (170px) zbog 15px bočnog padinga wrapper kolone [col span=12] — pa se 4-cifrena
     cena („3.090 RSD") sudarala sa „+" dugmetom. Smanji padding samo te (wrapper)
     kolone → kartice ~151px, cena staje cela, dugme ostaje desno (kao na shopu). */
  body.page-id-9337 .section-content > .row > .col { padding-left: 4px; padding-right: 4px; }

  /* Task 7 (2026-07-16, Milan „+ dugme se lepi za cenu"): product mreže pune širine
     kao u prodavnici. Landing product .row je bio 342px (L24..R366 @390) jer je
     dublje ugnježden: section pad 30 + row -15/-15 + col pad 4 → col-inner 322, pa
     product row(-10/-10) = 342 → kartica 171px (19px uža od shop kartice 190). Shop
     je 380px (shop-container 360 + product row -10/-10). Razlika je fiksnih 38px na
     svakom viewportu (nezavisno od širine ekrana), zatvaramo je negativnom marginom
     SAMO na product .row: -10 → -29 (=+19px po strani) → row 380px (L5..R385,
     identično prodavnici: kartice 190/170, razmak cena→dugme ~21px). Hvatamo samo
     Flatsome product mreže (.row sa .product-small): pločice kategorija (.negic-*-kat)
     i brend-logoi su grid, ne .row, pa ostaju netaknuti. Section padding (30) i
     .negic-section-head takođe ostaju na mestu. */
  body.page-id-9337 .col-inner > .row:has(.product-small) {
    margin-left: -29px !important;
    margin-right: -29px !important;
  }

  /* P3: vrh strane na mobilnom. Razmak iznad h1 (od donje ivice chrome trake:
     header + pretraga + promo traka) izjednačen sa razmakom ispod uvoda do
     naslova „Kupovina po odeljenju" (~40px, content-to-content). padding-top
     6->32: 6px je davao samo ~14px iznad h1, +26px diže razmak na ~40px, pa
     naslov diše jednako kao ispod uvoda (2026-07-09). */
  body.page-id-9337 .negic-skola-uvod { padding-top: 32px !important; padding-bottom: 10px !important; }
  body.page-id-9337 .negic-skola-uvod .negic-pagehead { padding-top: 2px; margin-top: 0; }
}

/* P6: ujednačen ritam razmaka između sekcija (2026-07-09). Pre ovoga su razmaci
   bili neujednačeni (desktop 58-97, mobilni 64-97). Uzrok: ux_products sekcije
   (Kompleti, Izdvajamo) slažu tri sloja praznine ispod poslednjeg reda kartica:
   donji padding kartice (.product-small.col) + donji padding kolone-omotača
   (.section-content > .row > .col, default 30px) + padding same sekcije. Ovde te
   slojeve stežemo na sekcijama uvod / Kupovina / Kompleti tako da se izjednače sa
   već stegnutom trakom poverenja (P4) i naslovom Izdvajamo.
   Kupovina i Kompleti nemaju svoju klasu, pa ih zajedno hvatamo preko
   :not([class*="negic-skola-"]); product-small kartice su dublje ugnježdene od
   kolone-omotača pa ostaju netaknute (2026-07-09: i namerno stezanje Kompleti
   grida je ukinuto, jer je grid od 2 reda stezalo i red-na-red — višak se sad
   skida na omotaču, vidi pravila ispod).
   Padding sekcije dolazi iz #section_XXX (ID selektor) pa traži !important;
   padding kolone dolazi iz .col klase pa ne traži (isto kao P5).
   Desktop pravila su u min-width bloku da ne pregaze P3 stegnut mobilni vrh. */

@media (min-width: 850px) {
  /* vrh strane: h1 bliže meniju (samo desktop; mobilni vrh drži P3) */
  body.page-id-9337 #content { padding-top: 12px !important; }
  body.page-id-9337 .negic-skola-uvod { padding-top: 8px !important; padding-bottom: 18px !important; }

  /* kolona-omotač: uvod + Kupovina + Kompleti (Izdvajamo/trust drži P4) */
  body.page-id-9337 .negic-skola-uvod .section-content > .row > .col,
  body.page-id-9337 .section:not([class*="negic-skola-"]) .section-content > .row > .col { padding-bottom: 20px; }

  /* Kompleti: 2026-07-09 stezanje prebačeno sa kartica na kolonu-omotač. Staro
     pravilo (kartice 8px) je grid od 2 reda steglo i red-na-red; kartice sad drže
     default 19.6px (ritam prodavnice), a zbir ispod grida (bio 8+20=28px) čuvamo
     omotačem 20->8px. :has(.product-small) razdvaja Kompleti od Kupovine (obe su
     .section bez negic-skola- klase, ali samo Kompleti ima kartice). */
  body.page-id-9337 .section:not([class*="negic-skola-"]):has(.product-small) .section-content > .row > .col { padding-bottom: 8px; }

  /* Izdvajamo: manji razmak iznad naslova (gornja strana velikog gap3) */
  body.page-id-9337 .negic-skola-izdvajamo { padding-top: 4px !important; }
}

@media (max-width: 849px) {
  /* mobilni: stegni iste slojeve jače (cilj razmaka 36-44px). uvod drži P3. */
  body.page-id-9337 .negic-skola-uvod .section-content > .row > .col,
  body.page-id-9337 .section:not([class*="negic-skola-"]) .section-content > .row > .col { padding-bottom: 14px; }

  /* Kupovina + Kompleti: manji vertikalni padding sekcije */
  body.page-id-9337 .section:not([class*="negic-skola-"]) { padding-top: 10px !important; padding-bottom: 10px !important; }

  /* Kompleti: stezanje na omotaču umesto na karticama (razlog u desktop bloku
     iznad); mobilni zbir ispod grida (bio 6+14+10=30px) čuvamo omotačem 14->0. */
  body.page-id-9337 .section:not([class*="negic-skola-"]):has(.product-small) .section-content > .row > .col { padding-bottom: 0; }
  body.page-id-9337 .negic-skola-izdvajamo { padding-top: 8px !important; }
}

/* --- Landing „Galanterija" (strana 10419) — šablon = školski blok iznad, 2026-07-14.
   Isti P6 ritam razmaka sekcija; sekcije bez svoje klase (Kategorije, Brendovi) hvatamo
   preko :not([class*="negic-gal-"]), po uzoru na :not([class*="negic-skola-"]). */

/* Slike (uvod + radnja): zaobljene ivice kao ostale kartice sajta. */
body.page-id-10419 .negic-gal-uvod .img-inner,
body.page-id-10419 .negic-gal-radnja .img-inner { border-radius: var(--r); overflow: hidden; }

/* Sekcija radnje = PUNA traka preko celog ekrana, kao traka iza dva banera na
   naslovnoj (Milan 2026-07-14, druga runda; prva verzija — accent kartica — odbijena:
   „ista boja kao na prvoj strani i skroz levo i desno"). Isti full-bleed ::before
   trik i ISTA boja #F8F3EB kao .section:has(.negic-banners) niže u fajlu. */
body.page-id-10419 .negic-gal-radnja {
  position: relative !important;
  isolation: isolate;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
body.page-id-10419 .negic-gal-radnja::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: #F8F3EB;  /* topli pesak — identičan homepage traci */
  z-index: -1;
  pointer-events: none;
}
body.page-id-10419 .negic-gal-radnja .col { padding-bottom: 0 !important; }
@media (max-width: 849px) {
  body.page-id-10419 .negic-gal-radnja { padding-top: 26px !important; padding-bottom: 26px !important; }
  /* stacked: razmak između fotke i teksta */
  body.page-id-10419 .negic-gal-radnja .col:first-child { padding-bottom: 10px !important; }
}

/* Kontakt red radnje → beli čipovi-pilule (Milan 2026-07-15). Sekcija radnje je
   full-bleed pesak (#F8F3EB), pa beli čipovi „iskaču" s trake. Isti pilula jezik
   kao .negic-kchip na Komplet strani (bela pilula, tanka linija), samo sa SVG
   ikonicom umesto tačke. Stari mono/underline/nowrap red uklonjen. */
body.page-id-10419 .negic-gal-kontakt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
body.page-id-10419 .negic-kontakt-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid rgba(31,42,44,.10); border-radius: 999px;
  padding: 7px 14px; font-size: 13.5px; line-height: 1;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
  transition: border-color .15s, color .15s;
}
body.page-id-10419 .negic-kontakt-chip svg { opacity: .7; flex: 0 0 auto; }
/* Hover samo na link-čipovima (adresa, telefon, Instagram); vreme je <span>.
   Tekst ide na --brand-strong (teal-900) radi AA kontrasta na belom — NE sirovi
   --brand (vidi AA blok ~7527). */
body.page-id-10419 a.negic-kontakt-chip:hover { border-color: var(--brand); color: var(--brand-strong); }
body.page-id-10419 a.negic-kontakt-chip:hover svg { opacity: 1; }

/* Brendovi: 4 loga preko CELE širine — nasleđena mreža je 6 kolona (za 12 logoa
   na homepage), pa su 4 loga bila sabijena levo (Milan: „previše zbijeno"). */
body.page-id-10419 .negic-brandstrip--grid .negic-brand-logos { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 767px) {
  /* 2x2 umesto 3+1 siroče */
  body.page-id-10419 .negic-brandstrip--grid .negic-brand-logos { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}

/* Izdvajamo + trust: stegnuti razmaci (kao školski P4). */
body.page-id-10419 .product-small .box-text .price-wrapper { flex: 1 1 40px; min-width: 0; }
body.page-id-10419 .product-small .box-text .add-to-cart-button { margin-left: auto; }
body.page-id-10419 .negic-gal-izdvajamo { padding-bottom: 0 !important; }
body.page-id-10419 .negic-gal-izdvajamo .section-content > .row > .col { padding-bottom: 0 !important; }
/* Odmak od pune trake radnje iznad (Milan 2026-07-14, četvrta runda — OPTIČKO
   izjednačavanje): pravilo je gore == dole (zeleni okvir→footer = 50px, tvrde ivice).
   Geometrijskih 50 gore je OPTIČKI 58/55 jer glif „Z" počinje ~8px ispod box ivice
   (mereno pikselima sa snimka, alat poklon-optika.js) → padding 42 desktop / 45 mobilni
   da PRVO MASTILO bude na 50px od trake. */
body.page-id-10419 .negic-gal-trust-sec { padding-top: 42px !important; padding-bottom: 8px !important; }
@media (max-width: 849px) {
  body.page-id-10419 .negic-gal-trust-sec { padding-top: 45px !important; }
}
body.page-id-10419 .negic-gal-trust-sec .col { padding-top: 0 !important; padding-bottom: 0 !important; }
body.page-id-10419 #content { padding-bottom: 12px !important; }
body.page-id-10419 .negic-gal-uvod { padding-top: 14px !important; }
body.page-id-10419 .negic-gal-poklon { margin-bottom: 18px; }

@media (min-width: 850px) {
  /* vrh strane: h1 bliže meniju (kao školski P3/P6 desktop) */
  body.page-id-10419 #content { padding-top: 12px !important; }
  body.page-id-10419 .negic-gal-uvod { padding-top: 8px !important; padding-bottom: 18px !important; }

  /* Mreža pločica: 10 kategorija = 2x5 (default 3 kolone daje red-siroče 3+3+3+1).
     min-width:0 + prelom naslova su OBAVEZNI: bez toga grid ćelije ne mogu ispod
     min sadržaja pa se red PRELIJE van kontejnera (viđeno pri prvoj proveri). */
  body.page-id-10419 .negic-gal-kat { grid-template-columns: repeat(5, 1fr); gap: 12px; }
  body.page-id-10419 .negic-gal-kat .negic-promo-card { min-width: 0; padding: 12px 14px; gap: 10px; }
  body.page-id-10419 .negic-gal-kat .negic-promo-title { white-space: normal; font-size: 14px; line-height: 1.25; }
  /* Strelica NAPOLJE u 5-kol gustini: kartica sme da se skupi (min-width:0) ali sadržaj
     ne, pa strelica ispliva PREKO desne ivice (Milan prijavio). Kartica je ionako cela
     klik sa hoverom; mobilni je već krije. */
  body.page-id-10419 .negic-gal-kat .negic-promo-arrow { display: none; }

  /* Fotke nose sekciju: fiksna visina + cover crop (bez toga su niske pa sekcija
     deluje prazno — slika je gušća od teksta i sme da se kropuje, zid polica). */
  body.page-id-10419 .negic-gal-uvod .img-inner img { width: 100%; height: 320px; object-fit: cover; }
  body.page-id-10419 .negic-gal-radnja .img-inner img { width: 100%; height: 300px; object-fit: cover; }

  /* kolona-omotač: uvod + Kategorije + Brendovi (Izdvajamo/trust drže pravila iznad) */
  body.page-id-10419 .negic-gal-uvod .section-content > .row > .col,
  body.page-id-10419 .section:not([class*="negic-gal-"]) .section-content > .row > .col { padding-bottom: 20px; }

  /* Izdvajamo: blago odvojeno od Brendova (Milan 2026-07-14: „malo, ali ne mnogo")
     — bilo 4 (content-gap 42), sada 20 (content-gap ~58, P6 ritam).
     Donje granice (Milan 2026-07-16): razmak iznad = razmaku ispod granice, i UKUPNO
     u ritmu strane (~58 kao gornje sekcije) — zato 29+29 na OBE granice (Izdvajamo↔
     Fashion i Fashion↔Za poklon). Kartice su pre toga ležale na granicu (0+40),
     a Fashion je imao 40/40 i trust 42 (gap 80-82, van ritma). */
  body.page-id-10419 .negic-gal-izdvajamo { padding-top: 20px !important; padding-bottom: 29px !important; }
  body.page-id-10419 .negic-gal-radnja { padding-top: 29px !important; padding-bottom: 29px !important; }
  body.page-id-10419 .negic-gal-trust-sec { padding-top: 29px !important; }
}

@media (min-width: 850px) and (max-width: 1149px) {
  /* srednje širine (laptop/tablet pejzaž): kompaktnija kartica da jednoredne reči
     („Novčanici", „Kišobrani") ne budu isečene u 5-kol mreži */
  body.page-id-10419 .negic-gal-kat .negic-promo-card { padding: 10px 12px; gap: 8px; }
  body.page-id-10419 .negic-gal-kat .negic-promo-img { width: 44px; height: 44px; }
}

@media (max-width: 849px) {
  /* mreža kategorija = 2 kolone pune širine, kompaktnije kartice (kao školski P1) */
  body.page-id-10419 .negic-gal-kat { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.page-id-10419 .negic-gal-kat .negic-promo-card { gap: 10px; padding: 10px 12px; }
  body.page-id-10419 .negic-gal-kat .negic-promo-img { width: 46px; height: 46px; }
  body.page-id-10419 .negic-gal-kat .negic-promo-title { font-size: 13.5px; line-height: 1.2; }
  body.page-id-10419 .negic-gal-kat .negic-promo-arrow { display: none; }

  /* section-head teče punom širinom (h2 ceo red, link ispod), kao školski P2 */
  body.page-id-10419 .negic-section-head { flex-wrap: wrap; gap: 2px 20px; align-items: baseline; margin-bottom: 16px; }
  body.page-id-10419 .negic-section-head h2 { flex: 1 1 100%; }

  /* Donje granice (Milan 2026-07-16): simetrično i u ritmu strane — mobilni
     20+20 (=40, kao gornji „section → Izdvajamo" razmak). */
  body.page-id-10419 .negic-gal-izdvajamo { padding-bottom: 20px !important; }
  body.page-id-10419 .negic-gal-radnja { padding-top: 20px !important; padding-bottom: 20px !important; }
  body.page-id-10419 .negic-gal-trust-sec { padding-top: 20px !important; }

  /* kartice proizvoda: uži bočni padding wrapper kolone (kao školski P5 dopuna) */
  body.page-id-10419 .section-content > .row > .col { padding-left: 4px; padding-right: 4px; }

  /* Task 7 (2026-07-16): product mreže pune širine kao u prodavnici (isti lanac i
     razlog kao školski Task 7 blok iznad). Product .row je 342px zbog dubljeg
     ugnježdavanja; -10 → -29 marginu ga vraća na 380px (kartice 190/170, razmak
     cena→dugme ~21px). Samo Flatsome product mreže (.row sa .product-small). */
  body.page-id-10419 .col-inner > .row:has(.product-small) {
    margin-left: -29px !important;
    margin-right: -29px !important;
  }

  /* uvod: slika je ISPOD teksta (kolone se slažu po redosledu u sadržaju) i ne
     sme da bude previsoka — hero fotka je 1800x1412 pa bi progutala ceo ekran. */
  body.page-id-10419 .negic-gal-uvod .img-inner img { max-height: 40vh; object-fit: cover; width: 100%; }

  /* vrh strane na mobilnom (kao školski P3) */
  body.page-id-10419 .negic-gal-uvod { padding-top: 32px !important; padding-bottom: 10px !important; }
  body.page-id-10419 .negic-gal-uvod .negic-pagehead { padding-top: 2px; margin-top: 0; }

  /* P6 ritam: stegni slojeve praznine (kao školski mobilni blok) */
  body.page-id-10419 .negic-gal-uvod .section-content > .row > .col,
  body.page-id-10419 .section:not([class*="negic-gal-"]) .section-content > .row > .col { padding-bottom: 14px; }
  body.page-id-10419 .section:not([class*="negic-gal-"]) { padding-top: 10px !important; padding-bottom: 10px !important; }
  /* blago odvojeno od Brendova i na mobilnom (bilo 8 → content-gap 32; sada ~40) */
  body.page-id-10419 .negic-gal-izdvajamo { padding-top: 16px !important; }
}

/* Traka ka galanterija landingu na vrhu kategorije (negic_gal_kategorija_traka). */
.negic-gal-cat-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 18px;
  background: var(--brand-tint-2);
  border-radius: var(--r);
  padding: 12px 18px;
  margin: 4px 0 18px;
  font-size: 14px; color: var(--ink-2);
}
.negic-gal-cat-strip b { color: var(--ink); font-weight: 600; }
.negic-gal-cat-strip__cta {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--brand-strong); font-weight: 600; white-space: nowrap;
}
.negic-gal-cat-strip:hover .negic-gal-cat-strip__cta { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 549px) {
  .negic-gal-cat-strip { flex-wrap: wrap; padding: 12px 14px; }
}

/* --- Landing „Knjige" (strana 10441) — šablon = galanterijski blok iznad, 2026-07-15.
   Isti P6 ritam razmaka sekcija; sekcije bez svoje klase (Kategorije, Lektira, Izdavači)
   hvatamo preko :not([class*="negic-knj-"]), kao kod galanterije. Radnja/kontakt sekcije
   ovde nema, pa su ta pravila iz galanterijskog bloka izostavljena. */

/* Uvod „izlog" (Task 5e, 2026-07-15; VRAĆENO u Tasku 5g — Milan: „na glavnu sliku
   vrati luk i policu", pošto ih je 5f bio skinuo po ranijem nesporazumu): slika u
   obliku luka (izlog knjižare) sa daskom-policom ispod — motiv police kreće već od
   uvoda. Radius luka po širini u @media blokovima niže. Omotač .img nosi policu
   (::after), .img-inner drži krop (overflow:hidden). */
body.page-id-10441 .negic-knj-uvod .img { position: relative; }
body.page-id-10441 .negic-knj-uvod .img-inner {
  overflow: hidden;
  /* meka, spuštena senka „izloga" — prati oblik luka */
  box-shadow: 0 16px 28px -14px rgba(31, 42, 44, .34);
}
/* Daska ispod slike = ISTA polica kao u sekciji Kategorije (8px, isti gradient + tamnija
   donja ivica + senka). .img-inner je overflow:hidden, pa policu nosi omotač .img. */
body.page-id-10441 .negic-knj-uvod .img::after {
  content: "";
  position: absolute;
  left: -6px; right: -6px; bottom: -8px;
  height: 8px;
  background: linear-gradient(180deg, #ecdcb8 0%, #e2cd9f 55%, #d2b784 100%);
  border-bottom: 2px solid #b3925c;
  box-shadow: 0 3px 4px rgba(60, 45, 20, .16);
  z-index: 2;
}
/* Žuti marker iza „blizu 300 naslova" — kontinuitet sa hero slajdom „Knjige" gde je broj
   300 na istom žuto-zelenom polju (boja pipetom sa hero slike: #BFDC53). Tekst ostaje tamno
   mastilo; kontrast tamno-na-žuto ≈ 8.7:1 (> 4.5:1). box-decoration-break: uredan prelom. */
body.page-id-10441 .negic-knj-marker {
  background: #BFDC53;
  color: var(--ink);
  padding: 0 5px;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Eyebrow unutar pagehead-a: base „.negic-pagehead > p" (veći font/ink-2) bi ga inače
   pregazio — vraćamo malu tirkiznu labelu (važi na svim širinama). */
body.page-id-10441 .negic-knj-uvod .negic-pagehead > p.negic-eyebrow {
  font-size: 12px;
  color: var(--negic-primary-dark);
  margin: 0 0 12px;
  max-width: none;
}

/* Brendovi (izdavači): 4 loga preko CELE širine — razlog kao kod galanterije iznad
   (nasleđena 6-kol mreža za 12 logoa sabija 4 loga levo). */
body.page-id-10441 .negic-brandstrip--grid .negic-brand-logos { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 767px) {
  /* 2x2 umesto 3+1 siroče */
  body.page-id-10441 .negic-brandstrip--grid .negic-brand-logos { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}

/* Izdvajamo + trust: stegnuti razmaci (kao školski P4). */
body.page-id-10441 .product-small .box-text .price-wrapper { flex: 1 1 40px; min-width: 0; }
body.page-id-10441 .product-small .box-text .add-to-cart-button { margin-left: auto; }
body.page-id-10441 .negic-knj-izdvajamo { padding-bottom: 0 !important; }
body.page-id-10441 .negic-knj-izdvajamo .section-content > .row > .col { padding-bottom: 0 !important; }
/* Odmak trust sekcije od Izdvajamo iznad: OPTIČKO izjednačavanje (prvo mastilo na 50px
   od sekcije iznad, glif „Z" počinje ~8px ispod box ivice) — puna priča u galanterijskom
   bloku iznad; iste vrednosti. */
body.page-id-10441 .negic-knj-trust-sec { padding-top: 42px !important; padding-bottom: 8px !important; }
@media (max-width: 849px) {
  body.page-id-10441 .negic-knj-trust-sec { padding-top: 45px !important; }
}
body.page-id-10441 .negic-knj-trust-sec .col { padding-top: 0 !important; padding-bottom: 0 !important; }
body.page-id-10441 #content { padding-bottom: 12px !important; }
body.page-id-10441 .negic-knj-uvod { padding-top: 14px !important; }
body.page-id-10441 .negic-knj-poklon { margin-bottom: 18px; }

/* Lektira po razredima = PUNA topla traka preko celog ekrana (Task 5b, 2026-07-15).
   Isti full-bleed ::before trik i ISTA boja #F8F3EB kao galanterija radnja / homepage
   traka. Sekcija je u sadržaju dobila klasu negic-knj-lektira, pa ispada iz
   :not([class*="negic-knj-"]) ritma — razmaci se ovde drže eksplicitno (P6). */
body.page-id-10441 .negic-knj-lektira {
  position: relative !important;
  isolation: isolate;
  /* pt/pb podešeni da content-gap (poslednja pločica → h2 / poslednji proizvod → Izdavači)
     ostane u P6 ritmu ~58px desktop (isto kao razmak normalnih sekcija). */
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
body.page-id-10441 .negic-knj-lektira::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: #F8F3EB;  /* topli pesak — identičan homepage/galanterija traci */
  z-index: -1;
  pointer-events: none;
}
/* col ne nosi donji razmak — traka sama drži padding. */
body.page-id-10441 .negic-knj-lektira .section-content > .row > .col { padding-bottom: 0 !important; }
@media (max-width: 849px) {
  body.page-id-10441 .negic-knj-lektira { padding-top: 16px !important; padding-bottom: 14px !important; }
}

@media (min-width: 850px) {
  /* vrh strane: h1 bliže meniju (kao školski P3/P6 desktop) */
  body.page-id-10441 #content { padding-top: 12px !important; }
  body.page-id-10441 .negic-knj-uvod { padding-top: 8px !important; padding-bottom: 18px !important; }

  /* Mreža pločica: kategorije = 2x5 (default 3 kol daje red-siroče). min-width:0 +
     prelom naslova su OBAVEZNI: bez toga grid ćelije ne mogu ispod min sadržaja pa se
     red PRELIJE van kontejnera (gotcha, isto kao galanterija iznad). */
  /* „Korice na polici" v2 (Task 5c, 2026-07-15, Milanova korekcija): JEDNA neprekinuta
     drvena polica po redu, korice stoje na njoj, BEZ okvira/kartice/niše oko pojedinačne
     knjige. Kartica je providna; segment police (::after) svake ćelije se vizuelno spaja
     sa susednim u jednu liniju. SAMO .negic-knj-kat scope. */
  /* row-gap znatno veći od column-gap-a (Task 5d): naslov gornjeg reda ne sedi na
     koricama donjeg reda. Column-gap OSTAJE 14px jer prepust police (::after ±8px)
     zavisi od njega — ne dirati bez usklađivanja ::after. */
  /* BEZ overflow:hidden (Task 5f, Milanova korekcija): sečenje je pravilo jake uspravne
     linije na oba kraja reda (odsečena drop-shadow korica) i ravno seklo vrh nagnute
     korice na hover. Prepust daske na ivicama reda rešava se kapovanjem krajnjih
     segmenata (nth-child pravila ispod ::after), ne sečenjem mreže. */
  /* 2026-08-04: 5 -> 4 kolone. Posle gašenja kategorija „Dečije knjige" i „Bojanke" ostalo
     je 8 pločica, pa je 5 kolona davalo red 5+3 sa policom koja se prekida na sredini donjeg
     reda. Sa 4 kolone je 4+4 i obe police idu punom širinom. Column-gap OSTAJE 14px jer o
     njemu zavisi prepust daske (::after ±8px); menja se samo broj kolona i nth-child kapovanje. */
  body.page-id-10441 .negic-knj-kat { grid-template-columns: repeat(4, 1fr); gap: 40px 14px; }
  /* Kartica bez ikakvog okvira: providna, bez ivice, bez senke, bez padding-a. Base
     .negic-promo-card daje var(--card) pozadinu + border + hover senku/transform — sve
     to ovde neutrališemo. */
  body.page-id-10441 .negic-knj-kat .negic-promo-card {
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  body.page-id-10441 .negic-knj-kat .negic-promo-card:hover { transform: none; box-shadow: none; }
  /* Cover zona: prazan blok fiksne visine, bez pozadine/niše/okvira/aspect-ratio; korica
     poravnata DOLE i centrirana pa „stoji" na polici. Sama polica je ::after. */
  body.page-id-10441 .negic-knj-kat .negic-promo-img {
    position: relative;
    width: 100%;
    /* 200 -> 230px uz prelazak na 4 kolone (2026-08-04): ćelija je porasla sa ~217 na
       ~274px, a korica se skalira po VISINI, pa bi na istih 200px pala sa ~65% na ~51%
       širine ćelije i knjige bi delovale razmaknuto. Na 230px se vraća na ~59%. */
    height: 230px;
    /* Knjige stoje NA dasci, ne tonu u nju: daska je 12px od dna zone, korice se
       dižu za 9px pa preklapaju dasku samo ~3px (ukop, 2026-07-15, Milanova primedba
       „knjige zaklonjene odozdo" posle podebljanja daske). */
    padding: 0 0 9px;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  /* Korica: cela u kadru, prirodno varira u širini kao prava knjiga (ne kropuje se).
     max-height ograničava visinu, max-width sprečava da široke korice dodirnu susednu.
     drop-shadow prati siluetu korice (ne box) — meka, spuštena senka daje dubinu i
     „baca" senku knjige na policu (Task 5d). */
  body.page-id-10441 .negic-knj-kat .negic-promo-img img,
  body.page-id-10441 .negic-knj-kat .negic-promo-img .negic-promo-photo {
    width: auto;
    height: auto;
    max-height: 100%;
    max-width: 92%;
    object-fit: contain;
    /* Dvoslojna senka (2026-07-15, Milan + UX): KONTAKTNA kratka uz dasku (prizemljuje
       knjigu) + AMBIJENTALNA meka (dubina). Zbir tamnoće ≈ kao stara jednoslojna. */
    filter: drop-shadow(0 2px 2px rgba(31, 42, 44, .28)) drop-shadow(0 10px 14px rgba(31, 42, 44, .14));
  }
  /* Polica: JEDAN neprekinut greben tik na dnu cover zone. Proširen levo/desno za pola
     COLUMN grid gap-a + 1px (gap 14px → 8px) da se segmenti susednih ćelija preklope u
     jednu liniju bez šava. BEZ
     border-radius (zaobljenje bi prekinulo liniju). Debljina daske (Task 5d): visina 8px,
     linear-gradient svetlo→tamnije po visini + tamnija donja ivica (border-bottom) daju
     utisak debljine ploče, ne samo trake boje. Ton pesak-drvo, tamniji od trake #F8F3EB;
     senka ispod odvaja policu od pozadine. */
  body.page-id-10441 .negic-knj-kat .negic-promo-img::after {
    content: "";
    position: absolute;
    left: -8px; right: -8px; bottom: 0;
    /* 8px → 12px na desktopu (2026-07-15, Milan + UX procena: korice ~200px,
       12px ≈ 6% visine knjige = čita se kao daska, ne kao šina; mobilni ostaje 8px). */
    height: 12px;
    background: linear-gradient(180deg, #ecdcb8 0%, #e2cd9f 55%, #d2b784 100%);
    border-bottom: 3px solid #b3925c;
    box-shadow: 0 4px 5px rgba(60, 45, 20, .18);
  }
  /* Krajevi reda (Task 5f): prepust daske van mreže se KAPUJE na prvoj/poslednjoj ćeliji
     reda (4 kolone → 4n+1 / 4n) umesto da se seče overflow-om cele mreže — polica se
     završava tačno na ivici reda, a senke korica i nagnut hover vrh ostaju nesečeni.
     ⚠️ Broj u nth-child MORA da prati grid-template-columns iznad; ako se razmimoiđu,
     dobija se rupa u polici na prelomu reda i daska koja štrči van mreže. */
  body.page-id-10441 .negic-knj-kat .negic-promo-card:nth-child(4n+1) .negic-promo-img::after { left: 0; }
  body.page-id-10441 .negic-knj-kat .negic-promo-card:nth-child(4n) .negic-promo-img::after { right: 0; }
  /* Izričito vraćanje prepusta na sve OSTALE ćelije (2026-08-04). Bez ovoga zaostalo
     kapovanje za drugi broj kolona preživi u keširanom kritičnom CSS-u (LiteSpeed
     `litespeed-ccss` inline blok) i probije, jer nth-child ima veću specifičnost od baznog
     `::after { left:-8px; right:-8px }`. Tako je posle prelaska 5->4 kolone kartica 5
     zadržala staro `5n` (right:0), a kartica 6 staro `5n+1` (left:0) i polica je dobila
     rupu od 14px na spoju 5-6. `:not()` nosi specifičnost svog argumenta, pa ova pravila
     poništavaju svako zaostalo kapovanje na ćeliji koja nije kraj reda. */
  body.page-id-10441 .negic-knj-kat .negic-promo-card:not(:nth-child(4n+1)) .negic-promo-img::after { left: -8px; }
  body.page-id-10441 .negic-knj-kat .negic-promo-card:not(:nth-child(4n)) .negic-promo-img::after { right: -8px; }
  /* Naslov ispod police, centriran, puna širina; prelom normalnih reči dozvoljen
     (break-word, NE anywhere). */
  body.page-id-10441 .negic-knj-kat .negic-promo-title {
    white-space: normal;
    overflow-wrap: break-word;
    font-size: 14px;
    line-height: 1.25;
    margin-top: 14px;
  }
  /* Hover „naginjanje knjige sa police" (Task 5e, 2026-07-15): korica se blago nagne —
     donji levi ugao ostaje na dasci (transform-origin: bottom left), desna strana se malo
     odlepi (rotacija, NE translacija na gore — podizanje je ranije odbijeno), senka se
     produbi. transition i na img da hover-out nije nagli skok. Naslov u brand boji ostaje. */
  body.page-id-10441 .negic-knj-kat .negic-promo-img img,
  body.page-id-10441 .negic-knj-kat .negic-promo-img .negic-promo-photo {
    transform-origin: bottom left;
    transition: transform .18s ease, filter .18s ease;
  }
  body.page-id-10441 .negic-knj-kat .negic-promo-card:hover .negic-promo-img img,
  body.page-id-10441 .negic-knj-kat .negic-promo-card:hover .negic-promo-img .negic-promo-photo {
    transform: rotate(-2deg);
    /* na hover kontaktna ostaje, ambijentalna se produbi (knjiga „nagnuta ka tebi") */
    filter: drop-shadow(0 2px 2px rgba(31, 42, 44, .30)) drop-shadow(0 12px 18px rgba(31, 42, 44, .22));
  }
  body.page-id-10441 .negic-knj-kat .negic-promo-title { transition: color .15s var(--ease); }
  body.page-id-10441 .negic-knj-kat .negic-promo-card:hover .negic-promo-title { color: var(--brand); }
  /* Kartica je ceo klik — strelica se ne prikazuje. */
  body.page-id-10441 .negic-knj-kat .negic-promo-arrow { display: none; }

  /* Fotka nosi uvod: fiksna visina + cover crop. Uvodna slika je USPRAVNA (730x1161),
     pa krop gleda ka DONJEM delu (naslagane knjige, ne prazan vrh) preko object-position.
     Fina vrednost (Task 5, 2026-07-15): center 62% — puni okvir šarenim sredinom stapa
     (pink/tirkiz/krem/oker) + merdevine u kadru, bez sive praznine gore-desno koju je
     davao 70%; provereno na 1366 i mobilnom (isti kadar dobar). */
  body.page-id-10441 .negic-knj-uvod .img-inner img { width: 100%; height: 320px; object-fit: cover; object-position: center 62%; }

  /* „Izlog" luk (Task 5e, vraćen u 5g): visok polukružni vrh (merdevine ulaze u luk,
     knjige na dnu), blago zaobljeno dno (12px) da se poklopi sa daskom-policom ispod. */
  body.page-id-10441 .negic-knj-uvod .img-inner { border-radius: 999px 999px 12px 12px; }
  /* Daska ispod uvodne fotke prati desktop policu kategorija: 12px (2026-07-15). */
  body.page-id-10441 .negic-knj-uvod .img::after {
    bottom: -12px;
    height: 12px;
    border-bottom-width: 3px;
    box-shadow: 0 4px 5px rgba(60, 45, 20, .18);
  }

  /* Tekst kolona: LEVO poravnanje (ne školski centrirano), h1 krupniji, kraći red pasusa —
     „izlog" umesto simetričnog školskog šablona. */
  body.page-id-10441 .negic-knj-uvod .negic-pagehead {
    text-align: left;
    max-width: none;
    margin: 0;
    padding: 4px 0 0;
  }
  body.page-id-10441 .negic-knj-uvod .negic-pagehead h1 { font-size: 46px; line-height: 1.08; }
  body.page-id-10441 .negic-knj-uvod .negic-pagehead > p { margin: 16px 0 0; max-width: 46ch; }

  /* kolona-omotač: uvod + Kategorije + Lektira + Izdavači (Izdvajamo/trust drže pravila iznad) */
  body.page-id-10441 .negic-knj-uvod .section-content > .row > .col,
  body.page-id-10441 .section:not([class*="negic-knj-"]) .section-content > .row > .col { padding-bottom: 20px; }

  /* Izdvajamo: blago odvojeno od Izdavača (P6 ritam, content-gap ~58). */
  body.page-id-10441 .negic-knj-izdvajamo { padding-top: 20px !important; }
}

/* Napomena (Task 5b, 2026-07-15): kompaktni blok @media 850–1149px (padding/ikona 44px)
   UKINUT — nova uspravna „korice na polici" kartica važi na svim širinama ≥850px. */

@media (max-width: 849px) {
  /* „Korice na polici" i na mobilnom (Task 5h, 2026-07-15): Milan tražio police i na
     telefonu, 2 po polici. Isti obrazac kao desktop (≥850px), samo skaliran — providna
     kartica bez okvira, korica stoji na neprekinutoj drvenoj polici, naslov centriran
     ispod. 2 kolone → za 10 kategorija = 5 čistih redova (sa 3 kolone ostaje red-siroče).
     Kapovanje krajeva reda ide na 2n (ne 5n kao desktop, jer su 2 kolone).
     PAŽNJA: base .negic-promo-card/.negic-promo-img (border, background, overflow:hidden,
     object-fit:cover, grid place-items) važe na svim širinama, pa se sve te neutralizacije
     MORAJU ponoviti i ovde — ne samo dodati skalirane vrednosti. Zamenjuje staru kompaktnu
     horizontalnu listu (ikona 46px + tekst). SAMO .negic-knj-kat scope. */
  /* row-gap (32px) znatno veći od column-gap-a (16px): naslov gornjeg reda ne sedi na
     koricama donjeg. Column-gap 16px veže prepust police (::after ±9px) — ne dirati bez
     usklađivanja ::after. */
  body.page-id-10441 .negic-knj-kat { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  /* Kartica providna, bez okvira/senke/paddinga, uspravno slaganje (kao desktop). */
  body.page-id-10441 .negic-knj-kat .negic-promo-card {
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  body.page-id-10441 .negic-knj-kat .negic-promo-card:hover { transform: none; box-shadow: none; }
  /* Touch feedback (Task 5j, 2026-07-15, Milanovo pitanje „nema efekta na mobilnom"):
     hover na dodirnim ekranima ne postoji, pa korica na TAP (:active) dobija kratak
     „pritisak" — blago se skupi dok je prst na njoj. Suptilno, bez naginjanja. */
  body.page-id-10441 .negic-knj-kat .negic-promo-card:active .negic-promo-img img,
  body.page-id-10441 .negic-knj-kat .negic-promo-card:active .negic-promo-img .negic-promo-photo {
    transform: scale(.96);
    transform-origin: bottom center;
  }
  /* transition na baznom stanju (ne samo u :active) da i otpuštanje bude animirano,
     bez skoka (nalaz finalnog pregleda). */
  body.page-id-10441 .negic-knj-kat .negic-promo-img img,
  body.page-id-10441 .negic-knj-kat .negic-promo-img .negic-promo-photo {
    transition: transform .12s ease;
  }
  /* Cover zona: prazan blok fiksne visine (~170px), korica poravnata DOLE i centrirana pa
     „stoji" na polici. overflow:visible OBAVEZAN (base ima hidden) da prepust daske i
     drop-shadow korica ne budu odsečeni. */
  body.page-id-10441 .negic-knj-kat .negic-promo-img {
    position: relative;
    width: 100%;
    height: 170px;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  /* Korica: cela u kadru (contain, ne cover), prirodno varira u širini kao prava knjiga;
     max-width:90% sprečava dodir susedne. Ista drop-shadow kao desktop. Base ima
     width/height:100% + object-fit:cover — override je obavezan. */
  body.page-id-10441 .negic-knj-kat .negic-promo-img img,
  body.page-id-10441 .negic-knj-kat .negic-promo-img .negic-promo-photo {
    width: auto;
    height: auto;
    max-height: 100%;
    max-width: 90%;
    object-fit: contain;
    /* dvoslojna senka kao desktop (kontaktna + ambijentalna), 2026-07-15 */
    filter: drop-shadow(0 2px 2px rgba(31, 42, 44, .28)) drop-shadow(0 8px 12px rgba(31, 42, 44, .14));
  }
  /* Polica: JEDAN neprekinut greben tik na dnu cover zone. Proširen levo/desno za pola
     column gap-a + 1px (gap 16px → 9px) da se segmenti susednih ćelija preklope u jednu
     liniju bez šava. Isti stil ploče kao desktop (8px gradient + tamnija donja ivica +
     senka). */
  body.page-id-10441 .negic-knj-kat .negic-promo-img::after {
    content: "";
    position: absolute;
    left: -9px; right: -9px; bottom: 0;
    height: 8px;
    background: linear-gradient(180deg, #ecdcb8 0%, #e2cd9f 55%, #d2b784 100%);
    border-bottom: 2px solid #b3925c;
    box-shadow: 0 3px 4px rgba(60, 45, 20, .16);
  }
  /* Krajevi reda (2 kolone): prva ćelija reda (2n+1) kapuje levi prepust, poslednja (2n)
     desni — polica se završava tačno na ivici reda, a linija ostaje neprekinuta na sredini
     i senke korica ostaju nesečene. */
  body.page-id-10441 .negic-knj-kat .negic-promo-card:nth-child(2n+1) .negic-promo-img::after { left: 0; }
  body.page-id-10441 .negic-knj-kat .negic-promo-card:nth-child(2n) .negic-promo-img::after { right: 0; }
  /* Naslov ispod police, centriran, puna širina; prelom normalnih reči (break-word). */
  body.page-id-10441 .negic-knj-kat .negic-promo-title {
    white-space: normal;
    overflow-wrap: break-word;
    font-size: 13.5px;
    line-height: 1.25;
    margin-top: 12px;
  }
  /* Kartica je ceo klik — strelica se ne prikazuje. */
  body.page-id-10441 .negic-knj-kat .negic-promo-arrow { display: none; }

  /* section-head teče punom širinom (h2 ceo red, link ispod), kao školski P2 */
  body.page-id-10441 .negic-section-head { flex-wrap: wrap; gap: 2px 20px; align-items: baseline; margin-bottom: 16px; }
  body.page-id-10441 .negic-section-head h2 { flex: 1 1 100%; }

  /* kartice proizvoda: uži bočni padding wrapper kolone (kao školski P5 dopuna) */
  body.page-id-10441 .section-content > .row > .col { padding-left: 4px; padding-right: 4px; }

  /* Task 7 (2026-07-16): product mreže pune širine kao u prodavnici (isti lanac i
     razlog kao školski Task 7 blok iznad). Važi za SVE product mreže strane —
     Izdvajamo, Lektira po razredima i Kompleti — jer sve koriste .row sa
     .product-small; -10 → -29 marginu ih vraća na 380px (kartice 190/170, razmak
     cena→dugme ~21px). Pločice kategorija (.negic-knj-kat) su grid pa ostaju. */
  body.page-id-10441 .col-inner > .row:has(.product-small) {
    margin-left: -29px !important;
    margin-right: -29px !important;
  }

  /* uvod: slika je ISPOD teksta (kolone se slažu po redosledu) i ne sme biti previsoka —
     uspravna fotka (730x1161) bi inače progutala ekran; crop ka dnu (object-position)
     kao na desktopu. */
  /* Visina smanjena 40vh → 250px (Task 5i, 2026-07-15, Milan + UX procena: fotka je
     dekorativna, ne sme da gura „Kupovinu po kategorijama" duboko ispod prvog ekrana;
     cap 34vh čuva niske pejzažne ekrane). */
  body.page-id-10441 .negic-knj-uvod .img-inner img { height: 250px; max-height: 34vh; object-fit: cover; width: 100%; object-position: center 62%; }
  /* „Izlog" luk skaliran za mobilni (niži vrh, ~120px), ravno dno + daska ispod (Task 5e,
     vraćen u 5g). */
  body.page-id-10441 .negic-knj-uvod .img-inner { border-radius: 120px 120px 12px 12px; }

  /* vrh strane na mobilnom (kao školski P3) */
  body.page-id-10441 .negic-knj-uvod { padding-top: 32px !important; padding-bottom: 10px !important; }
  body.page-id-10441 .negic-knj-uvod .negic-pagehead { padding-top: 2px; margin-top: 0; }

  /* Eyebrow u jednom redu na uskim ekranima (bug 2026-07-15, Milan na iPhone 390px):
     tekst se prelamao u 2 reda pa je crtica (align-items:center) padala „niže i
     levije". Sam sklanjanje crtice NIJE dovoljno — tekst na 12px mono sa .14em
     tracking-om je ~320px, a kolona 322 (izmereno). Zato: crtica sklonjena +
     11px/.08em → tekst ~270px, staje i na 360px telefonima. */
  body.page-id-10441 .negic-knj-uvod .negic-eyebrow::before { display: none; }
  body.page-id-10441 .negic-knj-uvod .negic-eyebrow { font-size: 11px; letter-spacing: .08em; }

  /* P6 ritam: stegni slojeve praznine (kao školski mobilni blok) */
  body.page-id-10441 .negic-knj-uvod .section-content > .row > .col,
  body.page-id-10441 .section:not([class*="negic-knj-"]) .section-content > .row > .col { padding-bottom: 14px; }
  body.page-id-10441 .section:not([class*="negic-knj-"]) { padding-top: 10px !important; padding-bottom: 10px !important; }
  /* blago odvojeno od Izdavača i na mobilnom */
  body.page-id-10441 .negic-knj-izdvajamo { padding-top: 16px !important; }
}

/* --- Dva banera (dizajn .banners / .banner): Kožna galanterija + Opremi se za školu --- */
.negic-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.negic-banner {
  display: block; text-align: left;
  background: var(--brand-tint-2);
  /* Providna tamna ivica umesto --line-2 (2026-07-04): --line-2 je hladna skoro-bela
     pa nestaje na pesku #F1E8D7, a Galanterija packshot je iste valere kao pozadina.
     Senka u mirovanju = isti obrazac kao .negic-katcard i product kartice. */
  border: 1px solid rgba(31, 42, 44, .09);
  border-radius: var(--r); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.negic-banner:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* Tastaturni fokus: brendirani ring (isti obrazac kao FAQ/TOC), umesto sirovog browser outline-a */
.negic-banner:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.negic-banner-img {
  display: block; aspect-ratio: 16 / 8.2; position: relative; overflow: hidden;
  background: var(--tint, var(--brand-tint));
}
.negic-banner-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.negic-banner-txt { display: block; padding: 20px 24px 24px; }
.negic-banner-txt b {
  font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 1.2;
  color: var(--brand-strong); display: block;
}
.negic-banner-txt b .negic-svg-icon { width: 17px; height: 17px; color: var(--brand); vertical-align: middle; margin-left: 6px; transition: transform .18s var(--ease); }
/* Strelica klizne udesno na hover — isti mikro-pokret kao promo kartice */
.negic-banner:hover .negic-banner-txt b .negic-svg-icon { transform: translateX(3px); }
.negic-banner-txt span { display: block; font-size: 15px; color: var(--ink-2); margin-top: 5px; }
@media (max-width: 749px) { .negic-banners { grid-template-columns: 1fr; } }

/* --- "Brendovi u našoj ponudi" — frameless: bez okvira sekcije i bez ramova logoa,
   samo klikabilni logoi + "Svi brendovi" ispod (na pozadini sajta). --- */
.negic-brandstrip--plain {
  background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 18px;   /* stretch: section-head puna širina (link desno) */
}
.negic-brandstrip--plain .negic-section-head { margin: 0; }
/* Fallback dok brend nema logo: ime kao pločica (font naslova). */
.negic-brand-logo-txt { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--ink-2); letter-spacing: -0.01em; }
.negic-brandstrip--plain .negic-brand-logo-tile:hover .negic-brand-logo-txt { color: var(--brand); }
.negic-eyebrow--norule::before { display: none !important; }
.negic-brand-all {
  font-family: var(--font-head); font-weight: 700; color: var(--brand); font-size: 14px;
  display: inline-flex; gap: 6px; align-items: center; white-space: nowrap;
}
.negic-brand-all:hover { color: var(--brand-strong); }
.negic-brand-all .negic-svg-icon { width: 15px; height: 15px; margin: 0; }
/* 12 najznačajnijih brendova u 2 reda × 6 (desktop). Logoi normalizovani na istu
   maksimalnu visinu i centrirani u ćeliji; reflow 4/3/2 na manjim ekranima. */
.negic-brandstrip--grid .negic-brand-logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 36px 28px;
  align-items: center;
  justify-items: center;
  width: 100%;
}
.negic-brandstrip--grid .negic-brand-logo-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 54px;
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0;
  padding: 0; transition: opacity .18s, transform .18s;
}
.negic-brandstrip--grid .negic-brand-logo-tile:hover { box-shadow: none !important; transform: translateY(-2px); }
.negic-brandstrip--grid .negic-brand-logo-tile img { max-height: 52px; max-width: 150px; width: auto; height: auto; object-fit: contain; }
/* Logoi utišani u grayscale da 12 raznobojnih logoa ne viče pred footer;
   boja se vraća na hover (isti tretman kao brend kartice na /brendovi). */
.negic-brandstrip--grid .negic-brand-logo-tile img {
  filter: grayscale(100%);
  opacity: .72;
  transition: filter .2s ease, opacity .2s ease;
}
.negic-brandstrip--grid .negic-brand-logo-tile:hover img { filter: none; opacity: 1; }
@media (max-width: 1023px) {
  .negic-brandstrip--grid .negic-brand-logos { grid-template-columns: repeat(4, 1fr); gap: 30px 20px; }
}
@media (max-width: 767px) {
  .negic-brandstrip--grid .negic-brand-logos { grid-template-columns: repeat(3, 1fr); gap: 26px 16px; }
  .negic-brandstrip--grid .negic-brand-logo-tile { height: 46px; }
  .negic-brandstrip--grid .negic-brand-logo-tile img { max-height: 44px; max-width: 110px; }
}
@media (max-width: 479px) {
  .negic-brandstrip--grid .negic-brand-logos { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
}

/* Mobile: ukloni duplu pretragu — zadrži samo onu u hamburger meniju (off-canvas),
   sakrij header search ikonu pored korpe. */
@media (max-width: 849px) {
  li.header-search.header-search-dropdown,
  .header-main li.header-search-dropdown { display: none !important; }
}

/* Hero bliže nav traci: nav je chrome pa ne nosi ritam sekcija; ukupan razmak
   54px (24 sekcija + 30 page-wrapper) → 30px, slajder dobija fold (2026-07-04). */
.home .negic-hero-sec { padding-top: 0 !important; }
/* Mobilni: hero ne sme da se lepi za traku iznad — gornji razmak ~ jednak onom ispod
   (do „Kupovina po odeljenju"). Desktop ostaje 0 (fold). (Milan 2026-07-04) */
@media (max-width: 849px) {
  .home .negic-hero-sec { padding-top: 22px !important; }
}

/* Poslednja sekcija (Brendovi) — zbij razmak do footera (bio ~110px) i iznad. */
.home .negic-last-section { padding-top: 6px !important; padding-bottom: 4px !important; }
.home .negic-last-section .col { padding-top: 0 !important; padding-bottom: 0 !important; }
.home #content { padding-bottom: 14px !important; }
/* Featured (Roditelji) — smanji dno da razmak iznad brenda bude isti kao ispod.
   2026-07-09: pravilo suženo na kolonu-omotač. Pisano je u slider eri (jedan red
   kartica) pa je ".col" hvatao i .product-small.col kartice; kad je tab postao
   grid 2x4, tih 6px je postalo razmak red-na-red i kartice su se skoro dodirivale.
   Kartice sad drže Flatsome default (19.6px = vertikalni ritam prodavnice), a zbir
   praznine ispod poslednjeg reda (kartica+omotač+sekcija, bio 32px desktop / 30px
   mobilni) čuvamo: omotač 6->0, dno sekcije 20->12px desktop, 18->10px mobilni. */
.home .negic-featured-section .section-content > .row > .col { padding-bottom: 0 !important; }
.home .negic-featured-section { padding-bottom: 12px !important; }
/* NB: mobilno dno sekcije (18->10px) je u bloku MOBILNI RITAM SEKCIJA POČETNE
   na kraju fajla, jer generičko pravilo tog bloka ima veću specifičnost. */

/* --- Responsive homepage gridovi --- */
@media (max-width: 1024px) {
  .negic-katgrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 849px) {
  .negic-katgrid { grid-template-columns: repeat(2, 1fr); }
  .negic-trust-strip { grid-template-columns: repeat(2, 1fr); }
  .negic-promo-grid { grid-template-columns: 1fr; }
}
/* Na telefonu USP traka = JEDNA karta sa 4 kompaktna reda (ikona + naslov + opis
   u istom redu). U dve kolone se tekst lomio po reč, a 4 pune kartice su
   zauzimale ~400px visine (2026-07-04). */
@media (max-width: 649px) {
  .negic-trust-strip {
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--card);
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    padding: 4px 14px;
  }
  .negic-trust-card { background: transparent; border: 0; border-radius: 0; padding: 9px 0; align-items: center; gap: 10px; }
  /* Redovi u zajedničkoj karti: klik radi, ali se ništa ne pomera. */
  .negic-trust-card:hover { transform: none; box-shadow: none; }
  .negic-trust-card + .negic-trust-card { border-top: 1px solid var(--line-2); }
  .negic-trust-ico { width: 30px; height: 30px; border-radius: 9px; }
  .negic-trust-ico .negic-svg-icon { width: 16px; height: 16px; }
  .negic-trust-tx { display: flex; flex-wrap: wrap; column-gap: 6px; align-items: baseline; }
  .negic-trust-tx strong { font-size: 13.5px; display: inline; }
  .negic-trust-tx span { font-size: 12.5px; }
}

/* ============================================================
   REBRAND 2026 — FAZA 4: PRODUCT KARTICE + SHOP + PDP
   Po design_handoff .prod-card / .pdp.
   ============================================================ */

/* --- Product kartica (shop, homepage, related): mekana bela karta --- */
.product-small.box {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.product-small.col:hover .product-small.box {
  border-color: var(--brand-tint);
  box-shadow: var(--shadow-md);
}
/* Slika: bela pozadina (ne tirkizna — sprečava zelenu nijansu uz mix-blend-mode) */
.product-small .box-image {
  background: #fff;
  border-radius: var(--r-sm);
}
/* Brend iznad naziva = Space Mono uppercase muted.
   min-height drži red i kad je slot PRAZAN (proizvod bez brenda ne ispisuje
   kategoriju od 2026-07-27), da naslovi u redu kartica ostanu poravnati. */
.product-small .category,
ul.products .box-text .category {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.4;
  min-height: 1.4em;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Flatsome ima p:empty{display:none}. Lokalno prazan slot preživi jer šablon
   ostavi whitespace u <p>, ali produkcijska HTML minifikacija (LSCache) izbaci
   whitespace pa :empty upali i slot nestane — naslovi onda skaču 15px.
   Vraćamo prazan brend-slot u tok da min-height odradi svoje. */
.product-small p.category:empty,
ul.products .box-text p.category:empty {
  display: block;
}
/* Naziv = Baloo 2 600 */
.product-small .product-title a,
ul.products .box-text .product-title a {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.product-small .product-title a:hover,
ul.products .box-text .product-title a:hover { color: var(--brand-strong); }
/* Cena = Baloo 2, stara precrtana faint, sniženje clay */
.product-small .price,
ul.products .box-text .price {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}
.product-small .price del,
ul.products .box-text .price del {
  font-family: var(--font-body);
  color: var(--faint);
  font-weight: 400;
  font-size: 13px;
}
.product-small .price ins,
ul.products .box-text .price ins {
  color: var(--accent-strong);
  font-weight: 700;
}
/* Add-to-cart na kartici = mali okrugli "+" pored cene (dizajn .add-btn), uvek vidljiv.
   Cena levo, "+" desno u istom redu. Tekst "Dodaj u korpu" sakriven (a11y ostaje aria-label).
   Ista komponenta važi i za + dugme u kasa stripu u draweru (2026-07-17): strip
   selektor je zakačen zarezom na svako od donjih pravila, izgled se ne duplira. */
.product-small .box-text { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; }
.product-small .box-text .title-wrapper { flex: 0 0 100%; }
.product-small .box-text .price-wrapper { flex: 1 1 auto; margin: 0; }
.product-small .box-text .add-to-cart-button { flex: 0 0 auto; margin: 0; opacity: 1 !important; }
.product-small .box-text .screen-reader-text { flex: 0 0 100%; height: 0; }

.product-small .add-to-cart-button .button,
ul.product_list_widget li.negic-kasa-strip .negic-kasa-add {
  width: 40px; height: 40px; min-width: 0; min-height: 0; padding: 0; margin: 0;
  border-radius: 10px !important;  /* zaobljeni kvadrat (ne krug) */
  background-color: var(--brand-tint) !important; border-color: var(--brand-tint) !important; color: var(--brand-strong) !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0; line-height: 0; box-shadow: none;
  transition: background-color .18s, color .18s, transform .15s;
}
.product-small .add-to-cart-button .button::before,
ul.product_list_widget li.negic-kasa-strip .negic-kasa-add::before {
  content: "+"; font-family: var(--font-body); font-size: 24px; font-weight: 400;
  line-height: 1; display: block; margin-top: -1px;   /* optički centar "+" */
}
.product-small .add-to-cart-button .button:hover,
ul.product_list_widget li.negic-kasa-strip .negic-kasa-add:hover {
  background-color: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important;
  transform: scale(1.05);
}
.product-small .add-to-cart-button .button:active,
ul.product_list_widget li.negic-kasa-strip .negic-kasa-add:active { transform: scale(0.94); }
/* Ugasi Flatsome loading-spinner i "added" kvačicu (::after) — pravili su čudan krug
   preko našeg "+". "+" ostaje uvek aktivan (možeš dodati još); ne sme da posivi. */
.product-small .add-to-cart-button .button.loading,
.product-small .add-to-cart-button .button.added,
ul.product_list_widget li.negic-kasa-strip .negic-kasa-add.loading,
ul.product_list_widget li.negic-kasa-strip .negic-kasa-add.added {
  opacity: 1 !important; pointer-events: auto !important;
  background-color: var(--brand-tint) !important; border-color: var(--brand-tint) !important;
  color: var(--brand-strong) !important;
}
.product-small .add-to-cart-button .button.loading:hover,
.product-small .add-to-cart-button .button.added:hover,
ul.product_list_widget li.negic-kasa-strip .negic-kasa-add.loading:hover,
ul.product_list_widget li.negic-kasa-strip .negic-kasa-add.added:hover {
  background-color: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important;
}
.product-small .add-to-cart-button .button::after,
ul.product_list_widget li.negic-kasa-strip .negic-kasa-add::after { content: none !important; display: none !important; }
.product-small .add-to-cart-button .button.added::before,
ul.product_list_widget li.negic-kasa-strip .negic-kasa-add.added::before { content: "+"; } /* zadrži "+" i posle dodavanja */
/* Trenutni feedback dok traje AJAX dodavanje: "+" postane brend spinner i dugme
   se nakratko zaključa (sprečava dupli klik). Po added_to_cart .loading se skine
   pa se vrati "+". Milan 2026-06-18: "+" je delovao kao da ne reaguje par sekundi. */
.product-small .add-to-cart-button .button.loading,
ul.product_list_widget li.negic-kasa-strip .negic-kasa-add.loading { pointer-events: none !important; }
.product-small .add-to-cart-button .button.loading::before,
ul.product_list_widget li.negic-kasa-strip .negic-kasa-add.loading::before {
  content: "" !important;
  width: 17px; height: 17px; margin: 0;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  animation: negic-woof-spin .6s linear infinite;
}
/* Sakrij "Prikaži korpu / View cart" link koji WooCommerce doda posle dodavanja.
   Stvarna klasa je added_to_cart (donja crta), ne added-to-cart. */
.product-small .added_to_cart,
.product-small .added-to-cart,
.product-small .box-text .added_to_cart { display: none !important; }

/* Ostali (npr. PDP related koristi istu .product-small) — pilula fallback za ne-loop dugmad */
.add-to-cart-button .button:not(.product_type_simple) {
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-weight: 600;
}

/* "Brzi pregled" = malo okruglo dugme sa okom, u donjem-desnom uglu slike, u istom
   desnom klasteru kao "+" dugme. Neprozirno belo (vidljivo na SVAKOJ slici, ne zavisi
   od pozadine), bez teksta; pojavi se na hover kartice; na dodir se ne prikazuje.
   (UX odluka 2026-07-04, konsultovan Fable: traka/pilula preko slike ne pripada
   maloj kartici koja već ima bedž + "+".) */
.product-small .box-image .image-tools.grid-tools.bottom {
  left: auto !important; right: 10px !important; bottom: 10px !important;
  width: auto !important; padding: 0 !important; margin: 0 !important;
  display: flex !important; justify-content: flex-end !important;
}
.product-small .quick-view {
  display: inline-flex !important; width: 36px !important; height: 36px !important;
  align-items: center; justify-content: center; gap: 0;
  background: #fff !important;                  /* neprozirno = slika ispod ga ne "proguta" */
  color: var(--brand) !important;              /* oko = tirkizno */
  border: 1px solid var(--line) !important;
  border-radius: 50% !important;               /* mali krug, sekundarna akcija (manji od "+") */
  padding: 0 !important;
  font-size: 0 !important;                      /* sakrij tekst "Brzi pregled" (ostaje za citace ekrana) */
  line-height: 0 !important;
  text-transform: none !important;
  box-shadow: 0 2px 6px rgba(20, 40, 40, .14) !important;
  transition: color .16s var(--ease), background .16s var(--ease),
              border-color .16s var(--ease), transform .15s var(--ease), box-shadow .16s var(--ease);
}
.product-small .quick-view:hover {
  color: #fff !important;
  background: var(--brand) !important;          /* hover = tirkizna, belo oko */
  border-color: var(--brand) !important;
  transform: scale(1.06);
  box-shadow: 0 3px 9px rgba(20, 40, 40, .20) !important;
}
.product-small .quick-view::before {
  content: ""; width: 18px; height: 18px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--negic-eye-ico) center / contain no-repeat;
          mask: var(--negic-eye-ico) center / contain no-repeat;
}
/* Na dodir (mobilni/tablet bez hovera) quick-view nema smisla — sakrij ga potpuno. */
@media (hover: none) {
  .product-small .box-image .image-tools.grid-tools.bottom { display: none !important; }
}
:root { --negic-eye-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }

/* --- Shop kategorija-chipovi: usklađeni sa novim tokenima --- */
.negic-cat-chip { font-family: var(--font-body); border-color: var(--line); color: var(--ink-2); }
.negic-cat-chip.is-active { background: var(--brand); border-color: var(--brand); }

/* --- PDP (stranica proizvoda) --- */
.single-product .product-title,
.single-product h1.product-title { font-family: var(--font-head); font-weight: 700; }
.single-product div.product .price {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink);
}
.single-product div.product .price del { color: var(--faint); font-weight: 400; }
.single-product div.product .price ins { color: var(--accent-strong); }
.single-product .single_add_to_cart_button.button {
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-weight: 600;
  /* Ista visina kao qty stepper (50px = 46px dugmad + 1.5px okvir gore/dole). */
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Glavno "Dodaj u korpu" = brand teal (Flatsome ga inače renderuje clay kao
     "secondary"; clay je rezervisan za badge/sezonu, ne za glavni CTA). */
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.single-product .single_add_to_cart_button.button:hover {
  background-color: var(--brand-strong) !important;
  border-color: var(--brand-strong) !important;
  color: #fff !important;
}
/* Tabela specifikacija (atributi) */
.single-product .woocommerce-product-attributes,
.single-product table.shop_attributes {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}
.single-product table.shop_attributes th,
.single-product table.shop_attributes td {
  border-color: var(--line-2);
  font-size: 14px;
}
.single-product table.shop_attributes th { font-family: var(--font-body); font-weight: 600; color: var(--ink); background: var(--brand-tint-2); }
/* PDP tabovi: naslov Baloo 2 */
.single-product .woocommerce-tabs ul.tabs li a { font-family: var(--font-head); font-weight: 600; }

/* ============================================================
   REBRAND 2026 — FAZA 5: FOOTER (tamni brand-deep, dizajn .footer)
   ============================================================ */
#footer .footer-1 {
  background-color: var(--brand-deep);
  color: oklch(0.86 0.02 190);
  padding: 56px 0 28px;
}
/* Prva (logo) kolona uža: bila 35%, dizajn ≈32% (1.4fr od 4.4). Samo podešavamo
   flex-basis postojećih Flatsome kolona, ne diramo strukturu. Desktop only.
   Od 1081px, NE 850px: ispod 1081px važi 2x2 grid (dole), a ovaj selektor je
   specifičniji od grid override-a, pa je u opsegu 850-1080 capovao ćelije na
   23% i lomio tekst reč-po-reč. */
@media (min-width: 1081px) {
  #footer .footer-1 .row.large-columns-4 > .col:first-child {
    flex-basis: 31% !important;
    max-width: 31% !important;
  }
  #footer .footer-1 .row.large-columns-4 > .col:not(:first-child) {
    flex-basis: 23% !important;
    max-width: 23% !important;
  }
}
#footer .footer-1 .widget-title {
  color: #fff !important;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
}
#footer .footer-1 .textwidget p { color: oklch(0.82 0.015 190) !important; }
/* Footer logo (umesto "Knjižara Negić" teksta) — veći, top poravnat sa naslovima
   kolona; negativan top kompenzuje providni rub PNG-a i povuče kolonu gore. */
.negic-footer-logo { height: 104px; width: auto; display: block; margin: -20px 0 -8px; }
#footer .footer-1 .negic-footer-logo + p { margin-top: 0 !important; }
/* Zbijene stavke liste u footeru (živi je imao ~43px razmak; dizajn ~8px). */
#footer .footer-1 ul { margin: 0 !important; }
#footer .footer-1 ul li {
  margin: 0 !important;
  padding: 3px 0 !important;
  border: 0 !important;
  line-height: 1.35 !important;
}
#footer .footer-1 ul li a { line-height: 1.35 !important; font-size: 14px; }
#footer .footer-1 .widget-title { margin-bottom: 14px !important; }
#footer .footer-1 { padding: 46px 0 24px !important; }
/* Logo-kolona šira, link-kolone uže (kao dizajn) -> ravnomerniji razmaci. */
#footer .footer-1 .row > .col:first-child { flex: 0 0 35% !important; max-width: 35% !important; }
#footer .footer-1 .row > .col:not(:first-child) { flex: 0 0 21.6% !important; max-width: 21.6% !important; }
#footer .footer-1 a,
#footer .footer-1 .footer-widgets a { color: oklch(0.82 0.015 190); }
#footer .footer-1 a:hover,
#footer .footer-1 .footer-widgets a:hover { color: #fff; }
/* Social ikone = krugovi (belo/8%), brand tirkizna na hover */
#footer .negic-footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: oklch(1 0 0 / 0.08);
  color: oklch(0.9 0.02 190);
}
#footer .negic-footer-social a:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }
/* Donja traka: ista tamna + tanka gornja linija (dizajn .foot-bottom) */
.absolute-footer {
  background-color: var(--brand-deep);
  border-top: 1px solid oklch(1 0 0 / 0.1);
  color: oklch(0.72 0.015 190);
}
.absolute-footer a { color: oklch(0.82 0.015 190); }
.absolute-footer a:hover { color: #fff; }

/* ============================================================
   MOBILNI (P1): footer kolone — prati dizajn .footer (.wrap).
   Desktop = 4 kolone; ≤1080px = 2x2 grid; ostaje 2 kolone i na telefonu
   (dizajn styles.css: ≤1080 repeat(2,1fr), bez phone override-a).
   Uzrok bug-a: pravila gore (#footer .footer-1 .row > .col) forsiraju
   flex/max-width %-e BEZUSLOVNO (!important), pa footer nije stack-ovao na
   mobilnom. Grid na .row ih nadjačava i poravnava 2x2 čisto; flex-wrap bi
   ostavio neravan razmak jer je logo-kolona viša od link-kolona.
   ============================================================ */
@media (max-width: 1080px) {
  #footer .footer-1 .row.large-columns-4,
  #footer .footer-1 .row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 30px 24px;
  }
  /* clearfix pseudo-elementi ne smeju da postanu prazne grid ćelije */
  #footer .footer-1 .row::before,
  #footer .footer-1 .row::after { display: none !important; }
  /* Nabrajamo i :first-child i :not(:first-child) da nadjačamo stare desktop
     %-e (oni nose :not(:first-child) -> specifičnost 1,4,0; ovde je izjednačimo
     i pošto smo kasnije u fajlu, pobeđujemo). Bez ovoga max-width:21.6% capuje
     sadržaj na ~84px i tekst se lomi reč-po-reč. */
  #footer .footer-1 .row > .col,
  #footer .footer-1 .row > .col:first-child,
  #footer .footer-1 .row > .col:not(:first-child) {
    flex: none !important;
    max-width: none !important;
    width: auto !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ============================================================
   REBRAND 2026 — FAZA 5: KORPA / CHECKOUT / MINI-CART
   ============================================================ */

/* Primarni checkout/cart dugmad = brand teal (Flatsome ih renderuje clay) */
#place_order,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--font-head) !important;
  font-weight: 600 !important;
}
#place_order:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
  background-color: var(--brand-strong) !important;
  border-color: var(--brand-strong) !important;
}

/* Blagajna: min-porudžbina AMBER traka (Fable 2026-07-07) — koristan INFO, NE crvena
   form-error. Stoji odmah iznad dugmeta u rezimeu; uživo (deo review-order fragmenta). */
.negic-min-bar { display: flex; gap: 10px; align-items: flex-start; background: #FFF8EC; border: 1px solid #EAC985; border-radius: var(--r-sm); padding: 12px 14px; margin: 0 0 14px; }
.negic-min-bar svg { flex: 0 0 auto; color: #B4791E; margin-top: 1px; }
.negic-min-bar b { display: block; color: #8A5A12; font-family: var(--font-head); font-weight: 700; font-size: 14.5px; }
.negic-min-bar span { display: block; color: #7C6437; font-size: 13px; line-height: 1.45; margin-top: 2px; }
/* Onemogućeno „Naručite" dok je korpa ispod praga na dostavi (traka iznad objašnjava). */
#place_order.negic-btn-off { opacity: .5 !important; cursor: not-allowed !important; }
#place_order.negic-btn-off:hover { background-color: var(--brand) !important; border-color: var(--brand) !important; }

/* Polja forme: zaobljeno + brand focus ring (dizajn .field) */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection,
.woocommerce-cart input.input-text {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-family: var(--font-body);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
  outline: none;
}

/* ============================================================
   CHECKOUT restyle (Korak 4) — pragmatičan, dizajn co-card.
   Zadržavamo Woo strukturu; sakrivamo suvišna polja i pakujemo u kartice.
   ============================================================ */
/* Naslov „Plaćanje" + podnaslov (dizajn .cat-hero). */
.negic-co-head { max-width: var(--maxw); margin: 8px 0 26px; }
.negic-co-head h1 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.1; margin: 0 0 8px; }
.negic-co-head p { color: var(--ink-2); font-size: 16px; margin: 0; }

/* Summary: ukloni Flatsome `.has-border` (2px tirkizni okvir) oko kolone; ostaje
   čista bela kartica #order_review (kao dizajn). I padding omotača na 0 — bio je
   vazduh za okvir koga više nema, zbog njega je kartica bila 60px uža od billing
   kartice (Milan 2026-07-30). */
.woocommerce-checkout .large-5 .col-inner.has-border,
.woocommerce-checkout .checkout-sidebar .col-inner.has-border { border: 0 !important; padding: 0 !important; }
.woocommerce-checkout #order_review { border: 1px solid var(--line-2) !important; box-shadow: var(--shadow-sm); }

/* Sakrij suvišna polja: Država (samo Srbija), Apartman/stan, Okrug (opciono),
   i „Dostava na drugu adresu" + shipping polja. */
.woocommerce-checkout #billing_country_field,
.woocommerce-checkout #billing_address_2_field,
.woocommerce-checkout #billing_state_field,
.woocommerce-checkout .woocommerce-shipping-fields { display: none !important; }

/* Podaci za naplatu + napomena = bele kartice (dizajn .co-card). */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-additional-fields {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 22px 24px;
  margin-bottom: 16px;
}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 16px;
  color: var(--ink);
}
/* Labela iznad polja (dizajn .field span). */
.woocommerce-checkout .woocommerce-billing-fields .form-row label,
.woocommerce-checkout .woocommerce-additional-fields .form-row label {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.woocommerce-checkout .form-row { margin-bottom: 14px; padding: 0; }
/* Ime/Prezime puna širina kao ostala polja (pre su bili poluširoki i naslagani
   sa praznim desnim delom — nekonzistentno; Milan 2026-06-18). */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last { width: 100%; float: none; clear: both; }
.woocommerce-checkout .form-row .optional { color: var(--faint); }

/* Pregled porudžbine + plaćanje = kartica (dizajn .co-summary). */
.woocommerce-checkout #order_review {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 22px 24px;
}
.woocommerce-checkout #order_review .shop_table {
  border: 0;
  margin: 0 0 8px;
}
.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td {
  border: 0;
  border-bottom: 1px solid var(--line-2);
  padding: 10px 0;
  font-size: 14px;
}
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  border-bottom: 0;
}
/* „Besplatno" cue uz metode bez troška (preuzimanje) — čita se kao pozitivna cena,
   paralelno kurirskoj „450 RSD". (2026-07-08) */
.negic-ship-free { color: var(--brand-strong); font-weight: 600; }

/* Plaćanje (BACS) — čista kutija. */
.woocommerce-checkout #payment {
  background: transparent;
  border-radius: var(--r);
}
.woocommerce-checkout #payment ul.payment_methods {
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--brand-tint-2);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.woocommerce-checkout #payment ul.payment_methods li { list-style: none; }
.woocommerce-checkout #payment div.payment_box {
  background: transparent;
  font-size: 13px;
  color: var(--ink-2);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment .place-order { padding: 0; }
.woocommerce-checkout #place_order { width: 100%; padding: 14px 24px !important; font-size: 15px !important; }
/* Privacy napomena: premeštena JS-om na dno forme (van klipovanog sidebar-a),
   centrirana, sitna i prigušena (Milan 2026-06-18). */
.woocommerce-checkout .woocommerce-privacy-policy-text {
  clear: both; max-width: 760px; margin: 26px auto 0; padding: 0 15px;
  text-align: center; font-size: 12px; line-height: 1.5; color: var(--ink-2);
}
.woocommerce-checkout .woocommerce-privacy-policy-text p { margin: 0; }
/* Mobilni: zategni dno blagajne (Flatsome col+col-inner po 30px padding-a +
   margina forme su pravili velik prazan prostor do footera). Desktop netaknut. */
@media (max-width: 849px) {
  .woocommerce-checkout form.checkout > .row > .col > .col-inner,
  .woocommerce-checkout form.checkout > .row > .col { padding-bottom: 12px; }
  .woocommerce-checkout form.checkout { margin-bottom: 10px; }
}

/* Desktop: summary sticky uz formu. */
@media (min-width: 850px) {
  .woocommerce-checkout #order_review { position: sticky; top: 100px; }
}

/* ===== Inline validacija: crveno polje + poruka ispod (umesto liste na vrhu) ===== */
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout .form-row.woocommerce-invalid textarea,
.woocommerce-checkout .form-row.woocommerce-invalid .select2-selection {
  border-color: #d63638 !important;
  box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.12) !important;
}
.woocommerce-checkout .form-row.woocommerce-invalid > label { color: #d63638; }
.negic-field-error {
  display: block;
  color: #d63638;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  /* Input ima margin-bottom ~14.5px (razmak polja); greška je iza input-wrapper-a pa bi
     „pokupila" tu marginu i visila ~20px ispod polja. Negativan margin je vraća uz polje
     (~4px), a razmak do sledećeg polja nosi form-row (Milan 2026-07-07). */
  margin-top: -10px;
  margin-bottom: 4px;
}
/* Smanji/sakrij staru listu grešaka na vrhu (inline preuzima) — ostaje samo za
   eventualne serverske greške koje klijent ne uhvati. */
.woocommerce-checkout .woocommerce-NoticeGroup-checkout .woocommerce-error { font-size: 13.5px; }

/* Mini-cart (flyout): traka besplatne dostave (dizajn .ship-bar) */
.negic-ship-bar {
  padding: 12px 16px;
  background: var(--brand-tint-2);
  font-size: 13px;
  color: var(--ink-2);
  border-radius: var(--r-sm);
  margin: 0 0 12px;
}

/* Mini-cart: +/- stepper za količinu (dizajn .qty-sm) */
.negic-mc-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; }
.negic-mc-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-pill); }
.negic-mc-qty.is-loading { opacity: .5; pointer-events: none; }
.negic-mc-qty button { width: 28px; height: 28px; min-width: 0; padding: 0; margin: 0; display: grid; place-items: center; background: none; border: 0; color: var(--ink-2); font-size: 16px; line-height: 1; cursor: pointer; }
.negic-mc-qty button:hover { color: var(--brand); background: none; }
/* 15px umesto 13/13.5 (Milan 2026-07-21, UX pregled): cena artikla je primaran
   podatak u korpi a broj količine je stajao izgubljen u pilili od 34px; isti
   presedan kao PDP sticky bar cena (15px). Total ostaje 16px kao vrh hijerarhije. */
.negic-mc-num { min-width: 24px; text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink); }
.negic-mc-price { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink); white-space: nowrap; }
.negic-ship-bar b { color: var(--brand-strong); }
.negic-ship-bar.negic-ship-ok { color: var(--brand); font-weight: 700; }
.negic-ship-track {
  display: block;
  height: 6px;
  border-radius: 6px;
  background: rgba(0,0,0,.07);
  margin-top: 8px;
  overflow: hidden;
}
.negic-ship-fill { display: block; height: 100%; background: var(--brand); border-radius: 6px; }

/* Mini-cart dropdown: uskladi sa tokenima */
.cart-dropdown-wrapper .nav-dropdown,
.header .cart-dropdown .widget_shopping_cart {
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
}
.widget_shopping_cart .buttons .button { border-radius: var(--r-pill); font-family: var(--font-head); font-weight: 600; }
.widget_shopping_cart .buttons .button.checkout { background-color: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }

/* ============================================================
   KORPA DRAWER (off-canvas #cart-popup) — Korak 1 (dizajn cart.jsx)
   Klik na korpu otvara drawer, blur pozadine, toast na dodavanje.
   ============================================================ */
/* Blur cele strane dok je korpa (desni off-canvas) otvorena. Flatsome već
   zatamnjuje overlay; ovde dodajemo blur. Scope na -right da meni (levi) ne bluri. */
/* Blur ide kao backdrop-filter na Magnific overlay, NE kao filter na #wrapper:
   filter na pretku pravi novi containing block pa position:fixed sticky header
   prestane da se vezuje za viewport i „nestane" pri otvorenoj korpi (bug nađen
   2026-07-21, isti fix i za meni/filter drawer niže; presedan: Complianz modal).
   GOTCHA (Milan 2026-07-21): element opacity < 1 na overlay-u ISPIRA backdrop-filter
   (blur se komponuje na 60% pa pozadina ostane čitka). Zato tamnoća ide u alfa
   pozadine (ista ukupna tamnoća: #0b0b0b na 0.6), a overlay na punu neprozirnost. */
html.has-off-canvas-right .mfp-bg {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  background: rgb(11 11 11 / 0.6);
}
html.has-off-canvas-right .mfp-bg.mfp-ready { opacity: 1; }

/* ------------------------------------------------------------
   Kaskadno uklizavanje sadržaja drawera (inspirisano Shopify „Broadcast"
   temom, odobreno 2026-07-21): panel uklizi (to radi Flatsome), pa sadržaj
   unutra ufejduje uz mali horizontalni pomak, element po element.
   Keyframes negicUklizi je DELJEN sa mobilnim menijem (vidi MOBILNI DRAWER
   sekciju). --negic-uklizi-x određuje smer pomaka (korpa +14px sa desna;
   meni postavlja -14px sa leva). Sve iza prefers-reduced-motion: no-preference
   da sistemska postavka „smanji animacije" ugasi efekat.
   ------------------------------------------------------------ */
@keyframes negicUklizi {
  from { opacity: 0; transform: translateX(var(--negic-uklizi-x, 14px)); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Korpa (#cart-popup): klasu .negic-anim doda cart.js na otvaranje i skine je
     posle 900ms. Time se NE keyuje na klasu koja stoji dok je drawer otvoren, pa
     Woo AJAX fragment refresh (qty stepper, dodavanje) NE re-triggeruje kaskadu.
     Pomak sa desna (default var fallback 14px). fill-mode both drži opacity 0
     tokom delay-a, bez statičkog opacity:0 (sadržaj vidljiv i ako animacija ne krene). */
  #cart-popup.negic-anim .cart-popup-title            { animation: negicUklizi .32s ease .05s both; }
  #cart-popup.negic-anim .negic-ship-bar              { animation: negicUklizi .32s ease .09s both; }
  #cart-popup.negic-anim ul.product_list_widget > li  { animation: negicUklizi .32s ease .11s both; }
  /* Stagger po stavci: +.045s, cap od 6. deteta naviše (n+6 dele isti max ~.335s). */
  #cart-popup.negic-anim ul.product_list_widget > li:nth-child(2)   { animation-delay: .155s; }
  #cart-popup.negic-anim ul.product_list_widget > li:nth-child(3)   { animation-delay: .200s; }
  #cart-popup.negic-anim ul.product_list_widget > li:nth-child(4)   { animation-delay: .245s; }
  #cart-popup.negic-anim ul.product_list_widget > li:nth-child(5)   { animation-delay: .290s; }
  #cart-popup.negic-anim ul.product_list_widget > li:nth-child(n+6) { animation-delay: .335s; }
  #cart-popup.negic-anim p.total                      { animation: negicUklizi .32s ease .22s both; }
  #cart-popup.negic-anim .negic-min-info              { animation: negicUklizi .32s ease .25s both; }
  #cart-popup.negic-anim .buttons                     { animation: negicUklizi .32s ease .28s both; }
  /* .negic-drawer-cont (Nastavi kupovinu) NEMA svoj rule: dete je .buttons pa bi
     dupla animacija kompovala pomak na ~28px (code review 2026-07-21). */
}

/* Drawer footer po dizajnu: „Idi na plaćanje" puna širina (primarno),
   „Pregled korpe" skriven (drawer zamenjuje stranu korpe), „Nastavi kupovinu" link. */
#cart-popup .widget_shopping_cart_content .buttons { display: flex; flex-direction: column; gap: 10px; margin: 0; }
#cart-popup .widget_shopping_cart_content .buttons .button { width: 100%; margin: 0; }
#cart-popup .widget_shopping_cart_content .buttons .button:not(.checkout) { display: none; } /* Pregled korpe skriven */
/* „Idi na plaćanje" dugme: fiksna visina 52px, centriran tekst. */
#cart-popup .widget_shopping_cart_content .buttons .button.checkout {
  min-height: 52px; box-sizing: border-box; padding: 0 18px; line-height: 1.1;
  display: flex !important; align-items: center; justify-content: center;
}
/* „Idi na plaćanje" = primarno, sa brend senkom kao ostala dugmad. */
#cart-popup .widget_shopping_cart_content .buttons .button.checkout {
  box-shadow: 0 6px 16px oklch(0.585 0.105 188 / 0.30) !important;
  transition: transform .18s var(--ease), box-shadow .2s, background-color .2s;
}
#cart-popup .widget_shopping_cart_content .buttons .button.checkout:hover {
  background-color: var(--brand-strong) !important; border-color: var(--brand-strong) !important;
  box-shadow: 0 10px 22px oklch(0.585 0.105 188 / 0.36) !important;
  transform: translateY(-1px);
}
/* „Nastavi kupovinu" = tekst-link ispod „Idi na plaćanje" (bio ghost pilula 52px;
   Milan 2026-07-20: footer je zauzimao 29% mobilnog ekrana, a sekundarna radnja je
   redundantna sa X i klikom van drawera, pa ide kao link — footer pada na ~21%).
   Padding drži dodirnu metu ~36px. */
.negic-drawer-cont {
  display: block; width: 100%; text-align: center;
  padding: 8px 0; margin: 0;
  font-family: var(--font-head); font-size: 14px; font-weight: 600;
  color: var(--brand-strong); background: none; border: 0;
  text-transform: none; letter-spacing: 0;
  transition: color .18s;
}
.negic-drawer-cont:hover { color: var(--brand); background: none; }

/* Prazna korpa CENTRIRANA u drawer-u (dizajn .drawer-empty): ikona u tirkiznom
   krugu, naslov, tekst i dugme — sve vertikalno i horizontalno na sredini. */
#cart-popup .cart-popup-inner { display: flex !important; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#cart-popup .cart-popup-title { flex: 0 0 auto; }
#cart-popup .widget_shopping_cart,
#cart-popup .widget_shopping_cart_content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#cart-popup .ux-mini-cart-empty {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 40px 24px;
}
/* Ikona prazne korpe: tirkizni krug sa brand ikonom (dizajn .de-ico). */
#cart-popup .ux-mini-cart-empty-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand-strong);
  display: grid; place-items: center; margin: 0;
}
#cart-popup .ux-mini-cart-empty-icon svg { width: 34px; height: 34px; }
#cart-popup .woocommerce-mini-cart__empty-message {
  font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--ink); margin: 0;
}
#cart-popup .ux-mini-cart-empty .return-to-shop { margin: 4px 0 0; }

/* Remove (×) artikla: plain sivi, BEZ kruga (dizajn .cart-line-x). */
#cart-popup .mini_cart_item .remove,
#cart-popup .mini_cart_item .remove_from_cart_button {
  width: 22px; height: 22px;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--faint) !important;
  font-size: 18px; line-height: 1;
  opacity: 1;
  transition: color .15s;
}
#cart-popup .mini_cart_item .remove:hover,
#cart-popup .mini_cart_item .remove_from_cart_button:hover {
  background: none !important;
  color: var(--accent) !important;
}
/* Mobilni: dodirna meta od 22px je premala za prst (Milan 2026-08-06). Nevidljiva
   zona ide na 40×40 (uz preporuku od ~44px), vidljivi znak sa 15 na 18px (Flatsome
   ga drži sa !important, pa i ovde mora). Desna ivica OSTAJE na ivici stavke
   (right: 0), pa zona NE ulazi u 10px stazu scrollbara desno — širi se samo ulevo
   i po visini (top 16 → 7px čuva vizuelni centar znaka). Stavka dobija
   padding-right 44px (bilo 30) da kraj naslova ne legne pod proširenu zonu:
   tap na poslednju reč naslova ne sme da obriše artikal. */
@media (max-width: 849px) {
  #cart-popup .mini_cart_item { padding-right: 44px !important; }
  #cart-popup .mini_cart_item .remove,
  #cart-popup .mini_cart_item .remove_from_cart_button {
    width: 40px; height: 40px; top: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px !important; line-height: 1 !important;
  }
}

/* Brend labela iznad naziva (dizajn .prod-brand). */
#cart-popup .negic-mc-brand,
.woocommerce-mini-cart .negic-mc-brand {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

/* Red qty+cena: puna širina pa cena ide skroz desno (dizajn .cart-line-foot). */
#cart-popup .negic-mc-line { width: 100%; }
#cart-popup .negic-mc-price { margin-left: auto; }
/* Qty komponenta niža (vertikalno), bez menjanja brojeva/+/− (dizajn .qty-sm). */
#cart-popup .negic-mc-qty { height: 34px !important; }
#cart-popup .negic-mc-qty button { width: 32px !important; height: 32px !important; }

/* Close (X) poravnat sa naslovom „Korpa". mfp-close je u .mfp-wrap (fixed),
   ne u #cart-popup, pa scope-ujemo preko :has na off-canvas korpu. */
.mfp-wrap:has(.off-canvas-cart) .mfp-close,
.mfp-content.off-canvas-cart .mfp-close { top: 24px !important; right: 16px !important; }

/* Toast (dizajn .toast): dole-centar, brand, kvačica. */
/* z-index iznad Flatsome off-canvas korpe da toast bude vidljiv i kad je drawer otvoren. */
.negic-toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 100000; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.negic-toast {
  display: flex; align-items: center; gap: 12px;
  background: var(--brand-strong); color: #fff;
  padding: 13px 18px 13px 14px; border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 600;
  animation: negicToastIn .3s var(--ease);
}
.negic-toast-ico { width: 26px; height: 26px; border-radius: 50%; background: oklch(1 0 0 / 0.18); display: grid; place-items: center; font-size: 14px; }
.negic-toast--out { opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .3s; }
/* Akcija u toastu („Pogledaj korpu"): jedini klikabilan deo pilule
   (wrap ima pointer-events:none); veći padding = tap meta. */
.negic-toast .negic-toast-act {
  pointer-events: auto;
  margin-left: auto;
  padding: 6px 2px;
  color: #fff; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
  white-space: nowrap;
}
.negic-toast .negic-toast-act:hover { color: #fff; opacity: .85; }
/* X za ručno zatvaranje toasta (IKEA obrazac 2026-07-16). PRVO reset Flatsome
   dugmeta (min-height gotcha!), pa izgled. Klikabilan kao i akcija (wrap ima
   pointer-events:none). */
.negic-toast .negic-toast-x {
  pointer-events: auto;
  background: none; border: 0; box-shadow: none;
  min-height: 0; margin: 0 0 0 2px; padding: 4px 6px;
  color: #fff; opacity: .7; font-size: 13px; line-height: 1; cursor: pointer;
}
.negic-toast .negic-toast-x:hover { opacity: 1; background: none; color: #fff; }
@keyframes negicToastIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 549px) { .negic-toast-wrap { left: 16px; right: 16px; transform: none; } .negic-toast { width: 100%; } }

/* Link „Povraćaj i odustanak u roku od 14 dana" ispod checkout dugmadi
   (drawer + blagajna), IKEA obrazac 2026-07-16. Diskretan, ne konkuriše dugmadima. */
.negic-odustanak-link {
  display: block; text-align: center; margin: 12px 0 2px;
  font-size: 13px; color: #5C5C5C;
  text-decoration: underline; text-underline-offset: 3px;
}
.negic-odustanak-link:hover { color: var(--brand-strong); }

/* „Možda te zanima i" kasa strip u draweru (IKEA obrazac 2026-07-17).
   Poslednji <li> u scroll listi: gornja granica ga odvaja od stavki, kompaktni
   redovi 48px sličica + naziv/cena + okruglo + dugme (Flatsome min-height reset!).
   Selektori su pojačani sa `ul.product_list_widget li.negic-kasa-strip` jer
   Flatsome mini-cart pravila gaze naš strip: `li` dobija padding-left: 75px
   (naslov/redovi uvučeni), a `li img` position: absolute; left:0; 60px (obe
   sličice se slože jedna preko druge) — vraćamo shorthand padding i static img.
   Naslov je namerno sentence case, bez verzala (Milan 2026-07-17): verzal +
   Space Mono delovao je generički, običan Mulish 600 se slaže s drawer labelama.
   Strip je blago toniran panel (isti jezik kao modul „do besplatne dostave" na
   vrhu drawera), ne border-top separator — na belom fondu se separator čitao kao
   da su artikli već u korpi (UI/UX pregled, Milan 2026-07-17). Zbog sivog fonda
   panela sličice idu na belo (kontrast). Izgled + dugmeta dolazi iz zajedničke
   kartične komponente (~3514) i globalnih primary efekata (senka + hover lift,
   ~7389); ovde su samo kontekstne sitnice (34px kontrola, full-bleed pojas od
   ivice do ivice). */
/* Full-bleed pojas od ivice do ivice (ne plutajuća kartica): negativne margine
   ponište bočni prostor drawera (levo 24px = .cart-popup-inner padding; desno 34px
   = 24px + 10px staza scrollbara na listi), a padding vrati sadržaj u ravan sa
   stavkama. Geometrija je ista na mobilnom (oba padding-a su bezuslovna, bez media
   override-a), pa ivice legnu svuda. Gornja granica čita se kao „nova zona".
   Desni padding od 2026-07-20 nosi +10px vazduha (44px umesto 34px) da se okruglo
   + dugme ne lepi za zelenu scroll traku (Milan, iPhone); full-bleed geometrija
   (margin -34px) ostaje ista. */
ul.product_list_widget li.negic-kasa-strip {
  /* BELA pozadina (Milan, finalno 2026-07-20, posle probe sive #F7F9F9 i mint
     tinta): na punom belom draweru panel je beo, a zonu odvaja granična linija
     iznad. Obrće tint odluku od 17.7. */
  background: #fff;
  border-top: 1px solid #E5E5E5;
  border-radius: 0;
  margin: 18px -34px 0 -24px;
  padding: 14px 44px 14px 24px;
}
.negic-kasa-naslov {
  display: block; margin: 0 0 8px;
  /* 700 (bilo 600, Milan 2026-07-20): na belom panelu naslov nosi odvajanje zone,
     pa sme jači. Sentence case ostaje (odluka 17.7). */
  font-size: 13px; font-weight: 700; color: #1A1A1A;
}
.negic-kasa-red { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.negic-kasa-thumb { flex: 0 0 48px; }
ul.product_list_widget li.negic-kasa-strip .negic-kasa-thumb img {
  position: static; top: auto; left: auto;
  width: 48px; height: 48px; object-fit: contain;
  border-radius: 6px; background: #fff; display: block;
}
.negic-kasa-info { flex: 1 1 auto; min-width: 0; }
.negic-kasa-ime {
  display: block; font-size: 13px; line-height: 1.3; color: #1A1A1A;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.negic-kasa-cena { font-family: "Space Mono", monospace; font-size: 12px; color: #5C5C5C; }
/* Izgled + dugmeta dolazi iz zajedničke kartične komponente (~3514) + globalnih
   primary efekata (~7389); ovde samo kontekstne sitnice — drawer kontrole su
   kompaktnije od shopa (34px umesto 40px). border-radius nosi !important jer i
   komponenta ima !important na radius; ovaj blok je kasnije u fajlu pa pobeđuje. */
ul.product_list_widget li.negic-kasa-strip .negic-kasa-add {
  flex: 0 0 auto; margin: 0;
  /* 30px (bilo 34): usklađeno sa sitnom tipografijom sekcije — naziv 13px,
     cena 12px (Milan 2026-07-20). */
  width: 30px; height: 30px; border-radius: 8px !important;
}
ul.product_list_widget li.negic-kasa-strip .negic-kasa-add::before { font-size: 18px; }

/* Hover korpe: NE otvaraj dropdown (korpa = drawer na klik), bez caret strelice,
   sa mekom zelenom pozadinom (dizajn .icon-btn:hover). */
.header li.cart-item .nav-dropdown,
.cart-dropdown-wrapper .nav-dropdown,
li.cart-item:hover .nav-dropdown { display: none !important; opacity: 0 !important; visibility: hidden !important; }
.header li.cart-item .nav-dropdown:before,
.header li.cart-item .nav-dropdown:after,
.header li.cart-item.has-dropdown > a:after,
.header li.cart-item.has-dropdown > a:before,
.header li.cart-item > a::after,
.header li.cart-item > a::before,
.header li.cart-item::after,
.header li.cart-item::before,
.header li.cart-item .icon-angle-down { display: none !important; content: none !important; }
.header li.cart-item > a.header-cart-link { border-radius: 12px; padding: 6px 12px !important; transition: background .18s, color .18s; }
.header li.cart-item > a.header-cart-link:hover { background: var(--brand-tint-2) !important; color: var(--brand-strong) !important; }
.header li.cart-item > a.header-cart-link:hover .cart-price,
.header li.cart-item > a.header-cart-link:hover [class*="icon-"] { color: var(--brand-strong) !important; }

/* Label korpe: prikaži pravi tekst (JS postavlja „Ukupno"/„Korpa"), sakrij
   Flatsome ::after „Korpa" (icon-style label) i cenu (nepotrebna u ikoni). */
.header li.cart-item .header-cart-title { font-size: 11px !important; font-weight: 600 !important; line-height: 1.1 !important; }
.header li.cart-item .header-cart-title::after { content: none !important; display: none !important; }
/* Kad ima artikala prikazujemo SAMO iznos (dizajn); reč „Korpa" je samo za praznu (JS). */
.header li.cart-item .header-cart-title .cart-price { display: inline !important; }
/* Cena ispod korpe: veća (+20%, 11px->13px) i bez bold (zahtev). */
/* Metrički fallback: uži „Baloo 2 zamena cena" (86%) da „0 RSD" ne odskoči
   1-2px na swap kad pravi Baloo 2 stigne (centriran tekst, vidi vrh fajla). */
.header li.cart-item .header-cart-title,
.header li.cart-item .header-cart-title .cart-price,
.header li.cart-item .header-cart-title .cart-price .amount {
  font-size: 13px !important;
  font-weight: 400 !important;
  font-family: "Baloo 2", "Baloo 2 zamena cena", system-ui, sans-serif;
}

/* Drawer širi + artikli „dišu" (dizajn .drawer width min(440px,100%)).
   Širina je na roditelju .off-canvas-cart (Flatsome je drži na 360px); #cart-popup
   je 100% njega. Koristimo 100vw (ne 100%) da se ne sveđe na roditeljevih 360. */
.mfp-content.off-canvas-cart,
html.has-off-canvas-right .mfp-content.off-canvas-cart { width: min(440px, 100vw) !important; max-width: 100% !important; }
/* Puna BELA pozadina drawera: Flatsome default je rgba(255,255,255,.95) pa se
   blurovana strana iza PROVIDI i korpa deluje sivkasto, a footer (solid #fff)
   belji od liste (Milan uočio 2026-07-20). Dizajn traži belu. */
.mfp-content.off-canvas-cart { background: #fff !important; }
/* Puna visina drawer-a (da prazno stanje može da se centrira po visini). */
.mfp-content.off-canvas-cart { display: flex !important; flex-direction: column; }
#cart-popup { width: 100% !important; max-width: 100% !important; height: 100% !important; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* Gornji padding 30 (Flatsome default) → 18px: manje praznog iznad naslova „Korpa"
   (Milan 2026-07-20). Donji padding NE diramo. */
#cart-popup .cart-popup-inner { padding-left: 24px !important; padding-right: 24px !important; padding-top: 18px !important; }
/* Samo vertikalni razmak — NE dirati levi padding (Flatsome ga koristi za
   prostor ispod apsolutno pozicioniranog thumbnaila; bez njega se naziv/qty
   preklapaju sa slikom). */
#cart-popup .mini_cart_item { padding-top: 16px !important; padding-bottom: 16px !important; }

/* --- Lista = sopstveni scroll region (2026-07-09) ---------------------------
   Uzrok problema: ranije je klizio CEO drawer (.mfp-content off-canvas). Sa 5
   artikala se 5. gubio iza footera BEZ ijednog signala (nema scrollbara ni
   fade-a), a pri skrolu je i naslov „Korpa" nestajao. Resenje: samo lista
   artikala (ul) klizi — naslov ostaje gore, total + dugmad uvek dole. Visinu
   ogranicavaju flex kolone #cart-popup i .cart-popup-inner (izmenjene gore), pa
   lista dobija bounded height i moze da skroluje umesto da raste. */
.mfp-content.off-canvas-cart { overflow: hidden !important; } /* jedini scroller je lista, ne ceo drawer */
#cart-popup .widget_shopping_cart_content ul.product_list_widget {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 10px;          /* poslednji artikal ne leze na ivicu footera */
  /* Staza za scrollbar, vazi za SVE engine (Milan, 2026-07-09): cene i X dugme
     su right-aligned na ivicu liste pa se klasicna traka (Chrome/Edge/Android,
     Firefox) crtala tik uz tekst; 10px daje vazduh pored trake. Na iOS-u je
     obojeni standardni scrollbar OVERLAY (ne rezervise prostor, sekao je "D" u
     cenama), pa njegova traka vozi PREKO iste ove staze. Jedna logika za sve. */
  padding-right: 10px;
  overscroll-behavior: contain;  /* skrol do kraja liste ne „preliva" na stranu iza */
}
/* ul je Flatsome flex-kolona (.woocommerce-mini-cart display:flex); kad dobije
   ogranicenu visinu, deca (artikli + notice) bi se skupila pa bi se steper i cena
   sabili. flex-shrink:0 drzi artikle na punoj visini, a visak se skroluje. */
#cart-popup .widget_shopping_cart_content ul.product_list_widget > * { flex-shrink: 0; }
/* Footer (total + dugmad) fiksiran flex-om na dnu; ranije position:sticky (za stari
   skrol celog drawera) vise nije potreban. position:relative nosi fade ispod.
   Donji padding 30 (Flatsome default) → 14px i kompaktniji „Ukupno" red (48→~34px):
   deo stezanja footera na ~24% ekrana (Milan 2026-07-20, uz „Nastavi kupovinu" link). */
#cart-popup .widget_shopping_cart_content .ux-mini-cart-footer {
  flex: 0 0 auto;
  position: relative;
  padding-bottom: 14px !important;
}
#cart-popup .ux-mini-cart-footer .woocommerce-mini-cart__total {
  /* 10px dole: granična linija ispod „Ukupno" mora da diše (Milan 2026-07-20 —
     prvo stezanje ju je zalepilo za tekst). */
  padding: 4px 0 10px !important; margin: 0 0 8px !important; line-height: 1.3;
}
/* Fade „ima jos" iznad footera = signal da lista klizi dalje. Prikazuje se SAMO
   kad cart.js doda .negic-cart-has-more (lista nije skrolovana do kraja), da ne
   bude laznog signala kad je sve vidljivo. */
#cart-popup .widget_shopping_cart_content .ux-mini-cart-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 34px;
  pointer-events: none;
  background: linear-gradient(to top, #fff 28%, rgba(255,255,255,0));
  opacity: 0;
  transition: opacity .2s var(--ease);
}
#cart-popup.negic-cart-has-more .widget_shopping_cart_content .ux-mini-cart-footer::before { opacity: 1; }

/* Tanak brend scrollbar na listi, SVE sirine (dodatni signal uz fade). Referenca
   je scrollbar u kolacic modalu (Complianz .cmplz-body): 5px sirina, radius 10px,
   providan track, thumb brend tirkizna. Ranije je thumb bio neutralno-sivi (--line)
   i samo desktop; sada je brend zeleni radi konzistencije sa kolacic modalom, a
   mobilni je namerno UKLJUCEN (Milan, 2026-07-09): stalno vidljiva traka je bolji
   signal od nativnog overlay scrollbara koji se javlja tek pri dodiru. Napomena:
   stilizovan ::-webkit-scrollbar nije overlay, zauzima 5px unutar liste (provereno
   na 390px, redovi artikala se ne lome).
   Namerno literalni hex, ne token --brand: modal koristi #2BAFA5 (a --brand je
   teal-600 ≈ #17a89d, malo tamniji zeleni), pa se ovako thumb poklapa 1:1 sa
   modalom; hover #1F8A82 je ista tamnija tirkizna kao link u modalu.
   GOTCHA 1 (izmereno 2026-07-09): od Chrome 121 standardni scrollbar-width i
   scrollbar-color ISKLJUCUJU ::-webkit-scrollbar pravila na elementu (browser
   tada crta "thin" nativni, 10px gutter + strelice, umesto naseg 5px recepta).
   Zato Chrome/Edge/Android dobijaju SAMO webkit recept, a standardni propovi
   su ograniceni guardom ispod.
   GOTCHA 2 (Milanov iPhone, iOS 18.7 / WebKit 26.5, 2026-07-09): iOS webkit
   pravila NE ignorise nego rezervise 5px prostora a thumb NE crta, pa ostane
   prazna BELA pruga u listi. Zato webkit pravila stoje u iOS gate-u
   (-webkit-touch-callout postoji samo na iOS WebKit-u).
   PODACI SA UREDJAJA (test strana na Milanovom iPhone-u, 2026-07-09):
   selector(::-webkit-scrollbar)=true, -webkit-touch-callout=true,
   -moz-appearance=false, scrollbar-width:thin=true, scrollbar-color=true;
   vizuelno: webkit-only kutija BEZ thumba (bela pruga), a kutija sa
   scrollbar-width:thin + scrollbar-color crta ZELENU traku. Moderni iOS dakle
   crta obojen scrollbar kroz standardne propove.
   Zato standardni propovi vaze za: Gecko/Firefox (-moz-appearance) ILI iOS
   koji podrzava scrollbar-color (touch-callout + scrollbar-color uslov;
   stariji iOS bez scrollbar-color podrske ispada na nativni overlay + fade).
   (Playwright WebKit build ne podrzava touch-callout pa se iOS grana ne moze
   simulirati lokalno; podaci i vizuelna potvrda su sa Milanovog uredjaja.) */
@supports (-moz-appearance: none) or ((-webkit-touch-callout: none) and (scrollbar-color: red blue)) {
  #cart-popup .widget_shopping_cart_content ul.product_list_widget {
    scrollbar-width: thin;
    scrollbar-color: #2BAFA5 transparent;
  }
}
/* Napomena: staza od 10px (padding-right) za traku je u OSNOVNOM pravilu liste
   gore (kod padding-bottom), bezuslovno za sve engine. Zajednicki blok
   (.nav-dropdown/.mfp-wrap) stazu NE dobija: .nav-dropdown je desktop-only
   komponenta, a .mfp-wrap na mobilnom nigde ne overfluje (nalaz 2026-07-09),
   i sadrzaj im nije right-aligned na ivicu pa traka nista ne sece. */
@supports not (-webkit-touch-callout: none) {
  #cart-popup .widget_shopping_cart_content ul.product_list_widget::-webkit-scrollbar { width: 5px; }
  #cart-popup .widget_shopping_cart_content ul.product_list_widget::-webkit-scrollbar-button { display: none; height: 0; width: 0; } /* bez strelica gore/dole */
  #cart-popup .widget_shopping_cart_content ul.product_list_widget::-webkit-scrollbar-track { background: transparent; }
  #cart-popup .widget_shopping_cart_content ul.product_list_widget::-webkit-scrollbar-thumb {
    background: #2BAFA5; border-radius: 10px;
  }
  #cart-popup .widget_shopping_cart_content ul.product_list_widget:hover::-webkit-scrollbar-thumb { background: #1F8A82; }
}

/* ------------------------------------------------------------------
   TANKI BREND SCROLLBAR (zajednicko pravilo). Referenca = scrollbar u
   kolacic modalu (Complianz .cmplz-body): 5px sirina, radius 10px, providan
   track, thumb brend tirkizna (#2BAFA5), hover tamnija (#1F8A82). Isti recept
   kao korpa iznad, radi konzistencije kroz ceo UI (Milan, 2026-07-09).
   Namerno literalni hex (ne token --brand koji je teal-600 ≈ #17a89d, malo
   tamniji), da bi se thumb poklopio 1:1 sa modalom.
   Regioni: mega meni panel (.nav-dropdown) i Magnific Popup wrapper
   (.mfp-wrap = brzi pregled + lightbox galerija). Oba imaju overflow-y:auto uz
   fiksni max-height, pa im se scrollbar (inace browserski sivi) pojavljuje tek
   kad sadrzaj prevazidje visinu; tada je brend zeleni umesto sivog.
   Bez media query-ja, vazi na svim sirinama (Milan, 2026-07-09). Provereno na
   mobilnoj emulaciji: .nav-dropdown je cisto desktop komponenta (mobilni meni je
   poseban drawer sa sopstvenim internim skrolom), a .mfp-wrap na mobilnom nigde
   ne overfluje (drawer korpe i menija imaju overflow na unutrasnjim listama, a
   PDP lightbox se na mobilnom i ne otvara jer je zoom dugme skriveno), pa je
   pravilo tamo bezopasno i sluzi kao buduca konzistencija.
   NE ukljuceno: FiboSearch sugestije (na desktopu ne prelaze 600px cap pa se
   scrollbar i ne javlja, a pravilo bi diralo mobilni overlay pretrage),
   WOOF sidebar (overflow:visible, skrola se cela strana), PDP thumbnails
   (scrollbar namerno skriven po dizajnu).
   Standardni scrollbar-* propovi za Gecko/Firefox ILI moderan iOS (isti guard
   kao kod korpe, tamo je i objasnjenje sa podacima sa Milanovog uredjaja):
   u Chrome 121+ bi standardni propovi iskljucili ::-webkit-scrollbar recept
   (GOTCHA 1 kod korpe), a na iOS-u 18.7+ scrollbar-color RADI i crta obojen
   thumb, dok webkit pravila prave belu prugu (GOTCHA 2 kod korpe).
   Webkit pravila u iOS gate-u (-webkit-touch-callout postoji samo na iOS-u):
   iOS webkit pravila NE ignorise nego rezervise prostor bez crtanja thumba,
   ostane bela pruga. Regioni sada uključuju i unutrašnji skrol brzog pregleda
   (.product-lightbox-inner na širem, .product-quick-view-container na uskom prozoru). */
@supports (-moz-appearance: none) or ((-webkit-touch-callout: none) and (scrollbar-color: red blue)) {
  .nav-dropdown,
  .mfp-wrap,
  .mfp-content .product-lightbox-inner,
  .mfp-content .product-quick-view-container {
    scrollbar-width: thin;
    scrollbar-color: #2BAFA5 transparent;
  }
}
@supports not (-webkit-touch-callout: none) {
  .nav-dropdown::-webkit-scrollbar,
  .mfp-wrap::-webkit-scrollbar,
  .mfp-content .product-lightbox-inner::-webkit-scrollbar,
  .mfp-content .product-quick-view-container::-webkit-scrollbar { width: 5px; }
  .nav-dropdown::-webkit-scrollbar-button,
  .mfp-wrap::-webkit-scrollbar-button,
  .mfp-content .product-lightbox-inner::-webkit-scrollbar-button,
  .mfp-content .product-quick-view-container::-webkit-scrollbar-button { display: none; height: 0; width: 0; } /* bez strelica gore/dole */
  .nav-dropdown::-webkit-scrollbar-track,
  .mfp-wrap::-webkit-scrollbar-track,
  .mfp-content .product-lightbox-inner::-webkit-scrollbar-track,
  .mfp-content .product-quick-view-container::-webkit-scrollbar-track { background: transparent; }
  .nav-dropdown::-webkit-scrollbar-thumb,
  .mfp-wrap::-webkit-scrollbar-thumb,
  .mfp-content .product-lightbox-inner::-webkit-scrollbar-thumb,
  .mfp-content .product-quick-view-container::-webkit-scrollbar-thumb { background: #2BAFA5; border-radius: 10px; }
  .nav-dropdown:hover::-webkit-scrollbar-thumb,
  .mfp-wrap:hover::-webkit-scrollbar-thumb,
  .mfp-content .product-lightbox-inner:hover::-webkit-scrollbar-thumb,
  .mfp-content .product-quick-view-container:hover::-webkit-scrollbar-thumb { background: #1F8A82; }
}

/* Header drawer-a po dizajnu .drawer-head: „Korpa" LEVO, sentence case, + count badge. */
#cart-popup .cart-popup-title {
  text-align: left !important;
  padding: 4px 0 16px !important;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
/* SAMO naslovni span (.heading-font), NE i badge span — inače badge dobija ink/20px. */
#cart-popup .cart-popup-title .heading-font {
  display: inline-block !important;   /* Flatsome ga drži block -> badge bi pao u novi red */
  text-transform: none !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: var(--ink) !important;
  vertical-align: middle;
}
#cart-popup .cart-popup-title .is-divider { display: none !important; }
#cart-popup .negic-cart-count {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px; margin-left: 10px;
  background: var(--brand) !important; color: #fff !important; border-radius: 999px !important;
  font-family: var(--font-mono) !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important;
  text-transform: none !important; vertical-align: middle;
}

/* Naziv artikla u drawer-u: taman (ink) bold, ne tirkizan (dizajn .cart-line-name). */
#cart-popup .mini_cart_item a:not(.remove):not(.remove_from_cart_button) {
  color: var(--ink) !important;
  font-family: var(--font-head);
  font-weight: 600;
}
#cart-popup .mini_cart_item a:not(.remove):not(.remove_from_cart_button):hover { color: var(--brand-strong) !important; }

/* ============================================================
   ŠIRINA SAJTA — Zadatak 4d: drawer korpe na širokim ekranima
   (Milan 2026-07-28, uz širenje kontejnera 1080 → 1230px)
   ------------------------------------------------------------
   Sve je zatvoreno u @media (min-width: 1281px). Ispod te granice drawer
   ostaje 440px sa starim veličinama (na 1280 i niže ništa se ne menja),
   a mobilni (≤440px viewport) je i dalje pun ekran preko min(...,100vw).
   Zašto 1281: ista granica kao ostali koraci ovog projekta — širenje se
   uključuje tek kad ekran ima šta da ponudi, laptop 1280 ostaje netaknut.

   GOTCHA (--drawer-width): Flatsome uklizavanje NIJE vezano za `width` nego
   za custom property --drawer-width (`.off-canvas-right .mfp-content` ima
   `transform: translateX(var(--drawer-width))` u zatvorenom stanju). Tema ga
   drži na 360px, pa sa širinom 440px prvi frejm otvaranja ostavlja ~80px
   drawera već na ekranu (sliver umesto čistog uklizavanja). Zato ovde
   postavljamo I --drawer-width, da panel uklizi CELOM svojom širinom.
   Selektor `.off-canvas .mfp-content.off-canvas-cart` je iste specifičnosti
   kao Flatsome-ov inline Customizer CSS, pa nosi !important (custom property
   ga poštuje) da pobedi bez obzira na redosled učitavanja.
   ============================================================ */
@media (min-width: 1281px) {
  /* 1) Širina 440 → 520px (i uklizavanje prati istu vrednost). */
  .off-canvas .mfp-content.off-canvas-cart,
  .mfp-content.off-canvas-cart,
  html.has-off-canvas-right .mfp-content.off-canvas-cart {
    --drawer-width: 520px !important;
    width: min(520px, 100vw) !important;
  }

  /* 2) Naslov drawera i badge sa brojem: prate krupniji sadržaj. */
  #cart-popup .cart-popup-title .heading-font { font-size: 22px !important; }
  #cart-popup .negic-cart-count { min-width: 24px; height: 24px; font-size: 13px !important; }

  /* 3) Traka „do besplatne dostave": +1px teksta, malo više vazduha, deblja šina. */
  #cart-popup .negic-ship-bar { font-size: 14px; padding: 14px 18px; }
  #cart-popup .negic-ship-track { height: 7px; margin-top: 9px; }

  /* 4) Red artikla: sličica 60 → 80px. Flatsome drži sliku apsolutno na left:0,
        a prostor za nju pravi padding-left na <li> (75px = 60 slika + 15 razmak),
        pa oba idu zajedno: 95px = 80 + 15. Vertikalni vazduh 16 → 20px, a slika
        ostaje 6px iznad prvog reda teksta (isti odnos kao pre: 10 vs 16). */
  #cart-popup .mini_cart_item {
    padding-left: 95px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  #cart-popup ul.product_list_widget li.mini_cart_item img {
    width: 80px !important;
    height: 80px !important;
    top: 14px !important;
  }
  /* Naziv + brend labela + cena/količina: +1 do +2px (cena je primaran podatak). */
  #cart-popup .mini_cart_item a:not(.remove):not(.remove_from_cart_button) { font-size: 17px; }
  #cart-popup .negic-mc-brand { font-size: 11px; margin-bottom: 3px; }
  #cart-popup .negic-mc-price { font-size: 17px; }
  #cart-popup .negic-mc-num { font-size: 16px; }
  #cart-popup .negic-mc-line { margin-top: 9px; }
  #cart-popup .negic-mc-qty { height: 38px !important; }
  #cart-popup .negic-mc-qty button { width: 36px !important; height: 36px !important; font-size: 18px; }
  /* X za brisanje: veća meta uz krupniji red (font ide sa !important jer ga
     Flatsome mini-cart pravilo inače spusti na 15px). */
  #cart-popup .mini_cart_item .remove,
  #cart-popup .mini_cart_item .remove_from_cart_button {
    width: 24px; height: 24px; font-size: 18px !important;
  }

  /* 5) „Možda te zanima i": sličice 48 → 60px, tekst i dugme srazmerno.
        Full-bleed geometrija pojasa (negativne margine) se NE dira — bočni
        padding drawera ostaje 24px, pa ivice i dalje legnu. */
  #cart-popup .negic-kasa-naslov { font-size: 14px; margin-bottom: 10px; }
  #cart-popup .negic-kasa-red { gap: 12px; padding: 8px 0; }
  #cart-popup .negic-kasa-thumb { flex: 0 0 60px; }
  #cart-popup ul.product_list_widget li.negic-kasa-strip .negic-kasa-thumb img { width: 60px; height: 60px; }
  #cart-popup .negic-kasa-ime { font-size: 14px; }
  #cart-popup .negic-kasa-cena { font-size: 14px; }
  #cart-popup ul.product_list_widget li.negic-kasa-strip .negic-kasa-add { width: 36px; height: 36px; }
  #cart-popup ul.product_list_widget li.negic-kasa-strip .negic-kasa-add::before { font-size: 20px; }

  /* 6) Podnožje: „Ukupno" i „Idi na plaćanje" već uzimaju punu širinu drawera,
        ovde samo prate krupniji sadržaj. */
  #cart-popup .ux-mini-cart-footer .woocommerce-mini-cart__total { font-size: 17px; }
  #cart-popup .widget_shopping_cart_content .buttons .button.checkout { min-height: 56px; font-size: 16.5px; }
  #cart-popup .negic-drawer-cont { font-size: 15px; }
}

/* Top nav linkovi (kategorije, Brendovi): čist zaobljen zeleni hover, ne „odsečen pill".
   Izuzimamo „Sve kategorije" (button) i „Novo" (pill button) koji imaju svoj stil.
   Pravilo je curilo u unutrašnjost mege (tintovalo naslove odeljenja sa !important, jer
   je predak :hover) pa je scope-ovano na TOP nivo (.header-bottom-nav > li) — Milan 2026-07-14. */
#wide-nav .header-bottom-nav > li.menu-item > a { border-radius: var(--r-pill); transition: background .15s, color .15s; }
#wide-nav .header-bottom-nav > li.menu-item:not(.menu-item-38):not(.menu-novo-btn):hover > a,
#wide-nav .header-bottom-nav > li.menu-item:not(.menu-item-38):not(.menu-novo-btn).current-dropdown > a {
  background: var(--brand-tint-2) !important;
  color: var(--brand-strong) !important;
}
/* Flatsome animirani underline koji se „seče" — gasimo na nav linkovima. */
#wide-nav li.menu-item > a::before { display: none !important; }

/* Logo se NE sme uvećavati u sticky nav baru (bio 70px stuck vs 52px normal).
   Flatsome inline Customizer CSS ima `.stuck #logo img{max-height:70px!important}`
   (ista specifičnost, učitan kasnije), pa moramo većom specifičnošću. */
#header .logo img,
#logo img { max-height: 52px !important; width: auto !important; }
html body .stuck #logo img,
html body #header.stuck #logo img,
html body.stuck #logo img { max-height: 52px !important; }

/* ============================================================
   ORDER-RECEIVED (thank-you) — Korak 3 (dizajn OrderSuccess)
   ============================================================ */
/* Centrirano (Flatsome `.row` na .woocommerce-order ima margin:-15px pa beži ulevo). */
.woocommerce-order,
.woocommerce-order.row { max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; }
.negic-success { text-align: center; padding: 18px 0 26px; }
/* Ikona: pun tirkizni krug + bela kvačica + senka (dizajn .success-ico). */
.negic-success-ico {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center; margin: 0 auto 18px;
  box-shadow: 0 10px 30px oklch(0.585 0.105 188 / 0.35);
}
.negic-success-ico .negic-svg-icon { width: 42px; height: 42px; }
/* Eyebrow bez linije (dizajn .eyebrow.no-rule) + malo veći. */
.negic-success .negic-eyebrow { margin-bottom: 12px; font-size: 13px; }
.negic-success .negic-eyebrow::before { display: none !important; }
.negic-success h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; margin: 4px 0 14px; }
.negic-success > p { color: var(--ink-2); font-size: 16.5px; line-height: 1.6; max-width: 46ch; margin: 0 auto 24px; }
.negic-success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
/* Primarno dugme „Nazad na početnu" sa senkom (dizajn .btn-primary). */
.negic-success-actions .button:not(.is-outline) {
  box-shadow: 0 6px 16px oklch(0.585 0.105 188 / 0.30) !important;
}
.negic-success-actions .button:not(.is-outline):hover {
  box-shadow: 0 10px 22px oklch(0.585 0.105 188 / 0.36) !important;
  transform: translateY(-1px);
}
/* „Nastavi kupovinu" = ghost: providno, SIV okvir, zelen tekst (dizajn .btn-ghost). */
.negic-success-actions .button.is-outline {
  background: transparent !important;
  color: var(--brand-strong) !important;
  border-color: var(--line) !important;
  box-shadow: inset 0 0 0 1.5px var(--line) !important;
}
.negic-success-actions .button.is-outline:hover {
  color: var(--brand) !important;
  border-color: var(--brand) !important;
  box-shadow: inset 0 0 0 1.5px var(--brand) !important;
  background: transparent !important;
}

/* Sakrij default uvodni tekst, „overview" pilule i adrese (header ih pokriva). */
.woocommerce-order .woocommerce-thankyou-order-received,
.woocommerce-order .woocommerce-order-overview,
.woocommerce-order .woocommerce-customer-details { display: none !important; }

/* Flatsome deli thankyou na large-7/large-5 (2 kolone); large-5 drži samo
   (skriveni) notice+overview pa ostaje prazna „is-well" bordered kutija desno.
   Forsiramo jednu kolonu (centrirano u .woocommerce-order max-width 720) i sakrijemo praznu. */
.woocommerce-order.row,
.woocommerce-order { display: block !important; }
.woocommerce-order > .large-7 { width: 100% !important; max-width: 100% !important; flex: none !important; }
.woocommerce-order > .large-7 > .col-inner { padding: 0 !important; border: 0 !important; background: none !important; }
.woocommerce-order > .large-5 { display: none !important; }

/* Bankovni podaci (BACS) + pregled porudžbine = čiste kartice. */
.woocommerce-order .woocommerce-bacs-bank-details,
.woocommerce-order .woocommerce-order-details {
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 22px 24px; margin: 16px 0 0;
}
.woocommerce-order .wc-bacs-bank-details-heading,
.woocommerce-order .woocommerce-order-details__title {
  font-family: var(--font-head); font-weight: 600; font-size: 16px; margin: 0 0 14px;
}
.woocommerce-order .woocommerce-order-details table.woocommerce-table--order-details { margin: 0; }
.woocommerce-order .wc-bacs-bank-details { list-style: none; margin: 0; padding: 0; }
.woocommerce-order .wc-bacs-bank-details li { padding: 6px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.woocommerce-order .wc-bacs-bank-details li:last-child { border-bottom: 0; }

/* ============================================================
   REBRAND 2026 — FAZA 6: KOMPLET / BRENDOVI / O NAMA STRANE
   Sve scope-ovano pod .negic-page (bez clash-a sa Flatsome).
   ============================================================ */
.negic-page { color: var(--ink); }
.negic-page .button {
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-weight: 600;
}
.button.negic-btn-accent { background-color: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.button.negic-btn-accent:hover { background-color: var(--accent-strong) !important; border-color: var(--accent-strong) !important; }
.button.negic-btn-light { background-color: #fff !important; border-color: #fff !important; color: var(--brand-strong) !important; }
.button.negic-btn-light:hover { color: var(--brand-deep) !important; }
.negic-eyebrow--light { color: oklch(0.82 0.07 100); }
.negic-eyebrow--light::before { background: oklch(0.82 0.07 100); }

/* --- Chip pilule (komplet/about hero) --- */
.negic-kchips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.negic-komplet-hero .negic-kchips { justify-content: center; }
.negic-kchip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  padding: 7px 14px 7px 13px; border-radius: var(--r-pill);
  background: #fff; box-shadow: inset 0 0 0 1px var(--line);
}
.negic-kchip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.negic-kchip--accent::before { background: var(--accent); }

/* --- Komplet za prvaka --- */
.negic-komplet-hero { text-align: center; max-width: 720px; margin: 8px auto 0; padding: 16px 0 8px; }
.negic-komplet-hero h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.12; margin: 14px 0 0; }
.negic-komplet-hero > p { color: var(--ink-2); font-size: 17px; margin: 16px auto 0; max-width: 56ch; }
/* Prosti naslov strane (npr. /novo/) — centriran, nezavisan od komplet klase. */
.negic-pagehead { text-align: center; max-width: 720px; margin: 8px auto 0; padding: 16px 0 4px; }
.negic-pagehead h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.12; margin: 0; }
.negic-pagehead > p { color: var(--ink-2); font-size: 17px; margin: 14px auto 0; max-width: 56ch; }
.negic-komplet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 34px 0 8px; align-items: start; }
.negic-kcard { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; position: relative; display: flex; flex-direction: column; }
.negic-kcard.featured { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint), var(--shadow-md); }
.negic-kbadge { position: absolute; top: 16px; right: 16px; z-index: 2; background: var(--brand); color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-pill); }
.negic-kmedia { aspect-ratio: 16/10; overflow: hidden; background: var(--brand-tint); }
.negic-kmedia img { width: 100%; height: 100%; object-fit: cover; }
.negic-kbody { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 12px; }
.negic-kbody h2 { font-size: 26px; }
.negic-kdesc { color: var(--ink-2); font-size: 15px; margin: -4px 0 4px; }
.negic-kprice { display: flex; align-items: baseline; gap: 12px; }
.negic-kprice b, .negic-kprice b .woocommerce-Price-amount { font-family: var(--font-head); font-size: 30px; color: var(--ink); }
.negic-kprice span { font-size: 13.5px; color: var(--muted); font-family: var(--font-mono); }
.negic-klist { list-style: none; margin: 6px 0 8px; padding: 16px 0; border-top: 1px solid var(--line-2); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.negic-klist li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.negic-klist li .negic-svg-icon { color: var(--brand); flex-shrink: 0; width: 15px; height: 15px; margin-top: 2px; }
.negic-kbtn { margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; }
.negic-kbtn .negic-svg-icon { width: 18px; height: 18px; }

/* --- Trust band (komplet) --- */
.negic-trustband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; background: var(--brand-tint-2); border-radius: var(--r-lg); padding: 28px; margin: 40px 0; }
.negic-tb-cell { display: flex; gap: 13px; align-items: center; }
.negic-tb-ico { width: 46px; height: 46px; border-radius: 12px; background: #fff; color: var(--brand-strong); display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.negic-tb-ico .negic-svg-icon { width: 20px; height: 20px; }
.negic-tb-tx b { font-family: var(--font-head); font-size: 15px; display: block; }
.negic-tb-tx span { font-size: 12.5px; color: var(--muted); }

/* --- Komplet CTA (tamna) --- */
.negic-komplet-cta { background: var(--brand-strong); color: #fff; border-radius: var(--r-lg); padding: 44px 48px; display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 32px; align-items: center; margin: 40px 0; }
.negic-komplet-cta h2 { color: #fff; font-size: clamp(24px, 2.8vw, 32px); }
.negic-komplet-cta > div > p:last-child { color: oklch(0.9 0.02 190); margin: 12px 0 0; font-size: 15.5px; }
.negic-komplet-cta-btns { display: flex; flex-direction: column; gap: 12px; }

/* --- Brendovi strana --- */
.negic-brands-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.negic-brandcard { display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); padding: 22px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.negic-brandcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.negic-brandcard-logo { display: grid; place-items: center; width: 100%; height: 86px; border-radius: var(--r-sm); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.negic-brandcard-logo img { max-height: 58px; max-width: 100%; width: auto; object-fit: contain; }
.negic-brandcard-logo--text { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: var(--ink); }
.negic-brandcard-body b { font-family: var(--font-head); font-size: 17px; display: block; color: var(--ink); }
.negic-brandcard-body span { font-size: 13.5px; color: var(--muted); }
.negic-brandcard-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 0; border-top: 0; }
.negic-brandcard-count { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.negic-brandcard-go { font-family: var(--font-head); font-weight: 600; font-size: 13.5px; color: var(--brand); display: inline-flex; align-items: center; gap: 6px; }
.negic-brandcard-go .negic-svg-icon { width: 15px; height: 15px; }
/* „Ostali brendovi" — laka lista naziva (brendovi bez logoa), pilule (Milan 2026-07-01). */
.negic-brands-more { margin-top: 34px; }
.negic-brands-more-title { font-family: var(--font-head); font-weight: 600; font-size: 18px; color: var(--ink); margin: 0 0 14px; }
.negic-brands-more-list { display: flex; flex-wrap: wrap; gap: 9px 10px; }
.negic-brands-more-item { display: inline-flex; align-items: center; padding: 8px 15px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--card); font-size: 13.5px; color: var(--ink-2); transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); }
.negic-brands-more-item:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-tint-2); }
.negic-brands-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--brand-tint-2); border-radius: var(--r); padding: 24px 28px; margin-top: 22px; flex-wrap: wrap; }
.negic-brands-cta b { font-family: var(--font-head); font-size: 18px; display: block; }
.negic-brands-cta span { font-size: 14px; color: var(--ink-2); }

/* --- O nama (Naša priča) --- */
.negic-about-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; padding: 18px 0 36px; }
.negic-about-hero h1 { font-size: clamp(28px, 4vw, 46px); line-height: 1.1; margin: 14px 0 0; }
.negic-about-hero-copy > p { font-size: 17px; color: var(--ink-2); margin: 18px 0 22px; max-width: 46ch; }
.negic-about-hero-media { aspect-ratio: 4/3.4; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.negic-about-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.negic-about-sec { margin: 48px 0; }
.negic-timeline { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* jedna neprekidna linija kroz sve tačke umesto isprekidanih segmenata po itemu */
.negic-timeline::before { content: ""; position: absolute; top: 8px; left: 7px; right: 7px; height: 2px; background: var(--line); }
.negic-tl-item { position: relative; padding-top: 30px; }
.negic-tl-dot { position: absolute; top: 2px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.negic-tl-year { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--brand); margin-bottom: 8px; letter-spacing: .04em; }
.negic-tl-body b { font-family: var(--font-head); font-size: 18px; display: block; margin-bottom: 6px; }
.negic-tl-body p { color: var(--ink-2); font-size: 14.5px; margin: 0; }
/* Timeline + porodična fotografija (O nama, „Kako smo stigle dovde") */
.negic-tl-layout { display: grid; grid-template-columns: 1fr 360px; gap: 44px; align-items: start; }
.negic-tl-layout .negic-timeline { grid-template-columns: 1fr; gap: 28px; }
.negic-tl-layout .negic-timeline::before { top: 7px; bottom: 7px; left: 6px; right: auto; width: 2px; height: auto; }
.negic-tl-layout .negic-tl-item { padding-top: 0; padding-left: 30px; }
.negic-tl-layout .negic-tl-dot { top: 4px; }
.negic-tl-photo { margin: 0; }
.negic-tl-photo img { width: 100%; height: auto; border-radius: var(--r-lg); display: block; }
.negic-tl-photo figcaption { margin-top: 10px; font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 849px) {
  .negic-tl-layout { grid-template-columns: 1fr; gap: 30px; }
  .negic-tl-photo { max-width: 420px; }
}
.negic-about-quote { background: var(--brand-tint-2); border-radius: var(--r-lg); padding: 40px 56px; text-align: center; }
.negic-aq-mark { font-family: var(--font-head); font-size: 80px; line-height: .5; color: var(--brand); opacity: .25; height: 34px; }
.negic-about-quote p { font-family: var(--font-head); font-weight: 500; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.4; color: var(--ink); max-width: 32ch; margin: 18px auto 16px; }
.negic-about-quote span { font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; color: var(--muted); }
.negic-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.negic-value-card { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); padding: 28px 24px; }
.negic-value-ico { width: 50px; height: 50px; border-radius: 14px; background: var(--brand-tint); color: var(--brand-strong); display: grid; place-items: center; margin-bottom: 16px; }
.negic-value-ico .negic-svg-icon { width: 24px; height: 24px; }
.negic-value-card b { font-family: var(--font-head); font-size: 18px; display: block; margin-bottom: 8px; }
.negic-value-card p { color: var(--ink-2); font-size: 14.5px; margin: 0; }
.negic-stores-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.negic-section-lead { margin: 10px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; } /* bez max-width: rečenica „Gde smo" u jednom redu na desktopu (Milan 2026-07-19) */
/* Poslednja sekcija (familyband) bez donje margine — inače 108px praznine do footera */
.negic-about .negic-about-sec:last-child { margin-bottom: 0; }
.negic-store-card { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.negic-store-media { aspect-ratio: 16/6; background: var(--brand-tint); display: grid; place-items: center; color: var(--brand-strong); }
.negic-store-media .negic-pdp-icon { width: 40px; height: 40px; }
/* Kartica radnje sa pravom fotografijom (umesto SVG placeholder-a).
   Desktop: prirodna 4:3 visina fotke (2 kolone, izbalansirano). Mobilni: 16:9 crop
   preko position:absolute — bez toga sadržaj rasteže aspect-ratio kutiju na punu
   visinu slike pa kartica bude previsoka. */
.negic-store-media--img { aspect-ratio: auto; display: block; background: none; }
.negic-store-media--img img { width: 100%; height: auto; display: block; }
@media (max-width: 849px) {
  .negic-store-media--img { position: relative; aspect-ratio: 16/9; }
  .negic-store-media--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}
.negic-store-body { padding: 22px 24px 24px; }
.negic-store-body h3 { font-size: 22px; margin: 0 0 12px; }
.negic-store-row { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--ink-2); padding: 4px 0; }
.negic-store-row .negic-svg-icon { color: var(--brand); flex-shrink: 0; width: 16px; height: 16px; }
/* Tip radnje (natpis iznad naziva) + brendovi/napomena (npr. Negić Fashion) */
.negic-store-tip { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-strong); margin: -4px 0 14px; }
.negic-store-brands { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.negic-familyband { background: var(--brand-strong); color: #fff; border-radius: var(--r-lg); padding: 50px 56px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; }
.negic-familyband h2 { color: #fff; font-size: clamp(24px, 2.8vw, 34px); }
.negic-familyband > div > p:last-child { color: oklch(0.9 0.02 190); margin: 14px 0 0; font-size: 16px; max-width: 48ch; }
.negic-familyband-btns { display: flex; flex-direction: column; gap: 12px; }

/* --- Kontakt strana (dizajn contact.jsx) --- */
.negic-kontakt-hero { padding: 6px 0 22px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.negic-kontakt-hero h1 { font-size: clamp(28px, 3.2vw, 42px); }
.negic-kontakt-hero p { color: var(--muted); margin: 8px 0 0; font-size: 15.5px; max-width: 60ch; }
.negic-contact-grid { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
.negic-co-card { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); padding: 24px; }
.negic-co-card h3 { font-family: var(--font-head); font-size: 19px; margin: 0 0 18px; }
.negic-co-card .wpcf7-submit { border-radius: var(--r-pill); font-family: var(--font-head); font-weight: 600; }
.negic-contact-info { display: flex; flex-direction: column; gap: 16px; }
.negic-channels { display: flex; flex-direction: column; gap: 4px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px 18px; }
.negic-channel { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.negic-channel:last-child { border-bottom: none; }
.negic-channel:hover .negic-channel-tx b { color: var(--brand-strong); }
.negic-channel-ico { width: 42px; height: 42px; border-radius: 12px; background: var(--brand-tint); color: var(--brand-strong); display: grid; place-items: center; flex-shrink: 0; }
.negic-channel-ico .negic-svg-icon { width: 20px; height: 20px; }
.negic-channel-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.negic-channel-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.negic-channel-tx b { font-family: var(--font-head); font-size: 14px; color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
.negic-channel-tx i { font-style: normal; font-size: 12.5px; color: var(--muted); }
.negic-contact-stores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.negic-contact-store { background: var(--brand-tint-2); border-radius: var(--r); padding: 16px 18px; }
.negic-contact-store b { font-family: var(--font-head); font-size: 16px; display: block; margin-bottom: 8px; }
.negic-contact-social { display: flex; align-items: center; justify-content: space-between; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); padding: 16px 18px; }
.negic-contact-social > span { font-family: var(--font-head); font-weight: 600; font-size: 14.5px; }
.negic-cs-links { display: flex; gap: 10px; }
.negic-cs-links a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-tint-2); color: var(--brand-strong); transition: all .18s; }
.negic-cs-links a:hover { background: var(--brand-deep); color: #fff; transform: translateY(-2px); }
.negic-contact-maps { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
/* svaka radnja: bela kartica, mapa gore + naziv/uputstvo/adresa ispod (dizajn .map-card) */
.negic-map-card { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.negic-map-embed { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: var(--brand-tint-2); }
.negic-map-card-body { padding: 18px 22px 20px; }
.negic-map-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.negic-map-card-head h3 { font-family: var(--font-head); font-size: 18px; margin: 0; }
.negic-map-card-head a { font-family: var(--font-head); font-weight: 500; font-size: 13px; color: var(--brand); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.negic-map-card-head a:hover { color: var(--brand-strong); }
.negic-map-card-head a .negic-svg-icon { width: 14px; height: 14px; }
/* CF7 forma: 2-kol red (Ime/Telefon) + Tema pilule (dizajn topic-pills) */
.negic-co-card .negic-co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.negic-form-tema { margin-bottom: 14px; }
.negic-form-label { display: block; font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.negic-co-card .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 8px; }
.negic-co-card .wpcf7-radio .wpcf7-list-item { margin: 0; }
.negic-co-card .wpcf7-radio .wpcf7-list-item > label { display: inline-flex; cursor: pointer; margin: 0; font-weight: 600; }
.negic-co-card .wpcf7-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.negic-co-card .wpcf7-radio .wpcf7-list-item-label {
  display: inline-block;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  background: var(--brand-tint-2);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 600;
  transition: background .15s, color .15s;
}
.negic-co-card .wpcf7-radio input:checked + .wpcf7-list-item-label { background: var(--brand); color: #fff; }
.negic-co-card .wpcf7-radio .wpcf7-list-item > label:hover .wpcf7-list-item-label { background: var(--brand-tint); }
@media (max-width: 849px) {
  .negic-contact-grid, .negic-contact-maps { grid-template-columns: 1fr; }
}
@media (max-width: 549px) {
  .negic-co-card .negic-co-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   REBRAND 2026 — KATEGORIJA / LISTING (dizajn .cat-hero / listing-bar)
   ============================================================ */
/* Naslov kategorije = veliki Baloo 2 (cat-hero) */
.category-page-title .shop-page-title-inner h1,
.category-page-title h1.shop-page-title,
.shop-page-title.category-page-title .is-large h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 42px);
  color: var(--ink);
}
.category-page-title .woocommerce-breadcrumb {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--muted);
}
.term-description { color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: 72ch; }
.term-description p { margin: 0; }
/* Rezultat count = mono */
.woocommerce-result-count { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
/* Sort dropdown = pilula */
.woocommerce-ordering select.orderby {
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  padding: 9px 34px 9px 15px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  background-color: #fff;
}
/* Paginacija = zaobljeni kvadrati, aktivni brand */
.woocommerce nav.woocommerce-pagination ul { border: 0; gap: 8px; display: flex; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  border: 1px solid var(--line);
  color: var(--ink-2);
  min-width: 42px;
  line-height: 40px;
  padding: 0 6px;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--brand); color: var(--brand); background: transparent; }
/* Veliki naslov kategorije (cat-hero) */
.negic-cat-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.12;
}

/* ============================================================
   REBRAND 2026 — QUICK VIEW (Brzi pregled) + pretraga dugmad
   ============================================================ */
/* Quick View modal koristi single-product markup u .mfp-content */
.mfp-content .product .product-title,
.mfp-content .product h1,
.mfp-content .product h2 { font-family: var(--font-head); font-weight: 700; }
.mfp-content .product .price { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.mfp-content .product .price del { color: var(--faint); font-weight: 400; }
.mfp-content .product .price ins { color: var(--accent-strong); }
.mfp-content .product .single_add_to_cart_button.button {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--font-head) !important;
  font-weight: 600 !important;
  /* Ista visina kao qty stepper levo (50px). Flatsome dugmetu inače da veću
     podrazumevanu visinu pa u brzom pregledu štrči (Milan 2026-07-01). */
  min-height: 50px !important;
  height: 50px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mfp-content .product .single_add_to_cart_button.button:hover { background-color: var(--brand-strong) !important; }

/* --- Brzi pregled: layout po dizajnu .qv-* --- */
/* Modal kao zaobljena kartica */
.mfp-content .product-lightbox.lightbox-content { border-radius: var(--r-lg); overflow: hidden; }
.mfp-content .product-quick-view-container .product.row { margin: 0; }
/* Leva kolona: slika uz vrh kolone. NAPOMENA (2026-07-13): razlog za flex-start je bio da
   NOVO bedž ne "lebdi" iznad centrirane slike, ali je prevaziđen centriranjem celog reda
   (vidi blok "razmak oko slike" niže) — tamo kolona grli sliku pa bedž putuje sa njom. */
.mfp-content .product-quick-view-container .product-gallery {
  display: flex; align-items: flex-start; justify-content: center;
}
.mfp-content .product-quick-view-container .product-gallery .slider { width: 100%; }
.mfp-content .product-quick-view-container .product-gallery img { mix-blend-mode: normal; }
/* Cap 74vh (Milan 2026-07-01) je 2026-07-13 ZAMENJEN kvadratnim okvirom (blok niže):
   bio je vezan za viewport umesto za karticu, pa je na visokim ekranima pravio ogromne
   modale, a uska visoka slika (kviz 330x1000) razvlačila karticu na 666px. */
/* NOVO/sale badge uvučen od ivice (dizajn ga ne lepi za ćošak) */
.mfp-content .product-quick-view-container .badge-container { top: 16px !important; left: auto !important; right: 16px !important; }

/* --- Brzi pregled: razmak oko slike + vertikalno centriranje (Milan 2026-07-13) ---
   Slika je lepila za gornju i levu ivicu kartice (izmereno: belina gore 0, levo 0, dole 49)
   pa ju je zaobljeni ugao kartice sekao. Centriranje ide na .product.row, NE na sliku u koloni:
   kolona se tada ne rasteže na visinu teksta nego grli sliku, pa NOVO bedž (apsolutno
   pozicioniran u koloni) putuje SA slikom umesto da lebdi u praznini. Višak visine se deli
   ravnomerno iznad i ispod. Padding 24px je garantovani minimum od ivica i onda kad su kolone
   iste visine (tada centriranje samo po sebi ne daje ništa); manji je od desne kolone (34/32)
   jer packshotovi nose i sopstvenu belu marginu. */
.mfp-content .product-quick-view-container .product.row { align-items: center; }

/* --- Brzi pregled: kvadratni okvir za sliku (Milan 2026-07-13, Fable predlog) ---
   PROBLEM: uska visoka slika (kviz „Zabavni kviz: Fudbal", original 330x1000) razvlačila je
   karticu na 666px visine dok tekst zauzima 433px, a stajala je uz levu ivicu sa 210-283px
   mrtvog prostora desno. Uzrok necentriranosti: Flatsome crta `img` kao inline-block pa
   `margin: 0 auto` ne centrira, a flex child je bio `.slider` širine 100%, ne sama slika.
   REŠENJE: ne fiksiramo visinu modala (desna kolona varira: naslov 1-3 reda, duži/kraći opis
   pa bi tvrda visina sekla tekst), nego levu kolonu pravimo KVADRATNIM OKVIROM. Visina kartice
   time prestaje da zavisi od oblika slike: ista je za kviz, kvadrat i pejzaž.
   Obim: od 2315 objavljenih artikala 1801 je skoro kvadrat, ali 500 nije (283 usko, 202 široko,
   25 ekstremno) — zato okvir, ne izuzetak za dva kviza.
   USTUPAK: NOVO bedž sedi na uglu OKVIRA, ne na bitmapi. Kod uskih slika je i pre ovoga plutao
   u praznini pored slike; lepljenje za bitmapu proizvoljnog oblika tražilo bi JS. */
/* MOBILNI (stacked): info blok bliže slici — 34px gornjeg paddinga + 24px okvira se
   na mobilnom SABIRAJU u vertikalnu belinu slika→naslov (Milan 2026-07-14). Donji
   padding okvira NE diramo: aspect-ratio 1/1 drži kutiju kvadratnom pa smanjenje
   paddinga ne skraćuje kutiju (izmereno). Ostatak beline kod pojedinih artikala je
   belo UPEČENO u fajl slike (mali izvor dopunjen do kvadrata) — rešava se u katalogu. */
@media (max-width: 849px) {
  .mfp-content .product-lightbox-inner { padding-top: 16px !important; }
}
.mfp-content .product-quick-view-container .product-gallery {
  position: relative;          /* sidro za bedž */
  padding: 24px !important;    /* !important jer Flatsome gura `.row-collapse > .col { padding: 0 !important }` */
  display: block;              /* stari flex + flex-start više ne treba, centrira slajd (niže) */
  aspect-ratio: 1 / 1;         /* border-box: okvir 438x438, slici ostaje 390x390 unutar padding-a */
  max-height: calc(100vh - 60px - var(--wp-admin--admin-bar--height, 0px));   /* ista formula kao cap kartice */
  overflow: hidden;
}
/* Lanac do slike puni okvir. !important jer flickity postavlja inline visinu na
   .flickity-viewport i na sam slajd.
   GOTCHA: flickity NE pravi `li` nego `div.slide` (position:absolute). Selektor `.slides li`
   ne pogađa ništa, pa je slajd ostajao visok koliko i bitmapa (1180px kod kviza) i
   `max-height: 100%` na slici se merio prema NJEMU umesto prema okviru. Zato `.slide`. */
.mfp-content .product-quick-view-container .product-gallery .slider,
.mfp-content .product-quick-view-container .product-gallery .flickity-viewport,
.mfp-content .product-quick-view-container .product-gallery .flickity-slider,
.mfp-content .product-quick-view-container .product-gallery .slides,
.mfp-content .product-quick-view-container .product-gallery .slide,
.mfp-content .product-quick-view-container .product-gallery .slides li {
  height: 100% !important;
  max-height: 100% !important;
}
/* Slajd centrira sliku u OBE ose — ovo je popravka mrtvog prostora desno. */
.mfp-content .product-quick-view-container .product-gallery .slide,
.mfp-content .product-quick-view-container .product-gallery .slides li {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
/* Slika: contain u okviru. Element i dalje grli bitmapu (width/height auto), pa e2e merenja
   boundingBox-a mere stvarnu belinu oko slike, ne oko okvira.
   Radijus 8px: nevidljiv na packshotovima sa belom pozadinom, slikama koje idu do ivice kadra
   (Faber kutija) omekša ugao u skladu sa zaobljenom karticom. */
.mfp-content .product-quick-view-container .product-gallery img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  margin: 0;
  border-radius: 8px;
}
/* Bedž na uglu okvira: 24px padding kolone + 16px uvlačenja. */
.mfp-content .product-quick-view-container .badge-container { top: 40px !important; right: 40px !important; }
/* Close X: beli krug sa tamnim X (dizajn .qv-close), ne taman mix-blend-difference */
.mfp-wrap:has(.product-quick-view-container) .mfp-close {
  top: 14px !important; right: 14px !important; left: auto !important;
  width: 38px; height: 38px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .92) !important; color: var(--ink) !important;
  border-radius: 50%; opacity: 1;
  box-shadow: 0 2px 8px rgba(40, 60, 70, .14);
  mix-blend-mode: normal !important;
}
.mfp-wrap:has(.product-quick-view-container) .mfp-close:hover { background: #fff !important; color: var(--accent-strong) !important; }
/* Telo: padding i vertikalni ritam (dizajn .qv-body) */
.mfp-content .product-info.summary { font-size: 100% !important; }
.mfp-content .product-lightbox-inner {
  display: flex; flex-direction: column; gap: 8px; padding: 34px 32px !important;
}
/* Visina kartice ne sme preći prozor. Na niskim prozorima je desna kolona ranije
   izdužila karticu preko ekrana, pa se skrolovao ceo .mfp-wrap i slika je pri skrolu
   legla na gornju ivicu. Sada se duži sadržaj skroluje unutar kartice: na širem
   prozoru (kolone jedna-do-druge, >=850px) skroluje desna kolona, a na uskom prozoru
   (kolone naslagane, <=849px) skroluje ceo container. 60px = mfp-container padding
   (30px gore + 30px dole). Admin traka (samo ulogovani) gura sadržaj naniže i smanjuje
   raspoloživu visinu, pa oduzimamo i njenu visinu kroz WP promenljivu, uz fallback 0px
   za posetioce. (Milan 2026-07-12) */
@media (min-width: 850px) {
  .mfp-content .product-lightbox-inner {
    max-height: calc(100vh - 60px - var(--wp-admin--admin-bar--height, 0px));
    overflow-y: auto;
  }
}
@media (max-width: 849px) {
  .mfp-content .product-quick-view-container {
    max-height: calc(100vh - 60px - var(--wp-admin--admin-bar--height, 0px));
    overflow-y: auto;
  }
}
.mfp-content .product-lightbox-inner > .is-divider { display: none; }
.mfp-content .product-info .negic-pdp-brand { order: -1; margin: 0; }          /* brend iznad naslova */
.mfp-content .product-info h1 {
  font-family: var(--font-head); font-weight: 700; font-size: 24px;
  line-height: 1.16; margin: 2px 0 2px; letter-spacing: -0.01em;
}
.mfp-content .product-info a.plain:hover h1 { color: var(--brand-strong); }
.mfp-content .product .price { font-size: 28px; margin: 6px 0 2px; }
.mfp-content .product-info .woocommerce-product-details__short-description { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; margin: 2px 0 6px; }
/* qty + dugme u jednom redu, dugme popunjava */
.mfp-content .product-info form.cart { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 0; }
.mfp-content .product-info form.cart .quantity { margin: 0; flex: 0 0 auto; }
.mfp-content .product-info form.cart .single_add_to_cart_button { flex: 1 1 auto; }
/* „Naš izbor" bedž SAKRIVEN u brzom pregledu (Milan 2026-07-14): kupac ga je upravo
   video na kartici, a stabilnog mesta nema — bedž je zakačen za KOLONU galerije dok je
   slika (kapirana po visini) uža i centrirana, pa je visio 50px preko ivice; širina
   slike varira po formatu pa bi svako fiksno kačenje lutalo (ista pouka kao lightbox X).
   NAMERNO samo .negic-akcija-badge, ne ceo .badge-container: budući sale bedž (-X%)
   ima stvarnu vrednost na mestu odluke — njegovu geometriju rešavamo kad dođe. */
.product-quick-view-container .negic-akcija-badge { display: none; }
/* Brzi pregled: specifikacije lakše nego na PDP-u (dizajn .qv-specs) —
   samo gornja i donja linija, bez okvira/zaobljenja i bez linija između
   redova; redovi razmaknuti gap-om. (PDP koristi boksovan stil.) */
.mfp-content .product-info .negic-pdp-specs {
  border: none;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  overflow: visible;
  display: grid;
  gap: 10px;
  padding: 14px 0;
  margin: 10px 0 4px;
}
.mfp-content .product-info .negic-pdp-specs > div {
  padding: 0;
  border-bottom: none;
  /* Bez vertikalne crte između kolona — u brzom pregledu je stil lagan (samo gornja/donja
     linija), pa usamljena vertikala štrči; kolone razdvaja gap. PDP zadržava okvir.
     (Milan 2026-07-01, UI/UX) */
  border-right: none;
}
/* Dostupnost u brzom pregledu: lagana inline linija ispod cene (zamena za specs tabelu).
   Tirkizna tačka + tekst; bez labele, bez linija. (UX odluka 2026-07-04, Fable.) */
.mfp-content .product-info .negic-qv-stock {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em;
  color: var(--brand-strong); margin: 4px 0 2px;
}
.mfp-content .product-info .negic-qv-stock .negic-qv-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: 0 0 auto;
}
.mfp-content .product-info .negic-qv-stock.is-out { color: var(--muted); }
.mfp-content .product-info .negic-qv-stock.is-out .negic-qv-dot { background: var(--muted); }

/* Napomena + Detaljnije (dizajn .qv-note / .qv-more) */
.negic-qv-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 12px 0 0; }
.negic-qv-note .negic-pdp-icon { color: var(--brand); width: 18px; height: 18px; }
/* "Detaljnije o proizvodu": jasan sekundarni link (ne pill, da ne konkuriše CTA-u).
   Podvučen = nedvosmislen signal "klik"; boju forsira grupa na dnu (--brand-text, AA).
   Premešten je ODMAH ispod "Dodaj u korpu" (PHP prioritet), napomena o dostavi ide na dno. */
.negic-qv-more { align-self: flex-start; margin-top: 8px; font-family: var(--font-head); font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; }
.negic-qv-more:hover { gap: 9px; }
.negic-qv-more .negic-svg-icon { width: 15px; height: 15px; margin: 0; }
/* X za zatvaranje u uglu modala (dizajn .qv-close) — premešten JS-om u .product-lightbox */
.mfp-content .product-lightbox.lightbox-content { position: relative; }
.mfp-content .product-lightbox > .mfp-close {
  position: absolute; top: 14px; right: 14px; left: auto;
  width: 38px; height: 38px; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255, 255, 255, .92) !important; color: var(--ink) !important;
  box-shadow: var(--shadow-sm); opacity: 1 !important; font-size: 26px; line-height: 1; z-index: 6;
}
.mfp-content .product-lightbox > .mfp-close:hover { background: #fff !important; color: var(--accent) !important; opacity: 1 !important; }

/* Pretraga submit dugmad = brand teal (umesto clay secondary) — desktop + mobilni off-canvas */
.ux-search-submit,
button.ux-search-submit,
.searchform .button.icon,
.mobile-sidebar .searchform button,
#main-menu .searchform button {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.ux-search-submit:hover,
.mobile-sidebar .searchform button:hover { background-color: var(--brand-strong) !important; }

/* --- Responsive (strane) --- */
@media (min-width: 850px) and (max-width: 1024px) {
  .negic-brands-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 849px) {
  .negic-komplet-grid, .negic-brands-grid, .negic-values-grid,
  .negic-stores-grid, .negic-timeline, .negic-about-hero,
  .negic-komplet-cta, .negic-familyband { grid-template-columns: 1fr; }
  .negic-trustband { grid-template-columns: repeat(2, 1fr); }
  .negic-klist { grid-template-columns: 1fr; }
  .negic-komplet-cta, .negic-familyband { gap: 24px; padding: 32px 28px; }
  /* timeline slozen vertikalno: linija ide nadole kroz tacke, ne popreko */
  .negic-timeline { gap: 28px; }
  .negic-timeline::before { top: 7px; bottom: 7px; left: 6px; right: auto; width: 2px; height: auto; }
  .negic-tl-item { padding-top: 0; padding-left: 30px; }
  .negic-tl-dot { top: 4px; }
  /* O nama: kad se hero slozi u jednu kolonu, ispod fotografije se sabiraju padding hera (36px) i
     margina sledece sekcije (48px) = 84px, dok je iznad fotografije samo gap (48px). Razmak izjednacen
     na 48px sa obe strane (Milan, 2026-07-11). */
  .negic-about-hero { padding-bottom: 0; }
}

/* ============================================================
   REBRAND 2026 — FEEDBACK (2026-06-03): topbar, mega meni,
   inline kategorije, nav razmak, hero/komplet kontejnerske kartice
   ============================================================ */

/* --- Topbar ikone --- */
#top-bar .negic-tb-ico { display: inline-block; vertical-align: -2px; margin-right: 5px; opacity: .85; }
#top-bar strong { color: #fff; font-weight: 700; }

/* --- Nav: pun-širinski raspored + veći vertikalni razmak --- */
#wide-nav { padding: 5px 0; }
#wide-nav .flex-col.flex-center { flex: 1 1 100%; max-width: 100%; }
#wide-nav ul.header-bottom-nav { display: flex; align-items: center; width: 100%; gap: 2px; }
#wide-nav .header-bottom-nav > li > a.nav-top-link { padding-top: 11px; padding-bottom: 11px; }
/* "Komplet za prvaka" gurnut skroz desno */
#wide-nav .header-bottom-nav li.menu-komplet-btn { margin-left: auto; }
/* Stegni horizontalni padding nav linkova (osim "Sve kategorije" dugmeta) da
   svih 9 stavki stane u JEDAN red — ranije je "Komplet za prvaka" (margin-left:auto)
   prelazio prag širine (~1050px) i padao u 2. red. Kad sve stane, auto-margin
   levo poravna ostatak pa "Sve kategorije" počinje na levoj ivici. */
#wide-nav .header-bottom-nav > li.menu-item:not(.menu-item-38) > a.nav-top-link {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* --- "Sve kategorije" = MEGA (3 kol; gradi se od pravog ugnježdenog menija:
   kategorija = header sa ikonom, potkategorije = inline lista; dizajn .mega) --- */
#wide-nav li.menu-item-38 > ul.nav-dropdown {
  width: 1040px;
  max-width: 94vw;
  left: 0;
  /* 4 kolone (12 odeljenja): kraće nego 3-kol (redovi se poravnavaju na najviši blok,
     pa 3 kol postane previsoko). Grid radi sa Flatsome nested dropdown strukturom. */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 22px;
  padding: 22px;
}
#wide-nav li.menu-item-38 > ul.nav-dropdown:before,
#wide-nav li.menu-item-38 > ul.nav-dropdown:after { display: none !important; }
/* Catch-all: nijedan nav dropdown nema kvaku/strelicu (čiste ivice). */
#wide-nav .nav-dropdown::before,
#wide-nav .nav-dropdown::after { display: none !important; }
/* Kvaka (trougao) je zapravo na samoj meni-stavci (li::before/::after) — sakrij je. */
#wide-nav li.menu-item-38::before,
#wide-nav li.menu-item-38::after,
#wide-nav li.menu-inline-cat::before,
#wide-nav li.menu-inline-cat::after { display: none !important; }
/* svaka kategorija = kolona */
#wide-nav li.menu-item-38 > ul.nav-dropdown > li {
  margin: 0;
  width: 100%;
  position: static;
}
/* header kategorije (level-1) = ikona-tile + naziv (Baloo 2 700) */
#wide-nav li.menu-item-38 > ul.nav-dropdown > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--ink) !important;
  padding: 6px;
  border-radius: var(--r-sm);
  /* boks grli ikonu+tekst (~223px ≤ 232px kolona) da dug naslov ne viri van boksa desno.
     display ostaje flex (inline-flex bi dodao line-box razmak) — Milan 2026-07-14. */
  width: fit-content;
  margin: 0;
}
/* Glavna kategorija (sa sličicom): hover = mint pilula koja grli ikonu+tekst
   (varijanta B, Milan 2026-07-14). !important na boji je obavezan jer bazno pravilo
   iznad ima color: var(--ink) !important. */
#wide-nav li.menu-item-38 > ul.nav-dropdown > li > a:hover { background: var(--brand-tint-2); color: var(--brand-strong) !important; }
#wide-nav li.menu-item-38 > ul.nav-dropdown > li > a,
#wide-nav li.menu-item-38 > ul.nav-dropdown > li > ul.nav-dropdown > li > a { text-transform: none; }
#wide-nav li.menu-item-38 > ul.nav-dropdown > li > a .icon-angle-down { display: none; }
#wide-nav li.menu-item-38 > ul.nav-dropdown > li > a .negic-svg-icon {
  width: 30px; height: 30px;
  padding: 7px;
  box-sizing: border-box;
  background: var(--brand-tint);
  color: var(--brand-strong);
  border-radius: 8px;
  margin: 0;
  flex-shrink: 0;
}
/* Prava sličica kategorije u megameniju (umesto ikone) */
#wide-nav li.menu-item-38 > ul.nav-dropdown > li > a .negic-menu-cat-thumb {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; overflow: hidden;
  display: inline-block; background: var(--brand-tint-2);
}
#wide-nav li.menu-item-38 > ul.nav-dropdown > li > a .negic-menu-cat-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  mix-blend-mode: multiply;  /* belo iz fotografije stopi sa mint podlogom (nema belog okvira) */
}
/* potkategorije (level-2) = inline lista (ne flyout) */
#wide-nav li.menu-item-38 > ul.nav-dropdown > li > ul.nav-dropdown {
  position: static !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  background: none !important;
  padding: 2px 0 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  width: auto !important;
}
#wide-nav li.menu-item-38 > ul.nav-dropdown > li > ul.nav-dropdown:before,
#wide-nav li.menu-item-38 > ul.nav-dropdown > li > ul.nav-dropdown:after { display: none !important; }
/* Podkategorije u megameniju = ul.nav-column > li.menu-subcat > a */
#wide-nav li.menu-item-38 .menu-subcat { margin: 0 !important; }
#wide-nav li.menu-item-38 .nav-column { padding: 0 !important; }
#wide-nav li.menu-item-38 .menu-subcat > a {
  display: block;
  /* tekst ostaje uvučen 48px (40 margin + 8 padding) kao pre, ali hover pilula grli
     SAMO tekst (fit-content) umesto cele širine kolone — Milan 2026-07-14. */
  padding: 3px 8px !important;
  width: fit-content;
  margin-left: 40px;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;          /* samo kategorija je bold */
  font-size: 14.5px !important;         /* iste veličine kao kategorija */
  color: var(--ink-2) !important;
  border-radius: var(--r-sm);
}
#wide-nav li.menu-item-38 > ul.nav-dropdown > li > ul.nav-dropdown > li > a:hover { background: var(--brand-tint-2); color: var(--brand-strong); }
/* Bez horizontalnih linija između stavki megamenija (dizajn) */
#wide-nav li.menu-item-38 ul.nav-dropdown li,
#wide-nav li.menu-item-38 ul.nav-dropdown li > a { border: 0 !important; box-shadow: none !important; }
/* Dropdown podkategorija na inline kategorijama (#7) — bez horizontalnih linija. */
#wide-nav li.menu-inline-cat ul.nav-dropdown li,
#wide-nav li.menu-inline-cat ul.nav-dropdown li > a { border: 0 !important; box-shadow: none !important; }
/* Bez "špica"/strelice na vrhu boksa — čiste ivice (dizajn). */
#wide-nav li.menu-inline-cat ul.nav-dropdown::before,
#wide-nav li.menu-inline-cat ul.nav-dropdown::after { display: none !important; }
#wide-nav li.menu-inline-cat ul.nav-dropdown li > a { padding: 7px 12px; font-size: 13.5px; }
/* Bez strelice nadole pored inline kategorija + bez rezervisanog prostora za nju. */
#wide-nav li.menu-inline-cat > a .icon-angle-down,
#wide-nav li.menu-inline-cat > a::after { display: none !important; }
/* Simetričan padding (ranije padding-right:0 je sekao hover box desno). */
#wide-nav li.menu-inline-cat.menu-item-has-children > a { padding-right: 11px !important; }

/* Grid ikonica pre "Sve kategorije" dolazi iz PHP-a (negic_nav_util_icons). */
#wide-nav .header-bottom-nav > li.menu-item-38 > a.nav-top-link .negic-nav-ico { margin-right: 7px; }
#wide-nav .header-bottom-nav > li.menu-item-38 > a.nav-top-link .negic-nav-ico .negic-svg-icon { width: 16px; height: 16px; }

/* ============================================================
 * LIVE PRETRAGA — FiboSearch dropdown po dizajnu (.search-* u styles.css)
 * FiboSearch klase: .dgwt-wcas-suggestion(-product/-tax/-cat/-more).
 * Redosled iz plugina: kategorije pa proizvodi -> tagovi idu na vrh.
 * ============================================================ */

/* Panel: bela kartica, radius 18px, velika senka (dizajn .search-pop).
   flex-wrap: kategorije postaju pilule u redu, proizvodi i "prikaži sve" pun red. */
.dgwt-wcas-suggestions-wrapp {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 8px !important;
  flex-wrap: wrap !important;
  align-content: flex-start;
  gap: 2px 7px;
}
/* display:flex SAMO dok je pretraga otvorena (body.dgwt-wcas-open). Bez ovoga bi
   flex !important nadjačao pluginov display:none pri zatvaranju (X/Esc/klik vani)
   i panel bi ostao vidljiv. */
body.dgwt-wcas-open .dgwt-wcas-suggestions-wrapp { display: flex !important; }

/* Sakrij naslove grupa ("Kategorije"/"Proizvodi") i inline tax labelu — dizajn ih nema. */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-headline,
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-st--direct-headline { display: none !important; }

/* Osnovni red predloga */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion {
  border: none !important;
  border-radius: var(--r-sm) !important;
  background: transparent !important;
  text-align: left;
  transition: background .15s ease;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion:hover,
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected {
  background: var(--brand-tint-2) !important;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected {
  background: var(--brand-tint) !important; /* aktivan red (strelice tastature) = jači tint */
}

/* --- Proizvod (slika + naziv + brend + cena) --- */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-product {
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100%;          /* pun red */
  padding: 9px 10px !important;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-si {
  width: 46px !important;
  height: 46px !important;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--brand-tint-2);
  display: grid;
  place-items: center;
  margin: 0 !important;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-si img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  mix-blend-mode: multiply;  /* belo iz fotografije stopi sa mint podlogom (nema belog okvira) */
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-content-wrapp {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-st { flex: 1; min-width: 0; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-st-title {
  display: block;
  font-family: var(--font-head) !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;   /* 13.5 → 14.5 (2026-07-04, bilo sitno) */
  color: var(--ink) !important;
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-st-title .dgwt-wcas-st-highlight {
  background: none !important; color: var(--brand-strong) !important; font-weight: 700;
}
/* Brend (ubačen u "desc" slot) -> mono uppercase labela (dizajn .search-info i) */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sd {
  display: block;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted) !important;
  margin-top: 2px !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sd .dgwt-wcas-st-highlight { background: none !important; color: var(--muted) !important; }
/* Cena (dizajn .search-item em) */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-meta {
  margin-left: auto;
  display: flex; align-items: center;  /* cena u liniji sa naslovom */
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp {
  display: block;
  line-height: 1.2;                    /* plugin inline + visok line-height = cena padala ispod linije naslova */
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 14px !important;          /* 13.5 → 14 (2026-07-04) */
  color: var(--brand-strong) !important; /* cena teal (dizajn .search-item em) */
  white-space: nowrap;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp .amount,
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp ins,
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp ins .amount { color: var(--brand-strong) !important; }
/* prekrižena (stara) cena ostaje prigušena, jača od pravila iznad */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp del,
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp del .amount { color: var(--muted) !important; font-weight: 400; margin-right: 5px; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp ins { text-decoration: none; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp .screen-reader-text { display: none !important; }

/* --- Tag kategorije (pilula na vrhu, dizajn .search-tag) --- */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  padding: 6px 11px 6px 9px !important;
  margin: 2px 0 !important;
  font-family: var(--font-body) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--brand-strong) !important;
  background: var(--brand-tint-2) !important;
  border-radius: var(--r-pill) !important;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax:hover,
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax.dgwt-wcas-suggestion-selected {
  background: var(--brand-tint) !important;
}
/* Mala ikona kategorije ispred imena (generička "grid" silueta u brand boji) */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax::before {
  content: "";
  width: 14px; height: 14px; flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--negic-cat-ico) center / contain no-repeat;
          mask: var(--negic-cat-ico) center / contain no-repeat;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax .dgwt-wcas-st {
  font: inherit !important; color: inherit !important; flex: 0 1 auto; min-width: 0;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax .dgwt-wcas-st-breadcrumbs { display: none !important; }

/* Čip sa pravom slikom kategorije (image_src puni negic_fibo_cat_image u functions.php):
   ista anatomija kao „Pregledaj po odeljenju" u mobilnoj pretrazi (.negic-se-cat):
   pastelna pilula u boji odeljenja + krug 30px koji slika POPUNJAVA (cover).
   Boju odeljenja čitamo iz href-a (hijerarhijski permalink sadrži root slug).
   Grid ikona i stari kompaktni stil ostaju samo kad slike nema. */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax:has(.dgwt-wcas-si) {
  padding: 5px 15px 5px 5px !important;
  gap: 8px;
  font-family: var(--font-head) !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  background: var(--brand-tint-2) !important; /* fallback pilula (Paketi i sl.) */
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax:has(.dgwt-wcas-si)::before { display: none; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax .dgwt-wcas-si {
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px;
  background: var(--brand-tint);
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax .dgwt-wcas-si img {
  object-fit: cover;
  /* plugin ramuje sliku (padding 2px + border + bela pozadina + max-height 90%
     + radius 3px) — sve to skidamo da slika popuni ceo krug */
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
  padding: 0;
  border: none;
  background: transparent;
}
/* FiboSearch uz sliku umotava tekst u .dgwt-wcas-content-wrapp; izravnaj ga na čip flex */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax .dgwt-wcas-content-wrapp { display: contents; }

/* Boja pilule po korenom odeljenju (isti OKLCH tonovi kao homepage/drawer/empty state;
   Kancelarijski/Papir/Poklon/Galanterija/Flašice su novi tonovi u istom sistemu) */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax[href*="/kategorija/skolski-pribor/"]         { background: oklch(0.96 0.025 250) !important; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax[href*="/kategorija/rancevi/"]                { background: oklch(0.96 0.028 200) !important; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax[href*="/kategorija/pernice/"]                { background: oklch(0.96 0.025 20)  !important; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax[href*="/kategorija/knjige/"]                 { background: oklch(0.96 0.03 120)  !important; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax[href*="/kategorija/igracke/"]                { background: oklch(0.96 0.03 300)  !important; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax[href*="/kategorija/likovno/"]                { background: oklch(0.96 0.035 70)  !important; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax[href*="/kategorija/kancelarijski-materijal/"]{ background: oklch(0.96 0.025 230) !important; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax[href*="/kategorija/papir/"]                  { background: oklch(0.96 0.03 45)   !important; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax[href*="/kategorija/poklon-program/"]         { background: oklch(0.96 0.03 330)  !important; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax[href*="/kategorija/galanterija/"]            { background: oklch(0.96 0.03 165)  !important; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax[href*="/kategorija/flasice-i-uzina/"]        { background: oklch(0.96 0.03 275)  !important; }

/* Hover/strelice: boja pilule ostaje (pravila iznad su kasnija u fajlu od opštih
   hover pravila), pa povratnu informaciju daje blago tamnjenje */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax:has(.dgwt-wcas-si):hover,
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax:has(.dgwt-wcas-si).dgwt-wcas-suggestion-selected {
  filter: brightness(0.95) saturate(1.5);
}

/* Vazduh između reda čipova i PRVOG proizvoda (prvi = proizvod kome neposredni
   prethodnik nije proizvod; između čipova i njega stoji samo skriveni headline) */
.dgwt-wcas-suggestions-wrapp:has(.dgwt-wcas-suggestion-tax)
  .dgwt-wcas-suggestion-product:not(.dgwt-wcas-suggestion-product + .dgwt-wcas-suggestion-product) {
  margin-top: 6px;
}

/* --- "Prikaži sve rezultate" (dizajn .search-all) --- */
/* Red čita kao dugme, ne kao fusnota: tirkizna podloga + strelica desno (Milan 2026-07-13).
   Za široke upite („ranac", „sveska") to je glavna akcija panela — panel prikazuje 7, a
   rezultata ume biti 31+. Podloga je najsvetliji tint da ne otima pažnju proizvodima iznad. */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-more {
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 13px 12px !important;
  margin-top: 4px;
  background: var(--brand-tint-2) !important;
  border-top: 1px solid var(--line-2) !important;
  border-radius: 0 0 var(--r-sm) var(--r-sm) !important;
  transition: background .15s ease;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-more:hover,
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-more.dgwt-wcas-suggestion-selected {
  background: var(--brand-tint) !important;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-st-more {
  display: flex !important;
  align-items: center;
  width: 100%;
  font-family: var(--font-head) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  color: var(--brand-text) !important;
}
/* strelica gurnuta uz desnu ivicu (margin-left:auto), isti smer kao CTA linkovi na sajtu */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-st-more::after {
  content: "→";
  margin-left: auto;
  padding-left: 10px;
  font-size: 15px;
  line-height: 1;
  color: var(--brand) !important;
}
/* margin, ne razmak iz HTML-a: `display:flex` iznad proguta vodeći prazan znak u „ (31)" */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-st-more-total {
  margin-left: 5px;
  color: var(--muted) !important;
}
/* MOBILNI: broj rezultata bi stajao DVAPUT na istom ekranu — gore u našem brojaču
   („159 rezultata za „pernica"", js/search.js, dodat 2026-07-04 jer overlay prekrije ceo
   sajt) i dole u ovom dugmetu. Na mobilnom ga zato gasimo; na desktopu OSTAJE, jer tamo
   nema gornjeg brojača pa je ovo jedini nosilac broja. (Milan 2026-07-13.)
   ⚠ SAMO display:none, NE uklanjati element iz DOM-a: gornji brojač čita ukupan broj baš
   iz `.dgwt-wcas-st-more-total` (js/search.js updateCount). Bez njega bi pao na broj
   prikazanih (7) umesto ukupnih (159). */
.dgwt-wcas-overlay-mobile .dgwt-wcas-st-more-total { display: none; }

/* Prazno stanje (0 rezultata). Ranije je pisalo samo „Nema rezultata" i tu se kupac gubio:
   nula linkova, slepa ulica. Sada nosi telefon i izlaz na jake kategorije (Milan 2026-07-13).
   HTML dolazi iz FiboSearch labele `search_no_results_text` (plugin je renderuje kao HTML). */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-nores {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 20px 14px !important;
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
}
.negic-nores-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.negic-nores-tel { color: var(--muted); }
.negic-nores-tel a {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--brand-text);
  white-space: nowrap;
}
.negic-nores-tel a:hover { color: var(--brand-strong); }
/* kategorije kao pilule: jedini put dalje za kupca koji nije našao artikal */
.negic-nores-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}
/* Ciljamo `.negic-nores-cats a`, NE klasu na samom <a>: WP sanitizacija opcije obriše
   class sa <a> tagova (na <span> je zadrži), pa klasa .negic-nores-cat nikad ne stigne. */
.negic-nores-cats a {
  padding: 6px 12px;
  background: var(--brand-tint-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-text) !important;
  transition: background .15s ease;
}
.negic-nores-cats a:hover { background: var(--brand-tint); }

/* SVG maska za ikonu kategorije (feather "grid") */
:root { --negic-cat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }

/* Mobilni: panel preko širine (FiboSearch overlay već radi, samo uskladimo izgled) */
@media (max-width: 849px) {
  .dgwt-wcas-suggestions-wrapp { border-radius: var(--r-sm) !important; }
}

/* --- Hero kao kontejnerska kartica (dizajn .hero-card) --- */
.negic-hero-card {
  background: var(--brand-tint-2);
  border-radius: var(--r-lg);
  padding: 50px 52px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.negic-hero-card::after {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: var(--brand-tint);
  opacity: .6;
  z-index: 0;
}
.negic-hero-card > .row { position: relative; z-index: 1; margin-bottom: 0; }

/* --- Komplet banner kao kontejnerska kartica (dizajn .bundle, accent-tint) --- */
.negic-bundle-card {
  background: var(--accent-tint);
  border-radius: var(--r-lg);
  padding: 26px 32px;
}
.negic-bundle-card > .row { margin-bottom: 0; }

@media (max-width: 849px) {
  .negic-hero-card { padding: 28px 22px; }
  .negic-bundle-card { padding: 22px 20px; }
}

/* ============================================================
   REBRAND 2026 — FEEDBACK #2: topbar tekst+ikone, logo manji,
   korpa kao dizajn, prostor oko nav pilule
   ============================================================ */

/* --- Topbar: veći tekst, ikon-kutije pune visine, sve vertikalno centrirano --- */
#top-bar.header-top { padding: 0; }
#top-bar .flex-row { height: 40px; }
#top-bar,
#top-bar .nav > li > a,
#top-bar .nav > li,
#top-bar .html,
#top-bar a { font-size: 13px !important; }
/* svi nivoi topbara: fiksna visina 40px, vertikalno centrirano */
#top-bar .flex-col,
#top-bar .nav,
#top-bar .nav > li,
#top-bar .nav > li.html,
#top-bar li.html_topbar_left,
#top-bar li.html_nav_position_text,
#top-bar li.html_top_right_text,
#top-bar .html a { display: flex !important; align-items: center; }
/* Međuširina (850–~1100px, pre nego što se bar sakrije ≤849px): tekst ne sme da se
   prelomi u 2 reda jer je flex-row fiksno 40px (inače „polomljeni" topbar). */
#top-bar .nav > li.html,
#top-bar .html a { white-space: nowrap; }
/* ikon-kutije: fiksno 40px = puna visina bara (sve iste, dodiruju gore/dole) */
#top-bar .negic-tb-ico {
  width: 38px;
  height: 40px;
  align-self: center;
  padding: 11px 10px;
  box-sizing: border-box;
  background: rgba(255,255,255,.13);
  border-radius: 0;
  margin: 0 11px;
  flex-shrink: 0;
  opacity: 1;
  color: #fff;
}
/* Uska međuširina (850–991px): zbij ikon-kutije i razmake da telefon desno ne
   padne u drugi red (na ≥992px ima dovoljno mesta, ≤849px je bar ionako skriven). */
@media (min-width: 850px) and (max-width: 991px) {
  #top-bar .negic-tb-ico { margin: 0 5px; }
}

/* --- Logo: manji + ukloni belu pozadinu (multiply na krem header) --- */
#logo img.header-logo,
#logo img.header-logo-dark {
  max-height: 52px;
  width: auto;
  mix-blend-mode: multiply;
}

/* --- Korpa: ikona + "Korpa" (bez cene), kao dizajn .cart-btn --- */
.header-main .cart-item .header-cart-link {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
}
.header-main .cart-item .cart-price { display: none; }
.header-main .cart-item .header-cart-title { font-size: 0; line-height: 1; }
.header-main .cart-item .header-cart-title::after {
  content: "Korpa";
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.header-main .cart-item .icon-shopping-basket { font-size: 23px; color: var(--ink-2); }
.header-main .cart-item:hover .icon-shopping-basket,
.header-main .cart-item:hover .header-cart-title::after { color: var(--brand-strong); }
/* Stabilna sirina korpe: bez ovoga se tekst "Korpa" suzi kad se font ucita
   (font-display:swap, 2026-07-22) pa ikonica skoci ~3px udesno. Pin na siru
   (pre-swap) vrednost + centriranje = ikonica se ne pomera.
   SAMO DESKTOP: na mobilnom je korpa okrugao 40px krug pa bi ga min-width:66px
   razvukao u oval (uoceno 2026-07-22). */
@media (min-width: 850px) {
  .header-main .cart-item .header-cart-link,
  .header-cart-link.nav-top-link { min-width: 66px !important; justify-content: center !important; }
}

/* --- Nav: prostor iznad/ispod "Sve kategorije" pilule --- */
#wide-nav { padding: 10px 0; }

/* --- Utility stavke (Brendovi/Novo/Komplet) odvojene od kategorija --- */
.negic-nav-ico { display: inline-flex; vertical-align: middle; margin-right: 7px; }
.negic-nav-ico .negic-svg-icon { width: 16px; height: 16px; margin: 0; }
/* vertikalni divider pre "Brendovi" (granica kategorije | utility) */
/* „Brendovi" separator: levi margin 12→8 i padding 18→14 (deo oslobađanja prostora 2026-07-08). */
#wide-nav .header-bottom-nav li.menu-brendovi { margin-left: 8px !important; padding-left: 14px; position: relative; }
#wide-nav .header-bottom-nav li.menu-brendovi::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 20px;
  background: var(--line);
}

/* ============================================================
 * RECENZIJE — PDP tab (dizajn product.jsx / .rev-* u styles.css)
 * WooCommerce native recenzije, restilizovane preko child template-a.
 * ============================================================ */

.negic-reviews { font-family: var(--font-body); }
.negic-reviews #comments { display: flex; flex-direction: column; gap: 26px; }

/* Zvezde (popunjene = accent/clay, prazne = granica) */
.negic-stars { display: inline-flex; align-items: center; gap: 1px; line-height: 0; vertical-align: middle; }
.negic-star { color: var(--line); }
.negic-star.is-on { color: var(--accent); }

/* --- Sažetak ocene: prosek + zvezde + raspodela sa trakama --- */
.rev-summary {
  display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center;
  background: var(--brand-tint-2); border-radius: var(--r); padding: 22px 26px; max-width: 560px;
}
.rev-score { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rev-score b { font-family: var(--font-head); font-weight: 700; font-size: 42px; line-height: 1; color: var(--ink); }
.rev-score span { font-size: 12px; color: var(--muted); margin-top: 2px; }
.rev-bars { display: flex; flex-direction: column; gap: 6px; }
.rev-bar { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.rev-bar > span { display: inline-flex; align-items: center; gap: 3px; width: 30px; color: var(--ink-2); font-family: var(--font-mono); }
.rev-bar > span .negic-star { color: var(--accent); }
.rev-track { flex: 1; height: 7px; border-radius: 7px; background: oklch(0 0 0 / 0.06); overflow: hidden; }
.rev-fill { height: 100%; background: var(--accent); border-radius: 7px; }
.rev-bar i { font-style: normal; width: 16px; text-align: right; font-family: var(--font-mono); }

/* --- Lista recenzija (reset WooCommerce/Flatsome commentlist) --- */
.negic-reviews .rev-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.negic-reviews .rev-list .rev-item {
  display: flex; gap: 14px; margin: 0;
  padding: 18px 0; border-bottom: 1px solid var(--line-2);
  list-style: none; background: none;
}
.negic-reviews .rev-list .rev-item:last-child { border-bottom: none; }
.negic-reviews .rev-list .rev-item::before { display: none; } /* ukloni eventualni marker */

.rev-avatar {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
  background: var(--brand); color: #fff; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 17px;
}
.rev-body { flex: 1; min-width: 0; }
.rev-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rev-head b { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink); }
.rev-verified {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; color: var(--brand);
  background: var(--brand-tint); padding: 3px 9px; border-radius: var(--r-pill);
}
.rev-verified .negic-svg-icon { width: 12px; height: 12px; margin: 0; }
.rev-meta { display: flex; align-items: center; gap: 10px; margin: 5px 0 8px; font-size: 12.5px; color: var(--muted); }
.negic-reviews .rev-body p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.6; max-width: 64ch; }
.woocommerce-review__awaiting-approval { color: var(--accent-strong); font-size: 13px; }

/* Prazno stanje */
.negic-noreviews {
  background: var(--brand-tint-2); border-radius: var(--r);
  padding: 22px 24px; color: var(--ink-2); font-size: 14.5px; margin: 0;
}

/* --- Forma za recenziju (uredna, po tokenima) --- */
#review_form_wrapper { border-top: 1px solid var(--line-2); padding-top: 24px; }
#review_form .comment-reply-title { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--ink); display: block; margin-bottom: 14px; }
#review_form .comment-form-rating label,
#review_form .comment-form-author label,
#review_form .comment-form-email label,
#review_form .comment-form-comment label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
#review_form input[type="text"],
#review_form input[type="email"],
#review_form select#rating,
#review_form textarea {
  width: 100%; max-width: 420px; padding: 10px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: 14px; color: var(--ink); background: #fff;
}
#review_form textarea { max-width: 100%; }
#review_form input:focus, #review_form select#rating:focus, #review_form textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint);
}
#review_form .comment-form-rating, #review_form .comment-form-author,
#review_form .comment-form-email, #review_form .comment-form-comment { margin-bottom: 14px; }
#review_form .required { color: var(--accent-strong); }

/* Mobilni: sažetak u jednoj koloni */
@media (max-width: 849px) {
  .rev-summary { grid-template-columns: 1fr; gap: 18px; text-align: center; max-width: none; }
  .rev-score { flex-direction: row; gap: 10px; justify-content: center; }
}

/* ============================================================
 * PDP — PUN DIZAJN / DISANJE (dizajn product.jsx .pdp-*)
 * ============================================================ */

/* Disanje: ukloni mali desni sidebar, razmak između galerije i sažetka. */
.single-product .product-sidebar-small { display: none !important; }
.single-product .product-main .product-gallery.large-6 { width: 50%; padding-right: 0; }
.single-product .product-main .product-info.summary {
  padding-left: 40px;
}
@media (min-width: 850px) {
  /* Galerija skroluje normalno sa stranicom. Ranije je bila position:sticky (slika se
     „kačila" 120px od vrha dok sažetak klizi), ali je delovalo kao da slika klizi nadole
     u odnosu na sadržaj — Milan traži da miruje uz stranicu (2026-07-07). */
  .single-product .product-main .product-gallery { align-self: start; }
}

/* --- PDP: cap visine glavne slike (Milan 2026-07-13, Fable predlog) ---
   PROBLEM: visina strane je pratila OBLIK slike. Uska visoka slika (kviz, original
   330x1000) prikazivala se na 525x1591 = 177% visine ekrana, a desna kolona se rasteže
   na istu visinu, pa je ispod dugmeta „Dodaj u korpu" zjapilo 1157px praznine (izmereno).
   Uz to se slika forsirala na širinu kolone i PREKO svoje rezolucije (330 -> 525), pa je
   bila i ogromna i mutna; 267 artikala (12%) ima glavnu sliku užu od kolone.

   REŠENJE: cap visine vezan za ekran + `width: auto` (slika se više ne uvećava preko
   prirodne veličine — manja je, ali oštra). Praznina ispod dugmeta nestaje sama: kad
   slika padne ispod visine teksta, visinu reda diktira TEKST, ne slika.

   NIJE kvadratni okvir kao u brzom pregledu: tamo okvir postoji da kartica modala ne menja
   visinu po obliku slike, a ovde strana normalno skroluje. Kvadrat bi smanjio korice knjiga
   (283 portret artikla, a knjige su nam jezgro) i dodao praznu belinu pejzažnim (202).
   Cap dira SAMO visoke slike, kvadrat bi dirao sve.

   display:block jer Flatsome crta img kao inline-block pa `margin: auto` ne centrira;
   !important jer flickity i Flatsome guraju inline stilove. */
.single-product .product-main .product-gallery .product-gallery-slider .slide img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: min(70vh, 700px);   /* vh štiti niske ekrane, px plafon vrlo visoke */
  margin: 0 auto !important;
}
@media (max-width: 849px) {
  /* Mobilni: stroži cap — ekran je niži, a dole stoji sticky bar sa „Dodaj u korpu".
     `svh` računa vidljivu visinu sa URL barom; `vh` red iznad ostaje kao fallback. */
  .single-product .product-main .product-gallery .product-gallery-slider .slide img {
    max-height: 60vh;
    max-height: 60svh;
  }
}

/* Vertikalni ritam sažetka */
.single-product .product-info.summary > * { margin-bottom: 0; }
.single-product .product-info .product-title {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.18;
  margin: 4px 0 8px; letter-spacing: -0.01em;
}
.single-product .product-info .price {
  font-family: var(--font-head); font-weight: 700; font-size: 30px;
  color: var(--ink); margin: 6px 0 0; display: inline-flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.single-product .product-info .price del { color: var(--faint); font-weight: 400; font-size: 18px; }
.single-product .product-info .price ins { color: var(--accent-strong); }
.single-product .product-info .woocommerce-product-details__short-description {
  color: var(--ink-2); font-size: 15.5px; line-height: 1.65; margin: 12px 0 4px; max-width: 52ch;
}
.single-product .product-info .cart { margin: 20px 0 0; }
/* qty + "Dodaj u korpu" u jednom redu, dugme popunjava (dizajn .pdp-buy) */
.single-product .product-info form.cart { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.single-product .product-info form.cart .quantity { margin: 0; flex: 0 0 auto; }
.single-product .product-info form.cart .single_add_to_cart_button { flex: 1 1 auto; }
/* Qty stepper = JEDAN pill sa okvirom (dizajn .qty / styles.css), konzistentno svuda
   gde Flatsome renderuje .ux-quantity (PDP, korpa strana, brzi pregled). Korpa-drawer
   (.negic-mc-qty) već prati isti obrazac (dizajn .qty-sm). */
.ux-quantity.quantity {
  display: inline-flex !important;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
  /* Bez bele pozadine — providno kao stranica (dizajn .qty; Milan 2026-06-13). */
  background: transparent;
}
.ux-quantity .ux-quantity__button {
  position: static;
  width: 42px; height: 46px; margin: 0; padding: 0;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  border-radius: 0;
  color: var(--ink-2); font-size: 19px; line-height: 1;
  display: grid; place-items: center;
  transition: color .15s ease;
}
.ux-quantity .ux-quantity__button:hover { color: var(--brand); background: transparent !important; }
.ux-quantity input.qty {
  width: 42px; height: 46px; margin: 0; padding: 0;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  /* 17px (Milan 2026-07-14): na 15px je cifra delovala sitno u piluli 46px naspram
     punog dugmeta — vizuelna težina, ne čitljivost. Važi za QV/PDP/sticky. */
  font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--ink);
  text-align: center; -moz-appearance: textfield;
}
.ux-quantity input.qty::-webkit-outer-spin-button,
.ux-quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* PDP glavni red — ISTORIJA: 2026-07-08 broj izjednačen sa tekstom dugmeta (0.97em);
   2026-07-14 Milan: „deluje premalo naspram dugmeta" → 17px svuda (bazno pravilo gore),
   pa ovaj override sada samo drži istu vrednost radi specifičnosti. Pilula 50px,
   „−/+" simboli (19px) i font cene u sticky baru namerno netaknuti. */
.single-product .product-info form.cart .ux-quantity input.qty { font-size: 17px; }
.single-product .product-info form.cart .ux-quantity.quantity { min-height: 50px; }

/* Brend iznad naziva (mono labela) */
.negic-pdp-brand {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand-strong); margin-bottom: 2px;
}
/* Šifra + „Podeli" u istom redu (IKEA runda 2, Milan 2026-07-17): pomoćne sitnice
   gore, kupovna zona čista. Levo šifra, desno „Podeli"; dugme se renderuje uvek, pa
   margin-left:auto drži desno i kad proizvod nema šifru. */
.negic-pdp-sku {
  font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin: 0 0 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.negic-pdp-sku-code span { color: var(--ink-2); }
/* Reset stare vertikalne margine share dugmeta (bilo 10px 0 0 na samostalnoj poziciji). */
.negic-pdp-sku .negic-share { margin: 0 0 0 auto; }
/* Ušteda pilula (iznos u RSD od 2026-07-17) */
.negic-pdp-save {
  display: inline-block; vertical-align: middle; margin-left: 4px;
  font-size: 12px; font-weight: 700; color: #fff; background: var(--accent);
  padding: 4px 10px; border-radius: var(--r-pill);
}
/* PDV + besplatna dostava linija ispod cene (dizajn .m-pdp-vat) */
.single-product .product-info .negic-pdp-vat {
  /* razmak i ka kratkom opisu ispod (Milan 2026-06-13) */
  font-size: 12px; color: var(--muted); margin: 6px 0 14px; line-height: 1.4;
}

/* Tabela specifikacija — 2 kolone kao dizajn .pdp-specs (K/Uzrast, Brend/Dostupnost);
   na mobilnom pada u jednu kolonu. */
.negic-pdp-specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden;
  margin: 20px 0 0;
}
.negic-pdp-specs > div {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 16px; font-size: 14px;
  border-bottom: 1px solid var(--line-2);
}
.negic-pdp-specs > div:nth-child(odd):not(:last-child) { border-right: 1px solid var(--line-2); }
.negic-pdp-specs > div:last-child { border-bottom: none; }
/* poslednji red bez donje linije i kad su u njemu dve ćelije (paran ukupan broj) */
.negic-pdp-specs > div:nth-child(odd):nth-last-child(2) { border-bottom: none; }
/* neparan ukupan broj ćelija (npr. Kategorija/Brend/Dostupnost bez Uzrasta):
   poslednja ostaje u LEVOJ koloni kao normalna ćelija — label levo, vrednost desno,
   poravnata sa vrednošću iznad ("Romani za decu"). Desna kolona ostaje prazna.
   Ranije se protezala preko obe kolone pa je "Na stanju" visilo u sredini i
   izgledalo odvojeno (Milan 2026-07-01). */
.negic-pdp-specs > div:last-child:nth-child(odd) { grid-column: 1; }
@media (max-width: 549px) {
  .negic-pdp-specs { grid-template-columns: 1fr; }
  .negic-pdp-specs > div { border-right: none !important; border-bottom: 1px solid var(--line-2); }
  .negic-pdp-specs > div:last-child { border-bottom: none; }
  /* na mobilnom je sve jedna kolona — poslednji red kao i ostali (label levo, vrednost desno) */
  .negic-pdp-specs > div:last-child:nth-child(odd) { display: flex; justify-content: space-between; }
}
.negic-pdp-specs span { color: var(--muted); }
/* Vrednost uvek uz desnu ivicu (dizajn: label levo, vrednost desno). Bez text-align:right
   dvoredne vrednosti ("Papirni nadstolnjaci") prelamaju se levo pa deluju kao da nisu
   poravnate sa kratkim vrednostima ("Duni"). (Milan 2026-07-07) */
.negic-pdp-specs b { font-family: var(--font-body); font-weight: 700; color: var(--ink); text-align: right; }
.negic-pdp-specs .negic-pdp-stock { color: var(--brand); }

/* Sakrij deljenje (social) na PDP-u — dizajn ga nema */
.single-product .product-info .social-icons,
.single-product .product-info .is-divider + .social-icons,
.single-product div.product .product-share { display: none !important; }

/* Sakrij Flatsome „prethodni/sledeći proizvod" strelice (dve outline kružiće ‹ › u
   sažetku, između naslova i cene) — nisu u dizajnu i deluju kao stran element. */
.single-product .next-prev-thumbs { display: none !important; }

/* Tabovi: bliže dizajnu (.pdp-tabs underline) */
.single-product .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--line); padding: 0; margin-bottom: 22px; }
.single-product .woocommerce-tabs ul.tabs li { margin: 0; }
.single-product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--muted);
  padding: 12px 18px; text-transform: none;
}
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a:hover { color: var(--brand-strong); }
/* Aktivna linija IDE NA DONJU ivicu (dizajn .pdp-tab.sel::after), ne na vrh:
   Flatsome nav-line crta GORNJU liniju kroz ::before (3px, top:0) — gasimo je,
   a donju crtamo svojim ::after (mora content, inače se ne renderuje).
   Wrapper takođe nosi svoju border-top liniju iznad celog reda — i nju gasimo. */
.single-product .woocommerce-tabs.wc-tabs-wrapper { border-top: none !important; }
.single-product .woocommerce-tabs ul.tabs li a::before { display: none !important; }
.single-product .woocommerce-tabs ul.tabs li a {
  position: relative;
  /* bez okvira na klik (focus box) — mis ne treba prsten, tastatura ga zadržava */
  border: 0 !important; box-shadow: none !important;
}
.single-product .woocommerce-tabs ul.tabs li a:focus:not(:focus-visible) { outline: none !important; }
.single-product .woocommerce-tabs ul.tabs li a::after {
  content: "" !important; position: absolute;
  top: auto !important; bottom: -1px !important;
  left: 14px; right: 14px; width: auto !important;
  height: 0 !important; background-color: var(--brand) !important; border-radius: 2px;
}
.single-product .woocommerce-tabs ul.tabs li.active a::after { height: 2.5px !important; }
.single-product .woocommerce-tabs .panel { font-size: 15.5px; color: var(--ink-2); line-height: 1.7; max-width: 70ch; }

/* Tab "Dostupnost u radnjama" — lista sa kvačicama (dizajn .pdp-stock) */
.negic-pdp-stock-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.negic-pdp-stock-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); }
.negic-pdp-stock-list li .negic-svg-icon { color: var(--brand); flex: 0 0 auto; margin: 0; }
.negic-pdp-stock-list li b { font-weight: 700; }
.negic-pdp-stock-list li.muted { color: var(--muted); font-size: 14px; }

/* Mobilni: jedna kolona, sa bočnim guterima (ranije summary/galerija išli do ivice) */
@media (max-width: 849px) {
  .single-product .product-main { padding-top: 8px !important; } /* bio 40px = veliki razmak iznad proizvoda */
  .single-product .product-main .product-gallery.large-6 { width: 100%; }
  .single-product .product-main .product-gallery,
  .single-product .product-main .product-info.summary {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .negic-pdp-trust { grid-template-columns: repeat(2, 1fr); gap: 12px 14px; } /* mobilni 2×2 (2026-07-08, bilo 1 kolona) */

  /* Telo po dizajnu (.m-pdp-brand/.m-pdp-title/.m-pdp-price): Baloo 800, čvršća hijerarhija */
  .single-product .product-info .negic-pdp-brand { letter-spacing: .12em; font-weight: 700; }
  .single-product .product-info .product-title { font-size: 23px; font-weight: 800; line-height: 1.15; }
  .single-product .product-info .price { font-size: 28px; font-weight: 800; }
  /* Na mobilnom krijemo samo TEKST šifre (dizajn design-pdp je nema u telu), ali
     red OSTAJE jer nosi „Podeli" dugme koje mora biti vidljivo i na mobilnom.
     (Desktop product.jsx ima .pdp-sku, pa tamo ostaje.) */
  .single-product .product-info .negic-pdp-sku-code { display: none; }
  /* Podeli na mobilnom: samo ikona (šifra je skrivena pa bi tekst visio sam u redu),
     Milan 2026-07-17. Padding vraća tap metu na ~40px. Margina: auto levo čuva desno
     poravnanje iz desktop pravila (mockup ima ikonu uz desnu ivicu), -12px gore/dole/
     desno kompenzuje padding pa se vizuelni položaj ikone ne pomera. */
  .single-product .product-info .negic-share .negic-share-label { display: none; }
  .single-product .product-info .negic-share { padding: 12px; margin: -12px -12px -12px auto; }
  .single-product .product-info .negic-pdp-sku { margin-bottom: 0; }

  /* Inline "Dodaj u korpu" u telu je suvišan — sticky bar dole ga UVEK ima.
     Ostaje samo qty stepper (sticky bar sinhronizuje količinu iz njega). */
  .single-product .product-info form.cart .single_add_to_cart_button { display: none !important; }

  /* Dizajn telo je minimalno (brend/naziv/cena/PDV/varijante). Sakrij excerpt i specs
     tabelu na mobilnom — pun opis je u tabu „Opis", dostupnost u tabu „Dostupnost u
     radnjama" i trust redu. Trust red i tabovi ostaju. */
  .single-product .product-info .product-short-description,
  .single-product .product-info .woocommerce-product-details__short-description,
  .single-product .product-info .negic-pdp-specs { display: none; }

  /* Glavne galerijske ‹ › strelice — dizajn ih nema (koristi swipe, "Prevuci foto").
     Ostaje samo back dugme + swipe. (Thumbs strelice su već sakrivene.) */
  .single-product .product-gallery-slider .flickity-prev-next-button { display: none !important; }
}

/* Varijante kao čipovi (dizajn .m-pdp-block / .m-opt) — Korak 4, uslovno (samo kad ima pa_*) */
/* Donja margina simetrična gornjoj — bez nje se kratak opis lepi za čipove. */
.single-product .product-info .negic-pdp-block { margin-top: 22px; margin-bottom: 22px; }
.single-product .product-info .negic-pdp-block > h4 {
  font-family: var(--font-head); font-weight: 700; font-size: 13px;
  margin: 0 0 10px; color: var(--ink-2);
}
.negic-pdp-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.negic-pdp-opt {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-head); font-weight: 600; font-size: 13px; color: var(--ink-2);
  padding: 9px 13px; border-radius: var(--r-pill);
  background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line);
}
.negic-pdp-opt.is-sel { box-shadow: inset 0 0 0 2px var(--brand); color: var(--brand-strong); }
.negic-pdp-dot { width: 14px; height: 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); flex: none; }

/* ============================================================
   POMOĆNE I PRAVNE STRANE (dizajn info.jsx / legal.jsx)
   FAQ, Dostava, Plaćanje, Uslovi/Reklamacije/Privatnost/Kolačići
   ============================================================ */

/* --- Breadcrumb --- */
.negic-crumb { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); padding: 22px 0 0; }
.negic-crumb a:hover { color: var(--brand); }
.negic-crumb .negic-sep { opacity: .5; }
.negic-crumb .negic-crumb-cur { color: var(--ink); }

/* --- Hero (info strane) --- */
.negic-info-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; padding: 18px 0 30px; border-bottom: 1px solid var(--line); margin-bottom: 36px; }
.negic-info-hero h1 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; margin: 14px 0 0; }
.negic-info-hero > div > p { color: var(--ink-2); font-size: 17px; margin: 16px 0 0; max-width: 46ch; }
.negic-info-hero .negic-hero-chips { margin-top: 22px; }
.negic-hero-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.negic-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-tint-2); color: var(--ink-2); font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: var(--r-pill); }
.negic-chip .negic-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.negic-chip--accent .negic-dot { background: var(--accent); }

.negic-info-aside { display: flex; flex-direction: column; gap: 12px; background: var(--brand-tint-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 22px 24px; }
.negic-ia-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.negic-ia-row:last-child { border-bottom: none; }
.negic-ia-ico { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; background: #fff; color: var(--brand-strong); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.negic-ia-ico--accent { color: var(--accent-strong); }
.negic-ia-ico .negic-svg-icon { width: 20px; height: 20px; }
.negic-ia-row > div:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.negic-ia-row b { font-family: var(--font-head); font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.negic-ia-row span { font-size: 13px; color: var(--muted); }

/* --- Sekcijski razmak --- */
.negic-info-sec { margin: 48px 0; }
.negic-info-sec--tight { margin: 36px 0; }

/* --- FAQ --- */
.negic-faq-layout { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: start; }
.negic-faq-toc { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 2px; }
.negic-faq-toc button { display: flex; align-items: center; gap: 10px; text-align: left; padding: 11px 14px; border-radius: var(--r-sm); font-family: var(--font-head); font-weight: 500; font-size: 14px; color: var(--ink-2); transition: background .15s var(--ease), color .15s var(--ease); }
.negic-faq-toc button .negic-svg-icon { flex-shrink: 0; }
.negic-faq-toc button:hover { background: var(--brand-tint-2); color: var(--brand-strong); }
.negic-faq-toc button.on { background: var(--brand-tint); color: var(--brand-strong); }
.negic-faq-toc button .negic-toc-ct { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.negic-faq-groups { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.negic-faq-group > h2 { font-family: var(--font-head); font-size: clamp(22px, 2.4vw, 28px); display: flex; gap: 12px; align-items: center; margin-bottom: 18px; scroll-margin-top: 90px; }
.negic-fg-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--brand-tint); color: var(--brand-strong); display: grid; place-items: center; flex-shrink: 0; }
.negic-faq-list { display: flex; flex-direction: column; gap: 10px; }
.negic-faq-item { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.negic-faq-item.open { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.negic-faq-q { width: 100%; display: flex; gap: 16px; align-items: center; text-align: left; padding: 18px 22px; font-family: var(--font-head); font-weight: 500; font-size: 16px; color: var(--ink); }
.negic-faq-plus { margin-left: auto; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-strong); display: grid; place-items: center; transition: transform .25s var(--ease), background .18s, color .18s; }
.negic-faq-item.open .negic-faq-plus { transform: rotate(45deg); background: var(--brand); color: #fff; }
.negic-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease); }
.negic-faq-item.open .negic-faq-a { grid-template-rows: 1fr; }
.negic-faq-a > div { overflow: hidden; }
.negic-faq-a p { margin: 0; padding: 0 22px 20px; color: var(--ink-2); font-size: 15px; max-width: 62ch; }

/* --- Koraci (Dostava) --- */
.negic-steps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.negic-step-card { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); padding: 24px 22px; position: relative; }
.negic-step-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--accent-strong); font-weight: 700; }
.negic-step-ico { width: 46px; height: 46px; border-radius: 13px; background: var(--brand-tint); color: var(--brand-strong); display: grid; place-items: center; margin: 12px 0 14px; }
.negic-step-card b { font-family: var(--font-head); font-size: 17px; display: block; margin-bottom: 6px; }
.negic-step-card p { color: var(--ink-2); font-size: 14px; margin: 0; }

/* --- Metode (Dostava / Plaćanje) --- */
.negic-method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
/* Načini plaćanja: tri kartice (uplata na račun, pouzeće, u radnji) u tri kolone */
.negic-placanje-page .negic-method-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1099px) { .negic-placanje-page .negic-method-grid { grid-template-columns: 1fr; } }
.negic-method-card { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; }
.negic-method-card.featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.negic-method-head { display: flex; gap: 16px; align-items: flex-start; }
.negic-method-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--brand-tint); color: var(--brand-strong); display: grid; place-items: center; flex-shrink: 0; }
.negic-method-card.featured .negic-method-ico { background: var(--brand); color: #fff; }
.negic-method-head h3 { font-family: var(--font-head); font-size: 19px; }
.negic-method-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-strong); margin-top: 4px; display: inline-block; }
.negic-method-desc { color: var(--ink-2); font-size: 15px; margin: 16px 0 0; }
.negic-method-list { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 11px; }
.negic-method-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); }
.negic-method-list li .negic-svg-icon { color: var(--brand); flex-shrink: 0; margin-top: 2px; }
.negic-method-foot { margin-top: auto; padding-top: 18px; }
.negic-method-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-tint-2); color: var(--brand-strong); font-family: var(--font-head); font-weight: 500; font-size: 14px; padding: 9px 15px; border-radius: var(--r-pill); }
.negic-method-pill .negic-svg-icon { flex-shrink: 0; }

/* --- Tabela cena (Dostava) --- */
.negic-zone-table { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.negic-zone-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; padding: 18px 26px; align-items: center; border-bottom: 1px solid var(--line-2); }
.negic-zone-row:last-child { border-bottom: none; }
.negic-zone-row.head { background: var(--brand-tint-2); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 13px 26px; }
.negic-zone-row b { font-family: var(--font-head); font-size: 15.5px; }
.negic-zone-row span { font-size: 14.5px; color: var(--ink-2); }
.negic-zone-row .negic-zone-free { color: var(--brand-strong); font-weight: 700; }
.negic-zone-note { font-size: 13px; color: var(--muted); margin: 12px 2px 0; display: flex; gap: 8px; align-items: center; }
.negic-zone-note .negic-svg-icon { color: var(--brand); flex-shrink: 0; }

/* --- Familyband deco (samo info strane) --- */
.negic-info .negic-familyband { position: relative; overflow: hidden; }
.negic-fb-deco { position: absolute; right: -70px; top: -70px; width: 260px; height: 260px; border-radius: 50%; background: oklch(1 0 0 / 0.06); }

/* --- Pravne strane --- */
.negic-legal-head { padding: 16px 0 26px; border-bottom: 1px solid var(--line); margin-bottom: 34px; }
.negic-legal-head h1 { font-size: clamp(28px, 3.2vw, 40px); margin: 14px 0 0; max-width: 22ch; }
.negic-legal-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; font-size: 13px; color: var(--muted); }
.negic-lm { display: inline-flex; align-items: center; gap: 7px; }
.negic-lm .negic-svg-icon { color: var(--brand); flex-shrink: 0; }
.negic-legal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.negic-legal-tabs a { padding: 9px 15px; border: 1px solid var(--line); border-radius: var(--r-pill); font-family: var(--font-head); font-weight: 500; font-size: 13.5px; color: var(--ink-2); transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease); }
.negic-legal-tabs a:hover { border-color: var(--brand); color: var(--brand-strong); }
.negic-legal-tabs a.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.negic-legal-layout { display: grid; grid-template-columns: 230px 1fr; gap: 44px; align-items: start; padding-bottom: 8px; }
.negic-legal-toc { position: sticky; top: 90px; }
.negic-toc-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 0 12px 8px; display: block; }
.negic-legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: flex; flex-direction: column; gap: 1px; }
.negic-legal-toc li button { width: 100%; display: flex; gap: 10px; align-items: baseline; text-align: left; padding: 9px 12px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--ink-2); transition: background .15s var(--ease), color .15s var(--ease); }
.negic-legal-toc li button::before { counter-increment: toc; content: counter(toc); font-family: var(--font-mono); font-size: 11px; color: var(--faint); flex-shrink: 0; }
.negic-legal-toc li button:hover { background: var(--brand-tint-2); color: var(--brand-strong); }
.negic-legal-toc li button.on { background: var(--brand-tint); color: var(--brand-strong); font-weight: 500; }
.negic-legal-toc li button.on::before { color: var(--brand); }
/* Reset: TOC/FAQ su <button>, pa Flatsome lepi svoj chrome (min-height, uppercase,
   box-shadow, fokus-ram) zbog kog zeleni .on boks ispada glomazan. Vraćamo na čist izgled iz dizajna. */
.negic-faq-toc button, .negic-legal-toc li button, .negic-faq-q {
  border: 0 !important; box-shadow: none !important; min-height: 0 !important;
  text-transform: none !important; letter-spacing: normal !important; margin: 0 !important;
  font-weight: 500 !important; line-height: 1.4; cursor: pointer; -webkit-appearance: none; appearance: none;
}
/* Flatsome inline pravilo forsira button{border-radius:999px!important} (pill) -> TOC linkovi
   ispadnu kao pilule. Vraćamo na dizajn radius (r-sm = 8px) sa !important, CTA .button ostaju pill. */
.negic-faq-toc button, .negic-legal-toc li button { background-color: transparent; border-radius: var(--r-sm) !important; }
.negic-faq-q { border-radius: 0 !important; }
.negic-faq-toc button:focus, .negic-legal-toc li button:focus, .negic-faq-q:focus { outline: none; }
.negic-faq-toc button:focus-visible, .negic-legal-toc li button:focus-visible, .negic-faq-q:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.negic-legal-body { min-width: 0; max-width: 70ch; counter-reset: sec; }
.negic-legal-intro { background: var(--brand-tint-2); border: 1px solid var(--line-2); border-radius: var(--r); padding: 20px 24px; margin-bottom: 36px; }
.negic-legal-intro p { margin: 0; color: var(--ink-2); font-size: 15px; }
.negic-legal-sec { padding-top: 8px; margin-bottom: 38px; scroll-margin-top: 86px; }
.negic-legal-sec h2 { font-family: var(--font-head); font-size: 21px; display: flex; gap: 12px; align-items: baseline; margin-bottom: 14px; }
.negic-legal-sec h2::before { counter-increment: sec; content: counter(sec); font-family: var(--font-mono); font-size: 14px; color: var(--accent-strong); font-weight: 700; }
.negic-legal-sec p { color: var(--ink-2); font-size: 15.5px; margin: 0 0 12px; }
.negic-legal-sec p:last-child { margin-bottom: 0; }
.negic-legal-sec ul { margin: 6px 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.negic-legal-sec ul li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink-2); font-size: 15px; }
.negic-legal-sec ul li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex-shrink: 0; margin-top: 8px; }
.negic-legal-callout { background: var(--accent-tint); border-radius: var(--r); padding: 16px 20px; margin: 16px 0; display: flex; gap: 13px; align-items: flex-start; }
.negic-legal-callout .negic-svg-icon { color: var(--accent-strong); flex-shrink: 0; margin-top: 2px; }
.negic-legal-callout p { margin: 0; font-size: 14.5px; color: var(--ink); }
/* Link za preuzimanje dokumenta (PDF obrazac) na pravnim stranama */
.negic-legal-dl { margin: 14px 0 4px; }
.negic-legal-dl a { display: inline-flex; gap: 9px; align-items: center; font-weight: 600; font-size: 14.5px; color: var(--brand); border: 1.5px solid var(--brand); border-radius: 999px; padding: 9px 18px; text-decoration: none; transition: background .15s, color .15s; }
.negic-legal-dl a:hover { background: var(--brand); color: #fff; }
.negic-legal-contactcard { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); padding: 22px 24px; margin-top: 12px; }
.negic-legal-contactcard b { font-family: var(--font-head); font-size: 16px; display: block; margin-bottom: 10px; }
.negic-lc-row { display: flex; gap: 10px; align-items: center; font-size: 14.5px; color: var(--ink-2); padding: 5px 0; }
.negic-lc-row .negic-svg-icon { color: var(--brand); flex-shrink: 0; }

/* --- Responsive (info / pravne strane) --- */
@media (max-width: 849px) {
  .negic-info-hero { grid-template-columns: 1fr; gap: 28px; }
  .negic-info-hero > div > p { font-size: 15.5px; }
  .negic-faq-layout { grid-template-columns: 1fr; gap: 24px; }
  .negic-faq-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .negic-faq-toc button { background: var(--brand-tint-2); }
  .negic-faq-toc button .negic-toc-ct { display: none; }
  .negic-steps-row { grid-template-columns: 1fr 1fr; }
  .negic-method-grid { grid-template-columns: 1fr; }
  .negic-zone-row { grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 16px 18px; }
  .negic-zone-row.head { display: none; }
  .negic-zone-row b { grid-column: 1 / -1; }
  .negic-legal-layout { grid-template-columns: 1fr; gap: 26px; }
  .negic-legal-toc { position: static; }
  .negic-legal-toc ol { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .negic-legal-toc li button { width: auto; background: var(--brand-tint-2); border-radius: var(--r-pill); padding: 8px 14px; }
  .negic-legal-body { max-width: none; }
}
@media (max-width: 540px) {
  .negic-steps-row { grid-template-columns: 1fr; }
}

/* ============================================================
   SEGMENTOVANI CHECKOUT (po dizajnu design_handoff/cart.jsx)
   Struktura ostaje Woo classic (dostava + plaćanje su u desnoj
   koloni #order_review); stilizujemo izgled brendovski:
   leva kolona = kartice, dostava = segmentne pilule,
   plaćanje = kartica sa naslovom + podnaslovom + čekom.
   ============================================================ */

/* --- Leva kolona: kontakt/adresa + napomena kao kartice (.co-card) --- */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #order_review {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields { margin-top: 16px; }

.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 18px;
  color: var(--ink);
}
.woocommerce-checkout #order_review_heading { margin: 0 0 12px; }

/* --- Polja forme (.field) --- */
.woocommerce-checkout .form-row { margin-bottom: 14px; }
.woocommerce-checkout .form-row > label {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection {
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border .15s var(--ease), box-shadow .15s var(--ease);
}
.woocommerce-checkout .select2-container .select2-selection--single {
  height: auto !important;
  display: flex;
  align-items: center;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus {
  outline: none;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-tint) !important;
}
.woocommerce-checkout .form-row input::placeholder,
.woocommerce-checkout .form-row textarea::placeholder { color: var(--faint); }

/* iOS zumira stranu kad polje u fokusu ima font < 16px (WebKit prag), pa
   blagajna posle tapa u polje ostane raširena van ekrana. Isti razlog kao
   16px na mobilnoj pretrazi (vidi komentar kod .negic-msearch input-a).
   Na mobilnom sva checkout polja idu na 16px; desktop ostaje 14.5px. */
@media (max-width: 849px) {
  .woocommerce-checkout .form-row input.input-text,
  .woocommerce-checkout .form-row textarea,
  .woocommerce-checkout .form-row select,
  .woocommerce-checkout .select2-container .select2-selection,
  .woocommerce-checkout .select2-search__field {
    font-size: 16px !important;
  }
}

/* "Ulica i kućni broj" je form-row-first, ali mu je par (broj stana)
   sakriven, pa je visio na pola širine. Pun red da ne izgleda polomljeno. */
.woocommerce-checkout #billing_address_1_field,
.woocommerce-checkout #shipping_address_1_field {
  width: 100%;
  float: none;
  clear: both;
}

/* --- Dostava: segmentne pilule (.seg.seg-col) --- */
.woocommerce-checkout .shipping__table th,
.woocommerce-checkout .woocommerce-shipping-totals > th {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  text-align: left;
  padding: 4px 0 12px;
}
.woocommerce-checkout ul#shipping_method,
.woocommerce-checkout .woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.woocommerce-checkout .shipping__list_item,
.woocommerce-checkout #shipping_method li {
  position: relative;
  margin: 0;
}
.woocommerce-checkout #shipping_method input.shipping_method {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.woocommerce-checkout .shipping__list_label,
.woocommerce-checkout #shipping_method li label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink-2);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.woocommerce-checkout #shipping_method li:hover label { border-color: var(--brand); }
.woocommerce-checkout #shipping_method li:has(input:checked) label {
  border-color: var(--brand);
  background: var(--brand-tint-2);
  color: var(--brand-strong);
  box-shadow: 0 0 0 2px var(--brand-tint);
}
.woocommerce-checkout #shipping_method li label .woocommerce-Price-amount {
  font-family: var(--font-mono);
  font-weight: 600;
  white-space: nowrap;
}

/* --- Plaćanje: kartica sa naslovom + podnaslovom + čekom (.seg.seg-col) --- */
.woocommerce-checkout .wc_payment_methods {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 0;
}
.woocommerce-checkout li.wc_payment_method {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  transition: all .15s var(--ease);
  /* radio + naslov u istom redu, opis pun red ispod (Milan 2026-06-18:
     pre je radio padao iznad teksta jer li nije bio flex). */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
}
.woocommerce-checkout li.wc_payment_method > input[type="radio"] {
  flex: 0 0 auto; width: 18px; height: 18px; margin: 0;
  accent-color: var(--brand); cursor: pointer;
}
.woocommerce-checkout li.wc_payment_method > .payment_box { flex: 0 0 100%; }
.woocommerce-checkout li.wc_payment_method:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-tint-2);
  box-shadow: 0 0 0 2px var(--brand-tint);
}
.woocommerce-checkout li.wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.woocommerce-checkout li.wc_payment_method:has(input:checked) > label { color: var(--brand-strong); }
.woocommerce-checkout li.wc_payment_method > label img,
.woocommerce-checkout li.wc_payment_method > label::after { margin-left: auto; }
.woocommerce-checkout li.wc_payment_method:has(input:checked) > label::after {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: var(--brand);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
}
/* opis metode = podnaslov (italic .seg i), bez Woo okvira/strelice */
.woocommerce-checkout .payment_box {
  background: transparent !important;
  border: 0 !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.woocommerce-checkout .payment_box::before { display: none !important; }
.woocommerce-checkout .payment_box p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--brand);
}

/* --- Pregled porudžbine: čista tabela (.co-summary) --- */
.woocommerce-checkout #order_review { position: sticky; top: 100px; }
.woocommerce-checkout .woocommerce-checkout-review-order-table,
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  border: 0 !important;
  background: transparent;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table { margin-bottom: 18px; }
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: none;
  color: var(--muted);
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line-2) !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item td {
  padding: 10px 0;
  font-size: 14px;
  color: var(--ink-2);
  vertical-align: top;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item .product-name {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
  padding: 10px 0;
  font-size: 14.5px;
  color: var(--ink-2);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal td { border-top: 1px solid var(--line-2) !important; }
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th {
  font-family: var(--font-head);
  font-size: 16px;
  color: var(--ink);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td .woocommerce-Price-amount {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
}
/* PDV napomena (sadrži X PDV 20%) — prigušeno, sitno, u svom redu (Milan 2026-06-18:
   veliki bold iznos PDV-a je oduzimao prostor i naglašavao nebitno). */
.woocommerce-checkout #order_review .order-total td .includes_tax,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td .includes_tax {
  display: block !important; margin-top: 3px; white-space: nowrap !important;
  font-family: var(--font-body) !important; font-weight: 400 !important;
  font-size: 10.5px !important; line-height: 1.3 !important; color: var(--ink-2) !important;
}
/* „Ukupno" labela poravnata sa vrhom iznosa (ne da visi niže od broja). */
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
  vertical-align: top;
}
.woocommerce-checkout #order_review .order-total td .includes_tax .woocommerce-Price-amount,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td .includes_tax .woocommerce-Price-amount {
  font-family: var(--font-body) !important; font-weight: 400 !important;
  font-size: 11.5px !important; color: var(--ink-2) !important;
}

/* --- Dugme "Naruči" --- */
.woocommerce-checkout #place_order {
  width: 100%;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  border-radius: 12px;
  padding: 15px 18px;
  margin-top: 4px;
}

/* --- Mobilni: summary iznad forme, sva polja puna širina --- */
@media (max-width: 849px) {
  .woocommerce-checkout #order_review { position: static; }
  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-additional-fields,
  .woocommerce-checkout #order_review { padding: 18px; }
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last {
    width: 100%;
    float: none;
    margin-right: 0;
  }
}

/* === HUSKY: "By text: belmil" čip je redundantan sa naslovom "Rezultati
   pretrage za..." i ružno izgleda → sakrij ga (Clear All ostaje, preveden). === */
.woof_chosen_feature li:has(> a[data-tax="woof_text"]),
li:has(> a[data-tax="woof_text"]) { display: none !important; }

/* === Traka aktivnih filtera ("izabrani filteri") iznad grida proizvoda.
   Standardni WOOF mehanizam: WOOF sam renderuje čipove (woof_draw_products_top_panel)
   u .woof_products_top_panel i sam ih uklanja (klik na čip / "Poništi sve"), AJAX-svestan.
   Mi ga samo stilizujemo za brend. Tekst dugmeta "Clear All" -> "Poništi sve"
   (woof_clear_all_text filter u functions.php). Ranije je bio skriven kao redundantan
   (2026-06-05); vraćen na zahtev (UX: pokaži šta je izabrano kad naslov ostaje
   "Svi proizvodi"). (2026-06-19) === */
.woof_products_top_panel { overflow: visible; line-height: 1.2; margin: 4px 0 18px; }
.woof_products_top_panel ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.woof_products_top_panel_ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.woof_products_top_panel_ul > li,
.woof_products_top_panel_ul li ul li {
  float: none !important; margin: 0 !important; padding: 0 !important;
  display: inline-flex; align-items: center; list-style: none !important;
}
/* grupa: "Kategorija: [čip] [čip]" u jednom redu */
.woof_products_top_panel_ul li ul[data-container] {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
/* naslov grupe (prvi <li> u grupi, bez linka) */
.woof_products_top_panel_ul li ul[data-container] > li:first-child {
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink-2);
}
/* čip = <a data-tax>: brend pilula sa ✕ */
.woof_products_top_panel a[data-tax] {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--brand-text); background: var(--brand-tint-2);
  border: 1px solid var(--brand-tint); border-radius: 999px;
  padding: 5px 12px; line-height: 1; text-decoration: none !important;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.woof_products_top_panel a[data-tax]:hover {
  background: var(--brand-tint); color: var(--brand-deep); border-color: var(--brand);
}
.woof_products_top_panel a[data-tax]::after {
  content: "×"; font-size: 15px; line-height: 1; color: var(--brand-strong);
}
/* poništi WOOF default delete.png pozadinu i padding na tekstu čipa */
.woof_products_top_panel li span.woof_remove_ppi { background: none !important; padding: 0 !important; }
/* „orderby" (sort) čip je suvišan — sort je već u dropdown-u („Najnovije") — i prikazuje
   sirov engleski „orderby: date" na srpskom sajtu. Sakrij baš taj čip (stabilan WOOF
   data-tax hook), a ako je bio JEDINI (ostane samo „Poništi sve") sakrij ceo panel.
   Pravi filteri (brend/cena) i dalje prikazuju panel. (Milan 2026-07-01, UI/UX; CSS-only.) */
.woof_products_top_panel_ul > li:has(> a[data-tax="orderby"]) { display: none !important; }
.woof_products_top_panel:has(a[data-tax="orderby"]):not(:has(a[data-tax]:not([data-tax="orderby"]))) { display: none !important; }
/* "Poništi sve" kao brend tekst-link (poništi Flatsome button min-height) */
.woof_reset_button_2 {
  all: unset; min-height: 0; margin: 0 0 0 4px; padding: 5px 4px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--brand); text-decoration: underline; cursor: pointer;
}
.woof_reset_button_2:hover { color: var(--brand-strong); }
/* „Poništi sve" ide na KRAJ reda (posle čipova) — WOOF ga po difoltu stavlja prvi,
   ali UX standard je: prvo aktivni filteri, pa „očisti sve". Flex order ga gura nazad. */
.woof_products_top_panel_ul > li:has(.woof_reset_button_2) { order: 99; margin-left: 8px; }
/* .woof_products_top_panel2 (mobilni/alternativni) ostaje skriven da se ne duplira */
.woof_products_top_panel2 { display: none !important; }

/* === WooCommerce „active filters" widget (chip „Minimum 990 RSD" / „Maksimum
   3.750 RSD") u shop-title redu (.category-filtering, isti red gde je „FILTER"
   dugme na mobilnom). Po dizajnu (category.jsx) nema čipova aktivnih filtera —
   izbor je vidljiv u sidebar filteru. Sakrivamo widget; „FILTER" dugme (sibling)
   i filtriranje ostaju. (2026-06-08) === */
.category-filtering .widget_layered_nav_filters,
.widget_layered_nav_filters { display: none !important; }

/* ============================================================
   MOBILNI REDIZAJN — KORAK 1: HEADER
   (dizajn: design_handoff_negic_store/Negić Knjižara - Mobilna.html)
   Teal okrugle ikone (hamburger/korpa), centriran logo, search pill traka.
   Sve unutar @media jer desktop header ostaje nepromenjen.
   ============================================================ */
.negic-msearch { display: none; }
.negic-mpromo { display: none; }
/* Telefon-dugme je samo za mobilni (desktop ima broj u topbar-u). */
.negic-mphone { display: none; }

@media (max-width: 849px) {
  /* --- Hamburger + telefon + korpa = teal okrugle ikone (dizajn .m-iconbtn 40px) --- */
  .negic-mphone { display: inline-flex !important; align-items: center; margin: 0; }
  #masthead .negic-mphone > a,
  #masthead .nav-icon > a,
  #masthead a.header-cart-link {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px;
    /* Poništi desktop min-width:66px (za shift korpe) da mobilni krug ostane okrugao,
       inace se tirkizni krug razvuce horizontalno (uočeno 2026-07-22). */
    min-width: 40px !important;
    padding: 0 !important;
    background: var(--brand-tint-2) !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--brand-strong) !important;
    line-height: 1 !important;
  }
  #masthead .nav-icon > a .icon-menu,
  #masthead a.header-cart-link .icon-shopping-basket,
  #masthead a.header-cart-link .icon-shopping-cart {
    margin: 0 !important;
    color: var(--brand-strong) !important;
    font-size: 21px !important;
  }
  /* Korpa koristi masku sa background-color:var(--ink) (desktop) — na mobilnom je
     vraćamo na brend tirkiznu i istu veličinu kao telefon (konzistentno, dizajn
     .m-iconbtn = sve ikone brand-strong, iste veličine). */
  #masthead a.header-cart-link .icon-shopping-basket::before {
    background-color: var(--brand-strong) !important;
    width: 22px !important; height: 22px !important;
  }
  #masthead .negic-mphone > a .negic-svg-icon {
    width: 22px; height: 22px; margin: 0 !important;
    color: var(--brand-strong) !important;
  }
  #masthead .negic-mphone > a { transition: background .18s var(--ease), color .18s, transform .12s var(--ease); }
  #masthead .negic-mphone > a:hover,
  #masthead .negic-mphone > a:focus-visible { background: var(--brand-tint) !important; color: var(--brand) !important; }
  #masthead .negic-mphone > a:hover .negic-svg-icon { color: var(--brand) !important; }
  #masthead .negic-mphone > a:active { background: var(--brand-tint) !important; transform: scale(0.93); }
  /* Korpa: sakrij cenu/tekst, ostaje samo ikona (dizajn = okrugla ikona) */
  #masthead a.header-cart-link .header-cart-title,
  #masthead a.header-cart-link .cart-price,
  #masthead a.header-cart-link .cart-icon-text { display: none !important; }
  /* Brojčani bedž korpe (mali krug gore-desno) */
  #masthead a.header-cart-link .cart-icon strong,
  #masthead a.header-cart-link .badge { top: -5px !important; right: -5px !important; }

  /* --- Logo centriran, bez "od 1990." taglinea pored (na mobilnom čisto;
     tagline je ::after pseudo-element, desktop feature) --- */
  #masthead .header-inner { align-items: center; }
  #masthead #logo { text-align: center; }
  #masthead #logo a::after { display: none !important; }

  /* --- Logo strip (header) belo + bez linije pre search-a (dizajn .m-header belo) ---
     Header + search čine jedan beli blok; linija/senka ispod header-a se uklanja. */
  #header .header-main,
  #header.stuck .header-main,
  #header .header-bg-color { background-color: var(--card) !important; }
  #header .header-main,
  #header .header-bottom,
  #masthead { box-shadow: none !important; border-bottom: 0 !important; }
  #header:after, #masthead:after { display: none !important; }

  /* --- Search pill traka ispod header-a (FiboSearch) ---
     Bela pozadina (nastavlja se na beli header), pa zeleni promo strip ispod
     (dizajn .m-header belo + .m-promo-strip). */
  .negic-msearch {
    display: block;
    background: var(--card);
    padding: 4px 16px 12px;
  }
  /* Zeleni promo strip ispod search-a (dizajn .m-promo-strip) */
  .negic-mpromo {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--brand-deep);
    color: oklch(0.93 0.02 187);
    font-family: var(--font-head);
    font-size: 14px; font-weight: 600;
    padding: 11px 16px;
  }
  .negic-mpromo .negic-svg-icon { width: 18px; height: 18px; flex: none; color: oklch(0.82 0.06 187); }
  .negic-mpromo strong { color: #fff; font-weight: 700; }
  .negic-msearch .dgwt-wcas-search-wrapp {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .negic-msearch .dgwt-wcas-search-input {
    height: 40px !important;
    line-height: 40px !important;
    background: var(--paper) !important;
    border: 1.5px solid var(--line) !important;
    border-radius: 999px !important;
    padding: 0 16px 0 42px !important;
    font-family: var(--font-body) !important;
    /* 16px = isto kao input u overlay-u pretrage (tamo mora 16 zbog iOS zuma);
       da se tekst ne poveća na tap u polje (Milan 2026-07-04) */
    font-size: 16px !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    /* lupa kao pozadina levo — brend zelena (kao na desktopu) */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%2317A89D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
  }
  .negic-msearch .dgwt-wcas-search-input::placeholder { color: var(--muted) !important; }
  /* FiboSearch-ova lupa/submit dugme desno — sakrij (imamo levu) */
  .negic-msearch .dgwt-wcas-search-submit,
  .negic-msearch .dgwt-wcas-ico-magnifier { display: none !important; }
  /* Reset (X) ostaje, pozicioniran desno */
  .negic-msearch .dgwt-wcas-close { right: 12px !important; }

  /* --- Manje praznog prostora između search trake i sadržaja ---
     Flatsome .page-wrapper ima padding-top:30px (razmak header↔sadržaj), a hero
     već ima svoj padding; sa search trakom koja razdvaja, tih 30px je suvišno. */
  .content-area.page-wrapper { padding-top: 6px !important; }
  .single-product .shop-container { padding-top: 6px !important; }
  .single-product div.product { margin-top: 0 !important; }
}

/* Pretraga overlay (FiboSearch mobilni): cene u brend teal (dizajn) */
.dgwt-wcas-overlay-mobile .dgwt-wcas-price,
.dgwt-wcas-overlay-mobile .dgwt-wcas-price ins,
.dgwt-wcas-overlay-mobile .dgwt-wcas-price .amount { color: var(--brand-strong) !important; }
.dgwt-wcas-overlay-mobile .dgwt-wcas-price del,
.dgwt-wcas-overlay-mobile .dgwt-wcas-price del .amount { color: var(--faint) !important; }
/* Pretraga overlay: bočni razmak da sadržaj ne ide skroz do ivica (dizajn) */
.dgwt-wcas-overlay-mobile .dgwt-wcas-suggestion { padding-left: 18px !important; padding-right: 18px !important; }
/* levo 16px = isti bočni uvlak polja kao pill na strani */
.dgwt-wcas-overlay-mobile .dgwt-wcas-search-wrapp { padding-left: 16px !important; padding-right: 0 !important; }
.dgwt-wcas-overlay-mobile .dgwt-wcas-sugg-wrapp { padding-top: 6px !important; }

/* Header red na vrhu overlay-a pretrage (2026-07-04): overlay prekrije ceo
   sajt pa korisnik bez njega ne zna na kom je sajtu. Red je klon pravog
   mobilnog headera (search.js injectBrand): hamburger, logo, telefon, korpa.
   Stil preslikava mobilni header (.m-iconbtn 40px teal krugovi) jer klonovi
   van #masthead scope-a gube te stilove. */
.dgwt-wcas-overlay-mobile .negic-search-brand {
  /* grid 1fr/auto/1fr = logo TAČNO na sredini kao u pravom headeru (flex
     space-between ga je vukao levo jer je desna grupa šira od hamburgera);
     bez linije ispod — ni pravi header je nema (Milan 2026-07-04) */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  /* mere = pravi mobilni header: red 70px (52px logo + 2×9px), bočno 15px */
  padding: calc(9px + env(safe-area-inset-top, 0px)) 15px 9px;
  background: var(--card);
}
.dgwt-wcas-overlay-mobile .negic-search-brand .negic-sb-burger { grid-column: 1; justify-self: start; }
.dgwt-wcas-overlay-mobile .negic-search-brand .negic-sb-logo { grid-column: 2; justify-self: center; }
.dgwt-wcas-overlay-mobile .negic-search-brand .negic-sb-right {
  grid-column: 3; justify-self: end;
  /* 14px = izmeren razmak telefon↔korpa u pravom headeru */
  display: flex; align-items: center; gap: 14px;
}
.dgwt-wcas-overlay-mobile .negic-search-brand a.negic-sb-burger,
.dgwt-wcas-overlay-mobile .negic-search-brand .negic-sb-right a {
  width: 40px; height: 40px; min-height: 40px; padding: 0 !important; margin: 0 !important;
  background: var(--brand-tint-2) !important;
  border-radius: 999px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  color: var(--brand-strong) !important; line-height: 1 !important;
  position: relative;
}
.dgwt-wcas-overlay-mobile .negic-search-brand .negic-sb-logo img {
  height: 52px; width: auto; display: block;
  /* pravi header drži logo 1px iznad centra reda (top 8, ne 9) — isto i ovde */
  position: relative; top: -1px;
}
.dgwt-wcas-overlay-mobile .negic-search-brand .icon-menu,
.dgwt-wcas-overlay-mobile .negic-search-brand .icon-shopping-basket,
.dgwt-wcas-overlay-mobile .negic-search-brand .icon-shopping-cart {
  margin: 0 !important; color: var(--brand-strong) !important; font-size: 21px !important;
}
.dgwt-wcas-overlay-mobile .negic-search-brand .icon-shopping-basket::before {
  background-color: var(--brand-strong) !important;
  width: 22px !important; height: 22px !important;
}
.dgwt-wcas-overlay-mobile .negic-search-brand .negic-svg-icon {
  width: 22px; height: 22px; margin: 0 !important; color: var(--brand-strong) !important;
}
.dgwt-wcas-overlay-mobile .negic-search-brand .header-cart-title,
.dgwt-wcas-overlay-mobile .negic-search-brand .cart-price,
.dgwt-wcas-overlay-mobile .negic-search-brand .cart-icon-text { display: none !important; }
/* bedž korpe: klon gubi .header-main scope pa boju i poziciju dajemo ovde */
.dgwt-wcas-overlay-mobile .negic-search-brand .cart-icon strong,
.dgwt-wcas-overlay-mobile .negic-search-brand .badge {
  position: absolute; top: -5px !important; right: -5px !important;
  background-color: var(--accent); color: #fff; border-color: var(--accent);
}
/* Brend traka nosi safe-area pa bar ne mora da beži od notcha.
   1.5px + 2.5px (centriranje 40px pilla u 45px baru) = 4px razmaka
   header→polje, isto kao na strani (izmereno). */
.dgwt-wcas-overlay-mobile:has(.negic-search-brand) .dgwt-wcas-om-bar { margin-top: 1.5px; }
/* Meni/korpa PREKO pretrage (2026-07-04): FiboSearch stavlja overlay na
   z-index 2147483647 (max int) pa Magnific draweri (1042) nikad ne mogu iznad.
   Spuštamo overlay (i dalje iznad celog sajta), dižemo Magnific iznad njega —
   zatvaranjem drawera korisnik ostaje u pretrazi sa ukucanim upitom. */
.dgwt-wcas-overlay-mobile { z-index: 100000 !important; }
.mfp-bg { z-index: 100010 !important; }
.mfp-wrap { z-index: 100011 !important; }
/* Meni/korpa otvoreni preko pretrage: zamagli i overlay pretrage — blur na
   #wrapper (korpa 3072 / meni 5542) ga ne hvata jer je overlay direktno u body.
   Ista jačina i tranzicija kao na strani. */
html.has-off-canvas-right .dgwt-wcas-overlay-mobile,
body:has(.mfp-wrap #main-menu.has-negic-drawer) .dgwt-wcas-overlay-mobile {
  filter: blur(3px);
  transition: filter .3s var(--ease);
}
/* Scroll lock pretrage skloni scrollbar pa se header sadržaj (logo, ikone)
   pomeri udesno u browserima sa klasičnim scrollbarom (desktop/responsive mode).
   Rezervisan prostor drži istu širinu dok je overlay otvoren. Scope na miš
   (pointer: fine): telefoni imaju overlay scrollbar pa im rezerva ne treba. */
@media (hover: hover) and (pointer: fine) {
  html.dgwt-wcas-overlay-mobile-on { scrollbar-gutter: stable; }
}
/* FiboSearch Flatsome partial (partials/themes/flatsome.php) krije .mfp-wrap i
   .mfp-close dok je mobilni overlay otvoren (display:none) — kod nas se draweri
   namerno otvaraju iznad pretrage, pa vraćamo prikaz. Meni i dalje krije svoj
   default X (jače pravilo .mfp-wrap:has(#main-menu.has-negic-drawer) dole). */
html.dgwt-wcas-overlay-mobile-on .mfp-wrap { display: block !important; }
html.dgwt-wcas-overlay-mobile-on .mfp-close { display: block !important; }
/* Panel rezultata FiboSearch pozicionira inline koordinatama izračunatim PRE
   nego što brend traka pomeri bar — pa je preklapao logo i input. Panel je
   dete .om-bar-a: bar postaje containing block, panel uvek kreće odmah ispod
   input reda i ne zavisi od visine onoga iznad. */
.dgwt-wcas-overlay-mobile .dgwt-wcas-om-bar { position: relative; }
.dgwt-wcas-overlay-mobile .dgwt-wcas-om-bar .dgwt-wcas-suggestions-wrapp {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  width: 100% !important;
  max-height: calc(100vh - 200px) !important;
  /* plugin: height calc(100% - 45px) !important — računato prema containing
     blocku koji je posle našeg fixa BAR (63px), pa je panel ispadao 18px i sekao
     sadržaj (Milan 2026-07-04, „sveske"). Auto = visina po sadržaju, uz max-height. */
  height: auto !important;
}

/* --- Mobilni overlay (search.js): „Otkaži" desno + brojač rezultata (dizajn design-search.png) --- */
/* „Otkaži" se ubacuje u .dgwt-wcas-om-bar (overlay-only flex red inputa); bar je
   flex pa centriramo i poravnavamo input pill da popuni red, „Otkaži" desno. */
/* Razmak od vrha (status bar/notch): margin-top na bar. NE diramo overlay padding-top
   — to lomi FiboSearch kalkulaciju pozicije rezultata (stuck spinner). */
.dgwt-wcas-overlay-mobile .dgwt-wcas-om-bar {
  align-items: center !important;
  margin-top: calc(12px + env(safe-area-inset-top, 0px));
}
/* Sakrij sivu back-strelicu — umesto nje je „Otkaži" tekst desno. */
.dgwt-wcas-overlay-mobile .dgwt-wcas-om-return { display: none !important; }
/* Input pill popunjava red do „Otkaži"; flex centrira 40px pill u 45px baru. */
.dgwt-wcas-overlay-mobile .dgwt-wcas-om-bar > .dgwt-wcas-search-wrapp {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
}
.dgwt-wcas-overlay-mobile .dgwt-wcas-om-bar > .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp { width: 100%; }
/* „Otkaži": flex stavka u baru, centrirana (align-items:center bara). Mulish
   (font-body) ima normalne metrike pa se centrira sa inputom; Baloo je sedeo visoko. */
.dgwt-wcas-overlay-mobile .negic-search-cancel {
  flex: 0 0 auto; align-self: center;
  height: 45px; line-height: 45px;
  /* FiboSearch flex quirk: align-self centrira ~8px previsoko u baru fiksne
     visine 45px; offset je konstantan pa ga poništavamo nudge-om. */
  position: relative; top: 8px;
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body) !important; font-weight: 700 !important; font-size: 14.5px;
  color: var(--brand-strong); white-space: nowrap;
  margin-left: 10px; padding: 0 2px;
}
.dgwt-wcas-overlay-mobile .negic-search-cancel:hover { color: var(--brand); }
/* Brojač „N rezultata za „upit"" — prvi red liste, pun red. */
.dgwt-wcas-suggestions-wrapp .negic-search-count {
  width: 100%; flex: 0 0 100%;
  font-family: var(--font-head) !important; font-weight: 700; font-size: 14px;
  color: var(--ink); padding: 6px 12px 10px;
}

/* Input pill u overlay-u = IDENTIČAN pill-u na strani (.negic-msearch gore u
   media bloku — isti stil ručno preslikan jer FiboSearch pomeri formu iz
   .negic-msearch u overlay pa taj scope više ne važi). Milan 2026-07-04: tap u
   polje ne sme ništa da promeni. Jedina razlika: font 16px (ne 14.5) jer iOS
   Safari zumira stranicu kad fokusirani input ima font manji od 16px.
   Selektor pojačan: plugin ima .dgwt-wcas-search-wrapp-mobile input[type=search]...
   sa !important (visina 45px) koji bi inače pobedio. */
.dgwt-wcas-overlay-mobile .dgwt-wcas-search-wrapp input[type="search"].dgwt-wcas-search-input {
  height: 40px !important;
  line-height: 40px !important;
  background: var(--paper) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 999px !important;
  padding: 0 16px 0 42px !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  text-overflow: ellipsis !important; /* placeholder se skraćuje sa … (Otkaži sužava polje) */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%2317A89D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
}
/* Fokus ring kao na desktopu (tirkizna ivica + svetli tint) — plugin ga na mobilnom
   ne daje. (Milan 2026-07-04) */
.dgwt-wcas-overlay-mobile .dgwt-wcas-search-wrapp input[type="search"].dgwt-wcas-search-input:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px var(--brand-tint) !important;
  outline: none !important;
}
.dgwt-wcas-overlay-mobile .dgwt-wcas-search-input::placeholder { color: var(--muted) !important; text-overflow: ellipsis !important; }
/* placeholder elipsa: Chromium je primenjuje tek preko :placeholder-shown na inputu */
.dgwt-wcas-overlay-mobile .dgwt-wcas-search-wrapp input[type="search"].dgwt-wcas-search-input:placeholder-shown { text-overflow: ellipsis !important; }
.dgwt-wcas-overlay-mobile .dgwt-wcas-search-submit,
.dgwt-wcas-overlay-mobile .dgwt-wcas-ico-magnifier { display: none !important; }
.dgwt-wcas-overlay-mobile .dgwt-wcas-close { right: 12px !important; }
/* Linije između rezultata (dizajn) */
.dgwt-wcas-overlay-mobile .dgwt-wcas-suggestion-product { position: relative; }
.dgwt-wcas-overlay-mobile .dgwt-wcas-suggestion-product + .dgwt-wcas-suggestion-product::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: 0;
  border-top: 1px solid var(--line-2);
}

/* --- Prazno stanje (search.js: #negic-search-empty-src): Popularne pretrage + odeljenja --- */
.negic-search-empty { padding: 14px 16px 28px; }
.negic-se-label {
  font-family: var(--font-head) !important; font-weight: 700; font-size: 14.5px;
  color: var(--ink); padding: 16px 2px 11px;
}
.negic-se-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.negic-se-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.negic-se-chip {
  /* <button> nosi Flatsome default margin (0 12.5px 12.5px 0) + min-height (naduva na
     44px) — to je pravio „raštrkanost" i previsoke pilule. Reset da vlada samo flex gap. */
  margin: 0 !important; min-height: 0 !important; height: auto !important; line-height: 1.2 !important;
  border: 1.5px solid var(--brand-tint); background: var(--card);
  border-radius: 999px; padding: 6px 13px;
  font-family: var(--font-head) !important; font-weight: 600; font-size: 12.5px;
  color: var(--brand-strong); cursor: pointer; transition: background .15s ease;
}
.negic-se-chip:hover { background: var(--brand-tint-2); }
/* Kategorijski čip: tintovana pilula + kolor ikon-krug + naziv */
.negic-se-cat {
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: 999px; padding: 6px 16px 6px 6px;
  font-family: var(--font-head) !important; font-weight: 600; font-size: 13.5px;
  color: var(--ink) !important;
}
.negic-se-cat-ico { width: 30px; height: 30px; flex: none; border-radius: 999px; display: grid; place-items: center; overflow: hidden; }
.negic-se-cat-ico .negic-svg-icon { width: 17px; height: 17px; }
/* prava slika kategorije popunjava krug (kao drawer/homepage) */
.negic-se-cat-ico .negic-se-img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }
/* per-kategorija boje (svetla pilula + jači ikon-krug, isti tonovi kao drawer) */
.negic-se-cat[data-cat="skolski-pribor"] { background: oklch(0.96 0.025 250); }
.negic-se-cat[data-cat="skolski-pribor"] .negic-se-cat-ico { background: oklch(0.90 0.05 250); color: oklch(0.42 0.10 255); }
.negic-se-cat[data-cat="rancevi"] { background: oklch(0.96 0.028 200); }
.negic-se-cat[data-cat="rancevi"] .negic-se-cat-ico { background: oklch(0.90 0.055 200); color: oklch(0.42 0.09 205); }
.negic-se-cat[data-cat="pernice"] { background: oklch(0.96 0.025 20); }
.negic-se-cat[data-cat="pernice"] .negic-se-cat-ico { background: oklch(0.91 0.05 20); color: oklch(0.52 0.13 25); }
.negic-se-cat[data-cat="knjige"] { background: oklch(0.96 0.03 120); }
.negic-se-cat[data-cat="knjige"] .negic-se-cat-ico { background: oklch(0.91 0.055 120); color: oklch(0.42 0.09 135); }
.negic-se-cat[data-cat="igracke"] { background: oklch(0.96 0.03 300); }
.negic-se-cat[data-cat="igracke"] .negic-se-cat-ico { background: oklch(0.91 0.055 300); color: oklch(0.45 0.11 305); }
.negic-se-cat[data-cat="likovno"] { background: oklch(0.96 0.035 70); }
.negic-se-cat[data-cat="likovno"] .negic-se-cat-ico { background: oklch(0.92 0.06 70); color: oklch(0.52 0.12 60); }

/* ============================================================
   MOBILNI REDIZAJN — KORAK 2: DRAWER (hamburger meni)
   (dizajn: design_handoff_negic_store/_mobilni_screens/design-drawer.png, m-drawer)
   Naš markup (#negic-drawer-src) js/drawer.js ubaci u Flatsome off-canvas
   (#main-menu.sidebar-menu). Sve pod @media jer drawer postoji samo na mobilnom.
   ============================================================ */
@media (max-width: 849px) {
  /* Off-canvas panel postaje naš drawer: krem pozadina, bez Flatsome paddinga,
     puna visina sa zaglavlje/telo/CTA rasporedom (flex kolona). */
  #main-menu.has-negic-drawer,
  #main-menu.has-negic-drawer .sidebar-menu {
    background: var(--paper) !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #main-menu.has-negic-drawer {
    border-radius: 0 28px 28px 0;
    overflow: hidden;
  }
  /* Drawer otvoren: zamagli ostatak strane (kao korpa). Backdrop-filter na
     overlay-u, NE filter na #wrapper — filter na pretku slomi position:fixed
     sticky header pa navbar „nestane" (bug nađen 2026-07-21, vidi korpa fix). */
  body:has(.mfp-wrap #main-menu.has-negic-drawer) .mfp-bg {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    background: rgb(11 11 11 / 0.6);
  }
  /* Puna neprozirnost overlaya: element opacity < 1 ispira backdrop blur (vidi korpa fix). */
  body:has(.mfp-wrap #main-menu.has-negic-drawer) .mfp-bg.mfp-ready { opacity: 1; }
  #main-menu.has-negic-drawer .sidebar-menu {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .negic-drawer { display: flex; flex-direction: column; height: 100%; min-height: 0; flex: 1; }

  /* --- Zaglavlje: logo-marka + dugme X --- */
  .negic-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 18px 16px;
    background: var(--card);
    box-shadow: 0 1px 0 var(--line);
    flex: none;
  }
  .negic-drawer-logo { display: flex; align-items: center; gap: 11px; margin-left: 4px; }
  .negic-drawer-logo-img { height: 40px; width: auto; display: block; }
  .negic-drawer-brand { display: flex; flex-direction: column; line-height: 1.05; }
  .negic-drawer-brand b { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--ink); }
  .negic-drawer-brand i {
    font-family: var(--font-mono); font-style: normal; font-size: 9.5px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 2px;
  }
  .negic-drawer-x {
    width: 40px; height: 40px; flex: none; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--brand-tint-2); color: var(--brand-strong);
    display: flex; align-items: center; justify-content: center;
    align-self: center; margin: 0; padding: 0; line-height: 0;
  }
  .negic-drawer-x { transition: background .15s ease; }
  .negic-drawer-x:hover { background: var(--brand-tint); }
  .negic-drawer-x svg { display: block; }
  /* Flatsome/Magnific default X (skroz desno) — sakrij, imamo svoj u zaglavlju */
  .mfp-wrap:has(#main-menu.has-negic-drawer) .mfp-close,
  #main-menu.has-negic-drawer .mfp-close { display: none !important; }

  /* --- Telo (scroll) --- */
  .negic-drawer-body { flex: 1; overflow-y: auto; padding: 8px 14px 20px; }
  .negic-drawer-label {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted); padding: 16px 10px 6px;
  }

  /* Red kategorije: kolor pločica + naziv + broj + chevron */
  .negic-drawer-cat {
    display: flex; align-items: center; gap: 13px;
    padding: 11px 10px; border-radius: 14px;
    color: var(--ink) !important;
  }
  .negic-drawer-cat { transition: background .15s ease; }
  .negic-drawer-cat:hover,
  .negic-drawer-cat:active { background: var(--brand-tint-2); }
  .negic-drawer-ico {
    width: 38px; height: 38px; flex: none; border-radius: 11px;
    display: grid; place-items: center;
    overflow: hidden;
  }
  .negic-drawer-ico .negic-svg-icon { width: 21px; height: 21px; }
  /* prava slika kategorije popunjava pločicu (kao thumb u „Sve kategorije" meniju) */
  .negic-drawer-ico .negic-drawer-img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 11px;
    mix-blend-mode: multiply;  /* belo iz fotografije stopi sa tint podlogom (nema belog okvira) */
  }
  .negic-drawer-cat b { font-family: var(--font-head); font-weight: 600; font-size: 15px; flex: 1; }
  .negic-drawer-count { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
  .negic-drawer-cat > svg.negic-svg-icon { color: var(--faint); flex: none; }
  /* per-kategorija tintovi (isti kao homepage .negic-katcard) */
  .negic-drawer-cat[data-cat="skolski-pribor"] .negic-drawer-ico { background: oklch(0.93 0.045 250); color: oklch(0.42 0.10 255); }
  .negic-drawer-cat[data-cat="rancevi"]        .negic-drawer-ico { background: oklch(0.93 0.05 200);  color: oklch(0.42 0.09 205); }
  .negic-drawer-cat[data-cat="pernice"]        .negic-drawer-ico { background: oklch(0.94 0.045 20);  color: oklch(0.52 0.13 25); }
  .negic-drawer-cat[data-cat="knjige"]         .negic-drawer-ico { background: oklch(0.94 0.05 120);  color: oklch(0.42 0.09 135); }
  .negic-drawer-cat[data-cat="igracke"]        .negic-drawer-ico { background: oklch(0.94 0.05 300);  color: oklch(0.45 0.11 305); }
  .negic-drawer-cat[data-cat="likovno"]        .negic-drawer-ico { background: oklch(0.94 0.06 70);   color: oklch(0.52 0.12 60); }

  /* Brzi pristup: tekstualni redovi sa ikonom */
  .negic-drawer-util { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
  .negic-drawer-util a {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 12px; border-radius: 14px;
    font-family: var(--font-head); font-weight: 600; font-size: 14.5px;
    color: var(--ink) !important;
  }
  .negic-drawer-util a .negic-svg-icon { width: 20px; height: 20px; flex: none; color: var(--ink-2); }
  .negic-drawer-util a { transition: background .15s ease; }
  .negic-drawer-util a:hover,
  .negic-drawer-util a:active { background: var(--brand-tint-2); }
  /* Boje usklađene sa desktopom: „Novo" = clay, „Naš izbor" = brand teal (tekst + ikona),
     ostale util stavke neutralno sive. (Milan 2026-07-04, ažurirano 2026-07-08: „Akcija"→„Naš izbor",
     crvenu is-sale zamenila brand is-brand jer nije sniženje.) */
  .negic-drawer-util a.is-accent,
  .negic-drawer-util a.is-accent .negic-svg-icon { color: var(--accent-strong) !important; }
  .negic-drawer-util a.is-brand,
  .negic-drawer-util a.is-brand .negic-svg-icon { color: var(--brand-strong) !important; }

  /* --- Dno: CTA dugme (sticky na dnu panela) --- */
  .negic-drawer-foot { flex: none; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
  .negic-drawer-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 15px; border-radius: 16px;
    background: var(--brand); color: #fff !important;
    font-family: var(--font-head); font-weight: 700; font-size: 15.5px;
  }
  .negic-drawer-cta:active { background: var(--brand-strong); }
  .negic-drawer-cta .negic-svg-icon { width: 18px; height: 18px; }

  /* ------------------------------------------------------------
     Kaskadno uklizavanje sadržaja drawera (Broadcast obrazac, odobreno
     2026-07-21). Keyframes negicUklizi je definisan u KORPA DRAWER sekciji
     (deljen). Meni je Magnific Popup: wrapper dobija .off-canvas-left.mfp-ready
     pri svakom otvaranju (kreira se iznova), pa čist CSS keyed na tu klasu
     re-triggeruje kaskadu na svako otvaranje, bez JS-a. Filter drawer
     (#shop-sidebar) je isto off-canvas-left ali NEMA .negic-drawer-* klase,
     pa scoped selektori ga ne diraju (ostaje bez animacije, tako i treba).
     Pomak sa leva: --negic-uklizi-x: -14px. Sve iza prefers-reduced-motion.
     ------------------------------------------------------------ */
  @media (prefers-reduced-motion: no-preference) {
    .off-canvas-left.mfp-ready .negic-drawer-head,
    .off-canvas-left.mfp-ready .negic-drawer-body > *,
    .off-canvas-left.mfp-ready .negic-drawer-foot {
      --negic-uklizi-x: -14px;
    }
    /* fill-mode both drži opacity 0 tokom delay-a (bez statičkog opacity:0). */
    .off-canvas-left.mfp-ready .negic-drawer-head    { animation: negicUklizi .32s ease .04s both; }
    .off-canvas-left.mfp-ready .negic-drawer-body > * { animation: negicUklizi .32s ease .07s both; }
    /* Stagger po detetu: +.035s, cap od 10. deteta naviše (n+10 dele max ~.385s). */
    .off-canvas-left.mfp-ready .negic-drawer-body > :nth-child(2)    { animation-delay: .105s; }
    .off-canvas-left.mfp-ready .negic-drawer-body > :nth-child(3)    { animation-delay: .140s; }
    .off-canvas-left.mfp-ready .negic-drawer-body > :nth-child(4)    { animation-delay: .175s; }
    .off-canvas-left.mfp-ready .negic-drawer-body > :nth-child(5)    { animation-delay: .210s; }
    .off-canvas-left.mfp-ready .negic-drawer-body > :nth-child(6)    { animation-delay: .245s; }
    .off-canvas-left.mfp-ready .negic-drawer-body > :nth-child(7)    { animation-delay: .280s; }
    .off-canvas-left.mfp-ready .negic-drawer-body > :nth-child(8)    { animation-delay: .315s; }
    .off-canvas-left.mfp-ready .negic-drawer-body > :nth-child(9)    { animation-delay: .350s; }
    .off-canvas-left.mfp-ready .negic-drawer-body > :nth-child(n+10) { animation-delay: .385s; }
    /* Footer je fiksiran dole, treba da dođe rano. */
    .off-canvas-left.mfp-ready .negic-drawer-foot    { animation: negicUklizi .32s ease .15s both; }
  }
}

/* ============================================================
   MOBILNI REDIZAJN — KORAK 3: PDP STICKY BAR ("Dodaj u korpu")
   (dizajn: _mobilni_screens/design-pdp.png, .m-pdp-bar)
   Restil nativnog Flatsome .sticky-add-to-cart: [− 1 +] [ukupna cena]
   [Dodaj u korpu + cart ikona]. Stepper je nativni iz sticky forme (otkriven
   2026-07-07 — kontrola količine stoji uz akciju na koju utiče); sličica
   skrivena; js/pdp.js ubacuje cenu u formu i sinhronizuje količinu
   dvosmerno sa telom proizvoda.
   ============================================================ */
@media (max-width: 849px) {
  /* Sličica u baru — dizajn je nema */
  .sticky-add-to-cart-img { display: none !important; }

  /* Bar UVEK vidljiv dole (dizajn .m-pdp-bar je fiksiran), ne tek na skrol.
     Flatsome ga drži `static` dok ne skrolujemo pa dodaje --active+fixed; mi ga
     forsiramo fixed od početka. */
  .single-product .sticky-add-to-cart {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100;
    background: var(--card) !important;
    box-shadow: 0 -1px 0 var(--line), 0 -8px 22px rgba(40, 60, 70, .08) !important;
  }
  /* Bar je sad fixed (van toka) — spacer-wrapper više ne treba, a telu dodajemo
     donji razmak da poslednji sadržaj/footer ne ostane pod barom. */
  .single-product .sticky-add-to-cart-wrapper { height: 0 !important; min-height: 0 !important; }
  .single-product #wrapper { padding-bottom: 76px; }

  .sticky-add-to-cart__product {
    display: flex !important;
    align-items: center;
    gap: 16px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom)) !important;
  }

  /* Ukupna cena između steppera i dugmeta; tekstualnu labelu "Ukupno"
     zamenjuje stepper pored (jasno je da je iznos ukupan), za čitače
     ekrana ostaje screen-reader-text span. */
  /* Cena je RASTEGLJIVI element reda (upija promenu broja cifara), dugme ima
     prirodnu širinu — pa se dugme NE menja kad količina raste (Milan
     2026-07-07). Jači selektor: Flatsome div-ovima u formi daje flex:1 1 100%. */
  .sticky-add-to-cart form.cart .negic-pdp-bar-price { flex: 1 1 auto; min-width: 0; line-height: 1.1; }
  /* Font cene je i dalje STALAN (ne menja se pri promeni količine, jer je to
     delovalo kao poskakivanje — Milan 2026-07-07); od 2026-07-20 je 17px,
     usklađen sa brojem količine u stepperu (Milan). */
  .negic-pdp-bar-price b {
    font-family: var(--font-head); font-weight: 800; font-size: 17px;
    color: var(--ink); white-space: nowrap;
  }

  /* Forma nosi ceo red: [− 1 +] [ukupno] [Dodaj u korpu]. nowrap — Flatsome
     formi daje flex-wrap pa je dugme (width 100%) padalo u svoj red. */
  .sticky-add-to-cart form.cart {
    flex: 1; margin: 0; display: flex; align-items: center; gap: 8px;
    flex-wrap: nowrap;
  }
  /* Stepper u TELU proizvoda je sada duplikat (količina se bira u baru) —
     sklonjen na mobilnom. Input ostaje u DOM-u pa dvosmerni sync u pdp.js
     i dalje radi. Scope kroz .product-main da quick-view popup ne zakači.
     !important jer globalna pilula (.ux-quantity.quantity) nosi inline-flex
     !important. */
  .single-product .product-main .product-info form.cart .ux-quantity { display: none !important; }

  /* Stepper u baru: ista pilula kao u telu, samo kompaktnija da red stane
     i na 360px. Dodirna meta ostaje ~38px visine na širini dugmeta 24px. */
  .sticky-add-to-cart .ux-quantity.quantity { flex: none; margin: 0; }
  .sticky-add-to-cart .ux-quantity .ux-quantity__button { width: 24px; height: 38px; }
  /* Broj količine = 15px, isto kao tekst dugmeta u baru (bio 14px; 2026-07-08). */
  .sticky-add-to-cart .ux-quantity input.qty { width: 26px; height: 38px; font-size: 17px; } /* 17px kao QV/PDP (Milan 2026-07-14); i cena 17px (2026-07-20) */
  /* Dugme: STALNA širina po sadržaju (flex: none) — ne raste i ne skuplja se
     kad se menja količina; višak prostora upija cena (flex:1) pored njega. */
  .sticky-add-to-cart .single_add_to_cart_button {
    flex: 0 0 auto; width: auto; margin: 0; min-height: 0;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 18px !important;
    border-radius: var(--r-pill);
    font-family: var(--font-head); font-weight: 700; font-size: 15px; line-height: 1.2;
    white-space: nowrap;
  }
  .sticky-add-to-cart .single_add_to_cart_button svg { flex: 0 0 auto; }
  /* Na vrlo uskim ekranima ikona korpe nema mesta u dugmetu */
  @media (max-width: 359px) {
    .sticky-add-to-cart .single_add_to_cart_button svg { display: none; }
  }
  .sticky-add-to-cart .single_add_to_cart_button svg { width: 19px; height: 19px; }
}

/* Desktop: sticky bar dole NE postoji u dizajnu (samo mobilni .m-pdp-bar).
   Na desktopu PDP koristi lepljivu galeriju + običan "Dodaj u korpu" u telu
   proizvoda, pa Flatsome-ov nativni sticky bar (koji se inače pojavi na skrol,
   stešnjen) skrivamo od 850px naviše. */
@media (min-width: 850px) {
  .single-product .sticky-add-to-cart,
  .single-product .sticky-add-to-cart-wrapper { display: none !important; }
}

/* ============================================================
   MOBILNI REDIZAJN — KORAK 4: PDP GALERIJA
   (dizajn: _mobilni_screens/design-pdp.png, .m-pdp-gallery/.m-pdp-nav/.m-pdp-thumbs)
   Full-bleed galerija sa tirkiznim tintom, overlaid nav (back levo / share desno,
   bez heart-a), thumbs traka sa teal aktivnom pločicom. js/pdp.js ubacuje .negic-pdp-nav.
   ============================================================ */
@media (max-width: 849px) {
  /* Galerija ide od ivice do ivice (sažetak zadržava 16px gutere) */
  .single-product .product-main .product-gallery.large-6 {
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative;
  }

  /* Podloga iza glavne slike. Dizajn (.m-pdp-gallery background) traži tirkizni tint i
     KVADRATNI okvir, ali to izgleda dobro samo sa transparentnim PNG-ovima koji lebde na
     boji. Naše fotke su bele pozadine pa bi obojena podloga dala ružne trake. Kvadratni
     okvir + jači tint ostaju PARKIRANI za katalog sa transparentnim slikama (mobile-opt).

     2026-07-13: tint (--brand-tint-2) zamenjen BELOM. Razlog: posle capa visine slike
     (blok „PDP: cap visine glavne slike" gore) slika više ne pokriva celu širinu trake,
     pa bi se beli packshot video kao beli kvadrat na tirkiznom — tačno one trake zbog
     kojih je okvir i parkiran. Na belom se packshot stapa, a motivi sa bojom (korice,
     kviz) sede na belom kao u svakoj knjižari. Odluka o tintu se NE obrće, samo čeka
     transparentne slike. */
  .single-product .product-gallery-slider,
  .single-product .product-gallery .woocommerce-product-gallery__wrapper {
    background: #fff;
  }
  .single-product .product-gallery-slider .slide { background: transparent; }

  /* NOVO/sale badge ispod overlaid nav-a (dizajn .m-pdp-badges top:52px) */
  .single-product .product-gallery .badge-container { top: 56px !important; left: auto !important; right: 14px !important; }

  /* --- Overlaid nav (back / share) --- */
  .negic-pdp-nav {
    position: absolute; top: 0; left: 0; right: 0; z-index: 5;
    padding: 12px 14px 10px;
    display: flex; align-items: center; justify-content: space-between;
    pointer-events: none;
  }
  .negic-pdp-nav > * { pointer-events: auto; }
  .negic-pdp-navbtn {
    width: 42px; height: 42px; flex: none; border: 0; border-radius: 999px; cursor: pointer;
    display: grid; place-items: center; padding: 0;
    background: var(--card); color: var(--ink);
    box-shadow: 0 2px 10px rgba(40, 60, 70, .14);
    transition: transform .12s var(--ease);
  }
  .negic-pdp-navbtn:hover { background: var(--brand-tint-2); color: var(--brand-strong); }
  .negic-pdp-navbtn:active { transform: scale(.9); }
  .negic-pdp-navbtn svg { width: 20px; height: 20px; display: block; }

  /* --- Thumbs traka (dizajn .m-pdp-thumbs/.m-pdp-thumb) --- */
  .single-product .product-thumbnails.thumbnails {
    padding: 12px 16px 14px !important;
    margin: 0 !important;
    background: var(--card);
  }
  /* STATIČNA traka (dizajn .m-pdp-thumbs), ne Flickity slajder sa ‹ › strelicama.
     Neutralizujemo Flickity raspored (transform/absolute) u flex red sa horizontalnim
     scroll-om; klik na pločicu i dalje menja glavnu sliku (Flickity instanca ostaje). */
  .single-product .product-thumbnails .flickity-prev-next-button { display: none !important; }
  .single-product .product-thumbnails .flickity-viewport {
    height: auto !important; overflow-x: auto; overflow-y: hidden;
  }
  .single-product .product-thumbnails .flickity-viewport::-webkit-scrollbar { display: none; }
  .single-product .product-thumbnails .flickity-slider {
    position: static !important; transform: none !important;
    display: flex !important; gap: 9px; width: auto !important;
  }
  /* Pločica: blag sivi okvir (dizajn .m-pdp-thumb), aktivna teal. Okvir ide na ĆELIJU
     sa box-sizing + overflow:hidden da ga slika (object-fit cover) ne prekrije. */
  .single-product .product-thumbnails .flickity-slider > * {
    position: static !important; left: auto !important; margin: 0 !important;
    width: 58px !important; height: 58px; box-sizing: border-box;
    border: 1.5px solid var(--line); border-radius: 13px; overflow: hidden;
    background: var(--card);
  }
  .single-product .product-thumbnails .flickity-slider > *.is-selected {
    border-color: var(--brand); border-width: 2px;
  }
  .single-product .product-thumbnails .flickity-slider > * img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
}

/* Overlaid nav samo na mobilnom — na desktopu galerija je sticky kolona */
@media (min-width: 850px) {
  .negic-pdp-nav { display: none !important; }
}

/* ============================================================
   MOBILNI FILTER (shop off-canvas #shop-sidebar)
   Kad je filter otvoren: zamagli stranu (kao korpa/drawer) i pomeri X levo
   kao zeleni krug (umesto sivog × skroz desno).
   ============================================================ */
/* Zamagljenje pozadine dok je filter otvoren. Backdrop-filter na overlay-u,
   NE filter na #wrapper — filter na pretku slomi position:fixed sticky header
   pa navbar „nestane" (bug nađen 2026-07-21, vidi korpa fix). */
body:has(.mfp-wrap #shop-sidebar) .mfp-bg {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  background: rgb(11 11 11 / 0.6);
}
/* Puna neprozirnost overlaya: element opacity < 1 ispira backdrop blur (vidi korpa fix). */
body:has(.mfp-wrap #shop-sidebar) .mfp-bg.mfp-ready { opacity: 1; }
/* Close X: zeleni krug gore-desno = .negic-drawer-x. js/shopfilter.js premešta X
   unutar .mfp-content (klizeći + skrolujući panel) pa je STICKY: klizi sa panelom
   i ostaje gore pri skrolu. margin-left:auto desno-poravnava; negativni margin-bottom
   da X ne gura „FILTERI" naslov nadole. */
.mfp-wrap:has(#shop-sidebar) .mfp-close {
  position: sticky !important;
  top: 12px !important; left: auto !important; right: auto !important;
  margin: 8px 16px -48px auto !important;
  z-index: 6;
  width: 40px; height: 40px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-tint-2); color: var(--brand-strong);
  border-radius: 999px; opacity: 1;
  /* Flatsome stavlja mix-blend-mode:difference na .mfp-close (invertuje boje) — gasimo */
  mix-blend-mode: normal !important;
  transition: background .15s ease;
}
.mfp-wrap:has(#shop-sidebar) .mfp-close:hover { background: var(--brand-tint); }
/* Flatsome default ikona (taman disk + salmon ×) — sakrij; crtamo isti X kao drawer */
.mfp-wrap:has(#shop-sidebar) .mfp-close svg { display: none !important; }
.mfp-wrap:has(#shop-sidebar) .mfp-close::before,
.mfp-wrap:has(#shop-sidebar) .mfp-close::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 17px; height: 2px; border-radius: 2px; background: currentColor;
}
.mfp-wrap:has(#shop-sidebar) .mfp-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.mfp-wrap:has(#shop-sidebar) .mfp-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Checkbox redovi: tekst vertikalno centriran sa checkbox-om (iCheck div + label).
   min-height 36px: na mobilnom cilja prst, ne miš — red = dodirna meta
   (Milan + Fable 2026-07-07). */
.mfp-wrap:has(#shop-sidebar) li:has(> .icheckbox_square-blue) {
  display: flex;
  align-items: center;
  min-height: 36px;
}
.mfp-wrap:has(#shop-sidebar) li:has(> .icheckbox_square-blue) > label { margin: 0; }

/* ============================================================
   Primarna (popunjena) dugmad — brend senka kao u dizajnu (.btn-primary).
   Flatsome primarna dugmad su bila bez senke (npr. "Nazad u prodavnicu" u
   praznoj korpi delovalo plitko pored cookie dugmadi). Outline/link/ghost
   varijante se izuzimaju (one nemaju popunu pa ni senku). Isti par
   vrednosti kao cookie dugmad radi doslednosti.
   ============================================================ */
.button.primary:not(.is-outline):not(.is-link):not(.is-transparent),
a.button.primary:not(.is-outline):not(.is-link):not(.is-transparent) {
  box-shadow: 0 6px 16px oklch(0.585 0.105 188 / 0.30);
  transition: transform .18s var(--ease, ease), box-shadow .2s ease, background .2s ease;
}
.button.primary:not(.is-outline):not(.is-link):not(.is-transparent):hover,
a.button.primary:not(.is-outline):not(.is-link):not(.is-transparent):hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px oklch(0.585 0.105 188 / 0.36);
}

/* ============================================================
   WOOF FILTERI — brend boja + ispravke (2026-06-08)
   ============================================================ */
/* Čekboks: brend tirkizna umesto plave iCheck (square-blue) sprite.
   margin:0 !important — iCheck kvadratić nosi margin-top:3px, pa ga flex
   align-items:center centrira ZAJEDNO sa marginom i tekst ispadne 1,5px
   iznad sredine kvadratića. */
.woof_container .icheckbox_square-blue {
  background: none !important;
  margin: 0 !important;
  width: 18px; height: 18px;
  border: 2px solid #cfd8d8; border-radius: 4px;
  box-sizing: border-box;
  transition: border-color .12s ease;
}
/* Hover: klik radi na celom redu, pa i vizuelni odgovor važi za ceo red —
   ivica kvadratića u brend + tekst u tamniji brend. Preko :has hvatamo hover
   na labeli (ona pokriva red zbog flex:1) i na samom kvadratiću. Namerno NE
   li:hover: kod ugnježdenih potkategorija bi svetleo i roditeljski red.
   @media (hover: hover): na touch ekranima se :hover „zalepi" posle dodira
   (red ostane obojen), pa hover efekat važi samo za pravi miš/trackpad. */
@media (hover: hover) {
  .woof_container .icheckbox_square-blue.hover,
  .woof_container .icheckbox_square-blue:hover,
  .woof_container li:has(> label:hover) > .icheckbox_square-blue { border-color: #2BAFA5; }
  .woof_container li:has(> label:hover) > label,
  .woof_container li:has(> .icheckbox_square-blue:hover) > label { color: var(--negic-primary-dark); }
  .woof_checkbox_sales_container .woof_container_inner:hover .icheckbox_square-blue { border-color: #2BAFA5; }
  .woof_checkbox_sales_container .woof_container_inner:hover label { color: var(--negic-primary-dark); }
}
.woof_container .icheckbox_square-blue.checked {
  background: #2BAFA5 !important; border-color: #2BAFA5;
}
.woof_container .icheckbox_square-blue.checked::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* Radio (ako se javi) -> brend krug. */
.woof_container .iradio_square-blue {
  background: none !important; width: 18px; height: 18px;
  border: 2px solid #cfd8d8; border-radius: 50%; box-sizing: border-box;
}
.woof_container .iradio_square-blue.checked { border-color: #2BAFA5; }
.woof_container .iradio_square-blue.checked::after {
  content: ""; position: absolute; left: 4px; top: 4px;
  width: 8px; height: 8px; border-radius: 50%; background: #2BAFA5;
}
/* FIX (2026-07-05): odčekiravanje iz prvog klika. Kvačica/tačka (::after iznad)
   se crta PREKO iCheck-ovog <ins.iCheck-helper> (pseudo-element dolazi posle ins-a
   u paint redosledu), pa klik u sredinu ČEKIRANOG kvadrata pogodi ::after čiji je
   event target roditeljski div — a on NEMA iCheck handlere (svi su na ins-u).
   Zato deselect nije radio iz sredine kvadrata, a select (bez ::after) jeste.
   z-index:1 vraća ins iznad kvačice, klik opet stiže do iCheck-a. */
.woof_container .icheckbox_square-blue > ins.iCheck-helper,
.woof_container .iradio_square-blue > ins.iCheck-helper { z-index: 1; }

/* Autor (mselect/Chosen): Chosen se inicijalizuje dok je mobilni off-canvas
   sakriven pa upiše inline width:0 — blok „Autor" se na telefonu video kao
   prazna pločica bez polja (Milan, iPhone 2026-07-20). width:100% gazi inline
   nulu; u desktop sidebaru je 100% takođe ispravna širina. */
.woof_container .chosen-container { width: 100% !important; }

/* Price slider: drži tekst opsega u okviru (ne curi levo iz boksa). */
.woof_price3_search_container { overflow: hidden; box-sizing: border-box; }
.woof_price3_search_container .woof_container_inner {
  padding: 4px 12px 10px; box-sizing: border-box; overflow: hidden; text-align: center;
}
/* naslov „Cena" levo poravnat kao ostali filteri (slider/iznosi ostaju centrirani) */
.woof_price3_search_container .woof_container_inner h4 { text-align: left; }
.woof_price3_search_container .woof_range_slider,
.woof_price3_search_container .ui-slider { margin: 10px 8px 4px; }
.woof_price3_search_container input.woof_price,
.woof_price3_search_container .price_format,
.woof_price3_search_container .woof_price_filter {
  text-align: center; max-width: 100%; white-space: normal;
}

/* ============================================================
   HERO SLAJDER (Flatsome ux_slider / Flickity) — brend stil
   Skupljeno na .negic-hero-slider da ne dira druge slajdere
   (proizvodi, brend strip, kategorije).
   ============================================================ */

/* Wrapper: mali razmak do sledeće sekcije (tačkice su U slici) */
.negic-hero-slider { position: relative; padding-bottom: 10px; margin-bottom: 0; }

/* Hero sekcija: stegnut razmak do sledeće sekcije (Kupovina po odeljenju) */
.negic-hero-sec { padding-bottom: 0 !important; }
.negic-hero-sec .row { margin-bottom: 0 !important; }
.negic-hero-sec .col { padding-bottom: 0 !important; }

/* Sama slika: zaobljeni uglovi + meka „lift" senka (zaobljena kartica izgleda
   poliranije sa diskretnom senkom; Prima je flat/oštra, mi smo kartičasti). */
.negic-hero-slider .flickity-viewport {
  border-radius: var(--r-lg);
  box-shadow: 0 12px 30px rgba(40,60,60,.12), 0 4px 10px rgba(40,60,60,.06);
  overflow: hidden;
}
.negic-hero-slider .banner,
.negic-hero-slider .banner-bg img { border-radius: var(--r-lg); }

/* --- Tačkice: U slici, malo odmaknute od dna (kao Prima) --- */
.negic-hero-slider .flickity-page-dots { bottom: 16px; line-height: 1; }
.negic-hero-slider .flickity-page-dots .dot {
  width: 11px; height: 11px; margin: 0 5px; opacity: 1;
  background: rgba(255,255,255,.85); border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.20);
  transition: background .2s ease;
}
.negic-hero-slider .flickity-page-dots .dot.is-selected {
  background: var(--brand);
  box-shadow: 0 1px 3px rgba(0,0,0,.20);
}

/* --- Strelice: čist beli krug (BEZ okvira), tirkizni chevron --- */
/* Pozicija/transform zaključani u SVIM stanjima. Flatsome na .slider:hover i
   .slider-show-nav forsira transform:translateX(0)!important (poništi -50%) pa
   strelica „padne" 24px — pobeđujemo većom specifičnošću i izbacujemo transform
   iz tranzicije, pa nema jitter-a. */
.negic-hero-slider .slider .flickity-prev-next-button,
.negic-hero-slider .slider:hover .flickity-prev-next-button,
.negic-hero-slider .slider-show-nav .flickity-prev-next-button {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  transition: background .2s ease !important;
}
.negic-hero-slider .flickity-prev-next-button {
  width: 46px !important; height: 46px !important;  /* pun krug (nije smanjen) */
  border-radius: 50% !important;
  background: rgba(255,255,255,.82) !important;  /* vidljiva bela; hover -> puna */
  box-shadow: 0 3px 12px rgba(20,40,40,.22) !important;  /* drži ivicu na svetlim slikama */
  opacity: 1 !important; visibility: visible !important;
}
.negic-hero-slider .flickity-prev-next-button:hover {
  background: #fff !important;                    /* puna bela (0% providno), BEZ zelene */
  box-shadow: 0 6px 18px rgba(20,40,40,.22) !important;
}
.negic-hero-slider .flickity-prev-next-button.previous { left: 16px; }
.negic-hero-slider .flickity-prev-next-button.next { right: 16px; }

/* Flatsome-ov svg chevron je nepouzdan u nav-circle (path se kolabira na ~1px,
   „okvir", zeleni na hover). Sakrivamo ga i crtamo svoj čist chevron CSS-om —
   tirkizan, centriran, isti u svim stanjima. */
.negic-hero-slider .flickity-prev-next-button svg,
.negic-hero-slider .flickity-prev-next-button .flickity-button-icon { display: none !important; }
.negic-hero-slider .flickity-prev-next-button::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  border-right: 2.5px solid var(--brand);
  border-bottom: 2.5px solid var(--brand);
  border-radius: 1px;
}
.negic-hero-slider .flickity-prev-next-button.next::after     { transform: translate(-60%,-50%) rotate(-45deg); }
.negic-hero-slider .flickity-prev-next-button.previous::after { transform: translate(-40%,-50%) rotate(135deg); }

/* Na mobilnom: bez strelica (samo prevlačenje + tačkice). */
.negic-hero-slider--mob .flickity-prev-next-button { display: none; }
@media (max-width: 849px) {
  .negic-hero-slider { padding-bottom: 10px; }
}

/* "Slično iz kategorije" slajder: strelice NE preko kartica (prljaju slike), nego u
   header redu gore-desno, levo od "Vidi sve →". (Fable konsultacija 2026-07-04) */
/* 1) sakrij Flatsome native strelice preko kartica */
.related-products-wrapper .flickity-prev-next-button { display: none !important; }

/* 2) desni klaster u headeru: [◄ ►]  |  Vidi sve → */
.negic-rel-head .negic-rel-actions { display: flex; align-items: center; gap: 20px; }
.negic-rel-head .negic-rel-nav { display: flex; align-items: center; gap: 8px; position: relative; padding-right: 20px; }
.negic-rel-head .negic-rel-nav::after {   /* tanka vertikalna crtica do "Vidi sve" */
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 20px; background: var(--line);
}
.negic-rel-arrow {
  position: relative; width: 36px; height: 36px; padding: 0;
  /* Flatsome na svako <button> stavlja min-height:2.5em (~40px) + min-width/margin/line-height;
     bez ovih reset-a 36px visina se rasteže na 40px pa krug ispadne jajast (2026-07-07). */
  min-height: 0; min-width: 0; margin: 0; line-height: 1; box-sizing: border-box;
  border-radius: 50%; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 3px 12px rgba(20, 40, 40, .14); cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.negic-rel-arrow:hover {   /* hover = tirkizno (kao "+" i drugde), beo chevron */
  background: var(--brand); border-color: var(--brand);
  box-shadow: 0 6px 18px rgba(20, 40, 40, .20);
}
.negic-rel-arrow::after {   /* čist tirkizni chevron (isto kao hero) */
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-right: 2.5px solid var(--brand);
  border-bottom: 2.5px solid var(--brand);
  border-radius: 1px;
  transition: border-color .2s ease;
}
.negic-rel-arrow:hover::after { border-right-color: #fff; border-bottom-color: #fff; }
.negic-rel-arrow.next::after { transform: translate(-60%, -50%) rotate(-45deg); }
.negic-rel-arrow.prev::after { transform: translate(-40%, -50%) rotate(135deg); }
.negic-rel-arrow.is-disabled { opacity: .4; pointer-events: none; }   /* prev na početku */

/* 3) mobilni: bez strelica (swipe + "Vidi sve" nose navigaciju) */
@media (max-width: 849px) {
  .negic-rel-head .negic-rel-nav { display: none; }
}

/* ============================================================
   UI izmene — 2026-06-10
   ============================================================ */

/* "Sve novo u ponudi →" — u .tabbed-content posle ul.nav-line.
   .tabbed-content = Flatsome flex container (display:flex; flex-wrap:wrap).
   Desktop: position:absolute ispod tab pilula (out of flex flow).
   Mobilni: flex:0 0 100% forsira sopstveni red unutar flex-wrap kontejnera. */
.negic-featured-section .negic-see-all {
  position: absolute;
  top: 82px;   /* tabs: top:24 + height:50 + gap:8 */
  right: 15px;
  margin: 0;
}
.negic-featured-section .negic-see-all a {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
}
.negic-featured-section .negic-see-all a:hover { color: var(--brand-strong); }
@media (max-width: 849px) {
  /* Manji razmak između naslova i pilula */
  .negic-featured-section .negic-section-head {
    margin-bottom: 12px !important;
  }
  /* Pilule desno */
  .negic-featured-section .tabbed-content > ul.nav-line {
    position: static !important;
    margin: 0 0 12px auto !important;
  }
  /* flex:0 0 100% = pun red ispod pilula, iznad artikala.
     tab-panels ima padding-top:16px — nuliramo ga i stavljamo
     12px na obe strane linka → tačno na sredini. */
  .negic-featured-section .negic-see-all {
    position: static !important;
    flex: 0 0 100% !important;
    text-align: right;
    margin: 0 0 12px !important;
  }
  .negic-featured-section .tabbed-content > .tab-panels {
    padding-top: 0 !important;
  }
}

/* Brendovi sekcija — vraćamo normalan vertikalni ritam (bio zbijen na 6px).
   Korisnik traži razmak u skladu sa ostalim sekcijama. */
.home .negic-last-section { padding-top: 40px !important; padding-bottom: 40px !important; }
.home .negic-last-section .col { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Sivi strip — sekcija "Kožna galanterija + Opremi se za školu" baneri.
   Sekcija je 1050px unutar row-main containera, ne top-level Flatsome section.
   Full-bleed trik: ::before se širi na 100vw od centra, z-index:-1 unutar
   isolation:isolate konteksta. Boja #F4F3F1 = topla blaga siva (po prima.rs uzoru).
   Padding simetričan 40px top/bottom. */
.section:has(.negic-banners) {
  position: relative !important;
  isolation: isolate;
  background-color: transparent !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
/* Flatsome col unutar sekcije ima default padding-bottom: 30px
   što dodaje 30px na sekcijin padding-bottom → vizuelna asimetrija. */
.section:has(.negic-banners) .col {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}
.section:has(.negic-banners)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: #F8F3EB;   /* topli pesak, ublažen (2026-07-04: bilo #F1E8D7, delovalo prejako; sad bliže krem strani, suptilna traka) */
  z-index: -1;
  pointer-events: none;
}

/* ============================================================
   AA kontrast za sitne tekst-linkove na svetlim pozadinama (2026-06-13).
   --brand (teal-600) na krem pozadini daje 3.02:1, ispod WCAG AA praga 4.5:1
   za sitan tekst. Ovi selektori prelaze na --brand-text (teal-800, 5.0:1).
   Dugmad sa belim tekstom, ikonice i badge-ovi namerno ostaju na --brand.
   ============================================================ */
.negic-section-head a,
.negic-brand-all,
.negic-brandcard-go,
.negic-qv-more,
.negic-map-card-head a,
.negic-tl-year,
.negic-pdp-brand,
.negic-pdp-specs .negic-pdp-stock,
.negic-featured-section .negic-see-all a,
.cmplz-cookiebanner .cmplz-message a {
  color: var(--brand-text) !important;
}
.cmplz-cookiebanner .cmplz-always-active { color: var(--brand-text) !important; }
.negic-legal-dl a { color: var(--brand-text); border-color: var(--brand-text); }
.negic-legal-dl a:hover { background: var(--brand-text); color: #fff; }

/* PDP divider iznad cene (Flatsome .is-divider): dizajn ga NEMA — sklonjen
   (Milanova ispravka 2026-06-13; ranija ideja da se oboji u brend povučena). */
.product-info .is-divider { display: none; }

/* ============================================================
   Prazan rezultat pretrage/kategorije/filtera (loop/no-products-found.php):
   poruka + nova pretraga + kategorije + kontakt kartica + najtrazeniji.
   ============================================================ */
.negic-empty-results { padding: 8px 0 24px; }
.negic-er-head h2, .negic-er-head h1 { font-size: 26px; margin-bottom: 6px; }
.negic-er-head p { color: var(--ink-2); margin-bottom: 14px; }
/* 404: silueta knjige iz logoa (brend detalj, po Fable) — tirkizna ikonica na vrhu. */
.negic-404-mark { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 16px; background: var(--brand-tint-2); color: var(--brand); margin-bottom: 14px; }
.negic-404-mark svg { width: 34px; height: 34px; }
.negic-er-head .woocommerce-product-search { max-width: 460px; display: flex; gap: 8px; }
.negic-er-head .woocommerce-product-search .search-field { flex: 1; border-radius: 999px; border: 1.5px solid var(--line-2); padding: 10px 18px; background: #fff; }
.negic-er-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 22px 0; }
.negic-er-cat { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: box-shadow .15s, transform .15s; }
.negic-er-cat:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.negic-er-cat-img img { width: 64px; height: 64px; object-fit: contain; }
.negic-er-cat b { font-size: 14px; color: var(--ink); }
.negic-er-cat-n { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.negic-er-contact { background: var(--brand-tint-2); border-radius: var(--r); padding: 16px 20px; margin: 8px 0 22px; display: flex; gap: 13px; align-items: flex-start; }
.negic-er-contact .negic-svg-icon { color: var(--brand-text); flex-shrink: 0; margin-top: 3px; }
.negic-er-contact b { display: block; margin-bottom: 2px; }
.negic-er-contact p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.negic-er-contact a { color: var(--brand-text); font-weight: 600; }
.negic-er-pop { margin-top: 26px; }
@media (max-width: 549px) {
  .negic-er-cats { grid-template-columns: repeat(2, 1fr); }
  .negic-er-head h2 { font-size: 21px; }
}

/* ============================================================
   PDP po dizajnu (Milanove ispravke 2026-06-13):
   dugme sa ikonicom i bez senke, related sec-head, no-results bez sidebara.
   ============================================================ */
/* "Dodaj u korpu": ikonica korpe ispred teksta + senka, oboje po dizajnu
   (btn-primary: 0 6px 16px teal 30%, hover jace + lift). Vazi i u brzom pregledu. */
.product-info form.cart .single_add_to_cart_button.button {
  box-shadow: 0 6px 16px oklch(0.585 0.105 188 / 0.30) !important;
}
.product-info form.cart .single_add_to_cart_button.button:hover {
  box-shadow: 0 10px 22px oklch(0.585 0.105 188 / 0.36) !important;
  transform: translateY(-1px);
}
.product-info form.cart .single_add_to_cart_button.button::before {
  content: ""; width: 18px; height: 18px; margin-right: 9px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--negic-cart-ico) center / contain no-repeat;
  mask: var(--negic-cart-ico) center / contain no-repeat;
}

/* Povezani proizvodi: sec-head kao dizajn (eyebrow "Iz iste police" + h2 + Vidi sve);
   vise vazduha iznad i ispod kartica (Milan 2026-06-13) */
.negic-rel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 8px 0 26px; flex-wrap: wrap; }
.single-product .related.product-section { padding-bottom: 26px; }
.negic-rel-head h2 { margin: 6px 0 0; }
.negic-rel-head > a {
  font-family: var(--font-head); font-weight: 700; font-size: 14.5px; color: var(--brand-text);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin-bottom: 6px;
}
.negic-rel-head > a:hover { gap: 9px; color: var(--brand-strong); }
/* stari uppercase naslov sa linijom vise ne postoji (related.php override) */

/* Prazan rezultat: sakrij prazan "FILTERI" sidebar i rasiri sadrzaj (Milanov feedback) */
.negic-no-results #shop-sidebar,
.negic-no-results .shop-sidebar,
.negic-no-results .sidebar-wrapper { display: none !important; }
.negic-no-results .large-9 { flex-basis: 100% !important; max-width: 100% !important; }
/* Adresa radnje = link na mape, isti font kao ostatak reda (Milan 2026-06-13) */
.negic-pdp-stock-list li { flex-wrap: wrap; }
.negic-pdp-stock-map { font: inherit; color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.negic-pdp-stock-map:hover { color: var(--brand-strong); }
.negic-pdp-stock-list li.muted a { color: var(--brand-text); font-weight: 600; }
.negic-pdp-stock-list li.muted { display: block; }

/* Napomena o tačnosti podataka u dnu footera (ispod copyright reda) */
.absolute-footer .negic-footer-napomena {
  margin: 8px auto 0 0; font-size: 11.5px; font-weight: 400; line-height: 1.6;
  /* tiše od copyright reda (footer p inače dobija skoro belu) */
  color: rgba(255, 255, 255, 0.5) !important; max-width: 720px;
}
.absolute-footer .negic-footer-napomena a { color: rgba(255, 255, 255, 0.72); }
@media (max-width: 549px) {
  .absolute-footer .negic-footer-napomena { margin: 8px auto 0; }
}
.absolute-footer .footer-primary { float: none; width: 100%; }

/* ============================================================
 * Uplatnica (NALOG ZA UPLATU) — pregled na blagajni i potvrdi (2026-06-18)
 * ============================================================ */
.negic-uplatnica-link {
  display: inline-block; margin-left: 4px; font-weight: 600;
  color: var(--brand-strong); text-decoration: underline; cursor: pointer;
}
.negic-uplatnica-dialog {
  width: min(680px, 94vw); max-width: 680px; padding: 0; border: 0; border-radius: 14px;
  max-height: 92vh; overflow-y: auto; /* skroluj ako sadrzaj prelazi (dugme se ne sme odseci) */
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28); color: var(--ink);
  font-family: var(--font-body);
}
.negic-uplatnica-dialog::backdrop { background: rgba(20, 30, 32, .55); }
.negic-up-head {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--brand); color: #fff; padding: 13px 18px;
  font-family: var(--font-head); font-weight: 700; letter-spacing: .04em; font-size: 16px;
}
.negic-up-x {
  background: none; border: 0; color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer; padding: 0 4px;
  /* poništi Flatsome default button min-height (65px) i margin koji su dizali header */
  min-height: 0; height: auto; margin: 0;
}
.negic-uplatnica { padding: 12px; background: #fff; overflow-x: auto; }
.negic-uplatnica-wrap {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  margin: 18px 0; max-width: 720px;
}
/* Zvanični Obrazac br. 1 kao slika-pozadina, naši podaci preko nje (overlay na % koordinatama). */
.negic-up-official {
  position: relative; width: 100%; min-width: 440px; max-width: 720px; margin: 0 auto;
  aspect-ratio: 2482 / 1148;
  background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
  container-type: inline-size;
  font-family: var(--font-body); color: #1a1a1a;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; /* slika ide i u štampu */
}
.negic-up-official span { position: absolute; line-height: 1.1; font-size: clamp(9px, 2cqw, 15px); }
.negic-upo-l { transform: translateY(-50%); white-space: nowrap; }   /* tanko polje, levo */
.negic-upo-c { transform: translateY(-50%); text-align: center; }    /* tanko polje, centrirano (šifra/valuta) */
.negic-upo-box { width: 41%; }                                        /* visoko polje (svrha/primalac) */
.negic-upo-mono { font-family: var(--font-mono); letter-spacing: -.3px; }
.negic-up-note {
  margin: 12px 2px 0; font-size: 13px; color: var(--brand-strong);
  font-weight: 600; text-align: center;
}
/* Dugme „Odštampaj / sačuvaj uplatnicu" (browser Save as PDF). */
.negic-uplatnica-print {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  margin: 14px 0 2px; padding: 10px 18px; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: 13.5px;
  color: var(--brand-strong); background: #fff;
  border: 1.5px solid var(--brand); border-radius: var(--r-pill);
  transition: background .18s, color .18s;
}
.negic-uplatnica-print:hover { background: var(--brand); color: #fff; }
.negic-uplatnica-print::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 auto; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Minimalna porudžbina — kratka info u draweru (tvrda blokada je na blagajni za dostavu) */
.negic-min-info {
  margin: 0 0 10px; text-align: center;
  font-size: 12.5px; font-weight: 600; color: var(--brand-strong);
}
.negic-min-info span {
  display: block; margin-top: 2px;
  font-size: 11.5px; font-weight: 400; color: var(--ink-2);
}

/* ============ Obaveštenje traka (store notice) 2026-07-03 ============ */
/* WooCommerce "Obaveštenje prodavnice" (Customizer → WooCommerce → Obaveštenje
   prodavnice). Tekst se menja tamo, sme osnovni HTML (<strong> za datume).
   Traka je u toku strane (gura header, ne preklapa ga); sticky header je pri
   skrolu normalno pregazi. "Odbaci" je zamenjen ✕ dugmetom u functions.php
   (sekcija OBAVEŠTENJE TRAKA); zatvaranje pamti Woo kolačić vezan za sadržaj
   teksta, pa nov tekst ponovo prikaže traku svima. */
.woocommerce-store-notice.demo_store {
  position: relative;
  margin: 0;
  padding: 10px 56px;
  background: var(--accent-tint);
  color: var(--ink);
  border-bottom: 1px solid oklch(0.88 0.05 64);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
}
.woocommerce-store-notice.demo_store strong {
  font-weight: 700;
  /* tamniji clay: --accent-strong je 3.7:1 na tintu (ispod AA 4.5),
     ovo ≈ #8f4a1f = 5.5:1 (isti manevar kao --brand-text za teal) */
  color: oklch(0.50 0.13 48);
}
.woocommerce-store-notice.demo_store a.woocommerce-store-notice__dismiss-link {
  position: absolute;
  /* na širokim ekranima ✕ prati ivicu sadržaja (--maxw), ne ivicu ekrana */
  right: max(12px, calc((100% - var(--maxw)) / 2));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.woocommerce-store-notice.demo_store a.woocommerce-store-notice__dismiss-link:hover {
  background: rgba(179, 96, 46, .12);
  color: var(--ink);
}
@media (max-width: 549px) {
  .woocommerce-store-notice.demo_store {
    padding: 9px 48px 9px 14px;
    font-size: 13px;
    text-align: left;
  }
  /* veći touch target na dodirnim ekranima (blizu 44px preporuke) */
  .woocommerce-store-notice.demo_store a.woocommerce-store-notice__dismiss-link {
    right: 4px;
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
}

/* ============================================================
   MOBILNI RITAM SEKCIJA POČETNE — ujednačen razmak (Milan 2026-07-04)
   Sekcije su imale neujednačen padding (13–40px, + kasnija pravila koja gaze ranija).
   Ovo je poslednji blok u fajlu pa pobeđuje kaskadu. Hero zadržava svoj razmak (22/0).
   ============================================================ */
@media (max-width: 849px) {
  .home .section:not(.negic-hero-sec) {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
  /* „Najtraženije pred polazak u školu" — više vazduha iznad (odvoji od banera iznad). */
  .home .section.negic-najtrazenije-sec { padding-top: 36px !important; }
  /* Featured (Roditelji) — dno 18->10px: kartice grida 2026-07-09 nose default
     19.6px donjeg padinga (ritam red-na-red), pa bi 18px sekcije dalo prevelik
     razmak ka Brendovima (bio 48px, cilj isto). Zbir 19.6+10 ~ stari 6+6+18. */
  .home .section.negic-featured-section { padding-bottom: 10px !important; }
}

/* ============================================================
   WOOF CENA FILTER — skeleton dok se slajder ne inicijalizuje (2026-07-06)
   Sirovi <input.woof_range_slider> je do inicijalizacije stajao kao prazno
   belo polje (screenshot Milan). ion.rangeSlider pri init-u dodaje klasu
   irs-hidden-input, pa ovaj stil važi SAMO pre inicijalizacije: crtamo
   sivu liniju slajdera sa dve tačke (skeleton) u istoj visini kao gotov
   .irs--round (40px) — nema skoka rasporeda ni praznog polja.
   ============================================================ */
.woof_price_filter .woof_range_slider:not(.irs-hidden-input) {
  display: block;
  width: 100%;
  height: 40px;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  outline: none;
  color: transparent;
  caret-color: transparent;
  pointer-events: none;
  background:
    radial-gradient(circle 9px at 14px 62%, #d9e0df 97%, transparent 100%) no-repeat,
    radial-gradient(circle 9px at calc(100% - 14px) 62%, #d9e0df 97%, transparent 100%) no-repeat,
    linear-gradient(#e8ecec, #e8ecec) 0 62% / 100% 4px no-repeat;
  animation: negic-cena-skeleton 1.3s ease-in-out infinite;
}
@keyframes negic-cena-skeleton {
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .woof_price_filter .woof_range_slider:not(.irs-hidden-input) { animation: none; }
}

/* === RAZMACI NASLOVNA MOBILNI 2026-07-12 — ujednačavanje na ~40px VIZUELNO =====
   Cilj: svih 6 granica između 7 sekcija naslovne da na telefonu budu ~40px
   VIZUELNOG razmaka (ivica-do-ivice kartica/slika/teksta; prihvatljivo 36–44).
   ISPRAVKA metrike (2026-07-12): raniji prolaz je granice doterao po tekst-do-
   tekst razmaku (60px), ali oko vidi IVICU kartice, ne tekst u njoj — pa su
   vizuelni razmaci ispali neujednačeni (25–60px). Sada merimo visGap
   (scratchpad/meri-naslovna-v2.js mobile) i ciljamo ~40; GROUND TRUTH je piksel
   skener beline (scratchpad/scan-belina.js), jer DOM rect ume da laže — vidi
   granicu 4 ispod. Desktop se NE dira ovde
   — sve je u @media (max-width: 849px); desktop ritam je u zasebnom bloku ispod.
   Selektori su KLASNI / ":has()", jer Flatsome UX Builder regeneriše #section_XXXX
   ID na svaki render (ID-jevi NISU stabilni). Blok je poslednji među max-width:849px
   blokovima pa pobeđuje kaskadu. Redosled sekcija: hero → „Kupovina po odeljenju"
   → USP traka → školski baner → „Najtraženije" → „Roditelji…" → „Brendovi".
   Sve granice su krem-belina (telo krem, kartice bele) — nema tvrdog seam-a.
   ============================================================================ */
@media (max-width: 849px) {
  /* Granica 0 (hero → „Kupovina po odeljenju"): visGap bio 60 (previše). Hero
     steže donji razmak. 37 → 17; PIKSEL korekcija: skener pokazao stvarnih 32
     (DOM precenio ivicu hero kartice), pa 17 → 24 → ~39 stvarno. */
  .home .section.negic-hero-sec { padding-bottom: 24px !important; }

  /* Granica 1 („Kupovina" → USP traka): visGap bio 25 (premalo). Col-padding
     ispod mreže je 0 (dno kolone nije razmak naslov↔kartice); dižemo dno sekcije
     i gornji razmak USP-a. 12+13 → 18+22 → ~40. */
  .home .section:has(.negic-katgrid) .section-content > .row > .col { padding-bottom: 0 !important; }
  .home .section:has(.negic-katgrid) { padding-bottom: 18px !important; }
  .home .section:has(.negic-trust-strip) { padding-top: 22px !important; }

  /* Granica 2 (USP traka → školski baner): baner drži gornji razmak. Milan
     2026-07-15: ŠIRA traka i na mobilnom — više vazduha iznad i ispod kartica.
     Ciljni razmak ivica-trake ↔ ivica-kartice ~28 gore / ~26 dole. Dno je do sada
     padalo na bazno pravilo (40px), sad ga eksplicitno vezujemo. 23 → 28, +dno 26.
     Namerno šire nego P6 stanje — sledeći P6 prolaz NE steže nazad. */
  .home .section:has(.negic-trust-strip) .section-content > .row > .col { padding-bottom: 0 !important; }
  .home .section:has(.negic-banners) { padding-top: 28px !important; padding-bottom: 26px !important; }

  /* Granica 3 (školski baner → „Najtraženije"): visGap bio 32 (premalo).
     „Najtraženije" diže gornji razmak. 19 → 27 → ~40. */
  .home .section.negic-najtrazenije-sec { padding-top: 27px !important; }

  /* Granica 4 („Najtraženije" → „Roditelji…"): doterana po PIKSEL merenju
     (scan-belina.js), NE po visGap-u! IMG.negic-promo-photo ima rect ~22px NIŽI
     od vidljive ivice kartice (overflow clip), pa je DOM visBottom „Najtraženije"
     fantomski: visGap ovde pokazuje ~17 a stvarna belina je bila 66 (Milan je
     autlajer i prijavio). Sekcija iznad dno 18 (iz MOBILNI RITAM bloka) → 0,
     „Roditelji" vrh 5 → 0 → stvarno ~43. */
  .home .section.negic-najtrazenije-sec { padding-bottom: 0 !important; }
  .home .section.negic-featured-section { padding-top: 0 !important; }

  /* Granica 5 („Roditelji…" → „Brendovi"): visGap bio 34 (malo premalo).
     „Brendovi" diže gornji razmak. 10 → 16; PIKSEL korekcija: skener pokazao
     stvarnih 47, pa 16 → 10 → ~41 stvarno. */
  .home .section.negic-last-section { padding-top: 10px !important; }
}

/* === RAZMACI NASLOVNA DESKTOP 2026-07-12 — ujednačavanje na ~60px vizuelno =====
   Isti princip kao mobilni blok iznad, samo za desktop (min-width: 850px) i sa
   ciljem ~60px VIZUELNOG razmaka (ivica-do-ivice; prihvatljivo 55–65). visGap se
   meri sa scratchpad/meri-naslovna-v2.js desktop; GROUND TRUTH je piksel skener
   beline (scratchpad/scan-belina.js) — vidi granicu 4. Selektori klasni / ":has()"
   (Flatsome regeneriše #section_XXXX). Blok je poslednji u fajlu → pobeđuje
   kaskadu nad ranijim desktop pravilima iste/niže specifičnosti.
   Napomena: granica 1/2/5 u vizuelni razmak uračunavaju i ~30px Flatsome col-
   padinga ispod prethodne sekcije, pa su knob-ovi (padding sekcije) manji od 60. */
@media (min-width: 850px) {
  /* Granica 0 (hero → „Kupovina po odeljenju"): visGap bio 27 (premalo — hero
     nema dno, fold trik). Hero dobija donji razmak. 0 → 33 → ~60. */
  .home .section.negic-hero-sec { padding-bottom: 33px !important; }

  /* Granica 1 („Kupovina" → USP traka): visGap bio 66 (tik iznad opsega). Mreža
     steže dno sekcije (col-padding 30px ostaje deo razmaka). 23 → 17 → ~60. */
  .home .section:has(.negic-katgrid) { padding-bottom: 17px !important; }

  /* Granica 2 (USP → školski baner) i Granica 3 (baner → „Najtraženije"): P6 runde
     su traku stegle na 17/10, pa je pešačana traka (::before) pala preblizu kartica
     banera. Milan 2026-07-15: traži ŠIRU traku — više vazduha iznad i ispod kartica.
     Ciljni razmak ivica-trake ↔ ivica-kartice ~36 gore / ~34 dole (mereno rect-om).
     17/10 → 36/34. Napomena: ovim content-to-content razmaci (G2/G3) namerno rastu
     preko starih ~60px — to je Milanova želja, sledeći P6 prolaz NE vraća nazad. */
  .home .section:has(.negic-banners) { padding-top: 36px !important; padding-bottom: 34px !important; }

  /* Granica 4 („Najtraženije" → „Roditelji…"): doterana po PIKSEL merenju
     (scan-belina.js), NE po visGap-u! Isti fantom kao na mobilnom: rect
     IMG.negic-promo-photo je ~22px niži od vidljive ivice kartice (overflow
     clip), pa visGap 56 „u opsegu" nije bio stvaran — piksel skener je pokazao
     83. Sekcija iznad dno 20 → 8, „Roditelji" vrh 20 → 9 → stvarno ~60. */
  .home .section.negic-najtrazenije-sec { padding-bottom: 8px !important; }
  .home .section.negic-featured-section { padding-top: 9px !important; }

  /* Granica 5 („Roditelji…" → „Brendovi"): visGap bio 65 (na gornjoj ivici).
     „Brendovi" steže gornji razmak. 40 → 35; PIKSEL korekcija: skener pokazao
     stvarnih ~71 (meri do vrha line-boxa naslova), pa 35 → 26 → ~62 stvarno. */
  .home .section.negic-last-section { padding-top: 26px !important; }
}

/* ============================================================
   STRANA /novo/ — čipovi odeljenja, brojač i CTA (Milan 2026-07-27)
   Pilule po uzoru na „Tema" pilule kontakt forme: tint pozadina,
   aktivna = brend + bela slova. Filter je server-side (?odeljenje=),
   pa su ovo obični linkovi. Na mobilnom se prelamaju, bez h-skrola.
   ============================================================ */
/* Traka je centrirana na osu naslova (Milan 27.7: levo poravnata uz centriran
   naslov delovala nabijeno); max-width prelama pilule u dva uravnotežena reda
   umesto dugačkog prvog reda i siročeta u drugom. */
.negic-novo-traka { margin: 10px auto 26px; max-width: 880px; text-align: center; }
.negic-novo-cipovi { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.negic-novo-cip {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--brand-tint-2);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.negic-novo-cip:hover { background: var(--brand-tint); color: var(--ink-2); }
.negic-novo-cip.is-active,
.negic-novo-cip.is-active:hover { background: var(--brand); color: #fff; }
/* Brojač: mono labela, prigušena (isti jezik kao ostale mono labele). */
/* Brojač uz grid (levo), van centrirane trake — konvencija broja rezultata. */
.negic-novo-broj { margin: 0 0 10px; text-align: left; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.negic-novo-prazno { margin: 26px 0 30px; color: var(--ink-2); }
.negic-novo-cta { margin: 24px 0 6px; text-align: center; }
.negic-novo-cta .button { margin: 0; }

/* ===============================================================
   ŠIRINA SAJTA 2026-07-28 (plan: c:\Negic\sirina-sajta-plan.md)
   Prodavnica/kategorije idu na 4 kolone (functions.php, filter
   theme_mod_category_row_count). Flatsome-ova klasa large-columns-4
   važi od 850px viewporta naviše, pa bi i tablet dobio 4 kartice.
   Mereno na /prodavnica/ (grid je uz filter sidebar, red je 913px
   pri kontejneru 1230, ne cela širina kontejnera):
     1280+ -> kartica 228px, odsečen 1 naslov od 12
     1120  -> kartica 208px, odsečena 2 od 12
     1024  -> kartica 190px, odsečena 3 od 12 i slika padne na 148px
   Zato ispod 1280px vraćamo Flatsome-ov raspored od 3 kolone.
   PAŽNJA (dve namerne razlike od predloga iz plana):
   1. Gornja granica je 1279px, ne 1280px. Na tačno 1280 media query
      sa max-width:1280px se PALI, pa bi 1280 pao na 3 kolone i oborio
      asertaciju „4 kolone na >=1280" u sirina-proba.js.
   2. Pravilo je vezano za arhive prodavnice/kategorija, isto kao i PHP
      filter. Nevezano bi pogodilo i /novo/, koje koristi identične klase
      (products row row-small large-columns-4) i 4 kolone je tamo
      zatečeno stanje, ne posledica ove izmene.
   =============================================================== */
@media (min-width: 850px) and (max-width: 1279px) {
  .post-type-archive-product .products.large-columns-4 > .col,
  .tax-product_cat .products.large-columns-4 > .col {
    flex-basis: 33.333%;
    max-width: 33.333%;
  }
}

/* ---------------------------------------------------------------
   PEGLANJE 2026-07-28 (Zadatak 4) — dorade koje traži širi raspored
   --------------------------------------------------------------- */

/* 0a. Opis kategorije ide do pune širine kolone sa proizvodima.
   Ranije: .term-description je imao max-width 70ch (linija ~1245) pa
   72ch (linija ~4953). Mereno na /kategorija/rancevi/ @1920: opis 648px
   u koloni od 893px, tj. lomio se na 73% širine i vizuelno „visio" levo
   dok grid ide do kraja. Milan (2026-07-28): tekst da ide do kraja.
   Mobilni (≤849px) izostavljen: tamo je kolona ionako uža od 72ch pa
   cap nikad nije ni hvatao — pravilo bi bilo mrtvo slovo. */
@media (min-width: 850px) {
  .term-description { max-width: none; }
}

/* 0b. Desna grupa nav-a (| Brendovi · Novo · Naš izbor) uz desnu ivicu.
   Grupu je ranije desno gurao „Komplet za prvaka" (margin-left:auto,
   linija ~5280); ta stavka je sklonjena iz menija pa je ceo red ostao
   levo poravnat, a na kontejneru 1230 iza „Naš izbor" je ostajalo 159px
   praznine. Auto-margina se seli na prvu stavku grupe (nosi i separator).
   Desna margina poslednje stavke ide na 0 da se pilula završi tačno u
   liniji sa desnom ivicom korpe (obe = desna ivica kontejnera).
   SAMO poravnanje: struktura menija se ne dira, #wide-nav je ionako
   sakriven ≤849px pa mobilni (hamburger, .nav-sidebar) ostaje isti. */
#wide-nav .header-bottom-nav > li.menu-brendovi { margin-left: auto !important; }
#wide-nav .header-bottom-nav > li.menu-akcija-btn { margin-right: 0 !important; }

/* 1. Polje pretrage prati širi header.
   Header je držao pretragu na 520px (li 560px) iz vremena kontejnera
   1080. Na 1230 sav višak ode u prazninu pretraga→korpa (mereno 410px),
   pa red izgleda rasut. Pretraga 520→640px (li 560→680px) skida prazninu
   na ~290px. Samo od 1081px naviše, jer se ispod toga kontejner nije ni
   menjao (tablet 1024 ostaje identičan). */
@media (min-width: 1081px) {
  .header-main .nav > li.html.html_nav_position_text_top { max-width: 680px; }
  .header-main li.html.html_nav_position_text_top .dgwt-wcas-search-wrapp { max-width: 640px; }
}

/* 0c-1. Vazduh na arhivama: naslov → opis → grid.
   Naslov je imao 8px do opisa (mereno: naslov dno 331, opis vrh 338), pa se
   opis lepio za veliki Baloo naslov. Sa opisom na punoj širini (893px umesto
   648px) blok je vizuelno teži i traži jasniju pauzu na obe strane:
   naslov→opis 8→16px, opis→grid 28→34px. Bez opisa (npr. /prodavnica/)
   ostaje samo veći razmak naslov→grid, što je isti efekat. */
@media (min-width: 850px) {
  .negic-cat-title { margin-bottom: 16px; }
  .term-description { margin-bottom: 34px; }
}

/* 0c-2. Brend traka: logoi prate širinu kontejnera.
   Grid je 6 kolona 1fr, pa je ćelija sa 1050px sadržaja narasla sa 152px na
   177px, dok su logoi ostali zakovani na 150×52px. Razmak između susednih
   logoa je zato skočio (~25px po logou) i traka je delovala raštrkano.
   Logoi rastu ~14%, koliko je porastao i kontejner (1050→1200), pa gustina
   ostaje kao u odobrenom dizajnu na 1080. Tek od 1230px, jer je tek tu ćelija
   (177px) šira od novog cap-a (172px) — niže bi logo curio iz ćelije. */
@media (min-width: 1230px) {
  .negic-brandstrip--grid .negic-brand-logo-tile { height: 62px; }
  .negic-brandstrip--grid .negic-brand-logo-tile img { max-height: 60px; max-width: 172px; }
}

/* 3. O nama, vremenska linija: višak širine ide u fotografiju, ne u dužinu reda.
   Raspored je `1fr 360px`, pa je svih +150px sadržaja otišlo u tekstualnu
   kolonu: red je sa ~96 znakova (odobreno stanje na 1080) skočio na ~110.
   Foto kolona 360→460px vraća meru reda na ~96 znakova, a slobodan prostor
   dobija fotografija. Fotografija je 600×800px pa na 460px nema upscale-a.
   NAPOMENA: tvrdi cap na 70-75ch iz plana NIJE primenjen — suzio bi tekst na
   ~520px i otvorio ~280px rupe do fotografije, što je izmena dizajna, a ne
   posledica šire strane. Za Milana kao opciona dorada. */
@media (min-width: 1230px) {
  .negic-tl-layout { grid-template-columns: 1fr 460px; }
}

/* 4b-1. Naslovna: manje vazduha ispod hero banera i ispod naslova
   „Kupovina po kategorijama" (Milan 2026-07-28, „malo", ~25%).
   Na širem kontejneru (1230) hero je porastao i u širinu i u visinu, pa je
   razmak do prve sekcije počeo da deluje kao rupa. Mereno na naslovnoj @1920:

     (a) hero dno → naslov „Kupovina po kategorijama"
         hero padding-bottom            33px  →  25px
         padding-top sekcije kategorija 23px  →  17px
         ZBIR (razmak sadržaj→sadržaj)  56px  →  42px   (−25,0%)

     (b) naslov → prvi red kartica
         .negic-section-head margin-bottom  28px → 21px  (−25,0%)

   Odakle su stare vrednosti:
   - 33px: blok „RAZMACI NASLOVNA DESKTOP 2026-07-12", Granica 0 (linija ~8275).
     Ima !important, pa ga ovaj blok mora nadjačati istim oružjem; radi zato
     što je poslednji u fajlu.
   - 23px: inline stil UX Buildera `#section_XXXX { padding-top: 23px }`.
     ID selektor je specifičniji od klase, otud !important i ovde.
   - 28px: bazno pravilo `.negic-section-head` (linija ~322), bez !important —
     nadjačava se samo specifičnošću.

   Selektor je klasni (`:has(.negic-katgrid)`), NE `#section_XXXX`: UX Builder
   regeneriše te ID-jeve na svaki render (provereno 2026-07-28, isti odeljak je
   u dva uzastopna zahteva bio #section_2145500533 pa #section_326102268).
   Vezano je za `.home` i za sekciju sa mrežom kategorija, pa ostale sekcije
   naslovne i sve druge strane sa `.negic-section-head` ostaju netaknute.
   Samo desktop (≥850px): mobilni ritam je pikselski štimovan u zasebnom bloku
   (Granica 0 tamo je 24px) i po dogovoru se ovim projektom ne dira. */
@media (min-width: 850px) {
  .home .section.negic-hero-sec { padding-bottom: 25px !important; }
  .home .section:has(.negic-katgrid) { padding-top: 17px !important; }
  .home .section:has(.negic-katgrid) .negic-section-head { margin-bottom: 21px; }
}

/* 4b-2. „Likovno" kao 7. inline stavka menija — zaštita uskog opsega.
   Stavka je dodata u BAZU (nav meni „glavni-meni", klase
   `menu-inline-cat menu-likovno`); ovde je samo CSS zaštita.
   Postojeće pravilo (linija ~2350) sve inline kategorije sakriva ispod 1101px,
   pa je kritičan opseg 1101-1229. Mereno posle dodavanja Likovnog:

     1101-1149  pilula „Sve kategorije" se prelama u 3 reda
                (visina nav-a 38 → 58/74px, header naraste ~35px na SVAKOJ strani)
     1150+      sve u jednom redu, pilula 38px

   Traka je `flex-wrap: nowrap`, pa višak ne prelama meni nego pilulu — otud skok
   visine, ne drugi red stavki. Zato Likovno skrivamo ispod 1160px (10px rezerve
   iznad izmerene granice 1149, zbog jitter-a pri učitavanju fontova). U tom
   opsegu meni izgleda TAČNO kao pre ove izmene: 6 inline kategorija, pilula u
   jednom redu. Ispod 1101px i dalje važi staro pravilo (nema inline kategorija).
   Razmak Galanterija → separator/Brendovi: 23px @1160, 93px @1230+. */
@media (max-width: 1159px) {
  #wide-nav .header-bottom-nav > li.menu-likovno { display: none !important; }
}

/* ---------------------------------------------------------------
   4c 2026-07-28 — pretraga do korpe, krupniji rezultati, ritam sekcija
   --------------------------------------------------------------- */

/* 4c-1. Polje pretrage uzima SAV slobodan prostor do korpe.
   NADJAČAVA blok „1" iznad (koji je pretragu držao na fiksnih 640px).
   Fiksna širina je i bila privremeno rešenje: svaka nova širina kontejnera
   traži novu vrednost. Sada nema cap-a — `li.html` je već `flex: 1 1 auto`
   unutar `.header-nav-main.nav-left`, pa sam popuni prostor između logoa i
   `.nav-right` (korpa). Radi bez posebnih vrednosti po širini.

   Mereno @1920 (pre → posle):
     li.html                            680px (544..1224)  →  926px (544..1470)
     .dgwt-wcas-search-wrapp / input    640px (564..1204)  →  926px (544..1470)
     praznina pilula → kutija korpe     290px  →  24px
     praznina pilula → glif korpe       ~305px →  ~39px

   NAPOMENA za Milana: polje ne MOŽE da ide do x=1560 (desna ivica kontejnera),
   jer korpa zauzima 1494..1560 u ISTOM redu — polje bi ušlo pod ikonicu korpe.
   „Do korpe" je zato maksimum. `padding-right: 24px` je jedina fiksna vrednost
   ovde i drži razmak do korpe u rangu razmaka logo → pilula (30px); bez njega
   se pilula lepi za korpu (mereno: 0px do kutije, 15px do glifa). Korpa se NE
   pomera — `.nav-right` je i dalje na 1494..1560.
   ZAŠTO padding, a ne margin: nešto van child teme gasi margine na ovoj
   stavci (izmereno `margin-right: 0px` i posle deklaracije od 24px, dok je
   `max-width: none` iz istog bloka prošao). Padding na `li` radi jer je
   `.dgwt-wcas-search-wrapp` `width: 100%` content boxa, pa se pilula skrati.

   Praktična posledica: FiboSearch dropdown prati širinu polja (isti wrapper),
   pa je panel predloga sada 926px umesto 640px — to je pola posla za 4c-2.

   REVIZIJA 2026-07-29 (Milan, UI/UX odluka): pilula od 926px je preduga.
   Polje pretrage se vraća na 700px i ostaje poravnato LEVO, tačno tamo gde i
   počinje sada. Slobodan prostor ide u prazninu do korpe, ne oko pilule.
   Raspored je: logo | pretraga 700px | vazduh | korpa.
   Mereno (pre 4c-1 → posle 4c-1 → sada):

     širina   .dgwt-wcas-search-wrapp        praznina pilula → korpa
     1366     640px → 926px (267..1193)  →  700px (267..967)     250px
     1920     640px → 926px (544..1470)  →  700px (544..1244)    250px

   Leva ivica se ne pomera ni u jednom koraku (267 na 1366, 544 na 1920), pa
   se odnos logo → pretraga ne dira; skraćuje se samo desni kraj pilule.
   `padding-right` sa 4c-1 (24px) je držao razmak pilula → korpa dok su se
   dodirivale; sada je između njih 250px pa se gasi na 0 da ne bi ostala
   vrednost koja ništa ne radi. Cap ide na wrapper, a `li` i dalje ostaje bez
   svog cap-a (`flex: 1 1 auto` puni prostor), pa se pilula prosto zaustavi
   na 700px umesto da prati stavku.

   `margin-left: 0` je OBAVEZAN: plugin svom wrapperu daje `margin: 0 auto`
   (assets/css/style.min.css, `.dgwt-wcas-search-wrapp`). Dok je cap bio
   `none` to se nije videlo jer je pilula punila celu stavku, ali čim se
   suzi na 700px auto margine je centriraju (mereno: x=392 umesto 267 na
   1366). Desna margina ostaje `auto` i pojede sav višak do korpe.

   Panel predloga i dalje prati wrapper, pa se sa 926px sužava na 700px i
   otvara poravnat uz levu ivicu pilule. Provereno da ne izlazi iz viewporta
   ni na 1366 ni na 1920 (vidi blok „FIBO PANEL na niskim ekranima"). */
@media (min-width: 1081px) {
  .header-main .nav > li.html.html_nav_position_text_top { max-width: none; padding-right: 0 !important; }
  .header-main li.html.html_nav_position_text_top .dgwt-wcas-search-wrapp {
    max-width: 700px;
    margin-left: 0;
    margin-right: auto;
  }
}

/* 4c-2. FiboSearch predlozi krupniji za ~25% (Milan: „rezultat pretrage mi je
   previše sitan, ja bi sve ovo povećao za 20-30%").
   Samo desktop (≥1081px) — mobilni overlay (.dgwt-wcas-overlay-mobile) koristi
   iste .dgwt-wcas-* klase, pa bi nemedijsko pravilo pogodilo i njega. Ispod
   1081px sve ostaje kao do sada.

     element                          staro      novo     %
     .dgwt-wcas-si (sličica proizvoda)  46px      58px    +26
     .dgwt-wcas-st-title (naslov)       14,5px    18px    +24
     .dgwt-wcas-sp (cena)               14px      17,5px  +25
     .dgwt-wcas-sd (mono labela brenda) 10,5px    13px    +24
     red proizvoda, padding             9px 10px  11px 13px
     čip kategorije, font               13px      16px    +23
     čip kategorije, sličica            30px      38px    +27
     čip bez slike, font                12,5px    15,5px  +24
     „Prikaži sve rezultate", font      13,5px    16,5px  +22
     „Prikaži sve rezultate", padding   13px 12px 16px 14px

   Naslov ostaje `nowrap` + elipsa (pravilo na liniji ~5493), pa ni sa većim
   fontom ne pada u drugi red — a red je sa 4c-1 ionako širi (910 umesto 640px).
   line-height naslova 1,25 → 1,3 da veći font ne seče gornje dijakritike (Š, Č). */
@media (min-width: 1081px) {
  .dgwt-wcas-suggestions-wrapp { padding: 10px !important; }
  .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-product { padding: 11px 13px !important; gap: 14px; }
  .dgwt-wcas-suggestions-wrapp .dgwt-wcas-si { width: 58px !important; height: 58px !important; }
  .dgwt-wcas-suggestions-wrapp .dgwt-wcas-st-title { font-size: 18px !important; line-height: 1.3; }
  .dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp { font-size: 17.5px !important; }
  .dgwt-wcas-suggestions-wrapp .dgwt-wcas-sd { font-size: 13px !important; }

  /* Čip kategorije (pilula na vrhu panela) */
  .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax { font-size: 15.5px !important; padding: 7px 14px 7px 11px !important; }
  .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax::before { width: 17px; height: 17px; }
  .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax:has(.dgwt-wcas-si) { font-size: 16px !important; padding: 6px 18px 6px 6px !important; gap: 10px; }
  .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax .dgwt-wcas-si { width: 38px !important; height: 38px !important; }

  /* „Prikaži sve rezultate" */
  .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-more { padding: 16px 14px !important; }
  .dgwt-wcas-suggestions-wrapp .dgwt-wcas-st-more { font-size: 16.5px !important; }
  .dgwt-wcas-suggestions-wrapp .dgwt-wcas-st-more::after { font-size: 18px; }

  /* Posledica povećanja: red je narastao 64 → 80px, pa panel sa 7 proizvoda
     više ne staje u pluginov cap od 600px (bio 578, sad bi 681). Panel dobija
     unutrašnji skrol i „Prikaži sve rezultate" — glavna akcija panela — ispada
     ispod pregiba. Dve zakrpe:
     1) cap vezan za visinu prozora: na 1080px ekranu stane sve (760px), na
        768px laptopu ostaje ~30px vazduha ispod panela umesto prelivanja.
     2) red „Prikaži sve rezultate" je lepljiv za dno panela, pa je vidljiv i
        kad se lista skroluje. `bottom: 0` = tačno na mestu gde red ionako
        završi kad se doskroluje do dna (10px paddinga wrappera), pa nema
        skoka pri otpuštanju lepljivosti. */
  .dgwt-wcas-suggestions-wrapp { max-height: min(760px, calc(100vh - 140px)) !important; }
  .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-more {
    position: sticky;
    bottom: 0;
    z-index: 2;
    /* Ispod lepljivog reda ostaje 10px paddinga wrappera kroz koji je virio
       sledeći red u skrolu. Senka u boji panela pokriva tu prugu; wrapper je
       `overflow: auto` sa radijusom, pa je i senka zaobljena uz donje uglove. */
    box-shadow: 0 10px 0 var(--card);
  }
}

/* 4c-3. Naslovna: JEDNAK ritam između sekcija (Milan: „na prvoj strani treba
   ujednačiti razmake između sekcija da dišu pravilno").

   Metrika: piksel skener beline (alati/ritam-belina.js, tol=6) — isti GROUND
   TRUTH koji koriste blokovi „RAZMACI NASLOVNA" iz 2026-07-12. Meri se visina
   pruge ravne pozadine između dva iscrtana bloka. DOM rect ovde laže: sekcije
   se dodiruju kutijama (razmak kutija = 0), a stvarni razmak čine padding
   sekcije + Flatsome-ov `col` padding-bottom (30px, nevidljiv) + odstupanje
   line-boxa naslova (do 23px). Zato se knob-ovi NE mogu porediti međusobno.

   PAŽNJA: sekcija sa dva banera nosi full-bleed `::before` traku #F8F3EB
   (linija ~7896). Ona je od krem pozadine udaljena samo 5-11 po kanalu, pa je
   stari skener (tol=14) gutao — i granice 2/3 su ispadale 79/86. Traka je
   vidljiva, pa se broji kao BLOK: razmak do nje meri se do njene IVICE, a
   njen unutrašnji padding (36 gore / 34 dole, Milan 2026-07-15) se NE dira.

   IZMERENO @1920 (krem belina, tol=6) i CILJ 42px na svih šest granica:

     granica                                  pre    posle (cilj)
     hero → „Kupovina po kategorijama"          37        42
     „Kupovina" → USP traka                     58        42
     USP traka → gornja ivica bež trake         43        42
     donja ivica bež trake → „Najtraženije"     54        42
     „Najtraženije" → „Roditelji…"              61        42
     „Roditelji…" → „Brendovi"                  61        42

   Raspon je bio 37-61 (24px), sad je jedan broj. 42 je vrednost iz 4b
   (hero → kartice, sadržaj-do-sadržaja), uzeta kao standard za celu stranu.

   Prvi potez: gasimo Flatsome-ov `col` padding-bottom (30px) na tri sekcije
   koje ga imaju. To je nevidljivih 30px koje razmak drži „iz senke" i zbog
   kojih isti padding sekcije daje različit razmak. Posle toga razmak drži
   ISKLJUČIVO padding sekcije, pa su brojevi u ovom bloku uporedivi.
   Mobilni (≤849px) ima svoj pikselski štimovan ritam i ostaje netaknut. */
@media (min-width: 850px) {
  /* nevidljivih 30px iz Flatsome-a — razmak drži samo padding sekcije */
  .home .section:has(.negic-katgrid) .section-content > .row > .col,
  .home .section:has(.negic-trust-strip) .section-content > .row > .col,
  .home .section.negic-najtrazenije-sec .section-content > .row > .col { padding-bottom: 0 !important; }

  .home .section.negic-hero-sec { padding-bottom: 30px !important; }                                    /* granica 0 */
  .home .section:has(.negic-katgrid) { padding-bottom: 22px !important; }                               /* granica 1 */
  .home .section:has(.negic-trust-strip) { padding-top: 22px !important; padding-bottom: 42px !important; } /* granice 1 i 2 */
  .home .section.negic-najtrazenije-sec { padding-top: 36px !important; padding-bottom: 14px !important; }  /* granice 3 i 4 */
  .home .section.negic-featured-section { padding-top: 14px !important; padding-bottom: 9px !important; }   /* granice 4 i 5 */
  .home .section.negic-last-section { padding-top: 10px !important; }                                   /* granica 5 */
}

/* ---------------------------------------------------------------
   PEGLANJE 2026-07-28 (Zadatak 4f) — top traka + napomena u footeru
   --------------------------------------------------------------- */

/* 4f-1. Top traka: stavke ravnomerno preko cele širine kontejnera.
   Flatsome daje `flex:1` svakoj koloni koja nije .flex-center
   (`.flex-has-center>.flex-row>.flex-col:not(.flex-center)`), pa se sav
   višak širine skupi na kraju desne kolone — telefon je poravnat desno,
   ali ispred njega zjapi praznina, a leve dve stavke deluju zbijeno.
   Mereno na naslovnoj @1920 (kontejner 1230, unutrašnjost 360-1560):

     stavka                              pre            posle
     Besplatna dostava…                  360-646        360-646
     Radnje u Lazarevcu / Online dost.   741-1179       822-1259
     011 8126747                         1436-1560      1436-1560
     razmak 1→2                          95px           177px
     razmak 2→3                          257px          177px

   Kad kolone prestanu da rastu (`flex:0 1 auto`), na red se konačno primeni
   njegov `justify-content:space-between`: prva stavka na levoj ivici, telefon
   na desnoj, trust par ravnomerno između. Selektor nosi #top-bar pa ne dira
   ostale flex redove zaglavlja (.header-main, #wide-nav).
   Samo od 1081px naviše, jer se ispod toga kontejner nije ni menjao; traka je
   ionako skrivena ≤849px (`hide-for-medium`), pa mobilni nema šta da izgubi. */
@media (min-width: 1081px) {
  #top-bar.flex-has-center > .flex-row > .flex-col { flex: 0 1 auto; }
}

/* 4f-2. Napomena o tačnosti podataka ide do desne ivice kontejnera.
   Cap je bio `max-width:720px` (linija ~8097) iz vremena kontejnera 1080.
   Na 1230 se tekst lomio na 720 od 1200px raspoloživih (60%) i visio levo,
   dok kolone footera iznad idu do kraja. Mereno @1920: desna ivica napomene
   1080, desna ivica sadržaja poslednje kolone footera 1560 — 480px razlike.
   Bez cap-a napomena završava na 1560, tačno u liniji sa kolonom iznad.
   Copyright red iznad se ne dira. Ispod 1081px cap ostaje: tamo je kontejner
   nepromenjen, a na mobilnom je kolona ionako uža od 720px pa cap ni ne hvata. */
@media (min-width: 1081px) {
  .absolute-footer .negic-footer-napomena { max-width: none; }
}

/* ---------------------------------------------------------------
   PEGLANJE 2026-07-28 (Zadatak 4g) — top traka: sve 4 stavke ravnomerno
   --------------------------------------------------------------- */

/* 4g-1. Posle 4f su tri kolone trake bile ravnomerno raspoređene, ali srednja
   kolona nosi DVE poruke u jednom <li> (theme mod `nav_position_text`), pa su
   se ponašale kao par: [stavka] 177px [par sa 11px unutra] 176px [telefon].
   functions.php (filter `theme_mod_nav_position_text`, sekcija 4g) sada par
   seče na dva <li> istog ranga. Ovde ide raspodela.

   Zašto ne samo `space-between` sa 4f: nova dva <li> nisu deca .flex-row nego
   srednje kolone, pa ih `space-between` reda ne vidi. Zato srednja kolona
   dobija `flex:1` (pojede svu slobodnu širinu između leve i desne kolone), a
   njen <ul> `space-evenly` — dva elementa u njemu daju TRI jednaka razmaka:
   levo od prvog, između njih, desno od drugog. Pošto je leva kolona prilepljena
   uz levu ivicu kontejnera a desna uz desnu, ta tri razmaka su ujedno i sva tri
   razmaka između četiri stavke. Radi na svakoj širini, bez fiksnih px.

   Nulovanje margina: Flatsome ima `.nav li:first-child{margin-left:0!important}`
   i `.nav li:last-child{margin-right:0!important}`, plus `.nav-divided>li
   {margin:0 .7em}` (9.1px pri 13px fontu). Dok je bio jedan <li>, bio je i prvi
   i poslednji pa je imao margine 0. Posle deljenja unutrašnje ivice dobijaju
   po 9.1px, što srednji razmak nadme za 18px (mereno: 112/130/111). Sa
   nulovanim marginama razmaci su 118/118/117.

   Mereno na naslovnoj (razmaci između okvira stavki):

     širina   pre (4f)            posle (4g)
     1920     177 / 0 / 176       118 / 118 / 117
     1366     177 / 0 / 176       118 / 118 / 117
     1280     177 / 0 / 176       118 / 118 / 117
     1081      52 / 0 / 102        68 /  68 /  68

   Granica 1081px: ispod nje kontejner nije ni menjan u ovom planu, pa raspored
   ostaje kakav je bio — provereno da je na 1080/1024/992/900/850 geometrija
   identična baseline-u (razmaci mastila 11/11/… odnosno 5/5/… na 850-991 gde
   su ikonice zbijene), traka ostaje u jednom redu visine 40px. Na ≤849px je
   traka skrivena (`hide-for-medium`). Nulovanje margina ide van media query-ja
   baš zato da i ispod 1081px dva <li> stoje spojena kao nekada jedan. */
#top-bar .flex-col.flex-center > .nav > li.html { margin-left: 0; margin-right: 0; }
@media (min-width: 1081px) {
  #top-bar.flex-has-center > .flex-row > .flex-col.flex-center { flex: 1 1 auto; }
  #top-bar.flex-has-center > .flex-row > .flex-col.flex-center > .nav { justify-content: space-evenly; }
}

/* ---------------------------------------------------------------
   MOJ NALOG forma sirina (2026-07-29)
   --------------------------------------------------------------- */

/* Prijava na /moj-nalog/ se razvlacila punom sirinom kontejnera.
   Posle prosirenja sajta na 1230px (28.7) polja su na 1366 bila 1200px
   siroka: dva inputa preko cele strane, dugme „Uloguj se" izgubljeno u
   praznini. Mereno na /moj-nalog/ @1366 (neulogovan):

     element                     pre        posle
     .account-container         1200px      460px
     input #username / #password 1200px     460px
     leva praznina do forme        83px      536px (centrirano)

   ZASTO `.account-container`: ta klasa postoji ISKLJUCIVO u Flatsome
   sablonima prijave (woocommerce/myaccount/form-login.php i dva lightbox
   panela). Ulogovan prikaz (dashboard sa levom navigacijom) je nema, pa
   ovo pravilo do njega ne dopire iako body i tada nosi `woocommerce-account`.
   `.page-wrapper` u lancu iskljucuje lightbox prijavu (#login-form-popup je
   van #content) da se popup ne bi sekao na 460px.

   Registracija je lokalno iskljucena (`woocommerce_enable_myaccount_registration`
   = no), pa je u sablonu samo login kolona. Ako se na produkciji ukljuci,
   sablon pravi `#customer_login` sa dve kolone (row-divided) i tada 460px
   nije dovoljno; drugo pravilo tada podize cap na 1000px. `:has()` koji tu
   nije podrzan samo padne, pa ostaje 460px na oba stupca, sto je ruzno ali
   ne razbija stranu. Bez ukljucene registracije to pravilo nema sta da uhvati.

   Samo desktop (>=850px): ispod toga je kolona ionako uza od 460px pa cap
   nikad ne hvata, a mobilni prikaz ostaje netaknut. */
@media (min-width: 850px) {
  .woocommerce-account .page-wrapper .account-container {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
  .woocommerce-account .page-wrapper .account-container:has(#customer_login) {
    max-width: 1000px;
  }
}

/* ---------------------------------------------------------------
   FIBO PANEL na niskim ekranima (2026-07-29)
   --------------------------------------------------------------- */

/* Na laptopu 1366x768 panel predloga je dobijao unutrašnji skrol.
   Blok 4c-2 je stavke uvećao za ~25% (red 64 → 80px), pa 7 predloga + čip
   kategorije + „Prikaži sve rezultate" više ne staju u cap koji je vezan za
   visinu prozora: `min(760px, calc(100vh - 140px))`, na 768px ekranu 628px.

   IZMERENO na naslovnoj, upit „sveska", 1366x768 (7 proizvoda + 1 čip):

     mera                       pre      posle
     sadržaj panela (scrollH)   711px    591px
     vidljivo (clientH)         626px    626px
     višak (unutrašnji skrol)    85px      0px
     red predloga                80px     64px
     sličica predloga            58px     50px
     red „Prikaži sve rezultate" 51px     43px

   Kontrola na 1920x1080: sadržaj 711px, cap 760px, skrola nema ni pre ni
   posle, pa se tamo ništa i ne menja.

   Šta se seče: SAMO vertikalni vazduh i sličica. Fontovi ostaju na
   vrednostima iz 4c-2 (naslov 18px, cena 17,5px), jer je Milanova primedba
   tamo i bila da je tekst previše sitan. Sličica 58 → 50px je i dalje iznad
   pluginove osnovne (46px), pa red ostaje čitljiv: 50px slika + 7px vazduha
   gore i dole. Tekst je jednoredan (23px), pa visinu reda drži sličica.

   Prag `max-height: 800px` hvata 768px laptop i ostavlja 900px+ ekrane
   netaknutim. Uz njega ide i `min-width: 1081px` iz dva razloga: donja
   granica je ista kao u 4c-2 (ispod nje panel nije ni uvećavan), a telefon
   u položenom režimu ima visinu ispod 800px pa bi bez nje mobilni overlay
   (.dgwt-wcas-overlay-mobile deli iste .dgwt-wcas-* klase) upao u ovo
   pravilo. `!important` je nužan jer 4c-2 iste deklaracije nosi sa
   `!important`; ovaj blok je kasniji u fajlu pa pri istoj težini pobeđuje. */
@media (min-width: 1081px) and (max-height: 800px) {
  .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-product { padding: 7px 13px !important; }
  .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-product .dgwt-wcas-si {
    width: 50px !important;
    height: 50px !important;
  }
  .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-more { padding: 12px 14px !important; }
}

/* ---------------------------------------------------------------
   BREND ARHIVE SA OPISOM (2026-08-04)
   /brend/<slug>/ više nije uvek 301 na WOOF: brend koji ima opis terma
   dobija pravu, indeksabilnu stranu (H1 + opis + traka + mreža punom
   širinom). Sve je scope-ovano na body.tax-product_brand da kategorije,
   oznake i prodavnica ostanu netaknute.
   --------------------------------------------------------------- */

/* Opis brenda ima DVA pasusa (kategorije imaju jedan), a globalno pravilo
   `.term-description p { margin: 0 }` bi ih slepilo u jedan blok teksta.
   Razmak dajemo samo između susednih pasusa, poslednji ostaje bez repa. */
.tax-product_brand .term-description p + p { margin-top: .75em; }

/* Mobilni (Milan 2026-08-04: telefon je prioritet). Bez ovoga je prvi red
   proizvoda počinjao na 732px od vrha (prodavnica 396, kategorija 568), pa
   se na ekranu od 844px vidi samo ivica prve slike. Blago manji tekst,
   zbijeniji prored i kraći repovi vraćaju mrežu ~55px više. Mreža ostaje
   ista kao na /prodavnica/ (small-columns-2, kartica 190px) — tu se ništa
   ne dira. */
@media (max-width: 549px) {
  .tax-product_brand .term-description {
    font-size: 14.5px;
    line-height: 1.55;
    margin-bottom: 18px;
  }
  .tax-product_brand .negic-cat-title { margin-bottom: 10px; }
  /* Traka se na uskom ekranu lomi u dva reda (tekst pa CTA). Difoltnih
     12px 14px + gap 10px ju je diglo na 101px; ovako staje u ~78px, a CTA
     ostaje puna dodirna meta (bez sudara sa sort dropdown-om, koji je na
     ovoj temi ionako IZNAD naslova, kao na prodavnici i kategorijama). */
  .tax-product_brand .negic-brend-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 11px 13px;
    margin: 2px 0 16px;
    font-size: 13.5px;
    line-height: 1.45;
  }
}