:root{
  --bg:#0e1014; --surface:#161a21; --surface-2:#1d222c; --surface-3:#232935;
  --line:#2a3040; --line-soft:#20252f;
  --text:#eaecef; --muted:#98a1af; --faint:#6a7381;
  --accent:#5b8cff; --accent-ink:#0a1730;
  --radius:16px; --radius-sm:11px;
  --shadow:0 10px 30px rgba(0,0,0,.4);
  --shadow-sm:0 3px 12px rgba(0,0,0,.28);
  --maxw:1280px; --topbar-h:60px; --catbar-h:52px;
  --skel1:#1b2029; --skel2:#232a36;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f5f6f8; --surface:#ffffff; --surface-2:#f1f3f6; --surface-3:#e9edf2;
    --line:#e4e7ec; --line-soft:#eef0f4;
    --text:#171a1f; --muted:#616b79; --faint:#9aa3b0;
    --accent:#2f6bff; --accent-ink:#ffffff;
    --shadow:0 12px 30px rgba(20,30,50,.10);
    --shadow-sm:0 2px 10px rgba(20,30,50,.07);
    --skel1:#e9ecf1; --skel2:#f3f5f8;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.45;
}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
::selection{background:color-mix(in srgb,var(--accent) 35%,transparent)}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:30; height:var(--topbar-h);
  display:flex; align-items:center; gap:18px;
  padding:0 clamp(14px,4vw,40px);
  background:color-mix(in srgb,var(--bg) 80%, transparent);
  backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; font-size:18px; letter-spacing:.2px}
.brand-mark{display:inline-flex; font-size:0; line-height:0}
.brand-mark svg{display:block; border-radius:10px; box-shadow:0 4px 14px rgba(91,140,255,.35); transition:transform .18s ease, box-shadow .18s ease}
.brand:hover .brand-mark svg{transform:translateY(-1px) rotate(-3deg); box-shadow:0 6px 18px rgba(91,140,255,.5)}
.brand-wrap{display:flex; flex-direction:column; line-height:1.05}
.brand-name{font-size:18px; font-weight:800}
.brand-tagline{font-size:10.5px; font-weight:500; color:var(--faint); letter-spacing:.02em; margin-top:2px}
@media (max-width:600px){ .brand-tagline{display:none} }
.search{position:relative; margin-left:auto; flex:0 1 440px; display:flex; align-items:center}
.search-ic{position:absolute; left:14px; width:17px; height:17px; color:var(--faint); pointer-events:none}
.search input{
  width:100%; padding:10px 40px 10px 40px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  font-size:14px; font-family:inherit; outline:none; transition:border-color .15s, box-shadow .15s, background .15s;
}
.search input::placeholder{color:var(--faint)}
.search input:focus{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.search-kbd{
  position:absolute; right:12px; font-size:11px; color:var(--faint);
  border:1px solid var(--line); border-radius:6px; padding:1px 7px; background:var(--surface-2);
}
.search input:focus ~ .search-kbd{opacity:0}

/* ---------- Category switcher bar ---------- */
.catbar{
  position:sticky; top:var(--topbar-h); z-index:25; height:var(--catbar-h);
  display:flex; align-items:center; gap:8px; overflow-x:auto; overflow-y:hidden;
  padding:0 clamp(14px,4vw,40px);
  background:color-mix(in srgb,var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line-soft);
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.catbar::-webkit-scrollbar{height:6px}
.catbar::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px}
.chip{
  flex:0 0 auto; padding:7px 14px; border-radius:999px; font-size:13px; font-weight:500;
  color:var(--muted); background:transparent; border:1px solid var(--line);
  cursor:pointer; white-space:nowrap; transition:.15s; font-family:inherit;
}
.chip:hover{color:var(--text); border-color:var(--faint); background:var(--surface)}
.chip.active{color:var(--accent-ink); background:var(--accent); border-color:var(--accent); font-weight:600}

/* ---------- Layout ---------- */
.app{max-width:var(--maxw); margin:0 auto; padding:22px clamp(14px,4vw,40px) 70px}
.crumbs{display:flex; flex-wrap:wrap; gap:7px; align-items:center; color:var(--muted); font-size:13px; margin-bottom:14px}
.crumbs a{color:var(--muted); transition:color .12s}
.crumbs a:hover{color:var(--text)}
.crumbs .sep{opacity:.45}
.crumbs .cur{color:var(--text); font-weight:600}

.page-head{margin:2px 0 22px}
.page-head h1{font-size:clamp(23px,3.4vw,33px); margin:0; font-weight:800; letter-spacing:-.6px; line-height:1.1}
.page-head .sub{margin:8px 0 0; color:var(--muted); font-size:13.5px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.pill{display:inline-flex; align-items:center; gap:5px; background:var(--surface-2); border:1px solid var(--line-soft);
  color:var(--muted); padding:3px 10px; border-radius:999px; font-size:12px; font-weight:500}
.back{display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; cursor:pointer;
  background:none; border:none; padding:6px 0; margin-bottom:2px; font-family:inherit}
.back:hover{color:var(--text)}
.loading,.empty{color:var(--muted); padding:70px 0; text-align:center}

/* ---------- Home promo banner ---------- */
.banner{
  position:relative; overflow:hidden; cursor:pointer;
  border-radius:22px; margin:4px 0 28px; min-height:230px;
  display:flex; align-items:center; gap:24px;
  padding:32px clamp(22px,4vw,48px);
  background:linear-gradient(115deg,#2a0a4a 0%,#5b1e78 34%,#b0248f 62%,#ff5e7a 100%);
  box-shadow:0 20px 55px rgba(120,20,120,.4); isolation:isolate;
}
.banner-glow{position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 120% at 12% 8%, rgba(0,229,255,.55), transparent 60%),
    radial-gradient(50% 130% at 98% 100%, rgba(255,196,0,.55), transparent 55%);
  mix-blend-mode:screen;}
.banner::after{content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:34px 34px; mask-image:linear-gradient(160deg,#000,transparent 70%);}
/* scene background (original Vice-City-style vector art) */
.banner--scene{min-height:300px}
.banner-bg{position:absolute; inset:0; z-index:0; overflow:hidden}
.banner-bg .scene{width:100%; height:100%; display:block; animation:bKen 20s ease-in-out infinite alternate; transform-origin:70% 60%}
.banner-scrim{position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(10,6,20,.88) 0%, rgba(10,6,20,.52) 42%, rgba(10,6,20,.06) 72%, rgba(10,6,20,.28) 100%)}
.b-sun{animation:bSun 6s ease-in-out infinite}
.b-palm .palm-shape{transform-box:fill-box; transform-origin:10px 4px; animation:bSway 5.5s ease-in-out infinite}
.banner-title{text-shadow:0 2px 22px rgba(0,0,0,.55), 0 0 30px rgba(255,90,160,.22)}
.scene-tag{position:absolute; right:14px; bottom:14px; z-index:2; background:rgba(0,0,0,.55); color:#fff;
  font-size:12px; font-weight:600; padding:6px 12px; border-radius:999px; backdrop-filter:blur(4px);
  opacity:0; transform:translateY(4px); transition:.18s}
.banner:hover .scene-tag{opacity:.95; transform:translateY(0)}
@keyframes bKen{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes bSun{0%,100%{opacity:1}50%{opacity:.8}}
@keyframes bSway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}

.banner-text{flex:1 1 auto; min-width:0; color:#fff; position:relative; z-index:2}
.banner-eyebrow{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; background:rgba(255,255,255,.16); padding:5px 12px; border-radius:999px; margin-bottom:14px;
  border:1px solid rgba(255,255,255,.25)}
.banner-title{margin:0; font-size:clamp(30px,5.2vw,58px); font-weight:800; line-height:.98; letter-spacing:-1.5px;
  text-shadow:0 2px 30px rgba(0,0,0,.35); color:#fff}
.banner-sub{margin:12px 0 0; font-size:clamp(14px,1.6vw,17px); color:rgba(255,255,255,.92); max-width:42ch}
.banner-cta-row{display:flex; align-items:center; gap:18px; margin-top:22px; flex-wrap:wrap}
.banner-btn{display:inline-flex; align-items:center; gap:9px; background:#fff; color:#1a0730;
  font-weight:700; font-size:15px; padding:12px 22px; border-radius:999px; transition:transform .15s, box-shadow .15s;
  box-shadow:0 8px 22px rgba(0,0,0,.28)}
.banner:hover .banner-btn{transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.36)}
.banner-price{display:inline-flex; align-items:baseline; gap:9px; color:#fff}
.banner-price .pw{font-size:15px; opacity:.7; text-decoration:line-through}
.banner-price .pn{font-size:30px; font-weight:800; letter-spacing:-1px; color:#ffe14d; text-shadow:0 2px 16px rgba(0,0,0,.3)}
.banner-price .pl{font-size:12px; font-weight:600; opacity:.85; text-transform:uppercase; letter-spacing:.06em}
.banner-media{flex:0 0 auto; width:min(40%,340px); display:flex; justify-content:center; align-items:center;
  position:relative; z-index:1}
.banner-media img{max-height:200px; width:auto; border-radius:12px; filter:drop-shadow(0 24px 34px rgba(0,0,0,.5))}
.banner-media img.lz{opacity:0} .banner-media img.lz.loaded{opacity:1; transition:opacity .5s}
.banner-media-tag{position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,.62); color:#fff;
  font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; backdrop-filter:blur(4px);
  opacity:0; transform:translateY(4px); transition:.18s}
.banner:hover .banner-media-tag{opacity:1; transform:translateY(0)}
@media (max-width:680px){
  .banner{flex-direction:column-reverse; text-align:center; padding:26px 22px; min-height:0}
  .banner-media{width:auto} .banner-media img{max-height:150px}
  .banner-sub{margin-left:auto; margin-right:auto}
  .banner-cta-row{justify-content:center}
}

/* group sub-nav (inside a category) */
.subnav{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px}
.subnav .chip{border-color:var(--line)}

/* section heading */
.section{margin:0 0 30px}
.section-h{display:flex; align-items:baseline; gap:10px; margin:0 0 14px; scroll-margin-top:140px}
.section-h h2{font-size:16px; font-weight:700; margin:0; letter-spacing:-.2px}
.section-h .n{color:var(--faint); font-size:12.5px; font-weight:500}

/* ---------- Grids ---------- */
.grid{display:grid; gap:18px}
.grid.cats{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.grid.prods{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.grid.photos{grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
  transition:transform .17s cubic-bezier(.2,.7,.3,1), box-shadow .17s, border-color .17s;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.card:active{transform:translateY(-1px)}
.thumb{position:relative; aspect-ratio:4/3; overflow:hidden}
.thumb img,.photo img{width:100%; height:100%; object-fit:cover}
.thumb img{transition:transform .4s ease}
.card:hover .thumb img{transform:scale(1.06)}
.count{
  position:absolute; right:9px; bottom:9px; z-index:2;
  background:rgba(8,10,14,.66); color:#fff; font-size:11.5px; font-weight:600;
  padding:4px 9px; border-radius:999px; backdrop-filter:blur(4px); letter-spacing:.2px;
  display:inline-flex; align-items:center; gap:4px;
}
.card-body{padding:12px 14px 14px}
.card-title{font-weight:600; font-size:14.5px; letter-spacing:-.1px; line-height:1.25}
.card-sub{color:var(--faint); font-size:12px; margin-top:4px; display:flex; gap:8px; align-items:center}
.card-sub .from{margin-left:auto; color:var(--accent); font-weight:700}

/* ---------- Price block ---------- */
.price{display:flex; align-items:baseline; gap:8px; margin-top:9px; flex-wrap:wrap}
.price .now{font-size:17px; font-weight:800; letter-spacing:-.3px; color:var(--text)}
.price .was{font-size:12.5px; color:var(--faint); text-decoration:line-through}
.price .off{font-size:11px; font-weight:700; color:#fff; background:#e0384f; padding:2px 7px; border-radius:6px; letter-spacing:.2px}
@media (prefers-color-scheme:light){ .price .off{background:#e0243f} }
.price.big{gap:12px; margin:0}
.price.big .now{font-size:30px}
.price.big .was{font-size:16px}
.price.big .off{font-size:13px; padding:4px 10px; border-radius:8px}

/* ---------- Buy bar (product page) ---------- */
.buybar{display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:16px 20px; margin:0 0 24px}
.tg-buy{display:inline-flex; align-items:center; gap:9px; background:linear-gradient(135deg,#2aabee,#229ed9);
  color:#fff; font-weight:700; font-size:14.5px; padding:12px 20px; border-radius:12px;
  box-shadow:0 6px 18px rgba(34,158,217,.35); transition:transform .14s, box-shadow .14s}
.tg-buy:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(34,158,217,.45)}
.buynote{flex:1 1 240px; margin:0; color:var(--muted); font-size:12.5px; line-height:1.5}
.buynote strong{color:var(--text)}

/* ---------- Header wishlist button ---------- */
.wish-link{display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-family:inherit;
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
  padding:8px 13px; border-radius:999px; font-size:13px; font-weight:600; transition:.14s}
.wish-link:hover{color:var(--text); border-color:var(--faint)}
.wish-link.has{color:#e0384f; border-color:color-mix(in srgb,#e0384f 45%,var(--line))}
.wish-link svg{fill:currentColor}

/* ---------- Header cart button ---------- */
.cart-link{display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-family:inherit;
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
  padding:8px 13px; border-radius:999px; font-size:13px; font-weight:600; transition:.14s}
.cart-link:hover{color:var(--text); border-color:var(--faint)}
.cart-link.has{color:var(--accent-ink); background:var(--accent); border-color:var(--accent)}
.cart-link .ic-cart{stroke:currentColor}
.cart-link-label{font-weight:600}
#cart-count{display:inline-block}
.cart-link.has #cart-count{background:rgba(255,255,255,.28); border-radius:999px; padding:0 7px; min-width:18px; text-align:center}
#cart-count.bump{animation:badgePop .32s ease}
@keyframes badgePop{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}
@media (max-width:600px){ .cart-link-label{display:none} }

/* ---------- How it works strip ---------- */
.how{margin:6px 0 30px}
.how-title{font-size:14px; font-weight:700; color:var(--muted); margin:0 0 14px; letter-spacing:.01em}
.how-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.how-step{display:flex; gap:13px; align-items:flex-start; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:16px 18px}
.how-n{flex:0 0 auto; width:30px; height:30px; border-radius:999px; display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:15px}
.how-body b{font-size:15px; font-weight:700}
.how-body p{margin:4px 0 0; color:var(--muted); font-size:13px; line-height:1.5}
.how-body b + p{margin-top:5px}
@media (max-width:720px){ .how-grid{grid-template-columns:1fr} }

/* ---------- Empty cart ---------- */
.empty-cart{text-align:center; padding:50px 20px 60px; max-width:520px; margin:0 auto}
.empty-cart-ic{font-size:52px; margin-bottom:10px}
.empty-cart-t{font-size:20px; font-weight:800; margin:0 0 8px}
.empty-cart-s{color:var(--muted); font-size:14px; line-height:1.6; margin:0 0 22px}
.empty-cart .banner-btn{display:inline-flex; cursor:pointer; border:none; font-family:inherit}
.big-note{font-size:13px !important; margin:14px 0 0 !important}

/* ---------- Add-to-cart on cards ---------- */
.card-foot{display:flex; align-items:center; gap:8px; margin-top:9px}
.card-foot .price{margin-top:0}
.add-cart{margin-left:auto; display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:12.5px; padding:7px 12px; border-radius:9px; white-space:nowrap;
  min-width:80px; background:var(--accent); color:var(--accent-ink); border:none;
  transition:background-color .18s ease, color .18s ease, transform .12s ease, filter .18s ease}
.add-cart .ac-ic{display:inline-flex; align-items:center}
.ic-cart,.ic-check{fill:none; stroke:currentColor}
.add-cart:hover{filter:brightness(1.06); transform:translateY(-1px)}
.add-cart:active{transform:translateY(0) scale(.95)}
.add-cart.added{background:#1eb877; color:#fff; animation:addPop .3s ease}
.add-cart.big{margin-left:0; font-size:14px; padding:12px 18px; border-radius:12px; min-width:150px}
@keyframes addPop{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}

/* ---------- Quantity stepper ---------- */
.qty{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:11px; overflow:hidden; background:var(--surface-2)}
.qty button{width:34px; height:38px; border:none; background:transparent; color:var(--text); font-size:18px; cursor:pointer; font-family:inherit; line-height:1}
.qty button:hover{background:var(--surface-3)}
.qty span{min-width:30px; text-align:center; font-weight:700; font-size:14px}

/* ---------- Cart rows ---------- */
.cart-list{display:flex; flex-direction:column; gap:10px; margin:0 0 24px}
.cart-row{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:10px 14px 10px 10px}
.cart-thumb{width:64px; height:64px; flex:0 0 auto; border-radius:10px; overflow:hidden; background:var(--surface-2); cursor:pointer; position:relative}
.cart-thumb img{width:100%; height:100%; object-fit:cover}
.cart-info{flex:1 1 auto; min-width:0}
.cart-name{font-weight:600; font-size:14.5px; cursor:pointer; line-height:1.3}
.cart-name:hover{color:var(--accent)}
.cart-cat{color:var(--faint); font-size:12px; margin-top:2px}
.cart-unit{color:var(--muted); font-size:12.5px; margin-top:3px}
.cart-line{font-weight:800; font-size:16px; min-width:84px; text-align:right; letter-spacing:-.3px}
.cart-del{width:34px; height:34px; flex:0 0 auto; border:none; background:transparent; color:var(--faint);
  font-size:15px; cursor:pointer; border-radius:8px; transition:.13s}
.cart-del:hover{background:color-mix(in srgb,#e0384f 15%,transparent); color:#e0384f}
@media (max-width:560px){
  .cart-row{flex-wrap:wrap}
  .cart-info{flex:1 1 60%}
  .cart-line{min-width:0; flex:1 1 auto}
}

/* ---------- Heart on cards ---------- */
.heart{position:absolute; top:8px; right:8px; z-index:3; width:32px; height:32px; border:none; cursor:pointer;
  border-radius:999px; background:rgba(8,10,14,.55); backdrop-filter:blur(4px); display:grid; place-items:center;
  transition:transform .12s, background .12s; padding:0}
.heart svg{fill:none; stroke:#fff; stroke-width:2}
.heart:hover{background:rgba(8,10,14,.75); transform:scale(1.08)}
.heart.on{background:#e0384f}
.heart.on svg{fill:#fff; stroke:#fff}

/* ---------- Controls (sort + price filter) ---------- */
.controls{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin:0 0 20px}
.result-count{color:var(--muted); font-size:13px; font-weight:600}
.bands{display:flex; gap:7px; flex-wrap:wrap}
.chip.sm{padding:5px 11px; font-size:12px}
.sortsel-wrap{margin-left:auto; display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:13px}
#sortsel{font-family:inherit; font-size:13px; color:var(--text); background:var(--surface);
  border:1px solid var(--line); border-radius:9px; padding:7px 10px; cursor:pointer; outline:none}
#sortsel:focus{border-color:var(--accent)}

/* ---------- Save button (product page) ---------- */
.save-btn{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:inherit; font-weight:700;
  font-size:14px; padding:12px 18px; border-radius:12px; background:var(--surface-2); color:var(--text);
  border:1px solid var(--line); transition:.14s}
.save-btn svg{fill:none; stroke:currentColor; stroke-width:2}
.save-btn:hover{border-color:var(--faint)}
.save-btn.on{background:color-mix(in srgb,#e0384f 14%,transparent); border-color:#e0384f; color:#e0384f}
.save-btn.on svg{fill:#e0384f; stroke:#e0384f}

/* ---------- Wishlist panel ---------- */
.wish-panel{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px 20px; margin:0 0 26px}
.wish-panel-head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.wish-total{font-size:26px; font-weight:800; letter-spacing:-.5px}
.wish-total-sub{color:var(--faint); font-size:12.5px; margin-top:2px}
.wish-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.copy-btn,.clear-btn{font-family:inherit; font-weight:600; font-size:14px; padding:11px 16px; border-radius:12px;
  cursor:pointer; border:1px solid var(--line); background:var(--surface-2); color:var(--text); transition:.14s}
.copy-btn:hover{border-color:var(--faint)}
.clear-btn{color:var(--muted)}
.clear-btn:hover{color:#e0384f; border-color:color-mix(in srgb,#e0384f 40%,var(--line))}
.wish-msg{width:100%; margin-top:14px; resize:vertical; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px; line-height:1.5; color:var(--text); background:var(--bg); border:1px solid var(--line);
  border-radius:10px; padding:12px}
.tg-buy.wide{padding:12px 20px}

/* ---------- Header Telegram link ---------- */
.tg-link{display:inline-flex; align-items:center; gap:7px; color:#fff;
  background:linear-gradient(135deg,#2aabee,#229ed9); padding:8px 14px; border-radius:999px;
  font-size:13px; font-weight:600; white-space:nowrap; box-shadow:0 4px 12px rgba(34,158,217,.3); transition:transform .14s}
.tg-link:hover{transform:translateY(-1px)}
@media (max-width:600px){ .tg-link .tg-handle{display:none} .tg-link{padding:8px} }

/* photo tiles */
.photo{position:relative; border:1px solid var(--line-soft); border-radius:var(--radius-sm);
  overflow:hidden; cursor:zoom-in; aspect-ratio:1/1}
.photo img{transition:transform .35s}
.photo:hover img{transform:scale(1.07)}

/* ---------- Lazy image + skeleton shimmer ---------- */
.lz{opacity:0; transition:opacity .45s ease}
.lz.loaded{opacity:1}
.thumb,.photo{background:var(--surface-2)}
.thumb.skel::before,.photo.skel::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,var(--skel1) 30%,var(--skel2) 50%,var(--skel1) 70%);
  background-size:200% 100%; animation:shimmer 1.3s infinite linear;
}
.thumb.done::before,.photo.done::before{display:none}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(6,8,12,.94); backdrop-filter:blur(6px); animation:fade .18s ease}
.lightbox[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lb-stage{margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; max-width:92vw}
.lb-img{max-width:92vw; max-height:82vh; object-fit:contain; border-radius:10px; box-shadow:0 16px 60px rgba(0,0,0,.6)}
.lb-cap{color:var(--faint); font-size:12.5px}
.lb-close,.lb-nav{position:absolute; background:rgba(255,255,255,.1); color:#fff; border:none;
  cursor:pointer; border-radius:999px; display:grid; place-items:center; transition:background .15s, transform .1s}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.24)}
.lb-nav:active{transform:translateY(-50%) scale(.92)}
.lb-close{top:18px; right:22px; width:44px; height:44px; font-size:17px}
.lb-nav{top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:28px; line-height:1}
.lb-prev{left:18px} .lb-next{right:18px}
.lb-count{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:#fff; font-size:12.5px;
  background:rgba(0,0,0,.5); padding:5px 13px; border-radius:999px; letter-spacing:.3px}

/* ---------- Refund / policy page ---------- */
.policy-lead{color:var(--muted); font-size:15px; line-height:1.6; margin:8px 0 0; max-width:62ch}
.policy-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:4px 0 22px}
.policy-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px}
.policy-card .ic{font-size:26px; line-height:1}
.policy-card h3{margin:9px 0 6px; font-size:16px; font-weight:700; letter-spacing:-.2px}
.policy-card p{margin:0; color:var(--muted); font-size:13.5px; line-height:1.6}
.policy-card strong{color:var(--text)}
.policy-cta{margin:0 0 10px}
@media (max-width:640px){ .policy-grid{grid-template-columns:1fr} }

/* ---------- Footer ---------- */
.foot{max-width:var(--maxw); margin:0 auto; padding:22px clamp(14px,4vw,40px) 44px;
  color:var(--faint); font-size:12.5px; border-top:1px solid var(--line-soft)}
.foot-link{color:var(--accent); font-weight:600}
.foot-sep{margin:0 8px; opacity:.5}

/* ---------- Responsive ---------- */
@media (max-width:600px){
  .brand-name{display:none}
  .grid.cats,.grid.prods{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:13px}
  .grid.photos{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:9px}
  .lb-nav{width:42px; height:42px; font-size:23px}
  .lb-close{top:12px; right:12px}
}
/* ---------- Entrance animations ---------- */
@keyframes cardIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes viewIn{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
.grid.cats .card,.grid.prods .card{animation:cardIn .34s cubic-bezier(.2,.7,.3,1) both}
.grid.cats .card:nth-child(1),.grid.prods .card:nth-child(1){animation-delay:.02s}
.grid.cats .card:nth-child(2),.grid.prods .card:nth-child(2){animation-delay:.05s}
.grid.cats .card:nth-child(3),.grid.prods .card:nth-child(3){animation-delay:.08s}
.grid.cats .card:nth-child(4),.grid.prods .card:nth-child(4){animation-delay:.11s}
.grid.cats .card:nth-child(5),.grid.prods .card:nth-child(5){animation-delay:.14s}
.grid.cats .card:nth-child(6),.grid.prods .card:nth-child(6){animation-delay:.17s}
.grid.cats .card:nth-child(7),.grid.prods .card:nth-child(7){animation-delay:.2s}
.grid.cats .card:nth-child(8),.grid.prods .card:nth-child(8){animation-delay:.23s}
.page-head{animation:viewIn .3s ease both}
.banner{animation:viewIn .45s ease both}
.how-step{animation:cardIn .4s ease both}
.how-step:nth-child(2){animation-delay:.08s}
.how-step:nth-child(3){animation-delay:.16s}
.photo{animation:viewIn .3s ease both}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto}
}