/**
 * REVISIÓN MÓVIL — hoja de pulidos (theme 0.9.119)
 *
 * POR QUÉ EXISTE ESTE ARCHIVO. Los arreglos de la revisión móvil tienen que
 * PISAR reglas base repartidas en varias hojas (shop.css, product.css,
 * components.css) y, sobre todo, las que Astra impone con !important. Una media
 * query NO añade especificidad: si la regla base vive en una hoja que carga
 * DESPUÉS, gana ella aunque la mía sea más específica en apariencia.
 *
 * Comprobado listando los <link> en vivo: el orden es tokens → fonts → base →
 * components → dkt-style → header → megamenu → footer → shop|product → cookies.
 * O sea `components.css` carga ANTES que `shop.css`: el bloque 2 vivía ahí y
 * la mitad de sus reglas perdían en las páginas de listado (lo delató la
 * medición en vivo DESPUÉS de desplegar, no la maqueta).
 *
 * Esta hoja se encola con prioridad 40 —después de todas, incluida cookies.css—
 * y se carga en TODAS las páginas del frontend, así que sirve de casa común
 * para los bloques de la revisión móvil.
 *
 * @package astra-dkt-store
 * @since   0.9.119
 */

/* ============================================================================
   0.9.117 · BLOQUE 1 DE LA REVISION MOVIL — ZONA DE EXCLUSION DEL FLOTANTE
   Medido en vivo el 01-sep antes de tocar nada. El boton flotante de WhatsApp
   (.dkt-wa-float, 60px, fixed abajo-derecha, z-index 99999) se montaba sobre
   DOS cosas que hay que poder pulsar:

     · el boton "Aceptar todas" del aviso de cookies (z-index 99998, o sea el
       flotante queda ENCIMA):  13% tapado a 360px · 30% a 390 · 27% a 414 ·
       8% a 1200.  A 390px los dos tercios derechos del boton ABREN WHATSAPP
       en vez de aceptar — y es la primerisima interaccion de un visitante.
     · el boton "Anadir al carrito" de la barra fija de la ficha
       (.dkt-stickybuy, z-index 50):  23% tapado a 360px · 20% a 390 ·
       18% a 414 · 7% a 760.

   SOLUCION SIN TOCAR EL MOTOR (regla 1: dkt-store-core es intacto). El FAB se
   pinta desde el plugin con un <style> en wp_head prioridad 100, o sea DESPUES
   de las hojas del theme: una regla `.dkt-wa-float` del theme perderia por
   orden. Con `body .dkt-wa-float` (0,1,1 contra 0,1,0) gana por especificidad,
   sin !important y sin tocar el plugin.

   La variable --dkt-fab-alto es la altura que el flotante OCUPA desde el borde
   inferior; el aviso de cookies se apoya sobre ella. Asi el calculo es uno solo
   y no hay numeros magicos repetidos. Nada depende de :has() ni de JS: es
   deterministico en todos los navegadores.
   ========================================================================== */
:root{ --dkt-fab-alto:80px }                                   /* 20 de piso + 60 del boton */

/* en la FICHA con barra fija de compra, el flotante sube por encima de la barra
   (la barra mide ~70px: body.single-product reserva padding-bottom:70px) */
@media (max-width:760px){
  body.single-product .dkt-wa-float{ bottom:84px }
  body.single-product{ --dkt-fab-alto:144px }                  /* 84 de piso + 60 del boton */
}

/* 0.9.193 (Ricardo, 14-sep): el aviso de cookies YA NO se apoya sobre el flotante
   ("se ve muy raro" en el celular). Vuelve a su sitio abajo del todo (cookies.css) y
   es el BOTON el que se esconde mientras el aviso o su panel esten visibles: la
   clase dkt-ck-abierto la pone un script en wp_head antes del primer pintado (sin
   cookie de consentimiento) y la quita cookies.js al decidir. Especificidad (0,1,1)
   + !important contra el <style> del motor (0,1,0), sin tocar el motor. */
html.dkt-ck-abierto .dkt-wa-float{ display:none !important }

/* ============================================================================
   0.9.118 · BLOQUE 2 DE LA REVISION MOVIL — LA TARJETA DE PRODUCTO
   Cuatro defectos que aparecian en 5 paginas a la vez (tienda, hormonales,
   profesionales y los "Destacados" de las dos fichas). Medido en vivo antes de
   tocar, a 360 y 390px:
     · el boton decia "Anadir / al / carrito" en TRES lineas — 12/12 tarjetas
     · "(IVA incluido)" se partia por dentro dejando "incluido)" huerfano
     · la etiqueta regulatoria tapaba hasta el 47% de la foto del producto
     · los botones de dos tarjetas vecinas quedaban a distinta altura

   VIVE AQUI Y NO EN shop.css A PROPOSITO: shop.css NO se carga en la ficha de
   producto (alli carga product.css), y las mismas tarjetas aparecen en el
   "Destacados" de las fichas. components.css carga en las dos. Comprobado
   listando los <link> de una categoria y de una ficha.

   LA CAUSA DEL BOTON NO ERA EL ANCHO: era el relleno. Astra impone
   `padding:12px 28px!important` y `font-size:15px!important` desde
   `.button, button:not(.toggle-on):not(.toggle-off), input[...]` (0,2,1). En
   una tarjeta de 148px, 56px de relleno lateral dejan 75px utiles para 17
   caracteres: imposible. Con una medida sana el texto entra en UNA linea sin
   bajar de 12,5px (piso de legibilidad en movil).
   ========================================================================== */

/* 1 · el CTA se ancla al fondo de la tarjeta -> las de una misma fila cuadran */
.dkt-pcard__cta{ margin-top:auto; padding-top:.7rem }

/* 2 · "(IVA incluido)" nunca se parte POR DENTRO; si no cabe, baja entero */
.dkt-pcard__price{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.3rem; row-gap:.1rem }
.dkt-pcard__price .woocommerce-price-suffix{ margin-left:0; white-space:nowrap }

@media(max-width:1024px){
  /* 3 · el boton recupera una medida sana (hay que vencer el !important de Astra:
        este selector es (0,4,2) contra el (0,2,1) del padre) */
  .woocommerce ul.products li.product .dkt-pcard__cta .button,
  .woocommerce ul.products li.product .dkt-pcard__cta .added_to_cart,
  .woocommerce-page ul.products li.product .dkt-pcard__cta .button,
  .woocommerce-page ul.products li.product .dkt-pcard__cta .added_to_cart{
    font-size:clamp(.8rem, 3.4vw, .875rem)!important;
    padding:.62rem .6rem!important;
    line-height:1.15!important;
    text-wrap:balance
  }
  /* 4 · la etiqueta deja de comerse la foto: se achica y la foto le cede sitio */
  .dkt-pcard .dkt-loop-badge{ left:8px; top:8px; font-size:.6rem; padding:.2rem .5rem; max-width:calc(100% - 16px) }
  .dkt-pcard__media{ padding:2.1rem .6rem .6rem }
  /* 5 · EL ANCHO QUE FALTABA: Astra le pone 16px de relleno lateral al <li>, o sea
        32px de una tarjeta de 169. Con el <li> a cero el boton pasa de 115 a 147px
        utiles y "Anadir al carrito" entra en UNA linea sin bajar de 12,8px. No se
        pierde nada visual: el relleno real lo ponen .dkt-pcard__media y __body.
        Lleva !important porque Astra lo impone con !important desde
        `.woocommerce ul.products li.product` (0,2,1): ahi la especificidad sola
        NO basta. De hecho el theme ya pedia padding:0 en su regla base y Astra
        se lo comia — esto restaura la intencion original. */
  .woocommerce ul.products li.product.dkt-pcard,
  .woocommerce-page ul.products li.product.dkt-pcard{ padding-left:0!important; padding-right:0!important }
  .dkt-pcard__body{ padding:.7rem .7rem .8rem }
}
/* la reticula se aprieta solo donde va a 2 columnas */
@media(max-width:760px){
  .woocommerce ul.products,.woocommerce-page ul.products{ gap:12px }
}
/* 6 · el "Destacados" de la FICHA iba en una reticula mas angosta (317px contra
      los 350 de un listado) porque .dkt-pfeat suma 16px de relleno a cada lado
      sobre los que ya pone el contenedor de Astra: por eso alli el boton seguia
      partiendose. En movil cede ese relleno y la tarjeta mide lo mismo que en
      un listado. */
@media(max-width:760px){
  .dkt-pfeat{ padding-left:0; padding-right:0 }
}

/* ============================================================================
   0.9.120 · BLOQUE 3 DE LA REVISION MOVIL — LO QUE NO PUEDE ESTAR EN VIVO
   Tres arreglos visuales; el cuarto (el aviso de privacidad en INGLES del
   registro de Mi Cuenta) es PHP y vive en inc/account.php.
   ========================================================================== */

/* 1 · REGISTRO MEDICO: el bloque de registro se salia de la pantalla y quedaba
      CORTADO. Medido a 390px: el bloque pedia 447px, o sea 57 de mas. Quien no
      dejaba encoger era la fila de botones sociales: `.socrow` es un grid de
      3 columnas y sus items, con min-width:auto, no bajan de su contenido
      (Google 98 + Facebook 117 + WhatsApp 123 + huecos = 357px minimos). Eso
      empujaba a .signup a 399 y a .wrap a 447. En pantallas angostas los tres
      botones se apilan: entran de sobra y ademas ganan area para el dedo. */
@media(max-width:430px){
  body.dkt-page-registro .socrow{ grid-template-columns:1fr }
  body.dkt-page-registro .socrow > *{ min-width:0 }
}

/* 2 · BIBLIOTECA PROFESIONAL: "Registrate para descargar" se salia de su boton
      punteado. El boton mide 141px y el texto pedia 159 con white-space:nowrap,
      asi que sobresalia 30px por la derecha en las 12 tarjetas. Se le permite
      envolver en dos lineas (el nowrap era lo que lo forzaba a desbordar). */
body.dkt-page-registro .mlock-btn{ white-space:normal; text-wrap:balance; line-height:1.25; padding:8px 8px; min-height:38px }

/* 3 · CARRITO VACIO: el "icono azul roto" junto a "Tu carrito esta vacio" no
      estaba roto — es el glifo de la tipografia de WooCommerce pintado en su
      AZUL de serie (#060097), que no existe en la paleta y por eso se lee como
      un cuadrito ajeno. Se pasa al vino de la marca, el mismo del borde y del
      texto de ese aviso. */
.woocommerce-info::before,
.woocommerce-message::before,
.cart-empty.woocommerce-info::before{ color:var(--dkt-vino,#5F0E39) }

/* ============================================================================
   0.9.122 · BLOQUE 4 DE LA REVISION MOVIL — EL PIE DE PAGINA
   Esta en las 9 paginas revisadas, asi que un arreglo aqui se nota en todo el
   sitio. Medido en vivo a 390px antes de tocar nada.
   ========================================================================== */

/* 1 · EL LOGO GIGANTE. Medido: 342x342px en una pantalla de 390 — el 88% del
      ancho; en el carrito el pie llegaba a 1.5 PANTALLAS de alto. En la PORTADA
      el mismo logo salia bien (96x96), y ahi estaba la pista: WooCommerce impone
      `.woocommerce img, .woocommerce-page img { max-width:100%; height:auto }`
      (0,2,1) y le gana al `.dkt-footer__logo { height:96px }` del theme (0,1,0).
      Como la portada NO lleva la clase `woocommerce-page` en el body, alli el
      logo conservaba su altura y en el resto del sitio se estiraba hasta llenar
      su contenedor. Se recupera con especificidad (0,3,0), sin !important.
      0.9.123: Ricardo lo sube de 96 a 116px ("un poco mas grande"). */
.dkt-footer .dkt-footer__brand .dkt-footer__logo{ height:116px; width:auto; max-width:none }

@media(max-width:760px){
  /* 2 · LOS ENLACES DEL PIE MEDIAN 19px DE ALTO y estaban pegados entre si. Son
        los seis legales que un usuario busca. La guia de accesibilidad pide 44px
        y asi se dejo en 0.9.122, pero Ricardo lo reviso en su telefono: "hay
        mucho espaciado, se ve muy feo". DECISION SUYA (0.9.123): 24px, que
        recupera el aspecto compacto y aun asi separa los enlaces lo justo para
        no pulsar el de al lado. El area horizontal sigue siendo toda la columna
        (~340px), asi que el objetivo tactil no queda tan chico como sugiere el
        numero: lo unico ajustado es el alto. */
  .dkt-footer .dkt-footer__col a{ display:flex; align-items:center; min-height:24px }

  /* 3 · LOS ICONOS SOCIALES median 32px con 8px de separacion — chicos y
        pegados. Suben a 44 y respiran; la banda ya envuelve sola si no caben. */
  .dkt-footer .dkt-footer__socs{ gap:10px; flex-wrap:wrap; justify-content:center }
  .dkt-footer .dkt-footer__soc{ width:44px; height:44px }
  .dkt-footer .dkt-footer__soc svg{ width:18px; height:18px }

  /* 4 · EL SEPARADOR COLGANDO. `.dkt-footer__rdiv` es la barrita vertical que
        separa los grupos de marcas; en escritorio ordena, pero al envolverse la
        banda en movil queda una raya suelta flotando en el vacio. Se oculta
        SOLO en movil: en escritorio sigue haciendo su trabajo. */
  .dkt-footer .dkt-footer__rdiv{ display:none }

  /* la banda de marcas se centra y respira al envolverse */
  .dkt-footer .dkt-footer__redes{ gap:18px; row-gap:16px }
}

/* ============================================================================
   0.9.123 · BLOQUE 5 DE LA REVISION MOVIL — LA PORTADA Y EL MENU DE ANCLAS
   ========================================================================== */

/* 1 · LA PARRILLA "TODOS NUESTROS METODOS" NO SE ADAPTABA. Las 9 tarjetas
      quedaban en UNA sola columna de 184px centrada, con ~71px de vacio a cada
      lado, y obligaban a ~1.650px de scroll en la portada. La causa es un ancho
      FIJO: `.dkt-met{width:184px}` sin ninguna media query de movil (verificado
      en methods.css, cuya unica @media es la de reduced-motion). A 390px el
      contenedor deja 342 utiles y dos tarjetas exigirian 388, asi que solo
      entraba una y, al no necesitar encoger, conservaba sus 184px.
      Con el ancho en porcentaje entran DOS por fila y la seccion mide la mitad. */
@media(max-width:760px){
  .dkt-methods__grid .dkt-met{ width:calc(50% - 10px); padding:22px 10px 20px }
  .dkt-methods__grid{ gap:14px }
  .dkt-methods{ padding-top:48px; padding-bottom:52px }
  .dkt-met__ico{ height:52px }
  .dkt-met__label{ font-size:.82rem }
}

/* 2 · RESPALDO DE LAS ANCLAS. Al retirar el handler de jQuery (ver
      assets/js/dkt-scripts.js) la navegacion vuelve a ser NATIVA: la URL cambia
      de #ancla y el navegador respeta el scroll-margin-top de cada seccion.
      Las landings y la Home ya tienen el suyo; esto es solo la red para las
      paginas que no lo declaran. Va con :where() a PROPOSITO: especificidad
      CERO, asi que cualquier regla existente le gana y no se pisa el --al-off
      de Andalan ni el --dkt-sticky-offset de la Home. */
:where(:target){ scroll-margin-top:var(--dkt-sticky-offset, 108px) }

/* ============================================================================
   0.9.124 · BLOQUE 6 DE LA REVISION MOVIL — PULIDO FINO
   De los 53 hallazgos menores de la auditoria, la mayoria ya cayeron en los
   bloques 1-5 (el "(IVA incluido)", las tarjetas descuadradas, los separadores
   del pie, los iconos sociales). Se comprobaron uno por uno en vivo y varios NO
   se reproducen. Aqui van los que SI quedaban abiertos y son defectos
   objetivos: los del diseno de las dos landings NO entran, porque Ricardo los
   aprueba pantalla por pantalla en su propia ronda.
   ========================================================================== */

/* 1 · EL EMOJI DE LA ETIQUETA DE RECETA. La etiqueta decia "📜 Requiere receta
      medica" y WordPress convierte ese caracter en una IMAGEN REMOTA suya
      (s.w.org/images/core/emoji/…/1f4dc.svg): un pergamino amarillo que no
      existe en la paleta, servido ademas desde un dominio externo en cada
      carga. Se oculta la imagen en NUESTRAS etiquetas; el texto queda intacto.
      (El emoji viene del motor, que es intacto: por eso se resuelve por CSS.) */
.dkt-loop-badge img.emoji,
.dkt-category-badge img.emoji,
.dkt-single-badge img.emoji{ display:none!important }   /* !important obligado: WordPress core impone `img.wp-smiley, img.emoji{display:inline!important}` */

/* 2 · EL SELECTOR DE ORDEN NO PARECIA UN DESPLEGABLE. Lleva appearance:none, que
      mata la flecha nativa, y no se le puso ninguna: se leia como un campo de
      texto vacio y nadie lo tocaba. Se le devuelve el chevron (SVG embebido, sin
      peticion extra) y sitio para el. */
.woocommerce-ordering select.orderby{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F0E39' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:14px;
  padding-right:34px;
}

/* 3 · LA FILA DE FILTROS SE CORTABA SIN AVISAR. `nav.dkt-subnav` mide 350px de
      ancho y 849 de contenido: se desliza, pero no habia ninguna senal de ello
      (sin relleno final ni desvanecido), asi que el ultimo chip quedaba tajado
      contra el borde y el usuario creia que eso era todo. Se anade el
      desvanecido y aire al final para que se lea como "hay mas". */
@media(max-width:1024px){
  .dkt-subnav{
    padding-right:28px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent 100%);
            mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent 100%);
  }
}

/* 4 · EL SELECTOR DE CANTIDAD parecia un campo suelto pegado al boton: borde casi
      invisible (#F2F5F7 sobre blanco) y esquinas rectas contra un boton de radio
      6px. Se le da el borde y el radio de la ficha para que se lean como pareja.
      (Los controles - / + necesitan markup: quedan anotados, no son CSS.) */
.woocommerce div.product form.cart .quantity input.qty{
  border:1px solid var(--dkt-line,#ECD9DE); border-radius:6px; height:40px;
}
.woocommerce div.product form.cart .quantity input.qty:focus{
  border-color:var(--dkt-magenta,#A50050); outline:none; box-shadow:0 0 0 3px rgba(165,0,80,.12);
}

/* 5 · MI CUENTA: los campos no parecian campos (borde #ECD9DE sobre un fondo
      #FBF4F2 casi del mismo tono) y el "Recuerdame" era el checkbox nativo de
      13px, imposible de acertar. */
.woocommerce-account .woocommerce form .form-row input.input-text,
.woocommerce-account .woocommerce form input.woocommerce-Input--text,
.woocommerce-account .woocommerce form input.input-text{
  border:1.5px solid #D9BCC7; background:#fff;   /* la linea sube de tono: el #ECD9DE original sobre el fondo crema no se veia */
}
.woocommerce-account .woocommerce form .form-row input.input-text:focus{
  border-color:var(--dkt-magenta,#A50050); outline:none; box-shadow:0 0 0 3px rgba(165,0,80,.12);
}
.woocommerce-account .woocommerce-form__label-for-checkbox{ display:flex; align-items:center; gap:10px; cursor:pointer }
.woocommerce-account input[type="checkbox"].woocommerce-form__input-checkbox{
  appearance:none; -webkit-appearance:none;
  width:20px; height:20px; flex:0 0 auto; margin:0;
  border:1.5px solid var(--dkt-line,#ECD9DE); border-radius:5px; background:#fff; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.woocommerce-account input[type="checkbox"].woocommerce-form__input-checkbox:checked{
  background:var(--dkt-magenta,#A50050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color:var(--dkt-magenta,#A50050);
}
.woocommerce-account input[type="checkbox"].woocommerce-form__input-checkbox:focus-visible{
  outline:2px solid var(--dkt-magenta,#A50050); outline-offset:2px;
}

/* 6 · EL LOGO DE LA CABECERA IBA DESCOLGADO. Medido a 390px: arrancaba en x=70
      mientras el contenido de la pagina arranca en 0 — un `margin-left:45px`
      heredado que en movil no tiene sentido y dejaba un vacio raro a su
      izquierda con los iconos apretados al otro extremo. El margen vive en
      NUESTRA clase `.dkt-header__logo`, no en la de Astra. */
@media(max-width:760px){
  .dkt-header .dkt-header__logo{ margin-left:0 }
}

/* ============================================================================
   0.9.125 · MENU MOVIL PREMIUM — el cajon de la hamburguesa, hecho de nuevo
   Lo encontro Ricardo en su telefono. Hasta 0.9.124 la hamburguesa abria el
   megamenu de ESCRITORIO volcado en una columna: los 27 enlaces desplegados a
   la vez, con las pildoras blancas heredadas del hover, alineaciones mezcladas
   (unos items centrados y otros a la izquierda), el enlace "Conoce el mundo
   Prudence" en un rosa que no se leia sobre el magenta, y sin velo, sin cierre
   y sin animacion.
   Ahora es un CAJON lateral con acordeon: 4 mundos cerrados de entrada, que
   caben en una pantalla. El markup lo sigue mandando WordPress; esto es capa
   visual + assets/js/menu-movil.js. Escritorio intacto.
   ========================================================================== */
@media (max-width:1024px){

  /* ── el cajon ────────────────────────────────────────────────────────── */
  .dkt-header .dkt-header__nav{
    position:fixed; top:0; right:0; bottom:0; left:auto;
    width:min(88vw, 380px); max-width:none;
    display:flex; flex-direction:column;
    padding:0; border-radius:0;
    background:linear-gradient(168deg,#A50050 0%,#7C0C44 46%,#570C33 100%);
    box-shadow:-18px 0 46px -18px rgba(30,0,16,.55);
    z-index:1200;
    transform:translateX(100%);
    transition:transform .32s cubic-bezier(.22,.61,.36,1);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .dkt-header .dkt-header__nav.is-open{ display:flex; transform:translateX(0) }

  .dkt-mm-velo{
    position:fixed; inset:0; z-index:1199;
    background:rgba(31,3,18,.58);
    opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s;
  }
  .dkt-mm-velo.is-open{ opacity:1; visibility:visible }
  html.dkt-mm-abierto{ overflow:hidden }
  /* ⚠️ EL CAJON VIVE DENTRO DE LA CABECERA, que es `position:sticky; z-index:100`
     y por tanto crea su PROPIO contexto de apilado: el z-index:1200 del cajon se
     mide DENTRO de ese contexto, asi que frente a la pagina seguia valiendo 100
     y quedaba POR DEBAJO del velo (1199) — se veia oscurecido y apagado. Mientras
     el menu esta abierto se eleva la cabecera entera por encima del velo. */
  html.dkt-mm-abierto .dkt-header{ z-index:1300 }

  /* ── cabecera del cajon ──────────────────────────────────────────────── */
  .dkt-mm-cab{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 18px 14px; border-bottom:1px solid rgba(255,255,255,.16);
    position:sticky; top:0; z-index:2; flex:0 0 auto;
    background:linear-gradient(180deg,#A50050 70%,rgba(165,0,80,0) 100%);
  }
  .dkt-mm-cab__t{
    font-family:var(--dkt-font-titles,'Poppins',sans-serif); font-weight:600;
    font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.72);
  }
  .dkt-header .dkt-mm-cerrar,
  .dkt-header button.dkt-mm-cerrar{
    width:44px; height:44px; margin:-8px -8px -8px 0; padding:0 !important;
    background:none !important; background-color:transparent !important;
    border:0 !important; border-radius:50% !important; cursor:pointer;
    box-shadow:none !important; min-height:0 !important;
    display:grid; place-items:center; color:#fff;
  }
  .dkt-mm-cerrar svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round }
  .dkt-mm-cerrar:active{ background:rgba(255,255,255,.14) }
  .dkt-mm-cerrar:focus-visible{ outline:2px solid #fff; outline-offset:2px }

  /* ── la lista ────────────────────────────────────────────────────────── */
  .dkt-header .dkt-header__nav .dkt-menu{
    flex-direction:column; align-items:stretch; gap:0;
    padding:6px 0 4px; margin:0;
  }
  .dkt-header .dkt-header__nav .dkt-menu > .menu-item{
    position:relative; border-bottom:1px solid rgba(255,255,255,.1);
  }
  /* fila de MUNDO: nombre + icono, con sitio para el chevron */
  .dkt-header .dkt-header__nav .dkt-menu > .menu-item > a{
    display:flex; align-items:center; gap:12px;
    min-height:56px; padding:6px 60px 6px 18px;
    font-family:var(--dkt-font-titles,'Poppins',sans-serif); font-weight:600;
    font-size:1.02rem; line-height:1.25; color:#fff; text-decoration:none;
  }
  .dkt-header .dkt-header__nav .dkt-menu > .menu-item > a .dkt-mi-ico{
    width:22px; height:22px; flex:0 0 auto; opacity:.9;
  }
  .dkt-header .dkt-header__nav .dkt-menu > .menu-item > a:active{ background:rgba(255,255,255,.08) }

  /* el chevron: boton propio, para que el enlace del mundo siga funcionando */
  /* Astra pinta TODOS los <button> con su fondo y su relleno, y con !important
     (`.button, button:not(.toggle-on):not(.toggle-off), input[...]`), asi que el
     chevron salia como un bloque magenta claro pegado al borde. Se neutraliza. */
  .dkt-header .dkt-header__nav .dkt-mm-exp,
  .dkt-header .dkt-header__nav button.dkt-mm-exp{
    position:absolute; top:0; right:0; width:56px; height:56px;
    background:none !important; background-color:transparent !important;
    border:0 !important; padding:0 !important; margin:0 !important;
    box-shadow:none !important; border-radius:0 !important; cursor:pointer;
    display:grid; place-items:center; color:rgba(255,255,255,.8);
    min-height:0 !important; line-height:1 !important;
  }
  .dkt-mm-exp svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2;
    stroke-linecap:round; stroke-linejoin:round; transition:transform .26s cubic-bezier(.22,.61,.36,1) }
  .dkt-mm-open > .dkt-mm-exp svg{ transform:rotate(180deg) }
  .dkt-mm-exp:focus-visible{ outline:2px solid #fff; outline-offset:-4px; border-radius:8px }

  /* ── los hijos: cerrados de entrada ──────────────────────────────────── */
  .dkt-header .dkt-header__nav .dkt-menu > .menu-item > .sub-menu{
    display:none;
    position:static; opacity:1; visibility:visible; transform:none;
    background:rgba(0,0,0,.14); box-shadow:none; border:0; border-radius:0;
    margin:0; padding:6px 0 10px 0; width:auto; max-width:none;
  }
  .dkt-header .dkt-header__nav .dkt-menu > .menu-item.dkt-mm-open > .sub-menu{ display:block }

  /* ── fila HIJA ────────────────────────────────────────────────────────
     RESET DECIDIDO DEL MEGAMENU. Medido con el inspector: dentro del cajon
     seguian mandando las reglas de ESCRITORIO de megamenu.css, que son muy
     especificas y algunas con !important:
       · `color: var(--dkt-vino) !important` -> vino sobre magenta = ILEGIBLE
         (era eso lo que se veia "apagado": el texto estaba, pero en tinta)
       · `display: grid` en el mega de Andalan -> el texto caia DEBAJO del icono
       · `background:#fff` en el de Prudence  -> las pildoras blancas
       · `padding-left: 0` -> los hijos sin sangrar, al ras del mundo
     Se neutralizan de una vez con la misma especificidad (mas el prefijo
     .dkt-header, que la sube) y !important donde ellas lo usan. */
  .dkt-header .dkt-header__nav .sub-menu .menu-item > a,
  .dkt-header .dkt-header__nav .menu-item.dkt-mega > .sub-menu > .menu-item > a,
  .dkt-header .dkt-header__nav .menu-item.dkt-mega--prudence > .sub-menu > .menu-item > a,
  .dkt-header .dkt-header__nav .menu-item.dkt-mega--andalan > .sub-menu > .menu-item > a{
    display:flex !important; flex-direction:row !important; align-items:center !important;
    justify-content:flex-start !important; text-align:left !important;
    gap:10px !important; grid-template-columns:none !important;
    min-height:44px; padding:4px 18px 4px 34px !important;
    font-family:var(--dkt-font-body,'Inter',sans-serif) !important; font-weight:500 !important;
    font-size:.94rem !important; line-height:1.3 !important;
    color:rgba(255,255,255,.92) !important;
    background:none !important; background-color:transparent !important;
    box-shadow:none !important; border:0 !important; border-radius:0 !important;
    position:relative;
  }
  .dkt-header .dkt-header__nav .sub-menu .menu-item > a:active{ background:rgba(255,255,255,.1) !important }
  /* El icono de cada hijo lo pinta el megamenu como PSEUDO-ELEMENTO ::before con
     mascara. Se respeta tal cual (no se le toca el `content`, que lo borraria) y
     solo se le da tamano y AIRE: iba pegado a la primera letra. */
  .dkt-header .dkt-header__nav .sub-menu .menu-item > a::before{
    width:18px !important; height:18px !important;
    margin:0 12px 0 0 !important; flex:0 0 auto !important;
    opacity:.85; position:static !important; transform:none !important;
  }
  .dkt-header .dkt-header__nav .sub-menu .menu-item > a .dkt-mi-ico,
  .dkt-header .dkt-header__nav .sub-menu .menu-item > a img{
    width:18px !important; height:18px !important; flex:0 0 auto; opacity:.85; margin:0 !important;
  }
  /* los hijos se agrupan con una banda propia, no con una linea: mas limpio y
     no compite con el sistema de iconos del megamenu */
  .dkt-header .dkt-header__nav .dkt-menu > .menu-item.dkt-mm-open > .sub-menu{
    border-left:3px solid rgba(255,255,255,.22);
    margin-left:18px; padding-left:0;
  }
  .dkt-header .dkt-header__nav .dkt-menu > .menu-item.dkt-mm-open > .sub-menu .menu-item > a{
    padding-left:16px !important;
  }

  /* los destacados del mega (Neon, Chicle): un punto los distingue */
  .dkt-header .dkt-header__nav .sub-menu .menu-item.dkt-mega-feat > a{ color:#fff !important; font-weight:600 !important }
  .dkt-header .dkt-header__nav .sub-menu .menu-item.dkt-mega-feat > a::after{
    content:"" !important; width:6px; height:6px; border-radius:50%; background:#FF8FC4;
    margin-left:6px; flex:0 0 auto; display:block !important; position:static !important; opacity:1 !important;
  }
  /* el "ver todo" cierra la seccion, en un rosa que SI se lee sobre el magenta */
  .dkt-header .dkt-header__nav .sub-menu .menu-item.dkt-mega-more > a{
    color:#FFC9E2 !important; font-weight:600 !important; font-size:.88rem !important;
  }
  .dkt-header .dkt-header__nav .sub-menu .menu-item.dkt-mega-more > a::before{ display:none !important }

  /* ── pie del cajon ───────────────────────────────────────────────────── */
  .dkt-mm-pie{
    margin-top:auto; display:grid; gap:2px;
    padding:14px 10px calc(16px + env(safe-area-inset-bottom,0px));
    border-top:1px solid rgba(255,255,255,.16);
  }
  .dkt-mm-acc{
    display:flex; align-items:center; gap:12px; min-height:46px; padding:0 8px;
    color:rgba(255,255,255,.92); text-decoration:none; border-radius:10px;
    font-family:var(--dkt-font-body,'Inter',sans-serif); font-weight:500; font-size:.92rem;
  }
  .dkt-mm-acc:active{ background:rgba(255,255,255,.1) }
  .dkt-mm-acc__i{
    width:34px; height:34px; flex:0 0 auto; border-radius:10px;
    background:rgba(255,255,255,.12); display:grid; place-items:center;
  }
  .dkt-mm-acc__i svg{ width:18px; height:18px; fill:none; stroke:#fff; stroke-width:1.9;
    stroke-linecap:round; stroke-linejoin:round }

  /* sin JS el cajon sigue siendo utilizable: se ve como lista abierta */
  html.no-js .dkt-header .dkt-header__nav .dkt-menu > .menu-item > .sub-menu{ display:block }
}

@media (max-width:1024px) and (prefers-reduced-motion:reduce){
  .dkt-header .dkt-header__nav,
  .dkt-mm-velo,
  .dkt-mm-exp svg{ transition:none !important }
}

/* ============================================================================
   0.9.126 · BLOQUE 7 — LO QUE VIVE DETRÁS DE UN TOQUE (pasada "tocando")
   Nadie había ABIERTO el cajón del carrito ni el modal de Mitos. Al abrirlos
   con el dedo aparecieron defectos que ninguna captura en reposo podía ver.
   Va en movil.css porque es la ÚLTIMA hoja de toda página: header.css ya
   estilaba bien la X del cajón (44px, transparente) pero **Astra la repinta
   después** — mismo peso, más abajo, gana Astra. Aquí se cierra la discusión.
   ========================================================================= */

/* ── La X de cerrar: era un BLOQUE MAGENTA de 56×44 con una × de 15px ──
   Medido en vivo: background rgb(165,0,80), font-size 15px, radius 6px.
   El culpable NO era Astra sino NUESTRA propia hoja de botones, con la regla
   `.button, button:not(.toggle-on):not(.toggle-off), …` = especificidad
   (0,2,1) y todo en !important. `.dkt-cart-drawer .dkt-cart-close` es (0,2,0):
   pierde por especificidad AUNQUE vaya después y aunque lleve !important
   (el 0.9.126 se desplegó así y la medición en vivo lo cazó). Se repite la
   clase para llegar a (0,3,1) — la misma receta de los botones del theme. */
.dkt-cart-drawer button.dkt-cart-close.dkt-cart-close,
.dkt-al-mmodal button.dkt-al-mmodal__x.dkt-al-mmodal__x{
  width:44px !important; height:44px !important; min-width:0 !important;
  padding:0 !important; margin:0 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  background:#F6EFF3 !important; background-color:#F6EFF3 !important;
  color:var(--dkt-vino,#5F0E39) !important;
  border:0 !important; box-shadow:none !important; border-radius:50% !important;
  font-size:26px !important; line-height:1 !important; font-weight:400 !important;
  text-shadow:none !important; letter-spacing:0 !important;
  transition:background-color .18s ease, color .18s ease;
}
.dkt-cart-drawer button.dkt-cart-close.dkt-cart-close:hover,
.dkt-al-mmodal button.dkt-al-mmodal__x.dkt-al-mmodal__x:hover{
  background:var(--dkt-magenta,#A50050) !important; color:#fff !important;
}
/* El FOCO es un aro, no un relleno. Al abrir el modal de Mitos el JS enfoca
   la X: con el foco pintado de magenta, la X volvia a verse como el bloque
   que acabamos de quitar (medido en vivo: :focus-visible = true, fondo
   rgb(165,0,80)). El aro se ve, no tapa, y no disfraza el boton. */
.dkt-cart-drawer button.dkt-cart-close.dkt-cart-close:focus-visible,
.dkt-al-mmodal button.dkt-al-mmodal__x.dkt-al-mmodal__x:focus-visible{
  background:#F6EFF3 !important; color:var(--dkt-vino,#5F0E39) !important;
  outline:3px solid var(--dkt-magenta,#A50050) !important; outline-offset:2px !important;
}

/* ── El aviso de cookies y el botón de WhatsApp se pintaban ENCIMA del cajón ──
   El cajón vive en z-index 210 y el velo en 200; el aviso de cookies (99998)
   y el FAB (99999) quedaban por delante: el cajón abierto salía con el aviso
   dentro y el botón verde flotando sobre él. Mientras haya cajón o menú
   abierto, se apagan. */
html.dkt-cajon-abierto .dkt-wa-float,
html.dkt-cajon-abierto #dkt-ck,
html.dkt-cajon-abierto #dkt-ckcfg,
html.dkt-mm-abierto .dkt-wa-float,
html.dkt-mm-abierto #dkt-ck,
html.dkt-mm-abierto #dkt-ckcfg{ display:none !important }
/* El modal de Mitos no pasa por esa clase (lo abre el JS del landing con
   .is-open sobre el propio modal): se detecta con :has(). Si el navegador
   no soportara :has(), simplemente se queda como hoy — no rompe nada. */
body:has(.dkt-al-mmodal.is-open) .dkt-wa-float,
body:has(.dkt-al-mmodal.is-open) #dkt-ck,
body:has(.dkt-al-mmodal.is-open) #dkt-ckcfg{ display:none !important }

/* ── Cajón VACÍO: salía el mensaje DOS veces y sin salida ──
   El <p> de WooCommerce + la copia que inyecta Astra en .ast-mini-cart-empty.
   Y el único botón ("Seguir comprando" de Astra) caía en la regla que oculta
   "Ver carrito" (.button.wc-forward:not(.checkout)) → cajón sin salida.
   Ahora el theme pinta su propio vacío (dkt_minicart_vacio) y las dos
   versiones heredadas se callan. */
.dkt-cart-drawer .widget_shopping_cart_content > p.woocommerce-mini-cart__empty-message,
.dkt-cart-drawer .ast-mini-cart-empty{ display:none !important }

.dkt-cart-drawer .dkt-mc-vacio{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:.35rem; padding:min(16vh,110px) 1rem 0;
}
.dkt-cart-drawer .dkt-mc-vacio__ico{
  width:72px; height:72px; border-radius:50%; display:grid; place-items:center;
  background:#F6EFF3; color:var(--dkt-magenta,#A50050); margin-bottom:.65rem;
}
.dkt-cart-drawer .dkt-mc-vacio__ico svg{ width:34px; height:34px }
.dkt-cart-drawer .dkt-mc-vacio__t{
  margin:0; font-family:var(--dkt-font-titles,'Poppins',sans-serif);
  font-size:1.12rem; font-weight:700; color:var(--dkt-vino,#5F0E39);
}
.dkt-cart-drawer .dkt-mc-vacio__s{
  margin:0 0 1.1rem; max-width:26ch; font-size:.9rem; line-height:1.45;
  color:var(--dkt-muted,#6B5661);
}
.dkt-cart-drawer .dkt-mc-vacio__btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 1.6rem; border-radius:999px;
  background:var(--dkt-magenta,#A50050); color:#fff !important; text-decoration:none;
  font-weight:600; font-size:.95rem; letter-spacing:.01em;
}
.dkt-cart-drawer .dkt-mc-vacio__btn:hover{ background:var(--dkt-magenta-mid,#8E0045) }

/* ── Cajón LLENO: ~300px de vacío bajo "Finalizar compra" ──
   Se ancla un pie con la salida a la tienda y la línea de confianza. */
.dkt-cart-drawer .dkt-mc-pie{
  display:flex; flex-direction:column; align-items:center; gap:.85rem;
  margin-top:1.25rem; padding-top:1.1rem; border-top:1px solid var(--dkt-line,#EADFE6);
}
.dkt-cart-drawer .dkt-mc-pie__seguir{
  display:inline-flex; align-items:center; gap:.45rem; min-height:44px;
  color:var(--dkt-vino,#5F0E39); text-decoration:none; font-weight:600; font-size:.92rem;
}
.dkt-cart-drawer .dkt-mc-pie__seguir:hover{ color:var(--dkt-magenta,#A50050) }
.dkt-cart-drawer .dkt-mc-pie__seguir svg{ width:16px; height:16px; flex:0 0 auto }
.dkt-cart-drawer .dkt-mc-pie__trust{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.8rem; color:var(--dkt-muted,#6B5661); text-align:center;
}
.dkt-cart-drawer .dkt-mc-pie__trust svg{ width:16px; height:16px; flex:0 0 auto; color:var(--dkt-verde,#1FA36B) }

/* ── La × de quitar un producto medía 26px: por debajo del toque cómodo ── */
.dkt-cart-drawer .woocommerce-mini-cart-item a.remove{
  width:36px !important; height:36px !important; top:.55rem !important;
}
.dkt-cart-drawer .woocommerce-mini-cart-item a.remove svg{ width:15px; height:15px }

/* ── Añadir desde la FICHA no abría el cajón: ahora sí (PHP+JS) y el aviso
   de WooCommerce sobra — obligaba a subir la página y llevaba a "Ver
   carrito", que en el resto del sitio está retirado a propósito. */
body.dkt-recien-anadido .woocommerce-notices-wrapper .woocommerce-message{ display:none !important }

/* ── El ↗ de DKT Salud / DKT Academy era un EMOJI del sistema ──
   WordPress convierte el carácter en una imagen remota de s.w.org: dos
   cuadritos AZULES en un menú vino. Ahora es un SVG del theme (header.php);
   esta regla lo dimensiona y mata cualquier emoji que quede en el panel. */
.dkt-account-menu .dkt-ext{ display:inline-flex; align-items:center; margin-left:.3rem; opacity:.55 }
.dkt-account-menu .dkt-ext svg{ width:13px; height:13px }
.dkt-account-menu img.emoji{ display:none !important }

/* ── "Volver arriba" de Astra: un cuadrado AZUL ELÉCTRICO debajo del botón
   de WhatsApp ──────────────────────────────────────────────────────────
   Nadie lo había visto porque el FAB verde lo tapaba: al apagar el FAB con
   el modal de Mitos abierto salió a la luz. Medido: #ast-scroll-top, 32×32,
   background rgb(6,0,151), radio 2px, en (360,814) — justo debajo del FAB
   (376,830). Dos botones flotantes pisándose, uno fuera de marca.
   Se pinta de vino, se hace redondo y tocable, y se coloca ENCIMA del FAB
   reutilizando la misma altura de exclusión que usa el aviso de cookies. */
/* 0.9.157 (07-sep, decisión de Ricardo al revisar Mi cuenta v2): el botón de "volver
   arriba" se RETIRA en todo el sitio, escritorio incluido. Queda un solo botón
   flotante: el de WhatsApp. (Antes: círculo vino sobre el FAB en escritorio.) */
#ast-scroll-top,
#ast-scroll-top.ast-scroll-top-icon{ display:none !important }

/* ============================================================================
   0.9.141 · DOS COSAS QUE RICARDO COMPROBÓ EN SU TELÉFONO (01-sep)
   ========================================================================= */

/* ── ① EL BANNER CORTADO POR ARRIBA entre ~500 y 820px ──
   Ricardo: "depende del móvil; en pantallas entre 550 y 650px o más de ancho
   se ve muy feo el banner… los artes quedaron cortados en la parte superior".
   MEDIDO por anchos, sirviendo el arte VERTICAL (proporción 0,56) en una caja
   de 760px de alto:

     ancho   proporción de la caja   recorte arriba+abajo
     430px         0,57                    2px      ← sano
     500px         0,66                   65px
     550px         0,72                  109px
     650px         0,83                  185px
     767px         1,01                  302px      ← se come el collage entero
     820px+        (pasa al arte HORIZONTAL, sin recorte)

   Con `object-position:50% 50%` el recorte se reparte arriba y abajo, y arriba
   es donde vive lo que importa: la primera fila del collage y el logo dkt.
   Se sube el encuadre: el recorte se lo come la parte BAJA, que además queda
   tapada por el titular y los botones, que van en HTML encima del arte.
   Comprobado en vivo a 650px: con 50% la fila superior de fotos sale cortada;
   con 22% el collage entra entero y el logo dkt se ve completo.
   No se toca el arte ni por debajo de 480 (donde ya encaja) ni por encima de
   820 (donde ya entra el horizontal). */
@media (min-width:480px) and (max-width:819px){
  .dkt-hero__art img{ object-position:50% 22% !important }
}

/* ── ② EL TÍTULO DE PÁGINA, PEGADO AL MENÚ ──
   Ricardo: "en móvil, en todas las páginas que tienen título con el arco de
   marca, está muy muy pegado al menú; dale un poco de aire. Lo mismo en la
   política de privacidad, en la de datos y en todas las que tienen ese título".
   Medido en /carrito/, /politica-de-privacidad/, /terminos-y-condiciones/ y
   /quienes-somos/: el <h1> arranca en y=140 y la cabecera termina en y=140.
   **Aire = 0px, exacto.** Es la cabecera de entrada de Astra, sin relleno.
   Solo móvil: el escritorio ya está aprobado y no se toca. */
@media (max-width:1024px){
  body .site-content .entry-header,
  body .entry-header.ast-no-thumbnail,
  body.woocommerce-cart .entry-header,
  body.woocommerce-checkout .entry-header,
  body.woocommerce-account .entry-header{ padding-top:clamp(20px, 5.5vw, 30px) }
}