/* =========================================================
   LiTime Prodavnica overrides
   - koristi glavni styles.css (../styles.css)
   - ovde su samo dopune/specifičnosti za prodavnicu
   ========================================================= */

/* Header: koristimo isti izgled, samo označimo aktivnu stavku */
.store-header nav a.active{
  color:#fff;
  position:relative;
}
.store-header nav a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:3px;
  border-radius:999px;
  background:var(--accent);
}


/* FIX: čitljivost + izbegavanje preklapanja (prodavnica) */
header.store-header .overlay{
  background: linear-gradient(to bottom,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.45) 65%,
    rgba(0,0,0,0) 100%);
}
/* Manji hero za prodavnicu (da nije full-screen kao slider sa home strane) */
.store-hero{
  padding: calc(var(--topbar-h) + 64px + 18px) 0 22px;
  background:
    radial-gradient(1000px 500px at 15% 0%, rgba(255,106,0,.22), transparent 55%),
    radial-gradient(900px 500px at 85% 10%, rgba(255,106,0,.14), transparent 55%),
    linear-gradient(180deg, #000 0%, #02040c 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.store-hero-top h1{
  margin:0;
  font-size: clamp(22px, 3.2vw, 34px);
  letter-spacing: .2px;
}
.store-hero-top p{
  margin: 10px 0 0;
  color: rgba(255,255,255,.78);
  max-width: 70ch;
  line-height: 1.5;
}

/* Kontrole: pretraga + kategorija */
.store-controls{
  margin-top: 16px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.control{
  flex: 1 1 380px;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(11,15,24,.75);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

.control i{ color: rgba(255,255,255,.75); }

.control input{
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: #fff;
  font-size: 14px;
}

.select{
  flex: 0 0 220px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(11,15,24,.75);
  color:#fff;
  outline:none;
}

/* Sekcija proizvoda: malo kompaktnije nego na home-u */
.store-section{ padding-top: 36px; }

/* =========================================================
   Kartice proizvoda (override glavnih stilova)
   - bela kartica, tanka senka
   - slika centrirana (bez sečenja)
   - cena: nova + precrtana stara
   ========================================================= */
.products .product{
  background: #fff;
  color: #0b0f18;
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  border-radius: 18px;
  overflow: hidden;
}

.products .product:hover{
  box-shadow: 0 14px 32px rgba(0,0,0,.16);
  transform: translateY(-2px);
  transition: .18s ease;
}

/* Slika: ukloni sečenje + centriraj */
.products .product > img{
  width: 100%;
  height: 220px;
  object-fit: contain;
  object-position: center;
  background: #fff;
  padding: 14px;
  display: block;
}

/* Tekst u kartici */
.products .product .p-body{
  padding: 16px 16px 18px;
  background: #fff;
}

.products .product h4{
  color: #0b0f18;
}
.products .product .p-body > div{
  color: rgba(11,15,24,.72);
}

/* Badge da ostane u brand fazonu, ali čitljiv na belom */
.product .badge{
  background: rgba(255,106,0,.14);
  border-color: rgba(255,106,0,.35);
  color: #ff6a00;
}

/* Dugmad u kartici (da budu čitljiva na beloj pozadini) */
.product .p-actions{
  margin-top: 14px;
}
.product .mini-btn{
  background: rgba(11,15,24,.06);
  color: #0b0f18;
  border: 1px solid rgba(0,0,0,.10);
}
.product .mini-btn:hover{
  background: rgba(11,15,24,.10);
}
.product .mini-btn.primary{
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}
.product .mini-btn.primary:hover{
  filter: brightness(0.95);
}

/* Cena */
.product .price{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.product .price .old{
  color: rgba(11,15,24,.45);
  text-decoration: line-through;
  font-weight: 600;
}
.product .price .new{
  color: var(--accent);
  font-weight: 800;
}


/* Korpa broj u headeru */
#cartCount.badge{ margin-left:8px; padding:2px 8px; font-size:12px; vertical-align:middle; }

/* Dugmad: da budu čitljiva na beloj kartici (oslanja se na main css, ali pojačamo kontrast) */
.product .p-actions .mini-btn{
  border-color: rgba(0,0,0,.10);
}
.product .p-actions .mini-btn:not(.primary){
  color: rgba(11,15,24,.82);
}

/* Footer */
.store-footer{
  padding: 26px 0 34px;
  background: linear-gradient(180deg, #01030a 0%, #000 100%);
  border-top: 1px solid rgba(255,255,255,.08);
}
.sf-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  flex-wrap:wrap;
  color: rgba(255,255,255,.75);
  font-size: 13px;
}
.sf-links a{ color: rgba(255,255,255,.75); }
.sf-links a:hover{ color: #fff; }
.sep{ opacity:.5; margin: 0 8px; }

/* Responsive tweaks */
@media (max-width: 720px){
  .store-controls{ gap: 10px; }
  .select{ flex: 1 1 220px; }
  .store-header nav{ display:none; } /* mobile-bar preuzima */
}
/* =========================
   Mobile text centering fix
   ========================= */
@media (max-width: 720px){

  .store-hero .store-hero-top{
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
  }

  .store-hero .store-hero-top p{
    margin-left: auto;
    margin-right: auto;
    max-width: 36ch;
  }

  .store-controls{
    padding-left: 10px;
    padding-right: 10px;
  }
}


/* Footer centering on mobile */
@media (max-width: 720px){
  .sf-inner{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .sf-links{
    justify-content: center;
    flex-wrap: wrap;
  }
  .store-footer small{
    display:block;
    text-align:center;
    margin-top: 12px;
  }
}