/* ========================================================================
   Beau Home Elements — design tokens
   Ported from src/index.css (React/Vite source).
   - All colors stored as raw HSL triplets so element CSS uses hsl(var(--…))
   - Single source of truth: change a token here, every element follows
   ======================================================================== */

/* ---- Custom brand display font ---------------------------------------- */
@font-face {
	font-family: 'Vogue';
	src: url('../fonts/Vogue.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	/* ---- Brand palette (Brandbook 4.1) -------------------------------- */
	/*  espresso  #24160e  ~ hsl(25 47% 10%)
	    champagne #bfa379  ~ hsl(34 35% 62%)   primary gold accent
	    sand      #cbc1b0  ~ hsl(38 22% 74%)   warm grey/sand
	    cream     #f3eee2  ~ hsl(36 38% 93%)   warm ivory bg
	    taupe     #a29786  ~ hsl(30 11% 58%)   warm brown taupe (v2 footer)  */
	--beau-espresso:       25 47% 10%;
	--beau-espresso-soft:  25 35% 16%;
	--beau-cream:          36 38% 93%;
	--beau-sand:           38 22% 74%;
	--beau-taupe:          30 11% 58%;
	--beau-champagne:      34 35% 62%;
	--beau-brass:          34 38% 50%;

	/* ---- Semantic tokens ---------------------------------------------- */
	--beau-background:           36 38% 93%;
	--beau-foreground:           25 47% 10%;
	--beau-card:                 25 47% 14%;
	--beau-card-foreground:      36 30% 93%;
	--beau-popover:              36 38% 95%;
	--beau-popover-foreground:   25 47% 10%;
	--beau-primary:              25 47% 10%;
	--beau-primary-foreground:   36 38% 93%;
	--beau-secondary:            38 22% 74%;
	--beau-secondary-foreground: 25 47% 10%;
	--beau-accent:               34 35% 62%;
	--beau-accent-foreground:    25 47% 10%;
	--beau-muted:                36 22% 86%;
	--beau-muted-foreground:     28 18% 30%;
	--beau-border:               32 18% 78%;
	--beau-ring:                 34 35% 62%;

	/* ---- Layout ------------------------------------------------------- */
	--beau-container-max: 1440px;

	/* ---- Radius scale (derived from --beau-radius = 0.5rem base) ------ */
	--beau-radius: 0.5rem;
	--beau-r-xs:   0.25rem;                            /* inner buttons: tool-btn, style-tab, page-btn */
	--beau-r-sm:   calc(var(--beau-radius) - 2px);     /* ≈ 0.375rem  outer groups, share-wa */
	--beau-r-md:   var(--beau-radius);                 /* 0.5rem      inputs, wl-btn, share-btn */
	--beau-r-chip: calc(var(--beau-radius) + 0.125rem);/* 0.625rem    nav chips */
	--beau-r-lg:   calc(var(--beau-radius) + 0.25rem); /* 0.75rem     cards, modals */
	--beau-r-xl:   calc(var(--beau-radius) * 3);       /* 1.5rem      organic image shapes */
	--beau-r-2xl:  calc(var(--beau-radius) * 4);       /* 2rem        mega menu panel (desktop) */
	--beau-r-pill: 9999px;                             /* badges */

	/* ---- Gradients (Brandbook 4.3 — paleta + um tom mais claro) ------- */
	--beau-gradient-warm: linear-gradient(135deg, hsl(34 35% 62%) 0%, hsl(38 22% 80%) 100%);
	--beau-gradient-deep: linear-gradient(135deg, hsl(25 47% 10%) 0%, hsl(25 35% 18%) 100%);

	/* ---- Shadows ------------------------------------------------------ */
	--beau-shadow-soft:     0 10px 40px -15px hsl(25 47% 10% / 0.18);
	--beau-shadow-elegant:  0 20px 60px -20px hsl(25 47% 10% / 0.35);

	/* ---- Typography --------------------------------------------------- */
	/* v2 (figma) design swapped Vogue for Playfair Display — see Lovable
	   index.html + tailwind.config.ts. Kept Vogue/Italiana as ultimate
	   fallbacks so pages cached before the swap still degrade gracefully. */
	--beau-font-display:   'Playfair Display', 'Vogue', 'Italiana', Georgia, serif;
	--beau-font-secondary: 'Raleway', system-ui, sans-serif;
	--beau-font-body:      'Montserrat', system-ui, sans-serif;

	/* ---- Easing ------------------------------------------------------- */
	--beau-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================================================
   Dark mode — toggled by JS setting data-theme="dark" on <html>
   ======================================================================== */
[data-theme="dark"] {
	--beau-background:           25 47% 10%;
	--beau-foreground:           36 38% 93%;
	--beau-card:                 25 35% 14%;
	--beau-card-foreground:      36 30% 93%;
	--beau-popover:              25 40% 12%;
	--beau-popover-foreground:   36 38% 93%;
	--beau-primary:              36 38% 93%;
	--beau-primary-foreground:   25 47% 10%;
	--beau-secondary:            25 35% 18%;
	--beau-secondary-foreground: 36 38% 93%;
	--beau-muted:                25 35% 16%;
	--beau-muted-foreground:     36 22% 65%;
	--beau-border:               25 35% 22%;
	--beau-ring:                 34 35% 62%;
}

/* ------------------------------------------------------------------------
   Dark mode for STOCK Breakdance elements.
   Global Settings colors all resolve through the --bde-* semantic variables
   defined on :root in Breakdance's generated global-settings.css, so
   re-mapping them here flips every stock element (text, headings, buttons,
   forms, Woo) together with the custom Beau elements above.
   html[data-theme="dark"] (0,1,1) outspecifies :root (0,1,0), so this wins
   regardless of stylesheet load order. Palette swatches picked per-element
   in the builder compile to per-install UUID variables and are re-mapped at
   runtime in PHP (Assets\bde_palette_dark_css) — not here.
   Hex values mirror the --beau-* dark tokens: #24160E = hsl(25 47% 10%),
   #F3EEE2 = hsl(36 38% 93%), #37261B = hsl(25 35% 16%),
   #3E2B1E = hsl(25 35% 18%), #4C3524 = hsl(25 35% 22%),
   #B9AA92 = hsl(36 22% 65%).
   ------------------------------------------------------------------------ */
html[data-theme="dark"] {
	/* Core text / background */
	--bde-body-text-color:  #F3EEE2;
	--bde-headings-color:   #F3EEE2;
	--bde-background-color: #24160E;

	/* Links — espresso text is invisible on espresso; use the gold accents */
	--bde-links-color:       #F3EEE2;
	--bde-links-color-hover: #BFA379;

	/* Custom buttons default to grey-900 on white — invert to cream */
	--bde-button-custom-background-color:       #F3EEE2;
	--bde-button-custom-background-color-hover: #E3DDD3;
	--bde-button-custom-border-color:           #F3EEE2;
	--bde-button-custom-border-color-hover:     #E3DDD3;
	--bde-button-custom-text-color:             #24160E;
	--bde-button-custom-text-color-hover:       #24160E;

	/* Forms — white inputs become dark cards */
	--bde-form-input-background-color:         #37261B;
	--bde-form-input-focused-background-color: #37261B;
	--bde-form-input-border-color:             #4C3524;
	--bde-form-input-placeholder-color:        #B9AA92;
	--bde-form-text-color:                     #B9AA92;

	/* WooCommerce */
	--bde-woo-base-border-color:             #4C3524;
	--bde-woo-payment-box-background-color:  #37261B;
	--bde-woo-payment-box-border-color:      #4C3524;
	--bde-woo-swatch-background:             #37261B;
	--bde-woo-swatch-background-hover:       #3E2B1E;
	--bde-woo-swatch-border-color-hover:     #B9AA92;
	--bde-woo-swatch-tooltip-background:     #F3EEE2;
	--bde-woo-swatch-tooltip-color:          #24160E;
	--bde-woo-quicklook-modal-background-color: #37261B;
}

/* Dark-mode readability guardrail for stock BD BODY COPY and headings.
   When the editor sets a manual hex ink (e.g. #342113 on the inspiratie-
   magazine page) it compiles to a literal value that no variable re-map can
   flip, leaving espresso-on-espresso text. Body copy and headings must always
   be readable, so in dark mode they're forced onto the theme ink variables.
   Deliberately NOT applied to .bde-text (eyebrows/labels): those carry
   intentional accent colors (champagne) that already read fine on dark.
   Specificity (0,3,2)+ beats the compiled per-element rules (0,2,1). */
html[data-theme="dark"] .breakdance .bde-rich-text p,
html[data-theme="dark"] .breakdance .bde-rich-text li,
html[data-theme="dark"] .breakdance .bde-rich-text blockquote {
	color: var(--bde-body-text-color);
}
html[data-theme="dark"] .breakdance .bde-rich-text a {
	color: var(--bde-links-color);
}
html[data-theme="dark"] .breakdance .bde-heading {
	color: var(--bde-headings-color);
}

/* Prevent horizontal page scroll from any overflowing child.
   `scrollbar-gutter: stable` reserves the vertical scrollbar's space from
   first paint — without it, the gutter appears once the page becomes
   scrollable and every vw-based size (this design uses vw heavily) reflows,
   producing a horizontal "jump" during load. `overflow-x: clip` on body
   contains stray overflow without making body a scroll container the way
   `hidden` would (which can break position: sticky). */
html {
	overflow-x: hidden;
	scrollbar-gutter: stable;
}
body { overflow-x: clip; }

/* Scroll-lock helper — added to <body> when a modal/menu is open */
body.beau-no-scroll { overflow: hidden; }

/* ========================================================================
   Tooltip — data-tooltip attribute renders a ::after pill on hover
   ======================================================================== */

[data-tooltip] { position: relative; }
[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: hsl(var(--beau-background));
	color: hsl(var(--beau-foreground));
	border: 1px solid hsl(var(--beau-border) / 0.5);
	box-shadow: 0 4px 16px hsl(var(--beau-espresso) / 0.12);
	font-family: var(--beau-font-secondary);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: none;
	padding: 0.4rem 0.75rem;
	border-radius: 0.625rem;
	white-space: nowrap;
	z-index: 200;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ========================================================================
   Layout primitives
   ======================================================================== */

.beau-container {
	width: 100%;
	max-width: var(--beau-container-max);
	margin-inline: auto;
	padding-inline: 1.5rem;
	box-sizing: border-box;
}
@media (min-width: 768px) { .beau-container { padding-inline: 2.5rem; } }
@media (min-width: 1024px) { .beau-container { padding-inline: 4rem; } }

/* Beau Home signature shape: square with two diagonally rounded corners */
.beau-organic            { border-radius: 2.5rem 0 2.5rem 0; }
.beau-organic-alt        { border-radius: 0 2.5rem 0 2.5rem; }
.beau-organic-soft       { border-radius: 1.25rem 0 1.25rem 0; }

/* ========================================================================
   Typography utilities
   ======================================================================== */

.beau-eyebrow {
	font-family: var(--beau-font-secondary);
	font-size: 0.7rem;
	font-weight: 300;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}

.beau-display       { font-family: var(--beau-font-display); letter-spacing: 0.02em; }
.beau-display-tight { font-family: var(--beau-font-display); letter-spacing: -0.01em; }

/* ========================================================================
   Buttons
   ======================================================================== */

body.breakdance a.beau-btn,
body.breakdance button.beau-btn,
.beau-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1.5rem;
	font-family: var(--beau-font-secondary);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	font-weight: 400;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 0.625rem;
	cursor: pointer;
	transition: background-color .3s, color .3s, border-color .3s, box-shadow .35s var(--beau-ease-out);
}
body.breakdance a.beau-btn--primary,
.beau-btn--primary {
	background: hsl(var(--beau-champagne));
	color: hsl(var(--beau-espresso));
}
/* v2 Hero spec: hover keeps champagne but at 90% opacity — barely-perceptible
   tone shift (matches Tailwind `hover:bg-champagne/90` in Lovable JSX). */
body.breakdance a.beau-btn--primary:hover,
.beau-btn--primary:hover { background: hsl(var(--beau-champagne) / 0.9); }

/* Sand — warm grey fill, escalates to champagne on hover (Hero primary CTA) */
body.breakdance a.beau-btn--sand,
.beau-btn--sand {
	background: hsl(var(--beau-sand));
	color: hsl(var(--beau-espresso));
}
body.breakdance a.beau-btn--sand:hover,
.beau-btn--sand:hover { background: hsl(var(--beau-champagne)); }

/* Gold — champagne fill, brass+cream on hover (v2 Navbar CTA) */
body.breakdance a.beau-btn--gold,
.beau-btn--gold {
	background: hsl(var(--beau-champagne));
	color: hsl(var(--beau-espresso));
}
body.breakdance a.beau-btn--gold:hover,
.beau-btn--gold:hover {
	background: hsl(var(--beau-brass));
	color: hsl(var(--beau-cream));
}
/* CtaBlock primary CTA — scoped override. v2's PageFooterCta primary button
   keeps its champagne fill and just dims on hover (`hover:opacity-90`); the
   global --gold swap to brass washed the label out in the CtaBlock context.
   Scoped to the element-specific class so other --gold buttons are untouched.
   Lives here (not CtaBlock/default.css) because BD's CSS-compile dedup can
   leak element-CSS rules globally. */
body.breakdance a.beau-cta-block__cta,
.beau-cta-block__cta {
	transition: background-color .3s, color .3s, opacity .3s, box-shadow .35s var(--beau-ease-out);
}
body.breakdance a.beau-cta-block__cta:hover,
.beau-cta-block__cta:hover {
	background: hsl(var(--beau-champagne));
	color: hsl(var(--beau-espresso));
	opacity: 0.9;
}

/* Champagne→Sand — champagne fill that cools to sand on hover. Distinct from
   `--gold` (champagne→brass) and `--sand` (sand→champagne). Mirrors v2
   ProductsTabs CTA `bg-champagne hover:bg-sand` (Index.tsx). */
body.breakdance a.beau-btn--champagne-sand,
.beau-btn--champagne-sand {
	background: hsl(var(--beau-champagne));
	color: hsl(var(--beau-espresso));
}
body.breakdance a.beau-btn--champagne-sand:hover,
.beau-btn--champagne-sand:hover { background: hsl(var(--beau-sand)); }

/* Espresso — dark fill, cream text. For text CTAs sitting on a LIGHT card
   surface (PIA package cards, PIA 3D callout). Mirrors v2's repeated
   `bg-espresso text-cream hover:bg-espresso/90` button class. */
body.breakdance a.beau-btn--espresso,
body.breakdance button.beau-btn--espresso,
.beau-btn--espresso {
	background: hsl(var(--beau-espresso));
	color: hsl(var(--beau-cream));
}
body.breakdance a.beau-btn--espresso:hover,
body.breakdance button.beau-btn--espresso:hover,
.beau-btn--espresso:hover { background: hsl(var(--beau-espresso-soft)); }

/* Large — Hero / editorial size: taller padding, same chip styling */
body.breakdance a.beau-btn--lg,
.beau-btn--lg {
	padding: 0.875rem 1.5rem;
}
@media (min-width: 1024px) {
	body.breakdance a.beau-btn--lg,
	.beau-btn--lg { padding: 1rem 1.75rem; }
}

body.breakdance a.beau-btn--ghost,
.beau-btn--ghost {
	background: transparent;
	color: hsl(var(--beau-foreground));
	border-color: hsl(var(--beau-foreground) / .25);
}
body.breakdance a.beau-btn--ghost:hover,
.beau-btn--ghost:hover { border-color: hsl(var(--beau-foreground)); }

/* Outline-cream — for buttons sitting on dark surfaces (Hero, dark sections) */
body.breakdance a.beau-btn--outline-cream,
.beau-btn--outline-cream {
	background: transparent;
	color: hsl(var(--beau-cream));
	border-color: hsl(var(--beau-cream) / .7);
}
body.breakdance a.beau-btn--outline-cream:hover,
.beau-btn--outline-cream:hover {
	background: hsl(var(--beau-cream) / .1);
	border-color: hsl(var(--beau-cream));
}

/* Arrow inside button nudges right on hover.
   width/height MUST be set here: several twigs emit <svg viewBox> with no
   width/height attrs, and a sizeless SVG flex-item with flex-shrink:0
   renders at its 300x150 default — the giant-arrow bug. */
body.breakdance a.beau-btn svg,
body.breakdance button.beau-btn svg,
.beau-btn svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	/* Several twigs emit <svg viewBox> with no fill/stroke attrs — without
	   these the <polyline> arrows render as a filled black triangle (SVG
	   default fill:black). Force the line-icon look here so every .beau-btn
	   arrow is consistent regardless of the twig's attributes. */
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .35s var(--beau-ease-out);
}
body.breakdance a.beau-btn--lg svg,
.beau-btn--lg svg { width: 16px; height: 16px; }
.beau-btn:hover svg { transform: translateX(4px); }

/* Rectangular icon-only arrow buttons (carousel controls etc.)
   Matches React: h-11 w-12 → h-12 w-14 at lg, no border-radius.
   body.breakdance prefix beats BD global button{border-radius:50%} (0,1,1) */
body.breakdance .beau-icon-arrow,
.beau-icon-arrow {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 44px;
	background: hsl(var(--beau-champagne));
	color: hsl(var(--beau-espresso));
	border: none;
	border-radius: 0.625rem;
	cursor: pointer;
	transition: background-color .3s, box-shadow .35s var(--beau-ease-out), transform .35s var(--beau-ease-out);
}
@media (min-width: 1024px) {
	body.breakdance .beau-icon-arrow,
	.beau-icon-arrow { width: 56px; height: 48px; }
}
body.breakdance .beau-icon-arrow:hover,
.beau-icon-arrow:hover { background: hsl(var(--beau-sand)); box-shadow: var(--beau-shadow-soft); }
body.breakdance .beau-icon-arrow:active,
.beau-icon-arrow:active { transform: scale(0.96); }
body.breakdance .beau-icon-arrow.is-disabled,
body.breakdance .beau-icon-arrow[disabled],
.beau-icon-arrow.is-disabled,
.beau-icon-arrow[disabled] {
	background: hsl(var(--beau-sand) / 0.35);
	color: hsl(var(--beau-espresso) / 0.2);
	pointer-events: none;
	box-shadow: none;
}
.beau-icon-arrow svg {
	width: 16px; height: 16px;
	stroke: currentColor; fill: none; stroke-width: 1.5;
	transition: transform .45s var(--beau-ease-out), opacity .25s ease;
}
.beau-icon-arrow--right:hover svg { animation: beau-arrow-right .6s var(--beau-ease-out); }
.beau-icon-arrow--left:hover svg  { animation: beau-arrow-left  .6s var(--beau-ease-out); }
@keyframes beau-arrow-right {
	0%   { transform: translateX(0);     opacity: 1; }
	45%  { transform: translateX(140%);  opacity: 0; }
	46%  { transform: translateX(-140%); opacity: 0; }
	100% { transform: translateX(0);     opacity: 1; }
}
@keyframes beau-arrow-left {
	0%   { transform: translateX(0);     opacity: 1; }
	45%  { transform: translateX(-140%); opacity: 0; }
	46%  { transform: translateX(140%);  opacity: 0; }
	100% { transform: translateX(0);     opacity: 1; }
}

/* ========================================================================
   Animated underline link
   ======================================================================== */

.beau-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
}
.beau-link::after {
	content: "";
	position: absolute;
	left: 0; bottom: -2px;
	height: 1px; width: 100%;
	background: currentColor;
	transform-origin: right;
	transform: scaleX(0);
	transition: transform .45s var(--beau-ease-out);
}
.beau-link:hover::after { transform-origin: left; transform: scaleX(1); }

/* ========================================================================
   Image hover zoom
   ======================================================================== */

.beau-img-zoom { transition: transform .9s var(--beau-ease-out); }
.beau-img-zoom-parent:hover .beau-img-zoom,
.beau-img-zoom-parent:focus-within .beau-img-zoom { transform: scale(1.06); }

/* ========================================================================
   Card lift
   ======================================================================== */

.beau-lift {
	transition: transform .5s var(--beau-ease-out), box-shadow .5s var(--beau-ease-out);
	will-change: transform;
}
.beau-lift:hover { transform: translateY(-6px); box-shadow: var(--beau-shadow-soft); }

/* ========================================================================
   Toast — confirmation popup (auto-dismiss after ~5s).
   Used by ContactBody after the form submit redirect lands.
   ======================================================================== */

.beau-toast {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 9999;
	max-width: 22rem;
	background: hsl(var(--beau-espresso));
	color: hsl(var(--beau-cream));
	padding: 1rem 1.25rem;
	border-radius: 0.75rem;
	box-shadow: var(--beau-shadow-soft, 0 10px 30px rgba(0,0,0,.25));
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .35s var(--beau-ease-out), transform .35s var(--beau-ease-out);
	pointer-events: auto;
}
.beau-toast.is-visible { opacity: 1; transform: translateY(0); }
.beau-toast--error { background: hsl(0 65% 35%); }
.beau-toast__title {
	margin: 0 0 .25rem;
	font-family: var(--beau-font-secondary);
	font-size: .8125rem;
	letter-spacing: .18em;
	text-transform: uppercase;
}
.beau-toast__body {
	margin: 0;
	font-size: .875rem;
	line-height: 1.45;
	color: hsl(var(--beau-cream) / .85);
}

/* ========================================================================
   Reveal-on-scroll (driven by /assets/js/scroll-reveal.js)
   ======================================================================== */

.beau-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .8s var(--beau-ease-out), transform .8s var(--beau-ease-out);
}
.beau-reveal.is-visible { opacity: 1; transform: translateY(0); }
.beau-reveal--left  { transform: translate(-32px, 0); }
.beau-reveal--right { transform: translate(32px, 0); }
.beau-reveal--scale { transform: scale(0.96); }
.beau-reveal--left.is-visible,
.beau-reveal--right.is-visible { transform: translate(0, 0); }
.beau-reveal--scale.is-visible { transform: scale(1); }
.beau-reveal--delay-1 { transition-delay: 80ms; }
.beau-reveal--delay-2 { transition-delay: 160ms; }
.beau-reveal--delay-3 { transition-delay: 240ms; }
.beau-reveal--delay-4 { transition-delay: 320ms; }
.beau-reveal--delay-5 { transition-delay: 400ms; }

/* Blur-reveal — text comes into focus as it enters the viewport */
.beau-reveal--blur {
	opacity: 0;
	filter: blur(10px);
	transform: translateY(16px);
	transition:
		opacity 1s var(--beau-ease-out),
		filter 1.1s var(--beau-ease-out),
		transform 1s var(--beau-ease-out);
}
.beau-reveal--blur.is-visible {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0);
}

/* ========================================================================
   Slow-zoom (Hero background animation)
   ======================================================================== */

@keyframes beau-slow-zoom {
	0%   { transform: scale(1.06); }
	100% { transform: scale(1.0); }
}
.beau-slow-zoom { animation: beau-slow-zoom 14s var(--beau-ease-out) forwards; }

/* ========================================================================
   Skeleton shimmer — animated loading placeholder for images/media
   Same warm sand→champagne→taupe gradient that already shipped as a static
   placeholder, just slowly drifting so it reads as "loading" without a
   spinning icon. Subtle on purpose — content sits over it briefly.
   ======================================================================== */

@keyframes beau-shimmer {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
.beau-skeleton-shimmer {
	background-image: linear-gradient(
		135deg,
		hsl(var(--beau-sand)) 0%,
		hsl(var(--beau-champagne)) 50%,
		hsl(var(--beau-taupe)) 100%
	);
	background-size: 220% 220%;
	animation: beau-shimmer 3s ease-in-out infinite;
}

/* ========================================================================
   Reduced-motion accessibility
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
	/* The `body.breakdance` prefix lifts these to (0,2,1), out-specifying the
	   base + `.is-visible` + `:hover` rules that set the animations — so the
	   motion is killed on specificity, no !important. */
	/* `.beau-reveal--blur` is intentionally excluded — the brand's blur-in
	   reveal is a slow, gentle focus shift the design wants kept even with OS
	   "reduce motion" on (same call as the image zoom). */
	body.breakdance .beau-reveal:not(.beau-reveal--blur),
	body.breakdance .beau-lift,
	body.breakdance .beau-slow-zoom {
		animation: none;
		transition: none;
		transform: none;
		opacity: 1;
	}
	body.breakdance .beau-skeleton-shimmer {
		animation: none;
	}
	/* (0,2,2) beats the (0,2,1) `.beau-icon-arrow--right:hover svg` rule. */
	body.breakdance .beau-icon-arrow svg {
		animation: none;
		transition: none;
	}
	/* NOTE: the hover image zoom (`.beau-img-zoom`) is intentionally NOT
	   disabled here. It is a slow (.9s), gentle 6% scale — not vestibular-
	   triggering — and the design calls for it to stay smooth even with OS
	   "reduce motion" on, matching the product-card hover. Killing its
	   transform/transition here previously made the effect vanish. */
}

/* ========================================================================
   Critical overrides — these must work even when Breakdance CSS cache is
   stale. Anything here mirrors element default.css but loads fresh via
   the version-busted tokens.css URL.
   ======================================================================== */

/* Nav chip border-radius & border — 0.625rem = Lovable's rounded-md */
.beau-nav__chip     { border-radius: 0.625rem; border: 1px solid hsl(var(--beau-cream) / 0.4); }
.beau-nav__icon-btn { border-radius: 0.625rem; }
.beau-nav__cta      { border-radius: 0.625rem; }
.beau-nav__theme    { border-radius: 0.625rem; }
.beau-nav.is-scrolled .beau-nav__chip { border-color: hsl(var(--beau-foreground) / 0.25); }


/* ========================================================================
   Mega menu — critical structural + visual CSS.
   The JS handles opacity/pointer-events via inline style so the menu opens
   correctly regardless of cache. These rules style the panel itself.
   ======================================================================== */

.beau-mega__backdrop {
	position: absolute;
	inset: 0;
	background: hsl(var(--beau-espresso) / 0.92);
	backdrop-filter: blur(4px);
	border: none;
	cursor: pointer;
	width: 100%;
}
.beau-mega__panel {
	position: absolute;
	inset: 0.75rem;
	background: hsl(var(--beau-sand));
	color: hsl(var(--beau-espresso));
	border-radius: 1.5rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transform: translateX(110%);
	transition: transform 0.5s var(--beau-ease-out);
}
.beau-mega.is-open .beau-mega__panel { transform: translateX(0); }
@media (min-width: 1024px) {
	.beau-mega__panel { inset: 1.5rem; border-radius: 2rem; }
}

/* Footer newsletter button — espresso bg, champagne text (overrides .beau-btn--primary) */
body.breakdance button.beau-footer__newsletter-btn,
.beau-footer__newsletter-btn {
	background: hsl(var(--beau-espresso));
	color: hsl(var(--beau-champagne));
	white-space: nowrap;
}
.beau-footer__newsletter-btn:hover {
	background: hsl(var(--beau-espresso-soft));
}

/* ========================================================================
   Body defaults — only when Breakdance theme is loaded so we don't fight
   other themes
   ======================================================================== */

body.breakdance {
	font-family: var(--beau-font-body);
	color: hsl(var(--beau-foreground));
	background: hsl(var(--beau-background));
	margin: 0;
	padding: 0;
}
body.breakdance h1,
body.breakdance h2,
body.breakdance h3,
body.breakdance h4,
body.breakdance h5,
body.breakdance h6 {
	font-family: var(--beau-font-display);
	font-weight: 500;          /* Playfair Display lightest available weight */
	letter-spacing: 0.04em;
}
body.breakdance ::selection {
	background-color: hsl(var(--beau-accent) / 0.4);
}

/* ========================================================================
   StyleCompare — re-assertion of the drag-slider's critical layout.
   tokens.css always loads fresh (filemtime cache-bust) while the element's
   compiled CSS may lag a regen. The `body.breakdance` prefix gives these
   rules specificity (0,2,0), which out-specifies the element's plain (0,1,0)
   rules — so the re-assertion wins on specificity, no !important needed.
   ======================================================================== */

/* Viewport — match Lovable exactly (rounded-tl-3xl rounded-br-3xl = 1.5rem) */
body.breakdance .beau-compare__viewport {
	border-radius: 1.5rem 0 1.5rem 0;
	overflow: hidden;
	cursor: ew-resize;
}

/* Labels — z-index so they sit above the absolute-positioned images */
body.breakdance .beau-compare__label {
	position: absolute;
	top: 1.25rem;
	z-index: 10;
	pointer-events: none;
	padding: 0.375rem 0.75rem;
	font-family: var(--beau-font-secondary);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	border-radius: 0.5rem;
	line-height: 1.4;
}
body.breakdance .beau-compare__label--left {
	left: 1.25rem;
	background: hsl(var(--beau-espresso) / 0.70);
	color: hsl(var(--beau-cream));
}
body.breakdance .beau-compare__label--right {
	right: 1.25rem;
	background: hsl(var(--beau-cream) / 0.80);
	color: hsl(var(--beau-espresso));
}

/* Handle (divider line) + knob */
body.breakdance .beau-compare__handle {
	z-index: 5;
	width: 1px;
	background: hsl(var(--beau-cream));
}
body.breakdance .beau-compare__knob {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 999px;
	background: hsl(var(--beau-cream));
	color: hsl(var(--beau-espresso));
}

/* ========================================================================
   GLOBAL OVERRIDE — kill BD's default link blue color across all our
   elements. Specificity (0,2,1) beats BD's `body.breakdance a` (0,1,1).
   Color inherits from the nearest scoped element rule (e.g. .beau-nav__chip
   sets cream → its <a> children inherit cream, not the BD blue default).
   ======================================================================== */
body.breakdance [class^="beau-"] a,
body.breakdance [class*=" beau-"] a,
body.breakdance a[class^="beau-"],
body.breakdance a[class*=" beau-"] {
	color: inherit;
}


/* ========================================================================
   Wishlist empty state — centering override (tokens.css always loads;
   Breakdance compiled cache may be stale so we force these rules here)
   ======================================================================== */
.beau-wishlist-empty {
	width: 100%;
	padding: 6rem 0;
	background: hsl(var(--beau-background));
	text-align: center;
}
body .beau-wishlist-empty__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	max-width: 36rem;
	margin-inline: auto;
	padding-inline: 1.5rem;
}
body .beau-wishlist-empty__icon {
	display: block;
	width: 2.75rem;
	height: 2.75rem;
	color: hsl(var(--beau-foreground) / 0.28);
	margin: 0 auto 1.5rem;
	flex-shrink: 0;
}
body .beau-wishlist-empty__text {
	color: hsl(var(--beau-foreground) / 0.6);
	font-size: 1rem;
	line-height: 1.65;
	margin: 0;
}

/* ── Scrollbar gutter — prevents layout shift when popup opens ─────────────
   Breakdance adds overflow:hidden to body when popup opens; reserving the
   scrollbar track keeps layout stable. */
html { scrollbar-gutter: stable; }

/* ── FloatingActions — globally loaded so it works on every page ───────────
   The element's default.css is Breakdance-compiled (per-page). By also
   declaring the styles here we guarantee the FAB renders on pages whose
   Breakdance CSS cache was cleared after the popup was created. */
.beau-fab {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 9990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75rem;
	transition: opacity .5s var(--beau-ease-out, ease), transform .5s var(--beau-ease-out, ease);
	opacity: 0;
	transform: translateY(1rem);
	pointer-events: none;
}
@media (min-width: 1024px) { .beau-fab { right: 1.75rem; bottom: 1.75rem; } }
.beau-fab.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.beau-fab__bar {
	display: inline-flex; align-items: stretch;
	background: hsl(var(--beau-foreground) / 0.95);
	color: hsl(var(--beau-background));
	backdrop-filter: blur(12px);
	border-radius: 1rem 0 1rem 0;
	padding: 0.375rem;
	box-shadow: 0 10px 30px -10px hsl(var(--beau-foreground) / 0.45);
}
.beau-fab__sep { width: 1px; align-self: center; height: 1.25rem; background: hsl(var(--beau-background) / 0.15); flex-shrink: 0; }
body.breakdance a.beau-fab__btn, .beau-fab__btn {
	display: inline-flex; align-items: center; gap: 0.5rem;
	padding: 0.625rem 0.875rem;
	font-family: var(--beau-font-secondary, sans-serif);
	font-size: 11px; line-height: 1; letter-spacing: 0.28em; text-transform: uppercase;
	color: hsl(var(--beau-cream)); text-decoration: none;
	border-radius: 0.625rem;
	transition: background-color .25s, color .25s;
}
.beau-fab__btn:hover { background: hsl(var(--beau-background) / 0.08); color: hsl(var(--beau-accent)); }
.beau-fab__btn svg { width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 480px) { .beau-fab__btn span { display: none; } .beau-fab__btn { padding: 0.5rem; } .beau-fab__sep { height: 1rem; } }
.beau-fab__top {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; background: transparent; border: none; padding: 0; cursor: pointer;
}
.beau-fab__top-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.beau-fab__top-circle {
	position: relative; z-index: 1;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 999px;
	background: hsl(var(--beau-foreground)); color: hsl(var(--beau-background));
	box-shadow: 0 8px 24px -10px hsl(var(--beau-foreground) / 0.5);
	transition: transform .2s;
}
.beau-fab__top:hover .beau-fab__top-circle { transform: scale(1.05); }
.beau-fab__top:active .beau-fab__top-circle { transform: scale(0.95); }
.beau-fab__top-arrow { color: hsl(var(--beau-background)); }

/* ========================================================================
   Button text-color REASSERTION — must stay LAST.
   Why: `body.breakdance [class^="beau-"] a { color: inherit }` above has
   specificity (0,2,2), same as `body.breakdance a.beau-btn--primary` — source
   order decides, and the inherit rule wins (= button text picks up cream from
   .beau-hero ancestor). Re-declaring color AFTER the inherit rule fixes it
   without !important.
   ======================================================================== */
body.breakdance a.beau-btn--primary,
body.breakdance button.beau-btn--primary,
body.breakdance a.beau-btn--gold,
body.breakdance button.beau-btn--gold,
body.breakdance a.beau-btn--sand,
body.breakdance button.beau-btn--sand,
body.breakdance a.beau-btn--champagne-sand,
body.breakdance button.beau-btn--champagne-sand { color: hsl(var(--beau-espresso)); }

body.breakdance a.beau-btn--espresso,
body.breakdance button.beau-btn--espresso { color: hsl(var(--beau-cream)); }

body.breakdance a.beau-btn--outline-cream,
body.breakdance button.beau-btn--outline-cream { color: hsl(var(--beau-cream)); }

body.breakdance a.beau-btn--ghost,
body.breakdance button.beau-btn--ghost { color: hsl(var(--beau-foreground)); }

body.breakdance a.beau-btn--gold:hover,
body.breakdance button.beau-btn--gold:hover { color: hsl(var(--beau-cream)); }

/* ========================================================================
   "Maak een afspraak" modal — global Breely booking dialog.
   Rendered once in wp_footer (includes/afspraak-modal.php); opened from any
   "Maak een afspraak" / PIA CTA by assets/js/home-interactions.js. Uses a
   native <dialog> so it lives in the browser top layer (no z-index fights)
   and gets ESC-to-close + focus trapping for free.
   ======================================================================== */
.beau-afspraak {
	width: min(720px, 94vw);
	max-width: 94vw;
	max-height: 90vh;
	padding: 0;
	border: none;
	border-radius: var(--beau-r-lg);
	background: hsl(var(--beau-popover));
	color: hsl(var(--beau-popover-foreground));
	box-shadow: var(--beau-shadow-elegant);
	overflow: hidden;
}
.beau-afspraak::backdrop {
	background: hsl(var(--beau-espresso) / 0.55);
	backdrop-filter: blur(2px);
}
.beau-afspraak[open] {
	display: flex;
	flex-direction: column;
}
.beau-afspraak__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-shrink: 0;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid hsl(var(--beau-border));
}
.beau-afspraak__title {
	font-family: var(--beau-font-display);
	font-size: 1.125rem;
	font-weight: 500;
	color: hsl(var(--beau-foreground));
}
.beau-afspraak__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	padding: 0;
	border: 1px solid hsl(var(--beau-border));
	border-radius: var(--beau-r-pill);
	background: transparent;
	color: hsl(var(--beau-foreground) / 0.7);
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.beau-afspraak__close:hover {
	background: hsl(var(--beau-foreground) / 0.06);
	color: hsl(var(--beau-foreground));
	border-color: hsl(var(--beau-foreground) / 0.35);
}
.beau-afspraak__close svg { width: 1rem; height: 1rem; }
.beau-afspraak__body {
	position: relative;
	flex: 1 1 auto;
	min-height: 60vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
/* Firefox only: thin, brand-colored scrollbar. MUST stay inside the -moz
   guard - in Chromium, setting the standard scrollbar-width/scrollbar-color
   properties makes the browser IGNORE ::-webkit-scrollbar styling and keep
   the invisible overlay bar. */
@supports (-moz-appearance: none) {
	.beau-afspraak__body {
		scrollbar-width: thin;
		scrollbar-color: hsl(var(--beau-taupe)) hsl(var(--beau-muted) / 0.6);
	}
}
/* Chromium/WebKit: styling ::-webkit-scrollbar opts out of the overlay
   scrollbar, so the bar is ALWAYS visible - the booking widget is taller
   than the modal and users had no cue that it scrolls. */
.beau-afspraak__body::-webkit-scrollbar {
	width: 10px;
}
.beau-afspraak__body::-webkit-scrollbar-track {
	background: hsl(var(--beau-muted) / 0.6);
}
.beau-afspraak__body::-webkit-scrollbar-thumb {
	background: hsl(var(--beau-taupe));
	border-radius: 999px;
	border: 2px solid hsl(var(--beau-popover));
}
.beau-afspraak__body::-webkit-scrollbar-thumb:hover {
	background: hsl(var(--beau-brass));
}
.beau-afspraak__body .breely-inline {
	width: 100%;
	min-height: 60vh;
}
.beau-afspraak__body .breely-inline iframe {
	display: block;
	width: 100%;
	border: 0;
}
/* Loader — covers the body until the Breely widget paints its first node. */
.beau-afspraak__loader {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: hsl(var(--beau-popover));
}
.beau-afspraak__spinner {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 2px solid hsl(var(--beau-foreground) / 0.15);
	border-top-color: hsl(var(--beau-accent));
	animation: beau-afspraak-spin 0.7s linear infinite;
}
@keyframes beau-afspraak-spin { to { transform: rotate(360deg); } }

/* Lock background scroll while the dialog is open. */
html.beau-afspraak-lock { overflow: hidden; }

@media (max-width: 600px) {
	.beau-afspraak {
		width: 100vw;
		max-width: 100vw;
		height: 100vh;
		max-height: 100vh;
		border-radius: 0;
	}
	/* Honor iOS notch / dynamic island — push the head down so the title +
	   close button don't sit under the system status bar. */
	.beau-afspraak__head {
		padding-top: calc(1rem + env(safe-area-inset-top));
	}
	.beau-afspraak__body {
		padding-bottom: env(safe-area-inset-bottom);
	}
}

/* BD popup — match the .beau-afspraak <dialog> reference verbatim.
   Same width, radius, surface, shadow as the .beau-afspraak block above;
   header bar + close × use the existing .beau-afspraak__head/__close CSS
   when the popup content contains those classnames. */
body.breakdance .bde-popup {
	background: hsl(var(--beau-espresso) / 0.55);
	backdrop-filter: blur(2px);
	z-index: 9999;
}
body.breakdance .bde-popup .breakdance-popup {
	width: min(720px, 94vw);
	max-width: 94vw;
	max-height: 90vh;
	background: hsl(var(--beau-popover));
	color: hsl(var(--beau-popover-foreground));
	border: none;
	border-radius: var(--beau-r-lg);
	box-shadow: 0 24px 60px hsl(var(--beau-espresso) / 0.25);
	overflow: hidden;
}
body.breakdance .bde-popup .breakdance-popup-content {
	background: hsl(var(--beau-popover));
	color: hsl(var(--beau-popover-foreground));
	padding: 0;
	max-height: 90vh;
	overflow: hidden;
	align-items: stretch;
	display: flex;
	flex-direction: column;
}
body.breakdance .bde-popup .bde-code-block {
	width: 100%;
	max-width: 100%;
	align-items: stretch;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	/* The popup content wrapper is overflow:hidden (keeps the radius clip and
	   the injected header bar fixed), so THIS is the scroll region - without
	   it, widgets taller than 90vh (Breely booking form) were simply clipped
	   with no way to scroll. */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
/* Firefox-only scrollbar styling - see the .beau-afspraak__body note: the
   standard properties would disable ::-webkit-scrollbar in Chromium. */
@supports (-moz-appearance: none) {
	body.breakdance .bde-popup .bde-code-block {
		scrollbar-width: thin;
		scrollbar-color: hsl(var(--beau-taupe)) hsl(var(--beau-muted) / 0.6);
	}
}
/* Children must keep their natural height inside the scrolling flex column -
   default flex-shrink would squash the booking iframe to fit instead of
   letting it overflow and scroll. */
body.breakdance .bde-popup .bde-code-block > * {
	flex-shrink: 0;
}
body.breakdance .bde-popup .bde-code-block::-webkit-scrollbar {
	width: 10px;
}
body.breakdance .bde-popup .bde-code-block::-webkit-scrollbar-track {
	background: hsl(var(--beau-muted) / 0.6);
}
body.breakdance .bde-popup .bde-code-block::-webkit-scrollbar-thumb {
	background: hsl(var(--beau-taupe));
	border-radius: 999px;
	border: 2px solid hsl(var(--beau-popover));
}
body.breakdance .bde-popup .bde-code-block::-webkit-scrollbar-thumb:hover {
	background: hsl(var(--beau-brass));
}
/* Hide BD's native close button — our header puts a .beau-afspraak__close
   inside, which carries the right styling. */
body.breakdance .bde-popup .breakdance-popup .breakdance-popup-close-button {
	display: none;
}
@media (max-width: 600px) {
	body.breakdance .bde-popup .breakdance-popup {
		width: 100vw;
		max-width: 100vw;
		height: 100vh;
		max-height: 100vh;
		border-radius: 0;
	}
}