/* Evaly Theme Mobile Responsiveness */
@media (max-width: 768px) {
    /* Mobile buttons */
    .btn-primary,
    .theme-btn,
    .checkout-btn,
    .btn-checkout,
    .product-buy-button,
    .add-to-cart,
    .add-to-cart-btn,
    button[type="submit"],
    input[type="submit"] {
        padding: 8px 15px;
        font-size: 14px;
    }
    
    /* Mobile badges */
    .badge,
    .discount-badge,
    .sale-badge-inner,
    .product_item_inner .sale-badge-inner,
    .hot-deal-badge {
        font-size: 12px;
        padding: 3px 8px;
    }
    
    /* Mobile input fields */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    select,
    textarea,
    .form-control {
        font-size: 14px;
        padding: 8px 10px;
    }
}

/* Additional Evaly-specific overrides for cute products theme */
.header-section, 
.main-header {
    background-color: var(--evaly-white) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

.main-search form button {
    background-color: var(--evaly-dark) !important;
}

.product_item_inner .product-name a, 
.product-name a {
    color: var(--evaly-dark) !important;
}

.price, 
.product-price, 
.current-price {
    color: var(--evaly-dark) !important;
    font-weight: 600;
}

.add-to-cart, 
.add-to-cart-btn {
    background-color: var(--evaly-dark) !important;
    color: var(--evaly-white) !important;
}

.cart-count, 
.wish-count {
    background-color: var(--evaly-blue) !important;
}

.category-menu, 
.sidebar_item {
    background-color: var(--evaly-white) !important;
    border: 1px solid var(--evaly-border) !important;
}

.category-menu a:hover, 
.sidebar_item a:hover {
    color: var(--evaly-blue) !important;
}

.footer {
    background-color: var(--evaly-dark) !important;
}

.footer a {
    color: var(--evaly-light) !important;
}

.footer a:hover {
    color: var(--evaly-white) !important;
}
