/* Compact customer layout. Desktop and staff screens keep their existing styles. */
@media (max-width: 700px) {
  body[data-page="customer"] {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body[data-page="customer"].pp-premium > .customer-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: 64px;
    min-height: 64px;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 12px;
  }
  body[data-page="customer"] .brand-lockup { min-width: 0; gap: 8px; }
  body[data-page="customer"] .brand-logo.pp7-header-logo {
    flex: none;
    width: 60px;
    height: 38px;
    border-radius: 9px;
  }
  body[data-page="customer"] .brand-name { font-size: 12px; letter-spacing: .06em; }
  body[data-page="customer"] .brand-tagline { font-size: 8px; white-space: nowrap; }
  body[data-page="customer"] .customer-header-actions { width: auto; flex: none; gap: 6px; }
  body[data-page="customer"] .my-orders-button {
    min-height: 44px;
    padding: 8px 9px;
    gap: 5px;
    font-size: 11px;
  }
  body[data-page="customer"] .my-orders-button span {
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    font-size: 10px;
  }
  body[data-page="customer"] .table-badge {
    padding: 9px 10px;
    font-size: 10px;
    white-space: nowrap;
  }
  body[data-page="customer"] .customer-shell {
    width: calc(100% - 24px);
    padding-top: 12px;
    padding-bottom: max(96px, calc(80px + env(safe-area-inset-bottom)));
  }

  /* The header already carries the logo; avoid a second tall logo panel on phones. */
  body[data-page="customer"] .hero-card { padding: 20px 18px; border-radius: 20px; }
  body[data-page="customer"] .hero-card.pp7-hero {
    min-height: 0;
    padding: 0;
    grid-template-columns: minmax(0, 1fr);
    border-radius: 20px;
  }
  body[data-page="customer"] .pp7-hero-copy { padding: 20px 18px; }
  body[data-page="customer"] .pp7-hero-brand { display: none; }
  body[data-page="customer"] .hero-card h1 {
    font-size: clamp(24px, 6.5vw, 30px);
    line-height: 1.08;
    margin: 8px 0 10px;
    max-width: 420px;
  }
  body[data-page="customer"] .hero-card .eyebrow { font-size: 9px; letter-spacing: .14em; }
  body[data-page="customer"] .hero-card p { font-size: 13px; line-height: 1.45; margin-bottom: 12px; }
  body[data-page="customer"] .hero-pills { gap: 6px; }
  body[data-page="customer"] .hero-pills span { padding: 6px 8px; font-size: 10px; }

  body[data-page="customer"] .pp-rewards-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: 18px;
  }
  body[data-page="customer"] .pp-rewards-banner-symbol { display: none; }
  body[data-page="customer"] .pp-rewards-banner-copy > span { font-size: 8px; letter-spacing: .1em; }
  body[data-page="customer"] .pp-rewards-banner-copy h2 { margin: 3px 0; font-size: 16px; }
  body[data-page="customer"] .pp-rewards-banner-copy p { font-size: 11px; line-height: 1.35; }
  body[data-page="customer"] .pp-rewards-main-button {
    width: auto;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    font-size: 11px;
  }

  body[data-page="customer"] .pp-home-banner-area { margin: 12px 0; }
  body[data-page="customer"] .pp-home-banner-viewport { border-radius: 18px; }
  body[data-page="customer"] .pp-home-banner-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
  }
  body[data-page="customer"] .pp-home-banner-copy h2 { font-size: 16px; line-height: 1.2; }
  body[data-page="customer"] .pp-home-banner-copy small { margin-bottom: 3px; }
  body[data-page="customer"] .pp-home-banner-copy p { font-size: 11px; line-height: 1.4; }
  body[data-page="customer"] .pp-home-banner-cta {
    max-width: 132px;
    min-height: 44px;
    padding: 10px 12px;
    gap: 6px;
    font-size: 11px;
  }
  body[data-page="customer"] .pp-home-banner-count { top: 9px; right: 10px; padding: 5px 7px; font-size: 9px; }
  body[data-page="customer"] .pp-home-banner-controls { gap: 8px; margin-top: 0; }

  /* All deals remain visible in a vertical list, with smaller image and copy rows. */
  body[data-page="customer"] #offerStrip:not(.hidden) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    gap: 8px;
    margin: 12px 0;
  }
  body[data-page="customer"] #offerStrip:empty { display: none; }
  body[data-page="customer"] .offer-card {
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 104px;
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
  }
  body[data-page="customer"] .deal-card-visual { min-height: 0; aspect-ratio: 1; border-radius: 12px; }
  body[data-page="customer"] .deal-card-copy strong { font-size: 15px; line-height: 1.2; margin: 4px 0; }
  body[data-page="customer"] .deal-card-copy > span { font-size: 11px; line-height: 1.35; }
  body[data-page="customer"] .deal-card-footer { padding-top: 6px; }
  body[data-page="customer"] .deal-card-footer b { font-size: 20px; }
  body[data-page="customer"] .deal-card-action { font-size: 10px; }

  body[data-page="customer"] .search-row { margin: 12px 0 8px; }
  body[data-page="customer"] .search-box { height: 46px; padding: 0 12px; border-radius: 14px; }
  body[data-page="customer"] .category-tabs {
    top: 64px;
    margin: 0 -2px;
    padding: 6px 2px;
    gap: 6px;
    border-radius: 14px;
    scroll-padding-inline: 2px;
  }
  body[data-page="customer"] .category-chip { min-height: 44px; padding: 5px 10px 5px 6px; gap: 6px; font-size: 12px; }
  body[data-page="customer"] .category-chip-visual { width: 28px; height: 28px; flex-basis: 28px; font-size: 19px; }
  body[data-page="customer"] .section-heading { margin: 18px 0 10px; gap: 12px; }
  body[data-page="customer"] .section-heading h2 { font-size: 24px; }
  body[data-page="customer"] .section-heading .muted { flex: none; font-size: 12px; }

  body[data-page="customer"] .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body[data-page="customer"] .menu-card { border-radius: 17px; }
  body[data-page="customer"] .food-visual { height: auto; aspect-ratio: 4 / 3; max-height: 160px; }
  body[data-page="customer"] .menu-card-body { min-height: 0; gap: 7px; padding: 10px; }
  body[data-page="customer"] .food-title-button h3 { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
  body[data-page="customer"] .food-card-description { min-height: 0; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
  body[data-page="customer"] .view-food-link { min-height: 28px; font-size: 11px; }
  body[data-page="customer"] .menu-card-footer { flex-wrap: wrap; align-items: center; padding-top: 8px; gap: 8px; }
  body[data-page="customer"] .product-price-block strong { font-size: 18px; }
  body[data-page="customer"] .add-button { min-height: 44px; padding: 9px 12px; font-size: 11px; }
  body[data-page="customer"] .qty-control { gap: 3px; padding: 3px; margin-left: auto; }
  body[data-page="customer"] .qty-control button { width: 40px; height: 44px; }
  body[data-page="customer"] .qty-control span { min-width: 18px; }
  body[data-page="customer"] .cart-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
  body[data-page="customer"] .cart-row > div:first-child { min-width: 0; overflow-wrap: anywhere; }

  body[data-page="customer"] > .sheet-backdrop { padding: 10px; }
  body[data-page="customer"] .bottom-sheet {
    min-width: 0;
    max-height: 90vh;
    max-height: 90dvh;
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    border-radius: 20px;
  }
  body[data-page="customer"] .sheet-header { align-items: flex-start; }
  body[data-page="customer"] .sheet-header > div { min-width: 0; }
  body[data-page="customer"] .sheet-header h2 { font-size: 22px; overflow-wrap: anywhere; }
  body[data-page="customer"] .icon-button { flex: none; width: 44px; height: 44px; }
  body[data-page="customer"] .food-detail-media { height: auto; aspect-ratio: 4 / 3; max-height: 230px; }
  body[data-page="customer"] .primary-button,
  body[data-page="customer"] .secondary-button { min-height: 44px; font-size: 14px; padding: 12px 14px; }
  body[data-page="customer"] .cart-bar { left: 10px; right: 10px; bottom: max(12px, env(safe-area-inset-bottom)); padding: 14px; font-size: 13px; }
  body[data-page="customer"] .customer-token-card strong { font-size: 48px; }

  /* Keep text inputs at 16px so focusing a field does not zoom the iPhone page. */
  body[data-page="customer"] input,
  body[data-page="customer"] textarea,
  body[data-page="customer"] select { min-width: 0; font-size: 16px; }
  body[data-page="customer"] .site-compliance-footer { margin-top: 20px; padding: 14px; border-radius: 18px; }
}

@media (max-width: 360px) {
  body[data-page="customer"] .customer-topbar { padding-inline: 10px; }
  body[data-page="customer"] .brand-lockup > div { display: none; }
  body[data-page="customer"] .customer-shell { width: calc(100% - 20px); }
  body[data-page="customer"] .pp7-hero-copy { padding: 18px 16px; }
  body[data-page="customer"] .menu-grid { gap: 8px; }
  body[data-page="customer"] .menu-card-body { padding: 9px; }
}