/* Atelier Hero Slider — front end */

@font-face {
	font-family: "ACH Script";
	src: url("fonts/dancing-script-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

.ach {
	--ach-orange: #E56908;
	--ach-orange-dark: #C95A04;
	--ach-navy: #181834;
	--ach-ink: #2B2D3C;
	--ach-beige: #EFE4D6;
	--ach-paper: 250, 248, 245;
	position: relative;
	width: 100%;
	height: var(--ach-hd, 900px);
	overflow: hidden;
	background: #F3F1EE;
	isolation: isolate;
	font-family: inherit;
	color: var(--ach-ink);
}

/* Break out of boxed theme / Elementor containers to the full window
   width. --ach-sb (scrollbar width) is measured by the script. */
.ach.ach--stretch {
	width: auto;
	max-width: none;
	margin-left: calc(50% - 50vw + var(--ach-sb, 0px) / 2);
	margin-right: calc(50% - 50vw + var(--ach-sb, 0px) / 2);
}

/* The hero sits right under the header: drop the theme's top spacing
   on pages that use it (WoodMart adds 40px above the content). */
.wd-content-layout:has(.ach--flush) { padding-top: 0; }

.ach *,
.ach *::before,
.ach *::after { box-sizing: border-box; }

.ach__viewport { position: absolute; inset: 0; }

/* ---------- slides ---------- */

.ach__slide {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity .9s ease, visibility 0s linear .9s;
}

.ach__slide.is-active {
	z-index: 2;
	opacity: 1;
	visibility: visible;
	transition: opacity .9s ease, visibility 0s;
}

.ach .ach__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 58% 50%;
	transform: scale(1.04);
	transition: transform 7s ease-out;
}

.ach__slide.is-active .ach__bg { transform: scale(1); }

/* Soft light veil behind the text column so it stays readable
   wherever the photo's subject reaches under it. */
.ach__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg,
		rgba(var(--ach-paper), .93) 0%,
		rgba(var(--ach-paper), .86) 30%,
		rgba(var(--ach-paper), .6) 45%,
		rgba(var(--ach-paper), .18) 56%,
		rgba(var(--ach-paper), 0) 64%);
}

/* ---------- content ---------- */

/* Text leaves first, the photo cross-fades, then the new text arrives —
   two slides' words never sit on top of each other. */
.ach__inner {
	opacity: 0;
	transition: opacity .3s ease;
}

.ach__slide.is-active .ach__inner {
	opacity: 1;
	transition: opacity .55s ease .45s;
}

.ach__inner {
	position: relative;
	z-index: 2;
	height: 100%;
	max-width: min(var(--wd-container-w, 1222px), calc(100% - 168px));
	margin: 0 auto;
	padding: 0 15px;
	display: flex;
	align-items: center;
}

.ach__content {
	max-width: 640px;
	padding: 30px 0 80px;
}

.ach .ach__eyebrow {
	margin: 0 0 20px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--ach-navy);
}

.ach .ach__title {
	margin: 0 0 24px;
	padding: 0;
	font-family: var(--wd-title-font, "Montserrat", Arial, sans-serif);
	font-weight: 800;
	font-size: clamp(46px, 4.9vw, 92px);
	line-height: 1.02;
	letter-spacing: -.025em;
	text-transform: none;
	color: var(--ach-navy);
	max-width: 6.4em;
	text-wrap: balance;
}

.ach .ach__hl { color: var(--ach-orange); }

.ach .ach__text {
	margin: 0 0 36px;
	max-width: 31em;
	font-size: 19px;
	line-height: 1.6;
	color: var(--ach-ink);
}

.ach .ach__btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 58px;
	padding: 0 34px;
	border-radius: 999px;
	background: var(--ach-orange);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 12px 26px -12px rgba(229, 105, 8, .8);
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.ach .ach__btn:hover {
	background: var(--ach-orange-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 16px 30px -12px rgba(201, 90, 4, .85);
}

.ach .ach__btn:focus-visible { outline: 3px solid var(--ach-navy); outline-offset: 3px; }
.ach .ach__btn svg { width: 18px; height: 18px; flex: none; transition: transform .2s ease; }
.ach .ach__btn:hover svg { transform: translateX(3px); }

.ach .ach__icons {
	display: flex;
	gap: 30px;
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
}

.ach .ach__icons li {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 120px;
	margin: 0;
	padding: 0;
	text-align: center;
	list-style: none;
}

.ach__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--ach-beige);
	color: var(--ach-navy);
}

.ach__ico svg { width: 32px; height: 32px; }

.ach__lbl {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--ach-navy);
}

/* ---------- handwritten note ---------- */

.ach .ach__note {
	position: absolute;
	top: 12%;
	right: 15px;
	margin: 0;
	font-family: "ACH Script", "Segoe Script", "Brush Script MT", cursive;
	font-size: clamp(32px, 2.6vw, 46px);
	font-weight: 500;
	line-height: 1.08;
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .38);
	transform: rotate(-7deg);
	transform-origin: right center;
}

.ach .ach__note--dark {
	color: var(--ach-navy);
	text-shadow: 0 1px 12px rgba(255, 255, 255, .7);
}

.ach__note svg {
	display: block;
	width: 130px;
	height: 16px;
	margin: 8px 0 0 30%;
	color: var(--ach-orange);
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .18));
}

/* ---------- Made in Belgium badge ---------- */

.ach__badge {
	position: absolute;
	right: 15px;
	bottom: 56px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 22px 9px 9px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 14px 32px -14px rgba(15, 20, 40, .4);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ach-navy);
}

.ach__flag {
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 50%;
	background: linear-gradient(90deg, #1d1d1b 0 33.4%, #FDDA24 33.4% 66.6%, #EF3340 66.6% 100%);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

/* ---------- navigation ---------- */

.ach .ach__arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	min-height: 0;
	margin: -27px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--ach-navy);
	box-shadow: 0 10px 24px -12px rgba(15, 20, 40, .5);
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.ach .ach__arrow:hover { background: #fff; color: var(--ach-orange); transform: scale(1.06); }
.ach .ach__arrow:focus-visible { outline: 3px solid var(--ach-orange); outline-offset: 2px; }
.ach .ach__arrow svg { width: 22px; height: 22px; }
.ach .ach__arrow--prev { left: 24px; }
.ach .ach__arrow--next { right: 24px; }

.ach__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 24px;
	z-index: 5;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.ach .ach__dot {
	width: 10px;
	height: 10px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(24, 24, 52, .3);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .75);
	cursor: pointer;
	transition: width .3s ease, background-color .3s ease;
}

.ach .ach__dot:hover { background: rgba(24, 24, 52, .55); }
.ach .ach__dot.is-active { width: 30px; background: var(--ach-orange); }
.ach .ach__dot:focus-visible { outline: 2px solid var(--ach-navy); outline-offset: 3px; }

/* ---------- narrower desktops ---------- */

@media (max-width: 1599px) {
	.ach .ach__bg { object-position: 40% 50%; }
}

/* ---------- laptop / tablet ---------- */

@media (max-width: 1199px) {
	.ach { height: 760px; }
	.ach__content { max-width: 540px; }
	.ach .ach__text { font-size: 17px; }
	.ach .ach__icons { gap: 18px; margin-top: 34px; }
	.ach .ach__icons li { width: 108px; }
	.ach .ach__arrow--prev { left: 12px; }
	.ach .ach__arrow--next { right: 12px; }
	.ach__veil {
		background: linear-gradient(90deg,
			rgba(var(--ach-paper), .93) 0%,
			rgba(var(--ach-paper), .85) 34%,
			rgba(var(--ach-paper), .4) 55%,
			rgba(var(--ach-paper), 0) 72%);
	}
}

@media (max-width: 1024px) {
	.ach .ach__note { display: none; }
}

/* ---------- phone: text over the photo ---------- */

@media (max-width: 767px) {
	.ach { height: 760px; }
	.ach .ach__bg { object-position: var(--ach-focus, 65%) 30%; }
	.ach__veil {
		background: linear-gradient(180deg,
			rgba(var(--ach-paper), 0) 12%,
			rgba(var(--ach-paper), .72) 36%,
			rgba(var(--ach-paper), .93) 52%,
			rgba(var(--ach-paper), .97) 100%);
	}
	.ach__inner { align-items: flex-end; max-width: none; padding: 0 20px; }
	.ach__content { width: 100%; max-width: none; padding: 0 0 56px; }
	.ach .ach__eyebrow { margin-bottom: 10px; font-size: 11px; letter-spacing: .2em; }
	.ach .ach__title { margin-bottom: 14px; font-size: clamp(34px, 10.4vw, 46px); }
	.ach .ach__text { margin-bottom: 22px; font-size: 15px; line-height: 1.55; }
	.ach .ach__text br { display: none; }
	.ach .ach__btn { min-height: 50px; padding: 0 26px; font-size: 14px; }
	.ach .ach__icons { justify-content: space-between; gap: 8px; margin-top: 24px; }
	.ach .ach__icons li { flex: 1 1 0; width: auto; }
	.ach__ico { width: 50px; height: 50px; margin-bottom: 7px; }
	.ach__ico svg { width: 24px; height: 24px; }
	.ach__lbl { font-size: 11.5px; }
	.ach .ach__note { display: none; }
	.ach__badge { top: 16px; right: 16px; bottom: auto; gap: 8px; padding: 5px 14px 5px 5px; font-size: 10px; }
	.ach__flag { width: 30px; height: 30px; }
	.ach .ach__arrow { display: none; }
	.ach__dots { bottom: 20px; }
}

@media (max-width: 380px) {
	.ach { height: 800px; }
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
	.ach__slide,
	.ach__slide.is-active,
	.ach__inner,
	.ach__slide.is-active .ach__inner,
	.ach .ach__bg,
	.ach .ach__btn,
	.ach .ach__btn svg { transition: none; }
	.ach .ach__bg,
	.ach__slide.is-active .ach__bg { transform: none; }
}