/* ===== header menu v2 (variant A panel + mobile full-screen) ===== */
.jpt-hdr{grid-template-columns:auto minmax(0,1fr) auto auto auto auto}
.jpt-hdr .nav{display:flex;align-items:stretch;gap:6px;padding-left:14px;overflow:visible}
.jpt-hdr .nav a{padding:0;font-size:inherit;letter-spacing:inherit;text-transform:none;color:inherit;white-space:normal}
.jpt-hdr .nav>.it{display:flex;align-items:center}
.jpt-hdr .nav>.it>a,.jpt-hdr .nav>.it>button{display:flex;align-items:center;gap:8px;height:100%;padding:0 12px;font:400 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap;background:none;border:0;cursor:pointer;position:relative;transition:color .2s}
.jpt-hdr .nav>.it>a:hover,.jpt-hdr .nav>.it>button:hover,.jpt-hdr .nav>.it.open>button{color:var(--acid)}
.jpt-hdr .nav>.it.open>button::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--acid);box-shadow:var(--acid-glow)}
.jpt-hdr .car{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.jpt-hdr .it.open .car{transform:translateY(1px) rotate(-135deg)}
.jpt-hdr .nav .nar{width:11px;height:11px;opacity:.7;transition:transform .25s,opacity .2s}
.jpt-hdr .nav>.it:hover .nar{opacity:1}
.jpt-hdr .nav>.it>a:hover .nar{transform:translate(2px,-2px)}
.jpt-hdr .nav>.it.open .nar{opacity:1;transform:rotate(90deg)}
.jpt-hdr .sep{color:var(--acid);opacity:.7;font-size:12px;display:flex;align-items:center}
.jpt-hdr .lng{display:flex;align-items:center;gap:8px;padding:0 16px;border-left:1px solid var(--line);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.jpt-hdr .nav>.it-lng{margin-left:6px;padding-left:12px}
.n-lng{display:flex;align-items:center;gap:8px;font:400 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.jpt-hdr .nav .n-lng a{color:var(--gray)}.jpt-hdr .nav .n-lng a.on{color:var(--ink)}.jpt-hdr .nav .n-lng a:hover{color:var(--acid)}
.lng a{color:var(--gray);transition:color .2s}.lng a.on{color:var(--ink)}.lng a:hover{color:var(--acid)}.lng i{font-style:normal;color:var(--line-2)}
.jpt-hdr .cart{display:flex;align-items:center;gap:10px;padding:0 18px;border-left:1px solid var(--line);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);transition:color .2s}
.jpt-hdr .cart:hover{color:var(--acid)}
.jpt-hdr .cart i{font-style:normal;min-width:20px;height:20px;display:grid;place-items:center;background:var(--acid);color:#000;font-weight:700;font-size:11px;letter-spacing:0}
.jpt-hdr .burger{display:none}

/* panel */
.jpt-hdr .dd{display:none;position:absolute;left:0;right:0;top:100%;background:#080808;border-bottom:1px solid var(--line);box-shadow:0 30px 60px rgba(0,0,0,.7);
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);animation:jptDrop .28s cubic-bezier(.2,.8,.1,1)}
.jpt-hdr .it.open .dd{display:grid}
@keyframes jptDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.jpt-hdr .dd>div{padding:28px 26px 30px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:14px;min-width:0}
.jpt-hdr .dd>div:last-child{border-right:0}
.jpt-hdr .dd .lbl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray)}
.jpt-hdr .dd .lbl b{color:var(--acid);font-weight:700;margin-right:6px}
.jpt-hdr .dd .dbig{font:900 clamp(30px,2.6vw,44px)/.92 var(--display);text-transform:uppercase;color:var(--ink)}
.jpt-hdr .dd .dbig em{font-style:normal;color:var(--acid);text-shadow:var(--acid-glow)}
.jpt-hdr .dd .lead{color:var(--ink-dim);font-size:13px;max-width:34ch;margin:0}
.jpt-hdr .lst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.jpt-hdr .nav .lst a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font:800 17px/1.1 var(--display);text-transform:uppercase;color:var(--ink);transition:color .2s,padding .2s}
.jpt-hdr .lst a .ar{opacity:0;width:11px;height:11px}
.jpt-hdr .nav .lst a:hover{color:var(--acid);padding-left:6px}
.jpt-hdr .lst a:hover .ar{opacity:1}
.jpt-hdr .grd{display:flex;flex-direction:column;gap:10px}
.jpt-hdr .nav .grd a{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;padding:12px 14px;background:var(--panel-2);border-left:3px solid var(--gc);transition:background .2s}
.jpt-hdr .grd a:hover{background:#1c1c1c}
.jpt-hdr .grd .chip{grid-row:span 2;font:700 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--gc);color:#000;padding:7px 9px;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.jpt-hdr .grd b{font:800 15px/1 var(--display);text-transform:uppercase;color:var(--ink)}
.jpt-hdr .grd .q{font-size:11px;color:var(--gray)}
.g-new{--gc:rgba(101,221,251,.78)}.g-post{--gc:rgba(225,255,39,.78)}.g-punk{--gc:rgba(233,79,138,.78)}
/* menu card: one outline with chamfered corners, nothing else */
.jpt-hdr .nav a.dcard,.jpt-hdr .nav .dcard-pl{--c:18px;position:relative;isolation:isolate;padding:22px 20px;display:flex;flex-direction:column;gap:10px;flex:1;color:var(--ink);
  background:var(--acid);clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.jpt-hdr .dcard::before{content:"";position:absolute;inset:1px;z-index:-1;background:#0d0e09;
  clip-path:polygon(calc(var(--c) - .4px) 0,100% 0,100% calc(100% - var(--c) + .4px),calc(100% - var(--c) + .4px) 100%,0 100%,0 calc(var(--c) - .4px))}
.jpt-hdr .dcard .tag{align-self:flex-start;background:var(--acid);color:#000;font:700 10px/1 var(--mono);letter-spacing:.14em;padding:5px 7px;text-transform:uppercase}
.jpt-hdr .dcard h4{margin:0;font:800 20px/1.05 var(--display);text-transform:uppercase}
.jpt-hdr .dcard p{margin:0;color:var(--ink-dim);font-size:12px}
.jpt-hdr .dcard .go,.jpt-hdr .nav a.all{margin-top:auto;display:inline-flex;align-items:center;gap:8px;color:var(--acid);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.jpt-hdr .dcard:hover .go .ar,.jpt-hdr .all:hover .ar{transform:translate(2px,-2px)}
.jpt-hdr .loc{display:flex;flex-direction:column;gap:8px;font-size:12px}
.jpt-hdr .loc div{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--panel-2);color:var(--ink-dim)}
.jpt-hdr .loc em{font-style:normal;font-size:10px;letter-spacing:.14em;color:var(--gray)}
.jpt-hdr .loc em.on{color:var(--green)}

@media (max-width:1360px){ .jpt-hdr .sys{display:none} }
@media (max-width:1180px){ .jpt-hdr .cart span{display:none} .jpt-hdr .nav>.it>a,.jpt-hdr .nav>.it>button{padding:0 9px;letter-spacing:.08em} }

/* ---------- mobile ---------- */
.m-menu{display:none}
@media (max-width:1100px){ /* 21.10: iPad — бургер до 1100, інакше пошук наїжджав на мову */
  .jpt-hdr{grid-template-columns:minmax(0,1fr) repeat(4,auto)!important}
  .jpt-hdr .nav,.jpt-hdr .sys,.jpt-hdr .cta,.jpt-hdr .lng{display:none}
  .m-lng{display:flex;gap:10px;align-items:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
  .m-lng a{padding:8px 12px;border:1px solid var(--line-2)}.m-lng a.on{border-color:var(--acid);color:var(--acid)}.m-lng i{display:none}
  .jpt-hdr .cart{padding:0 14px}
  .jpt-hdr .cart span{display:inline;font-size:10px}
  .jpt-hdr .burger{display:grid;place-items:center;width:var(--hdr);border:0;border-left:1px solid var(--line);background:none;cursor:pointer}
  .jpt-hdr .burger span{position:relative;width:20px;height:2px;background:var(--ink);transition:background .2s}
  .jpt-hdr .burger span::before,.jpt-hdr .burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);transition:transform .25s,background .2s}
  .jpt-hdr .burger span::before{top:-6px}.jpt-hdr .burger span::after{top:6px}
  body.m-open .jpt-hdr .burger span{background:transparent}
  body.m-open .jpt-hdr .burger span::before{transform:translateY(6px) rotate(45deg);background:var(--acid)}
  body.m-open .jpt-hdr .burger span::after{transform:translateY(-6px) rotate(-45deg);background:var(--acid)}
  body.m-open{overflow:hidden}
  .m-menu{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;top:calc(var(--hdr) + env(safe-area-inset-top,0px));z-index:49;background:var(--bg);
    transform:translateY(-102%);visibility:hidden;transition:transform .38s cubic-bezier(.2,.8,.1,1),visibility 0s .38s}
  body.m-open .m-menu{transform:none;visibility:visible;transition:transform .38s cubic-bezier(.2,.8,.1,1)}
  .m-list{flex:1;overflow-y:auto;overscroll-behavior:contain}
  .m-menu .acc{border-bottom:1px solid var(--line)}
  .m-menu .acc>button,.m-menu .acc>a{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px;font:900 28px/1 var(--display);text-transform:uppercase;text-align:left;color:var(--ink);background:none;border:0;cursor:pointer}
  .m-menu .acc>button .pm{width:28px;height:28px;border:1px solid var(--line-2);display:grid;place-items:center;font:400 16px/1 var(--mono);transition:transform .3s,background .2s}
  .m-menu .acc.open>button{color:var(--acid)}
  .m-menu .acc.open>button .pm{transform:rotate(45deg);background:var(--acid);color:#000;border-color:var(--acid)}
  .m-menu .acc>a .ar{width:14px;height:14px;color:var(--gray)}
  .m-menu .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease}
  .m-menu .acc.open .body{grid-template-rows:1fr}
  .m-menu .body>div{overflow:hidden}
  .m-menu .sub{display:flex;flex-direction:column;padding:0 16px 14px}
  .m-menu .sub a{display:flex;justify-content:space-between;padding:10px 0 10px 14px;border-left:1px solid var(--line-2);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
  .m-menu .sub a:active,.m-menu .sub a:hover{color:var(--acid);border-left-color:var(--acid)}
  .m-menu .sub .gr{display:flex;gap:6px;flex-wrap:wrap;padding:12px 0 4px 14px}
  .m-menu .sub .gr a{border:0;padding:7px 9px;font:700 10px/1 var(--mono);background:var(--gc);color:#000;letter-spacing:.12em;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
  .m-menu .sub a.ft{color:var(--acid);border-left-color:var(--acid);margin-top:4px}
  .m-foot{padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;background:var(--panel)}
  .m-foot .btn{justify-content:space-between;min-height:50px}
  .m-foot .row{display:flex;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
  .m-foot .row a{color:var(--ink-dim)}
}
@media (prefers-reduced-motion:reduce){ .jpt-hdr .dd,.m-menu{animation:none;transition:none} }

/* footer sits inside the side rails, like every section above it */
footer.sf{margin-inline:var(--rail);z-index:2}

/* ===== scroll smoothness: fewer live GPU effects (no visual change at rest) ===== */
/* the B/W veil is a full-screen backdrop filter: keep it out of the render tree until it is actually on */
.bw-veil{visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.bw-veil.on{visibility:visible;transition:opacity .45s ease,visibility 0s}
/* blurred glass inside scrolling content re-renders every frame while scrolling back: use solid tints instead */
.hud::before{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(7,7,7,.9)!important}
.pcard,.gal-center,.gt{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.pcard{background:rgba(10,10,10,.9)!important}
.gal-center{background:rgba(5,5,5,.92)!important}
/* flying gallery photos and sliders: own layers, no back faces */
main .solid,.chero-stat{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
main .solid{background:rgba(11,11,11,.9)!important}
.chero-stat{background:rgba(8,8,8,.88)!important}
/* «Всі платівки / програвачі» — перший пункт, жовтий (15.10) */
.jpt-hdr .dd > div:nth-child(2) .lst li:first-child a{color:var(--acid)}
.jpt-hdr .dd > div:nth-child(2) .lst li:first-child a .ar{color:var(--acid)}
#mMenu .sub a.ft{color:var(--acid)}

/* 19.10.2026: магазини в меню, топ-10 артистів, «Що крутять» */
.jpt-hdr .mshops{margin-top:26px}.jpt-hdr .mshops .lbl{display:block;margin-bottom:10px}
.jpt-hdr .mshops .loc a{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--panel-2);color:var(--ink-dim)}
.jpt-hdr .mshops .loc a:hover{color:var(--acid)}
.jpt-hdr .lst-top i{font:400 11px var(--mono);font-style:normal;color:var(--acid);margin-right:14px;letter-spacing:.06em}
.jpt-hdr .lst-top .all-a a{font:400 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acid)}
.jpt-hdr .nav .dcard-pl{min-width:0}
.mpls{display:flex;flex-direction:column;margin:6px 0}
.mpl{display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.mpl a{display:grid;grid-template-columns:46px minmax(0,1fr);gap:10px;align-items:center;color:var(--ink);min-width:0}
.mpl img{width:46px;height:46px;object-fit:cover;display:block}
.mpl b{display:block;font:400 12px/1.3 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpl i{display:block;font:400 10px/1.3 var(--mono);font-style:normal;color:var(--acid);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpl a:hover b{color:var(--acid)}
.mpl-b{width:28px;height:28px;border-radius:50%;border:0;background:var(--acid);color:#000;display:grid;place-items:center;cursor:pointer;padding:0}
.mpl-b svg{fill:currentColor}.mpl-b .i-pa{display:none}.mpl-b.on .i-pa{display:block}.mpl-b.on .i-pl{display:none}
.jpt-hdr .mluck{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px dashed var(--line-2);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acid)}
#mMenu .m-pl,#mMenu .mshops{padding:14px 0 0 14px}
#mMenu .m-pl .lbl,#mMenu .mshops .lbl{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);margin-bottom:6px}
#mMenu .mpl a{border:0;padding:0;text-transform:none;letter-spacing:0}
#mMenu .mshops .loc{display:flex;flex-direction:column;gap:6px}
#mMenu .mshops .loc a{display:flex;justify-content:space-between;padding:10px 12px;border:0;background:var(--panel-2);font-size:12px;letter-spacing:.04em;text-transform:none;color:var(--ink-dim)}
#mMenu .mshops em{font-style:normal;font-size:10px;letter-spacing:.14em;color:var(--gray)}#mMenu .mshops em.on{color:var(--green)}
#mMenu .m-pl .mpl a{display:grid;grid-template-columns:46px minmax(0,1fr);justify-content:start;text-align:left;border:0;padding:0;font-size:inherit}
#mMenu .m-pl .mpl a span{min-width:0}
#mMenu .m-pl .mpl{border-bottom:1px solid var(--line)}

/* 19.10.2026: «послухати» у футері вмикається як неонова лампа, коли доскролили (як VINYL на головній) */
@keyframes jpvNeonOn{0%{opacity:0}6%{opacity:.9}9%{opacity:.08}13%{opacity:1}19%{opacity:.25}22%{opacity:1}38%{opacity:1}41%{opacity:.35}43%{opacity:1}61%{opacity:1}63%{opacity:.6}65%,100%{opacity:1}}
.foot-neon{display:inline-block;text-shadow:0 0 28px rgba(225,255,39,.45),0 0 60px rgba(225,255,39,.25);opacity:.08}
.foot-neon.on{animation:jpvNeonOn 1.9s linear both}
@media (prefers-reduced-motion:reduce){.foot-neon{opacity:1}.foot-neon.on{animation:none}}