/* HeavenTCG — "novi izgled" layer (option A, trading-card look), version k.
   Loaded by the shop template (admin/shop-tpl.js) and the test page /novi-izgled.html.
   Every rule is scoped under html.hvn so nothing can leak. 8 Oct 2026. */

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:200 800;src:url(/vendor/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:200 800;src:url(/vendor/fonts/bricolage-grotesque-latin-wght-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-display:swap;font-weight:400;src:url(/vendor/fonts/dm-mono-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-display:swap;font-weight:400;src:url(/vendor/fonts/dm-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-display:swap;font-weight:500;src:url(/vendor/fonts/dm-mono-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-display:swap;font-weight:500;src:url(/vendor/fonts/dm-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

html.hvn{
  --n-bg:#120e0a;--n-panel:#1a140f;--n-plate:#2a1f15;--n-ink:#f3ece0;--n-muted:#a89a82;
  --n-cream:#f7f3ea;--n-gold:#e0b060;--n-gold-dk:#8a5a14;--n-green:#3fa66b;--n-green-dk:#22693f;
  --n-line:rgba(224,176,96,.16);
  --n-ygo:linear-gradient(160deg,#e9b866,#a8702a 55%,#d9a24f);
  --n-pkm:linear-gradient(160deg,#f2d76a,#c79a1e 55%,#ecc94a);
  --n-rift:linear-gradient(160deg,#a986dd,#5d3a95 55%,#9473cf);
  --n-pal:linear-gradient(160deg,#6fd0c4,#1f7d73 55%,#58bfb2);
  --n-wrc:linear-gradient(160deg,#7fb1ec,#2a5ea8 55%,#679fe0);
  --n-op:linear-gradient(160deg,#ef8a7a,#a33a2c 55%,#e0705f);
  --n-acc:linear-gradient(160deg,#c9bfae,#7a6f60 55%,#b5aa98);
  --n-holo:linear-gradient(115deg,#f6d38a,#f0a9c6 30%,#a6d8ee 55%,#f6d38a 80%);
}
html.hvn body{background-color:var(--n-bg)!important;background-image:linear-gradient(rgba(224,176,96,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(224,176,96,.05) 1px,transparent 1px)!important;background-size:30px 30px!important;color:var(--n-ink)!important;font-family:'Bricolage Grotesque',system-ui,sans-serif!important}
html.hvn body *:not(svg):not(path){font-family:inherit}
html.hvn .hvn-m,html.hvn #grid .card .cat,html.hvn #grid .card .qty,html.hvn #tally button,html.hvn .hvbr-s{font-family:'DM Mono',ui-monospace,monospace!important;letter-spacing:.05em}

/* header + logo */
html.hvn header{padding:18px 16px 4px!important;text-align:left!important;min-height:0!important}
html.hvn header .logo a{font-weight:800!important;letter-spacing:-.02em!important;font-size:46px!important;line-height:1!important;color:var(--n-ink)!important;text-transform:none!important;display:inline-flex;align-items:center;gap:10px;text-decoration:none}
html.hvn header .logo .hvn-tag{font:500 16px 'DM Mono',monospace;letter-spacing:.06em;padding:4px 9px;border-radius:6px;background:var(--n-gold);color:#1d140a;display:inline-block;transform:rotate(-4deg)}
html.hvn header .tagline{display:none!important}
html.hvn .tb-theme{display:none!important}

/* page order: header, hero, binder, then the shop's own bars, tally and grid */
html.hvn .wrap{display:flex;flex-direction:column}
html.hvn .wrap>header{order:0}
html.hvn .wrap>#hvnHero{order:1}
html.hvn .wrap>#hvnBinder{order:2}
html.hvn .wrap>#hvUtilBar{order:3}
html.hvn .wrap>.toolbar{order:4}
html.hvn .wrap>.sec{order:5}
html.hvn .wrap>#grid{order:6}
html.hvn .wrap>*{order:7}

/* hero */
#hvnHero{display:flex;flex-wrap:wrap;gap:28px 40px;align-items:center;padding:30px 16px 40px}
#hvnHero .hvn-copy{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:18px}
#hvnHero .hvn-eyebrow{font:500 12px 'DM Mono',monospace;letter-spacing:.05em;color:var(--n-muted)}
#hvnHero h1{margin:0;font-size:clamp(44px,6.2vw,86px);line-height:.97;font-weight:800;letter-spacing:-.04em;color:var(--n-ink)}
#hvnHero h1 em{font-style:normal;color:var(--n-gold)}
#hvnHero p{margin:0;font-size:18px;line-height:1.5;color:#c9bba3;max-width:470px}
#hvnHero .hvn-cta{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.hvn-btn{height:52px;padding:0 22px;border-radius:12px;background:var(--n-gold);color:#1d140a!important;font:700 16px 'Bricolage Grotesque',sans-serif;display:inline-flex;align-items:center;gap:8px;text-decoration:none!important;border:0;cursor:pointer;box-shadow:0 4px 0 var(--n-gold-dk),0 10px 20px rgba(0,0,0,.35)}
.hvn-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--n-gold-dk)}
.hvn-link{color:#e8c27a!important;font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:3px}
#hvnHero .hvn-stage{flex:1 1 380px;min-width:0;position:relative;height:440px;display:flex;align-items:center;justify-content:center}
.hvn-back{position:absolute;left:50%;top:50%;width:230px;height:328px;margin:-164px 0 0 -215px;border-radius:16px;background:linear-gradient(160deg,#4a3826,#251b12);transform:rotate(-10deg);box-shadow:0 12px 26px rgba(0,0,0,.45)}
.hvn-back::before{content:"";position:absolute;inset:14px;border:2px solid #8a5a14;border-radius:8px}
.hvn-back::after{content:"";position:absolute;left:50%;top:50%;width:52%;height:52%;transform:translate(-50%,-50%);border-radius:50%;border:10px solid #6b4a24;box-shadow:inset 0 0 0 10px #251b12,inset 0 0 0 16px #8a5f2c}
.hvn-tc{position:relative;border-radius:16px;padding:4px;box-shadow:0 14px 30px rgba(0,0,0,.5);cursor:pointer;display:block;text-align:left}
.hvn-tc .hvn-in{border-radius:11px;background:#18120d;padding:7px;display:flex;flex-direction:column;gap:6px;height:100%;box-sizing:border-box}
.hvn-tc .hvn-nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.2;flex:0 0 auto;padding:5px 9px;border-radius:5px;background:var(--n-plate);font-weight:700;font-size:15px;color:var(--n-ink);box-shadow:inset 0 0 0 1px rgba(246,211,138,.3)}
.hvn-tc .hvn-nm b{color:var(--n-gold);font-size:12px;letter-spacing:1px;font-weight:700}
.hvn-tc .hvn-art{flex:1 1 auto;position:relative;border-radius:6px;background:var(--n-cream);box-shadow:inset 0 0 0 2px rgba(0,0,0,.35),inset 0 0 20px rgba(120,80,30,.18);overflow:hidden}
.hvn-tc .hvn-art img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-height:86%;max-width:90%;object-fit:contain;mix-blend-mode:multiply}
.hvn-tc .hvn-type{font:500 11px 'DM Mono',monospace;color:#b8a888;padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hvn-tc .hvn-stat{display:flex;justify-content:space-between;align-items:center;padding:6px 9px;border-radius:5px;background:var(--n-plate);color:var(--n-ink)}
.hvn-tc .hvn-stat small{font:500 10px 'DM Mono',monospace;color:var(--n-muted)}
.hvn-tc .hvn-stat strong{font-size:21px;font-weight:800}
.hvn-main{width:262px;height:378px;transform:rotate(2deg);background:var(--n-holo)}
.hvn-side{position:absolute!important;left:50%;top:50%;width:200px;height:290px;margin:-140px 0 0 40px;transform:rotate(9deg)}
.hvn-side.g-ygo{background:var(--n-ygo)}.hvn-side.g-pkm{background:var(--n-pkm)}.hvn-side.g-rift{background:var(--n-rift)}
.hvn-side.g-pal{background:var(--n-pal)}.hvn-side.g-wrc{background:var(--n-wrc)}.hvn-side.g-op{background:var(--n-op)}.hvn-side.g-acc{background:var(--n-acc)}
.hvn-side .hvn-type,.hvn-side .hvn-stat{display:none}
.hvn-tc{border:0;font:inherit;color:inherit}
.hvn-foil{position:absolute;right:-1px;top:10px;padding:3px 9px 3px 11px;border-radius:6px 0 0 6px;background:var(--n-holo);color:#2a1b0a;font:500 10px 'DM Mono',monospace;letter-spacing:.06em;z-index:2}

/* binder */
#hvnBinder{margin:0 16px 28px;position:relative;border-radius:22px;background:linear-gradient(180deg,#2a2017,#1d1610);box-shadow:inset 0 0 0 1px var(--n-line);padding:22px 22px 22px 58px}
#hvnBinder .hvn-rings{position:absolute;left:20px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-around;padding:26px 0}
#hvnBinder .hvn-rings i{width:15px;height:15px;border-radius:50%;background:#0c0906;box-shadow:inset 0 2px 3px rgba(0,0,0,.8),0 0 0 2px rgba(224,176,96,.25);display:block}
#hvnBinder .hvn-bh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
#hvnBinder h2{margin:0;font-size:32px;font-weight:800;letter-spacing:-.03em;color:var(--n-ink)}
#hvnBinder .hvn-pg{font:500 11px 'DM Mono',monospace;color:var(--n-muted)}
#hvnBinder .hvn-pockets{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.hvn-pocket{position:relative;height:190px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 45%,rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.12);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;padding:10px 6px 12px;cursor:pointer;color:var(--n-ink);font:inherit}
.hvn-pocket:hover,.hvn-pocket.on{background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.04) 45%,rgba(255,255,255,.08))}
.hvn-pocket.on{box-shadow:inset 0 0 0 2px var(--n-gold)}
.hvn-pocket .hvn-pic{width:78%;height:104px;border-radius:8px;background:var(--n-cream);box-shadow:inset 0 0 0 2px rgba(0,0,0,.3),0 8px 14px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;overflow:hidden}
.hvn-pocket .hvn-pic img{max-height:86%;max-width:86%;object-fit:contain;mix-blend-mode:multiply}
.hvn-pocket span{font-size:14px;font-weight:700;text-align:center;line-height:1.15}
.hvn-pocket small{font:500 10px 'DM Mono',monospace;color:var(--n-gold)}

/* the shop's own bars, restyled */
html.hvn #hvUtilBar,html.hvn .toolbar{background:var(--n-panel)!important;border:1px solid var(--n-line)!important;border-radius:16px!important;margin:0 16px 10px!important;box-shadow:none!important}
html.hvn #hvUtilBar{padding:10px 14px!important}
html.hvn .toolbar input,html.hvn .toolbar select{background:var(--n-cream)!important;color:#1d140a!important;border:0!important;border-radius:10px!important;font-family:'Bricolage Grotesque',sans-serif!important}
html.hvn .hvbr-t,html.hvn #tally button,html.hvn .curseg button,html.hvn .curseg a{border-radius:10px!important}
html.hvn .sec .t{font-weight:800!important;letter-spacing:-.03em!important;text-transform:none!important;font-size:34px!important;color:var(--n-ink)!important}

/* product cards drawn as trading cards */
html.hvn #grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important;gap:20px!important;padding:6px 16px 30px!important}
html.hvn #grid .card{--fr:var(--n-ygo);display:flex!important;flex-direction:column!important;gap:6px;padding:7px!important;border-radius:14px!important;border:3px solid transparent!important;background:linear-gradient(#18120d,#18120d) padding-box,var(--fr) border-box!important;box-shadow:0 10px 22px rgba(0,0,0,.45)!important;transition:transform .2s ease;overflow:visible!important}
html.hvn #grid .card:hover{transform:translateY(-6px) rotate(-1deg)}
html.hvn #grid .card[data-g="pkm"]{--fr:var(--n-pkm)}
html.hvn #grid .card[data-g="rift"]{--fr:var(--n-rift)}
html.hvn #grid .card[data-g="pal"]{--fr:var(--n-pal)}
html.hvn #grid .card[data-g="wrc"]{--fr:var(--n-wrc)}
html.hvn #grid .card[data-g="op"]{--fr:var(--n-op)}
html.hvn #grid .card[data-g="acc"]{--fr:var(--n-acc)}
html.hvn #grid .card .body{display:contents!important}
html.hvn #grid .card .name{order:1;margin:0!important;padding:5px 9px!important;border-radius:5px;background:var(--n-plate);color:var(--n-ink)!important;font-weight:700!important;font-size:14px!important;line-height:1.2!important;min-height:36px;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;box-sizing:border-box}
html.hvn #grid .card .thumb{order:2;position:relative;border-radius:6px!important;background:var(--n-cream)!important;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35),inset 0 0 20px rgba(120,80,30,.18)!important;overflow:hidden;margin:0!important}
html.hvn #grid .card .thumb img{mix-blend-mode:multiply!important;padding:8%;box-sizing:border-box}
html.hvn #grid .card .cat{order:3;font-size:10px!important;color:#b8a888!important;text-transform:none!important;margin:0!important;padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.hvn #grid .card .cat::before{content:"[ "}
html.hvn #grid .card .cat::after{content:" ]"}
html.hvn #grid .card .foot{order:4;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:6px;flex-wrap:wrap;margin:0!important;padding:6px 8px!important;border-radius:5px;background:var(--n-plate);position:relative;padding-right:52px!important;min-height:44px;box-sizing:border-box}
html.hvn #grid .card .price{text-align:left!important;margin:0!important;font-weight:800!important;font-size:19px!important;color:var(--n-ink)!important;line-height:1}
html.hvn #grid .card .qty{font-size:10px!important;color:var(--n-muted)!important;width:100%;margin:0!important}
html.hvn #grid .card .foot::after{content:"+";position:absolute;right:5px;top:50%;margin-top:-18px;width:36px;height:36px;border-radius:8px;background:var(--n-green);color:#fff;font:700 24px/34px 'Bricolage Grotesque',sans-serif;text-align:center;box-shadow:0 3px 0 var(--n-green-dk)}
html.hvn #grid .card:has(.badge.b-out) .foot::after,html.hvn #grid .card:has(.badge.b-inc) .foot::after{content:none}
html.hvn #grid .card:has(.badge.b-out) .foot,html.hvn #grid .card:has(.badge.b-inc) .foot{padding-right:8px!important}
html.hvn #grid .card:has(.badge.b-out){filter:saturate(.35) brightness(.8)}
/* badges: only news, as stickers */
html.hvn #grid .card .badge{position:absolute!important;left:auto!important;right:-1px!important;top:10px!important;border-radius:6px 0 0 6px!important;padding:3px 9px 3px 11px!important;font:500 10px 'DM Mono',monospace!important;letter-spacing:.06em!important;text-transform:uppercase;z-index:2;box-shadow:none!important;border:0!important}
html.hvn #grid .card .badge.b-low{background:var(--n-holo)!important;color:#2a1b0a!important}
html.hvn #grid .card .badge.b-inc{background:#2a5ea8!important;color:#fff!important}
html.hvn #grid .card .badge.b-out{background:#7a2a22!important;color:#fff!important}
html.hvn #grid .card .hv-fav-btn{left:6px!important;right:auto!important;top:6px!important}

/* product window: cream picture, card-coloured info side */
html.hvn #lb .lb-inner{border-radius:18px!important;border:4px solid transparent!important;background:linear-gradient(#18120d,#18120d) padding-box,var(--n-holo) border-box!important}
html.hvn #lb .lb-info h2{font-weight:800!important;letter-spacing:-.02em!important}
html.hvn #lb .lb-price{font-weight:800!important}
html.hvn #lb .hc-add,html.hvn #hcDrawer .hc-add{background:var(--n-green)!important;color:#fff!important;border-radius:12px!important;box-shadow:0 4px 0 var(--n-green-dk)!important;border:0!important}

/* ===== one "fascikla" panel (v-d): tabs + pockets + search bar ===== */
html.hvn header{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;flex-wrap:wrap;gap:10px}
html.hvn header .logo{width:auto!important;flex:0 0 auto}
html.hvn header .kpwrap{margin:0!important;display:flex!important;gap:8px;align-items:center}
html.hvn #hvBrandRail{display:none!important}
html.hvn #hvUtilBar{background:transparent!important;border:0!important;box-shadow:none!important;padding:4px 6px!important;margin:-12px 16px 18px!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;gap:12px!important}
html.hvn #hvUtilBar>#hvAsk{flex:1 1 auto;min-width:0;margin:0!important;border:0!important;background:transparent!important;opacity:.9}
html.hvn #hvUtilBar>#hvRowTools,html.hvn #hvUtilBar>.kpwrap{flex:0 0 auto;margin:0!important;border:0!important}
html.hvn #hvUtilBar .hva-lead{display:none!important}
html.hvn #hvUtilBar .hva-bar{padding:0!important}
#hvnBinder{padding:0 22px 20px 58px}
#hvnBinder .hvn-tabs{display:flex;gap:4px;align-items:flex-end;overflow-x:auto;scrollbar-width:none;margin:0 -22px 18px -58px;padding:14px 22px 0 58px;border-bottom:2px solid var(--n-gold)}
#hvnBinder .hvn-tabs::-webkit-scrollbar{display:none}
.hvn-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border:0;border-radius:10px 10px 0 0;background:rgba(255,255,255,.05);color:#d8cdb8;font:600 14px 'Bricolage Grotesque',sans-serif;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.hvn-tab:hover{background:rgba(255,255,255,.09);color:var(--n-ink)}
.hvn-tab i{width:9px;height:9px;border-radius:50%;background:var(--n-ygo);display:block}
.hvn-tab small{font:500 11px 'DM Mono',monospace;color:var(--n-muted)}
.hvn-tab.g-all i{background:var(--n-holo)}.hvn-tab.g-pkm i{background:var(--n-pkm)}.hvn-tab.g-rift i{background:var(--n-rift)}.hvn-tab.g-pal i{background:var(--n-pal)}.hvn-tab.g-wrc i{background:var(--n-wrc)}.hvn-tab.g-op i{background:var(--n-op)}.hvn-tab.g-acc i{background:var(--n-acc)}
.hvn-tab.on{background:var(--n-gold);color:#1d140a;height:44px}
.hvn-tab.on small{color:#5a3f17}
.hvn-tab.soon{opacity:.45;font-weight:500}
#hvnBinder .hvn-bh{margin-bottom:14px}
#hvnBinder h2{font-size:24px}
#hvnBinder .hvn-rings{top:62px}
html.hvn #hvnBinder .toolbar{margin:18px 0 0!important;padding:14px 0 0!important;border:0!important;border-top:1px dashed rgba(224,176,96,.28)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
/* game tab filter */
html.hvn #grid[data-game="ygo"] .card:not([data-g="ygo"]),html.hvn #grid[data-game="pkm"] .card:not([data-g="pkm"]),html.hvn #grid[data-game="rift"] .card:not([data-g="rift"]),html.hvn #grid[data-game="pal"] .card:not([data-g="pal"]),html.hvn #grid[data-game="wrc"] .card:not([data-g="wrc"]),html.hvn #grid[data-game="op"] .card:not([data-g="op"]),html.hvn #grid[data-game="acc"] .card:not([data-g="acc"]){display:none!important}

@media (max-width:700px){
  html.hvn header{padding:14px 14px 4px!important}
  html.hvn header .kpwrap{gap:6px}
  #hvnBinder{padding:0 12px 14px 12px}
  #hvnBinder .hvn-rings{display:none}
  #hvnBinder .hvn-tabs{margin:0 -12px 14px -12px;padding:12px 12px 0}
  .hvn-tab{height:38px;padding:0 12px;font-size:13px}
  .hvn-tab.on{height:42px}
  #hvnBinder h2{font-size:20px}
  html.hvn #hvUtilBar{margin:-8px 12px 14px!important;flex-wrap:wrap!important}
  html.hvn header .logo a{font-size:38px!important;gap:8px}
  html.hvn header .logo .hvn-tag{font-size:14px;padding:3px 8px}
  #hvnHero{padding:14px 14px 30px;overflow-x:clip}
  #hvnHero .hvn-ship{display:none}
  .hvn-tc .hvn-nm{font-size:13px}
  #hvnHero .hvn-stage{height:380px;flex-basis:100%}
  .hvn-main{width:228px;height:330px}
  .hvn-side{width:170px;height:246px;margin:-124px 0 0 4px}
  .hvn-back{width:196px;height:280px;margin:-140px 0 0 -170px}
  #hvnBinder{margin:0 12px 22px}
  #hvnBinder .hvn-pockets{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:104px;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px}
  #hvnBinder .hvn-pockets::-webkit-scrollbar{display:none}
  .hvn-pocket{height:142px}
  .hvn-pocket .hvn-pic{height:72px;width:84%}
  .hvn-pocket span{font-size:12px}
  html.hvn #hvUtilBar,html.hvn .toolbar{margin:0 12px 8px!important}
  html.hvn #grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;padding:4px 12px 24px!important}
  html.hvn #grid .card{padding:5px!important;border-width:3px!important;gap:5px}
  html.hvn #grid .card .name{font-size:12px!important;min-height:32px;padding:4px 7px!important}
  html.hvn #grid .card .price{font-size:16px!important}
  html.hvn #grid .card .foot{padding-right:46px!important;min-height:42px}
  html.hvn #grid .card .foot::after{width:34px;height:34px;margin-top:-17px;line-height:32px}
}
@media (prefers-reduced-motion:reduce){html.hvn #grid .card,html.hvn #grid .card:hover{transition:none;transform:none}}

/* v-g: less empty space between the logo and the hero */
html.hvn header{padding-top:22px!important;padding-bottom:0!important}
@media (min-width:701px){
  html.hvn #hvnHero{padding-top:4px!important;align-items:flex-start!important}
  html.hvn #hvnHero .hvn-copy{padding-top:34px}
}

/* v-i: no 'Polica uživo' line; top cards rotate through the best-sellers in stock */
html.hvn #hvnHero .hvn-eyebrow{display:none!important}
#hvnHero .hvn-stage .hvn-tc{transition:opacity .45s ease}
#hvnHero .hvn-stage.hvn-fading .hvn-tc{opacity:0}
@media (prefers-reduced-motion:reduce){#hvnHero .hvn-stage .hvn-tc{transition:none}}

/* Magic (10 Oct 2026, owner): same treatment as the other games */
html.hvn{--n-mtg:linear-gradient(160deg,#ec8a5c,#a83a1c 55%,#d65a31)}
html.hvn #grid .card[data-g="mtg"]{--fr:var(--n-mtg)}
.hvn-tab.g-mtg i{background:var(--n-mtg)}
.hvn-side.g-mtg{background:var(--n-mtg)}
html.hvn #grid[data-game="mtg"] .card:not([data-g="mtg"]){display:none!important}