/* Supplemental homepage collection banner + product carousel styles.
   Loaded after the site's existing stylesheet so the existing design is retained. */
.collection-section { width: 100%; }
.collection-banner { position: relative; overflow: hidden; }
.collection-banner > img { display: block; width: 100%; height: auto; object-fit: cover; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.section-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.carousel-controls { display: flex; align-items: center; gap: 8px; }
.carousel-controls button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; font-size: 25px; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.product-carousel { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 18px; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.product-carousel > .product-card { display: block; flex: 0 0 clamp(190px, 22%, 270px); min-width: 0; scroll-snap-align: start; text-decoration: none; }
.product-card .product-image { position: relative; overflow: hidden; border-radius: inherit; }
.product-card .product-image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.product-card .product-info { padding: 10px 2px; }
.product-card .product-info h3 { margin: 0 0 6px; }
.product-card .product-info p { margin: 0; }
.home-stock-badge { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 6px 10px; border-radius: 30px; background: #222; color: #fff; font-size: 12px; }
.home-empty { flex: 0 0 100%; margin: 8px 0; padding: 18px 0; color: #777; }
@media (min-width: 1100px) { .product-carousel > .product-card { flex-basis: clamp(210px, 22%, 280px); } }
@media (max-width: 767px) {
  .collection-section { margin-bottom: 34px; }
  .collection-banner > img { min-height: 170px; max-height: 260px; object-fit: cover; }
  .section-heading { align-items: center; gap: 10px; }
  .section-actions { gap: 8px; }
  .carousel-controls button { width: 34px; height: 34px; font-size: 22px; }
  .product-carousel { gap: 12px; padding-bottom: 14px; }
  .product-carousel > .product-card { flex-basis: 44%; }
}
@media (prefers-reduced-motion: reduce) { .product-carousel { scroll-behavior: auto; } }