/* ═══════════════════════════════════════════════════════════════
   WOOCOMMERCE — basis voor shop, winkelwagen, afrekenen, account
   ═══════════════════════════════════════════════════════════════ */

.ly-wc { padding: 40px 0 var(--ly-section); }

.woocommerce-products-header { margin-bottom: 32px; }
.woocommerce-products-header__title { margin-bottom: 0.3em; }

/* ── Meldingen ───────────────────────────────────────────────── */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 28px;
    padding: 15px 20px;
    list-style: none;
    background: var(--ly-white);
    border: 1px solid var(--ly-line);
    border-left: 3px solid var(--ly-olive);
    border-radius: var(--ly-radius);
    font-size: 0.92rem;
    color: var(--ly-ink);
}
.woocommerce-error { border-left-color: #a4443a; }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; }

/* ── Knoppen van WooCommerce in onze stijl ───────────────────── */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 26px;
    background: var(--ly-ink);
    border: 1px solid var(--ly-ink);
    border-radius: var(--ly-radius);
    color: var(--ly-cream);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background: var(--ly-olive-diep);
    border-color: var(--ly-olive-diep);
    color: var(--ly-cream);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background: var(--ly-olive-diep);
    border-color: var(--ly-olive-diep);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background: var(--ly-ink);
    border-color: var(--ly-ink);
}

.woocommerce .button:disabled,
.woocommerce .button.disabled { opacity: .5; cursor: default; }

/* ── Formuliervelden ─────────────────────────────────────────── */

.woocommerce form .form-row { margin: 0 0 18px; padding: 0; }

.woocommerce form .form-row label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ly-ink);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
    width: 100%;
    height: auto;
    padding: 12px 15px;
    background: var(--ly-white);
    border: 1px solid var(--ly-line);
    border-radius: var(--ly-radius);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ly-ink);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    outline: none;
    border-color: var(--ly-olive);
    box-shadow: 0 0 0 3px rgba(111, 122, 88, .14);
}
.woocommerce form .form-row .required { color: #a4443a; text-decoration: none; }

/* ── Tabellen: winkelwagen, bestellingen, account ────────────── */

.woocommerce table.shop_table {
    width: 100%;
    border: 1px solid var(--ly-line);
    border-radius: var(--ly-radius);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--ly-white);
    font-size: 0.93rem;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    padding: 15px 18px;
    text-align: left;
    border-bottom: 1px solid var(--ly-line);
}
.woocommerce table.shop_table th {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ly-taupe);
}
.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }

.woocommerce table.shop_table .product-thumbnail img { width: 64px; border-radius: 3px; }
.woocommerce table.shop_table .product-name a { color: var(--ly-ink); font-weight: 600; }

/* ── Winkelwagen en afrekenen ────────────────────────────────── */

.woocommerce .cart-collaterals,
.woocommerce-checkout .checkout { margin-top: 36px; }

.cart_totals h2,
.woocommerce-checkout h3,
#order_review_heading {
    font-size: 1.15rem;
    margin-bottom: 0.9em;
}

.woocommerce .cart_totals table.shop_table,
.woocommerce-checkout #order_review { background: var(--ly-white); }

.woocommerce .quantity input.qty {
    width: 68px;
    padding: 9px 8px;
    text-align: center;
    background: var(--ly-white);
    border: 1px solid var(--ly-line);
    border-radius: var(--ly-radius);
    font-family: inherit;
}

.woocommerce .coupon { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Mijn account ────────────────────────────────────────────── */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--ly-line);
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
    display: block;
    padding: 11px 16px;
    color: var(--ly-taupe);
    font-size: 0.88rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
    color: var(--ly-ink);
    border-bottom-color: var(--ly-ink);
}

/* ── Prijzen ─────────────────────────────────────────────────── */

.woocommerce .price,
.woocommerce .amount { color: var(--ly-ink); font-weight: 700; }
.woocommerce .price del { opacity: .45; font-weight: 400; }
.woocommerce .price ins { text-decoration: none; }

.ly-prijs-binnenkort {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ly-taupe);
}

/* ── Paginering ──────────────────────────────────────────────── */

.woocommerce nav.woocommerce-pagination ul {
    display: flex;
    gap: 8px;
    border: 0;
    margin-top: 44px;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px; height: 38px;
    padding: 0 10px;
    border: 1px solid var(--ly-line);
    border-radius: var(--ly-radius);
    color: var(--ly-ink);
    font-size: 0.88rem;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--ly-ink);
    border-color: var(--ly-ink);
    color: var(--ly-cream);
}

@media (max-width: 700px) {
    .woocommerce table.shop_table th { display: none; }
    .woocommerce table.shop_table td {
        display: block;
        width: 100%;
        border-bottom: 0;
        padding: 8px 16px;
    }
    .woocommerce table.shop_table tr {
        display: block;
        padding: 12px 0;
        border-bottom: 1px solid var(--ly-line);
    }
}

/* ── Omhulsels ───────────────────────────────────────────────── */

.ly-wc-inhoud { width: 100%; }

/* Het kruimelpad zit binnen .ly-wrap van woocommerce.php, dus de
   eigen wrapper mag hier geen tweede keer inspringen. */
.ly-wc-kruimels { padding: 0 0 24px; }
.ly-wc-kruimels .ly-wrap { padding: 0; max-width: none; }

/* ═══════════════════════════════════════════════════════════════
   KASSA (klassiek, [woocommerce_checkout])
   WooCommerce's eigen opmaak staat uit, dus de indeling staat hier:
   gegevens links, besteloverzicht + betaling rechts.
   ═══════════════════════════════════════════════════════════════ */

.ly-wc-pagina { padding: 40px 0 var(--ly-section); }
.ly-wc-pagina h1 { margin-bottom: 0.6em; }

form.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-areas:
        "klant kop"
        "klant overzicht";
    grid-template-rows: auto 1fr;
    column-gap: clamp(28px, 4vw, 56px);
    align-items: start;
}
form.woocommerce-checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
form.woocommerce-checkout #customer_details  { grid-area: klant; }
form.woocommerce-checkout #order_review_heading { grid-area: kop; margin-top: 0; }
form.woocommerce-checkout #order_review {
    grid-area: overzicht;
    position: sticky;
    top: calc(var(--ly-nav-h) + 24px);
}

#customer_details .col-1,
#customer_details .col-2 { width: 100%; float: none; }
#customer_details .col-2 { margin-top: 12px; }

/* Twee velden naast elkaar (voornaam/achternaam, postcode/plaats) */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
}
.woocommerce form .form-row { width: 100%; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: calc(50% - 8px); }

.woocommerce form .form-row .woocommerce-input-wrapper { display: block; }
.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    font-size: 0.92rem;
    color: var(--ly-body);
}
.woocommerce form .form-row input[type="checkbox"] { margin-top: 4px; accent-color: var(--ly-ink); }

#ship-to-different-address { font-size: 1rem; margin: 8px 0 12px; }
#ship-to-different-address label { display: flex; align-items: center; gap: 10px; cursor: pointer; }

/* Overzicht */
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th { vertical-align: top; }
.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table tfoot td { text-align: right; }
.woocommerce table.shop_table tfoot th { text-transform: none; letter-spacing: 0; font-size: 0.92rem; color: var(--ly-body); font-weight: 400; }
.woocommerce table.shop_table tfoot .order-total th,
.woocommerce table.shop_table tfoot .order-total td { color: var(--ly-ink); font-weight: 700; font-size: 1rem; }

/* De aanbetalingsregel en "Total order value" (includes/aanbetaling.php) */
.woocommerce table.shop_table .fee td .amount { font-weight: 400; color: var(--ly-taupe); }
.woocommerce table.shop_table tr.ly-volledig th,
.woocommerce table.shop_table tr.ly-volledig td { border-top: 1px dashed var(--ly-line); color: var(--ly-taupe); }
.woocommerce table.shop_table tr.ly-volledig .amount { color: var(--ly-taupe); font-weight: 400; }
.woocommerce table.shop_table tr.ly-volledig small { display: block; margin-top: 4px; font-size: 0.8rem; }

/* Verzendkeuze */
#shipping_method { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#shipping_method li { display: flex; align-items: baseline; gap: 8px; justify-content: flex-end; text-align: right; }
#shipping_method input { accent-color: var(--ly-ink); }

/* Betaalmethodes */
#payment { margin-top: 20px; }
#payment ul.payment_methods {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    background: var(--ly-white);
    border: 1px solid var(--ly-line);
    border-radius: var(--ly-radius);
}
#payment ul.payment_methods > li { padding: 14px 18px; border-bottom: 1px solid var(--ly-line); }
#payment ul.payment_methods > li:last-child { border-bottom: 0; }
#payment ul.payment_methods > li > label { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ly-ink); cursor: pointer; }
#payment ul.payment_methods > li > label img { max-height: 24px; width: auto; display: inline-block; }
#payment ul.payment_methods > li > input { accent-color: var(--ly-ink); margin-right: 8px; }
#payment .payment_box { margin-top: 10px; font-size: 0.88rem; color: var(--ly-taupe); }
#payment .payment_box p:last-child { margin-bottom: 0; }

#payment .place-order { padding: 0; margin: 0; }
.woocommerce-terms-and-conditions-wrapper { margin-bottom: 18px; font-size: 0.88rem; }
.woocommerce-privacy-policy-text p { font-size: 0.82rem; color: var(--ly-taupe); }

.woocommerce #payment #place_order {
    width: 100%;
    padding: 19px 36px;
    border-radius: var(--ly-radius-pill);
    background: var(--ly-ink);
    border-color: var(--ly-ink);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.woocommerce #payment #place_order:hover { background: var(--ly-ink-hover); border-color: var(--ly-ink-hover); }

/* Uitleg over de aanbetaling, boven de kassa en op de bedankpagina */
.ly-kassa-uitleg {
    margin: 0 0 32px;
    padding: 18px 22px;
    background: var(--ly-sand);
    border-left: 3px solid var(--ly-olive);
    border-radius: var(--ly-radius);
    color: var(--ly-ink);
}
.ly-kassa-uitleg .ly-label { display: block; margin-bottom: 6px; }

/* Bedankpagina */
.woocommerce-order-overview {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
}
.woocommerce-order-overview li { font-size: 0.82rem; color: var(--ly-taupe); }
.woocommerce-order-overview li strong { display: block; font-size: 1rem; color: var(--ly-ink); }
.woocommerce-customer-details address { font-style: normal; line-height: 1.7; }

/* Winkelwagen: overzicht rechts onder de tabel */
.woocommerce .cart-collaterals .cart_totals { max-width: 460px; margin-left: auto; }
.woocommerce .wc-proceed-to-checkout .checkout-button { width: 100%; border-radius: var(--ly-radius-pill); padding: 19px 36px; }

@media (max-width: 900px) {
    form.woocommerce-checkout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "klant" "kop" "overzicht";
    }
    form.woocommerce-checkout #order_review { position: static; }
}
@media (max-width: 520px) {
    .woocommerce form .form-row-first,
    .woocommerce form .form-row-last { width: 100%; }
}