/* Магазин, вариант B «Витрина» (2026-10-02). Классы sh-*; корзина переиспользует .cart-item* из 1.css */
.sh{ --sh-head: Unbounded, var(--font-family-1, Inter), system-ui, sans-serif; color:var(--s-head); }
.sh svg{ fill:currentColor; }
.sh [hidden]{ display:none !important; }

.sh-top{ display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap; margin:14px 0 14px; }
.sh-h1{ margin:0; font:800 26px var(--sh-head); color:var(--s-head); }
.sh-sub{ margin:0; color:var(--s-muted); font-size:13.5px; } .sh-sub a{ color:var(--s-acc2); }
.sh-grow{ flex:1; }
.sh-dim{ color:var(--s-muted); font-size:13px; }
.sh-srv{ display:inline-flex; gap:4px; padding:4px; border-radius:14px; background:var(--s-card); border:1px solid var(--s-bd); }
.sh-srv button{ border:0; background:none; color:var(--s-muted); font:600 13px Inter, system-ui, sans-serif; padding:8px 14px; border-radius:10px; cursor:pointer; white-space:nowrap; }
.sh-srv button.on{ background:rgba(41,163,171,.18); color:#fff; box-shadow:inset 0 0 0 1px var(--s-hi); }
.sh .store-edit-open{ margin-left:0; }

.sh-lay{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start; }
.sh-main{ min-width:0; }

/* витрина */
.sh-hero{ --c:#29a3ab; position:relative; overflow:hidden; border-radius:24px; min-height:330px; padding:30px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:20px; align-items:center;
  background:radial-gradient(520px 300px at 78% 50%, rgba(41,163,171,.3), transparent 70%), linear-gradient(135deg,#111827,#0b1019);
  background:radial-gradient(520px 300px at 78% 50%, color-mix(in srgb,var(--c) 38%,transparent), transparent 70%), linear-gradient(135deg,#111827,#0b1019);
  border:1px solid var(--s-bd); border-color:color-mix(in srgb,var(--c) 40%,transparent); transition:border-color .3s; }
.sh-eb{ font:800 12px Inter, system-ui, sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--c); }
.sh-name{ margin:8px 0 14px; font:800 clamp(34px,5vw,54px)/1 var(--sh-head); color:#fff; }
.sh-feat{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:7px; font-size:14px; color:#d6e1e9; }
.sh-feat li{ display:flex; gap:8px; align-items:flex-start; } .sh-feat svg{ width:15px; height:15px; color:var(--c); flex:none; margin-top:2px; }
.sh-buy{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.sh-price{ font:800 30px var(--sh-head); color:#fff; } .sh-price small{ font:500 13px Inter, system-ui, sans-serif; color:var(--s-muted); margin-left:6px; }
.sh-price s{ font:600 15px Inter, system-ui, sans-serif; color:var(--s-muted); margin-right:8px; }
.sh-add{ display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 22px; border:0; border-radius:13px; cursor:pointer; color:#fff; font:700 14.5px Inter, system-ui, sans-serif;
  background:linear-gradient(120deg,var(--s-acc),var(--s-blue)); box-shadow:0 10px 26px rgba(43,127,255,.3); transition:transform .15s, filter .15s; }
.sh-add:hover{ transform:translateY(-1px); filter:brightness(1.08); } .sh-add svg{ width:17px; height:17px; }
.sh-add{ max-width:100%; white-space:normal; text-align:center; line-height:1.2; }
.sh-add.ok{ background:linear-gradient(120deg,#2fbf71,#29a3ab); }
.sh-note{ margin-top:12px; font-size:12.5px; color:var(--s-muted); } .sh-note b{ color:var(--s-head); }
.sh-art{ position:relative; height:260px; display:flex; align-items:center; justify-content:center; }
.sh-gem{ width:180px; height:180px; border-radius:44px; transform:rotate(45deg); background:linear-gradient(135deg,var(--c),#0b1019);
  background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 30%,#0b1019)); box-shadow:0 0 80px rgba(41,163,171,.5), inset 0 0 40px rgba(255,255,255,.25);
  box-shadow:0 0 80px color-mix(in srgb,var(--c) 55%,transparent), inset 0 0 40px rgba(255,255,255,.25); animation:shFloat 5s ease-in-out infinite; }
@keyframes shFloat{ 50%{ transform:rotate(45deg) translateY(-8px); } }
.sh-gem-ic{ position:absolute; color:#0b0f17; } .sh-gem-ic svg{ width:60px; height:60px; }
.sh-chat{ position:absolute; bottom:4px; left:50%; transform:translateX(-50%); white-space:nowrap; font:600 13px Inter, system-ui, sans-serif; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:7px 12px; color:#e7edf2; }

/* полка */
.sh-shelf{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-top:14px; }
.sh-it{ --c:#29a3ab; position:relative; border-radius:16px; padding:16px 10px 13px; cursor:pointer; text-align:center; overflow:hidden; color:var(--s-head); font:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid var(--s-bd); transition:transform .15s, border-color .15s, background .15s; }
.sh-it::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--c); box-shadow:0 0 18px var(--c); }
.sh-it{ display:flex !important; flex-direction:column; align-items:center; justify-content:flex-start; width:100%; min-width:0; max-width:100%; height:auto; gap:0; margin:0; }
.sh-it > *{ max-width:100%; }
.sh-it:hover{ transform:translateY(-3px); }
.sh-it.on{ border-color:var(--c); background:rgba(255,255,255,.06); background:color-mix(in srgb,var(--c) 12%,transparent); }
.sh-it-ic{ display:flex; justify-content:center; color:var(--c); height:30px; } .sh-it-ic svg{ width:26px; height:26px; }
.sh-it b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font:800 13px/1.25 var(--sh-head); margin:6px 0 3px; overflow:hidden; text-align:center; }
.sh-it small{ color:var(--s-muted); font-size:12.5px; }
.sh-it-tag{ position:absolute; top:6px; right:6px; font-size:9.5px; font-weight:800; color:#0b0f17; background:var(--c); border-radius:5px; padding:2px 6px; max-width:calc(100% - 12px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* корзина справа */
.sh-cart{ position:sticky; top:16px; border-radius:20px; background:var(--s-card); border:1px solid var(--s-bd); padding:18px; display:flex; flex-direction:column; gap:12px; }
.sh-cart.sh-flash{ animation:shFlash .9s ease; }
@keyframes shFlash{ 0%{ box-shadow:0 0 0 0 rgba(41,163,171,.7); border-color:var(--s-hi); } 100%{ box-shadow:0 0 0 14px rgba(41,163,171,0); } }
.sh-cart-h{ display:flex; align-items:baseline; justify-content:space-between; } .sh-cart-h b{ font:800 16px var(--sh-head); } .sh-cart-h span{ color:var(--s-muted); font-size:12.5px; }
.sh-cart-empty{ padding:18px 6px; } .sh-cart-empty p{ font-size:13px; }
.sh-cart-list{ padding:0; max-height:46vh; }
.sh-ci{ padding:10px; gap:10px; }
.sh-ci-ic{ width:34px; height:34px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--c); color:#0b0f17; }
.sh-ci-ic svg{ width:17px; height:17px; }
.sh .cart-item-gift{ margin:-4px 0 4px 44px; }
.sh-cart-foot{ display:flex; flex-direction:column; gap:10px; }
.sh-total{ display:flex; justify-content:space-between; align-items:baseline; color:var(--s-muted); font-size:13px; } .sh-total b{ font:800 22px var(--sh-head); color:#fff; }
.sh-del{ font:700 13px Inter, system-ui, sans-serif; }
.sh-pay{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; height:48px; border:0; border-radius:13px; cursor:pointer; color:#fff; font:700 14.5px Inter, system-ui, sans-serif; background:linear-gradient(120deg,var(--s-acc),var(--s-blue)); }
.sh-pay[disabled]{ opacity:.6; cursor:default; } .sh-pay svg{ width:17px; height:17px; }
.sh-bal{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; color:var(--s-muted); padding-top:10px; border-top:1px solid var(--s-bd); }
.sh-bal b{ color:var(--s-head); }
.sh-topup{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:var(--s-acc2); font-weight:700; } .sh-topup svg{ width:15px; height:15px; }
.sh-need{ font-size:12.5px; color:#f0c65a; background:rgba(240,198,90,.08); border:1px solid rgba(240,198,90,.3); border-radius:10px; padding:8px 10px; } .sh-need a{ color:#f0c65a; text-decoration:underline; cursor:pointer; }
.sh-gw{ display:flex; gap:10px; justify-content:center; opacity:.55; } .sh-gw img{ height:18px; }

@media (max-width:1000px){
  .sh-lay{ grid-template-columns:1fr; }
  .sh-cart{ position:static; }
  .sh-hero{ grid-template-columns:1fr; padding:22px; min-height:0; }
  .sh-art{ height:190px; order:-1; } .sh-gem{ width:120px; height:120px; border-radius:30px; } .sh-gem-ic svg{ width:42px; height:42px; }
  .sh-shelf{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:520px){ .sh-add{ width:100%; justify-content:center; } .sh-buy{ flex-direction:column; align-items:stretch; } .sh-shelf{ grid-template-columns:repeat(2,minmax(0,1fr)); } .sh-top .sh-grow{ display:none; } .sh-sub{ width:100%; } }