/* ============================================================
   DTtools — stilovi stranice proizvoda (merdevine + mešalice)
   Koristi se uz globalni /style.css
   ============================================================ */

/* ── Hero proizvoda ─────────────────────────────────────── */
.product-hero{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:24px;
  align-items:start;
  padding:18px 0 10px;
}

.product-hero h1{
  margin:0;
  font-size:clamp(26px, 3vw, 40px);
  line-height:1.12;
}

.sku{
  margin:10px 0 0;
  color:var(--muted);
  font-size:14px;
}

.sub{
  margin:8px 0 0;
  color:var(--soft);
  line-height:1.7;
}

.quick{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}

.quick__item{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
}

.quick__item .k{
  display:block;
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
}

.quick__item .v{
  display:block;
  font-weight:800;
  font-size:16px;
  margin-top:3px;
}

.product-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

@media (max-width:980px){
  .product-hero{ grid-template-columns:1fr; }
  .quick{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .product-cta .btn{ flex:1 1 auto; }
}

@media (max-width:520px){
  .quick{ grid-template-columns:1fr 1fr; }
  .quick__item .v{ font-size:15px; }
}

/* ── Galerija ───────────────────────────────────────────── */
.gallery-frame{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow);
}

.figure{ margin:0; }

.figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 12;
  object-fit:contain;
  background:#fff;
}

.caption{
  position:absolute;
  left:12px;
  bottom:12px;
}

.counter{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  font-size:13px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.hint{
  margin:10px 0 0;
  font-size:13px;
  color:var(--muted);
}

.noscript-note{
  color:var(--muted);
  font-size:13px;
}

/* strelice */
.nav-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
  user-select:none;
  display:grid;
  place-items:center;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  z-index:2;
}

.nav-btn:hover{
  transform:translateY(-50%) scale(1.05);
  border-color:rgba(245,158,11,.45);
}

.nav-btn:active{ transform:translateY(-50%) scale(.98); }

.nav-btn.prev{ left:12px; }
.nav-btn.next{ right:12px; }

.nav-btn::before{
  content:"";
  width:12px;
  height:12px;
  border-right:3px solid rgba(255,255,255,.88);
  border-bottom:3px solid rgba(255,255,255,.88);
}

.nav-btn.prev::before{ transform:rotate(135deg); margin-left:2px; }
.nav-btn.next::before{ transform:rotate(-45deg); margin-right:2px; }

/* ── Sadržaj (specifikacije + opis) ─────────────────────── */
.content-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:16px;
  padding:20px 0 34px;
}

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

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
}

.card h2{ margin:0 0 14px; font-size:20px; }
.card h3{ margin:16px 0 8px; font-size:16px; }
.card p{ color:var(--soft); line-height:1.75; margin:0 0 10px; }

.specs{
  margin:0;
  display:grid;
  gap:8px;
}

.specs > div{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:11px 14px;
  border-radius:12px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
}

.specs dt{ font-weight:600; color:rgba(255,255,255,.88); }
.specs dd{ margin:0; text-align:right; color:rgba(255,255,255,.82); font-weight:700; }

@media (max-width:620px){
  .specs > div{ grid-template-columns:1fr; gap:2px; }
  .specs dd{ text-align:left; }
}

.card .bullets{
  margin:0 0 4px 18px;
  padding:0;
  display:grid;
  gap:8px;
  color:rgba(255,255,255,.86);
}

.callout{
  margin-top:14px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(245,158,11,.25);
  background:rgba(245,158,11,.10);
  color:rgba(255,255,255,.90);
  line-height:1.65;
}

/* ── Ostali modeli ──────────────────────────────────────── */
.related{
  padding:0 0 40px;
}
.related h2{
  margin:0 0 14px;
  font-size:20px;
}
.related__list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.related__list a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--soft);
  font-size:14px;
  font-weight:600;
  transition:border-color .15s ease, color .15s ease, transform .15s ease;
}
.related__list a:hover{
  border-color:var(--accent-line);
  color:var(--text);
  transform:translateY(-2px);
}

/* ── Lightbox ───────────────────────────────────────────── */
.lb{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
}

.lb.is-open{ display:block; }

.lb__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.lb__panel{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:18px;
}

.lb__close{
  position:absolute;
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
  z-index:2;
  display:grid;
  place-items:center;
}

.lb__close::before,
.lb__close::after{
  content:"";
  width:18px;
  height:2.5px;
  background:rgba(255,255,255,.9);
  position:absolute;
  border-radius:3px;
}

.lb__close::before{ transform:rotate(45deg); }
.lb__close::after{ transform:rotate(-45deg); }
.lb__close:hover{ border-color:rgba(245,158,11,.45); }

.lb__stage{
  width:min(1320px, calc(100vw - 22px));
  height:min(78vh, 880px);
  position:relative;
  display:grid;
  place-items:center;
}

.lb__figure{
  margin:0;
  max-width:100%;
  max-height:100%;
  width:fit-content;
  height:fit-content;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:#fff;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.lb__figure img{
  display:block;
  max-width:min(1100px, calc(100vw - 120px));
  max-height:min(78vh, 880px);
  width:auto;
  height:auto;
  object-fit:contain;
  background:#fff;
}

.lb__caption{
  position:absolute;
  left:12px;
  bottom:12px;
}

.lb__caption span{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.92);
  font-size:13px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.lb__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
  display:grid;
  place-items:center;
  z-index:2;
}

.lb__nav:hover{
  transform:translateY(-50%) scale(1.06);
  border-color:rgba(245,158,11,.45);
}

.lb__nav:active{ transform:translateY(-50%) scale(.98); }

.lb__nav::before{
  content:"";
  width:12px;
  height:12px;
  border-right:3px solid rgba(255,255,255,.88);
  border-bottom:3px solid rgba(255,255,255,.88);
}

.lb__nav--prev{ left:max(8px, calc(50% - 620px)); }
.lb__nav--next{ right:max(8px, calc(50% - 620px)); }
.lb__nav--prev::before{ transform:rotate(135deg); margin-left:2px; }
.lb__nav--next::before{ transform:rotate(-45deg); margin-right:2px; }

@media (max-width:600px){
  .lb__figure img{
    max-width:calc(100vw - 70px);
    max-height:70vh;
  }
  .lb__nav--prev{ left:8px; }
  .lb__nav--next{ right:8px; }
}

/* sličice */
.lb__thumbs{
  width:min(1320px, calc(100vw - 22px));
  margin-top:12px;
  display:grid;
  grid-template-columns:44px 1fr 44px;
  gap:10px;
  align-items:center;
}

.lb__thumbNav{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  cursor:pointer;
  display:grid;
  place-items:center;
}

.lb__thumbNav:hover{ border-color:rgba(245,158,11,.45); }

.lb__thumbNav::before{
  content:"";
  width:10px;
  height:10px;
  border-right:3px solid rgba(255,255,255,.8);
  border-bottom:3px solid rgba(255,255,255,.8);
}

.lb__thumbNav--prev::before{ transform:rotate(135deg); margin-left:2px; }
.lb__thumbNav--next::before{ transform:rotate(-45deg); margin-right:2px; }

.lb__thumbTrack{
  display:flex;
  gap:10px;
  align-items:center;
  width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  padding:6px 2px;
  scrollbar-width:none;
}

.lb__thumbTrack::-webkit-scrollbar{ display:none; }

.lb__thumb{
  flex:0 0 auto;
  width:82px;
  height:56px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#fff;
  cursor:pointer;
  position:relative;
  scroll-snap-align:center;
  padding:0;
}

.lb__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.lb__thumb.is-active{
  border-color:rgba(245,158,11,.65);
  box-shadow:0 10px 24px rgba(245,158,11,.18);
}

.lb__thumb.is-active::after{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid rgba(245,158,11,.65);
  border-radius:12px;
  pointer-events:none;
}

@media (max-width:520px){
  .lb__thumb{ width:68px; height:48px; }
}