/* Products page: category intros, card carousels, photo strips. */

.page-products .page-banner__subtitle {
  width: 100%; max-width: var(--container);
  /* devices/products.css sets --sub-pad: 8% on some devices; the old site measured it
     against the 1140px content box, so it never exceeds 8% of that (91.2px). */
  padding-inline: min(var(--sub-pad, 0px), 91.2px);
}

/* On phones the products banner keeps its desktop size (the shared banner shrinks on other pages). */
@media (max-width: 767px) {
  .page-products .page-banner { min-height: 500px; background-position: center center; }
  .page-products .page-banner__title { font-size: 72px; }
  .page-products .page-banner__subtitle { font-size: 22px; line-height: 35px; }
}

/* ---------- category heading + intro ---------- */

.product-intro {
  position: relative;
  padding: 25px 0 50px;
  background: #f7ebe2 var(--tile);
}
.product-intro::before { /* faint warm overlay the old site layered on the paper */
  content: ""; position: absolute; inset: 0;
  background: #f7ebe2; opacity: .09; mix-blend-mode: darken;
}
.product-intro__in {
  position: relative;
  display: flex; flex-direction: column; gap: 20px;
  max-width: 1200px; margin: 0 auto;
}
.product-intro__title {
  padding: 10px 20px;
  border-radius: 10px;
  background: var(--label);
  font: 400 42px/1 var(--tanker);
  letter-spacing: 3px;
  text-transform: capitalize;
  text-align: center;
  color: #fff;
}
.product-intro__text {
  font: 400 21px/1.6 var(--ballinger);
  color: #000;
}

/* ---------- card carousel ---------- */

.product-carousel { padding: 0 0 50px; background: var(--tile); }
.product-carousel--last { padding-bottom: 75px; }

.carousel {
  --per: 4;
  --gap: 20px;
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
}
.carousel__viewport { overflow: hidden; touch-action: pan-y; }
.carousel__track {
  display: flex; align-items: flex-start; gap: var(--gap);
  transition: transform 1s ease;
  will-change: transform;
}
.carousel__item {
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  text-align: center;
  border-radius: 10px;
  filter: contrast(1.1);
  cursor: pointer;
  transition: background-color .3s;
}
.carousel__item img {
  display: block;
  width: 265px; max-width: 100%; height: auto; aspect-ratio: 1;
  margin: 0 auto 8px;
  object-fit: contain;
  filter: drop-shadow(2px 4px 6px #000);
}
.carousel__title {
  font: 400 33px/45px var(--tanker);
  color: var(--green);
  transition: color .3s;
}
.carousel__item:hover, .carousel__item.is-active { background: #97221c; }
.carousel__item:hover .carousel__title, .carousel__item.is-active .carousel__title { color: #fff; }

.carousel__arrow {
  position: absolute; top: var(--arrow-top, 199px);
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  padding: 0; border: 0; border-radius: 4px;
  background: var(--red); color: #fff;
  transition: background-color .3s;
}
.carousel__arrow:hover { background: var(--green-dark); }
.carousel__arrow svg { width: 13px; height: 20px; fill: currentColor; }
.carousel__arrow--prev { left: 0; }
.carousel__arrow--next { right: 0; }
.carousel__arrow[hidden] { display: none; }

.carousel__dots { margin-top: 20px; text-align: center; font-size: 17px; line-height: 27.2px; }
.carousel__dots button {
  display: inline-block;
  width: 8px; height: 8px;
  margin: 0 5px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--green);
}
.carousel__dots button[aria-selected="true"] { background: #97221c; }

/* ---------- photo strip between categories ---------- */

.product-strip { min-height: 250px; background-repeat: no-repeat; background-size: cover; }

/* Category labels use the theme's h2 size: 42px, 40px on tablets, 32px on phones. */
@media (max-width: 1024px) { .product-intro__title { font-size: 40px; } }
@media (max-width: 767px) { .product-intro__title { font-size: 32px; } }

/* On tablets and phones the old carousel arrows turned white with a black chevron. */
@media (max-width: 1024px) { .carousel__arrow { background: #fff; color: #000; } }

/* Items per view follow the old carousel: 4 from 980px, 2 from 768px, 1 below. */
@media (max-width: 979px) { .carousel { --per: 2; } }
@media (max-width: 767px) { .carousel { --per: 1; } }