/**
 * Android WebView / TWA – top inset = status bar only (no extra offset).
 * Rules apply only when html has .zimoo-android-app (native WebView / bridge).
 */
html:not(.zimoo-android-app) {
  --zimoo-safe-top: 0px;
}

html:not(.zimoo-android-app) body::before {
  display: none !important;
  content: none !important;
  height: 0 !important;
}

html.zimoo-android-app {
  --zimoo-safe-top: 24px;
}

/* Status bar fill — matches page bg, height = inset only (no double padding) */
html.zimoo-android-app body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--zimoo-safe-top);
  max-height: 32px;
  background: #F5F5F5;
  z-index: 9999;
  pointer-events: none;
}

/* Sticky / wrapper headers – status bar inset on outer shell only */
html.zimoo-android-app .cat-sticky-header,
html.zimoo-android-app .cart-sticky-header,
html.zimoo-android-app .orders-sticky-header,
html.zimoo-android-app .sa-sticky-header,
html.zimoo-android-app .search-page-header,
html.zimoo-android-app .profile-edit-header,
html.zimoo-android-app .addr-flow-header,
html.zimoo-android-app .od-header,
html.zimoo-android-app .help-header,
html.zimoo-android-app .priv-header,
html.zimoo-android-app .dp-dash-header,
html.zimoo-android-app .dp-orders-sticky-head,
html.zimoo-android-app .dp-od-header,
html.zimoo-android-app .dp-auth-top,
html.zimoo-android-app .login-topbar {
  padding-top: var(--zimoo-safe-top);
}

/* Nested header inside wrappers – normal padding, no second inset */
html.zimoo-android-app .cat-sticky-header .header,
html.zimoo-android-app .cart-sticky-header .header,
html.zimoo-android-app .cart-sticky-header .cart-top-bar,
html.zimoo-android-app .orders-sticky-header .header,
html.zimoo-android-app .sa-sticky-header .header {
  padding-top: 10px;
}

/* Home + simple top headers */
html.zimoo-android-app #home-header,
html.zimoo-android-app #page-favourites > .header,
html.zimoo-android-app #page-offers > .header {
  padding-top: calc(10px + var(--zimoo-safe-top));
  padding-bottom: 6px;
}

/* Account + payment + place order — full-page shell gets status bar inset */
html.zimoo-android-app #page-account.active,
html.zimoo-android-app #page-payment-methods.active,
html.zimoo-android-app #page-place-order.active {
  padding-top: var(--zimoo-safe-top);
  box-sizing: border-box;
}

html.zimoo-android-app #page-account.active > .header {
  padding-top: 10px;
  padding-bottom: 10px;
}

html.zimoo-android-app #page-payment-methods.active > .pay-header {
  padding-top: 10px;
  padding-right: var(--content-padding);
  padding-bottom: 10px;
  padding-left: var(--content-padding);
}

html.zimoo-android-app #page-place-order.active > .po-sticky-header {
  padding-top: 0;
}

html.zimoo-android-app #page-place-order.active .po-top-bar {
  padding-top: 10px;
}

@media (max-width: 480px) {
  html.zimoo-android-app #page-payment-methods.active > .pay-header {
    padding-top: 8px;
    padding-right: 10px;
    padding-bottom: 8px;
    padding-left: 10px;
  }

  html.zimoo-android-app #page-place-order.active .po-top-bar {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Razorpay checkout modal – status bar inset only (no double offset) */
html.zimoo-android-app .razorpay-container {
  top: var(--zimoo-safe-top) !important;
  height: calc(100% - var(--zimoo-safe-top)) !important;
  padding-top: 0 !important;
  box-sizing: border-box !important;
}

html.zimoo-android-app .razorpay-container > iframe,
html.zimoo-android-app iframe.razorpay-checkout-frame {
  height: 100% !important;
  margin-top: 0 !important;
}

/* Home scroll — inner container like orders/cart (no outer rubber-band stretch) */
html.zimoo-android-app #home-scroll {
  overscroll-behavior-y: none;
}

/* Stable sticky offsets — top inset via sticky top, not padding toggle */
html.zimoo-android-app #page-home:not(.home-search-stuck) .home-sticky-search {
  padding-top: 0;
  top: 0;
}

html.zimoo-android-app #page-home.home-search-stuck .home-sticky-search {
  padding-top: 0;
  top: var(--zimoo-safe-top);
}

html.zimoo-android-app #page-home:not(.home-search-stuck) .home-sticky-tags {
  top: var(--home-sticky-search-h);
}

html.zimoo-android-app #page-home.home-search-stuck .home-sticky-tags {
  top: calc(var(--zimoo-safe-top) + var(--home-sticky-search-h));
}

/* Offline Android — no skeleton; connection popup handles retry */
html.zimoo-android-app.zimoo-android-offline-mode #page-home .home-skeleton-block,
html.zimoo-android-offline-mode #page-home .home-skeleton-block {
  display: none !important;
}

html.zimoo-android-app.zimoo-android-offline-mode #page-home #home-scroll,
html.zimoo-android-offline-mode #page-home #home-scroll {
  visibility: hidden;
  pointer-events: none;
}

html.zimoo-android-app.zimoo-android-offline-mode .bottom-nav,
html.zimoo-android-offline-mode .bottom-nav {
  pointer-events: none;
  opacity: 0.45;
}

html.zimoo-android-app #page-home.home-search-stuck .home-sticky-search,
html.zimoo-android-app #page-home.home-search-stuck .home-sticky-tags {
  animation: none;
}

html.zimoo-android-app .rest-hero-actions {
  top: calc(12px + var(--zimoo-safe-top));
}

html.zimoo-android-app .pd-hero-nav {
  top: calc(16px + var(--zimoo-safe-top));
}

html.zimoo-android-app .detect-loc-back {
  top: calc(14px + var(--zimoo-safe-top));
}

/* Prevent sticky/banner jump during Android skeleton → content swap */
html.zimoo-android-app #page-home.home-loading .home-sticky-tags,
html.zimoo-android-app #page-home.home-load-finishing .home-sticky-tags,
html.zimoo-android-app #page-home.home-loading .home-sticky-search,
html.zimoo-android-app #page-home.home-load-finishing .home-sticky-search {
  animation: none !important;
  transition: none !important;
}

html.zimoo-android-app #page-home.home-load-finishing .home-loaded-block.home-reveal {
  animation: none !important;
}

/* Normal banner — Android WebView needs explicit height + background fallback */
html.zimoo-android-app .hero-banner-slide.hero-banner--image,
html.zimoo-android-app .hero-banner.hero-banner--image {
  display: block !important;
  height: var(--hero-banner-h, 160px) !important;
  min-height: var(--hero-banner-h, 160px) !important;
  max-height: var(--hero-banner-h, 160px) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

html.zimoo-android-app .hero-banner--image .hero-banner-img-full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: var(--hero-banner-h, 160px);
  object-fit: cover;
  -webkit-object-fit: cover;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

html.zimoo-android-app .hero-banner-track {
  align-items: stretch;
}

html.zimoo-android-app .hero-banner-carousel {
  touch-action: pan-y;
}