/* VELURA — osnova */

/* Roboto s našeg poslužitelja (licenca Apache 2.0): bez zahtjeva prema
   Googleu i bez treptaja fonta. Jedna varijabilna datoteka nosi sve debljine. */
@font-face{font-family:Roboto;font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/fonts/roboto-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Roboto;font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/fonts/roboto-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* =========================================================================
   VELURA — stil trgovine
   Mjere su prepisane iz referenca/notino-mjere.md (čitano na živoj stranici).
   Raspored: gornja traka 60 · crni blok 108 (logotip 64 + izbornik 44)
   Omoti: naslovnica 1250 · popis 1320 (285 filtri + 1035 mreža) · tekst 1035
   Kartica 240,75 × auto, ploha slike oko 200, razmak 24.
   Tekst 16px, line-height normal — pojedini redci sami traže svojih 20px.
   ========================================================================= */
:root{
  /* Zlato. Tamno zlato nosi tekst i ikone na bijelom (5,4:1), svijetlo je
     ploha pod crnim tekstom (8,8:1) i tekst na crnom; sjaj je za gumbe i
     oznake — uvijek s crnim natpisom, jer bijeli na zlatu ne prolazi. */
  --zlato:#8a6414;
  --zlato-tamno:#6e5010;
  --zlato-svijetlo:#c9a24a;
  --zlato-sjaj:#c9a24a;          /* puna boja: bez prelijevanja */
  --zlato-sjaj-jace:#b8913d;
  --zlato-blijedo:#f8f1e1;
  --zlato-rub:#e6d4a8;
  --crna:#000;
  --tamna:#303030;
  --tekst:#474747;
  --siva:#6b6b6b;
  --svijetla:#ababab;
  --rub:#e1e1e1;
  --rub-polja:#e6e6e6;
  --podloga:#f5f5f5;
  --bijela:#fff;
  --zelena:#187c18;   /* „Dostupno“ */
  --omot:1250px;      /* sekcije naslovnice, izmjereno na notino.hr */
  --omot-popis:1320px; /* popis: 285 filtri + 1035 mreža */
  --sab:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:#000;
  font-family:Roboto,"Helvetica Neue",Arial,Helvetica,sans-serif;
  font-size:16px;line-height:normal;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:500;color:#000}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
input,select,textarea{font:inherit;color:#000}
s{color:var(--siva)}
.omot{width:min(var(--omot), 100% - 32px);margin-inline:auto}
.omot-siroki{width:min(var(--omot-popis), 100% - 32px);margin-inline:auto}
.omot-puni{width:100%;padding:0 30px}
.omot-uski{width:min(1035px, 100% - 32px);margin-inline:auto}
.sredina{text-align:center}
.skriveno{display:none !important}
.preskoci{position:absolute;left:-9999px;top:0;background:var(--zlato);color:#fff;padding:12px 16px;z-index:300}
.preskoci:focus{left:8px;top:8px}
.ikona{flex:none}

/* --------------------------------- gumbi --------------------------------- */
.gumb{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 24px;
  border:1px solid transparent;border-radius:2px;font-size:14px;font-weight:500;line-height:20px;text-align:center;
  transition:background .15s,color .15s,border-color .15s}
.gumb.crni{background:#000;color:#fff}
.gumb.crni:hover{background:var(--tamna)}
.gumb.zlatni{background:var(--zlato-sjaj);color:#111}
.gumb.zlatni:hover{background:var(--zlato-sjaj-jace)}
.gumb.bijeli{background:#fff;color:#000}
.gumb.bijeli:hover{background:#efefef}
/* Okvirni gumb je „Prikaži više“: bijela ploha, tanak svijetli rub, crn natpis. */
.gumb.okvir{background:#fff;border-color:var(--svijetla);color:#000}
.gumb.okvir:hover{background:#fafafa;border-color:#000}
.gumb.sirok{width:100%}

/* --------------------------------- oznake -------------------------------- */
.oz{display:inline-block;padding:4px 8px;font-size:12px;font-weight:500;line-height:16px;color:#111;
  background:var(--zlato-sjaj);white-space:nowrap}
.oz-siva{background:#efefef;color:#000}
.oz-crna{background:#000;color:#fff}

/* VELURA — zaglavlje */

/* ------------------------------ gornja traka ----------------------------- */
.traka-gore{border-bottom:1px solid var(--rub);background:#fff}
.traka-gore-red{display:flex;align-items:center;gap:28px;height:60px}
.tg-box,.tg-stavka{display:flex;align-items:center;gap:12px;color:#000}
.tg-box-znak{display:grid;place-items:center;width:64px;height:40px;background:#000;color:#fff;
  font-size:9px;line-height:10px;letter-spacing:.4px;text-transform:lowercase;text-align:center;
  transform:skewX(-12deg);font-weight:500}
.tg-box-znak br{line-height:0}
.tg-krug{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--zlato-sjaj);color:#111}
.tg-tekst{display:flex;flex-direction:column}
.tg-tekst b{font-size:14px;font-weight:500;line-height:18px}
.tg-tekst span{font-size:14px;color:var(--siva);line-height:18px}
.tg-desno{margin-left:auto;display:flex;align-items:center;gap:26px}
.tg-veza{font-size:14px;color:#000}
.tg-veza:hover,.tg-box:hover .tg-tekst b,.tg-stavka:hover .tg-tekst b{text-decoration:underline}

/* -------------------------------- zaglavlje ------------------------------ */
/* Crni blok je ukupno 108px: red s logotipom 64 + red s izbornikom 44. */
.zaglavlje{position:sticky;top:0;z-index:120;background:#000;color:#fff}
.zaglavlje-red{display:flex;align-items:center;gap:16px;height:64px}
/* Logotip izlazi na ≈122 × 44 px (28px × 6 slova + 3px razmaka slova). */
.logo{display:flex;align-items:center;height:44px;font-size:28px;font-weight:700;
  letter-spacing:3px;line-height:44px;color:#fff;flex:none}
.z-hamburger{display:none;color:#fff;padding:6px;margin-left:-6px}
/* Tražilica: 32px visoka, bijela, tanki rub; desnih 32px drži povećalo. */
.trazilica{position:relative;flex:1;display:flex;align-items:center;background:#fff;height:32px;
  border:1px solid var(--rub-polja);border-radius:2px}
.trazilica input{flex:1;height:100%;max-height:100%;border:0;outline:none;padding:0 32px 0 16px;
  font-size:14px;background:transparent;border-radius:2px}
.trazilica input::placeholder{color:var(--siva)}
.trazilica button{position:absolute;right:0;top:0;bottom:0;display:grid;place-items:center;width:32px;color:#000}
.z-alati{display:flex;align-items:center;gap:22px;flex:none;margin-left:8px}
.z-alat{position:relative;display:flex;align-items:center;gap:8px;color:#fff;padding:6px 0}
.z-alat:hover{opacity:.8}
.z-alat-ime{display:none;font-size:16px}
.z-kosarica .z-alat-ime{display:inline}
.z-broj{position:absolute;top:0;right:-8px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--zlato-svijetlo);color:#000;font-size:11px;line-height:17px;text-align:center;font-weight:700}

/* ------------------------------- navigacija ------------------------------ */
/* Red izbornika je 44px; stavka je široka koliko tekst + 16px sa svake strane.
   Crta iznad ide kao unutarnja sjena da crni blok ostane točno 108px. */
.nav{background:#000;box-shadow:inset 0 1px 0 #1c1c1c}
/* kao kod njih: stavke se razmaknu preko cijele širine reda */
.nav-popis{display:flex;align-items:center;justify-content:space-between;gap:0;height:44px}
.nav-stavka{position:static}
.nav-veza{display:flex;align-items:center;height:44px;padding:0 16px;color:#fff;font-size:14px;white-space:nowrap}
.nav-stavka:hover>.nav-veza,.nav-veza.je-aktivna{background:var(--tamna)}
/* Akcije su zlatna pločica i šire su od ostalih stavki. */
.nav-akcije{background:var(--zlato-sjaj);color:#111;font-weight:700;padding:0 24px}
.nav-stavka:hover>.nav-akcije{background:var(--zlato-sjaj-jace);color:#000}

/* ------------------------------ mega izbornik ---------------------------- */
.mega{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;color:#000;
  box-shadow:0 12px 24px rgba(0,0,0,.14);border-top:1px solid var(--rub);z-index:130}
.nav-stavka:hover .mega{display:block}
/* Ploča ide preko cijele širine, a sadržaj drži 30px sa strane kao .omot-puni. */
.mega-red{position:relative;display:flex;gap:26px;padding:30px 30px 42px}
.mega-stupac{flex:1 1 0;min-width:0;max-width:280px}
.mega-grupa+.mega-grupa{margin-top:26px}
.mega-naslov{font-size:16px;font-weight:700;line-height:20px;margin-bottom:12px}
.mega-grupa li{margin-bottom:9px}
.mega-grupa a{font-size:14px;font-weight:400;line-height:20px;color:var(--tekst)}
.mega-grupa a:hover{text-decoration:underline}
.mega-x{position:absolute;top:18px;right:30px;color:#000;padding:4px}
/* desni stupac sa stvarnim fotografijama proizvoda */
.mega-proizvodi{flex:0 0 440px;margin-left:auto;padding:0 44px 0 26px;border-left:1px solid var(--rub)}
.mega-promo{position:relative;display:block;aspect-ratio:16/8;overflow:hidden;margin-bottom:22px;background:#f2ede3}
.mega-promo .slog{height:100%;padding:18px 8% 30px}
.mega-promo:hover .slog-k img{transform:translateY(-2px)}
.mega-promo span{position:absolute;left:0;bottom:0;padding:9px 14px;background:#fff;color:#000;font-size:14px;font-weight:700}
.mega-police{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mega-proizvod{display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:17px;color:#000}
.mp-slika{display:grid;place-items:center;aspect-ratio:1;background:#f6f6f6;margin-bottom:8px;overflow:hidden}
.mp-slika img{width:82%;height:82%;object-fit:contain;mix-blend-mode:multiply;transition:transform .25s}
.mega-proizvod:hover .mp-slika img{transform:scale(1.05)}
.mega-proizvod b{font-weight:700}
.mp-ime{color:var(--tekst);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-cijena{font-weight:700;margin-top:2px}
.mp-cijena s{font-weight:400;color:var(--siva);margin-right:4px}
.mega-sve{display:inline-block;margin-top:18px;font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
@media (max-width:1280px){ .mega-proizvodi{flex-basis:340px;padding-right:40px} .mega-police{grid-template-columns:repeat(2,minmax(0,1fr))} .mega-proizvod:nth-child(3){display:none} }
.mega-x:hover{color:var(--siva)}
.zastor{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:110}

/* -------------------------------- mrvice --------------------------------- */
.mrvice{padding:14px 0 6px;font-size:13px;color:var(--siva)}
.mrvice .omot-siroki{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mrvice a:hover{text-decoration:underline}
.mrvica-znak{display:grid;place-items:center;width:20px;height:20px;background:#000;color:#fff;font-size:12px;font-weight:700;border-radius:50%}
.mrvica-crta{color:var(--svijetla)}

/* VELURA — naslovnica */

/* Naslovnica ide u omot od 1250px (izmjereno na notino.hr). Police i traka
   marki dolaze iz lib/komponente.js s razredom .omot-siroki, pa im širinu
   sužavamo ovdje umjesto da diramo zajedničku komponentu. */
.str-naslovnica .polica>.omot-siroki,
.str-naslovnica .marke-traka>.omot-siroki{width:min(var(--omot), 100% - 32px)}

/* ------------------------------- naslovnica ------------------------------ */
.hero{position:relative;overflow:hidden}
.hero-traka{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.hero-plocica{flex:0 0 100%}
.baner{position:relative;display:flex;align-items:center;justify-content:center;gap:100px;
  min-height:360px;padding:40px 24px;background:linear-gradient(110deg,var(--b1),var(--b2));overflow:hidden}
.baner-tekst{max-width:520px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;color:#000}
.baner-oznaka{position:absolute;top:36px;right:22%;display:grid;place-items:center;width:150px;height:150px;
  border-radius:50%;background:#b9cbe8;color:#0c2a4a;font-size:22px;line-height:24px;text-align:center;font-weight:500}
.baner-tekst strong{font-size:64px;line-height:64px;font-weight:500;letter-spacing:-1px}
.baner-pod{font-size:22px;line-height:30px}
.baner-tekst .gumb{margin-top:10px;min-width:180px}
/* Kampanjska slika: prave fotografije proizvoda na obojanoj plohi.
   `multiply` utopi bijelu pozadinu fotografije u podlogu banera, pa izgleda
   kao da je proizvod fotografiran na toj boji. */
.baner-boce{display:flex;align-items:flex-end;justify-content:center;gap:26px;flex:none}
.baner-boce img{height:240px;width:auto;filter:drop-shadow(0 18px 24px rgba(0,0,0,.18))}
.baner-boce .bn-foto{mix-blend-mode:multiply;filter:none;object-fit:contain}
.baner-boce .bn-0{height:215px}
.baner-boce .bn-1{height:255px;margin-bottom:-6px}
.baner-boce .bn-2{height:200px}
.baner-boce{gap:18px}
.hero-tocke{display:flex;justify-content:center;gap:12px;padding:18px 0}
.hero-tocke button{width:52px;height:4px;background:var(--rub)}
.hero-tocke button[aria-current="true"]{background:var(--svijetla)}
.hero-strelica{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;
  background:rgba(255,255,255,.7);border-radius:50%;color:#000}
.hero-strelica:hover{background:#fff}
.hero-strelica.lijevo{left:18px}.hero-strelica.desno{right:18px}

.marke-traka{padding:34px 0}
.marke-traka h2{font-size:24px;line-height:32px;font-weight:500;margin-bottom:22px}
.marke-mreza{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.marka-plocica{display:grid;place-items:center;height:118px;background:var(--podloga);padding:12px;text-align:center}
.marka-plocica span{font-size:24px;font-weight:700;letter-spacing:1px;color:#111;
  text-transform:uppercase;line-height:26px}
.marka-plocica:hover{background:#ededed}

.plocice-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:8px 0 26px}
.plocica-velika{position:relative;display:flex;align-items:center;min-height:250px;padding:30px 34px;overflow:hidden;
  background:linear-gradient(115deg,var(--b1),var(--b2));color:var(--pt,#000)}
.plocica-velika .pv-tekst{max-width:60%;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.plocica-velika strong{font-size:26px;line-height:32px;font-weight:500}
.plocica-velika p{font-size:16px;line-height:22px}
.plocica-velika img{position:absolute;right:18px;bottom:0;height:86%;width:auto}

.krugovi{display:flex;gap:26px;overflow:auto;padding:26px 0;scrollbar-width:none}
.krugovi::-webkit-scrollbar{display:none}
.krug{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none;width:112px;text-align:center}
.krug span.krug-slika{width:92px;height:92px;flex:none;border-radius:50%;background:var(--podloga);display:grid;place-items:center;overflow:hidden}
.krug img{width:92px;height:92px;object-fit:cover}
.krug.akcija span.krug-slika{background:var(--zlato-sjaj);color:#111}
.krug b{font-size:14px;font-weight:400;line-height:18px}
.krug.akcija b{letter-spacing:.5px}
.krug:hover b{text-decoration:underline}

/* --------------------------- police / karuseli --------------------------- */
.polica{padding:26px 0}
.polica.siva{background:var(--podloga);padding:34px 0 40px;margin:26px 0}
.polica-vrh{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.polica-vrh .nad{font-size:16px;font-weight:400;line-height:20px;color:var(--tekst);margin-bottom:2px}
.polica-vrh h2{font-size:24px;line-height:32px;font-weight:500}
.polica-vrh .vise{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:500;white-space:nowrap}
.polica-vrh .vise .ikona{width:14px;height:14px}
.polica-vrh .vise:hover{text-decoration:underline}
.traka{position:relative}
.traka-klizac{display:flex;gap:24px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px}
.traka-klizac::-webkit-scrollbar{display:none}
.traka-klizac>*{flex:0 0 240.75px}
.traka-gumb{position:absolute;top:120px;width:44px;height:44px;border-radius:50%;background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.22);display:grid;place-items:center;z-index:5}
.traka-gumb.lijevo{left:-16px}.traka-gumb.desno{right:-16px}
.traka-gumb:hover{background:var(--podloga)}

/* ------------------------------ usluge / blok ---------------------------- */
.usluge{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:14px 0 30px}
.usluga{background:var(--podloga);padding:24px}
.usluga h3{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:700;margin-bottom:10px}
.usluga p{font-size:15px;line-height:22px;color:var(--tekst);margin-bottom:14px}
.usluga a{font-size:15px;font-weight:500;text-decoration:underline}
.vodic{background:var(--podloga);padding:30px 0 34px;margin:26px 0}
.vodic-mreza{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.vodic-kartica{background:#fff;display:flex;flex-direction:column}
.vodic-slika{height:150px;background:var(--zlato-blijedo);display:grid;place-items:center}
.vodic-kartica .telo{padding:18px;display:flex;flex-direction:column;gap:14px;flex:1;align-items:flex-start}
.vodic-kartica p{font-size:17px;line-height:23px;flex:1}
.blog-mreza{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.clanak-kartica{background:#fff;border:1px solid var(--rub);display:flex;flex-direction:column}
.clanak-slika{height:170px;background:#f1e8d8;overflow:hidden}
.clanak-slika img{width:100%;height:100%;object-fit:cover}
.clanak-kartica .telo{padding:18px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;flex:1}
.clanak-kartica h3{font-size:18px;line-height:24px;font-weight:700}
.clanak-kartica .min{font-size:14px;color:var(--siva);flex:1}
.seo-mreza{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:10px 0 34px}
.seo-kartica{border:1px solid var(--rub);padding:20px;text-align:center}
.seo-kartica h3{font-size:19px;margin-bottom:12px}
.seo-kartica div{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center}
.seo-kartica a{font-size:15px;color:var(--tekst)}
.seo-kartica a:hover{text-decoration:underline}
.sminka-mreza{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.sminka-kartica{position:relative;height:330px;background:linear-gradient(160deg,#d9c3b0,#8c6a58);color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;padding:16px;overflow:hidden}
.sminka-kartica .oz{position:absolute;top:14px;left:14px}
.sminka-kartica b{font-size:17px;margin-bottom:12px}
.video-mreza{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.video-kartica{position:relative;height:420px;background:#111;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:18px}
.video-kartica .vk-dno{display:flex;justify-content:space-between;font-size:13px;color:#d0d0d0;margin-top:10px}
.video-kartica b{font-size:19px}
.video-kartica::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#5a5a60 0%,#2a2a2e 55%,#000 100%);opacity:.9}
.video-kartica>*{position:relative}

/* --------------------- prave fotografije u kreativnim plohama -------------- */
/* Velika pločica: proizvod desno, bijela pozadina fotografije se utopi. */
.plocica-velika .pv-foto{position:absolute;right:24px;bottom:0;height:88%;width:auto;object-fit:contain;
  mix-blend-mode:multiply}
.plocica-velika .pv-foto.na-tamnom{mix-blend-mode:normal;background:#fff;padding:14px;bottom:24px;
  height:76%;box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* Kartica virtualne šminke: fotografija kao pozadina, preko nje zatamnjenje. */
.sminka-kartica{isolation:isolate}
.sminka-kartica .sm-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  mix-blend-mode:multiply;opacity:.92;z-index:0}
.sminka-kartica::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.55) 100%)}
.sminka-kartica>*{position:relative;z-index:2}

/* Video pločica: fotografija proizvoda u tamnoj plohi. */
.video-kartica .vk-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;z-index:0}

/* ------------------- kampanjska fotografija u baneru ---------------------- */
/* Slika pokriva cijelu plohu, tekst stoji preko nje na mekom zastoru s lijeve
   strane (isto kao na velikim trgovinama). */
.baner.je-foto{padding:0;min-height:420px;isolation:isolate}
.baner.je-foto.tekst-desno{justify-content:flex-end}
.baner.je-foto.tekst-lijevo{justify-content:flex-start}
.baner-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%;z-index:0}
.baner.je-foto::after{content:"";position:absolute;inset:0;z-index:1;
  /* Blaga koprena na strani na kojoj stoji tekst. */
  background:linear-gradient(270deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.42) 30%,rgba(255,255,255,0) 56%)}
.baner.je-foto.tekst-lijevo::after{
  background:linear-gradient(90deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.42) 30%,rgba(255,255,255,0) 56%)}
.baner.je-foto .baner-tekst{position:relative;z-index:2;padding:40px 0;max-width:460px}
.baner.je-foto.tekst-desno .baner-tekst{margin-right:max(24px,calc((100% - var(--omot)) / 2))}
.baner.je-foto.tekst-lijevo .baner-tekst{margin-left:max(24px,calc((100% - var(--omot)) / 2))}
.baner.je-foto .baner-oznaka{display:none}

/* ---------------- kampanjske fotografije u ostalim plohama ---------------- */
.plocica-velika.je-foto{isolation:isolate}
.plocica-velika .pv-kampanja{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.plocica-velika.je-foto::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.72) 45%,rgba(255,255,255,0) 78%)}
.plocica-velika.je-foto .pv-tekst{position:relative;z-index:2;color:#000}
.plocica-velika.je-foto .gumb.bijeli{background:#000;color:#fff}

.sminka-kartica .sm-foto.je-portret{mix-blend-mode:normal;opacity:1}
.video-kartica{isolation:isolate}
.video-kartica .vk-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.85}
.video-kartica::before{z-index:1}
.vodic-slika{overflow:hidden}
.vodic-slika img{width:100%;height:100%;object-fit:cover}
.video-kartica>*{position:relative;z-index:2}
/* kad ima fotografije, gradijent je samo zatamnjenje pri dnu */
.video-kartica:has(.vk-foto)::before{background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.85) 100%);opacity:1}

/* -------------------------------- ponuda dana ----------------------------- */
.ponuda-dana{padding:26px 0}
.pd-kutija{display:grid;grid-template-columns:280px 1fr;gap:34px;align-items:center;
  padding:28px 32px;border-radius:8px;background:#f8f1e1}
.pd-slika{display:grid;place-items:center;background:#fff;border-radius:10px;padding:16px}
.pd-slika img{width:100%;height:auto;max-height:280px;object-fit:contain;mix-blend-mode:multiply}
.pd-znak{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:14px;
  background:#000;color:var(--zlato-svijetlo);font-size:13px;font-weight:500}
.pd-tekst h2{margin:12px 0 2px;font-size:28px;font-weight:400;line-height:34px}
.pd-tekst h2 a{color:var(--tekst)}
.pd-vrsta{font-size:14px;color:var(--siva)}
.pd-cijene{display:flex;align-items:baseline;gap:12px;margin:14px 0 8px}
.pd-cijene s{color:var(--siva);font-size:16px}
.pd-cijene b{font-size:34px;font-weight:700}
.pd-popust{padding:3px 9px;border-radius:4px;background:var(--zlato-sjaj);color:#111;font-size:14px;font-weight:500}
.pd-odbroj{font-size:15px;color:var(--siva);margin-bottom:16px}
.pd-odbroj b{font-variant-numeric:tabular-nums;font-size:19px;font-weight:600;color:var(--tekst)}
.pd-kupi .gumb{max-width:260px}

@media (max-width:820px){
  .pd-kutija{grid-template-columns:1fr;gap:18px;padding:20px}
  .pd-slika img{max-height:200px}
  .pd-tekst h2{font-size:22px;line-height:28px}
  .pd-cijene b{font-size:28px}
  .pd-kupi .gumb{max-width:none}
}

/* Redoslijed dijelova naslovnice: --red za stolno, --red-mob za mobitel (Notino
   velike pločice na mobitelu gura iza akcijske ponude). */
.pocetna{display:flex;flex-direction:column}
.hp{order:var(--red)}

/* Parfemium — kartica proizvoda, ista kao u aplikaciji (KarticaProizvoda,
   lib/widgeti.dart; mjere u dp = px): ploha slike 212 (slika 143, 30 gore),
   oznake 22,5, marka 16 siva, naziv 16/500, vrsta 14, zvjezdice 15,
   cijena 16/700, isprekidana crta i popust kategorije 14. */
.kartica{position:relative;display:flex;flex-direction:column;background:#fff;padding:0 8px 12px}
.k-slika{position:relative;height:212px}
.k-slika a{display:block;padding-top:30px}
.k-slika img{width:100%;height:143px;object-fit:contain}
.k-srce{position:absolute;top:-2px;right:-2px;width:40px;height:40px;display:grid;place-items:center;color:#000;z-index:1}
.k-oznake{display:flex;flex-wrap:wrap;gap:4.6px 4.2px;margin:0 0 16.4px}
.k-oznake .oz,.oz{display:inline-flex;align-items:center;height:22.5px;padding:0 8px;font-size:12.3px;font-weight:500;line-height:1;border-radius:.8px}
.k-marka,.k-ime,.k-vrsta{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.k-marka{font-size:16px;line-height:18.7px;color:#474747}
.k-ime{margin-top:.4px;font-size:16px;font-weight:500;line-height:18.7px;color:#000}
.k-vrsta{margin-top:4.2px;font-size:14px;line-height:16.4px;color:#000}
.kartica .ocjena{margin-top:7.6px}
.k-cijena{margin-top:9.9px;font-size:16px;font-weight:700;line-height:18.7px;color:#000}
.k-cijena.k-nema{font-size:14px;font-weight:400;color:var(--zlato)}
.k-sponzor{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;line-height:14px;color:#474747}
.k-sponzor svg{color:#474747}
.k-crtice{margin-top:12px;height:1px;background:repeating-linear-gradient(90deg,#bdbdbd 0 5px,transparent 5px 9px)}
.k-promo{margin-top:8px;font-size:14px;line-height:1.35;color:#474747}
.k-promo b{font-weight:700;color:#000}
@media (hover:hover){.k-marka:hover,.k-ime:hover{text-decoration:underline}}

/* -------- zvjezdice: isti znak kao u aplikaciji (Material Symbols star, zaobljen) --------
   pune crne, prazne #ababab, polovica; znak je 118 % kutije (kao Ikona u Zvjezdice) */
.ocjena{display:flex;align-items:center;height:15px;font-size:12px;line-height:14px;color:#000}
.ocjena b{font-weight:400;color:#000;font-size:12px;margin-left:2.8px}
.ocjena i{font-style:normal;color:#6b6b6b;font-size:12px;margin-left:2px}
.zvj{flex:0 0 15px;width:15px;height:15px;margin-right:1.2px;background:#ababab;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.85 16.82 12 14.92 15.15 16.85 14.33 13.25 17.1 10.85 13.45 10.52 12 7.12 10.55 10.5 6.9 10.82 9.68 13.25ZM12 17.27 7.85 19.77Q7.58 19.95 7.28 19.92Q6.98 19.9 6.75 19.73Q6.53 19.55 6.4 19.29Q6.28 19.02 6.35 18.7L7.45 13.97L3.78 10.8Q3.53 10.57 3.46 10.29Q3.4 10 3.5 9.72Q3.6 9.45 3.8 9.27Q4 9.1 4.35 9.05L9.2 8.62L11.08 4.17Q11.2 3.88 11.46 3.72Q11.73 3.57 12 3.57Q12.28 3.57 12.54 3.72Q12.8 3.88 12.93 4.17L14.8 8.62L19.65 9.05Q20 9.1 20.2 9.27Q20.4 9.45 20.5 9.72Q20.6 10 20.54 10.29Q20.48 10.57 20.23 10.8L16.55 13.97L17.65 18.7Q17.73 19.02 17.6 19.29Q17.48 19.55 17.25 19.73Q17.03 19.9 16.73 19.92Q16.43 19.95 16.15 19.77ZM8.85 16.82 9.68 13.25 6.9 10.82 10.55 10.5 12 7.12 13.45 10.52 17.1 10.85 14.33 13.25 15.15 16.85 12 14.92Z'/%3E%3C/svg%3E") center/118% 118% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.85 16.82 12 14.92 15.15 16.85 14.33 13.25 17.1 10.85 13.45 10.52 12 7.12 10.55 10.5 6.9 10.82 9.68 13.25ZM12 17.27 7.85 19.77Q7.58 19.95 7.28 19.92Q6.98 19.9 6.75 19.73Q6.53 19.55 6.4 19.29Q6.28 19.02 6.35 18.7L7.45 13.97L3.78 10.8Q3.53 10.57 3.46 10.29Q3.4 10 3.5 9.72Q3.6 9.45 3.8 9.27Q4 9.1 4.35 9.05L9.2 8.62L11.08 4.17Q11.2 3.88 11.46 3.72Q11.73 3.57 12 3.57Q12.28 3.57 12.54 3.72Q12.8 3.88 12.93 4.17L14.8 8.62L19.65 9.05Q20 9.1 20.2 9.27Q20.4 9.45 20.5 9.72Q20.6 10 20.54 10.29Q20.48 10.57 20.23 10.8L16.55 13.97L17.65 18.7Q17.73 19.02 17.6 19.29Q17.48 19.55 17.25 19.73Q17.03 19.9 16.73 19.92Q16.43 19.95 16.15 19.77ZM8.85 16.82 9.68 13.25 6.9 10.82 10.55 10.5 12 7.12 13.45 10.52 17.1 10.85 14.33 13.25 15.15 16.85 12 14.92Z'/%3E%3C/svg%3E") center/118% 118% no-repeat}
.zvj.puna{background:#000}
.zvj.pola{background:linear-gradient(90deg,#000 50%,#ababab 50%)}
.ocjena.velika{height:auto}
.ocjena.velika .zvj{flex-basis:15.3px;width:15.3px;height:15.3px}
.ocjena.velika b{font-size:14px}
.ocjena.velika i{font-size:14px}

/* brzi pregled samo mišem (na mobitelu ga nema, kao ni u aplikaciji) */
.k-brzo{display:none}
@media (hover:hover) and (min-width:761px){.k-brzo{display:block}}

/* ---------------- računalo: kartica kao na notino.hr (stare mjere) ----------------
   ploha slike 200, oznake 24, marka/naziv 16/20, vrsta 14/20, "od" 14/700,
   cijena 16/700 24 px ispod, redak s kodom 20 px ispod; zvjezdice 13 */
@media (min-width:761px){
  .kartica{padding:0 0 12px}
  .k-slika{height:auto}
  .k-slika a{padding-top:0}
  .k-slika img{height:200px;padding:8px 0}
  .k-srce{top:4px;right:4px;width:34px;height:34px}
  .k-oznake{margin:2px 0 8px;min-height:24px;gap:4px}
  .k-oznake .oz{height:24px;padding:4px 8px;font-size:12px;line-height:16px}
  .k-marka{line-height:20px;margin-bottom:2px}
  .k-ime{line-height:20px;margin:0 0 4px}
  .k-vrsta{line-height:20px;margin:0 0 8px}
  .kartica .ocjena{margin-top:0;height:16px}
  .zvj{flex-basis:13px;width:13px;height:13px}
  .k-cijena{margin-top:24px;line-height:20px}
  .k-cijena .c-od{font-size:14px;font-weight:700}
  .k-kod{margin-top:20px;font-size:14px;line-height:20px;color:#000}
  .k-kod b{font-weight:500}
  .k-sponzor{margin-top:8px}
}
@media (max-width:760px){.k-cijena .c-od{display:none}}

/* VELURA — popis */

/* ------------------------------ popis / filtri ---------------------------
   Izmjereno na notino.hr: omot 1320 = lijevi stupac 285 + mreža 1035,
   razmak između stupaca 0 (mreža počinje točno na 337px pri prozoru 1425). */
.popis-sloj{display:flex;gap:0;align-items:flex-start;padding-bottom:40px}
.filtri{flex:0 0 285px;position:sticky;top:120px;padding-right:20px}
.filtar{border-bottom:1px solid var(--rub);padding:18px 0}
.filtar>summary{display:flex;align-items:center;justify-content:space-between;font-size:17px;font-weight:700;cursor:pointer;list-style:none}
.filtar>summary::-webkit-details-marker{display:none}
.filtar>summary::after{content:"";width:10px;height:10px;border-right:2px solid #000;border-bottom:2px solid #000;
  transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.filtar[open]>summary::after{transform:rotate(-135deg) translateY(-3px)}
.filtar-telo{padding-top:16px;max-height:324px;overflow:auto}
/* Red kvačice je visok 36px (8 + 20 + 8); dvoredna oznaka naraste na ~56px. */
.kvacica{display:flex;align-items:flex-start;gap:10px;padding:8px 0;font-size:14px;font-weight:400;color:var(--tekst);cursor:pointer}
.kvacica i{flex:none;width:18px;height:18px;border:1px solid var(--svijetla);background:#fff;margin-top:1px}
.kvacica.je-odabrana i{background:#000;border-color:#000;
  background-image: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'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");background-size:14px;background-position:center;background-repeat:no-repeat}
.kvacica span{flex:1;line-height:20px}
.kvacica b{color:var(--siva);font-weight:400;font-size:14px}
/* Polja cijene: font 16px, line-height 32px, znak „€“ stoji iza polja. */
.cijena-polja{display:flex;align-items:center;gap:8px;margin-bottom:18px;font-size:16px;line-height:32px}
.cijena-polja input{width:100%;height:34px;line-height:32px;border:1px solid var(--rub-polja);padding:0 10px;text-align:right;font-size:16px}
.cijena-kutija{position:relative;flex:1;display:flex;align-items:center}
.cijena-kutija input{padding-right:26px}
.cijena-kutija span{position:absolute;right:10px;pointer-events:none}
.cijena-kutija input::-webkit-inner-spin-button,.cijena-kutija input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cijena-kutija input{-moz-appearance:textfield}
.klizac{position:relative;height:24px}
.klizac input[type=range]{position:absolute;left:0;right:0;width:100%;height:24px;-webkit-appearance:none;background:none;pointer-events:none;margin:0}
.klizac input[type=range]::-webkit-slider-runnable-track{height:2px;background:#000}
.klizac input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#000;margin-top:-8px;pointer-events:all}
.popis-glava{padding:8px 0 18px}
.popis-glava h1{font-size:32px;line-height:36px;font-weight:500;margin-bottom:6px}
/* Alati stoje u desnom stupcu, dakle poravnati s mrežom, a ne s filtrima. */
.popis-alati{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0 18px}
.sort{position:relative}
.sort-gumb{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:400}
.sort-popis{position:absolute;top:100%;left:0;min-width:240px;background:#fff;border:1px solid var(--rub);
  box-shadow:0 8px 20px rgba(0,0,0,.12);z-index:30;padding:6px 0}
.sort-popis a{display:block;padding:10px 16px;font-size:15px}
.sort-popis a:hover{background:var(--podloga)}
.mreza{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.mreza .kartica{min-width:0}
/* Straničenje: 12px/400, razmak 0 3px, uvijek uz desni rub. */
.stranicenje{display:flex;align-items:center;justify-content:flex-end;gap:0;margin-left:auto;
  font-size:12px;font-weight:400;line-height:20px;color:var(--tekst)}
.stranicenje a,.stranicenje span{min-width:0;height:24px;display:inline-flex;align-items:center;padding:0 3px}
.stranicenje a:hover{text-decoration:underline}
.stranicenje .je-tu{font-weight:700;color:#000}
.stranicenje .zadnja{text-decoration:underline;color:var(--siva)}
.praznо,.prazno{padding:60px 0;text-align:center;color:var(--siva)}
.odabrani-filtri{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:14px}
.cip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:var(--podloga);font-size:14px}
.cip svg{width:14px;height:14px}

/* --------------------------- stablo kategorija ---------------------------
   Naslov 14/500 crn, stavke 14/400 sekundarne; red je visok 36px, uvučen 12px. */
.kat-stablo{padding:4px 0 12px;border-bottom:1px solid var(--rub)}
.kat-stablo-vrh a{display:block;font-size:14px;font-weight:500;line-height:36px;color:#000}
.kat-stablo ul{margin-top:0}
.kat-stablo li{margin-bottom:0}
.kat-stablo a{font-size:14px;font-weight:400;color:var(--tekst)}
.kat-stablo ul a{display:block;line-height:36px;padding-left:12px}
.kat-stablo a:hover{text-decoration:underline}
.kat-stablo a.je-tu{font-weight:500;color:#000}

/* ------------------------------ dno popisa -------------------------------
   „Prikaži više“ je centriran nad straničenjem: 44px, 14/500, bijel, rub #ababab. */
.vise-red{display:flex;justify-content:center;padding:26px 0 4px}
.vise-gumb{height:44px;padding:0 24px;font-size:14px;font-weight:500;background:#fff;color:#000;border-color:var(--svijetla)}
.vise-gumb:hover{background:var(--podloga)}
.popis-dno{display:flex;justify-content:flex-end;padding-top:18px}
.k-kombi{margin-top:6px;font-size:14px;color:var(--zlato)}
.k-kombi b{font-weight:700}
.k-napomena{font-size:13px;color:var(--siva);margin-top:2px}

/* Kampanjska ploha kategorije: tri prave fotografije na mekoj podlozi
   (bijelo s fotografije se utopi kroz multiply). */
.kat-hero{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:0;margin:6px 0 22px;background:var(--podloga);overflow:hidden}
.kh-slika{height:100%;min-height:260px;overflow:hidden}
.kh-slika>img{width:100%;height:100%;object-fit:cover}
.kh-tekst{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:34px 40px;background:#fff}
.kh-nad{font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--siva)}
.kh-tekst strong{font-size:32px;line-height:36px;font-weight:500}
.kh-tekst p{font-size:16px;line-height:22px;color:var(--tekst)}
.kh-tekst .gumb{margin-top:8px}
.kat-hero{min-height:300px}
.kh-slika{height:300px;background:#f3eee6}
.kh-slog{display:flex;align-items:flex-end;justify-content:center;gap:26px;height:100%;padding:26px 20px}
.kh-slog img{mix-blend-mode:multiply;object-fit:contain;width:auto;max-width:32%}
.kh-slog .kh-0{height:66%}
.kh-slog .kh-1{height:82%}
.kh-slog .kh-2{height:60%}

/* ----------------------------- filtar nijansi ----------------------------- */
.boje-mreza{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.boja-uzorak{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid transparent;
  border-radius:6px;font-size:13px;color:var(--tekst)}
.boja-uzorak i{width:22px;height:22px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.boja-uzorak span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.boja-uzorak:hover{border-color:var(--rub)}
.boja-uzorak.je-tu{border-color:#000;font-weight:500}
.boja-uzorak.je-tu i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 2px #fff,0 0 0 4px #000}

/* ------------------- glava tražilice po notino.hr ------------------------- */
.trazi-glava{padding:20px 0 6px;text-align:center}
.trazi-glava h1{font-size:32px;line-height:36px;font-weight:300}
.trazi-glava h1 span{font-weight:400}
.trazi-broj{font-size:14px;color:var(--siva);margin-top:6px}

.trazi-oznaka{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--zlato);
  font-weight:500;margin-bottom:10px}
.trazi-clanci{padding:18px 0 4px}
.trazi-clanci-red{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.trazi-clanak{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--rub);
  border-radius:4px;color:var(--tekst)}
.trazi-clanak img{width:96px;height:64px;object-fit:cover;flex:none;border-radius:2px}
.trazi-clanak span{font-size:13px;line-height:18px}
.trazi-clanak:hover{border-color:#000}
.trazi-clanak:hover span{color:var(--zlato)}

.trazi-kategorije{padding:14px 0 8px}
.trazi-kat-red{display:flex;flex-wrap:wrap;gap:8px}
.trazi-kat{padding:8px 16px;border:1px solid var(--rub);border-radius:18px;font-size:13px;color:var(--tekst)}
.trazi-kat:hover{border-color:#000;background:#000;color:#fff}

@media (max-width:820px){
  .trazi-glava h1{font-size:22px;line-height:28px}
  .trazi-clanci-red{grid-template-columns:1fr}
}

/* --------------------- glava stranice marke po notinu -------------------- */
.marka-glava{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:40px;
  align-items:start;padding:18px 0 10px}
.marka-glava h1{font-size:32px;line-height:45px;font-weight:300}
.marka-logo{display:block;max-width:220px;max-height:72px;width:auto;height:auto;object-fit:contain;margin-bottom:10px}
.marke-vrh{margin:6px 0 26px}
.marka-opis p{font-size:14px;line-height:22px;color:var(--tekst)}
.marka-plocice{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:18px 0 6px}
.mp-kom{display:flex;flex-direction:column;gap:10px;color:var(--tekst);text-align:center}
.mp-kom img{width:100%;height:190px;object-fit:contain;background:#fff;padding:14px;border:1px solid var(--rub)}
.mp-kom b{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.mp-kom:hover b{color:var(--zlato)}

@media (max-width:900px){
  .marka-glava{grid-template-columns:1fr;gap:12px}
  .marka-glava h1{font-size:24px;line-height:32px}
  .marka-plocice{grid-template-columns:1fr 1fr;gap:12px}
  .mp-kom img{height:130px}
}

/* VELURA — proizvod */

/* ------------------------------- proizvod -------------------------------- */
/* Raspored kao na Notinu (izmjereno, prozor 1425): omot 1320, desni stupac s
   podacima je točno 375px, a sličice + velika fotografija uzimaju ostatak. */
.proizvod{display:grid;grid-template-columns:96px minmax(0,1fr) 375px;column-gap:12px;row-gap:24px;padding:16px 0 40px}
.p-slicice{display:flex;flex-direction:column;gap:10px}
.p-slicice button{width:72px;height:72px;border:1px solid var(--rub);background:#fff;padding:4px}
.p-slicice button.je-tu{border-color:#000}
.p-glavna{position:relative;background:#fff;display:grid;place-items:center;min-height:520px}
.p-glavna img{max-height:520px;width:auto}
.p-info h1{font-size:24px;line-height:32px;font-weight:300;color:#000}   /* Roboto Light */
.p-marka{display:inline-block;font-size:16px;font-weight:300;line-height:32px;color:var(--siva)}
.p-marka:hover{text-decoration:underline}
.p-vrsta{font-size:14px;font-weight:400;line-height:24px;color:var(--tekst);margin-top:4px}
.p-cijena{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.p-cijena b{font-size:20px;font-weight:500;line-height:32px}
.p-cijena.je-skodom b{color:var(--zlato)}   /* glavna cijena je ona s kodom */
.p-cijena s{font-size:14px}
.p-velicine{display:grid;gap:8px;margin:18px 0}
.p-velicina{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border:1px solid var(--rub);font-size:15px;background:#fff}
.p-velicina:hover{border-color:#9a9a9a}
.p-velicina.je-tu{border-color:#000;box-shadow:inset 0 0 0 1px #000}
.pv-ime{font-weight:500}
.pv-cijene{display:flex;align-items:baseline;flex-wrap:wrap;justify-content:flex-end;gap:10px;text-align:right}
.pv-cijene b{font-weight:700;font-size:16px}
.pv-cijene i{font-style:normal;color:var(--zlato);font-size:14px;line-height:16px}
.pv-cijene i span{font-size:12px;color:var(--siva)}
.p-top{position:absolute;top:-9px;left:12px;background:var(--zlato-sjaj);color:#111;font-weight:500;font-size:11px;padding:2px 7px;letter-spacing:.3px}
.p-cijena-blok{border-top:1px solid var(--rub);padding-top:14px;margin-top:6px}
.p-redak{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:var(--siva);padding:3px 0}
.p-skodom{font-size:14px;color:var(--zlato);font-weight:500}
.p-promo{font-size:14px;color:var(--tekst);margin-top:8px}
.p-dostupno{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;line-height:24px;color:var(--siva);margin:12px 0}
.p-dostupno i{font-style:normal;color:var(--svijetla)}   /* sivi razdjelnici */
.p-dostupno .je-dostupno{color:#187c18;font-weight:400}   /* zelena izmjerena na Notinu */
.p-dostupno .nije-dostupno{color:var(--crvena,#cc0d21);font-weight:500}
.p-poklon{border:1px solid var(--rub);padding:16px;margin:16px 0;background:#fdf9f0;border-color:var(--zlato-rub)}
.p-poklon b{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--zlato);margin-bottom:8px}
.p-poklon p{font-size:14px;line-height:20px;color:var(--tekst)}
.p-dostava{border-top:1px solid var(--rub);margin-top:18px}
.pd-odbroj{display:flex;align-items:flex-start;gap:8px;padding:12px 0 0;font-size:14px;line-height:20px;color:#1d6b3a}
.pd-odbroj[hidden]{display:none}
.pd-odbroj b{font-size:inherit;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pd-odbroj svg{flex:none;margin-top:2px}
.p-dostava-red{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--rub);font-size:14px}
.p-dostava-red span:first-child{display:flex;align-items:center;gap:10px;font-weight:500}
.pd-dan{grid-column:1;font-size:14px;font-weight:400;color:var(--siva);padding-left:30px}
.p-dostava-red b{grid-row:1;grid-column:2;font-size:14px;font-weight:500}
.pd-besplatno{color:var(--siva)}   /* „Besplatno" je sivo, a ne crno */
.p-srce{position:absolute;top:16px;right:16px;width:44px;height:44px;display:grid;place-items:center;background:#fff;border-radius:50%;box-shadow:0 1px 6px rgba(0,0,0,.14)}
.p-srce.je-aktivno svg{fill:var(--zlato);color:var(--zlato)}
.p-kartice{border-top:1px solid var(--rub);margin-top:30px}
.pk-jezicci{display:flex;gap:30px;overflow:auto;border-bottom:1px solid var(--rub);scrollbar-width:none}
.pk-jezicci::-webkit-scrollbar{display:none}
.pk-jezicci button{padding:10px 0 11px;font-size:12.25px;font-weight:400;color:var(--tekst);border-bottom:2px solid transparent;white-space:nowrap}
.pk-jezicci button.je-tu{color:#000;font-weight:500;border-bottom-color:#000}
.pk-ploha{padding:24px 0 10px;max-width:860px}
.pk-ploha h2{font-size:22px;margin-bottom:14px}
.pk-ploha h3{font-size:18px;margin:18px 0 8px}
.pk-ploha p{font-size:16px;line-height:24px;color:var(--tekst)}
.p-tablica{border-collapse:collapse;margin-bottom:16px;width:100%;max-width:560px}
.p-tablica th{text-align:left;font-weight:400;color:var(--siva);padding:7px 20px 7px 0;font-size:15px;vertical-align:top;width:230px}
.p-tablica td{padding:7px 0;font-size:15px}
/* Gumb „Dodaj u košaricu" je 283 x 52 (izmjereno); količina stoji lijevo od
   njega, a „Preuzeti odmah" pada u drugi red jer je stupac širok 375px. */
.p-kupi{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
.p-kupi .kolicina{flex:none;height:52px;border-color:var(--rub-polja)}
.p-kupi .kolicina button{width:26px;height:50px;font-size:18px}
.p-kupi .kolicina input{width:28px;height:50px;padding:0;border:0;text-align:center;font-size:14px}
.p-kupi .gumb{height:52px;font-size:14px;font-weight:500}
.p-kupi .gumb.crni{flex:none;width:283px}
.p-kupi .gumb.okvir{flex:1 1 100%}
.p-jamstva{display:grid;gap:12px;margin-top:22px;border-top:1px solid var(--rub);padding-top:18px}
.p-jamstvo{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--tekst)}
.p-jamstvo b{color:#000;font-weight:500}
.p-odjeljak{padding:34px 0;border-top:1px solid var(--rub)}
.p-odjeljak h2{font-size:24px;margin-bottom:14px}
.p-opis{font-size:16px;line-height:24px;color:var(--tekst);max-width:820px}
.recenzija{border-bottom:1px solid var(--rub);padding:16px 0}
.recenzija .vrh{display:flex;align-items:center;gap:12px}
.recenzija b{font-weight:500}
.recenzija p{margin-top:8px;color:var(--tekst);line-height:22px}

/* ------------------------- recenzije koje pišu kupci ---------------------- */
.rec-obrazac{margin-top:26px;padding:20px;border:1px solid var(--rub);border-radius:8px;background:#fafafa}
.rec-obrazac h3{font-size:18px;font-weight:500;margin-bottom:12px}
.rec-zvijezde{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px;margin-bottom:14px}
.rec-zvijezde input{position:absolute;opacity:0;width:0;height:0}
.rec-zvijezde label{color:#dcdcdc;cursor:pointer;line-height:0}
.rec-zvijezde label:hover,.rec-zvijezde label:hover ~ label,
.rec-zvijezde input:checked ~ label{color:#f5a623}
.rec-zvijezde input:focus-visible + label{outline:2px solid var(--zlato);outline-offset:2px}
.rec-polja{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rec-obrazac label{display:block;font-size:13px;color:var(--siva)}
.rec-obrazac input[type=text],.rec-obrazac textarea{width:100%;margin-top:4px;padding:10px 12px;
  border:1px solid var(--rub);border-radius:4px;font:400 15px/1.4 inherit;background:#fff}
.rec-obrazac textarea{resize:vertical}
.rec-tekst{margin-top:12px}
.rec-obrazac .gumb{margin-top:14px}
.rec-obrazac .sitno{margin-top:8px}

/* ---------------------- javi mi kad se vrati na zalihu -------------------- */
.p-javi{margin-top:14px;padding:16px;border:1px dashed var(--rub);border-radius:8px}
.p-javi b{display:flex;align-items:center;gap:8px;font-weight:500;font-size:15px}
.p-javi .sitno{margin:6px 0 10px}
.javi-red{display:flex;gap:8px}
.javi-red input{flex:1;padding:11px 12px;border:1px solid var(--rub);border-radius:4px;font:400 15px/1 inherit}
.javi-red .gumb{height:44px;padding:0 18px;white-space:nowrap}
.p-javljeno{margin-top:14px;padding:12px 14px;border-radius:6px;background:#eef8ee;color:#2b6b34;font-size:14px}

@media (max-width:700px){
  .rec-polja{grid-template-columns:1fr}
  .javi-red{flex-direction:column}
  .javi-red .gumb{width:100%}
}

/* ------------------- stvarne brojke i ljepljiva traka kupnje -------------- */
.p-zadnji{display:flex;align-items:center;gap:7px;margin:10px 0 0;font-size:14px;color:#a8410f}
.p-zadnji b{font-weight:500}
.p-socijalno{display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0 0;font-size:13px;color:var(--siva)}
.p-socijalno span{display:flex;align-items:center;gap:6px}

.p-traka{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;align-items:center;gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;
  border-top:1px solid var(--rub);box-shadow:0 -4px 16px rgba(0,0,0,.1);transform:translateY(110%);
  transition:transform .25s}
.p-traka.je-tu{transform:none}
.p-traka img{width:44px;height:44px;object-fit:contain;mix-blend-mode:multiply}
.p-traka-tekst{flex:1;min-width:0}
.p-traka-tekst b{display:block;font-size:13px;font-weight:400;line-height:16px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-traka-tekst span{font-size:17px;font-weight:700}
.p-traka .gumb{height:44px;padding:0 20px;white-space:nowrap}

@media (max-width:900px){
  .str-proizvod .p-traka{display:flex}
  /* donja navigacija se miče kad traka izađe, da se ne preklope */
}

/* ------------------------- često se kupuje zajedno ------------------------ */
.zajedno{padding:34px 0 10px}
.zajedno h2{font-size:24px;font-weight:500;margin-bottom:18px}
.zaj-sloj{display:grid;grid-template-columns:1fr 300px;gap:30px;align-items:center;
  padding:22px;border:1px solid var(--rub);border-radius:10px}
.zaj-niz{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.zaj-plus{font-size:24px;color:var(--siva)}
.zaj-kom{width:150px;text-align:center;color:var(--tekst)}
.zaj-kom img{width:110px;height:130px;object-fit:contain;mix-blend-mode:multiply}
.zaj-kom b{display:block;font-size:14px;font-weight:500;margin-top:6px}
.zaj-kom span{display:block;font-size:13px;line-height:17px;color:var(--siva);
  max-height:34px;overflow:hidden}
.zaj-kom em{display:block;font-style:normal;font-weight:700;margin-top:6px}
.zaj-kom:hover b{color:var(--zlato)}
.zaj-zbroj{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.zaj-zbroj span{font-size:14px;color:var(--siva)}
.zaj-zbroj b{font-size:24px;font-weight:700}

@media (max-width:900px){
  .zaj-sloj{grid-template-columns:1fr;gap:18px;padding:16px}
  .zaj-niz{justify-content:center}
  .zaj-kom{width:104px}
  .zaj-kom img{width:80px;height:96px}
}

/* ------------- oznaka odabrane veličine i napomena o akciji --------------- */
.p-odabrana{font-size:14px;line-height:20px;color:var(--siva);margin-top:14px}
.p-ogranicena{font-size:13px;line-height:18px;color:var(--siva);margin-top:4px}
.p-kolicina{display:inline-flex;align-items:center}
.p-kolicina select{height:52px;min-width:72px;padding:0 10px;border:1px solid var(--rub);
  background:#fff;font-size:14px;border-radius:2px}
.skriveno-tekst{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* graf cijene u "Ostale informacije" */
.p-graf-cijene{margin:0 0 22px;max-width:600px}
.p-graf-cijene figcaption{font-size:14px;font-weight:500;margin-bottom:8px}
.p-graf-cijene svg{width:100%;height:auto;display:block;overflow:visible}
.p-graf-cijene path{fill:none;stroke:#000;stroke-width:2}
.p-graf-cijene .pg-min{stroke:#1d6b3a;stroke-dasharray:4 4;stroke-width:1}
.p-graf-cijene text{font-size:11px;fill:var(--siva)}
.p-graf-cijene .pg-oznaka{fill:#1d6b3a;font-weight:500}

/* VELURA — kupnja */

/* =========================================================================
   Košarica, blagajna i potvrda. Mjere po referenca/notino-mjere.md:
   H1 32/500, naslov sekcije 24/500, tekst 14–16, sitni tekst 12 (#6b6b6b).
   Polja su visoka 48 s rubom #e6e6e6, gumbi kupnje 52 (kao „Dodaj u košaricu“).
   ========================================================================= */

/* ------------------------------- zaglavlja ------------------------------- */
.kupnja-glava h1{font-size:32px;line-height:36px;font-weight:500;margin-bottom:0}
.kos-naslov{font-size:24px;line-height:32px;font-weight:500;margin:26px 0 12px}
.kos-naslov.prvi{margin-top:6px}

/* ------------------------------- košarica -------------------------------- */
.kos-sloj{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:30px;padding:14px 0 50px;align-items:start}
.kos-red{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:20px;padding:20px 0;border-bottom:1px solid var(--rub);align-items:center}
.kos-red img{width:110px;height:130px;object-fit:contain}
/* tekst retka ide po Notinovoj ljestvici, ne po ljestvici kartice u mreži */
.kos-red .k-marka{display:block;font-size:16px;font-weight:400;line-height:20px;color:var(--tekst)}
.kos-red .k-ime{display:block;font-size:16px;font-weight:500;line-height:20px;margin-top:2px}
.kos-red .k-vrsta{font-size:14px;font-weight:400;line-height:20px;color:#000;margin-top:2px}
.kos-red .k-cijena{margin-top:10px;font-size:16px;line-height:20px}
.kos-red .k-cijena b{font-weight:700}
.kos-desno{text-align:right}
.kos-desno .k-cijena{justify-content:flex-end}
.kolicina{display:inline-flex;align-items:center;border:1px solid var(--rub-polja)}
.kolicina button{width:40px;height:40px;font-size:18px;line-height:1}
.kolicina button:hover{background:var(--podloga)}
.kolicina span{min-width:40px;text-align:center;font-size:14px}

/* -------------------------------- sažetak -------------------------------- */
.sazetak{background:var(--podloga);padding:24px;position:sticky;top:120px}
.sazetak h2{font-size:24px;line-height:32px;font-weight:500;margin-bottom:14px}
.sazetak-red{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:14px;line-height:20px;color:#000}
.sazetak-red b{font-weight:500}
.sazetak-red.ukupno{font-size:20px;line-height:26px;font-weight:700;border-top:1px solid var(--rub);margin-top:12px;padding-top:14px}
.sazetak-red.ukupno b{font-weight:700}
.sazetak .gumb{height:52px;margin-top:16px;font-size:14px;font-weight:500}
.sazetak .sitno{font-size:12px;line-height:16px;color:var(--siva);padding:6px 0 0}

/* -------------------------------- koraci --------------------------------- */


/* -------------------------------- obrazac -------------------------------- */
.obrazac{display:grid;gap:16px;max-width:620px}
.polje{display:flex;flex-direction:column;gap:6px}
.polje label{font-size:14px;line-height:20px;color:var(--tekst)}
/* font polja nikad ispod 16px — iPhone inače zumira pri fokusu */
.polje input,.polje select,.polje textarea{height:48px;border:1px solid var(--rub-polja);border-radius:2px;
  padding:0 14px;font-size:16px;line-height:20px;background:#fff}
.polje input:focus,.polje select:focus,.polje textarea:focus{outline:none;border-color:#000}
.polje textarea{height:96px;padding:12px 14px}
.polje.duplo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.izbor{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--rub-polja);padding:16px;cursor:pointer;
  font-size:16px;line-height:20px}
.izbor:hover{border-color:var(--svijetla)}
.izbor.je-tu{border-color:#000;box-shadow:inset 0 0 0 1px #000}
.izbor input{margin-top:3px}
.izbor b{font-weight:500}
.izbor .sitno{display:inline-block;margin-top:2px;font-size:12px;line-height:16px;color:var(--siva)}
.kos-akcije{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.kos-akcije .gumb{height:52px;font-size:14px;font-weight:500}

/* ------------------------------- stranice -------------------------------- */
.sadrzaj{padding:26px 0 40px;max-width:860px}
.sadrzaj h1{font-size:32px;line-height:36px;font-weight:500;margin-bottom:18px}
.sadrzaj h2{font-size:24px;line-height:32px;font-weight:500;margin:26px 0 10px}
.sadrzaj p{font-size:16px;line-height:24px;color:var(--tekst);margin-bottom:12px}
.sadrzaj ul{margin:0 0 14px 20px;list-style:disc}
.kodovi-popis{display:grid;border-top:1px solid var(--rub);margin-bottom:10px}
.kodovi-popis div{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rub)}
.kodovi-popis b{font-size:16px;font-weight:700;letter-spacing:.03em}
.kodovi-popis span{font-size:14px;line-height:20px;color:var(--tekst)}
.kodovi-popis .veza-tekst{font-size:13px;font-weight:500;text-decoration:underline}
@media (max-width:600px){.kodovi-popis div{grid-template-columns:minmax(0,1fr) auto}.kodovi-popis span{grid-column:1 / -1;grid-row:2}}
.sadrzaj li{margin-bottom:8px;color:var(--tekst)}
.sadrzaj .sazetak-red{max-width:520px}
.poruka{padding:14px 16px;background:#eef7f1;border:1px solid #cde6d8;color:var(--zelena);margin:14px 0;font-size:14px;line-height:20px}
.poruka.greska{background:#fdeef0;border-color:#f3ccd3;color:#a3102a}

/* -------------------------------- mobitel -------------------------------- */
@media (max-width:900px){
  .kupnja-glava h1{font-size:26px;line-height:32px}
  .kos-red{grid-template-columns:90px minmax(0,1fr);gap:14px;padding:16px 0}
  .kos-red img{width:90px;height:110px}
  .kos-desno{grid-column:2;display:flex;align-items:center;justify-content:space-between;text-align:left}
  .kos-red .k-cijena{margin-top:0}
  .sazetak{padding:20px}
  .kos-akcije .gumb{flex:1 1 100%}
}
.kos-napomena{font-size:13px;line-height:18px;color:var(--zlato);margin-top:4px}

/* ------------------------ besplatni uzorci uz narudžbu -------------------- */
.uzorci{margin-top:22px;padding:18px;border:1px solid var(--rub);border-radius:10px;background:#fff}
.uzorci.je-zakljucano{background:#fafafa}
.uzorci-vrh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:14px}
.uzorci-vrh b{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:500}
.uzorci-red{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.uzorci-red::-webkit-scrollbar{display:none}
.uzorak{flex:none}
.uzorak button{position:relative;width:104px;padding:10px 8px 12px;border:1px solid var(--rub);border-radius:8px;
  background:#fff;display:grid;justify-items:center;gap:4px;cursor:pointer;text-align:center}
.uzorak button:hover:not([disabled]){border-color:#000}
.uzorak button[disabled]{opacity:.42;cursor:default}
.uzorak img{width:70px;height:70px;object-fit:contain;mix-blend-mode:multiply}
.uzorak-marka{font-size:12px;font-weight:500;line-height:14px}
.uzorak-ime{font-size:11px;color:var(--siva);line-height:13px;max-height:26px;overflow:hidden}
.uzorak-znak{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;
  background:#efefef;color:var(--siva);display:grid;place-items:center;font-size:13px;line-height:1}
.uzorak.je-tu button{border-color:#000;box-shadow:inset 0 0 0 1px #000}
.uzorak.je-tu .uzorak-znak{background:var(--zlato-sjaj);color:#111}
.kos-slika{object-fit:contain;mix-blend-mode:multiply}
@media (max-width:700px){
  .uzorci-vrh{flex-direction:column;gap:4px}
  .uzorci{padding:14px}
}

/* --------------------- bodovi kluba na potvrdi narudžbe ------------------- */
.nar-klub{margin-top:26px;padding:20px;border-radius:10px;background:#faf6ef;border:1px solid #efe4d2}
.nar-klub b{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:500}
.nar-klub b svg{color:#c39b3f}
.nar-klub p{margin:8px 0 14px;font-size:14px;line-height:20px;color:var(--siva)}

/* ==========================================================================
   KOŠARICA po notino.hr — jedan središnji stupac od 1035 px, bez desnog
   sažetka. Sve mjere čitane s njihove žive stranice.
   ========================================================================== */
.omot-kupnja{width:min(1035px, 100% - 32px);margin-inline:auto;padding:10px 0 50px}
.kupnja-naslov{font-size:24px;line-height:32px;font-weight:300;text-align:center;margin-bottom:10px}

/* zelena crta o besplatnoj dostavi */
.kos-dostava{display:flex;align-items:center;gap:14px;margin:18px 0 6px;color:#2a8a3e;font-size:14px;font-weight:500}
.kos-dostava::before,.kos-dostava::after{content:"";flex:1;height:2px;background:#2a8a3e}
.kos-dostava span{display:flex;align-items:center;gap:8px;white-space:nowrap}
.kos-dostava.je-daleko{color:var(--siva)}
.kos-napredak{max-width:420px;margin:4px auto 10px}
.kos-dostava.je-daleko::before,.kos-dostava.je-daleko::after{background:var(--rub)}

/* redak stavke */
.kos-popis{margin-top:6px}
.kos-red{display:grid;grid-template-columns:72px minmax(0,1fr) 150px 110px 110px;gap:18px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--rub)}
.kos-sl{display:block;line-height:0}
.kos-sl img{width:72px;height:86px;object-fit:contain;mix-blend-mode:multiply}
.kos-ime{display:block;font-size:14px;line-height:19px;color:var(--tekst)}
.kos-ime b{font-weight:700;color:#000}
.kos-ime:hover{color:var(--zlato)}
.kos-vrsta{font-size:13px;line-height:18px;color:var(--siva);margin-top:2px}
.kos-napomena{font-size:12px;line-height:16px;color:var(--siva);margin-top:4px}
.kos-opis .oz{display:inline-block;margin-top:6px}
.kos-cijena{text-align:right;font-size:14px;line-height:19px}
.kos-cijena s{display:block;color:var(--siva)}
.kos-cijena b{font-weight:400;font-size:15px}
.kos-cijena b.je-akcija{color:var(--zlato)}
.kos-info{display:inline-flex;vertical-align:middle;margin-left:4px;color:var(--siva);cursor:help}
.kos-kol{justify-self:center}
.kos-zbroj{text-align:right}
.kos-zbroj b{font-size:15px;font-weight:500;display:block}
.kos-zbroj .veza-tekst{font-size:12px;color:var(--siva);text-decoration:underline;margin-top:6px}
.kos-kasnije{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.kos-spremljeno{display:flex;align-items:center;gap:8px;padding:12px 16px;margin-bottom:14px;font-size:14px;background:var(--podloga)}
.kos-spremljeno a{text-decoration:underline}

/* dodatne usluge */
.dod-usluge{margin-top:30px}
.dod-usluge h2{font-size:24px;line-height:36px;font-weight:700;margin-bottom:8px}
.du-red{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:6px 14px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--rub)}
.du-kvaka{width:20px;height:20px;border:1px solid var(--svijetla);border-radius:2px;background:#fff;
  display:grid;place-items:center;color:transparent;cursor:pointer;padding:0}
.du-red.je-tu .du-kvaka{background:#000;border-color:#000;color:#fff}
.du-ime{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;line-height:20px}
.du-ime b{font-weight:500}
.du-ime i{font-style:normal;color:var(--siva)}
.du-info{display:inline-flex;color:var(--siva);cursor:help}
.du-cijena{font-size:14px;font-weight:500;white-space:nowrap}
.du-opis{grid-column:2 / -1;font-size:13px;line-height:18px;color:var(--siva);margin-top:2px}

/* kod za popust */
.kos-kupon{margin-top:26px}
.kos-kupon h2{font-size:14px;font-weight:500;margin-bottom:8px}
.kos-kupon summary{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--siva);
  cursor:pointer;text-decoration:underline;list-style:none;width:max-content}
.kos-kupon summary::-webkit-details-marker{display:none}
.kupon-red{display:flex;gap:10px;margin-top:12px;max-width:420px}
.kupon-red input{flex:1;height:40px;padding:0 12px;border:1px solid var(--rub);font-size:14px}
.kupon-red .veza-tekst{font-size:14px;font-weight:700;padding:0 16px;white-space:nowrap}
.kupon-poruka{margin-top:8px;font-size:13px;color:#a8410f}
.kupon-poruka.je-ok{color:#1d6b3a}
.kupon-poruka a{text-decoration:underline;color:inherit}
.kupon-cipovi{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.kupon-cip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 4px 0 12px;
  border:1px solid #000;font-size:13px;background:#fff}
.kupon-cip b{font-weight:700;letter-spacing:.02em}
.kupon-cip.ne-vrijedi{border-color:var(--rub);color:var(--siva)}
.kupon-cip.ne-vrijedi b{text-decoration:line-through}
.kupon-cip span{color:var(--siva)}
.kupon-cip button{display:grid;place-items:center;width:26px;height:26px;border:0;background:none;cursor:pointer;color:#000}
.kupon-cip button:hover{background:var(--podloga)}
.kupon-bodovi{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:14px;line-height:20px}
.kupon-bodovi .du-kvaka[aria-pressed="true"]{background:#000;border-color:#000;color:#fff}
.kos-popusti{margin-top:22px;padding:4px 22px 0}
.sazetak-red.popust b{color:#1d6b3a;font-weight:700}
.kos-popusti + .kos-ukupno{margin-top:8px}

/* kupljeni poklon-bonovi na potvrdi */
.nar-bonovi{margin-top:26px}
.nar-bonovi .sitno{margin-bottom:12px}
.izdani-bon{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;max-width:520px;
  padding:18px 20px;margin-bottom:10px;border:1px solid var(--zlato-rub);background:var(--zlato-blijedo)}
.ib-marka{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--zlato)}
.ib-kod{grid-column:1;font-size:22px;line-height:30px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.ib-iznos{grid-column:2;grid-row:1 / 3;font-size:20px;font-weight:700;text-align:right}
.ib-rok{font-size:13px;color:var(--siva)}
.izdani-bon .veza-tekst{grid-column:2;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500}

/* ukupno i dno */
.kos-ukupno{display:flex;align-items:center;justify-content:flex-end;gap:16px;
  margin-top:26px;padding:18px 22px;background:var(--podloga)}
.kos-ukupno span{font-size:14px;color:var(--siva)}
.kos-ukupno b{font-size:24px;font-weight:700}
.kos-dno{display:flex;justify-content:space-between;gap:14px;margin-top:20px}
.kos-dno .gumb{height:44px;border-radius:2px;font-size:14px;font-weight:500;padding:0 24px;min-width:200px}

@media (max-width:820px){
  .kos-red{grid-template-columns:64px minmax(0,1fr) auto;gap:12px}
  .kos-sl img{width:64px;height:76px}
  .kos-cijena{grid-column:2;grid-row:2;text-align:left}
  .kos-kol{grid-column:3;grid-row:2;justify-self:end}
  .kos-zbroj{grid-column:3;grid-row:1}
  .kos-dostava::before,.kos-dostava::after{display:none}
  .kos-dostava span{white-space:normal}
  .kos-ukupno{justify-content:space-between}
  .kos-dno{flex-direction:column-reverse}
  .kos-dno .gumb{width:100%}
  .du-red{grid-template-columns:22px minmax(0,1fr) auto}
}

/* ==========================================================================
   KUPNJA U PET KORAKA po notino.hr — oguljeno zaglavlje, brojčanik koraka,
   uski stupac i donja traka s ukupnim iznosom.
   ========================================================================== */
.z-kupnja{background:#000;color:#fff}
.z-kupnja .omot-uski{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.z-kupnja .logo{font-size:26px;font-weight:700;letter-spacing:.14em;color:#fff}
.zk-telefon{font-size:12px;line-height:16px;text-align:right}
.zk-telefon b{font-weight:500}
.zk-telefon i{display:block;font-style:normal;opacity:.7}

.koraci{display:flex;align-items:center;justify-content:center;gap:0;padding:26px 0 30px;flex-wrap:wrap}
.korak{display:flex;align-items:center;gap:9px;font-size:13px;line-height:18px;color:var(--siva)}
.korak + .korak{margin-left:10px;padding-left:34px;position:relative}
.korak + .korak::before{content:"";position:absolute;left:0;top:50%;width:24px;height:1px;background:var(--rub)}
.korak-krug{width:24px;height:24px;border-radius:50%;border:1px solid var(--rub);background:#fff;
  display:grid;place-items:center;font-size:12px;color:var(--siva);flex:none}
.korak.je-tekuci{color:#000}
.korak.je-tekuci .korak-krug{background:#000;border-color:#000;color:#fff;font-weight:500}
.korak.je-proslo{color:#000}
.korak.je-proslo .korak-krug{border-color:#000;color:#000}
.korak.je-proslo:hover .korak-ime{text-decoration:underline}

.kup-naslov{font-size:28px;line-height:38px;font-weight:300;text-align:center;margin-bottom:8px}
.kup-uvod{font-size:14px;line-height:20px;color:var(--siva);text-align:center;margin-bottom:26px}
.kup-pod{font-size:16px;font-weight:500;margin:24px 0 10px}
.kup-izbori{display:grid;gap:10px}

/* uski stupac koraka prijave — kod njih je 400 px */
.kup-usko{width:min(400px,100%);margin-inline:auto;display:grid;gap:12px}
.kup-polje span{display:block;font-size:13px;color:var(--siva);margin-bottom:5px}
.kup-polje input{width:100%;height:44px;padding:0 12px;border:1px solid var(--rub);font-size:14px}
.kup-usko .gumb{height:44px;border-radius:0;font-size:14px;font-weight:400}

.kup-obrazac{display:grid;gap:14px;max-width:640px}
.kup-sazetak{margin-top:26px;padding:20px;background:var(--podloga)}
.kup-sazetak h2{font-size:18px;font-weight:500;margin-bottom:10px}

.kup-dno{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:34px;padding-top:22px;border-top:1px solid var(--rub)}
.kup-dno-desno{display:flex;align-items:center;gap:20px;margin-left:auto}
.kup-ukupno{font-size:13px;color:var(--siva)}
.kup-ukupno b{font-size:22px;font-weight:700;color:#000;margin-left:8px}
.kup-dno .gumb{height:44px;border-radius:2px;font-size:14px;font-weight:500;padding:0 24px;min-width:190px}

/* ponuda sniženja */
.ponuda-mreza{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ponuda-kom{text-align:center;display:flex;flex-direction:column;gap:4px}
.ponuda-kom form{margin-top:auto}
.ponuda-kom img{width:100%;height:190px;object-fit:contain;mix-blend-mode:multiply}
.pk-marka{font-size:13px;font-weight:700;margin-top:6px}
.pk-ime{font-size:13px;line-height:18px;color:var(--tekst)}
.pk-ime:hover{color:var(--zlato)}
.pk-vrsta{font-size:12px;line-height:16px;color:var(--siva)}
.pk-cijene{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:6px 0 10px}
.pk-ime{min-height:36px}
.pk-cijene s{font-size:13px;color:var(--siva)}
.pk-cijene b{font-size:15px;font-weight:700;color:var(--zlato)}
.ponuda-kom .gumb{height:38px;font-size:13px;border-radius:2px}

@media (max-width:820px){
  .koraci{gap:4px;padding:18px 0 22px}
  .korak-ime{display:none}
  .korak.je-tekuci .korak-ime{display:inline}
  .korak + .korak{padding-left:22px;margin-left:4px}
  .korak + .korak::before{width:14px}
  .ponuda-mreza{grid-template-columns:1fr 1fr}
  .kup-dno{flex-direction:column;align-items:stretch}
  .kup-dno-desno{flex-direction:column;align-items:stretch;gap:10px;margin-left:0}
  .kup-dno .gumb{width:100%}
  .kup-ukupno{text-align:center}
  .z-kupnja .omot-uski{height:56px}
  .zk-telefon i{display:none}
}

/* VELURA — podnozje */

/* ------------------------------- podnožje -------------------------------- */
/* Mjere po referenca/notino-mjere.md §8: telefon 24/500, radno vrijeme 12/400 #808080,
   veze 14/400, naslov newslettera 20/500, polje 52px, gumbi 45px/14px,
   naslovi stupaca 16/500, veze stupaca i zemlje 14/400, donji redak 12/400. */
.podnozje{background:#000;color:#fff;margin-top:40px;padding:46px 0 30px}
.podnozje a:hover{text-decoration:underline}
.pod-kontakt{display:flex;flex-direction:column;align-items:center;gap:6px;padding-bottom:36px;text-align:center}
.pod-tel{font-size:24px;font-weight:500;color:#fff}
.pod-radno{font-size:12px;font-weight:400;color:#808080}
.pod-veze{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:400;margin-top:6px}
.pod-veze a{text-decoration:underline}
.pod-veze i{width:1px;height:16px;background:#4a4a4a;display:inline-block}
.pod-newsletter{display:grid;grid-template-columns:320px minmax(0,1fr);gap:40px;align-items:center;
  padding:28px 0 34px;border-bottom:1px solid #2a2a2a}
.pod-newsletter>p{font-size:20px;line-height:26px;font-weight:500}
.nl-obrazac{display:flex;gap:14px;align-items:center}
.nl-polje{position:relative;flex:1;max-width:440px}
.nl-polje input{width:100%;height:52px;border:0;padding:0 46px 0 16px;font-size:16px}
.nl-info{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--siva)}
.nl-obrazac .gumb{height:45px;min-width:110px;font-size:14px;border-color:#fff;color:#fff}
.nl-obrazac .gumb:hover{background:#fff;color:#000}
.pod-mreza{display:grid;grid-template-columns:320px repeat(3,minmax(0,1fr));gap:40px;padding:26px 0;border-bottom:1px solid #2a2a2a}
.pod-glavni{font-size:16px;font-weight:500}
.pod-naslov{font-size:16px;font-weight:500;margin-bottom:10px}
.pod-stupac li{margin-bottom:10px}
.pod-stupac a{font-size:14px;font-weight:400;line-height:20px;color:#e6e6e6}
.pod-app .pod-znacke{grid-column:2/-1;display:flex;gap:14px;flex-wrap:wrap}
.znacka{display:flex;flex-direction:column;justify-content:center;min-width:170px;height:56px;padding:0 18px;border:1px solid #fff}
.znacka span{font-size:11px;color:var(--svijetla)}
.znacka b{font-size:17px;font-weight:500}
.pod-zemlje{display:grid;grid-template-columns:repeat(6,1fr);gap:12px 24px;padding:26px 0}
.pod-zemlje a{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:400;color:#e6e6e6}
.zastava{width:22px;height:15px;flex:none;background:#333;position:relative;overflow:hidden;border-radius:2px}
.pod-dno{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:22px;border-top:1px solid #2a2a2a;
  font-size:12px;font-weight:400;color:var(--svijetla);flex-wrap:wrap}
.pod-kartice{display:flex;gap:8px}
.pod-kartice i{font-style:normal;font-size:11px;letter-spacing:.5px;background:#fff;color:#000;padding:3px 7px;border-radius:2px;font-weight:700}

/* --------------------------------- zastave -------------------------------- */
.zastava.z-de{background:linear-gradient(#000 33.3%,#d00 33.3% 66.6%,#fc0 66.6%)}
.zastava.z-at{background:linear-gradient(#e33 33.3%,#fff 33.3% 66.6%,#e33 66.6%)}
.zastava.z-fr{background:linear-gradient(90deg,#28348b 33.3%,#fff 33.3% 66.6%,#d52b1e 66.6%)}
.zastava.z-it{background:linear-gradient(90deg,#008c45 33.3%,#fff 33.3% 66.6%,#cd212a 66.6%)}
.zastava.z-nl{background:linear-gradient(#ae1c28 33.3%,#fff 33.3% 66.6%,#21468b 66.6%)}
.zastava.z-be{background:linear-gradient(90deg,#000 33.3%,#fae042 33.3% 66.6%,#ed2939 66.6%)}
.zastava.z-es{background:linear-gradient(#aa151b 25%,#f1bf00 25% 75%,#aa151b 75%)}
.zastava.z-pt{background:linear-gradient(90deg,#046a38 40%,#da291c 40%)}
.zastava.z-cz{background:linear-gradient(#fff 50%,#d7141a 50%)}
.zastava.z-cz::after{content:"";position:absolute;inset:0;background:linear-gradient(45deg,#11457e 50%,transparent 50%);width:12px}
.zastava.z-sk{background:linear-gradient(#fff 33.3%,#0b4ea2 33.3% 66.6%,#ee1c25 66.6%)}
.zastava.z-hu{background:linear-gradient(#cd2a3e 33.3%,#fff 33.3% 66.6%,#436f4d 66.6%)}
.zastava.z-pl{background:linear-gradient(#fff 50%,#dc143c 50%)}
.zastava.z-ro{background:linear-gradient(90deg,#002b7f 33.3%,#fcd116 33.3% 66.6%,#ce1126 66.6%)}
.zastava.z-bg{background:linear-gradient(#fff 33.3%,#00966e 33.3% 66.6%,#d62612 66.6%)}
.zastava.z-si{background:linear-gradient(#fff 33.3%,#0b4ea2 33.3% 66.6%,#d50000 66.6%)}
.zastava.z-hr{background:linear-gradient(#ff0000 33.3%,#fff 33.3% 66.6%,#171796 66.6%)}
.zastava.z-gr{background:repeating-linear-gradient(#0d5eaf 0 3px,#fff 3px 6px)}
.zastava.z-gb{background:#012169}
.zastava.z-gb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 42%,#fff 42% 58%,transparent 58%),
             linear-gradient(transparent 38%,#fff 38% 62%,transparent 62%)}

/* ---------------- traka povjerenja nad podnožjem (notino.hr) -------------- */
.traka-povjerenja{border-top:1px solid var(--rub);background:#fff}
.traka-povjerenja .omot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px 30px;padding:24px 0}
.traka-povjerenja span{display:flex;align-items:center;gap:12px;flex:1;min-width:230px}
.traka-povjerenja svg{color:var(--zlato);flex:none}
.traka-povjerenja b{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}

@media (max-width:820px){
  .traka-povjerenja .omot{flex-direction:column;gap:14px;padding:18px 0}
  .traka-povjerenja span{min-width:0}
}

/* VELURA — alati: ogledalo, dijagnostika, nijanse, box, sastojci, usporedba */

/* ------------------------------ ogledalo ---------------------------------
   Puni zaslon: kamera gore, ladica s nijansama dolje — kao u aplikaciji. */
.str-ogledalo main{padding:0}
.str-ogledalo .podnozje,.str-ogledalo .mrvice{display:none}
.str-ogledalo{background:#000}
.str-ogledalo main{padding:0;min-height:0}
.og-zaslon{display:flex;flex-direction:column;height:100vh;height:100dvh;background:#000;overflow:hidden}
.og-kamera{position:relative;flex:1;min-height:0;background:#111;overflow:hidden}
.og-kamera canvas{width:100%;height:100%;object-fit:cover;display:block}
.og-natrag{position:absolute;top:14px;left:14px;width:40px;height:40px;border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;backdrop-filter:blur(6px);z-index:5}

.og-bocni{position:absolute;top:50%;right:14px;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:3}
.og-ikona{width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;
  display:grid;place-items:center;backdrop-filter:blur(6px);cursor:pointer}
.og-ikona.je-tu{background:var(--zlato-sjaj);color:#111}
.og-ikona:hover{background:rgba(0,0,0,.65)}
.og-ikona.je-tu:hover{background:var(--zlato-sjaj-jace)}

/* početni zaslon: prije kamere ili fotografije, samo vaše lice */
.og-pocetak{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;padding:64px 24px 40px;background:#0d0c0a;color:#fff;text-align:center;overflow:auto}
.og-pocetak[hidden]{display:none}
.og-ovalni{flex:none;width:120px;height:160px;border-radius:50%;border:1.5px dashed rgba(201,162,74,.75)}
.og-pocetak-tekst{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:360px}
.og-pocetak h1{font-size:24px;line-height:30px;font-weight:500;color:#fff}
.og-pocetak p{font-size:14px;line-height:20px;color:rgba(255,255,255,.72)}
.og-pocetak .gumb{height:50px;padding:0 28px;gap:10px;margin-top:6px;min-width:240px}
.og-pocetak-foto{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#fff;cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;padding:6px}
.og-pocetak-foto:hover{color:var(--zlato-svijetlo)}
.og-savjeti{list-style:none;display:grid;gap:6px;margin-top:8px;text-align:left}
.og-savjeti li{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.72)}
.og-savjeti svg{color:var(--zlato-svijetlo);flex:none}
@media (max-width:760px){
  .og-pocetak{justify-content:flex-start;padding:62px 20px 36px;gap:14px}
  .og-ovalni{width:72px;height:96px}
  .og-pocetak h1{font-size:20px;line-height:26px}
  .og-pocetak p{font-size:13px;line-height:18px}
  .og-pocetak .gumb{height:46px;min-width:220px}
  .og-savjeti{display:none}
}

/* traženje lica: zlatna crta klizi preko slike */
.og-sken{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;transition:opacity .3s;overflow:hidden}
.og-kamera.je-sken .og-sken{opacity:1}
.og-sken i{position:absolute;left:0;right:0;height:26%;top:-26%;
  background:linear-gradient(180deg,rgba(236,213,143,0) 0%,rgba(236,213,143,.22) 80%,rgba(245,228,170,.9) 100%);
  border-bottom:1px solid rgba(255,240,200,.95);animation:og-sken 1.8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes og-sken{to{top:100%}}
@media (prefers-reduced-motion:reduce){.og-sken i{animation:none;top:40%}}

.og-status{position:absolute;left:50%;top:70px;transform:translateX(-50%);z-index:5;max-width:min(88%,420px);
  padding:9px 16px;border-radius:20px;background:rgba(12,10,6,.72);color:#fff;font-size:14px;line-height:18px;
  text-align:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(236,213,143,.35)}
.og-status[data-tip="greska"]{border-color:#e8a33c}

/* prije / poslije */
.og-rucka{position:absolute;top:0;bottom:0;width:44px;margin-left:-22px;z-index:3;cursor:ew-resize;touch-action:none;
  display:flex;align-items:center;justify-content:center}
.og-rucka::before{content:"";width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35);
  background-image:linear-gradient(90deg,transparent 45%,#111 45%,#111 55%,transparent 55%)}
.og-rucka[hidden]{display:none}
.og-rucka span{position:absolute;top:18px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:rgba(0,0,0,.5);padding:3px 7px;border-radius:10px;white-space:nowrap}
.og-rucka span:first-child{right:34px}
.og-rucka span:last-child{left:34px}

.og-ladica{flex:none;background:#fff;padding:12px 16px calc(14px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:10px;border-radius:18px 18px 0 0;margin-top:-18px;position:relative;z-index:4;
  box-shadow:0 -6px 20px rgba(0,0,0,.18)}
.og-ladica::before{content:"";width:38px;height:4px;border-radius:2px;background:#d9d9d9;margin:0 auto 2px}
.og-izgledi{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.og-izgledi::-webkit-scrollbar{display:none}
.og-izgledi span{flex:none;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--zlato);font-weight:500;margin-right:2px}
.og-izgledi button{flex:none;padding:6px 13px;font-size:13px;border-radius:16px;border:1px solid var(--zlato-rub);
  background:#fffcf5;color:#3a2f14}
.og-izgledi button[aria-pressed="true"]{background:var(--zlato-sjaj);border-color:transparent;color:#111;font-weight:500}
.og-jezicci{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.og-jezicci::-webkit-scrollbar{display:none}
.og-jez{flex:none;padding:7px 14px;font-size:14px;border:1px solid var(--rub);background:#fff;border-radius:18px;color:var(--tekst)}
.og-jez.je-tu{background:#000;color:#fff;border-color:#000}
.og-red{display:flex;gap:14px;overflow-x:auto;padding:4px 0 6px;scrollbar-width:none}
.og-red::-webkit-scrollbar{display:none}
.og-krug{flex:none;width:52px;height:52px;border-radius:50%;background:var(--n,#fff);
  border:1px solid rgba(0,0,0,.12);display:grid;place-items:center;color:var(--siva)}
.og-krug.je-tu{box-shadow:0 0 0 2px #fff,0 0 0 4px #000}
.og-bez{background:#fff}
.og-jacina-red{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--siva);flex-wrap:wrap}
.og-jacina-red input{flex:1;min-width:120px;accent-color:var(--zlato-svijetlo)}
.og-zavrsni{display:flex;border:1px solid var(--rub);border-radius:16px;overflow:hidden}
.og-zavrsni[hidden]{display:none}
.og-zavrsni button{padding:5px 11px;font-size:12px;color:var(--tekst);border-left:1px solid var(--rub)}
.og-zavrsni button:first-child{border-left:0}
.og-zavrsni button[aria-pressed="true"]{background:#111;color:var(--zlato-svijetlo)}
.og-izgled-kupi .gumb{height:48px}
.og-izgled-kupi .gumb span{font-weight:400;opacity:.8;margin-left:4px}
.og-odabir{border-top:1px solid var(--rub);padding-top:12px;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:10px 16px}
.og-podatak{display:flex;flex-direction:column;gap:2px;min-width:0}
.og-podatak b{font-size:15px;font-weight:400;line-height:19px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.og-podatak span{font-size:20px;font-weight:700;white-space:nowrap}
.og-kupi .gumb{height:50px;font-size:16px;width:auto;padding:0 34px}
.og-izgled-kupi{grid-column:1/-1}
.og-kupi .gumb[disabled]{opacity:.4;pointer-events:none}

/* gumb probe na stranici proizvoda */
.p-proba{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;
  display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px 0 16px;border-radius:22px;
  background:#111;color:#fff;font-size:14px;font-weight:500;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.p-proba:hover{background:#000}
.p-proba svg{width:20px;height:20px;color:var(--zlato-svijetlo)}

/* ----------------------------- dijagnostika ------------------------------ */
.dk-upitnik{display:grid;gap:18px;max-width:900px;padding-bottom:40px}
.dk-skener{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,380px);gap:18px 32px;padding:28px;align-items:center;
  background:#f8f1e1;border:1px solid var(--zlato-rub);border-radius:8px}
.dk-skener-tekst h2{font-size:26px;line-height:32px;font-weight:500;margin:6px 0 8px}
.dk-skener-tekst p{font-size:15px;line-height:22px;color:var(--tekst);margin:0 0 16px;max-width:520px}
.dk-gumbi{display:flex;flex-wrap:wrap;gap:10px}
.dk-gumbi .gumb{height:48px;padding:0 22px}
.dk-uzorak{margin-top:10px;font-size:14px;color:var(--zlato);text-decoration:underline;text-underline-offset:3px}
.dk-savjeti{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:13px;color:var(--tekst)}
.dk-savjeti li{display:flex;align-items:center;gap:6px}
.dk-savjeti svg{color:var(--zlato)}
.dk-skener-platno{position:relative;border-radius:12px;overflow:hidden;background:#15120c;aspect-ratio:4/5;
  box-shadow:0 18px 40px rgba(60,44,12,.18)}
.dk-skener-platno canvas{width:100%;height:100%;display:block;object-fit:cover}
.dk-skener-platno:not(.je-aktivan) canvas{opacity:0}
.dk-oval{position:absolute;left:18%;right:18%;top:12%;bottom:18%;border-radius:50%;
  border:2px dashed rgba(236,213,143,.75);box-shadow:0 0 0 999px rgba(10,8,5,.35);pointer-events:none;
  opacity:0;transition:opacity .3s}
.dk-skener-platno:not(.je-aktivan) .dk-oval,.dk-skener-platno.je-uzivo .dk-oval{opacity:1}
.dk-skener-platno:not(.je-aktivan) .dk-oval{box-shadow:none}
.dk-poruka{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:max-content;max-width:88%;
  padding:8px 14px;border-radius:18px;background:rgba(12,10,6,.75);color:#fff;font-size:14px;text-align:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dk-sken-crta{position:absolute;inset:0;pointer-events:none;opacity:0;overflow:hidden;transition:opacity .25s}
.dk-skener-platno.je-sken .dk-sken-crta{opacity:1}
.dk-sken-crta i{position:absolute;left:0;right:0;height:30%;top:-30%;
  background:linear-gradient(180deg,rgba(236,213,143,0),rgba(236,213,143,.25) 80%,rgba(250,236,190,.95));
  border-bottom:1px solid #fff3cf;animation:og-sken 1.3s cubic-bezier(.45,0,.55,1) infinite}
.dk-skener-platno.je-bljesak::after{content:"";position:absolute;inset:0;background:#fff;animation:dk-bljesak .4s ease-out forwards}
@keyframes dk-bljesak{from{opacity:.85}to{opacity:0}}
.dk-krug{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;pointer-events:none}
.dk-krug[hidden]{display:none}
.dk-krug svg{width:100%;height:100%;transform:rotate(-90deg)}
.dk-krug circle{fill:none;stroke:#ecd58f;stroke-width:3;stroke-dasharray:100.5;stroke-dashoffset:calc(100.5 * (1 - var(--p,0)));
  filter:drop-shadow(0 0 4px rgba(0,0,0,.5))}
.dk-ocitanja{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:14px 32px;
  background:#fff;border-radius:10px;padding:20px;border:1px solid var(--zlato-rub)}
.dk-ocitanja[hidden]{display:none}
.dk-ton{display:flex;align-items:center;gap:14px}
.dk-ton i{flex:none;width:56px;height:56px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),0 0 0 4px #fff,0 0 0 5px var(--zlato-rub)}
.dk-ton p{font-size:15px;line-height:22px;color:var(--tekst)}
.dk-ton b{color:#000;font-weight:500}
.dk-ton a{color:var(--zlato);font-size:14px;text-decoration:underline;text-underline-offset:3px}
.dk-mjere-sken .dk-mjera span{width:130px}
.dk-napomena{grid-column:1/-1;font-size:13px;color:var(--siva);line-height:18px}
.dk-odgovor.je-sken{border-color:var(--zlato-svijetlo);box-shadow:inset 0 0 0 1px var(--zlato-svijetlo);background:#fffbf1}
.dk-sken-nalaz{margin-top:22px;padding-top:18px;border-top:1px solid var(--rub)}
.dk-sken-nalaz .dk-ton{margin:8px 0 14px}
.dk-puderi-naslov{font-size:14px;font-weight:500;margin:14px 0 8px}
.dk-puderi{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.dk-puderi a{display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;
  padding:8px 10px;background:#fff;border:1px solid var(--rub);font-size:13px}
.dk-puderi a:hover{border-color:var(--zlato-svijetlo)}
.dk-puderi i{grid-row:1/3;width:22px;height:22px;border-radius:50%;align-self:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.dk-puderi span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-puderi b{font-weight:700}
.dk-vise{display:inline-block;margin-top:10px;font-size:14px;color:var(--zlato);text-decoration:underline}
@media (max-width:900px){
  .dk-skener{grid-template-columns:1fr;padding:18px}
  .dk-skener-tekst h2{font-size:22px;line-height:28px}
  .dk-skener-platno{max-width:420px;width:100%;margin:0 auto}
  .dk-ocitanja{grid-template-columns:1fr;padding:16px}
  .dk-mjere-sken .dk-mjera span{width:110px}
}
.dk-pitanje{border:1px solid var(--rub);padding:18px 20px;margin:0}
.dk-pitanje legend{font-size:17px;font-weight:500;padding:0 6px}
.dk-pitanje legend span{color:var(--zlato);font-weight:700;margin-right:4px}
.dk-odgovori{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:10px}
.dk-odgovor{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--rub);cursor:pointer;font-size:15px}
.dk-odgovor:hover{border-color:#9a9a9a}
.dk-odgovor input{accent-color:var(--zlato);width:18px;height:18px}
.dk-odgovor:has(input:checked){border-color:#000;box-shadow:inset 0 0 0 1px #000}
.dk-posalji{align-self:start;height:52px;padding:0 32px}

.dk-rezultat{display:grid;grid-template-columns:360px minmax(0,1fr);gap:30px;padding-bottom:40px;align-items:start}
.dk-profil{background:var(--podloga);padding:24px}
.dk-nad{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--siva)}
.dk-profil strong{display:block;font-size:28px;line-height:34px;font-weight:500;margin:4px 0 8px}
.dk-profil p{font-size:15px;color:var(--tekst);margin-bottom:16px}
.dk-mjera{display:flex;align-items:center;gap:10px;font-size:14px;margin-bottom:8px}
.dk-mjera span{width:110px;color:var(--tekst)}
.dk-mjera b{width:44px;text-align:right}
.dk-traka{flex:1;height:8px;background:#e6e6e6}
.dk-traka i{display:block;height:100%;background:var(--zlato)}
.dk-traka i.dobro{background:var(--zelena)}
.dk-traka i.srednje{background:#e8a33c}
.dk-traka i.lose{background:#cc3a3a}
.dk-profil .gumb{margin-top:14px}
.dk-rutina h2{font-size:24px;line-height:32px;font-weight:500;margin-bottom:14px}
.dk-dio{margin-bottom:22px}
.dk-kada{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--siva);margin-bottom:10px}
.dk-korak{display:grid;grid-template-columns:28px 70px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--rub)}
.dk-broj{width:28px;height:28px;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center;font-size:14px}
.dk-slika img{width:70px;height:80px;object-fit:contain}
.dk-tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.dk-korak-ime{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--siva)}
.dk-cijena{font-size:16px;font-weight:700}
.dk-sve{margin-top:16px}
.dk-sve .gumb{height:52px}

/* ------------------------------- nijanse --------------------------------- */
.nj-izbor{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:30px;padding-bottom:26px;align-items:start}
.nj-naslov{font-size:17px;font-weight:700;margin-bottom:12px}
.nj-tonovi{display:flex;flex-wrap:wrap;gap:12px}
.nj-ton{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;color:var(--tekst);width:96px;text-align:center}
.nj-ton i{width:72px;height:72px;border-radius:50%;background:var(--t);border:2px solid transparent}
.nj-ton.je-tu i{border-color:#000;box-shadow:0 0 0 2px #fff inset}
.nj-foto{margin-top:20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.nj-foto canvas{width:100%;max-width:280px;height:auto;background:var(--podloga);cursor:crosshair}
.nj-podtonovi{display:grid;gap:10px}
.nj-rezultat-naslov{font-size:24px;line-height:32px;font-weight:500;margin:10px 0 16px}

/* --------------------------------- box ----------------------------------- */
.box-mreza{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;padding-bottom:20px}
.box-uzorak{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--rub);cursor:pointer;background:#fff}
.box-uzorak input{position:absolute;opacity:0}
.box-uzorak.je-tu{border-color:#000;box-shadow:inset 0 0 0 1px #000}
.box-slika{display:grid;place-items:center;height:130px}
.box-slika img{max-height:130px;width:auto;object-fit:contain}
.box-ime{display:flex;flex-direction:column;font-size:14px;line-height:18px}
.box-ime b{font-weight:400;color:var(--siva)}
.box-kvacica{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:#000;color:#fff;
  display:grid;place-items:center;opacity:0;transition:opacity .15s}
.box-uzorak.je-tu .box-kvacica{opacity:1}
.box-uzorak input:disabled+.box-slika{opacity:.4}
.box-traka{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:#fff;border-top:1px solid var(--rub);padding:14px 0;font-size:16px}

/* ------------------------------- sastojci -------------------------------- */
.sk-obrazac{display:flex;flex-direction:column;gap:12px;align-items:flex-start;max-width:820px;padding-bottom:20px}
.sk-obrazac textarea{width:100%;border:1px solid var(--rub);padding:14px;font-size:15px;line-height:22px}
.sk-oznake{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;padding:10px 0 20px}
.sk-oznaka{border-left:4px solid var(--rub);background:var(--podloga);padding:12px 14px}
.sk-oznaka b{display:block;font-size:15px;margin-bottom:2px}
.sk-oznaka span{font-size:14px;color:var(--tekst)}
.sk-oznaka.dobro{border-left-color:var(--zelena)}
.sk-oznaka.pazi{border-left-color:#e8a33c}
.sk-oznaka.info{border-left-color:#6b8fd0}
.sk-izvorni{max-width:820px;font-size:14px;color:var(--siva);padding-bottom:30px}
.sk-izvorni p{margin-top:8px;line-height:22px}

/* ------------------------------- usporedba ------------------------------- */
.usp-omot{overflow-x:auto;padding-bottom:48px;scrollbar-width:thin}
.usp{border-collapse:separate;border-spacing:0;min-width:720px;width:100%;table-layout:fixed}
.usp th,.usp td{padding:13px 18px;border-bottom:1px solid var(--rub);font-size:14px;line-height:20px;vertical-align:middle;text-align:left}
.usp tbody th{width:190px;font-weight:400;color:var(--siva);background:#fff;position:sticky;left:0;z-index:1}
.usp tbody td{color:#000}
.usp tbody tr:not(.usp-skupina):hover td,.usp tbody tr:not(.usp-skupina):hover th{background:#faf8f4}
.usp-skupina th{padding:26px 18px 10px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--zlato);
  border-bottom:1px solid #000;background:#fff}
.usp.samo-razlike tr[data-isti]{display:none}
.usp-nema{color:#b5b5b5}
.usp-popust{display:inline-block;margin-left:6px;padding:1px 6px;background:#000;color:#fff;font-size:12px;font-weight:700}
.usp-da{display:inline-flex;align-items:center;gap:6px;color:#1d6b3a}
.usp-ne{color:var(--siva)}
.usp-nijansa{display:inline-block;width:30px;height:30px;border-radius:50%;background:var(--n);border:1px solid rgba(0,0,0,.12);vertical-align:middle}
.usp td a{display:inline-flex;align-items:center;gap:6px;text-decoration:underline;text-underline-offset:3px}
.usp thead th{vertical-align:top;border-bottom:0;padding:0 9px 18px;background:#fff}
.usp thead th.usp-kut{position:sticky;left:0;z-index:3;width:190px;padding:6px 18px 18px 0}
.usp-broj{font-size:14px;color:var(--siva);margin-bottom:14px}
.usp-razlike{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;margin-bottom:12px}
.usp-razlike input{width:18px;height:18px;accent-color:#000}
.usp-kut .veza-tekst{font-size:13px;color:var(--siva);text-decoration:underline}
.usp-kartica{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 14px 16px;border:1px solid var(--rub);height:100%;background:#fff}
.usp-x{position:absolute;top:6px;right:6px}
.usp-x button{width:32px;height:32px;display:grid;place-items:center;color:var(--siva)}
.usp-x button:hover{color:#000}
.usp-oznake{display:flex;flex-wrap:wrap;gap:4px;min-height:22px;padding-right:30px}
.usp-oznaka{padding:2px 7px;font-size:11px;font-weight:700;line-height:18px}
.usp-oznaka.cijena{background:#e7f3ec;color:#1d6b3a}
.usp-oznaka.ocjena{background:var(--zlato-blijedo);color:var(--zlato)}
.usp-slika{display:grid;place-items:center;height:180px;margin:4px 0 10px}
.usp-slika img{max-width:100%;max-height:180px;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.usp-marka{font-size:14px;font-weight:700;color:#000}
.usp-ime{font-size:14px;line-height:19px;color:var(--tekst);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.usp-ime:hover,.usp-marka:hover{text-decoration:underline}
.usp-cijena{margin:8px 0 12px;font-size:14px}
.usp-cijena b{font-size:20px;font-weight:700}
.usp-cijena s{color:var(--siva);margin-left:4px}
.usp-cijena span{color:var(--siva)}
.usp-kartica .gumb{height:42px;margin-top:auto;font-size:14px}
.usp-prazno{max-width:560px;margin:10px auto 60px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.usp-prazno-znak{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--zlato-blijedo);color:var(--zlato)}
.usp-prazno h2{font-size:22px;font-weight:500}
.usp-prazno p{font-size:15px;line-height:22px;color:var(--tekst)}
.usp-prazno p svg{vertical-align:-2px}
.usp-prazno-veze{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
.usp-prazno-veze .gumb{height:44px;padding:0 22px}
@media (max-width:760px){
  .usp{min-width:0;width:auto}
  .usp tbody th,.usp thead th.usp-kut{width:110px;min-width:110px;padding-left:0;padding-right:10px;font-size:13px}
  .usp thead th{width:170px;min-width:170px;padding:0 5px 14px}
  .usp th,.usp td{padding:11px 10px}
  .usp-slika{height:130px}.usp-slika img{max-height:130px}
  .usp-skupina th{padding-left:0}
}
.usp-traka{position:fixed;right:20px;bottom:20px;z-index:140;background:#000;color:#fff;padding:14px 20px;
  font-size:15px;font-weight:500;box-shadow:0 4px 20px rgba(0,0,0,.3)}

/* --------------------------- gumb usporedbe na kartici ------------------- */
.k-usporedi{position:absolute;top:40px;right:4px;width:34px;height:34px;display:grid;place-items:center;
  color:#000;opacity:0;transition:opacity .15s}
.kartica:hover .k-usporedi,.k-usporedi.je-aktivno{opacity:1}
.k-usporedi.je-aktivno{color:var(--zlato)}

@media (max-width:900px){
  .ogledalo,.dk-rezultat,.nj-izbor{grid-template-columns:1fr}
  .dk-korak{grid-template-columns:24px 56px minmax(0,1fr);row-gap:4px}
  .dk-cijena{grid-column:2/-1}
  .box-traka{flex-direction:column;align-items:stretch;gap:10px}
}

/* --------------------------- brza pretraga (Ctrl+K) ---------------------- */
.brza-pretraga{position:fixed;inset:0;z-index:260;background:rgba(0,0,0,.45);display:flex;justify-content:center;padding-top:12vh}
.bp-okvir{background:#fff;width:min(640px,92vw);max-height:70vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.bp-okvir input{height:56px;border:0;border-bottom:1px solid var(--rub);padding:0 20px;font-size:17px;outline:none}
.bp-nalazi{overflow:auto}
.bp-nalazi a{display:flex;flex-direction:column;gap:2px;padding:12px 20px;border-bottom:1px solid var(--rub);font-size:15px}
.bp-nalazi a:hover{background:var(--podloga)}
.bp-nalazi b{font-weight:500}
.bp-nalazi i{font-style:normal;font-size:13px;color:var(--siva)}
.bp-sve{font-weight:500}
.bp-savjet{padding:10px 20px;font-size:12px;color:var(--siva);border-top:1px solid var(--rub)}

@media (max-width:900px){
  .og-krug{width:44px;height:44px}
  .og-red{gap:12px}
  .og-ikona{width:42px;height:42px}
  .og-bocni{gap:10px;top:44%}
  .og-ladica{gap:9px;padding-top:10px}
  .og-podatak span{font-size:18px}
  .og-kupi .gumb{height:46px;padding:0 24px}
  .og-izgled-kupi .gumb{height:44px;font-size:14px}
}

/* --------------------------------- klub ---------------------------------- */
.klub-glava{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-end;
  padding:34px 32px;border-radius:12px;margin:18px 0 20px;color:#fff;background:#3a3a3a}
.klub-srebrna{background:#6b6b6b}
.klub-zlatna{background:#8a6414}
.klub-platinasta{background:#2c2c32}
.klub-oznaka{display:inline-block;padding:4px 12px;border-radius:14px;background:rgba(255,255,255,.22);
  font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.klub-glava h1{margin:10px 0 6px;font-size:32px;font-weight:500;color:#fff}
.klub-uvod{max-width:460px;font-size:15px;line-height:22px;opacity:.9}
.klub-brojke{display:flex;gap:28px}
.klub-brojke b{display:block;font-size:28px;font-weight:500;line-height:1.1}
.klub-brojke span{font-size:13px;opacity:.85}
.klub-traka{margin-bottom:26px}
.klub-crta{height:8px;border-radius:4px;background:#ececec;overflow:hidden;margin-bottom:8px}
.klub-crta i{display:block;height:100%;background:var(--zlato)}
.klub-razine{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:34px}
.klub-kartica{padding:22px;border:1px solid var(--rub);border-radius:10px;background:#fff}
.klub-kartica.je-tu{border-color:#000;box-shadow:0 0 0 1px #000}
.klub-kartica h2{font-size:20px;font-weight:500}
.klub-prag{font-size:13px;color:var(--siva);margin:4px 0 12px}
.klub-kartica ul{list-style:none;display:grid;gap:8px}
.klub-kartica li{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:19px;color:var(--tekst)}
.klub-kartica li svg{flex:none;margin-top:3px;color:var(--zlato)}
.klub-popust{margin-top:14px;font-size:22px;font-weight:500}
.klub-sloj{display:grid;grid-template-columns:1fr 360px;gap:30px;align-items:start;margin-bottom:40px}
.klub-nacini{list-style:none;display:grid;gap:12px;margin-bottom:24px}
.klub-nacini li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:14px 16px;
  border:1px solid var(--rub);border-radius:8px}
.klub-nacini b{display:flex;align-items:center;gap:8px;font-weight:500;min-width:190px}
.klub-nacini span{font-size:14px;color:var(--siva)}
.klub-upis label{display:block;font-size:14px;margin-bottom:8px;color:var(--siva)}

@media (max-width:900px){
  .klub-razine{grid-template-columns:1fr}
  .klub-sloj{grid-template-columns:1fr}
  .klub-glava{padding:24px 20px}
  .klub-glava h1{font-size:26px}
  .klub-brojke{gap:20px}
  .klub-brojke b{font-size:22px}
}

/* ------------------------------ mirisni DNK ------------------------------- */
.dnk-napredak{height:6px;border-radius:3px;background:#ececec;overflow:hidden;margin:0 0 26px}
.dnk-napredak i{display:block;height:100%;background:var(--zlato);transition:width .3s}
.dnk-pitanje{margin-bottom:26px;opacity:.45}
.dnk-pitanje.je-tu{opacity:1}
.dnk-pitanje h2{font-size:22px;font-weight:400;margin-bottom:14px}
.dnk-pitanje h2 span{color:var(--zlato);font-weight:500;margin-right:6px}
.dnk-odgovori{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.dnk-odgovor{display:flex;align-items:center;min-height:86px;padding:16px 18px;border:1px solid var(--rub);
  border-radius:10px;background:#fff;font-size:16px;line-height:21px;color:var(--tekst)}
.dnk-odgovor:hover{border-color:#000;transform:translateY(-1px)}
.dnk-odgovor.je-tu{border-color:#000;background:#000;color:#fff}

.dnk-nalaz{display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:center;
  padding:32px;border:1px solid var(--rub);border-radius:12px;margin-bottom:34px;background:#fff}
.dnk-oznaka{display:inline-block;padding:4px 12px;border-radius:14px;background:var(--zlato-blijedo);color:var(--zlato);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.dnk-nalaz h2{margin:12px 0 8px;font-size:34px;font-weight:300}
.dnk-opis{max-width:520px;font-size:16px;line-height:24px;color:var(--siva)}
.dnk-osi{display:grid;gap:9px;margin:22px 0}
.dnk-os{display:grid;grid-template-columns:130px 1fr 28px;align-items:center;gap:12px;font-size:14px}
.dnk-os i{display:block;height:8px;border-radius:4px;background:#ececec;overflow:hidden}
.dnk-os i b{display:block;height:100%;background:var(--zlato)}
.dnk-os em{font-style:normal;color:var(--siva);text-align:right}
.dnk-akcije{display:flex;gap:10px;flex-wrap:wrap}
.dnk-krug{display:grid;place-items:center}

@media (max-width:900px){
  .dnk-odgovori{grid-template-columns:1fr 1fr}
  .dnk-nalaz{grid-template-columns:1fr;padding:22px;gap:22px}
  .dnk-nalaz h2{font-size:26px}
  .dnk-os{grid-template-columns:104px 1fr 24px;font-size:13px}
  .dnk-pitanje h2{font-size:19px}
}

/* ------------------------------- poklon-bon ------------------------------- */
.bon-sloj{display:grid;grid-template-columns:1fr 340px;gap:36px;align-items:start;padding-bottom:40px}
.bon-iznosi{display:flex;flex-wrap:wrap;gap:10px}
.bon-iznos{min-width:92px;padding:14px 18px;text-align:center;border:1px solid var(--rub);border-radius:8px;
  font-size:17px;font-weight:500;color:var(--tekst);background:#fff}
.bon-iznos:hover{border-color:#000}
.bon-iznos.je-tu{background:#000;color:#fff;border-color:#000}
.bon-izgledi{display:flex;gap:12px;flex-wrap:wrap}
.bon-izgled{width:120px;height:72px;border-radius:8px;background:var(--poz);color:var(--slovo);
  display:grid;place-items:center;font-size:12px;text-align:center;padding:6px;border:2px solid transparent}
.bon-izgled.je-tu{border-color:#000;box-shadow:0 0 0 2px #fff inset}
.bon-prikaz{position:sticky;top:90px}
.bon-kartica{aspect-ratio:1.6;border-radius:14px;background:var(--poz);color:var(--slovo);
  padding:22px;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 10px 30px rgba(0,0,0,.18)}
.bon-znak{font-size:15px;letter-spacing:.22em;font-weight:700}
.bon-kartica b{font-size:40px;font-weight:300;line-height:1}
.bon-tekst{font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.8;margin-top:-8px}
.bon-kod{font-size:13px;letter-spacing:.1em;opacity:.7}
.bon-tocke{list-style:none;display:grid;gap:9px;margin-top:20px}
.bon-tocke li{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:19px;color:var(--siva)}
.bon-tocke svg{flex:none;margin-top:3px;color:var(--zlato)}
.bon-stanje{padding:28px 0 48px;border-top:1px solid var(--rub)}
.bon-nalaz{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;max-width:520px;margin-top:16px}
.bon-nalaz div{padding:14px 16px;border:1px solid var(--rub);display:grid;gap:4px}
.bon-nalaz span{font-size:12px;color:var(--siva)}
.bon-nalaz b{font-size:17px;font-weight:700}
.bon-nalaz p{grid-column:1 / -1}

@media (max-width:900px){
  .bon-sloj{grid-template-columns:1fr;gap:24px}
  .bon-prikaz{position:static;order:-1}
  .bon-iznos{flex:1;min-width:80px}
}
/* kampanjska fotografija ispod prijelaza na plohi kluba i bona */
.klub-glava.je-foto{background-size:cover;background-position:center;position:relative;isolation:isolate}
.klub-glava.je-foto::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:12px;
  background:linear-gradient(100deg,rgba(0,0,0,.78),rgba(0,0,0,.35))}
.klub-glava.je-foto > *{position:relative}
.bon-kartica.je-foto{background-image:linear-gradient(120deg,color-mix(in srgb,var(--poz) 82%,transparent),color-mix(in srgb,var(--poz) 55%,transparent)),var(--foto);
  background-size:cover;background-position:center}

/* ---------------------------- plan njege 28 dana -------------------------- */
.plan-sazetak{display:flex;flex-wrap:wrap;align-items:center;gap:26px;padding:22px 26px;margin-bottom:26px;
  border:1px solid var(--rub);border-radius:10px;background:#fafafa}
.plan-oznaka{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--siva)}
.plan-sazetak b{font-size:22px;font-weight:500}
.plan-sazetak form{margin-left:auto}
.plan-dijelovi{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:34px}
.plan-dio{padding:22px;border:1px solid var(--rub);border-radius:10px}
.plan-dio h2{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:500;margin-bottom:14px}
.plan-koraci{list-style:none;counter-reset:k;display:grid;gap:11px}
.plan-koraci li{counter-increment:k;display:grid;grid-template-columns:26px 1fr;gap:4px 10px;font-size:14px}
.plan-koraci li::before{content:counter(k);grid-row:span 2;width:26px;height:26px;border-radius:50%;
  background:#f1f1f1;display:grid;place-items:center;font-size:13px;color:var(--siva)}
.plan-koraci b{font-weight:500}
.plan-koraci a{grid-column:2;color:var(--siva);font-size:13px;line-height:17px}
.plan-koraci a:hover{color:var(--zlato);text-decoration:underline}
.plan-napomena{margin-top:14px;font-size:13px;line-height:18px;color:var(--siva)}
.plan-tjedan{margin-bottom:26px}
.plan-vrh h2{font-size:20px;font-weight:500}
.plan-vrh p{font-size:14px;color:var(--siva);margin:2px 0 12px}
.plan-mreza{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.plan-dan{padding:12px;border:1px solid var(--rub);border-radius:8px;background:#fff}
.plan-dan.je-aktivan{border-color:#f3c3d8;background:#fff7fa}
.plan-broj{display:block;font-size:12px;font-weight:500;color:var(--siva);margin-bottom:7px}
.plan-dan ul{list-style:none;display:grid;gap:4px}
.plan-dan li{font-size:12px;line-height:16px;color:var(--tekst)}
.plan-dan b{font-weight:500;color:var(--zlato)}
.plan-dodatak{color:var(--siva);font-style:italic}

@media (max-width:900px){
  .plan-dijelovi{grid-template-columns:1fr}
  .plan-mreza{grid-template-columns:repeat(2,1fr)}
  .plan-sazetak form{margin-left:0;width:100%}
  .plan-sazetak .gumb{width:100%}
}
.dk-akcije{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* VELURA — dodatno */

/* --------------------------- logotipi marki ------------------------------- */
/* Svaka marka piše se svojim slovima - inače pločice izgledaju kao popis. */
/* Na omotu od 1250px pločica je široka 195px, a sadržaj 171px. Na 24px
   duga imena (SHISEIDO s razmakom 6px, OLEHENRIKSEN) prelazila su rub, pa je
   osnovno pismo 21px; najduža imena smiju se prelomiti umjesto da iscure. */
.marka-plocica span{font-size:21px;overflow-wrap:anywhere;max-width:100%}
.marka-plocica[data-marka="dior"] span,
.marka-plocica[data-marka="lancome"] span,
.marka-plocica[data-marka="yves-saint-laurent"] span,
.marka-plocica[data-marka="gucci"] span,
.marka-plocica[data-marka="givenchy"] span,
.marka-plocica[data-marka="guerlain"] span,
.marka-plocica[data-marka="valentino"] span,
.marka-plocica[data-marka="tom-ford"] span,
.marka-plocica[data-marka="creed"] span,
.marka-plocica[data-marka="acqua-di-parma"] span{font-family:"Times New Roman",Georgia,serif;font-weight:400;letter-spacing:5px}
.marka-plocica[data-marka="dior"] span{letter-spacing:7px;font-size:27px}
.marka-plocica[data-marka="chanel"] span{font-family:"Times New Roman",Georgia,serif;font-weight:400;letter-spacing:9px}
.marka-plocica[data-marka="shiseido"] span{letter-spacing:6px;font-weight:400}
.marka-plocica[data-marka="versace"] span{font-family:"Times New Roman",Georgia,serif;font-weight:700;letter-spacing:3px}
.marka-plocica[data-marka="prada"] span{font-family:Georgia,serif;font-weight:400;letter-spacing:6px}
.marka-plocica[data-marka="hugo-boss"] span,
.marka-plocica[data-marka="calvin-klein"] span{letter-spacing:2px;font-weight:700}
.marka-plocica[data-marka="rabanne"] span,
.marka-plocica[data-marka="paco-rabanne"] span{letter-spacing:-1px;font-weight:700;text-transform:lowercase;font-size:28px}
.marka-plocica[data-marka="giorgio-armani"] span,
.marka-plocica[data-marka="armani"] span{letter-spacing:5px;font-weight:400}
.marka-plocica[data-marka="lattafa"] span{font-family:Georgia,serif;letter-spacing:1px}
.marka-plocica[data-marka="essence"] span,
.marka-plocica[data-marka="kiko-milano"] span{text-transform:lowercase;letter-spacing:0;font-weight:700}

/* --------------------------- dodatni dijelovi ----------------------------- */
/* Okvirni gumb je inače bijel (osnova.css); u podnožju stoji na crnom, pa
   tamo zadržava providnu plohu i bijeli rub. */
.nl-obrazac .gumb.okvir{background:transparent;border-color:#fff;color:#fff}
.nl-obrazac .gumb.okvir:hover{background:#fff;color:#000}
.popis-desno{flex:1;min-width:0}
.popis-opis{font-size:16px;color:var(--tekst)}
.sitno{font-size:13px;line-height:18px}
.veza-tekst{font-size:14px;color:var(--siva);text-decoration:underline;padding:0}
.veza-tekst:hover{color:#000}
.samo-mobitel{display:none}
.filtri-vrh{display:none}
.pod-kategorije{display:flex;flex-wrap:wrap;gap:10px;padding:6px 0 18px}
.pod-kategorije a{display:inline-flex;align-items:center;height:36px;padding:0 16px;background:var(--podloga);font-size:15px}
.pod-kategorije a:hover{background:#ebebeb}
.promo-plocica{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:26px;min-height:420px;
  background:#f1e6d2;color:#000;align-items:flex-start}
.pp-naslov{font-size:26px;line-height:30px;font-weight:700}
.pp-tekst{font-size:16px;line-height:22px}
.marka-hero{display:grid;place-items:center;height:210px;background:var(--podloga);margin-bottom:18px}
.marka-hero span{font-size:56px;font-weight:700;letter-spacing:3px;text-transform:uppercase}
/* Stranica brendova po notino.hr: naslov u sredini, traka slova, pa popis
   marki u pet stupaca. */
.marke-stranica{padding:16px 0 50px}
.marke-stranica h1{font-size:32px;line-height:45px;font-weight:300;text-align:center;margin-bottom:6px}
.abeceda{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 10px;padding:14px 0 4px}
.abeceda a{display:grid;place-items:center;min-width:20px;height:28px;font-size:14px;color:var(--tekst)}
.abeceda a:hover{color:var(--zlato);text-decoration:underline}
.slovo-blok{padding:6px 0}
.slovo-blok h2{font-size:28px;line-height:36px;font-weight:300;text-align:center;margin:34px 0 10px}
.slovo-blok h2::before,.slovo-blok h2::after{content:"";display:block;height:1px;background:var(--rub);margin:0 auto 10px;max-width:100%}
.slovo-blok h2::after{margin:10px auto 0}
/* pet CSS stupaca, razmak 4 px — izmjereno na njihovoj stranici */
.marke-popis{columns:5;column-gap:4px;padding-bottom:10px}
.marke-popis a{display:block;font-size:14px;line-height:21px;color:#404040;break-inside:avoid}
.marke-popis a:hover{color:var(--zlato);text-decoration:underline}
.marke-popis a:hover{text-decoration:underline}
.kategorije-mreza{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-bottom:36px}
.kat-blok h2{font-size:19px;margin-bottom:10px;border-bottom:1px solid var(--rub);padding-bottom:8px}
.kat-blok li{margin-bottom:7px}
.kat-blok a{font-size:15px;color:var(--tekst)}
.kat-blok a:hover{text-decoration:underline}
/* Padajući panel tražilice u dva stupca, kao na notino.hr: lijevo brendovi i
   kategorije, desno proizvodi sa sličicom. */
.sapt{position:absolute;top:100%;left:0;right:0;background:#fff;color:#000;border:1px solid var(--rub);
  box-shadow:0 12px 30px rgba(0,0,0,.14);z-index:120;display:grid;grid-template-columns:300px minmax(0,1fr);
  max-height:70vh;overflow:auto}
.sapt-lijevo{border-right:1px solid var(--rub);padding:14px 0}
.sapt-desno{padding:14px 0}
.sapt-naslov{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--siva);
  font-weight:500;padding:6px 18px 8px}
.sapt-skup + .sapt-skup{margin-top:10px;border-top:1px solid var(--rub);padding-top:8px}
.sapt-lijevo a{display:block;padding:7px 18px;font-size:14px;line-height:19px;color:var(--tekst)}
.sapt-lijevo a:hover{background:var(--podloga);color:var(--zlato)}
.sapt-proizvod{display:flex;gap:12px;align-items:center;padding:8px 18px}
.sapt-proizvod:hover{background:var(--podloga)}
.sapt img{width:40px;height:46px;object-fit:contain;mix-blend-mode:multiply;flex:none}
.sapt-proizvod span{display:flex;flex-direction:column;font-size:14px;line-height:19px}
.sapt-proizvod b{font-weight:700}
.sapt i{font-style:normal;font-size:12px;color:var(--siva)}
.sapt-sve{display:block;padding:12px 18px;font-size:13px;font-weight:500;text-decoration:underline}
.sapt-sve:hover{color:var(--zlato)}
.p-pdv{font-size:14px;color:var(--siva)}
.p-pdv b{color:#000}
.p-zaliha{display:flex;align-items:center;gap:6px;font-size:15px;color:var(--zelena)}
.p-ocjena{display:inline-block;margin-top:10px}
.k-srce-veliki{flex:0 0 56px!important;width:56px;padding:0}
.k-srce-veliki.je-aktivno svg{fill:var(--zlato);color:var(--zlato)}
.rec-sazetak{margin-bottom:14px}
.izbor-red{display:flex;flex-wrap:wrap;gap:10px}
/* Tekst ispod mreže kategorije — kao kod njih, uži stupac i prozračni razmaci. */
.seo-tekst{padding:26px 0 50px;max-width:840px}
.seo-tekst h2{font-size:24px;line-height:32px;font-weight:300;margin:30px 0 10px}
.seo-tekst h2:first-child{margin-top:0}
.seo-tekst h3{font-size:17px;line-height:24px;font-weight:500;margin:22px 0 6px}
.seo-tekst p{font-size:14px;line-height:23px;color:#404040;margin-bottom:10px}
.seo-tekst p b{font-weight:500;color:#000}
.popis-alati.dno{justify-content:center;padding-top:26px}
.popis-alati.dno .sort{display:none}
@media (max-width:900px){
  .samo-mobitel{display:inline-flex}
  .filtri-vrh{display:flex;justify-content:flex-end;padding-bottom:6px}
  .marke-popis,.kategorije-mreza{grid-template-columns:repeat(2,1fr)}
  .kat-hero{grid-template-columns:1fr;margin-bottom:14px}
  .kh-slika{min-height:150px;max-height:180px}
  .kh-tekst{padding:18px 16px 22px}
  .kh-tekst strong{font-size:24px;line-height:30px}
  .kat-stablo{padding-bottom:12px}
  .p-velicina{padding:10px 12px}
  .pv-cijene{flex-direction:column;gap:2px;align-items:flex-end}
  .p-kupi{flex-wrap:wrap}
  .p-kupi .gumb{flex:1 1 140px}
  .p-dostava-red{grid-template-columns:minmax(0,1fr) auto}
  .pk-ploha h2{font-size:19px}
  .p-tablica th{width:140px;font-size:14px}
  .promo-plocica{min-height:260px;padding:18px}
  .pp-naslov{font-size:20px;line-height:24px}
  .marka-hero{height:130px}
  .marka-hero span{font-size:32px}
}

/* ------------------------- stranica 404 po notino.hr ---------------------- */
.nema-stranice{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:40px;
  align-items:center;padding:40px 0 60px}
.nema-stranice h1{font-size:32px;line-height:45px;font-weight:300}
.nema-uvod{font-size:15px;line-height:22px;color:var(--siva);margin:10px 0 28px;max-width:520px}
.nema-skupina{margin-bottom:24px}
.nema-skupina h2{font-size:18px;font-weight:500;margin-bottom:10px}
.nema-veze{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 20px}
.nema-veze a{font-size:14px;line-height:22px;color:#404040}
.nema-veze a:hover{color:var(--zlato);text-decoration:underline}
.nema-kod{font-size:12px;color:var(--svijetla);margin-top:14px}
.nema-slika img{width:100%;height:auto;border-radius:4px}

@media (max-width:900px){
  .nema-stranice{grid-template-columns:1fr;gap:24px;padding:24px 0 40px}
  .nema-stranice h1{font-size:24px;line-height:32px}
  .nema-veze{grid-template-columns:1fr 1fr}
  .nema-slika{order:-1}
}

/* --------------------------- moji popisi (želje) -------------------------- */
.zelje-stranica{padding:18px 0 50px}
.zelje-stranica h1{font-size:32px;line-height:45px;font-weight:300}
.zelje-uvod{font-size:14px;line-height:20px;color:var(--siva);margin:4px 0 20px}
.zelje-obavijest{display:flex;gap:12px;padding:16px 18px;background:var(--podloga);border-radius:4px}
.zelje-obavijest svg{color:var(--siva);flex:none;margin-top:2px}
.zelje-obavijest b{font-size:14px;font-weight:500}
.zelje-obavijest p{font-size:13px;line-height:18px;color:var(--siva);margin-top:4px}
.zelje-obavijest a{text-decoration:underline;color:inherit}
.zelje-radnje{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.zelje-stavka{display:flex;flex-direction:column;min-width:0}
.zelje-stavka .kartica{flex:1}
.zelje-premjesti{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 0 4px;border-top:1px solid var(--rub);margin-top:6px}
.zelje-premjesti label{display:flex;align-items:center;gap:6px;flex:1 1 100%;min-width:0}
.zp-natpis{font-size:12px;color:var(--siva)}
.zelje-premjesti select{flex:1;min-width:0;height:32px;border:1px solid var(--rub-polja);padding:0 8px;font-size:13px;background:#fff}
.zelje-premjesti.ima-js .veza-tekst{display:none}
.zelje-makni{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--siva)}
.zelje-makni:hover{color:#000}
.zelje-popis-glava{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:22px 0 4px}
.zelje-popis-glava h2{font-size:22px;font-weight:500}
.zelje-popis-glava .veza-tekst{font-size:13px;color:var(--siva);text-decoration:underline}
.zelje-radnje .gumb{height:44px;padding:0 20px;gap:8px}
.zelje-dijeli{margin-top:14px;padding:16px 18px;border:1px solid var(--zlato-rub);background:var(--zlato-blijedo)}
.zelje-dijeli p{font-size:13px;line-height:18px;margin-bottom:4px}
.zelje-dijeli .kupon-red{max-width:560px;margin-top:8px}
.zelje-dijeli input{background:#fff}
@media (max-width:600px){.zelje-radnje .gumb{flex:1}}
.zelje-vrh{display:flex;justify-content:flex-end;margin:18px 0 10px}
.zelje-novi{display:flex;gap:8px;align-items:center}
.zelje-novi input{height:36px;padding:0 12px;border:1px solid var(--rub);font-size:13px;width:200px}
.zelje-novi .veza-tekst{font-size:13px;font-weight:500;white-space:nowrap}
.zelje-popisi{display:grid;gap:10px;margin-bottom:26px}
.zelje-kartica{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;border:1px solid var(--rub);border-radius:4px;color:var(--tekst)}
.zelje-kartica b{font-size:15px;font-weight:500}
.zelje-kartica span{font-size:13px;color:var(--siva)}
.zelje-kartica:hover{border-color:#000}
.zelje-kartica.je-tu{border-color:#000;box-shadow:inset 0 0 0 1px #000}
.zelje-mreza{margin-top:6px}

@media (max-width:820px){
  .zelje-stranica h1{font-size:24px;line-height:32px}
  .zelje-novi{width:100%}
  .zelje-novi input{flex:1;width:auto}
  .zelje-vrh{justify-content:stretch}
}

/* ------------------------------ blog po notinu ---------------------------- */
.blog-stranica{padding:16px 0 50px}
.blog-naslov{font-size:22px;line-height:30px;font-weight:400;text-align:center;margin-bottom:14px}
.blog-rubrike{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;padding-bottom:22px}
.blog-rubrike a{font-size:14px;color:var(--siva);padding:4px 0;border-bottom:2px solid transparent}
.blog-rubrike a:hover{color:#000}
.blog-rubrike a.je-tu{color:#000;border-bottom-color:#000;font-weight:500}

.blog-vodeci{position:relative;display:block;margin-bottom:28px;overflow:hidden}
.blog-vodeci img{width:100%;height:420px;object-fit:cover;display:block}
.bv-ploha{position:absolute;right:0;top:0;bottom:0;width:min(42%,520px);background:#000;color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:38px}
.bv-ploha strong{font-size:30px;line-height:38px;font-weight:400}
.bv-meta{font-size:12px;letter-spacing:.04em;opacity:.75}
.blog-vodeci:hover .bv-ploha strong{text-decoration:underline}

.clanak-tema{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--zlato);font-weight:500;margin-bottom:6px}

@media (max-width:900px){
  .blog-vodeci img{height:240px}
  .bv-ploha{position:static;width:auto;padding:20px}
  .bv-ploha strong{font-size:20px;line-height:27px}
  .blog-rubrike{gap:4px 16px}
}

/* --------------------- inspiracija po notino.hr --------------------------- */
.insp-stranica{padding:18px 0 50px}
.insp-stranica h1{font-size:32px;line-height:45px;font-weight:300;text-align:center;margin-bottom:8px}
.insp-skupina{margin-top:30px}
.insp-skupina h2{font-size:22px;line-height:30px;font-weight:400;text-align:center;margin-bottom:18px}
.insp-mreza{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:860px;margin-inline:auto}
.insp-mreza.tri{grid-template-columns:repeat(3,1fr);max-width:1100px}
.insp-kartica{border:1px solid var(--rub);border-radius:4px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column}
.insp-slika{display:block;line-height:0;background:var(--podloga)}
.insp-slika img{width:100%;height:190px;object-fit:cover}
.insp-prazna{display:grid;place-items:center;height:190px;color:var(--svijetla)}
.insp-telo{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.insp-telo h3{font-size:18px;font-weight:500}
.insp-telo p{font-size:14px;line-height:20px;color:var(--siva)}
.insp-telo .gumb{margin-top:auto;align-self:flex-start;height:40px;font-size:13px;border-radius:2px}

@media (max-width:900px){
  .insp-stranica h1{font-size:24px;line-height:32px}
  .insp-mreza,.insp-mreza.tri{grid-template-columns:1fr}
  .insp-slika img,.insp-prazna{height:160px}
}

/* ------------------- prave slike logotipa marki --------------------------- */
/* Logotipe smo prenijeli iz kataloga dobavljača; gdje ih nema, ostaje ispis
   imena kao dosad. */
/* Redak i stupac mreže moraju biti zadani (minmax 0), inače max-height:100%
   nema od čega računati i logotip izleti iz pločice. */
.marka-plocica.je-logo{background:#fff;border:1px solid var(--rub);padding:10px 14px;
  grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);overflow:hidden}
.marka-plocica.je-logo img{max-width:100%;max-height:100%;width:auto;height:auto;min-height:0;
  object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.1);
  transition:filter .2s}
.marka-plocica.je-logo:hover{border-color:#000}
.marka-plocica.je-logo:hover img{filter:none}

/* VELURA: moj račun, prijava i registracija, praćenje narudžbe */

.polja-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.polje small{font-size:12px;color:var(--siva);line-height:16px}
.polje input:disabled{background:var(--podloga);color:var(--siva)}
.kvacica-red{display:flex;align-items:center;gap:10px;font-size:14px;line-height:20px;cursor:pointer}
.kvacica-red input{width:18px;height:18px;accent-color:#000;flex:none}
.polje-skupina{border:0;padding:0;margin:0;display:grid;gap:8px}
.polje-skupina legend{font-size:14px;color:var(--tekst);margin-bottom:6px;padding:0}
.poruka.uspjeh{background:#eef7f1}

/* ------------------------------ prijava ---------------------------------- */
.racun-ulaz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:10px 0 50px;max-width:1035px}
.ulaz-kartica{border:1px solid var(--rub);padding:28px}
.ulaz-kartica h1,.ulaz-naslov{font-size:24px;line-height:32px;font-weight:400;margin-bottom:18px}
.ulaz-kartica .obrazac{max-width:none}
.ulaz-zaboravljena{font-size:14px;text-decoration:underline;justify-self:start}
.ulaz-prednosti{display:grid;gap:8px;margin-bottom:18px;font-size:14px;color:var(--tekst)}
.ulaz-prednosti li{display:flex;align-items:center;gap:10px}
.ulaz-prednosti svg{color:var(--zlato);flex:none}

/* ------------------------------ račun ------------------------------------ */
.racun{display:grid;grid-template-columns:270px minmax(0,1fr);gap:40px;padding:10px 0 50px;align-items:start}
.racun-izbornik{position:sticky;top:130px;border:1px solid var(--rub)}
.racun-tko{display:flex;align-items:center;gap:12px;padding:18px;border-bottom:1px solid var(--rub)}
.racun-tko div{display:flex;flex-direction:column;min-width:0}
.racun-tko b{font-weight:500;font-size:15px}
.racun-tko span{font-size:13px;color:var(--siva);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.racun-inicijali{flex:none;width:44px;height:44px;border-radius:50%;background:#111;color:var(--zlato-svijetlo);
  display:grid;place-items:center;font-weight:700;font-size:18px}
.racun-izbornik nav{display:flex;flex-direction:column;padding:8px 0}
.racun-izbornik nav a{display:flex;align-items:center;gap:12px;padding:11px 18px;font-size:15px;color:var(--tekst);border-left:3px solid transparent}
.racun-izbornik nav a:hover{background:var(--podloga);color:#000}
.racun-izbornik nav a[aria-current="page"]{border-left-color:var(--zlato-svijetlo);color:#000;font-weight:500;background:#fcf8ef}
.racun-izbornik svg{flex:none;color:var(--siva)}
.racun-odjava{width:100%;text-align:left;padding:14px 18px;border-top:1px solid var(--rub);font-size:14px;color:var(--siva)}
.racun-odjava:hover{color:#000;text-decoration:underline}
.racun-sadrzaj h1{font-size:28px;line-height:36px;font-weight:300;margin-bottom:20px}
.racun-podnaslov{font-size:18px;font-weight:500;margin:30px 0 12px}
.racun-uvod{color:var(--tekst);font-size:15px;line-height:22px;margin-bottom:18px;max-width:640px}
.racun-nad{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--zlato);margin-bottom:4px}
.racun-prazno{padding:24px;background:var(--podloga);color:var(--tekst)}
.racun-prazno a{text-decoration:underline;color:#000}
.racun-obrazac{max-width:620px}

.racun-plocice{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.racun-plocica{border:1px solid var(--rub);padding:18px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
.racun-plocica:hover{border-color:#000}
.racun-plocica svg{grid-row:1/3;color:var(--zlato)}
.racun-plocica b{font-size:24px;font-weight:700;line-height:28px}
.racun-plocica span{font-size:13px;color:var(--siva)}

.racun-klub{margin-top:14px;padding:20px;background:#111;color:#fff;display:grid;gap:14px}
.racun-klub b{font-size:20px;font-weight:500}
.racun-klub p{font-size:14px;color:#d6d6d6;margin-top:4px}
.racun-klub .racun-nad{color:var(--zlato-svijetlo)}
.racun-traka{height:6px;background:#333}
.racun-traka i{display:block;height:100%;background:var(--zlato-svijetlo)}

.racun-narudzba{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:16px;align-items:center;border:1px solid var(--rub);padding:16px}
.racun-narudzba div{display:flex;flex-direction:column}
.racun-narudzba span{font-size:13px;color:var(--siva)}
.racun-iznos{font-size:16px}
.stanje{display:inline-block;padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500;background:var(--podloga);color:#000;white-space:nowrap}
.stanje-zaprimljena{background:#f8f1e1;color:#6e5010}
.stanje-poslana,.stanje-obrada{background:#e9f0fb;color:#1f4f8f}
.stanje-isporucena{background:#eef7f1;color:#187c18}
.stanje-otkazana{background:#fdeef0;color:#a3102a}

.racun-tablica{border:1px solid var(--rub)}
.rt-red{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr auto;gap:12px;align-items:center;padding:14px 16px;border-top:1px solid var(--rub);font-size:14px}
.rt-red:first-child{border-top:0}
.rt-glava{background:var(--podloga);font-size:13px;color:var(--siva)}
.rt-red a{text-decoration:underline}

.racun-meta{display:flex;align-items:center;gap:10px;color:var(--siva);font-size:14px;margin-bottom:16px}
.racun-stavke{display:grid;border-top:1px solid var(--rub)}
.racun-stavka{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rub)}
.racun-stavka img{width:64px;height:64px;object-fit:contain;mix-blend-mode:multiply}
.racun-bez-slike{width:64px;height:64px;background:var(--podloga)}
.racun-stavka div{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:14px}
.racun-stavka a:hover{text-decoration:underline}
.racun-stavka span{font-size:13px;color:var(--siva)}
.racun-stavka b{font-weight:500}
.racun-tekst{font-size:14px;color:var(--tekst);line-height:20px;margin-top:4px}
.racun-pojeftinilo{color:var(--zelena);font-weight:500}
.racun-makni{width:36px;height:36px;display:grid;place-items:center;color:var(--siva)}
.racun-makni:hover{color:#000}
.racun-zbroj{display:flex;justify-content:space-between;padding:10px 0;font-size:15px}
.racun-zbroj.popust b{color:#1d6b3a}
.racun-zbroj.ukupno{border-top:1px solid #000;font-size:18px}
.racun-akcije{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.racun-akcije form{display:contents}

.racun-adrese{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.racun-adresa{position:relative;border:1px solid var(--rub);padding:18px;font-size:14px;line-height:21px}
.racun-adresa.je-zadana{border-color:#000}
.racun-adresa b{font-weight:500;display:block;margin-bottom:6px}
.racun-adresa p{color:var(--tekst)}
.racun-oznaka{position:absolute;top:12px;right:12px;font-size:11px;background:var(--zlato-svijetlo);color:#111;padding:2px 8px;border-radius:10px;font-weight:500}
.racun-adresa-akcije{display:flex;gap:14px;margin-top:12px}
.racun-adresa-akcije button{font-size:13px;text-decoration:underline;color:var(--tekst)}

.racun-profil{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.racun-kartica{border:1px solid var(--rub);padding:20px;display:flex;flex-direction:column;gap:8px}
.racun-veliko{font-size:22px;font-weight:500;line-height:28px}

.racun-mob-izbornik{display:none}

/* ------------------------------ blagajna ---------------------------------- */
.kup-racun{max-width:520px;margin:0 auto 14px;padding:12px 16px;background:#fcf8ef;border:1px solid var(--zlato-rub);font-size:14px}
.kup-racun a{text-decoration:underline;font-weight:500}

/* ------------------------------ praćenje ---------------------------------- */
.pracenje-crta{display:grid;grid-template-columns:repeat(4,1fr);margin:20px 0 10px;padding:0;list-style:none;counter-reset:k}
.pracenje-crta li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;color:var(--siva);text-align:center}
.pracenje-crta li::before{content:"";position:absolute;top:9px;left:-50%;width:100%;height:2px;background:var(--rub);z-index:0}
.pracenje-crta li:first-child::before{display:none}
.pracenje-crta i{position:relative;z-index:1;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--rub)}
.pracenje-crta li.gotovo i{background:#111;border-color:#111}
.pracenje-crta li.gotovo::before,.pracenje-crta li.sada::before{background:#111}
.pracenje-crta li.sada i{background:var(--zlato-svijetlo);border-color:#111}
.pracenje-crta li.sada span{color:#000;font-weight:500}

@media (max-width:900px){
  .racun-ulaz{grid-template-columns:1fr}
  .ulaz-kartica{padding:20px 16px}
  .racun{grid-template-columns:1fr;gap:14px}
  .racun-izbornik{display:none}
  .racun-sadrzaj h1{font-size:24px;line-height:30px}
  .racun-plocice{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .racun-plocica{grid-template-columns:1fr;padding:12px;text-align:center;justify-items:center}
  .racun-plocica svg{grid-row:auto}
  .racun-plocica b{font-size:20px}
  .racun-mob-izbornik{display:flex;flex-direction:column;margin-top:22px;border-top:1px solid var(--rub)}
  .racun-mob-izbornik a{display:flex;align-items:center;gap:12px;padding:15px 2px;border-bottom:1px solid var(--rub);font-size:15px}
  .racun-mob-izbornik a svg:last-child{margin-left:auto;color:var(--siva)}
  .racun-narudzba{grid-template-columns:1fr auto;row-gap:10px}
  .racun-narudzba .gumb{grid-column:1/-1}
  .rt-glava{display:none}
  .rt-red{grid-template-columns:1fr auto;row-gap:6px}
  .polja-2{grid-template-columns:1fr}
}
.racun-obrazac .gumb{justify-self:start;min-width:200px}
.racun-povrat{display:flex;align-items:center;gap:8px;font-size:14px}

/* omiljeni brendovi (isti popis kao u aplikaciji) */
.racun-marke{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 6px}
.racun-marka{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--rub);padding:4px 6px 4px 12px;font-size:14px}
.racun-marka a{color:inherit;text-decoration:none}
.racun-marka button{border:0;background:none;padding:4px;cursor:pointer;display:inline-flex;color:inherit}
.racun-dodaj-marku{display:flex;gap:8px;margin-top:8px}
.racun-dodaj-marku input{flex:1;min-width:0;height:44px;padding:0 12px;border:1px solid var(--rub);font:inherit}
.racun-napomena{margin:0 0 14px;font-size:13px;line-height:19px;color:#6b6b6b}

/* VELURA: mini košarica, galerija preko cijelog zaslona, obavijest o
   kolačićima, instalacija aplikacije i ostale male funkcije. */

/* ------------------------------ mini košarica ---------------------------- */
.mk{width:min(560px,calc(100% - 24px));max-height:calc(100dvh - 40px);padding:0;border:0;border-radius:6px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:auto;color:#000}
.mk::backdrop{background:rgba(0,0,0,.45)}
.mk-glava{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--rub)}
.mk-glava p{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:500}
.mk-kvacica{width:24px;height:24px;border-radius:50%;background:var(--zelena);position:relative;flex:none}
.mk-kvacica::after{content:"";position:absolute;left:8px;top:5px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.mk-x{width:40px;height:40px;display:grid;place-items:center;margin-right:-8px}
.mk-stavka{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 18px}
.mk-stavka img{width:72px;height:72px;object-fit:contain;mix-blend-mode:multiply}
.mk-stavka div{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:14px}
.mk-stavka b{font-weight:500}
.mk-stavka small{color:var(--siva);font-size:13px}
.mk-stavka strong{font-size:16px}
.mk-dostava{margin:0 18px;padding:12px 14px;background:var(--podloga);font-size:14px}
.mk-dostava.je-besplatna{background:#eef7f1;color:var(--zelena)}
.mk-traka{height:4px;background:#e1e1e1;margin-top:8px}
.mk-traka i{display:block;height:100%;background:#000}
.mk-dostava.je-besplatna .mk-traka i{background:var(--zelena)}
.mk-gumbi{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 18px}
.mk-gumbi .gumb{height:48px;padding:0 12px}
.mk-prijedlozi{border-top:1px solid var(--rub);padding:16px 18px 18px}
.mk-prijedlozi > p{font-size:15px;font-weight:500;margin-bottom:12px}
.mk-mreza{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mk-prijedlog{display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:16px}
.mk-prijedlog img{width:100%;height:96px;object-fit:contain;mix-blend-mode:multiply}
.mk-ime{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:48px}
.mk-ime b{font-weight:500}
.mk-ime:hover{text-decoration:underline}
.mk-cijena{font-weight:700;font-size:13px}
.mk-dodaj{width:100%;height:32px;border:1px solid #000;font-size:12px;font-weight:500;margin-top:2px}
.mk-dodaj:hover{background:#000;color:#fff}
.je-ceka{opacity:.6;cursor:progress}

/* ------------------------------ galerija --------------------------------- */
.ima-povecanje{overflow:hidden;cursor:zoom-in}
.ima-povecanje #p-slika{transition:transform .25s ease}
.ima-povecanje:hover #p-slika{transform:scale(1.9)}
#p-slika[role="button"]{cursor:zoom-in}
.pogled{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#fff}
.pogled::backdrop{background:#fff}
.pogled-slika{position:absolute;inset:60px 70px;width:calc(100% - 140px);height:calc(100% - 120px);object-fit:contain}
.pogled-x{position:absolute;top:14px;right:14px;width:48px;height:48px;display:grid;place-items:center;z-index:2}
.pogled-str{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;display:grid;place-items:center;
  border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.pogled-str.lijevo{left:14px}.pogled-str.desno{right:14px}
.pogled-broj{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:14px;color:var(--siva)}

@media (max-width:760px){
  .mk{margin:auto 0 0;width:100%;max-width:none;border-radius:14px 14px 0 0;max-height:88dvh}
  .mk-gumbi{grid-template-columns:1fr;padding-bottom:calc(16px + var(--sab))}
  .mk-gumbi .gumb.crni{order:-1}
  .mk-mreza{grid-template-columns:repeat(4,110px);overflow-x:auto;scrollbar-width:none}
  .mk-mreza::-webkit-scrollbar{display:none}
  .pogled-slika{inset:56px 10px;width:calc(100% - 20px);height:calc(100% - 112px)}
  .pogled-str{top:auto;bottom:10px;transform:none;width:44px;height:44px}
}

/* ------------------------------ kolačići --------------------------------- */
.kolacici{position:fixed;left:16px;right:16px;bottom:16px;z-index:250;max-width:760px;margin:0 auto;
  display:flex;align-items:center;gap:18px;padding:16px 18px;background:#111;color:#fff;border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);font-size:14px;line-height:20px}
.kolacici[hidden]{display:none}
.kolacici a{color:var(--zlato-svijetlo);text-decoration:underline}
.kolacici .gumb{flex:none;background:var(--zlato-svijetlo);color:#111;height:40px}
.kolacici .gumb:hover{background:#b8913d}
@media (max-width:760px){
  .kolacici{flex-direction:column;align-items:stretch;left:10px;right:10px;bottom:calc(10px + var(--sab));gap:12px}
}

/* ------------------------------- pretraga -------------------------------- */
.sapt .sapt-pocetno,.sapt .sapt-nista{grid-column:1/-1}
.sapt-pocetno{padding:14px 18px;display:grid;gap:12px}
.sapt-pocetno .sapt-skup + .sapt-skup{border-top:0;margin-top:0;padding-top:0}
.sapt-pocetno .sapt-naslov{display:flex;justify-content:space-between;align-items:center;padding:0;margin-bottom:8px}
.trazilica .sapt-brisi{position:static;width:auto;height:auto;display:inline;font-size:12px;text-transform:none;letter-spacing:0;text-decoration:underline;color:var(--siva)}
.sapt-cipovi{display:flex;flex-wrap:wrap;gap:8px}
.sapt-cipovi a{padding:7px 12px;border:1px solid var(--rub);border-radius:16px;font-size:13px;color:var(--tekst)}
.sapt-cipovi a:hover,.sapt-cipovi a:focus-visible{border-color:#000;color:#000}
.sapt-nista{padding:18px;font-size:14px;color:var(--tekst)}
.sapt a:focus-visible{outline:2px solid var(--zlato-svijetlo);outline-offset:-2px;background:var(--podloga)}
.trazilica.ima-glas input{padding-right:64px}
.trazilica .trazi-glas{position:absolute;right:32px;top:0;bottom:0;width:32px;display:grid;place-items:center;color:#000}
.trazi-glas.slusa{color:#c0392b;animation:glas-kuca 1s ease-in-out infinite}
@keyframes glas-kuca{50%{opacity:.35}}
@media (max-width:760px){
  .trazilica .trazi-glas{right:50px;top:19px;bottom:auto;height:30px;transform:translateY(-50%)}
  .trazilica.ima-glas input{padding-right:70px}
}

/* ------------------------------ recenzije -------------------------------- */
.rec-pregled{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:center;padding:6px 0 18px;border-bottom:1px solid var(--rub)}
.rec-prosjek{display:flex;flex-direction:column;gap:6px}
.rec-prosjek > b{font-size:44px;line-height:48px;font-weight:300}
.rec-prosjek > span{font-size:13px;color:var(--siva)}
.rec-napisi{height:40px;margin-top:8px;padding:0 18px;font-size:14px;align-self:flex-start}
.rec-prazno{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding:18px 0}
.rec-prazno p{font-size:15px;color:var(--tekst)}
.rec-prazno .gumb{height:44px;padding:0 22px}
.rec-hvala{display:flex;align-items:center;gap:10px;margin:20px 0 0;padding:14px 16px;background:#f1f8f3;border:1px solid #b9dcc4;color:#1d6b3a;font-size:14px;line-height:20px}
.rec-hvala svg{flex:none}
#napisi-recenziju{scroll-margin-top:130px}
.rec-raspodjela{display:grid;gap:6px;max-width:420px}
.rec-red{display:grid;grid-template-columns:44px minmax(0,1fr) 34px;gap:10px;align-items:center;font-size:13px;color:var(--tekst);text-align:left}
.rec-red span:first-child{display:flex;align-items:center;gap:3px}
.rec-red svg{width:12px;height:12px}
.rec-red i{height:8px;background:#ececec;display:block}
.rec-red i b{display:block;height:100%;background:#000}
.rec-red:hover:not([disabled]) span{text-decoration:underline}
.rec-red[disabled]{opacity:.5;cursor:default}
.rec-alati{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px 0}
.rec-cipovi{display:flex;flex-wrap:wrap;gap:8px}
.rec-cipovi button{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border:1px solid var(--rub);border-radius:16px;font-size:13px}
.rec-cipovi svg{width:12px;height:12px}
.rec-cipovi button[aria-pressed="true"]{background:#000;color:#fff;border-color:#000}
.rec-poredak{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--siva)}
.rec-poredak select{height:36px;border:1px solid var(--rub);padding:0 10px;font:inherit;color:#000;background:#fff}
.rec-naslov{font-weight:500;margin:6px 0 2px}
.rec-provjereno{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--zelena)}
.rec-korisno{margin-top:8px}
.rec-korisno button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--rub);border-radius:15px;font-size:12px;color:var(--tekst)}
.rec-korisno button:hover{border-color:#000;color:#000}
.rec-korisno button[aria-pressed="true"]{background:#f8f1e1;border-color:var(--zlato-svijetlo);color:#000}

/* ------------------------------ pitanja ---------------------------------- */
.pit-uvod{color:var(--tekst);font-size:15px;line-height:22px;margin-bottom:14px}
.pit-obrazac{display:grid;gap:10px;padding:16px;background:var(--podloga);margin-bottom:18px}
.pit-red{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.pit-red label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--tekst);flex:1;min-width:180px}
.pit-red input{height:44px;border:1px solid var(--rub-polja);padding:0 12px;font:inherit;background:#fff}
.pit-popis{display:grid}
.pitanje{padding:16px 0;border-top:1px solid var(--rub)}
.pit-p{font-size:15px;line-height:22px}
.pit-tko{font-size:12px;color:var(--siva);margin-top:3px}
.odgovor{margin:10px 0 0 18px;padding-left:12px;border-left:2px solid var(--rub);font-size:14px;line-height:21px}
.odgovor.je-trgovina{border-left-color:var(--zlato-svijetlo)}
.pit-odgovori{margin:10px 0 0 18px}
.pit-odgovori summary{cursor:pointer;font-size:13px;text-decoration:underline;color:var(--tekst);width:max-content}
.pit-odgovori form{display:grid;gap:10px;margin-top:10px}
@media (max-width:760px){
  .rec-pregled{grid-template-columns:1fr;gap:14px}
  .rec-prosjek{flex-direction:row;align-items:center;flex-wrap:wrap}
}
.pit-obrazac .rec-tekst,.pit-odgovori .rec-tekst{display:block;margin:0;font-size:13px;color:var(--siva)}
.pit-obrazac textarea,.pit-odgovori textarea{display:block;width:100%;margin-top:4px;padding:10px 12px;border:1px solid var(--rub);
  border-radius:4px;font:400 15px/1.4 Roboto,Arial,sans-serif;background:#fff;resize:vertical}
.pit-red .gumb{height:44px}

/* --------------------------- radnje na proizvodu -------------------------- */
.p-radnje{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0 4px}
.p-radnje button{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--tekst);padding:6px 0}
.p-radnje button:hover{color:#000;text-decoration:underline}
.p-radnje button.je-aktivno{color:var(--zlato)}
.p-prati{border:1px solid var(--rub);padding:14px;margin:8px 0 14px;background:#fcf8ef}
.p-prati .javi-red{display:flex;gap:8px;margin-top:8px}
.p-prati input[type=email]{flex:1;height:44px;border:1px solid var(--rub-polja);padding:0 12px;font:inherit}
.p-prati .gumb{height:44px}

/* obavijest (kratka poruka na dnu) */
.obavijest{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:300;background:#111;color:#fff;
  padding:12px 18px;border-radius:6px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  max-width:calc(100% - 32px)}
.obavijest.je-tu{opacity:1;transform:translate(-50%,0)}

/* na vrh */
.na-vrh{position:fixed;right:18px;bottom:24px;z-index:130;width:44px;height:44px;border-radius:50%;background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.18);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .2s}
.na-vrh.je-tu{opacity:1;pointer-events:auto}
.na-vrh:hover{background:#111;color:#fff}
body.traka-vani .na-vrh{bottom:96px}
.str-ogledalo .na-vrh{display:none}
@media (max-width:760px){ .na-vrh{right:12px;bottom:calc(16px + var(--sab))} }

/* ------------------------------- kontakt ---------------------------------- */
.kontakt-sloj{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start;padding-bottom:48px}
.kontakt-obrazac{max-width:none}
.kontakt-obrazac textarea{height:150px}
.kontakt-obrazac .gumb{justify-self:start;height:48px;padding:0 30px}
.kontakt-obrazac .kvacica a{text-decoration:underline}
.kontakt-zamka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kontakt-hvala{padding:18px 20px;margin-bottom:20px;border:1px solid #b9dcc4;background:#f1f8f3}
.kontakt-hvala b{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:#1d6b3a}
.kontakt-hvala p{margin:8px 0 0;font-size:14px;line-height:21px}
.kontakt-hvala .gumb{margin-top:6px}
.kontakt-bok{display:grid;gap:10px}
.kontakt-kartica{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--rub)}
.kontakt-kartica svg{flex:none;color:var(--zlato);margin-top:2px}
.kontakt-kartica div{display:grid;gap:3px}
.kontakt-kartica b{font-size:15px;font-weight:700}
.kontakt-kartica span{font-size:13px;color:var(--siva)}
.kontakt-bok h2{font-size:16px;font-weight:700;margin:16px 0 2px}
.kontakt-veze{list-style:none;display:grid;border-top:1px solid var(--rub)}
.kontakt-veze a{display:flex;align-items:center;gap:10px;padding:12px 2px;border-bottom:1px solid var(--rub);font-size:14px}
.kontakt-veze a:hover{text-decoration:underline}
.kontakt-veze svg{color:var(--siva)}
@media (max-width:900px){ .kontakt-sloj{grid-template-columns:1fr;gap:28px} }

/* -------------------------------- povrat ---------------------------------- */
.povrat .obrazac{max-width:640px}
.povrat .kos-naslov{font-size:18px;margin:14px 0 0}
.povrat-meta{font-size:15px}
.povrat-prijasnji{padding:12px 16px;background:var(--podloga);margin-bottom:12px}
.povrat-prijasnji p{display:flex;align-items:center;gap:8px;margin:0;font-size:14px}
.povrat-stavke{display:grid;border-top:1px solid var(--rub)}
.povrat-stavka{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 2px;
  border-bottom:1px solid var(--rub);font-size:14px;line-height:20px;cursor:pointer}
.povrat-stavka input{width:18px;height:18px;accent-color:#000}
.povrat-stavka small{display:block;color:var(--siva);font-size:13px}
.povrat-kol{white-space:nowrap;color:var(--siva)}
.povrat-razlozi{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
.povrat-razlozi .izbor{padding:12px 14px;font-size:14px;align-items:center}
.povrat-razlozi .izbor input{margin:0;accent-color:#000}
.povrat .gumb{justify-self:start;height:48px;padding:0 28px}
.povrat-pravila{list-style:none !important;margin:22px 0 0 !important;display:grid;gap:8px}
.povrat-pravila li{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:20px;color:var(--tekst)}
.povrat-pravila svg{flex:none;margin-top:2px;color:var(--zlato)}

/* --------------------- usluge: graviranje, pakiranje, proba ---------------- */
.us-stranica{padding-bottom:56px}
.us-glava{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;margin:14px 0 30px}
.us-glava-tekst h1{font-size:34px;line-height:40px;font-weight:500;margin:6px 0 12px}
.us-glava-tekst p{font-size:16px;line-height:25px;color:var(--tekst);max-width:520px}
.us-nadnaslov{font-size:12px !important;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--zlato) !important}
.us-glava-slika{aspect-ratio:16/10;overflow:hidden;background:var(--zlato-blijedo)}
.us-glava-slika img{width:100%;height:100%;object-fit:cover}
.us-trazi{display:flex;gap:10px;max-width:520px;margin-bottom:22px}
.us-trazi input{flex:1;height:44px;border:1px solid var(--rub-polja);padding:0 14px;font-size:16px}
.us-trazi .gumb{height:44px;padding:0 18px;gap:8px}
.us-sloj{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:start}
.us-korak{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:500;margin:0 0 14px}
.us-korak span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#000;color:#fff;font-size:13px;font-weight:700}
.us-bok .us-korak{margin-top:22px}
.us-parfemi{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.us-parfem{display:grid;grid-template-columns:20px 72px minmax(0,1fr);gap:12px;align-items:center;padding:10px 14px;border:1px solid var(--rub);cursor:pointer}
.us-parfem:hover{border-color:#999}
.us-parfem:has(input:checked){border-color:#000;box-shadow:inset 0 0 0 1px #000}
.us-parfem input{width:18px;height:18px;accent-color:#000}
.us-parfem-slika{display:grid;place-items:center;aspect-ratio:1;background:#f6f6f6}
.us-parfem-slika img{width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply}
.us-parfem-tekst{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:17px;min-width:0}
.us-parfem-tekst b{font-weight:700}
.us-parfem-tekst span{color:var(--tekst);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.us-parfem-tekst i{font-style:normal;font-weight:700;margin-top:2px}
.us-bok{position:sticky;top:130px;padding:22px;border:1px solid var(--rub);background:#fff}
.us-bok .gumb{height:48px;margin-top:14px}
.us-bok .sitno{margin-top:10px}
.grav-pregled{position:relative;display:grid;place-items:center;height:300px;background:#f6f6f6;overflow:hidden}
.grav-pregled img{max-height:92%;max-width:80%;object-fit:contain;mix-blend-mode:multiply}
.grav-tekst{position:absolute;left:50%;top:64%;transform:translate(-50%,-50%);max-width:70%;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font-size:22px;color:rgba(255,255,255,.92);text-shadow:0 1px 0 rgba(0,0,0,.35),0 -1px 0 rgba(255,255,255,.25);
  padding:2px 10px;background:rgba(0,0,0,.18)}
.grav-pregled[data-pismo="klasicno"] .grav-tekst{font-family:Georgia,'Times New Roman',serif;font-style:italic}
.grav-pregled[data-pismo="moderno"] .grav-tekst{font-family:inherit;text-transform:uppercase;letter-spacing:.2em;font-size:16px;font-weight:500}
.grav-pregled[data-pismo="rukopis"] .grav-tekst{font-family:'Segoe Script','Brush Script MT','Apple Chancery',cursive;font-size:24px}
.us-pisma{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.us-pismo{display:grid;place-items:center;height:48px;border:1px solid var(--rub);cursor:pointer;font-size:15px}
.us-pismo input{position:absolute;opacity:0;pointer-events:none}
.us-pismo:has(input:checked){border-color:#000;box-shadow:inset 0 0 0 1px #000}
.us-pismo-klasicno span{font-family:Georgia,serif;font-style:italic}
.us-pismo-moderno span{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:500}
.us-pismo-rukopis span{font-family:'Segoe Script','Brush Script MT','Apple Chancery',cursive}
.us-zbroj{margin-top:18px;font-size:14px;line-height:20px;color:var(--tekst)}
.us-poruka{display:flex;align-items:center;gap:8px;padding:14px 16px;margin-bottom:20px;background:#f1f8f3;border:1px solid #b9dcc4;color:#1d6b3a;font-size:14px}
.us-tocke{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.us-tocke li{display:flex;gap:14px;padding:18px;border:1px solid var(--rub)}
.us-tocke svg{flex:none;color:var(--zlato)}
.us-tocke div{display:grid;gap:4px}
.us-tocke b{font-size:15px;font-weight:700}
.us-tocke span{font-size:14px;line-height:20px;color:var(--tekst)}
.us-koraci{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 26px;counter-reset:none}
.us-koraci li{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--podloga);font-size:14px;line-height:19px}
.us-koraci b{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--zlato-svijetlo);color:#111;font-size:13px}
.us-isprobaj{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.us-isprobaj-kartica{display:flex;flex-direction:column;gap:3px;padding:14px;border:1px solid var(--rub);font-size:14px;line-height:19px}
.us-isprobaj-kartica .us-parfem-slika{margin-bottom:10px}
.us-isprobaj-kartica b{font-weight:700}
.us-ime{color:var(--tekst);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.us-ime:hover{text-decoration:underline}
.us-vrsta{font-size:13px;color:var(--siva)}
.us-cijena{font-weight:700;font-size:16px;margin:6px 0 10px}
.us-isprobaj-kartica .gumb{height:42px;margin-top:auto}
.du-poruka{grid-column:2 / -1;font-size:13px;color:var(--tekst);margin-top:4px}
.du-poruka a{text-decoration:underline;color:var(--siva)}
@media (max-width:900px){
  .us-glava{grid-template-columns:1fr;gap:18px}
  .us-glava-tekst h1{font-size:26px;line-height:32px}
  .us-sloj{grid-template-columns:1fr;gap:24px}
  .us-bok{position:static}
  .us-tocke{grid-template-columns:1fr}
  .us-koraci{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){ .us-koraci{grid-template-columns:1fr} .us-isprobaj{grid-template-columns:1fr 1fr;gap:10px} }

/* ------------------------------ brzi pregled ------------------------------ */
.k-brzo{position:absolute;left:50%;bottom:10px;transform:translate(-50%,6px);z-index:2;height:36px;padding:0 18px;
  background:#fff;color:#000;border:1px solid #000;font-size:13px;font-weight:500;white-space:nowrap;opacity:0;
  transition:opacity .15s,transform .15s}
.kartica:hover .k-brzo,.k-brzo:focus-visible{opacity:1;transform:translate(-50%,0)}
.k-brzo:hover{background:#000;color:#fff}
.kartica:has(.k-proba) .k-brzo{bottom:48px}
@media (hover:none){ .k-brzo{display:none} }
.brzi{width:min(920px,calc(100% - 32px));max-height:calc(100dvh - 40px);padding:0;border:0;border-radius:6px;overflow:auto;
  box-shadow:0 24px 70px rgba(0,0,0,.28);color:#000}
.brzi::backdrop{background:rgba(0,0,0,.5)}
.brzi-x{position:absolute;top:10px;right:10px;width:44px;height:44px;display:grid;place-items:center;z-index:2;background:#fff;border-radius:50%}
.bp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;padding:32px}
.bp-galerija{display:flex;flex-direction:column;gap:12px}
.bp-slika{width:100%;height:420px;object-fit:contain;mix-blend-mode:multiply}
.bp-slicice{display:flex;gap:8px;justify-content:center}
.bp-slicice button{width:60px;height:60px;border:1px solid var(--rub);display:grid;place-items:center;padding:2px}
.bp-slicice button.je-tu{border-color:#000}
.bp-slicice img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.bp-info{display:flex;flex-direction:column;gap:6px;padding-top:8px;padding-right:30px}
.bp-marka{font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.bp-ime{font-size:26px;line-height:32px;font-weight:500}
.bp-vrsta{font-size:14px;color:var(--siva)}
.bp-cijena{margin-top:10px}
.bp-cijena b{font-size:26px;font-weight:700}
.bp-cijena s{margin-left:10px;color:var(--siva);font-size:15px}
.bp-kod{font-size:14px;color:var(--zlato)}
.bp-velicine{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.bp-velicine button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 14px;border:1px solid var(--rub);font-size:14px;text-align:left}
.bp-velicine button span{font-size:12px;color:var(--siva)}
.bp-velicine button[aria-checked="true"]{border-color:#000;box-shadow:inset 0 0 0 1px #000}
.bp-jedna{font-size:14px;margin-top:8px}
.bp-zaliha{display:flex;align-items:center;gap:6px;font-size:14px;margin-top:10px}
.bp-zaliha.je-dostupno{color:#1d6b3a}
.bp-zaliha.nije-dostupno{color:var(--siva)}
.bp-kupi{display:flex;gap:10px;margin-top:14px}
.bp-kupi .gumb{flex:1;height:52px;font-size:15px}
.bp-srce{width:52px;height:52px;border:1px solid var(--rub);display:grid;place-items:center}
.bp-srce.je-aktivno{color:var(--zlato)}
.bp-srce.je-aktivno svg{fill:currentColor}
.bp-info > .gumb{height:52px;margin-top:14px}
.bp-vise{display:inline-flex;align-items:center;gap:4px;margin-top:14px;font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){
  .bp{grid-template-columns:1fr;gap:16px;padding:20px 16px}
  .bp-slika{height:260px}
  .bp-info{padding-right:0}
  .bp-ime{font-size:21px;line-height:27px}
}

/* --------------------- slog: složena slika pravih proizvoda ---------------- */
/* Ploha u boji, proizvodi izrezani na obris stoje na istoj crti (stolu).
   Posvjetljenje gura blijedi vodeni žig dobavljača u čistu bijelu, a
   multiply bijelu utopi u plohu. */
.slog{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:5%;
  background:var(--slog,#f1ebe1);overflow:hidden;padding:18px 6% 26px}
.slog::before{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;background:rgba(40,30,15,.05)}
.slog-k{position:relative;flex:0 0 auto;display:block;height:70%;max-width:36%;overflow:hidden;margin-bottom:-1%}
.slog-k img{position:absolute;right:auto;bottom:auto;max-width:none;height:auto;mix-blend-mode:multiply;filter:brightness(1.07) contrast(1.04)}
.slog-2 .slog-k:first-child{height:80%}
.slog-3 .slog-k:nth-child(2){height:84%;max-width:40%}
.slog-4 .slog-k{max-width:24%}
.slog-4 .slog-k:nth-child(2),.slog-4 .slog-k:nth-child(3){height:82%}
.slog-5 .slog-k{max-width:18%;height:62%}
.slog-5 .slog-k:nth-child(3){height:80%}

/* naslovni baner: tekst lijevo, slog desno, jedna mirna boja */
.baner.je-slog{justify-content:space-between;gap:40px;min-height:420px;padding:0 max(76px,calc((100% - var(--omot)) / 2));
  background:var(--b1)}
.baner.je-slog .baner-tekst{flex:1 1 44%;max-width:520px;padding:40px 0}
.baner.je-slog .baner-oznaka{position:static;width:auto;height:auto;display:inline-block;padding:6px 12px;border-radius:0;
  background:#000;color:#fff;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.baner.je-slog .gumb{min-width:180px}
.baner-slog{flex:1 1 52%;align-self:stretch;height:auto;min-height:420px;padding:40px 2% 58px;background:transparent}
.baner-slog::before{display:none}
/* stol preko cijele širine banera */
.baner.je-slog::before{content:"";position:absolute;left:0;right:0;bottom:0;height:58px;background:rgba(40,30,15,.05);pointer-events:none}
/* uski PC / tablet: niži baner kao notino.hr (268), tekst ne ide pod strelicu */
@media (min-width:761px) and (max-width:1023px){
  .hero-plocica .baner.je-slog{min-height:300px;padding:0 76px;gap:24px}
  .hero-plocica .baner-slog{min-height:300px;padding:28px 0 48px}
  .hero-plocica .baner.je-slog .baner-tekst strong{font-size:40px;line-height:44px}
  .hero-plocica .baner.je-slog .baner-pod{font-size:16px;line-height:22px}
}
@media (max-width:760px){
  .hero-plocica .baner.je-slog{flex-direction:row;align-items:stretch;justify-content:space-between;gap:0;
    height:166px;min-height:166px;padding:0 0 0 16px;text-align:left}
  .hero-plocica .baner.je-slog .baner-tekst{flex:0 0 54%;max-width:none;padding:14px 0;align-items:flex-start;justify-content:center;gap:4px}
  .hero-plocica .baner.je-slog .baner-oznaka{display:none}
  .hero-plocica .baner.je-slog .baner-tekst strong{font-size:22px;line-height:25px;color:#000;text-shadow:none}
  .hero-plocica .baner.je-slog .baner-pod{font-size:12.5px;line-height:16px;color:#000;text-shadow:none;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .hero-plocica .baner.je-slog .baner-pod br{display:none}
  .hero-plocica .baner.je-slog .gumb{height:32px;min-width:0;padding:0 14px;font-size:12px;margin-top:6px}
  .hero-plocica .baner-slog{flex:0 0 46%;min-height:0;height:166px;padding:12px 8px 24px;gap:6%}
  .hero-plocica .baner.je-slog::before{height:24px}
}
/* zaglavlje kategorije: slog puni lijevu plohu */
.kh-slika .slog{height:100%;min-height:inherit;padding:28px 8% 44px}
@media (max-width:900px){ .kh-slika .slog{height:170px;padding:16px 6% 26px} .kh-slika{height:170px !important;min-height:170px !important;max-height:170px !important} }
/* slike usluga: slog puni okvir kao fotografija */
.vodic-slika .slog,.insp-slika .slog,.us-glava-slika .slog{width:100%;height:100%;padding:16px 8% 22px}
.us-glava-slika .slog{padding:30px 10% 44px}
.slog-natpis{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);max-width:80%;overflow:hidden;white-space:nowrap;
  font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:clamp(13px,2vw,24px);color:rgba(255,255,255,.93);
  text-shadow:0 1px 0 rgba(0,0,0,.35),0 -1px 0 rgba(255,255,255,.2);padding:1px 8px;background:rgba(0,0,0,.14)}
.slog-bon{align-items:center}
.slog-bon img{width:86%;height:auto;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.insp-slika .slog{height:190px}
@media (max-width:760px){ .insp-slika .slog{height:160px} }
.vodic-slika .slog,.insp-slika .slog{padding:12px 8% 16px}
.vodic-slika .slog-k,.insp-slika .slog-k{height:86%}
.vodic-slika .slog-3 .slog-k:nth-child(2),.insp-slika .slog-3 .slog-k:nth-child(2),
.vodic-slika .slog-5 .slog-k:nth-child(3),.insp-slika .slog-5 .slog-k:nth-child(3){height:100%}

/* velike pločice na naslovnici: slog marke desno */
.plocica-velika.je-slog{background:var(--b1)}
.plocica-velika.je-slog .pv-tekst{position:relative;z-index:2;max-width:46%}
.pv-slog{position:absolute;right:0;top:0;bottom:0;width:56%;padding:22px 4% 30px;background:transparent}
.pv-slog::before{display:none}
.plocica-velika.je-slog::before{content:"";position:absolute;left:0;right:0;bottom:0;height:30px;background:rgba(40,30,15,.05)}
@media (max-width:900px){ .plocica-velika.je-slog .pv-tekst{max-width:52%} .pv-slog{width:50%;padding:18px 3% 24px} }
.nema-slika .slog{aspect-ratio:16/10;padding:30px 8% 44px}
.slog-1 .slog-k{height:88%;max-width:60%}

/* VELURA — mobitel
   Mjere iz referenca/notino-mjere.md, odjeljak 10:
   crna traka 70px · bijeli red s tražilicom 44px (polje 32px) · gutter 16px ·
   naslov sekcije 16/500 · mreža 2 stupca · tipografija kartice se NE smanjuje. */

/* ----------------------------- mobilni izbornik --------------------------- */
.mob-izbornik{position:fixed;inset:0 auto 0 0;width:min(92vw,420px);background:#fff;z-index:200;overflow:auto;
  box-shadow:4px 0 24px rgba(0,0,0,.2)}
.mob-vrh{display:flex;align-items:center;justify-content:space-between;height:70px;padding:0 16px;background:#000;color:#fff}
.mob-popis>li{border-bottom:1px solid var(--rub)}
.mob-red{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 16px;font-size:16px;text-align:left}
.mob-pod{padding:0 16px 18px;background:var(--podloga)}
.mob-sve{display:block;padding:12px 0;font-weight:500}
.mob-naslov{font-size:14px;font-weight:700;margin:14px 0 8px}
.mob-pod li a{display:block;padding:8px 0;font-size:14px;color:var(--tekst)}
.mob-dno{padding:18px 16px 40px;display:grid;gap:14px}
.mob-dno a{display:flex;align-items:center;gap:10px;font-size:15px}

/* traka kategorija ispod tražilice — samo na mobitelu */
.mob-kategorije{display:none}

/* --------------------------------- 1500 ----------------------------------- */
@media (max-width:1500px){
  .pod-zemlje{grid-template-columns:repeat(4,1fr)}
}

/* --------------------------------- 1200 ----------------------------------- */
@media (max-width:1200px){
  .nav-popis{overflow:auto;scrollbar-width:none}
  .nav-popis::-webkit-scrollbar{display:none}
  .marke-mreza{grid-template-columns:repeat(3,1fr)}
  .mreza{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vodic-mreza,.blog-mreza,.sminka-mreza,.video-mreza{grid-template-columns:repeat(2,1fr)}
  .popis-sloj{gap:20px}
  .filtri{flex-basis:250px}
  .proizvod{grid-template-columns:80px minmax(0,1fr) minmax(0,360px);gap:20px}
  .pod-newsletter,.pod-mreza{grid-template-columns:1fr;gap:18px}
  .kos-sloj{grid-template-columns:1fr}
  .baner-tekst strong{font-size:44px;line-height:46px}
  .baner-oznaka{display:none}
}

/* ---------------------------------- 900 ----------------------------------- */
@media (max-width:900px){
  /* mreža i kartice — tipografija ostaje kao na stolnom */
  .mreza{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .k-slika img{height:165px}
  .traka-klizac>*{flex:0 0 200px}
  .traka-klizac{gap:16px}
  .traka-gumb{display:none}
  .promo-plocica{min-height:260px;padding:18px}

  /* popis */
  .popis-glava h1{font-size:20px;line-height:24px}
  .popis-sloj{display:block}
  .filtri{position:fixed;inset:0;z-index:180;background:#fff;overflow:auto;padding:16px;display:none;width:100%}
  .filtri.je-otvoren{display:block}
  .filtri-vrh{display:flex;justify-content:flex-end;padding-bottom:6px}
  .kat-stablo{padding-bottom:12px}
  .popis-alati{padding:10px 0 14px}
  .sort-gumb{font-size:14px}
  .kat-hero{grid-template-columns:1fr;margin-bottom:14px}
  .kh-slika{min-height:150px;max-height:180px}
  .kh-tekst{padding:18px 16px 22px}
  .kh-tekst strong{font-size:20px;line-height:26px}

  /* proizvod */
  .proizvod{grid-template-columns:1fr;gap:12px}
  .p-slicice{flex-direction:row;order:2;overflow:auto;gap:8px}
  .p-glavna{min-height:320px}
  .p-glavna img{max-height:320px}
  .p-info h1{font-size:20px;line-height:26px}
  .p-velicina{padding:10px 12px}
  .pv-cijene{flex-direction:column;gap:2px;align-items:flex-end}
  .p-kupi{flex-wrap:wrap}
  .p-kupi .gumb{flex:1 1 140px}
  .pk-jezicci{gap:18px}
  .pk-ploha h2{font-size:18px;line-height:24px}
  .p-tablica th{width:130px;font-size:14px}

  /* kupnja i podnožje */
  .sazetak{position:static}
  .polje.duplo{grid-template-columns:1fr}
  .pod-zemlje{grid-template-columns:repeat(2,1fr)}
  .pod-tel{font-size:20px}
  .marke-popis,.kategorije-mreza{grid-template-columns:repeat(2,1fr)}

  .podnozje{margin-bottom:0}
}

@media (max-width:760px){
  /* zaglavlje: crna traka 70px + bijeli red s tražilicom 44px */
  .omot-puni{padding:0 16px}
  /* Notino na mobitelu gornju promo traku uopće ne prikazuje. */
  .traka-gore{display:none}
  .z-hamburger{display:grid}
  .nav{display:none}
  .z-alat-ime{display:none!important}
  /* kao kod njih: crni red 44px, a tražilica je u istom crnom bloku ispod
     (polje 32px, 3px iznad i 16px ispod); čipovi kategorija idu ispod crnog */
  .zaglavlje-red{height:auto;gap:14px;row-gap:0;flex-wrap:wrap;align-items:center}
  .zaglavlje-red>:not(.trazilica){height:44px;display:flex;align-items:center}
  .logo{font-size:22px;letter-spacing:1.6px;margin:0 auto 0 4px}
  .z-alati{gap:20px}
  .trazilica{order:3;flex:0 0 auto;width:calc(100% + 32px);height:51px;background:#000;border:0;border-radius:0;
    margin:0 -16px;padding:3px 16px 16px;align-items:center}
  .trazilica input{height:32px;font-size:16px;border:1px solid var(--rub-polja);border-radius:2px;
    background:#fff;padding:0 32px 0 16px}
  .trazilica button{position:absolute;right:18px;top:19px;transform:translateY(-50%);width:30px;height:30px}
  .trazilica .trazi-glas{right:50px;top:19px;bottom:auto;height:30px;transform:translateY(-50%)}
  .trazilica.ima-glas input{padding-right:70px}

  /* traka kategorija ispod tražilice (Notino je ima na mobitelu) */
  .mob-kategorije{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
    padding:21px 16px 20px;background:#fff}
  .mob-kategorije::-webkit-scrollbar{display:none}
  .mob-kategorije a{flex:none;display:inline-flex;align-items:center;height:36px;padding:0 16px;
    border:1px solid #e1e1e1;border-radius:2px;background:#fff;font-size:14px;color:#000;white-space:nowrap}
  /* kod njih ni „Akcije" nije istaknut — svi su čipovi isti */
  .mob-kategorije a.je-akcija{background:#fff;border-color:#e1e1e1;color:#000;font-weight:400}

  /* naslovnica */
  .polica-vrh h2{font-size:16px;line-height:20px}
  .polica-vrh .nad{font-size:14px;line-height:18px}
  .polica-vrh .vise{font-size:14px}
  /* Kod njih se ovi dijelovi na mobitelu listaju ustranu, a ne slažu jedan
     ispod drugog — kartica je oko 275 px. */
  .vodic-mreza,.blog-mreza,.sminka-mreza,.video-mreza,.usluge{
    display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;
    grid-template-columns:none;padding-bottom:6px;
    scroll-snap-type:x proximity}
  .vodic-mreza::-webkit-scrollbar,.blog-mreza::-webkit-scrollbar,.sminka-mreza::-webkit-scrollbar,
  .video-mreza::-webkit-scrollbar,.usluge::-webkit-scrollbar{display:none}
  .vodic-mreza > *,.blog-mreza > *,.sminka-mreza > *,.video-mreza > *,.usluge > *{
    flex:0 0 275px;scroll-snap-align:start}
  .seo-mreza{grid-template-columns:1fr}
  /* velike pločice se i kod njih listaju ustranu */
  .plocice-2{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;grid-template-columns:none}
  .plocice-2::-webkit-scrollbar{display:none}
  .plocice-2 > *{flex:0 0 285px}
  .marke-mreza{grid-template-columns:repeat(3,1fr);gap:8px}
  .marka-plocica{height:43px;background:#fff;border:1px solid var(--rub)}
  .marka-plocica span,.marka-plocica[data-marka] span{font-size:11px;line-height:14px;letter-spacing:1px}
  .plocica-velika{min-height:230px;height:230px;padding:18px}
  .plocica-velika strong{font-size:17px;line-height:22px}
  .plocica-velika p{font-size:12px;line-height:16px}
  .plocica-velika img{height:70%}
  .krug{width:92px}
  .krug span.krug-slika{width:76px;height:76px}
  .krug img{width:76px;height:76px}
  .baner{min-height:0;padding:22px 16px 18px;gap:12px;flex-direction:column;text-align:center;align-items:center}
  .baner-tekst{align-items:center;max-width:100%;gap:6px}
  .baner-tekst strong{font-size:34px;line-height:36px}
  .baner-pod{font-size:15px;line-height:20px}
  .baner-tekst .gumb{margin-top:4px;height:40px}
  .baner-boce{gap:10px}
  .baner-boce img{height:96px}
  .baner-boce .bn-0{height:104px}
  .baner-boce .bn-1{height:124px;margin-bottom:0}
  .baner-boce .bn-2{height:96px}
  .plocica-velika .pv-foto{height:70%;right:12px}
  .plocica-velika .pv-foto.na-tamnom{height:60%;padding:10px;bottom:18px}
  .hero-strelica{width:36px;height:36px}
  .hero-tocke{padding:12px 0}
  .hero-tocke button{width:34px}

}

/* ---------------------------------- 400 ----------------------------------- */
@media (max-width:400px){
  .mreza{gap:12px}
  .traka-klizac>*{flex:0 0 170px}
  .k-slika img{height:150px}
}

/* brendovi na mobitelu: dva stupca umjesto pet */
@media (max-width:820px){
  .marke-popis{columns:2}
  .marke-stranica h1{font-size:24px;line-height:32px}
  .slovo-blok h2{font-size:22px;margin:24px 0 8px}
}

/* panel tražilice na mobitelu ide u jedan stupac */
@media (max-width:820px){
  .sapt{grid-template-columns:1fr}
  .sapt-lijevo{border-right:0;border-bottom:1px solid var(--rub)}
}

/* Značka s brojem u donjoj navigaciji ne smije viriti preko ruba zaslona —
   inače stranica dobije vodoravno klizanje od nekoliko piksela. */
@media (max-width:820px){
}

/* Straničenje na uskom zaslonu: neka se lomi umjesto da gura stranicu ustranu. */
@media (max-width:820px){
  .stranicenje{flex-wrap:wrap;justify-content:center;margin-left:0;gap:2px 0}
  .popis-dno{justify-content:center}
}

/* ------------- naslovnica na mobitelu: mjere s notino.hr (375 px) --------- */
@media (max-width:760px){
  /* njihov hero je nizak — 166 px, bez strelica */
  .hero-plocica .baner,.hero-plocica .baner.je-foto{min-height:166px;height:166px;padding:0}
  .hero-plocica .baner-foto{height:166px}
  .hero-strelica{display:none}
  /* Na telefonu nema mjesta uz model, pa tekst ide preko dna slike s tamnom
     koprenom — tako ostaje čitljiv bez obzira na fotografiju. */
  /* baner je ovdje stupac: justify-content ga spušta na dno, na tamnu koprenu */
  .baner.je-foto,.baner.je-foto.tekst-lijevo,.baner.je-foto.tekst-desno{flex-direction:column;justify-content:flex-end;align-items:flex-start}
  .baner.je-foto::after,.baner.je-foto.tekst-lijevo::after,.baner.je-foto.tekst-desno::after{
    background:linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 38%,rgba(0,0,0,0) 72%)}
  .baner.je-foto .baner-tekst,
  .baner.je-foto.tekst-desno .baner-tekst,
  .baner.je-foto.tekst-lijevo .baner-tekst{
    margin:0;padding:0 16px 14px;max-width:100%;width:100%;
    align-items:flex-start;text-align:left;color:#fff}
  .baner.je-foto .baner-tekst strong,
  .baner.je-foto .baner-pod{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}
  .baner.je-foto .baner-tekst .gumb{background:#fff;color:#000;border-color:#fff}
  .baner-tekst strong{font-size:23px;line-height:26px}
  .baner-pod{font-size:13px;line-height:17px}
  .baner-tekst .gumb{height:34px;min-width:0;padding:0 16px;font-size:13px}

  /* točkice su kružići, tekuća je šira crtica */
  .hero-tocke{gap:7px;padding:12px 0}
  .hero-tocke button{width:6px;height:6px;border-radius:50%;background:#d9d9d9}
  .hero-tocke button[aria-current="true"]{width:24px;border-radius:3px;background:#555}
}

@media (max-width:760px){
  .hp{order:var(--red-mob, var(--red))}
  .hp-krugovi{display:none}   /* kod njih ih zamjenjuju čipovi pod tražilicom */
}

/* ------------- uski PC i tablet (notino.hr 768–1023 px) -------------------
   jedna crna traka 52 px: izbornik 44, logotip, tražilica u istom redu,
   ikone i iznos košarice; ispod bijeli red čipova kategorija (36 px) */
@media (min-width:761px) and (max-width:1023px){
  .traka-gore{display:none}
  .nav{display:none}
  .omot-puni{padding:0 16px}
  .zaglavlje-red{height:52px;gap:16px}
  .z-hamburger{display:grid;place-items:center;width:44px;height:44px;padding:0;margin:0 -8px 0 -10px}
  .logo{font-size:22px;letter-spacing:1.6px;height:52px}
  .trazilica{flex:1;min-width:0}
  .z-alati{gap:16px;margin-left:0}
  .z-alat .z-alat-ime{display:none}
  .z-kosarica .z-alat-ime{display:inline;font-size:14px;font-weight:500}
  .mob-kategorije,html .str-naslovnica .mob-kategorije{display:flex!important;gap:12px;overflow-x:auto;scrollbar-width:none;padding:20px 16px;background:#fff}
  .mob-kategorije::-webkit-scrollbar{display:none}
  .mob-kategorije a{flex:none;display:inline-flex;align-items:center;height:36px;padding:0 16px;
    border:.67px solid #e1e1e1;border-radius:2px;background:#fff;font-size:14px;color:#000;white-space:nowrap}
  .mreza{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 16px}
  .popis-glava h1{font-size:24px;line-height:32px}
}

/* Parfemium: web i aplikacija su braća.
   Ovaj zadnji sloj izjednačava web s aplikacijom (parfemium-aplikacija/lib/teme.dart):
   crno zaglavlje s bijelim znakom kao kod Notina, zlatni naglasak #8a6414 samo
   na oznakama i znački košarice, crna srca, crne točke banera, iste ikone. */

::selection{background:#ecd58f;color:#000}
:focus-visible{outline:2px solid var(--zlato);outline-offset:2px}

/* ------------------------------ logotip ---------------------------------- */
/* znak verzalom, bijel na crnom (kao zaglavlje prijave i Notinov web) */
.logo{text-transform:uppercase}
.zaglavlje .logo,.mob-vrh .logo,.z-kupnja .logo,.podnozje .logo{color:#fff}
@media (max-width:420px){.zaglavlje .logo{font-size:19px;letter-spacing:1.2px}}

/* ------------------------------ izbornik --------------------------------- */
.nav-veza{position:relative}
.nav-veza:not(.nav-akcije)::after{content:"";position:absolute;left:16px;right:16px;bottom:8px;height:1px;
  background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav-stavka:hover>.nav-veza:not(.nav-akcije)::after,.nav-veza.je-aktivna::after{transform:scaleX(1)}
.mega-naslov{color:#000}
.mega a:hover{color:#000;text-decoration:underline}

/* ------------------------ značke u zaglavlju ------------------------------ */
/* kao u aplikaciji: zlatna #8a6414, bijeli broj */
.z-broj{background:var(--zlato)!important;color:#fff!important}

/* ------------------------------- oznake ---------------------------------- */
/* "Akcija", "Besplatna dostava"…: zlatna ploha, bijeli tekst 12,3 px (Oznaka u aplikaciji) */
.oz{background:var(--zlato)!important;color:#fff!important;border-radius:1px!important;font-weight:500}
.oz.oz-siva{background:var(--rub)!important;color:#000!important}

/* -------------------------------- srca ----------------------------------- */
/* uvijek vidljivo (na mobitelu nema lebdenja), crno; puno kad je u željama */
.k-srce{opacity:1!important;color:#000!important}
.k-srce.je-aktivno{color:#000!important}
.ikona .ik-puno{display:none}
.je-aktivno .ikona .ik-puno,[aria-pressed="true"] .ikona .ik-puno{display:inline}
.je-aktivno .ikona .ik-prazno,[aria-pressed="true"] .ikona .ik-prazno{display:none}
.k-srce-veliki.je-aktivno svg{color:#000}

/* ------------------------------- kartice --------------------------------- */
.k-cijena s + .c-iznos,.k-cijena .je-akcija{color:#000}

/* --------------------------------- hero ---------------------------------- */
/* aktivna točka je crna izdužena crtica kao u aplikaciji i kod Notina */
.hero-tocke button[aria-current="true"]{background:#000}

/* ------------------------------- gumbi ----------------------------------- */
.gumb.crni:hover{background:#1f1f1f}
.gumb.okvir:hover{border-color:#000;background:#fff}

/* ----------------------------- podnožje ---------------------------------- */
.podnozje a:hover{color:#fff;text-decoration:underline}

/* ---------------------- gornja traka na užem stolu ------------------------ */
.tg-tekst b,.tg-tekst span,.tg-veza{white-space:nowrap}
@media (max-width:1280px){
  .traka-gore-red{gap:20px}
  .tg-desno{gap:18px}
  .tg-sakrij-sm{display:none}
}
@media (max-width:1100px){
  .tg-desno .tg-veza:nth-child(n+3){display:none}
}

/* logotipi marki na mobitelu: malo viša pločica da se znak vidi */
@media (max-width:760px){
  .marka-plocica.je-logo{height:54px;padding:8px 10px}
}

/* --------------------- police i mreža kao u aplikaciji ---------------------
   polica: kartice 164 px (8 px unutra), razmak 16, niz 8 px od ruba;
   popis: dva stupca preko cijele širine, razmak 16, redovi 40;
   naslov police: nadnaslov 14 siv, naslov 16/500 (NaslovSekcije) */
@media (max-width:760px){
  .polica{padding:25px 0 40px}
  .polica-vrh{margin-bottom:20px;align-items:center}
  .polica-vrh .nad{font-size:14px;line-height:16.4px;color:#474747;margin:0}
  .polica-vrh h2{font-size:16px;line-height:18.7px;font-weight:500}
  .traka-klizac{gap:16px;padding:0 8px;margin:0 -16px}
  .traka-klizac>*{flex:0 0 164px}
  .mreza{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 16px;margin:0 -16px}
  .k-slika img{height:143px}
}
@media (max-width:400px){
  .traka-klizac>*{flex:0 0 164px}
  .mreza{gap:40px 16px}
  .k-slika img{height:143px}
}

/* Parfemium — web kao brat aplikacije.
   Komponente iz lib/brat.js; mjere su iz aplikacije (1 dp = 1 px):
   lib/widgeti.dart, lib/ekrani/pocetna.dart. Boje su iz lib/teme.dart. */
:root{--b-okvir:#e1e1e1;--b-ploha:#f7f7f7;--b-sivi:#474747;--b-siva-ikona:#6b6b6b;--b-naglasak:#8a6414}

.b-pocetna{padding-top:16.4px;overflow:hidden}
.b-razmak40{height:40px}

/* ---------------------------------- čipovi ---------------------------------- */
.b-cipovi{display:flex;gap:8px;height:31.6px;padding:0 16px;overflow-x:auto;scrollbar-width:none;margin-bottom:24px}
.b-cipovi::-webkit-scrollbar{display:none}
.b-cipovi a{flex:none;display:flex;align-items:center;padding:0 16px;border:1.1px solid var(--b-okvir);
  font-size:12.3px;line-height:1;color:#000;white-space:nowrap}

/* ---------------------------------- baneri ---------------------------------- */
.b-baneri{margin-bottom:0}
.b-baneri-niz{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.b-baneri-niz::-webkit-scrollbar{display:none}
.b-baner{flex:0 0 100%;height:182px;display:flex;scroll-snap-align:start;color:#000}
.b-baner-slog{flex:1 1 50%;min-width:0;background:var(--pozadina);display:flex;align-items:flex-end}
.b-baner-slog.ima-scenu{position:relative;padding:0}
.b-slog{width:100%;height:100%;display:block}
.b-baner-ploha{flex:1 1 50%;min-width:0;background:var(--ploha);padding:16px 14px 16px 18px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.b-baner.tamni .b-baner-ploha{color:#fff}
.b-baner-oznaka{font-size:9.5px;font-weight:700;letter-spacing:1.2px;line-height:1.17;white-space:pre;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.b-baner-naslov{margin-top:10px;font-size:17px;font-weight:800;line-height:1.1;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.b-baner-tekst{margin-top:6px;font-size:11px;line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.b-baner-gumb{margin-top:12px;height:26px;padding:0 14px;display:flex;align-items:center;background:#000;color:#fff;
  font-size:11.5px;font-weight:500;white-space:nowrap}
.b-baner.tamni .b-baner-gumb{background:#fff;color:#000}
.b-tocke{display:flex;justify-content:center;align-items:center;gap:10px;height:8px;margin-top:13.7px}
.b-tocka{width:7.6px;height:7.6px;padding:0;border-radius:50%;background:var(--b-okvir);overflow:hidden;position:relative}
.b-tocka.je-tu{width:31.6px;border-radius:4px}
.b-tocka i{position:absolute;inset:0 auto 0 0;width:0;background:#000}
.b-tocka.je-tu i{animation:b-napredak 5s linear forwards}
@keyframes b-napredak{from{width:0}to{width:100%}}
@media (prefers-reduced-motion:reduce){.b-tocka.je-tu i{animation:none;width:100%}}

/* ------------------------------ naslov sekcije ------------------------------- */
.b-ns{display:flex;align-items:center;padding:0 16px;color:#000}
.b-ns.b-ns20{padding:0 20px}
.b-ns-tekst{flex:1;min-width:0;display:flex;flex-direction:column}
.b-ns-nad{font-size:14px;line-height:16.4px;color:var(--b-sivi)}
.b-ns-naslov{font-size:16px;line-height:18.7px;font-weight:500}
.b-ns-strelica{margin-left:12px;display:flex}

/* ---------------------------- police i red kartica ---------------------------- */
.b-polica{padding:25px 0 40px}
.b-polica .b-ns{margin-bottom:20px}
.b-red{display:flex;gap:16px;padding:0 8px;overflow-x:auto;scrollbar-width:none;align-items:flex-start}
.b-red::-webkit-scrollbar{display:none}
.b-red>.kartica{flex:0 0 164px}
.k-jedinicna{margin-top:4.2px;font-size:10px;line-height:11.7px;color:var(--b-sivi)}

/* -------------------------------- siva sekcija -------------------------------- */
.b-siva{background:var(--b-ploha);padding:48px 0 40px}
.b-siva>.b-ns{margin-bottom:20px}
.b-siva>.b-ns+.b-vodic{margin-top:3px}

/* ----------------------------------- vodič ----------------------------------- */
.b-vodic{display:grid;grid-template-columns:1fr 1fr;gap:13px 12.6px;padding:0 20px}
.b-vodic-k{display:flex;flex-direction:column;background:#fff;border-radius:3px;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.133);color:#000}
.b-vodic-slika{height:100.5px;background:#f8f0ee;display:block}
.b-vodic-slika img{width:100%;height:100%;object-fit:cover}
.b-vodic-naslov{margin:10px 7px 9px;height:38px;font-size:16px;font-weight:500;line-height:1.2;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

/* --------------------- vodoravni nizovi (šminka, video, …) --------------------- */
.b-niz{display:flex;overflow-x:auto;scrollbar-width:none}
.b-niz::-webkit-scrollbar{display:none}
.b-sjena{position:absolute;left:0;right:0;bottom:0}

.b-sminka{gap:12px;padding:0 20px;height:340px}
.b-sminka-k{position:relative;flex:0 0 189px;border-radius:6px;overflow:hidden;background:#3b2f2a;color:#fff}
.b-sminka-k img,.b-video-k img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.b-sminka-k .b-sjena{height:150px;background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.9) 55%)}
.b-sminka-oznaka{position:absolute;left:13px;top:13px;height:24px;padding:0 7px;border-radius:12px;background:var(--b-naglasak);
  display:flex;align-items:center;font-size:14px;font-weight:500;line-height:1}
.b-sminka-ime{position:absolute;left:7px;right:7px;bottom:60px;font-size:16px;font-weight:500;line-height:18.7px}
.b-sminka-traka{position:absolute;left:0;right:0;bottom:0;height:52px;background:#000;display:flex;align-items:center;
  justify-content:center;gap:10px;font-size:14px;font-weight:500}

.b-video{gap:16px;padding:0 13.3px;height:340px}
.b-video-k{position:relative;flex:0 0 187px;border-radius:6px;overflow:hidden;background:#6e625b;color:#fff}
.b-video-k .b-sjena{height:170px;background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.95) 60%)}
.b-video-igraj{position:absolute;inset:0;display:grid;place-items:center}
.b-video-tekst{position:absolute;left:13.5px;right:13.5px;bottom:18px;display:flex;flex-direction:column}
.b-video-tekst b{font-size:17px;font-weight:500;line-height:1.55;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.b-video-tekst span{margin-top:10px;font-size:14px;line-height:16.4px}

.b-usluge-sekcija{padding:8px 0 40px}
.b-usluge-sekcija>.b-ns{margin-bottom:20px}
.b-usluge{gap:13px;padding:0 20px;height:171px}
.b-usluga{flex:0 0 310px;display:flex;flex-direction:column;padding:14px 13.5px 16px;border-radius:10px;background:var(--b-ploha)}
.b-usluga-naslov{display:flex;align-items:center;gap:13px}
.b-usluga-naslov b{font-size:16px;font-weight:500;line-height:18.7px}
.b-usluga-tekst{flex:1;margin-top:8px;font-size:16px;line-height:1.4;color:var(--b-sivi);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.b-usluga-veza{align-self:flex-end;font-size:16px;text-decoration:underline;color:#000}

.b-blog{gap:13px;padding:0 20px 6px;height:268px}
.b-blog-k{flex:0 0 310px;display:flex;flex-direction:column;background:#fff;border-radius:3px;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.133);color:#000}
.b-blog-slika{height:158px;display:block}
.b-blog-slika img{width:100%;height:100%;object-fit:cover}
.b-blog-k b{margin:14px 13.5px 0;font-size:17px;font-weight:500;line-height:1.25;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.b-blog-k span{margin:6px 13.5px 0;font-size:16px;line-height:18.7px;color:var(--b-sivi)}

/* ---------------------- šire od mobitela: isti sadržaj, više mjesta ---------------------- */
@media (min-width:761px){
  .b-pocetna{max-width:1250px;margin:0 auto}
  .b-baner{height:320px}
  .b-baner-naslov{font-size:28px}.b-baner-tekst{font-size:15px}.b-baner-oznaka{font-size:12px}
  .b-baner-gumb{height:40px;font-size:14px;padding:0 24px}
  .b-vodic{grid-template-columns:repeat(4,1fr)}
  .b-vodic-slika{height:160px}
}

/* početna ima svoje čipove (kao aplikacija), pa red iz zaglavlja tu otpada */
.str-brat .mob-kategorije{display:none!important}

/* mobitel = aplikacija, računalo = notino.hr na širokom zaslonu */
@media (max-width:760px){.b-rac{display:none!important}}
@media (min-width:1024px){.str-brat .mob-kategorije{display:none!important}}
@media (min-width:761px){.b-mob{display:none!important}}

/* ============ mobilni izbornik = katalog iz aplikacije (EkranKategorije, EkranGrana) ============ */
.mob-izbornik.b-kat{position:fixed;inset:0;z-index:150;background:#fff;width:auto;max-width:none;padding:0;overflow:hidden;box-shadow:none;transform:none}
.b-kat-panel{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff}
.b-kat-panel.pod{transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.b-kat-panel.pod.vidi{transform:none}
.b-kat-glava{position:relative;flex:none;height:56px}
.b-kat-naslov{position:absolute;left:16.4px;bottom:0;display:flex;flex-direction:column;padding:0 12.2px;font-size:20px;line-height:23.4px}
.b-kat-naslov i{display:block;height:1.2px;margin:12px -12.2px 0;background:var(--b-naglasak)}
.b-kat-x{position:absolute;right:3.8px;top:8px;width:48px;height:48px;display:grid;place-items:center}
.b-kat-tijelo{flex:1;overflow-y:auto;overscroll-behavior:contain;padding-bottom:24px}
.b-kat-trazi{display:flex;align-items:center;gap:6.1px;height:44.6px;margin:24px 16px .5px;padding:0 16px 0 17.6px;border:1.1px solid var(--b-okvir);
  border-radius:22.3px;color:var(--b-sivi);font-size:14px}
.b-kat-trazi svg{color:var(--b-siva-ikona);flex:none}
.b-kat-trazi span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-kat-red{display:flex;align-items:center;width:100%;height:66.7px;padding:0 19.6px 0 20px;font-size:16px;color:#333;text-align:left;background:#fff}
.b-kat-red span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-kat-red.zlato{color:var(--b-naglasak)}
.b-kat-red svg{margin-left:8px;margin-bottom:1.9px;color:#000}
/* GornjaTraka: 52, strelica natrag 16, naslov 16/500 u sredini */
.b-traka{position:relative;flex:none;height:52px;display:flex;align-items:center;justify-content:center;background:#fff}
.b-traka-naslov{padding:0 64px;font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-traka-natrag{position:absolute;left:6px;top:2px;width:48px;height:48px;display:grid;place-items:center}
.b-kat-gr{display:flex;align-items:center;width:100%;height:66.7px;padding:0 19px 0 20.2px;font-size:16px;color:#333;text-align:left;background:#fff}
.b-kat-gr span:first-child{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-kat-gr[aria-expanded="true"] span:first-child{font-weight:500}
.b-kat-gr.uvuceno{height:59px;padding-left:36.2px}
.b-kat-dolje{display:flex;transform:rotate(90deg);transition:transform .2s}
.b-kat-gr[aria-expanded="true"] .b-kat-dolje{transform:rotate(-90deg)}
.b-kat-ucitava{height:200px}
.b-kat-greska{padding:24px 20px;color:var(--b-sivi)}
@media (min-width:1024px){.mob-izbornik.b-kat{display:none!important}}
@media (min-width:761px) and (max-width:1023px){.mob-izbornik.b-kat{right:auto;width:375px;z-index:160;box-shadow:0 0 24px rgba(0,0,0,.2)}}

/* baner sa scenom: fotografija i tri prava izrezana proizvoda na postolju */

/* Parfemium — zajednički dijelovi i stranica proizvoda kao u aplikaciji
   (GumbCrni/GumbOkvir, SnackBar, showModalBottomSheet, EkranProizvod). */

/* =============================== zajedničko =============================== */
/* GumbCrni / GumbOkvir: 52 px, tekst 14/500, bez zaobljenja */
.b-gumb{display:flex;align-items:center;justify-content:center;width:100%;height:52px;font-size:14px;font-weight:500;border:0;border-radius:0;cursor:pointer}
.b-gumb.crni{background:#000;color:#fff}
.b-gumb.crni:disabled{background:#3a3a3a}
.b-gumb.okvir{background:#fff;color:#000;border:1px solid #9e9e9e}
.b-gumb.okvir:disabled{color:#9e9e9e}
/* poruka (SnackBar): crna ploha dolje, tekst 14 bijel */
.b-poruka{position:fixed;left:12px;right:12px;bottom:calc(16px + var(--sab));z-index:300;background:#000;color:#fff;font-size:14px;
  line-height:1.3;padding:14px 16px;box-shadow:0 3px 8px rgba(0,0,0,.25);transform:translateY(20px);opacity:0;transition:transform .2s,opacity .2s;pointer-events:none}
.b-poruka.vidi{transform:none;opacity:1}
/* donja ploča (showModalBottomSheet): zaobljenje 7,4, zaglavlje 56,8, X 22,8, sjena 3,4 */
.b-zastor{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);opacity:0;transition:opacity .25s}
.b-zastor.vidi{opacity:1}
.b-list{position:fixed;left:0;right:0;bottom:0;z-index:201;background:#fff;border-radius:7.4px 7.4px 0 0;display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);max-height:calc(100% - 24px)}
.b-list.vidi{transform:none}
.b-list.pun{height:calc(100% - 24px)}
.b-list.dodano{height:calc(100% - 46px)}
.b-list-glava{position:relative;flex:none;height:56.8px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:500}
.b-list-x{position:absolute;right:6.1px;top:4.4px;width:48px;height:48px;display:grid;place-items:center}
.b-list-tijelo{position:relative;flex:1;overflow-y:auto;overscroll-behavior:contain}
.b-list-tijelo::before{content:"";position:sticky;top:0;display:block;height:3.4px;margin-bottom:-3.4px;background:linear-gradient(180deg,rgba(0,0,0,.1),transparent);z-index:1}
.b-list-unutra{padding:16px 16px calc(32px + var(--sab))}
.b-list-dno{flex:none;padding:16px 20.2px calc(16px + var(--sab))}


/* =============================== proizvod =============================== */
/* .bp je i stari "brzi pregled" (funkcije.css) — ovdje nije mreža */
.bp[data-proizvod]{display:flex;flex-direction:column;padding:0;gap:0;grid-template-columns:none}
/* desni stupac računala (naslov + kupnja) je jedan blok; na mobitelu ga nema, redoslijed je naslov, galerija, kupnja */
.bp-desno{display:contents}
.bp[data-proizvod]>*,.bp-desno>*{min-width:0}
.bp-a{order:1}.bp-l{order:2}.bp-d{order:3}.bp-dno{order:4}
.bp-mrvice{display:flex;align-items:center;height:48px;padding:0 20px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.bp-mrvice::-webkit-scrollbar{display:none}
.bp-mrvice a{font-size:14px;color:var(--b-sivi)}
.bp-mrvice span{margin:0 8px;font-size:14px;color:var(--b-okvir)}
.bp-glava{display:flex;align-items:flex-start;padding:9.4px 20.2px 8.1px 20px}
.bp-glava-t{flex:1;min-width:0}
.bp-naziv{font-size:16px;font-weight:500;line-height:18.7px;margin:0}
.bp-naziv a{text-decoration:underline}
.bp-vrsta{margin-top:3.5px;font-size:14px;line-height:16.4px}
.bp-ocjena{display:inline-flex;margin-top:9px}
.bp-ocjena .ocjena b,.bp-ocjena .ocjena i{font-size:14px}
.bp-ocjena .ocjena b{color:#404040}
.bp-ocjena .zvj.puna{background:#404040}
.k-srce.bp-srce{border:0!important;background:none!important;position:static!important;transform:translateY(-9.2px);width:40px;height:40px;margin:-4px -10px 0 0}
.bp-galerija{position:relative;height:412px;background:var(--b-ploha)}
.bp-galerija-niz{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.bp-galerija-niz::-webkit-scrollbar{display:none}
.bp-slika{flex:0 0 100%;height:100%;padding:30px 40px 40px;scroll-snap-align:start}
.bp-slika img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.bp-strelica{position:absolute;top:0;bottom:12px;margin:auto 0;width:48px;height:48px;display:grid;place-items:center;color:var(--b-sivi)}
.bp-strelica:disabled{color:#ababab}
.bp-strelica.lijevo{left:8px}.bp-strelica.desno{right:8px}
.bp-brojac{position:absolute;right:20.6px;bottom:15.2px;height:22px;padding:0 6.2px;display:flex;align-items:center;background:#636363;color:#fff;font-size:14px;line-height:1}
.bp-traka{position:absolute;left:0;right:0;bottom:0;height:1.9px;background:#f1f1f1}
.bp-traka i{position:absolute;top:0;bottom:0;left:0;background:#303030;transition:left .2s}
.bp-proba{position:absolute;left:0;right:0;top:0;bottom:30px;margin:auto;width:157px;height:157px;border-radius:50%;background:rgba(35,35,35,.85);
  color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:14px}
.bp-cijena-red{display:flex;align-items:flex-end;padding:41.2px 29.2px 10px 20px}
.bp-varijanta{flex:1;font-size:14px;line-height:16.4px}
.bp-stara{font-size:14px;color:var(--b-sivi);margin-right:10px}
.bp-cijena{font-size:20px;font-weight:500;line-height:23.4px}
.bp-kod{position:relative;margin:0 16.8px}
.bp-kod-trokut{position:absolute;right:22px;top:-8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:9px solid #f8f1e3}
.bp-kod-u{background:#f8f1e3;padding:10.3px 54.3px 14px 10.3px}
.bp-kod-red{display:flex;align-items:center;flex-wrap:wrap;font-size:16px}
.bp-kod-cijena{font-size:22px;font-weight:700;color:var(--b-naglasak)}
.bp-kopiraj{margin-left:6px;display:inline-flex}
.bp-kod-uvjet{margin-top:10px;font-size:14px;color:var(--b-sivi)}
.bp-kod-uvjet a{text-decoration:underline}
.bp-kod-crtice{margin:14px 0;height:1px;background:repeating-linear-gradient(90deg,#d8c9a8 0 5px,transparent 5px 9px)}
.bp-kod-sitno{display:flex;align-items:center;gap:4px;font-size:14px;color:var(--b-sivi);line-height:1.35}
.bp-kod-sitno .zl{color:var(--b-naglasak)}
.bp-kod-sitno svg{margin-left:2px;color:var(--b-sivi)}
.bp-top{position:absolute;right:10.3px;top:10.3px;width:40px;height:40px;background:var(--b-naglasak);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:700}
.bp-crtice{margin:14px 20px 0;height:1px;background:repeating-linear-gradient(90deg,var(--b-okvir) 0 5px,transparent 5px 9px)}
.bp-nijanse{display:flex;flex-wrap:wrap;gap:13px;padding:16px 20px 4px}
.bp-nijansa{width:44px;height:44px;border-radius:50%;padding:2px;display:block}
.bp-nijansa.je-tu{padding:3.5px;border:2.4px solid #000}
.bp-nijansa i{display:block;width:100%;height:100%;border-radius:50%}
.bp-popis-nijansi{display:block;margin:14px 20px 0;font-size:18.5px;font-weight:500;text-align:left}
.bp-varijante{display:flex;gap:13.3px;height:57px;margin-top:12px;padding:0 20px;overflow-x:auto;scrollbar-width:none}
.bp-varijante::-webkit-scrollbar{display:none}
.bp-var{position:relative;flex:0 0 120px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-left:16.4px;
  background:#f1f1f1;font-size:14px;line-height:16.4px;text-align:left;border:1.6px solid transparent}
.bp-var.je-tu{background:#fff;border-color:#000}
.bp-kutak{position:absolute;right:0;top:0;width:26px;height:26px;background:linear-gradient(45deg,transparent 50%,var(--b-naglasak) 50%);
  color:#fff;font-size:9px;font-weight:700;font-style:normal;line-height:1;display:flex;justify-content:flex-end;padding:4px 4px 0 0}
.bp-grav{position:relative;display:flex;align-items:center;height:48px;margin-top:22.5px;padding-left:22.1px;font-size:14px;cursor:pointer}
.bp-grav input{position:absolute;opacity:0;pointer-events:none}
.bp-grav .kvadratic{flex:none;width:16px;height:16px;border:1.14px solid #ababab;border-radius:1.6px;margin-right:9.9px;display:grid;place-items:center}
.bp-grav input:checked+.kvadratic{background:#000;border-color:#000}
.bp-grav input:checked+.kvadratic::after{content:"";width:8px;height:4px;border:solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg) translate(1px,-1px)}
.bp-grav>span:nth-of-type(2){flex:1}
.bp-info{width:48px;height:48px;display:grid;place-items:center;color:#ababab;margin-right:4.6px}
.bp-grav-tekst{display:block;width:calc(100% - 40px);margin:4px 20px 0;height:56px;padding:0 12px;border:1px solid var(--b-okvir);font-size:16px}
.bp-grav-tekst[hidden]{display:none}
.bp-grav-tekst:focus{outline:none;border-color:#000}
.bp-kupnja{margin-top:50px;padding:0 20.2px}
.bp-dostupnost{display:flex;align-items:center;padding-left:7.8px;font-size:14px;color:#303030;line-height:16.4px}
.bp-dostupnost i{flex:none;width:8px;height:8px;border-radius:50%;margin-right:16.2px;background:var(--zelena)}
.bp-dostupnost i.ne{background:var(--b-naglasak)}
.bp-crta{margin:0 4px;color:#ababab}
.bp-sifra{color:var(--b-sivi);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-pdv{margin:8px 0;font-size:12.3px;color:var(--b-siva-ikona)}
.bp-kupnja .b-gumb.okvir{margin-top:8px}
/* _BrojacKosarice: crni kvadrati 52 s minusom i plusom, "u košarici imate / N kom" */
.bp-brojac-kos{display:flex;align-items:center;height:52px}
.bp-brojac-kos button{flex:none;width:52px;height:52px;background:#000;color:#fff;display:grid;place-items:center}
.bp-brojac-kos div{flex:1;text-align:center;font-size:16px;line-height:18.7px}
.bp-brojac-kos div span{display:block;color:var(--b-sivi)}
.bp-brojac-kos div b{font-weight:700}
.bp-dostava{margin-top:20px}
.bp-dost{display:flex;align-items:center;height:89.5px;padding:0 19.6px 0 20px;color:#000}
.bp-dost>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:4.2px;margin-left:12.4px}
.bp-dost b{font-size:14px;font-weight:500;line-height:16.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-dost b.zelena{color:var(--zelena)}
.bp-dost b.siva{color:var(--b-siva-ikona)}
.bp-dost>svg:last-child,.bp-det>svg{color:var(--b-siva-ikona)}
.bp-detalji{margin-top:.4px;border-top:1.1px solid #f1f1f1}
.bp-det{display:flex;align-items:center;width:100%;height:67.8px;padding:0 19.6px 0 20.2px;border-bottom:1.1px solid #f1f1f1;
  font-size:16px;font-weight:500;color:#000;text-align:left;background:#fff}
.bp-det span{flex:1}
.bp-det i{font-style:normal;font-weight:400;font-size:14px;color:var(--b-sivi);margin-right:22px}
.bp-det svg{margin-bottom:1.9px}
.bp-povezani{margin-top:21px}
.bp-povezani h2,.bp-clanci h2{padding:0 20.2px;font-size:16px;font-weight:500;line-height:18.7px;margin:0 0 24px}
.bp-red-traka{display:block;position:relative;margin:30px 20.2px 0;height:1.9px;background:#eee}
.bp-red-traka i{position:absolute;top:0;bottom:0;left:0;width:40%;background:#000}
.bp-clanci{margin-top:40px;background:var(--b-ploha);padding:36px 0 8px}
.bp-clanci h2{font-size:20px;font-weight:400;line-height:23.4px;margin-bottom:22px}
.bp-clanak{display:flex;align-items:center;gap:16px;padding:20.2px 20.9px 20.2px 20.2px;border-top:1.1px solid #fff;color:#000}
.bp-clanak>span{flex:1;min-width:0;display:flex;flex-direction:column}
.bp-clanak b{font-size:14px;font-weight:500;line-height:1.31;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.bp-clanak>span>span{margin-top:12.2px;font-size:14px;color:var(--b-siva-ikona);white-space:pre-wrap}
.bp-clanak img{flex:none;width:103px;height:59px;object-fit:cover}
/* sadržaj ploča s opisom */
.bp-l-napomena{font-size:16px;line-height:1.23;color:#303030}
.bp-l-opis-naslov{margin-top:18px;font-size:16px;line-height:1.4}
.bp-l-tekst{margin-top:16px;font-size:16px;line-height:1.37}
.bp-l-tekst p+p{margin-top:12px}
.bp-l-tekst.sire{line-height:1.55;margin-top:4px}
.bp-l-podnaslov{margin-top:24px;margin-bottom:4px;font-size:16px;font-weight:700}
.bp-l-red{font-size:16px;line-height:1.5;margin-bottom:4px}
.bp-l-red b{font-weight:500}
.bp-l-veliki{font-size:19px;font-weight:500;margin-bottom:12px}
.bp-l-sastav{font-size:15.5px;line-height:1.6;color:var(--b-sivi);margin-bottom:28px}
.bp-l-nijansa{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--b-okvir);font-size:16px;color:#000}
.bp-l-nijansa i{flex:none;width:36px;height:36px;border-radius:50%}
.bp-l-nijansa.je-tu i{box-shadow:0 0 0 2px #fff,0 0 0 4px #000}
.bp-l-nijansa.je-tu span:first-of-type{font-weight:500}
.bp-l-nijansa span:first-of-type{flex:1}
/* ---------- uski PC / tablet (notino.hr 768–1023): jedan stupac, kartice ispod kupnje ---------- */
@media (min-width:761px) and (max-width:1023px){
  .bp[data-proizvod]{display:flex;flex-direction:column;max-width:720px;margin:0 auto}
  .bp-l,.bp-desno{display:contents}
  .bp-a{order:1}.bp-galerija{order:2}.bp-palci{display:none!important}.bp-d{order:4}.bp-kartice{order:5;padding:0 20px}
  .bp-dno{max-width:720px;margin:0 auto}
  .bp-galerija{height:480px}
}
/* kartice Opis / Sastav / O brendu / Ocjena (računalo i uski PC) */
@media (min-width:761px){
  .bp-kartice{margin-top:70px}
  .bp-kartice-traka{display:flex;gap:30px;height:38px;border-bottom:1px solid #f1f1f1}
  .bp-kartice-traka a{position:relative;display:flex;align-items:center;font-size:12.25px;color:#474747}
  .bp-kartice-traka a.je-tu{color:#000;font-weight:500}
  .bp-kartice-traka a.je-tu::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#000}
  .bp-k{padding-top:48px;scroll-margin-top:120px}
  .bp-k h2{font-size:28px;font-weight:500;line-height:32px;margin:0 0 20px}
  .bp-k h2 span{font-size:24px}
  .bp-k h3{font-size:18px;font-weight:500;margin:28px 0 12px}
  .bp-k-tablica{width:100%;border:1px solid #e1e1e1;border-radius:4px;border-spacing:0;overflow:hidden;margin-bottom:28px}
  .bp-k-tablica tr:nth-child(odd){background:#f7f7f7}
  .bp-k-tablica th,.bp-k-tablica td{width:50%;padding:12px 16px;font-size:14px;line-height:20px;text-align:left;vertical-align:top}
  .bp-k-tablica th{font-weight:400;color:#474747}
  .bp-k-tekst p{font-size:16px;line-height:28px;color:#474747;margin:0 0 12px}
  .bp-k-napomena{margin-top:16px;font-size:12px;color:#6b6b6b}
  .bp-k-sastav{font-size:14px;line-height:24px;color:#474747;overflow-wrap:anywhere}
  .bp-k-veza{display:inline-block;margin-top:8px;font-size:14px;font-weight:500;text-decoration:underline}
  .bp-k-ocjena{display:flex;gap:48px;align-items:center;padding-bottom:24px;border-bottom:1.1px solid #f1f1f1}
  .bp-k-prosjek{flex:0 0 220px;display:flex;flex-direction:column;align-items:center;gap:6px}
  .bp-k-prosjek>b{font-size:40px;font-weight:500;line-height:44px}
  .bp-k-prosjek .zvj.puna{background:#404040}
  .bp-k-prosjek>span{font-size:12.3px;color:#474747}
  .bp-k-prosjek .b-gumb{height:44px;margin-top:10px}
  .bp-k-trake{flex:1}
  .bp-k-sve{height:48px;margin-top:24px;max-width:320px}
  .bp-k-prazno{padding:32px 0;font-size:14px;color:#474747}
}
/* ---------- računalo: dva stupca kao notino.hr (galerija 827 / kupnja 375) ---------- */
@media (min-width:1024px){
  .bp[data-proizvod]{display:grid;grid-template-columns:minmax(0,1fr) 375px;grid-template-rows:auto auto;
    grid-template-areas:"l r";column-gap:48px;max-width:1280px;margin:0 auto;padding:20px 15px 0}
  /* notino.hr: desni stupac klizi dok mu dno ne dođe do dna prozora, zatim stoji
     (vrh izračuna javno/js/brat.js), a odlazi tek kad završi lijevi stupac */
  .bp-desno{display:block;grid-area:r;align-self:start;position:sticky;top:16px}
  .bp-l{grid-area:l;min-width:0;padding-top:20px}
  /* .bp-dno je izvan .bp (lijepljivi stupac staje gdje završava lijevi) */
  .bp-dno{max-width:1280px;margin:0 auto;padding:0 15px}
  .bp-mrvice{height:auto;padding:0;margin-top:3px;flex-wrap:wrap;white-space:normal;line-height:20px}
  .bp-mrvice a{font-size:12px;color:#474747}
  .bp-mrvice span{margin:0 11px;font-size:12px;color:#ababab}
  .bp-glava{padding:0;margin-top:26px}
  .bp-naziv{font-size:16px;line-height:32px;font-weight:700}
  .bp-naziv a{font-weight:300}
  .bp-vrsta{margin-top:4px;font-size:14px;line-height:24px;color:#474747}
  .bp-ocjena{margin-top:8px}
  .k-srce.bp-srce{transform:none;margin:0 -8px 0 0}
  .bp-galerija{height:630px;background:#f7f7f7}
  .bp-slika{padding:48px 80px}
  .bp-strelica{top:0;bottom:0;width:44px;height:44px;border-radius:50%;background:#fff;color:#000}
  .bp-strelica.lijevo{left:8px}.bp-strelica.desno{right:8px}
  .bp-strelica:disabled{opacity:0;pointer-events:none}
  .bp-brojac,.bp-traka{display:none}
  .bp-palci{display:flex;gap:16px;margin-top:20px;overflow-x:auto;scrollbar-width:none}
  .bp-palci::-webkit-scrollbar{display:none}
  .bp-palac{flex:0 0 140px;height:140px;padding:10px;border-radius:4px;background:#f7f7f7;cursor:pointer}
  .bp-palac img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
  .bp-palac.je-tu{box-shadow:inset 0 0 0 2px #000}
  .bp-cijena-red{padding:40px 12px 0 0;align-items:center}
  .bp-cijena{font-size:16px;line-height:20px}
  .bp-kod{margin:16px 0 0}
  .bp-kod-trokut{right:14px}
  .bp-kod-u{padding:12px 64px 14px 12px}
  .bp-kod-cijena{font-size:20px;font-weight:500}
  .bp-kod-uvjet{margin-top:6px;font-size:12px}
  .bp-kod-sitno{font-size:12px}
  .bp-top{right:12px;top:12px;width:48px;height:48px;font-size:14.4px;font-weight:500}
  .bp-crtice{margin:14px 0 0}
  .bp-nijanse{padding:16px 0 4px}
  .bp-popis-nijansi{margin:14px 0 0;font-size:14px;text-decoration:underline}
  .bp-varijante{padding:0;flex-wrap:wrap;height:auto;gap:12px}
  .bp-var{flex-basis:120px;height:57px;cursor:pointer}
  .bp-grav{padding-left:2px;margin-top:16px}
  .bp-grav-tekst{width:100%;margin:4px 0 0}
  .bp-kupnja{margin-top:24px;padding:0}
  .bp-dostupnost{padding-left:0}
  .bp-dostava{margin-top:24px;border-top:1px solid #f1f1f1}
  .bp-dost{height:auto;padding:18px 0}
  .bp-dno{margin-top:64px}
  .bp-povezani h2{padding:0;font-size:24px;line-height:32px;margin-bottom:24px}
  .bp-dno .b-red{padding:0}
  .bp-dno .b-red>.kartica{flex:0 0 calc((100% - 64px) / 5)}
  .bp-red-traka{margin:30px 0 0}
  .bp-clanci{padding:40px 24px 16px}
  .bp-clanci h2{padding:0;font-size:24px}
  .bp-clanak{padding:20px 0}
}

/* ============ RedakKosarice (web) — ista stavka kao u košarici aplikacije ============
   140,6 px: slika 101,4 × 90, naziv 16/500, opis 14 #474747, "— 1 kom +", cijena 14/500,
   mali sivi X, crta 1,1 #e1e1e1 */
.rk{position:relative;display:flex;align-items:center;margin:0 16px;border-bottom:1.1px solid var(--b-okvir)}
.rk.bez-crte{border-bottom:0}
.rk-slika{flex:none;width:101.4px;height:90px;display:block}
.rk-slika img{width:100%;height:100%;object-fit:contain}
.rk-t{flex:1;min-width:0;margin-left:11px;padding:20.2px 0 19.8px}
.rk-ime{padding-right:35.4px;font-size:16px;font-weight:500;line-height:18.7px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.rk-opis{margin-top:4.2px;font-size:14px;line-height:16.4px;color:var(--b-sivi)}
.rk-red{display:flex;align-items:center;height:48px;margin-top:13.3px}
.rk-g{flex:none;width:48px;height:48px;display:grid;place-items:center;color:#000}
.rk-g:disabled{color:#9e9e9e}
.rk-kom{flex:none;width:53.7px;text-align:center;font-size:14px;font-weight:500}
.rk-cijena{margin-left:auto;margin-right:4.2px;font-size:14px;font-weight:500}
.rk-x{position:absolute;right:-8px;top:4.6px;color:#6b6b6b}
/* ploča "Proizvod je dodan u košaricu" */
.b-dodano .b-list-unutra{padding:0 0 16px}
.b-dodano-sjena{height:3.8px;background:linear-gradient(180deg,rgba(0,0,0,.047),transparent)}
.b-dodano-naslov{padding:16.4px 20.2px 16px;font-size:16px;font-weight:500}
.b-dodano .b-list-dno{padding:16px 20.2px calc(16px + var(--sab))}
.b-dodano .b-list-dno .b-gumb{height:52.2px}
/* gumb "Dodaj u košaricu" na kartici (141 × 36,6, rub 1,14 #ababab, 13 px) */
.k-dodaj{margin-top:10.3px;width:141.3px;height:36.6px;border:1.14px solid #ababab;background:#fff;font-size:13px;font-weight:500;color:#000}

/* mala ploča (Novi popis): polje i Spremi */
.b-list.mali .b-list-unutra{padding:4px 20px calc(20px + var(--sab))}
.b-novi-popis{display:flex;flex-direction:column;gap:8px}
.b-novi-popis input{height:56px;padding:0 12px;border:1px solid var(--b-okvir);font-size:16px}
.b-novi-popis input:focus{outline:none;border-color:#000}

/* računalo (notino.hr): ploče su prozori na sredini, "Dodano u košaricu" 800 px ispod vrha */
@media (min-width:761px){
  .b-list{left:50%;top:50%;bottom:auto;width:480px;margin-left:-240px;border-radius:0;opacity:0;pointer-events:none;
    transform:translateY(-46%);transition:transform .2s ease,opacity .2s ease;max-height:calc(100vh - 80px)}
  .b-list.vidi{transform:translateY(-50%);opacity:1;pointer-events:auto}
  .b-list.pun{height:auto;min-height:320px}
  .b-list-tijelo{min-height:0}
  .b-list.dodano{top:80px;width:800px;margin-left:-400px;height:auto;max-height:calc(100vh - 160px);transform:translateY(12px)}
  .b-list.dodano.vidi{transform:none}
  .b-dodano .b-list-glava{justify-content:flex-start;height:auto;padding:24px 24px 16px;font-size:24px;line-height:32px}
  .b-dodano .b-list-x{top:18px;right:18px}
  .b-dodano .b-list-tijelo::before,.b-dodano-sjena{display:none}
  .b-dodano .b-list-unutra{padding:0 24px 24px}
  .b-dodano-stavka{margin-right:196px;min-height:104px}
  .b-dodano-stavka .rk{margin:0;border:0}
  .b-dodano .b-list-dno{position:absolute;top:80px;right:24px;width:180px;padding:0;display:flex;flex-direction:column;gap:8px}
  .b-dodano .b-list-dno .b-gumb{height:44px;border-radius:2px}
  .b-dodano-naslov{padding:24px 0 16px;font-size:18px}
  .b-dodano-red{padding:0;gap:24px}
  .b-dodano-red>.kartica{flex-basis:166px}
}

/* Parfemium — košarica kao u aplikaciji (EkranKosarica): traka dostave 6 px,
   stavke 140,6 (.rk u brat-proizvod.css), "POKLON ZA VAS", usluge s kvadratićem
   23,6 i opisom 13, polje koda 60,2, donja ploča s Ukupno i crnim gumbom 52,2. */
.bk{max-width:720px;margin:0 auto;min-height:60vh}
.bk-ucitava{height:60vh}
.bk-dostava{display:flex;align-items:center;gap:9.1px;padding:15.25px 16px 0 16.8px;font-size:14px;font-weight:500;line-height:16.4px}
.bk-dostava.zelena{color:var(--zelena)}
.bk-traka{display:block;position:relative;height:6px;margin:15.05px 16px 16.4px;border-radius:3px;background:var(--b-okvir);overflow:hidden}
.bk-traka i{position:absolute;left:0;top:0;bottom:0;background:var(--zelena)}
.bk-poklon{display:flex;align-items:center;height:56.8px;padding-left:17.6px;font-size:14px;font-weight:500;letter-spacing:2.8px}
.bk-uzorak{position:relative;height:132.2px}
.bk-uzorak img{position:absolute;left:27px;top:16px;width:77.7px;height:100px;object-fit:contain}
.bk-uz-ime{position:absolute;left:124.5px;right:48px;top:15.6px;font-size:15px;line-height:17.6px}
.bk-uz-ime b{font-weight:700}
.bk-uz-opis{position:absolute;left:124.5px;right:48px;top:49px;font-size:12px;line-height:14px;color:#404040}
.bk-uz-kom{position:absolute;left:124.2px;top:99.4px;font-size:14px}
.bk-uz-bespl{position:absolute;right:24px;top:99.4px;font-size:14px}
.bk-uz-x{position:absolute;right:0;top:.4px;color:#6b6b6b}
.bk-crta{height:1.1px;margin:0 16px;background:var(--b-okvir)}
.bk-usluga{position:relative;display:block;width:100%;text-align:left;background:#fff;padding:16px 0 17px;color:#000}
.bk-usluga::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:1.1px;background:var(--b-okvir)}
.bk-u-red{display:flex;align-items:flex-start;padding:0 16px}
.bk-kv{flex:none;width:23.6px;height:23.6px;border:1.14px solid #000;display:grid;place-items:center}
.bk-u-t{flex:1;min-width:0;margin-left:24.4px;display:flex;flex-direction:column}
.bk-u-naslov{display:flex;justify-content:space-between;gap:8px;font-size:14px;line-height:16.4px}
.bk-u-cijena{color:#ccc;white-space:nowrap}
.bk-u-cijena.da{color:#000}
.bk-u-opis{margin-top:8px;font-size:13px;line-height:1.23}
.bk-u-slike{display:flex;height:69.3px;margin:16px 0 -16.2px;padding-left:64px;overflow-x:auto;scrollbar-width:none}
.bk-u-slike::-webkit-scrollbar{display:none}
.bk-u-slike img{flex:0 0 90.3px;height:100%;object-fit:cover}
.bk-kod{padding:16px 16px 16px}
.bk-kod-naslov{font-size:14px;font-weight:500;line-height:16.4px;margin-bottom:16px}
.bk-polje{display:flex;align-items:center;height:60.2px;border:1.14px solid #ccc}
.bk-polje input{flex:1;min-width:0;height:100%;border:0;padding:0 16px;font-size:16px;background:none}
.bk-polje input::placeholder{color:#888}
.bk-polje input:focus{outline:none}
.bk-polje button{flex:none;min-width:61.3px;height:48px;padding:0 10px;margin-right:4px;font-size:14px;font-weight:500;color:#000}
.bk-polje b{flex:1;padding-left:16px;font-size:16px;font-weight:500}
.bk-bon{display:flex;align-items:center;margin-top:12px;font-size:14px}
.bk-bon b{flex:1;font-weight:500}
.bk-bon button{padding:0 10px;height:40px;font-size:14px;font-weight:500;text-decoration:underline}
.bk-greska{margin-top:8px;font-size:12px;color:#d0021b}
/* _Dno: ploča uz dno ekrana */
.bk-dno{position:sticky;bottom:0;z-index:5;background:#fff;padding:0 0 calc(24.4px + var(--sab))}
.bk-dno-kod{border-top:1.1px solid var(--b-okvir);height:43.4px;display:flex;align-items:center;padding-left:24px;margin-bottom:1.5px}
.bk-dno-kod button{padding:12px 0;font-size:14px;font-weight:500;text-decoration:underline;color:#000}
.bk-dno.kod-vidljiv .bk-dno-kod{border-top-color:transparent;height:16px;margin:0;overflow:hidden}
.bk-dno.kod-vidljiv .bk-dno-kod button{visibility:hidden}
.bk-popust{display:flex;justify-content:space-between;padding:0 24px 8px;font-size:14px;color:var(--zelena)}
.bk-ukupno{display:flex;justify-content:space-between;padding:0 24px;font-size:16px;font-weight:500;line-height:18.7px}
.bk-nastavi{margin:24.3px 20.2px 0;width:auto;height:52.2px}
/* prazna košarica */
.bk-prazna{padding:60px 0 24px;text-align:center}
.bk-vrecica{display:block;margin:0 auto}
.bk-p1{margin-top:56px;font-size:16.5px;font-weight:700;letter-spacing:5.5px;line-height:1.75}
.bk-p2{margin-top:22px;font-size:16.5px;letter-spacing:5.5px;line-height:1.75}
.bk-p3{margin:46px 0 28px;font-size:16px}
.bk-mreza{display:grid;grid-template-columns:1fr 1fr;gap:36px 16px;text-align:left}
/* ------------- računalo (notino.hr/cart): jedna kolona 1035 px, tablica stavki ------------- */
@media (min-width:761px){
  .bk{max-width:1067px;padding:0 16px 64px}
  .bkr-h1{margin:33px 0 0;font-size:32px;font-weight:300;line-height:44px}
  .bkr-dostava{display:flex;flex-direction:column;align-items:center;margin-top:18px}
  .bkr-dostava p{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;line-height:24px}
  .bkr-dostava p.zelena{color:var(--zelena)}
  .bkr-traka{position:relative;display:block;width:336px;height:6px;margin-top:8px;border-radius:2px;background:#f1f1f1;overflow:hidden}
  .bkr-traka i{position:absolute;left:0;top:0;bottom:0;background:var(--zelena)}
  .bkr-tablica{margin-top:20px;border-top:1px solid #e1e1e1}
  .bkr-red{display:grid;grid-template-columns:70px minmax(0,1fr) 110px 150px 110px 88px;column-gap:0;align-items:center;
    padding:20px 16px;border-bottom:1px solid #e1e1e1;font-size:14px}
  .bkr-slika{width:70px;height:70px;display:block}
  .bkr-slika img{width:100%;height:100%;object-fit:contain}
  .bkr-ime{display:flex;flex-direction:column;margin-left:29px;color:#000;line-height:17px}
  .bkr-ime b{font-weight:700}
  .bkr-opis{color:#474747;line-height:20px;margin-top:1px}
  .bkr-poklon{margin-top:2px;font-weight:700}
  .bkr-jed{text-align:right}
  .bkr-kol{display:flex;align-items:center;justify-content:center;gap:16px}
  .bkr-kol b{font-weight:700}
  .bkr-g{width:32px;height:32px;border-radius:50%;background:#f7f7f7;display:grid;place-items:center;color:#000}
  .bkr-g:disabled{color:#ababab;cursor:default}
  .bkr-iznos{text-align:right;font-weight:500}
  .bkr-ukloni{justify-self:end;font-size:14px;font-weight:300;color:#000;text-decoration:underline;text-decoration-color:#ababab;text-underline-offset:3px}
  .bkr-usluga{display:grid;grid-template-columns:84px minmax(0,1fr);width:100%;padding:20px 16px;border-bottom:1px solid #e1e1e1;text-align:left;background:#fff;color:#000}
  .bkr-kv{justify-self:end;margin-right:13px;margin-top:1px;width:16px;height:16px;border:.67px solid #ababab;border-radius:2px;display:grid;place-items:center;background:#fff}
  .bkr-usluga.da .bkr-kv{background:#000;border-color:#000;color:#fff}
  .bkr-u-t{margin-left:15px;display:flex;flex-direction:column}
  .bkr-u-naslov{display:flex;justify-content:space-between;gap:16px;font-size:14px;line-height:17px}
  .bkr-u-naslov b{font-weight:700}
  .bkr-u-cijena{font-weight:500;color:#ababab;margin-right:92px;white-space:nowrap}
  .bkr-usluga.da .bkr-u-cijena{color:#000}
  .bkr-u-opis{margin-top:10px;font-size:14px;line-height:21px;color:#6b6b6b}
  .bkr-u-slike{display:flex;gap:8px;margin-top:12px}
  .bkr-u-slike img{width:90px;height:69px;object-fit:cover}
  .bkr-kod{padding:20px 16px 20px 115px;border-bottom:1px solid #e1e1e1}
  .bkr-kod label{display:block;font-size:14px;font-weight:500;margin-bottom:10px}
  .bkr-polje{display:flex;align-items:center;width:288px;height:44px;border:.67px solid #ababab;border-radius:2px}
  .bkr-polje input{flex:1;min-width:0;height:100%;border:0;padding:0 12px;font-size:14px;background:none}
  .bkr-polje input:focus{outline:none}
  .bkr-polje button{flex:none;height:100%;padding:0 16px;font-size:14px;font-weight:700;color:#000}
  .bkr-polje b{flex:1;padding-left:12px;font-weight:500}
  .bkr-popust{display:flex;justify-content:flex-end;gap:24px;padding:10px 16px 0;font-size:14px;color:var(--zelena)}
  .bkr-ukupno{display:flex;align-items:center;justify-content:flex-end;gap:11px;height:59px;margin-top:10px;padding:0 20px;background:#f7f7f7}
  .bkr-ukupno span{font-size:16px}
  .bkr-ukupno b{font-size:26px;font-weight:500;line-height:39px}
  .bkr-gumbi{display:flex;justify-content:space-between;margin-top:20px}
  .bkr-gumb{display:flex;align-items:center;justify-content:center;width:200px;height:44px;border:.67px solid #ababab;border-radius:2px;background:#fff;color:#000;font-size:14px;font-weight:500}
  .bkr-gumb.crni{background:#000;border-color:#000;color:#fff}
  .bk-prazna{padding-top:48px}
  .bk-mreza{grid-template-columns:repeat(4,1fr);gap:36px 24px}
}

/* mobitel (kao notino.hr i aplikacija): u košarici nema podnožja weba ni gumba
   "na vrh", pa traka "Nastaviti na narudžbu" ostaje na dnu zaslona do kraja */
@media (max-width:760px){
  body.str-kosarica .traka-povjerenja,
  body.str-kosarica .podnozje,
  body.str-kosarica .na-vrh{display:none!important}
}

/* računalo (notino.hr): fiksna traka košarice na dnu zaslona, 110 px, sjena prema gore */
@media (min-width:761px){
  body.ima-bkr-dno{padding-bottom:110px}
  .bkr-gumbi{display:none}
  .bkr-dno{position:fixed;left:0;right:0;bottom:0;z-index:100;height:110px;background:#fff;box-shadow:0 -2px 4px rgba(71,71,71,.08)}
  .bkr-dno-omot{width:min(1035px,100% - 32px);height:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
  .bkr-dno-l{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
  .bkr-na-kod{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0;font-size:14px;font-weight:700;color:#000;background:none}
  .bkr-dno-d{display:flex;align-items:center;gap:24px}
  .bkr-dno-uk{display:flex;align-items:center;gap:12px}
  .bkr-dno-uk span{font-size:14px}
  .bkr-dno-uk b{font-size:26px;font-weight:500;line-height:39px}
  .bkr-dno .bkr-gumb{display:inline-flex;align-items:center;justify-content:center;width:200px;height:44px;font-size:14px;font-weight:500;
    border:.67px solid #ababab;background:#fff;color:#000;text-decoration:none;transition:background-color .3s,border-color .3s}
  .bkr-dno .bkr-gumb.crni{background:#000;color:#fff;border-color:#000}
  .bkr-dno .bkr-gumb:hover{border-color:#000}
  .bkr-dno .bkr-gumb.crni:hover{background:#333}
}

/* Parfemium — popis i filtri kao u aplikaciji (EkranPopis, EkranFiltri). */
.b-popis-traka{border-bottom:0}
.b-traka-desno{position:absolute;right:6px;top:2px;width:48px;height:48px;display:grid;place-items:center;color:#000}
.b-police{display:flex;gap:8px;height:30.1px;margin-top:8px;padding:0 20px;overflow-x:auto;scrollbar-width:none}
.b-police::-webkit-scrollbar{display:none}
.b-police a{flex:none;display:flex;align-items:center;padding:0 13.5px;border:1px solid #ebebeb;font-size:12.3px;color:#000;white-space:nowrap}
.b-police a.da{border:1.15px solid #000;font-weight:500}
.b-filtri-red{display:flex;gap:8px;height:32px;margin:12.2px 0;padding:0 20px;overflow-x:auto;scrollbar-width:none}
.b-filtri-red::-webkit-scrollbar{display:none}
.b-pil{flex:none;display:flex;align-items:center;gap:2px;height:32px;padding:0 15.2px;border-radius:16px;background:#f5f5f5;font-size:12.3px;color:#000;white-space:nowrap}
.b-pil.uska{padding:0 12px}
.b-pil.da{background:#000;color:#fff}
.b-pil b{font-weight:400}
.b-popis-tijelo{position:relative}
.b-popis-tijelo::before{content:"";position:absolute;left:0;right:0;top:0;height:2.7px;background:linear-gradient(180deg,rgba(0,0,0,.114),transparent);z-index:1;pointer-events:none}
.b-naslovna{padding-bottom:22px}
.b-naslovna .b-baneri{margin-bottom:36px}
.b-naslovna-marke{display:grid;grid-template-columns:1fr 1fr;gap:18px 16.8px;padding:0 16.8px}
.b-naslovna-marke a{height:110px;background:#f5f5f5;padding:30px 26px;display:block}
.b-naslovna-marke img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.b-popis-broj{padding:16px 20px 4px;font-size:12.3px;color:var(--b-sivi)}
.b-mreza{display:grid;grid-template-columns:1fr 1fr;gap:40px 16px;padding-top:1px}
.b-mreza>.kartica{min-width:0}
.b-mreza-jos{height:380px;margin-top:40px;background:linear-gradient(90deg,#efefef 0,#f9f9f9 50%,#efefef 100%);background-size:200% 100%;animation:b-sjaj 1.3s linear infinite;opacity:.6}
@keyframes b-sjaj{from{background-position:100% 0}to{background-position:-100% 0}}
.b-prazno{padding:48px 24px;text-align:center;color:var(--b-sivi);font-size:14px;line-height:1.5}

/* ================================ filtri (EkranFiltri) ================================ */
.b-ekran{position:fixed;inset:0;z-index:220;background:#fff;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.b-ekran.vidi{transform:none}
.b-ekran .b-traka{flex:none}
.b-traka-radnja{position:absolute;right:9px;top:0;height:52px;padding:0 8px;font-size:14px;font-weight:500;color:#6b6b6b;text-decoration:underline}
.b-ekran-tijelo{flex:1;overflow-y:auto;overscroll-behavior:contain;padding-bottom:16px}
.b-ekran-dno{flex:none;background:#fff;padding:16px 20px calc(16px + var(--sab));box-shadow:0 -3.4px 3.4px -3.4px rgba(0,0,0,.1) inset;position:relative}
.b-ekran-dno::before{content:"";position:absolute;left:0;right:0;top:-3.4px;height:3.4px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.1))}
.b-ekran-dno .b-gumb{height:44.2px}
.b-fs{border-bottom:1.1px solid #f5f5f5}
.b-fs-glava{display:flex;align-items:center;width:100%;min-height:64.4px;padding:12px 19px 12px 20.2px;text-align:left;background:#fff;color:#000}
.b-fs-t{flex:1;min-width:0;display:flex;flex-direction:column}
.b-fs-naslov{font-size:14px;font-weight:500;line-height:16.4px}
.b-fs-sazetak{margin-top:4px;font-size:12.3px;color:var(--b-naglasak);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-fs-glava .ik{display:flex;transition:transform .2s}
.b-fs-glava[aria-expanded="true"] .ik{transform:rotate(-90deg)}
.b-fs-glava.dolje .ik{transform:rotate(90deg)}
.b-fs-glava.dolje[aria-expanded="true"] .ik{transform:rotate(-90deg)}
.b-fs-sadrzaj{padding:16px 0}
.b-radio,.b-kv-red{display:flex;align-items:center;width:100%;height:48px;text-align:left;background:#fff;font-size:14px;color:#000}
.b-radio{padding-left:18.1px}
.b-krug{flex:none;width:20.2px;height:20.2px;border-radius:50%;border:1.9px solid #444;display:grid;place-items:center;margin-right:13.9px}
.b-radio.da .b-krug{border-color:#000}
.b-radio.da .b-krug::after{content:"";width:9.5px;height:9.5px;border-radius:50%;background:#000}
.b-kv-red{padding:0 21px 0 22.1px}
.b-kv{flex:none;width:16px;height:16px;border:1.14px solid #ababab;border-radius:1.6px;margin-right:11px;display:grid;place-items:center}
.b-kv-red.da .b-kv{background:#000;border-color:#000}
.b-kv-red.da .b-kv::after{content:"";width:8px;height:4px;border:solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg) translate(1px,-1px)}
.b-kv-ime{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-kv-zvj{flex:1;display:flex;gap:0}
.b-kv-zvj .zvj{width:18px;height:18px;flex-basis:18px;margin:0}
.b-kv-broj{color:#666;margin-left:8px}
.b-cijena-okvir{padding:0 20.2px 26.3px}
.b-cijena-kutije{display:flex;align-items:center}
.b-cijena-kutije span{flex:1;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 20px 0 16px;border:1.1px solid #9e9e9e;border-radius:4.6px;font-size:14px;color:#666}
.b-cijena-kutije i{flex:none;width:67px;display:grid;place-items:center}
.b-cijena-kutije i::after{content:"";width:10.3px;height:1.1px;background:#000}
.b-raspon{position:relative;height:44px;margin-top:14.1px;touch-action:none;cursor:pointer}
.b-raspon .t{position:absolute;top:14px;height:16px;border-radius:2px;background:var(--b-okvir)}
.b-raspon .t.crna{background:#000}
.b-raspon .r{position:absolute;top:0;width:4.2px;height:44px;border-radius:2.1px;background:#000}
.b-podizbor-trazi{display:flex;align-items:center;height:44.6px;margin:8px 20px 4px;padding:0 14px;border:1.1px solid var(--b-okvir)}
.b-podizbor-trazi input{flex:1;min-width:0;border:0;font-size:14px}
.b-podizbor-trazi input:focus{outline:none}
.b-podizbor-slovo{padding:18px 20px 6px;font-size:14px;font-weight:500}
.b-podizbor .b-kv-red{padding-left:38.1px;padding-right:41px}
@media (min-width:761px){.b-ekran{left:auto;width:420px;box-shadow:-2px 0 12px rgba(0,0,0,.15)}}

/* ================================ želje (EkranZelje) ================================ */
.b-zelje{padding:17px 16.8px 32px}
.b-zelje-obavijest{display:flex;align-items:center;gap:10px;background:var(--b-ploha);padding:10.3px 16px 10.3px 10.3px;font-size:16px;line-height:1.4;color:#000}
.b-zelje-obavijest b{font-weight:500;text-decoration:underline}
.b-zelje-zvono{flex:none;width:37px;height:37px;border-radius:50%;background:#fff;display:grid;place-items:center}
.b-zelje-naslov{margin:12px 0 0;font-size:26.5px;font-weight:400;line-height:31px}
.b-zelje-uvod{margin-top:8px;font-size:16px;line-height:1.55}
.b-zelje-info{display:flex;gap:12px;margin-top:16px;background:var(--b-ploha);padding:16px 16px 16px 12px}
.b-zelje-info>svg{flex:none;color:#6b6b6b}
.b-zelje-info b{display:block;font-size:16px;font-weight:500;margin-bottom:4px}
.b-zelje-info p{font-size:16px;line-height:1.55;color:var(--b-sivi)}
.b-zelje-info a{text-decoration:underline;color:var(--b-sivi)}
.b-zelje-novi{display:flex;align-items:center;gap:14px;margin:30px 0 16px auto;padding:8px 0;font-size:16.5px;font-weight:500;color:#000}
.b-zelje-kartica{display:flex;align-items:center;gap:6px;margin-bottom:14px;padding:12px 11px;background:#fff;border-radius:3px;box-shadow:0 2px 5px rgba(0,0,0,.15);color:#000}
.b-zk-t{flex:1;min-width:0;display:flex;flex-direction:column}
.b-zk-t b{font-size:18.5px;font-weight:500;line-height:21.6px}
.b-zk-t span{margin-top:6px;font-size:16.5px;color:var(--b-sivi)}
.b-zelje-kartica img{flex:none;width:40px;height:48px;object-fit:contain}
.b-zelje-mreza{padding-top:16px;gap:36px 16px}

/* ================================ profil (EkranProfil) ================================ */
.str-racun.str-brat{background:#f7f7f7}
.b-profil{background:#f7f7f7;padding-bottom:32px}
.b-profil .b-traka{background:#fff;border-bottom:1px solid #ededed}
.b-korisnik{display:flex;align-items:center;height:88.4px;padding:0 12px 0 20.2px;background:#fff}
.b-avatar{flex:none;width:46.9px;height:46.9px;border-radius:50%;background:linear-gradient(135deg,#e2c98f,#8a6414);display:grid;place-items:center;color:#fff}
.b-korisnik-t{flex:1;min-width:0;display:flex;flex-direction:column;margin-left:13px}
.b-korisnik-t b{font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-korisnik-t span{margin-top:3px;font-size:14px;color:var(--b-sivi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-qr{flex:none;width:46.7px;height:46.7px;margin:4px;border-radius:50%;background:#f7f7f7;display:grid;place-items:center;color:#000}
.b-plocice{display:grid;grid-template-columns:1fr 1fr;gap:12.2px;padding:20.2px 20.2px 0}
.b-plocica{position:relative;height:96px;background:#fff;color:#000;display:flex;flex-direction:column;align-items:center;padding-top:26px}
.b-plocica>span:first-of-type{margin-top:7px;font-size:14px;line-height:16.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 8px)}
.b-plocica .oz{position:absolute;top:4px;right:8px}
.b-pr-naslov{padding:40px 20.2px 16px;font-size:18px;font-weight:500;line-height:21px;margin:0}
.b-pr-kartica{margin:0 20.2px;background:#fff}
.b-pr-redak{display:flex;align-items:center;height:60.6px;margin:0 12.2px;border-bottom:1.1px solid #e0e0e0;color:#000}
.b-pr-redak:last-child{border-bottom:0}
.b-pr-ik{flex:none;width:26px;display:grid;place-items:center;margin-right:10.2px}
.b-pr-bez{width:4px}
.b-pr-tekst{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-size:14px}
.b-pr-tekst span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-pr-tekst i{font-style:normal;background:var(--b-naglasak);color:#fff;font-size:12.3px;padding:2px 6px}
.b-pr-redak>svg{margin:0 7.4px 1.9px 0}
.b-odjava{display:flex;justify-content:center;margin-top:20px}
.b-odjava button{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:14px;font-weight:500;color:#000}
.b-odjava span{text-decoration:underline}

/* kartica kupca */
.b-kartica-kupca{padding:40px 20px 32px;text-align:center;background:#fff}
.b-qr-velik{width:170px;height:170px;margin:0 auto}
.b-qr-velik svg{width:100%;height:100%}
.b-kk-kod{margin-top:12px;font-size:14px;color:var(--b-sivi);letter-spacing:1px}
.b-kk-tekst{margin-top:20px;font-size:12.3px;line-height:1.45}

/* ================================ narudžbe (EkranNarudzbeNotino, EkranNarudzbaDetalj) ================================ */
.b-racun-ekran{background:#fff;min-height:50vh}
.b-r-prazno{display:flex;flex-direction:column;align-items:center;gap:6px;padding:80px 32px;text-align:center;color:#ababab}
.b-r-prazno b{margin-top:8px;font-size:16px;font-weight:500;color:#000}
.b-r-prazno span{font-size:14px;color:var(--b-sivi)}
.b-nar{padding:16px}
.b-nar-datum{font-size:14px;font-weight:500}
.b-nar-slike{display:flex;gap:12px;height:160px;margin-top:12px}
.b-nar-slike img{width:110px;height:160px;object-fit:contain}
.b-nar-red{display:flex;justify-content:space-between;margin-top:14px;font-size:14px}
.b-nar-gumbi{display:flex;gap:16px;margin-top:14px}
.b-nar-gumbi .b-gumb{height:44.2px}
.b-nd{padding:20px 20.2px 32px}
.b-nd-stanje{display:flex;align-items:center;gap:8px;color:var(--zelena)}
.b-nd-stanje.otkazana{color:#ababab}
.b-nd-stanje b{font-size:20px;font-weight:500;color:#000}
.b-nd-poruka{margin-top:8px;font-size:14px;line-height:1.55;color:var(--b-sivi)}
.b-nd-prati{display:inline-block;margin:16px 0 12px;font-size:14px;text-decoration:underline;color:#000}
.b-nd-kartica{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.133)}
.b-nd-kartica-glava{background:var(--b-ploha);padding:16px 20px;font-size:16px;font-weight:500}
.b-nd-kartica-t{padding:16px 20px 4px}
.b-nd-polje{margin-bottom:12px;display:flex;flex-direction:column;font-size:14px}
.b-nd-polje b{font-weight:500}
.b-nd-polje span{color:var(--b-sivi)}
.b-nd-kontakt{display:flex;align-items:center;gap:6px;height:40px;font-size:14px;color:var(--b-sivi);text-decoration:underline}
.b-nd-kontakt svg{transform:rotate(90deg);transition:transform .2s}
.b-nd-kontakt.otvoreno svg{transform:rotate(-90deg)}
.b-nd-sazetak{margin:28px 0 8px;font-size:16px;font-weight:500}
.b-nd-stavka{display:flex;gap:16px;padding:16px 0;border-bottom:1.1px solid #f1f1f1}
.b-nd-slika{flex:none;width:96px;height:96px}
.b-nd-slika img{width:100%;height:100%;object-fit:contain}
.b-nd-t{flex:1;min-width:0;display:flex;flex-direction:column;font-size:14px}
.b-nd-t b{font-weight:500}
.b-nd-t>span{color:var(--b-sivi)}
.b-nd-kol{display:flex!important;justify-content:space-between;margin-top:24px;color:#000!important}
.b-nd-iznos{display:flex;align-items:flex-end;justify-content:space-between;padding:14px 0;border-bottom:1.1px solid #f1f1f1;font-size:14px}
.b-nd-iznos>span:first-child{display:flex;flex-direction:column}
.b-nd-iznos b{font-weight:400}.b-nd-iznos b.jak{font-weight:500}
.b-nd-iznos i{font-style:normal;color:var(--b-sivi)}
.b-nd-ukupno{display:flex;justify-content:space-between;padding:16px 0;font-size:16px;font-weight:500}
.b-nd .b-gumb.okvir{height:44.2px;margin-top:12px}

/* ================================ tražilica (EkranTrazilica) ================================ */
.b-trazilica{z-index:230}
.b-tr-glava{flex:none;padding:8.5px 16px 7.5px;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.08)}
.b-tr-polje{display:flex;align-items:center;height:48.4px;border:2px solid #000;border-radius:24.2px}
.b-tr-natrag{flex:none;width:48px;height:44px;display:grid;place-items:center}
.b-tr-polje input{flex:1;min-width:0;border:0;background:none;font-size:16px;color:#000;-webkit-appearance:none}
.b-tr-polje input:focus{outline:none}
.b-tr-polje input::placeholder{color:#707070}
.b-tr-polje input::-webkit-search-cancel-button{display:none}
.b-tr-x{flex:none;width:48px;height:44px;display:grid;place-items:center}
.b-tr-naslov{padding:28px 16px 14px;font-size:16px;font-weight:500}
.b-tr-redak{display:flex;align-items:center;gap:13px;height:60.2px;padding:0 16px;font-size:16px;color:#000}
.b-tr-redak>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-tr-krug{flex:none;width:43.4px;height:43.4px;border-radius:50%;background:#f5f5f5;display:grid;place-items:center}

/* ======================= ekrani računa (moj_racun.dart) ======================= */
.b-racun-ekran.siva{background:var(--b-ploha)}
/* _DvaCipa */
.b-dva-cipa{display:flex;gap:8px;padding:12px 16px;border-bottom:1.1px solid #f1f1f1}
.b-dva-cipa button{height:30.1px;padding:0 13.5px;border:1px solid #ebebeb;font-size:12.3px;color:#000;background:#fff}
.b-dva-cipa button.da{border:1.15px solid #000;font-weight:500}
.b-r-mreza{padding-top:16px;gap:32px 16px}
/* Beauty profil: zlatno zaglavlje 260, kartice preko njega (-110) */
.b-bp{background:#fff}
.b-bp-glava{position:relative;height:260px;background:linear-gradient(135deg,#3b2a12,#8a6414 50%,#e2c98f);color:#fff;display:flex;flex-direction:column;align-items:center;padding-top:60px}
.b-bp-glava b{font-size:22px;font-weight:400}
.b-bp-glava span{margin-top:8px;font-size:14px}
.b-bp-natrag{position:absolute;left:12px;top:6px;width:40px;height:40px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center}
.b-bp-tijelo{margin-top:-110px;position:relative}
.b-bp-kartica{margin:0 16px 16px;padding:16px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.133);display:flex;flex-direction:column;align-items:flex-start}
.b-bp-kartica b{margin-top:8px;font-size:16px;font-weight:500}
.b-bp-kartica p{margin-top:6px;font-size:14px;line-height:1.45;color:var(--b-sivi)}
.b-bp-kartica a{margin-top:12px;font-size:14px;font-weight:500;text-decoration:underline;color:#000}
.b-bp-oznaka{padding:2px 6px;font-size:12px;background:#fff1d6;color:#8a6414}
.b-bp-oznaka.da{background:#e6f2e6;color:var(--zelena)}
.b-bp-marke{padding:8px 16px 0;display:flex;flex-direction:column;align-items:flex-start}
.b-bp-red{display:flex;align-items:center;width:100%;margin-top:8px}
.b-bp-red b{flex:1;font-size:16px;font-weight:500}
.b-bp-red button{font-size:14px;text-decoration:underline}
.b-bp-tekst{margin-top:6px;font-size:14px;line-height:1.45;color:var(--b-sivi)}
.b-bp-dodaj{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;font-weight:500}
.b-bp-dodaj span{text-decoration:underline}
.b-bp-prep{margin:24px 0 10px;font-size:14px;color:var(--b-sivi)}
.b-bp-prijedlog{display:flex;gap:12px;height:150px;padding:0 16px 24px;overflow-x:auto;scrollbar-width:none;box-sizing:content-box}
.b-bp-prijedlog a{flex:0 0 120px;color:#000}
.b-bp-prijedlog a>span{height:110px;background:var(--b-ploha);padding:16px;display:grid;place-items:center}
.b-bp-prijedlog img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.b-bp-prijedlog i{display:block;margin-top:8px;font-style:normal;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-bp-trazi{display:flex;align-items:center;gap:8px;height:44px;margin:0 0 8px;padding:0 12px;border:1px solid var(--b-okvir);border-radius:22.3px;color:#6b6b6b}
.b-bp-trazi input{flex:1;border:0;font-size:14px}.b-bp-trazi input:focus{outline:none}
/* recenzije */
.b-rz{padding:8px 16px 24px}
.b-rz-red{display:flex;flex-direction:column;align-items:flex-end;padding:16px 0;border-bottom:1.1px solid #f1f1f1}
.b-rz-t{display:flex;gap:12px;width:100%}
.b-rz-t img{flex:none;width:90px;height:90px;object-fit:contain}
.b-rz-t span{display:flex;flex-direction:column;font-size:14px}
.b-rz-t b{font-weight:500}.b-rz-t i{font-style:normal;color:var(--b-sivi)}
.b-rz-red .b-gumb{width:175px;height:44.2px;margin-top:8px}
.b-rz-moja{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--b-okvir);color:#000}
.b-rz-moja img{flex:none;width:64px;height:64px;object-fit:contain}
.b-rz-moja b{font-size:14px;font-weight:500}
.b-rz-ocj{display:flex;align-items:center;gap:8px;margin-top:4px}
.b-rz-ocj .zvj{width:13px;height:13px;flex-basis:13px}
.b-rz-ocj i{font-style:normal;font-size:13px;color:var(--b-sivi)}
.b-rz-moja p{margin-top:6px;font-size:14px;line-height:1.4;color:#333}
/* povrati */
.b-pv{padding:16px}
.b-pv-k{margin-bottom:12px;padding:16px;background:#fff;display:flex;flex-direction:column;gap:4px;font-size:14px}
.b-pv-k b{font-weight:500}.b-pv-k span{color:var(--b-sivi)}
/* kontakt podaci */
.b-kp-blok{display:flex;align-items:flex-start;padding:20px 8px 12px 20.2px}
.b-kp-blok>span{flex:1;display:flex;flex-direction:column}
.b-kp-blok b{font-size:16px;font-weight:500}
.b-kp-blok>span>span{margin-top:8px;font-size:14px;line-height:1.45;color:var(--b-sivi)}
.b-kp-blok button{width:48px;height:48px;display:grid;place-items:center;color:var(--b-sivi)}
.b-kp-kontakt{padding:12px 20px 0 20.2px;font-size:14px;line-height:1.45;color:var(--b-sivi)}
.b-kp-sve{padding:28px 20.2px 8px;font-size:16px;font-weight:500}
.b-kp-adresa{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 20.2px;padding:12px 0;border-bottom:1.1px solid #f1f1f1;font-size:14px;line-height:1.45;color:var(--b-sivi)}
.b-kp-adresa button{font-size:14px;text-decoration:underline;color:#000}
/* obrasci u pločama */
.b-obrazac{display:flex;flex-direction:column;gap:12px;padding-top:12px}
.b-obrazac label{display:flex;flex-direction:column;gap:4px;font-size:12.3px;color:var(--b-sivi)}
.b-obrazac input{height:52px;padding:0 12px;border:1px solid #9e9e9e;border-radius:4.6px;font-size:15px;color:#000}
.b-obrazac input:focus{outline:none;border-color:#000}
/* postavke računa */
.b-ps{padding:20px 20.2px 32px}
.b-ps-naslov{margin:28px 0 0;font-size:16px;font-weight:500}
.b-ps-naslov:first-child{margin-top:0}
.b-ps-redak{display:flex;align-items:center;width:100%;padding:14px 0;border-bottom:1.1px solid #f1f1f1;text-align:left;color:var(--b-sivi)}
.b-ps-redak>span{flex:1;display:flex;flex-direction:column;gap:4px;font-size:14px}
.b-ps-redak b{font-weight:500;color:#000}
.b-ps-prekidac{display:flex;align-items:center;gap:12px;margin-top:8px;padding:10px 0;border-bottom:1.1px solid #f1f1f1;font-size:12.3px;font-weight:500;line-height:1.35}
.b-ps-prekidac span{flex:1}
.b-ps-prekidac input{position:absolute;opacity:0}
.b-ps-prekidac i{flex:none;position:relative;width:52px;height:32px;border-radius:16px;border:2px solid #79747e;background:#e6e0e9;transition:background .2s}
.b-ps-prekidac i::after{content:"";position:absolute;left:6px;top:6px;width:16px;height:16px;border-radius:50%;background:#79747e;transition:all .2s}
.b-ps-prekidac input:checked+i{background:#000;border-color:#000}
.b-ps-prekidac input:checked+i::after{left:22px;top:2px;width:24px;height:24px;background:#fff}
.b-ps-brisi{margin-top:28px;font-size:14px;color:var(--b-sivi);text-decoration:underline}

/* ------------------------- recenzije (EkranRecenzije) ------------------------- */
.b-rec .b-traka-naslov{max-width:calc(100% - 112px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-rec-u{padding:20px 16px 32px}
.b-rec-h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.b-rec-kako{font-size:14px;color:#474747;text-decoration:underline;text-decoration-color:#474747;background:none;padding:0}
.b-rec-prosjek{margin-top:24px;text-align:center;font-size:22px;line-height:1.2}
.b-rec-sred{display:flex;justify-content:center;margin-top:6px}
.b-rec-zv{height:auto}
.b-rec-zv .zvj{flex-basis:var(--zv);width:var(--zv);height:var(--zv)}
.b-rec-sred .zvj.puna{background:#404040}
.b-rec-sred .zvj.pola{background:linear-gradient(90deg,#404040 50%,#ababab 50%)}
.b-rec-broj{display:flex;align-items:center;justify-content:center;font-size:12.3px;color:#474747}
.b-rec-broj button{width:48px;height:48px;display:grid;place-items:center;color:#404040;background:none}
.b-rec-traka{display:flex;align-items:center;height:24.4px}
.b-rec-traka>span:first-child{flex:none;width:8px;font-size:14px;color:#474747}
.b-rec-traka>svg{flex:none;color:#000}
.b-rec-traka i{flex:1;height:4.2px;margin-left:7.5px;border-radius:2.1px;background:#e1e1e1;overflow:hidden}
.b-rec-traka i b{display:block;height:100%;background:#000}
.b-rec-traka>span:last-child{flex:none;width:40px;text-align:right;font-size:12.3px;color:#474747}
.b-rec-crta{height:1.1px;border:0;background:#f1f1f1;margin:0}
.b-rec-crta1{margin:20px 0}
.b-rec-napisi{height:48px}
.b-rec-cipovi{display:flex;gap:8px;margin-top:22px;overflow-x:auto;scrollbar-width:none}
.b-rec-cipovi button{flex:none;height:32px;padding:0 15.2px;border-radius:16px;background:#f5f5f5;font-size:12.3px;color:#000}
.b-rec-cipovi button.da{background:#000;color:#fff}
.b-rec-sort{display:flex;align-items:center;height:48px;margin-top:8px;background:none;padding:0;font-size:14px}
.b-rec-sort span{color:#474747;margin-right:8px}
.b-rec-sort b{font-weight:500;margin-right:6px}
.b-rec-r{padding:22px 0;border-bottom:1.1px solid #f1f1f1}
.b-rec-r[hidden]{display:none}
.b-rec-r-vrh{display:flex;align-items:center;justify-content:space-between}
.b-rec-r-vrh>span:last-child{font-size:12.3px;color:#474747}
.b-rec-r-ime{display:flex;align-items:center;margin-top:8.8px;font-size:12.3px}
.b-rec-r-ime b{font-weight:500}
.b-rec-r-ime svg{margin:0 4px 0 8px;color:#187c18}
.b-rec-r-ime span{color:#187c18}
.b-rec-r h2{margin-top:24px;font-size:16px;font-weight:500;line-height:1.3}
.b-rec-r-t{margin-top:8px;font-size:14px;line-height:1.78;white-space:pre-line;overflow-wrap:anywhere}
.b-rec-prazno{padding:40px 0;text-align:center;font-size:14px;color:#474747}
.b-list.b-izbor-l .b-list-unutra{padding:0 0 calc(16px + var(--sab))}
.b-rec-obrazac{padding-top:2px}
.b-rec-zvj{display:flex;justify-content:center;margin:2px 0 6px}
.b-rec-zvj button{width:48px;height:48px;display:grid;place-items:center;color:#ababab;background:none}
.b-rec-zvj button.da{color:#000}
.b-obrazac textarea{padding:12px;border:1px solid #9e9e9e;border-radius:4.6px;font:inherit;font-size:15px;color:#000;resize:vertical}
.b-obrazac textarea:focus{outline:none;border-color:#000}
.b-rec-obrazac .b-gumb{height:48px;margin-top:6px}
.b-gumb.ucitava{opacity:.6;pointer-events:none}
.b-rec-kako-t p{font-size:14px;line-height:1.6;color:#000;margin-bottom:12px}
@media (min-width:761px){
  .b-rec{max-width:1280px;margin:0 auto;padding:0 15px}.b-rec .b-traka{display:none}
  .b-rec-u{display:grid;grid-template-columns:340px minmax(0,1fr);column-gap:72px;align-items:start;padding:32px 0 64px}
  .b-rec-lijevo{position:sticky;top:130px}
  .b-rec-h1{position:static;width:auto;height:auto;clip:auto;margin:0 0 8px;font-size:32px;font-weight:300;line-height:40px}
  .b-rec-h1 a{color:#000}
  .b-rec-prosjek{font-size:40px;font-weight:500}
  .b-rec-cipovi{margin-top:0}
}

/* Parfemium — računalo kao notino.hr (≥1024 px), izmjereno na njihovoj stranici
   27. 9. 2026. na 1440 px: sadržaj 1250 px; siva ploha #f7f7f7 zaobljena 8 px s
   unutarnjim razmakom 48 px; bijele kartice zaobljene 4 px sa sjenom
   0 1px 2px rgba(71,71,71,.06), 0 4px 8px rgba(71,71,71,.1).
   Učitava se zadnja, pa ovdje stoje samo pravila koja se razlikuju od starih. */
:root{--pc-sjena:0 1px 2px rgba(71,71,71,.06),0 4px 8px rgba(71,71,71,.1)}

@media (min-width:1024px){
  /* ------------------------------ početna ------------------------------ */
  /* baner 1035 × 340 na sredini, strelice unutra */
  .pocetna .hp-hero .hero{max-width:1035px;margin:0 auto}
  .pocetna .hp-hero .baner.je-slog{min-height:340px;height:340px;padding:0 72px;gap:24px}
  .pocetna .hp-hero .baner-slog{min-height:340px;height:340px;padding:30px 0 52px}
  .pocetna .hp-hero .baner.je-slog .baner-tekst{padding:0;gap:8px}
  .pocetna .hp-hero .baner.je-slog .baner-tekst strong{font-size:44px;line-height:48px}
  .pocetna .hp-hero .baner.je-slog .baner-pod{font-size:18px;line-height:24px}
  .pocetna .hp-hero .baner.je-slog::before{height:44px}
  .pocetna .hero-strelica{width:44px;height:44px;background:#fff;box-shadow:var(--pc-sjena)}
  .pocetna .hero-strelica.lijevo{left:16px}.pocetna .hero-strelica.desno{right:16px}
  .pocetna .hero-tocke{padding:20px 0 24px}

  /* logotipi marki: 6 sivih pločica 188 × 118, razmak 24, sjena */
  .pocetna .hp-marke .marke-traka{padding:20px 0 40px}
  .pocetna .hp-marke .omot-siroki{width:min(var(--omot), 100% - 32px)}
  .pocetna .hp-marke .marke-mreza{gap:24px}
  .pocetna .hp-marke .marka-plocica.je-logo{height:118px;padding:16px;background:#f7f7f7;border:0;border-radius:4px;box-shadow:var(--pc-sjena)}
  .pocetna .hp-marke .marka-plocica.je-logo:hover{background:#efefef}

  /* dvije velike pločice 613 × 272, razmak 24 */
  .pocetna .plocice-2{gap:24px;padding:0 0 24px}
  .pocetna .plocica-velika{min-height:272px;height:272px}

  /* krugovi kategorija 80 px */
  .pocetna .krugovi{justify-content:space-between;padding:24px 72px 40px}
  .pocetna .krug{width:120px}

  /* police: 5 kartica po 231 px, razmak 24 */
  .pocetna .traka-klizac>*{flex:0 0 231px}
  .pocetna .polica{padding:24px 0 40px}
  .pocetna .polica-vrh{margin-bottom:24px}

  /* sive plohe: Vodič, Virtualna šminka, Video, Beauty Blog */
  .pocetna .vodic,.pocetna .hp-sminka .polica.siva,.pocetna .hp-video .polica,.pocetna .hp-blog .polica.siva{background:none;margin:24px 0;padding:0}
  .pocetna .vodic>.omot,.pocetna .hp-sminka .polica>.omot,.pocetna .hp-video .polica>.omot,.pocetna .hp-blog .polica>.omot{
    background:#f7f7f7;border-radius:8px;padding:48px}
  /* vodič: 4 bijele kartice 277 × 295, slika 163 */
  .pocetna .vodic-mreza{gap:16px}
  .pocetna .vodic-kartica{border-radius:4px;box-shadow:var(--pc-sjena);overflow:hidden;min-height:295px}
  .pocetna .vodic-slika{height:163px}
  .pocetna .vodic-kartica .telo{padding:16px;gap:12px}
  .pocetna .vodic-kartica p{font-size:16px;line-height:22px;font-weight:500}
  .pocetna .vodic-kartica .gumb{height:auto;min-height:0;padding:0;border:0;background:none;font-size:14px;font-weight:500;text-decoration:underline}
  /* virtualna šminka i video: kartice 300 × 526, razmak 12 */
  .pocetna .sminka-mreza,.pocetna .video-mreza{gap:12px}
  .pocetna .sminka-kartica{height:526px;border-radius:4px;box-shadow:var(--pc-sjena)}
  .pocetna .sminka-kartica b{font-size:14px;font-weight:500}
  .pocetna .sminka-kartica .oz{font-size:12px;font-weight:500}
  .pocetna .video-kartica{height:526px;border-radius:12px;box-shadow:var(--pc-sjena);overflow:hidden}
  .pocetna .video-kartica b{font-size:18px;font-weight:500}
  .pocetna .video-kartica .vk-dno{font-size:14px;color:#fff}
  /* blog: bijele kartice 288 × 316, razmak 12 */
  .pocetna .blog-mreza{gap:12px}
  .pocetna .clanak-kartica{border:0;border-radius:4px;box-shadow:var(--pc-sjena);overflow:hidden;min-height:316px}
  .pocetna .clanak-slika{height:160px}
  .pocetna .clanak-kartica .telo{padding:16px}
  .pocetna .clanak-kartica h3{font-size:16px;line-height:22px;font-weight:500}
  .pocetna .clanak-kartica .gumb{height:auto;min-height:0;padding:0;border:0;background:none;font-size:14px;font-weight:500;text-decoration:underline}
  /* usluge: 3 sive kartice 409 × 148, razmak 12, tekst 14 */
  .pocetna .usluge{gap:12px;padding:0}
  .pocetna .usluga{min-height:148px;padding:20px 24px;box-shadow:var(--pc-sjena);background:#f7f7f7}
  .pocetna .usluga h3{font-size:16px;font-weight:500;margin-bottom:8px}
  .pocetna .usluga p{font-size:14px;line-height:20px;color:#474747;margin-bottom:10px}
  .pocetna .usluga a{font-size:14px;font-weight:500}
}
/* kategorije ispod (SEO): tri stupca bez okvira, naslov 16/700, veze 12 #6b6b6b — i na uskom PC-u */
@media (min-width:761px){
  .seo-mreza{gap:0;padding:0 0 40px}
  .seo-kartica{border:0;padding:0 20px}
  .seo-kartica h3{font-size:16px;font-weight:700;color:#474747;margin-bottom:12px}
  .seo-kartica div{gap:6px 12px}
  .seo-kartica a{font-size:12px;color:#6b6b6b}
}

/* --------------------------- popis / kategorija ---------------------------
   notino.hr/parfemi/ na 1440: lijevi stupac 253 od vrha, razmak 32, desno 1035
   (mrvice, naslov 32/500, baner 1035 × 340, "Obradujte se…" 24/500 i 6 logotipa,
   zatim poredak i mreža 4 × 241). Filtri: grupe s crtom #e1e1e1 odozgo,
   zaglavlje 44 (16/500), redak kvačice 44, kvadratić 16, cijena u poljima 113 × 45. */
@media (min-width:1024px){
  .popis-sloj{gap:32px}
  /* notino.hr: lijevi stupac je ljepljiv (sticky, top = visina prozora − visina stupca,
     računa trgovina.js) — klizi dok mu ne dođe dno, pa stoji dok se listaju proizvodi */
  .filtri{flex:0 0 253px;padding-right:0;position:sticky;top:16px;align-self:flex-start;padding-top:12px}
  .popis-desno{flex:1;min-width:0}
  .popis-vrh .omot-siroki{width:auto;margin:0}
  .popis-vrh .mrvice{padding:12px 0 0;font-size:12px}
  .popis-glava{padding:18px 0 16px}
  .popis-glava h1{font-size:32px;line-height:36px;font-weight:500}
  .popis-vrh .kat-hero{height:340px;margin:0 0 40px}
  .popis-vrh .kh-slika{min-height:340px}
  .popis-vrh .marke-traka{padding:0 0 40px}
  .popis-vrh .marke-traka h2,.popis-vrh .marke-traka h2.sredina{text-align:left;font-size:24px;line-height:32px;font-weight:500;margin-bottom:24px}
  .popis-vrh .marke-mreza{gap:48px}
  .popis-vrh .marka-plocica.je-logo{height:64px;padding:0 8px;background:none;border:0;box-shadow:none}
  .kat-stablo{padding:0 0 16px;border-bottom:0}
  .filtar{border-top:.67px solid #e1e1e1;border-bottom:0;padding:8px 0}
  .filtar>summary{height:44px;font-size:16px;font-weight:500}
  .filtar>summary::after{width:8px;height:8px;border-width:0 1.5px 1.5px 0;margin-right:6px}
  .filtar-telo{padding-top:4px;padding-bottom:8px}
  .kvacica{align-items:center;min-height:44px;padding:4px 0;gap:12px}
  .kvacica i{width:16px;height:16px;border:.67px solid #ababab;border-radius:2px;margin-top:0}
  .kvacica span{color:#474747}
  .kvacica b{color:#6b6b6b}
  .cijena-polja{gap:0;justify-content:space-between;margin-bottom:24px;line-height:45px}
  .cijena-kutija{flex:0 0 113px}
  .cijena-polja input{width:113px;height:45px;border:.67px solid #e1e1e1;border-radius:2px;padding:0 28px 0 16px;text-align:left}
  .cijena-crta{color:#ababab}
  .kvacica .ocjena{display:inline-flex;align-items:center;height:auto;gap:0}
  .kvacica .ocjena .zvj{flex:0 0 16px;width:16px;height:16px;margin-right:0}
  .kvacica .ocjena b{margin-left:6px;font-size:12px;font-weight:500}
  .cijena-form .gumb[type=submit]{display:none}
  .klizac input[type=range]::-webkit-slider-runnable-track{height:4px}
  .klizac input[type=range]::-webkit-slider-thumb{width:20px;height:20px;margin-top:-8px}
}

/* ------------------------------ stranica marke ------------------------------
   notino.hr/armaf/: sve u 1035 px — naslov, baner 1035 × 340, kolekcije 240 × 318
   (slika 262, naziv 14), "ARMAF" 24/500 lijevo i opis 16 desno (769 px),
   zatim filtri 253 i mreža u tri stupca */
.marka-baner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-items:center;background:#f1ebe1;margin:0 0 40px;overflow:hidden;color:#000}
.mb-tekst{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:32px 40px}
.mb-logo{max-width:240px;max-height:90px;object-fit:contain;mix-blend-mode:multiply}
.mb-tekst strong{font-size:40px;line-height:44px;font-weight:500}
.mb-pod{font-size:16px;line-height:22px;color:#474747}
.mb-slog .slog{height:280px}
.marka-o{display:grid;grid-template-columns:266px minmax(0,1fr);gap:0;margin:8px 0 48px}
.marka-o h2{font-size:24px;line-height:32px;font-weight:500}
.marka-o-tekst p{font-size:16px;line-height:28px;color:#000}
@media (min-width:1024px){
  .popis-uski{width:min(1035px, 100% - 32px)}
  .popis-uski .mreza{grid-template-columns:repeat(3,minmax(0,1fr))}
  .popis-uski>.popis-vrh .mrvice{padding:12px 0 0}
  .marka-baner{height:340px}
  .mb-slog .slog{height:340px}
  .marka-plocice{grid-template-columns:repeat(4,240px);gap:24px;justify-content:center;padding:0 0 40px}
  .mp-kom{gap:0;text-align:left}
  .mp-kom img{height:262px;border:0;padding:16px;background:#f7f7f7;object-fit:contain;mix-blend-mode:multiply}
  .mp-kom b{padding-top:12px;min-height:56px;font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;color:#000}
}
@media (max-width:1023px){
  .marka-baner{grid-template-columns:1fr}
  .marka-o{grid-template-columns:1fr;gap:8px}
}

/* -------------------------------- lista želja --------------------------------
   notino.hr/wishlist/: sadržaj 1004 px, naslov 32/500, kartica popisa bijela
   sa sjenom (naziv 16/500, "Proizvoda: N" 14 #6b6b6b), gumb "Novi popis" desno */
@media (min-width:1024px){
  .zelje-stranica{max-width:1004px;margin:0 auto}
  .zelje-stranica h1{font-weight:500;line-height:36px}
  .zelje-uvod{font-size:16px;line-height:28px;color:#474747;margin:8px 0 24px}
  .zelje-kartica{min-height:96px;padding:0 16px;border:0;border-radius:0 0 4px 4px;box-shadow:var(--pc-sjena);background:#fff}
  .zelje-kartica.je-tu{box-shadow:var(--pc-sjena),inset 0 3px 0 #000}
  .zelje-kartica b{font-size:16px}
  .zelje-kartica span{font-size:14px;color:#6b6b6b}
}

/* zaglavlje na računalu nije prikovano (notino.hr: pri listanju odlazi s vrha) */
@media (min-width:1024px){ .zaglavlje{position:relative} }

/* ------------------------ prijedlozi tražilice (notino.hr) ------------------------
   ploča s dva stupca, naslovi 12 #808080 bez velikih slova, redak veze 32 (14),
   proizvod 50 px: sličica 50, naziv 14 crn u jednom retku, vrsta 14 #808080;
   stranica ispod se zatamni */
@media (min-width:761px){
  .sapt{border:0;box-shadow:0 8px 24px rgba(0,0,0,.18)}
  .sapt-naslov{font-size:12px;letter-spacing:0;text-transform:none;color:#808080;font-weight:400}
  .sapt-lijevo a{display:flex;align-items:center;min-height:32px;padding:0 18px;color:#404040}
  .sapt-lijevo a b{font-weight:500;margin-right:4px}
  .sapt-proizvod{min-height:66px;padding:8px 18px}
  .sapt img{width:50px;height:50px}
  .sapt-proizvod>span{font-size:14px;line-height:20px}
  .sapt-ime{color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sapt i{font-size:14px;color:#808080}

  .zaglavlje:has(.sapt:not([hidden])){z-index:130}
}

/* -------------------------- izbornik kategorija (mega) --------------------------
   notino.hr: ploča preko cijele širine, stupci 200 px s razmakom 32 od 40 px lijevo,
   naslov skupine 14/500 crn (20), poveznica 14 #404040 u retku 30, X desno;
   bez bloka s proizvodima */
@media (min-width:1024px){
  .mega{border-top:0;box-shadow:none}
  .mega-red{gap:32px;padding:40px 40px 48px}
  .mega-stupac{flex:0 0 200px;max-width:200px}
  .mega-grupa+.mega-grupa{margin-top:16px}
  .mega-naslov{font-size:14px;font-weight:500;line-height:20px;margin-bottom:12px}
  .mega-naslov a{color:#000}
  .mega-grupa li{margin-bottom:0}
  .mega-grupa a{display:block;padding:5px 0;font-size:14px;line-height:20px;color:#404040}
  .mega-proizvodi{display:none}
  .mega-x{top:36px;right:44px}
}

/* ----------------------- mala košarica (notino.hr, prelazak mišem) ----------------------- */
.mini-kos{position:absolute;z-index:140;font-family:inherit;line-height:20px;width:340px;padding:24px;background:#fff;color:#000;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.mini-kos[hidden]{display:none}
.mk-stavke{max-height:360px;overflow-y:auto}
.mk-stavka{display:flex;gap:16px;min-height:75px;color:#404040}
.mk-stavka + .mk-stavka{margin-top:16px}
.mk-stavka img{flex:none;width:70px;height:70px;object-fit:contain;margin-top:5px}
.mk-t{flex:1;min-width:0;display:flex;flex-direction:column;font-size:14px;line-height:20px}
.mk-ime{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-ime b{font-weight:400;color:#000}
.mk-vrsta{color:#808080;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-dno{display:flex;justify-content:space-between;align-items:center;min-height:30px;color:#000}
.mk-dno b{font-weight:500}
.mk-gumb{display:flex;align-items:center;justify-content:center;height:40px;margin-top:24px;background:#000;border:.67px solid #000;color:#fff;font-size:14px;font-weight:500}
.mk-prazno{font-size:14px;color:#404040}
/* mala košarica: zaštita od općih pravila za veze i natpise */
.mini-kos a,.mini-kos span,.mini-kos b{padding:0;margin:0;min-height:0;height:auto;float:none;border:0}
.mini-kos .mk-stavka{display:flex;align-items:flex-start;min-height:75px}
.mini-kos .mk-t{display:flex;flex-direction:column}
.mini-kos .mk-ime,.mini-kos .mk-vrsta{display:block}
.mini-kos .mk-dno{display:flex;min-height:30px}
.mini-kos .mk-gumb{display:flex;height:40px;margin-top:24px;border:.67px solid #000}

/* kartica u popisu: notino.hr nema "Brzi pregled" (samo srce u kutu) */
.kartica [data-brzo]{display:none!important}

/* kartice na stranici proizvoda: vidi se jedna po jedna (notino.hr) */
@media (min-width:761px){
  .bp-k.skriveno{display:none}
  .bp-k-podnaslov{margin:0 0 12px;font-size:20px;line-height:28px;font-weight:500}
  .bp-k-popis{margin:0 0 24px;padding-left:20px;list-style:disc}
  .bp-k-popis li{font-size:16px;line-height:28px}
}

/* galerija preko cijelog zaslona (notino.hr) */
.bg-zastor{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.8);display:grid;place-items:center}
.bg-ploca{position:relative;display:flex;flex-direction:column;width:min(1200px,100% - 48px);height:min(738px,100% - 48px);padding-top:28px;background:#fff}
.bg-x{position:absolute;top:0;right:0;width:28px;height:28px;display:grid;place-items:center;color:#000;background:none}
.bg-velika{position:relative;flex:1;min-height:0;display:grid;place-items:center}
.bg-velika{overflow:hidden}
.bg-velika img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;object-fit:contain}
.bg-str{position:absolute;top:50%;margin-top:-22px;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:var(--pc-sjena);display:grid;place-items:center;color:#000}
.bg-str.lijevo{left:20px}.bg-str.desno{right:20px}
.bg-str[hidden]{display:none}
.bg-palci{flex:none;display:flex;justify-content:center;gap:8px;padding:20px}
.bg-palci button{width:80px;height:80px;padding:6px;border-radius:4px;background:#f7f7f7}
.bg-palci button.je-tu{box-shadow:inset 0 0 0 2px #000}
.bg-palci img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.bp-galerija-niz img{cursor:zoom-in}

/* ladica "Mogućnosti dostave" (notino.hr): 400 px zdesna, naslov 16/500, dvije kartice 46,
   redak 97: naziv 14/500, rok 12 #6b6b6b, datum 14/500 zeleno, cijena 14/500 #6b6b6b */
.md-zastor{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0);transition:background .25s}
.md-zastor.vidi{background:rgba(0,0,0,.5)}
.md-ladica{position:absolute;top:0;right:0;bottom:0;width:400px;max-width:100%;background:#fff;overflow-y:auto;transform:translateX(100%);transition:transform .25s ease}
.md-zastor.vidi .md-ladica{transform:none}
.md-glava{position:relative;height:64px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:500}
.md-x{position:absolute;right:0;top:5px;width:52px;height:53px;display:grid;place-items:center;color:#000}
.md-kartice{display:flex}
.md-kartice button{flex:1;height:46px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:500;color:#6b6b6b;background:#fff;border-bottom:2px solid #e1e1e1}
.md-kartice button.je-tu{color:#000;border-bottom-color:#000}
.md-red{display:flex;align-items:flex-start;gap:12px;min-height:97px;padding:16px 20px;border-bottom:.67px solid #e1e1e1}
.md-red>svg{flex:none;margin-top:1px}
.md-t{flex:1;min-width:0;display:flex;flex-direction:column}
.md-t b{font-size:14px;font-weight:500;line-height:20px}
.md-t i{font-style:normal;font-size:12px;line-height:16px;color:#6b6b6b;margin-top:4px}
.md-t em{font-style:normal;font-size:14px;font-weight:500;line-height:17px;color:var(--zelena);margin-top:5px}
.md-c{flex:none;align-self:flex-end;font-size:14px;font-weight:500;color:#6b6b6b}
.md-napomena{display:flex;gap:8px;padding:20px;font-size:12px;line-height:18px;color:#6b6b6b}
.md-napomena svg{flex:none;color:#6b6b6b}

/* ---- fotografska scena s pravim izrezanim proizvodima na postolju (lib/komponente.js scenaHtml) ----
   .scena pokriva plohu; .scena-okvir je slika u svom omjeru (1552 × 512) razvučena
   kao "cover" pa pomaknuta da postolje stoji na --t širine; proizvodi stoje na
   izmjerenoj plohi postolja (--px, --py, --pw u udjelima slike). */
.scena{position:absolute;inset:0;overflow:hidden;container-type:size;pointer-events:none;z-index:0}
.scena-okvir{--W:max(100cqw,303.125cqh);position:absolute;width:var(--W);aspect-ratio:1552/512;
  left:clamp(calc(100cqw - var(--W)),calc(var(--t)*100cqw - var(--px)*var(--W)),0px);
  top:calc(50cqh - var(--W)*.16495);background:var(--scena) 0 0/100% 100% no-repeat}
.scena-proizvodi{position:absolute;left:calc(var(--px)*100%);bottom:calc((1 - var(--py))*100%);
  width:calc(var(--pw)*122%);height:calc(min(.56,var(--py) - .1)*100%);transform:translateX(-50%);
  display:flex;align-items:flex-end;justify-content:center;gap:2.5%}
.scena-proizvodi img{flex:0 1 auto;min-width:0;height:82%;width:auto;object-fit:contain;object-position:50% 100%;
  filter:drop-shadow(0 .6cqh .7cqh rgba(40,30,20,.28))}
.scena-proizvodi img.v1,.scena-proizvodi.n1 img,.scena-proizvodi.n2 img{height:100%}
.scena-proizvodi.n4{width:calc(var(--pw)*106%);height:calc(min(.5,var(--py) - .1)*100%);gap:1.5%}
/* naslovni baner */
.baner.ima-scenu{background:var(--b1);isolation:isolate}
.baner.ima-scenu::before{display:none}
.baner.ima-scenu>.baner-tekst{position:relative;z-index:1}
.baner.ima-scenu::after{content:"";position:absolute;inset:0 42% 0 0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.36) 55%,rgba(255,255,255,0) 100%)}
/* zaglavlje kategorije (notino.hr: fotografski baner): tekst lijevo, postolje desno */
.kat-hero.ima-scenu{position:relative;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);background:#f1ebe1;isolation:isolate}
.kat-hero.ima-scenu .kh-tekst{grid-column:1;position:relative;z-index:1;
  background:linear-gradient(90deg,rgba(255,255,255,.66),rgba(255,255,255,.3) 70%,rgba(255,255,255,0))}

/* popis se osvježava bez nove stranice (trgovina.js): dok čeka, proizvodi blijede */
.popis-sloj.je-ceka{opacity:1;cursor:progress}
.popis-sloj.je-ceka .popis-desno{opacity:.45;transition:opacity .15s}
/* stablo u lijevom stupcu (kategorija i marka): vrh kao notino.hr, 14 px Medium, crno */
@media (min-width:1024px){ .kat-stablo-vrh a{font-weight:500;color:#000} }

/* ======================= animacije i prijelazi (notino.hr) =======================
   Sve mjere su iz Notinovih stilova (27. 9. 2026):
   prozor 0,4 s ease odozgo 300 px · donja ploča 0,5 s ease-out, zastor 0,5 s ·
   ladica zdesna 25rem 0,5 s ease-out · srce 1 -> 1,5 -> 1 u 0,35 s · zatamnjenje
   0,3 s nakon 0,1 s · mini košarica 0,35 s · baner pretapanje 0,5 s ease-in-out ·
   poveznice 0,3 s (podnožje 0,5 s) · gumbi 0,3 s · polja 0,25 s (tražilica 0,5 s) ·
   pločice sjena 0,25 s · čipovi i logotipi pozadina 0,2 s · slike blogova 1,5 s ×1,1 ·
   srce na kartici se na računalu pojavi tek pri prelasku mišem (0,35 s).
   Stvari koje se pokazuju atributom hidden animiraju se ključnim kadrovima. */
@keyframes pm-pojava{from{opacity:0}to{opacity:1}}
@keyframes pm-slijeva{from{transform:translateX(-100%)}to{transform:none}}
@keyframes pm-srce{0%{transform:scale(1)}50%{transform:scale(1.5)}100%{transform:scale(1)}}
@keyframes pm-tocka{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:no-preference){
  /* poveznice, gumbi, polja */
  a{transition:color .3s}
  .gumb{transition:background-color .3s,border-color .3s,color .3s}
  input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{transition:border-color .25s}
  .trazilica input,.nl-polje input{transition:border-color .5s}
  .podnozje a{transition:color .5s}
  /* pločice naslovnice i bloga: sjena pri prelasku mišem */
  .b-vodic-k,.b-sminka-k,.b-video-k,.b-usluga,.b-blog-k,.clanak-kartica,.video-kartica,.usluga{transition:box-shadow .25s}
  .marka-plocica,.b-naslovna-marke a,.b-cipovi a,.mob-kategorije a,.cip{transition:background-color .2s,border-color .2s}
  .b-blog-k img,.clanak-kartica img{transition:transform 1.5s}
  @media (hover:hover){
    .b-vodic-k:hover,.b-sminka-k:hover,.b-video-k:hover,.b-usluga:hover,.b-blog-k:hover,.clanak-kartica:hover,.video-kartica:hover,.usluga:hover{
      box-shadow:0 1px 2px rgba(71,71,71,.06),0 6px 20px rgba(71,71,71,.12)}
    .marka-plocica:hover,.b-naslovna-marke a:hover{background-color:#f1f1f1}
    .b-cipovi a:hover,.mob-kategorije a:hover,.cip:hover{background-color:#f7f7f7}
    .b-blog-k:hover img,.clanak-kartica:hover img{transform:scale(1.1)}
  }
  /* kartica proizvoda na računalu: marka i naziv se podvuku, srce se pojavi */
  @media (min-width:992px) and (hover:hover){
    .kartica:hover .k-marka,.kartica:hover .k-ime{text-decoration:underline}
    .kartica .k-srce{transition:opacity .35s}
    .kartica:not(:hover):not(:focus-within) .k-srce:not(.je-aktivno){opacity:0!important} /* jače od zlato.css .k-srce{opacity:1!important} */
  }
  /* srce */
  .k-srce.je-aktivno svg,.k-srce-veliki.je-aktivno svg,.bp-srce.je-aktivno svg,.p-srce.je-aktivno svg,[data-zelja].je-aktivno svg{animation:pm-srce .35s ease}
  @media (min-width:1024px){
    /* mega izbornik: izbornik odmah, stranica ispod se lagano zatamni */
    .sapt:not([hidden]){animation:pm-pojava .15s ease}
    .mini-kos{animation:pm-pojava .35s ease}
    /* galerija preko cijelog zaslona */
    .bg-zastor{animation:pm-pojava .4s ease}
  }
  /* prozori na računalu (i "Dodano u košaricu"): odozgo 300 px uz pretapanje, 0,4 s */
  @media (min-width:761px){
    .b-list{transition:transform .4s ease,opacity .4s ease;transform:translateY(calc(-50% - 300px))}
    .b-list.vidi{transform:translateY(-50%)}
    .b-list.dodano{transform:translateY(-300px)}
    .b-list.dodano.vidi{transform:none}
    .b-zastor{transition:opacity .4s ease}
    /* obavijest dolazi zdesna (dolje desno) */
    .b-poruka{left:auto;right:24px;bottom:24px;max-width:420px;transform:translateX(calc(100% + 24px));transition:transform .4s ease,opacity .4s ease}
    .b-poruka.vidi{transform:none}
  }
  /* donje ploče na mobitelu: odozdo 0,5 s, zastor 0,5 s; obavijest odozdo */
  @media (max-width:760px){
    .b-list{transition:transform .5s ease-out}
    .b-zastor{transition:opacity .5s ease-in-out}
    .b-poruka{transform:translateY(calc(100% + 16px));transition:transform .4s ease-out,opacity .4s}
  }
  /* ladica s dostavom: zdesna, 0,5 s */
  .md-ladica{transition:transform .5s ease-out}
  .md-zastor{transition:background .5s ease-in-out}
  /* izbornik na mobitelu i uskom PC-u klizi slijeva, zastor se pretopi */
  .mob-izbornik:not([hidden]){animation:pm-slijeva .3s cubic-bezier(.4,0,.2,1)}
  .zastor:not([hidden]){animation:pm-pojava .3s ease}
  /* skupina filtara se lagano otvori */
  /* glavni baner: slike se pretapaju, točkica se puni dok baner stoji */
  .hero-traka.pretapanje>*{transition:opacity .5s ease-in-out,visibility .5s ease-in-out}
  .hero-tocke button[aria-current="true"]::after{animation:pm-tocka 6s linear forwards}
  .hero.stoji .hero-tocke button[aria-current="true"]::after{animation:none}
}
/* baner s pretapanjem (JS dodaje .pretapanje): sve slike na istom mjestu */
.hero-traka.pretapanje{display:grid;transform:none!important;transition:none}
.hero-traka.pretapanje>*{grid-area:1/1;opacity:0;visibility:hidden}
.hero-traka.pretapanje>.je-tu{opacity:1;visibility:visible}
.hero-tocke button{position:relative;overflow:hidden}
.hero-tocke button[aria-current="true"]::after{content:"";position:absolute;inset:0;background:#000;transform-origin:left}
/* zatamnjenje (mega izbornik, tražilica) kao notino.hr počinje ispod izbornika:
   gornja traka i zaglavlje ostaju iznad njega */
@media (min-width:1024px){ .traka-gore{position:relative;z-index:121} }
/* tekst samo za čitače zaslona i tražilice (npr. h1 naslovnice) */
.skriveno-oku{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------- zatvaranje (notino.hr): ništa ne nestaje naglo ----------------
   zastor ispod mega izbornika i tražilice: pravi element (trgovina.js), pa se
   pretapa i kad se otvara (0,3 s nakon 0,1 s) i kad se zatvara */
@keyframes pm-nestanak{from{opacity:1}to{opacity:0}}
@keyframes pm-ulijevo{from{transform:none}to{transform:translateX(-100%)}}
.pm-zastor{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:110;pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity .3s ease .1s,visibility 0s linear .4s}
@media (min-width:1024px){
  body:has(.nav-stavka:hover .mega) .pm-zastor,body:has(.sapt:not([hidden]):not(.odlazi)) .pm-zastor{opacity:1;visibility:visible;
    transition:opacity .3s ease .1s,visibility 0s}
}
@media (prefers-reduced-motion:no-preference){
  .mob-izbornik.odlazi{animation:pm-ulijevo .3s cubic-bezier(.4,0,.2,1) forwards}
  .zastor.odlazi,.sapt.odlazi,.bg-zastor.odlazi{animation:pm-nestanak .3s ease forwards}
  .sapt.odlazi{animation-duration:.15s}
  .mini-kos.odlazi{animation:pm-nestanak .35s ease forwards}
  /* skupine filtara se otvaraju i sklapaju po visini (0,3 s ease-out), gdje preglednik to zna */
  :root{interpolate-size:allow-keywords}
  details.filtar::details-content{height:0;overflow:clip;transition:height .3s ease-out,content-visibility .3s allow-discrete}
  details.filtar[open]::details-content{height:auto}
}