/* Boja jačine na crnoj verziji (verzija 4).
   Sve što se na svijetloj verziji boji bojom izabrane jačine, boji se i ovdje:
   sjaj u pozadini, okvir glavnog bloka, sjaj i krug iza tegle, skala MGO, ikonice "Provjereno", brojevi koraka,
   stubići MGO i kartice artikala. Dugmad i naslovi ostaju zlatni. */
.amb{background:radial-gradient(900px 600px at 12% 0%,rgba(var(--g-rgb),.17),transparent 70%),radial-gradient(700px 500px at 100% 70%,rgba(var(--g-rgb),.08),transparent 70%);transition:background .7s}
.annc b,.annc svg{color:var(--g);transition:color .5s}
.panel{border-color:rgba(var(--g-rgb),.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 70px rgba(var(--g-rgb),.16),0 0 0 1px rgba(var(--g-rgb),.12);transition:border-color .5s,box-shadow .5s}
.panel::before{background:radial-gradient(circle,rgba(var(--g-rgb),.30),transparent 60%);transition:background .5s}
.panel .k{color:var(--g);transition:color .5s}
.stage::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,rgba(var(--g-rgb),.34),transparent 55%);pointer-events:none;transition:background .6s}
.stage .r1{border-color:var(--g);box-shadow:0 0 90px rgba(var(--g-rgb),.38),inset 0 0 60px rgba(var(--g-rgb),.16);transition:border-color .5s,box-shadow .5s}
.stage .r2{border-color:rgba(var(--g-rgb),.35)}
.key[aria-pressed="true"]{box-shadow:0 0 0 1.5px var(--g),0 18px 34px rgba(var(--g-rgb),.18)}
html .bars div{background:var(--bc)!important;color:var(--bi)!important;opacity:1!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.bars div.on{outline-color:#FFF4D6}
.card .top{background:radial-gradient(circle at 72% 74%,color-mix(in srgb,var(--cg) 52%,transparent),transparent 62%),linear-gradient(160deg,#1B1813,#0A0908)}
.card .top .n{background-image:none;-webkit-text-fill-color:var(--cg);color:var(--cg);filter:drop-shadow(0 0 16px color-mix(in srgb,var(--cg) 45%,transparent))}
.step .n{background-image:none;-webkit-text-fill-color:var(--g);color:var(--g);filter:drop-shadow(0 0 18px rgba(var(--g-rgb),.35));transition:color .5s}
.pf .ic{background:var(--g);color:var(--g-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px rgba(var(--g-rgb),.35);transition:background .5s,color .4s,box-shadow .5s}
/* izabrana jačina zadržava svoju boju i kad je miš preko nje (staklo inače stavlja zlatnu ivicu) */
@media (hover:hover) and (pointer:fine){html .key[aria-pressed="true"]:hover{border-color:rgba(var(--g-rgb),.85);box-shadow:0 0 0 1.5px var(--g),0 26px 60px rgba(0,0,0,.62),0 18px 40px rgba(var(--g-rgb),.2)}}

/* skala MGO u glavnom bloku: kružić klizi do izabrane jačine i uzima njenu boju */
@property --pos{syntax:'<percentage>';inherits:true;initial-value:0%}
.mg{position:relative;margin:18px 0 2px;max-width:420px;transition:--pos .8s cubic-bezier(.2,.8,.2,1)}
.mg-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px;font-size:12.5px;font-weight:600;color:#AFA592}
.mg-top b{font-family:var(--disp);font-weight:900;font-size:20px;color:var(--g);letter-spacing:.02em;transition:color .5s}
.mg-track{position:relative;height:8px;border-radius:4px;background:linear-gradient(90deg,rgba(var(--g-rgb),.15),rgba(var(--g-rgb),.95)) 0 0/var(--pos) 100% no-repeat,rgba(255,255,255,.08)}
.mg-dot{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #0E0D0B}
.mg-ref{position:absolute;top:-5px;bottom:-5px;width:2px;border-radius:1px;background:#8A8170}
.mg-mark{position:absolute;top:50%;left:var(--pos);width:20px;height:20px;border-radius:50%;border:2px solid #FFF4D6;background:var(--g);transform:translate(-50%,-50%);box-shadow:0 0 0 5px rgba(var(--g-rgb),.22),0 0 20px rgba(var(--g-rgb),.85);transition:background .5s,box-shadow .5s}
.mg-ticks{position:relative;height:16px;margin-top:9px;font-size:11px;color:#8F8676}
.mg-ticks span{position:absolute;transform:translateX(-50%)}
.mg-ticks span:first-child{transform:none}
.mg-ticks span:last-child{transform:translateX(-100%)}

/* raspored glavnog bloka je u index.php (isti za obje verzije); ovdje je samo skala MGO */
@media (min-width:961px){.mg{margin-top:clamp(10px,1.6vh,18px)}}
@media (min-width:961px) and (max-height:700px){.mg-ticks{display:none}}

/* ---------- raspored za sve uređaje ---------- */
/* telefon i tablet (do 960 px): tegla, pa izbor jačine, pa cijena i dugme, da se sve bitno vidi na prvom ekranu */
@media (max-width:960px){
  .hero-wrap{display:flex;flex-direction:column;gap:12px;margin-top:14px}
  .hero-wrap .hero{display:contents}
  .hero-wrap .stage{order:1;min-height:0;height:clamp(300px,56vw,440px)}
  .hero-wrap .keys{order:2;margin-top:0}
  .hero-wrap .panel{order:3;min-height:0;gap:18px}
  .stage .r1{width:auto;height:min(80%,380px)}
  .stage .r2{width:auto;height:min(62%,300px)}
  .stage .jarwrap{top:46%;height:min(60%,270px)}
  .stage .cap{left:12px;right:12px;bottom:12px;gap:6px;justify-content:center}
  .stage .cap span{padding:6px 10px;font-size:12px;border-radius:10px}
  .swipe-hint{top:12px;font-size:11.5px;padding:5px 10px}
}
@media (max-width:400px){.stage .cap span:nth-child(2){display:none}}
/* vrlo uski telefoni: korpa samo sa ikonicom i brojem */
@media (max-width:360px){.cart-btn .cart-t{display:none}.cart-btn{padding:0 10px;gap:6px}.panel .big{font-size:84px}.panel .price{font-size:34px}}
/* veliki ekrani: malo šira stranica i krupnija slova, da sadržaj ne bude sitan na sredini ekrana */
@media (min-width:1800px){
  .wrap{max-width:1480px}
  .top{max-width:1480px}
  body{font-size:17px}
}