:root {
  color-scheme: dark;
  --shop-bg: #090e16;
  --shop-surface: #101824;
  --shop-surface-raised: #151f2d;
  --shop-surface-soft: #0d141f;
  --shop-ink: #f4f1ea;
  --shop-muted: #9aa5b4;
  --shop-faint: #6f7a88;
  --shop-line: rgba(255, 255, 255, .095);
  --shop-line-strong: rgba(255, 255, 255, .16);
  --shop-gold: #e8b957;
  --shop-gold-bright: #f4ce78;
  --shop-gold-dark: #a96f1d;
  --shop-danger: #ff8c8c;
  --shop-success: #93e3ae;
  --shop-radius: 14px;
  --shop-ease-out: cubic-bezier(.23, 1, .32, 1);
  font-family: Inter, Manrope, "Segoe UI", sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --shop-bg: #f4efe4;
  --shop-surface: #fffdf8;
  --shop-surface-raised: #ffffff;
  --shop-surface-soft: #eee7da;
  --shop-ink: #172536;
  --shop-muted: #5d6978;
  --shop-faint: #788493;
  --shop-line: rgba(35, 49, 66, .12);
  --shop-line-strong: rgba(35, 49, 66, .2);
  --shop-gold: #9a6817;
  --shop-gold-bright: #8a570d;
  --shop-gold-dark: #744709;
  --shop-danger: #b23d3d;
  --shop-success: #2c8050;
}

body [hidden] { display: none !important; }
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--shop-bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--shop-ink);
  background:
    radial-gradient(circle at 82% -10%, rgba(190, 125, 32, .12), transparent 32rem),
    linear-gradient(150deg, #101827 0%, var(--shop-bg) 48%, #0b111b 100%);
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.shop-header {
  position: sticky;
  z-index: 40;
  top: 0;
  display: flex;
  min-height: 64px;
  align-items: center;
  gap: 16px;
  padding: max(10px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--shop-line);
  background: rgba(7, 11, 18, .92);
  backdrop-filter: blur(18px);
}
.shop-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.shop-brand img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
.shop-brand span { display: grid; min-width: 0; gap: 1px; }
.shop-brand small { overflow: hidden; color: var(--shop-gold); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-overflow: ellipsis; white-space: nowrap; }
.shop-brand strong { font: 700 18px Georgia, serif; letter-spacing: .025em; }
.shop-wallet { display: flex; align-items: center; gap: 10px; margin-left: auto; text-align: right; }
.shop-wallet-balance { display: grid; }
.shop-wallet-balance > span { color: var(--shop-muted); font-size: 10px; }
.shop-wallet strong { color: var(--shop-gold-bright); font-size: 19px; line-height: 1.15; }
.shop-topup-trigger {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  border: 1px solid rgba(232, 185, 87, .34);
  border-radius: 9px;
  color: var(--shop-gold-bright);
  background: rgba(232, 185, 87, .08);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 140ms var(--shop-ease-out);
}
.shop-topup-trigger > span { font-size: 18px; line-height: 1; }
.shop-orders-link { min-height: 42px; display: inline-flex; align-items: center; padding: 0 10px; color: var(--shop-muted); font-size: 12px; font-weight: 800; text-decoration: none; }
.shop-close, .dialog-close, .sidebar-close {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--shop-line);
  border-radius: 50%;
  color: var(--shop-ink);
  background: rgba(255, 255, 255, .035);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 140ms var(--shop-ease-out);
}

.shop-tabs button span {
  display: inline-grid;
  min-width: 18px;
  min-height: 18px;
  place-items: center;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 999px;
  color: #151009;
  background: var(--shop-gold-bright);
  font-size: 10px;
}

.offers-page { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 22px 0 max(36px, env(safe-area-inset-bottom)); }
.offers-header { margin-bottom: 18px; padding: 18px 20px; border: 1px solid rgba(232, 185, 87, .25); border-radius: var(--shop-radius); background: linear-gradient(135deg, rgba(232, 185, 87, .11), var(--shop-surface)); }
.offers-header h1 { margin: 3px 0 7px; font: 700 clamp(26px, 4vw, 38px) Georgia, serif; }
.offers-header p:last-child { max-width: 720px; margin: 0; color: var(--shop-muted); }
.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.smart-offer-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 15px; min-height: 196px; padding: 16px; border: 1px solid var(--shop-line-strong); border-radius: var(--shop-radius); background: linear-gradient(145deg, var(--shop-surface-raised), var(--shop-surface-soft)); box-shadow: 0 16px 34px rgba(0, 0, 0, .2); }
.smart-offer-card.is-new::before { position: absolute; inset: 0 auto auto 0; padding: 5px 11px; border-radius: 0 0 9px 0; content: "NEW"; color: #171109; background: var(--shop-gold-bright); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.smart-offer-art { display: grid; min-height: 104px; place-items: center; border: 1px solid rgba(232, 185, 87, .18); border-radius: 12px; background: radial-gradient(circle, rgba(232, 185, 87, .15), transparent 70%); }
.smart-offer-art img { width: 76px; height: 76px; object-fit: contain; }
.smart-offer-copy { display: flex; min-width: 0; flex-direction: column; }
.smart-offer-copy h2 { margin: 0 0 6px; font: 700 20px Georgia, serif; }
.smart-offer-copy p { display: -webkit-box; overflow: hidden; margin: 0 0 12px; color: var(--shop-muted); font-size: 13px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.smart-offer-timer { color: var(--shop-gold-bright); font-size: 12px; font-weight: 800; }
.smart-offer-footer { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.smart-offer-price { display: grid; color: var(--shop-muted); font-size: 10px; }
.smart-offer-price strong { color: var(--shop-ink); font-size: 19px; }
.smart-offer-buy { min-height: 40px; padding: 0 15px; border: 1px solid rgba(232, 185, 87, .44); border-radius: 9px; color: #171109; background: linear-gradient(#f4ce78, #d9a43e); font-weight: 900; cursor: pointer; }
.smart-offer-buy:disabled { cursor: not-allowed; opacity: .5; }

@media (max-width: 520px) {
  .offers-page { width: calc(100% - 20px); padding-top: 12px; }
  .offers-header { padding: 15px; }
  .smart-offer-card { grid-template-columns: 82px minmax(0, 1fr); gap: 11px; padding: 12px; }
  .smart-offer-art { min-height: 82px; }
  .smart-offer-art img { width: 62px; height: 62px; }
}

.shop-tabs {
  position: sticky;
  z-index: 39;
  top: 64px;
  display: flex;
  min-height: 48px;
  align-items: end;
  gap: 4px;
  padding: 0 max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--shop-line);
  background: rgba(7, 11, 18, .94);
  backdrop-filter: blur(18px);
}
.shop-tabs button {
  position: relative;
  min-width: 138px;
  min-height: 47px;
  padding: 0 20px;
  border: 0;
  color: var(--shop-muted);
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  cursor: pointer;
}
.shop-tabs button::after {
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
  content: "";
}
.shop-tabs button.is-active { color: var(--shop-gold-bright); }
.shop-tabs button.is-active::after { background: var(--shop-gold); }

main {
  width: min(1540px, 100%);
  margin: 0 auto;
  padding: 20px max(18px, env(safe-area-inset-right)) max(48px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}
.shop-status { min-height: 65vh; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--shop-muted); }
.shop-status h1 { margin: 16px 0 8px; color: var(--shop-ink); font: 700 clamp(28px, 5vw, 42px) Georgia, serif; }
.shop-status p { max-width: 480px; line-height: 1.65; }
.shop-status-actions, .dialog-actions { display: flex; gap: 10px; justify-content: center; }
.shop-spinner { width: 38px; height: 38px; border: 3px solid rgba(255, 255, 255, .1); border-top-color: var(--shop-gold); border-radius: 50%; animation: spin .72s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.button {
  min-height: 42px;
  padding: 10px 17px;
  border: 1px solid var(--shop-gold-bright);
  border-radius: 9px;
  color: #171006;
  background: linear-gradient(180deg, #f1ca76, #cf9134);
  box-shadow: inset 0 1px rgba(255, 255, 255, .24);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: filter 160ms ease, transform 140ms var(--shop-ease-out);
}
.button.secondary { border-color: var(--shop-line-strong); color: var(--shop-ink); background: rgba(255, 255, 255, .045); box-shadow: none; }
.button:disabled { cursor: not-allowed; filter: grayscale(.25); opacity: .55; }

.category-toggle svg, .shop-search svg { width: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
select, input[type="search"] {
  min-height: 42px;
  border: 1px solid var(--shop-line-strong);
  border-radius: 9px;
  color: var(--shop-ink);
  background: #111a27;
  outline: none;
}
select { width: 100%; padding: 0 38px 0 12px; }
select:focus, input:focus { border-color: var(--shop-gold); box-shadow: 0 0 0 3px rgba(232, 185, 87, .12); }

.shop-layout { display: grid; grid-template-columns: 224px minmax(0, 1fr); align-items: start; gap: 24px; }
.shop-sidebar {
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 104px);
  overflow: hidden auto;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  background: rgba(15, 23, 35, .88);
  scrollbar-color: rgba(255, 255, 255, .17) transparent;
  scrollbar-width: thin;
}
.sidebar-header {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px 12px;
  border-bottom: 1px solid var(--shop-line);
  background: #111a27;
}
.sidebar-header > div { display: grid; gap: 1px; }
.sidebar-header span { color: var(--shop-faint); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sidebar-header strong { font-size: 16px; }
.sidebar-close { display: none; }
.category-list { display: grid; gap: 3px; padding: 8px; }
.category-button {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 42px;
  gap: 9px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--shop-muted);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 140ms var(--shop-ease-out);
}
.category-button::before { content: ""; width: 3px; height: 18px; border-radius: 4px; background: transparent; }
.category-button img { width: 22px; height: 22px; object-fit: contain; }
.category-label { overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.category-count { min-width: 25px; padding: 3px 6px; border-radius: 999px; color: var(--shop-faint); background: rgba(255, 255, 255, .045); font-size: 10px; text-align: center; }
.category-button.is-active { border-color: rgba(232, 185, 87, .18); color: var(--shop-ink); background: rgba(232, 185, 87, .09); }
.category-button.is-active::before { background: var(--shop-gold); box-shadow: 0 0 16px rgba(232, 185, 87, .35); }
.category-button.is-active .category-count { color: var(--shop-gold-bright); background: rgba(232, 185, 87, .1); }
.category-backdrop { display: none; }

.shop-catalog { min-width: 0; scroll-margin-top: 80px; }
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  margin-bottom: 9px;
}
.catalog-heading { display: flex; min-width: 0; align-items: baseline; gap: 9px; }
.catalog-heading strong { font: 700 23px/1.15 Georgia, serif; white-space: nowrap; }
.catalog-heading small { overflow: hidden; color: var(--shop-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.catalog-actions { display: flex; align-items: center; gap: 9px; }
.category-toggle { display: none; }
.shop-search {
  display: flex;
  width: min(300px, 32vw);
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  border: 1px solid var(--shop-line-strong);
  border-radius: 9px;
  color: var(--shop-faint);
  background: #111a27;
}
.shop-search:focus-within { border-color: var(--shop-gold); box-shadow: 0 0 0 3px rgba(232, 185, 87, .12); }
.shop-search input { width: 100%; min-width: 0; border: 0; background: transparent; box-shadow: none; }
.shop-search input:focus { box-shadow: none; }
.shop-sort select { min-height: 42px; max-width: 158px; padding: 0 30px 0 11px; border: 1px solid var(--shop-line-strong); border-radius: 9px; color: var(--shop-ink); background: #111a27; font-size: 11px; font-weight: 750; }
.shop-highlights { display: flex; gap: 6px; margin: 0 0 10px; overflow-x: auto; scrollbar-width: none; }
.shop-highlights::-webkit-scrollbar { display: none; }
.shop-highlights button { min-height: 32px; flex: 0 0 auto; padding: 0 12px; border: 1px solid var(--shop-line); border-radius: 999px; color: var(--shop-muted); background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, transform 140ms var(--shop-ease-out); }
.shop-highlights button.is-active { color: #1d1507; border-color: var(--shop-gold); background: var(--shop-gold); }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 11px; }
.product-card {
  position: relative;
  overflow: hidden;
  display: flex;
  min-width: 0;
  min-height: 310px;
  flex-direction: column;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  background: linear-gradient(180deg, rgba(21, 31, 45, .96), rgba(15, 23, 35, .96));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  transition: transform 180ms var(--shop-ease-out), border-color 180ms ease, box-shadow 180ms ease;
}
.product-card::before { content: ""; position: absolute; z-index: 4; inset: 0 auto 0 0; width: 4px; background: transparent; pointer-events: none; }
.product-card::after { content: ""; position: absolute; z-index: 0; top: -110px; right: -95px; width: 230px; height: 230px; border-radius: 50%; background: rgba(232, 185, 87, .14); opacity: 0; filter: blur(8px); pointer-events: none; }
.product-card > * { position: relative; z-index: 1; }
.product-card.is-featured { border-color: rgba(240, 194, 91, .72); box-shadow: 0 16px 42px rgba(190, 122, 25, .2), inset 0 0 0 1px rgba(255, 223, 150, .08); }
.product-card.is-featured::before { background: linear-gradient(180deg, #ffe4a0, #c98220); }
.product-card.is-featured::after { opacity: 1; }
.product-card.is-popular:not(.is-featured) { border-color: rgba(255, 151, 79, .5); box-shadow: 0 14px 36px rgba(192, 75, 22, .14); }
.product-card.is-popular:not(.is-featured)::before { background: linear-gradient(180deg, #ffbd74, #d8502d); }
.product-card.is-new:not(.is-featured):not(.is-popular) { border-color: rgba(112, 184, 255, .45); }
.product-card.is-new:not(.is-featured):not(.is-popular)::before { background: linear-gradient(180deg, #a7dcff, #4d80d8); }
.product-card.is-recommended { box-shadow: 0 18px 48px rgba(190, 122, 25, .24), inset 0 0 0 1px rgba(255, 225, 159, .11); }
.product-image {
  position: relative;
  display: grid;
  min-height: 118px;
  place-items: center;
  padding: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  background:
    radial-gradient(circle at 50% 48%, rgba(232, 185, 87, .11), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .018), transparent);
}
.product-detail-trigger { display: grid; width: 100%; min-height: 91px; place-items: center; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; }
.product-detail-trigger:focus-visible { border-radius: 10px; outline-offset: 1px; }
.product-badges { position: absolute; z-index: 2; top: 10px; left: 10px; display: flex; max-width: calc(100% - 72px); flex-wrap: wrap; gap: 5px; }
.product-badge { overflow: hidden; max-width: 138px; padding: 5px 8px; border: 1px solid rgba(232, 185, 87, .28); border-radius: 999px; color: var(--shop-gold-bright); background: rgba(8, 13, 21, .9); box-shadow: 0 5px 16px rgba(0, 0, 0, .18); font-size: 8px; font-weight: 950; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.product-badge.is-featured { color: #241503; border-color: #f2c466; background: linear-gradient(135deg, #ffe29a, #dca23e); }
.product-badge.is-marketing { color: #f3e6ff; border-color: rgba(199, 139, 255, .55); background: rgba(91, 48, 126, .92); }
.product-badge.is-new { color: #071624; border-color: #8bcaff; background: linear-gradient(135deg, #b7e2ff, #72aaf2); }
.product-badge.is-popular { color: #260e03; border-color: #ffad6f; background: linear-gradient(135deg, #ffc27f, #f06b43); }
.product-badge.is-limited { color: var(--shop-danger); border-color: rgba(255, 140, 140, .3); }
.product-image img { width: 86px; height: 86px; max-width: 78%; max-height: 86px; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .32)); transition: transform 200ms var(--shop-ease-out), filter 200ms ease; }
.product-image .placeholder { color: var(--shop-gold); font: 700 42px Georgia, serif; opacity: .72; }
.product-body { display: flex; min-width: 0; flex: 1; flex-direction: column; padding: 12px; }
.product-body h2 {
  display: -webkit-box;
  overflow: hidden;
  min-height: 38px;
  margin: 0;
  font-family: Inter, Manrope, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.product-body p {
  display: -webkit-box;
  overflow: hidden;
  min-height: 32px;
  margin: 5px 0 8px;
  color: var(--shop-muted);
  font-size: 11px;
  line-height: 1.45;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.product-details { display: flex; min-height: 18px; flex-wrap: wrap; gap: 5px; margin: 0 0 7px; }
.product-details span { padding: 3px 6px; border-radius: 5px; color: var(--shop-muted); background: rgba(255, 255, 255, .045); font-size: 8px; font-weight: 750; }
.product-price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: auto; }
.product-price strong { color: var(--shop-gold-bright); font-size: 19px; letter-spacing: -.02em; }
.product-price span { color: var(--shop-faint); font-size: 9px; white-space: nowrap; }
.product-buy { width: 100%; min-height: 38px; margin-top: 8px; }
.product-stock { position: absolute; z-index: 1; top: 10px; right: 10px; padding: 5px 8px; border: 1px solid var(--shop-line); border-radius: 999px; color: var(--shop-muted); background: rgba(8, 13, 21, .82); font-size: 9px; }
.product-card.is-unavailable { filter: grayscale(.2); opacity: .62; }
.shop-empty { padding: 80px 20px; border: 1px dashed var(--shop-line-strong); border-radius: var(--shop-radius); color: var(--shop-muted); text-align: center; }

.shop-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; }
.page-numbers { display: flex; align-items: center; gap: 5px; }
.page-button, .page-control {
  display: grid;
  min-width: 38px;
  min-height: 38px;
  place-items: center;
  border: 1px solid var(--shop-line);
  border-radius: 9px;
  color: var(--shop-muted);
  background: rgba(255, 255, 255, .025);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, transform 140ms var(--shop-ease-out);
}
.page-button[aria-current="page"] { border-color: var(--shop-gold); color: #171006; background: var(--shop-gold); }
.page-control { min-width: 104px; padding: 0 13px; }
.page-button:disabled, .page-control:disabled { cursor: not-allowed; opacity: .35; }
.page-ellipsis { width: 24px; color: var(--shop-faint); text-align: center; }
.page-summary { display: none; color: var(--shop-muted); font-size: 12px; font-weight: 700; }

.eyebrow { margin: 0 0 7px; color: var(--shop-gold); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.recently-viewed { margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--shop-line); }
.recently-viewed > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.recently-viewed h2 { margin: 0; font: 700 25px Georgia, serif; }
.shop-text-action { min-height: 40px; padding: 0 6px; border: 0; color: var(--shop-muted); background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.recently-viewed-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.recent-product { min-width: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 11px; padding: 10px; border: 1px solid var(--shop-line); border-radius: 11px; color: var(--shop-ink); background: var(--shop-surface); text-align: left; cursor: pointer; }
.recent-product img { width: 58px; height: 58px; object-fit: contain; }
.recent-product span { min-width: 0; display: grid; gap: 4px; }
.recent-product strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.recent-product small { color: var(--shop-gold-bright); font-size: 10px; }
.recent-product:disabled { cursor: not-allowed; opacity: .55; }

.product-detail-dialog, .purchase-dialog, .purchase-success-dialog, .topup-prompt-dialog { padding: 0; border: 1px solid rgba(232, 185, 87, .3); border-radius: 18px; color: var(--shop-ink); background: var(--shop-surface-raised); box-shadow: 0 30px 100px rgba(0, 0, 0, .72); }
.product-detail-dialog { width: min(760px, calc(100% - 28px)); max-height: calc(100dvh - 24px); overflow: hidden; }
.product-detail-dialog::backdrop, .purchase-dialog::backdrop, .purchase-success-dialog::backdrop, .topup-prompt-dialog::backdrop { background: rgba(3, 6, 10, .82); backdrop-filter: blur(7px); }
.product-detail-dialog > section { position: relative; display: grid; grid-template-columns: minmax(260px, 1.1fr) minmax(280px, 1fr); max-height: calc(100dvh - 26px); overflow: auto; }
.product-detail-preview { display: grid; min-height: 390px; place-items: center; padding: 28px; border-right: 1px solid var(--shop-line); background: radial-gradient(circle at 50% 42%, rgba(232,185,87,.14), transparent 62%), var(--shop-surface-soft); }
.product-detail-preview img { width: 100%; height: 100%; max-height: 440px; object-fit: contain; }
.product-detail-content { display: flex; min-width: 0; flex-direction: column; padding: 30px 24px 24px; color: var(--shop-ink); background: var(--shop-surface-raised); }
.product-detail-identity { display: grid; grid-template-columns: 47px minmax(0, 1fr); align-items: center; gap: 12px; padding-right: 26px; }
.product-detail-identity > span { display: grid; width: 45px; height: 45px; place-items: center; border: 1px solid rgba(232,185,87,.32); border-radius: 10px; background: rgba(232,185,87,.08); }
.product-detail-identity img { width: 35px; height: 35px; object-fit: contain; image-rendering: pixelated; }
.product-detail-identity .eyebrow { margin-bottom: 3px; }
.product-detail-identity h2 { margin: 0; font: 700 24px/1.2 Georgia, serif; }
#product-detail-description { margin: 20px 0; color: var(--shop-muted); font-size: 13px; line-height: 1.65; white-space: pre-line; }
.product-detail-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.product-detail-meta span { padding: 6px 8px; border: 1px solid var(--shop-line); border-radius: 7px; color: var(--shop-muted); background: rgba(255,255,255,.035); font-size: 10px; font-weight: 750; }
.product-detail-purchase { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; margin-top: auto; padding-top: 24px; }
.product-detail-purchase > span { display: grid; gap: 4px; }
.product-detail-purchase small { color: var(--shop-muted); font-size: 10px; }
.product-detail-purchase strong { color: var(--shop-gold-bright); font-size: 22px; }
.product-detail-purchase .button { min-width: 130px; }
.purchase-dialog {
  width: min(500px, calc(100% - 28px));
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}
.purchase-dialog form {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 22px;
  text-align: left;
}
.dialog-close { position: absolute; top: 12px; right: 12px; }
.purchase-dialog-product {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding-right: 34px;
}
.purchase-dialog img { width: 88px; height: 88px; margin: 0; object-fit: contain; }
.purchase-dialog-copy { min-width: 0; }
.purchase-dialog .eyebrow { margin: 0 0 5px; }
.purchase-dialog h2 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font: 700 23px/1.12 Georgia, serif;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.purchase-dialog #purchase-description {
  display: -webkit-box;
  overflow: hidden;
  margin: 6px 0 0;
  color: var(--shop-muted);
  font-size: 12px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.purchase-summary { width: 100%; margin: 0; }
.purchase-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--shop-line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .025);
}
.purchase-summary dt { color: var(--shop-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.purchase-summary dd { margin: 0; font-size: 12px; font-weight: 800; }
.purchase-summary dd strong { color: var(--shop-gold-bright); font-size: 18px; }
.dialog-message { min-height: 0; margin: 0 !important; color: var(--shop-danger) !important; font-size: 12px; line-height: 1.4; }
.dialog-message:empty { display: none; }
.purchase-dialog.is-processing .dialog-message { color: var(--shop-gold-bright) !important; }
.purchase-dialog .dialog-actions { width: 100%; justify-content: flex-end; margin-top: 2px; }
.purchase-dialog .dialog-actions .button { min-width: 120px; }
.purchase-dialog.is-processing #purchase-confirm { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.purchase-dialog.is-processing #purchase-confirm::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; border: 2px solid rgba(28, 18, 5, .28); border-top-color: #1c1205; border-radius: 50%; animation: spin .65s linear infinite; }
.purchase-dialog.is-processing .dialog-close:disabled,
.purchase-dialog.is-processing .button.secondary:disabled { cursor: wait; opacity: .32; }
.purchase-success-dialog { width: min(500px, calc(100% - 28px)); }
.purchase-success-dialog > section { position: relative; display: grid; justify-items: center; padding: 30px; text-align: center; }
.purchase-success-mark { display: grid; width: 58px; height: 58px; margin-bottom: 13px; place-items: center; border: 1px solid rgba(147, 227, 174, .42); border-radius: 50%; color: var(--shop-success); background: rgba(68, 169, 103, .12); font-size: 25px; font-weight: 900; }
.purchase-success-dialog h2 { margin: 2px 0 7px; font: 700 29px Georgia, serif; }
.purchase-success-dialog > section > p:not(.eyebrow) { margin: 0; color: var(--shop-muted); font-size: 12px; line-height: 1.5; }
.purchase-success-item { width: 100%; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 13px; margin-top: 20px; padding: 12px; border: 1px solid var(--shop-line); border-radius: 12px; background: rgba(255, 255, 255, .025); text-align: left; }
.purchase-success-item img { width: 72px; height: 72px; object-fit: contain; }
.purchase-success-item div { min-width: 0; display: grid; gap: 5px; }
.purchase-success-item strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.purchase-success-item small { color: var(--shop-muted); font-size: 11px; }
.purchase-success-dialog dl { width: 100%; margin: 14px 0 20px; }
.purchase-success-dialog dl div { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-top: 1px solid var(--shop-line); }
.purchase-success-dialog dt { color: var(--shop-muted); font-size: 11px; }
.purchase-success-dialog dd { margin: 0; color: var(--shop-gold-bright); font-size: 12px; font-weight: 850; }
.purchase-success-dialog .dialog-actions { width: 100%; }
.purchase-success-dialog .dialog-actions > * { flex: 1; }
.topup-prompt-dialog { width: min(460px, calc(100% - 28px)); }
.topup-prompt-dialog > section { display: grid; gap: 12px; padding: 26px; }
.topup-prompt-dialog h2 { margin: 0; font: 700 28px Georgia, serif; }
.topup-prompt-dialog p:not(.eyebrow) { margin: 0 0 6px; color: var(--shop-muted); font-size: 13px; line-height: 1.55; }
.topup-prompt-dialog .dialog-actions { justify-content: flex-end; }
.shop-toast { position: fixed; z-index: 70; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); max-width: 420px; padding: 13px 16px; border: 1px solid rgba(232, 185, 87, .32); border-radius: 11px; background: #172131; box-shadow: 0 16px 50px rgba(0, 0, 0, .48); }

.topup-page {
  min-height: calc(100vh - 152px);
  color: var(--shop-ink);
}
.topup-panel {
  position: relative;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 12px 0 max(36px, env(safe-area-inset-bottom));
}
.topup-intent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 14px;
  border: 1px solid rgba(232, 185, 87, .3);
  border-radius: 12px;
  background: rgba(232, 185, 87, .08);
}
.topup-intent-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; color: #171006; background: var(--shop-gold); font-size: 24px; font-weight: 900; }
.topup-intent > div { display: grid; gap: 3px; min-width: 0; }
.topup-intent .eyebrow { margin: 0; }
.topup-intent strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topup-intent small { color: var(--shop-muted); line-height: 1.4; }
.topup-text-button { min-height: 40px; padding: 0 8px; border: 0; color: var(--shop-muted); background: transparent; font-size: 11px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.topup-message-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topup-message { min-height: 20px; margin: 0; color: var(--shop-muted); font-size: 12px; line-height: 1.5; }
.topup-message.is-error { color: var(--shop-danger); }
.topup-retry { min-width: 100px; flex: 0 0 auto; }
.topup-region-advisory { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 12px; margin-top: 18px; padding: 15px; border: 1px solid rgba(232, 185, 87, .42); border-radius: 12px; background: linear-gradient(120deg, rgba(232, 185, 87, .12), rgba(69, 112, 151, .06)), var(--shop-surface-raised); }
.topup-region-advisory[hidden] { display: none !important; }
.topup-region-advisory > span { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(232, 185, 87, .62); border-radius: 50%; color: #171006; background: var(--shop-gold); font-size: 17px; font-weight: 900; }
.topup-region-advisory > div { min-width: 0; }
.topup-region-advisory .eyebrow { margin: 0 0 3px; }
.topup-region-advisory strong { color: var(--shop-gold-bright); font: 700 17px/1.2 Georgia, serif; }
.topup-region-advisory p:not(.eyebrow) { margin: 6px 0 0; color: var(--shop-ink); font-size: 12px; line-height: 1.55; }
.topup-region-advisory small { display: block; margin-top: 5px; color: var(--shop-muted); font-size: 10px; line-height: 1.5; }
.topup-ready { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 18px; padding: 14px; border: 1px solid rgba(68, 169, 103, .3); border-radius: 12px; background: rgba(68, 169, 103, .1); }
.topup-ready > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #07130b; background: var(--shop-success); font-size: 18px; font-weight: 900; }
.topup-ready > div { display: grid; gap: 3px; }
.topup-ready small { color: var(--shop-muted); line-height: 1.4; }
.topup-package-section { margin-top: 0; }
.topup-intent:not([hidden]) ~ .topup-package-section,
.topup-message-row:not([hidden]) ~ .topup-package-section,
.topup-region-advisory:not([hidden]) ~ .topup-package-section,
.topup-ready:not([hidden]) ~ .topup-package-section { margin-top: 18px; }
.topup-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.topup-section-heading h2 { margin: 0; font: 700 24px Georgia, serif; }
.topup-section-heading small { color: var(--shop-muted); text-align: right; }
.topup-packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.topup-package {
  position: relative;
  display: flex;
  min-height: 225px;
  flex-direction: column;
  padding: 16px;
  border: 1px solid var(--shop-line);
  border-radius: 13px;
  background: var(--shop-surface-raised);
}
.topup-package.is-recommended { border-color: rgba(232, 185, 87, .58); box-shadow: 0 12px 34px rgba(168, 104, 20, .13); }
.topup-package-badge { align-self: flex-start; min-height: 23px; margin-bottom: 10px; padding: 5px 8px; border: 1px solid rgba(232, 185, 87, .32); border-radius: 999px; color: var(--shop-gold-bright); background: rgba(232, 185, 87, .08); font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.topup-package h3 { margin: 0; color: var(--shop-gold-bright); font: 700 34px/1 Georgia, serif; }
.topup-package > p { margin: 6px 0 0; color: var(--shop-muted); font-size: 11px; }
.topup-package-value { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--shop-line); font-size: 11px; }
.topup-package-value strong { color: var(--shop-ink); }
.topup-package-status { display: block; min-height: 34px; margin: 10px 0; color: var(--shop-muted); font-size: 10px; line-height: 1.4; }
.topup-package .button { width: 100%; margin-top: auto; padding-right: 8px; padding-left: 8px; font-size: 11px; }
.topup-checkout { display: grid; grid-template-columns: minmax(220px, .82fr) minmax(0, 1.18fr); gap: 24px; margin-top: 24px; padding: 20px; border: 1px solid var(--shop-line); border-radius: 15px; background: var(--shop-surface-raised); }
.topup-checkout-visual { display: grid; align-content: center; justify-items: center; gap: 12px; min-width: 0; }
.topup-checkout-visual img { display: block; width: min(100%, 286px); aspect-ratio: 1; padding: 10px; border: 1px solid rgba(232, 185, 87, .38); border-radius: 13px; background: #fff; object-fit: contain; }
.topup-checkout-visual p { margin: 0; color: var(--shop-muted); font-size: 10px; line-height: 1.45; text-align: center; }
.topup-open-payment { width: 100%; text-align: center; }
.topup-checkout-details { min-width: 0; }
.topup-state { display: inline-flex; min-height: 27px; align-items: center; padding: 0 10px; border: 1px solid rgba(232, 185, 87, .3); border-radius: 999px; color: var(--shop-gold-bright); background: rgba(232, 185, 87, .08); font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.topup-checkout-details h2 { margin: 14px 0 12px; font: 700 25px Georgia, serif; }
.topup-checkout-details dl { margin: 0; }
.topup-checkout-details dl div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 10px 0; border-top: 1px solid var(--shop-line); }
.topup-checkout-details dt { color: var(--shop-muted); font-size: 11px; }
.topup-checkout-details dd { overflow-wrap: anywhere; margin: 0; font-size: 11px; font-weight: 800; text-align: right; }
.topup-checkout-details > p { color: var(--shop-muted); font-size: 10px; line-height: 1.5; }
.topup-fresh { width: 100%; margin-top: 6px; font-size: 11px; }

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 82% -10%, rgba(190, 125, 32, .12), transparent 32rem),
    linear-gradient(150deg, #faf7f0 0%, var(--shop-bg) 52%, #eee7da 100%);
}
:root[data-theme="light"] .shop-header { background: rgba(250, 248, 243, .92); }
:root[data-theme="light"] .shop-brand img { box-shadow: 0 6px 22px rgba(75, 55, 24, .16); }
:root[data-theme="light"] .shop-close,
:root[data-theme="light"] .dialog-close,
:root[data-theme="light"] .sidebar-close,
:root[data-theme="light"] .button.secondary,
:root[data-theme="light"] .page-button,
:root[data-theme="light"] .page-control { background: rgba(255, 255, 255, .72); }
:root[data-theme="light"] .shop-spinner { border-color: rgba(35, 49, 66, .12); border-top-color: var(--shop-gold); }
:root[data-theme="light"] select,
:root[data-theme="light"] input[type="search"],
:root[data-theme="light"] .shop-search,
:root[data-theme="light"] .shop-sort select,
:root[data-theme="light"] .sidebar-header,
:root[data-theme="light"] .category-toggle { background: var(--shop-surface); }
:root[data-theme="light"] .shop-sidebar { background: rgba(255, 253, 248, .96); scrollbar-color: rgba(35, 49, 66, .22) transparent; }
:root[data-theme="light"] .category-count,
:root[data-theme="light"] .product-details span { background: rgba(35, 49, 66, .06); }
:root[data-theme="light"] .product-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(250, 247, 240, .98));
  box-shadow: 0 10px 28px rgba(75, 55, 24, .08);
}
:root[data-theme="light"] .product-card.is-featured { box-shadow: 0 17px 40px rgba(139, 88, 18, .18), inset 0 0 0 1px rgba(185, 121, 22, .08); }
:root[data-theme="light"] .product-card.is-popular:not(.is-featured) { box-shadow: 0 15px 34px rgba(173, 68, 20, .12); }
:root[data-theme="light"] .product-image {
  border-bottom-color: rgba(35, 49, 66, .08);
  background:
    radial-gradient(circle at 50% 48%, rgba(154, 104, 23, .1), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .72), transparent);
}
:root[data-theme="light"] .product-image img { filter: drop-shadow(0 10px 16px rgba(75, 55, 24, .18)); }
:root[data-theme="light"] .product-stock { background: rgba(255, 253, 248, .92); }
:root[data-theme="light"] .product-badge { color: var(--shop-gold-bright); background: rgba(255, 253, 248, .96); }
:root[data-theme="light"] .product-badge.is-featured { color: #241503; background: linear-gradient(135deg, #ffe29a, #dca23e); }
:root[data-theme="light"] .product-badge.is-marketing { color: #fff; background: #714095; }
:root[data-theme="light"] .product-badge.is-new { color: #071624; background: linear-gradient(135deg, #b7e2ff, #72aaf2); }
:root[data-theme="light"] .product-badge.is-popular { color: #260e03; background: linear-gradient(135deg, #ffc27f, #f06b43); }
:root[data-theme="light"] .product-detail-dialog,
:root[data-theme="light"] .purchase-dialog,
:root[data-theme="light"] .purchase-success-dialog,
:root[data-theme="light"] .topup-prompt-dialog { background: var(--shop-surface-raised); box-shadow: 0 30px 90px rgba(51, 39, 19, .26); }
:root[data-theme="light"] .shop-tabs { background: rgba(250, 248, 243, .94); }
:root[data-theme="light"] .purchase-summary div { background: rgba(154, 104, 23, .04); }
:root[data-theme="light"] .product-detail-dialog::backdrop,
:root[data-theme="light"] .purchase-dialog::backdrop,
:root[data-theme="light"] .purchase-success-dialog::backdrop,
:root[data-theme="light"] .topup-prompt-dialog::backdrop { background: rgba(35, 39, 45, .48); }
:root[data-theme="light"] .purchase-success-item,
:root[data-theme="light"] .recent-product { background: rgba(255, 255, 255, .72); }
:root[data-theme="light"] .shop-toast { background: var(--shop-surface-raised); box-shadow: 0 16px 44px rgba(51, 39, 19, .2); }
:root[data-theme="light"] .category-backdrop { background: rgba(35, 39, 45, .42); }

/* Embedded WebViews share GPU memory with Unity. Keep browser visuals intact while
   reducing Android/iOS tile allocation and off-screen raster work. */
:root[data-embedded="true"] body {
  background: var(--shop-bg);
  overscroll-behavior-y: contain;
}
:root[data-embedded="true"] .shop-header,
:root[data-embedded="true"] .shop-tabs {
  background: #090e16;
  backdrop-filter: none;
}
:root[data-theme="light"][data-embedded="true"] .shop-header,
:root[data-theme="light"][data-embedded="true"] .shop-tabs { background: var(--shop-surface); }
:root[data-embedded="true"] .shop-brand img,
:root[data-embedded="true"] .product-card,
:root[data-embedded="true"] .product-card.is-featured,
:root[data-embedded="true"] .product-card.is-popular:not(.is-featured),
:root[data-embedded="true"] .product-card.is-recommended,
:root[data-embedded="true"] .topup-package.is-recommended { box-shadow: none; }
:root[data-embedded="true"] .product-card {
  content-visibility: auto;
  contain: layout paint style;
  contain-intrinsic-size: auto 282px;
  transition: none;
}
:root[data-embedded="true"] .product-card::after { display: none; }
:root[data-embedded="true"] .product-image { background: var(--shop-surface-soft); }
:root[data-embedded="true"] .product-image img {
  filter: none;
  transition: none;
}
:root[data-embedded="true"] .purchase-dialog::backdrop,
:root[data-embedded="true"] .product-detail-dialog::backdrop,
:root[data-embedded="true"] .purchase-success-dialog::backdrop,
:root[data-embedded="true"] .topup-prompt-dialog::backdrop { backdrop-filter: none; }
:root[data-embedded="true"] .button,
:root[data-embedded="true"] .shop-close,
:root[data-embedded="true"] .shop-topup-trigger,
:root[data-embedded="true"] .shop-tabs button,
:root[data-embedded="true"] .category-button { transition: none; }

button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--shop-gold-bright); outline-offset: 2px; }
.button:active, .shop-close:active, .shop-topup-trigger:active, .shop-tabs button:active, .dialog-close:active, .sidebar-close:active, .category-button:active, .category-toggle:active, .shop-highlights button:active, .page-button:active, .page-control:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
  .button:not(:disabled):hover { filter: brightness(1.08); }
  .shop-close:hover, .dialog-close:hover, .sidebar-close:hover { border-color: var(--shop-line-strong); background: rgba(255, 255, 255, .07); }
  .shop-topup-trigger:hover { border-color: rgba(232, 185, 87, .56); background: rgba(232, 185, 87, .13); }
  .category-button:hover { color: var(--shop-ink); background: rgba(255, 255, 255, .045); }
  .product-card:hover { transform: translateY(-3px); border-color: rgba(232, 185, 87, .42); box-shadow: 0 16px 38px rgba(0, 0, 0, .24); }
  .product-card.is-featured:hover, .product-card.is-recommended:hover { border-color: rgba(255, 213, 121, .92); box-shadow: 0 21px 52px rgba(190, 122, 25, .3); }
  .product-card:hover .product-image img { transform: scale(1.045); filter: drop-shadow(0 15px 22px rgba(0, 0, 0, .42)); }
  .page-button:not(:disabled):hover, .page-control:not(:disabled):hover { border-color: var(--shop-line-strong); color: var(--shop-ink); background: rgba(255, 255, 255, .055); }
}

@media (max-width: 1100px) {
  .shop-layout { grid-template-columns: 205px minmax(0, 1fr); gap: 18px; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

@media (max-width: 900px) {
  body.category-sheet-open { overflow: hidden; }
  .shop-layout { display: block; }
  .shop-sidebar {
    position: fixed;
    z-index: 62;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: min(78dvh, 680px);
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
    background: #111a27;
    box-shadow: 0 -24px 80px rgba(0, 0, 0, .6);
    transform: translateY(105%);
    visibility: hidden;
    transition: transform 220ms var(--shop-ease-out), visibility 0s linear 220ms;
  }
  .category-sheet-open .shop-sidebar { transform: translateY(0); visibility: visible; transition-delay: 0s; }
  .sidebar-header { padding: 15px 18px 13px; }
  .sidebar-close { display: grid; }
  .category-list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 12px 14px; }
  .category-button { min-height: 46px; }
  .category-backdrop {
    position: fixed;
    z-index: 61;
    inset: 0;
    display: block;
    border: 0;
    background: rgba(2, 5, 9, .7);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }
  .category-sheet-open .category-backdrop { opacity: 1; pointer-events: auto; }
  .category-toggle {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid var(--shop-line-strong);
    border-radius: 9px;
    color: var(--shop-ink);
    background: #111a27;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
  }
  .shop-search { width: min(320px, 45vw); }
}

@media (max-width: 640px) {
  .shop-header { min-height: 60px; gap: 8px; padding-right: max(10px, env(safe-area-inset-right)); padding-left: max(10px, env(safe-area-inset-left)); }
  .shop-tabs { top: 60px; min-height: 44px; padding-right: max(10px, env(safe-area-inset-right)); padding-left: max(10px, env(safe-area-inset-left)); }
  .shop-tabs button { min-width: 118px; min-height: 43px; padding: 0 14px; font-size: 11px; }
  .shop-brand img { width: 36px; height: 36px; }
  .shop-brand small { display: none; }
  .shop-brand strong { font-size: 16px; }
  .shop-wallet span { font-size: 9px; }
  .shop-wallet strong { font-size: 17px; }
  .shop-wallet { gap: 7px; }
  .shop-orders-link { min-height: 40px; padding: 0 6px; font-size: 10px; }
  .shop-topup-trigger { min-height: 40px; padding: 0 10px; font-size: 11px; }
  .shop-close { width: 38px; height: 38px; }
  main { padding: 12px max(10px, env(safe-area-inset-right)) max(36px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .shop-toolbar { display: grid; min-height: 0; gap: 11px; margin-bottom: 12px; }
  .catalog-heading strong { font-size: 22px; }
  .catalog-actions { width: 100%; flex-wrap: wrap; }
  .category-toggle { flex: 0 0 auto; }
  .shop-search { width: auto; min-width: 150px; flex: 1; }
  .shop-sort { flex: 1 1 100%; }
  .shop-sort select { width: 100%; max-width: none; }
  .shop-highlights { margin-bottom: 12px; padding-bottom: 2px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .product-card { min-height: 282px; border-radius: 12px; }
  .product-image { min-height: 106px; padding: 12px; }
  .product-image img { width: 78px; height: 78px; max-height: 78px; }
  .product-body { padding: 11px; }
  .product-body h2 { min-height: 36px; font-size: 13px; }
  .product-body p { min-height: 32px; margin: 5px 0 9px; font-size: 10px; -webkit-line-clamp: 2; }
  .product-details { min-height: 18px; gap: 3px; margin-bottom: 7px; }
  .product-details span { padding: 2px 5px; font-size: 7px; }
  .product-badges { top: 7px; left: 7px; max-width: calc(100% - 45px); gap: 3px; }
  .product-badge { max-width: 92px; padding: 4px 6px; font-size: 7px; }
  .product-stock { top: 7px; right: 7px; padding: 4px 6px; font-size: 8px; }
  .product-price { align-items: end; }
  .product-price strong { font-size: 17px; }
  .product-price span { font-size: 8px; }
  .product-buy { min-height: 38px; padding: 8px; font-size: 12px; }
  .shop-pagination { justify-content: space-between; gap: 10px; margin-top: 18px; }
  .page-numbers { display: none; }
  .page-summary { display: block; }
  .page-control { min-width: 94px; min-height: 40px; }
  .recently-viewed { margin-top: 28px; padding-top: 20px; }
  .recently-viewed-grid { grid-template-columns: 1fr; }
  .purchase-success-dialog > section { padding: 26px 18px 20px; }
  .product-detail-dialog > section { display: block; }
  .product-detail-preview { min-height: 230px; max-height: 42dvh; padding: 18px; border-right: 0; border-bottom: 1px solid var(--shop-line); }
  .product-detail-preview img { height: min(36dvh, 300px); }
  .product-detail-content { padding: 20px 16px 16px; }
  .product-detail-identity h2 { font-size: 21px; }
  #product-detail-description { margin: 15px 0; font-size: 12px; }
  .product-detail-purchase { position: sticky; bottom: -1px; margin: 18px -16px -16px; padding: 14px 16px max(14px, env(safe-area-inset-bottom)); background: var(--shop-surface-raised); }
  .purchase-success-dialog .dialog-actions { display: grid; grid-template-columns: 1fr; }
  .purchase-dialog form { gap: 12px; padding: 18px 16px 16px; }
  .purchase-dialog-product { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding-right: 30px; }
  .purchase-dialog img { width: 72px; height: 72px; }
  .purchase-dialog h2 { font-size: 20px; }
  .purchase-dialog #purchase-description { -webkit-line-clamp: 1; }
  .purchase-dialog .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .purchase-dialog .dialog-actions .button { width: 100%; min-width: 0; }
  .topup-page { min-height: calc(100vh - 128px); }
  .topup-panel { padding: 6px 0 max(28px, env(safe-area-inset-bottom)); }
  .topup-intent { grid-template-columns: auto minmax(0, 1fr); }
  .topup-intent .topup-text-button { grid-column: 2; justify-self: start; min-height: 34px; padding: 0; }
  .topup-ready { grid-template-columns: auto minmax(0, 1fr); }
  .topup-ready .button { grid-column: 1 / -1; width: 100%; }
  .topup-section-heading { align-items: start; }
  .topup-packages { grid-template-columns: 1fr; }
  .topup-package { min-height: 180px; }
  .topup-checkout { grid-template-columns: 1fr; gap: 18px; padding: 14px; }
  .topup-checkout-visual img { width: min(100%, 310px); }
}

@media (max-width: 370px) {
  .product-detail-preview { min-height: 190px; }
  .product-detail-purchase { grid-template-columns: 1fr; align-items: stretch; }
  .product-detail-purchase .button { width: 100%; }
  .purchase-dialog-product { grid-template-columns: 64px minmax(0, 1fr); }
  .purchase-dialog img { width: 64px; height: 64px; }
  .purchase-dialog h2 { font-size: 18px; }
  .purchase-dialog #purchase-description { display: none; }
  .shop-brand strong { display: none; }
  .shop-orders-link { display: none; }
  .shop-wallet-balance > span { display: none; }
  .catalog-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .shop-sort { grid-column: 1 / -1; }
  .category-toggle { padding: 0 10px; }
  .category-toggle svg { display: none; }
  .product-grid { gap: 7px; }
  .product-card { min-height: 252px; }
  .product-image { min-height: 96px; }
  .product-image img { width: 68px; height: 68px; max-height: 68px; }
  .product-body { padding: 9px; }
  .product-body p { display: none; }
  .product-details { margin-top: 3px; }
  .product-price { display: grid; gap: 1px; }
  .page-control { min-width: 82px; padding: 0 8px; font-size: 11px; }
}

@media (max-height: 650px) {
  .shop-header { min-height: 54px; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; }
  .shop-tabs { top: 54px; min-height: 40px; }
  .shop-tabs button { min-height: 39px; }
  .shop-brand img { width: 34px; height: 34px; }
  .shop-brand strong { font-size: 16px; }
  .shop-wallet strong { font-size: 17px; }
  .shop-topup-trigger, .shop-orders-link { min-height: 36px; }
  .shop-close { width: 36px; height: 36px; }
  main { padding-top: 10px; }
  .shop-toolbar { min-height: 40px; gap: 10px; margin-bottom: 6px; }
  .catalog-heading strong { font-size: 20px; }
  .catalog-heading small { font-size: 9px; }
  .category-toggle, .shop-search, .shop-sort select { min-height: 36px; }
  .shop-highlights { margin-bottom: 8px; }
  .shop-highlights button { min-height: 28px; padding: 0 10px; font-size: 9px; }
  .product-card { min-height: 236px; }
  .product-image { min-height: 88px; padding: 9px; }
  .product-image img { width: 70px; height: 70px; max-height: 70px; }
  .product-body { padding: 10px; }
  .product-body h2 { min-height: 34px; font-size: 13px; }
  .product-body p { display: none; }
  .product-details { margin-bottom: 5px; }
  .product-price strong { font-size: 17px; }
  .product-buy { min-height: 34px; margin-top: 6px; padding: 7px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}