/* Mobile/tablet customer shell approved on 2026-09-01. Desktop begins at 1200px. */
@media (max-width:1199px) {
  body { padding-bottom:calc(82px + var(--safe-bottom)); }
  .desktop-footer { display:none; }
  .app-header { box-shadow:0 8px 24px rgba(20,63,40,.06); }
  .header-row {
    height:60px;
    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
  }
  .mobile-menu-button { display:grid; justify-self:start; }
  .header-row .brand {
    position:static!important;
    left:auto!important;
    right:auto!important;
    grid-column:2;
    justify-self:center;
    margin:0!important;
    transform:none!important;
  }
  .header-row .brand-logo {
    width:clamp(108px,27vw,144px);
    max-width:144px;
    max-height:46px;
    object-position:center;
  }
  .header-actions { grid-column:3; justify-self:end; gap:3px; }
  .header-actions .header-wallet-button,
  .header-actions #searchToggle,
  .header-actions .desktop-account-button,
  .header-actions .desktop-logout-button,
  .header-actions .desktop-cart-button { display:none!important; }
  .header-actions #headerNotifications,
  .header-actions #whatsappSupport { display:grid; width:44px; height:44px; }
  .header-actions #whatsappSupport { border-color:#b9dfc6; background:#edf9f1; color:#118448; }
  .search-panel.persistent-search {
    position:relative;
    display:flex;
    height:56px;
    overflow:visible;
    opacity:1;
    padding-bottom:10px;
  }
  .search-panel.persistent-search input {
    position:absolute;
    left:0;
    width:100%;
    height:46px;
    padding-left:43px;
    padding-right:42px;
    border-color:#d5e2d8;
    border-radius:15px;
    box-shadow:0 6px 18px rgba(20,63,40,.07);
    font-size:14px;
  }
  .search-panel.persistent-search svg { margin-left:14px; }
  .location { width:100%; min-height:44px; padding:0 2px 8px; }
  .location small { color:#37664a; }

  .bottom-nav {
    height:calc(76px + var(--safe-bottom));
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:end;
    gap:0!important;
    padding:7px 3px var(--safe-bottom)!important;
  }
  .bottom-nav button {
    min-width:0!important;
    width:100%!important;
    min-height:58px;
    padding:4px 1px 3px!important;
    gap:2px;
    border-radius:13px;
  }
  .bottom-nav button>span,
  .bottom-nav button>span svg { width:22px; height:22px; }
  .bottom-nav small {
    max-width:100%!important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap!important;
    font-size:8px!important;
    line-height:1.05!important;
  }
  .bottom-nav #mobileCartNav {
    align-self:start;
    min-height:68px;
    margin-top:-15px;
    border:4px solid #fff;
    border-radius:24px;
    background:linear-gradient(145deg,#1f7a43,#135a31);
    color:#fff!important;
    box-shadow:0 9px 20px rgba(20,92,49,.28);
  }
  .bottom-nav #mobileCartNav.active { background:linear-gradient(145deg,#2c9253,#176737); }
  .bottom-nav #mobileCartNav>span,
  .bottom-nav #mobileCartNav>span svg { width:25px; height:25px; }
  .bottom-nav #mobileCartNav em {
    display:block;
    max-width:58px;
    overflow:hidden;
    color:#fff4bf;
    font-size:8px;
    line-height:1;
    font-style:normal;
    font-weight:1000;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .bottom-nav #mobileCartNav>b { top:-4px!important; right:2px!important; }
  .cart-float { display:none!important; }
  .tracking-card { display:none!important; }

  .sheet-panel { max-height:min(88dvh,780px); }
  .wallet-panel,.account-panel,.mobile-menu-panel,.tracking-panel { min-height:min(76dvh,680px); }
  .mobile-menu-heading,.wallet-sheet-heading,.profile-dashboard-heading {
    display:flex;
    align-items:center;
    gap:11px;
    margin:0 46px 15px 0;
  }
  .mobile-menu-heading>span,.wallet-sheet-heading>span,.profile-dashboard-heading>span {
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    flex:none;
    border-radius:14px;
    background:#e8f6ec;
    color:#176a39;
  }
  .mobile-menu-heading svg,.wallet-sheet-heading svg,.profile-dashboard-heading svg {
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .mobile-menu-heading h2,.wallet-sheet-heading h2,.profile-dashboard-heading h2 { margin:0; font-size:20px; }
  .mobile-menu-heading p,.wallet-sheet-heading p,.profile-dashboard-heading p { margin:2px 0 0; color:var(--muted); font-size:10px; }
  .mobile-menu-section { margin:14px 0; }
  .mobile-menu-section h3,.profile-history-section h3,.wallet-ledger-title {
    margin:0 0 8px;
    color:#496357;
    font-size:10px;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .mobile-menu-categories {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .mobile-menu-category {
    min-height:72px;
    display:grid;
    place-items:center;
    gap:4px;
    padding:8px 4px;
    border:1px solid #dce8df;
    border-radius:15px;
    background:#fff;
    color:#173f2a;
    text-align:center;
  }
  .mobile-menu-category span { font-size:22px; }
  .mobile-menu-category b { font-size:9px; line-height:1.15; }
  .mobile-menu-links { display:grid; gap:7px; }
  .mobile-menu-link,.profile-history-link,.profile-address-row {
    width:100%;
    min-height:48px;
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding:9px 11px;
    border:1px solid #e0e9e2;
    border-radius:14px;
    background:#fff;
    color:#193e2a;
    text-align:left;
  }
  .mobile-menu-link>span,.profile-history-link>span,.profile-address-row>span {
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:11px;
    background:#eff8f1;
    color:#1b7040;
  }
  .mobile-menu-link>span svg,.legal-hub-tile svg,.profile-action-grid svg,.account-guest svg {
    width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  }
  .mobile-menu-link b,.mobile-menu-link small,.profile-history-link b,.profile-history-link small,.profile-address-row b,.profile-address-row small { display:block; }
  .mobile-menu-link b,.profile-history-link b,.profile-address-row b { font-size:11px; }
  .mobile-menu-link small,.profile-history-link small,.profile-address-row small { margin-top:2px; color:var(--muted); font-size:8px; line-height:1.3; }

  .wallet-expiry-card {
    display:grid;
    grid-template-columns:40px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    margin:11px 0;
    padding:12px;
    border:1px solid #f1ce72;
    border-radius:15px;
    background:linear-gradient(135deg,#fff7d7,#fff);
  }
  .wallet-expiry-card>span { display:grid; place-items:center; width:40px; height:40px; border-radius:13px; background:#fff; color:#8a6100; }
  .wallet-expiry-card b,.wallet-expiry-card small { display:block; }
  .wallet-expiry-card b { font-size:11px; }
  .wallet-expiry-card small { margin-top:3px; color:#796629; font-size:8px; }
  .wallet-expiry-card strong { color:#7b5600; font-size:12px; }
  .wallet-offer { border-color:#b9dbbf; box-shadow:0 5px 14px rgba(24,105,57,.07); }
  .wallet-ledger { display:grid; gap:7px; margin-top:12px; }
  .wallet-entry { padding:10px; border:1px solid #e4ece6; border-radius:12px; background:#fff; }

  .profile-dashboard-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:11px 0; }
  .profile-summary-card { padding:12px; border:1px solid #dae8dd; border-radius:15px; background:linear-gradient(145deg,#fff,#f1f9f3); }
  .profile-summary-card small,.profile-summary-card b { display:block; }
  .profile-summary-card small { color:#647169; font-size:8px; }
  .profile-summary-card b { margin-top:5px; color:#165f36; font-size:16px; }
  .profile-history-section { margin:15px 0; }
  .profile-history-list { display:grid; gap:7px; }
  .profile-address-row { grid-template-columns:38px minmax(0,1fr) auto; }
  .profile-address-row button { min-height:38px; padding:0 10px; border:1px solid #b8d7bf; border-radius:10px; background:#f1faf3; color:#17683a; font-size:9px; font-weight:900; }
  .account-address-block>.saved-address-list { display:none; }
  .legal-hub-header{display:flex;align-items:center;gap:11px;margin:0 44px 16px 0}.legal-hub-header>button{display:grid;place-items:center;width:42px;height:42px;flex:none;border:1px solid #d9e7dc;border-radius:14px;background:#f0f8f2;color:#176a39;font-size:22px}.legal-hub-header h2,.legal-hub-header p{margin:0}.legal-hub-header h2{font-size:20px}.legal-hub-header p{margin-top:2px;color:var(--muted);font-size:9px}.legal-hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.legal-hub-tile{min-height:116px;display:grid;align-content:center;justify-items:center;gap:6px;padding:12px 8px;border:1px solid #dce8df;border-radius:17px;background:linear-gradient(145deg,#fff,#f3faf5);color:#173f2a;text-align:center}.legal-hub-tile>span{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#e7f5eb;color:#176a39}.legal-hub-tile b{font-size:10px;line-height:1.25}.legal-hub-tile small{color:var(--muted);font-size:8px}.profile-identity{display:flex;align-items:center;gap:12px;margin:0 44px 14px 0;padding:13px;border:1px solid #dce9df;border-radius:18px;background:linear-gradient(135deg,#f1faf4,#fff)}.profile-avatar{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:16px;background:#176a39;color:#fff;font-size:15px;font-weight:1000}.profile-identity h2,.profile-identity p,.profile-identity small{margin:0;display:block}.profile-identity h2{font-size:19px}.profile-identity p,.profile-identity small{margin-top:2px;color:var(--muted);font-size:9px}.profile-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}.profile-action-grid button{min-height:92px;display:grid;justify-items:start;align-content:center;gap:3px;padding:12px;border:1px solid #dce8df;border-radius:16px;background:#fff;color:#173f2a;text-align:left}.profile-action-grid button>span{display:grid;place-items:center;width:34px;height:34px;margin-bottom:3px;border-radius:11px;background:#e9f7ed;color:#176a39}.profile-action-grid b{font-size:11px}.profile-action-grid small{color:var(--muted);font-size:8px}.profile-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.profile-section-title h3{margin:0}.profile-section-title button{border:0;background:none;color:#176a39;font-size:9px;font-weight:900}.profile-history-link>strong{color:#176a39;font-size:10px}.account-guest{display:grid;justify-items:center;padding:34px 18px;text-align:center}.account-guest>span{display:grid;place-items:center;width:62px;height:62px;border-radius:20px;background:#e8f6ec;color:#176a39}.account-guest h2{margin:14px 0 0;font-size:22px}.account-guest p{max-width:280px;margin:7px 0 18px;color:var(--muted);font-size:11px;line-height:1.5}.account-guest .primary-button{width:100%}.profile-logout{width:100%;margin-top:18px}.profile-favourites{margin-top:15px}

  .order-progress-steps {
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    padding-top:17px;
  }
  .order-progress-steps::before {
    content:"";
    position:absolute;
    left:12.5%;
    right:12.5%;
    top:34px;
    height:3px;
    border-radius:3px;
    background:#d8e5db;
  }
  .order-progress-step {
    position:relative;
    min-height:88px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:7px;
    padding:0 2px;
    text-align:center;
  }
  .order-progress-step:not(:last-child)::after { display:none; }
  .order-progress-step>span { width:36px; height:36px; flex:none; margin:0 auto; }
  .order-progress-step>div { display:block; }
  .order-progress-step b { display:block; font-size:9px; line-height:1.15; }
  .order-progress-step small { display:block; margin-top:3px; font-size:7px; }
  .order-progress-step.active { background:transparent; }
  .tracking-booking-slot { margin-top:7px; }

  .freshness-story-panel { min-height:76dvh; padding-top:24px; background:linear-gradient(160deg,#f7fff8,#fff9e8); }
  .freshness-story-hero { position:relative; overflow:hidden; height:190px; margin:-4px -4px 18px; border-radius:24px; background:#dceee0; }
  .freshness-story-hero img { width:100%; height:100%; object-fit:cover; }
  .freshness-story-hero::after { content:""; position:absolute; inset:42% 0 0; background:linear-gradient(transparent,rgba(9,54,27,.78)); }
  .freshness-story-hero span { position:absolute; z-index:1; left:16px; right:16px; bottom:14px; color:#fff; font-size:12px; font-weight:900; }
  .freshness-story-kicker { margin:0 0 5px; color:#1b7540; font-size:10px; font-weight:1000; letter-spacing:.1em; text-transform:uppercase; }
  .freshness-story-panel h2 { max-width:430px; margin:0; color:#123b23; font-size:25px; line-height:1.14; }
  .freshness-story-lead { margin:10px 0 14px; color:#52645a; font-size:13px; line-height:1.6; }
  .freshness-story-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:12px 0; }
  .freshness-story-steps article { min-width:0; padding:11px 9px; border:1px solid #d9eadc; border-radius:15px; background:rgba(255,255,255,.82); }
  .freshness-story-steps b { display:grid; place-items:center; width:28px; height:28px; margin-bottom:8px; border-radius:10px; background:#1d7440; color:#fff; font-size:10px; }
  .freshness-story-steps span,.freshness-story-steps small { display:block; }
  .freshness-story-steps span { color:#173f29; font-size:11px; font-weight:950; }
  .freshness-story-steps small { margin-top:5px; color:#5e6e63; font-size:9px; line-height:1.45; }
  .freshness-story-note { margin:12px 0; padding:11px 12px; border-left:4px solid #e1a928; border-radius:10px; background:#fff7db; color:#5e4a16; font-size:10px; line-height:1.55; }
  .cart-serviceability { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:10px; margin:10px 0 12px; padding:11px; border:1px solid #d3e1d6; border-radius:15px; background:#f7faf7; }
  .cart-serviceability-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:#e7efe9; color:#245c37; font-size:20px; font-weight:1000; }
  .cart-serviceability b,.cart-serviceability small { display:block; }
  .cart-serviceability b { color:#173e27; font-size:11px; }
  .cart-serviceability small { margin-top:3px; color:#607067; font-size:9px; }
  .cart-serviceability.available { border-color:#a9ddba; background:#effbf2; }
  .cart-serviceability.available .cart-serviceability-icon { background:#1d7a43; color:#fff; }
  .cart-serviceability.unavailable { border-color:#efc3b8; background:#fff4f0; }
  .cart-serviceability.unavailable .cart-serviceability-icon { background:#c94c37; color:#fff; }
  .cart-serviceability .outline-button { width:auto; min-height:36px; margin:0; padding:7px 9px; font-size:9px; }
}

@media (max-width:390px) {
  .bottom-nav small { font-size:7px!important; }
  .bottom-nav #mobileCartNav { border-width:3px; }
  .mobile-menu-categories { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (prefers-reduced-motion:reduce) {
  .bottom-nav #mobileCartNav,.order-progress-step { transition:none; }
}