:root{
  --ec-primary: #9E2076;
  --ec-primary-dark: #7A1859;
  --ec-promo: #C5558E;   /* --nuba-orquidea del manual de marca */
  --ec-pink-soft: #FCC8D7;
  --ec-pink-mid: #E6A6C6;
  --ec-pink-pale: #FCDEE9;
  --ec-texto: #3A3839;
  --ec-texto-2: #747073;
  --ec-borde: #949494;
  --ec-borde-suave: #DDDDDD;
  --ec-superficie: #F8F6F7;
  --ec-blanco: #FFFFFF;
  --ec-ok: #1F7A45;
  --ec-ok-bg: #EAF6EF;
  --ec-warn: #8A5A00;
  --ec-warn-bg: #FDF4E3;
  --ec-error: #B3261E;
  --ec-err-bg: #FDECEA;
  --ec-radio: 16px;
  --ec-radio-l: 12px;
  --ec-radio-3xl: 24px;
  --ec-ancho: 1280px;
  --ec-col-filtros: 240px;
  --ec-col-compra: 420px;
  --ec-col-resumen: 360px;
  --ec-sticky-top: 130px;
  /* La pila del manual de marca. Brandon Grotesque es COMERCIAL: se carga por
     Adobe Fonts o con WOFF2 licenciados, asi que mientras no haya licencia el
     navegador cae a Josefin Sans o Poppins, que el propio manual propone como
     respaldo y son gratuitas. Nombrar una fuente que nadie carga es el error que
     tuvimos hasta hoy: el CSS pedia Manrope y la tienda se veia en system-ui. */
  --ec-fuente: "brandon-grotesque", "Brandon Grotesque", "Josefin Sans", "Poppins", system-ui, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NUBA ecommerce — CSS de los esqueletos. Namespace: ecom-
   
   El prefijo NO contiene la subcadena "nuba-" a proposito: nuba-styles.php trae
   reglas [class*="nuba-"] h1 {font-family:'DM Serif Display'!important} que
   secuestrarian toda la tipografia. Aunque el mu-plugin desactiva ese CSS en
   estas paginas, el namespace es la segunda linea de defensa.

   Breakpoints: los del diseno (1024 / 640), no los de Divi (980 / 767).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset del envoltorio de Divi ─────────────────────────────────────────
   Divi da a .et_pb_row un max-width de 1080px y un width del 80%, y padding
   propio a la seccion. Los layouts de este diseno necesitan el ancho completo
   y resuelven su propio grid dentro del modulo code, asi que se neutraliza. */
.ecom-page .et_pb_section { padding: 0; margin: 0; }
.ecom-page .et_pb_row      { width: 100%; max-width: none; margin: 0; padding: 0; }
.ecom-page .et_pb_column   { width: 100% !important; margin: 0 !important; padding: 0; }
.ecom-page .et_pb_module   { margin-bottom: 0; }
.ecom-page .et_pb_code_inner { display: block; }

/* Y el MISMO problema una capa mas arriba, que se nos paso.
   El reset de encima solo cubre las paginas hechas con el Divi Builder. Una
   pagina normal —la Home de la tienda lo es— no lleva .et_pb_row: Divi la mete
   en `#main-content > .container`, que tiene `width: 80%` y tope de 1080px.
   Medido el 2026-10-09 en un navegador de verdad: en un telefono de 390px el
   contenido quedaba en 280px, o sea que el 28% de la pantalla se iba en margen,
   porque Divi ponia 39px a cada lado ENCIMA de los 16px que .ecom-wrap ya pone
   para eso. Se aplicaban los dos. Quitarlo devuelve un 25% de ancho util en
   movil y deja el hero a sangre, que es como estaba diseñado.
   El selector es `#main-content >` a proposito: Divi usa .container tambien en
   su cabecera y su pie, y esos no se tocan. */
.ecom-page #main-content > .container {
  width: 100%; max-width: none; margin: 0; padding-left: 0; padding-right: 0;
}

/* Y 137px de vacio en lo alto de CADA pantalla de la tienda, de la misma raiz.
   Divi reserva sitio para su cabecera fija con `padding-top` en #page-container
   y 58px mas en .container. La tienda pone su propia cabecera —sticky, con su
   alto— y deja la de Divi en `display: none`, asi que ese hueco no compensa
   nada: es blanco muerto. Medido el 2026-10-09 en stage: el hero empezaba en
   y=295 y pasa a y=158.
   El `!important` hace falta y no es pereza: Divi escribe ese padding como
   atributo `style` EN LINEA, que gana a cualquier selector. Sin el, la regla se
   aplica, el valor calculado sigue siendo 79px y no se mueve nada. */
.ecom-page #page-container { padding-top: 0 !important; }
/* El de .container tambien lleva !important, y por otra razon: Divi lo reimpone
   dentro de su media query de movil. Sin el, en escritorio desaparecia y en un
   telefono seguian apareciendo los 58px. */
.ecom-page #main-content > .container { padding-top: 0 !important; }

/* ── Base ──────────────────────────────────────────────────────────────── */
.ecom-page, .ecom-page * { box-sizing: border-box; }
.ecom-page {
  font-family: var(--ec-fuente);
  color: var(--ec-texto);
  background: var(--ec-blanco);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ecom-page h1, .ecom-page h2, .ecom-page h3, .ecom-page h4 {
  font-family: var(--ec-fuente);
  color: var(--ec-texto);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ecom-page h1 { font-size: 22px; font-weight: 800; }
.ecom-page h2 { font-size: 19px; font-weight: 700; }
.ecom-page h3 { font-size: 16px; font-weight: 700; }
.ecom-page p  { margin: 0 0 10px; }
.ecom-page a  { color: inherit; text-decoration: none; }
.ecom-page img { max-width: 100%; display: block; }
.ecom-page :focus-visible { outline: 2px solid var(--ec-primary); outline-offset: 2px; }
@media (min-width: 1024px) {
  .ecom-page h1 { font-size: 28px; }
  .ecom-page h2 { font-size: 22px; }
}

/* Scroll horizontal sin barra visible (los carruseles del diseno).
   La barra se oculta pero el scroll sigue siendo accesible por teclado. */
.ecom-scroll-x {
  display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none;
  -ms-overflow-style: none; scroll-snap-type: x proximity;
}
.ecom-scroll-x::-webkit-scrollbar { display: none; }
/* Sangrado a los bordes en mobile, contenido en desktop */
.ecom-bleed { margin-left: -16px; margin-right: -16px; padding: 0 16px; }
@media (min-width: 1024px) { .ecom-bleed { margin: 0; padding: 0; } }

.ecom-wrap { max-width: var(--ec-ancho); margin: 0 auto; padding: 0 16px; }
@media (min-width: 1024px) { .ecom-wrap { padding: 0 32px; } }
.ecom-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Aviso de esqueleto ──────────────────────────────────────────────────
   NO es sticky a propósito: es andamiaje de revisión, no navegación, y al ser de
   altura variable (según cuántas notas lleve la página) colisionaba con el header
   pegado, que asumía 33px fijos. El header es el que se queda arriba.

   En móvil las notas se pliegan detrás de un botón: con cinco o seis ocupaban
   media pantalla de un teléfono y desplazaban el contenido justo en la revisión
   móvil, que es la que más importa. */
.ecom-flag {
  background: #1B1B1B; color: #FFD6E7;
  font: 700 11px/1 var(--ec-fuente); letter-spacing: .12em; text-transform: uppercase;
  padding: 9px 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.ecom-flag-t { font-weight: 700; }
.ecom-flag a { color: #fff; text-decoration: underline; letter-spacing: .04em; }
.ecom-flag-b {
  background: none; border: 0; padding: 0; cursor: pointer; color: #FFD6E7;
  font: 500 11px/1 var(--ec-fuente); letter-spacing: .04em; text-transform: none;
  text-decoration: underline; opacity: .85;
}
.ecom-flag-b::after { content: ' \25BE'; }
.ecom-flag[data-open="1"] .ecom-flag-b::after { content: ' \25B4'; }
.ecom-flag-ns { display: none; flex-basis: 100%; }
.ecom-flag[data-open="1"] .ecom-flag-ns { display: block; }
.ecom-flag-n {
  display: block; letter-spacing: .04em; text-transform: none; font-weight: 500;
  opacity: .8; line-height: 1.55; padding: 2px 0;
}
@media (min-width: 1024px) {
  .ecom-flag-b { display: none; }
  .ecom-flag-ns { display: flex; gap: 18px; flex-wrap: wrap; flex-basis: auto; }
  .ecom-flag-n { display: inline; padding: 0; }
}

/* ── Header ────────────────────────────────────────────────────────────── */
.ecom-hd { background: var(--ec-primary); color: #fff; position: sticky; top: 0; z-index: 60; }
.ecom-hd a, .ecom-hd button { color: #fff; }
.ecom-hd-bar { display: flex; align-items: center; gap: 12px; height: 56px; }
.ecom-hd-logo { font: 800 20px/1 var(--ec-fuente); letter-spacing: .16em; color: #fff; }
.ecom-hd-ico {
  background: none; border: 0; padding: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; border-radius: 8px;
  /* Era de 36x36 con un SVG de 20 y 8 de acolchado. Se lleva a 44 sin tocar el
     icono ni el acolchado visible: es el boton de cerrar del drawer y de la
     cabecera, y en movil se falla mucho. */
  min-width: 44px; min-height: 44px;
}
.ecom-hd-ico:hover { background: rgba(255,255,255,.14); }
.ecom-hd-count {
  position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px;
  background: #fff; color: var(--ec-primary); border-radius: 999px;
  font: 700 10px/17px var(--ec-fuente); text-align: center; padding: 0 4px;
}
/* Buscador prominente de mobile: en el prototipo es un boton que simula input.
   Aqui es un boton de verdad, que es lo correcto: abre la vista de busqueda. */
.ecom-hd-search {
  width: 100%; display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 14px; margin-bottom: 10px;
  background: rgba(255,255,255,.96);
  border: 0; border-radius: var(--ec-radio); cursor: pointer;
  font: 500 14px/1 var(--ec-fuente); text-align: left; text-decoration: none;
}
/* Especificidad (0,2,0) y después de `.ecom-hd a`, que si no gana con su blanco.
   Se resuelve por especificidad y orden, no con !important. */
.ecom-hd .ecom-hd-search { color: var(--ec-texto-2); }
.ecom-hd-search svg { flex: none; color: var(--ec-primary); }
/* TIENDA: la fila de búsqueda de móvil es un FORMULARIO, no un enlace: se escribe
   en ella y despliega los resultados ahí mismo. El input hereda el aspecto de la
   fila para que no se vea una caja dentro de otra. */
.ecom-hd-search { position: relative; }
.ecom-hd-search input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; background: none; outline: none; padding: 0;
  font: 500 14px/1 var(--ec-fuente); color: var(--ec-texto);
}
.ecom-hd-search input::placeholder { color: var(--ec-texto-2); }

/* El desplegable de los buscadores de la CABECERA: cuelga del campo, por encima
   de la página. El de la pantalla de búsqueda sigue siendo un bloque normal. */
.ecom-hd-form .ecom-pred,
.ecom-hd-search .ecom-pred {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 70;
  margin-top: 0; background: #fff; text-align: left;
  max-height: 70vh; overflow-y: auto;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
/* La cabecera pinta sus enlaces en blanco; dentro del desplegable el fondo es
   blanco, así que hay que devolverles el color del texto. */
.ecom-hd .ecom-pred a { color: var(--ec-texto); }
.ecom-hd .ecom-pred .ecom-pred-i mark { color: var(--ec-primary); }
.ecom-hd-form { flex: 1; max-width: 520px; position: relative; display: flex; }
.ecom-hd-form input {
  width: 100%; height: 40px; padding: 0 14px 0 40px;
  border: 0; border-radius: var(--ec-radio-l); background: rgba(255,255,255,.96);
  font: 500 14px/1 var(--ec-fuente); color: var(--ec-texto);
}
.ecom-hd-form input::placeholder { color: var(--ec-texto-2); }
.ecom-hd-form svg { position: absolute; left: 13px; top: 11px; color: var(--ec-primary); }
.ecom-hd-nav { border-top: 1px solid rgba(255,255,255,.22); height: 40px; display: flex; align-items: center; gap: 4px; }
.ecom-hd-nav a, .ecom-hd-nav button {
  font: 600 13px/1 var(--ec-fuente); padding: 8px 10px; border-radius: 8px;
  background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.ecom-hd-nav a:hover, .ecom-hd-nav button:hover { background: rgba(255,255,255,.16); }
.ecom-hd-sep { width: 1px; height: 18px; background: rgba(255,255,255,.3); margin: 0 8px; flex: none; }
.ecom-hd-gift { font-weight: 700 !important; display: inline-flex; gap: 6px; align-items: center; }
.ecom-hd-drop { position: relative; }
.ecom-hd-drop-menu {
  position: absolute; top: 100%; left: 0; min-width: 220px; z-index: 70;
  background: #fff; color: var(--ec-texto); border-radius: var(--ec-radio-l);
  box-shadow: 0 12px 32px rgba(0,0,0,.16); padding: 8px; display: none;
}
.ecom-hd-drop[data-open="1"] .ecom-hd-drop-menu { display: block; }
.ecom-hd-drop-menu a {
  display: block; color: var(--ec-texto); font: 500 14px/1 var(--ec-fuente);
  padding: 10px 12px; border-radius: 8px;
}
.ecom-hd-drop-menu a:hover { background: var(--ec-pink-pale); color: var(--ec-primary); }

.ecom-hd-only-lg { display: none; }
@media (min-width: 1024px) {
  .ecom-hd-only-sm { display: none !important; }
  .ecom-hd-only-lg { display: block; }
  .ecom-hd-nav     { display: flex; }
}

/* Drawer de navegacion mobile */
.ecom-navdrawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.ecom-navdrawer[data-open="1"] { visibility: visible; }
.ecom-navdrawer-bd {
  position: absolute; inset: 0; background: rgba(0,0,0,.42);
  opacity: 0; transition: opacity .22s ease;
}
.ecom-navdrawer[data-open="1"] .ecom-navdrawer-bd { opacity: 1; }
.ecom-navdrawer-p {
  position: absolute; inset: 0 auto 0 0; width: 300px; max-width: 88vw;
  background: #fff; transform: translateX(-100%); transition: transform .24s ease;
  overflow-y: auto; padding: 16px;
}
.ecom-navdrawer[data-open="1"] .ecom-navdrawer-p { transform: none; }
.ecom-navdrawer-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.ecom-navdrawer-hd .ecom-hd-logo { color: var(--ec-primary); }
.ecom-navdrawer h4 {
  font: 700 11px/1 var(--ec-fuente); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ec-texto-2); margin: 4px 0 8px;
}
.ecom-navdrawer nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 4px; font: 500 15px/1 var(--ec-fuente);
  border-bottom: 1px solid var(--ec-borde-suave);
}
.ecom-navdrawer nav a:last-child { border-bottom: 0; }
.ecom-navdrawer hr { border: 0; border-top: 1px solid var(--ec-borde-suave); margin: 16px 0; }
.ecom-navdrawer-gift {
  display: flex; gap: 10px; align-items: center; background: var(--ec-pink-pale);
  border-radius: var(--ec-radio); padding: 14px; margin-top: 8px;
}
.ecom-navdrawer-gift b { display: block; font-size: 14px; }
.ecom-navdrawer-gift span { font-size: 12px; color: var(--ec-texto-2); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.ecom-ft { background: var(--ec-texto); color: #fff; padding: 32px 0 24px; margin-top: 48px; }
.ecom-ft .ecom-hd-logo { color: #fff; margin-bottom: 20px; }
.ecom-ft-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (min-width: 1024px) { .ecom-ft-cols { grid-template-columns: repeat(4, 1fr); } }
/* <p> y no <h4>: no romper la jerarquia de encabezados de la pagina */
.ecom-ft-h {
  font: 700 11px/1 var(--ec-fuente); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ec-pink-soft); margin: 0 0 10px;
}
.ecom-ft a { display: block; font-size: 13px; color: rgba(255,255,255,.86); padding: 5px 0; }
.ecom-ft a:hover { color: #fff; text-decoration: underline; }
.ecom-ft-legal {
  border-top: 1px solid rgba(255,255,255,.18); margin-top: 24px; padding-top: 16px;
  font-size: 12px; color: rgba(255,255,255,.62);
}

/* ── Botones ───────────────────────────────────────────────────────────── */
.ecom-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ec-fuente); font-weight: 700; font-size: 14px;
  border-radius: var(--ec-radio-l); border: 1.5px solid transparent;
  padding: 0 18px; height: 44px; cursor: pointer; text-align: center;
  transition: background-color .15s, color .15s, border-color .15s, transform .1s;
}
.ecom-btn:active { transform: scale(.985); }
.ecom-btn--p  { background: var(--ec-primary); color: #fff; }
.ecom-btn--p:hover { background: var(--ec-primary-dark); }
.ecom-btn--s  { background: #fff; color: var(--ec-primary); border-color: var(--ec-primary); }
.ecom-btn--s:hover { background: var(--ec-pink-pale); }
.ecom-btn--t  { background: none; color: var(--ec-primary); padding: 0 4px; height: auto; text-decoration: underline; }
.ecom-btn--sm { height: 36px; font-size: 13px; padding: 0 14px; }
.ecom-btn--lg { height: 52px; font-size: 15px; }
.ecom-btn--full { width: 100%; }
.ecom-btn[disabled], .ecom-btn[aria-disabled="true"] {
  background: var(--ec-borde-suave); color: var(--ec-texto-2);
  border-color: var(--ec-borde-suave); cursor: not-allowed;
}
.ecom-btn[disabled]:hover { background: var(--ec-borde-suave); }
.ecom-btn[data-loading="1"] { pointer-events: none; }
.ecom-btn[data-loading="1"]::before {
  content: ''; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: ecomSpin .7s linear infinite;
}
@keyframes ecomSpin { to { transform: rotate(360deg); } }
/* Boton cuadrado de favorito */
.ecom-fav {
  width: 44px; height: 44px; flex: none; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer;
  background: #fff; border: 1.5px solid var(--ec-borde); border-radius: var(--ec-radio-l);
  color: var(--ec-texto-2);
}
.ecom-fav[data-on="1"] { color: var(--ec-primary); border-color: var(--ec-primary); background: var(--ec-pink-pale); }
.ecom-fav svg { width: 20px; height: 20px; }

/* ── Formularios ───────────────────────────────────────────────────────── */
.ecom-f { margin-bottom: 14px; }
.ecom-f > label, .ecom-lbl {
  display: block; font: 600 13px/1 var(--ec-fuente); color: var(--ec-texto); margin-bottom: 6px;
}
.ecom-f input, .ecom-f select, .ecom-f textarea {
  width: 100%; font: 500 15px/1.3 var(--ec-fuente); color: var(--ec-texto);
  background: var(--ec-superficie); border: 1.5px solid var(--ec-borde);
  border-radius: var(--ec-radio-l); padding: 12px 14px; min-height: 46px;
}
.ecom-f textarea { min-height: 92px; resize: vertical; }
.ecom-f select { appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23747073' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.ecom-f input:focus, .ecom-f select:focus, .ecom-f textarea:focus {
  background: #fff; border-color: var(--ec-primary); outline: none;
  box-shadow: 0 0 0 3px rgba(158,32,118,.14);
}
.ecom-f input::placeholder, .ecom-f textarea::placeholder { color: var(--ec-texto-2); }
.ecom-f .ecom-hint { display: block; font-size: 12px; color: var(--ec-texto-2); margin-top: 5px; }
/* Error: color + icono + texto, no solo color */
.ecom-f[data-error="1"] input, .ecom-f[data-error="1"] select, .ecom-f[data-error="1"] textarea {
  border-color: var(--ec-error); background: var(--ec-err-bg);
}
.ecom-err {
  display: none; font: 600 12px/1.4 var(--ec-fuente); color: var(--ec-error); margin-top: 5px;
}
.ecom-err::before { content: '⚠ '; }
.ecom-f[data-error="1"] .ecom-err { display: block; }
.ecom-grid2 { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 640px) { .ecom-grid2 { grid-template-columns: 1fr 1fr; } }

.ecom-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 13px; margin-bottom: 12px; }
.ecom-check input { width: 18px; height: 18px; flex: none; margin: 1px 0 0; accent-color: var(--ec-primary); cursor: pointer; }
.ecom-check span { line-height: 1.45; }
.ecom-check a { color: var(--ec-primary); text-decoration: underline; }
/* Interruptor: role=switch de verdad, no un div clicable */
.ecom-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-size: 13px; font-weight: 600; }
.ecom-switch-t { width: 40px; height: 23px; flex: none; border-radius: 999px; background: var(--ec-borde); position: relative; transition: background .18s; border: 0; cursor: pointer; }
.ecom-switch-t::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform .18s; }
.ecom-switch-t[aria-checked="true"] { background: var(--ec-primary); }
.ecom-switch-t[aria-checked="true"]::after { transform: translateX(17px); }

/* ── Chips y badges ────────────────────────────────────────────────────── */
.ecom-chips { display: flex; gap: 8px; align-items: center; }
.ecom-chips--x {
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  /* `contain: inline-size` no es decoracion: sin el, a 360 px la pagina entera se
     ensancha (scrollWidth 361 > innerWidth 360) y el carrusel NO SE DESPLAZA en
     absoluto (scrollWidth === clientWidth === 329).
     El tema calcula `body { display: grid }`, asi que #page-container es un item
     de grid con `min-width: auto` y no puede encoger por debajo de su min-content;
     y su min-content son los chips, que no envuelven (white-space: nowrap). En vez
     de desplazarse el carrusel, se ensancha el documento.
     Comprobado en Chromium a 360 px: con esta linea, scrollWidth baja a 360 y el
     carrusel pasa a ser desplazable de verdad. NO valen `min-width: 0` en este
     elemento ni en sus padres, `max-width: 100%`, ni `overflow-x: hidden`. */
  contain: inline-size;
}
.ecom-chips--x::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .ecom-chips--x { flex-wrap: wrap; overflow: visible; } }
.ecom-chip {
  /* TIENDA: `min-height: 44px` decidido el 2026-09-16. Los chips son la navegación
     de la PLP en móvil, no un adorno, y medían 66x33: 33 px es la mitad de la yema
     de un dedo. El mínimo de 44x44 sale de WCAG 2.2 y de las guías de Apple.
     Va como min-height y no como padding para no tocar el ancho: siguen cabiendo
     los mismos chips por fila, la barra solo crece a lo alto. */
  min-height: 44px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 600 13px/1 var(--ec-fuente); padding: 9px 15px; border-radius: 999px;
  background: #fff; color: var(--ec-texto); border: 1.5px solid var(--ec-borde);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.ecom-chip:hover { border-color: var(--ec-primary); color: var(--ec-primary); }
/* Seleccionado: color + peso, para no depender solo del color */
.ecom-chip[aria-pressed="true"], .ecom-chip[data-on="1"] {
  background: var(--ec-primary); color: #fff; border-color: var(--ec-primary); font-weight: 700;
}
/* Sin producto en el catalogo: se muestra, no se esconde. La especificacion fija
   la navegacion completa y el catalogo real solo llena 4 de los 6 grupos; ocultar
   los vacios taparia justo la carencia que hay que revisar. */
.ecom-chip[disabled] {
  opacity: .45; cursor: not-allowed; background: var(--ec-superficie);
  border-style: dashed;
}
.ecom-chip[disabled]:hover { border-color: var(--ec-borde); color: var(--ec-texto); }

/* Navegacion de dos niveles: grupo arriba, subcategoria contextual debajo */
.ecom-nav2 { display: flex; flex-direction: column; gap: 12px; }
.ecom-subbar { display: flex; flex-direction: column; gap: 6px; }
.ecom-subbar-t { font-size: 12px; font-weight: 600; color: var(--ec-texto-2); }
.ecom-subbar .ecom-chip { font-size: 12.5px; padding: 7px 13px; }

.ecom-chip-x { background: none; border: 0; padding: 0; margin-left: 2px; cursor: pointer; color: inherit; display: inline-flex; }
.ecom-chip--rm { background: var(--ec-pink-pale); border-color: var(--ec-pink-mid); color: var(--ec-primary); }

.ecom-badge {
  display: inline-block; font: 700 10px/1 var(--ec-fuente); letter-spacing: .04em;
  padding: 5px 8px; border-radius: 6px; text-transform: uppercase;
}
.ecom-badge--promo  { background: var(--ec-promo);      color: #fff; }
.ecom-badge--nuevo  { background: var(--ec-pink-pale);  color: var(--ec-primary); }
/* K-Beauty: texto oscuro sobre el rosa medio. Blanco daba 1.97:1 (ver ecom_tokens) */
.ecom-badge--kbeauty{ background: var(--ec-pink-mid);   color: var(--ec-texto); }
.ecom-badge--agotado{ background: var(--ec-texto-2);    color: #fff; }
.ecom-badge--neutro { background: var(--ec-borde-suave);color: var(--ec-texto); }
.ecom-badge--ok     { background: var(--ec-ok-bg);      color: var(--ec-ok); }
.ecom-badge--warn   { background: var(--ec-warn-bg);    color: var(--ec-warn); }
/* Etiqueta de pendiente de la especificacion (POR VALIDAR / POR CONFIRMAR) */
.ecom-tag {
  display: inline-flex; gap: 5px; align-items: center; vertical-align: middle;
  font: 700 9px/1 var(--ec-fuente); letter-spacing: .1em; text-transform: uppercase;
  background: #1B1B1B; color: #FFD6E7; padding: 4px 7px; border-radius: 4px;
}

/* ── Breadcrumb ────────────────────────────────────────────────────────── */
.ecom-bc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; padding: 14px 0 10px; }
.ecom-bc a { color: var(--ec-texto-2); }
.ecom-bc a:hover { color: var(--ec-primary); text-decoration: underline; }
.ecom-bc span[aria-current] { color: var(--ec-texto); font-weight: 600; }
.ecom-bc svg { color: var(--ec-texto-2); flex: none; }

/* ── Product card ──────────────────────────────────────────────────────── */
.ecom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 1024px) { .ecom-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1360px) { .ecom-grid { grid-template-columns: repeat(4, 1fr); } }

.ecom-card { position: relative; border-radius: var(--ec-radio); overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.ecom-card-img { position: relative; aspect-ratio: 1/1; background: var(--ec-superficie); overflow: hidden; }
.ecom-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ecom-card:hover .ecom-card-img img { transform: scale(1.05); }
.ecom-card[data-agotado="1"] .ecom-card-img img { opacity: .5; }
.ecom-card-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; z-index: 2; }
.ecom-card-fav {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.92); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; color: var(--ec-texto-2);
}
.ecom-card-fav[data-on="1"] { color: var(--ec-primary); }
.ecom-card-fav svg { width: 17px; height: 17px; }
.ecom-card-body { padding: 10px 2px 4px; display: flex; flex-direction: column; gap: 3px; }
.ecom-card-marca { font: 700 10px/1 var(--ec-fuente); letter-spacing: .14em; text-transform: uppercase; color: var(--ec-primary); }
.ecom-card-nombre {
  font: 500 13px/1.35 var(--ec-fuente); color: var(--ec-texto);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.7em;
}
/* Cuantas opciones hay dentro, para lo que varia por algo que no es color.
   Los productos de tono ya lo dicen con los swatches; estos no decian nada. */
.ecom-card-ops {
  font: 600 11px/1.2 var(--ec-fuente);
  color: var(--ec-primary);
}
.ecom-card-precio { display: flex; align-items: baseline; gap: 7px; margin-top: 2px; }
.ecom-card-precio b { font: 800 15px/1 var(--ec-fuente); }
.ecom-card-precio s { font: 500 12px/1 var(--ec-fuente); color: var(--ec-texto-2); }
/* Sin foto: los 27 Palladio no tienen imagen cargada todavia. No se disimula. */
.ecom-nofoto {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; padding: 12px;
  background: var(--ec-superficie); text-align: center;
}
.ecom-nofoto-b { width: 44%; aspect-ratio: 3/5; border-radius: 6px 6px 10px 10px; opacity: .9; }
.ecom-nofoto span { font: 700 8px/1.3 var(--ec-fuente); letter-spacing: .1em; text-transform: uppercase; color: var(--ec-texto-2); }

/* Fila de swatches de tono en la card de maquillaje.
   Va FUERA del enlace para que el clic en un tono no navegue. */
.ecom-swatches { display: flex; align-items: center; gap: 6px; padding: 6px 2px 0; flex-wrap: wrap; }
.ecom-sw {
  width: 18px; height: 18px; border-radius: 50%; flex: none; cursor: pointer; padding: 0;
  border: 1px solid rgba(0,0,0,.18); position: relative; box-shadow: 0 0 0 0 var(--ec-primary);
  transition: box-shadow .12s;
}
.ecom-sw[aria-pressed="true"] { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3.5px var(--ec-primary); }
/* Agotado: opacidad + diagonal + title. Tres senales, no solo el color. */
.ecom-sw[disabled] { opacity: .35; cursor: not-allowed; }
.ecom-sw[disabled]::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%);
}
.ecom-sw--lg { width: 32px; height: 32px; }
.ecom-sw--lg[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--ec-primary); }
.ecom-swatches-n { font: 600 11px/1 var(--ec-fuente); color: var(--ec-texto-2); margin-left: auto; }
.ecom-swatches-mas { font: 700 11px/1 var(--ec-fuente); color: var(--ec-texto-2); }

/* Card de recomendacion (ancho fijo, carrusel) */
.ecom-rec { width: 148px; flex: none; scroll-snap-align: start; }
.ecom-rec .ecom-card-nombre { font-size: 12px; min-height: 2.6em; }

/* ── PLP: cabecera, barra, filtros ─────────────────────────────────────── */
.ecom-plp-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ecom-plp-n { font: 600 13px/1 var(--ec-fuente); color: var(--ec-texto-2); white-space: nowrap; }
.ecom-plp-body { display: block; }
@media (min-width: 1024px) {
  .ecom-plp-body { display: grid; grid-template-columns: var(--ec-col-filtros) 1fr; gap: 32px; align-items: start; }
}
.ecom-plp-side { display: none; }
@media (min-width: 1024px) { .ecom-plp-side { display: block; position: sticky; top: var(--ec-sticky-top); } }
.ecom-plp-bar { display: flex; gap: 10px; align-items: center; margin: 12px 0 16px; }
@media (min-width: 1024px) { .ecom-plp-bar--sm { display: none; } }
.ecom-plp-bar--lg { display: none; }
@media (min-width: 1024px) { .ecom-plp-bar--lg { display: flex; justify-content: space-between; } }
.ecom-plp-bar select { min-height: 40px; }
.ecom-plp-bar .ecom-f { margin: 0; flex: 1; }
.ecom-btn-filtro { position: relative; }
.ecom-btn-filtro .ecom-n {
  min-width: 18px; height: 18px; border-radius: 999px; background: var(--ec-primary);
  color: #fff; font: 700 10px/18px var(--ec-fuente); text-align: center; padding: 0 4px;
}
.ecom-btn-filtro[data-n="0"] .ecom-n { display: none; }

.ecom-fg { border-bottom: 1px solid var(--ec-borde-suave); padding: 4px 0; }
.ecom-fg:last-child { border-bottom: 0; }
.ecom-fg-h {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: 0; padding: 13px 2px; cursor: pointer;
  font: 700 13px/1 var(--ec-fuente); color: var(--ec-texto); text-align: left;
  /* 42 -> 44: se quedaba a dos pixeles del objetivo tactil comodo. */
  min-height: 44px;
}
.ecom-fg-h svg { transition: transform .2s; flex: none; color: var(--ec-texto-2); }
.ecom-fg[data-open="1"] .ecom-fg-h svg { transform: rotate(180deg); }
.ecom-fg-b { display: none; padding: 0 2px 14px; }
.ecom-fg[data-open="1"] .ecom-fg-b { display: block; }
/* min-height 44: la fila era de 34 px y es el objetivo tactil principal del
   drawer en movil. Subirla no cambia el diseno (es una fila de lista) y la deja
   en el tamano comodo que recomiendan iOS y Material. */
.ecom-fo { display: flex; gap: 9px; align-items: center; padding: 7px 0; cursor: pointer; font-size: 13px; min-height: 44px; }
.ecom-fo input { width: 17px; height: 17px; flex: none; accent-color: var(--ec-primary); cursor: pointer; }
/* Activo: color + negrita */
.ecom-fo input:checked + span { color: var(--ec-primary); font-weight: 700; }
.ecom-fo-n { margin-left: auto; font-size: 11px; color: var(--ec-texto-2); }
.ecom-filtros-hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.ecom-filtros-hd h3 { font-size: 14px; }

/* Drawer inferior (filtros mobile) */
/* z-index por encima del boton flotante de WhatsApp de nuba-styles.php, que va a
   9999 y tapaba el ~37% del boton "Ver N productos" del pie del drawer a 360 px
   (2 de 5 puntos de ese boton devolvian el widget en elementFromPoint). El drawer
   es un dialogo modal: le toca estar por encima de cualquier flotante de la
   pagina, y arreglarlo aqui evita tocar un mu-plugin que comparte produccion. */
.ecom-drawer { position: fixed; inset: 0; z-index: 10000; visibility: hidden; }
.ecom-drawer[data-open="1"] { visibility: visible; }
.ecom-drawer-bd { position: absolute; inset: 0; background: rgba(0,0,0,.42); backdrop-filter: blur(2px); opacity: 0; transition: opacity .22s; }
.ecom-drawer[data-open="1"] .ecom-drawer-bd { opacity: 1; }
.ecom-drawer-p {
  position: absolute; inset: auto 0 0 0; max-height: 90dvh; background: #fff;
  border-radius: var(--ec-radio-3xl) var(--ec-radio-3xl) 0 0;
  transform: translateY(100%); transition: transform .26s ease;
  display: flex; flex-direction: column;
}
.ecom-drawer[data-open="1"] .ecom-drawer-p { transform: none; }
.ecom-drawer-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--ec-borde-suave); margin: 10px auto 4px; flex: none; }
.ecom-drawer-hd { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 10px; flex: none; }
.ecom-drawer-b { overflow-y: auto; padding: 0 16px 16px; flex: 1; }
.ecom-drawer-ft { flex: none; display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--ec-borde-suave); background: #fff; }
.ecom-drawer-ft .ecom-btn { flex: 1; }
@media (min-width: 1024px) { .ecom-drawer--solo-sm { display: none; } }

/* ── Paginacion "cargar mas" (el PDF pide esto, no scroll infinito) ────── */
.ecom-mas { text-align: center; padding: 28px 0 8px; }
.ecom-mas p { font-size: 13px; color: var(--ec-texto-2); margin-bottom: 12px; }
.ecom-mas-barra { width: 180px; height: 3px; border-radius: 2px; background: var(--ec-borde-suave); margin: 0 auto 14px; overflow: hidden; }
.ecom-mas-barra i { display: block; height: 100%; background: var(--ec-primary); }

/* ── Estados vacios ────────────────────────────────────────────────────── */
.ecom-vacio { text-align: center; padding: 44px 16px; }
.ecom-vacio-ico {
  width: 64px; height: 64px; border-radius: 50%; background: var(--ec-pink-pale);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
  color: var(--ec-primary);
}
.ecom-vacio h2 { margin-bottom: 8px; }
.ecom-vacio p { font-size: 14px; color: var(--ec-texto-2); max-width: 380px; margin: 0 auto 18px; }
.ecom-vacio-btns { display: flex; flex-direction: column; gap: 10px; max-width: 320px; margin: 0 auto; }
@media (min-width: 640px) { .ecom-vacio-btns { flex-direction: row; justify-content: center; max-width: none; } }

/* ── Titulo de banda + separador ───────────────────────────────────────── */
.ecom-banda { padding: 28px 0 4px; }
.ecom-banda-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ecom-hr { border: 0; border-top: 1px solid var(--ec-borde-suave); margin: 32px 0; }

/* ── PDP ───────────────────────────────────────────────────────────────── */
.ecom-pdp { display: block; }
@media (min-width: 1024px) {
  .ecom-pdp { display: grid; grid-template-columns: 1fr var(--ec-col-compra); gap: 48px; align-items: start; }
}
/* Galeria mobile: scroll-snap horizontal a sangre + dots */
.ecom-gal-sm { position: relative; }
.ecom-gal-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ecom-gal-track::-webkit-scrollbar { display: none; }
.ecom-gal-track > * { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 1/1; background: var(--ec-superficie); }
.ecom-gal-track img { width: 100%; height: 100%; object-fit: cover; }
.ecom-gal-dots { display: flex; gap: 5px; justify-content: center; padding: 12px 0; }
.ecom-gal-dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--ec-borde); transition: width .2s, background .2s; }
.ecom-gal-dots i[data-on="1"] { width: 16px; background: var(--ec-primary); }
@media (min-width: 1024px) { .ecom-gal-sm { display: none; } }
/* Galeria desktop */
.ecom-gal-lg { display: none; }
@media (min-width: 1024px) { .ecom-gal-lg { display: block; } }
.ecom-gal-main { aspect-ratio: 1/1; background: var(--ec-superficie); border-radius: var(--ec-radio); overflow: hidden; }
.ecom-gal-main img { width: 100%; height: 100%; object-fit: cover; }
.ecom-gal-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.ecom-gal-thumbs button {
  aspect-ratio: 1/1; padding: 0; cursor: pointer; overflow: hidden;
  background: var(--ec-superficie); border: 2px solid transparent; border-radius: var(--ec-radio-l);
}
.ecom-gal-thumbs button[aria-pressed="true"] { border-color: var(--ec-primary); }
.ecom-gal-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.ecom-compra { padding-top: 4px; }
@media (min-width: 1024px) { .ecom-compra { position: sticky; top: var(--ec-sticky-top); } }
.ecom-compra-marca { font: 700 11px/1 var(--ec-fuente); letter-spacing: .16em; text-transform: uppercase; color: var(--ec-primary); display: inline-flex; gap: 5px; align-items: center; }
.ecom-compra h1 { margin: 8px 0 10px; }
.ecom-rating { display: flex; gap: 7px; align-items: center; font-size: 13px; color: var(--ec-texto-2); margin-bottom: 12px; }
.ecom-rating-s { display: flex; gap: 2px; color: #E0A100; }
.ecom-precio { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.ecom-precio b { font: 800 26px/1 var(--ec-fuente); }
.ecom-precio s { font: 500 15px/1 var(--ec-fuente); color: var(--ec-texto-2); }
.ecom-stock { display: inline-flex; gap: 7px; align-items: center; font: 600 13px/1 var(--ec-fuente); margin-bottom: 16px; }
.ecom-stock i { width: 8px; height: 8px; border-radius: 50%; background: var(--ec-ok); flex: none; }
.ecom-stock--out { color: var(--ec-texto-2); }
.ecom-stock--out i { background: var(--ec-texto-2); }
.ecom-stock--bajo { color: var(--ec-warn); }
.ecom-stock--bajo i { background: var(--ec-warn); }

.ecom-var { margin-bottom: 16px; }
.ecom-var-hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ecom-var-hd .ecom-lbl { margin: 0; }
.ecom-var-hd b { font-size: 13px; }
.ecom-var-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.ecom-var-o {
  position: relative; cursor: pointer; background: #fff; color: var(--ec-texto);
  border: 1.5px solid var(--ec-borde); border-radius: var(--ec-radio-l);
  padding: 10px 14px; font: 600 13px/1.3 var(--ec-fuente); text-align: left; min-width: 78px;
}
.ecom-var-o small { display: block; font-weight: 500; color: var(--ec-texto-2); margin-top: 3px; font-size: 11px; }
.ecom-var-o[aria-pressed="true"] { border-color: var(--ec-primary); background: var(--ec-pink-pale); color: var(--ec-primary); border-width: 2px; }
.ecom-var-o[disabled] { cursor: not-allowed; color: var(--ec-texto-2); overflow: hidden; }
.ecom-var-o[disabled]::after {
  content: ''; position: absolute; left: -10%; right: -10%; top: 50%; height: 1.5px;
  background: var(--ec-texto-2); transform: rotate(-8deg);
}

/* Selector de cantidad: un solo componente, usado en PDP y carrito.
   El prototipo lo duplicaba en MaquillajePDP con codigo distinto; aqui es uno. */
.ecom-qty { display: inline-flex; align-items: stretch; border: 1.5px solid var(--ec-borde); border-radius: var(--ec-radio-l); overflow: hidden; background: #fff; }
.ecom-qty button { width: 38px; background: none; border: 0; cursor: pointer; font-size: 17px; color: var(--ec-texto); display: flex; align-items: center; justify-content: center; }
.ecom-qty button:hover:not([disabled]) { background: var(--ec-pink-pale); color: var(--ec-primary); }
.ecom-qty button[disabled] { color: var(--ec-borde); cursor: not-allowed; }
.ecom-qty output, .ecom-qty input {
  width: 42px; text-align: center; font: 700 14px/1 var(--ec-fuente);
  border-left: 1.5px solid var(--ec-borde); border-right: 1.5px solid var(--ec-borde);
  border-top: 0; border-bottom: 0; background: #fff; min-height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.ecom-qty--sm button { width: 32px; }
.ecom-qty--sm output { width: 34px; min-height: 34px; font-size: 13px; }

.ecom-cta { display: flex; gap: 10px; align-items: stretch; margin: 18px 0 14px; }
.ecom-cta .ecom-btn { flex: 1; }
/* Confidence strip bajo el CTA */
.ecom-conf { border-top: 1px solid var(--ec-borde-suave); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.ecom-conf div { display: flex; gap: 9px; align-items: center; font-size: 13px; color: var(--ec-texto); }
.ecom-conf svg { flex: none; color: var(--ec-primary); }
.ecom-conf a { color: var(--ec-primary); text-decoration: underline; font-weight: 600; }

/* Acordeon nativo de Divi, revestido.
   Divi ya da el comportamiento single-open, asi que no hay JS propio aqui. */
.ecom-page .et_pb_accordion .et_pb_toggle { background: none; border: 0; border-bottom: 1px solid var(--ec-borde-suave); padding: 0; margin: 0; }
.ecom-page .et_pb_accordion .et_pb_toggle_title {
  font: 700 15px/1.35 var(--ec-fuente) !important; color: var(--ec-texto) !important;
  padding: 17px 34px 17px 0 !important; cursor: pointer; position: relative;
}
.ecom-page .et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title { color: var(--ec-primary) !important; }
.ecom-page .et_pb_accordion .et_pb_toggle_title::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.ecom-page .et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title::after { transform: translateY(-30%) rotate(225deg); }
.ecom-page .et_pb_accordion .et_pb_toggle_content { padding: 0 0 18px !important; font-size: 14px; color: var(--ec-texto); }
.ecom-page .et_pb_accordion .et_pb_toggle_content ul { margin: 0; padding-left: 0; list-style: none; }
.ecom-page .et_pb_accordion .et_pb_toggle_content li { padding: 5px 0 5px 24px; position: relative; }
.ecom-page .et_pb_accordion .et_pb_toggle_content li::before {
  content: ''; position: absolute; left: 3px; top: 11px; width: 10px; height: 5px;
  border-left: 2px solid var(--ec-primary); border-bottom: 2px solid var(--ec-primary);
  transform: rotate(-45deg);
}
.ecom-page .et_pb_accordion .et_pb_toggle_content ol { margin: 0; padding-left: 20px; }
.ecom-page .et_pb_accordion .et_pb_toggle_content ol li { padding-left: 4px; }
.ecom-page .et_pb_accordion .et_pb_toggle_content ol li::before { content: none; }
.ecom-acc-caja { background: var(--ec-pink-pale); border-radius: var(--ec-radio-l); padding: 14px 16px; margin-bottom: 10px; }
.ecom-acc-ing { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--ec-borde-suave); }
.ecom-acc-ing:last-child { border-bottom: 0; }
.ecom-acc-ing i { width: 4px; align-self: stretch; border-radius: 2px; background: var(--ec-primary); flex: none; }
.ecom-acc-ing b { display: block; font-size: 14px; }
.ecom-acc-ing span { font-size: 13px; color: var(--ec-texto-2); }
.ecom-inci { font-size: 11px; line-height: 1.6; color: var(--ec-texto-2); word-break: break-word; }
.ecom-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13px; margin: 0; }
.ecom-dl dt { font-weight: 700; color: var(--ec-texto-2); }
.ecom-dl dd { margin: 0; }
.ecom-acc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.ecom-acc-cards div { background: var(--ec-superficie); border-radius: var(--ec-radio-l); padding: 12px; }
.ecom-acc-cards b { display: block; font-size: 11px; color: var(--ec-texto-2); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.ecom-disc { font-size: 11px; color: var(--ec-texto-2); margin-top: 10px; font-style: italic; }

/* CTA sticky de mobile */
.ecom-sticky {
  position: fixed; inset: auto 0 0 0; z-index: 55; background: #fff;
  border-top: 1px solid var(--ec-borde-suave); box-shadow: 0 -6px 22px rgba(0,0,0,.1);
  padding: 10px 16px; display: flex; gap: 12px; align-items: center;
  transform: translateY(100%); transition: transform .28s ease;
}
.ecom-sticky[data-on="1"] { transform: none; }
.ecom-sticky-i { flex: 1; min-width: 0; }
.ecom-sticky-i b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecom-sticky-i span { font-size: 12px; color: var(--ec-texto-2); }
.ecom-sticky .ecom-btn { flex: none; }
@media (min-width: 1024px) { .ecom-sticky { display: none; } }

/* Banda de marca al pie de la PDP */
.ecom-marca-cta {
  background: var(--ec-pink-pale); border-radius: var(--ec-radio); padding: 24px;
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
@media (min-width: 1024px) { .ecom-marca-cta { flex-direction: row; align-items: center; justify-content: space-between; padding: 28px 32px; } }
.ecom-marca-cta p { color: var(--ec-texto); font-size: 14px; margin: 6px 0 0; max-width: 62ch; }

/* ── Carrito y checkout: layout contenido + resumen ────────────────────── */
.ecom-2col { display: block; }
@media (min-width: 1024px) {
  .ecom-2col { display: grid; grid-template-columns: 1fr var(--ec-col-resumen); gap: 40px; align-items: start; }
}
.ecom-resumen-col { display: none; }
@media (min-width: 1024px) { .ecom-resumen-col { display: block; position: sticky; top: var(--ec-sticky-top); } }

.ecom-caja { background: #fff; border: 1px solid var(--ec-borde-suave); border-radius: var(--ec-radio); }
.ecom-caja-p { padding: 16px; }
@media (min-width: 1024px) { .ecom-caja-p { padding: 20px; } }

/* Linea de producto del carrito */
.ecom-ci { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--ec-borde-suave); }
.ecom-ci:last-child { border-bottom: 0; }
.ecom-ci-img { width: 78px; height: 78px; flex: none; border-radius: var(--ec-radio-l); overflow: hidden; background: var(--ec-superficie); position: relative; }
.ecom-ci-img img { width: 100%; height: 100%; object-fit: cover; }
.ecom-ci-tono { position: absolute; inset: auto 0 0 0; height: 6px; }
.ecom-ci-b { flex: 1; min-width: 0; }
.ecom-ci-b .ecom-card-marca { font-size: 9px; }
.ecom-ci-nom { font: 600 14px/1.35 var(--ec-fuente); margin: 2px 0 5px; display: block; }
.ecom-ci-var { display: flex; gap: 7px; align-items: center; font-size: 12px; color: var(--ec-texto-2); flex-wrap: wrap; }
.ecom-ci-var i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex: none; }
.ecom-ci-acc { display: flex; gap: 8px; align-items: center; margin-top: 11px; flex-wrap: wrap; }
.ecom-ci-lnk { background: none; border: 0; padding: 4px 2px; cursor: pointer; font: 600 12px/1 var(--ec-fuente); color: var(--ec-texto-2); display: inline-flex; gap: 5px; align-items: center; }
.ecom-ci-lnk:hover { color: var(--ec-primary); text-decoration: underline; }
.ecom-ci-lnk--rm { margin-left: auto; }
.ecom-ci-precio { text-align: right; flex: none; display: none; }
@media (min-width: 640px) { .ecom-ci-precio { display: block; } }
.ecom-ci-precio b { font: 800 15px/1 var(--ec-fuente); display: block; }
.ecom-ci-precio s { font: 500 12px/1 var(--ec-fuente); color: var(--ec-texto-2); }
.ecom-ci-precio span { display: block; font-size: 11px; color: var(--ec-texto-2); margin-top: 4px; }
.ecom-ci-sub { font: 700 13px/1 var(--ec-fuente); margin-top: 10px; }
@media (min-width: 640px) { .ecom-ci-sub { display: none; } }
/* Avisos por linea que exige el PDF y el prototipo no tenia */
.ecom-ci-aviso {
  display: flex; gap: 7px; align-items: flex-start; font: 600 12px/1.4 var(--ec-fuente);
  border-radius: 8px; padding: 8px 10px; margin-top: 10px;
}
.ecom-ci-aviso--stock  { background: var(--ec-warn-bg); color: var(--ec-warn); }
.ecom-ci-aviso--precio { background: var(--ec-pink-pale); color: var(--ec-primary); }
.ecom-ci-aviso--out    { background: var(--ec-err-bg);  color: var(--ec-error); }

/* Resumen del pedido */
.ecom-res-l { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; }
.ecom-res-l span:first-child { color: var(--ec-texto-2); }
.ecom-res-l b { font-weight: 700; }
.ecom-res-l--ok b, .ecom-res-l--ok span:last-child { color: var(--ec-ok); }
.ecom-res-l--warn b, .ecom-res-l--warn span:last-child { color: var(--ec-warn); }
.ecom-res-l--pend span:last-child { color: var(--ec-texto-2); font-style: italic; }
.ecom-res-l--gift b { color: var(--ec-primary); }
.ecom-res-tot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1.5px solid var(--ec-borde-suave); margin-top: 8px; padding-top: 14px; }
.ecom-res-tot span { font: 700 15px/1 var(--ec-fuente); }
.ecom-res-tot b { font: 800 21px/1 var(--ec-fuente); color: var(--ec-primary); }
.ecom-res-nudge { background: var(--ec-superficie); border: 1px solid var(--ec-pink-pale); border-radius: var(--ec-radio-l); padding: 11px 13px; font-size: 12px; margin: 12px 0; }
.ecom-res-nudge--ok { background: var(--ec-ok-bg); border-color: var(--ec-ok); color: var(--ec-ok); font-weight: 700; }
.ecom-res-nudge-b { height: 4px; border-radius: 2px; background: var(--ec-borde-suave); margin-top: 8px; overflow: hidden; }
.ecom-res-nudge-b i { display: block; height: 100%; background: var(--ec-primary); transition: width .3s; }
.ecom-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; text-align: center; }
.ecom-trust div { font: 600 10px/1.3 var(--ec-fuente); color: var(--ec-texto-2); }
.ecom-trust svg { color: var(--ec-primary); margin: 0 auto 5px; display: block; }

/* Cupon (plegable y discreto, como pide el PDF) */
.ecom-cupon { border-top: 1px solid var(--ec-borde-suave); margin-top: 14px; padding-top: 12px; }
.ecom-cupon-h { width: 100%; background: none; border: 0; padding: 6px 0; cursor: pointer; display: flex; gap: 8px; align-items: center; font: 600 13px/1 var(--ec-fuente); color: var(--ec-texto-2); }
.ecom-cupon-h svg { flex: none; }
.ecom-cupon-b { display: none; padding-top: 10px; }
.ecom-cupon[data-open="1"] .ecom-cupon-b { display: block; }
.ecom-cupon-row { display: flex; gap: 8px; }
.ecom-cupon-row .ecom-f { flex: 1; margin: 0; }
.ecom-msg { display: none; font: 600 12px/1.4 var(--ec-fuente); margin-top: 8px; }
.ecom-msg[data-show="1"] { display: block; }
.ecom-msg--ok  { color: var(--ec-ok); }
.ecom-msg--err { color: var(--ec-error); }

/* Barra sticky inferior de mobile (carrito y checkout) */
.ecom-barra {
  position: fixed; inset: auto 0 0 0; z-index: 55; background: #fff;
  border-top: 1px solid var(--ec-borde-suave); box-shadow: 0 -6px 22px rgba(0,0,0,.12);
  padding: 11px 16px; display: flex; gap: 12px; align-items: center;
}
.ecom-barra-i { flex: 1; min-width: 0; }
.ecom-barra-i span { display: block; font-size: 11px; color: var(--ec-texto-2); }
.ecom-barra-i b { font: 800 18px/1.1 var(--ec-fuente); color: var(--ec-primary); }
/* El CTA no se comprime: a 360px "Continuar al checkout" se cortaba a la mitad.
   El texto de la barra es más corto que el del botón principal, a propósito. */
.ecom-barra .ecom-btn { flex: 0 0 auto; white-space: nowrap; padding: 0 16px; }
@media (max-width: 400px) { .ecom-barra .ecom-btn { font-size: 13px; padding: 0 12px; } }
@media (min-width: 1024px) { .ecom-barra { display: none; } }
/* Resumen colapsable de mobile */
.ecom-res-sm { border: 1px solid var(--ec-borde-suave); border-radius: var(--ec-radio); margin-bottom: 16px; }
@media (min-width: 1024px) { .ecom-res-sm { display: none; } }
.ecom-res-sm-h { width: 100%; background: none; border: 0; padding: 14px 16px; cursor: pointer; display: flex; align-items: center; gap: 10px; font: 700 14px/1 var(--ec-fuente); }
.ecom-res-sm-h b { margin-left: auto; color: var(--ec-primary); }
.ecom-res-sm-h svg { transition: transform .2s; flex: none; }
.ecom-res-sm[data-open="1"] .ecom-res-sm-h svg { transform: rotate(180deg); }
.ecom-res-sm-b { display: none; padding: 0 16px 16px; }
.ecom-res-sm[data-open="1"] .ecom-res-sm-b { display: block; }

/* Mini-linea de producto en el resumen */
.ecom-mini { display: flex; gap: 10px; align-items: center; padding: 7px 0; }
.ecom-mini-img { width: 44px; height: 44px; flex: none; border-radius: 8px; overflow: hidden; background: var(--ec-superficie); position: relative; }
.ecom-mini-img img { width: 100%; height: 100%; object-fit: cover; }
.ecom-mini-n { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 999px; background: var(--ec-primary); color: #fff; font: 700 10px/18px var(--ec-fuente); text-align: center; }
.ecom-mini-b { flex: 1; min-width: 0; font-size: 12px; }
.ecom-mini-b b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecom-mini-b span { color: var(--ec-texto-2); }
.ecom-mini-p { font: 700 13px/1 var(--ec-fuente); flex: none; }

/* ── Checkout ──────────────────────────────────────────────────────────── */
.ecom-ck-hd { background: #fff; border-bottom: 1px solid var(--ec-borde-suave); position: sticky; top: 0; z-index: 55; }
.ecom-ck-hd-bar { display: flex; align-items: center; gap: 12px; height: 56px; }
.ecom-ck-hd-bar .ecom-hd-logo { color: var(--ec-primary); }
.ecom-ck-seg { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; font: 600 12px/1 var(--ec-fuente); color: var(--ec-ok); }
.ecom-pasos { display: flex; align-items: center; gap: 4px; padding: 12px 0 14px; }
.ecom-paso { display: flex; align-items: center; gap: 8px; flex: none; }
.ecom-paso-n {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--ec-fuente); background: var(--ec-borde-suave); color: var(--ec-texto-2);
}
.ecom-paso-t { font: 600 12px/1 var(--ec-fuente); color: var(--ec-texto-2); display: none; }
@media (min-width: 640px) { .ecom-paso-t { display: block; } }
.ecom-paso[data-estado="actual"] .ecom-paso-n { background: var(--ec-primary); color: #fff; box-shadow: 0 0 0 3px var(--ec-pink-pale); }
.ecom-paso[data-estado="actual"] .ecom-paso-t { color: var(--ec-primary); font-weight: 700; }
.ecom-paso[data-estado="hecho"] .ecom-paso-n { background: var(--ec-ok); color: #fff; }
.ecom-paso[data-estado="hecho"] .ecom-paso-t { color: var(--ec-texto); }
.ecom-paso-l { flex: 1; height: 2px; background: var(--ec-borde-suave); min-width: 14px; }
.ecom-paso-l[data-on="1"] { background: var(--ec-ok); }
.ecom-paso-cnt { font: 600 12px/1 var(--ec-fuente); color: var(--ec-texto-2); margin-left: auto; flex: none; }
.ecom-ck-panel { display: none; }
.ecom-ck-panel[data-on="1"] { display: block; }
.ecom-ck-h2 { margin-bottom: 4px; }
.ecom-ck-sub { font-size: 13px; color: var(--ec-texto-2); margin-bottom: 18px; }

/* Tarjeta de metodo (entrega y pago) */
.ecom-met { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.ecom-met-c {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left;
  background: #fff; border: 2px solid var(--ec-borde-suave); border-radius: var(--ec-radio);
  padding: 14px; cursor: pointer; transition: border-color .15s, background .15s;
}
.ecom-met-c:hover { border-color: var(--ec-pink-mid); }
.ecom-met-c[aria-pressed="true"] { border-color: var(--ec-primary); background: var(--ec-pink-pale); }
.ecom-met-r { width: 20px; height: 20px; border-radius: 50%; flex: none; border: 2px solid var(--ec-borde); margin-top: 1px; position: relative; }
.ecom-met-c[aria-pressed="true"] .ecom-met-r { border-color: var(--ec-primary); }
.ecom-met-c[aria-pressed="true"] .ecom-met-r::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--ec-primary); }
.ecom-met-b { flex: 1; min-width: 0; }
.ecom-met-b b { display: block; font: 700 14px/1.3 var(--ec-fuente); }
.ecom-met-b span { display: block; font-size: 12px; color: var(--ec-texto-2); margin-top: 3px; }
.ecom-met-ico { flex: none; font-size: 19px; line-height: 1; }
.ecom-met-tag { flex: none; }
.ecom-cond { display: none; }
.ecom-cond[data-on="1"] { display: block; }
.ecom-nota {
  display: flex; gap: 10px; align-items: flex-start; border-radius: var(--ec-radio-l);
  padding: 12px 14px; font-size: 13px; line-height: 1.45; margin: 4px 0 16px;
}
.ecom-nota svg { flex: none; margin-top: 1px; }
.ecom-nota--info { background: var(--ec-superficie); color: var(--ec-texto); }
.ecom-nota--warn { background: var(--ec-warn-bg); color: var(--ec-warn); }
.ecom-nota--ok   { background: var(--ec-ok-bg); color: var(--ec-ok); }
.ecom-nota--err  { background: var(--ec-err-bg); color: var(--ec-error); }

/* Mapa (mock): el PDF lo marca DEFINIDO A NIVEL UX, el prototipo no lo tiene */
.ecom-mapa { border-radius: var(--ec-radio); overflow: hidden; border: 1px solid var(--ec-borde-suave); margin-bottom: 12px; }
.ecom-mapa-l {
  position: relative; height: 190px; cursor: crosshair;
  background:
    repeating-linear-gradient(0deg, #E9E4E6 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, #E9E4E6 0 1px, transparent 1px 28px),
    linear-gradient(160deg, #F3EFF1, #E8E2E5);
}
.ecom-mapa-via { position: absolute; background: #fff; }
.ecom-mapa-pin {
  position: absolute; width: 26px; height: 26px; margin: -26px 0 0 -13px;
  color: var(--ec-primary); cursor: grab; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
}
.ecom-mapa-pin:active { cursor: grabbing; }
.ecom-mapa-ft { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: #fff; border-top: 1px solid var(--ec-borde-suave); font-size: 12px; }
.ecom-mapa-ft b { color: var(--ec-primary); }
.ecom-mapa-ft .ecom-btn { margin-left: auto; }

/* Pago con QR */
.ecom-qr { text-align: center; background: var(--ec-superficie); border-radius: var(--ec-radio); padding: 22px 18px; }
.ecom-qr-img { width: 180px; height: 180px; margin: 0 auto 14px; background: #fff; border-radius: var(--ec-radio-l); padding: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.ecom-qr h3 { margin-bottom: 6px; }
.ecom-qr p { font-size: 13px; color: var(--ec-texto-2); max-width: 42ch; margin: 0 auto 14px; }
.ecom-qr p b { color: var(--ec-texto); }
.ecom-qr-t { display: inline-flex; gap: 7px; align-items: center; font: 700 13px/1 var(--ec-fuente); background: #fff; border-radius: 999px; padding: 8px 14px; margin-bottom: 14px; }
.ecom-qr-t--bajo { color: var(--ec-warn); }
.ecom-qr-est { display: inline-flex; gap: 8px; align-items: center; font: 700 12px/1 var(--ec-fuente); border-radius: 999px; padding: 8px 14px; margin-bottom: 16px; }
.ecom-qr-est--wait { background: var(--ec-warn-bg); color: var(--ec-warn); }
.ecom-qr-est--ok   { background: var(--ec-ok-bg);   color: var(--ec-ok); }
.ecom-qr-est i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: ecomPulse 1.4s ease-in-out infinite; }
@keyframes ecomPulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
.ecom-qr-acc { display: flex; flex-direction: column; gap: 9px; max-width: 320px; margin: 0 auto; }
.ecom-qr-fase { display: none; }
.ecom-qr-fase[data-on="1"] { display: block; }
.ecom-qr-ok-ico { width: 62px; height: 62px; border-radius: 50%; background: var(--ec-ok-bg); color: var(--ec-ok); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }

/* Gift card como SALDO, no como metodo de pago (ver ecom_tokens / plan §6) */
.ecom-gc-card {
  border-radius: var(--ec-radio); padding: 20px; color: #fff; margin-bottom: 14px;
  background: linear-gradient(135deg, var(--ec-primary), var(--ec-promo));
}
.ecom-gc-card span { font: 700 10px/1 var(--ec-fuente); letter-spacing: .16em; text-transform: uppercase; opacity: .9; }
.ecom-gc-card b { display: block; font: 800 26px/1 var(--ec-fuente); margin: 8px 0 4px; }
.ecom-gc-card small { font-size: 12px; opacity: .9; }
.ecom-gc-montos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.ecom-gc-montos .ecom-chip { justify-content: center; width: 100%; }

/* ── Confirmacion ──────────────────────────────────────────────────────── */
.ecom-ok-hero { text-align: center; padding: 8px 0 24px; }
.ecom-ok-ico { width: 78px; height: 78px; border-radius: 50%; background: var(--ec-pink-pale); color: var(--ec-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.ecom-ok-hero p { font-size: 14px; color: var(--ec-texto-2); max-width: 46ch; margin: 8px auto 16px; }
.ecom-ok-pedido { display: inline-flex; flex-direction: column; gap: 3px; background: var(--ec-superficie); border-radius: var(--ec-radio-l); padding: 12px 22px; }
.ecom-ok-pedido span { font: 700 10px/1 var(--ec-fuente); letter-spacing: .12em; text-transform: uppercase; color: var(--ec-texto-2); }
.ecom-ok-pedido b { font: 800 19px/1 var(--ec-fuente); color: var(--ec-primary); letter-spacing: .02em; }
.ecom-eta { display: flex; gap: 14px; align-items: flex-start; background: var(--ec-superficie); border-radius: var(--ec-radio); padding: 18px; }
.ecom-eta-ico { font-size: 26px; line-height: 1; flex: none; }
.ecom-eta b { display: block; margin-bottom: 4px; }
.ecom-eta p { font-size: 13px; color: var(--ec-texto-2); margin: 0; }

/* ── Buscador ──────────────────────────────────────────────────────────── */
.ecom-sb { position: relative; }
.ecom-sb input {
  width: 100%; height: 50px; padding: 0 44px 0 44px;
  font: 500 15px/1 var(--ec-fuente); color: var(--ec-texto);
  background: var(--ec-superficie); border: 1.5px solid var(--ec-borde); border-radius: var(--ec-radio);
}
.ecom-sb input:focus { background: #fff; border-color: var(--ec-primary); outline: none; box-shadow: 0 0 0 3px rgba(158,32,118,.14); }
.ecom-sb-l { position: absolute; left: 15px; top: 15px; color: var(--ec-primary); }
.ecom-sb-x { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--ec-borde-suave); cursor: pointer; display: none; align-items: center; justify-content: center; }
.ecom-sb[data-hay="1"] .ecom-sb-x { display: flex; }
.ecom-pred { border: 1px solid var(--ec-borde-suave); border-radius: var(--ec-radio); margin-top: 10px; overflow: hidden; display: none; }
.ecom-pred[data-on="1"] { display: block; }
.ecom-pred-g { border-bottom: 1px solid var(--ec-borde-suave); padding: 10px 14px; }
.ecom-pred-g:last-child { border-bottom: 0; }
.ecom-pred-g > b { display: block; font: 700 10px/1 var(--ec-fuente); letter-spacing: .12em; text-transform: uppercase; color: var(--ec-texto-2); margin-bottom: 6px; }
.ecom-pred-i { display: flex; gap: 10px; align-items: center; padding: 8px 4px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.ecom-pred-i:hover { background: var(--ec-pink-pale); }
.ecom-pred-i img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; background: var(--ec-superficie); flex: none; }
.ecom-pred-i mark { background: none; color: var(--ec-primary); font-weight: 800; }
.ecom-pred-i .ecom-mini-p { margin-left: auto; }

/* ── Toast ─────────────────────────────────────────────────────────────── */
/* Los avisos son la capa de mas arriba, por encima del drawer (10000). Estaban en
   120 y al subir el drawer quedaron debajo: un aviso lanzado con el drawer abierto
   era invisible. Y ahi es donde mas falta hace, porque el error de "no se pudieron
   cargar los productos" salta justo al filtrar, que es lo que se hace dentro del
   drawer en movil. */
.ecom-toasts { position: fixed; z-index: 10100; inset: auto 12px 84px 12px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
@media (min-width: 640px) { .ecom-toasts { inset: 84px 16px auto auto; width: 330px; } }
.ecom-toast {
  background: #fff; border-radius: var(--ec-radio); box-shadow: 0 10px 34px rgba(0,0,0,.18);
  overflow: hidden; pointer-events: auto; animation: ecomToast .26s ease both;
}
@keyframes ecomToast { from { opacity: 0; transform: translateY(14px) scale(.97) } to { opacity: 1; transform: none } }
.ecom-toast-b { height: 3px; background: var(--ec-pink-pale); }
.ecom-toast-b i { display: block; height: 100%; background: var(--ec-primary); animation: ecomShrink 2.8s linear forwards; }
@keyframes ecomShrink { from { width: 100% } to { width: 0 } }
.ecom-toast-c { padding: 13px 14px; }
.ecom-toast-h { display: flex; gap: 8px; align-items: center; font: 700 13px/1.3 var(--ec-fuente); margin-bottom: 10px; }
.ecom-toast-h svg:first-child { color: var(--ec-ok); flex: none; }
.ecom-toast-x { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--ec-texto-2); padding: 2px; flex: none; }
.ecom-toast .ecom-btn { width: 100%; margin-top: 10px; }

/* ── Selector de estados (herramienta de revision, no parte del diseno) ── */
.ecom-estados {
  /* En móvil se sube por encima de la barra fija de compra, que ocupa el borde
     inferior: si no, el botón de revisión tapaba el CTA. */
  position: fixed; z-index: 130; right: 12px; bottom: 88px;
  font: 500 12px/1 var(--ec-fuente); color: #fff;
}
@media (min-width: 1024px) { .ecom-estados { bottom: 12px; } }
.ecom-estados-t {
  background: #1B1B1B; color: #FFD6E7; border: 0; border-radius: 999px;
  padding: 10px 15px; cursor: pointer; font: 700 11px/1 var(--ec-fuente);
  letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.ecom-estados-m { display: none; background: #1B1B1B; border-radius: var(--ec-radio-l); padding: 12px; margin-bottom: 8px; width: 232px; box-shadow: 0 10px 34px rgba(0,0,0,.34); }
.ecom-estados[data-open="1"] .ecom-estados-m { display: block; }
.ecom-estados-m b { display: block; font: 700 10px/1 var(--ec-fuente); letter-spacing: .12em; text-transform: uppercase; color: #FFD6E7; margin: 4px 0 8px; }
.ecom-estados-m button {
  display: block; width: 100%; text-align: left; background: rgba(255,255,255,.09);
  color: #fff; border: 0; border-radius: 8px; padding: 9px 11px; margin-bottom: 6px;
  cursor: pointer; font: 500 12px/1.3 var(--ec-fuente);
}
.ecom-estados-m button:hover { background: rgba(255,255,255,.2); }
.ecom-estados-m button[data-on="1"] { background: var(--ec-primary); font-weight: 700; }

/* ── Utilidades ────────────────────────────────────────────────────────── */
.ecom-hide { display: none !important; }
.ecom-muted { color: var(--ec-texto-2); font-size: 13px; }
.ecom-center { text-align: center; }
.ecom-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ecom-sp { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .ecom-page *, .ecom-page *::before, .ecom-page *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ── Bandas: espaciado y ancho ─────────────────────────────────────────────
   .et_pb_section quedó con padding 0 en el reset, así que el aire vertical lo
   ponen estas clases. Se aplican a la SECCIÓN, no al contenido, para que en el
   Visual Builder se puedan reordenar bandas sin arrastrar márgenes. */
.ecom-page .ecom-sec-pad  > .et_pb_row { padding: 20px 0 8px; }
.ecom-page .ecom-sec-pad2 > .et_pb_row { padding: 8px 0 28px; }

/* El acordeón de la PDP son módulos NATIVOS de Divi, así que no se puede envolver
   en un .ecom-wrap propio: el ancho máximo se aplica a la fila de la sección. */
.ecom-page .ecom-acc-sec > .et_pb_row {
  max-width: var(--ec-ancho); margin: 0 auto; padding: 4px 16px 8px;
}
@media (min-width: 1024px) {
  .ecom-page .ecom-acc-sec > .et_pb_row { padding: 4px 32px 8px; }
  /* En desktop el acordeón se limita para que las líneas no queden kilométricas */
  .ecom-page .ecom-acc-sec .et_pb_accordion { max-width: 760px; }
}
.ecom-page .ecom-acc { border-top: 1px solid var(--ec-borde-suave); }

/* La card entera es un enlace; hereda color y no debe subrayar. */
.ecom-card-link { display: block; color: inherit; text-decoration: none; }
.ecom-card-link:focus-visible { outline-offset: 4px; border-radius: var(--ec-radio); }

/* La fila de nav de escritorio no cabe justo a 1024px: 8 categorías + Descubrir
   + Gift Cards desbordan el ancho (lo detectó la prueba de navegador a 1024px).
   Se deja scrollear en horizontal en la franja 1024–1200px en lugar de recortar
   etiquetas o de mover el breakpoint, que rompería el diseño en otro sitio. */
.ecom-hd-nav {
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.ecom-hd-nav::-webkit-scrollbar { display: none; }
.ecom-hd-nav > * { scroll-snap-align: start; }
@media (min-width: 1200px) { .ecom-hd-nav { overflow-x: visible; } }

/* Header actual del sitio (variante B de la comparativa). Va en CSS y no en
   estilos en línea porque la convención del proyecto es que el estado y la
   apariencia viven en clases, no en atributos style. */
.ecom-hd--actual { background: var(--ec-blanco); border-bottom: 1px solid var(--ec-borde-suave); }
.ecom-hd--actual .ecom-hd-logo { color: var(--ec-primary); }
.ecom-hd--actual a, .ecom-hd--actual button { color: var(--ec-texto); }
.ecom-hd--actual .ecom-hd-nav { border-top: 0; }
.ecom-hd--actual .ecom-hd-nav a:hover { background: var(--ec-pink-pale); color: var(--ec-primary); }
.ecom-hd--actual .ecom-btn--p { color: #fff; margin-left: 12px; }

/* Rótulo de variante en la comparativa de headers. */
.ecom-rotulo {
  background: #1B1B1B; color: #FFD6E7; padding: 10px 16px;
  font: 700 11px/1 var(--ec-fuente); letter-spacing: .12em; text-transform: uppercase;
}

/* Índice: dos columnas de tarjetas en pantallas anchas. */
@media (min-width: 900px) {
  .ecom-indice-grid { grid-template-columns: 1fr 1fr !important; }
}
.ecom-indice-grid a:hover { border-color: var(--ec-primary); }

/* Toda tabla ancha tiene que scrollear DENTRO de su contenedor: el body nunca
   debe scrollear en horizontal. Lo detectó la prueba de navegador a 360px, en la
   tabla de correcciones de contraste del sistema de diseño. */
.ecom-tabla { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ecom-tabla table { min-width: 560px; border-collapse: collapse; width: 100%; font-size: 13px; }
.ecom-tabla th { text-align: left; padding: 10px; }
.ecom-tabla td { padding: 10px; vertical-align: top; }
.ecom-tabla tbody tr { border-top: 1px solid var(--ec-borde-suave); }
.ecom-mal  { color: var(--ec-error); font-weight: 700; }
.ecom-bien { color: var(--ec-ok);    font-weight: 700; }
.ecom-pastilla { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; }

/* Entre 1024 y 1279px las 8 categorías + Descubrir + Gift Cards no caben a tamaño
   normal, y aunque la fila scrollea, visualmente se lee como un corte. Se compacta
   el tipo y el espaciado en esa franja; el scroll queda solo como red de seguridad. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ecom-hd-nav a, .ecom-hd-nav button { padding: 8px 7px; font-size: 12px; }
  .ecom-hd-sep { margin: 0 4px; }
  .ecom-hd-gift { gap: 4px; }
}
/* A 1024px exactos seguía sin caber (medido: 798px de contenido en 755px de
   caja). En esa franja se quitan los separadores, que son decorativos, y se
   aprieta un poco más el tipo. */
@media (min-width: 1024px) and (max-width: 1119px) {
  .ecom-hd-nav a, .ecom-hd-nav button { padding: 8px 5px; font-size: 11.5px; }
  .ecom-hd-sep { display: none; }
  .ecom-hd-gift svg { display: none; }
}

/* Contenedor del panel de filtros. Lo señaló el verificador como clase sin regla:
   funcionaba por el display:block por defecto, pero una clase sin estilo es
   indistinguible de una clase mal escrita, así que se le da su regla real. */
.ecom-filtros { display: block; }
.ecom-filtros > .ecom-fg:first-of-type { border-top: 1px solid var(--ec-borde-suave); }
.ecom-plp-side .ecom-filtros { padding-right: 4px; }

/* Hueco que reserva la barra fija de compra en móvil, para que no tape el final
   del contenido. Lo emite el propio componente (ecom_shell.sticky_pdp). */
.ecom-sticky-hueco { height: 76px; }
@media (min-width: 1024px) { .ecom-sticky-hueco { display: none; } }

/* Chips de variante sin el precio repetido, en móvil.
 *
 * Cuando todas las opciones valen lo mismo —nueve fórmulas a Bs 72— el precio
 * debajo de cada chip no informa: lo repite nueve veces y se come 272 px de alto,
 * que empujan el «Agregar al carrito» fuera de la pantalla. La página lo marca
 * con `data-precio-uniforme` sólo cuando de verdad son todos iguales.
 *
 * Los AGOTADOS conservan su etiqueta: ahí el texto sí dice algo. */
@media (max-width: 1023px) {
  [data-ec-variantes][data-precio-uniforme] .ecom-var-o:not([disabled]) small { display: none; }
  [data-ec-variantes][data-precio-uniforme] .ecom-var-o:not([disabled]) { padding-top: 10px; padding-bottom: 10px; }
}