/* ============================================================
   Reset
   ============================================================ */
html, body { margin: 0 !important; padding: 0 !important; }
body { overflow-x: hidden; }
.wp-site-blocks { padding: 0 !important; }
.wp-site-blocks > * { margin-top: 0 !important; margin-block-start: 0 !important; }
header.caruel-header { margin-top: 0 !important; }
main { margin-top: 0 !important; }

/* ============================================================
   Header — transparent overlay + scroll-to-solid (Rev 2)
   ============================================================ */
.caruel-header__logo { display: inline-flex; align-items: center; line-height: 0; }
.caruel-header__logo-img { display: block; height: 64px; width: auto; }
@media (max-width: 768px) {
	.caruel-header__logo-img { height: 48px; }
}
.caruel-header.is-transparent .caruel-header__logo-img--dark { display: none; }
.caruel-header.is-scrolled .caruel-header__logo-img--light { display: none; }
.caruel-header:not(.is-transparent):not(.is-scrolled) .caruel-header__logo-img--light { display: none; }
.caruel-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	transition: background-color 250ms ease-out, box-shadow 250ms ease-out, transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
	background: transparent;
}
.caruel-header.is-hidden {
	transform: translateY(-100%);
}
/* Keep header un-transformed while the mobile menu is open so the fixed
   overlay maps to the viewport (a transformed ancestor would trap it). */
.caruel-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	transform: none !important;
}
.caruel-header.is-transparent .wp-block-site-title a,
.caruel-header.is-transparent .wp-block-navigation a {
	color: #ffffff;
}
.caruel-header.is-scrolled {
	background: var(--wp--preset--color--cream-bg);
	box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.caruel-header.is-scrolled .wp-block-site-title a,
.caruel-header.is-scrolled .wp-block-navigation a {
	color: var(--wp--preset--color--ink);
}
.caruel-header .wp-block-site-title a,
.caruel-header .wp-block-navigation a {
	text-decoration: none;
	transition: color 250ms ease-out;
}
.caruel-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--lavender) !important;
}
.admin-bar .caruel-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .caruel-header { top: 46px; }
}

/* ---- Mobile nav: hamburger color + overlay ---- */
/* Hamburger icon: white over the hero (transparent), dark once scrolled. */
.caruel-header .wp-block-navigation__responsive-container-open svg,
.caruel-header .wp-block-navigation__responsive-container-close svg {
	fill: currentColor;
}
.caruel-header.is-transparent .wp-block-navigation__responsive-container-open {
	color: #ffffff;
}
.caruel-header.is-scrolled .wp-block-navigation__responsive-container-open,
.caruel-header:not(.is-transparent):not(.is-scrolled) .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--ink);
}

/* Open overlay: solid cream panel, dark legible links, centered + spaced. */
.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	z-index: 9999 !important;
	background: var(--wp--preset--color--cream-bg) !important;
	padding: 24px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
}
.wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--ink) !important;
	font-size: 26px !important;
	letter-spacing: 1px;
}
.wp-block-navigation__responsive-container.is-menu-open a:hover {
	color: var(--wp--preset--color--lavender) !important;
}
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink) !important;
}

/* ============================================================
   Hero photo — card, framed by cream-bg margin
   ============================================================ */
.caruel-hero-photo {
	margin: 16px !important;
	border-radius: 32px;
	overflow: hidden;
	min-height: calc(100vh - 32px) !important;
	width: calc(100% - 32px) !important;
	max-width: calc(100vw - 32px) !important;
}
.caruel-hero-photo .wp-block-cover__inner-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	padding: 0 !important;
	box-sizing: border-box;
	overflow: hidden;
}
@media (max-width: 640px) {
	.caruel-hero-photo {
		margin: 8px !important;
		border-radius: 20px;
		min-height: calc(100vh - 16px) !important;
		width: calc(100% - 16px) !important;
	}
}
.caruel-hero-photo__logo {
	width: 100% !important;
	max-width: 1040px !important;
	margin: 0 auto !important;
	padding: 0 24px !important;
	box-sizing: border-box !important;
}
.caruel-hero-photo__logo img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	filter: drop-shadow(0 4px 16px rgba(0,0,0,0.25));
}

/* ============================================================
   Founder note + team photos
   ============================================================ */
.caruel-founder {
	text-align: left;
}
.caruel-founder { text-align: center; }
.caruel-founder__signature {
	display: flex;
	justify-content: center;
	margin-top: 56px !important;
}
.caruel-founder__signature img {
	max-width: 240px;
	width: 100%;
	height: auto;
	opacity: 0.9;
	display: block;
}
.caruel-team__portrait {
	display: flex;
	justify-content: center;
}
.caruel-team__portrait img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
	max-width: 320px;
	border-radius: 28px;
}
.caruel-team .wp-block-columns {
	justify-content: center;
}

/* ============================================================
   Cosa facciamo (Futures grid)
   ============================================================ */
.caruel-cosa__hero img {
	border-radius: 28px;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.caruel-cosa__card {
	padding: 32px 28px;
	background: var(--wp--preset--color--white);
	border-radius: 28px;
}
.caruel-cosa__card h3 a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.caruel-cosa__card h3 a:hover {
	color: var(--wp--preset--color--lavender);
}
.caruel-cosa__card a {
	text-decoration: none;
}

/* ============================================================
   Dove + Contatti
   ============================================================ */
.caruel-dove__map iframe {
	display: block;
	width: 100%;
	border: 0;
	min-height: 380px;
	border-radius: 28px;
}
.caruel-product-detail figure.wp-block-image img {
	border-radius: 28px;
}
.caruel-contatti__card {
	padding: 36px 28px;
	background: var(--wp--preset--color--white);
	border-radius: 28px;
}
.caruel-contatti__card a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: color 200ms;
}
.caruel-contatti__card a:hover {
	color: var(--wp--preset--color--lavender);
}

/* ============================================================
   Footer
   ============================================================ */
.caruel-footer {
	position: relative;
	overflow: hidden;
	color: #C9C2B5;
}
/* sand wave dipping from the contatti section into the dark footer */
.caruel-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 90px;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V58 C1140 98 1040 54 720 70 C420 86 300 46 0 64 Z' fill='%23E8DFD0'/%3E%3C/svg%3E");
}
.caruel-footer h4 {
	margin: 0 0 14px;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 600;
}
.caruel-footer p {
	margin: 0 0 4px;
	line-height: 1.75;
}
.caruel-footer a {
	color: var(--wp--preset--color--lavender);
	text-decoration: none;
	transition: color 200ms;
}
.caruel-footer a:hover {
	color: #ffffff;
}
.caruel-footer__logo { line-height: 0; margin: 0 0 16px; }
.caruel-footer__logo img { width: 170px; max-width: 60%; height: auto; }
.caruel-footer__tag { color: #8F897C !important; font-size: 13px; }
.caruel-footer__nav { gap: 8px !important; }
.caruel-footer__nav a { color: #C9C2B5; font-size: 14px; }
.caruel-footer__sep {
	border: none;
	height: 1px;
	background: rgba(255, 255, 255, 0.12);
}
.caruel-footer__copy { color: #8F897C !important; margin: 0; }
@media (max-width: 781px) {
	.caruel-footer__cols { gap: 32px; }
	.caruel-footer__logo img { width: 150px; }
}

/* ============================================================
   Product card + carousel
   ============================================================ */
.caruel-product-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}
.caruel-product-card__media {
	overflow: hidden;
	border-radius: 28px;
	background: var(--wp--preset--color--sand);
}
.caruel-product-card__media img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	border-radius: 28px;
	transition: opacity 200ms ease-out, transform 400ms ease-out;
}
.caruel-product-card:hover .caruel-product-card__media img {
	opacity: 0.95;
	transform: scale(1.02);
}
.caruel-product-card h3 {
	font-size: 22px;
	font-weight: 600;
	margin: 0;
	color: var(--wp--preset--color--ink);
}
.caruel-product-card__cta {
	color: var(--wp--preset--color--lavender);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0;
}

.caruel-carousel { position: relative; }
.caruel-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 85%;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 8px;
}
.caruel-carousel__track::-webkit-scrollbar { display: none; }
.caruel-carousel__track > .caruel-product-card { scroll-snap-align: start; }
.caruel-carousel__dots {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 32px;
}
.caruel-carousel__dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	background: var(--wp--preset--color--sand);
	border-radius: 50%;
	cursor: pointer;
	transition: background 200ms;
}
.caruel-carousel__dots button.is-active {
	background: var(--wp--preset--color--ink);
}
@media (min-width: 768px) {
	.caruel-carousel__track { grid-auto-columns: calc((100% - 48px) / 4); }
	.caruel-carousel__dots { display: none; }
}

/* ============================================================
   Editorial split
   ============================================================ */
.caruel-split.is-reverse .wp-block-columns { flex-direction: row-reverse; }
@media (max-width: 768px) {
	.caruel-split .wp-block-columns,
	.caruel-split.is-reverse .wp-block-columns { flex-direction: column; }
}

/* ============================================================
   Lavender divider — growing stems on scroll-in-view
   ============================================================ */
.caruel-lav-divider { overflow: hidden; }
.caruel-lav {
	display: block;
	width: 100%;
	max-width: 720px;
	height: auto;
	margin: 0 auto;
}
.caruel-lav__path {
	stroke-dasharray: var(--lav-dash, 260);
	stroke-dashoffset: var(--lav-dash, 260);
}
.caruel-lav__leaves { opacity: 0; }
.caruel-lav__buds ellipse {
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0);
	opacity: 0;
}
.caruel-lav.is-grown .caruel-lav__stem .caruel-lav__path {
	animation: caruelLavGrow 1.8s ease-out forwards;
	animation-delay: var(--lav-delay, 0s);
}
.caruel-lav.is-grown .caruel-lav__stem .caruel-lav__leaves {
	animation: caruelLavFade 0.7s ease-out forwards;
	animation-delay: calc(var(--lav-delay, 0s) + 1.0s);
}
.caruel-lav.is-grown .caruel-lav__buds ellipse {
	animation: caruelLavBud 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* Cascade buds bottom-up: nth-last-child larger delay */
.caruel-lav.is-grown .caruel-lav__buds ellipse { animation-delay: calc(var(--lav-delay, 0s) + 1.4s); }
.caruel-lav.is-grown .caruel-lav__buds ellipse:nth-child(1)  { animation-delay: calc(var(--lav-delay, 0s) + 1.20s); }
.caruel-lav.is-grown .caruel-lav__buds ellipse:nth-child(2)  { animation-delay: calc(var(--lav-delay, 0s) + 1.24s); }
.caruel-lav.is-grown .caruel-lav__buds ellipse:nth-child(3)  { animation-delay: calc(var(--lav-delay, 0s) + 1.28s); }
.caruel-lav.is-grown .caruel-lav__buds ellipse:nth-child(4)  { animation-delay: calc(var(--lav-delay, 0s) + 1.32s); }
.caruel-lav.is-grown .caruel-lav__buds ellipse:nth-child(5)  { animation-delay: calc(var(--lav-delay, 0s) + 1.36s); }
.caruel-lav.is-grown .caruel-lav__buds ellipse:nth-child(6)  { animation-delay: calc(var(--lav-delay, 0s) + 1.40s); }
.caruel-lav.is-grown .caruel-lav__buds ellipse:nth-child(7)  { animation-delay: calc(var(--lav-delay, 0s) + 1.44s); }
.caruel-lav.is-grown .caruel-lav__buds ellipse:nth-child(8)  { animation-delay: calc(var(--lav-delay, 0s) + 1.48s); }
.caruel-lav.is-grown .caruel-lav__buds ellipse:nth-child(9)  { animation-delay: calc(var(--lav-delay, 0s) + 1.52s); }
.caruel-lav.is-grown .caruel-lav__buds ellipse:nth-child(10) { animation-delay: calc(var(--lav-delay, 0s) + 1.56s); }
.caruel-lav.is-grown .caruel-lav__buds ellipse:nth-child(11) { animation-delay: calc(var(--lav-delay, 0s) + 1.60s); }
.caruel-lav.is-grown .caruel-lav__buds ellipse:nth-child(12) { animation-delay: calc(var(--lav-delay, 0s) + 1.64s); }
.caruel-lav.is-grown .caruel-lav__buds ellipse:nth-child(13) { animation-delay: calc(var(--lav-delay, 0s) + 1.68s); }
.caruel-lav.is-grown .caruel-lav__buds ellipse:nth-child(14) { animation-delay: calc(var(--lav-delay, 0s) + 1.72s); }
.caruel-lav.is-grown .caruel-lav__buds ellipse:nth-child(15) { animation-delay: calc(var(--lav-delay, 0s) + 1.76s); }
.caruel-lav.is-grown .caruel-lav__buds ellipse:nth-child(16) { animation-delay: calc(var(--lav-delay, 0s) + 1.80s); }
.caruel-lav.is-grown .caruel-lav__buds ellipse:nth-child(17) { animation-delay: calc(var(--lav-delay, 0s) + 1.84s); }
.caruel-lav.is-grown .caruel-lav__buds ellipse:nth-child(18) { animation-delay: calc(var(--lav-delay, 0s) + 1.88s); }
@keyframes caruelLavGrow {
	to { stroke-dashoffset: 0; }
}
@keyframes caruelLavFade {
	to { opacity: 1; }
}
@keyframes caruelLavBud {
	to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.caruel-lav__path { stroke-dashoffset: 0; }
	.caruel-lav__leaves { opacity: 1; }
	.caruel-lav__buds ellipse { transform: scale(1); opacity: 1; }
	.caruel-lav.is-grown .caruel-lav__path,
	.caruel-lav.is-grown .caruel-lav__leaves,
	.caruel-lav.is-grown .caruel-lav__buds ellipse { animation: none; }
}

/* ============================================================
   Section seam — solid colors, but the boundary is an organic WAVE,
   not a straight line. Each section keeps its solid background; a wave
   shaped ::before in the PREVIOUS section's color spills over the top
   edge so the colour change reads as a soft curve.
   ============================================================ */
/* Kill default block spacing between full-bleed sections so the wave seam
   sits flush — no cream gap showing through. */
main.wp-block-group > *,
.caruel-team,
.caruel-carousel-wrap,
.caruel-cosa,
.caruel-dove,
.caruel-contatti,
.caruel-founder {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.caruel-team,
.caruel-carousel-wrap,
.caruel-cosa,
.caruel-dove,
.caruel-contatti {
	position: relative;
}
.caruel-team::before,
.caruel-carousel-wrap::before,
.caruel-cosa::before,
.caruel-dove::before,
.caruel-contatti::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 90px;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% 100%;
}
/* previous block is cream → cream wave dips into this section */
.caruel-team::before,
.caruel-cosa::before,
.caruel-contatti::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V58 C1140 98 1040 54 720 70 C420 86 300 46 0 64 Z' fill='%23FAF7F2'/%3E%3C/svg%3E");
}
/* previous block is sand → sand wave dips into this section */
.caruel-carousel-wrap::before,
.caruel-dove::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V58 C1140 98 1040 54 720 70 C420 86 300 46 0 64 Z' fill='%23E8DFD0'/%3E%3C/svg%3E");
}

/* ============================================================
   Preloader — lavender grow intro
   Overlay is hidden by default; shown only when html.caruel-pre is set
   (JS present + motion allowed). No-JS / reduced-motion never see it.
   ============================================================ */
#caruel-preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	background: var(--wp--preset--color--cream-bg, #f6f1e7);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 700ms ease, visibility 0s linear 700ms;
}
html.caruel-pre #caruel-preloader {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: none;
}
html.caruel-loading { overflow: hidden; }

#caruel-preloader.is-done {
	opacity: 0;
	visibility: hidden;
	transition: opacity 1200ms ease, visibility 0s linear 1200ms;
}

.caruel-pre__art { width: 360px; max-width: 80vw; display: block; }
.caruel-pre__art .caruel-lav {
	width: 100%;
	max-width: 360px;
	height: auto;
	margin: 0 auto;
}
@media (max-width: 640px) { .caruel-pre__art { width: 260px; } }

.caruel-pre__word {
	opacity: 0;
	line-height: 0;
}
.caruel-pre__word img {
	display: block;
	width: 260px;
	max-width: 60vw;
	height: auto;
}
@media (max-width: 640px) { .caruel-pre__word img { width: 200px; } }
html.caruel-pre #caruel-preloader .caruel-pre__word {
	animation: caruelPreWord 1s ease-out forwards;
	animation-delay: 1.5s;
}

.caruel-pre__bar {
	width: 120px;
	height: 2px;
	background: rgba(0,0,0,0.08);
	border-radius: 2px;
	overflow: hidden;
}
.caruel-pre__bar span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--wp--preset--color--lavender, #a98fc9);
}
html.caruel-pre #caruel-preloader .caruel-pre__bar span {
	animation: caruelPreBar 1.9s ease-in-out forwards;
}

@keyframes caruelPreWord { from { opacity: 0; letter-spacing: 14px; } to { opacity: 1; letter-spacing: 8px; } }
@keyframes caruelPreBar  { 0% { width: 0; } 100% { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
	#caruel-preloader { display: none !important; }
}

/* ============================================================
   Smooth scroll (Lenis) + scroll reveals (GSAP)
   Hidden states apply ONLY when html.caruel-anim is set (JS + motion ok),
   so no-JS / reduced-motion users always see fully-rendered content.
   ============================================================ */
html.lenis, html.lenis body { height: auto; }
html.caruel-anim.lenis-smooth { scroll-behavior: auto !important; }
html.caruel-anim.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
html.caruel-anim.lenis-stopped { overflow: hidden; }

html.caruel-anim .caruel-founder > *,
html.caruel-anim .caruel-team > *,
html.caruel-anim .caruel-carousel-wrap > *,
html.caruel-anim .caruel-cosa > .wp-block-columns,
html.caruel-anim .caruel-dove .wp-block-column,
html.caruel-anim .caruel-contatti > * {
	opacity: 0;
	transform: translateY(40px);
	will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
	html.caruel-anim .caruel-founder > *,
	html.caruel-anim .caruel-team > *,
	html.caruel-anim .caruel-carousel-wrap > *,
	html.caruel-anim .caruel-cosa > .wp-block-columns,
	html.caruel-anim .caruel-dove .wp-block-column,
	html.caruel-anim .caruel-contatti > * {
		opacity: 1;
		transform: none;
	}
}

/* ============================================================
   Product detail
   ============================================================ */
.caruel-product-detail__price {
	gap: 16px;
	margin: 0 0 8px;
}
.caruel-product-detail__price p { margin: 0; }
.caruel-product-detail__sold-out {
	padding: 4px 10px;
	background: var(--wp--preset--color--cream-bg);
	border: 1px solid var(--wp--preset--color--lavender);
}
@media (min-width: 1024px) {
	.caruel-product-detail__info {
		position: sticky;
		top: 120px;
		align-self: flex-start;
	}
}