/* JUVIA — hoja de estilos del tema (Empuje).
   Movida desde el bloque <style> inline de layout.tpl el 4/9/2026.
   Motivo: TiendaNube manda el HTML con no-store, asi que estos 292 KB se
   volvian a bajar y a parsear en CADA pagina. Como archivo aparte se descarga
   una sola vez y queda en el cache del navegador el resto de la navegacion.
   Si hay que revertir: volver a pegar este contenido dentro de un <style> al
   inicio de layout.tpl y sacar el <link> que lo referencia. */

  :root {
    --heading-font: "Inter", sans-serif !important;
    --body-font: "Inter", sans-serif !important;
  }

  /* =========== PRODUCT CARD =========== */
  .js-item-product.item-product { display: flex !important; flex-direction: column; }
  .js-item-product .js-product-container { display: flex; flex-direction: column; flex: 1; }
  .item-description { display: flex !important; flex-direction: column; flex: 1; text-align: center; }
  .item-description .item-link { display: flex; flex-direction: column; flex: 1; }

  /* Card description — compact info, image gets more vertical space */
  .item-name {
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    min-height: 0;
    margin: 8px 0 4px 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #555;
    line-height: 1.25;
  }
  .item-price-container { text-align: center; min-height: 0; }
  .item-price {
    font-size: 18px;
    font-weight: 800;
    color: #1B1B1B;
    letter-spacing: -0.2px;
    line-height: 1.1;
  }
  .price-compare {
    font-size: 13px; font-weight: 400;
    text-decoration: line-through;
    opacity: 0.5; margin-right: 8px;
  }

  /* Transfer price — compact, secondary */
  .payment-discount-price-product-container,
  [class*="payment-discount"] {
    font-size: 11px !important;
    color: #2e7d32 !important;
    text-transform: none !important;
    text-align: center !important;
    font-weight: 500;
    margin-top: 2px;
    display: block;
    min-height: 0;
    line-height: 1.3;
  }
  [class*="payment-discount"] strong,
  [class*="payment-discount"] .weight-strong { font-weight: 700 !important; }

  /* Empuje installments — compact, shows amount */
  .empuje-card-installments {
    font-size: 11px;
    color: #555;
    text-align: center;
    margin-top: 2px;
    line-height: 1.3;
    font-weight: 500;
  }
  .empuje-card-installments strong {
    font-weight: 700;
    color: #1B1B1B;
  }

  /* Hide theme's stock installments div (we replace with empuje-card-installments) */
  .item-installments,
  .js-item-installments-container {
    display: none !important;
  }

  /* Mobile: tighter info to maximize image area */
  @media (max-width: 768px) {
    .item-name {
      font-size: 10px;
      letter-spacing: 0.3px;
      margin: 6px 0 3px 0;
    }
    .item-price { font-size: 16px; }
    .payment-discount-price-product-container,
    [class*="payment-discount"] { font-size: 10px !important; }
    .empuje-card-installments { font-size: 10px; }
  }

  /* Image container relative */
  .js-product-item-image-container-private,
  .product-item-image-container,
  .item-image { position: relative; overflow: hidden; }

  /* Color swatches — BELOW price (new default position) */
  .empuje-colors-overlay {
    position: static !important;
    width: 100%;
    text-align: center;
    z-index: auto;
    padding: 4px 0 0 0;
    pointer-events: auto;
    margin: 2px 0 0 0;
  }
  /* Colores AL FINAL de la tarjeta, debajo de cuotas y transferencia (mockup aprobado
     por Mati, ago 2026). Antes iban arriba del nombre con order:-1, por un pedido
     previo suyo; ella confirmó que el mockup nuevo manda sobre esa decisión.
     Sin order, quedan donde el JS los inserta: últimos en el bloque de info. */
  .empuje-colors-overlay.empuje-colors-below {
    margin-top: 8px;
    margin-bottom: 0;
    text-align: left;
    line-height: 1;
  }
  /* El bloque de info traía 15 px de padding arriba y abajo: en mobile es lo que más
     separaba la foto del nombre. */
  @media (max-width: 768px) {
    .js-item-product .js-item-description,
    .js-item-product .item-description { padding-top: 8px !important; padding-bottom: 10px !important; }
  }
  .empuje-colors-overlay .item-colors-bullet {
    width: 16px !important; min-width: 16px !important; height: 16px !important;
    border-radius: 0 !important; border: 1px solid rgba(0,0,0,.25);
    background: #fff; margin: 0 3px; display: inline-block !important;
    box-shadow: none;
    transition: all 0.2s ease;
    cursor: pointer; vertical-align: middle; pointer-events: auto;
  }
  /* Cuadrados con rayita debajo del activo (referencia COS, ago 2026). Antes el color
     elegido se marcaba engordando el borde a 2px y agrandando el círculo un 10%: en un
     cuadrado eso se ve como un salto, y en los colores claros el borde negro competía
     con el color mismo. La rayita marca igual de bien un blanco que un negro. */
  .empuje-colors-overlay .item-colors-bullet:hover {
    border-color: rgba(0,0,0,.55) !important;
  }
  .empuje-colors-overlay .item-colors-bullet.selected {
    border-color: rgba(0,0,0,.45) !important;
  }
  /* Va en ::before porque ::after ya está ocupado por la zona táctil invisible. */
  .empuje-colors-overlay .item-colors-bullet::before {
    content: ''; position: absolute;
    left: 0; right: 0; bottom: -5px; height: 1px;
    background: #1B1B1B; opacity: 0;
    transition: opacity .15s ease;
  }
  .empuje-colors-overlay .item-colors-bullet.selected::before { opacity: 1; }
  /* Zona táctil ampliada (ago 2026). El círculo se sigue viendo igual: lo que
     crece es el área invisible que responde al dedo, de 13x13 a ~17x29.
     Vertical -8px: entra en el margen de 10px del bloque, sin pisar el link del
     nombre que está debajo. Horizontal -2px: llena el hueco entre swatches sin
     superponerse con el vecino — si se superpusieran, el dedo activaría el
     color equivocado, que es peor que el problema original. */
  .empuje-colors-overlay .item-colors-bullet { position: relative; }
  .empuje-colors-overlay .item-colors-bullet::after {
    content: '';
    position: absolute;
    top: -8px; bottom: -8px; left: -2px; right: -2px;
  }
  /* Contador "+N" del tope de seguridad (ver capColorSwatches). Hoy no se ve
     nunca: el máximo del catálogo son 4 colores y el tope está en 5. */
  .empuje-colors-more {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    font-size: 11px;
    line-height: 1;
    color: #8B8589;
    letter-spacing: 0.3px;
  }
  .empuje-colors-overlay .item-colors-bullet-square {
    display: block; width: 100%; height: 100%;
  }
  .empuje-colors-overlay .item-colors-bullet-text {
    /* Fix prueba real Juvia: color sin hex en admin renderiza el NOMBRE ("Vison") —
       las reglas del bullet redondo (16px/50% !important) lo aplastaban en un óvalo.
       Igualamos !important para que gane el pill. El JS (fixColorSwatches) mapea
       nombres conocidos a su hex y los convierte en swatch redondo real. */
    font-size: 10px !important; line-height: 1.4 !important;
    width: auto !important; min-width: 0 !important; height: auto !important;
    white-space: nowrap !important; padding: 2px 8px !important;
    border-radius: 999px !important; border: 1px solid #DBD7D2 !important;
    background: #FFFFFF !important; color: #555 !important;
    overflow: visible !important;
  }
  .item-description .item-colors.empuje-moved { display: none !important; }

  /* Cartelito NUEVO — vertical sobre el borde izquierdo (ago 2026, referencia COS).
     Antes era un recuadro horizontal con borde negro. El giro es de 180° sobre
     `vertical-rl` para que la palabra se lea de abajo hacia arriba, que es como está
     en la referencia; sin ese giro queda al revés. */
  .empuje-label-nuevo-badge {
    position: absolute; top: 0; left: 0;
    padding: 9px 4px; background: #fff; color: #1B1B1B;
    font-size: 9px; font-weight: 400; letter-spacing: 1.6px;
    border: 0; text-transform: uppercase;
    writing-mode: vertical-rl; transform: rotate(180deg);
    z-index: 11; pointer-events: none;
  }

  /* Low stock badge (top-right) — Eerie Black per brand manual */
  .empuje-label-stock-badge {
    position: absolute; top: 10px; right: 10px;
    padding: 4px 10px; background: #1B1B1B; color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
    text-transform: uppercase;
    z-index: 11; pointer-events: none;
    line-height: 1.3;
  }
  @media (max-width: 768px) {
    .empuje-label-stock-badge { font-size: 9px; padding: 3px 7px; }
  }

  /* Hide theme's native slider arrows/pagination */
  .js-item-product .product-item-prev-container,
  .js-item-product .product-item-next-container,
  .js-item-product .item-slider-pagination-container,
  .js-item-product .product-item-slider-pagination-container,
  .js-item-product .swiper-button-prev,
  .js-item-product .swiper-button-next {
    display: none !important;
  }

  /* Empuje custom slider arrows — chevron fino sin fondo (ago 2026, estética COS).
     El botón queda transparente y de 40x40 para que sea fácil de tocar; lo único
     que se ve es el trazo del ::before. font-size:0 anula el glifo ‹/› que el JS
     inserta como innerHTML (el aria-label sigue dando el texto accesible). */
  .empuje-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px;
    background: none; border: none; border-radius: 0; box-shadow: none;
    cursor: pointer; z-index: 14;
    opacity: 0; transition: opacity 0.25s ease;
    display: flex; align-items: center; justify-content: center;
    padding: 0; font-size: 0; color: transparent;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
  }
  .empuje-arrow::before {
    content: ''; display: block; width: 9px; height: 9px;
    border-top: 1.3px solid #1B1B1B; border-right: 1.3px solid #1B1B1B;
  }
  .empuje-arrow-next::before { transform: rotate(45deg) translate(-1px, 1px); }
  .empuje-arrow-prev::before { transform: rotate(-135deg) translate(-1px, 1px); }
  .empuje-arrow-prev { left: 0; }
  .empuje-arrow-next { right: 0; }
  .js-item-product:hover .empuje-arrow { opacity: 1; }
  .empuje-arrow[data-disabled="true"] { display: none !important; }

  /* FICHA: las fotos se pasan como en la grilla (pedido cliente, ago 2026).
     Misma barra segmentada y misma flecha. La barra no se dibuja de cero: se re-viste la
     paginación que Swiper ya arma —`.swiper-pagination-bullet` con `-active`—, igual que
     en la grilla, para no meterse con la lógica del carrusel.
     `pointer-events: none` como en la grilla: si la barra recibiera el toque, tocarla
     abriría además la foto en grande, porque está dentro del área de la lupa. */
  #single-product .js-swiper-product-pagination {
    position: absolute; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; transform: none;
    display: flex; gap: 2px;
    padding: 0; margin: 0; line-height: 0;
    z-index: 9; pointer-events: none;
  }
  #single-product .js-swiper-product-pagination .swiper-pagination-bullet {
    flex: 1; width: auto; height: 3px;
    margin: 0 !important; border-radius: 0; opacity: 1;
    background: rgba(0, 0, 0, 0.14);
    transition: background 0.2s ease;
  }
  #single-product .js-swiper-product-pagination .swiper-pagination-bullet-active {
    background: #6E6862;
  }
  /* La flecha reusa `.empuje-arrow`, pero en la grilla aparece con el hover de la
     tarjeta y acá no hay tarjeta: en la ficha se muestra siempre. */
  #single-product .empuje-arrow { opacity: 0.85; }
  #single-product:hover .empuje-arrow { opacity: 1; }

  /* Barra segmentada al pie de la foto, un segmento por imagen (ago 2026, ref. COS).
     Antes eran puntitos centrados. Se conservan los mismos elementos que arma el JS
     —`.empuje-dot` con `.active`— y solo cambia cómo se ven, para no tocar la lógica
     del carrusel. */
  .empuje-dots {
    position: absolute; bottom: 0;
    left: 0; right: 0; transform: none;
    z-index: 9; display: none; gap: 2px;
    padding: 0; pointer-events: none;
  }
  .empuje-dot {
    display: block; flex: 1; width: auto; height: 3px;
    margin: 0; border-radius: 0;
    background: rgba(0,0,0,0.14);
    transition: background 0.2s ease;
  }
  .empuje-dot.active {
    background: #6E6862;
    transform: none;
  }
  @media (max-width: 768px) {
    /* flex y no block: los segmentos se reparten el ancho en partes iguales */
    .empuje-dots { display: flex; }
    /* Show arrows on mobile, always visible (no hay hover en touch).
       OJO: acá NO va `display: flex !important` — ese !important le ganaba a la
       regla [data-disabled] y hacía que en el celular se vieran las dos flechas
       incluso en la primera foto. Con display sin !important, la regla de abajo
       (más específica) esconde la que no corresponde. */
    .empuje-arrow {
      display: flex;
      opacity: 0.85 !important;
      width: 36px;
      height: 36px;
      background: none;
      box-shadow: none;
      font-size: 0;
    }
    .empuje-arrow::before { width: 8px; height: 8px; }
    .empuje-arrow[data-disabled="true"] { display: none !important; }
    .empuje-arrow-prev { left: 0; }
    .empuje-arrow-next { right: 0; }
    /* Swatches ahora viven debajo del precio (no overlay), no necesitan offset */
  }

  /* Add to cart button
     Fix prueba real Juvia: el contenedor es .item-actions-inline SOLO si el admin tiene
     quick_shop_type='inline'; con otro tipo la clase es .item-actions y el hover no matcheaba
     → apuntamos a .js-item-quickshop (siempre presente) para cubrir ambas configs. */
  .js-item-product .js-item-quickshop {
    position: static !important; width: 100% !important;
    margin: 10px 0 0 0 !important; padding: 0 !important;
    opacity: 0; transition: opacity 0.2s ease;
    text-align: center; display: flex; justify-content: center;
    pointer-events: none;
  }
  .js-item-product:hover .js-item-quickshop {
    opacity: 1; pointer-events: auto;
  }
  .js-item-product .js-item-buy-open,
  .js-item-product .js-item-buy-close,
  .js-item-product .item-btn-quickshop,
  .js-item-product .js-addtocart,
  .js-item-product .js-quickshop-modal-open.item-btn-quickshop {
    display: inline-block !important; width: auto !important;
    max-width: 80%; padding: 10px 24px !important;
    font-size: 11px !important; font-weight: 600 !important;
    text-transform: uppercase !important; letter-spacing: 0.5px !important;
    background: #000 !important; color: #fff !important;
    border: none !important; border-radius: 0 !important;
    text-align: center !important; line-height: 1 !important; cursor: pointer;
  }
  .js-item-buy-open:hover, .item-btn-quickshop:hover { background: #333 !important; }
  .js-item-buy-close { display: none !important; }

  @media (max-width: 768px) {
    .js-item-product .js-item-quickshop {
      opacity: 1 !important; pointer-events: auto; padding: 8px 0 !important;
    }
    .js-item-buy-open, .item-btn-quickshop {
      padding: 9px 18px !important; font-size: 10px !important; max-width: 90%;
    }
    .item-name { font-size: 11px; line-height: 15px; min-height: 30px; margin-top: 8px; }
    .item-price { font-size: 14px; }
    .price-compare { font-size: 12px; }
    /* Estaban en 18px, MÁS grandes que en desktop (16px) — al revés de lo deseable */
    .empuje-colors-overlay .item-colors-bullet {
      width: 13px !important; min-width: 13px !important; height: 13px !important;
      margin: 0 2px !important;
    }
    /* El relleno acá quedó del diseño horizontal viejo (3px arriba, 8px al costado) y
       le ganaba al vertical: el cartelito salía ancho y bajo, 27x46, cuando en la
       referencia es angosto y alto. Con el texto girado, el relleno se invierte. */
    .empuje-label-nuevo-badge { font-size: 8px; letter-spacing: 1px; padding: 7px 4px; }
  }

  @media (min-width: 768px) {
    .item-product.grid-item.col-md-3 {
      flex: 0 0 33.333333% !important; max-width: 33.333333% !important;
    }
  }

  /* Force 2 columns on mobile */
  @media (max-width: 767.98px) {
    .js-item-product.item-product,
    .item-product.grid-item {
      flex: 0 0 50% !important;
      max-width: 50% !important;
    }
  }

  /* =========== FILTERS: modal mode =========== */
  /* La clase va repetida a propósito. Bootstrap trae .d-md-block { display: block
     !important } y el sidebar tiene esa clase; con una sola clase de cada lado empatan
     en especificidad y en desktop ganaba el del tema por orden de carga. Resultado: el
     sidebar seguía ocupando su columna, pero la regla de abajo igual estiraba la grilla
     al 100%, así que no entraba al lado y se caía DEBAJO del sidebar. Había que
     scrollear ~950px para ver el primer producto (visto y corregido el 24/8/2026).
     En celular no cambia nada: ahí ya estaba oculto por .d-none. */
  .filters-sidebar.filters-sidebar { display: none !important; }
  .category-body .container-fluid .row > [class*="col"]:not(.filters-sidebar) {
    flex: 1 1 100%;
    max-width: 100%;
  }

  /* Filter button in top bar */
  .category-controls [data-toggle="#nav-filters"] {
    display: inline-flex !important;
    align-items: center;
    padding: 9px 18px !important;
    border: 1px solid rgba(0,0,0,.3) !important;
    background: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 0 !important;
    color: #000 !important;
    min-width: 140px;
    cursor: pointer;
    text-decoration: none;
  }
  .category-controls [data-toggle="#nav-filters"]:hover {
    border-color: #000 !important; background: #000 !important; color: #fff !important;
  }

  /* --- El botón Filtrar en escritorio (24/8/2026) ---
     El contenedor del botón viene del tema con .d-md-none, o sea que está pensado SOLO
     para celular: en escritorio el tema muestra la barra lateral. Acá los filtros son
     modal en las dos, así que hay que mostrarlo también en escritorio. La regla de
     arriba intentaba eso pero apuntaba al botón y no al contenedor, y un hijo visible
     adentro de un padre display:none no se ve: por eso nunca apareció.
     Ojo al mostrar el contenedor: adentro viene también el panel #nav-filters con su
     propio "Ordenar por". No duplica nada porque el panel arranca oculto hasta que se
     abre — pero si alguna vez se ve un segundo "Ordenar por" en la barra, es por acá. */
  @media (min-width: 768px) {
    .category-controls .col-auto.d-md-none { display: block !important; order: 0; }
    /* Filtrar primero, Ordenar después: es el orden que espera cualquiera */
    .category-controls .col-md-auto.d-none.d-md-block { order: 1; }

    /* Caja chica: el mismo recuadro de siempre pero sin el min-width de 140px, que
       era lo que lo hacía un bloque. En celular queda como estaba, con su botón
       grande, porque ahí el dedo necesita área para tocar.
       El .form-select del selector NO sobra: el botón trae esa clase del tema, y más
       abajo (busca "Sort by") hay una regla .category-controls .form-select con
       !important que le da la caja del "Ordenar por". Empata en especificidad con
       .category-controls [data-toggle=...] y gana por estar después en el archivo.
       Sumando la clase acá, esta gana sin depender del orden. */
    .category-controls .form-select[data-toggle="#nav-filters"] {
      min-width: 0 !important;
      width: auto !important;
      padding: 9px 14px !important;
      border: 1px solid rgba(0,0,0,.3) !important;
      background: #fff !important;
      font-size: 12px !important;
      letter-spacing: 0.5px !important;
      color: #000 !important;
      line-height: 1.2 !important;
    }
    /* Adentro del botón hay un .row de Bootstrap con DOS columnas: la palabra y el
       ícono de filtros. Con el flex-wrap que trae por defecto se partían en dos
       líneas —la palabra arriba y el ícono colgando abajo— apenas se le sacó el
       ancho fijo. El nowrap y el gap las mantienen en una sola línea. */
    .category-controls [data-toggle="#nav-filters"] .row {
      margin: 0 !important;
      flex-wrap: nowrap !important;
      align-items: center;
      gap: 7px;
    }
    .category-controls [data-toggle="#nav-filters"] [class*="col"] {
      padding: 0 !important; flex: 0 0 auto; max-width: none;
      white-space: nowrap; text-align: left !important;
    }
    .category-controls .form-select[data-toggle="#nav-filters"]:hover {
      border-color: #000 !important;
      background: #000 !important;
      color: #fff !important;
    }
  }

  /* Modal: slide from right, 420px wide */
  #nav-filters.modal-fullscreen,
  #nav-filters .modal-content {
    max-width: 420px !important; width: 420px !important;
    margin-left: auto !important;
    box-shadow: -4px 0 20px rgba(0,0,0,.1);
  }
  #nav-filters .modal-head {
    padding: 20px 24px !important;
    border-bottom: 1px solid #e5e5e5;
  }
  #nav-filters .modal-head .h4,
  #nav-filters .modal-head h1, #nav-filters .modal-head h2, #nav-filters .modal-head h3,
  #nav-filters .modal-head h4, #nav-filters .modal-head h5 {
    font-size: 16px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 1px !important;
    margin: 0;
  }
  #nav-filters .modal-body { padding: 20px 24px !important; }

  /* Filter sections */
  #nav-filters .subtitle {
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 14px !important; margin-top: 20px !important;
    cursor: pointer; position: relative; padding-right: 20px; user-select: none;
  }
  #nav-filters .subtitle::after {
    content: ''; position: absolute; right: 2px; top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px; height: 8px;
    border-right: 1.5px solid #000; border-bottom: 1.5px solid #000;
    transition: transform 0.25s ease;
  }
  #nav-filters .js-accordion-container.empuje-collapsed .subtitle::after {
    transform: translateY(-25%) rotate(-135deg);
  }
  #nav-filters .js-accordion-container.empuje-collapsed > :not(.subtitle) {
    display: none !important;
  }
  #nav-filters .divider {
    border-top: 1px solid #e5e5e5;
    margin: 16px 0 !important; padding: 0 !important;
  }

  /* Size: pills */
  #nav-filters [data-component*="filter-size"] .checkbox-container,
  #nav-filters [data-component-value*="alle"] .checkbox-container {
    display: inline-block !important;
    margin: 0 6px 6px 0 !important; padding: 0 !important; cursor: pointer;
  }
  #nav-filters [data-component*="filter-size"] .checkbox-container input,
  #nav-filters [data-component-value*="alle"] .checkbox-container input {
    display: none !important;
  }
  #nav-filters [data-component*="filter-size"] .checkbox-container .checkbox,
  #nav-filters [data-component-value*="alle"] .checkbox-container .checkbox {
    display: flex !important; align-items: center; justify-content: center;
    min-width: 44px; padding: 9px 14px;
    border: 1px solid rgba(0,0,0,.3); background: #fff;
    transition: all 0.2s ease;
    font-size: 12px; font-weight: 500; line-height: 1;
  }
  #nav-filters [data-component*="filter-size"] .checkbox-container input:checked + .checkbox,
  #nav-filters [data-component-value*="alle"] .checkbox-container input:checked + .checkbox {
    background: #000; color: #fff; border-color: #000;
  }
  #nav-filters [data-component*="filter-size"] .checkbox-container .checkbox-icon,
  #nav-filters [data-component-value*="alle"] .checkbox-container .checkbox-icon {
    display: none !important;
  }

  /* Color: swatches */
  #nav-filters [data-component*="filter-color"] .checkbox-container,
  #nav-filters [data-component-value*="olor"] .checkbox-container {
    display: inline-block !important;
    margin: 0 10px 10px 0 !important; padding: 0 !important;
    cursor: pointer; position: relative;
  }
  #nav-filters [data-component*="filter-color"] .checkbox-container input,
  #nav-filters [data-component-value*="olor"] .checkbox-container input {
    display: none !important;
  }
  #nav-filters [data-component*="filter-color"] .checkbox-container .checkbox-text,
  #nav-filters [data-component-value*="olor"] .checkbox-container .checkbox-text,
  #nav-filters [data-component*="filter-color"] .checkbox-container .checkbox-icon,
  #nav-filters [data-component-value*="olor"] .checkbox-container .checkbox-icon {
    display: none !important;
  }
  #nav-filters [data-component*="filter-color"] .checkbox-container .checkbox,
  #nav-filters [data-component-value*="olor"] .checkbox-container .checkbox {
    padding: 0 !important;
  }
  #nav-filters [data-component*="filter-color"] .checkbox-container .checkbox-color,
  #nav-filters [data-component-value*="olor"] .checkbox-container .checkbox-color {
    display: block !important;
    width: 30px !important; height: 30px !important;
    border: 1px solid rgba(0,0,0,.3);
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    transition: all 0.2s ease;
    position: static !important; margin: 0 !important;
  }
  #nav-filters [data-component*="filter-color"] .checkbox-container:hover .checkbox-color,
  #nav-filters [data-component-value*="olor"] .checkbox-container:hover .checkbox-color {
    transform: scale(1.1);
  }
  #nav-filters [data-component*="filter-color"] .checkbox-container input:checked + .checkbox .checkbox-color,
  #nav-filters [data-component-value*="olor"] .checkbox-container input:checked + .checkbox .checkbox-color {
    border: 2px solid #000;
    box-shadow: 0 0 0 1px #fff, 0 2px 4px rgba(0,0,0,.2);
  }

  /* Price */
  #nav-filters .price-filter-container input[type="number"],
  #nav-filters .price-filter-container input[type="text"] {
    padding: 9px 12px; font-size: 12px;
    border: 1px solid rgba(0,0,0,.3); border-radius: 0;
  }
  #nav-filters .price-filter-container .btn {
    padding: 9px 14px !important; font-size: 12px !important; border-radius: 0 !important;
  }
  .empuje-price-ranges {
    margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px;
  }
  .empuje-price-range-pill {
    font-size: 11px; padding: 6px 10px;
    background: #f5f5f5; border: 1px solid transparent;
    cursor: pointer; transition: all 0.2s ease; font-weight: 500;
  }
  .empuje-price-range-pill:hover {
    background: #eee; border-color: rgba(0,0,0,.2);
  }

  /* Chips */
  .chip {
    background: #fff; border: 1px solid #000; color: #000;
    padding: 5px 10px; margin: 0 6px 6px 0;
    font-size: 11px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.3px;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    transition: all 0.2s ease; border-radius: 0;
  }
  .chip:hover { background: #000; color: #fff; }
  .chip .chip-remove-icon { width: 10px; height: 10px; }
  .js-remove-all-filters {
    font-size: 11px; text-decoration: underline; color: #000; font-weight: 500;
  }

  /* Sort by */
  .category-controls .form-select,
  .category-controls [class*="sort-by"] select,
  .category-controls select {
    border: 1px solid rgba(0,0,0,.3) !important;
    padding: 9px 32px 9px 14px !important;
    font-size: 12px !important; font-weight: 600 !important;
    text-transform: uppercase !important; letter-spacing: 0.5px !important;
    background: #fff !important; border-radius: 0 !important;
    cursor: pointer; min-width: 180px;
  }

  /* Filter count badge */
  .empuje-filter-count-badge {
    display: inline-block; background: #000; color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 2px 6px; margin-left: 8px;
    min-width: 18px; text-align: center; line-height: 1.2; border-radius: 10px;
  }
  .category-controls [data-toggle="#nav-filters"]:hover .empuje-filter-count-badge {
    background: #fff; color: #000;
  }

  /* MOBILE filter floating btn */
  @media (max-width: 768px) {
    /* UN SOLO filtro en mobile (ago 2026). Había dos: el nativo del tema arriba a la
       derecha y el flotante de abajo, que hace exactamente lo mismo (abre #nav-filters).
       Además el de arriba se montaba sobre el título de la categoría — medido en
       "Capsula Hilo Importado": el título llegaba a 214px y el botón arrancaba en 180.
       Queda el flotante, que se alcanza con el pulgar y no tapa el título.
       El ordenamiento NO se pierde: vive dentro del mismo panel que abre el flotante. */
    .category-controls [data-toggle="#nav-filters"] { display: none !important; }

    .empuje-mobile-filter-btn {
      position: fixed; bottom: 20px; left: 50%;
      transform: translateX(-50%); z-index: 999;
      background: #000; color: #fff; border: none;
      padding: 12px 24px; font-size: 12px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 1px;
      box-shadow: 0 4px 12px rgba(0,0,0,.3);
      cursor: pointer; display: inline-flex !important;
      align-items: center; gap: 8px; border-radius: 30px;
    }
    .empuje-mobile-filter-btn svg { width: 14px; height: 14px; }
    #nav-filters.modal-fullscreen,
    #nav-filters .modal-content {
      max-width: 100% !important; width: 100% !important;
    }
  }


  /* ===== PDP mobile: foto a borde y barra fija de compra (ago 2026) =====
     Medido en Remera Corso: el botón de comprar estaba a 1.134px y solo se veía
     durante el 20% del recorrido de una página de 4.659px. Ahora la barra acompaña
     todo el scroll. Los planes de 3 y 12 cuotas se van al acordeón de medios de pago:
     eran 4 bloques seguidos que empujaban el talle y el botón hacia abajo. */
  /* La foto a borde va en su propio bloque, hasta 767.98 y no hasta 768 (ago 2026).
     En 768 justo el tema pasa a dos columnas (foto + miniaturas al costado): ahí el
     contenedor mide 491 y el `margin-left: calc(50% - 50vw)` lo arrastraba 141px fuera
     de la pantalla, cortando la foto por la izquierda. Abajo de 768 es una sola columna
     y el corrimiento sí corresponde.
     Va con el selector largo porque la regla de las miniaturas
     (`.row[data-store*="product-image"] > .product-image-container`, más abajo) es más
     específica y ganaba con `width/max-width: 100%`: de la regla original solo sobrevivía
     el corrimiento, así que la foto arrancaba pegada a la izquierda pero terminaba 24px
     antes del borde derecho (351 de 375 en un celular de 375).
     El `body` de adelante NO es decorativo: sin él las dos reglas empatan en precisión
     y gana la que está más abajo en el archivo, que es la de las miniaturas. Verificado
     en vivo: sin `body` el contenedor seguía en 351; con `body` pasa a 375. */
  @media (max-width: 767.98px) {
    body .row[data-store*="product-image"] > .product-image-container {
      width: 100vw !important; max-width: 100vw !important;
      margin-left: calc(50% - 50vw) !important;
      padding: 0 !important;
    }
  }
  @media (max-width: 768px) {
    .empuje-pdp-gocuotas, .empuje-pdp-promos { display: none !important; }
    .empuje-pdp-transfer, .empuje-pdp-installments {
      font-size: 12px !important; line-height: 1.35 !important; margin: 3px 0 0 0 !important;
    }
    .empuje-pdp-barra { display: flex !important; }
    body.empuje-pdp-conbarra { padding-bottom: 64px; }
  }
  .empuje-pdp-barra {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 99997;
    background: #fff; border-top: 1px solid #DBD7D2;
    box-shadow: 0 -3px 12px rgba(0,0,0,.09);
    align-items: center; gap: 12px; padding: 10px 14px;
  }
  .empuje-pdp-barra-precio { flex: 0 0 auto; line-height: 1.15; }
  .empuje-pdp-barra-precio b { display: block; font-size: 16px; font-weight: 700; color: #1B1B1B; }
  .empuje-pdp-barra-precio span { display: block; font-size: 9.5px; color: #8B8589; margin-top: 2px; }
  .empuje-pdp-barra-btn {
    flex: 1; background: #1B1B1B; color: #F4F0EC; border: none; height: 44px;
    font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer;
  }

  /* ============================ PDP (Product Detail Page) ============================ */

  /* Variants: color swatches — square 24x24, inner fills 100% via absolute */
  .js-product-detail .js-insta-variant.btn-variant-color {
    display: inline-block !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    border: 1px solid #DBD7D2 !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 8px 8px 0 !important;
    transition: border-color 0.2s ease;
    overflow: hidden;
    box-sizing: border-box !important;
    line-height: 0 !important;
    font-size: 0 !important;
    text-decoration: none !important;
    vertical-align: middle;
    box-shadow: none !important;
    position: relative !important;
  }
  .js-product-detail .js-insta-variant.btn-variant-color > .btn-variant-content {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden;
    text-indent: -9999px;
  }
  .js-product-detail .js-insta-variant.btn-variant-color:hover {
    border-color: #555 !important;
  }
  .js-product-detail .js-insta-variant.btn-variant-color.selected {
    border: 1px solid #1B1B1B !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #1B1B1B !important;
  }

  /* Variants: size pills — smaller, refined */
  .js-product-detail .js-insta-variant.btn-variant:not(.btn-variant-color) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 34px !important;
    height: 28px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(0,0,0,.3) !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #1B1B1B !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 6px 6px 0 !important;
    transition: all 0.2s ease;
    line-height: 1 !important;
    text-decoration: none !important;
    vertical-align: middle;
  }
  .js-product-detail .js-insta-variant.btn-variant:not(.btn-variant-color) > .btn-variant-content {
    display: inline-block;
    line-height: 1;
  }
  .js-product-detail .js-insta-variant.btn-variant:not(.btn-variant-color):hover {
    border-color: #1B1B1B !important;
  }
  .js-product-detail .js-insta-variant.btn-variant:not(.btn-variant-color).selected {
    background: #1B1B1B !important;
    color: #fff !important;
    border-color: #1B1B1B !important;
  }

  /* Variant group label (Color: / Talle:) */
  .js-product-detail .js-product-variants-group .form-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #555;
    margin-bottom: 6px !important;
  }

  /* Price & transfer price (PDP) */
  .js-product-detail .js-price-display,
  .js-product-detail #price_display {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1B1B1B !important;
    line-height: 1.2;
  }
  .js-product-detail .js-compare-price-display,
  .js-product-detail #compare_price_display {
    font-size: 16px !important;
    font-weight: 400 !important;
    text-decoration: line-through;
    opacity: 0.55;
    margin-bottom: 2px;
  }
  .js-product-detail [class*="payment-discount"] {
    font-size: 13px !important;
    color: #1B1B1B !important;
    text-transform: none !important;
    text-align: left !important;
    font-weight: 400 !important;
    margin-top: 6px !important;
  }
  .js-product-detail [class*="payment-discount"] strong,
  .js-product-detail [class*="payment-discount"] .weight-strong {
    font-weight: 700 !important;
  }

  /* PDP installments */
  .js-product-detail .item-installments {
    font-size: 13px !important;
    color: #1B1B1B !important;
  }
  /* Empuje custom installments block (6 cuotas sin interés) */
  .empuje-pdp-installments {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #1B1B1B;
    line-height: 1.5;
    margin: 8px 0 4px 0;
    padding: 4px 0;
  }
  .empuje-pdp-installments strong {
    font-weight: 700;
    color: #1B1B1B;
  }
  @media (max-width: 768px) {
    .empuje-pdp-installments { font-size: 13px; }
  }

  /* ============ Probador Virtual (mockup) ============ */
  .empuje-tryon-trigger {
    width: 100%;
    background: #FFFFFF;
    color: #1B1B1B;
    border: 1.5px solid #1B1B1B;
    padding: 14px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 12px 0 0 0;
    transition: background 0.2s ease, color 0.2s ease;
    border-radius: 0;
  }
  .empuje-tryon-trigger:hover {
    background: #1B1B1B;
    color: #F4F0EC;
  }
  .empuje-tryon-trigger svg { width: 18px; height: 18px; flex-shrink: 0; }

  .empuje-tryon-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(27,27,27,0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2147483646;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 24px;
  }
  .empuje-tryon-overlay.show { display: flex; opacity: 1; }

  .empuje-tryon-modal {
    background: #FFFFFF;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
    position: relative;
    font-family: 'Inter', sans-serif;
  }
  .empuje-tryon-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.95);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1B1B1B;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  }
  .empuje-tryon-close:hover { background: #F4F0EC; }
  .empuje-tryon-close svg { width: 16px; height: 16px; }

  /* Left side: product preview */
  .empuje-tryon-product {
    background: #F4F0EC;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .empuje-tryon-product-img {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 3/4;
    background-size: cover;
    background-position: center;
    background-color: #DBD7D2;
    margin-bottom: 16px;
  }
  .empuje-tryon-product-name {
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #1B1B1B;
    margin: 0 0 6px 0;
    text-align: center;
  }
  .empuje-tryon-product-price {
    font-size: 16px;
    font-weight: 700;
    color: #1B1B1B;
    margin: 0;
  }

  /* Right side: steps */
  .empuje-tryon-content {
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
  }
  .empuje-tryon-eyebrow {
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #8B8589;
    font-weight: 700;
    margin: 0 0 10px 0;
  }
  .empuje-tryon-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.3px;
    color: #1B1B1B;
    margin: 0 0 8px 0;
  }
  .empuje-tryon-sub {
    font-size: 13px;
    line-height: 1.55;
    color: #555;
    margin: 0 0 24px 0;
  }
  .empuje-tryon-stepper {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
  }
  .empuje-tryon-step-dot {
    flex: 1;
    height: 3px;
    background: #DBD7D2;
    transition: background 0.3s ease;
  }
  .empuje-tryon-step-dot.active { background: #1B1B1B; }

  /* Step panels */
  .empuje-tryon-step { display: none; }
  .empuje-tryon-step.active { display: block; }

  /* Upload area */
  .empuje-tryon-upload {
    border: 2px dashed #DBD7D2;
    padding: 32px 20px;
    text-align: center;
    background: #FAFAF8;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    margin-bottom: 12px;
  }
  .empuje-tryon-upload:hover {
    border-color: #1B1B1B;
    background: #F4F0EC;
  }
  .empuje-tryon-upload svg {
    width: 36px;
    height: 36px;
    color: #8B8589;
    margin-bottom: 10px;
  }
  .empuje-tryon-upload p {
    margin: 0;
    font-size: 13px;
    color: #555;
    line-height: 1.4;
  }
  .empuje-tryon-upload p strong { color: #1B1B1B; }
  .empuje-tryon-upload input[type="file"] { display: none; }

  .empuje-tryon-alt {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    color: #8B8589;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }
  .empuje-tryon-alt::before,
  .empuje-tryon-alt::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #DBD7D2;
  }
  .empuje-tryon-sample-btn {
    width: 100%;
    background: transparent;
    border: 1px solid #DBD7D2;
    color: #1B1B1B;
    padding: 12px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .empuje-tryon-sample-btn:hover {
    border-color: #1B1B1B;
    background: #F4F0EC;
  }

  /* Step 2: processing */
  .empuje-tryon-processing {
    text-align: center;
    padding: 40px 20px;
  }
  .empuje-tryon-spinner {
    width: 56px;
    height: 56px;
    border: 3px solid #DBD7D2;
    border-top-color: #1B1B1B;
    border-radius: 50%;
    margin: 0 auto 18px auto;
    animation: empuje-tryon-spin 0.9s linear infinite;
  }
  @keyframes empuje-tryon-spin { to { transform: rotate(360deg); } }
  .empuje-tryon-processing-title {
    font-size: 15px;
    font-weight: 700;
    color: #1B1B1B;
    margin: 0 0 6px 0;
  }
  .empuje-tryon-processing-sub {
    font-size: 12px;
    color: #8B8589;
    margin: 0;
  }
  .empuje-tryon-progress {
    margin-top: 18px;
    height: 4px;
    background: #DBD7D2;
    overflow: hidden;
  }
  .empuje-tryon-progress-bar {
    height: 100%;
    background: #1B1B1B;
    width: 0%;
    transition: width 0.3s ease;
  }

  /* Step 3: result */
  .empuje-tryon-result-img {
    width: 100%;
    aspect-ratio: 3/4;
    background-size: cover;
    background-position: center;
    background-color: #F4F0EC;
    margin-bottom: 16px;
    position: relative;
  }
  .empuje-tryon-result-img::after {
    content: 'PREVIEW';
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(27,27,27,0.85);
    color: #F4F0EC;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 4px 8px;
  }
  .empuje-tryon-result-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }
  .empuje-tryon-action {
    background: #FFFFFF;
    border: 1px solid #DBD7D2;
    padding: 10px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1B1B1B;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.2s ease;
  }
  .empuje-tryon-action:hover { background: #F4F0EC; }
  .empuje-tryon-action svg { width: 14px; height: 14px; }
  .empuje-tryon-retry {
    background: transparent;
    border: none;
    color: #555;
    font-size: 12px;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-decoration: underline;
    padding: 6px;
    margin: 0 auto;
    display: block;
  }

  .empuje-tryon-disclaimer {
    margin-top: 16px;
    padding: 10px 12px;
    background: #F4F0EC;
    border-left: 3px solid #8B8589;
    font-size: 10px;
    line-height: 1.5;
    color: #555;
  }
  .empuje-tryon-disclaimer strong { color: #1B1B1B; }

  /* Mobile */
  @media (max-width: 768px) {
    .empuje-tryon-overlay { padding: 0; align-items: flex-end; }
    .empuje-tryon-modal {
      grid-template-columns: 1fr;
      max-width: 100%;
      max-height: 95vh;
      max-height: 95dvh;
      width: 100%;
    }
    .empuje-tryon-product {
      padding: 20px;
      display: none; /* en mobile ocultamos el panel del producto para más espacio al flujo */
    }
    .empuje-tryon-content { padding: 48px 20px 24px 20px; }
    .empuje-tryon-title { font-size: 19px; }
    .empuje-tryon-close {
      background: #1B1B1B;
      color: #FFFFFF;
    }
    .empuje-tryon-close svg { stroke: #FFFFFF; }
  }

  /* Add to cart button (PDP) */
  .js-product-detail .js-addtocart,
  .js-product-detail input[type="submit"].btn-primary,
  .js-product-detail button.btn-primary {
    background: #1B1B1B !important;
    border: 1px solid #1B1B1B !important;
    color: #fff !important;
    border-radius: 0 !important;
    padding: 16px 28px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: background 0.2s ease;
    width: 100%;
  }
  .js-product-detail .js-addtocart:hover,
  .js-product-detail input[type="submit"].btn-primary:hover {
    background: #555 !important;
    border-color: #555 !important;
  }

  /* Quantity selector (PDP) */
  .js-product-detail .form-quantity {
    border: 1px solid rgba(0,0,0,.3) !important;
  }
  .js-product-detail .form-quantity input {
    border: none !important;
    text-align: center;
    font-weight: 600;
  }
  .js-product-detail .form-quantity-icon {
    background: #fff !important;
    border: none !important;
    color: #1B1B1B !important;
  }

  /* Empuje stock indicator badge in PDP */
  .empuje-pdp-stock-indicator {
    display: block;
    padding: 8px 14px;
    background: #1B1B1B;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin: 0 0 14px 0;
    text-align: center;
    line-height: 1.3;
  }

  /* Hide default product-stock display (we use our own indicator) */
  .js-product-detail .js-product-stock { /* keep for theme JS to update */ }

  /* Sticky ATC — base hidden everywhere */
  .empuje-pdp-sticky-atc {
    display: none !important;
  }

  /* === Mobile: Sticky Add to Cart bar === */
  @media (max-width: 768px) {
    .empuje-pdp-sticky-atc {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #fff;
      border-top: 1px solid rgba(0,0,0,.1);
      padding: 10px 14px;
      z-index: 999;
      box-shadow: 0 -4px 12px rgba(0,0,0,.08);
      display: none !important;
      transform: translateY(100%);
      transition: transform 0.3s ease;
    }
    .empuje-pdp-sticky-atc.visible {
      display: block !important;
      transform: translateY(0);
    }
    .empuje-pdp-sticky-atc-inner {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .empuje-pdp-sticky-atc-info {
      flex: 1;
      min-width: 0;
    }
    .empuje-pdp-sticky-atc-name {
      font-size: 11px;
      font-weight: 500;
      color: #555;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.2;
    }
    .empuje-pdp-sticky-atc-price {
      font-size: 14px;
      font-weight: 700;
      color: #1B1B1B;
      line-height: 1.2;
    }
    .empuje-pdp-sticky-atc-btn {
      background: #1B1B1B;
      color: #fff;
      border: none;
      padding: 12px 22px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      cursor: pointer;
      flex-shrink: 0;
      border-radius: 0;
    }
    /* Add bottom padding to body when sticky is visible so it doesn't cover content */
    body.empuje-sticky-atc-active { padding-bottom: 112px; }
    /* Barra de compra — opción B aprobada (ago 2026): una decisión por renglón.
       Antes los cuadraditos de color medían 20x20 y los talles 31x21. El mínimo para que
       un dedo acierte cómodo es 44x44: estaban a menos de la mitad, y cada toque fallado
       es una clienta que se traba en el último paso. */
    .empuje-pdp-sticky-atc.empuje-atc-con-sel { padding: 0; }
    /* Renglón 1: colores + el nombre del color escrito ("Visón" y "Verde seco" no se
       distinguen en una foto chica). */
    .empuje-sticky-sel {
      display: flex; align-items: center; gap: 8px;
    }
    /* DOS RENGLONES EN VEZ DE TRES (opción A, mockup aprobado por Mati el 27/8/2026).
       La barra pasa de 170px a 113: desaparece el renglón del precio y su contenido se
       reparte —el precio sube con los colores, el botón baja con los talles—. La foto del
       producto recupera 57px, que en una pantalla de 812 es un 7% de todo lo que se ve.
       Lo que se toca —colores y talles— sigue sin bajar de 40px, el mínimo para el dedo. */
    .empuje-atc-con-sel .empuje-sticky-sel { padding: 6px 14px; }
    /* El precio, a la derecha del renglón de colores. El `flex: 0 0 auto` pisa el
       `flex: 1` de la regla general de más arriba: si el precio pudiera crecer, se comería
       el ancho de las fotos de color. */
    .empuje-atc-con-sel .empuje-pdp-sticky-atc-info {
      flex: 0 0 auto; margin-left: auto; padding-left: 10px; text-align: right;
    }
    .empuje-sticky-sel .sw {
      display: flex; gap: 6px;
      overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
      padding: 3px; margin: -3px;   /* aire para que no se corte el contorno del elegido */
    }
    .empuje-sticky-sel .sw::-webkit-scrollbar { display: none; }
    .empuje-sticky-sel .sw button {
      width: 44px; height: 44px; padding: 0; cursor: pointer; flex-shrink: 0;
      border: 1px solid rgba(0,0,0,.07);
      background-size: cover; background-position: center;
    }
    .empuje-sticky-sel .sw button.on { outline: 1.5px solid #1B1B1B; outline-offset: 2px; }
    /* El nombre del color escrito ("Visón", "Verde seco") salió de la barra el 27/8/2026:
       ese lugar lo ocupa ahora el precio. Se sigue leyendo en la ficha, junto al selector
       de color, que es donde la clienta mira cuando duda entre dos tonos parecidos. */
    /* Renglón 2: talles + cantidad */
    .empuje-sticky-sel2 { display: flex; align-items: center; gap: 6px; }
    /* Sin borde abajo: ahora este es el último renglón de la barra. */
    .empuje-atc-con-sel .empuje-sticky-sel2 { padding: 8px 14px; }
    .empuje-sticky-sel2 .tl {
      min-width: 46px; height: 40px; flex-shrink: 0;
      border: 1px solid #DBD7D2; background: none; font-size: 14px;
      cursor: pointer; font-family: inherit; color: #1B1B1B;
    }
    .empuje-sticky-sel2 .tl.on { background: #1B1B1B; color: #fff; border-color: #1B1B1B; }
    /* El talle agotado se ve tachado ANTES de elegirlo, no después. */
    .empuje-sticky-sel2 .tl.no {
      color: #C9C4BD; text-decoration: line-through; cursor: default; border-color: #F0ECE7;
    }
    .empuje-sticky-cant {
      display: flex; align-items: center; gap: 9px; border: 1px solid #DBD7D2;
      padding: 4px 8px; margin-left: auto; flex-shrink: 0;
    }
    .empuje-sticky-cant button {
      background: none; border: 0; font-size: 16px; line-height: 1; padding: 4px 3px;
      cursor: pointer; color: #1B1B1B; font-family: inherit;
    }
    .empuje-sticky-cant span { font-size: 12.5px; min-width: 14px; text-align: center; }
    /* Ya no hay tercer renglón: al armar la barra se saca del DOM el `-inner` que lo
       envolvía, después de mudar el precio al renglón 1 y el botón al renglón 2. */
    .empuje-atc-con-sel .empuje-pdp-sticky-atc-price {
      font-size: 17px; letter-spacing: -.02em; line-height: 1.2;
    }
    .empuje-atc-con-sel .empuje-pdp-sticky-atc-name { display: none; }
    .empuje-pdp-sticky-atc-transfer {
      font-size: 10.5px; color: #2E7D32; font-weight: 600; line-height: 1.3;
    }
    /* El botón se queda con TODO el ancho que sobra en el renglón de los talles. Medido:
       con 3 talles y la cantidad quedan ~120px y "AGREGAR 2" entra sin cortarse. */
    .empuje-atc-con-sel .empuje-pdp-sticky-atc-btn {
      flex: 1 1 auto; height: 40px; padding: 0 10px; font-size: 11.5px; letter-spacing: .9px;
      display: flex; align-items: center; justify-content: center; white-space: nowrap;
    }
    /* Teléfonos angostos (Android de 360 px y menos). Medido con 5 colores: el precio
       empujaba la quinta foto 17px fuera de pantalla. Se recuperan achicando el aire entre
       fotos y el renglón verde — NO el tamaño de las fotos, que es lo que toca el dedo. */
    @media (max-width: 374px) {
      .empuje-atc-con-sel .empuje-sticky-sel .sw { gap: 4px; }
      .empuje-atc-con-sel .empuje-pdp-sticky-atc-transfer { font-size: 9.5px; }
    }
    /* Teléfonos muy chicos (320px: iPhone SE viejo y Android de entrada). Ahí no alcanza
       ni achicando el aire: con 5 colores quedaban 39px afuera. Se elige mostrar TODOS los
       colores y el precio, y dejar ir el renglón verde, que es lo único prescindible —el
       descuento por transferencia se sigue viendo en el cuerpo de la ficha—. Las fotos
       bajan a 40px, que sigue siendo un blanco cómodo para el dedo. */
    @media (max-width: 340px) {
      .empuje-atc-con-sel .empuje-sticky-sel .sw button { width: 40px; height: 40px; }
      .empuje-atc-con-sel .empuje-pdp-sticky-atc-transfer { display: none; }
    }
    /* El bloque de color y talle sale de la vista, pero NO con `display:none`: probado el
       16/8/2026, así el botón de la ficha deja de agregar al carrito. Se lo saca de
       pantalla manteniéndolo renderizado, que es lo que el tema necesita. */
    body.empuje-sel-en-barra #single-product .js-product-variants {
      position: absolute !important;
      left: -9999px !important;
      top: 0 !important;
      width: 1px !important;
      height: 1px !important;
      overflow: hidden !important;
    }
    /* Compra rápida abierta: la barra SE RETIRA. Antes quedaba debajo de la hoja —tapada,
       pero presente—, o sea dos botones de comprar en la misma pantalla. */
    body.empuje-qs-abierta .empuje-pdp-sticky-atc.visible {
      transform: translateY(100%) !important;
      pointer-events: none;
    }
    /* La cantidad y el "Agregar al carrito" de la ficha se van: eso ahora vive en la
       barra y estaba duplicado. Igual que con los selectores, NO con `display:none` —con
       eso el tema deja de vender— sino sacándolos de pantalla, enteros y renderizados.
       Se apunta al renglón completo, y las dos reglas sueltas quedan de respaldo por si
       el navegador no entiende `:has()`. */
    body.empuje-sel-en-barra #single-product form.js-product-form > .form-row:has(.js-addtocart),
    body.empuje-sel-en-barra #single-product form.js-product-form .js-quantity,
    body.empuje-sel-en-barra #single-product form.js-product-form .js-addtocart {
      position: absolute !important;
      left: -9999px !important;
      top: 0 !important;
    }
    /* El globo de WhatsApp vive fijo a 15px del piso: con la barra puesta quedaban
       encimados. Sube lo que mide la barra. */
    body.empuje-sticky-atc-active .js-btn-fixed-bottom {
      bottom: 74px !important;
      transition: bottom .25s ease;
    }
    .js-btn-fixed-bottom { transition: bottom .25s ease; }
  }

  /* PDP product name styling */
  .js-product-detail .page-header,
  .js-product-detail h1.page-header {
    font-size: 22px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 8px !important;
    color: #1B1B1B !important;
  }


  /* Force ATC placeholder hidden in PDP */
  .js-product-detail .js-addtocart-placeholder {
    display: none !important;
  }

  /* ============ PDP — More improvements ============ */

  /* Price block reorganized: vertical hierarchy */
  .js-product-detail .js-price-container {
    display: block !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
  }
  .js-product-detail .js-price-container .col,
  .js-product-detail .js-price-container .col-12,
  .js-product-detail .js-price-container .col-auto {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .js-product-detail .js-price-container .col {
    margin-bottom: 4px !important;
  }

  /* Compare price (tachado) — small, opacity */
  .js-product-detail #compare_price_display.js-compare-price-display {
    display: inline-block !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
    opacity: 0.5 !important;
    margin-bottom: 4px;
  }
  /* Main price — big bold */
  .js-product-detail #price_display.js-price-display {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1B1B1B !important;
    line-height: 1.1 !important;
    display: block !important;
    margin-bottom: 8px;
  }

  /* Transfer price badge — clean horizontal block */
  .js-product-detail [class*="payment-discount-price-product-container"] {
    display: block !important;
    padding: 12px 14px !important;
    background: #F4F0EC !important;
    border-left: 3px solid #1B1B1B !important;
    margin: 6px 0 14px 0 !important;
    font-size: 13px !important;
    color: #1B1B1B !important;
    text-align: left !important;
    text-transform: none !important;
    line-height: 1.5 !important;
    width: 100% !important;
  }
  .js-product-detail [class*="payment-discount-price-product-container"] strong,
  .js-product-detail [class*="payment-discount-price-product-container"] .weight-strong {
    font-weight: 700 !important;
  }
  .js-product-detail [class*="payment-discount-price-product-container"] * {
    vertical-align: baseline !important;
  }

  /* Installments — separate line below */
  .js-product-detail .item-installments,
  .js-product-detail [class*="installment"] {
    font-size: 13px !important;
    color: #555 !important;
    margin-top: 4px !important;
    display: block !important;
  }

  /* Free shipping progress bar — distinct minimal style */
  .empuje-shipping-progress {
    background: transparent;
    padding: 10px 0 14px 0;
    margin: 8px 0 14px 0;
    border: none;
  }
  .empuje-shipping-progress-text {
    font-size: 12px;
    font-weight: 400;
    color: #555;
    margin: 0 0 6px 0;
    line-height: 1.4;
  }
  .empuje-shipping-progress-text strong {
    color: #1B1B1B;
    font-weight: 700;
  }
  .empuje-shipping-progress-bar {
    background: #F0EEEB;
    height: 3px;
    border-radius: 0;
    overflow: hidden;
    position: relative;
  }
  .empuje-shipping-progress-fill {
    background: #1B1B1B;
    height: 100%;
    width: 0%;
    transition: width 0.5s ease;
  }
  .empuje-shipping-progress.complete .empuje-shipping-progress-fill {
    width: 100% !important;
  }
  .empuje-shipping-progress.complete .empuje-shipping-progress-text strong {
    color: #2E7D32;
  }

  /* Tabs (Descripcion / Talles / Envios) */
  .empuje-pdp-tabs {
    margin: 24px 0 16px 0;
    border-top: 1px solid #DBD7D2;
  }
  .empuje-pdp-tab {
    border-bottom: 1px solid #DBD7D2;
  }
  .empuje-pdp-tab-header {
    padding: 14px 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1B1B1B;
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .empuje-pdp-tab-header::after {
    content: '+';
    font-size: 18px;
    font-weight: 400;
    transition: transform 0.25s ease;
  }
  .empuje-pdp-tab.open .empuje-pdp-tab-header::after {
    content: '−';
  }
  .empuje-pdp-tab-content {
    display: none;
    padding: 0 0 16px 0;
    font-size: 13px;
    color: #555;
    line-height: 1.6;
  }
  .empuje-pdp-tab.open .empuje-pdp-tab-content {
    display: block;
  }

  /* Image gallery — King of the Congo style: larger fixed-size thumbs */
  .row[data-store*="product-image"] {
    flex-direction: column !important;
    margin: 0 !important;
  }
  /* Thumbs container — flex row with scroll fallback */
  .row[data-store*="product-image"] > .col-2,
  .row[data-store*="product-image"] > .col-md-2 {
    order: 2;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin-top: 12px;
    position: relative;
  }
  .empuje-thumbs-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
  }
  .empuje-thumbs-track::-webkit-scrollbar { display: none; }
  /* Hide thumb container if only 1 image */
  .row[data-store*="product-image"] > .col-2.empuje-thumbs-single,
  .row[data-store*="product-image"] > .col-md-2.empuje-thumbs-single {
    display: none !important;
  }
  .row[data-store*="product-image"] > .product-image-container,
  .row[data-store*="product-image"] > .col-md-10,
  .row[data-store*="product-image"] > .col-12 {
    order: 1;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    padding: 0 !important;
  }
  /* Each thumb: 1/4 of container minus gaps — consistent for any number of images */
  .row[data-store*="product-image"] .js-product-thumb {
    flex: 0 0 calc((100% - 30px) / 4) !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    aspect-ratio: 4 / 5 !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    position: relative !important;
    border: 1.5px solid transparent;
    transition: border-color 0.2s ease;
    cursor: pointer;
    box-sizing: border-box !important;
  }
  .row[data-store*="product-image"] .js-product-thumb:hover {
    border-color: #DBD7D2;
  }
  .row[data-store*="product-image"] .js-product-thumb.selected {
    border-color: #1B1B1B;
  }
  /* Image inside thumb — override theme's img-absolute-centered (which crops edges) */
  .row[data-store*="product-image"] .js-product-thumb img,
  .row[data-store*="product-image"] .js-product-thumb img.img-absolute-centered {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    display: block;
  }
  @media (max-width: 768px) {
    .row[data-store*="product-image"] > .col-2,
    .row[data-store*="product-image"] > .col-md-2 {
      gap: 6px;
      margin-top: 10px;
    }
    .row[data-store*="product-image"] .js-product-thumb {
      flex: 0 0 calc((100% - 20px) / 4) !important;
      width: auto !important;
      height: auto !important;
      max-width: none !important;
      min-width: 0 !important;
      aspect-ratio: 4 / 5 !important;
    }
  }

  /* Hide credit card icons in PDP (per Clarity insights) */
  .js-product-detail .js-payment-method-title,
  .js-product-detail .info-payment-method-cards-container,
  .js-product-detail [class*="cards-icons"],
  .js-product-detail .visa, .js-product-detail .mastercard,
  .js-product-detail .info-payment-method-container .row img {
    display: none !important;
  }
  .js-product-detail #info-payment-method-cash,
  .js-product-detail #info-payment-method-redirect,
  .js-product-detail .js-info-payment-method-container {
    display: none !important;
  }

  @media (max-width: 768px) {
    .js-product-detail #price_display.js-price-display {
      font-size: 24px !important;
    }
    .product-thumbs-container .swiper-slide,
    .product-thumb-img {
      width: 56px !important;
      height: 72px !important;
    }
  }


  /* Quantity selector — minus left, plus right, space-between */
  .js-product-detail .js-quantity,
  .js-product-detail .form-quantity {
    display: block !important;
    border: 1px solid #DBD7D2 !important;
    height: 44px;
    width: 130px !important;
    margin-bottom: 16px;
    background: #fff;
    padding: 0 !important;
  }
  .js-product-detail .form-quantity .form-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    height: 100%;
    margin: 0 !important;
    justify-content: space-between;
  }
  .js-product-detail .js-quantity-down,
  .js-product-detail .js-quantity-up,
  .js-product-detail .form-quantity-icon {
    width: 38px !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    color: #1B1B1B !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0;
    order: initial !important;
  }
  .js-product-detail .js-quantity-down { order: 1 !important; }
  .js-product-detail .form-control-container.col,
  .js-product-detail .form-quantity .form-control-container {
    order: 2 !important;
    flex: 1 !important;
    max-width: none !important;
    padding: 0 !important;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .js-product-detail .js-quantity-up { order: 3 !important; }
  .js-product-detail .js-quantity-input,
  .js-product-detail .form-quantity input {
    border: none !important;
    text-align: center !important;
    font-weight: 600 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
  }
  .js-product-detail .js-quantity-input::-webkit-outer-spin-button,
  .js-product-detail .js-quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .js-product-detail .js-quantity-down:hover,
  .js-product-detail .js-quantity-up:hover {
    background: #F4F0EC !important;
  }
  .js-product-detail .form-quantity .form-label { display: none !important; }
  /* Wrapper col (col-4 from theme) — remove width constraint */
  .js-product-detail [class*="col-4"]:has(.form-quantity) {
    flex: 0 0 auto !important;
    max-width: none !important;
    padding-right: 12px;
  }

  /* === EL CALCULADOR DE ENVÍO DECÍA "+" Y NADA MÁS (26/8/2026) ===
     Al lado del código postal, el tema pone un botón de 26 x 30 px cuyo único contenido
     es un ícono "+". No dice qué hace: la clienta escribe el CP y no se entera de que
     ahí se aprieta para saber cuánto sale el envío.
     Ahora es un botón sólido con la palabra adentro del campo.

     POR QUÉ "Calcular" Y NO "Cotizar": es la palabra que la clienta acaba de leer un
     renglón más arriba ("Calculá el costo ingresando tu código postal"), es el nombre
     que el propio botón YA tenía por dentro (aria-label="Calcular envío"), y "cotizar"
     en Juvia es lo que pide un mayorista: para quien compra una blusa suena a trámite.

     LA PALABRA VA POR CSS, NO POR JAVASCRIPT, a propósito: el tema vuelve a dibujar este
     bloque cada vez que se cotiza (medido: después de calcular, el botón sigue teniendo
     solo el ícono), así que un texto puesto a mano se perdería en el primer cálculo.

     De paso arregla el tamaño del blanco: 26 x 30 px es bastante menos que los 44 que se
     recomiendan para tocar con el dedo. Con la palabra adentro pasa a medir más del doble.

     Vale para los TRES lugares donde aparece el calculador —ficha, carrito y cajón
     lateral— porque es el mismo botón del tema en los tres. */
  /* EL BOTÓN OCUPA TODO EL ALTO DEL CAMPO Y SE PEGA AL BORDE (26/8/2026, pedido de Mati).
     Antes flotaba adentro con alto fijo de 30px, y ahí estaba el problema: el campo mide
     37px en escritorio pero 33 en celular, así que en el teléfono quedaban 2px de aire
     arriba y 2 abajo y se veía apretado y corrido. Cualquier alto fijo se rompe en algún
     ancho.
     El alto sale del contenedor (`.position-relative`), que tiene EXACTAMENTE la misma
     caja que el campo —mismo top, mismo bottom, sin padding vertical—, así que el botón
     queda calzado adentro del borde en cualquier pantalla, sin ningún número medido.
     El `right: 6px` sale del padding lateral del contenedor (5px) más el borde del
     campo (1px): así el botón termina justo contra el borde interno derecho.

     EL ALTO SE FIJA CON `height: calc(100% - 2px)`, NO CON `top` + `bottom` (27/8/2026).
     La primera versión anclaba el botón arriba y abajo y dejaba el alto en `auto`. En
     esta máquina se veía perfecto, pero en el teléfono de Mati el botón salía MÁS ALTO
     que el campo y colgaba por abajo. La diferencia es el tamaño del texto: cuando el
     teléfono agranda la letra —iOS infla el texto de algunos bloques por su cuenta, y
     además está el ajuste de tamaño del sistema— un alto `auto` lo sigue y el botón
     crece; con `top`+`bottom` eso no debería pasar, pero Safari resuelve distinto el
     alto automático de una caja absoluta que además es flex, y termina midiéndola por su
     contenido. Probado acá: con la letra forzada a 26px la versión vieja pasaba de 31 a
     52px de alto y se desbordaba; ésta se queda en 31 y calzada.
     `calc(100% - 2px)` es un alto DEFINIDO: se mide contra el contenedor, nunca contra el
     texto, así que ninguna letra grande lo puede estirar. El `line-height: 1` y el
     `text-size-adjust: 100%` son el segundo cinturón: piden que la letra no se infle. */
  /* DOS SELECTORES A PROPÓSITO. El tema posiciona este botón con `.form-group-inline
     .btn`, que tiene DOS clases: le gana en especificidad a `.js-calculate-shipping`
     sola, aunque yo ponga !important. Por eso va también la versión de dos clases.
     Y OJO CON EL `transform`: esa regla del tema centra el botón con
     `top: 50%` + `translateY(-50%)`. Yo le pisaba el `top` pero no el transform, así que
     el botón quedaba corrido media altura hacia arriba —15,5px— y se veía descolgado del
     campo. Anularlo es imprescindible; si algún día alguien saca esa línea, vuelve. */
  .js-calculate-shipping,
  .form-group-inline .js-calculate-shipping,
  /* El tercero es por el radio: más arriba hay una regla vieja
     `#single-product .empuje-native-ship .btn { border-radius: 0 !important }` que lleva
     un #id y le gana a cualquier clase. Sin esta línea el botón queda con las esquinas
     rectas adentro de un campo redondeado y asoman dos puntitas blancas. */
  #single-product .empuje-native-ship .js-calculate-shipping {
    position: absolute !important;
    width: auto !important;
    height: calc(100% - 2px) !important;
    min-height: 0 !important;
    max-height: none !important;
    top: 1px !important;
    bottom: auto !important;
    right: 6px !important;
    transform: none !important;
    padding: 0 15px !important;
    background: #1B1B1B !important;
    color: #fff !important;
    border: 0 !important;
    /* Acompaña las esquinas derechas del campo (4px de radio, menos 1 de borde). */
    border-radius: 0 3px 3px 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* El tema le pone `transition: all .4s` a los botones, así que CUALQUIER cambio de
       alto se anima: el botón se estira durante casi medio segundo hasta encontrar su
       medida. Que el color siga animándose está bien; que se anime el tamaño, no. */
    transition-property: background-color, color, opacity !important;
  }
  .js-calculate-shipping .js-calculate-shipping-wording svg { display: none !important; }
  .js-calculate-shipping .js-calculate-shipping-wording::after {
    content: "Calcular";
    font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase;
    font-weight: 500; color: #fff;
  }
  /* El código postal no puede quedar escrito debajo del botón (95px de ancho + el aire). */
  .js-shipping-input { padding-right: 108px !important; }

  /* Custom shipping/pickup info section */
  .empuje-pdp-shipping-info {
    margin: 18px 0 0 0;
    border-top: 1px solid #DBD7D2;
    /* no bottom border — next section provides top border */
  }
  .empuje-pdp-shipping-info-row {
    padding: 12px 0;
    border-bottom: 1px solid #F4F0EC;
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  .empuje-pdp-shipping-info-row:last-child { border-bottom: none; }
  .empuje-pdp-shipping-info-icon {
    width: 22px; height: 22px;
    flex-shrink: 0;
    color: #1B1B1B;
    margin-top: 2px;
  }
  .empuje-pdp-shipping-info-text {
    flex: 1;
    font-size: 13px;
    color: #1B1B1B;
    line-height: 1.4;
  }
  .empuje-pdp-shipping-info-text strong { display: block; margin-bottom: 2px; font-weight: 600; }
  .empuje-pdp-shipping-info-text span { color: #555; font-size: 12px; }
  .empuje-pdp-shipping-cta {
    color: #1B1B1B;
    text-decoration: underline;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 12px;
  }

  /* Shipping calculator inline form */
  .empuje-shipping-calc-form {
    display: flex;
    gap: 0;
    margin-top: 8px;
  }
  .empuje-shipping-calc-form input {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid #DBD7D2;
    font-size: 13px;
    border-radius: 0;
    background: #fff;
  }
  .empuje-shipping-calc-form input:focus {
    outline: none;
    border-color: #1B1B1B;
  }
  .empuje-shipping-calc-form button {
    padding: 9px 18px;
    background: #1B1B1B;
    color: #fff;
    border: none;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    border-radius: 0;
  }
  .empuje-shipping-calc-form button:hover {
    background: #555;
  }
  .empuje-shipping-calc-result {
    margin-top: 10px;
    padding: 0;
    font-size: 12px;
  }
  .empuje-shipping-calc-result.has-result {
    margin-top: 10px;
    padding: 0;
    background: transparent;
    display: block;
    border: none;
  }
  .empuje-shipping-calc-result-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #F0EEEB;
  }
  .empuje-shipping-calc-result-row:last-child { border-bottom: none; }
  .empuje-shipping-calc-result-row .empuje-cell-label {
    color: #555;
    font-weight: 400;
  }
  .empuje-shipping-calc-result-row .empuje-cell-value {
    color: #1B1B1B;
    font-weight: 600;
    text-align: right;
  }
  .empuje-shipping-calc-result-row.cost .value {
    font-size: 14px;
    font-weight: 700;
  }

  /* === Full-width info section below the PDP gallery === */
  .empuje-pdp-full-info {
    width: 100%;
    max-width: 100vw;
    margin: 60px 0 40px 0;
    padding: 40px 0 0 0;
    border-top: 1px solid #DBD7D2;
    background: #FFFFFF;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  .empuje-pdp-full-info-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    width: 100%;
  }
  .empuje-pdp-info-body {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }
  .empuje-pdp-info-body p,
  .empuje-pdp-info-body div,
  .empuje-pdp-info-body ul,
  .empuje-pdp-info-body li {
    max-width: 100%;
    overflow-wrap: break-word;
  }
  /* Make tables scrollable on mobile if content overflows */
  .empuje-pdp-info-body table {
    max-width: 100%;
    table-layout: auto;
  }
  @media (max-width: 768px) {
    .empuje-pdp-full-info {
      max-width: 100vw !important;
      width: 100% !important;
      overflow-x: hidden !important;
      box-sizing: border-box !important;
    }
    .empuje-pdp-full-info-inner {
      padding: 0 16px !important;
      max-width: 100% !important;
      width: 100% !important;
      box-sizing: border-box !important;
      min-width: 0 !important;
    }
    .empuje-pdp-info {
      max-width: 100% !important;
      width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
    }
    .empuje-pdp-info-section {
      max-width: 100% !important;
      width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
      grid-template-columns: 1fr !important;
    }
    /* CRITICAL: grid items need min-width: 0 to allow shrinking below content size */
    .empuje-pdp-info-section > * {
      min-width: 0 !important;
      max-width: 100% !important;
    }
    .empuje-pdp-info-body {
      max-width: 100% !important;
      width: 100% !important;
      min-width: 0 !important;
      overflow-wrap: break-word !important;
      word-wrap: break-word !important;
      box-sizing: border-box !important;
    }
    .empuje-pdp-info-body p,
    .empuje-pdp-info-body div,
    .empuje-pdp-info-body ul,
    .empuje-pdp-info-body li,
    .empuje-pdp-info-body span {
      max-width: 100% !important;
      overflow-wrap: break-word !important;
      word-break: break-word !important;
    }
    .empuje-pdp-info-body table {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      white-space: nowrap;
      max-width: 100%;
    }
    .empuje-pdp-info-body table td,
    .empuje-pdp-info-body table th {
      white-space: nowrap;
    }
    .empuje-pdp-care-list {
      max-width: 100% !important;
      grid-template-columns: 1fr !important;
    }
    .empuje-pdp-care-item {
      max-width: 100% !important;
      overflow-wrap: break-word !important;
    }
    .empuje-pdp-care-item span:last-child {
      flex: 1;
      min-width: 0;
      overflow-wrap: break-word;
    }
  }
  /* Structured description (now lives in the full-info wrapper) */
  .empuje-pdp-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
  }
  .empuje-pdp-info-section {
    padding: 24px 0;
    border-top: 1px solid #DBD7D2;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
  }
  .empuje-pdp-info-section:first-child {
    border-top: none;
    padding-top: 0;
  }
  .empuje-pdp-info-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .empuje-pdp-info-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #1B1B1B;
    margin: 0;
    align-self: start;
    position: sticky;
    top: 80px;
  }
  .empuje-pdp-info-body {
    font-size: 14px;
    line-height: 1.7;
    color: #555;
    max-width: 720px;
  }
  .empuje-pdp-info-body p { margin: 0 0 12px 0; }
  .empuje-pdp-info-body p:last-child { margin: 0; }
  .empuje-pdp-info-body strong { color: #1B1B1B; font-weight: 600; }
  /* Style elements that may come from the admin's rich-text description */
  .empuje-pdp-info-body h2,
  .empuje-pdp-info-body h3,
  .empuje-pdp-info-body h4 {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #1B1B1B;
    font-weight: 700;
    margin: 18px 0 10px 0;
  }
  .empuje-pdp-info-body ul,
  .empuje-pdp-info-body ol {
    margin: 0 0 12px 0;
    padding-left: 22px;
  }
  .empuje-pdp-info-body ul li,
  .empuje-pdp-info-body ol li {
    margin-bottom: 4px;
    line-height: 1.55;
  }
  .empuje-pdp-info-body img {
    max-width: 100%;
    height: auto;
    margin: 12px 0;
    border-radius: 2px;
  }
  .empuje-pdp-info-body a {
    color: #1B1B1B;
    text-decoration: underline;
  }
  .empuje-pdp-info-body blockquote {
    margin: 12px 0;
    padding: 12px 16px;
    border-left: 3px solid #DBD7D2;
    color: #555;
    font-style: italic;
  }
  .empuje-pdp-info-body table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
  }
  .empuje-pdp-info-body table th,
  .empuje-pdp-info-body table td {
    padding: 10px 14px;
    text-align: left;
    font-size: 13px;
    border-bottom: 1px solid #F4F0EC;
  }
  .empuje-pdp-info-body table th {
    background: #F4F0EC;
    font-weight: 600;
    color: #1B1B1B;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
  }
  /* Care icons list */
  .empuje-pdp-care-list {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 24px;
  }
  .empuje-pdp-care-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #555;
    padding: 6px 0;
  }
  .empuje-pdp-care-icon {
    font-size: 18px;
    flex-shrink: 0;
  }

  /* Mobile: stack title above body */
  @media (max-width: 768px) {
    .empuje-pdp-full-info {
      margin: 40px 0 30px 0;
      padding: 30px 0 0 0;
    }
    .empuje-pdp-full-info-inner {
      padding: 0 16px;
    }
    .empuje-pdp-info-section {
      grid-template-columns: 1fr;
      gap: 12px;
      padding: 20px 0;
    }
    .empuje-pdp-info-title {
      position: static;
      font-size: 11px;
      letter-spacing: 1.5px;
    }
    .empuje-pdp-info-body {
      font-size: 13px;
      line-height: 1.65;
    }
    .empuje-pdp-care-list {
      grid-template-columns: 1fr;
    }
  }

  /* Hide old tabs and any structured info inside the side info column
     (we now render full-width below the gallery) */
  .empuje-pdp-tabs { display: none !important; }
  [data-store*="product-info"] .empuje-pdp-info { display: none !important; }


  /* ============ Custom Payment Methods Accordion ============ */
  .empuje-pdp-payments {
    margin: 24px 0 0 0;
    border-top: 1px solid #DBD7D2;
    /* No bottom border — next section provides top border */
  }
  .empuje-pdp-payments-header {
    padding: 16px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
  }
  .empuje-pdp-payments-header-icon {
    width: 22px; height: 22px;
    color: #1B1B1B;
  }
  .empuje-pdp-payments-header-title {
    flex: 1;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #1B1B1B;
  }
  .empuje-pdp-payments-header-chevron {
    width: 12px; height: 12px;
    border-right: 1.5px solid #1B1B1B;
    border-bottom: 1.5px solid #1B1B1B;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
  }
  .empuje-pdp-payments.open .empuje-pdp-payments-header-chevron {
    transform: rotate(-135deg);
  }
  .empuje-pdp-payments-body {
    display: none;
    padding-bottom: 16px;
  }
  .empuje-pdp-payments.open .empuje-pdp-payments-body { display: block; }

  /* Payment group (subdesplegable) */
  .empuje-pm-group {
    border-top: 1px solid #F4F0EC;
  }
  .empuje-pm-group:first-child { border-top: none; }
  .empuje-pm-group-header {
    padding: 12px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
  }
  .empuje-pm-group-title {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: #1B1B1B;
    letter-spacing: 0.3px;
  }
  .empuje-pm-group-badge {
    background: #EAF3EC;
    color: #2E7D32;
    border: 1px solid #2E7D32;
    border-radius: 2px;
    padding: 2px 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
  }
  .empuje-pm-group-chev {
    width: 8px; height: 8px;
    border-right: 1.5px solid #555;
    border-bottom: 1.5px solid #555;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
  }
  .empuje-pm-group.open .empuje-pm-group-chev { transform: rotate(-135deg); }
  .empuje-pm-group-content {
    display: none;
    padding: 0 0 12px 0;
  }
  .empuje-pm-group.open .empuje-pm-group-content { display: block; }

  /* Sub-section inside a group (e.g. Crédito vs Débito vs Efectivo within MP) */
  .empuje-pm-subsection { margin-bottom: 14px; }
  .empuje-pm-subsection:last-child { margin-bottom: 0; }
  .empuje-pm-subsection-title {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 8px 0;
  }
  .empuje-pm-row {
    padding: 9px 0;
    border-bottom: 1px solid #F4F0EC;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
  }
  .empuje-pm-row:last-child { border-bottom: none; }
  .empuje-pm-row-label {
    color: #1B1B1B;
    flex: 1;
  }
  .empuje-pm-row-label strong { font-weight: 700; }
  .empuje-pm-row-total {
    color: #555;
    font-size: 11px;
    white-space: nowrap;
  }
  .empuje-pm-row-total strong {
    color: #1B1B1B;
    font-weight: 700;
  }
  .empuje-pm-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
  }
  .empuje-pm-card-name {
    display: inline-block;
    padding: 3px 7px;
    background: #F4F0EC;
    border: 1px solid #DBD7D2;
    font-size: 10px;
    color: #1B1B1B;
    font-weight: 500;
  }
  .empuje-pm-discount-row {
    background: #1B1B1B;
    color: #fff;
    padding: 10px 12px;
    margin: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .empuje-pm-discount-label {
    font-size: 12px;
    font-weight: 600;
  }
  .empuje-pm-discount-total {
    font-size: 14px;
    font-weight: 700;
  }
  .empuje-pm-discount-total .original-price {
    text-decoration: line-through;
    opacity: 0.55;
    font-weight: 400;
    font-size: 12px;
    margin-right: 6px;
  }

  /* Hide the native payment details / methods (we replace with custom accordion) */
  .js-product-detail .js-product-payment-details,
  .js-product-detail .js-payment-details-button,
  .js-product-detail [class*="payment-details"],
  .js-product-detail [data-modal-url*="payment"],
  .js-product-detail [data-toggle*="payment-modal"],
  .js-product-detail .js-payment-method-title,
  .js-product-detail .js-info-payment-method-container,
  .js-product-detail #info-payment-method-cash,
  .js-product-detail #info-payment-method-redirect,
  .js-product-detail #info-payment-method-wire_transfer,
  .js-product-detail [class*="info-payment-method"],
  .js-product-detail .product-payment-details,
  .js-product-detail [data-store*="payment-methods"],
  .js-product-detail [data-component*="payment-methods"] {
    display: none !important;
  }


  /* Quantity stock warning */
  .empuje-qty-warning {
    background: #1B1B1B;
    color: #fff;
    padding: 9px 14px;
    margin: 10px 0 14px 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: empujeQtyFadeIn 0.25s ease;
  }
  @keyframes empujeQtyFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }


  /* === New MP/payment plan design === */
  .empuje-pm-plan-block {
    padding: 6px 0 14px 0;
    border-top: 1px solid #F4F0EC;
  }
  .empuje-pm-card-group {
    background: #FAFAF8;
    padding: 4px 12px 8px 12px;
    margin: 8px 0;
    border-left: 2px solid #DBD7D2;
  }
  .empuje-pm-card-group-cards {
    font-size: 10px;
    color: #888;
    line-height: 1.5;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #F0EEEB;
  }
  .empuje-pm-card-group-label {
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
    color: #555;
    font-size: 9px;
    margin-right: 4px;
  }
  .empuje-pm-plan-block:first-child { border-top: none; padding-top: 0; }
  .empuje-pm-plan-header {
    font-size: 10px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 8px 0 8px 0;
  }
  .empuje-pm-plan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
  }
  .empuje-pm-plan-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
  }
  .empuje-pm-plan-qty {
    font-size: 13px;
    font-weight: 700;
    color: #1B1B1B;
    line-height: 1.2;
  }
  .empuje-pm-plan-detail {
    font-size: 11px;
    color: #777;
    line-height: 1.3;
  }
  .empuje-pm-plan-total {
    font-size: 13px;
    font-weight: 700;
    color: #1B1B1B;
    white-space: nowrap;
    text-align: right;
  }
  .empuje-pm-plan-cards {
    font-size: 10px;
    color: #999;
    line-height: 1.4;
    padding: 0 0 4px 0;
    margin-top: -4px;
  }


  /* Thumbs carousel nav arrows (shown only when overflow) */
  .empuje-thumbs-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.95);
    border-radius: 50%;
    border: 1px solid #DBD7D2;
    cursor: pointer;
    z-index: 5;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #1B1B1B;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    transition: opacity 0.2s ease, background 0.2s ease;
    opacity: 0.9;
  }
  .empuje-thumbs-nav:hover { background: #fff; opacity: 1; }
  .empuje-thumbs-nav.empuje-thumbs-nav-prev { left: -10px; }
  .empuje-thumbs-nav.empuje-thumbs-nav-next { right: -10px; }
  .empuje-thumbs-nav[data-disabled="true"] {
    display: none !important;
  }
  .empuje-thumbs-nav svg {
    width: 14px;
    height: 14px;
  }
  @media (max-width: 768px) {
    .empuje-thumbs-nav {
      display: none !important;  /* Mobile uses native scroll */
    }
  }

  /* Hide theme's native "+N" overlay (.thumb-see-more) on thumbs */
  .row[data-store*="product-image"] .thumb-see-more,
  .row[data-store*="product-image"] .item-more-images-message,
  .row[data-store*="product-image"] [class*="more-images-message"],
  .row[data-store*="product-image"] [class*="more-images-overlay"] {
    display: none !important;
  }

  /* Boost z-index on arrows so they're always on top */
  .empuje-thumbs-nav {
    z-index: 20 !important;
  }


  /* Prevent horizontal overflow only on html (NOT body — breaks sticky positioning) */
  html { overflow-x: hidden !important; max-width: 100vw !important; }
  /* PDP overflow guard SOLO en mobile — desktop conserva su layout 2-col del tema */
  @media (max-width: 768px) {
    body.template-product { overflow-x: hidden !important; }
    body.template-product .container,
    body.template-product .container-fluid {
      max-width: 100% !important;
      padding-left: 12px !important;
      padding-right: 12px !important;
    }
  }
  /* Force related products section to respect viewport on mobile */
  @media (max-width: 768px) {
    .section-products-related,
    .js-related-products {
      max-width: 100vw !important;
      overflow-x: hidden !important;
    }
    .section-products-related .swiper-container,
    .js-related-products .swiper-container {
      max-width: 100% !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      touch-action: pan-x pan-y !important;
    }
    .section-products-related .swiper-wrapper,
    .js-related-products .swiper-wrapper {
      width: max-content !important;
      transform: none !important;
    }
    .section-products-related .swiper-slide,
    .js-related-products .swiper-slide {
      flex: 0 0 220px !important;
      width: 220px !important;
      max-width: 220px !important;
      transform: none !important;
    }
  }

  /* ============ Related Products Section ============ */
  .section-products-related,
  .js-related-products {
    margin: 40px 0 60px 0 !important;
    padding-top: 30px;
    border-top: 1px solid #DBD7D2;
    /* Hide entirely until JS done — display:none avoids transition issues */
    display: none !important;
  }
  .section-products-related[data-empuje-rel-done],
  .js-related-products[data-empuje-rel-done] {
    display: block !important;
  }
  /* Hide native theme swiper arrows in related section (we use our own) */
  .section-products-related .js-swiper-related-prev,
  .section-products-related .js-swiper-related-next,
  .section-products-related .products-section-prev-container,
  .section-products-related .products-section-next-container,
  .js-related-products .js-swiper-related-prev,
  .js-related-products .js-swiper-related-next,
  .js-related-products .products-section-prev-container,
  .js-related-products .products-section-next-container,
  .js-related-products .swiper-button-prev,
  .js-related-products .swiper-button-next,
  .section-products-related .swiper-button-prev,
  .section-products-related .swiper-button-next {
    display: none !important;
    visibility: hidden !important;
  }
  .section-products-related .section-title,
  .js-related-products .section-title {
    margin-bottom: 24px !important;
    text-align: center;
  }
  .section-products-related .section-title h2,
  .section-products-related .section-title h3,
  .section-products-related .section-title .h5,
  .js-related-products .section-title h2,
  .js-related-products .section-title h3,
  .js-related-products .section-title .h5 {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: #1B1B1B !important;
    margin: 0 !important;
  }

  /* Force the swiper container and wrapper to behave as a flex grid */
  .section-products-related .swiper-container,
  .js-related-products .swiper-container {
    width: 100% !important;
    overflow: visible !important;
    height: auto !important;
  }
  .section-products-related .swiper-wrapper,
  .js-related-products .swiper-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0;
    width: 100% !important;
    transform: none !important;
    justify-content: center !important;
    height: auto !important;
  }
  .section-products-related .swiper-slide,
  .js-related-products .swiper-slide {
    flex: 0 0 auto !important;
    height: auto !important;
  }

  /* Desktop: adaptive width based on # of products (set via JS as data-count) */
  @media (min-width: 769px) {
    /* Inner card override — don't let listing's col-md-3 rule break the slide width */
    .section-products-related .swiper-slide .item-product.grid-item,
    .js-related-products .swiper-slide .item-product.grid-item {
      flex: 0 0 100% !important;
      max-width: 100% !important;
    }

    /* Default 6 columns */
    .section-products-related .swiper-slide,
    .js-related-products .swiper-slide {
      flex: 0 0 16.6666% !important;
      max-width: 16.6666% !important;
      padding: 0 6px;
      box-sizing: border-box;
    }

    /* Adaptive: 3 products → 33.33% each (fill row) */
    .section-products-related[data-count="3"] .swiper-slide,
    .js-related-products[data-count="3"] .swiper-slide {
      flex: 0 0 33.3333% !important;
      max-width: 33.3333% !important;
    }
    /* 4 products → 25% each */
    .section-products-related[data-count="4"] .swiper-slide,
    .js-related-products[data-count="4"] .swiper-slide {
      flex: 0 0 25% !important;
      max-width: 25% !important;
    }
    /* 5 products → 20% each */
    .section-products-related[data-count="5"] .swiper-slide,
    .js-related-products[data-count="5"] .swiper-slide {
      flex: 0 0 20% !important;
      max-width: 20% !important;
    }
  }

  /* Mobile: 2 columns (50% each) — like listing on mobile */
  @media (max-width: 768px) {
    .section-products-related,
    .js-related-products {
      margin: 30px 0 50px 0 !important;
      padding-top: 20px;
    }
    .section-products-related .swiper-wrapper,
    .js-related-products .swiper-wrapper {
      justify-content: flex-start !important;
    }
    .section-products-related .swiper-slide .item-product.grid-item,
    .js-related-products .swiper-slide .item-product.grid-item {
      flex: 0 0 100% !important;
      max-width: 100% !important;
    }
    .section-products-related .swiper-slide,
    .js-related-products .swiper-slide {
      flex: 0 0 50% !important;
      max-width: 50% !important;
      padding: 0 4px;
      box-sizing: border-box;
    }
    .section-products-related .swiper-button-prev,
    .section-products-related .swiper-button-next,
    .js-related-products .swiper-button-prev,
    .js-related-products .swiper-button-next {
      display: none !important;
    }
  }

  /* ATC button inside related products: ensure center alignment */
  .section-products-related .js-addtocart,
  .js-related-products .js-addtocart,
  .section-products-related input[type="submit"].btn-primary,
  .js-related-products input[type="submit"].btn-primary {
    text-align: center !important;
    text-align-last: center !important;
    -moz-text-align-last: center !important;
  }

  /* Hide complementary products section (we focus on related) */
  .js-complementary-products {
    display: none !important;
  }


  /* Related products carousel arrows — square + black, distinct from product slider arrows */
  .empuje-rel-arrows-host {
    position: relative;
  }
  .empuje-rel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #1B1B1B;
    border-radius: 0;
    border: none;
    cursor: pointer;
    z-index: 10;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    transition: background 0.2s ease, transform 0.15s ease;
  }
  .empuje-rel-nav:hover {
    background: #555;
    transform: translateY(-50%) scale(1.06);
  }
  /* Position arrows just outside the carousel container, but close to it */
  .empuje-rel-nav-prev { left: -20px; }
  .empuje-rel-nav-next { right: -20px; }
  .empuje-rel-nav svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
  }
  @media (max-width: 768px) {
    .empuje-rel-nav { display: none !important; }
  }
  @media (max-width: 1100px) {
    /* On medium screens, put arrows INSIDE the container so they don't get cut */
    .empuje-rel-nav-prev { left: 0; }
    .empuje-rel-nav-next { right: 0; }
  }
  /* Hide native scrollbar of the carousel */
  .empuje-rel-scroll::-webkit-scrollbar { display: none; }
  .empuje-rel-scroll { scrollbar-width: none; }

  /* Subtle right-edge fade as carousel hint (when there's overflow) */
  .empuje-rel-arrows-host::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.85));
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .empuje-rel-arrows-host.empuje-rel-has-overflow::after {
    opacity: 1;
  }


  /* Ensure ATC text is centered in all contexts (PDP, listing, related, mobile).
     Exclude .js-addtocart-placeholder (hidden div mirror used by theme during async). */
  input.js-addtocart:not(.js-addtocart-placeholder),
  input.js-prod-submit-form,
  .js-addtocart:not(.js-addtocart-placeholder),
  .item-btn-quickshop,
  .js-item-buy-open,
  button.js-addtocart:not(.js-addtocart-placeholder),
  a.js-addtocart:not(.js-addtocart-placeholder),
  .js-product-detail input[type="submit"].btn-primary,
  .js-product-detail button.btn-primary:not(.js-addtocart-placeholder),
  .js-item-product input.js-addtocart:not(.js-addtocart-placeholder),
  .js-item-product input.js-prod-submit-form,
  .js-item-product .js-addtocart:not(.js-addtocart-placeholder),
  .js-item-product .item-btn-quickshop,
  .js-item-product .js-item-buy-open,
  .js-item-product button.js-addtocart:not(.js-addtocart-placeholder),
  .js-item-product a.js-addtocart:not(.js-addtocart-placeholder) {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    text-align-last: center !important;
    -moz-text-align-last: center !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }
  /* Inner text wrappers inside ATC button (catch any nested level) */
  .js-item-product .js-addtocart,
  .js-item-product .js-addtocart *,
  .js-item-product .item-btn-quickshop,
  .js-item-product .item-btn-quickshop *,
  .js-item-product button.js-addtocart,
  .js-item-product button.js-addtocart * {
    text-align: center !important;
    text-align-last: center !important;
    -moz-text-align-last: center !important;
    float: none !important;
  }
  .js-item-product .js-addtocart > *,
  .js-item-product .item-btn-quickshop > *,
  .js-item-product button.js-addtocart > * {
    display: block !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  /* Hide any icons inside ATC button (cart icons etc that mess centering) */
  .js-item-product .js-addtocart svg,
  .js-item-product .js-addtocart i,
  .js-item-product .js-addtocart .icon,
  .js-item-product .item-btn-quickshop svg,
  .js-item-product .item-btn-quickshop i,
  .js-item-product .item-btn-quickshop .icon {
    display: none !important;
  }
  /* Hide ONLY the quickshop CLOSE button (rendered inline next to ATC).
     Keep .js-item-buy-open (the hover trigger) and other quickshop pieces working. */
  .js-item-product .js-item-buy-close,
  .js-item-product button.js-item-buy-close.item-btn-quickshop {
    display: none !important;
  }
  /* Ensure the ATC takes full width of its container */
  .js-item-product input.js-addtocart,
  .js-item-product input.js-prod-submit-form {
    width: 100% !important;
    display: block !important;
  }
  /* ATC buttons in listings/related: allow wrap, centered, reasonable font.
     text-align: center centers each wrapped line on inputs in all modern browsers. */
  .js-item-product input.js-addtocart,
  .js-item-product input.js-prod-submit-form,
  .js-item-product .js-addtocart,
  .js-item-product .item-btn-quickshop,
  .js-item-product button.js-addtocart {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    line-height: 1.25 !important;
    word-break: normal !important;
  }
  /* PDP main ATC: force centering even though it's wide and rarely wraps.
     IMPORTANT: do NOT match .js-addtocart-placeholder (hidden div mirror). */
  .js-product-detail input.js-addtocart:not(.js-addtocart-placeholder),
  .js-product-detail input[type="submit"].btn-primary,
  .js-product-detail button.btn-primary:not(.js-addtocart-placeholder) {
    text-align: center !important;
    text-align-last: center !important;
    -moz-text-align-last: center !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    display: block !important;
    width: 100% !important;
  }
  /* Keep the disabled placeholder hidden — theme uses it during async actions */
  .js-product-detail .js-addtocart-placeholder {
    display: none !important;
  }

  /* Arrows: vertically centered relative to IMAGE area, not whole card.
     JS sets --empuje-arrow-top to the image midpoint in px. Fallback 35%. */
  .empuje-rel-arrows-host {
    position: relative !important;
  }
  .empuje-rel-nav {
    position: absolute !important;
    top: var(--empuje-arrow-top, 35%) !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
    bottom: auto !important;
  }
  .empuje-rel-nav-prev,
  .empuje-rel-nav-next {
    top: var(--empuje-arrow-top, 35%) !important;
    bottom: auto !important;
  }

  /* ====================================================================
     HOME EMPUJE — USP bar, Hero 90vh, Categorías destacadas, Brand story
     ==================================================================== */

  /* USP bar: FIXED pre-header — always on top, header pushes down */
  .empuje-home-usp {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147483647; /* max possible */
    background: #1B1B1B;
    color: #F4F0EC;
    height: 34px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    overflow: visible; /* permitir el ::after extender hacia abajo */
    box-sizing: border-box;
    border: none !important;
    outline: none !important;
  }
  /* Extiende el USP 2px hacia abajo sin alterar layout — tapa cualquier gap subpixel */
  .empuje-home-usp::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--jb-bg, #E9E2D9);
    z-index: -1;
  }
  @media (max-width: 768px) {
    .empuje-home-usp { height: 32px; }
  }
  /* Push everything below by the bar's height (34px desktop / 32px mobile).
     Use exact bar height — header overlap of 1px via JS prevents subpixel gap.
     3/9/2026: bajó de 40/36 a 34/32 junto con el encabezado (ver el bloque
     "ENCABEZADO FINO" más abajo). Si tocás una altura, tenés que tocar las cuatro:
     estas dos reglas, el padding-top del media query de abajo, y las dos del
     JavaScript (uspHeight y el setProperty inline, que le gana a todo esto). */
  body.empuje-has-usp { padding-top: 34px; }
  body.empuje-has-usp .js-head-main,
  body.empuje-has-usp .head-main,
  body.empuje-has-usp .js-fs-header,
  body.empuje-has-usp #header,
  body.empuje-has-usp .header-top,
  body.empuje-has-usp header,
  body.empuje-has-usp header[role="banner"] {
    top: 40px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    border-top: none !important;
    border-bottom: 1px solid #EDE9E4 !important;
  }
  /* Disable transparent header (Río theme adds .head-transparent on home) */
  body.empuje-has-usp .head-transparent {
    background: #FFFFFF !important;
    margin-top: 0 !important;
  }
  /* ============================================================
     INICIO EN CELULAR: encabezado APOYADO SOBRE LA FOTO (ago 2026, ref. Massimo Dutti)
     La barra negra de beneficios NO se mueve: sigue arriba de todo. Lo que se va es la
     franja blanca del encabezado — el banner sube y ocupa ese lugar, y el menú, el
     buscador, el logo, la cuenta y el carrito quedan encima de la imagen.
     Solo en el inicio (hay foto) y solo en celular (es de donde vino el pedido; en
     escritorio el encabezado lleva el menú completo y el buscador, y superponerlo sobre
     un banner ancho y bajo es otro problema distinto).
     Al bajar, `empuje-head-solid` le devuelve el fondo blanco: sobre los productos, los
     iconos transparentes no se leerían.
     ============================================================ */
  @media (max-width: 768px) {
    /* REVERTIDO (ago 2026, pedido cliente): el encabezado ya NO se apoya sobre la foto.
       Sobre un banner claro los íconos negros —menú, lupa, cuenta, carrito— se perdían y
       la barra se leía apagada. El banner vuelve a arrancar debajo del encabezado.
       Se conserva `margin-bottom: 0` en el carrusel, que saca la franja blanca entre la
       foto y "Comprar por categoría": eso sí se quería. */
    body.template-home.empuje-has-usp header.head-main {
      background: #FFFFFF !important;
      border-bottom: 1px solid #EDE9E4 !important;
      z-index: 5;
    }
    /* La altura del encabezado la mide el JS y la deja en --empuje-head-h; 61px es el
       valor medido en ago 2026 y queda de respaldo si el JS no llegara a correr. */
    /* OJO con el envoltorio: `.js-home-main-slider-container` es el del carrusel de
       ESCRITORIO. El de celular cuelga de `.js-home-mobile-slider-visibility` (d-md-none),
       que es el que hay que subir. Apuntar al otro no movía nada.
       El `mb-4` de ese mismo envoltorio es la franja blanca que quedaba entre la foto y
       "Comprar por categoría": se va acá mismo. */
    body.template-home .js-home-mobile-slider-visibility {
      margin-bottom: 0 !important;
    }
    body.template-home.empuje-head-solid header.head-main {
      background: #FFFFFF !important;
      border-bottom: 1px solid #EDE9E4 !important;
    }
  }
  /* El beige va SOLO en el marco —la barra de beneficios y el encabezado—, nunca en el
     contenido (pedido cliente, ago 2026). Antes esta regla pintaba la página entera y las
     prendas quedaban sobre beige: Juvia vende mucho crudo, natural y blanco, y sobre un
     fondo cálido esos colores se ven apagados y la clienta juzga por la foto. Además los
     recuadros de la ficha —talle, cantidad, cuotas— son blancos y sobre beige parecían
     parches pegados.
     OJO: entre la barra (fija, 36px) y el encabezado (pegajoso, arranca en 72px) hay un
     hueco de 36px que siempre estuvo ahí; no se notaba porque toda la página era beige.
     Al pasar el fondo a blanco apareció como una franja blanca. Se pinta SOLO esa franja,
     hasta donde llega el encabezado ya pegado arriba. No hace falta fijarla a la ventana:
     al bajar, el hueco desaparece —el encabezado se pega debajo de la barra— y la franja
     se va con el scroll, justo cuando deja de hacer falta. */
  body.empuje-has-usp { background-color: #FFFFFF; }
  body.empuje-has-usp .head-transparent .nav-desktop-link,
  body.empuje-has-usp .head-transparent .nav-mobile-link,
  body.empuje-has-usp .head-transparent .empuje-header-menu a {
    color: #1B1B1B !important;
  }
  /* Also push down anything else that may be sticky at top (announcement bars, etc) */
  body.empuje-has-usp .position-sticky[style*="top: 0"],
  body.empuje-has-usp .position-sticky-md {
    top: 38px !important;
  }
  @media (max-width: 768px) {
    body.empuje-has-usp { padding-top: 32px; }
    body.empuje-has-usp .js-head-main,
    body.empuje-has-usp .head-main,
    body.empuje-has-usp .js-fs-header,
    body.empuje-has-usp #header,
    body.empuje-has-usp .header-top,
    body.empuje-has-usp header,
    body.empuje-has-usp header[role="banner"] {
      top: 36px !important;
    }
  }
  /* === Barra de beneficios Juvia (ago 2026, diseño del cliente) ===
     Reemplaza el USP rotativo anterior. Estructura:
     .empuje-home-usp (shell fijo 34/32px, definido arriba) > .jb-track > .jb-group
     Desktop: 4 items centrados con separadores.
     Mobile: marquee continuo — 2 grupos idénticos, translateX(-50%) = loop exacto.
     El shell conserva position:fixed y el padding-top del body: no tocar sus medidas. */
  .empuje-home-usp.juvia-beneficios {
    /* 3/9/2026: vuelve al negro, ahora sin iconos (ver .jb-ico más abajo). La barra
       clara de ago 2026 dejaba tres tonos claros seguidos —beige, blanco, foto— antes
       de llegar a la prenda; en negro el encabezado le hace de marco a la imagen.
       El verde del "15% OFF" NO viaja: sobre negro da 3,4 de contraste y el mínimo
       legible es 4,5 (sobre el beige ya venía justo, en 4,0). Va en blanco.
       El logo de GO cuotas también va en blanco: en su rosa quedaba como el único
       color del encabezado, y ese acento es de otra marca, no de Juvia. En monocromo
       está permitido por sus normas; inventarle otro rosa, no. */
    --jb-bg: #1B1B1B;
    --jb-text: #FFFFFF;
    --jb-icon: #6E6862;
    --jb-sep: rgba(255, 255, 255, 0.34);
    --jb-rosa: #FFFFFF;
    --jb-off: #FFFFFF;
    background: var(--jb-bg);
    color: var(--jb-text);
    overflow: hidden;
    padding: 0;
  }
  /* ====================== ENCABEZADO FINO (3/9/2026) ======================
     Pedido de la clienta a partir de cos.com: la barra del logo más baja y el
     logo más chico, con aire arriba y abajo. Medido sobre su captura: COS usa
     ~50 px de barra y ~15 px de letra; Juvia tenía 63 y 30.
     En el teléfono además se reordena: logo a la izquierda y TODOS los íconos
     juntos a la derecha, el menú incluido. En escritorio el logo ya estaba a la
     izquierda, así que ahí solo cambian las medidas.
     El reordenado se hace con `order` de flexbox y no tocando el HTML: la fila es
     un `.row` de Bootstrap, así que las columnas ya son ítems flex.
     No bajar de 44 px de alto: es el mínimo para que los íconos se toquen sin
     errarle en el celular. */
  header .container-fluid > .row.no-gutters { height: 48px; }
  header .logo-img-container img { height: 16px; max-height: 16px; width: auto; }
  @media (max-width: 767px) {
    /* El logo es la columna `col` (crece), así que al ponerlo primero empuja
       sola a las demás contra el borde derecho. */
    /* `text-align` va con !important porque la columna trae la clase `text-center`
       de Bootstrap, que ya usa !important: sin esto el logo queda centrado dentro
       de su columna aunque la columna sí se haya movido a la izquierda. */
    header .logo-center { order: -1; text-align: left !important; }
    header .col-utility.order-first { order: 9; }
  }
  @media (min-width: 768px) {
    header .container-fluid > .row.no-gutters { height: 52px; }
    header .logo-img-container img { height: 20px; max-height: 20px; }
  }

  .jb-track {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  .jb-group { display: flex; align-items: center; flex: none; }
  .jb-clone { display: none; }
  .jb-item {
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1;
    padding: 0 22px;
  }
  .jb-item strong { font-weight: 600; }
  /* Barra de arriba: los ítems mayoristas salen ocultos y solo aparecen con la marca.
     El estado por defecto es SIEMPRE el minorista: si la detección no corre o falla,
     la barra queda tal cual estaba. */
  .jb-item.jb-may { display: none; }
  body.empuje-mayorista .jb-item.jb-min { display: none !important; }
  body.empuje-mayorista .jb-item.jb-may { display: flex !important; }
  /* La página mayorista muestra la barra mayorista aunque la clienta todavía NO se haya
     registrado (pedido cliente, ago 2026). Antes, quien llegaba a conocer el canal veía
     arriba "Transferencia 15% OFF", que es un beneficio minorista, y esa mezcla de
     porcentajes es justo lo que hace dudar: parece que el mayorista son 7 puntos más. */
  body.empuje-pagina-mayorista .jb-item.jb-min { display: none !important; }
  body.empuje-pagina-mayorista .jb-item.jb-may { display: flex !important; }
  /* Banner del inicio: al mayorista se le clava el primero (ver unSoloBanner). Se le
     sacan los puntitos y las flechas para que no parezca que hay más para ver. */
  body.empuje-mayorista .section-slider-home .swiper-pagination,
  body.empuje-mayorista .section-slider-home .swiper-button-next,
  body.empuje-mayorista .section-slider-home .swiper-button-prev {
    display: none !important;
  }
  .jb-ico {
    width: 17px;
    height: 17px;
    flex: none;
    fill: none;
    stroke: var(--jb-icon);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .jb-go { height: 19px; width: auto; flex: none; }
  .jb-go text {
    font-family: 'Century Gothic', 'Poppins', 'Futura', 'Avenir Next', sans-serif;
    font-weight: 500;
  }
  .jb-sep { width: 1px; height: 13px; background: var(--jb-sep); flex: none; }
  /* El dato que mas vende, en el mismo verde que el precio por transferencia de la
     ficha. Sobre el fondo claro el texto solo no alcanzaba para destacarlo. */
  .jb-off { color: var(--jb-off, #2E7D32); }
  /* Sin iconos (3/9/2026): sobre negro pesaban más que el texto y cargaban la barra.
     Una marca de ropa no necesita dibujar un camión para decir que envía. */
  .empuje-home-usp.juvia-beneficios .jb-ico { display: none; }

  @media (max-width: 768px) {
    .empuje-home-usp.juvia-beneficios { justify-content: flex-start; }
    .jb-track {
      justify-content: flex-start;
      width: max-content;
      animation: jb-scroll 22s linear infinite;
    }
    .jb-clone { display: flex; }
    .jb-sep { display: none; }
    .jb-item { padding: 0 20px; }
    /* Pausa al tocar */
    .empuje-home-usp:active .jb-track { animation-play-state: paused; }
  }
  @keyframes jb-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .jb-track { animation: none; }
  }

  /* Hero 90vh — Zara style */
  .empuje-home-hero {
    position: relative;
    width: 100%;
    height: 90vh;
    min-height: 600px;
    max-height: 1000px;
    overflow: hidden;
    background: #DBD7D2;
    margin: 0 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .empuje-home-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
  }
  .empuje-home-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.35) 100%);
  }
  .empuje-home-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 24px;
    max-width: 800px;
    color: #1B1B1B;
  }
  .empuje-home-hero-eyebrow {
    display: block;
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 0 0 16px 0;
    font-weight: 600;
    color: inherit;
  }
  .empuje-home-hero-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(36px, 6vw, 84px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
    margin: 0 0 16px 0;
    color: inherit;
    text-transform: uppercase;
  }
  .empuje-home-hero-sub {
    font-size: clamp(14px, 1.6vw, 18px);
    line-height: 1.5;
    margin: 0 0 32px 0;
    color: inherit;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  .empuje-home-hero-cta {
    display: inline-block;
    background: #1B1B1B;
    color: #F4F0EC;
    text-decoration: none;
    padding: 16px 48px;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
    transition: background 0.2s ease, transform 0.15s ease;
    border: none;
  }
  .empuje-home-hero-cta:hover {
    background: #555;
    transform: translateY(-1px);
    color: #F4F0EC;
    text-decoration: none;
  }
  .empuje-home-hero.hero-light { color: #F4F0EC; }
  .empuje-home-hero.hero-light .empuje-home-hero-cta { background: #F4F0EC; color: #1B1B1B; }
  .empuje-home-hero.hero-light .empuje-home-hero-cta:hover { background: #DBD7D2; color: #1B1B1B; }

  @media (max-width: 768px) {
    .empuje-home-hero {
      height: 85vh;
      min-height: 500px;
    }
    .empuje-home-hero-cta {
      padding: 14px 32px;
      font-size: 12px;
    }
  }

  /* === HERO SLIDER === */
  /* Slides stack absolute — fade transition entre uno y otro */
  .empuje-home-hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
    z-index: 1;
  }
  .empuje-home-hero-slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
  }
  /* Dots (paginación) */
  .empuje-home-hero-dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
    pointer-events: auto;
  }
  .empuje-home-hero-dot {
    width: 28px;
    height: 3px;
    background: rgba(27,27,27,0.25);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.25s ease, width 0.25s ease;
  }
  .empuje-home-hero-dot.active {
    background: #1B1B1B;
    width: 44px;
  }
  .empuje-home-hero-dot:hover { background: rgba(27,27,27,0.6); }
  /* Arrows (solo desktop) */
  .empuje-home-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.85);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1B1B1B;
    opacity: 0;
    transition: opacity 0.25s ease, background 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  .empuje-home-hero:hover .empuje-home-hero-arrow { opacity: 1; }
  .empuje-home-hero-arrow:hover { background: #FFFFFF; }
  .empuje-home-hero-arrow svg { width: 18px; height: 18px; }
  .empuje-home-hero-arrow-prev { left: 24px; }
  .empuje-home-hero-arrow-next { right: 24px; }
  @media (max-width: 768px) {
    .empuje-home-hero-arrow { display: none !important; }
    .empuje-home-hero-dots { bottom: 20px; }
    .empuje-home-hero-dot { width: 24px; }
    .empuje-home-hero-dot.active { width: 36px; }
  }

  /* Categorías destacadas grid */
  /* ---- Franja de fábrica del inicio (ago 2026) ---- */
  .empuje-home-fabrica {
    background: #F4F0EC;
    padding: 40px 16px;
  }
  .empuje-fabrica-eyebrow {
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
    letter-spacing: 3px; text-transform: uppercase; color: #8B8589; margin: 0 0 12px 0;
  }
  .empuje-fabrica-title {
    font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 700;
    letter-spacing: -0.5px; line-height: 1.14; color: #1B1B1B;
    margin: 0 0 14px 0; max-width: 19ch;
  }
  .empuje-fabrica-bajada {
    font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.65;
    color: #555555; margin: 0; max-width: 46ch;
  }
  /* El precio subrayado en el marrón de la marca: salta sin gritar. */
  .empuje-fabrica-precio {
    color: #1B1B1B; font-weight: 600;
    border-bottom: 1px solid #6D3F23; padding-bottom: 1px;
  }
  /* Las líneas de 1px son el fondo del contenedor asomando entre celdas. */
  .empuje-fabrica-pruebas {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    margin-top: 26px; background: #EDE9E4; border: 1px solid #EDE9E4;
  }
  .empuje-fabrica-prueba {
    background: #F4F0EC; padding: 15px 12px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .empuje-fabrica-prueba b {
    display: block; font-family: 'Inter', sans-serif; font-size: 12px;
    font-weight: 600; color: #1B1B1B; letter-spacing: 0.2px; margin-bottom: 3px;
  }
  .empuje-fabrica-prueba span {
    display: block; font-family: 'Inter', sans-serif; font-size: 10.5px;
    line-height: 1.4; color: #555555;
  }
  /* Cuatro en fila solo en el rango donde el bloque ocupa TODO el ancho. Arriba de 1024
     la franja se parte en dos columnas y los cuatro entrarían en ~80px cada uno: los
     títulos se partían en dos renglones. Ahí vuelven a dos por dos. */
  @media (min-width: 560px) and (max-width: 1023px) {
    .empuje-fabrica-pruebas { grid-template-columns: repeat(4, 1fr); }
  }
  /* Escritorio, proporcion "opcion 2" (aprobada por Juvia, ago 2026). Los cuatro
     beneficios quedaban chicos y flotando: la columna medía menos que la del texto y las
     celdas se centraban, así que sobraba aire arriba y abajo.
     Ahora las dos columnas son iguales (1fr 1fr), las celdas se ESTIRAN a lo alto hasta
     ocupar todo el bloque (align-items: stretch) y la letra sube de 12/10,5 a 14/12. */
  @media (min-width: 1024px) {
    .empuje-home-fabrica {
      display: grid; grid-template-columns: 1fr 1fr; gap: 44px;
      align-items: stretch; padding: 64px 48px;
    }
    .empuje-fabrica-pruebas { margin-top: 0; }
    .empuje-fabrica-title { font-size: 30px; }
    .empuje-fabrica-prueba { padding: 22px 18px; }
    .empuje-fabrica-prueba b { font-size: 14px; margin-bottom: 4px; }
    .empuje-fabrica-prueba span { font-size: 12px; line-height: 1.45; }
  }
  /* Dos motivos para esconderla, y son distintos:
     - `empuje-pagina-mayorista` es la landing /mayoristas, que ya habla en mayorista.
     - `empuje-mayorista` es la CLIENTA mayorista logueada, que ve el inicio como
       cualquiera. A ella los cuatro beneficios le prometen algo que en su checkout no
       existe (paga solo por transferencia, sin cuotas y sin el 15%), y el $9.499 del
       texto es precio minorista: ella paga 22% menos. Misma razón por la que el theme
       ya le esconde .empuje-qs-transfer y .empuje-qs-cuotas. */
  body.empuje-pagina-mayorista .empuje-home-fabrica,
  body.empuje-mayorista .empuje-home-fabrica { display: none !important; }

  /* ---- La misma franja, en mayorista (ago 2026) ----
     Sale oculta y solo aparece con la marca: si la detección no corre, la clienta ve la
     minorista, que es el estado seguro. La foto es la del taller que ya usa /mayoristas,
     así el canal se ve igual en los dos lados. */
  .empuje-home-fabrica-may { display: none; background: #F4F0EC; }
  /* En CELULAR el texto va antes que la foto (25/8/2026). Venía al revés y la foto
     quedaba pegada al banner del inicio: 551px de banner + 210 de foto = 761px de
     imagen antes de leer una sola palabra. La franja minorista ya iba banner → texto.
     El HTML no se toca —la foto sigue siendo el primer hijo— porque en escritorio tiene
     que caer en la columna izquierda; el orden se da con `order` y se resetea abajo. */
  body.empuje-mayorista .empuje-home-fabrica-may {
    display: flex !important; flex-direction: column;
  }
  .empuje-famay-foto {
    order: 2; flex: none;
    height: 210px;
    background-image: url('//d2az8otjr0j19j.cloudfront.net/templates/001/235/896/twig/static/images/mayorista-fabrica.jpg');
    background-size: cover; background-position: 50% 50%; background-color: #EDE9E4;
  }
  .empuje-famay-cuerpo { order: 1; padding: 32px 16px 40px; }
  @media (min-width: 1024px) {
    body.empuje-mayorista .empuje-home-fabrica-may {
      display: grid !important; grid-template-columns: 1fr 1.15fr; align-items: stretch;
    }
    /* Escritorio queda igual que siempre: foto a la izquierda, texto a la derecha. */
    .empuje-famay-foto { order: 0; height: auto; min-height: 340px; }
    .empuje-famay-cuerpo {
      order: 0;
      padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; gap: 26px;
    }
    .empuje-famay-cuerpo .empuje-fabrica-pruebas { margin-top: 0; }
  }

  .empuje-home-cats {
    padding: 80px 24px 60px 24px;
    background: #FFFFFF;
  }
  /* Encabezado en fila: texto a la izquierda y flechas a la derecha (ago 2026).
     Antes iba centrado, y era la única sección del home así — Destacados y Nuevos
     ingresos ya usaban este mismo patrón, con el link "Ver más" a la derecha. */
  .empuje-home-cats-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
    max-width: 1600px;
    margin: 0 auto 40px auto;
  }
  .empuje-home-cats-head-txt { display: flex; flex-direction: column; }
  .empuje-cats-nav { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; padding-bottom: 4px; }
  .empuje-home-cats-eyebrow {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #8B8589;
    margin: 0 0 12px 0;
    font-weight: 600;
  }
  .empuje-home-cats-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #1B1B1B;
    margin: 0;
  }
  .empuje-home-cats-carousel {
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
  }
  /* Carrusel horizontal en TODOS los breakpoints: 6 visibles en desktop,
     3 en tablet, ~1.6 en mobile. Con más categorías se desliza (flechas
     en desktop, touch en mobile). */
  .empuje-home-cats-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .empuje-home-cats-grid::-webkit-scrollbar { display: none; }
  .empuje-home-cat-card {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: #DBD7D2;
    transition: transform 0.4s ease;
    flex: 0 0 calc((100% - 60px) / 6);
    scroll-snap-align: start;
  }
  /* Chevron finito, el mismo trazo que las flechitas de las fotos de producto
     (ago 2026). Antes era un círculo negro de 42px con sombra, encima de las fotos:
     tapaba el nombre que las imágenes de categoría ya traen escrito, y según la foto
     quedaba sobre zona clara u oscura. Acá arriba se lee siempre igual. */
  .empuje-cats-arrow {
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0;
    color: transparent;
    cursor: pointer;
    z-index: 5;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }
  .empuje-cats-arrow::before {
    content: '';
    display: block;
    width: 9px; height: 9px;
    border-top: 1.3px solid #1B1B1B;
    border-right: 1.3px solid #1B1B1B;
    transition: border-color .15s ease;
  }
  .empuje-cats-arrow-next::before { transform: rotate(45deg) translate(-1px, 1px); }
  .empuje-cats-arrow-prev::before { transform: rotate(-135deg) translate(-1px, 1px); }
  /* Zona táctil de 44px, invisible */
  .empuje-cats-arrow::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  .empuje-cats-arrow:hover::before { border-color: #6E6862; }
  /* Al principio del carrusel la de atrás queda apagada, y al final la de adelante */
  .empuje-cats-arrow[data-tope="true"] { cursor: default; }
  .empuje-cats-arrow[data-tope="true"]::before { border-color: #CFCAC5; }
  .empuje-home-cat-card:hover {
    text-decoration: none;
    color: inherit;
  }
  .empuje-home-cat-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
  }
  .empuje-home-cat-card:hover .empuje-home-cat-img {
    transform: scale(1.05);
  }
  .empuje-home-cat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.4) 100%);
    pointer-events: none;
  }
  .empuje-home-cat-label {
    position: absolute;
    left: 0; right: 0; bottom: 20px;
    text-align: center;
    color: #F4F0EC;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    letter-spacing: 3px;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 2;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  }
  @media (max-width: 1100px) {
    .empuje-home-cat-card { flex-basis: calc((100% - 24px) / 3); }
  }
  /* Mobile: cards grandes, scroll con el dedo, sin flechas */
  @media (max-width: 600px) {
    .empuje-home-cats { padding: 50px 0 40px 0; }
    .empuje-home-cats-head { padding: 0 16px; }
    .empuje-home-cats-grid {
      gap: 10px;
      padding: 0 16px 8px 16px;
    }
    .empuje-home-cat-card { flex-basis: 62%; }
    .empuje-home-cat-label { font-size: 12px; letter-spacing: 2px; bottom: 14px; }
    /* Las flechas SÍ van en mobile (ago 2026). Antes estaban ocultas acá y además
       el JS las apagaba por debajo de 600px: en el celular entran 2 de 7 categorías
       y no había ninguna señal de que hubiera más. El deslizar con el dedo sigue igual. */
    .empuje-home-cats-head { margin-bottom: 22px; }
    .empuje-cats-nav { gap: 16px; }
  }

  /* Products section (Nuevos ingresos / Destacados) — uses Empuje custom grid */
  .empuje-home-products {
    padding: 40px 24px;
    background: #FFFFFF;
  }
  /* Last products section before newsletter: tighten bottom */
  .empuje-home-destacados {
    padding-bottom: 0 !important;
  }
  .empuje-home-products-head {
    max-width: 1400px;
    margin: 0 auto 32px auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
  }
  .empuje-home-products-title-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .empuje-home-products-eyebrow {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #8B8589;
    font-weight: 600;
    margin: 0;
  }
  .empuje-home-products-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(22px, 2.5vw, 32px);
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #1B1B1B;
    margin: 0;
  }
  .empuje-home-products-link {
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #1B1B1B;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid #1B1B1B;
    padding-bottom: 2px;
    transition: opacity 0.2s ease;
  }
  .empuje-home-products-link:hover {
    opacity: 0.65;
    color: #1B1B1B;
    text-decoration: none;
  }
  /* Pure CSS Grid — 3 columns, full width like the listing page */
  /* minmax(0, 1fr) y no 1fr (ago 2026): con 1fr la columna no baja del ancho mínimo
     de la ficha, y las de Destacados —que se traen aparte, con la foto todavía sin
     cargar— lo empujaban hacia arriba. La grilla se desbordaba y cada columna salía
     de un ancho distinto: medido en 768px daba 268/180/254 con fotos de 271/381/402,
     contra 215/323 parejo en Nuevos ingresos. Como el alto de la foto sale del ancho
     de su columna, ahí nacían las fotos desparejas. El 0 le saca ese piso. */
  .empuje-home-products-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0;
    list-style: none;
  }
  /* Recién llegados es una FILA HORIZONTAL y Destacados una grilla: esa es la diferencia
     entre las dos secciones, que antes eran idénticas una atrás de la otra.

     OJO con el ancho de la tarjeta: el theme le clava `width: 100% !important` EN LÍNEA a
     cada `.js-item-product`, y eso le gana a cualquier regla de hoja de estilos. En la
     grilla no se nota —ese 100% es el ancho de la columna— pero en un flex el 100% pasa a
     ser la pantalla entera y quedaba UNA foto gigante por pantalla.
     Por eso la fila también es `grid`, con `grid-auto-flow: column`: así el 100% de la
     tarjeta vuelve a medir lo que mide su columna, igual que en Destacados.
     El ancho es 49%: con 46% la tarjeta quedaba 5px mas angosta de lo que necesita la linea
     "$33.489,15 por transferencia", y el theme la cortaba con puntos suspensivos. Medido:
     el texto pide 146px y tenia 141. Con 49% entra entera y la segunda tarjeta queda
     apenas cortada contra el borde, que ya avisa que hay mas; el resto lo dicen las flechas. */
  .empuje-home-nuevos .empuje-home-products-grid {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: 49%;
    gap: 10px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .empuje-home-nuevos .empuje-home-products-grid::-webkit-scrollbar { display: none; }
  .empuje-home-nuevos .empuje-home-products-grid > .js-item-product {
    scroll-snap-align: start;
  }
  @media (min-width: 700px) {
    .empuje-home-nuevos .empuje-home-products-grid { grid-auto-columns: 30%; }
  }
  @media (min-width: 1024px) {
    .empuje-home-nuevos .empuje-home-products-grid { grid-auto-columns: 23%; }
  }
  /* Las flechas van ARRIBA de la fila y a la derecha —el lugar donde antes estaba el
     selector de una/dos columnas—, no colgando del encabezado: ahí quedaban lejos de lo
     que mueven y se leían como parte del título. */
  .empuje-vitrina-flechas {
    display: flex; gap: 18px; align-items: center; justify-content: flex-end;
    margin: 0 4px 10px 0;
  }

  /* Section padding to match listing page */
  .empuje-home-products {
    padding: 40px 30px;
  }
  @media (max-width: 700px) {
    .empuje-home-products { padding: 30px 12px; }
  }

  /* === Listing pages: unify only mobile padding (desktop keeps theme defaults) === */
  @media (max-width: 700px) {
    body.template-category .js-product-table,
    body.template-search .js-product-table,
    body.template-tagged .js-product-table {
      padding-left: 12px !important;
      padding-right: 12px !important;
    }
  }
  .empuje-home-products-grid > .js-item-product {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    grid-column: auto !important;
  }
  /* Cards: same look as the listing page */
  body .empuje-home-products-grid .js-item-product .js-product-container,
  body .empuje-home-products-grid .js-item-product .item-description,
  body .empuje-home-products-grid .js-item-product .js-item-description,
  body .empuje-home-products-grid .js-item-product .item-link,
  body .empuje-home-products-grid .js-item-product .item-name,
  body .empuje-home-products-grid .js-item-product .item-price-container {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    flex-shrink: 0;
  }
  body .empuje-home-products-grid .js-item-product {
    align-items: stretch !important;
  }
  /* Force image wrapper to listing's aspect ratio (3:2 portrait, matches the theme) */
  body .empuje-home-products-grid .js-item-product .position-relative.d-block {
    width: 100% !important;
    padding-bottom: 150% !important; /* same as listing */
    height: 0 !important;
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
  }
  body .empuje-home-products-grid .js-item-product .position-relative.d-block > a,
  body .empuje-home-products-grid .js-item-product .js-product-item-image-link-private {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
  body .empuje-home-products-grid .js-item-product .position-relative.d-block img,
  body .empuje-home-products-grid .js-item-product .js-product-item-image-link-private img,
  body .empuje-home-products-grid .js-item-product img.img-absolute,
  body .empuje-home-products-grid .js-item-product img.img-absolute-centered {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    transform: none !important;
    margin: 0 !important;
  }
  /* 2 cols at mobile — mismo minmax(0, ...) que arriba: en 375px las columnas de
     Destacados daban 254 y 268 (suman 532 en 351 disponibles, por eso la segunda
     se cortaba) con fotos de 381 y 402. Con el 0 quedan 171/171 y foto de 256,
     idéntico a Nuevos ingresos. */
  @media (max-width: 700px) {
    .empuje-home-products-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 10px !important;
    }
  }
  /* Hide native theme home sections we're replacing with Empuje versions
     (DEJAMOS visible el .section-slider-home / .js-home-main-slider-container
      para que funcione el "Carrusel de imágenes" nativo de Tienda Nube) */
  body.template-home .section-featured-home,
  body.template-home .js-products-featured-grid,
  body.template-home .js-products-home-grid,
  body.template-home .section-modules-home,
  body.template-home .section-banners-home,
  body.template-home .section-video-home,
  body.template-home .section-news-home,
  body.template-home .section-promotional-home,
  body.template-home .section-categories-home,
  body.template-home .section-newsletter-home,
  body.template-home .section-instafeed-home,
  body.template-home .section-testimonials-home,
  body.template-home .section-brands-home,
  body.template-home .js-home-newsletter {
    display: none !important;
  }
  /* === Native theme slider — brand styling override === */
  body.template-home .section-slider-home,
  body.template-home .js-home-main-slider-container {
    margin: 0 !important;
    padding: 0 !important;
    background: #DBD7D2;
  }
  /* Tema usa Swiper para el slider. Override dots + height para parecerse al look brand. */
  body.template-home .nube-slider-home .swiper-pagination-bullet {
    width: 28px !important;
    height: 3px !important;
    border-radius: 0 !important;
    background: rgba(27,27,27,0.25) !important;
    opacity: 1 !important;
    transition: background 0.25s ease, width 0.25s ease;
    margin: 0 4px !important;
  }
  body.template-home .nube-slider-home .swiper-pagination-bullet-active {
    background: #1B1B1B !important;
    width: 44px !important;
  }
  /* Flechas del slider — estilo brand */
  body.template-home .nube-slider-home .swiper-button-prev,
  body.template-home .nube-slider-home .swiper-button-next {
    width: 48px !important;
    height: 48px !important;
    background: rgba(255,255,255,0.85) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    color: #1B1B1B !important;
    margin-top: -24px !important;
  }
  body.template-home .nube-slider-home .swiper-button-prev::after,
  body.template-home .nube-slider-home .swiper-button-next::after {
    font-size: 18px !important;
    font-weight: 700 !important;
  }
  /* Texto del slider — tipografía brand si TN renderiza */
  body.template-home .nube-slider-home h2,
  body.template-home .nube-slider-home .slider-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    text-transform: uppercase !important;
  }
  body.template-home .nube-slider-home a.btn,
  body.template-home .nube-slider-home .slider-cta {
    background: #1B1B1B !important;
    color: #F4F0EC !important;
    padding: 16px 44px !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    border: none !important;
  }
  body.template-home .js-home-sections-container {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Header menu (Empuje override) — centrado (pedido cliente: estaba pegado a la izquierda) */
  .empuje-header-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 26px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 100%;
  }
  /* Dropdown: ancho al contenido; solo con MUCHOS items (>10) pasa a 2 columnas */
  .empuje-header-menu .empuje-dropdown ul { min-width: 200px; }
  .empuje-header-menu .empuje-dropdown.empuje-dd-wide ul {
    column-count: 2;
    column-gap: 24px;
    min-width: 440px;
  }
  .empuje-header-menu .empuje-dropdown li { break-inside: avoid; }
  /* ATC propio en cards — DEBAJO de la imagen; desktop: hover reveal (espacio reservado, sin salto) */
  .empuje-card-atc {
    position: static;
    padding: 8px 0 0 0;
    opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
  }
  .js-item-product:hover .empuje-card-atc { opacity: 1; pointer-events: auto; }
  .empuje-card-atc button {
    width: 100%; background: #1B1B1B; color: #fff; border: 0; cursor: pointer;
    padding: 10px; font-size: 11px; font-weight: 600;
    letter-spacing: 0.5px; text-transform: uppercase;
    font-family: 'Inter', sans-serif;
  }
  .empuje-card-atc button:hover { background: #333; }
  @media (max-width: 768px) {
    .empuje-card-atc { opacity: 1; pointer-events: auto; }
    .empuje-card-atc button { padding: 9px 8px; font-size: 10px; }
  }
  /* Cards: líneas de transferencia y cuotas alineadas a la izquierda y en color pleno
     (el tema pintaba la línea nativa de transferencia en gris lavado → parecía un fade) */
  .js-item-product [class*="payment-discount-price-product-container"],
  .js-item-product .empuje-card-transfer,
  .js-item-product .empuje-card-installments {
    text-align: left !important;
    color: #1B1B1B !important;
    opacity: 1 !important;
    font-size: 13px;
  }
  /* Relacionados: misma alineación que el listado (el carrusel centraba el nombre) */
  .section-products-related .item-name,
  .js-related-products .item-name,
  .section-products-related .item-description,
  .js-related-products .item-description,
  .section-products-related .item-price-container,
  .js-related-products .item-price-container {
    text-align: left !important; justify-content: flex-start !important;
  }
  /* Listado: aire en márgenes laterales */
  .js-product-table.row { padding-left: 24px; padding-right: 24px; }
  @media (max-width: 768px) {
    .js-product-table.row { padding-left: 12px; padding-right: 12px; }
  }
  /* PDP: aire entre header y breadcrumb + precio al ras (refuerzo: spans .d-inline-block del wrapper) */
  #single-product { margin-top: 16px; }
  #single-product .js-price-container .d-inline-block { margin: 0 !important; padding: 0 !important; }
  #single-product #price_display { margin-left: 0 !important; padding-left: 0 !important; }
  /* Sumá a tu compra — mini-sección compacta en la columna de compra */
  .empuje-pdp-addons {
    margin: 18px 0 8px 0;
    border-top: 1px solid #DBD7D2;
    padding-top: 14px;
    font-family: 'Inter', sans-serif;
  }
  .empuje-pdp-addons-title {
    font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    margin: 0 0 10px 0; color: #1B1B1B;
  }
  .empuje-addon-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
  .empuje-addon-img {
    display: block; width: 52px; height: 64px; flex-shrink: 0;
    background-size: cover; background-position: center; background-color: #F4F0EC;
  }
  .empuje-addon-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .empuje-addon-name {
    font-size: 12px; color: #1B1B1B; letter-spacing: 0.3px; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .empuje-addon-price { font-size: 13px; font-weight: 700; color: #1B1B1B; }
  .empuje-addon-transfer { font-size: 11px; color: #2E7D32; }
  /* ATC de card: ancho completo de su columna */
  .empuje-card-atc { width: 100%; }
  .empuje-card-atc button { display: block; width: 100% !important; }
  .empuje-addon-btn {
    background: #fff; color: #1B1B1B; border: 1px solid #1B1B1B; cursor: pointer;
    padding: 7px 12px; font-size: 10px; font-weight: 700;
    letter-spacing: 0.5px; text-transform: uppercase; flex-shrink: 0;
    font-family: 'Inter', sans-serif;
  }
  .empuje-addon-btn:hover { background: #1B1B1B; color: #fff; }
  /* Copia escondida de la tarjeta del listado: la hoja de compra rápida necesita su
     formulario real para sumar al carrito sin sacar a la clienta de la ficha. */
  .empuje-addon-ghost { display: none !important; }
  /* Menú: tipografía Inter (pedido cliente jul 2026: look Mango en todo el sitio),
     hover con opacity como el live — pedido cliente jul 2026: "mantener el menú actual de Juvia" */
  .empuje-header-menu a {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #1B1B1B;
    text-decoration: none;
    font-weight: 400;
    padding: 6px 0;
    position: relative;
    transition: opacity 0.2s ease;
  }
  .empuje-header-menu a:hover,
  .empuje-header-menu a:focus {
    opacity: 0.6;
  }
  .empuje-header-menu a.active { font-weight: 700; }
  .empuje-header-menu a.empuje-sale-link { color: #B71C1C; }
  /* Dropdown */
  .empuje-header-menu li.has-dropdown { position: relative; }
  .empuje-header-menu .empuje-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 240px;
    /* ⚠️ SIN overflow: el recorte impedía que se vieran los submenús del 3er nivel.
       Los dropdowns de Juvia entran holgados en pantalla (17 items ≈ 640px). */
    overflow: visible;
    background: #FFFFFF;
    border: 1px solid #DBD7D2;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    padding: 12px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    z-index: 1000;
    margin-top: 12px;
  }
  .empuje-header-menu .empuje-dropdown a {
    padding: 9px 24px !important;
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
  }
  /* ⚠️ REGLA ELIMINADA (ago 2026): resaltaba un item "Ver todo" que agregábamos al
     final del dropdown cuando el menú era hardcodeado. Con el menú NATIVO ese item
     ya no existe, así que la regla ponía en negrita y separaba a la última categoría
     real ("Coleccion Invierno", "Poleras"). Si algún día vuelve un "Ver todo",
     darle su propia clase en vez de usar :last-child. */
  .empuje-header-menu li.has-dropdown:hover .empuje-dropdown,
  .empuje-header-menu li.has-dropdown:focus-within .empuje-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
  }
  /* Invisible bridge so hover doesn't break when moving cursor down */
  .empuje-header-menu li.has-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    height: 16px;
  }
  .empuje-header-menu .empuje-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .empuje-header-menu .empuje-dropdown a {
    display: block;
    padding: 10px 24px;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 500;
    color: #1B1B1B;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .empuje-header-menu .empuje-dropdown a::after { display: none; }
  .empuje-header-menu .empuje-dropdown a:hover {
    background: #F4F0EC;
    color: #1B1B1B;
  }
  @media (max-width: 900px) {
    .empuje-header-menu { gap: 24px; }
    .empuje-header-menu a { font-size: 12px; letter-spacing: 1px; }
    .empuje-header-menu .empuje-dropdown { display: none; } /* mobile uses flat list */
  }

  /* === Mobile drawer menu styling (.nav-list with data-empuje-menu) === */
  .nav-list[data-empuje-menu="1"],
  .js-menu-panel[data-empuje-menu="1"] {
    list-style: none !important;
    padding: 8px 0 !important;
    margin: 0 !important;
  }
  .nav-list[data-empuje-menu="1"] li,
  .js-menu-panel[data-empuje-menu="1"] li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border-bottom: 1px solid #F4F0EC;
  }
  .nav-list[data-empuje-menu="1"] li:last-child,
  .js-menu-panel[data-empuje-menu="1"] li:last-child {
    border-bottom: none;
  }
  .nav-list[data-empuje-menu="1"] li a,
  .js-menu-panel[data-empuje-menu="1"] li a {
    display: block !important;
    padding: 14px 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #1B1B1B !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
  }
  .nav-list[data-empuje-menu="1"] li a:hover,
  .js-menu-panel[data-empuje-menu="1"] li a:hover {
    background: #F4F0EC !important;
    text-decoration: none !important;
  }
  /* Child items (subcategorías) — smaller font + indent */
  .nav-list[data-empuje-menu="1"] li[style*="padding-left"] a,
  .js-menu-panel[data-empuje-menu="1"] li[style*="padding-left"] a {
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    color: #555 !important;
    padding: 10px 20px 10px 36px !important;
  }
  .nav-list[data-empuje-menu="1"] .empuje-sale-link,
  .js-menu-panel[data-empuje-menu="1"] .empuje-sale-link {
    color: #B71C1C !important;
  }
  /* Custom floating X — hidden, we use theme's native X enlarged via CSS instead */
  .empuje-mobile-close-floating { display: none !important; }

  /* When modal is open, drop sticky header BELOW modal so it doesn't overlap */
  body.modal-open .js-head-main,
  body.modal-open .head-main,
  body.overflow-hidden .js-head-main,
  body.overflow-hidden .head-main,
  body.overflow-none .js-head-main,
  body.overflow-none .head-main,
  body.js-modal-shown .js-head-main,
  body.js-modal-shown .head-main {
    z-index: 1 !important;
  }

  /* Hide any stuck overlay when no modal is actively shown */
  body:not(.modal-open):not(.overflow-none):not(.overflow-hidden):not(.js-modal-shown) .js-modal-overlay,
  body:not(.modal-open):not(.overflow-none):not(.overflow-hidden):not(.js-modal-shown) .modal-overlay,
  body:not(.modal-open):not(.overflow-none):not(.overflow-hidden):not(.js-modal-shown) .modal-backdrop,
  body:not(.modal-open):not(.overflow-none):not(.overflow-hidden):not(.js-modal-shown) .js-modal-backdrop {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* === Enlarge & style the theme's native modal close X === */
  .modal-nav-hamburger .js-modal-close.modal-close,
  .modal-nav-hamburger .modal-close,
  .modal-nav-hamburger > .js-modal-close.modal-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    background: #1B1B1B !important;
    color: #FFFFFF !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2147483647 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    cursor: pointer !important;
  }
  .modal-nav-hamburger .js-modal-close.modal-close svg,
  .modal-nav-hamburger .modal-close svg,
  .modal-nav-hamburger .modal-close-icon {
    width: 18px !important;
    height: 18px !important;
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
  }
  .modal-nav-hamburger .js-modal-close.modal-close path,
  .modal-nav-hamburger .modal-close path {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
  }
  /* Hide the redundant modal-header close (the big invisible bar) so only our enlarged X is clickable */
  .modal-nav-hamburger .modal-header.js-modal-close.text-left {
    height: 70px !important;
  }
  /* Floating close X — FIXED to viewport, always visible above everything */
  .empuje-mobile-close-row {
    list-style: none !important;
    position: fixed !important;
    top: 12px;
    right: 12px;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
    background: transparent !important;
    z-index: 2147483647 !important;
    pointer-events: auto;
  }
  .empuje-mobile-close-btn {
    width: 40px !important;
    height: 40px !important;
    background: #FFFFFF !important;
    border: 1.5px solid #1B1B1B !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #1B1B1B !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  }
  .empuje-mobile-close-btn svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
  }
  .empuje-mobile-close-btn span { display: none; }
  .empuje-mobile-close-btn:hover { background: #F4F0EC !important; }
  /* Only show close button when drawer is actually open */
  body:not(.modal-open):not(.js-modal-shown) .empuje-mobile-close-row { display: none; }
  /* Drawer top padding so first item doesn't overlap close */
  .nav-list[data-empuje-menu="1"] { padding-top: 16px !important; }

  /* Theme uses data-transition="fade-in-up" + IntersectionObserver to fade cards in.
     Dynamically injected cards aren't observed, so force them visible. */
  .empuje-home-products-grid .js-item-product,
  .empuje-home-products-grid .js-item-product[data-transition],
  .empuje-home-products-grid .js-item-product[data-transition="fade-in-up"] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* Sacar el TAMAÑO de la animación de la ficha (ago 2026).
     El tema le pone `transition: all .4s`, así que también anima el ancho. Las fichas
     de Nuevos ingresos las arma un script después de cargar: al aparecer disparan esa
     transición de max-width y queda trabada en el primer fotograma (getAnimations() la
     reporta "running" con currentTime 0, y nunca avanza). Como una transición pisa
     incluso un !important en línea, la ficha se quedaba con el ancho de arranque —un
     tercio de la columna— y el `max-width: 100% !important` de más arriba no ganaba:
     medido en 1280 daba 129px con foto de 193 en vez de 386 con foto de 578, y en 768
     daba 72 con foto de 107 en vez de 215 con 323. Destacados zafaba de casualidad,
     porque sus fichas se arman en otro momento y no llegan a disparar la transición.
     Lista explícita y no `none` para no perder los efectos de hover: lo único que sale
     de la animación es el tamaño. */
  .empuje-home-products-grid .js-item-product {
    transition-property: opacity, transform, box-shadow,
                         color, background-color, border-color !important;
  }

  /* Force ATC visible on hover for injected cards. Only target the ATC input itself
     (not the wrapper, which would hide name/price). */
  .empuje-home-products-grid .js-item-product input.js-addtocart {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease;
  }
  .empuje-home-products-grid .js-item-product:hover input.js-addtocart {
    opacity: 1;
    visibility: visible;
  }
  @media (max-width: 768px) {
    .empuje-home-products-grid .js-item-product input.js-addtocart {
      opacity: 1;
      visibility: visible;
    }
  }
  .empuje-home-product-card {
    display: block;
    text-decoration: none;
    color: inherit;
  }
  .empuje-home-product-card:hover { text-decoration: none; color: inherit; }
  .empuje-home-product-img {
    aspect-ratio: 3/4;
    background-size: cover;
    background-position: center;
    background-color: #DBD7D2;
    margin-bottom: 12px;
    transition: opacity 0.3s ease;
  }
  .empuje-home-product-card:hover .empuje-home-product-img { opacity: 0.85; }
  .empuje-home-product-name {
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1B1B1B;
    margin: 0 0 6px 0;
    font-weight: 600;
  }
  .empuje-home-product-price {
    font-size: 14px;
    color: #1B1B1B;
    font-weight: 700;
    margin: 0;
  }
  .empuje-home-product-price-transfer {
    display: block;
    font-size: 12px;
    color: #2e7d32;
    font-weight: 500;
    margin-top: 2px;
  }
  @media (max-width: 900px) {
    .empuje-home-products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  }
  @media (max-width: 600px) {
    .empuje-home-products { padding: 40px 12px; }
    .empuje-home-products-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
    .empuje-home-products-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
  }

  /* Brand story — full-width 2-column editorial */
  .empuje-home-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 600px;
    background: #F4F0EC;
    margin: 40px 0 0 0;
  }
  /* Si la story es el último elemento antes del newsletter, no agregar margen extra */
  .empuje-home-story + .empuje-home-newsletter { margin-top: 0; }
  .empuje-home-story-img {
    background-size: cover;
    background-position: center;
    min-height: 400px;
  }
  .empuje-home-story-content {
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    max-width: 600px;
  }
  .empuje-home-story-eyebrow {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #8B8589;
    margin: 0 0 16px 0;
    font-weight: 600;
  }
  /* El diseño del cliente (ago 2026) no lleva volanta. El elemento sigue en el DOM
     para que el gestor pueda repoblarlo sin romper la hidratación, pero si está
     vacío no ocupa lugar. */
  .empuje-home-story-eyebrow:empty { display: none; }
  /* Título editorial en serif — pedido del cliente (ago 2026). */
  .empuje-home-story-title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: clamp(32px, 3.8vw, 52px);
    font-weight: 400;
    letter-spacing: 0;
    color: #1B1B1B;
    margin: 0 0 20px 0;
    line-height: 1.06;
  }
  .empuje-home-story-text {
    font-size: 15px;
    line-height: 1.85;
    color: #555;
    margin: 0 0 34px 0;
  }
  .empuje-home-story-text p { margin: 0 0 12px 0; }
  .empuje-home-story-text p:last-child { margin-bottom: 0; }
  /* Recuadro fino y sin relleno */
  .empuje-home-story-cta {
    display: inline-block;
    background: transparent;
    color: #1B1B1B;
    text-decoration: none;
    padding: 15px 34px;
    font-size: 11px;
    letter-spacing: 2.5px;
    font-weight: 500;
    text-transform: uppercase;
    border: 1px solid #1B1B1B;
    transition: all 0.2s ease;
  }
  .empuje-home-story-cta:hover {
    background: #1B1B1B;
    color: #F4F0EC;
    text-decoration: none;
  }
  @media (max-width: 900px) {
    .empuje-home-story {
      grid-template-columns: 1fr;
      min-height: auto;
      margin: 40px 0;
    }
    .empuje-home-story-img { min-height: 320px; }
    .empuje-home-story-content {
      padding: 50px 24px;
      max-width: none;
    }
  }

  /* ============ Home Newsletter Section ============ */
  /* Crema (Isabelline), no negro — ago 2026, opción A aprobada por Mati.
     El bloque negro cortaba la página en seco: el resto del sitio es blanco y crema.
     Ahora usa el mismo fondo que el footer, así el final del home se lee como una
     sola pieza, y el título pasa a peso liviano para no gritarle a las fotos. */
  .empuje-home-newsletter {
    background: #F4F0EC;
    color: #1B1B1B;
    border-top: 1px solid #DBD7D2;
    padding: 88px 24px;
    text-align: center;
    margin: 0;
  }
  .empuje-home-newsletter-inner {
    max-width: 520px;
    margin: 0 auto;
  }
  .empuje-home-newsletter-eyebrow {
    font-size: 10px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: #8B8589;
    margin: 0 0 22px 0;
    font-weight: 600;
  }
  .empuje-home-newsletter-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 300;
    letter-spacing: -0.01em;
    color: #1B1B1B;
    margin: 0 0 18px 0;
    line-height: 1.15;
  }
  .empuje-home-newsletter-sub {
    font-size: 14.5px;
    line-height: 1.65;
    color: #6E6862;
    margin: 0 auto 38px auto;
    max-width: 42ch;
  }
  .empuje-home-newsletter-tiny {
    font-size: 11px;
    color: #8B8589;
    letter-spacing: 0.02em;
    margin: 26px 0 0 0;
  }
  .empuje-newsletter-form {
    display: flex;
    gap: 0;
    max-width: 480px;
    margin: 0 auto;
    border: 1px solid #555;
    transition: border-color 0.2s ease;
  }
  .empuje-newsletter-form:focus-within {
    border-color: #F4F0EC;
  }
  .empuje-newsletter-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #F4F0EC;
    padding: 16px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    outline: none;
  }
  .empuje-newsletter-input::placeholder {
    color: #8B8589;
  }
  .empuje-newsletter-submit {
    background: #F4F0EC;
    color: #1B1B1B;
    border: none;
    padding: 16px 32px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .empuje-newsletter-submit:hover {
    background: #DBD7D2;
  }
  /* Campo de línea fina — home crema y banda del pie (ago 2026).
     Scoped a propósito: el form base (borde #555) todavía lo usan los popups. */
  .empuje-home-newsletter .empuje-newsletter-form,
  .empuje-footer-band .empuje-newsletter-form {
    border: none;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 18px;
  }
  .empuje-home-newsletter .empuje-newsletter-form { max-width: 430px; margin: 0 auto; }
  .empuje-home-newsletter .empuje-newsletter-input,
  .empuje-footer-band .empuje-newsletter-input {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1px solid #1B1B1B;
    color: #1B1B1B;
    padding: 9px 2px;
    font-size: 14px;
  }
  .empuje-home-newsletter .empuje-newsletter-input::placeholder,
  .empuje-footer-band .empuje-newsletter-input::placeholder { color: #8B8589; }
  .empuje-home-newsletter .empuje-newsletter-submit,
  .empuje-footer-band .empuje-newsletter-submit {
    background: transparent;
    color: #1B1B1B;
    border: none;
    border-bottom: 1px solid #1B1B1B;
    padding: 9px 2px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    white-space: nowrap;
  }
  .empuje-home-newsletter .empuje-newsletter-submit:hover,
  .empuje-footer-band .empuje-newsletter-submit:hover {
    background: transparent;
    color: #6E6862;
    border-bottom-color: #6E6862;
  }
  /* Los mensajes los crea el JS dentro del form (ver _ensureMsg): con flex-wrap
     caen en su propia línea en vez de apretar el campo. */
  .empuje-home-newsletter .empuje-newsletter-success,
  .empuje-home-newsletter .empuje-newsletter-error,
  .empuje-footer-band .empuje-newsletter-success,
  .empuje-footer-band .empuje-newsletter-error {
    width: 100%;
    flex-basis: 100%;
    margin-top: 4px;
  }
  .empuje-home-newsletter .empuje-newsletter-success,
  .empuje-home-newsletter .empuje-newsletter-error { text-align: center; }
  .empuje-newsletter-success,
  .empuje-newsletter-error {
    display: none;
    margin-top: 16px;
    font-size: 13px;
    letter-spacing: 0.5px;
  }
  .empuje-newsletter-success.show,
  .empuje-newsletter-error.show { display: block; }
  /* Por defecto asumimos fondo CLARO (footer Isabelline): verde/rojo oscuros.
     Los tonos pastel solo sirven sobre fondo oscuro — hoy eso es únicamente el popup.
     (Contraste medido: los pastel sobre el crema daban 1.44 y 1.71 vs 4.5 de WCAG.)
     El home salió de esta lista en ago 2026, cuando su bloque pasó de negro a crema. */
  .empuje-newsletter-success { color: #2E7D32; }
  .empuje-newsletter-error { color: #C62828; }
  .empuje-popup .empuje-newsletter-success { color: #A8D5B5; }
  .empuje-popup .empuje-newsletter-error { color: #F5A5A5; }
  @media (max-width: 600px) {
    .empuje-home-newsletter { padding: 58px 20px; }
    .empuje-newsletter-form { flex-direction: column; border: none; }
    .empuje-newsletter-input {
      border: 1px solid #555;
      padding: 14px 16px;
      margin-bottom: 8px;
    }
    .empuje-newsletter-submit {
      padding: 14px 24px;
    }
    /* El campo de línea fina NO se apila: entra al lado del botón y apilarlo
       le devolvería la caja con borde que justamente sacamos. */
    .empuje-home-newsletter .empuje-newsletter-form,
    .empuje-footer-band .empuje-newsletter-form {
      flex-direction: row;
      gap: 14px;
    }
    .empuje-home-newsletter .empuje-newsletter-input,
    .empuje-footer-band .empuje-newsletter-input {
      border: none;
      border-bottom: 1px solid #1B1B1B;
      padding: 9px 2px;
      margin-bottom: 0;
      font-size: 14px;
    }
    .empuje-home-newsletter .empuje-newsletter-submit,
    .empuje-footer-band .empuje-newsletter-submit {
      padding: 9px 2px;
    }
  }

  /* ============ Empuje Popup (welcome + exit) ============ */
  .empuje-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* dynamic viewport height — cubre full screen en mobile sin importar la URL bar */
    background: rgba(27, 27, 27, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2147483646;
    opacity: 0;
    transition: opacity 0.35s ease;
    padding: 24px;
    overflow: hidden;
  }
  /* Lock body when popup open to prevent scroll-through */
  body.empuje-popup-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
  .empuje-popup-overlay.show {
    display: flex;
    opacity: 1;
  }
  .empuje-popup {
    background: #FFFFFF;
    width: 100%;
    max-width: 760px;
    min-height: 460px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    position: relative;
    font-family: 'Inter', sans-serif;
  }
  .empuje-popup-overlay.show .empuje-popup {
    transform: translateY(0) scale(1);
  }
  .empuje-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1B1B1B;
    z-index: 2;
    transition: background 0.2s ease, transform 0.15s ease;
  }
  .empuje-popup-close:hover {
    background: #F4F0EC;
    transform: rotate(90deg);
  }
  .empuje-popup-close svg { width: 18px; height: 18px; }
  .empuje-popup-image {
    background: #DBD7D2;
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: 460px;
  }
  .empuje-popup-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.05), rgba(0,0,0,0.15));
  }
  .empuje-popup-content {
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #FFFFFF;
  }
  .empuje-popup-eyebrow {
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #8B8589;
    font-weight: 600;
    margin: 0 0 14px 0;
  }
  .empuje-popup-title {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.5px;
    color: #1B1B1B;
    margin: 0 0 14px 0;
    text-transform: none;
  }
  .empuje-popup-title strong {
    background: #1B1B1B;
    color: #F4F0EC;
    padding: 0 8px;
    display: inline-block;
  }
  .empuje-popup-sub {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    margin: 0 0 28px 0;
  }
  .empuje-popup-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
  }
  .empuje-popup-input {
    background: #FFFFFF;
    border: 1px solid #DBD7D2;
    padding: 14px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #1B1B1B;
    outline: none;
    transition: border-color 0.2s ease;
    border-radius: 0;
  }
  .empuje-popup-input:focus { border-color: #1B1B1B; }
  .empuje-popup-input::placeholder { color: #8B8589; }
  .empuje-popup-submit {
    background: #1B1B1B;
    color: #F4F0EC;
    border: none;
    padding: 16px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease;
    border-radius: 0;
  }
  .empuje-popup-submit:hover { background: #555; }
  .empuje-popup-tiny {
    font-size: 11px;
    color: #8B8589;
    line-height: 1.5;
    margin: 0;
  }
  .empuje-popup-tiny a { color: #555; text-decoration: underline; }
  .empuje-popup-error {
    color: #B71C1C;
    font-size: 13px;
    margin: 0 0 12px 0;
    min-height: 18px;
  }
  /* Success state: reveal coupon */
  .empuje-popup-success {
    display: none;
    text-align: center;
    padding: 12px 0;
  }
  .empuje-popup.success .empuje-popup-form,
  .empuje-popup.success .empuje-popup-tiny,
  .empuje-popup.success .empuje-popup-error { display: none; }
  .empuje-popup.success .empuje-popup-success { display: block; }
  .empuje-popup-success-msg {
    font-size: 14px;
    color: #1B1B1B;
    margin: 0 0 16px 0;
    line-height: 1.5;
  }
  .empuje-popup-coupon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #F4F0EC;
    border: 2px dashed #1B1B1B;
    padding: 14px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #1B1B1B;
    cursor: pointer;
    margin: 0 auto;
    transition: background 0.2s ease;
  }
  .empuje-popup-coupon:hover { background: #DBD7D2; }
  .empuje-popup-coupon-copied {
    background: #1B1B1B !important;
    color: #F4F0EC !important;
    border-color: #1B1B1B !important;
  }

  /* Mobile: compact modal centered, no image, X clearly visible */
  @media (max-width: 768px) {
    .empuje-popup-overlay { padding: 16px; align-items: center; }
    .empuje-popup {
      grid-template-columns: 1fr;
      max-width: 100%;
      height: auto;
      min-height: 0;
      max-height: calc(100vh - 32px);
      overflow-y: auto;
    }
    /* Hide the image pane on mobile — popup is content only */
    .empuje-popup-image { display: none !important; }
    .empuje-popup-content {
      padding: 56px 24px 32px 24px;
      min-height: 0;
    }
    .empuje-popup-title {
      font-size: 22px;
      line-height: 1.1;
    }
    .empuje-popup-sub {
      font-size: 13px;
      margin-bottom: 20px;
    }
    .empuje-popup-close {
      top: 12px !important;
      right: 12px !important;
      width: 40px !important;
      height: 40px !important;
      background: #1B1B1B !important;
      color: #FFFFFF !important;
      box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
      z-index: 10 !important;
    }
    .empuje-popup-close svg {
      width: 18px !important;
      height: 18px !important;
      stroke: #FFFFFF !important;
    }
    .empuje-popup-close:hover {
      background: #555 !important;
      transform: none !important;
    }
  }

  /* ============ Empuje Página Nosotros ============ */
  /* When the Empuje nosotros render is active, hide the theme's default page content */
  body.empuje-has-nosotros .js-product-detail,
  body.empuje-has-nosotros [data-store="page-description"],
  body.empuje-has-nosotros .page-header,
  body.empuje-has-nosotros .container > .row > .col {
    display: none !important;
  }
  .empuje-nosotros {
    width: 100%;
    font-family: 'Inter', sans-serif;
    color: #1B1B1B;
    overflow: hidden;
    position: relative;
    z-index: 1; /* siempre debajo del header sticky (z-index 99998) */
    margin: 0;
    padding: 0;
  }
  /* Hide the theme's 404 / page content when our nosotros is active */
  body.empuje-has-nosotros .template-error,
  body.empuje-has-nosotros .js-error-page,
  body.empuje-has-nosotros .error-page,
  body.empuje-has-nosotros [class*="not-found"],
  body.empuje-has-nosotros [class*="page-404"],
  body.empuje-has-nosotros .page-header,
  body.empuje-has-nosotros .breadcrumb,
  body.empuje-has-nosotros .user-content,
  body.empuje-has-nosotros .page-content,
  body.empuje-has-nosotros .template-page > .container > .row,
  body.empuje-has-nosotros .container > h1.page-title {
    display: none !important;
  }
  /* HERO */
  .empuje-nosotros-hero {
    position: relative;
    width: 100%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #DBD7D2;
    overflow: hidden;
  }
  .empuje-nosotros-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
  }
  .empuje-nosotros-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.25));
  }
  .empuje-nosotros-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 24px;
    max-width: 760px;
    color: #1B1B1B;
  }
  .empuje-nosotros-eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 0 0 18px 0;
    font-weight: 600;
    opacity: 0.8;
  }
  .empuje-nosotros-hero-title {
    font-size: clamp(32px, 6vw, 72px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1px;
    margin: 0 0 16px 0;
    text-transform: uppercase;
  }
  .empuje-nosotros-hero-sub {
    font-size: clamp(14px, 1.6vw, 18px);
    line-height: 1.5;
    margin: 0 auto;
    max-width: 540px;
    opacity: 0.85;
  }

  /* MANIFESTO */
  .empuje-nosotros-manifesto {
    padding: 80px 24px;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
  }
  .empuje-nosotros-manifesto-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 700;
    letter-spacing: -0.3px;
    margin: 0 0 24px 0;
    line-height: 1.25;
  }
  .empuje-nosotros-manifesto p {
    font-size: clamp(14px, 1.4vw, 16px);
    line-height: 1.75;
    color: #555;
    margin: 0 0 18px 0;
  }

  /* SECTIONS — 3 sections proceso / valores / equipo */
  .empuje-nosotros-section {
    padding: 80px 24px;
    background: #FFFFFF;
  }
  .empuje-nosotros-section.alt {
    background: #F4F0EC;
  }
  .empuje-nosotros-section-inner {
    max-width: 1200px;
    margin: 0 auto;
  }
  .empuje-nosotros-section-head {
    text-align: center;
    margin-bottom: 50px;
  }
  .empuje-nosotros-section-eyebrow {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #8B8589;
    font-weight: 600;
    margin: 0 0 12px 0;
  }
  .empuje-nosotros-section-title {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0;
    line-height: 1.1;
  }

  /* Grid of 3 — proceso steps + valores */
  .empuje-nosotros-grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
  .empuje-nosotros-step {
    text-align: center;
  }
  .empuje-nosotros-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 1.5px solid #1B1B1B;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
    margin: 0 auto 18px auto;
  }
  .empuje-nosotros-step-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 12px 0;
  }
  .empuje-nosotros-step-text {
    font-size: 14px;
    line-height: 1.65;
    color: #555;
    margin: 0;
  }

  /* Valores — icon + title + text */
  .empuje-nosotros-valor {
    text-align: center;
    padding: 30px 20px;
    background: #FFFFFF;
    border: 1px solid #DBD7D2;
  }
  .empuje-nosotros-valor-icon {
    font-size: 24px;
    margin-bottom: 14px;
  }
  /* MAYORISTA: portada con foto del depósito y el pedido de ejemplo (ago 2026).
     La foto prueba el argumento —somos fábrica— mejor que cualquier titular, y el
     ejemplo convierte el mínimo de $300.000 de barrera en lista de compras: el número
     aparece recién DESPUÉS de ver qué se lleva. */
  .empuje-may-hero { position: relative; overflow: hidden; }
  .empuje-may-hero img { width: 100%; display: block; }
  @media (min-width: 769px) {
    /* Sin tope, la foto llega a 835px de alto y se come la pantalla entera antes de que
       aparezca una sola palabra del pedido. */
    .empuje-may-hero img { max-height: 62vh; object-fit: cover; object-position: center 45%; }
  }
  .empuje-may-hero::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,.05) 62%); }
  .empuje-may-hero-tx { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 0 22px 26px; max-width: 1180px; margin: 0 auto; color: #fff; }
  .empuje-may-hero-tx .eb { font-size: 9.5px; letter-spacing: 1.8px; text-transform: uppercase;
    opacity: .9; display: block; margin-bottom: 10px; }
  .empuje-may-hero-tx h1 { font-size: 30px; letter-spacing: .5px; text-transform: uppercase;
    font-weight: 400; line-height: 1.05; margin: 0 0 8px; color: #fff; }
  .empuje-may-hero-tx p { font-size: 13.5px; margin: 0; opacity: .93; }
  /* Los seis recuadros de mayorista van encuadrados, como en el mockup aprobado, y en
     celular de a DOS por fila: el tema los apila de a uno y obligaba a bajar muchísimo.
     Solo esta grilla — "Cómo funciona" y la página Nosotros siguen como estaban. */
  .empuje-may-grid .empuje-nosotros-valor {
    border: 1px solid #DBD7D2; padding: 14px 15px; text-align: left;
  }
  .empuje-may-grid .empuje-nosotros-valor-icon { display: none; }
  @media (max-width: 768px) {
    .empuje-may-grid {
      grid-template-columns: 1fr 1fr !important;
      gap: 10px !important;
    }
    .empuje-may-grid .empuje-nosotros-valor { padding: 12px 12px; }
    .empuje-may-grid .empuje-nosotros-valor-title { font-size: 12px; letter-spacing: .8px; }
    .empuje-may-grid .empuje-nosotros-valor-text { font-size: 11.5px; line-height: 1.45; }
  }
  .empuje-may-nota { font-size: 11.5px; color: #8B8589; margin: 9px 0 0; text-align: center; }
  .empuje-may-banda { position: relative; overflow: hidden; margin: 8px 0 0; }
  .empuje-may-banda img { width: 100%; display: block; }
  .empuje-may-banda::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.58), rgba(0,0,0,0) 55%); }
  .empuje-may-banda-tx { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 0 22px 18px; max-width: 1180px; margin: 0 auto; color: #fff; }
  .empuje-may-banda-tx b { display: block; font-size: 16px; letter-spacing: 1.2px;
    text-transform: uppercase; font-weight: 400; }
  .empuje-may-banda-tx i { display: block; font-style: normal; font-size: 12px;
    opacity: .9; margin-top: 3px; }
  @media (min-width: 769px) {
    .empuje-may-banda img { max-height: 46vh; object-fit: cover; }
  }
  .empuje-may-ped { max-width: 760px; margin: 0 auto; padding: 34px 20px 6px; }
  .empuje-may-ped table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  .empuje-may-ped th { text-align: left; font-size: 8.5px; letter-spacing: 1.2px;
    text-transform: uppercase; color: #8B8589; padding: 0 0 8px; font-weight: 400; }
  .empuje-may-ped th.r, .empuje-may-ped td.r { text-align: right; }
  .empuje-may-ped td { padding: 8px 0; border-top: 1px solid #EDE9E4; vertical-align: middle; }
  .empuje-may-pd { display: flex; align-items: center; gap: 11px; }
  .empuje-may-pd img { width: 34px; height: 45px; object-fit: cover; flex: 0 0 34px; background: #EFEDE9; }
  .empuje-may-ped .u { color: #6E6862; }
  .empuje-may-tot { display: flex; justify-content: space-between; align-items: baseline;
    border-top: 1.5px solid #1B1B1B; margin-top: 10px; padding-top: 12px; }
  .empuje-may-tot span { font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; }
  .empuje-may-tot b { font-size: 23px; font-weight: 600; }
  .empuje-may-ok { font-size: 12.5px; color: #2E7D32; margin: 8px 0 0; text-align: right; }
  @media (max-width: 768px) {
    .empuje-may-hero-tx h1 { font-size: 22px; }
    .empuje-may-ped { padding: 26px 16px 4px; }
    .empuje-may-ped table { font-size: 12.5px; }
  }
  .empuje-nosotros-valor-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 10px 0;
  }
  .empuje-nosotros-valor-text {
    font-size: 13px;
    line-height: 1.6;
    color: #555;
    margin: 0;
  }

  /* Equipo — grid of 2-3 cards with photo + name + role + bio */
  .empuje-nosotros-equipo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .empuje-nosotros-persona {
    text-align: center;
  }
  .empuje-nosotros-persona-img {
    width: 100%;
    aspect-ratio: 3/4;
    background-size: cover;
    background-position: center;
    background-color: #DBD7D2;
    margin-bottom: 18px;
  }
  .empuje-nosotros-persona-name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 0 0 4px 0;
  }
  .empuje-nosotros-persona-role {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #8B8589;
    margin: 0 0 12px 0;
  }
  .empuje-nosotros-persona-bio {
    font-size: 13px;
    line-height: 1.6;
    color: #555;
    margin: 0;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }

  /* CTA final */
  .empuje-nosotros-cta {
    background: #1B1B1B;
    color: #F4F0EC;
    padding: 80px 24px;
    text-align: center;
  }
  .empuje-nosotros-cta-title {
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0 0 14px 0;
    line-height: 1.15;
    color: #F4F0EC;
  }
  .empuje-nosotros-cta-sub {
    font-size: 14px;
    line-height: 1.55;
    margin: 0 auto 30px auto;
    max-width: 460px;
    color: #DBD7D2;
  }
  .empuje-nosotros-cta-btn {
    display: inline-block;
    background: #F4F0EC;
    color: #1B1B1B;
    text-decoration: none;
    padding: 16px 44px;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
    transition: background 0.2s ease;
  }
  .empuje-nosotros-cta-btn:hover {
    background: #DBD7D2;
    color: #1B1B1B;
    text-decoration: none;
  }

  /* MOBILE */
  @media (max-width: 768px) {
    .empuje-nosotros-hero { min-height: 70vh; }
    .empuje-nosotros-manifesto { padding: 50px 20px; }
    .empuje-nosotros-section { padding: 50px 20px; }
    .empuje-nosotros-section-head { margin-bottom: 30px; }
    .empuje-nosotros-grid3,
    .empuje-nosotros-equipo {
      grid-template-columns: 1fr;
      gap: 28px;
    }
    .empuje-nosotros-step-num { width: 42px; height: 42px; }
    .empuje-nosotros-cta { padding: 50px 20px; }
    .empuje-nosotros-cta-btn { padding: 14px 32px; }
  }

  /* ============ Páginas de contenido (Políticas, Cómo comprar, FAQ, Contacto, Mayoristas) ============ */
  .empuje-page {
    width: 100%;
    font-family: 'Inter', sans-serif;
    color: #1B1B1B;
    position: relative;
    z-index: 1; /* siempre debajo del header sticky */
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  body.empuje-has-page .template-error,
  body.empuje-has-page .js-error-page,
  body.empuje-has-page .error-page,
  body.empuje-has-page [class*="not-found"],
  body.empuje-has-page [class*="page-404"],
  body.empuje-has-page .page-header,
  body.empuje-has-page .breadcrumb,
  body.empuje-has-page .user-content,
  body.empuje-has-page .page-content,
  body.empuje-has-page .template-page > .container > .row,
  body.empuje-has-page .container > h1.page-title {
    display: none !important;
  }
  .empuje-page-hero {
    position: relative;
    width: 100%;
    padding: 120px 24px 64px;
    background: #F4F0EC;
    text-align: center;
  }
  .empuje-page-hero .empuje-nosotros-eyebrow { color: #8B8589; opacity: 1; }
  .empuje-page-hero .empuje-nosotros-hero-title { margin-bottom: 18px; }
  .empuje-page-hero .empuje-nosotros-hero-sub { color: #555; opacity: 1; }
  .empuje-page-cta-hero { margin-top: 28px; }

  /* Prose / texto enriquecido */
  .empuje-page-prose { max-width: 760px; margin: 0 auto; font-size: 15px; line-height: 1.75; color: #444; }
  .empuje-page-prose h3 { font-size: 18px; font-weight: 700; color: #1B1B1B; margin: 34px 0 12px; }
  .empuje-page-prose h3:first-child { margin-top: 0; }
  .empuje-page-prose p { margin: 0 0 16px; }
  .empuje-page-prose ul { margin: 0 0 20px; padding: 0; list-style: none; }
  .empuje-page-prose li { position: relative; padding-left: 26px; margin-bottom: 12px; }
  .empuje-page-prose li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; background: #1B1B1B; border-radius: 50%; }
  .empuje-page-prose strong { color: #1B1B1B; font-weight: 700; }
  .empuje-page-prose a { color: #1B1B1B; text-decoration: underline; }

  /* Steps de 4 columnas (Cómo comprar) */
  .empuje-page-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 1100px; margin: 0 auto; }

  /* FAQ acordeón */
  .empuje-faq { max-width: 820px; margin: 0 auto; }
  .empuje-faq-item { border-bottom: 1px solid #DBD7D2; }
  .empuje-faq-item:first-child { border-top: 1px solid #DBD7D2; }
  .empuje-faq-q { width: 100%; text-align: left; background: none; border: 0; padding: 22px 44px 22px 0; font-family: inherit; font-size: 15px; font-weight: 600; color: #1B1B1B; cursor: pointer; position: relative; line-height: 1.4; }
  .empuje-faq-q::after { content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 300; color: #8B8589; }
  .empuje-faq-item.open .empuje-faq-q::after { content: '\2212'; }
  .empuje-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
  .empuje-faq-item.open .empuje-faq-a { max-height: 600px; }
  .empuje-faq-a-inner { padding: 0 44px 22px 0; font-size: 14px; line-height: 1.7; color: #555; }
  .empuje-faq-a-inner a { color: #1B1B1B; }

  /* Contacto */
  .empuje-contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 820px; margin: 0 auto; }
  .empuje-contact-card { border: 1px solid #DBD7D2; padding: 40px 28px; text-align: center; background: #FFFFFF; }
  .empuje-contact-card-icon { font-size: 26px; margin-bottom: 14px; }
  .empuje-contact-card-title { font-size: 13px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; margin: 0 0 14px; }
  .empuje-contact-card p { font-size: 14px; line-height: 1.6; color: #555; margin: 0 0 6px; }
  .empuje-contact-card p.big { font-size: 17px; font-weight: 700; color: #1B1B1B; margin: 8px 0 18px; }
  .empuje-contact-note { text-align: center; color: #8B8589; font-size: 13px; margin: 30px auto 0; max-width: 560px; }

  @media (max-width: 768px) {
    .empuje-page-hero { padding: 100px 20px 44px; }
    .empuje-page-steps { grid-template-columns: 1fr; gap: 26px; }
    .empuje-contact-grid { grid-template-columns: 1fr; }
  }

  /* ============ Fixes prueba real Juvia (jul 2026) ============ */
  /* PDP: UNA sola línea de cuotas (ocultamos la nativa, queda la nuestra) */
  #single-product .js-max-installments-container,
  #single-product .js-max-installments {
    display: none !important;
  }
  /* PDP: precio con transferencia + Ahorrás (verde ahorro, reforzado) */
  /* Precio PDP rebalanceado (iteración cliente jul 2026: badges proporcionados) */
  .empuje-pdp-transfer {
    margin: 0 0 6px 0;  /* pegado al precio de lista (el price container ya quedó a 2px) */
    font-size: 16px;
    color: #2E7D32;
    font-weight: 500;
    line-height: 1.5;
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
  }
  .empuje-pdp-transfer strong { font-size: 20px; font-weight: 700; }
  .empuje-pdp-transfer-off { font-weight: 600; font-size: 14px; }
  /* La chapa se despega de las tarjetas de pago: pegada quedaba montada sobre el borde
     de los recuadros de abajo (visto en celular, ago 2026). */
  .empuje-pdp-transfer-save {
    display: inline-block; margin-left: 0; margin-top: 4px; vertical-align: baseline;
    background: #EAF3EC; color: #2E7D32; border: 1px solid rgba(46,125,50,0.45);
    border-radius: 2px; padding: 2px 8px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  }
  /* Aviso del mínimo de compra en la ficha (ago 2026). La clienta se enteraba recién en
     el carrito, después de elegir color y talle: eso se siente como una traba. Dicho acá
     convierte la compra en "armo un combo", que además es más ticket.
     A propósito en gris y del tamaño de la letra chica: no es una alarma, y no tiene que
     pelearle al precio ni al ahorro por transferencia. */
  .empuje-pdp-minimo {
    display: flex; gap: 6px; align-items: baseline;
    margin: 10px 0 2px; font-size: 12px; line-height: 1.45; color: #6E6A66;
  }
  .empuje-pdp-minimo i { font-style: normal; color: #B5AFA8; }
  .empuje-pdp-minimo b { color: #1B1B1B; font-weight: 600; }
  /* El mayorista tiene su propio mínimo, mucho más alto, y ya se lo dice su página. */
  body.empuje-mayorista .empuje-pdp-minimo { display: none !important; }

  /* Pills de financiación UNIFICADOS (cuotas crédito + GoCuotas): mismo formato exacto */
  .empuje-pdp-installments,
  .empuje-pdp-gocuotas {
    display: flex !important; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 4px 8px;
    width: 100% !important;
    background: #FAF8F5 !important; border: 1px solid #DBD7D2 !important; border-radius: 2px;
    padding: 9px 12px !important;
    font-size: 13px !important; line-height: 1.45 !important; color: #555 !important;
    text-align: center;
    margin: 0 0 6px 0 !important;
  }
  .empuje-pdp-installments strong,
  .empuje-pdp-gocuotas strong { color: #1B1B1B; }
  .empuje-gc-text { display: inline; }
  .empuje-gc-pill {
    display: inline-flex; align-items: center; flex-shrink: 0;
    background: #ee2a7b; border-radius: 3px; padding: 4px 8px;
  }
  .empuje-gc-pill img { height: 15px; width: auto; display: block; }
  /* Cuotas: chip discreto (sin caja grande) */
  .empuje-pdp-installments {
    display: inline-block;
    background: #FAF8F5; color: #555; border: 1px solid #DBD7D2;
    border-radius: 2px; padding: 3px 8px;
    font-size: 12px; line-height: 1.4;
    margin: 0 0 4px 0;
  }
  .empuje-pdp-installments strong { color: #1B1B1B; }
  .empuje-ship-free-note {
    display: block; margin-top: 4px;
    font-size: 12px; font-weight: 700; color: #2E7D32 !important;
  }
  /* Aviso de envío mayorista en la ficha: mismo lugar que el de envío gratis (que al
     mayorista se le oculta), en tono neutro porque no es una promo, es una condición. */
  .empuje-ship-may-note { display: none; }
  body.empuje-mayorista .empuje-ship-may-note {
    display: block; margin-top: 4px;
    font-size: 12px; font-weight: 600; color: #1B1B1B;
  }
  .empuje-pill-text { display: inline; }
  /* Mobile: pills en fila prolija — pill a la izquierda, texto fluido al lado (sin columnas raras) */
  @media (max-width: 768px) {
    .empuje-pdp-installments,
    .empuje-pdp-gocuotas {
      justify-content: flex-start !important;
      text-align: left !important;
      flex-wrap: nowrap !important;
      gap: 8px !important;
      font-size: 12px !important;
      padding: 8px 10px !important;
    }
    .empuje-pill-text { flex: 1; min-width: 0; }
    .empuje-gc-pill { padding: 3px 6px; }
    .empuje-gc-pill img { height: 12px; }
  }
  /* Medios de pago en dos tarjetas, una al lado de la otra (mockup aprobado ago 2026).
     Antes eran dos renglones apilados a todo el ancho: ocupaban el doble de alto en la
     pantalla donde lo que se pelea es el scroll. */
  .empuje-pdp-pagos {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 8px 0;
  }
  .empuje-pdp-pagos .empuje-pdp-installments,
  .empuje-pdp-pagos .empuje-pdp-gocuotas {
    display: flex !important; flex-direction: column;
    align-items: flex-start !important; justify-content: flex-start;
    flex-wrap: nowrap !important; gap: 3px !important;
    text-align: left !important; width: auto !important; margin: 0 !important;
    background: #FAF8F5 !important; border: 1px solid #DBD7D2 !important;
    padding: 9px 10px !important; font-size: 11.5px !important; line-height: 1.35 !important;
  }
  .empuje-pdp-pagos .empuje-gc-pill,
  .empuje-pdp-pagos .empuje-pago-marca {
    height: 19px; display: inline-flex; align-items: center; margin-bottom: 2px;
  }
  .empuje-pdp-pagos .empuje-gc-pill { padding: 0 7px; }
  .empuje-pdp-pagos .empuje-gc-pill img { height: 11px; }
  .empuje-pdp-pagos .empuje-pago-marca {
    padding: 0 7px; border: 1px solid #DBD7D2; background: #fff;
    font-size: 9.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
    color: #8B8589;
  }
  /* Un texto por renglón. Con `flex-direction` sola no alcanzaba: medido en vivo, la
     tarjeta de crédito quedaba en `block` y los textos se pegaban entre sí
     ("6 cuotas sin interésde $4.666,50con tarjeta de crédito"). */
  .empuje-pdp-pagos .empuje-pdp-installments,
  .empuje-pdp-pagos .empuje-pdp-gocuotas { flex-direction: column !important; }
  .empuje-pdp-pagos .empuje-pago-tit,
  .empuje-pdp-pagos .empuje-pago-cu,
  .empuje-pdp-pagos .empuje-pago-med { display: block !important; width: 100%; }
  .empuje-pdp-pagos .empuje-pago-tit { font-size: 12px; font-weight: 700; color: #1B1B1B; }
  .empuje-pdp-pagos .empuje-pago-cu { font-size: 11.5px; font-weight: 600; color: #1B1B1B; }
  .empuje-pdp-pagos .empuje-pago-med { font-size: 10.5px; color: #8B8589; }

  /* Línea de promos fijas (12 cuotas $300k) */
  .empuje-pdp-promos {
    font-size: 11px; color: #8B8589; line-height: 1.6;
    margin: 2px 0 10px 0;
  }
  /* PDP: acordeones de descripción en la columna de compra (estilo Top White) */
  /* Ficha VISIBLE: lo que antes estaba plegado en acordeones de un renglón (ago 2026) */
  .empuje-pdp-ficha {
    margin: 18px 0 0 0;
    font-family: 'Inter', sans-serif;
    color: #1B1B1B;
  }
  .empuje-ficha-h {
    font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
    color: #6E6862; margin: 0 0 7px 0; font-weight: 600;
  }
  .empuje-ficha-desc { font-size: 13px; line-height: 1.55; }
  .empuje-ficha-desc p { margin: 0 0 8px 0; }
  .empuje-ficha-desc p:last-child { margin-bottom: 0; }
  .empuje-ficha-desc pre {
    /* El admin usa <pre> para los títulos; sin esto se ven como bloque de código. */
    font-family: inherit; font-size: inherit; white-space: normal; background: none;
    border: 0; padding: 0; margin: 0 0 4px 0; font-weight: 600;
  }
  .empuje-ficha-datos { display: flex; gap: 9px; margin-top: 16px; flex-wrap: wrap; }
  .empuje-ficha-dato {
    flex: 1 1 0; min-width: 0;
    border: 1px solid #DBD7D2; border-radius: 4px; padding: 10px 11px;
  }
  .empuje-ficha-dato.ancho { flex: 1 1 100%; }
  .empuje-ficha-dato span {
    display: block; font-size: 9px; letter-spacing: 1.1px; text-transform: uppercase;
    color: #8B8589;
  }
  .empuje-ficha-dato strong { display: block; font-size: 13px; font-weight: 400; margin-top: 4px; }
  .empuje-ficha-medidas { display: flex; gap: 9px; flex-wrap: wrap; }
  .empuje-ficha-talle {
    flex: 1 1 44%; min-width: 0;
    border: 1px solid #DBD7D2; border-radius: 4px; padding: 10px 11px;
  }
  .empuje-ficha-talle > span {
    display: block; font-size: 9px; letter-spacing: 1.1px; text-transform: uppercase;
    color: #8B8589; margin-bottom: 6px;
  }
  .empuje-ficha-talle dl {
    margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; font-size: 12px;
  }
  .empuje-ficha-talle dt { color: #6E6862; min-width: 0; }
  .empuje-ficha-talle dt.sola { grid-column: 1 / -1; }
  .empuje-ficha-talle dd { margin: 0; text-align: right; white-space: nowrap; }
  .empuje-ficha-nota { font-size: 10.5px; color: #8B8589; margin: 7px 0 0 0; line-height: 1.4; }
  .empuje-pdp-ficha > .empuje-ficha-h:not(:first-child) { margin-top: 16px; }

  .empuje-pdp-acc {
    margin: 18px 0 8px 0;
    font-family: 'Inter', sans-serif;
  }
  .empuje-pdp-acc-item { border-bottom: 1px solid #DBD7D2; }
  .empuje-pdp-acc-item:first-child { border-top: 1px solid #DBD7D2; }
  .empuje-pdp-acc-btn {
    width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
    padding: 16px 34px 16px 0; position: relative;
    font-family: inherit; font-size: 13px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase; color: #1B1B1B;
    line-height: 1.3;
  }
  .empuje-pdp-acc-btn::after {
    content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    font-size: 20px; font-weight: 300; color: #1B1B1B;
  }
  .empuje-pdp-acc-item.open .empuje-pdp-acc-btn::after { content: '−'; }
  .empuje-pdp-acc-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
  .empuje-pdp-acc-item.open .empuje-pdp-acc-body { max-height: 1600px; overflow-y: auto; }
  .empuje-pdp-acc-inner {
    padding: 0 4px 16px 0;
    font-size: 14px; line-height: 1.7; color: #555;
  }
  .empuje-pdp-acc-inner p { margin: 0 0 10px; }
  .empuje-pdp-acc-inner img { max-width: 100%; height: auto; }
  .empuje-pdp-acc-inner pre { white-space: pre-wrap; font-family: inherit; margin: 0 0 8px; }
  .empuje-pdp-acc-inner a { color: #1B1B1B; text-decoration: underline; }
  /* La descripción full-width vieja ya no se genera; por si el tema la muestra, fuera */
  body .empuje-pdp-full-info { display: none !important; }

  /* Stock label NATIVO del tema → identidad de marca (Eerie Black, era color del tema default) */
  .js-stock-label, .js-stock-label-private {
    background: #1B1B1B !important; color: #F4F0EC !important;
    border: none !important; border-radius: 0 !important;
    font-weight: 700 !important; letter-spacing: 0.5px !important; text-transform: uppercase;
  }
  /* PDP: alineación de la columna de compra (pedido cliente jul 2026) */
  #single-product .js-price-container { margin-bottom: 2px !important; }
  /* `!important` porque este bloque es el contenedor nativo de TiendaNube y su margen
     lo fija el CSS del tema, que vive en otro dominio: el navegador no lo deja leer pero
     sí lo aplica, y le ganaba a la regla nuestra. Sin esto, la chapa de "Ahorrás" queda
     montada sobre el borde de las tarjetas de pago. */
  #single-product .empuje-pdp-transfer { margin: 0 0 14px 0 !important; }
  #single-product .empuje-pdp-installments { margin: 2px 0 4px 0; }
  #single-product .empuje-pdp-promos { margin: 0 0 14px 0; }
  #single-product form.js-product-form { width: 100%; }
  /* SIN display:block forzado (causaba un 2° botón: desocultaba inputs hidden del tema) */
  #single-product .js-addtocart {
    width: 100% !important; max-width: 100% !important; text-align: center !important;
  }
  /* Precio alineado a la izquierda con el nombre (la sangría era el padding del .col de Bootstrap
     dentro del .row del price-container — verificado en DOM real) */
  /* v3: además del padding del col (v2), el gap restante era un span.d-inline-block VACÍO
     (wrapper del precio tachado) cuyo whitespace interno mide ~10px. display:flex en el col
     elimina los espacios entre elementos y alinea tachado+precio en baseline. */
  #single-product .js-price-container.row { margin: 0 0 2px 0 !important; }
  #single-product .js-price-container.row > .col,
  #single-product .js-price-container.row > [class*="col"] {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  #single-product .js-price-container .col {
    display: flex !important; align-items: baseline; gap: 8px;
  }
  #single-product .js-price-display { text-align: left !important; }
  /* ATC: el form-row del tema es multi-columna (el botón quedaba en una col con otra vacía al lado).
     SOLO la fila del botón (:has) — la de cantidad mantiene su layout flex. */
  #single-product form.js-product-form .form-row:has(.js-addtocart) {
    display: block !important; margin: 0 !important;
  }
  #single-product form.js-product-form .form-row:has(.js-addtocart) > [class*="col"] {
    padding: 0 !important; width: 100% !important; max-width: 100% !important; flex: none !important;
  }
  /* Chip AHORRÁS en mobile: sin margen colgado cuando baja de línea */
  @media (max-width: 768px) {
    .empuje-pdp-transfer-save { display: inline-block; margin-left: 0; margin-top: 4px; }
  }
  /* Badge de cuotas: texto centrado, ancho completo */
  #single-product .empuje-pdp-installments {
    display: block !important; width: 100%; text-align: center;
  }

  /* La versión corta del medio de pago ("con crédito") solo existe para el celular. */
  .empuje-pago-med-corto { display: none; }

  /* ===== LOS MEDIOS DE PAGO, EN UNA SOLA TARJETA — opción B (mockup aprobado 27/8/2026)
     Antes: línea verde suelta, chapa de ahorro, y las dos tarjetas una al lado de la otra
     —160px en celular—, con el aviso de compra mínima METIDO EN EL MEDIO, que partía en
     dos tandas lo único que la clienta compara ahí: cuánto sale según cómo pague.
     Ahora es una sola tarjeta de tres renglones: medio de pago a la izquierda, plata a la
     derecha, los tres montos alineados en columna. El aviso del mínimo bajó.
     NINGÚN NODO CAMBIA DE PADRE: la línea de transferencia sigue donde estaba y hace de
     primer renglón (con el borde sin cerrar abajo), y el bloque de las dos tarjetas hace
     de renglones 2 y 3. Eso importa porque el contenedor de la transferencia puede ser el
     NATIVO del tema, y si se lo mudara de lugar, el tema lo rehace y se pierde el formato.
     VALE EN LAS DOS PANTALLAS desde el 27/8/2026 (pedido de Mati). La columna de compra
     de escritorio mide 392px, casi lo mismo que un teléfono, así que la misma tarjeta
     entra igual. Lo que cambia entre pantallas está en los dos bloques del final. */
  /* Renglón 1 — transferencia */
  #single-product .empuje-pdp-transfer {
    display: flex !important; align-items: center; flex-wrap: nowrap !important; gap: 8px;
    margin: 10px 0 0 0 !important;
    border: 1px solid #DBD7D2; border-bottom: 0; background: #F2F7F2;
    padding: 7px 11px; font-size: 12px; color: #4A453F;
  }
  #single-product .empuje-pdp-transfer .empuje-pdp-transfer-lbl {
    order: 1; font-weight: 600; color: #1B1B1B; white-space: nowrap;
  }
  #single-product .empuje-pdp-transfer .empuje-pdp-transfer-save {
    order: 2; margin: 0 !important; font-size: 9.5px; padding: 1px 5px; white-space: nowrap;
  }
  #single-product .empuje-pdp-transfer strong {
    order: 3; margin-left: auto; font-size: 13.5px; font-weight: 700; color: #2E7D32;
  }
  /* Renglones 2 y 3 — cuotas */
  #single-product .empuje-pdp-pagos {
    display: block !important; margin: 0 0 10px 0;
    border: 1px solid #DBD7D2; background: #FAF8F5;
  }
  /* TODO CON `!important` A PROPÓSITO: el formato viejo —las dos tarjetas apiladas en
     columna— lo fija el bloque de más arriba con `!important` en cada propiedad
     (`flex-direction: column`, el padding, los `display: block` de cada texto). Sin
     repetirlo acá, las reglas nuevas pierden aunque tengan más especificidad y los
     renglones vuelven a apilarse. Medido en vivo el 27/8/2026: sin esto, cada renglón
     queda de 76px en vez de 32. */
  #single-product .empuje-pdp-pagos .empuje-pdp-installments,
  #single-product .empuje-pdp-pagos .empuje-pdp-gocuotas {
    display: flex !important; flex-direction: row !important;
    align-items: center !important; gap: 8px !important;
    width: auto !important; text-align: left !important;
    margin: 0 !important; padding: 7px 11px !important;
    border: 0 !important; border-top: 1px solid #E7E2DC !important;
    background: none !important;
    font-size: 12px !important; line-height: 1.35 !important; color: #4A453F;
  }
  /* El primero pega contra el renglón de la transferencia: ahí ya hay un borde. */
  #single-product .empuje-pdp-pagos > *:first-child { border-top: 0 !important; }
  #single-product .empuje-pdp-pagos .empuje-pago-tit {
    order: 1; display: inline !important; width: auto !important;
    font-weight: 600; color: #1B1B1B; font-size: 12px !important;
  }
  #single-product .empuje-pdp-pagos .empuje-pago-med-corto {
    display: inline !important; order: 2; color: #6E6A66;
  }
  #single-product .empuje-pdp-pagos .empuje-gc-pill {
    order: 3; margin-bottom: 0 !important;
  }
  /* La plata, alineada a la derecha en los tres renglones: así se comparan sin pensar. */
  #single-product .empuje-pdp-pagos .empuje-pago-cu {
    order: 4; display: inline-block !important; width: auto !important;
    margin-left: auto !important; white-space: nowrap;
    font-size: 13.5px !important; font-weight: 700; color: #1B1B1B;
  }
  /* Lo que sobra del formato anterior: la chapa "Crédito", la línea larga del medio de
     pago y el "de " que precedía al monto. */
  #single-product .empuje-pdp-pagos .empuje-pago-marca,
  #single-product .empuje-pdp-pagos .empuje-pago-med,
  #single-product .empuje-pdp-pagos .empuje-pago-de { display: none !important; }
  #single-product .empuje-pdp-minimo { margin: 0 0 2px 0; }

  /* SOLO ESCRITORIO: ahí sobra ancho, así que los renglones respiran un poco más y el
     ahorro en pesos —que en el celular no entra— se queda escrito. */
  @media (min-width: 769px) {
    #single-product .empuje-pdp-transfer { padding: 9px 12px; font-size: 13px; }
    #single-product .empuje-pdp-transfer .empuje-pdp-transfer-save {
      font-size: 10.5px; padding: 2px 6px;
    }
    #single-product .empuje-pdp-transfer strong { font-size: 15px; }
    #single-product .empuje-pdp-pagos .empuje-pdp-installments,
    #single-product .empuje-pdp-pagos .empuje-pdp-gocuotas {
      padding: 9px 12px !important; font-size: 13px !important;
    }
    #single-product .empuje-pdp-pagos .empuje-pago-tit { font-size: 13px !important; }
    #single-product .empuje-pdp-pagos .empuje-pago-cu { font-size: 15px !important; }
  }

  /* SOLO CELULAR */
  @media (max-width: 768px) {
    /* El monto del ahorro sale del renglón: en 375px no entra junto al porcentaje y a la
       plata. En escritorio se sigue leyendo entero. */
    #single-product .empuje-pdp-transfer .empuje-save-monto { display: none; }

    /* EL SEPARADOR QUE QUEDÓ SIN FUNCIÓN (opción 2 del mockup, aprobada 27/8/2026).
       Es una línea de 1px con 20px de aire arriba y 20 abajo. Separaba el precio del
       formulario de compra; en el celular ese formulario se mudó a la barra de abajo y
       quedó fuera de pantalla, así que la línea separaba dos cosas que ya no se tocan:
       40px de aire por nada. En ESCRITORIO no se toca, porque ahí el formulario sigue a
       la vista y la línea sigue separando algo.
       Se lo apunta como hermano del aviso del mínimo: en esta columna hay un solo
       separador y está justo antes del formulario (verificado en vivo el 27/8/2026). */
    #single-product .empuje-pdp-minimo ~ .divider { display: none !important; }

    /* MIGAS: queda solo el atajo al rubro más cercano (pedido de Mati, 27/8/2026).
       El camino completo lo sigue leyendo Google del bloque de datos estructurados, que
       viaja aparte y no se toca. Verificado el 27/8/2026: el HTML visible de las migas NO
       lleva marcado de SEO, y el JSON-LD de la página trae la lista completa.
       Se muestra el ÚLTIMO enlace, que siempre es el rubro más cercano al producto; el
       nombre del producto es un `span` y se va con el resto.
       En escritorio se dejan enteras: ahí no cuestan espacio y sirven para navegar. */
    #single-product .breadcrumbs > * { display: none !important; }
    #single-product .breadcrumbs > a.crumb:last-of-type {
      display: inline-block !important; color: #6E6A66;
    }
    #single-product .breadcrumbs > a.crumb:last-of-type::before { content: "\2039  "; }
    #single-product .page-header { padding-top: 16px !important; }
  }
  /* Teléfonos de 360px y menos: medido en vivo, el renglón de GO se parte en dos —"3
     cuotas sin interés" + "con débito" + el logo + la plata no entran en una línea—. Se
     va el "con crédito / con débito": la chapa de GO ya dice de qué se trata, y en el
     renglón de arriba el crédito se sobreentiende. Con eso vuelve a una sola línea. */
  @media (max-width: 374px) {
    #single-product .empuje-pdp-pagos .empuje-pago-med-corto { display: none !important; }
  }
  /* ATC: más bajo y ancho completo (el form era inline-block y limitaba el ancho) */
  #single-product form.js-product-form { display: block !important; width: 100% !important; }
  #single-product .js-addtocart {
    padding: 13px 20px !important; height: auto !important; min-height: 0 !important;
    font-size: 13px !important; line-height: 1.3 !important;
  }
  /* Medios de pago: signo + / − como el resto de los acordeones (chau flecha) */
  .empuje-pdp-payments-header-chevron { display: none !important; }
  .empuje-pdp-payments-header { position: relative; }
  .empuje-pdp-payments-header::after {
    content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    font-size: 20px; font-weight: 300; color: #1B1B1B;
  }
  .empuje-pdp-payments.open .empuje-pdp-payments-header::after { content: '−'; }
  /* Relacionados en mobile: ~1.5 cards visibles (se rompió a 3 por fila).
     ⚠️ El ancho va en el wrapper .swiper-slide, NO en la card: la card a 62vw dentro
     de un slide más angosto hacía que se superpongan 20px ("todas juntas"). */
  @media (max-width: 768px) {
    .section-products-related .swiper-slide,
    .js-related-products .swiper-slide {
      min-width: 62vw !important; max-width: 62vw !important; flex: 0 0 62vw !important;
    }
    .section-products-related .swiper-slide .js-item-product,
    .js-related-products .swiper-slide .js-item-product {
      min-width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
    }
    /* Fallback si el tema renderiza sin wrapper swiper-slide (con wrapper, la regla
       de arriba gana por especificidad y la card llena el 100% del slide) */
    .section-products-related .js-item-product,
    .js-related-products .js-item-product {
      min-width: 62vw !important; max-width: 62vw !important; flex: 0 0 62vw !important;
    }
    /* Aire en los bordes del carrusel */
    .section-products-related .swiper-slide:first-child,
    .js-related-products .swiper-slide:first-child { margin-left: 16px !important; }
    .section-products-related .swiper-slide:last-child,
    .js-related-products .swiper-slide:last-child { margin-right: 16px !important; }
  }
  /* ===== Señales de confianza + política de cambios (briefs cliente ago 2026) =====
     Verde de marca = beneficio/seguridad · gris neutro + (i) = condición. Línea liviana,
     nunca banner: el protagonismo es del botón de comprar. */
  .empuje-pdp-trust-wrap { margin: 10px 0 4px 0; }
  .empuje-trust-line {
    display: flex; align-items: flex-start; gap: 6px;
    font-size: 12px; color: #2E7D32; line-height: 1.4;
  }
  .empuje-trust-line > svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; }
  .empuje-trust-line strong { font-weight: 700; }
  .empuje-policy-note {
    display: flex; align-items: flex-start; gap: 6px;
    margin: 8px 0 0 0; font-size: 12px; line-height: 1.45; color: #8B8589;
  }
  .empuje-policy-note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
  .empuje-policy-note a { color: #555; text-decoration: underline; }
  .empuje-policy-note a:hover { color: #1B1B1B; }
  /* Link "Guía de talles" junto al selector de Talle */
  .empuje-size-guide-link {
    background: none; border: 0; padding: 0; margin-left: 10px; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 11px; color: #555;
    text-decoration: underline; letter-spacing: 0.2px;
  }
  .empuje-size-guide-link:hover { color: #1B1B1B; }
  /* Aviso de cambios JUNTO AL TALLE (26/8/2026). Va acá y no solo abajo porque este es
     el momento en que se genera el problema: si se entera cuando ya eligió, el aviso
     llega tarde. Y no se escribe como advertencia sino como ayuda —medidas y WhatsApp
     al lado—, que es lo único que evita el cambio en vez de solo negarlo. */
  .empuje-talle-nota {
    margin: 8px 0 0 0; padding-left: 10px; border-left: 2px solid #EDE9E4;
    font-size: 11.5px; line-height: 1.5; color: #4A453F;
  }
  .empuje-talle-nota button,
  .empuje-talle-nota a {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 11.5px; color: #1B1B1B;
    text-decoration: underline;
  }
  .empuje-talle-nota button:hover,
  .empuje-talle-nota a:hover { color: #000; }
  /* La versión de celular vive dentro del bloque de confianza, justo debajo del aviso
     de cambios: se alinea con él en vez de con el selector de talle. */
  .empuje-talle-nota-ficha { margin: 6px 0 0 20px; }
  @media (max-width: 768px) {
    .empuje-talle-nota-ficha { margin-left: 20px; font-size: 11.5px; }
  }
  /* Carrito: línea de confianza bajo "Iniciar compra" */
  .empuje-trust-cart { justify-content: center; margin: 10px 0 2px 0; font-size: 11.5px; }
  /* Carrito: la condición de cambios, debajo de la de confianza. Centrada como el resto
     del bloque de totales y en el mismo gris de condición, nunca en verde de beneficio. */
  .empuje-policy-cart {
    justify-content: center; text-align: center; margin: 6px 0 2px 0;
    font-size: 11.5px; line-height: 1.5;
  }
  .empuje-policy-cart strong { font-weight: 600; color: #4A453F; }
  @media (max-width: 768px) {
    .empuje-trust-line { gap: 3px 12px; font-size: 11.5px; }
    .empuje-policy-note { font-size: 11.5px; }
  }
  /* Carrito: centrar el bloque de totales (pedido cliente) */
  .js-cart-total-container,
  .js-cart-total-container .js-cart-total,
  .empuje-cart-save,
  [class*="payment-discount-price-cart-container"] { text-align: center !important; }
  [class*="payment-discount-price-cart-container"] { justify-content: center !important; }
  /* PDP: "Retirar por" del calculador nativo (ya tenemos nuestro bloque de retiro abajo) */
  #single-product .empuje-native-ship [class*="pickup"],
  #single-product .empuje-native-ship [class*="branch"] { display: none !important; }
  /* Carrusel principal: el chevron (16px) no estaba centrado en el círculo (48px)
     y las flechas quedaban pegadas al borde. */
  /* El tema fuerza display:block en el control con más especificidad, así que el
     flex no ganaba: centramos el chevron en absoluto (no depende del display). */
  .js-swiper-home-control { padding: 0 !important; }
  .js-swiper-home-control svg {
    position: absolute !important; top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 15px !important; height: 15px !important; margin: 0 !important;
  }
  /* El tema invierte el chevron de "anterior" con .icon-flip-horizontal (scaleX(-1)).
     Al centrarlo con transform lo estábamos pisando y la flecha apuntaba al revés:
     hay que re-aplicar el espejado DENTRO del mismo transform. */
  .js-swiper-home-control svg.icon-flip-horizontal,
  .js-swiper-home-prev svg {
    transform: translate(-50%, -50%) scaleX(-1) !important;
  }
  .js-swiper-home-prev { left: 16px !important; }
  .js-swiper-home-next { right: 16px !important; }
  /* PDP: el label nativo dejaba un punto colgado en su propia línea
     ("…si sumás este producto" + "."), y repite lo que ya dice nuestra caja. */
  #single-product .empuje-native-ship .js-product-shipping-label { display: none !important; }
  /* Modales nativos (puntos de retiro): acotar íconos que se renderizaban gigantes
     cuando el modal se inyecta por AJAX sin heredar el tamaño del tema. */
  .js-modal .icon-inline,
  .js-modal .utilities-icon,
  [class*="pickup"] .icon-inline { width: 22px !important; height: 22px !important; flex: 0 0 auto; }
  /* ===== Popup de Perfit por encima del header/USP =====
     Nuestro header sticky va en z-index 99998 y la USP bar arriba de él, así que el
     popup de Perfit (que usa un z-index mucho menor) quedaba cortado entre ambos.
     Se eleva por selector conocido y, por las dudas, desde JS (ver _empujeLiftPerfit). */
  [id*="perfit" i], [class*="perfit" i],
  iframe[src*="perfit" i],
  [id*="perfit" i] ~ [class*="overlay" i] {
    z-index: 2147483000 !important;
  }
  /* Categoría sin rótulo (la imagen ya trae el nombre): sin degradé oscuro */
  .empuje-home-cat-card:not(:has(.empuje-home-cat-label))::after { display: none; }
  /* Texto solo para lectores de pantalla y buscadores: presente en el HTML,
     invisible en pantalla. NO usar display:none — eso lo oculta también a ellos. */
  .empuje-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  /* 3er nivel: submenú lateral con flecha indicadora */
  .empuje-header-menu .empuje-dropdown li.empuje-dd-has-sub { position: relative; }
  .empuje-header-menu .empuje-dropdown li.empuje-dd-has-sub > a { padding-right: 34px !important; }
  /* Flecha del submenú: span real (el ::after con bordes no pintaba) */
  .empuje-dd-chev {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    font-size: 17px; line-height: 1; color: #1B1B1B;
    transition: right .16s ease;
  }
  .empuje-header-menu .empuje-dropdown li.empuje-dd-has-sub:hover .empuje-dd-chev { right: 11px; }
  /* El item con submenú se distingue del resto */
  .empuje-header-menu .empuje-dropdown li.empuje-dd-has-sub > a { font-weight: 600 !important; }
  /* ⚠️ El dropdown padre tiene max-height + overflow-y:auto (listas largas), así que
     un submenú en position:absolute quedaba RECORTADO y no se veía ("hacía el amague").
     Solución: position FIXED, fuera de cualquier contexto de recorte, posicionado por
     JS al hacer hover (ver _empujePlaceFlyout). */
  .empuje-header-menu .empuje-dropdown ul.empuje-dd-flyout,
  .empuje-dd-flyout {
    position: absolute; top: -8px; left: 100%;
    min-width: 210px !important; max-width: 260px;
    width: auto !important; column-count: 1 !important;
    margin: 0; padding: 8px 0; list-style: none;
    background: #FFFFFF; border: 1px solid #DBD7D2;
    box-shadow: 0 6px 20px rgba(0,0,0,.10);
    opacity: 0; visibility: hidden;
    transition: opacity .14s ease, visibility .14s;
    z-index: 2147483000;
  }
  /* Hover encadenado nativo: el submenú está dentro del li, así que mantener el
     mouse sobre él mantiene también abierto al dropdown padre. Sin JS de por medio. */
  .empuje-header-menu .empuje-dropdown li.empuje-dd-has-sub:hover > .empuje-dd-flyout,
  .empuje-header-menu .empuje-dropdown li.empuje-dd-has-sub:focus-within > .empuje-dd-flyout {
    opacity: 1; visibility: visible;
  }
  .empuje-dd-flyout a {
    display: block; padding: 8px 20px !important;
    font-size: 11px !important; letter-spacing: 1.2px !important;
    color: #1B1B1B; text-decoration: none; white-space: nowrap;
  }
  .empuje-dd-flyout a:hover { background: #F4F0EC; text-decoration: none; }
  /* Banner de cookies: el botón heredaba texto negro sobre fondo oscuro → ilegible */
  .js-notification-cookie-banner .btn,
  .js-notification-cookie-banner a.btn,
  [class*="cookie"] .btn {
    color: #FFFFFF !important; border-color: #FFFFFF !important; background: transparent !important;
  }
  .js-notification-cookie-banner .btn:hover,
  [class*="cookie"] .btn:hover { background: #FFFFFF !important; color: #1B1B1B !important; }
  /* Links legales del footer (arrepentimiento + Defensa del Consumidor).
     El markup está comentado desde el 7 ago 2026 a pedido de Mati (ver buildFooter),
     así que hoy este CSS no se usa. Se deja para que reponerlos sea descomentar y listo. */
  .empuje-footer-legal {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    margin: 26px 0 0 0; padding-top: 22px; border-top: 1px solid #DBD7D2;
  }
  .empuje-footer-legal-btn {
    display: inline-block; padding: 9px 18px;
    border: 1px solid #8B8589; color: #555 !important;
    font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
    text-decoration: none; transition: all .18s ease; background: transparent;
  }
  .empuje-footer-legal-btn:hover {
    background: #1B1B1B; border-color: #1B1B1B; color: #FFFFFF !important; text-decoration: none;
  }
  @media (max-width: 600px) {
    .empuje-footer-legal { flex-direction: column; align-items: stretch; }
    .empuje-footer-legal-btn { text-align: center; }
  }
  /* ===== Menú mobile: acordeón de 2 niveles ===== */
  .empuje-m-item { list-style: none; }
  .empuje-m-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .empuje-m-row > a { flex: 1; display: block; }
  .empuje-m-toggle {
    flex: 0 0 42px; width: 42px; height: 42px;
    background: none; border: 0; cursor: pointer;
    font-size: 20px; font-weight: 300; line-height: 1; color: #1B1B1B;
    display: flex; align-items: center; justify-content: center;
  }
  .empuje-m-sub { display: none; margin: 0; padding: 0; list-style: none; }
  .empuje-m-item.open > .empuje-m-sub { display: block; }
  .empuje-m-lvl2 > .empuje-m-row > a { padding-left: 18px !important; font-size: 13px; opacity: .85; }
  .empuje-m-lvl3 > .empuje-m-row > a { padding-left: 34px !important; font-size: 12.5px; opacity: .7; }
  .empuje-m-lvl2 > .empuje-m-row, .empuje-m-lvl3 > .empuje-m-row { border-top: 1px solid rgba(0,0,0,.05); }
  /* Card de Destacados armada desde el motor */
  .empuje-engine-card { display: block; }
  /* En Destacados conviven DOS tipos de tarjeta: estas, que arma nuestro motor, y las
     nativas de TiendaNube. Las nativas usan 2:3 y estas usaban 3:4 → las fotos salían
     de 297 px al lado de otras de 335 y la fila quedaba despareja (ago 2026).
     Va con aspect-ratio y no con padding-bottom: el box-sizing:border-box heredado
     hacía que el padding porcentual no cambiara la altura. */
  .empuje-engine-card-img {
    display: block; width: 100%;
    padding-bottom: 0; height: auto; aspect-ratio: 2 / 3;
    background-size: cover; background-position: center top; background-color: #F4F0EC;
  }
  /* Las tarjetas del motor no traen fila de colores, así que su bloque de texto medía
     91 px contra 123 de las nativas. El piso las empareja: 335 + 123 = 458 en las dos. */
  .empuje-engine-card .item-description { min-height: 123px; }
  .empuje-engine-card .item-description { text-align: left; padding-top: 8px; }
  .empuje-engine-card .item-name {
    font-size: 13px; letter-spacing: .5px; text-transform: uppercase;
    color: #1B1B1B; text-decoration: none; display: block;
  }
  .empuje-engine-card .item-price { font-size: 16px; font-weight: 700; color: #1B1B1B; margin-top: 2px; }
  @media (max-width: 768px) {
    .empuje-engine-card .item-name { font-size: 11px; }
    .empuje-engine-card .item-price { font-size: 14px; }
  }
  /* ============================================================
     VISTA MAYORISTA (ago 2026) — la marca `empuje-mayorista` la pone el script
     del final del body. Los clientes de la tabla "JUVIA MAYORISTA" pagan solo por
     transferencia y su medio tiene 0% extra: el precio que ya ven ES el que pagan.
     Todo lo que prometa cuotas o un descuento adicional les miente, así que se va.
     ============================================================ */
  body.empuje-mayorista .empuje-card-installments,
  body.empuje-mayorista .empuje-card-transfer,
  body.empuje-mayorista .item-installments,
  body.empuje-mayorista .js-item-installments-container,
  body.empuje-mayorista [class*="payment-discount-price-product-container"],
  body.empuje-mayorista .empuje-addon-transfer,
  body.empuje-mayorista .empuje-cart-installments,
  body.empuje-mayorista .empuje-cart-transfer,
  body.empuje-mayorista .empuje-cart-transfer-fallback,
  body.empuje-mayorista .empuje-cart-save,
  /* Las cuotas NATIVAS del carrito (30/8/2026). `.empuje-cart-installments` de arriba no
     está aplicada a ningún elemento —es un selector muerto—, así que la mayorista venía
     viendo "6 cuotas sin interés" en el carrito desde siempre. Se arregla con la clase
     real, y de paso alcanza al pie fijo nuevo, donde las cuotas van al lado del total. */
  body.empuje-mayorista .js-installments-cart-total,
  body.empuje-mayorista .empuje-cuotas-al-lado,
  /* Y el precio por transferencia de las tarjetas de "Te puede interesar". */
  body.empuje-mayorista .empuje-int-card .t,
  /* Con #single-product porque el bloque de la ficha ya se fuerza a `display: block
     !important` desde un selector con id, y sin id acá no le ganaba. */
  body.empuje-mayorista #single-product .empuje-pdp-installments,
  body.empuje-mayorista #single-product .empuje-pdp-transfer,
  body.empuje-mayorista #single-product .empuje-pdp-gocuotas,
  body.empuje-mayorista #single-product .empuje-pdp-promos,
  body.empuje-mayorista .empuje-pdp-installments,
  body.empuje-mayorista .empuje-pdp-transfer,
  body.empuje-mayorista .empuje-pdp-gocuotas,
  body.empuje-mayorista .empuje-pdp-promos {
    display: none !important;
  }

  /* Acordeón "Medios de pago" de la ficha (ago 2026): lo armamos nosotros con cuatro
     grupos fijos, y al mayorista le aparecían los cuatro. Su tabla solo admite el medio
     "solo mayoristas" (transferencia), así que Mercado Pago, Efectivo y GoCuotas le
     ofrecen formas de pago que no va a encontrar en el checkout. Se ocultan por CSS y no
     al armar el HTML porque la marca `empuje-mayorista` llega después (la detección
     compara contra el precio público): si se decidiera al construirlo, el acordeón ya
     estaría hecho con los cuatro grupos y no habría vuelta atrás. */
  body.empuje-mayorista .empuje-pm-mp,
  body.empuje-mayorista .empuje-pm-efectivo,
  body.empuje-mayorista .empuje-pm-gc,
  /* Banner de GoCuotas dentro del carrito: no es del tema, lo inyecta la app de GoCuotas
     (`.gocuotas-info-container-cart`). Por eso no alcanzaba con las reglas de arriba. */
  body.empuje-mayorista .gocuotas-info-container-cart {
    display: none !important;
  }

  /* Transferencia en el acordeón: el % está fijo en el código y es el de la tienda
     minorista. Al mayorista se le mostraba "15% OFF" y un precio tachado que en el
     checkout no existe, porque su medio de pago tiene 0% extra. Se le van el badge, el
     renglón del descuento y la aclaración minorista; queda la línea que dice la verdad.
     Ambas clases se usan solo en este grupo, así que ocultarlas no arrastra nada más. */
  .empuje-pm-transfer-may { display: none; }
  body.empuje-mayorista .empuje-pm-group-badge,
  body.empuje-mayorista .empuje-pm-discount-row,
  body.empuje-mayorista .empuje-pm-transfer-note {
    display: none !important;
  }
  body.empuje-mayorista .empuje-pm-transfer-may { display: block; }

  /* ============================================================
     ENVÍO MAYORISTA A LA INVERSA (ago 2026) — el método "Envío mayorista — costo a
     coordinar por WhatsApp" filtra por MONTO MÍNIMO, no por tipo de cliente: TN no sabe
     restringir un envío a la tabla mayorista. Resultado: una clienta MINORISTA con un
     carrito grande también lo ve y lo puede elegir. Acá sí sabemos quién es cada una,
     así que se lo ocultamos a quien no es mayorista.
     El selector va por el código del método (`table_7574109`), que es lo único estable
     que TN deja en el DOM — el nombre visible no se puede seleccionar por CSS. OJO: si
     el método se borra y se vuelve a crear en el admin, TN le da un código nuevo y hay
     que actualizarlo acá.
     No se toca la selección por JS: el listado siempre trae antes las opciones de Envío
     Nube (Correo Argentino cubre todo el país), así que la mayorista nunca queda primera
     ni marcada por defecto, y ocultarla no puede dejar a nadie sin opciones. */
  body:not(.empuje-mayorista) [data-store="shipping-calculator-item-table_7574109"] {
    display: none !important;
  }
  /* La barra fija de compra en celular: queda el precio, se va la bajada de cuotas */
  body.empuje-mayorista .empuje-pdp-barra-precio span { display: none !important; }

  /* Envío gratis: al mayorista no le corresponde (ago 2026). La promo de TN está atada
     a Correo Argentino Clásico, y la tabla mayorista no ofrece ese medio, así que nunca
     se le puede activar. Prometérselo sería mentirle igual que las cuotas. */
  body.empuje-mayorista .empuje-ship-free-note,
  body.empuje-mayorista .empuje-shipping-progress {
    display: none !important;
  }

  /* Sello "Pago por transferencia" — solo en la ficha, reemplaza a las líneas que se fueron */
  .empuje-may-sello { display: none; }
  body.empuje-mayorista #single-product .empuje-may-sello {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
    color: #1B1B1B; border: 1px solid #DBD7D2; padding: 6px 11px; margin: 10px 0 4px 0;
  }
  .empuje-may-sello i {
    width: 5px; height: 5px; border-radius: 50%; background: #46583A; display: block;
  }

  /* ===== Fixes deploy Juvia (ago 2026) ===== */
  /* PDP: ocultar los bloques NATIVOS de envío y local (pedido cliente: quedan los nuestros) */
  /* "Nuestro local" nativo: oculto (tenemos nuestro bloque de retiro) */
  #single-product .js-product-branches-container,
  #single-product .js-toggle-branches { display: none !important; }
  /* Calculador NATIVO movido a nuestra caja: visible y con estética de marca */
  #single-product .empuje-native-ship { display: block !important; width: 100%; margin: 6px 0 0 0; }
  /* El acordeón nativo repetía el título ("MEDIOS DE ENVÍO") y venía colapsado:
     ocultamos su cabecera y mostramos el contenido siempre abierto. */
  #single-product .empuje-native-ship .js-accordion-toggle { display: none !important; }
  #single-product .empuje-native-ship .js-accordion-content {
    display: block !important; height: auto !important; max-height: none !important;
    opacity: 1 !important; overflow: visible !important; padding: 0 !important;
  }
  #single-product .empuje-native-ship .js-accordion-container { margin: 0 !important; }
  /* El botón CALCULAR queda afuera: sus esquinas derechas tienen que acompañar el radio
     del campo del código postal (ver el bloque del calculador, más arriba). Esta regla
     está DESPUÉS en el archivo y con la misma especificidad, así que sin el :not() le
     ganaba por orden y el botón volvía a tener las puntas rectas (26/8/2026). */
  #single-product .empuje-native-ship .btn:not(.js-calculate-shipping) { border-radius: 0 !important; }
  /* Carrito: ocultar la alerta NATIVA de promos (duplica nuestra barra de progreso) */
  #modal-cart .js-shipping-calculator-response .alert-warning,
  .js-shipping-calculator-response .alert-warning { display: none !important; }
  /* Carrito: centrar la línea de confianza bajo "Iniciar compra" */
  #modal-cart .empuje-trust-cart,
  .modal-cart .empuje-trust-cart { justify-content: center !important; text-align: center; }
  /* Alerta nativa de promos en el carrito: al color de marca (venía naranja de advertencia) */
  #modal-cart .alert-warning,
  .js-shipping-calculator-response .alert-warning {
    color: #1B1B1B !important; border-color: #DBD7D2 !important;
    background: #FAF8F5 !important;
  }
  #modal-cart .alert-warning svg, .js-shipping-calculator-response .alert-warning svg { display: none !important; }
  /* Footer: hover de redes sociales prolijo (antes cambiaba de color de forma brusca) */
  .empuje-footer-social a, .empuje-footer-socials a {
    transition: opacity .18s ease, transform .18s ease;
  }
  .empuje-footer-social a:hover, .empuje-footer-socials a:hover {
    opacity: 0.65; transform: translateY(-1px);
    background: inherit !important; color: inherit !important;
  }
  /* Acordeones PDP: el +/− cambiaba antes de terminar de cerrar */
  .empuje-pdp-acc-item .empuje-pdp-acc-body { transition: none !important; }
  /* Card de listado estilo Top White: todo alineado a la izquierda, swatches a la derecha del nombre */
  .js-item-product .item-description { text-align: left !important; }
  .empuje-card-toprow {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin: 8px 0 2px 0;
  }
  .empuje-card-toprow .item-name,
  .empuje-card-toprow .js-item-name {
    margin: 0 !important; text-align: left !important; min-height: 0 !important; flex: 1;
    font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase;
  }
  .empuje-card-toprow .empuje-colors-overlay {
    width: auto !important; margin: 0 !important; padding: 0 !important;
    text-align: right; flex-shrink: 0;
  }
  /* "+" para agregar, a la derecha del nombre (ago 2026, estilo Zara).
     Se dibuja finito, pero el ::after le da 44 px de zona táctil invisible: sin eso,
     en el celular es un blanco de 18 px y no se acierta.
     3/9/2026: se le puso el recuadro. Dibujado suelto no decía que fuera un botón
     —en el celular no hay hover que lo revele—, y la clienta no tenía cómo saber que
     ahí se compra. El borde no toca el alto de la tarjeta, así que se siguen viendo
     los mismos 4,2 productos por pantalla. Medido: la zona táctil pasó de 41x44 a
     44x44, o sea que además mejoró. */
  .empuje-card-mas {
    flex: 0 0 auto; background: transparent; padding: 0;
    width: 26px; height: 26px; position: relative; cursor: pointer;
    line-height: 1; color: #1B1B1B;
    border: 1px solid #D8D3CE; border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  .empuje-card-mas svg { width: 15px; height: 15px; display: block; }
  .empuje-card-mas::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  .empuje-card-mas:hover { color: #6E6862; border-color: #B9B2AB; }
  /* Cuotas y transferencia: un renglón cada una, alineadas a la izquierda como el resto. */
  .js-item-product .empuje-card-installments,
  .js-item-product .empuje-card-transfer {
    text-align: left !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.35;
  }
  .js-item-product .empuje-card-installments { margin-top: 3px; }
  /* El botón de ancho completo ya no se crea (lo reemplazó el "+"); esto limpia
     cualquier resto que haya quedado renderizado de una versión anterior. */
  .empuje-card-atc { display: none !important; }
  .js-item-product .item-price-container,
  .js-item-product .item-price { text-align: left !important; justify-content: flex-start !important; }
  /* Mobile: nombre a todo el ancho (los swatches lo achicaban a ~60px → "PAN… CUE…")
     + tipografía compacta en transferencia/cuotas (la regla general de 13px pisaba
     el tamaño mobile y en los carruseles de relacionados el texto se cortaba) */
  @media (max-width: 768px) {
    /* Vuelve a ser una fila: nombre a la izquierda y "+" a la derecha (ago 2026).
       Era columna porque los swatches achicaban el nombre a ~60px, pero en mobile los
       swatches ya no viven acá — están arriba, pegados a la foto. */
    .empuje-card-toprow {
      /* Arriba y no al medio: con el nombre en dos renglones, centrado dejaba el "+"
         flotando entre los dos. Pegado al primer renglón sigue la línea del nombre. */
      flex-direction: row; align-items: flex-start; justify-content: space-between;
      gap: 8px; margin: 6px 0 2px 0;
    }
    /* Dos renglones para el nombre (ago 2026). Antes era UN renglón con corte: la caja
       mide 122 px y nombres como "CHALECO BORGO LINO C/FORRERIA" (215 px) llegaban
       cortados y encima pegados al "+".
       El min-height de 2.5em (dos renglones a line-height 1.25) se reserva SIEMPRE,
       tenga el nombre una línea o dos: es lo que mantiene precio, cuotas, transferencia
       y colores a la misma altura entre tarjetas vecinas. Sin eso las de nombre corto
       suben y la grilla queda escalonada. */
    .empuje-card-toprow .item-name,
    .empuje-card-toprow .js-item-name {
      font-size: 11px; width: auto; flex: 1; min-width: 0;
      white-space: normal;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden;
      /* El !important es necesario: la regla general de la tarjeta (más arriba) fija
         `min-height: 0 !important` y sin esto le gana, dejando los nombres de una línea
         en 14px — el nombre se partía bien pero la grilla quedaba escalonada igual. */
      line-height: 1.25; min-height: 2.5em !important;
    }
    .empuje-card-toprow .empuje-colors-overlay { text-align: left; }
    .empuje-colors-overlay.empuje-colors-below { margin-top: 8px; line-height: 1; }
    /* Puntitos del tamaño del mockup (9 px). Son botones —cambian la foto—, así que
       el ::after les da una zona táctil invisible de 22x26 sin que se pisen entre sí. */
    .empuje-colors-overlay.empuje-colors-below .item-colors-bullet {
      width: 9px !important; min-width: 9px !important; height: 9px !important;
      margin: 0 6px 0 0 !important; position: relative;
    }
    .empuje-colors-overlay.empuje-colors-below .item-colors-bullet::after {
      content: ''; position: absolute; top: 50%; left: 50%;
      width: 22px; height: 26px; transform: translate(-50%, -50%);
    }
    .empuje-colors-overlay.empuje-colors-below .item-colors-bullet:hover,
    .empuje-colors-overlay.empuje-colors-below .item-colors-bullet.selected {
      border-width: 1px !important; transform: none;
    }
    /* El cuadrado mide 9px acá: la rayita se acerca para que se lea como parte del
       swatch y no como una línea suelta. */
    .empuje-colors-overlay.empuje-colors-below .item-colors-bullet::before {
      bottom: -4px;
    }
    .js-item-product [class*="payment-discount-price-product-container"],
    .js-item-product .empuje-card-transfer,
    .js-item-product .empuje-card-installments { font-size: 10.5px; }
  }
  /* ============================================================
     SELECTOR DE VISTA DE GRILLA — una o dos por hilera (ago 2026, referencia COS)
     Solo dos opciones a propósito: a tres por hilera la tarjeta queda en ~110 px y no
     entran las cuotas ni el precio por transferencia. Ofrecer una vista que esconde el
     argumento de venta es peor que no ofrecerla.
     Solo en celular: en escritorio las tarjetas son col-md-3 (cuatro por fila) y el
     problema de ver la prenda chica no existe.
     ============================================================ */
  .empuje-viewsw { display: none; }
  @media (max-width: 768px) {
    .empuje-viewsw {
      display: flex; align-items: center; justify-content: flex-end;
      gap: 16px; margin: 0 0 10px 0; padding: 0 4px;
    }
    .empuje-viewsw-btn {
      background: none; border: 0; padding: 4px 2px 6px 2px; cursor: pointer;
      border-bottom: 1.5px solid transparent;
      display: flex; gap: 2px; align-items: stretch; height: 22px;
      -webkit-tap-highlight-color: transparent;
    }
    .empuje-viewsw-btn i {
      display: block; background: #8B8589; width: 5px; border-radius: 1px;
    }
    .empuje-viewsw-btn[data-cols="1"] i { width: 12px; }
    .empuje-viewsw-btn.is-on { border-bottom-color: #1B1B1B; }
    .empuje-viewsw-btn.is-on i { background: #1B1B1B; }
    /* Las tarjetas vienen con col-6 (50%) del grid del tema: para una por hilera hay
       que pisar ESE ancho, no la grilla — el contenedor es un flex-wrap de Bootstrap,
       no una grilla CSS, así que no hay grid-template-columns que tocar. */
    body.empuje-grid-1 .js-product-table > .js-item-product {
      flex: 0 0 100% !important; max-width: 100% !important;
    }
  }
  /* ============================================================
     COMPRA RÁPIDA (ago 2026, referencia COS adaptada a Argentina)
     Hoja que sube desde abajo y tapa el listado: la clienta se concentra en una prenda
     y, al cerrar, vuelve exactamente donde estaba. El color NO se elige por cuadradito
     sino por FOTO — la paleta de Juvia tiene Blanco, Natural, Avellana y Visón, que en
     12 px son todos el mismo beige, y en una foto se distinguen solos.
     ============================================================ */
  .empuje-qs-fondo {
    position: fixed; inset: 0; background: rgba(27,27,27,.45);
    z-index: 99999; opacity: 0; transition: opacity .22s ease;
  }
  .empuje-qs-fondo.abierta { opacity: 1; }
  /* DOS COLUMNAS también en celular (ago 2026): la foto entera a lo ancho obligaba a
     scrollear para llegar a los colores, y eso rompe la idea de "compra rápida" — la
     clienta tenía que tocar algo antes de poder decidir. Al costado, la foto se sigue
     viendo completa y el nombre, el precio, los colores y los talles entran todos en
     una pantalla, sin mover nada. */
  .empuje-qs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100000;
    background: #FFFFFF; border-radius: 14px 14px 0 0;
    max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    display: flex; flex-wrap: wrap; align-items: flex-start;
    transform: translateY(100%); transition: transform .28s cubic-bezier(.22,.61,.36,1);
  }
  .empuje-qs.abierta { transform: translateY(0); }
  .empuje-qs-asa {
    flex: 0 0 100%; width: 38px; height: 3px; background: #D6D1CA;
    border-radius: 2px; margin: 9px auto 0 auto;
  }
  /* UNA foto grande, la del color elegido (ago 2026). Antes era una tira con la galería
     de la ficha, pero esa galería no dice a qué color pertenece cada foto: terminaba
     repitiendo lo que ya está en el selector de abajo y mostrando colores distintos al
     elegido. Con una sola foto cada tira tiene un trabajo: arriba se mira, abajo se elige.
     Alto fijo y no `aspect-ratio` porque el tema trae reglas globales para <img> que le
     ganan a la proporción y la foto salía gigante, empujando el botón fuera de pantalla. */
  /* Foto ENTERA, sin recorte: la caja toma la altura que le pide la imagen en vez de
     imponerle una. Antes tenía alto fijo con `object-fit: cover` y en una foto vertical
     dentro de una caja apaisada se comía la cabeza y los pies. Las miniaturas de color
     se veían bien porque su caja ya era casi de la misma proporción que la foto. */
  .empuje-qs-foto {
    display: block; flex: 0 0 150px; width: 150px; height: auto; max-width: 150px;
    background: #EFECE7; margin: 12px 0 0 16px;
  }
  .empuje-qs-cuerpo { flex: 1 1 0; min-width: 0; padding: 12px 16px 0 12px; }
  .empuje-qs-fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
  .empuje-qs-nombre { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #1B1B1B; }
  .empuje-qs-cerrar { background: none; border: 0; font-size: 20px; line-height: 1; color: #8B8589; cursor: pointer; padding: 0 2px; }
  .empuje-qs-precio { font-size: 19px; font-weight: 500; color: #1B1B1B; margin-top: 8px; }
  .empuje-qs-transfer { font-size: 12px; color: #2E7D32; margin-top: 3px; }
  /* Aviso del mínimo en la compra rápida (ago 2026). El de la ficha no alcanzaba: quien
     agrega desde la bolsita de la tarjeta nunca pasa por la ficha y se enteraba del
     mínimo recién en el carrito, después de elegir color y talle. Gris y chico a
     propósito: no es una alarma, es un dato para armar el combo. */
  .empuje-qs-minimo { font-size: 11px; color: #8B8589; margin-top: 8px; line-height: 1.4; }
  .empuje-qs-minimo b { color: #1B1B1B; font-weight: 600; }
  /* El mayorista tiene su propio mínimo, mucho más alto, y ya se lo dice su página. */
  body.empuje-mayorista .empuje-qs-minimo,
  body.empuje-pagina-mayorista .empuje-qs-minimo { display: none !important; }
  .empuje-qs-cuotas { font-size: 12px; color: #8B8589; margin-top: 2px; }
  /* Mayorista dentro de la hoja: su tabla admite un solo medio y tiene 0% extra, así que
     el 15% de transferencia y las cuotas le prometen algo que en su checkout no existe.
     Misma regla que ya rige en la ficha y en el carrito — si no se replicaba acá, la
     compra rápida reintroducía justo lo que sacamos del resto del sitio. */
  .empuje-qs-may { display: none; }
  body.empuje-mayorista .empuje-qs-transfer,
  body.empuje-mayorista .empuje-qs-cuotas { display: none !important; }
  body.empuje-mayorista .empuje-qs-may {
    display: block; font-size: 12px; color: #8B8589; margin-top: 4px; line-height: 1.4;
  }
  .empuje-qs-color-nombre { font-size: 13px; color: #1B1B1B; margin-top: 16px; }
  .empuje-qs-colores { display: flex; gap: 3px; margin-top: 9px; overflow-x: auto; padding-bottom: 5px; }
  /* 48 px: la columna de la derecha mide ~205 en un celular de 375, y así entran las
     cuatro miniaturas enteras sin obligar a deslizar de costado. */
  .empuje-qs-colores button {
    flex: 0 0 48px; width: 48px; height: 64px; padding: 0; border: 0; background: #EFECE7;
    cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent;
  }
  .empuje-qs-colores img {
    width: 48px !important; height: 64px !important; max-width: none !important;
    object-fit: cover; display: block;
  }
  .empuje-qs-colores button.elegido::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: #1B1B1B;
  }
  .empuje-qs-talle-fila { display: flex; justify-content: space-between; align-items: baseline; margin-top: 20px; }
  .empuje-qs-talle-lb,
  .empuje-qs-lb-cant { font-size: 13px; color: #1B1B1B; }
  .empuje-qs-lb-cant { margin-top: 16px; }
  .empuje-qs-guia { background: none; border: 0; padding: 0; font-size: 11px; color: #6E6862;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .empuje-qs-talles { display: flex; gap: 24px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
  .empuje-qs-talles button {
    background: none; border: 0; padding: 8px 0; font-size: 14px; letter-spacing: 1px;
    color: #6E6862; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent;
  }
  .empuje-qs-talles button.elegido { color: #1B1B1B; }
  .empuje-qs-talles button.elegido::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: #1B1B1B;
  }
  /* Cantidad: la clienta que quiere llevar dos del mismo talle tenía que entrar al
     artículo. Va al final, después del talle: es el último dato antes de comprar. */
  .empuje-qs-cant {
    display: flex; align-items: center; gap: 14px;
    border: 1px solid #DBD7D2; width: fit-content; padding: 3px 9px; margin-top: 6px;
  }
  .empuje-qs-cant button {
    background: none; border: 0; padding: 3px 4px; cursor: pointer;
    font-size: 16px; line-height: 1; color: #1B1B1B;
    -webkit-tap-highlight-color: transparent;
  }
  .empuje-qs-cant span { font-size: 14px; min-width: 16px; text-align: center; color: #1B1B1B; }
  .empuje-qs-talles button.agotado { color: #C9C4BD; text-decoration: line-through; cursor: default; }
  /* Sacudida en vez de botón apagado: un botón gris no explica qué falta. */
  .empuje-qs-talles.reclama { animation: empujeQsSac .4s; }
  @keyframes empujeQsSac { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
  /* Pegado al piso de la hoja mientras se scrollea: con la foto entera el contenido es
     más alto que la pantalla, y el botón de comprar no puede quedar escondido abajo. */
  .empuje-qs-cta {
    margin-top: 18px; width: 100%; background: #1B1B1B; color: #FFFFFF; border: 0;
    padding: 17px 18px; display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; letter-spacing: 1.6px; cursor: pointer;
    position: sticky; bottom: 0; z-index: 2; flex: 0 0 100%;
  }
  .empuje-qs-ficha {
    display: block; flex: 0 0 100%; text-align: center; padding: 13px 0 16px 0;
    font-size: 11px; color: #6E6862; text-decoration: underline; text-underline-offset: 3px;
  }
  /* En escritorio la hoja deslizante no corresponde: subir desde abajo a lo ancho de
     1600 px se ve como un error, no como un panel. Pasa a ser un cuadro centrado, que es
     el equivalente de escritorio del mismo gesto. El asa de arrastre se va porque ahí no
     hay dedo que arrastre. */
  @media (min-width: 769px) {
    /* DOS COLUMNAS en escritorio: la foto entera es vertical y alta. Apilada debajo del
       texto obligaría a un cuadro larguísimo o a recortarla otra vez. Al costado entra
       completa y el resto queda a la derecha, a la altura de los ojos. */
    .empuje-qs {
      left: 50%; right: auto; top: 50%; bottom: auto;
      width: 680px; max-height: 86vh; border-radius: 4px;
      display: flex; flex-wrap: wrap; align-items: flex-start;
      transform: translate(-50%, -46%); opacity: 0;
      transition: opacity .2s ease, transform .2s ease;
    }
    .empuje-qs.abierta { transform: translate(-50%, -50%); opacity: 1; }
    .empuje-qs-asa { display: none; }
    /* 260 y no 300: con la foto entera, más ancha significa más alta, y el cuadro se
       pasaba del alto de la ventana. */
    .empuje-qs-foto { flex: 0 0 260px; width: 260px; max-width: 260px; margin: 0; }
    .empuje-qs-cuerpo { flex: 1 1 0; min-width: 0; padding: 20px 20px 0 20px; }
    /* Botón y link ocupan el ancho completo, debajo de las dos columnas. */
    .empuje-qs-cta, .empuje-qs-ficha { flex: 0 0 100%; }
    .empuje-qs-colores button { flex: 0 0 62px; width: 62px; height: 82px; }
    .empuje-qs-colores img { width: 62px !important; height: 82px !important; }
  }
  /* ============================================================
     GALERÍA AMPLIADA DE LA FICHA (ago 2026, referencia Massimo Dutti)
     Al tocar la foto se abre a pantalla completa y las fotos se recorren DESLIZANDO
     HACIA ABAJO, una debajo de la otra, a sangre. Las miniaturas quedan fijas sobre el
     borde izquierdo y el encabezado del sitio desaparece: el z-index altísimo lo tapa,
     y vuelve solo al cerrar.
     ============================================================ */
  .empuje-lb {
    position: fixed; inset: 0; z-index: 2147483000; background: #FFFFFF;
    opacity: 0; transition: opacity .2s ease;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .empuje-lb.abierta { opacity: 1; }
  .empuje-lb-cerrar {
    position: fixed; top: 12px; right: 12px; z-index: 3;
    width: 42px; height: 42px; border: 0; background: none; cursor: pointer;
    font-size: 26px; line-height: 1; color: #1B1B1B; padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  /* Con la galería abierta no queda NADA del sitio a la vista: el encabezado lo tapa el
     z-index, pero la barra de beneficios va fija más arriba y sobrevivía. Se ocultan las
     dos mientras dura, y vuelven solas al cerrar. */
  body.empuje-lb-abierta .empuje-home-usp,
  body.empuje-lb-abierta header.head-main,
  body.empuje-lb-abierta .js-head-main { display: none !important; }
  /* Tira fija: no se va con el scroll de las fotos. */
  .empuje-lb-tira {
    position: fixed; left: 10px; top: 62px; width: 58px;
    max-height: calc(100vh - 90px);
    overflow-y: auto; overflow-x: hidden; z-index: 2;
    display: flex; flex-direction: column; gap: 5px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .empuje-lb-tira::-webkit-scrollbar { display: none; }
  .empuje-lb-tira button {
    flex: 0 0 auto; width: 58px; height: 78px; padding: 0; border: 1px solid transparent;
    background: #F1EEE9; cursor: pointer; overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }
  .empuje-lb-tira img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .empuje-lb-tira button.activa { border-color: #1B1B1B; }
  /* Las fotos, apiladas y a sangre: sin márgenes ni separación. */
  .empuje-lb-fotos img {
    display: block; width: 100% !important; height: auto !important;
    max-width: none !important; margin: 0;
  }
  @media (min-width: 769px) {
    .empuje-lb-tira { left: 20px; top: 76px; width: 74px; }
    .empuje-lb-tira button { width: 74px; height: 100px; }
    /* En escritorio la foto a todo el ancho sería enorme: se acota y se centra. */
    .empuje-lb-fotos { max-width: 620px; margin: 0 auto; }
  }
  /* "¡No te lo pierdas, es el último!" nativo → color brand (era text-accent del tema) */
  #single-product .js-last-product {
    color: #1B1B1B !important;
    font-weight: 700;
  }
  /* Medios de pago: misma jerarquía visual que los acordeones de descripción */
  .empuje-pdp-payments { border: 0 !important; box-shadow: none !important; margin: 18px 0 0 0 !important; }
  .empuje-pdp-payments-header {
    background: none !important;
    border-top: 1px solid #DBD7D2 !important;
    border-bottom: 1px solid #DBD7D2 !important;
    border-left: 0 !important; border-right: 0 !important;
    border-radius: 0 !important;
    padding: 16px 34px 16px 0 !important;
  }
  .empuje-pdp-payments-header-title {
    font-size: 13px !important; font-weight: 700 !important;
    letter-spacing: 1.2px !important; text-transform: uppercase !important;
    color: #1B1B1B !important;
  }
  .empuje-pdp-payments-header-icon { display: none !important; }
  /* El stack de acordeones arranca sin doble borde cuando viene pegado a medios de pago */
  .empuje-pdp-payments + .empuje-pdp-acc { margin-top: 0; }
  .empuje-pdp-payments + .empuje-pdp-acc .empuje-pdp-acc-item:first-child { border-top: 0; }
  /* Modal liviano (guía de talles, etc.) */
  .empuje-lite-modal {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(27,27,27,0.55);
    display: flex; align-items: center; justify-content: center; padding: 20px;
  }
  .empuje-lite-modal-box {
    background: #fff; max-width: 480px; width: 100%; max-height: 80vh; overflow-y: auto;
    padding: 28px 24px; position: relative;
    font-family: 'Inter', sans-serif;
  }
  .empuje-lite-modal-close {
    position: absolute; top: 10px; right: 12px; background: none; border: 0;
    font-size: 26px; line-height: 1; cursor: pointer; color: #1B1B1B; padding: 4px;
  }
  .empuje-lite-modal-title {
    font-size: 14px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    margin: 0 0 14px 0; color: #1B1B1B;
  }
  .empuje-lite-modal-body { font-size: 14px; line-height: 1.7; color: #555; }
  .empuje-lite-modal-body img { max-width: 100%; height: auto; }
  /* Carrito: botón Iniciar compra en negro brand (Installation 2 lo pintaba con el color default del tema) */
  #modal-fullscreen-cart .btn-primary,
  .js-fullscreen-cart .btn-primary,
  [id*="fullscreen-cart"] input[type="submit"],
  [id*="fullscreen-cart"] .btn-primary {
    background: #1B1B1B !important; color: #FFFFFF !important;
    border: none !important; border-radius: 0 !important;
  }
  [id*="fullscreen-cart"] .btn-primary:hover { background: #333 !important; }
  /* Notificación "agregado al carrito": color brand (el tema la pintaba con el primario azul default)
     y z-index debajo del modal del carrito para que no se superponga a la X */
  .notification-primary,
  .notification-cart { background: #1B1B1B !important; color: #fff !important; }
  .notification-cart .btn,
  .notification-cart a.btn { background: #fff !important; color: #1B1B1B !important; border: none !important; }
  .notification-floating.notification-cart-container { z-index: 9998 !important; }
  /* ============================================================
     PANTALLAS SIN SALIDA (ago 2026). Búsqueda sin resultados, carrito vacío y página
     inexistente decían "no hay nada" y NO ofrecían un solo link: la única salida era el
     botón "atrás" o cerrar la pestaña. A esas tres llega gente todos los días, porque los
     links viejos de Instagram y de Google siguen dando vueltas.
     Una sola pieza para los tres casos; solo cambia el título.
     ============================================================ */
  .empuje-vacio { text-align: center; padding: 8px 16px 30px; }
  .empuje-vacio-tit { font-size: 19px; font-weight: 600; color: #1B1B1B; margin: 0 0 6px; }
  .empuje-vacio-sub { font-size: 14px; color: #6E6A66; margin: 0 0 20px; }
  .empuje-vacio-cta {
    display: block; max-width: 320px; margin: 0 auto; height: 48px; line-height: 48px;
    background: #1B1B1B; color: #fff; text-decoration: none;
    font-size: 12px; font-weight: 700; letter-spacing: 1px;
  }
  .empuje-vacio-cta:hover { color: #fff; }
  .empuje-vacio-chips {
    display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 16px;
  }
  .empuje-vacio-chips a {
    border: 1px solid #DBD7D2; border-radius: 20px; padding: 8px 14px;
    font-size: 12.5px; color: #1B1B1B; text-decoration: none;
  }
  .empuje-vacio-tira-tit {
    font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: #9A948D;
    margin: 28px 0 10px; text-align: left;
  }
  .empuje-vacio-tira { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
  .empuje-vacio-tira::-webkit-scrollbar { display: none; }
  .empuje-vacio-tira .js-item-product {
    flex: 0 0 auto !important; width: 132px !important; max-width: 132px !important;
    padding: 0 !important; text-align: left;
  }

  /* Panel del buscador (ago 2026). Se abría COMPLETAMENTE en blanco: la cruz, el campo y
     nada más. La clienta tocaba la lupa y lo que veía era una pantalla vacía, que se lee
     como "esta tienda no tiene nada" — y encima no daba ninguna pista de qué se puede
     buscar. Se le pone la misma pieza que a las pantallas sin salida. */
  .empuje-busq { padding: 22px 16px 40px; }
  .empuje-busq-tit {
    font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: #9A948D;
    margin: 0 0 10px; text-align: left;
  }
  .empuje-busq .empuje-vacio-chips { justify-content: flex-start; margin-top: 0; }
  .empuje-busq-tira-tit { margin-top: 28px; }

  /* ============================================================
     ÁREA DE TOQUE DE LA CABECERA (ago 2026). Los cuatro controles de arriba —menú,
     buscador, cuenta y carrito— medían 20 x 15 px con CERO espacio alrededor: menos de la
     mitad del mínimo cómodo (44 x 44), y son el primer toque de cada visita.
     El ícono no cambia de tamaño ni de lugar: se le cuelga por detrás un área invisible
     que recibe el dedo. Así no se mueve absolutamente nada del diseño.
     ============================================================ */
  @media (max-width: 768px) {
    /* Mismo motivo: el botón flotante de filtros medía 38 de alto, seis menos que el
       mínimo. Este sí puede crecer sin molestar a nadie: es flotante. */
    .empuje-mobile-filter-btn { min-height: 44px; }
    .col-utility a, .utilities-container a { position: relative; }
    .col-utility a::after, .utilities-container a::after {
      content: ""; position: absolute; top: 50%; left: 50%;
      width: 44px; height: 44px; transform: translate(-50%, -50%);
    }
  }

  /* ===== PIE FIJO DEL CARRITO (30/8/2026) =====
     El total, el precio por transferencia y el botón de comprar quedan pegados abajo
     mientras la clienta scrollea. Antes había que bajar cuatro pantallas —los tres
     recomendados iban ANTES del botón— para encontrar "Iniciar Compra".
     Va `fixed`, no `sticky`: probado el 30/8/2026, con `sticky` el pie se despegaba apenas
     terminaba el bloque del carrito —`position:sticky` solo pega mientras el contenedor
     padre sigue en pantalla— y a la altura de las reseñas ya no se veía. Con `fixed` el
     botón acompaña toda la página. A cambio hay que reservarle el lugar abajo, que es el
     padding del body.
     Los nodos NO cambian de padre: se insertan en el mismo lugar donde ya estaban, así que
     siguen dentro del <form> del carrito. Si el botón sale del formulario, deja de iniciar
     la compra. */
  .empuje-cart-sticky {
    position: fixed;
    left: 0; right: 0;
    bottom: var(--empuje-gap-abajo, 0px);
    z-index: 30;
    background: #FFFFFF;
    border-top: 1px solid #E9E5DF;
    margin: 0;
    padding: 12px 15px;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .06);
  }
  /* El lugar que ocupa el pie, para que nada quede tapado abajo de todo. */
  body.empuje-carrito {
    padding-bottom: calc(var(--empuje-alto-pie, 0px) + var(--empuje-gap-abajo, 0px));
  }

  /* ===== LA FICHA DE LA PRENDA EN EL CARRITO (30/8/2026) =====
     Antes: foto chica de 62px, el nombre con el color y el talle entre paréntesis en gris
     ("(Blanco, S)") y el precio lejos, abajo a la derecha. La clienta no leía qué estaba
     comprando de un vistazo, y el talle parecía un dato, no algo que se pueda cambiar.
     Ahora, siguiendo Massimo Dutti: foto más grande, el precio JUSTO DEBAJO del nombre
     —se lee nombre → precio de corrido— y el color y el talle como botones.
     El reordenado se hace con `order`, sin mover un solo nodo: el tema redibuja el item
     entero cada vez que cambia la cantidad, y cualquier nodo movido a mano se perdería.
     `display:contents` en .cart-item-name deja que sus hijos entren en el mismo flex que
     el precio, que es hermano de ese bloque y no se puede intercalar de otra forma. */
  #modal-cart .js-cart-item .col-2,
  #shoppingCartPage .js-cart-item .col-3 { flex: 0 0 88px; max-width: 88px; }
  #modal-cart .js-cart-item .col-2 img,
  #shoppingCartPage .js-cart-item .col-3 img {
    width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block;
  }
  /* `flex-basis: 0%` y no `auto`: con `auto` la columna del texto mide su contenido, no
     entra al lado de la foto y se va abajo. */
  #modal-cart .js-cart-item .col-10 { flex: 1 1 0%; max-width: none; min-width: 0; }
  #modal-cart .js-cart-item { align-items: flex-start; }
  #modal-cart .js-cart-item .col-10 > .w-100 {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  }
  #modal-cart .js-cart-item .cart-item-name { display: contents; }
  #modal-cart .js-cart-item .cart-item-name > a { order: 1; font-weight: 700; }
  #modal-cart .js-cart-item .cart-item-subtotal { order: 2; font-size: 15px; }
  #modal-cart .js-cart-item .cart-item-name > small { order: 3; }
  #modal-cart .js-cart-item [data-store="cart-item-labels"] { order: 4; }
  #modal-cart .js-cart-item .cart-item-quantity { order: 5; float: none !important; }
  /* El chip es un botón: se toca para cambiar el color o el talle sin salir del carrito.
     La flechita avisa que se puede tocar — sin ella se lee como un dato más. */
  .empuje-chip {
    display: inline-block; border: 1px solid #D9D2CA; background: #FFFFFF; color: #1B1B1B;
    padding: 3px 9px; margin-right: 6px; font-size: 12px; line-height: 1.5;
    font-family: inherit; cursor: pointer; -webkit-appearance: none; border-radius: 0;
  }
  .empuje-chip::after { content: " ⌄"; opacity: .55; }
  .empuje-chip:hover, .empuje-chip:focus-visible { border-color: #1B1B1B; }
  .empuje-chip:focus-visible { outline: 2px solid #1B1B1B; outline-offset: 2px; }

  .empuje-var-panel {
    display: block; width: 100%; margin-top: 8px;
    font-size: 12px; color: #8A8078; line-height: 1.5;
  }
  .empuje-var-op {
    display: inline-block; border: 1px solid #D9D2CA; background: #FFFFFF; color: #1B1B1B;
    padding: 5px 12px; margin: 0 6px 6px 0; font-size: 12px; font-family: inherit;
    cursor: pointer; -webkit-appearance: none; border-radius: 0;
  }
  .empuje-var-op:hover { border-color: #1B1B1B; }
  .empuje-var-op.es-actual { border-color: #1B1B1B; font-weight: 700; cursor: default; }
  .empuje-var-op.sin-stock { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

  /* ===== EL CAJÓN LATERAL: TRES BLOQUES, NO UNA BARRA ENCIMA =====
     El cajón es un elemento fijo que scrollea por dentro. Ponerle adentro otra barra
     `fixed` le rompe el scroll: el 30/8/2026 dejó el carrito trabado en una sola pantalla,
     sin poder ver los productos ni los envíos, y hubo que revertir en caliente.
     La forma correcta —la que usa Massimo Dutti— es partirlo en encabezado, cuerpo que
     scrollea y pie. Acá el pie NO es fijo: es el último bloque del formulario.
     Todo cuelga de `.empuje-cajon-con-pie`, que se agrega recién cuando el pie se armó:
     si el armado falla, el cajón queda exactamente como estaba. */
  #modal-cart.empuje-cajon-con-pie { overflow: hidden !important; }
  #modal-cart.empuje-cajon-con-pie .js-ajax-cart-panel {
    display: flex; flex-direction: column; height: 100%;
  }
  #modal-cart.empuje-cajon-con-pie .modal-body {
    flex: 1 1 auto; min-height: 0;          /* sin min-height:0 el cuerpo no se encoge */
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  #modal-cart.empuje-cajon-con-pie .empuje-cart-sticky {
    flex: 0 0 auto; position: static;       /* estático a propósito: ver el comentario */
    margin: 0; bottom: auto;
    /* La barra de cookies es fija y se le monta encima: se le deja ese hueco abajo. */
    padding-bottom: calc(12px + var(--empuje-gap-abajo, 0px));
  }

  /* Cinturón (3/9/2026): los recomendados NO van adentro del pie. Si se cuelan, el pie
     pasa de 190px a más de 500 y el carrito queda reducido a una franja: no se ve lo que
     la clienta eligió ni los medios de envío. El JS los saca de ahí en cada vuelta
     (`_empujeSacarDelPie`); esto cubre los 250 ms que tarda el observador, para que no se
     vea ni un parpadeo. A propósito solo apunta a los recomendados: al total ni al botón
     no se los toca nunca, porque son lo único que tiene que estar siempre a la vista. */
  #modal-cart .empuje-cart-sticky .empuje-cart-reco,
  #shoppingCartPage .empuje-cart-sticky .empuje-cart-reco { display: none !important; }

  /* ===== LA BARRA LLEVA SOLO LO QUE HAY QUE VER SIEMPRE (30/8/2026) =====
     Medía 268px de los 812 de la pantalla: un tercio, para el pie. De esos, 109 eran la
     línea de confianza y la política de cambios — tres renglones clavados en pantalla que
     se leen UNA vez. Apretar interlineados daba 14px; sacarlos da 78.
     No se pierde información: se mudan al final del cuerpo, después de los recomendados,
     donde cierran el recorrido justo antes de decidir. Queda en 190px, y en 145 cuando la
     clienta ya aceptó las cookies. */
  #modal-cart .empuje-cart-sticky { padding-top: 10px; }
  #modal-cart .empuje-cart-sticky .js-cart-total-container { margin-bottom: 8px !important; }
  #modal-cart .empuje-cart-sticky .js-cart-total-container .h4 {
    margin-bottom: 0 !important; line-height: 1.25;
  }

  /* ===== LAS CUOTAS VIAJAN CON EL TOTAL (30/8/2026) =====
     Las cuotas parten EL MISMO importe: son los $90.396 en seis veces. La transferencia,
     en cambio, CAMBIA el importe. Por eso una acompaña al total y la otra va sola abajo
     con su ahorro. Antes las cuotas se metían en el medio y separaban justo los dos
     números que la clienta quiere comparar.
     La barra pasa de 184px a 110. */
  #modal-cart .empuje-cart-sticky .js-cart-total-container .h4.row {
    display: flex; align-items: baseline; flex-wrap: nowrap; gap: 6px; margin: 0;
  }
  #modal-cart .empuje-cart-sticky .h4.row > .col { flex: 0 0 auto; width: auto; max-width: none; }
  #modal-cart .empuje-cart-sticky .h4.row > .js-cart-total {
    flex: 0 0 auto; width: auto; max-width: none; margin-left: auto;
  }
  #modal-cart .empuje-cart-sticky .empuje-cuotas-al-lado {
    flex: 1 1 auto; min-width: 0; text-align: right;
    font-size: 10px; line-height: 1.3; font-weight: 400; color: #8A8078;
    white-space: nowrap;
  }
  /* El "O hasta" del principio sobra al lado del total. Se saca SIN tocar el texto: el
     bloque va a font-size 0 —eso apaga el nodo de texto suelto "O hasta "— y los <span>
     de adentro, que son los que el tema refresca, vuelven a su tamaño. La "o" se repone
     con `::before`. Reescribir el texto rompía la actualización del importe: ver el
     comentario en `_empujeCuotasAlLado`. */
  #modal-cart .empuje-cart-sticky .empuje-cuotas-al-lado .js-installments-cart-total {
    font-size: 0; margin: 0 !important;
  }
  #modal-cart .empuje-cart-sticky .empuje-cuotas-al-lado .js-installments-cart-total span {
    font-size: 10px;
  }
  #modal-cart .empuje-cart-sticky .empuje-cuotas-al-lado .js-installments-cart-total::before {
    content: 'o '; font-size: 10px;
  }
  /* Los espacios ENTRE los <span> también son nodos de texto sueltos y se apagaron con
     ellos: quedaba "6cuotas". Se reponen como margen. */
  #modal-cart .empuje-cart-sticky .empuje-cuotas-al-lado .js-cart-installments-amount {
    margin-right: .3em;
  }
  /* La línea fina separa lo que se debe de la alternativa que lo baja. */
  #modal-cart .empuje-cart-sticky .empuje-cart-transfer-fallback {
    margin: 6px 0 0 !important; padding-top: 6px;
    border-top: 1px solid #E9E5DF;
  }
  #modal-cart .empuje-cart-sticky .btn-primary { padding-top: 10px; padding-bottom: 10px; }
  #modal-cart .empuje-cierre-confianza { padding: 14px 0 4px; text-align: center; }
  #modal-cart .empuje-cierre-confianza .empuje-policy-cart {
    font-size: 11px; line-height: 1.35; margin: 6px 0 0;
  }
  /* ===== LA BARRA, LO MÁS FINITA POSIBLE (3/9/2026, pedido de Mati) =====
     Antes: el total en un renglón, la transferencia en otro y el botón a lo ancho abajo.
     Ahora el total y el botón van EN LA MISMA FILA, y ahí está el truco del alto: lo
     define el botón (~38px), así que las tres líneas chicas de la izquierda —importe,
     cuotas, transferencia— entran sin que la barra crezca ni un píxel. Pasa de 190px a 59,
     y esos 130 se los queda el cuerpo, que es donde están las prendas, los medios de envío
     y los recomendados.
     Solo en el teléfono y solo con la barra pegada abajo: en escritorio el pie es estático
     y ahí sobra alto (ver el @media de más abajo). */
  @media (max-width: 767px) {
    #modal-cart.empuje-cajon-con-pie .empuje-cart-sticky {
      display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
      padding-top: 8px;
      padding-bottom: calc(8px + var(--empuje-gap-abajo, 0px));
    }
    #modal-cart.empuje-cajon-con-pie .empuje-cart-sticky > .js-cart-total-container {
      flex: 1 1 120px; min-width: 0; margin: 0 !important;
    }
    /* `min-width: max-content` es lo que protege al botón: nunca queda más angosto que su
       propio texto, así que no se recorta ni se parte en dos si la clienta tiene la letra
       del teléfono agrandada —un <input> no parte el texto en dos renglones, lo recorta—.
       Y si de tan grande ya no cabe al lado del total, el `wrap` lo baja a su propio
       renglón en vez de romper la fila. */
    #modal-cart.empuje-cajon-con-pie .empuje-cart-sticky > .empuje-pie-boton {
      flex: 0 1 auto; min-width: max-content; margin: 0 !important;
    }
    #modal-cart.empuje-cajon-con-pie .empuje-cart-sticky > .empuje-pie-boton input,
    #modal-cart.empuje-cajon-con-pie .empuje-cart-sticky > .empuje-pie-boton .js-ajax-cart-submit {
      width: 100%; margin: 0;
    }
    /* El aviso del mínimo, cuando toca, se lleva su renglón completo. */
    #modal-cart.empuje-cajon-con-pie .empuje-cart-sticky > .empuje-pie-aviso {
      flex: 1 1 100%; margin: 0 !important;
    }
    /* El importe manda: solo, en su renglón, con las alternativas de pago debajo en 10px.
       La palabra "Total:" se saca —arriba dice CARRITO DE COMPRAS y el número está pegado
       al botón de comprar— y son 60px de ancho que le hacen falta a las cuotas. */
    #modal-cart.empuje-cajon-con-pie .empuje-cart-sticky .js-cart-total-container .h4.row {
      display: flex; flex-direction: column; align-items: flex-start;
      flex-wrap: nowrap; gap: 0; margin: 0;
    }
    #modal-cart.empuje-cajon-con-pie .empuje-cart-sticky .h4.row > .col { display: none; }
    #modal-cart.empuje-cajon-con-pie .empuje-cart-sticky .h4.row > .js-cart-total {
      order: 1; flex: 0 0 auto; width: auto; max-width: none;
      margin: 0; font-size: 15px; line-height: 1.2; text-align: left;
    }
    #modal-cart.empuje-cajon-con-pie .empuje-cart-sticky .empuje-cuotas-al-lado {
      order: 2; flex: 0 0 auto; width: auto; max-width: none;
      margin: 1px 0 0; text-align: left; line-height: 1.3;
    }
    /* Sin la línea fina ni el espacio de arriba: acá ya no separa dos renglones lejanos,
       va pegada a las cuotas como tercera línea del mismo bloque. */
    #modal-cart.empuje-cajon-con-pie .empuje-cart-sticky .empuje-cart-transfer-fallback,
    #modal-cart.empuje-cajon-con-pie .empuje-cart-sticky .payment-discount-price-cart-container {
      margin: 0 !important; padding-top: 0; border-top: 0;
      font-size: 10px; line-height: 1.3;
      text-align: left !important; justify-content: flex-start !important;
    }
    /* El chip "AHORRÁS $12.734" mide 105px y la columna del total tiene 190: entre los dos
       la línea se partía en dos y la barra volvía a crecer. El importe con transferencia,
       que es el dato que decide, se queda; el ahorro exacto lo ve en el checkout. */
    #modal-cart.empuje-cajon-con-pie .empuje-cart-sticky .empuje-cart-save { display: none; }
    #modal-cart.empuje-cajon-con-pie .empuje-cart-sticky .btn-primary {
      padding-top: 11px; padding-bottom: 11px;
    }
  }
  .empuje-cart-sticky .js-cart-total-container { margin-bottom: 10px !important; }
  .empuje-cart-sticky .row.mb-3 { margin-bottom: 0 !important; }
  /* El aviso del mínimo vive acá adentro cuando el carrito no llega: que no empuje. */
  .empuje-cart-sticky .alert { margin-bottom: 0; }
  /* ===== MAYORISTA POR DEBAJO DE SU PEDIDO MÍNIMO (31/8/2026) =====
     TiendaNube decide si muestra "Iniciar Compra" mirando UN solo número, el mínimo
     minorista (`settings.cart_minimum_value`, hoy $80.000). La mayorista lo supera con
     cualquier pedido, así que el botón le aparece — pero su tabla de precios exige
     $300.000 y el checkout la rebota recién cuando ya cargó datos y eligió envío.
     Acá se le esconde el botón en el carrito, que es donde todavía puede hacer algo.
     Se apaga con una CLASE EN EL BODY y no tocando el botón: si TiendaNube ya lo tenía
     escondido por otra cosa (sin stock, por ejemplo), esto no se lo devuelve. */
  body.empuje-may-bajo-minimo input[name="go_to_checkout"],
  body.empuje-may-bajo-minimo .js-ajax-cart-submit { display: none !important; }
  /* Sin botón, la línea de confianza que va abajo de él queda hablando sola. */
  body.empuje-may-bajo-minimo .empuje-cart-sticky .empuje-trust-cart,
  body.empuje-may-bajo-minimo #modal-cart .empuje-trust-cart { display: none !important; }
  /* Mismo gris de marca que la alerta nativa del carrito (ver .alert-warning arriba):
     la clienta ya vio este cartel si alguna vez compró como minorista. */
  .empuje-may-aviso {
    background: #FAF8F5; border: 1px solid #DBD7D2; border-radius: 3px;
    padding: 11px 13px; color: #1B1B1B;
    font-size: 12.5px; line-height: 1.5;
  }
  .empuje-may-aviso strong { font-weight: 600; }
  .empuje-may-ayuda {
    display: block; margin-top: 7px; font-size: 11.5px; color: #8B8589;
  }
  .empuje-may-ayuda a { color: #8B8589; text-decoration: underline; }
  /* El globo de WhatsApp tapaba el subtotal. Se corre por encima del pie, que se mide
     en vivo porque su alto cambia según haya cuotas, transferencia o aviso de mínimo. */
  body.empuje-carrito .btn-whatsapp {
    bottom: calc(var(--empuje-alto-pie, 0px) + var(--empuje-gap-abajo, 0px) + 24px);
  }
  /* Sin mínimo alcanzado no hay barra pegada abajo: el pie vuelve al flujo, en el mismo
     lugar donde está insertado. Ver `_empujeActivarPie`. */
  #shoppingCartPage .empuje-cart-sticky.empuje-pie-quieto {
    position: static; box-shadow: none; border-top: 0;
    margin: 14px 0 0; padding: 0;
  }
  @media (min-width: 768px) {
    /* En escritorio sobra alto: el pie fijo no hace falta y estorba. */
    .empuje-cart-sticky {
      position: static; box-shadow: none; border-top: 0;
      margin: 14px 0 0; padding: 0;
    }
    body.empuje-carrito { padding-bottom: 0; }
    body.empuje-carrito .btn-whatsapp { bottom: 15px; }
  }

  /* ===== "TE PUEDE INTERESAR": PARA SEGUIR MIRANDO (30/8/2026) =====
     Son DOS bloques con trabajos distintos, no uno. Arriba, "Completá tu compra": tres
     prendas concretas con el motivo, para DECIDIR rápido. Acá abajo, para MIRAR: grilla
     de dos columnas con la foto grande y muchos productos, que se siguen desplegando.
     Hasta hoy nos quedábamos en tres y se terminaba; Massimo Dutti te deja seguir.
     La diferencia a favor nuestro: los suyos no tienen precio ni botón y te sacan a la
     ficha; los nuestros se suman desde acá sin salir del carrito. */
  .empuje-int {
    border-top: 1px solid #E9E5DF; padding: 16px 0 4px; margin-top: 14px;
  }
  .empuje-int-tit {
    font-size: 12px; font-weight: 700; letter-spacing: .1em; margin: 0 0 12px;
    text-transform: uppercase;
  }
  .empuje-int-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  .empuje-int-card { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .empuje-int-foto { position: relative; display: block; width: 100%; }
  .empuje-int-card .f {
    display: block; width: 100%; aspect-ratio: 2 / 3; background: #F2EFEB center/cover no-repeat;
  }
  .empuje-int-card .n {
    font-size: 11px; font-weight: 700; letter-spacing: .02em; margin-top: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .empuje-int-card .p { font-size: 12px; font-weight: 700; }
  /* El precio por transferencia es nuestro mejor argumento y en las recomendaciones no
     estaba. Va pegado al precio para que se comparen de un vistazo. */
  .empuje-int-card .t { font-size: 10px; color: #2E7049; font-weight: 700; }
  .empuje-int-card .t span { font-weight: 400; opacity: .85; }

  /* La barra y la flecha son las MISMAS de la grilla: mismo trazo de 1.3px, mismos 3px de
     alto, mismos grises. No se reusan las clases `.empuje-arrow`/`.empuje-dots` porque
     esas cuelgan de `.js-item-product` y de su hover; acá se copia el diseño, no el
     acoplamiento. */
  .empuje-int-dots {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; gap: 2px; z-index: 3; pointer-events: none;
  }
  .empuje-int-dot {
    flex: 1; height: 3px; background: rgba(0, 0, 0, .14); transition: background .2s ease;
  }
  .empuje-int-dot.active { background: #6E6862; }
  .empuje-int-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; background: none; border: none; padding: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 4; font-size: 0; color: transparent;
    -webkit-tap-highlight-color: transparent;
  }
  .empuje-int-arrow::before {
    content: ''; display: block; width: 8px; height: 8px;
    border-top: 1.3px solid #1B1B1B; border-right: 1.3px solid #1B1B1B;
  }
  .empuje-int-prev { left: 0; }
  .empuje-int-next { right: 0; }
  .empuje-int-prev::before { transform: rotate(-135deg) translate(-1px, 1px); }
  .empuje-int-next::before { transform: rotate(45deg) translate(-1px, 1px); }
  .empuje-int-arrow[data-off="1"] { display: none; }

  /* BOLSITA **Y** PALABRA (30/8/2026). Primero fue solo el ícono, y el riesgo no es
     parejo: si no se entiende que ahí se toca, nadie usa el bloque y no hay forma de
     enterarse —parece funcionar y no vende—. Si la palabra ocupa un renglón de más, se ve
     enseguida. El ícono da el reconocimiento (es el mismo `#bag` del encabezado) y la
     palabra saca la duda. Sin recuadro: es texto subrayado, no el bloque negro de antes. */
  .empuje-int-btn {
    display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
    margin-top: 5px; padding: 0; border: 0; background: none; color: #1B1B1B;
    font-family: inherit; font-size: 10px; letter-spacing: .11em; font-weight: 700;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
    -webkit-appearance: none; -webkit-tap-highlight-color: transparent;
  }
  .empuje-int-btn svg { width: 11px; height: 11px; fill: currentColor; display: block; }
  .empuje-int-btn:hover { opacity: .7; }
  .empuje-int-mas {
    display: block; width: 100%; margin-top: 14px; padding: 9px;
    border: 1px solid #D9D2CA; background: transparent; color: #1B1B1B; font-family: inherit;
    font-size: 11px; letter-spacing: .14em; font-weight: 700; cursor: pointer;
    -webkit-appearance: none; border-radius: 0;
  }
  .empuje-int-mas:hover { border-color: #1B1B1B; }
  .empuje-int .empuje-addon-ghost { display: none; }

  /* Carrito: bloque "Completá tu compra" (ago 2026). Va debajo de la barra de objetivos,
     que es donde la clienta acaba de leer cuánto le falta. */
  /* FILAS, no tira de tarjetas (23/8/2026). La tira vertical era del bloque viejo, el que
     elegía por monto. El mockup aprobado muestra filas: foto a la izquierda, nombre +
     motivo + precio en el medio, y el botón negro a la derecha ocupando el alto. Se lee
     de un vistazo y el motivo entra entero, que era medio problema de la tira. */
  .empuje-cart-reco {
    border: 0; border-top: 1px solid #E9E5DF; border-radius: 0; background: transparent;
    padding: 14px 0 2px 0; margin: 14px 0 4px;
  }
  .empuje-cart-reco-tit {
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
    color: #1B1B1B; margin: 0;
  }
  .empuje-cart-reco-sub {
    font-size: 11.5px; color: #8B8589; margin: 5px 0 10px; line-height: 1.45;
  }
  .empuje-cart-reco-sub b { color: #1B1B1B; font-weight: 600; }
  .empuje-cart-reco-tira { display: block; }
  .empuje-cart-reco-card {
    display: flex; gap: 10px; align-items: center; width: auto;
    padding: 8px 0; border-top: 1px solid #F5F2ED;
  }
  .empuje-cart-reco-card:first-of-type { border-top: 0; }
  .empuje-cart-reco-card .f {
    display: block; flex: 0 0 48px; width: 48px; height: 62px; border-radius: 0;
    background: #EFECE7 center/cover no-repeat; border: 0;
  }
  .empuje-cart-reco-card .m { flex: 1 1 auto; min-width: 0; }
  /* El nombre ocupa SIEMPRE dos renglones, tenga una palabra o cinco (pedido cliente):
     sin esto, un nombre largo empuja el precio hacia abajo y las tarjetas quedan
     desparejas entre sí. */
  .empuje-cart-reco-card .n {
    display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
    font-weight: 400; line-height: 1.35; color: #1B1B1B; margin: 0;
  }
  /* Mismo criterio que el alto fijo del nombre: el motivo ocupa siempre un renglón,
     tenga texto corto o largo, así los precios de las tres tarjetas quedan a la misma
     altura. */
  /* DOS renglones fijos, no uno (verificado en vivo el 23/8/2026): en una tarjeta de
     100 px "Se llevó junto con esto" no entra en una línea y se cortaba a la mitad
     —"Se llevó junto con"—, que además cambia el sentido de la frase. Alto fijo para que
     los precios de las tres tarjetas queden a la misma altura, tenga el motivo una línea
     o dos. */
  .empuje-cart-reco-card .w {
    display: block; font-size: 10.5px; color: #6D3F23; line-height: 1.4; margin-top: 4px;
  }
  .empuje-cart-reco-card .p {
    display: block; font-size: 12.5px; font-weight: 400; color: #1B1B1B; margin-top: 5px;
  }
  .empuje-cart-reco-btn {
    flex: 0 0 auto; align-self: stretch; min-width: 64px; width: auto; margin: 0;
    height: auto; background: #1B1B1B; cursor: pointer; border: 0; border-radius: 0;
    color: #fff; font-family: inherit; font-size: 9.5px; font-weight: 600;
    letter-spacing: .14em; padding: 0 8px;
  }
  .empuje-cart-reco-btn:hover { background: #000; }
  .empuje-cart-reco .empuje-addon-ghost { display: none; }

  /* Carrito: barra de objetivos (mínimo de compra / envío gratis) */
  .empuje-cart-goal { margin: 10px 0 6px 0; }
  .empuje-cart-goal-msg { font-size: 12px; color: #555; margin: 0 0 6px 0; }
  .empuje-cart-goal.goal-ok .empuje-cart-goal-msg { color: #2E7D32; }
  .empuje-cart-goal-track { height: 5px; background: #EDE9E4; border-radius: 99px; overflow: hidden; }
  .empuje-cart-goal-fill { height: 100%; background: #1B1B1B; border-radius: 99px; transition: width 0.35s ease; }
  .empuje-cart-goal.goal-ok .empuje-cart-goal-fill { background: #2E7D32; }
  /* Carrito: chip de ahorro total por transferencia */
  .empuje-cart-save {
    display: inline-block; margin-left: 8px; vertical-align: 1px;
    background: #EAF3EC; color: #2E7D32; border: 1px solid rgba(46,125,50,0.45);
    border-radius: 2px; padding: 1px 6px;
    font-size: 9px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  }
  /* Cartel "¡Agregado al carrito!": el "1 x $37.699" y el importe del total.
     El markup del tema pone <span>1</span><span> x </span><span>$37.699</span> dentro de
     un d-flex, y flexbox recorta los espacios de los costados de cada item: se leía
     "1x$37.699" todo pegado (pasa igual agregando desde la ficha, no solo desde la
     compra rápida). Y el importe se partía por dentro cuando el carrito es grande,
     dejando el "$" solo en un renglón y los números en el siguiente: con nowrap baja
     entero al segundo renglón. Medido: con 12 prendas y $1.482.398 no se sale del
     cartel. (3/9/2026) */
  .js-alert-added-to-cart .js-cart-notification-item-quantity { margin-right: 2px; }
  .js-alert-added-to-cart .js-cart-notification-item-price { margin-left: 2px; }
  .js-alert-added-to-cart .js-cart-total { white-space: nowrap; }
  /* Categorías: NO mostrar el banner nativo como encabezado de la página de categoría
     (la imagen de categoría se usa solo en el grid del home — pedido del cliente) */
  .category-banner { display: none !important; }
  /* Cartelitos: stack único arriba-derecha (%OFF + stock) — siempre alineados.
     NUEVO queda arriba-izquierda. Mobile: se muestra UNO por prioridad %OFF > stock > NUEVO. */
  .empuje-badges-tr {
    position: absolute; top: 10px; right: 10px; z-index: 11;
    display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
    pointer-events: none;
  }
  .empuje-badges-tr .js-labels-floating-group,
  .empuje-badges-tr .labels {
    position: static !important; top: auto !important; right: auto !important;
    left: auto !important; bottom: auto !important; margin: 0 !important;
    display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
  }
  .empuje-badges-tr .empuje-label-stock-badge {
    position: static !important; top: auto !important; right: auto !important;
  }
  /* En el grupo nativo solo mostramos el %OFF (stock/envío nativos: usamos los nuestros) */
  .empuje-badges-tr .js-stock-label,
  .empuje-badges-tr .js-shipping-label-private { display: none !important; }
  /* Fallback para cards aún no procesadas por JS */
  .js-item-product .labels.js-labels-floating-group,
  .js-item-product .js-labels-floating-group {
    top: 10px !important; right: 10px !important;
    left: auto !important; bottom: auto !important;
  }
  @media (max-width: 768px) {
    .empuje-has-off .empuje-label-stock-badge,
    .empuje-has-off .empuje-label-nuevo-badge { display: none !important; }
    .empuje-has-stock:not(.empuje-has-off) .empuje-label-nuevo-badge { display: none !important; }
  }
  /* CTA suave para páginas de contenido (menos invasivo que el bloque negro) */
  .empuje-nosotros-cta.empuje-cta-soft { background: #F4F0EC; padding: 56px 24px; }
  .empuje-nosotros-cta.empuje-cta-soft .empuje-nosotros-cta-title { color: #1B1B1B; }
  .empuje-nosotros-cta.empuje-cta-soft .empuje-nosotros-cta-sub { color: #555; }
  .empuje-nosotros-cta.empuje-cta-soft .empuje-nosotros-cta-btn { background: #1B1B1B; color: #F4F0EC; }
  .empuje-nosotros-cta.empuje-cta-soft .empuje-nosotros-cta-btn:hover { background: #333; color: #F4F0EC; }
  /* Contacto: ocultar el form nativo del tema (feo/desalineado — canal oficial es WhatsApp) */
  body.empuje-has-page .contact-form,
  body.empuje-has-page .js-contact-form,
  body.empuje-has-page form[action*="contact"] {
    display: none !important;
  }

  /* ============ Carrito (drawer lateral) ============ */
  /* Fix: el bloque nativo de descuento por transferencia rompe el layout inline
     (price + name quedan display:block/center y "O"/"con" se cortan a la derecha).
     Lo volvemos a una línea limpia centrada: "O $X con Transferencia o depósito bancario". */
  .payment-discount-price-cart-container {
    text-align: center !important;
    line-height: 1.5 !important;
  }
  .payment-discount-price-cart-container .payment-discount-price-cart,
  .payment-discount-price-cart-container .js-payment-discount-name-cart {
    display: inline !important;
    width: auto !important;
    text-align: inherit !important;
  }

  /* ============ Footer Empuje ============ */
  /* Hide native theme footer */
  body.empuje-has-footer footer.footer-main,
  body.empuje-has-footer .js-footer-main,
  body.empuje-has-footer .js-fs-footer,
  body.empuje-has-footer footer:not(.empuje-footer) {
    display: none !important;
  }

  .empuje-footer {
    background: #F4F0EC;
    color: #1B1B1B;
    padding: 60px 24px 30px 24px;
    font-family: 'Inter', sans-serif;
    margin-top: 60px;
  }
  .empuje-footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1.5fr 1.4fr 0.8fr 1.2fr;
    gap: 48px;
  }
  .empuje-footer-col h4 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1B1B1B;
    margin: 0 0 18px 0;
  }
  .empuje-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .empuje-footer-col ul a {
    color: #555;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.5;
    transition: color 0.15s ease;
  }
  .empuje-footer-col ul a:hover { color: #1B1B1B; text-decoration: none; }

  /* Payment methods grid */
  .empuje-footer-payments {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
  .empuje-footer-pay {
    background: #FFFFFF;
    border: 1px solid #DBD7D2;
    border-radius: 4px;
    padding: 8px 6px;
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    color: #1B1B1B;
    line-height: 1.2;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
  }
  /* Logos nativos clonados (pago + envío) — card blanca con el logo real */
  .empuje-footer-logo-img {
    background: #FFFFFF;
    border: 1px solid #DBD7D2;
    border-radius: 4px;
    padding: 6px 8px;
    width: 100% !important;
    height: 38px !important;
    object-fit: contain;
    display: block;
    box-sizing: border-box;
  }
  .empuje-footer-shipping .empuje-footer-logo-img {
    width: auto !important;
    min-width: 64px;
    max-width: 100px;
  }

  /* Contact info */
  .empuje-footer-contact-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 13px;
    color: #555;
    line-height: 1.55;
  }
  .empuje-footer-contact-item a {
    color: #555;
    text-decoration: none;
  }
  .empuje-footer-contact-item a:hover { color: #1B1B1B; text-decoration: none; }
  .empuje-footer-contact-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    stroke: #1B1B1B;
  }

  /* Shipping methods */
  .empuje-footer-shipping {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
  }
  .empuje-footer-shipping-badge {
    background: #FFFFFF;
    border: 1px solid #DBD7D2;
    border-radius: 4px;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 700;
    color: #1B1B1B;
    letter-spacing: 0.5px;
  }

  /* Social */
  .empuje-footer-social {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
  }
  .empuje-footer-social a {
    width: 36px;
    height: 36px;
    background: #1B1B1B;
    color: #F4F0EC;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease, transform 0.15s ease;
  }
  .empuje-footer-social a:hover {
    background: #555;
    transform: translateY(-1px);
    text-decoration: none;
  }
  .empuje-footer-social svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }

  /* Footer newsletter (smaller variant) */
  .empuje-footer-newsletter-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 14px 0;
    color: #1B1B1B;
  }
  .empuje-footer .empuje-newsletter-form {
    border: 1px solid #1B1B1B;
    max-width: 100%;
  }
  .empuje-footer .empuje-newsletter-input {
    color: #1B1B1B;
    padding: 12px 14px;
    font-size: 13px;
  }
  .empuje-footer .empuje-newsletter-input::placeholder { color: #8B8589; }
  .empuje-footer .empuje-newsletter-submit {
    background: #1B1B1B;
    color: #F4F0EC;
    padding: 12px 16px;
    min-width: 50px;
  }
  .empuje-footer .empuje-newsletter-submit svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
  }

  .empuje-footer-bottom {
    max-width: 1400px;
    margin: 50px auto 0 auto;
    padding-top: 24px;
    border-top: 1px solid #DBD7D2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .empuje-footer-copy {
    font-size: 11px;
    color: #8B8589;
    letter-spacing: 0.5px;
  }
  .empuje-footer-tn {
    font-size: 11px;
    color: #8B8589;
    letter-spacing: 0.5px;
  }
  .empuje-footer-tn a { color: #8B8589; text-decoration: underline; }

  /* ============ Banda de newsletter arriba del pie (ago 2026, opción 2) ============
     Reemplaza al newsletter que estaba apretado en la 5ª columna del footer, donde
     competía con los títulos de las otras columnas y era el texto más largo.
     En el HOME no se muestra: ahí ya está el bloque crema grande justo encima y
     quedaban dos invitaciones pegadas. */
  .empuje-footer-band {
    background: #F4F0EC;
    border-top: 1px solid #DBD7D2;
    border-bottom: 1px solid #DBD7D2;
    padding: 34px 24px;
  }
  body.template-home .empuje-footer-band { display: none; }
  .empuje-footer-band-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
  }
  .empuje-footer-band-eyebrow {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: #8B8589;
    margin: 0 0 8px 0;
  }
  .empuje-footer-band-copy {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.3;
    color: #1B1B1B;
    margin: 0;
    max-width: 40ch;
  }
  .empuje-footer-band .empuje-newsletter-form {
    min-width: 300px;
    flex: 0 1 380px;
    max-width: 380px;
    margin: 0;
  }
  @media (max-width: 700px) {
    .empuje-footer-band { padding: 28px 16px; }
    .empuje-footer-band-inner { gap: 22px; }
    .empuje-footer-band-copy { font-size: 15.5px; }
    .empuje-footer-band .empuje-newsletter-form {
      min-width: 0;
      flex: 1 1 100%;
      max-width: none;
    }
  }

  @media (max-width: 1100px) {
    .empuje-footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; }
  }
  @media (max-width: 600px) {
    .empuje-footer { padding: 40px 16px 20px 16px; margin-top: 40px; }
    .empuje-footer-inner { grid-template-columns: 1fr; gap: 28px; }
    .empuje-footer-bottom { flex-direction: column; text-align: center; margin-top: 30px; }
    .empuje-footer-payments { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .empuje-footer-pay { font-size: 8px; padding: 7px 4px; min-height: 28px; }
    .empuje-footer-col h4 { font-size: 11px; letter-spacing: 1.5px; margin-bottom: 14px; }
    .empuje-footer-contact-item { font-size: 12px; }
    .empuje-footer-shipping { gap: 6px; }
    .empuje-footer-shipping-badge { font-size: 10px; padding: 6px 10px; }
    .empuje-footer-newsletter-title { font-size: 12px; }
  }