/* =========================================================
   CARRUSEL DE PRODUCTOS DEL INICIO
   ========================================================= */

.home-products {
  overflow: hidden;
}

.home-products__heading {
  align-items: center;
}

.product-carousel {
  position: relative;
  min-width: 0;
}

.product-carousel__header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.product-carousel__controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-carousel__button {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;

  background: var(--surface);
  color: var(--brand);

  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;

  cursor: pointer;
  box-shadow: var(--shadow-soft);

  transition:
    transform 0.2s ease,
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
}

.product-carousel__button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.product-carousel__button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.product-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 72px) / 4);
  gap: 24px;

  overflow-x: auto;
  overscroll-behavior-inline: contain;

  padding: 4px 2px 18px;

  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.product-carousel__track::-webkit-scrollbar {
  display: none;
}

.product-carousel__item {
  width: 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.product-carousel__track:focus-visible {
  border-radius: var(--radius);
  outline: 3px solid rgba(0, 105, 173, 0.25);
  outline-offset: 5px;
}


/* Tablet */

@media screen and (max-width: 1024px) {

  .product-carousel__track {
    grid-auto-columns: calc((100% - 24px) / 2);
  }

}


/* Celular */

@media screen and (max-width: 640px) {

  .home-products__heading {
    align-items: flex-start;
  }

  .product-carousel__header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .product-carousel__track {
    grid-auto-columns: 100%;
    gap: 16px;
  }

  .product-carousel__button {
    width: 42px;
    height: 42px;
  }

}