/**
 * La Dalia — listado de producto "compra rápida" (handoff listados, opción 1b).
 * Incluye la tarjeta completa (foto, marca, nombre, precio), la parrilla, el panel de
 * tallas y los círculos de color. Se carga después de custom.css del tema para poder
 * pisar las reglas de tarjeta de classic.
 */

:root{
  --ld-grey-1:#9A9A9E;
  --ld-grey-2:#84848B;
  --ld-grey-3:#A4A4A9;
  --ld-line-2:#E2E2E6;
  --ld-line-soft:#F0F0F2;
  --ld-media-bg:#F7F7F8;
  --ld-panel-bg:rgba(255,255,255,.96);
  --ld-media-h:400px;
  --ld-t-color:.2s ease;
  --ld-t-panel:.35s cubic-bezier(.2,.7,.2,1);
  --ld-t-zoom:.6s cubic-bezier(.2,.7,.2,1);
}

/* ==========================================================================
   1. Parrilla
   ========================================================================== */
.ld-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
/* classic fija #products .products{display:flex} */
#products .products.ld-grid,.featured-products .products.ld-grid{display:grid}
.ld-grid--listing{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:10px}
.ld-grid[hidden]{display:none}

/* Botón "Ver todo" de las secciones de la home */
.ld-cta-row .ld-btn{background:transparent;border:1px solid var(--ld-ink);color:var(--ld-ink);
  padding:15px 40px;font-size:12.5px;letter-spacing:.22em;font-weight:600;
  transition:background var(--ld-t-color),color var(--ld-t-color)}
.ld-cta-row .ld-btn:hover,.ld-cta-row .ld-btn:focus{background:var(--ld-ink);color:#fff}

/* ==========================================================================
   2. Tarjeta
   ========================================================================== */
.ld-card{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:0;min-width:0;height:100%;text-align:left}
.ld-card .ld-card__media{position:relative;height:var(--ld-media-h);margin:0;overflow:hidden;background:var(--ld-media-bg)}
.ld-products--grey .ld-card .ld-card__media{background:var(--ld-media-bg)}
.ld-card .ld-card__media .ld-card__image{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:auto;height:auto}
.ld-card .ld-card__media .ld-card__image img{position:absolute;top:0;left:0;display:block;width:100%;height:100%;max-width:none;
  object-fit:cover;transition:transform var(--ld-t-zoom)}
.ld-card:hover .ld-card__media .ld-card__image img,
.ld-card:focus-within .ld-card__media .ld-card__image img{transform:scale(1.04)}
.ld-card.is-out:hover .ld-card__media .ld-card__image img{transform:none}

/* Etiqueta sobre la foto (solo "Agotado"): texto subrayado, sin caja de color */
.ld-card__flag{position:absolute;top:14px;left:14px;z-index:2;padding:0 0 3px;background:none;border-bottom:1px solid var(--ld-ink);
  color:var(--ld-ink);font-size:11px;line-height:1;letter-spacing:.1em;font-weight:600;pointer-events:none}
.ld-card__flag--out{color:var(--ld-grey-1);border-color:var(--ld-grey-1)}
/* Descuento junto al precio rebajado (chip rosa de la paleta, texto en tinta) */
.ld-card .ld-card__discount{align-self:center;padding:3px 6px;background:#F2CFD4;color:var(--ld-ink);
  font-size:10.5px;line-height:1;letter-spacing:.08em;font-weight:600;white-space:nowrap}

.ld-card__brand{margin-top:16px;font-size:10.5px;line-height:1;letter-spacing:.26em;text-transform:uppercase;color:var(--ld-grey-1)}
a.ld-card__brand:hover{color:var(--ld-red)}
.ld-card .ld-card__name{display:block;margin:8px 0 0;min-height:40px;overflow:visible;font-size:14px;line-height:1.45;font-weight:400;
  letter-spacing:0;text-transform:none;text-align:left;color:var(--ld-ink);text-wrap:pretty}
.ld-card .ld-card__name a{color:var(--ld-ink)}
.ld-card .ld-card__name a:hover{color:var(--ld-red)}
.ld-card__bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.ld-card .ld-card__prices{display:flex;align-items:baseline;gap:10px;margin:0;font-size:14.5px;line-height:1;white-space:nowrap}
.ld-card .ld-card__old{color:var(--ld-grey-3)}
.ld-card .ld-card__price{font-weight:600;color:var(--ld-red)}
.ld-card .ld-card__price.is-regular{color:var(--ld-ink)}
/* El diseño no incluye lista de deseos en la tarjeta (blockwishlist la inyecta por JS) */
.ld-card .wishlist-button-add{display:none}
/* Listados de classic (categorías, búsqueda) */
#products .ld-card,.featured-products .ld-card,.product-accessories .ld-card{margin-bottom:24px}

/* ==========================================================================
   3. Círculos de color
   ========================================================================== */
/* Acotado a la tarjeta: la ficha usa las mismas clases con otras medidas (ficha.css) */
.ld-card .ld-colors{display:flex;flex-wrap:wrap;gap:9px;padding-right:2px}
.ld-card .ld-swatch{width:16px;height:16px;padding:0;border:0;border-radius:50%;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);transition:box-shadow var(--ld-t-color)}
.ld-card .ld-swatch.is-active{box-shadow:inset 0 0 0 1px rgba(0,0,0,.10),0 0 0 2px #fff,0 0 0 3px var(--ld-red)}

/* ==========================================================================
   4. Panel de compra rápida
   ========================================================================== */
/* En escritorio aparece sobre el pie de la foto; el panel es hermano de la foto para que en
   táctil pueda ir debajo sin que la foto lo recorte */
.ld-quick{position:absolute;left:0;right:0;bottom:calc(100% - var(--ld-media-h));z-index:3;margin:0;padding:16px 16px 18px;
  background:var(--ld-panel-bg);transform:translateY(14px);opacity:0;pointer-events:none;
  transition:transform var(--ld-t-panel),opacity .25s ease}
.ld-card:hover .ld-quick,.ld-card:focus-within .ld-quick{transform:translateY(0);opacity:1;pointer-events:auto}
.ld-quick__label{margin:0;font-size:10px;line-height:1;letter-spacing:.24em;text-transform:uppercase;color:var(--ld-grey-2);text-align:center}
/* Acotado al panel: la ficha usa las mismas clases con otras medidas (ficha.css) */
.ld-quick .ld-sizes{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:12px 0 14px}
.ld-quick .ld-size{min-width:36px;height:32px;padding:0 8px;border:1px solid var(--ld-line-2);border-radius:0;background:transparent;
  color:var(--ld-ink);font-family:var(--ld-font-sans);font-size:12px;line-height:1;letter-spacing:.08em;cursor:pointer;
  transition:border-color var(--ld-t-color),background var(--ld-t-color),color var(--ld-t-color)}
.ld-quick .ld-size:hover{border-color:var(--ld-ink)}
.ld-quick .ld-size.is-active{background:var(--ld-ink);border-color:transparent;color:#fff}
.ld-quick .ld-size.is-out,.ld-quick .ld-size:disabled{color:#C6C6CB;border-color:var(--ld-line-soft);text-decoration:line-through;cursor:not-allowed}
.ld-add{display:block;width:100%;height:42px;padding:0;border:0;border-radius:0;background:var(--ld-red);color:#fff;
  font-family:var(--ld-font-sans);font-size:11.5px;line-height:1;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  cursor:pointer;transition:background var(--ld-t-color)}
.ld-add:hover,.ld-add:focus{background:var(--ld-cta-hover);color:#fff}
.ld-add.is-loading{opacity:.6;cursor:progress}
.ld-add:disabled{opacity:.4;cursor:not-allowed}
.ld-add.is-added{background:var(--ld-ink)}

/* ==========================================================================
   5. Foco
   ========================================================================== */
.ld-quick .ld-size:focus-visible,.ld-card .ld-swatch:focus-visible,.ld-add:focus-visible,.ld-card a:focus-visible{
  outline:2px solid var(--ld-red);outline-offset:2px}

/* ==========================================================================
   6. Sin puntero (táctil): el panel siempre visible
   ========================================================================== */
@media (hover:none){
  /* Táctil: el panel siempre visible, debajo de la foto, sin taparla */
  .ld-quick{position:static;padding:14px 0 0;background:none;transform:none;opacity:1;pointer-events:auto}
  .ld-card .ld-card__media .ld-card__image img{transform:none!important}
}

/* ==========================================================================
   7. Responsive
   ========================================================================== */
@media (max-width:1199px){
  .ld-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ld-grid--listing{grid-template-columns:repeat(2,minmax(0,1fr))}
  :root{--ld-media-h:360px}
}
@media (max-width:991px){
  .ld-grid,.ld-grid--listing{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  :root{--ld-media-h:340px}
}
@media (max-width:575px){
  .ld-grid,.ld-grid--listing{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  :root{--ld-media-h:230px}
  .ld-card .ld-card__name{font-size:13px;min-height:36px}
  .ld-card__bottom{flex-direction:column;align-items:flex-start;gap:8px}
  .ld-quick .ld-sizes{gap:5px}
  .ld-quick .ld-size{min-width:34px;height:36px}
  .ld-add{height:44px}
}

/* ==========================================================================
   8. Accesibilidad de movimiento
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .ld-card .ld-card__media .ld-card__image img,.ld-quick,.ld-size,.ld-add,.ld-cta-row .ld-btn{transition:none}
  .ld-card:hover .ld-card__media .ld-card__image img,
  .ld-card:focus-within .ld-card__media .ld-card__image img{transform:none}
}