/* ==========================================================================
   0. TOKENS (scoped)
   ========================================================================== */
body.template-category{
  --plp-ink:#000000;
  --plp-paper:#ffffff;
  --plp-bordo:#6B1F2C;
  --plp-bordo-deep:#4A1520;
  --plp-cream-on-bordo:#F4EFE8;
  --plp-muted:#777777;
  --plp-muted-2:#756E63;
  --plp-muted-3:#3A3530;
  --plp-line:rgba(0,0,0,.14);
  --plp-line-soft:rgba(0,0,0,.08);
  --plp-hairline:rgba(0,0,0,.12);
  --plp-quick-overlay:rgba(0,0,0,.698);
  --plp-display:"Aloe Vera","Noto Sans",sans-serif;
  --plp-body:"Noto Sans",sans-serif;
  --plp-heading:"Montserrat","Noto Sans",sans-serif; /* Montserrat verificada live (@import Google en style-tokens); fallback Noto Sans */
  /* offsets sticky medidos (ver header comment) */
  --plp-sticky-top-md:110px;
  --plp-sticky-top-sm:95px;
  --plp-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' fill='none' stroke-width='1.3'/%3E%3C/svg%3E");
  background:#ffffff; /* decisión dueño: fondo BLANCO fijo, sin toggle */
}

/* ==========================================================================
   1. ESQUINAS CUADRADAS — reset SCOPED (no toca chrome: header/adbar/footer/
      drawer/WhatsApp/cookie banner viven fuera de estos contenedores)
   ========================================================================== */
body.template-category .js-category-controls,
body.template-category .js-category-controls *,
body.template-category .js-category-controls *::before,
body.template-category .js-category-controls *::after,
body.template-category .js-category-body,
body.template-category .js-category-body *,
body.template-category .js-category-body *::before,
body.template-category .js-category-body *::after,
body.template-category #nav-filters *,
body.template-category #nav-filters *::before,
body.template-category #nav-filters *::after,
body.template-category .plp-fsets *,
body.template-category .plp-vm *{
  border-radius:0;
}
/* excepciones que re-optan a redondo (equivalentes .r-pill/.r-round del mockup) */
body.template-category .plp-r-pill{border-radius:999px !important;}
body.template-category .plp-r-round{border-radius:50% !important;}

/* ==========================================================================
   2. MASTHEAD — page-header real dentro de .js-category-controls
      (mockup .page-head: eyebrow + H1 Montserrat 600 + barra bordó)
      NOTA: el masthead vive DENTRO de la barra sticky del theme; el estado
      .is-sticky lo compacta a "rail" (adaptación documentada en css-notes).
   ========================================================================== */
body.template-category .js-category-controls{
  background:var(--plp-paper);
  padding:26px 32px 12px;
  border-bottom:1px solid var(--plp-line-soft);
  /* pisa el top inline que setea offsetCategories() (36px desktop scrolleado
     → dejaba la barra medio tapada; en mobile 20px la tapaba ENTERA) */
  top:var(--plp-sticky-top-md) !important;
}
/* eyebrow — markup nuevo (orquestador): <p class="plp-eyebrow"> con el texto
   'Activewear' pasando por | translate, dentro del bloque del page-header.
   Si no está, no pasa nada. */
body.template-category .js-category-controls .plp-eyebrow{
  font-family:var(--plp-body);
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--plp-muted);
  margin:0 0 3px;
}
/* H1 — !important para ganarle al bump D06 de leren-styles
   (body.template-category .page-header h1.h4 { font-size:28px !important;
   letter-spacing/weight !important }). Especificidad mayor + later order. */
body.template-category .js-category-controls .page-header h1.h4{
  font-family:var(--plp-heading) !important;
  font-weight:600 !important;
  font-size:26px !important;
  letter-spacing:.12em !important;
  line-height:1.15 !important;
  text-transform:uppercase;
  color:var(--plp-ink);
  margin-bottom:0;
}
body.template-category .js-category-controls .page-header h1.h4::after{
  content:"";
  display:block;
  width:38px;
  height:2px;
  background:var(--plp-bordo);
  margin:8px 0 0;
}
/* breadcrumbs discretos */
body.template-category .js-category-controls .breadcrumbs,
body.template-category .js-category-controls .breadcrumbs a{
  font-family:var(--plp-body);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--plp-muted);
}
/* estado sticky compacto (patrón del theme: is-sticky lo agrega el IO) */
body.template-category .js-category-controls.is-sticky{
  padding:10px 32px 8px;
  border-bottom:1px solid var(--plp-hairline);
  box-shadow:0 10px 24px -18px rgba(0,0,0,.25);
}
body.template-category .js-category-controls.is-sticky .plp-eyebrow{display:none;}
body.template-category .js-category-controls.is-sticky .page-header h1.h4{
  font-size:15px !important;
  letter-spacing:.14em !important;
}
body.template-category .js-category-controls.is-sticky .page-header h1.h4::after{display:none;}

/* ==========================================================================
   3. RAIL DESKTOP — cat-chips (markup nuevo), botón Filtrar, sort select
   ========================================================================== */
/* fila del rail (markup nuevo del orquestador): <div class="plp-rail"> con
   <span class="plp-rail-label">, <nav class="plp-cat-chips"> con
   <a class="plp-cat-chip [is-active]"> — links a categorías REALES de TN */
body.template-category .plp-rail{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 10px;
  background:var(--plp-paper);
  border:1px solid var(--plp-hairline);
  border-left:3px solid var(--plp-bordo);
  padding:8px 14px;
  margin:8px 0 0;
}
body.template-category .plp-rail-label{
  font-family:var(--plp-heading);
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--plp-bordo);
  margin-right:6px;
}
body.template-category .plp-cat-chips{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  flex:1;
  min-width:0;
}
body.template-category .plp-cat-chip{
  font-family:var(--plp-body);
  font-size:12.5px;
  letter-spacing:.04em;
  color:#333;
  background:none;
  border:1px solid var(--plp-line);
  padding:5px 11px;
  text-transform:uppercase;
  text-decoration:none;
  transition:border-color .2s,background .2s,color .2s;
}
body.template-category .plp-cat-chip:hover{border-color:#000;}
body.template-category .plp-cat-chip.is-active{background:#000;color:#fff;border-color:#000;}

/* botón "Filtrar" real (trigger del modal #nav-filters) → look rail-btn */
body.template-category .js-category-controls a.js-modal-open.btn{
  font-family:var(--plp-body);
  font-size:12.5px;
  font-weight:400;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--plp-ink);
  background:var(--plp-paper);
  border:1px solid var(--plp-line) !important; /* pisa el border:none del <style> inline viejo mientras conviva */
  padding:8px 14px;
  transition:border-color .2s;
}
body.template-category .js-category-controls a.js-modal-open.btn:hover{border-color:#000;}
body.template-category .js-category-controls a.js-modal-open .icon-inline{
  font-size:16px; /* el inline viejo lo subía a 24px */
  width:15px;height:15px;
}
body.template-category .js-category-controls a.js-modal-open .font-weight-bold{font-weight:400 !important;}
/* badge de filtros aplicados (markup nuevo opcional): <span class="plp-filter-badge">N</span> */
body.template-category .plp-filter-badge{
  background:var(--plp-bordo);
  color:#fff;
  font-family:var(--plp-body);
  font-size:10px;
  min-width:17px;
  height:17px;
  display:inline-grid;
  place-items:center;
  padding:0 4px;
  margin-left:6px;
}

/* sort select real (.js-sort-by de grid/sort-by.tpl) → appearance none + chevron */
body.template-category .js-category-controls .js-sort-by{
  font-family:var(--plp-body) !important;
  font-size:12.5px !important;
  font-weight:400 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase;
  color:var(--plp-ink) !important;
  background-color:var(--plp-paper);
  border:1px solid var(--plp-line) !important;
  padding:8px 30px 8px 13px;
  -webkit-appearance:none;
  appearance:none;
  background-image:var(--plp-chevron);
  background-repeat:no-repeat;
  background-position:right 12px center;
  cursor:pointer;
  height:auto;
  line-height:1.4;
}
/* chevron propio del theme (form-select-icon) fuera; y el corrimiento
   right:-18px del form-select-container (style inline de form-select.tpl) a 0 */
body.template-category .js-category-controls .form-select-icon{display:none;}
body.template-category .js-category-controls .form-select-container{right:0;}
body.template-category .js-category-controls .js-sort-by option{
  font-family:var(--plp-body);
  font-size:12px;
  text-transform:none;
}

/* ==========================================================================
   4. APPLIED CHIPS (grid/filters.tpl applied_filters → .js-remove-filter.chip)
   ========================================================================== */
/* cubre también los applied-chips mobile, que viven en un container-fluid
   d-md-none FUERA de .js-category-controls (category.tpl línea 79-81) */
body.template-category .js-remove-filter.chip,
body.template-category .js-category-controls .chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--plp-body);
  font-size:12px;
  color:var(--plp-ink);
  background:var(--plp-paper);
  border:1px solid var(--plp-hairline);
  margin:0 7px 4px 0;
  padding:6px 26px 6px 11px;
  line-height:1.3;
}
body.template-category .js-remove-filter.chip .chip-remove-icon,
body.template-category .js-category-controls .chip .chip-remove-icon{
  color:var(--plp-muted);
  transition:color .2s;
  top:50%;
  transform:translateY(-50%);
}
body.template-category .js-remove-filter.chip:hover .chip-remove-icon,
body.template-category .js-category-controls .chip:hover .chip-remove-icon{color:var(--plp-bordo);}
body.template-category .js-remove-all-filters{
  font-family:var(--plp-body);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--plp-bordo);
  text-decoration:underline;
}

/* ==========================================================================
   5. GRID — .js-product-table pasa a CSS grid (los gutters del mockup no
      salen del row/col Bootstrap sin tocar markup)
      4 col gap 18x10 → 3 col ≤1100 → 2 col ≤768 gap 14x8 → ≤380 gap 3x8
   ========================================================================== */
body.template-category .js-category-body .container-fluid{
  max-width:1440px;
  margin:0 auto;
  padding:0 32px;
}
body.template-category .js-category-body [data-store^="category-grid"]{padding:0;}
body.template-category .js-product-table{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px 10px;
  margin:0;
  padding-bottom:20px;
}
/* neutraliza DENTRO del scope el override D06 de leren-styles
   (body.template-category .js-product-table > .js-item-product.col-md-4
   { flex:0 0 25%; max-width:25% }) y los width/max-width de col-6/col-md-*:
   en grid layout flex se ignora pero max-width NO. Cubre col-md-3 y col-md-4
   por si cambia grid_columns_desktop en admin (hoy live: col-6 col-md-4). */
body.template-category .js-product-table > .js-item-product,
body.template-category .js-product-table > .js-item-product.col-6.col-md-4,
body.template-category .js-product-table > .js-item-product.col-6.col-md-3{
  width:auto;
  max-width:100%;
  flex:none;
  padding:0;
  margin:0; /* el row-gap reemplaza al .item{margin-bottom:20px} */
  min-width:0;
}
@media (max-width:1100px) and (min-width:768px){
  body.template-category .js-product-table{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:767.98px){
  body.template-category .js-category-body .container-fluid{padding:0 14px;}
  body.template-category .js-product-table{grid-template-columns:repeat(2,1fr);gap:14px 8px;}
}
@media (max-width:380px){
  body.template-category .js-product-table{gap:3px 8px;}
}
/* paginación / load-more fuera del grid quedan como están; botón restyled */
body.template-category .js-category-body .js-load-more{
  font-family:var(--plp-body);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:#000;
  color:#fff;
  border:0;
  padding:14px 26px;
}

/* ==========================================================================
   6. CARD — media, hover, labels, quickshop, body, precios
   ========================================================================== */
/* --- media: aspect 2/3 ya sale del padding-bottom inline del theme --- */
body.template-category .js-item-product .item-image{background:#eee;}
/* hover crossfade + scale, timing del mockup (.5s opacity / .7s transform) */
body.template-category .js-item-product .item-image-featured,
body.template-category .js-item-product .item-image-secondary{
  transition:opacity .5s ease,transform .7s ease !important;
}
@media (min-width:768px){
  body.template-category .js-item-product:hover .item-image-featured,
  body.template-category .js-item-product:hover .item-image-secondary{
    transform:scale(1.045);
  }
  /* crossfade también en hover de la CARD (mockup .card:hover), no solo de la
     imagen — mismas clases-gate del theme (secondary loaded / no disabled) */
  body.template-category .js-item-product:hover .product-item-secondary-images-loaded:not(.product-item-secondary-images-disabled) .item-image-featured,
  body.template-category .js-item-product:hover .item-image.product-item-secondary-images-loaded:not(.product-item-secondary-images-disabled) .item-image-featured{
    opacity:0;
  }
  body.template-category .js-item-product:hover .product-item-secondary-images-loaded:not(.product-item-secondary-images-disabled) .item-image-featured ~ .item-image-secondary,
  body.template-category .js-item-product:hover .item-image.product-item-secondary-images-loaded:not(.product-item-secondary-images-disabled) .item-image-featured ~ .item-image-secondary{
    opacity:1;
  }
}

/* --- labels flotantes: del bottom-izquierda del theme al top-left del mockup.
   !important porque style-critical trae `bottom:40px !important` ≤768. --- */
body.template-category .js-item-product .item-floating-elements{
  top:0;
  left:0;
  right:0;
  bottom:auto !important;
  width:100%;
}
body.template-category .js-item-product .item-floating-elements .labels{
  position:absolute;
  top:12px;
  left:12px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
body.template-category .js-item-product .label{
  margin-top:0;
  padding:5px 9px;
  font-family:var(--plp-body);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1;
}
/* % OFF → bordó (equivalente .tag-sale del mockup; el % lo llena el theme) */
body.template-category .js-item-product .js-offer-label{
  background:var(--plp-bordo) !important;
  color:var(--plp-cream-on-bordo) !important;
}
/* Sin stock → negro */
body.template-category .js-item-product .js-stock-label{
  background:#000 !important;
  color:#fff !important;
}
/* ENVÍO GRATIS: el mockup lo elimina (redundante con el adbar "Envíos gratis
   en toda la web"). UNA línea para revertir si el dueño lo quiere de vuelta. */
body.template-category .js-item-product .js-free-shipping-minimum-label{display:none !important;}
/* badge Set (markup nuevo opcional en labels.tpl / gating Twig) */
body.template-category .js-item-product .plp-label-set{
  background:#000 !important;
  color:#fff !important;
}

/* --- quickshop inline (hover desktop / js-item-buy-open mobile) ---
   El overlay real (.js-item-variants.item-variants) ancla al bottom del
   div 0-height .quickshop-variants-test = borde inferior de la imagen
   (geometría verificada live). bg ya es #000000B2 = rgba(0,0,0,.698). */
body.template-category .js-item-variants.item-variants{
  background:var(--plp-quick-overlay) !important;
  padding:14px 14px 16px;
  transition:visibility .34s ease,opacity .34s ease,transform .34s ease !important;
}
/* slide-up: 14px de viaje (no 101% — acá no hay overflow clip: el overlay
   cruzaría visiblemente el body de la card) */
body.template-category .js-item-variants.item-variants-hidden{transform:translateY(14px);}
body.template-category .js-quickshop-container:hover .js-item-variants.item-variants-hidden,
body.template-category .js-item-variants.item-variants-active,
body.template-category .js-item-variants.item-variants:hover{transform:translateY(0);}

/* labels de variante ("Talle"/"Color") → Aloe Vera 15px */
body.template-category .js-item-variants .form-label,
body.template-category .js-item-variants .name-variant-qs{
  font-family:var(--plp-display) !important;
  font-size:15px !important;
  font-weight:400 !important;
  color:#fff !important;
  text-transform:none !important;
  letter-spacing:.02em;
  margin:0 0 8px !important;
}
/* chips de variante (.js-insta-variant, bullet_variants ON live; los selects
   quedan d-none por el theme). leren fuerza width:70px + radius 6px !important
   → se pisa con especificidad mayor + !important. */
body.template-category .js-item-variants .js-insta-variant.btn-variant{
  width:auto !important;
  min-width:38px;
  margin:0 3px 6px;
  padding:7px 8px;
  font-family:var(--plp-body);
  font-size:12px;
  line-height:1.2;
  text-align:center;
  color:#fff;
  background:transparent;
  border:1px solid rgba(255,255,255,.55) !important;
  border-radius:0 !important;
  transition:border-color .15s,background .15s,color .15s;
}
body.template-category .js-item-variants .js-insta-variant.btn-variant:hover{border-color:#fff !important;}
body.template-category .js-item-variants .js-insta-variant.btn-variant.selected{
  background:#EEEEEE !important;
  color:#000 !important;
  border-color:#EEEEEE !important;
}
/* fila de chips: horizontal wrap (leren la ponía en columna) */
body.template-category .js-item-variants .quickshop-variants-container{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
}
/* AGREGAR AL CARRITO del quickshop */
body.template-category .js-item-variants .js-addtocart{
  background:transparent !important;
  border:0;
  border-bottom:1px solid transparent;
  color:#fff !important;
  font-family:var(--plp-body);
  font-size:12px;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:6px 0 5px;
  width:max-content !important;
  transition:border-color .2s,letter-spacing .2s;
}
body.template-category .js-item-variants .js-addtocart:hover{
  border-bottom-color:#fff;
  letter-spacing:.1em;
}
/* barra mobile "Agregar al carrito" (item-actions-inline, feature real que el
   mockup no tenía — se conserva, alineada al overlay) */
body.template-category .js-item-product .item-actions-inline{
  background-color:var(--plp-quick-overlay);
}
body.template-category .js-item-product .item-actions-inline .text-white{
  font-family:var(--plp-body);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* --- dots del slider nativo por card (settings.product_item_slider → activar
   en admin). Look .cc-dot del mockup: 5px blancos, activo scale 1.35, centrados
   bottom 9px. Dormido hasta que el setting esté ON. --- */
body.template-category .js-item-product .item-slider-pagination-container{
  position:absolute;
  left:0;
  right:0;
  bottom:9px;
  top:auto;
  width:auto;
  height:auto;
  margin:0;
  display:flex;
  justify-content:center;
  background:transparent;
  overflow:visible;
  pointer-events:none;
}
body.template-category .js-item-product .item-slider-pagination{
  position:static;
  transform:none;
  height:auto;
  background:transparent;
}
body.template-category .js-item-product .item-slider-pagination .swiper-pagination-bullet{
  position:static;
  left:0 !important;      /* pisa left:20px + two-bullets left:6px !important */
  width:5px;
  height:5px;
  margin:0 2.5px !important; /* pisa el margin:0 4px !important de leren */
  border-radius:50%;      /* excepción al reset de esquinas */
  background:rgba(255,255,255,.55);
  opacity:1;
  box-shadow:0 0 2px rgba(0,0,0,.35);
  transform:none;
  transition:background .2s,transform .2s;
}
body.template-category .js-item-product .item-slider-pagination .swiper-pagination-bullet-active{
  background:#fff;
  transform:scale(1.35);
}

/* --- body de card --- */
body.template-category .js-item-product .item-description{
  padding:13px 2px 14px; /* reemplaza el 15px 30px !important del inline viejo (se elimina) y el 15px 10px base */
}
body.template-category .js-item-product .item-link-quickshop{width:100%;}
body.template-category .js-item-product .js-item-name{
  font-family:var(--plp-display) !important;
  font-weight:600;
  font-size:21px;
  line-height:1.12;
  letter-spacing:.01em;
  color:var(--plp-ink);
  transition:color .2s;
}
body.template-category .js-item-product .item-link:hover .js-item-name{color:var(--plp-bordo);}

/* --- precios: jerarquía promo del mockup con flex order sobre los nodos
   EXISTENTES (js-compare-price-display va primero en el DOM; acá se demota
   a order:3 sin tocar markup — store.js los sigue actualizando igual) --- */
body.template-category .js-item-product .js-item-price-container{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 8px;
  margin-top:9px;
}
body.template-category .js-item-product .js-price-display{
  order:1;
  font-family:var(--plp-body);
  font-size:18px;
  font-weight:400;
  color:var(--plp-ink);
  letter-spacing:.01em;
}
body.template-category .js-item-product .js-compare-price-display{
  order:3;
  font-family:var(--plp-body);
  font-size:13px;
  color:var(--plp-muted);
  text-decoration:line-through;
  opacity:1;
  margin-right:0;
}
/* estado PROMO: el compare visible (server: style="display:inline-block";
   jQuery .show(): display:inline — nunca contiene "none") promociona al
   precio a bordó 600 20px */
body.template-category .js-item-product .js-compare-price-display:not([style*="none"]) ~ .js-price-display{
  color:var(--plp-bordo);
  font-weight:600;
  font-size:20px;
}
/* badge −% junto al precio (markup nuevo opcional del orquestador:
   <span class="plp-price-off">−N%</span> hermano dentro del price container;
   el dato sale del label offer nativo / compare price, NO hardcodear) */
body.template-category .js-item-product .plp-price-off{
  order:2;
  font-family:var(--plp-heading);
  font-weight:700;
  font-size:11px;
  letter-spacing:.02em;
  background:var(--plp-bordo);
  color:var(--plp-cream-on-bordo);
  padding:3px 7px;
  line-height:1;
  align-self:center;
}
/* línea transferencia (component payment-discount-price — activar
   settings.payment_discount_price en admin; clases verificadas en store.js:
   .js-payment-discount-price-product-container / .js-payment-discount-price-product) */
body.template-category .js-item-product .js-payment-discount-price-product-container{
  order:4;
  flex-basis:100%;
  margin-top:4px;
  font-family:var(--plp-body);
  font-size:11px;
  font-weight:400;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--plp-muted);
  line-height:1.3;
}
body.template-category .js-item-product .js-payment-discount-price-product-container .js-payment-discount-price-product,
body.template-category .js-item-product .js-payment-discount-price-product-container b{
  font-weight:600;
  color:var(--plp-bordo);
}
/* cuotas (component installments, YA activo live — texto/valores del dato real) */
body.template-category .js-item-product .item-installments,
body.template-category .js-item-product .item-installments span{
  font-family:var(--plp-heading) !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  color:#8a8a8a !important;
  letter-spacing:.01em;
  line-height:1.35;
}
body.template-category .js-item-product .item-installments{margin-top:5px;}

/* mobile type scale */
@media (max-width:767.98px){
  body.template-category .js-item-product .js-item-name{font-size:18px;}
  body.template-category .js-item-product .js-price-display{font-size:16px;}
  body.template-category .js-item-product .js-compare-price-display:not([style*="none"]) ~ .js-price-display{font-size:18px;}
}
@media (max-width:380px){
  body.template-category .js-item-product .js-item-name{font-size:16px;}
}

/* ==========================================================================
   7. EMPTY STATE (products-list.tpl → h2[data-component="filter.message"])
   ========================================================================== */
body.template-category .js-category-body h2[data-component="filter.message"]{
  grid-column:1/-1;
  text-align:center;
  padding:70px 20px;
  font-family:var(--plp-display);
  font-size:24px;
  font-weight:400;
  color:var(--plp-ink);
}
/* el CTA "Limpiar filtros" del mockup = js-remove-all-filters (chips arriba);
   si el orquestador agrega un botón junto al mensaje: */
body.template-category .js-category-body .plp-empty-clear{
  display:inline-block;
  margin-top:16px;
  font-family:var(--plp-body);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:#000;
  color:#fff;
  border:0;
  padding:12px 22px;
}

/* ==========================================================================
   8. MOBILE FILTERBAR — el trigger real vive dentro de .js-category-controls
   ========================================================================== */
@media (max-width:767.98px){
  body.template-category .js-category-controls{
    top:var(--plp-sticky-top-sm) !important; /* FIX: el inline top del JS (20px) dejaba la barra tapada por el header */
    padding:14px 16px 10px;
  }
  body.template-category .js-category-controls.is-sticky{
    padding:8px 16px;
    background:rgba(255,255,255,.86);
    -webkit-backdrop-filter:blur(10px) saturate(1.05);
    backdrop-filter:blur(10px) saturate(1.05);
    border-bottom:1px solid var(--plp-hairline);
  }
  body.template-category .js-category-controls .page-header h1.h4{
    font-size:23px !important;
  }
  body.template-category .js-category-controls .page-header h1.h4::after{margin-top:8px;}
  /* el trigger único viejo ("Filtrar y ordenar") se OCULTA en mobile — lo
     reemplaza la fila de dos botones .plp-mfbar (markup en category.tpl).
     Solo se esconde el anchor; su wrapper queda (contiene el modal embed). */
  body.template-category .plp-legacy-trigger-wrap a.js-modal-open.btn{
    display:none;
  }
  /* fila de DOS botones (markup nuevo del orquestador):
     <div class="plp-mfbar"><button class="plp-mfbar-btn js-modal-open" data-toggle="#nav-filters" ...>FILTRAR</button>
     <button class="plp-mfbar-btn plp-mfbar-sort js-modal-open" data-toggle="#nav-filters" ...>ORDENAR</button></div>
     (ORDENAR ancla a la sección de orden del mismo modal — helper JS aparte) */
  body.template-category .plp-mfbar{
    display:flex;
    align-items:stretch;
    margin:10px -16px 0;
    border-top:1px solid var(--plp-line-soft);
  }
  body.template-category .plp-mfbar-btn{
    flex:1;
    background:none;
    border:0;
    border-left:1px solid var(--plp-line-soft);
    font-family:var(--plp-body);
    font-size:12.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--plp-ink);
    padding:15px 10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
  }
  body.template-category .plp-mfbar-btn:first-child{border-left:0;}
  body.template-category .plp-mfbar-btn:active{color:var(--plp-bordo);}
  body.template-category .plp-mfbar-btn .plp-filter-badge{margin-left:0;}
}
@media (min-width:768px){
  body.template-category .plp-mfbar{display:none;}
}

/* ==========================================================================
   9. MODAL #nav-filters — restyle desktop + BOTTOM-SHEET frosted mobile
      Solo CSS sobre clases/estados que el JS ya pone (modal-show,
      display inline por jQuery .show()/.hide()). El modal se detacha a
      <body> al abrir → scope body.template-category #nav-filters sigue
      aplicando (body conserva la clase).
   ========================================================================== */
/* ---- tipografía/controles comunes (ambos breakpoints) ---- */
body.template-category #nav-filters{background:var(--plp-paper);}
body.template-category #nav-filters .modal-body{padding:0 24px 24px !important;}
/* título del head (el <style> inline de filters-modals lo dejaba uppercase 20px) */
body.template-category #nav-filters .modal-header .col{
  font-family:var(--plp-display) !important;
  font-size:23px !important;
  font-weight:500 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
  text-align:left;
}
body.template-category #nav-filters .modal-close-icon{width:21px;height:21px;}

/* subtítulos de grupo */
body.template-category #nav-filters .subtitle,
body.template-category #nav-filters .js-accordion-container .subtitle,
body.template-category #nav-filters .js-price-filter-container .subtitle{
  font-family:var(--plp-display) !important;
  font-size:16px !important;
  font-weight:500 !important;
  letter-spacing:.02em !important;
  text-transform:none;
  color:var(--plp-ink) !important;
  margin:0 0 14px;
}
body.template-category #nav-filters .filters-title{display:none;} /* "Filtrar por" redundante con el head */
body.template-category #nav-filters .divider{
  border:0;
  border-top:1px solid var(--plp-line-soft);
  margin:20px 0 0;
  padding:0;
}

/* quick-links de categorías → pills */
body.template-category #nav-filters ul.js-accordion-container{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:0;
  padding:0;
}
body.template-category #nav-filters ul.js-accordion-container .category-filter{
  margin:0 !important;
  list-style:none;
  display:inline-flex;
}
body.template-category #nav-filters .category-filter .btn-link{
  font-family:var(--plp-body) !important;
  font-size:13px !important;
  font-weight:400 !important;
  letter-spacing:.03em;
  color:var(--plp-ink);
  background:rgba(255,255,255,.5);
  border:1px solid var(--plp-line);
  padding:11px 16px;
  text-decoration:none;
  transition:border-color .18s;
}
body.template-category #nav-filters .category-filter .btn-link:hover{border-color:var(--plp-muted-3);}
/* el acordeón "Ver todos" envuelve los items 9+ en un div display:block:
   los pills internos siguen fluyendo inline */
body.template-category #nav-filters .js-accordion-content{width:100%;}
body.template-category #nav-filters .js-accordion-content .category-filter,
body.template-category #nav-filters .js-accordion-content li{
  display:inline-flex;
  margin:0 9px 9px 0 !important;
}
body.template-category #nav-filters .js-accordion-toggle{
  font-family:var(--plp-body);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--plp-bordo);
  background:none;
  border:0;
  text-decoration:underline;
  padding:6px 0;
}

/* ---- COLOR → dots (hooks: label[data-filter-name="Color"][data-filter-value]) ---- */
body.template-category #nav-filters [data-component="list.filter-color"]{
  display:flex;
  flex-wrap:wrap;
  gap:16px 18px;
}
body.template-category #nav-filters [data-component="list.filter-color"] .subtitle{flex-basis:100%;}
body.template-category #nav-filters [data-component="list.filter-color"] .js-accordion-content{
  display:flex;
  flex-wrap:wrap;
  gap:16px 18px;
}
body.template-category #nav-filters label[data-filter-name="Color"]{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  min-width:46px;
  margin:0;
  padding:0;
  cursor:pointer;
}
body.template-category #nav-filters label[data-filter-name="Color"] input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
body.template-category #nav-filters label[data-filter-name="Color"] .checkbox{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  margin-bottom:0;   /* base theme: margin-bottom 20px */
  padding-left:0;    /* base theme: padding-left 25px (espacio del checkbox) */
}
/* el checkbox-icon ES el dot (base theme: absolute 14px con border — se re-hace) */
body.template-category #nav-filters label[data-filter-name="Color"] .checkbox-icon{
  position:static;
  width:30px;
  height:30px;
  border-radius:50% !important; /* excepción al reset de esquinas */
  border:0 !important;          /* base: 1px solid var(--main-foreground) */
  background:#cfc9c0; /* fallback neutro para valores sin mapa */
  box-shadow:inset 0 0 0 1px rgba(20,14,12,.18),0 1px 3px -1px rgba(20,14,12,.25);
  transition:transform .2s ease,box-shadow .2s ease;
  display:block;
}
/* tick nativo del theme fuera (el seleccionado se marca con doble ring) */
body.template-category #nav-filters label[data-filter-name="Color"] .checkbox-icon::after{display:none !important;}
body.template-category #nav-filters label[data-filter-name="Color"]:hover .checkbox-icon{transform:scale(1.08);}
body.template-category #nav-filters label[data-filter-name="Color"] input:checked ~ .checkbox .checkbox-icon,
body.template-category #nav-filters label[data-filter-name="Color"] input:checked + .checkbox .checkbox-icon{
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.85),0 0 0 2px var(--plp-bordo);
}
body.template-category #nav-filters label[data-filter-name="Color"] .checkbox-text{
  font-family:var(--plp-body) !important;
  font-size:11px !important;
  letter-spacing:.02em !important;
  color:var(--plp-muted-2) !important;
  text-align:center;
  line-height:1.2;
}
body.template-category #nav-filters label[data-filter-name="Color"] input:checked ~ .checkbox .checkbox-text,
body.template-category #nav-filters label[data-filter-name="Color"] input:checked + .checkbox .checkbox-text{
  color:var(--plp-bordo) !important;
  font-weight:600;
}
/* mapa nombre→hex (los filter values de TN son texto plano; 13 valores live,
   match EXACTO case-sensitive con acentos) */

/* ---- TALLE → chips segmentados ---- */
body.template-category #nav-filters [data-component="list.filter-size"]{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
body.template-category #nav-filters [data-component="list.filter-size"] .subtitle{flex-basis:100%;}
body.template-category #nav-filters label[data-filter-name="Talle"]{
  display:inline-flex;
  margin:0;
  cursor:pointer;
}
body.template-category #nav-filters label[data-filter-name="Talle"] input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
body.template-category #nav-filters label[data-filter-name="Talle"] .checkbox{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:0;
  padding-left:0;
}
body.template-category #nav-filters label[data-filter-name="Talle"] .checkbox-icon{display:none !important;}
body.template-category #nav-filters label[data-filter-name="Talle"] .checkbox-text{
  font-family:var(--plp-body) !important;
  font-size:13.5px !important;
  letter-spacing:.03em !important;
  color:var(--plp-ink) !important;
  background:rgba(255,255,255,.5);
  border:1px solid var(--plp-line);
  min-width:52px;
  padding:13px 16px;
  text-align:center;
  transition:border-color .18s,background .18s,color .18s;
}
body.template-category #nav-filters label[data-filter-name="Talle"]:hover .checkbox-text{border-color:var(--plp-muted-3);}
body.template-category #nav-filters label[data-filter-name="Talle"] input:checked ~ .checkbox .checkbox-text,
body.template-category #nav-filters label[data-filter-name="Talle"] input:checked + .checkbox .checkbox-text{
  background:var(--plp-ink);
  color:#fff !important;
  border-color:var(--plp-ink);
}
/* otros grupos de filtro (ej. brand "Lua Femme") heredan el look chip de Talle
   sin regla extra: los labels sin data-filter-name mapeado quedan con el
   checkbox nativo del theme (aceptado, un solo valor live) */

/* ---- PRECIO nativo (component price-filter, min/max) ---- */
body.template-category #nav-filters .js-price-filter-container .form-group{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
body.template-category #nav-filters .js-price-filter-container .form-label{
  font-family:var(--plp-body) !important;
  font-size:11px !important;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--plp-muted) !important;
  margin-bottom:4px;
}
body.template-category #nav-filters .js-price-filter-input{
  width:110px !important;
  height:auto !important;
  font-family:var(--plp-body);
  font-size:14px;
  border:1px solid var(--plp-line);
  background:rgba(255,255,255,.6);
  padding:11px 12px;
}
body.template-category #nav-filters .js-price-filter-btn{
  width:auto !important;
  height:auto !important;
  font-family:var(--plp-body);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:var(--plp-ink);
  color:#fff;
  border:0;
  padding:12px 18px;
}
body.template-category #nav-filters .js-price-filter-btn.disabled{opacity:.35;}

/* ---- sort dentro del modal (bloque d-md-none, mobile) ---- */
body.template-category #nav-filters .modal-body .d-block .form-group{width:100%;}
body.template-category #nav-filters .modal-body .d-block .js-sort-by{
  width:100% !important;
  height:auto !important;
  font-family:var(--plp-body) !important;
  font-size:13.5px !important;
  font-weight:400 !important;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--plp-ink) !important;
  border:1px solid var(--plp-line) !important;
  background-color:transparent;
  padding:13px 34px 13px 14px;
  -webkit-appearance:none;
  appearance:none;
  background-image:var(--plp-chevron);
  background-repeat:no-repeat;
  background-position:right 14px center;
}
body.template-category #nav-filters .modal-body .d-block .subtitle{
  display:block !important; /* el inline viejo lo ocultaba; en la sheet titula la sección Ordenar */
}

/* ---- overlays de aplicando/ordenando: frosted suave ---- */
body.template-category #nav-filters .filters-overlay{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
body.template-category #nav-filters .filters-updating-message .h5{
  font-family:var(--plp-display);
  font-weight:500;
}

/* ---- foot sticky de la sheet (markup nuevo del orquestador al final del
   modal_body: <div class="plp-sheet-foot"><a class="js-remove-all-filters plp-sheet-clear">Limpiar</a>
   <a class="js-modal-close plp-sheet-apply">Ver productos</a></div>) ---- */
body.template-category #nav-filters .plp-sheet-foot{
  position:sticky;
  bottom:0;
  display:flex;
  gap:12px;
  margin:20px -24px 0;
  padding:16px 24px calc(16px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--plp-hairline);
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
body.template-category #nav-filters .plp-sheet-clear{
  flex:0 0 auto;
  background:none;
  border:1px solid var(--plp-line);
  color:var(--plp-ink);
  font-family:var(--plp-body);
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:15px 22px;
  text-decoration:none;
  transition:border-color .2s,color .2s;
}
body.template-category #nav-filters .plp-sheet-clear:hover{border-color:var(--plp-bordo);color:var(--plp-bordo);}
body.template-category #nav-filters .plp-sheet-apply{
  flex:1;
  text-align:center;
  background:var(--plp-bordo);
  color:var(--plp-cream-on-bordo);
  border:0;
  font-family:var(--plp-body);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:15px;
  text-decoration:none;
  transition:background .25s;
}
body.template-category #nav-filters .plp-sheet-apply:hover{background:var(--plp-bordo-deep);}

/* ---- MOBILE <768: el modal-right (drawer derecho 80%) SE VUELVE bottom-sheet
   frosted. El JS solo togglea .modal-show + display; la geometría es CSS pura.
   El theme anima right:-100%→0: acá right queda fijo y anima transform. ---- */
@media (max-width:767.98px){
  body.template-category #nav-filters.modal-right{
    top:auto !important;
    bottom:0;
    left:0;
    right:0 !important;
    width:100%;
    height:auto;
    max-height:84vh;
    display:flex;
    flex-direction:column;
    overflow:hidden;              /* el scroll vive en .modal-body */
    background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:blur(18px) saturate(1.1);
    backdrop-filter:blur(18px) saturate(1.1);
    border-top:1px solid rgba(255,255,255,.55);
    border-radius:18px 18px 0 0;  /* única excepción "moderna" al reset (el reset apunta a descendientes, no al modal) */
    box-shadow:0 -24px 60px -28px rgba(20,14,12,.5);
    transform:translateY(102%);
    transition:transform .46s cubic-bezier(.16,1,.3,1);
  }
  body.template-category #nav-filters.modal-right.modal-show{
    right:0 !important;
    transform:translateY(0);
  }
  /* head: grip (::before) + título; todo el header ya es js-modal-close →
     tap en el grip/head cierra (paridad con el mockup) */
  body.template-category #nav-filters .modal-header{
    padding:0 24px 14px !important; /* pisa el 80px 20px 40px 30px !important del inline de filters-modals */
    border-bottom:1px solid var(--plp-hairline);
    flex:0 0 auto;
  }
  body.template-category #nav-filters .modal-header::before{
    content:"";
    display:block;
    width:38px;
    height:4px;
    border-radius:999px !important;
    background:rgba(20,14,12,.22);
    margin:11px auto 12px;
  }
  body.template-category #nav-filters .modal-body{
    flex:1 1 auto;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:8px 24px 6px !important;
  }
  /* secciones con aire de sheet */
  body.template-category #nav-filters .modal-body .d-block{margin-bottom:0 !important;padding:14px 0 20px;border-bottom:1px solid var(--plp-line-soft);}
  /* scrim liviano premium (solo mobile) */
  body.template-category .js-modal-overlay[data-modal-id="#nav-filters"]{
    background:rgba(20,14,12,.18);
  }
  /* tap targets ≥44px ya cubiertos: cat-pill 11px+13px padding, seg-chip 13px 16px, dot 30px+label */
}

/* ---- DESKTOP ≥768: drawer izquierdo (modal-left-md docked 500px) limpio ---- */
@media (min-width:768px){
  body.template-category #nav-filters{
    background:var(--plp-paper);
    box-shadow:24px 0 60px -40px rgba(0,0,0,.35);
  }
  body.template-category #nav-filters .modal-header{
    padding:34px 30px 20px !important;
    border-bottom:1px solid var(--plp-line-soft);
  }
  body.template-category #nav-filters .modal-body{padding:10px 30px 30px !important;}
}

/* ==========================================================================
   10. FEATURED SETS — "shop the look" (.plp-fsets/.plp-look*) y
   11. VIDEO MOMENT (.plp-vm*)
   CSS listo para el markup del snipplet administrable del otro agente.
   CONTRATO DE CLASES (usar EXACTAS):
   .plp-fsets > .plp-look ( .plp-look-media > img.plp-lm + img.plp-lh +
     span.plp-look-flag [texto único administrable] ) +
     ( .plp-look-content > p.plp-look-eyebrow + h3 + ul.plp-look-pieces >
       li.plp-piece > a ( span.plp-piece-label ) + span.plp-piece-price +
       p.plp-look-piece-summary + p.plp-look-note + p.plp-look-save >
       span.plp-look-off + div.plp-look-priceline > span.plp-look-now +
       span.plp-look-was + p.plp-look-cuotas + p.plp-look-transfer +
       div.plp-look-cta > a.plp-bundle-btn )
   .plp-vm > video + .plp-vm-shade + span.plp-vm-flag + button.plp-vm-mute +
     .plp-vm-content > p.plp-vm-eyebrow + h3 (span.plp-vm-amp) +
     .plp-vm-links > a.plp-vm-link
   SIN corazones wishlist (decisión dueño). Colocar FUERA de .js-product-table
   (antes del grid) para no pelear con hybridScroll.
   ========================================================================== */
body.template-category .plp-fsets{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:4px 0 16px;
  align-items:stretch;
}
/* la banda vive DENTRO de .js-product-table (CSS grid) → fila full-width */
body.template-category .js-product-table .plp-fsets{grid-column:1/-1;}
body.template-category .plp-fsets .plp-look{height:100%;}
body.template-category .plp-fsets .plp-look:first-child .plp-look-content h3{font-size:34px;}
body.template-category .plp-fsets .plp-look:first-child .plp-look-flag{
  background:var(--plp-bordo);
  color:var(--plp-cream-on-bordo);
  border-color:transparent;
}
body.template-category .plp-look{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  background:var(--plp-paper);
  border:1px solid var(--plp-hairline);
  overflow:hidden;
  min-height:0;
}
body.template-category .plp-look-media{position:relative;overflow:hidden;background:#1c1614;}
body.template-category .plp-look-media .plp-lm,
body.template-category .plp-look-media .plp-lh{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 26%;
  transition:opacity .55s ease,transform .8s ease;
}
body.template-category .plp-fsets .plp-look:nth-child(2) .plp-look-media .plp-lm,
body.template-category .plp-fsets .plp-look:nth-child(2) .plp-look-media .plp-lh{object-position:50% 8%;}
body.template-category .plp-look-media .plp-lh{opacity:0;}
body.template-category .plp-look:hover .plp-look-media .plp-lm{opacity:0;transform:scale(1.05);}
body.template-category .plp-look:hover .plp-look-media .plp-lh{opacity:1;transform:scale(1.05);}
body.template-category .plp-look-flag{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  background:rgba(255,255,255,.92);
  color:var(--plp-bordo);
  border:1px solid rgba(107,31,44,.28);
  box-shadow:0 2px 10px -4px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  white-space:nowrap;
  font-family:var(--plp-body);
  font-weight:600;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:6px 10px;
}
/* (comentario Twig removido — ver .tpl de la workdir) */
body.template-category .plp-look-content{padding:26px 24px;display:flex;flex-direction:column;}
body.template-category .plp-look-content .plp-look-eyebrow{
  font-family:var(--plp-body);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--plp-muted);
  margin:0 0 7px;
}
body.template-category .plp-look-content h3{
  font-family:var(--plp-display);
  font-weight:600;
  font-size:30px;
  line-height:1.04;
  margin:0 0 4px;
  color:var(--plp-ink);
}
body.template-category .plp-look-content h3 a{color:inherit;text-decoration:none;}
body.template-category .plp-look-content h3 a:hover{color:var(--plp-bordo);}
body.template-category .plp-look-pieces{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:0 0 auto;
}
body.template-category .plp-look-piece-summary{display:none;}
body.template-category .plp-look-note{
  margin:auto 0;
  padding-top:16px;
  border-top:1px solid var(--plp-line-soft);
  font-family:var(--plp-body);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--plp-muted);
  display:flex;
  align-items:center;
  gap:9px;
}
body.template-category .plp-look-note::before{
  content:"";
  width:18px;
  height:1px;
  background:var(--plp-bordo);
  flex:0 0 auto;
}
body.template-category .plp-piece{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--plp-line-soft);
  padding:9px 0;
}
body.template-category .plp-piece a{
  font-family:var(--plp-body);
  font-size:14px;
  color:#222;
  text-decoration:none;
  transition:color .2s;
}
body.template-category .plp-piece a:hover{color:var(--plp-bordo);}
body.template-category .plp-piece .plp-piece-label{
  font-family:var(--plp-body);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--plp-muted);
  display:block;
  margin-bottom:1px;
}
body.template-category .plp-piece .plp-piece-price{
  font-family:var(--plp-body);
  font-size:13px;
  color:var(--plp-muted-3);
  white-space:nowrap;
}
body.template-category .plp-look-save{
  margin-top:16px;
  font-family:var(--plp-heading);
  font-size:13px;
  font-weight:600;
  color:var(--plp-bordo);
  letter-spacing:.01em;
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}
body.template-category .plp-look-off{
  font-family:var(--plp-heading);
  font-weight:700;
  font-size:12px;
  letter-spacing:.02em;
  background:var(--plp-bordo);
  color:var(--plp-cream-on-bordo);
  padding:4px 9px;
  line-height:1;
}
body.template-category .plp-look-priceline{display:flex;align-items:baseline;gap:11px;margin-top:11px;}
body.template-category .plp-look-now{
  font-family:var(--plp-heading);
  font-weight:600;
  font-size:29px;
  line-height:1;
  color:var(--plp-bordo);
  letter-spacing:.005em;
}
body.template-category .plp-look-was{
  font-family:var(--plp-body);
  font-size:13px;
  color:var(--plp-muted);
  text-decoration:line-through;
}
body.template-category .plp-look-cuotas{
  font-family:var(--plp-heading);
  font-size:12px;
  font-weight:600;
  color:#8a8a8a;
  margin-top:8px;
  letter-spacing:.01em;
}
body.template-category .plp-look-transfer{
  font-family:var(--plp-body);
  font-size:11px;
  color:var(--plp-muted);
  margin-top:5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  line-height:1.3;
}
body.template-category .plp-look-transfer b{font-weight:600;color:var(--plp-muted-3);}
body.template-category .plp-look-cta{margin-top:auto;}
body.template-category .plp-bundle-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  background:#000;
  color:#fff;
  border:0;
  font-family:var(--plp-body);
  font-size:12px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:15px 16px;
  margin-top:18px;
  text-decoration:none;
  transition:background .25s,gap .25s;
}
body.template-category .plp-bundle-btn:hover{background:var(--plp-bordo);gap:16px;}

/* video moment */
body.template-category .plp-vm{
  position:relative;
  overflow:hidden;
  background:#1c1614;
  aspect-ratio:2/3;
  display:block;
}
body.template-category .js-product-table .plp-vm{grid-column:span 2;} /* el tile vive dentro del grid (product_grid.tpl, tras la 2da card) */
body.template-category .plp-vm video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
body.template-category .plp-vm-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(15,11,9,.7) 0%,rgba(15,11,9,.05) 45%);
  z-index:1;
}
body.template-category .plp-vm-flag{
  position:absolute;
  top:14px;
  left:14px;
  z-index:3;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-family:var(--plp-body);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:6px 10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
body.template-category .plp-vm-flag svg{width:11px;height:11px;}
body.template-category .plp-vm-content{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
  padding:26px 24px;
  color:#fff;
}
body.template-category .plp-vm-eyebrow{
  font-family:var(--plp-body);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.85;
  margin:0 0 6px;
}
body.template-category .plp-vm-content h3{
  font-family:var(--plp-display);
  font-weight:600;
  font-size:30px;
  line-height:1.04;
  margin:0 0 4px;
  color:#fff;
}
body.template-category .plp-vm-content h3 .plp-vm-amp{font-weight:300;opacity:.7;}
body.template-category .plp-vm-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:14px;}
body.template-category .plp-vm-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--plp-body);
  font-size:12px;
  font-weight:500;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.45);
  padding-bottom:3px;
  text-decoration:none;
  transition:gap .25s,border-color .2s;
  position:relative;
  z-index:3;
}
body.template-category .plp-vm-link:hover{gap:11px;border-bottom-color:#fff;}
body.template-category .plp-vm-mute{
  position:absolute;
  top:12px;
  right:12px;
  z-index:4;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
}
body.template-category .plp-vm-mute svg{width:18px;height:18px;}

/* fsets/vm responsive */
@media (max-width:1100px){
  body.template-category .plp-fsets{grid-template-columns:1fr;}
}
@media (max-width:767.98px){
  body.template-category .plp-fsets{grid-template-columns:1fr;gap:10px;}
  body.template-category .plp-fsets .plp-look:first-child .plp-look-content h3{font-size:23px;}
  body.template-category .plp-look{grid-template-columns:1.05fr 1.15fr;}
  body.template-category .plp-look-media{aspect-ratio:3/4;}
  body.template-category .plp-look-flag{
    font-size:9px;
    letter-spacing:.08em;
    padding:5px 8px;
    white-space:nowrap;
    z-index:4;
  }
  body.template-category .plp-look-content{padding:16px 16px;}
  body.template-category .plp-look-content h3{font-size:21px;}
  body.template-category .plp-look-pieces{display:none;}
  body.template-category .plp-look-note{display:none;}
  body.template-category .plp-look-piece-summary{
    display:block;
    font-family:var(--plp-body);
    font-size:12px;
    color:var(--plp-muted);
    margin-top:10px;
    letter-spacing:.02em;
  }
  body.template-category .plp-look-save{margin-top:12px;font-size:12px;}
  body.template-category .plp-look-priceline{margin-top:8px;}
  body.template-category .plp-look-now{font-size:22px;}
  body.template-category .plp-bundle-btn{padding:13px 14px;margin-top:14px;font-size:11px;}
  body.template-category .plp-vm-content h3{font-size:24px;}
}

/* ==========================================================================
   12. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  body.template-category .js-item-product .item-image-featured,
  body.template-category .js-item-product .item-image-secondary,
  body.template-category .js-item-variants.item-variants,
  body.template-category #nav-filters.modal-right,
  body.template-category .plp-look-media .plp-lm,
  body.template-category .plp-look-media .plp-lh{
    transition-duration:.05ms !important;
  }
}
/* ============================================================
   PRE-INIT de sliders per-card (fix 2026-08-05, screenshot Alexander):
   LS.productItemSlider() inicializa por viewport/resize y en cargas
   directas deja cards con las slides en fila + caja gris. Hasta que
   swiper marque la card como inicializada, se ve SOLO la primera
   slide a ancho completo = card normal de 1 foto. Progressive
   enhancement puro; cuando LS inicializa, el slider toma el control.
   (swiper viejo usa .swiper-container-initialized — store.js:2119 —
   y swiper nuevo .swiper-initialized: cubrimos ambos.)
   ============================================================ */
body.template-category .js-product-item-slider-container-private:not(.swiper-container-initialized):not(.swiper-initialized) .js-product-item-slider-slide-private{display:none;}
body.template-category .js-product-item-slider-container-private:not(.swiper-container-initialized):not(.swiper-initialized) .js-product-item-slider-slide-private:first-child{display:block;width:100%;}
body.template-category .js-product-item-slider-container-private:not(.swiper-container-initialized):not(.swiper-initialized) .js-product-item-slider-pagination-container-private{display:none;}
body.template-category .js-product-item-slider-container-private:not(.swiper-container-initialized):not(.swiper-initialized) .item-slider-controls-container{display:none;}
/* misma defensa via clases genéricas de swiper (scoped a la grilla) */
body.template-category .js-product-table .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .swiper-slide{display:none;}
body.template-category .js-product-table .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .swiper-slide:first-child{display:block;width:100%;}
body.template-category .js-product-table .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .swiper-button-prev,
body.template-category .js-product-table .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .swiper-button-next,
body.template-category .js-product-table .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .swiper-pagination{display:none;}

/* ============================================================
   FIX rebote de scroll (2026-08-05, medido live): .js-category-controls
   (sticky, contiene masthead+rail) se comprime 349→238px al scrollear;
   el scroll-anchoring del browser compensa el salto tirando el scroll
   111px para atrás → cruce del umbral de nuevo → expande → loop que
   "rebota y no deja bajar". Sin anclaje, la compresión sigue (diseño)
   pero el scroll pasa de largo.
   ============================================================ */
body.template-category{overflow-anchor:none;}
body.template-category .js-product-table{overflow-anchor:none;}

/* ============================================================
   Compactación vertical del techo (feedback Alexander 2026-08-05):
   menos aire entre header y primera card (~-50px desktop).
   ============================================================ */
body.template-category .js-category-controls{padding-top:6px;padding-bottom:6px;}
body.template-category .plp-rail{gap:6px 8px;}

/* ============================================================
   STICKY = SOLO BARRA DE FILTROS (fidelidad al mockup aprobado;
   feedback Alexander 2026-08-05): al scrollear, título+eyebrow+
   breadcrumbs se van con la página (display:none en is-sticky) y
   queda la fila Filtrar/Ordenar + chips slim (~92px vs 238px).
   ============================================================ */
body.template-category .js-category-controls.is-sticky .plp-masthead{display:none;}
body.template-category .js-category-controls.is-sticky .breadcrumbs{display:none;}
body.template-category .js-category-controls.is-sticky .plp-rail{margin-top:2px;padding-top:4px;padding-bottom:4px;}
body.template-category .js-category-controls.is-sticky .plp-rail-label{display:none;}
body.template-category .js-category-controls.is-sticky .plp-cat-chip{padding:4px 9px;font-size:11.5px;}

/* ============================================================
   Compactación 2 (screenshot Alexander 2026-08-05): la columna del
   título (.columna-filtros) trae mb-md-5 del theme = 48px de aire
   muerto entre masthead y la fila FILTRAR. + título/eyebrow/barra
   un punto más chicos. (~-50px extra en desktop)
   ============================================================ */
body.template-category .js-category-controls .columna-filtros{margin-bottom:10px !important;}
body.template-category .js-category-controls .page-header h1.h4{font-size:22px !important;}
body.template-category .js-category-controls .plp-eyebrow{font-size:10px;margin-bottom:2px;}
body.template-category .js-category-controls .page-header h1.h4::after{margin:6px 0 0;}
body.template-category .plp-rail{margin-top:6px;}

/* ============================================================
   Chips SIEMPRE en una fila (pedido Alexander): rail sin wrap,
   chips con scroll horizontal sin scrollbar visible.
   ============================================================ */
body.template-category .plp-rail{flex-wrap:nowrap;}
body.template-category .plp-cat-chips{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;min-width:0;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
body.template-category .plp-cat-chips::-webkit-scrollbar{display:none;}
body.template-category .plp-cat-chip{flex:0 0 auto;white-space:nowrap;}

/* ============================================================
   Flechas del rail de chips (pedido Alexander): visibles SOLO
   cuando hay más chips ocultos de ese lado; click desliza suave.
   ============================================================ */
body.template-category .plp-rail-arrow{flex:0 0 auto;display:flex;visibility:hidden;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:1px solid var(--plp-line);background:#fff;color:#333;font-size:17px;line-height:1;cursor:pointer;}
body.template-category .plp-rail-arrow:hover{border-color:#999;}
/* visibility (no display): el espacio queda SIEMPRE reservado → sin salto de
   layout al aparecer/desaparecer y sin feedback-loop con la cuenta de overflow */
body.template-category .plp-rail.can-left .plp-rail-arrow-left{visibility:visible;}
body.template-category .plp-rail.can-right .plp-rail-arrow-right{visibility:visible;}

/* ==========================================================================
   13. CORRECCIONES JEFA 2026-08-05 — plp-styles-10
       (a) márgenes laterales mobile  (b) jerarquía de precios en cards
       (c) lightbox de video con audio
   ========================================================================== */

/* --- 13a. Mobile: margen lateral simétrico. La col `pl-0` de products-list
       dejaba la grilla en −1px del borde izquierdo (container 14px − row 15px);
       restaurar el padding izquierdo en mobile ⇒ 14px parejos de cada lado. --- */
@media (max-width: 767.98px){
  body.template-category div[data-store^="category-grid-"]{
    padding-left: 17px !important;
    padding-right: 17px !important;
  }
}

/* --- 13b. Jerarquía de precios en cards: la OFERTA (precio con Transferencia,
       el único precio-oferta visible en cards) manda; el precio de lista pasa
       a secundario. La democión del precio de lista va con guard :has() ⇒ si
       una card no tiene línea de oferta (p.ej. Sale, que usa su propia banda),
       su precio conserva la jerarquía original. Fallback en browsers sin :has():
       queda el tamaño previo — se degrada, no rompe. --- */
body.template-category .js-item-product .payment-discount-price-product-container{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:0 5px;
  margin-top:3px;
  font-size:11px;
  color:#777;
}
body.template-category .js-item-product .payment-discount-price-product{
  font-family:var(--plp-heading);
  font-size:18px;
  font-weight:600;
  line-height:1;
  color:var(--plp-bordo);
  letter-spacing:.005em;
}
body.template-category .js-item-product:has(.payment-discount-price-product-container) .item-price{
  font-size:13px;
  font-weight:400;
  color:#777;
}
body.template-category .js-item-product .price-compare{font-size:12px;}
@media (max-width: 767.98px){
  body.template-category .js-item-product .payment-discount-price-product{font-size:16px;}
  body.template-category .js-item-product:has(.payment-discount-price-product-container) .item-price{font-size:12px;}
}

/* --- 13c. Video moment: botón PARLANTE arriba-derecha (corrección jefa
       2026-08-05 v2 — reemplaza el lightbox de la v1). El tile NO es clickeable;
       el sonido se activa/desactiva solo con el botón .plp-vm-mute (base ya
       definida en §11); los links a producto siguen intactos. --- */
body.template-category .plp-vm-mute{border-radius:50%;cursor:pointer;padding:0;}
body.template-category .plp-vm-mute:hover{background:rgba(0,0,0,.65);}
body.template-category .plp-vm-mute .plp-vm-mute-on{display:none;}
body.template-category .plp-vm.plp-sound-on .plp-vm-mute .plp-vm-mute-on{display:block;}
body.template-category .plp-vm.plp-sound-on .plp-vm-mute .plp-vm-mute-off{display:none;}

/* --- 13d. Cuotas: destacar SOLO "12 cuotas" y el precio; el resto de la
       oración en gris (base gris en §5 cards / §10 sets; acá los spans
       destacados). .plp-cuotas-word la envuelve el JS del snipplet. --- */
body.template-category .js-item-product .item-installments .product-installment-amount,
body.template-category .js-item-product .item-installments .product-installment-value,
body.template-category .js-item-product .item-installments .plp-cuotas-word,
body.template-category .plp-look-cuotas span.product-installment-amount,
body.template-category .plp-look-cuotas span.product-installment-value,
body.template-category .plp-look-cuotas span.plp-cuotas-word{
  color:var(--plp-bordo) !important;
}

/* 13d-bis: en los SETS el span del medio no hereda el gris del contenedor
   (regla del theme con más peso) — gris explícito con !important; los spans
   destacados de arriba ya llevan !important bordó y siguen ganando. */
body.template-category .plp-look-cuotas .product-installments,
body.template-category .plp-look-cuotas .product-installments span{
  color:#8a8a8a !important;
}
body.template-category .plp-look-cuotas span.product-installment-amount,
body.template-category .plp-look-cuotas span.product-installment-value,
body.template-category .plp-look-cuotas span.plp-cuotas-word{
  color:var(--plp-bordo) !important;
}

/* 13e: línea de transferencia en los SETS (component payment-discount-price
   con container plp-look-transfer — base 11px uppercase muted en §10):
   el monto un toque más marcado, eco de la jerarquía de las cards. */
body.template-category .plp-look-transfer .payment-discount-price-product{
  font-weight:600;
  color:var(--plp-muted-3);
}