/* =========================================================================
   DTH Premium — Winkelwagen en afrekenen (WooCommerce-blokken)
   Wordt alleen geladen op de winkelwagen- en afrekenpagina. Alle regels
   hangen onder "html body .dth-wc-page" zodat ze de standaardstijlen van
   WooCommerce (die later in de pagina laden) betrouwbaar overschrijven.
   ========================================================================= */

html body .dth-wc-page { padding-block: 48px 96px; }
html body .dth-wc-page .dth-wc-content { max-width: 100%; }

/* --- Typografie en links ------------------------------------------------ */
html body .dth-wc-page .wc-block-cart,
html body .dth-wc-page .wc-block-checkout {
	font-family: var(--font-body);
	color: var(--dth-black);
}
html body .dth-wc-page .wc-block-components-checkout-step__title,
html body .dth-wc-page .wc-block-cart__totals-title,
html body .dth-wc-page .wc-block-components-title,
html body .dth-wc-page .wc-block-components-checkout-order-summary__title-text {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--dth-black);
	text-transform: none;
}
html body .dth-wc-page .wc-block-cart__totals-title { font-size: 1.05rem; padding: 0 0 12px; }

html body .dth-wc-page a:not(.wc-block-components-button) { color: var(--dth-blue); text-decoration: none; }
html body .dth-wc-page a:not(.wc-block-components-button):hover { color: var(--dth-blue-deep); text-decoration: underline; text-underline-offset: 3px; }
html body .dth-wc-page a.wc-block-components-product-name,
html body .dth-wc-page .wc-block-components-product-name { color: var(--dth-black); font-weight: 600; text-decoration: none; }
html body .dth-wc-page a.wc-block-components-product-name:hover { color: var(--dth-blue); text-decoration: none; }

/* --- Knoppen ------------------------------------------------------------ */
html body .dth-wc-page .wc-block-components-button:not(.is-link),
html body .dth-wc-page a.wc-block-components-button:not(.is-link) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 15px 30px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--dth-blue);
	color: var(--dth-white);
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: none;
	transition: background-color 0.2s var(--ease), transform 0.15s var(--ease);
}
html body .dth-wc-page .wc-block-components-button:not(.is-link):hover:not(:disabled),
html body .dth-wc-page a.wc-block-components-button:not(.is-link):hover { background: var(--dth-blue-deep); color: var(--dth-white); text-decoration: none; }
html body .dth-wc-page .wc-block-components-button:not(.is-link):active { transform: scale(0.99); }
html body .dth-wc-page .wc-block-components-button:disabled { opacity: 0.5; cursor: not-allowed; }
html body .dth-wc-page .wc-block-components-button .wc-block-components-button__text { color: inherit; }
html body .dth-wc-page .wc-block-components-button.outlined:not(.is-link) {
	background: transparent;
	color: var(--dth-black);
	box-shadow: inset 0 0 0 1.5px var(--dth-line);
}
html body .dth-wc-page .wc-block-components-button.outlined:not(.is-link):hover:not(:disabled) { background: var(--dth-mist); color: var(--dth-black); }
html body .dth-wc-page .wc-block-components-button.is-link,
html body .dth-wc-page .wc-block-components-address-form__address_2-toggle {
	background: none;
	border: 0;
	padding: 0;
	color: var(--dth-blue);
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}
html body .dth-wc-page .wc-block-components-button.is-link:hover { color: var(--dth-blue-deep); text-decoration: underline; }
html body .dth-wc-page .wc-block-cart__submit-button,
html body .dth-wc-page .wc-block-components-checkout-place-order-button { width: 100%; padding-block: 17px; font-size: 1rem; }

/* --- Winkelwagen: items ------------------------------------------------- */
html body .dth-wc-page table.wc-block-cart-items { border-collapse: collapse; width: 100%; }
html body .dth-wc-page .wc-block-cart-items__header th {
	padding: 0 0 14px;
	border-bottom: 1px solid var(--dth-line);
	color: var(--dth-slate);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}
html body .dth-wc-page .wc-block-cart-items__row { border-bottom: 1px solid var(--dth-line); }
html body .dth-wc-page .wc-block-cart-items__row td { padding-block: 24px; border: 0; vertical-align: top; }
html body .dth-wc-page .wc-block-cart-item__total-price-and-sale-badge-wrapper { border: 0; }
html body .dth-wc-page .wc-block-cart-item__image img,
html body .dth-wc-page .wc-block-components-order-summary-item__image img {
	border-radius: var(--radius-sm);
	background: var(--dth-mist);
}
html body .dth-wc-page .wc-block-components-product-price,
html body .dth-wc-page .wc-block-components-formatted-money-amount { font-variant-numeric: tabular-nums; }
html body .dth-wc-page .wc-block-components-product-price__regular { color: var(--dth-slate); }
html body .dth-wc-page .wc-block-cart-item__remove-link {
	background: none;
	border: 0;
	padding: 0;
	color: var(--dth-slate);
	font-size: 0.85rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
html body .dth-wc-page .wc-block-cart-item__remove-link:hover { color: #b3261e; }

html body .dth-wc-page .wc-block-components-sale-badge,
html body .dth-wc-page .wc-block-components-product-badge {
	background: var(--dth-blue);
	color: var(--dth-white);
	border: 0;
	border-radius: var(--radius-pill);
	padding: 3px 10px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: none;
}

/* Aantal kiezen */
html body .dth-wc-page .wc-block-components-quantity-selector {
	border: 1.5px solid var(--dth-line);
	border-radius: var(--radius-pill);
	background: var(--dth-white);
	overflow: hidden;
}
html body .dth-wc-page .wc-block-components-quantity-selector::after { display: none; }
html body .dth-wc-page .wc-block-components-quantity-selector__input {
	border: 0;
	background: transparent;
	color: var(--dth-black);
	font-weight: 600;
}
html body .dth-wc-page .wc-block-components-quantity-selector__button {
	background: transparent;
	border: 0;
	color: var(--dth-slate);
	opacity: 1;
	cursor: pointer;
}
html body .dth-wc-page .wc-block-components-quantity-selector__button:hover:not(:disabled) { color: var(--dth-blue); background: var(--dth-mist); }
html body .dth-wc-page .wc-block-components-quantity-selector:focus-within { border-color: var(--dth-blue); }

/* --- Zijbalk en totalen ------------------------------------------------- */
html body .dth-wc-page .wc-block-cart__sidebar,
html body .dth-wc-page .wc-block-checkout__sidebar {
	background: var(--dth-mist);
	border-radius: var(--radius-md);
	padding: 28px;
	align-self: flex-start;
}
html body .dth-wc-page .wc-block-components-sidebar-layout.is-large .wc-block-components-sidebar { padding-left: 0; }
html body .dth-wc-page .wc-block-components-totals-wrapper { border-color: var(--dth-line); }
html body .dth-wc-page .wc-block-components-totals-item__label { color: var(--dth-slate); font-weight: 500; }
html body .dth-wc-page .wc-block-components-totals-item__value { color: var(--dth-black); font-weight: 600; }
html body .dth-wc-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { color: var(--dth-black); font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
html body .dth-wc-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; }
html body .dth-wc-page .wc-block-components-panel__button { font-family: var(--font-body); font-weight: 600; color: var(--dth-black); }
html body .dth-wc-page .wp-block-woocommerce-checkout-order-summary-block { border: 0; background: transparent; }
html body .dth-wc-page .wc-block-components-order-summary { border-color: var(--dth-line); }
html body .dth-wc-page .wc-block-components-order-summary-item__quantity {
	background: var(--dth-black);
	color: var(--dth-white);
	border: 2px solid var(--dth-mist);
	box-shadow: none;
}

/* --- Afrekenen: stappen en formulier ------------------------------------ */
html body .dth-wc-page .wc-block-components-checkout-step { border-color: var(--dth-line); }
html body .dth-wc-page .wc-block-components-checkout-step__description { color: var(--dth-slate); font-size: 0.9rem; }

html body .dth-wc-page .wc-block-components-text-input input[type="text"],
html body .dth-wc-page .wc-block-components-text-input input[type="email"],
html body .dth-wc-page .wc-block-components-text-input input[type="tel"],
html body .dth-wc-page .wc-block-components-text-input input[type="number"],
html body .dth-wc-page .wc-block-components-text-input input[type="password"],
html body .dth-wc-page .wc-block-components-textarea,
html body .dth-wc-page .wc-blocks-components-select .wc-blocks-components-select__select {
	border: 1.5px solid var(--dth-line);
	border-radius: var(--radius-sm);
	background: var(--dth-white);
	color: var(--dth-black);
	font-family: var(--font-body);
	box-shadow: none;
	transition: border-color 0.15s var(--ease);
}
html body .dth-wc-page .wc-block-components-text-input input:focus,
html body .dth-wc-page .wc-block-components-textarea:focus,
html body .dth-wc-page .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--dth-blue);
	outline: none;
	box-shadow: none;
}
html body .dth-wc-page .wc-block-components-text-input label,
html body .dth-wc-page .wc-blocks-components-select__label { color: var(--dth-slate); font-family: var(--font-body); }
html body .dth-wc-page .wc-block-components-text-input.has-error input { border-color: #b3261e; }
html body .dth-wc-page .wc-block-components-validation-error,
html body .dth-wc-page .wc-block-components-validation-error p { color: #b3261e; font-size: 0.8rem; }

/* Betaalmethoden (keuzerondjes) */
html body .dth-wc-page .wc-block-components-radio-control__option,
html body .dth-wc-page .wc-block-components-radio-control-accordion-option {
	border-color: var(--dth-line);
	background: var(--dth-white);
}
html body .dth-wc-page .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option-checked,
html body .dth-wc-page .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	box-shadow: inset 0 0 0 1.5px var(--dth-blue);
	border-color: var(--dth-blue);
	background: var(--dth-white);
}
html body .dth-wc-page .wc-block-components-radio-control__input { border-color: var(--dth-line); background: var(--dth-white); }
html body .dth-wc-page .wc-block-components-radio-control__input:checked { border-color: var(--dth-blue); }
html body .dth-wc-page .wc-block-components-radio-control__input:checked::before { background: var(--dth-blue); }
html body .dth-wc-page .wc-block-components-radio-control__label,
html body .dth-wc-page .wc-block-components-payment-method-label { font-weight: 600; }
html body .dth-wc-page .wc-block-components-radio-control__description { color: var(--dth-slate); }

/* Selectievakjes */
html body .dth-wc-page .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border: 1.5px solid var(--dth-line);
	border-radius: var(--radius-sm);
	background: var(--dth-white);
}
html body .dth-wc-page .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked { background: var(--dth-blue); border-color: var(--dth-blue); }
html body .dth-wc-page .wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--dth-white); }
html body .dth-wc-page .wc-block-components-checkbox__label { color: var(--dth-black); }
html body .dth-wc-page .wc-block-checkout__terms { color: var(--dth-slate); font-size: 0.85rem; }

html body .dth-wc-page .wc-block-checkout__actions_row { align-items: center; gap: 16px; }
html body .dth-wc-page .wc-block-components-checkout-return-to-cart-button { color: var(--dth-slate); font-weight: 500; }
html body .dth-wc-page .wc-block-components-checkout-return-to-cart-button:hover { color: var(--dth-blue); }

/* --- Meldingen ---------------------------------------------------------- */
html body .dth-wc-page .wc-block-components-notice-banner {
	border-radius: var(--radius-sm);
	border-width: 1px;
	font-family: var(--font-body);
	font-size: 0.92rem;
}
html body .dth-wc-page .wc-block-components-notice-banner.is-error { background: #fdecea; border-color: #f3b7b0; color: #7a1712; }
html body .dth-wc-page .wc-block-components-notice-banner.is-success { background: #eaf6ee; border-color: #b8e2c4; color: #1c5e34; }
html body .dth-wc-page .wc-block-components-notice-banner.is-info,
html body .dth-wc-page .wc-block-components-notice-banner.is-warning { background: var(--dth-mist); border-color: var(--dth-line); color: var(--dth-black); }

/* --- Lege winkelwagen --------------------------------------------------- */
html body .dth-wc-page .wp-block-woocommerce-empty-cart-block { text-align: center; padding-block: 24px; }
html body .dth-wc-page .wc-block-cart__empty-cart__title { font-family: var(--font-display); }

@media (max-width: 960px) {
	html body .dth-wc-page { padding-block: 32px 72px; }
	html body .dth-wc-page .wc-block-cart__sidebar,
	html body .dth-wc-page .wc-block-checkout__sidebar { padding: 22px; }
}

/* Mobiel: de artikeltabel mag nooit breder worden dan de pagina.
   WooCommerce zet daar vaste kolombreedtes (80px + 132px); wij laten de
   productkolom meebuigen. */
@media (max-width: 700px) {
	html body .dth-wc-page table.wc-block-cart-items,
	html body .dth-wc-page table.wc-block-cart-items tbody { display: block; width: 100%; max-width: 100%; }
	html body .dth-wc-page .wc-block-cart.is-mobile .wc-block-cart-items__row,
	html body .dth-wc-page .wc-block-cart.is-small .wc-block-cart-items__row { grid-template-columns: 72px minmax(0, 1fr) 11px auto; }
}