/* Yujju design system — base: tipografía global, enlaces, foco.
   Todas las reglas cuelgan de .yj-ds (clase de <body> que pone DesignSystemAssets). */

body.yj-ds {
    font-family: var(--yj-font-body);
    font-size: var(--yj-text-md);
    line-height: var(--yj-leading);
    color: var(--yj-text);
    background-color: var(--yj-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Cuerpo: una sola familia sans. Pisa Playfair/Open Sans/Poppins del kit de Elementor. */
.yj-ds p,
.yj-ds li,
.yj-ds td,
.yj-ds th,
.yj-ds label,
.yj-ds input,
.yj-ds select,
.yj-ds textarea,
.yj-ds .elementor-widget-text-editor,
.yj-ds .elementor-icon-box-description,
.yj-ds .elementor-image-box-description,
.yj-ds .elementor-counter-title,
.yj-ds .elementor-tab-content,
.yj-ds .woocommerce-product-details__short-description {
    font-family: var(--yj-font-body);
}

.yj-ds p { color: var(--yj-text); }

/* Títulos: serif de marca, tinta, sin negritas pesadas. */
.yj-ds h1, .yj-ds .h1,
.yj-ds h2, .yj-ds .h2,
.yj-ds h3, .yj-ds .h3,
.yj-ds .elementor-heading-title {
    font-family: var(--yj-font-display);
    font-weight: 500;
    line-height: var(--yj-leading-tight);
    letter-spacing: -.01em;
    color: var(--yj-ink);
}
.yj-ds h4, .yj-ds .h4,
.yj-ds h5, .yj-ds .h5,
.yj-ds h6, .yj-ds .h6,
.yj-ds .elementor-icon-box-title,
.yj-ds .elementor-image-box-title {
    font-family: var(--yj-font-body);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--yj-ink);
}

.yj-ds h1, .yj-ds .h1 { font-size: var(--yj-h1); }
.yj-ds h2, .yj-ds .h2 { font-size: var(--yj-h2); }
.yj-ds h3, .yj-ds .h3 { font-size: var(--yj-h3); }
.yj-ds h4, .yj-ds .h4 { font-size: var(--yj-h4); }

/* Enlaces */
.yj-ds a {
    color: var(--yj-primary);
    transition: color var(--yj-transition), background-color var(--yj-transition), border-color var(--yj-transition);
}
.yj-ds a:hover,
.yj-ds a:focus { color: var(--yj-primary-hover); }

/* Foco visible y accesible (teclado) en todo control interactivo. */
.yj-ds a:focus-visible,
.yj-ds button:focus-visible,
.yj-ds input:focus-visible,
.yj-ds select:focus-visible,
.yj-ds textarea:focus-visible,
.yj-ds [tabindex]:focus-visible {
    outline: 2px solid var(--yj-primary);
    outline-offset: 2px;
}

.yj-ds ::selection {
    background: var(--yj-primary-soft);
    color: var(--yj-ink);
}

.yj-ds hr { border-top: var(--yj-border); }

/* Pantalla de carga del tema: discreta, con el color de marca. */
.yj-ds .goal-page-loading { background: var(--yj-white); }
.yj-ds .goal-loader-inner::before,
.yj-ds .goal-loader-inner::after { border-color: var(--yj-primary) !important; }

@media (prefers-reduced-motion: reduce) {
    .yj-ds *,
    .yj-ds *::before,
    .yj-ds *::after {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
    }
}

/* Las opciones del tema imprimen en línea "Main Font" (Playfair en el cuerpo) y
   "Heading Font" (Open Sans en títulos, botones y nombres) con !important
   (lindo/inc/custom-styles.php). Se reasignan aquí con las mismas listas:
   cuerpo e interfaz en Inter, títulos h1–h3 en Playfair Display. */
body.yj-ds,
.yj-ds .widget .widget-title p,
.yj-ds .widget .widgettitle p,
.yj-ds .widget .widget-heading p,
.yj-ds .megamenu > li > a,
.yj-ds .product-block.grid .product-cat,
.yj-ds span.price,
.yj-ds .name,
.yj-ds .btn,
.yj-ds .button,
.yj-ds .post-layout .post-info .readmore,
.yj-ds h4, .yj-ds h5, .yj-ds h6,
.yj-ds .h4, .yj-ds .h5, .yj-ds .h6,
.yj-ds .product-block.grid .name a,
.yj-ds ul.product_list_widget .product-title a,
.yj-ds .product-block-list .name a,
.yj-ds .widget-title,
.yj-ds .widgettitle,
.yj-ds .details-product .information .compare,
.yj-ds .details-product .information .woosc-btn,
.yj-ds .details-product .information .woosw-btn,
.yj-ds .tabs-v1 .nav-tabs > li > a,
.yj-ds .tabs-v3 .head-tab {
    font-family: var(--yj-font-body) !important;
}
.yj-ds h1, .yj-ds h2, .yj-ds h3,
.yj-ds .h1, .yj-ds .h2, .yj-ds .h3,
.yj-ds .post-layout .entry-title a {
    font-family: var(--yj-font-display) !important;
}

/* Pestañas de productos desplazables en móvil: sin barra de scroll visible */
.yj-ds .nav.tabs-product {
    scrollbar-width: none;
}
.yj-ds .nav.tabs-product::-webkit-scrollbar {
    display: none;
}

/* Contenedor de páginas WooCommerce alineado a la caja de 1320 de Elementor y footer
   (el tema solo lo ensancha desde 1500px; entre 1360 y 1500 quedaba en 1200). */
@media (min-width: 1360px) {
    .yj-ds .container {
        width: 1320px;
    }
}