/* app-frame-boundary-fix — 430px frame boundary */
  #shell,
  .screen,
  nav#nav-home,
  #snack-wrap,
  #np-snack-wrap,
  #home-notifications,
  .rdm-scrim {
    max-width: min(430px, 100vw) !important;
    width: min(430px, 100vw) !important;
    box-sizing: border-box !important;
  }

  #shell,
  .screen {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  #shell {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .screen {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    overflow: hidden !important;
  }

  #shell .screen:not(.active) {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    z-index: 1 !important;
  }

  #shell .screen.active {
    display: flex !important;
  }

  nav#nav-home {
    position: fixed !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(430px, 100vw) !important;
    max-width: 100vw !important;
    height: 60px !important;
    border-radius: 0 !important;
  }

  #snack-wrap,
  #np-snack-wrap {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(430px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    padding: 0 8px !important;
  }

  .rdm-scrim {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(430px, 100vw) !important;
    max-width: 100vw !important;
  }

  .rdm-sheet {
    width: min(430px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 8px auto !important;
  }

  /* Scroll containment fix — the category screen was missing from the
     active-screen scroll list, so its inner .scroll never got the overflow-y
     rule and the fixed viewport effectively locked it. */
  .screen > .scroll,
  #screen-home .scroll,
  #sc-catpage .scroll {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Home top bar — main.css .topbar flex rule is dead (same unclosed-brace
     bug), so icon buttons stacked vertically below the 64px bar. Restore
     the flex row here; loaded last so it cannot be overridden again. */
  #screen-home .topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 10 !important;
    height: 52px !important;
    padding: 6px 12px !important;
  }

  /* Notification badge is intentionally rendered in the home topbar and
     toggled by JS; restore the same badge presentation used in the backup. */
  #screen-home .icon-btn .badge,
  #screen-home #notif-badge {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: var(--md-error) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid var(--md-white) !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    z-index: 3 !important;
  }

  /* Home Top Sellers + Popular sections: all cards in ONE horizontal
     scroll row. Base .seller-carousel flex/overflow rule is dead (same
     main.css brace bug), so cards used to stack vertically. */
  #screen-home .seller-carousel,
  #top-sellers-carousel,
  #home-popular-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x !important;
    overscroll-behavior-x: contain !important;
  }

  #screen-home .seller-card {
    flex: 0 0 172px !important;
  }

  #screen-home #top-sellers-carousel .prod-card-m3,
  #screen-home #home-popular-grid .prod-card-m3 {
    flex: 0 0 172px !important;
    width: 172px !important;
    max-width: 172px !important;
    min-width: 172px !important;
  }

  #screen-home #top-sellers-carousel .prod-img-wrap,
  #screen-home #home-popular-grid .prod-img-wrap {
    height: 162px !important;
    min-height: 162px !important;
  }

  #screen-home #top-sellers-carousel .prod-info,
  #screen-home #home-popular-grid .prod-info {
    padding: 12px 12px 14px !important;
    gap: 8px !important;
    background: var(--md-surface-2) !important;
  }

  #screen-home #top-sellers-carousel .prod-name-m3,
  #screen-home #home-popular-grid .prod-name-m3 {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  #screen-home #top-sellers-carousel .prod-price-m3,
  #screen-home #home-popular-grid .prod-price-m3 {
    font-size: 15px !important;
  }

  #screen-home #top-sellers-carousel .prod-price-row .prod-fab,
  #screen-home #home-popular-grid .prod-price-row .prod-fab {
    position: static !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    border-radius: 16px 0 !important;
    box-shadow: 0 6px 14px rgba(255, 69, 0, 0.24) !important;
  }

  #screen-home #top-sellers-carousel .prod-price-row .prod-fab svg,
  #screen-home #home-popular-grid .prod-price-row .prod-fab svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Keep the cart summary inset and compact so all four corners stay visible. */
  #screen-cart,
  #screen-cart.screen.active,
  #screen-cart .scroll-body {
    background: var(--md-surface-1) !important;
  }
  #screen-checkout,
  #screen-checkout.screen.active,
  #screen-checkout .scroll-body {
    background: var(--md-surface-1) !important;
  }
  #screen-products,
  #screen-products.screen.active,
  #screen-products .scroll,
  #screen-products .scroll-body,
  #screen-products .prod-grid-m3,
  #screen-top-sellers,
  #screen-top-sellers.screen.active,
  #screen-top-sellers .scroll,
  #screen-top-sellers .scroll-body,
  #screen-top-sellers .prod-grid-m3,
  #screen-popular,
  #screen-popular.screen.active,
  #screen-popular .scroll,
  #screen-popular .scroll-body,
  #screen-popular .prod-grid-m3 {
    background: #FFF8F6 !important;
  }

  #screen-products .scroll-body,
  #screen-top-sellers .scroll-body,
  #screen-popular .scroll-body {
    background: #FFF8F6 !important;
    padding-top: 12px !important;
  }
  #screen-home,
  #screen-home.screen.active,
  #screen-home .scroll {
    background: #FFF8F6 !important;
  }
  #screen-cart .summary-card {
    width: calc(100% - 24px) !important;
    margin: 8px 12px 10px !important;
    padding: 16px 16px 14px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  #screen-cart .summary-heading { margin-bottom: 8px !important; }
  #screen-cart .summary-card .sum-row { padding: 7px 0 !important; }
  #screen-cart .summary-card .sum-row.total {
    margin-top: 6px !important;
    padding-top: 10px !important;
  }
  #screen-cart .bottom-btn-bar {
    position: static !important;
    bottom: auto !important;
    z-index: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: var(--md-surface-4) !important;
    padding: 8px 12px 10px !important;
    border-top: none !important;
  }
  #screen-cart .cart-empty-cta {
    flex: 0 0 auto !important;
    height: 54px !important;
    min-height: 54px !important;
  }
  #screen-cart .bottom-btn-bar .btn-filled {
    background: linear-gradient(135deg, #FF8E3E 0%, #D14500 100%) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 18px rgba(209, 69, 0, 0.22) !important;
    color: #fff !important;
  }
  html body #screen-cart .bottom-btn-bar .btn-filled,
  html body #screen-cart .bottom-btn-bar .btn-filled span,
  html body #screen-cart .bottom-btn-bar .btn-filled .price-currency,
  html body #screen-cart .bottom-btn-bar .btn-filled .price-num {
    color: #fff !important;
  }
  #screen-cart .bottom-btn-bar .btn-filled:hover {
    background: linear-gradient(135deg, #FF8E3E 0%, #D14500 100%) !important;
  }

  /* Full Top Sellers + Popular pages: 2-column product grid,
     permanently (same layout as the Products page). */
  #screen-top-sellers .prod-grid-m3,
  #screen-popular .prod-grid-m3 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    background: #F7F3F1 !important;
  }

  #screen-top-sellers .prod-card-m3,
  #screen-popular .prod-card-m3,
  #screen-products .prod-card-m3 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    background: #F8F4F2 !important;
  }

  /* Category page product grid: 2 columns (base .pgrid rule is dead —
     same main.css brace bug — so products used to stack one per row). */
  #sc-catpage .pgrid,
  #catpage-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    overflow-x: hidden !important;
  }

  /* Home "All Products" grid: 2 columns (base .products-grid rule is
     dead from the same main.css brace bug, so it stacked one per row). */
  #screen-home .products-grid,
  #home-products-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    overflow-x: hidden !important;
  }

  /* Logo box stays far left; wordmark stays centered; bell + profile
     pinned to the top right corner. */
  #screen-home .topbar > div:first-child {
    width: 40px !important;
    margin-right: auto !important;
    flex: 0 0 auto !important;
  }

  #screen-home .topbar > div:first-child svg {
    width: 24px !important;
    height: 24px !important;
  }

  #screen-home .topbar .topbar-logo {
    font-size: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  #screen-home .topbar .icon-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }