/* =========================================================================
   HEADER.CSS  —  jedan header, dve varijante
   -------------------------------------------------------------------------
   Podrazumevano: SVETLI header (krem pozadina).
   Dodaj klasu  .is-transparent  na <header> kad treba PROVIDAN (preko hero-a).
   Sve boje dolaze iz tokena (theme.css). Za rebrand ne diraš ovaj fajl.
   Mobilni meni + login modal izgledaju ISTO u obe varijante (krem "papir").
   ========================================================================= */

/* ---- varijable headera: SVETLA varijanta (default) ---- */
.veloraHeader{
  --h-bg:            var(--c-cream);
  --h-bg-scrolled:   var(--c-cream);
  --h-border:        var(--c-line);
  --h-blur:          0px;
  --h-text:          var(--c-ink);
  --h-tap:           rgba(82,27,22,.08);
  --h-line:          var(--c-line);
  --h-cta-bg:        linear-gradient(135deg, var(--c-cta1), var(--c-cta2));
  --h-cta-text:      var(--c-cream);
  --h-cta-border:    rgba(82,27,22,.16);
  --h-burger:        rgba(82,27,22,.96);
  --h-badge-bg:      rgba(82,27,22,.95);
  --h-badge-text:    var(--c-cream);
  /* dropdown (svetli) */
  --h-drop-bg:       radial-gradient(900px 500px at 30% 0%, rgba(106,36,53,.10), transparent 55%), rgba(240,236,227,.98);
  --h-drop-border:   rgba(82,27,22,.14);
  --h-drop-item-bg:  rgba(82,27,22,.04);
  --h-drop-item-bd:  rgba(82,27,22,.10);
  --h-drop-strong:   rgba(82,27,22,.96);
  --h-drop-span:     rgba(82,27,22,.60);

  --ease: cubic-bezier(.2,.8,.2,1);
  --shadow: 0 18px 60px rgba(0,0,0,.18);
}

/* ---- varijable headera: PROVIDNA varijanta ---- */
.veloraHeader.is-transparent{
  --h-bg:            transparent;
  --h-bg-scrolled:   rgba(10,10,10,.18);
  --h-border:        rgba(255,255,255,.14);
  --h-blur:          10px;
  --h-text:          rgba(255,255,255,.92);
  --h-tap:           rgba(204,51,102,.16);
  --h-line:          rgba(255,255,255,.14);
  --h-cta-bg:        var(--c-cream);
  --h-cta-text:      var(--c-wine);
  --h-cta-border:    rgba(240,236,227,.45);
  --h-burger:        rgba(255,255,255,.92);
  --h-badge-bg:      rgba(255,255,255,.92);
  --h-badge-text:    rgba(35,20,25,.95);
  --h-drop-bg:       radial-gradient(900px 500px at 30% 0%, rgba(84,25,39,.22), transparent 55%), rgba(10,10,10,.72);
  --h-drop-border:   rgba(255,255,255,.14);
  --h-drop-item-bg:  rgba(255,255,255,.06);
  --h-drop-item-bd:  rgba(255,255,255,.10);
  --h-drop-strong:   rgba(255,255,255,.95);
  --h-drop-span:     rgba(255,255,255,.68);
}

/* ===== HEADER BAR ===== */
.veloraHeader{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 99997;
  padding: 18px 22px;
  background: var(--h-bg);
  border-bottom: 1px solid transparent;
  transition: padding .22s var(--ease), background .22s var(--ease),
              border-color .22s var(--ease), backdrop-filter .22s var(--ease);
}
.veloraHeader.is-scrolled{
  padding: 12px 22px;
  background: var(--h-bg-scrolled);
  border-bottom: 1px solid var(--h-border);
  backdrop-filter: blur(var(--h-blur));
  -webkit-backdrop-filter: blur(var(--h-blur));
}

.veloraHeader__inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(18px, 3vw, 54px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}

/* ===== LOGO ===== */
.veloraLogo{
  display: inline-flex; align-items: baseline; gap: 10px;
  text-decoration: none; color: var(--h-text);
  user-select: none; white-space: nowrap;
}
.veloraLogo .logoVelora,
.veloraLogo .logoStudio{
  font-family: var(--font-naslov);
  font-weight: 400; font-size: 28px;
  letter-spacing: -1px; line-height: 1; color: var(--h-text);
}
.veloraLogo .logoVelora{ text-transform: uppercase; }
.veloraLogo .logoStudio{ font-style: italic; opacity: .92; transform: translateY(-1px); }

/* ===== NAV (DESKTOP) ===== */
.veloraNav{
  display: flex; align-items: center; justify-content: center; gap: 26px;
  font-family: var(--font-telo);
  font-weight: 500; font-size: 14px;
  letter-spacing: .18em; text-transform: uppercase;
}
.veloraNav a, .veloraNav button{
  color: var(--h-text); text-decoration: none; opacity: .92;
  padding: 10px; border-radius: 999px; position: relative;
  transition: opacity .18s var(--ease), transform .18s var(--ease), background .18s var(--ease);
  background: none; border: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  line-height: 1; white-space: nowrap;        /* poravnanje sa linkovima */
  display: inline-flex; align-items: center; gap: 6px;
}
.veloraNav a:hover, .veloraNav button:hover{ opacity: 1; transform: translateY(-1px); background: var(--h-tap); }
.veloraNav a:focus, .veloraNav button:focus{ outline: none; background: var(--h-tap); }

/* ===== DROPDOWN (desktop) ===== */
.velDrop{ position: relative; display: inline-flex; align-items: center; gap: 8px; }
.velCaret{ opacity: .75; transform: translateY(1px); display:inline-flex; color: var(--h-text); }
.velDropMenu{
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: 290px; opacity: 0; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  background: var(--h-drop-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--h-drop-border);
  border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; padding: 10px;
}
.velDrop:hover .velDropMenu, .velDrop:focus-within .velDropMenu{
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.velDropItem{
  display:flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 12px; border-radius: 14px;
  border: 1px solid var(--h-drop-item-bd); background: var(--h-drop-item-bg);
  transition: transform .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
  text-decoration:none;
}
.velDropItem:hover{ transform: translateY(-1px); }
.velDropItem strong{
  font-family: var(--font-naslov); font-weight: 400; font-size: 18px;
  letter-spacing: .2px; text-transform: none; color: var(--h-drop-strong);
}
.velDropItem span{
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--h-drop-span); white-space: nowrap;
}

/* ===== RIGHT ACTIONS ===== */
.veloraActions{ display:flex; align-items:center; justify-content:flex-end; gap: 14px; }
.velIconBtn{
  appearance:none; background: transparent; border: 0; padding: 10px;
  border-radius: 999px; color: var(--h-text);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition: transform .16s var(--ease), background .16s var(--ease);
  position: relative;
}
.velIconBtn:hover{ transform: translateY(-1px); background: var(--h-tap); }
.velIconBtn svg{ width: 24px; height: 24px; }

.velCartBadge{
  position:absolute; top: 4px; right: 4px;
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-telo); font-size: 10px; letter-spacing: .08em;
  background: var(--h-badge-bg); color: var(--h-badge-text);
  box-shadow: 0 10px 18px rgba(0,0,0,.14); transform: translate(25%, -25%);
}

/* ===== CTA ===== */
.velCta{
  height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--h-cta-border);
  background: var(--h-cta-bg); color: var(--h-cta-text);
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s var(--ease);
  white-space: nowrap;
  font-family: var(--font-naslov); font-size: 16px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.velCta:hover{ transform: translateY(-1px); box-shadow: 0 18px 40px rgba(0,0,0,.20); filter: saturate(1.03); }

/* ===== BURGER ===== */
.velBurger{
  appearance:none; background: transparent; border: 0; padding: 10px;
  border-radius: 999px; color: var(--h-text);
  display:none; align-items:center; justify-content:center; cursor:pointer;
  transition: transform .16s var(--ease), background .16s var(--ease); position: relative;
}
.velBurger:hover{ transform: translateY(-1px); background: var(--h-tap); }
.velBurgerIcon{ width: 22px; height: 16px; position: relative; display:block; }
.velBurgerIcon span{
  position:absolute; left:0; right:0; height: 1.5px;
  background: var(--h-burger); border-radius: 999px; transform-origin: center;
  transition: transform .22s var(--ease), top .22s var(--ease), bottom .22s var(--ease), opacity .18s var(--ease);
}
.velBurgerIcon span:nth-child(1){ top: 1px; }
.velBurgerIcon span:nth-child(2){ top: 7px; opacity:.92; }
.velBurgerIcon span:nth-child(3){ bottom: 1px; opacity:.92; }
.velBurgerIcon::after{
  content:""; position:absolute; right:-3px; top: 6px; width: 7px; height: 1.5px;
  background: var(--h-burger); opacity:.55; border-radius: 999px;
  transform: rotate(-18deg); transition: opacity .18s var(--ease);
}
body.vel-mobile-open .velBurgerIcon span:nth-child(1){ top: 7px; transform: rotate(45deg); }
body.vel-mobile-open .velBurgerIcon span:nth-child(2){ opacity: 0; }
body.vel-mobile-open .velBurgerIcon span:nth-child(3){ bottom: 7px; transform: rotate(-45deg); }
body.vel-mobile-open .velBurgerIcon::after{ opacity: 0; }

/* ===== RESPONSIVE: nav -> burger ===== */
@media (max-width: 1024px){
  .veloraHeader__inner{ grid-template-columns: auto 1fr auto; gap: 0 !important; }
  .veloraNav{ display:none !important; }
  .velBurger{ display:inline-flex !important; }
  .velCta{ display:none !important; }
  .veloraHeader{ padding-left: 12px !important; padding-right: 6px !important; }
  .veloraHeader__inner{ padding-left: 0 !important; padding-right: 0 !important; }
  .veloraActions{ justify-content: flex-end !important; gap: 10px; }
}

/* =========================================================================
   MOBILNI PANEL + LOGIN  (isti u obe varijante: krem "papir" + vinski masthead)
   ========================================================================= */
.velMobileOverlay{
  position: fixed; inset: 0; z-index: 99996;
  background: radial-gradient(1200px 700px at 70% 18%, rgba(84,25,39,.28), transparent 62%), rgba(5,5,5,.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity .22s var(--ease);
}
.velMobilePanel{
  position: fixed; left: 0; right: 0; top: 0; z-index: 99996;
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: transform .26s var(--ease), opacity .26s var(--ease);
  padding: 66px 10px 12px;
}
body.vel-mobile-open .velMobileOverlay{ opacity: 1; pointer-events: auto; }
body.vel-mobile-open .velMobilePanel{ opacity: 1; pointer-events: auto; transform: translateY(0); }

.velMobileCard{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(84,25,39,.08), transparent 60%), rgba(240,236,227,.96);
  border: 1px solid rgba(59,17,27,.14); border-radius: 22px;
  box-shadow: 0 26px 80px rgba(0,0,0,.24); overflow: hidden;
}
.velMobileTop{
  padding: 16px 16px 14px; border-bottom: 1px solid rgba(240,236,227,.18);
  display:flex; align-items:flex-start; justify-content: space-between; gap: 12px;
  background: linear-gradient(180deg, rgba(84,25,39,.98), rgba(59,17,27,.92));
}
.velMobileKicker{ font-family: var(--font-telo); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: rgba(240,236,227,.78); }
.velMobileTitle{ margin-top: 6px; font-family: var(--font-naslov); font-size: 28px; letter-spacing: .2px; color: rgba(240,236,227,.98); line-height: 1.04; }
.velMobileClose{
  height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(240,236,227,.22); background: rgba(240,236,227,.14); color: rgba(240,236,227,.92);
  cursor:pointer; transition: transform .16s var(--ease), background .16s var(--ease);
  font-family: var(--font-telo); letter-spacing: .14em; text-transform: uppercase; font-size: 11px;
}
.velMobileClose:hover{ transform: translateY(-1px); background: rgba(240,236,227,.20); }

.velMobileNav{ padding: 10px 14px 12px; display: grid; gap: 0; }
.velMobileNav a, .velMobileNav button{
  text-decoration:none; color: rgba(59,17,27,.92);
  font-family: var(--font-telo); letter-spacing: .18em; text-transform: uppercase; font-size: 12px;
  padding: 14px 4px; border: 0; background: transparent; cursor: pointer;
  display:flex; align-items:center; justify-content: space-between; gap: 12px;
  text-align: left; position: relative; transition: transform .14s var(--ease);
}
.velMobileNav a::after, .velMobileNav button::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height: 1px; background: rgba(59,17,27,.12);
}
.velMobileNav a:hover, .velMobileNav button:hover{ transform: translateY(-1px); }
.velMobileNav button span[aria-hidden="true"]{ color: rgba(84,25,39,.78); transform: translateY(1px); }

.velAccPanel{
  display: none; padding: 8px 0 12px 0; margin: 0;
  background: rgba(59,17,27,.035); border-bottom: 1px solid rgba(59,17,27,.10);
}
.velAccPanel a{ display:flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 6px; position: relative; }
.velAccPanel a + a{ border-top: 1px solid rgba(59,17,27,.10); }
.velAccPanel strong{ font-family: var(--font-naslov); font-weight: 400; font-size: 18px; letter-spacing: .2px; text-transform: none; color: rgba(59,17,27,.96); }
.velAccPanel span{ font-family: var(--font-telo); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(59,17,27,.55); white-space: nowrap; }

.velMobileActions{
  padding: 10px 12px 12px; border-top: 1px solid rgba(59,17,27,.12);
  display:flex; gap: 10px; justify-content: flex-end; background: rgba(240,236,227,.92);
}
.velMobileActions .velIconBtn{ color: rgba(59,17,27,.92); }
.velMobileActions .velIconBtn:hover{ background: rgba(84,25,39,.10); }
.velMobileActions .velCartBadge{ background: rgba(84,25,39,.96); color: rgba(240,236,227,.98); }

body.vel-login-open, body.vel-mobile-open{ overflow: hidden; }

/* ===== LOGIN MODAL ===== */
.velLoginOverlay{
  position: fixed; inset: 0; z-index: 99995;
  background: radial-gradient(1200px 700px at 60% 20%, rgba(84,25,39,.32), transparent 60%), rgba(5,5,5,.62);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none; transition: opacity .22s var(--ease);
}
.velLoginModal{
  position: fixed; inset: 0; z-index: 99995; display: grid; place-items: center; padding: 18px;
  opacity: 0; pointer-events: none; transform: translateY(6px);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
body.vel-login-open .velLoginOverlay{ opacity: 1; pointer-events: auto; }
body.vel-login-open .velLoginModal{ opacity: 1; pointer-events: auto; transform: translateY(0); }

.velLoginCard{
  width: min(520px, 92vw); border-radius: 26px; overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid rgba(82,27,22,.14); background: rgba(240,236,227,.98);
}
.velLoginHead{
  padding: 18px 18px 14px; border-bottom: 1px solid rgba(240,236,227,.18);
  display:flex; align-items:flex-start; justify-content: space-between; gap: 12px;
  background: linear-gradient(135deg, var(--c-cta1), var(--c-cta2));
}
.velLoginKicker{ font-family: var(--font-telo); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(240,236,227,.82); }
.velLoginTitle{ margin-top: 6px; font-family: var(--font-naslov); font-size: 34px; letter-spacing: .2px; color: rgba(240,236,227,.98); line-height: 1.03; }
.velLoginSub{ margin-top: 8px; font-family: var(--font-telo); font-size: 12px; letter-spacing: .10em; text-transform: uppercase; color: rgba(240,236,227,.78); }
.velLoginClose{
  height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(240,236,227,.28); background: rgba(240,236,227,.14); color: rgba(240,236,227,.92);
  cursor:pointer; transition: transform .16s var(--ease), background .16s var(--ease);
  font-family: var(--font-telo); letter-spacing: .14em; text-transform: uppercase; font-size: 11px;
}
.velLoginClose:hover{ transform: translateY(-1px); background: rgba(240,236,227,.20); }
.velLoginBody{
  padding: 16px 18px 18px;
  background: repeating-linear-gradient(180deg, rgba(82,27,22,.06) 0px, rgba(82,27,22,.06) 1px, transparent 1px, transparent 38px);
}
.velField{ display:grid; gap: 8px; margin-bottom: 14px; }
.velLabel{ font-family: var(--font-telo); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(82,27,22,.70); }
.velInput{
  height: 48px; border-radius: 16px; border: 1px solid rgba(82,27,22,.16);
  background: rgba(82,27,22,.05); color: rgba(82,27,22,.92); padding: 0 14px; outline: none;
  font-family: var(--font-telo); letter-spacing: .04em;
  transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.velInput:focus{ border-color: rgba(82,27,22,.28); background: rgba(82,27,22,.07); transform: translateY(-1px); }
.velLoginActions{ display:grid; gap: 12px; margin-top: 16px; }
.velPrimaryBtn{
  height: 54px; border-radius: 999px; border: 0;
  background: linear-gradient(135deg, var(--c-cta1), var(--c-cta2)); color: rgba(240,236,227,.96);
  cursor:pointer; box-shadow: 0 18px 46px rgba(0,0,0,.18);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s var(--ease);
  font-family: var(--font-naslov); font-size: 20px; letter-spacing: .2px;
}
.velPrimaryBtn:hover{ transform: translateY(-1px); box-shadow: 0 26px 70px rgba(0,0,0,.22); filter: saturate(1.03); }
.velSecondaryRow{
  display:flex; justify-content: space-between; gap: 12px;
  font-family: var(--font-telo); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(82,27,22,.62);
}
.velSecondaryRow a{ color: rgba(82,27,22,.88); text-decoration: underline; text-underline-offset: 3px; }

.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }