/* Verzija 2: Crno zlato
   Isti raspored, isti tekstovi i ista korpa kao osnovna verzija sajta. Mijenjaju se samo boje.
   Boja jačine (plava, zlatna, narandžasta, ciklama) ostaje samo kao mali znak, a sve ostalo je crno-zlatno. */
:root{
  --bg:#070707; --ink:#F4ECDA; --muted:#AFA592; --line:rgba(233,196,106,.16);
  --glass:rgba(20,19,17,.74); --glass-b:rgba(233,196,106,.16);
  --sh:inset 0 1px 0 rgba(255,236,190,.06),0 22px 50px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4);
  --gold:#E2B654; --gold-hi:#F6D58A; --gold-grad:linear-gradient(100deg,#B98A2E 0%,#F6D58A 32%,#FFF4D6 46%,#E9B957 60%,#A9781F 100%); --gold-btn:linear-gradient(180deg,#F8DC95 0%,#E2B654 52%,#B98A2E 100%); --on-gold:#140F05;
  --mc-bg:rgba(12,11,10,.95); --mc-fg:#F4ECDA; --mc-muted:#AFA592; --mc-line:rgba(233,196,106,.18); --mc-field:rgba(255,255,255,.05);
  --mc-accent:#E2B654; --mc-accent-ink:#140F05; --mc-notice:rgba(233,196,106,.10); --mc-overlay:rgba(0,0,0,.62);
  
}
html,body{background:var(--bg)}
body{color:var(--ink)}
:focus-visible{outline-color:var(--gold)}
.amb{background:radial-gradient(900px 600px at 12% 0%,rgba(226,182,84,.13),transparent 70%),radial-gradient(700px 500px at 100% 70%,rgba(226,182,84,.06),transparent 70%)}
.glass{backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2)}

/* zlatni tekst */
.logo b,.panel .big,.panel .price,.key b,.sec-head h2,.card .top .n,.card .ft b,.mgo h2,.step .n,.photo h2{
  background-image:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.panel .big,.sec-head h2,.mgo h2{filter:drop-shadow(0 10px 22px rgba(0,0,0,.7))}
/* zlatna boja mora pokriti i kvačice iznad slova (Š, Č, Ž, Ć), inače nestanu */
.logo b,.panel .big,.key b,.sec-head h2,.mgo h2,.step .n,.photo h2{padding-top:.18em;margin-top:-.18em}
.card .top .n{padding-top:.18em;top:calc(12px - .18em)}
.panel .price{padding-top:.2em}

.annc{background:#000;color:#E9DFC8;border-bottom:1px solid rgba(233,196,106,.22)}
.annc b,.annc svg{color:var(--gold-hi)}
.logo small,.nav{color:var(--muted)}
.nav a:hover{color:var(--gold-hi)}
.logo img{box-shadow:0 0 0 1px rgba(233,196,106,.35),0 6px 16px rgba(0,0,0,.6)}
.cart-btn{background:var(--gold-btn);color:var(--on-gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 24px rgba(226,182,84,.22)}
.badge{background:var(--on-gold);color:var(--gold-hi)}
.btn-ink{background:var(--gold-btn);color:var(--on-gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 30px rgba(226,182,84,.22)}

.panel{background:linear-gradient(160deg,#17140F 0%,#0C0B09 60%,#070706 100%);color:var(--ink);border:1px solid rgba(233,196,106,.24);box-shadow:inset 0 1px 0 rgba(255,236,190,.08),0 30px 60px rgba(0,0,0,.6)}
.panel::before{background:radial-gradient(circle,rgba(226,182,84,.16),transparent 60%)}
.panel .k{color:var(--gold);opacity:1}
.panel .k::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:9px;background:var(--g);box-shadow:0 0 12px rgba(var(--g-rgb),.6);vertical-align:0}
.panel h1{color:var(--ink)}
.panel p.d,.ship-note{color:#CFC6B4}
.panel .price small{color:var(--muted);-webkit-text-fill-color:var(--muted)}
.qty{background:rgba(255,255,255,.04);border-color:rgba(233,196,106,.28)}
.qty button:hover{background:rgba(233,196,106,.12)}
.out-note{color:var(--gold-hi)}

.stage{background:radial-gradient(circle at 50% 46%,rgba(226,182,84,.20),transparent 55%),linear-gradient(160deg,#121110,#050505);border:1px solid rgba(233,196,106,.14);box-shadow:0 30px 60px rgba(0,0,0,.55)}
.stage .r1{border-color:var(--gold);box-shadow:0 0 90px rgba(226,182,84,.22),inset 0 0 60px rgba(226,182,84,.10)}
.stage .r2{border-color:rgba(233,196,106,.28)}
.stage .cap span{border-color:rgba(233,196,106,.24);color:#EADFC6;background:rgba(0,0,0,.35)}

.key{color:var(--ink)}
.key small{color:var(--muted)}
.key .sw{box-shadow:0 0 0 1px rgba(255,255,255,.15),0 6px 14px rgba(0,0,0,.5)}
.key[aria-pressed="true"]{background:#15130F;box-shadow:0 0 0 1.5px var(--gold),0 18px 34px rgba(0,0,0,.55)}

.marq{background:#0D0B08;border-top:1px solid rgba(233,196,106,.22);border-bottom:1px solid rgba(233,196,106,.22)}
.marq span{color:var(--gold-hi)}
.sec-head p,.mgo p,.card p,.step p,.photo p,.pf p,.faq details p,.bars-cap{color:var(--muted)}

.card .top{background:radial-gradient(circle at 72% 72%,rgba(226,182,84,.26),transparent 60%),linear-gradient(160deg,#1B1813,#0A0908);color:var(--ink);box-shadow:inset 0 3px 0 var(--cg);border-bottom:1px solid rgba(233,196,106,.14)}
.card h3{color:var(--ink)}
.add-sm{background:var(--gold-btn);color:var(--on-gold);box-shadow:0 8px 18px rgba(226,182,84,.18)}

.bars{border-bottom-color:rgba(233,196,106,.45)}
.bars div{background:linear-gradient(180deg,#F6D58A 0%,#D9A848 55%,#9C6B1E 100%)!important;color:var(--on-gold)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.bars div:nth-child(1){opacity:.55} .bars div:nth-child(2){opacity:.7} .bars div:nth-child(3){opacity:.85}
.bars div.on{outline-color:var(--gold-hi);opacity:1}

.pf .ic{background:var(--gold-btn);color:var(--on-gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 22px rgba(226,182,84,.2)}
.pf h3,.step h3{color:var(--ink)}
.photo .t{background:rgba(10,9,7,.72);border-color:rgba(233,196,106,.2)}
.faq summary{color:var(--ink)}
.faq summary i{background:var(--gold-btn);color:var(--on-gold)}

footer{color:var(--muted);border-top:1px solid rgba(233,196,106,.12)}
@media (max-width:640px){.photo{background:#070707}}