/* BathroomsByDesign first page: design-system tokens v1.1 and the page styles (from odoo-20/docs/first-page). */
/* ==========================================================================
   Bathrooms by Design — Design System v1.1
   Design tokens + base component styles
   Fonts: add to <head>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
   ========================================================================== */

:root {
  /* ---- Colour: brand (from the logo) ---- */
  --bbd-teal: #00B1AC;          /* Logo teal. Fills, rules, icons. Black text on it (7.9:1). NOT for text on white (2.7:1). */
  --bbd-black: #000000;         /* Logo black. Headings, primary buttons, dark surfaces. */

  /* ---- Colour: supporting ---- */
  --bbd-teal-deep: #007A76;     /* Teal for text/links on white (5.2:1); white text on it (5.2:1). */
  --bbd-teal-mist: #E6F7F6;     /* Section grounds, placeholders, selected states. */
  --bbd-graphite: #4B5152;      /* Body & secondary text (8.1:1). */
  --bbd-line: #DCE3E3;          /* Hairlines, dividers. */
  --bbd-input-border: #8A8F94;  /* Form field borders (3.3:1, non-text). */
  --bbd-porcelain: #FFFFFF;     /* Page background. */
  --bbd-on-dark-muted: #C9CCCF; /* Secondary text on black. */
  --bbd-offer: #A3241C;         /* Sale prices, offer banners, errors only (7.3:1). */

  /* ---- Semantic aliases ---- */
  --color-bg: var(--bbd-porcelain);
  --color-bg-subtle: var(--bbd-teal-mist);
  --color-bg-inverse: var(--bbd-black);
  --color-text: var(--bbd-black);
  --color-text-muted: var(--bbd-graphite);
  --color-text-inverse: var(--bbd-porcelain);
  --color-text-accent: var(--bbd-teal-deep);
  --color-accent: var(--bbd-teal);
  --color-border: var(--bbd-line);
  --color-link: var(--bbd-teal-deep);
  --color-link-hover: var(--bbd-black);
  --color-sale: var(--bbd-offer);
  --color-error: var(--bbd-offer);
  --color-focus: var(--bbd-teal-deep);

  /* ---- Typography ---- */
  --font-display: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-display: 300 4.5rem/1.11 var(--font-display);   /* 72/80 */
  --text-h1: 300 3.25rem/1.15 var(--font-display);       /* 52/60 */
  --text-h2: 300 2.5rem/1.2 var(--font-display);         /* 40/48 */
  --text-h3: 400 1.625rem/1.31 var(--font-display);      /* 26/34 */
  --text-body-lg: 400 1.125rem/1.67 var(--font-body);    /* 18/30 */
  --text-body: 400 1rem/1.625 var(--font-body);          /* 16/26 */
  --text-small: 400 0.875rem/1.57 var(--font-body);      /* 14/22 */
  --text-caption: 400 0.8125rem/1.54 var(--font-body);   /* 13/20 */

  --tracking-eyebrow: 0.18em;  /* Jost 500, 12px, uppercase */
  --tracking-button: 0.14em;   /* Jost 500, 13px, uppercase */
  --tracking-display: -0.01em;

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --page-margin: 80px;        /* 20px on mobile, see media query */
  --grid-columns: 12;
  --grid-gutter: 24px;

  /* ---- Shape & depth ---- */
  --radius-none: 0;           /* images, tiles */
  --radius-sm: 2px;           /* buttons, inputs */
  --radius-pill: 999px;       /* tags, badges */
  --shadow-0: 0 0 0 1px var(--bbd-line);
  --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.08);   /* hover cards */
  --shadow-2: 0 24px 48px rgba(0, 0, 0, 0.16);  /* menus, modals */

  /* ---- Controls ---- */
  --control-height: 52px;
  --control-height-sm: 48px;
  --touch-target-min: 44px;

  --logo-min-width: 120px;
}

@media (max-width: 768px) {
  :root { --page-margin: 20px; }
}

/* ==========================================================================
   Base
   ========================================================================== */
.bbd-ui {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--text-body);
}
.bbd-ui a { color: var(--color-link); }
.bbd-ui a:hover { color: var(--color-link-hover); }
.bbd-ui :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.bbd-ui .bbd-container { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--page-margin); }

.bbd-ui .bbd-display { font: var(--text-display); letter-spacing: var(--tracking-display); }
.bbd-ui .bbd-h1 { font: var(--text-h1); }
.bbd-ui .bbd-h2 { font: var(--text-h2); }
.bbd-ui .bbd-h3 { font: var(--text-h3); }
.bbd-ui .bbd-body-lg { font: var(--text-body-lg); color: var(--color-text-muted); }
.bbd-ui .bbd-eyebrow {
  font: 500 0.75rem/1 var(--font-display);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-accent);
}
.bbd-ui .bbd-inverse .bbd-eyebrow { color: var(--bbd-teal); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.bbd-ui .bbd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-height); padding: 0 var(--space-8);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: 500 0.8125rem/1 var(--font-display);
  letter-spacing: var(--tracking-button); text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.bbd-ui .bbd-btn--primary { background: var(--bbd-black); color: var(--bbd-porcelain); border-color: var(--bbd-black); }
.bbd-ui .bbd-btn--primary:hover { background: var(--bbd-teal-deep); border-color: var(--bbd-teal-deep); color: #fff; }
.bbd-ui .bbd-btn--secondary { background: transparent; color: var(--bbd-black); border-color: var(--bbd-black); }
.bbd-ui .bbd-btn--secondary:hover { background: var(--bbd-black); color: var(--bbd-porcelain); }
.bbd-ui .bbd-btn--accent { background: var(--bbd-teal); color: var(--bbd-black); border-color: var(--bbd-teal); }
.bbd-ui .bbd-btn--accent:hover { background: var(--bbd-black); color: var(--bbd-teal); border-color: var(--bbd-black); }
.bbd-ui .bbd-btn--inverse { background: var(--bbd-porcelain); color: var(--bbd-black); border-color: var(--bbd-porcelain); }
.bbd-ui .bbd-btn--ghost-inverse { background: transparent; color: var(--bbd-porcelain); border-color: var(--bbd-porcelain); }
.bbd-ui .bbd-btn--sm { height: var(--control-height-sm); padding: 0 var(--space-6); }

.bbd-ui .bbd-link-arrow {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--touch-target-min);
  color: var(--bbd-black); text-decoration: none; border-bottom: 1px solid currentColor;
  font: 500 0.8125rem/1 var(--font-display); letter-spacing: var(--tracking-button); text-transform: uppercase;
}

/* ==========================================================================
   Forms
   ========================================================================== */
.bbd-ui .bbd-label { display: block; margin-bottom: var(--space-2); font: 500 0.875rem/1.4 var(--font-body); }
.bbd-ui .bbd-input, .bbd-ui .bbd-select {
  box-sizing: border-box; width: 100%; height: var(--control-height); padding: 0 var(--space-4);
  border: 1px solid var(--bbd-input-border); border-radius: var(--radius-sm);
  background: var(--bbd-porcelain); color: var(--bbd-black); font: var(--text-body);
}
.bbd-ui .bbd-input:focus, .bbd-ui .bbd-select:focus { outline: none; border: 2px solid var(--bbd-black); }
.bbd-ui .bbd-input[aria-invalid="true"] { border: 2px solid var(--color-error); }
.bbd-ui .bbd-field-error { margin-top: var(--space-2); font: var(--text-caption); color: var(--color-error); }
.bbd-ui .bbd-checkbox { width: 20px; height: 20px; accent-color: var(--bbd-black); }

/* ==========================================================================
   Tags, badges, cards
   ========================================================================== */
.bbd-ui .bbd-tag {
  display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--radius-pill);
  font: 500 0.8125rem/1.2 var(--font-body);
}
.bbd-ui .bbd-tag--sale { background: var(--bbd-offer); color: #fff; }
.bbd-ui .bbd-tag--dark { background: var(--bbd-black); color: #fff; }
.bbd-ui .bbd-tag--outline { border: 1px solid var(--bbd-black); padding: 5px 13px; }
.bbd-ui .bbd-tag--soft { background: var(--bbd-teal-mist); color: var(--bbd-black); }

.bbd-ui .bbd-card { border: 1px solid var(--bbd-line); padding: var(--space-4); background: var(--bbd-porcelain); }
.bbd-ui .bbd-card:hover { box-shadow: var(--shadow-1); }
.bbd-ui .bbd-price { font: 600 1.125rem/1.3 var(--font-body); }
.bbd-ui .bbd-price--sale { color: var(--bbd-offer); }
.bbd-ui .bbd-price--was { font: var(--text-small); color: var(--bbd-graphite); text-decoration: line-through; }

.bbd-ui .bbd-step-number { font: 300 3rem/1 var(--font-display); color: var(--bbd-teal-deep); }
.bbd-ui .bbd-promo-bar {
  background: var(--bbd-offer); color: #fff; text-align: center; padding: 10px 20px;
  font: 500 0.8125rem/1.4 var(--font-display); letter-spacing: var(--tracking-button); text-transform: uppercase;
}

/* Icons: 24px grid, 1.25–1.5 stroke, stroke="currentColor", fill="none" */
.bbd-ui .bbd-icon { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* Logo: use bbd-logo.svg on light, bbd-logo-reversed.svg on black,
   bbd-logo-mono-black.svg on teal, bbd-logo-mono-white.svg on teal-deep/photos.
   Never place the primary logo on teal. Min width 120px. */
.bbd-ui .bbd-logo { display: block; width: 160px; height: auto; min-width: var(--logo-min-width); }


/* ---------- first page ---------- */
:root { color-scheme: light; --mist: var(--bbd-teal-mist); --hair: var(--bbd-line); --muted: var(--bbd-graphite); }
.bbd-ui, .bbd-ui * { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .bbd-ui, .bbd-ui * { transition: none !important; } }
.bbd-ui { background: var(--bbd-porcelain); color: var(--bbd-black); -webkit-font-smoothing: antialiased; }
.bbd-ui h1, .bbd-ui h2, .bbd-ui h3, .bbd-ui h4, .bbd-ui p { margin: 0; }
.bbd-ui h1, .bbd-ui h2, .bbd-ui h3 { text-wrap: balance; }
.bbd-ui img { display: block; max-width: 100%; height: auto; }
.bbd-ui .bbd-wrap { max-width: var(--container-max); margin: 0 auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
@media (min-width: 900px) { .bbd-ui .bbd-wrap { padding-inline: 48px; } }
.bbd-ui .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.bbd-ui .ctas .bbd-btn { padding: 0 22px; }
.bbd-ui .stars { color: #F5B301; letter-spacing: 2px; }

/* header */
.bbd-site-top { position: sticky; top: 0; z-index: 1030; }
.bbd-ui .bbd-top { background: var(--bbd-porcelain); border-bottom: 1px solid var(--hair); }
.bbd-ui .bbd-top .bbd-wrap { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.bbd-ui .bbd-top .bbd-mark { width: 150px; height: auto; display: block; flex: none; }
.bbd-ui .bbd-nav { display: none; gap: 4px; margin-left: 16px; }
.bbd-ui .bbd-nav a { display: inline-flex; align-items: center; white-space: nowrap; min-height: 44px; padding: 0 10px; color: var(--muted); text-decoration: none;
  font: 500 0.75rem/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 2px solid transparent; }
.bbd-ui .bbd-nav a:hover { color: var(--bbd-black); border-bottom-color: var(--bbd-teal); }
.bbd-ui .bbd-top .bbd-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.bbd-ui .bbd-top .bbd-btn { height: 44px; padding: 0 18px; white-space: nowrap; }
.bbd-ui .bbd-top .open-account { display: none; }
.bbd-ui .signin-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; white-space: nowrap; color: var(--bbd-black); text-decoration: none;
  font: 500 0.75rem/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 2px solid var(--bbd-teal); }
.bbd-ui .signin-link:hover { color: var(--bbd-teal-deep); }
.bbd-ui .signin-link svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }
@media (min-width: 1180px) { .bbd-ui .bbd-nav { display: flex; } }
@media (min-width: 1320px) { .bbd-ui .bbd-top .open-account { display: inline-flex; } }

/* hero: the photo behind, the words on black */
.bbd-ui .hero { position: relative; background: var(--bbd-black) url(../../img/bathroom.jpg) center / cover no-repeat; color: var(--bbd-porcelain); }
.bbd-ui .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.86) 45%, rgba(0,0,0,.45) 100%); }
@media (max-width: 979px) { .bbd-ui .hero::before { background: rgba(0,0,0,.88); } }
.bbd-ui .hero > * { position: relative; }
.bbd-ui .hero-main { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: 64px 56px; }
@media (min-width: 980px) { .bbd-ui .hero-main { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 560px; align-items: center; padding-block: 96px 80px; } }
.bbd-ui .hero .bbd-eyebrow { color: var(--bbd-teal); }
.bbd-ui .hero h1 { font: 300 clamp(2.25rem, 5vw, 4rem)/1.08 var(--font-display); letter-spacing: var(--tracking-display); margin-top: 18px; max-width: 15ch; }
.bbd-ui .hero .lede { font: var(--text-body-lg); color: var(--bbd-on-dark-muted); margin-top: 22px; max-width: 54ch; }
.bbd-ui .hero .ctas { margin-top: 32px; }
.bbd-ui .hero .rating { display: flex; align-items: center; gap: 10px; margin-top: 28px; font-size: 0.875rem; color: var(--bbd-on-dark-muted); }
.bbd-ui .hero .rating b { font: 400 1.5rem/1 var(--font-display); color: var(--bbd-porcelain); }
.bbd-ui .hero .bbd-btn--ghost-inverse:hover { background: var(--bbd-porcelain); color: var(--bbd-black); }


.bbd-ui .facts { border-top: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.6); }
.bbd-ui .facts .bbd-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.bbd-ui .fact { padding: 20px 16px 22px 0; display: flex; gap: 12px; align-items: flex-start; }
.bbd-ui .fact svg { flex: none; width: 24px; height: 24px; stroke: var(--bbd-teal); fill: none; stroke-width: 1.5; margin-top: 2px; }
.bbd-ui .fact b { display: block; font: 400 1.0625rem/1.3 var(--font-display); color: var(--bbd-porcelain); }
.bbd-ui .fact span { font-size: 0.8125rem; line-height: 1.45; color: var(--bbd-on-dark-muted); }

/* sections */
.bbd-ui section { padding-block: 88px 24px; }
.bbd-ui .bbd-head { max-width: 780px; display: grid; gap: 14px; margin-bottom: 40px; }
.bbd-ui .bbd-head h2 { font: 300 clamp(1.875rem, 3.6vw, 2.5rem)/1.2 var(--font-display); }
.bbd-ui .bbd-head p { font: var(--text-body-lg); color: var(--muted); }

/* who we work with */
.bbd-ui .who { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 860px) { .bbd-ui .who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bbd-ui .bbd-pcard { border: 1px solid var(--hair); display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; background: var(--bbd-porcelain); transition: box-shadow .15s, border-color .15s; }
@media (min-width: 560px) { .bbd-ui .bbd-pcard { grid-template-columns: 132px minmax(0, 1fr); } }
.bbd-ui .bbd-pcard:hover { box-shadow: var(--shadow-1); border-color: var(--bbd-teal); }
.bbd-ui .bbd-pcard .pic { background: var(--mist); display: grid; place-items: center; padding: 20px; border-bottom: 1px solid var(--hair); }
@media (min-width: 560px) { .bbd-ui .bbd-pcard .pic { border-bottom: 0; border-right: 1px solid var(--hair); align-items: start; padding-top: 28px; } }
.bbd-ui .bbd-pcard .pic svg { width: 92px; height: 74px; stroke: var(--bbd-teal-deep); fill: none; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.bbd-ui .bbd-pcard .body { padding: 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bbd-ui .bbd-pcard .role { font: 500 0.75rem/1.35 var(--font-display); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--bbd-teal-deep); }
.bbd-ui .bbd-pcard h3 { font: 400 1.5rem/1.25 var(--font-display); }
.bbd-ui .bbd-pcard p { font-size: 0.9375rem; line-height: 1.55; color: var(--muted); }
.bbd-ui .bbd-pcard ul { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--hair); display: grid; gap: 10px; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.bbd-ui .bbd-pcard li b { display: block; color: var(--bbd-black); font: 500 0.9375rem/1.35 var(--font-display); margin-bottom: 2px; }
.bbd-ui .bbd-pcard .more { margin-top: auto; padding-top: 6px; align-self: flex-start; }

/* 3D design */
.bbd-ui .design { background: var(--mist); padding-bottom: 88px; margin-top: 64px; }
.bbd-ui .design-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 980px) { .bbd-ui .design-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.bbd-ui .ddd { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: -8px 0 24px; font: 400 1.375rem/1.2 var(--font-display); color: var(--bbd-teal-deep); }
.bbd-ui .ddd span + span::before { content: "·"; margin-right: 22px; color: var(--muted); }
.bbd-ui .steps { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid #C9DCDB; }
.bbd-ui .steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; padding: 18px 0; border-bottom: 1px solid #C9DCDB; }
.bbd-ui .steps .n { grid-row: span 2; font: 300 2.5rem/1 var(--font-display); color: var(--bbd-teal-deep); font-variant-numeric: tabular-nums; }
.bbd-ui .steps h3 { font: 400 1.25rem/1.3 var(--font-display); }
.bbd-ui .steps p { font-size: 0.9375rem; line-height: 1.55; color: var(--muted); }
.bbd-ui .design .ctas { margin-top: 28px; }
.bbd-ui .photo { margin: 0; display: grid; gap: 10px; }
.bbd-ui .photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.bbd-ui .photo figcaption { font-size: 0.8125rem; color: var(--muted); }
.bbd-ui .help { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; margin-top: 20px; }
.bbd-ui .help div { background: var(--bbd-porcelain); padding: 16px; border: 1px solid var(--hair); display: grid; gap: 6px; align-content: start; }
.bbd-ui .help b { font: 500 1rem/1.3 var(--font-display); }
.bbd-ui .help span { font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }

/* trade partnership */
.bbd-ui .trade { display: grid; grid-template-columns: minmax(0, 1fr); border: 2px solid var(--bbd-black); }
@media (min-width: 980px) { .bbd-ui .trade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.bbd-ui .trade > div { padding: 32px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bbd-ui .trade .dark { background: var(--bbd-black); color: var(--bbd-porcelain); }
.bbd-ui .trade .dark .bbd-eyebrow { color: var(--bbd-teal); }
.bbd-ui .trade .dark h2 { font: 300 clamp(1.75rem, 3vw, 2.25rem)/1.2 var(--font-display); }
.bbd-ui .trade .dark p { color: var(--bbd-on-dark-muted); font: var(--text-body); }
.bbd-ui .trade .dark img { margin-top: 4px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.bbd-ui .trade .dark .ctas { margin-top: auto; padding-top: 8px; }
.bbd-ui .ulabel { font: 500 0.6875rem/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.bbd-ui .perks { list-style: none; margin: 0; padding: 0; display: grid; }
.bbd-ui .perks li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 14px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.bbd-ui .perks li:last-child { border-bottom: 0; }
.bbd-ui .perks svg { grid-row: span 2; width: 26px; height: 26px; stroke: var(--bbd-teal-deep); fill: none; stroke-width: 1.5; }
.bbd-ui .perks b { font: 500 1.0625rem/1.35 var(--font-display); }
.bbd-ui .perks span { font-size: 0.875rem; line-height: 1.55; color: var(--muted); }

/* story */
.bbd-ui .story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 980px) { .bbd-ui .story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.bbd-ui .story .text > p { font: var(--text-body-lg); color: var(--muted); }
.bbd-ui .story .text .bbd-link-arrow { margin-top: 24px; }
.bbd-ui .timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--bbd-teal); display: grid; gap: 0; }
.bbd-ui .timeline li { position: relative; padding: 0 0 18px 24px; display: grid; gap: 2px; }
.bbd-ui .timeline li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--bbd-porcelain); border: 2px solid var(--bbd-teal); }
.bbd-ui .timeline .y { font: 500 0.75rem/1.4 var(--font-display); letter-spacing: 0.14em; color: var(--bbd-teal-deep); }
.bbd-ui .timeline b { font: 400 1.125rem/1.3 var(--font-display); }
.bbd-ui .timeline span { font-size: 0.875rem; line-height: 1.5; color: var(--muted); }

/* showrooms */
.bbd-ui .rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.bbd-ui .showroom { border: 1px solid var(--hair); padding: 22px; display: grid; gap: 10px; align-content: start; }
.bbd-ui .showroom .tag { justify-self: start; font: 500 0.6875rem/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bbd-teal-deep); background: var(--mist); padding: 6px 8px; }
.bbd-ui .showroom h3 { font: 400 1.5rem/1.2 var(--font-display); }
.bbd-ui .showroom address { margin: 0; font-style: normal; font-size: 0.9375rem; line-height: 1.55; }
.bbd-ui .showroom a { color: var(--bbd-teal-deep); }
.bbd-ui .showroom dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin: 4px 0 0; font-size: 0.875rem; color: var(--muted); }
.bbd-ui .showroom dd { margin: 0; }

/* footer */
.bbd-ui .bbd-foot { margin-top: 96px; background: var(--bbd-black); color: var(--bbd-on-dark-muted); }
.bbd-ui .bbd-foot .bbd-wrap { padding-block: 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; font-size: 0.875rem; line-height: 1.6; }
@media (min-width: 900px) { .bbd-ui .bbd-foot .bbd-wrap { grid-template-columns: 1.2fr 1fr 1fr 1fr; } }
.bbd-ui .bbd-foot .bbd-mark { width: 150px; height: auto; display: block; }
.bbd-ui .bbd-foot h4 { font: 500 0.75rem/1 var(--font-display); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--bbd-teal); margin-bottom: 12px; }
.bbd-ui .bbd-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bbd-ui .bbd-foot a { color: var(--bbd-porcelain); text-decoration: none; }
.bbd-ui .bbd-foot a:hover { color: var(--bbd-teal); }
.bbd-ui .bbd-foot .legal { grid-column: 1 / -1; border-top: 1px solid #2B2F30; padding-top: 20px; font-size: 0.75rem; }

/* ---------- sign-in page (views/login_templates.xml): the form on the left, the photo panel on the right ---------- */
.bbd-ui.bbd-login-page { background: var(--bbd-porcelain); }
.bbd-ui .bbd-login { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .bbd-ui .bbd-login { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - 73px - 132px); } }
.bbd-ui .bbd-login-main { display: flex; align-items: center; padding: 48px 16px 56px; }
@media (min-width: 980px) { .bbd-ui .bbd-login-main { padding: 96px 48px; } }
.bbd-ui .bbd-login-form { width: 100%; max-width: 584px; margin: 0 auto; }
.bbd-ui .bbd-login-head { display: grid; gap: 14px; margin-bottom: 40px; }
.bbd-ui .bbd-login-head h1 { font: 300 clamp(2.25rem, 4.2vw, 3.5rem)/1.12 var(--font-display); letter-spacing: var(--tracking-display); }
.bbd-ui .bbd-login-head p { font: var(--text-body-lg); color: var(--muted); }
.bbd-ui .oe_login_form .mb-3, .bbd-ui .oe_login_form .o_caps_lock_warning { margin-bottom: 24px !important; }
.bbd-ui .oe_login_form .form-label, .bbd-ui .oe_login_form .col-form-label { display: block; margin: 0 0 8px; font: 500 1rem/1.4 var(--font-body); color: var(--bbd-black); }
.bbd-ui .oe_login_form .o_caps_lock_warning > .d-flex { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bbd-ui .oe_login_form .form-control { box-sizing: border-box; width: 100%; height: 56px; padding: 0 18px; border: 1px solid var(--bbd-input-border); border-radius: var(--radius-sm);
  background: var(--bbd-porcelain); color: var(--bbd-black); font: var(--text-body); box-shadow: none; }
.bbd-ui .oe_login_form .form-control::placeholder { color: #767B80; }
.bbd-ui .oe_login_form .form-control:focus { outline: none; border: 2px solid var(--bbd-black); padding: 0 17px; box-shadow: none; }
.bbd-ui .oe_login_form .input-group { display: flex; flex-wrap: nowrap; margin-bottom: 0 !important; }
.bbd-ui .oe_login_form .input-group .form-control { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.bbd-ui .oe_login_form .o_show_password { flex: none; width: 72px; display: grid; place-items: center; border: 1px solid var(--bbd-input-border) !important; border-left-color: var(--bbd-line) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--bbd-porcelain); color: var(--bbd-black); }
.bbd-ui .oe_login_form .o_show_password:hover { background: var(--mist); }
.bbd-ui .bbd-forgot { color: var(--bbd-teal-deep); font: 500 1rem/1.4 var(--font-body); text-decoration: underline; text-underline-offset: 3px; }
.bbd-ui .bbd-forgot:hover { color: var(--bbd-black); }
.bbd-ui .bbd-remember { display: flex; align-items: center; gap: 14px; margin: 8px 0 32px; font-size: 1.0625rem; }
.bbd-ui .bbd-remember .bbd-checkbox { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--bbd-black); }
.bbd-ui .oe_login_form .oe_login_buttons { display: grid; gap: 0; padding-top: 0 !important; }
.bbd-ui .oe_login_form .oe_login_buttons .btn-primary { height: 64px; border: 1px solid var(--bbd-black); border-radius: var(--radius-sm); background: var(--bbd-black); color: var(--bbd-porcelain);
  font: 500 0.9375rem/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; box-shadow: none; }
.bbd-ui .oe_login_form .oe_login_buttons .btn-primary:hover { background: var(--bbd-teal-deep); border-color: var(--bbd-teal-deep); }
.bbd-ui .oe_login_form .oe_login_buttons .btn-link { color: var(--bbd-teal-deep); }
.bbd-ui .bbd-or { display: flex; align-items: center; gap: 20px; margin: 36px 0 32px; color: var(--muted); font-size: 0.9375rem; }
.bbd-ui .bbd-or::before, .bbd-ui .bbd-or::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.bbd-ui .o_login_auth .list-group { display: grid; gap: 12px; border: 0; }
.bbd-ui .o_login_auth .list-group-item { height: 64px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--bbd-black) !important; border-radius: var(--radius-sm) !important;
  background: var(--bbd-porcelain); color: var(--bbd-black); text-decoration: none; font: 500 0.9375rem/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; }
.bbd-ui .o_login_auth .list-group-item > span { margin: 0 !important; }
.bbd-ui .o_login_auth .list-group-item:hover { background: var(--bbd-black); color: var(--bbd-porcelain); }
.bbd-ui .oe_login_form .alert { margin: 0 0 24px; padding: 14px 16px; border: 0; border-left: 3px solid; border-radius: 0; font-size: 0.9375rem; }
.bbd-ui .oe_login_form .alert-danger { background: #FBEAE8; border-left-color: var(--bbd-offer); color: var(--bbd-offer); }
.bbd-ui .oe_login_form .alert-success { background: var(--mist); border-left-color: var(--bbd-teal-deep); color: var(--bbd-black); }
.bbd-ui .bbd-login-new { margin-top: 36px; font-size: 1.0625rem; color: var(--muted); }
.bbd-ui .bbd-login-new a { color: var(--bbd-teal-deep); text-decoration: underline; text-underline-offset: 3px; }

.bbd-ui .bbd-login-aside { position: relative; display: flex; background: var(--bbd-black) url(../../img/bathroom.jpg) center / cover no-repeat; color: var(--bbd-porcelain); }
.bbd-ui .bbd-login-aside::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .78); }
.bbd-ui .bbd-login-aside-in { position: relative; display: flex; flex-direction: column; width: 100%; padding: 56px 16px 40px; }
@media (min-width: 980px) { .bbd-ui .bbd-login-aside-in { padding: 96px 88px 48px; } }
.bbd-ui .bbd-rule { display: block; width: 78px; height: 4px; background: var(--bbd-teal); margin: auto 0 40px; }
.bbd-ui .bbd-login-aside h2 { font: 300 clamp(2rem, 3.4vw, 3.5rem)/1.18 var(--font-display); letter-spacing: var(--tracking-display); max-width: 18ch; }
.bbd-ui .bbd-login-points { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 24px; font-size: 1.1875rem; line-height: 1.4; }
.bbd-ui .bbd-login-points li { display: flex; align-items: center; gap: 18px; }
.bbd-ui .bbd-login-points svg { flex: none; width: 26px; height: 26px; stroke: var(--bbd-teal); fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.bbd-ui .bbd-login-help { margin-top: auto; padding-top: 32px; border-top: 1px solid #2B2F30; display: flex; flex-wrap: wrap; gap: 10px 32px; font-size: 1.0625rem; }
@media (min-width: 980px) { .bbd-ui .bbd-login-help { margin-top: 96px; } }
.bbd-ui .bbd-login-help a { color: var(--bbd-teal); text-decoration: underline; text-underline-offset: 3px; }
.bbd-ui .bbd-login-help a:hover { color: var(--bbd-porcelain); }

.bbd-ui .bbd-foot-compact { background: var(--bbd-black); color: var(--bbd-on-dark-muted); border-top: 1px solid #2B2F30; }
.bbd-ui .bbd-foot-compact .bbd-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 32px; font-size: 0.9375rem; }
.bbd-ui .bbd-foot-compact .bbd-mark { width: 170px; height: auto; display: block; }
.bbd-ui .bbd-foot-compact p { color: var(--bbd-porcelain); }
.bbd-ui .bbd-foot-compact .bbd-foot-links { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; }
.bbd-ui .bbd-foot-compact a { color: var(--bbd-porcelain); text-underline-offset: 3px; }
.bbd-ui .bbd-foot-compact a:hover { color: var(--bbd-teal); }

/* Without the website, portal colours every link and primary button with the company colour (!important, through
   --portal-primary-color / --portal-text-color): inside the design those variables carry the design's colours. */
.bbd-ui { --portal-primary-color: var(--bbd-teal-deep); --portal-text-color: var(--bbd-porcelain); }
.bbd-ui .bbd-nav a, .bbd-ui .bbd-foot-compact p { --portal-primary-color: var(--muted); }
.bbd-ui .bbd-nav a:hover, .bbd-ui .signin-link, .bbd-ui .bbd-link-arrow, .bbd-ui .bbd-btn--secondary, .bbd-ui .bbd-btn--accent,
.bbd-ui .bbd-btn--inverse, .bbd-ui .o_login_auth .list-group-item, .bbd-ui .oe_login_buttons .btn-primary { --portal-primary-color: var(--bbd-black); }
.bbd-ui .bbd-btn--primary, .bbd-ui .bbd-btn--ghost-inverse, .bbd-ui .bbd-btn--secondary:hover, .bbd-ui .o_login_auth .list-group-item:hover,
.bbd-ui .bbd-foot a, .bbd-ui .bbd-foot-compact a, .bbd-ui .bbd-login-help a:hover { --portal-primary-color: var(--bbd-porcelain); }
.bbd-ui .bbd-btn--accent:hover, .bbd-ui .bbd-foot a:hover, .bbd-ui .bbd-foot-compact a:hover, .bbd-ui .bbd-login-help a { --portal-primary-color: var(--bbd-teal); }
.bbd-ui .signin-link:hover, .bbd-ui .oe_login_buttons .btn-primary:hover { --portal-primary-color: var(--bbd-teal-deep); }
.bbd-ui .oe_login_buttons .btn-primary { --portal-text-color: var(--bbd-porcelain); }

/* Odoo keeps its login and reset-password forms to 300px; the design's column sets the width */
.bbd-ui .oe_login_form, .bbd-ui .oe_signup_form, .bbd-ui .oe_reset_password_form { max-width: none; margin: 0; }