/* Teak Lifestyle Afrekenen. Alleen geladen op winkelwagen, afrekenen en bedankt. */
:root {
	--tlck-creme: #F3F2ED;
	--tlck-lijn: #E5E2DA;
	--tlck-teak: #8B6F52;
	--tlck-teak-donker: #5C4433;
	--tlck-charcoal: #1E1A16;
	--tlck-tekst: #666666;
	--tlck-grijs: #8d8a83;
	--tlck-groen: #2E7D4F;
	--tlck-rood: #b3261e;
	--tlck-font: "DM Sans", Arial, Helvetica, sans-serif;
	--tlck-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
}

/* ==================== Algemeen ==================== */
.tlck-knop {
	display: inline-block;
	background: var(--tlck-charcoal);
	color: #fff !important;
	font-family: var(--tlck-font);
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 14px 26px;
	border: 0;
	border-radius: 0;
	line-height: 1.2;
	text-align: center;
	transition: background .2s;
}
.tlck-knop:hover { background: var(--tlck-teak-donker); }

.tlck-hint {
	display: block;
	font-family: var(--tlck-font);
	font-size: 12px;
	line-height: 1.5;
	color: var(--tlck-grijs);
	margin-top: 5px;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}
.tlck-herinnering-veld label { font-size: 12px !important; color: var(--tlck-grijs) !important; text-transform: none !important; letter-spacing: 0 !important; }

/* ==================== Leververwachting ==================== */
.tlck-levertijd {
	display: block;
	font-family: var(--tlck-font);
	font-size: 12px;
	line-height: 1.45;
	color: var(--tlck-teak-donker);
	margin: 2px 0 8px 22px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}
#shipping_method li { margin-bottom: 4px; }

/* ==================== Vertrouwen ==================== */
.tlck-trust {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--tlck-lijn);
	font-family: var(--tlck-font);
	clear: both;
}
.tlck-usps { list-style: none; margin: 0 0 14px; padding: 0; }
.tlck-usps li {
	position: relative;
	padding-left: 24px;
	margin: 0 0 7px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--tlck-charcoal);
	list-style: none;
}
.tlck-check { position: absolute; left: 0; top: 5px; color: var(--tlck-groen); }
.tlck-betaal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.tlck-betaal-label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--tlck-grijs); }
.tlck-betaal-iconen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tlck-betaal-icoon img,
.tlck-betaal-icoon svg {
	height: 28px !important;
	width: auto !important;
	max-width: none !important;
	max-height: none !important;
	display: block;
	border: 1px solid var(--tlck-lijn);
	border-radius: 4px;
	padding: 3px 6px;
	background: #fff;
	margin: 0 !important;
	float: none !important;
}
.tlck-betaal-tekst {
	font-size: 12px;
	color: var(--tlck-charcoal);
	border: 1px solid var(--tlck-lijn);
	border-radius: 4px;
	padding: 6px 8px;
	background: #fff;
	line-height: 1.2;
}
.tlck-contact { font-size: 13px; line-height: 1.5; color: var(--tlck-tekst); margin: 0; }
.tlck-contact a { color: var(--tlck-teak-donker); text-decoration: underline; }

/* ==================== Juridisch en terug ==================== */
.tlck-legal {
	font-family: var(--tlck-font);
	font-size: 12px;
	line-height: 1.5;
	color: var(--tlck-grijs);
	margin: 0 0 14px;
}
.tlck-legal a { color: var(--tlck-teak-donker); text-decoration: underline; }
.tlck-terug-wrap { margin: 0 0 14px; font-family: var(--tlck-font); font-size: 12px; }
.tlck-terug { color: var(--tlck-grijs); text-decoration: none; }
.tlck-terug::before { content: "\2190\00a0"; }
.tlck-terug:hover { color: var(--tlck-teak-donker); }

/* ==================== Besteloverzicht (mobiel) ==================== */
.tlck-summary {
	display: none;
	border: 1px solid var(--tlck-lijn);
	background: var(--tlck-creme);
	margin: 0 0 22px;
	font-family: var(--tlck-font);
}
.tlck-summary-toggle {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 10px;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 14px 16px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	color: var(--tlck-charcoal);
	box-shadow: none;
}
.tlck-summary-label { flex: 1; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.tlck-summary-count { color: var(--tlck-grijs); letter-spacing: 0; text-transform: none; font-size: 12px; }
.tlck-summary-total { font-size: 16px; font-weight: 600; white-space: nowrap; }
.tlck-chevron { flex: 0 0 12px; transition: transform .2s; color: var(--tlck-grijs); }
.tlck-summary.is-open .tlck-chevron { transform: rotate(180deg); }
.tlck-summary-panel { padding: 0 16px 16px; border-top: 1px solid var(--tlck-lijn); }
.tlck-summary-panel[hidden] { display: none; }
.tlck-summary-items { list-style: none; margin: 0; padding: 12px 0 0; }
.tlck-summary-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--tlck-lijn);
	list-style: none;
}
.tlck-summary-thumb { flex: 0 0 56px; width: 56px; height: 56px; background: #fff; border: 1px solid var(--tlck-lijn); overflow: hidden; }
.tlck-summary-thumb img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.tlck-summary-name { flex: 1; font-size: 13px; line-height: 1.4; color: var(--tlck-charcoal); }
.tlck-summary-meta, .tlck-summary-qty { display: block; font-size: 12px; color: var(--tlck-grijs); }
.tlck-summary-meta dl, .tlck-summary-meta dt, .tlck-summary-meta dd { display: inline; margin: 0; font-weight: 400; }
.tlck-summary-line { font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--tlck-charcoal); }
.tlck-summary-totals {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px 12px;
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--tlck-tekst);
}
.tlck-summary-totals dt, .tlck-summary-totals dd { margin: 0; }
.tlck-summary-totals dd { text-align: right; color: var(--tlck-charcoal); }
.tlck-summary-levertijd { grid-column: 1 / -1; font-size: 12px; color: var(--tlck-teak-donker); }
.tlck-summary-levertijd-dd { display: none; }
dt.tlck-summary-totaal, dd.tlck-summary-totaal {
	font-weight: 600;
	color: var(--tlck-charcoal);
	padding-top: 8px;
	border-top: 1px solid var(--tlck-lijn);
	font-size: 15px;
}
.tlck-summary-totaal small { font-weight: 400; color: var(--tlck-grijs); font-size: 11px; }
@media (max-width: 980px) {
	.tlck-summary { display: block; }
}

/* ==================== Afleidingsvrij afrekenen ==================== */
body.tlck-focus .et-l--header .df-am-col.center,
body.tlck-focus .et-l--header .df-am-col.right,
body.tlck-focus .et-l--header .df-mobile-menu-wrap,
body.tlck-focus .et-l--header .df-cart-info,
body.tlck-focus .et-l--header .df-menu-button,
body.tlck-focus .et-l--header .df-am-search { display: none !important; }
body.tlck-footer-slim .et-l--footer .et_pb_text_0_tb_footer,
body.tlck-footer-slim .et-l--footer .et_pb_social_media_follow_0_tb_footer { display: none !important; }

/* ==================== Winkelwagen ==================== */
html.tlck-js .tlck-coupon-verborgen .coupon { display: none !important; }
.tlck-coupon-knop {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 0 10px !important;
	font-family: var(--tlck-font);
	font-size: 12px !important;
	color: var(--tlck-grijs) !important;
	text-decoration: underline;
	cursor: pointer;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: none !important;
	line-height: 1.4;
	display: inline-block;
}
.tlck-coupon-knop[hidden] { display: none !important; }
html.tlck-js body.tlck-ctx-cart .woocommerce-cart-form button[name="update_cart"] { display: none !important; }
.tlck-bezig { pointer-events: none; opacity: .8; }
.tlck-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: var(--tlck-teak);
	z-index: 999999;
	transition: width .3s ease-out;
	pointer-events: none;
}
.tlck-progress.is-on { width: 88%; transition: width 6s cubic-bezier(.1, .8, .3, 1); }

/* Plakkende afrekenknop */
.tlck-cart-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999980;
	background: #fff;
	border-top: 1px solid var(--tlck-lijn);
	box-shadow: 0 -6px 18px rgba(30, 26, 22, .08);
	transform: translateY(110%);
	visibility: hidden;
	transition: transform .25s, visibility 0s linear .25s;
	padding: 10px 16px;
	padding-bottom: calc(10px + env(safe-area-inset-bottom));
	font-family: var(--tlck-font);
}
.tlck-cart-sticky.is-visible { transform: translateY(0); visibility: visible; transition: transform .25s, visibility 0s; }
.tlck-cart-sticky-inner { display: flex; align-items: center; gap: 14px; max-width: 1080px; margin: 0 auto; }
.tlck-cart-sticky-totaal { display: flex; flex-direction: column; line-height: 1.2; }
.tlck-cart-sticky-totaal small { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--tlck-grijs); }
.tlck-cart-sticky-bedrag { font-size: 17px; color: var(--tlck-charcoal); white-space: nowrap; }
.tlck-cart-sticky-knop { flex: 1; padding: 14px 10px; font-size: 12px; }
@media (min-width: 981px) {
	.tlck-cart-sticky { display: none; }
}
/* WhatsApp-knop meeschuiven zolang de balk zichtbaar is (zelfde body-class als de conversieplugin, maar die laadt haar CSS alleen op productpagina's). */
body.tlck-ctx-cart.tlcv-bar-open .tlwa-root {
	bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Lege winkelwagen */
.tlck-leeg { text-align: center; padding: 30px 20px 10px; font-family: var(--tlck-font); }
.tlck-leeg-titel { font-family: var(--tlck-serif); font-size: 26px; line-height: 1.2; color: var(--tlck-charcoal); margin: 0 0 8px; }
.tlck-leeg-tekst { color: var(--tlck-tekst); margin: 0 0 20px; font-size: 14px; }
.tlck-recent { margin-top: 40px; text-align: left; }
.tlck-recent[hidden] { display: none; }
.tlck-recent-titel { font-family: var(--tlck-serif); font-size: 22px; color: var(--tlck-charcoal); margin: 0 0 16px; text-align: center; padding: 0; }
.tlck-recent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px; }
.tlck-recent-item { text-decoration: none; color: var(--tlck-charcoal); display: block; }
.tlck-recent-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--tlck-creme); margin-bottom: 8px; }
.tlck-recent-naam { display: block; font-size: 13px; line-height: 1.4; }
.tlck-recent-prijs { display: block; font-size: 13px; color: var(--tlck-teak-donker); margin-top: 2px; }

/* Productfoto ook in de gestapelde mobiele weergave */
@media (max-width: 768px) {
	body.tlck-ctx-cart .woocommerce-cart-form table.shop_table_responsive tr td.product-thumbnail {
		display: block !important;
		text-align: left !important;
		padding: 10px 0 0 !important;
		border-bottom: 0 !important;
	}
	body.tlck-ctx-cart .woocommerce-cart-form table.shop_table_responsive tr td.product-thumbnail::before { display: none !important; }
	body.tlck-ctx-cart .woocommerce-cart-form td.product-thumbnail img { width: 72px !important; height: 72px !important; object-fit: cover; }
}

/* ==================== Validatie en e-mailsuggestie ==================== */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid .select2-container--default .select2-selection--single {
	border-color: var(--tlck-rood) !important;
	box-shadow: inset 0 -2px 0 var(--tlck-rood);
}
.woocommerce form .form-row.woocommerce-validated input.input-text {
	border-color: var(--tlck-groen) !important;
}
.tlck-suggestie {
	display: block;
	font-family: var(--tlck-font);
	font-size: 12px;
	line-height: 1.5;
	margin-top: 5px;
	color: var(--tlck-teak-donker);
	text-transform: none;
	letter-spacing: 0;
}
.tlck-suggestie button {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	font: inherit !important;
	color: inherit !important;
	text-decoration: underline;
	cursor: pointer;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* ==================== Bedanktpagina ==================== */
.tlck-next {
	margin: 28px 0;
	padding: 24px;
	background: var(--tlck-creme);
	border: 1px solid var(--tlck-lijn);
	font-family: var(--tlck-font);
}
.tlck-next-titel { font-family: var(--tlck-serif); font-size: 24px; line-height: 1.2; color: var(--tlck-charcoal); margin: 0 0 16px; padding: 0; }
.tlck-stappen { list-style: none; margin: 0; padding: 0; }
.tlck-stappen li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--tlck-charcoal);
	list-style: none;
}
.tlck-stap-nr {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--tlck-teak);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}
.tlck-next-note { font-size: 13px; color: var(--tlck-teak-donker); margin: 10px 0 0; }
.tlck-next .tlck-contact { margin-top: 14px; }

/* ==================== Kortingscode op de afrekenpagina ==================== */
.tlck-coupon { margin: 0 0 18px; font-family: var(--tlck-font); }
.tlck-coupon .tlck-coupon-knop { margin: 0 !important; }
.tlck-coupon-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.tlck-coupon-form[hidden] { display: none; }
.tlck-coupon-form input.input-text { flex: 1 1 160px; min-width: 0; }
.tlck-coupon-form .tlck-knop { padding: 12px 18px; font-size: 12px; cursor: pointer; }
.tlck-coupon-melding { flex-basis: 100%; }
.tlck-coupon-melding:empty { display: none; }
.tlck-coupon-melding .woocommerce-error,
.tlck-coupon-melding .woocommerce-message,
.tlck-coupon-melding .woocommerce-info { margin: 0 !important; font-size: 13px; }

/* ==================== Productfoto in het orderoverzicht ====================
   Bewust met float en niet met flex: de productkolom van de ordertabel is
   smal (135 px in de rechterkolom van de afrekenpagina) en zou met flex de
   naam onder de foto duwen. */
.tlck-review-thumb {
	float: left;
	width: 40px;
	height: 40px;
	margin: 2px 10px 2px 0;
	overflow: hidden;
	border: 1px solid var(--tlck-lijn);
	background: #fff;
}
.tlck-review-thumb img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.woocommerce-checkout-review-order-table td.product-name { overflow: hidden; }
.woocommerce-checkout-review-order-table td.product-name .product-quantity { white-space: nowrap; }
/* WooCommerce laat de kolombreedte over aan de browser en die geeft in de
   smalle rechterkolom 130 px aan de productnaam en 250 px aan het bedrag.
   De naam wikkelde daardoor over vier regels. */
.woocommerce-checkout-review-order-table th.product-name,
.woocommerce-checkout-review-order-table td.product-name { width: 64%; }
.woocommerce-checkout-review-order-table th.product-total,
.woocommerce-checkout-review-order-table td.product-total { width: 36%; text-align: right; white-space: nowrap; }