/*
Theme Name: DTF Store tema
Author: Minimedia
Description: Moderno, rápido, responsive, adaptado a dispositivos móviles. Totalmente compatible con Gutemberg, Elementor. Diseñado para DTF STORE.
Version: 1.0.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theme-dtf-store
Tags: one-column, custom-menu, translation-ready, full-width-template
*/

/* 
 * Layout de Ancho Contenido y Alineaciones Estructuradas (Gutenberg & Custom HTML)
 * Limita el ancho de textos e imágenes comunes para una óptima legibilidad,
 * permitiendo secciones de ancho completo.
 */

/* Elementos comunes centrados y con límite de ancho legible */
.entry-content>*:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
    max-width: 80rem !important;
    /* ~1280px */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* Alineación Ancha (Gutenberg Alignwide) */
.entry-content>.alignwide {
    max-width: 90rem !important;
    /* ~1440px */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* Alineación Completa (Gutenberg Alignfull / Banners HTML) */
.entry-content>.alignfull {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Asegurar que las imágenes dentro del editor sean fluidas */
.entry-content img {
    height: auto;
    max-width: 100%;
}

/* Alineaciones estándar de WordPress y Gutenberg */
.aligncenter,
.wp-block-image.aligncenter {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
}

.aligncenter img,
.wp-block-image.aligncenter img,
.wp-block-image.aligncenter>a {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.alignleft,
.wp-block-image.alignleft {
    float: left;
    margin-right: 2rem !important;
    margin-bottom: 1.5rem !important;
}

.alignright,
.wp-block-image.alignright {
    float: right;
    margin-left: 2rem !important;
    margin-bottom: 1.5rem !important;
}

.alignnone,
.wp-block-image.alignnone {
    display: block;
    margin-bottom: 1.5rem;
}

/* Limpieza de floats en contenedores */
.entry-content::after {
    content: "";
    display: table;
    clear: both;
}

/* Espacio inteligente en la parte superior (debajo del header) */
.entry-content {
    padding-bottom: 4rem !important;
}

/* Si el primer elemento no es de ancho completo, añadir margen de separación con el header */
.entry-content>*:first-child:not(.alignfull) {
    margin-top: 2.5rem !important;
    /* 40px de separación */
}


/* ==========================================================================
   MODOS DE DISEÑO (TEMA) Y VARIABLES DE COLOR
   ========================================================================== */

/* Variables de Marca por Defecto (Claro / Naranja) */
body {
    --brand-primary: #ea580c;
    --brand-hover: #c2410c;
    --brand-button-bg: linear-gradient(135deg, #ea580c 0%, #e11d48 100%);
    --brand-button-hover-bg: linear-gradient(135deg, #c2410c 0%, #be123c 100%);
}

/* Aplicar paleta a botones globales */
#site-footer button[type="submit"] {
    background: var(--brand-button-bg) !important;
    transition: background 0.3s ease !important;
}

#site-footer button[type="submit"]:hover {
    background: var(--brand-button-hover-bg) !important;
}

/* Enlaces generales del contenido */
article a {
    color: var(--brand-primary);
    transition: color 0.2s ease;
}

article a:hover {
    color: var(--brand-hover);
}

/* --- 1. MODO CLARO (Default) --- */
body.theme-mode-light {
    --brand-primary: #ea580c;
    --brand-hover: #c2410c;
    --brand-button-bg: linear-gradient(135deg, #ea580c 0%, #e11d48 100%);
    --brand-button-hover-bg: linear-gradient(135deg, #c2410c 0%, #be123c 100%);
    background-color: #f8fafc;
    /* bg-slate-50 */
    color: #0f172a;
    /* text-slate-900 */
}

body.theme-mode-light #site-header {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(226, 232, 240, 0.5) !important;
}

body.theme-mode-light #site-footer {
    background-color: #f4f4f5 !important;
    /* Gris claro */
    border-color: #e4e4e7 !important;
    /* Borde suave */
    color: #52525b !important;
}

body.theme-mode-light #site-footer h3,
body.theme-mode-light #site-footer a.text-transparent {
    color: #18181b !important;
    /* Encabezados en negro */
}

body.theme-mode-light #site-footer a {
    color: #52525b !important;
}

body.theme-mode-light #site-footer a:hover {
    color: var(--brand-primary) !important;
}

body.theme-mode-light #site-footer input {
    background-color: #ffffff !important;
    border-color: #d4d4d8 !important;
    color: #18181b !important;
}

/* --- 2. MODO OSCURO (Grisáceo) --- */
body.theme-mode-dark {
    --brand-primary: #ff6b00;
    --brand-hover: #e05300;
    --brand-button-bg: linear-gradient(135deg, #ff6b00 0%, #e11d48 100%);
    --brand-button-hover-bg: linear-gradient(135deg, #e05300 0%, #be123c 100%);
    background-color: #121212;
    /* Gris carbón neutro muy oscuro */
    color: #71717a;
    /* Texto base en gris zinc-500 */
}

body.theme-mode-dark #site-header {
    background-color: rgba(30, 30, 30, 0.9) !important;
    /* Gris un poco más claro para separar el menú */
    border-color: rgba(63, 63, 70, 0.4) !important;
    /* Borde en gris zinc-700 */
}

body.theme-mode-dark #site-header .primary-menu-list>li>a {
    color: #e4e4e7 !important;
    /* Gris zinc-200 */
}

/* Marquee fixed positioning */
.has-dtf-marquee-top .dtf-marquee-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: var(--dtf-marquee-height);
}

.has-dtf-marquee-bottom .dtf-marquee-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: var(--dtf-marquee-height);
}

body.has-dtf-marquee-top {
    padding-top: var(--dtf-marquee-height);
}

body.has-dtf-marquee-bottom {
    padding-bottom: var(--dtf-marquee-height);
}

/* End Marquee */

body.theme-mode-dark #site-header .primary-menu-list>li>a:hover {
    color: var(--brand-primary) !important;
}

body.theme-mode-dark #mobile-menu {
    background-color: rgba(30, 30, 30, 0.95) !important;
    border-color: rgba(63, 63, 70, 0.6) !important;
}

body.theme-mode-dark #mobile-menu a {
    color: #f4f4f5 !important;
}

body.theme-mode-dark #site-footer {
    background-color: #1e1e1e !important;
    /* Gris carbón a juego con el header */
    border-color: #2e2e33 !important;
    color: #a1a1aa !important;
}

body.theme-mode-dark #site-footer h3,
body.theme-mode-dark #site-footer a.text-transparent {
    color: #ffffff !important;
}

body.theme-mode-dark #site-footer a {
    color: #a1a1aa !important;
}

body.theme-mode-dark #site-footer a:hover {
    color: var(--brand-primary) !important;
}

body.theme-mode-dark #site-footer input {
    background-color: #121212 !important;
    border-color: #3f3f46 !important;
    color: #ffffff !important;
}

/* NOTA: Eliminado el cambio forzado de .bg-white a gris para mantener legible la app y rejilla de subida */
body.theme-mode-dark h1,
body.theme-mode-dark h2,
body.theme-mode-dark h3,
body.theme-mode-dark h4 {
    color: #f4f4f5;
}

/* --- 3. MODO VERANO (Azulete) --- */
body.theme-mode-summer {
    --brand-primary: #0284c7;
    --brand-hover: #0369a1;
    --brand-button-bg: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%);
    --brand-button-hover-bg: linear-gradient(135deg, #0369a1 0%, #0891b2 100%);
    background-color: #f0f9ff;
    /* bg-sky-50 (azul muy claro) */
    color: #0c4a6e;
    /* text-sky-900 */
}

body.theme-mode-summer #site-header {
    background-color: rgba(224, 242, 254, 0.8) !important;
    /* bg-sky-100 */
    border-color: rgba(186, 230, 253, 0.5) !important;
}

body.theme-mode-summer #site-header .primary-menu-list>li>a {
    color: #0369a1 !important;
    /* sky-700 */
}

body.theme-mode-summer #site-header .primary-menu-list>li>a:hover {
    color: var(--brand-primary) !important;
}

body.theme-mode-summer #mobile-menu {
    background-color: rgba(224, 242, 254, 0.95) !important;
    border-color: rgba(186, 230, 253, 0.6) !important;
}

body.theme-mode-summer #mobile-menu a {
    color: #0369a1 !important;
}

body.theme-mode-summer #site-footer {
    background-color: #e0f2fe !important;
    /* Fondo azul cielo suave */
    border-color: #bae6fd !important;
    color: #0369a1 !important;
}

body.theme-mode-summer #site-footer h3,
body.theme-mode-summer #site-footer a.text-transparent {
    color: #0c4a6e !important;
}

body.theme-mode-summer #site-footer a {
    color: #0369a1 !important;
}

body.theme-mode-summer #site-footer a:hover {
    color: var(--brand-primary) !important;
}

body.theme-mode-summer #site-footer input {
    background-color: #ffffff !important;
    border-color: #bae6fd !important;
    color: #0369a1 !important;
}

body.theme-mode-summer .bg-white {
    background-color: #ffffff !important;
    border-color: rgba(186, 230, 253, 0.4) !important;
}

body.theme-mode-summer h1,
body.theme-mode-summer h2,
body.theme-mode-summer h3,
body.theme-mode-summer h4 {
    color: #0c4a6e;
}

/* --- 4. MODO NARANJA (Pastel) --- */
body.theme-mode-orange {
    --brand-primary: #c2410c;
    --brand-hover: #9a3412;
    --brand-button-bg: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
    --brand-button-hover-bg: linear-gradient(135deg, #9a3412 0%, #c2410c 100%);
    background-color: #fff7ed;
    /* bg-orange-50 */
    color: #9a3412;
    /* text-orange-800 */
}

body.theme-mode-orange #site-header {
    background-color: rgba(255, 237, 213, 0.8) !important;
    /* bg-orange-100 */
    border-color: rgba(254, 215, 170, 0.5) !important;
}

body.theme-mode-orange #site-header .primary-menu-list>li>a {
    color: #9a3412 !important;
}

body.theme-mode-orange #site-header .primary-menu-list>li>a:hover {
    color: var(--brand-primary) !important;
}

body.theme-mode-orange #mobile-menu {
    background-color: rgba(255, 237, 213, 0.95) !important;
    border-color: rgba(254, 215, 170, 0.6) !important;
}

body.theme-mode-orange #mobile-menu a {
    color: #9a3412 !important;
}

body.theme-mode-orange #site-footer {
    background-color: #ffedd5 !important;
    border-color: #fed7aa !important;
    color: #9a3412 !important;
}

body.theme-mode-orange #site-footer h3,
body.theme-mode-orange #site-footer a.text-transparent {
    color: #7c2d12 !important;
}

body.theme-mode-orange #site-footer a {
    color: #9a3412 !important;
}

body.theme-mode-orange #site-footer a:hover {
    color: var(--brand-primary) !important;
}

body.theme-mode-orange #site-footer input {
    background-color: #ffffff !important;
    border-color: #fed7aa !important;
    color: #7c2d12 !important;
}

body.theme-mode-orange .bg-white {
    background-color: #ffffff !important;
    border-color: rgba(254, 215, 170, 0.4) !important;
}

body.theme-mode-orange h1,
body.theme-mode-orange h2,
body.theme-mode-orange h3,
body.theme-mode-orange h4 {
    color: #7c2d12;
}

/* --- 5. MODO VERDE (Menta) --- */
body.theme-mode-green {
    --brand-primary: #059669;
    --brand-hover: #047857;
    --brand-button-bg: linear-gradient(135deg, #059669 0%, #10b981 100%);
    --brand-button-hover-bg: linear-gradient(135deg, #047857 0%, #059669 100%);
    background-color: #f0fdf4;
    /* bg-green-50 */
    color: #166534;
    /* text-green-800 */
}

body.theme-mode-green #site-header {
    background-color: rgba(220, 252, 231, 0.8) !important;
    /* bg-green-100 */
    border-color: rgba(187, 247, 208, 0.5) !important;
}

body.theme-mode-green #site-header .primary-menu-list>li>a {
    color: #166534 !important;
}

body.theme-mode-green #site-header .primary-menu-list>li>a:hover {
    color: var(--brand-primary) !important;
}

body.theme-mode-green #mobile-menu {
    background-color: rgba(220, 252, 231, 0.95) !important;
    border-color: rgba(187, 247, 208, 0.6) !important;
}

body.theme-mode-green #mobile-menu a {
    color: #166534 !important;
}

body.theme-mode-green #site-footer {
    background-color: #dcfce7 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}

body.theme-mode-green #site-footer h3,
body.theme-mode-green #site-footer a.text-transparent {
    color: #14532d !important;
}

body.theme-mode-green #site-footer a {
    color: #166534 !important;
}

body.theme-mode-green #site-footer a:hover {
    color: var(--brand-primary) !important;
}

body.theme-mode-green #site-footer input {
    background-color: #ffffff !important;
    border-color: #bbf7d0 !important;
    color: #14532d !important;
}

body.theme-mode-green .bg-white {
    background-color: #ffffff !important;
    border-color: rgba(187, 247, 208, 0.4) !important;
}

body.theme-mode-green h1,
body.theme-mode-green h2,
body.theme-mode-green h3,
body.theme-mode-green h4 {
    color: #14532d;
}

/* --- 6. MODO AMARILLO (Cálido) --- */
body.theme-mode-yellow {
    --brand-primary: #d97706;
    --brand-hover: #b45309;
    --brand-button-bg: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    --brand-button-hover-bg: linear-gradient(135deg, #b45309 0%, #d97706 100%);
    background-color: #fefce8;
    /* bg-yellow-50 */
    color: #854d0e;
    /* text-yellow-800 */
}

body.theme-mode-yellow #site-header {
    background-color: rgba(254, 249, 195, 0.8) !important;
    /* bg-yellow-100 */
    border-color: rgba(254, 240, 138, 0.5) !important;
}

body.theme-mode-yellow #site-header .primary-menu-list>li>a {
    color: #854d0e !important;
}

body.theme-mode-yellow #site-header .primary-menu-list>li>a:hover {
    color: var(--brand-primary) !important;
}

body.theme-mode-yellow #mobile-menu {
    background-color: rgba(254, 249, 195, 0.95) !important;
    border-color: rgba(254, 240, 138, 0.6) !important;
}

body.theme-mode-yellow #mobile-menu a {
    color: #854d0e !important;
}

body.theme-mode-yellow #site-footer {
    background-color: #fef9c3 !important;
    border-color: #fef08a !important;
    color: #854d0e !important;
}

body.theme-mode-yellow #site-footer h3,
body.theme-mode-yellow #site-footer a.text-transparent {
    color: #713f12 !important;
}

body.theme-mode-yellow #site-footer a {
    color: #854d0e !important;
}

body.theme-mode-yellow #site-footer a:hover {
    color: var(--brand-primary) !important;
}

body.theme-mode-yellow #site-footer input {
    background-color: #ffffff !important;
    border-color: #fef08a !important;
    color: #713f12 !important;
}

body.theme-mode-yellow .bg-white {
    background-color: #ffffff !important;
    border-color: rgba(254, 240, 138, 0.4) !important;
}

body.theme-mode-yellow h1,
body.theme-mode-yellow h2,
body.theme-mode-yellow h3,
body.theme-mode-yellow h4 {
    color: #713f12;
}

/* --- 7. MODO FUCSIA (Suave) --- */
body.theme-mode-fuchsia {
    --brand-primary: #c026d3;
    --brand-hover: #a21caf;
    --brand-button-bg: linear-gradient(135deg, #c026d3 0%, #ec4899 100%);
    --brand-button-hover-bg: linear-gradient(135deg, #a21caf 0%, #db2777 100%);
    background-color: #fdf4ff;
    /* bg-fuchsia-50 */
    color: #86198f;
    /* text-fuchsia-800 */
}

body.theme-mode-fuchsia #site-header {
    background-color: rgba(250, 232, 255, 0.8) !important;
    /* bg-fuchsia-100 */
    border-color: rgba(245, 208, 254, 0.5) !important;
}

body.theme-mode-fuchsia #site-header .primary-menu-list>li>a {
    color: #86198f !important;
}

body.theme-mode-fuchsia #site-header .primary-menu-list>li>a:hover {
    color: var(--brand-primary) !important;
}

body.theme-mode-fuchsia #mobile-menu {
    background-color: rgba(250, 232, 255, 0.95) !important;
    border-color: rgba(245, 208, 254, 0.6) !important;
}

body.theme-mode-fuchsia #mobile-menu a {
    color: #86198f !important;
}

body.theme-mode-fuchsia #site-footer {
    background-color: #fae8ff !important;
    border-color: #f5d0fe !important;
    color: #86198f !important;
}

body.theme-mode-fuchsia #site-footer h3,
body.theme-mode-fuchsia #site-footer a.text-transparent {
    color: #701a75 !important;
}

body.theme-mode-fuchsia #site-footer a {
    color: #86198f !important;
}

body.theme-mode-fuchsia #site-footer a:hover {
    color: var(--brand-primary) !important;
}

body.theme-mode-fuchsia #site-footer input {
    background-color: #ffffff !important;
    border-color: #f5d0fe !important;
    color: #701a75 !important;
}

body.theme-mode-fuchsia .bg-white {
    background-color: #ffffff !important;
    border-color: rgba(245, 208, 254, 0.4) !important;
}

body.theme-mode-fuchsia h1,
body.theme-mode-fuchsia h2,
body.theme-mode-fuchsia h3,
body.theme-mode-fuchsia h4 {
    color: #701a75;
}

/* --- 8. MODO VIOLETA (Lavanda) --- */
body.theme-mode-violet {
    --brand-primary: #7c3aed;
    --brand-hover: #6d28d9;
    --brand-button-bg: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
    --brand-button-hover-bg: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
    background-color: #faf5ff;
    /* bg-purple-50 */
    color: #6b21a8;
    /* text-purple-800 */
}

body.theme-mode-violet #site-header {
    background-color: rgba(243, 232, 255, 0.8) !important;
    /* bg-purple-100 */
    border-color: rgba(233, 213, 255, 0.5) !important;
}

body.theme-mode-violet #site-header .primary-menu-list>li>a {
    color: #6b21a8 !important;
}

body.theme-mode-violet #site-header .primary-menu-list>li>a:hover {
    color: var(--brand-primary) !important;
}

body.theme-mode-violet #mobile-menu {
    background-color: rgba(243, 232, 255, 0.95) !important;
    border-color: rgba(233, 213, 255, 0.6) !important;
}

body.theme-mode-violet #mobile-menu a {
    color: #6b21a8 !important;
}

body.theme-mode-violet #site-footer {
    background-color: #f3e8ff !important;
    border-color: #e9d5ff !important;
    color: #6b21a8 !important;
}

body.theme-mode-violet #site-footer h3,
body.theme-mode-violet #site-footer a.text-transparent {
    color: #581c87 !important;
}

body.theme-mode-violet #site-footer a {
    color: #6b21a8 !important;
}

body.theme-mode-violet #site-footer a:hover {
    color: var(--brand-primary) !important;
}

body.theme-mode-violet #site-footer input {
    background-color: #ffffff !important;
    border-color: #e9d5ff !important;
    color: #581c87 !important;
}

body.theme-mode-violet .bg-white {
    background-color: #ffffff !important;
    border-color: rgba(233, 213, 255, 0.4) !important;
}

body.theme-mode-violet h1,
body.theme-mode-violet h2,
body.theme-mode-violet h3,
body.theme-mode-violet h4 {
    color: #581c87;
}

/* --- 9. MODO AZUL MARINO (Grisáceo) --- */
body.theme-mode-navy {
    --brand-primary: #1d4ed8;
    --brand-hover: #1e40af;
    --brand-button-bg: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
    --brand-button-hover-bg: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    background-color: #f0f4f8;
    /* gris azulado muy suave */
    color: #102a43;
    /* azul marino grisáceo */
}

body.theme-mode-navy #site-header {
    background-color: rgba(217, 226, 236, 0.85) !important;
    border-color: rgba(188, 204, 220, 0.5) !important;
}

body.theme-mode-navy #site-header .primary-menu-list>li>a {
    color: #102a43 !important;
}

body.theme-mode-navy #site-header .primary-menu-list>li>a:hover {
    color: var(--brand-primary) !important;
}

body.theme-mode-navy #mobile-menu {
    background-color: rgba(217, 226, 236, 0.95) !important;
    border-color: rgba(188, 204, 220, 0.6) !important;
}

body.theme-mode-navy #mobile-menu a {
    color: #102a43 !important;
}

body.theme-mode-navy #site-footer {
    background-color: #d9e2ec !important;
    border-color: #bcccdc !important;
    color: #102a43 !important;
}

body.theme-mode-navy #site-footer h3,
body.theme-mode-navy #site-footer a.text-transparent {
    color: #0b1a30 !important;
}

body.theme-mode-navy #site-footer a {
    color: #102a43 !important;
}

body.theme-mode-navy #site-footer a:hover {
    color: var(--brand-primary) !important;
}

body.theme-mode-navy #site-footer input {
    background-color: #ffffff !important;
    border-color: #bcccdc !important;
    color: #0b1a30 !important;
}

body.theme-mode-navy .bg-white {
    background-color: #ffffff !important;
    border-color: rgba(188, 204, 220, 0.4) !important;
}

body.theme-mode-navy h1,
body.theme-mode-navy h2,
body.theme-mode-navy h3,
body.theme-mode-navy h4 {
    color: #0b1a30;
}

/* ==========================================================================
   ANIMACIÓN DE IMAGEN DE FONDO (PAGINA)
   ========================================================================== */

/* Transición suave al cargar la imagen de fondo */
@keyframes bgFadeIn {
    from {
        opacity: 0.95;
    }

    to {
        opacity: 1;
    }
}

body.custom-background {
    animation: bgFadeIn 1s ease-out !important;
}

/* ==========================================================================
   WOOCOMMERCE MY ACCOUNT PAGES STYLING (STYLE.CSS COMPATIBILITY)
   ========================================================================== */
.woocommerce-account .woocommerce {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    max-width: 80rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    width: 100% !important;
}


.woocommerce-account .woocommerce-MyAccount-navigation {
    float: none !important;
    background-color: #ffffff !important;
    border-radius: 1rem !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    padding: 0.75rem !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: flex !important;
    align-items: center !important;
    padding: 0.875rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    /* slate-600 */
    border-radius: 0.75rem !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    color: var(--brand-primary) !important;
    background-color: #f8fafc !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--brand-button-bg) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a svg {
    color: #ffffff !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a svg {
    color: #94a3b8 !important;
    /* slate-400 */
    transition: color 0.2s ease !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover svg {
    color: var(--brand-primary) !important;
}

.woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    background-color: #ffffff !important;
    border-radius: 1rem !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
    padding: 1.5rem !important;
}

@media (min-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 2rem !important;
    }
}

/* My Account content typography and details */
.woocommerce-account .woocommerce-MyAccount-content p {
    font-size: 0.875rem !important;
    line-height: 1.625 !important;
    color: #475569 !important;
    margin-bottom: 1rem !important;
}

.woocommerce-account .woocommerce-MyAccount-content a {
    font-weight: 600 !important;
    color: var(--brand-primary) !important;
    transition: color 0.2s ease !important;
}

.woocommerce-account .woocommerce-MyAccount-content a:hover {
    color: var(--brand-hover) !important;
}

.woocommerce-account .woocommerce-MyAccount-content address {
    font-style: normal !important;
    font-size: 0.875rem !important;
    color: #475569 !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 0.75rem !important;
    padding: 1rem !important;
    background-color: rgba(248, 250, 252, 0.5) !important;
    line-height: 2 !important;
}

/* Edit Address columns */
.woocommerce-account .u-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    width: 100% !important;
}

.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
    float: none !important;
    width: 100% !important;
    background-color: #ffffff !important;
    border-radius: 1rem !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
    padding: 1.5rem !important;
    box-sizing: border-box !important;
}

@media (min-width: 768px) {
    .woocommerce-account .u-columns {
        flex-direction: row !important;
    }

    .woocommerce-account .u-column1,
    .woocommerce-account .u-column2 {
        width: 50% !important;
        flex: 1 !important;
    }
}

/* Form controls styling in My Account */
.woocommerce-account form.edit-account,
.woocommerce-account form.checkout,
.woocommerce-account form.login,
.woocommerce-account form.register {
    max-width: 42rem !important;
}

.woocommerce-account .form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.375rem !important;
    margin-bottom: 1rem !important;
}

.woocommerce-account .form-row label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #334155 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.woocommerce-account .form-row input.input-text,
.woocommerce-account .form-row select,
.woocommerce-account .form-row textarea {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    color: #0f172a !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
}

.woocommerce-account .form-row input.input-text:focus,
.woocommerce-account .form-row select:focus,
.woocommerce-account .form-row textarea:focus {
    outline: none !important;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15) !important;
}

.woocommerce-account button.button {
    background: var(--brand-button-bg) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
}

.woocommerce-account button.button:hover {
    background: var(--brand-button-hover-bg) !important;
    opacity: 0.95 !important;
}

/* WooCommerce notices styling */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
    margin-bottom: 1.5rem !important;
    border-radius: 0.75rem !important;
    font-size: 0.875rem !important;
    border: 1px solid transparent !important;
    font-weight: 500 !important;
}

.woocommerce-message {
    background-color: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #065f46 !important;
}

.woocommerce-error {
    background-color: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
    list-style: none !important;
}

.woocommerce-info {
    background-color: #f0f9ff !important;
    border-color: #bae6fd !important;
    color: #075985 !important;
}

.woocommerce-error li {
    list-style: none !important;
}

/* --- Theme Mode Overrides for My Account --- */
body.theme-mode-dark .woocommerce-account .woocommerce-MyAccount-navigation,
body.theme-mode-dark .woocommerce-account .woocommerce-MyAccount-content,
body.theme-mode-dark .woocommerce-account .u-column1,
body.theme-mode-dark .woocommerce-account .u-column2 {
    background-color: #1e1e1e !important;
    border-color: rgba(63, 63, 70, 0.6) !important;
}

body.theme-mode-dark .woocommerce-account .woocommerce-MyAccount-navigation li a {
    color: #e4e4e7 !important;
}

body.theme-mode-dark .woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    background-color: #2a2a2a !important;
}

body.theme-mode-dark .woocommerce-account .woocommerce-MyAccount-content p {
    color: #a1a1aa !important;
}

body.theme-mode-dark .woocommerce-account .woocommerce-MyAccount-content address {
    color: #a1a1aa !important;
    border-color: #2e2e33 !important;
    background-color: rgba(30, 30, 30, 0.5) !important;
}

body.theme-mode-dark .woocommerce-account .form-row label {
    color: #e4e4e7 !important;
}

body.theme-mode-dark .woocommerce-account .form-row input.input-text,
body.theme-mode-dark .woocommerce-account .form-row select,
body.theme-mode-dark .woocommerce-account .form-row textarea {
    background-color: #121212 !important;
    border-color: #3f3f46 !important;
    color: #ffffff !important;
}

body.theme-mode-summer .woocommerce-account .woocommerce-MyAccount-navigation,
body.theme-mode-summer .woocommerce-account .woocommerce-MyAccount-content,
body.theme-mode-summer .woocommerce-account .u-column1,
body.theme-mode-summer .woocommerce-account .u-column2 {
    background-color: #ffffff !important;
    border-color: rgba(186, 230, 253, 0.4) !important;
}

/* Desktop layout column overrides (MUST be at the end to override global width: 100%) */
@media (min-width: 768px) {
    .woocommerce-account .woocommerce {
        display: flex !important;
        flex-direction: row !important;
        align-items: start !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation {
        width: 25% !important;
        min-width: 240px !important;
        flex-shrink: 0 !important;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        width: calc(75% - 2rem) !important;
        flex-grow: 1 !important;
        margin-left: 2rem !important;
    }
}

/* WooCommerce Cart & Checkout layout container width limit (Shortcode & Blocks) */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout,
.woocommerce-cart .wc-block-cart,
.woocommerce-checkout .wc-block-checkout,
.woocommerce-cart .wc-block-layout,
.woocommerce-checkout .wc-block-layout {
    max-width: 72rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   CUSTOM SOCIAL FOOTER ICONS (LEGIBILITY & BRAND COLORS)
   ========================================================================== */
#site-footer .dtf-social-link {
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16) !important;
}

#site-footer .dtf-social-link svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

#site-footer .dtf-social-link:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
}

#site-footer .dtf-social-insta {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
}

#site-footer .dtf-social-face {
    background-color: #1877f2 !important;
}

#site-footer .dtf-social-tik {
    background-color: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

#site-footer .dtf-social-yt {
    background-color: #ff0000 !important;
}

#site-footer .dtf-social-x {
    background-color: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Animated CMYK Printer Underline for Footer Titles */
.footer-column-title {
    position: relative;
    display: block;
    padding-bottom: 8px;
}

.footer-column-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80%;
    height: 1.5px;
    background: linear-gradient(90deg, #00aeef 0%, #ec008c 25%, #fff200 50%, #231f20 75%, #00aeef 100%);
    background-size: 300% 100%;
    animation: cmyk-print-calibration var(--duration, 10s) cubic-bezier(0.25, 0.8, 0.25, 1) var(--delay, 0s) infinite;
    border-radius: 9999px;
}

@keyframes cmyk-print-calibration {
    0% {
        background-position: 0% 50%;
    }

    75% {
        background-position: 80% 50%;
        /* Movimiento muy lento de escaneo durante el 75% de la animación */
    }

    82% {
        background-position: 260% 50%;
        /* Ráfaga ultrarrápida (pase veloz de impresión) */
    }

    100% {
        background-position: 300% 50%;
        /* Ralentización al final del ciclo */
    }
}

/* Animated background mask patterns for header, content and footer */
#site-header.header-mask1,
#site-header.header-mask2,
#site-header.header-mask3,
#site-header.header-mask4,
#site-header.header-mask5,
#site-header.header-mask6,
#site-header.header-mask7,
#site-footer.footer-mask1,
#site-footer.footer-mask2,
#site-footer.footer-mask3,
#site-footer.footer-mask4,
#site-footer.footer-mask5,
#site-footer.footer-mask6,
#site-footer.footer-mask7 {
    position: relative;
    overflow: hidden;
}

body.content-mask1,
body.content-mask2,
body.content-mask3,
body.content-mask4,
body.content-mask5,
body.content-mask6,
body.content-mask7 {
    position: relative;
    overflow-x: clip;
}

#site-header.header-mask1>*,
#site-header.header-mask2>*,
#site-header.header-mask3>*,
#site-header.header-mask4>*,
#site-header.header-mask5>*,
#site-header.header-mask6>*,
#site-header.header-mask7>*,
body.content-mask1>#primary,
body.content-mask2>#primary,
body.content-mask3>#primary,
body.content-mask4>#primary,
body.content-mask5>#primary,
body.content-mask6>#primary,
body.content-mask7>#primary,
#site-footer.footer-mask1>*,
#site-footer.footer-mask2>*,
#site-footer.footer-mask3>*,
#site-footer.footer-mask4>*,
#site-footer.footer-mask5>*,
#site-footer.footer-mask6>*,
#site-footer.footer-mask7>* {
    position: relative;
    z-index: 2;
}

.header-mask1::before,
.content-mask1::before,
.footer-mask1::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.18;
    /* Mayor visibilidad */
    background-image:
        linear-gradient(var(--brand-primary) 1.5px, transparent 1.5px),
        linear-gradient(90deg, var(--brand-primary) 1.5px, transparent 1.5px),
        linear-gradient(var(--brand-primary) 1px, transparent 1px),
        linear-gradient(90deg, var(--brand-primary) 1px, transparent 1px);
    background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
    background-position: -1.5px -1.5px, -1.5px -1.5px, -1px -1px, -1px -1px;
    animation: footer-mask-drift 24s linear infinite;
}

.header-mask2::before,
.content-mask2::before,
.footer-mask2::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.22;
    /* Mayor visibilidad */
    background-image:
        radial-gradient(var(--brand-primary) 15%, transparent 16%),
        radial-gradient(var(--brand-primary) 15%, transparent 16%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    animation: footer-mask-drift-dots 30s linear infinite;
}

@keyframes footer-mask-drift {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px;
    }

    100% {
        background-position: 50px 50px, 50px 50px, 50px 50px, 50px 50px;
    }
}

@keyframes footer-mask-drift-dots {
    0% {
        background-position: 0 0, 10px 10px;
    }

    100% {
        background-position: 40px 40px, 50px 50px;
    }
}

.header-mask3::before,
.content-mask3::before,
.footer-mask3::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.20;
    background-image:
        radial-gradient(circle, var(--brand-primary) 0.8px, transparent 0.8px),
        radial-gradient(circle, var(--brand-primary) 0.8px, transparent 0.8px);
    background-size: 5px 20px, 20px 5px;
    background-position: -2.5px -10px, -10px -2.5px;
    animation: footer-mask-drift-cross 25s linear infinite;
}

.header-mask4::before,
.content-mask4::before,
.footer-mask4::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.18;
    background-image:
        radial-gradient(circle, transparent 20%, var(--footer-bg-color, #0f172a) 20%, var(--footer-bg-color, #0f172a) 80%, transparent 80%, transparent),
        radial-gradient(circle, transparent 20%, var(--footer-bg-color, #0f172a) 20%, var(--footer-bg-color, #0f172a) 80%, transparent 80%, transparent),
        linear-gradient(var(--brand-primary) 2px, transparent 2px),
        linear-gradient(90deg, var(--brand-primary) 2px, transparent 2px);
    background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;
    background-position: 0 0, 25px 25px, 0 -1px, -1px 0;
    animation: footer-mask-drift-brick 30s linear infinite;
}

.header-mask5::before,
.content-mask5::before,
.footer-mask5::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.18;
    background-image:
        repeating-linear-gradient(90deg, var(--brand-primary), var(--brand-primary) 5px, transparent 5px, transparent 10px);
    background-size: 100% 25px;
    animation: footer-mask-drift-horizontal 20s linear infinite;
}

.header-mask6::before,
.content-mask6::before,
.footer-mask6::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.18;
    background-image:
        repeating-linear-gradient(0deg, var(--brand-primary), var(--brand-primary) 5px, transparent 5px, transparent 10px);
    background-size: 25px 100%;
    animation: footer-mask-drift-vertical 20s linear infinite;
}

.header-mask7::before,
.content-mask7::before,
.footer-mask7::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.18;
    background: repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 4px, var(--brand-primary) 4px, var(--brand-primary) 5px, transparent 5px, transparent 10px);
    animation: footer-mask-zoom 15s ease-in-out infinite alternate;
}

@keyframes footer-mask-drift-cross {
    0% {
        background-position: -2.5px -10px, -10px -2.5px;
    }

    100% {
        background-position: 17.5px 30px, 30px 17.5px;
    }
}

@keyframes footer-mask-drift-horizontal {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100px 0;
    }
}

@keyframes footer-mask-drift-vertical {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 100px;
    }
}

@keyframes footer-mask-zoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.15);
    }
}

/* Mobile Menu Slide and Fade Animations */
@keyframes mobile-menu-slide {
    0% {
        opacity: 0;
        transform: translateY(-12px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mobile-item-fade {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-slide {
    animation: mobile-menu-slide 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Hardcoded overrides to bypass static Tailwind compilation limitations */
#mobile-menu {
    top: -1px !important;
}