/* 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;
}

#shell #screen-home > .app-header {
background: #fff !important;
border: 0 !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

html body #shell #screen-home > .topbar.app-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: calc(94px + env(safe-area-inset-top, 0px)) !important;
  height: calc(94px + env(safe-area-inset-top, 0px)) !important;
  flex: 0 0 calc(94px + env(safe-area-inset-top, 0px)) !important;
  margin: 0 !important;
  padding: env(safe-area-inset-top, 0px) 16px 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 100 !important;
  overflow: visible !important;
  background: linear-gradient(115deg, #1c1410 0%, #47200f 66%, #a83c10 145%) !important;
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 24px rgba(28, 20, 16, 0.18) !important;
}

html body #shell #screen-home > .scroll {
  padding-top: calc(92px + env(safe-area-inset-top, 0px)) !important;
}

html body #shell #screen-home > .topbar.app-header > .topbar-logo {
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 48% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
  width: max-content !important;
  height: 34px !important;
  font-family: var(--font-display, 'Google Sans Display'), sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 34px !important;
  letter-spacing: 0.04em !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body #shell #screen-home > .topbar.app-header > .topbar-logo::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -5px !important;
  width: 32px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #e8500a, #f7a15b) !important;
  transform: translateX(-50%) !important;
}

html body #shell #screen-home > .topbar.app-header > .topbar-logo .topbar-logo-white {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body #shell #screen-home > .topbar.app-header > .topbar-logo .topbar-logo-orange {
  color: #f15a24 !important;
  -webkit-text-fill-color: #f15a24 !important;
}

html body #shell #screen-home > .topbar.app-header > .home-left-control,
html body #shell #screen-home > .topbar.app-header > .header-actions > .icon-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  border-radius: 12px !important;
  position: relative;
  z-index: 2;
}

html body #shell #screen-home > .topbar.app-header > .home-left-control {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
}

html body #shell #screen-home > .topbar.app-header > .home-left-control {
  background: #f15a24 !important;
  border: 0 !important;
  box-shadow: 0 6px 14px rgba(241, 90, 36, 0.28) !important;
  color: #fff !important;
}

html body #shell #screen-home > .topbar.app-header > .header-actions > .icon-btn {
  flex: 0 0 52px !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
  color: #fff !important;
  border-radius: 100px !important;
}

html body #shell #screen-home > .topbar.app-header > .header-actions > .icon-btn svg,
html body #shell #screen-home > .topbar.app-header > .header-actions > .home-auth-control .header-icon {
  color: #fff !important;
  stroke: #fff !important;
  width: 20px !important;
  height: 20px !important;
}

html body #shell #screen-home > .topbar.app-header > .header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body #shell #screen-home > .topbar.app-header > .header-actions > .home-auth-control {
  flex: 0 0 88px !important;
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 10px !important;
  gap: 8px !important;
  border-radius: 100px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  font-weight: 500 !important;
}

html body #shell #screen-home > .topbar.app-header > .header-actions > .home-auth-control .home-auth-label {
  color: #fff;
  -webkit-text-fill-color: #fff;
  white-space: nowrap !important;
}

@media (max-width: 400px) {
  html body #shell #screen-home > .topbar.app-header > .topbar-logo {
    left: 47% !important;
  }
}

@media (max-width: 360px) {
  html body #shell #screen-home > .topbar.app-header > .header-actions > .home-notifications-button {
    flex-basis: 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }

  html body #shell #screen-home > .topbar.app-header > .header-actions > .home-auth-control {
    flex-basis: 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    padding: 0 !important;
  }

  html body #shell #screen-home > .topbar.app-header > .header-actions > .home-auth-control .home-auth-label {
    display: none !important;
  }

  html body #shell #screen-home > .topbar.app-header > .header-actions > .home-notifications-button svg {
    width: 22px !important;
    height: 22px !important;
  }

  html body #shell #screen-home > .topbar.app-header > .header-actions > .home-auth-control .header-icon {
    width: 22px !important;
    height: 22px !important;
  }
}

html body #shell #screen-home #top-sellers-carousel.seller-carousel .prod-card-m3 .prod-price-row button.prod-fab,
html body #shell #screen-home #home-popular-grid.seller-carousel .prod-card-m3 .prod-price-row button.prod-fab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  line-height: 0 !important;
}

html body #shell #screen-home #top-sellers-carousel.seller-carousel .prod-card-m3 .prod-price-row button.prod-fab svg,
html body #shell #screen-home #home-popular-grid.seller-carousel .prod-card-m3 .prod-price-row button.prod-fab svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
}

html body #shell #screen-home #top-sellers-carousel.seller-carousel .prod-card-m3 .prod-price-row button.prod-fab:focus-visible,
html body #shell #screen-home #home-popular-grid.seller-carousel .prod-card-m3 .prod-price-row button.prod-fab:focus-visible {
  outline: 3px solid rgba(209, 69, 0, 0.35) !important;
  outline-offset: 2px !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;
}