/* ══════════════════════════════════════════════════════════════
   PARAMETRI SAJTA — za novu verziju menjaj samo vrednosti ovde
   ══════════════════════════════════════════════════════════════ */
:root{
  /* — Boje — */
  --c-bg:#000f26;            /* pozadina stranice, nav, footer */
  --c-text:#fff;             /* osnovni tekst */
  --c-accent:#61adff;        /* plava: naslovi, linkovi, dugmad, ikonice, kartice */
  --c-logo:#fff;             /* boja logotipa (slova) */
  --c-card-bg:rgba(255,255,255,0.70);  /* pozadina citat-kartica preko slika */
  --c-card-text:#000f26;     /* tekst u citat-karticama */

  /* — Fontovi (ako menjaš font, promeni i Google Fonts link u <head>) — */
  --font-body:'Inter',sans-serif;
  --font-heading:'Montserrat',sans-serif;

  /* — Veličine teksta — */
  /* Tekst se srazmerno smanjuje sa širinom ekrana:
     prva vrednost = telefon (360 px), poslednja = puna veličina (1920 px i više) */
  --fluid:calc((min(var(--vw), 1920px) - 360px) / 1560);   /* 0 na 360 px → 1 na 1920 px */
  --fl-a:max(0px, calc((min(var(--vw), 1440px) - 1280px) / 160)); /* 0 na 1280 px → 1 na 1440 px */
  --fl-b:max(0px, calc((min(var(--vw), 1920px) - 1440px) / 480)); /* 0 na 1440 px → 1 na 1920 px */
  --fs-body:clamp(16px, calc(16px + 2 * var(--fl-b)), 18px);      /* osnovni tekst: 16 px do 1440 px → 18 px na 1920 px */
  --fs-title:clamp(17px, calc(17px + 1 * var(--fl-a) + 2 * var(--fl-b)), 20px); /* naslovi: 17 px na 1280 → 18 px na 1440 → 20 px na 1920 */
  --fs-page-title:clamp(19px, calc(19px + 3 * var(--fluid)), 22px); /* veliki naslovi (onkologija, kontakt) */
  --fs-set-title:clamp(20px, calc(20px + 6 * var(--fluid)), 26px);  /* naslovi Med setova */
  --fs-small:clamp(15px, calc(15px + 1 * var(--fl-b)), 16px);     /* citat-kartice: 15 px do 1440 px → 16 px na 1920 px */
  --fs-nav:clamp(15px, calc(15px + 3 * var(--fluid)), 18px);        /* linkovi u meniju */
  --lh-body:calc(var(--fs-body) * 1.556);    /* prored osnovnog teksta (28px na 18px) */
  --lh-small:calc(var(--fs-small) * 1.625);  /* prored citat-kartica (26px na 16px) */

  /* — Razmaci — */
  --gap:clamp(20px, calc(20px + 8 * var(--fluid)), 28px);  /* razmak između pasusa/blokova */
  --side-pad:clamp(20px, 5.21vw, 100px);  /* bočne margine sadržaja */

  /* — Širina sajta — */
  --site-max:1900px;       /* optimalna širina: meni, tekst i futer staju u ovu širinu; fotografije idu do ivice ekrana */
  --vw:100vw;                /* širina ekrana (skript je postavlja tačno, bez skrolbara) */
  --outer:max(0px, calc((var(--vw) - var(--site-max)) / 2));  /* prazan prostor sa strane kad je ekran širi od --site-max */
  --edge:calc(var(--outer) + var(--side-pad));               /* spoljna margina teksta, menija i futera */

  /* — Zaobljenja — */
  --radius-btn:30px;         /* dugme "Poruči odmah" */
  --radius-card:10px;        /* citat-kartice */
  --radius-lit:12px;         /* kartice literature */

  /* — Animacije — */
  --transition-ms:800;       /* prelaz između stranica (ms, samo broj) */
  --anim-page:0.8s;          /* fade-in sadržaja pri otvaranju stranice */
  --anim-scroll:1.2s;        /* pojavljivanje elemenata pri skrolu */
  --anim-hover:.25s;         /* hover efekti */
}
/* boje unutar SVG-a (logo, ikonice paketa) prate parametre */
.nav-logo svg [fill="white"]{fill:var(--c-logo)}
.packages svg [fill="white"]{fill:var(--c-text)}
.packages svg [stroke="white"]{stroke:var(--c-text)}
svg [fill="#61ADFF"]{fill:var(--c-accent)}
svg [stroke="#61ADFF"]{stroke:var(--c-accent)}


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--c-bg);color:var(--c-text);overflow-x:hidden}

/* NAV - margine proporcionalno sa ekranom: 12.8% od širine (246/1920) */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;
  padding:22px 0;
  background:color-mix(in srgb, var(--c-bg) 72%, transparent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.nav-logo{
  font-family:var(--font-heading);font-weight:700;
  font-size:30px;color:var(--c-logo);text-decoration:none;
  letter-spacing:-0.5px;
  padding-left:var(--side-pad);
  flex:0 0 auto;
}
.nav-spacer{ flex:1 1 auto; }
.nav-links{
  display:flex;
  gap:48px;
  list-style:none;
  align-items:center;
  padding-right:var(--side-pad);
  flex:0 0 auto;
}

/* Nav link - Figma: Montserrat Regular 18px white
   Hover: underline appears under text (line element in Figma)
   Default: line exists but at opacity 0 or outside bounds */
.nav-links a{
  font-family:var(--font-heading);
  font-size:var(--fs-nav);
  font-weight:400;
  color:var(--c-text);
  text-decoration:none;
  position:relative;
  padding-bottom:3px;
  white-space:nowrap;
}

/* Underline - in Figma it's a Vector line below the text
   Default state: visible but only partial (left ~50% of text)
   Hover: full width underline */
.nav-links a::after{
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:1.5px;
  background:var(--c-text);
  transition:width var(--anim-hover) ease;
}
.nav-links a:hover::after{
  width:100%;
}
.nav-links a.nav-active{color:var(--c-accent);}
.nav-links a.nav-active::after{display:none;}
.nav-links a.nav-active:hover::after{display:none;}

/* SECTION */
.section{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;}
.col-img{position:relative;overflow:hidden;min-width:0;}
.col-img img{width:100%;height:100%;object-fit:cover;display:block;min-height:100vh}
.col-dark{background:var(--c-bg);display:flex;align-items:center}
/* content: 246px = 12.8% od 1920px, ali unutar kolone 960px:
   Figma lijevim: padding-left=100px (10.4% od 960), padding-right=168px (17.5% od 960)
   Na velikim ekranima ide do 246px po strani (= 12.8% širine ekrana) */
/* content padding:
   left = isti kao logo (14.61vw-34px = 246px@1920)
   right = proporcionalno manji (8.75vw = 168px@1920) */
/* padding-left: od granice foto/teksta, proporcionalno = 5.21vw (100px@1920)
   padding-right: od desne ivice ekrana, isti kao logo = 14.61vw-34px (246px@1920) */
.content{
  padding: 100px var(--side-pad) 80px var(--side-pad);
  width:100%;
}

.product-title{font-weight:700;font-size:var(--fs-title);line-height:var(--lh-body);margin-bottom:var(--gap)}
.body-text{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-text);margin-bottom:var(--gap)}
.label{font-weight:700;font-size:var(--fs-body);color:var(--c-accent);margin-bottom:var(--gap);display:block}
.blue-text{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-accent);margin-bottom:var(--gap)}
.bold-inline{font-weight:700}
.meta{font-size:var(--fs-body);line-height:var(--lh-body);margin-bottom:0}
.meta + .meta{margin-top:0}
.meta-group{margin-bottom:var(--gap)}

.btn{
  display:inline-block;margin-top:var(--gap);
  padding:13px 34px;border:1.5px solid var(--c-accent);border-radius:var(--radius-btn);
  color:var(--c-accent);font-weight:700;font-size:var(--fs-title);
  text-decoration:none;background:transparent;transition:all var(--anim-hover);
}
.btn:hover{background:var(--c-accent);color:var(--c-bg)}

/* QUOTE CARD */
.quote-card{
  position:relative;
  background:var(--c-card-bg);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  border-radius:var(--radius-card);
  padding:20px 20px 24px 20px;
  font-size:var(--fs-small);line-height:var(--lh-small);color:var(--c-card-text);
}
.quote-card-dots{
  display:flex;gap:10px;align-items:center;margin-bottom:16px;
}
.dot-empty{
  width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--c-accent);background:transparent;flex-shrink:0;
}
.dot-full{
  width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--c-accent);background:var(--c-accent);flex-shrink:0;
}

.qc-inline{max-width:356px;margin-top:32px;}

.overlay{position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb, var(--c-bg) 20%, transparent) 0%,transparent 60%);pointer-events:none}
.overlay-r{position:absolute;inset:0;background:linear-gradient(225deg,color-mix(in srgb, var(--c-bg) 20%, transparent) 0%,transparent 60%);pointer-events:none}

/* FOOTER - isti clamp kao nav */
footer{
  background:var(--c-bg);
  padding:60px var(--side-pad) 56px var(--side-pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.footer-left{max-width:600px;display:flex;flex-direction:column;gap:0;}
.footer-text{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-text);margin-bottom:8px;}
.footer-copy{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-accent);}
.social-links{display:flex;gap:20px;align-items:center;flex-shrink:0;}
.social-icon{
  width:56px;height:56px;border-radius:50%;
  border:1.5px solid var(--c-accent);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;transition:all var(--anim-hover);
  flex-shrink:0;
}
.social-icon svg{width:24px;height:24px;fill:var(--c-accent);transition:fill .25s;}
.social-icon:hover{background:color-mix(in srgb, var(--c-accent) 12%, transparent);}
.social-icon:hover svg{fill:var(--c-text);}

/* Quote cards - sve usidrene lijevo, poravnate sa tekstom */
.qc-img{position:absolute;}
.qc-bottom{top:30%;transform:translateY(-50%);left:var(--side-pad);max-width:444px;}
.qc-top-right{top:35%;left:var(--side-pad);max-width:372px;}

@media(max-width:1024px){
  .section{grid-template-columns:1fr}
  .col-img img{min-height:60vw}
  .nav-links{gap:clamp(16px, 3vw, 48px);}
  .nav-links a{font-size:var(--fs-nav)}
  footer{flex-direction:column;align-items:flex-start;gap:24px;}
  .content{padding-top:60px;padding-bottom:60px;}
}


/* ── ROUTER ── */
.page { display:none; }
.page.active { display:block; }

/* ── SWIPE OVERLAY ── */
#swipe-overlay {
  position:fixed;top:100%;left:0;width:100%;height:100%;
  background:var(--c-bg);z-index:9999;
  transition:none;
  pointer-events:none;
}

/* Page fade-in animation */
@keyframes pageFadeIn {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
.page.active .content,
.page.active .onko-hero-text,
.page.active .kontakt-left,
.page.active .kontakt-right,
.page.active .col-dark,
.page.active .products-grid-col,
.page.active .safety-text {
  animation: pageFadeIn var(--anim-page) cubic-bezier(0.25,0.46,0.45,0.94) both;
}
.page.active .content:nth-child(2),
.page.active .col-dark:nth-child(2) { animation-delay: 0.1s; }

/* Scroll animation */
@keyframes scrollFadeIn {
  from { opacity:0; transform:translateY(48px); }
  to   { opacity:1; transform:translateY(0); }
}
.scroll-hidden {
  opacity:0;
  transform:translateY(48px);
}
.scroll-visible {
  animation: scrollFadeIn var(--anim-scroll) cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}

/* ── ONKOLOGIJA PAGE SPECIFIC ── */
.onko-hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  padding-top:72px;
}
.onko-hero-text{
  display:flex;flex-direction:column;justify-content:center;
  padding:80px var(--side-pad) 80px var(--side-pad);
  background:var(--c-bg);
}
.onko-hero-text .product-title{font-weight:700;font-size:var(--fs-title);line-height:var(--lh-body);margin-bottom:var(--gap);}
.onko-hero-text .body-text{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-text);margin-bottom:var(--gap);}
.onko-hero-text .label{font-weight:700;font-size:var(--fs-body);color:var(--c-accent);margin-bottom:var(--gap);display:block;}
.onko-hero-img{position:relative;overflow:hidden;}
.onko-hero-img img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}

.col-text{background:var(--c-bg);display:flex;align-items:center;overflow:hidden;}
.col-text .content{
  padding:80px var(--side-pad) 80px var(--side-pad);
  width:100%;
}
/* Svi tekst elementi na onko stranici isti kao home */
.col-text .body-text{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-text);margin-bottom:var(--gap);}
.col-text .label{font-weight:700;font-size:var(--fs-body);color:var(--c-accent);margin-bottom:var(--gap);display:block;}
.section-title{font-weight:700;font-size:var(--fs-title);line-height:var(--lh-body);color:var(--c-text);margin-bottom:var(--gap);}

.products-section{
  background:var(--c-bg);
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
}
.products-grid{display:contents;}
.products-grid-col{
  padding:120px var(--side-pad) 80px var(--side-pad);
  min-width:0;
  overflow:hidden;
}
.products-grid .body-text{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-text);margin-bottom:var(--gap);}
.products-grid .label{font-weight:700;font-size:var(--fs-body);color:var(--c-accent);margin-bottom:var(--gap);display:block;}
.products-grid .meta{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-text);}
.products-grid .product-title{font-weight:700;font-size:var(--fs-title);line-height:var(--lh-body);color:var(--c-text);margin-bottom:var(--gap);}

.packages{display:flex;gap:8px;margin:var(--gap) 0;align-items:flex-end;}
.pkg{width:clamp(24px,3.5vw,48px);height:clamp(40px,5.5vw,72px);background:var(--c-accent);border-radius:4px;opacity:0.85;}
.pkg:nth-child(2){opacity:0.75;}.pkg:nth-child(3){opacity:0.65;}
.pkg:nth-child(4){opacity:0.55;}.pkg:nth-child(5){opacity:0.45;}.pkg:nth-child(6){opacity:0.35;}

.price-new{font-size:var(--fs-title);font-weight:700;color:var(--c-text);}
.price-old{font-size:var(--fs-body);color:color-mix(in srgb, var(--c-text) 50%, transparent);text-decoration:line-through;margin-left:8px;}
.price-rate{font-size:var(--fs-body);color:var(--c-text);margin-top:4px;}
.phone{font-size:var(--fs-body);color:var(--c-accent);margin-top:4px;margin-bottom:20px;}
.legal-text{font-size:var(--fs-body);line-height:var(--lh-body);color:color-mix(in srgb, var(--c-accent) 80%, transparent);margin-top:var(--gap);}

.safety-section{display:grid;grid-template-columns:1fr 1fr;min-height:80vh;}
.literatura-section{background:var(--c-bg);}
.literatura-inner{display:grid;grid-template-columns:1fr 1fr;}
.literatura-text{padding:210px var(--side-pad) 42px var(--side-pad);}
.literatura-cards{grid-column:1/-1;padding:109px var(--side-pad) 195px var(--side-pad);}
@media(max-width:768px){.literatura-inner{grid-template-columns:1fr;}.literatura-cards{grid-column:1;}}
.lit-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:0;}
.lit-card{display:flex;flex-direction:column;justify-content:space-between;background:color-mix(in srgb, var(--c-accent) 70%, transparent);border-radius:var(--radius-lit);padding:22px 20px 20px;text-decoration:none;color:var(--c-text);min-height:312px;transition:background 0.25s ease;}
.lit-card:hover{background:color-mix(in srgb, var(--c-accent) 100%, transparent);}
.lit-card-body{flex:1;}
.lit-title{font-size:var(--fs-body);font-weight:700;line-height:1.35;margin-bottom:16px;color:var(--c-text);}
.lit-desc{font-size:var(--fs-small);font-weight:400;line-height:1.5;color:color-mix(in srgb, var(--c-text) 85%, transparent);}
.lit-footer{display:flex;justify-content:flex-end;align-items:center;margin-top:24px;}
.lit-arrow{font-size:var(--fs-page-title);color:var(--c-text);}
@media(max-width:1100px){.lit-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:680px){.lit-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:420px){.lit-grid{grid-template-columns:1fr;}}
.safety-text{background:var(--c-bg);display:flex;align-items:center;overflow:hidden;}
.safety-text .content{
  padding:80px var(--side-pad) 80px var(--side-pad);
  width:100%;overflow:hidden;
}
.safety-text .body-text{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-text);margin-bottom:var(--gap);}
.safety-img{position:relative;overflow:hidden;}
.safety-img img{width:100%;height:100%;object-fit:cover;display:block;}

@media(max-width:1024px){
  .onko-hero,.products-grid,.safety-section{grid-template-columns:1fr;}
  .onko-hero-img{min-height:50vh;}
  .safety-img{min-height:50vh;}
  .section{grid-template-columns:1fr}
  .col-img img{min-height:60vw}
  .nav-links{gap:clamp(16px,3vw,48px);}
  .nav-links a{font-size:var(--fs-nav)}
  footer{flex-direction:column;align-items:flex-start;gap:24px;}
  .content{padding-top:60px;padding-bottom:60px;}
}
.kontakt-page{
  min-height:100vh;
  background:var(--c-bg);
  padding-top:72px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.kontakt-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  width:100%;
}
.kontakt-left{
  padding:80px var(--side-pad);
  display:flex;
  flex-direction:column;
}
.kontakt-right{
  padding:80px var(--side-pad) 108px var(--side-pad);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.kontakt-detail{
  margin-bottom:var(--gap);
}
.kontakt-detail p{
  font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-text);
}
.kontakt-detail a{color:var(--c-accent);text-decoration:none;}
.kontakt-detail a:hover{text-decoration:none;}
.kontakt-right a{text-decoration:none !important;}
.kontakt-right a:hover{text-decoration:none !important;}
.kontakt-detail strong{font-weight:700;}

@media(max-width:1024px){
  .kontakt-page{grid-template-columns:1fr}
  .kontakt-left{border-right:none;border-bottom:1px solid color-mix(in srgb, var(--c-text) 6%, transparent);}
}


/* ══════════════════════════════════════════════════════════════
   LAYOUT 1700 — tekst, meni i futer poravnati na --site-max,
   fotografije se šire do ivice ekrana
   ══════════════════════════════════════════════════════════════ */
.nav-logo{padding-left:var(--edge)}
.nav-links{padding-right:var(--edge)}
footer{padding-left:var(--edge);padding-right:var(--edge)}

/* tekstualna kolona levo: spoljna (leva) margina prati širinu sajta */
.section > .col-dark:first-child > .content,
.section > .col-text:first-child > .content,
.safety-section > .safety-text:first-child > .content,
.onko-hero > .onko-hero-text:first-child,
.products-grid-col:first-child,
.literatura-text,
.kontakt-left{padding-left:var(--edge)}

/* tekstualna kolona desno: spoljna (desna) margina prati širinu sajta */
.section > .col-dark:last-child > .content,
.section > .col-text:last-child > .content,
.safety-section > .safety-text:last-child > .content,
.onko-hero > .onko-hero-text:last-child,
.products-grid-col:last-child,
.kontakt-right{padding-right:var(--edge)}

/* kartice literature preko cele širine sajta */
.literatura-cards{padding-left:var(--edge);padding-right:var(--edge)}

/* citat-kartica na fotografiji koja je levo: poravnata sa ivicom sajta */
.col-img:first-child .qc-img{left:var(--edge)}

/* skraćeni tekst citat-kartica prikazuje se samo na telefonu */
.qc-short{display:none}

/* ══════════════════════════════════════════════════════════════
   PRILAGOĐAVANJE MANJIM EKRANIMA I TABLETIMA
   ≤1280 manji laptopovi · ≤1024 tablet (jedna kolona) · ≤768 meni
   na dugme · ≤600 telefon
   ══════════════════════════════════════════════════════════════ */
a:focus-visible,button:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.nav-toggle{display:none}

@media(max-width:1440px){
  .lit-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:1280px){
  .products-grid-col{padding-top:90px}
  .products-grid-col .price-new{margin-top:72px!important}
  .literatura-text{padding-top:140px}
  .literatura-cards{padding-top:72px;padding-bottom:120px}
  .lit-card{min-height:260px}
}

@media(max-width:1024px){
  /* tablet: fiksne veličine teksta */
  :root{--fs-body:15px;--fs-title:17px;--fs-small:15px}
  /* fotografija uvek iznad teksta */
  .section > .col-img,.safety-section > .safety-img,.onko-hero > .onko-hero-img{order:-1}
  .section,.onko-hero,.safety-section,.products-section,.kontakt-cols{grid-template-columns:1fr;min-height:0}
  .onko-hero{padding-top:0}
  .col-img img,.safety-img img,.onko-hero-img img{min-height:0!important;height:auto!important;aspect-ratio:4/3;object-fit:cover}
  .onko-hero-img,.safety-img{min-height:0}
  /* citat-kartica ide ispod fotografije, blago preklapa njen donji deo */
  .quote-card.qc-img{position:relative;top:auto!important;bottom:auto!important;left:auto!important;right:auto;transform:none!important;max-width:560px;margin:-56px var(--side-pad) 0}
  .content,.col-text .content,.safety-text .content,.onko-hero-text{padding-top:56px;padding-bottom:64px}
  .products-grid-col{padding-top:56px;padding-bottom:40px}
  .products-grid-col .price-new{margin-top:40px!important}
  .packages{max-width:420px!important}
  .literatura-text{padding-top:72px;padding-bottom:24px}
  .literatura-cards{padding-top:24px;padding-bottom:80px}
  .lit-card{min-height:220px}
  .kontakt-page{align-items:flex-start;min-height:0}
  .kontakt-left{padding-top:120px;padding-bottom:24px;padding-right:var(--side-pad)}
  .kontakt-right{padding-top:24px;padding-bottom:72px;padding-left:var(--side-pad);justify-content:flex-start}
  .kontakt-right a{overflow-wrap:anywhere}
  footer{padding-top:48px;padding-bottom:48px}
}

@media(max-width:768px){
  nav{padding:14px 0}
  .nav-logo svg{width:150px;height:auto}
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-right:calc(var(--edge) - 10px);padding:10px;background:none;border:0;cursor:pointer}
  .nav-toggle span{display:block;width:24px;height:2px;background:var(--c-text);transition:transform var(--anim-hover),opacity var(--anim-hover)}
  nav.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  nav.menu-open .nav-toggle span:nth-child(2){opacity:0}
  nav.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* otvoren meni je deo same trake menija: ista providna i zamućena pozadina */
  nav{flex-wrap:wrap}
  .nav-links{display:none;position:static;order:3;flex:0 0 100%;flex-direction:column;align-items:stretch;gap:0;padding:4px var(--edge) 12px;background:none}
  nav.menu-open .nav-links{display:flex}
  .nav-links a{display:block;padding:12px 0;font-size:var(--fs-nav)!important;border-bottom:0}
  .nav-links a::after{display:none}
  .lit-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:600px){
  /* telefon: fiksne veličine teksta */
  :root{--fs-body:14px;--fs-title:16px;--fs-small:14px}
  /* naslovi u dva reda: 20% veći razmak između redova */
  .product-title,.section-title{line-height:calc(var(--lh-body) * 1.2)!important}
  /* fotografije preko celog ekrana telefona */
  .col-img img,.safety-img img,.onko-hero-img img{aspect-ratio:auto;width:100%;height:100vh!important;height:100svh!important;object-fit:cover}
  /* na telefonu citat-kartica ide ispod fotografije */
  /* citat-kartica: za trećinu uža, uz desnu ivicu, sa skraćenim tekstom */
  .quote-card.qc-img{width:calc((100% - 2 * var(--side-pad)) * 2 / 3);max-width:none;margin:0}
  /* kartica stoji na fotografiji, na njenoj vertikalnoj polovini */
  .quote-card.qc-img{position:absolute;top:50%!important;bottom:auto!important;left:auto!important;right:var(--side-pad);transform:translateY(-50%)!important}
  /* Basic farina: kartica 60% više, preko poklopca ambalaže */
  #page-home section:nth-of-type(3) .quote-card.qc-img,
  #page-home section:nth-of-type(4) .quote-card.qc-img{top:20%!important}  /* Basic farina i Skin powder */
  #page-onko .onko-hero .quote-card.qc-img{top:75%!important}  /* onkologija, prva fotografija: 50% niže */
  #page-onko section.section .quote-card.qc-img{top:25%!important}  /* onkologija, fotografija kapsule: 50% više */
  .qc-full{display:none}
  .qc-short{display:inline}
  /* kružići 30% manji, tekst 50% bliže levoj i desnoj ivici */
  .quote-card.qc-img{padding-left:10px;padding-right:10px;padding-bottom:12px;line-height:20px}  /* prored 20 px */
  .quote-card .dot-empty,.quote-card .dot-full{width:11px;height:11px}
  .quote-card-dots{gap:7px}
  .lit-grid{grid-template-columns:1fr}
  .lit-card{min-height:0}
  .btn{padding:12px 28px}
  .social-icon{width:48px;height:48px}
  .kontakt-left{padding-top:96px}
}

/* FUTER — tekst i ikonice 30% manji (tekst najmanje 12px zbog čitljivosti) */
.footer-text,.footer-copy{font-size:calc(max(12px, calc(var(--fs-body) * 0.7)) * 1.3);line-height:calc(max(18px, calc(var(--lh-body) * 0.7)) * 1.3)}
.footer-text{margin-bottom:6px}
.social-links{gap:14px}
.social-icon,.social-icon:hover{width:39px;height:39px}
.social-icon svg{width:17px;height:17px}
@media(max-width:600px){.social-icon{width:34px;height:34px}.social-icon svg{width:15px;height:15px}
  /* telefon: tekst futera 13px, ispod ikonica */
  .footer-text,.footer-copy{font-size:13px;line-height:20px}
  footer .social-links{order:-1}
}

/* registarski broj ALIMS nije link (telefoni ga inače prepoznaju kao broj telefona) */
.reg-no,.reg-no a,.legal-text a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;font:inherit!important;pointer-events:none;cursor:text}

/* kontakt telefon: beo, plav na hover i dodir */
.kontakt-right .tel-link,.kontakt-right a[x-apple-data-detectors]{color:var(--c-text)!important;text-decoration:none!important;transition:color var(--anim-hover)}
.kontakt-right .tel-link:hover,.kontakt-right .tel-link:active,.kontakt-right .tel-link:focus-visible{color:var(--c-accent)!important}

/* telefon za porudžbine: plav, beo na hover i dodir */
.phone .order-tel,.phone a[x-apple-data-detectors]{color:var(--c-accent)!important;text-decoration:none!important;transition:color var(--anim-hover)}
.phone .order-tel:hover,.phone .order-tel:active,.phone .order-tel:focus-visible{color:var(--c-text)!important}

/* tablet položeno (npr. 1180 × 820): 1025–1199 px */
@media(min-width:1025px) and (max-width:1199px){
  :root{--fs-body:15px;--fs-title:15px;--fs-small:15px;--fs-page-title:20px;--fs-set-title:22px;--fs-nav:15px}
  .footer-text,.footer-copy{font-size:15px;line-height:23px}
}

/* LOGO srazmerno osnovnom tekstu: 213 px pri tekstu 18 px */
:root{--logo-w:clamp(189px, calc(189px + 24 * var(--fl-b)), 213px)}  /* 16 px tekst → 189 px … 18 px → 213 px */
.nav-logo svg{width:var(--logo-w);height:auto}
@media(max-width:1199px){:root{--logo-w:178px}}  /* tekst 15 px */
@media(max-width:768px){:root{--logo-w:150px}}   /* telefon (kao do sada) */

/* MENI: logotip i linkovi poravnati po dnu (osnovna linija teksta = dno slova logotipa) */
@media(min-width:769px){
  nav{align-items:flex-end}
  .nav-links{align-items:flex-end}
  .nav-links a{display:block;line-height:1;padding-bottom:0;margin-bottom:-0.12em}
}

/* KARTICE: suptilnija animacija pojavljivanja (manji pomak, mekši ulaz) */
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes cardFade{from{opacity:0}to{opacity:1}}
.quote-card.scroll-hidden,.lit-card.scroll-hidden{transform:translateY(12px)}
.quote-card.scroll-visible,.lit-card.scroll-visible{animation:cardIn .9s cubic-bezier(.22,.61,.36,1) forwards}
@media(max-width:600px){
  /* telefon: samo blago pojavljivanje, bez pomeranja */
  .quote-card.scroll-hidden,.lit-card.scroll-hidden{transform:none}
  .quote-card.scroll-visible,.lit-card.scroll-visible{animation:cardFade .7s ease-out forwards}
  .lit-card{animation-delay:0s!important}
}

/* FB ikonica 15% veća samo na desktopu (od 1025 px) */
@media(min-width:1025px){
  .social-icon,.social-icon:hover{width:45px;height:45px}
  .social-icon svg{width:20px;height:20px}
}