/* Customer storefront: a quiet, mobile-first layout. Admin styles stay separate. */
.app-shell {
  display: flex;
  flex-direction: column;
  color-scheme: light;
  --brand: #ff5900;
  --brand-hover: #e84e00;
  --brand-pressed: #ce4500;
  --orange: #ff5900;
  --gold: #ffb641;
  --cream: #f5f0e7;
  --page: #fff;
  --surface: #fff;
  --surface-2: #f6f6f6;
  --heading: #262626;
  --body: #262626;
  --muted: #808080;
  --border: #e6e6e6;
  --shadow: none;
  --shadow-lg: none;
  --max-width: 1080px;
  color: var(--body);
  background: #fff;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.app-shell .content-wrap { width: min(1080px, calc(100% - 64px)); }
.app-shell main { flex: 1; width: 100%; min-width: 0; padding: 0 0 48px; }
.app-shell .site-footer { display: none; }
.app-shell :is(h1, h2, h3) { color: var(--heading); letter-spacing: -.035em; }
.app-shell .page-heading { font-size: 28px; font-weight: 750; }
.app-shell .page-subtitle { font-size: 14px; }
.app-shell .page-stack { padding-top: 30px; gap: 28px; }
.app-shell .section-heading { font-size: 23px; }
.app-shell .eyebrow { text-transform: none; letter-spacing: 0; }

/* One navigation, four destinations. */
.app-shell.simple-app .site-header {
  height: 76px;
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid var(--border);
  backdrop-filter: none;
}
.app-shell.simple-app .header-row { display: flex; gap: 40px; }
.app-shell .brand { gap: 8px; color: var(--brand); }
.app-shell .brand-name { font-size: 24px; font-weight: 750; letter-spacing: -.055em; }
.app-shell .brand-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--brand); box-shadow: none; }
.app-shell .brand-mark svg { width: 27px; height: 27px; }
.app-shell .brand-tag { display: none; }
.app-shell .simple-desktop-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.app-shell .simple-desktop-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-size: 14px; font-weight: 700; color: #777; }
.app-shell .simple-desktop-nav a.is-active { color: var(--heading); }
.app-shell .simple-desktop-nav a.is-active svg { color: var(--brand); }
.app-shell .simple-desktop-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.app-shell .header-actions { margin-left: 0; }
.app-shell .icon-button { border-radius: 50%; }
.app-shell .cart-icon-btn { width: 44px; height: 44px; border: 1px solid var(--border); background: #fff; color: var(--heading); }
.app-shell .cart-icon-btn .badge-count { top: -2px; right: -2px; border: 2px solid #fff; min-width: 20px; height: 20px; }
.app-shell .preview-note { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 27px; padding: 4px 16px; color: #858585; background: #fff; font-size: 10px; line-height: 16px; text-align: center; }
.app-shell .preview-note a, .app-shell .preview-note button { padding: 0; border: 0; color: #666; background: transparent; font-size: inherit; text-decoration: underline; }
.app-shell .bottom-nav { box-shadow: none; backdrop-filter: none; }
.app-shell .simple-mobile-bar { display: none; }

/* Home */
.app-shell .home-masthead { padding: 28px 0 32px; background: var(--brand); color: #fff; }
.app-shell .home-masthead > :is(.masthead-row, .home-search) { width: min(1080px, calc(100% - 64px)); margin-inline: auto; }
.app-shell .masthead-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.app-shell .delivery-link { display: inline-flex; align-items: center; gap: 7px; border: 0; padding: 4px 0; background: transparent; color: #fff; font-size: 18px; line-height: 26px; }
.app-shell .delivery-link strong { font-weight: 750; }
.app-shell .delivery-link svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.app-shell .home-masthead .cart-icon-btn { width: 46px; height: 46px; border: 0; }
.app-shell .home-masthead .cart-icon-btn svg { width: 23px; height: 23px; }
.app-shell .home-search { position: relative; display: block; }
.app-shell .home-search input, .app-shell .home-search .search-input { height: 50px; border: 1px solid #e5e5e5; border-radius: 999px; padding-left: 46px; background: #f8f8f8; color: #262626; font-size: 16px; font-weight: 650; box-shadow: none; }
.app-shell .home-search input::placeholder { color: #343434; opacity: 1; }
.app-shell .home-search > svg, .app-shell .home-search .search-wrap > svg { position: absolute; top: 50%; left: 17px; width: 21px; height: 21px; color: #a0a0a0; transform: translateY(-50%); fill: none; stroke: currentColor; stroke-width: 1.8; }
.app-shell .home-content { display: grid; gap: 32px; width: min(1080px, calc(100% - 64px)); margin: 32px auto 0; }
.app-shell .home-content > section { min-width: 0; }
.app-shell .category-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.app-shell .category-tile { min-width: 0; min-height: 123px; padding: 13px 5px 12px; border: 0; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--heading); background: var(--cream); text-align: center; }
.app-shell .category-tile:hover { background: #eee7db; }
.app-shell .category-tile > span:last-child { font-size: 13px; font-weight: 750; line-height: 1.15; }
.app-shell .category-art { width: 66px; height: 66px; flex: 0 0 auto; display: grid; place-items: center; }
.app-shell .category-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.app-shell .simple-promo { position: relative; min-height: 235px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 30px 36px; border-radius: 22px; color: #fff; background: var(--brand); }
.app-shell .promo-copy { position: relative; z-index: 1; max-width: 60%; }
.app-shell .promo-copy :is(h1, h2) { margin: 0; color: #fff; font-size: 35px; font-weight: 750; line-height: 1.12; letter-spacing: -.045em; }
.app-shell .promo-copy p { max-width: 350px; margin: 10px 0 17px; color: #fff; font-size: 15px; line-height: 1.5; }
.app-shell .promo-copy a { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 14px; font-weight: 750; text-decoration: underline; text-underline-offset: 4px; }
.app-shell .promo-copy a svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.app-shell .promo-art { width: 31%; max-width: 270px; flex: 0 0 auto; margin: -12px -2px -12px 10px; }
.app-shell .promo-art svg { display: block; width: 100%; height: auto; }
.app-shell .simple-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.app-shell .simple-section-head h2 { margin: 0; font-size: 24px; font-weight: 750; line-height: 1.25; }
.app-shell .simple-section-head a { flex: 0 0 auto; color: var(--heading); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.app-shell .simple-store-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.app-shell .simple-store { min-width: 0; display: flex; align-items: center; gap: 14px; padding: 18px 14px; border: 1px solid var(--border); border-radius: 16px; background: #fff; }
.app-shell .simple-store:hover { border-color: #aaa; }
.app-shell .simple-store-logo { width: 66px; height: 66px; flex: 0 0 auto; overflow: hidden; display: grid; place-items: center; border-radius: 13px; background: var(--cream); color: var(--brand); font-size: 24px; font-weight: 750; }
.app-shell .simple-store-logo img { width: 100%; height: 100%; object-fit: cover; }
.app-shell .simple-store-copy { min-width: 0; }
.app-shell .simple-store-copy h3, .app-shell .simple-store-copy strong { display: block; margin: 0; font-size: 16px; font-weight: 750; line-height: 1.3; }
.app-shell .simple-store-copy p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.app-shell .simple-store-copy small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.app-shell .simple-store-copy > span { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; color: var(--muted); font-size: 11px; }
.app-shell .simple-store-copy > span svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; }

/* Orders */
.app-shell .simple-page { width: min(900px, calc(100% - 64px)); margin: 32px auto 0; }
.app-shell .content-wrap > .simple-page { width: min(900px, 100%); }
.app-shell .simple-page.page-stack { padding-top: 0; }
.app-shell .simple-page.page-stack > h1 { margin-bottom: 0; }
.app-shell .simple-page > h1 { margin: 0 0 26px; font-size: 28px; font-weight: 750; line-height: 1.2; }
.app-shell .simple-tabs { display: flex; align-items: center; gap: 9px; overflow-x: auto; margin: 0; padding: 1px 0; scrollbar-width: none; }
.app-shell .simple-tabs::-webkit-scrollbar { display: none; }
.app-shell .simple-tabs :is(a, button) { display: inline-flex; align-items: center; justify-content: center; min-height: 41px; flex: 0 0 auto; padding: 8px 18px; border: 1px solid var(--border); border-radius: 999px; color: var(--heading); background: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; }
.app-shell .simple-tabs .is-active { color: #fff; border-color: #262626; background: #262626; }
.app-shell .purchase-list { display: grid; gap: 18px; }
.app-shell .purchase-card { overflow: hidden; border: 1px solid var(--border); border-radius: 19px; background: #fff; }
.app-shell .purchase-top { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; min-height: 54px; padding: 13px 19px; border-bottom: 1px solid var(--border); color: #858585; font-size: 13px; font-weight: 650; }
.app-shell .purchase-top .status-badge { padding: 4px 6px; min-height: 0; border-radius: 4px; color: #777; background: #f5f5f5; font-size: 12px; }
.app-shell .purchase-top .status-badge:before { display: none; }
.app-shell .purchase-top time { color: #858585; }
.app-shell .purchase-main { display: flex; align-items: center; gap: 15px; padding: 19px 19px 0; }
.app-shell .purchase-main .simple-store-logo { width: 61px; height: 61px; border-radius: 10px; }
.app-shell .purchase-main :is(h2, h3) { margin: 0; font-size: 18px; font-weight: 750; line-height: 1.3; }
.app-shell .purchase-main p { margin: 3px 0 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.app-shell .purchase-main small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.app-shell .purchase-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px; }
.app-shell .purchase-bottom > div { display: grid; gap: 3px; }
.app-shell .purchase-bottom strong { font-size: 16px; font-weight: 750; }
.app-shell .purchase-bottom a:not(.button) { color: var(--heading); font-size: 14px; font-weight: 750; text-decoration: underline; text-underline-offset: 4px; }
.app-shell .purchase-bottom .button { min-height: 41px; border-radius: 999px; padding: 9px 17px; border-color: #262626; color: #262626; background: #fff; font-size: 13px; white-space: nowrap; }
.app-shell .purchase-bottom .button:hover { background: #f7f7f7; }
.app-shell .purchase-status-note { padding: 11px 19px; border-top: 1px solid #efefef; color: #777; background: #f8f8f8; font-size: 12px; line-height: 1.5; }
.app-shell .purchase-status-note p { margin: 0; }

/* Balance */
.app-shell .balance-hero { padding: 28px 0 34px; color: #fff; background: var(--brand); }
.app-shell .balance-hero > :is(.balance-inner, .content-wrap) { width: min(900px, calc(100% - 64px)); margin-inline: auto; }
.app-shell .balance-hero > :is(h1, .balance-label, .balance-amount, .balance-actions) { width: min(900px, calc(100% - 64px)); margin-inline: auto; }
.app-shell .balance-hero h1 { margin-top: 0; margin-bottom: 30px; color: #fff; font-size: 24px; font-weight: 750; }
.app-shell .balance-hero .masthead-row h1 { margin: 0; }
.app-shell .balance-hero .icon-button { color: #262626; background: #fff; }
.app-shell .balance-label { margin-top: 0; margin-bottom: 4px; color: #fff; font-size: 15px; font-weight: 650; }
.app-shell .balance-amount { margin-top: 0; margin-bottom: 0; font-size: 36px; font-weight: 750; line-height: 1.2; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.app-shell .balance-amount small { font-size: .64em; font-weight: 400; }
.app-shell .balance-actions { margin-top: 16px; display: flex; gap: 10px; }
.app-shell .balance-hero .button { min-height: 38px; border-radius: 999px; color: var(--heading); background: #fff; }
.app-shell .balance-content { width: min(900px, calc(100% - 64px)); margin: 28px auto 0; display: grid; gap: 28px; }
.app-shell .balance-info { padding: 19px; display: flex; gap: 16px; align-items: center; border: 0; border-radius: 17px; color: var(--heading); background: var(--cream); }
.app-shell .balance-info > svg { width: 41px; height: 41px; flex: 0 0 auto; fill: none; stroke: var(--brand); stroke-width: 1.7; }
.app-shell .balance-info h2 { margin: 0 0 4px; font-size: 17px; font-weight: 750; }
.app-shell .balance-info p { margin: 0; font-size: 13px; line-height: 1.5; }
.app-shell .payment-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.app-shell .method-tile { position: relative; min-height: 116px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 9px; padding: 17px; border: 1px solid var(--border); border-radius: 16px; color: var(--heading); background: #fff; text-align: left; }
.app-shell .method-tile > svg { width: 27px; height: 27px; fill: none; stroke: var(--brand); stroke-width: 1.8; }
.app-shell .method-tile strong { display: block; font-size: 14px; font-weight: 750; line-height: 1.3; }
.app-shell .method-tile small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.4; }
.app-shell .transaction-list { display: grid; }
.app-shell .transaction-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 17px 0; border-bottom: 1px solid var(--border); }
.app-shell .transaction-row:last-child { border-bottom: 0; }
.app-shell .transaction-row > svg, .app-shell .transaction-icon { width: 38px; height: 38px; display: grid; place-items: center; padding: 8px; border-radius: 50%; color: var(--heading); background: #f5f5f5; fill: none; stroke: currentColor; stroke-width: 1.8; }
.app-shell .transaction-icon svg { width: 22px; height: 22px; }
.app-shell .transaction-row strong { display: block; font-size: 14px; font-weight: 700; }
.app-shell .transaction-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.app-shell .transaction-row > span:last-child { font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; text-align: right; }

/* Account */
.app-shell .account-profile { display: flex; align-items: center; gap: 14px; margin: 2px 0 27px; }
.app-shell .account-profile .avatar { width: 56px; height: 56px; flex: 0 0 auto; border: 0; background: #ffe9df; color: #262626; font-size: 23px; font-weight: 750; }
.app-shell .account-profile h1, .app-shell .account-profile h2 { margin: 0; font-size: 24px; font-weight: 750; line-height: 1.25; }
.app-shell .account-profile p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.app-shell .account-profile > .icon-button { margin-left: auto; color: var(--heading); }
.app-shell .simple-page > .account-profile, .app-shell .simple-page > .account-highlight { margin-bottom: 0; }
.app-shell .account-profile .icon-button svg { width: 25px; height: 25px; }
.app-shell .account-highlight { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 23px; margin-bottom: 28px; overflow: hidden; border-radius: 19px; background: var(--cream); }
.app-shell .account-highlight h2 { margin: 0; font-size: 22px; font-weight: 750; line-height: 1.25; }
.app-shell .account-highlight p { margin: 8px 0 15px; font-size: 14px; line-height: 1.5; }
.app-shell .account-highlight a { font-size: 14px; font-weight: 750; text-decoration: underline; text-underline-offset: 4px; }
.app-shell .account-highlight > svg, .app-shell .account-highlight > .highlight-art { width: 95px; height: 95px; flex: 0 0 auto; color: var(--brand); }
.app-shell .account-highlight > svg:last-child { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; }
.app-shell .account-highlight > div { flex: 1; }
.app-shell .account-highlight .payment-icon { width: 46px; height: 46px; color: var(--brand); background: #fff; }
.app-shell .account-highlight p { margin: 5px 0 0; }
.app-shell .simple-empty-copy { margin: 0; padding: 18px 0 24px; color: var(--muted); }
.app-shell .account-highlight .highlight-art svg { width: 100%; height: 100%; }
.app-shell .account-menu { display: grid; }
.app-shell .menu-row { width: 100%; display: flex; align-items: center; gap: 17px; min-height: 66px; padding: 16px 3px; border: 0; color: var(--heading); background: #fff; text-align: left; }
.app-shell .menu-row:hover { background: #fafafa; }
.app-shell .menu-row > svg { width: 23px; height: 23px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-shell .menu-row > span { flex: 1; font-size: 16px; font-weight: 700; }
.app-shell .menu-row > svg:last-child { width: 17px; height: 17px; color: #999; }
.app-shell .menu-row > small { color: var(--muted); font-size: 12px; }
.app-shell .account-section { margin-top: 18px; padding-top: 17px; border-top: 8px solid #f7f7f7; }
.app-shell .account-section > h2 { margin: 0 0 8px; color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: 0; }

/* Shared shopping controls keep the same uncomplicated visual language. */
.app-shell .button { min-height: 44px; border-radius: 11px; font-weight: 700; box-shadow: none; }
.app-shell .button.primary { color: #fff; background: var(--brand); box-shadow: none; }
.app-shell .button.primary:hover { background: var(--brand-hover); }
.app-shell .button.secondary { color: var(--heading); background: #f4f4f4; }
.app-shell .button.outline { color: var(--heading); border-color: var(--heading); background: #fff; }
.app-shell .button.ghost, .app-shell .text-link { color: var(--heading); }
.app-shell .chip { min-height: 39px; padding: 8px 16px; color: var(--heading); border-color: var(--border); font-weight: 700; }
.app-shell .chip:hover, .app-shell .chip.is-active { color: #fff; border-color: var(--heading); background: var(--heading); }
.app-shell .card, .app-shell .shop-hero { border-radius: 16px; box-shadow: none; }
.app-shell .store-card:hover, .app-shell .product-card:hover { transform: none; box-shadow: none; }
.app-shell .store-cover, .app-shell .shop-banner, .app-shell .product-image, .app-shell .gallery-primary { background: var(--cream); }
.app-shell .store-cover:before, .app-shell .shop-banner:after { display: none; }
.app-shell .store-avatar { box-shadow: none; }
.app-shell .product-image[data-tone] { background: var(--cream); }
.app-shell .product-image .product-placeholder, .app-shell .gallery-primary .product-placeholder { color: var(--brand); background: #fff7ef; box-shadow: none; transform: none; }
.app-shell .favorite-button { color: #262626; background: #fff; backdrop-filter: none; }
.app-shell .empty-state { min-height: 240px; border: 0; padding: 36px 20px; border-radius: 0; background: #fff; }
.app-shell .empty-art { width: 68px; height: 68px; margin-bottom: 19px; border-radius: 50%; color: #777; background: #f6f6f6; }
.app-shell .empty-state h2 { font-size: 20px; font-weight: 750; }
.app-shell .empty-state p { max-width: 300px; margin: 8px auto 22px; font-size: 14px; }
.app-shell .info-callout { border: 0; border-radius: 12px; color: #625c52; background: var(--cream); }
.app-shell .status-badge { font-size: 11px; font-weight: 650; }
.app-shell .setup-panel { border: 0; padding: 35px 22px; }
.app-shell .setup-panel .brand-mark { background: var(--brand); }
.app-shell .setup-list li { background: #f7f7f7; }
.app-shell .input, .app-shell .select, .app-shell .textarea, .app-shell .search-input { background: #fff; box-shadow: none; }
.app-shell .input:focus, .app-shell .select:focus, .app-shell .textarea:focus, .app-shell .search-input:focus { border-color: #777; box-shadow: none; }
.app-shell .radio-card.is-selected { border-color: var(--brand); background: #fff8f4; box-shadow: none; }
.app-shell .shop-identity .store-avatar { position: relative; top: auto; left: auto; }

/* Light is the default; the explicit appearance preference still works. */
:root.theme-dark .app-shell {
  color-scheme: dark;
  --page: #181818; --surface: #212121; --surface-2: #292929;
  --cream: #302b25; --heading: #f7f7f7; --body: #f1f1f1;
  --muted: #aaa; --border: #3b3b3b;
  background: var(--page);
}
:root.theme-dark .app-shell :is(.site-header, .simple-mobile-bar, .simple-store, .purchase-card, .method-tile, .menu-row, .empty-state, .preview-note, .bottom-nav, .simple-tabs button, .button.outline, .cart-icon-btn) { color: var(--heading); background: var(--page); border-color: var(--border); }
:root.theme-dark .app-shell :is(.input, .select, .textarea, .search-input) { color: var(--heading); background: var(--surface); }
:root.theme-dark .app-shell .simple-tabs .is-active { color: #181818; background: #f7f7f7; border-color: #f7f7f7; }
:root.theme-dark .app-shell :is(.purchase-top .status-badge, .empty-art, .account-highlight .payment-icon, .button.secondary) { color: var(--heading); background: var(--surface-2); }
:root.theme-dark .app-shell :is(.purchase-bottom .button, .purchase-bottom a:not(.button), .simple-section-head a, .simple-desktop-nav a.is-active, .bottom-link.is-active) { color: var(--heading); }
:root.theme-dark .app-shell .account-section { border-color: var(--surface-2); }
:root.theme-dark .app-shell .category-tile:hover { background: #3b342b; }
:root.theme-dark .app-shell .home-search .search-input { color: #262626; background: #f8f8f8; }

@media (max-width: 1000px) and (min-width: 768px) {
  .app-shell .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .app-shell .simple-store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell .simple-desktop-nav { gap: 20px; }
  .app-shell.simple-app .header-row { gap: 24px; }
}

@media (max-width: 767px) {
  .app-shell { padding-bottom: calc(74px + env(safe-area-inset-bottom)); font-size: 14px; }
  .app-shell.simple-app .site-header { display: none; }
  .app-shell .simple-mobile-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border); background: #fff; }
  .app-shell .simple-mobile-bar > span { font-weight: 750; }
  .app-shell .content-wrap { width: calc(100% - 32px); }
  .app-shell main { padding-bottom: 25px; }
  .app-shell .page-stack { padding-top: 23px; gap: 24px; }
  .app-shell .page-heading { font-size: 25px; }
  .app-shell .page-subtitle { margin-top: 6px; font-size: 13px; }
  .app-shell .section-heading { font-size: 21px; }
  .app-shell .preview-note { min-height: 22px; padding-block: 2px; font-size: 9px; }
  .app-shell .bottom-nav { height: calc(69px + env(safe-area-inset-bottom)); padding: 0 8px env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #ededed; background: #fff; }
  .app-shell .bottom-link { height: 68px; align-content: center; gap: 4px; color: #858585; font-size: 11px; line-height: 15px; font-weight: 700; }
  .app-shell .bottom-link svg { width: 24px; height: 24px; stroke-width: 1.9; }
  .app-shell .bottom-link.is-active { color: var(--heading); }
  .app-shell .bottom-link.is-active svg { color: var(--brand); }
  .app-shell .home-masthead { padding: 20px 0 25px; }
  .app-shell .home-masthead > :is(.masthead-row, .home-search) { width: calc(100% - 32px); }
  .app-shell .masthead-row { margin-bottom: 13px; }
  .app-shell .delivery-link { font-size: 15px; gap: 5px; }
  .app-shell .home-masthead .cart-icon-btn { display: inline-grid; width: 42px; height: 42px; }
  .app-shell .home-search input, .app-shell .home-search .search-input { height: 45px; padding-left: 42px; font-size: 15px; }
  .app-shell .home-search > svg, .app-shell .home-search .search-wrap > svg { width: 20px; height: 20px; left: 15px; }
  .app-shell .home-content { width: calc(100% - 32px); margin-top: 24px; gap: 27px; }
  .app-shell .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .app-shell .category-tile { min-height: 90px; padding: 9px 3px 10px; border-radius: 14px; gap: 4px; }
  .app-shell .category-tile > span:last-child { font-size: 11px; line-height: 1.1; }
  .app-shell .category-art { width: 51px; height: 51px; }
  .app-shell .simple-promo { min-height: 185px; padding: 23px 18px; border-radius: 18px; }
  .app-shell .promo-copy { max-width: 64%; }
  .app-shell .promo-copy :is(h1, h2) { font-size: 27px; line-height: 1.12; }
  .app-shell .promo-copy p { margin: 8px 0 15px; font-size: 12px; line-height: 1.45; }
  .app-shell .promo-copy a { font-size: 12px; }
  .app-shell .promo-art { width: 38%; margin-right: -9px; margin-left: 0; }
  .app-shell .simple-section-head { align-items: baseline; margin-bottom: 14px; }
  .app-shell .simple-section-head h2 { font-size: 22px; }
  .app-shell .simple-section-head a { font-size: 12px; }
  .app-shell .simple-store-grid { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .app-shell .simple-store { padding: 14px; border-radius: 15px; }
  .app-shell .simple-store-logo { width: 59px; height: 59px; border-radius: 11px; font-size: 22px; }
  .app-shell .simple-store-copy h3, .app-shell .simple-store-copy strong { font-size: 16px; }
  .app-shell .simple-page { width: calc(100% - 32px); margin-top: 26px; }
  .app-shell .simple-page > h1 { margin-bottom: 25px; font-size: 25px; }
  .app-shell .simple-tabs { gap: 8px; margin-bottom: 0; }
  .app-shell .simple-tabs :is(a, button) { min-height: 39px; padding: 8px 16px; font-size: 13px; }
  .app-shell .purchase-list { gap: 16px; }
  .app-shell .purchase-top { min-height: 47px; padding: 12px 16px; gap: 8px; font-size: 12px; }
  .app-shell .purchase-top .status-badge { font-size: 11px; }
  .app-shell .purchase-main { gap: 13px; padding: 17px 16px 0; }
  .app-shell .purchase-main .simple-store-logo { width: 55px; height: 55px; }
  .app-shell .purchase-main :is(h2, h3) { font-size: 17px; }
  .app-shell .purchase-main p { font-size: 12px; }
  .app-shell .purchase-bottom { padding: 17px 16px 19px; gap: 12px; }
  .app-shell .purchase-bottom strong { font-size: 14px; }
  .app-shell .purchase-bottom a:not(.button) { font-size: 13px; }
  .app-shell .purchase-bottom .button { min-height: 39px; padding: 8px 15px; font-size: 12px; }
  .app-shell .balance-hero { padding: 24px 0 31px; }
  .app-shell .balance-hero > :is(.balance-inner, .content-wrap, h1, .balance-label, .balance-amount, .balance-actions) { width: calc(100% - 32px); }
  .app-shell .balance-hero h1 { margin-bottom: 29px; font-size: 21px; }
  .app-shell .balance-label { font-size: 14px; }
  .app-shell .balance-amount { font-size: 33px; }
  .app-shell .balance-content { width: calc(100% - 32px); margin-top: 23px; gap: 27px; }
  .app-shell .balance-info { padding: 18px; gap: 13px; }
  .app-shell .balance-info h2 { font-size: 16px; }
  .app-shell .balance-info p { font-size: 12px; }
  .app-shell .balance-info > svg { width: 35px; height: 35px; }
  .app-shell .payment-methods { gap: 9px; }
  .app-shell .method-tile { min-height: 107px; gap: 9px; padding: 13px 10px; border-radius: 13px; }
  .app-shell .method-tile strong { font-size: 12px; }
  .app-shell .method-tile small { font-size: 10px; }
  .app-shell .method-tile > svg { width: 25px; height: 25px; }
  .app-shell .transaction-row { grid-template-columns: 35px minmax(0, 1fr) auto; gap: 10px; padding-block: 15px; }
  .app-shell .transaction-row strong, .app-shell .transaction-row > span:last-child { font-size: 12px; }
  .app-shell .transaction-row small { font-size: 11px; }
  .app-shell .account-profile { margin-bottom: 23px; gap: 12px; }
  .app-shell .account-profile .avatar { width: 49px; height: 49px; font-size: 22px; }
  .app-shell .account-profile h1, .app-shell .account-profile h2 { font-size: 22px; }
  .app-shell .account-profile p { font-size: 13px; }
  .app-shell .account-highlight { padding: 21px 18px; margin-bottom: 24px; gap: 10px; }
  .app-shell .account-highlight h2 { font-size: 21px; }
  .app-shell .account-highlight p { font-size: 13px; }
  .app-shell .account-highlight a { font-size: 13px; }
  .app-shell .account-highlight > svg, .app-shell .account-highlight > .highlight-art { width: 70px; height: 85px; }
  .app-shell .menu-row { min-height: 62px; gap: 15px; padding-block: 15px; }
  .app-shell .menu-row > span { font-size: 15px; }
  .app-shell .menu-row > svg { width: 22px; height: 22px; }
  .app-shell .account-section { margin-top: 17px; padding-top: 15px; }
  .app-shell .product-grid { gap: 12px; }
  .app-shell .product-image { min-height: 152px; }
  .app-shell .empty-state { min-height: 265px; padding-inline: 15px; }
  .app-shell .empty-state p { font-size: 13px; }
}

@media (max-width: 359px) {
  .app-shell .category-grid { gap: 6px; }
  .app-shell .category-tile { min-height: 84px; padding-inline: 2px; }
  .app-shell .category-tile > span:last-child { font-size: 10px; }
  .app-shell .category-art { width: 46px; height: 46px; }
  .app-shell .promo-copy :is(h1, h2) { font-size: 24px; }
  .app-shell .promo-copy p { font-size: 11px; }
  .app-shell .purchase-bottom .button { padding-inline: 12px; font-size: 11px; }
  .app-shell .payment-methods { grid-template-columns: minmax(0, 1fr); }
  .app-shell .method-tile { min-height: 70px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 14px; }
}