/* Mobile shopping surface: compact navigation, large product imagery, red emphasis. */
:root { --mall-red: #e92332; }
body { background: #f5f6f8; }
.credit-balance { background: linear-gradient(115deg,#f72d3d,#dc1230); color:white; border-radius:20px; padding:26px; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; box-shadow:0 12px 24px #e923321c; }
.credit-balance span,.credit-balance p { color:#ffe3e5; font-size:13px; }
.credit-balance strong { display:block; font-size:38px; line-height:1.5; letter-spacing:-1px; }
.credit-balance strong small { font-size:13px; letter-spacing:0; padding-left:8px; }
.credit-balance .button { background:#ffffff20; color:#fff; border:1px solid #ffffff70; }
.credit-balance.is-frozen { background:linear-gradient(115deg,#555b66,#292d35); box-shadow:0 12px 24px #1d24301c; }
.wallet-status { display:inline-block; margin-left:8px; padding:3px 7px; border:1px solid #ffffff80; border-radius:4px; color:#fff; font-size:11px; }
.wallet-lock-notice { display:flex; align-items:center; gap:10px; margin:12px 0 18px; padding:13px 15px; border:1px solid #f1c0bd; border-radius:6px; background:#fff3f1; color:#a5211b; font-size:13px; line-height:1.6; }
.wallet-lock-notice svg { width:18px; height:18px; flex:0 0 auto; }.wallet-lock-notice div { display:flex; flex-direction:column; }.wallet-lock-notice span { color:#795653; font-size:12px; }
.wallet-lock-global { display:flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:9px 16px; border-bottom:1px solid #edb9b5; background:#fff0ee; color:#8e1e18; font-size:13px; }.wallet-lock-global svg { width:18px; height:18px; flex:0 0 auto; }.wallet-lock-global a { margin-left:12px; color:#c3271e; font-weight:700; text-decoration:underline; }
.account-status { display:inline-flex; min-width:52px; justify-content:center; padding:4px 8px; border-radius:4px; font-size:12px; }.account-status.active { color:#147a4f; background:#eaf8f1; }.account-status.frozen { color:#a5211b; background:#fff0ee; }
.credit-actions { min-width:380px; white-space:normal; }.credit-actions .button { margin:2px 0; }.button.unfreeze { border-color:#a9dcca; color:#147a4f; background:#f0fbf6; }
.credit-ledger article { display:flex; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid #edf0f4; }
.credit-ledger small { display:block; color:#8a8d96; margin-top:5px; }
.credit-ledger article > div:last-child { text-align:right; flex-shrink:0; }
.credit-in { color:#07976e; }.credit-out { color:#df273b; }
.invite-panel { background:linear-gradient(115deg,#fff1f1,#fff); border:1px solid #f5d9de; border-radius:16px; display:flex; flex-wrap:wrap; gap:28px; padding:22px; margin-bottom:24px; align-items:center; }
.invite-panel small { display:block; color:#7a7580; margin-bottom:8px; }.invite-panel strong { display:block; font-size:22px; color:#b51e34; letter-spacing:0; overflow-wrap:anywhere; }
.invite-panel p { font-size:12px; color:#7a7580; margin:8px 0; }.invite-panel input { width:min(420px,100%); background:white; border:1px solid #edd9dc; padding:12px; border-radius:8px; }
.invite-panel > div { min-width:0; }.invite-field[hidden],[data-client-search][hidden] { display:none; }
.agent-privilege { margin:24px 0; padding:24px; background:#fff; border:1px solid #eceef2; border-radius:16px; }
.agent-badge { display:inline-flex; align-items:center; gap:6px; margin-bottom:7px; color:#d93425; font-size:12px; font-weight:700; }
.agent-badge svg { width:16px; height:16px; }
.agent-privilege-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.agent-privilege-card { position:relative; display:flex; justify-content:space-between; min-height:156px; padding:20px; overflow:hidden; color:#202124; background:#fff; border:1px solid #e4e6ea; border-radius:8px; }
.agent-privilege-card:hover { border-color:#ffaaa2; box-shadow:0 8px 20px #cf2c1d10; transform:translateY(-1px); }
.agent-privilege-card h4 { margin:0 0 8px; font-size:18px; }.agent-privilege-card p { max-width:220px; margin:0; color:#8b8f97; font-size:12px; line-height:1.7; }
.agent-privilege-card div > span { position:absolute; left:20px; bottom:18px; padding:5px 10px; color:#e44732; background:#fff0e9; border-radius:15px; font-size:11px; }
.agent-privilege-icon { align-self:flex-end; display:grid; place-items:center; width:72px; height:72px; color:#e3422d; background:#fff1e9; border-radius:50%; }.agent-privilege-icon svg { width:42px; height:42px; stroke-width:1.5; }
.agent-page-heading { align-items:flex-end; }.agent-page-heading .agent-badge { margin-bottom:8px; }
.agent-transfer-page { max-width:720px; margin-top:18px; background:#fff; border:1px solid #eceef2; border-radius:10px; overflow:hidden; }
.agent-transfer-balance { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 24px; border-bottom:1px solid #eef0f3; background:#fafbfc; color:#6b7078; font-size:18px; }
.agent-transfer-balance strong { color:#24262b; font-size:24px; margin-left:4px; }
.agent-transfer-all { color:#e92332; font-size:16px; font-weight:700; white-space:nowrap; }.agent-transfer-all svg { width:17px; height:17px; vertical-align:-3px; }
.agent-transfer-form { padding:0; }.agent-transfer-section { padding:28px 24px; border-bottom:8px solid #f5f6f8; }.agent-transfer-section:last-of-type { border-bottom:0; }
.agent-transfer-section h2 { margin:0 0 22px; font-size:20px; color:#282a2f; }.agent-transfer-section .field > span { font-size:14px; color:#666b74; }
.agent-transfer-amount { display:flex; align-items:center; gap:8px; border-bottom:1px solid #dfe2e7; }.credit-sign-toggle { flex:0 0 auto; border:0; border-radius:6px; padding:6px 10px; color:#e92332; background:#fff0f1; font-weight:700; cursor:pointer; }.credit-sign-toggle[data-mode="debit"] { color:#a46000; background:#fff4df; }.agent-transfer-amount b { color:#24262b; font-size:20px; }.agent-transfer-amount input { border:0; padding:11px 0; font-size:22px; font-weight:600; }.agent-transfer-amount input:focus { box-shadow:none; }.agent-transfer-section small { display:block; margin-top:8px; color:#999fa8; }
.agent-transfer-section input[list] { margin-top:4px; }.agent-transfer-hint { margin:10px 0 0; color:#969ba3; font-size:12px; }.agent-transfer-hint.is-error { color:#d62c36; }
.agent-transfer-form > .form-error { margin:0 24px 16px; }.agent-transfer-form > .button { width:calc(100% - 48px); margin:0 24px 24px; }.agent-transfer-form > .button:disabled { color:#fff; background:#cfd1d4; border-color:#cfd1d4; cursor:not-allowed; }
.agent-surface { margin-top:18px; padding:22px; background:#fff; border:1px solid #eceef2; border-radius:8px; }
.agent-summary { display:flex; align-items:center; gap:28px; padding:22px; color:#fff; background:linear-gradient(120deg,#ee3828,#ff765b); border-radius:8px; }
.agent-summary > svg { width:48px; height:48px; opacity:.8; }.agent-summary > div { display:flex; flex-direction:column; padding-right:28px; border-right:1px solid #ffffff55; }.agent-summary > div:last-child { border-right:0; }
.agent-summary strong { font-size:25px; }.agent-summary span { margin-top:4px; font-size:12px; color:#fff4f1; }
.agent-member-list article { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:14px; padding:15px 0; border-bottom:1px solid #edf0f4; }
.agent-member-list article > div { min-width:0; }.agent-member-list article > div:nth-child(3) { text-align:right; }.agent-member-list small { display:block; margin-top:4px; color:#8a8d96; font-size:11px; }
.agent-promotion { display:grid; grid-template-columns:minmax(230px,320px) minmax(0,1fr); gap:36px; align-items:center; padding:32px; background:#fff; border:1px solid #eceef2; border-radius:8px; }
.agent-qr { aspect-ratio:1; padding:16px; background:#fff; border:1px solid #e5e5e5; box-shadow:0 8px 30px #1d24300d; }.agent-qr svg { display:block; width:100%; height:100%; }
.agent-promotion h2 { margin:5px 0 10px; font-size:25px; }.agent-promotion p { margin:0 0 16px; color:#666; }.agent-promotion > div:last-child > small { display:block; margin-top:18px; color:#888; line-height:1.7; }.agent-order-card { margin-top:12px; }
.detail-description { background:white; padding:28px; border-radius:16px; }.detail-description p { white-space:pre-wrap; line-height:1.9; }.detail-images { max-width:760px; margin:auto; }.detail-images img { display:block; width:100%; height:auto; }
.detail-spec-table { width:100%; border-collapse:collapse; margin:20px 0; }.detail-spec-table td { border:1px solid #eee; padding:12px; }.detail-spec-table td:first-child { background:#f8f9fb; color:#777; width:110px; }
.product-card { background:#fff; border:0; box-shadow:0 2px 12px #151c2b06; border-radius:16px; overflow:hidden; }.product-title { font-weight:650; }.product-category { color:#9397a0; }.product-prices .price em { font-size:10px; margin-right:3px; font-style:normal; }
.home-carousel-theme-1 { background:linear-gradient(110deg,#ffe8e9,#fff8ec); }.home-carousel-theme-2 { background:linear-gradient(110deg,#eee7ff,#f9f4ff); }.home-carousel-theme-3 { background:linear-gradient(110deg,#e1f5ee,#f5fbf6); }
.home-carousel-copy h2 { color:#27232a; font-size:34px; }.home-carousel-product img { border-radius:20px; background:#fff; }.home-carousel { border-radius:20px; }.home-carousel-copy > span { letter-spacing:2px; }
.home-category-shortcuts,.home-deals { border:0; border-radius:16px; background:white; }.home-category-shortcuts { grid-template-columns:repeat(5,minmax(0,1fr)); }.home-category-shortcut small { display:none; }.home-category-icon { border-radius:16px; }.home-category-icon.home-category-icon-image { overflow:hidden; color:inherit; background:transparent; border-radius:18px; box-shadow:none; }.home-category-icon-image img { display:block; width:100%; height:100%; object-fit:contain; }.promo-mosaic { display:none; }
@media(max-width:700px) {
  .wallet-lock-global { align-items:flex-start; justify-content:flex-start; padding:10px 12px; font-size:11px; line-height:1.55; }.wallet-lock-global a { margin-left:auto; flex:0 0 auto; }
  body:has(.store-home) { background:linear-gradient(#ffe7eb 0,#f5f6f8 480px); }
  body:has(.store-home) .site-header { background:linear-gradient(110deg,#ed1732,#fb4853); border:0; box-shadow:none; }
  body:has(.store-home) .header-main { padding:12px 12px 10px; gap:10px; }
  body:has(.store-home) .site-search { border:0; box-shadow:none; border-radius:24px; height:40px; }
  body:has(.store-home) .site-search button { background:#fff; color:#df1e38; font-weight:700; }
  .home-channel-strip { background:transparent; color:#902a3d; gap:24px; padding-top:12px; min-height:48px; }.home-channel-strip a.active:after { background:#e92332; }
  .store-home { padding:0 12px 24px; }.home-notice { border-radius:10px; margin:0 0 10px; padding:9px; background:#fff9; font-size:11px; }.home-notice-label { color:#b9233d; }
  .home-carousel { margin:0; border:1px solid #fff; border-radius:16px; box-shadow:0 4px 12px #84243b09; }.home-carousel-viewport { aspect-ratio:1.98/1; }.home-carousel-copy { padding:24px 6px 32px 17px; }.home-carousel-copy h2 { font-size:25px; letter-spacing:-1px; line-height:1.25; }.home-carousel-copy p { font-size:11px; }.home-carousel-copy > span { font-size:10px; }.home-carousel-product img { border-radius:14px; max-height:118px; }.home-carousel-product > strong { font-size:10px; }.home-carousel-product > em { font-size:15px; }
  .home-category-shortcuts { width:100%; margin:12px 0; padding:16px 5px; gap:18px 3px; }.home-category-icon { width:42px; height:42px; border-radius:15px; }.home-category-shortcut strong { font-size:11px; font-weight:500; color:#333; }
  .home-deals { width:100%; margin:12px 0; padding:15px 12px; background:linear-gradient(#fff0f1,#fff 70%); }.home-section-heading strong { font-size:18px; font-weight:800; }.home-section-heading span { color:#b97780; font-size:10px; }.home-deal-rail { --home-update-card-width:92px; }.home-deal-card > strong { font-size:13px; }.home-deal-card small { font-size:10px; }
  .catalog-browsing .catalog-heading h2 { font-size:22px; }.catalog-browsing .product-grid { gap:10px; }.catalog-browsing .product-card { border-radius:14px; }.catalog-browsing .product-title { min-height:39px; font-size:13px; line-height:1.5; }.catalog-browsing .price-row .price { font-size:20px; }.catalog-browsing .product-meta { font-size:9px; }.catalog-browsing .product-info { padding:10px; }.catalog-browsing .product-category { display:none; }
  .detail { display:block; background:transparent; }.detail-media { border-radius:16px; overflow:hidden; background:white; }.detail-photo { width:100%; aspect-ratio:1; object-fit:contain; max-height:none; }.detail-info { margin-top:12px; padding:20px 16px; border-radius:16px; background:white; }.detail-info h1 { font-size:19px; line-height:1.5; }.detail-info .price { font-size:27px; }.detail-actions { display:flex; gap:10px; }.detail-actions .button { flex:1; min-width:0; padding-inline:8px; border-radius:24px; font-size:14px; }.detail-description { margin-top:12px; padding:18px 12px; }.detail-description h2 { text-align:center; font-size:18px; }.detail-thumbnails { padding:10px; gap:8px; overflow:auto; }
  .credit-balance { padding:22px 18px; border-radius:18px; }.credit-balance strong { font-size:32px; }.credit-balance .button { padding:10px; font-size:12px; }.invite-panel { display:block; padding:18px; }.invite-panel > div + div { margin-top:18px; }.invite-panel input { width:100%; box-sizing:border-box; }
  .agent-mobile-nav { grid-template-columns:repeat(4,minmax(0,1fr)); }.agent-privilege { margin:16px 0; padding:0; border:0; background:transparent; }.agent-privilege .section-head { padding:0 4px; }.agent-privilege-grid { gap:8px; }
  .agent-privilege-card { min-height:168px; padding:14px; background:#fff; border:1px solid #e8e8e8; border-radius:8px; }.agent-privilege-card h4 { font-size:16px; }.agent-privilege-card p { padding-right:0; font-size:11px; line-height:1.6; }.agent-privilege-card div > span { left:14px; bottom:13px; }
  .agent-privilege-icon { position:absolute; right:10px; bottom:10px; width:55px; height:55px; opacity:.9; }.agent-privilege-icon svg { width:34px; height:34px; }
  .agent-page-heading { align-items:flex-start; }.agent-page-heading .button { padding:8px 10px; font-size:11px; }.agent-surface { padding:14px; }
  .agent-transfer-page { margin-top:12px; border-radius:8px; }.agent-transfer-balance { padding:18px 16px; font-size:15px; }.agent-transfer-balance strong { font-size:20px; }.agent-transfer-all { font-size:14px; }.agent-transfer-section { padding:22px 16px; }.agent-transfer-section h2 { margin-bottom:18px; font-size:18px; }.agent-transfer-form > .form-error { margin-inline:16px; }.agent-transfer-form > .button { width:calc(100% - 32px); margin-inline:16px; }
  .agent-summary { gap:15px; padding:18px 14px; }.agent-summary > svg { width:34px; height:34px; }.agent-summary > div { padding-right:14px; }.agent-summary strong { font-size:19px; }
  .agent-member-list article { grid-template-columns:auto minmax(0,1fr) auto; gap:10px; }.agent-member-list article > .button { grid-column:2/4; justify-self:stretch; }
  .agent-promotion { display:block; padding:18px; }.agent-qr { max-width:280px; margin:0 auto 24px; }.agent-promotion h2 { font-size:20px; }
  .product-image { aspect-ratio:1; }.product-image img { object-fit:cover; }.original { display:none; }.service-row { font-size:10px; }
}
@media(min-width:701px) {
  .agent-privilege-card:last-child { grid-column:1 / 2; }
}

/* The native shell uses a quieter, lighter storefront and avoids animation work. */
html.native-app body,
html.native-app body:has(.store-home) { background:#f5f6f8; }
html.native-app body:has(.store-home) .site-header { background:#e2231a; }
html.native-app .home-channel-strip { background:#fff; color:#282b31; border-bottom:1px solid #eceef2; }
html.native-app .home-channel-strip a.active { color:#e2231a; }
html.native-app .home-channel-strip a.active:after { background:#e2231a; }
html.native-app .home-notice { margin-top:10px; background:#fff; }
html.native-app .home-carousel { border:0; border-radius:10px; box-shadow:none; }
html.native-app .home-carousel-viewport { aspect-ratio:2.12/1; }
html.native-app .home-carousel-toggle { display:none; }
html.native-app .home-deals { margin-top:10px; border-radius:10px; background:#fff; }
html.native-app .product-card { content-visibility:auto; contain-intrinsic-size:0 330px; border-radius:8px; box-shadow:0 1px 4px #151c2b0d; }
html.native-app .site-footer { display:none; }
html.native-app .mobile-nav { background:#fff; box-shadow:0 -3px 12px #151c2b0a; }
html.native-app .header-cart > span { display:none; }
@media(max-width:700px) {
  html.native-app .store-home { padding-top:0; }
  html.native-app .home-carousel-copy { padding:17px 6px 25px 15px; }
  html.native-app .home-carousel-copy h2 { font-size:21px; letter-spacing:0; }
  html.native-app .home-carousel-product img { max-height:105px; border-radius:8px; }
  html.native-app .home-deals { width:100%; margin-inline:0; padding:13px 10px; }
}

/* Native storefront refresh: bright retail hierarchy inspired by the mobile brief. */
@media(max-width:700px) {
  html.native-app {
    --mall-orange:#ff5a16;
    --mall-orange-dark:#f0440b;
    --mobile-nav-height:72px;
  }
  html.native-app body,
  html.native-app body:has(.store-home) {
    background:#f4f5f7;
  }
  html.native-app body:has(.store-home) .site-header {
    position:sticky;
    top:0;
    z-index:30;
    background:var(--mall-orange);
  }
  html.native-app body:has(.store-home) .header-inner {
    min-height:58px;
    padding:10px 13px 8px;
  }
  html.native-app body:has(.store-home) .site-search {
    height:42px;
    padding-left:14px;
    border:0;
    border-radius:24px;
    box-shadow:0 3px 12px #b22d0c24;
  }
  html.native-app body:has(.store-home) .site-search input {
    font-size:16px;
  }
  html.native-app body:has(.store-home) .site-search button {
    padding-inline:17px;
    color:var(--mall-orange-dark);
    border-radius:0 24px 24px 0;
    background:#fff;
  }
  html.native-app body:has(.store-home) .header-cart > b {
    color:var(--mall-orange-dark);
    border-color:#fff;
  }
  html.native-app .store-home {
    padding:0 10px 24px;
  }
  html.native-app .home-channel-strip {
    width:calc(100% + 20px);
    min-height:45px;
    margin:0 -10px;
    padding:0 15px 9px;
    gap:27px;
    color:#fff;
    border:0;
    background:var(--mall-orange);
  }
  html.native-app .home-channel-strip a {
    font-size:14px;
    opacity:.88;
  }
  html.native-app .home-channel-strip a.active {
    color:#fff;
    font-size:17px;
    opacity:1;
  }
  html.native-app .home-channel-strip a.active:after {
    bottom:-7px;
    height:3px;
    background:#fff;
  }
  html.native-app .home-carousel {
    margin-top:10px;
    border:0;
    border-radius:10px;
    box-shadow:0 5px 16px #93270520;
  }
  html.native-app .home-carousel-viewport {
    aspect-ratio:1.78/1;
  }
  html.native-app .home-carousel-slide {
    grid-template-columns:42% 58%;
  }
  html.native-app .home-carousel-theme-1,
  html.native-app .home-carousel-theme-2,
  html.native-app .home-carousel-theme-3 {
    color:#fff;
    background:linear-gradient(135deg,#ff6b22,#ff4b12 58%,#ea3510);
  }
  html.native-app .home-carousel-copy {
    padding:20px 5px 44px 16px;
  }
  html.native-app .home-carousel-copy > span {
    color:#fff4dc;
    letter-spacing:0;
  }
  html.native-app .home-carousel-copy h2 {
    color:#fff;
    font-size:22px;
    line-height:1.28;
  }
  html.native-app .home-carousel-copy a {
    min-height:31px;
    padding:6px 10px;
    color:var(--mall-orange-dark);
    border-radius:6px;
  }
  html.native-app .home-carousel-product {
    background:#fff3e9;
  }
  html.native-app .home-carousel-product img {
    width:100%;
    max-height:none;
    border-radius:0;
    object-fit:cover;
  }
  html.native-app .home-carousel-product strong {
    right:9px;
    bottom:40px;
    max-width:calc(100% - 18px);
    font-size:10px;
  }
  html.native-app .home-carousel-product em {
    right:9px;
    bottom:11px;
    max-width:calc(100% - 18px);
  }
  html.native-app .home-carousel-arrow {
    width:30px;
    height:30px;
    bottom:9px;
  }
  html.native-app .home-carousel-arrow.previous { left:9px; }
  html.native-app .home-carousel-arrow.next { right:9px; }
  html.native-app .promo-mosaic {
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    grid-template-rows:repeat(2,118px);
    gap:7px;
    min-height:0;
    margin-top:10px;
    padding:0;
  }
  html.native-app .promo-card {
    border:0;
    border-radius:8px;
    box-shadow:0 2px 9px #1d243014;
  }
  html.native-app .promo-card-1 {
    grid-column:1;
    grid-row:1/3;
  }
  html.native-app .promo-card-2 {
    grid-column:2;
    grid-row:1;
  }
  html.native-app .promo-card-3 {
    grid-column:2;
    grid-row:2;
  }
  html.native-app .promo-card img {
    inset:0;
    z-index:0;
    width:100%;
    object-fit:cover;
  }
  html.native-app .promo-card-copy,
  html.native-app .promo-card-1 .promo-card-copy {
    z-index:2;
    width:100%;
    justify-content:flex-end;
    gap:3px;
    padding:11px;
    background:linear-gradient(0deg,#18110fc7 0,#18110f61 42%,transparent 75%);
  }
  html.native-app .promo-card-copy small {
    color:var(--mall-orange-dark);
    background:#fff;
  }
  html.native-app .promo-card-copy strong,
  html.native-app .promo-card-1 .promo-card-copy strong {
    color:#fff;
    font-size:12px;
    line-height:1.35;
  }
  html.native-app .promo-card-1 .promo-card-copy strong {
    font-size:16px;
  }
  html.native-app .promo-card-copy em {
    color:#ffe36e;
    font-size:11px;
  }
  html.native-app .home-notice {
    min-height:42px;
    margin:10px 0 0;
    padding:7px 10px;
    border:0;
    border-radius:7px;
    color:#64270d;
    background:#fff0e8;
  }
  html.native-app .home-notice-label {
    color:var(--mall-orange-dark);
  }
  html.native-app .home-category-shortcuts {
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px 4px;
    width:100%;
    margin:10px 0 0;
    padding:14px 6px 13px;
    border:1px solid #eef0f4;
    border-radius:16px;
    background:#fff;
    box-shadow:0 8px 24px #2731420a;
  }
  html.native-app .home-category-icon {
    width:62px;
    height:62px;
  }
  html.native-app .home-category-shortcut strong {
    margin-top:2px;
    color:#292d33;
    font-size:11px;
    font-weight:700;
  }
  html.native-app .home-deals {
    width:100%;
    margin:10px 0 0;
    padding:15px 10px;
    border-radius:10px;
    background:#fff;
  }
  html.native-app .store-home .catalog-section {
    padding-top:20px;
  }
  html.native-app .mobile-nav {
    grid-template-columns:repeat(5,minmax(0,1fr));
    height:calc(72px + env(safe-area-inset-bottom));
    padding:8px 3px calc(7px + env(safe-area-inset-bottom));
    border-top:0;
    background:#fff;
    box-shadow:0 -5px 18px #151c2b17;
  }
  html.native-app .mobile-nav a {
    gap:3px;
    min-width:0;
    color:#73777d;
    font-size:11px;
  }
  html.native-app .mobile-nav a svg {
    width:24px;
    height:24px;
  }
  html.native-app .mobile-nav a.active {
    color:var(--mall-orange-dark);
  }
  html.native-app .mobile-nav a span:not(.badge-count) {
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

/* The installed app keeps its primary navigation on every device size. */
html.native-app {
  --mall-orange:#ff5a16;
  --mall-orange-dark:#f0440b;
  --mobile-nav-height:72px;
  touch-action:pan-x pan-y;
}
html.installed-app a,
html.installed-app img {
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
}
.mobile-nav,
.mobile-nav * {
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
html.native-app body:has(.mobile-nav) {
  padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
}
html.native-app .mobile-nav {
  position:fixed;
  z-index:40;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  left:0;
  right:0;
  bottom:0;
  width:100vw;
  max-width:none;
  height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
  padding:8px 12px calc(7px + env(safe-area-inset-bottom));
  border-top:1px solid #eceef2;
  background:#fff;
  box-shadow:0 -5px 18px #151c2b17;
  box-sizing:border-box;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  will-change:transform;
  contain:layout style;
  isolation:isolate;
}
html.native-app .mobile-nav-count-4 {
  grid-template-columns:repeat(4,minmax(0,1fr));
}
html.native-app .mobile-nav-count-3 {
  grid-template-columns:repeat(3,minmax(0,1fr));
}
html.native-app .mobile-nav a {
  position:relative;
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  color:#73777d;
  font-size:11px;
}
html.native-app .mobile-nav a svg {
  width:24px;
  height:24px;
}
html.native-app .mobile-nav a.active {
  color:var(--mall-orange-dark);
  font-weight:600;
}
html.native-app .mobile-nav a span:not(.badge-count) {
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
html.native-app .mobile-nav .badge-count {
  position:absolute;
  top:-2px;
  left:calc(50% + 8px);
  min-width:15px;
  height:15px;
  padding:0 4px;
  border-radius:8px;
  color:#fff;
  background:var(--mall-orange-dark);
  font-size:11px;
  line-height:15px;
}
html.native-app .home-category-shortcut {
  gap:4px;
  padding:2px 1px 5px;
  border-radius:10px;
  transition:background-color .15s,transform .15s;
}
html.native-app .home-category-shortcut:active {
  transform:scale(.97);
  background:#fff7f2;
}

/* Every storefront uses the same responsive shell as the installed app. */
@media(min-width:701px) {
  html.native-app .utility-bar,
  html.native-app .store-navigation {
    display:none;
  }
  html.native-app body:has(.store-home) .site-header {
    position:sticky;
    z-index:30;
    top:0;
    border-bottom:0;
    background:var(--mall-orange);
  }
  html.native-app body:has(.store-home) .header-inner {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:14px;
    width:min(calc(100% - 32px),960px);
    min-height:0;
    padding:12px 0;
  }
  html.native-app body:has(.store-home) .brand,
  html.native-app body:has(.store-home) .header-account {
    display:none;
  }
  html.native-app body:has(.store-home) .site-search {
    grid-column:1;
    grid-row:1;
    width:100%;
    max-width:none;
    height:46px;
    padding-left:16px;
    border:0;
    border-radius:25px;
    background:#fff;
    box-shadow:0 3px 12px #b22d0c24;
  }
  html.native-app body:has(.store-home) .site-search button {
    padding-inline:22px;
    border-radius:0 25px 25px 0;
    color:var(--mall-orange-dark);
    background:#fff;
    font-weight:700;
  }
  html.native-app body:has(.store-home) .header-actions,
  html.native-app body:has(.store-home) .header-cart {
    color:#fff;
  }
  html.native-app body:has(.store-home) .header-cart > b {
    color:var(--mall-orange-dark);
    border-color:#fff;
    background:#fff;
  }
  html.native-app .store-home {
    width:min(calc(100% - 32px),960px);
    padding:0 0 30px;
  }
  html.native-app .home-channel-strip {
    display:flex;
    align-items:center;
    gap:30px;
    width:100%;
    min-height:50px;
    margin:0;
    padding:0 18px 10px;
    overflow-x:auto;
    border:0;
    border-radius:0 0 10px 10px;
    color:#fff;
    background:var(--mall-orange);
    scrollbar-width:none;
  }
  html.native-app .home-channel-strip a {
    position:relative;
    flex-shrink:0;
    font-size:15px;
    opacity:.88;
  }
  html.native-app .home-channel-strip a.active {
    color:#fff;
    font-size:18px;
    font-weight:800;
    opacity:1;
  }
  html.native-app .home-channel-strip a.active:after {
    position:absolute;
    content:"";
    right:7px;
    bottom:-8px;
    left:7px;
    height:3px;
    border-radius:2px;
    background:#fff;
  }
  html.native-app .home-carousel {
    margin-top:12px;
    border:0;
    border-radius:10px;
    box-shadow:0 5px 16px #93270520;
  }
  html.native-app .home-carousel-viewport {
    aspect-ratio:2.45/1;
    min-height:260px;
    max-height:360px;
  }
  html.native-app .home-carousel-slide {
    grid-template-columns:42% 58%;
  }
  html.native-app .home-carousel-theme-1,
  html.native-app .home-carousel-theme-2,
  html.native-app .home-carousel-theme-3 {
    color:#fff;
    background:linear-gradient(135deg,#ff6b22,#ff4b12 58%,#ea3510);
  }
  html.native-app .home-carousel-copy h2 {
    color:#fff;
    font-size:30px;
    letter-spacing:0;
  }
  html.native-app .home-carousel-copy > span {
    color:#fff4dc;
    letter-spacing:0;
  }
  html.native-app .home-carousel-copy a {
    color:var(--mall-orange-dark);
  }
  html.native-app .home-carousel-product {
    background:#fff3e9;
  }
  html.native-app .home-carousel-product img {
    width:100%;
    max-height:none;
    border-radius:0;
    object-fit:cover;
  }
  html.native-app .promo-mosaic {
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    grid-template-rows:repeat(2,155px);
    gap:10px;
    min-height:0;
    margin-top:12px;
  }
  html.native-app .promo-card {
    border:0;
    box-shadow:0 2px 9px #1d243014;
  }
  html.native-app .promo-card img {
    inset:0;
    z-index:0;
    width:100%;
    object-fit:cover;
  }
  html.native-app .promo-card-copy,
  html.native-app .promo-card-1 .promo-card-copy {
    z-index:2;
    width:100%;
    justify-content:flex-end;
    gap:5px;
    padding:18px;
    background:linear-gradient(0deg,#18110fc7 0,#18110f61 42%,transparent 75%);
  }
  html.native-app .promo-card-copy small {
    color:var(--mall-orange-dark);
    background:#fff;
  }
  html.native-app .promo-card-copy strong,
  html.native-app .promo-card-1 .promo-card-copy strong {
    color:#fff;
    font-size:16px;
  }
  html.native-app .promo-card-1 .promo-card-copy strong {
    font-size:22px;
  }
  html.native-app .promo-card-copy em {
    color:#ffe36e;
  }
  html.native-app .home-notice {
    min-height:44px;
    margin:12px 0 0;
    padding:8px 12px;
    border:0;
    border-radius:8px;
    color:#64270d;
    background:#fff0e8;
  }
  html.native-app .home-notice-label {
    color:var(--mall-orange-dark);
  }
  html.native-app .home-category-shortcuts {
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:16px 10px;
    width:100%;
    margin:12px 0 0;
    padding:22px 20px 20px;
    border:1px solid #eef0f4;
    border-radius:18px;
    box-shadow:0 8px 24px #2731420a;
  }
  html.native-app .home-category-icon {
    width:88px;
    height:88px;
  }
  html.native-app .home-category-shortcut strong {
    margin-top:3px;
    color:#292d33;
    font-size:15px;
    font-weight:700;
  }
  html.native-app .home-deals {
    width:100%;
    margin:12px 0 0;
    border-radius:10px;
  }
}