/* =========================
   Osnovne boje
   ========================= */
   :root {
    --color-primary: #456bac;
    --color-accent: #e98104;
    --color-bg: #f5f5f7;
    --color-white: #ffffff;
    --color-text: #111827;
    --color-muted: #6b7280;
    --color-border: #e5e7eb;
  
    --color-bg-top: #e6eefc;  
    --color-bg-mid: #f5f7fb;
  }
  
  /* Reset */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(
      circle at top left,
      var(--color-bg-top),
      var(--color-bg-mid) 45%,
      #ffffff 100%
    );
    color: var(--color-text);
    line-height: 1.6;
  }
  
  img {
    max-width: 100%;
    display: block;
  }
  
  a {
    text-decoration: none;
    color: inherit;
  }
  
  /* Layout helper */
  .container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 28px;
  }
  
/* =========================
   Scroll reveal – ISKLJUČENO
   ========================= */
   .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  
  /* =========================
     HEADER / NAVBAR
     ========================= */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(248, 250, 252, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(69, 107, 172, 0.15);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  }
  
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;          /* viši header */
  }
  
  /* Logo */
  .brand {
    display: flex;
    align-items: center;
  }
  
  .brand__logo {
    height: 72px;
    width: auto;
  }
  
  /* Nav links */
  .main-nav {
    display: flex;
    align-items: center;
    gap: 40px;              /* više mesta u širinu */
    font-size: 1.05rem;     /* malo veći font */
  }
  
  /* svi linkovi – default plavi */
  .nav-link {
    color: var(--color-primary);
    padding-bottom: 6px;
    border-bottom: 2px solid transparent;
    font-weight: 500;
  }
  
  /* hover – narandžasti */
  .nav-link:hover {
    color: var(--color-accent);
  }
  
  /* aktivna stranica – narandžasti tekst + linija */
  .nav-link--active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    font-weight: 600;
  }
  
  /* Language switcher */
  .lang-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 24px;        /* malo dalje od menija */
    font-size: 1rem;
  }
  
  .lang {
    cursor: pointer;
    color: var(--color-primary);  /* default plavo */
  }
  
  .lang--active {
    font-weight: 600;
    color: var(--color-accent);   /* aktivni narandžast */
  }
  
  .lang-divider {
    opacity: 0.7;
  }
  
  .lang-divider {
    opacity: 0.7;
  }
  
  /* Burger */
/* Burger dugme – osnovni stil */

.nav-toggle {
  display: none; /* na desktopu sakriven, na mobilu ćemo ga uključiti */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.9);
  background: #ffffff;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.nav-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.18);
}

.nav-toggle span {
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: #4b5563;
  display: block;
  transition:
    transform 0.2s ease,
    opacity 0.15s ease,
    background-color 0.2s ease;
}

/* Kad je meni otvoren – pretvori burger u X */

.nav-toggle.nav-toggle--open {
  background: var(--color-primary);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.25);
}

.nav-toggle.nav-toggle--open span {
  background: #ffffff;
}

.nav-toggle.nav-toggle--open span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.nav-toggle.nav-toggle--open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.nav-toggle--open span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}
  
/* =========================
   HERO – full-screen slika + blago zatamnjenje
   ========================= */
/* =========================
   HERO – full-screen slika, centriran tekst
   ========================= */
   .hero-full {
    position: relative;
    min-height: 100vh; /* ceo ekran */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  
    color: #ffffff;
    background-image: url("../img/hero-nova-grosis.jpg");
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
  }
  
  /* jače zatamnjenje preko slike */
  .hero-full::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55); /* OVDE menjaš jačinu po želji */
    z-index: 0;
  }
  
  .hero-full .container {
    position: relative;
    z-index: 1;
  }
  
  .hero-content {
    max-width: 820px;
    margin: 0 auto;
    padding: 120px 0 120px;
    text-align: center;
  
    /* NOVO – da apsolutno sve bude centrirano */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* label gore */
  .hero-eyebrow {
    font-size: 1rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 18px;
    /* bez text-shadow */
  }
  
  .hero-title {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(3.6rem, 7vw, 5.2rem);
    line-height: 1.05;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #ffffff;
    margin-bottom: 20px;
    /* bez text-shadow */
  }
  
  .hero-lead {
    font-size: 1.2rem;
    line-height: 1.9;
    color: #e5e7eb;
    max-width: 640px;
    margin: 0 auto;
    /* bez text-shadow */
  }
  
  /* CTA dugme */
  .hero-actions {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
  }
  
  /* responsive prilagođavanje */
  @media (max-width: 900px) {
    .hero-content {
      padding: 110px 0 110px;
      max-width: 100%;
    }
  
    .hero-title {
      font-size: clamp(3rem, 8vw, 3.6rem);
      letter-spacing: 0.18em;
    }
  
    .hero-lead {
      font-size: 1.08rem;
    }
  
    .hero-full {
      background-position: center 30%;
    }
  }
  
  @media (max-width: 600px) {
    .hero-content {
      padding: 96px 0 96px;
    }
  
    .hero-title {
      font-size: 2.6rem;
      letter-spacing: 0.16em;
    }
  
    .hero-lead {
      font-size: 1.02rem;
    }
  }


  /* =========================
     Dugmad (globalno)
     ========================= */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition:
      background-color 0.25s ease,
      color 0.25s ease,
      box-shadow 0.25s ease,
      transform 0.15s ease;
    text-decoration: none;
  }
  
  .btn-primary {
    background: var(--color-accent);
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(233, 129, 4, 0.35);
  }
  
  .btn-primary:hover {
    background: #ff9c1a;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 16px 36px rgba(233, 129, 4, 0.45);
  }
  
  .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 8px 20px rgba(233, 129, 4, 0.35);
  }
  
  /* =========================
     TITLOVI SEKCIJA
     ========================= */
  .section-title {
    font-size: 1.8rem;
    color: var(--color-primary);
    margin-bottom: 10px;
    
  }
  
  .section-subtitle {
    font-size: 0.98rem;
    color: var(--color-muted);
    max-width: 680px;
    margin-bottom: 28px;
  }

    /* Naslovi – Inter */
  h1,
  h2,
  h3,
  .section-title,
  .footer-heading,
  .partners-strip-header h3,
  .contact-strip-text h2,
  .stats-text h2 {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
  
  /* =========================
     NAŠ PARTNER – TROGE SEKCIJA
     ========================= */
  /* .partner-main {
    padding: 72px 0 56px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.04);
  }
  
  .partner-main-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 32px;
  } */

  .partner-main {
    padding: 110px 0 110px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.04);
  }
  
  /* 2 kolone: levo tekst, desno Troge */
  .partner-main-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 64px;
    align-items: stretch;
  }
  /* Partner sekcija na tablet/mobilu – jedna kolona */
@media (max-width: 900px) {
  .partner-main-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .troge-inner,
  .schulke-inner {
    align-items: center;
  }
}

  .partner-main-inner + .partner-main-inner {
    margin-top: 72px; /* razmak između Troge i Schülke bloka */
  }
  
  /* levi stub – veliki tekst */
  .partner-main-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 680px;
  }
  
  .partner-main-eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 12px;
  }
  
  .partner-main-title {
    font-size: 2.2rem;
    line-height: 1.25;
    margin-bottom: 14px;
    font-weight: 600;
    color: var(--color-accent); /* osnovno – narandžasta za naslov */
  }
  
  /* Troge brand – roze */
  .partner-main-title-brand--troge {
    color: #e4007c;
    font-weight: 700;
  }
  
  /* Schülke brand – njihova plava */
  .partner-main-title-brand--schuelke {
    color: #00a0e3;
    font-weight: 700;
  }
  
  .partner-main-lead {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--color-muted);
  }
  
  /* desni stub – Troge kartica da ne pravi dodatni margin */
  .partner-main .troge-card {
    margin: 0;
  }
  
  /* Troge card – čista, bez okvira */
  .troge-card {
    max-width: 940px;
    margin: 0 auto;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  
  .troge-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 32px 0 10px;
    text-align: center;
  }
  
  .troge-logo img {
    max-width: 820px;
    height: auto;
    display: block;
    margin: 0 auto 34px auto;
  }
  
  /* red sa sekcijama */
  .troge-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    justify-content: center;
  }
  
  .troge-pill {
    display: inline-flex;
    flex-direction: column;   /* ⬅⬅ ikonica gore, tekst dole */
    align-items: center;
    justify-content: center;
    gap: 4px;                 /* razmak između ikonice i teksta */
    padding: 6px 10px;
    min-width: 120px;
    background: transparent;
    border: none;
    color: #111827;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: default;
  
    /* animacija – početno stanje */
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 0.6s ease,
      transform 0.6s ease,
      color 0.25s ease;
  }
  
  .troge-pill-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: inline-block;
    margin-bottom: 2px;          /* da ne lepi uz tekst */
  
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 0;
    background-color: transparent;
  }
  
  .troge-pill-label {
    white-space: nowrap;
    text-align: center;
  }

  /* ZAVOJNI MATERIJAL */
.troge-pill--zavojni .troge-pill-icon {
  background-image: url("../img/icons/troge/troge-zavojni-p.svg");
}

/* UBODNI MATERIJAL */
.troge-pill--ubodni .troge-pill-icon {
  background-image: url("../img/icons/troge/troge-ubodni-p.svg");
}

/* UROLOGIJA */
.troge-pill--urologija .troge-pill-icon {
  background-image: url("../img/icons/troge/troge-urologija-p.svg");
}

/* HIRURŠKI KONCI */
.troge-pill--konci .troge-pill-icon {
  background-image: url("../img/icons/troge/troge-konci-p.svg");
}

/* DIJAGNOSTIKA */
.troge-pill--dijagnostika .troge-pill-icon {
  background-image: url("../img/icons/troge/troge-dijagnostika-p.svg");
}

/* ZAŠTITA */
.troge-pill--zastita .troge-pill-icon {
  background-image: url("../img/icons/troge/troge-zastita-p.svg");
}
  
  .troge-pill-label {
    white-space: nowrap;
  }
  
  .troge-pill:hover {
    color: var(--color-accent);
  }
  
  /* animacija – desktop: ikonice vidljive kad si na logou ILI na ikonicama */
  .troge-logo:hover + .troge-icons .troge-pill,
  .troge-icons:hover .troge-pill,
  .troge-card.troge-open .troge-pill {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* sporiji stagger – izlaze polako jedna za drugom */
  .troge-pill:nth-child(1) {
    transition-delay: 0.1s;
  }
  .troge-pill:nth-child(2) {
    transition-delay: 0.22s;
  }
  .troge-pill:nth-child(3) {
    transition-delay: 0.34s;
  }
  .troge-pill:nth-child(4) {
    transition-delay: 0.46s;
  }
  .troge-pill:nth-child(5) {
    transition-delay: 0.58s;
  }
  .troge-pill:nth-child(6) {
    transition-delay: 0.7s;
  }

/* =========================
   SCHÜLKE – kartica + ikonice
   ========================= */

   .schulke-card {
    max-width: 520px;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  
  .schulke-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 32px 0 10px;
    text-align: center;
  }
  
  .schulke-logo img {
    max-width: 420px;
    height: auto;
    display: block;
    margin: 0 auto 24px auto;
  }
  
  /* 3 gore, 2 dole – oba reda centrirana */
  .schulke-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 28px;
  }
  
  .schulke-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  
    flex: 0 1 28%;          /* ~3 u redu na desktopu */
    max-width: 230px;
  
    padding: 6px 10px;
    background: transparent;
    border: none;
    color: #111827;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: default;
  
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 0.6s ease,
      transform 0.6s ease,
      color 0.25s ease;
  }
  
  .schulke-pill-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: inline-block;
    margin-bottom: 4px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
  }



/* Mapiranje SVG ikonica za SCHÜLKE pill-ove na indexu */

.schulke-pill--rane .schulke-pill-icon {
  background-image: url("../img/icons/schuelke/sch-rane-n.svg");
}

.schulke-pill--higijena .schulke-pill-icon {
  background-image: url("../img/icons/schuelke/sch-higijena-n.svg");
}

.schulke-pill--instrumenti .schulke-pill-icon {
  background-image: url("../img/icons/schuelke/sch-instrumenti-n.svg");
}

.schulke-pill--povrsine .schulke-pill-icon {
  background-image: url("../img/icons/schuelke/sch-povrsine-n.svg");
}

.schulke-pill--pomocna .schulke-pill-icon {
  background-image: url("../img/icons/schuelke/sch-oprema-n.svg");
}

/* Schülke – ikonice za kartice na products.html */

.product-card-icon--sch-rane {
  background-image: url("../img/icons/schuelke/sch-rane-n.svg");
}

.product-card-icon--sch-higijena {
  background-image: url("../img/icons/schuelke/sch-higijena-n.svg");
}

.product-card-icon--sch-instrumenti {
  background-image: url("../img/icons/schuelke/sch-instrumenti-n.svg");
}

.product-card-icon--sch-povrsine {
  background-image: url("../img/icons/schuelke/sch-povrsine-n.svg");
}

.product-card-icon--sch-oprema {
  background-image: url("../img/icons/schuelke/sch-oprema-n.svg");
}
  
  /* OVDE skidamo nowrap da ne lomi layout */
  .schulke-pill-label {
    text-align: center;
    white-space: normal;
    line-height: 1.4;
  }
  
  .schulke-pill:hover {
    color: var(--color-primary);
  }
  
  /* animacija – isto ponašanje kao Troge */
  .schulke-logo:hover + .schulke-icons .schulke-pill,
  .schulke-icons:hover .schulke-pill,
  .schulke-card.schulke-open .schulke-pill {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* stagger efekat */
  .schulke-pill:nth-child(1) { transition-delay: 0.10s; }
  .schulke-pill:nth-child(2) { transition-delay: 0.22s; }
  .schulke-pill:nth-child(3) { transition-delay: 0.34s; }
  .schulke-pill:nth-child(4) { transition-delay: 0.46s; }
  .schulke-pill:nth-child(5) { transition-delay: 0.58s; }
  
  /* Responsive podešavanja */
  @media (max-width: 900px) {
    .schulke-card {
      max-width: 100%;
      margin: 32px auto 0;
    }
  
    .schulke-pill {
      flex: 0 1 45%;       /* 2 u redu na tabletima */
    }
  }
  
  @media (max-width: 600px) {
    .schulke-pill {
      flex: 0 1 100%;      /* 1 u redu na mobilnom */
      max-width: 260px;
    }
  }

  /* ovo je da kad hoverujes preko troga ili shceulkea da ima ovaj kao kartica izgled */
  
  .partner-main-card-link {
    display: block;
  }
  
  .troge-card,
  .schulke-card {
    cursor: pointer;
    border-radius: 18px;
    transition:
      transform 0.18s ease,
      box-shadow 0.18s ease,
      background-color 0.18s ease;
  }
  
  .partner-main-card-link:hover .troge-card,
  .partner-main-card-link:hover .schulke-card {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
    background-color: #f9fafb;
  }


/* =========================
   OSTALI PARTNERI – Zorka + Galenika
   ========================= */
   .partners-strip {
    padding: 64px 0 72px;
    background: var(--color-primary); /* plava iz brenda */
  }
  
  .partners-strip-header {
    text-align: center;
    margin-bottom: 28px;
  }
  
  .partners-strip-header h3 {
    font-size: 1.6rem;
    font-weight: 600;
    color: #f9fafb; /* bela na plavoj pozadini */
  }
  
  /* layout za logoe */
  .partners-strip-logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: center;
  }
  
  /* Na telefonima – jedna kolona */
  @media (max-width: 640px) {
    .partners-strip-logos {
      grid-template-columns: 1fr;
      gap: 18px;
    }
  }
  
  .partner-link {
    display: block;
  }
  
  .partner-card {
    width: 100%;
    min-height: 120px;
    border-radius: 18px;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.3);
  
    /* hover animacija */
    transition:
      transform 0.22s ease,
      box-shadow 0.22s ease,
      background-color 0.22s ease;
  }
  
  .partner-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.45);
    background-color: #f9fafb; /* blago posvetli karticu na hoveru */
  }
  
  /* OVDJE SAMO PROMENI PUTANJE AKO SU DRUGAČIJE NA TVOM PROJEKTU */
  .partner-card--zorka {
    background-image: url("../img/brand-zorka.png");
  }
  
  .partner-card--galenika {
    background-image: url("../img/brand-galenika.jpg");
  }
  
  /* responsive – da lepo stoje i na manjim ekranima */
  @media (max-width: 768px) {
    .hero-full {
      min-height: calc(100vh - 72px);
      background-position: center 25%;
    }
  
    .hero-full-inner {
      padding: 40px 0 32px;
    }
  
    .hero-title {
      font-size: 2.1rem;
    }
  
    .hero-lead {
      font-size: 0.96rem;
    }
  }
  
/* NOVI LAYOUT – tri flat statistike u jednom redu */
/* =========================
   STATS – Zašto partneri biraju Novu Grosis
   ========================= */

   .stats {
    padding: 96px 0 110px;
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  }
  
  .stats-inner {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* NASLOV + OPIS */
  .stats-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
  }
  
  .stats-header h2 {
    font-size: 1.9rem;
    color: var(--color-primary);
    margin-bottom: 10px;
  }
  
  .stats-header p {
    font-size: 0.98rem;
    color: var(--color-muted);
  }
  
  /* NOVI LAYOUT – TRI KARTICE U JEDNOM REDU, FLAT DESIGN */
  .stats-diagonal {
    margin-top: 48px;
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;           /* da na manjim ekranima može u dva reda */
  }
  
  .stat-card {
    flex: 1 1 0;
    max-width: 260px;          /* da ne budu preširoke na velikim ekranima */
    text-align: center;
  }
  
  /* BROJ – COUNTUP */
  .stat-number {
    display: block;
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 6px;
  }
  
  .stat-number::after {
    content: "+";
    margin-left: 2px;
    color: var(--color-accent);
  }
  
  /* LABEL ISPOD BROJA */
  .stat-label {
    display: block;
    font-size: 0.95rem;
    color: var(--color-muted);
  }
  
  /* NAPOMENA ISPOD STATISTIKE */
  .stats-note {
    margin-top: 26px;
    font-size: 0.82rem;
    color: #9ca3af;
    text-align: center;
  }
  
  /* RESPONSIVE – TABLET / MOBILNI */
  @media (max-width: 900px) {
    .stats-diagonal {
      gap: 24px;
    }
  
    .stat-card {
      max-width: 220px;
    }
  
    .stat-number {
      font-size: 2.3rem;
    }
  }
  
  @media (max-width: 600px) {
    .stats-diagonal {
      flex-direction: column;
      align-items: center;
    }
  
    .stat-card {
      max-width: none;
      width: 100%;
    }
  }
  
  /* =========================
     PRODUCTS PAGE (ostavljeno isto)
     ========================= */
 /* HERO ZA PROIZVODE */
.products-hero {

  position: relative;

  padding: 120px 0 140px;

  color: #f9fafb;

  background:

    linear-gradient(

      rgba(8, 30, 63, 0.58),

      rgba(8, 30, 63, 0.58)

    ),

    url("../img/products/products-hero-bg.jpg")

    center center / cover no-repeat;

}

.products-hero::before {
  content: none;
}

/* fade samo na dnu slike u belu pozadinu stranice */
/* .products-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  background: linear-gradient(
    to bottom,
    rgba(249, 250, 251, 0) 0%,
    #f9fafb 100%
  );
  pointer-events: none;
  z-index: 0;
} */

/* da tekst ne legne skroz do ivica i bude čitljiv */
.products-hero .container {
  position: relative;
  z-index: 1;
  background: transparent;
  backdrop-filter: none;
}

.products-hero .page-title {
  margin-bottom: 8px;
}

.products-hero .page-subtitle {
  max-width: 640px;
}

/* tabovi Troge / Schülke */
.products-hero-tabs {
  margin-top: 24px;
  display: inline-flex;
  gap: 8px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
}

.products-hero-tab {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-muted);
  background: transparent;
}

.products-hero-tab--active {
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
}

/* OPŠTE ZA SEKCIJE PROIZVODA */
.product-section {
  padding: 64px 0 72px;
  background: rgba(255, 255, 255, 0.98);
}

.product-section--blue {
  background: linear-gradient(135deg, #2f4f8f, #456BAC);
}

.product-section-header {
  max-width: 720px;
  margin: 0 auto 32px;
  text-align: center;
}

.product-section-header h2 {
  font-size: 1.8rem;
  color: var(--color-primary);
  margin-bottom: 10px;
}

#troge .product-section-header h2 {
  color: #e4007c;
}

.product-section-header p {
  font-size: 0.98rem;
  color: var(--color-muted);
}

.product-section-header--light h2 {
  color: #f9fafb;
}

.product-section-header--light p {
  color: #e5e7eb;
}

/* GRID ZA KARTICE */
/* GRID ZA KARTICE – default za sve (Troge + ostalo) */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

/* Schülke – posebna logika da poslednje 2 budu centrirane */
.product-grid--schuelke {
  margin-top: 8px;

  /* prebacujemo na flex da bi zadnji red mogao da se centrira */
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* ovo centrira kartice u redu */
  gap: 22px;
}

/* širina jedne kartice u Schülke gridu na desktopu:
   3 u redu, 2 u poslednjem redu lepo centrirane */
.product-grid--schuelke .product-card-link {
  flex: 0 1 calc(33.333% - 22px);
  max-width: 320px;
}

/* RESPONSIVE ZA PROIZVODE */
@media (max-width: 900px) {
  /* za ostale grideve: 2 u redu */
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* za Schülke: isto 2 u redu, centrirane */
  .product-grid--schuelke .product-card-link {
    flex: 0 1 calc(50% - 22px);
    max-width: none;
  }

  .products-cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  /* za ostale grideve: 1 u redu */
  .product-grid {
    grid-template-columns: 1fr;
  }

  /* za Schülke: isto 1 po redu */
  .product-grid--schuelke .product-card-link {
    flex: 0 1 100%;
  }

  .products-hero {
    padding: 64px 0 40px;
  }

  .products-hero-tabs {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .product-section {
    padding: 48px 0 56px;
  }

  .products-cta {
    padding: 40px 0 48px;
  }
}

/* SAME KARTICE – sada samo ikonica + naziv, bez “kartica” */

.product-card-simple {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 4px;
  text-align: center;

  background: transparent;
  border: none;
  box-shadow: none;
  cursor: default;

  transition: transform 0.18s ease;
}

/* hover efekat samo kada je u linku */
.product-card-link:hover .product-card-simple {
  transform: translateY(-2px);
}

.product-card-simple h3 {
  font-size: 1rem;
  color: var(--color-primary);
  margin: 0;
}

/* pošto više nema opisa */
.product-card-simple p {
  display: none;
}

/* Troge – da bude sve lepo centrirano */
.product-card-simple--troge {
  align-items: center;
}

/* Ikonica – malo veća, centrirana */
.product-card-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background-color: #ffffff;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70%;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

/* Mapiranje na postojeće Troge SVG fajlove ostaje isto */
.product-card-icon--zavojni {
  background-image: url("../img/icons/troge/troge-zavojni-p.svg");
}
.product-card-icon--ubodni {
  background-image: url("../img/icons/troge/troge-ubodni-p.svg");
}
.product-card-icon--urologija {
  background-image: url("../img/icons/troge/troge-urologija-p.svg");
}
.product-card-icon--konci {
  background-image: url("../img/icons/troge/troge-konci-p.svg");
}
.product-card-icon--dijagnostika {
  background-image: url("../img/icons/troge/troge-dijagnostika-p.svg");
}
.product-card-icon--zastita {
  background-image: url("../img/icons/troge/troge-zastita-p.svg");
}

/* Schülke – isti layout, ali bela tipografija na plavoj pozadini sekcije */
.product-card-simple--schuelke {
  align-items: center;
}

.product-card-simple--on-dark {
  background: transparent;
  border: none;
  box-shadow: none;
}

.product-card-simple--on-dark h3 {
  color: #f9fafb;
}

/* opisi uklonjeni, ali ako slučajno negde ostane <p>, neka bude svetao */
.product-card-simple--on-dark p {
  color: #e5e7eb;
}

/* NAPOMENE ISPOD GRIDOVA */
.product-note {
  margin-top: 18px;
  font-size: 0.84rem;
  color: #6b7280;
  text-align: center;
}

.product-note--light {
  color: #e5e7eb;
}

/* CTA NA DNU PROIZVODA */
.products-cta {
  padding: 56px 0 64px;
  background: #f3f4f6;
}

.products-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.products-cta-inner h2 {
  font-size: 1.6rem;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.products-cta-inner p {
  font-size: 0.96rem;
  color: var(--color-muted);
}

/* RESPONSIVE ZA PROIZVODE */
@media (max-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .products-cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .product-grid {
    grid-template-columns: 1fr;
  }

  .products-hero {
    padding: 64px 0 40px;
  }

  .products-hero-tabs {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .product-section {
    padding: 48px 0 56px;
  }

  .products-cta {
    padding: 40px 0 48px;
  }
}

/* PRODUCT PAGE – čista bela pozadina */
body.product-page {
  background: #ffffff;
}

/* Hero iznad proizvoda */
.product-hero {
  padding: 72px 0 32px;
  background: #ffffff;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.product-hero-eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.product-hero-title {
  font-size: 2.2rem;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.product-hero-category {
  font-size: 0.95rem;
  color: var(--color-muted);
}

/* Glavni layout */
.product-main {
  padding: 40px 0 80px;
  background: #ffffff;
}

.product-main-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr);
  gap: 40px;
  align-items: flex-start;
}

.product-image-wrapper {
  background: #f9fafb;
  border-radius: 20px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.product-image-wrapper img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.product-info-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.product-meta-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted);
}

.product-name {
  font-size: 1.6rem;
  color: var(--color-primary);
}

.product-meta {
  font-size: 0.95rem;
  color: var(--color-text);
}

.product-meta p {
  margin-bottom: 4px;
}

.product-description-section h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
  color: var(--color-primary);
}

.product-description-section p {
  font-size: 0.96rem;
  color: var(--color-muted);
}

/* dugme koristi već postojeću .btn .btn-primary */
.product-more-btn {
  margin-top: 10px;
}

/* responsive */
@media (max-width: 900px) {
  .product-main-inner {
    grid-template-columns: 1fr;
  }

  .product-image-wrapper {
    max-width: 480px;
    margin: 0 auto;
  }
}

/* =========================
   CONTACT PAGE
   ========================= */

   body.contact-page {
    background: #0b1020; /* fallback ispod */
  }
  
  /* Glavni plavi blok (naslov + forma + info) */
  .contact-page-main {
    padding: 80px 0 72px;
    background:
      radial-gradient(circle at top left, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0) 45%),
      linear-gradient(135deg, var(--color-primary), #1f3b70);
    color: #f9fafb;
  }
  
  /* Naslov i uvodni tekst */
  
  .contact-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 40px;
  }
  
  .contact-header h1 {
    font-size: 2.1rem;
    margin-bottom: 10px;
    color: #ffffff;
  }
  
  .contact-header p {
    font-size: 1rem;
    color: #e5e7eb;
  }
  
  /* FORMA */
  
  .contact-form-block {
    max-width: 640px;
    margin: 0 auto 40px;
  }
  
  .contact-form-block h2 {
    font-size: 1.4rem;
    margin-bottom: 6px;
    color: #ffffff;
  }
  
  .contact-form-intro {
    font-size: 0.95rem;
    color: #e5e7eb;
    margin-bottom: 20px;
  }
  
  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  .form-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #e5e7eb;
  }
  
  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.7);
    padding: 10px 12px;
    font-size: 0.95rem;
    font-family: inherit;
    color: #0f172a;
    background: #ffffff;
  }
  
  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    outline: 2px solid rgba(228, 0, 124, 0.85); /* Troge pink */
    outline-offset: 1px;
  }
  
  .form-textarea {
    resize: vertical;
    min-height: 120px;
  }
  
  /* Checkbox */
  
  .checkbox-field {
    margin-top: 4px;
  }
  
  .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.86rem;
    color: #e5e7eb;
  }
  
  .checkbox-label input[type="checkbox"] {
    margin-top: 3px;
  }
  
  /* Dugme */
  
  .contact-submit-btn {
    margin-top: 6px;
  }
  
  /* Kontakt info blok */
  
  .contact-info-block {
    max-width: 720px;
    margin: 0 auto;
  }
  
  .contact-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  
  .contact-info-item h3 {
    font-size: 0.98rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 6px;
  }
  
  .contact-info-item p {
    font-size: 0.92rem;
    color: #e5e7eb;
    margin-bottom: 2px;
  }
  
  .contact-info-item a {
    color: #f9a8d4; /* svetlija roze za linkove na plavom */
    text-decoration: none;
  }
  
  .contact-info-item a:hover {
    text-decoration: underline;
  }
  
  /* MAPA PREKO CELE ŠIRINE */
  
  .contact-map {
    width: 100%;
    margin: 0;
  }
  
  .contact-map iframe {
    display: block;
    width: 100%;
    height: 380px;
    border: 0;
  }

  /* Dva polja u jednom redu (Ime / ustanova + Telefon) */
.form-row-two {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .form-row-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
  }
}
  
  /* RESPONSIVE */
  
  @media (max-width: 768px) {
    .contact-page-main {
      padding: 64px 0 56px;
    }
  
    .contact-header h1 {
      font-size: 1.8rem;
    }
  
    .contact-info-grid {
      grid-template-columns: 1fr;
    }
  }

/* =========================
   ABOUT PAGE
   ========================= */

   .about-main {
    background: #f9fafb;
  }
  
  /* HERO */
  .about-hero {
    padding: 96px 0 72px;               /* manji donji padding da bude bliže brojkama */
    background: linear-gradient(180deg, #e5f0ff 0%, #f3f4ff 60%, #f9fafb 100%);
    text-align: center;
  }
  
  .about-eyebrow {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(15, 23, 42, 0.7);
    margin-bottom: 10px;
  }
  
  .about-title {
    font-size: clamp(2.1rem, 3vw, 2.6rem);
    font-weight: 700;
    color: var(--color-primary);         /* tvoja plava boja */
    margin-bottom: 18px;
  }
  
  .about-copy {
    max-width: 920px;                    /* širi tekst */
    margin: 0 auto;
    font-size: 0.98rem;
    color: #4b5563;
  }
  
  .about-copy p + p {
    margin-top: 10px;
  }
  
  /* STATISTIKA – bez okvira/kartice */
  .about-stats {
    padding: 16px 0 72px;                /* brojke bliže hero tekstu */
  }
  
  .about-stats-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    /* bez pozadine, bordera i senke */
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }
  
  .about-stat-card {
    min-width: 160px;
    text-align: center;
  }
  
  .about-stat-number {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.1;
  }
  
  .about-stat-label {
    margin-top: 6px;
    font-size: 0.95rem;
    color: var(--color-muted);
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .about-hero {
      padding: 72px 0 56px;
    }
  
    .about-stats-inner {
      gap: 24px;
    }
  
    .about-stat-number {
      font-size: 2.2rem;
    }
  }
  
/* =========================
   CONTACT STRIP – Kontakt (široka sekcija)
   ========================= */
   .contact-strip {
    padding: 96px 0 104px;
    background: linear-gradient(135deg, #2f4f8f, #456BAC); /* deep blue, ali ne kao footer */
    margin-top: 40px;
  }
  
  .contact-strip-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 40px;
    align-items: stretch;
  }
  
  /* Leva kolona */
  .contact-eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 6px;
  }
  
  .contact-strip-text h2 {
    font-size: 2rem;
    color: #f9fafb;          /* umesto var(--color-primary) */
    margin-bottom: 12px;
  }
  
  .contact-lead {
    font-size: 1rem;
    color: #e5e7eb;          /* umesto var(--color-muted) */
    max-width: 520px;
    margin-bottom: 20px;
  }
  
  .contact-highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    font-size: 0.96rem;
    color: #f9fafb;          /* umesto var(--color-text) */
  }
  
  .contact-highlights li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 6px;
  }
  
  .contact-highlights li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-accent);
  }
  
  .contact-cta {
    margin-top: 4px;
  }
  
  /* Desna kolona – kartica */
  .contact-panel {
    background: #ffffff;
    border-radius: 18px;
    padding: 22px 22px 20px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
    border: 1px solid rgba(148, 163, 184, 0.35);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .contact-panel-title {
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 4px;
  }
  
  /* Jedan red unutar kartice */
  .contact-row {
    padding: 8px 0;
    border-bottom: 1px solid rgba(229, 231, 235, 0.9);
  }
  
  .contact-row:last-child {
    border-bottom: none;
  }
  
  .contact-row-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-muted);
    margin-bottom: 2px;
  }
  
  .contact-row-value {
    font-size: 0.98rem;
    color: var(--color-text);
    line-height: 1.5;
  }
  
  .contact-row-value a,
  .contact-row a {
    color: var(--color-primary);
  }
  
  /* Linkovi iznad su inline, pa omogućimo da ceo broj bude klikabilan */
  .contact-row a.contact-row-value {
    text-decoration: none;
  }
  
  .contact-row a.contact-row-value:hover {
    text-decoration: underline;
  }
  
  /* RESPONSIVE za kontakt sekciju */
  @media (max-width: 900px) {
    .contact-strip-inner {
      grid-template-columns: 1fr;
      gap: 32px;
    }
  
    .contact-strip {
      padding: 72px 0 80px;
      margin-top: 24px;
    }
  }
  
/* =========================
   FOOTER
   ========================= */
   .site-footer {
    padding: 56px 0 40px;
    background: #0f172a;               /* tamna plava, malo svetlija od crne */
    color: #e5e7eb;
    border-top: 1px solid rgba(148, 163, 184, 0.35);
  }
  
  .footer-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.2fr; /* 3 kolone */
    gap: 32px;
    align-items: flex-start;
  }
  
  /* kolone */
  .footer-col {
    font-size: 0.94rem;
  }
  
  .footer-col--brand {
    max-width: 420px;
  }
  
  .footer-logo {
    height: 52px;
    margin-bottom: 14px;
  }
  
  .footer-slogan {
    font-size: 0.97rem;
    margin-bottom: 10px;
  }
  
  .footer-copy {
    font-size: 0.85rem;
    color: #9ca3af;
  }
  
  /* naslovi u srednjoj i desnoj koloni */
  .footer-heading {
    font-size: 1.02rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #f9fafb;
  }
  
  .footer-col--contact p {
    margin-bottom: 4px;
  }
  
  .footer-col--contact a {
    color: #bfdbfe; /* svetlija plava */
  }
  
  /* sertifikati */
  .footer-cert-text {
    font-size: 0.9rem;
    color: #9ca3af;
    margin-bottom: 12px;
  }
  
  .footer-cert-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }
  
  .footer-cert-img {
    max-height: 70px;
    width: auto;
    border-radius: 6px;
    background: #ffffff;
    padding: 4px 6px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.45);
  }
  
  /* link hover u footeru */
  .site-footer a:hover {
    text-decoration: underline;
  }
  
  /* RESPONSIVE footer */
  @media (max-width: 900px) {
    .footer-inner {
      grid-template-columns: 1fr 1fr;
      row-gap: 32px;
    }
  
    .footer-col--brand {
      grid-column: 1 / -1; /* preko cele širine gore */
    }
  }
  
  @media (max-width: 640px) {
    .footer-inner {
      grid-template-columns: 1fr;
    }
  
    .footer-col {
      max-width: 100%;
    }
  
    .footer-cert-logos {
      justify-content: flex-start;
    }
  
    .footer-logo {
      margin-bottom: 10px;
    }
  }
  
  /* =========================
     FLOATING ACTION BUTTONS
     ========================= */
  .floating-actions {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .fab {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    border: 0;
    background: var(--color-primary);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.35);
    cursor: pointer;
    transition:
      transform 0.18s ease,
      box-shadow 0.18s ease,
      background-color 0.18s ease,
      opacity 0.18s ease,
      visibility 0.18s ease;
  }
  
  .fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.45);
    background: #31539a;
  }
  
  .fab:active {
    transform: translateY(0);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.35);
  }
  
  .fab--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  
  .fab--call {
    background: var(--color-accent);
  }
  
  .fab--call:hover {
    background: #ff9c1a;
  }
  
  /* =========================
     CUSTOM SCROLLBAR
     ========================= */
  ::-webkit-scrollbar {
    width: 14px;
    height: 14px;
  }
  
  ::-webkit-scrollbar-track {
    background: #e5e7eb;
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 999px;
    border: 3px solid #e5e7eb;
  }
  
  /* Firefox */
  html {
    scrollbar-width: auto;
  }

/* =========================
   TROGE CATEGORY PAGE – Zavojni materijal
   ========================= */

   .category-page {
    background: #ffffff !important;
  }
  
  /* Hero za naslov kategorije */
  .category-hero {
    padding: 80px 0 32px;
    text-align: center;
    background: #ffffff;
  }
  
  .category-hero .page-eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 10px;
  }
  
  .category-hero .page-title {
    font-size: 2.6rem;
    color: var(--color-primary);
    margin-bottom: 0;
  }
  
  /* Sekcija sa proizvodima */
  .category-products {
    padding: 32px 0 80px;
  }
  
  /* 2 kartice u redu */
  .category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 22px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: stretch;
  }
  
  /* Link oko kartice */
  .category-card-link {
    display: block;
  }
  
  /* Čiste, kompaktnije kartice */
  .category-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr); /* leva kolona slika, desno tekst */
    column-gap: 18px;
    align-items: center;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.3);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }
  
  .category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
    border-color: rgba(69, 107, 172, 0.55);
  }
  
  /* Slika – čista, bez pozadina */
  .category-card-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .category-card-image img {
    max-width: 100%;
    max-height: 150px;
    object-fit: contain;
  }
  
  /* Tekstualni deo */
  .category-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .category-card-tag {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-muted);
    margin-bottom: 4px;
  }
  
  .category-card-title {
    font-size: 1.2rem;
    color: var(--color-primary);
    margin-bottom: 6px;
  }
  
  /* Kratki opis ispod naslova */
  .category-card-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-muted);
  }
  
  /* Prazna kategorija */
  .category-empty {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 0.95rem;
    color: var(--color-muted);
  }
  
  /* RESPONSIVE */
  @media (max-width: 900px) {
    .category-grid {
      grid-template-columns: 1fr;
      max-width: 100%;
      row-gap: 18px;
    }
  
    .category-card {
      grid-template-columns: 120px minmax(0, 1fr);
      padding: 14px 14px;
    }
  
    .category-card-image img {
      max-height: 120px;
    }
  }
  
  @media (max-width: 640px) {
    .category-card {
      grid-template-columns: 1fr;
      row-gap: 10px;
    }
  
    .category-card-image {
      margin-bottom: 6px;
    }
  
    .category-card-image img {
      max-width: 70%;
      max-height: 130px;
    }
  }

/* Fiks horizontalnog scrolla – grid wrapperi da ne štrče preko ekrana */
.partner-main-inner,
.stats-diagonal,
.contact-strip-inner,
.footer-inner {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Link oko kartice proizvoda */
.category-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.category-card-link .category-card {
  height: 100%;
}

/* Personalna higijena – posebna boja naslova */
.category-hero--personal .page-title {
  color: #D6004E;
}

/* Dezinfekcija i čišćenje površina – posebna boja naslova */
.category-hero--surfaces .page-title {
  color: #62BD1D;
}

/* Pomoćna oprema – posebna boja naslova */
.category-hero--support .page-title {
  color: #787E83;
}

/* Čišćenje i dezinfekcija instrumenata – posebna boja naslova */
.category-hero--instruments .page-title {
  color: #0084CB;
}
/* Tretman rana – koža i sluzokoža – posebna boja naslova */
.category-hero--wounds .page-title {
  color: #0084CB;
}

/* stil za coming soon tekst */

.category-coming-soon {
  max-width: 720px;
  margin: 40px auto 60px;
  padding: 32px 24px;
  text-align: center;
  background: #f5f7fb;
  border-radius: 16px;
  border: 1px solid #d4dde8;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

/* Kada je samo "uskoro" blok u gridu, centriraj ga */
.category-grid.category-grid--coming-soon {
  display: flex;
  justify-content: center;
}

/* Da kartica lepo sedi u centru */
.category-coming-soon {
  width: 100%;
  max-width: 720px;
}

.category-coming-soon-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.category-coming-soon h2 {
  font-size: 24px;
  margin-bottom: 12px;
}

.category-coming-soon p {
  margin-bottom: 20px;
  color: #4b5563;
  line-height: 1.6;
}

.category-coming-soon a {
  font-weight: 600;
}

.category-coming-soon-btn {
  margin-top: 4px;
}

/* ==========================
   HIRURŠKI KONCI – GRID + KARTICE
   ========================== */

/* GRID – 3 u redu na desktopu */
.sutures-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

@media (max-width: 1100px) {
  .sutures-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .sutures-grid {
    grid-template-columns: 1fr;
  }
}

/* JEDNA KARTICA KONCA */

.suture-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 24px 24px 26px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10);
  border: 1px solid rgba(148, 163, 184, 0.35);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* HEADER KARTICE: levi blok (materijal + šifra) + desni blok (struktura + ikonica) */

.suture-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.suture-material {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-bottom: 4px;
}

.suture-code {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--color-primary); /* default, ispod ga bojimo po tipu */
}

/* DESNI GORNJI UGAO – PLETENI / MONOFILAMENT + IKONICA ISPOD TEKSTA */

.suture-structure-wrap {
  margin-left: auto;
  display: flex;
  flex-direction: column;   /* tekst pa ispod ikonica */
  align-items: flex-end;
  gap: 6px;
}

.suture-structure {
  font-size: 0.9rem;
  color: var(--color-muted);
  white-space: normal;
  text-align: right;
}

.suture-structure-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  opacity: 1;
}

/* REDOVI UNUTAR KARTICE */

.suture-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #e5e7eb;
  font-size: 0.9rem;
}

.suture-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.suture-row--multiline {
  flex-direction: column;
}

/* leva kolona – labela */

.suture-label {
  font-weight: 600;
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-primary);
}

/* desna kolona – vrednost */

.suture-value {
  color: #4b5563;
  line-height: 1.5;
  margin-top: 0;
}

.suture-row--multiline .suture-value {
  margin-top: 4px;
  line-height: 1.6;
}

/* BOJA – tekst + VEĆA ikonica sa desne strane */

.suture-color-chips {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  gap: 8px;              /* malo razmaka između teksta i ikonice */
}

.suture-color-icon {
  width: 40px;           /* VEĆE */
  height: 40px;
  object-fit: contain;
}

/* ==========================
   BOJE PILL DUGMIĆA PO PROIZVODU
   (Resorptivni – prvi grid)
   ========================== */

   #konci-resorptivni .suture-card:nth-child(1) .suture-code {
    background: #b684b9;
    color: #ffffff;
  }

#konci-resorptivni .suture-card:nth-child(2) .suture-code {
  background: #dc5427;   /* TRO-PGA RAPID – narandžasta */
}

#konci-resorptivni .suture-card:nth-child(3) .suture-code {
  background: #b88bbe;   /* TRO-GLACTOFIL – svetlija ljubičasta */
}

#konci-resorptivni .suture-card:nth-child(4) .suture-code {
  background: #c9c8c8;   /* TRO-DOXAFIL – siva */
}

#konci-resorptivni .suture-card:nth-child(5) .suture-code {
  background: #f28e37;   /* TRO-GLECAFIL – narandžasta */
}

#konci-resorptivni .suture-card:nth-child(6) .suture-code {
  background: #f5c747;   /* TRO-PLAINFIL – žuta */
}

#konci-resorptivni .suture-card:nth-child(7) .suture-code {
  background: #c6ab78;   /* TRO-CHROFIL – braon */
}

/* NERESORPTIVNI – boje za šifru proizvoda */

/* 1. kartica – TRO-PROPYFIL (plava) */
#konci-neresorptivni .suture-card:nth-child(1) .suture-code {
  background: #7575b5; /* promeni ako hoćeš drugu nijansu plave */
}

/* 2. kartica – TRO-NYLOFIL (tamno plava / skoro crna) */
#konci-neresorptivni .suture-card:nth-child(2) .suture-code {
  background: #75b722;
}

/* TRO-POLYFIL – zelena pozadina pil dugmeta */
#konci-neresorptivni .suture-card:nth-child(3) .suture-code {
  background: #009679;
}

/* 4. kartica – TRO-SILKOFIL (tamna ljubičasto-plava) */
#konci-neresorptivni .suture-card:nth-child(4) .suture-code {
  background: #56c2e9;
}

/* ==========================
   NEEDLE SHAPE – KARTICE
   ========================== */

   .needle-card {
    padding: 24px 24px 22px;   /* malo kompaktnije gore-dole */
  }
  
  /* header u jednom stubu: pill + naziv ispod */
  .needle-card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 16px;
  }
  
  .needle-pill {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 999px;
    background: #111827;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  
  .needle-title {
    font-size: 0.95rem;
    color: #4b5563;
  }
  
  /* Dve kolone: Tip (Shape) | Needle (Cross section) */
  
  .needle-tip-needle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 10px;
  }
  
  .needle-col-heading {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #111827;
  }
  
  .needle-col-sub {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 8px;
  }
  
  .needle-img {
    width: 100%;
    height: auto;
    max-width: 80px; 
  }

  .needle-tip-needle .needle-col:first-child .needle-img {
    max-width: 200px;
  }
  
  /* desna slika (Needle / Cross section) – malo MANJA */
  .needle-tip-needle .needle-col:last-child .needle-img {
    max-width: 60px;
  }
  
  /* linija pre Application kao kod Troge */
  
  .needle-divider {
    border-top: 1px solid #e5e7eb;
    margin: 4px 0 10px;
  }
  
  /* Application blok */
  
  .needle-application {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  .needle-application-label {
    font-weight: 600;
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #111827;
  }
  
  .needle-application-text {
    font-size: 0.9rem;
    color: #4b5563;
    line-height: 1.6;
  }

  /* ==========================
   VELIČINE KONACA – TABELA
   ========================== */

   .sutures-table-wrapper {
    margin: 24px auto 0 auto;       /* centrirano */
    background: #ffffff;
    border-radius: 18px;
    padding: 20px 24px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.35);
  
    display: block;                 /* više NE inline-block */
    max-width: 720px;               /* ovde kontrolišeš ŠIRINU tabela-kutije */
    width: 100%;
    overflow-x: auto;
  }
  
  .sutures-table {
    width: 100%;                    /* puni samo ovu kutiju, ne celu .container širinu */
    border-collapse: collapse;
    font-size: 0.9rem;
  }

.sutures-table thead {
  background: #f9fafb;
}

.sutures-table th,
.sutures-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

.sutures-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  font-weight: 600;
}

.sutures-table tbody tr:nth-child(even) {
  background: #f9fafb;
}

.sutures-table tbody tr:hover {
  background: #eef2ff;
}

.sutures-table td {
  color: #4b5563;
}

/* prva kolona malo uža, treća malo šira zbog opsega mm */
.sutures-table th:nth-child(1),
.sutures-table td:nth-child(1) {
  width: 15%;
}

.sutures-table th:nth-child(2),
.sutures-table td:nth-child(2) {
  width: 20%;
}

.sutures-table th:nth-child(3),
.sutures-table td:nth-child(3) {
  width: 65%;
}

@media (max-width: 640px) {
  .sutures-table-wrapper {
    padding: 16px 16px;
    border-radius: 14px;
  }

  .sutures-table {
    font-size: 0.82rem;
  }

  .sutures-table th,
  .sutures-table td {
    padding: 8px 10px;
  }
}

/* ==========================
   GLOBALNO ZA STRANICU KONACA
   ========================== */

   .sutures-page {
    background: #f3f4f6;           /* lagana siva pozadina kao do sada */
  }
  
  /* da malo “oddahne” od headera */
  .sutures-page main {
    padding-bottom: 72px;
  }
  
  /* ==========================
     HERO – TEKST LEVO, SLIKA DESNO
     ========================== */
  
  .sutures-hero {
    padding: 64px 0 40px;
  }
  
  .sutures-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
  
  .sutures-hero-text {
    max-width: 560px;
  }
  
  .sutures-hero .page-eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 8px;
  }
  
  .sutures-hero .page-title {
    font-size: 2.1rem;
    line-height: 1.2;
    margin: 0 0 14px;
  }
  
  .sutures-hero-lead {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--color-muted);
  }
  

.sutures-hero-image {
  flex: 0 0 460px;      
}

.sutures-hero-image img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
  
  /* hero – responzivno */
  @media (max-width: 900px) {
    .sutures-hero {
      padding-top: 40px;
    }
  
    .sutures-hero-inner {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .sutures-hero-image img {
      max-width: 100%;
    }
  }
  
  /* ==========================
     NAV PILLOVI (ANCORI DO SEKCIJA)
     ========================== */
  
/* NAV PILLOVI (tabs kao kod Troge) */

.sutures-nav {
  padding: 24px 0 8px;
}

.sutures-nav-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e5e7eb;
}

.sutures-nav-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #111827;
  transition: background 0.15s ease, color 0.15s ease,
              box-shadow 0.15s ease, transform 0.15s ease;
}

.sutures-nav-pill:hover {
  background: #111827;
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .sutures-nav-inner {
    justify-content: flex-start;
  }

  .sutures-nav-pill {
    font-size: 0.85rem;
    padding: 8px 16px;
  }
}
  
  /* ==========================
     SEKCIJE NA STRANICI
     ========================== */
  
  .sutures-section {
    padding: 32px 0 64px;
  }
  
  .sutures-section + .sutures-section {
    border-top: 1px solid rgba(148, 163, 184, 0.35);
  }
  
  .sutures-section-title {
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: 18px;
  }
  
  .sutures-intro {
    max-width: 720px;
    font-size: 0.95rem;
    color: var(--color-muted);
    line-height: 1.6;
    margin-bottom: 16px;
  }
  
.sutures-grid--needles {
  width: 100%;          
  margin: 0;           
  justify-content: flex-start;  
}

.sutures-section #needle-shape .container,
#needle-shape .container {
  text-align: left;     
}
  
  #suture-size.sutures-section {
    padding-bottom: 48px;
  }

  /* ==========================
   DETALJI PROIZVODA – TABELA
   ========================== */

.product-details-section {
  padding: 32px 0 64px;
}

.product-details-card {
  margin-top: 24px;
  background: #ffffff;
  border-radius: 18px;
  padding: 20px 24px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.35);
  max-width: 640px;
}

.product-details-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primary);
  margin-bottom: 12px;
}

.product-details-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.product-details-table th,
.product-details-table td {
  padding: 8px 0;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.product-details-table th {
  width: 40%;
  font-weight: 600;
  color: var(--color-muted);
  padding-right: 14px;
  vertical-align: top;
}

.product-details-table td {
  color: #4b5563;
}

.product-details-table tr:last-child th,
.product-details-table tr:last-child td {
  border-bottom: none;
}

/* =========================
   RESPONSIVE
   ========================= */
   @media (max-width: 900px) {
    .stats {
      padding: 64px 0 72px;
    }
  
    .stats-inner {
      max-width: 100%;
    }
  
    .stats-diagonal {
      grid-template-columns: 1fr;
      margin-top: 40px;
      row-gap: 18px;
    }
  
    .stat-card--top,
    .stat-card--middle,
    .stat-card--bottom {
      grid-column: 1 / 2;
      grid-row: auto;
    }
  }
  
  @media (max-width: 768px) {
    /* na telefonu ne prikazujemo ikonice – samo logo */  
    .troge-inner,
    .schulke-inner {
      padding-top: 16px;     /* da ne lepi logo za tekst iznad */
    }
  }

  /* =========================
   partner-main – layout za mobilne
   ========================= */

@media (max-width: 900px) {
  .partner-main {
    padding: 72px 0 72px;
  }

  .partner-main-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .partner-main-inner--troge,
  .partner-main-inner--schuelke {
    text-align: left;
  }

  .troge-card,
  .schulke-card {
    max-width: 100%;
    margin: 0 auto;
  }

  .troge-inner,
  .schulke-inner {
    padding-top: 8px;
  }
}

/* =========================
   Hero – fine-tuning za male ekrane
   ========================= */
   @media (max-width: 600px) {
    .hero-content {
      padding: 80px 0 80px;
    }
  
    .hero-title {
      font-size: 2.4rem;
      letter-spacing: 0.14em;
    }
  
    .hero-actions {
      flex-direction: column;
    }
  
    .hero-actions .btn {
      width: 100%;
      max-width: 260px;
    }
  }

/* =========================
   Troge + Schülke na mobilu
   ========================= */
   @media (max-width: 768px) {
    /* na telefonu ne prikazujemo pill ikonice – samo logo i tekst */
    .troge-icons,
    .schulke-icons {
      display: none;
    }
  
    /* veći, lepo centrirani logoi */
    .troge-logo img,
    .schulke-logo img {
      max-width: 360px;         /* slobodno promeni na 380px ili 400px ako želiš još veće */
      width: 100%;
      margin: 16px auto 24px auto; /* gore malo, dole da ima vazduha */
      display: block;
    }
  
    /* malo lufta oko sadržaja kartice na mobilu */
    .troge-inner,
    .schulke-inner {
      padding-top: 12px;
      padding-bottom: 12px;
    }
  }

/* =========================
   Mobilni burger meni
   ========================= */

   .header-inner {
    position: relative; /* da main-nav može da se pozicionira ispod headera */
  }
  
  @media (max-width: 768px) {
    /* malo više „lufta“ oko logotipa i burgera */
    .site-header .container {
      padding-left: 32px;
      padding-right: 32px;
    }
  
    /* PRIKAŽI burger dugme na mobilu */
    .nav-toggle {
      display: inline-flex;
      z-index: 51; /* iznad dropdown menija */
    }
  
    /* Mobilni dropdown meni */
    .main-nav {
      position: absolute;
      top: 100%;
      left: 32px;
      right: 32px;
  
      background: rgba(248, 250, 252, 0.98);
      flex-direction: column;
      align-items: center;       /* linkovi centrirani */
      text-align: center;
      gap: 12px;
      padding: 14px 18px 18px;
      border-radius: 18px;
      border: 1px solid rgba(148, 163, 184, 0.4);
      box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
  
      opacity: 0;
      transform: translateY(-8px);
      pointer-events: none;
      transition:
        opacity 0.2s ease,
        transform 0.2s ease;
    }
  
    .main-nav.main-nav--open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
  
    .nav-link {
      padding: 4px 0;
      border-bottom: 0;
    }
  
    .lang-switch {
      margin-left: 0;
      padding-top: 6px;
      border-top: 1px solid rgba(209, 213, 219, 0.9);
      width: 100%;
      justify-content: center;
    }
  }