/* HEAVEN TCG · storefront extras: hover tooltips + shop background pictures
   index.html is served with style-src 'self', so an injected <style> block
   would be refused by the browser — every rule the storefront needs has to
   arrive as a real file. The Command Deck links this same file, so the
   thumbnails under Settings › Shop page are the real backgrounds.
   Added 2026-07-31. */

/* ============================================================
   1 · hover tooltips (the nudge-bubble look of the chat widget)
   Any element with data-hvtip gets one. Touch screens skip them.
   ============================================================ */
#hvTip{
  position:fixed;left:0;top:0;z-index:9600;
  max-width:min(272px,calc(100vw - 20px));
  background:var(--surface-2,#2c211a);color:var(--text-primary,#f6ece0);
  border:1px solid var(--border-strong,rgba(232,163,77,.32));border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.45);padding:8px 12px;
  font:600 12.5px/1.45 var(--ui,Nunito,system-ui,-apple-system,'Segoe UI',sans-serif);
  pointer-events:none;opacity:0;transform:translateY(7px) scale(.97);
  transition:opacity .16s ease-out,transform .2s cubic-bezier(.2,.85,.3,1.25)
}
#hvTip.in{opacity:1;transform:none}
#hvTip b{color:var(--accent,#e8a34d);font-weight:800}
#hvTip s{display:block;text-decoration:none;font-weight:600;font-size:11.5px;color:var(--muted,#a08a78);margin-top:2px}
#hvTip:before{
  content:'';position:absolute;left:var(--hv-ax,22px);top:-5px;width:10px;height:10px;
  background:inherit;transform:rotate(45deg);
  border-left:1px solid var(--border-strong,rgba(232,163,77,.32));
  border-top:1px solid var(--border-strong,rgba(232,163,77,.32))
}
#hvTip.up:before{top:auto;bottom:-5px;transform:rotate(225deg)}
@media (hover:none){#hvTip{display:none}}
@media (prefers-reduced-motion:reduce){#hvTip{transition:opacity .01s linear}}

/* the opening-hours chip in the filter line */
#hcAcc .hc-hrs{padding:6px 12px;font-size:11px;letter-spacing:.02em}
#hcAcc .hc-hrs b{color:var(--text-primary,#f6ece0);font-weight:800}

/* 2 · background pictures
   Moved to /assets/hv-bg.css on 2026-08-05 so the customer pages can share
   the same backdrop without inheriting the storefront header rules below. */



/* ===== hvrow40: filter traka, sve kontrole iste visine =====================
   Red je izgledao krzavo jer je svaka kontrola imala svoju visinu:
   KP dugme 52px, select 43, polje za pretragu 41, segmenti 39, cipovi 29-32.
   Sada je sve tacno 40px, centrirano po sredini i sa istim radijusom.
   Telefon (max-width:700px) ostaje na grid rasporedu iz hv-ux.css, ne dira se.
   ========================================================================= */
@media (min-width:701px){
  .toolbar{align-items:center;row-gap:10px}
  .toolbar > *{box-sizing:border-box}

  .toolbar input[type="text"],
  .toolbar select,
  .toolbar .chk,
  .toolbar .curseg,
  .toolbar .kpwrap .kpbtn,
  #hcAcc .hc-hrs,
  #hcAcc .hc-accbtn{height:40px;min-height:40px;border-radius:10px}

  .toolbar input[type="text"],
  .toolbar select{padding-top:0;padding-bottom:0;line-height:38px}

  .toolbar .chk{padding-top:0;padding-bottom:0;align-items:center}

  .toolbar .curseg{align-items:stretch;overflow:hidden}
  .toolbar .curseg button{height:100%;padding-top:0;padding-bottom:0;
    display:flex;align-items:center;justify-content:center}

  .toolbar .kpwrap{display:flex;align-items:center}
  .toolbar .kpwrap .kpbtn{padding:0 12px;gap:9px}
  .toolbar .kpwrap .kpmark{width:26px;height:26px;min-width:26px;
    border-radius:7px;font-size:11px}
  .toolbar .kpwrap .kpmark b,
  .toolbar .kpwrap .kpmark i{font-size:11px;line-height:11px}
  .toolbar .kpwrap .kptxt b{font-size:12px;line-height:14px}
  .toolbar .kpwrap .kptxt small{font-size:9.5px;line-height:11px}
  .toolbar .kpwrap .kparr{font-size:14px;line-height:1}

  #hcAcc{height:40px;align-items:center}
  #hcAcc .hc-hrs{padding:0 13px;align-items:center}
  #hcAcc .hc-accbtn{padding:0 15px;align-items:center;justify-content:center}

  .toolbar #count{height:40px;line-height:40px;display:inline-flex;
    align-items:center}
}

/* hvrow40 dopuna: skidamo stari margin-top i min-height sa krajnjih grupa,
   da KP dugme i desna grupa sednu u istu liniju kao ostatak. */
@media (min-width:701px){
  .toolbar .kpwrap{margin-top:0}
  .toolbar #hcAcc{margin-top:0;height:40px;min-height:40px}
}

/* ============================================================
   hvcenter 20260731 : sadrzaj tacno na sredini ekrana.
   Vertikalni scrollbar je do sada jeo prostor samo sa desne
   strane, pa je ceo sajt bio pomeren par piksela ulevo.
   both-edges je rezervisao prazan pojas i sa leve strane, dok je
   desni pojas vec zauzimao scrollbar, pa je sadrzaj bio pomeren
   5px udesno. Obican "stable" rezervise prostor samo tamo gde
   scrollbar stvarno stoji, pa je sredina sadrzaja = sredina ekrana.
   ============================================================ */
html{scrollbar-gutter:stable}

/* Zaglavlje: naslov, podnaslov, pa "Stanje uzivo" i "Teme" u istoj
   liniji, sve savrseno centrirano. */
@media (min-width:701px){
  header{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 12px}
  header>.logo,header>.tagline{flex:0 0 100%;width:100%}
  header>.updated{margin:0}
  header>[data-sh="mt12"]{margin:0 !important;width:auto;flex:0 0 auto}
}