/* ============================================================================
   DDMUI26 · PLP (plantilla de listado de productos) — CSS del prototipo
   Fuente: Claude Design, proyecto "ddm", archivo plp.css.js
   Extraído 2026-07-07. Usa los tokens del sistema (--bg/--paper/--card/--tile/
   --ink/--muted/--violet/--violet2/--gold/--goldSoft/--line/--sh/--shS), los
   mismos que ya viven en home.css/global.css/pdp.css. La base fusion.css.js == home.css.
   Este archivo es REFERENCIA para portar a la plantilla WooCommerce archive-product.
   ========================================================================== */

/* ===== base reset (home.css no está cargado en páginas interiores) ===== */
.ddm-plp a{color:inherit;text-decoration:none;cursor:pointer;}

/* ===== category hero ===== */
.ddm-plp .c-hero{padding:30px 56px 26px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;}
.ddm-plp .c-hero::before{content:"";position:absolute;top:-160px;right:-60px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(160,107,255,.24),transparent 62%);pointer-events:none;}
.ddm-plp .c-crumb{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);margin-bottom:16px;}
.ddm-plp .c-crumb a{color:var(--muted);}
.ddm-plp .c-crumb a:hover{color:var(--gold);}
.ddm-plp .c-crumb .sep{opacity:.5;}
.ddm-plp .c-crumb .cur{color:var(--ink);font-weight:700;}
.ddm-plp .c-hero-top{display:flex;align-items:flex-end;gap:16px;position:relative;z-index:1;}
.ddm-plp .c-eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);margin-bottom:9px;}
.ddm-plp .c-title{font-size:52px;line-height:1;letter-spacing:-.02em;}
.ddm-plp .c-count{margin-left:auto;font-size:13.5px;color:var(--muted);white-space:nowrap;padding-bottom:6px;}
.ddm-plp .c-count b{color:var(--ink);font-family:'Baloo 2';}
.ddm-plp .c-intro{max-width:760px;color:var(--muted);font-size:15.5px;line-height:1.65;margin-top:18px;position:relative;z-index:1;}
/* "Leer más": el texto siempre está en el DOM; JS lo colapsa si es largo. */
.ddm-plp .c-intro.is-clamped{max-height:5em;overflow:hidden;}
.ddm-plp .c-intro.is-clamped::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.4em;background:linear-gradient(transparent,var(--bg));pointer-events:none;}
.ddm-plp .c-intro.is-open{max-height:none;}
.ddm-plp .c-intro-more{margin-top:9px;background:none;color:var(--gold);font-family:'Baloo 2';font-weight:800;font-size:13.5px;padding:0;position:relative;z-index:1;}
.ddm-plp .c-intro-more:hover{text-decoration:underline;}
/* Ancla de resultados: compensa el header sticky al saltar tras filtrar. */
.ddm-plp #resultados{scroll-margin-top:96px;}
/* Caja centrada (mismo patrón que .ddm-pdp): sin esto hereda el ancho fijo de
   .ddm-fusion y queda pegada a la izquierda con hueco a la derecha en pantallas anchas. */
.ddm-plp{max-width:1440px;margin:0 auto;}
.ddm-plp .c-subs{display:flex;gap:11px;margin-top:22px;flex-wrap:wrap;position:relative;z-index:1;}
.ddm-plp .c-sub{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:700;color:var(--ink);transition:all .15s;}
.ddm-plp .c-sub:hover{border-color:var(--gold);transform:translateY(-2px);}
.ddm-plp .c-sub em{color:var(--muted);font-weight:600;font-size:12px;}

/* ===== layout ===== */
.ddm-plp .c-body{display:grid;grid-template-columns:258px 1fr;gap:32px;padding:30px 56px 60px;align-items:start;}

/* filters sidebar */
.ddm-plp .c-filters{position:sticky;top:88px;display:flex;flex-direction:column;gap:6px;}
.ddm-plp .c-filters-toggle{display:none;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-family:'Baloo 2';font-weight:700;font-size:13.5px;padding:10px 16px;border-radius:11px;margin-bottom:4px;cursor:pointer;transition:border-color .15s,color .15s;}
.ddm-plp .c-filters-toggle:hover{border-color:var(--gold);color:var(--gold);}
.ddm-plp .c-fhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.ddm-plp .c-fhead h3{font-size:17px;}
.ddm-plp .c-clear{font-size:12px;font-weight:800;color:var(--gold);background:none;padding:0;}
.ddm-plp .c-clear:hover{text-decoration:underline;}
.ddm-plp .c-fgroup{border-top:1px solid var(--line);padding:16px 0;}
.ddm-plp .c-fgroup:first-of-type{border-top:none;}
.ddm-plp .c-flabel{font-family:'Baloo 2';font-weight:700;font-size:13.5px;color:var(--ink);margin-bottom:12px;text-transform:uppercase;letter-spacing:.04em;}
.ddm-plp .c-opt{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;font-size:13.5px;color:var(--muted);transition:color .15s;user-select:none;}
.ddm-plp .c-opt:hover{color:var(--ink);}
.ddm-plp .c-opt.on{color:var(--ink);font-weight:700;}
.ddm-plp .c-box{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--line);background:var(--card);flex:0 0 auto;display:grid;place-items:center;transition:all .15s;}
.ddm-plp .c-opt.on .c-box{background:var(--gold);border-color:var(--gold);color:#241500;}
.ddm-plp .c-box svg{opacity:0;transition:opacity .1s;}
.ddm-plp .c-opt.on .c-box svg{opacity:1;}
.ddm-plp .c-optc{margin-left:auto;font-size:11.5px;color:var(--muted);opacity:.7;}
.ddm-plp .c-swatch{display:inline-flex;gap:5px;}
.ddm-plp .c-cdot{width:13px;height:13px;border-radius:4px;}
/* swatch de color (spec B1): supersede al .c-cdot del diseño (13px, sin borde) */
.ddm-plp .c-opt .c-cdot{width:14px;height:14px;border-radius:4px;border:1px solid rgba(255,255,255,.25);flex:0 0 auto;}
/* --- Slider de precio (grupo Precio del sidebar/drawer) ------------------- */
.ddm-plp .c-price-slider{display:flex;flex-direction:column;gap:14px;}
.ddm-plp .c-price-track{position:relative;height:24px;display:flex;align-items:center;}
.ddm-plp .c-price-track::before{content:"";position:absolute;left:0;right:0;height:5px;border-radius:999px;background:var(--card);border:1px solid var(--line);}
.ddm-plp .c-price-fill{position:absolute;height:5px;border-radius:999px;background:var(--gold);left:0;right:0;}
.ddm-plp .c-price-range{position:absolute;left:0;top:0;width:100%;height:24px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;}
.ddm-plp .c-price-range:focus{outline:none;}
.ddm-plp .c-price-range::-webkit-slider-runnable-track{background:none;border:none;height:24px;}
.ddm-plp .c-price-range::-moz-range-track{background:none;border:none;height:24px;}
.ddm-plp .c-price-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:20px;height:20px;border-radius:50%;background:var(--gold);border:2px solid var(--bg);box-shadow:0 1px 5px rgba(0,0,0,.5);cursor:grab;margin-top:2px;}
.ddm-plp .c-price-range::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--gold);border:2px solid var(--bg);box-shadow:0 1px 5px rgba(0,0,0,.5);cursor:grab;}
.ddm-plp .c-price-range:active::-webkit-slider-thumb{cursor:grabbing;}
.ddm-plp .c-price-fields{display:flex;align-items:center;gap:8px;}
.ddm-plp .c-price-field{display:inline-flex;align-items:center;gap:2px;flex:1;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:7px 10px;font-size:13px;font-weight:700;color:var(--muted);min-width:0;}
/* Especificidad html body … + !important: el wp-custom-css viejo fuerza fondo
   blanco/borde en los inputs y ganaría a 2 clases (cajas blancas vacías). */
html body .ddm-plp .c-price-field{background:var(--card)!important;}
html body .ddm-plp .c-price-num{width:100%;min-width:0;background:transparent!important;border:none!important;box-shadow:none!important;color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;font-family:'Baloo 2';font-weight:700;font-size:13.5px;padding:0!important;height:auto!important;outline:none;-moz-appearance:textfield;}
.ddm-plp .c-price-num::-webkit-outer-spin-button,.ddm-plp .c-price-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.ddm-plp .c-price-sep{color:var(--muted);font-size:12px;font-weight:700;flex:0 0 auto;}
.ddm-plp .c-price-apply{background:var(--gold);color:#241500;font-family:'Baloo 2';font-weight:800;font-size:13px;padding:9px 15px;border-radius:10px;cursor:pointer;border:none;transition:filter .15s;}
.ddm-plp .c-price-apply:hover{filter:brightness(1.08);}

.ddm-plp .c-help{margin-top:16px;background:linear-gradient(135deg,var(--violet2),#3b1d70);border-radius:16px;padding:20px;color:#fff;}
.ddm-plp .c-help b{font-family:'Baloo 2';font-weight:800;font-size:16px;display:block;margin-bottom:6px;}
.ddm-plp .c-help p{font-size:12.5px;color:rgba(255,255,255,.82);line-height:1.5;margin-bottom:14px;}
.ddm-plp .c-help a{display:inline-flex;align-items:center;gap:7px;background:var(--gold);color:#241500;font-family:'Baloo 2';font-weight:800;font-size:13px;padding:9px 15px;border-radius:10px;}

/* toolbar */
.ddm-plp .c-tools{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap;}
.ddm-plp .c-chips{display:flex;gap:8px;flex-wrap:wrap;}
.ddm-plp .c-chip{display:inline-flex;align-items:center;gap:7px;background:var(--goldSoft);border:1px solid color-mix(in srgb,var(--gold) 30%,var(--line));color:var(--ink);font-size:12.5px;font-weight:700;padding:6px 8px 6px 12px;border-radius:999px;}
.ddm-plp .c-chip button,.ddm-plp .c-chip a{background:none;color:var(--muted);font-size:15px;line-height:1;padding:0;width:16px;height:16px;display:grid;place-items:center;border-radius:50%;}
.ddm-plp .c-chip button:hover,.ddm-plp .c-chip a:hover{color:var(--ink);background:var(--line);}
.ddm-plp .c-showing{font-size:13px;color:var(--muted);}
.ddm-plp .c-showing b{color:var(--ink);}
.ddm-plp .c-sort{margin-left:auto;display:flex;align-items:center;gap:9px;}
.ddm-plp .c-sort label{font-size:12.5px;color:var(--muted);font-weight:700;}
.ddm-plp .c-select{background:var(--card);border:1px solid var(--line);color:var(--ink);font-family:'Baloo 2';font-weight:700;font-size:13.5px;padding:10px 14px;border-radius:11px;cursor:pointer;outline:none;min-width:0;max-width:100%;}
/* SCROLL HORIZONTAL EN MÓVIL: los ítems de grid/flex tienen min-width:auto, así que
   el <select> de orden (ancho del option más largo) y el nombre del producto en modo
   renglones forzaban un min-content mayor que la columna → la página desbordaba
   (peor en modo renglones). min-width:0 deja que encojan. */
.ddm-plp .c-main{min-width:0;}
.ddm-plp .c-tools{min-width:0;}
.ddm-plp .c-sort{min-width:0;}
.ddm-plp .c-sort form{min-width:0;}
.ddm-plp .c-cname{overflow-wrap:anywhere;}
.ddm-plp .c-select:focus{border-color:var(--violet);}
.ddm-plp .c-view{display:inline-flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:4px;}
/* padding:0 + border-radius override: el tema viejo mete padding (descentra el
   icono) y redondea a círculo. Forzamos cuadro redondeado con el icono centrado. */
.ddm-plp .c-view button{width:36px;height:36px;display:grid;place-items:center;background:transparent!important;color:var(--muted)!important;border:none!important;border-radius:8px!important;padding:0!important;cursor:pointer;transition:background .15s,color .15s;}
.ddm-plp .c-view button:hover{color:var(--ink)!important;}
.ddm-plp .c-view button.on{background:var(--gold)!important;color:#241500!important;}

/* product grid */
.ddm-plp .c-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.ddm-plp .c-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;transition:transform .18s,box-shadow .18s,border-color .18s;position:relative;display:flex;flex-direction:column;}
.ddm-plp .c-card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:color-mix(in srgb,var(--violet) 45%,var(--line));}
.ddm-plp .c-ctile{background:var(--tile);border-radius:13px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;position:relative;}
/* cover + scale(1.65): recorta los márgenes blancos internos de la foto para que
   solo se vea el dibujo del artículo (aunque se corte en los bordes). */
.ddm-plp .c-ctile img{width:100%;height:100%;object-fit:cover;transform:scale(1.65);transition:transform .28s;}
.ddm-plp .c-card:hover .c-ctile img{transform:scale(1.72);}
.ddm-plp .c-flag{position:absolute;top:10px;left:10px;font-family:'Baloo 2';font-weight:800;font-size:10.5px;letter-spacing:.03em;padding:4px 9px;border-radius:7px;text-transform:uppercase;}
.ddm-plp .c-flag--new{background:var(--violet2);color:#fff;}
.ddm-plp .c-flag--pop{background:var(--gold);color:#241500;}
.ddm-plp .c-flag--low{background:#e2483d;color:#fff;}
.ddm-plp .c-fav{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:9px;background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(4px);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);opacity:0;transform:translateY(-4px);transition:all .18s;}
.ddm-plp .c-card:hover .c-fav{opacity:1;transform:translateY(0);}
.ddm-plp .c-fav:hover{color:#e2483d;}
.ddm-plp .c-fav.on{color:#e2483d;opacity:1;transform:translateY(0);}
.ddm-plp .c-cbrand{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--violet);margin-top:13px;}
.ddm-plp .c-cname{font-family:'Baloo 2';font-weight:700;font-size:15px;line-height:1.2;margin-top:4px;min-height:36px;}
.ddm-plp .c-crate{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--muted);}
.ddm-plp .c-crate .st{display:inline-flex;color:var(--gold);}
.ddm-plp .c-cmeta{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap;}
.ddm-plp .c-tag{font-size:11px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:3px 8px;}
.ddm-plp .c-cfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line);}
.ddm-plp .c-cprice{font-family:'Baloo 2';font-weight:800;font-size:20px;color:var(--gold);}
.ddm-plp .c-cadd{display:inline-flex;align-items:center;gap:7px;font-family:'Baloo 2';font-weight:800;font-size:12.5px;background:linear-gradient(120deg,#7c3aed,#e04ec4);color:#fff;padding:9px 14px;border-radius:10px;box-shadow:0 2px 12px rgba(224,78,196,.42);transition:all .15s;}
.ddm-plp .c-cadd svg,.ddm-plp .c-cadd .c-cadd-t{position:relative;z-index:1;}
.ddm-plp .c-cadd:hover{transform:scale(1.04);filter:brightness(1.08);box-shadow:0 4px 18px rgba(224,78,196,.6);}
.ddm-plp .c-cadd.on{background:#37a85f;}

/* list view */
.ddm-plp .c-grid.list{grid-template-columns:1fr;gap:12px;}
.ddm-plp .c-grid.list .c-card{flex-direction:row;align-items:center;gap:20px;padding:16px;}
.ddm-plp .c-grid.list .c-ctile{width:120px;height:120px;flex:0 0 auto;aspect-ratio:auto;}
.ddm-plp .c-grid.list .c-cbody{flex:1;min-width:0;margin:0;}
.ddm-plp .c-grid.list .c-cbrand{margin-top:0;}
.ddm-plp .c-grid.list .c-cname{min-height:0;font-size:18px;}
.ddm-plp .c-grid.list .c-cfoot{border:none;padding:0;margin:0;flex-direction:column;align-items:flex-end;gap:10px;flex:0 0 auto;}
.ddm-plp .c-grid.list .c-fav{opacity:1;transform:none;position:static;}

/* empty state */
.ddm-plp .c-empty{grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--muted);}
.ddm-plp .c-empty .big{font-size:52px;margin-bottom:14px;}
.ddm-plp .c-empty h3{font-size:22px;color:var(--ink);margin-bottom:8px;}

/* pagination */
.ddm-plp .c-pag{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:38px;}
.ddm-plp .c-pag button,.ddm-plp .c-pag a,.ddm-plp .c-pag .page-numbers{min-width:42px;height:42px;border-radius:11px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-family:'Baloo 2';font-weight:700;font-size:14px;padding:0 12px;transition:all .15s;display:inline-grid;place-items:center;}
.ddm-plp .c-pag button:hover:not(:disabled),.ddm-plp .c-pag a:hover{border-color:var(--gold);color:var(--gold);}
.ddm-plp .c-pag button.on,.ddm-plp .c-pag .page-numbers.current{background:var(--gold);color:#241500;border-color:var(--gold);}
.ddm-plp .c-pag button:disabled{opacity:.4;cursor:not-allowed;}

/* trust strip */
.ddm-plp .c-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:30px 56px;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.ddm-plp .c-tcell{display:flex;align-items:center;gap:13px;}
.ddm-plp .c-tcell .ti{width:44px;height:44px;border-radius:12px;background:var(--goldSoft);color:var(--gold);display:grid;place-items:center;flex:0 0 auto;}
.ddm-plp .c-tcell b{font-size:14px;font-family:'Baloo 2';font-weight:700;color:var(--ink);display:block;}
.ddm-plp .c-tcell small{font-size:12px;color:var(--muted);}

/* ============================================================================
   PLP · responsive (adaptado del diseño: sidebar → drawer móvil a ≤1024px)
   ========================================================================== */
@media (max-width:1024px){
  .ddm-plp .c-body{grid-template-columns:1fr;padding:24px 32px 48px;gap:20px;}
  .ddm-plp .c-filters-toggle{display:inline-flex;}
  .ddm-plp .c-filters{
    position:fixed;top:0;left:0;bottom:0;width:300px;max-width:86vw;z-index:60;
    background:var(--bg);border-right:1px solid var(--line);padding:22px;
    overflow-y:auto;transform:translateX(-100%);transition:transform .25s ease;
    box-shadow:var(--shS);
  }
  .ddm-plp .c-filters.open{transform:translateX(0);}
  .ddm-plp .c-grid{grid-template-columns:repeat(2,1fr);}
  .ddm-plp .c-hero{padding:24px 32px 22px;}
  .ddm-plp .c-title{font-size:40px;}
  .ddm-plp .c-trust{padding:24px 32px;grid-template-columns:repeat(2,1fr);}
}

@media (max-width:760px){
  .ddm-plp .c-grid{grid-template-columns:repeat(2,1fr);}  /* móvil = 2 columnas */
  .ddm-plp .c-hero{padding:20px 20px 18px;}
  .ddm-plp .c-body{padding:20px 20px 40px;}
  .ddm-plp .c-title{font-size:32px;}
  .ddm-plp .c-hero-top{flex-wrap:wrap;}
  .ddm-plp .c-count{margin-left:0;padding-bottom:0;}
  .ddm-plp .c-tools{gap:10px;}
  .ddm-plp .c-sort{margin-left:0;width:100%;justify-content:space-between;}
  .ddm-plp .c-sort form{flex:1 1 auto;min-width:0;}
  .ddm-plp .c-select{width:100%;}
  .ddm-plp .c-trust{grid-template-columns:1fr 1fr;padding:20px;}
}

/* Teléfonos: el botón "Agregar" queda SOLO con el ícono de carrito (el texto pegaba
   el botón al precio en tarjetas de ~170px). aria-label conserva la accesibilidad. */
@media (max-width:560px){
  .ddm-plp .c-cadd-t{display:none;}
  .ddm-plp .c-cadd{gap:0;padding:10px 12px;}
  .ddm-plp .c-grid.list .c-card{gap:12px;padding:12px;}
  .ddm-plp .c-grid.list .c-ctile{width:96px;height:96px;}
  .ddm-plp .c-grid.list .c-cname{font-size:15px;}
}

@media (max-width:480px){
  .ddm-plp .c-hero{padding:16px 16px 16px;}
  .ddm-plp .c-title{font-size:26px;}
  .ddm-plp .c-eyebrow{margin-bottom:6px;}
  .ddm-plp .c-intro{font-size:14px;margin-top:12px;}
  .ddm-plp .c-subs{gap:8px;margin-top:16px;}
  .ddm-plp .c-body{padding:16px 16px 32px;}
  .ddm-plp .c-trust{grid-template-columns:1fr;padding:16px;}
}