/* Mobile landing page: two product cards per row, tighter spacing (phones only) */
@media (max-width: 600px) {

  /* page edges: 28px -> 12px */
  div[style*="padding: 20px 28px"] { padding: 12px 12px !important; }
  body > section { padding-left: 12px; padding-right: 12px; }
  .page-wrap { padding: 10px 12px !important; }

  /* hero banner: no longer 420px tall on a phone */
  .hero-banner-wrap { height: auto !important; aspect-ratio: 16 / 7; border-radius: 12px !important; margin-bottom: 14px !important; }
  .hero-arr { width: 30px !important; height: 30px !important; font-size: 18px !important; }

  /* rows: tighter rhythm */
  .cleaningbanner-section, .electronicsbanner-section, .kitchenbanner-section,
  .kk-section,
  .excl-section,
  .topdeals-section,
  .farm-section,
  .liquor-section,
  .cleaning-section,
  .electronics-section,
  .kitchen-section,
  .privlabel-section { margin-bottom: 20px !important; }

  /* section titles and arrows */
  .most-popular-title, .ad-carousel-title, .brand-section-title, .catbanner-title,
  .kk-title,
  .excl-title,
  .topdeals-title,
  .farm-title,
  .liquor-title,
  .cleaning-title,
  .electronics-title,
  .kitchen-title,
  .privlabel-title { font-size: 18px !important; }
  .carousel-btn, .brand-btn, .catbanner-btn,
  .kk-btn,
  .excl-btn,
  .topdeals-btn,
  .farm-btn,
  .liquor-btn,
  .cleaning-btn,
  .electronics-btn,
  .kitchen-btn,
  .privlabel-btn { width: 32px !important; height: 32px !important; font-size: 17px !important; }

  /* tracks: 10px gap */
  .kk-track,
  .excl-track,
  .topdeals-track,
  .farm-track,
  .liquor-track,
  .cleaning-track,
  .electronics-track,
  .kitchen-track,
  .privlabel-track { gap: 10px !important; }

  /* the cards: exactly two per row */
  .kk-card,
  .excl-card,
  .topdeals-card,
  .farm-card,
  .liquor-card,
  .cleaning-card,
  .electronics-card,
  .kitchen-card,
  .privlabel-card { flex: 0 0 calc((100% - 10px) / 2) !important; min-width: 0 !important; border-radius: 12px !important; }
  .kk-img-wrap,
  .excl-img-wrap,
  .topdeals-img-wrap,
  .farm-img-wrap,
  .liquor-img-wrap,
  .cleaning-img-wrap,
  .electronics-img-wrap,
  .kitchen-img-wrap,
  .privlabel-img-wrap { height: 128px !important; }
  .kk-img-wrap img,
  .excl-img-wrap img,
  .topdeals-img-wrap img,
  .farm-img-wrap img,
  .liquor-img-wrap img,
  .cleaning-img-wrap img,
  .electronics-img-wrap img,
  .kitchen-img-wrap img,
  .privlabel-img-wrap img { object-fit: contain !important; }
  .kk-body,
  .excl-body,
  .topdeals-body,
  .farm-body,
  .liquor-body,
  .cleaning-body,
  .electronics-body,
  .kitchen-body,
  .privlabel-body { padding: 8px 10px 10px !important; gap: 4px !important; }
  .kk-name, .kk-product-name,
  .excl-name, .excl-product-name,
  .topdeals-name, .topdeals-product-name,
  .farm-name, .farm-product-name,
  .liquor-name, .liquor-product-name,
  .cleaning-name, .cleaning-product-name,
  .electronics-name, .electronics-product-name,
  .kitchen-name, .kitchen-product-name,
  .privlabel-name, .privlabel-product-name { font-size: 12.5px !important; line-height: 1.3 !important; min-height: 0 !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .kk-price-new,
  .excl-price-new,
  .topdeals-price-new,
  .farm-price-new,
  .liquor-price-new,
  .cleaning-price-new,
  .electronics-price-new,
  .kitchen-price-new,
  .privlabel-price-new { font-size: 15px !important; }
  .kk-price-old,
  .excl-price-old,
  .topdeals-price-old,
  .farm-price-old,
  .liquor-price-old,
  .cleaning-price-old,
  .electronics-price-old,
  .kitchen-price-old,
  .privlabel-price-old { font-size: 11px !important; }
  .kk-save,
  .excl-save,
  .topdeals-save,
  .farm-save,
  .liquor-save,
  .cleaning-save,
  .electronics-save,
  .kitchen-save,
  .privlabel-save { font-size: 11px !important; }
  .kk-add-btn,
  .excl-add-btn,
  .topdeals-add-btn,
  .farm-add-btn,
  .liquor-add-btn,
  .cleaning-add-btn,
  .electronics-add-btn,
  .kitchen-add-btn,
  .privlabel-add-btn { height: 38px !important; font-size: 12px !important; }
  .kk-off-badge, .kk-badge, .kk-discount-badge,
  .excl-off-badge, .excl-badge, .excl-discount-badge,
  .topdeals-off-badge, .topdeals-badge, .topdeals-discount-badge,
  .farm-off-badge, .farm-badge, .farm-discount-badge,
  .liquor-off-badge, .liquor-badge, .liquor-discount-badge,
  .cleaning-off-badge, .cleaning-badge, .cleaning-discount-badge,
  .electronics-off-badge, .electronics-badge, .electronics-discount-badge,
  .kitchen-off-badge, .kitchen-badge, .kitchen-discount-badge,
  .privlabel-off-badge, .privlabel-badge, .privlabel-discount-badge { font-size: 10px !important; padding: 2px 6px !important; top: 8px !important; left: 8px !important; }
  .kk-deal-ribbon,
  .excl-deal-ribbon,
  .topdeals-deal-ribbon,
  .farm-deal-ribbon,
  .liquor-deal-ribbon,
  .cleaning-deal-ribbon,
  .electronics-deal-ribbon,
  .kitchen-deal-ribbon,
  .privlabel-deal-ribbon { font-size: 9px !important; padding: 2px 8px 2px 6px !important; }
  .kk-wish,
  .excl-wish,
  .topdeals-wish,
  .farm-wish,
  .liquor-wish,
  .cleaning-wish,
  .electronics-wish,
  .kitchen-wish,
  .privlabel-wish { font-size: 17px !important; top: 6px !important; right: 8px !important; }
  .cart-qty-control { height: 38px !important; }
  .cart-qty-btn { width: 34px !important; font-size: 20px !important; }
  .cart-qty-middle { font-size: 14px !important; }
}

@media (max-width: 600px) {
  .most-popular-header { margin-bottom: 8px !important; }
  .carousel-page-indicator { font-size: 12px !important; }
  .most-popular-grid { gap: 10px !important; }


  /* category columns: about three quarters of the screen, next column peeks in */
  .most-popular-grid .cat-col { flex: 0 0 min(74vw, 290px) !important; min-width: 0 !important; border-radius: 12px !important; }
  .cat-col-title { font-size: 15px !important; padding: 10px 12px 8px !important; }
  .cat-products-grid a { min-width: 0; }
  .cat-product-card { padding: 8px 6px 8px !important; gap: 4px !important; min-height: 0 !important; }
  .cat-product-img { height: 78px !important; }
  .cat-product-img img { object-fit: contain !important; }
  .cat-product-name { font-size: 11.5px !important; padding: 0 2px !important; line-height: 1.25 !important; }
  .cat-see-more { padding: 10px !important; font-size: 13px !important; }
}

/* Most Popular columns, Naivas-style: grey card, bold title, white rounded tiles, blue pill button (phones) */
@media (max-width: 600px) {
  .most-popular-grid .cat-col {
    background: #f1f2f4 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 16px !important;
  }
  .cat-col-title {
    border-bottom: none !important;
    padding: 14px 16px 6px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #1565A8 !important;
  }
  .cat-products-grid {
    background: transparent !important;
    gap: 10px !important;
    padding: 8px 12px 12px !important;
  }
  .cat-product-card {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 12px 6px 12px !important;
    gap: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    justify-content: center;
  }
  .cat-product-card:hover { background: #fff !important; }
  .cat-product-img { height: 84px !important; }
  .cat-product-img img { object-fit: contain !important; border-radius: 10px; }
  .cat-product-name {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    line-height: 1.25 !important;
  }
  .cat-see-more {
    display: block !important;
    width: auto !important;
    margin: 0 12px 14px !important;
    padding: 13px !important;
    border-radius: 999px !important;
    background: #1565A8 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: .2px;
  }
  .cat-see-more:hover, .cat-see-more:active { background: #0e4a82 !important; }
}

/* Most Popular: TWO category columns visible side by side on a phone */
@media (max-width: 600px) {
  .most-popular-grid { gap: 10px !important; }
  .most-popular-grid .cat-col { flex: 0 0 calc((100% - 10px) / 2) !important; min-width: 0 !important; border-radius: 14px !important; }

  .cat-col-title { font-size: 15px !important; padding: 11px 12px 4px !important; }
  .cat-products-grid { gap: 8px !important; padding: 6px 8px 10px !important; }
  .cat-product-card { padding: 8px 3px 8px !important; border-radius: 12px !important; gap: 4px !important; }
  .cat-product-img { height: 54px !important; }
  .cat-product-name { font-size: 11px !important; line-height: 1.2 !important; padding: 0 1px !important; overflow-wrap: anywhere; }
  .cat-see-more { margin: 0 8px 10px !important; padding: 10px !important; font-size: 14px !important; }
}

/* Most Popular has no promo banner now: desktop and tablet columns fill the row, three at a time */
@media (min-width: 601px) {
  .most-popular-grid .cat-col { flex: 0 0 calc((100% - 32px) / 3) !important; }
}

/* Shop By Brand: same look as Most Popular, two columns side by side (phones) */
@media (max-width: 600px) {
  .brand-pages-track { gap: 10px !important; }
  .brand-col {
    flex: 0 0 calc((100% - 10px) / 2) !important;
    min-width: 0 !important;
    background: #f1f2f4 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 14px !important;
  }
  .brand-col-title {
    border-bottom: none !important;
    padding: 11px 12px 4px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #1565A8 !important;
  }
  .brand-logos-grid {
    background: transparent !important;
    gap: 8px !important;
    padding: 6px 8px 10px !important;
  }
  .brand-logos-grid > a { min-width: 0; }
  .brand-logo-card {
    background: #fff !important;
    border-radius: 12px !important;
    padding: 8px 3px !important;
    gap: 4px !important;
    min-height: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  }
  .brand-logo-card:hover { background: #fff !important; }
  .brand-logo-box {
    width: 100% !important;
    max-width: 62px !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    border: none !important;
    border-radius: 10px !important;
    background: #fff;
  }
  .brand-logo-box img { object-fit: contain !important; }
  .brand-logo-name {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
  }
  .brand-see-more {
    display: block !important;
    width: auto !important;
    margin: 0 8px 10px !important;
    padding: 10px !important;
    border-radius: 999px !important;
    background: #1565A8 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }
  .brand-see-more:hover, .brand-see-more:active { background: #0e4a82 !important; }
}