/* CAROUSEL — dùng chung cho nhiều phần trên website.
   Sửa số thẻ ngay tại đây; không cần tìm các khối @media rải rác. */
.carousel.products {
  --items-desktop: 4;
  --items-tablet: 3;
  --items-mobile: 2;
}

.carousel.blog {
  --items-desktop: 3;
  --items-tablet: 2;
  --items-mobile: 1;
}

.carousel.links {
  --items-desktop: 5;
  --items-tablet: 3;
  --items-mobile: 2;
}

.carousel {
  --visible: var(--items-desktop, 4);
  display: grid;
  gap: var(--gap, 18px);
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--visible) - 1) * var(--gap, 18px)) / var(--visible));
  grid-template-rows: auto;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 12px;
  min-width: 0;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: #c7a766 var(--cream, #faf7f1);
}

.carousel > * {
  scroll-snap-align: start;
  min-width: 0;
}

.carousel-controls {
  display: grid;
  grid-template-columns: 38px 38px;
  justify-content: end;
  gap: 8px;
  margin-bottom: 10px;
}

.carousel-controls button {
  display: grid;
  place-items: center;
  height: 36px;
  border: 1px solid #e4d6bf;
  border-radius: 6px;
  background: var(--cream, #faf7f1);
  color: var(--brown, #352014);
  font-size: 22px;
  cursor: pointer;
}

.carousel-controls button:disabled {
  opacity: .35;
  cursor: default;
}

.carousel-controls button:hover:not(:disabled) {
  background: var(--green, #115511);
  color: #fff;
}

.carousel-controls .icon {
  width: 21px;
  height: 21px;
}

.section-heading > .carousel-controls {
  margin-bottom: 0;
  justify-self: end;
}

/* Tiêu đề + nút điều khiển; có thêm cột khi dùng nút Xem tất cả. */
#coffee > .section-heading {
  grid-template-columns: minmax(0, 1fr) auto;
}

#coffee > .section-heading:has(#show-all) {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

@media (max-width: 1024px) {
  .carousel {
    --visible: var(--items-tablet, 3);
  }
}

@media (max-width: 640px) {
  .carousel {
    --visible: var(--items-mobile, 2);
    --gap: 10px;
    width: 100%;
    scroll-snap-stop: always;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }

  .carousel .product,
  .carousel .article,
  .carousel.links > a {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .carousel.products img,
  .carousel.blog img{
    width: 100%;
    height: auto;
    aspect-ratio:1.6;
    object-fit:cover;
    background: var(--cream, #faf7f1);
  }
  

  .carousel.links img {
    width: 100%;
    height: auto;
    aspect-ratio:1.3;
    object-fit:cover;
    background: var(--cream, #faf7f1);
  }


  .carousel h3,
  .carousel p {
    overflow-wrap: anywhere;
  }

  .carousel .product-actions .btn {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel {
    scroll-behavior: auto;
  }
}