:root{
      --text:#111; --muted:#6b7280; --border:#e5e7eb; --brand:#e11d48;
      --nav:#ffffff; --top:#111827; --top-text:#e5e7eb; --max:1280px; --radius:14px;
    }
    *{box-sizing:border-box}
    body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:#fff}
    a{color:inherit;text-decoration:none}
    .container{max-width:var(--max);margin:0 auto;padding:0 20px}

    /* Header */
    header{background:var(--nav);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40}
    .nav-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
    .brand{display:flex;align-items:center;gap:10px;font-size:28px;font-weight:800}
    nav.menu{display:flex;gap:28px;font-weight:600}
    .actions{display:flex;align-items:center;gap:12px}
    .icon-btn{position:relative;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--border);border-radius:999px;background:#fff;cursor:pointer}
    .badge{position:absolute;top:-6px;right:-6px;background:var(--brand);color:#fff;border-radius:999px;padding:0 7px;font-size:12px;font-weight:800;line-height:20px;height:20px;min-width:20px;text-align:center}

    /* Page header */
    .breadcrumb{color:var(--muted);font-size:.95rem;margin-top:8px}
    .page-title{font-size:40px;font-weight:800;margin:18px 0}

    /* NOVI TOGGLE FILTER PANEL - OVAJ DIO SE MENJA */
    .filter-toggle-container {
      margin: 20px 0;
      position: relative;
    }
    
    .filter-toggle-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--brand);
      color: white;
      border: none;
      border-radius: 10px;
      padding: 12px 20px;
      font-weight: 700;
      cursor: pointer;
      font-size: 16px;
      transition: all 0.2s;
    }
    
    .filter-toggle-btn:hover {
      opacity: 0.9;
      transform: translateY(-1px);
    }
    
    .filter-toggle-btn .arrow {
      transition: transform 0.3s;
    }
    
    .filter-toggle-btn.open .arrow {
      transform: rotate(180deg);
    }
    
    .filter-panel {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px;
      margin-top: 10px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
      z-index: 100;
      display: none;
      animation: slideDown 0.3s ease;
      min-width: 800px;
    }
    
    .filter-panel.open {
      display: block;
    }
    
    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* NOVA FORMA ZA FILTERE */
    .filterbar {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      width: 100%;
    }
    
    .filterbar > div {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
      width: 100%;
    }
    
    .f-group {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 15px;
      min-width: 200px;
      background: #f9fafb;
    }
    
    .f-group legend {
      font-weight: 700;
      margin-bottom: 10px;
      font-size: 14px;
      color: var(--text);
      padding: 0 8px;
    }
    
    .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 5px 8px;
      cursor: pointer;
      font-size: 14px;
    }
    
    .chip input[type="checkbox"] {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
    
    .f-group select {
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: white;
      font-size: 14px;
      min-width: 100px;
    }
    
    #applyFilters {
      background: var(--brand);
      color: white;
      border: none;
      border-radius: 8px;
      padding: 12px 30px;
      font-weight: 600;
      cursor: pointer;
      font-size: 16px;
      transition: all 0.2s;
    }
    
    #applyFilters:hover {
      opacity: 0.9;
      transform: translateY(-1px);
    }
    
    @media (max-width: 1024px) {
      .filter-panel {
        min-width: 600px;
      }
    }
    
    @media (max-width: 768px) {
      .filter-panel {
        position: fixed;
        left: 20px;
        right: 20px;
        min-width: auto;
        max-width: calc(100vw - 40px);
      }
      
      .filterbar > div {
        flex-direction: column;
        gap: 20px;
      }
      
      .f-group {
        min-width: auto;
      }
    }

    /* Kategorije iznad filtera */
    .categories-bar {
      margin: 15px 0 20px;
      display: flex;
      align-items: center;
      gap: 15px;
      flex-wrap: wrap;
    }
    
    .categories-bar span {
      font-weight: 600;
      color: var(--muted);
    }
    
    .categories-bar .chip {
      background: #f3f4f6;
      padding: 6px 12px;
      border-radius: 20px;
      border: 1px solid var(--border);
    }
    
    .categories-bar .chip input[type="checkbox"] {
      margin-right: 6px;
    }

    /* Toolbar */
    .toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:14px}

    /* Grid proizvoda */
    .count{color:var(--muted);text-align:right;margin:6px 2px 14px}
    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
    .two-cols{grid-template-columns:repeat(2,1fr)}
    .card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:box-shadow .2s}
    .card:hover{box-shadow:0 10px 20px rgba(0,0,0,.06)}
    .img-wrap{position:relative;background:#fafafa;display:grid;place-items:center;aspect-ratio:1/1;transition: transform .15s ease, box-shadow .15s ease;}
    .img-wrap:hover{transform: translateY(-1px);box-shadow: 0 6px 18px rgba(0,0,0,.08)}
    .img-wrap img{max-width:78%;height:auto;cursor: default}
    .meta{padding:12px 14px}
    .brand-name{color:var(--muted);font-size:.9rem}
    .title{font-weight:700;margin:6px 0 10px}

    .price-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
    .price{font-weight:900}
    .btn{appearance:none;border:1px solid var(--border);padding:10px 12px;border-radius:10px;background:#fff;font-weight:700;cursor:pointer}
    .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
    .btn:disabled{opacity:.6;cursor:not-allowed}

    /* Footer */
    footer .links h4{font-size:16px;border-left:3px solid red;padding-left:8px;margin-bottom:12px}
    footer ul{list-style:none;padding:0;margin:0;line-height:1.9;font-size:14px;color:#ccc}

    @media (max-width:1024px){
      .grid{grid-template-columns:repeat(2,1fr)}
      nav.menu{display:none}
    }
    @media (max-width:640px){
      .grid{grid-template-columns:1fr}
    }

    /* === PRODUCT MODAL === */
    .modal {position: fixed; inset: 0; z-index: 999; display: none; background: rgba(17,24,39,.6); backdrop-filter: blur(2px)}
    .modal.open { display: block }
    .modal__dialog{position: absolute; inset: 0; margin: auto; width: min(1100px, 94vw); height: min(92vh, 900px); background: #fff; border-radius: 16px; overflow: hidden; display: grid; grid-template-columns: 1.2fr 1fr; box-shadow: 0 25px 70px rgba(0,0,0,.25)}
    @media (max-width: 900px){.modal__dialog{ grid-template-columns: 1fr; height: 92vh }}
    .modal__media{background:#0b0b0b; display:flex; align-items:center; justify-content:center}
    .modal__media img{max-width: 100%; max-height: 100%; object-fit: contain}
    .modal__body{ display:flex; flex-direction:column; height:100% }
    .modal__header{padding:16px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:10px}
    .modal__title{ display:flex; flex-direction:column }
    .modal__brand{ color: var(--muted); font-weight: 600; font-size: .9rem }
    .modal__name{ font-weight: 800; font-size: 1.1rem; margin-top: 4px }
    .modal__price{ font-weight: 900; font-size: 1.05rem; margin-top: 6px }
    .modal__close{width:38px;height:38px;border:1px solid var(--border);border-radius:10px;background:#fff;font-weight:800;cursor:pointer}
    .modal__content{ padding:16px 18px; overflow:auto; flex:1 }
    .modal__section{ margin-bottom:16px }
    .modal__section h4{ margin:0 0 8px; font-size:14px; font-weight:800 }
    .specs{ border:1px solid var(--border); border-radius:12px; overflow:hidden }
    .specs dl{ margin:0 }
    .specs dt, .specs dd{ margin:0; padding:10px 12px }
    .specs dt{background:#f9fafb; border-bottom:1px solid var(--border); font-weight:700; font-size: .9rem}
    .specs dd{ border-bottom:1px solid var(--border); color:#374151; font-size:.95rem }
    .specs dd:last-child, .specs dt:last-child{ border-bottom:0 }

    /* === KORPA (side drawer) === */
    .drawer{position:fixed;top:0;right:0;height:100vh;width:min(440px,94vw);background:#fff;border-left:1px solid var(--border);box-shadow:-20px 0 50px rgba(0,0,0,.18);transform:translateX(100%);transition:transform .25s ease;z-index:1000;display:flex;flex-direction:column}
    .drawer.open{transform:translateX(0)}
    .drawer__head{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
    .drawer__body{padding:14px 16px;overflow:auto;flex:1}
    .empty{color:var(--muted);text-align:center;margin-top:20px}
    .cart-item{display:grid;grid-template-columns:72px 1fr auto;gap:12px;border:1px solid var(--border);border-radius:12px;padding:10px;margin-bottom:10px}
    .cart-item img{width:72px;height:72px;object-fit:cover;border-radius:10px}
    .ci-title{font-weight:800}
    .ci-brand{color:var(--muted);font-size:.9rem}
    .qty{display:flex;align-items:center;gap:8px;margin-top:8px}
    .qty button{width:28px;height:28px;border:1px solid var(--border);border-radius:8px;background:#fff;cursor:pointer}
    .ci-price{font-weight:900;white-space:nowrap}
    .drawer__foot{border-top:1px solid var(--border);padding:14px 16px}
    .sum-row{display:flex;align-items:center;justify-content:space-between;margin:8px 0}
    .korisnicko_ime {
      position: absolute;
      top: 10px;
      left: 20px;
      color: var(--top-text);
      font-weight: 600;
      background: var(--top);
      padding: 6px 12px;
      border-radius: 8px;
    }
    #confirmOverlay,
    #successOverlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.6);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2000;
    }

    .confirm-box {
      background: #fff;
      padding: 24px;
      border-radius: 16px;
      width: 90%;
      max-width: 420px;
      text-align: center;
      box-shadow: 0 25px 60px rgba(0,0,0,.25);
    }

    .confirm-box h3 {
      margin-top: 0;
    }

    .confirm-actions {
      display: flex;
      gap: 12px;
      justify-content: center;
      margin-top: 20px;
    }
    
    /* === DODATNI STILOVI ZA MODAL === */
    .modal__content .btn.primary {
        background: var(--brand);
        color: white;
        border: none;
        padding: 12px;
        border-radius: 10px;
        font-weight: 700;
        cursor: pointer;
        width: 100%;
        margin-top: 10px;
        transition: background 0.2s;
    }

    .modal__content .btn.primary:hover {
        background: #d81b60;
    }
    
    /* Dodajte u CSS sekciju */
    #loginRequiredModal .modal__dialog {
      max-width: 400px;
      width: 90%;
      height: auto;
      max-height: 80vh;
    }

    #loginRequiredModal .btn {
      padding: 12px;
      font-size: 16px;
      border-radius: 10px;
      text-decoration: none;
      display: block;
      font-weight: 600;
    }

    #loginRequiredModal .btn.primary {
      background: var(--brand);
      color: white;
      border: none;
    }

    #loginRequiredModal .btn {
      background: white;
      color: var(--text);
      border: 1px solid var(--border);
    }
    /* === SLIDER STILOVI === */
/* === SLIDER STILOVI - AŽURIRANO === */
/* === SLIDER STILOVI - CENTRIRANE SLIKE === */
/* === ISPRAVNO VERTIKALNO POZICIONIRANJE SLIKE === */

.modal__media {
  position: relative;
  background: #0b0b0b;
  overflow: hidden;
}

/* Slider zauzima ceo prostor */
.slider-container {
  width: 100%;
  height: 100%;
}

/* VAŽNO: ne centriramo po visini */
.slider-track {
  display: flex;
  height: 100%;
  align-items: flex-start; /* ⬅️ KLJUČ */
}

/* Svaki slide */
.slide {
  min-width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* ⬅️ KLJUČ */
  padding-top: 40px;       /* ⬅️ FINO PODIZANJE */
}

/* Sama slika */
.slide img {
  max-width: 80%;
  max-height: 70%;
  object-fit: contain;
  display: block;
}


.slider-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  transform: translateY(-50%);
  z-index: 10;
}

.slider-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

.slider-btn:hover {
  background: rgba(255, 255, 255, 0.4);
}

.slider-dots {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  padding: 0;
}

.dot.active {
  background: white;
  transform: scale(1.2);
}
/* HAMBURGER */
.hamburger{
  display:none;
  font-size:28px;
  background:none;
  border:none;
  cursor:pointer;
}

/* MOBILE NAV – ISTO KAO NA INDEX STRANI */
@media (max-width: 1024px){

  .hamburger{
    display:block;
  }

  nav.menu{
    display:none;
    flex-direction:column;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#fff;
    border-top:1px solid var(--border);
    padding:20px;
    z-index:1000;
  }

  nav.menu.active{
    display:flex;
  }

  header{
    position:relative;
    z-index:1000;
  }
}