/**
 * Janosci — Mobile App UI (homepage)
 * Strong navy / royal blue / soft gold visibility
 * ≤767.98px only
 */
@media (max-width: 767.98px) {
  :root {
    --app-navy: #0A2540;
    --app-navy-soft: #12355a;
    --app-blue: #1769e8;
    --app-blue-dark: #1155c7;
    --app-gold: #fbbf24;
    --app-gold-deep: #d97706;
    --app-bg: #eef2f8;
    --app-card: #ffffff;
    --app-ink: #0A2540;
    --app-muted: #475569;
    --app-line: #d7e0ee;
    --app-header-h: 58px;
  }

  /* Kill empty navy desktop-nav strip under header */
  body.app-body.home-catalog .ann-bar,
  body.app-body.home-catalog .header-search,
  body.app-body.home-catalog .header-nav,
  body.app-body.home-catalog .header-shop-zone,
  body.app-body.home-catalog .header-nav-wrap,
  body.app-body.home-catalog .nav-mega-dropzone,
  body.app-body.home-catalog .nav-mega-backdrop,
  body.app-body.home-catalog .nav-links-pro,
  body.app-body.home-catalog .btn-all-categories {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.app-body.home-catalog,
  body.app-body.home-catalog.home-pro,
  body.app-body.home-catalog.home-mobile-app {
    background: var(--app-bg) !important;
    color: var(--app-ink) !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Compact app header */
  body.app-body.home-catalog .site-header {
    height: var(--app-header-h) !important;
    min-height: var(--app-header-h) !important;
    max-height: var(--app-header-h) !important;
    overflow: hidden !important;
    background: #fff !important;
    border-bottom: 1px solid var(--app-line) !important;
    box-shadow: 0 2px 12px rgba(10, 37, 64, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.app-body.home-catalog .site-header > .container,
  body.app-body.home-catalog .header-main {
    height: var(--app-header-h) !important;
    min-height: var(--app-header-h) !important;
    max-height: var(--app-header-h) !important;
    padding: 0 !important;
  }

  body.app-body.home-catalog .header-logo-img {
    height: 42px !important;
    max-height: 42px !important;
    max-width: 132px !important;
  }

  body.app-body.home-catalog .site-header .action-btn,
  body.app-body.home-catalog .site-header .cart-btn,
  body.app-body.home-catalog .site-header .mobile-search-trigger,
  body.app-body.home-catalog .site-header .mobile-menu-trigger,
  body.app-body.home-catalog .site-header .catalog-action-link {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 12px !important;
    background: #f3f6fb !important;
    border: 1px solid var(--app-line) !important;
    color: var(--app-navy) !important;
    font-size: 1.05rem !important;
  }

  body.app-body.home-catalog .site-header .action-btn:active,
  body.app-body.home-catalog .site-header .cart-btn:active {
    background: #e8f0fe !important;
    color: var(--app-blue) !important;
  }

  body.app-body.home-catalog .site-header .cart-count,
  body.app-body.home-catalog .site-header .cart-badge,
  body.app-body.home-catalog .site-header .wish-badge,
  body.app-body.home-catalog .site-header .catalog-badge {
    background: var(--app-blue) !important;
    color: #fff !important;
    border: 2px solid #fff !important;
  }

  body.app-body.home-catalog .page-wrapper {
    padding-top: var(--app-header-h) !important;
  }

  /* Hero — richer contrast */
  body.app-body.home-catalog .hero-slider-section {
    border-radius: 0 0 22px 22px !important;
    box-shadow: 0 14px 32px rgba(10, 37, 64, 0.22) !important;
  }

  body.app-body.home-catalog .slide-overlay {
    background: linear-gradient(
      180deg,
      rgba(10, 37, 64, 0.25) 0%,
      rgba(10, 37, 64, 0.55) 45%,
      rgba(10, 37, 64, 0.92) 100%
    ) !important;
  }

  body.app-body.home-catalog .slide-tag {
    background: rgba(251, 191, 36, 0.95) !important;
    color: var(--app-navy) !important;
    border: none !important;
    font-weight: 800 !important;
  }

  body.app-body.home-catalog .slide-title {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-weight: 800 !important;
  }

  body.app-body.home-catalog .slide-subtitle {
    color: rgba(255, 255, 255, 0.92) !important;
    opacity: 1 !important;
  }

  body.app-body.home-catalog .slide-actions .btn-hc-primary,
  body.app-body.home-catalog .slide-actions .btn-gold {
    background: var(--app-gold) !important;
    color: var(--app-navy) !important;
    border: none !important;
    font-weight: 800 !important;
  }

  body.app-body.home-catalog .slide-actions .btn-outline-white {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    color: #fff !important;
  }

  /* Search + chips — app strip */
  body.app-body.home-catalog .app-home-search {
    border: 1.5px solid #bfd3f5 !important;
    box-shadow: 0 8px 22px rgba(10, 37, 64, 0.1) !important;
  }

  body.app-body.home-catalog .app-home-search button {
    background: linear-gradient(135deg, var(--app-blue), var(--app-navy)) !important;
  }

  body.app-body.home-catalog .app-quick-chip {
    color: var(--app-navy) !important;
    border-color: #c9d7ec !important;
    font-weight: 750 !important;
  }

  body.app-body.home-catalog .app-quick-chip:active,
  body.app-body.home-catalog .app-quick-chip.is-active {
    background: #e8f0fe !important;
    color: var(--app-blue) !important;
    border-color: #93c5fd !important;
  }

  /* Category cards — brand palette, high contrast */
  body.app-body.home-catalog .cat-card,
  body.app-body.home-catalog .ml-cat-card,
  body.app-body.home-catalog .mobile-category-card {
    background: var(--app-card) !important;
    border: 1.5px solid var(--app-line) !important;
    box-shadow: 0 8px 20px rgba(10, 37, 64, 0.08) !important;
  }

  body.app-body.home-catalog .cat-card-icon,
  body.app-body.home-catalog .ml-cat-icon,
  body.app-body.home-catalog .category-icon-box {
    background: linear-gradient(145deg, var(--app-blue), var(--app-navy)) !important;
    box-shadow: 0 8px 16px rgba(23, 105, 232, 0.32) !important;
  }

  body.app-body.home-catalog .cat-card:nth-child(2) .cat-card-icon,
  body.app-body.home-catalog .ml-cat-card:nth-child(2) .ml-cat-icon {
    background: linear-gradient(145deg, #3b82f6, #1d4ed8) !important;
  }

  body.app-body.home-catalog .cat-card:nth-child(3) .cat-card-icon,
  body.app-body.home-catalog .ml-cat-card:nth-child(3) .ml-cat-icon {
    background: linear-gradient(145deg, #fbbf24, #d97706) !important;
  }

  body.app-body.home-catalog .cat-card:nth-child(4) .cat-card-icon,
  body.app-body.home-catalog .ml-cat-card:nth-child(4) .ml-cat-icon {
    background: linear-gradient(145deg, #0A2540, #1769e8) !important;
  }

  body.app-body.home-catalog .cat-card-title,
  body.app-body.home-catalog h3.cat-card-title {
    color: var(--app-navy) !important;
    font-weight: 800 !important;
  }

  body.app-body.home-catalog .cat-card-desc {
    color: var(--app-muted) !important;
    opacity: 1 !important;
  }

  body.app-body.home-catalog .cat-card-cta {
    color: var(--app-blue) !important;
    font-weight: 800 !important;
  }

  /* Section titles */
  body.app-body.home-catalog .cat-section-head h2,
  body.app-body.home-catalog .ml-shop-slider-title,
  body.app-body.home-catalog .mobile-section-title,
  body.app-body.home-catalog .home-section-head h2,
  body.app-body.home-catalog .jp-reviews .section-header h2,
  body.app-body.home-catalog .ml-enquiry-intro h2,
  body.app-body.home-catalog .ml-story-copy h2 {
    color: var(--app-navy) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
  }

  body.app-body.home-catalog .section-tag,
  body.app-body.home-catalog .ml-section-label,
  body.app-body.home-catalog .cat-section-head .section-tag {
    background: #e8f0fe !important;
    color: var(--app-blue-dark) !important;
    border: 1px solid #bfdbfe !important;
    font-weight: 800 !important;
  }

  body.app-body.home-catalog .cat-section-link,
  body.app-body.home-catalog .ml-shop-slider-viewall {
    color: var(--app-blue) !important;
    font-weight: 800 !important;
  }

  /* Product cards */
  body.app-body.home-catalog .ml-shop-card.janosci-product-card,
  body.app-body.home-catalog .app-love-card {
    border: 1.5px solid var(--app-line) !important;
    box-shadow: 0 8px 20px rgba(10, 37, 64, 0.08) !important;
    background: #fff !important;
  }

  body.app-body.home-catalog .ml-shop-card .product-title,
  body.app-body.home-catalog .janosci-product-card .product-title,
  body.app-body.home-catalog .app-love-card .product-title {
    color: var(--app-navy) !important;
    font-weight: 750 !important;
  }

  body.app-body.home-catalog .ml-shop-card .price,
  body.app-body.home-catalog .janosci-product-card .price-current,
  body.app-body.home-catalog .app-love-card .price {
    color: var(--app-blue) !important;
    font-weight: 800 !important;
  }

  body.app-body.home-catalog .ml-shop-card .btn-add-cart,
  body.app-body.home-catalog .janosci-product-card .btn-add-cart {
    background: linear-gradient(135deg, var(--app-blue), var(--app-navy)) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 800 !important;
    min-height: 40px !important;
  }

  body.app-body.home-catalog .ml-shop-card .btn-view-details {
    color: var(--app-blue) !important;
    border-color: #bfdbfe !important;
    font-weight: 700 !important;
  }

  body.app-body.home-catalog .discount-badge,
  body.app-body.home-catalog .product-badge-off,
  body.app-body.home-catalog .app-love-off {
    background: linear-gradient(135deg, var(--app-gold), var(--app-gold-deep)) !important;
    color: var(--app-navy) !important;
    font-weight: 800 !important;
  }

  /* Trust strip */
  body.app-body.home-catalog .jp-trust,
  body.app-body.home-catalog .jp-trust-strip,
  body.app-body.home-catalog .hc-trust-grid {
    background: #fff !important;
  }

  body.app-body.home-catalog .jp-trust-item,
  body.app-body.home-catalog .hc-trust-item {
    color: var(--app-navy) !important;
  }

  body.app-body.home-catalog .jp-trust-item i,
  body.app-body.home-catalog .hc-trust-item i {
    color: var(--app-blue) !important;
  }

  /* Story / about — light readable card (no white-on-white bullets) */
  body.app-body.home-catalog .ml-story,
  body.app-body.home-catalog .jp-mobile-story.ml-story {
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.app-body.home-catalog .ml-story-copy h2,
  body.app-body.home-catalog .jp-mobile-story .ml-story-copy h2 {
    color: #0a2540 !important;
  }

  body.app-body.home-catalog .ml-story-copy > p,
  body.app-body.home-catalog .jp-mobile-story .ml-story-copy > p {
    color: #475569 !important;
    opacity: 1 !important;
  }

  body.app-body.home-catalog .ml-story-bullets li,
  body.app-body.home-catalog .jp-mobile-story .ml-story-bullets li {
    color: #334155 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
  }

  body.app-body.home-catalog .ml-story-bullets li i,
  body.app-body.home-catalog .ml-story-bullets .fa-check,
  body.app-body.home-catalog .ml-story-check {
    color: #fff !important;
  }

  body.app-body.home-catalog .ml-story-check {
    background: linear-gradient(135deg, #1769e8, #1155c7) !important;
  }

  body.app-body.home-catalog .ml-story-btn--ghost {
    color: #1769e8 !important;
    border: 1.5px solid #bfdbfe !important;
    background: #fff !important;
  }

  body.app-body.home-catalog .ml-story-stat,
  body.app-body.home-catalog .jp-mobile-story .ml-story-stat {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
  }

  body.app-body.home-catalog .ml-story-stat strong,
  body.app-body.home-catalog .jp-mobile-story .ml-story-stat strong {
    color: #1769e8 !important;
  }

  body.app-body.home-catalog .ml-story-panel {
    background: linear-gradient(165deg, #f8fafc 0%, #eff6ff 100%) !important;
    border: 1px solid #dbeafe !important;
  }

  body.app-body.home-catalog .ml-story-panel-kicker,
  body.app-body.home-catalog .ml-story-panel-tag {
    color: #475569 !important;
  }

  body.app-body.home-catalog .ml-story-badge {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
  }

  body.app-body.home-catalog .ml-story-badge strong {
    color: #0a2540 !important;
  }

  body.app-body.home-catalog .ml-story-badge span {
    color: #64748b !important;
  }

  body.app-body.home-catalog .ml-story-badge > i {
    color: #1769e8 !important;
  }

  /* Enquiry cards — brand colors only (no random green/purple) */
  body.app-body.home-catalog .ml-enquiry {
    background: transparent !important;
    padding: 1rem 0 1.25rem !important;
  }

  body.app-body.home-catalog .ml-enquiry-card {
    background: #fff !important;
    border: 1.5px solid var(--app-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 20px rgba(10, 37, 64, 0.07) !important;
  }

  body.app-body.home-catalog .ml-enquiry-card i,
  body.app-body.home-catalog .ml-enquiry-card .enquiry-ico {
    background: #e8f0fe !important;
    color: var(--app-blue) !important;
  }

  body.app-body.home-catalog .ml-enquiry-card:nth-child(2) i,
  body.app-body.home-catalog .ml-enquiry-card:nth-child(2) .enquiry-ico {
    background: #fff7e0 !important;
    color: var(--app-gold-deep) !important;
  }

  body.app-body.home-catalog .ml-enquiry-card:nth-child(3) i,
  body.app-body.home-catalog .ml-enquiry-card:nth-child(3) .enquiry-ico {
    background: #e8f0fe !important;
    color: var(--app-navy) !important;
  }

  body.app-body.home-catalog .ml-enquiry-card:nth-child(4) i,
  body.app-body.home-catalog .ml-enquiry-card:nth-child(4) .enquiry-ico {
    background: #fff7e0 !important;
    color: var(--app-blue) !important;
  }

  body.app-body.home-catalog .ml-enquiry-card strong,
  body.app-body.home-catalog .ml-enquiry-card h3,
  body.app-body.home-catalog .ml-enquiry-intro h2 {
    color: var(--app-navy) !important;
  }

  body.app-body.home-catalog .ml-enquiry-contact-link {
    border: 1.5px solid #bfdbfe !important;
    color: var(--app-navy) !important;
    background: #fff !important;
    font-weight: 700 !important;
  }

  body.app-body.home-catalog .ml-enquiry-form button {
    background: linear-gradient(135deg, var(--app-blue), var(--app-navy)) !important;
    color: #fff !important;
    font-weight: 800 !important;
  }

  /* Reviews / articles */
  body.app-body.home-catalog .jp-reviews {
    background: #e8f0fe !important;
    border-radius: 20px !important;
    margin: 0.5rem 12px 1rem !important;
    padding: 1.25rem 0.85rem !important;
  }

  body.app-body.home-catalog .jp-reviews .section-tag,
  body.app-body.home-catalog .home-articles-section .section-tag {
    background: var(--app-gold) !important;
    color: var(--app-navy) !important;
    border: none !important;
  }

  body.app-body.home-catalog .testimonial-card,
  body.app-body.home-catalog .home-article-card {
    background: #fff !important;
    border: 1.5px solid var(--app-line) !important;
    box-shadow: 0 8px 20px rgba(10, 37, 64, 0.08) !important;
  }

  body.app-body.home-catalog .testimonial-card .stars,
  body.app-body.home-catalog .testimonial-card .fa-star {
    color: var(--app-gold) !important;
  }

  /* Catalog CTA */
  body.app-body.home-catalog .jp-catalog-cta a,
  body.app-body.home-catalog a.btn-explore-catalog,
  body.app-body.home-catalog .btn-browse-catalog {
    background: linear-gradient(135deg, var(--app-blue), var(--app-navy)) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 800 !important;
    border-radius: 14px !important;
    min-height: 48px !important;
    box-shadow: 0 10px 24px rgba(23, 105, 232, 0.3) !important;
  }

  /* Bottom nav — native app tab bar */
  body.app-body.home-catalog nav.mobile-bottom-nav {
    height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-top: 1px solid var(--app-line) !important;
    box-shadow: 0 -6px 24px rgba(10, 37, 64, 0.1) !important;
  }

  body.app-body.home-catalog nav.mobile-bottom-nav .mobile-nav-item {
    height: 60px !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 700 !important;
  }

  body.app-body.home-catalog nav.mobile-bottom-nav .mobile-nav-item i {
    font-size: 1.28rem !important;
  }

  body.app-body.home-catalog nav.mobile-bottom-nav .mobile-nav-item.active {
    color: var(--app-blue) !important;
  }

  body.app-body.home-catalog nav.mobile-bottom-nav .mobile-nav-item.active i {
    color: var(--app-blue) !important;
  }

  body.app-body.home-catalog nav.mobile-bottom-nav .mobile-nav-item.active span {
    color: var(--app-blue) !important;
    font-weight: 800 !important;
  }

  body.app-body.home-catalog nav.mobile-bottom-nav .nav-count {
    background: var(--app-blue) !important;
    color: #fff !important;
  }

  /* FABs clear of tab bar */
  body.app-body.home-catalog .app-fab-wa,
  body.app-body.home-catalog .mobile-whatsapp {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    width: 50px !important;
    height: 50px !important;
  }

  body.app-body.home-catalog .scroll-top-btn,
  body.app-body.home-catalog .back-to-top {
    bottom: calc(130px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--app-navy) !important;
    color: #fff !important;
    border-radius: 14px !important;
  }

  /* Tighter app rhythm */
  body.app-body.home-catalog .section,
  body.app-body.home-catalog .ml-shop-slider-section,
  body.app-body.home-catalog .section-categories {
    padding-top: 0.85rem !important;
    padding-bottom: 0.65rem !important;
  }

  body.app-body.home-catalog .container,
  body.app-body.home-catalog .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}