/* ============================================================
   đ / Đ — 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;
  --ink-3:    #937257;

  /* 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%; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
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);
  line-height:.88;
  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;
}
.eyebrow--light{ color:rgba(246,235,214,.72); }

/* ---------- 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); }
.navpanel{
  position:fixed; inset:0; z-index:880;
  background:var(--cream);
  padding:calc(var(--nav-h) + 2rem) var(--gut) 3rem;
  display:flex; flex-direction:column; justify-content:center; gap:2.5rem;
  opacity:0; transition:opacity .45s var(--ease);
}
.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; }

.nav__links{ display:none; gap:1.6rem; font-size:.95rem; font-weight:500; }
.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:.92; 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;
  font-family:"Space Grotesk",monospace; font-size:.68rem; letter-spacing:.03em; line-height:1.15;
  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); }
.acc__i h3{ margin:0; }
.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; } }
@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; }