/* ============================================================
   Suculentas con Amor — CSS custom principal
   Se encola desde functions.php (handle: sca-main).
   Estilos globales y reutilizables de la tienda van aquí.
   ============================================================ */

/* ============================================================
   Tokens de marca — la paleta del sitio, en un solo sitio.
   Van en :root a propósito: son del sitio entero, no de un
   componente. El prefijo --sca- evita chocar con Divi y con WC.
   Paleta 3, aprobada el 02/10/2026: el verde bosque es la marca y
   el color de comprar; la terracota, el acento (precios, ofertas,
   enlaces); la terracota clara y el crema, lo cálido. Divi ya no
   tiene colores globales: la paleta es esta, y no hay otra.
   ============================================================ */
:root {
    --sca-blanco:          #ffffff;
    --sca-negro:           #111111;  /* negro suavizado: el #000 vibra en párrafos largos */
    --sca-bosque:          #173628;  /* verde de marca: botones de compra, bloques oscuros, pie.
                                        13,2:1 con texto blanco */
    --sca-bosque-hondo:    #0f271c;  /* hover de lo verde. 15,8:1 con texto blanco */
    --sca-salvia:          #dfe6de;  /* píldoras, antetítulos, checks, «hay stock».
                                        Texto bosque encima: 10,4:1 */
    --sca-niebla:          #f2f5f2;  /* fondos fríos y suaves: filas, fichas, opción elegida */
    --sca-terracota:       #953f1d;  /* acento: precios, ofertas, contador, enlaces, franja final */
    --sca-terracota-osc:   #7c3317;  /* hover de lo terracota. 8,96:1 con texto blanco */
    --sca-terracota-med:   #c77541;  /* decorativo: bordes y fondos con texto negro.
                                        Nunca como texto ni con blanco encima (3,47:1) */
    --sca-terracota-suave: #c7865f;  /* terracota clara, la del logo: decoración. Como texto
                                        no vale sobre blanco (3,00:1); sobre bosque hondo, sí (5,2:1) */
    --sca-terracota-pastel: #f2d3c1; /* interior de la insignia de oferta, con borde y texto
                                        terracota (4,9:1) */
    --sca-gris:            #6e6a67;  /* texto secundario. Cálido a propósito */
    --sca-linea:           #e5e2e0;
    --sca-crema:           #fff8f5;  /* blanco cálido: fondo de la cabecera y sus paneles */
    --sca-linea-calida:    #f5e0d8;  /* la línea que va con ese crema */
    --sca-ok:              var(--sca-bosque);          /* lo que sale bien: hay stock, Gratis,
                                                          envío conseguido, aviso de OK */
    --sca-enlace:          var(--sca-terracota);
    --sca-enlace-claro:    var(--sca-terracota-suave); /* enlaces sobre fondos oscuros (el pie) */
    --sca-error:           #9a1f16;  /* alejado del terracota a propósito */
}


/* ============================================================
   Side cart — carrito deslizante
   El JS (main.js) añade .is-open a overlay y drawer, y la clase
   sca-cart-open al <body>. El fondo NO se bloquea: sigue con scroll.
   ============================================================ */

/* Overlay oscuro de fondo */
.sca-cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999998;
}
.sca-cart-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* Panel deslizante (entra desde la derecha) */
.sca-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 380px;
    max-width: 90vw;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 999999;
    display: flex;
    flex-direction: column;
}
.sca-cart-drawer.is-open {
    transform: translateX(0);
}

/* Cabecera del panel */
.sca-cart-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
/* Icono + texto, a la altura de la ×. El padding-bottom que Divi pone a todos
   los h2 descentraba el título: el flex centraba la caja con el padding dentro
   y el texto quedaba unos 5 px más arriba que la ×.
   Misma tipografía que el título del panel de filtros (.sca-tienda__filtros-titulo
   en filtro-tienda.css): los dos paneles laterales se tienen que ver iguales. */
.sca-cart-drawer__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: normal;
    text-transform: uppercase;
}
.sca-cart-drawer__icono {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}
/* La × es un icono de Lucide: un svg se centra exacto, el glifo de la fuente no. */
.sca-cart-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: -6px; /* la × a ras del borde, como el texto del otro lado */
    background: none;
    border: 0;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #333;
    padding: 0;
}
.sca-cart-drawer__close svg {
    width: 22px;
    height: 22px;
}

/* Cuerpo scrollable con el mini-cart de WooCommerce */
.sca-cart-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px;
}

/* El fondo NO se bloquea cuando el carrito está abierto: la página sigue
   haciendo scroll por detrás del panel, igual que con el panel de "Filtrar y
   ordenar" de la tienda (que también marca el body y tampoco lo bloquea).

   Aquí había un `body.sca-cart-open { overflow: hidden }`. Al aplicarlo
   desaparecía la barra de scroll del navegador y la página entera se corría unos
   píxeles a la derecha: ese era el salto al abrir el carrito.

   La clase sca-cart-open se sigue poniendo desde main.js por si algún día hace
   falta colgar algo de ella. */

/* Ítem del carrito en el menú: icono Lucide + badge con el contador */
.sca-cart-toggle a {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.sca-cart-icon {
    width: 24px;
    height: 24px;
}
.sca-cart-count {
    position: absolute;
    top: 25px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--sca-terracota); /* terracota de marca */
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-weight: 600;
}
.sca-cart-count--empty {
    display: none;
}

/* ---- Mini-cart de WooCommerce dentro del panel ---- */
.sca-cart-drawer .woocommerce-mini-cart {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Cada línea: imagen a la izquierda (absoluta), texto a la derecha, botón
   quitar arriba a la derecha. El padding-left reserva el hueco de la imagen. */
.sca-cart-drawer .woocommerce-mini-cart li.mini_cart_item {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 16px 28px 16px 84px;
    min-height: 64px;
    border-bottom: 1px solid #eee;
}

/* Imagen del producto: fija a la izquierda, cuadrada y redondeada.
   float:none + width fuerzan sobre el estilo de WC (la flota a la dcha, 32px). */
.sca-cart-drawer .woocommerce-mini-cart li.mini_cart_item img {
    position: absolute;
    left: 0;
    top: 16px;
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    float: none !important;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: none;
}

/* Enlace con el nombre del producto (el <a> que envuelve imagen + texto). */
.sca-cart-drawer .woocommerce-mini-cart li.mini_cart_item > a:not(.remove) {
    display: block;
    color: #333;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}
.sca-cart-drawer .woocommerce-mini-cart li.mini_cart_item > a:not(.remove):hover {
    color: var(--sca-terracota);
}

/* Datos de variación (maceta, tamaño, etc.) si los hay. */
.sca-cart-drawer .woocommerce-mini-cart li.mini_cart_item .variation {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: #888;
}
.sca-cart-drawer .woocommerce-mini-cart li.mini_cart_item .variation dt,
.sca-cart-drawer .woocommerce-mini-cart li.mini_cart_item .variation dd {
    display: inline;
    margin: 0;
}

/* Cantidad × precio. */
.sca-cart-drawer .woocommerce-mini-cart li.mini_cart_item .quantity {
    display: block;
    margin-top: 6px;
    font-size: 0.9rem;
    color: #666;
}
.sca-cart-drawer .woocommerce-mini-cart li.mini_cart_item .quantity .amount {
    color: var(--sca-terracota);
    font-weight: 600;
}

/* Botón quitar (la ×): arriba a la derecha, redondo y discreto. */
.sca-cart-drawer .woocommerce-mini-cart li.mini_cart_item a.remove {
    position: absolute;
    top: 14px;
    right: 0;
    width: 22px;
    height: 22px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    font-size: 18px;
    color: #bbb !important;
    background: transparent;
    text-decoration: none;
}
.sca-cart-drawer .woocommerce-mini-cart li.mini_cart_item a.remove:hover {
    color: #fff !important;
    background: var(--sca-error);
}

/* Subtotal. */
.sca-cart-drawer .woocommerce-mini-cart__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 16px 0;
    padding-top: 4px;
    font-size: 1.05rem;
}
.sca-cart-drawer .woocommerce-mini-cart__total strong {
    font-weight: 600;
}
.sca-cart-drawer .woocommerce-mini-cart__total .amount {
    color: var(--sca-terracota);
    font-weight: 700;
}

/* Botonera: apiladas y a todo el ancho, con el redondeo de los botones del
   carrito y del checkout (10 px), que es donde se sigue la compra. */
.sca-cart-drawer .woocommerce-mini-cart__buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}
.sca-cart-drawer .woocommerce-mini-cart__buttons .button {
    width: 100%;
    margin: 0;
    /* !important en padding/line-height: Divi cambia el relleno en :hover y
       hacía "encoger" el botón. Lo bloqueamos para que no cambie de tamaño. */
    padding: 12px 16px !important;
    text-align: center;
    border-radius: 10px;
    font-weight: 600;
    line-height: 1 !important;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    /* "Ver carrito" (secundario): contorno verde. */
    background: transparent !important;
    color: var(--sca-bosque) !important;
    border: 1px solid var(--sca-bosque) !important;
}
/* Anula la flecha animada que Divi inyecta en el hover de sus botones. */
.sca-cart-drawer .woocommerce-mini-cart__buttons .button::after {
    display: none !important;
}
.sca-cart-drawer .woocommerce-mini-cart__buttons .button:hover {
    background: var(--sca-niebla) !important;
}
/* "Finalizar compra" (primario): verde sólido. */
.sca-cart-drawer .woocommerce-mini-cart__buttons .button.checkout {
    background: var(--sca-bosque) !important;
    color: #fff !important;
    border-color: var(--sca-bosque) !important;
}
.sca-cart-drawer .woocommerce-mini-cart__buttons .button.checkout:hover {
    background: var(--sca-bosque-hondo) !important;
    border-color: var(--sca-bosque-hondo) !important;
}

/* Carrito vacío (inc/cart-drawer.php). El mensaje de WooCommerce se oculta
   solo si está el bloque de abajo, que va calcado del de la página del carrito
   (.sca-carrito-vacio en carrito.css): con una copia vieja del mini-cart, de las
   que guarda el navegador, el panel no se queda en blanco. */
.sca-cart-drawer .widget_shopping_cart_content:has(.sca-cart-vacio) .woocommerce-mini-cart__empty-message {
    display: none;
}
.sca-cart-vacio {
    padding: 40px 8px;
    text-align: center;
}
.sca-cart-vacio__titulo {
    margin: 0 0 10px;
    padding: 0;
    color: var(--sca-negro);
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25;
}
.sca-cart-vacio__texto {
    margin: 0 0 24px;
    padding: 0;
    color: var(--sca-gris);
    font-size: 14px;
    line-height: 1.6;
}
/* Negro y no terracota: lleva a otra página, no compra nada. */
.sca-cart-vacio__boton {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 10px;
    background: var(--sca-negro);
    color: var(--sca-blanco) !important;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.sca-cart-vacio__boton:hover,
.sca-cart-vacio__boton:focus-visible {
    background: var(--sca-terracota);
}
/* Divi le mete a todo enlace con pinta de botón su flecha en el ::after. */
.sca-cart-vacio__boton::before,
.sca-cart-vacio__boton::after {
    display: none !important;
}

/* Barra de envío gratis (inc/tienda/envio-gratuito.php), arriba del todo y
   compacta: el texto en una línea (envio_texto_lateral) y debajo la barra con
   las cifras al lado, en vez de en una fila más.

   «Añade 59,99 € más para conseguir tu envío gratis» mide 298 px a 13 px. En
   el móvil el panel es el 90 % de la pantalla y no cabe, así que la letra baja
   con el ancho: 12,3 px a 390, 11,7 px a 375, 11,1 px a 360. Desde unos 415 px
   de pantalla se queda en 13. Si se alarga el texto, en el móvil se parte. */
.sca-cart-drawer .sca-envio {
    margin: 0 0 8px;
    padding: 10px 12px;
    font-size: clamp(11px, calc(3.9vw - 2.9px), 13px);
    line-height: 1.4;
}
.sca-cart-drawer .sca-envio--progreso {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6px 10px;
}
.sca-cart-drawer .sca-envio--progreso p {
    grid-column: 1 / -1;
    padding: 0;
}
.sca-cart-drawer .sca-envio__barra {
    height: 6px;
    margin: 0;
}
.sca-cart-drawer .sca-envio__cifras {
    font-size: 11px;
    white-space: nowrap;
}


/* ============================================================
   Ficha de producto — Ken Burns en hover sobre la imagen
   main.js inyecta .sca-kb-overlay (con la primera imagen de la
   galería como fondo) dentro del visor de la imagen principal.
   Al pasar el ratón: aparece esa imagen con un zoom/paneo lento.
   ============================================================ */
.sca-kb-anchor {
    position: relative; /* ancla para el overlay absoluto */
}
.sca-kb-overlay {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none; /* no bloquea clic, zoom ni lightbox de WC */
    z-index: 5;
}
.sca-kb-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    will-change: transform;
}
/* Hover sobre la imagen principal: aparece la 1ª de galería + Ken Burns */
.sca-kb-anchor:hover .sca-kb-overlay {
    opacity: 1;
}
.sca-kb-anchor:hover .sca-kb-image {
    animation: sca-ken-burns 8s ease-out forwards;
}
@keyframes sca-ken-burns {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(1.18) translate(-2.5%, -2.5%); }
}
/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .sca-kb-anchor:hover .sca-kb-image { animation: none; }
}
/* En los listados (Divi Shop) el ancla es el contenedor de la imagen. */
.et_shop_image.sca-kb-anchor {
    position: relative;
    display: block;
    overflow: hidden;
}
/* El Ken Burns se muestra por encima del overlay hover propio de Divi. */
.et_shop_image.sca-kb-anchor .sca-kb-overlay {
    z-index: 12;
}


/* ============================================================
   Listados — botón "+" de añadir rápido sobre la imagen
   main.js mueve el botón dentro del visor de imagen (.et_shop_image)
   y lo posiciona en la esquina inferior derecha. En desktop aparece
   al pasar el ratón; en táctil (móvil/tablet, sin hover) está siempre
   visible. Al pulsarlo añade por AJAX y abre el drawer.
   ============================================================ */
/* WooCommerce le pone margin-bottom:1em a la imagen del listado; como
   .et_shop_image tiene overflow:hidden, ese margen engorda el contenedor y el
   botón (bottom:0) se colaba por debajo del borde real. Lo quitamos para que el
   contenedor abrace la imagen y el botón quede pegado a su borde inferior. */
.woocommerce ul.products li.product .et_shop_image img,
.et_shop_image img {
    display: block;
    margin-bottom: 0 !important;
}

/* Desktop (por defecto): barra inferior ancha con texto, siempre visible. */
.sca-quick-add {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15; /* por encima del overlay Ken Burns (12) */
    height: 46px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    background: var(--sca-bosque); /* comprar es verde; la terracota queda para el precio */
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
}
.sca-quick-add:hover {
    background: var(--sca-bosque-hondo);
}
.sca-quick-add__icon {
    display: none; /* en desktop se usa el texto */
}
.sca-quick-add.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Desktop (con ratón): la barra está oculta y aparece al pasar el ratón. */
@media (hover: hover) {
    .sca-quick-add {
        opacity: 0;
        transform: translateY(100%); /* oculta bajo el borde (overflow hidden) */
        transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
    }
    .sca-kb-anchor:hover .sca-quick-add,
    .et_shop_image:hover .sca-quick-add {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Móvil y tablet (sin hover): botón "+" redondo en la esquina, siempre visible. */
@media (hover: none) {
    .sca-quick-add {
        left: auto;
        right: 12px;
        bottom: 12px;
        width: 44px;
        height: 44px;
        padding: 0;
        gap: 0;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    .sca-quick-add__icon {
        display: inline-flex;
    }
    .sca-quick-add__icon svg {
        width: 22px;
        height: 22px;
    }
    .sca-quick-add__text {
        display: none; /* en táctil se usa el icono "+" */
    }
}


/* ============================================================
   Navegación por tabs (Tipos / Regalos / Cuidados)
   Los botones .sca-tab[data-tab] (en un módulo Código de Divi)
   muestran la fila de Divi con la clase .sca-panel-<valor>. Cada
   fila que actúa de panel lleva .sca-tabpanel. El JS alterna
   .is-active; aquí ocultamos las filas inactivas.
   ============================================================ */
.sca-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    margin: 0 0 30px;
}
.sca-tab {
    padding: 10px 22px;
    border: 1px solid var(--sca-terracota);
    border-radius: 999px;
    background: transparent;
    color: var(--sca-terracota);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.sca-tab:hover {
    background: rgba(149, 63, 29, .09);
}
.sca-tab.is-active {
    background: var(--sca-terracota);
    color: #fff;
}

/* Paneles = filas de Divi. Solo se muestra la que tiene .is-active. */
.sca-tabpanel:not(.is-active) {
    display: none !important;
}
/* La fila que entra hace un fundido suave (evita el cambio brusco). */
.sca-tabpanel.is-active {
    animation: sca-tab-fade 0.4s ease;
}
@keyframes sca-tab-fade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .sca-tabpanel.is-active { animation: none; }
}


/* ============================================================
   Ken Burns corto en hover para módulos de imagen de Divi.
   Añade la clase .sca-kb-img al módulo Imagen (Avanzado → Clase CSS).
   Zoom/paneo lento al pasar el ratón, más corto (4s) que el de los
   listados de producto (8s).
   ============================================================ */
.sca-kb-img .et_pb_image_wrap,
.sca-kb-img .et_pb_image_wrap img {
    display: block;
}
.sca-kb-img .et_pb_image_wrap {
    overflow: hidden; /* recorta el zoom para que no desborde */
}
.sca-kb-img img {
    transform: scale(1);
    will-change: transform;
}
.sca-kb-img:hover img {
    animation: sca-ken-burns-short 4s ease-out forwards;
}
@keyframes sca-ken-burns-short {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(1.12) translate(-2%, -2%); }
}
@media (prefers-reduced-motion: reduce) {
    .sca-kb-img:hover img { animation: none; }
}


/* ============================================================
   Botón con la flecha en un círculo blanco — el único patrón de la web.
   Añade la clase .sca-flecha (Avanzado → Clase CSS) al módulo Botón, al
   «Añadir al carrito» de Woo o al Formulario de contacto (su botón de enviar), y sale la flecha dentro del
   círculo, a la derecha, siempre visible, tenga o no el icono activado
   en el módulo. Colores, tipografía, radio y rellenos se siguen
   eligiendo en el módulo.
   La flecha sale en verde bosque; si en el módulo eliges «Color del
   icono», manda ese: pon el del fondo del botón.
   No repitas esto en el CSS de una página.
   ============================================================ */
/* El hueco del círculo a la derecha gana al relleno del módulo: si no, la
   flecha tapa el texto. Los demás rellenos sí los pone el módulo. */
body #page-container .et_pb_section .et_pb_button.sca-flecha,
body #page-container .et_pb_section .et_pb_button.sca-flecha:hover,
body #page-container .et_pb_section .et_pb_module.sca-flecha .button,
body #page-container .et_pb_section .et_pb_module.sca-flecha .button:hover,
body #page-container .et_pb_section .et_pb_module.sca-flecha .et_pb_contact_submit,
body #page-container .et_pb_section .et_pb_module.sca-flecha .et_pb_contact_submit:hover,
body.single-product #page-container .et_pb_section .et_pb_wc_add_to_cart.sca-flecha form.cart .single_add_to_cart_button {
    padding-right: 64px !important;
}
.et_pb_button.sca-flecha:after,
.et_pb_module.sca-flecha .button:after,
.et_pb_module.sca-flecha .et_pb_contact_submit:after {
    color: var(--sca-bosque);
}
/* Más fuerte que la regla del icono que Divi escribe para cada botón
   (body #page-container .et_pb_section .et_pb_button_N:after). */
body #page-container .et_pb_section .et_pb_button.sca-flecha:after,
body #page-container .et_pb_section .et_pb_module.sca-flecha .button:after,
body #page-container .et_pb_section .et_pb_module.sca-flecha .et_pb_contact_submit:after {
    content: "\24";
    display: block !important;
    position: absolute;
    top: 50%;
    right: 8px;
    left: auto;
    width: 38px;
    height: 38px;
    margin: -19px 0 0 0 !important;
    border-radius: 50%;
    background: var(--sca-blanco);
    font-family: ETmodules !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 38px !important;
    text-align: center;
    opacity: 1 !important;
    transition: transform 0.25s ease;
}
body #page-container .et_pb_section .et_pb_button.sca-flecha:hover:after,
body #page-container .et_pb_section .et_pb_module.sca-flecha .button:hover:after,
body #page-container .et_pb_section .et_pb_module.sca-flecha .et_pb_contact_submit:hover:after {
    transform: translateX(3px);
}


/* ============================================================
   Tabs de PRODUCTOS por categoría (independiente de .sca-tab)
   -----------------------------------------------------------
   MONTAJE EN DIVI:
   1) Botones (módulo Código): un contenedor .sca-ptabs con un
      <button class="sca-ptab" data-ptab="VALOR"> por categoría.
      Marca uno con is-active como pestaña por defecto.
   2) Paneles (filas de Divi): a CADA fila-panel, en Avanzado →
      Clase CSS, ponle DOS clases: sca-ptabpanel  y
      sca-ppanel-VALOR (VALOR debe coincidir con el data-ptab).
      Dentro de esa fila metes los productos de esa categoría.
   VALOR: minúsculas, sin espacios ni acentos (ej. suculentas).
   -----------------------------------------------------------
   Los estilos .sca-ptabs/.sca-ptab de abajo son un punto de
   partida: cámbialos a tu gusto. NO borres la regla funcional
   .sca-ptabpanel:not(.is-active){display:none} — es la que
   oculta las categorías inactivas.
   ============================================================ */

/* ---- FUNCIONAL (no borrar): oculta las filas-panel inactivas ---- */
.sca-ptabpanel:not(.is-active) {
    display: none !important;
}
.sca-ptabpanel.is-active {
    animation: sca-ptab-fade 0.4s ease;
}
@keyframes sca-ptab-fade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .sca-ptabpanel.is-active { animation: none; }
}

/* ---- ESTILO (personalizable): pestañas de producto con subrayado ---- */
.sca-ptabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    margin: 0 0 30px;
}
.sca-ptab {
    padding: 10px 20px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #777;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.sca-ptab:hover {
    color: var(--sca-terracota);
}
.sca-ptab.is-active {
    color: var(--sca-terracota);
    border-bottom-color: var(--sca-terracota);
}


/* ============================================================
   Cinta / marquee de texto en bucle infinito (para módulo Código)
   -----------------------------------------------------------
   MARKUP (pégalo en un módulo Código donde quieras; edita solo
   el texto de .sca-marquee__group, UNA sola vez):

     <div class="sca-marquee">
       <div class="sca-marquee__track">
         <div class="sca-marquee__group">Tu texto&nbsp;•&nbsp;Otro mensaje&nbsp;•&nbsp;</div>
       </div>
     </div>

   El JS (main.js) duplica el grupo para que el bucle no tenga
   cortes. Opcionales (todo inline en el mismo div, sin tocar el CSS):
   - Fondo:    style="--sca-marquee-bg:#e8633a"
   - Texto:    style="--sca-marquee-color:#222"
   - Velocidad: style="--sca-marquee-duration:35s"  (+seg = +lento).
   - Sentido inverso: añade la clase  sca-marquee--reverse.
   (Se pueden combinar: style="--sca-marquee-bg:#111; --sca-marquee-color:#fff".)
   ============================================================ */
.sca-marquee {
    --sca-marquee-duration: 22s;
    --sca-marquee-bg: var(--sca-terracota);    /* fondo por defecto (override inline) */
    --sca-marquee-color: #fff;    /* texto por defecto (override inline) */
    overflow: hidden;
    width: 100%;
    background: var(--sca-marquee-bg);
    color: var(--sca-marquee-color);
    padding: 10px 0;       /* alto de la cinta */
}
.sca-marquee__track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    animation: sca-marquee-scroll var(--sca-marquee-duration) linear infinite;
    will-change: transform;
}
.sca-marquee--reverse .sca-marquee__track {
    animation-direction: reverse;
}
.sca-marquee__half {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}
.sca-marquee__group {
    white-space: nowrap;
    padding-right: 2.5rem;   /* separación entre repeticiones */
    font-weight: 600;
    letter-spacing: 0.02em;
}
/* Pausa al pasar el ratón (borra este bloque si no lo quieres). */
.sca-marquee:hover .sca-marquee__track {
    animation-play-state: paused;
}
@keyframes sca-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* Accesibilidad: sin movimiento para quien lo prefiere. */
@media (prefers-reduced-motion: reduce) {
    .sca-marquee__track {
        animation: none;
        width: 100%;
        justify-content: center;
    }
}


/* ============================================================
   Listados de producto — rejilla más compacta (separación)
   -----------------------------------------------------------
   La imagen mantiene su proporción original (sin recorte ni distorsión).
   Ajustes rápidos:
   - Nº por fila: --sca-shop-cols (escritorio) y los @media (tablet/móvil).
     En los módulos Tienda de Divi lo decide el módulo (ver más abajo).
   - Separación entre productos: --sca-shop-gap.
   ============================================================ */

/* La imagen llena el ancho de su celda manteniendo su proporción real. */
.woocommerce ul.products li.product .et_shop_image img,
.et_shop_image img {
    width: 100%;
    height: auto;
}

/* Clearfix de Divi/WC: al pasar a grid, ::before/::after se cuelan como
   celdas del grid y empujan un producto a la fila de abajo (dejando el
   hueco de arriba). Los anulamos para que las celdas sean solo productos. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.et_pb_shop ul.products::before,
.et_pb_shop ul.products::after {
    content: none !important;
    display: none !important;
}

/* Rejilla compacta: menos aire entre productos (gap parejo en filas y columnas). */
.woocommerce ul.products,
.et_pb_shop ul.products {
    display: grid !important;
    grid-template-columns: repeat(var(--sca-shop-cols, 4), minmax(0, 1fr));
    gap: var(--sca-shop-gap, 14px) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
/* Cada tarjeta ocupa su celda entera. En tablet y móvil, Divi y WooCommerce
   fijan anchos y márgenes con !important para su maquetación con float (48 %,
   45,25 %, 28,3 %… y márgenes del 4 al 11,5 %), con especificidad (0,4,2).
   Ganaban a los dos primeros selectores y dejaban la tarjeta a media celda. El
   tercero es (0,5,2) y les gana a todos: el :nth-child(n) solo suma
   especificidad, el mismo truco que usa Divi. */
.woocommerce ul.products li.product,
.et_pb_shop ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product:nth-child(n) {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
}
/* Menos columnas en pantallas pequeñas. */
@media (max-width: 980px) {
    .woocommerce ul.products,
    .et_pb_shop ul.products {
        grid-template-columns: repeat(var(--sca-shop-cols-tablet, 3), minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .woocommerce ul.products,
    .et_pb_shop ul.products {
        grid-template-columns: repeat(var(--sca-shop-cols-mobile, 2), minmax(0, 1fr));
    }
}
/* Módulos de Divi con rejilla de productos (Tienda, Productos relacionados y
   Ventas dirigidas): el nº por fila lo decide el módulo («Diseño de columnas»).
   Divi lo escribe como columns-N en el <ul> ("por defecto" sale columns-4, lo
   que marque WooCommerce) y aquí se pasa a la rejilla. Va sobre el propio
   <ul>, así que gana a cualquier --sca-shop-cols puesto más arriba (en la
   página o en el módulo). En tablet y móvil se queda en lo que diga el módulo
   si es menos de 3 y 2. Solo módulos de Divi: la tienda (/tienda/), con su
   selector de 3/4 por fila, y las categorías siguen con --sca-shop-cols. */
:is(.et_pb_shop, .et_pb_wc_related_products, .et_pb_wc_upsells) ul.products.columns-1 { --sca-shop-cols: 1; --sca-shop-cols-tablet: 1; --sca-shop-cols-mobile: 1; }
:is(.et_pb_shop, .et_pb_wc_related_products, .et_pb_wc_upsells) ul.products.columns-2 { --sca-shop-cols: 2; --sca-shop-cols-tablet: 2; --sca-shop-cols-mobile: 2; }
:is(.et_pb_shop, .et_pb_wc_related_products, .et_pb_wc_upsells) ul.products.columns-3 { --sca-shop-cols: 3; }
:is(.et_pb_shop, .et_pb_wc_related_products, .et_pb_wc_upsells) ul.products.columns-4 { --sca-shop-cols: 4; }
:is(.et_pb_shop, .et_pb_wc_related_products, .et_pb_wc_upsells) ul.products.columns-5 { --sca-shop-cols: 5; }
:is(.et_pb_shop, .et_pb_wc_related_products, .et_pb_wc_upsells) ul.products.columns-6 { --sca-shop-cols: 6; }


/* ============================================================
   Tarjeta vertical 3:4 en el módulo Tienda de Divi
   -----------------------------------------------------------
   Para que una rejilla de Divi saque las fotos como /tienda/: clase
   sca-tarjeta-vertical en el módulo (Avanzado > ID y clases CSS).
   inc/imagenes.php le sirve el archivo vertical (sca_tarjeta, 400x533)
   y aquí se fija la proporción, con la misma regla que la tienda tiene
   en filtro-tienda.css: object-fit recorta sin deformar las fotos que
   no son 3:4. Las columnas no se tocan.
   Va después de la regla de .et_shop_image img de arriba a propósito:
   misma especificidad, así que gana por orden.
   ============================================================ */
.sca-tarjeta-vertical ul.products li.product .et_shop_image,
.sca-tarjeta-vertical ul.products li.product .et_shop_image img {
    aspect-ratio: 3 / 4;
}
.sca-tarjeta-vertical ul.products li.product .et_shop_image img {
    height: 100%;
    object-fit: cover;
}


/* ============================================================
   Módulos Tienda y Blog de Divi: barra, paginación y carga sin recargar
   -----------------------------------------------------------
   La paginación con el aspecto de la de /tienda/ (.sca-tienda__pagina
   en filtro-tienda.css): cuadros de 40px con borde fino, la página
   actual en terracota. La misma para la de WooCommerce de los módulos
   Tienda y para .sca-paginacion, la numerada del Blog y de los
   archivos de Divi (includes/navigation.php). La carga sin recargar la
   hace main.js; mientras llega, el listado se apaga como en la tienda.
   Lo de WooCommerce va con .et_pb_shop delante, que además de acotarlo
   a los módulos le da fuerza para ganar a woocommerce.css.
   ============================================================ */
.et_pb_shop .woocommerce,
.et_pb_module .et_pb_ajax_pagination_container {
    transition: opacity .18s ease;
}

.et_pb_shop .woocommerce[aria-busy="true"],
.et_pb_module .et_pb_ajax_pagination_container[aria-busy="true"] {
    opacity: .4;
    pointer-events: none;
}

/* Al cambiar de página se sube al principio del listado (scrollIntoView en
   main.js y en filtro-tienda.js). La cabecera va fija y vuelve a salir al
   subir: sin este margen tapaba lo primero del listado (86px: el contador,
   el desplegable y el borde de arriba de la primera fila). */
.et_pb_shop,
.et_pb_blog_grid_wrapper,
.et_pb_posts,
.sca-tienda {
    scroll-margin-top: calc(var(--sca-h-real, 85px) + var(--sca-h-tope, 0px) + 24px);
}

.et_pb_shop .woocommerce nav.woocommerce-pagination,
.sca-paginacion {
    margin-top: 44px;
}

/* En el Blog en rejilla, salvattore coloca las columnas con float: sin el clear
   la paginación, que es una fila flex, se metía en el hueco de su derecha y salía
   en vertical encima de la última columna. Con clear el margen de arriba se lo
   come el propio clear (queda pegada a la última fila), así que el aire va de
   relleno. */
.sca-paginacion {
    clear: both;
    margin-top: 0;
    padding-top: 44px;
}

/* Y en la rejilla va también flotada, a todo el ancho. Si el módulo lleva una
   altura fija (el del blog, en sus ajustes), su contenido se sale de la caja: las
   columnas, que flotan, siguen empujando la sección porque la fila de Divi las
   limpia, pero un bloque normal no, y la paginación acababa encima del pie. */
.et_pb_blog_grid .sca-paginacion {
    float: left;
    width: 100%;
    /* Cada entrada de la rejilla ya deja 30px debajo (margen de Divi): con estos 14
       el hueco hasta los números es de 44px, el mismo que en los productos. */
    padding-top: 14px;
}

/* #left-area: en las plantillas de archivo de Divi (sin Theme Builder) sus
   listas llevan viñeta y sangrado desde una regla con ID, que a clases no se
   le gana. */
.et_pb_shop .woocommerce nav.woocommerce-pagination ul.page-numbers,
.sca-paginacion ul.page-numbers,
#left-area .sca-paginacion ul.page-numbers {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    white-space: normal;
}

.et_pb_shop .woocommerce nav.woocommerce-pagination ul.page-numbers li,
.sca-paginacion ul.page-numbers li,
#left-area .sca-paginacion ul.page-numbers li {
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    overflow: visible;
}

.et_pb_shop .woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers,
.sca-paginacion ul.page-numbers li .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--sca-linea);
    border-radius: 0;
    background: transparent;
    color: var(--sca-negro);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.et_pb_shop .woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.et_pb_shop .woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible,
.sca-paginacion ul.page-numbers li a.page-numbers:hover,
.sca-paginacion ul.page-numbers li a.page-numbers:focus-visible {
    border-color: var(--sca-terracota);
    background: transparent;
    color: var(--sca-terracota);
}

.et_pb_shop .woocommerce nav.woocommerce-pagination ul.page-numbers li span.page-numbers.current,
.sca-paginacion ul.page-numbers li span.page-numbers.current {
    border-color: var(--sca-terracota);
    background: var(--sca-terracota);
    color: var(--sca-blanco);
}

/* Los puntos suspensivos no son un botón: sin recuadro. */
.et_pb_shop .woocommerce nav.woocommerce-pagination ul.page-numbers li span.page-numbers.dots,
.sca-paginacion ul.page-numbers li span.page-numbers.dots {
    min-width: 0;
    padding: 0 4px;
    border-color: transparent;
}

/* Barra de arriba: «Mostrando 1–12 de 41 resultados» a la izquierda y el
   desplegable de orden a la derecha. El desplegable copia el botón
   «Filtrar y ordenar» de /tienda/ (borde negro de 1px, esquinas de 5px,
   38px de alto, mayúsculas espaciadas), pero en Poppins, como el
   contador. Divi los pintaba en gris claro (el #999 no llega al contraste
   mínimo) y el desplegable como una píldora gris. */
.et_pb_shop .woocommerce .woocommerce-result-count {
    float: left;
    margin: 0 0 26px;
    padding: 0;
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 38px;   /* la altura del desplegable: quedan centrados */
    color: var(--sca-gris);
}

.et_pb_shop .woocommerce .woocommerce-ordering {
    float: right;
    margin: 0 0 26px;
}

/* La flecha es propia (sin appearance el navegador no pinta la suya). Va en
   un SVG de fondo, donde no se pueden usar variables: #111111 es
   --sca-negro y #ffffff el blanco del hover. */
.et_pb_shop .woocommerce .woocommerce-ordering select.orderby {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    height: 38px;
    max-width: 100%;
    margin: 0;
    padding: 0 40px 0 16px;
    border: 1px solid var(--sca-negro);
    border-radius: 5px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23111111' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px;
    /* !important porque el CSS crítico de Divi trae .orderby { color: #666 !important }. */
    color: var(--sca-negro) !important;
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.et_pb_shop .woocommerce .woocommerce-ordering select.orderby:hover {
    background-color: var(--sca-negro);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E");
    color: var(--sca-blanco) !important;   /* si no, el negro !important de arriba lo tapa */
}

.et_pb_shop .woocommerce .woocommerce-ordering select.orderby:focus-visible {
    outline: 2px solid var(--sca-terracota);
    outline-offset: 2px;
}

/* La lista desplegada, en caja normal y sobre blanco: si heredara el hover,
   en algunos navegadores saldría blanco sobre blanco. */
.et_pb_shop .woocommerce .woocommerce-ordering select.orderby option {
    background: var(--sca-blanco);
    color: var(--sca-negro);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

/* Móvil: no caben en una fila; van uno debajo del otro, a todo el ancho. */
@media (max-width: 600px) {
    .et_pb_shop .woocommerce .woocommerce-result-count,
    .et_pb_shop .woocommerce .woocommerce-ordering {
        float: none;
    }

    .et_pb_shop .woocommerce .woocommerce-result-count {
        margin-bottom: 10px;
        line-height: 1.4;
    }

    .et_pb_shop .woocommerce .woocommerce-ordering select.orderby {
        width: 100%;
    }
}


/* ============================================================
   Módulo Blog de Divi — zoom de la foto al pasar el ratón
   El mismo que las fotos del megamenú y de la tira de categorías
   de la tienda: la foto crece un 6% dentro de su marco. Salta al
   pasar por cualquier parte de la tarjeta, igual que en el
   megamenú salta también al pasar por el nombre.
   ============================================================ */
.et_pb_module .et_pb_post .entry-featured-image-url {
    display: block;
    overflow: hidden; /* recorta el zoom al marco de la foto */
}

.et_pb_module .et_pb_post .entry-featured-image-url img {
    transition: transform .45s ease;
}

/* Las esquinas redondeadas de la tarjeta las pone el módulo: sin esto, Safari
   las deja en pico mientras dura el zoom. */
.et_pb_module .et_pb_post {
    isolation: isolate;
}

@media (hover: hover) {
    .et_pb_module .et_pb_post:hover .entry-featured-image-url img {
        transform: scale(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .et_pb_module .et_pb_post .entry-featured-image-url img {
        transition: none;
    }

    .et_pb_module .et_pb_post:hover .entry-featured-image-url img {
        transform: none;
    }
}


/* ============================================================
   Precio con descuento (inc/tienda/descuento-categoria.php)
   Precio anterior tachado + precio rebajado + etiqueta de %.
   ============================================================ */
.sca-precio__antes {
    margin-right: 8px;
    color: #777;
    text-decoration: line-through;
}
.sca-precio__ahora {
    color: var(--sca-error);
    font-weight: 700;
}
.sca-precio__badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--sca-error);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
}


/* ============================================================
   Envío gratuito: barra de progreso (inc/tienda/envio-gratuito.php)
   Shortcode [sca_barra_envio]. Tres estados: progreso, ok y excluido.
   ============================================================ */
.sca-envio {
    margin: 0 0 20px;
    padding: 14px 16px;
    border-radius: 8px;
    background: #f6f6f4;
    font-size: 15px;
}
.sca-envio p {
    margin: 0;
}
.sca-envio--ok {
    background: var(--sca-salvia);
    color: var(--sca-ok);
    font-weight: 600;
}
.sca-envio--excluido {
    background: #fdf0e6;
    color: #a8420b;
}
/* Barra */
.sca-envio__barra {
    height: 8px;
    margin: 10px 0 6px;
    border-radius: 999px;
    background: var(--sca-linea);
    overflow: hidden;
}
.sca-envio__relleno {
    height: 100%;
    border-radius: 999px;
    background: var(--sca-ok);
    transition: width 0.4s ease;
}
.sca-envio__cifras {
    font-size: 13px;
    opacity: 0.7;
}


/* ============================================================
   Campo de texto personalizado (inc/tienda/campo-personalizado.php)
   Se pinta en la ficha, justo encima del botón de añadir al carrito.
   ============================================================ */
.sca-campo {
    margin: 0 0 20px;
}
.sca-campo__label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}
.sca-campo__req {
    color: var(--sca-error);
}
.sca-campo__input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.4;
}
.sca-campo__input:focus {
    border-color: var(--sca-terracota);
    outline: none;
}
/* En rojo solo después de tocarlo o de intentar añadir sin rellenar: antes,
   un campo obligatorio salía en rojo nada más cargar la ficha. */
.sca-campo__input:user-invalid {
    border-color: var(--sca-error);
}
/* La cantidad de la ficha: Divi la deja en 4,3em con 16px de relleno por
   lado y, con las flechas del número, un «10» ya no cabía. Gana por
   especificidad a .et_pb_wc_add_to_cart .quantity input.qty (CSS crítico). */
.single-product .et_pb_wc_add_to_cart .quantity input.qty {
    width: 5.5em;
    max-width: none;
    padding-right: 6px;
    padding-left: 12px;
}
/* Cantidad y botón en una fila: el botón ocupa lo que queda. El ancho lo
   daba el relleno del 34,5 % por lado del módulo «Añadir al carrito» de la
   plantilla, y con eso el botón caía debajo de la cantidad en cuanto esta
   crecía un poco. Lo demás que haya en el formulario (el cuadro de campos, los
   componentes de una bandeja) va a todo el ancho, encima. */
.single-product .et_pb_wc_add_to_cart form.cart:not(.variations_form),
.single-product .et_pb_wc_add_to_cart .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    column-gap: 12px;
}
.single-product .et_pb_wc_add_to_cart form.cart:not(.variations_form) > :not(.quantity):not(.single_add_to_cart_button),
.single-product .et_pb_wc_add_to_cart .woocommerce-variation-add-to-cart > :not(.quantity):not(.single_add_to_cart_button) {
    flex: 0 0 100%;
}
.single-product .et_pb_wc_add_to_cart form.cart div.quantity {
    flex: 0 0 auto;
    margin-right: 0 !important;
}
/* Con una sola unidad (o un producto que se vende de uno en uno) WooCommerce
   deja la caja de cantidad vacía, con la cifra en un input oculto. La caja
   seguía ocupando su hueco y el botón no llegaba al final: fuera entera, y el
   botón se queda con todo el ancho. */
.single-product .et_pb_wc_add_to_cart form.cart div.quantity:has(input[type="hidden"]) {
    display: none !important;
}
/* Solo en la ficha de producto: fuera de ella (la página del e-book) el botón
   lleva los rellenos de su módulo. */
body.single-product #page-container .et_pb_section .et_pb_wc_add_to_cart form.cart .single_add_to_cart_button,
body.single-product #page-container .et_pb_section .et_pb_wc_add_to_cart form.cart .single_add_to_cart_button:hover {
    flex: 1 1 0;
    min-width: 0;
    padding-right: 1em !important;
    padding-left: 2.4em !important; /* sitio para el icono de la bolsa */
}
/* Todo en un cuadro: opciones (maceta…), fecha y texto. */
.sca-campos {
    margin: 0 0 18px;
    padding: 18px 18px 2px;
    background: var(--sca-niebla);
    border: 1px solid var(--sca-linea);
    border-radius: 12px;
}
.sca-campos .sca-campo {
    margin: 0 0 14px;
}
.sca-campos .sca-campo__input {
    background: var(--sca-blanco);
}
/* Fecha del evento y nº de etiqueta, lado a lado (uno debajo de otro en el móvil). */
.sca-campos__fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    column-gap: 14px;
}
.sca-campos textarea.sca-campo__input {
    height: 84px;
}
/* Las opciones como botones; el desplegable de WooCommerce queda oculto
   pero sigue mandando (el JS de campo-personalizado.php lo maneja). */
form.variations_form.sca-con-opciones table.variations,
form.variations_form:has(.sca-campos__opciones) table.variations,
form.variations_form.sca-con-opciones .woocommerce-variation-price,
form.variations_form:has(.sca-campos__opciones) .woocommerce-variation-price {
    display: none; /* el precio de cada opción ya va en su botón */
}
.sca-opciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}
.sca-opcion {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 14px;
    background: var(--sca-blanco);
    border: 1.5px solid var(--sca-linea);
    border-radius: 10px;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.sca-opcion:hover {
    border-color: var(--sca-gris);
}
.sca-opcion[aria-pressed="true"] {
    border-color: var(--sca-bosque);
    box-shadow: inset 0 0 0 1px var(--sca-bosque);
}
.sca-opcion:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.sca-opcion__nombre {
    font-size: 15px;
    font-weight: 600;
    color: var(--sca-negro);
}
.sca-opcion__precio {
    font-size: 13px;
    color: var(--sca-gris);
}
/* Números (tarjeta del cofre…): cuadraditos con el número, un radio debajo. */
.sca-opciones--numeros {
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    max-width: 320px;
}
.sca-opcion--numero {
    position: relative;
    align-items: center;
    padding: 10px 0;
}
.sca-opcion--numero input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.sca-opcion--numero:has(input:checked) {
    border-color: var(--sca-bosque);
    box-shadow: inset 0 0 0 1px var(--sca-bosque);
}
.sca-opcion--numero:has(input:focus-visible) {
    outline: 2px solid var(--sca-bosque);
    outline-offset: 2px;
}
.sca-campo__ayuda {
    margin: 4px 0 0;
    font-size: 13px;
    opacity: 0.7;
}
/* Cómo se ve el texto en el carrito y en el drawer. */
.sca-campo__carrito {
    margin-top: 4px;
    font-size: 0.9em;
    opacity: 0.85;
}
/* Productos compuestos de WPC (bandeja de 7…): los huecos en el mismo cuadro
   que los campos y en dos columnas, que siete desplegables uno debajo de otro
   empujaban el botón muy abajo. La lista «Suculenta 1: …» repetía lo que ya
   dicen los desplegables. */
.single-product .wooco-wrap {
    margin: 0 0 18px;
    padding: 18px;
    background: var(--sca-niebla);
    border: 1px solid var(--sca-linea);
    border-radius: 12px;
}
.single-product .wooco-components {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}
.single-product .wooco_component {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
}
.single-product .wooco_component_name {
    margin: 0 0 6px;
    font-weight: 600;
}
.single-product .wooco-wrap .dd-select {
    background: var(--sca-blanco) !important; /* el plugin lo pone en línea */
    border: 1px solid var(--sca-linea);
    border-radius: 8px;
}
.single-product .wooco-wrap .dd-selected {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    padding: 6px 28px 6px 6px;
    font-weight: 400;
    line-height: 1.3;
}
.single-product .wooco-wrap .dd-selected-image {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 4px;
    object-fit: cover;
}
.single-product .wooco-wrap .dd-selected-text {
    flex: 1 1 0;
    min-width: 0;
    font-size: 13px;
    cursor: pointer;
}
.single-product .wooco-wrap .dd-selected-description {
    flex: 0 0 100%;
    margin: 2px 0 0;
    font-size: 12px;
}
.single-product .wooco-wrap .dd-selected-description p {
    margin: 0;
    padding: 0;
}
/* La lista abierta, más ancha que su columna; la de la derecha se abre hacia dentro. */
.single-product .wooco-wrap .dd-options {
    min-width: 300px;
}
.single-product .wooco_component:nth-child(even) .dd-options {
    right: 0;
    left: auto;
}
.single-product .wooco-wrap .wooco-selected {
    display: none !important;
}
.single-product .wooco-wrap .wooco-summary {
    margin-top: 12px;
}
/* Con precio fijo, «Precio total» repite el precio de arriba. */
.single-product .wooco-wrap:has(.wooco-components[data-pricing="only"]) .wooco-summary {
    display: none;
}
/* En el móvil la columna no da para foto y nombre: fuera la foto del
   seleccionado (en la lista abierta sigue). */
@media (max-width: 600px) {
    .single-product .wooco-wrap {
        padding: 14px 12px;
    }
    .single-product .wooco-components {
        column-gap: 10px;
    }
    .single-product .wooco-wrap .dd-selected-image {
        display: none;
    }
    .single-product .wooco-wrap .dd-selected {
        padding-left: 10px;
    }
    .single-product .wooco-wrap .dd-options {
        min-width: 260px;
    }
}


/* ============================================================
   Insignias de producto (inc/tienda/insignia-producto.php)
   Banda "Nuevo" automática o banda manual por producto.
   --flotante = sobre la imagen (listado y ficha).
   Sin modificador = en línea, para el shortcode [sca_insignia].
   ============================================================ */
/* La misma píldora que el tag de maceta (más abajo): 27px, radio
   completo, Poppins 600 sin mayúsculas. Borde y texto en el color de la
   insignia (--sca-insignia-color, que el PHP pone en línea: el de
   «Nuevo» o el manual del producto) y el interior, ese color muy aclarado
   hacia un blanco cálido: con el negro sale un gris pastel. */
.sca-insignia {
    --sca-insignia-color: var(--sca-negro);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 27px;
    padding: 0 11px;
    border: 1px solid var(--sca-insignia-color); /* el mismo grosor que el tag de maceta */
    border-radius: 999px;
    background: color-mix(in srgb, var(--sca-insignia-color) 10%, #f7f1ec);
    color: var(--sca-insignia-color);
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
/* Variante sobre la imagen. */
.sca-insignia--flotante {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 14; /* por encima del overlay Ken Burns (12) */
    pointer-events: none;
}
/* Insignia de oferta (inc/tienda/insignia-oferta.php): el span.onsale de
   WooCommerce con las clases de la insignia, para que mida lo mismo que
   «Nuevo». El CSS crítico de Divi le pone a .onsale relleno, radio, fondo,
   posición y peso con !important: de ahí la especificidad y los !important. */
.woocommerce span.onsale.sca-insignia--oferta,
.woocommerce-page span.onsale.sca-insignia--oferta,
.woocommerce ul.products li.product span.onsale.sca-insignia--oferta,
.et_pb_module ul.products li.product span.onsale.sca-insignia--oferta {
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    z-index: 14;
    margin: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: inline-flex !important;
    gap: 4px;
    height: 27px !important;
    padding: 0 11px 0 8px !important; /* como el tag de maceta: el icono va pegado al borde */
    border: 1px solid var(--sca-terracota) !important;
    border-radius: 999px !important;
    background: var(--sca-terracota-pastel) !important;
    color: var(--sca-terracota) !important;
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 12px;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
/* La etiqueta de precio a la izquierda del descuento. */
.sca-insignia__icono {
    display: block;
    flex: none;
    width: 13px;
    height: 13px;
}
/* Con oferta y «Nuevo» a la vez, «Nuevo» baja debajo: 27 px de alto + 6.
   En el listado son hermanos; en la ficha, la oferta la pinta el módulo de
   galería de Divi y «Nuevo» va dentro de la galería. */
.sca-insignia--oferta ~ .sca-insignia--flotante,
.et_pb_wc_images:has(.sca-insignia--oferta) .sca-insignia--flotante:not(.sca-insignia--oferta) {
    top: 43px;
}
/* Ancla del posicionamiento: la tarjeta del listado y la galería de la
   ficha. No dependemos de las clases que añade el JS. */
.woocommerce ul.products li.product,
.et_pb_shop ul.products li.product,
.woocommerce div.product div.images {
    position: relative;
}


/* ============================================================
   Maceta en la tarjeta (inc/tienda/maceta-tarjeta.php)
   Tag con el icono de una maceta y su tamaño sobre la foto del
   listado. Es la píldora de la paleta: salvia, borde y texto bosque.
   Con ratón va arriba a la derecha, enfrente de la insignia, y con
   su misma altura (27px) para que las dos queden a la par.
   ============================================================ */
.sca-maceta-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 14; /* como la insignia: por encima del Ken Burns (12) */
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 27px;
    padding: 0 11px 0 8px;
    border: 1px solid var(--sca-bosque);
    border-radius: 999px;
    background: var(--sca-salvia);
    color: var(--sca-bosque);
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none; /* el clic sigue yendo a la ficha */
}
/* Medida fija también para el <i> que Lucide aún no ha cambiado por
   su SVG: así el tag no crece de golpe al cargar. */
.sca-maceta-tag__icono {
    display: block;
    flex: none;
    width: 15px;
    height: 15px;
}

/* Táctil: arriba no cabe al lado de «Nuevo» o «¡Oferta!» en una
   tarjeta de 130px, así que baja a la izquierda, centrado con el «+»
   (44px a 12px del borde: su centro queda a 34px y el tag mide 24). */
@media (hover: none) {
    /* Hasta que main.js lo mete en la foto cuelga de la tarjeta y
       saldría encima de la insignia: no se enseña hasta entonces. */
    .sca-maceta-tag[data-sca-mt] {
        visibility: hidden;
    }
    .et_shop_image .sca-maceta-tag {
        top: auto;
        right: auto;
        bottom: 22px;
        left: 10px;
        gap: 4px;
        height: 24px;
        padding: 0 9px 0 7px;
        font-size: 11px;
    }
    .et_shop_image .sca-maceta-tag__icono {
        width: 13px;
        height: 13px;
    }
}
/* Móviles estrechos: sin el «cm», que si no toca el «+». */
@media (hover: none) and (max-width: 399px) {
    .sca-maceta-tag__unidad {
        display: none;
    }
}


/* ============================================================
   Ficha de producto — sin zoom al pasar el ratón
   WooCommerce amplía la foto en hover pintando encima una copia
   grande (.zoomImg). Se esconde esa copia y el zoom deja de verse.
   El zoom no se quita en PHP a propósito: WooCommerce solo pinta
   la lupa de la esquina (la que abre el lightbox) si el zoom está
   activo, y la lupa se queda.
   ============================================================ */
.woocommerce-product-gallery .zoomImg {
    display: none !important; /* gana al display inline que pone el JS del zoom */
}


/* ============================================================
   Indicador de stock (inc/tienda/notificacion-stock-producto.php)
   Shortcode [sca_stock]. Tres estados: --bajo (urgencia), --ok
   (informativo) y --agotado. Ajusta aquí los colores si no encajan con el diseño.
   ============================================================ */
.sca-stock {
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
}
/* Quedan pocas unidades: llama la atención. */
.sca-stock--bajo {
    background: #fdf0e6;
    color: #a8420b;
}
/* Hay stock de sobra: informativo, discreto. */
.sca-stock--ok {
    background: var(--sca-salvia);
    color: var(--sca-ok);
}
/* Agotado: neutro. Que se lea claro, sin competir con el naranja de urgencia. */
.sca-stock--agotado {
    background: var(--sca-linea);
    color: var(--sca-negro);
}

/* Tablas dentro del acordeón de la ficha (acordeones extra de
   inc/producto-info-tabs.php: p. ej. los descuentos por cantidad). */
.single-product .et_pb_accordion .et_pb_toggle_content table {
    width: 100%;
    max-width: 420px;
    margin: 4px 0 18px;
    border-collapse: collapse;
    font-size: 14px;
}
.single-product .et_pb_accordion .et_pb_toggle_content th,
.single-product .et_pb_accordion .et_pb_toggle_content td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--sca-linea);
    text-align: center;
}
.single-product .et_pb_accordion .et_pb_toggle_content th {
    background: var(--sca-niebla);
    font-weight: 600;
}


/* ============================================================
   Toast de avisos (errores del carrito, etc.)
   Lo crea el JS (main.js, showToast) y lo muestra con .is-open.
   Flotante abajo a la derecha; por encima del drawer.
   ============================================================ */
.sca-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000000; /* el drawer usa 999998/999999 */
    max-width: 360px;
    padding: 20px 24px;
    border-radius: 8px;
    background: var(--sca-negro);
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.sca-toast.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* Variante de error (no se pudo añadir al carrito). */
.sca-toast--error {
    background: var(--sca-error);
}
/* Variante neutra / confirmación. */
.sca-toast--ok {
    background: var(--sca-ok);
}

/* En móvil ocupa el ancho con margen, abajo. */
@media (max-width: 600px) {
    .sca-toast {
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: none;
    }
}


/* ============================================================
   Emojis convertidos a imagen por WordPress
   El editor de WP sustituye los emojis por <img class="emoji">
   (SVG remoto de s.w.org). Sin CSS, ese SVG no tiene tamaño
   intrínseco y se estira al ancho del contenedor. Esta es la
   regla canónica de WP, aquí para que también aplique dentro de
   los módulos de Divi (descripciones de producto, etc.).
   ============================================================ */
img.emoji {
    display: inline !important;
    width: 1em !important;
    height: 1em !important;
    max-width: 1em !important;
    margin: 0 0.07em !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    vertical-align: -0.1em !important;
}

/* ============================================================
   Botón "Ver producto" del listado (inc/tienda/boton-listado.php)
   Ocupa el lugar del botón "+" en los productos que obligan a pasar
   por la ficha. Mismo comportamiento: barra sobre el borde inferior
   de la imagen que sube al pasar el ratón. Diferencia en táctil: aquí
   se queda como barra fija (el texto es lo que importa; el "+" se
   convierte en icono redondo porque se explica solo).
   ============================================================ */
.sca-ver-producto {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15; /* por encima del overlay Ken Burns (12) */
    height: 46px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: var(--sca-negro); /* negro, distinto del "+" terracota: no añade, lleva a la ficha */
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease;
}
.sca-ver-producto:hover,
.sca-ver-producto:focus {
    background: #2b3327;
    color: #fff;
    text-decoration: none;
}

/* Con ratón: oculto bajo el borde inferior y sube al pasar por encima. */
@media (hover: hover) {
    .sca-ver-producto {
        opacity: 0;
        transform: translateY(100%);
        transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
    }
    .sca-kb-anchor:hover .sca-ver-producto,
    .et_shop_image:hover .sca-ver-producto {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   Personas interesadas (inc/tienda/personas-interesadas.php)
   Aviso de prueba social bajo el botón de añadir al carrito.
   ============================================================ */
.sca-interesados {
    margin: 14px 0 0;
    padding: 8px 12px;
    border-radius: 6px;
    background: #f6f6f4;
    font-size: 14px;
    line-height: 1.4;
}


/* ============================================================
   Pedido por WhatsApp (inc/tienda/checkout-whatsapp.php)
   Bloque alternativo bajo el botón de pagar en el checkout.
   El PHP lo imprime con [hidden]; el JS lo revela cuando el
   checkout está completo y el método de pago lo permite.
   ============================================================ */
.sca-wa {
    margin: 20px 0 0;
    text-align: center;
}
.sca-wa[hidden] {
    display: none;
}
.sca-wa__sep {
    height: 1px;
    margin: 0 0 20px;
    background: var(--sca-linea);
}
.sca-wa__boton {
    width: 100%;
    background: #25d366 !important; /* verde WhatsApp */
    color: #fff !important;
    border-color: #25d366 !important;
}
.sca-wa__boton:hover {
    background: #1da851 !important;
    border-color: #1da851 !important;
}
.sca-wa__boton[disabled] {
    opacity: 0.6;
    cursor: default;
}
.sca-wa__nota {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.4;
    opacity: 0.75;
}


/* ============================================================
   Botón flotante de WhatsApp (inc/tienda/whatsapp-flotante.php)
   Abajo a la IZQUIERDA, como en la web antigua: a la derecha
   salen los avisos (.sca-toast). Por debajo del velo del menú
   móvil (9985) y del carrito lateral (999998), que lo tapan.
   ============================================================ */
.sca-wa-flotante {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 9980;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366; /* verde WhatsApp, como .sca-wa__boton */
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.sca-wa-flotante:hover,
.sca-wa-flotante:focus-visible {
    background: #1da851;
    color: #fff;
    transform: scale(1.06);
}
.sca-wa-flotante__icono {
    width: 30px;
    height: 30px;
}

/* La etiqueta sale al pasar el ratón, a la derecha del botón. En táctil no:
   no hay «pasar por encima» y se quedaría pegada tras el toque. */
.sca-wa-flotante__texto {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    color: var(--sca-negro);
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translate(-6px, -50%);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}
@media (hover: hover) {
    .sca-wa-flotante:hover .sca-wa-flotante__texto,
    .sca-wa-flotante:focus-visible .sca-wa-flotante__texto {
        opacity: 1;
        visibility: visible;
        transform: translate(0, -50%);
    }
}

@media (max-width: 600px) {
    .sca-wa-flotante {
        left: 16px;
        bottom: 16px;
        width: 52px;
        height: 52px;
    }
    .sca-wa-flotante__icono {
        width: 28px;
        height: 28px;
    }
}


/* ============================================================
   Enlaces de contenido — el único sitio donde queda verde.
   Decisión de la clienta (20/09/2026): terracota, blanco y negro,
   y el verde sólo para los hipervínculos.

   OJO CON EL ALCANCE: va acotado a los contenedores de TEXTO a
   propósito. Un `a` a secas pintaría de esmeralda el menú, los
   botones de Divi y de WooCommerce, los títulos de la rejilla y las
   pestañas de la ficha — justo lo contrario de lo que se pidió.
   Y `.entry-content` NO vale a secas: en este sitio envuelve la tienda entera,
   así que pintaba de verde las categorías y los enlaces de la rejilla. Va
   acotado a `p` y nada más: cualquier `ul` de aquí dentro puede ser un menú
   (la tira de categorías es un nav > ul > li > a). Si un post necesita verde
   en una lista, se añade un selector estrecho, no uno de listas a secas.
   Si aparece un contenedor nuevo con texto largo, se añade aquí.
   ============================================================ */
.et_pb_text a:not(.et_pb_button),
.et_pb_blurb_description a,
.et_pb_toggle_content a:not(.et_pb_button),
.et_pb_post_content a:not(.et_pb_button),
.entry-content p a:not(.button):not(.et_pb_button),
.sca-info-tabs__panel a:not(.button),
.woocommerce-Tabs-panel a:not(.button),
#sidebar .et_pb_widget a {
    color: var(--sca-enlace);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 140ms ease;
}
/* Al pasar por encima va a negro, no a un esmeralda más claro: cualquier
   aclarado del token se queda por debajo de 4,5:1 sobre blanco. */
.et_pb_text a:not(.et_pb_button):hover,
.et_pb_blurb_description a:hover,
.et_pb_toggle_content a:not(.et_pb_button):hover,
.et_pb_post_content a:not(.et_pb_button):hover,
.entry-content p a:not(.button):not(.et_pb_button):hover,
.sca-info-tabs__panel a:not(.button):hover,
.woocommerce-Tabs-panel a:not(.button):hover,
#sidebar .et_pb_widget a:hover {
    color: var(--sca-negro);
}

/* El pie de Divi va en #222222: ahí el esmeralda oscuro se apaga (2,54:1) y
   manda la pareja clara del token (6,86:1). Sin subrayado, que son listas de
   menú y no enlaces dentro de un párrafo. */
#main-footer .footer-widget a,
#main-footer .et_pb_widget a {
    color: var(--sca-enlace-claro);
}
#main-footer .footer-widget a:hover,
#main-footer .et_pb_widget a:hover {
    color: var(--sca-blanco);
}

/* En la barra lateral son listas de menú, no enlaces dentro de un párrafo:
   el subrayado las emborrona. Mismo criterio que en el pie — sólo color. */
#sidebar .et_pb_widget a {
    text-decoration: none;
}


/* ============================================================
   Ficha de cuidados — [sca_ficha_cuidados] (inc/tienda/ficha-cuidados.php)
   Tarjetas de luz, riego, nivel y maceta en la ficha de producto. Calcan
   los blurbs de Divi a los que sustituyen, medidos el 30/09/2026: fondo
   #f9f7f5, borde #e5e5e5, radio 10px, 20px arriba y abajo, icono de 96px
   y Poppins 14px (#333 el título, #666 y 300 el valor). Esos grises son
   los de fábrica de Divi, no tokens de marca: se dejan para que la ficha
   se vea igual.
   Solo salen las tarjetas con dato; el modificador --N (1 a 4) dice
   cuántas hay y se reparten el ancho.
   ============================================================ */
.sca-ficha-cuidados {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
}
.sca-ficha-cuidados--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sca-ficha-cuidados--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sca-ficha-cuidados--1 { grid-template-columns: minmax(0, 1fr); }

.sca-ficha-cuidados__item {
    padding: 20px 8px;
    background: #f9f7f5;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    text-align: center;
    /* Como el blurb: al pasar el ratón gira el tono y el icono cambia de color. */
    transition: filter 0.3s;
}
.sca-ficha-cuidados__item:hover {
    filter: hue-rotate(116deg);
}

.sca-ficha-cuidados__titulo,
.sca-ficha-cuidados__valor {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
    font-size: 14px;
}
.sca-ficha-cuidados__icono {
    display: block;
    width: 96px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 10px;
}
.sca-ficha-cuidados__titulo span {
    display: block;
    padding-bottom: 10px;
    font-weight: 500;
    line-height: 14px;
    color: #333;
}
.sca-ficha-cuidados__valor {
    font-weight: 300;
    line-height: 1.7;
    color: #666;
}

/* Entrada de los iconos: bajan y aparecen, uno detrás de otro, cuando la
   ficha entra en pantalla. is-anima e is-visible las pone el script que
   imprime el shortcode junto a la ficha; sin él, los iconos salen quietos.
   La transición va solo en is-visible: al ocultarlos no se ve el fundido. */
.sca-ficha-cuidados.is-anima .sca-ficha-cuidados__icono {
    opacity: 0;
    transform: translateY(-16px);
}
.sca-ficha-cuidados.is-anima.is-visible .sca-ficha-cuidados__icono {
    opacity: 1;
    transform: none;
    transition:
        opacity 0.9s ease-out,
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.sca-ficha-cuidados.is-visible .sca-ficha-cuidados__item:nth-child(2) .sca-ficha-cuidados__icono { transition-delay: 0.12s; }
.sca-ficha-cuidados.is-visible .sca-ficha-cuidados__item:nth-child(3) .sca-ficha-cuidados__icono { transition-delay: 0.24s; }
.sca-ficha-cuidados.is-visible .sca-ficha-cuidados__item:nth-child(4) .sca-ficha-cuidados__icono { transition-delay: 0.36s; }

/* Móvil: de dos en dos. Con tres, la última ocupa la fila entera. */
@media (max-width: 767px) {
    .sca-ficha-cuidados {
        gap: 16px;
    }
    .sca-ficha-cuidados--4,
    .sca-ficha-cuidados--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sca-ficha-cuidados--3 > :last-child {
        grid-column: 1 / -1;
    }
}

/* ------------------------------------------------------------
   «Sin productos» amable: categorías de tienda vacías (p. ej. Outlet).
   Lo pinta includes/no-results.php cuando el módulo Shop de Divi no
   encuentra productos. Selectores con la clase del bloque por delante
   para ganar a las reglas de h2/enlace de Divi y WooCommerce sin !important.
   ------------------------------------------------------------ */
.sca-sin-productos {
    max-width: 480px;
    margin: 2.5rem auto 3.5rem;
    padding: 1rem;
    text-align: center;
}

.sca-sin-productos .sca-sin-productos__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    background: var(--sca-salvia);
    color: var(--sca-bosque);
}

.sca-sin-productos .sca-sin-productos__icono svg {
    width: 38px;
    height: 38px;
}

.sca-sin-productos .sca-sin-productos__titulo {
    margin: 0 0 0.5rem;
    color: var(--sca-bosque);
    font-size: 1.5rem;
    line-height: 1.2;
}

.sca-sin-productos .sca-sin-productos__texto {
    max-width: 380px;
    margin: 0 auto 1.6rem;
    color: var(--sca-gris);
    line-height: 1.6;
}

.sca-sin-productos .sca-sin-productos__boton {
    display: inline-block;
    padding: 0.85rem 1.9rem;
    border-radius: 999px;
    background: var(--sca-bosque);
    color: var(--sca-blanco);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.sca-sin-productos .sca-sin-productos__boton:hover,
.sca-sin-productos .sca-sin-productos__boton:focus-visible {
    background: var(--sca-bosque-hondo);
    color: var(--sca-blanco);
    transform: translateY(-1px);
}