/*
 * Sathi Foods — final mobile web refresh
 * Version: 2026-08-23
 * Purpose: consistent app-like mobile browser layout while preserving desktop and installed-PWA UI.
 */

@media (max-width: 880px) {
  :root {
    --sfm-green: #073d32;
    --sfm-green-2: #0e6549;
    --sfm-orange: #f4511e;
    --sfm-orange-2: #ff713f;
    --sfm-ink: #17251f;
    --sfm-muted: #748078;
    --sfm-line: #e8ece8;
    --sfm-bg: #f7f8f5;
    --sfm-card: #ffffff;
    --sfm-nav-h: 76px;
    --sfm-safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  html:not(.sathi-mobile-pwa),
  html:not(.sathi-mobile-pwa) body,
  html:not(.sathi-mobile-pwa) .app-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  html:not(.sathi-mobile-pwa) body.public-app-body {
    padding-bottom: calc(var(--sfm-nav-h) + var(--sfm-safe-bottom) + 24px) !important;
    background: var(--sfm-bg) !important;
    color: var(--sfm-ink);
  }

  /* ---------- Compact app-like mobile header ---------- */
  html:not(.sathi-mobile-pwa) .ck-header-v3 {
    position: sticky !important;
    top: 0;
    z-index: 2400;
    min-height: 66px !important;
    padding: 7px 12px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    background: rgba(255,255,255,.975) !important;
    border-bottom: 1px solid rgba(7,61,50,.08) !important;
    box-shadow: 0 7px 22px rgba(21,46,37,.06) !important;
    backdrop-filter: blur(18px);
  }

  html:not(.sathi-mobile-pwa) .ck-header-v3 .ck-logo-v3 {
    min-width: 0;
    gap: 9px !important;
  }

  html:not(.sathi-mobile-pwa) .ck-header-v3 .brand-mark-frame,
  html:not(.sathi-mobile-pwa) .ck-header-v3 .ck-logo-v3 > span {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
    border-radius: 15px !important;
    overflow: hidden;
    background: #fff4ea !important;
    box-shadow: 0 6px 16px rgba(244,81,30,.13) !important;
  }

  html:not(.sathi-mobile-pwa) .ck-header-v3 .brand-logo-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  html:not(.sathi-mobile-pwa) .ck-header-v3 .ck-logo-v3 > div {
    min-width: 0;
  }

  html:not(.sathi-mobile-pwa) .ck-header-v3 .ck-logo-v3 strong {
    display: block;
    overflow: hidden;
    color: #d63f14 !important;
    font-size: 15px !important;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html:not(.sathi-mobile-pwa) .ck-header-v3 .ck-logo-v3 small {
    display: block !important;
    overflow: hidden;
    max-width: 170px;
    color: #80756e !important;
    font-size: 8.5px !important;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html:not(.sathi-mobile-pwa) .ck-header-v3 .ck-nav-v3,
  html:not(.sathi-mobile-pwa) .ck-header-v3 .header-cart-link,
  html:not(.sathi-mobile-pwa) .ck-header-v3 .header-text-link,
  html:not(.sathi-mobile-pwa) .ck-header-v3 .header-primary-btn,
  html:not(.sathi-mobile-pwa) .ck-header-v3 a[aria-label="Wishlist"] {
    display: none !important;
  }

  html:not(.sathi-mobile-pwa) .ck-header-v3 .ck-actions-v3 {
    display: flex !important;
    align-items: center;
    gap: 6px !important;
  }

  html:not(.sathi-mobile-pwa) .ck-header-v3 .sathi-pwa-header-action {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center;
    border-radius: 13px !important;
  }

  html:not(.sathi-mobile-pwa) .ck-header-v3 .sathi-pwa-header-action span {
    display: none !important;
  }

  html:not(.sathi-mobile-pwa) .ck-header-v3 .sathi-pwa-header-action svg {
    width: 19px;
    height: 19px;
  }

  html:not(.sathi-mobile-pwa) .mobile-menu-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    display: flex !important;
    border: 1px solid var(--sfm-line) !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: 0 6px 15px rgba(29,48,40,.06) !important;
  }

  /* ---------- Universal mobile bottom navigation ---------- */
  html:not(.sathi-mobile-pwa) .customer-quick-nav.app-bottom-nav-v3 {
    position: fixed !important;
    left: 9px !important;
    right: 9px !important;
    bottom: max(8px, var(--sfm-safe-bottom)) !important;
    z-index: 3000 !important;
    width: auto !important;
    height: calc(var(--sfm-nav-h) + var(--sfm-safe-bottom)) !important;
    margin: 0 !important;
    padding: 8px 7px calc(7px + var(--sfm-safe-bottom)) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    overflow: visible !important;
    border: 1px solid rgba(7,61,50,.10) !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 18px 44px rgba(15,52,40,.20) !important;
    backdrop-filter: blur(20px) saturate(1.15);
    transform: none !important;
  }

  html:not(.sathi-mobile-pwa) .customer-quick-nav .quick-nav-link {
    position: relative;
    width: 100% !important;
    min-width: 0;
    height: 58px !important;
    padding: 7px 1px 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border-radius: 15px !important;
    background: transparent !important;
    color: #7d8982 !important;
    text-decoration: none;
    transition: transform .16s ease, color .16s ease, background .16s ease;
  }

  html:not(.sathi-mobile-pwa) .customer-quick-nav .quick-nav-link:active {
    transform: scale(.94) !important;
  }

  html:not(.sathi-mobile-pwa) .customer-quick-nav .quick-nav-icon {
    width: 23px !important;
    height: 23px !important;
    display: grid !important;
    place-items: center;
  }

  html:not(.sathi-mobile-pwa) .customer-quick-nav .quick-nav-icon svg {
    width: 23px !important;
    height: 23px !important;
    fill: currentColor !important;
  }

  html:not(.sathi-mobile-pwa) .customer-quick-nav .quick-nav-label {
    margin: 0 !important;
    color: inherit !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  html:not(.sathi-mobile-pwa) .customer-quick-nav .quick-nav-link.active:not(.is-cart-primary) {
    color: var(--sfm-green-2) !important;
    background: #eff8f3 !important;
  }

  html:not(.sathi-mobile-pwa) .customer-quick-nav .is-cart-primary,
  html:not(.sathi-mobile-pwa) .customer-quick-nav .is-cart-primary.active {
    overflow: visible !important;
    background: transparent !important;
    color: var(--sfm-orange) !important;
  }

  html:not(.sathi-mobile-pwa) .customer-quick-nav .is-cart-primary .quick-nav-icon {
    position: absolute !important;
    top: -25px !important;
    left: 50% !important;
    width: 62px !important;
    height: 62px !important;
    transform: translateX(-50%) !important;
    border: 5px solid #fff !important;
    border-radius: 21px !important;
    background: linear-gradient(145deg, var(--sfm-orange-2), var(--sfm-orange) 62%, #d83b0e) !important;
    color: #fff !important;
    box-shadow: 0 13px 27px rgba(244,81,30,.38), inset 0 1px 0 rgba(255,255,255,.30) !important;
  }

  html:not(.sathi-mobile-pwa) .customer-quick-nav .is-cart-primary .quick-nav-icon svg {
    width: 28px !important;
    height: 28px !important;
    fill: #fff !important;
  }

  html:not(.sathi-mobile-pwa) .customer-quick-nav .is-cart-primary .quick-nav-label {
    position: absolute;
    right: 0;
    bottom: 3px;
    left: 0;
    color: #d94717 !important;
    font-size: 9.5px !important;
  }

  html:not(.sathi-mobile-pwa) .customer-quick-nav .is-cart-primary b {
    position: absolute !important;
    top: -25px !important;
    right: calc(50% - 36px) !important;
    z-index: 4;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 5px !important;
    display: grid !important;
    place-items: center;
    border: 2px solid #fff !important;
    border-radius: 999px !important;
    background: var(--sfm-green) !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 900;
  }

  html:not(.sathi-mobile-pwa) .customer-quick-nav b.is-hidden { display: none !important; }

  /* ---------- Shared mobile page spacing ---------- */
  html:not(.sathi-mobile-pwa) .sf-client-home,
  html:not(.sathi-mobile-pwa) .food-explore-page-v3,
  html:not(.sathi-mobile-pwa) .customer-list-page,
  html:not(.sathi-mobile-pwa) .premium-checkout-page,
  html:not(.sathi-mobile-pwa) .track-order-page,
  html:not(.sathi-mobile-pwa) .order-details-page,
  html:not(.sathi-mobile-pwa) .sf-combo-page {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  /* ---------- Home ---------- */
  html:not(.sathi-mobile-pwa) .sf-client-home {
    padding: 10px 11px 22px !important;
  }

  html:not(.sathi-mobile-pwa) .sf-client-hero {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: hidden;
    border-radius: 23px !important;
  }

  html:not(.sathi-mobile-pwa) .sf-client-hero-copy {
    padding: 23px 19px 18px !important;
  }

  html:not(.sathi-mobile-pwa) .sf-client-kicker {
    font-size: 12px !important;
  }

  html:not(.sathi-mobile-pwa) .sf-client-hero h1 {
    margin: 5px 0 8px !important;
    font-size: clamp(29px, 9vw, 38px) !important;
    line-height: 1.04 !important;
    letter-spacing: -1.2px !important;
  }

  html:not(.sathi-mobile-pwa) .sf-client-hero p {
    margin-bottom: 14px !important;
    font-size: 14px !important;
  }

  html:not(.sathi-mobile-pwa) .sf-client-search {
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 5px 7px 5px 14px !important;
    border-radius: 16px !important;
  }

  html:not(.sathi-mobile-pwa) .sf-client-search input,
  html:not(.sathi-mobile-pwa) .explore-search-v3 input,
  html:not(.sathi-mobile-pwa) .track-order-form input,
  html:not(.sathi-mobile-pwa) .premium-form-group input,
  html:not(.sathi-mobile-pwa) .premium-form-group textarea,
  html:not(.sathi-mobile-pwa) .premium-form-group select {
    font-size: 16px !important; /* Prevent iOS input zoom. */
  }

  html:not(.sathi-mobile-pwa) .sf-client-hero-actions {
    gap: 7px !important;
  }

  html:not(.sathi-mobile-pwa) .sf-client-hero-media {
    height: 190px !important;
    min-height: 190px !important;
  }

  html:not(.sathi-mobile-pwa) .sf-client-browse-pill {
    right: 13px !important;
    bottom: 13px !important;
    padding: 10px 14px !important;
  }

  html:not(.sathi-mobile-pwa) .sf-client-promo-grid {
    display: flex !important;
    gap: 10px !important;
    margin: 12px -11px 15px !important;
    padding: 0 11px 5px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  html:not(.sathi-mobile-pwa) .sf-client-promo-grid::-webkit-scrollbar,
  html:not(.sathi-mobile-pwa) .sf-client-offer-rail::-webkit-scrollbar,
  html:not(.sathi-mobile-pwa) .sf-client-product-rail::-webkit-scrollbar { display: none; }

  html:not(.sathi-mobile-pwa) .sf-client-promo {
    flex: 0 0 min(84vw, 330px) !important;
    min-height: 174px;
    scroll-snap-align: start;
    border-radius: 19px !important;
    padding: 16px !important;
  }

  html:not(.sathi-mobile-pwa) .sf-client-section {
    margin-top: 14px !important;
  }

  html:not(.sathi-mobile-pwa) .sf-client-section-head {
    margin-bottom: 9px !important;
  }

  html:not(.sathi-mobile-pwa) .sf-client-section-head h2 {
    font-size: 18px !important;
  }

  html:not(.sathi-mobile-pwa) .sf-client-offer-rail,
  html:not(.sathi-mobile-pwa) .sf-client-product-rail {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: min(76vw, 275px) !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
  }

  html:not(.sathi-mobile-pwa) .sf-client-offer-card,
  html:not(.sathi-mobile-pwa) .sf-client-product-card {
    scroll-snap-align: start;
  }

  html:not(.sathi-mobile-pwa) .sf-client-dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }

  html:not(.sathi-mobile-pwa) .sf-client-mini-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 9px !important;
  }

  html:not(.sathi-mobile-pwa) .sf-client-trust-strip {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 0 !important;
    padding: 8px !important;
  }

  /* ---------- Explore / Food / Drinks ---------- */
  html:not(.sathi-mobile-pwa) .explore-hero-v3 {
    padding: 24px 15px 21px !important;
    gap: 13px !important;
    border-radius: 0 0 24px 24px !important;
  }

  html:not(.sathi-mobile-pwa) .explore-hero-v3 h1 {
    margin: 4px 0 7px !important;
    font-size: clamp(31px, 9vw, 39px) !important;
    line-height: 1.02 !important;
    letter-spacing: -1.4px !important;
  }

  html:not(.sathi-mobile-pwa) .explore-hero-v3 p {
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  html:not(.sathi-mobile-pwa) .explore-search-v3 {
    min-height: 54px !important;
    padding: 5px 6px 5px 12px !important;
    border-radius: 16px !important;
  }

  html:not(.sathi-mobile-pwa) .explore-search-v3 button {
    min-height: 44px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
  }

  html:not(.sathi-mobile-pwa) .explore-menu-filter-v4 {
    margin: 10px 10px 15px !important;
    padding: 11px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
  }

  html:not(.sathi-mobile-pwa) .explore-section-tabs-v4 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 6px !important;
  }

  html:not(.sathi-mobile-pwa) .explore-section-tabs-v4 a {
    padding: 9px 7px !important;
    text-align: center;
    font-size: 11px !important;
  }

  html:not(.sathi-mobile-pwa) .explore-filter-group-v4 .explore-category-filter-v3 {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    overflow-x: auto !important;
    padding: 1px 0 5px !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  html:not(.sathi-mobile-pwa) .explore-filter-group-v4 .explore-category-filter-v3::-webkit-scrollbar { display:none; }

  html:not(.sathi-mobile-pwa) .explore-category-filter-v3 a {
    flex: 0 0 auto !important;
    min-height: 39px;
    padding: 8px 12px !important;
    scroll-snap-align: start;
    white-space: nowrap;
    font-size: 11px !important;
  }

  html:not(.sathi-mobile-pwa) .explore-results-v3 {
    padding: 17px 10px 28px !important;
  }

  html:not(.sathi-mobile-pwa) .section-heading-v3 {
    margin-bottom: 12px !important;
    align-items: flex-end !important;
  }

  html:not(.sathi-mobile-pwa) .section-heading-v3 h2 {
    font-size: 25px !important;
  }

  /* ---------- Food cards ---------- */
  html:not(.sathi-mobile-pwa) .food-product-grid-v3,
  html:not(.sathi-mobile-pwa) .explore-food-grid-v3 {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-card {
    min-width: 0;
    border-radius: 17px !important;
    border-color: #e6ebe7 !important;
    box-shadow: 0 8px 22px rgba(21,49,38,.07) !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-media {
    height: auto !important;
    aspect-ratio: 1 / .83;
    background: #f4f5f1 !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-content {
    padding: 10px 10px 11px !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-meta {
    gap: 4px !important;
    font-size: 8px !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-content h3 {
    min-height: 34px;
    margin: 5px 0 3px !important;
    display: -webkit-box;
    overflow: hidden;
    color: var(--sfm-ink) !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  html:not(.sathi-mobile-pwa) .food-product-content > p,
  html:not(.sathi-mobile-pwa) .food-kitchen-name {
    display: none !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-bottom {
    margin-top: 8px !important;
    align-items: center !important;
    gap: 5px !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-price strong {
    font-size: 12.5px !important;
    line-height: 1.15 !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-price del {
    font-size: 9px !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-bottom form button {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center;
    border-radius: 12px !important;
    background: linear-gradient(145deg,var(--sfm-orange-2),var(--sfm-orange)) !important;
    box-shadow: 0 7px 16px rgba(244,81,30,.22);
  }

  html:not(.sathi-mobile-pwa) .food-product-bottom form button [data-cart-button-label] {
    display: none !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-bottom form button .add-cart-icon {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
  }

  html:not(.sathi-mobile-pwa) .food-heart-btn {
    width: 35px !important;
    height: 35px !important;
    border-radius: 12px !important;
  }

  /* Drink cards need room for bottle/ML controls: one horizontal card per row. */
  html:not(.sathi-mobile-pwa) .food-product-card.is-drink-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 40% minmax(0,1fr);
  }

  html:not(.sathi-mobile-pwa) .food-product-card.is-drink-card .food-product-media {
    height: 100% !important;
    min-height: 210px;
    aspect-ratio: auto;
  }

  html:not(.sathi-mobile-pwa) .food-product-card.is-drink-card .food-product-content {
    min-width: 0;
    padding: 12px !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-card.is-drink-card h3 {
    min-height: 0;
    font-size: 15px !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-card.is-drink-card select,
  html:not(.sathi-mobile-pwa) .food-product-card.is-drink-card input {
    max-width: 100%;
    min-width: 0;
    font-size: 13px !important;
  }

  /* ---------- Combos ---------- */
  html:not(.sathi-mobile-pwa) .sf-combo-page {
    padding: 10px 10px 28px !important;
  }

  html:not(.sathi-mobile-pwa) .sf-combo-hero {
    padding: 23px 18px !important;
    border-radius: 21px !important;
  }

  html:not(.sathi-mobile-pwa) .sf-combo-hero h1 { font-size: 32px !important; }
  html:not(.sathi-mobile-pwa) .sf-combo-intro { grid-template-columns: 1fr !important; gap:8px !important; }
  html:not(.sathi-mobile-pwa) .sf-combo-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  html:not(.sathi-mobile-pwa) .sf-combo-card { border-radius: 19px !important; }
  html:not(.sathi-mobile-pwa) .sf-combo-card.is-poster-combo .sf-combo-media { aspect-ratio: 4 / 5 !important; }
  html:not(.sathi-mobile-pwa) .sf-combo-body { padding: 15px !important; }
  html:not(.sathi-mobile-pwa) .sf-combo-body button { min-height: 48px !important; border-radius: 13px !important; }

  /* ---------- Cart ---------- */
  html:not(.sathi-mobile-pwa) .customer-list-page {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  html:not(.sathi-mobile-pwa) .listing-hero.small-hero {
    margin: 10px 0 !important;
    padding: 20px 17px !important;
    border-radius: 20px !important;
  }

  html:not(.sathi-mobile-pwa) .checkout-layout {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }

  html:not(.sathi-mobile-pwa) .checkout-card {
    padding: 14px !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 22px rgba(21,49,38,.06) !important;
  }

  html:not(.sathi-mobile-pwa) .cart-row {
    position: relative;
    padding: 12px 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 9px !important;
    align-items: center;
  }

  html:not(.sathi-mobile-pwa) .cart-item-info { min-width: 0; }
  html:not(.sathi-mobile-pwa) .cart-qty-form { justify-self: end; }
  html:not(.sathi-mobile-pwa) .cart-line-total { grid-column: 1 / 2; }
  html:not(.sathi-mobile-pwa) .cart-remove-btn { grid-column: 2 / 3; }
  html:not(.sathi-mobile-pwa) .checkout-btn { min-height: 50px !important; border-radius: 14px !important; }

  /* ---------- Checkout ---------- */
  html:not(.sathi-mobile-pwa) .premium-checkout-page {
    padding: 10px 10px 26px !important;
  }

  html:not(.sathi-mobile-pwa) .premium-checkout-hero {
    padding: 20px 16px !important;
    border-radius: 20px !important;
  }

  html:not(.sathi-mobile-pwa) .checkout-steps {
    gap: 5px !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html:not(.sathi-mobile-pwa) .checkout-steps::-webkit-scrollbar { display:none; }

  html:not(.sathi-mobile-pwa) .premium-checkout-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  html:not(.sathi-mobile-pwa) .premium-card,
  html:not(.sathi-mobile-pwa) .summary-sticky-card {
    padding: 15px !important;
    border-radius: 18px !important;
  }

  html:not(.sathi-mobile-pwa) .summary-sticky-card {
    position: static !important;
    top: auto !important;
  }

  html:not(.sathi-mobile-pwa) .premium-form-grid {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }

  html:not(.sathi-mobile-pwa) .premium-payment-list {
    grid-template-columns: 1fr !important;
  }

  html:not(.sathi-mobile-pwa) .premium-place-order-btn {
    min-height: 52px !important;
    border-radius: 14px !important;
  }

  /* ---------- Track / order details ---------- */
  html:not(.sathi-mobile-pwa) .track-order-page,
  html:not(.sathi-mobile-pwa) .order-details-page {
    padding: 11px 10px 26px !important;
  }

  html:not(.sathi-mobile-pwa) .track-order-card,
  html:not(.sathi-mobile-pwa) .order-info-card,
  html:not(.sathi-mobile-pwa) .order-summary-card {
    border-radius: 19px !important;
    box-shadow: 0 8px 22px rgba(21,49,38,.06) !important;
  }

  html:not(.sathi-mobile-pwa) .track-order-form {
    grid-template-columns: 1fr !important;
  }

  html:not(.sathi-mobile-pwa) .track-order-btn {
    min-height: 48px !important;
    border-radius: 13px !important;
  }

  html:not(.sathi-mobile-pwa) .order-details-grid {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }

  html:not(.sathi-mobile-pwa) .order-status-timeline {
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  html:not(.sathi-mobile-pwa) .order-status-timeline::-webkit-scrollbar { display:none; }

  /* ---------- Orders list/table ---------- */
  html:not(.sathi-mobile-pwa) .content-card {
    padding: 13px !important;
    border-radius: 18px !important;
  }

  html:not(.sathi-mobile-pwa) .table-responsive {
    margin: 0 -3px;
    padding-bottom: 4px;
    overflow-x: auto !important;
    border-radius: 13px;
    scrollbar-width: thin;
  }

  html:not(.sathi-mobile-pwa) .data-table {
    min-width: 660px;
  }

  /* ---------- Footer ---------- */
  html:not(.sathi-mobile-pwa) .site-footer-v3 {
    margin-top: 18px;
    padding: 32px 17px calc(105px + var(--sfm-safe-bottom)) !important;
  }

  html:not(.sathi-mobile-pwa) .footer-grid-v3 {
    grid-template-columns: 1fr 1fr !important;
    gap: 22px 15px !important;
  }

  html:not(.sathi-mobile-pwa) .footer-brand-v3 {
    grid-column: 1 / -1 !important;
  }

  /* Installed PWA keeps its own native navigation but benefits from card/layout sizing. */
  html.sathi-mobile-pwa .food-product-grid-v3,
  html.sathi-mobile-pwa .explore-food-grid-v3 {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px !important;
  }

  html.sathi-mobile-pwa .food-product-card {
    border-radius: 18px !important;
  }

  html.sathi-mobile-pwa .food-product-media {
    height: auto !important;
    aspect-ratio: 1 / .83;
  }

  html.sathi-mobile-pwa .food-product-content {
    padding: 10px !important;
  }

  html.sathi-mobile-pwa .food-product-content h3 {
    font-size: 13px !important;
  }

  html.sathi-mobile-pwa .food-product-content > p,
  html.sathi-mobile-pwa .food-kitchen-name {
    display: none !important;
  }
}

@media (max-width: 380px) {
  html:not(.sathi-mobile-pwa) .ck-header-v3 .ck-logo-v3 small { display:none !important; }
  html:not(.sathi-mobile-pwa) .ck-header-v3 .brand-mark-frame,
  html:not(.sathi-mobile-pwa) .ck-header-v3 .ck-logo-v3 > span { width:44px !important;height:44px !important;min-width:44px; }

  html:not(.sathi-mobile-pwa) .customer-quick-nav.app-bottom-nav-v3 {
    left: 5px !important;
    right: 5px !important;
    border-radius: 21px !important;
  }

  html:not(.sathi-mobile-pwa) .customer-quick-nav .is-cart-primary .quick-nav-icon {
    width: 58px !important;
    height: 58px !important;
    top: -22px !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-grid-v3,
  html:not(.sathi-mobile-pwa) .explore-food-grid-v3 {
    gap: 7px !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-content { padding: 8px !important; }
  html:not(.sathi-mobile-pwa) .food-product-content h3 { font-size:12px !important; }
  html:not(.sathi-mobile-pwa) .food-product-price strong { font-size:11.5px !important; }

  html:not(.sathi-mobile-pwa) .food-product-card.is-drink-card {
    grid-template-columns: 38% minmax(0,1fr);
  }
}

/* =========================================================
   2026-08-23 mobile hamburger + stacked card layout
   Normal mobile web only; installed PWA is unaffected.
   ========================================================= */
@media (max-width: 820px) {
  html:not(.sathi-mobile-pwa) .ck-header-v3 .mobile-menu-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    color: #073d32 !important;
    background: #fff8f2 !important;
    border: 1px solid rgba(7,61,50,.14) !important;
    box-shadow: 0 7px 18px rgba(7,61,50,.09) !important;
  }

  html:not(.sathi-mobile-pwa) .ck-header-v3 .mobile-menu-btn > span {
    display: block !important;
    width: 20px !important;
    height: 2.5px !important;
    min-height: 2.5px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #073d32 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  html:not(.sathi-mobile-pwa) .ck-header-v3 .mobile-menu-btn:active {
    background: #fff0e5 !important;
    transform: scale(.95);
  }

  html:not(.sathi-mobile-pwa) .sf-client-promo-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 12px 0 15px !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  html:not(.sathi-mobile-pwa) .sf-client-promo {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    flex: none !important;
    scroll-snap-align: none !important;
  }

  html:not(.sathi-mobile-pwa) .sf-client-offer-rail,
  html:not(.sathi-mobile-pwa) .sf-client-product-rail {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    gap: 10px !important;
    width: 100% !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    scroll-padding-inline: 0 !important;
  }

  html:not(.sathi-mobile-pwa) .sf-client-offer-card,
  html:not(.sathi-mobile-pwa) .sf-client-product-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    scroll-snap-align: none !important;
  }

  html:not(.sathi-mobile-pwa) .explore-filter-group-v4 .explore-category-filter-v3 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    overflow: visible !important;
    padding: 1px 0 3px !important;
    scroll-snap-type: none !important;
  }

  html:not(.sathi-mobile-pwa) .explore-category-filter-v3 a {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    text-align: center !important;
    scroll-snap-align: none !important;
  }
}

@media (max-width: 390px) {
  html:not(.sathi-mobile-pwa) .sf-client-offer-rail,
  html:not(.sathi-mobile-pwa) .sf-client-product-rail {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   2026-08-23 mobile Add-to-Cart + footer spacing polish
   Normal mobile browser only; desktop and installed PWA stay unchanged.
   ========================================================= */
@media (max-width: 820px) {
  /* The footer already reserves room for the fixed bottom nav. Do not add
     a second block of body padding after the footer. */
  html:not(.sathi-mobile-pwa) body.public-app-body {
    padding-bottom: 0 !important;
    min-height: 100dvh;
  }

  html:not(.sathi-mobile-pwa) .app-wrapper {
    padding-bottom: 0 !important;
    min-height: 100dvh;
  }

  html:not(.sathi-mobile-pwa) .site-footer-v3 {
    margin-bottom: 0 !important;
    padding-bottom: calc(var(--sfm-nav-h) + var(--sfm-safe-bottom) + 18px) !important;
  }

  html:not(.sathi-mobile-pwa) .footer-bottom-v3 {
    margin-bottom: 0 !important;
  }

  /* Product card Add button: readable pill instead of a tiny icon-only square. */
  html:not(.sathi-mobile-pwa) .food-product-bottom form {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-bottom form button {
    width: auto !important;
    min-width: 68px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, #ff7548 0%, var(--sfm-orange) 62%, #e34214 100%) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(244,81,30,.24) !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-bottom form button:active {
    transform: translateY(1px) scale(.96) !important;
    box-shadow: 0 4px 10px rgba(244,81,30,.20) !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-bottom form button:disabled {
    opacity: .58 !important;
    filter: grayscale(.12) !important;
    box-shadow: none !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-bottom form button [data-cart-button-label] {
    display: inline !important;
    color: #fff !important;
    font: inherit !important;
    line-height: 1 !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-bottom form button .add-cart-icon {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    display: block !important;
    color: #fff !important;
    fill: #fff !important;
    filter: brightness(0) invert(1) !important;
  }

  /* Keep price and Add button from colliding in narrow two-column cards. */
  html:not(.sathi-mobile-pwa) .food-product-bottom {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 7px !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-price {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-price strong {
    overflow-wrap: anywhere;
  }

  /* Drink cards have more room, so use a slightly larger action. */
  html:not(.sathi-mobile-pwa) .food-product-card.is-drink-card .food-product-bottom form button {
    min-width: 76px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding-inline: 12px !important;
  }
}

@media (max-width: 360px) {
  html:not(.sathi-mobile-pwa) .food-product-bottom form button {
    min-width: 61px !important;
    padding-inline: 8px !important;
    gap: 4px !important;
    font-size: 10.5px !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-bottom form button .add-cart-icon {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
  }
}

/* =========================================================
   2026-08-23 final mobile cart icon visibility hotfix
   Normal mobile browser only. Desktop/PWA unchanged.
   ========================================================= */
@media (max-width: 820px) {
  /* Normal food cards: reserve a fixed slot for the action so price text
     can never squeeze the button out of view. */
  html:not(.sathi-mobile-pwa) .food-product-card:not(.is-drink-card) .food-product-bottom {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    align-items: center !important;
    column-gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-card:not(.is-drink-card) .food-product-bottom > .food-product-price {
    min-width: 0 !important;
    width: auto !important;
    overflow: hidden !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-card:not(.is-drink-card) .food-product-bottom > form[data-ajax-cart] {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    margin: 0 !important;
    display: block !important;
    overflow: visible !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-card:not(.is-drink-card) .food-product-bottom > form[data-ajax-cart] > button[type="submit"] {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg, #ff7b50 0%, #f4511e 58%, #dc3e12 100%) !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 7px 16px rgba(244,81,30,.26) !important;
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 44px !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-card:not(.is-drink-card) .food-product-bottom > form[data-ajax-cart] > button[type="submit"] [data-cart-button-label] {
    display: none !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-card:not(.is-drink-card) .food-product-bottom > form[data-ajax-cart] > button[type="submit"] .add-cart-icon {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    flex: 0 0 21px !important;
    color: #fff !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2.2 !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    pointer-events: none !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-card:not(.is-drink-card) .food-product-bottom > form[data-ajax-cart] > button[type="submit"]:active {
    transform: scale(.94) !important;
    box-shadow: 0 3px 9px rgba(244,81,30,.22) !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-card:not(.is-drink-card) .food-product-bottom > form[data-ajax-cart] > button[type="submit"]:disabled {
    opacity: .5 !important;
    visibility: visible !important;
  }

  /* Drink cards have a full control form: keep a clear full-width action. */
  html:not(.sathi-mobile-pwa) .food-product-card.is-drink-card .food-product-bottom {
    display: block !important;
    width: 100% !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-card.is-drink-card .food-product-bottom > .food-product-price {
    margin-bottom: 8px !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-card.is-drink-card form[data-ajax-cart] > button[type="submit"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, #ff7b50 0%, #f4511e 62%, #dc3e12 100%) !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 7px 16px rgba(244,81,30,.22) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-card.is-drink-card form[data-ajax-cart] > button[type="submit"] [data-cart-button-label] {
    display: inline !important;
    color: #fff !important;
  }

  html:not(.sathi-mobile-pwa) .food-product-card.is-drink-card form[data-ajax-cart] > button[type="submit"] .add-cart-icon {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    color: #fff !important;
    stroke: currentColor !important;
    fill: none !important;
    opacity: 1 !important;
  }
}