/* Bebelune design — hand-ported from the Lovable (Tailwind) pages: same spacing, radii, colours, type scale.
   Tokens (--background, --primary, ...) and .btn-cta/.btn-ghost/.field come from the bebelune-store plugin CSS. */

*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0; background-color: var(--background); color: var(--foreground); font-family: var(--font-sans);
	font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); }
img { max-width: 100%; height: auto; }
a { color: inherit; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bb-skip:focus { clip: auto; width: auto; height: auto; z-index: 100; background: var(--card); padding: .75rem 1rem; top: .5rem; inset-inline-start: .5rem; border-radius: 999px; }
.bb-page { min-height: 100vh; overflow-x: clip; }
.bb-main { display: block; }
@media (min-width: 1024px) { body.bbl-has-bar { padding-bottom: 0; } }

/* ---------- announcement + header ---------- */
.bb-announce { background: var(--secondary); padding: .5rem 1rem; text-align: center; font-size: .875rem; line-height: 1.25rem; font-weight: 700; }
.bb-header { position: sticky; top: 0; z-index: 40; background: transparent; transition: background-color .2s, box-shadow .2s, -webkit-backdrop-filter .2s, backdrop-filter .2s; }
.admin-bar .bb-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .bb-header { top: 46px; } }
.bb-header.is-scrolled { background: color-mix(in oklab, var(--card) 90%, transparent); box-shadow: var(--shadow-soft); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bb-header__in { position: relative; display: flex; align-items: center; justify-content: space-between; max-width: 72rem; margin-inline: auto; padding: .75rem 1rem; }
.bb-brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.bb-brand__logo { width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--card); object-fit: contain; box-shadow: var(--shadow-soft); }
.bb-brand__name { font-family: var(--font-display); font-size: 1.5rem; line-height: 2rem; font-weight: 900; color: var(--primary); }
.bb-nav { display: none; gap: 1.5rem; font-size: .875rem; line-height: 1.25rem; font-weight: 700; }
.bb-nav a { text-decoration: none; padding-block: .25rem; }
.bb-nav a:hover { color: var(--primary); }
@media (min-width: 768px) { .bb-nav { display: flex; } }
.bb-header__act { display: flex; align-items: center; gap: .5rem; }
.bb-header__cta { padding: .625rem 1.25rem; font-size: .875rem; }
.bb-burger { display: grid; place-content: center; gap: 5px; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 999px; background: var(--secondary); cursor: pointer; }
.bb-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--foreground); transition: transform .2s, opacity .2s; }
.bb-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bb-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bb-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 768px) { .bb-burger { display: none; } }
@media (max-width: 767.98px) {
	.bb-nav { position: absolute; top: 100%; inset-inline: .75rem; flex-direction: column; gap: 0; background: var(--card); border-radius: var(--r-2xl); box-shadow: var(--shadow-soft); padding: .5rem; }
	.bb-nav.is-open { display: flex; }
	.bb-nav a { padding: .85rem 1rem; border-radius: var(--r-xl); font-size: 1rem; }
	.bb-nav a:hover { background: var(--secondary); }
}

/* ---------- Elementor neutralisation (so Elementor defaults never change the design) ---------- */
.bb-page .e-con, .bb-page .e-con > .e-con-inner {
	--padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
	--gap: 0px; --row-gap: 0px; --column-gap: 0px; --margin-top: 0px; --margin-bottom: 0px; --min-height: 0px;
}
.bb-page .elementor-widget:not(:last-child) { margin-block-end: 0; }
.bb-page .elementor-widget-container { margin: 0; }
.bb-page .elementor-heading-title, .bb-page .elementor-widget-text-editor, .bb-page .elementor-widget-text-editor p { font-family: inherit; color: inherit; }
.bb-page .elementor-widget-text-editor { color: inherit; font-size: inherit; line-height: inherit; }
.bb-page .elementor-widget-text-editor p { margin: 0; }
.bb-page .elementor-widget-image img { display: block; }
.bb-page .e-con { width: 100%; }
.elementor-editor-active .bb-header { position: static; }

/* ---------- shared section scaffolding ---------- */
.bb-page .e-con.bb-section, .bb-section { scroll-margin-top: 5rem; padding: 3.5rem 1rem; }
.bb-page .e-con.bb-tint, .bb-tint { background: color-mix(in oklab, var(--secondary) 40%, transparent); }
.bb-page .e-con.bb-wrap, .bb-wrap { max-width: 72rem; margin-inline: auto; width: 100%; }
.bb-prose { max-width: 48rem; padding: 2rem 1rem; margin-inline: auto; }
.bb-h2, .bb-h2.elementor-widget { margin-bottom: 2rem; }
.bb-h2 .elementor-heading-title, h2.bb-h2 { margin: 0; text-align: center; font-size: 1.875rem; line-height: 2.25rem; font-weight: 900; color: var(--foreground); }
h2.bb-h2 { margin-bottom: 2rem; }
.bb-checkout { scroll-margin-top: 5rem; background: var(--gradient-soft); padding: 3.5rem 1rem; }
.bb-page .e-con.bb-checkout { background: var(--gradient-soft); padding: 3.5rem 1rem; }
.bb-checkout > .bb-h2, .bb-checkout .bb-h2 { margin-bottom: 0; }
.bb-img img { width: 100%; border-radius: var(--r-3xl); box-shadow: var(--shadow-soft); }
.bb-img--card img { background: var(--card); }
.bb-img--contain img { object-fit: contain; }
.bb-img--flat img { box-shadow: none; }
.bb-muted, .bb-muted p { color: var(--muted-foreground); }
.bb-small, .bb-small p { font-size: .875rem; line-height: 1.25rem; }
.bb-grid { display: grid; gap: 1.5rem; }
.bb-page .e-con.bb-grid { --display: grid; display: grid; align-items: center; }
.bb-page .e-con.bb-grid--top { align-items: start; }

/* ---------- hero ---------- */
.bb-hero, .bb-page .e-con.bb-hero { background: var(--gradient-soft); }
.bb-page .e-con.bb-hero__grid { --display: grid; display: grid; align-items: center; gap: 2rem; max-width: 72rem; margin-inline: auto; padding: 2rem 1rem; }
@media (min-width: 1024px) { .bb-page .e-con.bb-hero__grid { grid-template-columns: 1fr 1fr; padding-block: 4rem; } }
.bb-page .e-con.bb-hero__text { order: 2; display: block; --display: block; animation: bbFadeUp .7s ease both; }
.bb-page .bb-hero__img { order: 1; animation: bbFadeUp .7s ease both; }
@media (min-width: 1024px) { .bb-page .e-con.bb-hero__text { order: 1; } .bb-page .bb-hero__img { order: 2; } }
.bb-badge .elementor-widget-container p { display: inline-block; margin: 0; border-radius: 999px; background: var(--card); padding: .375rem 1rem; font-size: .875rem; line-height: 1.25rem; font-weight: 700; color: var(--primary); box-shadow: var(--shadow-soft); }
.bb-hero__h1 { margin-top: 1rem; }
.bb-hero__h1 .elementor-heading-title { margin: 0; font-size: 2.25rem; line-height: 1.25; font-weight: 900; }
@media (min-width: 640px) { .bb-hero__h1 .elementor-heading-title { font-size: 3rem; } }
.bb-hero__p { margin-top: 1rem; font-size: 1.125rem; line-height: 1.625; color: var(--muted-foreground); }
.bb-hero__p p { color: var(--muted-foreground); }
.bb-chips { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.bb-chips span { border-radius: 999px; background: var(--card); padding: .375rem .75rem; font-size: .875rem; line-height: 1.25rem; font-weight: 700; }
.bb-hero__price { margin-top: 1.5rem; }
.bb-page .e-con.bb-hero__btns { --display: flex; display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.bb-page .elementor-widget-button.bb-cta .elementor-button, .bb-cta .elementor-button {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--gradient-cta); color: var(--primary-foreground);
	font-family: inherit; font-weight: 800; border-radius: 999px; padding: .95rem 1.75rem; font-size: 1.125rem; line-height: 1.5; box-shadow: var(--shadow-cta); transition: transform .2s, filter .2s; fill: currentColor;
}
.bb-cta .elementor-button:hover { transform: translateY(-2px); filter: brightness(1.05); color: var(--primary-foreground); background: var(--gradient-cta); }
.bb-page .elementor-widget-button.bb-ghost .elementor-button, .bb-ghost .elementor-button {
	display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--primary); color: var(--primary); font-family: inherit; font-weight: 700;
	border-radius: 999px; padding: .85rem 1.5rem; background: var(--card); font-size: 1rem; line-height: 1.5; transition: background .2s;
}
.bb-ghost .elementor-button:hover { background: var(--secondary); color: var(--primary); }
.bb-trust { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; text-align: center; font-size: .75rem; line-height: 1rem; font-weight: 700; }
@media (min-width: 640px) { .bb-trust { font-size: .875rem; line-height: 1.25rem; } }
.bb-trust div { display: flex; flex-direction: column; align-items: center; gap: .25rem; border-radius: var(--r-2xl); background: var(--card); padding: .75rem; color: var(--primary); box-shadow: var(--shadow-soft); }
.bb-trust span { color: var(--foreground); }
.bb-hero__img img { border-radius: var(--r-3xl); box-shadow: var(--shadow-soft); width: 100%; }

/* ---------- gallery ---------- */
.bb-gallery { max-width: 48rem; margin-inline: auto; }
.bb-gallery__main { border-radius: var(--r-3xl); background: var(--card); box-shadow: var(--shadow-soft); overflow: hidden; }
.bb-gallery__img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.bb-gallery__thumbs { margin-top: .75rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
@media (min-width: 640px) { .bb-gallery__thumbs { grid-template-columns: repeat(8, 1fr); } }
.bb-thumb { overflow: hidden; border-radius: var(--r-xl); border: 2px solid transparent; padding: 0; background: none; cursor: pointer; }
.bb-thumb.is-active { border-color: var(--primary); }
.bb-thumb:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.bb-thumb img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

/* ---------- benefits (Elementor icon-box) ---------- */
.bb-page .e-con.bb-cards4 { --display: grid; display: grid; gap: 1rem; align-items: stretch; }
@media (min-width: 640px) { .bb-page .e-con.bb-cards4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bb-page .e-con.bb-cards4 { grid-template-columns: repeat(4, 1fr); } }
.bb-benefit { border-radius: var(--r-3xl); background: var(--card); padding: 1.5rem; box-shadow: var(--shadow-soft); height: 100%; }
.bb-benefit .elementor-icon-box-wrapper { display: block; text-align: right; }
.bb-benefit .elementor-icon-box-icon { margin: 0 !important; display: block; }
.bb-benefit .elementor-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-2xl); background: var(--secondary); color: var(--primary); font-size: 1.5rem; }
.bb-benefit .elementor-icon i, .bb-benefit .elementor-icon svg { font-size: 1.5rem; width: 1.5rem; height: 1.5rem; color: var(--primary); fill: var(--primary); }
.bb-benefit .elementor-icon-box-content { margin-top: 1rem; }
.bb-benefit .elementor-icon-box-title { margin: 0; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.75rem; font-weight: 900; color: var(--foreground); }
.bb-benefit .elementor-icon-box-title span, .bb-benefit .elementor-icon-box-title a { color: inherit; }
.bb-benefit .elementor-icon-box-description { margin: .5rem 0 0; color: var(--muted-foreground); font-size: 1rem; line-height: 1.5; }

/* ---------- comparison ---------- */
.bb-page .e-con.bb-stack { --display: flex; display: flex; flex-direction: column; gap: 1rem; }
.bb-cmp { border-radius: var(--r-3xl); border: 2px solid var(--border); background: var(--card); padding: 1.5rem; }
.bb-cmp--on { border-color: var(--primary); background: color-mix(in oklab, var(--secondary) 60%, transparent); }
.bb-cmp .bb-cmp__k, .bb-cmp__k { font-size: .875rem; line-height: 1.25rem; font-weight: 700; color: var(--muted-foreground); }
.bb-cmp--on .bb-cmp__k { color: var(--primary); }
.bb-cmp__v { margin-top: .25rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; }
.bb-cmp__v p { margin: 0; }

/* ---------- details / features / dimensions / fabric ---------- */
.bb-page .e-con.bb-feats { --display: grid; display: grid; gap: .75rem; align-content: start; list-style: none; }
@media (min-width: 640px) { .bb-page .e-con.bb-feats { grid-template-columns: repeat(2, 1fr); } }
.bb-feat { border-radius: var(--r-2xl); background: var(--card); padding: 1rem; box-shadow: var(--shadow-soft); }
.bb-feat__t .elementor-heading-title { margin: 0; font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; font-weight: 900; color: var(--primary); }
.bb-feat__d { font-size: .875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.bb-feat__d p { color: var(--muted-foreground); }
.bb-page .e-con.bb-dims { --display: grid; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; text-align: center; }
.bb-dim { border-radius: var(--r-2xl); background: var(--card); padding: 1rem; box-shadow: var(--shadow-soft); }
.bb-dim__v .elementor-heading-title { margin: 0; direction: ltr; font-family: var(--font-sans); font-size: 1.25rem; line-height: 1.75rem; font-weight: 900; color: var(--primary); }
.bb-dim__k { margin-top: .25rem; font-size: .875rem; line-height: 1.25rem; font-weight: 700; }
.bb-img--top { margin-top: 1rem; }
.bb-note { margin-top: .75rem; font-size: .875rem; color: var(--muted-foreground); }
.bb-page .e-con.bb-figs { --display: grid; display: grid; gap: 1rem; }
@media (min-width: 640px) { .bb-page .e-con.bb-figs { grid-template-columns: repeat(3, 1fr); } }
.bb-fig { overflow: hidden; border-radius: var(--r-3xl); background: var(--card); box-shadow: var(--shadow-soft); }
.bb-fig img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0 !important; box-shadow: none !important; }
.bb-fig__cap { padding: 1rem; text-align: center; font-weight: 700; }

/* ---------- how to ---------- */
.bb-page .e-con.bb-steps { --display: flex; display: flex; flex-direction: column; gap: .75rem; counter-reset: bbstep; }
.bb-page .e-con.bb-step { --display: flex; display: flex; align-items: flex-start; gap: .75rem; border-radius: var(--r-2xl); background: var(--card); padding: 1rem; box-shadow: var(--shadow-soft); counter-increment: bbstep; }
.bb-step::before { content: counter(bbstep); flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-weight: 900; }
.bb-step__t { padding-top: .25rem; font-weight: 700; }

/* ---------- lifestyle strip ---------- */
.bb-page .e-con.bb-strip { --display: flex; display: flex; flex-direction: row; gap: 1rem; overflow-x: auto; padding-bottom: .75rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.bb-page .bb-strip .elementor-widget { flex: none; width: 18rem; scroll-snap-align: center; }
@media (min-width: 640px) { .bb-page .bb-strip .elementor-widget { width: 20rem; } }

/* ---------- reviews ---------- */
.bb-reviews-empty { max-width: 36rem; margin-inline: auto; border-radius: var(--r-3xl); background: var(--card); padding: 2rem; text-align: center; box-shadow: var(--shadow-soft); }
.bb-reviews-empty__t { margin: 0; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; }
.bb-reviews-empty__d { margin: .5rem 0 0; color: var(--muted-foreground); }
.bb-reviews { display: grid; gap: 1rem; }
@media (min-width: 768px) { .bb-reviews { grid-template-columns: repeat(2, 1fr); } }
.bb-review { border-radius: var(--r-3xl); background: var(--card); padding: 1.5rem; box-shadow: var(--shadow-soft); }
.bb-review__stars { color: var(--primary); letter-spacing: 2px; }
.bb-review__txt { margin: .5rem 0; }
.bb-review__by { margin: 0; font-size: .875rem; font-weight: 700; color: var(--muted-foreground); }

/* ---------- FAQ (Elementor toggle) ---------- */
.bb-faq { max-width: 48rem; margin-inline: auto; }
.bb-faq .elementor-toggle { display: flex; flex-direction: column; gap: .75rem; }
.bb-faq .elementor-toggle-item { border: 0; border-radius: var(--r-2xl); background: var(--card); box-shadow: var(--shadow-soft); overflow: hidden; }
.bb-faq .elementor-tab-title { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem; margin: 0; cursor: pointer; font-weight: 900; border: 0; background: none; }
.bb-faq .elementor-tab-title a, .bb-faq .elementor-toggle-title { color: var(--foreground); font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; font-weight: 900; text-decoration: none; }
.bb-faq .elementor-toggle-icon, .bb-faq .elementor-toggle-icon-left, .bb-faq .elementor-toggle-icon-right { display: none !important; }
.bb-faq .elementor-tab-title::after { content: ""; flex: none; width: 1.25rem; height: 1.25rem; margin-inline-start: 1rem; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D94D80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); transition: transform .2s; }
.bb-faq .elementor-tab-title.elementor-active::after { transform: rotate(180deg); }
.bb-faq .elementor-tab-content { padding: 0 1.25rem 1.25rem; margin: 0; border: 0; color: var(--muted-foreground); line-height: 1.625; font-size: 1rem; }
.bb-faq .elementor-tab-content p { margin: 0; }

/* ---------- product page ---------- */
.bb-pdp { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .bb-pdp { grid-template-columns: 1fr 1fr; } }
.bb-pdp__title { margin: 0 0 1rem; font-size: 2.25rem; line-height: 1.25; font-weight: 900; }
.bb-pdp__info > * + * { margin-top: 1rem; }
.bb-wc { padding: 2rem 1rem; max-width: 72rem; margin-inline: auto; }

/* ---------- footer ---------- */
.bb-footer { background: var(--foreground); color: var(--background); padding: 2.5rem 1rem; }
.bb-footer__in { display: grid; gap: 1.5rem; max-width: 72rem; margin-inline: auto; }
@media (min-width: 640px) { .bb-footer__in { grid-template-columns: repeat(3, 1fr); } }
.bb-footer__brand { display: flex; align-items: center; gap: .75rem; }
.bb-footer__logo { width: 3.5rem; height: 3.5rem; border-radius: 999px; background: var(--card); object-fit: contain; }
.bb-footer__name { margin: 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 2rem; font-weight: 900; }
.bb-footer__about { margin: .5rem 0 0; font-size: .875rem; line-height: 1.25rem; opacity: .8; }
.bb-footer__col { font-size: .875rem; line-height: 1.25rem; display: flex; flex-direction: column; gap: .25rem; }
.bb-footer__col--info { opacity: .9; }
.bb-footer__col p { margin: 0; }
.bb-footer__h { font-weight: 700; }
.bb-footer__col:not(.bb-footer__col--info) { gap: .5rem; }
.bb-footer__tel { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.bb-footer__social { display: flex; gap: .75rem; }
.bb-footer__admin { display: block; padding-top: 1rem; font-size: .75rem; line-height: 1rem; opacity: .5; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.bb-hero__text, .bb-hero__img, .bb-header { animation: none !important; transition: none !important; }
}

/* two-column grids used by the Elementor sections */
.bb-page .e-con.bb-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .bb-page .e-con.bb-grid--2 { grid-template-columns: 1fr 1fr; } }

/* very small phones (320px): keep brand + CTA + menu button on one line */
.bb-header__cta { white-space: nowrap; }
@media (max-width: 380px) {
	.bb-header__in { padding-inline: .75rem; }
	.bb-brand__name { font-size: 1.25rem; line-height: 1.75rem; }
	.bb-brand__logo { width: 2.25rem; height: 2.25rem; }
	.bb-header__cta { padding: .5rem 1rem; font-size: .8125rem; }
	.bb-header__act { gap: .375rem; }
	.bb-burger { width: 2.25rem; height: 2.25rem; }
}