@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');

:root {
	--primary: #CDB48C;
	--secondary: #C2756B;
	--third: #A9A4B6;
	--color-lightgreen: #DBDED3;
	--color-beige: #F1EADF;
	--color-lightblue: #CADCE8;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6, .marcellusFont {
	font-family: 'Marcellus', serif;
	/* Marcellus only ships weight 400; prevent faux-bold from the template's 500 */
	font-weight: 400;
    letter-spacing: normal;
}

.title_sld.text-display.marcellusFont {
    font-size: clamp(36px, 5vw, 60px);
    line-height: clamp(40px, 5.5vw, 68px);
} 

.tf-topbar {
	background-color: var(--color-lightgreen);
}

.tf-topbar .link:hover {
	color: var(--secondary) !important;
}

.bg-beige {
	background-color: var(--color-beige);
}

.border-radius-20 {
	border-radius: 20px;
}

.banner-image-text.style-7 .bn-image img {
	aspect-ratio: 2 / 3;
	height: auto;
}

.banner-image-text.style-7 .bn-content {
	top: auto;
	bottom: 20px;
	z-index: 2;
}

@media (min-width: 1200px) {
	.banner-image-text.style-7 .bn-content {
		top: auto;
		bottom: 36px;
	}
}

.icon-CheckCircle1::before {
  color: var(--color-lightgreen);
}

.testimonial-v01 .tes_product .product-image {
	border-radius: 5px !important;
	width: 60px;
	flex-shrink: 0;
	aspect-ratio: 2 / 3;
}

.testimonial-v01 .tes_product .product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.banner-lookbook .img-banner {
	aspect-ratio: 5 / 2;
	height: auto;
}

.banner-lookbook .position1 {
  top: 71.2%;
  left: 32.5%;
}

.banner-lookbook .position2 {
  top: 51.8%;
  left: 61.7%;
}

.banner-lookbook .position3 {
  top: 61.2%;
  left: 32.5%;
}

.banner-lookbook .position4 {
  top: 51.8%;
  left: 77.7%;
}

.widget-facet {
    margin:1.2rem 0;
}

/* NIEUW-kaartbadge: zachte huisstijltint i.p.v. het harde templategroen (#3dab25);
   lichte achtergrond, dus ook de witte templatetekst omzetten naar donker. */
.product-badge_item.new {
	background-color: var(--color-lightgreen);
	color: var(--text);
}

/* Variant-size picker: waardes als '180 cm' passen niet in het vaste 44px-vierkant van het
   template — laat de knop meegroeien met de inhoud (min. 44px breed, niet afbreken). */
.tf-product-info-wrap .variant-size .size-btn:not(.select-item),
.tf-product-quick_view .variant-size .size-btn,
.quick-variant-picker.picker_size .size_btn {
	width: auto;
	min-width: 44px;
	padding: 0 14px;
	white-space: nowrap;
}

/* Winkelwagen (taak 01): headerbadge verbergen bij een lege wagen (cart.js zet data-empty). */
.shop-cart .count[data-empty="true"] {
	display: none;
}

/* SweetAlert layer (toasts + popups) above the theme's overlay stack (browserpass finding 1-9):
   this template raises .offcanvas/.offcanvas-backdrop to 3000/2999 and .canvas-compare to 5000,
   all above the z-indexes the swal stylesheets set — swal2's own 1060, but decisively meriad's
   toast.css, which pins toast containers at 1090 via `body.swal2-toast-shown .swal2-container`
   (chosen there to clear a 1030 menu bar, never this theme's 3000+ chrome). That selector's
   specificity beats any un-!important override here, and the libs collector injects those sheets
   below this one — hence !important. 10500 also clears the 10000 loading spinner. Swal shows one
   thing at a time and is always the topmost interaction, so lifting the whole layer is safe. */
body .swal2-container {
	z-index: 10500 !important;
}

/* ---<< Checkout (taak 03) >>--------------------------- */
/* Step indicator under the page title (pages/checkout/progress.tpl). */
.checkout-progress {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: 24px;
	color: var(--text-3, #888);
}
.checkout-progress__step {
	display: flex;
	align-items: center;
	gap: 8px;
}
.checkout-progress__step.is-active {
	color: var(--text);
	font-weight: 600;
}
.checkout-progress__step.is-done {
	color: var(--text);
	font-weight: 500;
}
.checkout-progress__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--line);
}
.checkout-progress__step.is-active .checkout-progress__number,
.checkout-progress__step.is-done .checkout-progress__number {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}

/* Server-rendered notices (a returning failed payment, Mollie unavailable) live outside the framework's
   feedback list — form.js empties every [data-meriad-entity="form-feedback"] on document.ready. */
.checkout-notice {
	padding: 12px 16px;
	margin-bottom: 16px;
	border-radius: 10px;
	border: 1px solid var(--line);
	line-height: 1.5;
}
.checkout-notice--error {
	border-color: var(--secondary);
	color: var(--secondary);
	background: rgba(194, 117, 107, 0.08);
}

/* Method rows (shipping + payment): a logo/icon between the radio and the name, the hint under the row. */
.payment_check .checkout-method-logo,
.payment_check .icon {
	margin-left: 8px;
	flex-shrink: 0;
}
.payment_check .icon {
	font-size: 20px;
}
.checkout-method-hint {
	padding-left: 34px;
}

/* Address blocks on step 2 / the confirmation. */
.checkout-address {
	line-height: 1.6;
}

/* An empty inline-feedback list must take no space (form.js hides it on ready, but the first paint
   comes first). */
[data-meriad-entity="form-field-feedback"]:empty,
[data-meriad-entity="form-feedback"]:empty {
	display: none;
}

/* The template scopes the terms-row flex rule to .box-order-summary .check-agree; on step 3 the row
   sits in the form instead — same treatment, unscoped. */
.check-agree {
	display: flex;
	align-items: center;
	gap: 8px;
}
.check-agree input {
	flex-shrink: 0;
}

/* Betaling-verwerken card: centre the spinner and the escape button. */
.checkout-processing .spinner-border,
.checkout-processing .tf-btn {
	margin-left: auto;
	margin-right: auto;
}