/* ============================================================
   Jeftino.shop — stylesheet
   Original color system & layout, stylistically inspired by
   Bosnian consumer-electronics webshops (dark header + warm
   accent + light content), but not a copy of any single site.
   ============================================================ */

:root{
  --dark: #16213a;
  --dark-2: #1f2d4d;
  --accent: #ff7a1a;
  --accent-dark: #e85d04;
  --brand-red: #f71522;
  --brand-red-dark: #c80e1a;
  --teal: #0ea5a3;
  --bg: #f4f6f8;
  --bg-alt: #eef1f5;
  --white: #ffffff;
  --text: #1e2330;
  --muted: #6b7280;
  --border: #e3e6eb;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(22,33,58,.07);
  --shadow-hover: 0 10px 24px rgba(22,33,58,.14);

  /* Fluid layout tokens — these scale continuously with the viewport instead
     of jumping at fixed breakpoints, from small phones up through 4K displays.
     --maxw goes from 1240px at a 1240px-wide viewport up to 3000px at 3840px
     (4K) — the site actually widens out on large monitors instead of staying
     capped at a laptop-width column. */
  --maxw: clamp(1240px, 400px + 67.7vw, 3000px);
  --container-pad: clamp(16px, 1vw + 10px, 40px);

  /* Fluid typography tokens */
  --fs-hero: clamp(1.5rem, 0.95rem + 2.9vw, 6rem);
  --fs-hero-p: clamp(0.85rem, 0.7rem + 0.6vw, 1.375rem);
  --fs-section-title: clamp(1.15rem, 0.9rem + 1vw, 2.5rem);
  --fs-h3: clamp(0.85rem, 0.76rem + 0.35vw, 1.2rem);
  --fs-body: clamp(0.75rem, 0.68rem + 0.25vw, 0.95rem);
  --fs-price: clamp(0.8rem, 0.72rem + 0.3vw, 1.3125rem);
  --fs-btn: clamp(0.75rem, 0.71rem + 0.15vw, 0.9375rem);
  --fs-nav: clamp(0.8rem, 0.76rem + 0.15vw, 0.9375rem);
  --logo-h: clamp(28px, 20px + 1.8vw, 52px);
  --section-pad: clamp(28px, 14px + 4vw, 120px);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: "Poppins", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{margin:0;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}

.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--container-pad);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  padding:clamp(10px,.6vw + 8px,15px) clamp(16px,1vw + 12px,28px);
  border-radius:8px;
  font-weight:600;
  font-size:clamp(12.5px,.65rem + .2vw,15px);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn--accent{
  background:var(--accent);
  color:#fff;
}
.btn--accent:hover{ background:var(--accent-dark); transform:translateY(-1px); }
.btn--small{
  width:100%;
  background:var(--dark);
  color:#fff;
  padding:9px 14px;
  border-radius:7px;
  font-size:13px;
}
.btn--small:hover{ background:var(--accent); }

/* ---------- Top bar ---------- */
@keyframes topbarPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,122,26,.5); }
  70%{ box-shadow:0 0 0 7px rgba(255,122,26,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,122,26,0); }
}
.topbar{
  background:linear-gradient(115deg,#ff2230 0%,var(--brand-red) 55%,var(--brand-red-dark) 100%);
  color:rgba(255,255,255,.92);
  font-size:13px;
  position:relative;
  z-index:51;
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:36px;
}
.topbar__slogan{
  color:rgba(255,255,255,.85);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.01em;
  white-space:nowrap;
}
.topbar__right{ display:flex; gap:18px; }
.topbar__link{ position:relative; transition:color .2s ease; }
.topbar__link::after{
  content:"";
  position:absolute;
  left:0; bottom:-3px;
  width:0; height:1.5px;
  background:#fff;
  transition:width .25s ease;
}
.topbar__link:hover{ color:#fff; }
.topbar__link:hover::after{ width:100%; }

/* ---------- Header ---------- */
.header{
  background:var(--white);
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:var(--shadow);
}
.header__inner{
  display:flex;
  align-items:center;
  gap:24px;
  padding:14px 20px;
}
.header__burger{
  display:none;
  flex-direction:column;
  gap:4px;
  padding:6px;
}
.header__burger span{
  width:22px; height:2px; background:var(--dark); border-radius:2px;
  transition:background .2s ease;
}

.logo{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.logo__img{ height:var(--logo-h); width:auto; display:block; }

.search{
  flex:1;
  display:flex;
  background:var(--bg-alt);
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--border);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.search:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,122,26,.15);
}
.search input{
  flex:1;
  border:none;
  background:transparent;
  padding:11px 14px;
  font-size:14px;
  outline:none;
}
.search button{
  padding:0 16px;
  background:var(--accent);
  color:#fff;
  transition:background .2s ease;
}
.search button:hover{ background:var(--accent-dark); }

.header__actions{ display:flex; gap:20px; flex-shrink:0; }
.header__action{
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:11px;
  color:var(--dark);
  position:relative;
  gap:2px;
  transition:transform .2s ease;
}
.header__action svg{ color:var(--dark); transition:color .2s ease; }
.header__action:hover{ transform:translateY(-2px); }
.header__action:hover svg{ color:var(--accent); }
.header__action--cart{ position:relative; }
.cart-count{
  position:absolute;
  top:-6px; right:-10px;
  background:var(--accent);
  color:#fff;
  font-size:10px;
  font-weight:700;
  width:16px;height:16px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  animation:topbarPulse 2.4s ease-out infinite;
}

/* ---------- Nav / categories ---------- */
.nav{
  background:var(--dark-2);
  position:relative;
}
.nav__glow{
  position:absolute;
  width:260px; height:260px;
  border-radius:50%;
  filter:blur(8px);
  pointer-events:none;
  opacity:.14;
  animation:footerGlowMove 14s ease-in-out infinite;
}
.nav__glow--a{ top:-130px; left:8%; background:radial-gradient(circle,var(--accent),transparent 70%); }
.nav__glow--b{ top:-140px; right:6%; background:radial-gradient(circle,var(--teal),transparent 70%); animation-delay:-7s; }
.nav .container{ display:flex; align-items:center; position:relative; z-index:1; }
.nav__cat-wrap{ position:relative; }
.nav__cat-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
  font-weight:600;
  font-size:14px;
  padding:13px 20px 13px 0;
  white-space:nowrap;
  transition:color .2s ease;
}
.nav__cat-toggle svg{ transition:transform .25s ease; }
.nav__cat-toggle:hover{ color:var(--accent); }
.nav__cat-toggle:hover svg{ transform:rotate(90deg); }
.nav__cat-menu{
  position:absolute;
  top:100%; left:0;
  background:#fff;
  border-radius:0 0 8px 8px;
  box-shadow:var(--shadow-hover);
  min-width:230px;
  display:none;
  flex-direction:column;
  z-index:60;
  overflow:hidden;
}
.nav__cat-menu.open{ display:flex; animation:navMenuIn .22s ease both; }
.nav__cat-menu a{
  padding:11px 18px;
  font-size:14px;
  color:var(--text);
  border-bottom:1px solid var(--border);
  transition:background .15s ease, color .15s ease, padding-left .15s ease;
}
.nav__cat-menu a:hover{ background:var(--bg-alt); color:var(--accent); padding-left:22px; }

@keyframes navMenuIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}

.nav__links{
  display:flex;
  gap:6px;
  margin-left:10px;
  flex-wrap:wrap;
}
.nav__link{
  display:block;
  position:relative;
  padding:clamp(11px,.8vw + 8px,16px) clamp(10px,.8vw + 6px,16px);
  font-size:var(--fs-nav);
  color:#dde3ef;
  font-weight:500;
}
.nav__link::after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:8px;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .25s cubic-bezier(.65,0,.35,1);
}
.nav__link:hover{ color:#fff; }
.nav__link:hover::after{ transform:scaleX(1); }
.nav__link--accent{ color:var(--accent); font-weight:700; }
.nav__link--accent:hover{ color:var(--accent-dark); }
.nav__link--accent::after{ background:var(--accent-dark); }
.nav__link--current::after{ transform:scaleX(1); }
.nav__link--current:not(.nav__link--accent){ color:#fff; font-weight:600; }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--border); }
.hero__slides{ position:relative; height:728px; overflow:hidden; }
.hero__slide{
  position:absolute; inset:0;
  display:flex;
  align-items:center;
  overflow:hidden;
  transform:translateX(100%);
  transition:transform .75s cubic-bezier(.65,0,.35,1);
}
.hero__slide--active{ transform:translateX(0); z-index:2; }
.hero__slide--prev{ transform:translateX(-100%); }
.hero__slide--next{ transform:translateX(100%); }

/* full-bleed lifestyle photo background, with a light scrim so text stays readable */
.hero__photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
  filter:brightness(.88);
  transform:scale(1);
  transition:transform 8s ease;
}
.hero__slide--active .hero__photo{ transform:scale(1.06); }
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to right, rgba(8,14,26,.78) 0%, rgba(8,14,26,.5) 45%, rgba(8,14,26,.12) 100%);
  z-index:1;
}

.hero__content{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  justify-content:flex-start;
}
.hero__text{ max-width:clamp(300px, 45vw, 900px); color:#fff; text-align:left; }
.hero__tag{
  display:inline-block;
  color:#fff;
  background:var(--accent);
  padding:clamp(4px,.5vw,8px) clamp(12px,1.2vw,22px);
  border-radius:8px;
  font-size:clamp(10px, .55rem + .25vw, 14px);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:clamp(10px,1.2vw,18px);
}
.hero__tag--blue{ background:#2f6fed; }
.hero__tag--purple{ background:#8b3fe8; }
.hero__tag--teal{ background:var(--teal); }
.hero__tag--olive{ background:#7a8450; }
.hero__tag--forest{ background:#2f6b3a; }

/* decorative animated accent bar under the tag */
.hero__underline{
  display:block;
  width:54px; height:4px;
  border-radius:2px;
  margin-bottom:18px;
  transform-origin:left center;
  transform:scaleX(0);
}
.hero__underline--blue{ background:#5b93ff; }
.hero__underline--purple{ background:#a876f5; }
.hero__underline--teal{ background:#3fd6c9; }
.hero__underline--olive{ background:#c3d17a; }
.hero__underline--forest{ background:#5cc46c; }

.hero__text h1{
  font-size:var(--fs-hero);
  line-height:1.06;
  font-weight:900;
  color:#fff;
  margin-bottom:clamp(12px,1.5vw,22px);
  letter-spacing:-.02em;
  text-shadow:0 4px 24px rgba(0,0,0,.25);
}
.hero__accent{ display:inline-block; }
.hero__accent--blue{ color:#5b93ff; }
.hero__accent--purple{ color:#a876f5; }
.hero__accent--teal{ color:#3fd6c9; }
.hero__accent--olive{ color:#c3d17a; }
.hero__accent--forest{ color:#5cc46c; }
.hero__text p{ font-size:var(--fs-hero-p); line-height:1.6; color:rgba(255,255,255,.82); margin-bottom:clamp(16px,2vw,30px); max-width:clamp(280px,32vw,600px); }

/* text entrance animation — replays each time a slide becomes active */
@keyframes heroReveal{
  from{ opacity:0; transform:translateY(40px) scale(.94); filter:blur(6px); }
  to{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
@keyframes heroUnderline{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}
.hero__slide--active .hero__tag{ animation:heroReveal .7s cubic-bezier(.16,1,.3,1) both; animation-delay:.15s; }
.hero__slide--active .hero__underline{ animation:heroUnderline .55s cubic-bezier(.65,0,.35,1) both; animation-delay:.5s; }
.hero__slide--active .hero__text h1{ animation:heroReveal .8s cubic-bezier(.16,1,.3,1) both; animation-delay:.32s; }
.hero__slide--active .hero__text p{ animation:heroReveal .8s cubic-bezier(.16,1,.3,1) both; animation-delay:.56s; }
.hero__slide--active .hero__text .btn{ animation:heroReveal .8s cubic-bezier(.16,1,.3,1) both; animation-delay:.74s; }

.hero__dots{
  position:absolute;
  bottom:26px; left:50%;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  z-index:3;
}
.hero__dots button{
  width:9px; height:9px;
  border-radius:50%;
  background:transparent;
  border:1.5px solid rgba(255,255,255,.65);
  box-shadow:inset 0 0 0 0 #fff;
  transition:width .4s cubic-bezier(.65,0,.35,1), border-radius .4s ease, box-shadow .3s ease, border-color .3s ease;
}
.hero__dots button:hover{ border-color:#fff; }
.hero__dots button.active{
  width:30px;
  border-radius:5px;
  border-color:#fff;
  box-shadow:inset 0 0 0 9px #fff;
}

/* ---------- Trust badges ---------- */
.trust{ background:var(--white); border-bottom:1px solid var(--border); }
.trust__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  max-width:var(--maxw);
  margin:0 auto;
  gap:clamp(10px,1.4vw,22px);
  padding:clamp(20px,2.2vw,32px) 20px;
}
.trust__item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px clamp(10px,1.6vw,18px);
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg-alt);
  transition:border-color .2s ease, transform .2s ease;
}
.trust__item:hover{ border-color:var(--accent); transform:translateY(-2px); }
.trust__icon{
  flex-shrink:0;
  width:clamp(38px,3vw,46px);
  height:clamp(38px,3vw,46px);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,122,26,.12);
}
.trust__icon .icon-mask{
  width:56%;
  height:56%;
  color:var(--accent);
}
.trust__icon--bhposta{ background:#fff; border:1px solid var(--border); padding:6px; }
.trust__icon-logo{ width:100%; height:100%; object-fit:contain; display:block; }
.trust__item strong{ display:block; font-size:clamp(13px,.9vw + 9px,15px); color:var(--dark); white-space:nowrap; }
.trust__item span{ font-size:clamp(11.5px,.4vw + 10px,12.5px); color:var(--muted); white-space:nowrap; }

/* ---------- Sections ---------- */
.section{ padding:var(--section-pad) 0; }
.section--alt{ background:var(--bg-alt); }
.section__title{ font-size:var(--fs-section-title); color:var(--dark); margin-bottom:24px; }
.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:24px;
}
.section__head .section__title{ margin-bottom:4px; }
.eyebrow{
  color:var(--accent);
  font-weight:700;
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.link-more{ font-weight:600; font-size:14px; color:var(--dark); }
.link-more:hover{ color:var(--accent); }

/* ---------- Product grid / cards ---------- */
/* Flexbox umjesto grid-a: kad zadnji red nije pun (proizvoda nema tačno
   N po redu), preostale kartice se rasire i popune cijelu širinu umjesto
   da ostavljaju prazninu — broj artikala nikad ne diktira raspored. */
.product-grid, .product-grid--compact{
  display:flex;
  flex-wrap:wrap;
  --grid-gap:22px;
  gap:var(--grid-gap);
}
.product-grid{ --grid-cols:6; }
.product-grid--compact{ --grid-cols:4; }
.product-grid > .product-card,
.product-grid--compact > .product-card{
  flex-grow:1;
  flex-shrink:1;
  flex-basis:calc((100% - (var(--grid-cols) - 1) * var(--grid-gap)) / var(--grid-cols));
}
.product-card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  container-type:inline-size;
  container-name:card;
  transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.product-card:hover{ box-shadow:var(--shadow-hover); transform:translateY(-6px); border-color:transparent; }

.product-card__media{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--bg-alt);
}
.product-card__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s cubic-bezier(.25,.8,.25,1);
}
.product-card:hover .product-card__media img{ transform:scale(1.09); }
.product-card__media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,23,42,0) 60%, rgba(15,23,42,.18) 100%);
  opacity:0;
  transition:opacity .3s ease;
}
.product-card:hover .product-card__media::after{ opacity:1; }

.badge{
  position:absolute; top:12px; left:12px;
  font-size:11px; font-weight:700;
  padding:4px 11px; border-radius:8px; color:#fff;
  z-index:2;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  letter-spacing:.02em;
}
.badge--sale{ background:var(--accent); }
.badge--new{ background:var(--teal); }

.product-card__body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:clamp(11px,4.5cqw,18px) clamp(12px,5cqw,18px) clamp(12px,5cqw,20px);
  text-align:left;
}
.product-card__body h3{
  font-size:var(--fs-h3);
  font-weight:700;
  color:var(--dark);
  line-height:1.35;
  margin:0 0 6px;
  letter-spacing:-.01em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(var(--fs-h3) * 1.35 * 2);
}
.product-card__body p{
  font-size:var(--fs-body);
  color:var(--muted);
  line-height:1.55;
  margin:0 0 clamp(8px,3cqw,14px);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-card__footer{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:space-between;
  gap:clamp(4px,3cqw,10px);
  margin-top:auto;
  min-width:0;
}
.product-card__footer--single{ justify-content:flex-start; }
.price{
  font-weight:800;
  font-size:clamp(11px, 6.5cqw, 21px);
  color:var(--accent-dark);
  white-space:nowrap;
  letter-spacing:-.01em;
  flex-shrink:0;
}
.product-card__btn{
  display:inline-flex;
  align-items:center;
  gap:clamp(3px,1.5cqw,7px);
  flex-shrink:0;
  max-width:100%;
  padding:clamp(6px,3.2cqw,12px) clamp(8px,5cqw,22px);
  border-radius:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;
  font-size:clamp(9.5px, 5cqw, 16px);
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(232,93,4,.28);
  transition:transform .2s ease, box-shadow .2s ease, background .35s ease;
}
.product-card__btn svg{ flex-shrink:0; transition:transform .3s ease; }
.product-card__btn:hover{
  background:linear-gradient(135deg,var(--accent-dark),#c94a02);
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(232,93,4,.4);
}
.product-card__btn:hover svg{ transform:scale(1.15) rotate(-6deg); }
.product-card__btn:active{ transform:translateY(0); }
.product-card__btn.is-added{
  background:linear-gradient(135deg,var(--teal),#0c8a88);
  box-shadow:0 8px 18px rgba(14,165,163,.35);
}
.price--onrequest{
  color:var(--muted);
  font-weight:700;
  font-size:clamp(10px, 5.2cqw, 15px);
}
.product-card__btn--ask{
  background:linear-gradient(135deg,var(--ink,#26313c),#4a5a6a);
  box-shadow:0 4px 12px rgba(38,49,60,.28);
}
.product-card__btn--ask:hover{
  background:linear-gradient(135deg,#4a5a6a,var(--ink,#26313c));
  box-shadow:0 8px 18px rgba(38,49,60,.4);
}

/* On a narrow card (dense grids on large screens, or small phones) the price
   always keeps its full text — the add-to-cart button collapses to a round
   icon-only button instead of ever wrapping or squeezing the price. */
@container card (max-width: 190px){
  .product-card__btn-label{ display:none; }
  .product-card__btn{
    gap:0;
    padding:0;
    width:clamp(28px,15cqw,34px);
    height:clamp(28px,15cqw,34px);
    justify-content:center;
    flex-shrink:0;
  }
}

/* ---------- Promo strip ---------- */
.promo-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px, 1.4vw, 22px);
}
.promo-tile{
  position:relative;
  display:block;
  border-radius:8px;
  overflow:hidden;
  aspect-ratio:4/3;
  isolation:isolate;
  box-shadow:var(--shadow);
  transition:box-shadow .3s ease, transform .3s ease;
}
.promo-tile:hover{ box-shadow:var(--shadow-hover); transform:translateY(-4px); }
.promo-tile__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.25,.8,.25,1);
}
.promo-tile:hover .promo-tile__img{ transform:scale(1.07); }
.promo-tile__scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(0deg, rgba(8,14,26,.92) 0%, rgba(8,14,26,.55) 45%, rgba(8,14,26,.15) 100%);
}
.promo-tile__content{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(16px, 1.6vw, 26px);
  color:#fff;
}
.promo-tile__tag{
  font-size:clamp(10px, .7vw + 7px, 12px);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#ffd23f;
  margin-bottom:6px;
}
.promo-tile__title{
  font-size:clamp(17px, .9vw + 13px, 22px);
  font-weight:800;
  letter-spacing:-.01em;
  margin-bottom:6px;
}
.promo-tile__text{
  font-size:clamp(12px, .3vw + 11px, 13.5px);
  color:rgba(255,255,255,.82);
  line-height:1.5;
  margin-bottom:14px;
  max-width:34ch;
}
.promo-tile__cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  font-size:clamp(12.5px, .3vw + 11.5px, 14px);
  width:fit-content;
  padding-bottom:2px;
  border-bottom:1.5px solid rgba(255,255,255,.4);
  transition:border-color .2s ease;
}
.promo-tile:hover .promo-tile__cta{ border-color:#fff; }
.promo-tile__arrow{ transition:transform .25s ease; display:inline-block; }
.promo-tile:hover .promo-tile__arrow{ transform:translateX(4px); }

/* ---------- Newsletter ---------- */
.newsletter{ background:var(--dark); padding:clamp(36px,4vw,56px) 0; }
.newsletter__card{
  display:flex;
  align-items:center;
  gap:clamp(16px,2vw,28px);
  flex-wrap:wrap;
  background:var(--dark-2);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  padding:clamp(22px,2.6vw,36px);
}
.newsletter__icon{
  flex-shrink:0;
  width:clamp(46px,4vw,58px);
  height:clamp(46px,4vw,58px);
  border-radius:8px;
  background:rgba(255,122,26,.16);
  display:flex;
  align-items:center;
  justify-content:center;
}
.newsletter__icon .icon-mask{ width:50%; height:50%; color:var(--accent); }
.newsletter__body{ flex:1 1 320px; min-width:240px; }
.newsletter__eyebrow{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:6px;
}
.newsletter h2{ font-size:clamp(18px,1vw + 14px,22px); color:#fff; margin-bottom:6px; }
.newsletter p{ font-size:13.5px; color:#a9b3ce; margin:0; max-width:420px; }
.newsletter__form{ display:flex; gap:10px; flex-shrink:0; flex-wrap:wrap; }
.newsletter__form input{
  padding:12px 14px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:#fff;
  width:260px;
  font-size:14px;
}
.newsletter__form input::placeholder{ color:#7c87a3; }
.newsletter__form input:focus{ outline:none; border-color:var(--accent); }

/* ---------- Footer ---------- */
@keyframes footerGlowMove{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(20px,-15px) scale(1.08); }
}

.footer{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#0f172a 0%,#101a33 55%,#0b1325 100%);
  color:#b7c0d6;
  font-size:15px;
}
.footer::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:linear-gradient(90deg,var(--accent),#ffd23f,var(--teal),#5b93ff,#a876f5);
}
.footer__glow{
  position:absolute;
  width:420px; height:420px;
  border-radius:50%;
  filter:blur(10px);
  pointer-events:none;
  opacity:.16;
  animation:footerGlowMove 14s ease-in-out infinite;
}
.footer__glow--a{ top:-160px; left:-100px; background:radial-gradient(circle,var(--accent),transparent 70%); }
.footer__glow--b{ bottom:-180px; right:-100px; background:radial-gradient(circle,var(--teal),transparent 70%); animation-delay:-7s; }

.footer__top{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.3fr;
  gap:30px;
  padding:56px 20px 34px;
}
.footer__col h4{ color:#fff; font-size:17px; margin-bottom:10px; letter-spacing:.01em; }
.footer__h-bar{ display:block; width:30px; height:3px; border-radius:2px; margin:0 0 18px; }
.footer__h-bar--accent{ background:var(--accent); }
.footer__h-bar--teal{ background:var(--teal); }
.footer__h-bar--blue{ background:#5b93ff; }
.footer__col ul li{ margin-bottom:11px; font-size:14.5px; }
.footer__col ul li a{
  position:relative;
  display:inline-block;
  color:#b7c0d6;
  transition:color .2s ease, transform .2s ease;
}
.footer__col ul li a::before{
  content:"→";
  position:absolute;
  left:-16px; top:0;
  opacity:0;
  color:var(--accent);
  transition:opacity .2s ease, left .2s ease;
}
.footer__col ul li a:hover{ color:#fff; transform:translateX(4px); }
.footer__col ul li a:hover::before{ opacity:1; left:-18px; }
.footer__col--brand p{ font-size:14.5px; line-height:1.7; margin:16px 0 20px; max-width:300px; }
.logo--footer{ width:fit-content; }
.logo--footer .logo__img{ height:38px; }

.footer__contact-buttons{ display:flex; gap:10px; flex-wrap:wrap; }
.contact-btn{
  display:flex; align-items:center; gap:9px;
  padding:8px 16px 8px 8px;
  border-radius:8px;
  font-size:13.5px;
  font-weight:600;
  color:#fff;
  border:1px solid transparent;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.contact-btn__icon{
  width:28px; height:28px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  padding:4px;
}
.contact-btn__icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.contact-btn--viber{ background:#7360f2; }
.contact-btn--viber:hover{ background:#5b46c9; transform:translateY(-2px); border-color:rgba(255,255,255,.35); }
.contact-btn--whatsapp{ background:#25d366; }
.contact-btn--whatsapp:hover{ background:#1da851; transform:translateY(-2px); border-color:rgba(255,255,255,.35); }

.footer__contact-info li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14.5px; margin-bottom:13px; color:#b7c0d6;
}
.footer__contact-info li svg{ flex-shrink:0; margin-top:2px; color:var(--accent); }
.footer__contact-info li a{ color:#b7c0d6; transition:color .2s ease; }
.footer__contact-info li a:hover{ color:#fff; }

.footer__social{ display:flex; gap:12px; margin-top:16px; }
.footer__social-link{
  width:40px; height:40px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.footer__social-link:hover{ transform:translateY(-4px) scale(1.08); }
.footer__social-link--fb:hover{ background:#1877f2; box-shadow:0 8px 16px rgba(24,119,242,.4); }
.footer__social-link--ig:hover{ background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7); box-shadow:0 8px 16px rgba(238,42,123,.4); }
.footer__social-link--tt:hover{ background:#fff; color:#000; box-shadow:0 8px 16px rgba(255,255,255,.25); }

.footer__badges{ position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); }
.footer__badges-inner{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  max-width:var(--maxw);
  margin:0 auto;
  gap:16px;
  padding:26px 20px;
}
.footer__badge{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  transition:transform .25s ease, border-color .25s ease;
}
.footer__badge:hover{ border-color:rgba(255,122,26,.5); transform:translateY(-3px); }
.footer__badge-icon{
  flex-shrink:0;
  width:56px; height:56px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,122,26,.14);
  color:var(--accent);
}
.footer__badge-icon .icon-mask{ width:56%; height:56%; }
.footer__badge-icon--bhposta{ background:#fff; padding:10px; }
.footer__badge strong{ display:block; font-size:14px; color:#fff; white-space:nowrap; }
.footer__badge small{ display:block; font-size:12px; color:#8b96b3; margin-top:2px; white-space:nowrap; }

.footer__bottom{ position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.08); }
.footer__bottom-inner{
  display:flex;
  justify-content:space-between;
  padding:16px 20px;
  font-size:13px;
}

/* ---------- Mobile bottom bar ---------- */
.mobile-bar{
  display:none;
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:80;
  background:var(--white);
  border-top:1px solid var(--border);
  box-shadow:0 -4px 16px rgba(22,33,58,.1);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-bar__item{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:10px 4px 8px;
  color:var(--muted);
  font-size:10.5px;
  font-weight:600;
  transition:color .2s ease;
}
.mobile-bar__item::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:28px; height:3px;
  border-radius:0 0 4px 4px;
  background:var(--brand-red);
  opacity:0;
  transition:opacity .2s ease;
}
.mobile-bar__icon-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px; height:34px;
  border-radius:8px;
  background:transparent;
  transition:background .2s ease;
}
.mobile-bar__item svg{ color:inherit; transition:transform .2s ease; }
.mobile-bar__item:active svg{ transform:scale(.88); }
.mobile-bar__item:active .mobile-bar__icon-wrap{ background:var(--bg-alt); }
.mobile-bar__item--active{ color:var(--brand-red); }
.mobile-bar__item--active::before{ opacity:1; }
.mobile-bar__item--active .mobile-bar__icon-wrap{ background:rgba(247,21,34,.1); }
.mobile-bar__label{ line-height:1; }

/* ============================================================
   Responsive
   Font sizes, spacing, logo height, button padding, container width
   and price/button sizing are all fluid via the tokens in :root and
   the cqw-based product card rules above — they scale continuously
   with the viewport (or the card itself) rather than jumping at
   these breakpoints. What's left here is purely structural: column
   counts, stacking order, and things that toggle on/off.
   ============================================================ */
@media (max-width: 1200px){
  .product-grid{ --grid-cols:4; }
  .product-grid--compact{ --grid-cols:4; }
}

@media (max-width: 1024px){
  .product-grid{ --grid-cols:3; }
  .product-grid--compact{ --grid-cols:3; }
  .promo-strip{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .trust__grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 768px){
  body{ padding-bottom:64px; }
  .topbar{ display:none; }
  .logo{ order:1; }
  .header__actions{ display:none; }
  .header__burger{ display:flex; order:3; }
  .search{ display:none; }
  .search--mobile-open{ display:flex; order:4; flex-basis:100%; margin-top:10px; }
  .header__inner{ flex-wrap:wrap; justify-content:space-between; }
  .nav{ display:block; background:transparent; padding:0; min-height:0; }
  .nav__glow{ display:none; }
  .nav > .container{ display:block; padding:0; }
  .nav__cat-toggle{ display:none; }
  .nav__links{ display:none; }
  .nav__cat-wrap{ position:static; }
  .nav__cat-menu{
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    margin:0;
    border-radius:0;
    z-index:200;
    display:none;
    flex-direction:column;
    overflow-y:auto;
    padding-bottom:80px;
  }
  .nav__cat-menu.open{ display:flex; }
  .nav__cat-menu__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 18px;
    background:var(--dark-2);
    position:sticky;
    top:0;
  }
  .nav__cat-menu__head strong{ color:#fff; font-size:15px; }
  .nav__cat-menu__close{
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px; height:32px;
    border-radius:8px;
    background:rgba(255,255,255,.1);
    color:#fff;
    transition:background .2s ease;
  }
  .nav__cat-menu__close:active{ background:rgba(255,255,255,.2); }
  .nav__cat-menu a{ font-size:16px; padding:15px 18px; }
  .hero__text p{ max-width:none; }
  .hero__scrim{ background:rgba(8,14,26,.7); }
  .hero__text{ max-width:90%; }
  .hero__slides{ height:clamp(400px, 70vw, 540px); }
  .product-grid, .product-grid--compact{ --grid-cols:2; }
  .footer__top{ grid-template-columns:1fr; }
  .footer__badges-inner{ grid-template-columns:repeat(2,1fr); }
  .newsletter__card{ flex-direction:column; align-items:flex-start; }
  .newsletter__form{ width:100%; }
  .newsletter__form input{ flex:1; width:auto; }
  .mobile-bar{ display:flex; }
}

/* ---------- Mali mobilni ekrani ---------- */
@media (max-width: 480px){
  .header__inner{ gap:12px; }
  .header__action span:last-child{ font-size:10px; }
  .hero__slides{ height:clamp(340px, 90vw, 460px); }
  .hero__text{ max-width:100%; }
  .hero__dots{ bottom:14px; }
  .product-grid, .product-grid--compact{ --grid-cols:2; --grid-gap:10px; }
  .trust__grid{ grid-template-columns:1fr; padding:16px; gap:14px; }
  .promo-strip{ gap:12px; }
  .newsletter__form{ flex-direction:column; }
  .newsletter__form input{ width:100%; }
  .footer__badges-inner{ grid-template-columns:1fr; gap:6px; padding:16px; }
  .footer__badge strong, .footer__badge small, .trust__item strong, .trust__item span{ white-space:normal; }
  .footer__bottom-inner{ flex-direction:column; gap:6px; align-items:flex-start; }
}

/* ============================================================
   Veliki ekrani — laptop, 2K i 4K monitori
   Column counts still step up at these widths so cards don't get
   too wide; every value inside each card keeps scaling fluidly.
   ============================================================ */
@media (min-width: 1440px){
  .hero__slides{ height:clamp(600px, 42vw, 780px); }
}

@media (min-width: 1920px){
  .hero__slides{ height:clamp(700px, 40vw, 840px); }
  .product-grid--compact{ --grid-cols:6; }
}

@media (min-width: 2560px){
  .hero__slides{ height:clamp(800px, 34vw, 920px); }
  .product-grid{ --grid-cols:7; }
  .product-grid--compact{ --grid-cols:8; }
}

@media (min-width: 3840px){
  .hero__slides{ height:clamp(900px, 28vw, 1080px); }
  .product-grid{ --grid-cols:8; }
}

/* ============================================================
   Shop pages — pretraga, proizvod, korpa (added for e-commerce phase)
   ============================================================ */

.product-grid__empty{
  width:100%;
  text-align:center;
  padding:30px;
  color:var(--muted);
  font-size:14px;
}
.price__old{
  font-weight:500;
  font-size:12px;
  color:var(--muted);
  margin-left:4px;
}
.product-card__stock{
  font-size:11px;
  color:var(--muted);
  font-weight:600;
}
a.product-card__media{ display:block; }

/* ---------- Breadcrumb ---------- */
/* ---------- Page head band (breadcrumb bar) ----------
   Used at the top of every inner page (search, product, contact) so it
   reads as a designed section — not a bare line of text — while still
   lining up with the same container width as the rest of the site. */
.page-head{
  position:relative;
  overflow:hidden;
  background:linear-gradient(115deg, var(--dark) 0%, var(--dark-2) 100%);
  border-bottom:3px solid var(--accent);
}
.page-head::before{
  content:"";
  position:absolute;
  top:-120px; right:-80px;
  width:320px; height:320px;
  border-radius:50%;
  background:radial-gradient(circle, var(--accent), transparent 70%);
  opacity:.16;
  pointer-events:none;
}
.page-head::after{
  content:"";
  position:absolute;
  bottom:-140px; left:8%;
  width:280px; height:280px;
  border-radius:50%;
  background:radial-gradient(circle, var(--teal), transparent 70%);
  opacity:.14;
  pointer-events:none;
}
.page-head__inner{
  position:relative;
  z-index:1;
  padding-top:clamp(18px,1.6vw,28px);
  padding-bottom:clamp(18px,1.6vw,28px);
}
.breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  font-size:clamp(11.5px,.3vw + 11px,13.5px);
  color:rgba(255,255,255,.6);
}
.breadcrumb a{ color:rgba(255,255,255,.72); transition:color .2s ease; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb__sep{ color:rgba(255,255,255,.35); }
.breadcrumb__current{ color:#fff; font-weight:600; }
.page-head__title{
  position:relative;
  z-index:1;
  color:#fff;
  font-size:var(--fs-section-title);
  font-weight:800;
  letter-spacing:-.01em;
  margin-top:6px;
}

/* ---------- Filter bar (pretraga.html) ---------- */
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:24px;
}
.filter-chip{
  padding:8px 16px;
  border-radius:8px;
  background:var(--white);
  border:1px solid var(--border);
  font-size:13px;
  font-weight:600;
  color:var(--text);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.filter-chip:hover{ border-color:var(--accent); color:var(--accent); }
.filter-chip.active{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* ---------- Product detail page ---------- */
.pd{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  padding:36px 0 60px;
  align-items:start;
}
.pd__media{
  border-radius:8px;
  overflow:hidden;
  background:var(--white);
  border:1px solid var(--border);
  aspect-ratio:1/1;
}
.pd__media img{ width:100%; height:100%; object-fit:cover; }
.pd__badges{ display:flex; gap:8px; margin-bottom:14px; }
.pd h1{ font-size:clamp(20px, 1vw + 16px, 34px); color:var(--dark); margin-bottom:10px; letter-spacing:-.01em; }
.pd__desc{ color:var(--muted); font-size:clamp(13px, .2vw + 12px, 15px); line-height:1.7; margin-bottom:20px; }
.pd__price{ font-size:clamp(20px, 1.2vw + 15px, 34px); font-weight:800; color:var(--accent-dark); margin-bottom:6px; }
.pd__price .price__old{ font-size:clamp(13px, .3vw + 12px, 17px); }
.pd__stock{ font-size:13px; margin-bottom:22px; font-weight:600; }
.pd__stock--ok{ color:var(--teal); }
.pd__stock--out{ color:var(--brand-red); }
.pd__qty{
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.pd__qty button{
  width:36px; height:36px; border-radius:8px;
  background:var(--bg-alt); border:1px solid var(--border);
  font-size:16px; font-weight:700; color:var(--dark);
}
.pd__qty button:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.pd__qty input{
  width:48px; text-align:center; border:1px solid var(--border);
  border-radius:8px; padding:8px 4px; font-size:14px;
}
.pd__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.pd__actions .btn{ font-size:15px; padding:14px 28px; width:auto; }
.pd__price--onrequest{ color:var(--muted); font-size:clamp(17px, .6vw + 14px, 24px); }
.pd__order{
  margin-top:22px;
  padding-top:22px;
  border-top:1px solid var(--border);
}
.pd__order-label{ display:block; font-size:13px; color:var(--muted); margin-bottom:10px; }
.pd__order-buttons{ display:flex; flex-wrap:wrap; gap:10px; }
.pd__meta{
  margin-top:22px;
  padding-top:22px;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.pd__meta-item{ display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--dark); }
.pd__meta-icon{
  flex-shrink:0;
  width:36px; height:36px;
  border-radius:8px;
  background:rgba(255,122,26,.12);
  display:flex; align-items:center; justify-content:center;
}
.pd__meta-icon .icon-mask{ width:52%; height:52%; color:var(--accent); }

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

/* ---------- Cart page ---------- */
.cart-page{ padding:36px 0 60px; }
.cart-page h1{ font-size:clamp(19px, .8vw + 15px, 28px); color:var(--dark); margin-bottom:24px; }
.cart-layout{ display:grid; grid-template-columns:2fr 1fr; gap:30px; align-items:start; }
@media (max-width: 900px){ .cart-layout{ grid-template-columns:1fr; } }

.cart-list{ display:flex; flex-direction:column; gap:14px; }
.cart-row{
  display:flex; align-items:center; gap:16px;
  background:var(--white); border:1px solid var(--border); border-radius:8px;
  padding:14px;
}
.cart-row__img{ width:76px; height:76px; border-radius:8px; overflow:hidden; flex-shrink:0; background:var(--bg-alt); }
.cart-row__img img{ width:100%; height:100%; object-fit:cover; }
.cart-row__info{ flex:1; min-width:0; }
.cart-row__info h3{ font-size:14.5px; margin-bottom:4px; }
.cart-row__info a{ color:var(--text); }
.cart-row__price{ font-size:13px; color:var(--muted); }
.cart-row__qty{ display:flex; align-items:center; gap:8px; }
.cart-row__qty button{
  width:28px; height:28px; border-radius:6px; background:var(--bg-alt); border:1px solid var(--border); font-weight:700;
}
.cart-row__qty span{ width:24px; text-align:center; font-weight:600; }
.cart-row__total{ font-weight:800; color:var(--dark); min-width:80px; text-align:right; }
.cart-row__remove{ color:var(--brand-red); font-size:12px; font-weight:600; }
.cart-row__remove:hover{ text-decoration:underline; }

.cart-empty{ text-align:center; padding:60px 20px; color:var(--muted); }
.cart-empty .btn{ margin-top:16px; }

.cart-summary{
  background:var(--white); border:1px solid var(--border); border-radius:8px; padding:22px;
  position:sticky; top:90px;
}
.cart-summary h2{ font-size:17px; margin-bottom:16px; }
.cart-summary__row{ display:flex; justify-content:space-between; font-size:14px; margin-bottom:10px; color:var(--muted); }
.cart-summary__row--total{ font-size:17px; font-weight:800; color:var(--dark); border-top:1px solid var(--border); padding-top:14px; margin-top:6px; }
.cart-summary .btn{ width:100%; text-align:center; margin-top:16px; }

.checkout-form{ display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.checkout-form input, .checkout-form textarea{
  padding:11px 13px; border:1px solid var(--border); border-radius:8px; font-size:14px; font-family:inherit;
}
.checkout-form textarea{ resize:vertical; min-height:60px; }
.checkout-msg{ font-size:13px; font-weight:600; margin-top:10px; }
.checkout-msg--error{ color:var(--brand-red); }
.checkout-msg--ok{ color:var(--teal); }

/* ---------- Contact page ---------- */
.contact-layout{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(20px,2vw,40px);
  align-items:stretch;
}
.contact-card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:8px;
  padding:clamp(24px,2vw,40px);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:box-shadow .3s ease, transform .3s ease;
}
.contact-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-dark));
}
.contact-card--alt::before{ background:linear-gradient(90deg,var(--teal),#0c8a88); }
.contact-card:hover{ box-shadow:var(--shadow-hover); transform:translateY(-3px); }
.contact-card--alt{ background:var(--dark); border-color:var(--dark); color:#dde3ef; }
.contact-card__kicker{
  display:inline-block;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  background:rgba(255,122,26,.1);
  padding:5px 12px;
  border-radius:8px;
  margin-bottom:14px;
}
.contact-card__kicker--alt{ color:var(--teal); background:rgba(14,165,163,.14); }
.contact-card h2{ font-size:clamp(19px,.65vw + 16px,26px); color:var(--dark); margin-bottom:10px; letter-spacing:-.01em; }
.contact-card--alt h2{ color:#fff; }
.contact-card__lead{ color:var(--muted); font-size:14.5px; line-height:1.7; margin:0 0 24px; }
.contact-info-list{ display:flex; flex-direction:column; gap:18px; }
.contact-info-list li{ display:flex; align-items:flex-start; gap:14px; }
.contact-info-list__icon{
  flex-shrink:0;
  width:42px; height:42px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,122,26,.12);
  color:var(--accent);
}
.contact-info-list__icon--a{ background:rgba(255,122,26,.12); color:var(--accent); }
.contact-info-list__icon--b{ background:rgba(14,165,163,.14); color:var(--teal); }
.contact-info-list__icon--c{ background:rgba(47,111,237,.12); color:#2f6fed; }
.contact-info-list__icon--d{ background:rgba(15,23,42,.08); color:var(--dark); }
.contact-info-list strong{ display:block; font-size:13.5px; color:var(--dark); margin-bottom:2px; }
.contact-info-list a, .contact-info-list li > div{ font-size:14.5px; color:var(--muted); }

/* ---------- Ikone kao maska (za prefarbane PNG ikone koje se uklapaju u boju konteksta) ---------- */
.icon-mask{
  display:block;
  width:19px;
  height:19px;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}
.icon-mask--phone{ -webkit-mask-image:url(/images/icons/icon-phone.png); mask-image:url(/images/icons/icon-phone.png); }
.icon-mask--email{ -webkit-mask-image:url(/images/icons/icon-email.png); mask-image:url(/images/icons/icon-email.png); }
.icon-mask--clock{ -webkit-mask-image:url(/images/icons/icon-clock.png); mask-image:url(/images/icons/icon-clock.png); }
.icon-mask--delivery{ -webkit-mask-image:url(/images/icons/icon-delivery.png); mask-image:url(/images/icons/icon-delivery.png); }
.icon-mask--payment{ -webkit-mask-image:url(/images/icons/icon-payment.png); mask-image:url(/images/icons/icon-payment.png); }
.footer__badge-logo{ width:100%; height:100%; object-fit:contain; display:block; }
.contact-info-list a:hover{ color:var(--accent); }

.contact-map{
  margin-top:26px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--border);
  aspect-ratio:16/9;
}
.contact-map iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(.15) contrast(1.02); }
.contact-map--wide{ margin-top:clamp(20px,2vw,40px); aspect-ratio:21/6; }
@media (max-width: 768px){ .contact-map--wide{ aspect-ratio:16/10; } }

.contact-steps{ display:flex; flex-direction:column; gap:18px; margin:0 0 22px; padding:0; list-style:none; counter-reset:step; }
.contact-steps li{ position:relative; padding-left:42px; }
.contact-steps li::before{
  counter-increment:step;
  content:counter(step);
  position:absolute; left:0; top:0;
  width:28px; height:28px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  font-size:13px;
  display:flex; align-items:center; justify-content:center;
}
.contact-steps strong{ display:block; font-size:14.5px; color:#fff; margin-bottom:2px; }
.contact-steps span{ display:block; font-size:13.5px; color:#a9b3c9; line-height:1.6; }
.contact-card__note{ font-size:13px; color:#8b96b3; line-height:1.7; border-top:1px solid rgba(255,255,255,.1); padding-top:18px; margin:0 0 22px; }

.contact-faq{ display:flex; flex-direction:column; gap:10px; }
.contact-faq__item{
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  padding:14px 16px;
  background:rgba(255,255,255,.03);
  transition:background .25s ease, border-color .25s ease;
}
.contact-faq__item:hover{ background:rgba(255,255,255,.06); }
.contact-faq__item[open]{ border-color:rgba(14,165,163,.4); }
.contact-faq__item summary{
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  color:#fff;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.contact-faq__item summary::-webkit-details-marker{ display:none; }
.contact-faq__item summary::after{
  content:"+";
  flex-shrink:0;
  width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  color:var(--teal);
  transition:transform .25s ease;
}
.contact-faq__item[open] summary::after{ content:"−"; }
.contact-faq__item p{
  font-size:13.5px;
  color:#a9b3c9;
  line-height:1.7;
  margin:10px 0 0;
}

@media (max-width: 900px){
  .contact-layout{ grid-template-columns:1fr; }
}

/* ---------- Admin panel ---------- */
.admin-wrap{ max-width:var(--maxw); margin:0 auto; padding:clamp(20px,2vw,40px) clamp(16px,1.6vw,32px) 60px; font-family:"Poppins",sans-serif; }

.admin-login-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  position:relative;
  background:#0f1728;
}
.admin-login-page::before{
  content:"";
  position:absolute; inset:0;
  background-image:url(/images/Vivobarefoot-Sensus-Lifestyle-Trio-5-1920x1080.jpg);
  background-size:cover;
  background-position:center;
  filter:blur(6px) brightness(.32) saturate(1.1);
  transform:scale(1.06);
}
.admin-login{
  position:relative;
  z-index:1;
  width:100%;
  max-width:380px;
  margin:0 auto;
  text-align:center;
  background:rgba(15,23,40,.72);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  padding:clamp(28px,3vw,40px) clamp(24px,2.6vw,34px);
  color:#fff;
}
.admin-login h2{ color:#fff; }
.admin-login input{ width:100%; padding:13px 14px; margin:16px 0; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; border-radius:8px; font-size:14.5px; }
.admin-login input::placeholder{ color:#9aa5c0; }
.admin-login input:focus{ outline:none; border-color:var(--accent); }

.admin-header{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:clamp(18px,1.6vw,26px); }
.admin-header h1{ font-size:clamp(18px,1vw + 14px,24px); margin:0; }
.admin-tabs{ display:flex; gap:10px; margin-bottom:clamp(16px,1.4vw,22px); }
.admin-tabs button{ padding:10px 20px; border-radius:8px; background:var(--bg-alt); font-weight:600; font-size:clamp(13px,.5vw + 11px,15px); }
.admin-tabs button.active{ background:var(--dark); color:#fff; }

.admin-table-wrap{ background:#fff; border-radius:8px; border:1px solid var(--border); overflow:hidden; }
.admin-table{ width:100%; border-collapse:collapse; background:#fff; }
.admin-table th{ padding:clamp(10px,.6vw + 7px,14px) clamp(10px,.7vw + 7px,16px); background:var(--bg-alt); border-bottom:1px solid var(--border); font-size:clamp(11.5px,.35vw + 10px,13px); text-align:left; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
.admin-table td{ padding:clamp(10px,.6vw + 7px,14px) clamp(10px,.7vw + 7px,16px); border-bottom:1px solid var(--border); font-size:clamp(12.5px,.4vw + 10px,14.5px); text-align:left; vertical-align:middle; }
.admin-table tr:last-child td{ border-bottom:none; }
.admin-table tr:hover td{ background:var(--bg-alt); }
.admin-table img{ width:clamp(40px,3vw,52px); height:clamp(40px,3vw,52px); object-fit:cover; border-radius:6px; }
.admin-table input[type="text"], .admin-table input[type="number"], .admin-table select{ width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:6px; font-size:clamp(12px,.35vw + 10.5px,13.5px); }
.admin-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.admin-actions button{ padding:8px 14px; border-radius:6px; font-size:clamp(11.5px,.3vw + 10px,13px); font-weight:600; }
.admin-btn--save{ background:var(--teal); color:#fff; }
.admin-btn--delete{ background:var(--brand-red); color:#fff; }
.admin-btn--upload{ padding:8px 14px; border-radius:6px; background:var(--bg-alt); border:1px solid var(--border); color:var(--dark); font-weight:600; }
.admin-btn--upload:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.admin-add-row{ margin-bottom:clamp(18px,1.6vw,26px); padding:clamp(18px,1.8vw,28px); background:#fff; border-radius:8px; border:1px solid var(--border); }
.admin-add-row h3{ margin-bottom:14px; font-size:clamp(15px,.6vw + 12px,18px); }
.admin-add-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:12px; }
.admin-add-grid input, .admin-add-grid select{ padding:10px 12px; border:1px solid var(--border); border-radius:6px; font-size:clamp(13px,.35vw + 11px,14.5px); }

@media (max-width: 900px){
  .admin-add-grid{ grid-template-columns:repeat(2,1fr); }
  .admin-table-wrap{ overflow-x:auto; }
  .admin-table{ min-width:820px; }
}
@media (max-width: 700px){
  .admin-add-grid{ grid-template-columns:1fr; }
  .admin-add-grid__spacer{ display:none; }
  .admin-header{ flex-direction:column; align-items:flex-start; }
  .admin-wrap{ padding-left:14px; padding-right:14px; }
  .admin-login{ max-width:100%; }
}

/* ---------- Loader stranice (brend animacija pri učitavanju/prelasku) ---------- */
.page-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:#fff;
  opacity:1;
  transition:opacity .35s ease;
}
.page-loader--hidden{
  opacity:0;
  pointer-events:none;
}
.page-loader__mark{
  width:clamp(56px, 9vw, 96px);
  height:auto;
  animation:pageLoaderBounce 1.1s cubic-bezier(.45,0,.55,1) infinite;
  filter:drop-shadow(0 6px 14px rgba(15,23,42,.14));
}
.page-loader__bar{
  width:clamp(90px, 14vw, 140px);
  height:3px;
  border-radius:3px;
  background:rgba(15,23,42,.1);
  overflow:hidden;
}
.page-loader__bar::after{
  content:"";
  display:block;
  width:40%;
  height:100%;
  background:linear-gradient(90deg,var(--accent),var(--teal));
  border-radius:3px;
  animation:pageLoaderSlide 1.1s ease-in-out infinite;
}
@keyframes pageLoaderBounce{
  0%, 100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-14px) scale(1.04); }
}
@keyframes pageLoaderSlide{
  0%{ transform:translateX(-110%); }
  50%{ transform:translateX(60%); }
  100%{ transform:translateX(220%); }
}
@media (prefers-reduced-motion: reduce){
  .page-loader__mark{ animation:none; }
  .page-loader__bar::after{ animation:none; left:0; }
}