.haya-block { margin: 2.5rem 0; }
.haya-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.haya-title { margin: 0; font-size: 1.5rem; }
.haya-all { font-size: .9rem; text-decoration: underline; white-space: nowrap; }

.haya-carousel { position: relative; }
.haya-track {
  display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.haya-track::-webkit-scrollbar { display: none; }
.haya-slide { flex: 0 0 calc((100% - 3rem) / 4); min-width: 0; scroll-snap-align: start; }
.haya-slide .product-miniature { width: 100%; max-width: none; float: none; }

.haya-nav {
  position: absolute; top: 40%; transform: translateY(-50%); z-index: 2;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid #ccc; background: #fff; color: #333;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.haya-nav:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.haya-nav[disabled] { opacity: .35; cursor: default; }
.haya-prev { left: -1rem; }
.haya-next { right: -1rem; }

@media (max-width: 991px) { .haya-slide { flex-basis: calc((100% - 1rem) / 2); } }
@media (max-width: 575px) {
  .haya-slide { flex-basis: 78%; }
  .haya-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) { .haya-track { scroll-behavior: auto; } }