/* ============================================================
   STORE CARDS — designed gift-card covers (neumorphism, no photos)
   Заменяет фотокарточки магазина: матовая «обложка-карта» в нашем
   стиле + блик при наведении. Один компонент на все категории.
   Подключается ПОСЛЕ store-page.css / neo-theme.css / pages/store.css.
   Скоуп: .store-page .fz (не пересекается с легаси .sp-card).
   ============================================================ */
html.neo .store-page,
.store-page{
  --fz-surf:#ecf0f3; --fz-sunk:#e6ebf1;
  --fz-ink:#2b333f; --fz-body:#3f4a59; --fz-muted:#5d6776;
  --fz-coral:#ff4136; --fz-coral-h:#ff6d63;
  --fz-ease:cubic-bezier(.4,0,.2,1);
}

.store-page .fz{
  position:relative; display:flex; flex-direction:column;
  background:var(--fz-surf); border-radius:28px; padding:14px 14px 16px;
  box-shadow:-6px -6px 14px #ffffff, 6px 6px 14px #ccd4e0;
  transition:transform .35s var(--fz-ease), box-shadow .35s var(--fz-ease);
  overflow:visible; isolation:isolate; will-change:transform;
}
.store-page .fz:hover{transform:translateY(-5px);box-shadow:-11px -11px 22px #ffffff, 13px 13px 28px #ccd4e0;}

/* delay badge + informative tooltip */
.store-page .fz .delay{
  position:absolute;top:11px;right:11px;z-index:20;width:23px;height:23px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;background:var(--fz-surf);color:var(--fz-muted);
  font-size:13px;font-weight:700;line-height:1;cursor:default;outline:none;
  box-shadow:-3px -3px 7px #ffffff, 4px 4px 9px #ccd4e0;
}
.store-page .fz .delay .tip{
  position:absolute;top:calc(100% + 7px);right:0;width:184px;
  background:#1c1c1e;color:#f5f5f7;font-size:11.5px;font-weight:400;line-height:1.42;
  padding:8px 11px;border-radius:10px;box-shadow:0 6px 22px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;transition:opacity .15s var(--fz-ease),visibility .15s var(--fz-ease);
  pointer-events:none;z-index:30;
}
.store-page .fz .delay .tip::before{content:"";position:absolute;bottom:100%;right:9px;border:5px solid transparent;border-bottom-color:#1c1c1e;}
.store-page .fz .delay:hover .tip,.store-page .fz .delay:focus .tip{opacity:1;visibility:visible;}

/* pressed well = soft frame for the cover */
.store-page .fz .well{position:relative;border-radius:18px;padding:13px;background:var(--fz-sunk);
  box-shadow:inset 4px 4px 9px #ccd4e0, inset -4px -4px 9px #ffffff;}

/* faux gift-card cover (built in CSS, no photo) */
.store-page .fz .art{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:5/6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 3px 8px rgba(43,51,63,.20);transition:transform .45s var(--fz-ease);will-change:transform;}
.store-page .fz:hover .art{transform:scale(1.05);}

/* covers: apple region/tier + category brand hues (muted) */
.store-page .fz .art-tr  {background:linear-gradient(155deg,#7a8aa3 0%,#56627a 48%,#3d4658 100%);}
.store-page .fz .art-us  {background:linear-gradient(155deg,#6f7d96 0%,#4d5871 48%,#343d52 100%);}
.store-page .fz .art-in  {background:linear-gradient(155deg,#9a8a76 0%,#6f6353 48%,#4a4438 100%);}
.store-page .fz .art-prem{background:linear-gradient(155deg,#454d61 0%,#313749 50%,#1f2430 100%);}
.store-page .fz .art-tg  {background:linear-gradient(155deg,#5a86c2 0%,#3d6196 48%,#27406a 100%);}
.store-page .fz .art-tgp {background:linear-gradient(155deg,#4f6db0 0%,#384f8c 50%,#222f55 100%);}
.store-page .fz .art-xbox{background:linear-gradient(155deg,#6a9a72 0%,#477553 48%,#2c4b37 100%);}
.store-page .fz .art-psn {background:linear-gradient(155deg,#5a6e9e 0%,#3d4f78 48%,#26304f 100%);}
.store-page .fz .art-esim{background:linear-gradient(155deg,#4f93a3 0%,#356f82 48%,#22485a 100%);}

.store-page .fz .art::before{content:"";position:absolute;inset:0;z-index:1;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);background-size:3px 3px;opacity:.5;pointer-events:none;}
.store-page .fz .art::after{content:"";position:absolute;inset:0;z-index:2;mix-blend-mode:multiply;pointer-events:none;
  background:radial-gradient(120% 80% at 28% 16%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%),linear-gradient(180deg, rgba(43,51,63,.03), rgba(43,51,63,.18));}

/* ① light-sweep glides across cover on hover */
.store-page .fz .sweep{position:absolute;top:-25%;bottom:-25%;left:-65%;width:42%;z-index:4;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.40), transparent);transform:skewX(-18deg);opacity:0;pointer-events:none;}
.store-page .fz:hover .sweep{opacity:1;left:135%;transition:left .65s var(--fz-ease), opacity .4s var(--fz-ease);}

.store-page .fz .glyph{position:relative;z-index:3;color:rgba(255,255,255,.94);filter:drop-shadow(0 2px 5px rgba(0,0,0,.28));line-height:0;}
.store-page .fz .glyph svg{width:44px;height:44px;display:block;}
.store-page .fz .art-denom{position:relative;z-index:3;margin-top:11px;color:#fff;font-weight:700;font-size:25px;letter-spacing:.3px;text-shadow:0 2px 7px rgba(0,0,0,.34);text-align:center;padding:0 8px;max-width:100%;}
.store-page .fz .art-denom.d-md{font-size:20px;}
.store-page .fz .art-denom.d-sm{font-size:15px;line-height:1.14;letter-spacing:0;}
.store-page .fz .art-denom.d-xs{font-size:12.5px;line-height:1.18;letter-spacing:0;font-weight:600;}
.store-page .fz .art-kind{position:relative;z-index:3;margin-top:3px;color:rgba(255,255,255,.74);font-weight:500;font-size:10px;letter-spacing:.7px;text-transform:uppercase;text-align:center;}

/* meta */
.store-page .fz .meta{padding:13px 4px 2px;}
.store-page .fz .region{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--fz-muted);
  padding:5px 11px;border-radius:999px;background:var(--fz-surf);box-shadow:inset 3px 3px 6px #ccd4e0, inset -3px -3px 6px #ffffff;}
.store-page .fz .label{margin:11px 0 2px;font-size:12.5px;font-weight:500;color:var(--fz-ink);line-height:1.25;}
.store-page .fz .sp-info{display:inline-flex;align-items:center;gap:4px;margin-top:6px;border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;color:var(--fz-muted);padding:0;transition:color .15s;}
.store-page .fz .sp-info svg{width:13px;height:13px;}
.store-page .fz .sp-info:hover{color:var(--fz-coral);}
.store-page .fz .row{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:10px;}
.store-page .fz .price{font-size:19px;font-weight:700;color:var(--fz-coral);letter-spacing:.2px;white-space:nowrap;}
.store-page .fz .buy{appearance:none;border:0;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:var(--fz-body);
  padding:10px 17px;border-radius:999px;background:var(--fz-surf);box-shadow:-3px -3px 7px #ffffff, 4px 4px 9px #ccd4e0;white-space:nowrap;
  transition:box-shadow .22s var(--fz-ease), color .22s var(--fz-ease), transform .22s var(--fz-ease);}
.store-page .fz .buy:hover{color:var(--fz-coral-h);box-shadow:-4px -4px 9px #ffffff, 5px 5px 11px #ccd4e0;transform:translateY(-1px);}
.store-page .fz .buy:active{box-shadow:inset 3px 3px 6px #ccd4e0, inset -3px -3px 6px #ffffff;color:var(--fz-coral);transform:translateY(1px);}
.store-page .fz .buy:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,65,54,.45);}

/* ---- compact: inapp (cabinet) + mobile narrow ---- */
.inapp-mode .store-page .fz,
.inapp-mode .fz{padding:10px 10px 12px;border-radius:20px;}
@media(max-width:560px){
  .store-page .fz{padding:9px 9px 11px;border-radius:18px;}
  .store-page .fz .well{padding:8px;border-radius:13px;}
  .store-page .fz .glyph svg{width:30px;height:30px;}
  .store-page .fz .art-denom{font-size:16px;margin-top:7px;}
  .store-page .fz .art-denom.d-sm{font-size:12.5px;}
  .store-page .fz .art-denom.d-xs{font-size:11px;}
  .store-page .fz .art-kind{font-size:8px;}
  .store-page .fz .meta{padding:9px 2px 0;}
  .store-page .fz .label{font-size:11px;margin:7px 0 0;}
  .store-page .fz .price{font-size:14px;}
  .store-page .fz .buy{padding:8px 0;width:100%;font-size:12px;}
  .store-page .fz .row{flex-direction:column;align-items:stretch;gap:7px;margin-top:9px;}
  .store-page .fz .delay .tip{width:150px;}
}
/* inapp narrow columns inside cabinet iframe */
@media(max-width:520px){
  .inapp-mode .store-page .fz .glyph svg{width:26px;height:26px;}
  .inapp-mode .store-page .fz .art-denom{font-size:14px;}
}

@media(prefers-reduced-motion:reduce){
  .store-page .fz,.store-page .fz .art,.store-page .fz .buy{transition:box-shadow .2s var(--fz-ease),color .2s var(--fz-ease);}
  .store-page .fz:hover,.store-page .fz:hover .art{transform:none;}
  .store-page .fz:hover .sweep{opacity:0;left:-65%;}
  .store-page .fz .buy:active{transform:none;}
}