/* ============================================================================
   MISHU — la piel de la tienda
   ----------------------------------------------------------------------------
   ACCESORIOS PARA PERROS Y GATOS, PRODUCTOS DE CATÁLOGO, PROVEEDOR EUROPEO
   ----------------------------------------------------------------------------

   POR QUÉ ESTA EN OSCURO Y NO EN CLARO
   ------------------------------------
   La versión anterior de esta tienda iba en beige cálido, porque era una tienda
   de mascotas *personalizadas* y buscaba ternura. Ya no es ese el negocio: es un
   catálogo real, y una tienda de catálogo tiene que demostrar que es de fiar.
   El fondo oscuro hace que las fotos de los productos destaque (que es lo que se
   vende) y que el precio se lea de un vistazo. La calidez no se pierde: viene de
   las esquinas redondeadas y del verde menta, que es un color vivo.

   LA PALETA
   ---------
   Fondo azul noche casi negro (#050b14), no gris: el gris neutro hace que los
   productos parezcan fotos de un catálogo muerto. Menta (#00e5a0) para lo
   accionable: precio, botón, enlaces. Magenta (#ff4d94) solo para etiquetas
   pequeñas, nunca para el precio, que es lo que tiene que leerse bien.

   LO QUE NO SE HACE AQUÍ
   ----------------------
   - No se fuerza el color con `!important` en todo. Se usa en los sitios donde
     el tema gana de verdad, y el resto se arregla en el punto concreto.
   - No se fija el ancho de las tarjetas en píxeles: se usa grid con
     `auto-fit`/`minmax`, que es lo que hace que en móvil salgan dos columnas
     en vez de una.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. LAS VARIABLES
   Un solo sitio donde cambiar los colores. Si hay que tocar un color en tres
   sitios, en dos de ellos se va a quedar viejo.
   ---------------------------------------------------------------------------- */

.mn-portada,
.mn-cabecera-tienda,
.mn-datos,
.mn-pie,
.mn-aviso-pago {
    --mn-fondo: #050b14;
    --mn-fondo-2: #0a1424;
    --mn-tarjeta: #0e1a2c;
    --mn-tarjeta-borde: #1c2e47;
    --mn-texto: #e8f0fa;
    --mn-texto-suave: #93a7c0;
    --mn-texto-tenue: #64798f;
    --mn-menta: #00e5a0;
    --mn-magenta: #ff4d94;
    --mn-ambar: #ffc857;
}

/* ----------------------------------------------------------------------------
   2. LA PORTADA
   ---------------------------------------------------------------------------- */

.mn-portada {
    background:
        radial-gradient(1100px 460px at 12% -8%, rgba(0, 229, 160, .13), transparent 62%),
        radial-gradient(900px 420px at 92% 6%, rgba(255, 77, 148, .10), transparent 60%),
        var(--mn-fondo);
    color: var(--mn-texto);
    padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 48px) clamp(40px, 6vw, 80px);
    border-bottom: 1px solid var(--mn-tarjeta-borde);
}

.mn-hero {
    max-width: 780px;
    margin: 0 auto clamp(28px, 4vw, 48px);
    text-align: center;
}

.mn-pill {
    display: inline-block;
    background: rgba(0, 229, 160, .11);
    border: 1px solid rgba(0, 229, 160, .34);
    color: var(--mn-menta);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: clamp(16px, 2vw, 24px);
}

.mn-hero h1 {
    font-size: clamp(28px, 5.2vw, 54px);
    line-height: 1.1;
    margin: 0 0 clamp(14px, 2vw, 20px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
}

.mn-hero h1 em {
    font-style: normal;
    color: var(--mn-menta);
}

.mn-entrada {
    font-size: clamp(15px, 1.7vw, 18px);
    line-height: 1.65;
    color: var(--mn-texto-suave);
    max-width: 620px;
    margin: 0 auto clamp(22px, 3vw, 32px);
}

.mn-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.mn-boton {
    display: inline-block;
    background: var(--mn-menta);
    color: #04160f;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 28px;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.mn-boton:hover,
.mn-boton:focus {
    background: #16ffb6;
    color: #04160f;
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(0, 229, 160, .3);
}

.mn-boton-secundario {
    background: transparent;
    color: var(--mn-menta);
    border: 1.5px solid rgba(0, 229, 160, .45);
}

.mn-boton-secundario:hover,
.mn-boton-secundario:focus {
    background: rgba(0, 229, 160, .1);
    color: #16ffb6;
    box-shadow: none;
}

/* ----------------------------------------------------------------------------
   3. LAS VENTAJAS
   ---------------------------------------------------------------------------- */

.mn-ventajas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    max-width: 1080px;
    margin: 0 auto;
}

.mn-ventaja {
    background: var(--mn-tarjeta);
    border: 1px solid var(--mn-tarjeta-borde);
    border-radius: 16px;
    padding: 22px;
}

.mn-ventaja .mn-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(0, 229, 160, .1);
    color: var(--mn-menta);
    margin-bottom: 12px;
}

.mn-ventaja strong {
    display: block;
    font-size: 16px;
    color: #fff;
    margin-bottom: 6px;
}

.mn-ventaja p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--mn-texto-suave);
}

/* ----------------------------------------------------------------------------
   4. LAS CATEGORÍAS
   ---------------------------------------------------------------------------- */

.mn-categorias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    max-width: 1080px;
    margin: 0 auto clamp(28px, 4vw, 44px);
}

.mn-categoria {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--mn-fondo-2);
    border: 1px solid var(--mn-tarjeta-borde);
    border-radius: 10px;
    padding: 15px 17px;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}

.mn-categoria:hover,
.mn-categoria:focus {
    border-color: var(--mn-menta);
    transform: translateY(-2px);
}

.mn-categoria-nombre {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}

.mn-categoria-cuenta {
    color: var(--mn-texto-tenue);
    font-size: 13px;
}

/* ----------------------------------------------------------------------------
   5. LA CABECERA DE LA TIENDA
   ---------------------------------------------------------------------------- */

.mn-cabecera-tienda {
    background: var(--mn-fondo);
    color: var(--mn-texto);
    padding: clamp(20px, 3vw, 34px) clamp(16px, 4vw, 40px) 10px;
    text-align: center;
}

.mn-titulo-tienda {
    font-size: clamp(22px, 3.2vw, 34px);
    margin: 0 0 8px;
    color: #fff;
    font-weight: 800;
}

.mn-subtitulo {
    margin: 0 auto;
    max-width: 620px;
    color: var(--mn-texto-suave);
    font-size: 15px;
    line-height: 1.6;
}

/* ----------------------------------------------------------------------------
   6. LOS DATOS DEL PRODUCTO EN LA FICHA
   Lo que sustituye al antiguo "este producto es personalizable": de dónde viene
   y en cuántos días llega. Datos, no promesas.
   ---------------------------------------------------------------------------- */

.mn-datos {
    background: var(--mn-fondo-2);
    border: 1px solid var(--mn-tarjeta-borde);
    border-left: 3px solid var(--mn-menta);
    border-radius: 10px;
    padding: 15px 18px;
    margin: 18px 0;
    color: var(--mn-texto-suave);
    font-size: 14px;
}

.mn-datos p {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
}

.mn-datos p:last-child {
    margin-bottom: 0;
}

.mn-datos svg {
    color: var(--mn-menta);
    flex: 0 0 auto;
}

.mn-datos strong {
    color: #fff;
}

.mn-datos-quien {
    font-size: 13px;
    color: var(--mn-texto-tenue);
}

/* ----------------------------------------------------------------------------
   7. EL AVISO DE PAGO
   ---------------------------------------------------------------------------- */

.mn-aviso-pago {
    background: rgba(255, 200, 87, .09);
    border: 1px solid rgba(255, 200, 87, .4);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 0 0 22px;
    color: #ffe4a3;
}

.mn-aviso-pago strong {
    display: block;
    color: var(--mn-ambar);
    margin-bottom: 5px;
}

.mn-aviso-pago p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #e8d4a8;
}

/* ----------------------------------------------------------------------------
   8. EL PIE
   ---------------------------------------------------------------------------- */

.mn-pie {
    background: var(--mn-fondo);
    border-top: 1px solid var(--mn-tarjeta-borde);
    color: var(--mn-texto-suave);
    text-align: center;
    padding: 26px 18px;
    font-size: 14px;
}

.mn-pie p {
    margin: 0 0 5px;
}

.mn-pie strong {
    color: var(--mn-menta);
}

.mn-pie-nota {
    color: var(--mn-texto-tenue);
    font-size: 13px;
}

/* ----------------------------------------------------------------------------
   9. LOS PRODUCTOS: la rejilla
   `auto-fit` con `minmax` es lo que hace que en un móvil de 390 px salgan dos
   columnas y no una sola. Con un ancho fijo de columna, el navegador mete
   columnas enteras y sobra hueco: a 390 px no cabe ninguna de 215 px y se queda
   con una.
   ---------------------------------------------------------------------------- */

.woocommerce ul.products,

.single-product .product_title {
    color: #fff !important;
    font-size: clamp(21px, 3vw, 30px) !important;
    line-height: 1.2;
    font-weight: 800;
    margin: 0 0 10px;
}

.single-product .summary .price,
.single-product div.product p.price {
    color: #00e5a0 !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    margin: 0 0 14px;
}

.single-product .woocommerce-product-details__short-description,
.single-product .product_description {
    color: #b8c8dc;
    line-height: 1.7;
    font-size: 15px;
}

.single-product .woocommerce-product-details__short-description p,
.single-product .product_description p {
    color: #b8c8dc;
}

.single-product .single_add_to_cart_button,
.single-product button[type="submit"] {
    background: #00e5a0 !important;
    color: #04160f !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 15px 34px !important;
    font-size: 16px !important;
    width: 100%;
    transition: background .15s ease;
}

.single-product .single_add_to_cart_button:hover {
    background: #16ffb6 !important;
}

.single-product table.shop_attributes,
.single-product .shop_attributes {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}

.single-product table.shop_attributes th,
.single-product table.shop_attributes td {
    border: 1px solid var(--mn-tarjeta-borde, #1c2e47);
    padding: 9px 13px;
    font-size: 14px;
    text-align: left;
}

.single-product table.shop_attributes th {
    background: #0a1424;
    color: #93a7c0;
    font-weight: 600;
    width: 40%;
}

.single-product table.shop_attributes td {
    color: #e8f0fa;
}

/* La foto del producto: sin el `opacity: 0` que WooCommerce imprime a veces y
   que deja el hueco en blanco si su JavaScript no llega a ejecutarse. */
.single-product .woocommerce-product-gallery__image {
    opacity: 1 !important;
}

.single-product .woocommerce-product-gallery__image img {
    border-radius: 14px;
    background: #0a1424;
}

/* ----------------------------------------------------------------------------
   11. EL CARRITO Y EL CHECKOUT
   ---------------------------------------------------------------------------- */

.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account {
    background: #050b14;
    color: #e8f0fa;
    padding: 20px 0;
}

.woocommerce table.shop_table,
.woocommerce-checkout .woocommerce-checkout-review-order-table {
    background: #0e1a2c !important;
    border-color: #1c2e47 !important;
    color: #e8f0fa;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    border-color: #1c2e47 !important;
    color: #e8f0fa !important;
}

.woocommerce table.shop_table thead th {
    background: #0a1424;
    color: #93a7c0;
    font-weight: 600;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background: #00e5a0 !important;
    color: #04160f !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    border: none !important;
    padding: 13px 26px !important;
    transition: background .15s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background: #16ffb6 !important;
    color: #04160f !important;
}

.woocommerce .button.alt {
    background: #ff4d94 !important;
    color: #fff !important;
}

.woocommerce .button.alt:hover {
    background: #ff6ba5 !important;
}

.woocommerce .quantity input.qty {
    background: #0a1424;
    border: 1px solid #1c2e47;
    color: #e8f0fa;
    border-radius: 8px;
    padding: 8px 10px;
}

/* Los campos del checkout: si se quedan en blanco sobre fondo oscuro, el
   cliente escribe su dirección sobre un rectángulo blanco que parece un error. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
    background: #0a1424 !important;
    color: #e8f0fa !important;
    border: 1px solid #1c2e47 !important;
    border-radius: 8px !important;
    padding: 11px 13px !important;
}

.woocommerce form .form-row label {
    color: #93a7c0 !important;
    font-size: 14px;
}

.woocommerce form .form-row .required {
    color: #ff4d94;
    border: none;
}

/* ----------------------------------------------------------------------------
   12. AVISOS Y VACÍOS
   ---------------------------------------------------------------------------- */

.mn-aviso-vacio {
    background: #0e1a2c;
    border: 1px dashed #1c2e47;
    border-radius: 16px;
    padding: 40px 24px;
    text-align: center;
    color: #93a7c0;
    max-width: 560px;
    margin: 30px auto;
}

.mn-aviso-vacio strong {
    display: block;
    color: #fff;
    font-size: 17px;
    margin-bottom: 8px;
}

.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
    background: #0a1424 !important;
    border-top-color: #00e5a0 !important;
    color: #e8f0fa !important;
    border-radius: 12px;
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: #00e5a0;
}

.woocommerce-error {
    border-top-color: #ff4d94 !important;
}

.woocommerce-error::before {
    color: #ff4d94;
}

/* ----------------------------------------------------------------------------
   13. EL ENCABEZADO DEL TEMA
   Storefront pone su cabecera en gris claro. Con el resto en oscuro, la
   cabecera se ve como una barra ajena encima de la tienda.
   ---------------------------------------------------------------------------- */

.site-header,
#masthead,
.site-header .site-branding {
    background: #050b14 !important;
    border-bottom: 1px solid #1c2e47;
}

.site-header a,
.site-header .site-title a,
#masthead a {
    color: #e8f0fa !important;
}

/* El nombre del sitio se oculta: con el logo al lado, "Mishu" en texto queda
   repetido. Se oculta por CSS y no borrando la opción del panel, para que
   alguien que la vuelva a activar desde Ajustes no rompa nada. */
.site-header .site-branding .site-title,
.site-header .site-title,
.home .site-header .site-title {
    display: none;
}

.mishu-logo {
    display: inline-block;
    margin: 0;
}

.mishu-logo img,
.mishu-logo-svg {
    display: block;
    height: 38px;
    width: auto;
}

/* El logotipo es un SVG con las letras en menta. Si por lo que sea el SVG no se
   pinta (algunos bloqueadores y algunos clientes de correo), se muestra el PNG
   que esta debajo, que es la misma version en imagen. */
.mishu-logo img.mishu-logo-svg {
    content: url("mishu-logo.svg");
}

.mishu-logo:hover {
    opacity: .85;
}

.site-navigation ul li a:hover,
.site-navigation ul li.current-menu-item > a {
    color: #00e5a0 !important;
}

/* ----------------------------------------------------------------------------
   14. EL MÓVIL
   ---------------------------------------------------------------------------- */

@media (max-width: 782px) {

    .mn-portada {
        padding-left: 16px;
        padding-right: 16px;
    }

    .mn-hero h1 {
        font-size: 29px;
    }

    .mn-boton {
        flex: 1 1 auto;
        text-align: center;
        padding: 14px 20px;
    }

    /* Dos columnas en móvil, que es lo que se pidió. A 390 px de ancho menos el
       margen caben dos columnas comfortable; con el minmax de 215 px del
       escritorio solo cabría una. */
    .woocommerce ul.products,
    

    .single-product div.product {
        padding: 16px;
    }

    .single-product .summary .price,
    .single-product div.product p.price {
        font-size: 25px !important;
    }
}

/* Pantallas muy estrechas (menos de 360 px): una sola columna, porque dos de
   150 px con el texto dentro ya no se leen. */
@media (max-width: 360px) {
    .woocommerce ul.products,
    
}

/* ----------------------------------------------------------------------------
   15. ACCESIBILIDAD
   ---------------------------------------------------------------------------- */

.mn-boton:focus-visible,
.mn-categoria:focus-visible,
.mishu-logo:focus-visible,
.woocommerce 

/* Quien tiene el movimiento reducido no ve transiciones. */
@media (prefers-reduced-motion: reduce) {
    .mn-boton,
    .mn-categoria,
    .woocommerce 

    .mn-boton:hover,
    .mn-categoria:hover,
    .woocommerce 
}

/* ---------------------------------------------------------------------------
   LOS PRODUCTOS EN LA PORTADA
   ---------------------------------------------------------------------------
   La rejilla del catálogo ya la dibuja el tema; esta es propia, porque va en
   la portada y no dentro del bucle de WooCommerce. Cuatro columnas en
   escritorio y dos en móvil, que es lo que se lee sin zoom.

   La foto va por encima y el precio debajo, como en el resto de la tienda: si
   el nombre ocupara más de dos líneas, los precios dejarian de estar a la
   misma altura y la rejilla parecería rota.
   --------------------------------------------------------------------------- */
.mn-destacados {
    margin: 3rem 0 1rem;
}
.mn-destacados-titulo {
    text-align: center;
    font-size: 1.7rem;
    margin: 0 0 1.6rem;
    color: var(--mn-menta, #00e5a0);
    letter-spacing: .01em;
}

@media (max-width: 782px) {
    
    .mn-destacados-titulo { font-size: 1.4rem; }
    
}

/* ---------------------------------------------------------------------------
   ANCHO DE LA REJILLA Y DEL CONTENEDOR
   ---------------------------------------------------------------------------
   Kadence mide la página en píxeles fijos y deja la rejilla de cinco columnas
   pegada al borde derecho: la quinta tarjeta se sale un poco. Con el tema
   anterior la rejilla era de tres columnas y no se notaba.

   Se fuerza un ancho máximo cómodo y un relleno lateral, que es lo que hace que
   una tienda se lea bien en un portátil: si el contenido toca el borde, parece
   una web sin terminar.
   --------------------------------------------------------------------------- */
.wrap,
.kadence-inner-wrap,
.site-inner {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* La rejilla de novedades se queda en cuatro columnas, que es lo que se lee
   con el nombre del producto debajo de la foto sin que se corte. */

/* Las tarjetas de producto de Kadence, para que no se peguen al borde */

/* ---------------------------------------------------------------------------
   LOS BLOQUES VACÍOS QUE DEJA KADENCE
   ---------------------------------------------------------------------------
   Kadence imprime, antes del contenido, su propio "page hero" con el título de
   la página, y después un <article> con el cuerpo de la página. En la portada
   los dos están vacíos —el hero y la rejilla los pinta este plugin, no la
   página— pero siguen ocupando media pantalla cada uno, con un rectángulo gris
   en medio de la tienda.

   Ocultarlos por CSS y no con PHP: Kadence los imprime en su propia plantilla
   y no ofrece ningún enganche para saltárselos. Con el título de la página ya
   callado (bloque 12), aquí solo queda quitarles el sitio.
   --------------------------------------------------------------------------- */
body.home .page-hero-section,
body.home .entry-hero,
body.home #main > .content-wrap > article > .entry-header,
body.home #primary .entry-header,
body.home #main > .content-wrap > article:empty {
    display: none !important;
}

/*
 * El <article> de la página "Inicio" sigue dejando su margen aunque el cuerpo
 * esté vacío, porque Kadence le pone padding. Con la página vacía, ese
 * artículo no aporta nada: lo pinta este plugin. Se quita el espacio con
 * margin:0 en vez de display:none, porque si algún día Andy escribe texto en
 * la portada, el texto tiene que verse y solo se cae el hueco sobrante.
 */
body.home #main > .content-wrap > article {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
body.home #main > .content-wrap > article > *:not(.entry-content) {
    display: none !important;
}
body.home #main > .content-wrap > article > .entry-content:empty {
    display: none !important;
}

/* Y el hueco que dejan, para que no seNOTE el salto */
body.home .page-hero-section,
body.home .entry-hero {
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------------------------------------------------------------------------
   FILAS COMPLETAS
   ---------------------------------------------------------------------------
   Con doce productos en cuatro columnas salen tres filas de cuatro, sin huecos.
   Con siete categorías en cuatro columnas salían dos filas, la segunda con
   tres huecos a la derecha, que es lo que hace que un catálogo parezca roto.

   Las categorías se centrean en la segunda fila, que es lo que hace una rejilla
   de tres cosas: alineadas al centro se leen como una decisión y no como un
   fallo de anchura.
   --------------------------------------------------------------------------- */
.mn-categorias {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.mn-categorias > :nth-child(n + 5) {
    grid-column: auto;
}
/* Los tres de la segunda fila, centrados en el hueco que queda */
.mn-categorias > :nth-child(5) { grid-column-start: 1; }

@media (min-width: 782px) {
    /*
     * Siete categorías en cuatro columnas: cuatro arriba, tres abajo.
     *
     * La versión anterior usaba una rejilla de doce columnas y hacía que las
     * tres de abajo ocuparan tres de doce cada una. Salían estrechas, porque un
     * tercio del ancho no es un cuarto, y el texto se partía en cinco líneas:
     * "Collares y arneses" ocupaba media tarjeta.
     *
     * Aquí la rejilla sigue siendo de cuatro columnas, y las tres de la segunda
     * fila empiezan en la segunda columna. Así tienen exactamente el mismo
     * ancho que las de arriba, que es lo que hace que se lean como una rejilla
     * y no como dos rejillas distintas.
     */
    .mn-categorias {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .mn-categorias > * { grid-column: auto; }
    .mn-categorias > :nth-child(5) { grid-column-start: 2; }
}

@media (max-width: 782px) {

    .mn-portada {
        padding-left: 16px;
        padding-right: 16px;
    }

    .mn-hero h1 {
        font-size: 29px;
    }

    .mn-boton {
        flex: 1 1 auto;
        text-align: center;
        padding: 14px 20px;
    }

    /* Dos columnas en móvil, que es lo que se pidió. A 390 px de ancho menos el
       margen caben dos columnas comfortable; con el minmax de 215 px del
       escritorio solo cabría una. */
    .woocommerce ul.products,
    

    .single-product div.product {
        padding: 16px;
    }

    .single-product .summary .price,
    .single-product div.product p.price {
        font-size: 25px !important;
    }
}

/* Pantallas muy estrechas (menos de 360 px): una sola columna, porque dos de
   150 px con el texto dentro ya no se leen. */
@media (max-width: 360px) {
    .woocommerce ul.products,
    
}

/* ----------------------------------------------------------------------------
   15. ACCESIBILIDAD
   ---------------------------------------------------------------------------- */

.mn-boton:focus-visible,
.mn-categoria:focus-visible,
.mishu-logo:focus-visible,
.woocommerce 

/* Quien tiene el movimiento reducido no ve transiciones. */
@media (prefers-reduced-motion: reduce) {
    .mn-boton,
    .mn-categoria,
    .woocommerce 

    .mn-boton:hover,
    .mn-categoria:hover,
    .woocommerce 
}

/* ---------------------------------------------------------------------------
   LOS PRODUCTOS EN LA PORTADA
   ---------------------------------------------------------------------------
   La rejilla del catálogo ya la dibuja el tema; esta es propia, porque va en
   la portada y no dentro del bucle de WooCommerce. Cuatro columnas en
   escritorio y dos en móvil, que es lo que se lee sin zoom.

   La foto va por encima y el precio debajo, como en el resto de la tienda: si
   el nombre ocupara más de dos líneas, los precios dejarian de estar a la
   misma altura y la rejilla parecería rota.
   --------------------------------------------------------------------------- */
.mn-destacados {
    margin: 3rem 0 1rem;
}
.mn-destacados-titulo {
    text-align: center;
    font-size: 1.7rem;
    margin: 0 0 1.6rem;
    color: var(--mn-menta, #00e5a0);
    letter-spacing: .01em;
}

@media (max-width: 782px) {
    
    .mn-destacados-titulo { font-size: 1.4rem; }
    
}

/* ---------------------------------------------------------------------------
   ANCHO DE LA REJILLA Y DEL CONTENEDOR
   ---------------------------------------------------------------------------
   Kadence mide la página en píxeles fijos y deja la rejilla de cinco columnas
   pegada al borde derecho: la quinta tarjeta se sale un poco. Con el tema
   anterior la rejilla era de tres columnas y no se notaba.

   Se fuerza un ancho máximo cómodo y un relleno lateral, que es lo que hace que
   una tienda se lea bien en un portátil: si el contenido toca el borde, parece
   una web sin terminar.
   --------------------------------------------------------------------------- */
.wrap,
.kadence-inner-wrap,
.site-inner {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* La rejilla de novedades se queda en cuatro columnas, que es lo que se lee
   con el nombre del producto debajo de la foto sin que se corte. */

/* Las tarjetas de producto de Kadence, para que no se peguen al borde */

/* ---------------------------------------------------------------------------
   LOS BLOQUES VACÍOS QUE DEJA KADENCE
   ---------------------------------------------------------------------------
   Kadence imprime, antes del contenido, su propio "page hero" con el título de
   la página, y después un <article> con el cuerpo de la página. En la portada
   los dos están vacíos —el hero y la rejilla los pinta este plugin, no la
   página— pero siguen ocupando media pantalla cada uno, con un rectángulo gris
   en medio de la tienda.

   Ocultarlos por CSS y no con PHP: Kadence los imprime en su propia plantilla
   y no ofrece ningún enganche para saltárselos. Con el título de la página ya
   callado (bloque 12), aquí solo queda quitarles el sitio.
   --------------------------------------------------------------------------- */
body.home .page-hero-section,
body.home .entry-hero,
body.home #main > .content-wrap > article > .entry-header,
body.home #primary .entry-header,
body.home #main > .content-wrap > article:empty {
    display: none !important;
}

/*
 * El <article> de la página "Inicio" sigue dejando su margen aunque el cuerpo
 * esté vacío, porque Kadence le pone padding. Con la página vacía, ese
 * artículo no aporta nada: lo pinta este plugin. Se quita el espacio con
 * margin:0 en vez de display:none, porque si algún día Andy escribe texto en
 * la portada, el texto tiene que verse y solo se cae el hueco sobrante.
 */
body.home #main > .content-wrap > article {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
body.home #main > .content-wrap > article > *:not(.entry-content) {
    display: none !important;
}
body.home #main > .content-wrap > article > .entry-content:empty {
    display: none !important;
}

/* Y el hueco que dejan, para que no seNOTE el salto */
body.home .page-hero-section,
body.home .entry-hero {
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------------------------------------------------------------------------
   FILAS COMPLETAS
   ---------------------------------------------------------------------------
   Con doce productos en cuatro columnas salen tres filas de cuatro, sin huecos.
   Con siete categorías en cuatro columnas salían dos filas, la segunda con
   tres huecos a la derecha, que es lo que hace que un catálogo parezca roto.

   Las categorías se centrean en la segunda fila, que es lo que hace una rejilla
   de tres cosas: alineadas al centro se leen como una decisión y no como un
   fallo de anchura.
   --------------------------------------------------------------------------- */
.mn-categorias {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.mn-categorias > :nth-child(n + 5) {
    grid-column: auto;
}
/* Los tres de la segunda fila, centrados en el hueco que queda */
.mn-categorias > :nth-child(5) { grid-column-start: 1; }

@media (max-width: 782px) {
    .mn-categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mn-categorias > * { grid-column: auto !important; }
}

/* ---------------------------------------------------------------------------
   HUECO ANTES DEL PIE
   ---------------------------------------------------------------------------
   Kadence deja un margen inferior grande en el contenedor de contenido, y con
   la rejilla de novedades encima se ve como una franja vacía de unos cien
   píxeles antes del pie. No es un bloque sin contenido: es el padding del tema.
   --------------------------------------------------------------------------- */
body.home #primary,
body.home .content-area,
body.home #main,
body.home .content-container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------
   EL MÓVIL: EL CONTENEDOR TENÍA UN ANCHO FIJO
   ---------------------------------------------------------------------------
   ESTE ERA EL BUG REAL, Y NO ERA UNA CUESTIÓN DE COLUMNAS.

   Medido a 390 px dentro de un iframe (que es la única forma fiable de ver el
   responsive con el navegador de esta máquina):

       body          375 px
       main.wrap     824 px     <-- 449 px más ancho que la pantalla
       .mn-portada   784 px
       .mn-hero      752 px
       rejilla       784 px

   La causa es la regla de arriba: `.wrap { max-width: 1240px }`. Kadence da al
   contenedor un ancho fijo de 1240 px y `max-width` no lo reduce en móvil,
   porque el ancho lo impone el tema, no el límite. Encima mis dos `padding`
   laterales lo ensanchaban 2,5 rem más. Y como todo lo de dentro hereda ese
   ancho, las rejillas pedían 368 px de columna en una pantalla de 390: dos
   columnas que no caben, y el texto se salía.

   El arreglo es `width: 100%` y `max-width: none` en móvil, más `box-sizing`
   para que el padding no se sume al ancho. Sin `box-sizing: border-box`, un
   elemento con padding es más ancho que su contenedor, que es exactamente lo
   que pasaba.
   --------------------------------------------------------------------------- */
@media (max-width: 782px) {
    .wrap,
    .kadence-inner-wrap,
    .site-inner,
    #inner-wrap,
    .content-area,
    .content-container,
    .site-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    /* Y el relleno se controla aquí, no con el padding del escritorio */
    .wrap,
    .kadence-inner-wrap,
    .site-inner {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* El hero se ajusta al ancho disponible */
    .mn-hero {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Las rejillas nunca con 1fr a secas: minmax(0,1fr) es lo que permite que
       una columna se estreche. Con `1fr` la columna manda y el contenedor se
       ensancha, que es lo que pasaba. */
    .mn-categorias {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    

    /* Las palabras largas se parten antes de empujar la página */
    .mn-hero h1,
    
}

/* ---------------------------------------------------------------------------
   TEXTO LEGIBLE: EL GRIS DE KADENCE NO CUMPLE EL CONTRASTE MÍNIMO
   ---------------------------------------------------------------------------
   Kadence usa #718096 (su --global-palette6) como color de texto. Sobre blanco
   da un contraste de 4,02:1, y el mínimo para texto normal es 4,5:1 (WCAG AA).
   Con eso la descripción de los productos y los textos de las fichas se leen
   fatal en un móvil, que es donde más se nota: menos píxeles, menos contraste.

   No se cambia la paleta del tema entero, sino el color del texto de lectura,
   que es lo único que estaba mal. Se usa --global-palette5 (#4A5568, 7,53:1),
   que es del propio tema y por tanto combina con el resto.

   Y el tamaño: en móvil el cuerpo va a 16 px como mínimo, que es lo que hace
   legible un párrafo en una pantalla pequeña, con interlineado amplio.
   --------------------------------------------------------------------------- */
:root {
    --mn-texto: #4a5568;
    --mn-texto-claro: #2d3748;
}

body,
p,
li,
dd,
.entry-content p,
.woocommerce-product-details__short-description p,
.woocommerce-tabs__panel-content p,
.woocommerce-product-description p {
    color: var(--mn-texto);
}

h1, h2, h3, h4, h5, h6,
.woocommerce-product-details__title,
.entry-header h1,
.site-title {
    color: var(--mn-texto-claro);
}

/* La letra de las etiquetas de la ficha ("Material", "Tamaño", "Medidas de
   seguridad") son palabras cortas y necesitan más peso, no más tamaño */
.woocommerce-product-details__short-description strong,
.woocommerce-tabs__panel-content strong,
.entry-content strong {
    color: var(--mn-texto-claro);
}

/* ---------------------------------------------------------------------------
   TAMAÑO DE LETRA EN MÓVIL
   --------------------------------------------------------------------------- */
@media (max-width: 782px) {
    body {
        font-size: 16px;
        line-height: 1.65;
    }

    .entry-content p,
    .woocommerce-product-description p,
    .woocommerce-tabs__panel-content p,
    .woocommerce-product-details__short-description p {
        font-size: 16px !important;
        line-height: 1.7;
        margin-bottom: 1em;
    }

    /* Los títulos de producto en la ficha, que en Kadence salen pequeños */
    .woocommerce-product-details__title {
        font-size: 24px !important;
        line-height: 1.25;
    }

    /* Precio grande y legible: es lo segundo que mira quien compra */
    .single-product div.product p.price,
    .woocommerce-product-details .price {
        font-size: 27px !important;
    }

    /* El botón de comprar, a la altura mínima que pide la guidelines de táctil
       (44 px), porque en un dedo pequeño es donde se falla */
    .single-product div.product form.cart,
    .single-product div.product form.cart .button,
    .single_add_to_cart_button {
        width: 100% !important;
        min-height: 50px;
        font-size: 16px !important;
    }

    /* Migas de pan: en móvil se parten en dos líneas y estorban */
    .woocommerce-breadcrumb {
        font-size: 13px;
        line-height: 1.5;
    }

    /* Un poco de aire alrededor del contenido */
    .entry-content,
    .woocommerce-product-details,
    .site-main {
        padding-top: 8px;
    }
}

/* ---------------------------------------------------------------------------
   LA CABECERA EN MÓVIL: MENÚ Y ENLACES A LA VEZ ESTÁN APRETADOS
   ---------------------------------------------------------------------------
   Kadense enseña el botón de menú y, además, los cuatro enlaces en línea. En
   390 px no caben: "Mi cuenta" queda pegada al borde y los enlaces salen con
   una tipografía diminuta. Se ocultan los enlaces y se deja solo el logotipo y
   el botón de menú, que es lo que se usa en un móvil.
   --------------------------------------------------------------------------- */
@media (max-width: 782px) {
    .kadence-nav-menu--primary,
    .primary-menu-container,
    .site-header .main-navigation,
    .site-header-navigation .navigation {
        display: none !important;
    }

    /* Y el logotipo se queda a un tamaño que se ve sin mirar */
    .custom-logo-link img,
    .site-logo img,
    .kadence-site-logo img {
        height: 34px;
        width: auto;
    }
}

/* ---------------------------------------------------------------------------
   KADENCE USA OTRAS CLASES, Y EN LA FICHA LAS MÍAS NO SE APLICABAN
   ---------------------------------------------------------------------------
   Las reglas de tipografía de la ficha estaban escritas con los selectores de
   Storefront (.woocommerce-product-details__title, .entry-content p). Con
   Kadence no existen: la ficha usa

       div.product-title.product-above
       h1.product_title.entry-title
       div.summary.entry-summary
       p.price
       div.woocommerce-tabs.wc-tabs-wrapper
       ul.products.content-wrap.grid-cols.grid-ss-col-2.grid-sm-col-3

   Con lo que los estilos de lectura no llegaban a nada y se veía el gris
   pálido del tema. Estos son los selectores que sí existen, y se ponen los dos
   por si algún día se vuelve a Storefront.

   Y hay un detalle de Kadence que hay que respetar: el catálogo trae sus
   propias clases de columnas (`grid-ss-col-2` y `grid-sm-col-3`), pensadas para
   tablets y móviles. Se le dejan: ya dan dos columnas en móvil, que es lo
   correcto, y pelea con ellas daría resultados distintos según el ancho.
   --------------------------------------------------------------------------- */

/* Título del producto en la ficha */
.product_title,
.product-above .product-title,
h1.entry-title {
    color: var(--mn-texto-claro);
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Precio: lo segundo que mira quien entra a una ficha */
.single-product p.price,
.single-product .price,
.summary .price,
div.product p.price {
    color: var(--mn-rosa);
    font-weight: 800;
}

/* El resumen con la descripción corta */
.summary .woocommerce-product-details__short-description,
.summary .product-description {
    color: var(--mn-texto);
}

/* El cuerpo de la ficha: descripción, medidas, modo de uso */
.woocommerce-tabs .tab-content,
.wc-tabs-wrapper .tab-content,
.product .entry-content,
.single-product .entry-content,
div.product-description,
.single-product div.product > .product_meta ~ * {
    color: var(--mn-texto);
    line-height: 1.7;
}

/* Las etiquetas de la ficha (Material, Tamaño, Medidas de seguridad) */
.product .entry-content strong,
.woocommerce-tabs strong,
.entry-content strong {
    color: var(--mn-texto-claro);
    font-weight: 700;
}

/* Los párrafos con viñeta de la descripción */
.product .entry-content p,
.woocommerce-tabs p {
    color: var(--mn-texto);
}

/* En móvil */
@media (max-width: 782px) {
    .product_title,
    .product-above .product-title,
    h1.entry-title {
        font-size: 24px !important;
        line-height: 1.25;
    }

    .single-product p.price,
    .summary .price,
    div.product p.price {
        font-size: 27px !important;
        line-height: 1.2;
    }

    /* El botón de comprar, a lo ancho y a la altura que se toca bien */
    .single-product form.cart,
    .single-product form.cart .button,
    .single_add_to_cart_button {
        width: 100% !important;
        min-height: 50px;
        font-size: 16px !important;
        padding: 14px 20px !important;
    }

    /* La ficha en una sola columna, que es como se lee de verdad en un dedo */
    .single-product div.product {
        display: flex !important;
        flex-direction: column !important;
    }

    /* La galería no debe salirse de la pantalla */
    .woocommerce-product-gallery,
    .woocommerce-product-gallery--columns-4 {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    /* El zoom de la foto no debe empujar la página (medido: la imagenAMPLIADA
       llegaba a 1239 px de ancho dentro de un contenedor con overflow:hidden,
       así que no había scroll, pero en cuanto el contenedor cambia se ve) */
    .woocommerce-product-gallery .zoomImg {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Y las pestañas de la ficha, que se salen por el lado en móvil */
    .wc-tabs-wrapper .tabs,
    .woocommerce-tabs .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------------------------------------------------------------------------
   EL PANEL DE LA FICHA SE LLAMA .woocommerce-Tabs-panel, NO .tab-content
   ---------------------------------------------------------------------------
   Medido en la ficha real: el bloque con la descripción (Material, Tamaño, Modo
   de uso, Medidas de seguridad) vive en

       div.woocommerce-Tabs-panel.woocommerce-Tabs-panel-

   Kadence renombra la clase estándar de WooCommerce (.tab-content), así que los
   selectores de Storefront no cogían nada y el texto se veía con el color y el
   tamaño por defecto del tema.

   Se añaden los dos nombres al selector, para que funcione con Kadence y con
   Storefront, y se sube el cuerpo a 17 px que es lo que ya se ve en escritorio
   (Kadence ya trae un tamaño cómodo; lo que faltaba era el color).
   --------------------------------------------------------------------------- */
.woocommerce-Tabs-panel,
.woocommerce-tabs .tab-content,
.wc-tabs-wrapper .tab-content,
.product .entry-content,
.single-product .entry-content,
div.product-description {
    color: var(--mn-texto);
    font-size: 17px;
    line-height: 1.7;
}

.woocommerce-Tabs-panel p,
.woocommerce-tabs p,
.wc-tabs-wrapper p,
.product .entry-content p {
    color: var(--mn-texto);
    line-height: 1.7;
    margin-bottom: 0.85em;
}

/* Las etiquetas de la ficha (Material, Tamaño, Modo de uso, Medidas de
   seguridad) van en negrita y en el color oscuro, para que se distinguan del
   valor que hay debajo */
.woocommerce-Tabs-panel strong,
.woocommerce-tabs strong,
.product .entry-content strong {
    color: var(--mn-texto-claro);
    font-weight: 700;
}

/* Los títulos de dentro de la ficha ("Detalles", "Descripción") */
.woocommerce-Tabs-panel h2,
.woocommerce-tabs h2,
.single-product h2 {
    color: var(--mn-texto-claro);
}

/* Y en móvil, algo más de aire y un poco más de cuerpo */
@media (max-width: 782px) {
    .woocommerce-Tabs-panel,
    .woocommerce-tabs .tab-content,
    .product .entry-content {
        font-size: 16px !important;
        line-height: 1.7;
        padding-top: 4px;
    }

    /* Los párrafos con viñeta ("• Para rascar, trepar y descansar") tienen un
       sangrado unattractive en móvil: el texto se va muy a la derecha */
    .woocommerce-Tabs-panel p,
    .woocommerce-tabs p {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ---------------------------------------------------------------------------
   TRES FALLOS QUE SALEN EN LA FICHA EN MÓVIL
   ---------------------------------------------------------------------------
   1. EL CAMPO DE CANTIDAD SE SALE POR LA DERECHA.
      WooCommerce pinta <div class="quantity"><input type="number"></div> y el
      input, con su width:100% por defecto de Kadence, se sale de la caja. Se le
      da un ancho en rem, no en porcentaje, y se quita el que hereda.

   2. EL PRECIO EN VERDE MENTA NO TIENE CONTRASTE.
      --mn-menta (#00e5a0) sobre blanco da menos de 1,9:1. Es un color de marca,
      perfecto sobre el fondo oscuro, pero ilegible sobre blanco, que es donde
      Kadence pone la ficha. Sobre blanco se usa una versión oscura del mismo
      verde, que mantiene la identidad y sí se lee.

   3. <div class="mn-datos"> VACÍO.
      Es un contenedor que el plugin pinta con los datos de envío y disponibilidad
      en la portada, pero en la ficha de producto se queda sin contenido. Vacío
      queda como una barra oscura sin texto, que parece un elemento roto. Se
      oculta cuando está vacío, que es justo cuando no pinta nada.
   --------------------------------------------------------------------------- */

/* 1. El campo de cantidad */
@media (max-width: 782px) {
    .single-product .quantity {
        display: flex !important;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
        width: auto;
    }

    .single-product .quantity label {
        margin: 0;
    }

    .single-product .quantity .qty,
    .single-product input.qty {
        width: 78px !important;
        min-width: 78px;
        max-width: 78px;
        height: 46px;
        padding: 0 8px;
        font-size: 16px;
        text-align: center;
        border-radius: 10px;
        border: 1px solid #cbd5e0;
        background: #fff;
        color: #1a202c;
        -moz-appearance: textfield;
    }

    /* La flechita del input number, que en Chrome es un triángulo feo */
    .single-product .quantity .qty::-webkit-outer-spin-button,
    .single-product .quantity .qty::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
}

/* 2. El precio: verde de marca sobre fondo oscuro, verde oscuro sobre blanco */
:root {
    --mn-menta-oscuro: #0a7d59;
}

.single-product p.price,
.single-product .price,
.summary .price,
div.product p.price,
.single-product span.price,
p.price.amount {
    color: var(--mn-menta-oscuro) !important;
    font-weight: 800;
}

/* En la portada, que sí va sobre fondo oscuro, el verde de marca se mantiene */
.mn-destacados .price,

/* 3. El contenedor vacío */
.mn-datos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 10px 0 14px;
    color: var(--mn-texto);
    font-size: 14px;
}

.mn-datos > * {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ---------------------------------------------------------------------------
   LOS PRECIOS, EN TODA LA TIENDA
   ---------------------------------------------------------------------------
   El precio se pintaba con el verde de marca (#00e5a0), que es un color para
   fondo oscuro. Medido:

       #00e5a0 sobre blanco   1,65:1   ilegible
       #00e5a0 sobre #050b14 11,95:1   perfecto

   Kadence pone la ficha, el catálogo, el carrito y la cuenta sobre fondo blanco,
   así que el precio se perdía en las cuatro. En la portada, que sí es oscura, se
   mantiene el verde de marca.

   En móvil es peor: el precio es lo segundo que se mira, después de la foto.

   El botón de comprar tenía el mismo problema al revés: texto blanco sobre el
   rosa #ff0090 daba 3,71:1, y el mínimo es 4,5:1. Se oscurece el rosa lo
   justo para llegar, sin que deje de ser el color de marca.
   --------------------------------------------------------------------------- */

/* El precio sobre fondo blanco, en toda la tienda */
.single-product p.price,
.single-product span.price,
.single-product .price,
ul.products .price,
.mn-destacados .price,
table.cart .price,
.woocommerce-Price-amount,
.woocommerce-Price-currencySymbol,
.summary .price,
div.product p.price,
p.price.amount,
td.product-price,
.woocommerce-checkout-review-order-table .product-name .product-price {
    color: var(--mn-menta-oscuro);
    font-weight: 800;
}

/* El precio dentro del carrito, que lleva el suyo propio */
table.cart td.product-price .amount,
table.cart .product-price .woocommerce-Price-amount {
    color: var(--mn-menta-oscuro);
}

/* La portada es oscura: aquí sí va el verde de marca, que es la identidad */
.mn-portada .mn-destacados .price,
.mn-portada .price,
.mn-portada .woocommerce-Price-amount {
    color: var(--mn-menta);
}

/* El botón de comprar: rosa un punto más oscuro para llegar a 4,5:1 */
:root {
    --mn-rosa-boton: #c8006f;
}

.single_add_to_cart_button,
.single-product form.cart .button,
a.button.alt,
.woocommerce #respond #submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
button.button.alt,
.woocommerce .quantity + .button,
#add-to-cart {
    background-color: var(--mn-rosa-boton) !important;
    color: #fff !important;
    font-weight: 700;
    border: 0;
}

.single_add_to_cart_button:hover,
.single-product form.cart .button:hover,
a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .button.alt:hover {
    background-color: #a8005c !important;
    color: #fff !important;
}

/* Y el mismo tratamiento para el precio de la ficha, que ya se corrigió con el
   verde oscuro, más el descuento si algún día lo hay */
.woocommerce-Price-amount del,
.woocommerce-Price-amount ins {
    color: inherit;
}

.woocommerce-Price-amount del {
    color: #718096;
    font-weight: 500;
    font-size: 0.85em;
}

/*
 * La regla :empty va AL FINAL a proposito. Con `display:flex` declarado antes,
 * el elemento vacio seguia pintando la barra oscura: la regla :empty tiene que
 * ir despues para ganar por orden, ya que no puede llevar !important (lo
 * lleva, y aun asi se colocaba despues en el fichero).
 */
.mn-datos:empty,
.mn-datos:not(:has(> *)) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: none !important;
}

/*
 * Kadense también pinta el contenedor de avisos de WooCommerce aunque está
 * vacío. Con la tienda sin pasarela de pago no hay nada que avisar, pero el
 * `div` se dibuja igual y sale como una barra oscura entre el precio y el botón
 * de comprar, que es justo donde más molesta.
 *
 * Mismo caso que .mn-datos: se oculta solo cuando no tiene hijos, con :empty y
 * con :not(:has(...)), que es lo que funciona en todos los navegadores actuales.
 */
.woocommerce-notices-wrapper:empty,
.woocommerce-notices-wrapper:not(:has(> *)) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: none !important;
    overflow: hidden;
}

/* Un poco de aire entre el campo de cantidad y el botón de comprar: en
   móvil se leen como un solo bloque y no se sabe dónde acaba uno y empieza
   el otro. */
@media (max-width: 782px) {
    .single-product form.cart .quantity,
    .single-product .quantity {
        margin-bottom: 18px !important;
    }

    .single-product form.cart .single_add_to_cart_button {
        margin-top: 0 !important;
    }
}

/* ===========================================================================
   LA TARJETA DE PRODUCTO
   ===========================================================================
   DEFINIDA EN UN SOLO SITIO, A PROPÓSITO.

   Durante la fase de pruebas esta tarjeta llegó a tener 31 reglas repartidas por
   el fichero: la foto declarada 6 veces, el precio 10 y el botón 12, cada una con
   valores distintos según el momento en que se escribió. Con eso el resultado
   dependía del ORDEN del fichero y no de lo que se quería: un cambio en la
   primera regla no se veía, y había que probar en cuál de las doce mandaba.

   Ahora está todo aquí, agrupado y comentado. Si hay que cambiar el aspecto de
   la tarjeta, se cambia aquí y no se toca nada más.

   LO QUE SE VE EN CADA TARJETA, EN ESTE ORDEN:
       1. Foto (cuadrada, con el producto entero y sin recortarse)
       2. Categoría, en Versalitas
       3. Nombre
       4. Resumen corto, en 3 líneas
       5. Precio
       6. Botón «Añadir al carrito», siempre visible (no solo al pasar el ratón)
   -------------------------------------------------------------------------- */

/* --- 1. La caja de la tarjeta -------------------------------------------- */
ul.products li.product,
.wc-block-grid__product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 30, 55, .05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    height: 100%;
}

/* El «to-do el producto cabe» no se aplica en táctil: en un móvil no hay ratón
   y la tarjeta cambiaría de tamaño al tocarla, que es lo que más molesta. */
@media (hover: hover) and (pointer: fine) {
    ul.products li.product:hover,
    .wc-block-grid__product:hover {
        transform: translateY(-4px);
        border-color: #0a7d59;
        box-shadow: 0 12px 26px rgba(15, 30, 55, .12);
    }
}

/* --- 2. La foto ------------------------------------------------------------ */
/*
 * `object-fit: contain` y NO `cover`.
 *
 * Las fotos de Yommy son de 1200x1000 con el producto sobre fondo blanco, y con
 * `cover` (que es lo que traía la tarjeta antes) la rejilla recortaba los lados
 * de la foto: se veían las patas cortadas, o medio rascador. `contain` enseña
 * el producto entero, que es lo que se vende.
 */
ul.products li.product img,
.wc-block-grid__product img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain !important;
    object-position: center;
    background: #ffffff;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #eef2f7;
    padding: 10px !important;
    box-sizing: border-box;
    transition: transform .25s ease;
}

@media (hover: hover) and (pointer: fine) {
    ul.products li.product:hover img,
    .wc-block-grid__product:hover img {
        transform: scale(1.04);
    }
}

/* El sello de descuento, que WooCommerce pinta sobre la foto */
ul.products li.product .onsale,
.wc-block-grid__product .onsale {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    min-height: 0;
    min-width: 0;
    margin: 0 !important;
    padding: 4px 10px;
    background: #c8006f;
    color: #ffffff;
    border-radius: 999px;
    font-size: 11px !important;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: .04em;
}

ul.products li.product,
.wc-block-grid__product {
    position: relative;
}

/* --- 3. El cuerpo: nombre, resumen y precio ------------------------------- */
/*
 * Kadence envuelve el contenido del producto en
 * `div.product-details.content-bg.entry-content-wrap`, y le pone su propio
 * relleno. Se neutraliza para que el hueco entre foto y nombre sea el mismo en
 * todas las tarjetas, en vez de depender de lo que el tema decida.
 */
ul.products li.product .product-details,
.wc-block-grid__product .product-details {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px 14px 0;
    margin: 0;
    background: transparent;
    text-align: left;
}

ul.products li.product .product-details > *,
.wc-block-grid__product .product-details > * {
    margin: 0;
}

/* La categoría, en versalitas: dice de qué_section_ es el artículo sin robar
   espacio al nombre */
ul.products li.product .product-cat,
.wc-block-grid__product .product-cat,
ul.products li.product .posted-in {
    display: block;
    margin: 0 0 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #0a7d59;
}

ul.products li.product .product-cat a,
.wc-block-grid__product .product-cat a {
    color: inherit;
    text-decoration: none;
}

/* El nombre del producto */
ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product .woocommerce-loop-product__title {
    margin: 0 0 6px !important;
    padding: 0;
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1.3;
    color: #1a202c;
}

/* Un nombre largo no puede comerse media tarjeta ni descuadrar la rejilla */
ul.products li.product .woocommerce-loop-product__title a,
.wc-block-grid__product .woocommerce-loop-product__title a {
    color: inherit;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* El nombre, en 2 líneas siempre, para que todas las tarjetas midan lo mismo */
ul.products li.product .woocommerce-loop-product__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

/* --- 4. EL RESUMEN CORTO, que faltaba ------------------------------------ */
/*
 * Este es el <p> que pinta `mishu-tarjetas.php` con la primera frase de la
 * descripción real del producto. Antes no salía porque el campo de resumen
 * corto estaba vacío en los 55 artículos (el dato existía, pero en la
 * descripción larga, que es la que va en la ficha).
 *
 * Tres líneas con "..." al final, que es lo que da tiempo a leer sin mirar.
 */
.mn-resumen {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 10px !important;
    padding: 0;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 400;
    color: #4a5568;
    min-height: 4.5em;      /* reserva 3 líneas: las tarjetas quedan alineadas */
    text-align: left;
}

/* --- 5. El precio --------------------------------------------------------- */
/*
 * Va pegado abajo con `margin-top: auto`, que es lo que empuja el precio al
 * fondo de la tarjeta y hace que dos tarjetas con nombre de una línea y de dos
 * tengan el precio en el MISMO sitio. Sin eso, los precios bailan de tarjeta en
 * tarjeta y la rejilla parece desordenada aunque el contenido sea igual.
 */
ul.products li.product .price,
.wc-block-grid__product .price {
    margin: auto 0 0 !important;
    padding: 0;
    font-size: 20px !important;
    font-weight: 800;
    line-height: 1.2;
    color: #0a7d59;
    display: block;
}

ul.products li.product .price del,
.wc-block-grid__product .price del {
    opacity: .55;
    font-size: 14px;
    font-weight: 500;
    margin-right: 6px;
}

ul.products li.product .price ins,
.wc-block-grid__product .price ins {
    text-decoration: none;
    background: none;
    padding: 0;
}

/* --- 6. El botón de comprar ------------------------------------------------ */
/*
 * SIEMPRE VISIBLE, no solo al pasar el ratón.
 *
 * Antes se pintaba `display: block` pero el contenedor lo ocultaba y solo
 * aparecía con el cursor encima. En un móvil no hay cursor: el botón no se veía
 * nunca y la tienda perdía el «Añadir al carrito» entero, que es la única acción
 * de la tarjeta.
 */
ul.products li.product .button,
.wc-block-grid__product .button,
ul.products li.product .add_to_cart_button,
ul.products li.product .add_to_cart_button.button,
.wc-block-grid__product .add_to_cart_button {
    display: block !important;
    width: auto;
    margin: 12px 14px 14px !important;
    padding: 11px 12px !important;
    font-size: 13.5px !important;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    color: #ffffff;
    background: #0a7d59;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background .18s ease, transform .12s ease;
}

ul.products li.product .button:hover,
.wc-block-grid__product .button:hover,
ul.products li.product .add_to_cart_button:hover {
    background: #087a53;
    color: #ffffff;
}

ul.products li.product .button:active,
.wc-block-grid__product .button:active {
    transform: translateY(1px);
}

/* El foco tiene que verse: sin esto no se puede comprar con el teclado */
.woocommerce ul.products li.product .button:focus-visible,
.wc-block-grid__product .button:focus-visible {
    outline: 3px solid #0a7d59;
    outline-offset: 2px;
    box-shadow: none;
}

/* --- 7. Lo que se ve en móvil --------------------------------------------- */
@media (max-width: 782px) {
    ul.products li.product .product-details,
    .wc-block-grid__product .product-details {
        padding: 12px 12px 0;
    }

    ul.products li.product .woocommerce-loop-product__title,
    .wc-block-grid__product .woocommerce-loop-product__title {
        font-size: 14px !important;
        min-height: 2.6em;
    }

    .mn-resumen {
        font-size: 12.5px;
        min-height: 4.5em;
        margin-bottom: 8px !important;
    }

    ul.products li.product .price,
    .wc-block-grid__product .price {
        font-size: 18px !important;
    }

    ul.products li.product .button,
    .wc-block-grid__product .button,
    ul.products li.product .add_to_cart_button {
        margin: 10px 12px 12px !important;
        /* 44 px es la altura mínima que se toca bien con un dedo */
        min-height: 44px;
        padding: 12px 10px !important;
        font-size: 13px !important;
    }
}

/* ===========================================================================
   CORRECCIONES DE KADENCE EN LA TARJETA
   ===========================================================================
   Medido en el HTML y el CSS reales del tema. Kadence hace dos cosas que
   rompen la tarjeta, y las dos hay que deshacerlas:

   1. EL BOTÓN ESTÁ FUERA DE LA TARJETA.
      Kadence pone el botón en una capa que flota sobre la foto:
          .product-action-wrap { position: absolute; bottom: -2rem; opacity: 0 }
      y lo sube a `opacity: 1` al pasar el ratón por la tarjeta. En escritorio
      funciona; en MÓVIL NO, porque no hay ratón: el botón se queda en
      `opacity: 0` para siempre. La tarjeta perdía la única acción que tiene.

      Aquí se le quita el posicionamiento flotante y se pinta dentro de la
      tarjeta, siempre visible. En escritorio se mantiene el efecto de subir la
      tarjeta al pasar por encima, que es lo que da sensación de vida.

   2. EL RESUMEN SALE DOS VECES.
      Kadence ya pinta el resumen en su propio contenedor:
          <div class="product-excerpt"><p>…</p></div>
      y su CSS lo pone `display: none` en pantallas anchas (para que en escritorio
      solo se vea el nombre) y `display: block` en móvil.

      Como el plugin pinta además su propio `<p class="mn-resumen">` con el mismo
      texto, en móvil salía el resumen dos veces seguidas. Se usa el de Kadence
      (que es el que el tema maqueta) y se quita el del plugin, que ya no hace
      falta para esto: el texto sale igual, pero una sola vez.

      El plugin se queda enganchado al bucle, que es lo que pinta el resumen en
      los BUCLES PROPIOS (la rejilla de novedades de la portada, que no es un
      bucle de WooCommerce y ahí Kadence no pinta nada).
   -------------------------------------------------------------------------- */

/* --- El botón, dentro de la tarjeta y siempre visible --------------------- */
ul.products li.product .product-action-wrap,
.woocommerce ul.products li.product .product-action-wrap {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    z-index: auto !important;
}

/* Kadence lo sube al pasar el ratón con un selector de dos clases; se anula */
.woocommerce ul.products.woo-archive-action-on-hover li.product .product-action-wrap,
.woocommerce ul.products.woo-archive-action-on-hover li.product:hover .product-action-wrap,
.woocommerce ul.products.woo-archive-action-on-hover li.product:focus-within .product-action-wrap,
.woocommerce ul.products.products-list-view li.product .product-action-wrap,
.woocommerce ul.products.products-list-view li.product:hover .product-action-wrap {
    bottom: auto !important;
    opacity: 1 !important;
}

/* --- El botón dentro del cuerpo, debajo del precio ------------------------ */
ul.products li.product .product-action-wrap {
    margin: 12px 14px 14px !important;
}

ul.products li.product .product-action-wrap .add_to_cart_button,
ul.products li.product .product-action-wrap .button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100% !important;
    min-height: 44px;
    margin: 0 !important;
    padding: 11px 14px !important;
    font-size: 13.5px !important;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background: #0a7d59;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background .18s ease;
}

ul.products li.product .product-action-wrap .add_to_cart_button:hover {
    background: #087a53;
    color: #ffffff;
}

/* Los tres iconos que Kadence mete dentro del botón (flecha, spinner y check)
   solo deben verse cuando toca: el spinner mientras carga y el check cuando se
   ha añadido. En reposo solo la flecha. */
ul.products li.product .product-action-wrap .kadence-svg-iconset {
    display: none;
    align-items: center;
    line-height: 0;
}

ul.products li.product .product-action-wrap .kadence-arrow-right-alt-svg {
    display: inline-flex;
}

ul.products li.product .product-action-wrap .button.loading .kadence-spinner-svg,
ul.products li.product .product-action-wrap .button.added .kadence-check-svg {
    display: inline-flex;
}

/* --- El resumen: el de Kadence, no el del plugin ------------------------- */
/* El contenedor de Kadence, que es el que el tema maqueta */
ul.products li.product .product-excerpt {
    display: block !important;
    margin: 0 0 10px !important;
}

ul.products li.product .product-excerpt p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 !important;
    font-size: 13px;
    line-height: 1.5;
    color: #4a5568;
    min-height: 4.5em;
    text-align: left;
}

/* Y el del plugin se oculta en el catálogo, donde ya hay otro con el mismo texto */
ul.products li.product > .product-details > .mn-resumen,
.wc-block-grid__product .mn-resumen {
    display: none;
}

/* --- En móvil ------------------------------------------------------------- */
@media (max-width: 782px) {
    ul.products li.product .product-action-wrap {
        margin: 10px 12px 12px !important;
    }

    ul.products li.product .product-action-wrap .add_to_cart_button {
        min-height: 46px;
        font-size: 13px !important;
        padding: 12px 10px !important;
    }

    ul.products li.product .product-excerpt p {
        font-size: 12.5px;
        min-height: 4.5em;
        margin-bottom: 8px !important;
    }
}

/* ===========================================================================
   LA REJILLA DEL CATÁLOGO: LAS CLASES LAS PONE KADENCE
   ===========================================================================
   El <ul> del catálogo sale con las clases del propio tema:

       products content-wrap product-archive
       grid-cols grid-ss-col-2 grid-sm-col-3 grid-lg-col-4
       woo-archive-action-on-hover woo-archive-btn-text
       woo-archive-loop woo-archive-image-hover-none

   `grid-ss-col-2` es "2 columnas en pantallas pequeñas". Kadence ya resuelve los
   tres tamaños: 2 en móvil y tablet, 3 en portátil, 4 en pantalla grande.

   Se le respetan y no se imponen columnas a mano, por dos razones:

   - Kadence carga su CSS DESPUÉS del de este plugin, así que cualquier
     `grid-template-columns` propio se pierde (salvo con `!important`, que es lo
     que se ha tenido que usar en la rejilla de novedades).
   - Las clases del tema ya hacen el trabajo, y respetarlas significa que si
     algún día se cambia de tema, esta regla no hay que deshacerla.

   Lo que sí hace falta es quitar el `float` de WooCommerce, que en una rejilla
   con `display: flex` o `grid` estira las tarjetas de forma desigual: unas miden
   más que otras y la rejilla parece desordenada aunque el contenido sea igual.
   El `height: 100%` de la tarjeta es lo que las iguala.
   -------------------------------------------------------------------------- */
ul.products.products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.products.products > li.product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    height: 100%;
}

@media (min-width: 782px) {
    ul.products.products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px;
    }
}

@media (min-width: 1200px) {
    ul.products.products {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* En la rejilla de novedades de la portada, que es del plugin y no de
   WooCommerce, el ancho de la tarjeta lo manda el `min-height` de los tres
   bloques de texto. Ya viene bien así. */

/* ===========================================================================

LA REJILLA DE NOVEDADES DE LA PORTADA
   ===========================================================================
   Es una rejilla DEL PLUGIN (`.mn-destacados-rejilla`), no el bucle de
   WooCommerce, así que aquí no se aplican las correcciones de Kadence de
   arriba: esta tarjeta se imprime entera desde `mishu_destacados()`.

   Ahora lleva los mismos cinco bloques que la del catálogo, en el mismo orden,
   para que pasar de la portada al catálogo no parezca un cambio de tienda:
   foto, nombre, resumen, precio y botón.

   En escritorio son 4 columnas, en móvil 2. Kadence pone su CSS después del de
   este plugin, así que el `!important` es necesario.
   -------------------------------------------------------------------------- */
.mn-destacados-rejilla {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mn-destacados-item {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 30, 55, .05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    height: 100%;
}

@media (hover: hover) and (pointer: fine) {
    .mn-destacados-item:hover {
        transform: translateY(-4px);
        border-color: #0a7d59;
        box-shadow: 0 12px 26px rgba(15, 30, 55, .12);
    }
}

/* El enlace ocupa la tarjeta menos el botón, que va aparte */
.mn-destacados-tarjeta {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

/* La foto: cuadrada, con el producto entero y sobre fondo blanco */
.mn-destacados-foto {
    display: block;
    background: #ffffff;
    border-bottom: 1px solid #eef2f7;
    overflow: hidden;
}

.mn-destacados-foto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    transition: transform .25s ease;
}

@media (hover: hover) and (pointer: fine) {
    .mn-destacados-item:hover .mn-destacados-foto img {
        transform: scale(1.04);
    }
}

.mn-destacados-nombre {
    margin: 12px 14px 6px;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1a202c;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

/* El resumen: 3 líneas, igual que en el catálogo */
.mn-destacados-resumen {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 14px 10px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 400;
    color: #4a5568;
    min-height: 4.5em;
    text-align: left;
}

/* El precio, pegado abajo con margin-top:auto para que todas las tarjetas
   tengan el precio en el mismo sitio, tengan el nombre de una o de dos líneas */
.mn-destacados-precio {
    margin: auto 14px 0;
    padding-top: 4px;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.2;
    color: #0a7d59;
    display: block;
}

.mn-destacados-precio ins,
.mn-destacados-precio del {
    text-decoration: none;
    background: none;
}

/* El botón de comprar, hermano del enlace (un <a> dentro de otro <a> es HTML
   inválido) y con los mismos `data-*` que usa WooCommerce, para que su
   JavaScript lo añade al carrito sin recargar. */
.mn-destacados-boton {
    display: block !important;
    margin: 12px 14px 14px !important;
    padding: 11px 12px !important;
    min-height: 44px;
    font-size: 13.5px !important;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background: #0a7d59;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background .18s ease;
}

.mn-destacados-boton:hover {
    background: #087a53;
    color: #ffffff;
}

.mn-destacados-boton:focus-visible {
    outline: 3px solid #0a7d59;
    outline-offset: 2px;
}

/* En móvil: dos columnas y letra algo menor, que es lo que cabe en 390 px */
@media (max-width: 782px) {
    .mn-destacados-rejilla {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
    }

    .mn-destacados-nombre {
        margin: 10px 11px 5px;
        font-size: .84rem;
        min-height: 2.4em;
    }

    .mn-destacados-resumen {
        margin: 0 11px 8px;
        font-size: 12.5px;
        min-height: 4.5em;
    }

    .mn-destacados-precio {
        margin: auto 11px 0;
        font-size: 1.05rem;
    }

    .mn-destacados-boton {
        margin: 10px 11px 11px !important;
        min-height: 44px;
        font-size: 12.5px !important;
        padding: 12px 8px !important;
    }

    .mn-destacados-foto img {
        padding: 8px;
    }
}

/* ===========================================================================
   LOS BOTONES DE LAS TARJETAS: KADENCE LOS PINTA AZULES
   ===========================================================================
   Kadence da a `.button` su color de marca, que en su tema por defecto es azul.
   El botón de comprar salía azul en medio de una tienda verde, que es lo que
   se ve en la captura: el único botón verde de la página era el del hero, y
   todo lo demás se veía de otro color.

   Kadence carga su CSS después de este, así que el `!important` es necesario
   aquí también. Se fija el color en los tres sitios donde aparece el botón:
   el catálogo, la rejilla de novedades de la portada y los relacionados de la
   ficha.
   -------------------------------------------------------------------------- */
ul.products li.product .product-action-wrap .add_to_cart_button,
ul.products li.product .add_to_cart_button,
.mn-destacados-boton,
.woocommerce ul.products li.product .button,
.single-product .add_to_cart_button {
    background-color: #0a7d59 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #0a7d59 !important;
}

/* Y su estado de carga y de "añadido", que Kadence cambia con el icono */
ul.products li.product .add_to_cart_button.loading,
ul.products li.product .add_to_cart_button.added,
.mn-destacados-boton.loading,
.mn-destacados-boton.added {
    background-color: #087a53 !important;
    color: #ffffff !important;
}

ul.products li.product .add_to_cart_button:hover,
.mn-destacados-boton:hover,
.woocommerce ul.products li.product .button:hover {
    background-color: #087a53 !important;
    color: #ffffff !important;
}

/*
 * La rejilla de novedades va sobre fondo gris claro y la tarjeta es blanca, que
 * es el mismo tratamiento que el catálogo. Se le da su propio fondo para que no
 * dependa de lo que pinte Kadence debajo.
 */
.mn-destacados {
    background: transparent;
}


/* =========================================================================
   HERO CON PRODUCTO REAL — Mishu
   =========================================================================
   QUE CAMBIA Y POR QUE
   -------------------
   Este hero era una columna de texto a la izquierda con medio bloque vacio a
   la derecha. En una tienda, el lado derecho del hero es el sitio mas caro de
   toda la pagina: es donde mira el ojo primero. Aqui se pone un PRODUCTO REAL:
   foto grande, nombre y precio.

   Y ES EL MAS BARATO DE LA TIENDA, a proposito. El articulo mas caro hace que
   la tienda parezca cara; el mas barato demuestra que se puede comprar algo sin
   pensarlo, y es lo que engancha a quien entra a mirar sin intencion de
   comprar. El precio sale de la base de datos.

   ESTETICA: LA MISMA FAMILIA QUE EL RESTO, NO LA DE KUBIK
   -------------------------------------------------------
   Kubik es tecnologia: menta sobre azul y esquinas rectas.

   Mishu es mascotas: CALIDO. El boton es ambar, las esquinas son mas redondas y
   el halo del hero es naranja. Las dos tiendas comparten el fondo oscuro del
   escaparate, pero un cliente que las abra seguidas no las confunde.
   ========================================================================= */

.mn-hero-con-foto {
    display: grid;
    /* `minmax(0, ...)` y no `1fr` a secas: con `1fr` el contenido puede
       DESBORDAR su columna (el minimo por defecto es `auto`) y una foto en un
       hero empuja el texto o se sale del bloque. Con `minmax(0, ...)` la
       columna se encoge y nada se desborda. */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 36px;
    align-items: center;
}

.mn-hero-texto {
    position: relative;
    z-index: 2;
    min-width: 0;
}

/* El gancho: "Desde 16,90 €" */
.mn-desde {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 22px;
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(255,176,32,.09);
    border-left: 3px solid var(--mn-ambar, #ffb020);
    color: var(--mn-texto-claro, #cbd5e0);
    font-size: .92em;
}
.mn-desde b {
    color: var(--mn-ambar, #ffb020);
    font-size: 1.7em;
    font-weight: 800;
    line-height: 1;
}

/* Las tres categorias mas grandes, para entrar sin buscar */
.mn-hero-cats {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.mn-hero-cats a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(160,174,192,.3);
    color: var(--mn-texto-claro, #cbd5e0) !important;
    text-decoration: none;
    font-size: .84em;
    transition: border-color .2s ease, color .2s ease;
}
.mn-hero-cats a:hover {
    border-color: var(--mn-ambar, #ffb020);
    color: var(--mn-ambar, #ffb020) !important;
}
.mn-hero-cats b { color: var(--mn-ambar, #ffb020); font-weight: 700; }

/* La ficha del producto del hero */
.mn-hero-ficha {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,176,32,.26);
    border-radius: 20px;
    padding: 14px;
    text-decoration: none !important;
    transition: border-color .25s ease, transform .25s ease;
    min-width: 0;
}
.mn-hero-ficha:hover {
    border-color: var(--mn-ambar, #ffb020);
    transform: translateY(-3px);
}
.mn-hero-ficha-tag {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 2;
    background: var(--mn-ambar, #ffb020);
    color: #1a1206;
    font-size: .68em;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 8px;
}
.mn-hero-ficha-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 14px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-bottom: 12px;
}
/* `contain` y con aire: las fotos de proveedor vienen en blanco sobre blanco y
   con `cover` se recortaban; sin aire, el articulo se pierde contra el fondo. */
.mn-hero-ficha-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    box-sizing: border-box;
}
.mn-hero-ficha-txt { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.mn-hero-ficha-txt b {
    color: #fff;
    font-size: .95em;
    line-height: 1.32;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mn-hero-ficha-precio {
    color: var(--mn-ambar, #ffb020);
    font-size: 1.5em;
    font-weight: 800;
    line-height: 1;
}

/* ── MOVIL ──
   A una columna: texto primero y ficha despues, a lo ancho. Es lo primero que
   se ve al entrar con el movil, que es como entra la mayoria de la gente. Y el
   relleno baja: 40px a cada lado en una pantalla de 390 deja el texto en una
   columna estrecha. */
@media (max-width: 900px) {
    .mn-hero-con-foto {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .mn-hero-ficha { max-width: 330px; }
    .mn-desde b { font-size: 1.4em; }
}

@media (max-width: 480px) {
    .mn-hero-ficha { max-width: none; }
    .mn-hero-ficha-foto { aspect-ratio: 4 / 3; }
    .mn-hero-cats a { font-size: .8em; padding: 6px 12px; }
}


/* =========================================================================
   LA PORTADA DE MISHU — BLOQUES GRANDES Y BUSCADOR
   =========================================================================
   Estas reglas pintan lo que sustituye al hero de texto: tres bloques
   grandes de categoría, un buscador ancho y los accesos por categoría.

   POR QUE BLOQUES GRANDES Y NO UNA REJILLA DENSA
   ----------------------------------------------
   En una tienda de mascotas se compra MIRANDO. Una foto ancha de una cama o
   de un rascador dice más que cualquier titular, y a diferencia de Kubik
   (tecnología, donde el cliente compara datos) aquí conviene que haya pocos
   elementos por pantalla y grandes.

   Los tres bloques llevan la foto A SANGRE (`object-fit: cover`) con un
   degradado oscuro debajo, porque el texto tiene que leerse sobre CUALQUIER
   foto: las hay claras (un colchón blanco) y oscuras (un transportín negro).
   Sin el degradado, el texto desaparece sobre la mitad de las fotos.
   ========================================================================= */

.mn-portada { margin-bottom: 26px; }

/* --- Los tres bloques grandes --- */
.mn-bloques {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.mn-bloque {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    min-height: 190px;
    text-decoration: none !important;
    /* El borde da el aire de "tarjeta"; sin él, la foto se pega al fondo. */
    border: 1px solid rgba(255,255,255,.09);
    background: #14102a;
    transition: transform .2s ease, border-color .2s ease;
}
.mn-bloque:hover {
    transform: translateY(-3px);
    border-color: var(--mn-ambar, #ffb020);
}

/* El bloque principal ocupa las dos columnas: jerarquía, no tres iguales */
.mn-bloque-primero {
    grid-column: 1 / -1;
    min-height: 240px;
}

.mn-bloque img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* `cover` y no `contain`: aquí la foto es AMBIENTE, no ficha de producto.
       Recortar un poco da igual; que queden franjas vacías, no. */
    object-fit: cover;
    transition: transform .45s ease;
}
.mn-bloque:hover img { transform: scale(1.04); }

/* El degradado: imprescindible para que el texto se lea sobre cualquier foto */
.mn-bloque-txt {
    position: absolute;
    inset: auto 0 0 0;
    padding: 44px 18px 16px;
    background: linear-gradient(
        to top,
        rgba(8,5,20,.94) 0%,
        rgba(8,5,20,.78) 42%,
        rgba(8,5,20,0) 100%
    );
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mn-bloque-txt b {
    font-size: 1.22em;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1.2;
}
.mn-bloque-txt span {
    font-size: .85em;
    color: rgba(255,255,255,.82);
}
.mn-bloque-primero .mn-bloque-txt b { font-size: 1.5em; }

/* --- El buscador ancho --- */
.mn-buscador-caja { margin-bottom: 26px; }

.mn-buscador {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.mn-buscador input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.05);
    color: #fff;
    font-size: 1em;
    /* 16px reales: por debajo de eso, iOS hace zoom al enfocar el campo y
       descoloca la página entera. */
    -webkit-appearance: none;
}
.mn-buscador input[type="search"]::placeholder { color: rgba(255,255,255,.45); }
.mn-buscador input[type="search"]:focus {
    outline: none;
    border-color: var(--mn-ambar, #ffb020);
    background: rgba(255,255,255,.08);
}

.mn-buscador button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 14px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--mn-ambar, #ffb020);
    color: #1a1200;
    font-weight: 700;
    font-size: .95em;
    cursor: pointer;
    transition: filter .18s ease;
}
.mn-buscador button:hover { filter: brightness(1.08); }

/* --- Los accesos por categoría --- */
.mn-accesos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mn-acceso {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 15px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    color: #fff !important;
    text-decoration: none !important;
    font-size: .9em;
    transition: border-color .18s ease, background .18s ease;
}
.mn-acceso:hover {
    border-color: var(--mn-ambar, #ffb020);
    background: rgba(255,176,32,.09);
}
.mn-acceso-cuenta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255,176,32,.18);
    color: var(--mn-ambar, #ffb020);
    font-size: .82em;
    font-weight: 700;
}

/* --- En móvil: un solo bloque por fila y botón de buscar compacto --- */
@media (max-width: 700px) {
    .mn-bloques {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .mn-bloque { min-height: 165px; }
    .mn-bloque-primero { min-height: 200px; }
    .mn-bloque-txt { padding: 38px 15px 14px; }
    .mn-bloque-txt b { font-size: 1.1em; }
    .mn-bloque-primero .mn-bloque-txt b { font-size: 1.25em; }

    /* El botón se queda solo con el icono para que el campo respire */
    .mn-buscador button { padding: 14px 16px; }
    .mn-buscador button svg { margin: 0; }
    .mn-acceso { font-size: .85em; padding: 9px 13px; }
}

/* El hero viejo, fuera: ya no se pinta */
.mn-hero { display: none !important; }