/* MINIMAL STYLING - LET IT FLOW FREELY */

.updownvoter-products-container {
    display: grid;
    gap: 20px;
    width: 100%;
}

.updownvoter-products-container.single-product {
    grid-template-columns: 1fr;
}

.updownvoter-products-container.two-products {
    grid-template-columns: repeat(2, 1fr);
}

.updownvoter-products-container.three-products {
    grid-template-columns: repeat(3, 1fr);
}

/* Force iframe to use full available space */
.updownvoter-individual-product {
    width: 100%;
}

/* Override Shopify Buy Button container max-width constraint */
.updownvoter-individual-product .shopify-buy-button-container {
    max-width: 100% !important;
    width: 100% !important;
}

.updownvoter-individual-product iframe {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}

/* Ensure Shopify Buy Button has enough space */
.updownvoter-individual-product .shopify-buy-button-container iframe {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}

/* Force button width to be more generous */
.updownvoter-individual-product .shopify-buy-button-container .shopify-buy__btn {
    min-width: 120px !important;
    width: auto !important;
    padding: 8px 16px !important;
}

/* Target iframe content directly */
.updownvoter-individual-product iframe[src*="shopify"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}

/* Ensure iframe content has proper width */
.updownvoter-individual-product iframe body {
    width: 100% !important;
    max-width: 100% !important;
}

/* Mobile - stack everything - OVERRIDE ALL GRID CLASSES */
@media (max-width: 768px) {
    .updownvoter-products-container,
    .updownvoter-products-container.single-product,
    .updownvoter-products-container.two-products,
    .updownvoter-products-container.three-products {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        align-items: center !important;
        justify-content: center !important;
        align-content: center !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .updownvoter-individual-product {
        justify-self: center !important;
        align-self: center !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
}