/* ===================================================================
   SchoolPHONES — Homepage Tweaks
   ONLY Cables & Microphones (cat 36) scrolls — everything else static
   =================================================================== */

/* RESET: ensure ALL non-cable product sections show all products, no scroll */
.wp-block-woocommerce-product-category .wc-block-grid__products {
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
}

/* ── Cables & Microphones (cat 36): vertical scroll ──────────────── */
.wp-block-woocommerce-product-category[data-categories='[36]'] .wc-block-grid__products {
  max-height: 1280px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 0.5rem;
  scroll-snap-type: y proximity;
  -webkit-overflow-scrolling: touch;
}

/* Styled scrollbar for cables section */
.wp-block-woocommerce-product-category[data-categories='[36]'] .wc-block-grid__products::-webkit-scrollbar {
  width: 6px;
}
.wp-block-woocommerce-product-category[data-categories='[36]'] .wc-block-grid__products::-webkit-scrollbar-track {
  background: #e8eaf6;
  border-radius: 3px;
}
.wp-block-woocommerce-product-category[data-categories='[36]'] .wc-block-grid__products::-webkit-scrollbar-thumb {
  background: var(--wp--preset--color--primary, #4362EA);
  border-radius: 3px;
}
.wp-block-woocommerce-product-category[data-categories='[36]'] .wc-block-grid__products::-webkit-scrollbar-thumb:hover {
  background: var(--wp--preset--color--secondary, #F3A1C2);
}
/* Firefox */
.wp-block-woocommerce-product-category[data-categories='[36]'] .wc-block-grid__products {
  scrollbar-width: thin;
  scrollbar-color: var(--wp--preset--color--primary, #4362EA) #e8eaf6;
}

@media (max-width: 768px) {
  .wp-block-woocommerce-product-category[data-categories='[36]'] .wc-block-grid__products {
    max-height: 1050px !important;
  }
}

/* ── Layout shift prevention: reserve space for product images ──── */
.wp-block-woocommerce-product-category .wc-block-grid__product-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.wp-block-woocommerce-product-category .wc-block-grid__product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}