/* =========================
   RESPONSIVE (Mobile)
========================= */

@media (max-width: 768px) {
    html, body {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .sticky-header {
        padding: 8px 12px;
    }
    .sticky-header .header-link {
        margin: 0;
        font-size: 14px;
    }

    /* Product list */
    .woocommerce ul.products {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box;
    }
    li.custom-product-item {
        max-width: 100% !important;
        width: 100% !important;
        margin: 10px 0 !important;
    }
    li.custom-product-item .top-section {
        height: 293px;
    }
    li.custom-product-item.expanded .customization-section {
        max-height: 600px;
    }
    li.custom-product-item .upload-info {
        font-size: 11px;
    }
    li.custom-product-item .customization-form .quantity {
        gap: 10px;
    }
    li.custom-product-item .customization-form .quantity .quantity-controls button {
        width: 35px;
        height: 43px;
        font-size: 14px;
    }
    li.custom-product-item .customization-form .quantity .quantity-controls input {
        width: 40px;
        height: 43px;
        font-size: 14px;
    }
    li.custom-product-item .customization-form .quantity .add-to-cart {
        padding: 0 10px;
        font-size: 14px;
        flex: 0 0 120px;
        height: 43px;
        line-height: 43px;
    }

    /* Cart */
    .cart-items {
        padding: 0 10px;
    }
    .cart-item {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }
    .item-images {
        flex-direction: column;
        gap: 10px;
        margin-right: 15px;
    }
    .product-image-container,
    .cropped-image-container,
    .cropped-image.placeholder {
        width: 70px;
        height: 70px;
    }
    .item-details {
        flex: 1;
        min-width: 0;
    }
    .item-quantity,
    .item-price,
    .item-remove {
        margin: 10px 0;
    }
    .cart-actions {
        text-align: center;
    }

    /* Checkout */
    .checkout-items {
        padding: 0 10px;
    }
    .checkout-item {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .checkout-item .item-images {
        flex-direction: column;
        gap: 10px;
    }
    .checkout-item .product-image-container,
    .checkout-item .cropped-image-container,
    .checkout-item .cropped-image.placeholder {
        width: 70px;
        height: 70px;
    }
    .checkout-item .item-details {
        min-width: 0;
    }
    .checkout-form {
        padding: 0 10px;
    }
}

/* =========================
   DESKTOP GRID (min-width: 900px)
   Uses !important to override any theme CSS
========================= */
@media (min-width: 900px) {
    .woocommerce ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        justify-content: start !important;
        gap: 24px !important;
        max-width: 1100px !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 32px 40px 80px !important;
        box-sizing: border-box !important;
    }

    li.custom-product-item {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        display: block !important;
    }

    li.custom-product-item .product-container {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    li.custom-product-item .top-section {
        height: auto !important;
        min-height: 200px !important;
    }

    li.custom-product-item .product-image {
        width: 44% !important;
    }
}

@media (min-width: 1400px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
        max-width: 1400px !important;
        padding: 40px 60px 100px !important;
    }
}