html {
  scroll-behavior: smooth;
}

/* Reason: blanco puro, sin textura. La textura de ruido que había oscurecía la página a ~#F9F9F9
   y las fotos de producto con fondo blanco (#FFF) se veían como un recuadro. */
body {
  background-color: #FFFFFF;
}

::selection {
  background-color: #BC9DED;
  color: #241B3D;
}

.cart-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  color: #241B3D;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.cart-badge:hover {
  background-color: rgba(188, 157, 237, 0.3);
  transform: translateY(-1px);
}

.cart-badge svg {
  width: 1.5rem;
  height: 1.5rem;
}

.cart-badge__count {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  border-radius: 9999px;
  background-color: #BC9DED;
  color: #241B3D;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
}

.cart-badge__count:empty,
.cart-badge__count[data-cart-count="0"] {
  display: none;
}

.qty-stepper button {
  transition: background-color 0.2s ease, color 0.2s ease;
}

@keyframes fade-out-row {
  to {
    opacity: 0;
    transform: translateX(8px);
    max-height: 0;
    margin: 0;
    padding: 0;
  }
}

.cart-row--removing {
  animation: fade-out-row 0.3s ease forwards;
  overflow: hidden;
}

/* ---------- Carrusel de fotos de producto (Views/Shared/_ProductCarousel.cshtml) ---------- */

.carousel-track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-track > * {
  scroll-snap-align: start;
}

.carousel-track:focus-visible {
  outline: 2px solid #241B3D;
  outline-offset: -2px;
}

.carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.9);
  color: #241B3D;
  font-size: 1.6rem;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(36, 27, 61, 0.2);
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.carousel-arrow:hover {
  background-color: #FFFFFF;
}

.carousel-arrow:disabled {
  opacity: 0 !important;
  pointer-events: none;
}

/* Tarjetas del catálogo: flechas solo al pasar el mouse (o con foco de teclado)... */
.carousel--card .carousel-arrow {
  width: 2rem;
  height: 2rem;
  font-size: 1.3rem;
  opacity: 0;
}

.carousel--card:hover .carousel-arrow,
.carousel--card .carousel-arrow:focus-visible {
  opacity: 1;
}

/* ...y siempre visibles en pantallas táctiles, donde no existe el hover. */
@media (hover: none) {
  .carousel--card .carousel-arrow {
    opacity: 1;
  }
}

.carousel-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  /* Gris (ink al 25%) y no blanco: las fotos suelen tener fondo blanco. */
  background-color: rgba(36, 27, 61, 0.25);
  /* transform en vez de width: evita layout thrash en cada cambio de foto. */
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.carousel-dot[aria-current="true"] {
  transform: scaleX(2.444); /* 1.1rem / 0.45rem — mismo ancho final que antes */
  background-color: #241B3D;
}

.carousel-thumb {
  outline: 2px solid transparent;
  outline-offset: 2px;
  opacity: 0.6;
  transition: opacity 0.2s ease, outline-color 0.2s ease;
}

.carousel-thumb:hover,
.carousel-thumb[aria-current="true"] {
  opacity: 1;
}

.carousel-thumb[aria-current="true"] {
  outline-color: #BC9DED;
}

/* ---------- Encuéntranos: tarjeta de tienda (Views/Encuentranos/Index.cshtml) ---------- */

.store-card {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.store-card:hover {
  border-color: rgba(36, 27, 61, 0.3);
}

/* Tienda que se está mostrando en el mapa. */
.store-card[aria-current="true"] {
  border-color: #241B3D;
  background-color: #F1ECFC;
}