/* Scoped shop v3. Payment sheets and shared buttons are unchanged. */
.screen:has(#view-home.active) { padding-bottom: 0; }
#shopDrawer { position: relative; container-type: inline-size; padding: 5px 12px 12px; border: 0; border-radius: 8px; background: linear-gradient(180deg,#060a0e,#020508); }
#shopDrawer > .store-shell-frame { display: none; }
#shopDrawer > .store-shell-frame path { fill: none; stroke: #e0a21fb8; stroke-width: .8; vector-effect: non-scaling-stroke; }
#shopDrawer > .store-shell-frame .store-frame-detail { stroke: #e0a21f57; stroke-width: .6; }
#shopBlock { position: relative; gap: 9px; min-width: 0; color: #f5f7fa; }
#shopBlock .store-header { display: grid; grid-template-columns: 32px minmax(0,1fr) auto minmax(0,1fr) 32px; align-items: center; gap: 7px; height: 58px; padding: 0 7px 7px; margin-bottom: 1px; border-bottom: 1px solid #ffffff0e; }
#shopBlock .store-basket { width: 32px; height: 32px; }
#shopBlock .store-header h2 { margin: 0; font-size: 26px; line-height: 1; font-weight: 800; text-transform: uppercase; color: #fff0c5; letter-spacing: 0; white-space: nowrap; text-align: center; }
#shopBlock .store-header-line { height: 1px; background: linear-gradient(90deg,transparent,#dca22c); }
#shopBlock h2 + .store-header-line { transform: rotate(180deg); }
#shopBlock .store-service { --accent: #ff2ea9; position: relative; display: grid; grid-template-columns: 78px minmax(0,1fr) 20px; align-items: center; gap: 12px; width: 100%; min-height: 112px; padding: 10px 13px 10px 10px; border: 0; border-radius: 8px; background: linear-gradient(100deg,color-mix(in srgb,var(--accent) 9%,#071019),#03070b 65%); color: inherit; text-align: left; font: inherit; cursor: pointer; overflow: hidden; }
#shopBlock .store-energy { --accent: #ff3a45; }
#shopBlock .store-card-frame { display: none; }
#shopBlock .store-card-frame path { fill: none; stroke: currentColor; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
#shopBlock .store-visual { position: relative; width: 70px; height: 70px; display: grid; place-items: center; justify-self: center; }
#shopBlock .store-visual::before, #shopBlock .store-visual::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid color-mix(in srgb,var(--accent) 42%,transparent); border-radius: 50%; pointer-events: none; }
#shopBlock .store-visual::before { width: 78px; height: 30px; transform: translate(-50%,-50%) rotate(-8deg); }
#shopBlock .store-visual::after { width: 72px; height: 72px; box-shadow: 0 0 12px color-mix(in srgb,var(--accent) 15%,transparent); }
#shopBlock .store-visual .tg-asset { position: relative; z-index: 1; width: 54px; height: 54px; font-size: 40px; }
#shopBlock .store-copy { position: relative; min-width: 0; display: grid; gap: 6px; }
#shopBlock .store-service .store-copy { border-left: 1px solid color-mix(in srgb,var(--accent) 58%,transparent); padding-left: 12px; }
#shopBlock .store-copy b { font-size: 18px; line-height: 1.08; font-weight: 800; overflow-wrap: anywhere; }
#shopBlock .store-copy > span { color: #96a2ae; font-size: 13px; line-height: 1.26; overflow-wrap: anywhere; }
#shopBlock .store-arrow { position: relative; justify-self: end; width: 12px; height: 12px; border-right: 3px solid #e8edf3; border-bottom: 3px solid #e8edf3; transform: rotate(-45deg); opacity: .92; }
#shopBlock .store-history { display: grid; grid-template-columns: 40px minmax(0,1fr) 18px; align-items: center; gap: 10px; min-height: 58px; padding: 7px 12px; margin-top: 5px; border: 1px solid #dca22985; border-radius: 8px; background: linear-gradient(100deg,#17140b,#04070a 60%); color: inherit; text-align: left; font: inherit; cursor: pointer; }
#shopBlock .store-history .tg-asset { width: 38px; height: 38px; font-size: 28px; }
#shopBlock #openPurchaseHistory { grid-template-columns: minmax(0,1fr); text-align: center; border-color: #ffffff1f; }
#shopBlock .store-history .store-copy { gap: 3px; }
#shopBlock .store-history b { font-size: 16px; line-height: 1.05; }
#shopBlock .store-history .store-copy > span { font-size: 12px; line-height: 1.15; }
#shopBlock button:focus-visible { outline: 2px solid #fff0c5; outline-offset: 2px; }
#shopBlock button:hover { filter: brightness(1.045); }
@container (max-width: 350px) {
  #shopBlock { gap: 8px; }
  #shopBlock .store-header { height: 52px; grid-template-columns: 27px minmax(0,1fr) auto minmax(0,1fr) 27px; gap: 5px; padding-inline: 4px; }
  #shopBlock .store-basket { width: 27px; height: 27px; }
  #shopBlock .store-header h2 { font-size: 22px; }
  #shopBlock .store-service { grid-template-columns: 65px minmax(0,1fr) 16px; gap: 9px; min-height: 104px; padding: 8px 9px 8px 7px; }
  #shopBlock .store-visual { width: 60px; height: 60px; }
  #shopBlock .store-visual::before { width: 66px; height: 25px; }
  #shopBlock .store-visual::after { width: 60px; height: 60px; }
  #shopBlock .store-visual .tg-asset { width: 46px; height: 46px; }
  #shopBlock .store-service .store-copy { padding-left: 9px; gap: 5px; }
  #shopBlock .store-copy b { font-size: 16px; }
  #shopBlock .store-copy > span { font-size: 12px; }
  #shopBlock .store-history { grid-template-columns: 36px minmax(0,1fr) 14px; min-height: 54px; padding: 6px 9px; }
  #shopBlock .store-history .tg-asset { width: 34px; height: 34px; }
  #shopBlock .store-history b { font-size: 15px; }
  #shopBlock .store-history .store-copy > span { font-size: 11px; }
}
@container (max-width: 305px) {
  #shopBlock .store-service { grid-template-columns: 56px minmax(0,1fr) 14px; gap: 7px; min-height: 98px; }
  #shopBlock .store-visual { width: 52px; height: 52px; }
  #shopBlock .store-visual::before { width: 58px; height: 22px; }
  #shopBlock .store-visual::after { width: 52px; height: 52px; }
  #shopBlock .store-visual .tg-asset { width: 40px; height: 40px; }
  #shopBlock .store-service .store-copy b { font-size: 14px; }
  #shopBlock .store-service .store-copy > span { font-size: 11px; }
}