@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//nomu.pe/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=8.3.8") format("woff2");
}

@font-face {
	font-family: "star";
	font-weight: 400;
	font-style: normal;
	src: url("//nomu.pe/wp-content/plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"), url("//nomu.pe/wp-content/plugins/woocommerce/assets/fonts/star.woff") format("woff"), url("//nomu.pe/wp-content/plugins/woocommerce/assets/fonts/star.ttf") format("truetype"), url("//nomu.pe/wp-content/plugins/woocommerce/assets/fonts/star.svg#star") format("svg");
}

@font-face {
	font-family: "WooCommerce";
	font-weight: 400;
	font-style: normal;
	src: url("//nomu.pe/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.eot?#iefix") format("embedded-opentype"), url("//nomu.pe/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff") format("woff"), url("//nomu.pe/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf") format("truetype"), url("//nomu.pe/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.svg#WooCommerce") format("svg");
}

:root {
	--wd-text-font: "Martel Sans", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: rgb(44,44,44);
	--wd-text-font-size: 16px;
	--wd-title-font: "Oswald", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-transform: uppercase;
	--wd-title-color: rgb(44,44,44);
	--wd-entities-title-font: "Martel Sans", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 400;
	--wd-entities-title-color: rgb(44,44,44);
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Oswald", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: rgb(44,44,44);
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Martel Sans", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(0,169,224);
	--wd-alternative-color: rgb(44,44,44);
	--btn-default-font-family: "Jost", Arial, Helvetica, sans-serif;
	--btn-default-font-weight: 500;
	--btn-default-bgcolor: rgb(255,255,255);
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(0,169,224);
	--btn-accented-bgcolor-hover: rgb(0,153,204);
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
	--wd-sticky-btn-height: 95px;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: url(https://nomu.pe/wp-content/uploads/2021/09/shoes-promo-popup.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
	--wd-popup-padding: 15px;
}
: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: #ffffff;
	background-image: none;
}
.whb-top-bar .wd-nav.wd-nav-secondary > li > a {
	font-family: "Martel Sans", Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 12px;
	text-transform: uppercase;
	color: rgb(255,255,255);
}
html .wd-product .price, html .wd-product .price > .amount, html .wd-product .price ins > .amount {
	font-family: "Martel Sans", Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: rgb(44,44,44);
}
html .wd-product .price:hover, html .wd-product .price > .amount:hover, html .wd-product .price ins > .amount:hover {
	color: rgb(44,44,44);
}
html .wd-page-content .wd-product .product-wrapper .wd-entities-title, html .product-quick-view .product_title, .wd-entities-title {
	font-family: "Oswald", Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 22px;
	text-transform: uppercase;
}
html .wd-product .wd-product-cats a {
	font-family: "Martel Sans", Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 13px;
	text-transform: uppercase;
	color: rgba(44,44,44,0.7);
}
html .product-image-summary-wrap .summary-inner > .price, html .product-image-summary-wrap .summary-inner > .price > .amount, html .product-image-summary-wrap .summary-inner > .price > .price > .amount, html .product-image-summary-wrap .summary-inner > .price ins .amount, html .wd-single-price .price, html .wd-single-price .price > .amount, html .wd-single-price .price > ins .amount {
	font-family: "Martel Sans", Arial, Helvetica, sans-serif;
	color: rgb(0,169,224);
}
html .product-quick-view  .summary-inner > .price > .amount, html .product-quick-view .summary-inner > .price > ins .amount {
	font-family: "Martel Sans", Arial, Helvetica, sans-serif;
	color: rgb(0,169,224);
}
.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
	--wd-arrow-icon-size: 20px;
}
.product-labels .product-label.onsale {
	background-color: rgb(0,169,224);
}
.product-labels .product-label.new {
	background-color: rgb(0,169,224);
}
.product-labels .product-label.featured {
	background-color: rgb(0,0,0);
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}

@media (max-width: 1024px) {
	:root {
		--wd-sticky-btn-height: 95px;
	}
	html .wd-page-content .wd-product .product-wrapper .wd-entities-title, html .product-quick-view .product_title, .wd-entities-title {
		font-size: 18px;
	}

}

@media (max-width: 768.98px) {
	:root {
		--wd-text-font-size: 14px;
	--wd-sticky-btn-height: 42px;
	}
	html .wd-page-content .wd-product .product-wrapper .wd-entities-title, html .product-quick-view .product_title, .wd-entities-title {
		font-size: 18px;
	}
	html .wd-product .wd-product-cats a {
		font-size: 11px;
	}

}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--btn-accented-box-shadow-active: none;
--btn-accented-bottom: 0px;
--wd-brd-radius: 0px;
}

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


.wd-page-title {
background-color: #0a0a0a;
}

/* ============================================================
   01. CONFIGURACIÓN GLOBAL Y CONTENEDORES
   ============================================================ */

/* --- GLOBAL: Forzar contenedores al 100% de ancho --- */

.container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
 padding-inline: 0px!important;
}

.wd-product {
    position: relative;
    text-align: var(--text-align);
    line-height: 1.4;
    --text-align: center;
    --wd-btn-inset: 10px;
    --wd-prod-gap: 10px!important;
    --wd-prod-bg-sp: 0;
    --wd-prod-bg-cont-sp: 0;
    --wd-prod-trim: calc((var(--wd-text-line-height) * -.5em) + .5em);
}

.wd-tools-element {
    position: relative;
    --wd-header-el-color: #333;
    --wd-header-el-color-hover: rgba(51, 51, 51, .6);
    --wd-tools-icon-base-width: 20px;
   
}

.wd-page-content {
    min-height: 50vh;
    background-color: var(--wd-main-bgcolor);
    margin-top: -10px;
}
.site-logo {
    max-height: inherit;
    margin-right: 100px;
}

/* Solo móviles y tablets */
@media (max-width: 1024px) {
  .site-logo {
    margin-right: 0;
  }
}

/* --- ELEMENTOR: Ancho máximo para contenedores boxed --- */

.e-con-boxed.wd-negative-gap {
    --container-max-width: 1700px !important;
}

/* --- TÍTULO DE PÁGINA: Espaciado en archivos --- */

.archive .wd-page-title .container, .post-type-archive .wd-page-title .container{
    gap: 40px!important;
}

/* --- SCROLL: Ocultar ancho de scrollbar --- */

.main-page-wrapper:root, :root { --wd-scroll-w: 0px!important; }

/* --- GRID: Forzar columnas al 100% en pantallas medianas --- */

@media (min-width: 769px) {
    .column-half { width: 100%!important; }
}

/* --- TÍTULO DE PÁGINA: Flexbox y rellenos --- */

.wd-page-title .container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: var(--wd-align);
    text-align: var(--wd-align);
    gap: 20px!important;
    padding: 20px 0px!important;
}

/* ============================================================
   02. HEADER, TOP BAR Y NAVEGACIÓN
   ============================================================ */

/* --- NAVEGACIÓN: Líneas separadoras en el menú --- */

.wd-nav:is(.wd-style-bordered,.wd-style-separated)>li:not(:last-child):after{
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* --- HEADER: Relleno lateral en escritorio --- */

.whb-general-header .container {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

/* --- HEADER: Estructura interna, bordes y distribución --- */

.whb-general-header-inner {
    border-color: rgba(129, 129, 129, 0.2);
    border-bottom-width: 0px;
    border-bottom-style: solid;
    max-width: 1700px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* --- HEADER: Ajuste de aire lateral para Tablet --- */

@media (max-width: 1024px) {
    .whb-general-header .container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

/* --- HEADER: Ajuste de aire lateral y separación de iconos para Móvil --- */

@media (max-width: 768px) {
    .whb-general-header .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .whb-column.whb-col-right {
        gap: 10px !important;
    }
}

/* --- TOP BAR: Márgenes y rellenos de la barra superior --- */

.whb-top-bar .container{
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

/* --- TOP BAR: Ajuste de aire lateral para Tablet --- */

@media (max-width: 1024px) {
    .whb-top-bar .container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

/* --- TOP BAR: Ajuste de aire lateral y separación de iconos para Móvil --- */

@media (max-width: 768px) {
    .whb-top-bar .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .whb-column.whb-col-right {
        
		gap: 10px !important;
    }
	
		.whb-top-bar p {
        font-size:10px !important;
    }
	
	

}

.whb-top-bar-inner {
    max-width: 1700px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- NAVEGACIÓN: Altura y relleno de enlaces --- */

.wd-nav>li>a {
    padding: 0px 0px 0px 0px!important;
    min-height: 40px!important;
}

/* --- HEADER: Estilo de fondo blanco y borde inferior --- */

.whb-color-dark:not(.whb-with-bg) {
    background-color: #fff!important;
    border-color: rgba(129, 129, 129, 0.2)!important;
    border-bottom-width: 1px!important;
    border-bottom-style: solid!important;
}

/* --- NAVEGACIÓN: Tamaños de imagen y gaps en categorías --- */

.wd-nav-product-cat.has-product-count { --nav-img-height: 50px!important; }

.wd-nav.wd-gap-m { --nav-gap: 50px!important; }

/* --- NAVEGACIÓN: Gap en menús --- */

.wd-nav.wd-gap-m { --nav-gap: 40px !important; }

/* --- SUBMENÚ: Ancho máximo y centrado de dropdowns --- */

.wd-sub-menu-wrapp {
    max-width: 1300px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 6px !important;
}

.wd-dropdown-menu .container {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.wd-dropdown-menu.wd-design-aside .wd-dropdown { align-content: center !important; }

/* --- LÓGICA FINAL: Icono Blanco por Defecto / Negro en Interacción --- */

/* 1. ESTADO DEFAULT: Todos los iconos nacen BLANCOS */

.wd-nav-img {
    filter: brightness(0) invert(1) !important;
    transition: filter 0.3s ease !important;
}

/* 2. ESTADO HOVER / ACTIVO: El icono se vuelve NEGRO (Sobre fondo blanco) */

.menu-item:hover > a .wd-nav-img,
.wd-sub-menu li:hover > a .wd-nav-img {
    filter: brightness(0) invert(0) !important;
}

/* 3. EXCEPCIÓN PARA EL FONDO AZUL:
   Si el ítem tiene fondo azul (clase wd-opened o activo), forzamos que vuelva a ser BLANCO */

.wd-nav-mobile li.wd-opened > a .wd-nav-img,
.wd-nav-mobile li.current-menu-item > a .wd-nav-img,
.wd-nav-mobile li.current-menu-ancestor > a .wd-nav-img,
.wd-nav-mobile li.active > a .wd-nav-img {
    filter: brightness(0) invert(1) !important; /* Mantiene/Vuelve a blanco sobre azul */
}

/* 4. FIX ESPECÍFICO PARA "MALETAS":
   Si Woodmart usa una clase diferente al estar seleccionado, este selector lo atrapa */

.wd-nav-mobile li[class*="current"] > a .wd-nav-img {
    filter: brightness(0) invert(1) !important;
}

/* 2. ESTADO PERSISTENTE: Se mantiene NEGRO mientras el menú esté abierto
   (Incluso si el mouse se sale del área del mega menú) */

.menu-item:hover > a .wd-nav-img,
.menu-item.item-event-hover > a .wd-nav-img,
.menu-item.wd-opened > a .wd-nav-img,
.wd-sub-menu li:hover > a .wd-nav-img {
    filter: brightness(0) invert(0) !important;
}

/* Ocultar la columna del centro si Woodmart la crea por defecto */

.whb-top-bar .whb-col-center {
    display: none !important;
}

/* --- NAVEGACIÓN: Anulación de flex para el menú --- */

.wd-header-nav {
    flex: none !important;
}

/* Ajuste para que en móviles no se vean pegadas si el texto es largo */

@media (max-width: 768px) {
    .whb-top-bar-inner {
        gap: 15px !important;
    }
}

/* --- MENÚ MÓVIL: Ajuste de altura y espacio vertical --- */

/* 1. Reduce el espacio de los ítems principales (Inicio, Tienda, etc.) */

.wd-nav-mobile li a {
    padding: 20px !important;

    min-height: 0px !important; /* Elimina la altura mínima por defecto de Woodmart */
}

/* 2. Ajuste para los ítems con iconos (Mochilas, Maletas) */

.wd-nav-mobile .wd-nav-img {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle; /* Asegura que el icono y el texto estén centrados */
filter: brightness(0) !important;
    opacity: 1 !important; /* Asegura que no esté semitransparente */
}

.wd-nav-mob-tab>li>a {
padding: 20px !important;

}

/* ============================================================
   03. TIPOGRAFÍA, TÍTULOS, BOTONES E ICONOS GENERALES
   ============================================================ */

.btn.btn-style-bordered { gap: 10px!important; }

/* --- BOTONES: Alineación de iconos y transiciones --- */

.wd-btn-icon {
    padding-top: 2px!important;
    align-items: center;
    transition: filter 0.3s ease !important;
}

/* --- BOTONES: Efecto Hover (Icono se vuelve negro) --- */

.woodmart-button:hover .wd-btn-icon,
.wd-button-wrapper:hover .wd-btn-icon {
    filter: brightness(0) !important;
}

/* --- REDES SOCIALES: Colores de iconos y estados hover --- */

.wd-social-icons.wd-style-simple {
    --wd-social-bg: #EFEFEF;
    --wd-social-bg-hover: var(--wd-primary-color);
    --wd-social-color: rgba(0, 0, 0, 0.4);
    --wd-social-color-hover: #fff;
}

/* --- WIDGETS: Estilos de títulos de menú (Jost) --- */

.wd-menu>.widget-title {
    padding: 0px 0px 20px 0px!important;
    color: rgba(44, 44, 44, 0.6) !important;
    font-family: "Martel Sans", sans-serif !important;
    font-weight: 600 !important;
}

.widget-title {
    font-family: "Jost", sans-serif !important;
    font-weight: 500 !important;
}

/* --- BOTONES ELEMENTOR: Ajuste de tamaño de iconos SVG --- */

.elementor-button-icon .e-font-icon-svg { height: none!important; }

.elementor-button-icon svg {
    height: auto!important;
    width: 1.3em!important;
}

.elementor-button-content-wrapper { align-items: center!important; }

/* --- BOTONES GLOBALES: Espaciado interno y gaps --- */

:is(.btn,.button,button,[type=submit],[type=button]) {
    gap: 15px!important;
    padding: 15px 30px 12px 30px!important;
    border-radius: 3px!important;
    font-size: 15px!important;
}

/* --- BOTONES: Tamaño pequeño personalizado --- */

.btn-size-small {
    padding: 10px 20px !important;
    height: auto !important;
    font-size: 14px !important;
}

/* --- ELEMENTOR: Estilo de títulos específicos (Jost 500) --- */

.elementor-4439 .elementor-element.elementor-element-b4dfc83 .title-after_title a {
    color: var(--e-global-color-primary)!important;
    font-family: "Martel Sans", Sans-serif;
    font-size: 16px;
    font-weight: 500;
}

.elementor-4400 .elementor-element.elementor-element-98d830b .title-after_title {
    color: rgba(0, 0, 0, 0.30196078431372547);
    font-size: 18px;
    margin-top: 15px!important;
    margin-bottom: 10px;
}

.title-after_title br {
  display: none !important;
}

.Info-Legal .title-wrapper {
  --wd-mb: 20px !important;
}

.elementor-button-icon .e-fas-angle-double-left {
  width: 15px !important; /* Cambia este valor al tamaño que desees */
  height: 15px !important;
}

/* ============================================================
   04. COUNTDOWN, TEMPORIZADORES Y MARQUEE
   ============================================================ */

/* --- COUNTDOWN: Estructura circular y rejilla (Desktop) --- */

.ub_countdown_circular_container{
    grid-template-columns: repeat(4, 120px)!important;
    justify-content: center!important;
}

/* --- COUNTDOWN: Colores y estilos del círculo y texto --- */

.ub_countdown_circle_path { stroke: #ffffff!important; }

.ub_countdown_circle_trail { stroke: none !important; }

.ub-countdown-wrapper .ub-countdown-digit { color:#ffffff!important; }

.ub-countdown-wrapper .ub-countdown-unit { color:#ffffff!important; }

/* --- COUNTDOWN: Tamaño general (Escala) --- */

.ub_countdown_circular_container {
    transform: scale(1.5);
}

/* --- COUNTDOWN: Ajuste para Tablet --- */

@media (max-width: 1024px) {
    .ub_countdown_circular_container {
        transform: scale(1.5);
        grid-template-columns: repeat(4, 100px)!important;
        justify-content: center!important;
    }
}

/* --- COUNTDOWN: Ajuste para Móvil Pequeño --- */

@media (max-width: 768px) {
    .ub_countdown_circular_container {
        grid-template-columns: repeat(4, 70px)!important;
        justify-content: center!important;
        transform: scale(1.2);
    }
}

/* --- ELEMENTOS VARIOS: Espaciados en Marquee y Botones con borde --- */

.wd-marquee-item { gap: 30px!important; }

/* --- MARQUEE: Configuración de velocidad y dirección --- */

.wd-marquee {
    --wd-marquee-gap: 20px;
    --wd-marquee-direction: normal;
    --wd-marquee-speed: 5s;
    display: flex;
    overflow: visible !important;
}

.dias-outline {
    /* 1. Quitamos el color de relleno */
    color: transparent !important;

    /* 2. Creamos el borde del texto (Grosor y Color) */
    -webkit-text-stroke: 1px #fff; /* Puedes usar 0.5px si quieres que sea ultra fino */

    /* 3. Aseguramos que se vea en todos los navegadores */
    text-stroke: 1px #fff;

    /* Opcional: Un poco de negrita ayuda a que el borde no se pierda */
    font-weight: 600 !important;
    letter-spacing: 1px;
}

/* Efecto Hover: Si quieres que al pasar el mouse se rellene de color */

.wd-marquee:hover .dias-outline {
    color: #000000 !important;
    transition: all 0.4s ease;
}

/* 1. Ocultar los dos puntos nativos ( : ) */

.wd-timer .wd-sep {
    display: none !important;
}

/* 2. Añadir las líneas divisorias */

.wd-timer .wd-item {
    position: relative;
    padding: 0 40px; /* Espacio entre el número y la línea */
    margin: 0;
}

/* Tablet */
@media (max-width: 1366px) and (min-width: 769px) {

    .wd-timer .wd-item {

        padding: 0 30px !important;

    }

}


/* Mobile */
@media (max-width: 768px) {

    .wd-timer .wd-item {

        padding: 0 20px !important;

    }

}

/* Tablet */
@media (max-width: 1366px) and (min-width: 769px) {

    .elementor-3411 .elementor-element.elementor-element-942d50c .wd-timer-value {

        font-size: 32px !important;

    }

}


/* Mobile */
@media (max-width: 768px) {

    .elementor-3411 .elementor-element.elementor-element-942d50c .wd-timer-value {

        font-size: 24px !important;

    }

}


/* Crear la línea con un borde derecho */

.wd-timer .wd-item:not(:last-child) {
    border-right: 1px solid #767575; /* Color y grosor de la línea */
}

/* 3. Ajustar el diseño del texto y valor */

.wd-timer {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.wd-timer-text {

    margin-top:10px!important;
}

.wd-timer {
    display: inline-flex;
    gap: calc(var(--wd-timer-size, 0px) / 4)!important;
    justify-content: var(--wd-align);
    flex-wrap: wrap;
}

.wd-timer.wd-size-large {
        --wd-timer-size: 0px!important;
    }

/* 1. Definimos la animación de rotación */

@keyframes rotacion-infinita {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 2. Aplicamos la animación a las imágenes del marquee */

.wd-marquee-item img {
    /* Nombre de la animación, duración (10s), linear (velocidad constante) e infinita */
    animation: rotacion-infinita 4s linear infinite;

    /* Opcional: Asegurar que el centro de rotación sea el medio */
    transform-origin: center center;

    /* Para que la rotación se vea nítida y suave en Chrome/Safari */
    will-change: transform;
    -webkit-backface-visibility: hidden;
    margin: 0px 10px!important;
}

/* 3. Opcional: Pausar la rotación al pasar el mouse (Efecto interactivo) */

.wd-marquee-item:hover img {
    animation-play-state: paused;
}

/* ============================================================
   05. CATEGORÍAS, PRODUCTOS, FILTROS Y LISTADOS
   ============================================================ */

/* --- CATEGORÍAS: Visibilidad y rellenos en cuadrícula --- */

.category-grid-item .wd-cat-thumb { overflow: visible !important; }

.wd-cat-content { padding: 20px 10px!important; }

.wd-cat .wd-entities-title { margin-bottom: 4px!important; }

.category-grid-item .wd-cat-count>a {
    color: rgba(44, 44, 44, 0.6) !important;
    text-decoration: none;
}

/* --- PRODUCTOS: Reorganización visual de la tarjeta (Categoría > Título > Precio) --- */

.product-grid-item .product-element-bottom {
    display: flex !important;
    flex-direction: column !important;
}

.product-grid-item .wd-product-cats {
    order: 1 !important;
    margin-top: 10px !important;
        margin-bottom: 2px!important;
    padding: 0px 10px!important;
}

.product-grid-item .wd-entities-title {
    order: 2 !important;
    padding: 2px 10px!important;
    margin-bottom: 0px!important;
}

.product-grid-item .wd-star-rating {
    order: 3 !important;
    margin-top: 5px !important;
    padding: 0px 10px!important;
}

.product-grid-item .price {
    order: 4 !important;
    margin-top: 4px !important;
    padding: 0px 10px!important;
}

/* --- PRODUCTOS: Ocultar estrellas de valoración --- */

.product-grid-item .wd-star-rating,
.product-grid-item .star-rating {
    display: none !important;
}

/* --- PRODUCTOS: Alineación de textos a la izquierda --- */

.product-grid-item .product-element-bottom,
.product-grid-item .wd-entities-title,
.product-grid-item .price,
.product-grid-item .wd-product-cats {
    text-align: left !important;
    align-items: flex-start !important;
}

.product-grid-item.wd-hover-base .product-wrapper { text-align: left !important; }

/* --- PRODUCTOS: Espaciado de letras en categorías y etiquetas --- */

.wd-product .wd-product-cats a { letter-spacing: 0.03em !important; }

.product-labels {
    position: absolute;
    top: 16px!important;
    inset-inline-start: 16px!important;
}

/* --- PRODUCTOS: Margen inferior de la tarjeta --- */

.wd-product .product-wrapper { margin-bottom: 30px!important; }

/* --- FILTROS: Swatches (colores) circulares en la barra lateral --- */

.wd-filter-list .wd-swatch-bg,
.wd-filter-list .wd-swatch {
    border-radius: 100% !important;
    -webkit-border-radius: 100% !important;
}

.wd-filter-list .wd-swatch { border: 1px solid rgba(0,0,0,0.1) !important; }

.wd-swatches-filter.wd-swatches-brands {
    --wd-swatch-h: 30px !important;
    --wd-swatch-w: 30px!important;
}

/* --- WIDGET PRECIO: Botón de filtro de precio --- */

.widget_price_filter [class*="price_slider_amount"] .button{
    color: #ffffff!important;
    background-color: #00A9E0!important;
}

.wd-product.wd-hover-quick .wd-add-btn{
        padding: 20px!important;
    }

.wd-product.wd-hover-quick .wd-add-btn>a {
    font-size: 14px!important;
    padding: 8px 30px !important;
}

.product_list_widget>li .widget-product-wrap {
    display: flex;
    align-items: center!important;
    gap: 10px!important;
}

.product_list_widget>li img {

    float: inline-start;

    margin-inline-end:15px;

    width:85px!important;

    
    border-radius:calc(var(--wd-brd-radius) / 1.5);

    object-fit:contain!important;

    object-position:center!important;

}

.product_list_widget>li .wd-entities-title {
    margin-bottom: 8px;
    font-size: 18px!important;
}

/* ============================================================
   06. SELECTORES DE CANTIDAD
   ============================================================ */

/* =====================================================
   QUANTITY: CONTENEDOR GENERAL
   ===================================================== */

div.quantity {
    display: inline-flex !important;
    align-items: stretch !important;

}

/* =====================================================
   QUANTITY GENERAL: CAMPO DE CANTIDAD
   Ancho: 40px
   ===================================================== */

div.quantity input[type="number"],
div.quantity input[type="text"].qty,
div.quantity input.qty {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;

    flex: 0 0 40px !important;
    box-sizing: border-box !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    margin: 0 !important;

    text-align: center !important;

    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
}

/* =====================================================
   QUANTITY GENERAL: BOTONES + Y -
   Ancho: 42px
   Padding vertical: 10px
   ===================================================== */

div.quantity input.minus,
div.quantity input.plus,
div.quantity input[type="button"].minus,
div.quantity input[type="button"].plus {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;

    flex: 0 0 42px !important;
    box-sizing: border-box !important;

    padding: 10px 0 !important;
    margin: 0 !important;

    text-align: center !important;
    text-indent: 0 !important;

    border-radius: 0 !important;
}

/* =====================================================
   QUANTITY: ALTURA ÚNICAMENTE EN CHECKOUT
   No modifica los anchos generales
   ===================================================== */

.wd-checkout-prod-cont div.quantity
:is(
    input[type="button"],
    input[type="number"],
    input[type="text"]
) {
    height: 40px !important;
    box-sizing: border-box !important;
}

/* =====================================================
   MINI CART: CAMPO DE CANTIDAD
   Ancho: 35px
   Sin altura fija
   ===================================================== */

.woocommerce-mini-cart-item div.quantity input[type="number"],
.woocommerce-mini-cart-item div.quantity input[type="text"].qty,
.woocommerce-mini-cart-item div.quantity input.qty,

.cart-widget-side div.quantity input[type="number"],
.cart-widget-side div.quantity input[type="text"].qty,
.cart-widget-side div.quantity input.qty,

.widget_shopping_cart div.quantity input[type="number"],
.widget_shopping_cart div.quantity input[type="text"].qty,
.widget_shopping_cart div.quantity input.qty {
    width: 35px !important;
    min-width: 35px !important;
    max-width: 35px !important;

    flex: 0 0 35px !important;
    box-sizing: border-box !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    margin: 0 !important;

    text-align: center !important;

    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
}

/* =====================================================
   MINI CART: BOTONES + Y -
   Ancho: 35px
   Padding vertical: 5px
   Sin altura fija
   ===================================================== */

.woocommerce-mini-cart-item div.quantity input.minus,
.woocommerce-mini-cart-item div.quantity input.plus,

.cart-widget-side div.quantity input.minus,
.cart-widget-side div.quantity input.plus,

.widget_shopping_cart div.quantity input.minus,
.widget_shopping_cart div.quantity input.plus {
    width: 35px !important;
    min-width: 35px !important;
    max-width: 35px !important;

    flex: 0 0 35px !important;
    box-sizing: border-box !important;

    padding: 5.7px 0 !important;
    margin: 0 !important;

    text-align: center !important;
    text-indent: 0 !important;

    border-radius: 0 !important;
}

/* ============================================================
   07. CARRITO, CHECKOUT, CUPONES Y AVISOS
   ============================================================ */

/* --- CHECKOUT: Ancho y rellenos de cupones --- */

.woocommerce-form-coupon-toggle {
    max-width: 1300px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.wd-checkout-coupon {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.coupon.wd-coupon-form {
    display: flex;
    align-items: stretch;
}

.coupon.wd-coupon-form input.input-text,
.coupon.wd-coupon-form button.button {
    height: 45px; /* Puedes ajustar esta altura según tu diseño */
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: normal;
}

.woocommerce-notices-wrapper {
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
    margin-top: 40px;

}

/* Mensaje de éxito / aviso general */

.woocommerce-message {
    color: #0f834d; /* Color de texto original de WooCommerce para éxito */
    background-color: rgba(15, 131, 77, 0.2); /* 20% de opacidad */
    border-top-color: #0f834d;
}

/* Mensaje de error */

.woocommerce-error {
    color: #b81c1c; /* Color de texto original para errores */
    background-color: rgba(184, 28, 28, 0.2); /* 20% de opacidad */
    border-top-color: #b81c1c;
}

/* Mensaje informativo */

.woocommerce-info {
    color: #1e85be; /* Color de texto original para info */
    background-color: rgba(30, 133, 190, 0.2); /* 20% de opacidad */
    border-top-color: #1e85be;
}

label.woocommerce-form__label[data-automation-id="woo-commerce-subscription-opt-in"] {
    margin-top: 20px;
    display: inline-block; /* Asegura que el margin-top respete el posicionamiento en formularios */
}

.wd-checkout-coupon {

    width: 100%;
    max-width: 470px; /* Alineado al ancho máximo que ya manejas en tus formularios */
}

.woocommerce-form-coupon-toggle {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-bottom: 15px;
    text-align: left !important;
}

#woocommerce-checkout-form-coupon.checkout_coupon {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 0 !important;
    margin-bottom: 0;
}

#woocommerce-checkout-form-coupon.checkout_coupon .form-row {
    margin: 0 !important;
    padding: 0 !important;
    flex: 1;
}

#woocommerce-checkout-form-coupon.checkout_coupon .form-row.form-row-last {
    flex: 0 0 auto;
}

#woocommerce-checkout-form-coupon.checkout_coupon input.input-text,
#woocommerce-checkout-form-coupon.checkout_coupon button.button {
    height: 45px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: normal;
    margin: 0;
}

.woocommerce-form-coupon, .woocommerce-form-login.hidden-form {
    position: relative;
    margin-bottom: 35px !important;
    padding: 0 !important;
    max-width: 470px;
    border: none !important;
    border-radius: var(--wd-brd-radius);
    text-align: start;
}

.wd-checkout-coupon {
    width: 100%;
    max-width: 470px;
    display: none!important;
}

/* ============================================================
   08. MINI CART LATERAL Y DESPLEGABLE
   ============================================================ */

/* =====================================================
   MINI CART LATERAL + MINI CART DESPLEGABLE
   CONFIGURACIÓN GENERAL
   ===================================================== */

.cart-widget-side,
.wd-dropdown-cart {
    /* Título superior “Carrito de compra” */
    --minicart-titulo-size: 20px;

    /* Nombre de cada producto */
    --minicart-producto-size: 16px;

    /* Cantidad y precio individual: 1 × S/ 399.00 */
    --minicart-precio-producto-size: 14px;

    /* Texto “Subtotal:” */
    --minicart-subtotal-texto-size: 16px;

    /* Importe del subtotal */
    --minicart-subtotal-precio-size: 18px;

    /* Botones Ver carrito y Finalizar compra */
    --minicart-botones-font-size: 14px;

    /* Texto “Cerrar” */
    --minicart-cerrar-font-size: 14px;

    /* Tamaño del icono X */
    --minicart-cerrar-icon-size: 13px;

    /* Separación entre la X y el texto Cerrar */
    --minicart-cerrar-gap: 6px;
}

/* =====================================================
   ANCHO DEL CARRITO LATERAL
   ===================================================== */

.cart-widget-side.wd-side-hidden {
    --wd-side-hidden-w: 350px;
}

/* =====================================================
   ENCABEZADO DEL CARRITO LATERAL
   ===================================================== */

.cart-widget-side .wd-heading {
    display: flex !important;
    flex: 0 0 auto !important;

    align-items: center !important;
    justify-content: flex-end !important;

    gap: 10px !important;

    padding: 20px !important;

    border-bottom: 1px solid var(--brdcolor-gray-300) !important;
}

/* =====================================================
   TÍTULO “CARRITO DE COMPRA”
   ===================================================== */

.cart-widget-side .wd-heading > .title {
    margin-right: auto !important;

    font-size: var(--minicart-titulo-size) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

/* =====================================================
   BOTÓN CERRAR
   ===================================================== */

.cart-widget-side .close-side-widget {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
}

/* Texto “Cerrar” */

.cart-widget-side .close-side-widget > a {
    display: inline-flex !important;
    align-items: center !important;

    gap: var(--minicart-cerrar-gap) !important;

    padding: 0 !important;

    font-size: var(--minicart-cerrar-font-size) !important;
    line-height: 1.2 !important;
}

/* Icono X */

.cart-widget-side
.close-side-widget.wd-cross-icon > a::before {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: var(--minicart-cerrar-icon-size) !important;
    height: var(--minicart-cerrar-icon-size) !important;
    min-width: var(--minicart-cerrar-icon-size) !important;

    flex: 0 0 var(--minicart-cerrar-icon-size) !important;

    font-size: var(--minicart-cerrar-icon-size) !important;
    line-height: var(--minicart-cerrar-icon-size) !important;

    padding-bottom: 3px !important;
}

/* Compatibilidad si WoodMart genera la X con ::after */

.cart-widget-side
.close-side-widget.wd-cross-icon > a::after {
    font-size: var(--minicart-cerrar-icon-size) !important;
}

/* =====================================================
   PRODUCTOS DEL CARRITO LATERAL
   Padding completo de 20px
   ===================================================== */

.cart-widget-side
.woocommerce-mini-cart
.mini_cart_item {
    margin-bottom: 0 !important;

    padding-top: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 20px !important;
    padding-left: 20px !important;

    transition: none !important;
}

/* =====================================================
   PRODUCTOS DEL MINI CART DESPLEGABLE
   Padding superior e inferior de 15px
   ===================================================== */

.wd-dropdown-cart
.product_list_widget > li,

.wd-dropdown-cart
.woocommerce-mini-cart
.mini_cart_item {
    margin-bottom: 0 !important;

    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

/* =====================================================
   TÍTULO DE CADA PRODUCTO
   Carrito lateral + carrito desplegable
   ===================================================== */

:is(.cart-widget-side, .wd-dropdown-cart)
.woocommerce-mini-cart-item
.cart-info
.wd-entities-title {
    display: block !important;

    margin-bottom: 10px !important;

    font-size: var(--minicart-producto-size) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* =====================================================
   CANTIDAD Y PRECIO INDIVIDUAL
   Ejemplo: 13 × S/ 399.00
   ===================================================== */

:is(.cart-widget-side, .wd-dropdown-cart)
.woocommerce-mini-cart-item
.cart-info > span.quantity {
    display: block !important;

    margin-top: 8px !important;

    font-size: var(--minicart-precio-producto-size) !important;
    line-height: 1.4 !important;
}

/* Precio individual */

:is(.cart-widget-side, .wd-dropdown-cart)
.woocommerce-mini-cart-item
.cart-info > span.quantity
.woocommerce-Price-amount {
    font-size: inherit !important;
    font-weight: 500 !important;
}

/* Símbolo monetario del precio individual */

:is(.cart-widget-side, .wd-dropdown-cart)
.woocommerce-mini-cart-item
.cart-info > span.quantity
.woocommerce-Price-currencySymbol {
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* =====================================================
   FOOTER DEL CARRITO LATERAL
   Subtotal y botones con padding lateral de 20px
   ===================================================== */

.cart-widget-side
.shopping-cart-widget-footer > * {
    padding-inline: 20px !important;
}

/* =====================================================
   FILA DEL SUBTOTAL
   Carrito lateral + carrito desplegable
   ===================================================== */

:is(.cart-widget-side, .wd-dropdown-cart)
.woocommerce-mini-cart__total {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;

    gap: 15px !important;

    margin-top: 15px !important;
    margin-bottom: 0 !important;

    padding-block: 20px !important;

    font-size: 130% !important;

    border-top: 1px solid var(--brdcolor-gray-300) !important;
}

/* =====================================================
   SUBTOTAL DEL MINI CART DESPLEGABLE
   Sin padding izquierdo ni derecho
   ===================================================== */

.wd-dropdown-cart
.woocommerce-mini-cart__total {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline: 0 !important;
}

/* =====================================================
   TEXTO “SUBTOTAL:”
   ===================================================== */

:is(.cart-widget-side, .wd-dropdown-cart)
.woocommerce-mini-cart__total > strong {
    font-size: var(--minicart-subtotal-texto-size) !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
}

/* =====================================================
   PRECIO DEL SUBTOTAL
   Ejemplo: S/ 6,135.00
   ===================================================== */

:is(.cart-widget-side, .wd-dropdown-cart)
.woocommerce-mini-cart__total
.woocommerce-Price-amount {
    font-size: var(--minicart-subtotal-precio-size) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

/* Símbolo monetario del subtotal */

:is(.cart-widget-side, .wd-dropdown-cart)
.woocommerce-mini-cart__total
.woocommerce-Price-currencySymbol {
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* =====================================================
   CONTENEDOR DE BOTONES INFERIORES
   ===================================================== */

:is(.cart-widget-side, .wd-dropdown-cart)
.woocommerce-mini-cart__buttons {
    display: flex !important;
    flex-direction: column !important;

    gap: 0 !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* =====================================================
   BOTONES DEL MINI CART DESPLEGABLE
   Sin padding izquierdo ni derecho
   Solo afecta a .wd-dropdown-cart
   ===================================================== */

.wd-dropdown-cart
.woocommerce-mini-cart__buttons {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline: 0 !important;
}

/* =====================================================
   TODOS LOS BOTONES INTERNOS
   ===================================================== */

:is(.cart-widget-side, .wd-dropdown-cart)
.woocommerce-mini-cart__buttons > * {
    width: 100% !important;

    margin-bottom: 15px !important;

    box-sizing: border-box !important;
}

/* El último botón no deja margen inferior */

:is(.cart-widget-side, .wd-dropdown-cart)
.woocommerce-mini-cart__buttons > *:last-child {
    margin-bottom: 0 !important;
}

/* =====================================================
   BOTONES “VER CARRITO” Y “FINALIZAR COMPRA”
   ===================================================== */

:is(.cart-widget-side, .wd-dropdown-cart)
.woocommerce-mini-cart__buttons
.button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    font-size: var(--minicart-botones-font-size) !important;
    line-height: 1.2 !important;
    text-align: center !important;

    box-sizing: border-box !important;
}

/* =====================================================
   BOTÓN “VER CARRITO”
   Borde oscuro y padding vertical de 15px
   ===================================================== */

:is(.cart-widget-side, .wd-dropdown-cart)
.woocommerce-mini-cart__buttons
.button.btn-cart {
    width: 100% !important;

    padding-top: 15px !important;
    padding-bottom: 15px !important;

    background-color: #ffffff !important;
    color: #111111 !important;

    border: 1px solid #111111 !important;
    border-radius: 3px !important;

    font-size: var(--minicart-botones-font-size) !important;
}

/* Hover del botón Ver carrito */

:is(.cart-widget-side, .wd-dropdown-cart)
.woocommerce-mini-cart__buttons
.button.btn-cart:hover {
    background-color: #111111 !important;
    color: #ffffff !important;

    border-color: #111111 !important;
}

/* =====================================================
   BOTÓN “FINALIZAR COMPRA”
   ===================================================== */

:is(.cart-widget-side, .wd-dropdown-cart)
.woocommerce-mini-cart__buttons
.button.checkout {
    width: 100% !important;

    font-size: var(--minicart-botones-font-size) !important;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 768px) {

    .cart-widget-side,
    .wd-dropdown-cart {
        --minicart-titulo-size: 18px;
        --minicart-producto-size: 15px;
        --minicart-precio-producto-size: 14px;
        --minicart-subtotal-texto-size: 15px;
        --minicart-subtotal-precio-size: 17px;
        --minicart-botones-font-size: 14px;
        --minicart-cerrar-font-size: 15px;
        --minicart-cerrar-icon-size: 18px;
    }


    /* El carrito lateral no supera el ancho del celular */

    .cart-widget-side.wd-side-hidden {
        --wd-side-hidden-w: 100vw;
    }


    /* Encabezado del carrito lateral */

    .cart-widget-side .wd-heading {
        padding: 20px 15px !important;
    }


    /* Productos del carrito lateral */

    .cart-widget-side
    .woocommerce-mini-cart
    .mini_cart_item {
        padding: 15px !important;
    }


    /* Productos del carrito desplegable */

    .wd-dropdown-cart
    .product_list_widget > li,

    .wd-dropdown-cart
    .woocommerce-mini-cart
    .mini_cart_item {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }


    /* Footer lateral */

    .cart-widget-side
    .shopping-cart-widget-footer > * {
        padding-inline: 15px !important;
    }


    /* Subtotal */

    :is(.cart-widget-side, .wd-dropdown-cart)
    .woocommerce-mini-cart__total {
        gap: 10px !important;
        padding-block: 16px !important;
    }


    /* Subtotal desplegable sin padding lateral */

    .wd-dropdown-cart
    .woocommerce-mini-cart__total {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-inline: 0 !important;
    }


    /* Botones desplegables sin padding lateral */

    .wd-dropdown-cart
    .woocommerce-mini-cart__buttons {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-inline: 0 !important;
    }


    /* Ver carrito mantiene 15px arriba y abajo */

    :is(.cart-widget-side, .wd-dropdown-cart)
    .woocommerce-mini-cart__buttons
    .button.btn-cart {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
}

/* =====================================================
   MINI CART: BOTÓN ELIMINAR PRODUCTO
   Sin posición superior fija
   ===================================================== */

:is(.cart-widget-side, .wd-dropdown-cart)
.woocommerce-mini-cart
.remove {
    position: absolute !important;

    /* Sin top */
    top: auto !important;
    inset-block-start: auto !important;

    inset-inline-end: 0 !important;

    z-index: 2 !important;

    width: 20px !important;
    height: 20px !important;

    border-radius: 50% !important;

    color: var(--color-gray-800) !important;

    text-align: center !important;
    font-size: 0 !important;
    line-height: 20px !important;
}

/* ============================================================
   09. SLIDERS, CARRUSELES Y FLECHAS
   ============================================================ */

/* --- SLIDER: Eliminar paddings y gaps --- */

.wd-slider>.wd-carousel-inner>.wd-carousel {
    padding: 0!important;
    --wd-gap: 0px!important;
}

/* --- 1. BARRA DE PROGRESO (Alineada a la Izquierda) --- */

.wd-nav-scroll  {
    height: 2px !important; /* Grosor de la línea */
    background-color: rgba(0, 0, 0, 0.1) !important; /* Color de fondo del carril */
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    margin-left: 0!important;
 color: #000000 !important;
    position: relative;
    width: 86% !important; /* El 20% restante queda libre a la derecha para las flechas */
}

/* --- 3. DISEÑO DE LAS FLECHAS (Círculos Minimalistas) --- */

.wd-btn-arrow {
    position: static !important;
    width: 45px !important;
    height: 45px !important;
    border: 1px solid #000000 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #000000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
 gap: 15px !important; /* Ajusta el espacio aquí */
}

.wd-btn-arrow:hover , .wd-btn-arrow:active{
    background-color: #000000 !important;
    color: #ffffff !important;
}

.wd-arrow-inner:hover {
    font-size: var(--wd-arrow-icon-size, 24px);
    font-family: "woodmart-font";
 color: #ffffff !important;
}

.elementor-element.elementor-element-0578e1a .wd-nav-arrows {
    --wd-arrow-offset-h: -46%;
    --wd-arrow-offset-v: -100%;
    gap: 15px;
}

.elementor-3411 .elementor-element.elementor-element-b9d949e .wd-nav-arrows {
    --wd-arrow-offset-h: -46%!important;
    --wd-arrow-offset-v: -100%!important;
    gap: 15px;
}

.elementor-3411 .elementor-element.elementor-element-8086097 .wd-nav-arrows {
     gap: 15px;
}

/* =====================================================
CLASES DISPONIBLES

flechas-centradas

- Horizontal: centro
- Vertical: 105%

flechas-centradas-banner

- Horizontal: centro
- Vertical: 110%

flechas-centradas-video

- Horizontal: centro
- Vertical: 108%

flechas-derechas

- Horizontal: derecha
- Vertical: 104%
===================================================== */


/* =====================================================
CONFIGURACIÓN COMPARTIDA
===================================================== */


.flechas-centradas,
.flechas-centradas-banner,
.flechas-centradas-video,
.flechas-derechas {

position: relative !important;


/* TAMAÑO Y SEPARACIÓN */

--separacion-botones:16px;

--tamano-boton:45px;



/* ESTILO NORMAL */

--color-borde:#111111;

--color-flecha:#444444;

--fondo-boton:#ffffff;



/* ESTILO HOVER */

--hover-fondo-boton:#111111;

--hover-color-flecha:#ffffff;

--hover-color-borde:#111111;



/* TAMAÑO FLECHA */

--tamano-flecha:10px;

--grosor-flecha:1.6px;



/* FLECHA IZQUIERDA */

--prev-arrow-x:55%;

--prev-arrow-y:50%;



/* FLECHA DERECHA */

--next-arrow-x:45%;

--next-arrow-y:50%;


}





/* =====================================================
POSICIÓN DE CADA CLASE
===================================================== */


/* Centro vertical 105% */

.flechas-centradas {

--posicion-vertical:105%;

--alineacion-horizontal:center;

--espacio-lateral:0px;

}




/* Centro vertical 110% */

.flechas-centradas-banner {

--posicion-vertical:110%;

--alineacion-horizontal:center;

--espacio-lateral:0px;

}




/* Centro vertical 115% */

.flechas-centradas-video {

--posicion-vertical:108%;

--alineacion-horizontal:center;

--espacio-lateral:0px;

}




/* Derecha vertical 104% */

.flechas-derechas {

--posicion-vertical:104%;

--alineacion-horizontal:flex-end;


/* margen adaptable */

--espacio-lateral:clamp(16px,4vw,0px);

}






/* =====================================================
CONTENEDOR DE LAS DOS FLECHAS
===================================================== */


:is(
.flechas-centradas,
.flechas-centradas-banner,
.flechas-centradas-video,
.flechas-derechas
)
.wd-nav-arrows.wd-pos-sep {


position:absolute !important;


top:var(--posicion-vertical) !important;

left:0 !important;

right:0 !important;

bottom:auto !important;



width:100% !important;

max-width:none !important;

height:auto !important;



box-sizing:border-box !important;



transform:translateY(-50%) !important;



display:flex !important;

flex-direction:row !important;

flex-wrap:nowrap !important;

align-items:center !important;



justify-content:var(--alineacion-horizontal) !important;



gap:var(--separacion-botones) !important;



padding-left:var(--espacio-lateral) !important;

padding-right:var(--espacio-lateral) !important;



margin:0 !important;



opacity:1 !important;

visibility:visible !important;

z-index: 5!important;

pointer-events:none !important;


transition:none !important;


}






/* =====================================================
BOTONES CIRCULARES
===================================================== */


:is(
.flechas-centradas,
.flechas-centradas-banner,
.flechas-centradas-video,
.flechas-derechas
)
.wd-nav-arrows
.wd-btn-arrow {


position:static !important;


inset:auto !important;



width:var(--tamano-boton) !important;

height:var(--tamano-boton) !important;



min-width:var(--tamano-boton) !important;

min-height:var(--tamano-boton) !important;



flex:0 0 var(--tamano-boton) !important;



display:flex !important;

align-items:center !important;

justify-content:center !important;



box-sizing:border-box !important;



margin:0 !important;

padding:0 !important;



background-color:var(--fondo-boton) !important;



border:1px solid var(--color-borde) !important;

border-radius:50% !important;



box-shadow:none !important;



color:var(--color-flecha) !important;



opacity:1 !important;

visibility:visible !important;



pointer-events:auto !important;



transform:none !important;



transition:

background-color .2s ease,

border-color .2s ease,

color .2s ease !important;


}






/* =====================================================
HOVER
===================================================== */


:is(
.flechas-centradas,
.flechas-centradas-banner,
.flechas-centradas-video,
.flechas-derechas
)
.wd-nav-arrows
.wd-btn-arrow:hover {


background-color:var(--hover-fondo-boton) !important;


border-color:var(--hover-color-borde) !important;


color:var(--hover-color-flecha) !important;


opacity:1 !important;

transform:none !important;


}






/* =====================================================
FLECHAS SIEMPRE VISIBLES
===================================================== */


:is(
.flechas-centradas,
.flechas-centradas-banner,
.flechas-centradas-video,
.flechas-derechas
)
.wd-nav-arrows.wd-hover-1,


:is(
.flechas-centradas,
.flechas-centradas-banner,
.flechas-centradas-video,
.flechas-derechas
):hover
.wd-nav-arrows.wd-hover-1,


:is(
.flechas-centradas,
.flechas-centradas-banner,
.flechas-centradas-video,
.flechas-derechas
)
.wd-nav-arrows.wd-hover-1
.wd-btn-arrow,


:is(
.flechas-centradas,
.flechas-centradas-banner,
.flechas-centradas-video,
.flechas-derechas
):hover
.wd-nav-arrows.wd-hover-1
.wd-btn-arrow {


opacity:1 !important;

visibility:visible !important;


}






/* =====================================================
ELIMINAR ICONOS ORIGINALES
===================================================== */


:is(
.flechas-centradas,
.flechas-centradas-banner,
.flechas-centradas-video,
.flechas-derechas
)
.wd-btn-arrow::before,


:is(
.flechas-centradas,
.flechas-centradas-banner,
.flechas-centradas-video,
.flechas-derechas
)
.wd-btn-arrow::after,


:is(
.flechas-centradas,
.flechas-centradas-banner,
.flechas-centradas-video,
.flechas-derechas
)
.wd-arrow-inner::after {


content:none !important;

display:none !important;


}






/* =====================================================
CONTENEDOR INTERNO
===================================================== */


:is(
.flechas-centradas,
.flechas-centradas-banner,
.flechas-centradas-video,
.flechas-derechas
)
.wd-arrow-inner {


position:relative !important;


display:block !important;


width:100% !important;

height:100% !important;



margin:0 !important;

padding:0 !important;



background:transparent !important;

border:none !important;



opacity:1 !important;

visibility:visible !important;



transform:none !important;


}






/* =====================================================
BASE FLECHAS
===================================================== */


:is(
.flechas-centradas,
.flechas-centradas-banner,
.flechas-centradas-video,
.flechas-derechas
)
.wd-prev
.wd-arrow-inner::before,


:is(
.flechas-centradas,
.flechas-centradas-banner,
.flechas-centradas-video,
.flechas-derechas
)
.wd-next
.wd-arrow-inner::before {


content:"" !important;


position:absolute !important;


display:block !important;



width:var(--tamano-flecha) !important;

height:var(--tamano-flecha) !important;



border:solid currentColor !important;



border-width:

0

var(--grosor-flecha)

var(--grosor-flecha)

0 !important;


}






/* =====================================================
FLECHA IZQUIERDA
===================================================== */


:is(
.flechas-centradas,
.flechas-centradas-banner,
.flechas-centradas-video,
.flechas-derechas
)
.wd-prev
.wd-arrow-inner::before {


left:var(--prev-arrow-x) !important;

top:var(--prev-arrow-y) !important;



transform:

translate(-42%,-50%)

rotate(135deg) !important;


}






/* =====================================================
FLECHA DERECHA
===================================================== */


:is(
.flechas-centradas,
.flechas-centradas-banner,
.flechas-centradas-video,
.flechas-derechas
)
.wd-next
.wd-arrow-inner::before {


left:var(--next-arrow-x) !important;

top:var(--next-arrow-y) !important;



transform:

translate(-58%,-50%)

rotate(-45deg) !important;


}






/* =====================================================
DESHABILITADO
===================================================== */


:is(
.flechas-centradas,
.flechas-centradas-banner,
.flechas-centradas-video,
.flechas-derechas
)
.wd-btn-arrow.wd-disabled {


display:flex !important;


opacity:1 !important;

visibility:visible !important;



background-color:var(--fondo-boton) !important;

border-color:var(--color-borde) !important;

color:var(--color-flecha) !important;



pointer-events:none !important;


}






/* =====================================================
FOCUS
===================================================== */


:is(
.flechas-centradas,
.flechas-centradas-banner,
.flechas-centradas-video,
.flechas-derechas
)
.wd-btn-arrow:focus {


outline:none !important;


}



:is(
.flechas-centradas,
.flechas-centradas-banner,
.flechas-centradas-video,
.flechas-derechas
)
.wd-btn-arrow:focus-visible {


outline:2px solid #222222 !important;

outline-offset:3px !important;


}

/* ============================================================
   10. ACORDEÓN, BANNERS, HOTSPOTS E INSTAGRAM
   ============================================================ */

/* --- 1. AJUSTES BASE --- */

.acordeon-content .e-con-inner {
    display: flex !important;
    width: 100% !important;
    align-items: stretch !important;
    gap: 0 !important;
}

.acordeon-content .acordeon-item {
    flex: 1 !important;
    transition: flex 0.7s cubic-bezier(0.25, 1, 0.5, 1) !important;
    cursor: pointer !important;
    overflow: hidden !important;
    position: relative;
    z-index: 1;
}

/* --- 2. LÓGICA DE EXPANSIÓN --- */

/* Si hay uno activo, los que NO son activos se encogen */

.acordeon-content .e-con-inner:has(.is-active) .acordeon-item:not(.is-active) {
    flex: 0.5 !important;
}

/* El que tiene la clase se expande (incluyendo el primero al cargar) */

.acordeon-content .acordeon-item.is-active {
    flex: 2 !important;
}

/* --- 3. EL DEGRADADO --- */

.acordeon-content .acordeon-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
    opacity: 0.2; /* Estado base muy sutil */
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

/* Se intensifica en el activo */

.acordeon-content .acordeon-item.is-active::before {
    opacity: 0.45;
}

/* --- 4. CONTENIDO QUE NO SE DEFORMA --- */

.acordeon-content .acordeon-item .contenido-oculto {
    position: absolute !important;
    bottom: 0%;
    left: 5px;
    width: 100% !important;
   min-width: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 4;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
}

/* Mostramos el contenido si tiene la clase is-active */

.acordeon-content .acordeon-item.is-active .contenido-oculto {
    opacity: 1 !important;
    visibility: visible !important;

    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease !important;
    /* Quitamos el delay para el primer renderizado, pero se mantiene para la interacción */
    transition-delay: 0.2s !important;
}

.acordeon-content .acordeon-item .tag-portada {
    position: relative;
    z-index: 5 !important;
}

/* --- 5. RESPONSIVE --- */

@media (max-width: 1024px) {
    .acordeon-content .e-con-inner {
        flex-direction: column !important;
        height: 110vh !important;
    }
    .acordeon-content .acordeon-item .contenido-oculto {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        min-width: 100% !important;
    }
}

.tag-portada{
    /* 1. Cambiamos la dirección de escritura de horizontal a vertical */
  writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;

width: auto !important;
    height: 190px !important;

    padding: 25px 15px 25px 12px !important;
    /* 5. Aseguramos que se pegue al borde derecho */
    position: absolute !important;
    right: 0 !important;
    top: 30px !important; /* Ajusta qué tan arriba lo quieres */
}

.promo-banner .wrapper-content-banner {
    z-index: 2;
    display: flex;
    overflow: hidden;
    padding: 44px 40px !important;
    border-radius: var(--wd-brd-radius);
    transform: translate3d(0, 0, 0);
}

/* Tablet */
@media (max-width: 1024px) {

    .promo-banner .wrapper-content-banner {

        padding: 40px 35px !important;

    }

}


/* Mobile */
@media (max-width: 768px) {

    .promo-banner .wrapper-content-banner {

        padding: 33px 30px !important;

    }

}

.promo-banner .banner-btn-wrapper {
    margin-top: 20px!important;
}

.promo-banner .btn {
     padding: 15px 30px 12px 30px !important;
    border-radius: 3px!important;
    font-size: 15px!important;
    height: 40px!important;
}

/* Seleccionamos el contenedor de la imagen */

.promo-banner-wrapper .main-wrapp-img {
    position: relative;
}

/* Creamos la capa oscura con un pseudo-elemento */

.promo-banner-wrapper .main-wrapp-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Degradado de negro transparente a negro con 60% de opacidad */
    background: linear-gradient(to top, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0) 100%);
    pointer-events: none; /* Permite que los clicks pasen a través del banner */
}

.hotspot-content {
   text-align: left !important;
}

/* Contenedor principal */

.hotspot-product {
    display: grid !important;
    grid-template-columns: 90px 1fr; /* Ajustado al ancho de tu imagen */
    /* Cambiamos px fijos por auto para que el centrado funcione */
    grid-template-rows: auto auto;
    gap: 15px 20px; /* 0 de gap vertical para que estén juntos, 20px horizontal */
    background: #ffffff;
    padding: 15px !important;
    width: 320px !important;
    border-radius: 0;
    /* Este es el que centra verticalmente los elementos en las celdas */
    align-items: center !important;
}

/* =====================================
   HOTSPOT PRODUCT WIDTH RESPONSIVE
===================================== */


/* Portátil */
@media (max-width:1366px) and (min-width:1025px){

    .hotspot-product {

        width:280px !important;

    }

}



/* Tablet */
@media (max-width:1024px) and (min-width:769px){

    .hotspot-product {

        width:250px !important;

    }

}



/* Mobile */
@media (max-width:768px){

    .hotspot-product {

        width:250px !important;

    }

}

.wd-image-hotspot-hotspots img  {
    height: 600px !important;
    background-position: bottom bottom !important;
    background-repeat: no-repeat !important;
   object-fit: cover !important; /* Es el equivalente a 'background-size: cover' pero para etiquetas <img> */
}


/* Portátil */
@media (max-width: 1366px) and (min-width: 1025px) {

    .wd-image-hotspot-hotspots img {

        height: 500px !important;

    }

}


/* Tablet */
@media (max-width: 1024px) and (min-width: 769px) {

    .wd-image-hotspot-hotspots img {

        height: 400px !important;

    }

}


/* Mobile */
@media (max-width: 768px) {

    .wd-image-hotspot-hotspots img {

        height: 300px !important;

    }

}



/* Imagen a la izquierda */

.hotspot-content-image {
    grid-row: 1 / span 2;
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
}

.hotspot-content-image img {
    width: 90px !important;
    height: 90px !important;
    object-fit: cover;
    border-radius: 0;
}

/* Título: Quitamos el margen superior que lo empuja hacia arriba */

.hotspot-content .wd-entities-title {
    grid-column: 2;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    align-self: end; /* Lo pega al fondo de su celda (mitad superior) */
    font-size: 17px!important;

}

/* =====================================
   HOTSPOT TITULO RESPONSIVE
===================================== */


/* Portátil */
@media (max-width:1366px) and (min-width:1025px){

    .hotspot-content .wd-entities-title {

        font-size:16px !important;

    }

}



/* Tablet */
@media (max-width:1024px) and (min-width:769px){

    .hotspot-content .wd-entities-title {

        font-size:14px !important;

    }

}



/* Mobile */
@media (max-width:768px){

    .hotspot-content .wd-entities-title {

        font-size:14px !important;

    }

}

/* Precio: Quitamos margen inferior */

.hotspot-content .price {
    grid-column: 2;
    margin: 0 !important;
    padding: 0 !important;
    align-self: start; /* Lo pega al techo de su celda (mitad inferior) */
}

/* Ocultar lo que sobra: Descripción, Botón de Leer más, Botón de comprar y Precio tachado */

.hotspot-content-text .wd-more-desc-inner,
.hotspot-product.wd-more-desc-btn,
.hotspot-product .button, .screen-reader-text {
    display: none !important;
}

.hotspot-icon-default .hotspot-btn:after{
    width: 20px!important;
    height: 20px!important;
    top: 10px!important;
    left: 10px!important;
}



.wd-image-hotspot {
    position: absolute;
    margin-top: -10px;
    margin-left: -10px;
    width: 40px!important;
    height: 40px!important;
}

.hotspot-content .hotspot-content-text {

    display: none!important;
}

/* =====================================================
   1. CONFIGURACIÓN DEL PADRE
===================================================== */

#contenedor-instagram {

    position:relative !important;

    overflow:hidden !important;

    cursor:pointer;

}



/* =====================================================
   2. CAPA DE IMAGEN ELEMENTOR
   Imagen siempre cubriendo todo
===================================================== */


#contenedor-instagram > .elementor-motion-effects-container,
#contenedor-instagram > .elementor-motion-effects-container > .elementor-motion-effects-layer {


    width:100% !important;

    height:100% !important;


    background-repeat:no-repeat !important;

    background-size:cover !important;

    background-position:center !important;


}





/* =====================================================
   ZOOM DE IMAGEN AL HACER HOVER
   No usa porcentajes
===================================================== */


/* Estado normal */
#contenedor-instagram > .elementor-motion-effects-container 
> .elementor-motion-effects-layer {

    transform: scale(1) !important;

    transition: transform .8s cubic-bezier(.25,1,.5,1) !important;

    will-change: transform !important;

}


/* Hover zoom */
#contenedor-instagram:hover 
> .elementor-motion-effects-container 
> .elementor-motion-effects-layer {

    transform: scale(1.08) !important;

}






/* =====================================================
   3. CAPA OSCURA
===================================================== */


#contenedor-instagram::before {


content:"";


position:absolute;


inset:0;



background-color:rgba(0,0,0,.45);



opacity:0;



transition:opacity .4s ease;



z-index:2;



}






#contenedor-instagram:hover::before {


opacity:1;


}







/* =====================================================
   4. ICONO INSTAGRAM SVG
===================================================== */


#contenedor-instagram::after {


content:"" !important;



position:absolute;



top:50%;

left:50%;



transform:
translate(-50%,-50%)
scale(.8);



width:45px;

height:45px;



background-image:url("https://nomu.pe/wp-content/uploads/2026/04/Icon-Instagram.svg") !important;



background-size:contain !important;

background-position:center !important;

background-repeat:no-repeat !important;



font-family:none !important;



border:none !important;



background-color:transparent !important;



opacity:0;



transition:
all .5s cubic-bezier(.25,1,.5,1);



z-index:10;



}




#contenedor-instagram:hover::after {


opacity:1;



transform:
translate(-50%,-50%)
scale(1);



}






/* =====================================================
   5. PRODUCTO FLOTANTE
===================================================== */


#producto-flotante {


z-index:10 !important;



opacity:0 !important;


visibility:hidden !important;



transform:
translateY(30px) !important;



transition:
all .5s cubic-bezier(.25,1,.5,1) !important;



}




#contenedor-instagram:hover #producto-flotante {


opacity:1 !important;


visibility:visible !important;



transform:
translateY(0) !important;



}
/* ============================================================
   11. FORMULARIOS DE CONTACTO
   ============================================================ */

/* --- ESTILO MINIMALISTA PARA FORMULARIO (SIN FONDO) --- */

.wpcf7-form-control:not(.wpcf7-submit) {
    background-color: transparent !important; /* Quita cualquier fondo */
    border: 1px solid #d1d1d1 !important;     /* Borde ligero (puedes usar #eeeeee si lo quieres más tenue) */
    border-radius: 0px !important;            /* Bordes rectos para un look arquitectónico */
    padding: 30px!important;              /* Espacio interno (0 a los lados si quieres que alinee con el texto) */
    color: #333333 !important;                 /* Color del texto al escribir */
    font-size: 15px !important;
    transition: all 0.3s ease;

    /* Si quieres que solo sea la línea de abajo, usa esto en lugar de 'border': */
    /* border: none !important; border-bottom: 1px solid #d1d1d1 !important; */
}

/* --- EFECTO AL HACER CLIC (FOCUS) --- */

.wpcf7-form-control:focus {
    outline: none !important;
    border-color: #000000 !important; /* El borde se oscurece al escribir */
}

/* --- ESTILO DEL MARCADOR DE POSICIÓN (PLACEHOLDER) --- */

.wpcf7-form-control::placeholder {
    color: #999999 !important;
    font-weight: 300;
}

/* --- AJUSTE PARA EL BOTÓN ENVIAR --- */

.wpcf7-submit {
    margin-top: 20px;

}

/* ============================================================
   12. BLOQUES DE BENEFICIOS E ICON BOX
   ============================================================ */

/* Contenedor principal con transición */

.beneficios .elementor-element.elementor-widget-icon-box {
    border: 1px solid #7E7E7E !important;
    border-radius: 0px;
    background-color: tr;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.4s ease, border 0.4s ease;
}

/* Estado hover de la caja */

.beneficios .elementor-element.elementor-widget-icon-box:hover {
    border: 1px dashed #7E7E7E !important;
    box-shadow: none;
}

/* Cambio de color del título al hacer hover */

.beneficios .elementor-element.elementor-widget-icon-box:hover .elementor-icon-box-title {
    color: #00A9E0!important; /* Ajusta este color al que desees para el hover */
}

/* Cambio de color del icono SVG al hacer hover */

.beneficios .elementor-element.elementor-widget-icon-box:hover .elementor-icon svg {
    stroke: #00A9E0 !important; /* Ajusta este color al que desees para el hover */
    color: #00A9E0!important;
}

/* Rotación vertical tipo espejo del icono al hacer hover */

.beneficios .elementor-element.elementor-widget-icon-box:hover .elementor-icon svg {
     transform: rotateY(360deg);
}

/* Al pasar el cursor, borde derecho del icono discontinuo */

.beneficios .elementor-element.elementor-widget-icon-box:hover .elementor-icon-box-icon {
    border-right: 1px dashed #7E7E7E !important;
}

/* Flexbox para alinear */

.beneficios .elementor-icon-box-wrapper {
    display: flex;
    align-items: center;
}

/* Estilo del contenedor del icono */

.movilidad .elementor-icon-box-icon {
    margin: 0 20px;
    padding: 25px 22px 25px 5px!important;
    border-right: 1px solid #7E7E7E !important;
    flex-shrink: 0;
    transition: border-right 0.4s ease;
}

/* Ajustes del SVG base */

.movilidad .elementor-icon svg {
    margin-right: -1px!important;
    transition: transform 0.4s ease, stroke 0.4s ease; /* Transiciones suaves */
}

.calidad .elementor-icon-box-icon {
    margin: 0 20px;
    padding: 25px 22px 25px 5px!important;
    border-right: 1px solid #7E7E7E !important;
    flex-shrink: 0;
    transition: border-right 0.4s ease;
}

/* Ajustes del SVG base */

.calidad .elementor-icon svg {
    margin-right: -6px!important;
    transition: transform 0.4s ease, stroke 0.4s ease; /* Transiciones suaves */
}

/* Ajustes del SVG base */

.integral .elementor-icon svg {
    margin-right: 5px!important;
    transition: transform 0.4s ease, stroke 0.4s ease; /* Transiciones suaves */
}

.beneficios .elementor-widget-icon-box .elementor-icon-box-icon {
    margin: 0 20px !important;
    padding: 25px 22px 25px 5px!important;
    border-right: 1px solid #7E7E7E !important;
    flex-shrink: 0;
}

.beneficios .elementor-widget-icon-box .elementor-icon svg {
    transition: transform 0.4s ease, stroke 0.4s ease; /* Transiciones suaves */
}


/* ============================================================
   CALIDAD - MOBILE
   Cambiar borde derecho a borde inferior
============================================================ */

@media (max-width: 768px) {

    .calidad .elementor-icon-box-icon {
        margin: 0 0 0px 0 !important;
        padding: 25px 22px 25px 22px !important;

        border-right: none !important;
        border-bottom: 1px solid #7E7E7E !important;

        width: 100%;
    }
	
	
	.beneficios .elementor-widget-icon-box .elementor-icon-box-icon {
    margin: 0 0px !important;
    padding: 25px 22px 25px 22px!important;
    border-right: NONE !important;
		border-bottom: 1px solid #7E7E7E !important;
    flex-shrink: 0;
}

}

/* ============================================================
   13. AJUSTES ESPECÍFICOS DE ELEMENTOR Y VARIOS
   ============================================================ */

/* --- ELEMENTOR: Ajuste de altura mínima para secciones específicas --- */

.elementor-3411 .elementor-element.elementor-element-fa37859 {
    min-height: 0vh;
}

.elementor-3411 .elementor-element.elementor-element-ab1aa83 .elementor-icon {
    font-size: 68px;
    margin-left: 10px;
    }










/* ==========================================================
   BUSCADOR DE PRODUCTOS NOMU
   VERSIÓN COMPLETA CORREGIDA
   ========================================================== */


/* ==========================================================
   1. VARIABLES GENERALES
   ========================================================== */

.wd-search-form.wd-header-search-form {
    /* MEDIDAS PRINCIPALES */
    --nomu-search-height: 50px;
    --nomu-category-width: 250px;
    --nomu-search-button-width: 128px;
    --nomu-category-menu-width: 250px;

    /* COLORES */
    --nomu-blue: #00A9E0;
    --nomu-blue-dark: #008FBD;
    --nomu-dark: #2C2C2C;

    --nomu-border: #D8DEE7;
    --nomu-border-hover: #B9C6D8;

    --nomu-text: #1D2327;
    --nomu-secondary-text: #91A0BA;

    --nomu-soft-background: #F7F9FC;
    --nomu-white: #FFFFFF;

    /* BORDES */
    --nomu-search-radius: 7px;
    --nomu-results-radius: 17px;

    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   2. FORMULARIO PRINCIPAL

   Existe un solo borde exterior.
   Los elementos internos no tienen borde superior o inferior.
   ========================================================== */

.wd-search-form.wd-header-search-form
form.searchform {
    position: relative !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: 100% !important;

    height: var(--nomu-search-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;

    color: var(--nomu-text) !important;
    background-color: var(--nomu-white) !important;

    /*
     * ÚNICO BORDE DEL BUSCADOR
     */
    border: 1px solid var(--nomu-border) !important;
    border-radius: var(--nomu-search-radius) !important;

    outline: none !important;
    box-shadow: none !important;

    box-sizing: border-box !important;

    overflow: visible !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}


/* ==========================================================
   3. BUSCADOR ACTIVO

   El borde completo cambia a oscuro.
   ========================================================== */

.wd-search-form.wd-header-search-form
form.searchform:focus-within {
    border-color: var(--nomu-dark) !important;

    box-shadow:
        0 0 0 1px var(--nomu-dark) !important;
}


/* Separador oscuro del selector al activarse */

.wd-search-form.wd-header-search-form
form.searchform:focus-within
.wd-search-cat {
    border-left-color: var(--nomu-dark) !important;
}


/* ==========================================================
   4. CAMPO DE BÚSQUEDA

   No tiene borde independiente.
   ========================================================== */

.wd-search-form.wd-header-search-form
form.searchform
input.s,

.wd-search-form.wd-header-search-form
form.searchform
input[type="text"].s {
    position: relative !important;

    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;

    align-self: stretch !important;

    margin: 0 !important;

    /*
     * Espacio derecho reservado para la X.
     */
    padding:
        0
        52px
        0
        24px !important;

    color: var(--nomu-text) !important;
    background-color: transparent !important;

    /*
     * Sin borde propio.
     */
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;

    border-radius:
        var(--nomu-search-radius)
        0
        0
        var(--nomu-search-radius) !important;

    outline: none !important;
    box-shadow: none !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: normal !important;

    box-sizing: border-box !important;
}


/* Placeholder */

.wd-search-form.wd-header-search-form
form.searchform
input.s::placeholder {
    color: #8C96A6 !important;
    opacity: 1 !important;
}


/* Eliminar cualquier borde al hacer clic */

.wd-search-form.wd-header-search-form
form.searchform
input.s:hover,

.wd-search-form.wd-header-search-form
form.searchform
input.s:focus,

.wd-search-form.wd-header-search-form
form.searchform
input.s:active {
    color: var(--nomu-text) !important;
    background-color: transparent !important;

    border: 0 !important;
    border-width: 0 !important;
    border-color: transparent !important;

    outline: none !important;
    box-shadow: none !important;
}


/* ==========================================================
   5. BOTÓN X PARA BORRAR

   Siempre permanece dentro del campo de texto.
   ========================================================== */

.wd-search-form.wd-header-search-form
form.searchform
.wd-clear-search {
    position: absolute !important;

    top: 50% !important;

    left: auto !important;

    right: calc(
        var(--nomu-category-width) +
        var(--nomu-search-button-width) +
        13px
    ) !important;

    bottom: auto !important;

    width: 28px !important;
    min-width: 28px !important;

    height: 28px !important;
    min-height: 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #8792A2 !important;
    background-color: transparent !important;

    border: none !important;
    border-radius: 50% !important;

    outline: none !important;
    box-shadow: none !important;

    transform: translateY(-50%) !important;

    cursor: pointer !important;

    z-index: 60 !important;

    transition:
        color 0.2s ease,
        background-color 0.2s ease !important;
}


/* Líneas de la X */

.wd-search-form.wd-header-search-form
form.searchform
.wd-clear-search::before,

.wd-search-form.wd-header-search-form
form.searchform
.wd-clear-search::after {
    content: "" !important;

    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    display: block !important;

    width: 14px !important;
    height: 1.5px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;
    background-color: currentColor !important;

    border: none !important;
    border-radius: 10px !important;

    font-family: initial !important;
    font-size: 0 !important;

    opacity: 1 !important;
}


/* Primera línea de la X */

.wd-search-form.wd-header-search-form
form.searchform
.wd-clear-search::before {
    transform:
        translate(-50%, -50%)
        rotate(45deg) !important;
}


/* Segunda línea de la X */

.wd-search-form.wd-header-search-form
form.searchform
.wd-clear-search::after {
    transform:
        translate(-50%, -50%)
        rotate(-45deg) !important;
}


/* Hover de la X */

.wd-search-form.wd-header-search-form
form.searchform
.wd-clear-search:hover {
    color: var(--nomu-dark) !important;
    background-color: #F0F3F6 !important;

    box-shadow: none !important;
}


/* Ocultar X cuando el campo está vacío */

.wd-search-form.wd-header-search-form
form.searchform
.wd-clear-search.wd-hide {
    display: none !important;
}


/* ==========================================================
   6. CONTENEDOR DEL SELECTOR DE CATEGORÍA

   Ancho exacto: 200px.
   No tiene borde superior ni inferior propio.
   La línea inferior pertenece al formulario principal.
   ========================================================== */

.wd-search-form.wd-header-search-form
form.searchform
.wd-search-cat {
    position: relative !important;

    inset: auto !important;

    flex:
        0
        0
        var(--nomu-category-width) !important;

    align-self: stretch !important;

    display: block !important;

    width: var(--nomu-category-width) !important;
    min-width: var(--nomu-category-width) !important;
    max-width: var(--nomu-category-width) !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline: 0 !important;

    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline: 0 !important;

    color: var(--nomu-text) !important;
    background-color: var(--nomu-white) !important;

    /*
     * Solo separador izquierdo.
     */
    border: 0 !important;
    border-left: 1px solid var(--nomu-border) !important;

    border-radius: 0 !important;

    outline: none !important;
    box-shadow: none !important;

    box-sizing: border-box !important;

    transform: none !important;

    overflow: visible !important;

    z-index: 20 !important;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease !important;
}


/* Eliminar pseudo-elementos del contenedor */

.wd-search-form.wd-header-search-form
form.searchform
.wd-search-cat::before,

.wd-search-form.wd-header-search-form
form.searchform
.wd-search-cat::after {
    content: none !important;
    display: none !important;
}


/* ==========================================================
   7. BOTÓN VISIBLE DE CATEGORÍA

   Ocupa el 100% real del contenedor.
   No deja espacio antes del botón Buscar.
   ========================================================== */

.wd-search-form.wd-header-search-form
form.searchform
.wd-search-cat-btn {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    inset: 0 !important;
    inset-inline: 0 !important;

    display: flex !important;
    flex: 1 1 auto !important;

    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline: 0 !important;

    padding:
        0
        42px
        0
        20px !important;

    color: var(--nomu-text) !important;
    background-color: transparent !important;

    border: 0 !important;
    border-width: 0 !important;
    border-radius: 0 !important;

    outline: none !important;
    box-shadow: none !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    text-align: left !important;

    box-sizing: border-box !important;

    transform: none !important;

    overflow: hidden !important;

    cursor: pointer !important;

    transition:
        color 0.2s ease,
        background-color 0.2s ease !important;
}


/* Texto de la categoría */

.wd-search-form.wd-header-search-form
form.searchform
.wd-search-cat-btn > span {
    display: block !important;
    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}


/* Eliminar icono anterior */

.wd-search-form.wd-header-search-form
form.searchform
.wd-search-cat-btn::before {
    content: none !important;
    display: none !important;
}


/* Flecha personalizada */

.wd-search-form.wd-header-search-form
form.searchform
.wd-search-cat-btn::after {
    content: "" !important;

    position: absolute !important;

    top: 50% !important;
    right: 18px !important;
    left: auto !important;

    display: block !important;

    width: 7px !important;
    height: 7px !important;

    margin: -5px 0 0 !important;
    padding: 0 !important;

    color: var(--nomu-dark) !important;
    background: transparent !important;

    border: 0 !important;
    border-right: 1px solid currentColor !important;
    border-bottom: 1px solid currentColor !important;

    font-family: initial !important;
    font-size: 0 !important;

    opacity: 1 !important;

    transform: rotate(45deg) !important;

    pointer-events: none !important;
}


/* Hover del selector */

.wd-search-form.wd-header-search-form
form.searchform
.wd-search-cat-btn:hover {
    color: var(--nomu-dark) !important;
    background-color: #F5F7F9 !important;

    border: none !important;
    box-shadow: none !important;
}


/* ==========================================================
   8. BOTÓN BUSCAR

   Pegado directamente al selector de categoría.
   ========================================================== */

.wd-search-form.wd-header-search-form
form.searchform
button.searchsubmit {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    inset: auto !important;
    inset-inline: auto !important;

    flex:
        0
        0
        var(--nomu-search-button-width) !important;

    align-self: stretch !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: var(--nomu-search-button-width) !important;
    min-width: var(--nomu-search-button-width) !important;
    max-width: var(--nomu-search-button-width) !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline: 0 !important;

    padding: 0 20px !important;

    color: var(--nomu-white) !important;
    background-color: var(--nomu-dark) !important;

    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;

    border-radius:
        0
        calc(var(--nomu-search-radius) - 1px)
        calc(var(--nomu-search-radius) - 1px)
        0 !important;

    outline: none !important;
    box-shadow: none !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;

    box-sizing: border-box !important;

    transform: none !important;

    cursor: pointer !important;

    z-index: 30 !important;

    transition:
        color 0.2s ease,
        background-color 0.2s ease !important;
}


/* Eliminar iconos automáticos de Woodmart */

.wd-search-form.wd-header-search-form
form.searchform
button.searchsubmit::before,

.wd-search-form.wd-header-search-form
form.searchform
button.searchsubmit::after {
    content: none !important;
    display: none !important;
}


/* Texto e icono del botón */

.wd-search-form.wd-header-search-form
form.searchform
button.searchsubmit > span {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 0 0 27px !important;

    color: var(--nomu-white) !important;

    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1 !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
}

/* Quitar cualquier lupa anterior creada con pseudo-elementos */
.wd-search-form.wd-header-search-form
form.searchform
button.searchsubmit > span::before,

.wd-search-form.wd-header-search-form
form.searchform
button.searchsubmit > span::after {
    content: none !important;
    display: none !important;
}

/* ==========================================================
   SVG REAL DEL BOTÓN BUSCAR
   ========================================================== */

/* Alinear el SVG y el texto BUSCAR */
.wd-search-form.wd-header-search-form
form.searchform
button.searchsubmit > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #FFFFFF !important;

    line-height: 1 !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* Tamaño del SVG */
.wd-search-form.wd-header-search-form
form.searchform
button.searchsubmit
.nomu-search-icon {
    display: block !important;
    flex: 0 0 18px !important;

    width: 18px !important;
    min-width: 18px !important;

    height: 18px !important;
    min-height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #FFFFFF !important;

    fill: none !important;
    stroke: currentColor !important;

    overflow: visible !important;

    pointer-events: none !important;
}


/* Mantener la lupa blanca en hover */
.wd-search-form.wd-header-search-form
form.searchform
button.searchsubmit:hover
.nomu-search-icon,

.wd-search-form.wd-header-search-form
form.searchform
button.searchsubmit:active
.nomu-search-icon {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* Hover del botón Buscar */

.wd-search-form.wd-header-search-form
form.searchform
button.searchsubmit:hover {
    color: var(--nomu-white) !important;
    background-color: var(--nomu-blue) !important;

    border: none !important;
    box-shadow: none !important;
}


/* Botón presionado */

.wd-search-form.wd-header-search-form
form.searchform
button.searchsubmit:active {
    color: var(--nomu-white) !important;
    background-color: var(--nomu-blue-dark) !important;

    border: none !important;
    box-shadow: none !important;
}


/* ==========================================================
   10. MENÚ DESPLEGABLE DE CATEGORÍAS
   ========================================================== */

.wd-search-form.wd-header-search-form
.wd-dropdown-search-cat {
    position: absolute !important;

    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;

    width: var(--nomu-category-menu-width) !important;
    min-width: var(--nomu-category-menu-width) !important;

    max-width: min(
        var(--nomu-category-menu-width),
        90vw
    ) !important;

    max-height: 420px !important;

    margin: 0 !important;
    padding: 10px !important;

    background-color: var(--nomu-white) !important;

    border: 1px solid #E1E6ED !important;
    border-radius: 10px !important;

    box-shadow:
        0 12px 30px
        rgba(29, 35, 39, 0.12) !important;

    box-sizing: border-box !important;

    overflow-y: auto !important;

    z-index: 9999 !important;
}


/* Lista */

.wd-search-form.wd-header-search-form
.wd-dropdown-search-cat
.wd-sub-menu {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Categoría principal */

.wd-search-form.wd-header-search-form
.wd-dropdown-search-cat
.wd-sub-menu > li > a {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 42px !important;

    margin: 0 !important;
    padding: 10px 12px !important;

    color: var(--nomu-text) !important;
    background-color: transparent !important;

    border: none !important;
    border-radius: 7px !important;

    box-shadow: none !important;

    font-size: 14px !important;
    font-weight: 500 !important;

    box-sizing: border-box !important;

    transition:
        color 0.2s ease,
        background-color 0.2s ease !important;
}


/* Hover de categoría */

.wd-search-form.wd-header-search-form
.wd-dropdown-search-cat
.wd-sub-menu > li > a:hover {
    color: var(--nomu-dark) !important;
    background-color: #F2F5F8 !important;

    box-shadow: none !important;
}


/* Subcategorías */

.wd-search-form.wd-header-search-form
.wd-dropdown-search-cat
.children {
    margin: 2px 0 6px 14px !important;
    padding-left: 12px !important;

    border-left: 1px solid #E3E7ED !important;
}


/* Enlaces de subcategorías */

.wd-search-form.wd-header-search-form
.wd-dropdown-search-cat
.children a {
    display: block !important;

    padding: 9px 12px !important;

    color: #697386 !important;
    background-color: transparent !important;

    border-radius: 7px !important;

    box-shadow: none !important;

    font-size: 13px !important;
}


/* ==========================================================
   11. RESULTADOS AJAX
   ========================================================== */

.wd-search-form.wd-header-search-form
.wd-search-results-wrapper {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


.wd-search-form.wd-header-search-form
.wd-dropdown-results {
    width: 100% !important;
    max-width: 100% !important;

    margin-top: 10px !important;
    padding: 0 !important;

    background-color: var(--nomu-white) !important;

    border: 1px solid #E1E6EE !important;
    border-radius: var(--nomu-results-radius) !important;

    box-shadow:
        0 14px 40px
        rgba(29, 35, 39, 0.12) !important;

    overflow: hidden !important;
}


/* ==========================================================
   12. BLOQUE PRODUCTOS
   ========================================================== */

.nomu-category-results {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 18px 22px 21px !important;

    background-color: var(--nomu-white) !important;

    border-top: 1px solid #EDF0F4 !important;

    box-sizing: border-box !important;
}


/* Título PRODUCTOS */

.nomu-category-results__title {
    display: block !important;

    margin: 0 0 13px !important;

    color: #8996AE !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;
    letter-spacing: 0.035em !important;

    text-transform: uppercase !important;
}


/* ==========================================================
   13. TARJETA DE CATEGORÍA
   ========================================================== */

.nomu-category-card {
    display: grid !important;

    grid-template-columns:
        44px
        minmax(0, 1fr)
        18px !important;

    align-items: center !important;

    column-gap: 14px !important;
    row-gap: 0 !important;

    width: 100% !important;
    min-height: 80px !important;

    margin: 0 0 8px !important;
    padding: 10px 25px 10px 15px !important;

    color: var(--nomu-text) !important;
    background-color: var(--nomu-white) !important;

    border: 1px solid #CED8E6 !important;
    border-radius: 12px !important;

    text-decoration: none !important;

    /*
     * Sin sombra.
     */
    box-shadow: none !important;
    filter: none !important;

    transform: none !important;

    box-sizing: border-box !important;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease !important;
}


.nomu-category-card:last-child {
    margin-bottom: 0 !important;
}


/* Hover sin sombra */

.nomu-category-card:hover,
.nomu-category-card:focus,
.nomu-category-card:active {
    color: var(--nomu-text) !important;
    background-color: #F8FAFC !important;

    border-color: var(--nomu-border-hover) !important;

    outline: none !important;

    box-shadow: none !important;
    filter: none !important;

    transform: none !important;
}


/* ==========================================================
   14. ICONO DE CATEGORÍA
   ========================================================== */

.nomu-category-card__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 44px !important;
    height: 44px !important;

    color: #8795AC !important;
    background-color: #F8FAFC !important;

    border: 1px solid #E1E7EF !important;
    border-radius: 10px !important;

    box-shadow: none !important;

    box-sizing: border-box !important;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease !important;
}


/* SVG */

.nomu-category-card__icon svg {
    display: block !important;

    width: 20x !important;
    height: 20px !important;

    color: inherit !important;

    fill: none !important;
    stroke: currentColor !important;

    transition:
        color 0.2s ease,
        stroke 0.2s ease !important;
}


/* Hover: fondo celeste e icono blanco */

.nomu-category-card:hover
.nomu-category-card__icon,

.nomu-category-card:focus
.nomu-category-card__icon {
    color: var(--nomu-white) !important;
    background-color: var(--nomu-blue) !important;

    border-color: var(--nomu-blue) !important;

    box-shadow: none !important;
}


.nomu-category-card:hover
.nomu-category-card__icon svg,

.nomu-category-card:focus
.nomu-category-card__icon svg {
    color: var(--nomu-white) !important;

    fill: none !important;
    stroke: var(--nomu-white) !important;
}


/* ==========================================================
   15. TEXTOS DE LA CATEGORÍA
   ========================================================== */

.nomu-category-card__text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Nombre */

.nomu-category-card__name {
    display: block !important;

    margin: 0 0 3px !important;
    padding: 0 !important;

    color: #1C2638 !important;

    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}


/* Descripción */

.nomu-category-card__description {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--nomu-secondary-text) !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}


/* ==========================================================
   16. FLECHA DERECHA
   ========================================================== */

.nomu-category-card__arrow {
    position: relative !important;

    display: block !important;

    width: 8px !important;
    height: 8px !important;

    margin: 0 2px 0 auto !important;
    padding: 0 !important;

    border: none !important;

    border-top:
        1.5px solid var(--nomu-dark) !important;

    border-right:
        1.5px solid var(--nomu-dark) !important;

    box-shadow: none !important;

    transform: rotate(45deg) !important;

    transition:
        border-color 0.2s ease,
        transform 0.2s ease !important;
}


/* Hover de la flecha */

.nomu-category-card:hover
.nomu-category-card__arrow,

.nomu-category-card:focus
.nomu-category-card__arrow {
    border-top-color: var(--nomu-blue) !important;
    border-right-color: var(--nomu-blue) !important;

    transform:
        translateX(2px)
        rotate(45deg) !important;
}


/* ==========================================================
   17. ERROR SIN PALABRA NI CATEGORÍA
   ========================================================== */

.wd-search-form.wd-header-search-form
form.searchform.nomu-search-error {
    border-color: #D63638 !important;

    box-shadow:
        0 0 0 1px #D63638 !important;
}


/* ==========================================================
   18. TABLET
   ========================================================== */

@media (max-width: 1024px) and (min-width: 769px) {

    .wd-search-form.wd-header-search-form {
        --nomu-search-height: 56px;
        --nomu-category-width: 200px;
        --nomu-search-button-width: 150px;
        --nomu-category-menu-width: 300px;
    }

}


/* ==========================================================
   19. MÓVIL
   ========================================================== */

@media (max-width: 768px) {

    .wd-search-form.wd-header-search-form {
        --nomu-search-height: 50px;
        --nomu-category-width: 100%;
        --nomu-search-button-width: 120px;
        --nomu-category-menu-width: 100%;
    }


    /* Formulario en dos filas */

    .wd-search-form.wd-header-search-form
    form.searchform {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            var(--nomu-search-button-width) !important;

        grid-template-rows:
            var(--nomu-search-height)
            46px !important;

        height: auto !important;

        gap: 0 !important;
    }


    /* Input */

    .wd-search-form.wd-header-search-form
    form.searchform
    input.s {
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 100% !important;

        padding-left: 16px !important;

        border-radius:
            var(--nomu-search-radius)
            0
            0
            0 !important;
    }


    /* Buscar */

    .wd-search-form.wd-header-search-form
    form.searchform
    button.searchsubmit {
        grid-column: 2 !important;
        grid-row: 1 !important;

        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        padding: 0 12px !important;

        border-radius:
            0
            calc(var(--nomu-search-radius) - 1px)
            0
            0 !important;
    }


    /* Categoría */

    .wd-search-form.wd-header-search-form
    form.searchform
    .wd-search-cat {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        height: 46px !important;

        border-left: none !important;
        border-top: 1px solid var(--nomu-border) !important;

        border-radius:
            0
            0
            var(--nomu-search-radius)
            var(--nomu-search-radius) !important;
    }


    /* Estado activo móvil */

    .wd-search-form.wd-header-search-form
    form.searchform:focus-within
    .wd-search-cat {
        border-top-color: var(--nomu-dark) !important;
        border-left-color: transparent !important;
    }


    /* Botón categoría */

    .wd-search-form.wd-header-search-form
    form.searchform
    .wd-search-cat-btn {
        padding-left: 16px !important;

        border-radius:
            0
            0
            var(--nomu-search-radius)
            var(--nomu-search-radius) !important;
    }


    /* X dentro del input */

    .wd-search-form.wd-header-search-form
    form.searchform
    .wd-clear-search {
        top: calc(
            var(--nomu-search-height) / 2
        ) !important;

        right: calc(
            var(--nomu-search-button-width) + 12px
        ) !important;
    }


    /* Desplegable */

    .wd-search-form.wd-header-search-form
    .wd-dropdown-search-cat {
        right: 0 !important;
        left: 0 !important;

        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }


    /* Resultados */

    .nomu-category-results {
        padding: 16px 12px 18px !important;
    }


    .nomu-category-card {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            16px !important;

        min-height: 72px !important;

        column-gap: 12px !important;

        padding-right: 12px !important;
    }


    .nomu-category-card__icon {
        width: 42px !important;
        height: 42px !important;
    }


    .nomu-category-card__name {
        font-size: 15px !important;
    }


    .nomu-category-card__description {
        font-size: 12px !important;
    }

}


/* ==========================================================
   20. MÓVILES PEQUEÑOS
   ========================================================== */

@media (max-width: 768px) {

    .wd-search-form.wd-header-search-form {
        --nomu-search-button-width: 110px;
    }


    .wd-search-form.wd-header-search-form
    form.searchform
    button.searchsubmit {
        padding: 0 9px !important;
    }


    .wd-search-form.wd-header-search-form
    form.searchform
    button.searchsubmit > span {
        padding-left: 24px !important;

        font-size: 13px !important;
    }

}


/* ==========================================================
   ACORDEÓN WOODMART: FLECHAS PERSONALIZADAS
   ========================================================== */

.wd-accordion.wd-opener-style-arrow {
    --tamano-flecha: 16px;
}

.wd-accordion.wd-opener-style-arrow .wd-accordion-opener,
.wd-accordion.wd-opener-style-arrow .wd-accordion-opener::before,
.wd-accordion.wd-opener-style-arrow .wd-accordion-opener::after {
    color: #2C2C2C !important;
    font-size: var(--tamano-flecha) !important;
}

.wd-accordion {
    --wd-accordion-spacing: 25px!important;
    --wd-row-gap: 0.001px;
    display: flex;
    flex-direction: column;
    gap: var(--wd-row-gap);
}

.wd-accordion-content {
    padding-bottom: var(--wd-accordion-spacing);
	  padding-right: 60px!important;
    transition: opacity .25s ease;
    display: none;
    opacity: 0;
}


/* =====================================
   ACORDEON ESPECIAL
===================================== */

.acordeon-especial .wd-accordion-content {

    padding-right:0px !important;

   

}


/* BOTONES DE TAMAÑO - NOMU */
.wd-swatches-product:has(.wd-swatch.wd-text) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px !important;
    width: 80%;
}

/* Botones inactivos */
.wd-swatches-product .wd-swatch.wd-text {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 14px !important;

    background-color: #F7F5F5 !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    box-shadow: none !important;

    color: #111111 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-align: center;
    white-space: nowrap;
}

/* Tamaño seleccionado */
.wd-swatches-product .wd-swatch.wd-text.wd-active {
    background-color: #FFFFFF !important;
    border-color: #222222 !important;
    color: #111111 !important;
}

/* Evita bordes o efectos adicionales de WoodMart */
.wd-swatches-product .wd-swatch.wd-text::before,
.wd-swatches-product .wd-swatch.wd-text::after {
    display: none !important;
}

/* Hover */
.wd-swatches-product .wd-swatch.wd-text:not(.wd-active):hover {
    background-color: #F7F5F5 !important;
    border-color: transparent !important;
    color: #111111 !important;
}

/* Texto interior */
.wd-swatches-product .wd-swatch.wd-text .wd-swatch-text {
    padding: 0 !important;
    margin: 0 !important;
    font: inherit !important;
    color: inherit !important;
}

/* Ajuste para celulares */
@media (max-width: 768px) {
    .wd-swatches-product:has(.wd-swatch.wd-text) {
        gap: 8px !important;
    }

    .wd-swatches-product .wd-swatch.wd-text {
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 14px !important;
        font-size: 12px !important;
    }
}


/* ============================================================
   14. PÁGINA COMPARE
   ============================================================ */

/* --- COMPARE: Variables, fondo y contenedor principal --- */

body.page-id-829 {
    --nomu-compare-blue: #00A9E0;
    --nomu-compare-dark: #2C2C2C;
    --nomu-compare-text: #5F6670;
    --nomu-compare-line: #E4E8EC;
    --nomu-compare-soft: #F8F8F8;
    --nomu-compare-white: #FFFFFF;
}

body.page-id-829 .main-page-wrapper {
    background-color: var(--nomu-compare-soft) !important;
}

body.page-id-829 #main-content {
    width: 100% !important;
    max-width: 1480px !important;
    margin: 0 auto !important;
    padding: 70px 40px 90px !important;
}

body.page-id-829 #post-829 {
    overflow-x: auto;
    background-color: var(--nomu-compare-white);
    border: 1px solid var(--nomu-compare-line);
    border-radius: 3px;
    box-shadow: 0 14px 38px rgba(44, 44, 44, 0.07);
}

/* --- COMPARE: Estructura general de la tabla --- */

body.page-id-829 .wd-compare-table {
    width: 100% !important;
    min-width: 760px;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: var(--nomu-compare-text);
    font-family: "Martel Sans", Arial, Helvetica, sans-serif !important;
}

body.page-id-829 .wd-compare-table :is(th, td) {
    padding: 24px 28px !important;
    border-right: 1px solid var(--nomu-compare-line) !important;
    border-bottom: 1px solid var(--nomu-compare-line) !important;
    vertical-align: top !important;
}

body.page-id-829 .wd-compare-table tr:last-child :is(th, td) {
    border-bottom: 0 !important;
}

body.page-id-829 .wd-compare-table :is(th, td):last-child {
    border-right: 0 !important;
}

body.page-id-829 .wd-compare-table .compare-field {
    width: 190px !important;
    min-width: 190px !important;
    background-color: #F8F8F8 !important;
    color: var(--nomu-compare-dark) !important;
    font-family: Oswald, Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

body.page-id-829 .wd-compare-table .compare-value {
    min-width: 285px;
    background-color: var(--nomu-compare-white) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

body.page-id-829 .wd-compare-table tr:nth-child(even) .compare-value {
    background-color: #FCFDFD !important;
}

/* --- COMPARE: Cabecera de cada producto --- */

body.page-id-829 .wd-compare-table .compare-basic .compare-value {
    position: relative;
    padding: 30px 28px 34px !important;
    text-align: left !important;
}

body.page-id-829 .wd-compare-table .product-image {
    display: block !important;
    overflow: hidden;
    margin: 6px 0 24px !important;
    background-color: var(--nomu-compare-soft);
    border-radius: 3px;
}

body.page-id-829 .wd-compare-table .product-image img {
    display: block;
    width: 100% !important;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform 0.35s ease;
}

body.page-id-829 .wd-compare-table .product-image:hover img {
    transform: scale(1.025);
}

body.page-id-829 .wd-compare-table .wd-entities-title {
    display: block !important;
    margin-bottom: 10px !important;
    color: var(--nomu-compare-dark) !important;
    font-family: Oswald, Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
}

body.page-id-829 .wd-compare-table .wd-entities-title:hover {
    color: var(--nomu-compare-blue) !important;
}

body.page-id-829 .wd-compare-table .price {
    margin: 0 0 20px !important;
    color: var(--nomu-compare-blue) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* --- COMPARE: Eliminar y botones de compra --- */

body.page-id-829 .wd-compare-remove-action {
    margin-bottom: 16px !important;
}

body.page-id-829 .wd-compare-remove {
    color: #8B929A !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

body.page-id-829 .wd-compare-remove:hover {
    color: var(--nomu-compare-blue) !important;
}

body.page-id-829 .wd-compare-table .add-to-cart-loop {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px;
    margin-top: 2px !important;
    padding: 15px 24px 12px !important;
    color: var(--nomu-compare-white) !important;
    background-color: var(--nomu-compare-blue) !important;
    border: 1px solid var(--nomu-compare-blue) !important;
    border-radius: 3px !important;
    box-shadow: none !important;
}

body.page-id-829 .wd-compare-table .add-to-cart-loop:hover {
    color: var(--nomu-compare-white) !important;
    background-color: var(--nomu-compare-dark) !important;
    border-color: var(--nomu-compare-dark) !important;
}

/* --- COMPARE: Textos descriptivos --- */

body.page-id-829 .wd-compare-table p:last-child {
    margin-bottom: 0 !important;
}

/* --- COMPARE: Tableta --- */

@media (max-width: 1024px) {
    body.page-id-829 #main-content {
        padding: 50px 30px 70px !important;
    }

    body.page-id-829 .wd-compare-table :is(th, td) {
        padding: 22px !important;
    }
}

/* --- COMPARE: Móvil --- */

@media (max-width: 768px) {
    body.page-id-829 #main-content {
        padding: 35px 15px 55px !important;
    }

    body.page-id-829 #post-829 {
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 10px 28px rgba(44, 44, 44, 0.06);
    }

    body.page-id-829 .wd-compare-table {
        min-width: 680px;
    }

    body.page-id-829 .wd-compare-table .compare-field {
        width: 145px !important;
        min-width: 145px !important;
        font-size: 14px !important;
    }

    body.page-id-829 .wd-compare-table .compare-value {
        min-width: 245px;
    }

    body.page-id-829 .wd-compare-table :is(th, td),
    body.page-id-829 .wd-compare-table .compare-basic .compare-value {
        padding: 18px !important;
    }

    body.page-id-829 .wd-compare-table .wd-entities-title {
        font-size: 18px !important;
    }

    body.page-id-829 .wd-compare-table .add-to-cart-loop {
        width: 100% !important;
        padding-right: 14px !important;
        padding-left: 14px !important;
    }
}


/* ============================================================
   15. BOTON CARRITO - PAGINA PRODUCTO INDIVIDUAL
   ============================================================ */


.single_add_to_cart_button.button.alt {
    padding: 12px 30px!important;
    transition: background-color 0.3s ease;
}

.single_add_to_cart_button.button.alt:hover {
    background-color: #2c2c2c;
}

.single-product div.quantity {
    --wd-form-height: 50px;
    display: inline-flex;
    vertical-align: top;
    white-space: nowrap;
}


.woodmart-title-container {
    max-width: 500px!important;
}













/* =====================================================
NOMU PRODUCT SUMMARY STICKY
COLUMNA DERECHA FIJA
===================================================== */


@media(min-width:1025px){


/* Columna derecha del producto */

#nomu-product-shell 
.elementor-element-435b6809 {


    position:sticky !important;


    top:120px !important;


    align-self:flex-start !important;


    height:max-content !important;


}



/* Liberar restricciones Elementor */

#nomu-product-shell,
#nomu-product-shell .e-con,
#nomu-product-shell .e-con-inner,
#nomu-product-shell .elementor-widget-container {


    overflow:visible !important;


}



}





/* =====================================================
MÓVIL Y TABLET
SIN STICKY
===================================================== */


@media(max-width:1024px){


#nomu-product-shell 
.elementor-element-435b6809 {


    position:relative !important;


    top:auto !important;


}


}

/* =====================================================
   NOMU PRODUCT GALLERY
   GRID 2 COLUMNAS + STICKY
   COMPATIBLE CON WPC ADDITIONAL VARIATION IMAGES
===================================================== */


/* =====================================================
   1. LIMPIEZA BASE DE WOODMART / WOOCOMMERCE
===================================================== */


.woocommerce-product-gallery--wpcvi {

    width:100% !important;

}



.woocommerce-product-gallery--wpcvi
.woocommerce-product-gallery__wrapper {

    margin:0 !important;

    padding:0 !important;

}



/* =====================================================
   2. GALERÍA GRID 2 COLUMNAS
===================================================== */


.woocommerce-product-gallery--wpcvi
.woocommerce-product-gallery__wrapper {


    display:grid !important;


    grid-template-columns:
    repeat(2, minmax(0,1fr)) !important;


    gap:16px !important;


}




/* Cada imagen */

.woocommerce-product-gallery--wpcvi
.woocommerce-product-gallery__image {


    width:100% !important;


    margin:0 !important;


    float:none !important;


}



/* Imagen completa */

.woocommerce-product-gallery--wpcvi
.woocommerce-product-gallery__image img {


    width:100% !important;


    height:auto !important;


    display:block !important;


    object-fit:contain !important;


}






/* =====================================================
   3. QUITAR RESTRICCIONES DE COLUMNAS WOODMART
===================================================== */


.woocommerce-product-gallery--columns-4
.woocommerce-product-gallery__wrapper,


.woocommerce-product-gallery--columns-3
.woocommerce-product-gallery__wrapper {


    display:grid !important;


    grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;


}





/* =====================================================
   4. GALERÍA STICKY
   SOLO ESCRITORIO
===================================================== */


@media(min-width:1025px){


    .woocommerce-product-gallery--wpcvi {


        position:sticky !important;


        top:100px !important;


        align-self:flex-start !important;


    }



}






/* =====================================================
   5. PERMITIR STICKY
   EVITA BLOQUEO DE WOODMART
===================================================== */


.single-product .product,
.single-product .product-image-summary,
.single-product .summary,
.single-product .woocommerce-product-gallery {


    overflow:visible !important;


}






/* =====================================================
   6. ESPACIADO PREMIUM TIPO BEIS
===================================================== */


.woocommerce-product-gallery--wpcvi
.woocommerce-product-gallery__image {


    background:#ffffff;


}













/* =====================================================
   MOBILE
   CAMBIAR ACORDEÓN A SLIDER
===================================================== */


@media(max-width: 768px){



    /* Wrapper que genera el JS */

    .acordeon-slider-wrapper{


        position:relative !important;

        width:100% !important;


    }




    /* Contenedor principal */

    #acordeon-content{


        display:flex !important;


        flex-direction:row !important;


        flex-wrap:nowrap !important;


        overflow-x:auto !important;


        overflow-y:hidden !important;



        scroll-snap-type:x mandatory !important;


        scroll-behavior:smooth !important;



        gap:0px !important;



        width:100% !important;



        scrollbar-width:none !important;



    }



    #acordeon-content::-webkit-scrollbar{


        display:none !important;


    }





    /* Cada tarjeta */

    #acordeon-content .acordeon-item{


        flex:0 0 100% !important;


        width:100% !important;


        min-width:100% !important;


        max-width:100% !important;



        scroll-snap-align:center !important;



        display:flex !important;


        flex-direction:column !important;



    }





    /* Mantener contenido abierto */

    #acordeon-content .contenido-oculto{


        display:block !important;


        height:auto !important;


        max-height:none !important;



        opacity:1 !important;


        visibility:visible !important;



        overflow:visible !important;


    }







    /* =================================================
       FLECHAS DEL SLIDER
    ================================================= */



    .acordeon-slider-navigation{


        position:absolute !important;



        top:2px !important;


        left:0 !important;



        width:100% !important;


        height:100% !important;



        pointer-events:none !important;



        z-index:999 !important;



    }






    .acordeon-slider-arrow{


        pointer-events:auto !important;



        position:absolute !important;



        top:50% !important;



        transform:translateY(-50%) !important;



        width:42px !important;



        height:42px !important;



        padding:0 !important;



        margin:0 !important;



        display:flex !important;



        align-items:center !important;



        justify-content:center !important;



        border-radius:50% !important;



        border:1px solid #ffffff !important;



        background:transparent !important;



        color:#ffffff !important;



        font-family:Arial, sans-serif !important;



        font-size:28px !important;



        font-weight:300 !important;



        line-height:1 !important;



        box-shadow:

        0 5px 20px rgba(0,0,0,.18) !important;



        cursor:pointer !important;



        appearance:none !important;



        -webkit-appearance:none !important;



        transition:

        transform .3s ease,

        box-shadow .3s ease !important;



    }






   






    .acordeon-slider-prev{


        left:10px !important;


    }






    .acordeon-slider-next{


        right:10px !important;


    }




}








/* =====================================
   AJUSTE DE ICONOS DENTRO DEL CIRCULO
===================================== */

@media(max-width: 768px){





    /* Mover flecha izquierda */
    .acordeon-slider-prev{


        padding-right:2px !important;
			padding-bottom:3px !important;


    }



    /* Mover flecha derecha */
    .acordeon-slider-next{


        padding-left:2px !important;
			padding-bottom:3px !important;
			


    }



}








/* =====================================================
   ACORDEÓN - CONTROL DE ANCHOS
   PORTÁTIL Y TABLET
===================================================== */


/* =====================================================
   PORTÁTIL
   1025px - 1366px
===================================================== */

@media (max-width:1366px) and (min-width:1025px){


    #acordeon-content{

        display:flex !important;

        

    }



    #acordeon-content .acordeon-item{


        flex:0.55 !important;

        transition:flex .5s ease !important;


    }




    #acordeon-content .acordeon-item.is-active{


        flex:2 !important;


    }



}





/* =====================================================
   TABLET
   769px - 1024px
===================================================== */

@media (max-width:1024px) and (min-width: 769px){



    #acordeon-content{


        display:flex !important;

       


    }



    #acordeon-content .acordeon-item{


        flex:0.45 !important;


        transition:flex .5s ease !important;


    }




    #acordeon-content .acordeon-item.is-active{


        flex:2.5 !important;


    }



}	







/* =====================================================
   CONTROL DE ALTURA ACORDEÓN RESPONSIVE
===================================================== */


/* =====================================
   PORTÁTIL
   1025px - 1366px
===================================== */

@media (max-width:1366px) and (min-width:1025px){


    #acordeon-content .acordeon-item{


        height:700px !important;

        min-height:700px !important;


    }


    #acordeon-content .acordeon-item.is-active{


        height:700px !important;

    }


}



/* =====================================
   TABLET
   769px - 1024px
===================================== */

@media (max-width:1024px) and (min-width:769px){


    #acordeon-content .acordeon-item{


        height:600px !important;

        min-height:600px !important;


    }


    #acordeon-content .acordeon-item.is-active{


        height:600px !important;


    }


}



/* =====================================
   MOBILE
   Hasta 768px
===================================== */

@media(max-width:768px){


    #acordeon-content .acordeon-item{


        height:500px !important;

        min-height:500px !important;


    }


    #acordeon-content .acordeon-item.is-active{


        height:500px !important;


    }

}	



/* =====================================
   WOODMART CARRUSEL
   PORTÁTIL = 3 PRODUCTOS
===================================== */

@media (max-width:1366px) and (min-width:1025px){


    /* Si la clase está en el widget */
    .productos-portatil .wd-carousel{

        --wd-col-lg:3 !important;

    }


    /* Si la clase está directamente en el carrusel */
    .wd-carousel.productos-portatil{

        --wd-col-lg:3 !important;

    }



    /* Forzar ancho visual */

    .productos-portatil .wd-carousel-item{

        width:33.333% !important;

    }


}


/* =====================================
   PORTÁTIL
   1025px - 1366px
   2 PRODUCTOS
===================================== */

@media (max-width:1366px) and (min-width:1025px){

    .productos-portatil-2 .wd-carousel-item{

        width:50% !important;

    }


    .productos-portatil-2 .wd-carousel{

        --wd-col-lg:2 !important;

    }

}



/* =====================================
   TABLET
   769px - 1024px
   3 PRODUCTOS
===================================== */

@media (max-width:1024px) and (min-width:769px){

    .productos-portatil-2 .wd-carousel-item{

        width:33.3333% !important;

    }


    .productos-portatil-2 .wd-carousel{

        --wd-col-md:3 !important;

    }

}








/* =====================================
   TOP BAR MOBILE / TABLET
   CONTROL DE ALTURA COMPLETA
===================================== */


/* TABLET */

@media (max-width:1024px) and (min-width:769px){

    .whb-row.whb-top-bar{

        min-height:40px !important;

        height:40px !important;

    }


    .whb-top-bar .whb-top-bar-inner{

        min-height:40px !important;

        height:40px !important;

    }


}



/* MOBILE */

@media(max-width:768px){


    .whb-row.whb-top-bar{

        min-height:30 !important;

        height:30px !important;

    }


    .whb-top-bar .whb-top-bar-inner{

        min-height:30px !important;

        height:30px !important;

    }


}



/* =====================================
   MENU LATERAL FULL WIDTH MOBILE
===================================== */

@media(max-width:768px){

    .wd-side-hidden{

        width:80vw !important;

        max-width:80vw !important;

    }


    .wd-side-hidden.wd-opened{

        width:80vw !important;

    }

}





/* =====================================================
   WOODMART OFF CANVAS ENCIMA DE TODO
   TABLET + MOBILE
===================================================== */

@media (max-width:1024px){

    body .wd-side-hidden,
    body .wd-side-hidden.wd-opened,
    body .mobile-nav,
    body .wd-nav-mobile{

        z-index:999999 !important;

    }


    body .wd-close-side{

        z-index:999998 !important;

    }

}




/* =====================================
   SWATCH TAMAÑO PRODUCTO - NOMU
   MOBILE ADAPTADO AL TEXTO
===================================== */

@media(max-width:768px){


    /* Contenedor completo */
    .wd-swatches-product:has(.wd-swatch.wd-text){

        width:100% !important;

        display:grid !important;

        grid-template-columns:auto auto auto !important;

        gap:12px !important;

    }



    /* Botones adaptados al contenido */

    .wd-swatches-product.has-text .wd-swatch{


        width:auto !important;

        min-width:auto !important;


        padding-left:20px !important;

        padding-right:20px !important;


        white-space:nowrap !important;


    }


}



@media (max-width:768px){

    .title-after_title.reset-last-child.wd-fontsize-s {

        font-size:15px !important;
				margin-left: 30px!important;
    }

    .title-after_title.reset-last-child.wd-fontsize-s p {

        font-size:15px !important;
			margin-left: 30px!important;

    }

}






/* =====================================
   PAGE TITLE + BREADCRUMBS WOODMART
   RESPONSIVE
===================================== */


/* Desktop base */
.wd-page-title .entry-title {

    font-size:60px !important;

}


/* Breadcrumbs */
.wd-page-title .wd-breadcrumbs {

    font-size:15px !important;

}



/* Portátil */
@media (max-width:1366px) and (min-width:1025px){

    .wd-page-title .entry-title {

        font-size:50px !important;

    }
.wd-page-title .container {
    
    
	padding: 60px 0px !important;
    
}

    .wd-page-title .wd-breadcrumbs {

        font-size:14px !important;

    }

}



/* Tablet */
@media (max-width:1024px) and (min-width:769px){

    .wd-page-title .entry-title {

        font-size:40px !important;

    }
.wd-page-title .container {
    
    gap: 10px !important;
	padding: 40px 0px !important;
    
}

    .wd-page-title .wd-breadcrumbs {

        font-size:13px !important;

    }

.archive .wd-page-title .container {
    gap: 20px !important;
}
	
	

}



/* Mobile */
@media(max-width:768px){

    .wd-page-title .entry-title {

        font-size:28px !important;

    }
	
	.wd-page-title .container {
    
    gap: 10px !important;
		
    
}

.archive .wd-page-title .container {
    gap: 15px !important;
}
	
	
		.wd-page-title  {
    
   
		padding: 30px 0px !important;
    
}

    .wd-page-title .wd-breadcrumbs {

        font-size:12px !important;

    }

}




/* =====================================
   CHECKOUT STEPS - FONT SIZE
===================================== */


/* 🖥️ Desktop */
.wd-checkout-steps li span {

    font-size:35px !important;


}

    .title-size-large {
        --wd-title-sp: 80px!important;
        --wd-title-font-s: 78px;
    }



/* 💻 Portátil */
@media (max-width:1366px) and (min-width:1025px){

    .wd-checkout-steps li span {

        font-size:26px !important;

    }
	
	.title-size-large {
        --wd-title-sp: 30px!important;

        --wd-title-font-s: 78px;
    }

}



/* 📱 Tablet */
@media (max-width:1024px) and (min-width:769px){

    .wd-checkout-steps li span {

        font-size:20px !important;

    }
	
	    .title-size-large {
        --wd-title-sp: 30px!important;

        --wd-title-font-s: 78px;
    }

}


/* Mobile */
@media(max-width:768px){

	
	.wd-checkout-steps li span {
        font-size: 25px !important;
    }
	
	}