/* Hemp Products Mobile Fixes */

/* Desktop button centering fix for hemp products */
.product-hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.product-hero-content .buy-now-button,
.product-hero-content button[data-product-type] {
    align-self: center !important;
    margin: 0 auto !important;
}

.product-hero-content .safety-link-container {
    align-self: center !important;
    margin: 1rem auto 0 auto !important;
    width: 100% !important;
}

/* Mobile-specific styles for hemp product buttons */
@media (max-width: 768px) {
    /* Ensure hemp buttons fit properly on mobile */
    button[data-product-type="euphoria"],
    button[data-product-type="socialize"], 
    button[data-product-type="relax"] {
        font-size: 0.85rem !important;
        padding: 0.6rem 0.8rem !important;
        min-width: auto !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Shop page product cards - ensure buttons don't overflow */
    .product-card .product-actions,
    .tonic-card .product-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
        justify-content: center;
    }
    
    .product-card button,
    .tonic-card button {
        flex: 1;
        min-width: 0;
        max-width: 48%;
    }
    
    /* Quantity selector styling on mobile */
    .quantity-container {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0.5rem 0;
    }
    
    .quantity-container label {
        font-size: 0.9rem;
        white-space: nowrap;
    }
    
    .quantity-selector {
        padding: 0.4rem;
        font-size: 0.9rem;
        max-width: 4rem;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    button[data-product-type="euphoria"],
    button[data-product-type="socialize"], 
    button[data-product-type="relax"] {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.6rem !important;
    }
    
    .product-card button,
    .tonic-card button {
        max-width: 100%;
        margin-bottom: 0.25rem;
    }
}