/* Digitalna Zimnica — main.css: fontovi, design tokeni i zajednički elementi (redizajn v5, 5. 11. 2026.).
   Izvor istine za izgled: prototipi/zimnica-sales-v5-redizajn.html. Boje se ne hardkodiraju u templateima. */

/* ── fontovi: self-hosted (bez Google Fonts CDN-a — GDPR), licenca u assets/fonts/OFL.txt ── */
@font-face{font-family:"Fraunces";font-style:italic;font-weight:500 800;font-display:swap;src:url("../fonts/fraunces-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:500 800;font-display:swap;src:url("../fonts/fraunces-italic-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:"Fraunces";font-style:normal;font-weight:500 800;font-display:swap;src:url("../fonts/fraunces-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500 800;font-display:swap;src:url("../fonts/fraunces-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:italic;font-weight:400 900;font-display:swap;src:url("../fonts/nunito-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Nunito";font-style:italic;font-weight:400 900;font-display:swap;src:url("../fonts/nunito-italic-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:400 900;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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Nunito";font-style:normal;font-weight:400 900;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{
  /* tamni blokovi — šumska zelena */
  --d0:#0F2A24; --d1:#12302A; --d2:#1E4D3E; --d3:#2F6B52;
  --p:#1E4D3E; --p-d:#12302A; --p-s:#E9F2ED;
  /* drvo police — bakrena smeđa, SAMO taj element */
  --c:#5A4130; --c-d:#3A2A1E; --c-s:#F0E7DD; --shelf:#6B4A2B; --shelf-l:#8A6440;
  /* CTA — med/jantar */
  --a:#E8A33D; --a-l:#F9BE5C; --a-d:#B9791C; --a-s:#FDF4E4;
  --honey:#F2B24C; --honey-hi:#F7BF60; --honey-l:#F7C875; --honey-s:#FDF1DC; --honey-line:#F0D9AE; --honey-ink:#6B4510; --on-honey:#2A1C0B;
  --g:#4C8C5B; --g-d:#356A42; --g-s:#E7F3EA; --g-ink:#234A33; --g-line:#CFE3D5;
  /* naglasak — terakota: "za koga nije", "ne vraćam novac" */
  --w:#C4553A; --w-s:#FBEDE9; --w-ink:#8E3524; --w-line:#F1D3CA;
  /* boje dana / staklenki (polica, program, Smočnica) */
  --day1:#F2B24C; --day2:#E8893A; --day3:#B5658A; --day4:#C2414F; --day5:#8FB055; --day6:#D9603A; --day7:#A87A4E;

  --bg:#F5EEE0; --paper:#fff; --card:#FFFCF6; --card-line:#ECE3D2; --cream-2:#EDE5D4; --dash:#CFC6B4;
  --ink:#1C211D; --ink2:#454B44; --ink3:#4A5048; --ink-soft:#5F665C; --muted:#7C837A; --line:#E4E7DE; --nav-ink:#2C3A33;
  --on-dark:#EEF4EF; --on-dark-2:#B9CFC2; --on-dark-3:#9DB5A8; --on-dark-lead:#C3D6CB; --on-dark-text:#DCE8E0; --head-dark:#F4F8F4;
  --glass:rgba(255,255,255,.07); --glass-line:rgba(255,255,255,.16);

  --font-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --font-sans:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;

  --r:12px; --r2:20px; --r3:30px; --r4:26px; --r5:36px;
  --sh:0 3px 16px rgba(18,48,42,.07);
  --sh2:0 16px 44px rgba(18,48,42,.16);
  --sh3:0 8px 30px rgba(18,48,42,.06);
  --sh-honey:0 14px 34px rgba(242,178,76,.4),inset 0 1px 0 rgba(255,255,255,.55);
  --sh-glass:inset 0 1px 0 rgba(255,255,255,.16),0 30px 70px rgba(0,0,0,.3);
  --page:1240px; --wide:1160px; --sec:1000px; --mid:860px; --nar:740px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
a{color:var(--d2)}
a:hover{color:var(--d1)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--honey);outline-offset:3px}

.sec{max-width:var(--sec);margin:0 auto;padding:0 24px}
.sec--wide{max-width:var(--wide)}
.sec--mid{max-width:var(--mid)}
.nar{max-width:var(--nar);margin:0 auto}
.head{max-width:720px;margin:0 auto;text-align:center}
.head--left{margin:0;text-align:left;max-width:640px}

/* ── tipografija: Fraunces za naslove, Nunito za tekst ── */
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.15;color:var(--d1)}
h1,h2{font-family:var(--font-serif);font-weight:600;letter-spacing:-.02em}
h1{font-size:clamp(2.35rem,5.6vw,4.75rem);line-height:1.02;letter-spacing:-.025em}
h2{font-size:clamp(1.95rem,4vw,3.1rem);line-height:1.08}
h3{font-size:1.2rem;font-weight:900;letter-spacing:-.01em}
h4{font-size:1.05rem;font-weight:900}
h1 em,h2 em,h3 em{font-style:italic;font-weight:600;color:var(--a-d)}
.serif{font-family:var(--font-serif);font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1em}
strong,b{font-weight:800}
.lead{font-size:1.12rem;color:var(--ink3)}
.head .lead,.head h2+p{margin-top:16px}

.eyebrow{display:inline-block;font-size:.78rem;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;color:var(--a-d);margin:0 0 14px}

/* ── blokovi: tamni su zaobljene kartice, svijetli leže na krem pozadini ── */
.block{position:relative;width:calc(100% - 32px);max-width:var(--page);margin:20px auto;
  padding:clamp(64px,8vw,104px) 0;border-radius:var(--r5);overflow:hidden}
.block--cream,.block--paper{background:transparent;padding:clamp(64px,8vw,112px) 0}
.block--dark,.block--olive{color:var(--on-dark);box-shadow:0 18px 46px rgba(12,35,30,.18)}
.block--dark{background:
  radial-gradient(640px circle at 92% -6%,rgba(242,178,76,.24),transparent 62%),
  radial-gradient(760px circle at 2% 108%,rgba(76,140,91,.42),transparent 62%),var(--d1)}
.block--olive{background:
  radial-gradient(900px 600px at 50% 46%,rgba(242,178,76,.2),transparent 62%),var(--d0)}
.block>*{position:relative}
.block--dark h1,.block--dark h2,.block--olive h1,.block--olive h2{color:var(--head-dark)}
.block--dark h3,.block--olive h3{color:#fff}
.block--dark h1 em,.block--dark h2 em,.block--olive h1 em,.block--olive h2 em{color:var(--honey)}
.block--dark .eyebrow,.block--olive .eyebrow{color:var(--honey)}
.block--dark .lead,.block--olive .lead{color:var(--on-dark-lead)}
@media(max-width:760px){
  .block{width:calc(100% - 24px);margin:12px auto;border-radius:28px}
  .sec{padding:0 20px}
}

/* ── gumbi ── */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:58px;padding:0 30px;border:none;border-radius:999px;cursor:pointer;text-decoration:none;
  font-family:inherit;font-weight:900;font-size:1rem;letter-spacing:.04em;line-height:1.2;text-align:center;
  background:var(--honey);color:var(--on-honey);box-shadow:var(--sh-honey);
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.btn:hover{color:var(--on-honey);background:var(--honey-hi);transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(242,178,76,.5),inset 0 1px 0 rgba(255,255,255,.6)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--d2);outline-offset:3px}
.block--dark .btn:focus-visible,.block--olive .btn:focus-visible{outline-color:#fff}
.btn .i{flex:none}
.btn--sm{min-height:44px;padding:0 20px;font-size:.84rem}
.btn--ghost{background:rgba(255,255,255,.06);color:var(--on-dark);border:1px solid rgba(255,255,255,.18);
  letter-spacing:0;font-weight:800;box-shadow:none;backdrop-filter:blur(12px)}
.btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
.btn--block{display:flex;width:100%}
.cta-wrap{text-align:center;margin:38px 0 0}
.cta-sub{margin:14px 0 0;font-size:.92rem;color:var(--ink3)}
.block--dark .cta-sub,.block--olive .cta-sub{color:var(--on-dark-3)}

/* ── ikone (inline SVG, linijske) ── */
.i{display:inline-block;vertical-align:middle;flex:none}
.ico-box{width:52px;height:52px;border-radius:16px;background:var(--d1);color:var(--honey);
  display:flex;align-items:center;justify-content:center;flex:none}
.ico-box--soft{width:48px;height:48px;border-radius:14px;background:var(--honey-s);color:#9A6315}
.ico-box--green{background:var(--g-s);color:var(--g-d)}

/* ── čipovi i oznake ── */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;padding:0;list-style:none}
.pills li{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:700;padding:9px 14px;border-radius:999px;
  color:var(--on-dark-text);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px)}
.pills li .i{color:var(--honey)}
.pills--light li{background:var(--card);border:1px solid var(--card-line);color:var(--ink2)}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;background:rgba(242,178,76,.12);color:var(--honey-l);border:1px solid rgba(242,178,76,.35)}
.tag--light{background:var(--honey-s);color:var(--a-d);border-color:var(--honey-line)}

#bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--honey);z-index:130;transition:width .1s linear}
.rise{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.rise.in{opacity:1;transform:none}

/* ── plutajuća navigacija (pill na kremi) ── */
.nav{position:sticky;top:12px;z-index:110;padding:12px 16px 0}
.nav-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:16px;
  padding:8px 8px 8px 16px;border-radius:999px;background:rgba(255,252,246,.78);border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:0 10px 34px rgba(18,48,42,.1)}
.brand{display:flex;align-items:center;gap:10px;color:var(--d1);text-decoration:none;flex:none}
.brand:hover{color:var(--d1)}
.brand-name{font-family:var(--font-serif);font-weight:700;font-size:1.2rem;letter-spacing:-.01em;line-height:1}
.brand img{height:36px;width:auto;display:block}
.brand-mark{width:36px;height:36px;display:block;border-radius:11px}
.nav-links{display:none;gap:2px;margin-left:auto}
.nav-links a{color:var(--nav-ink);text-decoration:none;font-size:.9rem;font-weight:700;padding:10px 14px;border-radius:999px;transition:background-color .2s ease}
.nav-links a:hover{background:rgba(18,48,42,.06);color:var(--d1)}
.nav .btn{margin-left:auto}
@media(min-width:960px){.nav-links{display:flex}.nav .nav-links~.btn{margin-left:6px}}
@media(max-width:480px){
  .nav{padding:10px 10px 0}
  .nav-in{gap:8px;padding:6px 6px 6px 10px}
  .brand-mark{width:32px;height:32px}
  .brand-name{font-size:1rem}
  .nav .btn--sm{padding:0 14px;font-size:.74rem;letter-spacing:.02em;min-height:40px}
}


/* logo traka bez navigacije (funnel/upsell, hvala, obične stranice) */
.brandline{display:flex;justify-content:center;margin:0;padding:16px 16px 0}
.brandline a,.brandbar{display:inline-flex;align-items:center;gap:10px;padding:8px 20px 8px 8px;border-radius:999px;
  background:rgba(255,252,246,.78);border:1px solid rgba(255,255,255,.9);box-shadow:0 10px 34px rgba(18,48,42,.08);
  color:var(--d1);text-decoration:none}
.brandline img{height:36px;width:auto}
.brandline .brand-mark{width:36px;height:36px}

/* ── kartice ── */
.card{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r4);padding:32px;box-shadow:var(--sh3)}
.honest{background:var(--honey-s);border:1px solid var(--honey-line);border-radius:24px;padding:30px;color:#5A4130}
.honest h3{color:var(--honey-ink);font-size:1.15rem}
.honest p{color:#5A4130}
.honest p:last-child{margin:0}
.honest a{color:var(--honey-ink)}
.grid2,.grid3,.grid4{display:grid;gap:18px;margin-top:48px}
@media(min-width:820px){.grid2{grid-template-columns:1fr 1fr}}
@media(min-width:700px){.grid3{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.grid3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:640px){.grid4{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.grid4{grid-template-columns:repeat(4,1fr)}}

/* ── footer: tamna kartica ── */
footer{padding:40px 16px;text-align:center;color:var(--muted);font-size:.88rem}
footer a{color:var(--muted)}
.site-foot{padding:0 16px 16px;text-align:left}
.site-foot .foot-in{max-width:var(--page);margin:20px auto 0;border-radius:var(--r5);background:var(--d0);color:var(--on-dark-2);
  padding:clamp(28px,4vw,44px) clamp(24px,5vw,64px)}
.foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.foot-brand{display:flex;align-items:center;gap:14px}
.foot-brand .brand-mark{width:40px;height:40px}
.foot-brand b{display:block;font-family:var(--font-serif);font-weight:700;font-size:1.25rem;color:#fff;line-height:1.2}
.foot-brand span{display:block;font-size:.88rem;color:var(--on-dark-2)}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 24px}
.site-foot .foot-links a{color:var(--on-dark);font-weight:800;text-decoration:none;font-size:.95rem}
.site-foot .foot-links a:hover{color:var(--honey)}
.foot-made{display:inline-flex;opacity:.85;transition:opacity .2s}.foot-made:hover{opacity:1}
.foot-made img{display:block;height:34px;width:auto}
.foot-note{margin:26px 0 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:.8rem;color:var(--on-dark-3)}
@media(max-width:760px){.site-foot{padding:0 12px 12px}.site-foot .foot-in{border-radius:28px}}

.dz-devnote{position:fixed;left:12px;bottom:12px;z-index:200;background:var(--w);color:#fff;font-size:.75rem;font-weight:800;padding:8px 14px;border-radius:99px;opacity:.92}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── kutija za kopiranje (Smočnica, Prva Staklenka) ── */
.prompt-box{background:var(--d1);border-radius:16px;overflow:hidden;margin:14px 0}
.prompt-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 15px;
  background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.1)}
.prompt-top span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:900;color:var(--honey)}
.copy-btn{background:var(--honey);border:none;color:var(--on-honey);font-family:inherit;
  font-weight:900;font-size:.8rem;padding:8px 16px;border-radius:99px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
  transition:background-color .2s ease,transform .2s ease}
.copy-btn:hover{background:var(--honey-hi)}
.copy-btn:active{transform:translateY(1px)}
.copy-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.copy-btn.ok{background:var(--g);color:#fff}
.prompt-box pre{margin:0;padding:16px;color:#DCEBE1;font-family:Consolas,ui-monospace,monospace;
  font-size:.83rem;line-height:1.6;white-space:pre-wrap;word-break:break-word;max-height:340px;overflow:auto}
.prompt-title{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:900;color:var(--honey)}
.linkbtn{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--card-line);border-radius:99px;padding:8px 16px;
  font-family:inherit;font-weight:800;font-size:.82rem;color:var(--d1);cursor:pointer;text-decoration:none;transition:border-color .2s ease}
.linkbtn:hover{border-color:var(--honey)}

/* ── jedinstveni gumb za otvaranje/zatvaranje (akordeoni, FAQ, dani, lekcije) ── */
.tgl,.q summary:after,.qq summary:after{
  flex:none;width:36px;height:36px;border-radius:50%;
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%231E4D3E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
  transition:transform .28s cubic-bezier(.4,0,.2,1),background-color .2s ease}
.q summary:after,.qq summary:after{content:"";position:absolute;right:18px;top:50%;margin-top:-18px}
.day[open] .tgl,.day-wrap.open>.day-header .tgl,.lesson.open .tgl,.q[open] summary:after,.qq[open] summary:after{transform:rotate(180deg);background-color:var(--honey-s)}
summary:hover .tgl,.day-header:hover .tgl,.lesson-head:hover .tgl,.q summary:hover:after,.qq summary:hover:after{background-color:var(--honey-s)}

/* ── diskretne animacije ── */
.btn:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg)}
.btn:hover:after{animation:dz-shine .8s ease}
@keyframes dz-shine{to{left:130%}}
.mini,.bonus,.duo-card,.card,.item,.step,.light,.bcard,.fstep,.nstep,.day,.q,.qq,.lesson,.tool{
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.mini:hover,.bonus:hover,.duo-card:hover,.card:hover,.item:hover,.step:hover,.light:hover,.bcard:hover,.fstep:hover,.nstep:hover,.tool:hover{
  transform:translateY(-4px);box-shadow:0 18px 40px rgba(18,48,42,.1)}
.ico-box,.mini .ico,.bonus .ico,.item .ico,.bcard .ico{transition:transform .3s ease}
.mini:hover .ico-box,.bonus:hover .ico-box,.item:hover .ico-box,.bcard:hover .ico-box{transform:scale(1.08) rotate(-6deg)}
.brand .brand-mark,.brandline .brand-mark{transition:transform .3s ease}
.brand:hover .brand-mark,.brandline a:hover .brand-mark{transform:rotate(-8deg) scale(1.06)}
a{transition:color .2s ease}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
  .btn,.btn:hover{transition:none;transform:none}
  .btn:hover:after{animation:none}
  .mini:hover,.bonus:hover,.duo-card:hover,.card:hover,.item:hover,.step:hover,.light:hover,.bcard:hover,.fstep:hover,.nstep:hover,.tool:hover{transform:none}
  .mini:hover .ico-box,.bonus:hover .ico-box,.item:hover .ico-box,.bcard:hover .ico-box,.brand:hover .brand-mark,.brandline a:hover .brand-mark{transform:none}
  .tgl,.q summary:after,.qq summary:after{transition:none}
}

/* ── ilustrirana staklenka (dz_jar_svg) — sales hero, polica, Prva Staklenka, hvala ── */
.jar-svg{display:block;width:100%;height:auto;overflow:visible}
.jar-lid{fill:#C98A27}.jar-lid-hi{fill:#E7A947}
.jar-lid-line{fill:none;stroke:#A86F18;stroke-width:.8}
.jar-neck{fill:rgba(255,255,255,.22)}
.jar-glass{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.55);stroke-width:1}
.jar-fill{fill:var(--jar,var(--honey))}
.jar-shine{fill:#fff;opacity:.36}.jar-shine2{fill:#fff;opacity:.25}
.jar-label{fill:var(--card)}
.jar-label-line{fill:none;stroke:var(--d2);stroke-width:.5;stroke-dasharray:1.2 1}
.jar-t1{font-family:var(--font-serif);font-size:6.2px;font-weight:700;fill:var(--d1)}
.jar-t2{font-family:var(--font-serif);font-size:6.2px;font-style:italic;font-weight:600;fill:var(--a-d)}
.jar-num{font-family:var(--font-serif);font-size:15px;font-weight:700;fill:var(--d1)}
.jar-svg .lvl{transform-box:fill-box;transform-origin:50% 100%}
.jar-light .jar-glass{fill:var(--honey-s);stroke:var(--a-d);stroke-width:2.5}
.jar-light .jar-neck{fill:rgba(185,121,28,.18)}
.jar-empty .jar-lid,.jar-empty .jar-lid-hi{fill:var(--dash)}
.jar-empty .jar-lid-line,.jar-empty .jar-neck,.jar-empty .jar-shine,.jar-empty .jar-shine2{display:none}
.jar-empty .jar-glass{fill:none;stroke:#B8AE9A;stroke-width:2.5}
.jar-empty .jar-fill{fill:#E3DBCB}
.jar-fill-hi{fill:#fff;opacity:.28}
.jar-empty .jar-fill-hi{display:none}
.btn--sm{white-space:nowrap}
@media(max-width:420px){.nav .brand-name{display:none}.nav .btn--sm{font-size:.8rem;padding:0 16px}}
@media(max-width:480px){.btn{padding:0 22px;font-size:.92rem}.tag{letter-spacing:.04em;font-size:.72rem}}
/* dvije svijetle sekcije zaredom — bez dvostrukog razmaka */
.block--cream+.block--cream,.block--cream+.block--paper,.block--paper+.block--cream,.block--paper+.block--paper{padding-top:0}