/* La Dalia — página de categoría / listado (handoff design_handoff_categoria).
   Traducción del css/categoria.css del paquete a los selectores reales del tema:
   la tarjeta y la compra rápida ya existen (listado.css del módulo ladalia_quickadd,
   prioridad 1100), así que aquí solo se pisan sus reglas dentro de .ld-grid--listing.
   Tokens compartidos (--ld-red, --ld-ink, --ld-font-sans…) en custom.css.
   Se carga con prioridad 1200: después de theme.css, custom.css y listado.css. */

/* ==========================================================================
   0. Contenedor de classic neutralizado en las páginas de listado
   ========================================================================== */
body:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier){background:#fff}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) #wrapper{padding-top:0;background:#fff}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) #wrapper > .container{max-width:none;width:auto;margin:0;padding:0}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) #wrapper > .container > .row{margin:0;display:block}
:is(#category, #search, #best-sales, #new-products, #prices-drop, #manufacturer, #supplier) #content-wrapper{
  width:100%;max-width:100%;flex:0 0 100%;margin:0;padding:0;float:none}

/* ==========================================================================
   1. Contenedor + migas
   ========================================================================== */
.ld-page{max-width:1560px;margin:0 auto;padding:0 48px 90px}
.ld-breadcrumb{padding:22px 0 0}
.ld-breadcrumb ol{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0;padding:0;list-style:none;
  font:400 11.5px/1 var(--ld-font-sans);letter-spacing:.12em;text-transform:uppercase;color:#9A9A9E}
.ld-breadcrumb li{margin:0;display:flex;align-items:center;gap:9px}
.ld-breadcrumb li + li::before{content:"/";color:#9A9A9E}
#wrapper .ld-breadcrumb a{color:#9A9A9E;text-decoration:none;transition:color .18s ease}
#wrapper .ld-breadcrumb a:hover{color:var(--ld-red)}
.ld-breadcrumb [aria-current]{color:var(--ld-ink)}

/* ==========================================================================
   2. Cabecera de categoría
   ========================================================================== */
/* La columna de subcategorías puede crecer hasta ~media página: con nombres largos
   ("Camiseta Hombre Cuello Redondo") a 420px solo cabía una píldora por fila y se
   apilaban en vertical empujando la cabecera. Con píldoras cortas no cambia nada
   (van alineadas a la derecha). */
.ld-cathead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,48%);gap:48px;
  align-items:end;padding:30px 0 28px;border-bottom:1px solid #EDEDEF}
.ld-cathead h1{margin:0;font:400 44px/1.05 var(--ld-font-sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ld-ink)}
.ld-cathead__desc{margin:16px 0 0;max-width:620px}
.ld-cathead__desc,.ld-cathead__desc p{font:300 15px/1.65 var(--ld-font-sans);color:#6E6E76;text-wrap:pretty}
.ld-cathead__desc p{margin:0}
.ld-cathead__desc p + p{margin-top:10px}
.ld-subcats{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
#wrapper .ld-subcats a{border:1px solid #E4E4E8;padding:9px 15px;font:400 12.5px/1 var(--ld-font-sans);
  letter-spacing:.06em;color:#3C3C43;text-decoration:none;white-space:nowrap;
  transition:border-color .18s ease,color .18s ease}
#wrapper .ld-subcats a:hover{border-color:var(--ld-red);color:var(--ld-red)}

/* ==========================================================================
   3. Cuerpo: facetas + resultados
   ========================================================================== */
.ld-body{display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start;padding-top:36px}
.ld-facets{flex:1 1 244px;min-width:0;max-width:300px}
.ld-results{flex:1 1 620px;min-width:0}

/* El <details> se pliega solo en móvil (§9); en escritorio el JS lo mantiene abierto */
.ld-facets__summary{display:none;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 0;border-top:1px solid var(--ld-ink);border-bottom:1px solid var(--ld-ink);
  font:500 12px/1 var(--ld-font-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ld-ink);
  cursor:pointer;list-style:none}
.ld-facets__summary::-webkit-details-marker{display:none}
.ld-facets__summary .ld-icon{width:16px;height:16px;transition:transform .2s ease}
.ld-facets[open] .ld-facets__summary .ld-icon{transform:rotate(180deg)}

.ld-facets__inner{display:flex;flex-direction:column;gap:30px}
/* El id lo repone cada AJAX del módulo de facetas: sus hijos participan del flex */
#search_filters{display:contents}

.ld-facets__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--ld-ink);
  font:500 12px/1 var(--ld-font-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ld-ink)}
.ld-facets__clear{border:0;background:none;padding:0;cursor:pointer;text-transform:none;
  font:400 12px/1 var(--ld-font-sans);letter-spacing:.04em;color:#9A9A9E;transition:color .18s ease}
.ld-facets__clear:hover{color:var(--ld-red)}

/* Cada faceta es un <details>: el título es su <summary>. En escritorio siempre abierta y
   sin plegar (pointer-events:none); en móvil, plegable (ver @media ≤900) */
.ld-facet{min-width:0;display:block}
.ld-facet + .ld-facet{padding-top:26px;border-top:1px solid #EDEDEF}
.ld-facet__title{display:flex;align-items:center;gap:10px;margin:0;font:500 11px/1 var(--ld-font-sans);letter-spacing:.22em;
  text-transform:uppercase;color:#84848B;list-style:none;pointer-events:none}
.ld-facet__title::-webkit-details-marker{display:none}
.ld-facet__title .ld-icon{display:none;width:14px;height:14px;margin-left:auto;flex:none;color:var(--ld-ink);transition:transform .2s ease}
.ld-facet__sel{display:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:400 12px/1.2 var(--ld-font-sans);letter-spacing:.02em;text-transform:none;color:var(--ld-ink)}
.ld-facet__body{display:flex;flex-direction:column;gap:13px;margin-top:13px}
/* Botón "Ver N productos" del panel móvil y contador de filtros activos en "Filtrar" */
.ld-facets__apply{display:none}
.ld-facets__badge:empty{display:none}
.ld-facets__badge{display:inline-block;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:9px;
  background:var(--ld-red);color:#fff;font:600 10.5px/18px var(--ld-font-sans);letter-spacing:0;text-align:center;vertical-align:middle}
.ld-facet__row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font:400 14px/1.3 var(--ld-font-sans)}
#wrapper .ld-facet__row a{color:#3C3C43;text-decoration:none;transition:color .18s ease}
#wrapper .ld-facet__row a:hover{color:var(--ld-red)}
#wrapper .ld-facet__row a.is-active{color:var(--ld-red);font-weight:500}
.ld-facet__count{font-size:12px;color:#B0B0B6}

/* Talla: botones. Con el prefijo #search_filters para ganar a las reglas de
   label de classic (display:block, text-align:right). */
#search_filters .ld-sizes{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;margin:0}
#search_filters .ld-size-btn{position:relative;min-width:44px;height:38px;padding:0 10px;margin:0;
  border:1px solid #E4E4E8;background:#fff;color:#3C3C43;display:inline-flex;align-items:center;
  justify-content:center;text-align:center;font:500 12.5px/1 var(--ld-font-sans);letter-spacing:.06em;
  cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}
#search_filters .ld-size-btn:hover{border-color:var(--ld-ink)}
#search_filters .ld-size-btn.is-active{background:var(--ld-ink);border-color:var(--ld-ink);color:#fff}
#search_filters .ld-size-btn input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
#search_filters .ld-size-btn a{color:inherit;text-decoration:none}
#search_filters .ld-size-btn:focus-within{outline:2px solid var(--ld-red);outline-offset:2px}

/* Color (punto + nombre) y casillas (marca, características…) */
#search_filters .ld-option{position:relative;display:flex;align-items:center;gap:11px;margin:0;padding:0;
  cursor:pointer;width:100%;text-align:left;font:400 14px/1.3 var(--ld-font-sans);color:#3C3C43}
#search_filters .ld-option input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
#search_filters .ld-option a{color:inherit;text-decoration:none;transition:color .18s ease}
#search_filters .ld-option:hover a{color:var(--ld-red)}
#search_filters .ld-option.is-active,#search_filters .ld-option.is-active a{color:var(--ld-red)}
#search_filters .ld-option .ld-facet__count{margin-left:auto}
#search_filters .ld-option:focus-within{outline:2px solid var(--ld-red);outline-offset:2px}
.ld-dot{width:17px;height:17px;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);
  transition:box-shadow .18s ease}
.ld-option.is-active .ld-dot{box-shadow:inset 0 0 0 1px rgba(0,0,0,.10),0 0 0 2px #fff,0 0 0 3px var(--ld-red)}
.ld-check{width:16px;height:16px;flex:0 0 auto;border:1px solid #D4D4DA;background:#fff;
  display:grid;place-items:center;color:#fff;transition:background .18s ease,border-color .18s ease}
.ld-check::after{content:"✓";font:600 10px/1 var(--ld-font-sans);opacity:0}
.ld-option.is-active .ld-check{border-color:var(--ld-red);background:var(--ld-red)}
.ld-option.is-active .ld-check::after{opacity:1}

/* Precio: slider del módulo (jQuery UI) con el estilo del diseño */
#search_filters .faceted-slider{list-style:none;margin:0;padding:0}
#search_filters .faceted-slider li{display:flex;flex-direction:column-reverse;gap:16px;margin:0;padding:0}
#search_filters .faceted-slider p{margin:0;font:400 12.5px/1 var(--ld-font-sans);color:#6E6E76}
#search_filters .ui-slider{position:relative;height:3px;margin:6px 7px 0;border:0;border-radius:0;background:#EDEDEF}
#search_filters .ui-slider .ui-slider-range{position:absolute;top:0;height:100%;border:0;border-radius:0;background:var(--ld-red)}
#search_filters .ui-slider .ui-slider-handle{position:absolute;top:50%;width:14px;height:14px;margin-left:-7px;
  transform:translateY(-50%);border:0;border-radius:50%;background:#fff;
  box-shadow:0 0 0 1.5px var(--ld-red);cursor:pointer}

/* Bloque de ayuda de tallas (paleta roja: fondo rosa muy claro #FAF5F5) */
.ld-help{min-width:0;padding:22px;background:#FAF5F5;display:flex;flex-direction:column;gap:8px}
.ld-help__title{margin:0;font:500 11px/1 var(--ld-font-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ld-red)}
.ld-help p{margin:0;font:300 13.5px/1.6 var(--ld-font-sans);color:#5C5C64}
#wrapper .ld-help a{font:500 12.5px/1 var(--ld-font-sans);letter-spacing:.06em;color:var(--ld-red);
  border-bottom:1px solid var(--ld-red);align-self:flex-start;padding-bottom:3px;text-decoration:none}

/* ==========================================================================
   4. Barra de orden + chips de filtro activo
   ========================================================================== */
#js-product-list-top.ld-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin:0;padding-bottom:20px;border-bottom:1px solid #EDEDEF}
.ld-toolbar__count{margin:0;font:400 14px/1 var(--ld-font-sans);color:#6E6E76}
.ld-sort{display:flex;align-items:center;gap:14px}
.ld-sort__label{margin:0;font:400 13px/1 var(--ld-font-sans);color:#84848B}
.ld-sort__field{position:relative}
.ld-sort select{appearance:none;-webkit-appearance:none;border:1px solid #E4E4E8;border-radius:0;background:#fff;
  padding:11px 42px 11px 15px;font:400 13.5px/1 var(--ld-font-sans);color:var(--ld-ink);cursor:pointer;min-width:200px}
.ld-sort .ld-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:14px;height:14px;
  pointer-events:none;color:var(--ld-ink)}

/* Scoped al id del listado: la cesta lateral usa también .ld-chips/.ld-chip */
#js-active-search-filters.ld-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:18px 0 0}
#js-active-search-filters.ld-chips--empty{display:none}
#js-active-search-filters .ld-chip{display:inline-flex;align-items:center;gap:9px;border:1px solid #F2CFD4;
  background:#FAF5F5;color:var(--ld-red);padding:8px 13px;font:400 12.5px/1 var(--ld-font-sans);
  letter-spacing:.04em;cursor:pointer;text-decoration:none;transition:border-color .18s ease}
#js-active-search-filters .ld-chip:hover{border-color:var(--ld-red);color:var(--ld-red)}
#js-active-search-filters .ld-chip__x{font-size:13px;line-height:1}

/* ==========================================================================
   5. Rejilla y tarjeta (pisan las reglas de listado.css dentro del listado)
   ========================================================================== */
#products .products.ld-grid--listing,.ld-results .products.ld-grid--listing{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr));column-gap:36px;row-gap:62px;
  margin:0;padding:34px 0 0}
.ld-grid--listing > .js-product{min-width:0}
#products .ld-grid--listing .ld-card{margin-bottom:0}

/* Marco con la foto entera (correcciones 1 y 2 del cliente: nada recortado).
   El handoff pedía 3/4, pero los image_types reales de la tienda son cuadrados
   (452×452 / 800×800 con lienzo blanco): en un marco 3/4 la foto quedaba pequeña
   con bandas blancas. Marco 1/1 como en la ficha: la imagen llena el cuadro. */
.ld-grid--listing .ld-card .ld-card__frame{position:relative;overflow:hidden}
.ld-grid--listing .ld-card .ld-card__media{height:auto;aspect-ratio:1/1;background:#fff;border:0}
.ld-grid--listing .ld-card .ld-card__media .ld-card__image img{object-fit:contain;padding:8px;background:#fff;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ld-grid--listing .ld-card .ld-card__media .ld-card__image img.is-wide{padding:0}
.ld-grid--listing .ld-card:hover .ld-card__media .ld-card__image img,
.ld-grid--listing .ld-card:focus-within .ld-card__media .ld-card__image img{transform:scale(1.03)}
.ld-grid--listing .ld-card.is-out:hover .ld-card__media .ld-card__image img{transform:none}

/* Compra rápida anclada al borde inferior del marco (el panel es hermano de la foto) */
.ld-grid--listing .ld-quick{top:auto;bottom:0;padding:15px 16px 17px;background:rgba(255,255,255,.97);
  border-top:1px solid #ECECEF;transform:translateY(101%)}
.ld-grid--listing .ld-card:hover .ld-quick,
.ld-grid--listing .ld-card:focus-within .ld-quick{transform:translateY(0)}

/* Favorito en tarjeta: retirado a petición del cliente (2026-10-15). El corazón de
   blockwishlist queda oculto por la regla base de listado.css (.ld-card .wishlist-button-add
   {display:none}); los favoritos siguen disponibles en la ficha de producto. */

/* Pie de tarjeta: no se solapan precio y muestras en columnas estrechas.
   Nombre más destacado (16px/500, petición del cliente); sin line-clamp:
   los nombres largos saltan de línea, nunca se truncan. */
.ld-grid--listing .ld-card .ld-card__name{margin-top:9px;min-height:46px;font-size:16px;font-weight:500;line-height:1.4}
.ld-grid--listing .ld-card .ld-card__name a{color:var(--ld-ink)}
.ld-grid--listing .ld-card__bottom{flex-wrap:wrap;gap:10px 16px;min-width:0;margin-top:12px}
.ld-grid--listing .ld-card .ld-card__prices{flex-wrap:wrap;min-width:0;white-space:normal;font-size:15px}

/* ==========================================================================
   6. Paginación "Cargar más"
   ========================================================================== */
.ld-more{display:flex;flex-direction:column;align-items:center;gap:22px;padding-top:66px}
.ld-more__count{margin:0;font:400 13px/1 var(--ld-font-sans);letter-spacing:.06em;color:#84848B}
.ld-more__bar{width:190px;height:2px;background:#EDEDEF}
.ld-more__bar span{display:block;height:100%;background:var(--ld-red)}
#wrapper .ld-more__btn{display:inline-block;border:1px solid var(--ld-ink);background:none;color:var(--ld-ink);
  padding:16px 46px;font:600 12.5px/1 var(--ld-font-sans);letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;text-decoration:none;transition:background .2s ease,color .2s ease}
#wrapper .ld-more__btn:hover,#wrapper .ld-more__btn:focus{background:var(--ld-ink);color:#fff}
.ld-more__btn.is-loading{opacity:.5;cursor:progress}
/* Paginación real por URL, solo para rastreo y lectores de pantalla */
.ld-more__pages{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;list-style:none}

/* Descripción adicional de la categoría (category-footer de classic) */
#js-product-list-footer .card{border:0;border-radius:0;box-shadow:none;margin:48px 0 0;background:none}
#js-product-list-footer .card-block{padding:0;font:300 14px/1.7 var(--ld-font-sans);color:#555}

/* ==========================================================================
   7. Barra de confianza del listado
   ========================================================================== */
.ld-trustbar{border-top:1px solid #EDEDEF;background:#FAFAFB}
.ld-trustbar__inner{max-width:1560px;margin:0 auto;padding:34px 48px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px}
.ld-trustbar__t{margin:0;font:500 11.5px/1.3 var(--ld-font-sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ld-ink)}
.ld-trustbar__d{margin:5px 0 0;font:300 13.5px/1.55 var(--ld-font-sans);color:#6E6E76}

/* ==========================================================================
   8. Responsive (§9 del handoff)
   ========================================================================== */
@media (max-width:1100px){
  .ld-cathead{grid-template-columns:minmax(0,1fr);gap:24px}
  .ld-subcats{justify-content:flex-start}
  .ld-body{gap:40px}
}
@media (max-width:900px){
  .ld-page{padding:0 24px 64px}
  .ld-cathead h1{font-size:32px}
  .ld-facets{max-width:none;flex:1 1 100%}
  .ld-facets__summary{display:flex}
  /* Sin facetas (relleno estático): en móvil la columna sobra */
  .ld-facets--static{display:none}
  .ld-facets[open] .ld-facets__inner{margin-top:22px;gap:0}
  .ld-facets__head{display:none}
  /* Facetas plegables: solo se ve la lista de títulos (Color, Talla…) con lo elegido al lado */
  .ld-facet + .ld-facet{padding-top:0;border-top:0}
  .ld-facet{border-bottom:1px solid #EDEDEF}
  .ld-facet__title{padding:16px 0;pointer-events:auto;cursor:pointer;color:var(--ld-ink)}
  .ld-facet__title .ld-icon{display:block}
  .ld-facet[open] .ld-facet__title .ld-icon{transform:rotate(180deg)}
  .ld-facet__sel{display:block}
  .ld-facet__body{margin:0 0 20px}
  .ld-facets .ld-help{margin-top:28px}
  /* "Ver N productos": siempre a mano mientras se recorre el panel */
  .ld-facets__apply{display:block;position:sticky;bottom:12px;z-index:3;width:100%;margin:16px 0 0;padding:15px 18px;
    border:0;background:var(--ld-ink);color:#fff;font:600 12px/1 var(--ld-font-sans);letter-spacing:.2em;
    text-transform:uppercase;cursor:pointer;box-shadow:0 8px 24px -10px rgba(0,0,0,.5)}
  .ld-facets__apply:hover{background:var(--ld-red)}
  #products .products.ld-grid--listing,.ld-results .products.ld-grid--listing{column-gap:20px;row-gap:42px}
  .ld-trustbar__inner{padding:28px 24px}
}
@media (max-width:560px){
  #products .products.ld-grid--listing,.ld-results .products.ld-grid--listing{
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .ld-grid--listing .ld-quick{position:static;opacity:1;transform:none;border:0;background:none;
    padding:12px 0 0;pointer-events:auto}
  .ld-grid--listing .ld-card .ld-card__name{min-height:0;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .ld-grid--listing .ld-card .ld-card__media .ld-card__image img,
  .ld-grid--listing .ld-quick,
  .ld-facets__summary .ld-icon{transition:none}
  .ld-grid--listing .ld-card:hover .ld-card__media .ld-card__image img,
  .ld-grid--listing .ld-card:focus-within .ld-card__media .ld-card__image img{transform:none}
}