/* Tejori — product carousel (home + related products) */

/* ---------- product carousel ---------- */

.pf {
  padding: 4.167vw 0 3.125vw;
  background: rgba(222, 241, 236, .25);
  overflow: hidden;
}

.pf__h {
  margin: 0 0 2.604vw;
  font-size: 2.5vw;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: var(--c-ink);
}

/* The page gutters are on the box, not the scrolling row, so the cards never slide under
   the arrows, which sit in those gutters (client request: the left arrow covered the first
   card's photo). The row used to carry padding-left: 5.208vw and run to the right edge. */
.crsl {
  position: relative;
  padding-inline: 5.208vw;
}

.crsl__t {
  display: flex;
  gap: 1.042vw;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.crsl__t::-webkit-scrollbar {
  display: none;
}

.crsl .pc {
  flex: 0 0 19.01vw;
  scroll-snap-align: start;
}

.crsl__a {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.083vw;
  height: 2.083vw;
  background: #fff;
  border: .052vw solid #fff;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: transform .5s ease;
}

.crsl__a:hover {
  transform: translateY(-50%) scale(1.2);
}

/* site.js hides both arrows while every card already fits (display: flex above would
   otherwise keep them showing) */
.crsl__a[hidden] {
  display: none;
}

/* each arrow centred in its gutter, beside the cards rather than on them. It used to
   hang off the first card (left: 5.99vw) and over the last one (right: .781vw). */
.crsl__a--p {
  left: 1.563vw;
}

.crsl__a--n {
  right: 1.563vw;
}

.crsl__a svg {
  width: 1.042vw;
  height: 1.042vw;
}

.pf__bar {
  max-width: 89.583vw;
  height: .521vw;
  margin: 2.063vw auto 0;
  background: #d8f9e8;
  border-radius: .521vw;
}

.pf__fill {
  display: block;
  width: 0;
  height: 100%;
  background: #63bea4;
  border-radius: 2.083vw;
  transition: width .3s linear;
}

@media (max-width: 767px) {
  .pf {
    padding: 9.091vw 4.545vw;
  }

  .pf__h {
    font-size: 7.5vw;
    margin-bottom: 9.091vw;
  }

  /* phones: the section's own padding is the gutter, too narrow for the arrow, so each
     arrow sits half in it, over just the card's edge rather than its middle */
  .crsl {
    padding-inline: 0;
  }

  .crsl__t {
    gap: 4.545vw;
  }

  .crsl .pc {
    flex: 0 0 43.636vw;
  }

  .crsl__a {
    width: 9.091vw;
    height: 9.091vw;
    border-width: .227vw;
  }

  .crsl__a svg {
    width: 4.545vw;
    height: 4.545vw;
  }

  .crsl__a--p {
    left: -3.409vw;
  }

  .crsl__a--n {
    right: -3.409vw;
  }

  .pf__bar {
    max-width: 100%;
    height: 1.136vw;
    margin-top: 4.545vw;
    border-radius: 9.091vw;
  }
}