/* ===== RESET & BASE STYLES ===== */
:root {
    --primary-color: #b0d443;
    --primary-dark: #8ca835;
    --rosa-color: #d443b0;
    --accent-color: #E74C3C;
    --primary-transparent: rgba(136, 147, 106, 0.45);
    --sombra-precio: rgba(41, 34, 34, 0.8);
    --text-dark: #1a1a1a;
    --text-light: #333;
    --text-white: #ffffff;
    --border-color: #eaeaea;
    --font-heading: 'Avenir Next', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Roboto', 'Segoe UI', system-ui, sans-serif;
}

body {
    font-family: var(--font-body);
    color: var(--text-light);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 70px; /* Para compensar el header fijo */
}

/* Utilidades Bootstrap personalizadas */
.btn {
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    font-family: var(--font-heading);
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-dark);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-3px);
    color: var(--text-dark);
}

.btn-outline-dark {
    border: 2px solid var(--text-dark);
    color: var(--text-dark);
    background-color: transparent;
    transition: all 0.3s ease;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-dark);
    transform: translateY(-3px);
}

/* ===== TIPOGRAFÍA ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-dark);
    font-weight: 700;
    line-height: 1.2;
}

/* ===== HEADER / NAVEGACIÓN ===== */
.main-header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1030;
    transition: all 0.3s ease;
    height: 70px;
}

.main-header.scrolled {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar-custom {
    background: transparent !important;
    padding: 0;
}

/* Logo como imagen */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-image {
    height: 60px !important;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    transition: all 0.3s ease;
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-dark);
    display: none; /* Oculto por defecto, solo visible si no hay imagen */
}

.logo-text span {
    color: var(--primary-color);
}

/* Mostrar texto solo si la imagen falla */
.logo:has(.logo-image:not([src])) .logo-text,
.logo:not(:has(.logo-image)) .logo-text {
    display: inline;
}

/* Navegación */
.navbar-nav .nav-link {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text-dark) !important;
    font-size: 0.95rem;
    padding: 0.5rem 1rem !important;
    position: relative;
}

.navbar-nav .nav-link:hover {
    color: var(--primary-color) !important;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1rem;
    width: calc(100% - 2rem);
    height: 2px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.navbar-nav .nav-link:hover::after {
    transform: scaleX(1);
}

/* Teléfono en el menú */
.menu-item-hotline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 1.5rem;
    padding-top: 0.8rem !important;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    margin-left: 1rem !important;
    height: 100%;
}

.icon-telephone {
    color: var(--primary-color);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: -2px;
}

.hotline-content {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    justify-content: center;
}

.hotline-content label {
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    color: #ff0000 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
}

.hotline-content span {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: var(--text-dark);
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2;
    font-family: var(--font-heading);
}

/* Acciones */
.header-actions {
    margin-left: 1.5rem !important;
}

.header-actions a {
    color: var(--text-dark);
    font-size: 1.1rem;
    transition: color 0.2s ease;
}

.header-actions a:hover {
    color: var(--primary-color);
}

.cart-count, .wishlist-count {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-count {
    background-color: var(--primary-color);
    color: var(--text-dark);
}

.wishlist-count {
    background-color: var(--text-dark);
    color: var(--text-white);
}

.cart-offcanvas,
.wishlist-offcanvas,
.account-offcanvas {
    width: 380px;
}

.cart-items,
.wishlist-items {
    max-height: 60vh;
    overflow-y: auto;
}

.cart-item-image,
.wishlist-item-image {
    width: 60px;
    flex-shrink: 0;
}

.cart-item-image img,
.wishlist-item-image img {
    width: 100%;
    height: 60px;
    object-fit: cover;
}

.cart-item-name,
.wishlist-item-name {
    font-size: 0.95rem;
}

.cart-item-price,
.wishlist-item-price {
    font-size: 0.9rem;
    color: var(--text-light);
}

.cart-empty-message,
.wishlist-empty-message {
    margin-top: 0.5rem;
}

/* Navbar Toggle */
.navbar-toggler {
    border: none;
    padding: 0.25rem;
    color: var(--text-dark);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 2px var(--primary-color);
}

/* ===== SIDEBAR DESDE LA IZQUIERDA (RESPONSIVE) ===== */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 1040;
    transition: background-color 0.3s ease;
    pointer-events: none;
}

.sidebar-overlay.active {
    background-color: rgba(176, 212, 67, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    pointer-events: all;
}

@media (max-width: 992px) {
    /* Sidebar principal */
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: -300px;
        width: 300px;
        height: 100vh;
        background: rgba(255, 255, 255, 0.9) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.1);
        padding: 1.5rem !important;
        margin-top: 20% !important;
        border-radius: 0 20px 0 0 !important;
        z-index: 1050;
        transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        overflow-y: auto;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start;
    }
    
    .navbar-collapse.sidebar-open {
        left: 0;
    }
    
    /* Contenedor del menú dentro del sidebar */
    .navbar-collapse .navbar-nav {
        flex-direction: column !important;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    
    /* Items del menú en sidebar */
    .navbar-collapse .nav-item {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    .navbar-collapse .nav-item:last-child {
        border-bottom: none;
    }
    
    .navbar-collapse .nav-link {
        padding: 1.2rem 0 !important;
        font-size: 1rem !important;
        color: var(--text-dark) !important;
        font-weight: 500 !important;
        width: 100%;
        display: block;
        border-bottom: none !important;
        transition: all 0.2s ease;
    }
    
    .navbar-collapse .nav-link:hover {
        color: var(--primary-color) !important;
        background-color: rgba(176, 212, 67, 0.05);
        padding-left: 10px !important;
    }
    
    .navbar-collapse .nav-link::after {
        display: none;
    }
    
    /* Teléfono en sidebar */
    .navbar-collapse .menu-item-hotline {
        border-left: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        padding-top: 1.2rem !important;
        padding-bottom: 1.2rem !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        justify-content: flex-start;
        margin-top: 1rem !important;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    .navbar-collapse .hotline-content span {
        font-size: 1.2rem !important;
    }
    
    /* Acciones en sidebar */
    .navbar-collapse .header-actions {
        margin-left: 0 !important;
        padding-top: 1.2rem !important;
        padding-bottom: 1.2rem !important;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        margin-top: 1rem !important;
        border-bottom: none !important;
    }
    
    .navbar-collapse .header-actions .d-flex {
        justify-content: flex-start;
        gap: 2rem !important;
    }
    
    .navbar-collapse .header-actions a {
        font-size: 1.2rem !important;
    }
    
    /* Botón cerrar dentro del sidebar (opcional) */
    .navbar-collapse::before {
        content: '\f00d';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        font-size: 1.3rem;
        color: var(--text-dark);
        cursor: pointer;
        transition: color 0.2s ease;
    }
    
    .navbar-collapse::before:hover {
        color: var(--primary-color);
    }
    
    /* Header cuando sidebar está abierto */
    body:has(.sidebar-open) .main-header {
        z-index: 1060;
    }
}

@media (max-width: 480px) {
    .navbar-collapse {
        width: 280px;
        left: -280px;
    }
    
    .navbar-collapse.sidebar-open {
        left: 0;
    }
}

/* ===== HERO SECTION ===== */
.hero {
    min-height: calc(90vh - 70px);
    color: var(--text-white);
}

.hero-content {
    max-width: 800px;
}

.hero-tagline {
    font-size: 1rem;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.9);
}

.hero-title {
    font-size: 3.5rem;
    color: var(--text-white);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
}

/* ===== SECCIÓN DE PRODUCTOS CON IMÁGENES RECTANGULARES ===== */
.featured-section {
    background-color: var(--text-white);
}

.section-title {
    position: relative;
    padding-bottom: 20px;
}

.section-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: var(--primary-color);
}

/* Contenedor de producto */
.product-card {
    background: var(--text-white);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 10px 25px rgba(176, 212, 67, 0.1);
    transform: translateY(-5px);
}

/* Contenedor de imagen rectangular */
.product-image-container {
    position: relative;
    width: 100%;
    height: 250px; /* Alto fijo rectangular */
    overflow: hidden;
    background-color: #f8f8f8; /* Fondo por si la imagen no carga */
}

/* Imagen rectangular con cover */
.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantiene proporciones, cubre el contenedor */
    object-position: center; /* Centra la imagen */
    transition: transform 0.5s ease;
}

.product-card:hover .product-image {
    transform: scale(1.05);
}

.btn-add-wishlist {
    position: absolute;
    top: 15px;
    right: 15px;
    border: none;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--text-dark);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-wishlist i {
    font-size: 0.9rem;
}

.btn-add-wishlist:hover {
    background-color: var(--primary-color);
    color: var(--text-dark);
}

/* Categorías */
.product-category {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--primary-dark);
    color: var(--text-white);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    padding: 5px 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    z-index: 2;
}

.product-category.sale {
    background-color: var(--primary-color);
    color: var(--text-dark);
    font-weight: 700;
}

/* Contenido del producto */
.product-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}


.product-title {
    font-size: 1.3rem;
    margin-bottom: 10px;
    min-height: 60px;
    display: flex;
    align-items: center;
}

.product-description {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 20px;
    flex: 1;
}

.product-price {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.price {
    font-weight: 700;
}

.old-price {
    text-decoration: line-through;
    color: #999;
    font-weight: 400;
    font-size: 1rem;
}

.new-price {
    color: var(--primary-color);
    font-size: 1.3rem;
}

.btn-card {
    display: block;
    padding: 12px 20px;
    background-color: var(--primary-color);
    color: var(--text-dark);
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 0.85rem;
    text-decoration: none;
    letter-spacing: 0.5px;
    text-align: center;
    transition: all 0.3s ease;
    width: 100%;
    border: none;
    margin-top: auto;
}

.btn-card:hover {
    background-color: var(--primary-color);
    color: var(--text-dark);
}

/* ===== FOOTER ===== */
.main-footer {
    background: transparent;
    color: var(--text-white);
    padding: 0;
    margin-top: auto;
    position: relative;
    height: 130px;
    overflow: hidden;
}

.main-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/fondo.png') no-repeat center bottom/cover;
    background-size: cover;
    background-position: center bottom;
    z-index: -2;
}

.main-footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8));
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: -1;
}

.footer-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 1;
}

.footer-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 30px;
    flex-grow: 1;
}

/* Logo y copyright en footer */
.footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-logo {
    height: 45px !important;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    margin-bottom: 8px;
}

.footer-info .logo-text {
    display: none;
}

.footer-info:has(.footer-logo:not([src])) .logo-text {
    display: inline;
}

.footer-copyright {
    text-align: left;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    margin: 0;
}

/* Menú del footer - SIEMPRE HORIZONTAL */
.footer-menu {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    text-align: right;
}

.footer-menu a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 0.85rem;
    font-family: var(--font-heading);
    font-weight: 500;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    flex-shrink: 0;
}

.footer-menu a:hover {
    color: var(--primary-color);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    body {
        padding-top: 60px;
    }
    
    .main-header {
        height: 60px;
    }
    
    .logo-image {
        height: 35px;
    }
    
    .hero {
        min-height: calc(100vh - 60px);
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    /* Imágenes de productos en móvil */
    .product-image-container {
        height: 250px; /* Un poco más bajo en móvil */
    }
    
    .product-title {
        min-height: auto;
        font-size: 1.2rem;
    }
    
    .product-description {
        min-height: auto;
    }
    
    /* Footer */
    .main-footer {
        height: 150px;
    }
    
    .footer-container {
        padding: 15px 0;
    }
    
    .footer-info {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .footer-left {
        align-items: center;
    }
    
    .footer-logo {
        height: 30px;
        margin-bottom: 10px;
    }
    
    .footer-copyright {
        text-align: center;
        font-size: 0.65rem;
        margin-bottom: 15px;
    }
    
    .footer-menu {
        justify-content: center;
        text-align: center;
        gap: 10px;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 5px;
    }
    
    .footer-menu a {
        font-size: 0.75rem;
        margin: 0 5px;
        padding: 2px 0;
    }
    
    /* Ocultar scrollbar */
    .footer-menu::-webkit-scrollbar {
        display: none;
    }
    
    .footer-menu {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

@media (max-width: 576px) {
    .logo-image {
        height: 30px;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .product-image-container {
        height: 220px;
    }
    
    .main-footer {
        height: 160px;
    }
    
    .footer-info {
        gap: 10px;
    }
    
    .footer-logo {
        height: 25px;
    }
    
    .footer-copyright {
        font-size: 0.6rem;
        margin-bottom: 10px;
    }
    
    .footer-menu {
        gap: 8px;
        padding: 0 5px;
    }
    
    .footer-menu a {
        font-size: 0.7rem;
        margin: 0 3px;
        letter-spacing: 0.3px;
    }
}

@media (max-width: 480px) {
    .product-image-container {
        height: 450px;
    }
    
    .footer-menu {
        gap: 5px;
    }
    
    .footer-menu a {
        font-size: 0.65rem;
        margin: 0 2px;
        padding: 1px 3px;
    }
}

/* ===== RIGHT SIDEBAR (Carrito, Wishlist, Cuenta) ===== */
.right-sidebar {
    position: fixed;
    top: 0;
    right: -340px; /* Oculto a la derecha */
    width: 320px;
    height: 90%;
    border-radius: 20px 0 0 20px !important;
    top: 5% !important;    
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
    padding: 2rem 1.5rem;
    z-index: 1060; /* Encima del menú responsivo (1050) */
    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Estado abierto */
.right-sidebar.open {
    right: 0;
}

/* Header del sidebar */
.right-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.right-sidebar-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.3rem;
    margin: 0;
}

/* =========================================
   WooCommerce Checkout Overrides
   ========================================= */
.woocommerce-checkout .col2-set {
    width: 100%;
    margin-bottom: 2rem;
}

.woocommerce-checkout .col-1, 
.woocommerce-checkout .col-2 {
    max-width: 100%;
    flex: 0 0 100%;
}

/* Make field wrappers act as rows for the grid system */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.woocommerce form .form-row {
    padding-right: 15px;
    padding-left: 15px;
    margin: 0 0 1.5rem;
}

/* Minimalist Input Styles */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single {
    display: block;
    width: 100%;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #d1d1d1;
    border-radius: 0;
    box-shadow: none;
    transition: border-color 0.3s ease;
}

.select2-container--default .select2-selection--single {
    height: auto;
    border: none;
    border-bottom: 1px solid #d1d1d1;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    color: #212529;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.select2-container--default.select2-container--open .select2-selection--single {
    color: #212529;
    background-color: transparent;
    border-bottom-color: var(--primary-color);
    outline: 0;
    box-shadow: none;
}

.woocommerce form .form-row label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
    margin-bottom: 0.25rem;
}

/* Ocultar campos de factura por defecto (evita parpadeo al cargar) */
.invoice-field {
    display: none;
}

/* Estilo para el checkbox de factura */
.form-row.invoice-toggle label.checkbox {
    display: inline-block;
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.95rem;
}

.form-row.invoice-toggle input[type="checkbox"] {
    margin-right: 10px;
    vertical-align: middle;
    width: auto !important; /* Override full width */
    display: inline-block !important;
}

.woocommerce-checkout #order_review_heading {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1rem; /* Drastically reduced from 1.3rem */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dark);
}

.woocommerce-checkout #order_review {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid #dee2e6;
}

.woocommerce-checkout #payment {
    background: #fff;
    border-radius: 5px;
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid #dee2e6;
    padding: 1rem;
}

.woocommerce-checkout #payment div.place-order {
    padding: 1rem;
}

.woocommerce-checkout button.button.alt {
    display: block;
    padding: 12px 20px;
    background-color: var(--primary-color);
    color: var(--text-dark);
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 0.85rem;
    text-decoration: none;
    letter-spacing: 0.5px;
    text-align: center;
    transition: all 0.3s ease;
    width: 100%;
    border: none;
    margin-top: auto;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none; /* Reset specific shadow */
    border-radius: 0; /* Match btn-card */
}

.woocommerce-checkout button.button.alt:hover {
    background-color: var(--primary-color);
    color: var(--text-dark);
    opacity: 0.9;
}

.woocommerce-checkout h3,
.woocommerce-checkout h4,
.woocommerce-checkout h5 {
    font-size: 0.85rem; /* Drastically reduced */
    color: var(--text-dark) !important; /* Force correct color, no blue */
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Hide some default WC styling that conflicts */
.woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* WooCommerce Cart Overrides moved to pagina_carrito.css */

/* =========================================
   WooCommerce Shipping Methods (Clean & Minimal)
   ========================================= */
#shipping_method {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#shipping_method li {
    margin-bottom: 0.25rem;
    text-indent: 0 !important;
    border-radius: 4px;
    transition: background-color 0.2s ease;
        padding: 15px !important; /* Ajuste solicitado por usuario */

    margin-left: 0 !important; /* Reset margin del LI */
    list-style: none !important; /* Asegurar no bullets */
}

/* Resetear pseudo-elementos del LI por si acaso */
#shipping_method li::before,
#shipping_method li::after {
    display: none !important;
    content: none !important;
}

/* Aplicar fondo al LI cuando el input dentro está chequeado */
#shipping_method li:has(input:checked) {
    background-color: rgba(176, 212, 67, 0.7); /* Verde de la marca con transparencia */
}

/* Ocultar completamente el radio button nativo y su espacio */
#shipping_method li input[type="radio"] {
    display: none !important;
}

/* Asegurar que no haya pseudo-elementos extraños en el label */
#shipping_method li label::before,
#shipping_method li label::after {
    display: none !important;
    content: none !important;
}

/* Label limpio: sin negrita, letra pequeña, transparente */
#shipping_method li label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-dark);
    cursor: pointer;
    background-color: transparent; /* Fondo siempre transparente */
    box-sizing: border-box; /* Asegurar que el padding no desborde el ancho */
}

/* Ajuste fino para el precio dentro del label */
#shipping_method li label .amount {
    font-weight: 500;
    font-size: 0.85rem;
}

/* =========================================
   WooCommerce Checkout Review Order Table
   ========================================= */
.woocommerce-checkout-review-order-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

/* Hide redundant product list in order review sidebar since we have the top table */
.woocommerce-checkout-review-order-table thead,
.woocommerce-checkout-review-order-table tbody {
    display: none;
}

.woocommerce-checkout-review-order-table tfoot th {
    font-weight: 600;
    color: #495057;
    background-color: #fff;
    border-top: 1px solid #e9ecef;
}

.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table .order-total th {
    background-color: #f8f9fa;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    font-weight: 700;
    color: #212529;
    font-size: 0.8rem; /* Reduced from 1rem */
    border-top: 2px solid #dee2e6;
    border-bottom: none;
}

.woocommerce-checkout-review-order-table .product-name {
    font-weight: 500;
}

.woocommerce-checkout-review-order-table .product-total {
    text-align: right;
    font-weight: 600;
}

/* =========================================
   Checkout Top Cart Table
   ========================================= */
.checkout-product-img {
    max-width: 100px !important;
    width: 100px !important;
    max-height: 100px !important;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}

.checkout-cart-table .product-quantity {
    width: 120px;
}

.checkout-cart-table input.qty {
    text-align: center;
    width: 60px !important;
    margin: 0 auto;
    display: inline-block !important;
}

/* =========================================
   Push Notifications Style for WooCommerce
   ========================================= */
.woocommerce-notices-wrapper,
.woocommerce-NoticeGroup {
    position: fixed;
    top: 10%;
    right: 0;
    z-index: 99999;
    width: 90%;
    max-width: 600px;
    pointer-events: none; /* Let clicks pass through the wrapper */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Exclude internal update notices from fixed positioning if needed, 
   but user asked for consistent style. 
   Usually updateOrderReview notices are inside the review table area.
   We'll make them relative if they are inside .woocommerce-checkout-review-order-table-wrapper
*/
.woocommerce-checkout-review-order .woocommerce-NoticeGroup {
    position: static;
    transform: none;
    width: 100%;
    max-width: 100%;
    z-index: auto;
    margin-bottom: 1rem;
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    pointer-events: auto;
    width: 100%;
    padding: 1rem 4rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideDown 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    border: none !important; /* Override default WC borders */
    background: #fff;
    color: #495057;
    font-weight: 500;
}

/* Icons */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 1rem;
    font-size: 1.2rem;
}

/* Success Message */
.woocommerce-message {
    border-left: 5px solid var(--primary-color) !important;
}
.woocommerce-message::before {
    content: "\f00c"; /* Check */
    color: var(--primary-color);
}

/* Error Message */
.woocommerce-error {
    border-left: 5px solid var(--accent-color) !important;
    list-style: none;
    margin: 0 0 1rem 0;
}
.woocommerce-error::before {
    content: "\f06a"; /* Exclamation Circle */
    color: var(--accent-color);
}
.woocommerce-error li {
    width: 100%;
}

/* Info Message */
.woocommerce-info {
    border-left: 5px solid var(--text-dark) !important;
}
.woocommerce-info::before {
    content: "\f05a"; /* Info Circle */
    color: var(--text-dark);
}

/* Button inside messages (e.g. 'View Cart') */
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
    float: right;
    margin-left: 1rem;
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s;
}
.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover {
    background-color: rgba(0,0,0,0.05);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   Coupon Toggle Style
   ========================================= */
.woocommerce-form-coupon-toggle .woocommerce-info {
    background: #fff;
    border: 1px solid #e9ecef !important;
    border-left: 5px solid var(--primary-color) !important; /* Primary Color Accent */
    border-radius: 8px;
    padding: 1rem 4rem;
    color: #495057;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    position: relative; /* Reset fixed positioning from generic class if matched */
    transform: none;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    z-index: 1;
    margin-bottom: 1.5rem;
}

.woocommerce-form-coupon-toggle .woocommerce-info::before {
    color: var(--primary-color);
    content: "\f02c"; /* Tag Icon */
}

.woocommerce-form-coupon-toggle a.showcoupon {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    margin-left: 0.5rem;
}

.woocommerce-form-coupon-toggle a.showcoupon:hover {
    text-decoration: underline;
    color: var(--primary-dark);
}

/* Coupon Form */
form.checkout_coupon {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    margin-bottom: 2rem;
    display: none; /* WC handles toggle, but ensure init state */
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

form.checkout_coupon p {
    margin-bottom: 1rem;
}

form.checkout_coupon .form-row {
    margin-bottom: 0;
}

form.checkout_coupon button[type="submit"] {
    margin-top: 1rem;
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
    width: auto;
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0.25rem;
    font-weight: 600;
}

form.checkout_coupon button[type="submit"]:hover {
    background-color: #5c636a;
    border-color: #565e64;
}

/* =========================================
   Product Variations & Add to Cart
   ========================================= */
.variations_form,
form.cart {
    margin-bottom: 2rem;
}

form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.variations {
    width: 100%;
    border: none !important;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.variations tbody {
    display: block;
    width: 100%;
}

.variations tr {
    display: block;
    margin-bottom: 1rem;
    border: none !important;
}

.variations td {
    display: block !important; /* Force stack for minimalist look */
    padding: 0;
    border: none !important;
    background: transparent !important;
}

.variations td.label {
    padding-bottom: 0.5rem;
    margin-bottom: 0;
}

.variations label {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.variations select {
    width: 70%;
    max-width: 70%;
    height: 48px;
    padding: 0 1rem;
    font-size: 1rem;
    font-weight: 400;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

.variations select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(176, 212, 67, 0.15);
    outline: none;
}

.reset_variations {
    display: grid;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #6c757d;
    text-decoration: underline;
}

.single_variation_wrap {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 50% !important;
    border-top: 1px solid #eee;
    padding-top: 1.5rem;
}

.single_add_to_cart_button input[type="submit"] {
    width: 50%;
    margin-top: 0px !important;
}


/* 1. Forzamos al contenedor (el formulario) a ser flexible */
form.cart {
    display: flex !important;
    flex-direction: row !important; /* Obliga a ir en fila horizontal */
    flex-wrap: nowrap !important;   /* Prohíbe que bajen de línea */
    align-items: flex-start !important; /* Alineación vertical */
}

/* 2. CRUCIAL: Obligamos a la caja de cantidad a NO ocupar todo el espacio */
form.cart .quantity {
    float: none !important;      /* Desactiva floats antiguos */
    width: auto !important;      /* Se ajusta al tamaño del contenido */
    min-width: fit-content;      /* Asegura que no se aplaste */
    margin: 0 10px 0 0 !important; /* Un pequeño margen a la derecha */
}

/* 3. CRUCIAL: Obligamos al botón a NO ocupar todo el espacio */
form.cart button.single_add_to_cart_button,
form.cart button.btn-card {
    width: auto !important;      /* Evita el 100% de ancho */
    margin-top: 0 !important;    /* Elimina el efecto de la clase mt-2 */
    display: inline-block !important;
}

.woocommerce-variation-price {
    margin-bottom: 1.5rem;
}

.woocommerce-variation-price .price {
    font-size: 1.5rem;
    color: var(--primary-color);
    font-weight: 700;
}

.woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 18px;
}

.mediano{
    position: relative;
    width: 25% !important;
    align-items: center;
}

.woocommerce-variation-add-to-cart .btn-card {
    /* Quitamos el margen superior (mt-2) para que quede alineado perfecto */
    margin-top: 0 !important; 
    
    /* Opcional: Si quieres que el botón no sea gigante */
    width: auto; 
    flex-grow: 1; /* Opcional: Hace que el botón ocupe el resto del espacio */
}

/* 3. Aseguramos que la caja de cantidad no flote ni estorbe */
.woocommerce-variation-add-to-cart .quantity {
    margin: 0 !important;
    float: none !important; /* WooCommerce a veces usa floats antiguos */
}


/* Quantity Input */
.quantity {
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 0.5rem;
}

.quantity input.qty {
    width: 70px;
    height: 48px; /* Match button height */
    text-align: center;
    padding: 0;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-dark);
    background: #fff;
    appearance: textfield; /* Remove spinner */
}

.quantity input.qty::-webkit-inner-spin-button, 
.quantity input.qty::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/* Add to Cart Button - Matches .btn-card .btn-primary */
.single_add_to_cart_button {
    flex: 1;
    min-width: 200px;
    height: 48px;
    padding: 0 2rem;
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: var(--text-dark);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0; /* Bootstrap btn default */
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem; /* Matches mt-2 */
}

.single_add_to_cart_button:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--text-dark);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.single_add_to_cart_button.disabled {
    background-color: #e9ecef;
    border-color: #e9ecef;
    color: #adb5bd;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.single_add_to_cart_button::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f07a"; /* Shopping Cart */
}

/* Minimum and Maximum Quantity for WooCommerce Rules Styling */
.variations {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 1rem;
    margin: 0 0 0 0;
    padding: 1rem;
    background-color: #f8f9fa;
    border-left: 3px solid var(--primary-color);
    border-radius: 0 4px 4px 0;
    font-size: 0.85rem;
    list-style: none !important;
}

.variations li {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    color: #6c757d;
    font-family: var(--font-body);
}

.variations li strong {
    margin-right: 0.5rem;
    color: var(--text-dark);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}