:root {
	--wd-text-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 300;
	--wd-text-color: rgb(74,74,74);
	--wd-text-font-size: 14px;
	--wd-title-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 400;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 400;
	--wd-entities-title-color: rgb(51,51,51);
	--wd-entities-title-color-hover: rgb(89, 89, 89);
	--wd-alternative-font: "Playfair Display", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 400;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: rgb(51,51,51);
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 400;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(44,44,44);
	--wd-alternative-color: #D81B60;
	--btn-default-bgcolor: rgb(216,27,96);
	--btn-default-bgcolor-hover: rgb(173,21,75);
	--btn-accented-bgcolor: rgb(216,27,96);
	--btn-accented-bgcolor-hover: rgb(173,21,75);
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: rgb(44,44,44);
	--wd-link-color-hover: rgb(216,27,96);
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: url(https://velvetcharm.es/wp-content/uploads/2021/07/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 {
	background-repeat: no-repeat;
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: #ffffff;
	background-image: none;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 0px;
--btn-default-color: #fff;
--btn-default-color-hover: #fff;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 5px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 5px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--wd-brd-radius: 0px;
}



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

.product_title.entry-title.wd-entities-title {
	font-family: "Inter";
}

.wc-tab-inner.wd-entry-content {
	max-width: 800px;
	margin: 0 auto;
}

/*.wd-last {
    display: none !important;
}

.wd-breadcrumbs.woocommerce-breadcrumb .wd-delimiter:nth-last-child(2) {
	display: none;
}*/

/* 1. Apilar la cantidad y el botón en vertical */
.woocommerce div.product form.cart {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 15px !important; /* Espacio elegante entre cantidad y botón */
}

/* 2. Hacer el selector de cantidad más pequeño y sutil */
.woocommerce div.product form.cart div.quantity {
    margin-right: 0 !important;
}
.woocommerce .quantity input[type="button"], 
.woocommerce .quantity input[type="number"] {
    height: 38px !important; /* Más bajito */
    font-size: 14px !important; /* Número más delicado */
    border-color: #E5E5E5 !important; /* Borde muy sutil */
    color: #4A4A4A !important;
    background-color: transparent !important;
}

/* 3. Hacer el botón de añadir al carrito el Rey de la página */
.woocommerce div.product form.cart .single_add_to_cart_button {
    width: 100% !important; /* Ocupa todo el ancho */
    height: 50px !important; /* Altura perfecta para hacer clic */
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    margin-bottom: 10px !important;
}

.stock.in-stock.wd-style-default,
.stock.in-stock.wd-style-default:before{
	color: #2E7D32 !important;
}
/* --- OPCIÓN 2: CÁPSULA ATERCIOPELADA --- */
.woocommerce div.product form.cart div.quantity {
    display: inline-flex !important;
    background-color: #F7F7F7 !important; /* Gris súper suave */
    border-radius: 50px !important; /* Forma de píldora */
    height: 42px !important;
    border: none !important;
    padding: 0 5px !important;
}

/* Botones + y - */
.woocommerce div.product form.cart div.quantity input.btn {
    background: transparent !important;
    border: none !important;
    width: 35px !important;
    color: #4A4A4A !important;
    font-size: 16px !important;
    transition: color 0.2s ease !important;
}

/* Al pasar el ratón por los botones */
.woocommerce div.product form.cart div.quantity input.btn:hover {
    color: #D81B60 !important; /* Tu color frambuesa */
}

/* El número central */
.woocommerce div.product form.cart div.quantity input.qty {
    border: none !important;
    width: 40px !important;
    height: 100% !important;
    font-weight: 600 !important;
    color: #2C2C2C !important;
    background: transparent !important;
}

/* --- ESTILO DE CATÁLOGO PREMIUM (VELVET CHARM) --- */

/* 1. Eliminar bordes y cajas para que el producto flote */
.product-grid-item.wd-hover-tiled .wd-product-wrapper,
.product-grid-item .wd-product-wrapper {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

/* 2. Alinear todo el bloque de texto (Título y Precio) a la izquierda */
.product-grid-item .product-element-bottom {
    text-align: left !important;
    align-items: flex-start !important;
    padding-left: 0 !important; /* Quitamos márgenes para que quede a ras de la foto */
}

.product-grid-item .price {
    text-align: left !important;
    justify-content: flex-start !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #2C2C2C !important;
    margin-top: 5px;
}

/* 3. Título del producto: Más grueso (font-weight: 600) y alineado */
.product-grid-item .wd-entities-title a {
    font-size: 14px !important;
    font-weight: 600 !important; /* Subimos el grosor para darle más presencia */
    color: #2C2C2C !important;
    line-height: 1.4 !important;
    letter-spacing: 0.2px;
}

/* 4. Ocultar los botones laterales en la vista inicial para limpiar la imagen */
.product-grid-item .wd-buttons {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Mostrar botones solo al pasar el ratón */
.product-grid-item:hover .wd-buttons {
    opacity: 1;
}

[class*=title-line-] .wd-product .wd-entities-title {
    text-align: left;
}

/* --- ESTILO BLOG EDITORIAL PREMIUM (VELVET CHARM) --- */

/* 1. Eliminar sombras y cajas blancas del contenedor principal */
.wd-post.blog-style-bg.wd-add-shadow .wd-post-inner,
.wd-post.blog-style-bg .wd-post-inner {
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
}

/* 2. Refinar la caja de texto: Alineación izquierda y sin márgenes artificiales */
.wd-post .wd-post-content {
    text-align: left !important;
    padding: 20px 0 0 0 !important; /* Espacio solo por arriba para separarlo de la foto */
    background: transparent !important;
}

/* 3. Títulos elegantes: Más finos, oscuros y con efecto hover en tu frambuesa */
.wd-post-title {
    margin-bottom: 10px !important;
}

.wd-post-title a {
    font-size: 18px !important;
    font-weight: 500 !important; /* Grosor medio, muy editorial */
    color: #1F1F1F !important; /* Gris casi negro, muy sofisticado */
    line-height: 1.3 !important;
    letter-spacing: 0.2px;
    transition: color 0.3s ease;
}

.wd-post-title a:hover {
    color: #D81B60 !important; /* Toque frambuesa al pasar el ratón */
}

/* 4. Transformar el "parche" de la fecha en una etiqueta de lujo (Frambuesa) */
.wd-post-date.wd-style-with-bg {
    background-color: #D81B60 !important; /* Tu color frambuesa de Velvet Charm */
    color: #FFFFFF !important; 
    border-radius: 0px !important; 
    padding: 8px 12px !important;
    box-shadow: none !important;
}

.wd-post-date.wd-style-with-bg .post-date-day {
    font-size: 16px !important;
    font-weight: 600 !important;
}

.wd-post-date.wd-style-with-bg .post-date-month {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px;
}

/* 5. Toque interactivo: Ligero zoom a la imagen al pasar el cursor */
.wd-post-img {
    overflow: hidden;
}

.wd-post-img img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.wd-post:hover .wd-post-img img {
    transform: scale(1.04) !important;
}

/* --- ESTILO EDITORIAL PARA TÍTULOS BÁSICOS (VELVET CHARM) --- */

.wp-block-wd-title.title-home {
    border-left: 3px solid #D81B60 !important; /* La línea frambuesa que enmarca */
    padding-left: 18px !important; /* Espacio entre la línea y el texto */
    text-align: left !important;
    font-size: 26px !important; /* Tamaño elegante, no gigantesco */
    font-weight: 300 !important; /* Letra fina tipo revista */
    color: #1F1F1F !important; /* Gris oscuro, más suave que el negro puro */
    letter-spacing: 0.5px !important;
    line-height: 1.3 !important;
    margin-bottom: 30px !important;
    margin-top: 40px !important;
}

/* --- HOME ESTILO EN CATEGORIAS --- */

.home-highlighted-categories a {
	background-color: rgba(20, 20, 25, 0.45);
	transition: 0.3;
}

.home-highlighted-categories a:hover {
	background-color: inherit;
}

.wd-page-title-bg.wd-fill {
	background-image: linear-gradient(135deg, #5A1846 0%, #0A0A0A 100%) !important;
}

/* --- NAVEGACIÓN DE SUBCATEGORÍAS PREMIUM V3 (VELVET CHARM) --- */

/* 1. Contenedor de la lista: Espaciado elegante y centrado */
.wd-page-title .wd-nav-product-cat {
    margin-top: 20px !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
	  row-gap: 10px !important;
    border: none !important;
}

/* 2. MATAR EL DOBLE SUBRAYADO DE WOODMART */
.wd-page-title .wd-nav-product-cat.wd-style-underline > li > a .nav-link-text::after,
.wd-page-title .wd-nav-product-cat.wd-style-underline > li > a::before {
    content: none !important;
    display: none !important;
}

/* 3. Estilo de los textos en Reposo (Más claros y legibles) */
.wd-page-title .wd-nav-product-cat > li > a {
    font-size: 14px !important; 
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: rgba(255, 255, 255, 0.7) !important; /* Blanco al 70%: Muy legible pero sin ser el principal */
    padding: 8px 0 !important;
    background: transparent !important;
    border: none !important;
    position: relative; 
    transition: color 0.3s ease !important;
    box-shadow: none !important;
		min-height: 36px !important;
}

/* 4. Hover y Estado Activo: El texto brilla a blanco puro */
/* AQUÍ APLICAMOS TU CLASE: .wd-active */
.wd-page-title .wd-nav-product-cat > li > a:hover,
.wd-page-title .wd-nav-product-cat > li.current-cat > a,
.wd-page-title .wd-nav-product-cat > li.wd-active > a {
    color: #FFFFFF !important;
    background: transparent !important;
		min-height: 36px;
}

/* 5. Nuestro Subrayado Custom (Blanco, fino y elegante) */
.wd-page-title .wd-nav-product-cat > li > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important; /* Empieza oculto */
    height: 1px !important; /* Grosor finísimo */
    background-color: #FFFFFF !important; 
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 6. Animación: La línea blanca crece y se queda fija en la activa */
/* AQUÍ APLICAMOS TU CLASE PARA LA LÍNEA: .wd-active */
.wd-page-title .wd-nav-product-cat > li > a:hover::after,
.wd-page-title .wd-nav-product-cat > li.current-cat > a::after,
.wd-page-title .wd-nav-product-cat > li.wd-active > a::after {
    width: 100% !important;
}

/* --- MENÚ PRINCIPAL ALTA COSTURA V4 (SIN SUBRAYADO) --- */

/* 1. Ajuste ultra-compacto para evitar saltos de línea */
.whb-general-header .wd-nav-main > li > a {
    font-size: 14px !important; /* Ligeramente más pequeño para máxima compacidad */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: #1F1F1F !important;
    padding-left: 6px !important;  /* Reducido al mínimo */
    padding-right: 6px !important; /* Reducido al mínimo */
    transition: color 0.4s ease !important; /* Transición suave de color */
}

/* Forzar fila única absoluta */
.whb-general-header .wd-nav-main {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

/* 2. ELIMINAR CUALQUIER TIPO DE SUBRAYADO */
.whb-general-header .wd-nav-main.wd-style-underline > li > a .nav-link-text::after,
.whb-general-header .wd-nav-main.wd-style-underline > li > a::before,
.whb-general-header .wd-nav-main > li > a::after {
    display: none !important;
    content: none !important;
}

/* 3. EFECTO COLOR: De negro/gris a frambuesa luminoso */
/* Reposo: Un gris oscuro para que sea legible pero no tan agresivo como el negro */
.whb-general-header .wd-nav-main > li > a {
    color: #555555 !important;
}

/* Hover y Activo: Frambuesa intenso y limpio */
.whb-general-header .wd-nav-main > li:hover > a,
.whb-general-header .wd-nav-main > li.current-menu-item > a {
    color: #E8306E !important; 
}

/* 4. MINIMALISMO EN CARRITO (Mantenemos limpio) */
.whb-general-header .wd-header-cart .wd-cart-subtotal,
.whb-general-header .wd-header-cart .subtotal-divider {
    display: none !important;
}

/* --- TABS DE PRODUCTO ALTA COSTURA V2 (CORRECCIÓN VELVET CHARM) --- */

/* 1. Aniquilar la doble línea (arriba y abajo) que mete WoodMart */
.woocommerce-tabs.tabs-layout-tabs {
    border-top: none !important; /* Mata la línea de arriba */
}

.woocommerce-tabs .wd-nav-tabs-wrapper {
    border-top: none !important;
    border-bottom: 1px solid #EAEAEA !important; /* Dejamos solo una base gris levísima */
    margin-bottom: 40px !important; 
}

.woocommerce-tabs .wd-nav-tabs {
    justify-content: center !important; 
    gap: 50px !important; 
}

/* 2. Estilo de los textos de las pestañas (Reposo) */
.woocommerce-tabs .wd-nav-tabs > li > a {
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: #999999 !important; 
    padding: 10px 0 15px 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: color 0.3s ease !important;
}

/* 3. Hover y Pestaña Activa */
.woocommerce-tabs .wd-nav-tabs > li:hover > a,
.woocommerce-tabs .wd-nav-tabs > li.active > a {
    color: #E8306E !important; 
    font-weight: 600 !important;
}

/* 4. FORZAR la línea frambuesa elegante en la pestaña activa */
.woocommerce-tabs .wd-nav-tabs > li.active > a::after,
.woocommerce-tabs .wd-nav-tabs.wd-style-underline-reverse > li.active > a::after,
.woocommerce-tabs .wd-nav-tabs.wd-style-underline-reverse > li > a:hover::after {
    background-color: #E8306E !important; 
    border-color: #E8306E !important; /* Doble seguro contra WoodMart */
    height: 2px !important; /* Un poco más gruesa para destacar sobre el gris */
    bottom: -1px !important; 
}

/* 5. DISEÑO EDITORIAL PARA EL CONTENIDO (Bloque centrado, texto a la izquierda) */
.woocommerce-Tabs-panel {
    max-width: 800px !important; /* Ancho máximo de revista */
    margin: 0 auto !important; /* Centra el BLOQUE en la pantalla */
    text-align: left !important; /* ESTO ES CLAVE: El texto se alinea a la izquierda para leerse perfecto */
}

.woocommerce-Tabs-panel p {
    font-size: 15px !important;
    line-height: 1.9 !important; 
    color: #555555 !important;
    font-weight: 300 !important;
    margin-bottom: 20px !important;
}

/* 6. Estilo elegante para las listas (Características) */
.woocommerce-Tabs-panel ul {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
    padding-left: 20px !important;
}

.woocommerce-Tabs-panel li {
    font-size: 15px !important;
    line-height: 1.9 !important; 
    color: #555555 !important;
    font-weight: 300 !important;
    margin-bottom: 8px !important;
}

.woocommerce-Tabs-panel strong {
    color: #1F1F1F !important;
    font-weight: 500 !important;
}

.product-tabs-wrapper {
	border-top: none !important;
}

.wd-nav[class*=wd-style-underline] .nav-link-text:after {
	background-color: #E8306E !important;
}

/* --- TÍTULO DE PRODUCTOS RELACIONADOS (UNIFICADO CON HOME) --- */

/* 1. Contenedor del título (Alineado a la izquierda como en la Home) */
.wd-el-title.slider-title.element-title {
    text-align: left !important;
    margin-bottom: 30px !important; 
    margin-top: 30px !important;
}

/* 2. Tipografía idéntica a "Los favoritos de la semana" */
.wd-el-title.slider-title.element-title span {
    font-size: 18px !important; 
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    color: #555555 !important; /* Gris suave y elegante */
    position: relative !important;
    padding-left: 15px !important; /* Separación para que respire la línea vertical */
    display: inline-block !important;
}

/* 3. El Toque Frambuesa: Línea vertical a la izquierda */
.wd-el-title.slider-title.element-title span::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    width: 2px !important; /* Grosor de la línea */
    height: 100% !important; /* Altura exacta de la letra */
    background-color: #E8306E !important; /* Tu color frambuesa */
}

/* Estilos para enlaces SOLO dentro de los textos del artículo (WoodMart) */
.single-post #main-content p a,
.single-post #main-contentt li a {
    color: #A6266E; /* Magenta vibrante inspirado en el logo y 100% accesible */
    text-decoration: none;
    border-bottom: 1px solid #A6266E;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Efecto al pasar el ratón por encima */
.single-post #main-content p a:hover,
.single-post #main-content li a:hover {
    color: #000000;
    border-bottom-color: #000000;
}

.wd-content-area.site-content .post-single-page {
	max-width: 800px;
	margin: 0 auto;
}
.wd-content-area.site-content .wd-single-footer {
  max-width: 800px;
	margin: 40px auto 0;
}