/*
   ==========================================================================
   COMPONENTE: Carrusel de plantas (mobile-first)
   Pista horizontal con scroll-snap que reutiliza .plant-card tal cual
   (plant-card.css se linkea antes). Sin librería: el scroll nativo hace el
   trabajo, el JS inline de la vista solo mueve la pista con las flechas y
   sincroniza los puntos. Se usa en la landing para "Más vendidas".
   ========================================================================== */
.plant-carousel {
  position: relative;
  /* Contenedor de consulta: su ancho es el de .container, el mismo que usa
     /catalogo, así las tarjetas pueden repetir la cuenta de .catalog-grid
     en unidades cqw (ver "Tamaño de tarjeta" abajo). */
  container-type: inline-size;
}

.plant-carousel-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Aire arriba/abajo para que la sombra + translateY del hover de la
     tarjeta no se recorten contra el overflow. */
  padding: 0.5rem 0 1rem;
  margin: -0.5rem 0 -1rem;
}
.plant-carousel-track::-webkit-scrollbar { display: none; }

.plant-carousel-track > .plant-card {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* --------------------------------------------------------------------------
   Tamaño de tarjeta: exactamente el de una .catalog-item de /catalogo
   (catalog.css), medido en navegador contra la tarjeta estándar del
   catálogo — sin selector de color y con tamaños/precio en una línea; las
   que tienen contenido extra crecen allá, acá no hay nada que las haga
   crecer.

   · Ancho (--card-w): la cuenta de .catalog-grid. Mobile es 1 columna a
     todo el contenedor; desde 640px, repeat(auto-fill, minmax(12rem, 1fr))
     con gap 1.25rem → n columnas si n·12rem + (n−1)·1.25rem entran; desde
     980px la grilla es el contenedor menos el sidebar (15.5rem) y el gap
     del layout (1.75rem). Los umbrales de @container son esas cuentas
     resueltas (n·13.25rem − 1.25rem, + 17.25rem desde 980px). Si cambian
     el minmax, el sidebar o los gaps de catalog.css, hay que rehacerlos.
   · Alto: 2px de borde + la foto 16/10 del catálogo sobre el ancho interno
     + el alto del cuerpo de la tarjeta estándar (--card-body, 291px hasta
     980px y 299.75px desde ahí, donde .catalog-item-body tiene más padding
     y gap). El cuerpo de .plant-card es más corto, así que la foto se estira
     y ocupa todo lo que sobra.
   -------------------------------------------------------------------------- */
.plant-carousel-track > .plant-card {
  --card-w: 100cqw;
  --card-body: 291px;
  flex: 0 0 var(--card-w);
  height: calc((var(--card-w) - 2px) * 10 / 16 + 2px + var(--card-body));
  display: flex;
  flex-direction: column;
}
.plant-carousel-track > .plant-card .plant-media {
  /* Alto explícito (no solo flex-grow): el resto de la tarjeta es
     var(--card-body), así que la altura de la foto es el total menos eso. */
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  height: calc((var(--card-w) - 2px) * 10 / 16 + 2px);
}
.plant-carousel-track > .plant-card .plant-media img {
  /* Estira por grid (stretch por defecto), no por % de altura: el <img>
     ocupa toda la celda sin depender de resolver un porcentaje contra una
     altura que sale de flex-grow, que es lo que dejaba la foto chica con
     el fondo de la tarjeta visible debajo. */
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

@media (min-width: 640px) {
  @container (min-width: 25.25rem) { .plant-carousel-track > .plant-card { --card-w: calc((100cqw - 1.25rem) / 2); } }
  @container (min-width: 38.5rem)  { .plant-carousel-track > .plant-card { --card-w: calc((100cqw - 2 * 1.25rem) / 3); } }
  @container (min-width: 51.75rem) { .plant-carousel-track > .plant-card { --card-w: calc((100cqw - 3 * 1.25rem) / 4); } }
}

@media (min-width: 980px) {
  .plant-carousel-track > .plant-card { --card-body: 299.75px; --card-w: calc(100cqw - 17.25rem); }
  @container (min-width: 42.5rem)  { .plant-carousel-track > .plant-card { --card-w: calc((100cqw - 17.25rem - 1.25rem) / 2); } }
  @container (min-width: 55.75rem) { .plant-carousel-track > .plant-card { --card-w: calc((100cqw - 17.25rem - 2 * 1.25rem) / 3); } }
  @container (min-width: 69rem)    { .plant-carousel-track > .plant-card { --card-w: calc((100cqw - 17.25rem - 3 * 1.25rem) / 4); } }
  @container (min-width: 82.25rem) { .plant-carousel-track > .plant-card { --card-w: calc((100cqw - 17.25rem - 4 * 1.25rem) / 5); } }
}

/* Textos, paddings y pie compactos como los de .catalog-item. Todo acotado a
   la pista: .plant-card sigue intacta fuera del carrusel. */
/* z-index: la foto va absolute y después en el markup, sin esto tapa los badges */
.plant-carousel-track > .plant-card .plant-media .badge { top: 0.6rem; font-size: 0.62rem; z-index: 1; }
.plant-carousel-track > .plant-card .badge-promo { left: 0.6rem; }
.plant-carousel-track > .plant-card .badge-rank { right: 0.6rem; }
.plant-carousel-track .plant-body { padding: 0.8rem; }
.plant-carousel-track .plant-badges { margin-bottom: 0.4rem; }
.plant-carousel-track .plant-badges .badge { font-size: 0.6rem; }
.plant-carousel-track .plant-title { font-size: 0.98rem; line-height: 1.25; margin-bottom: 0.1rem; }
.plant-carousel-track .plant-sci { font-size: 0.76rem; margin-bottom: 0.4rem; }
.plant-carousel-track .plant-care {
  font-size: 0.78rem;
  line-height: 1.45;
  margin-bottom: 0.6rem;
  /* Mismo tope de 2 líneas que .catalog-item-desc. El separador punteado
     pasa al pie: con padding abajo, el recorte deja asomar la 3ª línea. */
  padding-bottom: 0;
  border-bottom: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.plant-carousel-track .plant-footer { padding-top: 0.6rem; border-top: 1px dashed var(--border-color); }
.plant-carousel-track .plant-price { font-size: 1rem; }
.plant-carousel-track .icon-btn { width: 2rem; height: 2rem; }
.plant-carousel-track .icon-btn svg { width: 0.95rem; height: 0.95rem; }

/* Puesto de venta ("Nº 1 en ventas"): mismo lugar que .badge-promo pero a
   la derecha, así conviven cuando el producto además tiene descuento. */
.badge-rank {
  position: absolute; top: 0.9rem; right: 0.9rem;
  background-color: var(--color-primary); color: var(--color-text-light);
}

/* Flechas: ocultas en mobile (se desliza con el dedo), visibles desde tablet */
.plant-carousel-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background-color: var(--color-bg-card);
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
  z-index: 2;
}
.plant-carousel-btn svg { width: 1.2rem; height: 1.2rem; }
.plant-carousel-btn:hover { background-color: var(--color-primary); color: var(--color-text-light); }
.plant-carousel-btn:disabled { opacity: 0.35; cursor: default; }
.plant-carousel-btn:disabled:hover { background-color: var(--color-bg-card); color: var(--color-primary); }
.plant-carousel-btn--prev { left: -1.25rem; }
.plant-carousel-btn--next { right: -1.25rem; }

.plant-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.plant-carousel-dot {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: var(--border-color);
  cursor: pointer;
  transition: background-color 0.18s ease, width 0.18s ease;
}
.plant-carousel-dot.is-active { width: 1.5rem; background-color: var(--color-primary); }

.plant-carousel-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-text-soft);
}
.plant-carousel-empty a { color: var(--color-accent); font-weight: 600; }
.plant-carousel-empty a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .plant-carousel-track { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Desde tablet: flechas. Con pocos productos las tarjetas quedan centradas:
   los margin auto de la primera y la última se anulan solos cuando la pista
   desborda, sin recortar el inicio como haría justify-content: center.
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .plant-carousel-track > .plant-card:first-child { margin-left: auto; }
  .plant-carousel-track > .plant-card:last-child { margin-right: auto; }
  .plant-carousel-btn { display: inline-flex; }
}

@media (min-width: 980px) {
  .plant-carousel-btn--prev { left: -1.5rem; }
  .plant-carousel-btn--next { right: -1.5rem; }
}