/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0
*/

@import url( '../hello-elementor/style.css' );

/* Override all width constraints */
.elementor-container {
    max-width: 100% !important;
    width: 100% !important;
}

.woocommerce {
    width: 100% !important;
    max-width: 100% !important;
}

.woocommerce-page {
    max-width: 100% !important;
}

/* Cart wrapper - full width two column */
.woocommerce-cart-wrapper {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 40px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 30px 40px !important;
    box-sizing: border-box !important;
}

.cart-main-content {
    grid-column: 1 !important;
    width: 100% !important;
}

.cart-summary-sidebar {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
}

/* Header */
.cart-header-bar {
    background: #e8f5e9 !important;
    padding: 15px !important;
    border-radius: 4px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

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

/* Cart items table */
.cart-items-table {
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

.cart-item-row {
    display: grid !important;
    grid-template-columns: 40px 100px 1fr 100px 100px 120px !important;
    gap: 15px !important;
    padding: 15px !important;
    border-bottom: 1px solid #e0e0e0 !important;
    align-items: center !important;
    width: 100% !important;
}

.cart-item-remove {
    font-size: 24px !important;
    text-align: center !important;
    color: #dc3545 !important;
}

.cart-item-image img {
    max-width: 100px !important;
    height: auto !important;
}

.cart-item-details h3 {
    margin: 0 0 10px 0 !important;
    font-size: 16px !important;
}

.cart-item-details .sku {
    display: block !important;
    font-size: 12px !important;
    color: #999 !important;
}

.cart-item-quantity input {
    width: 60px !important;
    padding: 5px !important;
}

.cart-item-price {
    text-align: right !important;
    font-weight: bold !important;
}

/* Summary sidebar */
.cart-summary-box {
    background: #f9f9f9 !important;
    padding: 20px !important;
    border-radius: 4px !important;
    border: 1px solid #e0e0e0 !important;
    position: sticky !important;
    top: 20px !important;
    width: 100% !important;
}

.cart-summary-box h3 {
    margin-top: 0 !important;
    font-size: 18px !important;
}

/* Cart totals table */
.cart_totals {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 20px !important;
}

.cart_totals tr {
    border-bottom: 1px solid #e0e0e0 !important;
}

.cart_totals th {
    text-align: right !important;
    padding: 10px 0 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.cart_totals td {
    text-align: left !important;
    padding: 10px 0 !important;
    font-size: 14px !important;
}

.cart_totals tr.order-total th,
.cart_totals tr.order-total td {
    font-weight: bold !important;
    font-size: 18px !important;
    background: #e8f5e9 !important;
    padding: 15px 10px !important;
}

/* Free shipping */
.free-shipping-progress {
    background: #e8f5e9 !important;
    padding: 15px !important;
    border-radius: 4px !important;
    margin: 20px 0 !important;
    text-align: center !important;
}

.free-shipping-progress h4 {
    margin: 0 0 10px 0 !important;
    font-size: 16px !important;
    color: #2e7d32 !important;
}

.progress-bar {
    height: 8px !important;
    background: #ddd !important;
    border-radius: 4px !important;
    margin: 10px 0 !important;
    overflow: hidden !important;
}

.progress-fill {
    height: 100% !important;
    background: #4caf50 !important;
    width: 77% !important;
}

/* Trust badges */
.trust-badges {
    border-top: 1px solid #e0e0e0 !important;
    padding-top: 15px !important;
    margin-top: 15px !important;
}

.trust-badges h4 {
    margin: 0 0 10px 0 !important;
    font-size: 14px !important;
}

.trust-badges ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.trust-badges li {
    padding: 8px 0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    font-size: 13px !important;
    margin: 0 !important;
}

/* Recommended products */
.cart-recommended-products {
    margin-top: 40px !important;
}

.cart-recommended-products h3 {
    font-size: 18px !important;
    margin-bottom: 15px !important;
}

.products-carousel {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 15px !important;
    margin-top: 15px !important;
}

.product-card {
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    padding: 15px !important;
    text-align: center !important;
}

.product-card img {
    max-width: 100% !important;
    margin-bottom: 10px !important;
    height: auto !important;
}

.product-card h4 {
    margin: 0 0 10px 0 !important;
    font-size: 14px !important;
}

.product-card .product-price {
    font-weight: bold !important;
    margin-bottom: 10px !important;
}

.add-to-cart-btn {
    width: 100% !important;
    padding: 8px !important;
}

/* Checkout button */
.checkout-button-wrapper {
    margin-top: 20px !important;
}

.checkout-button-wrapper .button {
    width: 100% !important;
    padding: 15px !important;
    font-size: 16px !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .woocommerce-cart-wrapper {
        grid-template-columns: 1fr !important;
        padding: 20px !important;
        gap: 30px !important;
    }

    .cart-summary-sidebar {
        grid-column: 1 !important;
    }

    .cart-item-row {
        grid-template-columns: 40px 80px 1fr 100px !important;
    }

    .products-carousel {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .woocommerce-cart-wrapper {
        padding: 10px !important;
    }

    .cart-item-row {
        grid-template-columns: 1fr !important;
    }

    .products-carousel {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
