/* Update storefront: mobile-first. Shared admin styles are not changed. */
:root {
  --bg: #f3f5f8;
  --surface: #ffffff;
  --soft: #eef2f7;
  --text: #172538;
  --muted: #647287;
  --line: #e1e7ef;
  --blue: #245ddb;
  --blue-soft: #eaf0ff;
  --hero: #102438;
  --hero-muted: #ced8e3;
  --accent: #80b6ff;
  --shell-width: 1120px;
  --space: 16px;
  --safe-top: max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px));
  color: var(--text);
  background: var(--bg);
  /* Keep the viewport center stable between short pages and the long catalog. */
  scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable) {
  :root { overflow-y: scroll; }
}
:root[data-theme=dark] {
  --bg: #101923; --surface: #192532; --soft: #233243; --text: #edf3fa;
  --muted: #a9b7c8; --line: #314154; --blue: #94baff; --blue-soft: #233b5a;
  --hero: #0c1c2c; --hero-muted: #ced8e3; --accent: #91c0ff;
}
body.buyer-app { background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; }
.storefront { max-width: var(--shell-width); min-height: 100dvh; margin: auto; }
.buyer-app .content { max-width: none; padding: 0 var(--space) calc(112px + var(--safe-bottom)); }
.buyer-app .content:focus { outline: none; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(16px + var(--safe-top)) var(--space) 20px; }
.app-header .brand { gap: 8px; min-height: 44px; }
.app-header .logo { width: 36px; height: 36px; border-radius: 10px; }
.app-header .logo .icon { width: 26px; height: 26px; }
.app-header .brand strong { font-size: 26px; line-height: 1; font-weight: 750; letter-spacing: -1px; }
.brand-dot { color: var(--blue); }
.app-header .brand small { margin-top: 5px; font-size: 10px; letter-spacing: .2px; text-transform: none; }
.wallet-link { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-height: 44px; }
.wallet-link small { display: block; color: var(--muted); font-size: 10px; margin-bottom: 2px; }
.wallet-link strong { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
.wallet-link .icon { width: 24px; height: 24px; padding: 4px; border-radius: 7px; background: var(--blue-soft); color: var(--blue); }
.catalog-hero { position: relative; isolation: isolate; overflow: hidden; border-radius: 18px; background: var(--hero); color: #fff; margin-bottom: 24px; }
.hero-image { position: absolute; z-index: -2; width: 67%; height: 100%; right: 0; object-fit: cover; object-position: 63% center; opacity: .6; -webkit-mask-image: linear-gradient(90deg,transparent,#000 28%); mask-image: linear-gradient(90deg,transparent,#000 28%); }
.catalog-hero:after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,var(--hero) 10%,#102438ed 35%,#10243821 100%); }
.hero-copy { padding: 20px 20px 12px; }
.hero-eyebrow { display: block; color: var(--hero-muted); font-size: 10px; font-weight: 550; letter-spacing: .8px; margin-bottom: 8px; }
.hero-copy h1 { font-size: clamp(25px,6.6vw,36px); line-height: 1.12; font-weight: 730; letter-spacing: -1px; }
.hero-copy h1>span { color: var(--accent); }
.hero-copy p { color: var(--hero-muted); margin-top: 8px; font-size: 12px; line-height: 1.55; }
.hero-help { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding-top: 8px; font-size: 12px; font-weight: 600; color: #fff; }
.hero-help .icon { width: 17px; height: 17px; color: var(--accent); }
.hero-caption { display: none; }
.buyer-app .compact-continuation { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); gap: 10px; margin-bottom: 24px; }
.compact-continuation strong { font-size: 13px; }
.compact-continuation p { font-size: 11px; line-height: 1.5; }
.compact-continuation .round-icon { width: 32px; height: 32px; background: var(--blue-soft); }
.compact-continuation>div:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.catalog-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.catalog-heading h2 { font-size: 18px; letter-spacing: -.5px; }
.catalog-heading>span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.brand-filters { display: flex; gap: 8px; overflow-x: auto; padding: 4px 3px 8px; margin: -4px -3px 8px; scrollbar-width: thin; }
.brand-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 0 auto; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13px; font-weight: 550; }
.brand-chip .icon { width: 15px; height: 15px; }
.brand-chip.active { background: var(--text); color: var(--surface); border-color: var(--text); }
.search-row { display: flex; gap: 8px; }
.search-row .search { flex: 1; min-width: 0; height: 48px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; box-shadow: none; padding: 0 12px; gap: 8px; }
.buyer-app .search input { font-size: 16px; }
.search input::placeholder { color: var(--muted); opacity: 1; }
.search-row .search input { font-size: 16px; padding: 0; line-height: normal; }
.search-row .search input::placeholder { font-size: inherit; }
.search-row .search:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.filter-button { display: grid; place-items: center; min-width: 48px; height: 48px; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.filter-button.selected { background: var(--blue-soft); color: var(--blue); border-color: var(--blue); }
.filter-dot { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.filter-group { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.filter-group legend { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.price-range { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.price-range .field { min-width: 0; margin: 0; }
.price-range input { width: 100%; min-width: 0; font-size: 16px; }
.filter-options { display: grid; gap: 8px; }
.filter-choice { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; cursor: pointer; }
.filter-choice:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.filter-choice input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--blue); }
.filter-actions { display: flex; gap: 8px; position: sticky; bottom: -22px; background: var(--surface); padding-block: 12px; }
.filter-actions .btn { flex: 1; padding-inline: 10px; }
.catalog-tabs { display: flex; gap: 24px; margin: 8px 0 16px; border-bottom: 1px solid var(--line); }
.catalog-tabs button { position: relative; min-height: 44px; padding: 8px 0 12px; white-space: nowrap; border: 0; color: var(--muted); background: transparent; font-size: 12px; }
.catalog-tabs button.active { color: var(--blue); font-weight: 650; }
.catalog-tabs button.active:after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--blue); }
.buyer-app .product-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
.visual-card { display: flex; gap: 12px; padding: 12px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; transition: border-color .18s,box-shadow .18s; }
.card-image { position: relative; align-self: stretch; width: 96px; flex: 0 0 96px; min-height: 144px; border-radius: 10px; overflow: hidden; background: var(--soft); }
.card-image:after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,#10243850,transparent 50%); pointer-events: none; }
.card-image img { width: 100%; height: 100%; position: absolute; object-fit: cover; object-position: 55% center; }
.image-label { position: absolute; z-index: 1; top: 8px; left: 8px; color: #fff; background: #172538e8; border-radius: 5px; padding: 4px 6px; font-size: 10px; font-weight: 550; }
.owned-mark { position: absolute; z-index: 1; right: 8px; bottom: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--green); background: var(--surface); }
.owned-mark .icon { width: 16px; height: 16px; }
.card-body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 2px 0; }
.type-caption { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 10px; line-height: 1.4; margin-bottom: 6px; }
.type-caption .icon { width: 12px; height: 12px; }
.card-body h3 { font-size: 16px; font-weight: 650; line-height: 1.3; letter-spacing: -.4px; overflow-wrap: anywhere; }
.buyer-app .card-body .variant { color: var(--muted); min-height: 0; font-size: 12px; line-height: 1.45; margin-top: 5px; margin-bottom: 12px; overflow-wrap: anywhere; }
.visual-card-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 4px 8px; margin-top: auto; }
.card-price-stack { display: flex; flex-direction: column; gap: 3px; }
.card-price-stack>strong { font-size: 21px; line-height: 1.1; letter-spacing: -.7px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.card-price-stack>span { color: var(--muted); font-size: 10px; }
.card-price-stack .old-price { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.old-price del { font-size: 11px; }
.saving { color: var(--green); background: var(--green-soft); padding: 2px 4px; border-radius: 4px; font-size: 10px; }
.card-price-stack:has(.old-price) { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 6px; }
.card-price-stack:has(.old-price)>strong { grid-row: 1; grid-column: 1; }
.card-price-stack:has(.old-price)>.old-price { grid-row: 1; grid-column: 2; margin: 0; white-space: nowrap; }
.card-price-stack:has(.old-price)>span:last-child { grid-column: 1 / -1; }
@media (min-width:360px) and (max-width:599px) {
}
.card-open { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px; margin-right: -4px; color: var(--blue); font-size: 11px; font-weight: 650; }
.card-open .icon { width: 15px; height: 15px; }
.ownership { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--green); margin-top: 10px; }
.ownership .icon { width: 12px; height: 12px; }
.ownership.pending { color: var(--amber); }
.selection-help { display: flex; align-items: center; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); margin-top: 12px; }
.selection-help .round-icon { background: var(--blue-soft); color: var(--blue); width: 40px; height: 40px; }
.selection-help>span:nth-child(2) { flex: 1; min-width: 0; }
.selection-help strong { display: block; font-size: 13px; font-weight: 650; line-height: 1.4; }
.selection-help>span>span { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; margin-top: 4px; }
.selection-help>.icon { width: 18px; color: var(--blue); }
.buyer-nav { --nav-padding: 6px; --nav-gap: 4px; position: fixed; z-index: 30; bottom: calc(12px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); width: calc(100% - 24px); max-width: 480px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--nav-gap); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: var(--nav-padding); box-shadow: 0 8px 32px #08142624; }
.nav-indicator { position: absolute; pointer-events: none; top: var(--nav-padding); bottom: var(--nav-padding); left: var(--nav-padding); width: calc((100% - 2 * var(--nav-padding) - 3 * var(--nav-gap)) / 4); border-radius: 12px; background: var(--blue-soft); transform: translateX(0); }
.buyer-nav[data-section=library] .nav-indicator { transform: translateX(calc(100% + var(--nav-gap))); }
.buyer-nav[data-section=wallet] .nav-indicator { transform: translateX(calc(200% + 2 * var(--nav-gap))); }
.buyer-nav[data-section=help] .nav-indicator { transform: translateX(calc(300% + 3 * var(--nav-gap))); }
.buyer-nav a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px 4px; min-width: 0; min-height: 52px; color: var(--muted); font-size: 10px; font-weight: 550; border-radius: 12px; }
.buyer-nav a.active { color: var(--blue); }
.buyer-nav .icon { width: 21px; height: 21px; }
.buyer-nav a.active .icon { stroke-width: 2; }
.buyer-app .back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0; margin: 0 0 12px; font-size: 13px; color: var(--blue); font-weight: 600; }
.buyer-app .detail-page { max-width: 760px; margin: auto; padding-bottom: calc(140px + var(--safe-bottom)); }
.product-cover { position: relative; height: 168px; border-radius: 16px; overflow: hidden; background: var(--soft); margin-bottom: 20px; }
.product-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-cover>span { position: absolute; left: 12px; bottom: 12px; background: #172538ee; color: #fff; font-size: 12px; border-radius: 6px; padding: 5px 10px; }
.overline { font-size: 11px; letter-spacing: .8px; line-height: 1.5; color: var(--blue); font-weight: 600; }
.product-intro .overline { margin-bottom: 8px; }
.product-intro h1 { font-size: 28px; letter-spacing: -.9px; }
.product-variant { font-size: 15px; margin-top: 8px; }
.product-intro>p:last-child { color: var(--muted); font-size: 14px; line-height: 1.65; margin-top: 12px; }
.included-block { display: flex; align-items: flex-start; gap: 12px; padding: 20px 0; margin-top: 4px; }
.included-block .round-icon { width: 36px; height: 36px; background: var(--surface); color: var(--blue); border: 1px solid var(--line); }
.included-block h2 { font-size: 14px; letter-spacing: 0; margin-bottom: 5px; }
.included-block p { color: var(--muted); font-size: 13px; }
.compatibility-block { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin: 0 0 24px; }
.compatibility-block .info-row { margin: 0; }
.compatibility-block .info-row>.icon { color: var(--blue); }
.compatibility-block .info-row strong { font-size: 14px; display: block; margin-bottom: 6px; }
.compatibility-block .info-row p { font-size: 13px; line-height: 1.65; color: var(--muted); }
.compatibility-help { display: flex; align-items: center; gap: 8px; min-height: 44px; border: 0; padding: 10px 0 0; background: transparent; color: var(--blue); font-size: 12px; font-weight: 550; text-align: left; }
.compatibility-help .icon { width: 16px; height: 16px; }
.product-purchase { padding-bottom: 20px; }
.purchase-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.purchase-summary strong { display: block; margin-top: 6px; font-size: 28px; letter-spacing: -.8px; }
.buyer-app .stepper { border-top: 1px solid var(--line); padding-top: 16px; }
.buyer-app .stepper-controls { background: var(--surface); border-color: var(--line); }
.buyer-app .stepper-controls button { min-width: 44px; min-height: 44px; }
.buyer-app .check { font-size: 13px; line-height: 1.65; padding: 8px 0; }
.buyer-app .check input { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--blue); }
.check a { text-decoration: underline; text-underline-offset: 3px; }
.checkout-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.6; color: var(--muted); margin-top: 8px; }
.checkout-note .icon { width: 16px; height: 16px; margin-top: 2px; }
.buyer-app .purchase-action { position: fixed; z-index: 35; bottom: 0; left: 50%; transform: translateX(-50%); max-width: var(--shell-width); width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); background: var(--surface); margin: 0; padding: 12px var(--space) calc(12px + var(--safe-bottom)); }
.purchase-action>div { min-width: 0; }
.purchase-action>div>span { display: block; font-size: 10px; color: var(--muted); margin-bottom: 4px; max-width: 128px; }
.purchase-action>div>strong { display: block; font-size: 22px; letter-spacing: -.7px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.buyer-app .purchase-action .btn { min-height: 52px; padding: 12px 16px; font-size: 13px; flex-shrink: 0; }
.purchase-action .btn .icon { width: 17px; }
.buyer-app .btn { border-radius: 12px; }
.buyer-app .page-heading { margin: 8px 0 24px; }
.buyer-app .page-heading h1 { font-size: 28px; }
.buyer-app .page-heading p { max-width: none; font-size: 14px; }
.buyer-app .panel { padding: 20px; border: 1px solid var(--line); background: var(--surface); border-radius: 16px; box-shadow: none; }
.buyer-app .list-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.buyer-app details { border: 0; border-bottom: 1px solid var(--line); padding: 0; border-radius: 0; background: transparent; }
.buyer-app summary { padding: 20px 0; font-size: 15px; font-weight: 550; }
.buyer-app details>p { padding-bottom: 16px; font-size: 14px; line-height: 1.65; color: var(--muted); }
.buyer-app .product-disclaimer { font-size: 12px; color: var(--muted); margin-top: 24px; }
.buyer-app .help-grid { grid-template-columns: 1fr; }
.buyer-app .help-grid .panel { background: var(--blue-soft); }
.buyer-app .help-grid .panel .round-icon { background: var(--surface); color: var(--blue); }
.buyer-app .empty { grid-column: 1 / -1; border: 1px dashed var(--line); border-radius: 16px; background: var(--surface); padding: 32px 16px; }
.buyer-app .empty p { font-size: 14px; }
.buyer-app .field input,.buyer-app .field select,.buyer-app .field textarea { font-size: 16px; }
.buyer-app .notice { font-size: 14px; }
.buyer-app #toast { bottom: calc(96px + var(--safe-bottom)); }
.buyer-app dialog { width: min(480px,100%); max-width: 100%; max-height: calc(100dvh - var(--safe-top) - 24px); border: 1px solid var(--line); border-radius: 20px 20px 0 0; margin: auto auto 0; padding: 24px 20px calc(24px + var(--safe-bottom)); }
.buyer-app dialog::backdrop { background: #0c182b80; backdrop-filter: blur(3px); }
@media (max-width:599px) {
  .buyer-app dialog { inset: auto 0 -1px; margin: 0 auto; border-bottom: 0; padding-bottom: calc(25px + var(--safe-bottom)); }
  #library-grid .visual-card { display: grid; grid-template-columns: 80px minmax(0,1fr); column-gap: 12px; row-gap: 6px; align-items: start; }
  #library-grid .card-image { grid-column: 1; grid-row: 1 / 4; width: 80px; height: 100%; min-height: 96px; align-self: stretch; }
  #library-grid .card-body { display: contents; }
  #library-grid .card-body h3 { grid-column: 2; margin: 0; font-size: 16px; line-height: 1.35; }
  #library-grid .variant { grid-column: 2; margin: 0; font-size: 12px; }
  #library-grid .type-caption { grid-column: 2; margin: 0; font-size: 11px; }
  #library-grid .visual-card-bottom { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 12px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
  #library-grid .card-price-stack { gap: 3px; }
  #library-grid .card-price-stack>span { font-size: 11px; line-height: 1.4; }
  #library-grid .card-open { flex-shrink: 0; margin: 0; min-height: 44px; padding: 10px 14px; border-radius: 9px; background: var(--blue-soft); font-size: 12px; }
  #library-grid .ownership { grid-column: 1 / -1; }
}
.buyer-app .dialog-heading { align-items: center; gap: 12px; }
.buyer-app .dialog-heading h2 { font-size: 22px; }
.buyer-app .dialog-heading .icon-button { flex-shrink: 0; }
.wallet-hero { display: grid; gap: 10px; padding: 20px; margin-bottom: 24px; border-radius: 18px; background: var(--hero); color: #fff; }
.wallet-hero>span { font-size: 14px; line-height: 1.5; color: #d5e2ee; }
.wallet-hero>strong { font-size: 40px; line-height: 1.2; font-weight: 650; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.wallet-hero>.btn { width: 100%; min-height: 48px; margin-top: 8px; font-size: 16px; font-weight: 600; background: #fff; color: #172538; }
.wallet-checkout { display: grid; gap: 12px; margin: 16px 0 24px; }
.badge.red { background: #fbe7e9; color: #b52a40; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 100; background: var(--surface); color: var(--blue); padding: 12px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.buyer-app :is(a,button,input,select,textarea,summary) { scroll-margin-block: 24px calc(140px + var(--safe-bottom)); }
.store-skeleton { max-width: 560px; margin: auto; padding: 24px 16px; }
.store-skeleton p { color: var(--muted); font-size: 14px; margin: 20px 0; }
.skeleton-bar,.skeleton-hero,.skeleton-card { background: var(--line); border-radius: 12px; animation: store-pulse 1.6s ease-in-out infinite; }
.skeleton-bar { width: 140px; height: 36px; margin-bottom: 24px; }
.skeleton-hero { height: 216px; }
.skeleton-card { height: 168px; margin-top: 12px; }
@keyframes store-pulse { 50% { opacity: .45; } }
@media (hover:hover) {
  .visual-card:hover { border-color: var(--blue); box-shadow: 0 4px 16px #17253808; }
  .visual-card:hover .card-open { text-decoration: underline; text-underline-offset: 3px; }
  .brand-chip:not(.active):hover,.wallet-link:hover { border-color: var(--blue); }
}
@media (max-width:359px) {
  :root { --space: 12px; }
  .app-header { gap: 8px; }
  .app-header .brand strong { font-size: 24px; }
  .app-header .brand small { font-size: 9px; }
  .wallet-link { gap: 8px; padding: 8px; }
  .hero-copy { padding: 20px 16px; }
  .hero-copy h1 { font-size: 24px; }
  .hero-eyebrow { font-size: 9px; letter-spacing: .5px; }
  .catalog-heading h2 { font-size: 16px; }
  .brand-chip { padding: 10px 12px; font-size: 12px; }
  .catalog-tabs { gap: 20px; }
  .visual-card { gap: 10px; padding: 10px; }
  .card-image { width: 76px; flex-basis: 76px; }
  .card-body h3 { font-size: 15px; }
  .card-open { gap: 4px; padding: 8px 4px; font-size: 10px; }
  .card-price-stack>strong { font-size: 20px; }
  .buyer-app .purchase-action .btn { padding: 12px; font-size: 12px; gap: 6px; }
  .purchase-action>div>strong { font-size: 20px; }
}
@media (min-width:360px) and (max-width:899px) {
  .buyer-app #catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  #catalog-grid .visual-card { flex-direction: column; gap: 10px; padding: 10px; }
  #catalog-grid .card-image { width: 100%; flex: none; min-height: 0; aspect-ratio: 3 / 2; }
  #catalog-grid .card-body { padding: 0; }
  #catalog-grid .card-body h3 { font-size: 15px; line-height: 1.35; letter-spacing: -.2px; }
  #catalog-grid .variant { font-size: 12px; }
  #catalog-grid .type-caption { font-size: 10px; }
  #catalog-grid .visual-card-bottom { flex-direction: column; align-items: stretch; gap: 8px; }
  #catalog-grid .card-price-stack>strong { font-size: 21px; }
  #catalog-grid .card-open { margin: 0; min-height: 36px; padding: 6px; border-radius: 8px; background: var(--blue-soft); font-size: 12px; }
}
@media (min-width:600px) {
  :root { --space: 28px; }
  .hero-copy { padding: 32px; }
  .hero-copy h1 { font-size: 40px; }
  .hero-copy p { font-size: 14px; }
  .hero-eyebrow { font-size: 11px; }
  .hero-help { font-size: 13px; }
  .hero-image { width: 58%; opacity: .85; }
  .hero-caption { display: block; position: absolute; bottom: 24px; right: 24px; font-size: 9px; letter-spacing: 2px; color: #fff; }
  .catalog-heading h2 { font-size: 23px; }
  .catalog-heading>span { font-size: 13px; }
  .brand-chip { flex: 0 0 auto; padding-inline: 24px; }
  .search-row .search input { font-size: 16px; }
  .catalog-tabs button { font-size: 14px; }
  .card-image { flex-basis: 120px; min-height: 148px; }
  .card-body h3 { font-size: 18px; }
  .buyer-app .card-body .variant { font-size: 13px; }
  .type-caption { font-size: 11px; }
  .card-price-stack>strong { font-size: 24px; }
  .card-open { font-size: 12px; padding-inline: 12px; background: var(--blue-soft); border-radius: 9px; margin: 0; }
  .buyer-nav { --nav-padding: 8px; --nav-gap: 8px; max-width: 640px; bottom: calc(16px + var(--safe-bottom)); }
  .buyer-nav a { flex-direction: row; font-size: 14px; gap: 10px; white-space: nowrap; }
  .product-cover { height: 240px; }
  .buyer-app .purchase-action { width: calc(100% - 32px); max-width: 720px; bottom: calc(16px + var(--safe-bottom)); justify-content: space-between; gap: 24px; border: 1px solid var(--line); border-radius: 16px; padding: 12px 20px; box-shadow: 0 8px 32px #08142624; }
  .buyer-app .purchase-action .btn { min-width: 240px; font-size: 15px; }
  .buyer-app dialog { margin: auto; border-radius: 20px; padding: 28px; max-width: calc(100% - 32px); }
  .selection-help strong { font-size: 15px; }
  .selection-help>span>span { font-size: 13px; }
}
@media (min-width:900px) {
  :root { --space: 40px; }
  .app-header { padding-block: 24px; }
  .catalog-hero { border-radius: 20px; }
  .hero-copy { padding: 32px 40px; }
  .hero-copy h1 { font-size: 44px; }
  .hero-image { object-position: center; }
  .buyer-app .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .visual-card { gap: 16px; padding: 16px; }
  .card-image { flex-basis: 112px; }
  .buyer-app .help-grid { grid-template-columns: 1.3fr 1fr; gap: 40px; }
}
@media (prefers-reduced-motion:reduce) {
  .skeleton-bar,.skeleton-hero,.skeleton-card { animation: none; }
}

.wallet-history h2,.wallet-pending h2{font-size:18px;margin-bottom:8px}.wallet-pending{margin-bottom:28px}.wallet-pending .stack{margin-top:14px}
.wallet-entry{display:flex;gap:12px;padding:17px 0;border-bottom:1px solid var(--line);text-align:left}.wallet-entry:last-child{border-bottom:0}
a.wallet-entry:hover .wallet-entry-heading>strong{color:var(--blue)}
.wallet-entry-icon{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:12px;background:var(--soft);color:var(--muted)}
.wallet-entry-icon.incoming{background:var(--green-soft);color:var(--green)}.wallet-entry-icon .icon{width:18px;height:18px}
.wallet-entry-main{display:block;min-width:0;flex:1}.wallet-entry-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:14px;line-height:1.5}.wallet-entry-heading>strong{font-weight:600;overflow-wrap:anywhere;min-width:0}
.wallet-entry-amount{white-space:nowrap;font-size:14px;font-weight:650;font-variant-numeric:tabular-nums}.wallet-entry-amount.incoming{color:var(--green)}
.wallet-entry-description,.wallet-entry-meta{display:block;color:var(--muted);font-size:12px;line-height:1.55;margin-top:3px;overflow-wrap:anywhere}.wallet-entry-meta{font-size:11px;margin-top:5px}.wallet-empty{font-size:14px;color:var(--muted);padding:16px 0}
.topup-page{max-width:480px}.topup-receipt{padding:24px;border:1px solid var(--line);border-radius:22px;background:var(--bg)}
.topup-receipt-heading{display:flex;align-items:center;gap:12px}.topup-receipt-heading h1{font-size:18px;letter-spacing:-.3px;line-height:1.4}.topup-receipt-heading>div>span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.receipt-icon{width:42px;height:42px;flex-shrink:0;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);border-radius:14px}
.topup-receipt[data-status=approved] .receipt-icon{background:var(--green-soft);color:var(--green)}
.topup-receipt[data-status=rejected] .receipt-icon{background:#fbe7e9;color:#b52a40}
.receipt-amount{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 12px}.receipt-amount>strong{font-size:34px;letter-spacing:-1px;line-height:1.2;font-variant-numeric:tabular-nums}.receipt-amount .badge{font-size:12px}
.receipt-description{font-size:14px;line-height:1.6;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
.receipt-details{display:grid;gap:14px;margin:20px 0 0;border-top:1px solid var(--line);padding-top:18px;font-size:12px}.receipt-details>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.receipt-details dt{color:var(--muted)}.receipt-details dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}.receipt-details>div:last-child dd{font-weight:600}
.topup-receipt>.btn{margin-top:22px}.buyer-app .topup-help{font-size:13px;font-weight:500;margin-top:8px;color:var(--muted)}.topup-help .icon{width:17px;height:17px}.topup-page>.panel{margin-top:16px}
@media(max-width:480px){.topup-receipt{padding:20px}.wallet-entry{gap:10px}.wallet-entry-heading{gap:8px}.wallet-entry-heading>strong{font-size:13px}.wallet-entry-icon{width:32px;height:32px;border-radius:10px}.wallet-entry-amount{font-size:13px}.receipt-details>div{flex-wrap:wrap}.receipt-amount>strong{font-size:32px}}
.field input.activation-data{text-transform:none;letter-spacing:.4px;font-size:18px}
.activation-file{display:flex;gap:14px;align-items:center;padding:22px 0}.activation-file .round-icon{width:46px;height:46px;border-radius:14px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center}.activation-file strong{font-size:17px;overflow-wrap:anywhere}.activation-file p{font-size:13px;color:var(--muted);margin-top:5px}


/* Readable wallet typography at phone widths. */
.wallet-history h2,.wallet-pending h2 { font-size: 18px; line-height: 1.4; font-weight: 650; }
.wallet-empty { font-size: 15px; line-height: 1.6; color: var(--text); opacity: .8; padding: 12px 0; }
.wallet-entry-heading>strong,.wallet-entry-amount { font-size: 15px; }
.wallet-entry-description { font-size: 14px; }
.wallet-entry-meta { font-size: 13px; }
.wallet-entry-icon { align-self: center; }
.wallet-entry-main { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 12px; }
.wallet-entry-heading { display: contents; }
.wallet-entry-heading>strong { grid-column: 1; grid-row: 1; line-height: 1.5; }
.wallet-entry-amount { grid-column: 2; grid-row: 1 / 4; align-self: center; text-align: right; }
.wallet-entry-description { grid-column: 1; grid-row: 2; }
.wallet-entry-meta { grid-column: 1; grid-row: 3; }
.buyer-app #reply-form { display: grid; grid-template-columns: minmax(0,1fr) 48px; align-items: end; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.buyer-app #reply-form .field { margin: 0; }
.buyer-app #reply-form .field>span { font-size: 14px; font-weight: 600; }
.buyer-app #reply-form textarea,.buyer-app #ticket-form textarea { resize: none; min-height: 76px; max-height: 240px; overflow-y: hidden; font-size: 16px; line-height: 1.5; padding: 12px 14px; }
.buyer-app #reply-form textarea { min-height: 50px; height: 50px; border-radius: 16px; }
.buyer-app #reply-form>.btn { width: 48px; height: 48px; min-height: 48px; padding: 0; margin-bottom: 1px; border-radius: 50%; }
.buyer-app #reply-form>.btn .icon { width: 22px; height: 22px; }
.buyer-app .storefront:has(.ticket-chat-page) { min-height: 100dvh; display: flex; flex-direction: column; }
.buyer-app .content:has(.ticket-chat-page) { flex: 1; width: 100%; display: flex; padding-bottom: calc(12px + var(--safe-bottom)); }
.buyer-app .ticket-chat-page { display: flex; flex-direction: column; flex: 1; width: 100%; min-width: 0; }
.ticket-chat-page>.panel { flex: 1; display: flex; flex-direction: column; }
.ticket-chat-page .chat { flex: 1; align-content: start; }
.ticket-chat-page>p:last-child { margin-top: 12px; font-size: 12px; }
.buyer-app #reply-form .form-error { grid-column: 1 / -1; }
.buyer-app #reply-form .form-error:empty { display: none; }
.buyer-app .content:has(.ticket-chat-page),.buyer-app .ticket-chat-page { margin: 0 auto; }
.ticket-chat-page .message { display: flex; flex-direction: column; gap: 4px; }
.ticket-chat-page .message-text { order: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ticket-chat-page .message .message-time { order: 1; align-self: flex-end; margin: 0; line-height: 1.2; }
.ticket-chat-page>p:last-child { text-align: center; padding-inline: 8px; }
.ticket-chat-page>.back { align-self: flex-start; font-size: 14px; line-height: 20px; align-items: center; }
.ticket-chat-page>.back .icon { width: 20px; height: 20px; }
@media (max-width:599px) {
  .storefront:has(.ticket-chat-page)>.app-header { display: none; }
  .buyer-app .content:has(.ticket-chat-page) { padding-top: calc(12px + var(--safe-top)); }
  .ticket-chat-page>.back { margin: 0 0 12px; }
  .buyer-app .ticket-chat-page>.page-heading { margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .buyer-app .ticket-chat-page>.page-heading h1 { font-size: 20px; line-height: 1.3; }
  .ticket-chat-page>.page-heading p { display: none; }
  .ticket-chat-page>.panel { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .ticket-chat-page .chat { margin: 16px 0; }
  .ticket-chat-page .message { max-width: 88%; padding: 10px 14px; }
  .ticket-chat-page .message small { font-size: 11px; margin-bottom: 4px; }
  .buyer-app .ticket-chat-page #reply-form { margin-top: 0; padding-top: 10px; gap: 8px; }
  .ticket-chat-page>p:last-child { margin-top: 8px; font-size: 11px; line-height: 1.4; }
}

.buyer-app .ticket-chat-page>.back { margin: 0; padding-block: 6px; }
.buyer-app .ticket-chat-page>.page-heading { margin-top: 0; }
.buyer-app .ticket-chat-page>p:last-child { margin: 8px 0 0; padding: 0 20px; text-align: left; font-size: 12px; line-height: 18px; }
@media(max-width:599px) {
  .buyer-app .ticket-chat-page>p:last-child { padding: 0; }
}

.buyer-app .ticket-chat-page>.panel { margin-bottom: 0; }
.buyer-app .ticket-chat-page>p:last-child { margin: 0; padding: 12px 0; text-align: center; line-height: 18px; }
.buyer-app .content:has(.ticket-chat-page) { padding-bottom: var(--safe-bottom); }

@media (min-width:360px) and (max-width:599px) {
}


/* Keep discounted and regular prices aligned across card layouts. */
#catalog-grid .visual-card-bottom { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
#catalog-grid .card-price-stack { width: 100%; }
#catalog-grid .card-price-stack:has(.old-price) { grid-template-columns: max-content minmax(0,1fr); column-gap: 6px; }
#catalog-grid .card-price-stack>.old-price { justify-self: end; gap: 3px; }
#catalog-grid .card-open { margin: 0; }
@media (min-width:360px) and (max-width:599px) {
  #catalog-grid .old-price .saving { padding-inline: 2px; }
}@media (min-width:360px) and (max-width:379px) {
  #catalog-grid .visual-card { padding: 8px; }
  #catalog-grid .old-price del { font-size: 10px; }
  #catalog-grid .old-price .saving { font-size: 9px; }
  #catalog-grid .card-price-stack>.old-price { gap: 2px; }
}

/* Isolated graphite palette preview; enabled only by the local demo URL. */
:root[data-palette=graphite] {
  color-scheme: dark;
  --bg: #141416; --surface: #202023; --soft: #2b2b30;
  --text: #f4f4f5; --muted: #b1b1ba; --line: #36363d;
  --blue: #8bb4ff; --blue-soft: #24334c;
  --hero: #1b1b1f; --hero-muted: #d2d2da; --accent: #8bb4ff;
  --green: #72d5a5; --green-soft: #203a2e;
}
:root[data-palette=graphite] .btn:not(.secondary):not(.quiet) { background: #377cf6; color: #fff; }
:root[data-palette=graphite] .hero-image { filter: saturate(.7); }
.promotion-gift-label{font-size:12px;line-height:1.4;color:var(--blue,#2463eb);font-weight:600}
.welcome-promotion{margin:20px 0}.welcome-promotion h2{margin:12px 0 8px}.welcome-promotion form{display:grid;gap:12px}.welcome-promotion .check{display:flex;align-items:flex-start;gap:10px;line-height:1.5}.welcome-promotion input[type=checkbox]{flex:0 0 auto;width:18px;height:18px;margin-top:3px}