/* ========== RESPONSIVE PRODUCT LAYOUT ========== */
/* Desktop: 6 products | Tablet: 4 products | Mobile: 2 products scroll */

/* ========== DESKTOP (1024px and above) ========== */
@media (min-width: 1024px) {
  .phst-products,
  .phst-product-grid,
  .noon-products-wrapper,
  .woocommerce-page ul.products,
  ul.products {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 16px !important;
    padding: 0 !important;
    overflow-x: visible !important;
  }

  .phst-product,
  .phst-card,
  .noon-product-box,
  .noon-product-wrapper,
  .woocommerce-page ul.products li.product,
  ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ========== TABLET (641px to 1023px) ========== */
@media (min-width: 641px) and (max-width: 1023px) {
  .phst-products,
  .phst-product-grid,
  .noon-products-wrapper,
  .woocommerce-page ul.products,
  ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 14px !important;
    padding: 0 !important;
    overflow-x: visible !important;
  }

  .phst-product,
  .phst-card,
  .noon-product-box,
  .noon-product-wrapper,
  .woocommerce-page ul.products li.product,
  ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ========== MOBILE (640px and below) ========== */
@media (max-width: 640px) {
  /* Force proper viewport width */
  html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-size: 14px;
  }

  body {
    min-width: 320px !important;
    overflow-x: hidden !important;
    font-size: 14px !important;
  }

  /* ===== SINGLE ROW - EXACTLY 2 CARDS VISIBLE WITH SCROLL (MODIFIED) ===== */
  /* CRITICAL: ONLY target intended horizontal carousels, NOT generic product lists */
  .phst-products,
  .phst-product-grid,
  .noon-products-wrapper 
  /* The conflicting selectors (.woocommerce-page ul.products, ul.products) MUST BE REMOVED FROM HERE */
  {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: calc((100% - 10px) / 2) !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    padding: 0 12px 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    will-change: scroll-position; /* Optimize scrolling performance */
    transform: translateZ(0);
  }

  /* Hide scrollbar but keep functionality */
  .phst-products::-webkit-scrollbar,
  .phst-product-grid::-webkit-scrollbar,
  .woocommerce-page ul.products::-webkit-scrollbar,
  ul.products::-webkit-scrollbar {
    display: none !important;
  }

  /* Ensure product cards snap to position */
  .phst-product,
  .phst-card,
  .noon-product-box,
  .noon-product-wrapper,
  .woocommerce-page ul.products li.product,
  ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
  }

  /* Reset grid styles */
  .phst-products.phst-grid-6 {
    grid-auto-flow: column !important;
    grid-auto-columns: calc((100% - 10px) / 2) !important;
    grid-template-columns: none !important;
  }

  /* Best Offer / New Arrival sections */
  .phst-section {
    padding: 0 !important;
    margin: 16px 0 !important;
  }

  /* Make all containers full width on mobile */
  .phst-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Section titles with padding */
  .phst-section h2,
  .block-header h2 {
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 0 12px !important;
    margin-bottom: 12px !important;
  }

  /* Product card image */
  .phst-product-thumb img,
  .phst-card-img img,
  .noon-thumb-img,
  .noon-product-thumb img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }

  /* Product card text sizing */
  .phst-product-title,
  .phst-card-title,
  .noon-product-title,
  .noon-details-section [data-qa="product-box-name"] {
    font-size: 12px !important;
    line-height: 1.3 !important;
    min-height: auto !important;
    padding: 8px 8px 4px !important;
  }

  /* Price sizing */
  .phst-product-price,
  .phst-card-price,
  .noon-price-container,
  .noon-selling-price strong {
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 0 8px !important;
  }

  /* Mega Deal badge sizing - Fixed to auto */
  .noon-mega-deal-badge,
  .phst-badge,
  .noon-mega-deal {
    width: auto !important;
    height: auto !important;
    font-size: 9px !important;
    top: 6px !important;
    left: 6px !important;
    padding: 4px 6px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    max-width: fit-content !important;
  }

  /* Force image size in badge */
  .noon-mega-deal-badge img,
  .noon-mega-deal img {
      width: 10px !important;
      height: 10px !important;
      max-width: 10px !important;
      object-fit: contain !important;
  }

  /* GET IT NOW button */
  .noon-product-cta,
  .phst-btn,
  .phst-card-cta button {
    font-size: 11px !important;
    padding: 8px 10px !important;
    min-height: 36px !important;
    margin: 8px !important;
  }

  /* Card body padding */
  .phst-card-body,
  .noon-details-section,
  .phst-product-body {
    padding: 8px !important;
    gap: 4px !important;
  }

  /* Navigation arrows - show on mobile for horizontal scroll */
  .block-header__arrows-list {
    display: flex !important;
  }

  .block-header__arrow {
    width: 28px !important;
    height: 28px !important;
    border-radius: 999px !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(17,24,39,.08) !important;
  }

  /* Block header layout */
  .block-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 12px !important;
    margin-bottom: 12px !important;
  }

  .block-header__divider {
    flex: 1 !important;
    height: 1px !important;
    background: #e5e7eb !important;
  }

  /* Header mobile adjustments */
  .phst-site-header {
    padding: 8px 0 !important;
  }

  .phst-header-inner {
    padding: 0 12px !important;
    gap: 8px !important;
  }

  .phst-header-left,
  .phst-header-center,
  .phst-header-right {
    font-size: 12px !important;
  }

  /* Hide search on mobile */
  .phst-header-search {
    display: none !important;
  }

  /* Mobile menu adjustments */
  .phst-menu {
    font-size: 11px !important;
    gap: 8px !important;
  }

  /* Utility items */
  .phst-utility-item {
    font-size: 11px !important;
  }

  /* Banner mobile */
  .phst-banner {
    min-height: 140px !important;
    margin: 12px 0 !important;
    border-radius: 8px !important;
  }

  .phst-banner-inner {
    padding: 12px !important;
  }

  .phst-banner h2 {
    font-size: 16px !important;
    line-height: 1.2 !important;
    margin: 0 0 6px !important;
  }

  /* Slider mobile */
  .phst-slider {
    height: 250px !important;
    border-radius: 8px !important;
  }

  .phst-slide-content {
    left: 10px !important;
    bottom: 10px !important;
    padding: 8px 12px !important;
    max-width: 80% !important;
  }

  .phst-slide-content h3 {
    font-size: 14px !important;
    margin: 0 0 4px !important;
  }

  .phst-slide-content p {
    font-size: 11px !important;
    margin: 0 0 8px !important;
  }
}

/* Ultra-small devices (360px and below) - still exactly 2 */
@media (max-width: 360px) {
  .phst-products,
  .phst-product-grid,
  ul.products {
    grid-auto-columns: calc((100% - 10px) / 2) !important;
  }

  .phst-product-title,
  .phst-card-title,
  .noon-product-title {
    font-size: 11px !important;
  }

  .phst-product-price,
  .phst-card-price {
    font-size: 13px !important;
  }

  .noon-product-cta,
  .phst-btn {
    font-size: 10px !important;
    padding: 6px 8px !important;
    min-height: 32px !important;
  }

  .phst-section h2,
  .block-header h2 {
    font-size: 14px !important;
  }
}

/* Landscape mobile - show 3 full items */
@media (max-width: 960px) and (orientation: landscape) {
  .phst-products,
  .phst-product-grid,
  ul.products {
    grid-auto-columns: calc(33.333% - 7px) !important;
  }
}