:root {
	--wd-text-font: "DNI next lt", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 100;
	--wd-text-color: rgb(0,0,0);
	--wd-text-font-size: 16px;
	--wd-title-font: "DNI next", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: #242424;
	--wd-entities-title-font: "DNI Next", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgba(51, 51, 51, 0.65);
	--wd-alternative-font: var(--wd-text-font);
	--wd-widget-title-font: "DNI Next", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: none;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 14px;
	--wd-header-el-font: "DNI Next", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 600;
	--wd-header-el-transform: none;
	--wd-header-el-font-size: 13px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(0,0,0);
	--wd-alternative-color: rgb(194,209,151);
	--btn-default-font-family: "DNI nest bold", Arial, Helvetica, sans-serif;
	--btn-default-bgcolor: rgb(36,36,36);
	--btn-default-bgcolor-hover: rgb(51,51,51);
	--btn-accented-bgcolor: rgb(0,0,0);
	--btn-accented-bgcolor-hover: rgb(30,13,13);
	--btn-font-weight: 500;
	--btn-transform: capitalize;
	--btn-font-size: 14px;
	--wd-form-brd-width: 1px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: rgb(161,207,222);
	--wd-link-color-hover: rgb(145,186,199);
	--wd-sticky-btn-height: 95px;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg, :is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg :is(.wd-product,.wd-cat) {
	--wd-prod-bg:rgb(255,255,255);
	--wd-bordered-bg:rgb(255,255,255);
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 169px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgb(36,36,36);
	background-image: none;
}
html .page-title > .container > .title, html .page-title .wd-title-wrapp > .title {
	font-size: 28px;
}
.whb-top-bar .wd-nav.wd-nav-secondary > li > a {
	font-size: 13px;
}
html .wd-nav-mobile > li > a, html .wd-nav-mobile .wd-sub-menu li a {
	text-transform: none;
}
html .wd-checkout-steps, html .product.wd-cat .wd-entities-title, html .product.wd-cat.cat-design-replace-title .wd-entities-title, html .wd-masonry-first .wd-cat:first-child .wd-entities-title, html table th {
	text-transform: none;
}
:is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) {
	background-color: rgb(255,255,255);
	background-image: none;
}
.woodmart-archive-shop:not(.single-product) :is(.wd-page-content, .whb-header) {
	background-color: rgb(255,255,255);
	background-image: none;
}
.single-product :is(.wd-page-content, .whb-header) {
	background-color: rgb(255,255,255);
	background-image: none;
}
.woodmart-archive-blog :is(.wd-page-content, .whb-header) {
	background-color: rgb(245,247,248);
	background-image: none;
}
.single-post :is(.wd-page-content, .whb-header) {
	background-color: rgb(245,247,248);
	background-image: none;
}
.woodmart-archive-portfolio :is(.wd-page-content, .whb-header) {
	background-color: rgb(245,247,248);
	background-image: none;
}
.single-portfolio :is(.wd-page-content, .whb-header) {
	background-color: rgb(245,247,248);
	background-image: none;
}
body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform {
	--wd-form-bg: rgb(255,255,255);
}
.wd .product-label.onsale {
	background-color: rgb(221,51,51);
}
.wd .product-label.new {
	background-color: rgb(194,209,151);
}
.wd .product-label.featured {
	background-color: rgb(221,51,51);
	color: rgb(255,255,255);
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
.woocommerce-product-gallery {
	--wd-gallery-gap: 4px;
}

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

}

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

}
:root{
--wd-form-brd-radius: 5px;
--btn-default-color: #fff;
--btn-default-color-hover: #fff;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 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-page-title {
background-color: rgb(245,247,248);
}

@font-face {
	font-family: "DNI Next";
	src: url("//test.cxsupplies.com/wp-content/uploads/2026/09/DIN-Next-W10-Light.woff") format("woff");
	font-weight: 400;
	font-display:swap;
	font-style: normal;
}

@font-face {
	font-family: "DNI next";
	src: url("//test.cxsupplies.com/wp-content/uploads/2026/09/DIN-Next-W01-Regular.woff") format("woff");
	font-weight: 500;
	font-display:swap;
	font-style: normal;
}

@font-face {
	font-family: "DNI nest bold";
	src: url("//test.cxsupplies.com/wp-content/uploads/2026/10/DIN-Next-W01-Bold.woff") format("woff");
	font-weight: 700;
	font-display:swap;
	font-style: normal;
}

@font-face {
	font-family: "DNI next";
	src: url("//test.cxsupplies.com/wp-content/uploads/2026/10/DIN-Next-W01-Bold-1.woff") format("woff");
	font-weight: 700;
	font-display:swap;
	font-style: normal;
}

@font-face {
	font-family: "DNI next";
	src: url("//test.cxsupplies.com/wp-content/uploads/2026/10/DIN-Next-W10-Medium.woff") format("woff");
	font-weight: 600;
	font-display:swap;
	font-style: normal;
}

@font-face {
	font-family: "DNI Next 23";
	src: url("//test.cxsupplies.com/wp-content/uploads/2026/10/DINNextLTW23-Light.woff2") format("woff");
	font-weight: 400;
	font-display:swap;
	font-style: normal;
}

@font-face {
	font-family: "DNI next";
	src: url("//test.cxsupplies.com/wp-content/uploads/2026/10/DIN-Next-LT-W23-Ultra-Light-a8986eda8ab7ed5af0935efe2d826fb8cdee20dc5839f4bc57e2fa12fecf57b5.woff") format("woff");
	font-weight: 100;
	font-display:swap;
	font-style: normal;
}

@font-face {
	font-family: "DIN Next LT W23";
	src: url("//test.cxsupplies.com/wp-content/uploads/2026/10/DIN-Next-LT-W23-Regular-29d5cc9399fee3fea467ed7bcb64db8591092806574f0c4c583b57c48bfccaf6-1.ttf") format("woff");
	font-weight: 400;
	font-display:swap;
	font-style: normal;
}

@font-face {
	font-family: "DIN Next LT W23";
	src: url("//test.cxsupplies.com/wp-content/uploads/2026/10/DIN-Next-LT-W23-Medium-ca49fea6b67f596f0f4ed9f132aaf9b6db049248fc97f6bb626c1861bcbd7ad2.ttf") format("woff");
	font-weight: 500;
	font-display:swap;
	font-style: normal;
}

@font-face {
	font-family: "DNI next lt";
	src: url("//test.cxsupplies.com/wp-content/uploads/2026/10/DIN-Next-LT-W23-Light-595b53ec7d12eb97d02d3bfb51799bbef5d3012813963584b1da9f84edec8fae.woff") format("woff");
	font-weight: 300;
	font-display:swap;
	font-style: normal;
}

/* =========================================
   MARYS BEAUTY - ADD TO CART
   NEGRO → BLANCO
   ========================================= */

.efecto-relleno .single_add_to_cart_button {
    position: relative !important;
    overflow: hidden !important;

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

    background: #111 !important;
    border: 1px solid #111 !important;
    border-radius: 0 !important;

    color: #fff !important;

    box-shadow: none !important;

    z-index: 1 !important;
}


/* Fondo blanco */

.efecto-relleno .single_add_to_cart_button::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    width: 0 !important;

    background: #fff !important;

    transition: width .45s cubic-bezier(.4,0,.2,1) !important;

    z-index: -1 !important;
}


/* Hover */

.efecto-relleno .single_add_to_cart_button:hover::before {
    width: 100% !important;
}


/* =========================================
   TEXTO - TODAS LAS POSIBLES ESTRUCTURAS
   ========================================= */

.efecto-relleno .single_add_to_cart_button,
.efecto-relleno .single_add_to_cart_button:hover,
.efecto-relleno .single_add_to_cart_button:focus,
.efecto-relleno .single_add_to_cart_button:active,

.efecto-relleno .single_add_to_cart_button span,
.efecto-relleno .single_add_to_cart_button:hover span,

.efecto-relleno .single_add_to_cart_button .wd-btn-text,
.efecto-relleno .single_add_to_cart_button:hover .wd-btn-text {
    color: #fff !important;
}


/* Texto negro durante hover */

.efecto-relleno .single_add_to_cart_button:hover,
.efecto-relleno .single_add_to_cart_button:hover span,
.efecto-relleno .single_add_to_cart_button:hover .wd-btn-text {
    color: #111 !important;
}


/* =========================================
   BORDE SIEMPRE NEGRO
   ========================================= */

.efecto-relleno .single_add_to_cart_button,
.efecto-relleno .single_add_to_cart_button:hover,
.efecto-relleno .single_add_to_cart_button:focus,
.efecto-relleno .single_add_to_cart_button:active {
    border: 1px solid #111 !important;
    border-color: #111 !important;
    box-shadow: none !important;
}


/* =========================================
   EVITAR QUE WOODMART CAMBIE EL TEXTO
   ========================================= */

.efecto-relleno .single_add_to_cart_button:hover::after {
    color: #111 !important;
}
/* =========================================
   MARYS BEAUTY - CONTENEDOR DE CANTIDAD
   ========================================= */

.efecto-relleno form.cart .quantity {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 130px !important;
    height: 48px !important;

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

    border: 1px solid #d9d9d9 !important;
    border-radius: 0 !important;

    background: #fff !important;

    box-shadow: none !important;
}

/* BOTÓN MENOS Y MÁS */
.efecto-relleno .quantity .minus,
.efecto-relleno .quantity .plus {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 50px !important;
    height: 50px !important;

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

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

    background: transparent !important;
    color: #222 !important;

    font-size: 20px !important;
    font-weight: 300 !important;

    box-shadow: none !important;

    cursor: pointer !important;
}

/* HOVER DE + Y - */
.efecto-relleno .quantity .minus:hover,
.efecto-relleno .quantity .plus:hover {
    background: #f5f5f5 !important;
    color: #000 !important;
}

/* NÚMERO CENTRAL */
.efecto-relleno .quantity input.qty {
    display: block !important;

    width: 55px !important;
    height: 45px !important;

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

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

    background: transparent !important;

    text-align: center !important;

    color: #222 !important;
    font-size: 17px !important;
    font-weight: 400 !important;

    box-shadow: none !important;
}

/* QUITAR FLECHAS DEL INPUT */
.efecto-relleno .quantity input.qty::-webkit-inner-spin-button,
.efecto-relleno .quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.efecto-relleno .quantity input.qty {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

/* =========================================
   MARYS BEAUTY - PRODUCTOS SIMPLES Y VARIABLES
   ========================================= */

/* PRODUCTO SIMPLE */
.efecto-relleno form.cart:not(.variations_form) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
}

/* PRODUCTO VARIABLE */
.efecto-relleno form.cart.variations_form .woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
}

/* CANTIDAD */
.efecto-relleno form.cart .quantity {
    flex: 0 0 auto !important;
    margin-bottom: 14px !important;
}

/* BOTÓN AGREGAR AL CARRITO */
.efecto-relleno form.cart .single_add_to_cart_button {
    flex: 0 0 auto !important;
    width: 100% !important;
}

/* =========================================
   PRODUCTO VARIABLE - BOTÓN DESACTIVADO
   ========================================= */

.efecto-relleno form.cart .single_add_to_cart_button.disabled,
.efecto-relleno form.cart .single_add_to_cart_button.wc-variation-selection-needed {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* =========================================
   CUANDO YA SE SELECCIONÓ UNA VARIACIÓN
   ========================================= */

.efecto-relleno
form.cart.variations_form
.woocommerce-variation-add-to-cart-enabled
.single_add_to_cart_button {
    opacity: 1 !important;
    cursor: pointer !important;
}

/*orden de los precios*/

.price {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-direction: row-reverse !important;
}

.price del {
    order: 1 !important;
}

.price ins {
    order: 2 !important;
}
/* Forzar al contenedor flotante Premium de YITH a volverse un Grid de Tienda */
.yith-wcas-suggestions, 
.yith-ajax-search-results {
    width: 800px !important; /* Ancho de la caja de resultados flotante */
    max-height: 550px !important;
    overflow-y: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* Configura 2 columnas de tarjetas */
    gap: 20px !important;
    padding: 20px !important;
    background: #fff !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
    border: 1px solid #eaeaea !important;
    z-index: 999999 !important;
}

/* Resetear las filas nativas del plugin para que no aplasten la tarjeta */
.yith-wcas-suggestion, 
.yith-wcas-suggestion a {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    height: auto !important;
}

/* Asegurar que la tarjeta de WoodMart use el 100% del espacio del Grid */
.wd-search-custom-loop .product-grid-item {
    margin-bottom: 0 !important;
    width: 100% !important;
}
/* =========================================
   MARYS BEAUTY
   LÍNEA DEL MENÚ WOODMART
   ========================================= */

.wd-nav-style-underline .wd-nav-link::after {
    top: 220px !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background-color: #111 !important;
}
/* El enlace pasa a ser el ancla de la línea y ocupa toda la altura del header */
.whb-header .wd-header-nav .wd-nav > li > a {
  position: relative !important;
  height: 100% !important;
  align-items: center;
}

/* El texto deja de ser el ancla */
.whb-header .wd-header-nav .wd-nav > li > a .nav-link-text {
  position: static !important;
}

/* La línea baja hasta el borde gris del header */
.whb-header .wd-header-nav .wd-nav > li > a .nav-link-text::after {
  position: absolute !important;
  top: auto !important;
  bottom: -21px !important;   /* -1px para que tape la línea gris */
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  z-index: 2;
}

.wd-add-btn:not(.wd-wishlist-btn) .wd-action-icon:before{
  content:"+" !important;
  font-family:Arial,sans-serif !important;
  font-size:35px !important;
  font-weight:300 !important;
  line-height:1 !important;
	background-color: transparent;
}
/* =========================================
   MARYS BEAUTY - BOTONES GLOBAL
   NEGRO → BLANCO
   ========================================= */

.wd-button-wrapper > a.btn {
    position: relative !important;
    overflow: hidden !important;

    background: #111 !important;
    border: 1px solid #111 !important;
    border-radius: 0 !important;

    color: #fff !important;
    box-shadow: none !important;

    z-index: 1 !important;
}


/* Fondo blanco animado */

.wd-button-wrapper > a.btn::before {
    content: "" !important;

    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;

    width: 0 !important;

    background: #fff !important;

    transition: width .45s cubic-bezier(.4, 0, .2, 1) !important;

    z-index: -1 !important;
}


/* Hover */

.wd-button-wrapper > a.btn:hover::before {
    width: 100% !important;
}


/* Texto */

.wd-button-wrapper > a.btn .wd-btn-text {
    position: relative !important;
    z-index: 2 !important;

    color: #fff !important;

    transition: color .45s cubic-bezier(.4, 0, .2, 1) !important;
}


/* Texto negro en hover */

.wd-button-wrapper > a.btn:hover .wd-btn-text {
    color: #111 !important;
}


/* Borde siempre negro */

.wd-button-wrapper > a.btn,
.wd-button-wrapper > a.btn:hover,
.wd-button-wrapper > a.btn:focus,
.wd-button-wrapper > a.btn:active {
    border-color: #111 !important;
    box-shadow: none !important;
}
/* =========================================
   WOODMART - STICKY HEADER
   TRANSPARENTE/BLANCO → BLANCO/NEGRO
   ========================================= */

/* Fondo blanco al hacer scroll */
body .whb-sticked .whb-row {
    background-color: #ffffff !important;
}

/* Menú */
body .whb-sticked .wd-nav-header > li > a,
body .whb-sticked .wd-nav-header > li > a span {
    color: #111111 !important;
}

/* Hover del menú */
body .whb-sticked .wd-nav-header > li:hover > a,
body .whb-sticked .wd-nav-header > li:hover > a span {
    color: #111111 !important;
}

/* Textos del header */
body .whb-sticked .wd-tools-text,
body .whb-sticked .wd-header-el,
body .whb-sticked .wd-header-nav span {
    color: #111111 !important;
}

/* Iconos: búsqueda, cuenta, carrito, wishlist */
body .whb-sticked .wd-tools-element {
    color: #111111 !important;
    --wd-header-el-color: #111111 !important;
}

/* SVG de los iconos */
body .whb-sticked .wd-tools-element svg {
    color: #111111 !important;
    stroke: currentColor !important;
}

/* Flechas del menú */
body .whb-sticked .wd-nav-header > li.menu-item-has-children > a::after {
    color: #111111 !important;
}
body .whb-sticked .wd-nav-header > li.menu-item-has-children > a::after {
    display: none !important;
}
/* =========================================
   WOODMART - INDICADOR SOLO AL HACER HOVER
   NEGRO
   ========================================= */

/* Quitar el indicador permanente del elemento activo */
.wd-nav.wd-style-underline > li.current-menu-item > a .nav-link-text::after,
.wd-nav.wd-style-underline > li.current-menu-ancestor > a .nav-link-text::after,
.wd-nav.wd-style-underline > li.current-menu-parent > a .nav-link-text::after {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Indicador solamente al pasar el mouse */
.wd-nav.wd-style-underline > li:hover > a .nav-link-text::after {
    opacity: 1 !important;
    visibility: visible !important;
    background-color: #111111 !important;
}
/* =========================================
   WOODMART - ELIMINAR INDICADOR DE SUBMENÚ
   / MEGA MENU - DESKTOP
   ========================================= */

.wd-nav > li:is(.wd-has-children, .menu-item-has-children) > .wd-nav-opener {
    display: none !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wd-nav > li:is(.wd-has-children, .menu-item-has-children) > a::after {
    display: none !important;
    content: none !important;
}
/* =========================================
   MARYS BEAUTY
   MINIATURAS - GALERÍA WOODMART (SIMPLES Y VARIABLES)
   Estilo tipo darbeauty.com
   =========================================
   - Miniaturas de 70x70 sin borde visible
   - Miniatura activa con marco oscuro y espacio blanco interior
   - Separación vertical de 24px entre miniaturas
   - Selectores sin ".woocommerce-product-gallery" para que sigan
     aplicando cuando Woodmart repinta la galería al cambiar de variación
   ========================================= */

.wd-gallery-thumb { padding: 0 !important; }

.wd-gallery-thumb .wd-carousel-item {
  padding: 0 !important;
  margin: 0 0 5px 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.wd-gallery-thumb .wd-carousel-item img {
  display: block !important;
  width: 50px !important;
  height: 50px !important;
  padding: 0 !important;
  margin: 0 !important;
  object-fit: contain !important;
  background: #fff !important;
  border: 0px solid #000 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

.thumbs-position-left .wd-gallery-thumb .wd-carousel {
  margin-inline: 0;
  touch-action: pan-x;
  height: calc(var(--wd-thumbs-height, 520px) - 130px) !important;
  min-height: 150px !important;
}

.wd-gallery-thumb .wd-carousel-item.wd-thumb-active img,
.wd-gallery-thumb .wd-thumb-active img {
  border: 2px solid #000 !important;
}

/* Flechas */
.wd-gallery-thumb .wd-nav-arrows {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 18px !important;
  margin-top: 5px !important;
}
.wd-gallery-thumb .wd-nav-arrows button {
  position: static !important;
  width: 28px !important;
  height: 25px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #222 !important;
}
.wd-gallery-thumb .wd-nav-arrows button:hover {
  background: transparent !important;
  color: #000 !important;
}
/* =========================================================
   WOODMART - ICONOS DEL SELECTOR DE VISTA
   ========================================================= */

/* CONTENEDOR */
.wd-products-shop-view {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;

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


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

.wd-products-shop-view > .shop-view {
    position: relative !important;

    display: block !important;

    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;

    height: 24px !important;

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

    font-size: 0 !important;
    line-height: 0 !important;

    flex: 0 0 24px !important;

    color: #999 !important;

    background: none !important;
}


/* QUITAR ICONO ORIGINAL DE WOODMART */
.wd-products-shop-view > .shop-view::before {
    content: none !important;
    display: none !important;
}


/* ÁREA DEL NUEVO ICONO */
.wd-products-shop-view > .shop-view::after {
    content: "" !important;

    position: absolute !important;

    left: 3px !important;
    top: 3px !important;

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

    display: block !important;

    background-repeat: no-repeat !important;

    color: currentColor !important;
}


/* =========================================================
   ORDEN
   ========================================================= */

.wd-products-shop-view > .per-row-2 {
    order: 1 !important;
}

.wd-products-shop-view > .per-row-4 {
    order: 2 !important;
}

.wd-products-shop-view > .per-row-list {
    order: 3 !important;
}


/* =========================================================
   ICONO 2 x 2
   ========================================================= */

.wd-products-shop-view > .per-row-2::after {
    background:
        linear-gradient(currentColor, currentColor)
        0 0 / 8px 8px no-repeat,

        linear-gradient(currentColor, currentColor)
        10px 0 / 8px 8px no-repeat,

        linear-gradient(currentColor, currentColor)
        0 10px / 8px 8px no-repeat,

        linear-gradient(currentColor, currentColor)
        10px 10px / 8px 8px no-repeat !important;
}


/* =========================================================
   ICONO 3 x 3
   TODOS LOS CUADROS EXACTAMENTE DEL MISMO TAMAÑO
   ========================================================= */

.wd-products-shop-view > .per-row-4::after {
    background:

        /* FILA 1 */
        linear-gradient(currentColor, currentColor)
        0 0 / 5px 5px no-repeat,

        linear-gradient(currentColor, currentColor)
        7px 0 / 5px 5px no-repeat,

        linear-gradient(currentColor, currentColor)
        14px 0 / 5px 5px no-repeat,

        /* FILA 2 */
        linear-gradient(currentColor, currentColor)
        0 7px / 5px 5px no-repeat,

        linear-gradient(currentColor, currentColor)
        7px 7px / 5px 5px no-repeat,

        linear-gradient(currentColor, currentColor)
        14px 7px / 5px 5px no-repeat,

        /* FILA 3 */
        linear-gradient(currentColor, currentColor)
        0 14px / 5px 5px no-repeat,

        linear-gradient(currentColor, currentColor)
        7px 14px / 5px 5px no-repeat,

        linear-gradient(currentColor, currentColor)
        14px 14px / 5px 5px no-repeat !important;
}


/* =========================================================
   ICONO LISTA - 5 LÍNEAS
   ========================================================= */

.wd-products-shop-view > .per-row-list::after {
    background:

        linear-gradient(currentColor, currentColor)
        0 0 / 18px 2px no-repeat,

        linear-gradient(currentColor, currentColor)
        0 4px / 18px 2px no-repeat,

        linear-gradient(currentColor, currentColor)
        0 8px / 18px 2px no-repeat,

        linear-gradient(currentColor, currentColor)
        0 12px / 18px 2px no-repeat,

        linear-gradient(currentColor, currentColor)
        0 16px / 18px 2px no-repeat !important;
}


/* =========================================================
   COLOR
   ========================================================= */

.wd-products-shop-view > .shop-view {
    color: #999 !important;
}

.wd-products-shop-view > .shop-view:hover {
    color: #222 !important;
}
/* =========================================================
   ESTRELLAS WOODMART / WOOCOMMERCE - GLOBAL
   Estrella completa: #DA5150
   Estrella vacía: #DA5150 al 40%
   ========================================================= */

body .star-rating {
    position: relative !important;
    width: 68px !important;
    height: 12px !important;

    display: block !important;
    margin: 0 !important;
    padding: 0 !important;

    font-size: 0 !important;
    line-height: 0 !important;

    overflow: hidden !important;
}


/* =========================================================
   CAPA BASE
   5 ESTRELLAS AL 40%
   ========================================================= */

body .star-rating::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    width: 68px !important;
    height: 12px !important;

    display: block !important;

    background-color: rgba(218, 81, 80, 0.40) !important;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='12' viewBox='0 0 68 12'%3E%3Cpath d='M6 0v8.635L2.292 11 3.48 6.87 0 4.202l4.443-.187L6 0Zm0 0v8.635L9.708 11 8.52 6.87 12 4.202 7.557 4.015 6 0Z'/%3E%3Cpath transform='translate(14)' d='M6 0v8.635L2.292 11 3.48 6.87 0 4.202l4.443-.187L6 0Zm0 0v8.635L9.708 11 8.52 6.87 12 4.202 7.557 4.015 6 0Z'/%3E%3Cpath transform='translate(28)' d='M6 0v8.635L2.292 11 3.48 6.87 0 4.202l4.443-.187L6 0Zm0 0v8.635L9.708 11 8.52 6.87 12 4.202 7.557 4.015 6 0Z'/%3E%3Cpath transform='translate(42)' d='M6 0v8.635L2.292 11 3.48 6.87 0 4.202l4.443-.187L6 0Zm0 0v8.635L9.708 11 8.52 6.87 12 4.202 7.557 4.015 6 0Z'/%3E%3Cpath transform='translate(56)' d='M6 0v8.635L2.292 11 3.48 6.87 0 4.202l4.443-.187L6 0Zm0 0v8.635L9.708 11 8.52 6.87 12 4.202 7.557 4.015 6 0Z'/%3E%3C/svg%3E") !important;

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='12' viewBox='0 0 68 12'%3E%3Cpath d='M6 0v8.635L2.292 11 3.48 6.87 0 4.202l4.443-.187L6 0Zm0 0v8.635L9.708 11 8.52 6.87 12 4.202 7.557 4.015 6 0Z'/%3E%3Cpath transform='translate(14)' d='M6 0v8.635L2.292 11 3.48 6.87 0 4.202l4.443-.187L6 0Zm0 0v8.635L9.708 11 8.52 6.87 12 4.202 7.557 4.015 6 0Z'/%3E%3Cpath transform='translate(28)' d='M6 0v8.635L2.292 11 3.48 6.87 0 4.202l4.443-.187L6 0Zm0 0v8.635L9.708 11 8.52 6.87 12 4.202 7.557 4.015 6 0Z'/%3E%3Cpath transform='translate(42)' d='M6 0v8.635L2.292 11 3.48 6.87 0 4.202l4.443-.187L6 0Zm0 0v8.635L9.708 11 8.52 6.87 12 4.202 7.557 4.015 6 0Z'/%3E%3Cpath transform='translate(56)' d='M6 0v8.635L2.292 11 3.48 6.87 0 4.202l4.443-.187L6 0Zm0 0v8.635L9.708 11 8.52 6.87 12 4.202 7.557 4.015 6 0Z'/%3E%3C/svg%3E") !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;

    -webkit-mask-size: 68px 12px !important;
    mask-size: 68px 12px !important;

    z-index: 1 !important;
}


/* =========================================================
   CAPA DE ESTRELLAS COMPLETAMENTE RELLENAS
   WooCommerce controla el ancho mediante style="width: XX%"
   ========================================================= */

body .star-rating > span {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    height: 12px !important;

    display: block !important;

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

    font-size: 0 !important;
    line-height: 0 !important;

    overflow: hidden !important;

    z-index: 2 !important;
}


/* COLOR DE LAS ESTRELLAS RELLENAS */
body .star-rating > span::before {
    content: "" !important;

    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    width: 68px !important;
    height: 12px !important;

    display: block !important;

    background-color: #DA5150 !important;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='12' viewBox='0 0 68 12'%3E%3Cpath d='M6 0v8.635L2.292 11 3.48 6.87 0 4.202l4.443-.187L6 0Zm0 0v8.635L9.708 11 8.52 6.87 12 4.202 7.557 4.015 6 0Z'/%3E%3Cpath transform='translate(14)' d='M6 0v8.635L2.292 11 3.48 6.87 0 4.202l4.443-.187L6 0Zm0 0v8.635L9.708 11 8.52 6.87 12 4.202 7.557 4.015 6 0Z'/%3E%3Cpath transform='translate(28)' d='M6 0v8.635L2.292 11 3.48 6.87 0 4.202l4.443-.187L6 0Zm0 0v8.635L9.708 11 8.52 6.87 12 4.202 7.557 4.015 6 0Z'/%3E%3Cpath transform='translate(42)' d='M6 0v8.635L2.292 11 3.48 6.87 0 4.202l4.443-.187L6 0Zm0 0v8.635L9.708 11 8.52 6.87 12 4.202 7.557 4.015 6 0Z'/%3E%3Cpath transform='translate(56)' d='M6 0v8.635L2.292 11 3.48 6.87 0 4.202l4.443-.187L6 0Zm0 0v8.635L9.708 11 8.52 6.87 12 4.202 7.557 4.015 6 0Z'/%3E%3C/svg%3E") !important;

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='12' viewBox='0 0 68 12'%3E%3Cpath d='M6 0v8.635L2.292 11 3.48 6.87 0 4.202l4.443-.187L6 0Zm0 0v8.635L9.708 11 8.52 6.87 12 4.202 7.557 4.015 6 0Z'/%3E%3Cpath transform='translate(14)' d='M6 0v8.635L2.292 11 3.48 6.87 0 4.202l4.443-.187L6 0Zm0 0v8.635L9.708 11 8.52 6.87 12 4.202 7.557 4.015 6 0Z'/%3E%3Cpath transform='translate(28)' d='M6 0v8.635L2.292 11 3.48 6.87 0 4.202l4.443-.187L6 0Zm0 0v8.635L9.708 11 8.52 6.87 12 4.202 7.557 4.015 6 0Z'/%3E%3Cpath transform='translate(42)' d='M6 0v8.635L2.292 11 3.48 6.87 0 4.202l4.443-.187L6 0Zm0 0v8.635L9.708 11 8.52 6.87 12 4.202 7.557 4.015 6 0Z'/%3E%3Cpath transform='translate(56)' d='M6 0v8.635L2.292 11 3.48 6.87 0 4.202l4.443-.187L6 0Zm0 0v8.635L9.708 11 8.52 6.87 12 4.202 7.557 4.015 6 0Z'/%3E%3C/svg%3E") !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;

    -webkit-mask-size: 68px 12px !important;
    mask-size: 68px 12px !important;
}


/* =========================================================
   OCULTAR EL CONTENIDO ORIGINAL DE WOODMART
   ========================================================= */

body .star-rating > span::after {
    display: none !important;
}