/* ===========================================================
   Grapapack — Cart page skin.
   Styelt de standaard WooCommerce cart-markup (templates/cart/cart.php)
   in de dark/neon huisstijl, met een Shopify-achtige 2-koloms layout:
   links de items, rechts het totaal + "Proceed to checkout".
   Scoped op body.woocommerce-cart.
   =========================================================== */

body.woocommerce-cart .gp-container { max-width: 1140px; }
body.woocommerce-cart .gp-page-title { text-align: left; margin-bottom: 18px; }
body.woocommerce-cart .gp-page-title h1 {
    font-size: clamp(26px, 4vw, 40px);
}

/* ── 2-koloms grid: items links, totaal rechts ───────────────── */
.woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2/3 items · 1/3 totalen */
    gap: 16px 32px;
    align-items: start;
}
/* Lege cart: geen 2-koloms grid maar gecentreerd blok. */
.woocommerce-cart .woocommerce:has(.cart-empty) {
    display: block;
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
    padding: 20px 0 8px;
}
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart .woocommerce-cart-form { grid-column: 1; min-width: 0; margin: 0; }
.woocommerce-cart .cart-collaterals { grid-column: 2; width: 100%; float: none; }
.woocommerce-cart .cart-collaterals .cross-sells { display: none; } /* geen up-sell rommel */
/* WooCommerce-layout.css floatt .cart_totals naar 48% — overschrijven zodat
   de totaal-kaart de hele 1/3-kolom vult. */
body.woocommerce-cart .cart-collaterals .cart_totals { float: none; width: 100%; }

@media (max-width: 880px) {
    .woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
    .woocommerce-cart .woocommerce-cart-form,
    .woocommerce-cart .cart-collaterals { grid-column: 1; }
}

/* ── Items: tabel → kaart-rijen ──────────────────────────────── */
.woocommerce-cart-form .shop_table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    background: transparent;
    margin: 0;
}
.woocommerce-cart-form .shop_table thead { display: none; }
.woocommerce-cart-form .shop_table tbody { display: block; }

.woocommerce-cart-form .cart_item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    border: 0;
    border-bottom: 1px solid var(--gp-line-strong, rgba(255,255,255,.1));
}
.woocommerce-cart-form .cart_item td {
    display: block;
    border: 0;
    padding: 0;
    background: transparent;
}

/* Volgorde: thumb · naam(+meta) · prijs · aantal · subtotaal · verwijder */
.cart_item .product-thumbnail { order: 1; flex: 0 0 60px; width: 60px; }
.cart_item .product-name      { order: 2; flex: 1 1 auto; min-width: 0; }
.cart_item .product-price     { order: 3; flex: 0 0 auto; text-align: right; color: var(--gp-text-dim, rgba(255,255,255,.7)); font-size: 13px; }
.cart_item .product-quantity  { order: 4; flex: 0 0 auto; }
.cart_item .product-subtotal  { order: 5; flex: 0 0 auto; min-width: 72px; text-align: right; font-weight: 800; color: var(--gp-cyan, #43e8d8); font-family: var(--gp-font-numeric, monospace); }
.cart_item .product-remove    { order: 6; flex: 0 0 auto; }

.cart_item .product-thumbnail img {
    width: 60px; height: 60px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--gp-line, rgba(255,255,255,.06));
}
.cart_item .product-name,
.cart_item .product-name a {
    color: var(--gp-text, #fff);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
}
.cart_item .product-name a:hover { color: var(--gp-cyan, #43e8d8); }
/* Image ID / meta klein onder de naam */
.cart_item .product-name .variation,
.cart_item .product-name dl.variation,
.cart_item .product-name .wc-item-meta {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--gp-text-muted, rgba(255,255,255,.55));
}
.cart_item .product-name dl.variation dt { font-weight: 600; }
.cart_item .product-name dl.variation dd { margin: 0; }

/* Aantal-input */
.cart_item .quantity { display: inline-flex; }
.cart_item .quantity input.qty {
    width: 54px;
    padding: 6px 4px;
    text-align: center;
    background: var(--gp-ink, #06080f);
    color: var(--gp-text, #fff);
    border: 1.5px solid var(--gp-line-strong, rgba(255,255,255,.12));
    border-radius: 8px;
    font-family: var(--gp-font-numeric, monospace);
    font-weight: 700;
}
.cart_item .quantity input.qty:focus { border-color: var(--gp-yellow, #ffcb05); outline: none; }

/* Verwijder-knop */
.cart_item .product-remove a.remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: var(--gp-text-dim, rgba(255,255,255,.7)) !important;
    font-size: 18px; line-height: 1;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.cart_item .product-remove a.remove:hover {
    background: var(--gp-led-red, #ff3040);
    color: #fff !important;
}

/* ── Actions-rij: coupon + update cart ───────────────────────── */
.woocommerce-cart-form .cart_item:last-child,
.woocommerce-cart-form tr.actions { border-bottom: 0; }
.woocommerce-cart-form .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 16px 0 0;
}
.woocommerce-cart-form .actions .coupon {
    display: flex;
    gap: 8px;
    flex: 1 1 auto;
}
.woocommerce-cart-form .actions .coupon #coupon_code {
    flex: 1 1 auto;
    min-width: 120px;
    max-width: 220px;
    padding: 10px 12px;
    background: var(--gp-ink, #06080f);
    color: var(--gp-text, #fff);
    border: 1.5px solid var(--gp-line-strong, rgba(255,255,255,.12));
    border-radius: 8px;
}
.woocommerce-cart-form .actions .coupon #coupon_code:focus { border-color: var(--gp-yellow, #ffcb05); outline: none; }

/* Knoppen (Apply coupon = secundair, Update cart = subtiel) */
.woocommerce-cart-form .actions .button,
.woocommerce-cart-form .actions button {
    padding: 10px 16px;
    border-radius: 8px;
    font-family: var(--gp-font-body, sans-serif);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    border: 1.5px solid var(--gp-line-strong, rgba(255,255,255,.18));
    background: transparent;
    color: var(--gp-text, #fff);
    transition: border-color .15s, background .15s, color .15s;
}
.woocommerce-cart-form .actions .coupon .button { border-color: var(--gp-cyan, #43e8d8); color: var(--gp-cyan, #43e8d8); }
.woocommerce-cart-form .actions .coupon .button:hover { background: var(--gp-cyan, #43e8d8); color: var(--gp-ink-2, #0a0d1a); }
.woocommerce-cart-form .actions button[name="update_cart"]:hover { border-color: var(--gp-yellow, #ffcb05); color: var(--gp-yellow, #ffcb05); }
.woocommerce-cart-form .actions button[name="update_cart"]:disabled { opacity: .45; cursor: default; }

/* ── Totalen-kaart (rechts) ──────────────────────────────────── */
.woocommerce-cart .cart_totals {
    background: var(--gp-ink-3, #0e1428);
    border: 1px solid var(--gp-line-strong, rgba(255,255,255,.1));
    border-radius: 14px;
    padding: 18px 18px 20px;
    position: sticky;
    top: 84px;
}
.woocommerce-cart .cart_totals h2 {
    margin: 0 0 12px;
    font-family: var(--gp-font-heading, sans-serif);
    font-size: 20px;
    letter-spacing: 1.5px;
    color: var(--gp-yellow, #ffcb05);
}
.woocommerce-cart .cart_totals table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0 0 14px;
}
.woocommerce-cart .cart_totals th { width: 38%; white-space: nowrap; }
.woocommerce-cart .cart_totals td { width: 62%; }
/* Shipment-methode mag op 1-2 regels, niet geforceerd smal afbreken. */
.woocommerce-cart .cart_totals .shipping td { font-size: 12.5px; line-height: 1.35; }
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td {
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid var(--gp-line, rgba(255,255,255,.07));
    font-size: 13px;
    text-align: left;
    color: var(--gp-text-dim, rgba(255,255,255,.7));
    background: transparent;
    vertical-align: top;
}
.woocommerce-cart .cart_totals td { text-align: right; color: var(--gp-text, #fff); }
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
    border-bottom: 0;
    padding-top: 12px;
    font-size: 15px;
    font-weight: 800;
}
.woocommerce-cart .cart_totals tr.order-total td .amount,
.woocommerce-cart .cart_totals tr.order-total bdi {
    color: var(--gp-cyan, #43e8d8);
    font-family: var(--gp-font-numeric, monospace);
    font-size: 20px;
}
/* Shipment-regel opschonen: toon alleen de methode ("Free worldwide shipping"),
   verberg de "updated during checkout"-notice + de Calculate-shipping form. */
.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals .woocommerce-shipping-calculator { display: none; }
.woocommerce-cart .cart_totals ul#shipping_method,
.woocommerce-cart .cart_totals .woocommerce-shipping-methods {
    margin: 0; padding: 0; list-style: none;
}
.woocommerce-cart .cart_totals ul#shipping_method li { margin: 0; }
.woocommerce-cart .cart_totals ul#shipping_method label {
    color: var(--gp-text, #fff); font-weight: 600;
}
.woocommerce-cart .cart_totals ul#shipping_method input[type="radio"] { display: none; }
.woocommerce-cart .cart_totals .includes_tax,
.woocommerce-cart .cart_totals small { color: var(--gp-text-muted, rgba(255,255,255,.55)); font-size: 11px; }

/* Express-knoppen (Apple Pay / Google Pay) staan bovenaan de proceed-zone;
   de "Proceed to checkout"-knop wordt eronder gezet (zie checkout.php prio). */
.woocommerce-cart #wc-stripe-express-checkout-element { margin: 0 0 12px; }

/* Proceed to checkout — grote gele CTA */
.woocommerce-cart .wc-proceed-to-checkout { padding: 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    text-align: center;
    text-decoration: none;
    font-family: var(--gp-font-display, 'Bungee'), sans-serif;
    font-size: 16px;
    letter-spacing: .04em;
    color: var(--gp-ink-2, #0a0d1a);
    background: var(--gp-yellow, #ffcb05);
    border: 0;
    border-radius: 10px;
    box-shadow: 0 0 18px rgba(255, 203, 5, .35);
    transition: filter .15s, transform .1s;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { filter: brightness(1.07); }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:active { transform: translateY(1px); }

/* ── Lege cart ───────────────────────────────────────────────── */
.woocommerce-cart .cart-empty.woocommerce-info,
.woocommerce-cart .cart-empty {
    display: block;
    margin: 0 auto 20px;
    padding: 22px 24px;
    max-width: 520px;
    background: var(--gp-ink-3, #0e1428);
    border: 1px solid var(--gp-line-strong, rgba(255,255,255,.1));
    border-left: 3px solid var(--gp-cyan, #43e8d8);
    border-radius: 12px;
    color: var(--gp-text, #fff);
    font-size: 16px;
    text-align: center;
}
/* WC's blauwe info-icoon (::before) verbergen. */
.woocommerce-cart .cart-empty.woocommerce-info::before { content: none; display: none; }
.woocommerce-cart .return-to-shop { text-align: center; margin: 0; }
.woocommerce-cart .return-to-shop .button {
    display: inline-block;
    padding: 13px 26px;
    background: var(--gp-yellow, #ffcb05);
    color: var(--gp-ink-2, #0a0d1a);
    font-family: var(--gp-font-display, 'Bungee'), sans-serif;
    font-size: 14px;
    letter-spacing: .03em;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 0 16px rgba(255, 203, 5, .3);
}
.woocommerce-cart .return-to-shop .button:hover { filter: brightness(1.07); }

/* ── Mobiel: rij compacter ───────────────────────────────────── */
@media (max-width: 560px) {
    .woocommerce-cart-form .cart_item { flex-wrap: wrap; gap: 10px; }
    .cart_item .product-name { flex: 1 1 60%; }
    .cart_item .product-price { display: none; } /* prijs = subtotaal bij 1 pack */
    .cart_item .product-subtotal { order: 3; }
    .cart_item .product-quantity { order: 4; }
    .cart_item .product-remove { order: 2; margin-left: auto; }
}

/* ── Top-banner bovenaan de cart (verplaatst van checkout) ─────
   De bron-jpg (1600×689) heeft veel zwarte ruimte boven/onder; klein
   tonen houdt die marges minimaal. */
.woocommerce-cart .gp-cart-banner {
    grid-column: 1 / -1;
    margin: 0;
    text-align: center;
}
.woocommerce-cart .gp-cart-banner__img {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin: 0 auto;
    border-radius: 12px;
}

/* ── Klantreviews onderaan de cart ──────────────────────────── */
.woocommerce-cart .gp-cart-reviews {
    grid-column: 1 / -1;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--gp-line-strong, rgba(255,255,255,.1));
}
.woocommerce-cart .gp-cart-reviews .gp-co-reviews {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.woocommerce-cart .gp-cart-reviews .gp-co-reviews__head {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    font-family: var(--gp-font-heading, sans-serif);
    font-size: 16px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gp-yellow, #ffcb05);
}
.woocommerce-cart .gp-cart-reviews .gp-co-review {
    margin: 0;
    padding: 14px 16px;
    background: var(--gp-ink-3, #0e1428);
    border: 1px solid var(--gp-line-strong, rgba(255,255,255,.1));
    border-radius: 12px;
}
.woocommerce-cart .gp-cart-reviews .gp-co-review__stars {
    display: block;
    color: #ffcb05;
    font-size: 12px;
    letter-spacing: 1px;
}
.woocommerce-cart .gp-cart-reviews .gp-co-review__text {
    margin: 6px 0;
    font-size: 12.5px;
    line-height: 1.5;
    font-style: italic;
    color: var(--gp-text-dim, rgba(255,255,255,.85));
}
.woocommerce-cart .gp-cart-reviews .gp-co-review__author {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--gp-text-muted, rgba(255,255,255,.55));
}
@media (max-width: 880px) {
    .woocommerce-cart .gp-cart-reviews .gp-co-reviews { grid-template-columns: 1fr; }
}