/*
Theme Name: Samaruc Joyas
Theme URI: https://samarucjoyas.com/
Author: Samaruc Joyas
Description: Tema propio de Samaruc Joyas, escrito desde cero (julio 2026). Reproduce 1:1 el front-end que servían Goldsmith + Elementor, con plantillas PHP clásicas editables y sin page builders. Las hojas de estilo, fuentes e iconos del diseño original se incluyen como recursos estáticos del tema.
Version: 1.0.7
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: samarucjoyas
*/

/* Los estilos del tema se cargan por módulos desde inc/assets.php:
   - css/ (especificación visual del diseño actual)
   - assets/css/ (header clásico, portada, páginas y popup propios)
   Este archivo contiene además los estilos escritos a mano que antes
   vivían en el style.css del tema hijo (footer, grid de categorías,
   drawer del menú, topbar móvil, botón de WhatsApp, etc.). */

/* Centrar el menú principal de la cabecera
   (widget Goldsmith "menu-dropdown" del escritorio, id 9e21a97) */
.elementor-element-9e21a97 .goldsmith-header-top-menu-area.widget-menu {
    display: flex !important;
    justify-content: center !important;
    width: 100%;
}
.elementor-element-9e21a97 ul.navigation {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    width: 100%;
}

/* ============================================================
   FOOTER PERSONALIZADO — SAMARUC JOYAS
   Maquetación del footer renderizado por
   samaruc_footer_personalizado() en functions.php
   ============================================================ */

.samaruc-footer {
    /* Beige de la franja de ventajas (.samaruc-benefits) */
    --sj-gold:      #c9a86a;
    --sj-gold-dark: #a8824e;
    --sj-title:     #3d3630;
    --sj-text:      #5f554b;
    --sj-muted:     #8a8078;
    --sj-line:      #eadfd3;
    --sj-bg:        #faf6f3;
    background: var(--sj-bg);
    color: var(--sj-text);
    font-size: 15px;
    line-height: 1.6;
}

.samaruc-footer * {
    box-sizing: border-box;
}

/* ---- Banda superior: banner Kit Digital ----
   Banda blanca a todo el ancho con el banner oficial
   de financiación centrado, como en la web de referencia. */
.samaruc-footer__kit-band {
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border-bottom: 1px solid var(--sj-line);
    padding: 20px 24px;
}

.samaruc-footer__kit {
    max-width: 760px;
    width: 100%;
    height: auto;
    display: block;
}

/* ---- Zona principal: 3 columnas ---- */
.samaruc-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 24px 40px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 48px;
}

.samaruc-footer__col {
    min-width: 0;
}

/* ---- Títulos de columna ---- */
.samaruc-footer__title {
    margin: 0 0 22px;
    padding-bottom: 12px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--sj-title);
    position: relative;
}

.samaruc-footer__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 2px;
    background: var(--sj-gold);
}

/* ---- Lista de contacto ---- */
.samaruc-footer__list {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}

.samaruc-footer__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.samaruc-footer__list svg,
.samaruc-footer__hours svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: var(--sj-gold);
    margin-top: 1px;
}

.samaruc-footer a {
    color: var(--sj-text);
    text-decoration: none;
    transition: color .2s ease;
}

.samaruc-footer a:hover {
    color: var(--sj-gold-dark);
}

/* ---- Horario de atención ---- */
.samaruc-footer__hours {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding-top: 18px;
    border-top: 1px solid var(--sj-line);
}

.samaruc-footer__hours strong {
    color: var(--sj-title);
    font-weight: 600;
}

/* ---- Columna Pago seguro ---- */
.samaruc-footer__payments {
    max-width: 220px;
    width: 100%;
    height: auto;
    display: block;
}

.samaruc-footer__pago-text {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--sj-muted);
}

/* ---- Columna Síguenos ---- */
.samaruc-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid #d3c4b2;
    border-radius: 50%;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.samaruc-footer__social svg {
    width: 22px;
    height: 22px;
    fill: var(--sj-title);
    transition: fill .25s ease;
}

.samaruc-footer__social:hover {
    background: var(--sj-gold);
    border-color: var(--sj-gold);
    transform: translateY(-2px);
}

.samaruc-footer__social:hover svg {
    fill: #fff;
}

.samaruc-footer__social-handle {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--sj-muted);
}

/* ---- Barra inferior ---- */
.samaruc-footer__bottom {
    background: #f4ede6;
    border-top: 1px solid var(--sj-line);
    padding: 26px 24px;
    text-align: center;
}

.samaruc-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    margin-bottom: 14px;
}

.samaruc-footer__legal a {
    font-size: 14px;
    font-weight: 500;
}

.samaruc-footer__copy {
    margin: 0;
    font-size: 14px;
    color: var(--sj-title);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .samaruc-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 40px 32px;
        padding: 48px 24px 32px;
    }
    .samaruc-footer__col--contacto {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .samaruc-footer__inner {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
        padding: 40px 20px 28px;
    }
    .samaruc-footer__title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .samaruc-footer__list li,
    .samaruc-footer__hours {
        justify-content: center;
        text-align: left;
    }
    .samaruc-footer__payments {
        margin-left: auto;
        margin-right: auto;
    }
    .samaruc-footer__kit-band {
        padding: 24px 20px;
    }
}

/* ============================================================
   Slider home (MetaSlider #16160) — v2: scrim robusto, CTA sólido, controles legibles
   ============================================================ */
.metaslider-16160 {
    position: relative;
    overflow: hidden;
}

.metaslider-16160 .flexslider,
.metaslider-16160 .flex-viewport {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}
/* El widget shortcode y sus wrappers añaden padding por defecto en Elementor
   (heredado del tema padre Goldsmith); lo aniquilamos sólo para este slider
   para que quede pegado al grid de categorías sin franja blanca. */
.elementor-element-117655f,
.elementor-element-117655f .elementor-widget-shortcode,
.elementor-element-117655f .elementor-widget-shortcode > .elementor-widget-container,
.elementor-element-117655f .elementor-shortcode,
.elementor-element-117655f .metaslider {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    line-height: 0; /* elimina espacio entre inline-block residual del shortcode */
}
.elementor-element-117655f .elementor-shortcode { font-size: 0; }
.elementor-element-117655f .metaslider { font-size: initial; line-height: initial; }

.metaslider-16160 .slides > li {
    position: relative;
}

.metaslider-16160 .slides img {
    display: block;
    width: 100%;
    height: auto;
}

/* Scrim de doble capa: vertical (protege la mitad inferior pase lo que pase) +
   horizontal suave (refuerza la esquina inferior derecha donde vive el texto).
   Pensado para ser robusto en cualquier imagen, no para esta foto concreta. */
.metaslider-16160 .slides > li::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0) 30%,
            rgba(0, 0, 0, 0.40) 55%,
            rgba(0, 0, 0, 0.85) 100%),
        linear-gradient(270deg,
            rgba(0, 0, 0, 0.50) 0%,
            rgba(0, 0, 0, 0.20) 35%,
            rgba(0, 0, 0, 0) 65%);
    pointer-events: none;
    z-index: 1;
}

/* Caption: bloque ubicado en la zona derecha del slide,
   pero con su contenido (h2 + p + CTA) alineado a la izquierda. */
.metaslider-16160 .caption-wrap {
    position: absolute !important;
    inset: auto 0 0 0;
    height: auto;
    margin: 0 !important;
    padding: clamp(24px, 5vw, 64px) !important;
    background: transparent !important;
    color: #fff !important;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    opacity: 1 !important;
    pointer-events: none; /* deja pasar el click al enlace de la imagen */
    z-index: 2;
}

.metaslider-16160 .caption {
    color: #fff;
    max-width: 480px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
    text-align: right;
}

.metaslider-16160 .caption h2 {
    font-family: inherit;
    font-size: clamp(1.75rem, 4.2vw, 3rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.15;
    margin: 0 0 0.65em;
    color: #fff;
    text-align: right;
}

.metaslider-16160 .caption p {
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    font-weight: 400;
    line-height: 1.55;
    margin: 0 0 2.1em;
    color: #fff;
    opacity: 0.95;
    text-align: right;
}

.metaslider-16160 .caption .ms-cta {
    margin-top: 0.4em;
}

/* CTA: sólido blanco con texto oscuro, peso real */
.metaslider-16160 .caption .ms-cta {
    display: inline-block;
    padding: 0.95em 2.2em;
    background: #fff;
    color: #111;
    text-transform: uppercase;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    font-weight: 600;
    border: 2px solid #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.metaslider-16160 .slides > li:hover .caption .ms-cta {
    background: transparent;
    color: #fff;
    transform: translateY(-1px);
}

/* Flechas: ocultas en todos los tamaños — los dots inferiores y el swipe en móvil
   son suficientes para navegar entre slides. */
.metaslider-16160 .flex-direction-nav {
    display: none !important;
}

/* Puntos: mayores, con halo claro para asegurar contraste en cualquier fondo */
.metaslider-16160 .flex-control-nav.flex-control-paging {
    bottom: 22px;
    z-index: 3;
}

.metaslider-16160 .flex-control-paging li {
    margin: 0 5px;
}

.metaslider-16160 .flex-control-paging li a {
    width: 11px;
    height: 11px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    transition: transform 0.2s ease, background 0.2s ease;
}

.metaslider-16160 .flex-control-paging li a:hover {
    background: rgba(255, 255, 255, 0.85);
}

.metaslider-16160 .flex-control-paging li a.flex-active {
    background: #fff;
    transform: scale(1.25);
}

/* Móvil: scrim aún más oscuro abajo, texto centrado, flechas ocultas (las gestiona el swipe) */
@media (max-width: 600px) {
    /* Damos altura mínima al banner: con height:auto la imagen original (panorámica)
       quedaba muy baja en pantalla estrecha y el h2 + párrafo + CTA no encajaban.
       Forzamos también la altura del viewport que Flexslider mide al inicializar
       (.flex-viewport, .flexslider), si no, recortaría el slide aunque el <li>
       crezca. */
    .metaslider-16160 .flexslider,
    .metaslider-16160 .flex-viewport,
    .metaslider-16160 .slides > li {
        min-height: 560px !important;
    }
    /* Con más altura disponible la imagen ya no puede ir en flujo normal
       (dejaría franja vacía arriba o abajo). La sacamos del flujo y la
       hacemos llenar el slide con object-fit:cover. */
    .metaslider-16160 .slides > li .metaslider_image_link {
        position: absolute;
        inset: 0;
        display: block;
    }
    .metaslider-16160 .slides img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

    .metaslider-16160 .slides > li::after {
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.10) 30%,
            rgba(0, 0, 0, 0.55) 60%,
            rgba(0, 0, 0, 0.90) 100%);
    }
    .metaslider-16160 .caption-wrap {
        align-items: flex-end;
        justify-content: center;
        padding: 28px 20px 60px !important;
    }
    .metaslider-16160 .caption {
        max-width: 100%;
        text-align: center;
    }
    .metaslider-16160 .caption h2 {
        text-align: center;
    }
    .metaslider-16160 .caption p {
        max-width: 100%;
        margin-bottom: 1.7em;
        text-align: center;
    }
    .metaslider-16160 .flex-control-nav.flex-control-paging {
        bottom: 14px;
    }

    /* ----------------------------------------------------------------
       Slide 1 — PULSERAS: recorte VERTICAL de la foto original, sólo en móvil.
       Generado a partir de Categoria-Pulseras-1.jpg recortando en vertical
       centrado en las pulseras (las 5 se ven completas, sin zoom ni bordes).
       Ajustes: 1er valor = izq/dcha · 2º valor = arriba/abajo.
       ---------------------------------------------------------------- */
    .metaslider-16160 .slide-16161 .metaslider_image_link {
        background: url("https://samarucjoyas.com/wp-content/uploads/2024/03/Categoria-Pulseras-1-vertical-movil.jpg") 50% 50% / cover no-repeat;
    }
    .metaslider-16160 .slide-16161 img {
        opacity: 0 !important; /* ocultamos el recorte panorámico; el enlace sigue clicable */
    }

    /* ----------------------------------------------------------------
       Slide 2 — PENDIENTES: encuadre VERTICAL sólo en móvil.
       Es la MISMA foto que en PC, pero la foto original es horizontal (la
       oreja/pendientes están a la izquierda y a la derecha hay cara + campo).
       En móvil mostramos sólo la zona de la oreja y dejamos los textos + botón
       en la franja inferior despejada (la zona que marcaste en rojo).

       PARA AJUSTARLO TÚ MISMO:
       - Mover el encuadre IZQ/DCHA: cambia el primer valor "28%" (0% = pegado
         a la izquierda; 50% = centro; 100% = a la derecha).
       - Mover el encuadre ARRIBA/ABAJO: cambia el segundo valor "45%".
       - Cambiar la FOTO sólo en móvil: edita la URL (sube otra a Medios y
         pega aquí su enlace).
       - Mover el texto/botón: el bloque .caption-wrap móvil de arriba lo
         controla (padding inferior 60px = a más px, más arriba el texto).
       ---------------------------------------------------------------- */
    .metaslider-16160 .slide-16162 .metaslider_image_link {
        background: url("https://samarucjoyas.com/wp-content/uploads/2024/03/Categoria-Pendientes-1024x683.jpg") 0% 45% / cover no-repeat;
    }
    .metaslider-16160 .slide-16162 img {
        opacity: 0 !important; /* ocultamos el recorte panorámico; el enlace sigue clicable */
    }
}

/* Quitar el "círculo" de focus que dibuja el navegador y el plugin
   pojo-accessibility cuando haces click con el ratón en las flechas/puntos
   del slider. Lo mantenemos para navegación con teclado (focus-visible),
   así no rompemos accesibilidad. */
.metaslider-16160 a:focus,
.metaslider-16160 .flex-direction-nav a:focus,
.metaslider-16160 .flex-control-paging li a:focus,
.metaslider-16160 .metaslider_image_link:focus,
body.pojo-a11y-focusable .metaslider-16160 a:focus {
    outline: none !important;
    box-shadow: none !important;
}

.metaslider-16160 a:focus-visible,
.metaslider-16160 .flex-direction-nav a:focus-visible,
.metaslider-16160 .flex-control-paging li a:focus-visible,
body.pojo-a11y-focusable .metaslider-16160 a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9) !important;
    outline-offset: 3px !important;
}

/* ============================================================
   Sección "CATEGORÍAS" en la home (Elementor)
   Tarjetas con imagen cuadrada redondeada, hover con elevación
   y zoom suave de la imagen.
   ============================================================ */
.samaruc-cat-card {
    transition: transform .35s ease;
    border-radius: 18px;
}
.samaruc-cat-card:hover {
    transform: translateY(-6px);
}
.samaruc-cat-card .elementor-widget-image-box {
    height: 100%;
}
.samaruc-cat-card .elementor-image-box-wrapper {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}
.samaruc-cat-card .elementor-image-box-img {
    width: 100% !important;
    margin: 0 !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 18px;
    background: #f7f1ec;
    box-shadow: 0 4px 14px rgba(0,0,0,.04);
    transition: box-shadow .35s ease;
}
.samaruc-cat-card:hover .elementor-image-box-img {
    box-shadow: 0 14px 34px rgba(0,0,0,.10);
}
.samaruc-cat-card .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2,.7,.2,1);
    display: block;
}
.samaruc-cat-card:hover .elementor-image-box-img img {
    transform: scale(1.07);
}
.samaruc-cat-card .elementor-image-box-content {
    margin-top: 18px;
}
.samaruc-cat-card .elementor-image-box-title {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 2.5px;
    color: #1a1a1a !important;
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
}
.samaruc-cat-card .elementor-image-box-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1.5px;
    background: #FFCAD4;
    transition: width .35s ease, left .35s ease;
}
.samaruc-cat-card:hover .elementor-image-box-title::after {
    width: 32px;
    left: calc(50% - 16px);
}
.samaruc-cat-card a {
    text-decoration: none !important;
    color: inherit !important;
}
@media (max-width: 1024px) {
    .samaruc-cat-card .elementor-image-box-title { font-size: 12px !important; letter-spacing: 2px; }
}
@media (max-width: 600px) {
    .samaruc-cat-card .elementor-image-box-content { margin-top: 12px; }
}

/* ============================================================
   Franja de ventajas en el footer (HTML propio en samaruc_footer_personalizado)
   ============================================================ */
.samaruc-benefits {
    background: #faf6f3;
    border-top: 1px solid #f0e6df;
    border-bottom: 1px solid #f0e6df;
    padding: 36px 20px;
}
.samaruc-benefits__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: start;
}
.samaruc-benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4px;
}
.samaruc-benefit__icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #FFCAD4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    transition: transform .3s ease, background .3s ease;
}
.samaruc-benefit:hover .samaruc-benefit__icon {
    transform: translateY(-3px);
    background: #ffb6c1;
}
.samaruc-benefit__icon svg {
    width: 26px;
    height: 26px;
    fill: #1a1a1a;
}
.samaruc-benefit__title {
    margin: 0 0 6px !important;
    font-size: 13px !important;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #1a1a1a;
}
.samaruc-benefit__desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #555;
    font-weight: 400;
}
@media (max-width: 1024px) {
    .samaruc-benefits__inner { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .samaruc-benefit__icon { width: 50px; height: 50px; }
    .samaruc-benefit__icon svg { width: 22px; height: 22px; }
}
@media (max-width: 480px) {
    .samaruc-benefits { padding: 28px 16px; }
    .samaruc-benefits__inner { grid-template-columns: repeat(2, 1fr); gap: 22px; }
    .samaruc-benefit__title { font-size: 12px !important; }
    .samaruc-benefit__desc { font-size: 12px; }
}

/* ==============================================================
   MENÚ MÓVIL — SAMARUC JOYAS
   Repara el burger del nav-menu Elementor del header (widget
   id 6f35bf6 dentro del contenedor mobile 675f143 de la
   plantilla Elementor Header #9885). El JS nativo de Elementor
   4.x se lleva mal con Elementor Pro 3.7.2 (mismatch), así que
   forzamos los estados aquí y los gestionamos con un toggle
   propio (ver samaruc_mobile_menu_js en functions.php).
   Sólo afecta a viewports en los que el contenedor mobile está
   visible (≤1024px). El menú se abre como drawer lateral.
   ============================================================== */
@media (max-width: 1024px) {

    /* Ocultar el menú horizontal Goldsmith (widget #9e21a97 dentro
       del contenedor #811665f). Está pensado para escritorio y en
       Elementor no tiene marcadas las clases hide_tablet/hide_mobile,
       así que sin esto aparecía sobre el slider y por encima del
       drawer al pulsar el burger. */
    .elementor-element-811665f,
    .elementor-element-9e21a97 { display: none !important; }

    /* Sólo el burger; tanto el menú horizontal interno como el
       dropdown ORIGINAL (el que clonamos al body) quedan ocultos
       dentro del widget. Nuestro clon en body lleva la clase
       .samaruc-drawer y NO entra por estos selectores. */
    .elementor-element-6f35bf6 .elementor-nav-menu--main,
    .elementor-element-6f35bf6 nav.elementor-nav-menu--dropdown { display: none !important; }

    /* Toggle siempre visible y con buen área táctil */
    .elementor-element-6f35bf6 .elementor-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 6px;
    }
}

/* ------------------------------------------------------------
   Drawer móvil propiamente dicho.
   El JS (samaruc_mobile_menu_js) saca el <nav> del header y lo
   re-engancha como hijo directo de <body> con la clase
   .samaruc-drawer. Por eso los selectores apuntan a esta clase
   y NO a la ruta del widget Elementor: si quedara dentro del
   header, algún ancestro con transform/filter rompería el
   position:fixed y veríamos sólo el overlay.
   Las reglas viven fuera de la @media para no perderlas si el
   navegador interpreta diferente max-width tras el re-parent;
   el JS sólo añade .samaruc-menu-open en viewports en los que
   el burger está visible (resto del flujo de la web igual).
   ------------------------------------------------------------ */
nav.elementor-nav-menu--dropdown.samaruc-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 88vw;
    max-width: 380px;
    height: 100vh;
    height: 100dvh;
    background: #fff;
    z-index: 2147483646;                 /* por encima de cualquier widget/chat */
    overflow-y: auto;
    padding: 0 0 28px;
    border-radius: 0 18px 18px 0;
    box-shadow: 12px 0 40px rgba(6, 6, 6, 0.16);
    transform: translateX(-102%);
    transition: transform 0.35s cubic-bezier(0.22, 0.7, 0.25, 1);
    display: block !important;
    visibility: hidden;
    pointer-events: none;
    -webkit-overflow-scrolling: touch;
}
nav.elementor-nav-menu--dropdown.samaruc-drawer.samaruc-menu-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}

/* Cabecera del panel: marca + sitio para el botón de cerrar */
nav.elementor-nav-menu--dropdown.samaruc-drawer::before {
    content: "Samaruc Joyas";
    display: block;
    padding: 27px 70px 19px 26px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #060606;
    border-bottom: 1px solid #f1efec;
    margin-bottom: 10px;
}

/* Barra de scroll discreta dentro del panel */
nav.elementor-nav-menu--dropdown.samaruc-drawer::-webkit-scrollbar {
    width: 6px;
}
nav.elementor-nav-menu--dropdown.samaruc-drawer::-webkit-scrollbar-thumb {
    background: #e6dfd4;
    border-radius: 3px;
}

/* Sanitizado: forzamos que TODO lo de dentro del drawer sea visible.
   Hay reglas heredadas (Elementor, Goldsmith, accessibility) que
   pueden setear display:none / visibility:hidden / opacity:0 a la
   ul/li/a del dropdown cuando aria-hidden=true; aquí las anulamos
   porque el JS ya gobierna el estado abierto/cerrado por clase. */
nav.elementor-nav-menu--dropdown.samaruc-drawer ul.elementor-nav-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    list-style: none;
    margin: 0;
    padding: 0;
}
nav.elementor-nav-menu--dropdown.samaruc-drawer li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    margin: 0;
    list-style: none;
}
nav.elementor-nav-menu--dropdown.samaruc-drawer li > a {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ítems: primer nivel en versalitas de boutique, sin bordes ruidosos */
nav.elementor-nav-menu--dropdown.samaruc-drawer li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 26px;
    line-height: 1.35;
    color: #3D3D3D !important;
    text-decoration: none;
    border-bottom: 0;
    background: transparent;
    transition: background 0.2s ease, color 0.2s ease;
}
nav.elementor-nav-menu--dropdown.samaruc-drawer ul.elementor-nav-menu > li > a {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
}
nav.elementor-nav-menu--dropdown.samaruc-drawer li > a:hover,
nav.elementor-nav-menu--dropdown.samaruc-drawer li > a:focus,
nav.elementor-nav-menu--dropdown.samaruc-drawer li.samaruc-open > a {
    background: #faf7f2;
    color: #060606 !important;
}
nav.elementor-nav-menu--dropdown.samaruc-drawer li.current-menu-item > a {
    color: #060606 !important;
    box-shadow: inset 3px 0 0 #FFCAD4;
    background: #fff2f5;
}

/* Chevron que gira al desplegar (sustituye a los "+" y "−" de texto) */
nav.elementor-nav-menu--dropdown.samaruc-drawer li.menu-item-has-children > a::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #b5b5b5;
    border-bottom: 1.5px solid #b5b5b5;
    margin-top: -4px;
    transform: rotate(45deg);
    transition: transform 0.25s ease, border-color 0.2s ease;
}
nav.elementor-nav-menu--dropdown.samaruc-drawer li.menu-item-has-children.samaruc-open > a::after {
    margin-top: 4px;
    transform: rotate(-135deg);
    border-color: #060606;
}

/* Submenú: colgado de una línea de árbol, sin bloque gris */
nav.elementor-nav-menu--dropdown.samaruc-drawer ul.sub-menu {
    display: none;
    list-style: none;
    margin: 2px 0 10px 27px;
    padding: 0;
    border-left: 1px solid #eee8e0;
    background: transparent;
}
nav.elementor-nav-menu--dropdown.samaruc-drawer li.samaruc-open > ul.sub-menu {
    display: block;
    animation: sjMenuDespliegue 0.25s ease;
}
@keyframes sjMenuDespliegue {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
nav.elementor-nav-menu--dropdown.samaruc-drawer ul.sub-menu li > a {
    padding: 9px 18px;
    font-size: 13.5px;
    letter-spacing: 0.02em;
    color: #777 !important;
}
nav.elementor-nav-menu--dropdown.samaruc-drawer ul.sub-menu li > a:hover,
nav.elementor-nav-menu--dropdown.samaruc-drawer ul.sub-menu li > a:focus {
    background: transparent;
    color: #060606 !important;
}
nav.elementor-nav-menu--dropdown.samaruc-drawer .sub-arrow,
nav.elementor-nav-menu--dropdown.samaruc-drawer a > .e-font-icon-svg {
    display: none !important;
}

/* Backdrop, botón cerrar y bloqueo de scroll: SIN media query — el burger
   está visible en todos los anchos y el drawer se usa también en
   escritorio (antes solo estaban estilados hasta 1024px y en pantallas
   grandes el botón salía como texto suelto y el telón no se veía). */

.samaruc-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 6, 6, 0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 2147483645;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.samaruc-menu-backdrop.is-active {
    opacity: 1;
    pointer-events: auto;
}

.samaruc-menu-close {
    position: absolute;
    top: 17px;
    right: 18px;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e7e2da;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    color: #3D3D3D;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s ease, color 0.2s ease, transform 0.25s ease;
}
.samaruc-menu-close:hover {
    background: #FFCAD4;
    color: #060606;
    transform: rotate(90deg);
}

body.samaruc-menu-locked {
    overflow: hidden;
}

/* Topbar: en móvil ocultamos el sufijo "+1000 CLIENTES SATISFECHOS"
   (ver samaruc_topbar_split_js en functions.php) para que el texto
   quepa en una sola línea. */
@media (max-width: 767px) {
    .elementor-element-2887476 .topbar-extra {
        display: none;
    }
}

/* ============================================================
   Grid de categorías edge-to-edge en la home — estilo sansarushop
   Lo renderiza el shortcode [samaruc_categorias] (functions.php),
   que lee la imagen de CADA categoría en vivo desde WooCommerce
   (al cambiar la foto en wp-admin, esta sección se actualiza sola).
   Marcado generado:
     <div class="ssj-cat-grid" style="--ssj-cols:3">
       <a class="ssj-cat-card" style="background-image:url(...)">
         <span class="ssj-cat-card__title">NOMBRE</span>
       </a> …
     </div>
   ============================================================ */
.ssj-cat-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    line-height: 0;
}
.ssj-cat-card {
    position: relative;
    flex: 0 0 calc(100% / var(--ssj-cols, 3));
    max-width: calc(100% / var(--ssj-cols, 3));
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    overflow: hidden;
    text-decoration: none !important;
    color: #fff !important;
    background-color: #f2f2f2;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: background-size .8s cubic-bezier(.2,.7,.2,1);
}
.ssj-cat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(0,0,0,0)    0%,
        rgba(0,0,0,0)   45%,
        rgba(0,0,0,.38) 100%);
    transition: background .35s ease;
    pointer-events: none;
}
.ssj-cat-card:hover { background-size: cover; }
.ssj-cat-card:hover::before {
    background: linear-gradient(180deg,
        rgba(0,0,0,.10) 0%,
        rgba(0,0,0,.10) 45%,
        rgba(0,0,0,.58) 100%);
}
.ssj-cat-card__title {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 32px 45px;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 1px 10px rgba(0,0,0,.45);
    transition: letter-spacing .35s ease;
}
.ssj-cat-card:hover .ssj-cat-card__title { letter-spacing: 3px; }

@media (max-width: 1024px) {
    .ssj-cat-card { flex-basis: 50%; max-width: 50%; }
    .ssj-cat-card__title { font-size: 26px; padding: 24px 28px; }
}
@media (max-width: 600px) {
    .ssj-cat-card__title { font-size: 20px; padding: 20px; letter-spacing: 1px; }
}

/* El contenedor Elementor que envuelve el shortcode no debe meter
   ancho de caja ni rellenos: el grid manda a ancho completo. */
.elementor .ssj-cat-grid-wrap,
.elementor .ssj-cat-grid-wrap > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.elementor .ssj-cat-grid-wrap .elementor-widget-shortcode,
.elementor .ssj-cat-grid-wrap .elementor-widget-shortcode > .elementor-widget-container,
.elementor .ssj-cat-grid-wrap .elementor-shortcode {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
}

/* El slider del banner y el grid van pegados, sin huecos */
.elementor-element-117655f { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.elementor-element-117655f .metaslider,
.elementor-element-117655f .metaslider-flex { margin: 0 !important; }


/* ============================================================
   Móvil: encuadre del 2º banner (PENDIENTES) del slider home
   El bloque @media (max-width:600px) de arriba ya recorta las fotos
   con object-fit:cover. En la foto de pendientes (Categoria-Pendientes.jpg,
   slide-16162) la oreja con los pendientes queda a la IZQUIERDA, así que
   por defecto (centro) apenas se veían. Desplazamos el foco a la izquierda
   para que el pendiente sea el protagonista en el móvil.
   ============================================================ */
@media (max-width: 600px) {
    .metaslider-16160 .slides img.slide-16162 {
        object-position: 20% center !important;
    }
}

/* ============================================================
   Evitar el desplazamiento lateral (scroll horizontal) en móvil.
   Algún elemento sobresale del ancho del viewport y permite
   arrastrar la página de lado. Bloqueamos el overflow horizontal
   y forzamos que nada supere el 100% del ancho de pantalla.
   Solo en táctil/móvil para no afectar a sticky/escritorio.
   ============================================================ */
@media (max-width: 1024px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    /* Cinturón de seguridad: los contenedores de Elementor y medios
       no deben exceder el ancho disponible. */
    .elementor-section,
    .elementor-container,
    .e-con,
    .e-con-inner,
    img, video, iframe {
        max-width: 100% !important;
    }
}

/* ============================================================
   Carrusel estático del taller (portada): una sola imagen, sin
   necesidad del JS de Swiper/Elementor para mostrarse.
   ============================================================ */
.samaruc-carousel-estatico .swiper-wrapper {
    display: block;
}
.samaruc-carousel-estatico .swiper-slide {
    width: 100%;
}
.samaruc-carousel-estatico .swiper-slide-inner {
    margin: 0;
}
.samaruc-carousel-estatico .swiper-slide-image {
    display: block;
    width: 100%;
    height: auto;
}

/* =========================================================================
   Etiquetas dinámicas de producto (agosto 2026)
   Marcado: woocommerce/content-product.php → samaruc_pintar_etiquetas_producto()
   Lógica:  inc/etiquetas-producto.php
   ========================================================================= */

.sj-etiquetas {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 6;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	/* la tarjeta entera es un enlace: que el clic la atraviese */
	pointer-events: none;
}

.sj-etiqueta {
	display: inline-block;
	padding: 5px 9px;
	border-radius: 2px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
	animation: sj-etiqueta-entra .45s ease both;
}

.sj-etiqueta + .sj-etiqueta {
	animation-delay: .1s;
}

@keyframes sj-etiqueta-entra {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.sj-etiqueta { animation: none; }
}

/* La tarjeta se anima un poco al pasar el ratón */
.goldsmith-loop-product:hover .sj-etiqueta {
	transform: translateY(-1px);
	transition: transform .25s ease;
}

.sj-badge-nuevo     { background: #1f1f1f; }             /* negro joyería */
.sj-badge-top       { background: #b08d57; }             /* dorado */
.sj-badge-oferta    { background: #e590a0; }             /* rosa de la marca */
.sj-badge-agotado   { background: #9a9a9a; }
.sj-badge-artesanal { background: #f0e6da; color: #6b5638; box-shadow: none; }
.sj-badge-manual    { background: #4a4a4a; }

@media (max-width: 575px) {
	.sj-etiquetas { top: 7px; left: 7px; gap: 4px; }
	.sj-etiqueta  { padding: 4px 7px; font-size: 9px; letter-spacing: .05em; }
}

/* Precio de las tarjetas del catálogo en negrita */
.goldsmith-product-loop-inner .price,
.goldsmith-product-loop-inner .price .woocommerce-Price-amount,
.goldsmith-product-loop-inner .price bdi,
.goldsmith-product-loop-inner .price ins {
	font-weight: 700;
	text-decoration: none;
}

/* En las ofertas, el precio antiguo se queda fino para que destaque el nuevo */
.goldsmith-product-loop-inner .price del,
.goldsmith-product-loop-inner .price del .woocommerce-Price-amount,
.goldsmith-product-loop-inner .price del bdi {
	font-weight: 400;
	opacity: .6;
}

/* Precio de la ficha de producto, con el mismo criterio */
.goldsmith-summary-item.goldsmith-price > .woocommerce-Price-amount,
.goldsmith-summary-item.goldsmith-price > bdi,
.goldsmith-summary-item.goldsmith-price ins,
.goldsmith-summary-item.goldsmith-price ins .woocommerce-Price-amount {
	font-weight: 700;
	text-decoration: none;
}

.goldsmith-summary-item.goldsmith-price del,
.goldsmith-summary-item.goldsmith-price del .woocommerce-Price-amount {
	font-weight: 400;
	opacity: .6;
}

/* Descripción corta de la tarjeta, entre el nombre y el precio */
.goldsmith-product-loop-inner .samaruc-card-descripcion {
	margin: 0 0 8px;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: .02em;
	color: #8a8a8a;
	text-transform: uppercase;
}

@media (max-width: 575px) {
	.goldsmith-product-loop-inner .samaruc-card-descripcion {
		font-size: 11px;
		margin-bottom: 6px;
	}
}

/* Sin efecto lupa (zoom) sobre las imágenes de las tarjetas al pasar el ratón */
.goldsmith-loop-product img,
.goldsmith-loop-product:hover img,
.goldsmith-product-loop-inner img,
.goldsmith-product-loop-inner:hover img {
	transform: none !important;
}

/* ---- Etiquetas en la ficha de producto (en fila, bajo el título) ---- */
.sj-etiquetas--inline {
	position: static;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 6px;
}

/* ---- Aviso de producto agotado (ficha) ----
   Sin stock no se pinta el formulario de compra: este bloque ocupa su sitio
   para que la ficha no se quede muda. Ver samaruc_formulario_compra(). */
.sj-agotado {
	width: 100%;
	max-width: 420px;
	padding: 18px 20px;
	border: 1px solid #e3e3e3;
	border-left: 3px solid #9a9a9a;
	background: #fafafa;
}

.sj-agotado__titulo {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #4a4a4a;
}

.sj-agotado__texto {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	color: #6b6b6b;
}

.sj-agotado__enlace {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #1f1f1f;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	transition: opacity .2s ease;
}

.sj-agotado__enlace:hover {
	opacity: .65;
}

@media (max-width: 575px) {
	.sj-agotado { padding: 16px; }
}

/* =========================================================================
   Carrito — fila del cupón y botón «Pasar por la caja» (ago-2026)
   Pulido sobre el diseño Goldsmith restaurado: las plantillas ya no llevan
   los <br> de wpautop para los que se escribió parte del CSS original.
   ====================================================================== */

/* Cupón: campo con borde visible y hueco claro con el botón */
.goldsmith-woocommerce-cart-form .goldsmith-actions .goldsmith-flex {
	gap: 10px;
	align-items: center;
}

.goldsmith-woocommerce-cart-form .goldsmith-actions .goldsmith-input {
	height: 42px;
	margin-right: 0;          /* el hueco lo pone el gap */
	border: 1px solid #cfcfcf;
	background: #fff;
	flex: 1 1 200px;
	max-width: 280px;
	min-width: 0;
}

.goldsmith-woocommerce-cart-form .goldsmith-actions .goldsmith-input:focus {
	outline: none;
	border-color: #060606;
}

.goldsmith-woocommerce-cart-form .goldsmith-actions .goldsmith-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding-top: 0;
	padding-bottom: 0;
}

@media (max-width: 576px) {
	.goldsmith-woocommerce-cart-form .goldsmith-actions .goldsmith-input {
		max-width: none;
	}
}

/* «Pasar por la caja»: a todo el ancho de la caja de totales, texto centrado
   (a juego con el botón de pago exprés de Stripe que sale debajo) */
.goldsmith-wc-proceed-to-checkout .goldsmith-checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding-top: 15px;
	padding-bottom: 15px;
}

/* =========================================================================
   Panel lateral del carrito (widget menu-cart de Elementor Pro, ago-2026)
   Rediseño sobre el CSS congelado de Pro: cabecera con título, tarjetas de
   producto limpias, subtotal en fila y botones jerarquizados. Aplica igual
   al widget del header de escritorio (a680950) y al de móvil (b455825).
   ====================================================================== */

.elementor-menu-cart__main {
    border-radius: 18px 0 0 18px;
    box-shadow: -12px 0 40px rgba(6, 6, 6, 0.16);
}

/* Cabecera del panel (el contenido lo repintan los fragments AJAX;
   el ::before vive en el contenedor, así que sobrevive) */
.elementor-menu-cart__main .widget_shopping_cart_content::before {
    content: "Tu carrito";
    display: block;
    padding: 6px 46px 16px 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #060606;
    border-bottom: 1px solid #f1efec;
    margin-bottom: 4px;
}

/* Botón de cerrar en redondo, como el del menú */
.elementor-menu-cart__close-button {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e7e2da;
    border-radius: 50%;
    color: #3d3d3d;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.25s ease;
}
.elementor-menu-cart__close-button:hover {
    background: #FFCAD4;
    color: #060606;
    transform: rotate(90deg);
}

/* ---- Productos ---- */
.elementor-menu-cart__main .elementor-menu-cart__product {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) 28px;
    grid-template-areas:
        "foto nombre quitar"
        "foto precio quitar";
    gap: 3px 14px;
    align-items: center;
    padding: 15px 0 !important;
    border-bottom: 1px solid #f1efec !important;
}

.elementor-menu-cart__main .elementor-menu-cart__product-image {
    grid-area: foto;
    padding: 0 !important;
}
.elementor-menu-cart__main .elementor-menu-cart__product-image img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #eee8e0;
    display: block;
}

.elementor-menu-cart__main .elementor-menu-cart__product-name {
    grid-area: nombre;
    align-self: end;
    padding: 0 !important;
}
.elementor-menu-cart__main .elementor-menu-cart__product-name a {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #060606 !important;
    text-decoration: none;
}
.elementor-menu-cart__main .elementor-menu-cart__product-name a:hover {
    color: #c9a86a !important;
}

/* Cantidad × precio: texto plano — anula el recuadro que le contagia
   woocommerce-quantity.css a todo .quantity */
.elementor-menu-cart__main .elementor-menu-cart__product-price {
    grid-area: precio;
    align-self: start;
    font-size: 13.5px;
    color: #7d7d7d !important;
    padding: 0 !important;
    text-align: left !important;
}
.elementor-menu-cart__main .elementor-menu-cart__product-price .quantity {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    font-size: inherit;
    color: inherit;
}
.elementor-menu-cart__main .elementor-menu-cart__product-price .woocommerce-Price-amount {
    font-weight: 600;
    color: #3d3d3d;
}

/* Quitar del carrito: discreto, rojo al pasar. OJO: Pro dibuja el aspa con
   los pseudo-elementos del DIV (los <a> de dentro son invisibles) y la
   posiciona en absoluto; el color va por sus variables --remove-item-*. */
.elementor-menu-cart__main .elementor-menu-cart__product-remove {
    --remove-item-button-color: #c4bcb0;
    --remove-item-button-hover-color: #b3403e;
    padding: 0 !important;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

/* ---- Subtotal en fila ---- */
.elementor-menu-cart__main .elementor-menu-cart__subtotal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 0 !important;
    margin: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #f1efec !important;
    text-align: left !important;
    font-size: 18px;
    color: #060606;
}
.elementor-menu-cart__main .elementor-menu-cart__subtotal strong {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7d7d7d;
}

/* ---- Botones: primero el principal, a todo el ancho ---- */
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding-top: 18px;
}
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 0;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.elementor-menu-cart__main .elementor-button--checkout {
    order: -1;
    background: #060606 !important;
    color: #fff !important;
    border: 1px solid #060606 !important;
}
.elementor-menu-cart__main .elementor-button--checkout:hover {
    opacity: 0.85;
}
.elementor-menu-cart__main .elementor-button--view-cart {
    background: #fff !important;
    color: #060606 !important;
    border: 1px solid #060606 !important;
}
.elementor-menu-cart__main .elementor-button--view-cart:hover {
    background: #faf7f2 !important;
}

/* Carrito vacío */
.elementor-menu-cart__main .woocommerce-mini-cart__empty-message {
    padding: 40px 0;
    text-align: center;
    font-size: 14px;
    color: #7d7d7d;
}