/* =========================================
   HEDONIST & CO — DARK LUX (BRG + BLACK)
   ========================================= */

/* Vars */
:root{
  --black:#0a0a0a;
  --ink:#e9e9e9;
  --muted:#a5a5a5;
  --line:#141414;                 /* diskretan divider */
  --green:#004225;                /* British Racing Green */
  --green-2:#0b5a39;              /* hover */
  --paper:#111;                   /* tamne kartice */
  --radius:16px;
  --shadow:0 20px 44px rgba(0,0,0,.36);
  --max-w:1180px;
  --gutter:clamp(16px,4vw,32px);
  --serif:"Playfair Display", serif;
  --sans:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Base / reset */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.page{
  margin:0; background:var(--black); color:var(--ink);
  font:400 16px/1.65 var(--sans); -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{text-decoration:none; color:inherit}
h1,h2,h3{font-family:var(--serif); line-height:1.12; margin:0 0 .55em}
.container{max-width:var(--max-w); margin:0 auto; padding:0 var(--gutter)}

/* ======================
   HEADER (crn) 
   ====================== */
.header{
  position:sticky; top:0; z-index:50;
  background:#000;
  border-bottom:2px solid var(--green);
}
.header__row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}

/* LOGO samo u headeru (spriječi uticaj na druge .logo elemente po stranici) */
.header .logo{ display:inline-flex; align-items:center; gap:10px; line-height:1 }
.header .logo img{ height:50px; width:auto; display:block }
@media (min-width:1200px){ .header .logo img{ height:60px } }

/* Nav */
.nav{display:flex; gap:clamp(14px,3vw,28px)}
.nav a{position:relative; padding:8px 0}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav a:hover::after{transform:scaleX(1)}
.nav a.active::after{ transform:scaleX(1) }

/* ===== HERO — slika kao pozadina, tekst preko ===== */
.hero{
  position:relative;
  min-height:90vh;
  display:flex; align-items:flex-end;
  background:url("../assets/images/hero/hero.webp") center center/cover no-repeat;
  color:#fff; overflow:hidden;
}
@media (max-width:768px){ .hero{ min-height:54vh } }

.hero::before{ /* gradijent za čitljivost */
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(0,0,0,.24) 0%, rgba(0,0,0,.78) 85%);
  pointer-events:none;
}

/* tekst u hero-u */
.hero__content{
  position:relative; z-index:1;
  max-width:720px;
  padding: clamp(18px, 4vw, 28px) 0 clamp(24px, 5vw, 38px);
  text-align:left;
}
@media (max-width:768px){
  .hero__content{ text-align:center; margin:0 auto; }
}
.hero__content h1{
  font-size: clamp(2rem, 1.2rem + 3vw, 3.2rem);
  color:#f3f3f3; letter-spacing:.2px; margin:0 0 .6rem;
}
.lead{max-width:720px; color:#e2e2e2; font-size:clamp(1rem,.92rem + .45vw,1.15rem); margin:0 0 1.1rem}

/* Buttons */
.actions {
  display: flex;
  justify-content: center;   /* centrira horizontalno */
  align-items: center;       /* centrira vertikalno ako treba */
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  text-align: center;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 20px; border-radius:999px;
  font-weight:600; border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn--primary{background:var(--green); color:#fff; border-color:var(--green)}
.btn--primary:hover{background:var(--green-2); box-shadow:var(--shadow)}
.btn--outline{background:transparent; color:#eaeaea; border-color:#eaeaea}
.btn--outline:hover{background:#171717}
.btn--light{background:#fff; color:#fff; border-color:#fff; color:var(--green)}
.btn--light:hover{background:#f5f5f5}
.btn--ghost{background:transparent; color:#fff; border-color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.08)}
.btn--full{width:100%}

/* Sekcije – veći razmak + zelena linija između */
.section{
  padding: clamp(64px, 8.5vw, 120px) 0;
  border-top:2px solid var(--green);
}

/* Zelena traka (kompaktna) */
.strip{background:var(--green); color:#fff; padding: clamp(34px, 6vw, 60px) 0}
.strip__inner{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center}
.strip__inner h2{font-size:clamp(1.7rem, 1.1rem + 1.8vw, 2.4rem)}
.strip__inner p{margin:0 0 6px; color:#f4f4f4}

/* Naslovi sekcija (ujednačeno) */
.section .section-head{ text-align:center; margin-bottom: clamp(20px, 4.5vw, 34px) }
.section .section-head p{ margin:0; color:var(--muted) }

/* Principles */
.principles .section-head{text-align:center; margin-bottom: clamp(20px, 4.5vw, 36px)}
.principles__grid{display:grid; gap:clamp(18px, 3.5vw, 28px); grid-template-columns:1fr}
.p-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding: clamp(18px, 4vw, 26px); box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.p-card:hover{transform:translateY(-2px); box-shadow:0 24px 50px rgba(0,0,0,.42)}
.p-card__dot{width:12px; height:12px; border-radius:50%; background:var(--green); margin-bottom:8px}
.p-card h3{margin-bottom:6px}

/* IG preview / galerija */
.ig-preview .section-head{text-align:center; margin-bottom: clamp(20px, 4.5vw, 34px)}
.ig__grid{display:grid; gap:12px; grid-template-columns:repeat(2,1fr)}
.ig__item{position:relative; overflow:hidden; border-radius:18px; background:#0f0f0f}
.ig__item img{width:100%; aspect-ratio:1/1; object-fit:cover; transform:translateZ(0)}
.ig__item::after{content:""; position:absolute; inset:0; background:rgba(0,66,37,.55); opacity:0; transition:opacity .28s}
.ig__item:hover::after{opacity:1}
.more{text-align:center; margin-top:18px}
details.more summary.btn{ list-style:none; cursor:pointer }
details.more summary::-webkit-details-marker{ display:none }

/* Citat – zelena traka, kompaktna */
.quote{background:var(--green); color:#fff; padding: clamp(36px, 6.5vw, 72px) 0; border-top:2px solid var(--green)}
.quote__inner{text-align:center}
.quote__inner h3{font-size:clamp(1.2rem, 1rem + .9vw, 1.6rem); margin:0}

/* Info panel (kontakt + mapa) */
.info__inner{display:grid; gap:clamp(18px, 3.8vw, 28px); grid-template-columns:1fr; align-items:stretch}
.info__text h2{font-size:clamp(1.6rem, 1.1rem + 1vw, 2rem)}
.info__card{
  background:var(--paper); border:1px solid var(--line); border-radius:20px;
  padding: clamp(18px, 4vw, 28px); box-shadow:var(--shadow);
  height:100%; display:flex; flex-direction:column;
}
.info__card .actions{ margin-top:14px }
.list{list-style:none; margin:0; padding:0}
.list li{padding:8px 0; border-bottom:1px dashed #1f1f1f}
.list li:last-child{border-bottom:0}

.info__map{
  min-height:420px;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:#0f0f0f;
}
.info__map iframe{ width:100%; height:100%; border:0; display:block }

/* ======================
   FOOTER (crn)
   ====================== */
.footer{background:#000; color:#d0d0d0; border-top:2px solid var(--green); padding: clamp(34px, 6vw, 60px) 0}
.footer__grid{
  display:grid; gap:clamp(16px, 3.6vw, 28px);
  grid-template-columns: 1.1fr .8fr .8fr;
}
.f-block h4{margin:0 0 10px; font-family:var(--serif); font-size:1.05rem; color:#f1f1f1}
.logo--sm{display:block; font-weight:700; margin-bottom:6px}
.logo--sm img{ height:70px }
.muted{color:var(--muted)}
.footer__nav a{display:block; padding:6px 0; opacity:.9}
.footer__nav a:hover{opacity:1; color:#fff}
.f-list{list-style:none; padding:0; margin:0}
.f-list li+li{margin-top:6px}
.f-list a{opacity:.9}
.f-list a:hover{opacity:1; color:#fff}

/* ======================
   BRANDS GRID (collection)
   ====================== */
.brands{
  display:grid;
  gap:clamp(12px,2vw,16px);
  grid-template-columns:repeat(2,1fr);
  align-items:center;
}
.brand{
  background:var(--paper);
  border:3px solid var(--green-2);
  border-radius:16px;
  padding:clamp(12px,2vw,18px);
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:16/9;
}
.brand img{
  max-height:56px; width:auto;
  opacity:.92;
  filter:grayscale(100%) contrast(1.08) brightness(.95);
  transition:filter .2s ease, opacity .2s ease, transform .2s ease;
}
.brand:hover img{
  filter:grayscale(0) contrast(1.05) brightness(1.05);
  opacity:1; transform:scale(1.02);
}

/* ======================
   LIGHTBOX (centriran panel + thumbs)
   ====================== */
.lightbox[hidden]{ display:none }
.lightbox{
  position:fixed; inset:0; z-index:999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.88);
  padding:clamp(12px,4vw,40px);
}
.lightbox__panel{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px; /* slika + kolona thumbs */
  gap:12px;
  align-items:center;
  max-width:min(96vw, 1680px);
  width:100%;
}
.lightbox__img{
  width:100%;
  max-height:88vh;
  object-fit:contain;
  border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lightbox__thumbs{
  display:flex; flex-direction:column; gap:8px;
  max-height:88vh; overflow:auto; padding-left:2px;
}
.lightbox__thumb{
  all:unset; cursor:pointer; border-radius:10px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
}
.lightbox__thumb img{
  display:block; width:100%; height:82px; object-fit:cover;
}

/* Kontrole */
.lightbox__btn{
  position:fixed; display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:999px;
  background:rgba(255,255,255,.1); color:#fff; border:1px solid #2a2a2a;
  transition:background .2s ease, transform .15s ease;
  backdrop-filter:saturate(140%) blur(4px);
  user-select:none;
  z-index:1000; /* iznad overlaya */
}
.lightbox__close{ top:18px; right:18px; font-size:26px; line-height:1 }
.lightbox__prev { left:18px;  top:50%; transform:translateY(-50%) }
.lightbox__next { right:18px; top:50%; transform:translateY(-50%) }
.lightbox__close:hover,
.lightbox__close:focus-visible{ background:rgba(255,255,255,.16); transform:scale(1.03) }
.lightbox__prev:hover,
.lightbox__prev:focus-visible{ background:rgba(255,255,255,.16); transform:translateY(-50%) scale(1.03) }
.lightbox__next:hover,
.lightbox__next:focus-visible{ background:rgba(255,255,255,.16); transform:translateY(-50%) scale(1.03) }

/* Mobile raspored: thumbs ispod slike (horizontalni scroll) */
@media (max-width:900px){
  .lightbox__panel{ grid-template-columns:1fr; grid-template-rows:auto 110px }
  .lightbox__thumbs{ flex-direction:row; max-height:none; height:110px; overflow-x:auto; overflow-y:hidden }
  .lightbox__thumb{ min-width:110px }
  .lightbox__thumb img{ width:110px; height:100% }
}

/* ======================
   BRAND MODALS (:target)
   ====================== */
.brand-modal{ position:fixed; inset:0; z-index:1000; display:none }
.brand-modal:target{ display:block }
.brand-modal__overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(2px);
}
.brand-modal__card{
  position:relative;
  max-width:min(980px, 92vw);
  margin:7vh auto;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:clamp(18px,3.5vw,24px);
}
.brand-modal__close{
  position:absolute; right:12px; top:8px; font-size:28px; line-height:1;
  color:#e9e9e9; text-decoration:none;
}
.brand-modal__grid{
  display:grid; gap:18px; align-items:start;
  grid-template-columns: minmax(320px, 1fr) 1.2fr;
}
.brand-hero{
  width:100%; max-height:380px; object-fit:contain;
  background:#0b0b0b; border:1px solid #1a1a1a; border-radius:12px;
}
.brand-thumbs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px;
}
.brand-thumbs a{
  display:block; border:1px solid #1a1a1a; border-radius:10px; background:#0b0b0b; overflow:hidden;
}
.brand-thumbs img{ width:100%; height:90px; object-fit:contain }
.brand-actions{ margin-top:14px }
.brand-actions .btn{ height:42px; padding:0 16px }

@media (max-width:900px){
  .brand-modal__grid{ grid-template-columns:1fr }
  .brand-thumbs{ grid-template-columns:repeat(3,1fr) }
}

/* ---- Brand switch (galerija brendova u modalu) ---- */
.brand-switch{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:120px;
  gap:10px;
  overflow-x:auto;
  padding:10px 2px 4px;
  scroll-snap-type:x mandatory;
}
.brand-switch a{
  display:block;
  border:1px solid #1a1a1a;
  border-radius:10px;
  background:#0b0b0b;
  overflow:hidden;
  scroll-snap-align:start;
}
.brand-switch img{
  width:100%;
  height:90px;
  object-fit:contain;
  opacity:.92;
  filter:grayscale(100%) contrast(1.05);
  transition:filter .2s ease, opacity .2s ease, transform .2s ease;
}
.brand-switch a:hover img{
  filter:grayscale(0);
  opacity:1;
  transform:scale(1.02);
}
@media (min-width:1100px){
  .brand-switch{ grid-auto-columns:140px }
  .brand-switch img{ height:105px }
}

/* ======================
   RESPONSIVE
   ====================== */
@media (max-width:960px){

  .footer__grid{grid-template-columns:1fr}
  .hero__content{padding-bottom:24px}
  .actions .btn{height:42px; padding:0 16px}
  .brands{ grid-template-columns:repeat(2,1fr) }
}
@media (min-width:680px){
  .principles__grid{grid-template-columns:repeat(3,1fr)}
  .ig__grid{grid-template-columns:repeat(3,1fr)}
  .info__inner{grid-template-columns:1fr .9fr}
  .brands{ grid-template-columns:repeat(4,1fr) }
}

/* ===========================
   DESKTOP / WIDE REFINEMENTS
   =========================== */
@media (min-width:1200px){
  .container{ max-width: min(90vw, 1600px) }
  .hero{
    background-position: center 22%;
    background-size: cover;
  }
  .hero__content{ max-width: clamp(820px, 55vw, 1100px) }
  .hero__content h1{ font-size: clamp(3rem, 2.2vw, 4rem) }
  .lead{ font-size: clamp(1.15rem, .55vw + 1rem, 1.35rem) }
  .btn{ height:50px; padding:0 26px }

  .principles__grid{ gap:32px }
  .p-card{ padding:28px }

  .ig__grid{ grid-template-columns:repeat(6,1fr); gap:18px } /* 2 reda × 6 na desktopu */

  .info__inner{ grid-template-columns:1.2fr .8fr; gap:40px }
  .hero__content{ max-width: clamp(960px, 70vw, 1200px); margin-left:auto; margin-right:auto }
  .strip .container{ max-width: min(90vw, 1600px) }
  .strip__inner{ max-width:none }

  .brands{ grid-template-columns:repeat(6,1fr) }
}
@media (min-width:1600px){
  .container{ max-width: min(88vw, 1720px) }
  .hero__content{ max-width: clamp(1100px, 64vw, 1320px) }
}
/* Širi kontejner samo za HERO i zelenu traku */
.container--wide{ max-width:min(92vw, 1680px) }
@media (min-width:1600px){ .container--wide{ max-width:min(88vw, 1800px) } }

/* =========================
   BRAND SWITCH – dodatni polish
   ========================= */

/* Aktivni brend u traci (setuj aria-current="true" na link tog brenda) */
.brand-switch a[aria-current="true"]{
  outline:2px solid #e9e9e9;
  outline-offset:0;
  border-color:#2a2a2a;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}

/* Glatkiji scroll i tanji scroll-bar */
.brand-switch{ 
  scroll-behavior:smooth;
  scrollbar-width: thin;                 /* Firefox */
  scrollbar-color: #2a2a2a transparent;  /* Firefox */
}
.brand-switch::-webkit-scrollbar{ height:8px }
.brand-switch::-webkit-scrollbar-track{ background:transparent }
.brand-switch::-webkit-scrollbar-thumb{
  background:#2a2a2a; border-radius:999px;
}

/* Fokus pristupačnost */
.brand-switch a:focus-visible{
  outline:2px solid #74ffbf;  /* diskretan fokus */
  outline-offset:2px;
}

/* (Opcionalno) Dugmad za horizontalni skrol trake brendova */
.brand-switch-controls{
  display:flex; gap:8px; margin-top:10px;
}
.brand-switch__btn{
  width:38px; height:38px; border-radius:999px;
  background:rgba(255,255,255,.08); color:#fff; border:1px solid #2a2a2a;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .15s ease;
  backdrop-filter:saturate(140%) blur(4px);
}
.brand-switch__btn:hover{ background:rgba(255,255,255,.14); transform:scale(1.03) }
.brand-switch__btn:active{ transform:scale(.98) }

/* Sitni polish na brand modal */
.brand-modal__card{ overflow:hidden }               /* sprečava “curenje” sjena */
.brand-modal__grid{ row-gap:16px }                  /* malo gušći vertikalni ritam */
.brand-hero{ box-shadow:0 16px 40px rgba(0,0,0,.35) } /* suptilan depth */

/* Lightbox – klik mete su uvijek iznad overlaya */
.lightbox__btn{ pointer-events:auto }

/* =========================
   BRAND MODAL – FIXED LAYOUT + 2-ROW BRAND SWITCH
   ========================= */

/* 1) Fiksne dimenzije i stabilna visina kartice (ne “skače”) */
.brand-modal__card{
  width: min(1080px, 94vw);
  height: clamp(560px, 78vh, 740px);      /* fiksan vizuelni okvir */
  display: grid;
}
.brand-modal__grid{
  height: 100%;
  grid-template-columns: minmax(360px, 0.9fr) 1.1fr;  /* lijevo logo, desno sadržaj */
  align-items: stretch;                                /* isteže visinu obje kolone */
}

/* 2) Lijevi okvir za sliku logotipa — stabilan aspect, bez mijenjanja layouta */
.brand-hero{
  height: 100%;
  width: 100%;
  aspect-ratio: 4 / 3;          /* siguran okvir */
  object-fit: contain;          /* zadrži komplet logo */
  background:#0b0b0b;
  border:1px solid #1a1a1a;
  border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}

/* 3) Desna kolona: naslov + opis uvijek vidljivi, grid raspored */
.brand-modal__grid > div:last-child{
  display: grid;
  grid-template-rows: auto auto 1fr;   /* H3 / opis / brand-switch */
  gap: 10px;
  min-height: 0;                       /* omogućava overflow djeteta */
}
.brand-modal__grid > div:last-child h3{
  position: sticky; top: 0;
  padding-top: 2px; padding-bottom: 2px;
  background: var(--paper); z-index: 1;
}
.brand-modal__grid > div:last-child p{
  margin: 0;
  color: var(--ink);
}

/* 4) Brand-switch u 2 reda + horizontalni scroll za 50+ logotipa */
.brand-switch{
  display: grid;
  grid-auto-flow: column;              /* dodaj nove kolone kako se puni */
  grid-auto-columns: 140px;            /* širina ćelije loga */
  grid-template-rows: repeat(2, 96px); /* DVA reda visine */
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 4px 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #2a2a2a transparent;
}
.brand-switch::-webkit-scrollbar{ height:8px }
.brand-switch::-webkit-scrollbar-thumb{ background:#2a2a2a; border-radius:999px }

.brand-switch a{
  display:block; border:1px solid #1a1a1a; border-radius:10px;
  background:#0b0b0b; overflow:hidden; scroll-snap-align:start;
}
.brand-switch img{
  width:100%; height:100%; object-fit:contain;
  opacity:.92; filter:grayscale(100%) contrast(1.05);
  transition:filter .2s ease, opacity .2s ease, transform .2s ease;
}
.brand-switch a:hover img{ filter:grayscale(0); opacity:1; transform:scale(1.02) }

/* Aktivni brend (ako želiš highlight – stavi aria-current="true" na aktivni <a>) */
.brand-switch a[aria-current="true"]{
  outline:2px solid #e9e9e9; outline-offset:0; border-color:#2a2a2a;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}

/* 5) Responsivnost – na užem ekranu zadrži stabilan okvir i 2 reda kad ima mjesta */
@media (max-width: 900px){
  .brand-modal__grid{
    grid-template-columns: 1fr;     /* stacked */
  }
  .brand-hero{
    max-height: 46vh;               /* da stane iznad teksta */
  }
  .brand-switch{
    grid-auto-columns: 120px;
    grid-template-rows: repeat(2, 84px);
  }
}

/* =========================
   BRAND MODAL — VERTICAL GRID (SCROLL Y)
   ========================= */

/* Stabilniji okvir modala na svim širinama */
.brand-modal__card{
  width: min(1120px, 96vw);
  height: clamp(620px, 82vh, 820px);
  display: grid;
}

/* Lijevo: logo fiksan; desno: sadržaj sa zasebnom skrol zonom */
.brand-modal__grid{
  height: 100%;
  grid-template-columns: minmax(380px, 0.95fr) 1.05fr;
  align-items: stretch;
}

/* Desna kolona: H3 + opis ostaju gore; mreža brendova skrola unutar svog prostora */
.brand-modal__grid > div:last-child{
  display: grid;
  grid-template-rows: auto auto 1fr;  /* naslov / opis / grid brendova */
  gap: 10px;
  min-height: 0;                      /* omogućava da 1fr dijete skrola */
}
.brand-modal__grid > div:last-child h3{ margin: 0 }
.brand-modal__grid > div:last-child p{ margin: 0; color: var(--ink) }

/* ---------- VERTIKALNI GRID BRENDOVA (scroll-y) ---------- */
.brand-switch{
  /* reset prethodnih horizontalnih postavki */
  overflow-x: hidden !important;
  scroll-snap-type: none !important;
  grid-auto-flow: row !important;

  /* nova layout logika */
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));  /* telefon / uski tablet */
  grid-auto-rows: 96px;                                  /* visina ćelije */
  gap: 12px;
  padding: 8px 4px 6px;
  overflow-y: auto;                                      /* skrol VERTIKALNO */
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: #2a2a2a transparent;
  height: 100%;                                          /* zauzmi preostalu visinu */
}
.brand-switch::-webkit-scrollbar{ width: 8px }
.brand-switch::-webkit-scrollbar-thumb{
  background:#2a2a2a; border-radius:999px;
}

/* Kartice logotipa */
.brand-switch a{
  display:block;
  border:1px solid #1a1a1a;
  border-radius:10px;
  background:#0b0b0b;
  overflow:hidden;
}
.brand-switch img{
  width:100%; height:100%;
  object-fit:contain;
  opacity:.92;
  filter:grayscale(100%) contrast(1.05);
  transition:filter .2s ease, opacity .2s ease, transform .2s ease;
}
.brand-switch a:hover img{ filter:grayscale(0); opacity:1; transform:scale(1.02) }
.brand-switch a[aria-current="true"]{
  outline:2px solid #e9e9e9; outline-offset:0; border-color:#2a2a2a;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}

/* Logo lijevo — stabilan okvir i sjena */
.brand-hero{
  height: 100%;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  background:#0b0b0b;
  border:1px solid #1a1a1a;
  border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}

/* Responsive: više kolona brendova na širim ekranima */
@media (min-width: 900px){
  .brand-switch{ grid-template-columns: repeat(3, minmax(120px, 1fr)) }
}
@media (min-width: 1200px){
  .brand-switch{ grid-template-columns: repeat(4, minmax(120px, 1fr)) }
}

/* Stack na mobilu, ali zadrži vertikalni skrol */
@media (max-width: 900px){
  .brand-modal__grid{ grid-template-columns: 1fr }
  .brand-hero{ max-height: 42vh }
}

/* ==== BRAND SWITCH – 3 u redu + clean scroll (desktop) ==== */
.brand-modal__grid > div:last-child{
  grid-template-rows: auto auto 1fr; /* naslov / opis / GRID */
  min-height: 0;
}

.brand-switch{
  /* vertikalni grid */
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr)); /* 3 u redu na desktopu */
  grid-auto-rows: 96px;                                  /* fiksna visina ćelije */
  gap: 12px;

  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;

  /* spriječi “pola loga” – lista se poravnava po redovima */
  scroll-snap-type: y mandatory;
  scroll-padding: 6px; /* blagi unutarnji odmak */
}
.brand-switch a{ scroll-snap-align: start; }

/* Kartice (zadrži izgled) */
.brand-switch a{
  display:block; border:1px solid #1a1a1a; border-radius:10px;
  background:#0b0b0b; overflow:hidden;
}
.brand-switch img{
  width:100%; height:100%; object-fit:contain;
  opacity:.92; filter:grayscale(100%) contrast(1.05);
  transition:filter .2s ease, opacity .2s ease, transform .2s ease;
}
.brand-switch a:hover img{ filter:grayscale(0); opacity:1; transform:scale(1.02) }

/* Mobilno: 2 u redu, i dalje snap po redovima */
@media (max-width: 900px){
  .brand-switch{ grid-template-columns: repeat(2, minmax(120px, 1fr)); grid-auto-rows: 84px; }
}

/* ===== BRAND MODAL — FIXED LAYOUT + SCROLL LIST (3 u redu) ===== */

/* Visina modala stabilna, da desna kolona može skrolati */
.brand-modal__card{
  width: min(1120px, 96vw);
  height: clamp(620px, 82vh, 820px);
  display: grid;
}

/* Dvije kolone: lijevo hero logo, desno tekst + lista */
.brand-modal__grid{
  height: 100%;
  display: grid;
  grid-template-columns: minmax(420px, 0.95fr) 1.05fr;
  gap: 20px;
  align-items: stretch;
  /* ključ za skrol unutar djece – bez ovoga djeca ne mogu “uzeti” visinu */
  min-height: 0;
}

/* Lijevi okvir za hero sliku — bez praznog prostora ispod */
.brand-hero-wrap{
  display:flex; align-items:center; justify-content:center;
  background:#0b0b0b; border:1px solid #1a1a1a; border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  height:100%; min-height:0; overflow:hidden;
}
.brand-hero{
  max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain; display:block;
}

/* Desna kolona raspored: naslov / opis / SCROLL lista */
.brand-right{
  display:grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  min-height:0;               /* ključno da 1fr dijete smije skrolati */
}
.brand-right h3{ margin:0 }
.brand-right p{ margin:0 }

/* === Scroll lista svih brendova (3 u redu) === */
.brand-switch{
  /* reset starih pravila i definiranje skrol zone */
  display:grid !important;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  grid-auto-rows: 110px;
  gap: 12px;
  padding-right: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height:0;
  height: 100%;               /* zauzmi preostalu visinu i skrolaj */
  scrollbar-width: thin;
  scrollbar-color: #2a2a2a transparent;
}
.brand-switch::-webkit-scrollbar{ width:8px }
.brand-switch::-webkit-scrollbar-thumb{ background:#2a2a2a; border-radius:999px }

.brand-switch a{
  display:block; border:1px solid #1a1a1a; border-radius:10px;
  background:#0b0b0b; overflow:hidden;
}
.brand-switch img{
  width:100%; height:100%; object-fit:contain;
  opacity:.92; filter:grayscale(100%) contrast(1.05);
  transition:filter .2s ease, opacity .2s ease, transform .2s ease;
}
.brand-switch a:hover img{ filter:grayscale(0); opacity:1; transform:scale(1.02) }
.brand-switch a[aria-current="true"]{
  outline:2px solid #e9e9e9; outline-offset:0; border-color:#2a2a2a;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}

/* Responsivnost */
@media (max-width: 900px){
  .brand-modal__grid{ grid-template-columns: 1fr }
  .brand-hero-wrap{ max-height: 42vh }
  .brand-switch{ grid-template-columns: repeat(2, minmax(120px, 1fr)); grid-auto-rows: 96px }
}
@media (min-width: 1280px){
  .brand-switch{ grid-template-columns: repeat(4, minmax(140px, 1fr)) }
}

/* Force 3-per-row brand grid in modal, always */
.brand-switch{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 110px;
  gap: 12px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Cancel any earlier media-query overrides */
@media (max-width: 9999px){
  .brand-switch{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* --- Simple Lightbox (index.html) --- */
#slb[hidden] { display: none !important; }
#slb {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: rgba(0,0,0,.9);
}
#slb .slb__img {
  max-width: 92vw; max-height: 92vh;
  width: auto; height: auto; object-fit: contain;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  border-radius: 10px;
}
#slb .slb__nav, #slb .slb__close {
  position: absolute; border: 0; background: rgba(255,255,255,.08);
  color: #fff; width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center; font-size: 26px; cursor: pointer;
  transition: background .2s ease;
}
#slb .slb__nav:hover, #slb .slb__close:hover { background: rgba(255,255,255,.16); }
#slb .slb__prev { left: 18px; top: 50%; transform: translateY(-50%); }
#slb .slb__next { right: 18px; top: 50%; transform: translateY(-50%); }
#slb .slb__close { right: 18px; top: 18px; font-size: 24px; line-height: 1; }
@media (max-width: 640px) {
  #slb .slb__nav, #slb .slb__close { width: 40px; height: 40px; font-size: 22px; }
}

/* Footer: veći logo samo ovdje */
.footer .logo--sm img {
  width: 200px !important;
  height: auto !important;
}

/* Footer: kompaktna donja traka */
.footer__bottom {
  margin-top: 10px !important;   /* manji razmak iznad trake */
}

.footer__bottom .container {
  padding: 8px 0 !important;     /* manji unutrašnji padding */
  line-height: 1.3;
}

/* Ako footer ima veliko dno negdje ranije definisano, izravnaj ga */
.footer {
  padding-bottom: 10px !important;
}

.header .header__row{ gap: 8px; }

.brands-section #brands-grid .brand{
  padding: clamp(8px, 1.2vw, 14px) !important;
}

.brands-section #brands-grid .brand img{
  max-height: clamp(75px, 7.2vw, 105px) !important; 
  width: auto !important;
  object-fit: contain !important;
  display: block;
  margin: 0 auto;
}

/* === LIGHTBOX === */
@media (max-width: 900px){
  .lightbox{
    padding: 8px 8px 8px !important;
    align-items: stretch !important;
  }
  .lightbox .lightbox__panel{
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 96px !important;
    max-width: 100% !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .lightbox .lightbox__img{
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 120px) !important;
    border-radius: 12px !important;
  }
  .lightbox .lightbox__thumbs{
    flex-direction: row !important;
    height: 96px !important;
    max-height: 96px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-left: 0 !important;
  }
  .lightbox .lightbox__thumb{
    min-width: 96px !important;
  }
  .lightbox .lightbox__thumb img{
    width: 96px !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* =======================
   MOBILE BURGER (clean 3-line + X)
   ======================= */
@media (max-width: 960px){

  /* Header layout */
  .header__row{
    position: relative;
    justify-content: center;
    align-items: center;
    min-height: 85px;
  }

  /* Logo centriran */
  .header .logo{
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }
  .header .logo img{
    height: 74px;
    width: auto;
    display: block;
  }

  /* --- BURGER BUTTON --- */
  .burger{
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    z-index: 100;
  }

  .burger span{
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease;
  }

  /* --- ANIMACIJA U X --- */
  .burger.is-open span:nth-child(1){
    transform: translateY(9px) rotate(45deg);
  }
  .burger.is-open span:nth-child(2){
    opacity: 0;
  }
  .burger.is-open span:nth-child(3){
    transform: translateY(-9px) rotate(-45deg);
  }

  /* --- NAV MENI (ostaje isto kao prije) --- */
  .nav{
    position: fixed;
    inset: 68px 0 0 0;
    background: #000;
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 60;
    border-top: 1px solid #141414;
    padding: 24px 20px;
    display: block;
  }
  .nav.open{ transform: translateX(0); }
  .nav a{
    display: block;
    padding: 14px 8px;
    font-size: 18px;
    border-radius: 8px;
    color: #fff;
  }
  .nav a::after{ display: none; }
}

/* Desktop: burger OFF */
@media (min-width:961px){
  .burger{ display:none; }
  .nav{ display:flex; }
}