/* Estilo de las tarjetas de producto "boton" (L · Como antes, con rayitas), elegido en el panel.
   GENERADO por dev-tests/gen_estilos_tarjeta.py desde dev-tests/muestrario_estilos/estilo-l.css:
   no editar acá (se edita el del muestrario y se vuelve a generar). */

/* Estilo L (solo CSS, misma tarjeta de card.php): las medidas de la tarjeta original (la del puerto 8092, medidas
   en el navegador) sobre la tarjeta de hoy, más las rayitas de la C. La categoría, los textos de abajo del precio,
   las cuotas en amarillo y las franjas de las etiquetas ya son las de siempre. */

/* ---------- Medidas ---------- */
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) {
  --l-inset: 12px;       /* separación de las rayitas con el borde de la foto */
  --l-season-h: 37.5px;  /* alto de la franja "Nueva temporada" (el de siempre) */
  --l-flash-h: 32px;     /* alto de la franja "Oferta relámpago" (el de siempre) */
  --l-ribbon: 0px;       /* lo que ocupan las franjas abajo de la foto, si hay */
}
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card):has(.media > .ribbon.season) {
  --l-ribbon: var(--l-season-h);
}
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card):has(.media > .ribbon.flash) {
  --l-ribbon: var(--l-flash-h);
}
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card):has(.media > .ribbon.season):has(.media > .ribbon.flash) {
  --l-ribbon: calc(var(--l-season-h) + var(--l-flash-h));
}

/* ---------- Franjas abajo de la foto (como antes), con alto fijo para que las rayitas sepan dónde ponerse ---------- */
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .media > .ribbon.season {
  box-sizing: border-box;
  height: var(--l-season-h);
  /* El naranja del panel, un poco más oscuro para que la letra blanca se lea bien (como en la M y la C). */
  box-shadow: inset 0 0 0 60px rgba(0, 0, 0, .2);
}
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .media > .ribbon.flash {
  box-sizing: border-box;
  height: var(--l-flash-h);
}
/* Con las dos, "Nueva temporada" va arriba de "Oferta relámpago" (antes la relámpago la tapaba). */
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .media:has(> .ribbon.flash) > .ribbon.season {
  bottom: var(--l-flash-h);
}
/* El 3x2 / 2x1 deja pasar el toque a la foto (abrir el producto o pasar la foto con el dedo). */
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) > .tag-3x2 {
  pointer-events: none;
}

/* ---------- Textos como antes ---------- */
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .body {
  gap: 6px;
  min-height: 110px;
  padding: 10px 12px 12px;
}
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .title {
  min-height: calc(1.25em * 2);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
}
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .price {
  min-height: 22px;
  margin-top: 4px;
}
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .price .now {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.5;
}

/* ---------- Botón negro COMPRAR abajo de todo (como antes) ---------- */
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .card-buy-stack {
  position: relative;
  margin-top: auto;
}
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .card-buy-stack .btn-buy,
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card):has(.media > .ribbon) .card-buy-stack .btn-buy {
  position: relative;
  top: auto;
  right: auto;
  z-index: 2;
  display: block;
  width: 100%;
  height: 42px;
  min-height: 0;
  margin: 0;
  padding: 1px 6px;
  overflow: hidden;
  border: 0;
  border-radius: 9px;
  background: #111;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .6px;
  text-transform: uppercase;
  box-shadow: 0 -2px 0 rgba(0, 0, 0, .08);
  transition: filter .18s ease;
}
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .card-buy-stack .btn-buy::before {
  content: none;
}
@media (hover: hover) {
  html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .card-buy-stack .btn-buy:hover {
    background: #111;
    filter: brightness(1.06);
  }
}
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .card-buy-stack .btn-buy:active {
  transform: none;
}
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .card-buy-stack .btn-buy:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

/* ---------- Rayitas de la C: finas, sin cápsula, abajo a la izquierda (arriba de la franja si hay) ---------- */
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .dots {
  left: var(--l-inset);
  right: auto;
  bottom: calc(var(--l-inset) + var(--l-ribbon) - 6px);
  gap: 4px;
  width: auto;
  max-width: calc(100% - 2 * var(--l-inset));
  min-height: 0;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
}
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .dots.is-pressing,
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .dots.is-edge-left,
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .dots.is-edge-right {
  transform: none;
  box-shadow: none;
}
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .dot {
  flex: 0 1 14px;
  width: 14px;
  min-width: 6px;
  height: 2px;
  border-radius: 0;
  background: var(--al-ink, #2b2b2f);
  opacity: .28;
}
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .dot.active {
  width: 14px;
  opacity: .85;
}

/* ---------- Celular ---------- */
@media (max-width: 600px) {
  html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) {
    --l-inset: 10px;
  }
  html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .card-buy-stack .btn-buy,
  html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card):has(.media > .ribbon) .card-buy-stack .btn-buy {
    font-size: 11px;
  }
  /* Franja de la oferta relámpago en una línea: en las tarjetas del celular (163-180 px) el reloj se cortaba
     (hoy pasa lo mismo en la tienda). Sin el rayito, con menos relleno y la letra apenas más chica. */
  html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .media > .ribbon.flash {
    padding-right: 6px;
    padding-left: 6px;
    font-size: 9.5px;
    line-height: 16px;
    letter-spacing: 0;
  }
  html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .flashline {
    gap: 5px;
  }
  html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .flash-bolt {
    display: none;
  }
  html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .flash-timer {
    font-size: 9.5px;
  }
}

/* ---------- Celulares muy angostos (320 px: tarjetas de 141 px) ---------- */
@media (max-width: 340px) {
  html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) {
    --l-inset: 8px;
    --l-season-h: 30px;
    --l-flash-h: 38px;
  }
  /* "Nueva temporada" en una línea */
  html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .media > .ribbon.season {
    padding: 0 6px;
    font-size: 10px;
    letter-spacing: 0;
  }
  /* "Oferta relámpago" en dos líneas: el texto y abajo el reloj */
  html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .media > .ribbon.flash {
    padding-top: 0;
    padding-bottom: 0;
  }
  html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .flashline {
    flex-direction: column;
    gap: 2px;
    line-height: 12px;
  }
}

/* ---------- Tarjetas muy angostas (sugerencias del carrito en la tablet y el celular, 154 px): la franja de la
   oferta relámpago en dos renglones, como en los celulares de 320 px (en un renglón el reloj se cortaba). ---------- */
html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) {
  container: l-card / inline-size;
}
@container l-card (max-width: 159.98px) {
  html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) > * {
    --l-inset: 8px;
    --l-flash-h: 38px;
  }
  html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card):has(.media > .ribbon.flash) > * {
    --l-ribbon: var(--l-flash-h);
  }
  html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card):has(.media > .ribbon.season):has(.media > .ribbon.flash) > * {
    --l-ribbon: calc(var(--l-season-h) + var(--l-flash-h));
  }
  html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .media > .ribbon.flash {
    padding: 0 6px;
    font-size: 9.5px;
    line-height: 16px;
    letter-spacing: 0;
  }
  html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .flashline {
    flex-direction: column;
    gap: 2px;
    line-height: 12px;
  }
  html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .flash-bolt {
    display: none;
  }
  html[data-al-tarjeta="boton"] body .cardx:not(.wholesale-fast-card) .flash-timer {
    font-size: 9.5px;
  }
}