/* Approved Figma frame KTeDMyOt3zayCSlnUcEAp4 / 1:9045.
   Approved product-card and carousel refinements. */
.product-image { aspect-ratio: 1 / 1; }
.swatches button[aria-pressed="true"]::before, .swatches button::after { border-radius: 0; }
[data-hero="final"] .site-footer { background: #21241e; }
.seo-outro .underlined-link:first-child { background: #21241e; }
.seo-outro .underlined-link:first-child:hover { background: #4c5344; }

/* Nieuw: swipe-carousel, 3 zichtbaar op desktop */
.new-carousel .product-grid { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.new-carousel .product-grid::-webkit-scrollbar { display: none; }
.new-carousel .product-grid:focus-visible { outline: 1px solid #96968d; outline-offset: 6px; }
.new-carousel .product-card { flex: 0 0 calc((100% - 44px) / 3); min-width: 0; scroll-snap-align: start; }
.carousel-controls { display: flex; align-items: center; gap: 24px; margin-top: 36px; }
.carousel-progress { flex: 1; height: 2px; background: #e4e4df; overflow: hidden; }
.carousel-progress span { display: block; height: 100%; background: #21241e; transition: transform .25s, width .25s; }
.carousel-arrows { display: flex; gap: 10px; }
.carousel-arrows button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid #21241e; border-radius: 0; background: none; color: #21241e; cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.carousel-arrows button:hover:not(:disabled) { background: #21241e; color: #fff; }
.carousel-arrows button:disabled { opacity: .3; cursor: default; }
@media (max-width: 900px) {
  .new-carousel .product-grid { gap: 14px; }
  .new-carousel .product-card { flex-basis: calc((100% - 14px) / 2); }
}
@media (max-width: 600px) {
  .new-carousel .product-grid { gap: 14px; padding: 0 var(--gutter); scroll-padding-left: var(--gutter); }
  .carousel-controls { padding: 0 var(--gutter); }
  .new-carousel .product-card { flex-basis: 78%; }
  .carousel-controls { gap: 14px; }
  .carousel-arrows button { width: 44px; height: 44px; }
}