.elementor-kit-47{--e-global-color-primary:#359B7E;--e-global-color-secondary:#3771B3;--e-global-color-text:#0F1111;--e-global-color-accent:#AFAED3;--e-global-color-56293db:#FBF6EE;--e-global-color-f2709c7:#387AC5;--e-global-color-7a700f6:#05BF8F;--e-global-color-e0ad217:#DFC1D7;--e-global-color-8057f3b:#AFAED3;--e-global-color-2d3bc21:#009C7E;--e-global-color-a7bb8d7:#EAECA5;--e-global-color-7725c7f:#CA5A40;--e-global-color-7b59105:#ECEDF5;--e-global-color-9b255f3:#FBF0F4;--e-global-color-af4ccf7:#387AC57D;--e-global-color-ace8efa:#E7F2EF;--e-global-color-4e881f1:#387AC538;--e-global-color-cffb5a6:#DEEBF7;--e-global-color-9d54672:#CFE7DA;--e-global-color-6c0af67:#F5D1D7;--e-global-color-18cfce1:#E73F23;--e-global-color-d948db8:#65BFAF;--e-global-color-0c7c379:#F9CCDB;--e-global-color-30a44dc:#374422;--e-global-color-3d47e80:#D69322;--e-global-color-3c76ec6:#F9F6F7;--e-global-color-f696a70:#F4EEDE;--e-global-color-7599c7f:#F4722B;--e-global-color-3486aac:#FAB6E6;--e-global-color-88be730:#C2DE12;--e-global-color-620209b:#8A88D1;--e-global-color-2040099:#302B2A;--e-global-color-975517c:#302B2A;--e-global-color-2cdadf0:#ECEDF559;--e-global-typography-primary-font-family:"stratos-lights";--e-global-typography-primary-font-size:22px;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:28px;--e-global-typography-secondary-font-family:"stratos-lights";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"stratos-lights";--e-global-typography-text-font-size:22px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:25px;--e-global-typography-accent-font-family:"stratos-lights";--e-global-typography-accent-font-weight:500;--e-global-typography-6d02bfa-font-family:"stratos-lights";--e-global-typography-6d02bfa-font-size:20px;--e-global-typography-6d02bfa-font-weight:300;--e-global-typography-6d02bfa-line-height:30px;--e-global-typography-ed16b16-font-family:"stratos-lights";--e-global-typography-ed16b16-font-size:15px;--e-global-typography-ed16b16-font-weight:300;--e-global-typography-ed16b16-text-transform:uppercase;--e-global-typography-ed16b16-line-height:14px;--e-global-typography-ed16b16-letter-spacing:3.5px;--e-global-typography-4a9596b-font-family:"stratos-lights";--e-global-typography-4a9596b-font-size:15px;--e-global-typography-4a9596b-font-weight:900;--e-global-typography-4a9596b-text-transform:uppercase;--e-global-typography-4a9596b-line-height:14px;--e-global-typography-4a9596b-letter-spacing:3.5px;--e-global-typography-4284afa-font-family:"stratos-lights";--e-global-typography-4284afa-font-size:15px;--e-global-typography-4284afa-font-weight:300;--e-global-typography-4284afa-text-transform:uppercase;--e-global-typography-4284afa-line-height:14px;--e-global-typography-4284afa-letter-spacing:3.5px;--e-global-typography-bf9b5be-font-family:"stratos-lights";--e-global-typography-bf9b5be-font-size:20px;--e-global-typography-bf9b5be-font-weight:300;--e-global-typography-bf9b5be-line-height:30px;--e-global-typography-995c6fc-font-family:"stratos-lights";--e-global-typography-995c6fc-font-size:20px;--e-global-typography-995c6fc-font-weight:300;--e-global-typography-995c6fc-line-height:25px;--e-global-typography-1d7a996-font-family:"stratos-lights";--e-global-typography-1d7a996-font-size:14px;--e-global-typography-1d7a996-font-weight:400;--e-global-typography-1d7a996-letter-spacing:0.5px;--e-global-typography-ec1e7f9-font-family:"stratos-lights";--e-global-typography-ec1e7f9-font-size:18px;--e-global-typography-ec1e7f9-font-weight:400;--e-global-typography-ec1e7f9-line-height:20px;--e-global-typography-8350088-font-family:"stratos-lights";--e-global-typography-8350088-font-size:18px;--e-global-typography-8350088-font-weight:700;--e-global-typography-8350088-line-height:20px;--e-global-typography-68ece01-font-family:"stratos-lights";--e-global-typography-68ece01-font-size:20px;--e-global-typography-68ece01-font-weight:400;--e-global-typography-68ece01-line-height:26px;background-color:#FFFFFF;color:var( --e-global-color-text );font-family:"stratos-lights", Sans-serif;font-size:20px;font-weight:400;line-height:26px;}.elementor-kit-47 e-page-transition{background-color:var( --e-global-color-e0ad217 );}.elementor-kit-47 p{margin-block-end:10px;}.elementor-kit-47 a{color:var( --e-global-color-text );font-weight:600;}.elementor-kit-47 a:hover{color:var( --e-global-color-accent );font-family:"stratos-lights", Sans-serif;}.elementor-kit-47 h1{color:var( --e-global-color-text );}.elementor-kit-47 h2{color:var( --e-global-color-text );}.elementor-kit-47 h3{color:var( --e-global-color-text );}.elementor-kit-47 h4{color:var( --e-global-color-text );}.elementor-kit-47 h5{color:var( --e-global-color-text );}.elementor-kit-47 h6{color:var( --e-global-color-text );}.elementor-kit-47 img{border-style:none;border-radius:0px 0px 0px 0px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-47{--e-global-typography-bf9b5be-font-size:18px;--e-global-typography-bf9b5be-line-height:1.5em;font-size:18px;line-height:1.2em;}.elementor-kit-47 p{margin-block-end:10px;}.elementor-kit-47 img{border-radius:30px 30px 30px 30px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ====================================================
  CHECKOUT DE KNOTS CARRITO FLOTANTE
==================================================== */

/* PASO 1 REVISADO: CAMPOS FULLWIDTH Y ESTILOS DE INPUT KNOTS */

/* 1. Romper las columnas principales de WooCommerce */
.woofc-checkout-form .col2-set,
.woofc-checkout-form .col2-set .col-1,
.woofc-checkout-form .col2-set .col-2 {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-right: 0px !important;
}

/* 2. Forzar que la etiqueta vaya ARRIBA y el input ABAJO */
.woofc-checkout-form .form-row {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
}

.woofc-checkout-form .form-row label {
    display: block !important;
    margin-bottom: px !important;
    text-align: left !important;
    /* Podemos añadir aquí luego el uppercase si quieres */
}

.woofc-checkout-form .woocommerce-input-wrapper {
    display: block !important;
    width: 100% !important;
}

/* 3. Tus estilos de Input exactos + Fullwidth */
.woofc-checkout-form .input-text,
.woofc-checkout-form select,
.woofc-checkout-form textarea {
    width: 100% !important; /* Lo hace fullwidth */
    box-sizing: border-box !important; /* Evita que el padding rompa el margen derecho */
    
    /* Tu CSS personalizado: */
    color: #A3A3A3 !important;
    border-color: var(--e-global-color-accent) !important;
    background-color: #FFFFFF !important; 
    border-style: solid !important;
    border-width: 1px 1px 1px 1px !important;
    border-radius: 15px 15px 15px 15px !important;
    padding: 10px 10px 10px 10px !important;
}

/* Quitamos el borde azul feo que sale al hacer clic (focus) */
.woofc-checkout-form .input-text:focus,
.woofc-checkout-form select:focus {
    outline: none !important;
    border-color: #4b9a82 !important; /* Tu color verde agua para el clic */
}

/* PASO 2: AJUSTAR EL TÍTULO DE "SI ERES UNA EMPRESA..." */

.woofc-checkout-form .headingcheck h1 {
    font-family: stratos-lights, sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    color: rgb(15, 17, 17) !important;
    font-size: 16px !important;
    line-height: 22px !important;
    text-transform: uppercase !important; /* Lo mantenemos en mayúsculas como en tu diseño */
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    letter-spacing: 0px !important;
}

/* PASO 3: TÍTULOS PRINCIPALES (FACTURACIÓN, ENVÍO Y TU PEDIDO) */

.woofc-checkout-form .woocommerce-billing-fields h3,
.woofc-checkout-form #ship-to-different-address span,
.woofc-checkout-form #order_review_heading {
    font-family: stratos-lights, sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    color: rgb(15, 17, 17) !important;
    font-size: 16px !important;
    line-height: 22px !important;
    text-transform: uppercase !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    letter-spacing: 0px !important;
    display: block !important;
}

/* Ajuste específico para el checkbox de enviar a otra dirección para que quede alineado con el título */
.woofc-checkout-form #ship-to-different-address label {
    display: flex !important;
    align-items: center !important;
    font-weight: normal !important;
}
.woofc-checkout-form #ship-to-different-address input[type="checkbox"] {
    margin-right: 10px !important;
    margin-top: 0 !important;
}

/* PASO 4: AVISO DE CUPÓN "¿TIENES UN CUPÓN?" */

.woofc-checkout-form .woocommerce-info {
    font-family: stratos-lights, sans-serif !important;
    color: var(--e-global-color-2d3bc21) !important;
    background-color: #CFE7DA54 !important;
    border-color: var(--e-global-color-2d3bc21) !important;
    border-style: none !important;
    border-radius: 0px !important;
    padding: 13px 25px 13px calc(25px + 18px + 20px) !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    margin-bottom: 25px !important; /* Separación con el bloque de abajo */
    display: block !important;
}

/* Forzamos también el color y el grosor del enlace (Haz clic aquí...) */
.woofc-checkout-form .woocommerce-info a.showcoupon {
    color: var(--e-global-color-2d3bc21) !important;
    font-weight: 600 !important;
}


/* PASO 5: ICONOS, CHECKBOXES Y RADIO BUTTONS EN VERDE */

/* 1. Cambiamos el color azul por defecto de las casillas y botones de selección */
.woofc-checkout-form input[type="checkbox"],
.woofc-checkout-form input[type="radio"] {
    accent-color: var(--e-global-color-2d3bc21) !important;
    cursor: pointer !important;
}

/* 2. Forzamos a que cualquier icono nativo de WooCommerce (como el del cupón o avisos) herede tu verde */
.woofc-checkout-form .woocommerce-info::before,
.woofc-checkout-form .woocommerce-info::after,
.woofc-checkout-form .woocommerce-message::before {
    color: var(--e-global-color-2d3bc21) !important;
}


/* =================================================================== */
/* === ESTILO PARA EL BOTÓN DE REGALO DE SMART MESSAGES === */
/* =================================================================== */

/* 1. Limpieza y centrado del shortcode */
.knots-btn-wrapper .add_to_cart_button {
    /* Forzamos el estilo de botón de tu marca */
    background-color: #AFAED3  !important;
    color: #FFFFFF !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    border-radius: 50px !important; /* Totalmente redondeado */
    padding: 14px 30px !important;
    font-size: 12px !important;
    border: none !important;
   

    /* Centrado */
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: 100% !important;
    text-align: center;
    transition: background-color 0.3s ease;
}


.knots-btn-wrapper .add_to_cart_button:hover {
    background-color: #009C7E !important;
}

/* Ocultamos el campo de cantidad que se genera con el shortcode simple */
.knots-btn-wrapper .quantity {
    display: none !important;
}

.knots-btn-wrapper .woocommerce-Price-amount.amount  {
   font-size: 0px; !important;
   color: white !important;
   display: none;
}

/* 3. ESTILO PARA EL ENLACE "EDITAR OPCIONES" (CORREGIDO) */
.knots-btn-wrapper .knots-secondary-link {
    /* --- Layout Centrado --- */
    display: inline-block; /* Hacemos que el enlace se ajuste solo al ancho de su contenido */
    
    /* Nota: El centrado horizontal se lo daremos al contenedor PADRE,
       pero Elementor ya lo hace si el elemento es inline-block */
    
    /* --- Estilo de Texto --- */
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    color: #302b2a !important; /* Texto oscuro */
    letter-spacing: 0.2px !important;
    padding: 5px 0 !important;
    margin-top: 10px !important;
    transition: color 0.3s ease;
     line-height: 10px !important;
    
    /* --- Borde Inferior Controlado --- */
    /* Quitamos el border-bottom de la regla anterior para controlarlo con el fondo */
    border-bottom: none !important;

    /* Simulamos el border-bottom usando un borde inferior en línea (más limpio) */
    box-shadow: 0 1px 0 0 #444; /* Crea una línea de 1px justo debajo del texto */
}

/* 4. Centramos el contenedor que envuelve el enlace para que el borde se vea centrado */
.knots-btn-wrapper {
    text-align: center;
}

/* =================================================================== */
/* === ALINEACIÓN Y ESTILO DE LA TABLA DE PRECIOS POR CANTIDAD (WPC Price by Quantity) === */
/* =================================================================== */

/* --- 1. CENTRADO DE LA TABLA COMPLETA --- */

/* Seleccionamos el contenedor principal de la tabla WPCPQ */
.wpcpq-table-volume {
    /* Clave para centrar un elemento de bloque */
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 600px; /* Opcional: limitar el ancho para que se vea bien centrado */
    width: 100%;
}

/* --- 2. ESTILOS DE LA FILA ACTIVA (Tu regla) --- */
.wpcpq-table .wpcpq-item-active {
    color: #039c7e !important;
    background-color: #e7f2ef !important;
    font-weight: 900 !important;
    border: 2px solid #039c7e !important;
    border-radius: 30px !important;
}

/* --- 3. ESTILO PARA RESALTAR EL RESUMEN DEL PEDIDO (La zona de confusión) --- */

.wpcpq-row.wpcpq-foot.wpcpq-summary {
    /* Damos el mismo color de fondo que a la fila activa para resaltar el total */
    background-color: #e7f2ef !important;
    border: 2px solid #039c7e !important; /* Borde para que se vea como un bloque */
    border-radius: 30px !important; /* Bordes redondeados */
    font-size: 16px !important;
    padding: 15px 25px !important; /* Más espacio interno */
    margin-top: 15px !important; /* Espacio para separarlo de la última fila de la tabla */
    
    /* Configuración de Flexbox para alinear el texto de info y el total */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    
    /* Forzamos el color del texto */
    color: #302b2a !important; 
    font-weight: 700 !important;
}

/* Estilo específico para el precio total */
.wpcpq-summary-total .woocommerce-Price-amount {
    font-weight: 900 !important;
    font-size: 20px !important;
}

/* Hacemos que la fila de arriba y de abajo del resumen no tenga la línea doble si aplica */
.wpcpq-table .wpcpq-item:last-child {
    border-bottom: none !important;
}

/* FIN DEL CÓDIGO A AÑADIR */

/*=============================================== */
/* === PRODUCTOS RELACIONADOS === */
/* =============================================== */
.woocommerce .elementor-widget-woocommerce-product-related.elementor-wc-products .products > h2 {
    display: none;
}

.elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .woocommerce-loop-category__title {
    font-size: 18px !important;
    font-weight: 400 !important;
    text-align: center;
}

.elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .price {
    color: #0F1111 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-align: center;
}

/* === FIN PRODUCTOS RELACIONADOS === */

/* ================================================ */
/* === 1. OCULTAR BOTÓN "AÑADIR AL CARRITO" EN LA TIENDA === */
/* ================================================ */

/* Esta regla busca el botón por defecto de WooCommerce en las páginas de
   tienda y categoría y lo oculta completamente. */

.woocommerce ul.products li.product .add_to_cart_button {
    display: none !important;
}

/* ==================================================== */
/* === PERSONALIZAR EL BOTÓN "HAZLO TUYO" (WOOSQ) === */
/* ==================================================== */

/* Usamos la clase ".hazlotuyo" para darle un estilo único. Estas personazaliciones se aplican al botón HAZLO TUYo que aparece en páginas: HOME, SHOP, ETC.  */

.woosq-btn.hazlotuyo {
    /* --- ¡NUEVAS REGLAS PARA CENTRAR EL BOTÓN! --- */
    display: block !important;          /* 1. Lo convertimos en un bloque */
    width: fit-content !important;     /* 2. Hacemos que el bloque se ajuste al ancho del texto y el padding */
    margin-left: auto !important;      /* 3. Centrado horizontal automático */
    margin-right: auto !important;     /* 4. Centrado horizontal automático */
    margin-top: 15px !important;       /* 5. (Opcional) Un espacio para separarlo del precio de arriba */

    /* --- COLORES Y FONDO --- */
    background-color: #009C7E !important;
    color: #FFFFFF !important;
    font-family: stratos-lights, sans-serif;
    
    /* --- BORDES Y FORMA --- */
    border: 1px solid #009C7E !important;
    border-radius: 50px !important;
    
    /* --- TAMAÑO Y ESPACIADO --- */
    padding: 12px 28px !important;
    
    /* --- TEXTO --- */
    font-weight: bold !important;
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    
    /* --- EFECTOS --- */
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

/* --- Efecto al pasar el ratón por encima (hover) --- */
.woosq-btn.hazlotuyo:hover {
    background-color: #FFFFFF !important;
    color: #009C7E !important;
    
}

/* ================================================ */
/* === 1. ESTILOS PARA LA VISTA RÁPIDA (WOOSQ POPUP) === */
/* =================================================== */
/* Este CSS afecta a la visualización dentro de HAZLOTUYO */

/* --- 0. Ocultar elementos no deseados (SKU, Categorías, etc.) --- */
#woosq-popup .product_meta {
    display: none !important;
}

/* --- 1. Nombre producto --- */
#woosq-popup .product_title {
font-size: 20px !important; /* Más grande */
    font-weight: 700 !important; /* Más negrita */
    color: #302b2a !important; /* Color de texto oscuro */
    margin-bottom: 20px !important;
    font-family: 'stratos-lights', sans-serif !important;
}

/* --- 2. Estilo del Precio --- */
#woosq-popup p.price {
    font-size: 20px !important; /* Más grande */
    font-weight: 700 !important; /* Más negrita */
    color: #302b2a !important; /* Color de texto oscuro */
    margin-bottom: 20px !important;
    font-family: 'stratos-lights', sans-serif !important;
}

/* --- 3. Estilo del Enlace "Detalles del producto" --- */
/* Lo convertimos en un botón, igual que "Añadir al carrito" */
#woosq-popup a.view-details-btn {
    /* Apariencia de botón */
    display: inline-block !important;
    background-color: #009C7E !important;
    color: #FFFFFF !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    border: none !important;
    letter-spacing: 1.2px !important; ;
    transition: background-color 0.3s ease !important;
    font-family: 'stratos-lights', sans-serif !important;
    padding-bottom: 20px;

}

/* Hover para el botón "Detalles del producto" */
#woosq-popup a.view-details-btn:hover {
    background-color: #AFAED3 !important; /* Tu color hover */
    color: #FFFFFF !important;
}

/* Contenedor del .elementor-kit-47 de cantidad */
form.cart .quantity.woopq-quantity {
    border: 1px solid #009C7E !important;
    border-radius: 50px !important;
    height: 48px; /* Ajusta a la altura del botón de Elementor */
    padding: 0 !important;
    margin: 0 10px 0 0 !important;
    width: 120px; /* Ancho fijo para el .elementor-kit-47 */
    box-sizing: border-box;
    font-family: stratos-lights, sans-serif;
}

/* Contenedor interno */
.woopq-quantity-input {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    color: #009C7E !important;
}

/* Botones '+' y '-' */
.woopq-quantity-input-minus,
.woopq-quantity-input-plus {
    background: none !important;
    border: none !important;
    font-size: 14px !important;
    color: #009C7E !important;
    cursor: pointer !important;
    line-height: 48px !important; /* Alinea verticalmente */
    padding: 0 15px !important;
    height: 100% !important;
}

/* Campo del número '1' */
.woopq-quantity-input .qty {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #302b2a !important;
    text-align: center;
    height: 100% !important;
    width: 40px !important;
    padding: 0 !important;
}

/* --- (NUEVO) Ocultar la descripción corta original --- */
#woosq-popup .product-short-description {
    display: none !important;
}

/* --- (NUEVO) Estilo para la descripción movida (debajo del botón) --- */
.woosq-moved-description {
    font-family: 'stratos', 'stratos-lights', sans-serif !important;
    font-size: 15px; /* Ajusta el tamaño si lo necesitas */
    line-height: 1.4em;
    color: #302b2a;
    margin-top: 25px !important; /* Espacio después del botón */
}
.woosq-moved-description p {
    margin: 0;
}

/* --- (NUEVO) Estilo para el botón "Añadir al carrito" --- */
#woosq-popup form.cart .single_add_to_cart_button.button {
    background-color: #009C7E !important;
    font-family: stratos-lights, sans-serif;
    color: #FFFFFF !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    border-radius: 50px !important;
    padding: 0 30px !important;
    height: 48px !important;
    line-height: 48px !important;
    font-size: 14px !important;
    border: none !important;
    transition: background-color 0.3s ease !important;
    flex-grow: 1; /* Ocupa el espacio restante */
}

#woosq-popup form.cart .single_add_to_cart_button.button:hover {
    background-color: #AFAED3 !important; /* Tu color hover */
}

/* === FIN ESTILOS WOOSQ POPUP === */


/* =================================================================== */
/* === 2. PRODUCTOS POR CANTIDAD (WPCPO) - VERSIÓN DASHICONS (IGUAL A YITH) === */
/* =================================================================== */

/* --- 0. Layout General --- */
.wpcpo-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
}

/* --- 1. Títulos de Sección --- */
.wpcpo-option-appearance-heading h4 {
    font-family: 'stratos-lights', sans-serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    line-height: 24px !important;
    color: #0F1111 !important; 
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin-top: 30px !important;
    padding-bottom: 1px !important;
}

/* --- 2. Títulos de Opciones (La barra clicable) --- */
.wpcpo-option-name {
    /* TRUCO: Font-size 0 oculta el "+" de texto que pone el plugin por defecto */
    font-size: 0px !important; 

    /* Flexbox para alinear icono y texto */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start; 
    gap: 10px; 
    cursor: pointer;
    user-select: none;
    padding: 10px 0px 10px 0px!important; 

    /* Bordes y Color Base */
    border: 1px solid #009C7E !important; 
    border-right: 0px !important; 
    border-left: 0px !important;
    background-color: transparent !important;
    color: #009C7E !important; 
    transition: all 0.2s ease-in-out; 
}

/* --- 3. EL ICONO DASHICON (IGUAL QUE YITH) --- */

/* Aseguramos que no hay nada extra */
.wpcpo-option-name::after {
    content: none !important;
    display: none !important;
}

/* Creamos el icono usando DASHICONS */
.wpcpo-option-name::before {
    content: '\f543'; /* EL ICONO DE YITH (PLUS) */
    font-family: 'dashicons' !important; /* Fuente de iconos de WP */
    
    display: inline-block;
    font-size: 22px !important; /* Restauramos tamaño visible */
    line-height: 1;
    color: #009C7E; 
    transition: all 0.2s ease;
    margin-right: 5px; /* Ajuste fino de espacio */
}

/* --- 4. EL TEXTO DEL TÍTULO (RESTAURAR VISIBILIDAD) --- */
/* Es vital restaurar el tamaño de letra aquí porque el padre tiene 0px */
.wpcpo-option-name strong,
.wpcpo-option-name span {
    font-family: 'stratos-lights', sans-serif !important;
    font-weight: 400 !important;
    font-size: 20px !important; /* Restauramos tamaño visible */
    color: #009C7E !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
}

/* --- 5. ESTADOS ACTIVOS (AL ABRIRSE) --- */

/* Fondo Verde y Texto Blanco */
.wpcpo-option.active .wpcpo-option-name,
.wpcpo-option.wpcpo-open .wpcpo-option-name {
    background-color: #009C7E !important; 
}

/* Texto interno a Blanco */
.wpcpo-option.active .wpcpo-option-name strong,
.wpcpo-option.wpcpo-open .wpcpo-option-name strong,
.wpcpo-option.active .wpcpo-option-name span,
.wpcpo-option.wpcpo-open .wpcpo-option-name span {
    color: #ffffff !important;
}

/* CAMBIO DE ICONO AL ABRIR (IGUAL QUE YITH) */
.wpcpo-option.active .wpcpo-option-name::before,
.wpcpo-option.wpcpo-open .wpcpo-option-name::before {
    content: '\f460'; /* EL ICONO DE YITH (MINUS/CLOSE) */
    color: #ffffff !important; 
    transform: rotate(0deg); /* Aseguramos que no gire, solo cambie */
}

/* --- 6. REGLA CLAVE: COLLAPSE DE BORDES --- */
.wpcpo-option {
    margin-top: 0 !important;
}
.wpcpo-option + .wpcpo-option {
    margin-top: -1px !important; 
}

/* =================================================================== */
/* === B. CONTENIDO DESPLEGABLE (Cuerpo del acordeón) === */
/* =================================================================== */

.wpcpo-option-form {
    display: none; 
    padding: 15px 10px 15px 10px !important;
    border-bottom: 1px solid #009C7E !important; 
    margin-bottom: -1px !important;
}

.wpcpo-option.active .wpcpo-option-form,
.wpcpo-option.wpcpo-open .wpcpo-option-form {
    display: block !important;
}

.wpcpo-wrapper .wpcpo-option-form p.form-row {
    display: block !important; 
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}

.wpcpo-wrapper .wpcpo-option-form label {
    display: flex;
    align-items: center; 
    gap: 10px;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.4;
    cursor: pointer;
    font-family: 'stratos-lights', sans-serif !important;
    font-size: 18px !important;
}

.wpcpo-wrapper .wpcpo-option-form input[type="text"],
.wpcpo-wrapper .wpcpo-option-form input[type="number"],
.wpcpo-wrapper .wpcpo-option-form select {
    width: 100%;
    margin-top: 5px;
    border: 1px solid #009C7E; 
    border-radius: 30px !important;
    background-color: transparent!important;
    color: #009C7E !important;
    padding: 5px 15px !important;
    outline: none !important;
}

.wpcpo-wrapper .wpcpo-total {
    display: none !important; 
}

/* === FIN SECCIÓN 2 === */


/* =================================================================== */
/* === 3. PRODUCTOS CON PERSONALIZACIONES YITH === */
/* === A. ESTILOS PARA OPCIONES YITH === */
/* ============================================ */

/* --- 1. Estilos del Título del Acordeón --- */
/* Esta regla se aplica a CUALQUIER título de addon */
#yith-wapo-container .wapo-addon-title {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border: none !important;
    background-color: transparent !important;
    color: #009C7E !important;
    font-family: 'stratos-lights', sans-serif !important;
    font-weight: 400 !important;
    font-size: 20px !important;
    line-height: 26px !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase;
}

/* --- 2. Lógica de Bordes (Ahora más inteligente) --- */
/* A TODOS los títulos cerrados de addon, les ponemos una línea ABAJO. */
#yith-wapo-container .yith-wapo-addon-type-label .wapo-addon-title.toggle-closed,
#yith-wapo-container .yith-wapo-addon-type-text .wapo-addon-title.toggle-closed,
#yith-wapo-container .yith-wapo-addon-type-checkbox .wapo-addon-title.toggle-closed,
#yith-wapo-container .yith-wapo-addon-type-date .wapo-addon-title.toggle-closed,
#yith-wapo-container .yith-wapo-addon  .yith-wapo-addon{
    border-top: 1px solid #009C7E !important;
    border-bottom: 1px solid #009C7E !important;
    margin: 0px;
    margin-top: -1px !important; /* <-- ¡ESTA ES LA MAGIA! */
}

/* --- 3. Eliminamos el espacio vertical entre addons --- */
#yith-wapo-container .yith-wapo-addon {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}
.yith-wapo-block .yith-wapo-addon:not(.empty-title).wapo-toggle .wapo-addon-title {
    margin-bottom: 0px !important;
}

/* --- 4. Estilos para el Título ABIERTO --- */
#yith-wapo-container .wapo-addon-title.toggle-open {
    padding: 9px 10px;
    background-color: #009C7E !important;
    color: #fff !important;
    font-weight: 500 !important;
}

/* --- 5. Estilos para las cuadrículas de opciones (grids) --- */
#yith-wapo-container .options.per-row-1.grid,
#yith-wapo-container .options.per-row-2.grid,
#yith-wapo-container .options.per-row-3.grid,
#yith-wapo-container .options.per-row-4.grid,
#yith-wapo-container .options.per-row-5.grid,
#yith-wapo-container .options.per-row-6.grid,
#yith-wapo-container .options.per-row-7.grid,
#yith-wapo-container .options.per-row-8.grid,
#yith-wapo-container .options.per-row-9.grid, 
#yith-wapo-container .options.per-row-10.grid {
    padding: 20px 10px 30px 10px; /* Más padding superior */
    margin-top: 0px; /* Quitamos el margen superior */
    border-top: none !important;
    border-bottom: 1px solid #009C7E !important;
    background-color: transparent !important;
}

/* --- 6. (CORREGIDO) Ajustar line-height y negrita de las descripciones --- */
/* Texto de la muestra en negrita (y otros textos de tipo 'html_text') */
.yith-wapo-addon-type-html_text p {
    font-weight: 500 !important; /* Pone el texto en negrita */
    font-size: 18px;
    padding: 0px 10px 10px 10px;
    line-height: 1.2em; /* Espaciado de línea normal */
    text-align: center;
    font-family: stratos-lights, sans-serif;
}
/* Descripciones dentro de los acordeones (como la de 'Fecha de entrega') */
#yith-wapo-container .options-container .wapo-addon-description,
#yith-wapo-container .options-container .wapo-addon-description  {
    font-size: 18px !important;
    line-height: 1.4em !important; /* Menos espacio entre líneas */
    margin-bottom: 10px !important;
    margin-top: : 10px !important;
    padding-top: 15px;
    font-family: stratos-lights, sans-serif;
}


/* ==================================================== */
/* === B. ESTILOS PARA LA TABLA DE PRECIOS (YITH) === */
/* ==================================================== */

/* (CORREGIDO) Separamos la tabla de precios de los addons */
#wapo-total-price-table {
    margin-top: 25px !important;
}

/* (CORREGIDO) Reduce el espaciado entre las filas */
#wapo-total-price-table th,
#wapo-total-price-table td {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
#wapo-total-price-table,
#wapo-total-price-table th,
#wapo-total-price-table td,
#wapo-total-price-table small {
    color: #302b2a !important;
    font-size: 12px !important;
    font-family: 'stratos', 'stratos-lights', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-weight: 300 !important;
}
#wapo-total-price-table .wapo-total-order th,
#wapo-total-price-table .wapo-total-order td {
    font-weight: 500 !important;
}
#wapo-total-price-table,
#wapo-total-price-table table,
#wapo-total-price-table tr,
#wapo-total-price-table th,
#wapo-total-price-table td {
    border: none !important;
    border-collapse: collapse !important;
    background-color: transparent !important;
}

/* === FIN PRODUCTOS PERSOZALIDOS YITH === */
/* === FIN PERSONALIZAR EL BOTÓN "HAZLO TUYO" (WOOSQ) === */



/* =================================================================== */
/* === CORRECCIÓN PARA VARIACIONES EN LA TABLA DE CHECKOUT (Royal Addons) === */
/* =================================================================== */

/* 1. Anulamos la regla 'display: flex' que has encontrado */
/* Esto fuerza al contenedor <dl class="variation"> a volver a ser un bloque */
.elementor-widget[class*="elementor-widget-wpr-"] table.shop_table .variation {
    display: block !important; /* Vuelve al comportamiento vertical por defecto */
    margin-top: 8px; /* Añade un espacio después del nombre del producto */
}

/* 2. Damos estilo a las etiquetas (dt) y valores (dd) para que se apilen ordenadamente */
/* Nos aseguramos de que cada opción (dt) y su valor (dd) ocupen su propia línea */
.woocommerce-checkout table.shop_table .variation dt,
.woocommerce-checkout table.shop_table .variation dd {
    display: block !important; 
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5em; /* Espaciado de línea normal */
}

/* Estilo para la etiqueta de la opción (ej. "Tamaño:") */
.woocommerce-checkout table.shop_table .variation dt {
    font-weight: 600 !important;
    font-size: 0.95em;
    color: #333;
}

/* Estilo para el valor de la opción (ej. "L (+24.00€)") */
.woocommerce-checkout table.shop_table .variation dd {
    font-weight: 400 !important;
    font-size: 0.9em;
    padding-left: 10px !important; /* Pequeña sangría para el valor */
    margin-bottom: 5px !important; /* Espacio entre cada par de opciones */
}

/* Ocultamos la etiqueta 'div' vacía que aparece en tu captura */
.woocommerce-checkout table.shop_table .variation dl.variation > div {
    display: none;
}

/* =================================================================== */
/* === FIX: CHECKOUT FINAL - FORZAR APILAMIENTO DE TÉRMINOS Y BOTÓN === */
/* =================================================================== */

/* Target the main checkout final row and force block behavior (stacking) */
.woocommerce-checkout .form-row.place-order {
    display: block !important;
    clear: both !important; /* Asegura que no intente flotar junto a nada */
    width: 100% !important;
}

/* Asegura que los contenedores de los checkboxes (Términos y Marketing)
   también se stackeen y no intenten alinearse en fila. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout #ws_opt_in_field,
.woocommerce-checkout .form-row.terms {
    display: block !important;
    width: 100% !important;
    margin-bottom: 15px !important;
}

/* Ajuste del botón para que no se vea presionado si hay un flex activo */
.woocommerce-checkout #place_order {
    width: 100% !important;
    display: block !important;
}


/* =================================================================== */
/* === ESTILOS PARA LA CUADRÍCULA DE PRODUCTOS (TIENDA/CATEGORÍAS) === */
/* =================================================================== */

/* --- 1. Nivelar Cajas (Equal Height) --- */

/* Forzamos que la lista de productos (el <ul>) sea un contenedor flex */
.woocommerce ul.products {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch !important; /* Clave: Hace que todas las cajas de la fila tengan la misma altura */
}

/* Forzamos que cada caja de producto (el <li>) sea un contenedor flex vertical */
.woocommerce ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important; /* Permite que la caja se estire para llenar el espacio */
}

/* Forzamos que el enlace principal (que envuelve todo) se estire */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important; /* ¡Esta es la clave! Hace que el contenido (img, título, precio) crezca */
    text-decoration: none !important; /* Quita el subrayado del enlace */
}

/* --- 2. Centrar Todo y Estilo de Imagen --- */

/* Centra el Título y el Precio */
.woocommerce ul.products li.product {
    text-align: center !important; 
}

/* Redondea la Imagen */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img {
    border-radius: 30px !important;
    margin-bottom: 15px; /* Espacio entre la imagen y el título */
}

/* --- 3. Estilo del Título (Desktop) --- */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: #009C7E !important; /* Tu color turquesa */
    font-size: 18px !important;
    font-weight: 600 !important; /* Un grosor legible */
    line-height: 1.3em;
}

/* --- 4. Estilo del Precio (Desktop) --- */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
    color: #302b2a !important; /* Tu color negro/oscuro */
    font-size: 18px !important;
    font-weight: 700 !important;
    padding-top: 5px; /* Espacio entre título y precio */
}

/* --- 5. Nivelar el Botón "HAZLO TUYO" --- */
/* Esta regla empuja el botón al fondo de la caja,
   anulando el 'margin-top: 15px' que ya tenías */
.woocommerce ul.products li.product .woosq-btn.hazlotuyo {
    margin-top: auto !important; /* ¡La magia de la nivelación! */
    margin-bottom: 15px; /* Añade un espacio de aire al final de la caja */
}

/* =================================================================== */
/* === 6. ESTILOS PARA MÓVIL (max-width 768px) === */
/* =================================================================== */
@media (max-width: 768px) {
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 14px !important;
    }

    .woocommerce ul.products li.product .price,
    .woocommerce ul.products li.product .price .woocommerce-Price-amount {
        font-size: 14px !important;
    }
}/* End custom CSS */