/* ==========================================================================
   WOOCOMMERCE — headless cart / checkout / account, notices, forms
   ========================================================================== */

/* Kill WC's ::before notice-icons (renderen als zwarte blokken). */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before,
.wc-block-components-notice-banner::before { content: none !important; }

.woocommerce-message, .woocommerce-info, .woocommerce-error {
	font-family: var(--font-heading);
	background: var(--surface);
	border-top: 2px solid var(--terracotta);
	color: var(--ink);
	padding: 1rem 1.2rem;
	list-style: none;
	margin: 0 0 1.5rem;
	border-radius: 2px;
}
.woocommerce-error { border-top-color: #b8442e; }

/* ---------- Headless wrapper ---------- */
.bt-headless { max-width: var(--max); margin: 0 auto; padding: 2.5rem var(--gutter) 5rem; }
.bt-headless__head { margin-bottom: 2rem; }
.bt-headless__head .kicker { margin-bottom: 0.5rem; }
.bt-headless__head h1 { font-size: clamp(2rem, 4vw, 3rem); }

/* Buttons → theme look */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .wc-block-components-button {
	font-family: var(--font-heading) !important;
	text-transform: lowercase;
	letter-spacing: 0.04em;
	background: var(--ink) !important;
	color: var(--cream) !important;
	border-radius: 0 !important;
	padding: 0.85rem 1.6rem !important;
	font-weight: 400 !important;
	transition: background 0.2s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover { background: var(--terracotta) !important; }
.woocommerce .button.alt, .woocommerce #place_order { background: var(--terracotta) !important; }

/* ---------- CART ----------
   Gotcha: WC zet width:% + float op .cart_totals / .cross-sells. Reset. */
.woocommerce-cart .bt-headless .woocommerce { display: block; }
.woocommerce-cart-form { width: 100%; }
.woocommerce-cart .cart-collaterals { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; }
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cross-sells {
	width: 100% !important; float: none !important;
}
.woocommerce table.shop_table {
	border: 1px solid var(--line); border-collapse: collapse; width: 100%;
	font-family: var(--font-heading);
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-bottom: 1px solid var(--line); padding: 0.9rem; }
.woocommerce table.shop_table thead th { text-transform: lowercase; font-weight: 500; }
.woocommerce .cart_totals h2, .woocommerce-checkout h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.cart_item .product-thumbnail img { width: 64px; height: 80px; object-fit: cover; }
.bt-cart-item-meta { font-size: 0.8rem; color: var(--ink-soft); font-family: var(--font-heading); }

/* ---------- CHECKOUT ----------
   Gotcha: .col2-set .col-1/.col-2 hebben float + width:%. Reset naar grid. */
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; width: 100%; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100% !important; float: none !important; }
#order_review_heading, #order_review { width: 100% !important; float: none !important; }
.woocommerce-checkout #customer_details + #order_review_heading { margin-top: 2rem; }
.woocommerce form .form-row { margin-bottom: 1rem; }
.woocommerce form .form-row label { font-family: var(--font-heading); font-size: 0.85rem; text-transform: lowercase; display: block; margin-bottom: 0.3rem; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection {
	width: 100%; border: 1px solid var(--ink) !important; background: var(--cream);
	padding: 0.75rem 0.9rem; font-family: var(--font-heading); border-radius: 0 !important;
}
.woocommerce-checkout #payment { background: var(--surface); border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--line); }

/* ---------- ACCOUNT ----------
   Gotcha: WC residual float laat nav/content omklappen onder grid → lock grid-column. */
.woocommerce-account:not(.logged-in) .bt-headless .woocommerce { max-width: 480px; margin: 0 auto; }
.woocommerce-account.logged-in .woocommerce { display: grid; grid-template-columns: 240px 1fr; gap: 2.5rem; align-items: start; }
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation { width: 100% !important; float: none !important; grid-column: 1 !important; }
.woocommerce-account.logged-in .woocommerce-MyAccount-content { width: 100% !important; float: none !important; grid-column: 2 !important; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; font-family: var(--font-heading); border: 1px solid var(--line); }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line); }
.woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 0.8rem 1rem; color: var(--ink); text-transform: lowercase; }
.woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover { background: var(--surface); color: var(--terracotta); }

/* Login/register forms (logged-out only) */
.woocommerce-account:not(.logged-in) .woocommerce .col2-set { grid-template-columns: 1fr; }
.woocommerce form.login, .woocommerce form.register { border: 1px solid var(--line); border-radius: 0; padding: 1.8rem; }

/* Qty input op cart/woo forms in theme-stijl */
.woocommerce .quantity input.qty {
	width: 64px; height: 44px; border: 1px solid var(--ink); background: transparent;
	text-align: center; font-family: var(--font-heading);
}

@media (max-width: 768px) {
	.woocommerce-cart .cart-collaterals,
	.woocommerce-checkout .col2-set { grid-template-columns: 1fr; }
	.woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; }
	.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
	.woocommerce-account.logged-in .woocommerce-MyAccount-content { grid-column: 1 !important; }
}

/* ==========================================================================
   WC Cart + Checkout BLOCKS — kleinere prijzen
   Gotcha: WC-Blocks zetten .wc-block-components-product-price /
   .wc-block-formatted-money-amount op ~1.5em bold. Zonder overrides schreeuwt
   de line-item- en row-totaal-prijs op cart + checkout.
   ========================================================================== */

/* Line-item prijs (per stuk) in het cart-block */
.wp-block-woocommerce-cart .wc-block-cart-item__prices,
.wp-block-woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price,
.wp-block-woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price__value,
.wp-block-woocommerce-cart .wc-block-cart-item__prices .wc-block-formatted-money-amount,
.wp-block-woocommerce-cart .wc-block-cart-item__prices .wc-block-components-formatted-money-amount {
	font-size: 0.95rem !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
}

/* Row-totaal (rechterkolom van de line-item rij) */
.wp-block-woocommerce-cart .wc-block-cart-item__total,
.wp-block-woocommerce-cart .wc-block-cart-item__total-price,
.wp-block-woocommerce-cart .wc-block-cart-item__total-price-amount,
.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-formatted-money-amount,
.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-formatted-money-amount {
	font-size: 1rem !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
}

/* Checkout order-summary line-items — dezelfde behandeling */
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__total-price,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__individual-prices,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__total-price .wc-block-components-formatted-money-amount,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__total-price .wc-block-formatted-money-amount,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__individual-prices .wc-block-components-formatted-money-amount,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__individual-prices .wc-block-formatted-money-amount {
	font-size: 0.95rem !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
}