/* VenmoFX — Shop (dark) */
body.shop{
  --bg:#0a0a0c;
  --surface:#141417;
  --ink:#f2f2f4;
  --ink-2:#b4b4bb;
  --muted:#7c7c85;
  --line:rgba(255,255,255,.08);
  --card:#111114;
  --card-line:rgba(255,255,255,.07);
  background:var(--bg);
  color:var(--ink);
}
body.shop ::selection{background:rgba(10,132,255,.35)}

/* background: shape field (canvas) + soft light that follows the cursor */
.field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.glow{position:fixed;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(120,170,255,.085),rgba(120,170,255,.03) 55%,transparent);
  opacity:0;transition:opacity .6s ease;will-change:transform}
.glow.is-on{opacity:1}
body.shop main,body.shop .footer{position:relative;z-index:1}
body.shop .nav{z-index:50}

/* intro (centered) */
.intro{padding:104px 0 64px;text-align:center}
.intro__label{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.02em;margin-bottom:20px;display:inline-flex;align-items:center;gap:10px}
.intro__label::before,.intro__label::after{content:"";width:18px;height:1px;background:currentColor;opacity:.6}
.intro__title{font-size:clamp(40px,6.4vw,80px);font-weight:700;letter-spacing:-.04em;line-height:1.02;max-width:14ch;margin:0 auto}
.intro__sub{margin:22px auto 0;font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);max-width:46ch}
.intro__meta{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.intro__meta li{font-size:13px;color:var(--ink-2);padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
/* entrance: words rise out of a blur, one after another */
.js-anim .intro__title .w{display:inline-block;opacity:0;transform:translateY(.38em);filter:blur(10px);animation:wIn .95s cubic-bezier(.2,.75,.2,1) forwards;animation-delay:calc(120ms + var(--i) * 85ms)}
.js-anim .intro__label,.js-anim .intro__sub,.js-anim .intro__meta{opacity:0;transform:translateY(10px);animation:fIn .8s cubic-bezier(.2,.75,.2,1) forwards}
.js-anim .intro__label{animation-delay:40ms}
.js-anim .intro__sub{animation-delay:620ms}
.js-anim .intro__meta{animation-delay:760ms}
/* keep the raw title hidden until it is split (falls back to visible after 2.5s) */
.js-anim .intro__title{visibility:hidden;animation:showT 0s 2.5s forwards}
.js-anim .intro__title.is-split{visibility:visible;animation:none}
@keyframes showT{to{visibility:visible}}
@keyframes wIn{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes fIn{to{opacity:1;transform:none}}

/* list */
.list{padding:24px 0 110px}
.list__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:16px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.list__head h2{font-size:20px;letter-spacing:-.01em;font-weight:600}
.list__count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}

/* product row */
.item{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0;border-radius:20px;background:var(--card);border:1px solid var(--card-line);overflow:hidden;
  transition:border-color .3s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.item::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(420px circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.06),transparent 60%)}
.item{box-shadow:0 0 0 0 rgba(10,132,255,0);transition:border-color .35s ease,box-shadow .45s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.item:hover{border-color:rgba(10,132,255,.55);box-shadow:0 0 0 1px rgba(10,132,255,.25),0 0 34px -4px rgba(10,132,255,.5),0 0 90px -18px rgba(10,132,255,.55)}
.item:hover::before{opacity:1}
.item__media{display:block;background:#eeeff2;overflow:hidden;min-height:100%}
.item__media img{width:100%;height:100%;min-height:340px;object-fit:cover;object-position:50% 62%;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.item:hover .item__media img{transform:scale(1.025)}
.item__body{position:relative;padding:34px 36px;display:flex;flex-direction:column}
.item__cat{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;margin-bottom:10px}
.item__ver{font-size:11px;font-weight:600;color:var(--ink-2);padding:2px 7px;border-radius:6px;border:1px solid var(--line)}
.item__name{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.03em}
.item__desc{margin-top:10px;color:var(--ink-2);font-size:16px;max-width:38ch}
.item__tags{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.item__tags li{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);padding:6px 10px 6px 8px;border-radius:8px;background:rgba(255,255,255,.035);border:1px solid var(--line);cursor:default;transition:border-color .2s,color .2s}
.item__tags li:hover{color:var(--ink);border-color:rgba(255,255,255,.16)}
.item__price{margin-top:auto;padding-top:26px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.item__price strong{font-size:30px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.item__price s{color:var(--muted);font-size:17px}
.save{font-size:12px;font-weight:700;color:var(--lime-ink);background:var(--lime);box-shadow:var(--lime-glow);padding:4px 10px;border-radius:999px}
.item__timer{margin-top:8px;font-size:13px;color:var(--muted)}
.item__timer span{color:var(--ink-2);font-variant-numeric:tabular-nums;font-weight:600}
.item__btns{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.btn--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.btn--line:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}

/* small shapes */
.sh{display:inline-block;width:10px;height:10px;flex:none;background:currentColor;color:#5d5d66;transition:transform .45s cubic-bezier(.34,1.56,.64,1),color .25s ease}
.sh--sq{border-radius:3px}
.sh--ci{border-radius:50%}
.sh--tr{clip-path:polygon(50% 4%,100% 96%,0 96%);border-radius:1px}
.sh--di{transform:rotate(45deg) scale(.86);border-radius:2px}
.item__tags li:hover .sh{color:#4aa3ff}
.item__tags li:hover .sh--sq{transform:rotate(90deg) scale(1.15)}
.item__tags li:hover .sh--ci{transform:scale(1.3)}
.item__tags li:hover .sh--tr{transform:translateY(-2px) rotate(180deg)}
.item__tags li:hover .sh--di{transform:rotate(135deg) scale(1)}

/* dark footer + misc */
body.shop .footer{background:transparent;border-top-color:var(--line)}
body.shop .social{background:rgba(255,255,255,.03)}
body.shop .social:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
body.shop .cart-btn__count{box-shadow:0 0 0 2px #1c1c20}
body.shop .icon-btn:hover{background:rgba(255,255,255,.08)}
body.shop .btn--ghost:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}

@media (max-width:900px){
  .item{grid-template-columns:1fr}
  .item__media img{min-height:0;aspect-ratio:5/3}
  .item__body{padding:24px 22px 26px}
}
@media (max-width:720px){
  .intro{padding:64px 0 36px}
  .list__head{margin-bottom:18px}
  .glow{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sh,.item,.item__media img{transition:none}
  .js-anim .intro__title .w,.js-anim .intro__label,.js-anim .intro__sub,.js-anim .intro__meta{animation:none;opacity:1;transform:none;filter:none}
  .glow{display:none}
}
.item + .item{margin-top:22px}
.gl-liner{background:linear-gradient(180deg,#8fd14f,#4f9a24);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#62b334}


/* ---------- Shop: square product tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 28px}
.tile{position:relative;display:block;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:none}
.tile__art{position:relative;display:block;aspect-ratio:1/1;border-radius:34px;overflow:hidden;background:#f2f2f4;isolation:isolate;
box-shadow:0 0 0 1px rgba(255,255,255,.06),0 22px 44px -26px rgba(0,0,0,.85);
transition:transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .7s cubic-bezier(.2,.7,.2,1)}
.tile__art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.tile:hover .tile__art,.tile:focus-visible .tile__art{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(var(--acc),.45),0 28px 60px -24px rgba(var(--acc),.55),0 0 90px -34px rgba(var(--acc),.65)}
.tile:hover .tile__art img{transform:scale(1.035)}
.tile__meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 6px 0}
.tile__name{font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.tile__price{display:flex;align-items:baseline;gap:8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tile__price strong{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.tile__price s{font-size:14px;color:var(--muted)}
.tile__deal{position:absolute;z-index:3;top:-12px;left:-12px;padding:8px 13px;border-radius:12px;background:var(--lime);color:var(--lime-ink);
font-size:13px;font-weight:800;letter-spacing:.01em;line-height:1;white-space:nowrap;pointer-events:none;transform:rotate(-12deg);
box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 22px -6px rgba(120,220,40,.7),0 0 22px -4px rgba(170,255,70,.45);
transition:transform .5s cubic-bezier(.34,1.56,.64,1);animation:dealGlow 3.4s ease-in-out infinite}
.tile:hover .tile__deal{transform:rotate(-8deg) scale(1.06)}
@keyframes dealGlow{
0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 22px -6px rgba(120,220,40,.7),0 0 22px -4px rgba(170,255,70,.45)}
50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 28px -6px rgba(120,220,40,.85),0 0 42px 2px rgba(170,255,70,.6)}}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}}
@media (max-width:560px){
.tiles{gap:30px 14px}
.tile__art{border-radius:24px}
.tile__meta{flex-direction:column;align-items:flex-start;gap:3px;padding:12px 4px 0}
.tile__name{font-size:15.5px}
.tile__price strong{font-size:15px}
.tile__price s{font-size:13px}
.tile__deal{top:-8px;left:-6px;padding:6px 10px;border-radius:10px;font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){.tile__deal{animation:none}.tile__art,.tile__art img,.tile__deal{transition:none}}

/* price only, centered */
.tile__meta{justify-content:center;padding:16px 0 0}
.tile__price strong{font-size:18px}
@media (max-width:560px){.tile__meta{align-items:center;padding-top:12px}.tile__price strong{font-size:16px}}