/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Version: 1.1
Description: Child theme voor WooCommerce – full-width cart & thumbnails
*/

/* ─────────────────────────────────────────
   WooCommerce Cart – Basis container
───────────────────────────────────────── */
.woocommerce-cart,
.wp-block-woocommerce-cart {
    width: 100vw;                  /* full viewport width */
    max-width: 1800px;             /* optioneel: max breedte */
    margin: 0 auto;                /* centreer binnen viewport */
    padding: 2rem 1rem;            /* padding rondom content */
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
    font-family: system-ui, sans-serif;
}

/* ─────────────────────────────────────────
   Cart tabel – full width & breed kolommen
───────────────────────────────────────── */
.woocommerce-cart .shop_table,
.wp-block-woocommerce-cart table.shop_table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

/* Headers – subtiel, borderless */
.woocommerce-cart .shop_table th,
.wp-block-woocommerce-cart table th {
    padding: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
    text-align: left;
    border: none;
}

/* Cells – padding & vertical align */
.woocommerce-cart .shop_table td,
.wp-block-woocommerce-cart table td {
    padding: 1rem;
    vertical-align: middle;
    border: none;
}

/* Ruimte tussen rijen i.p.v. lijnen */
.woocommerce-cart .shop_table tbody tr + tr td,
.wp-block-woocommerce-cart table tbody tr + tr td {
    padding-top: 1.5rem;
}

/* Subtiele hover effect */
.woocommerce-cart .shop_table tbody tr:hover {
    background: rgba(0,0,0,0.02);
}

/* ─────────────────────────────────────────
   Kolom breedtes – pas aan naar wens
───────────────────────────────────────── */
.woocommerce-cart .shop_table th.product-thumbnail,
.woocommerce-cart .shop_table td.product-thumbnail,
.wp-block-woocommerce-cart table th.product-thumbnail,
.wp-block-woocommerce-cart table td.product-thumbnail {
    width: 25%;              /* grotere thumbnail kolom */
}

.woocommerce-cart .shop_table th.product-name,
.woocommerce-cart .shop_table td.product-name,
.wp-block-woocommerce-cart table th.product-name,
.wp-block-woocommerce-cart table td.product-name {
    width: 35%;              /* product naam kolom breder */
}

.woocommerce-cart .shop_table th.product-quantity,
.woocommerce-cart .shop_table td.product-quantity,
.wp-block-woocommerce-cart table th.product-quantity,
.wp-block-woocommerce-cart table td.product-quantity {
    width: 15%;
}

.woocommerce-cart .shop_table th.product-price,
.woocommerce-cart .shop_table td.product-price,
.wp-block-woocommerce-cart table th.product-price,
.wp-block-woocommerce-cart table td.product-price {
    width: 12.5%;
}

.woocommerce-cart .shop_table th.product-subtotal,
.woocommerce-cart .shop_table td.product-subtotal,
.wp-block-woocommerce-cart table th.product-subtotal,
.wp-block-woocommerce-cart table td.product-subtotal {
    width: 12.5%;
}

/* ─────────────────────────────────────────
   Product thumbnail – volle breedte
───────────────────────────────────────── */
.woocommerce-cart .product-thumbnail img,
.wp-block-woocommerce-cart .product-thumbnail img,
.woocommerce-thumbnail {
    width: 100% !important;   /* force full width */
    height: auto !important;
    display: block;
    border-radius: 6px;
}

/* ─────────────────────────────────────────
   Product naam & link
───────────────────────────────────────── */
.woocommerce-cart .product-name a {
    font-weight: 600;
    text-decoration: none;
    color: inherit;
}

/* ─────────────────────────────────────────
   Quantity input
───────────────────────────────────────── */
.woocommerce-cart .quantity input,
.wp-block-woocommerce-cart .quantity input {
    width: 60px;
    padding: 0.4em 0.6em;
    border: 1px solid #ccc;
    border-radius: 6px;
}

/* ─────────────────────────────────────────
   Checkout knop (Cart)
───────────────────────────────────────── */
.woocommerce-cart .wc-proceed-to-checkout a,
.wp-block-woocommerce-cart .wc-proceed-to-checkout a {
    background-color: #444;
    color: #fff;
    padding: 0.35rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    text-align: center;
    display: inline-block;
}

/* ─────────────────────────────────────────
   Responsive – kleine schermen
───────────────────────────────────────── */
@media (max-width: 900px) {
    .woocommerce-cart .shop_table,
    .wp-block-woocommerce-cart table.shop_table {
        display: block;
        overflow-x: auto;
    }
}

@media (max-width: 600px) {
    .woocommerce-cart,
    .wp-block-woocommerce-cart {
        padding: 1rem;
    }
}