/* Kactus favorites carousels (Figma: top ventas 521:7066) */
.k-favorites {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  padding: 80px 80px 40px;
  /* el track lleva margin:-30px (para no recortar sombras); en móvil el padding
     es menor que 30 y ese margen negativo desbordaba ~6px el viewport */
  overflow-x: clip;
}

.k-favorites__title {
  margin: 0 0 20px;
  font-family: var(--k-font-title, "Laviossa", serif);
  font-size: var(--k-text-xl, 40px);
  font-weight: 500;
  line-height: var(--k-lh-xl, 52px);
  color: var(--k-black-soft, #161616);
}

.k-favorites__row {
  position: relative;
  /* 120px reales entre carruseles (el track lleva padding-top 30 para las sombras) */
  margin-bottom: 90px;
}

.k-favorites__row:last-child {
  margin-bottom: 0;
}

/* Flechas fuera de flujo, alineadas con el título (esquina sup. derecha), para que
   la distancia título → carrusel sea 20px (antes las flechas metían ~40px). */
.k-favorites__arrows {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  margin: 0;
  /* Las flechas van a 10px por encima de SU propio carrusel (todos, incluido el
     primero; en el primero conviven a la derecha del título). El +20 compensa el
     padding-top:30 del track para que queden a 10px reales de las cartas. */
  transform: translateY(calc(-100% + 20px));
}

.k-favorites__arrow {
  display: inline-flex;
  padding: 0;
  color: var(--k-brown, #877763);
  cursor: pointer;
  background: none;
  border: none;
}

/* hover: el trazo mantiene el color; se rellena el círculo con soft-brown-30 */
.k-favorites__arrow:hover:not(:disabled) rect {
  fill: var(--k-soft-brown-30, rgba(222, 213, 204, 0.3));
}

.k-favorites__arrow:disabled {
  color: var(--k-border, #d8d2c8);
  cursor: default;
  opacity: 1;
}

.k-favorites__track {
  display: flex;
  gap: 20px;
  /* padding + margen negativo: que la sombra del hover no se recorte por el overflow */
  padding: 30px;
  margin: -30px;
  scroll-behavior: smooth;
  overflow-x: auto;
  scrollbar-width: none;
}

.k-favorites__track::-webkit-scrollbar {
  display: none;
}

.k-favorites__item {
  flex: 0 0 auto;
  width: 380px;
  max-width: 80vw;
}

@media (max-width: 991px) {
  .k-favorites {
    padding: 40px 24px 20px;
  }

  .k-favorites__title {
    font-size: 28px;
    line-height: 1.3;
  }

  .k-favorites__item {
    width: 260px;
  }

  /* En móvil el título envuelve en varias líneas y las flechas absolutas se le
     pegaban encima. Las sacamos a flujo normal, alineadas a la derecha, entre
     el título y el carrusel. */
  .k-favorites__arrows {
    position: static;
    justify-content: flex-end;
    margin-bottom: 16px;
    transform: none;
  }
}