/* Mobile readability and touch sizing baseline for the customer app. */
@media (max-width: 600px) {
  html {
    font-size: 16px;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  #shell {
    font-size: 16px !important;
    line-height: 1.45;
  }

  #shell .screen.active :where(p, li, label, .form-label, .field-label,
    .sum-row, .cat-name, .product-name, .cart-name-m3) {
    font-size: 14px !important;
  }

  #shell .screen.active :where(small, .caption, .meta, .helper, .hint,
    .cat-sub, .prof-sec-lbl, .rew-offer-progress-label, .rew-offer-kicker,
    .lh-id, .address-kicker, .address-list-note,
    .checkout-status, .home-notifications-count, .nchip-count, .loyalty-pts span,
    .ipoo-inline-9336245fea, .ipoo-inline-85ab6dcf32, .prof-tier-badge,
    .prod-unit, .prod-stock-chip, .badge, .chip, .nav-label) {
    font-size: 12px !important;
  }

  #shell #screen-home .home-cat-grid .cat-name {
    font-size: 11px !important;
  }

  #shell #screen-home .home-cat-grid .cat-sub {
    font-size: 9px !important;
  }

  #shell #sc-profile #p-tier-badge,
  #shell #sc-profile .ipoo-inline-9336245fea,
  #shell #sc-profile .ipoo-inline-85ab6dcf32,
  #shell #sc-profile #p-tier-badge,
  #shell #sc-loyalty #rew-grid .rew-offer-progress-label,
  #shell #screen-cart .cart-empty-kicker,
  #shell #screen-cart .cart-empty-perks span,
  #shell #screen-cart .cart-empty-perks strong,
  #shell #screen-checkout .checkout-status,
  #shell #screen-top-sellers .floating-cart-badge,
  #shell #screen-popular .floating-cart-badge,
  #shell #sc-catpage .cat-top-kicker,
  #shell #screen-success .success-badge,
  #shell #screen-success .summary-label,
  #shell #sc-edit-profile .phone-pfx,
  #shell #sc-help .ipoo-inline-1165911ff7,
  #shell #sc-about .about-sec small,
  #shell #sc-about .crow-body span,
  #shell #sc-points-info .ipoo-inline-5e7a3fafc8,
  #shell #sc-points-info .ipoo-inline-0a162ad890,
  #shell #sc-points-info .ipoo-inline-3037cca9d2,
  #shell #sc-notif .nchip-count {
    font-size: 12px !important;
  }

  html body #shell #sc-about .about-sec .about-kv .akv small,
  html body #shell #sc-about .about-sec .crow-body span,
  html body #shell #sc-about .about-footer {
    font-size: 12px !important;
  }

  #shell .screen.active :where(button, input, select, textarea) {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  #shell .screen.active :where([role="button"], .btn, .btn-filled, .btn-outlined) {
    min-height: 48px !important;
  }

  #shell .screen.active :where(.icon-btn, .home-notifications-button) {
    width: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  #shell .screen.active :where(input[type="checkbox"], input[type="radio"]) {
    width: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    height: 24px !important;
  }

  #shell nav#nav-home .ni {
    min-height: 52px !important;
  }

  #shell nav#nav-home .ni-lbl {
    font-size: 12px !important;
  }
}

#shell .screen > .app-header {
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 12px 16px !important;
  background: linear-gradient(135deg, #2b1202 0%, #3d1c02 50%, #1f0a01 100%) !important;
  border: 0 !important;
  border-bottom-left-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}

html body #shell #screen-products #cat-chips .filter-chip:not(.active) {
  background: var(--md-surface-2) !important;
}

html,
body,
#shell,
#shell *,
#ipoo-auth-root,
#ipoo-auth-root * {
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
  scrollbar-gutter: auto;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
#shell::-webkit-scrollbar,
#shell *::-webkit-scrollbar,
#ipoo-auth-root::-webkit-scrollbar,
#ipoo-auth-root *::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}