/* 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);
}

.crsl {
  position: relative;
}

.crsl__t {
  display: flex;
  gap: 1.042vw;
  padding-left: 5.208vw;
  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);
}

/* the left arrow hangs off the first card, not the page edge — the original
   pins both arrows to the card row, which is inset by the page gutter */
.crsl__a--p {
  left: 5.99vw;
}

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

.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;
  }

  .crsl__t {
    gap: 4.545vw;
    padding-left: 0;
  }

  .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;
  }
}