/* ==========================================================================
   LISTADO DE CATEGORIA — sistema del prototipo «Pigyfante PLP.dc.html».
   Portado literal salvo los reset globales. Se encola solo en categoria/tienda.
   ========================================================================== */
.pigyplp{ container-type:inline-size; container-name:pf; }
ul,ol{margin:0;padding:0;list-style:none}

  /* ===== SISTEMA RESPONSIVE — idéntico al aprobado en Tienda ===== */
  .pfc{container-type:inline-size;container-name:pf}
  .pf{--pad:16px; --gut:12px; --sec:44px;
      --h1:27px; --h2:22px; --h3:17px; --body:14px; --small:12px;
      --arch:26px; --chero:172px; --stick:24px}
  h1,h2,h3,h4{color:#0A1F66}
  .r-desk{display:none!important}
  .r-mob{display:block!important}
  .b-wide{display:none!important}
  .b-narrow{display:flex!important}
  .cbanner{display:flex;flex-direction:column;min-height:0}
  .cb-copy{padding:20px 20px 18px;position:relative;z-index:5}
  .lead-full{display:none!important}
  .lead-short{display:block!important}
  .plp-chips{display:flex;gap:8px;overflow-x:auto;margin-top:14px;padding-bottom:4px;scroll-snap-type:x proximity}
  .plp-chips > *{scroll-snap-align:start}
  .plp-aside{position:static}
  .plp-help{margin-top:16px}
  .cb-scene-n{position:relative;z-index:3;flex:1;min-height:172px;display:flex;align-items:flex-end;justify-content:center;padding:0 10px;gap:0}
  .g-prod{display:grid;gap:var(--gut);grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-shop{display:grid;gap:var(--gut);grid-template-columns:minmax(0,1fr)}
  .g-two{display:grid;gap:var(--gut);grid-template-columns:minmax(0,1fr)}

  @container pf (min-width:600px){
    .pf{--pad:24px;--gut:16px;--sec:56px;--h1:33px;--h2:26px;--h3:18px;--body:15px;--arch:32px;--chero:208px}
    .g-prod{grid-template-columns:repeat(3,minmax(0,1fr))}
    .b-wide{display:block!important}
    .b-narrow{display:none!important}
    .cbanner{display:block;aspect-ratio:3.7/1;min-height:230px}
    .cb-copy{position:absolute;left:0;top:0;bottom:0;width:58%;display:flex;flex-direction:column;justify-content:center;padding:5% 0 5% 5%}
    .g-two{grid-template-columns:repeat(2,minmax(0,1fr))}
    .lead-full{display:block!important}
    .lead-short{display:none!important}
  }
  @container pf (min-width:768px){
    .pf{--pad:32px;--sec:64px;--h1:38px;--h2:29px;--arch:38px;--chero:248px}
  }
  @container pf (min-width:1024px){
    .pf{--pad:40px;--gut:20px;--sec:80px;--h1:44px;--h2:34px;--h3:19px;--body:16px;--small:13px;--arch:44px;--chero:288px}
    .r-desk{display:block!important}
    .r-mob{display:none!important}
    .g-prod{grid-template-columns:repeat(3,minmax(0,1fr))}
    .g-shop{grid-template-columns:262px minmax(0,1fr);gap:32px;align-items:stretch}
    /* columna izquierda a alto completo: filtros arriba, ayuda anclada abajo — sin vacío */
    .plp-aside{display:flex!important;flex-direction:column;height:100%}
    .plp-help{margin-top:auto}
  }
  @container pf (min-width:1280px){
    .pf{--pad:52px;--h1:50px}
    .g-prod{grid-template-columns:repeat(4,minmax(0,1fr))}
    /* al reintegrar bajo el header sticky del Home, --stick pasa a 184px */
    .g-shop{align-items:start}
    .plp-aside{position:sticky;top:var(--stick);height:auto}
    .plp-help{margin-top:16px}
  }
  @keyframes pfUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
  @keyframes pfShim{0%{background-position:-260px 0}100%{background-position:260px 0}}
  @keyframes pfPop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
  @keyframes pfIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
  .pf-pop{animation:pfPop .4s ease}
  .pf-in{animation:pfIn .26s ease both}
  .pf-skel{background:linear-gradient(90deg,#F3F5FB 0%,#E8EAF3 50%,#F3F5FB 100%);background-size:520px 100%;animation:pfShim 1.3s linear infinite}
  @media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important}}

/* --- reset acotado, igual que en el resto ------------------------------- */
.pigyplp ul,.pigyplp ol{ margin:0; padding:0; list-style:none; }
.pigyplp li{ list-style:none; }
.pigyplp a{ text-decoration:none; }
.pigyplp p{ margin:0; }
.pigyplp h1,.pigyplp h2,.pigyplp h3,.pigyplp h4{ margin:0; }
.pigyplp button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }

/* --- ancho a sangre ------------------------------------------------------ */
.pigyplp{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); max-width:100vw; }
.site-content .col-full:has(> .pigyplp){ padding:0; max-width:none; }

/* --- imagenes de tarjeta: el producto completo --------------------------- */
.pigyplp .g-prod img{ object-fit:contain !important; background:#FAFBFE; }

/* --------------------------------------------------------------------------
   Sin barra de filtros, una sola columna.

   `g-shop` del diseno es «262 px de filtros + resto para la rejilla». Al no
   pintar la barra —no hay filtros reales todavia— la rejilla caia dentro de esa
   primera columna de 262 px y las tarjetas quedaban en 51 px de ancho.
   La regla es condicional: en cuanto exista `.plp-aside`, vuelve a dos columnas
   sin tocar nada. Mismo criterio que en la categoria de Storefront.
   -------------------------------------------------------------------------- */
.pigyplp .g-shop:not(:has(.plp-aside)){ grid-template-columns: minmax(0,1fr) !important; }

/* El collage de cabecera usa imagenes de PRODUCTO: se aplica la misma regla que
   en las tarjetas, porque una portada recortada sigue siendo una portada
   recortada aunque este de adorno. */
.pigyplp .cbanner img,
.pigyplp .cb-scene-n img{ object-fit: contain !important; background:#FAFBFE; }

/* ── BARRA DE FILTROS · valores de «Pigyfante PLP.dc.html» ───────────────────
 * Caja de 262 px con borde 1.5px, radio 22 y epigrafes en versalitas. Solo
 * contiene controles que filtran de verdad; lo que el prototipo dibuja sin dato
 * detras —valoraciones y descuentos— no se pinta. */
.pigyplp .plp-aside{ position:sticky; top:24px; display:flex; flex-direction:column; gap:14px; }
.pigyplp .plp-filtros{ margin:0; }
.pigyplp .plp-filtros-caja{ border:1.5px solid #E8EAF3; border-radius:22px; overflow:hidden; background:#fff; }
.pigyplp .plp-filtros-cab{ padding:15px 17px; border-bottom:1.5px solid #E8EAF3; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pigyplp .plp-filtros-cab h2{ font-size:15px; font-weight:900; margin:0; }
.pigyplp .plp-limpiar{ font-size:12.5px; font-weight:800; color:#1A2A6E; text-decoration:underline; }
.pigyplp .plp-filtros-grupo{ padding:16px 17px; border-bottom:1.5px solid #E8EAF3; }
.pigyplp .plp-filtros-grupo h3{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#646E9A; margin:0 0 11px; }
.pigyplp .plp-precio{ display:flex; align-items:center; gap:8px; }
.pigyplp .plp-precio input{ flex:1; min-width:0; height:42px; padding:0 12px; border-radius:12px; border:2px solid #E8EAF3; outline:none; font-size:13.5px; }
.pigyplp .plp-precio input:focus-visible{ border-color:#FF5C8A; }
.pigyplp .plp-precio span{ color:#646E9A; font-weight:700; }
.pigyplp .plp-pista{ font-size:11.5px; color:#646E9A; font-weight:600; margin-top:8px; }
.pigyplp .plp-pista .amount{ font-weight:800; color:#1A2A6E; }
.pigyplp .plp-lista{ display:flex; flex-direction:column; gap:3px; list-style:none; margin:0; padding:0; }
.pigyplp .plp-lista label,
.pigyplp .plp-sub{ display:flex; align-items:center; gap:10px; padding:5px 0; min-height:34px; cursor:pointer;
  font-size:14px; font-weight:500; color:#1A2A6E; text-decoration:none; }
.pigyplp .plp-lista label span:first-of-type,
.pigyplp .plp-sub span:first-of-type{ flex:1; }
.pigyplp .plp-lista input[type=checkbox]{ width:19px; height:19px; accent-color:#FF5C8A; flex:none; margin:0; }
.pigyplp .plp-num{ font-size:11.5px; font-weight:700; color:#646E9A; }
.pigyplp .plp-sub:hover,.pigyplp .plp-sub:focus-visible{ color:#FF5C8A; }
.pigyplp .plp-filtros-pie{ padding:14px 17px; }
.pigyplp .plp-filtros-pie button{ width:100%; min-height:44px; border:0; border-radius:99px; cursor:pointer;
  background:#1A2A6E; color:#fff; font-size:14px; font-weight:800; }
.pigyplp .plp-filtros-pie button:hover{ background:#FF5C8A; color:#0A1F66; }
.pigyplp .plp-help{ padding:16px; border-radius:20px; background:#FDF1E5; border:1.5px solid #F0E2D0; }
.pigyplp .plp-help-t{ font-size:13.5px; font-weight:800; line-height:1.35; margin-bottom:3px; }
.pigyplp .plp-help-d{ font-size:12px; color:#4C5689; line-height:1.45; margin-bottom:10px; }
.pigyplp .plp-help-cta{ display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:99px;
  background:#0A1F66; color:#fff; font-size:13px; font-weight:800; text-decoration:none; }
.pigyplp .plp-help-cta:hover{ filter:brightness(1.2); }
.pigyplp .plp-resultados{ min-width:0; }

/* En movil el diseno no muestra la columna: los filtros viven en su propia hoja.
   Mientras esa hoja no exista, se oculta en vez de apilar una columna de 262 px
   sobre la rejilla, que es justo lo que el diseno evita. */
@media (max-width:1023px){ .pigyplp .plp-aside{ display:none; } }