/* --- ESTILOS GLOBAL DE WOOCOMMERCE (VIBRA PLENA) --- */

/* 1. Precios y Énfasis: Turquesa */
/* Actualizado para soportar Bloques y Versión Clásica */
.woocommerce div.product p.price, 
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.woocommerce .star-rating span:before,
.woocommerce .amount,
.wc-block-components-product-price .amount {
    color: var(--vp-turquesa-secundario) !important;
    font-weight: 700 !important;
}

/* =========================================================
   2. BOTONES CTA (AGREGAR AL CARRITO, CHECKOUT, ETC)
   ========================================================= */
   .woocommerce #respond input#submit, 
   .woocommerce a.button, 
   .woocommerce button.button, 
   .woocommerce input.button {
       background-color: var(--vp-morado-principal) !important;
       color: #FFFFFF !important;
       border: 2px solid var(--vp-morado-principal) !important;
       border-radius: 5px !important;
       transition: all 0.3s ease;
   }

/* Hover de Botones: Dorado/Turquesa */
.woocommerce #respond input#submit:hover, 
.woocommerce a.button:hover, 
.woocommerce button.button:hover, 
.woocommerce input.button:hover {
    background-color: var(--vp-turquesa-secundario) !important;
    border-color: var(--vp-turquesa-secundario) !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
/* --- PÁGINA DE PRODUCTO INDIVIDUAL --- */
/* Énfasis en el título del producto */
.woocommerce div.product .product_title {
    color: var(--vp-morado-principal) !important;
}

/* Mensajes de stock/disponibilidad */
.woocommerce .stock.in-stock {
    color: var(--vp-turquesa-secundario) !important;
    font-weight: 600;
}
/* --- PÁGINA DE TIENDA / CATÁLOGO --- */
/* Título de los productos en la cuadrícula */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    color: var(--vp-morado-principal) !important;
    font-weight: 700;
}

/* Estilo para la paginación */
.woocommerce nav.woocommerce-pagination ul li a {
    border-color: var(--vp-turquesa-secundario) !important;
    color: var(--vp-turquesa-secundario) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
    background-color: var(--vp-turquesa-secundario) !important;
    color: #FFFFFF !important;
}
/* --- MINI CARRITO Y PÁGINA DE CARRITO --- */
/* Resaltar la fila de Totales del carrito */
.woocommerce-cart .cart_totals h2 {
    color: var(--vp-morado-principal) !important;
}

/* Botón de "Pagar" / "Finalizar Compra" - Mantenemos el Morado/Turquesa */
.woocommerce .checkout-button {
    background-color: var(--vp-turquesa-secundario) !important;
    border-color: var(--vp-turquesa-secundario) !important;
}
.woocommerce .checkout-button:hover {
    background-color: var(--vp-morado-principal) !important;
    border-color: var(--vp-morado-principal) !important;
}
/* --- PÁGINA DE GRACIAS / ORDEN RECIBIDA --- */
/* Mensaje de éxito */
.woocommerce-thankyou-order-received {
    color: var(--vp-morado-principal) !important;
    font-size: 1.5em;
    font-weight: 700;
}

/* Número de orden y detalles clave */
.woocommerce .order_details li strong {
    color: var(--vp-turquesa-secundario) !important;
}
/* --- PÁGINA MI CUENTA (NAVEGACIÓN) --- */
/* Pestañas de Navegación */
.woocommerce-MyAccount-navigation ul li a {
    color: var(--vp-morado-principal) !important;
    border-bottom: 2px solid transparent;
}

/* Pestaña ACTIVA */
.woocommerce-MyAccount-navigation ul li.is-active a {
    color: var(--vp-turquesa-secundario) !important;
    border-bottom: 2px solid var(--vp-turquesa-secundario) !important;
    font-weight: 700;
}

/* Botón de "Cerrar Sesión" (Importante) */
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: #cc0000 !important; /* Rojo para alertar */
}
/* =========================================================
   ESTILOS DE WOOCOMMERCE: MINI CARRITO LATERAL (BLOQUES)
   ========================================================= */

/* Título Principal (Tu carrito, Título y Contador) */
.wc-block-mini-cart__title .wp-block-woocommerce-mini-cart-title-label-block,
.wc-block-mini-cart__title .wp-block-woocommerce-mini-cart-title-items-counter-block {
    color: var(--vp-morado-principal) !important;
    font-weight: 700;
}

/* Color del Subtotal (Texto y Valor) */
.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__label,
.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value {
    color: var(--vp-turquesa-secundario) !important;
    font-size: 1.15em !important;
    font-weight: 700 !important;
}

/* Descripción del Subtotal (El envío, impuestos...) */
.wc-block-components-totals-item__description {
    color: #666666 !important;
    font-size: 0.85em !important;
}

/* Enlaces de Producto y Texto 'Eliminar artículo' */
.wc-block-components-product-name,
.wc-block-cart-item__remove-link {
    color: var(--vp-morado-principal) !important;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}
.wc-block-components-product-name:hover,
.wc-block-cart-item__remove-link:hover {
    color: var(--vp-turquesa-secundario) !important;
}

/* Precio Total del Producto en la Lista */
.wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-formatted-money-amount {
    color: var(--vp-morado-principal) !important;
    font-weight: 600 !important;
}


/* --- CONTROLES DE CANTIDAD (+ / - / Input) --- */

/* Botones de + y - */
.wc-block-components-quantity-selector__button {
    color: var(--vp-turquesa-secundario) !important;
    border-color: var(--vp-turquesa-secundario) !important;
}
/* Input de Cantidad */
.wc-block-components-quantity-selector__input {
    border-color: var(--vp-morado-suave) !important;
    color: var(--vp-morado-principal) !important;
}

/* --- BOTONES DEL MINI CARRITO (Footer) --- */

/* Botón "Ir a finalizar compra" (Contained/Sólido) */
.wc-block-mini-cart__footer-checkout.contained {
    background-color: var(--vp-morado-principal) !important; /* Morado Principal */
    color: #FFFFFF !important;
    border: 2px solid var(--vp-morado-principal) !important;
    font-weight: 700 !important;
}
.wc-block-mini-cart__footer-checkout.contained:hover {
    background-color: var(--vp-morado-hover) !important; /* Morado Hover */
    border-color: var(--vp-dorado-enfasis) !important; /* Borde Dorado en Hover */
}

/* Botón "Ver mi carrito" (Outlined/Contorno) */
.wc-block-mini-cart__footer-cart.outlined {
    background-color: #FFFFFF !important; /* Fondo blanco */
    color: var(--vp-morado-principal) !important; /* Texto Morado Principal */
    border: 2px solid var(--vp-morado-principal) !important;
    font-weight: 700 !important;
}
.wc-block-mini-cart__footer-cart.outlined:hover {
    background-color: var(--vp-morado-suave) !important; /* Fondo Morado Suave en Hover */
    border-color: var(--vp-morado-principal) !important;
}
/* =========================================================
   ESTILOS DE WOOCOMMERCE: MINI CARRITO VACÍO
   ========================================================= */

/* 1. Texto principal "¡Tu carrito está vacío!" */
.wc-block-mini-cart__empty-cart-wrapper p {
    color: var(--vp-morado-principal) !important;
    font-weight: 700 !important;
    font-size: 1.1em;
    padding-bottom: 10px; 
}

/* 2. Botón "Comienza a comprar" (Contained/Sólido) */
.wc-block-mini-cart__shopping-button.contained {
    /* Mismos estilos que el botón principal de checkout */
    background-color: var(--vp-morado-principal) !important; /* Morado Principal */
    color: #FFFFFF !important;
    border: 2px solid var(--vp-morado-principal) !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    transition: all 0.3s ease;
}

.wc-block-mini-cart__shopping-button.contained:hover {
    background-color: var(--vp-morado-hover) !important; /* Morado Hover */
    border-color: var(--vp-dorado-enfasis) !important; /* Borde Dorado en Hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* --- WOOCOMMERCE: PÁGINA DE PRODUCTO INDIVIDUAL --- */

/* Migas de Pan (Breadcrumbs) */
.woocommerce-page .woocommerce-breadcrumb a {
    color: var(--vp-morado-principal) !important;
}
.woocommerce-page .woocommerce-breadcrumb a:hover {
    color: var(--vp-turquesa-secundario) !important;
}

/* Enlaces de Categoría y Etiquetas (Tags) */
.product_meta a {
    color: var(--vp-turquesa-secundario) !important;
    font-weight: 600;
}
.product_meta a:hover {
    color: var(--vp-morado-principal) !important;
}
/* Color Turquesa para las estrellas completas */
.star-rating span:before {
    color: var(--vp-turquesa-secundario) !important;
}
body.woocommerce-cart .wp-block-post-title,
body.woocommerce-checkout .wp-block-post-title {
    color: var(--vp-morado-principal) !important;
    font-size: 2.5em !important; 
    font-weight: 700 !important;
    text-transform: uppercase; 
    margin-bottom: 20px;
}
/* =========================================================
   ESTILOS CORREGIDOS: ÍCONOS DE ENCABEZADO (CUENTA Y CARRITO)
   ========================================================= */

/* --- Mi Cuenta (Icono de Persona) --- */

/* 1. Estado Normal: Morado Principal */
.wp-block-woocommerce-customer-account a,
.wc-block-customer-account__account-icon {
    /* Usamos color para stroke y fill para el SVG */
    color: var(--vp-morado-principal) !important; 
    fill: var(--vp-morado-principal) !important;
    transition: color 0.3s ease;
}

/* 2. Estado Hover: Dorado Énfasis */
.wp-block-woocommerce-customer-account a:hover,
.wp-block-woocommerce-customer-account a:hover .wc-block-customer-account__account-icon {
    color: var(--vp-dorado-enfasis) !important;
    fill: var(--vp-dorado-enfasis) !important;
}


/* --- Mini Carrito (Icono de Bolsa) --- */

/* 1. Estado Normal: Morado Principal */
.wc-block-mini-cart .wc-block-mini-cart__button,
.wc-block-mini-cart .wc-block-mini-cart__icon {
    /* Usamos color para stroke y fill para el SVG */
    color: var(--vp-morado-principal) !important;
    fill: var(--vp-morado-principal) !important;
    transition: color 0.3s ease;
}

/* 2. Estado Hover: Dorado Énfasis */
.wc-block-mini-cart .wc-block-mini-cart__button:hover,
.wc-block-mini-cart .wc-block-mini-cart__button:hover .wc-block-mini-cart__icon {
    color: var(--vp-dorado-enfasis) !important;
    fill: var(--vp-dorado-enfasis) !important;
}

/* 3. Badge de cantidad (el circulito con el número) */
.wc-block-mini-cart__quantity-badge {
    color: #FFFFFF !important; /* Texto Blanco */
}
.wc-block-mini-cart__badge {
    background-color: var(--vp-turquesa-secundario) !important; 
    color: #FFFFFF !important; /* El texto (el número) debe ser blanco */
    /* Mantenemos el borde para una definición más nítida */
    border: 1px solid var(--vp-turquesa-secundario) !important; 
}
/* =========================================================
   ESTILOS: PÁGINA DE CARRITO (CART BLOCK)
   ========================================================= */

/* Título de la página (El texto "Carrito") */
.wp-block-woocommerce-cart h1.entry-title,
.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-store-notices h1 {
    color: var(--vp-morado-principal) !important;
}

/* Enlaces de productos y "Eliminar artículo" */
.wp-block-woocommerce-cart a {
    color: var(--vp-morado-principal) !important;
    text-decoration: none;
    transition: color 0.2s;
}
.wp-block-woocommerce-cart a:hover {
    color: var(--vp-turquesa-secundario) !important;
}

/* Precios y totales (resumen) */
.wp-block-woocommerce-cart .amount {
    color: var(--vp-turquesa-secundario) !important; /* Turquesa para énfasis económico */
    font-weight: 700 !important;
}

/* Botones de Cantidad (+/-) - Usaremos los selectores de bloques que ya teníamos */
.wc-block-components-quantity-selector__button {
    color: var(--vp-morado-principal) !important;
    border-color: var(--vp-morado-suave) !important;
}

/* Botón "Finalizar compra" (Principal CTA) - Usaremos el selector específico del bloque */
.wp-block-woocommerce-cart .wc-block-components-button.checkout {
    background-color: var(--vp-morado-principal) !important;
    color: #FFFFFF !important;
    border: 2px solid var(--vp-morado-principal) !important;
    transition: all 0.3s ease;
}
.wp-block-woocommerce-cart .wc-block-components-button.checkout:hover {
    background-color: var(--vp-morado-hover) !important;
    border-color: var(--vp-dorado-enfasis) !important;
}
/* --- BOTÓN FINALIZAR COMPRA (PÁGINA DE CARRITO) --- */
.wc-block-cart__submit-button.contained {
    /* Estado Normal: Contorno Turquesa */
    background-color: transparent !important; /* Fondo transparente */
    color: var(--vp-turquesa-secundario) !important; /* Texto Turquesa */
    font-weight: 700 !important;
    border: 2px solid var(--vp-turquesa-secundario) !important;
    transition: all 0.3s ease;
}
.wc-block-cart__submit-button.contained:hover {
    /* Estado Hover: Relleno Morado Principal */
    background-color: var(--vp-morado-principal) !important;
    color: #FFFFFF !important; /* Texto blanco para contraste */
    border-color: var(--vp-morado-principal) !important;
}
/* =========================================================
   ESTILOS: PÁGINA DE FINALIZAR COMPRA (CHECKOUT BLOCK)
   ========================================================= */

/* Títulos de Secciones (Información de Contacto, Dirección, Opciones de Pago, Resumen) */
.wp-block-woocommerce-checkout h3 {
    color: var(--vp-morado-principal) !important;
    border-bottom: 2px solid var(--vp-morado-suave); /* Línea suave para separación */
    padding-bottom: 10px;
}

/* Color de los precios en el resumen del pedido */
.wp-block-woocommerce-checkout .wc-block-components-totals-item__value {
    color: var(--vp-turquesa-secundario) !important;
    font-weight: 700;
}

/* Estilo para los campos de formulario (input, textarea) */
.wp-block-woocommerce-checkout input[type="text"],
.wp-block-woocommerce-checkout input[type="email"],
.wp-block-woocommerce-checkout textarea,
.wp-block-woocommerce-checkout select {
    border: 1px solid var(--vp-morado-suave) !important;
    border-radius: 4px;
    transition: border-color 0.2s;
}
.wp-block-woocommerce-checkout input[type="text"]:focus,
.wp-block-woocommerce-checkout input[type="email"]:focus,
.wp-block-woocommerce-checkout textarea:focus {
    border-color: var(--vp-turquesa-secundario) !important; /* Borde Turquesa al enfocar */
    box-shadow: 0 0 5px rgba(0, 169, 157, 0.2);
}

/* Botón Final "Realizar el pedido" (CTA Principal) */
.wp-block-woocommerce-checkout #place_order {
    background-color: var(--vp-morado-principal) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border: 2px solid var(--vp-morado-principal) !important;
    transition: all 0.3s ease;
}
.wp-block-woocommerce-checkout #place_order:hover {
    background-color: var(--vp-morado-hover) !important;
    border-color: var(--vp-dorado-enfasis) !important;
}
/* --- BOTÓN PRINCIPAL: REALIZAR EL PEDIDO (CHECKOUT) --- */
.wc-block-components-checkout-place-order-button.contained {
    background-color: var(--vp-morado-principal) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border: 2px solid var(--vp-morado-principal) !important;
    transition: all 0.3s ease;
}
.wc-block-components-checkout-place-order-button.contained:hover {
    background-color: var(--vp-morado-hover) !important;
    border-color: var(--vp-dorado-enfasis) !important;
}
/* --- BOTÓN SECUNDARIO: VOLVER AL CARRITO (CHECKOUT) --- */
.wc-block-components-checkout-return-to-cart-button {
    color: var(--vp-turquesa-secundario) !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: color 0.3s ease;
}
.wc-block-components-checkout-return-to-cart-button svg {
    fill: var(--vp-turquesa-secundario) !important; /* El ícono SVG */
    transition: fill 0.3s ease;
}
.wc-block-components-checkout-return-to-cart-button:hover {
    color: var(--vp-morado-principal) !important;
}
.wc-block-components-checkout-return-to-cart-button:hover svg {
    fill: var(--vp-morado-principal) !important;
}
/* =========================================================
   ESTILOS: PÁGINA DE FALLO DE PEDIDO (ORDER FAILED)
   ========================================================= */

/* Título H1: "No se pudo completar el pedido" */
.wc-block-order-confirmation-status h1 {
    color: var(--vp-morado-principal) !important;
    font-size: 2em !important;
    font-weight: 700 !important;
}

/* Banner de Notificación de Error (Transacción fallida) */
.wc-block-components-notice-banner.is-error {
    background-color: var(--vp-morado-suave) !important; /* Fondo Morado muy suave */
    border-left: 5px solid var(--vp-morado-principal) !important; /* Borde Morado */
    color: var(--vp-morado-principal) !important; /* Texto Morado */
}
/* Ícono de Alerta dentro del Banner */
.wc-block-components-notice-banner.is-error svg {
    fill: var(--vp-morado-principal) !important;
}
/* =========================================================
   ESTILOS: PÁGINA DE FALLO DE PEDIDO (ORDER FAILED)
   ========================================================= */

/* Título H1: "No se pudo completar el pedido" */
.wc-block-order-confirmation-status h1 {
    color: var(--vp-morado-principal) !important;
    font-size: 2em !important;
    font-weight: 700 !important;
}

/* Banner de Notificación de Error (Transacción fallida) */
.wc-block-components-notice-banner.is-error {
    background-color: var(--vp-morado-suave) !important; /* Fondo Morado muy suave */
    border-left: 5px solid var(--vp-morado-principal) !important; /* Borde Morado */
    color: var(--vp-morado-principal) !important; /* Texto Morado */
}
/* Ícono de Alerta dentro del Banner */
.wc-block-components-notice-banner.is-error svg {
    fill: var(--vp-morado-principal) !important;
}
/* --- BOTONES: Inténtalo de nuevo / Mi cuenta --- */
.wc-block-order-confirmation-status__actions a.button {
    background-color: var(--vp-morado-principal) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border: 2px solid var(--vp-morado-principal) !important;
    text-transform: uppercase;
    transition: all 0.3s ease;
    padding: 10px 20px; /* Aseguramos padding consistente */
}

.wc-block-order-confirmation-status__actions a.button:hover {
    background-color: var(--vp-morado-hover) !important;
    border-color: var(--vp-dorado-enfasis) !important;
}
/* =========================================================
   ESTILOS: PÁGINA DE PEDIDO COMPLETADO (ORDER SUCCESS)
   ========================================================= */

/* Título H1: "Pedido completado" (Ya cubierto, pero lo reforzamos) */
.wc-block-order-confirmation-status h1 {
    color: var(--vp-morado-principal) !important;
    font-size: 2em !important;
    font-weight: 700 !important;
}

/* Banner de Notificación de Éxito (Transacción aprobada) */
.wc-block-components-notice-banner.is-success {
    background-color: var(--vp-turquesa-suave) !important; /* Fondo Turquesa suave */
    border-left: 5px solid var(--vp-turquesa-secundario) !important; /* Borde Turquesa */
    color: var(--vp-turquesa-secundario) !important; /* Texto Turquesa */
}
/* Ícono de Visto Bueno (Checkmark) dentro del Banner */
.wc-block-components-notice-banner.is-success svg {
    fill: var(--vp-turquesa-secundario) !important;
}
 
/* --- BOTÓN SECUNDARIO: HACER OTRO PEDIDO --- */
.order-again a.button {
    background-color: transparent !important;
    color: var(--vp-morado-principal) !important;
    font-weight: 700 !important;
    border: 2px solid var(--vp-morado-principal) !important;
    transition: all 0.3s ease;
    padding: 10px 20px;
}

.order-again a.button:hover {
    background-color: var(--vp-morado-principal) !important;
    color: #FFFFFF !important;
}
/* --- BOTONES DE DESCARGA DENTRO DE LA TABLA (AJUSTE DE TAMAÑO Y CENTRADO) --- */

/* 1. Ajustar el contenedor TD para centrar el contenido (el botón) */
.wc-block-order-confirmation-downloads__table td.download-file {
    text-align: center !important; 
    vertical-align: middle;
}

/* 2. Estilo Base del Botón de Descarga */
.wc-block-order-confirmation-downloads__table a.button {
    /* ---------------------------------------------------- */
    /* PROPIEDADES AÑADIDAS PARA TAMAÑO Y CENTRADO: */
    width: 150px !important; /* ANCHO FIJO para todos los botones */
    display: block !important; /* Hace que el botón ocupe su ancho fijo */
    margin: 5px auto !important; /* Centra el botón dentro del TD */
    /* ---------------------------------------------------- */
    
    background-color: var(--vp-turquesa-secundario) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border: 2px solid var(--vp-turquesa-secundario) !important;
    text-transform: uppercase;
    transition: all 0.3s ease;
    padding: 8px 10px; /* Reducimos el padding horizontal ya que el ancho es fijo */
    text-align: center !important; /* Asegura que el texto dentro del botón esté centrado */
    white-space: nowrap; /* Evita que el texto se salte de línea */
    overflow: hidden; /* Oculta el texto si es muy largo */
    text-overflow: ellipsis; /* Añade puntos suspensivos si el texto se oculta */
}

/* Hover de Descarga: Dorado Énfasis para destacar */
.wc-block-order-confirmation-downloads__table a.button:hover {
    background-color: var(--vp-dorado-enfasis) !important;
    border-color: var(--vp-dorado-enfasis) !important;
    color: #000000 !important; /* Texto negro sobre Dorado */
}
/* Centra el texto del encabezado de la columna "Descarga" */
.wc-block-order-confirmation-downloads__table th.download-file {
    text-align: center !important; 
    /* Aseguramos que el encabezado de la columna esté centrado */
}
.wc-block-order-confirmation-downloads__table td.download-file {
    text-align: center !important; 
    vertical-align: middle;
}
/* ============================================== */
/* ESTILO GLOBAL Y OFFCANVAS (FILTRO LATERAL) */
/* ============================================== */

/* Estilo del Título de la Tienda */
.titulo-tienda-vp {
    color: #5A196E;
    font-size: 3em; 
    font-weight: 700; 
    margin-top: 0; 
    margin-bottom: 20px;
    text-transform: capitalize; 
}

/* 1. Botón Abrir Filtros (Estilos base) */
.boton-desplegar-filtros {
    background: #5A196E;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    width: 200px;
    text-align: center;
    transition: background-color 0.3s;
    
    /* Limpieza de estilos obsoletos */
    order: unset; 
    margin: unset;
    position: static; 
}

/* 2. CONTENEDOR DE FILTROS (PANEL LATERAL OCULTO) */
.filtros-movil-desplegable {
    position: fixed; 
    top: 0;
    bottom: 0;
    right: 0; 
    width: 300px;
    max-width: 90%; 
    z-index: 1000; 
    background-color: white; 
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    overflow-y: auto; 
    padding: 20px;
    
    /* Ocultamiento por defecto */
    transform: translateX(100%); 
    transition: transform 0.3s ease-in-out;
    display: block; 
}

/* Clase añadida por JS cuando está abierto */
.filtros-movil-desplegable.is-open {
    transform: translateX(0); 
}

/* ============================================== */
/* LAYOUT DE ESCRITORIO (PC: >= 769px) */
/* ============================================== */

/* 🔥 1. CONTENEDOR PADRE FLEXIBLE (INCLUYE BOTÓN Y .shop-header-row) */
.filtro-toolbar-wrapper.alignwide {
    display: flex;
    align-items: center; 
    justify-content: flex-start; /* Inicio a la izquierda */
    width: 100%; 
    margin: 0 auto; 
    padding: 10px 0;
    flex-wrap: wrap; /* CLAVE: Permite el apilamiento de Filtro/Grupo */
}

/* 2. Botón de Filtros: MOVER ARRIBA A LA DERECHA */
.filtro-toolbar-wrapper .boton-desplegar-filtros {
    /* CLAVE PC: Empuja el botón al extremo derecho de la fila superior */
    margin-left: auto; 
    flex-shrink: 0; 
    margin-right: 0; 
    order: 2; /* Se queda en la primera línea */
}

/* 3. El Contenedor de la Fila (.shop-header-row): Ocupa el 100% y va ABAJO */
.filtro-toolbar-wrapper .shop-header-row {
    /* CLAVE PC: Ocupa todo el ancho disponible, forzando un salto de línea (abajo del Filtro) */
    width: 100%; 
    flex-grow: 1; 
    order: 3; /* Se coloca en la segunda línea */
    
    /* Mantiene Contador Izquierda y Ordenar Derecha (por defecto de WooCommerce) */
    display: flex;
    align-items: center;
    justify-content: space-between; 
    
    /* Limpieza de estilos */
    margin: unset;
    padding: unset;
}

/* 4. Estilos de Contador en PC (dentro de la fila) */
.shop-header-row .woocommerce-result-count {
    order: 1;
    color: #5A196E; 
    font-size: 1.1em;
    font-weight: 600; 
    flex-grow: 0; 
    margin-right: 20px;
}

/* 5. Contenedor del desplegable "Orden predeterminado" */
.shop-header-row .woocommerce-ordering {
    order: 2; 
    flex-shrink: 0;
}

/* --- ADAPTACIÓN DEL PANEL PARA QUE SE VEA COMO MODAL EN PC --- */
/* --- ADAPTACIÓN DEL PANEL (CORREGIDO PARA OFF-CANVAS LATERAL) --- */
@media (min-width: 769px) {
    .filtros-movil-desplegable.is-open {
        /* **CORRECCIÓN CLAVE** - Vuelve a ser un Off-Canvas pegado a la derecha */
        position: fixed !important; 
        right: 0 !important; 
        left: auto !important; 
        top: 0 !important; 
        bottom: 0 !important; 
        
        width: 300px !important; /* Ancho deseado del panel */
        max-width: 90% !important;
        
        transform: translateX(0) !important; /* Asegura que se muestre */
        margin-left: 0 !important; /* Limpia el margen de centrado anterior */
    }
    /* Clase del contenedor del botón o el botón mismo */
    .wc-block-product-filters__actions {
        /* Fuerza la visualización si estaba oculta */
        display: flex !important; 
        /* Asegura que esté posicionado al final del filtro */
        justify-content: flex-end; 
        margin-top: 20px; 
    }
    
    /* El botón Aplicar en sí */
    .wc-block-product-filters__apply {
        /* Asegura que el botón sea visible si Woo lo oculta por defecto */
        display: block !important; 
        /* Opcional: Estilo de botón para PC */
        min-width: 150px;
    }
}

/* ============================================== */
/* AJUSTES DE RESPONSIVIDAD (MÓVIL: <= 768px) */
/* ============================================== */

@media (max-width: 768px) {
    
    /* 🔥 MÓVIL: Apila y Centra todo el contenido */
    .filtro-toolbar-wrapper.alignwide {
        justify-content: center; 
        flex-direction: column; /* Apila verticalmente */
        align-items: center; 
    }

    /* MÓVIL: Botón de Filtro (Centrado y Apilado) */
    .filtro-toolbar-wrapper .boton-desplegar-filtros {
        width: 90%; 
        margin-left: unset; /* Anula el margin-left: auto de PC */
        order: 1; /* Posición: Primero (Arriba) */
        text-align: center;
    }
    
    /* MÓVIL: El Grupo (Contador/Ordenar) */
    .filtro-toolbar-wrapper .shop-header-row {
        width: 90%; 
        margin: 5px auto; 
        order: 2; /* Posición: Segundo (Debajo del Filtro) */
        
        /* Apila y centra los elementos internos (Contador y Ordenar) */
        flex-direction: column; 
        align-items: center; 
        justify-content: center;
    }
    
    /* AJUSTE DE TAMAÑO EN MÓVIL (Elementos internos) */
    .shop-header-row .woocommerce-result-count,
    .shop-header-row .woocommerce-ordering {
        width: 100%;
        margin: 5px auto;
        text-align: center;
    }
    
    .woocommerce-result-count p {
        text-align: center;
    }
    
    /* Ocultamos nuestro botón '✕ Cerrar' en móvil (lo maneja el JS) */
    .boton-cerrar-filtro {
        display: none;
    }
}

/* Tamaño de fuente para precios */
.woocommerce-Price-amount, 
.amount {
    font-size: 1.6rem !important; 
    display: inline-block; 
}

/* Si el precio incluye decimales o la moneda (ej: el span dentro del amount), aseguramos que herede el tamaño */
.woocommerce-Price-amount span {
    font-size: 1em !important; /* Hereda el tamaño del padre */
}

/* Si necesitas una regla más específica para evitar conflictos: */
.products .woocommerce-Price-amount, 
.products .amount {
    font-size: 1.3rem; 
}
/* =========================================================
   ESTILO DE PRECIO TACHADO (LÍNEA MORADA VALENTINA)
   ========================================================= */

/* Contenedor del precio antiguo (del) */
.woocommerce div.product p.price del,
.woocommerce ul.products li.product .price del,
.wc-block-components-product-price del {
    text-decoration: none !important; /* Quita tachado negro */
    position: relative !important;
    display: inline-block !important;
    margin-right: 12px !important;
    opacity: 0.6;
}

/* La línea morada inclinada */
.woocommerce div.product p.price del::after,
.woocommerce ul.products li.product .price del::after,
.wc-block-components-product-price del::after {
    content: "";
    position: absolute;
    left: -2px;
    top: 50%;
    width: calc(100% + 4px);
    height: 2.5px;
    background-color: var(--vp-morado-principal) !important;
    transform: rotate(-10deg);
    border-radius: 5px;
    z-index: 10;
}

/* Precio Viejo (Texto) */
.price del .woocommerce-Price-amount,
.wc-block-components-product-price del .woocommerce-Price-amount {
    color: #888 !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
}

/* Precio Nuevo (Oferta) */
.price ins,
.wc-block-components-product-price ins {
    text-decoration: none !important;
    display: inline-block !important;
}

.price ins .woocommerce-Price-amount,
.wc-block-components-product-price ins .woocommerce-Price-amount {
    color: var(--vp-turquesa-secundario) !important;
    font-size: 1.9rem !important;
    font-weight: 800 !important;
}

/* Limpieza de textos de accesibilidad */
.screen-reader-text {
    display: none !important;
}