/* Author: yopappyn */
.shop-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.shop-bar input { max-width: 280px; }
.sorts { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); flex-wrap: wrap; }
.sorts button { border: 0; background: none; color: var(--muted); padding: 7px 12px; border-radius: 7px; font: inherit; font-size: 13px; cursor: pointer; transition: all .2s; }
.sorts button:hover { color: var(--text); }
.sorts button.on { background: var(--accent); color: #fff; }

.product .tags { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; gap: 6px; }
.tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; background: rgba(0,0,0,.65); backdrop-filter: blur(6px); color: #fff; border: 1px solid rgba(255,255,255,.15); }
.tag-hot { background: var(--accent); border-color: var(--accent); }
.tag-popular { background: #f59e0b; border-color: #f59e0b; color: #1a1205; }
.tag-new { background: #3ddc97; border-color: #3ddc97; color: #062016; }
.tag-sale { background: #8b5cf6; border-color: #8b5cf6; }
.tag-limited { background: #0ea5e9; border-color: #0ea5e9; }
.tag-off { background: #fff; color: #111; border-color: #fff; }
.featured-p { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 20px 60px -30px var(--accent); }
.featured-p::after { content: 'Polecane'; position: absolute; top: 12px; right: 12px; z-index: 3; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; background: var(--accent); color: #fff; }
.btn.icon { padding: 8px 10px; gap: 2px; font-size: 15px; font-weight: 700; }

.cart-fab { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 14px 40px -10px var(--accent); transition: transform .3s var(--ease); }
.cart-fab:hover { transform: translateY(-3px); }
.cart-fab b { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #fff; color: #111; font-size: 12px; display: grid; place-items: center; transform: scale(0); transition: transform .3s var(--ease); }
.cart-fab.has b { transform: scale(1); }

.drawer-bg { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.drawer-bg.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 75; width: min(460px, 100vw); background: var(--surface); border-left: 1px solid var(--line); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .5s var(--ease); }
.drawer.open { transform: none; }
.drawer .dh { display: flex; align-items: center; gap: 10px; padding: 20px; border-bottom: 1px solid var(--line); }
.drawer .di { flex: 1; overflow: auto; padding: 12px 20px; }
.drawer .df { padding: 20px; border-top: 1px solid var(--line); background: var(--bg2); }
.drawer .empty { text-align: center; padding: 60px 0; color: var(--muted); }
.ci { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line2); }
.ci-img { width: 54px; height: 54px; border-radius: 8px; background: var(--bg2) center/cover; flex: none; }
.ci-n { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.qty button { width: 28px; height: 28px; border: 0; background: var(--bg2); color: var(--text); cursor: pointer; font-size: 16px; }
.qty button:hover { background: var(--accent-l); }
.qty span { min-width: 28px; text-align: center; font-size: 14px; }
.ci-x { border: 0; background: none; color: var(--muted); font-size: 22px; cursor: pointer; padding: 0 4px; }
.ci-x:hover { color: var(--bad); }

.sum { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--bg2); display: grid; gap: 6px; font-size: 14px; }
.totals { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.ord { padding: 12px 0; border-bottom: 1px solid var(--line2); display: grid; gap: 4px; }
@media (max-width: 640px) { .ci { flex-wrap: wrap; } .cart-fab { right: 16px; bottom: 16px; } }

/* katalog */
.catalog { position: relative; margin: 64px -20px 0; padding: 40px 20px 60px; border-top: 1px solid var(--line2); isolation: isolate; }
.aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%); }
.aurora i { position: absolute; width: 46vw; height: 46vw; border-radius: 50%; filter: blur(90px); opacity: .22; background: var(--accent); animation: drift 22s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { top: -18vw; left: -10vw; }
.aurora i:nth-child(2) { top: 20%; right: -16vw; background: color-mix(in srgb, var(--accent) 50%, #7a1020); animation-duration: 28s; animation-delay: -8s; }
.aurora i:nth-child(3) { bottom: -20vw; left: 30%; opacity: .12; animation-duration: 34s; animation-delay: -15s; }
@keyframes drift { 50% { transform: translate(6vw, 4vw) scale(1.1); } 100% { transform: translate(-4vw, 8vw) scale(.95); } }
.pgrid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-flow: dense; }
.pgrid .product { transition: transform .6s var(--ease), border-color .4s, box-shadow .4s; }
.pgrid .product:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.pgrid .product .img { transition: background-size .8s var(--ease); background-size: 105%; }
.pgrid .product:hover .img { background-size: 115%; }
.pgrid .product.reveal { transition-delay: calc(var(--i, 0) * 40ms); }
@media (min-width: 900px) {
  .pgrid .featured-p { grid-column: span 2; flex-direction: row; }
  .pgrid .featured-p .img { aspect-ratio: auto; width: 46%; min-height: 100%; }
  .pgrid .featured-p .img::after { background: linear-gradient(90deg, transparent 50%, var(--surface)); }
  .pgrid .featured-p .body { padding: 22px; }
  .pgrid .featured-p h3 { font-size: 24px !important; }
}
.hexway { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-top: 10px; background: var(--bg2); }
.hexway p { margin: 6px 0 8px; }
code { background: var(--bg2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; font-size: 13px; }

.catalog { width: 100vw; margin: 56px calc(50% - 50vw) 0; padding: 40px max(20px, calc(50vw - 580px)) 60px; border-top: 0; }
.aurora { mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); }
.aurora i { opacity: .1; }
.aurora i:nth-child(3) { opacity: .06; }
.pgrid .product .img:not([style]) { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, #0f1218), #0f1218); }
.pgrid .product .img, .pgrid .product:hover .img { background-size: cover; background-repeat: no-repeat; }

.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; max-height: 56vh; overflow: auto; }
.vt { display: block; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg2); color: var(--text); cursor: pointer; font: inherit; font-size: 13px; }
.vt:hover { border-color: var(--accent); }
.vt span { display: block; height: 90px; background: center/cover; }
.vt b { display: block; padding: 8px; font-weight: 600; word-break: break-word; }
.loader { position: fixed; inset: 0; z-index: 96; pointer-events: none; }
.loader .half { position: absolute; left: 0; right: 0; height: 50.5%; background: #050608; transition: transform 1s cubic-bezier(.77,0,.18,1); }
.loader .half.t { top: 0; } .loader .half.b { bottom: 0; }
.loader .lc { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 22px; align-items: center; justify-content: center; transition: opacity .4s; }
.loader img { width: 96px; height: 96px; animation: lpulse 1.2s ease-in-out infinite; }
.loader i { width: 180px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: lbar 1s linear infinite; }
.loader.go .lc { opacity: 0; }
.loader.go .t { transform: translateY(-100%); } .loader.go .b { transform: translateY(100%); }
@keyframes lpulse { 50% { transform: scale(1.08); filter: drop-shadow(0 0 28px var(--accent)); } }
@keyframes lbar { from { background-position: -100% 0; } to { background-position: 200% 0; } }

/* repertuar */
.catalog { background: linear-gradient(#000 0, #08090c 240px); }
.section-head h2.display { letter-spacing: .01em; }
#bill { position: relative; height: clamp(340px, 46vw, 520px); margin-bottom: 28px; border-radius: 6px; overflow: hidden; background: #000; }
#bill:empty { display: none; }
.bill { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s, visibility 1s; }
.bill.on { opacity: 1; visibility: visible; }
.bill-img { position: absolute; inset: 0 0 0 30%; background: #15171d center/cover no-repeat; transform: scale(1.08); transition: transform 7s linear; }
.bill.on .bill-img { transform: scale(1); }
.bill-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.75) 28%, transparent 70%), linear-gradient(0deg, #000, transparent 35%); }
.bill-txt { position: absolute; left: clamp(20px, 4vw, 52px); bottom: clamp(24px, 4vw, 48px); width: min(560px, calc(100% - 40px)); }
.bill-tag { color: var(--accent); font-weight: 700; font-size: 15px; }
.bill-txt h3 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(38px, 6vw, 76px); line-height: 1.05; margin: 6px 0 10px; }
.bill-txt p { color: #c9ced8; margin: 0 0 18px; max-width: 46ch; }
.bill-txt .price { font-size: 28px; margin-right: 8px; }
.bill-dots { position: absolute; right: 20px; bottom: 20px; display: flex; gap: 6px; }
.bill-dots button { width: 26px; height: 4px; padding: 0; border: 0; background: rgba(255,255,255,.3); cursor: pointer; }
.bill-dots button.on { background: var(--accent); }
.wall { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.poster { display: flex; flex-direction: column; color: var(--text); }
.p-art { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: 6px 6px 0 0; background: #15171d center/cover no-repeat; }
.p-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.92) 8%, transparent 52%); transition: background .35s; }
.poster:hover .p-art::after, .poster:focus-within .p-art::after { background: rgba(0,0,0,.84); }
.p-art .tags { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; gap: 6px; }
.p-info { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; }
.p-info h3 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 26px; line-height: 1.12; margin: 0; }
.p-info ul { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; opacity: 0; font-size: 13px; color: #d5d9e1; transition: max-height .4s var(--ease), opacity .3s, margin .3s; }
.p-info li { padding: 3px 0; }
.p-info .btn { display: none; margin-top: 8px; }
.poster:hover .p-info ul, .poster:focus-within .p-info ul { max-height: 190px; opacity: 1; margin-top: 8px; }
.poster:hover .p-info .btn, .poster:focus-within .p-info .btn { display: inline-flex; }
.p-stub { position: relative; padding: 12px 14px 14px; background: #15171d; border-radius: 0 0 6px 6px; border-top: 2px dashed #000; }
.p-stub::before, .p-stub::after { content: ''; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: #08090c; }
.p-stub::before { left: -8px; } .p-stub::after { right: -8px; }
.p-notes { font-size: 12px; color: var(--warn); margin-bottom: 6px; }
.p-notes span { display: block; }
.p-stub .btn { padding: 7px 11px; font-size: 13px; }
.p-stub .price { font-size: 19px; }
.p-stub .price s { display: block; margin: 0; font-size: 12px; }
@media (hover: none) { .p-info ul { max-height: none; opacity: 1; margin-top: 8px; } .p-info .btn { display: inline-flex; } .p-art { aspect-ratio: 4/5; } }
@media (max-width: 640px) { .bill-img { inset: 0; } .bill-img::after { background: linear-gradient(0deg, #000 25%, rgba(0,0,0,.35)); } }
.btn:focus-visible, .poster button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.cat-row { margin-top: 38px; }
.cat-h { border-left: 4px solid var(--accent); padding-left: 12px; margin-bottom: 16px; }
.cat-h h3 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 30px; margin: 0; }
.srv-hero .hin { align-items: center; gap: 40px; }
.srv-hero .bg, .srv-hero.in .bg { filter: blur(5px) brightness(.42) saturate(1.15); transform: scale(1.06); }
.srv-desc { flex: 0 1 380px; margin: 0; padding-left: 20px; border-left: 2px solid var(--accent); white-space: pre-line; color: #e0e3ea; line-height: 1.65; }