/* --- OPTIMIZACIÓN RESPONSIVE MÓVIL (Buscador Full-Width) --- */
@media (max-width: 767px) {

    /* Hacemos los iconos más pequeños en móviles para que no ocupen tanto espacio */
    .icon-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    .header-brand img {
        height: 28px !important;
        width: 28px !important;
    }

    .brand-text {
        font-size: 16px !important;
    }

    .search-pill {
        padding: 6px 12px;
    }

    .search-icon {
        font-size: 13px;
        margin-right: 8px;
    }

    .search-pill input {
        font-size: 16px !important;
        /* Previene el zoom automático del teclado en móviles */
    }

    .producto-card {
        padding: 10px !important;
        /* Más espacio interno para el contenido */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
        /* Sombra más pronunciada para dar relieve */
        border: 1px solid var(--color-border) !important;
        /* Refuerza el borde */
    }

    body.dark-mode .producto-card {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
        /* Mayor contraste de sombra en modo oscuro */
        border-color: #4B5563 !important;
        /* Borde un poco más claro para separar bien */
    }

    .product-img-container {
        padding: 6px !important;
        margin-bottom: 8px !important;
    }

    .producto-titulo {
        font-size: 12.5px !important;
        line-height: 1.3 !important;
        height: 34px !important;
        /* Exactamente 2 líneas seguras sin cortar letras */
        margin-bottom: 6px !important;
        word-break: break-word !important;
    }

    .producto-stock {
        font-size: 10px !important;
        margin-bottom: 8px !important;
    }

    .product-price {
        font-size: 16px !important;
        /* Evita que el precio desborde */
    }

    .product-price-container {
        min-width: 0 !important;
        /* Permite que el texto se trunque si es muy largo */
        flex: 1 !important;
        overflow: hidden !important;
    }

    .product-price,
    .product-price-bs {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .product-price-bs {
        font-size: 11px !important;
    }

    .btn-add-cart {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
        margin-left: 5px !important;
        flex-shrink: 0 !important;
        /* Evita que el precio largo aplaste el botón */
        touch-action: manipulation !important;
        /* Elimina el retraso de 300ms al hacer tap en algunos navegadores */
        border-radius: 50% !important;
    }

    /* --- MEJORAS VISUALES DEL CARRITO (MÓVIL) --- */
    .cart-header {
        padding: 12px 15px !important;
    }

    .cart-header h2 {
        font-size: 18px !important;
    }

    #lista-carrito {
        padding: 10px 15px !important;
        gap: 10px !important;
    }

    .cart-item {
        padding: 12px 10px !important;
        gap: 10px !important;
        border-radius: 14px !important;
        align-items: center !important;
    }

    .cart-item-img,
    .cart-item-img-placeholder {
        width: 55px !important;
        height: 55px !important;
        border-radius: 8px !important;
    }

    .cart-item-title {
        font-size: 13px !important;
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
    }

    .cart-item-price {
        font-size: 15px !important;
    }

    .cart-item-price-bs {
        display: block !important;
        font-size: 11px !important;
        margin-top: 1px !important;
    }

    .cart-controls {
        padding: 4px 6px !important;
        gap: 6px !important;
        border-radius: 16px !important;
    }

    .cart-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }

    #checkout-sections {
        padding: 0 15px 15px 15px !important;
    }

    .checkout-box {
        padding: 15px !important;
        border-radius: 14px !important;
        margin-bottom: 12px !important;
    }

    .box-title {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    .toggle-btn {
        padding: 10px 5px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }

    .input-text,
    .input-select {
        padding: 12px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    .total-container {
        padding: 15px !important;
        border-radius: 14px !important;
        margin-bottom: 15px !important;
    }

    .total-usd {
        font-size: 22px !important;
    }

    .total-bs {
        font-size: 12px !important;
    }

    /* --- MEJORAS VISUALES DEL PERFIL (MÓVIL) --- */
    #modal-perfil .cart-layout-grid {
        padding: 15px !important;
        gap: 15px !important;
    }

    .historial-item {
        padding: 15px !important;
        border-radius: 14px !important;
        margin-bottom: 12px !important;
    }

    .historial-item>div>span:first-child {
        font-size: 11px !important;
    }

    .historial-item>div>span:last-child {
        font-size: 16px !important;
    }

    .historial-item p {
        font-size: 12px !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin-bottom: 12px !important;
    }

    .historial-item button {
        padding: 10px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
    }
}

@media (min-width: 768px) {
    .tools-container {
        display: grid;
        gap: 15px;
    }
}

@media (min-width: 1024px) {
    .productos-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}