/* Browser storefront, 2026-09. The native menu keeps its visual-viewport shell.
   Browser pages use the document, with a dedicated viewport only for dialogs. */
.menu-shopping-layout { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.menu-browser-search, .menu-browser-cart, .menu-browser-hero { display: none; }
.storefront-browser-nav { display: none; }
html[data-consumer-shell="browser"] .storefront-browser-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 10px max(18px, calc((100vw - 1320px) / 2)); background: var(--storefront-paper); border-bottom: 1px solid var(--storefront-line); color: var(--storefront-ink); }
.storefront-browser-nav a { text-decoration: none; }
.storefront-browser-brand { font-size: 17px; font-weight: 850; letter-spacing: -.035em; }
.storefront-browser-nav > div { display: flex; align-items: center; gap: 20px; }
.storefront-browser-nav > div a, .storefront-browser-nav button { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 700; }
.storefront-browser-nav button { background: transparent; border: 0; cursor: pointer; }
html[data-consumer-shell="browser"] { position: static; width: 100%; height: auto; overflow: auto; overscroll-behavior: auto; }
html[data-consumer-shell="browser"] body.customer-ordering { position: static; height: auto; min-height: 100svh; overflow: visible; overscroll-behavior: auto; }
html[data-consumer-shell="browser"] #menu-root,
html[data-consumer-shell="browser"] .menu-page { height: auto; min-height: 100svh; overflow: visible; }
/* The shared touch sheet GPU-promotes every [class*="menu"]. A transformed
   ancestor would anchor fixed cart/dialogs to the scrolled document again. */
html[data-consumer-shell="browser"] .menu-page { transform: none; }
html[data-consumer-shell="browser"] .menu-shopping-layout { display: block; flex: none; overflow: visible; }
html[data-consumer-shell="browser"] .menu-scroll { overflow: visible; padding-bottom: 110px !important; }
html[data-consumer-shell="browser"] .menu-categories { position: sticky !important; top: 0 !important; min-width: 0; scrollbar-width: thin; }
html[data-consumer-shell="browser"] .menu-categories::-webkit-scrollbar { display: block; height: 4px; }
html[data-consumer-shell="browser"] .menu-category-button { min-height: 44px; }
html[data-consumer-shell="browser"] .menu-item-card { min-width: 0; }
html[data-consumer-shell="browser"] .menu-item-card:focus-visible { outline: 3px solid var(--storefront-accent); outline-offset: 4px; }
html[data-consumer-shell="browser"] .menu-item-add { width: 44px !important; height: 44px !important; }
html[data-consumer-shell="browser"] .menu-item-copy h3 { overflow-wrap: anywhere; }
html[data-consumer-shell="browser"] .menu-section-heading { align-items: start; }
html[data-consumer-shell="browser"] .menu-section-heading h2 { line-height: 1.12; }
html[data-consumer-shell="browser"] .floating-cart-button { position: fixed; }
html[data-consumer-shell="browser"] .menu-browser-search { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.menu-browser-search label { flex: 1; min-width: 0; }
.menu-browser-search label span { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 700; }
.menu-browser-search input { width: 100%; min-height: 48px; padding: 12px 15px; border: 1px solid var(--storefront-line); border-radius: 14px; color: var(--storefront-ink); background: var(--storefront-paper); font-size: 16px !important; }
.menu-browser-search button { align-self: end; min-height: 48px; padding: 8px; color: var(--storefront-accent); font-size: 13px; font-weight: 700; }
html[data-consumer-shell="browser"] .customer-sheet,
html[data-consumer-shell="browser"] .customer-modal,
html[data-consumer-shell="browser"] .customer-tracking-dialog,
html[data-consumer-shell="browser"] .order-install-backdrop,
html[data-consumer-shell="browser"] .menu-page > .absolute.inset-0,
html[data-consumer-shell="browser"] .auth-overlay,
html[data-consumer-shell="browser"] .offer-detail-overlay,
html[data-consumer-shell="browser"] .redeem-overlay { position: fixed; inset: auto 0 auto; top: var(--browser-view-top, 0px); height: var(--browser-view-height, 100dvh); z-index: 100; }
html[data-consumer-shell="browser"] .customer-sheet-panel { max-height: 94% !important; }
html[data-consumer-shell="browser"] .customer-sheet-close { min-width: 44px; min-height: 44px; flex-shrink: 0; }
html[data-consumer-shell="browser"] .customer-sheet-body :is(input, textarea, select) { font-size: 16px; }
html[data-consumer-shell="browser"] .customer-modal-panel,
html[data-consumer-shell="browser"] .customer-tracking-panel,
html[data-consumer-shell="browser"] .order-install-card,
html[data-consumer-shell="browser"] .auth-panel,
html[data-consumer-shell="browser"] .redeem-panel { max-height: 94%; overflow-y: auto; overscroll-behavior: contain; }
html[data-consumer-shell="browser"] .offer-detail-panel { max-height: 94%; }
html[data-consumer-shell="browser"] .offer-detail-body { min-height: 0; overscroll-behavior: contain; }
html[data-consumer-shell="browser"] .customer-aftercare-panel { overflow: hidden; min-height: 0; }
html[data-consumer-shell="browser"] .customer-aftercare-panel > :first-child,
html[data-consumer-shell="browser"] .customer-aftercare-panel > :last-child { flex-shrink: 0; }
html[data-consumer-shell="browser"] .customer-tracking-body { min-height: 0; overscroll-behavior: contain; }
html[data-consumer-shell="browser"] .customer-tracking-panel :is(input, textarea, select) { font-size: 16px; }
html[data-consumer-shell="browser"] .customer-tracking-panel [data-browser-dialog-close],
html[data-consumer-shell="browser"] .order-install-close { min-width: 44px; min-height: 44px; }
html[data-consumer-shell="browser"] body.browser-dialog-open { overflow: hidden !important; }
html[data-consumer-shell="browser"] .order-confirmation { height: auto; min-height: 100svh; overflow: visible; }
html[data-consumer-shell="browser"] .order-confirmation-card { overflow: visible; max-height: none; }
html[data-consumer-shell="browser"] .order-confirmation-scroll { overflow: visible; flex: none; }
html[data-consumer-shell="browser"] .order-confirmation-actions { position: sticky; bottom: 0; z-index: 5; }
html[data-consumer-shell="browser"] .offers-main,
html[data-consumer-shell="browser"] .offers-header-inner { width: min(1240px, 100%) !important; max-width: 1240px !important; }
html[data-consumer-shell="browser"] .offer-card { display: flex; flex-direction: column; }
html[data-consumer-shell="browser"] .offer-card > .p-4 { flex: 1; }
html[data-consumer-shell="browser"] .offer-card-image { height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
html[data-consumer-shell="browser"] .offer-card :is(button, a) { min-height: 44px; }
html[data-consumer-shell="browser"] .offers-header-title { white-space: normal; }
@media (min-width: 720px) {
  html[data-consumer-shell="browser"] .menu-header { padding: 26px 24px !important; }
  html[data-consumer-shell="browser"] .menu-header-inner { width: min(1320px, 100%); }
  html[data-consumer-shell="browser"] .menu-header h1 { font-size: 24px !important; white-space: normal; }
  html[data-consumer-shell="browser"] .menu-header-logo { width: 64px !important; height: 64px !important; }
  html[data-consumer-shell="browser"] .menu-mode-addr { font-size: 13px; }
  html[data-consumer-shell="browser"] .menu-mode-chip { font-size: 11px; }
  html[data-consumer-shell="browser"] .menu-content { width: 100%; max-width: 1100px; }
  html[data-consumer-shell="browser"] .menu-browser-hero { display: block; width: 100%; height: 190px; object-fit: cover; border-radius: 20px; margin-bottom: 24px; }
  html[data-consumer-shell="browser"] .menu-item-media { aspect-ratio: 16 / 11; }
  html[data-consumer-shell="browser"] .menu-item-copy h3 { font-size: 16px !important; }
  html[data-consumer-shell="browser"] .menu-item-copy p { font-size: 13px; -webkit-line-clamp: 2; }
  html[data-consumer-shell="browser"] .customer-sheet { padding: 24px; }
  html[data-consumer-shell="browser"] .customer-sheet-panel { max-height: 100% !important; }
  html[data-consumer-shell="browser"] .customer-sheet-handle { display: none; }
  html[data-consumer-shell="browser"] .offers-main { padding: 36px 24px 64px !important; }
  html[data-consumer-shell="browser"] .offers-intro { padding: 32px; margin-bottom: 28px; }
  html[data-consumer-shell="browser"] .offers-intro p { font-size: 15px; }
}
@media (min-width: 1180px) {
  html[data-consumer-shell="browser"] .menu-shopping-layout { display: grid; grid-template-columns: 176px minmax(0, 1fr) 290px; align-items: start; gap: 24px; width: min(1368px, 100%); margin: 0 auto; padding: 32px 24px 64px; }
  html[data-consumer-shell="browser"] .menu-shopping-layout:not(:has(.menu-browser-cart)) { grid-template-columns: 176px minmax(0, 1fr); }
  html[data-consumer-shell="browser"] .menu-categories { flex-direction: column; align-items: stretch; padding: 4px !important; top: 24px !important; max-height: calc(100dvh - 48px); overflow: auto; border: none; background: transparent !important; box-shadow: none !important; backdrop-filter: none; }
  html[data-consumer-shell="browser"] .menu-category-button { text-align: left; white-space: normal; border-radius: 12px; padding: 12px 14px; }
  html[data-consumer-shell="browser"] .menu-scroll { min-width: 0; padding: 0 !important; background: none; }
  html[data-consumer-shell="browser"] .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html[data-consumer-shell="browser"] .menu-browser-cart { display: block; position: sticky; top: 24px; min-width: 0; padding: 22px; border: 1px solid var(--storefront-line); border-radius: 22px; background: var(--storefront-paper); box-shadow: 0 12px 30px rgba(23,37,31,.06); }
  .menu-browser-cart h2 { margin: 0 0 8px; font-size: 21px; font-weight: 800; letter-spacing: -.025em; }
  .menu-browser-cart p { font-size: 13px; line-height: 1.55; color: var(--storefront-muted); }
  .menu-browser-cart ul { list-style: none; padding: 0; margin: 18px 0; max-height: 36dvh; overflow-y: auto; overscroll-behavior: contain; }
  .menu-browser-cart li { display: flex; gap: 8px; align-items: baseline; margin: 12px 0; font-size: 13px; }
  .menu-browser-cart li span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .menu-browser-cart li strong { flex: none; font-size: 12px; }
  .menu-browser-cart-subtotal { display: flex; justify-content: space-between; gap: 8px; padding-top: 14px; border-top: 1px solid var(--storefront-line); font-size: 14px; }
  .menu-browser-cart button { display: block; width: 100%; min-height: 48px; padding: 12px; margin-top: 18px; border-radius: 13px; background: var(--storefront-accent); color: white; font-weight: 750; font-size: 14px; }
  .menu-browser-cart-note { margin-top: 12px; font-size: 12px !important; }
  html[data-consumer-shell="browser"] .floating-cart-button { display: none; }
}
@media (max-width: 359px) {
  html[data-consumer-shell="browser"] .menu-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-consumer-shell="browser"] .menu-item-media { aspect-ratio: 16 / 10; }
  html[data-consumer-shell="browser"] .menu-section-count { white-space: normal; }
}
@media (max-width: 560px) {
  html[data-consumer-shell="browser"] .storefront-browser-nav { min-height: 58px; padding: 7px 14px; gap: 10px; }
  .storefront-browser-brand { font-size: 15px; }
  .storefront-browser-nav > div { gap: 13px; }
  .storefront-browser-nav > div a:first-child { display: none; }
}
