/* ===== css/style.css ===== */

/* ============================================================
   đ / Đ — POPRAVKA GLIFA
   Fraunces nema prečku na đ: crta ga kao obično „d", pa „Svođe"
   ispadne „Svode". Izmereno na platnu: razlika d/đ je 9 px u
   Fraunces-u, a 183 px u sistemskom serifu. Za te dve kodne tačke
   pozajmljujemo glif iz serifa koji je stvarno ima.
   ============================================================ */
@font-face{
  font-family:"DjFix";
  src:local("Georgia"), local("Times New Roman"), local("Liberation Serif"),
      local("DejaVu Serif"), local("Noto Serif"), local("Nimbus Roman");
  unicode-range:U+0110, U+0111;
  font-display:swap;
}
/* ============================================================
   RADONJIĆ MED
   Sistem: šesterougao na više razmera · med kao easing
   ============================================================ */

/* ---------- 1. TOKENI ---------- */
:root{
  /* baza */
  --cream:    #FBF3E4;
  --cream-2:  #F4E6CB;
  --paper:    #FFFCF5;
  --ink:      #2A180C;
  --ink-2:    #5C3F29;
  /* #937257 je 2026-08-17 zamenjen tamnijim tonom iste boje. Stari je na
     kremastoj pozadini davao odnos kontrasta 3,98, a na --cream-2 samo 3,56,
     dok WCAG AA za sitan tekst traži 4,5. Ovom bojom su ispisane sve male
     verzalne oznake (eyebrow, datumi, prebacivač jezika, next__k), pa je to
     bio propust na celom sajtu. Nova vrednost daje 5,10 na --cream i 4,56 na
     --cream-2. Ako se pozadina ikad posvetli ili potamni, oba odnosa se
     računaju ponovo. */
  --ink-3:    #7E624A;

  /* akcenti */
  --propolis: #B23A1B;
  --wax:      #F3C13F;
  --forest:   #24402A;

  /* pet medova — svaki svoja boja, svuda ista */
  --bagrem:   #F7DE9A;
  --lipa:     #CFC96B;
  --livada:   #E19A33;
  --suma:     #3B2415;
  --vresak:   #CE8B79;

  /* tonovi na tamnoj podlozi */
  --on-dark:  #F6EBD6;

  /* jedna filozofija kretanja: med — težak, viskozan, blagi prebačaj */
  --ease:     cubic-bezier(.22, 1.08, .31, 1);
  --ease-in:  cubic-bezier(.62, .01, .77, .18);
  --dur:      .82s;
  --dur-slow: 1.25s;

  /* mera */
  --nav-h:    68px;
  --gut:      clamp(20px, 5vw, 64px);
  --maxw:     1400px;

  /* šesterougao */
  --hex: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  --hex-flat: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  --cut-x: 22px;
  --cut-y: 38px;
}
@media (min-width: 900px){ :root{ --nav-h: 84px; --cut-x: 30px; --cut-y: 52px; } }

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
/* Bez Lenisa (telefon) skok na sidro radi sam pregledač, pa mora da zna za
   traku na vrhu — inače naslov na koji se skače završi ispod nje. */
html{ scroll-padding-top:calc(var(--nav-h) + 12px); }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
/* PROBANO I ODBAČENO 2026-08-17: metrički usklađeni rezervni fontovi
   ("DM Sans Fallback" i "Fraunces Fallback" sa size-adjust / ascent-override,
   brojevi izmereni preko canvas measureText). Ideja je bila da se ukloni
   pomeranje pri zameni fonta na stranama sorti. Mereno posle: CLS na
   /medovi/bagrem/ 0,128 → 0,130, na /vlasinski/ 0,228 → 0,258, a POČETNA se
   pokvarila sa 0,012 na 0,124 uz nov izvor pomeranja (.hero__aside).
   Ne vraćati bez merenja na sve četiri strane. */
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:1.125rem;
  line-height:1.65;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
[hidden]{ display:none !important; }
/* selekcija u boji brenda, ne podrazumevana plava */
::selection{ background:var(--wax); color:var(--ink); text-shadow:none; }
::-moz-selection{ background:var(--wax); color:var(--ink); text-shadow:none; }
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
button,input,textarea{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:inherit; }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{
  position:fixed; top:8px; left:8px; z-index:2000;
  background:var(--ink); color:var(--cream); padding:.7em 1.1em;
  transform:translateY(-160%); transition:transform .3s var(--ease);
}
.skip:focus{ transform:none; }
:focus-visible{ outline:3px solid var(--propolis); outline-offset:3px; border-radius:2px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

/* ---------- 3. TIPOGRAFIJA ---------- */
.h2, .h3, .hero__h1, .hcard__title, .cell h3, .refrain, .never__h, .idx__name,
.loader__word, .nav__word, .count__v, .site__alt, .mos__c span, .jar span{
  font-family:"Fraunces", ui-serif, Georgia, serif;
  font-variation-settings:"SOFT" 40, "WONK" 1;
}
em{ font-style:italic; }
.hero__h1 em, .h2 em, .h3 em, .refrain em, .never__h em, .cell h3 em{
  font-style:italic;
  font-variation-settings:"SOFT" 70, "WONK" 1;
  color:var(--propolis);
}

.hero__h1{
  font-size:clamp(3.6rem, 16.5vw, 12rem);
  /* .88 je bilo ispod donje granice za srpski tekst. U Fraunces-u kvačica na
     Č i Š diže mrlju na .89em iznad osnovne linije (golo C ide do .72em), pa
     red koji počinje sa „Čemernika" ulazi u red iznad sebe kad god je prored
     manji od .90em. Na naslovnoj se to i videlo: kvačica je doticala „m" iz
     „med". .95 ostavlja .05em vazduha i zadržava zbijen slog. */
  line-height:.95;
  letter-spacing:-.035em;
  font-weight:500;
}
.h2{
  font-size:clamp(2.15rem, 7vw, 5rem);
  line-height:1;
  letter-spacing:-.03em;
  font-weight:500;
  margin:0 0 .5em;
}
.h3{
  font-size:clamp(1.45rem, 4.2vw, 2.3rem);
  line-height:1.1;
  letter-spacing:-.02em;
  font-weight:500;
  margin:0 0 .5em;
}
.lede{
  font-size:clamp(1.05rem, 2.4vw, 1.3rem);
  line-height:1.6;
  max-width:44ch;
  color:var(--ink-2);
}
.eyebrow{
  font-family:"Space Grotesk", ui-monospace, monospace;
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-2);
  display:flex; align-items:center; gap:.6em;
  margin:0 0 1.4em;
}
/* .72 je na propolis-crvenoj (#b23a1b) davalo 3,33 — ispod praga.
   .95 daje 4,72, a na tamnobraon sekcijama samo popravlja stvar. */
.eyebrow--light{ color:rgba(246,235,214,.95); }

/* ---------- 4. HEKS PRIMITIVI ---------- */
.hexdot{
  width:.62em; height:.72em; flex:none;
  background:currentColor;
  clip-path:var(--hex);
  opacity:.9;
  display:inline-block;
}
.hexframe{
  position:relative;
  aspect-ratio:.866;
  clip-path:var(--hex);
  overflow:hidden;
  background:var(--cream-2);
}
.hexframe img{
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.06);
  transition:transform var(--dur-slow) var(--ease);
}
.hexframe:hover img{ transform:scale(1.14); }
.hexframe--flat{ aspect-ratio:1.1547; clip-path:var(--hex-flat); }

.hexcut{
  clip-path:polygon(
    var(--cut-x) 0, 100% 0,
    100% calc(100% - var(--cut-y)), calc(100% - var(--cut-x)) 100%,
    0 100%, 0 var(--cut-y));
}

/* heks tesselacija — papir, ne tapeta */
.tess{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 103.92'%3E%3Cg fill='none' stroke='%232A180C' stroke-width='2'%3E%3Cpolygon points='30,0 60,17.32 60,51.96 30,69.28 0,51.96 0,17.32'/%3E%3Cpolygon points='0,51.96 30,69.28 30,103.92 0,121.24 -30,103.92 -30,69.28'/%3E%3Cpolygon points='60,51.96 90,69.28 90,103.92 60,121.24 30,103.92 30,69.28'/%3E%3Cpolygon points='0,-51.96 30,-34.64 30,0 0,17.32 -30,0 -30,-34.64'/%3E%3Cpolygon points='60,-51.96 90,-34.64 90,0 60,17.32 30,0 30,-34.64'/%3E%3C/g%3E%3C/svg%3E");
  background-size:46px 80px;
}
.tess--light{
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 103.92'%3E%3Cg fill='none' stroke='%23F6EBD6' stroke-width='2'%3E%3Cpolygon points='30,0 60,17.32 60,51.96 30,69.28 0,51.96 0,17.32'/%3E%3Cpolygon points='0,51.96 30,69.28 30,103.92 0,121.24 -30,103.92 -30,69.28'/%3E%3Cpolygon points='60,51.96 90,69.28 90,103.92 60,121.24 30,103.92 30,69.28'/%3E%3Cpolygon points='0,-51.96 30,-34.64 30,0 0,17.32 -30,0 -30,-34.64'/%3E%3Cpolygon points='60,-51.96 90,-34.64 90,0 60,17.32 30,0 30,-34.64'/%3E%3C/g%3E%3C/svg%3E");
}

/* tonovi */
[data-tone="bagrem"]{  --tone:var(--bagrem);  --tone-ink:var(--ink); }
[data-tone="lipa"]{    --tone:var(--lipa);    --tone-ink:var(--ink); }
[data-tone="livada"]{  --tone:var(--livada);  --tone-ink:var(--ink); }
[data-tone="suma"]{    --tone:var(--suma);    --tone-ink:var(--on-dark); }
[data-tone="vresak"]{  --tone:var(--vresak);  --tone-ink:var(--ink); }
[data-tone="wax"]{     --tone:var(--wax);     --tone-ink:var(--ink); }
[data-tone="propolis"]{--tone:var(--propolis);--tone-ink:var(--cream); }
[data-tone="cream"]{   --tone:var(--cream-2); --tone-ink:var(--ink); }

/* ---------- 5. KOMPONENTE ---------- */
/* Šesterougaona ispuna raste iza natpisa.
   Boje ispune su birane tako da natpis NIKAD ne menja boju — zato prolazi AA
   na 0 %, 50 % i 100 % animacije. (Svetla ispuna + invertovanje natpisa
   matematički ne može da prođe AA na sredini: ~2,2:1.) */
.btn{
  --btn-bg:var(--ink); --btn-fg:var(--cream); --btn-fill:var(--propolis);
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--btn-bg); color:var(--btn-fg);
  padding:1.05em 1.9em;
  font-weight:600; font-size:.98rem; letter-spacing:.01em;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 22px),calc(100% - 14px) 100%,0 100%,0 22px);
  transition:transform .45s var(--ease);
  will-change:transform;
  cursor:pointer; border:0; text-align:center;
}
.btn__fill{
  position:absolute; left:50%; top:50%;
  width:155%; aspect-ratio:.866;
  translate:-50% -50%;
  z-index:0;
  background:var(--btn-fill);
  clip-path:var(--hex);
  transform:scale(0); transform-origin:50% 50%;
  transition:transform .62s var(--ease);
  pointer-events:none;
}
.btn__t{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:.6em; }
.btn:hover .btn__fill,
.btn:focus-visible .btn__fill{ transform:scale(1); }
.btn--sm{ padding:.72em 1.25em; font-size:.88rem;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 16px),calc(100% - 10px) 100%,0 100%,0 16px); }
.btn--full{ width:100%; }
.btn--wax{ --btn-bg:var(--wax); --btn-fg:var(--ink); --btn-fill:var(--cream); }

.link{
  display:inline-block;
  font-weight:600;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1.5px;
  transition:background-size var(--dur) var(--ease);
  border:0; background-color:transparent; padding:0; cursor:pointer;
}
.link:hover, .link:focus-visible{ background-size:100% 1.5px; }
.link--out{ margin-top:.6em; color:var(--propolis); }

.chip{
  font-family:"Space Grotesk", monospace;
  font-size:.78rem; letter-spacing:.04em;
  display:inline-flex; align-items:center; gap:.4em;
  padding:.42em .78em;
  background:rgba(42,24,12,.09);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 11px),calc(100% - 7px) 100%,0 100%,0 11px);
}
.chip--price{ background:var(--ink); color:var(--cream); }
.chip--ok{ background:rgba(36,64,42,.16); }
.chip--low{ background:rgba(178,58,27,.15); }
.chip--out{ background:var(--propolis); color:var(--cream); }

/* placeholder — dizajniran, ne rupa */
.ph{
  font-family:"Space Grotesk", monospace;
  font-size:.8em; letter-spacing:.03em;
  display:inline-flex; align-items:center;
  padding:.2em .55em;
  color:var(--ink-3);
  border:1.5px dashed currentColor;
  background:repeating-linear-gradient(-60deg,transparent 0 5px,rgba(147,114,87,.09) 5px 10px);
  cursor:help;
  white-space:nowrap;
}
.ph--block{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; border:0; font-size:.9rem;
}

.tag{
  font-family:"Space Grotesk", monospace;
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.3em .6em; white-space:nowrap;
}
.tag--ok{ background:rgba(36,64,42,.2); }
.tag--low{ background:rgba(178,58,27,.18); }
.tag--out{ background:var(--propolis); color:var(--cream); }

.refrain{
  font-size:clamp(2.6rem, 11vw, 9rem);
  line-height:.9; letter-spacing:-.035em; font-weight:500;
  margin:0;
}
.refrain--xl{ font-size:clamp(3rem, 13vw, 11rem); }
.refrain--outline{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(246,235,214,.55);
  margin-bottom:.35em;
}
.refrain--outline em{ color:transparent; -webkit-text-stroke:1.5px var(--wax); }

/* ---------- 6. LOADER ---------- */
.loader{ display:none; }
html.is-loading .loader{
  position:fixed; inset:0; z-index:1500;
  background:var(--cream);
  display:grid; place-items:center;
}
.loader__mark{ display:grid; justify-items:center; gap:1rem; }
.loader__word{
  font-size:clamp(1.5rem,5vw,2.4rem); letter-spacing:-.02em;
  opacity:0;
}
.monogram{ width:64px; height:auto; }
.monogram__cell{ fill:none; stroke:var(--ink); stroke-width:3; }
/* R je centriran po VISINI SLOVA (cap-height), ne po dominant-baseline —
   dominant-baseline meri po em kutiji pa slovo vizuelno sedi previsoko u ćeliji. */
.monogram__r{
  font-family:"DjFix","Fraunces",serif; font-size:52px; font-style:italic;
  font-variation-settings:"SOFT" 70,"WONK" 1;
  fill:var(--ink);
}

/* ---------- 7. KURSOR ---------- */
/* na dodir nema pokazivača koji bi ga vukao — heksagon bi lebdeo bez razloga */
@media (hover:none), (pointer:coarse){ .cursor{ display:none !important; } }
.cursor{
  position:fixed; top:0; left:0; z-index:1400;
  pointer-events:none;
  width:12px; height:14px;
  margin:-7px 0 0 -6px;
  opacity:0;
  transition:opacity .3s;
}
/* Uvećan kursor je ŠUPALJ prsten, ne pun šesterougao.
   Pun je prekrivao natpis na dugmetu — to je bio pravi uzrok "nestalog" teksta. */
.cursor__hex{
  display:block; width:100%; height:100%; overflow:visible;
  transform-origin:50% 50%;
  transition:transform .42s var(--ease);
}
.cursor__hex polygon{
  fill:var(--propolis); stroke:var(--propolis); stroke-width:0;
  transition:fill .42s var(--ease), stroke-width .42s var(--ease);
}
.cursor.is-on{ opacity:1; }
.cursor.is-big .cursor__hex{ transform:scale(3.2); }
/* wax prsten: čita se i na propolis ispuni dugmeta i na tamnim sekcijama */
.cursor.is-big .cursor__hex polygon{ fill:transparent; stroke:var(--wax); stroke-width:5; }

/* ---------- 8. NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:var(--nav-h);
  display:flex; align-items:center; gap:1.5rem;
  padding-inline:var(--gut);
  background:rgba(251,243,228,0);
  transition:background .5s var(--ease), box-shadow .5s var(--ease);
}
.nav.is-stuck{
  background:rgba(251,243,228,.94);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(42,24,12,.1);
}
.nav__brand{ display:flex; align-items:center; gap:.6rem; margin-right:auto; }
.monogram--sm{ width:26px; }
.nav__word{ font-size:1.08rem; letter-spacing:-.02em; white-space:nowrap; }
.nav__word em{ color:var(--propolis); }
/* mobilni meni */
.burger{
  width:40px; height:40px; flex:none; margin-left:auto;
  background:none; border:0; padding:0; cursor:pointer;
  display:grid; place-content:center; gap:6px;
}
.burger i{ display:block; width:22px; height:1.8px; background:var(--ink);
  transition:transform .5s var(--ease), opacity .3s var(--ease); }
.burger[aria-expanded="true"] i:first-of-type{ transform:translateY(3.9px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-of-type{ transform:translateY(-3.9px) rotate(-45deg); }
/* Panel je ranije imao justify-content:center bez skrolovanja. Spisak je u
   međuvremenu narastao na jedanaest stavki plus dugme, telefon i izbor jezika,
   pa na telefonu više ne staje u ekran: centriranje tada prelije sadržaj na
   OBE strane, gornji deo ode ispod trake sa logotipom i korpom i do njega se
   ne može doći, jer preliv iznad početka nije dohvatljiv skrolom.
   Sada panel skroluje, a automatske margine centriraju spisak samo kad ima
   mesta i same se poništavaju kad ga nema. */
.navpanel{
  position:fixed; inset:0; z-index:880;
  background:var(--cream);
  padding:calc(var(--nav-h) + 1.5rem) var(--gut) 3rem;
  display:flex; flex-direction:column; justify-content:flex-start; gap:2.5rem;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  opacity:0; transition:opacity .45s var(--ease);
}
.navpanel > *{ flex-shrink:0; }
.navpanel > :first-child{ margin-top:auto; }
.navpanel > :last-child{ margin-bottom:auto; }
.navpanel.is-on{ opacity:1; }
.navpanel nav{ display:grid; gap:.2rem; }
.navpanel nav a{
  font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(2rem,9vw,3rem); line-height:1.12; letter-spacing:-.03em; font-weight:500;
}
.navpanel nav a:active{ font-style:italic; color:var(--propolis); }
.navpanel__alts{ display:grid; gap:.5rem; padding-top:1.6rem; border-top:1px solid rgba(42,24,12,.18); }
.navpanel__alts li{ display:flex; align-items:center; gap:.6em;
  font-family:"Space Grotesk",monospace; font-size:.78rem; letter-spacing:.08em; color:var(--ink-2); }
html.menu-open{ overflow:hidden; }

/* Sedma stavka („Beleške”) staje tek ako razmak sme da se stisne — inače
   na 900—1100 px zaglavlje istisne korpu i dugme sa desne strane. */
.nav__links{ display:none; gap:clamp(.85rem,1.6vw,1.6rem); font-size:.95rem; font-weight:500;
  white-space:nowrap; }
.nav__links a{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat; background-position:0 100%; background-size:0% 1.5px;
  transition:background-size var(--dur) var(--ease);
}
.nav__links a:hover{ background-size:100% 1.5px; }
.nav__cta{ display:none; }
@media (min-width:900px){
  .nav__links{ display:flex; }
  .nav__cta{ display:inline-flex; }
  .nav__word{ font-size:1.25rem; }
  .monogram--sm{ width:32px; }
  .burger{ display:none; }
  .navpanel{ display:none !important; }
}

/* ---------- 9. HERO ---------- */
.hero{
  position:relative;
  padding:calc(var(--nav-h) + 3rem) 0 3.5rem;
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
}
.hero__tess{ }
.hero__inner{
  position:relative; z-index:1;
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  display:grid; gap:1.6rem;
}
.hero__h1{ margin:0; }
.hero__h1 .w{ display:inline-block; }
.hero__promise{ max-width:38ch; font-size:1.05rem; color:var(--ink-2); }
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; }
.hero__fig{ margin:0; }
.hexframe--tall{ aspect-ratio:.866; }
.hero__fig .hexframe{ width:min(78vw, 340px); }
.hero__cap{
  font-family:"Space Grotesk",monospace; font-size:.74rem; letter-spacing:.08em;
  color:var(--ink-3); display:flex; align-items:center; gap:.5em; margin-top:.9rem;
}
.hero__alts{
  display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.4rem;
  scrollbar-width:none; -ms-overflow-style:none;
}
.hero__alts::-webkit-scrollbar{ display:none; }
.hero__alts li{
  flex:none; display:flex; align-items:center; gap:.45em;
  font-family:"Space Grotesk",monospace; font-size:.75rem; letter-spacing:.05em;
  padding:.5em .85em; background:rgba(42,24,12,.06);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 12px),calc(100% - 8px) 100%,0 100%,0 12px);
  white-space:nowrap;
}
.hero__alts b{ font-weight:600; }
.hero__alts span{ color:var(--ink-3); }
.scrollcue{ display:none; }

@media (min-width:900px){
  .hero__inner{
    grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
    grid-template-areas:
      "eyebrow fig"
      "h1      fig"
      "aside   fig"
      "alts    cue";
    align-items:start;
    gap:2rem 3rem;
  }
  .hero__eyebrow{ grid-area:eyebrow; margin:0; }
  .hero__h1{ grid-area:h1; }
  .hero__aside{ grid-area:aside; display:flex; flex-direction:column; gap:1.4rem; align-items:flex-start; }
  .hero__fig{ grid-area:fig; justify-self:end; align-self:center; }
  .hero__fig .hexframe{ width:min(34vw, 420px); }
  .hero__alts{ grid-area:alts; overflow:visible; flex-wrap:wrap; }
  .scrollcue{
    grid-area:cue; display:flex; align-items:center; gap:.7rem; justify-self:end; align-self:center;
    font-family:"Space Grotesk",monospace; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-3);
  }
  .scrollcue svg{ width:16px; fill:none; stroke:var(--propolis); stroke-width:6; animation:cue 2.6s var(--ease) infinite; }
}
@keyframes cue{ 0%,100%{ transform:translateY(0); opacity:.5 } 50%{ transform:translateY(7px); opacity:1 } }

/* ---------- 10. TICKER ---------- */
.ticker{ overflow:hidden; }
.ticker__row{
  background:var(--propolis); color:var(--cream);
  overflow:hidden; padding:.7rem 0;
  border-block:1px solid rgba(42,24,12,.15);
}
.ticker__row--alt{ background:var(--wax); color:var(--ink); }
/* Pomera se preko translate3d iz JS-a (modulo omotavanje).
   Namerno BEZ CSS keyframe-ova u procentima — oni driftuju i vidno preskaču. */
.ticker__track{
  display:flex; align-items:center; width:max-content;
  will-change:transform;
}
.ticker__grp{ display:flex; align-items:center; gap:1.4rem; padding-right:1.4rem; flex:none; }
.ticker__track span{
  font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(1.7rem,5.5vw,3.6rem); line-height:1; letter-spacing:-.02em; white-space:nowrap;
}
.ticker__row--alt .ticker__track span{
  font-family:"Space Grotesk",monospace;
  font-size:clamp(.78rem,2vw,1.05rem); letter-spacing:.2em; text-transform:uppercase;
}
.ticker__track .hexdot{ opacity:.55; }

/* ---------- 11. INDEKS ---------- */
.index{ padding:clamp(4.5rem,11vw,9rem) 0; }
.index__grid{ display:grid; gap:2.5rem; }
.index__head .h2{ max-width:14ch; }
.index__viewer{ display:none; }

.idx{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"n name arrow" "n meta arrow";
  align-items:center;
  gap:0 1rem;
  padding:1.15rem 0;
  border-top:1px solid rgba(42,24,12,.16);
  transition:padding-left var(--dur) var(--ease), color var(--dur) var(--ease);
}
.index__list .idx:last-child{ border-bottom:1px solid rgba(42,24,12,.16); }
.idx::before{
  content:""; position:absolute; inset:0 -1rem;
  background:var(--tone,var(--wax)); opacity:0; z-index:-1;
  transition:opacity var(--dur) var(--ease);
}
.idx__n{
  grid-area:n; font-family:"Space Grotesk",monospace; font-size:.85rem;
  color:var(--ink-3); letter-spacing:.06em;
}
.idx__name{
  grid-area:name; font-size:clamp(1.6rem,6vw,3rem); line-height:1.05;
  letter-spacing:-.025em; font-weight:500;
  transition:font-variation-settings var(--dur) var(--ease);
}
.idx__meta{
  grid-area:meta; font-family:"Space Grotesk",monospace;
  font-size:.74rem; letter-spacing:.07em; color:var(--ink-3);
}
.idx__arrow{
  grid-area:arrow; width:.7em; height:.8em; background:var(--propolis);
  clip-path:var(--hex); opacity:0; transform:translateX(-8px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.idx__thumb{
  grid-area:arrow; width:56px; aspect-ratio:.866; clip-path:var(--hex);
  overflow:hidden; margin-left:.5rem;
}
.idx__thumb img{ width:100%; height:100%; object-fit:cover; }

@media (min-width:900px){
  .index__grid{ grid-template-columns:minmax(0,1fr) minmax(0,.5fr); gap:3rem 4rem; align-items:start; }
  .index__head{ grid-column:1 / -1; }
  .index__viewer{ display:block; position:sticky; top:calc(var(--nav-h) + 3rem); }
  .index__viewer .hexframe{ width:100%; }
  #idxImg{ transition:none; }
  .idx__thumb{ display:none; }
  .idx{ grid-template-areas:"n name meta" ; grid-template-columns:auto 1fr auto; padding:1.4rem 0; }
  .idx__meta{ text-align:right; }
  .idx__arrow{ display:none; }
  .idx:hover{ padding-left:1.6rem; }
  .idx:hover::before{ opacity:.85; }
  .idx:hover .idx__name{ font-style:italic; font-variation-settings:"SOFT" 80,"WONK" 1; }
}

/* ---------- 12. PLANINA ---------- */
.mountain{
  position:relative;
  background:var(--ink); color:var(--on-dark);
  padding:clamp(4.5rem,11vw,9rem) 0;
  overflow:hidden;
}
.mountain .lede{ color:rgba(246,235,214,.68); }
.mountain__head{ max-width:52ch; margin-bottom:clamp(2.5rem,6vw,4rem); }

.comb{ position:relative; margin-inline:auto; }
.comb-wrap{ min-width:0; }
.hcell{ position:absolute; clip-path:var(--hex); background:rgba(246,235,214,.44); }
.hcell::after{
  content:""; position:absolute; inset:2px; clip-path:var(--hex);
  background:var(--ink); transition:background var(--dur) var(--ease);
}
.hcell--on{ background:var(--tone); }
.hcell--on::after{ background:var(--tone); }
.hcell__lab{
  position:absolute; inset:0; z-index:2;
  display:grid; place-content:center; text-align:center;
  font-family:"Space Grotesk",monospace; font-size:.72rem; letter-spacing:.02em;
  color:var(--tone-ink); line-height:1.2;
}
.hcell__lab b{ display:block; font-size:1.05rem; letter-spacing:-.01em; }

.sites{
  display:grid; gap:1.6rem;
  margin-top:clamp(2.5rem,6vw,4.5rem);
}
.site{
  display:grid; grid-template-columns:auto auto 1fr; gap:.2rem .7rem;
  align-items:baseline;
  padding-top:1.1rem; border-top:1px solid rgba(246,235,214,.2);
}
.site__alt{
  font-size:clamp(1.8rem,6vw,2.6rem); line-height:1; letter-spacing:-.03em;
  color:var(--tone);
}
.site__u{ font-family:"Space Grotesk",monospace; font-size:.8rem; color:rgba(246,235,214,.5); }
.site b{ grid-column:1 / -1; font-size:1.05rem; font-weight:600; }
.site span:last-child{ grid-column:1 / -1; font-size:.95rem; color:rgba(246,235,214,.62); }
@media (min-width:760px){ .sites{ grid-template-columns:repeat(4,1fr); gap:1.2rem; } }

/* ---------- 13. MOZAIK ---------- */
.mosaic{ background:var(--cream-2); padding:clamp(4.5rem,11vw,9rem) 0; }
.mosaic__head{ margin-bottom:clamp(2rem,5vw,3.5rem); }
.mos{
  display:grid; gap:.55rem;
  grid-template-columns:repeat(4,1fr);
  padding-inline:var(--gut);
  max-width:var(--maxw); margin-inline:auto;
}
.mos__c{ margin:0; overflow:hidden; background:var(--cream); position:relative; }
.mos__c img{ width:100%; height:100%; object-fit:cover; }
.mos__c--t1,.mos__c--t2,.mos__c--t3{
  display:grid; place-content:center; text-align:center; padding:1rem;
}
.mos__c--t1{ background:var(--wax); }
.mos__c--t2{ background:var(--bagrem); }
.mos__c--t3{ background:var(--propolis); color:var(--cream); }
.mos__c span{ display:block; font-size:clamp(2rem,7vw,4rem); line-height:.9; letter-spacing:-.03em; }
.mos__c em{ font-family:"DjFix","Fraunces",serif; font-style:italic; font-variation-settings:"SOFT" 70,"WONK" 1;
  font-size:clamp(1.6rem,5vw,3rem); letter-spacing:-.02em; }
.mos__c small{ font-family:"Space Grotesk",monospace; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; opacity:.75; }
.mos__c--a{ grid-column:span 4; aspect-ratio:16/10; }
.mos__c--t1{ grid-column:span 2; aspect-ratio:1; }
.mos__c--b{ grid-column:span 2; aspect-ratio:1; }
.mos__c--t2{ grid-column:span 2; aspect-ratio:1.2; }
.mos__c--c{ grid-column:span 2; aspect-ratio:.86; }
.mos__c--d{ grid-column:span 4; aspect-ratio:16/9; }
.mos__c--t3{ grid-column:span 2; aspect-ratio:1; }
.mos__c--e{ grid-column:span 2; aspect-ratio:1; }
@media (min-width:760px){
  .mos{ grid-template-columns:repeat(6,1fr); }
  .mos__c--a{ grid-column:span 4; aspect-ratio:16/11; }
  .mos__c--t1{ grid-column:span 2; aspect-ratio:auto; }
  .mos__c--b{ grid-column:span 2; aspect-ratio:auto; }
  .mos__c--t2{ grid-column:span 2; aspect-ratio:auto; }
  .mos__c--c{ grid-column:span 2; aspect-ratio:.86; }
  .mos__c--d{ grid-column:span 3; aspect-ratio:16/10; }
  .mos__c--t3{ grid-column:span 1; aspect-ratio:auto; }
  .mos__c--e{ grid-column:span 2; aspect-ratio:auto; }
}

/* ---------- 14. PET MEDOVA ---------- */
.honeys{ padding:clamp(4.5rem,11vw,9rem) 0 0; }
.honeys__head{ margin-bottom:clamp(2.5rem,6vw,4rem); }
.stack{ padding:0 var(--gut) clamp(4rem,10vw,8rem); max-width:var(--maxw); margin-inline:auto; }
.hcard{
  position:sticky;
  top:calc(var(--nav-h) + .8rem + var(--i) * 12px);
  margin-bottom:1.4rem;
}
.hcard__in{
  background:var(--tone); color:var(--tone-ink);
  display:grid; gap:0;
  overflow:hidden;
  box-shadow:0 -10px 40px rgba(42,24,12,.09);
}
.hcard__txt{ padding:clamp(1.5rem,5vw,3rem); display:flex; flex-direction:column; align-items:flex-start; }
.hcard__n{
  font-family:"Space Grotesk",monospace; font-size:.9rem; letter-spacing:.06em; margin:0 0 .8rem;
}
.hcard__n b{ font-weight:600; }
.hcard__n span{ opacity:.55; }
.hcard__title{ font-size:clamp(2.4rem,9vw,4.6rem); line-height:.95; letter-spacing:-.035em; font-weight:500; margin:0 0 .4em; }
.hcard__desc{ max-width:38ch; font-size:1.02rem; opacity:.88; }
.hcard__strip{
  display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin:.4rem 0 1.4rem;
  font-family:"Space Grotesk",monospace; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  padding-top:.9rem; border-top:1px solid currentColor; width:100%;
}
.hcard__strip li{ opacity:.72; }
.hcard__buy{ display:flex; flex-wrap:wrap; gap:.5rem; }
[data-tone="suma"] .chip{ background:rgba(246,235,214,.14); }
[data-tone="suma"] .chip--price{ background:var(--on-dark); color:var(--suma); }
[data-tone="suma"] .ph{ color:rgba(246,235,214,.7); }
.hcard__img{ order:-1; aspect-ratio:16/10; overflow:hidden; }
.hcard__img img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:860px){
  .hcard__in{ grid-template-columns:minmax(0,1fr) minmax(0,.85fr); align-items:stretch; }
  .hcard__img{ order:0; aspect-ratio:auto; min-height:clamp(360px,44vh,520px); }
  .hcard{ top:calc(var(--nav-h) + 1.5rem + var(--i) * 16px); margin-bottom:2rem; }
}

/* ---------- 15. KOLEKCIJA ---------- */
.coll{ background:var(--cream-2); padding:clamp(4.5rem,11vw,8rem) 0; overflow:hidden; }
.coll__head{ margin-bottom:clamp(2rem,5vw,3rem); }
.coll__head .h2{ max-width:16ch; }
.coll__viewport{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-inline:var(--gut);
}
.coll__viewport::-webkit-scrollbar{ display:none; }
.coll__track{ display:flex; gap:.9rem; width:max-content; }
.cell{
  flex:none; scroll-snap-align:center;
  width:clamp(230px,64vw,340px);
  aspect-ratio:.72;
  position:relative;
}
@media (min-width:900px){
  .cell{ aspect-ratio:auto; height:clamp(340px,56vh,470px); }
  .cell--type{ padding-bottom:5.5rem; }
}
.cell--type{
  background:var(--tone); color:var(--tone-ink);
  padding:1.6rem;
  display:flex; flex-direction:column; justify-content:flex-end; gap:.3rem;
  clip-path:polygon(var(--cut-x) 0,100% 0,100% calc(100% - var(--cut-y)),calc(100% - var(--cut-x)) 100%,0 100%,0 var(--cut-y));
}
.cell__n{ font-family:"Space Grotesk",monospace; font-size:.78rem; letter-spacing:.1em; opacity:.6; margin-bottom:auto; }
.cell h3{ font-size:clamp(2rem,7vw,3rem); line-height:.95; letter-spacing:-.03em; font-weight:500; margin:0; }
.cell p{ font-family:"Space Grotesk",monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; opacity:.7; margin:0; }
.cell--refrain{ justify-content:center; }
.cell--refrain h3{ font-size:clamp(2.2rem,7.5vw,3.2rem); }
.cell--refrain em{ color:var(--ink); }
.cell--last{ justify-content:flex-end; gap:1rem; }
.cell--last .btn{ align-self:flex-start; }
.cell--photo{ margin:0; display:grid; place-items:center; background:transparent; }
.cell--photo .hexframe{ width:100%; height:100%; aspect-ratio:auto; }
.coll__hint{
  display:flex; align-items:center; gap:.5em; justify-content:flex-end;
  max-width:var(--maxw); margin:1.2rem auto 0; padding-inline:var(--gut);
  font-family:"Space Grotesk",monospace; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
@media (min-width:900px){
  .coll{ padding-block:0; }
  .coll__pin{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; gap:2rem;
    padding-block:clamp(3rem,7vw,6rem); }
  .coll__viewport{ overflow:hidden; scroll-snap-type:none; }
  .coll__hint{ display:none; }
}
html.no-motion .coll__viewport{ overflow-x:auto; }

/* ---------- 16. KAP ---------- */
.drip{ position:relative; height:280px; margin-top:-1px; background:var(--cream-2); line-height:0; overflow:hidden; }
.drip__shelf{ position:absolute; top:0; left:0; right:0; height:14px;
  background:linear-gradient(var(--livada), #C9862A); }
.drip svg{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:360px; height:280px; }
#dripBody, #dripDrop{ fill:var(--livada); }

/* ---------- 17. POSTUPAK ---------- */
.process{ position:relative; padding:clamp(4rem,10vw,8rem) 0 clamp(4.5rem,11vw,9rem); overflow:hidden; }
.process__grid{ display:grid; gap:3rem; }
.process__sticky .lede{ margin-bottom:2rem; }
.process__fig{ margin:0; }
.process__fig .hexframe{ width:min(70vw,300px); }
.steps{ display:grid; gap:2.2rem; counter-reset:s; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:.2rem 1.2rem; align-items:start;
  padding-top:1.4rem; border-top:1px solid rgba(42,24,12,.16); }
.step__n{
  grid-row:span 2; font-family:"Space Grotesk",monospace; font-size:.85rem;
  letter-spacing:.08em; color:var(--propolis); padding-top:.35rem;
}
.step h3{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(1.4rem,4.5vw,2rem); line-height:1.05; letter-spacing:-.02em; font-weight:500; }
.step p{ margin:.35rem 0 0; color:var(--ink-2); max-width:46ch; }
@media (min-width:900px){
  .process__grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:5rem; align-items:start; }
  .process__sticky{ position:sticky; top:calc(var(--nav-h) + 3rem); }
}

.never{
  margin-top:clamp(3rem,8vw,6rem);
  background:var(--propolis); color:var(--cream);
  padding:clamp(1.8rem,5vw,3.5rem);
  clip-path:polygon(var(--cut-x) 0,100% 0,100% calc(100% - var(--cut-y)),calc(100% - var(--cut-x)) 100%,0 100%,0 var(--cut-y));
}
.never__h{ font-size:clamp(1.7rem,5.5vw,3rem); line-height:1; letter-spacing:-.03em; font-weight:500; margin:0 0 1.4rem; }
.never__h em{ color:var(--wax); }
.never__list{ display:grid; gap:.8rem; }
.never__list li{ display:flex; align-items:baseline; gap:.7em; font-size:1.02rem; }
.never__list .hexdot{ color:var(--wax); }
@media (min-width:760px){ .never__list{ grid-template-columns:repeat(2,1fr); gap:1rem 2.5rem; } }

/* ---------- 18. UNUTAR SAĆA ---------- */
.inside{ background:var(--ink); color:var(--on-dark); }
.inside__pin{
  position:relative; height:100svh;
  display:grid; place-items:center; overflow:hidden;
}
.inside__comb{ position:absolute; inset:0; width:100%; height:100%; }
#insideCombG polygon{ fill:none; stroke:var(--wax); stroke-width:3; }
.inside__msg{ position:relative; z-index:2; text-align:center; padding-inline:var(--gut); }
.inside__msg .refrain em{ color:var(--wax); }
.inside__sub{
  font-family:"Space Grotesk",monospace; font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(246,235,214,.55); margin-top:1.4rem;
}

/* ---------- 19. IGRAČKA ---------- */
.toy{ background:var(--bagrem); padding:clamp(4.5rem,11vw,9rem) 0; overflow:hidden; }
.toy__grid{ display:grid; gap:2.5rem; }
.toy__head .lede{ color:rgba(42,24,12,.7); }
.toy__count{ font-family:"Space Grotesk",monospace; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin:.4rem 0; }
.toy__count b{ font-size:1.3rem; }
.toy__done{ color:var(--propolis); font-weight:600; }
.comb--toy{ justify-self:center; }
.tcell{
  position:absolute; clip-path:var(--hex);
  background:rgba(42,24,12,.34);
  border:0; padding:0; cursor:pointer;
  transition:transform .5s var(--ease);
}
.tcell::after{
  content:""; position:absolute; inset:2px; clip-path:var(--hex);
  background:var(--bagrem); transition:background .5s var(--ease);
}
.tcell__in{
  position:absolute; inset:0; z-index:2;
  display:grid; place-content:center; text-align:center; padding:.3rem;
  /* podebljano i sa velikim početnim slovom po zahtevu vlasnika 2026-08-21;
     reči su do tada bile male i tanke pa se u otvorenoj ćeliji jedva čitalo */
  font-family:"Space Grotesk",monospace; font-size:.68rem; letter-spacing:.03em; line-height:1.15;
  font-weight:700; color:var(--ink);
  opacity:0; transform:scale(.72) rotate(-8deg);
  transition:opacity .45s var(--ease), transform .55s var(--ease);
}
.tcell__cap{
  position:absolute; inset:2px; z-index:1; clip-path:var(--hex);
  background:var(--wax);
  transform:translateY(101%);
  transition:transform .6s var(--ease);
}
.tcell:hover{ transform:scale(1.06); }
.tcell:focus-visible{ outline:none; transform:scale(1.12); z-index:3; }
.tcell.is-open .tcell__cap{ transform:translateY(0); }
.tcell.is-open .tcell__in{ opacity:1; transform:none; }
@media (min-width:900px){
  .toy__grid{ grid-template-columns:minmax(0,.8fr) minmax(0,1fr); align-items:center; gap:4rem; }
}

/* ---------- 20. BROJKE ---------- */
.figures{ background:var(--cream-2); padding:clamp(4.5rem,11vw,9rem) 0; }
.counts{ display:grid; grid-template-columns:repeat(2,1fr); gap:2rem 1.2rem; margin:0 0 clamp(3.5rem,9vw,6rem); }
.count{ display:grid; gap:.4rem; padding-top:1.1rem; border-top:2px solid var(--ink); }
.count__v{ font-size:clamp(3rem,11vw,6rem); line-height:.85; letter-spacing:-.04em; font-weight:500; }
.count__l{ font-family:"Space Grotesk",monospace; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); max-width:22ch; }
@media (min-width:760px){ .counts{ grid-template-columns:repeat(4,1fr); gap:2rem; } }

.rank__note{ font-family:"Space Grotesk",monospace; font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:.6em; margin-bottom:1.6rem; }
.bars{ display:grid; gap:1.1rem; }
.bar{ display:grid; grid-template-columns:1fr auto; grid-template-areas:"n s" "t t"; gap:.45rem 1rem; align-items:baseline; }
.bar__n{ grid-area:n; font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(1.2rem,3.6vw,1.7rem); letter-spacing:-.02em; }
.bar__s{ grid-area:s; font-family:"Space Grotesk",monospace; font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); }
.bar__track{ grid-area:t; height:14px; background:rgba(42,24,12,.1); display:block; position:relative; overflow:hidden; }
.bar__track i{
  position:absolute; inset:0 auto 0 0; width:var(--w);
  background:var(--tone);
  transform:scaleX(0); transform-origin:left;
}
@media (min-width:760px){
  .bar{ grid-template-columns:minmax(140px,1fr) minmax(0,3fr) auto; grid-template-areas:"n t s"; align-items:center; }
}

/* ---------- 21. PORODICA ---------- */
.family{ background:var(--forest); color:var(--on-dark); padding:clamp(4.5rem,11vw,9rem) 0; }
.family .lede{ color:rgba(246,235,214,.68); }
.folks{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem 1rem; margin-top:clamp(2.5rem,6vw,4rem); }
.folk{ display:grid; gap:.5rem; align-content:start; }
.folk .hexframe{ background:var(--tone); width:100%; max-width:264px; }
.folk__ph{ display:grid; place-items:center; }
.folk__ph .ph{ color:rgba(42,24,12,.5); }
.folk__name{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:1.15rem; font-weight:500; letter-spacing:-.01em; margin-top:.4rem; }
.folk__role{ font-family:"Space Grotesk",monospace; font-size:.72rem; letter-spacing:.06em; color:rgba(246,235,214,.62); }
@media (min-width:760px){
  .folks{ grid-template-columns:repeat(4,1fr); gap:1.4rem; }
  /* pomak radi saća — margin, NE transform: GSAP reveal piše inline transform i pregazio bi ga */
  .folk:nth-child(even){ margin-top:clamp(20px,4vw,58px); }
}

/* ---------- 22. KUPOVINA ---------- */
.buy{ padding:clamp(4.5rem,11vw,9rem) 0; }
.price{ margin:clamp(2rem,5vw,3.5rem) 0 clamp(3rem,7vw,5rem); }
.price__head{
  display:none; font-family:"Space Grotesk",monospace; font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  padding:0 1rem .7rem; border-bottom:1px solid rgba(42,24,12,.2);
}
.price__list{ display:grid; gap:.4rem; }
.prow{
  background:var(--tone); color:var(--tone-ink);
  display:grid; grid-template-columns:1fr auto; gap:.4rem .8rem;
  align-items:center; padding:1rem;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 18px),calc(100% - 12px) 100%,0 100%,0 18px);
}
.prow b{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:1.25rem; font-weight:500; letter-spacing:-.01em; }
.prow .tag{ justify-self:end; }
.prow .ph{ justify-self:start; }
/* mobilni: ime | stanje  /  gramaža | cena — da kolone ne poskakuju red po red */
@media (max-width:759px){
  .prow b{ grid-column:1; grid-row:1; }
  .prow .tag{ grid-column:2; grid-row:1; }
  .prow .ph:nth-of-type(1){ grid-column:1; grid-row:2; }
  .prow .ph:nth-of-type(2){ grid-column:2; grid-row:2; justify-self:end; }
}
[data-tone="suma"].prow .ph{ color:rgba(246,235,214,.75); }
@media (min-width:760px){
  .price__head{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:.8rem; }
  .prow{ grid-template-columns:1.6fr 1fr 1fr 1fr; gap:.8rem; padding:1.1rem 1rem; }
  .prow .tag{ justify-self:start; }
}

.buy__cols{ display:grid; gap:3rem; }
@media (min-width:900px){ .buy__cols{ grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:4.5rem; } }
.order{ background:var(--cream-2); padding:clamp(1.5rem,4.5vw,2.6rem);
  clip-path:polygon(var(--cut-x) 0,100% 0,100% calc(100% - var(--cut-y)),calc(100% - var(--cut-x)) 100%,0 100%,0 var(--cut-y)); }
.order__note{ color:var(--ink-2); font-size:.98rem; margin-bottom:1.6rem; }
.field{ display:grid; gap:.35rem; margin-bottom:1.1rem; }
.field label{ font-family:"Space Grotesk",monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.field input, .field textarea{
  background:var(--paper); border:1.5px solid rgba(42,24,12,.22);
  padding:.85em 1em; font-size:1rem; width:100%; resize:vertical;
  transition:border-color .35s var(--ease);
}
.field input:focus, .field textarea:focus{ border-color:var(--propolis); outline:none; }
.field--check{ grid-template-columns:auto 1fr; align-items:center; gap:.6rem; margin-bottom:1.6rem; }
.field--check input{ width:20px; height:20px; accent-color:var(--propolis); }
.field--check label{ text-transform:none; letter-spacing:0; font-size:.95rem; font-family:inherit; }
.order__ok{ margin:1rem 0 0; color:var(--forest); font-weight:600; }
.order__ph{ margin:1rem 0 0; }

.direct__list{ display:grid; gap:.9rem; margin-bottom:2.4rem; }
.direct__list li{ display:flex; align-items:center; gap:.7em; flex-wrap:wrap;
  padding-bottom:.9rem; border-bottom:1px solid rgba(42,24,12,.14); }
.direct__list b{ min-width:7em; }
.ship{ margin-bottom:2rem; }
.ship h4{ font-family:"Space Grotesk",monospace; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 .6rem; }
.ship p{ color:var(--ink-2); font-size:1rem; }

/* ---------- 23. POKLON ---------- */
.gift{ position:relative; background:var(--propolis); color:var(--cream); padding:clamp(4.5rem,11vw,9rem) 0; overflow:hidden; }
.gift .lede{ color:rgba(251,243,228,.8); }
.gift .h2 em{ color:var(--wax); }
.gift__grid{ position:relative; z-index:1; display:grid; gap:3rem; align-items:center; }
.gift__list{ display:grid; gap:.7rem; margin:1.8rem 0; }
.gift__list li{ display:flex; align-items:baseline; gap:.7em; }
.gift__list .hexdot{ color:var(--wax); }
.gift__buy{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.gift .chip--price{ background:var(--cream); color:var(--ink); }
.gift .chip--price .ph{ color:var(--ink-3); }
/* tri tegle složene kao tri ćelije saća — dodiruju se, ne preklapaju */
.gift__vis{ --jw:min(38vw,180px); position:relative; display:grid; place-items:center;
  min-height:calc(var(--jw) * 2.15); }
.jar{
  position:absolute; width:var(--jw); aspect-ratio:.866;
  clip-path:var(--hex); display:grid; place-items:center;
  filter:drop-shadow(0 14px 30px rgba(42,24,12,.3));
}
.jar span{ font-size:clamp(.9rem,2.6vw,1.2rem); letter-spacing:-.01em; }
.jar--1{ background:var(--bagrem); color:var(--ink); transform:translate(-50%,-37.5%); }
.jar--2{ background:var(--livada); color:var(--ink); transform:translate(0,37.5%); }
.jar--3{ background:var(--vresak); color:var(--ink); transform:translate(50%,-37.5%); }
@media (min-width:900px){ .gift__grid{ grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:4rem; } }

/* ---------- 24. LISTA ČEKANJA ---------- */
.wait{ background:var(--vresak); color:var(--ink); padding:clamp(3.5rem,9vw,6rem) 0; }
.wait__in{ display:grid; gap:2rem; align-items:center; }
.wait h2 em{ color:var(--propolis); }
.wait p{ max-width:44ch; }
.wait__form{ display:grid; gap:.8rem; }
.wait__form input{
  background:var(--paper); border:1.5px solid rgba(42,24,12,.28);
  padding:.95em 1.1em; font-size:1rem; width:100%;
}
.wait__form input:focus{ border-color:var(--propolis); outline:none; }
@media (min-width:860px){
  .wait__in{ grid-template-columns:minmax(0,1fr) minmax(0,.7fr); gap:4rem; }
  .wait__form{ grid-template-columns:1fr auto; align-items:start; }
  .wait__form .order__ok, .wait__form .order__ph{ grid-column:1 / -1; }
}

/* ---------- 25. PITANJA ---------- */
.faq{ position:relative; background:var(--cream-2); padding:clamp(4.5rem,11vw,9rem) 0; overflow:hidden; }
.faq__grid{ position:relative; z-index:1; display:grid; gap:2.5rem; }
@media (min-width:900px){ .faq__grid{ grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:4rem; align-items:start; } }
.acc__i{ border-top:1px solid rgba(42,24,12,.18); }
.acc__i:last-child{ border-bottom:1px solid rgba(42,24,12,.18); }
/* Naslov pitanja je h2 (vidi faqFor u build.js). Selektor ide po klasi da
   promena nivoa ne bi opet ostavila viseće pravilo; veličinu slova ionako
   zadaje .acc__b u rem, pa nivo ništa ne pomera. */
.acc__i .acc__q{ margin:0; font-size:inherit; }
.acc__b{
  width:100%; display:flex; align-items:center; gap:.9rem;
  background:none; border:0; padding:1.3rem 0; cursor:pointer; text-align:left;
  font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(1.05rem,3.2vw,1.35rem); font-weight:500; letter-spacing:-.01em; line-height:1.25;
}
.acc__b > span{ flex:1; }
.acc__b .hexdot{ color:var(--propolis); transition:transform .5s var(--ease); }
.acc__x{ position:relative; width:14px; height:14px; flex:none; }
.acc__x::before, .acc__x::after{
  content:""; position:absolute; inset:50% 0 auto; height:1.5px; background:var(--ink);
  transition:transform .5s var(--ease);
}
.acc__x::after{ transform:rotate(90deg); }
.acc__b[aria-expanded="true"] .acc__x::after{ transform:rotate(0deg); }
.acc__b[aria-expanded="true"] .hexdot{ transform:rotate(90deg); }
.acc__p{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur) var(--ease); }
.acc__p > div{ overflow:hidden; }
.acc__i.is-open .acc__p{ grid-template-rows:1fr; }
.acc__p p{ color:var(--ink-2); max-width:56ch; padding-bottom:1.4rem; margin:0; }

/* ---------- 26. INSTAGRAM ---------- */
.social{ padding:clamp(4.5rem,11vw,8rem) 0 clamp(3rem,7vw,5rem); }
.social__head{ margin-bottom:clamp(2.5rem,6vw,4rem); }
.ig{
  display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem;
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--gut) 12%;
}
.ig > li:nth-child(even){ transform:translateY(30%); }
.ig > li:nth-child(n+3){ margin-top:-12%; }
.ig__cta a{
  display:grid; place-content:center; gap:.5rem; justify-items:center;
  aspect-ratio:.866; clip-path:var(--hex); background:var(--wax);
  font-family:"Space Grotesk",monospace; font-size:.75rem; letter-spacing:.08em;
  transition:background .5s var(--ease);
}
.ig__cta a:hover{ background:var(--propolis); color:var(--cream); }
@media (min-width:760px){
  .ig{ grid-template-columns:repeat(8,1fr); gap:.7rem; padding-bottom:6%; }
  .ig > li{ transform:none !important; margin-top:0 !important; }
  .ig > li:nth-child(1){ grid-column:1 / span 2; }
  .ig > li:nth-child(2){ grid-column:3 / span 2; }
  .ig > li:nth-child(3){ grid-column:5 / span 2; }
  .ig > li:nth-child(4){ grid-column:7 / span 2; }
  .ig > li:nth-child(5){ grid-column:2 / span 2; grid-row:2; }
  .ig > li:nth-child(6){ grid-column:4 / span 2; grid-row:2; }
  .ig > li:nth-child(7){ grid-column:6 / span 2; grid-row:2; }
  .ig > li:nth-child(8){ grid-column:4 / span 2; grid-row:3; }
  .ig > li:nth-child(n+5){ margin-top:-13% !important; }
  .ig > li:nth-child(8){ margin-top:-13% !important; }
}

/* ---------- 27. FOOTER ---------- */
.foot{ background:var(--ink); color:var(--on-dark); padding:clamp(3.5rem,9vw,6rem) 0 8rem; }
.foot__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2rem 1.5rem; margin:clamp(2.5rem,6vw,4rem) 0; }
.foot__col b{ display:block; font-family:"Space Grotesk",monospace; font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(246,235,214,.5); margin-bottom:.8rem; }
.foot__col p{ margin:0; font-size:.98rem; line-height:1.9; }
.foot__col nav{ display:grid; gap:.35rem; }
.foot__col nav a{ font-size:.98rem;
  background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat;
  background-position:0 100%; background-size:0% 1.5px; transition:background-size var(--dur) var(--ease); }
.foot__col nav a:hover{ background-size:100% 1.5px; }
.foot .ph{ color:rgba(246,235,214,.55); }
.foot__base{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  padding-top:1.6rem; border-top:1px solid rgba(246,235,214,.18);
  font-family:"Space Grotesk",monospace; font-size:.72rem; letter-spacing:.06em; margin:0;
}
@media (min-width:760px){
  .foot__grid{ grid-template-columns:repeat(4,1fr); gap:2rem; }
  /* Spisak ima 16 stavki i u jednoj koloni je bio 498 px visok, dok su
     kontakt i „kako radimo" stali u 120 odnosno 153 px. Ta razlika je pravila
     tri cetvrtine praznog tamnog podnozja. U dve kolone spisak pada na osam
     redova i cetiri kolone se drze zajedno. `minmax(0,1fr)` je tu da duze ime
     („Privatnost") ne razvuce svoju kolonu preko polovine. */
  .foot__col nav{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:1.25rem; }
}
@media (min-width:900px){ .foot{ padding-bottom:clamp(5rem,9vw,8rem); } }

/* ---------- 28. STICKY BUY BAR ---------- */
.buybar{
  position:fixed; left:0; right:0; bottom:0; z-index:950;
  display:flex; align-items:center; gap:.7rem;
  padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(251,243,228,.95);
  backdrop-filter:blur(12px);
  border-top:1px solid rgba(42,24,12,.16);
  transform:translateY(calc(100% + 4rem));
  transition:transform .6s var(--ease);
}
.buybar.is-on{ transform:none; }
.buybar__dot{ width:14px; height:16px; flex:none; clip-path:var(--hex); background:var(--bagrem);
  transition:background .5s var(--ease); }
.buybar__name{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:1.02rem; font-weight:500; letter-spacing:-.01em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.buybar__price{ margin-left:auto; }
.buybar .btn{ flex:none; }
@media (min-width:900px){
  .buybar{ left:auto; right:var(--gut); bottom:1.4rem; border:1px solid rgba(42,24,12,.16);
    padding:.7rem .7rem .7rem 1.2rem; gap:1.1rem;
    clip-path:polygon(14px 0,100% 0,100% calc(100% - 20px),calc(100% - 14px) 100%,0 100%,0 20px); }
  .buybar__price{ margin-left:0; }
}

/* ---------- 29. REVEAL (početno stanje) ---------- */
.reveal, .step, .count, .folk, .prow, .acc__i, .mos__c, .site, .bar{ will-change:transform,opacity; }

/* ============================================================
   30. PREFERS-REDUCED-MOTION — pravi statični fallback
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .loader{ display:none !important; }
  .cursor{ display:none !important; }
  .ticker__track{ transform:none !important; width:auto; }
  .ticker__grp{ flex-wrap:wrap; justify-content:center; padding-right:0; }
  .ticker__row{ padding:1rem var(--gut); }
  .hexframe img{ transform:none; }
  .hcard{ position:static; }
  .inside__pin{ height:auto; padding:clamp(4rem,10vw,8rem) 0; }
  .inside__comb{ opacity:.5; }
  .bar__track i{ transform:scaleX(1); }
  .tcell__cap{ transform:translateY(0); }
  .tcell__in{ opacity:1; transform:none; }
  .folk:nth-child(even){ transform:none; }
  .drip{ height:90px; }
  .scrollcue svg{ animation:none; }
}
html.no-motion .loader{ display:none !important; }
html.no-motion .cursor{ display:none !important; }
html.no-motion .hcard{ position:static; }
html.no-motion .bar__track i{ transform:scaleX(1); }
html.no-motion .tcell__cap{ transform:translateY(0); }
html.no-motion .tcell__in{ opacity:1; transform:none; }
html.no-motion .inside__pin{ height:auto; padding:clamp(4rem,10vw,8rem) 0; }
html.no-motion .ticker__track{ transform:none !important; width:auto; }
html.no-motion .ticker__grp{ flex-wrap:wrap; justify-content:center; padding-right:0; }

/* ===== css/pages.css ===== */
/* ============================================================
   RADONJIĆ MED — stilovi po stranama
   Deli sistem iz style.css. Sve je zaključano klasom sekcije
   ili klasom na <body> (p-home, p-planina, …), pa se ne preliva.
   ============================================================ */

/* ---------- brojevi: tabularne cifre svuda gde stoji cena ---------- */
.num, .fcard__p, .mprice__list span, .calc__out b, .builder__sum b,
.hslab__meta li, .scrub__big output, .cost__c b, .count__v, .rung__alt{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}
.eur{
  display:block; margin-top:.15em;
  font-family:"Space Grotesk",monospace; font-size:.68em; letter-spacing:.04em;
  opacity:.62; font-variant-numeric:tabular-nums;
}

/* ---------- zavesa između strana ---------- */
.wipe{
  position:fixed; inset:0; z-index:1200; pointer-events:none;
  background:var(--ink);
  clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);
  transition:clip-path .62s var(--ease);
}
.wipe.is-in{ clip-path:polygon(0 0,100% 0,100% 100%,0 100%); }
html.no-motion .wipe{ display:none; }

/* ---------- nav na TAMNOM heroju ----------
   Dok nav nije zalepljen, tekst je mastilo na mastilu = nevidljiv.
   Strane sa tamnim herojem dobijaju .nav-light na <body>. */
body.nav-light .nav:not(.is-stuck) .nav__word{ color:var(--on-dark); }
body.nav-light .nav:not(.is-stuck) .nav__links a{ color:var(--on-dark); }
body.nav-light .nav:not(.is-stuck) .nav__links a.is-active{ color:var(--wax); }
body.nav-light .nav:not(.is-stuck) .monogram__cell{ stroke:var(--on-dark); }
body.nav-light .nav:not(.is-stuck) .monogram__r{ fill:var(--on-dark); }
body.nav-light .nav:not(.is-stuck) .burger i{ background:var(--on-dark); }
body.nav-light .nav:not(.is-stuck) .nav__cta{ --btn-bg:var(--wax); --btn-fg:var(--ink); --btn-fill:var(--cream); }
.nav__word, .nav__links a, .monogram__cell, .monogram__r, .burger i{
  transition:color .45s var(--ease), stroke .45s var(--ease), fill .45s var(--ease), background .45s var(--ease);
}

/* ---------- logotip ----------
   U zaglavlju i podnožju ide SAMO znak (u punoj verziji je natpis
   tamnosmeđ pa bi na tamnom podnožju nestao). Puna verzija je na
   prelooaderu, koji je na kremu. */
.nav__mark{ width:auto; height:38px; flex:none; }
/* LANDMINE: `align-content` se NE sme izostaviti na ovoj koloni. Sve cetiri
   kolone podnozja rastu do visine najvise (spisak strana, 498 px), a grid sa
   podrazumevanim `align-content:normal` razvuce svoje `auto` redove da popune
   tu visinu. Znak, ime i kraj su tako stajali razmaknuti po 200 px jedno od
   drugog, dok su ostale tri kolone (obicni blokovi) ostajale skupljene na
   vrhu. Mereno u pregledacu: img top 0, <b> top 199, <p> top 368. */
.foot__col--brand{ display:grid; gap:.4rem; justify-items:start; align-content:start; }
.foot__mark{ width:auto; height:56px; margin-bottom:.3rem; }
.loader__logo{ width:min(60vw, 340px); height:auto; }
@media (min-width:900px){ .nav__mark{ height:46px; } }

/* ---------- prebacivač jezika: segmentna kontrola ---------- */
.lang{
  display:flex; align-items:stretch; flex:none; isolation:isolate;
  border:1px solid rgba(42,24,12,.22);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 10px),calc(100% - 7px) 100%,0 100%,0 10px);
  transition:border-color .4s var(--ease);
}
.lang__i{
  display:grid; place-items:center; min-width:2.5em; padding:.42em .5em;
  font-family:"Space Grotesk",monospace; font-size:.68rem; font-weight:600;
  letter-spacing:.1em; color:var(--ink-3);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.lang__i + .lang__i{ border-left:1px solid rgba(42,24,12,.16); }
.lang__i:hover{ background:rgba(42,24,12,.08); color:var(--ink); }
.lang__i.is-on{ background:var(--ink); color:var(--cream); }
.lang__i.is-on:hover{ background:var(--ink); }
body.nav-light .nav:not(.is-stuck) .lang{ border-color:rgba(246,235,214,.32); }
body.nav-light .nav:not(.is-stuck) .lang__i{ color:rgba(246,235,214,.6); }
body.nav-light .nav:not(.is-stuck) .lang__i + .lang__i{ border-left-color:rgba(246,235,214,.22); }
body.nav-light .nav:not(.is-stuck) .lang__i:hover{ background:rgba(246,235,214,.12); color:var(--on-dark); }
body.nav-light .nav:not(.is-stuck) .lang__i.is-on{ background:var(--wax); color:var(--ink); }

/* u mobilnom meniju: pun red sa nazivima jezika */
.navpanel__langs{ display:flex; gap:.5rem; flex-wrap:wrap; }
.navpanel__langs a{
  font-family:"Space Grotesk",monospace; font-size:.75rem; letter-spacing:.08em;
  padding:.6em 1em; border:1px solid rgba(42,24,12,.22); color:var(--ink-2);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 10px),calc(100% - 7px) 100%,0 100%,0 10px);
}
.navpanel__langs a.is-on{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
@media (max-width:899px){ .lang{ margin-left:auto; margin-right:.5rem; } }
/* Na telefonu je prebacivač bio 134×46 px u zaglavlju od 390×68 — trećina
   širine i viši od korpe i hamburgera, pa je vukao pogled na sebe iako je
   sporedan. Pun izbor jezika sa nazivima ionako stoji u mobilnom meniju
   (.navpanel__langs), ovde je samo prečica.
   Meta ostaje iznad WCAG 2.5.8 AA minimuma (24×24 px), a slova na 11.2 px
   ne padaju ispod praga čitljivosti koji sajt drži za mono natpise. */
@media (max-width:760px){
  .lang{ margin-right:.35rem;
    clip-path:polygon(5px 0,100% 0,100% calc(100% - 7px),calc(100% - 5px) 100%,0 100%,0 7px); }
  .lang__i{ min-width:2.15em; min-height:32px; padding:.3em .4em;
    font-size:.7rem; letter-spacing:.06em; }
}
/* Ispod 360 px se sužava samo razmak između slova. min-width se NE dira:
   box-sizing je border-box, pa bi 1.95em spustilo metu na 22 px, ispod
   WCAG minimuma od 24 px. */
@media (max-width:360px){ .lang__i{ letter-spacing:.02em; padding-inline:.3em; } }

/* ---------- pregled slike u meniju ---------- */
.navprev{
  position:absolute; top:calc(100% + 6px); left:50%; translate:-50% 0;
  width:150px; pointer-events:none;
  opacity:0; scale:.82;
  transition:opacity .4s var(--ease), scale .5s var(--ease), translate .5s var(--ease);
}
.navprev.is-on{ opacity:1; scale:1; }
.nav__links a.is-active{ background-size:100% 1.5px; color:var(--propolis); }
.navpanel__nav a.is-active{ color:var(--propolis); font-style:italic; }
@media (max-width:899px){ .navprev{ display:none; } }

/* ---------- mobilni meni: sopstveni raspored ---------- */
.navpanel__nav a{
  display:flex; align-items:baseline; gap:1rem;
  font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(2rem,10vw,3.2rem); line-height:1.1; letter-spacing:-.03em; font-weight:500;
  padding:.12em 0; border-bottom:1px solid rgba(42,24,12,.1);
}
/* Redni brojevi u mobilnom meniju su brojač, ne otkucani tekst: stavka
   „Beleške” postoji samo na srpskom, a ukucani brojevi bi na ruskom i
   engleskom preskočili jedan broj. */
.navpanel__nav{ counter-reset: navi; }
.navpanel__nav a{ counter-increment: navi; }
.navpanel__n{
  font-family:"Space Grotesk",monospace; font-size:.7rem; letter-spacing:.14em;
  color:var(--ink-3); flex:none;
}
.navpanel__n::before{ content:counter(navi,decimal-leading-zero); }
.navpanel__foot{ display:grid; gap:1rem; justify-items:start; }
.navpanel__foot p{ margin:0; font-family:"Space Grotesk",monospace; font-size:.9rem; }

/* ---------- unakrsni linkovi na dnu svake strane ---------- */
.next{
  display:grid; gap:2px;
  background:rgba(42,24,12,.14);
  border-top:1px solid rgba(42,24,12,.14);
}
.next__a{
  display:grid; gap:.35rem; align-content:center;
  background:var(--cream); padding:clamp(2rem,6vw,4rem) var(--gut);
  min-height:clamp(190px,26vw,280px);
  transition:background .5s var(--ease), padding-left .5s var(--ease);
}
.next__a:hover{ background:var(--tone); padding-left:calc(var(--gut) + 1rem); }
.next__k{
  font-family:"Space Grotesk",monospace; font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.next__t{
  font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(1.8rem,5vw,2.8rem); line-height:1; letter-spacing:-.03em; font-weight:500;
}
.next__d{ color:var(--ink-2); max-width:34ch; }
[data-tone="suma"].next__a:hover, [data-tone="propolis"].next__a:hover{ color:var(--on-dark); }
[data-tone="suma"].next__a:hover .next__k, [data-tone="propolis"].next__a:hover .next__k,
[data-tone="suma"].next__a:hover .next__d, [data-tone="propolis"].next__a:hover .next__d{ color:rgba(246,235,214,.72); }
@media (min-width:800px){ .next{ grid-template-columns:1fr 1fr; } }

/* ---------- podnožje: blok poverenja ---------- */
.foot__trust{ display:grid; gap:.45rem; }
.foot__trust li{ display:flex; align-items:baseline; gap:.6em; font-size:.95rem; }
.foot__trust .hexdot{ color:var(--wax); }
.foot__a{ background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat;
  background-position:0 100%; background-size:0 1.5px; transition:background-size var(--dur) var(--ease); }
.foot__a:hover{ background-size:100% 1.5px; }
.foot__note{ color:rgba(246,235,214,.5); }

/* ============================================================
   HOME — planinska lestvica
   ============================================================ */
.mtn{ position:relative; background:var(--ink); color:var(--on-dark); overflow:hidden;
  padding:clamp(2.5rem,6vw,4rem) 0 0; }
.mtn .lede{ color:rgba(246,235,214,.7); }
/* .mtn__head nosi klasu .wrap (margin-inline:auto). max-width na NJEMU bi
   centrirao ceo blok i razišao ga sa trakom ispod — ograničavamo tekst unutra. */
.mtn__head{ position:relative; z-index:2; margin-bottom:clamp(.5rem,1.5vw,1rem); }
.mtn__head .h2{ margin-bottom:.3em; max-width:20ch; }
.mtn__head .lede{ max-width:44ch; }
.mtn .h2 em{ color:var(--wax); }   /* propolis na mastilu je nečitak */
.mtn__head .btn{ margin-top:1.1rem; }
/* silueta se malo podigne u tekst umesto da gura sekciju naniže */
.ridge{ margin-top:clamp(-6rem,-7vw,-2rem); }
.mtn__sites{ margin-top:0; }

/* --- silueta planine --- */
.ridge{ margin:0; line-height:0; position:relative; z-index:1; }
.ridge__svg{ display:block; width:100%; height:auto; }
/* pune boje, ne alfa — kroz providne se video heks raster ispod i masa je izgledala isprano */
.ridge__far{ fill:color-mix(in srgb, var(--on-dark) 7%, var(--ink)); }
.ridge__near{ fill:color-mix(in srgb, var(--on-dark) 15%, var(--ink)); }
.ridge__line{
  fill:none; stroke:var(--wax); stroke-width:2.5;
  stroke-linejoin:round; stroke-linecap:round;
}
.ridge__peak path{ fill:var(--wax); }
.ridge__peak text{ font-family:"Space Grotesk",monospace; font-size:13px; letter-spacing:.1em;
  text-anchor:middle; fill:var(--wax); }
.ridge__vil path{ fill:rgba(246,235,214,.45); }

.rmark{ transform-box:fill-box; transform-origin:center; transition:transform .55s var(--ease); }
.rmark__hex{ fill:var(--tone); stroke:var(--ink); stroke-width:2.5; }
.rmark__alt{ font-family:"Space Grotesk",monospace;
  font-size:15px; font-weight:600; text-anchor:middle; fill:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
[data-tone="suma"] .rmark__alt{ fill:var(--on-dark); }

/* --- imena pčelinjaka ispod siluete --- */
/* Traka je u ISTOM kontejneru kao i ostatak strane (.wrap):
   leva ivica prve kartice = leva ivica sadržaja, desna poslednje = desna.
   Podloga NIJE na kontejneru — .wrap ima padding, pa se boja videla
   kao tamna traka levo i desno od kartica.
   Kartice se razdvajaju razmakom i bojom sorte, bez linija koje se obrue. */
.mtn__sites{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1.4rem clamp(1rem,2.6vw,2.2rem);
  background:none; margin-top:0; border-top:0;
}
.mtn__sites li{
  background:none; padding:.9rem 0 0;
  display:grid; gap:.15rem; align-content:start;
  border-top:3px solid var(--tone);
}
.mtn__sites b{ font-family:"Space Grotesk",monospace; font-size:.72rem; letter-spacing:.1em;
  color:var(--tone); font-variant-numeric:tabular-nums; }
.mtn__sites span{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:1.15rem; font-weight:500; letter-spacing:-.01em; }
.mtn__sites i{ font-style:normal; font-size:.85rem; color:rgba(246,235,214,.55); }
/* Stanica je TAČNO tri. Sa repeat(4,1fr) tri kartice zauzmu tri četvrtine
   reda, a poslednja četvrtina ostane prazna — traka izgleda kao da je
   odsečena sa desne strane. */
@media (min-width:820px){ .mtn__sites{ grid-template-columns:repeat(3,1fr); } }
.mtn{ padding-bottom:clamp(2.2rem,5vw,3.2rem); }
@media (max-width:760px){
  .rmark{ transform:scale(2.1); }
  .ridge__peak text{ font-size:30px; }
  .ridge__line{ stroke-width:5; }
}

/* ---------- home: pet kartica ---------- */
.five{ padding:clamp(4rem,10vw,8rem) 0; }
.five__head{ margin-bottom:clamp(2rem,5vw,3.5rem); }
.five__grid{ display:grid; gap:.6rem; padding-inline:var(--gut); max-width:var(--maxw); margin-inline:auto;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); }
.fcard a{
  display:grid; gap:.3rem; align-content:start;
  background:var(--tone); color:var(--tone-ink);
  padding:1.4rem 1.2rem 1.2rem; min-height:clamp(200px,26vw,260px);
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 24px),calc(100% - 16px) 100%,0 100%,0 24px);
  transition:transform .5s var(--ease);
}
.fcard a:hover{ transform:translateY(-6px); }
/* opacity je bila .6 i .68, sto je na plocicama sorti davalo odnos kontrasta
   od 2,90 do 4,08 pri velicini slova od oko 9 pt, ispod WCAG AA praga 4,5.
   Najgora je propolis plocica (#b23a1b sa kremastim tekstom), kojoj treba
   najmanje .88; .9 prolazi na sve cetiri boje. Podnaslovi ostaju sporedni
   po velicini i razmaku slova, ne po providnosti. */
.fcard__n{ font-family:"Space Grotesk",monospace; font-size:.72rem; letter-spacing:.12em; opacity:.9; }
.fcard h3{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(1.6rem,4vw,2.1rem); line-height:1; letter-spacing:-.03em; font-weight:500; margin:.2rem 0 0; }
.fcard__m{ font-family:"Space Grotesk",monospace; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; opacity:.9; }
.fcard__p{ margin-top:auto; font-family:"DjFix","Fraunces",serif; font-size:1.2rem; font-weight:600; }
.fcard .tag{ justify-self:start; }

/* ---------- home: živa sezona ---------- */
.nowbar{ background:var(--cream-2); padding:clamp(1.6rem,4vw,2.4rem) 0; }
.nowbar__in{ display:grid; gap:1rem; align-items:center; }
.nowbar__t .eyebrow{ margin-bottom:.7rem; }
.nowbar .sezona{ margin:0; }
@media (min-width:820px){ .nowbar__in{ grid-template-columns:minmax(0,1fr) auto; gap:2.5rem; } }

/* ---------- home: kako se radi, kratko ---------- */
.howto{ padding:clamp(4rem,10vw,7rem) 0; }
.howto__grid{ display:grid; gap:2.5rem; }
.howto__t .link{ margin-top:1.2rem; }
.howto__l{ display:grid; gap:1.4rem; counter-reset:h; }
.howto__l li{ display:grid; grid-template-columns:auto 1fr; gap:.2rem 1.1rem;
  padding-top:1.1rem; border-top:1px solid rgba(42,24,12,.16); }
.howto__l span{ grid-row:span 2; font-family:"Space Grotesk",monospace; font-size:.8rem;
  color:var(--propolis); padding-top:.2rem; }
.howto__l b{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:1.2rem; font-weight:500; letter-spacing:-.01em; }
.howto__l p{ margin:.2rem 0 0; color:var(--ink-2); max-width:44ch; }
@media (min-width:900px){ .howto__grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:4rem; } }

/* ---------- home: poklon, kratko ---------- */
.gteaser{ background:var(--forest); color:var(--on-dark); padding:clamp(2.8rem,6vw,4.2rem) 0; }
.gteaser .lede{ color:rgba(246,235,214,.74); max-width:40ch; }
.gteaser .h2{ margin-bottom:.35em; }
.gteaser .h2 em{ color:var(--wax); }
.gteaser__in{ display:grid; gap:2.5rem; align-items:center; justify-items:center; }
.gteaser__t{ justify-self:start; }
.gteaser__t .btn{ margin-top:1.3rem; }
.gteaser .triad{ --jw:min(30vw,132px); }
/* .62 je davalo 3,33 na livadskoj boji, ispod praga 4,5 (isti razlog kao kod
   .fcard__n gore). .9 prolazi na svim tonovima, ukljucujuci propolis. */
.gteaser .triad__j i{ opacity:.9; }
@media (min-width:860px){ .gteaser__in{ grid-template-columns:minmax(0,1fr) auto; gap:clamp(2.5rem,5vw,4rem); } }

/* ============================================================
   PLANINA
   ============================================================ */
.phero{ position:relative; background:var(--ink); color:var(--on-dark); overflow:hidden;
  padding:calc(var(--nav-h) + 3rem) 0 0; }
.phero__h1{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  /* .95 zbog kvačice na Č/Š, ista granica kao na .hero__h1 (vidi style.css).
     Naslov ove strane i jeste „…do Čemernika". */
  font-size:clamp(2.8rem,9.5vw,7rem); line-height:.95; letter-spacing:-.035em; font-weight:500;
  margin:.2em 0 .35em; }
.phero__h1 em{ font-style:italic; color:var(--wax); }
.phero__lede{ color:rgba(246,235,214,.72); margin-bottom:clamp(1.5rem,4vw,2.5rem); }
/* hero mora da "stoji" na sopstvenoj silueti, ne da se preseče na ivici sekcije */
/* LANDMINE: donji padding je bio 0, a .mtn__sites je poslednje dete .phero.
   Poslednji red teksta („Prvi bagrem · kraj aprila") je time sedeo tačno na
   ivici tamne sekcije: krem sekcija ispod je sekla repove slova j, g, p i
   cela traka je izgledala odsečeno. */
.phero{ display:flex; flex-direction:column; justify-content:space-between; min-height:100svh;
  padding-bottom:clamp(1.8rem,4.5vw,3rem); }
.phero > .wrap{ padding-top:clamp(1rem,4vw,3rem); }
/* NIKAKAV max-height na .ridge__svg: sa width:100% i preserveAspectRatio="meet"
   visina se ograniči, sadržaj se skalira "po manjoj strani" i planina se nacrta
   uža od sekcije — izgleda kao ploča sa prazninom levo i desno.
   Veličinu regulišemo ŠIRINOM viewBox-a u markupu. */

.where{ padding:clamp(4rem,10vw,8rem) 0; }
.map{ margin:clamp(2rem,5vw,3.5rem) 0 0; }
.map__svg{ width:100%; height:auto; color:var(--ink); }
.map__cont path{ fill:none; stroke:var(--ink); stroke-width:1; opacity:.22; }
.map__wood{ opacity:.5; color:var(--forest); }
.map__peak path{ fill:var(--ink); }
.map__peak text{ font-family:"Space Grotesk",monospace; font-size:12px; fill:var(--ink); text-anchor:middle; letter-spacing:.06em; }
.map__road{ fill:none; stroke:var(--ink); stroke-width:3; opacity:.5; }
.map__track{ fill:none; stroke:var(--ink); stroke-width:2; stroke-dasharray:6 6; opacity:.4; }
.map__lab{ font-family:"Space Grotesk",monospace; font-size:11px; fill:var(--ink-3); letter-spacing:.1em; text-transform:uppercase; }
.map__lab--wood{ text-anchor:middle; fill:var(--forest); }
.map__vil path{ fill:var(--ink); }
.map__vil text{ font-family:"DjFix","Fraunces",serif; font-size:15px; fill:var(--ink); text-anchor:middle; }
.map__site path{ fill:var(--tone); stroke:var(--ink); stroke-width:1.5; }
.map__alt{ font-family:"Space Grotesk",monospace; font-size:10px; fill:var(--ink); text-anchor:middle; font-weight:600; }
[data-tone="suma"] .map__alt{ fill:var(--on-dark); }
.map__nm{ font-family:"DjFix","Fraunces",serif; font-size:13px; fill:var(--ink); text-anchor:middle; }
.map__dist path{ fill:none; stroke:var(--propolis); stroke-width:1.2; stroke-dasharray:3 5; }
.map__dist text{ font-family:"Space Grotesk",monospace; font-size:10.5px; fill:var(--propolis); letter-spacing:.06em; text-anchor:middle; }
.map__scale path{ stroke:var(--ink); stroke-width:1.4; fill:none; }
.map__scale text{ font-family:"Space Grotesk",monospace; font-size:10px; fill:var(--ink-3); text-anchor:middle; }
.map figcaption{ font-family:"Space Grotesk",monospace; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-top:1rem; }

/* ---------- skruber ---------- */
.scrubsec{ background:var(--cream-2); padding:clamp(4rem,10vw,8rem) 0; transition:background .8s var(--ease); }
.scrubsec[data-tone]{ background:color-mix(in srgb, var(--tone) 22%, var(--cream-2)); }
.scrub{ display:grid; gap:2.5rem; margin-top:clamp(2rem,5vw,3rem); }
.scrub__col{ display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:stretch; }
.scrub__range{ -webkit-appearance:none; appearance:none; width:100%; height:56px; background:transparent; cursor:grab; }
.scrub__range:active{ cursor:grabbing; }
.scrub__range::-webkit-slider-runnable-track{ height:8px; background:rgba(42,24,12,.16); border-radius:0; }
.scrub__range::-moz-range-track{ height:8px; background:rgba(42,24,12,.16); }
.scrub__range::-webkit-slider-thumb{
  -webkit-appearance:none; width:34px; height:39px; margin-top:-16px;
  background:var(--tone,var(--propolis)); clip-path:var(--hex); border:0;
}
.scrub__range::-moz-range-thumb{ width:34px; height:39px; background:var(--tone,var(--propolis)); clip-path:var(--hex); border:0; }
.scrub__range:focus-visible{ outline:3px solid var(--propolis); outline-offset:6px; }
.scrub__axis{ display:none; }
.scrub__panel{ background:var(--paper); padding:clamp(1.4rem,4vw,2.4rem);
  clip-path:polygon(var(--cut-x) 0,100% 0,100% calc(100% - var(--cut-y)),calc(100% - var(--cut-x)) 100%,0 100%,0 var(--cut-y)); }
.scrub__big{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(3rem,11vw,5.5rem); line-height:.9; letter-spacing:-.04em; font-weight:500; margin:0; }
.scrub__big span{ font-size:.3em; margin-left:.2em; color:var(--ink-3); }
.scrub__site{ font-family:"DjFix","Fraunces",serif; font-style:italic; font-size:1.35rem; color:var(--propolis); margin:.2rem 0 1.4rem; }
.scrub__dl{ display:grid; gap:.9rem; margin:0 0 1.6rem; padding-top:1.2rem; border-top:1px solid rgba(42,24,12,.15); }
.scrub__dl > div{ display:grid; grid-template-columns:7.5rem 1fr; gap:1rem; align-items:baseline; }
.scrub__dl dt{ font-family:"Space Grotesk",monospace; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); }
.scrub__dl dd{ margin:0; font-size:1.05rem; }
.scrub__plants{ display:flex; flex-wrap:wrap; gap:.6rem; }
.scrub__plants li{ display:flex; align-items:center; gap:.5em; padding:.45em .8em;
  background:rgba(42,24,12,.07); font-family:"Space Grotesk",monospace; font-size:.75rem;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 12px),calc(100% - 8px) 100%,0 100%,0 12px); }
.mark{ width:22px; height:22px; flex:none; }
@media (min-width:860px){
  .scrub{ grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:3.5rem; align-items:start; }
  .scrub__col{ grid-template-columns:auto 1fr; }
  .scrub__range{ writing-mode:vertical-lr; direction:rtl; width:56px; height:min(58vh,460px); }
  .scrub__axis{ display:flex; flex-direction:column; justify-content:space-between;
    font-family:"Space Grotesk",monospace; font-size:.7rem; color:var(--ink-3); padding:.4rem 0; }
}

.why{ background:var(--forest); color:var(--on-dark); padding:clamp(4rem,10vw,8rem) 0; }
.why .lede{ color:rgba(246,235,214,.72); }
.why__grid{ display:grid; gap:3rem; }
.why__list{ display:grid; gap:1.4rem; }
.why__list li{ display:grid; gap:.25rem; padding-top:1.1rem; border-top:1px solid rgba(246,235,214,.2); }
.why__list b{ font-family:"DjFix","Fraunces",serif; font-size:1.2rem; font-weight:500; color:var(--wax); }
.why__list span{ color:rgba(246,235,214,.7); }
@media (min-width:900px){ .why__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:5rem; }
  .why__list{ grid-template-columns:1fr 1fr; gap:1.6rem 2.5rem; } }

.flora{ padding:clamp(4rem,10vw,8rem) 0; }
/* tri pojasa × tri biljke — bez usamljene devete kartice */
.flora__grid{ display:grid; gap:clamp(1rem,2.5vw,1.6rem); margin-top:clamp(2rem,5vw,3rem); }
.fband{ background:var(--cream-2); border-top:4px solid var(--tone); }
.fband__h{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:1.1rem clamp(1rem,2.5vw,1.5rem) .9rem; border-bottom:1px solid rgba(42,24,12,.12); }
.fband__h b{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:1.25rem; font-weight:500; letter-spacing:-.01em; }
.fband__h span{ font-family:"Space Grotesk",monospace; font-size:.7rem; letter-spacing:.1em;
  color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.fband__l{ display:grid; }
.fband__l li{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem;
  padding:.9rem clamp(1rem,2.5vw,1.5rem); border-bottom:1px solid rgba(42,24,12,.08);
  transition:background .4s var(--ease); }
.fband__l li:last-child{ border-bottom:0; }
.fband__l li:hover{ background:rgba(42,24,12,.05); }
.fband__l .mark{ width:34px; height:34px; color:var(--tone); }
[data-tone="bagrem"] .fband__l .mark, [data-tone="lipa"] .fband__l .mark{ color:var(--ink-2); }
.fband__l b{ font-family:"DjFix","Fraunces",serif; font-size:1.05rem; font-weight:500; }
.fband__l span{ font-family:"Space Grotesk",monospace; font-size:.68rem; letter-spacing:.06em;
  color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (min-width:820px){ .flora__grid{ grid-template-columns:repeat(3,1fr); } }

.work{ background:var(--cream-2); padding:clamp(4rem,10vw,8rem) 0; }
.work__grid{ display:grid; gap:2.5rem; }
.work__fig .hexframe{ width:min(72vw,340px); }
.work__txt p{ color:var(--ink-2); max-width:52ch; }
@media (min-width:900px){ .work__grid{ grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:4rem; align-items:center; } }

.cost{ background:var(--propolis); color:var(--cream); padding:clamp(4rem,10vw,8rem) 0; }
.cost .h2 em{ color:var(--wax); }
.cost__row{ display:grid; gap:1.6rem; margin:clamp(2rem,5vw,3rem) 0; }
.cost__c{ display:grid; gap:.3rem; padding-top:1rem; border-top:2px solid rgba(251,243,228,.35); }
.cost__c b{ font-family:"DjFix","Fraunces",serif; font-size:clamp(2.4rem,7vw,3.6rem); line-height:.9;
  letter-spacing:-.04em; font-weight:500; color:var(--wax); }
.cost__c span{ font-family:"Space Grotesk",monospace; font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(251,243,228,.95); max-width:24ch; }  /* .8 = 4,01 na crvenoj */
.cost__note{ max-width:52ch; font-size:1.1rem; }
@media (min-width:760px){ .cost__row{ grid-template-columns:repeat(4,1fr); gap:2rem; } }

/* ============================================================
   MEDOVI — indeks
   ============================================================ */
.ihero{ padding:calc(var(--nav-h) + 4rem) 0 clamp(3rem,8vw,6rem); }
.ihero__h1{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(3rem,11vw,8rem); line-height:.9; letter-spacing:-.04em; font-weight:500; margin:.2em 0 .3em; }
.ihero__h1 em{ font-style:italic; color:var(--propolis); }
.ihero__lede{ max-width:46ch; }

.honeys2{ transition:background 1s var(--ease); }
.hslab{ padding:clamp(3rem,8vw,6rem) 0; border-top:1px solid rgba(42,24,12,.14); }
.hslab__in{ display:grid; gap:2rem; align-items:center; }
.hslab__n{ font-family:"Space Grotesk",monospace; font-size:.8rem; letter-spacing:.14em; color:var(--ink-3); margin:0; }
.hslab__h{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(2.6rem,9vw,5rem); line-height:.95; letter-spacing:-.035em; font-weight:500; margin:.1em 0 .3em; }
.hslab__d{ max-width:44ch; color:var(--ink-2); }
.hslab__meta{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin:1.2rem 0 1.6rem;
  font-family:"Space Grotesk",monospace; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.hslab__meta li{ display:flex; align-items:center; }
.hslab__f .hexframe{ width:min(60vw,300px); }
@media (min-width:900px){
  .hslab__in{ grid-template-columns:minmax(0,1fr) minmax(0,.5fr); gap:4rem; }
  .hslab:nth-child(even) .hslab__f{ order:-1; justify-self:start; }
  .hslab__f{ justify-self:end; }
}

/* ============================================================
   STRANA SORTE
   ============================================================ */
/* SVE ŠEST strana sorti imaju isti raspored i isti kontrast.
   Boja sorte i dalje nosi stranu, ali kao svetla zalivka — inače je šumski
   (skoro crn) obrtao ceo hero i izgledao kao druga strana. */
.mhero{ position:relative; display:grid;
  background:color-mix(in srgb, var(--tone) 58%, var(--cream));
  color:var(--ink); padding-top:var(--nav-h); overflow:hidden; }
.mhero__tess{ opacity:.05; }
.mhero__txt{ position:relative; z-index:1; padding:clamp(2rem,6vw,4.5rem) var(--gut) clamp(2.5rem,6vw,4.5rem);
  display:grid; align-content:center; gap:0; }
.mhero__idx{ display:flex; align-items:baseline; gap:.3em; margin:0 0 .8rem;
  font-family:"Space Grotesk",monospace; font-variant-numeric:tabular-nums; }
.mhero__idx b{ font-family:"DjFix","Fraunces",serif; font-size:clamp(2.4rem,6vw,3.6rem);
  line-height:1; font-weight:600; letter-spacing:-.03em; }
.mhero__idx span{ font-size:.8rem; letter-spacing:.1em; opacity:.5; }
.mhero__h1{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(2.5rem,7.2vw,4.6rem); line-height:.96; letter-spacing:-.035em; font-weight:500; margin:.1em 0 .35em; }
.mhero__h1 em{ font-style:italic; }
.mhero__lede{ max-width:40ch; font-size:1.08rem; opacity:.86; margin-bottom:1.4rem; }
.mhero__strip{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin:0 0 1.8rem;
  padding-top:1rem; border-top:1px solid currentColor;
  font-family:"Space Grotesk",monospace; font-size:.66rem; letter-spacing:.11em;
  text-transform:uppercase; opacity:.7; }

/* cenovnik odmah u heroju, poravnat kao jedna kartica */
/* prava kartica, ne duh na boji sorte */
.mbuy{ background:var(--paper); color:var(--ink); max-width:340px;
  box-shadow:0 14px 34px rgba(42,24,12,.16);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 20px),calc(100% - 14px) 100%,0 100%,0 20px); }
.mbuy__rows{ display:grid; }
.mbuy__rows li{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.85rem 1.1rem; border-bottom:1px solid rgba(42,24,12,.12); }
.mbuy__rows span{ font-family:"Space Grotesk",monospace; font-size:.76rem; letter-spacing:.08em; opacity:.7; }
.mbuy__rows b{ font-family:"DjFix","Fraunces",serif; font-size:1.25rem; font-weight:600; text-align:right;
  font-variant-numeric:tabular-nums; }
.mbuy__rows .eur{ font-size:.6em; }
.mbuy__foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.1rem; }

.mhero__fig{ position:relative; margin:0; display:grid; place-items:center;
  padding:0 var(--gut) clamp(2rem,5vw,3.5rem); }
.mhero__chip{ position:absolute; top:6%; left:8%; width:clamp(60px,9vw,110px); aspect-ratio:.866;
  clip-path:var(--hex); background:var(--tone); opacity:.5; }
/* Proporcija je na OKVIRU i ista je na svih šest strana.
   Izvorne slike su različitog formata (bagrem 1600×2133 portret, livada 1600×1059
   pejzaž); ako visinu diktira sama slika, portret razvuče hero i pojede kose uglove,
   pa strane izgledaju kao različiti šabloni. object-fit:cover reže razliku. */
.mhero__frame{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
  clip-path:polygon(var(--cut-x) 0,100% 0,100% calc(100% - var(--cut-y)),calc(100% - var(--cut-x)) 100%,0 100%,0 var(--cut-y)); }
.mhero__frame img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (min-width:900px){
  /* fiksna visina: dužina naslova i broj redova u ceniku (vresak i saće imaju
     samo jednu gramažu) inače daju šest različitih visina heroja */
  .mhero{ grid-template-columns:minmax(0,1fr) minmax(0,.86fr); align-items:center;
    min-height:940px; }
  .mhero__fig{ padding:clamp(2rem,4vw,3.5rem) var(--gut) clamp(2rem,4vw,3.5rem) 0; }
  .mhero__frame{ aspect-ratio:5/4; }
  .mbuy{ min-height:238px; display:flex; flex-direction:column; }
  .mbuy__foot{ margin-top:auto; }
}

/* OKUS na tamnom — prekida niz dve iste boje zaredom */
.taste{ background:var(--ink); color:var(--on-dark); padding:clamp(3.5rem,9vw,6rem) 0; }
.taste__in{ display:grid; gap:2.5rem; }
.taste__big{ font-family:"DjFix","Fraunces",serif; font-style:italic; font-variation-settings:"SOFT" 70,"WONK" 1;
  font-size:clamp(1.7rem,5vw,3rem); line-height:1.12; letter-spacing:-.03em; max-width:18ch;
  margin:0; color:var(--tone); }
[data-tone="suma"] .taste__big{ color:var(--wax); }
.taste__cols{ display:grid; gap:1.6rem; margin:0; }
.taste__cols dt{ font-family:"Space Grotesk",monospace; font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(246,235,214,.5); margin-bottom:.45rem; }
.taste__cols dd{ margin:0; max-width:34ch; color:rgba(246,235,214,.88); }
@media (min-width:900px){
  .taste__in{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:4rem; align-items:start; }
  .taste__cols{ grid-template-columns:repeat(3,1fr); gap:2rem; }
}

.mstory{ padding:clamp(4rem,10vw,7rem) 0; }
.mstory__grid{ display:grid; gap:2.5rem; }
.mstory__t p{ color:var(--ink-2); max-width:50ch; }
.mstory__f .hexframe{ width:min(70vw,300px); }
@media (min-width:900px){ .mstory__grid{ grid-template-columns:minmax(0,.6fr) minmax(0,1fr); gap:4rem; align-items:center; } }

.mship{ background:var(--cream-2); padding:clamp(3rem,7vw,5rem) 0; }
.mship__grid{ display:grid; gap:2rem; }
.mship__c b{ display:block; font-family:"Space Grotesk",monospace; font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.6rem; }
.mship__c p{ margin:0; color:var(--ink-2); font-size:.98rem; max-width:38ch; }
/* dva pasusa u ovom bloku su se do 2026-08-31 slivala u jedan, jer je
   margina nula; pogadja i /dostava/ i /dostava/beograd/. */
.mship__c p + p{ margin-top:.9em; }
@media (min-width:760px){ .mship__grid{ grid-template-columns:repeat(3,1fr); gap:2.5rem; } }

/* ============================================================
   PČELINJAK
   ============================================================ */
.nhero{ padding:calc(var(--nav-h) + 3rem) 0 clamp(2.5rem,6vw,4rem); }
.nhero__in{ display:grid; gap:1.5rem; align-items:center; }
.nhero__num{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(7rem,30vw,20rem); line-height:.8; letter-spacing:-.06em; font-weight:500;
  color:var(--wax); }
.nhero__h1{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(2.2rem,6vw,3.6rem); line-height:1; letter-spacing:-.03em; font-weight:500; margin:.2em 0 .4em; }
.nhero__h1 em{ font-style:italic; color:var(--propolis); }
.sezona{ display:flex; align-items:center; gap:.6em; margin-top:1.4rem; padding:.7em 1em;
  background:var(--wax); color:var(--ink);
  font-family:"Space Grotesk",monospace; font-size:.78rem; letter-spacing:.05em;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 14px),calc(100% - 10px) 100%,0 100%,0 14px); }
.nhero__f{ margin:0; justify-self:center; }
.nhero__f .hexframe{ width:min(58vw,220px); }
@media (min-width:860px){
  .nhero__in{ grid-template-columns:auto minmax(0,1fr) auto; gap:clamp(2rem,4vw,3.5rem); }
  .nhero__f .hexframe{ width:clamp(160px,17vw,230px); }
}
@media (max-width:859px){ .nhero__f{ display:none; } }

/* traka fotografija preko cele širine */
.band{ display:grid; grid-template-columns:repeat(2,1fr); gap:3px; background:var(--ink); }
.band figure{ margin:0; overflow:hidden; aspect-ratio:4/3; }
.band img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease); }
.band figure:hover img{ transform:scale(1.06); }
@media (min-width:760px){ .band{ grid-template-columns:repeat(4,1fr); } }

.year{ position:relative; background:var(--ink); color:var(--on-dark);
  padding:clamp(4rem,10vw,7rem) 0 clamp(3rem,7vw,4.5rem); overflow:hidden; }
/* senka na desnoj ivici: pokazuje da traka ide dalje */
.year::after{
  content:""; position:absolute; right:0; bottom:calc(clamp(3rem,7vw,4.5rem) + 2.6rem);
  width:clamp(44px,8vw,130px); height:clamp(250px,30vw,300px);
  background:linear-gradient(90deg,transparent,var(--ink)); pointer-events:none; z-index:2;
}
.year__head{ margin-bottom:2rem; }
.mon{ min-height:clamp(250px,30vw,300px); align-content:start; }
/* pokazivač napretka za horizontalnu traku */
.year__prog{ max-width:var(--maxw); margin:1.6rem auto 0; padding-inline:var(--gut); }
.year__prog i{ display:block; height:3px; background:rgba(246,235,214,.16); position:relative; }
.year__prog i::after{ content:""; position:absolute; top:0; bottom:0;
  left:var(--x,0%); width:var(--w,22%); background:var(--wax); }
.year__hint{ display:flex; align-items:center; gap:.5em;
  font-family:"Space Grotesk",monospace; font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(246,235,214,.5); }
.year__vp{ overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-inline:var(--gut); }
.year__vp::-webkit-scrollbar{ display:none; }
.year__track{ display:flex; gap:.7rem; width:max-content; }
.mon{ flex:none; scroll-snap-align:center; width:clamp(210px,60vw,270px);
  background:rgba(246,235,214,.07); padding:1.4rem;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 20px),calc(100% - 14px) 100%,0 100%,0 20px);
  transition:background .45s var(--ease); }
.mon:hover, .mon.is-now{ background:rgba(246,235,214,.14); }
.mon.is-now{ background:var(--wax); color:var(--ink); }
.mon b{ font-family:"Space Grotesk",monospace; font-size:.72rem; letter-spacing:.14em; opacity:.6; }
.mon h3{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:1.5rem; font-weight:500; letter-spacing:-.02em; margin:.3rem 0 .5rem; }
.mon p{ font-size:.95rem; opacity:.78; margin:0; }

/* ============================================================
   PRIČA
   ============================================================ */
.fhero{ position:relative; min-height:min(88svh,760px); display:grid; align-items:end; overflow:hidden; }
.fhero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Preliv MORA da bude na sekciji, ne na .wrap-u — .wrap ima max-width pa se
   preliv završavao pre ivica ekrana. Plus gornji sloj da nav bude čitljiv. */
.fhero::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(rgba(42,24,12,.72) 0, rgba(42,24,12,.28) 26%, transparent 46%),
    linear-gradient(transparent 30%, rgba(42,24,12,.55) 62%, rgba(42,24,12,.92) 100%); }
.fhero__in{ position:relative; z-index:2; padding-block:clamp(2.5rem,7vw,5rem); color:var(--on-dark); }
.fhero__h1{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(2.6rem,8.5vw,6rem); line-height:.95; letter-spacing:-.035em; font-weight:500; margin:.2em 0 0; max-width:16ch; }
.fhero__h1 em{ font-style:italic; color:var(--wax); }

.story{ padding:clamp(4rem,10vw,8rem) 0; }
.story__grid{ display:grid; gap:3rem; }
/* Naslov odeljka stoji IZNAD teksta u levoj koloni, ne preko cele širine, pa
   .h2 na svojoj punoj veličini (do 5rem) razbije kolonu od 1fr na četiri reda. */
.story__h{ font-size:clamp(1.9rem,4.6vw,3rem); max-width:20ch; margin-bottom:.55em; }
.story__t p{ font-size:1.1rem; color:var(--ink-2); max-width:52ch; }
.story__rail{ display:grid; gap:0; }
.story__rail li{ display:grid; grid-template-columns:5.5rem 1fr; gap:1.2rem; align-items:baseline;
  padding:1rem 0; border-top:1px solid rgba(42,24,12,.16); }
.story__rail b{ font-family:"DjFix","Fraunces",serif; font-size:1.3rem; font-weight:600; color:var(--propolis);
  font-variant-numeric:tabular-nums; }
.story__rail span{ color:var(--ink-2); }
@media (min-width:900px){ .story__grid{ grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:4rem; } }

.folk__ini{ font-family:"DjFix","Fraunces",serif; font-style:italic; font-variation-settings:"SOFT" 70,"WONK" 1;
  font-size:clamp(3rem,7vw,4.5rem); color:rgba(42,24,12,.35); }
.folks__note{ margin-top:2rem; font-family:"Space Grotesk",monospace; font-size:.72rem;
  letter-spacing:.08em; color:rgba(246,235,214,.5); }

/* Iz sveske — artefakt, ne "nagrada" */
.note{ background:var(--cream-2); padding:clamp(4rem,10vw,7rem) 0; }
.note__grid{ display:grid; gap:2rem; }
.note__meta{ display:grid; gap:.5rem; align-content:start; }
.note__date{ margin:0; font-family:"DjFix","Fraunces",serif; font-size:clamp(1rem,2.6vw,1.2rem);
  line-height:1.25; color:var(--ink-2); }
.note__date b{ display:block; font-size:clamp(2.2rem,6vw,3.2rem); font-weight:600;
  letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.note__seal{ display:block; width:58px; margin-top:.8rem; }
.note__seal svg polygon{ fill:var(--wax); stroke:var(--propolis); stroke-width:3; }
.note__body{ margin:0; padding-left:clamp(1.1rem,3vw,2.2rem); border-left:3px solid var(--wax); }
/* viseća interpunkcija: navodnik izlazi u levu marginu */
.note__body blockquote{ margin:0 0 1.2rem; text-indent:-.44em;
  font-family:"DjFix","Fraunces",serif; font-style:italic; font-variation-settings:"SOFT" 70,"WONK" 1;
  font-size:clamp(1.3rem,3.8vw,2.1rem); line-height:1.32; letter-spacing:-.02em; }
.note__body blockquote::before{ content:"„"; }
.note__body blockquote::after{ content:"”"; }
.note__body figcaption{ font-size:.98rem; color:var(--ink-2); max-width:48ch; }
@media (min-width:860px){ .note__grid{ grid-template-columns:auto minmax(0,1fr); gap:clamp(2.5rem,6vw,5rem); } }

/* ============================================================
   POKLONI
   ============================================================ */
.ghero{ position:relative; background:var(--forest); color:var(--cream);
  padding:calc(var(--nav-h) + 2.5rem) 0 clamp(3rem,7vw,5rem); overflow:hidden; }
.ghero__grid{ position:relative; z-index:1; display:grid; gap:3rem; align-items:center; }
.ghero__h1{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(2.5rem,7.5vw,4.8rem); line-height:.95; letter-spacing:-.035em; font-weight:500; margin:.2em 0 .3em; }
.ghero__h1 em{ font-style:italic; color:var(--wax); }
.ghero .lede{ color:rgba(251,243,228,.84); }
.ghero__pts{ display:grid; gap:.55rem; margin:1.4rem 0; }
.ghero__pts li{ display:flex; align-items:baseline; gap:.7em; }
.ghero__pts .hexdot{ color:var(--wax); }
.ghero__buy{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1.2rem; margin-bottom:1.6rem; }
.ghero__price{ font-family:"Space Grotesk",monospace; font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(251,243,228,.7); display:flex; align-items:baseline; gap:.6em; }
.ghero__price b{ font-family:"DjFix","Fraunces",serif; font-size:1.7rem; letter-spacing:-.02em;
  text-transform:none; color:var(--wax); font-variant-numeric:tabular-nums; }
.ghero__price .eur{ color:rgba(251,243,228,.55); }
.ghero__plus{ font-family:"Space Grotesk",monospace; font-size:.72rem; letter-spacing:.08em;
  color:rgba(251,243,228,.6); }
.ghero__vis{ display:grid; gap:1.6rem; justify-items:center; }
@media (min-width:900px){ .ghero__grid{ grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:4rem; } }

/* tri tegle kao tri ćelije saća — dodiruju se, ne preklapaju */
/* Tri ćelije u trijadi. Razmak se dobija time što je ćelija MANJA od koraka
   rešetke (--jw), a ne pseudo-elementom u boji podloge — takav rub je sa
   isolation:isolate padao IZNAD boje sorte i gasio je. */
.triad{ --jw:min(32vw,150px); --gap:7px; --H:calc(var(--jw) * 1.1547);
  position:relative; width:calc(var(--jw) * 2); height:calc(var(--H) * 1.78); }
.triad__j{
  position:absolute; left:50%; top:50%;
  width:calc(var(--jw) - var(--gap)); aspect-ratio:.866;
  clip-path:var(--hex); background:var(--tone,rgba(246,235,214,.16));
  display:grid; place-content:center; text-align:center; gap:.1rem;
  color:var(--ink);
  transition:background .5s var(--ease), transform .5s var(--ease);
}
.triad__j--1{ transform:translate(calc(-50% - var(--jw)/2), calc(-50% - var(--H)*.375)); }
.triad__j--2{ transform:translate(-50%,                     calc(-50% + var(--H)*.375)); }
.triad__j--3{ transform:translate(calc(-50% + var(--jw)/2), calc(-50% - var(--H)*.375)); }
.triad__j b{ font-family:"DjFix","Fraunces",serif; font-size:clamp(.8rem,2.2vw,1rem); font-weight:600; letter-spacing:-.01em; }
.triad__j i{ font-style:normal; font-family:"Space Grotesk",monospace; font-size:.6rem; opacity:.7; }
.triad__j[data-tone="suma"]{ color:var(--on-dark); }
.triad__j--1{ transform:translate(-100%,-87.5%); }
.triad__j--2{ transform:translate(-50%,-12.5%); }
.triad__j--3{ transform:translate(0,-87.5%); }
.triad--live .triad__j.is-set{ box-shadow:0 10px 26px rgba(42,24,12,.22); }
/* Prazna ćelija je do sada bila skoro providna (16 % kreme na kremastoj
   podlozi), pa je konstruktor poklona na telefonu izgledao kao trista
   piksela ničega iznad kartice. Sada se prazno mesto vidi kao mesto koje
   čeka da se popuni, sa znakom plus u sredini. */
.triad--live .triad__j:not(.is-set){ background:rgba(42,24,12,.06); }
.triad--live .triad__j:not(.is-set)::after{
  content:"+"; font-family:"Space Grotesk",monospace; font-size:1.1rem;
  color:var(--ink-3); opacity:.55; line-height:1;
}

/* kartica koja se piše rukom */
.card{ background:var(--cream); color:var(--ink); padding:1rem 1.2rem; width:min(100%,290px);
  display:grid; gap:.3rem; text-align:center; border:1px solid rgba(42,24,12,.18);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 14px),calc(100% - 10px) 100%,0 100%,0 14px); }
.card__l{ font-family:"Space Grotesk",monospace; font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); }
.card__n{ font-family:"DjFix","Fraunces",serif; font-style:italic; font-variation-settings:"SOFT" 70,"WONK" 1;
  font-size:clamp(1rem,2.8vw,1.25rem); line-height:1.25; }
.card__y{ font-family:"Space Grotesk",monospace; font-size:.6rem; letter-spacing:.1em; color:var(--ink-3); }

.builder{ padding:clamp(4rem,10vw,7rem) 0; }
.builder__grid{ display:grid; gap:2.5rem; margin-top:clamp(1.5rem,4vw,2.5rem); }
/* ---------- izbor tegli za poklon ----------
   Jedan red po sorti: ime, prekidač gramaže, cena te gramaže i brojač.
   Sve tri odluke stoje jedna do druge i vide se odjednom. */
.gpick{ display:grid; gap:.6rem; }
/* Naslov grupe u konstruktoru poklona. Spisak je sa tri reda narastao na
   devet (tegle, saće i poklopci, propolis), pa bez podele izgleda kao jedan
   dugačak niz u kome se ne vidi šta je šta. Prvi naslov nema razmak iznad. */
.gpick__g{ margin:1.4rem 0 .1rem; font-family:"Space Grotesk",monospace;
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.gpick__g:first-child{ margin-top:0; }
.gpick__row{
  display:grid; gap:.9rem; align-items:center;
  background:var(--paper); padding:clamp(1rem,2.6vw,1.3rem) clamp(1.1rem,3vw,1.5rem);
  border-left:4px solid var(--tone,var(--bagrem));
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut-y)),calc(100% - var(--cut-x)) 100%,0 100%);
  transition:background .35s var(--ease);
}
.gpick__row.is-on{ background:var(--cream-2); }
.gpick__id b{ display:block; font-family:"DjFix","Fraunces",serif; font-weight:500;
  font-size:clamp(1.15rem,2.8vw,1.4rem); letter-spacing:-.02em; }
.gpick__id span{ font-family:"Space Grotesk",monospace; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); }
.gpick__price{ font-family:"DjFix","Fraunces",serif; font-weight:600; font-size:1.15rem;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.gpick__qty{ justify-self:start; }
/* Prekidač gramaže je inline-flex, ali kao ćelija rešetke svejedno dobija
   justify-self:stretch i razvuče se preko celog reda. Na telefonu je red
   jednokolonski, pa je iza „980 g" ostajala široka prazna siva traka — kod
   saća, koje ima samo dve gramaže, skoro pola reda. Kao i .gpick__qty ispod,
   traka staje na svoju širinu. */
.gpick__row .gsize{ justify-self:start; max-width:100%; flex-wrap:wrap; }
@media (min-width:720px){
  .gpick__row{ grid-template-columns:minmax(0,1fr) auto auto auto; gap:1.4rem; }
  .gpick__price{ text-align:right; min-width:7.5ch; }
  .gpick__qty{ justify-self:end; }
}

/* ---------- prekidač gramaže / segmentna traka ----------
   Zamena za <select>: padajuću listu crta operativni sistem i ona na
   tamnoj pozadini izgleda kao tuđ prozor usred strane. Ovde su opcije
   vidljive odjednom i nose stil sajta. */
.gsize, .seg{
  display:inline-flex; gap:2px; padding:2px; background:rgba(42,24,12,.08);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 8px),calc(100% - 6px) 100%,0 100%,0 8px);
}
.gsize__b, .seg__b{
  appearance:none; border:0; cursor:pointer; background:transparent; color:var(--ink-2);
  font-family:"Space Grotesk",monospace; font-size:.76rem; letter-spacing:.08em;
  text-transform:uppercase; padding:.62em 1.05em; white-space:nowrap;
  transition:background .28s var(--ease), color .28s var(--ease);
}
.gsize__b:hover:not(.is-on):not([disabled]), .seg__b:hover:not(.is-on):not([disabled]){
  background:rgba(42,24,12,.07); color:var(--ink);
}
.gsize__b.is-on, .seg__b.is-on{ background:var(--ink); color:var(--paper); }
.gsize__b[disabled], .seg__b[disabled]{ cursor:not-allowed; opacity:.35; }
/* na tamnoj sekciji (računica veleprodaje) traka se okreće naopako */
.calc .seg{ background:rgba(246,235,214,.12); }
.calc .seg__b{ color:rgba(246,235,214,.72); }
.calc .seg__b:hover:not(.is-on){ background:rgba(246,235,214,.1); color:var(--on-dark); }
.calc .seg__b.is-on{ background:var(--wax); color:var(--ink); }
.calc__lab{ font-family:"Space Grotesk",monospace; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(246,235,214,.6); margin-top:1rem; }
.calc .seg{ justify-self:start; }
.builder__box{ background:var(--cream-2); padding:clamp(1.4rem,4vw,2rem); display:grid; gap:1.1rem;
  justify-items:center; text-align:center;
  clip-path:polygon(var(--cut-x) 0,100% 0,100% calc(100% - var(--cut-y)),calc(100% - var(--cut-x)) 100%,0 100%,0 var(--cut-y)); }
.builder__cnt{ font-family:"Space Grotesk",monospace; font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin:0; }
.builder__sum{ margin:0; display:grid; gap:.1rem; }
.builder__sum span{ font-family:"Space Grotesk",monospace; font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); }
.builder__sum b{ font-family:"DjFix","Fraunces",serif; font-size:1.75rem; font-weight:600; font-variant-numeric:tabular-nums; }
.builder__note{ margin:0; font-size:.85rem; color:var(--ink-3); max-width:32ch; }
@media (min-width:900px){ .builder__grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:3rem; align-items:start; } }

.corp{ background:var(--cream-2); padding:clamp(3.5rem,9vw,6rem) 0; }
.corp__grid{ display:grid; gap:2.5rem; align-items:center; }
.corp__f .hexframe{ width:min(60vw,260px); }
.corp__l{ display:grid; gap:1rem; margin:1.4rem 0; }
.corp__l li{ display:grid; gap:.2rem; padding-top:.9rem; border-top:1px solid rgba(42,24,12,.16); }
.corp__l b{ font-family:"DjFix","Fraunces",serif; font-size:1.1rem; font-weight:500; }
.corp__l span{ color:var(--ink-2); font-size:.98rem; }
.corp__c{ font-family:"Space Grotesk",monospace; font-size:.9rem; }
@media (min-width:860px){ .corp__grid{ grid-template-columns:auto minmax(0,1fr); gap:4rem; } }

/* ============================================================
   VELEPRODAJA
   ============================================================ */
.whero{ padding:calc(var(--nav-h) + 3rem) 0 clamp(3rem,7vw,5rem); }
.whero__grid{ display:grid; gap:2.5rem; align-items:center; }
.whero__h1{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(2.6rem,8vw,5rem); line-height:.95; letter-spacing:-.035em; font-weight:500; margin:.2em 0 .35em; }
.whero__h1 em{ font-style:italic; color:var(--propolis); }
.whero .btn{ margin-top:1.4rem; }
.comb--build .hcell{ background:rgba(42,24,12,.3); }
.comb--build .hcell::after{ background:var(--cream); }
@media (min-width:900px){ .whero__grid{ grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:4rem; } }

.calc{ background:var(--ink); color:var(--on-dark); padding:clamp(4rem,10vw,7rem) 0; }
.calc__grid{ display:grid; gap:2.5rem; margin-top:clamp(1.5rem,4vw,2.5rem); }
.calc__ctl{ display:grid; gap:.5rem; align-content:start; }
.calc__ctl label{ font-family:"Space Grotesk",monospace; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(246,235,214,.6); margin-top:1rem; }
.calc__ctl input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:40px; background:transparent; cursor:pointer; }
.calc__ctl input[type=range]::-webkit-slider-runnable-track{ height:6px; background:rgba(246,235,214,.2); }
.calc__ctl input[type=range]::-moz-range-track{ height:6px; background:rgba(246,235,214,.2); }
.calc__ctl input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:28px; height:32px;
  margin-top:-13px; background:var(--wax); clip-path:var(--hex); border:0; }
.calc__ctl input[type=range]::-moz-range-thumb{ width:28px; height:32px; background:var(--wax); clip-path:var(--hex); border:0; }
.calc__ctl output{ font-family:"DjFix","Fraunces",serif; font-size:1.1rem; color:var(--wax); margin-left:.4em; }
.calc__out{ background:rgba(246,235,214,.07); padding:clamp(1.4rem,4vw,2.2rem); display:grid; gap:.8rem;
  clip-path:polygon(var(--cut-x) 0,100% 0,100% calc(100% - var(--cut-y)),calc(100% - var(--cut-x)) 100%,0 100%,0 var(--cut-y)); }
.calc__kg{ font-family:"DjFix","Fraunces",serif; font-size:clamp(2.4rem,8vw,4rem); line-height:.9;
  letter-spacing:-.04em; margin:0; color:var(--wax); }
.calc__kg b{ font-weight:500; }
.calc__tot, .calc__per{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  margin:0; padding-top:.8rem; border-top:1px solid rgba(246,235,214,.18); }
.calc__tot span, .calc__per span{ font-family:"Space Grotesk",monospace; font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(246,235,214,.6); }
.calc__tot b{ font-family:"DjFix","Fraunces",serif; font-size:1.7rem; font-weight:600; }
.calc__per b{ font-family:"DjFix","Fraunces",serif; font-size:1.1rem; }
.calc__note{ font-size:.9rem; color:rgba(246,235,214,.6); margin:.4rem 0 0; }
@media (min-width:860px){ .calc__grid{ grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:3.5rem; } }

.wfor{ padding:clamp(4rem,10vw,7rem) 0; }
.wfor__grid{ display:grid; gap:2.5rem; }
.wfor__list{ display:grid; gap:1.2rem; margin-top:1.4rem; }
.wfor__list li{ display:grid; gap:.2rem; padding-top:1rem; border-top:1px solid rgba(42,24,12,.15); }
.wfor__list b{ font-family:"DjFix","Fraunces",serif; font-size:1.15rem; font-weight:500; }
.wfor__list span{ color:var(--ink-2); }
.wfor__note{ margin-top:1.4rem; color:var(--ink-3); font-size:.95rem; max-width:46ch; }
.wfor__box{ background:var(--cream-2); padding:clamp(1.4rem,4vw,2.2rem); }
.wfor__steps{ display:grid; gap:.9rem; margin:1rem 0 1.4rem; }
.wfor__steps li{ display:grid; grid-template-columns:2.2rem 1fr; gap:.8rem; align-items:baseline; }
.wfor__steps span{ font-family:"Space Grotesk",monospace; font-size:.72rem; color:var(--propolis); }
.wfor__c{ font-family:"Space Grotesk",monospace; font-size:.9rem; line-height:2; }
@media (min-width:900px){ .wfor__grid{ grid-template-columns:minmax(0,1fr) minmax(0,.75fr); gap:4rem; } }

/* ============================================================
   KONTAKT
   ============================================================ */
.khero{ padding:calc(var(--nav-h) + 3rem) 0 clamp(3rem,7vw,5rem); }
.khero__h1{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(2.4rem,7.5vw,4.6rem); line-height:.96; letter-spacing:-.035em; font-weight:500; margin:.2em 0 .35em; }
.khero__h1 em{ font-style:italic; color:var(--propolis); }
.khero__lede{ margin-bottom:clamp(2rem,5vw,3rem); }

/* tri načina kontakta, svaki svoja ćelija */
.kways{ display:grid; gap:.7rem; }
/* Boja teksta mora da prati ton, ne da bude uvek tamna: kartica Instagrama
   ima ton „suma", koji je tamnobraon, pa je na njoj tamno slovo na tamnoj
   podlozi i cela kartica se stapala u jednu mrlju. Ostale komponente na sajtu
   (pitem, triad) već čitaju --tone-ink; ova jedina nije. */
.kway a{ display:grid; gap:.25rem; padding:clamp(1.2rem,3vw,1.8rem);
  background:var(--tone); color:var(--tone-ink,var(--ink)); height:100%;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 22px),calc(100% - 16px) 100%,0 100%,0 22px);
  transition:transform .5s var(--ease); }
.kway a:hover{ transform:translateY(-5px); }
.kway__ic{ display:block; width:26px; height:26px; margin-bottom:.5rem; }
.kway__ic svg{ width:100%; height:100%; }
.kway__k{ font-family:"Space Grotesk",monospace; font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; opacity:.6; }
.kway__v{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(1.2rem,3.2vw,1.55rem); font-weight:600; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; }
.kway__n{ font-size:.9rem; opacity:.72; margin-top:.2rem; }
@media (min-width:760px){ .kways{ grid-template-columns:repeat(3,1fr); } }

/* raspored poziva: prava vremenska osa 06—24 h */
.when{ background:var(--cream-2); padding:clamp(3.5rem,9vw,6rem) 0; }
.when__now{ font-family:"Space Grotesk",monospace; font-size:.8rem; font-weight:600;
  display:flex; align-items:center; gap:.5em; margin:0 0 1.8rem; }
.tt{ display:grid; gap:.5rem; }
.tt__axis{ display:grid; grid-template-columns:repeat(5,1fr); margin-left:clamp(0px,17vw,9rem);
  font-family:"Space Grotesk",monospace; font-size:.62rem; letter-spacing:.1em; color:var(--ink-3);
  border-bottom:1px solid rgba(42,24,12,.14); padding-bottom:.3rem; margin-bottom:.3rem; }
.tt__row{ display:grid; grid-template-columns:clamp(6rem,17vw,9rem) 1fr auto; gap:.8rem; align-items:center; }
.tt__row b{ font-size:.92rem; font-weight:600; }
.tt__bar{ position:relative; display:block; height:14px; background:rgba(42,24,12,.09); }
.tt__bar i{ position:absolute; top:0; bottom:0; left:var(--a,0); right:calc(100% - var(--b,100%));
  background:var(--wax); display:block; }
.tt__hatch{ left:0 !important; right:0 !important;
  background:repeating-linear-gradient(-45deg,rgba(178,58,27,.35) 0 5px,transparent 5px 10px) !important; }
.tt__row em{ font-style:normal; font-family:"Space Grotesk",monospace; font-size:.7rem;
  letter-spacing:.05em; color:var(--ink-3); white-space:nowrap; }
.when__note{ margin-top:1.6rem; color:var(--ink-2); max-width:52ch; }
@media (max-width:600px){
  .tt__axis{ display:none; }
  .tt__row{ grid-template-columns:1fr auto; grid-template-areas:"n e" "b b"; gap:.3rem .8rem; }
  .tt__row b{ grid-area:n; } .tt__row em{ grid-area:e; } .tt__bar{ grid-area:b; }
}

.market{ padding:clamp(3.5rem,9vw,6rem) 0; }
.market__grid{ display:grid; gap:2.5rem; align-items:center; }
.market__f .hexframe{ width:min(64vw,270px); }
.market__big{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(1.3rem,3.6vw,1.9rem); font-weight:500; letter-spacing:-.02em; margin:0 0 .2em; }
.market__hrs{ font-family:"Space Grotesk",monospace; font-size:.8rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--propolis); margin:0 0 1rem; }
.market__note{ font-size:.95rem; color:var(--ink-3); }
@media (min-width:860px){ .market__grid{ grid-template-columns:auto minmax(0,1fr); gap:4rem; } }

.order-sec{ background:var(--cream-2); padding:clamp(4rem,10vw,7rem) 0; }
.ord__grid{ display:grid; gap:2.5rem; align-items:start; }
.order{ background:var(--paper); }
.ord__side{ display:grid; gap:1rem; }
.ord__card{ background:var(--paper); padding:clamp(1.3rem,3.5vw,1.9rem);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 20px),calc(100% - 14px) 100%,0 100%,0 20px); }
.ord__card > b{ display:block; font-family:"Space Grotesk",monospace; font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.9rem; }
.ord__list{ display:grid; gap:.5rem; }
.ord__list li{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding-bottom:.5rem; border-bottom:1px solid rgba(42,24,12,.1); }
.ord__list span{ font-size:.9rem; color:var(--ink-2); }
.ord__list em{ font-style:normal; font-weight:600; font-variant-numeric:tabular-nums; }
.ord__fine{ margin:.9rem 0 0; font-size:.85rem; color:var(--ink-3); }
.ord__card--wait{ background:var(--vresak); }
.ord__card--wait > b{ color:rgba(42,24,12,.65); }
.ord__card--wait p{ font-size:.95rem; }
@media (min-width:900px){ .ord__grid{ grid-template-columns:minmax(0,1fr) minmax(0,.72fr); gap:3rem; } }

/* ============================================================
   404
   ============================================================ */
.e404{ min-height:82svh; display:grid; place-items:center; text-align:center; padding:calc(var(--nav-h) + 3rem) 0 5rem; }
.e404__in{ display:grid; justify-items:center; gap:.4rem; }
.e404__hex{ width:clamp(90px,18vw,140px); margin-bottom:1rem; }
.e404__hex polygon{ fill:none; stroke:var(--ink-3); stroke-width:2; stroke-dasharray:8 8; }
.e404__h1{ font-family:"DjFix","Fraunces",serif; font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(2.4rem,8vw,5rem); line-height:1; letter-spacing:-.035em; font-weight:500; margin:.2em 0 .3em; }
.e404__h1 em{ font-style:italic; color:var(--propolis); }
.e404__cta{ display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; justify-content:center; margin-top:1.6rem; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .wipe{ display:none !important; }
  .navprev{ display:none !important; }
  .rung{ margin-left:0 !important; }
  .boxvis__j{ transform:none !important; }
}

/* ============================================================
   KORPA
   Korpa ne naplaćuje: ona sastavlja porudžbinu i ispisuje je
   čitljivo pre slanja. Zato izgleda kao račun, a ne kao kasa.
   ============================================================ */

/* --- brojač u zaglavlju --- */
.navkorpa{ display:inline-flex; align-items:center; gap:.4rem; color:var(--ink);
  text-decoration:none; padding:.3rem .1rem; transition:opacity .3s var(--ease); }
.navkorpa svg{ width:21px; height:21px; }
.navkorpa b{ font-family:"Space Grotesk",monospace; font-size:.7rem; font-weight:700;
  width:1.5rem; height:1.72rem; display:grid; place-items:center;
  background:var(--wax); color:var(--ink); clip-path:var(--hex); }
.navkorpa b[hidden]{ display:none; }
/* dugme poklona dok kutija nije puna */
.btn.is-off{ opacity:.55; }
.navkorpa:hover{ opacity:.72; }
body.nav-light .nav:not(.is-stuck) .navkorpa{ color:var(--cream); }
.navpanel__k{ font-family:"Space Grotesk",monospace; font-size:.62em;
  margin-left:.5em; padding:.15em .55em; background:var(--wax); color:var(--ink); }

/* --- brojačka kontrola, ista na strani sorte i u korpi --- */
/* Kontrola količine je PRAZNA u HTML-u i puni je js/korpa.js tek posle
   učitavanja. Bez rezervisanog mesta red cenovnika naraste sa visine teksta
   na 34 px, a cena, koja stoji levo od kontrole, skoči u stranu. Lighthouse
   je 2026-08-17 na /medovi/bagrem/ merio CLS 0,127 i skoro sve je otpadalo
   na .mbuy. Mere su uzete sa žive strane posle punjenja: 81×34 na desktopu,
   100×44 na telefonu (tamo su dodirne mete 44 px, vidi mobile.css).
   Ako se dugmad u kontroli ikad promene, ove dve mere idu s njima. */
.qty{ min-width:81px; min-height:34px; }
.qty{ display:inline-flex; align-items:center; justify-content:center;
  background:rgba(42,24,12,.07);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  transition:background .35s var(--ease); }
/* šumski i propolis su tamni tonovi — mastilo na njima ne postoji */
.qty.is-on{ background:var(--tone,var(--wax)); color:var(--tone-ink,var(--ink)); }
.qty__b{ width:34px; height:34px; border:0; background:none; color:inherit; cursor:pointer;
  font:inherit; font-size:1.1rem; line-height:1; display:grid; place-items:center;
  transition:transform .25s var(--ease); }
.qty__b:hover{ transform:scale(1.22); }
.qty__b:active{ transform:scale(.9); }
.qty__n{ min-width:1.5ch; text-align:center; font-family:"Space Grotesk",monospace;
  font-size:.82rem; font-weight:700; font-variant-numeric:tabular-nums; }
.qty__no{ font-family:"Space Grotesk",monospace; font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; opacity:.55; padding:.4rem .5rem; }

/* cenovnik na strani sorte dobija treću kolonu */
.mbuy{ max-width:392px; }
.mbuy__rows li{ display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:.2rem .9rem; }
.mbuy__rows li.is-on{ background:rgba(42,24,12,.04); }
.mbuy__rows b{ text-align:right; }

/* --- potvrda pri dodavanju --- */
.ktoast{ position:fixed; left:50%; bottom:calc(1.2rem + env(safe-area-inset-bottom));
  transform:translate(-50%,140%); z-index:80;
  background:var(--ink); color:var(--cream); padding:.75rem 1.15rem;
  font-family:"Space Grotesk",monospace; font-size:.74rem; letter-spacing:.04em;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:transform .5s var(--ease); pointer-events:none; max-width:min(92vw,30rem); }
.ktoast.is-on{ transform:translate(-50%,0); }

/* --- strana korpe --- */
.khero--korpa{ padding-bottom:0; min-height:auto; }
/* dugme u tamnom računu: puni se voskom, jer mastilo na mastilu ne postoji */
.ksum .btn{ background:var(--wax); color:var(--ink); }
.ksum .btn__fill{ background:var(--cream); }
.ksum .btn:hover .btn__t{ color:var(--ink); }
.kbody{ padding-bottom:clamp(3rem,7vw,5.5rem); }
.kgrid{ display:grid; grid-template-columns:1fr minmax(272px,336px);
  gap:clamp(1.4rem,3vw,2.8rem); align-items:start; }
.kgrid.is-empty{ grid-template-columns:1fr; }
.kgrid.is-empty .ksum{ display:none; }

.klist{ display:grid; gap:.6rem; }
.kli{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto auto;
  align-items:center; gap:.6rem 1rem; padding:.95rem 1.1rem;
  background:var(--paper); border:1px solid rgba(42,24,12,.1);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 16px),calc(100% - 12px) 100%,0 100%,0 16px); }
.kli__dot{ width:16px; aspect-ratio:.866; clip-path:var(--hex); background:var(--tone); }
.kli__t{ display:grid; gap:.1rem; min-width:0; }
.kli__t b{ font-family:"DjFix","Fraunces",serif; font-size:1.06rem; font-weight:600; line-height:1.15; }
.kli__t i{ font-style:normal; font-family:"Space Grotesk",monospace; font-size:.68rem;
  letter-spacing:.06em; opacity:.6; }
.kli__c{ font-family:"DjFix","Fraunces",serif; font-size:1.06rem; font-weight:600;
  font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.kli__x{ width:32px; height:32px; border:0; background:none; color:inherit; cursor:pointer;
  display:grid; place-items:center; opacity:.4; transition:opacity .25s var(--ease); }
.kli__x svg{ width:16px; height:16px; }
.kli__x:hover{ opacity:1; color:var(--propolis); }

.kempty{ display:grid; justify-items:start; gap:1rem; padding:2.5rem 0 1rem; max-width:34ch; }
.kempty__hex{ width:56px; aspect-ratio:.866; clip-path:var(--hex);
  background:rgba(42,24,12,.09); }
.kmain__note{ margin-top:1.4rem; font-size:.86rem; opacity:.6; max-width:44ch; }

.ksum{ background:var(--ink); color:var(--cream); padding:1.4rem 1.35rem 1.5rem;
  display:grid; gap:.85rem; position:sticky; top:calc(var(--nav-h) + 1rem);
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 20px),calc(100% - 16px) 100%,0 100%,0 20px); }
.ksum__t{ font-family:"Space Grotesk",monospace; font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; opacity:.6; }
.ksum__l{ display:grid; gap:.5rem; }
.ksum__l li{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  font-size:.92rem; }
.ksum__l em{ font-style:normal; font-variant-numeric:tabular-nums; }
.ksum__free{ font-family:"Space Grotesk",monospace; font-size:.68rem; letter-spacing:.05em;
  opacity:.75; padding-top:.55rem; border-top:1px solid rgba(246,235,214,.16); position:relative; }
.ksum__free::after{ content:""; display:block; height:3px; margin-top:.5rem;
  background:linear-gradient(90deg,var(--wax) var(--p,0%),rgba(246,235,214,.14) var(--p,0%)); }
.ksum__free.is-ok{ color:var(--wax); opacity:1; }
/* Ispod praga traka stoji na procentu zbira, iznad njega je puna. Tekst je
   kratak jer objašnjenje ko naplaćuje dostavu stoji u sitnom ispod. */
/* Kad praga za besplatnu dostavu nema, nema ni trake koja bi ga merila —
   ostaje samo objašnjenje zašto u zbiru nema dostave. */
.ksum__free.is-note{ text-transform:none; letter-spacing:0; line-height:1.5;
  font-family:inherit; font-size:.78rem; }
.ksum__free.is-note::after{ display:none; }
.ksum__tot{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding-top:.7rem; border-top:1px solid rgba(246,235,214,.2); }
.ksum__tot span{ font-family:"Space Grotesk",monospace; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; opacity:.65; }
.ksum__tot b{ font-family:"DjFix","Fraunces",serif; font-size:1.7rem; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--wax); }
.ksum__fine{ display:grid; gap:.3rem; font-size:.74rem; opacity:.55; line-height:1.45; }

/* --- račun unutar forme: ovo je ono što se šalje --- */
.korder{ background:var(--paper); border:1px solid rgba(42,24,12,.12); margin-bottom:1.6rem;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 16px),calc(100% - 12px) 100%,0 100%,0 16px); }
.korder__h{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.85rem 1.1rem; border-bottom:1px solid rgba(42,24,12,.12); }
.korder__h b{ font-family:"Space Grotesk",monospace; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; opacity:.65; }
.korder__h a{ font-size:.78rem; color:inherit; opacity:.65; }
.korder__h a:hover{ opacity:1; }
.korder__l{ display:grid; }
.korder__l li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center; gap:.8rem; padding:.7rem 1.1rem;
  border-bottom:1px solid rgba(42,24,12,.08); }
.korder__l i{ width:12px; aspect-ratio:.866; clip-path:var(--hex); background:var(--tone); }
.korder__l span{ display:grid; gap:.05rem; min-width:0; font-size:.95rem; }
.korder__l em{ font-style:normal; font-family:"Space Grotesk",monospace; font-size:.64rem;
  letter-spacing:.06em; opacity:.55; }
.korder__q{ font-family:"Space Grotesk",monospace; font-size:.7rem; opacity:.7;
  white-space:nowrap; }
.korder__c{ font-family:"DjFix","Fraunces",serif; font-size:1rem; font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.korder__d{ display:flex; justify-content:space-between; gap:1rem; padding:.65rem 1.1rem;
  font-size:.85rem; opacity:.7; }
.korder__t{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.85rem 1.1rem 1rem; border-top:1px solid rgba(42,24,12,.14); }
.korder__t span{ font-family:"Space Grotesk",monospace; font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; opacity:.6; }
.korder__t b{ font-family:"DjFix","Fraunces",serif; font-size:1.35rem; font-weight:600;
  font-variant-numeric:tabular-nums; }

.field label i{ font-style:normal; opacity:.5; text-transform:none; letter-spacing:0; }
.order__fine{ margin-top:.9rem; font-size:.78rem; opacity:.55; line-height:1.5; }

/* --- potvrda posle slanja: tri načina da porudžbina stvarno stigne --- */
.order__ok--gotovo{ display:grid; gap:.7rem; margin-top:1.4rem; padding:1.2rem 1.15rem;
  background:var(--paper); border:1px solid rgba(42,24,12,.14); color:var(--ink);
  font-weight:400;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 16px),calc(100% - 12px) 100%,0 100%,0 16px); }
.order__ok--gotovo b{ font-family:"DjFix","Fraunces",serif; font-size:1.2rem; font-weight:600;
  color:var(--forest); }
.order__ok--gotovo > span{ font-size:.9rem; opacity:.75; }
.order__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; }
/* Od 2026-08-22 porudzbina ide na mejl sama, pa su Viber i poziv sporedni.
   `--pao` je stanje kad zahtev nije prosao: tada su oni jedini put i traka
   je obojena, da kupac ne pomisli da je porudzbina stigla. */
.order__alt{ font-size:.82rem; opacity:.6; }
.order__ok--pao{ border-color:rgba(178,58,27,.4); }
.order__ok--pao b{ color:var(--propolis, #b23a1b); }
.btn--ghost{ background:none; box-shadow:inset 0 0 0 1.5px currentColor; color:var(--ink); }
.btn--ghost .btn__fill{ background:var(--ink); }
.order__pre{ margin:0; padding:.9rem 1rem; background:rgba(42,24,12,.05);
  font-family:"Space Grotesk",monospace; font-size:.72rem; line-height:1.6;
  white-space:pre-wrap; word-break:break-word; max-height:16rem; overflow:auto; }

/* uvodni ekran: znak pa ime, ime je tekst radi kvačice */
.loader__mark{ display:grid; justify-items:center; gap:.9rem; }
.loader__logo{ width:min(28vw,132px); height:auto; }
.loader__word{ font-family:"DjFix","Fraunces",serif; font-weight:600; letter-spacing:-.02em;
  font-size:clamp(1.6rem,4.6vw,2.4rem); color:var(--ink); }
.loader__word em{ font-style:italic; color:var(--propolis); }

/* Na tamnom heroju i ime brenda mora da se vidi, ne samo linkovi.
   :not(.is-stuck) je obavezno — kad se zaglavlje zalepi, pozadina mu je krem
   pa bi krem natpis nestao. */
body.nav-light .nav:not(.is-stuck) .nav__word{ color:var(--cream); }
body.nav-light .nav:not(.is-stuck) .nav__word em{ color:var(--wax); }

/* uvod se preskace bez treptaja: klasa pada u <head>, pre iscrtavanja */
html.bez-uvoda .loader{ display:none !important; }

/* godina osnivanja ide samo uz uvodni logotip */
.loader__since{ font-family:"Space Grotesk",monospace; font-size:.66rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ink); opacity:.45; margin-top:-.35rem;
  display:flex; align-items:center; gap:.7rem; }
.loader__since::before, .loader__since::after{
  content:""; width:clamp(14px,4vw,26px); height:1px; background:currentColor; opacity:.7; }

/* ============================================================
   BELEŠKE — spisak i pojedinačna strana
   Isti rečnik kao ostatak sajta: krem podloga, Fraunces u naslovima,
   zakošeni uglovi kartice. Tekst je uzak namerno — beleška se čita,
   ne skenira, pa mera reda ide na ~68 znakova.

   LANDMINE (prepravljeno 2026-08-02): slika kartice je RANIJE bila u
   .hexframe. Šesterougao unutar pravougaone kartice ostavlja četiri
   prazna trougla u uglovima, u boji podloge, pa je svaka kartica
   izgledala kao da joj je slika pukla. Slika sada puni ceo gornji deo
   kartice od ivice do ivice, a šesterougao je ostao tamo gde stoji sam
   za sebe (hero, sorte, saće) — ne unutar kartice.
   ============================================================ */

/* ---------- spisak ---------- */
/* naslov strane i prva kartica ne smeju da budu razdvojeni praznim ekranom */
.p-blog .ihero{ padding-bottom:clamp(1.4rem,3.5vw,2.4rem); }
.blist{ padding:0 0 clamp(4rem,10vw,8rem); }
.blist__grid{ display:grid; gap:clamp(1rem,2.2vw,1.5rem); }
@media (min-width:680px){
  .blist__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bcard--lead{ grid-column:1 / -1; }
}
/* Tri kolone, a prva beleška uzima dve: osam beleški time popuni raspored
   tačno (2+1 / 3 / 3) i nema visećeg reda sa jednom karticom. */
@media (min-width:1080px){
  .blist__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .bcard--lead{ grid-column:span 2; }
}

/* ---------- tri najnovije beleške na početnoj ----------
   Ista kartica kao na spisku, samo bez rednog broja, datuma i široke
   prve kartice: ovde su sve tri ravnopravne. */
/* ---------- utisci kupaca ----------
   Sekcija se ISCRTAVA SAMO ako u src/utisci.js postoji bar jedna prava
   izjava; build vraća prazan string dok je lista prazna, pa ovih pravila
   na sajtu za sada nema šta da uhvati. Namerno bez zvezdica: ocene nisu
   prikupljane, a pet nacrtanih zvezdica bez brojke je obećanje bez pokrića. */
.utisci{ padding:clamp(3.5rem,9vw,6.5rem) 0; }
.utisci__grid{ display:grid; gap:clamp(1rem,2.2vw,1.6rem);
  margin-top:clamp(1.8rem,4vw,2.6rem); }
/* auto-fit, a ne fiksne tri kolone: prve prave izjave stigle su 2026-08-22 i
   ima ih dve, pa bi treca kolona ostala prazna i blok bi izgledao krnje.
   Sa auto-fit dve izjave popune red, a tri i dalje stanu u tri kolone. */
@media (min-width:760px){ .utisci__grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); } }
.utisak{ margin:0; padding:clamp(1.3rem,2.6vw,1.8rem); background:var(--cream-2);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut-y,18px)),
    calc(100% - var(--cut-x,18px)) 100%,0 100%);
  display:flex; flex-direction:column; gap:1rem; }
.utisak blockquote{ margin:0; }
.utisak p{ margin:0; font-family:"DjFix","Fraunces",serif;
  font-size:clamp(1.05rem,1.7vw,1.2rem); line-height:1.5; }
.utisak figcaption{ margin-top:auto; display:flex; justify-content:space-between;
  gap:.8rem; font-family:"Space Grotesk",monospace; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }

.btease{ background:var(--cream-2); padding:clamp(3.5rem,9vw,6.5rem) 0; }
.btease .lede{ max-width:52ch; }
.btease__grid{ display:grid; gap:clamp(1rem,2.2vw,1.5rem);
  margin:clamp(1.8rem,4vw,2.6rem) 0 1.8rem; }
@media (min-width:760px){ .btease__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.btease .bcard__h{ font-size:clamp(1.15rem,2vw,1.35rem); }
.btease .bcard__f{ aspect-ratio:16 / 10; }
.btease__all{ display:inline-block; }

/* ---------- kartica ---------- */
/* .bcard je samo ćelija rastera; sve nosi <a> unutra, da bi zakošenje
   uglova seklo i sliku i podlogu u jednom potezu. */
.bcard{ display:grid; }
.bcard__a{
  display:flex; flex-direction:column; min-height:100%;
  background:var(--paper); color:inherit; text-decoration:none;
  clip-path:polygon(var(--cut-x) 0,100% 0,100% calc(100% - var(--cut-y)),
    calc(100% - var(--cut-x)) 100%,0 100%,0 var(--cut-y));
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
@media (hover:hover){
  .bcard__a:hover{ transform:translateY(-6px); }
  .bcard__a:hover img{ transform:scale(1.05); }
  .bcard__a:hover .bcard__r{ background-size:100% 1.5px; }
}

/* slika: odnos stranica se zadaje OKVIRU, slika ga puni. Ako se odnos da
   slici, a okviru height:auto, slika popuni samo deo okvira i ostatak
   ostane prazan. */
/* flex:1 uz aspect-ratio: odnos 3/2 je POLAZNA visina, a ako je kartica u
   redu viša od svog sadržaja (red se ravna po najvišoj kartici), višak
   uzima slika umesto da ostane prazan krem pojas ispod „Pročitaj". */
.bcard__f{ position:relative; overflow:hidden; aspect-ratio:3 / 2; flex:1 1 auto;
  background:var(--cream-2); }
.bcard__f img{ width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease); }
/* traka u boji sorte o kojoj beleška govori. Stoji UNUTAR zakošenja, na
   šavu slike i teksta; ranije je bila na neisečenom <article> pa je
   virila iz odsečenog gornjeg ugla kao odvojena crta u vazduhu. */
.bcard__f::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:var(--bagrem);
}
.bcard[data-tone="livada"] .bcard__f::after{ background:var(--livada); }
.bcard[data-tone="suma"]   .bcard__f::after{ background:var(--suma); }
.bcard[data-tone="lipa"]   .bcard__f::after{ background:var(--lipa); }
.bcard[data-tone="vresak"] .bcard__f::after{ background:var(--vresak); }

/* redni broj u uglu slike. Gornji LEVI i donji DESNI ugao su odsečeni,
   pa broj ide gore desno, gde ga zakošenje ne seče napola. */
.bcard__n{
  position:absolute; z-index:2; top:0; right:0;
  font-family:"Space Grotesk",monospace; font-size:.68rem; letter-spacing:.18em;
  color:var(--paper); background:var(--ink); padding:.5em .9em; line-height:1;
}

.bcard__t{
  display:flex; flex-direction:column; flex:1;
  padding:clamp(1.15rem,2.4vw,1.6rem) clamp(1.15rem,2.4vw,1.6rem) clamp(1.25rem,2.6vw,1.7rem);
}
.bcard__d{
  font-family:"Space Grotesk",monospace; font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:.5rem;
}
/* min-height od dva reda: naslovi su jedan ili dva reda, pa bi bez toga
   opis i „Pročitaj" u istom redu kartica krenuli sa različitih visina. */
.bcard__h{
  font-family:"DjFix","Fraunces",serif; font-weight:500; letter-spacing:-.025em;
  font-size:clamp(1.25rem,2.4vw,1.5rem); line-height:1.14; margin:0 0 .5rem;
  text-wrap:balance; min-height:2.28em;
}
/* Opisi nisu iste dužine. Bez ovoga se dno kartice (link „Pročitaj")
   pomera od kartice do kartice i red izgleda nepodešeno. */
.bcard__p{
  color:var(--ink-2); font-size:.95rem; line-height:1.6; margin:0 0 1.1rem; max-width:54ch;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
}
.bcard__r{ margin-top:auto; align-self:start; font-size:.92rem; color:var(--propolis); }

/* ---------- prva, široka kartica ---------- */
@media (min-width:680px){
  .bcard--lead .bcard__a{ flex-direction:row; align-items:stretch; }
  /* slika drži levu polovinu i prati visinu teksta, bez zadatog odnosa stranica */
  .bcard--lead .bcard__f{ aspect-ratio:auto; flex:0 0 46%; min-height:clamp(300px,32vw,430px); }
  .bcard--lead .bcard__h{ min-height:0; }
  .bcard--lead .bcard__f::after{ left:auto; top:0; width:4px; height:auto; }
  .bcard--lead .bcard__t{ justify-content:center;
    padding:clamp(1.6rem,3.4vw,2.8rem) clamp(1.6rem,3.4vw,2.8rem); }
  .bcard--lead .bcard__h{ font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.05; margin-bottom:.6rem; }
  .bcard--lead .bcard__p{ font-size:1.02rem; -webkit-line-clamp:5; }
  .bcard--lead .bcard__r{ margin-top:.4rem; }
}

/* ---------- pojedinačna beleška ----------
   LANDMINE: .nav je position:fixed i visok var(--nav-h). Bez tog sabirka
   u gornjem odstojanju naslov beleške ulazi POD zaglavlje i strana izgleda
   pokvareno. Sve ostale strane to imaju kroz .ihero/.khero; beleške su
   svoja sekcija, pa moraju same. */
.bpost__head{ padding:calc(var(--nav-h) + clamp(2rem,6vw,4rem)) 0 clamp(1.5rem,4vw,2.5rem); }
.bpost__h1{
  font-family:"Fraunces",serif; font-weight:500; letter-spacing:-.035em;
  font-size:clamp(2.1rem,6.4vw,4.4rem); line-height:1.02; margin:.4em 0 .35em;
  max-width:20ch;
}
.bpost__h1 em{ font-style:italic; color:var(--propolis); }
.bpost__lede{ max-width:56ch; }
.bpost__meta{
  font-family:"Space Grotesk",monospace; font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); display:flex; gap:.8rem;
  align-items:center; margin-top:1.6rem; flex-wrap:wrap;
}
.bpost__fig{ margin:0 0 clamp(2rem,6vw,4rem); }
.bpost__fig img{ width:100%; height:auto; display:block; }

/* mera reda: tekst se čita, zato ne ide preko 68 znakova */
.bprose{ max-width:68ch; padding-bottom:clamp(2rem,6vw,4rem); }
.bprose > * + *{ margin-top:1.15em; }
.bprose p{ font-size:1.08rem; line-height:1.72; color:var(--ink-2); }
.bprose h2{
  font-family:"Fraunces",serif; font-weight:500; letter-spacing:-.025em;
  font-size:clamp(1.6rem,4.2vw,2.5rem); line-height:1.08; color:var(--ink);
  margin-top:2.2em; margin-bottom:.1em;
}
.bprose h3{
  font-family:"Fraunces",serif; font-weight:500; letter-spacing:-.02em;
  font-size:clamp(1.2rem,3vw,1.55rem); line-height:1.15; color:var(--ink);
  margin-top:1.8em; margin-bottom:.1em;
}
.bprose h2 em, .bprose h3 em{ font-style:italic; color:var(--propolis); }
.bprose strong{ color:var(--ink); font-weight:600; }
.bprose ul, .bprose ol{ padding-left:1.3em; color:var(--ink-2); }
.bprose li{ margin:.45em 0; line-height:1.65; }
.bprose ul{ list-style:none; padding-left:0; }
.bprose ul li{ position:relative; padding-left:1.6em; }
.bprose ul li::before{
  content:""; position:absolute; left:0; top:.62em; width:9px; height:10px;
  background:var(--propolis); clip-path:var(--hex);
}
.bprose a{ color:var(--propolis); font-weight:600; }

/* izdvojena tvrdnja unutar teksta */
.bprose .pull{
  font-family:"Fraunces",serif; font-size:clamp(1.35rem,3.4vw,1.9rem);
  line-height:1.22; letter-spacing:-.02em; color:var(--ink);
  border-left:3px solid var(--propolis); padding:.2em 0 .2em 1em;
  margin:2em 0; max-width:none;
}
/* mala tabela u tekstu (npr. kad koja sorta kristališe) */
.bprose .btab{ width:100%; border-collapse:collapse; font-size:.98rem; margin:1.6em 0; }
.bprose .btab th, .bprose .btab td{
  text-align:left; padding:.68rem .7rem; border-bottom:1px solid rgba(42,24,12,.14);
  color:var(--ink-2);
}
.bprose .btab th{
  font-family:"Space Grotesk",monospace; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); border-bottom-color:rgba(42,24,12,.3);
}
.bprose .btab td:first-child{ color:var(--ink); font-weight:600; }

/* poziv na kraju beleške */
.bcta{ background:var(--cream-2); padding:clamp(2.4rem,6vw,4rem) 0; }
.bcta__in{ display:flex; gap:1.5rem; align-items:center; justify-content:space-between;
  flex-wrap:wrap; }
.bcta__t{
  font-family:"Fraunces",serif; font-style:italic; font-size:clamp(1.3rem,3.4vw,2rem);
  line-height:1.15; margin:0; color:var(--ink); max-width:22ch;
}
.bcta__t em{ font-style:normal; color:var(--propolis); }

/* ============================================================
   NOVE STRANE: dostava, cenovnik, pitanja
   Samostalne klase, bez naslanjanja na roditeljske sekcije drugih
   strana. Ranije preuzimanje tudjih klasa (.cost je crvena sekcija,
   .prow ocekuje --tone sa roditelja) davalo je nevidljiv tekst.
   ============================================================ */

/* ---------- blok cinjenica: naziv levo, vrednost desno ---------- */
.facts{ padding:clamp(3.5rem,9vw,7rem) 0; }
.facts--alt{ background:var(--cream-2); }
.facts__l{ list-style:none; margin:clamp(1.6rem,4vw,2.6rem) 0 0; padding:0;
  display:grid; gap:.1rem; max-width:52rem; }
.facts__l li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.2rem;
  padding:.95rem .2rem; border-bottom:1px solid rgba(42,24,12,.14);
}
.facts__l li:first-child{ border-top:1px solid rgba(42,24,12,.3); }
.facts__l span{ color:var(--ink-2); font-size:1rem; }
/* Vrednost je ranije bila `white-space:nowrap`, jer su u ovoj listi stajale
   samo kratke stvari („1.490 RSD", „cela Srbija"). Kad je 2026-08-13 u nju
   ušlo pravilo o trošku dostave, rečenica od pet reči nije imala gde da se
   prelomi i izlazila je van ekrana na telefonu. Prelom je sada dozvoljen, a
   nowrap je spušten na `.num` — jedino mesto gde je i bio potreban, da se
   iznos ne rascepi na „1.490" i „RSD" u dva reda. */
.facts__l em{
  font-style:normal; font-weight:600; color:var(--ink); text-align:right;
  font-variant-numeric:tabular-nums; min-width:0;
}
.facts__l em .num{ white-space:nowrap; }
/* Na uskom ekranu natpis i vrednost jedno pored drugog ostavljaju vrednosti
   trećinu širine. Ispod 560 px idu jedno ispod drugog, ulevo. */
@media (max-width:560px){
  .facts__l li{ display:grid; gap:.15rem; align-items:start; }
  .facts__l em{ text-align:left; }
}
.facts__n{ max-width:56ch; margin-top:1.6rem; color:var(--ink-2); font-size:1rem; line-height:1.65; }

/* ---------- gde stize: grad + rok ---------- */
.reach{ padding:clamp(3.5rem,9vw,7rem) 0; background:var(--cream-2); }
.reach__l{ list-style:none; margin:clamp(1.8rem,4vw,2.8rem) 0 0; padding:0; display:grid; gap:.1rem; }
.reach__l li{
  display:grid; gap:.25rem; padding:1.1rem .2rem;
  border-bottom:1px solid rgba(42,24,12,.14);
}
.reach__l li:first-child{ border-top:1px solid rgba(42,24,12,.3); }
.reach__l b{
  font-family:"DjFix","Fraunces",serif; font-weight:500; font-size:1.2rem;
  letter-spacing:-.01em; color:var(--ink);
}
.reach__l span{ color:var(--ink-2); font-size:1rem; line-height:1.55; max-width:62ch; }
@media (min-width:760px){
  .reach__l li{ grid-template-columns:minmax(0,.34fr) minmax(0,1fr); gap:1.5rem; align-items:baseline; }
}

/* ---------- cenovnik ---------- */
/* ---------- REŠETKA ARTIKALA (saće, propolis) ----------
   Strane sorti nose po jedan cenovnik u heroju. Saće i propolis nose više
   artikala odjednom (saće i poklopci, sprej i kapi), pa im treba rešetka
   kartica. Kartica je ista .mbuy koja stoji na stranama sorti, bez
   ograničenja širine i sa cenama poravnatim na dno, da kartice sa naslovom
   u dva reda ne bi razvukle red. */
.pgrid{ list-style:none; margin:clamp(1.8rem,4vw,2.8rem) 0 0; padding:0;
  display:grid; gap:clamp(1rem,2.4vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.pgrid .mbuy{ max-width:none; min-height:0; display:flex; flex-direction:column; }
.pgrid .mbuy__rows{ margin-top:auto; border-top:1px solid rgba(42,24,12,.12); }
.pcard__h{ padding:1.1rem 1.1rem 1rem; }
.pcard__h b{ display:block; font-family:"DjFix","Fraunces",serif;
  font-size:1.1rem; font-weight:600; line-height:1.24; }
.pcard__h span{ display:block; margin-top:.45rem;
  font-family:"Space Grotesk",monospace; font-size:.68rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-2); }
.pgrid .mbuy__rows li:last-child{ border-bottom:0; }
/* kartica bez cenovnika, samo natpis i link — podnožje ide na dno da bi
   naslov u dva reda ostao poravnat sa onim u jednom */
.pgrid .mbuy--link .mbuy__foot{ margin-top:auto; }
.pgrid .mbuy__foot{ border-top:1px solid rgba(42,24,12,.12); }

.ptab{ padding:clamp(3.5rem,9vw,7rem) 0; }
.ptab__l{ list-style:none; margin:clamp(1.8rem,4vw,2.8rem) 0 0; padding:0; display:grid; gap:.7rem; }

/* --- saće, poklopci i propolis: ista kremasta kartica kao tegle ---
   Do 2026-08-18 su to bile pune ploče u boji sorte sa isečenim uglom, isto
   kao tegle pre preloma. Vlasnik je za cenovnik rekao „izgleda kao skam",
   a merenje je dodalo i tvrd razlog: #eed2c0 na propolis-crvenoj #b23a1b
   daje kontrast 4,15, ispod praga WCAG AA (Lighthouse pristupačnost 96).
   Sada je boja sorte samo traka sa strane, a cene stoje u kremastim
   ćelijama, isto kao u tabeli tegli. */
.ptab__l:not(.ptab__l--tegle){ gap:clamp(.8rem,2vw,1.1rem); }
.ptab__l:not(.ptab__l--tegle) .pitem{
  position:relative; background:var(--paper,#fff); color:var(--ink);
  border:1px solid rgba(42,24,12,.14);
  display:grid; gap:.9rem; padding:clamp(1rem,2.4vw,1.4rem);
  padding-left:calc(clamp(1rem,2.4vw,1.4rem) + 6px);
}
.ptab__l:not(.ptab__l--tegle) .pitem::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:var(--tone,var(--bagrem));
}
.pitem__h b{
  display:block; font-family:"DjFix","Fraunces",serif; font-weight:500;
  font-size:clamp(1.3rem,3.2vw,1.75rem); letter-spacing:-.02em; margin-bottom:.2rem;
}
.pitem__m{
  font-family:"Space Grotesk",monospace; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.pitem__p{
  display:flex; flex-direction:column; gap:.15rem;
  padding:.6rem .7rem; background:var(--cream-2); border-radius:2px;
}
.pitem__p > span{
  font-family:"Space Grotesk",monospace; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}
.pitem__p b{ font-weight:600; font-variant-numeric:tabular-nums; }
.pitem__p .num{ display:block; font-size:1.05rem; white-space:nowrap; }
/* evro ide tiho, da ne liči na precrtanu staru cenu */
.pitem__p .eur{ display:block; font-size:.72rem; color:var(--ink-3); white-space:nowrap; }
.pitem__f{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  flex-wrap:wrap; padding-top:.2rem;
}
.pitem__p--kg{ background:none; padding:.15rem 0 0; }
.pitem__p--kg .num{ font-size:.95rem; }
@media (max-width:819px){
  /* dve cene jedna pored druge, da kartica ne bude kula na telefonu */
  .ptab__l:not(.ptab__l--tegle) .pitem{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; }
  .ptab__l:not(.ptab__l--tegle) .pitem__h,
  .ptab__l:not(.ptab__l--tegle) .pitem__f{ grid-column:1 / -1; }
  .ptab__l:not(.ptab__l--tegle) .pitem__f{ padding-top:.35rem; }
}
@media (min-width:820px){
  .ptab__l:not(.ptab__l--tegle) .pitem{
    grid-template-columns:minmax(0,1.35fr) minmax(0,.7fr) minmax(0,.7fr) minmax(0,.8fr);
    gap:1.4rem; align-items:center; }
  .ptab__l:not(.ptab__l--tegle) .pitem__f{ justify-content:flex-end; }
}

/* ============================================================
   CENOVNIK — TEGLE (cenovnikTegle u src/cenovnik-tegle.js) 2026-08-17
   Puna ploča u boji sorte je zamenjena kremastom karticom sa trakom u
   boji sa strane. Razlog je u komentaru tog modula: narandžasta ploča sa
   isečenim uglom je izgledala kao reklamni baner, a cene u pet uskih
   kolona su se lomile na „300 / g" i „450 / RSD".
   ============================================================ */
.ptab__l--tegle{ gap:clamp(.8rem,2vw,1.1rem); }
.ptab__l--tegle .pitem{
  position:relative; background:var(--paper, #fff); color:var(--ink);
  border:1px solid rgba(42,24,12,.14);
  display:grid; gap:1rem; padding:clamp(1rem,2.4vw,1.4rem);
  padding-left:calc(clamp(1rem,2.4vw,1.4rem) + 6px);
}
/* traka u boji sorte: dovoljno da se sorte razlikuju, premalo da viče */
.ptab__l--tegle .pitem::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:var(--tone,var(--bagrem));
}
.pitem__ph{
  width:100%; aspect-ratio:1; overflow:hidden; background:var(--cream-2);
  border-radius:2px;
}
.pitem__ph img{ width:100%; height:100%; object-fit:cover; display:block; }

.pitem__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem;
}
.pitem__grid li{
  display:flex; flex-direction:column; gap:.15rem;
  padding:.6rem .7rem; background:var(--cream-2); border-radius:2px;
}
.pitem__grid li > span{
  font-family:"Space Grotesk",monospace; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}
.pitem__grid b{ font-weight:600; font-variant-numeric:tabular-nums; }
.pitem__grid .num{ display:block; font-size:1.05rem; white-space:nowrap; }
/* evro ide TIHO i u istom redu misli, da ne liči na precrtanu staru cenu */
.pitem__grid .eur{
  display:block; font-size:.72rem; color:var(--ink-3); white-space:nowrap;
}
.pitem__kg{
  margin:0; display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; padding-top:.7rem; border-top:1px solid rgba(42,24,12,.12);
}
.pitem__kg > span{
  font-family:"Space Grotesk",monospace; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}
.pitem__kg b{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.pitem__kg .num{ font-size:.98rem; }

@media (min-width:860px){
  .ptab__l--tegle .pitem{
    grid-template-columns:150px minmax(0,1fr) minmax(0,1.5fr);
    grid-template-areas:
      "ph head grid"
      "ph foot kg";
    align-items:center; column-gap:1.6rem; row-gap:.7rem;
  }
  /* grid-area MORA da bude vezano za --tegle: bez toga `grid-area:head`
     hvata i .pitem__h u saću i propolisu, čije kartice nemaju imenovana
     polja, pa se ime odseli u drugu kolonu i preklopi sa podnožjem. */
  .ptab__l--tegle .pitem__ph  { grid-area:ph; }
  .ptab__l--tegle .pitem__h   { grid-area:head; align-self:end; }
  .ptab__l--tegle .pitem__grid{ grid-area:grid; align-self:end; }
  .ptab__l--tegle .pitem__kg  { grid-area:kg; align-self:start; }
  .ptab__l--tegle .pitem__f   { grid-area:foot; align-self:start; padding-top:0; }
}
@media (max-width:859px){
  /* na telefonu fotografija ide u red sa imenom, da kartica ne bude kula */
  .ptab__l--tegle .pitem{ grid-template-columns:88px minmax(0,1fr);
    grid-template-areas:"ph head" "grid grid" "kg kg" "foot foot"; align-items:center; }
  .ptab__l--tegle .pitem__ph{ grid-area:ph; }
  .ptab__l--tegle .pitem__h { grid-area:head; }
  .ptab__l--tegle .pitem__grid{ grid-area:grid; }
  .ptab__l--tegle .pitem__kg{ grid-area:kg; }
  .ptab__l--tegle .pitem__f { grid-area:foot; }
}

/* ============================================================
   TEGLE PO GRAMAŽI (jarsFor u build.js) — 2026-08-17
   Traženo da se vidi „koja je koja tegla". Slike su vlasnikove.
   Mreža ide u tri kolone od 700 px, ispod toga vodoravno klizanje,
   da se na telefonu ne dobiju tri sitne slike jedna ispod druge.

   LANDMINE: ova sekcija se ZVALA .jars/.jar i to je razbilo strane sorti.
   Klasa .jar već postoji (tri šesterougaone pločice u „Med na poklon",
   `position:absolute; width:var(--jw); clip-path:var(--hex)`), a --jw je
   definisan samo na .gift__vis. Van njega width postaje auto, pa su se sve
   tri fotografije apsolutno slagale jedna preko druge, izlazile iz sekcije
   i prekrivale tekst ispod. Ne vraćati ime .jar ovde.
   ============================================================ */
.gram{ background:var(--cream-2); padding:clamp(3rem,8vw,5.5rem) 0; }
.gram .lede{ margin-bottom:clamp(1.6rem,4vw,2.4rem); }
.gram__grid{ display:grid; gap:clamp(.9rem,2.5vw,1.6rem); }
@media (min-width:700px){ .gram__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:699px){
  /* traka koja se prevlači, sa zaustavljanjem na svakoj tegli */
  .gram__grid{ grid-auto-flow:column; grid-auto-columns:76%;
    overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut);
    scrollbar-width:none; }
  .gram__grid::-webkit-scrollbar{ display:none; }
  .gram__i{ scroll-snap-align:center; }
}
.gram__i{ margin:0; }
.gram__f{
  position:relative; aspect-ratio:1; overflow:hidden; background:var(--cream);
  clip-path:polygon(var(--cut-x) 0,100% 0,100% calc(100% - var(--cut-y)),
    calc(100% - var(--cut-x)) 100%,0 100%,0 var(--cut-y));
  transition:transform .5s var(--ease);
}
.gram__f img{ width:100%; height:100%; object-fit:cover; display:block; }
.gram__i figcaption{
  display:flex; align-items:baseline; justify-content:space-between; gap:.8rem;
  padding:.75rem .2rem 0;
  font-family:"Space Grotesk",monospace; font-size:.78rem; letter-spacing:.06em;
  text-transform:uppercase;
}
.gram__i figcaption b{ color:var(--ink); }
.gram__i figcaption span{ color:var(--ink-3); font-variant-numeric:tabular-nums; }
/* veza sa cenovnikom iznad: red i tegla se pale zajedno */
.gram__i.is-lit .gram__f{ transform:translateY(-6px); }
.gram__i.is-lit figcaption b{ color:var(--propolis); }
.mbuy__rows li.is-lit{ background:rgba(42,24,12,.05); }

/* ---------- /medovi/sace/: slika uz uvod i tegla na kartici ----------
   Vlasnik je 2026-08-19 tražio veliku sliku desno od uvoda i po jednu teglu
   na karticama saća. .ihero je do tada bio samo kolona teksta, pa se dvokolonski
   raspored pali klasom .ihero--fig i ne dira ostale strane sa istim herojem.
   Imena .ihero__grid / .ihero__t / .ihero__f / .mbuy__img su pre uvođenja
   proverena da su slobodna u sva tri CSS fajla. */
.ihero--fig .ihero__grid{ display:grid; gap:clamp(1.6rem,4vw,3rem);
  grid-template-columns:minmax(0,1fr); align-items:center; }
.ihero__f{ margin:0; }
.ihero__f img{ display:block; width:100%; height:auto; }
@media (min-width:900px){
  .ihero--fig .ihero__grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
}
/* fotografija na vrhu kartice saća; visina je fiksna da se dve kartice
   poravnaju i kad se naslov prelomi u dva reda */
.mbuy__img{ margin:0; }
/* uspravan kadar 3:4 — tegla je uspravna, pa je u niskom pojasu ostajala samo
   sredina bez poklopca i daske */
.mbuy__img img{ display:block; width:100%; aspect-ratio:3/4; height:auto;
  object-fit:cover; }

/* ===== css/mobile.css ===== */
/* ============================================================
   RADONJIĆ MED — MOBILNI SLOJ
   Sopstvena tipografska skala i razmaci, ne smanjeni desktop.
   Referenca 390 px; provereno i na 360 i na 430.
   Učitava se POSLE style.css i pages.css.
   ============================================================ */

@media (max-width: 760px) {

  /* ---------- 0. bez uvodnog ekrana ----------
     Odluka pada u CSS-u, pre ijednog iscrtavanja, a ne u JS-u posle
     GSAP-a: na telefonu je uvod bio kremasti prekrivač koji stoji dok
     ne stigne GSAP sa jsDelivr-a. Na Slow 4G to je bilo oko 1,3 s
     praznog ekrana pre nego što se ijedno slovo pojavi.
     js/main.js zna isti prag (var MALI) i preskače ulaznu animaciju,
     pa se sadržaj crta odmah. Na desktopu uvod ostaje netaknut. */
  .loader{ display:none !important; }

  /* ---------- 1. tipografija za mali ekran ---------- */
  :root{
    --gut: 20px;
    --cut-x: 16px;
    --cut-y: 28px;
  }
  body{ font-size:1.02rem; line-height:1.6; }

  /* naslovi dobijaju svoje veličine i svoje prelome, ne skalirani desktop */
  /* .92 je prolazilo za dlaku (granica je .90 zbog kvačice na Č — vidi
     style.css), pa je kvačica praktično dodirivala red iznad. */
  .hero__h1{ font-size:clamp(3rem, 15.5vw, 4.2rem); line-height:.95; letter-spacing:-.035em; }
  .h2, .ihero__h1, .phero__h1, .mhero__h1, .ghero__h1, .whero__h1,
  .khero__h1, .fhero__h1, .nhero__h1, .e404__h1{
    font-size:clamp(1.85rem, 8.4vw, 2.6rem); line-height:1.06; letter-spacing:-.03em;
  }
  .h3, .hslab__h{ font-size:clamp(1.35rem, 6vw, 1.9rem); line-height:1.12; }
  .lede{ font-size:1.02rem; line-height:1.58; max-width:34ch; }
  .eyebrow{ font-size:.68rem; letter-spacing:.14em; margin-bottom:1rem; }
  p{ overflow-wrap:break-word; }
  /* duge složenice u ru/en ne smeju da probiju kutiju */
  h1, h2, h3, .hslab__h, .next__t, .kway__v{ overflow-wrap:break-word; hyphens:auto; }

  /* ---------- 2. razmaci ---------- */
  section{ scroll-margin-top:calc(var(--nav-h) + 8px); }
  .index, .five, .howto, .mosaic, .figures, .toy, .where, .flora, .work,
  .cost, .why, .builder, .corp, .when, .market, .order-sec, .faq, .story,
  .note, .mship, .mstory, .wfor, .calc, .family, .gteaser, .social{
    padding-top:clamp(2.6rem, 9vw, 3.6rem);
    padding-bottom:clamp(2.6rem, 9vw, 3.6rem);
  }

  /* ---------- 3. sticky buy bar nikad ne pokriva kraj sekcije ----------
     Rezerva za traku je ranije stajala kao `body{padding-bottom:64px}`. Telo
     je kremasto a podnožje tamno, pa je ta rezerva bila svetla traka ISPOD
     podnožja, na dnu svake strane, i onda kad trake za kupovinu uopšte nema.
     Traka se diže tek na stranama sorti i tek kad se doskroluje do cene, pa
     je na ostalim stranama to bio prazan svetao rub bez ikakvog razloga.
     Rezervu sada nosi podnožje, koje je iste boje kao i ono iznad nje, i to
     samo dok je traka stvarno podignuta. */
  .buybar{
    padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));
    gap:.6rem;
  }
  .buybar__name{ font-size:.95rem; }
  .buybar__price{ font-size:.9rem; }
  .buybar .btn{ min-height:44px; }
  .foot{ padding-bottom:calc(3rem + env(safe-area-inset-bottom)); }
  body:has(#buybar.is-on) .foot{
    padding-bottom:calc(3rem + 64px + env(safe-area-inset-bottom));
  }

  /* ---------- 4. dodirne mete >= 44 px ---------- */
  .burger{ width:44px; height:44px; }
  .nav__brand{ min-height:44px; }
  .btn{ min-height:48px; padding:1em 1.5em; }
  .btn--sm{ min-height:44px; padding:.8em 1.2em; }
  .acc__b{ min-height:52px; padding:1.1rem 0; }
  .idx{ min-height:60px; }
  .foot__col nav a, .navpanel__nav a{ min-height:44px; display:flex; align-items:center; }
  .direct__list li, .ord__list li{ min-height:40px; }
  .tcell{ min-width:44px; }
  /* dugmad su ovde 44 px, pa je i rezervisano mesto veće (vidi pages.css) */
  .qty{ min-width:100px; min-height:44px; }
  .link{ display:inline-block; padding-block:.35em; }

  /* ---------- 5. hero ---------- */
  .hero{ min-height:auto; padding:calc(var(--nav-h) + 1.5rem) 0 2.5rem; }
  .hero__inner{ gap:1.25rem; }
  .hero__fig .hexframe{ width:min(74vw, 300px); }
  .hero__promise{ font-size:1rem; max-width:34ch; }
  .hero__cta{ gap:.9rem; }
  .hero__cta .btn{ width:100%; }

  /* ---------- 6. planina: silueta i mapa ---------- */
  /* padding-bottom:0 je sekao repove slova poslednjeg reda traka sa stanicama */
  .phero{ min-height:auto; padding-bottom:2rem; }
  .ridge{ margin-top:-1.5rem; }
  .rmark{ transform:scale(1.9); }
  .ridge__peak text{ font-size:26px; }
  .ridge__line{ stroke-width:4; }
  .mtn{ padding-top:2.5rem; }
  .mtn__sites{ gap:1.2rem 1rem; }
  .mtn__sites li{ padding:.8rem 0 0; }
  .mtn__sites span{ font-size:1.05rem; }
  .map__nm{ font-size:19px; }
  .map__alt{ font-size:14px; }
  .map__lab, .map__dist text, .map__peak text, .map__scale text{ font-size:15px; }
  .map__vil text{ font-size:20px; }

  /* skruber: horizontalno, veliki palac */
  .scrub{ gap:1.5rem; }
  .scrub__range{ height:52px; }
  .scrub__range::-webkit-slider-thumb{ width:44px; height:50px; margin-top:-21px; }
  .scrub__range::-moz-range-thumb{ width:44px; height:50px; }
  .scrub__big{ font-size:clamp(2.6rem,14vw,3.6rem); }
  .scrub__dl > div{ grid-template-columns:6.5rem 1fr; gap:.7rem; }

  /* ---------- 7. horizontalne trake: snap + virenje sledeće + momentum ---------- */
  .coll__viewport, .year__vp{
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--gut);
    /* poslednja kartica ne sme da se zalepi za ivicu */
    padding-right:calc(var(--gut) + 2.5rem);
  }
  .mon, .cell{
    scroll-snap-align:start;
    /* sledeća kartica viri ~18% da se vidi da ima još */
    width:clamp(230px, 78vw, 300px);
  }
  .year::after{ width:36px; }
  .year__prog{ margin-top:1.1rem; }
  .year__prog i{ height:4px; }

  /* ---------- 8. saće: manje ćelija, veće ćelije ---------- */
  .comb--toy{ margin-inline:auto; }
  .tcell__in{ font-size:.72rem; }
  .toy__grid{ gap:1.8rem; }

  /* ---------- 9. mreže se slažu ---------- */
  .index__grid, .five__grid, .howto__grid, .mstory__grid, .work__grid,
  .why__grid, .corp__grid, .market__grid, .ord__grid, .builder__grid,
  .gwhat__grid, .wfor__grid, .calc__grid, .taste__in, .mship__grid,
  .story__grid, .note__grid, .faq__grid, .gteaser__in, .ghero__grid,
  .whero__grid, .nhero__in{ grid-template-columns:1fr; }
  .five__grid{ grid-template-columns:repeat(2,1fr); gap:.5rem; }
  .fcard a{ min-height:170px; padding:1rem .9rem; }
  .fcard h3{ font-size:1.35rem; }
  .counts{ grid-template-columns:repeat(2,1fr); gap:1.5rem 1rem; }
  .count__v{ font-size:clamp(2.4rem,13vw,3.4rem); }
  .cost__row{ grid-template-columns:repeat(2,1fr); gap:1.4rem; }
  .kways{ grid-template-columns:1fr; }
  .flora__grid{ grid-template-columns:1fr; }
  .folks{ grid-template-columns:repeat(2,1fr); }
  .folk:nth-child(even){ margin-top:0; }
  .band{ grid-template-columns:repeat(2,1fr); }
  .mship__grid{ gap:1.6rem; }

  /* ---------- 10. strana sorte ---------- */
  .mhero{ padding-top:calc(var(--nav-h) + .5rem); }
  .mhero__txt{ padding:1.6rem var(--gut) 2rem; }
  .mhero__idx b{ font-size:2.4rem; }
  .mhero__fig{ padding:0 var(--gut) 2rem; }
  .mhero__frame{ aspect-ratio:4/3; }
  .mhero__chip{ display:none; }
  .mbuy{ max-width:none; }
  .mbuy__foot{ flex-wrap:wrap; gap:.7rem; }
  .mbuy__foot .btn{ flex:1 1 auto; }

  /* ---------- 11. kontakt ---------- */
  .kway a{ padding:1.1rem; }
  .kway__v{ font-size:1.15rem; }
  .order{ padding:1.4rem var(--gut); }
  .field input, .field textarea{ font-size:16px; } /* iOS ne zumira na 16px */
  .wait__form input{ font-size:16px; }
  .seg{ flex-wrap:wrap; }
  .seg__b, .gsize__b{ min-height:44px; }        /* prst, ne pokazivač */
  .gpick__row{ grid-template-columns:minmax(0,1fr); }
  .gpick__price{ font-size:1.05rem; }

  /* ---------- 12. poklon ---------- */
  .triad{ --jw:min(34vw,124px); }
  .triad__j b{ font-size:.72rem; }
  .triad__j i{ font-size:.55rem; }
  .builder__pick{ grid-template-columns:repeat(2,1fr); }
  .builder__pick button{ min-height:88px; }

  /* ---------- 13. podnožje ---------- */
  .foot__grid{ grid-template-columns:1fr 1fr; gap:1.6rem 1rem; }
  /* Spisak strana ima 16 stavki, a na telefonu svaka nosi min-height 44 px
     (dodirna meta), pa je u jednom stupcu bio 704 px visok i sve to vreme je
     leva polovina podnožja stajala prazna pored njega. Ide preko oba stupca i
     lomi se u dve kolone: osam redova umesto šesnaest. `minmax(0,1fr)` je tu
     da „Privatnost" ne razvuče svoju kolonu. */
  .foot__col:has(nav){ grid-column:1 / -1; }
  .foot__col nav{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:1rem; }
  .refrain--outline{ font-size:clamp(2rem,11vw,3rem); }
  .foot__base{ flex-direction:column; align-items:flex-start; gap:.5rem; }

  /* ---------- 14. korpa ---------- */
  .navkorpa svg{ width:23px; height:23px; }
  .qty__b{ width:44px; height:44px; }
  .mbuy__rows li{ grid-template-columns:auto 1fr auto; }
  .kgrid{ grid-template-columns:1fr; }
  /* račun ide ISPOD spiska na telefonu, ne lepi se */
  .ksum{ position:static; }
  /* red korpe: naziv gore preko cele širine, kontrole ispod */
  .kli{ grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"dot ime x" ". qty cena"; gap:.5rem .7rem; padding:.9rem 1rem; }
  .kli__dot{ grid-area:dot; }
  .kli__t{ grid-area:ime; }
  .kli .qty{ grid-area:qty; justify-self:start; }
  .kli__c{ grid-area:cena; }
  .kli__x{ grid-area:x; width:40px; height:40px; opacity:.55; }
  .korder__l li{ grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"i ime cena" ". kol kol"; gap:.25rem .7rem; }
  .korder__l i{ grid-area:i; }
  .korder__l span{ grid-area:ime; }
  .korder__c{ grid-area:cena; }
  .korder__q{ grid-area:kol; }
  .ktoast{ bottom:calc(74px + env(safe-area-inset-bottom)); font-size:.7rem; }

  /* ---------- 15. unutar saća: ne pinujemo na telefonu ---------- */
  .inside__pin{ height:auto; padding:3.5rem 0; }
  .inside__comb{ opacity:.35; }
  .refrain--xl{ font-size:clamp(2.4rem,13vw,3.6rem); }
}

/* ---------- vrlo uski telefoni (360) ---------- */
@media (max-width: 380px) {
  :root{ --gut:16px; }
  .hero__h1{ font-size:14.5vw; }
  .five__grid{ grid-template-columns:1fr; }
  .counts{ grid-template-columns:1fr; }
  .cost__row{ grid-template-columns:1fr; }
  .folks{ grid-template-columns:1fr; }
  .builder__pick{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr; }
  .band{ grid-template-columns:1fr; }
}

/* ---------- veći telefoni (430) ---------- */
@media (min-width: 400px) and (max-width: 760px) {
  .hero__fig .hexframe{ width:min(68vw, 320px); }
  .five__grid{ gap:.6rem; }
}

/* ============================================================
   16. MOBILNO: čitljivost i dodir
   Nalazi iz revizije na 360/390/430 — svaka stavka je izmerena,
   ne procenjena.
   ============================================================ */
@media (max-width: 760px) {

  /* --- zaglavlje mora da stane sa korpom u njemu --- */
  .nav{ gap:.5rem; }
  .navkorpa{ min-width:44px; min-height:44px; justify-content:center; padding:0; }
  .burger{ margin-left:0; }

  /* --- dodirne mete --- */
  .foot__a{ display:inline-block; padding-block:.45rem; }
  .link{ padding-block:.55em; }
  .field--check{ min-height:44px; align-items:center; }
  .field--check input{ width:24px; height:24px; flex:none; }
  .korder__h a{ padding:.5rem 0 .5rem .8rem; }
  .kli__x{ width:44px; height:44px; }

  /* --- najmanja slova: mono natpisi ispod 11 px se ne čitaju --- */
  .eur{ font-size:.74rem; }
  .next__k, .fcard__m, .kway__k, .ksum__t, .ksum__free, .card__l, .card__y,
  .taste__cols dt, .mhero__strip li, .korder__q, .korder__l em, .kli__t i,
  .ord__list li, .mbuy__rows span, .count__k, .tt__row em, .foot__trust li,
  .ksum__fine, .qty__n, .scrub__dl dt{ font-size:.76rem; }
  .triad{ --jw:min(38vw,140px); }
  .triad__j b{ font-size:.74rem; }
  .triad__j i{ font-size:.66rem; }
}

/* na uskim telefonima natpis uz znak nema gde — ostaje samo pčela */
@media (max-width: 560px) {
  .nav__word{ display:none; }
}

/* poslednji sloj: mono mikronatpisi koji su ostali ispod 11,4 px */
@media (max-width: 760px) {
  .tt__axis span{ font-size:.72rem; }
  .triad__j i{ font-size:.72rem; }
  .fband__l li span, .fband__h span{ font-size:.74rem; }
  .builder__pick button span, .builder__pick button .num,
  .builder__sum span{ font-size:.74rem; }
  .ord__card b, .mship__c b,
  .korder__h b, .korder__t span, .korder__d span{ font-size:.75rem; }
  .navkorpa b, .navpanel__n, .tag, .bar__s,
  .cost__c span, .calc__tot span, .calc__per span, .calc__tot .eur,
  .ksum__tot span, .foot__col > b, .hslab__meta li{ font-size:.75rem; }
}

@media (max-width: 760px){ .link{ padding-block:.7em; } }

@media (max-width: 760px){ .loader__since{ font-size:.74rem; letter-spacing:.28em; } }

/* ===== css/pristanak.css ===== */
/* ============================================================
   TRAKA PRISTANKA (js/pristanak.js)
   ------------------------------------------------------------
   Sedi na dnu, iznad kupovne trake. `.buybar` je takođe fixed na dnu i
   na telefonu ide preko cele širine, pa bi se dve trake preklopile;
   zato `js/pristanak.js` stavlja `pristanak-vidljiv` na <html> i dok
   pitanje stoji, kupovna traka se drži dole.

   Dugmad „Prihvatam" i „Odbijam" su ISTE veličine (`btn--sm` na oba) i
   na istoj udaljenosti. Razlikuju se samo bojom. Odbijanje koje je
   sitnije ili skrivenije je dark pattern i pristanak dobijen tako po
   EU pravilima ne važi — ne menjati u „samo malo istaknutije".
   ============================================================ */
.pristanak{
  position:fixed; left:0; right:0; bottom:0; z-index:1000;
  background:var(--cream);
  border-top:1px solid rgba(42,24,12,.18);
  box-shadow:0 -10px 30px rgba(42,24,12,.10);
  padding:1rem var(--gut) calc(1rem + env(safe-area-inset-bottom));
  animation:pristanak-ulaz .45s var(--ease) both;
}
@keyframes pristanak-ulaz{ from{ transform:translateY(100%); } to{ transform:none; } }

.pristanak__in{
  max-width:var(--maxw, 1240px); margin:0 auto;
  display:grid; gap:.9rem;
}
.pristanak__t{
  margin:0; font-size:.94rem; line-height:1.5; color:var(--ink-2); max-width:78ch;
}
.pristanak__b{ display:flex; flex-wrap:wrap; gap:.7rem; }
.pristanak__b .btn{ flex:1 1 auto; min-height:44px; }

/* Odbijanje: ista veličina i isti razmak, samo mirnija boja.
   NE koristiti `box-shadow: inset` kao okvir: `.btn` ima clip-path sa dva
   odsečena ugla, pa se okvir na tim mestima preseče i dugme izgleda
   nedovršeno. Popunjena površina prati oblik. */
.pristanak__ne{
  --btn-bg:var(--cream-2); --btn-fg:var(--ink); --btn-fill:var(--cream);
}

@media (min-width:760px){
  .pristanak__in{
    grid-template-columns:1fr auto; align-items:center; gap:1.6rem;
  }
  .pristanak__b .btn{ flex:0 0 auto; min-width:9.5rem; }
}

/* Dok se pitanje ne odgovori, kupovna traka ostaje spuštena. */
.pristanak-vidljiv .buybar{ transform:translateY(calc(100% + 4rem)) !important; }

@media (prefers-reduced-motion: reduce){
  .pristanak{ animation:none; }
}