/* Asegura que las imágenes del slider se adapten */
.slider-container img {
    width: 100%;           /* Ocupa todo el contenedor */
    height: auto;          /* Mantiene proporción */
}

/* Ajuste para pantallas pequeñas */
@media (max-width: 768px) {
    .slider-container {
        max-width: 100%;   /* Ocupa todo el ancho en móviles */
        padding: 0 10px;
    }
}
.top-bar-wrap{
    display: none;
}
/* Contenedor principal del nav */
#navbar .container {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alinea todo a la izquierda */
}

/* Botón responsive y aside-nav-wrapper en línea */
.the9-store-responsive-navbar {
    margin-right: 15px; /* Espacio entre botón y menú */
}

#aside-nav-wrapper {
    flex-grow: 0 !important; /* Evita que se expanda */
    display: flex;
    align-items: center;
    margin-left: 15px; /* Espacio entre logo y menú */
}

/* Ajustar el menú para que sea horizontal */
#menu-principal {
    display: flex;
    gap: 20px; /* Espacio entre ítems */
}
.dev_info{
    display:none;
}
/* --- FOOTER DOS COLUMNAS NUBEPET --- */

/* 1. Contenedor en dos columnas */
.the9-store-flex {
    display: flex;
    align-items: center;      /* Centra verticalmente los elementos */
    justify-content: space-between; /* Uno a la izquierda, otro a la derecha */
    flex-wrap: nowrap;
    padding: 20px 0;
    max-width: 900px;         /* Ajusta el ancho para que no queden tan lejos */
    margin: 0 auto;           /* Centra el bloque entero */
}

/* 2. Columna Izquierda: Menú con botones más grandes */
#nav_menu-2 {
    flex: 1;
    text-align: left;
}

#menu-menu-footer {
    display: flex;
    gap: 15px;
    padding: 0;
    margin: 0;
    list-style: none;
}

#menu-menu-footer li a {
    font-size: 18px !important; /* Agrandamos las letras */
    color: #333;
    white-space: nowrap;      /* Evita que se corten en dos líneas */
}

/* El separador | */
#menu-menu-footer li:not(:last-child):after {
    content: "|";
    margin-left: 15px;
    color: #999;
}

/* 3. Columna Derecha: Logo de Webpay más pequeño */
#block-8 {
    flex: 0 0 auto;
    text-align: right;
}

#block-8 img {
    max-width: 180px !important; /* Achicamos el logo */
    height: auto;
    display: inline-block;
}

/* 4. Ajuste para Celulares (se vuelven a apilar para que no se vea apretado) */
@media (max-width: 768px) {
    .the9-store-flex {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    #nav_menu-2, #block-8 {
        text-align: center;
    }
    #menu-menu-footer {
        flex-direction: column;
        gap: 10px;
    }
    #menu-menu-footer li:after {
        display: none;
    }
}
/* --- MEJORAS DEL CARRITO NUBEPET --- */

/* 1. Estructura de dos columnas en escritorio */
@media (min-width: 992px) {
    .woocommerce-cart .woocommerce {
        display: flex;
        align-items: flex-start;
        gap: 30px;
    }
    
    .woocommerce-cart .woocommerce-cart-form {
        flex: 1; /* Tabla de productos ocupa más espacio */
    }
    
    .woocommerce-cart .cart-collaterals {
        flex: 0 0 350px; /* Resumen de pago fijo a la derecha */
        position: sticky;
        top: 20px;
    }
}

/* 2. Estilo de la Tabla de Productos */
.shop_table.cart {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eee !important;
}

.shop_table.cart thead th {
    background-color: #f9f9f9;
    text-transform: uppercase;
    font-size: 12px;
    padding: 15px;
}

/* 3. Botones del Carrito (Cupones y Actualizar) */
.woocommerce-cart .actions {
    padding: 20px !important;
}

.woocommerce-cart .coupon input#coupon_code {
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 8px 12px;
}

.woocommerce-cart .button[name="update_cart"] {
    background-color: #eee !important;
    color: #666 !important;
    border-radius: 5px;
}

/* 4. El Resumen de Totales (Caja de la derecha) */
.cart_totals {
    background: #ffffff;
    padding: 25px;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.cart_totals h2 {
    font-size: 20px;
    margin-bottom: 20px;
    border-bottom: 2px solid #ff5722; /* Color naranja de tu logo */
    display: inline-block;
}

/* 5. Botón de Finalizar Compra (El más importante) */
.checkout-button {
    background-color: #ff5722 !important; /* Naranja llamativo */
    color: white !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    padding: 15px !important;
    border-radius: 8px !important;
    text-align: center;
    display: block;
    margin-top: 20px;
    transition: transform 0.2s ease;
}

.checkout-button:hover {
    transform: scale(1.02);
    background-color: #e64a19 !important;
}

/* 6. Ajuste de Shipit en el carrito */
.shipit_icon {
    max-width: 60px !important;
    margin-right: 10px;
}





/* --- ARREGLO DE BOTONES Y CUPÓN --- */

/* Alinea el cupón y su botón en la misma línea */
.woocommerce-cart .actions .coupon {
    display: flex !important;
    align-items: center;
    gap: 10px;
    float: left; /* Lo mantiene a la izquierda */
}

/* Ajusta el tamaño del campo de texto del cupón */
.woocommerce-cart input#coupon_code {
    width: 150px !important; /* Tamaño fijo para que no se estire */
    height: 40px !important;
    margin: 0 !important;
    padding: 0 10px !important;
}

/* Estilo para los botones (Aplicar y Actualizar) */
.woocommerce-cart .actions .button {
    width: auto !important; /* Evita que sean gigantes */
    height: 40px !important;
    padding: 0 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    cursor: pointer;
}

/* Botón Actualizar Carrito (a la derecha) */
.woocommerce-cart .actions > .button {
    float: right; /* Lo separa del grupo del cupón */
}

/* Ajuste para móviles: que no se amontonen */
@media (max-width: 600px) {
    .woocommerce-cart .actions .coupon {
        flex-direction: column;
        width: 100%;
    }
    .woocommerce-cart .actions .coupon, 
    .woocommerce-cart input#coupon_code, 
    .woocommerce-cart .actions .button {
        width: 100% !important;
        float: none !important;
    }
}
/* Ocultar campo de Código Postal en Carrito y Checkout */
#calc_shipping_postcode_field, 
.form-row.address-field.validate-postcode,
.woocommerce-shipping-calculator .form-row-wide#calc_shipping_postcode_field {
    display: none !important;
}
/* Contenedor del banner */
.custom-home-banner {
    width: 100%;
    max-height: 400px; /* Ajusta este número (ej. 300px o 400px) a la altura que desees */
    overflow: hidden;  /* Corta lo que sobre de la imagen */
    margin-bottom: 20px;
}

/* Ajuste de la imagen */
.custom-home-banner img {
    width: 100%;
    height: 400px;     /* Debe coincidir con el max-height de arriba */
    object-fit: cover; /* Esto hace que la imagen se llene el espacio sin deformarse */
    object-position: center; /* Centra la imagen (para que se vea la cara del gatito) */
    display: block;
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .custom-home-banner, .custom-home-banner img {
        max-height: 200px; /* Más pequeño en celulares */
        height: 200px;
    }
}