/* =============================================================================
   YUBI MATERNITY — CAPA EDITORIAL
   Sistema de diseño inspirado en el lenguaje de Hatch Collection y Cuyana,
   adaptado a la identidad Yubi (Satoshi + carbón/coral/crema).

   Se carga DESPUÉS de style.css y neutraliza deliberadamente el lenguaje
   anterior (radios grandes, sombras, hover lift, rellenos coral).
   Para desactivar toda la capa: quitar el enqueue de 'yubi-editorial' en
   functions.php. No modifica ningún archivo del tema padre.
   ============================================================================= */

:root {
    /* --- Superficies --- */
    --yubi-white: #FFFFFF;
    --yubi-cream: #F4F0EA;   /* fondo cálido de sección */
    --yubi-mist: #F0F5F6;    /* fondo frío de sección */
    --yubi-blush: #FAE5F1;   /* acento suave, uso escaso */
    --yubi-sand: #E8E2DA;    /* bordes y divisores */

    /* --- Tinta --- */
    --yubi-charcoal: #3C3B3B;
    --yubi-slate: #3D4243;
    --yubi-muted: #6F6E6E;   /* texto secundario */
    --yubi-coral: #EC6671;   /* acento: se usa poco y a propósito */

    /* --- Ritmo vertical --- */
    --yubi-section-y: 72px;
    --yubi-gap: 24px;
    --yubi-max: 1320px;

    /* --- Tipografía editorial --- */
    --yubi-eyebrow-size: 11px;
    --yubi-eyebrow-track: 0.18em;
}

@media (min-width: 1025px) {
    :root {
        --yubi-section-y: 128px;
    }
}

/* =============================================================================
   1. NEUTRALIZACIÓN DEL LENGUAJE ANTERIOR
   El look editorial es plano: sin sombras, sin elevación, esquinas rectas.
   ============================================================================= */

.woocommerce ul.products li.product,
.product-card,
.ecomus-icon-box__wrapper {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
}

.woocommerce ul.products li.product:hover,
.product-card:hover,
.ecomus-icon-box__wrapper:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    background: transparent !important;
}

/* =============================================================================
   2. TIPOGRAFÍA
   Satoshi en todo. El carácter editorial sale de la escala, el interletrado
   y el aire — no de una segunda familia tipográfica (el logo es sans).
   ============================================================================= */

body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--yubi-charcoal);
    letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.ecomus-heading {
    color: var(--yubi-charcoal);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

/* El héroe editorial reemplaza al encabezado de página del tema */
body.yubi-nohead .page-header--page {
    display: none;
}

/* Título display de héroe.
   La escala se ata al ancho del contenedor (cqi) y no al viewport: el titular
   vive en una columna del 42 %, así que 5vw lo desbordaba y partía palabras. */
.yubi-display .elementor-heading-title,
.yubi-display .ecomus-heading__title,
h1.yubi-display {
    font-size: clamp(34px, 7.6cqi, 68px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
    text-wrap: balance;
    hyphens: none;
    overflow-wrap: normal;
}

/* Reserva: navegadores sin container queries */
@supports not (font-size: 1cqi) {
    .yubi-display .elementor-heading-title,
    h1.yubi-display { font-size: clamp(34px, 3.4vw, 68px); }
}

/* La columna de texto del héroe es la unidad de referencia de la escala */
.yubi-hero__copy {
    container-type: inline-size;
}

/* Por debajo de 1025 el héroe se apila: la foto arriba, el texto debajo.
   A 42 % de ancho en tablet el titular no tiene sitio para respirar. */
@media (max-width: 1024px) {
    .yubi-hero {
        flex-direction: column !important;
    }
    .yubi-hero > .e-con,
    .yubi-hero > .elementor-column {
        width: 100% !important;
    }
    .yubi-hero__copy {
        container-type: normal;
    }
    .yubi-hero__copy .elementor-heading-title {
        font-size: clamp(34px, 6vw, 54px);
    }
}

/* Título de sección */
.yubi-h2 .elementor-heading-title,
.yubi-h2 .ecomus-heading__title {
    font-size: clamp(28px, 3.6vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.028em;
}

/* Antetítulo: el recurso más característico de Hatch */
.yubi-eyebrow,
.yubi-eyebrow .elementor-heading-title,
.yubi-eyebrow .ecomus-heading__subtitle {
    font-size: var(--yubi-eyebrow-size) !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: var(--yubi-eyebrow-track);
    line-height: 1.4;
    color: var(--yubi-muted) !important;
}

/* Frase editorial en itálica — Satoshi Italic Light, gran tamaño.
   Sustituye al serif italic de Hatch sin romper la identidad sans del logo. */
.yubi-quote .elementor-heading-title,
.yubi-quote .ecomus-heading__title {
    font-family: 'Satoshi', sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(24px, 3vw, 42px);
    line-height: 1.28;
    letter-spacing: -0.02em;
}

.yubi-lead {
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.65;
    color: var(--yubi-muted);
    max-width: 56ch;
}

/* =============================================================================
   3. BOTONES
   Jerarquía de tres niveles. Rectos, sin sombra, sin salto en hover.
   ============================================================================= */

.ecomus-slide__button,
.ecomus-slides-elementor .em-button,
.ecomus-banner__button,
.ecomus-banner .em-button,
.ecomus-button.em-button:not(.em-button-subtle):not(.em-button-text):not(.em-button-outline):not(.em-button-light),
.elementor-button:not(.elementor-button-link),
.button:not(.em-button-subtle):not(.em-button-light):not(.em-button-icon):not(.product-loop-button),
.woocommerce a.button:not(.em-button-subtle):not(.em-button-light):not(.em-button-icon):not(.product-loop-button),
.woocommerce button.button:not(.product-loop-button),
.woocommerce input.button,
.single_add_to_cart_button {
    background-color: var(--yubi-charcoal) !important;
    color: var(--yubi-white) !important;
    border: 1px solid var(--yubi-charcoal) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 17px 40px !important;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}

.ecomus-slide__button:hover,
.ecomus-slides-elementor .em-button:hover,
.ecomus-banner__button:hover,
.ecomus-banner .em-button:hover,
.ecomus-button.em-button:not(.em-button-subtle):not(.em-button-text):not(.em-button-outline):not(.em-button-light):hover,
.elementor-button:not(.elementor-button-link):hover,
.button:not(.em-button-subtle):not(.em-button-light):not(.em-button-icon):not(.product-loop-button):hover,
.woocommerce a.button:not(.em-button-subtle):not(.em-button-light):not(.em-button-icon):not(.product-loop-button):hover,
.woocommerce button.button:not(.product-loop-button):hover,
.woocommerce input.button:hover,
.single_add_to_cart_button:hover {
    background-color: var(--yubi-coral) !important;
    border-color: var(--yubi-coral) !important;
    color: var(--yubi-white) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Secundario: contorno */
.yubi-btn-outline .elementor-button,
.yubi-btn-outline .em-button,
a.yubi-btn-outline {
    background-color: transparent !important;
    color: var(--yubi-charcoal) !important;
    border: 1px solid var(--yubi-charcoal) !important;
}
.yubi-btn-outline .elementor-button:hover,
.yubi-btn-outline .em-button:hover,
a.yubi-btn-outline:hover {
    background-color: var(--yubi-charcoal) !important;
    color: var(--yubi-white) !important;
    border-color: var(--yubi-charcoal) !important;
}

/* Sobre imagen oscura */
.yubi-btn-light .elementor-button,
.yubi-btn-light .em-button {
    background-color: transparent !important;
    color: var(--yubi-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
}
.yubi-btn-light .elementor-button:hover,
.yubi-btn-light .em-button:hover {
    background-color: var(--yubi-white) !important;
    color: var(--yubi-charcoal) !important;
    border-color: var(--yubi-white) !important;
}

/* Terciario: enlace subrayado (el CTA de Hatch) */
.yubi-btn-link .elementor-button,
.yubi-btn-link .em-button,
a.yubi-link {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: var(--yubi-charcoal) !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 500 !important;
    text-decoration: underline !important;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
}
.yubi-btn-link .elementor-button:hover,
.yubi-btn-link .em-button:hover,
a.yubi-link:hover {
    background: transparent !important;
    color: var(--yubi-coral) !important;
    text-underline-offset: 4px;
}

/* Badges: sin píldora, sin relleno coral por defecto */
.em-badge,
.em-button-category {
    background-color: transparent !important;
    color: var(--yubi-charcoal) !important;
    border: 1px solid var(--yubi-sand) !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.em-badge:hover,
.em-button-category:hover {
    background-color: var(--yubi-charcoal) !important;
    border-color: var(--yubi-charcoal) !important;
    color: var(--yubi-white) !important;
}

/* La oferta sí es coral: es la única señal que debe gritar */
.onsale,
.em-product-badge-sale {
    background-color: var(--yubi-coral) !important;
    color: var(--yubi-white) !important;
    border-radius: 0 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 10px !important;
}

/* =============================================================================
   4. TARJETA DE PRODUCTO
   Imagen limpia a 3:4, título en versalitas pequeñas, precio discreto,
   swatches de color debajo (patrón visto en Margi).
   ============================================================================= */

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .product-title,
.product-card .product-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.45 !important;
    color: var(--yubi-charcoal) !important;
    margin-top: 18px !important;
}

.woocommerce ul.products li.product .price,
.product-card .price {
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em;
    color: var(--yubi-muted) !important;
    margin-top: 6px !important;
}

.woocommerce ul.products li.product .price ins,
.product-card .price ins {
    color: var(--yubi-coral) !important;
    text-decoration: none;
    font-weight: 500;
}

.woocommerce ul.products li.product .price del,
.product-card .price del {
    color: #A5A4A4 !important;
    opacity: 1;
    margin-right: 8px;
}

/* Ratio consistente: sin esto la retícula se ve desordenada */
.woocommerce ul.products li.product .product-thumbnail,
.product-card .product-thumbnail {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--yubi-cream);
    border-radius: 0 !important;
}

.woocommerce ul.products li.product .product-thumbnail img,
.product-card .product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* El único movimiento permitido: la imagen respira dentro de su marco */
.woocommerce ul.products li.product:hover .product-thumbnail img,
.product-card:hover .product-thumbnail img {
    transform: scale(1.04);
}

/* Swatches de color */
.wcboost-variation-swatches__item,
.wcboost-variation-swatches--color .wcboost-variation-swatches__item {
    border-radius: 50% !important;
    box-shadow: none !important;
    border: 1px solid var(--yubi-sand) !important;
}
.wcboost-variation-swatches__item.selected,
.wcboost-variation-swatches__item:hover {
    border-color: var(--yubi-charcoal) !important;
    box-shadow: none !important;
}

/* =============================================================================
   5. UTILIDADES DE MAQUETACIÓN PARA ELEMENTOR
   Se aplican poniendo la clase en "Avanzado > Clases CSS" de la sección.
   ============================================================================= */

/* Ritmo vertical de sección */
.yubi-section {
    padding-top: var(--yubi-section-y);
    padding-bottom: var(--yubi-section-y);
}
.yubi-section-tight {
    padding-top: calc(var(--yubi-section-y) * 0.55);
    padding-bottom: calc(var(--yubi-section-y) * 0.55);
}

/* Fondos de sección */
.yubi-bg-cream  { background-color: var(--yubi-cream); }
.yubi-bg-mist   { background-color: var(--yubi-mist); }
.yubi-bg-blush  { background-color: var(--yubi-blush); }
.yubi-bg-dark   { background-color: var(--yubi-charcoal); color: var(--yubi-white); }
.yubi-bg-dark h1, .yubi-bg-dark h2, .yubi-bg-dark h3,
.yubi-bg-dark .elementor-heading-title { color: var(--yubi-white); }

/* A sangre y sin canaleta — el mosaico de Cuyana */
.yubi-bleed {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
}
.yubi-nogap .elementor-container,
.yubi-nogap > .e-con-inner {
    gap: 0 !important;
}
.yubi-nogap .elementor-column > .elementor-element-populated {
    padding: 0 !important;
}

/* Divisor fino */
.yubi-rule {
    border-top: 1px solid var(--yubi-sand);
}

/* =============================================================================
   6. MOSAICO DE CATEGORÍAS
   Tile a sangre, etiqueta blanca abajo a la izquierda, velo sutil para
   garantizar contraste del texto sobre cualquier foto.
   ============================================================================= */

.yubi-mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

@media (max-width: 1024px) {
    .yubi-mosaic { grid-template-columns: repeat(2, 1fr); }
}

.yubi-tile {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

.yubi-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.yubi-tile:hover img {
    transform: scale(1.05);
}

/* Velo inferior: sin esto el texto blanco falla sobre fotos claras */
.yubi-tile::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(to top, rgba(30, 29, 29, 0.55), rgba(30, 29, 29, 0));
    pointer-events: none;
}

.yubi-tile__label {
    position: absolute;
    left: 28px;
    bottom: 26px;
    z-index: 2;
    color: var(--yubi-white);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.yubi-tile__label span {
    display: block;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--yubi-eyebrow-track);
    opacity: 0.8;
    margin-top: 6px;
}

@media (max-width: 767px) {
    .yubi-tile__label { left: 18px; bottom: 18px; font-size: 15px; }
}

/* =============================================================================
   7. BARRA DE CATEGORÍAS EN TEXTO
   Acceso rápido sin imágenes: muy editorial y mucho más ligero que banners.
   ============================================================================= */

.yubi-catbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.yubi-catbar li {
    position: relative;
    padding: 0 22px;
}

.yubi-catbar li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background: var(--yubi-sand);
}

.yubi-catbar a {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--yubi-charcoal);
    text-decoration: none;
    padding: 6px 0;
    display: inline-block;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.yubi-catbar a:hover {
    color: var(--yubi-charcoal);
    border-bottom-color: var(--yubi-charcoal);
}

@media (max-width: 767px) {
    .yubi-catbar {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .yubi-catbar::-webkit-scrollbar { display: none; }
    .yubi-catbar li { padding: 0 16px; white-space: nowrap; }
}

/* =============================================================================
   8. LAS TRES ETAPAS
   Bloque narrativo propio de Yubi: embarazo, lactancia, post-parto.
   Ninguna de las referencias resuelve esto, y es la ventaja de la marca.
   ============================================================================= */

.yubi-stages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.yubi-stage__media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--yubi-cream);
    margin-bottom: 24px;
}

.yubi-stage__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.yubi-stage:hover .yubi-stage__media img {
    transform: scale(1.04);
}

.yubi-stage__num {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--yubi-eyebrow-track);
    text-transform: uppercase;
    color: var(--yubi-coral);
    display: block;
    margin-bottom: 10px;
}

.yubi-stage__title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    color: var(--yubi-charcoal);
}

.yubi-stage__text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--yubi-muted);
    margin: 0 0 18px;
}

@media (max-width: 1024px) {
    .yubi-stages { grid-template-columns: 1fr; gap: 56px; }
}

/* =============================================================================
   9. FRANJA DE CONFIANZA
   Iconografía de línea fina, sin cajas ni fondos: el aire hace el trabajo.
   ============================================================================= */

.yubi-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
}

.yubi-trust__item svg,
.yubi-trust__item i {
    stroke-width: 1;
    margin-bottom: 14px;
    color: var(--yubi-charcoal);
}

.yubi-trust__title {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--yubi-charcoal);
    margin: 0 0 6px;
}

.yubi-trust__text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--yubi-muted);
    margin: 0;
}

@media (max-width: 767px) {
    .yubi-trust { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
}

/* =============================================================================
   10. CABECERA Y NAVEGACIÓN
   ============================================================================= */

.main-navigation ul.menu > li > a {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--yubi-charcoal) !important;
}

.main-navigation ul.menu > li > a:hover,
.main-navigation ul.menu > li.current-menu-item > a {
    color: var(--yubi-charcoal) !important;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
}

/* Barra de anuncio */
.yubi-announce {
    background: var(--yubi-charcoal);
    color: var(--yubi-white);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    padding: 11px 16px;
}
.yubi-announce a {
    color: var(--yubi-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =============================================================================
   11. NEWSLETTER
   ============================================================================= */

.yubi-newsletter .mc4wp-form input[type="email"],
.yubi-newsletter input[type="email"] {
    border: 0;
    border-bottom: 1px solid var(--yubi-charcoal);
    border-radius: 0;
    background: transparent;
    padding: 14px 0;
    font-size: 15px;
    width: 100%;
    color: var(--yubi-charcoal);
}

.yubi-newsletter input[type="email"]::placeholder {
    color: var(--yubi-muted);
}

.yubi-newsletter input[type="email"]:focus {
    outline: none;
    border-bottom-color: var(--yubi-coral);
}

/* =============================================================================
   12. PIE DE PÁGINA
   ============================================================================= */

.site-footer {
    border-top: 1px solid var(--yubi-sand);
}

.site-footer .widget-title,
.site-footer .footer-title {
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: var(--yubi-eyebrow-track);
    color: var(--yubi-muted) !important;
}

.site-footer a {
    font-size: 14px;
    color: var(--yubi-charcoal);
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* =============================================================================
   13. WHATSAPP FLOTANTE + BARRA MÓVIL
   Convención del mercado peruano — presente tanto en BUP como en Margi.
   Aquí se resuelve sobria: sin burbuja verde saturada.
   ============================================================================= */

.yubi-wa {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9990;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--yubi-coral);
    color: var(--yubi-charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.yubi-wa:hover,
.yubi-wa:focus-visible {
    background: var(--yubi-charcoal);
    color: var(--yubi-coral);
}

.yubi-wa svg { width: 24px; height: 24px; fill: currentColor; }

@media (max-width: 767px) {
    /* Sube por encima de la barra inferior del tema */
    .yubi-wa { bottom: 76px; right: 16px; }
}

/* =============================================================================
   14. ACCESIBILIDAD
   El coral sobre blanco queda en 3.4:1 — insuficiente para texto pequeño.
   Se reserva para texto grande, bordes y estados; nunca para párrafos.
   ============================================================================= */

:focus-visible {
    outline: 2px solid var(--yubi-charcoal);
    outline-offset: 3px;
}

.yubi-section p a:not(.elementor-button) {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .yubi-tile img,
    .yubi-stage__media img,
    .woocommerce ul.products li.product .product-thumbnail img,
    .product-card .product-thumbnail img {
        transition: none !important;
    }
    .yubi-tile:hover img,
    .yubi-stage:hover .yubi-stage__media img,
    .woocommerce ul.products li.product:hover .product-thumbnail img {
        transform: none !important;
    }
}

/* =============================================================================
   15. ACCIONES DE LA TARJETA DE PRODUCTO
   Wishlist, comparar, vista rápida y quick add son secundarios: no deben
   competir con la foto ni con el nombre de la prenda.
   ============================================================================= */

/* La especificidad tiene que superar a .button:not(.em-button-subtle) del
   style.css del child, que pesa (0,2,0). */
.product-loop-button.button,
.product-loop-button.ecomus-button,
.product-loop-button.em-button-icon,
.product-featured-icons .button,
.product-featured-icons .ecomus-button,
.product-featured-icons .em-button-icon {
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--yubi-charcoal) !important;
    border: 0 !important;
    border-radius: 0 !important;
    /* Hairline interior: sobre una foto clara (piel, ropa blanca, suelo beige)
       una caja blanca al 92 % se fundía con el fondo y el botón desaparecía. */
    box-shadow: inset 0 0 0 1px rgba(60, 59, 59, 0.12) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 12px 16px !important;
}

/* El icono va dentro de un <span> propio que arrastra el color del tema padre
   (--em-button-color: #ffffff). Sin forzarlo aquí quedaba blanco sobre blanco:
   el botón se veía, el icono no. El estado :hover ya lo hacía; el de reposo no. */
.product-loop-button.button *,
.product-loop-button.ecomus-button *,
.product-loop-button.em-button-icon *,
.product-featured-icons .button *,
.product-featured-icons .ecomus-button *,
.product-featured-icons .em-button-icon * {
    color: var(--yubi-charcoal) !important;
    fill: var(--yubi-charcoal) !important;
}

.product-loop-button.button:hover,
.product-loop-button.ecomus-button:hover,
.product-loop-button.em-button-icon:hover,
.product-featured-icons .button:hover,
.product-featured-icons .ecomus-button:hover,
.product-featured-icons .em-button-icon:hover {
    background: var(--yubi-charcoal) !important;
    color: var(--yubi-white) !important;
    box-shadow: none !important;
}

.product-loop-button.button:hover *,
.product-loop-button.ecomus-button:hover *,
.product-loop-button.em-button-icon:hover *,
.product-featured-icons .button:hover *,
.product-featured-icons .ecomus-button:hover *,
.product-featured-icons .em-button-icon:hover * {
    color: var(--yubi-white) !important;
    fill: var(--yubi-white) !important;
}

/* Las estrellas vacías en un catálogo sin reseñas sólo añaden ruido */
.woocommerce ul.products li.product .star-rating,
.product-card .star-rating,
.product-card .rating-count,
.ecomus-rating {
    display: none !important;
}

/* =============================================================================
   16. FORMULARIO DE SUSCRIPCIÓN
   Campo con línea inferior y botón al lado. Sin caja, sin sombra.
   ============================================================================= */

.yubi-subscribe {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    max-width: 520px;
}

.yubi-subscribe input[type="email"] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    border-bottom: 1px solid var(--yubi-charcoal);
    border-radius: 0;
    background: transparent;
    padding: 14px 0;
    font-family: inherit;
    font-size: 15px;
    color: var(--yubi-charcoal);
}

.yubi-subscribe input[type="email"]::placeholder {
    color: var(--yubi-muted);
}

.yubi-subscribe input[type="email"]:focus {
    outline: none;
    border-bottom-color: var(--yubi-coral);
}

.yubi-subscribe button {
    flex: 0 0 auto;
    background: var(--yubi-charcoal);
    color: var(--yubi-white);
    border: 1px solid var(--yubi-charcoal);
    border-radius: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 15px 28px;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.yubi-subscribe button:hover {
    background: var(--yubi-coral);
    border-color: var(--yubi-coral);
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 600px) {
    .yubi-subscribe { flex-direction: column; align-items: stretch; }
    .yubi-subscribe button { width: 100%; }
}

/* =============================================================================
   17. ACORDEÓN (FAQ)
   Reglas finas en lugar de cajas con borde, para no romper la planitud.
   ============================================================================= */

.elementor-accordion .elementor-accordion-item {
    border: 0 !important;
    border-top: 1px solid var(--yubi-sand) !important;
}

.elementor-accordion .elementor-accordion-item:last-child {
    border-bottom: 1px solid var(--yubi-sand) !important;
}

.elementor-accordion .elementor-tab-title {
    background: transparent !important;
    border: 0 !important;
    padding: 26px 0 !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
    color: var(--yubi-charcoal) !important;
}

.elementor-accordion .elementor-tab-title.elementor-active {
    color: var(--yubi-charcoal) !important;
}

.elementor-accordion .elementor-tab-content {
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 28px !important;
    font-size: 15px;
    line-height: 1.7;
    color: var(--yubi-muted);
    max-width: 70ch;
}

.elementor-accordion .elementor-accordion-icon {
    color: var(--yubi-charcoal) !important;
    width: auto !important;
    margin-right: 16px;
}

/* =============================================================================
   18. FICHA DE PRODUCTO INDIVIDUAL
   El tema controla el orden de los bloques (eso pide Theme Builder de
   Elementor Pro o sobrescribir plantillas del padre). Lo que sí se puede
   rehacer por completo con CSS es la jerarquía visual: qué se lee primero,
   qué pesa y qué se calla. Eso es lo que hace este bloque.
   ============================================================================= */

/* --- Migas: dato de orientación, no titular --------------------------------- */

.ecomus-breadcrumb-navigation-wrapper {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--yubi-muted);
}

.ecomus-breadcrumb-navigation-wrapper a {
    color: var(--yubi-muted);
}

.ecomus-breadcrumb-navigation-wrapper a:hover {
    color: var(--yubi-charcoal);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* --- Columna de resumen ----------------------------------------------------- */

.product-gallery-summary .summary {
    padding-top: 8px;
}

/* La categoría sobre el título hace de antetítulo, igual que en la home */
.summary .meta.meta-cat {
    font-size: 11px !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--yubi-eyebrow-track);
    color: var(--yubi-muted);
    margin-bottom: 14px;
}

.summary .meta.meta-cat a {
    color: var(--yubi-muted);
}

.summary .meta.meta-cat a:hover {
    color: var(--yubi-charcoal);
}

/* La etiqueta "Categoría:" sobra cuando el dato ya se lee como antetítulo */
.summary .meta.meta-cat .meta-cat__label {
    display: none;
}

.summary .product_title {
    font-size: clamp(28px, 2.6vw, 40px) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em;
    color: var(--yubi-charcoal) !important;
    margin: 0 0 16px !important;
}

/* --- Disponibilidad: dato, no distintivo ------------------------------------ */

.woocommerce-badges--single {
    margin-bottom: 18px !important;
}

.woocommerce-badges--single .stock,
.woocommerce-badges--single .woocommerce-badge {
    display: inline-block;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: var(--yubi-eyebrow-track);
    color: var(--yubi-muted) !important;
}

/* Agotado sí merece señal: es lo único que cambia la decisión de compra */
.woocommerce-badges--single .out-of-stock {
    color: var(--yubi-coral) !important;
}

/* --- Precio ------------------------------------------------------------------
   El rojo de sistema y la píldora "22% OFF" abaratan la percepción. El precio
   vigente va en carbón, el anterior tachado en gris, y el descuento como texto
   coral pequeño en versalitas. La información es idéntica; el tono, no. */

.ecomus-product-price {
    margin-bottom: 30px !important;
}

.ecomus-product-price .price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 24px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
    color: var(--yubi-charcoal) !important;
    margin: 0 !important;
}

.ecomus-product-price .price del,
.ecomus-product-price .price del .amount {
    color: #A5A4A4 !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    opacity: 1;
    text-decoration: line-through;
}

.ecomus-product-price .price ins,
.ecomus-product-price .price ins .amount {
    color: var(--yubi-charcoal) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.ecomus-product-price .sale-off,
.summary .sale-off {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: var(--yubi-coral) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: var(--yubi-eyebrow-track);
    text-transform: uppercase;
    align-self: center;
}

/* --- Cantidad y carrito ------------------------------------------------------ */

.summary form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 26px;
}

.summary .quantity {
    display: flex;
    align-items: center;
    border: 1px solid var(--yubi-sand);
    border-radius: 0 !important;
    background: transparent;
}

.summary .quantity input,
.summary .quantity .qty {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center;
    font-size: 15px;
    color: var(--yubi-charcoal);
    width: 46px;
}

.summary .quantity button,
.summary .quantity .plus,
.summary .quantity .minus {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--yubi-charcoal) !important;
    padding: 0 14px !important;
    box-shadow: none !important;
}

.summary .quantity button:hover,
.summary .quantity .plus:hover,
.summary .quantity .minus:hover {
    background: transparent !important;
    color: var(--yubi-coral) !important;
}

.summary .single_add_to_cart_button {
    flex: 1 1 240px;
    justify-content: center;
    min-height: 54px;
}

/* El precio ya se lee dos líneas más arriba: repetirlo dentro del botón
   alarga la etiqueta y quita fuerza a la acción. */
.summary .single_add_to_cart_button .divide,
.summary .single_add_to_cart_button > .price {
    display: none !important;
}

/* Favoritos y comparar: acompañan, no compiten.
   Estos botones acumulan .button + .product-loop-button + .em-button-outline,
   así que hace falta encadenar clases para ganarle a las reglas del tema. */
.summary .wcboost-wishlist-button.button,
.summary .wcboost-products-compare-button.button,
.summary a.product-loop-button.em-button-outline {
    background: transparent !important;
    border: 1px solid var(--yubi-sand) !important;
    border-radius: 0 !important;
    color: var(--yubi-charcoal) !important;
    box-shadow: none !important;
    min-width: 54px;
    min-height: 54px;
    padding: 0 !important;
}

.summary .wcboost-wishlist-button.button *,
.summary .wcboost-products-compare-button.button *,
.summary a.product-loop-button.em-button-outline * {
    color: var(--yubi-charcoal) !important;
    fill: var(--yubi-charcoal) !important;
}

.summary .wcboost-wishlist-button.button:hover,
.summary .wcboost-products-compare-button.button:hover,
.summary a.product-loop-button.em-button-outline:hover {
    background: transparent !important;
    border-color: var(--yubi-charcoal) !important;
    color: var(--yubi-coral) !important;
}

.summary .wcboost-wishlist-button.button:hover *,
.summary .wcboost-products-compare-button.button:hover *,
.summary a.product-loop-button.em-button-outline:hover * {
    color: var(--yubi-coral) !important;
    fill: var(--yubi-coral) !important;
}

/* El texto del botón sólo estorba cuando el icono ya lo dice */
.summary .wcboost-wishlist-button__text,
.summary .wcboost-products-compare-button__text {
    display: none;
}

/* --- Enlaces extra y metadatos ----------------------------------------------- */

.ecomus-product-extra-link {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--yubi-sand);
}

.ecomus-extra-link-item {
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--yubi-charcoal) !important;
}

.summary .product_meta {
    font-size: 13px;
    color: var(--yubi-muted);
    line-height: 2;
}

.summary .product_meta span,
.summary .product_meta a {
    color: var(--yubi-muted);
}

.summary .product_meta a:hover {
    color: var(--yubi-charcoal);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* La categoría ya aparece como antetítulo sobre el título: aquí sobra */
.summary .product_meta .posted_in {
    display: none !important;
}

/* --- Galería ----------------------------------------------------------------- */

.product-gallery-summary .woocommerce-product-gallery__image,
.product-gallery-summary .ecomus-product-images__item {
    background: var(--yubi-cream);
    border-radius: 0 !important;
    overflow: hidden;
}

.product-gallery-summary img {
    border-radius: 0 !important;
}

/* Los controles de la galería, discretos y cuadrados */
.product-gallery-summary .swiper-button-next,
.product-gallery-summary .swiper-button-prev,
.ecomus-product-zoom-wrapper .ecomus-product-zoom {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--yubi-charcoal) !important;
}

/* --- Selección de variantes (talla y color) ---------------------------------- */

.summary .variations th,
.summary .variations .label {
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: var(--yubi-eyebrow-track);
    color: var(--yubi-muted) !important;
    padding-bottom: 10px !important;
}

.summary .wcboost-variation-swatches__item {
    border-radius: 0 !important;
    border: 1px solid var(--yubi-sand) !important;
    box-shadow: none !important;
    min-width: 44px;
    min-height: 44px;
    font-size: 13px;
    letter-spacing: 0.04em;
}

/* El color sí es redondo: se lee como muestra de tela, no como botón */
.summary .wcboost-variation-swatches--color .wcboost-variation-swatches__item {
    border-radius: 50% !important;
    min-width: 30px;
    min-height: 30px;
}

.summary .wcboost-variation-swatches__item.selected,
.summary .wcboost-variation-swatches__item:hover {
    border-color: var(--yubi-charcoal) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.summary .reset_variations {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--yubi-muted);
}

/* --- Pestañas de contenido ---------------------------------------------------- */

.woocommerce-tabs .wc-tabs,
.woocommerce-tabs ul.tabs {
    border: 0 !important;
    border-bottom: 1px solid var(--yubi-sand) !important;
    padding: 0 !important;
    margin: 0 0 40px !important;
    display: flex;
    gap: 40px;
}

.woocommerce-tabs .wc-tabs li,
.woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-tabs .wc-tabs li::before,
.woocommerce-tabs .wc-tabs li::after,
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after {
    display: none !important;
}

.woocommerce-tabs .wc-tabs li a,
.woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 0 0 18px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--yubi-muted) !important;
    border-bottom: 1px solid transparent;
}

.woocommerce-tabs .wc-tabs li.active a,
.woocommerce-tabs ul.tabs li.active a {
    color: var(--yubi-charcoal) !important;
    border-bottom-color: var(--yubi-charcoal);
}

.woocommerce-tabs .panel,
.woocommerce-Tabs-panel {
    font-size: 16px;
    line-height: 1.75;
    color: var(--yubi-charcoal);
    max-width: 68ch;
}

.woocommerce-tabs .panel h2 {
    display: none;
}

.woocommerce-tabs,
.wc-tabs-wrapper {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.woocommerce-tabs .panel,
.woocommerce-Tabs-panel {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* --- Productos relacionados --------------------------------------------------- */

.related > h2,
.up-sells > h2,
.related .section-heading,
section.related h2 {
    font-size: clamp(24px, 2.4vw, 34px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em;
    color: var(--yubi-charcoal) !important;
    text-align: center;
    margin-bottom: 56px !important;
}

/* --- Barra fija de compra ------------------------------------------------------ */

.ecomus-product-atc-sticky,
[class*="atc-sticky"] {
    border-top: 1px solid var(--yubi-sand) !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: saturate(180%) blur(8px);
}

[class*="atc-sticky"] .price {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--yubi-charcoal) !important;
}

[class*="atc-sticky"] .price del {
    color: #A5A4A4 !important;
    font-size: 14px !important;
}

[class*="atc-sticky"] .price ins {
    color: var(--yubi-charcoal) !important;
    text-decoration: none !important;
}

/* --- Móvil --------------------------------------------------------------------- */

@media (max-width: 767px) {
    .summary form.cart {
        gap: 10px;
    }
    .summary .single_add_to_cart_button {
        flex: 1 1 100%;
        order: 3;
    }
    .ecomus-product-price .price {
        font-size: 21px !important;
    }
}

/* =============================================================================
   19. BLOQUES REORDENADOS DE LA FICHA
   Los pinta inc/yubi-single-product.php. Ver ese archivo para el orden
   completo de prioridades del resumen.
   ============================================================================= */

/* Descripción corta: va sobre el precio, así que tiene que leerse como
   argumento, no como letra pequeña. */
.summary .yubi-shortdesc {
    margin: 0 0 22px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--yubi-charcoal);
    max-width: 52ch;
}

.summary .yubi-shortdesc p {
    margin: 0 0 10px;
}

.summary .yubi-shortdesc p:last-child {
    margin-bottom: 0;
}

/* Ayuda de talla, pegada al botón de compra */
.summary .yubi-fit-help {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin: 0 0 20px;
}

.summary .yubi-fit-help__link {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--yubi-charcoal);
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
}

.summary .yubi-fit-help__link:hover {
    color: var(--yubi-coral);
    text-underline-offset: 4px;
}

/* Envío y cambios: información de apoyo, sin viñetas de sistema */
.summary .yubi-ship-note {
    list-style: none;
    margin: 0 0 26px;
    padding: 22px 0 0;
    border-top: 1px solid var(--yubi-sand);
}

.summary .yubi-ship-note li {
    position: relative;
    padding-left: 20px;
    margin: 0 0 8px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--yubi-muted);
}

.summary .yubi-ship-note li:last-child {
    margin-bottom: 0;
}

/* Guion tipográfico en lugar de bolita: más editorial y más sobrio */
.summary .yubi-ship-note li::before {
    content: "—";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--yubi-sand);
}

@media (max-width: 767px) {
    .summary .yubi-fit-help {
        gap: 10px 20px;
    }
    .summary .yubi-shortdesc {
        font-size: 15px;
    }
}

/* =============================================================================
   20. BARRA SUPERIOR (TOPBAR) — PÁGINAS DEL SITIO
   Franja fina sobre el header principal con Inicio, Blog, Sobre Nosotros y
   Contacto. Las categorías viven en el menú principal; esta es la ubicación
   secundaria para las páginas, sin agregar una segunda fila de navegación
   pesada. Activada por filtro en functions.php.
   ============================================================================= */

#topbar.topbar {
    border-bottom: 1px solid var(--yubi-sand) !important;
    background: var(--yubi-cream);
}

#topbar .topbar-container {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 40px;
    padding-right: 40px;
}

#topbar-menu.topbar-navigation ul.menu {
    display: flex;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#topbar-menu.topbar-navigation a {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--yubi-muted);
    text-decoration: none;
}

#topbar-menu.topbar-navigation a:hover,
#topbar-menu.topbar-navigation .current-menu-item > a {
    color: var(--yubi-charcoal);
}

@media (max-width: 767px) {
    #topbar .topbar-container {
        padding-left: 16px;
        padding-right: 16px;
    }
    #topbar-menu.topbar-navigation ul.menu {
        gap: 16px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    #topbar-menu.topbar-navigation ul.menu::-webkit-scrollbar {
        display: none;
    }
    #topbar-menu.topbar-navigation a {
        white-space: nowrap;
    }
}

/* =============================================================================
   21. TIENDA Y CATEGORÍAS DE PRODUCTO
   Misma plantilla de WooCommerce para ambas — un solo bloque cubre las dos.
   La grilla de producto ya está resuelta en el bloque 6; aquí solo se trata
   la cabecera de página y la barra de herramientas del catálogo.
   ============================================================================= */

.page-header--shop {
    background: var(--yubi-white);
    border-bottom: 1px solid var(--yubi-sand);
    padding-top: 64px;
    padding-bottom: 40px;
}

.page-header--shop .yubi-shop-eyebrow {
    margin: 0 0 14px;
}

.page-header--shop .page-header__title.em-font-h4 {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0;
}

/* Migas de pan: dato de orientación, no un segundo titular */
.page-header--shop .ecomus-breadcrumb-navigation-wrapper {
    margin-top: 14px;
}

@media (max-width: 767px) {
    .page-header--shop {
        padding-top: 40px;
        padding-bottom: 28px;
    }
}

/* --- Barra de herramientas del catálogo -------------------------------------- */

.catalog-toolbar {
    border-bottom: 1px solid var(--yubi-sand);
    padding-top: 22px;
    padding-bottom: 22px;
}

/* Botón "Filtrar" */
.catalog-toolbar__filter-button.em-button-outline {
    background: transparent !important;
    border: 1px solid var(--yubi-charcoal) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--yubi-charcoal) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 11px 20px !important;
}

.catalog-toolbar__filter-button.em-button-outline:hover {
    background: var(--yubi-charcoal) !important;
    color: var(--yubi-white) !important;
}

/* Selector de columnas de la grilla */
#ecomus-toolbar-view.ecomus-toolbar-view {
    display: flex;
    gap: 14px;
}

#ecomus-toolbar-view.ecomus-toolbar-view a {
    color: var(--yubi-sand);
    opacity: 1;
    transition: color 0.2s ease;
}

#ecomus-toolbar-view.ecomus-toolbar-view a.active,
#ecomus-toolbar-view.ecomus-toolbar-view a:hover {
    color: var(--yubi-charcoal);
}

@media (max-width: 767px) {
    #ecomus-toolbar-view.ecomus-toolbar-view {
        display: none;
    }
}

/* Orden (select2) */
.catalog-toolbar .select2-container--default .select2-selection--single {
    border: 1px solid var(--yubi-sand) !important;
    border-radius: 0 !important;
    background: transparent !important;
    height: auto !important;
    padding: 11px 36px 11px 16px !important;
}

.catalog-toolbar .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--yubi-charcoal);
    line-height: 1.4;
}

.catalog-toolbar .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 12px;
}

.catalog-toolbar .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--yubi-charcoal) transparent transparent transparent !important;
}

.select2-dropdown {
    border: 1px solid var(--yubi-sand) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--yubi-charcoal) !important;
    color: var(--yubi-white) !important;
}

.select2-results__option {
    font-size: 13px;
    padding: 10px 16px !important;
}

/* =============================================================================
   22. PANEL "FILTRAR" — TIENDA Y CATEGORÍAS
   El widget Ecomus - Products Filter ya trae los datos reales (categoría,
   color, talla); aquí solo se ajusta el lenguaje visual para que combine
   con el resto del sitio: plano, versalitas pequeñas, sin píldoras de color.
   ============================================================================= */

/* --- Cabecera y estructura del panel ------------------------------------------ */

#filter-sidebar-panel .panel__header {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--yubi-charcoal);
}

.products-filter-widget > h6 {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--yubi-eyebrow-track);
    color: var(--yubi-muted);
    margin: 0 0 20px;
}

/* Cada bloque (Categoría, Color, Talla) */
.products-filter__filter {
    border-bottom: 1px solid var(--yubi-sand);
    padding-bottom: 22px;
    margin-bottom: 22px;
}

.products-filter__filter:last-child {
    border-bottom: 0;
}

.products-filter__filter-name.filter-name {
    display: block;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--yubi-charcoal);
    margin-bottom: 16px;
    cursor: pointer;
}

/* --- Lista de categorías (con hijos anidados) --------------------------------- */

.products-filter__option.filter-list-item {
    padding: 9px 0;
    cursor: pointer;
}

.products-filter__option.filter-list-item .products-filter__option-name {
    font-size: 14px;
    color: var(--yubi-charcoal);
}

.products-filter__option.filter-list-item:hover .products-filter__option-name {
    color: var(--yubi-coral);
}

.products-filter__option.filter-list-item .products-filter__count {
    font-size: 12px;
    color: var(--yubi-muted);
    margin-left: 6px;
}

.products-filter__option.filter-list-item .children {
    margin: 6px 0 0 16px;
    padding-left: 12px;
    border-left: 1px solid var(--yubi-sand);
}

/* --- Color: pastillas de texto plano ------------------------------------------ */

.filter-swatches.swatches-button {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-swatches.swatches-button .swatch.swatch-button {
    border: 1px solid var(--yubi-sand);
    border-radius: 0;
    padding: 7px 14px;
    font-size: 12px;
    color: var(--yubi-charcoal);
    background: transparent;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.filter-swatches.swatches-button .swatch.swatch-button:hover {
    border-color: var(--yubi-charcoal);
}

.filter-swatches.swatches-button .swatch.swatch-button.selected {
    background: var(--yubi-charcoal);
    border-color: var(--yubi-charcoal);
    color: var(--yubi-white);
}

/* --- Talla: casillas planas -----------------------------------------------------
   El tema ya dibuja su propia casilla con ::before en .products-filter__option-name
   (recuadro + marca de check en ::after cuando está seleccionada). No se
   reconstruye desde cero: solo se recolorea a la paleta de la marca. */

.filter-checkboxes .products-filter__option {
    padding: 8px 0;
    cursor: pointer;
}

.filter-checkboxes .products-filter__option-name::before {
    border-color: var(--yubi-sand) !important;
    border-radius: 0 !important;
}

.filter-checkboxes .products-filter__option.selected .products-filter__option-name::before,
.filter-checkboxes .products-filter__option.active .products-filter__option-name::before {
    background-color: var(--yubi-charcoal) !important;
    border-color: var(--yubi-charcoal) !important;
}

.filter-checkboxes .products-filter__option-name {
    font-size: 14px;
    color: var(--yubi-charcoal);
}

.filter-checkboxes .products-filter__count {
    font-size: 12px;
    color: var(--yubi-muted);
}

/* --- Barra de filtros activos, sobre la grilla -------------------------------- */

.catalog-toolbar__active-filters.actived {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 18px 0;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--yubi-sand);
    font-size: 12px;
    color: var(--yubi-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.catalog-toolbar__active-filters.actived .catalog-toolbar__filters-actived,
.catalog-toolbar__active-filters.actived [class*="filters-actived"] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.catalog-toolbar__active-filters.actived .remove-filtered {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent !important;
    border: 1px solid var(--yubi-sand);
    border-radius: 0 !important;
    padding: 5px 10px;
    color: var(--yubi-charcoal) !important;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: 12px;
}

.catalog-toolbar__active-filters.actived .remove-filtered:hover {
    border-color: var(--yubi-charcoal);
}

.catalog-toolbar__active-filters.actived .remove-filtered-all {
    border: 0;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 767px) {
    .filter-swatches.swatches-button .swatch.swatch-button {
        padding: 6px 12px;
        font-size: 11px;
    }
}

/* =============================================================================
   23. FILTRO DE PRECIO (slider jQuery UI dentro del panel "Filtrar")
   El widget reutiliza el price_filter nativo de WooCommerce. Se recolorea
   al rojo saturado por defecto de jQuery UI a la paleta de la marca.
   ============================================================================= */

.filter.price.slider .price_slider.ui-slider {
    height: 3px;
    background: var(--yubi-sand);
    border: 0;
    border-radius: 0;
    margin: 10px 4px 26px;
}

.filter.price.slider .ui-slider-range {
    background: var(--yubi-charcoal);
    border-radius: 0;
}

.filter.price.slider .ui-slider-handle {
    width: 14px !important;
    height: 14px !important;
    top: -6px !important;
    background: var(--yubi-charcoal);
    border: 2px solid var(--yubi-white);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--yubi-charcoal);
    outline: none;
}

.filter.price.slider .ui-slider-handle:hover,
.filter.price.slider .ui-slider-handle.ui-state-active {
    background: var(--yubi-coral);
    box-shadow: 0 0 0 1px var(--yubi-coral);
}

.filter.price.slider .price_slider_amount {
    display: flex;
    align-items: center;
}

.filter.price.slider .price_slider_amount .button {
    display: none;
}

/* =============================================================================
   24. BOTÓN "SUBIR" (#gotop) — reposición y color
   Colisionaba con el WhatsApp flotante (mismo rincón, radios que se
   solapaban) y usaba fondo blanco con flecha negra, poco visible sobre
   fondos claros. Se apila arriba del WhatsApp, mismo lenguaje de color.
   ============================================================================= */

#gotop.em-button-go-top {
    right: 20px !important;
    bottom: 84px !important; /* 12px por encima del botón de WhatsApp (52px + 20px) */
    background-color: var(--yubi-charcoal) !important;
}

#gotop.em-button-go-top::before {
    background: conic-gradient(var(--yubi-coral) var(--cricle-degrees), var(--yubi-sand) var(--cricle-degrees)) !important;
}

#gotop.em-button-go-top::after {
    background-color: var(--yubi-charcoal) !important;
}

#gotop.em-button-go-top svg,
#gotop.em-button-go-top svg path {
    fill: var(--yubi-white) !important;
}

#gotop.em-button-go-top:hover::after {
    background-color: var(--yubi-coral) !important;
}

@media (max-width: 1024px) {
    #gotop.em-button-go-top {
        right: 16px !important;
    }
}

@media (max-width: 767px) {
    #gotop.em-button-go-top {
        /* El WhatsApp sube a 76px en móvil por la barra inferior del tema */
        bottom: 140px !important;
    }
}

/* =============================================================================
   25. LIBRO DE RECLAMACIONES
   Documento legal, no pieza de marketing: una columna estrecha, jerarquía
   tipográfica sobria y campos de línea simple. El coral solo marca lo que
   requiere atención (obligatorios, errores, código de la hoja).
   ============================================================================= */

.yubi-lr {
    max-width: 780px;
    margin: 0 auto;
    padding: var(--yubi-section-y) 20px;
    color: var(--yubi-charcoal);
}

.yubi-lr-eyebrow {
    font-size: var(--yubi-eyebrow-size);
    letter-spacing: var(--yubi-eyebrow-track);
    text-transform: uppercase;
    color: var(--yubi-muted);
    margin: 0 0 8px;
}

.yubi-lr-title {
    font-size: clamp(28px, 5vw, 40px);
    line-height: 1.15;
    margin: 0 0 16px;
    font-weight: 500;
}

.yubi-lr-intro {
    font-size: 15px;
    line-height: 1.7;
    color: var(--yubi-muted);
    margin: 0 0 32px;
    max-width: 62ch;
}

/* --- Ficha del proveedor --- */

.yubi-lr-proveedor {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px 24px;
    margin: 0 0 40px;
    padding: 20px 0;
    border-top: 1px solid var(--yubi-sand);
    border-bottom: 1px solid var(--yubi-sand);
}

.yubi-lr-proveedor dt,
.yubi-lr-hoja dt {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--yubi-muted);
    margin: 0 0 4px;
}

.yubi-lr-proveedor dd,
.yubi-lr-hoja dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* --- Bloques del formulario --- */

.yubi-lr-bloque {
    border: 0;
    border-top: 1px solid var(--yubi-sand);
    padding: 32px 0 8px;
    margin: 0;
}

/* El legend se flota para que no se pinte encima del border-top del
   fieldset, que es como lo posiciona el navegador por omisión. */
.yubi-lr-bloque legend {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    font-weight: 500;
    padding: 0;
    margin-bottom: 24px;
}

.yubi-lr-bloque > *:not(legend) {
    clear: both;
}

.yubi-lr-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--yubi-charcoal);
    font-size: 12px;
    flex: 0 0 auto;
}

.yubi-lr-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
}

.yubi-lr-campo {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.yubi-lr-campo--ancho {
    grid-column: 1 / -1;
}

.yubi-lr-campo label,
.yubi-lr-form label {
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--yubi-charcoal);
}

.yubi-lr-req {
    color: var(--yubi-coral);
}

.yubi-lr-form input[type="text"],
.yubi-lr-form input[type="email"],
.yubi-lr-form input[type="tel"],
.yubi-lr-form select,
.yubi-lr-form textarea {
    width: 100%;
    border: 1px solid var(--yubi-sand);
    border-radius: 0;
    background: var(--yubi-white);
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--yubi-charcoal);
    transition: border-color 0.2s ease;
}

.yubi-lr-form input:focus,
.yubi-lr-form select:focus,
.yubi-lr-form textarea:focus {
    outline: none;
    border-color: var(--yubi-charcoal);
}

.yubi-lr-form textarea {
    resize: vertical;
}

.yubi-lr-ayuda {
    font-size: 12px;
    color: var(--yubi-muted);
    margin-top: 6px;
    line-height: 1.5;
}

.yubi-lr-error {
    font-size: 12px;
    color: var(--yubi-coral);
    margin: 6px 0 0;
    line-height: 1.5;
}

.yubi-lr-campo--error input,
.yubi-lr-campo--error select,
.yubi-lr-campo--error textarea {
    border-color: var(--yubi-coral);
}

/* --- Opciones (producto/servicio, reclamo/queja) --- */

.yubi-lr-opciones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 24px;
}

.yubi-lr-opcion {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--yubi-sand);
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    margin: 0;
}

.yubi-lr-opcion:hover {
    border-color: var(--yubi-charcoal);
}

.yubi-lr-opcion input {
    margin-top: 3px;
    accent-color: var(--yubi-coral);
    flex: 0 0 auto;
}

.yubi-lr-opcion span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.yubi-lr-opcion strong {
    font-size: 14px;
    font-weight: 500;
}

.yubi-lr-opcion em {
    font-size: 12px;
    font-style: normal;
    color: var(--yubi-muted);
    line-height: 1.5;
}

.yubi-lr-opcion:has(input:checked) {
    border-color: var(--yubi-charcoal);
    background: var(--yubi-cream);
}

/* --- Casillas --- */

.yubi-lr-check {
    margin: 16px 0 0;
}

.yubi-lr-check label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--yubi-muted);
    margin: 0;
    cursor: pointer;
}

.yubi-lr-check input {
    margin-top: 3px;
    accent-color: var(--yubi-coral);
    flex: 0 0 auto;
}

.yubi-lr-check.yubi-lr-campo--error label {
    color: var(--yubi-coral);
}

/* Bloque del representante: oculto salvo que se marque "menor de edad". */
.yubi-lr-apoderado {
    margin-top: 20px;
    padding: 20px;
    background: var(--yubi-cream);
}

.yubi-lr-apoderado.is-hidden {
    display: none;
}

.yubi-lr-apoderado .yubi-lr-ayuda {
    margin: 0 0 16px;
}

/* Señuelo antispam: fuera de la vista pero accesible al DOM. */
.yubi-lr-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Botones --- */

.yubi-lr-enviar {
    margin: 28px 0 0;
}

.yubi-lr-btn {
    display: inline-block;
    background: var(--yubi-charcoal);
    color: var(--yubi-white);
    border: 1px solid var(--yubi-charcoal);
    border-radius: 0;
    padding: 14px 32px;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.yubi-lr-btn:hover {
    background: var(--yubi-coral);
    border-color: var(--yubi-coral);
    color: var(--yubi-white);
}

.yubi-lr-btn--plano {
    background: transparent;
    color: var(--yubi-charcoal);
}

.yubi-lr-btn--plano:hover {
    background: var(--yubi-charcoal);
    border-color: var(--yubi-charcoal);
    color: var(--yubi-white);
}

/* --- Avisos --- */

.yubi-lr-aviso {
    padding: 20px 24px;
    margin: 0 0 32px;
    border-left: 3px solid var(--yubi-coral);
    background: var(--yubi-cream);
    font-size: 14px;
    line-height: 1.6;
}

.yubi-lr-aviso--ok {
    border-left-color: var(--yubi-charcoal);
}

.yubi-lr-aviso h2 {
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 8px;
}

.yubi-lr-aviso p {
    margin: 0 0 8px;
}

.yubi-lr-aviso p:last-child {
    margin-bottom: 0;
}

.yubi-lr-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px !important;
}

/* --- Notas legales --- */

.yubi-lr-notas {
    list-style: none;
    margin: 32px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--yubi-sand);
}

.yubi-lr-notas li {
    position: relative;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--yubi-muted);
    margin-bottom: 8px;
}

.yubi-lr-notas li::before {
    content: "*";
    position: absolute;
    left: 0;
    top: 2px;
}

/* --- Constancia (hoja registrada) --- */

.yubi-lr-hoja {
    border: 1px solid var(--yubi-sand);
    padding: 32px;
}

.yubi-lr-hoja-head {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--yubi-sand);
}

.yubi-lr-codigo {
    font-size: 22px;
    font-weight: 500;
    margin: 0;
    color: var(--yubi-coral);
}

.yubi-lr-hoja-fecha {
    text-align: right;
    font-size: 13px;
    color: var(--yubi-muted);
}

.yubi-lr-hoja-fecha p {
    margin: 0 0 2px;
}

.yubi-lr-hoja-bloque {
    padding: 24px 0;
    border-bottom: 1px solid var(--yubi-sand);
}

.yubi-lr-hoja-bloque h3 {
    font-size: 11px;
    letter-spacing: var(--yubi-eyebrow-track);
    text-transform: uppercase;
    color: var(--yubi-muted);
    margin: 0 0 16px;
    font-weight: 500;
}

.yubi-lr-hoja-bloque dl {
    display: grid;
    gap: 14px;
    margin: 0;
}

.yubi-lr-hoja-bloque dl > div {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.yubi-lr-hoja-bloque dt {
    margin: 0;
}

.yubi-lr-pendiente,
.yubi-lr-respuesta {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

.yubi-lr-pendiente {
    color: var(--yubi-muted);
}

.yubi-lr-hoja-pie {
    padding-top: 20px;
}

.yubi-lr-firma {
    font-size: 12px;
    color: var(--yubi-muted);
    line-height: 1.6;
    margin: 0;
}

.yubi-lr-hoja-pie .yubi-lr-notas {
    margin-top: 20px;
    padding-top: 16px;
}

/* --- Aviso del Libro de Reclamaciones en la columna "Enlaces" del footer
       (Anexo III, para portales web). Se cuelga del menú del footer, así
       que hereda su columna y su comportamiento en móvil. --- */

.yubi-lr-menu-item {
    margin-top: 18px;
}

/* El aviso vive en la columna "Enlaces" en escritorio y al pie en móvil,
   donde esa columna se pliega en acordeón. Nunca se ven los dos. */
.yubi-lr-aviso-movil {
    display: none;
}

@media (max-width: 767px) {
    .yubi-lr-menu-item {
        display: none;
    }

    .yubi-lr-aviso-movil {
        display: block;
        padding: 0 20px 28px;
        background: #F5F5F5; /* mismo fondo que la última fila del footer */
        text-align: center;
    }
}

.yubi-lr-aviso-link {
    display: inline-block;
    line-height: 0;
    transition: opacity 0.2s ease;
}

.yubi-lr-aviso-link:hover {
    opacity: 0.7;
}

.yubi-lr-aviso-img {
    display: block;
    width: 150px;
    height: auto;
}

/* Respaldo en SVG si el archivo del aviso faltara en la mediateca. */
.yubi-lr-aviso-fallback {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--yubi-charcoal);
}

.yubi-lr-aviso-fallback svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex: 0 0 auto;
}

/* --- Móvil --- */

@media (max-width: 640px) {
    .yubi-lr-grid,
    .yubi-lr-opciones {
        grid-template-columns: minmax(0, 1fr);
    }

    .yubi-lr-hoja {
        padding: 20px;
    }

    .yubi-lr-hoja-bloque dl > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .yubi-lr-hoja-fecha {
        text-align: left;
    }
}

/* --- Impresión: la copia que el consumidor debe poder imprimir gratis
       (art. 4). Se deja solo la hoja, sin cabecera, footer ni acuse. --- */

@media print {
    body * {
        visibility: hidden !important;
    }

    .yubi-lr-hoja,
    .yubi-lr-hoja * {
        visibility: visible !important;
    }

    .yubi-lr-hoja {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        border: 0;
        padding: 0;
        font-size: 12px;
    }

    .yubi-lr-hoja-bloque {
        break-inside: avoid;
    }

    .yubi-lr-codigo {
        color: #000 !important;
    }

    .yubi-lr-aviso,
    .yubi-wa,
    #gotop {
        display: none !important;
    }
}