/* ================================================
   AZEL FRANCE — World-Class Stylesheet (Light)
   Purple #3B2D8F  ·  Green #72C02C
================================================ */

/* ─── SELF-HOSTED VARIABLE FONTS ─── */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('./assets/fonts/CormorantGaramond-Roman-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('./assets/fonts/CormorantGaramond-Roman-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url('./assets/fonts/CormorantGaramond-Italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url('./assets/fonts/CormorantGaramond-Italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans je ranije stajao ovdje sa četiri @font-face pravila, a nijedan
   selektor ga nije koristio — nijedan browser ga zato nikad nije ni skinuo.
   Uklonjen zajedno sa fajlovima da ne zavarava pri sljedećem čitanju. */

/* ─── FRUTIGER ───
   woff2, skraćen na slova koja sajt koristi (latinica sa našim slovima,
   interpunkcija, strelice i kvačice). Iz .ttf fajlova od ~56 KB time ostane
   ~15 KB po rezu, uz isti izgled. Emoji nisu u fontu ni prije ni sada — njih
   ionako crta sistem. Ako se ikad doda jezik sa drugim pismom, fontovi se
   moraju ponovo izrezati sa proširenim opsegom. */
@font-face { font-family: 'Frutiger'; font-style: normal; font-weight: 300; font-display: swap; src: url('./assets/fonts/Frutiger-300.woff2') format('woff2'); }
@font-face { font-family: 'Frutiger'; font-style: italic; font-weight: 300; font-display: swap; src: url('./assets/fonts/Frutiger-300-Italic.woff2') format('woff2'); }
@font-face { font-family: 'Frutiger'; font-style: normal; font-weight: 400; font-display: swap; src: url('./assets/fonts/Frutiger-400.woff2') format('woff2'); }
@font-face { font-family: 'Frutiger'; font-style: italic; font-weight: 400; font-display: swap; src: url('./assets/fonts/Frutiger-400-Italic.woff2') format('woff2'); }
/* Pažnja: imena fajlova ne odgovaraju rezovima koji su u njima.
   Provjereno čitanjem imena iz samih fontova:
     Frutiger-700.woff2  →  "Frutiger CE 45 Light — Bold"  (bold tankog reza)
     Frutiger-800.woff2  →  "Frutiger CE 55 Roman — Bold"  (pravi bold osnovnog)
   Osnovni tekst je Roman (Frutiger-400), pa njegov bold mora biti 800-fajl.
   Dok je 700 pokazivao na 700-fajl, svaki podebljani tekst na sajtu bio je
   bold tankog reza i djelovao je mlitavo. Zato 700 sada vodi na 800-fajl, a
   bold tankog reza je ostao dostupan na 600 ako ikad zatreba. */
@font-face { font-family: 'Frutiger'; font-style: normal; font-weight: 600; font-display: swap; src: url('./assets/fonts/Frutiger-700.woff2') format('woff2'); }
@font-face { font-family: 'Frutiger'; font-style: italic; font-weight: 600; font-display: swap; src: url('./assets/fonts/Frutiger-700-Italic.woff2') format('woff2'); }
@font-face { font-family: 'Frutiger'; font-style: normal; font-weight: 700; font-display: swap; src: url('./assets/fonts/Frutiger-800.woff2') format('woff2'); }
@font-face { font-family: 'Frutiger'; font-style: italic; font-weight: 700; font-display: swap; src: url('./assets/fonts/Frutiger-800-Italic.woff2') format('woff2'); }
@font-face { font-family: 'Frutiger'; font-style: normal; font-weight: 900; font-display: swap; src: url('./assets/fonts/Frutiger-900.woff2') format('woff2'); }

:root {
    --p:   #3B2D8F;
    --pd:  #2E2270;
    --g:   #72C02C;
    --gd:  #5A9A22;

    --bg:   #FFFFFF;
    --bg2:  #F7F6FC;
    --bg3:  #EFEDF9;
    --line: #E5E2F2;

    --w:  #FFFFFF;

    --tx:  #1A1630;
    --txm: #5C5876;
    --txl: #9B97B2;

    --ease: cubic-bezier(0.76, 0, 0.24, 1);
    --t:    all 0.6s var(--ease);
    --tf:   all 0.3s ease;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-1: 150ms;
    --dur-2: 250ms;
    --dur-3: 450ms;

    --max: 1280px;
    --vpad: 130px;

    --sp-xs: 8px;
    --sp-sm: 16px;
    --sp-md: 24px;
    --sp-lg: 40px;
    --sp-xl: 64px;
    --sp-2xl: 80px;

    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 20px;

    --sh-1: 0 2px 8px rgba(26,22,48,0.06);
    --sh-2: 0 8px 24px rgba(26,22,48,0.08);
    --sh-3: 0 16px 40px rgba(26,22,48,0.10);
    --sh-4: 0 32px 80px rgba(26,22,48,0.18);
    --sh-brand-1: 0 8px 24px rgba(59,45,143,0.10);
    --sh-brand-2: 0 24px 56px rgba(59,45,143,0.22);

    /* ── Tipografska skala ──
       Cijela stranica koristi tri veličine teksta, plus jednu za sitne
       uppercase natpise. Ranije je bilo osamnaest različitih vrijednosti,
       među njima i nekoliko koje se razlikuju za piksel-dva (64 / 60.5 /
       57.6 / 56 px za naslove, 17 / 16 / 15.8 / 15 / 14 px za tekst) — to
       se ne čita kao hijerarhija, nego kao nered.

         --fs-l    naslovi sekcija, slogan, brojevi, naslovne kartice
         --fs-m    uvodni tekst, citat, naslovi vijesti
         --fs-s    sav tekst za čitanje, linkovi, polja
         --fs-tag  sitni uppercase natpisi: nadnaslovi, navigacija,
                   dugmad, oznake uz brojeve, footer

       Nove veličine se uvode samo ako za to postoji razlog jači od
       estetskog — jedini takav trenutno su polja formulara (16px, ispod
       toga iOS sam uveća stranicu pri kucanju). */
    /* Stvarnu visinu fiksne navigacije upisuje skripta (uskladiVisinuNavigacije
       u script.js) — ovdje stoji samo vrijednost do koje se dođe prije nego
       skripta odradi. Hero traka počinje tačno ispod nje; ranije je ovdje
       stajalo fiksnih 70px, pa je navigacija prekrivala vrh slike. */
    --nav-h: 116px;

    --fs-l:   clamp(1.9rem, 4.45vw, 4rem);          /* 30.4 → 64 px */
    --fs-m:   clamp(1.0625rem, 1.45vw, 1.3125rem);  /* 17 → 21 px */
    --fs-s:   0.9375rem;                            /* 15 px */
    --fs-tag: 0.6875rem;                            /* 11 px */

    --fs-display: var(--fs-l);
    --fs-h1:      var(--fs-l);
    --fs-h2:      var(--fs-l);
    --fs-h2-sub:  var(--fs-l);
    --ls-display: -0.02em;
    --ls-h2:      -0.01em;
}

/* ─── RESET ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; font-size: 16px; }

/* Navbar je position:fixed i dvoredan (logo gore, meni ispod — vidi
   .nav-row2), visok 128px na širem od 560px, 110px uže. Kad se skoči na
   sidro (npr. /#brands sa druge stranice, ili klik na "Asortiman"), browser
   postavi vrh te sekcije na sam vrh prozora — tačno ispod navbara, koji onda
   prekrije taj dio sadržaja. Isto važi i za scrollIntoView() pozive (dugme
   "Prijavi se" na Karijeri, lista poslovnica).

   scroll-margin-top kaže browseru da pri skrolovanju na cilj ostavi toliko
   prostora iznad njega. Primijenjeno na sve elemente sa id-em jer vrijedi za
   svako buduće sidro, a nema nikakav uticaj na raspored — djeluje isključivo
   u trenutku skrolovanja na taj element. Vrijednost je izmjerena visina
   navigacije (--nav-h, upisuje je script.js) + malo zraka; ranije je bilo
   zakucanih 141px za staru dvorednu traku. */
[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }
body {
    font-family: 'Frutiger', -apple-system, BlinkMacSystemFont, sans-serif;
    font-optical-sizing: auto;
    /* Zadana veličina za sve što nema svoju — bez ovoga bi takav element
       naslijedio 16px sa <html> i ispao šesta veličina na stranici. */
    font-size: var(--fs-s);
    background: var(--bg);
    color: var(--tx);
    line-height: 1.6;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── CONTAINER ─── */
.container {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 52px;
}
@media (max-width: 640px) {
    .container { padding: 0 20px; }
}
@media (max-width: 420px) {
    .container { padding: 0 16px; }
}

/* Šira varijanta — koristi je asortiman sekcija da razbije standardnu širinu. */
.container-wide {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 52px;
}
@media (max-width: 640px) {
    .container-wide { padding: 0 20px; }
}
@media (max-width: 420px) {
    .container-wide { padding: 0 16px; }
}
img { max-width:100%; display:block; }
a   { text-decoration:none; color:inherit; cursor: pointer; }
ul  { list-style:none; }
button, [role="button"] { cursor: pointer; }

/* ─── PAGE LOADER ─── */
.loader {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loader.done { opacity: 0; visibility: hidden; }

.loader-logo img { height: 48px; width: auto; }

.loader-bar {
    width: 200px; height: 1px;
    background: var(--line);
}

.loader-fill {
    height: 100%;
    background: var(--p);
    width: 0%;
    animation: load 1.4s var(--ease) forwards;
}

@keyframes load { to { width: 100%; } }

/* ─── HELPERS ─── */
.sec-tag {
    display: block;
    font-size: var(--fs-tag);
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--p);
    margin-bottom: 20px;
}

.sec-tag.light { color: var(--p); }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-tag);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--p);
    transition: var(--tf);
}

.link-arrow span { transition: transform 0.3s ease; }
.link-arrow:hover { gap: 14px; }
.link-arrow:hover span { transform: translate(3px,-3px); }

/* ─── CLIP REVEAL (hero) ─── */
.reveal-clip {
    clip-path: inset(0 0 100% 0);
    animation: clipReveal 1s var(--ease) forwards;
    animation-delay: var(--d, 0s);
}

@keyframes clipReveal { to { clip-path: inset(0 0 0% 0); } }

/* ─── SCROLL REVEAL ─── */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    transition-delay: var(--rd, 0s);
}

.scroll-reveal.in {
    opacity: 1;
    transform: translateY(0);
}

/* ─── NAVBAR ─── */
/* Visina trake se namjerno drži nepromijenjenom otkad je logo uvećan 1.5x —
   razmak iznad i ispod loga je smanjen tačno za onoliko koliko je logo
   narastao. Ako se ikad mijenja visina loga, ovdje treba prilagoditi i
   razmak, inače traka poraste i počne prekrivati vrh sekcija pri skoku na
   sidra (vidi scroll-margin-top na početku fajla). */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9998;
    padding: 14px 0;
    transition: var(--t);
}

.navbar.solid {
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

/* ── Dvoredna traka: logo po sredini gore, meni ispod ──
   nav-inner je vertikalni flex sa dva reda: prvi red je sâm nav-logo,
   drugi je .nav-row2 (linkovi + jezik/burger zajedno, kao grupa po sredini).
   Ispod 900px .nav-links nestaje (display:none niže u fajlu), pa u .nav-row2
   ostaje samo nav-end — i dalje centriran kao svoj red, samo sad sam. */
.nav-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.nav-row2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.nav-logo { flex-shrink: 0; }

/* Logo je povećan ~30% (bilo 75 / 63px) na zahtjev iz plana redizajna.
   Visinu navigacije ispod njega skripta mjeri sama (--nav-h), pa se hero
   i stranica Poslovnice same pomjere. */
.logo-img {
    height: 96px; width: auto;
    transition: height 0.4s ease;
}

.navbar.solid .logo-img { height: 80px; }

.nav-links {
    display: flex;
    gap: 36px;
}

.nav-links a {
    /* 14px umjesto 11px (--fs-tag): uz logo povećan na 96px meni je
       djelovao sitno. Izuzetak od skale, na zahtjev. */
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--txm);
    transition: var(--tf);
    position: relative;
    padding-bottom: 4px;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 1px;
    background: var(--p);
    transition: width 0.35s ease;
}

.nav-links a:hover { color: var(--p); }
.nav-links a:hover::after { width: 100%; }

.nav-links a.nav-active { color: var(--p); }
.nav-links a.nav-active::after { width: 100%; }

.nav-end {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

/* ── Prekidač jezika ──
   Ranije su tri jezika stajala zbijena jedan uz drugi: razmak je bio 2px, a
   odabrani jezik se uz to još i uvećavao (transform: scale), pa je pojeo i
   tih 2px — "SRB" i "ENG" su izgledali kao jedna riječ. Sada je to uredan
   prekidač: tri polja u zajedničkom okviru, sa pravim razmakom, a odabrani
   jezik je ispunjen bojom brenda umjesto da se uvećava. */
.lang-sw {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

/* Sitno i bez okvira. Razmak drži `gap` na roditelju, a ne širina polja —
   prije je bio 2px uz uvećanje odabranog jezika (transform: scale), koje je
   i ta 2px pojelo, pa su "SRB" i "ENG" izgledali kao jedna riječ.
   Uvećanja više nema; odabrani jezik se poznaje po boji. Slova su sitna, ali
   je površina za klik veća od njih (padding + min-height), da se i na
   telefonu lako pogodi. */
.lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 3px;
    font-family: 'Frutiger', sans-serif;
    font-size: var(--fs-tag);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--txl);
    line-height: 1;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.lang:hover  { color: var(--p); }
.lang.active { color: var(--p); }

.mob-lang .lang { font-size: 13px; min-height: 34px; }

/* Burger */
.burger {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    padding: 4px;
}

.burger span {
    display: block;
    background: var(--tx);
    transition: var(--t);
    transform-origin: center;
}

.burger span:first-child { width: 22px; height: 1.5px; }
.burger span:last-child  { width: 14px; height: 1.5px; margin-left: auto; }

.burger.active span:first-child { width: 22px; transform: translateY(3.75px) rotate(45deg); }
.burger.active span:last-child  { width: 22px; transform: translateY(-3.75px) rotate(-45deg); }

/* ── Logo na uskim ekranima ──
   Otkad je traka dvoredna (logo gore, meni ispod — vidi .nav-row2 uz
   .nav-inner), logo više ni na jednom ekranu ne dijeli red sa jezicima i
   dugmetom za meni, pa mu ništa ne prijeti da ga istisne van ekrana. Ovdje
   ostaje samo manja veličina loga na telefonu, čisto radi omjera prema
   ostatku stranice. */
@media (max-width: 560px) {
    .logo-img { height: 62px; }
    .navbar.solid .logo-img { height: 56px; }
}

/* Mobile menu */
.mob-menu {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 9997;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 52px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.mob-menu.open { opacity: 1; pointer-events: all; visibility: visible; }

.mob-menu ul { margin-bottom: 64px; }
.mob-menu ul li { overflow: hidden; }

.mob-link {
    font-family: 'Frutiger', sans-serif;
    font-size: clamp(3rem, 7vw, 5rem);
    font-style: italic;
    font-weight: 400;
    color: var(--tx);
    display: inline-block;
    transition: color 0.3s ease, transform 0.3s ease;
}

.mob-link:hover { color: var(--p); transform: translateX(16px); }

.mob-bottom {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: var(--txl);
}

.mob-bottom p, .mob-bottom a { color: var(--txl); }

.mob-lang { display: flex; align-items: center; gap: 10px; }

.mob-lang a { color: var(--txm); transition: var(--tf); }
.mob-lang a:hover { color: var(--p); }
/* Ovo pravilo stoji iza .lang.active i ima istu specifičnost, pa bi bez
   ovoga odabrani jezik u mobilnom meniju ostao siv kao i ostali. */
.mob-lang a.lang.active { color: var(--p); }

/* ─── HERO ─── */
.hero {
    position: relative;
    background: var(--bg);
    overflow: hidden;
    padding-top: var(--nav-h);
}

.hero-noise {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 85% 20%, rgba(59,45,143,0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 10% 90%, rgba(114,192,44,0.10) 0%, transparent 45%),
        linear-gradient(160deg, #FFFFFF 0%, #F7F6FC 60%, #EFEDF9 100%);
    z-index: 0;
}

.hero-noise::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    background-size: 200px;
    opacity: 0.5;
    pointer-events: none;
}

.hero-glow {
    position: absolute;
    bottom: -20%;
    right: -10%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(59,45,143,0.14) 0%, transparent 70%);
    filter: blur(60px);
    z-index: 0;
    animation: glow 6s ease-in-out infinite alternate;
}

@keyframes glow {
    from { transform: translate(0,0) scale(1); }
    to   { transform: translate(-40px, -30px) scale(1.2); }
}

.hero-body {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 52px;
    padding-top: 56px;
    padding-bottom: 64px;
}

.hero-thesis {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: var(--fs-l);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--tx);
    max-width: 14ch;
    margin-bottom: 24px;
}

.hero-sub {
    font-family: 'Frutiger', sans-serif;
    font-size: var(--fs-s);
    line-height: 1.6;
    color: var(--txm);
    max-width: 46ch;
    margin-bottom: 28px;
}

.hero-link { margin-bottom: 8px; }

.btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: var(--fs-tag);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--w);
    background: linear-gradient(135deg, var(--p) 0%, var(--pd) 100%);
    padding: 16px 32px;
    border-radius: var(--r-sm);
    transition: var(--t);
    position: relative;
    overflow: hidden;
}

.btn-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--g);
    transform: translateX(-101%);
    transition: transform 0.5s var(--ease);
    z-index: 0;
}

.btn-hero:hover::before { transform: translateX(0); }
.btn-hero:hover { color: var(--tx); }
.btn-hero > * { position: relative; z-index: 1; }

.btn-arrow {
    font-size: inherit;
    transition: transform 0.3s ease;
}

.btn-hero:hover .btn-arrow { transform: translate(3px,-3px); }

/* Hero slika desno */
/* ── Hero traka je zaključana na omjer 8:3 ──
   Hero fotografija se priprema u formatu 2400 × 900 (omjer 8:3) i traka ima
   tačno taj omjer na svakoj širini ekrana. Pošto se okvir i slika poklapaju,
   `object-fit: contain` znači da se slika vidi cijela — nikad se ne siječe,
   a nema ni praznog prostora sa strana.

   Ako se ikad postavi slika drugog omjera (npr. zakazani akcijski banner),
   i dalje se vidi cijela, a prostor oko nje popunjava ista ta slika,
   zamućena i razvučena preko trake (.hero-img-bg). */
.hero-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 8 / 3;
    max-height: 820px;               /* granica za vrlo široke ekrane */
    z-index: 1;
    overflow: hidden;
    background: var(--bg3);
}

.hero-img-bg {
    position: absolute;
    inset: -6%;                       /* preko ivica, da se zamućeni rub ne vidi */
    z-index: 0;
    background-size: cover;
    background-position: center;
    filter: blur(34px) saturate(1.15) brightness(1.02);
    transform: scale(1.06);
    pointer-events: none;
}

.hero-img {
    position: relative;
    z-index: 1;
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center center;
}


.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.hero-slide.active {
    opacity: 1;
}

.hero-img-overlay {
    position: absolute;
    inset: 0;
    background: none;
}

/* ─── HERO DOTS (ručna navigacija slajdova) ─── */
.hero-dots {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(21,17,42,0.32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 999px;
}

.hero-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.hero-dot:hover { background: rgba(255,255,255,0.8); }

.hero-dot.active {
    background: var(--g);
    transform: scale(1.25);
}

@media (max-width: 640px) {
    .hero-cta { left: 20px; }
}

/* ─── MARQUEE ─── */
.marquee-wrap {
    overflow: hidden;
    background: var(--p);
    padding: 10px 0;
}

.marquee-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: marquee 22s linear infinite;
}

.marquee-track span {
    font-family: 'Frutiger', sans-serif;
    font-style: italic;
    font-size: var(--fs-tag);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    padding: 0 20px;
}

.marquee-track .mx {
    color: var(--g);
    font-size: var(--fs-tag);
    padding: 0 4px;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.marquee-wrap:hover .marquee-track { animation-play-state: paused; }

/* ─── O NAMA ─── */
.about {
    background: var(--bg2);
    padding: clamp(48px, 5vw, 72px) 0;
}

.about-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-intro .hero-thesis {
    font-size: var(--fs-l);
    max-width: none;
}

.about-intro .hero-sub {
    max-width: none;
    margin-bottom: 0;
}

/* Dvije kolone: lijevo naslov, podnaslov i citat; desno priča. Ranije je
   između stajala fotografija sa citatom preko nje. */
.about-inner {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(48px, 7vw, 120px);
    align-items: center;
}

.about-intro .hero-sub { margin-bottom: 40px; }

/* Citat kao kartica u istim bojama kao slogan traka ispod hero slike i
   kontakt sekcija; gornji rub je ljubičasto-zelena traka kao kod sekcije
   poslovnica, pa sva tri elementa govore istim jezikom. */
.about-quote-card {
    position: relative;
    overflow: hidden;
    margin: 0;
    max-width: 460px;
    padding: 44px 40px 36px;
    border-radius: var(--r-md);
    background: linear-gradient(140deg, var(--pd) 0%, var(--p) 55%, #6A4FD6 100%);
    box-shadow: var(--sh-brand-2);
}

.about-quote-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--p), #6A4FD6 45%, var(--g));
}

/* Veliki navodnik kao ukras u uglu. */
.about-quote-card::after {
    content: '\201C';
    position: absolute;
    right: 22px; bottom: -64px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 15rem;
    line-height: 1;
    color: rgba(255,255,255,0.08);
    pointer-events: none;
}

blockquote {
    position: relative;
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--fs-m);
    font-style: italic;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 1.3;
    margin-bottom: 18px;
}

cite {
    position: relative;
    font-family: 'Frutiger', sans-serif;
    font-size: var(--fs-tag);
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--g);
    font-style: normal;
    text-transform: uppercase;
}

.about-lead {
    font-size: var(--fs-m) !important;
    color: var(--tx) !important;
    font-weight: 500;
    line-height: 1.5 !important;
}

.about-stats {
    display: flex;
    gap: 40px;
    margin-bottom: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.astat-n {
    display: block;
    font-family: 'Frutiger', sans-serif;
    font-size: var(--fs-l);
    font-weight: 700;
    color: var(--p);
    line-height: 1;
}

.astat-l {
    display: block;
    font-size: var(--fs-tag);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--txl);
    margin-top: 6px;
}

.about-right p {
    font-size: var(--fs-s);
    color: var(--txm);
    line-height: 1.7;
    margin-bottom: 14px;
    max-width: 560px;
}

.about-right .link-arrow {
    color: var(--p);
    margin-top: 8px;
}

/* ─── ASORTIMAN ─── */
.asortiman {
    background: var(--bg);
    padding: var(--vpad) 0;
}

.aso-header {
    margin-bottom: 32px;
    text-align: center;
}

.aso-header h2 {
    font-family: 'Frutiger', sans-serif;
    /* Ista veličina kao slogan i Odjeća/Obuća/Dodaci iznad. */
    font-size: calc(var(--fs-l) * 0.6);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: var(--ls-h2);
    color: var(--tx);
}

.aso-header h2 em { font-style: italic; color: var(--p); }

.aso-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-bottom: 48px;
}

/* Varijanta zalijepljena direktno ispod hero slike — ista širina, bez razmaka. */
.aso-grid-hero {
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

.asortiman-caption {
    background: var(--bg);
    padding: 40px 0 48px;
    position: relative;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-1);
}

.aso-grid-hero .aso-img { height: 700px; }

.aso-card {
    background: var(--bg2);
    padding: 40px 32px;
    border: 1px solid var(--line);
    transition: background-color var(--dur-3) ease,
                transform var(--dur-2) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.aso-card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: var(--g);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease);
}

.aso-card:hover {
    background: var(--p);
    transform: translateY(-32px) scale(1.07);
    box-shadow: var(--sh-brand-2);
    z-index: 5;
}
.aso-card:hover::before { transform: scaleX(1); }
.aso-card:hover h3 { color: var(--w); }
.aso-card:hover p  { color: rgba(255,255,255,0.75); }

.aso-icon {
    font-size: 2rem;
    margin-bottom: 20px;
    display: block;
}

.aso-img {
    margin: -40px -32px 24px;
    height: 480px;
    overflow: hidden;
}

.aso-img picture {
    display: block;
    width: 100%;
    height: 100%;
}

.aso-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.5s var(--ease);
}

.aso-card:hover .aso-img img {
    transform: scale(1.06);
}

.aso-num {
    font-family: 'Frutiger', sans-serif;
    font-size: var(--fs-l);
    font-weight: 300;
    font-style: italic;
    color: var(--p);
    opacity: 0.28;
    line-height: 1;
    margin-bottom: 20px;
    display: block;
    transition: opacity 0.4s ease, color 0.4s ease;
}

.aso-card:hover .aso-num {
    opacity: 0.55;
    color: rgba(255,255,255,0.85);
}

.aso-card h3 {
    font-family: 'Frutiger', sans-serif;
    font-size: var(--fs-m);
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--tx);
    transition: color 0.4s ease;
}

.aso-card p {
    font-size: var(--fs-s);
    color: var(--txm);
    line-height: 1.75;
    transition: color 0.4s ease;
}

.aso-note {
    font-size: var(--fs-m);
    font-style: italic;
    color: var(--txm);
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ─── POSLOVNICE ─── */
.stores {
    background: var(--bg2);
    padding: var(--vpad) 0;
}

.stores-top {
    max-width: var(--max);
    margin: 0 auto 56px;
    padding: 0 52px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: end;
}

.stores-heading h2 {
    font-family: 'Frutiger', sans-serif;
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: var(--ls-h2);
    color: var(--tx);
}

.stores-heading h2 em { font-style: italic; color: var(--p); }

/* Country tabs */
.ctabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

/* Zaobljena dugmad umjesto spojenih pravougaonika, a odabrana država je
   ispunjena prelivom brenda — izbor države je sada najuočljiviji element
   iznad liste, a ne siva traka kakva je bio. */
.ctab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 999px;
    font-family: 'Frutiger', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--txm);
    background: var(--bg);
    border: 1.5px solid var(--line);
    cursor: pointer;
    transition: var(--tf);
}

.ctab.active {
    background: linear-gradient(120deg, var(--p), #6A4FD6);
    border-color: transparent;
    color: var(--w);
    box-shadow: 0 8px 22px rgba(59,45,143,0.28);
}

.ctab:not(.active):hover {
    color: var(--p);
    border-color: var(--p);
    background: var(--bg2);
}

/* Search */
.stsearch {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: var(--tf);
}

.stsearch:focus-within {
    border-color: var(--p);
    box-shadow: var(--sh-brand-1);
}

.stsearch svg { color: var(--txl); flex-shrink: 0; }

.stsearch input {
    flex: 1;
    /* Bez min-width: 0 polje zadržava svoju urođenu širinu (~170px) i ne da
       se suziti, pa na uskom ekranu izgura pretragu van ekrana. */
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    font-family: 'Frutiger', sans-serif;
    font-size: 16px;
    color: var(--tx);
}

.stsearch input::placeholder { color: var(--txl); }

/* ── Poslovnice kao kartice ──
   Prije je ovdje bio spisak svih gradova sa redovima ispod svakog; stranica
   je zbog toga bila preko 7000px duga. Sada je mreža kartica sa postepenim
   učitavanjem, pa se do poslovnice dolazi pretragom ili dugmetom "Najbliža
   meni", umjesto skrolanjem kroz imenik. */
.stores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-top: 28px;
}

/* ── Boja po gradu ──
   Svaka kartica nosi boju koja se računa iz imena grada (vidi bojaGrada() u
   script.js), pa sve poslovnice istog grada dijele istu boju. Lista je
   sortirana po gradu, tako da se grupe vide na prvi pogled — bez ijednog
   dodatnog naslova ili natpisa iznad njih. Tri tona, sva tri iz palete
   brenda, da stranica bude šarena ali ne i šarena bez veze. */
.st-card {
    --ac: var(--p);
    --ac-soft: rgba(59,45,143,0.08);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 24px 22px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color var(--dur-2) var(--ease-out),
                transform var(--dur-2) var(--ease-out),
                background var(--dur-2) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out);
}

.st-card--b { --ac: #5A9A22; --ac-soft: rgba(114,192,44,0.12); }
.st-card--c { --ac: #6A4FD6; --ac-soft: rgba(106,79,214,0.10); }

/* Traka u boji grada preko vrha kartice. */
.st-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: var(--ac);
    transition: height var(--dur-2) var(--ease-out);
}

.st-card:hover {
    border-color: var(--ac);
    background: var(--ac-soft);
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(26,22,48,0.12);
}

.st-card:hover::before { height: 9px; }

.stc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
}

/* Grad je oznaka iznad, a adresa naslov kartice — u istom gradu zna biti i
   po 13 poslovnica, pa bi ponovljeno ime grada kao naslov izgledalo kao da
   se ista kartica ponavlja. Adresa je ono što ih razlikuje. */
.stc-city {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ac);
    background: var(--ac-soft);
    padding: 5px 10px;
    border-radius: 999px;
}

/* Udaljenost se pojavi tek kad posjetilac sam zatraži "Najbliža meni". */
.stc-km {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--w);
    background: var(--gd);
    padding: 4px 9px;
    border-radius: 999px;
}

.stc-addr {
    font-family: 'Frutiger', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--tx);
    line-height: 1.25;
    flex: 1;
}

.stc-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px solid var(--bg3);
}

.stc-hours,
.stc-phone {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--txm);
}

.stc-hours svg,
.stc-phone svg { color: var(--ac); flex-shrink: 0; }

.stc-phone { transition: color 0.25s ease; }
.stc-phone:hover { color: var(--ac); }

/* Red "Detalji ↗" je uklonjen — cijela kartica je klikabilna, pa je taj
   natpis bio samo još jedan red teksta na svakoj od 77 kartica. Ostala je
   strelica u uglu, koja se pomjeri kad se pređe mišem. */
.stc-go {
    position: absolute;
    right: 18px;
    bottom: 16px;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--ac);
    background: var(--ac-soft);
    font-size: 13px;
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.st-card:hover .stc-go { opacity: 1; transform: translate(0, 0); }

/* Na dodir nema prelaska mišem, pa bi strelica bila nevidljiva zauvijek. */
@media (hover: none) {
    .stc-go { opacity: 0.6; transform: none; }
}

/* "Prikaži još" */
.pl-more { display: flex; justify-content: center; padding-top: 28px; }

.more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 32px;
    background: linear-gradient(120deg, var(--p), #6A4FD6);
    border: none;
    border-radius: 999px;
    font-family: 'Frutiger', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--w);
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(59,45,143,0.26);
    transition: var(--tf);
}

.more-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(59,45,143,0.34); }

/* Broj preostalih poslovnica — na ispunjenom dugmetu mora biti svijetao. */
.more-btn .mb-n {
    color: var(--w);
    background: rgba(255,255,255,0.22);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 9px;
    border-radius: 999px;
}

/* Poruka o lokaciji iznad mreže */
.pl-status:empty { display: none; }
.pl-status { padding-top: 16px; }

.pls {
    display: inline-block;
    font-size: 12.5px;
    color: var(--gd);
}

.pls-err { color: var(--txm); }

@media (max-width: 1024px) {
    .stores-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Poslovnice na telefonu: grupe po gradu i kompaktni redovi ──
   Kartica od 137px je postala red od ~76px: adresa, radno vrijeme i dva
   dugmeta desno (poziv, navigacija) koja se mogu pritisnuti palcem. Ime
   grada se ne ponavlja na svakom redu — stoji jednom, kao naslov grupe
   (.pl-grad); prikazuje se na redu samo kad je lista poredana po blizini,
   jer tada gradovi nisu grupisani. */
@media (max-width: 768px) {
    .stores-grid { grid-template-columns: 1fr; gap: 8px; padding: 4px 16px 0; }

    .pl-grad {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 18px 2px 4px;
    }
    .pl-grad h3 {
        font-family: 'Frutiger', sans-serif;
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--tx);
    }
    .pl-grad .pl-grad-n {
        font-size: var(--fs-tag);
        font-weight: 700;
        color: var(--ac, var(--p));
        background: var(--ac-soft, rgba(59,45,143,0.08));
        padding: 3px 9px;
        border-radius: 999px;
    }
    .pl-grad-mapa {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 4px 6px 10px;
        border: 0;
        background: none;
        font-family: 'Frutiger', sans-serif;
        font-size: 12px;
        font-weight: 700;
        color: var(--p);
        cursor: pointer;
    }

    .st-card {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas: "head akcije" "addr akcije" "meta akcije";
        align-items: center;
        gap: 3px 12px;
        padding: 13px 12px 13px 18px;
        border-radius: 12px;
    }
    .st-card:hover { transform: none; box-shadow: none; }
    .st-card::before { top: 0; bottom: 0; right: auto; width: 4px; height: auto; }
    .st-card:hover::before { height: auto; }

    .stc-head  { grid-area: head; display: none; padding: 0; justify-content: flex-start; }
    .stores-grid.po-blizini .stc-head { display: flex; margin-bottom: 4px; }
    .stc-addr  { grid-area: addr; font-size: 1rem; line-height: 1.3; }
    .stc-meta  { grid-area: meta; border: 0; padding: 0; }
    .stc-phone, .stc-go { display: none; }
    .stc-hours { font-size: 12.5px; }

    .stc-akcije { grid-area: akcije; display: flex; gap: 8px; }
    .stc-btn {
        width: 42px; height: 42px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 50%;
        color: var(--ac);
        background: var(--ac-soft);
    }
    .stc-btn:active { background: var(--ac); color: var(--w); }

    .pl-more { padding: 20px 16px 0; }
}

/* Teaser sekcija na index.html — istaknuta bez boje: veći naslov, okvir i sjena je izdvajaju */
/* Stara tanka linija (1px, boja --line) je bila jedva vidljiva gore, a dolje
   potpuno nevidljiva (skoro bijelo na bijeloj podlozi sekcije Vijesti ispod).
   Sekcija sad ima čisto bijelu podlogu i deblji plavi okvir gore i dolje —
   čita se kao jasno uokvirena bijela cjelina, umjesto da se stapa sa
   susjednim sekcijama. */
/* Traka je viša nego prije (2.2 × uobičajeni razmak umjesto 1 ×): pozadinska
   mapa regiona je glavni sadržaj ove sekcije, a na prvobitnoj visini se od
   nje vidio samo uzak pojas. Množilac, a ne fiksna visina, znači da se sama
   prilagodi manjim ekranima kao i ostatak stranice. */
.stores-teaser {
    padding: calc(var(--vpad) * 2.2) 0;
    position: relative;
    overflow: hidden;
    background: var(--w);
    box-shadow: var(--sh-3);
}

/* Gornja i donja traka — ljubičasta s lijeve, zelena s desne strane (boje
   logotipa), fiksno. Život joj daju dvije stvari:

   1) puls: traka se širi i vraća (scaleY od ruba sekcije prema unutra), uz
      blagi bljesak boje;
   2) svjetlosni val koji preko nje putuje — na gornjoj traci s lijeva na
      desno, na donjoj s desna na lijevo. Dva suprotna smjera čitaju se kao
      veza između dvije strane, što i jeste tema sekcije (BiH · Srbija).

   Val je drugi sloj iste pozadine, pa ne treba dodatan element. Puls i val
   imaju različita trajanja da se ne sinhronizuju i ne djeluju mehanički. */
.stores-teaser::before,
.stores-teaser::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 28px;
    z-index: 3;
    background:
        linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent) no-repeat,
        linear-gradient(90deg, var(--pd) 0%, var(--p) 30%, #6A4FD6 46%, var(--g) 62%, #9BE04F 100%);
    background-size: 26% 100%, 100% 100%;
    background-position: -60% 0, 0 0;
    will-change: transform, background-position;
}

.stores-teaser::before {
    top: 0;
    transform-origin: top;
    animation: trakaVal 5.5s ease-in-out infinite, trakaPuls 3.4s ease-in-out infinite;
}
.stores-teaser::after {
    bottom: 0;
    transform-origin: bottom;
    animation: trakaValNazad 5.5s ease-in-out 2.7s infinite, trakaPuls 3.4s ease-in-out 1.7s infinite;
}

/* Koristi ga i slogan traka ispod hero slike (.hero-slogan). */
@keyframes trakaTece {
    from { background-position:    0% 50%; }
    to   { background-position: -200% 50%; }
}

@keyframes trakaVal {
    0%       { background-position: -60% 0, 0 0; }
    70%,100% { background-position: 160% 0, 0 0; }
}
@keyframes trakaValNazad {
    0%       { background-position: 160% 0, 0 0; }
    70%,100% { background-position: -60% 0, 0 0; }
}
@keyframes trakaPuls {
    0%, 100% { transform: scaleY(0.82); filter: brightness(1)    saturate(1); }
    50%      { transform: scaleY(1.12); filter: brightness(1.14) saturate(1.2); }
}

@media (max-width: 640px) {
    .stores-teaser::before,
    .stores-teaser::after { height: 20px; }
}

.stores-bg-map {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.26;
    pointer-events: none;
    filter: grayscale(0.2);
}

/* Tačke gradova na pozadinskoj mapi blago "dišu". Tri grupe sa različitim
   kašnjenjem, da ne pulsiraju sve u isti čas kao semafor. */
.stores-bg-map path.leaflet-interactive {
    animation: tackaDise 4s ease-in-out infinite;
}
.stores-bg-map path.leaflet-interactive:nth-child(3n)   { animation-delay: -1.3s; }
.stores-bg-map path.leaflet-interactive:nth-child(3n+1) { animation-delay: -2.6s; }

@keyframes tackaDise {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

/* Sloj svjetla iznad mape, ispod teksta. Uvučen je preko ivica (inset: -25%)
   da se pri pomjeranju nikad ne vidi njegov rub. */
.stores-glow {
    position: absolute;
    inset: -25%;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(38% 52% at 26% 38%, rgba(59,45,143,0.26), transparent 70%),
        radial-gradient(34% 46% at 74% 64%, rgba(114,192,44,0.22), transparent 70%);
    animation: sjajLuta 20s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes sjajLuta {
    from { transform: translate3d(-3%, -2%, 0) scale(1);    }
    to   { transform: translate3d( 4%,  3%, 0) scale(1.15); }
}

/* Ko je u sistemu tražio manje animacije, dobija mirnu verziju. */
@media (prefers-reduced-motion: reduce) {
    .stores-teaser::before,
    .stores-teaser::after,
    .stores-glow,
    .stores-bg-map path.leaflet-interactive { animation: none; }
}

.stores-teaser-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: center;
}

.stores-heading-title {
    font-family: 'Frutiger', sans-serif;
    font-size: var(--fs-l);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: var(--ls-h2);
    color: var(--tx);
    margin-bottom: 14px;
}

.stores-heading-title em { font-style: italic; color: var(--p); }

/* Bila je svijetlosiva (--txl) preko mape, pa se "Bosna i Hercegovina ·
   Srbija" na telefonu jedva čitala; sada tamnija. */
.stores-teaser-sub {
    font-size: var(--fs-tag);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--txm);
}

/* Link "Pogledaj na mapi" do sada nije imao svoje pravilo, pa je nasljeđivao
   16px sa <html> i bio jedina takva veličina na stranici. */
.sp-btn {
    font-size: var(--fs-tag);
    font-weight: 600;
    letter-spacing: 0.1em;
}

.stores-teaser-ctas {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-left: 48px;
}

@media (max-width: 900px) {
    .stores-teaser-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 28px;
    }
    .stores-teaser-ctas  { border-left: none; padding-left: 0; flex-direction: row; align-items: center; }
}

/* Na telefonu tekst stoji direktno preko gradova, tačaka i natpisa mape
   ("BOSNIA AND HERZEGOVINA" je padao tačno preko podnaslova). Mapa se zato
   utiša, a tekst dobije svoju mutno-bijelu podlogu — mapa se i dalje vidi
   oko nje, ali ništa više ne prolazi kroz slova. */
@media (max-width: 640px) {
    .stores-bg-map { opacity: 0.22; }
    .stores-teaser-inner {
        width: auto;
        margin: 0 16px;
        padding: 30px 24px 28px;
        gap: 28px;
        background: rgba(255,255,255,0.84);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border-radius: var(--r-md);
        box-shadow: var(--sh-2);
    }
    .stores-teaser-ctas  { flex-direction: column; align-items: flex-start; }
}

/* CTA ispod liste */
.stores-map-cta {
    max-width: var(--max);
    margin: 48px auto 0;
    padding: 0 52px var(--vpad);
}

/* No results */
.no-results {
    padding: 48px 0;
    text-align: center;
    color: var(--txl);
    font-style: italic;
    font-size: var(--fs-s);
}

/* ─── VIJESTI ─── */
.news {
    background: var(--bg);
    padding: 64px 0;
}

.news-head h2 {
    font-family: 'Frutiger', sans-serif;
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: var(--ls-h2);
    color: var(--tx);
}

.news-head h2 em { font-style: italic; color: var(--p); }

/* Na početnoj stoji samo istaknuta vijest — bočna kolona sa tri manje
   kartice je uklonjena, pa je mreža jednokolonska. Širina se ograničava na
   samoj kartici, a ne na mreži: mreža nosi i klasu container-wide, pa bi
   sužavanje mreže pomjerilo karticu i razminulo je sa ostatkom sekcije.

   Cijela sekcija je centrirana: naslov "Uvijek u toku.", kartica i link
   "Sve vijesti" dijele istu osu. Kartica se centrira preko margin: auto, a
   ne preko justify-items, da ostane puna širina do svojih 860px. */
.news-head {
    margin-bottom: 36px;
    text-align: center;
}

.news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}

/* Kartica se više ne steže na 860px nego zauzima punu širinu mreže — istu
   koju ima i naslov "Uvijek u toku." iznad i sekcija sa kategorijama, pa
   cijela naslovna stranica ima jednu širinu umjesto uskog ostrva usred nje. */
.news-grid > .news-big {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Tekst ipak ne ide preko cijele te širine: red od 1300px se ne čita. */
.news-grid > .news-big .news-body p { max-width: 90ch; }

.news-more { text-align: center; }

.news-big, .news-sm {
    position: relative;
    overflow: hidden;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-1);
    cursor: pointer;
    transition: transform var(--dur-2) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out);
}

.news-big::after, .news-sm::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--g);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease);
    z-index: 2;
}

.news-big:hover, .news-sm:hover {
    box-shadow: var(--sh-3);
    transform: translateY(-3px);
}

.news-big:hover::after, .news-sm:hover::after { transform: scaleX(1); }

.news-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.news-img {
    position: relative;
    overflow: hidden;
}

.news-big .news-img { height: 230px; }
.news-sm  .news-img { height: 180px; }

/* Kompaktne "kocka" kartice u bočnoj koloni na početnoj (news-col) —
   pune-velicine .news-sm kartice na vijesti.html ostaju netaknute */
.news-col .news-sm .news-img { height: 96px; }
.news-col .news-sm .news-body { padding: 16px 18px; }
.news-col .news-sm .news-body time,
.news-col .news-sm .news-body p,
.news-col .news-sm .news-body .link-arrow { display: none; }
.news-col .news-sm .news-body h3 {
    font-size: var(--fs-m);
    line-height: 1.25;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.news-img img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease);
}

/* Vijest sa više fotografija: sve stoje jedna do druge u vrhu kartice, u
   jednakim kolonama. Slike ovdje moraju izaći iz apsolutnog pozicioniranja
   iznad, inače bi se sve preklopile na istom mjestu.

   Razmak i uvlaka su u duhu sekcije Odjeća/Obuća/Dodaci: fotografije dišu i
   ne dodiruju ni jedna drugu ni ivicu kartice, umjesto dosadašnje spojene
   trake sa razmakom od 3px. */
.news-img.multi {
    display: flex;
    gap: clamp(8px, 1vw, 14px);
    height: auto;                       /* visinu sada daju same slike */
    padding: clamp(10px, 1.1vw, 14px) clamp(10px, 1.1vw, 14px) 0;
}

.news-img.multi img {
    position: static;
    flex: 1 1 0;
    min-width: 0;          /* bez ovoga slika ne bi mogla ispod svoje prirodne širine */
    width: auto;
    /* Kartica na naslovnoj je sada puna širina, pa bi fiksnih 200px visine
       od svake fotografije napravilo uzak pojas preko 400px širine. Visina
       raste sa ekranom i staje na 300px. */
    height: clamp(200px, 21vw, 300px);
    border-radius: 6px;
}

.news-sm .news-img.multi img { height: 150px; }

/* Na telefonu je svaka od tri slika široka svega ~110px, pa bi na punoj
   visini bila uski isječak. */
@media (max-width: 560px) {
    .news-big .news-img.multi img { height: 128px; }
    .news-sm  .news-img.multi img { height: 118px; }
}

/* Uvećanje na prelazak mišem se ne primjenjuje kad slika stoji u razmaknutoj
   traci — slika bi se popela preko razmaka i susjedne fotografije. */
.news-big:hover .news-img.multi img,
.news-sm:hover  .news-img.multi img { transform: none; }

.news-big:hover .news-img img,
.news-sm:hover  .news-img img { transform: scale(1.04); }

/* Oznaka kategorije (.news-cat / .nm-cat) preko fotografije je uklonjena na
   zahtjev — kategorija se više ne prikazuje posjetiocima nigdje. U admin
   panelu ostaje kao interna oznaka i ide u strukturirane podatke za Google
   (articleSection), što se na stranici ne vidi. */

.news-body { padding: 28px 28px 32px; }

time {
    display: block;
    font-size: var(--fs-tag);
    color: var(--txl);
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.news-big .news-body h3 {
    font-family: 'Frutiger', sans-serif;
    font-size: var(--fs-m);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 14px;
    color: var(--tx);
}

.news-sm .news-body h3 {
    font-family: 'Frutiger', sans-serif;
    font-size: var(--fs-m);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 14px;
    color: var(--tx);
}

.news-body p {
    font-size: var(--fs-s);
    color: var(--txm);
    line-height: 1.75;
    margin-bottom: 20px;
}

/* ─── KONTAKT (tamna sekcija) ─── */
/* Podloga je ranije bila #1A1630 → #241B4D: to nije plava iz logotipa nego
   skoro crna, pa je sekcija djelovala teško i odvojeno od ostatka sajta.
   Sada ide od tamnije varijante brend plave (--pd) ka samoj brend plavoj i
   nijansu iznad nje — vidno svjetlije, a bijeli tekst i zeleni naglasak i
   dalje imaju kontrast daleko iznad praga čitljivosti. */
.contact {
    background: linear-gradient(160deg, #2E2270 0%, #3F31A0 100%);
    padding: var(--vpad) 0;
}

.contact .sec-tag.light { color: rgba(255,255,255,0.6); }

.contact-inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    align-items: start;
}

.contact-left h2 {
    font-family: 'Frutiger', sans-serif;
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: var(--ls-h2);
    margin-bottom: 40px;
    color: var(--tx);
}

.contact-left h2.light { color: #FFFFFF; }
.contact-left h2 em { font-style: italic; color: var(--p); }
.contact-left h2.light em { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; color: var(--g); }

.cinfo {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 36px;
}

.cinfo a {
    font-size: var(--fs-s);
    color: var(--txm);
    transition: var(--tf);
    position: relative;
    padding-left: 0;
}

.cinfo a:hover { color: var(--p); padding-left: 8px; }

.contact-cats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
    margin-bottom: 36px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--line);
}

.contact .contact-cats { border-bottom-color: rgba(255,255,255,0.14); }

.ccat h4 {
    font-size: var(--fs-tag);
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--txl);
    margin-bottom: 8px;
}

.contact .ccat h4 { color: rgba(255,255,255,0.55); }

.ccat a, .ccat span {
    font-size: var(--fs-s);
    color: var(--txm);
    line-height: 1.5;
    display: inline-block;
}

.contact .ccat a, .contact .ccat span { color: rgba(255,255,255,0.85); }

.ccat a { transition: var(--tf); }
.ccat a:hover { color: var(--p); }
.contact .ccat a:hover { color: var(--g); }

/* Karijera na Kontakt sekciji vodi direktno na stranicu sa otvorenim
   pozicijama, umjesto na email — upiti oko posla tako idu kroz istu
   formu/pregled koji već postoji na /karijera, ne kao rasuta pošta. */
.ccat-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--r-xs);
    font-size: var(--fs-tag) !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--w) !important;
}
.contact .ccat-btn:hover {
    background: var(--g);
    border-color: var(--g);
    color: var(--tx) !important;
}

@media (max-width: 480px) {
    .contact-cats { grid-template-columns: 1fr; gap: 20px; }
}

.socials {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.socials a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-tag);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--txm);
    border: 1px solid var(--line);
    background: var(--bg);
    padding: 10px 18px;
    transition: var(--t);
}

.socials a:hover {
    color: var(--p);
    border-color: var(--p);
    background: rgba(59,45,143,0.05);
}

.contact .socials a {
    color: rgba(255,255,255,0.75);
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.04);
}

.contact .socials a:hover {
    color: var(--g);
    border-color: var(--g);
    background: rgba(114,192,44,0.1);
}

/* Form */
.fg { margin-bottom: 16px; }

.fg label {
    display: block;
    font-size: var(--fs-tag);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--txm);
    margin-bottom: 8px;
}

.contact .fg label { color: rgba(255,255,255,0.5); }

.fg input, .fg textarea {
    width: 100%;
    padding: 16px 20px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-bottom-color: #C9C2EC;
    border-radius: var(--r-sm);
    color: var(--tx);
    font-family: 'Frutiger', sans-serif;
    font-size: 16px;
    outline: none;
    transition: var(--tf);
    appearance: none;
}

.contact .fg input, .contact .fg textarea {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.16);
    color: #FFFFFF;
}

.contact .fg input::placeholder, .contact .fg textarea::placeholder { color: rgba(255,255,255,0.35); }

.fg input:focus,
.fg textarea:focus {
    border-color: var(--p);
    box-shadow: var(--sh-brand-1);
}

.contact .fg input:focus, .contact .fg textarea:focus {
    border-color: var(--g);
    box-shadow: 0 0 0 3px rgba(114,192,44,0.16);
}

.fg textarea { resize: vertical; min-height: 130px; }

.btn-submit {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: 'Frutiger', sans-serif;
    font-size: var(--fs-tag);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* Dugme je ranije bilo u prelivu brend plave. Otkad je podloga kontakt
       sekcije posvijetljena na tu istu plavu, takvo dugme je na njoj bilo
       tamnije od pozadine i djelovalo kao rupa, a ne kao poziv na akciju.
       Bijelo dugme sa plavim natpisom je najjači kontrast koji imamo, a
       zeleni preliv pri prelasku mišem ostaje netaknut. */
    color: var(--p);
    background: var(--w);
    border: 2px solid var(--w);
    border-radius: var(--r-sm);
    padding: 16px 36px;
    transition: var(--t);
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    position: relative;
    overflow: hidden;
}

.btn-submit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--g);
    transform: translateX(-101%);
    transition: transform 0.5s var(--ease);
    z-index: 0;
}

.btn-submit:hover::before { transform: translateX(0); }
.btn-submit:hover { color: var(--tx); }
.btn-submit > * { position: relative; z-index: 1; }

.bs-arrow { font-size: inherit; transition: transform 0.3s ease; }
.btn-submit:hover .bs-arrow { transform: translate(3px,-3px); }

.btn-submit.sent {
    background: transparent;
    color: var(--gd);
    border-color: var(--g);
}

/* ─── PAGE HERO (karijera.html, vijesti.html) ─── */
.page-hero {
    background: var(--bg2);
    padding: 177px 0 56px;
    position: relative;
    overflow: hidden;
}
.page-hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    opacity: 0.1;
    filter: grayscale(0.5);
    -webkit-mask-image: radial-gradient(ellipse at 70% 35%, black 0%, transparent 70%);
    mask-image: radial-gradient(ellipse at 70% 35%, black 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.page-hero.has-bg-img .page-hero-photo { display: none; }

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 75% 40%, rgba(59,45,143,0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 15% 85%, rgba(114,192,44,0.07) 0%, transparent 50%);
    z-index: 1;
}
/* Overlay koji se pojavljuje kada je postavljena fotografija */
.page-hero.has-bg-img::before {
    background: linear-gradient(135deg, rgba(26,22,48,0.72) 0%, rgba(26,22,48,0.45) 100%);
}
.page-hero.has-bg-img .page-hero-inner * { color: #fff !important; }
.page-hero.has-bg-img .sec-tag { color: rgba(255,255,255,0.7) !important; }
.page-hero-inner {
    position: relative;
    z-index: 2;
}
.page-hero h1 {
    font-family: 'Frutiger', sans-serif;
    font-size: var(--fs-h1);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--ls-display);
    color: var(--tx);
    margin-bottom: 20px;
}
.page-hero h1 em { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; color: var(--p); }
.page-hero p {
    font-size: var(--fs-s);
    color: var(--txm);
    max-width: 520px;
    line-height: 1.8;
}

/* ─── FOOTER ─── */
.footer {
    background: var(--bg);
    padding: 52px 0 36px;
    border-top: 1px solid var(--line);
}

.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 24px;
}

.footer-logo { height: 47px; width: auto; }   /* +30% na zahtjev (bilo 36px) */

.footer-top nav {
    display: flex;
    gap: 36px;
    flex-wrap: wrap;
}

.footer-top nav a {
    font-size: var(--fs-tag);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--txm);
    transition: var(--tf);
}

.footer-top nav a:hover { color: var(--p); }

.footer-line {
    height: 1px;
    background: var(--line);
    margin-bottom: 28px;
}

.footer-bot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: var(--fs-tag);
    color: var(--txl);
}

.footer-bot a { color: var(--txm); transition: var(--tf); }
.footer-bot a:hover { color: var(--p); }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
    .aso-grid { grid-template-columns: repeat(2, 1fr); }
    .aso-grid-hero .aso-img { height: 420px; }
    .news-grid { grid-template-columns: 1fr; }
    .news-col { flex-direction: row; }
    .news-sm .news-img { height: 220px; }
    .stores-top { grid-template-columns: 1fr; gap: 32px; }
    .store-item { grid-template-columns: 1fr auto; }
    .si-hours { display: none; }
}


@media (max-width: 900px) {
    :root { --vpad: 90px; }

    .nav-links { display: none; }
    .burger { display: flex; }

    .about-inner { grid-template-columns: 1fr; gap: 56px; }
    .contact-inner { grid-template-columns: 1fr; gap: 56px; }

    .stores-body { padding: 0 28px; }
    .news-grid     { padding: 0 28px; }
}

@media (max-width: 640px) {
    /* Velika veličina se na telefonu spušta na 22-30px. Ista vrijednost sa
       desktopa (30.4px kao donja granica) je na uskom ekranu prevelika:
       slogan je pravio traku visoku 71px, a "Odjeća / Obuća / Dodaci" su u
       tri kolone jedva stajali. */
    :root { --vpad: 72px; --nav-h: 98px; --fs-l: clamp(1.45rem, 6.6vw, 1.9rem); }

    .hero-body, .stores-label { padding-left: 20px; padding-right: 20px; }

    .mob-menu { padding: 0 20px; }

    /* Isti omjer 8:3 kao i na desktopu — traka prati širinu ekrana, pa se
       slika i ovdje vidi cijela, bez sječenja. */
    .hero-img-wrap { height: auto; max-height: none; }

    /* Asortiman kao 2 kolone na mobitelu (treća kartica ide u novi red). */
    .aso-grid { grid-template-columns: repeat(2, 1fr); }
    .aso-grid-hero .aso-img { height: 260px; margin: -28px -18px 16px; }
    .aso-grid-hero .aso-card { padding: 28px 18px; }
    .aso-grid-hero .aso-card h3 { margin-bottom: 6px; }
    .aso-grid-hero .aso-card p { font-size: 12px; line-height: 1.5; }
    .news-col { flex-direction: column; }

    .hero-body { padding-top: 90px; }
    .hero-thesis { max-width: none; }

    .about-stats { flex-wrap: wrap; gap: 28px 40px; }

    .footer-top { flex-direction: column; align-items: flex-start; gap: 36px; }
    .footer-bot { flex-direction: column; align-items: flex-start; gap: 12px; }

    .stores-body { padding: 0 20px; }
    .stores-top  { padding: 0 20px; }
    .news-grid   { padding: 0 20px; }
    .news-head   { padding: 0 20px; }
}

@media (max-width: 420px) {
    :root { --vpad: 64px; }

    .hero-body, .stores-label { padding-left: 16px; padding-right: 16px; }

    .mob-menu { padding: 0 16px; }

    .hero-body { padding-top: 80px; }

    .hero-img-wrap { height: auto; max-height: none; }
    .aso-grid-hero .aso-img { height: 210px; margin: -22px -14px 14px; }
    .aso-grid-hero .aso-card { padding: 22px 14px; }
    .aso-grid-hero .aso-card h3 { font-weight: 700; }
    .aso-grid-hero .aso-card p { font-size: 11.5px; line-height: 1.45; }

    .btn-hero { padding: 14px 24px; }

    .about-stats { flex-direction: column; gap: 24px; }
    .astat-n { line-height: 1; }

    .stores-body { padding: 0 16px; }
    .stores-top  { padding: 0 16px; }
    .news-grid   { padding: 0 16px; }
    .news-head   { padding: 0 16px; }

    /* ── Navigacija na uskim telefonima ──
       Traka se do sada nije mogla sabiti ispod ~414px: i logo i desni kraj
       imali su flex-shrink: 0, uz fiksni razmak od 40px. Na svemu užem od
       toga dugme za meni je ispadalo van ekrana, pa se meni uopšte nije mogao
       otvoriti — a to pogađa iPhone SE (375px), iPhone 14 (390px) i većinu
       Androida (360px). Ovdje se razmaci i logo smanje toliko da sve stane i
       na 320px, a logu se dopusti i da se skupi ako ikad zatreba, da ne može
       ponovo istisnuti dugme. */
}

/* ─── MAPA ─── */
.map-section {
    background: var(--bg);
    padding: var(--vpad) 0 0;
}

.map-header {
    max-width: var(--max);
    margin: 0 auto 40px;
    padding: 0 52px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.map-title {
    font-family: 'Frutiger', sans-serif;
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: var(--ls-h2);
    color: var(--tx);
    margin-top: 12px;
}

/* Filter dugmad */
.map-filters {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.mf-btn {
    padding: 11px 20px;
    font-family: 'Frutiger', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--txm);
    background: var(--bg2);
    border: 1px solid var(--line);
    transition: var(--tf);
    white-space: nowrap;
}

.mf-btn.active {
    background: var(--p);
    border-color: var(--p);
    color: var(--w);
}

.mf-btn:not(.active):hover {
    color: var(--p);
    background: var(--bg3);
}

/* Mapa kontejner */
.store-map {
    width: 100%;
    height: 640px;
    position: relative;
    z-index: 1;
    background: var(--bg2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* Leaflet overrides — light premium stil */
.leaflet-container {
    font-family: 'Frutiger', sans-serif;
    background: var(--bg2);
    cursor: grab !important;
}

.leaflet-container:active  { cursor: grabbing !important; }
.leaflet-popup-close-button { cursor: pointer !important; }
.leaflet-control-zoom a     { cursor: pointer !important; }
.az-popup .mp-maps,
.az-popup .mp-phone         { cursor: pointer !important; }

.leaflet-control-zoom a {
    background: var(--w) !important;
    color: var(--txm) !important;
    border-color: var(--line) !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 16px !important;
    transition: all 0.25s ease !important;
}

.leaflet-control-zoom a:hover {
    background: var(--p) !important;
    color: var(--w) !important;
}

.leaflet-control-zoom {
    border: none !important;
    box-shadow: var(--sh-2) !important;
}

.leaflet-control-attribution {
    background: rgba(255,255,255,0.8) !important;
    color: var(--txl) !important;
    font-size: 10px !important;
    backdrop-filter: blur(8px);
}

.leaflet-control-attribution a { color: var(--p) !important; }

/* Popup */
.az-popup .leaflet-popup-content-wrapper {
    background: var(--w);
    color: var(--tx);
    border-radius: 0;
    border: 1px solid var(--line);
    box-shadow: var(--sh-4);
    padding: 0;
}

.az-popup .leaflet-popup-tip {
    background: var(--w);
}

.az-popup .leaflet-popup-content {
    margin: 0;
    min-width: 240px;
}

.az-popup .leaflet-popup-close-button {
    color: var(--txl) !important;
    font-size: 18px !important;
    padding: 8px 10px !important;
    transition: color 0.2s ease;
}

.az-popup .leaflet-popup-close-button:hover {
    color: var(--p) !important;
    background: none !important;
}

/* Popup sadržaj */
.mp {
    padding: 18px 20px 16px;
    max-height: 360px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(59,45,143,0.35) transparent;
}

.mp-city {
    font-family: 'Frutiger', sans-serif;
    font-size: 1.35rem;
    font-style: italic;
    font-weight: 400;
    color: var(--tx);
    margin-bottom: 12px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mp-badge {
    font-family: 'Frutiger', sans-serif;
    font-size: 9px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--w);
    background: var(--p);
    padding: 3px 7px;
    border-radius: 2px;
}

.mp-store {
    padding-bottom: 12px;
}

.mp-store-multi {
    padding: 10px 0;
}

.mp-divider {
    height: 1px;
    background: var(--line);
    margin: 0;
}

.mp-addr {
    font-size: 13px;
    color: var(--tx);
    margin-bottom: 8px;
    line-height: 1.5;
}

.mp-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.mp-phone {
    display: block;
    font-size: 12px;
    color: var(--p);
    transition: opacity 0.2s ease;
}

.mp-phone:hover { opacity: 0.75; }

.mp-hours {
    font-size: 11px;
    color: var(--txm);
    line-height: 1.6;
}

.mp-hours strong { color: var(--tx); font-weight: 600; }

.mp-maps {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--w);
    background: var(--p);
    padding: 6px 12px;
    border-radius: var(--r-xs);
    transition: background 0.25s ease;
    white-space: nowrap;
}

.mp-maps:hover { background: var(--pd); }

/* Leaflet svim linkovima u mapi daje svoju plavu (.leaflet-container a), koja
   je na ljubičastom dugmetu bila gotovo nečitljiva. */
.leaflet-container a.mp-maps { color: var(--w); font-weight: 600; }

/* Responsive mapa */
@media (max-width: 900px) {
    .map-header { padding: 0 28px; flex-direction: column; align-items: flex-start; }
    .store-map  { height: 480px; }
}

@media (max-width: 640px) {
    .map-header { padding: 0 20px; }
    .store-map  { height: 380px; }
    .mf-btn     { font-size: 10px; padding: 9px 14px; }
}

/* ─── SHARED MODAL SHELL (posModal / storeModal) ─── */
.modal-backdrop {
    background: rgba(26,22,48,0.55);
    backdrop-filter: blur(4px);
}

.modal-box {
    background: var(--w);
    border-radius: var(--r-md);
    box-shadow: var(--sh-4);
    animation: modalIn 0.4s var(--ease-out);
}

.modal-close {
    transition: background var(--dur-1) ease, color var(--dur-1) ease,
                border-color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}

.modal-close:hover {
    transform: rotate(90deg);
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── VIJEST MODAL (newsModal — index.html i vijesti.html) ─── */
#newsModal {
    display: none; position: fixed; inset: 0; z-index: 10500;
    align-items: center; justify-content: center; padding: 20px;
}
#newsModal.open { display: flex; }
.nm-backdrop { position: absolute; inset: 0; }
.nm-box {
    position: relative; z-index: 1;
    width: min(92vw, 680px); max-height: 90vh; overflow-y: auto;
}
.nm-close {
    position: absolute; top: 16px; right: 16px; z-index: 2;
    background: var(--w); border: 1px solid var(--line);
    color: var(--txm); width: 32px; height: 32px;
    cursor: pointer; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.nm-close:hover { background: var(--p); color: var(--w); border-color: var(--p); }
.nm-img { position: relative; height: 280px; overflow: hidden; }
.nm-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nm-content { padding: 32px 40px 40px; }
.nm-date { display: block; font-size: var(--fs-tag); color: var(--txl); letter-spacing: 0.06em; margin-bottom: 10px; }
.nm-title {
    font-family: 'Frutiger', sans-serif;
    font-size: var(--fs-m); font-weight: 700; line-height: 1.15;
    color: var(--tx); margin-bottom: 20px;
}
.nm-body p { font-size: var(--fs-s); color: var(--txm); line-height: 1.85; margin-bottom: 16px; }
.nm-body p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
    .nm-content { padding: 24px 24px 32px; }
    .nm-img { height: 200px; }
    .nm-title { font-size: 1.6rem; }
}

@media (max-width: 420px) {
    .map-header { padding: 0 16px; }
    .store-map  { height: 320px; }
    .mf-btn     { padding: 8px 10px; }
}

/* ═══ COOKIE BANNER ═══ */
.cookie-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: var(--bg);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 30px rgba(26, 22, 48, 0.08);
    padding: 22px 0;
    transform: translateY(110%);
    transition: transform 0.5s var(--ease-out);
}
.cookie-banner.visible { transform: translateY(0); }
.cookie-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.cookie-banner-text {
    font-size: var(--fs-s);
    color: var(--txm);
    line-height: 1.65;
    max-width: 640px;
}
.cookie-banner-text a { color: var(--p); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 12px; flex-shrink: 0; }
.cookie-banner-btn {
    font-family: inherit;
    font-size: var(--fs-tag);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 13px 28px;
    border-radius: var(--r-sm);
    border: 1px solid var(--p);
    background: var(--p);
    color: var(--w);
    cursor: pointer;
    transition: var(--tf);
    white-space: nowrap;
}
.cookie-banner-btn:hover { background: var(--pd); border-color: var(--pd); }

@media (max-width: 640px) {
    .cookie-banner { padding: 20px 0; }
    .cookie-banner-inner { flex-direction: column; align-items: flex-start; }
    .cookie-banner-actions { width: 100%; }
    .cookie-banner-btn { width: 100%; text-align: center; }
}

/* ═══ LEGAL / PRIVACY PAGE ═══ */
.legal-page {
    padding: 207px 0 var(--vpad);
    background: var(--bg);
}
.legal-page .container { max-width: 820px; }
.legal-page h1 {
    font-family: 'Frutiger', sans-serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--tx);
    margin-bottom: 10px;
}
.legal-updated { font-size: 13px; color: var(--txl); margin-bottom: 48px; }
.legal-content h2 {
    font-family: 'Frutiger', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--tx);
    margin: 40px 0 14px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { font-size: 15px; color: var(--txm); line-height: 1.9; margin-bottom: 16px; }
.legal-content ul { margin: 0 0 16px; padding-left: 20px; }
.legal-content li { font-size: 15px; color: var(--txm); line-height: 1.8; list-style: disc; margin-bottom: 8px; }
.legal-content a { color: var(--p); text-decoration: underline; }
.legal-content strong { color: var(--tx); }

@media (max-width: 640px) {
    .legal-page { padding: 177px 0 var(--vpad); }
}

/* ═══ ARTICLE (SINGLE VIJEST) PAGE ═══ */
.article-page { padding: 207px 0 var(--vpad); background: var(--bg2); }
.article-page .container { max-width: 760px; }
.article-back {
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 24px; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--txm);
    transition: var(--tf);
}
.article-back:hover { color: var(--p); }
.article-card {
    background: var(--w);
    border-radius: var(--r-md);
    box-shadow: var(--sh-4);
    overflow: hidden;
}
.article-card .nm-img { height: 380px; }
.article-card .nm-title { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }

/* Dodatne fotografije vijesti (2. i 3.), ispod teksta članka. Prva slika je
   već naslovna na vrhu, pa je ovdje nema. Uz jednu dodatnu slika je puna
   širina, uz dvije stoje jedna pored druge. */
.art-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 28px;
}
/* Autorsko display: grid iznad nadjačava ugrađeno [hidden] { display: none },
   pa se skrivanje mora reći izričito — inače prazna galerija zauzme prostor. */
.art-gallery[hidden] { display: none; }

.art-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-sm);
    display: block;
}

@media (max-width: 640px) {
    .article-page { padding: 177px 0 var(--vpad); }
    .article-card .nm-img { height: 220px; }
    .art-gallery { grid-template-columns: 1fr; }
}

/* ── Toast (obavještenje o slanju forme) ── */
#toast {
    position: fixed; bottom: 28px; right: 28px; z-index: 9999;
    background: var(--tx); color: #fff;
    padding: 13px 22px; border-radius: 4px;
    font-size: 13px; font-weight: 500;
    box-shadow: 0 8px 32px rgba(0,0,0,0.20);
    transform: translateY(12px); opacity: 0;
    transition: all 0.28s; pointer-events: none;
    max-width: calc(100vw - 56px);
}
#toast.on { transform: translateY(0); opacity: 1; }
#toast.ok::before  { content: '✓  '; color: var(--g); font-weight: 700; }
#toast.err::before { content: '✕  '; color: #f87171; font-weight: 700; }


/* ─── Traka sa sloganom ispod hero slike ───
   Preliv teče s lijeva na desno kao i trake oko sekcije sa mapom, pa se dva
   mjesta na stranici drže istog poteza. Gradijent počinje i završava istom
   bojom, tako da se pomjeranje za tačno jednu širinu ponavlja bez šava. */
.hero-slogan {
    /* Unutar .hero sekcije stoje apsolutno pozicionirani slojevi .hero-noise
       i .hero-glow preko cijele njene površine. Bez svog sloja traka ostaje
       ispod njih — preliv se ne vidi, a bijeli tekst se izgubi na bijelom. */
    position: relative;
    z-index: 2;
    margin: 0;
    /* Na zahtjev: font 40% manji od --fs-l, traka 20% niža nego ranije.
       Izuzetak od tipografske skale — slogan je traka, ne naslov sekcije.
       Padding je izveden tako da visina ostane tačno 80% stare
       (1.15·F + 2·clamp(18px, 2.4vw, 32px)) na svakoj širini. */
    padding: calc(var(--fs-l) * 0.115 + clamp(14.4px, 1.92vw, 25.6px)) 20px;
    text-align: center;
    font-family: 'Frutiger', sans-serif;
    font-size: calc(var(--fs-l) * 0.6);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--w);
    /* Samo plava, bez zelene: od tamne brend plave preko same brend plave do
       svjetlijeg ljubičasto-plavog i nazad. Preliv počinje i završava istom
       bojom, pa se pomjeranje za tačno jednu širinu ponavlja bez vidljivog
       šava. */
    background: linear-gradient(90deg, var(--pd), var(--p) 25%, #6A4FD6 50%, var(--p) 75%, var(--pd));
    background-size: 200% 100%;
    animation: trakaTece 14s linear infinite;
}

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

/* ─── Kategorije ispod hero slike (Odjeća / Obuća / Dodaci) ───
   Tri fotografije u redu s razmakom između, ispod svake samo naziv —
   bez okvira kartice i bez ljubičastog hover efekta. Stoji na kraju fajla
   da pregazi .aso-card/.aso-img pravila i njihove media query varijante. */
.aso-grid-hero {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 3vw, 48px);
    padding: clamp(20px, 3vw, 48px) 0 clamp(8px, 1vw, 16px);
    background: var(--bg);
}
.aso-grid-hero .aso-card,
.aso-grid-hero .aso-card:hover {
    background: transparent;
    border: 0;
    padding: 0;
    transform: none;
    box-shadow: none;
    text-align: right;
}
.aso-grid-hero .aso-card::before { display: none; }
.aso-grid-hero .aso-img {
    height: auto;
    aspect-ratio: 4 / 4.3;
    margin: 0 0 clamp(10px, 1.4vw, 20px);
}
.aso-grid-hero .aso-img img { object-position: center center; }
.aso-grid-hero .aso-card:hover .aso-img img { transform: scale(1.04); }
/* Naslovi "Odjeća / Obuća / Dodaci" su udvostručeni na zahtjev — ranije
   clamp(1.15rem, 2.3vw, 2rem). Uz sliku od pola ekrana iznad, natpis od 2rem
   se gubio; sada je to naslov, a ne potpis ispod slike. */
.aso-grid-hero .aso-card h3,
.aso-grid-hero .aso-card:hover h3 {
    /* Ista veličina kao slogan "Moda pripada svima" odmah iznad. */
    font-size: calc(var(--fs-l) * 0.6);
    line-height: 1.1;
    margin: 0;
    color: var(--tx);
}
.aso-grid-hero .aso-card p { display: none; }

@media (max-width: 1024px) {
    .aso-grid-hero { grid-template-columns: repeat(3, 1fr); }
    .aso-grid-hero .aso-img { height: auto; }
}
@media (max-width: 640px) {
    .aso-grid-hero { grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px 12px 4px; }
    .aso-grid-hero .aso-img { height: auto; margin: 0 0 8px; }
    .aso-grid-hero .aso-card { padding: 0; }
    .aso-grid-hero .aso-card h3 { margin: 0; }
}
@media (max-width: 420px) {
    .aso-grid-hero .aso-img { height: auto; margin: 0 0 6px; }
    .aso-grid-hero .aso-card { padding: 0; }
    /* Naslovi kategorija više nemaju svoj izuzetak — od kako se --fs-l na
       telefonu spušta na 22px, skala staje u tri kolone i na 320px. */
}

/* ══════════════════════════════════════
   ZAVRŠNO USKLAĐIVANJE ZA TELEFON
   Pregled svih stranica na 360 i 390px: ništa ne izlazi van ekrana, ali je
   nekoliko stvari na telefonu izgledalo drugačije nego na računaru ili se
   teško pogađalo prstom.
══════════════════════════════════════ */

/* Kategorije su na računaru išle od ruba do ruba ekrana, pa je desno
   poravnato "Dodaci" udaralo u sam rub. Sada imaju isti razmak od ruba kao
   razmak između slika, na svakoj širini — kao na telefonu. */
.aso-grid-hero {
    padding-left: clamp(12px, 3vw, 48px);
    padding-right: clamp(12px, 3vw, 48px);
}

/* Slogan, Odjeća/Obuća/Dodaci i "Za cijelu porodicu" su iste veličine
   (60% od --fs-l). Na telefonu je to bilo svega 15px — naslov "Za cijelu
   porodicu" ispao je manji od rečenice ispod njega. Ne idu ispod 20px, i
   dalje sva tri jednaka. */
.hero-slogan,
.aso-grid-hero .aso-card h3,
.aso-grid-hero .aso-card:hover h3,
.aso-header h2 {
    font-size: max(calc(var(--fs-l) * 0.6), 1.25rem);
}

/* Dodirne površine: jezici, meni, linkovi sa strelicom i footer bili su
   visoki 17–28px, a prst traži oko 44px. Površina se proširuje paddingom
   koji se poništi marginom, pa izgled ostaje isti, samo se lakše pogađa. */
@media (max-width: 768px) {
    .lang-sw { gap: 10px; }
    .lang { min-height: 40px; padding: 4px 6px; }

    .burger { padding: 13px 9px; margin: -13px -9px; }

    .link-arrow,
    .sp-btn { padding-top: 12px; padding-bottom: 12px; margin-top: -12px; margin-bottom: -12px; }
    .article-back { padding: 12px 0; margin: -12px 0 12px; }

    .ccat-btn { min-height: 40px; }

    .footer-top nav { gap: 0 24px; }
    .footer-top nav a { display: inline-block; padding: 12px 0; }
    .footer-bot { gap: 2px 16px; }
    .footer-bot a { display: inline-block; padding: 8px 0; }
}

/* ══════════════════════════════════════
   REDIZAJN NASLOVNE PO PLANU (3.10.2026.)
══════════════════════════════════════ */

/* 3 — slike kategorija 15% manje, u istom omjeru i istom rasporedu
   (nazivi desno). Red se suzi tačno toliko da svaka slika bude 85% stare
   širine: 3 slike = širina − 2 ruba − 2 razmaka, a rub i razmak su isti
   clamp(12px, 3vw, 48px), pa se njihova 4 komada dodaju nazad umanjena.
   Bijela pozadina se produži do rubova ekrana, inače se sa strana vide
   pruge prelivene pozadine hero sekcije. Na telefonu ostaje kako je. */
@media (min-width: 769px) {
    .aso-grid-hero {
        width: calc(85% + 0.6 * clamp(12px, 3vw, 48px));
        margin-left: auto;
        margin-right: auto;
        box-shadow: 0 0 0 100vmax var(--bg);
        clip-path: inset(0 -100vmax);
    }
}

/* 4a — ispod "Za cijelu porodicu" kratki opis lanca, običnim slovima. */
.aso-note {
    font-size: var(--fs-s);
    font-style: normal;
    max-width: 620px;
    line-height: 1.7;
}
/* Opis u dva reda — svaka rečenica u svom redu (prelom je <br> u samom
   tekstu, i u prevodima u i18n.js). Širina je dovoljna da nijedna rečenica
   ne pređe u treći red; na telefonu se duža rečenica i dalje prelomi. */
.aso-note { max-width: 760px; }

/* 4b — traka "Moda za svakoga": ista ljubičasta kao kontakt sekcija, tekst
   centriran, ispod tri ikone. Zamjenjuje raniju sekciju "O nama". */
.about-band {
    background: linear-gradient(160deg, #2E2270 0%, #3F31A0 100%);
    color: var(--w);
    padding: clamp(56px, 7vw, 96px) 0;
    text-align: center;
}
.about-band-inner { max-width: 900px; }
.about-band-title {
    font-family: 'Frutiger', sans-serif;
    font-size: max(calc(var(--fs-l) * 0.6), 1.25rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--w);
    margin-bottom: clamp(36px, 4vw, 56px);   /* jasan razmak do bloka s tekstom (bilo 20 → 24 → 40px) */
}
.about-band-text p {
    /* Na zahtjev još veće: 24px na računaru, 19px na manjim ekranima
       (bilo 21.25 / 18.75px). */
    font-size: clamp(1.1875rem, 1.667vw, 1.5rem);
    line-height: 1.7;
    color: rgba(255,255,255,0.88);
    margin: 0 auto 16px;     /* +15% između pasusa (bilo 14px) */
    max-width: 900px;
}
.about-band-text em { font-style: italic; color: var(--w); }

/* Oba pasusa kao jedan uredno složen blok, bez okvira. Poravnanje s obje
   strane (justify) je probano i odbačeno — pregledači nemaju rastavljanje
   bosanskih riječi na slogove, pa su između riječi nastajale velike rupe.
   Ni text-wrap: balance nije dao jednake redove (544 / 614 / 699px). */
.about-band-text {
    max-width: var(--band-tekst-w, 900px);
    margin: 0 auto;
}
/* Prelome redova bira slozBandTekst() u script.js (svaki red je
   .bt-red), tako da su svi redovi oba pasusa približno jednake dužine. */
.about-band-text p {
    max-width: none;
    text-align: center;
}
.about-band-text .bt-red { display: block; white-space: nowrap; }
.about-band-text p:last-child { margin-bottom: 0; }
.about-icons {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: clamp(28px, 7vw, 110px);
    margin-top: clamp(37px, 4.6vw, 55px);   /* +15% do ikona (bilo 32–48px) */
    padding: 0;
}
.about-icons li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    font-size: 0.6325rem;    /* 8.8px +15% = 10.1px (prvobitno 11px) */
    font-weight: 600;
    letter-spacing: 0.02em;  /* mala slova na zahtjev — bez velikih slova i razmaka među njima */
    line-height: 1.4;
    color: rgba(255,255,255,0.92);
}
/* Red sa ikonama je tačno širok koliko i najduži red teksta iznad
   (--band-blok-w postavlja slozBandTekst), a prva i zadnja ikona stoje na
   njegovim ivicama — tekst i ikone su u istoj koloni, ništa ne viri van. */
.about-icons {
    width: 100%;
    max-width: var(--band-blok-w, 700px);
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
    gap: 12px;
}
/* Ikone: 34px +15% = 39px (prvobitno 42.5px); natpis svake u jednoj liniji. */
.about-icons svg { color: var(--g); width: 39px; height: 39px; }
@media (min-width: 640px) {
    .about-icons li { white-space: nowrap; }
}
/* Na telefonu tri natpisa u jednoj liniji ne stanu jedan pored drugog, pa
   se tu prelamaju ispod ikone. */
@media (max-width: 639px) {
    .about-icons li { max-width: 112px; }
}

/* 6 — "Uvijek u toku": tekst najnovije vijesti lijevo na svijetlozelenoj
   podlozi, desno dvije uspravne fotografije. */
.news { padding: clamp(48px, 6vw, 80px) 0; }
.news-feature {
    max-width: 1320px;     /* šire fotografije traže šire polje, da tekst ne uzdrma */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(14px, 2vw, 24px);
    align-items: stretch;
}
.nf-text {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(28px, 3.6vw, 48px);
    border-radius: var(--r-md);
    background: #EEF7E4;               /* svijetla nijansa zelene iz logotipa */
}
.nf-head {
    font-family: 'Frutiger', sans-serif;
    font-size: max(calc(var(--fs-l) * 0.6), 1.25rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--tx);
    margin-bottom: 6px;
}
.nf-head em { font-style: italic; color: var(--p); }
.nf-story { cursor: pointer; }
.nf-story time {
    display: block;
    font-size: var(--fs-tag);
    color: var(--txl);
    margin-bottom: 6px;
}
.nf-story h3 {
    font-family: 'Frutiger', sans-serif;
    font-size: var(--fs-m);
    font-weight: 700;
    line-height: 1.3;
    color: var(--tx);
    margin-bottom: 10px;
}
.nf-story p {
    font-size: var(--fs-s);
    line-height: 1.7;
    color: var(--txm);
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nf-all { margin-top: auto; padding-top: 6px; }

.nf-imgs { display: flex; gap: clamp(10px, 1.4vw, 16px); }
.nf-imgs[hidden] { display: none; }
.nf-img {
    display: block;
    width: clamp(160px, 23vw, 310px);     /* šire fotografije (bilo 150–230px) */
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg3);
}
.nf-img img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ease-out);
}
.nf-img:hover img { transform: scale(1.04); }

/* Još 15% šire na većim ekranima (310 → 357px). Ispod 1260px su
   fotografije ispod teksta (vidi niže). */
@media (min-width: 1260px) {
    .nf-img { width: clamp(160px, 26.5vw, 357px); }
}

/* Ispod 1260px nema mjesta za tekst i dvije fotografije u istom redu: na
   1024px su fotografije bile uske trake (236×488), razvučene do visine
   teksta. Tu tekst ide preko cijele širine, a fotografije ispod njega —
   vodoravne 4:3 na tabletu, uspravne 3:4 na telefonu (kao na računaru). */
@media (max-width: 1259px) {
    .news-feature { grid-template-columns: 1fr; }
    .nf-img { flex: 1 1 0; width: auto; }
    .nf-img img { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
    .nf-imgs--jedna .nf-img { max-width: 60%; }
}
@media (max-width: 480px) {
    .nf-img img { aspect-ratio: 3 / 4; }
}
@media (max-width: 480px) {
    .about-icons { gap: 16px; }
    .about-icons li { letter-spacing: 0.02em; }
}

/* ══════════════════════════════════════
   OTVOREN MENI NA TELEFONU (☰)
   Ranije: bijeli ekran preko cijele stranice sa ogromnim kurzivnim
   natpisima (do 80px), bez ikakve oznake gdje se nalazite, i jezicima po
   drugi put (već stoje u zaglavlju). Sada: list koji se spusti ispod
   zaglavlja, stavke čitljive veličine sa strelicom i linijom između,
   otvorena stranica označena bojom, ostatak sajta zatamnjen (dodir na
   njega zatvara meni — vidi zatvoriMobMeni u script.js). Zaglavlje sa
   logom i ✕ ostaje vidljivo iznad. Meni na računaru se ne mijenja.
══════════════════════════════════════ */
.mob-menu {
    inset: var(--nav-h) 0 auto 0;
    max-height: calc(100svh - var(--nav-h));
    justify-content: flex-start;
    padding: 6px 24px calc(22px + env(safe-area-inset-bottom)) !important;
    background: var(--w);
    border-top: 1px solid var(--line);
    overflow-y: auto;
    transform: translateY(-10px);
    transition: opacity 0.28s ease, transform 0.32s var(--ease-out), visibility 0.28s, box-shadow 0.28s ease;
}
.mob-menu.open {
    transform: none;
    box-shadow: 0 0 0 100vmax rgba(26,22,48,0.42);
}
.mob-menu ul { margin-bottom: 18px; }
.mob-menu ul li {
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s ease, transform 0.3s var(--ease-out);
}
/* Stavke se pojave jedna za drugom. */
.mob-menu.open ul li { opacity: 1; transform: none; }
.mob-menu.open ul li:nth-child(2) { transition-delay: 0.04s; }
.mob-menu.open ul li:nth-child(3) { transition-delay: 0.08s; }
.mob-menu.open ul li:nth-child(4) { transition-delay: 0.12s; }
.mob-menu.open ul li:nth-child(5) { transition-delay: 0.16s; }

.mob-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 17px 2px;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
}
.mob-link::after {
    content: '→';
    font-weight: 400;
    color: var(--txl);
    transition: transform 0.25s ease, color 0.25s ease;
}
.mob-link:hover,
.mob-link:active { transform: none; color: var(--p); }
.mob-link:hover::after,
.mob-link:active::after { transform: translateX(4px); color: var(--p); }
.mob-link.nav-active { color: var(--p); }
.mob-link.nav-active::after { color: var(--p); }

/* Jezici već stoje u zaglavlju odmah iznad — ovdje bi bili drugi put. */
.mob-menu .mob-lang { display: none; }
.mob-bottom { font-size: var(--fs-s); gap: 0; }
.mob-bottom p { color: var(--txm); }

/* Tanka ljubičasto-zelena linija na vrhu — ista kao trake na naslovnoj. */
.mob-menu::before {
    content: '';
    display: block;
    flex-shrink: 0;
    height: 4px;
    margin: -6px -24px 16px;
    background: linear-gradient(90deg, var(--p), #6A4FD6 45%, var(--g));
}

/* Istaknuta kartica "Pronađite najbližu poslovnicu" */
.mm-glavna {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 16px;
    margin-bottom: 6px;
    border-radius: 16px;
    color: var(--w);
    background: linear-gradient(135deg, var(--pd) 0%, var(--p) 55%, #6A4FD6 100%);
    box-shadow: var(--sh-brand-1);
    transition: transform 0.2s ease;
}
.mm-glavna:active { transform: scale(0.98); }
.mm-glavna-ikona {
    width: 44px; height: 44px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--g);
    background: rgba(255,255,255,0.14);
}
.mm-glavna strong { display: block; font-size: 1rem; font-weight: 700; line-height: 1.25; }
.mm-glavna small { display: block; margin-top: 3px; font-size: 12.5px; color: rgba(255,255,255,0.78); }
.mm-glavna-str { margin-left: auto; font-size: 20px; color: var(--g); }

/* Stavke: ikona · naziv i opis · (broj) · strelica */
.mob-link { justify-content: flex-start; gap: 14px; padding: 12px 2px; font-size: 1.05rem; }
.mob-link::after { margin-left: auto; }
.mob-link:has(.mm-broj:not([hidden]))::after { margin-left: 10px; }
.mm-ikona {
    width: 40px; height: 40px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    color: var(--p);
    background: var(--bg2);
    transition: background 0.2s ease, color 0.2s ease;
}
.mob-link.nav-active .mm-ikona { color: var(--w); background: var(--p); }
.mm-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-opis { font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--txl); }
.mm-broj {
    margin-left: auto;
    min-width: 24px; height: 24px;
    padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    font-size: 12px; font-weight: 700;
    color: var(--tx);
    background: var(--g);
}
.mm-broj[hidden] { display: none; }

/* Dno: e-mail i društvene mreže */
.mm-mail {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    color: var(--p) !important;
    font-weight: 600;
}
.mm-mreze {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    margin-top: 6px;
    border-top: 1px solid var(--line);
    font-size: var(--fs-tag);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--txl);
}
.mm-mreze div { display: flex; gap: 8px; }
.mm-mreze a {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--p) !important;
    border: 1.5px solid var(--line);
}
.mm-mreze a:active { background: var(--p); color: var(--w) !important; border-color: var(--p); }

@media (prefers-reduced-motion: reduce) {
    .mob-menu, .mob-menu ul li { transition: none; transform: none; }
}

/* ═══ NEWSLETTER — niska traka između vijesti i kontakta ═══ */
.newsletter {
    position: relative;
    background: #F4F2FB;
    padding: calc(clamp(36px, 4.5vw, 56px) + 8px) 0 clamp(36px, 4.5vw, 56px);
}
/* Odvaja traku od vijesti iznad: ista ljubičasto-zelena traka kao kod
   "Naše poslovnice", samo tanja, sa istim odsjajem koji prelazi preko. */
.newsletter::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 8px;
    background:
        linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent) no-repeat,
        linear-gradient(90deg, var(--pd) 0%, var(--p) 30%, #6A4FD6 46%, var(--g) 62%, #9BE04F 100%);
    background-size: 26% 100%, 100% 100%;
    background-position: -60% 0, 0 0;
    animation: trakaVal 5.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .newsletter::before { animation: none; } }
.nl-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    gap: clamp(20px, 4vw, 64px);
    align-items: center;
}
.nl-copy .sec-tag { margin-bottom: 10px; }
.nl-title {
    font-family: 'Frutiger', sans-serif;
    font-size: max(calc(var(--fs-l) * 0.6), 1.25rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--tx);
    margin: 0 0 8px;
}
.nl-title em { color: var(--p); }
.nl-sub { font-size: var(--fs-s); color: var(--txm); line-height: 1.55; margin: 0; max-width: 520px; }
.nl-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Polje je istaknuto kao jedna bijela kutija sa ljubičastim okvirom,
   ikonom koverte i dugmetom unutra, da se odmah vidi gdje se upisuje. */
.nl-polje {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--w);
    border: 2px solid var(--p);
    border-radius: var(--r-md);
    padding: 6px 6px 6px 16px;
    box-shadow: 0 14px 34px -14px rgba(59,45,143,0.45);
    transition: border-color .2s, box-shadow .2s;
}
.nl-inner.in .nl-polje { animation: nlPuls 1.8s ease-out .5s 2; }
@keyframes nlPuls {
    0%   { box-shadow: 0 0 0 0 rgba(114,192,44,0.55), 0 14px 34px -14px rgba(59,45,143,0.45); }
    100% { box-shadow: 0 0 0 14px rgba(114,192,44,0), 0 14px 34px -14px rgba(59,45,143,0.45); }
}
.nl-polje:focus-within {
    border-color: var(--g);
    box-shadow: 0 0 0 4px rgba(114,192,44,0.22), 0 14px 34px -14px rgba(59,45,143,0.45);
    animation: none;
}
.nl-ikona { flex: none; color: var(--p); }
.nl-polje input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0;
    font: inherit;
    font-size: 1rem;          /* 16px — ispod toga iPhone zumira stranicu pri kucanju */
    color: var(--tx);
    background: transparent;
    border: 0;
    outline: none;
}
.nl-polje input::placeholder { color: var(--txm); opacity: 1; }
.nl-btn {
    flex: none;
    height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--p);
    color: var(--w);
    font: inherit;
    font-size: var(--fs-s);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s;
}
.nl-btn:hover { background: var(--g); }
.nl-btn:disabled { opacity: .6; cursor: default; }
.nl-msg { margin: 0; min-height: 1.4em; font-size: var(--fs-tag); font-weight: 600; letter-spacing: .02em; }
.nl-msg.ok { color: var(--gd); }
.nl-msg.greska { color: #C0392B; }
@media (max-width: 768px) {
    .nl-inner { grid-template-columns: 1fr; text-align: center; }
    .nl-sub { margin-inline: auto; }
    .nl-polje { text-align: left; }
}
@media (max-width: 420px) {
    .nl-polje { flex-wrap: wrap; padding: 6px 6px 6px 14px; }
    .nl-polje input { flex-basis: calc(100% - 40px); }
    .nl-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .nl-inner.in .nl-polje { animation: none; } }

/* ═══ IZBOR JEZIKA — dugme sa zastavicom i padajući meni ═══
   Dugme i meni pravi ugradiZastave() u i18n.js od postojećih .lang linkova. */
.lang-sw.lang-dd { position: relative; gap: 0; }
.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 11px 0 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--w);
    color: var(--tx);
    font-family: 'Frutiger', sans-serif;
    font-size: var(--fs-tag);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s, color .2s, box-shadow .2s;
}
.lang-btn:hover,
.lang-dd.otvoren .lang-btn { border-color: var(--p); color: var(--p); box-shadow: 0 4px 14px -6px rgba(59,45,143,0.35); }
.lang-btn:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }
.lang-btn-str { transition: transform .2s; }
.lang-dd.otvoren .lang-btn-str { transform: rotate(180deg); }

.lang-zast {
    flex: none;
    display: inline-block;
    width: 22px;
    height: 15px;
    border-radius: 3px;
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 0 0 1px rgba(26,22,48,0.12);
}
.lang-zast svg { display: block; width: 100%; height: 100%; }

.lang-meni {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1001;
    min-width: 184px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: var(--w);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: 0 18px 40px -12px rgba(26,22,48,0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.lang-dd.otvoren .lang-meni { opacity: 1; visibility: visible; transform: none; }
.lang-meni .lang {
    justify-content: flex-start;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--r-sm);
    font-size: var(--fs-s);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--tx);
}
.lang-meni .lang:hover { background: #F4F2FB; color: var(--p); }
.lang-meni .lang.active { color: var(--p); font-weight: 600; }
.lang-kvaka { margin-left: auto; color: var(--g); font-weight: 700; opacity: 0; }
.lang-meni .lang.active .lang-kvaka { opacity: 1; }
@media (max-width: 768px) {
    .lang-meni .lang { min-height: 46px; padding: 0 12px; }
}
@media (max-width: 380px) {
    .lang-btn { gap: 6px; padding: 0 9px 0 7px; }
}