:root {
	--wd-text-font: "Noto Sans", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 500;
	--wd-text-color: #767676;
	--wd-text-font-size: 16px;
	--wd-title-font: "Funnel Display", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 500;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Noto Sans", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: rgb(22,35,70);
	--wd-entities-title-color-hover: rgb(38, 56, 96);
	--wd-alternative-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Noto Sans", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 500;
	--wd-widget-title-transform: none;
	--wd-widget-title-color: rgb(22,35,70);
	--wd-widget-title-font-size: 18px;
	--wd-header-el-font: "Noto Sans", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 500;
	--wd-header-el-transform: none;
	--wd-header-el-font-size: 16px;
	--wd-brd-radius: 4px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(22,35,70);
	--wd-alternative-color: rgb(194,209,151);
	--btn-default-bgcolor: rgb(36,36,36);
	--btn-default-bgcolor-hover: rgb(51,51,51);
	--btn-accented-bgcolor: rgb(22,35,70);
	--btn-accented-bgcolor-hover: rgb(38,56,96);
	--btn-font-weight: 500;
	--btn-transform: capitalize;
	--btn-font-size: 14px;
	--wd-form-brd-width: 1px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: rgb(22,35,70);
	--wd-link-color-hover: rgb(38,56,96);
	--wd-link-decor-style-hover: solid;
	--wd-link-decor-color-hover: rgb(38,56,96);
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgb(36,36,36);
	background-image: none;
}
.whb-top-bar .wd-nav.wd-nav-secondary > li > a {
	font-size: 13px;
}
html .wd-nav-mobile > li > a {
	text-transform: none;
}
html .wd-nav-mobile .wd-sub-menu li a {
	text-transform: none;
}
html .product.wd-cat .wd-entities-title, html .product.wd-cat.cat-design-replace-title .wd-entities-title, html .wd-masonry-first .wd-cat:first-child .wd-entities-title {
	text-transform: none;
}
html table th {
	text-transform: none;
}
html .wd-checkout-steps {
	text-transform: none;
}
:is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) {
	background-color: rgb(255,255,255);
	background-image: none;
}
.woodmart-archive-shop:not(.single-product) :is(.wd-page-content, .whb-header) {
	background-color: rgb(245,247,248);
	background-image: none;
}
.single-product :is(.wd-page-content, .whb-header) {
	background-color: rgb(255,255,255);
	background-image: none;
}
.woodmart-archive-blog :is(.wd-page-content, .whb-header) {
	background-color: rgb(245,247,248);
	background-image: none;
}
.single-post :is(.wd-page-content, .whb-header) {
	background-color: rgb(245,247,248);
	background-image: none;
}
.woodmart-archive-portfolio :is(.wd-page-content, .whb-header) {
	background-color: rgb(245,247,248);
	background-image: none;
}
.single-portfolio :is(.wd-page-content, .whb-header) {
	background-color: rgb(245,247,248);
	background-image: none;
}
html .widget_price_filter [class*="price_slider_amount"] .button {
	background: rgb(22,35,70);
}
html .widget_price_filter [class*="price_slider_amount"] .button:hover {
	background: rgb(38,56,96);
}
body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform {
	--wd-form-bg: rgb(255,255,255);
}
.wd .product-label.onsale {
	background-color: rgb(194,209,151);
}
.wd .product-label.new {
	background-color: rgb(194,209,151);
}
.wd .product-label.featured {
	background-color: rgb(194,209,151);
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}

@media (max-width: 1024px) {
	html .page-title > .container > .title, html .page-title .wd-title-wrapp > .title {
		font-size: 24px;
	}

}

@media (max-width: 768.98px) {
	:root {
		--wd-text-font-size: 15px;
	}
	html .page-title > .container > .title, html .page-title .wd-title-wrapp > .title {
		font-size: 22px;
	}

}
:root{
--wd-container-w: 1660px;
--wd-form-brd-radius: 5px;
--btn-default-color: #fff;
--btn-default-color-hover: #fff;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 5px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 5px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
}

@media (min-width: 1660px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: rgb(245,247,248);
}

@font-face {
	font-family: "Satoshi";
	src: url("//images.zapantojos.com/media/2024/10/Satoshi-Medium-1.woff") format("woff");
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: "Satoshi";
	src: url("//images.zapantojos.com/media/2024/10/Satoshi-Bold-1.woff") format("woff");
	font-weight: 600;
	font-style: normal;
}

/* Forzar a los títulos de widgets y elementos a respetar las minúsculas */
.widget-title, 
.wd-entities-title, 
.product-title, 
.title {
    text-transform: none !important;
}

/* Forzar a los botones o pestañas si es ahí donde te pasa */
.btn, 
.button, 
.wd-nav-tabs {
    text-transform: none !important;
}



/* Ocultar el texto de destino/dirección de envío en los totales del carrito */
.woocommerce-cart .woocommerce-shipping-destination {
    display: none !important;
}



/* =============================================================================
   AUMENTAR SEPARACIÓN DE COLUMNAS EN FORMULARIO DE FLUENT FORMS
   ============================================================================= */

/* Modifica el espacio entre las columnas de texto izquierda y derecha */
.fluentform .ff-t-container {
    column-gap: 40px !important; /* Ajusta este número (40px o 50px) a tu gusto */
}

/* Ajuste de compatibilidad para asegurar que las columnas mantengan simetría */
.fluentform .ff-t-cell {
    width: 100% !important;
}



/* =============================================================================
   SEPARACIÓN DE BLOQUES EN MENÚ MÓVIL
   ============================================================================= */

/* 1. Separamos el bloque inferior creando un hueco limpio debajo de Catálogos */
#menu-mobile-navigation li.menu-item-wishlist {
    margin-top: 40px !important; /* El hueco de separación que tú quieras */
    border-top: 1px solid #e1e1e1 !important; /* La línea gris de lado a lado */
}

/* 2. Clona la altura interna exacta de Woodmart para que la celda sea perfecta */
#menu-mobile-navigation li.menu-item-wishlist > a {
    padding-top: 14px !important;    /* Espacio exacto entre la frase y su línea de arriba */
    padding-bottom: 14px !important; /* Espacio inferior */
}



.wd-accordion:where(.wd-style-default)>.wd-accordion-item:first-of-type, .wd-accordion:where(.wd-style-default)>.wd-nav-wrapper+.wd-accordion-item {
	border-top:0px !important;
}



/* EVITAR ZOOM AUTOMÁTICO EN CAMPOS DE FORMULARIO EN MÓVIL (iOS) */
@media (max-width: 1024px) {
    .woocommerce-checkout input[type="text"],
    .woocommerce-checkout input[type="email"],
    .woocommerce-checkout input[type="tel"],
    .woocommerce-checkout input[type="password"],
    .woocommerce-checkout select,
    .woocommerce-checkout textarea,
    .wfacp-form-control, /* Clase específica de FunnelKit */
    .wfacp-form-control input {
        font-size: 16px !important;
    }
}



/* BORRAR TODOS LOS PLACEHOLDERS (TEXTOS INTERNOS) DEL CHECKOUT */
.woocommerce-checkout input::placeholder,
.woocommerce-checkout textarea::placeholder,
.woocommerce-checkout select::placeholder,
.wfacp-form-control input::placeholder,
.wfacp-form-control textarea::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}
/* Soporte global para navegadores basados en Webkit (Safari en iPhone, Chrome, etc.) */
.woocommerce-checkout input::-webkit-input-placeholder,
.woocommerce-checkout textarea::-webkit-webkit-input-placeholder,
.wfacp-form-control input::-webkit-input-placeholder {
    color: transparent !important;
    opacity: 0 !important;
}



/* =============================================================================
   ICONOS SVG - Menú Mi Cuenta
   ============================================================================= */

/* 1. Inyección de los diseños SVG */
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard a::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E") !important;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") !important;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-address a::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") !important;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--payment-methods a::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E") !important;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-account a::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--wishlist a::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") !important;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") !important;
}

/* =============================================================================
   2. ALINEACIÓN CLÁSICA PARA ESCRITORIO (RESETEO DE ALTURAS Y CENTRADO DE CAJA)
   ============================================================================= */
.woocommerce-MyAccount-navigation ul li a {
    display: flex !important;           /* Convertimos en flex para controlar el eje vertical */
    align-items: center !important;     /* Centrado vertical perfecto dentro de la sombra gris */
    justify-content: flex-start !important;
    text-align: left !important;
    line-height: 1 !important;          /* Eliminamos herencias de altura de línea que empujan hacia abajo */
    padding-top: 14px !important;       /* Forzamos padding idéntico arriba y abajo */
    padding-bottom: 14px !important;
}

.woocommerce-MyAccount-navigation ul li a::before {
    width: 16px !important;
    height: 16px !important;
    margin-right: 12px !important;
    display: inline-block !important;
    vertical-align: middle !important;  /* Cambiado a middle para que flex lo cuadre */
    flex-shrink: 0 !important;
    transform: none !important;         /* Limpiamos cualquier desplazamiento antiguo */
}

/* =============================================================================
   COMPORTAMIENTO EXCLUSIVO PARA MÓVILES (CARRUSEL HORIZONTAL FLEXBOX)
   ============================================================================= */
@media (max-width: 768px) {
    
    /* Convertimos la lista en barra horizontal deslizable */
    .woocommerce-MyAccount-navigation ul {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        gap: 10px !important;
        padding: 10px 5px !important;
        margin: 0 0 25px 0 !important;
        list-style: none !important;
        border-bottom: 1px solid #eef0f2;
        -webkit-overflow-scrolling: touch;
    }

    /* Ocultamos la barra de scroll */
    .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
        display: none !important;
    }

    /* Forzamos a que las pestañas sean píldoras flexibles */
    .woocommerce-MyAccount-navigation li {
        display: inline-block !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    /* Aquí SÍ aplicamos Flexbox para centrar icono y texto en el botón móvil */
    .woocommerce-MyAccount-navigation li a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 16px !important;
        background-color: #f5f5f5 !important;
        color: #333 !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        border: none !important;
    }

    /* Corregimos el margen óptico del icono dentro de la píldora móvil */
    .woocommerce-MyAccount-navigation li a::before {
        margin-right: 8px !important;
        vertical-align: middle !important;
    }

    /* Pestaña activa en móvil (Fondo negro de Zapantojos) */
    .woocommerce-MyAccount-navigation li.is-active a {
        background-color: #1a1a1a !important;
        color: #ffffff !important;
    }

    /* Invertimos el color del trazo SVG a blanco en la pestaña activa móvil */
    .woocommerce-MyAccount-navigation li.is-active a::before {
        filter: invert(1) brightness(2) !important;
    }
}@media (min-width: 1025px) {
	/* Hacer el sidebar del carrito más ancho solo en ordenadores */
body .wd-cart-side.wd-opened, 
body .cart-widget-side {
    width: 450px !important; /* Ajusta los 500px al ancho que más te guste */
}
}

@media (max-width: 576px) {
	@media (max-width: 768px) {
    .woocommerce-orders-table__cell-order-number,
    .woocommerce-my-account table.shop_table {
        display: block !important;
        width: 100% !important;
    }

    /* Inyecta la palabra "Pedido: " antes del número solo en móvil MI CUENTA */
    .woocommerce-orders-table__cell-order-number::before {
        content: "Pedido ";
        font-weight: normal; /* Por si quieres que la palabra "Pedido" no esté tan en negrita como el número */
        color: #666; /* Un tono grisáceo para que contraste con el número */
    }
}

}

