@charset "UTF-8";
/* Tvoj Izbor design system: "Vedro i pouzdano" (light-committed) */
/* Emoji i simboli u `content:` pisu se kao CSS escape sekvence (\2139\FE0F), a ne kao
   doslovni znaci. Doslovni su se lomili u mojibake ("ℹï¸" umesto "ℹ️" u praznoj korpi)
   jer se CSS fajl servira bez deklaracije kodiranja, pa pregledac bajtove cita kao Latin-1.
   Escape sekvence su nezavisne od kodiranja fajla i ne mogu da se pokvare. */
/* Fontovi: varijabilni woff2 sa Google Fonts, self-hostovani (0 spoljnih zahteva).
   Ranije su ovde stajali subsetovi od ~16KB koji su sadrzali SAMO SACICU GLIFOVA. Mereno
   preko CDP CSS.getPlatformFontsForNode: H1 je iscrtavao 5 glifova iz Baloo 2 a 34 iz
   Segoe UI, telo teksta je vuklo "Nunito ExtraLight" iako je deklarisano 400, a dugmad su
   bila 100% Segoe UI. Svaki natpis je bio mesavina dva fonta, pa su nasa slova izgledala
   tudje u odnosu na ona oko sebe.
   Sada: latin + latin-ext po fontu, sa unicode-range, pa pregledac skida latin-ext samo kad
   strana ima nasih slova. font-weight je RASPON jer su fajlovi varijabilni: fiksna vrednost
   naterala bi pregledac na podrazumevanu instancu umesto na trazenu debljinu. */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/baloo2-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:'Baloo 2';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/baloo2-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}
@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url(fonts/nunito-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:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url(fonts/nunito-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}

:root{
  --bg:#FFFDF9;--surface:#FFFFFF;--surface-2:#FFF7EE;--ink:#42313E;--ink-soft:#857785;--line:#F3E9DD;
  --coral:#FF6B57;--coral-d:#F04E38;--coral-50:#FFE9E3;--mint:#12B3A3;--mint-d:#0C9284;--mint-50:#D6F5F0;
  --sun:#FFB020;--sun-d:#F59300;--sun-50:#FFF1D4;--lilac:#8F6BE0;--lilac-50:#EEE7FC;--pink:#FF7BB0;--pink-50:#FFE7F1;
  --shadow:0 16px 38px rgba(120,70,80,.13);--shadow-sm:0 6px 18px rgba(120,70,80,.09);--shadow-c:0 12px 26px rgba(255,107,87,.30);
  --r:26px;--r-sm:16px;--r-pill:999px;--wrap:1160px;
  --font-head:'Baloo 2',ui-rounded,"Segoe UI",system-ui,sans-serif;
  --font-body:'Nunito',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
h1,h2,h3,h4,.ff{font-family:var(--font-head);font-weight:700;line-height:1.1;letter-spacing:-.015em;text-wrap:balance;margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.eyebrow{font-family:var(--font-head);font-weight:700;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--coral)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--font-head);font-weight:700;border:none;cursor:pointer;padding:.75em 1.4em;border-radius:var(--r-pill);font-size:1.02rem;transition:transform .16s,box-shadow .16s,background .16s,border-color .16s}
.btn--primary{background:var(--coral);color:#fff;box-shadow:var(--shadow-c)}
.btn--primary:hover{background:var(--coral-d);transform:translateY(-3px) scale(1.02)}
.btn--ghost{background:var(--surface);color:var(--ink);border:2px solid var(--line)}
.btn--ghost:hover{border-color:var(--coral);color:var(--coral);transform:translateY(-2px)}
.btn--big{padding:.9em 1.8em;font-size:1.1rem}
:focus-visible{outline:3px solid var(--coral);outline-offset:2px;border-radius:8px}
section{padding:54px 0;position:relative}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
.sec-head .sub{color:var(--ink-soft);font-size:1rem;margin-top:5px}
.more{font-family:var(--font-head);font-weight:700;color:var(--coral);white-space:nowrap}
.more:hover{color:var(--coral-d)}
.wash-mint{background:var(--mint-50)}.wash-sun{background:var(--sun-50)}.wash-lilac{background:var(--lilac-50)}.wash-coral{background:var(--coral-50)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes pop{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* TOPBAR */
.top{background:linear-gradient(90deg,var(--coral),var(--sun));color:#fff}
.top .wrap{display:flex;gap:22px;align-items:center;justify-content:center;font-size:.84rem;padding:9px 20px;font-weight:700;flex-wrap:wrap}
.top span{display:inline-flex;gap:.4em;align-items:center}
@media(max-width:640px){.top .wrap span:nth-child(2){display:none}}

/* HEADER */
/* Ranije: providna pozadina + backdrop-filter:blur(12px) na sticky elementu. Ta kombinacija
   je poznat izvor kompozitnih artefakata pri skrolu (zaostale svetle mrlje preko trake iznad),
   sto je korisnik i prijavio. Zamucenje je uporedjeno na screenshotima sa i bez: na skoro
   beloj pozadini razlika se NE VIDI. Nosilo je, dakle, ceo rizik i GPU trosak ni za sta.
   Puna pozadina uklanja citavu klasu tog baga. */
.hdr{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:16px;height:72px}
.wordmark{font-family:var(--font-head);font-weight:700;font-size:1.55rem;display:flex;align-items:center;gap:.42em;color:var(--ink)}
.wordmark .dot{width:38px;height:38px;border-radius:13px;background:linear-gradient(135deg,var(--coral),var(--sun));display:grid;place-items:center;font-size:1.2rem;box-shadow:0 8px 16px rgba(255,107,87,.34);flex:none}
.nav{display:flex;margin-left:12px}
.nav-list{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.nav-list a{font-family:var(--font-head);font-weight:700;color:var(--ink-soft);padding:.5em .82em;border-radius:var(--r-pill);font-size:1rem;display:block}
.nav-list a:hover,.nav-list .current-menu-item>a{color:var(--coral);background:var(--coral-50)}
.hdr .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.iconbtn{width:44px;height:44px;border-radius:var(--r-pill);border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--ink-soft);font-size:1.2rem;position:relative;text-decoration:none}
.iconbtn:hover{border-color:var(--coral);color:var(--coral)}
.cbadge{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--coral);color:#fff;font-family:var(--font-head);font-weight:700;font-size:.68rem;display:grid;place-items:center;border:2px solid var(--bg)}
#navtoggle{position:absolute;opacity:0;pointer-events:none}
.burger{display:none}
.navscrim{display:none}
@media(max-width:900px){
  /* `.nav` je na desktopu display:flex. Na mobilnom je postajao fixed preko cele sirine, ali
     je `.nav-list` ostajao flex STAVKA, pa se skupljao na sirinu sadrzaja i lepio uz levu
     ivicu: meni je izlazio na suprotnoj strani od hamburgera. `display:block` vraca
     `.nav-list` u normalan tok, pa panel pokriva punu sirinu. */
  /* Zastor: pokriva sve ispod otvorenog menija i, posto je label za #navtoggle, zatvara ga
     na klik bilo gde van njega. Ispod menija po z-indexu (48 < 49), iznad sadrzaja. */
  .navscrim{display:block;position:fixed;inset:72px 0 0 0;z-index:48;background:rgba(66,49,62,.34);
    opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;cursor:pointer}
  #navtoggle:checked ~ .navscrim{opacity:1;visibility:visible}
  /* Lepljiva traka (z-index 60) i dugme "na vrh" (55) lebde IZNAD zastora (48) i menija (49),
     pa su dok je meni otvoren stajali nezatamnjeni i delovali klikabilno. Nisu deca
     #navtoggle (u footeru su), pa ih obican sibling ne dohvata: otud :has(). */
  body:has(#navtoggle:checked) .sticky-cta,
  body:has(#navtoggle:checked) .to-top{opacity:0;visibility:hidden;pointer-events:none}
  .nav{display:block;position:fixed;inset:72px 0 auto 0;margin:0;z-index:49;transform:translateY(-125%);transition:transform .25s}
  .nav-list{display:flex;flex-direction:column;gap:2px;background:var(--surface);border-bottom:1px solid var(--line);padding:12px 20px 20px;box-shadow:var(--shadow)}
  .nav-list a{padding:.85em 1em;font-size:1.12rem}
  #navtoggle:checked ~ .nav{transform:translateY(0)}
  .burger{display:grid}.cta-desktop{display:none}
}

/* HERO */
.hero{background:radial-gradient(1200px 500px at 80% -10%,var(--sun-50),transparent 60%),radial-gradient(900px 500px at -5% 110%,var(--mint-50),transparent 55%),var(--bg);overflow:hidden}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:46px;align-items:center;padding:56px 20px 50px}
.shape{position:absolute;font-size:2rem;z-index:0;opacity:.9;animation:float 6s ease-in-out infinite}
.s1{top:8%;right:40%}.s2{bottom:14%;right:6%;font-size:1.6rem;animation-delay:1.4s}.s3{top:22%;right:2%;animation-delay:.8s}
.hero h1{font-size:clamp(2.3rem,5vw,3.7rem)}
.hero h1 .hl{color:var(--coral);white-space:nowrap}
.hero .lead{font-size:1.18rem;color:var(--ink-soft);margin:18px 0 24px;max-width:36ch}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.badges{display:flex;gap:16px;margin-top:22px;flex-wrap:wrap}
.badges span{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;font-weight:700;color:var(--ink-soft)}
.badges .bd{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;color:#fff}
.bd.g{background:var(--mint)}.bd.o{background:var(--sun)}.bd.p{background:var(--pink)}
.tools{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);position:relative;animation:pop .5s ease}
.tools .th{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.tools h3{font-size:1.12rem}
.tools .pin{font-size:.74rem;font-weight:700;color:var(--sun-d);background:var(--sun-50);padding:.32em .75em;border-radius:var(--r-pill)}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tool{display:flex;gap:12px;align-items:center;padding:14px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line);transition:transform .16s,box-shadow .16s;min-width:0}
.tool:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.tool .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:1.3rem;flex:none}
.tool .tt{min-width:0}
.tool b{font-family:var(--font-head);font-size:1rem;display:block;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool span{font-size:.78rem;color:var(--ink-soft)}
.ic.c1{background:var(--coral-50)}.ic.c2{background:var(--mint-50)}.ic.c3{background:var(--sun-50)}.ic.c4{background:var(--lilac-50)}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;padding-top:36px;gap:28px}.hero .lead{max-width:none}.shape{display:none}}

/* JOURNEY */
.journey{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory}
.jstep{scroll-snap-align:start;flex:0 0 auto;width:172px;border-radius:var(--r-sm);padding:20px;transition:transform .16s;border:1px solid var(--line)}
.jstep:nth-child(5n+1){background:var(--pink-50)}.jstep:nth-child(5n+2){background:var(--coral-50)}.jstep:nth-child(5n+3){background:var(--mint-50)}.jstep:nth-child(5n+4){background:var(--sun-50)}.jstep:nth-child(5n+5){background:var(--lilac-50)}
.jstep:hover{transform:translateY(-6px)}
.jstep .je{font-size:2rem;display:block;margin-bottom:8px}
.jstep b{font-family:var(--font-head);font-size:1.08rem;display:block}
.jstep span{font-size:.83rem;color:var(--ink-soft)}

/* CATEGORIES */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat{border-radius:var(--r);padding:26px;transition:transform .16s,box-shadow .16s;position:relative;overflow:hidden}
.cat:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm)}
.cat .emo{font-size:2rem;display:block;margin-bottom:10px}
.cat b{font-family:var(--font-head);font-size:1.24rem;display:block}
.cat span{font-size:.86rem;color:var(--ink-soft)}
.cat .arr{position:absolute;right:18px;bottom:18px;font-family:var(--font-head);font-weight:700;opacity:.55}
.cat.tr{background:var(--coral-50)}.cat.be{background:var(--mint-50)}.cat.de{background:var(--sun-50)}.cat.im{background:var(--lilac-50)}
@media(max-width:640px){.cats{grid-template-columns:1fr 1fr}}

/* FEATURE */
.feature{display:grid;grid-template-columns:1.15fr 1fr;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.feature .fimg{min-height:330px;background:linear-gradient(135deg,#FFD7C6,#FF9E86 90%);position:relative;display:grid;place-items:center;font-size:3.4rem;overflow:hidden}
.feature .fimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature .fimg .tag{position:absolute;top:16px;left:16px;font-family:var(--font-head);font-weight:700;font-size:.76rem;padding:.4em .9em;border-radius:var(--r-pill);background:#fff;color:var(--coral);box-shadow:var(--shadow-sm);z-index:1}
.feature .fbody{padding:36px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.feature h3{font-size:clamp(1.55rem,2.7vw,2.1rem)}
.feature p{color:var(--ink-soft);margin:0}
.feature .meta{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--ink-soft)}
@media(max-width:760px){.feature{grid-template-columns:1fr}.feature .fimg{min-height:180px;font-size:2.6rem}}

/* ARTICLE CARDS (shared grid) */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid.g2{grid-template-columns:1fr 1fr}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
/* Isto kao kod .prod .pimg: fiksna visina je menjala odnos kartice po sirini kolone. */
.card .thumb{aspect-ratio:16/10;position:relative;display:grid;place-items:center;font-size:2.4rem;overflow:hidden}
.card .thumb .card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .tag{position:absolute;top:12px;left:12px;font-family:var(--font-head);font-weight:700;font-size:.72rem;padding:.35em .8em;border-radius:var(--r-pill);background:#fff;box-shadow:var(--shadow-sm);z-index:1}
.card .cb{padding:16px 18px 18px;display:flex;flex-direction:column;gap:11px;flex:1}
.card h3{font-size:1.13rem}
.card .meta{margin-top:auto;display:flex;align-items:center;gap:9px;font-size:.82rem;color:var(--ink-soft)}
.card .read{font-family:var(--font-head);font-weight:700;color:var(--coral)}
.avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--lilac),var(--mint));flex:none}
.badge-med{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-head);font-weight:700;font-size:.74rem;color:var(--mint-d);background:var(--mint-50);padding:.28em .65em;border-radius:var(--r-pill)}
.t1,.th1{background:linear-gradient(135deg,#FFD9C7,#FFB59B)}.t2,.th2{background:linear-gradient(135deg,#CDEFE8,#A5E1D5)}
.t3,.th3{background:linear-gradient(135deg,#E7DBFB,#CBB4F2)}.t4,.th4{background:linear-gradient(135deg,#FFE6B8,#FFCF7E)}
.t5,.th5{background:linear-gradient(135deg,#D6EFEA,#ACDFD3)}.t6,.th6{background:linear-gradient(135deg,#FFDCD2,#FFB6A6)}
@media(max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}

/* ALATI band */
.alati{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.acard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:8px;transition:transform .16s,box-shadow .16s}
.acard:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm)}
.acard .ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:1.6rem;margin-bottom:4px}
.acard b{font-family:var(--font-head);font-size:1.12rem}
.acard p{font-size:.87rem;color:var(--ink-soft);margin:0;flex:1}
.acard .go{font-family:var(--font-head);font-weight:700;color:var(--coral);font-size:.92rem}
@media(max-width:900px){.alati{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.alati{grid-template-columns:1fr}}

/* WEEKS */
.weeks{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow-sm)}
.tri{margin-top:18px}
.tri h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--sun-d);margin-bottom:8px}
.wk-grid{display:grid;grid-template-columns:repeat(13,1fr);gap:7px}
.wk{aspect-ratio:1;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:.9rem;transition:transform .12s,background .12s,color .12s}
.wk:hover{transform:translateY(-4px) scale(1.08);background:var(--coral);color:#fff;border-color:var(--coral)}
.wk.hot{background:var(--coral-50);border-color:var(--coral);color:var(--coral)}
@media(max-width:640px){.wk-grid{grid-template-columns:repeat(7,1fr)}}

/* IMENA */
.imena{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.icol{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow-sm)}
.icol h3{font-size:1.24rem;display:flex;align-items:center;gap:.5em;margin-bottom:14px}
.namelist{display:flex;flex-direction:column;gap:2px}
.namelist a{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;font-family:var(--font-head);font-weight:700;font-size:1.04rem}
.namelist a:hover{background:var(--surface-2)}
.namelist .rank{width:27px;height:27px;border-radius:50%;background:var(--lilac-50);color:var(--lilac);display:grid;place-items:center;font-size:.82rem;flex:none}
.icol.boys .rank{background:var(--mint-50);color:var(--mint-d)}
.namelist .mean{margin-left:auto;font-family:var(--font-body);font-weight:400;font-size:.82rem;color:var(--ink-soft)}
@media(max-width:640px){.imena{grid-template-columns:1fr}}

/* SHOP (homepage + generic) */
.shopwrap{background:linear-gradient(135deg,var(--mint-50),var(--sun-50) 72%,var(--coral-50));border:1px solid var(--line);border-radius:var(--r);padding:32px}
.shopwrap .shead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.shopwrap .shead .btn{flex:none}
.sfilter{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 22px}
.pill{font-family:var(--font-head);font-weight:700;font-size:.86rem;padding:.5em 1.05em;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.pill.on,.pill:hover{background:var(--coral);color:#fff;border-color:var(--coral)}
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.prod{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s}
.prod:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
/* Slika je ranije imala fiksnu visinu od 132px, pa se odnos kartice menjao sa sirinom
   kolone: na desktopu 252x275 (skoro kvadrat), na mobilnom 134x338 (izduzena i tanka).
   aspect-ratio drzi isti odnos na svakoj sirini.
   4/3 a ne 1/1: kvadratna slika je uzimala 52% visine kartice i kartica je ostajala
   izduzena (0.53 na mobilnom). 4/3 skida ~38px i vraca karticu u normalan odnos. */
.prod .pimg{aspect-ratio:4/3;background:var(--surface-2);display:grid;place-items:center;font-size:2.7rem;position:relative;overflow:hidden}
.prod .pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prod .ptag{position:absolute;top:10px;left:10px;font-family:var(--font-head);font-weight:700;font-size:.68rem;padding:.3em .65em;border-radius:999px;background:#fff;color:var(--mint-d);box-shadow:var(--shadow-sm);z-index:1}
.prod .ptag.akc{color:var(--coral)}
.prod .pbody{padding:14px;display:flex;flex-direction:column;gap:11px;flex:1}
.prod b{font-family:var(--font-head);font-size:1rem;display:block;line-height:1.22}
.prod .price{display:flex;align-items:baseline;gap:8px;margin-top:auto}
.prod .price .now,.prod .now{font-family:var(--font-head);font-weight:700;font-size:1.18rem;color:var(--ink)}
.prod .price .old{font-size:.85rem;color:var(--ink-soft);text-decoration:line-through}
.prod .add{display:flex;align-items:center;justify-content:center;gap:.4em;font-family:var(--font-head);font-weight:700;font-size:.9rem;background:var(--coral);color:#fff;border-radius:999px;padding:.62em;transition:background .15s,transform .15s}
.prod .add:hover{background:var(--coral-d);transform:translateY(-2px)}
.shopval{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;margin-top:24px;padding-top:22px;border-top:1px dashed var(--line)}
.shopval span{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;color:var(--ink)}
@media(max-width:900px){.prods{grid-template-columns:1fr 1fr}}

/* Na telefonu kartica ide VODORAVNO, jedna po redu.
   Zasto ne samo niza slika: sa dve kolone na 390px kartica je siroka 152px, a mora da primi
   sliku (114) + naslov u dva reda (36) + cenu (27) + dugme (35) + padding (28) = ~260px.
   Da ne bi bila izduzena trebalo bi joj ~190px, sto je nemoguce. Doterivanje odnosa slike
   je zato dvaput promasilo: problem nije bila visina slike nego sirina kolone.
   Vodoravno: slika levo 112px, sadrzaj desno, kartica ~135x358 = siroka i zbijena. */
@media(max-width:640px){
  .prods{grid-template-columns:1fr;gap:12px}
  .prod{flex-direction:row;align-items:stretch}
  .prod .pimg{aspect-ratio:1/1;width:112px;flex:none}
  .prod .pbody{padding:12px 14px;gap:7px;justify-content:center}
  .prod b{font-size:1rem}
  .prod .price{margin-top:0}
  .prod .add{align-self:flex-start;padding:.5em 1.05em;font-size:.86rem}
}
/* Na 390px je .wrap uzimao 40px, a .shopwrap jos 64px: 104px od 390 je odlazilo na
   padding, pa je kartica padala na 134px sirine. Na uskim ekranima prostor ide sadrzaju. */
@media(max-width:640px){.shopwrap{padding:18px 14px;border-radius:var(--r-sm)}}
/* U dve kolone na telefonu "Dodaj u korpu" se lomilo u dva reda i razvlacilo karticu.
   Manje slovo i uzi padding vracaju ga u jedan red. */
@media(max-width:560px){
  .prod .add{font-size:.76rem;padding:.62em .3em;gap:.28em}
  .prod .pbody{padding:11px;gap:8px}
  .prod b{font-size:.92rem}
  .prod .price .now,.prod .now{font-size:1.05rem}
}

/* TRUST */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow-sm)}
.tcard .em{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:1.5rem;margin-bottom:12px}
.tcard:nth-child(1) .em{background:var(--coral-50)}.tcard:nth-child(2) .em{background:var(--mint-50)}.tcard:nth-child(3) .em{background:var(--sun-50)}
.tcard b{font-family:var(--font-head);font-size:1.12rem;display:block;margin-bottom:6px}
.tcard p{color:var(--ink-soft);font-size:.92rem;margin:0}
@media(max-width:760px){.trust{grid-template-columns:1fr}}

/* NEWSLETTER */
.news{background:linear-gradient(135deg,var(--coral),var(--sun));border-radius:var(--r);padding:46px 30px;text-align:center;color:#fff;position:relative;overflow:hidden}
.news .em1,.news .em2{position:absolute;font-size:3rem;opacity:.35}
.news .em1{top:14px;left:24px;transform:rotate(-12deg)}.news .em2{bottom:10px;right:26px;transform:rotate(10deg)}
.news h2{font-size:clamp(1.7rem,3.4vw,2.3rem);color:#fff}
.news p{max-width:48ch;margin:12px auto 22px;opacity:.96}
.news form{display:flex;gap:10px;max-width:470px;margin:0 auto}
.news input{flex:1;min-width:0;border:none;background:#fff;border-radius:var(--r-pill);padding:.82em 1.2em;font-size:1rem;color:var(--ink);font-family:var(--font-body)}
.news .btn{background:#fff;color:var(--coral)}
.news .fine{font-size:.8rem;opacity:.9;margin-top:12px}
@media(max-width:520px){.news form{flex-direction:column}}

/* FOOTER */
footer{margin-top:12px;background:var(--surface-2);border-top:1px solid var(--line)}
footer .wrap{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:28px;padding:48px 20px}
footer h4{font-family:var(--font-head);font-size:1rem;margin:0 0 12px}
footer a{display:block;color:var(--ink-soft);padding:5px 0;font-size:.92rem}
footer a:hover{color:var(--coral)}
.foot-bottom{border-top:1px solid var(--line);text-align:center;padding:18px;color:var(--ink-soft);font-size:.82rem}
@media(max-width:760px){footer .wrap{grid-template-columns:1fr 1fr}}
@media(max-width:440px){footer .wrap{grid-template-columns:1fr}}

/* STICKY MOBILE CTA */
.sticky-cta{display:none}
@media(max-width:900px){
  .sticky-cta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px;box-shadow:var(--shadow)}
  .sticky-cta a{flex:1;text-align:center;padding:.7em;border-radius:var(--r-pill);font-family:var(--font-head);font-weight:700;font-size:.95rem}
  .sticky-cta .p{background:var(--coral);color:#fff}.sticky-cta .s{background:var(--surface-2);color:var(--ink)}
  body{padding-bottom:74px}
}

/* LOGO MARK + BACK TO TOP */
html{scroll-behavior:smooth}
.wordmark .mark{display:inline-grid;place-items:center;flex:none}
.wordmark .mark svg{display:block;border-radius:12px;box-shadow:0 8px 16px rgba(255,107,87,.30)}
.to-top{position:fixed;right:18px;bottom:18px;z-index:55;width:48px;height:48px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;font-size:1.5rem;line-height:1;box-shadow:var(--shadow-c);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,transform .2s,background .2s;text-decoration:none}
.to-top.is-on{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--coral-d);transform:translateY(-3px)}
@media(max-width:900px){.to-top{bottom:80px;right:14px;width:46px;height:46px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* KALKULATORI */
.tvi-calc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow-sm);max-width:560px;margin:22px 0}
.tvi-calc-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.tvi-calc-head .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;flex:none}
.tvi-calc-head h3{font-size:1.25rem}
.tvi-calc-body{display:flex;flex-direction:column;gap:14px}
.tvi-calc-body label{display:flex;flex-direction:column;gap:6px;font-family:var(--font-head);font-weight:700;font-size:.92rem;color:var(--ink)}
.tvi-calc-body input,.tvi-calc-body select{border:2px solid var(--line);border-radius:var(--r-pill);padding:.7em 1.1em;font-size:1rem;font-family:var(--font-body);color:var(--ink);background:var(--surface)}
.tvi-calc-body input:focus,.tvi-calc-body select:focus{outline:none;border-color:var(--coral)}

/* Dropdown.
   Nativni select je izgledao kao sistemski kontrol: siva strelica i lista koju crta OS.
   appearance:none + sopstveni chevron sredjuje ZATVORENO stanje u svim pregledacima.
   Otvorenu listu CSS klasicno ne dohvata, pa je stilizovana kroz customizable select
   (Chrome 135+) iza @supports. Gde toga nema, lista ostaje nativna: nista se ne lomi. */
.tvi-calc-body select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:2.7em;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23FF6B57%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.05em center;background-size:14px;
  transition:border-color .15s,box-shadow .15s;
}
.tvi-calc-body select:hover{border-color:var(--coral-50)}
.tvi-calc-body select:focus{box-shadow:0 0 0 4px var(--coral-50)}
.tvi-calc-body input:focus{box-shadow:0 0 0 4px var(--coral-50)}

@supports (appearance: base-select){
  .tvi-calc-body select{appearance:base-select;background-image:none;padding-right:1.2em;
    display:flex;align-items:center;justify-content:space-between;gap:10px}
  /* sistemski trougao zamenjen istim chevronom koji nosi zatvoreno stanje drugde */
  .tvi-calc-body select::picker-icon{content:"";width:13px;height:13px;
    background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23FF6B57%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E") center/13px no-repeat;color:transparent;transition:rotate .2s ease}
  .tvi-calc-body select:open::picker-icon{rotate:180deg}
  .tvi-calc-body select::picker(select){
    appearance:base-select;border:2px solid var(--line);border-radius:var(--r-sm);
    background:var(--surface);box-shadow:var(--shadow);padding:6px;margin-top:6px;
    max-height:280px;overflow-y:auto}
  .tvi-calc-body option{padding:.5em .8em;border-radius:10px;font-family:var(--font-body);
    line-height:1.35;color:var(--ink);cursor:pointer}
  .tvi-calc-body option:nth-child(even){background:transparent}
  .tvi-calc-body option:hover,.tvi-calc-body option:focus{background:var(--coral-50);outline:none}
  .tvi-calc-body option:checked{background:var(--coral);color:#fff;font-weight:700}
  .tvi-calc-body option::checkmark{display:none}
}
.tvi-calc-body .btn{margin-top:4px}
.tvi-calc-result{margin-top:18px;padding:22px;border-radius:var(--r-sm);background:var(--surface-2);text-align:center}
.tvi-calc-big{font-family:var(--font-head);font-weight:700;font-size:2.8rem;line-height:1}
.tvi-calc-title{font-size:1.15rem;margin-top:8px}
.tvi-calc-sub{color:var(--ink-soft);font-size:.88rem;margin-top:6px}
.tvi-calc-rows{display:flex;flex-direction:column;gap:10px;text-align:left}
.tvi-calc-rows>div{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;background:var(--surface);border-radius:12px;border:1px solid var(--line)}
.tvi-calc-rows span{color:var(--ink-soft)}
.tvi-calc-rows b{font-family:var(--font-head)}
.tvi-calc-err{color:var(--coral-d);font-weight:700}
.tvi-calc-note{font-size:.84rem;color:var(--ink-soft);margin:14px 0 0}

/* ===== ARTICLE / SINGLE ===== */
.crumb{font-size:.86rem;color:var(--ink-soft);padding:20px 0 0}
.crumb a:hover{color:var(--coral)}
.ahead{padding:14px 0 8px}
.ctag{font-family:var(--font-head);font-weight:700;font-size:.78rem;padding:.35em .85em;border-radius:var(--r-pill);background:var(--mint-50);color:var(--mint-d)}
h1.title{font-size:clamp(2rem,4.3vw,3rem);margin-bottom:16px}
.byline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--ink-soft);font-size:.92rem}
.byline .who{display:flex;align-items:center;gap:9px}
.byline .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--lilac),var(--mint));flex:none}
.byline b{font-family:var(--font-head);color:var(--ink);font-size:.98rem}
.hero-img{height:340px;border-radius:var(--r);background:linear-gradient(135deg,#CDEFE8,#A5E1D5 90%);margin:22px 0 6px;display:grid;place-items:center;font-size:4rem;overflow:hidden}
.hero-img img{width:100%;height:100%;object-fit:cover}
@media(max-width:640px){.hero-img{height:210px;font-size:3rem}}
.layout{display:grid;grid-template-columns:1fr 300px;gap:44px;padding:20px 0 40px;align-items:start}
.layout>*{min-width:0}
@media(max-width:920px){.layout{grid-template-columns:1fr;gap:24px}.side{position:static}.side.hide-mob{display:none}}
.prose{font-size:1.08rem;max-width:none;min-width:0;overflow-wrap:break-word;word-break:break-word}
.prose iframe,.prose embed,.prose object,.prose video{max-width:100%}
.prose iframe,.prose .wp-block-embed__wrapper iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--r-sm)}
.prose .wp-block-embed,.prose .wp-block-embed__wrapper{max-width:100%;margin:1.2em 0}
.prose>p{margin:0 0 1.1em}
.prose h2{font-size:1.6rem;margin:1.7em 0 .5em;scroll-margin-top:90px}
.prose h2::before{content:"";display:block;width:46px;height:5px;border-radius:3px;background:var(--coral);margin-bottom:.5em}
.prose h3{font-size:1.25rem;margin:1.3em 0 .4em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em}
.prose li{margin:.4em 0}.prose li::marker{color:var(--coral)}
.prose strong{color:var(--ink)}
.prose a{color:var(--coral);font-weight:700;text-decoration:underline;text-decoration-color:var(--coral-50);text-underline-offset:3px}
.prose img{border-radius:var(--r-sm);margin:1em 0}
.prose blockquote{margin:1.2em 0;padding:14px 20px;border-left:4px solid var(--coral);background:var(--coral-50);border-radius:0 var(--r-sm) var(--r-sm) 0}
/* Tabele u tekstu. Ranije su bile gola resetka: bez okvira, bez zebre, ravan red.
   Sada nose isti jezik kao kartice u sistemu (zaobljeno, tanka linija, meka senka).
   Zebra i hover sluze citanju dugackog reda, a prva kolona je podebljana jer je skoro
   uvek nosilac reda (Simptom, Namirnica, Mera). */
.tbl-wrap,.prose .wp-block-table{overflow-x:auto;margin:0 0 1.5em;max-width:100%;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--shadow-sm)}
.prose table{width:100%;border-collapse:collapse;font-size:.98rem;border:none}
/* Na mobilnom je ranije stajao white-space:nowrap, pa je i kratka tabela terala
   horizontalni skrol. Tekst sada prelama, a skrol ostaje samo kad je stvarno potreban. */
@media(max-width:640px){
  .prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .prose table th,.prose table td{padding:11px 12px;font-size:.92rem}
}
/* `.prose table th/td` (0,1,2) namerno umesto `.prose th/td` (0,1,1): WP ubacuje inline
   `.wp-block-table td,.wp-block-table th{border:1px solid;padding:.5em}` iste specificnosti
   ali kasnije u izvoru, pa bi gazio i ivicu i padding. */
.prose table th{background:var(--surface-2);font-family:var(--font-head);font-weight:700;text-align:left;padding:14px 16px;border:none;border-bottom:1px solid var(--line);color:var(--ink)}
.prose table td{padding:13px 16px;border:none;border-bottom:1px solid var(--line);vertical-align:top}
.prose table tbody tr:last-child td{border-bottom:none}
.prose tbody tr:nth-child(even){background:rgba(255,247,238,.6)}
.prose tbody tr:hover{background:var(--coral-50)}
.prose table tbody td:first-child{font-weight:700;color:var(--ink)}
.tip{display:flex;gap:14px;background:var(--sun-50);border:1px solid var(--sun);border-left:5px solid var(--sun);border-radius:var(--r-sm);padding:18px 20px;margin:0 0 1.4em}
.tip .ic{font-size:1.5rem;flex:none}
.tip b{font-family:var(--font-head);display:block;margin-bottom:2px}.tip p{margin:0;font-size:.98rem}
.shopblock{background:linear-gradient(135deg,var(--mint-50),var(--sun-50));border:1px solid var(--line);border-radius:var(--r);padding:24px;margin:2em 0}
.shopblock .sh{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.shopblock .sh b{font-family:var(--font-head);font-size:1.15rem}
.shopblock .sh .k{margin-left:auto;font-family:var(--font-head);font-weight:700;color:var(--coral);font-size:.9rem}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:640px){.pgrid{grid-template-columns:1fr}}
.disc{display:flex;gap:12px;background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--r-sm);padding:16px 18px;margin:1.6em 0;font-size:.92rem;color:var(--ink-soft)}
.disc .ic{font-size:1.3rem;flex:none}
.sources{margin:1.6em 0;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.sources b{font-family:var(--font-head);display:block;margin-bottom:8px}
.sources ol{margin:0;padding-left:1.2em;font-size:.9rem;color:var(--ink-soft)}
.authorbox{display:flex;gap:16px;align-items:flex-start;background:var(--coral-50);border-radius:var(--r);padding:22px;margin:2em 0}
.authorbox .av{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--coral),var(--sun));flex:none}
.authorbox b{font-family:var(--font-head);font-size:1.1rem}
.authorbox p{margin:.3em 0 0;font-size:.94rem;color:var(--ink-soft)}
.faq{margin:2em 0}
.faq h2{font-size:1.6rem;margin-bottom:.6em}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:10px;overflow:hidden}
.faq summary{cursor:pointer;padding:16px 18px;font-family:var(--font-head);font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--coral);font-size:1.3rem;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 18px 16px;color:var(--ink-soft)}
.side{position:sticky;top:88px;display:flex;flex-direction:column;gap:18px}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:20px}
.toc b.h{font-family:var(--font-head);font-size:.92rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);display:block;margin-bottom:10px}
.toc a{display:block;padding:6px 0 6px 12px;font-size:.92rem;color:var(--ink-soft);border-left:2px solid var(--line)}
.toc a:hover{color:var(--coral);border-color:var(--coral)}
.sidecta{background:linear-gradient(135deg,var(--coral),var(--sun));border-radius:var(--r-sm);padding:22px;color:#fff}
.sidecta b{font-family:var(--font-head);font-size:1.1rem;display:block;margin-bottom:6px}
.sidecta p{font-size:.88rem;opacity:.95;margin:0 0 12px}
.sidecta .btn{background:#fff;color:var(--coral);width:100%}
.related{border-top:1px solid var(--line);padding:44px 0}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
@media(max-width:820px){.rgrid{grid-template-columns:1fr}}

/* ===== CATEGORY / ARCHIVE ===== */
.cathero{border:1px solid var(--line);border-radius:var(--r);padding:34px 32px;margin:14px 0 8px;display:flex;gap:22px;align-items:center;background:linear-gradient(135deg,var(--coral-50),var(--sun-50))}
.cathero.acc-mint{background:linear-gradient(135deg,var(--mint-50),var(--sun-50))}
.cathero.acc-sun{background:linear-gradient(135deg,var(--sun-50),var(--coral-50))}
.cathero.acc-lilac{background:linear-gradient(135deg,var(--lilac-50),var(--mint-50))}
.cathero .emo{font-size:3.4rem;flex:none}
.cathero h1{font-size:clamp(1.9rem,4vw,2.8rem)}
.cathero p{color:var(--ink-soft);margin:8px 0 0;max-width:60ch}
.cathero .cnt{font-family:var(--font-head);font-weight:700;color:var(--coral);font-size:.9rem;margin-top:8px;display:inline-block}
@media(max-width:640px){.cathero{flex-direction:column;text-align:center;padding:26px 20px}}
.chips{display:flex;gap:10px;flex-wrap:wrap;padding:22px 0 6px}
.chip{font-family:var(--font-head);font-weight:700;font-size:.9rem;padding:.5em 1.05em;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);color:var(--ink-soft)}
.chip.on,.chip:hover{background:var(--coral);color:#fff;border-color:var(--coral)}
.feat{display:grid;grid-template-columns:1.1fr 1fr;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);margin:16px 0 8px}
.feat .fi{min-height:280px;background:linear-gradient(135deg,#FFDCD2,#FFB6A6);display:grid;place-items:center;font-size:3.2rem;position:relative;overflow:hidden}
.feat .fi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feat .fi .tag{position:absolute;top:16px;left:16px;font-family:var(--font-head);font-weight:700;font-size:.74rem;padding:.35em .85em;border-radius:var(--r-pill);background:#fff;color:var(--coral);box-shadow:var(--shadow-sm);z-index:1}
.feat .fb{padding:32px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.feat h2{font-size:clamp(1.4rem,2.5vw,1.9rem)}
.feat p{color:var(--ink-soft);margin:0}
.feat .meta{display:flex;gap:10px;align-items:center;font-size:.86rem;color:var(--ink-soft)}
@media(max-width:760px){.feat{grid-template-columns:1fr}.feat .fi{min-height:170px;font-size:2.6rem}}
.pager{display:flex;gap:8px;justify-content:center;margin:28px 0 4px;flex-wrap:wrap}
.pager a,.pager span{min-width:44px;height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;font-family:var(--font-head);font-weight:700;color:var(--ink-soft)}
.pager .current{background:var(--coral);color:#fff;border-color:var(--coral)}
.pager a:hover{border-color:var(--coral);color:var(--coral)}
.swid{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:20px}
.swid b.h{font-family:var(--font-head);font-size:.92rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);display:block;margin-bottom:12px}
.pop{display:flex;gap:12px;padding:9px 0;align-items:center;border-bottom:1px solid var(--line)}
.pop:last-child{border:none}
.pop .n{width:30px;height:30px;border-radius:9px;background:var(--coral-50);color:var(--coral);display:grid;place-items:center;font-family:var(--font-head);font-weight:700;flex:none}
.pop span{font-family:var(--font-head);font-weight:700;font-size:.92rem;line-height:1.25}
.shopmini{background:linear-gradient(135deg,var(--mint-50),var(--sun-50));border:1px solid var(--line);border-radius:var(--r-sm);padding:20px}
.shopmini b{font-family:var(--font-head);font-size:1.05rem;display:block;margin-bottom:4px}
.shopmini p{font-size:.86rem;color:var(--ink-soft);margin:0 0 12px}
.seo{border-top:1px solid var(--line);margin-top:20px;padding:40px 0}
.seo .in{max-width:760px}
.seo h2{font-size:1.5rem;margin:1.2em 0 .4em}
.seo h2:first-child{margin-top:0}
.seo h2::before{content:"";display:block;width:44px;height:5px;border-radius:3px;background:var(--coral);margin-bottom:.4em}
.seo p{margin:0 0 1em}
.seo .note{display:flex;gap:10px;background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--r-sm);padding:14px 16px;font-size:.9rem;color:var(--ink-soft);margin-top:.6em}

/* ===== PDP / WOO ===== */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;padding-bottom:20px}
.pricerow{display:flex;align-items:baseline;gap:12px;margin:6px 0 4px}
.pricerow .now{font-family:var(--font-head);font-weight:700;font-size:2.1rem;color:var(--ink)}
.pricerow .old{font-size:1.1rem;color:var(--ink-soft);text-decoration:line-through}
.benefits{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:8px}
.benefits li{display:flex;gap:10px;align-items:flex-start;font-size:.98rem}
.benefits li::before{content:"\2713";color:var(--mint-d);font-weight:900;flex:none}
.seller{display:flex;gap:12px;background:var(--coral-50);border-radius:var(--r-sm);padding:16px;font-size:.9rem;color:var(--ink-soft)}
.seller .ic{font-size:1.3rem;flex:none}.seller b{color:var(--ink);font-family:var(--font-head)}
.psec{border-top:1px solid var(--line);padding:36px 0}
.psec h2{font-size:1.5rem;margin-bottom:14px}
.psec h2::before{content:"";display:block;width:44px;height:5px;border-radius:3px;background:var(--coral);margin-bottom:.4em}
.pdp-sections{margin-top:10px}
/* buybox: kolicina + dodaj u korpu */
.tvi-atc form.cart{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;margin:0}
.tvi-atc .quantity,.woo-page .quantity{display:inline-flex;align-items:stretch;border:2px solid var(--line);border-radius:var(--r-pill);overflow:hidden;background:var(--surface)}
.tvi-atc .quantity input.qty,.woo-page .quantity input.qty{width:50px;border:none!important;text-align:center;font-family:var(--font-head);font-weight:700;font-size:1.05rem;background:transparent;padding:0;-moz-appearance:textfield}
.tvi-atc .quantity input.qty::-webkit-outer-spin-button,.tvi-atc .quantity input.qty::-webkit-inner-spin-button,.woo-page .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tvi-qbtn{border:none;background:var(--surface);width:42px;font-size:1.35rem;font-family:var(--font-head);color:var(--ink);cursor:pointer;line-height:1;transition:background .15s,color .15s}
.tvi-qbtn:hover{background:var(--surface-2);color:var(--coral)}
.tvi-atc .single_add_to_cart_button{flex:1;min-width:190px}
@media(max-width:420px){.tvi-atc .single_add_to_cart_button{width:100%;flex:1 1 100%}}
@media(max-width:760px){.pdp-info{grid-template-columns:1fr!important}}
@media(max-width:560px){.fromblog{flex-wrap:wrap;gap:10px!important}}

/* WooCommerce base overrides */
/* Obaveštenja: puna širina, jasna potvrda, dugme desno i ne lomi se na mobilnom */
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border-radius:var(--r-sm)!important;border:1px solid var(--line);
  background:var(--surface-2);padding:14px 18px;margin:0 0 16px;list-style:none;
  font-family:var(--font-head);font-weight:700;font-size:.95rem}
.woocommerce-message{border-color:rgba(46,160,120,.35);background:rgba(46,160,120,.08);color:var(--ink)}
.woocommerce-error{border-color:rgba(214,69,69,.35);background:rgba(214,69,69,.07)}
/* WooCommerce svoju ikonicu crta kao position:absolute ::before, pa preklapa tekst.
   Zato se ::before vraća u tok (static) i postaje flex stavka. */
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{
  position:static!important;top:auto!important;left:auto!important;
  font-family:inherit!important;font-size:1.05rem;line-height:1;flex:none;color:inherit}
.woocommerce-message::before{content:"\2705"}
.woocommerce-info::before{content:"\2139\FE0F"}
.woocommerce-error::before{content:"\26A0\FE0F"}
.woocommerce-message .button,.woocommerce-info .button{margin-left:auto;flex:none}
@media(max-width:560px){
  .woocommerce-message,.woocommerce-info,.woocommerce-error{font-size:.9rem;padding:12px 14px}
  .woocommerce-message .button,.woocommerce-info .button{margin-left:0;width:100%;text-align:center}
}
/* AJAX potvrda u listi proizvoda ("Pogledaj korpu" link pored dugmeta) */
.woocommerce a.added_to_cart{display:inline-block;margin-top:8px;font-family:var(--font-head);font-weight:700;font-size:.85rem;color:var(--coral);text-decoration:underline}
.woocommerce a.button.loading{opacity:.65;pointer-events:none}
/* Badge korpe: kratko pulsira kad se osveži preko fragmenta */
.iconbtn.cart{position:relative}
.iconbtn.cart.has-items .cbadge{animation:tvi-pop .35s ease}
@keyframes tvi-pop{0%{transform:scale(.5)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.iconbtn.cart.has-items .cbadge{animation:none}}
.woocommerce ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0;padding:0;list-style:none}
.woocommerce ul.products li.product{margin:0;width:auto;text-align:left}
.woocommerce span.price,.woocommerce div.product p.price{color:var(--ink);font-family:var(--font-head);font-weight:700}
.woocommerce a.button,.woocommerce button.button,.woocommerce .button,.woocommerce #respond input#submit{background:var(--coral)!important;color:#fff!important;border-radius:var(--r-pill)!important;font-family:var(--font-head);font-weight:700;padding:.7em 1.3em!important;border:none!important}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .button:hover{background:var(--coral-d)!important}
.woocommerce .price del{color:var(--ink-soft);font-weight:400}
.woocommerce .star-rating{color:var(--sun)}
@media(max-width:900px){.woocommerce ul.products{grid-template-columns:1fr 1fr}.pdp{grid-template-columns:1fr;gap:24px}}
@media(max-width:560px){.woocommerce ul.products{grid-template-columns:1fr}}

/* ===== KORPA / PLAĆANJE ===== */
.woo-page .woocommerce{max-width:none}
.woo-page a.button,.woo-page button.button,.woo-page .button{background:var(--coral)!important;color:#fff!important;border-radius:var(--r-pill)!important;font-family:var(--font-head);font-weight:700;padding:.8em 1.5em!important;border:none!important;box-shadow:var(--shadow-c);transition:background .15s,transform .15s}
.woo-page .button:hover{background:var(--coral-d)!important;transform:translateY(-2px)}
.woo-page .button.alt,.woo-page #place_order{width:100%;font-size:1.1rem}
/* prazna korpa */
.woo-page .cart-empty,.woo-page .wc-empty-cart-message{font-family:var(--font-head);font-size:1.3rem;text-align:center;padding:30px 0 10px}
.woo-page .return-to-shop{text-align:center;margin-top:10px}
/* cart layout */
/* Korpa: .woocommerce ima TRI deteta (obaveštenja, forma, zbir), ne dva.
   Bez eksplicitnog rasporeda obaveštenja zauzmu levu kolonu, tabela ode desno,
   a "Zbir korpe" padne u drugi red. Zato: obaveštenja preko cele širine. */
.woocommerce-cart .woo-page .woocommerce{display:grid;grid-template-columns:1.6fr .9fr;gap:28px 28px;align-items:start}
.woocommerce-cart .woo-page .woocommerce>.woocommerce-notices-wrapper{grid-column:1/-1;margin-bottom:-12px}
.woocommerce-cart .woo-page .woocommerce>form.woocommerce-cart-form{grid-column:1;grid-row:2}
.woocommerce-cart .woo-page .woocommerce>.cart-collaterals{grid-column:2;grid-row:2}
.woocommerce-cart-form{min-width:0}
.woo-page table.shop_table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.woo-page table.shop_table th{background:var(--surface-2);font-family:var(--font-head);text-align:left;padding:14px 16px;font-size:.9rem;border-bottom:1px solid var(--line)}
.woo-page table.shop_table td{padding:16px;border-bottom:1px solid var(--line);vertical-align:middle}
.woo-page table.shop_table tr:last-child td{border-bottom:none}
.woo-page .cart_item .product-thumbnail img{width:64px;height:64px;object-fit:cover;border-radius:12px}
.woo-page .product-name a{font-family:var(--font-head);font-weight:700;color:var(--ink)}
.woo-page .product-name a:hover{color:var(--coral)}
.woo-page td.product-price,.woo-page td.product-subtotal{font-family:var(--font-head);font-weight:700;white-space:nowrap}
.woo-page .quantity input.qty{width:64px;padding:.5em;border:2px solid var(--line);border-radius:var(--r-pill);text-align:center;font-family:var(--font-head);font-weight:700}
.woo-page a.remove{color:var(--coral)!important;font-size:1.3rem;line-height:1;border-radius:50%}
.woo-page a.remove:hover{background:var(--coral)!important;color:#fff!important}
.woo-page .coupon{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.woo-page .coupon{align-items:center}
.woo-page .coupon input{border:2px solid var(--line);border-radius:var(--r-pill);padding:.6em 1em;flex:1;min-width:150px}
.woo-page .cart-collaterals,.woo-page .cart_totals{width:100%!important;float:none!important}
.woo-page .cart_totals{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px 20px 20px;position:sticky;top:88px}
.woo-page .cart_totals h2{font-family:var(--font-head);font-size:1.2rem;padding:14px 0 4px}
.woo-page .cart_totals table{border:none;background:none}
/* specifičnije od `.woo-page table.shop_table th`, inače th nasledi pozadinu tabele proizvoda */
.woo-page .cart_totals table.shop_table th,.woo-page .cart_totals table.shop_table td,
.woo-page .cart_totals th,.woo-page .cart_totals td{padding:12px 0;border-bottom:1px dashed var(--line);background:none}
.woo-page .cart_totals tr.order-total td{font-family:var(--font-head);font-size:1.3rem;border-bottom:none}
/* checkout layout */
.woocommerce-checkout .woo-page form.checkout{display:block}
.woocommerce-checkout .woo-page form.checkout::after{content:"";display:table;clear:both}
.woo-page #customer_details{float:left;width:57%;min-width:0}
.woo-page #order_review_heading{float:right;width:39%;clear:right;margin:0 0 10px}
.woo-page #order_review{float:right;width:39%;clear:right}
.woo-page #customer_details .col-1,.woo-page #customer_details .col-2{width:auto;float:none}
.woo-page h3{font-family:var(--font-head);font-size:1.2rem;margin:0 0 14px}
.woo-page .woocommerce-billing-fields,.woo-page .woocommerce-additional-fields{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:20px}
.woo-page p.form-row{margin:0 0 14px}
.woo-page label{font-family:var(--font-head);font-weight:700;font-size:.9rem;display:block;margin-bottom:6px}
.woo-page input.input-text,.woo-page textarea,.woo-page select,.woo-page .select2-selection{border:2px solid var(--line)!important;border-radius:var(--r-sm)!important;padding:.7em 1em!important;font-size:1rem;font-family:var(--font-body);width:100%;background:var(--surface)}
.woo-page input.input-text:focus,.woo-page textarea:focus{outline:none;border-color:var(--coral)!important}
.woo-page #order_review,.woo-page #order_review_heading{margin:0}
.woo-page #order_review{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px 20px 20px;position:sticky;top:88px}
.woo-page #order_review_heading{font-family:var(--font-head);font-size:1.2rem;margin-bottom:8px}
/* Blok plaćanja: WooCommerce default je sivo-lila (#payment rgba(129,110,153,.14),
   payment_box rgb(220,215,226) + lila strelica). Njegovi selektori su specifičniji
   od `.woo-page .payment_box`, pa se mora ciljati istim nivoom (.woocommerce-checkout #payment ...). */
.woocommerce-checkout #payment,.woo-page .woocommerce-checkout-payment{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;margin-top:14px}
.woocommerce-checkout #payment ul.payment_methods,.woo-page .wc_payment_methods{
  list-style:none;margin:0;padding:0;border-bottom:none}
.woo-page .wc_payment_method label{display:inline;font-weight:700}
.woocommerce-checkout #payment div.payment_box,.woo-page .payment_box{
  background:var(--surface);color:var(--ink-soft);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;font-size:.9rem;margin:10px 0 0}
/* strelica iznad payment_box nasleđuje lila; vrati je na boju kutije */
.woocommerce-checkout #payment div.payment_box::before,.woo-page .payment_box::before{
  border-bottom-color:var(--surface)!important}
.woocommerce-checkout #payment div.form-row.place-order{padding:0;margin:14px 0 0}
@media(max-width:860px){
  .woocommerce-cart .woo-page .woocommerce,.woocommerce-checkout .woo-page form.checkout{grid-template-columns:1fr}
  /* poništi eksplicitni raspored sa desktopa, inače grid-column:2 pravi lažnu kolonu */
  .woocommerce-cart .woo-page .woocommerce>form.woocommerce-cart-form,
  .woocommerce-cart .woo-page .woocommerce>.cart-collaterals{grid-column:1;grid-row:auto}
  .woo-page #customer_details,.woo-page #order_review_heading,.woo-page #order_review{float:none;width:auto;grid-column:1;grid-row:auto}
  .woo-page .cart_totals,.woo-page #order_review{position:static}
  /* Slaganje ćelija u redove važi SAMO za tabelu korpe (ima 5 kolona i ne staje).
     Pregled porudžbine na checkoutu ima 2 kolone i lepo staje kao obična tabela;
     ako se i on slaže, naziv proizvoda i cena završe u odvojenim redovima. */
  .woocommerce-cart-form table.shop_table thead{display:none}
  .woocommerce-cart-form table.shop_table td{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
  .woocommerce-cart-form table.shop_table td::before{content:attr(data-title);font-family:var(--font-head);font-weight:700;color:var(--ink-soft)}
  .woo-page #order_review table.shop_table th,.woo-page #order_review table.shop_table td{padding:12px 10px;font-size:.92rem}
  .woo-page .cart_item{display:block;border-bottom:2px solid var(--line)}
}

/* ---------- Prodavnica: vodič, kategorije, članci, FAQ ---------- */
/* Bez JS: FAQ je <details>/<summary>, kartice su obični linkovi. */
.shopguide{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;margin-top:8px}
.shopguide h2{font-family:var(--font-head);font-size:clamp(1.3rem,2.4vw,1.7rem);margin:0 0 10px}
.sg-lead{color:var(--ink-soft);max-width:72ch;margin:0 0 16px}
.sg-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.sg-list li{position:relative;padding-left:28px;max-width:78ch}
.sg-list li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--mint-600,#2ea078);font-weight:700}

.ccards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.ccard{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
.ccard:hover{transform:translateY(-2px);box-shadow:var(--shadow,0 10px 26px rgba(0,0,0,.06));border-color:var(--coral)}
.ccard b{font-family:var(--font-head);font-size:1.05rem}
.ccard p{color:var(--ink-soft);font-size:.88rem;margin:0;flex:1}
.ccard-n{font-family:var(--font-head);font-weight:700;font-size:.82rem;color:var(--coral)}

.acards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.acard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
.acard:hover{transform:translateY(-2px);box-shadow:var(--shadow,0 10px 26px rgba(0,0,0,.06));border-color:var(--coral)}
.acard-img{display:block;aspect-ratio:16/10;background:linear-gradient(135deg,var(--mint-50),var(--sun-50));display:grid;place-items:center;overflow:hidden}
.acard-img img{width:100%;height:100%;object-fit:cover}
.acard-ph{font-size:2rem}
.acard-t{display:block;padding:12px 14px;font-family:var(--font-head);font-weight:700;font-size:.92rem;line-height:1.35}

.shopfaq{display:grid;gap:10px}
.fq{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:0}
.fq summary{cursor:pointer;list-style:none;padding:15px 44px 15px 18px;font-family:var(--font-head);font-weight:700;font-size:.98rem;position:relative}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:1.3rem;color:var(--coral);line-height:1}
.fq[open] summary::after{content:"\2013"}
.fq[open] summary{padding-bottom:4px}
.fq p{margin:0;padding:0 18px 16px;color:var(--ink-soft);max-width:76ch}
@media(max-width:560px){
  .shopguide{padding:20px 18px}
  .fq summary{font-size:.94rem;padding:13px 40px 13px 14px}
  .fq p{padding:0 14px 14px}
}

/* ---------- Dodavanje u korpu iz liste (AJAX stanja) ---------- */
/* WooCommerce sam dodaje .loading pa .added na dugme, i ubaci <a.added_to_cart> posle njega. */
.prod .add{position:relative;transition:background .16s,transform .12s}
.prod .add.loading{opacity:.75;pointer-events:none}
.prod .add.loading::after{content:"";width:14px;height:14px;margin-left:8px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;display:inline-block;vertical-align:-2px;animation:tvi-spin .7s linear infinite}
@keyframes tvi-spin{to{transform:rotate(360deg)}}
/* Posle dodavanja hijerarhija se OKREĆE: "Dodato" je potvrda (mirna, ne dugme),
   a "Pogledaj korpu" je sledeći korak i preuzima naglasak. Puna zelena je ranije
   bila najglasniji element na kartici i tukla se sa coral paletom.
   WooCommerce ne menja tekst dugmeta (pisalo bi "✓ Dodaj u korpu"), pa font-size:0
   sakriva original a ::before nosi novi tekst. Ostaje 0 JS. */
.prod .add.added{background:var(--mint-50)!important;color:var(--mint-d)!important;
  box-shadow:none!important;font-size:0;cursor:default;padding:.5em}
.prod .add.added:hover{background:var(--mint-50)!important;transform:none}
/* Dva razmaka namerno: CSS proguta jedan razmak posle hex escape sekvence kao njen kraj. */
.prod .add.added::before{content:"\2713  Dodato u korpu";font-size:.82rem;font-weight:700}
.prod a.added_to_cart{display:flex;align-items:center;justify-content:center;gap:.4em;
  margin-top:8px;background:var(--coral);color:#fff;border-radius:999px;padding:.62em;
  font-family:var(--font-head);font-weight:700;font-size:.9rem;text-decoration:none;
  transition:background .15s,transform .15s}
.prod a.added_to_cart::before{content:"\1F6D2"}
.prod a.added_to_cart:hover{background:var(--coral-d);color:#fff;transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.prod .add.loading::after{animation:none}}

/* ---------- Zašto kod nas ---------- */
.whyus{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px}
.why-h h2{font-family:var(--font-head);font-size:clamp(1.4rem,2.6vw,1.9rem);margin:4px 0 8px}
.why-h p{color:var(--ink-soft);max-width:68ch;margin:0 0 20px}
.why-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.why-c{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px}
.why-c b{font-family:var(--font-head);font-size:.98rem;display:block;margin-bottom:5px}
.why-c p{color:var(--ink-soft);font-size:.88rem;margin:0}
@media(max-width:560px){.whyus{padding:22px 18px}}

/* CTA ka vodičima (zamena za mrtvu newsletter formu na prodavnici) */
.helpcta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--mint-50),var(--sun-50));border:1px solid var(--line);
  border-radius:var(--r);padding:24px 28px}
.helpcta b{font-family:var(--font-head);font-size:1.15rem;display:block;margin-bottom:4px}
.helpcta p{color:var(--ink-soft);margin:0;max-width:62ch;font-size:.94rem}
.helpcta .btn{flex:none}
@media(max-width:560px){.helpcta{padding:20px 18px}.helpcta .btn{width:100%}}

/* Sekcije kategorije prodavnice. Namerno recikliraju .prose (ista tipografija i tabele
   kao u člancima) umesto novih pravila; treba im samo mera reda i gašenje gornje
   margine prvog naslova. */
.catsec{max-width:82ch}
.catsec>h2:first-child{margin-top:0}
/* Uske kolone (uzrast, rok) inace lome "Ne dodaje se" u tri reda. */
.catsec table td:first-child{width:20%}
.catsec table td:nth-child(2){width:15%;white-space:nowrap}
@media(max-width:640px){.catsec table td:first-child,.catsec table td:nth-child(2){width:auto}}

/* Polje za datum: tri selecta umesto <input type="date">, cija kalendar-lista ne moze da se
   stilizuje. Dan je uzi jer nosi najmanje znakova, mesec najsiri zbog "Septembar". */
.tvi-date{display:grid;grid-template-columns:.72fr 1.25fr .95fr;gap:8px}
.tvi-date select{width:100%;min-width:0}
@media(max-width:380px){.tvi-date{grid-template-columns:1fr 1fr;gap:7px}.tvi-date select:last-child{grid-column:1/-1}}