/*
Theme Name: Cavare Template Monster Pro
Theme URI: https://cavareagency.com/monster-template
Author: Cavare Agency
Author URI: https://cavareagency.com/
Description: La plantilla definitiva de alto rendimiento para WordPress y WooCommerce. Sin dependencias de maquetadores, controlada 100% desde el Customizer.
Version: 1.0.0-beta
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cavare
*/

/* ===================================================================
ÍNDICE DE ESTILOS (TABLE OF CONTENTS)
===================================================================
1.  VARIABLES Y CONFIGURACIÓN GLOBAL
2.  RESETS Y ESTILOS BASE (body, h1-h6, a, etc.)
3.  SISTEMA DE REJILLA (Grid System)
4.  ESTRUCTURA Y LAYOUT (header, footer, page titles)
5.  COMPONENTES DE UI (botones, formularios, tarjetas, menús)
6.  ESTILOS DE WOOCOMMERCE
6.1. General y Notificaciones
6.2. Tienda / Archivo de Productos
6.3. Producto Individual
6.4. Carrito y Checkout
6.5. Mi Cuenta
7.  ESTILOS DE PÁGINAS ESPECÍFICAS (Front Page)
7.1. Sección Hero
7.2. Sección Servicios
8.  CLASES DE UTILIDAD Y FIXES
9.  MEDIA QUERIES (Responsive Design)
=================================================================== */

/* =========================================
1. VARIABLES Y CONFIGURACIÓN GLOBAL
========================================= */
:root {
/* Paleta Principal */
--bg-body: #FFFFFF;
--bg-secondary: #F5F5F7;
--text-main: #1D1D1F;
--text-body: #424245;
/* Identidad de Marca */
--brand-primary: #BEA10D;
--brand-dark: #111111;
--brand-blue: #009ad8;
--brand-red: #bc1d22;
/* Interfaz */
--radius-lg: 18px;
--radius-sm: 8px;
--shadow-soft: 0 10px 30px rgba(0,0,0,0.08);
--header-height: 90px;
--font-stack: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* =========================================
2. RESETS Y ESTILOS BASE
========================================= */
*, *::before, *::after { 
box-sizing: border-box; 
}
html, body {
max-width: 100% !important;
overflow-x: hidden !important; /* Prohibido el scroll horizontal */
width: 100%;
}

* {
box-sizing: border-box; /* Asegura que el padding no sume al ancho */
}
body {
margin: 0;
background-color: var(--bg-primary);
color: var(--text-general);
font-family: var(--font-stack);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}

img { 
max-width: 100%; 
height: auto; 
display: block; 
}
/* ENLACES GLOBALES */
a {
color: var(--link-color);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--link-hover-color);
}
/* BOTONES GLOBALES */
.btn, .button, input[type="submit"] {
background-color: var(--button-bg) !important;
color: var(--button-text) !important;
transition: all 0.3s ease;
}
.btn:hover, .button:hover, input[type="submit"]:hover {
background-color: var(--button-bg-hover) !important;
color: var(--button-text-hover) !important;
}
ul { 
list-style: none; 
padding: 0; 
margin: 0; 
}
h1, h2, h3, h4, h5, h6, .title {
color: var(--text-main);
font-weight: 400;
letter-spacing: -0.02em;
margin-bottom: 1rem;
line-height: 1.2;
}
h1 { 
font-size: 3.5rem; 
}
.display-4 { 
font-size: 2.5rem; 
font-weight: 700; 
}
h6, .h6 {
font-weight: 300 !important;
font-size: 32px;
}
.topbarrs  .container  ul li a {
text-transform: uppercase;
color: var(--c-bg-light) !important;
}
.topbarrs  .container  ul .woocommerce-mini-cart-item a {
text-transform: uppercase;
color: var(--c-primary) !important;
}
#wpadminbar a {
color: var(--c-bg-light) !important;
}
#wpadminbar a:hover {
color: var(--link-hover-color) !important;
}

/* =========================================
3. SISTEMA DE REJILLA (Grid System)
========================================= */
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
max-width: 1200px;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
[class*="col-"] {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
/* =========================================
4. ESTRUCTURA Y LAYOUT
========================================= */
/* --- Header --- */
.site-header {
top: 0px;
width: 100%;
z-index: 1001;
transition: all 0.3s ease;
/* overflow: visible para submenús */
overflow: visible !important;
}
.header-main {
height: 100%;
display: flex;
align-items: center;
overflow: visible !important;
border-bottom: 1px solid var(--c-primary);
box-shadow: 0.5px 0.5px 22px var(--c-primary);
}
.topbarrs  .button {
color: var(--button-text) !important; ;
font-size: 14px;
text-transform: uppercase;
padding: 2px 10px;
margin: 6px;  
}
.topbarrs {
color: #f5f5f7;
font-size: 12px;
width: 100%;
z-index: 1002;
overflow: visible !important;
background-color: var(--c-primary);
}
.text-muted {
color: var(--c-bg-light) !important;
text-align: center;
margin-bottom: 10px !important;
}
.text-muted p{
text-align: justify;
margin-bottom: 10px !important;
}
.attachment-woocommerce_thumbnail {
max-width: 100%;
height: auto;
display: block;
margin: 10px auto;
padding: 13px;
}
.topbarrs a {
color:var(--button-text);
font-size: 14px;
text-transform: uppercase;  
}
.topbarrs a:hover { 
color: var(--button-text-hover); 
}
/* --- Footer --- */
.footer-wrapper {
    color: var(--c-bg-light) !important;
    background-color: #8D6789 !important;
    padding-bottom: 0px !important;
    padding-top: 20px !important;
}
.footer-wrapper h4 {
    color: #fff;
    margin-bottom: 25px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.footer-wrapper a { 
    color: #aaa; 
}
.footer-wrapper a:hover { 
    color: var(--c-primary); 
}
.page-title{
    background-color: var(--c-primary) !important;
    font-size: 12px;
    text-align: left;
    margin-top: 0px;
    padding: 10px 10px 10px;
    border-radius: 0px 0px 10px 10px;
}
.carritocabeza .page-title {
    color: var(--bg-secondary);
    font-size: 23px;
    text-align: left;
    font-weight: 400;
}
/* Estilo para la fila de impuestos en los totales */
.tax-total td, .tax-total th {
    color: var(--c-primary);
    font-weight: 600;
    font-size: 14px;
}

/* Fix para que los pasos del checkout no salgan gigantes */
.cavare-checkout-steps-wrapper .cavare-steps {
    max-width: 400px;
    margin: 0 auto;
}
.cavare-checkout-steps-wrapper .step-name {
    color: #ffffff !important; /* Para que se vea sobre el fondo oscuro del título */
    opacity: 0.8;
}
.botonvideos a {
text-align: center;
border-radius: 0px !important;
}
.cavare-hero-dynamic-form {
margin-bottom: 30px;
}
.cavare-hero-dynamic-form form label span input{
margin-bottom: 0px !important;
padding: 10px !important;
}
.cavare-hero-dynamic-form form p{
color: var(--c-primary) !important;
}
.wpcf7 form p {
margin-bottom: 10px;
}
.site-info {
border-top: 0px solid #222;
padding-top: 00px;
text-align: center;
}
.demo_store {
position: fixed;
left: 0;
bottom: 0;
right: 0;
margin: 0;
padding: 1em;
background-color: var(--bg-secondary);
color: var(--c-primary);
z-index: 9999;
}
/* --- Títulos de Página (Carrito/Checkout) --- */
.shop-page-title-section {
background-color: var(--c-primary) !important;
color: var(--c-bg-light) !important;
padding: 60px 0 40px;
padding-top: 60px;

position: relative;
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.page-header {
display: none !important;
}
.wc-block-cart-items__row .wc-block-components-product-metadata__description p {
color:var(--c-primary) !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block {
color:var(--c-primary) !important;
}
.wc-block-cart__totals-title {
color:var(--c-primary) !important;
}
.wc-block-cart__submit-container a{
color:var(--c-bg-light) !important;
background-color: var(--c-primary);
}
.wc-block-cart__submit-container a:hover{
color:var(--c-accent) !important;
background-color: var(--c-secondary);
transform: scale(1.05);
box-shadow: 0 4px 10px 0px rgba(173, 181, 189, 0.6) !important;
}
.wc-block-components-checkout-order-summary__title p {
color:var(--c-primary) !important;
}
.wc-block-components-product-metadata__description p {
color:var(--c-primary) !important;
}
.wc-block-components-radio-control-accordion-content {
color:var(--c-primary) !important;
}
.wc-block-components-address-form label {
color:var(--c-primary) !important;
}
.cavare-thankyou-card p  {
color:var(--c-primary) !important;
}
.cavare-order-details-wrapper .woocommerce-customer-details address {
color: var(--c-primary) !important;
text-align: left;
}
.cavare-order-details-wrapper .woocommerce-customer-details address p{
color: var(--c-primary) !important;
text-align: left;
}
/* =========================================
5. COMPONENTES DE UI
========================================= */

.btn:hover, .button:hover, input[type="submit"]:hover {
background-color: var(--button-bg-hover) !important;
color: var(--button-text-hover) !important; /* <-- AÑADIDO/MODIFICADO */
}
.header-button a, .top-bar-cta-button {
background-color: var(--c-primary);
color: #f5f5f7 !important;
padding: 13px 18px 10px;
font-weight: 300;
font-size: 13px;
}
.header-button a:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px #424245;
}
.header-button span {   
color: var(--button-text) !important;
}
.btn-download {
display: inline-flex !important;
align-items: center;
background-color: var(--bg-secondary) !important;
color: var(--text-main) !important;
border: 1px solid #D2D2D7 !important;
font-size: 0.9rem !important;
font-weight: 500 !important;
padding: 10px 20px !important;
text-transform: none !important;
border-radius: 12px !important;
transition: all 0.3s ease;
text-decoration: none;
line-height: 1.5;
}
.btn-download:hover {
background-color: #E8E8ED !important;
border-color: #0071E3 !important;
color: #0071E3 !important;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.btn-download svg {
fill: currentColor;
}

/* --- Formularios --- */
.header-form {
background: #FFFFFF;
padding: 40px;
border-radius: 0px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
color: var(--text-main);
max-width: 450px;
margin-left: auto;
}
.header-form .head {
font-size: 1.5rem;
font-weight: 600;
text-align: center;
margin-bottom: 20px;
}
.header-form .head span { 
color: var(--c-primary); 
}
.header-form input[type="text"],
.header-form input[type="email"],
.header-form textarea {
width: 100%;
background: var(--bg-secondary);
border: 1px solid transparent;
padding: 15px;
border-radius: 12px;
margin-bottom: 15px;
font-size: 16px;
transition: all 0.3s;
}
.header-form input:focus,
.header-form textarea:focus {
background: #fff;
border-color: var(--c-primary);
outline: none;
}
.header-form button[type="submit"] {
width: 100%;
background-color: var(--c-primary);
color: #000;
font-weight: 700;
padding: 18px;
border-radius: 12px;
font-size: 18px;
border: none;
cursor: pointer;
transition: 0.3s;
}
.header-form button[type="submit"]:hover {
background-color: #e5c310;
transform: translateY(-2px);
}

.cavare-form-style label {
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 5px;
color: var(--text-main);
}
.cavare-form-style input[type="text"],
.cavare-form-style input[type="email"],
.cavare-form-style textarea {
background-color: var(--bg-secondary);
border: 1px solid transparent;
font-size: 0.95rem;
}
.cavare-form-style input:focus,
.cavare-form-style textarea:focus {
background-color: #fff;
border-color: var(--c-primary);
}
.cavare-form-style input[type="submit"] {
width: 100%;
margin-top: 10px;
padding: 15px;
}

/* --- Tarjetas (Cards) --- */
.pricing-card {
background: #fff;
border-radius: 20px;
padding: 40px 20px;
box-shadow: var(--shadow-soft);
transition: 0.3s;
border: 1px solid transparent;
height: 100%;
}
.pricing-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}
.pricing-card .head {
font-size: 1.2rem;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 15px;
}
.pricing-card .body h1 {
font-size: 3.5rem;
font-weight: 800;
}
.pricing-card ul li {
padding: 10px 0;
border-bottom: 1px solid #f0f0f0;
}
.pricing-card.popular {
border: 2px solid var(--c-primary);
position: relative;
}

/* --- Navegación y Menús --- */
.main-navigation,
.navbar-collapse {
overflow: visible !important;
}
.main-navigation a {
color: var(--text-main);
font-weight: 500;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
}
.main-navigation a:hover {
color: var(--c-primary);
}

.navbar-nav .menu-item-has-children {
position: relative;
}
/* --- Mini Cart (Header) --- */
.cavare-header-cart {
position: relative;
display: inline-block;
vertical-align: middle;
margin-left: 15px;
padding: 5px 0;
}
.cavare-header-cart .cart-contents {
display: flex;
align-items: center;
color: #fff; /* O el color del texto de tu topbar */
text-decoration: none;
font-weight: 600;
font-size: 13px;
transition: opacity 0.3s;
}
.cavare-header-cart .cart-contents:hover {
opacity: 0.8;
}
.cavare-header-cart .cart-icon svg {
width: 15px;
height: 15px;
margin-right: 5px;
fill: currentColor;
color: #f5f5f7;
}
.cavare-header-cart .cart-total {
margin-left: 5px;
}
.cavare-header-cart .cart-count {
background-color: var(--brand-red); /* Color de acento */
color: #fff;
font-size: 10px;
font-weight: 700;
min-width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
border-radius: 50%;
display: inline-block;
margin-left: 2px;
vertical-align: top;
}
.site-header-cart {
position: absolute;
top: 100%;
right: 0;
width: 320px;
background-color: #fff;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
z-index: 999999;
border-radius: 0 0 12px 12px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
border-top: 3px solid var(--c-primary);
}
.cavare-header-cart:hover .site-header-cart {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.site-header-cart .widget_shopping_cart_content {
padding: 20px;
color: var(--text-body);
}
.site-header-cart ul.cart_list li {
padding: 10px 0;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
}
.site-header-cart ul.cart_list li img {
width: 50px;
height: 50px;
object-fit: cover;
margin-right: 15px;
border-radius: 4px;
}
.site-header-cart .total {
border-top: 1px solid #eee;
padding: 15px 0;
text-align: center;
font-weight: 700;
color: var(--text-main);
}
.site-header-cart .buttons {
display: flex;
gap: 10px;
}
.site-header-cart .buttons .button {
width: 100%;
text-align: center;
font-size: 0.8rem !important; /* Forzar tamaño para que no herede el global */
padding: 10px !important;
}

/* ===================================================================
ESTILOS PARA PÁGINA 404
=================================================================== */
.error-404 {
display: flex;
align-items: center;
min-height: 60vh; /* Ocupa al menos el 60% de la altura de la pantalla */
padding: 60px 0;
}

.error-404 .page-title {
font-size: 3rem;
font-weight: 700;
color: var(--brand-red, #bc1d22); /* Color rojo para destacar el error */
margin-bottom: 20px;
}

.error-404 p {
font-size: 1.2rem;
margin-bottom: 30px;
}

.error-404 .search-form {
max-width: 500px;
margin: 0 auto 30px;
}

/* Submenús (Dropdown) */
.dropdown-menu {
display: block;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, transform 0.3s ease;
transform: translateY(10px);
margin: 0;
padding: 0;
border-radius: 0 0 8px 8px;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
border-top: 3px solid var(--c-primary);
min-width: 280px;
position: absolute;
top: 100%;
left: 0;
z-index: 9999;
background-color: #fff;
}
.dropdown:hover > .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu a {
font-size: 16px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 10px 20px;
font-weight: 400;
color: #333 !important;
text-transform: none;
}
.dropdown-menu a:hover {
background-color: var(--bg-secondary);
color: var(--c-primary) !important;
}

/* Submenú del Top Bar */
.topbarrs .dropdown-menu {
background-color: #111;
}
.topbarrs .dropdown-menu a {
color: #eee !important;
}
.topbarrs .dropdown-menu a:hover {
background-color: #333;
color: #fff !important;
}

/* Menú Móvil */
#mobile-header .custom-logo-link img, 
.mobile-logo-wrapper img {
max-height: 50px !important;
width: auto !important;
max-width: 200px !important;
}
.navbar-toggler.mobile-menu-trigger {
border: none !important;
background-color: transparent !important;
padding: 5px !important;
outline: none !important;
box-shadow: none !important;
}
.navbar-toggler.mobile-menu-trigger .dashicons {
color: var(--c-secondary) !important;
font-size: 32px !important;
line-height: 1;
}
#mobile-menu-container {
background-color: #FFFFFF !important;
width: 100%;
position: absolute;
z-index: 1000;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
max-height: 70vh;
overflow-y: auto;
border-bottom: 1px solid #eee;
}
.mobile-nav li {
position: relative;
border-bottom: 1px solid #f0f0f0;
}
.mobile-nav li a {
display: block;
padding: 12px 0;
font-size: 16px;
color: var(--text-main);
font-weight: 500;
text-decoration: none;
}

/* Pasos de Proceso (Checkout) */
.cavare-steps {
display: flex;
justify-content: center;
gap: 50px;
list-style: none;
padding: 0;
margin: 0;
position: relative;
}
.cavare-steps::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 10%;
  right: 10%;
  height: 2px;
  background-color: var(--c-primary);
  z-index: 0;
  max-width: 235px;
  margin: 0 auto;
}
.cavare-steps li {
position: relative;
z-index: 1;
text-align: center;
opacity: 0.9;
transition: 0.3s;
}
.cavare-steps li.active {
opacity: 1;
font-weight: 700;
}
.cavare-steps .step-num {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  background-color: var(--c-secondary);
  margin: 0 auto 10px;
  border: 0px solid #555;
}
.cavare-steps li.active .step-num {
background-color: var(--c-primary);
color: var(--c-bg-light);
border: 0;
}

.card-body .text-muted p {
color: var(--c-secondary) !important;
}
/* =========================================
6. ESTILOS DE WOOCOMMERCE
========================================= */

/* --- 6.1. General y Notificaciones --- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
background-color: #ffffff !important;
color: var(--text-main) !important;
border: none !important;
border-left: 5px solid var(--c-primary) !important;
padding: 15px 20px !important;
margin: 20px 0 !important;
border-radius: 8px !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
display: flex !important;
flex-wrap: wrap;
align-items: center !important;
justify-content: space-between !important;
width: 100%;
font-size: 0.95rem;
position: relative;
list-style: none !important;
clear: both;
}
.woocommerce-message { border-left-color: var(--c-primary) !important; }
.woocommerce-info { border-left-color: var(--c-primary) !important; }
.woocommerce-error { border-left-color: #F85C70 !important; }

.woocommerce-message::before, 
.woocommerce-info::before, 
.woocommerce-error::before {
display: none !important;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
float: none !important;
margin: 0 0 0 20px !important;
order: 2;
background-color: transparent !important;
color: var(--text-main) !important;
border: 1px solid #ddd !important;
padding: 8px 20px !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
border-radius: 50px !important;
text-transform: uppercase;
}
.woocommerce-message .button:hover {
background-color: var(--text-main) !important;
color: #fff !important;
border-color: var(--text-main) !important;
}

.woocommerce-breadcrumb {
color: var(--brand-red);
font-size: 0.9rem;
font-weight: 400;
word-spacing: 3px;
}
.woocommerce-breadcrumb a {
color: var(--text-body);
font-size: 14px;
}
.botonvideos {
margin-bottom: 0 auto;
}
.price, .amount {
display: inline-flex;
align-items: flex-start;
line-height: 1;
}
.price span, .amount span{
    color: var(--c-accent);
    font-weight: 500;
}
.price-box .h1 dbi {
    font-weight: 600;
}
.pricing-card .mt-auto a{
border-radius: 0px;
}
.cavare-decimals {
vertical-align: top;
position: relative;
top: 0.1em;
margin-left: 1px;
}
/* --- 6.2. Tienda / Archivo de Productos --- */
.woocommerce ul.products li.product {
background: var(--c-bg-light);
border-radius: 15px;
padding: 15px; /* El padding está bien, el margin NO */
transition: 0.3s;
animation: fadeUp 0.5s ease forwards;
/* margin: 5px !important;  <-- BORRA ESTA LÍNEA */
}
.woocommerce ul.products li.product:hover {
box-shadow: var(--shadow-soft);
}
.woocommerce ul.products li.product img {
border-radius: 10px !important;
margin-bottom: 15px !important;
}
.woocommerce-loop-product__title {
font-size: 1.1rem !important;
color: var(--text-main);
}
.woocommerce a.button {
background-color: var(--button-bg) !important;
color: var(--button-text) !important;
border-radius: 0px !important;
margin: 0 auto;
padding: 15px 15px 12px;
}
.woocommerce a.button:hover {
background-color: var(--button-bg-hover) !important;
color: var(--button-text-hover);
}

.cavare-load-more-wrapper {
width: 100%;
clear: both;
padding-top: 40px;
}
#cavare-load-more-btn {
transition: all 0.3s ease;
cursor: pointer;
min-width: 200px;
}
#cavare-load-more-btn.loading {
opacity: 0.7;
cursor: wait;
pointer-events: none;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

/* --- 6.3. Producto Individual --- */
.woocommerce div.product form.cart {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 15px;
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid var(--bg-secondary);
}
.woocommerce div.product form.cart .button {
height: 50px;
padding: 0 40px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 600;
border-radius: 0px;
margin: 0 !important;
}
.textskus {
color: var(--c-primary) !important;
text-transform: uppercase;
font-weight: 600 !important;
}
.textcatego {
color: var(--c-primary) !important;
text-transform: uppercase;
font-weight: 600 !important;
}
.texttagss {
color: var(--c-primary) !important;
text-transform: uppercase;
font-weight: 600 !important;
}
.single_add_to_cart_button {
background-color: var(--button-bg) !important;
color: var(--button-text) !important;
border: none;
font-weight: 400 !important;
border-radius: 0px !important;
}
.single_add_to_cart_button:hover {
background-color: #000 !important;
transform: translateY(-2px);
}
.buy_now_button {
background-color: var(--button-bg-hover) !important;
color: #fff !important;
border: none;
}
.buy_now_button:hover {
background-color: #9a161a !important;
filter: brightness(1.1);
transform: translateY(-2px);
}

.product_meta_container {
font-size: 0.9rem;
}
.meta-item {
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 8px;
margin-bottom: 8px;
}
.meta-item:last-child {
border-bottom: none;
}
.meta-item .label {
min-width: 80px;
font-weight: 500;
}
.meta-item a {
color: var(--text-body);
text-decoration: underline;
}
.meta-item a:hover {
color: var(--link-hover-color);
}

.variations {
order: -17 !important;
width: 100%;
margin-bottom: 10px;
margin-top: 33px;
}
.variations td {
padding-bottom: 10px;
display: block;
}
.variations label {
font-weight: 600;
color: var(--text-main);
}
.variations select {
width: 100%;
height: 45px;
border-radius: var(--radius-sm);
}

.single_variation_wrap {
order: -15 !important;
display: flex;
flex-direction: column;
}
.woocommerce-variation-price {
order: 1;
margin-bottom: 20px;
width: 100%;
text-align: center;
}
.woocommerce-variation-price .price {
font-size: 2rem;
color: var(--c-primary);
font-weight: 700;
}
.woocommerce-variation-add-to-cart {
order: 2;
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px !important;
}
.woocommerce-variation-description {
width: 100%;
padding: 0px;
background-color: none;
border-radius: 3px;
border-left: 0px solid var(--c-primary);
color: var(--text-body);
margin: 0px;
}
.woocommerce-variation-availability {
order: -9 !important;
font-size: 0.9rem;
margin-top: 10px;
text-align: center;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
border-bottom: 1px solid #ddd !important;
padding: 0 !important;
margin: 0 0 30px !important;
list-style: none !important;
background: transparent !important;
display: flex;
gap: 20px;
border-radius: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: transparent !important;
border: none !important;
margin: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
display: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
padding: 10px 0 !important;
font-weight: 600 !important;
color: #aaa !important;
border-bottom: 2px solid transparent;
display: block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--c-primary) !important;
border-bottom-color: var(--c-primary) !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}

/* --- 6.4. Carrito y Checkout --- */
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header { 
display: none !important; 
}

.shop_table {
border-collapse: separate;
border-spacing: 0;
}
.shop_table th {
text-align: center !important;
font-weight: 400;
font-size: 14px;
padding: 10px;
}
.shop_table td {
padding: 20px;
vertical-align: middle;
}
.shop_table .product-thumbnail img {
max-width: 133px;
height: auto;
object-fit: cover;
border-radius: 0px;
padding: 0px;
margin: 0px;
}

.cart-collaterals {
    background-color: #fff;
    padding: 30px;
    border-radius: var(--radius-lg);
    border: 1px solid #eee;
    box-shadow: var(--shadow-soft);
    position: sticky;
    top: 100px;

}
.cart_totals h2 {
font-size: 24px;
border-bottom: 2px solid var(--c-primary);
padding-bottom: 15px;
margin-bottom: 20px;
color: var(--c-primary);
font-weight: 500;
margin-top: 20px;
text-align: center;
}
.container h3 {
color: var(--c-primary) !important;
margin-bottom: 10px !important;
margin-top: 25px !important;
font-weight: 500 !important;
}
.cart_totals table {
width: 100%;
margin-bottom: 20px;
}
.cart_totals th, .cart_totals td {
padding: 15px 0;
border-bottom: 1px solid #eee;
}
.cart_totals .woocommerce-shipping-totals th, 
.cart_totals .woocommerce-shipping-totals td {
display: block !important;
width: 100% !important;
text-align: left !important;
border-bottom: 0 !important;
}
.cart_totals .woocommerce-shipping-totals th {
padding-bottom: 10px !important;
padding-top: 20px !important;
font-size: 1.1rem;
font-weight: 700;
text-transform: uppercase;
color: var(--text-main);
}
.cart_totals .woocommerce-shipping-totals td {
padding-top: 0 !important;
}
.woocommerce-shipping-methods {
list-style: none outside;
padding: 0;
margin: 0;
}
.woocommerce-shipping-methods li {
margin-bottom: 10px;
padding: 10px;
background-color: #fff;
border: 1px solid #eee;
border-radius: var(--radius-sm);
}

.wc-proceed-to-checkout .checkout-button {
display: block;
width: 100%;
padding: 15px;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 10px;
}

.woocommerce-checkout h3 {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-main);
margin-bottom: 25px;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.woocommerce-checkout .form-row {
margin-bottom: 20px;
width: 100%;
}
.woocommerce-checkout label {
font-size: 18px;
font-weight: 500;
margin-bottom: 5px;
display: block;
}
.woocommerce #cavare-cart-wrapper table.shop_table td, .woocommerce table.shop_table th {
border: 0px solid var(--c-text-body) !important;
}

.woocommerce-checkout input.input-text, 
.woocommerce-checkout select, 
.woocommerce-checkout textarea {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: var(--radius-sm);
background-color: #fff;
font-size: 1rem;
transition: all 0.3s;
}
.woocommerce-checkout input.input-text:focus {
border-color: var(--c-primary);
box-shadow: 0 0 0 3px rgba(190, 161, 13, 0.1);
}

.checkout-review-order-wrapper {
background-color: #fff;
border-radius: var(--radius-lg);
border: 1px solid #eee;
position: sticky;
top: 110px;
z-index: 10;
}
.woocommerce-checkout-review-order-table .order-total td {
border-top: 0px solid var(--c-primary);
border-bottom: none;
font-size: 1.2rem;
font-weight: 400;
color: var(--c-primary);
}
.shop_table tfoot .order-total {
background-color: beige;
}
.woocommerce table.shop_table td, .woocommerce table.shop_table th .product-name{

}
.woocommerce-checkout h3 {
font-size: 18px !important;
border-bottom: 1px solid var(--c-text-body);
padding-bottom: 10px;
}
.woocommerce-cart-form .cavare-coupon-top-wrapper .form-control {
height: calc(2.3rem + 15px);
}
.woocommerce table.shop_table td, .woocommerce table.shop_table th{

}
#payment {
background: var(--bg-secondary);
border-radius: var(--radius-sm);
padding: 20px;
margin-top: 20px;
}
#payment ul.payment_methods {
border-bottom: 1px solid #ddd;
padding-bottom: 15px;
margin-bottom: 15px;
list-style: none;
}
#payment ul.payment_methods li {
margin-bottom: 10px;
}
#payment div.payment_box {
background-color: #fff;
padding: 15px;
border-radius: var(--radius-sm);
font-size: 0.9rem;
margin-top: 10px;
}
#place_order {
width: 80%;
padding: 13px;
font-size: 1.1rem;
margin-top: 20px;
font-weight: 300;
}
.woocommerce-input-wrapper {
margin: 0 auto;
width: 80%;
}
#place_order:hover {
background-color: var(--text-body) !important;
transform: translateY(-2px);
box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;
}
/* --- 6.5. Mi Cuenta --- */
.woocommerce-account .entry-header {
display: none !important;
}
.woocommerce-account .row {

}
.woocommerce-MyAccount-navigation {
margin-bottom: 30px;
}
.woocommerce-MyAccount-navigation ul {
margin: 0;
display: flex; 
flex-direction: column; 
background: #f5f5f7; 
padding: 5px; 
border-radius: 0px; 
list-style: none;
}
.woocommerce-MyAccount-navigation li {
margin-bottom: 5px;
}
.woocommerce-MyAccount-navigation li a {
display: block;
padding: 10px 15px;
border-radius: 5px;
transition: 0.2s;
border-bottom: 1px solid #eee;
color: var(--link-color);
}
.woocommerce-MyAccount-navigation li.is-active a {
background-color: var(--button-bg) !important;
color: var(--button-text) !important;
font-weight: 400 !important;
}
.woocommerce-MyAccount-navigation li a:hover {
background-color: var(--button-bg-hover);
color: var(--button-text-hover);
font-weight: 400 !important;
}
.woocommerce-MyAccount-content form .form-row input.input-text {
background-color: #fff;
border: 1px solid #ddd !important;
padding: 12px 15px;
border-radius: var(--radius-sm);
height: 45px;
box-shadow: none !important;
}
.woocommerce-MyAccount-content a{
font-weight: 800;
color: var(--link-color);
}
.woocommerce-MyAccount-content a:hover{
color: var(--link-hover-color);
}
.woocommerce-MyAccount-content fieldset {
background: var(--bg-secondary);
border: 1px solid #eee;
padding: 20px;
border-radius: var(--radius-lg);
margin-bottom: 20px;
}
.woocommerce-MyAccount-content legend {
font-size: 1.2rem;
font-weight: 600;
color: var(--text-main);
padding: 0 10px;
}

.woocommerce-form-login .button,
.woocommerce-form-register .button {
border: none !important;
box-shadow: none !important;
padding: 15px !important;
height: auto !important;
line-height: normal !important;
margin-top: 10px;
border-radius: 50px !important;
}
.woocommerce-form-row {
position: relative;
}
.woocommerce button.show-password-input {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 10px !important;
margin: 0 !important;
width: auto !important;
height: auto !important;
position: absolute !important;
top: 50% !important;
right: 10px !important;
transform: translateY(-50%) !important;
color: #666 !important;
font-size: 0.9rem !important;
font-weight: normal !important;
text-transform: none !important;
line-height: 1 !important;
cursor: pointer;
z-index: 10;
}
.woocommerce button.show-password-input:hover {
color: var(--c-primary) !important;
}
.show-password-input::before {
font-family: 'Dashicons';
content: "\f177";
font-size: 20px;
}
.show-password-input.display-password::before {
content: "\f160";
}
.show-password-input span {
display: none; 
}


/* =========================================
7. ESTILOS DE PÁGINAS ESPECÍFICAS
========================================= */

/* --- 7.1. Sección Hero (Front Page) --- */
.front-page-hero-section {
position: relative;
min-height: 85vh;
display: flex;
align-items: center;
padding-top: 60px;
color: #fff;
}
.front-page-hero-section h3.header-title {
font-size: 4rem;
font-weight: 700;
line-height: 1.1;
margin-bottom: 20px;
color: #fff;
}
.front-page-hero-section h3.header-title strong {
color: var(--c-primary);
}

/* --- 7.2. Sección Servicios (Front Page) --- */
.section-services {
padding: 100px 0;
}
.cavare-service-card {
background: #FFFFFF;
border-radius: 20px;
overflow: hidden;
height: 100%;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 4px 20px rgba(0,0,0,0.04);
display: flex;
flex-direction: column;
text-align: center;
}
.cavare-service-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.12);
border-color: rgba(0,0,0,0);
}
.cavare-service-card .service-img-wrap {
height: 220px;
width: 100%;
overflow: hidden;
position: relative;
background-color: var(--bg-secondary);
display: flex;
align-items: center;
justify-content: center;
}
.cavare-service-card .service-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.cavare-service-card:hover .service-img-wrap img {
transform: scale(1.05);
}
.cavare-service-card .service-content {
padding: 30px 25px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.cavare-service-card h3 {
font-size: 1.4rem;
font-weight: 400 !important;;
margin-bottom: 12px;
}
.cavare-service-card p {
font-size: 0.95rem;
margin-bottom: 20px;
line-height: 1.6;
}
.cavare-service-card .service-link {
margin-top: auto;
color: var(--c-primary);
font-weight: 600;
font-size: 0.95rem;
display: inline-flex;
align-items: center;
}
.cavare-service-card .service-link i {
margin-left: 5px;
transition: margin 0.3s;
}
.cavare-service-card:hover .service-link i {
margin-left: 10px;
}
.section-services .row > div[class*='col-'] {
margin-bottom: 50px !important;
}

/* --- Lista de Pasos (Página Servicio) --- */
.service-content ol {
counter-reset: cavare-counter;
list-style: none;
padding: 0;
margin: 40px 0;
}
.service-content ol li {
position: relative;
padding-left: 60px;
margin-bottom: 30px;
}
.service-content ol li::before {
counter-increment: cavare-counter;
content: counter(cavare-counter);
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
background-color: var(--c-primary);
color: #000;
font-weight: 700;
border-radius: 50%;
text-align: center;
line-height: 40px;
font-size: 18px;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.service-content ol li strong {
display: block;
font-size: 1.2rem;
color: var(--text-main);
margin-bottom: 5px;
}
/* style.css */

/* --- 7.3. Sección Galería (Mosaico con CSS Grid) --- */
.cavare-mosaic-gallery {
display: grid;
/* Define 4 columnas de igual tamaño */
grid-template-columns: repeat(4, 1fr);
/* Define filas automáticas */
grid-auto-rows: 250px; /* Altura base de cada "celda" de la parrilla */
grid-auto-flow: dense; /* Intenta rellenar huecos */
gap: 15px; /* Espacio entre imágenes */
}

.cavare-mosaic-gallery .gallery-item {
overflow: hidden;
border-radius: var(--radius-sm, 8px);
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.cavare-mosaic-gallery .gallery-item a,
.cavare-mosaic-gallery .gallery-item img {
width: 100%;
height: 100%;
object-fit: cover; /* Asegura que la imagen llene el espacio sin deformarse */
display: block;
transition: transform 0.4s ease;
}

.cavare-mosaic-gallery .gallery-item a:hover img {
transform: scale(1.05);
}

/* --- TAMAÑOS PERSONALIZADOS PARA EL MOSAICO --- */
/* La imagen 2 será el doble de alta */
.cavare-mosaic-gallery .gallery-item:nth-child(2) {
grid-row: span 2;
}

/* La imagen 3 será el doble de ancha */
.cavare-mosaic-gallery .gallery-item:nth-child(3) {
grid-column: span 2;
}

/* La imagen 5 será cuadrada grande (2x2) */
.cavare-mosaic-gallery .gallery-item:nth-child(5) {
grid-column: span 2;
grid-row: span 2;
}

/* --- RESPONSIVE PARA EL MOSAICO --- */
/* Tablet: 2 columnas */
@media (max-width: 991px) {
.cavare-mosaic-gallery {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 200px;
}
/* En tablet, reseteamos los tamaños especiales para que fluya mejor */
.cavare-mosaic-gallery .gallery-item:nth-child(n) {
grid-column: span 1;
grid-row: span 1;
}
/* Pero podemos hacer que algunas sigan siendo más grandes si queremos */
.cavare-mosaic-gallery .gallery-item:nth-child(3) {
grid-column: span 2; /* Una imagen ancha */
}
}

/* Móvil: 1 columna */
@media (max-width: 576px) {
.cavare-mosaic-gallery {
grid-template-columns: 1fr;
grid-auto-rows: 300px;
}
/* En móvil, todas las imágenes ocupan 1x1 */
.cavare-mosaic-gallery .gallery-item:nth-child(n) {
grid-column: span 1;
grid-row: span 1;
}
}

/* =========================================
8. CLASES DE UTILIDAD Y FIXES
========================================= */
.vertical-center .row {
align-items: center !important;
}
.main-content-section .row,
.site-main .row,
#primary .row {
align-items: flex-start !important;
}
.targetadeimagen{
margin-bottom: 20px !important;
}
[class^="ti-"], [class*=" ti-"] {
font-family: 'themify' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.dashicons-menu::before {
content: "\f333";
}
.img-fluid {

margin: 0 auto;
}

/* =========================================
9. MEDIA QUERIES (Responsive Design)
========================================= */

/* --- Escritorio (a partir de 992px) --- */
@media (min-width: 992px) {
.col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-lg-3 { flex: 0 0 25%; max-width: 25%; }
.col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-lg-6 { flex: 0 0 50%; max-width: 50%; }
.col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }

.d-lg-block { display: block !important; }
.d-lg-none  { display: none !important; }

.main-navigation .navbar-nav > li {
position: relative !important;
display: flex;
align-items: center;
height: 100%;
}
.main-navigation .navbar-nav > li > a {
font-size: 18px !important;
}
.menu-item-has-children > a::after {

font-size: 12px;
margin-left: 5px;
color: inherit;
}
}

/* --- Tablet y Escritorio (a partir de 768px) --- */
@media (min-width: 768px) {


.d-md-block { display: block !important; }
.d-md-none { display: none !important; }
.text-md-left { text-align: left !important; }
.text-md-right { text-align: right !important; }

.variations td { 
display: table-cell; 
}
.variations label { 
margin-right: 15px; 
}
.border-right-md {
border-right: 1px solid #eee;
}
}

/* --- Móvil y Tablet (hasta 991px) --- */
@media (max-width: 991px) {
.main-navigation ul.sub-menu,
.topbarrs .nav ul.sub-menu {
position: static;
display: block;
box-shadow: none;
border: none;
background: rgba(0,0,0,0.05);
padding-left: 20px;
}
.menu-item-has-children > a::after { 
display: none; 
}

.main-navigation .navbar-nav {
width: 100%;
padding-bottom: 20px;
}
.main-navigation .navbar-nav > li {
border-bottom: 1px solid #eee;
display: block;
width: 100%;
}
.main-navigation .navbar-nav > li > a {
padding: 15px 0;
display: block;
font-weight: 600;
color: #333;
}
}

/* --- Solo Móvil (hasta 768px) --- */
@media (max-width: 768px) {
h1 { 
font-size: 2.5rem; 
}
.topbarrs { 
position: relative; 
height: auto; 
text-align: center; 
}
.header-main { 
flex-direction: column; 
gap: 15px; 
}
.front-page-hero-section { 
padding-top: 20px; 
text-align: center; 
}
.front-page-hero-section .row { 
flex-direction: column; 
}
.header-form { 
margin: 40px auto 0; 
}
.cavare-steps::before { 
display: none; 
}
.cavare-steps { 
gap: 20px; 
}
.shop-page-title-section { 
padding: 40px 0; 
}
.woocommerce-message, .woocommerce-info, .woocommerce-error {
flex-direction: column;
text-align: center;
gap: 15px;
}
.woocommerce-message .button {
margin: 0 !important;
width: 100%;
}
.section-services .row > div[class*='col-'] {
margin-bottom: 30px !important;
}
}
/* ===========================================================
FIX: DIRECCIÓN EN PÁGINA "THANK YOU" A UNA SOLA COLUMNA
=========================================================== */

/* 
* 1. Seleccionamos la página de "Pedido Recibido" usando la clase del body.
* 2. Apuntamos al contenedor de las direcciones.
*/
.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns--addresses {
display: flex;          /* Usamos flexbox */
flex-direction: column; /* Forzamos la dirección a ser vertical (una encima de otra) */
}

/*
* 3. Hacemos que cada columna (la de facturación y la de envío)
*    ocupe el 100% del ancho disponible.
*/
.woocommerce-order-received .woocommerce-customer-details .woocommerce-column {
flex: 0 0 100%; /* No crecer, no encoger, base del 100% */
max-width: 100%;
padding-right: 0; /* Opcional: quitamos padding para que quede perfecto */
padding-left: 0;
}
/* ===========================================================
SECCIÓN DE FORMULARIO DE CONTACTO EN PÁGINA DE PRODUCTO
=========================================================== */
.product-contact-form-section {
background-color: var(--bg-secondary);
padding-top: 60px;
padding-bottom: 60px;
margin-top: 60px;
border-radius: var(--radius-lg);
}
.product-contact-form-section h2 {
font-size: 2rem;
margin-bottom: 30px;
}
/* ===================================================================
ESTILOS PROFESIONALES PARA CONTACT FORM 7
=================================================================== */
/* --- 1. Contenedor General y Espaciado --- */
.wpcf7 {
text-align: left; /* Asegura la alineación a la izquierda dentro de contenedores centrados */
}
.wpcf7 form p {
margin-bottom: 10px; /* Añade espacio vertical entre cada campo */
}
/* --- 2. Estilo para Campos de Texto, Email, Tel y Textarea --- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
width: 100%;
padding: 15px;
border: 1px solid #ddd;
border-radius: var(--radius-sm, 8px); /* Usa tu variable de borde o un valor por defecto */
background-color: var(--bg-secondary, #F5F5F7);
font-size: 16px;
color: var(--c-primary, #424245);
transition: all 0.3s ease;
-webkit-appearance: none; /* Quita estilos por defecto de iOS */
max-height: 166px;
}
/* Efecto de Foco (cuando se hace clic en un campo) */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
outline: none; /* Quita el borde azul por defecto */
border-color: var(--c-primary, #BEA10D);
background-color: #fff;
box-shadow: 0 0 0 3px rgba(190, 161, 13, 0.15); /* Sombra suave del color de tu marca */
}
/* --- 3. Estilo para el Botón de Subir Archivo (File Upload) --- */
.wpcf7 input[type="file"] {
width: 100%;
}
/* Estilo del botón "Examinar..." */
.wpcf7 input[type="file"]::file-selector-button {
background-color: var(--brand-blue, #009ad8);
color: #fff;
border: none;
padding: 10px 20px;
border-radius: var(--radius-sm, 8px);
cursor: pointer;
transition: background-color 0.3s ease;
margin-right: 15px;
}
.wpcf7 input[type="file"]::file-selector-button:hover {
background-color: var(--brand-red, #bc1d22);
}

/* --- 4. Estilo para el Checkbox de Términos y Condiciones --- */
.wpcf7-acceptance .wpcf7-list-item-label {
cursor: pointer;
position: relative;
padding-left: 30px; /* Espacio para el checkbox personalizado */
display: inline-flex;
align-items: center;
}
.wpcf7-acceptance input[type="checkbox"] {
opacity: 0; /* Oculta el checkbox por defecto */
position: absolute;
left: 0;
}
/* La caja del checkbox personalizado */
.wpcf7-acceptance .wpcf7-list-item-label::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border: 2px solid #ddd;
border-radius: 4px;
background-color: #fff;
}
/* El "tick" o "check" cuando está marcado */
.wpcf7-acceptance input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
content: '✔';
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: var(--c-primary);
}

/* --- 5. Botón de Enviar --- */
.wpcf7 input[type="submit"] {
width: 100%;
font-size: 1.1rem;
padding-top: 15px !important;
padding-bottom: 15px !important;
border-radius: 0px !important;
}
.btn {
border-radius: 0px !important;
}
.section-products-featured a{
color: var(--button-bg);
}
.section-products-featured a:hover{
color: var(--button-bg-hover);
}
/* --- 6. Mensajes de Respuesta (Éxito y Error) --- */
.wpcf7-response-output {
margin: 20px 0 0 0 !important;
padding: 15px !important;
border-radius: var(--radius-sm, 8px) !important;
border-width: 2px !important;
border-style: solid !important;
}
/* Mensaje de error */
.wpcf7-validation-errors {
border-color: #d9534f !important;
background-color: #f2dede !important;
color: #a94442 !important;
}
/* Mensaje de éxito */
.wpcf7-mail-sent-ok {
border-color: #5cb85c !important;
background-color: #dff0d8 !important;
color: #3c763d !important;
}
/* --- Móvil Muy Pequeño (hasta 400px) --- */
@media (max-width: 400px) {
.single_add_to_cart_button, .buy_now_button {
flex: 0 0 100%;
width: 100%;
}
.hero-clean-banner {
background-position: 790px 0px !important; 
}
.titulossecvid {
font-size: 30px !important;
font-weight: 400 !important;
color: #bc1d22;
text-align: center;
}
.section-services h2 {
font-size: 33px !important;
font-weight: 500 !important;
color: #bc1d22 !important;
text-align: center;
}
.tecnologiasd .text-primary {
margin-top: 30px;
}
/* ============================================================
GRID Y SIDEBAR CAVARE - VERSIÓN FINAL RESPONSIVA
============================================================ */
/* 4. Estilo del Sidebar en MÓVIL para que no se "estampe" */
@media (max-width: 991px) {
aside.col-lg-3 {
margin-bottom: 40px !important; /* Espacio antes de los productos */
padding: 20px;
background: #ffffff;
border: 1px solid #eee;
border-radius: 12px;
}

/* Si el usuario decide ocultarlo */
body.hide-sidebar-mobile aside.col-lg-3 {
display: none !important;
}
}
/* PASOS DE COMPRA - ESTILO PREMIUM */
.cavare-steps-wrapper {
margin: 40px 0 60px;
text-align: center;
width: 100%; 
display: flex;
justify-content: center;
}
.cavare-steps {
display: inline-flex;
justify-content: center;
align-items: center;
list-style: none;
padding: 0;
position: relative;
width: 100%;
max-width: 600px;
}
.cavare-steps::before {
content: "";
position: absolute;
top: 20px;
left: 10%;
right: 10%;
height: 2px;
background: #e0e0e0;
z-index: 1;
}
.cavare-steps li {
position: relative;
z-index: 2;
background: #f5f5f7; /* Color de fondo del sitio */
padding: 0 20px;
flex: 1;
text-align: center;
}
.cavare-steps .step-num {
display: block;
width: 40px;
height: 40px;
line-height: 40px;
background: #fff;
border: 2px solid #e0e0e0;
border-radius: 50%;
margin: 0 auto 10px;
font-weight: bold;
color: #999;
transition: 0.3s;
}
.cavare-steps .step-name {
font-size: 14px;
color: #999;
text-transform: uppercase;
font-weight: 600;
}
/* Paso Activo */
.cavare-steps li.active .step-num {
background: var(--c-primary, #4bb0b8);
border-color: var(--c-primary, #4bb0b8);
color: #fff;
box-shadow: 0 0 15px rgba(75, 176, 184, 0.4);
}
.cavare-steps li.active .step-name {
color: #333;
}
/* THANK YOU PAGE (ORDINE RICEVUTO) */
.woocommerce-order-received .woocommerce-thankyou-order-received {
font-size: 24px;
font-weight: bold;
color: var(--c-primary);
text-align: center;
margin-bottom: 30px;
}
.woocommerce-order-received .woocommerce-order {
max-width: 800px;
margin: 0 auto;
background: #fff;
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
/* Estilos para los textos extra del carrito */
.cavare-cart-extra-text {
font-size: 1.1rem;
line-height: 1.6;
color: #424245;
background-color: #fbfbfd;
padding: 20px;
border-radius: 12px;
text-align: center;
}
.before-cart-content {
border-left: 4px solid var(--c-primary);
}
.after-cart-content {
margin-bottom: 40px;
}/* DISEÑO DE CARRITO 2 COLUMNAS */
.cart-sidebar-col .cart-collaterals-wrapper {
position: sticky;
top: 100px;
background: #ffffff !important;
border: 1px solid #e0e0e0 !important;
padding: 30px !important;
border-radius: 12px;
}
.cart-collaterals-wrapper h2 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 20px;
text-transform: uppercase;
color: #1d1d1f;
}

.border-left-primary {
border-left: 5px solid var(--c-primary, #009ad8) !important;
}
/* PASOS DE COMPRA - DISEÑO FINAL */


.cavare-steps {
display: flex;
justify-content: space-between;
align-items: flex-start;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
max-width: 500px; /* Tamaño ideal */
position: relative;
}

/* La línea que conecta los círculos */
.cavare-steps::before {
content: "";
position: absolute;
top: 20px; /* Mitad exacta del círculo */
left: 10%;
right: 10%;
height: 2px;
background: #d1d1d6;
z-index: 1;
}

.cavare-steps li {
position: relative;
z-index: 2;
text-align: center;
flex: 1;
}

.cavare-steps .step-num {
display: block;
width: 40px;
height: 40px;
line-height: 38px; /* Ajuste para borde */
background: #f5f5f7;
border: 2px solid #d1d1d6;
border-radius: 50%;
margin: 0 auto 10px;
font-weight: 700;
color: #8e8e93;
font-size: 16px;
}

.cavare-steps .step-name {
display: block;
font-size: 13px;
font-weight: 600;
color: #8e8e93;
text-transform: uppercase;
}

/* Paso Activo */
.cavare-steps li.active .step-num {
background: var(--c-primary, #009ad8);
border-color: var(--c-primary, #009ad8);
color: #ffffff;
}

.cavare-steps li.active .step-name {
color: var(--text-main, #1d1d1f);
}
/* ============================================================
ÁREA DE MI CUENTA (MY ACCOUNT) - ESTILO PREMIUM
============================================================ */

/* 1. LOGIN Y REGISTRO (Centrado y Elegante) */
#customer_login {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
margin-top: 40px;
}

.u-column1, .u-column2 {
flex: 1;
min-width: 320px;
max-width: 450px;
background: #ffffff;
padding: 40px !important;
border-radius: 18px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
border: 1px solid #f0f0f0;
}

#customer_login h2 {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 25px;
text-align: center;
color: var(--text-main);
}

/* 2. DIRECCIONES (Tarjetas Side-by-Side) */
.woocommerce-Addresses {
display: flex !important;
gap: 25px;
flex-wrap: wrap;
margin-top: 30px;
}

.woocommerce-Address {
flex: 1;
min-width: 300px;
background: #fff;
padding: 25px !important;
border-radius: 15px;
border: 1px solid #e0e0e0;
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
transition: 0.3s;
}

.woocommerce-Address:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
border-color: var(--c-primary);
}

.woocommerce-Address-title.title {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #eee;
margin-bottom: 15px;
padding-bottom: 10px;
}

.woocommerce-Address-title h3 {
margin: 0;
font-size: 1.2rem;
font-weight: 700;
}

.woocommerce-Address-title .edit {
font-size: 0.9rem;
color: var(--c-primary);
text-decoration: underline;
}

/* 3. MENÚ LATERAL DE MI CUENTA */
.woocommerce-MyAccount-navigation {
border-radius: 15px;
overflow: hidden;
background: #fff;
border: 1px solid #eee;
}



.woocommerce-MyAccount-navigation li {
border-bottom: 1px solid #f5f5f7;
}

.woocommerce-MyAccount-navigation li a {
padding: 15px 20px;
display: block;
color: #424245;
font-weight: 500;
transition: 0.3s;
}

.woocommerce-MyAccount-navigation li.is-active a {
background-color: var(--c-primary);
color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
.woocommerce-Addresses {
flex-direction: column;
}
.u-column1, .u-column2 {
max-width: 100%;
}
}
/* ============================================================
ESTILOS DE FORMULARIO DE CONTACTO CAVARE
============================================================ */

.form-flat {
background: #ffffff;
padding: 40px;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.05);
}

/* Campos de entrada */
.form-flat input[type="text"],
.form-flat input[type="email"],
.form-flat input[type="tel"],
.form-flat textarea {
width: 100%;
background: #f5f5f7 !important;
border: 2px solid transparent !important;
border-radius: 12px !important;
padding: 15px 20px !important;
font-size: 16px;
transition: all 0.3s ease;
margin-bottom: 10px;
}

.form-flat input:focus, 
.form-flat textarea:focus {
background: #fff !important;
border-color: var(--c-primary) !important;
box-shadow: 0 0 0 4px rgba(0, 154, 216, 0.1) !important;
outline: none;
}

/* Estilo para subir archivos */
.enviaarchivo {
background: #f5f5f7;
padding: 20px;
border: 2px dashed #d1d1d6;
border-radius: 12px;
width: 100%;
margin: 15px 0;
}

/* Caja de Protección de Datos (UE) */
.cajaeu {
background: #f9f9f9;
border-left: 4px solid #d1d1d6;
padding: 25px !important;
margin-top: 30px;
font-size: 0.9rem;
color: #666;
line-height: 1.5;
}

.cajaeu p:last-child {
font-weight: bold;
color: var(--text-main);
margin-top: 10px;
}

/* Botón de envío */
.form-flat .wpcf7-submit {
width: 100%;
padding: 18px !important;
font-size: 18px !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 12px !important;
margin-top: 20px;
}
/* YouTube Red */
.social-icon-youtube:hover {
color: #FF0000 !important;
}

/* TikTok Black/Cyan/Pink effect */
.social-icon-tiktok:hover {
color: #000000 !important;
text-shadow: 1px 1px #ff0050, -1px -1px #00f2ea;
}
/* Color de respaldo para secciones sin imagen de fondo */
.front-page-hero-section, 
.section-gallery, 
.section-agency-info, 
.section-blog-front {
background-color: var(--c-bg-light, #f5f5f7);
min-height: 400px; /* Asegura que la sección no se colapse */
}

/* Estilo para las tarjetas de producto/blog si no hay imagen */
.card-img-top:empty, 
.hero-image-wrapper:empty {
background: #e1e1e1;
display: flex;
align-items: center;
justify-content: center;
min-height: 250px;
}
.card-img-top:empty::after {
content: "Upload Image";
color: #999;
font-size: 14px;
}
/* BUSCADOR COMPACTO DEL HEADER */
.header-search-container {
max-width: 180px;
display: inline-block;
vertical-align: middle;
}

.woocommerce-product-search-compact .input-group {
position: relative;
display: flex;
align-items: center;
}

.woocommerce-product-search-compact .search-field {
padding-right: 35px !important;
font-size: 14px;
height: 35px;
border: 1px solid #e0e0e0;
}

.btn-search-header {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--c-primary);
cursor: pointer;
padding: 0;
line-height: 1;
}

.btn-search-header .dashicons {
font-size: 18px;
}
/* Estilo para los bloques multimedia */
.multimedia-container {
transform: perspective(1000px) rotateY(0deg);
transition: transform 0.6s ease;
}

.multimedia-container:hover {
transform: perspective(1000px) rotateY(2deg);
}

.letter-spacing-1 {
letter-spacing: 2px;
}
.btn:not(:disabled):not(.disabled) {
cursor: pointer;
border-radius: 0px !important;
}
/* Asegurar que el video ocupe todo */
video {
object-fit: cover;
min-height: 350px;
}

/* Efecto para el contenido de texto */
.content-block h3 {
line-height: 1.2;
color: var(--text-main);
}

/* SLIDER DE CLIENTES (SLICK) */
.client-logo-inner {
height: 100px;
display: flex !important;
align-items: center;
justify-content: center;
padding: 10px;
}

.client-logo-inner img {
max-height: 80px;
width: auto !important;
filter: grayscale(1);
opacity: 0.6;
transition: 0.3s;
}

.client-logo-inner img:hover {
filter: grayscale(0);
opacity: 1;
}

/* Botones de Slick */
.slick-prev, .slick-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background: var(--c-primary, #009ad8);
color: #fff;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
font-size: 24px;
}
.slick-prev { left: -50px; }
.slick-next { right: -50px; }

@media (max-width: 1200px) {
.slick-prev { left: 0; }
.slick-next { right: 0; }
}
/* ARREGLO DE TABLA DE CARRITO CAVARE */
.shop_table.cart thead th {
background: #f8f9fa;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 1px;
border: none;
padding: 15px;
}

.cart_item td {
padding: 20px 15px !important;
vertical-align: middle !important;
border-bottom: 1px solid #eee;
}

/* Ocultar etiquetas repetidas en escritorio */
@media (min-width: 768px) {
.shop_table_responsive td:before {
display: none !important;
}
}

/* Estilo del Cupón superior */
.cavare-coupon-top-wrapper .form-control {
height: 45px;
border-radius: 8px 0 0 8px;
}
.cavare-coupon-top-wrapper .btn {
border-radius: 0 8px 8px 0;
}

/* Imagen del producto más pequeña en el carro */
.product-thumbnail img {
max-width: 80px !important;
border-radius: 8px;
}
/* ELIMINAR ETIQUETAS DUPLICADAS */
.shop_table_responsive td::before {
display: none !important; /* Matamos el attr(data-title) que ensucia */
}

/* DISEÑO DE FILA DE PRODUCTO (Estilo App) */
.cart_item {
border-bottom: 1px solid #f0f0f2;
}

.product-thumbnail img {
width: 90px !important;
height: auto;
border-radius: 10px;
border: 1px solid #eee;
}

/* TOTALES DEL CARRITO (Derecha) */
.cart-collaterals-wrapper {
position: sticky;
top: 110px;
border-top: 4px solid var(--c-primary) !important;
}

.social-media-links .social-icon svg {
width: 15px;
height: 15px;
}
.mobile-social-drawer svg {
color: var(--button-text) !important;
}
.mobile-social-drawer .social-media-links li {
margin: 0px 3px !important;
}
.cart-collaterals-wrapper h2 {
font-size: 1.3rem;
font-weight: 800;
margin-bottom: 20px;
color: var(--text-main);
}

/* Limpieza de la tabla de totales */
.cart_totals table th {
width: 40%;
font-weight: 600;
color: #8e8e93;
text-transform: uppercase;
font-size: 12px;
}

.cart_totals table td {
text-align: right;
font-weight: 700;
color: var(--text-main);
}

/* BOTÓN DE PAGO (GRANDE Y LLAMATIVO) */
.checkout-button {
display: block !important;
width: 100% !important;
padding: 18px !important;
font-size: 18px !important;
font-weight: 800 !important;
border-radius: 50px !important;
text-transform: uppercase;
letter-spacing: 1px;
background-color: var(--c-primary) !important;
box-shadow: 0 10px 20px rgba(0, 154, 216, 0.2);
margin-top: 20px;
}

.checkout-button:hover {
transform: translateY(-2px);
box-shadow: 0 15px 30px rgba(0, 154, 216, 0.3);
}

/* ============================================================
FICHA DE PRODUCTO INDIVIDUAL CAVARE
============================================================ */

/* Título en la columna derecha */
.product-title-inline h1 {
font-size: 2.5rem;
font-weight: 800;
color: var(--text-main);
line-height: 1.1;
}

/* Columna de detalles */
.cavare-product-details .price {
font-size: 2rem !important;
font-weight: 700;
color: var(--c-primary);
margin-bottom: 20px;
display: block;
}

.cavare-product-details .woocommerce-product-details__short-description {
font-size: 1.1rem;
color: #424245;
margin-bottom: 30px;
line-height: 1.6;
text-align: left; /* Aseguramos que no esté centrado si no queremos */
}

/* Botones de compra */
.woocommerce div.product form.cart {
margin-top: 30px;
display: flex;
flex-wrap: wrap;
gap: 15px;
}

.single_add_to_cart_button, .cavare-quick-buy-btn {
padding: 18px 30px !important;
font-weight: 700 !important;
border-radius: 50px !important; /* Estilo Italflag moderno */
text-transform: uppercase;
}

/* Galería: Asegurar que las miniaturas se vean bien */
.product-gallery-wrapper .flex-control-thumbs {
display: flex;
gap: 10px;
margin-top: 15px;
list-style: none;
padding: 0;
}

.product-gallery-wrapper .flex-control-thumbs li {
width: 25%;
}
/* ============================================================
FIX GALERÍA DE PRODUCTO (MINIATURAS HORIZONTALES)
============================================================ */

/* Forzamos que el contenedor de miniaturas sea un flexbox */
.woocommerce div.product div.images .flex-control-thumbs {
display: flex !important;
flex-wrap: wrap !important;
margin: 15px -5px 0 !important;
padding: 0 !important;
list-style: none !important;
}

/* Cada miniatura ocupa el 25% (4 por fila) */
.woocommerce div.product div.images .flex-control-thumbs li {
width: 25% !important;
padding: 5px !important;
float: none !important;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
cursor: pointer;
opacity: 0.5;
transition: opacity 0.3s ease;
border: 1px solid #eee;
border-radius: 8px;
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
opacity: 1;
border-color: var(--c-primary);
}
/* --- FIX MINIATURAS GALERÍA PRODUCTO --- */
.woocommerce div.product div.images .flex-control-thumbs {
display: flex !important;
flex-wrap: wrap !important;
margin: 15px -5px 0 !important;
padding: 0 !important;
list-style: none !important;
}

.woocommerce div.product div.images .flex-control-thumbs li {
width: 20% !important; /* 5 fotos por fila */
padding: 5px !important;
float: none !important;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
border-radius: 8px;
cursor: pointer;
border: 1px solid #eee;
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
border-color: var(--c-primary);
}

/* --- FIX MIGA DE PAN (BREADCRUMBS) --- */
.woocommerce-breadcrumb {
font-size: 14px;
color: #8e8e93;
padding: 20px 0;
}
.woocommerce-breadcrumb a {
color: var(--c-primary) !important;
font-weight: 500;
}
.woocommerce-breadcrumb .delimiter {
margin: 0 10px;
opacity: 0.5;
}

/* Ocultar descripción larga si el título se repite */
.woocommerce-Tabs-panel--description h2 {
display: none !important;
}
/* --- FIX GALERÍA PRODUCTO: MINIATURAS EN FILA --- */
.woocommerce div.product div.images .flex-control-thumbs {
display: flex !important;
flex-wrap: wrap !important;
margin: 15px -5px 0 !important;
padding: 0 !important;
list-style: none !important;
}

.woocommerce div.product div.images .flex-control-thumbs li {
width: 20% !important; /* 5 miniaturas por fila */
padding: 5px !important;
list-style: none !important;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
border-radius: 8px;
border: 1px solid #eee;
cursor: pointer;
transition: 0.3s;
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
border-color: var(--c-primary);
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Ocultar los números de lista que a veces pone el navegador */
.flex-control-nav li {
list-style: none !important;
}
.woocommerce-product-gallery .preciosespe ul, ol, li {
margin: 0px !important;
font-size: 14px;
display: inline-table;
margin: 5px !important;
}
/* ============================================================
CAJA DE PRECIO PREMIUM (CENTRADA Y UNIFICADA)
============================================================ */

.cavare-master-price-box {
background-color: #f8f9fa;
border-radius: 15px;
border: 1px solid #eee;
padding: 20px;
}

/* Estilo del precio (Manda sobre WooCommerce) */
.cavare-master-price-box .price, 
.woocommerce-variation-price .price {
font-size: 2.5rem !important;
font-weight: 800 !important;
color: var(--c-primary) !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}

/* Unificamos el precio del producto variable (el que sale abajo) */
.woocommerce-variation-price {
margin-top: 20px;
padding: 15px;
border-top: 2px dashed var(--c-primary);
background: #fff;
border-radius: 10px;
}

/* Ocultar el rango de precios superior en variables si ya eligieron una opción */
.has-selected-variation .cavare-master-price-box {
opacity: 0.5;
transform: scale(0.9);
transition: 0.3s;
}

/* ============================================================
FIX GALERÍA: MINIATURAS EN FILA (SIN LISTAS)
============================================================ */
.woocommerce-product-gallery ol.flex-control-thumbs {
display: flex !important;
flex-wrap: wrap !important;
list-style: none !important;
padding: 0 !important;
margin: 15px -5px 0 !important;
}

.woocommerce-product-gallery ol.flex-control-thumbs li {
flex: 0 0 20% !important; /* 5 fotos por fila */
max-width: 20% !important;
padding: 5px !important;
list-style: none !important;
}

.woocommerce-product-gallery ol.flex-control-thumbs li img {
border-radius: 8px !important;
border: 1px solid #ddd !important;
cursor: pointer;
opacity: 0.6;
transition: 0.3s;
}

.woocommerce-product-gallery ol.flex-control-thumbs li img:hover,
.woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active {
opacity: 1 !important;
border-color: var(--c-primary) !important;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* --- FIX GALERÍA: MINIATURAS EN FILA --- */
.woocommerce-product-gallery ol.flex-control-thumbs {
display: flex !important;
flex-wrap: wrap !important;
list-style: none !important;
padding: 0 !important;
margin: 15px -5px 0 !important;
}

.woocommerce-product-gallery ol.flex-control-thumbs li {
flex: 0 0 20% !important; /* 5 miniaturas por fila */
max-width: 20% !important;
padding: 5px !important;
}

.woocommerce-product-gallery ol.flex-control-thumbs li img {
border-radius: 8px !important;
border: 1px solid #ddd !important;
cursor: pointer;
transition: 0.3s;
}

/* --- ESTILO CAJA DE PRECIO --- */
.cavare-master-price-box {
background-color: #f8f9fa;
border-radius: 15px;
padding: 20px;
border: 1px solid #eee;
}

.cavare-master-price-box .price {
font-size: 2.2rem !important;
font-weight: 800 !important;
color: var(--c-primary) !important;
display: block !important;
}

/* Ocultar el punto '.' o números de lista en la galería */
.flex-control-nav li {
list-style-type: none !important;
}
/* ============================================================
REORDENAR PRECIO VARIABLE - CAVARE MASTER
============================================================ */

/* 1. Preparamos el formulario para que sea un contenedor flexible */
.variations_form.cart {
display: flex !important;
flex-direction: column !important;
}

/* 2. Movemos el bloque de variación (precio y descripción) al principio */
.single_variation_wrap {
order: -9 !important; /* Mueve todo el bloque arriba de la tabla de opciones */
margin-bottom: 20px;
}

/* 3. Estilo Premium para el precio que aparece al elegir opción */
.woocommerce-variation-price .price {
font-size: 2.8rem !important; /* Un poco más grande para destacar */
font-weight: 800 !important;
color: var(--c-primary) !important;
justify-content: center;
display: flex;
padding: 10px;
}

/* 4. Ocultamos el Rango de Precios de arriba cuando ya hay una opción elegida */
/* Para evitar tener dos precios en pantalla */
.has-selected-variation .cavare-master-price-box {
display: none !important;
}

/* 5. Limpieza de la tabla de variaciones */
table.variations {
order: 1 !important; /* Se queda en medio */
margin-bottom: 20px;
}

.single_add_to_cart_block {
order: 2 !important; /* Botones al final */
}

/* Fix para la descripción de la variación (Caja azul que se veía en tu captura) */
.woocommerce-variation-description {
background: var(--c-bg-light) ;
border-left: 0px solid var(--c-primary) !important;
padding: 15px !important;
margin: 10px 0 !important;
font-style: italic;
border-radius: 0 8px 8px 0;
}
/* Ajuste de elementos dentro del Top Bar */
.topbarrs .social-media-links {
margin: 0 15px !important;
}

.topbarrs .cavare-header-cart {
margin: 0 15px !important;
}

.top-bar-nav {
display: inline-flex;
list-style: none;
padding: 0;
margin: 0 15px;
}

.top-bar-nav li a {
color: #fff;
font-size: 13px;
text-transform: uppercase;
}
/* Ajuste de Grid para Top Bar */
.topbarrs .row {
margin-left: -5px;
margin-right: -5px;
}
.topbarrs [class*="col-"] {
padding-left: 5px;
padding-right: 5px;
}

/* Evitar que los iconos se peguen en móvil si hay 2 columnas */
@media (max-width: 767px) {
.topbar-col-inner {
font-size: 11px; /* Un poco más pequeño en móvil */
}
.topbarrs .social-media-links li {
margin: 0 5px !important;
}

}
@media (max-width: 400px) {
#mobile-top-bar {
color: #ffffff;
font-size: 11px;
}
.product-thumbnail img {
width: 40px !important;
height: auto;
border-radius: 10px;
border: 1px solid #eee;
}
.cart_item td {
padding: 10px 3px !important;
vertical-align: middle !important;
}
.cart_item td {
padding: 10px 3px !important;
}
.cart_item td a{
font-size: 14px;
}
.cajacart {
padding: 0px !important;
}
#cavare-cart-wrapper .totalescart {
padding: 0px !important;
margin-top: 20px !important;
}
#content-woocommerce-master .main-content-section .micuentamenu {
padding: 0px !important;
margin-top: 20px !important;
}
#content-woocommerce-master .main-content-section .micuentamenudesk {
padding: 0px !important;
margin-top: 20px !important;
}
#content-woocommerce-master .columnadatos {
padding: 0px !important;
margin-top: 20px !important;
}
#content-woocommerce-master .woocommerce-form-coupon-toggle .woocommerce-info {
padding: 0px !important;
margin-top: 0px !important;
border: 0px solid !important;
}
.cajacart .cart-products-list .product-name a{
font-size: 12px;
font-weight: 300 !important;
color: var(--c-primary) !important;
}
.product-quantity .quantity input {
max-width: 41px;
font-size: 12px;
text-align: left;
padding: 0px 0px 0px 5px;
}
.woocommerce a.button {
background-color: var(--button-bg) !important;
color: var(--button-text) !important;
border-radius: 0px !important;
margin: 0 auto;
padding: 15px 15px 12px;
font-size: 14px !important;
font-weight: 400 !important;
}
.social-media-links li {
padding: 0px !important;
}
.social-media-links li a{
color: var(--button-text);
}
.social-media-links li a:hover{
color: var(--button-text-hover);
}
#cavare-cart-wrapper .cavare-steps-wrapper{
display: none;
}

}
}
/* Menú del Top Bar en línea */
.top-bar-nav {
display: inline-flex !important;
list-style: none !important;
padding: 0 !important;
margin: 0 10px !important;
}

.top-bar-nav li {
margin: 0 8px !important;
}

.top-bar-nav li a {
color: #fff; /* O hereda el color del Top Bar */
font-size: 13px;
text-transform: uppercase;
text-decoration: none;
}

/* Evitar que el carrito y social se peguen al menú */
.topbar-col-inner > * {
margin-left: 5px;
margin-right: 5px;
}
.site-header-cart {
width: 280px !important; /* Más estrecho */
right: 0;
left: auto;
}
.site-header-cart .quantity {
font-size: 12px;
color: var(--c-primary);
}
/* Ocultar imágenes solo dentro del mini-cart popup */
.site-header-cart .attachment-woocommerce_thumbnail, 
.site-header-cart img { 
display: none !important; 
}

/* Ajustar el texto cuando no hay imagen */
.site-header-cart ul.cart_list li {
padding-left: 0 !important;
min-height: auto !important;
border-bottom: 1px solid #f0f0f2;
padding: 10px 0;
}

/* Estilo del Popup */
.site-header-cart {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
width: 260px; /* Más compacto */
padding: 15px;
border-top: 3px solid var(--c-primary);
}

/* Botones del mini-cart */
.site-header-cart .buttons .button {
border-radius: 6px !important;
font-size: 12px !important;
padding: 10px !important;
text-transform: uppercase;
}
.footer-legal-links-wrapper {
font-size: 12px;
opacity: 0.7;
margin-top: 5px;
}
.footer-legal-links-wrapper a {
color: inherit !important;
text-decoration: none;
transition: opacity 0.3s;
}
.footer-legal-links-wrapper a:hover {
opacity: 1;
color: var(--c-accent) !important;
}
.footer-legal-links-wrapper .sep {
margin: 0 8px;
opacity: 0.3;
}
.footer-legal-link{
color: var(--c-bg-light) !important;
font-size: 12px;
}
.footer-wrapper .footer-legal-links-wrapper a:hover{
color: var(--c-secondary) !important;   
}
.footer-col-content > * {
margin-bottom: 15px;
}
.footer-col-content > *:last-child {
margin-bottom: 0;
}
.footer-title {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 25px;
text-transform: uppercase;
color: #ffffff;
}
.footer-nav-list {
list-style: none;
padding: 0;
}
.footer-nav-list li {
margin-bottom: 8px;
}
.footer-nav-list li a {
color: rgba(255,255,255,0.8) !important;
font-size: 15px;
transition: 0.3s;
}
.footer-nav-list li a:hover {
color: var(--c-accent) !important;

}
/* Espaciado para la nueva estructura */
.footer-completo {
padding-bottom: 20px;
}

.informacionlegal {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 30px;
}

/* Estilo para los títulos del footer */
.footer-title, .footer-wrapper h4 {
font-size: 1.1rem;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 25px;
letter-spacing: 1px;
}

/* Ajuste para formularios CF7 dentro del footer */
.footer-col-content .wpcf7 input, 
.footer-col-content .wpcf7 textarea {
background-color: rgba(255,255,255,0.1) !important;
border: 1px solid rgba(255,255,255,0.2) !important;
color: #fff !important;
}

.footer-col-content .wpcf7 input::placeholder {
color: rgba(255,255,255,0.5);
}

/* Ajuste para menús en el footer */
.footer-nav-list {
list-style: none;
padding: 0;
}
.footer-nav-list li a {
color: rgba(255,255,255,0.8) !important;
display: block;
padding: 5px 0;
font-size: 14px;
}
.footer-nav-list li a:hover {
color: #fff !important;
transition: 0.3s;
}
/* --- HEADER MÓVIL PRO --- */
#mobile-header {
padding: 10px 0;
position: relative;
z-index: 9999;
}

/* El "Drawer" o Menú que se desplaza */
#mobile-menu-container {
background-color: var(--mobile-menu-bg, #ffffff) !important;
position: fixed;
top: 0;
right: -100%; /* Oculto por defecto */
width: 85%;
height: 100vh;
box-shadow: -10px 0 30px rgba(0,0,0,0.1);
transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
padding: 80px 30px 40px;
z-index: 10000;
overflow-y: auto;
}

/* Cuando el menú está abierto */
body.menu-open #mobile-menu-container {
right: 0;
}

/* Overlay oscuro al abrir el menú */
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: none;
z-index: 9998;
}

/* Estilo de los links dentro del menú móvil */
.mobile-nav-list { list-style: none; padding: 0; }
.mobile-nav-list li { border-bottom: 1px solid #f0f0f2; }
.mobile-nav-list li a {
display: block;
padding: 15px 0;
font-size: 18px;
font-weight: 500;
color: var(--c-text-body) !important;
}

/* Redes sociales en el menú móvil */
.mobile-social-wrap {
margin-top: 30px;
padding-top: 30px;
border-top: 2px solid #f0f0f2;
}
/* --- LÓGICA DEL DRAWER MÓVIL --- */
#cavare-mobile-drawer {
position: fixed;
top: 0;
right: -100%; /* Empieza fuera de pantalla */
width: 85%;
height: 100vh;
z-index: 10001;
transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: -10px 0 30px rgba(0,0,0,0.1);
overflow-y: auto;
}

body.drawer-open #cavare-mobile-drawer {
right: 0;
}

body.drawer-open {
overflow: hidden; /* Evita que el fondo se mueva */
}

.drawer-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 10000;
display: none;
}

body.drawer-open .drawer-overlay {
display: block;
}

/* Estilo de los links del menú móvil */
.mobile-menu-list li {
padding: 12px 0;
border-bottom: 1px solid #f0f0f2;
}
.mobile-menu-list li a {
font-size: 18px;
font-weight: 500;
color: #1d1d1f !important;
display: block;
}

/* Redes sociales en el Drawer */
.mobile-social-drawer .social-media-links {
justify-content: flex-start !important;
gap: 20px;
}
.mobile-social-drawer svg {
color: var(--c-primary) !important;
}
/* --- ESTILO APPLE MÓVIL --- */
#mobile-top-bar {
background-color: var(--c-primary) !important; 
color: #ffffff;
font-size: 11px;
z-index: 1000;
}
#mobile-top-bar .mobile-top-icon{
color: var(--button-text);
font-size: 11px;
z-index: 1000;
}

#mobile-header-main {
background-color: #ffffff !important; /* Fondo siempre blanco o según Customizer */
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
z-index: 999;
}

/* El Drawer (Menú lateral) */
#cavare-mobile-drawer {
background-color: var(--c-bg-light) !important; /* Asegura que NO sea transparente */
position: fixed;
top: 0;
right: -100%;
width: 85%;
height: 100vh;
z-index: 10001;
transition: right 0.3s ease-in-out;
box-shadow: -5px 0 15px rgba(0,0,0,0.1);
}

.drawer-overlay {
background: rgba(0,0,0,0.6) !important; /* Fondo oscuro tras el menú */
}

/* Ajuste del Mini Cart en Móvil */
#mobile-top-bar .cavare-header-cart .cart-total {
display: none; /* En móvil solo mostramos el icono y el número */
}
.mobile-top-col {
padding: 5px;
font-size: 12px;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.mobile-top-col .social-media-links {
justify-content: center !important;
gap: 10px;
}
.mobile-top-col svg {
width: 16px;
height: 16px;
}
/* Estilo para el menú Full Screen */
.drawer-pos-full {
height: 100vh !important;
width: 100% !important;
text-align: center;
}
.drawer-pos-full .mobile-menu-list li a {
font-size: 24px; /* Más grande si es full screen */
padding: 20px 0;
}
/* FIX: Menú Vertical en el Pop-up */
.mobile-menu-list-vertical {
display: flex !important;
flex-direction: column !important; /* Forza el modo lista vertical */
list-style: none;
padding: 0;
margin: 0;
}

.mobile-menu-list-vertical li {
display: block !important;
width: 100%;
border-bottom: 1px solid rgba(0,0,0,0.05);
}

.mobile-menu-list-vertical li a {
display: block;
padding: 15px 0;
font-size: 18px;
font-weight: 500;
color: var(--c-text-body);
text-decoration: none;
}

/* Iconos de la Top Bar Móvil */
.mobile-top-icon .dashicons {
font-size: 20px;
color: inherit;
vertical-align: middle;
}

/* Ajuste del Mini-cart dentro de la Top Bar Móvil */
#mobile-top-bar .cavare-header-cart .cart-contents {
justify-content: center;
}
/* --- FIX DRAWER MÓVIL APPLE STYLE --- */
#cavare-mobile-drawer {
padding-top: 60px !important; /* Espacio para que la X baje y no la tape el Admin Bar */
}

.admin-bar #cavare-mobile-drawer {
padding-top: 100px !important; /* Más espacio si el admin bar está activo */
}

.cavare-close-drawer {
font-size: 45px !important;
line-height: 1;
color: var(--c-primary);
position: absolute;
top: 20px;
right: 25px;
}

/* Títulos pequeños dentro del menú */
.small-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
color: rgba(0,0,0,0.4);
text-transform: uppercase;
margin-bottom: 15px;
}

/* Listas de menú limpias */
.apple-mobile-menu, .apple-mobile-menu-secondary {
list-style: none;
padding: 0;
}

.apple-mobile-menu li a {
font-size: 22px; /* Tamaño Apple */
font-weight: 600;
padding: 12px 0;
display: block;
border-bottom: 1px solid rgba(0,0,0,0.05);
}

.apple-mobile-menu-secondary li a {
font-size: 16px;
padding: 8px 0;
color: var(--c-text-body);
}

/* --- FIX PÁGINA MI CUENTA (MÓVIL) --- */
@media (max-width: 768px) {
/* Forzar el menú de cuenta a ser una lista vertical */
.woocommerce-MyAccount-navigation ul {
display: flex !important;
flex-direction: column !important; /* Una sola columna */
gap: 2px !important;
background: #f5f5f7;
padding: 5px !important;
border-radius: 12px;
}
#main .page-title {
margin-left: 30px;
}
.woocommerce-MyAccount-navigation li {
width: 100% !important;
margin: 0 !important;
background: #fff;
}

.woocommerce-MyAccount-navigation li a {
padding: 15px 20px !important;
font-size: 15px !important;
font-weight: 500 !important;
text-align: left !important;
display: flex;
justify-content: space-between;
align-items: center;
}

/* Añadir flechita tipo iPhone al final de cada link */
.woocommerce-MyAccount-navigation li a::after {
content: "\f345"; /* Icono flecha de Dashicons */
font-family: Dashicons;
opacity: 0.3;
}

.woocommerce-MyAccount-navigation li.is-active a {
background-color: var(--c-primary) !important;
color: #fff !important;
}

/* Arreglo de textos gigantes en Mi Cuenta */
.woocommerce-account .woocommerce-MyAccount-content {
font-size: 14px !important;
}

.woocommerce-account .woocommerce-MyAccount-content h3 {
font-size: 18px !important;
}
}
/* --- FORZAR MENÚ VERTICAL --- */
.apple-mobile-menu-vertical, 
.apple-mobile-menu-vertical ul {
display: block !important; /* Mata el flex-row */
flex-direction: column !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}

.apple-mobile-menu-vertical li {
display: block !important;
width: 100% !important;
position: relative;
}

.apple-mobile-menu-vertical li a {
display: block !important;
padding: 5px 0 !important;
font-size: 18px !important;
font-weight: 400 !important;
color: var(--button-text);
text-align: left;
}
.apple-mobile-menu-vertical li a:hover {
display: block !important;
padding: 5px 0 !important;
font-size: 18px !important;
font-weight: 400 !important;
color: var(--button-text-hover);
text-align: left;
}

/* --- SOPORTE PARA NIVELES (SUBMENÚS) --- */
.apple-mobile-menu-vertical .sub-menu {
padding-left: 20px !important;
background-color: rgba(0,0,0,0.02);
display: none !important; /* Ocultos por defecto para el acordeón */
}

/* Mostrar submenú cuando el padre tiene la clase 'open' */
.apple-mobile-menu-vertical li.open > .sub-menu {
display: block !important;
}

.apple-mobile-menu-vertical .sub-menu li a {
font-size: 16px !important;
font-weight: 400;
padding: 10px 0 !important;
}

/* Logo en el Drawer */
.drawer-logo img {
max-height: 40px !important;
width: auto !important;
}
/* --- DRAWER MÓVIL: REFINAMIENTO --- */
#cavare-mobile-drawer {
display: flex;
flex-direction: column;
}

.drawer-header {
background: rgba(0,0,0,0.02);
min-height: 70px;
}

.drawer-logo img {
max-height: 45px !important;
width: auto !important;
}

/* Forzar lista vertical en el menú del pop-up */
.apple-mobile-menu-vertical {
display: flex !important;
flex-direction: column !important;
padding: 0;
margin: 0;
list-style: none;
}

.apple-mobile-menu-vertical li {
width: 100%;
display: block;
border-bottom: 0px solid rgba(0,0,0,0.05);
}

.apple-mobile-menu-vertical li a {
display: flex !important;
justify-content: space-between;
align-items: center;
padding: 18px 0;
font-size: 20px;
font-weight: 600;
color: var(--text-main);
text-decoration: none;
color: var(--button-text);
}

/* Flecha para indicar submenú */
.apple-mobile-menu-vertical .menu-item-has-children > a::after {
content: "\f347"; /* Flecha abajo Dashicons */
font-family: Dashicons;
font-size: 16px;
transition: transform 0.3s;
}

.apple-mobile-menu-vertical li.open > a::after {
transform: rotate(180deg);
}

/* Submenús */
.apple-mobile-menu-vertical .sub-menu {
display: none;
background: #f9f9fb;
padding-left: 20px;
list-style: none;
}

.apple-mobile-menu-vertical .sub-menu li a {
font-size: 17px;
font-weight: 400;
padding: 12px 0;
}
.logomenumovil {
max-width: 180px;
margin: 0 auto;
}
.social-media-links li {
margin: 0px 3px !important;
}
.topbar-link-icon svg {
display: block;
transition: transform 0.3s ease;
}
.topbar-link-icon:hover svg {
transform: scale(1.1);
color: var(--c-accent) !important;
}
.topbar-col-inner {
min-height: 35px; /* Altura mínima consistente */
}
.topbar-text {
font-size: 13px;
font-weight: 500;
}
.topbar-link-icon svg, 
.mobile-top-icon svg {
width: 20px !important;
height: 20px !important;
display: inline-block;
vertical-align: middle;
stroke: currentColor; /* Esto hace que herede el color del texto del Top Bar */
}

.topbar-link-icon {
display: inline-flex;
align-items: center;
color: inherit; /* Hereda el blanco o el color que pongas en el Customizer */
}

/* Ajuste de los campos cuando no hay etiquetas */
.woocommerce-checkout .form-row {
margin-bottom: 15px !important;
}

.woocommerce-checkout input.input-text, 
.woocommerce-checkout select, 
.woocommerce-checkout textarea {
background-color: #f5f5f7 !important; /* Gris claro tipo Apple */
border: 1px solid transparent !important;
border-radius: 8px !important;
font-size: 15px !important;
color: #1d1d1f !important;
}

.woocommerce-checkout input.input-text:focus {
background-color: #fff !important;
border-color: var(--c-primary) !important;
box-shadow: 0 0 0 4px rgba(0, 154, 216, 0.1) !important;
}
#primary-menu-collapse ul li a{
color: var(--link-color);
}
#primary-menu-collapse ul li a:hover{
color: var(--link-hover-color);
}
/* --- CONTENEDOR PRINCIPAL --- */
#cavare-mini-cart-container {
position: relative;
display: inline-flex;
align-items: center;
}

/* Fix Icono y Texto en Header */
#cavare-mini-cart-container .cart-contents {
display: flex;
align-items: center;
gap: 5px;
color: inherit;
text-decoration: none;
}

#cavare-mini-cart-container .dashicons-cart {
font-size: 22px;
width: 22px;
height: 22px;
}

/* --- POPUP DE PRODUCTOS (ESTILO TABLA 3 COLUMNAS) --- */
.site-header-cart-popup {
position: absolute;
top: 100%;
right: 0;
width: 320px;
background: #fff;
box-shadow: 0 15px 50px rgba(0,0,0,0.2);
border-radius: 12px;
padding: 15px;
z-index: 999999 !important;
display: none; /* Se muestra con hover en el padre */
}

#cavare-mini-cart-container:hover .site-header-cart-popup {
display: block;
}

/* Forzar Estructura de 3 Columnas en cada producto */
.site-header-cart-popup ul.cart_list li {
display: flex !important;
align-items: center !important;
justify-content:间-between;
gap: 10px;
padding: 10px 0 !important;
border-bottom: 1px solid #f0f0f2;
}

/* Col 1: Imagen (Tipo Icono pequeño) */
.site-header-cart-popup ul.cart_list li img {
width: 35px !important; /* Miniatura tipo icono */
height: 35px !important;
object-fit: cover;
border-radius: 0px;
margin: 0 !important;
/* Recuperamos la imagen */
}
.titulocarrimini {
    font-size: 12px !important;
}
/* Col 2: Título (Flexible) */
.site-header-cart-popup ul.cart_list li a:not(.remove) {
flex: 1;
font-size: 13px !important;
line-height: 1.2;
padding: 0 !important;
margin: 0 !important;
}

/* Col 3: Precio (Pequeño a la derecha) */
.site-header-cart-popup ul.cart_list li .quantity {
font-size: 11px !important;
color: var(--c-primary);
white-space: nowrap;
font-weight: 700;
}

/* Botón de eliminar (X) */
.site-header-cart-popup ul.cart_list li a.remove {
order: 4;
font-size: 18px;
color: #ff3b30 !important;
}

/* Total y Botones Finales */
.site-header-cart-popup .total {
padding: 15px 0;
font-size: 14px;
text-align: center;
border-top: 2px solid #f5f5f7;
}

.site-header-cart-popup .buttons a {
display: block;
width: 100%;
text-align: center;
margin-bottom: 5px;
border-radius: 8px !important;
font-size: 12px !important;
text-transform: uppercase;
}

/* =========================================
1. VARIABLES Y CONFIGURACIÓN GLOBAL
========================================= */
:root {
/* Estas variables se sincronizan con dynamic-css.php */
--bg-body: #FFFFFF;
--radius-lg: 18px;
--radius-sm: 8px;
--shadow-soft: 0 10px 30px rgba(0,0,0,0.08);
--font-stack: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Resets */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background-color: var(--bg-body);
font-family: var(--font-stack);
-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--link-color); text-decoration: none; transition: 0.3s; }
a:hover { color: var(--link-hover-color); }

/* =========================================
2. COMPONENTES DE UI (BOTONES Y CARDS)
========================================= */
.btn, .button, input[type="submit"] {
background-color: var(--button-bg) !important;
color: var(--button-text) !important;
padding: 12px 24px;
font-weight: 500;
transition: all 0.3s ease;
border: none;
cursor: pointer;
display: inline-block;
}

.btn:hover, .button:hover {
background-color: var(--button-bg-hover) !important;
color: var(--button-text-hover) !important;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* =========================================
3. HEADER Y TOP BAR (SISTEMA MAESTRO)
========================================= */
.site-header { width: 100%; z-index: 1001; position: relative; overflow: visible !important; }

/* Escritorio */
.topbarrs { font-size: 13px; z-index: 1002; }
.topbar-link-icon .dashicons { font-size: 20px; width: 20px; height: 20px; vertical-align: middle; }

/* Mini Cart (3 Columnas Pro) */
#cavare-mini-cart-container { position: relative; display: inline-flex; }
.site-header-cart-popup {
position: absolute; top: 100%; right: 0; width: 320px;
background: #fff; border-radius: 12px; padding: 15px;
box-shadow: 0 15px 50px rgba(0,0,0,0.15); display: none; z-index: 9999;
}
#cavare-mini-cart-container:hover .site-header-cart-popup { display: block; }

.site-header-cart-popup ul.cart_list li {
display: flex !important; align-items: center; justify-content: space-between;
gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f0f2;
}
.site-header-cart-popup ul.cart_list li img { width: 40px !important; height: 40px !important; border-radius: 6px; }

/* Drawer Móvil (Apple Style) */
#cavare-mobile-drawer {
position: fixed; width: 85%; height: 100vh; z-index: 10001;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: -10px 0 30px rgba(0,0,0,0.1); overflow-y: auto;
}
.drawer-pos-right { right: -100%; top: 0; }
.drawer-pos-left { left: -100%; top: 0; }
.drawer-pos-full { top: -100%; left: 0; width: 100% !important; }

body.drawer-open .drawer-pos-right { right: 0; }
body.drawer-open .drawer-pos-left { left: 0; }
body.drawer-open .drawer-pos-full { top: 0; }

.apple-mobile-menu-vertical { display: flex; flex-direction: column; list-style: none; padding: 0; }
.apple-mobile-menu-vertical li a { 
font-size: 20px; font-weight: 600; padding: 18px 0; 
border-bottom: 1px solid rgba(0,0,0,0.05); color: var(--text-main);
}

/* =========================================
4. WOOCOMMERCE (TIENDA, CHECKOUT, MI CUENTA)
========================================= */

/* Checkout (Placeholders) */
.woocommerce-checkout input.input-text, .woocommerce-checkout select {
background-color: #f5f5f7 !important; border-radius: 8px !important;
padding: 15px !important; border: 1px solid transparent;
}


/* Fix para el Carrito en el Customizer */
#cavare-mini-cart-container .cart-contents {
white-space: nowrap;
}
#mobile-top-bar {
min-height: 40px;
display: flex;
align-items: center;
}

#mobile-top-bar .dashicons {
font-size: 22px !important; /* Más grandes para que el dedo los toque bien */
width: 22px;
height: 22px;
}

.mobile-top-col {
padding: 10px 5px !important;
}

/* Evitar que el texto de la col 1 sea invisible */
.mobile-top-col p, .mobile-top-col span {
color: #ffffff !important; /* Asegura el color contra el fondo */
font-size: 12px;
}

/* Ajuste del Mini Carrito en el Top Bar */
#mobile-top-bar .cavare-header-cart .cart-contents {
display: flex;
align-items: center;
justify-content: center;
}
/* Asegurar visibilidad del texto en el Top Bar Móvil */
.mobile-top-text-item {
color: #ffffff !important; /* Cambia a inherit si quieres que use el color del Customizer */
font-size: 12px;
font-weight: 500;
display: inline-block;
}

.mobile-top-col {
min-width: 50px; /* Evita que la columna colapse */
}

/* Fix para alinear iconos y texto en una sola línea en el Top Bar Móvil */
.mobile-top-content-inner {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
/* --- ORGANIZACIÓN DEL FORMULARIO DE COMPRA --- */

/* 1. Contenedor del formulario */
.woocommerce div.product form.cart {
display: flex !important;
flex-wrap: wrap !important; /* Permite que los elementos salten de renglón */
align-items: center;
gap: 15px;
margin-top: 20px;
}

/* 2. Bloque de Cantidad (Renglón 1) */
.woocommerce div.product form.cart .quantity {
flex: 0 0 100% !important; /* Fuerza a ocupar todo el ancho del primer renglón */
display: flex !important;
align-items: center;
margin-bottom: 10px !important;
}

.qty-label {
font-weight: 600;
margin-right: 15px;
color: var(--text-main);
font-size: 15px;
}

.quantity input.qty {
width: 60px !important;
height: 34px;
border-radius: 0px !important;
border: 0px solid #ddd !important;
background: #f5f5f7 !important;
}

/* 3. Botones (Renglón 2) */
.single_add_to_cart_button, 
.cavare-quick-buy-btn {
flex: 1; /* Hace que los botones crezcan para llenar el espacio */
min-width: 180px;
height: 55px !important;
border-radius: 12px !important; /* Estilo Apple más redondeado */
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 !important; /* Limpia márgenes por defecto */
}

/* Ajuste si solo hay un botón (si ocultas Compra Rápida) */
form.cart:not(:has(.cavare-quick-buy-btn)) .single_add_to_cart_button {
flex: 0 0 auto;
width: 100%; /* Botón único a ancho completo */
}

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 480px) {
.single_add_to_cart_button, 
.cavare-quick-buy-btn {
flex: 0 0 100% !important; /* En móviles, un botón debajo de otro */
}
}
/* --- DISEÑO DE CARRITO MODERNO --- */
#cavare-cart-wrapper .cart-item-row {
border-color: #f0f0f2 !important;
}

#cavare-cart-wrapper .product-img img {
width: 90px !important;
height: auto;
border-radius: 12px;
}

/* Selector de cantidad compacto (estilo +/-) */
#cavare-cart-wrapper .quantity {
background: #f5f5f7;
border-radius: 8px;
padding: 2px 8px;
display: inline-flex;
align-items: center;
}

#cavare-cart-wrapper .quantity input {
background: transparent;
border: none;
width: 40px;
text-align: center;
font-weight: 700;
}

/* Columna de Totales (Derecha) */
.totalescart .cart-collaterals-wrapper {
position: sticky;
top: 120px;
border: 1px solid #eee;
}

/* Estilo del botón Finalizar Compra */
.checkout-button {
width: 100%;
border-radius: 50px !important;
padding: 18px !important;
font-size: 16px !important;
letter-spacing: 0.5px;
margin-top: 20px;
}

/* Badge de ahorro */
.badge-light {
background-color: #fef1f2;
color: #ea605d;
font-weight: 500;
padding: 5px 10px;
}

/* Sumario de cupón */
summary {
cursor: pointer;
list-style: none;
outline: none;
}
summary::-webkit-details-marker {
display: none;
}
/* --- REFINAMIENTO CARRITO CAVARE --- */
#cavare-cart-wrapper .shop_table {
border: none !important;
width: 100%;
}
/* Espacio entre productos en el carrito */
.cart_item {
border-bottom: 8px solid #f5f5f7 !important; /* Cambia este color al fondo de tu web para simular el espacio */
}

/* Estilo para los bloques de texto del Customizer */
.cavare-cart-extra-text {
background-color: #fff;
padding: 20px;
font-size: 14px;
line-height: 1.6;
color: var(--c-text-body);
}

.before-cart-content {
border-left: 4px solid var(--c-primary) !important;
}

.after-cart-content {
border-top: 1px solid #eee;
}
.cavare-coupon-notice {
padding: 10px;
background-color: #f8f9fa;
border-radius: 8px;
color: #424245;
border-left: 3px solid var(--c-primary);
}

.cavare-coupon-notice a {
text-decoration: underline;
color: var(--c-primary) !important;
}

.coupon-side-wrapper .input-group {
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
}
.cavare-coupon-notice {
padding: 10px;
background-color: #f8f9fa;
border-radius: 8px;
color: #424245;
border-left: 3px solid var(--c-primary);
}

.cavare-coupon-notice a {
text-decoration: underline;
color: var(--c-primary) !important;
}

.coupon-side-wrapper .input-group {
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
}
/* Fix para el icono de basura */
.remove-item-link svg {
width: 20px;
height: 20px;
stroke: #999;
transition: 0.3s;
}
.espaciosdecolumnas{
height: 5px;
}
.remove-item-link:hover svg {
stroke: var(--c-alert) !important;
}
#cavare-cart-wrapper .shop_table .cart_item{
padding: 10px 0px !important;
}
#cavare-cart-wrapper .cart_item td {
border: none !important;
vertical-align: top;
}

/* Imagen redondeada */
.product-thumbnail img {
border-radius: 0px !important;
width: 60px !important;
height: auto;
}

/* Selector de cantidad compacto */
.quantity-nav {
height: 16px;
margin-bottom: 10px;
}
.quantity-nav .qty {
width: 40px !important;
border: none !important;
background: transparent !important;
text-align: center;
font-weight: bold;
padding: 0 !important;
margin: 0 !important;
}
.qty-btn {
cursor: pointer;
font-size: 18px;
color: #666;
transition: 0.2s;
}
.qty-btn:hover { color: var(--c-primary); }

/* Quitar flechas por defecto del input number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* Columna de totales (Derecha) */
.totalescart .cart-collaterals-wrapper {
position: sticky;
top: 100px;
}

.totalescart .checkout-button {
border-radius: 50px !important;
padding: 15px !important;
font-size: 15px !important;
}

/* Ocultar etiquetas duplicadas de WooCommerce en responsive */
@media (max-width: 768px) {
.shop_table_responsive td::before { display: none !important; }
}
/* Descripción corta en el carrito */
.cart-short-desc p {
margin: 0;
font-size: 13px;
color: #8e8e93;
}

/* Icono de basura pro */
.remove-item-link svg {
width: 18px;
height: 18px;
transition: color 0.3s;
}
.remove-item-link:hover svg {
color: var(--c-alert) !important;
}

/* Ajuste del badge de ahorro */
.badge-light.text-danger {
background-color: #fff1f0;
border-color: #ffa39e !important;
font-weight: 600;
}

/* Header de la caja de totales */
.cart-collaterals-wrapper h5 {
letter-spacing: 1px;
}

/* Quitar padding extra del input de cantidad */
#cavare-cart-wrapper .quantity input.qty {
padding: 0 !important;
font-size: 14px;
}
/* Estilo para el icono de borrar del carrito */
.remove-item-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 8px;
background-color: transparent;
transition: all 0.3s ease;
color: #999 !important; /* Color gris suave por defecto */
}

.remove-item-link:hover {
background-color: #fff1f0; /* Fondo rosado suave al pasar el ratón */
color: var(--c-alert) !important; /* Color de alerta (rojo) */
transform: scale(1.1);
}
.remove-item-link svg {
    display: inline-block !important;
    vertical-align: middle;
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor; /* Para que tome el color del texto */
}
.remove-item-link:hover {
    color: var(--c-alert) !important; /* Rojo al pasar el ratón */
}
#cavare-cart-wrapper .cart_item {
    border-bottom: 10px solid #f5f5f7 !important; /* Simula un espacio vacío usando el color de fondo */
}
/* Asegurar visibilidad del icono de basura */
.remove-item-link svg {
    display: inline-block !important;
    vertical-align: middle;
    stroke: var(--c-primary); /* O el color que desees */
    width: 20px;
    height: 20px;
}
.remove-item-link:hover svg {
    stroke: var(--c-alert) !important; /* Rojo al pasar el ratón */
}
/* Limpieza de tarjetas en el catálogo */
.product-card-custom {
    background: #fff;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eee;
    height: 100%; /* Para que todas midan lo mismo en la fila */
}
.product-card-custom:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
.product-image-wrapper img {
width: 100%;
aspect-ratio: 1/1; /* Imágenes cuadradas perfectas estilo Apple */
object-fit: cover;
border-radius: 10px 10px 0 0;
}

/* ============================================================
REJILLA MAESTRA CAVARE - RESET TOTAL
============================================================ */
/* Impedir que el ancho del grid se calcule mal */
.product-card-custom {
min-width: 0 !important;
width: 100% !important;
}
/* ============================================================
REJILLA ESTILO AMAZON / TEMU (MÓVIL PRO)
============================================================ */

@media (max-width: 767px) {
.product-card-custom h2.woocommerce-loop-product__title a {
color: var(--link-color) !important;
text-decoration: none;
font-size: 11px !important;
font-weight: 400 !important;
text-align: left !important;
}
.price ins .amount bdi {
font-size: 23px;
font-weight: 600;
color: var(--c-accent);
}
.price .amount {
font-weight: 400;
color: var(--c-accent);
font-size: 14px !important;
margin: 0px auto;
}
/* 1. Rejilla de 2 columnas compacta */
.woocommerce ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
padding: 8px !important;
background-color: #f4f4f4; /* Fondo gris claro como las apps */
}

/* 2. La Tarjeta (Card) */
.woocommerce ul.products li.product.product-card-custom {
background: #fff !important;
padding: 0 !important; /* Quitamos padding externo */
border-radius: 8px !important;
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid #e0e0e0 !important;
}

/* 3. Imagen (Proporción perfecta) */
.product-image-wrapper img {
border-radius: 0 !important;
aspect-ratio: 1 / 1;
object-fit: cover;
}

/* 4. Contenedor de Detalles (Alineado a la izquierda) */
.product-details-wrapper {
padding: 8px !important;
text-align: left !important; /* Estilo Amazon */
}

/* 5. Título (Pequeño y máximo 2 líneas) */
.woocommerce-loop-product__title {
font-size: 13px !important;
line-height: 1.2 !important;
height: 32px; /* Limita a 2 líneas */
overflow: hidden;
margin-bottom: 4px !important;
color: #111 !important;
font-weight: 400 !important;
}

/* 6. Precio (Estilo Temu: llamativo pero compacto) */
.price-wrapper .price {
font-size: 16px !important;
display: flex;
flex-direction: column-reverse; /* Precio nuevo arriba, viejo abajo */
align-items: flex-start !important;
}

.price ins { text-decoration: none; font-weight: 700; color: #111; }
.price del { font-size: 11px !important; color: #666; }

/* Badge de Oferta (Pequeño arriba) */
.onsale {
font-size: 10px !important;
padding: 2px 6px !important;
top: 5px !important;
left: 5px !important;
min-height: auto !important;
border-radius: 2px !important;
}

/* 7. Botones (Compactos estilo App) */
.add-to-cart-wrapper {
padding: 0 8px 8px !important;
}

.button.add_to_cart_button, 
.quick-buy-btn {
font-size: 12px !important;
padding: 8px 4px !important;
height: auto !important;
border-radius: 4px !important;
width: 100% !important;
}

/* Ocultamos descripción en móvil para no ensuciar */
.short-description-wrapper {
display: none !important;
}
}
/* --- PRECIOS EN UNA LÍNEA Y CENTRADOS --- */
.price-wrapper .price, 
ul.products li.product .price {
display: flex !important;
justify-content: center !important; /* Centrado horizontal */
align-items: baseline !important;   /* Alineados por la base del texto */
gap: 10px !important;               /* Espacio entre precio viejo y nuevo */
flex-direction: row !important;     /* Fuerza una sola línea */
margin: 0 auto !important;
}

.price del { 
font-size: 0.85em !important; 
opacity: 0.6; 
order: 1; /* Precio viejo primero */
}

.price ins { 
text-decoration: none !important; 
font-weight: 700 !important;
order: 2; /* Precio nuevo después */
}
/* --- OCULTAR SIDEBAR EN MÓVIL (CUSTOMIZER) --- */
@media (max-width: 991px) {
/* Buscamos cualquier aside o columna que actúe como sidebar */
body.hide-sidebar-mobile aside,
body.hide-sidebar-mobile .col-lg-3,
body.hide-sidebar-mobile #shop-sidebar-1 {
display: none !important;
}

/* Si ocultamos el sidebar, forzamos que el contenido principal sea ancho completo */
body.hide-sidebar-mobile .col-lg-9 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
}
/* Rejilla pegada a los bordes pero con seguridad */
.woocommerce ul.products {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 5px !important;  /* Un mínimo margen para que no toque el cristal del móvil */
padding-right: 5px !important;
width: 100% !important;
}
#primary .entry-header h1{

}