/*
Theme Name: Premium Website Theme
Author: Service Provider
Description: Mobile-first premium website theme with booking, multilingual content, services, staff, gallery, reviews, and contact sections.
Version: 0.2.8
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: barber-theme
*/

:root {
  --bbt-bg: #f7f7f4;
  --bbt-surface: #ffffff;
  --bbt-text: #161616;
  --bbt-muted: #62605a;
  --bbt-line: #d9d5ca;
  --bbt-accent: #0f6b63;
  --bbt-accent-2: #b47b42;
  --bbt-dark: #111111;
  --bbt-radius: 8px;
  --bbt-content: 1180px;
  /* Typography — system-first by default; curated pairings override per shop.
     "Inter" sits after the generics so it is never fetched unless a pairing requests it. */
  --bbt-font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
  --bbt-font-head: var(--bbt-font-body);
  /* Derived accent ramp — replaced per request by the theme with contrast-safe values
     computed from the active accent. These are safe fallbacks for the default accent. */
  --bbt-accent-strong: #0c544d;
  --bbt-accent-soft: rgba(15, 107, 99, 0.12);
  --bbt-on-accent: #ffffff;
  --bbt-accent-ink: #0f6b63;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bbt-bg);
  color: var(--bbt-text);
  font-family: var(--bbt-font-body);
  font-size: 16px;
  line-height: 1.55;
}

h1,
h2,
h3,
h4 {
  font-family: var(--bbt-font-head);
}

.bbt-font-mode-classic {
  --bbt-font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
  --bbt-font-head: var(--bbt-font-body);
}

.bbt-font-mode-minimal {
  --bbt-font-body: "Segoe UI", ui-sans-serif, system-ui, Roboto, Inter, sans-serif;
  --bbt-font-head: var(--bbt-font-body);
}

.bbt-font-mode-warm {
  --bbt-font-head: Georgia, "Times New Roman", serif;
  --bbt-font-body: Georgia, "Times New Roman", serif;
}

.bbt-font-mode-warm .bbt-button,
.bbt-font-mode-warm .bbt-nav,
.bbt-font-mode-warm .bbp-booking-form {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.bbt-font-mode-bold h1,
.bbt-font-mode-bold h2,
.bbt-font-mode-bold h3 {
  text-transform: uppercase;
  letter-spacing: 0;
}

/* ============================================================================
   Curated, self-hosted font pairings (premium typography).
   Fonts are OFL, shipped in assets/fonts/ as variable woff2 with latin +
   latin-ext subsets. Arabic glyphs are outside both unicode-ranges, so RTL
   text falls through to the system Arabic stack automatically.
   Only the active pairing's families are downloaded (unused @font-face never
   fetches). font-weight ranges match each file so UI weights never faux-bold.
   ============================================================================ */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/inter.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/inter-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/jost.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/jost-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(assets/fonts/playfair-display.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(assets/fonts/playfair-display-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/space-grotesk.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/space-grotesk-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(assets/fonts/manrope.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(assets/fonts/manrope-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(assets/fonts/oswald.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(assets/fonts/oswald-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/libre-baskerville.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/libre-baskerville-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Pairing → font variables. Placed after .bbt-font-mode-* so a chosen pairing
   wins over the preset's font mode when both body classes are present. */
.bbt-font-pairing-luxury-serif {
  --bbt-font-head: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --bbt-font-body: "Jost", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}

.bbt-font-pairing-editorial {
  --bbt-font-head: "Playfair Display", Georgia, "Times New Roman", serif;
  --bbt-font-body: "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}

.bbt-font-pairing-modern {
  --bbt-font-head: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --bbt-font-body: "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}

.bbt-font-pairing-minimal {
  --bbt-font-head: "Manrope", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --bbt-font-body: "Manrope", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}

.bbt-font-pairing-grooming {
  --bbt-font-head: "Oswald", "Inter", ui-sans-serif, system-ui, sans-serif;
  --bbt-font-body: "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}

.bbt-font-pairing-heritage {
  --bbt-font-head: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --bbt-font-body: "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}

/* Per-pairing heading refinement — pin weights to the shipped files and tune
   tracking so large display sizes read as intentionally set, not defaulted. */
.bbt-font-pairing-luxury-serif h1,
.bbt-font-pairing-luxury-serif h2,
.bbt-font-pairing-luxury-serif h3,
.bbt-font-pairing-luxury-serif h4 {
  font-weight: 600;
  letter-spacing: 0;
}

.bbt-font-pairing-grooming h1,
.bbt-font-pairing-grooming h2,
.bbt-font-pairing-grooming h3,
.bbt-font-pairing-grooming h4 {
  font-weight: 600;
  letter-spacing: 0.006em;
}

.bbt-font-pairing-editorial h1,
.bbt-font-pairing-heritage h1 {
  letter-spacing: -0.01em;
}

.bbt-font-pairing-modern h1,
.bbt-font-pairing-minimal h1 {
  letter-spacing: -0.015em;
}

a {
  color: inherit;
}

:where(a, button, input, select, textarea, summary):focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--bbt-accent);
  outline-offset: 2px;
}

.bbt-mobile-booking-cta:focus-visible,
.bbp-public-booking-shell a:focus-visible,
.bbp-public-booking-shell button:focus-visible,
.bbp-public-booking-shell input:focus-visible,
.bbp-public-booking-shell select:focus-visible,
.bbp-public-booking-shell textarea:focus-visible,
.bbp-slot:focus-visible {
  outline-color: #ffffff;
  outline-offset: 3px;
}

img {
  max-width: 100%;
  height: auto;
}

/* Accessible visually-hidden utility. The theme references .screen-reader-text
   (menu label, skip link, section labels) but WordPress does not style it for
   classic themes, so it must be defined here or the text renders on-screen.
   The :focus variant reveals skip links for keyboard users. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  z-index: 100000;
  top: 12px;
  left: 12px;
  display: block;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  border-radius: var(--bbt-radius);
  background: var(--bbt-surface);
  box-shadow: 0 18px 48px rgba(17, 17, 17, 0.18);
  color: var(--bbt-text);
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: normal;
}

/* Respect reduced-motion: neutralise hover lifts, transitions and animations
   for users who opt out, without altering the static premium presentation. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.bbt-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
}

.bbt-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: var(--bbt-content);
  margin: 0 auto;
  padding: 10px 18px;
}

.bbt-header-style-floating .bbt-header {
  top: 12px;
  width: min(calc(100% - 24px), var(--bbt-content));
  margin: 0 auto;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 999px;
}

.bbt-header-style-floating .bbt-header-inner {
  padding: 10px 18px;
}

.bbt-header-style-line .bbt-header {
  background: var(--bbt-bg);
  backdrop-filter: none;
}

.bbt-header-style-centered .bbt-header-inner,
.bbt-header-style-crest .bbt-header-inner {
  justify-content: center;
}

.bbt-header-style-centered .bbt-brand,
.bbt-header-style-crest .bbt-brand {
  flex: 1;
  justify-content: center;
}

.bbt-header-style-editorial .bbt-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 2px solid var(--bbt-text);
}

.bbt-header-style-dark .bbt-header {
  background: rgba(13, 14, 13, 0.94);
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

/* Glass is the default presentation; declaring it explicitly lets a shop
   re-select it as an override over another preset's header style. */
.bbt-header-style-glass .bbt-header {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
  backdrop-filter: blur(18px);
}

.bbt-header-style-solid .bbt-header {
  background: var(--bbt-surface);
  border-bottom: 1px solid var(--bbt-line);
  backdrop-filter: none;
}

.bbt-header-style-bold .bbt-header {
  background: var(--bbt-surface);
  border-bottom: 3px solid var(--bbt-accent);
  backdrop-filter: none;
}

.bbt-header-style-bold .bbt-brand {
  font-weight: 900;
  letter-spacing: 0.01em;
}

.bbt-header-style-minimal .bbt-header {
  background: transparent;
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
  backdrop-filter: none;
}

.bbt-header-style-minimal .bbt-header-inner {
  padding-top: 10px;
  padding-bottom: 10px;
}

body.admin-bar .bbt-header {
  top: 32px;
}

body.admin-bar.bbt-header-style-floating .bbt-header {
  top: 44px;
}

@media (max-width: 782px) {
  body.admin-bar .bbt-header,
  body.admin-bar.bbt-header-style-floating .bbt-header {
    top: 46px;
  }
}

.bbt-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  text-decoration: none;
  /* The outer brand container holds its content width by default; only the
     inner text span is shrinkable (via min-width:0 + ellipsis below). This
     keeps the brand visible alongside the nav at all desktop widths, instead
     of collapsing to just the badge under flex row pressure. */
}

.bbt-footer-brand,
.bbt-hero h1,
.bbt-section-header h2,
.bbt-service h3,
.bbt-staff-card h3,
.bbt-review-card blockquote {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* The brand sits in a tight flex row beside the nav. When localized nav
   labels are long (e.g. German "Öffnungszeiten"), the row pressure
   shrinks the brand. It must shrink gracefully — never break
   character-by-character into a vertical column. Keep it on a single
   line and ellipsize at the extreme. */
.bbt-brand span:last-child {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bbt-brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--bbt-dark);
  color: #fff;
  font-size: 14px;
}

.bbt-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
}

/* Each navigation label is a discrete unit and must not wrap mid-label,
   e.g. German "Häufige Fragen" or "Öffnungszeiten" splitting onto two
   lines mid-row. If the row truly cannot fit, the mobile breakpoint
   below switches to the hamburger nav. */
.bbt-nav a {
  white-space: nowrap;
}

.bbt-nav a:not(.bbt-button) {
  color: var(--bbt-muted);
  text-decoration: none;
}

.bbt-nav li,
.bbt-mobile-nav li,
.bbt-footer-nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bbt-nav a:not(.bbt-button):hover,
.bbt-nav a:not(.bbt-button):focus {
  color: var(--bbt-text);
}

/* Keep the inline nav CTA on one line — its global overflow-wrap:anywhere
   (needed for long body labels) would otherwise let flex crush it to a
   vertical sliver when the bar is tight. */
.bbt-desktop-nav .bbt-button {
  white-space: nowrap;
}

.bbt-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--bbt-text);
  cursor: pointer;
}

.bbt-menu-toggle span:not(.screen-reader-text) {
  position: absolute;
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.bbt-menu-toggle span:nth-child(1) {
  transform: translateY(-6px);
}

.bbt-menu-toggle span:nth-child(3) {
  transform: translateY(6px);
}

.bbt-menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg);
}

.bbt-menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.bbt-menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: rotate(-45deg);
}

.bbt-mobile-panel {
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
  background: rgba(247, 247, 244, 0.98);
  backdrop-filter: blur(18px);
}

.bbt-mobile-nav {
  display: grid;
  gap: 8px;
  max-width: var(--bbt-content);
  margin: 0 auto;
  padding: 12px 20px 18px;
}

.bbt-mobile-nav a:not(.bbt-button):not(.bbt-contact-action) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: var(--bbt-radius);
  background: rgba(255, 255, 255, 0.78);
  color: var(--bbt-text);
  padding: 10px 13px;
  font-weight: 760;
  text-decoration: none;
}

/* The booking CTA and call action inside the mobile panel keep their own
   component styling (accent button / contact action) and stretch full-width
   as grid items, so the primary action reads as a button, not a nav row. */
.bbt-mobile-nav .bbt-button,
.bbt-mobile-nav .bbt-contact-action {
  width: 100%;
}

.bbt-language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  padding: 4px;
  font-size: 13px;
}

.bbt-language-switcher a {
  border-radius: 999px;
  color: var(--bbt-muted);
  padding: 6px 9px;
  text-decoration: none;
}

.bbt-language-switcher a.is-active {
  background: var(--bbt-dark);
  color: #fff;
}

.bbt-button,
.bbp-booking-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: var(--bbt-radius);
  background: var(--bbt-accent);
  color: var(--bbt-on-accent);
  padding: 12px 18px;
  text-align: center;
  font-weight: 760;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.bbt-button:not(.secondary):hover,
.bbp-booking-form button:hover {
  background: var(--bbt-accent-strong);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(17, 17, 17, 0.16);
}

.bbt-button:not(.secondary):active,
.bbp-booking-form button:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(17, 17, 17, 0.14);
}

.bbt-button.secondary {
  border: 1px solid var(--bbt-line);
  background: transparent;
  color: var(--bbt-text);
}

.bbt-button.secondary:hover {
  border-color: var(--bbt-accent);
  color: var(--bbt-accent-ink);
  transform: translateY(-1px);
}

.bbt-main {
  min-height: 70vh;
}

.bbt-public-notice {
  margin: 18px auto 0;
  max-width: var(--bbt-content);
  padding: 14px 18px;
  border: 1px solid rgba(180, 123, 66, 0.32);
  border-radius: 8px;
  background: rgba(255, 250, 241, 0.92);
  color: #5f3b15;
  font-weight: 700;
}

.bbt-hero {
  min-height: calc(100vh - 72px);
  display: grid;
  align-items: end;
  border-bottom: 1px solid var(--bbt-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(247, 247, 244, 0.98) 100%);
  background-size: cover;
  background-position: center;
  color: var(--bbt-text);
}

/* The no-image hero is the PRIMARY launch state (most shops go live before
   adding a photo), so it must read as a finished, balanced band on its own —
   never a tall, near-empty wash. Proportion it to its content instead of a
   forced full-viewport height, vertically centre the copy against the highlight
   panel, and use symmetric padding so the headline appears immediately. The
   bottom-anchored full-bleed treatment is preserved for image heroes. The
   .bbt-main prefix raises specificity over the per-hero-style min-heights. */
.bbt-main .bbt-hero:not(.has-hero-media) {
  min-height: 480px;
  align-items: center;
}

.bbt-main .bbt-hero:not(.has-hero-media) .bbt-hero-inner {
  align-items: center;
  padding-block: clamp(56px, 7vh, 88px);
}

.bbt-hero.has-hero-media {
  border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(17, 17, 17, 0.28) 0%, rgba(17, 17, 17, 0.78) 100%),
    var(--bbt-hero-image);
  color: #fff;
}

.bbt-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.48fr);
  align-items: end;
  gap: clamp(28px, 5vw, 72px);
  width: 100%;
  max-width: var(--bbt-content);
  margin: 0 auto;
  padding: clamp(76px, 12vh, 150px) 20px 54px;
}

.bbt-hero-copy {
  min-width: 0;
}

.bbt-hero-panel {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: var(--bbt-radius);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 24px 70px rgba(17, 17, 17, 0.09);
  padding: 14px;
  backdrop-filter: blur(18px);
}

.bbt-hero-panel span {
  display: flex;
  align-items: center;
  min-height: 58px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: var(--bbt-radius);
  background: rgba(255, 255, 255, 0.78);
  color: var(--bbt-muted);
  padding: 12px 14px;
  font-weight: 780;
}

.bbt-hero-service-preview {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: var(--bbt-radius);
  background: rgba(255, 255, 255, 0.82);
  padding: 14px;
}

.bbt-hero-service-preview small {
  color: var(--bbt-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bbt-hero-service-preview a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 42px;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  color: var(--bbt-text);
  padding-top: 8px;
  text-decoration: none;
}

.bbt-hero-service-preview strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.bbt-hero-service-preview a:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.bbt-hero-service-preview em {
  color: var(--bbt-accent-ink);
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.bbt-hero.has-hero-media .bbt-hero-panel {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
}

.bbt-hero.has-hero-media .bbt-hero-panel span {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.86);
}

.bbt-hero.has-hero-media .bbt-hero-service-preview {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.14);
}

.bbt-hero.has-hero-media .bbt-hero-service-preview small,
.bbt-hero.has-hero-media .bbt-hero-service-preview em,
.bbt-hero.has-hero-media .bbt-hero-service-preview a {
  color: #fff;
}

.bbt-hero.has-hero-media .bbt-hero-service-preview a {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.bbt-eyebrow {
  margin: 0 0 16px;
  color: var(--bbt-accent-ink);
  font-size: 13px;
  font-weight: 780;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bbt-hero h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(2.75rem, 5.2vw + 1rem, 4.75rem);
  line-height: 0.98;
  letter-spacing: 0;
}

/* :not(.bbt-eyebrow) so the hero paragraph styling never swallows the eyebrow
   kicker — without it the eyebrow inherited 21px muted body type (0,1,1 beats
   the eyebrow's 0,1,0), collapsing the kicker→headline→lede hierarchy. */
.bbt-hero p:not(.bbt-eyebrow) {
  max-width: 660px;
  margin: 20px 0 28px;
  color: var(--bbt-muted);
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.3125rem);
}

.bbt-hero.has-hero-media .bbt-eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

.bbt-hero.has-hero-media p:not(.bbt-eyebrow) {
  color: rgba(255, 255, 255, 0.86);
}

/* Over a hero image the page text token is dark, so the transparent outline CTA
   would render as invisible dark-on-dark. Give it a luminous treatment so both
   hero CTAs stay clearly legible against the photo. */
.bbt-hero.has-hero-media .bbt-button.secondary {
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}

.bbt-hero.has-hero-media .bbt-button.secondary:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.bbt-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.bbt-button-style-pill .bbt-button,
.bbt-button-style-pill .bbp-booking-form button {
  border-radius: 999px;
}

.bbt-button-style-square .bbt-button,
.bbt-button-style-square .bbp-booking-form button {
  border-radius: 7px;
}

.bbt-hero-style-editorial .bbt-hero h1 {
  max-width: 900px;
}

.bbt-hero-style-split .bbt-hero {
  min-height: 82vh;
}

.bbt-hero-style-crest .bbt-hero-panel span::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-inline-end: 10px;
  border-radius: 999px;
  background: var(--bbt-accent-2);
}

/* ----------------------------------------------------------------------------
   Expanded hero variants — one front-page.php hero, curated presentations.
   Layout changes that would clash with the mobile hero (single column, hidden
   panel) are scoped to >=761px; tonal styling applies at all widths.
   ---------------------------------------------------------------------------- */
.bbt-hero-style-warm .bbt-hero:not(.has-hero-media) {
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.84) 0%, rgba(245, 240, 232, 0.98) 100%);
}

/* Hero-style WARM emits a cream gradient that clashes badly with dark style-mode
   (cream band on a near-black page when no hero image is set). Per-style heroes
   are styled tonally even at small widths, so the dark style-mode reset must
   appear AFTER the warm rule on the same path. Chained body classes give us a
   higher specificity (0,3,1) than either rule alone, so dark always wins. */
.bbt-style-mode-dark.bbt-hero-style-warm .bbt-hero:not(.has-hero-media),
.bbt-style-mode-dark.bbt-hero-style-quiet .bbt-hero:not(.has-hero-media) {
  background: linear-gradient(180deg, var(--bbt-surface) 0%, var(--bbt-bg) 100%);
}

.bbt-hero-style-quiet .bbt-hero h1 {
  font-size: clamp(2.4rem, 4vw + 1rem, 3.9rem);
}

.bbt-hero-style-cinematic .bbt-hero h1 {
  font-size: clamp(3rem, 6vw + 1rem, 5.5rem);
  line-height: 0.94;
}

@media (min-width: 761px) {
  /* Editorial widens the copy column over the panel. Desktop-only so it never
     overrides the mobile single-column hero (which would crush the headline). */
  .bbt-hero-style-editorial .bbt-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
  }

  .bbt-hero-style-quiet .bbt-hero {
    min-height: 72vh;
  }

  .bbt-hero-style-quiet .bbt-hero-panel {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: none;
  }

  .bbt-hero-style-cinematic .bbt-hero {
    min-height: 100vh;
    align-items: center;
  }

  .bbt-hero-style-centered .bbt-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .bbt-hero-style-centered .bbt-hero-copy {
    max-width: 860px;
  }

  .bbt-hero-style-centered .bbt-hero h1,
  .bbt-hero-style-centered .bbt-hero p {
    margin-inline: auto;
  }

  .bbt-hero-style-centered .bbt-hero-actions {
    justify-content: center;
  }

  .bbt-hero-style-centered .bbt-hero-panel {
    width: 100%;
    max-width: 820px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Span the services preview across the full panel row so it doesn't sit as a
     lone card in column 1 with two empty cells beside it. */
  .bbt-hero-style-centered .bbt-hero-service-preview {
    grid-column: 1 / -1;
  }

  .bbt-hero-style-minimal .bbt-hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .bbt-hero-style-minimal .bbt-hero-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0;
    margin-top: 4px;
  }

  .bbt-hero-style-minimal .bbt-hero-panel span {
    min-height: 0;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--bbt-muted);
    font-size: 13px;
    font-weight: 700;
  }

  .bbt-hero-style-minimal .bbt-hero-panel span::before {
    content: "\2014";
    margin-inline-end: 8px;
    color: var(--bbt-accent-ink);
  }

  /* ==========================================================================
     Distinct hero ARCHITECTURES per style (desktop >=761px) — THM-1 / THM-2.
     Previously editorial/split/crest/warm/quiet/cinematic all rendered the same
     copy-left + panel-right aside, so presets read as one template in different
     paint. Each style now owns a composition. Mobile (<761px) still collapses
     to a single column and never hides the panel, so small screens (and the
     archetype-identity test) are unchanged.
     ========================================================================== */

  /* SPLIT — balanced two columns with a substantial, vertically-centred panel
     (modern-berlin-minimal, fresh-urban-green, turkish-barber-style). */
  .bbt-hero-style-split .bbt-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.74fr);
    align-items: center;
  }

  /* EDITORIAL — magazine asymmetry: a leading accent rule sets the kicker over
     the already-widened copy column (clean-white-luxury, editorial-studio-white). */
  .bbt-hero-style-editorial .bbt-hero-copy::before {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin-bottom: 22px;
    background: var(--bbt-accent);
  }

  /* CREST — formal, centred emblem layout; the brass-dot highlights become a
     strip beneath the headline (heritage-brass). */
  .bbt-hero-style-crest .bbt-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .bbt-hero-style-crest .bbt-hero-copy {
    max-width: 760px;
  }

  .bbt-hero-style-crest .bbt-hero h1,
  .bbt-hero-style-crest .bbt-hero p:not(.bbt-eyebrow) {
    margin-inline: auto;
  }

  .bbt-hero-style-crest .bbt-hero-actions {
    justify-content: center;
  }

  .bbt-hero-style-crest .bbt-hero-panel {
    width: 100%;
    max-width: 760px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bbt-hero-style-crest .bbt-hero-service-preview {
    grid-column: 1 / -1;
  }

  /* CINEMATIC — image-forward single column; the side panel steps aside so the
     headline and photograph own the band (modern-masculine-dark). Hidden on
     desktop only — the trust strip + services sections still carry the content
     below, and mobile keeps the panel. */
  .bbt-hero-style-cinematic .bbt-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .bbt-hero-style-cinematic .bbt-hero-copy {
    max-width: 840px;
  }

  .bbt-hero-style-cinematic .bbt-hero h1,
  .bbt-hero-style-cinematic .bbt-hero p:not(.bbt-eyebrow) {
    margin-inline: auto;
  }

  .bbt-hero-style-cinematic .bbt-hero-actions {
    justify-content: center;
  }

  .bbt-hero-style-cinematic .bbt-hero-panel {
    display: none;
  }
}

/* Dark preset (style mode) readability: derive muted text, hairlines and the
   no-image hero wash from the active palette so the dark theme stays legible
   regardless of the chosen hero style. */
.bbt-style-mode-dark {
  --bbt-muted: rgba(245, 242, 236, 0.66);
  --bbt-line: rgba(255, 255, 255, 0.16);
}

.bbt-style-mode-dark .bbt-hero:not(.has-hero-media) {
  background: linear-gradient(180deg, var(--bbt-surface) 0%, var(--bbt-bg) 100%);
}

.bbt-style-mode-dark .bbt-hero-panel {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}

.bbt-style-mode-dark .bbt-hero-panel span {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

/* The signature-services preview keeps a near-white surface by default; on a
   dark hero (no image) its token-light text collapses to light-on-light. Use a
   recessed dark-glass fill with a light hairline so the nested card reads
   clearly and its accent price keeps AA contrast. */
.bbt-style-mode-dark .bbt-hero-service-preview {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.16);
}

.bbt-style-mode-dark .bbt-hero-service-preview a {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.bbt-style-mode-dark .bbt-header,
.bbt-style-mode-dark .bbt-mobile-nav,
.bbt-style-mode-dark .bbt-language-switcher {
  background: rgba(21, 22, 21, 0.88);
  color: var(--bbt-text);
}

.bbt-style-mode-dark .bbt-brand,
.bbt-style-mode-dark .bbt-nav a:not(.bbt-button),
.bbt-style-mode-dark .bbt-mobile-nav a:not(.bbt-button) {
  color: var(--bbt-text);
}

.bbt-style-mode-dark .bbt-button.secondary {
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--bbt-text);
}

/* Dark preset coverage for components that otherwise carry a hardcoded light
   surface. On a dark page their light background + light token text collapses
   to an unreadable light-on-light pairing, so re-tint them onto the dark page. */
.bbt-style-mode-dark .bbt-menu-toggle,
.bbt-style-mode-dark .bbt-mobile-nav a:not(.bbt-button):not(.bbt-contact-action),
.bbt-style-mode-dark .bbt-contact-action,
.bbt-style-mode-dark .bbt-whatsapp-floating {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--bbt-text);
}

.bbt-style-mode-dark .bbt-social-list a {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--bbt-text);
}

.bbt-style-mode-dark .bbt-trust-strip {
  background: rgba(255, 255, 255, 0.04);
}

.bbt-style-mode-dark .bbt-trust-inner span {
  border-inline-start-color: rgba(255, 255, 255, 0.12);
}

.bbt-style-mode-glass .bbt-hero-panel,
.bbt-style-mode-glass .bbt-service,
.bbt-style-mode-glass .bbt-staff-card,
.bbt-style-mode-glass .bbt-review-card,
.bbt-style-mode-glass .bbt-empty-panel,
.bbt-style-mode-glass .bbt-language-switcher {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(17, 17, 17, 0.09);
  box-shadow: 0 24px 70px rgba(17, 17, 17, 0.07);
  backdrop-filter: blur(18px);
}

.bbt-style-mode-glass .bbt-hero:not(.has-hero-media) {
  background:
    radial-gradient(circle at 18% 18%, var(--bbt-accent-soft) 0, transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, var(--bbt-bg) 100%);
}

.bbt-style-mode-minimal {
  --bbt-line: rgba(17, 17, 17, 0.12);
}

.bbt-style-mode-minimal .bbt-hero:not(.has-hero-media) {
  background: var(--bbt-bg);
}

.bbt-style-mode-minimal .bbt-hero-panel,
.bbt-style-mode-minimal .bbt-service,
.bbt-style-mode-minimal .bbt-staff-card,
.bbt-style-mode-minimal .bbt-review-card,
.bbt-style-mode-minimal .bbt-empty-panel {
  box-shadow: none;
  border-color: var(--bbt-line);
}

.bbt-style-mode-minimal .bbt-eyebrow,
.bbt-style-mode-silver .bbt-eyebrow {
  letter-spacing: 0.04em;
}

.bbt-style-mode-silver {
  --bbt-muted: #637176;
  --bbt-line: rgba(81, 99, 105, 0.2);
}

.bbt-style-mode-silver .bbt-hero:not(.has-hero-media) {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(231, 236, 237, 0.88) 52%, var(--bbt-bg) 100%);
}

.bbt-style-mode-silver .bbt-header,
.bbt-style-mode-silver .bbt-language-switcher,
.bbt-style-mode-silver .bbt-hero-panel {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(81, 99, 105, 0.18);
  box-shadow: 0 18px 55px rgba(41, 53, 57, 0.06);
  backdrop-filter: blur(16px);
}

.bbt-style-mode-silver .bbt-service,
.bbt-style-mode-silver .bbt-staff-card,
.bbt-style-mode-silver .bbt-gallery-item,
.bbt-style-mode-silver .bbt-review-card,
.bbt-style-mode-silver .bbt-empty-panel {
  border-color: rgba(81, 99, 105, 0.18);
  box-shadow: 0 20px 60px rgba(41, 53, 57, 0.055);
}

.bbt-style-mode-heritage .bbt-eyebrow,
.bbt-style-mode-editorial .bbt-eyebrow {
  letter-spacing: 0.08em;
}

.bbt-style-mode-lounge .bbt-hero:not(.has-hero-media),
.bbt-style-mode-heritage .bbt-hero:not(.has-hero-media) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74) 0%, rgba(250, 246, 237, 0.98) 100%);
}

.bbt-style-mode-fresh .bbt-trust-strip {
  background: rgba(238, 248, 241, 0.78);
}

.bbt-header-style-crest .bbt-brand-mark {
  border: 1px solid var(--bbt-accent-2);
  background: transparent;
  color: var(--bbt-text);
  box-shadow: inset 0 0 0 3px var(--bbt-surface);
}

.bbt-header-style-crest .bbt-brand span:last-child {
  font-family: var(--bbt-font-head);
  letter-spacing: 0.02em;
}

.bbt-preset-heritage-brass .bbt-hero:not(.has-hero-media) {
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.86) 0%, rgba(247, 244, 237, 0.98) 100%);
}

.bbt-preset-heritage-brass .bbt-hero-panel,
.bbt-preset-heritage-brass .bbt-service,
.bbt-preset-heritage-brass .bbt-staff-card,
.bbt-preset-heritage-brass .bbt-review-card {
  border-color: rgba(179, 122, 50, 0.24);
}

.bbt-card-style-soft .bbt-service,
.bbt-card-style-soft .bbt-staff-card,
.bbt-card-style-soft .bbt-gallery-item,
.bbt-card-style-soft .bbt-review-card,
.bbt-card-style-soft .bbt-empty-panel {
  box-shadow: 0 18px 55px rgba(17, 17, 17, 0.06);
}

.bbt-card-style-line .bbt-service,
.bbt-card-style-line .bbt-staff-card,
.bbt-card-style-line .bbt-gallery-item,
.bbt-card-style-line .bbt-review-card,
.bbt-card-style-line .bbt-empty-panel {
  box-shadow: none;
  border-color: rgba(17, 17, 17, 0.16);
}

.bbt-card-style-bordered .bbt-service,
.bbt-card-style-bordered .bbt-staff-card,
.bbt-card-style-bordered .bbt-gallery-item,
.bbt-card-style-bordered .bbt-review-card,
.bbt-card-style-bordered .bbt-empty-panel {
  border-width: 2px;
}

.bbt-card-style-deep .bbt-service,
.bbt-card-style-deep .bbt-staff-card,
.bbt-card-style-deep .bbt-gallery-item,
.bbt-card-style-deep .bbt-review-card,
.bbt-card-style-deep .bbt-empty-panel {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

.bbt-card-style-warm .bbt-service,
.bbt-card-style-warm .bbt-staff-card,
.bbt-card-style-warm .bbt-gallery-item,
.bbt-card-style-warm .bbt-review-card,
.bbt-card-style-warm .bbt-empty-panel {
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.98) 0%, rgba(250, 246, 237, 0.96) 100%);
  border-color: rgba(117, 90, 59, 0.18);
  box-shadow: 0 22px 64px rgba(74, 54, 34, 0.075);
}

.bbt-section-rhythm-compact .bbt-section {
  padding-top: 52px;
  padding-bottom: 52px;
}

.bbt-section-rhythm-spacious .bbt-section {
  padding-top: 86px;
  padding-bottom: 86px;
}

.bbt-section {
  max-width: var(--bbt-content);
  margin: 0 auto;
  padding: 72px 20px;
}

.bbt-trust-strip {
  border-bottom: 1px solid var(--bbt-line);
  background: rgba(255, 255, 255, 0.56);
}

.bbt-trust-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  max-width: var(--bbt-content);
  margin: 0 auto;
  padding: 0 20px;
}

.bbt-trust-inner span {
  display: flex;
  align-items: center;
  min-height: 78px;
  border-inline-start: 1px solid rgba(17, 17, 17, 0.08);
  color: var(--bbt-muted);
  font-weight: 760;
  padding: 18px;
}

.bbt-trust-inner span:first-child {
  border-inline-start: 0;
}

.bbt-section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.bbt-section h2 {
  margin: 0;
  font-size: clamp(2.125rem, 2.6vw + 0.9rem, 2.75rem);
  line-height: 1.04;
  letter-spacing: 0;
}

.bbt-section-header p {
  max-width: 520px;
  margin: 0;
  color: var(--bbt-muted);
}

.bbt-service-grid,
.bbt-staff-grid,
.bbt-gallery-grid,
.bbt-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

.bbt-gallery-style-mosaic .bbt-gallery-grid {
  grid-template-columns: 1.2fr 0.8fr 1fr;
}

.bbt-gallery-style-grid .bbt-gallery-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.bbt-gallery-style-mosaic .bbt-gallery-item:nth-child(3n + 1) {
  grid-row: span 2;
}

.bbt-gallery-style-cinematic .bbt-gallery-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bbt-gallery-style-cinematic .bbt-gallery-item {
  aspect-ratio: 16 / 10;
}

.bbt-gallery-style-editorial .bbt-gallery-grid,
.bbt-gallery-style-warm-strip .bbt-gallery-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bbt-gallery-style-warm-strip .bbt-gallery-item {
  border-radius: 0;
}

.bbt-service,
.bbt-staff-card,
.bbt-gallery-item,
.bbt-review-card,
.bbt-empty-panel {
  min-width: 0;
  border: 1px solid var(--bbt-line);
  border-radius: var(--bbt-radius);
  background: var(--bbt-surface);
  overflow: hidden;
}

.bbt-service,
.bbt-staff-card,
.bbt-review-card {
  box-shadow: 0 18px 50px rgba(17, 17, 17, 0.045);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.bbt-service:hover,
.bbt-staff-card:hover,
.bbt-review-card:hover {
  border-color: rgba(15, 107, 99, 0.24);
  box-shadow: 0 24px 66px rgba(17, 17, 17, 0.075);
  transform: translateY(-2px);
}

.bbt-service,
.bbt-empty-panel {
  padding: 18px;
}

.bbt-empty-panel {
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 600px;
  margin-inline: auto;
  padding: 56px 40px;
  color: var(--bbt-muted);
  text-align: center;
}

/* An accent rule turns the empty state into a deliberately designed moment
   rather than a fallback notice. Most shops launch with little content, so
   these states ARE the primary commercial impression and must read as premium
   and intentional, never sparse or placeholder-like. */
.bbt-empty-panel::before {
  content: "";
  width: 44px;
  height: 3px;
  border-radius: 999px;
  background: var(--bbt-accent);
}

.bbt-empty-panel strong {
  color: var(--bbt-text);
  font-size: 24px;
  letter-spacing: -0.01em;
}

.bbt-empty-panel p {
  max-width: 48ch;
  margin: 0;
}

.bbt-gallery-placeholder-grid {
  margin-bottom: 14px;
}

.bbt-gallery-placeholder {
  min-height: 220px;
  border: 1px solid var(--bbt-line);
  border-radius: var(--bbt-radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(238, 232, 219, 0.86)),
    repeating-linear-gradient(135deg, rgba(24, 22, 18, 0.04) 0 1px, transparent 1px 12px);
}

.bbt-review-card {
  display: grid;
  align-content: space-between;
  min-height: 220px;
  margin: 0;
  padding: 18px;
}

.bbt-review-card blockquote {
  margin: 16px 0;
  color: var(--bbt-text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  line-height: 1.28;
}

.bbt-review-card figcaption {
  color: var(--bbt-muted);
  font-weight: 760;
}

.bbt-rating {
  color: var(--bbt-accent-ink);
  font-size: 13px;
  font-weight: 820;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bbt-service h3,
.bbt-staff-card h3 {
  margin: 0 0 8px;
  font-size: 20px;
}

.bbt-service p,
.bbt-staff-card p {
  margin: 0 0 16px;
  color: var(--bbt-muted);
}

.bbt-service-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--bbt-line);
  padding-top: 14px;
  font-weight: 760;
}

.bbt-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 42px;
  margin-top: 14px;
  border: 1px solid transparent;
  border-radius: var(--bbt-radius);
  background: var(--bbt-accent);
  color: var(--bbt-on-accent);
  font-size: 14px;
  font-weight: 820;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.bbt-card-action:hover,
.bbt-card-action:focus {
  background: var(--bbt-accent-strong);
  color: var(--bbt-on-accent);
}

.bbt-staff-card img,
.bbt-gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #ddd7cb;
}

.bbt-staff-avatar {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(238, 232, 219, 0.88)),
    repeating-linear-gradient(135deg, rgba(24, 22, 18, 0.04) 0 1px, transparent 1px 9px);
  color: var(--bbt-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 46px;
  font-weight: 700;
  letter-spacing: 0;
}

.bbt-staff-card-body {
  padding: 16px;
}

.bbt-booking-band {
  background: var(--bbt-dark);
  color: #fff;
}

.bbt-booking-band .bbt-section {
  padding-top: 72px;
  padding-bottom: 72px;
}

.bbt-booking-band .bbt-section-header p {
  color: rgba(255, 255, 255, 0.72);
}

.bbp-booking-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 820px;
}

.bbp-booking-steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}

.bbp-booking-steps span {
  display: flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--bbt-radius);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.82);
  padding: 9px 11px;
  font-size: 13px;
  font-weight: 780;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bbp-booking-steps span.is-active {
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.bbp-booking-steps span.is-complete {
  border-color: var(--bbt-accent);
  background: var(--bbt-accent);
  color: var(--bbt-on-accent);
}

.bbp-booking-steps span.is-complete::before {
  content: "\2713";
  margin-inline-end: 7px;
  font-weight: 900;
}

.bbp-booking-form label {
  display: grid;
  gap: 6px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  font-weight: 700;
}

.bbp-booking-form input,
.bbp-booking-form select,
.bbp-booking-form textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--bbt-radius);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  padding: 10px 12px;
  font: inherit;
}

.bbp-booking-form input::placeholder,
.bbp-booking-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.66);
}

.bbp-booking-form select option {
  color: #111;
}

.bbp-booking-form textarea,
.bbp-booking-form button,
.bbp-booking-form .bbp-consent,
.bbp-slot-panel,
.bbp-selected-time,
.bbp-booking-summary {
  grid-column: 1 / -1;
}

.bbp-booking-form .bbp-consent {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bbp-booking-form .bbp-consent input {
  width: auto;
  min-height: 0;
}

.bbp-booking-form .bbp-hp,
.bbp-hp {
  position: absolute;
  inset: auto;
  left: auto;
  right: auto;
  width: 1px;
  max-width: 1px;
  height: 1px;
  min-height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.bbp-slot-panel {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--bbt-radius);
  background: rgba(255, 255, 255, 0.06);
  padding: 12px;
}

.bbp-selected-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--bbt-radius);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.78);
  padding: 12px;
}

.bbp-selected-time strong {
  color: #fff;
}

.bbp-booking-summary {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--bbt-radius);
  background: rgba(255, 255, 255, 0.08);
  padding: 14px 16px;
}

.bbp-booking-summary[hidden] {
  display: none;
}

.bbp-booking-summary-title {
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.bbp-booking-summary-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bbp-booking-summary-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.bbp-booking-summary-list strong {
  color: #fff;
  font-weight: 800;
  text-align: end;
}

.bbp-booking-form button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.bbp-slot-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 14px;
}

.bbp-slot-panel .bbp-hold-status {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 700;
}

.bbp-slot-panel .bbp-hold-status.is-error {
  color: #ffd9cc;
}

.bbp-slot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bbp-slot {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: var(--bbt-radius);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 8px 12px;
  font: inherit;
  font-weight: 720;
  cursor: pointer;
}

.bbp-booking-contact-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--bbt-radius);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  padding: 8px 12px;
  font-weight: 760;
  text-decoration: none;
}

.bbp-slot:hover,
.bbp-slot:focus,
.bbp-slot.is-selected {
  border-color: #fff;
  background: #fff;
  color: var(--bbt-dark);
}

.bbp-booking-notice,
.bbp-booking-disabled {
  max-width: 820px;
  margin: 0 0 18px;
  border-radius: var(--bbt-radius);
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.bbp-booking-disabled strong {
  display: block;
  margin: 0 0 8px;
  font-size: 18px;
}

.bbp-booking-disabled p {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.82);
}

.bbp-booking-fallback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bbp-booking-fallback-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border-radius: var(--bbt-radius);
  background: #fff;
  color: var(--bbt-dark);
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 820;
  text-decoration: none;
}

.bbp-booking-confirmation {
  max-width: 820px;
  margin: 0 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--bbt-radius);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  padding: 18px;
}

.bbp-booking-confirmation .bbp-confirmation-eyebrow {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 840;
  text-transform: uppercase;
}

.bbp-booking-confirmation h3 {
  margin: 0 0 8px;
  font-size: 26px;
}

.bbp-booking-confirmation p {
  margin: 0;
}

.bbp-public-booking-page {
  min-height: 100vh;
  margin: 0;
  background: #f7f4ee;
  color: #181612;
}

.bbp-public-booking-shell {
  width: min(760px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(42px, 8vw, 92px) 0;
}

.bbp-public-booking-shell h1 {
  margin: 0 0 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.25rem, 3vw + 1rem, 3.375rem);
  letter-spacing: 0;
}

.bbp-public-summary,
.bbp-public-form,
.bbp-public-notice {
  border: 1px solid rgba(24, 22, 18, 0.12);
  border-radius: var(--bbt-radius);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 24px 80px rgba(24, 22, 18, 0.08);
  margin: 14px 0;
  padding: 18px;
}

.bbp-public-summary p {
  margin: 7px 0;
}

.bbp-public-form {
  display: grid;
  gap: 14px;
}

.bbp-public-form label {
  display: grid;
  gap: 7px;
  font-weight: 700;
}

.bbp-public-form input,
.bbp-public-form select,
.bbp-public-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(24, 22, 18, 0.14);
  border-radius: var(--bbt-radius);
  background: #fff;
  color: #181612;
  padding: 12px 13px;
  font: inherit;
}

.bbp-public-form button,
.bbp-public-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  border: 1px solid var(--bbt-accent);
  border-radius: var(--bbt-radius);
  background: var(--bbt-accent);
  color: var(--bbt-on-accent);
  padding: 12px 18px;
  font: inherit;
  font-weight: 780;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.bbp-public-form button:not(.is-secondary):hover,
.bbp-public-button:hover {
  border-color: var(--bbt-accent-strong);
  background: var(--bbt-accent-strong);
}

.bbp-public-form button.is-secondary {
  border-color: rgba(24, 22, 18, 0.16);
  background: #fff;
  color: #181612;
}

.bbp-public-notice.is-error {
  border-color: rgba(156, 57, 35, 0.28);
  background: #fff2ec;
  color: #7d2c19;
}

.bbp-error {
  background: #7f1d1d;
}

.bbp-success {
  background: #14532d;
}

.bbt-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.bbt-contact-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bbt-contact-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: var(--bbt-radius);
  background: #fff;
  color: var(--bbt-text);
  padding: 10px 14px;
  font-weight: 760;
  text-decoration: none;
}

.bbt-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: start;
}

.bbt-social-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}

.bbt-social-list a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--bbt-muted);
  padding: 6px 11px;
  font-size: 13px;
  font-weight: 760;
  text-decoration: none;
}

.bbt-promotion-grid,
.bbt-custom-sections,
.bbt-faq-list {
  display: grid;
  gap: 14px;
}

.bbt-promotion-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.bbt-promotion-card,
.bbt-custom-section-card,
.bbt-faq-item,
.bbt-hours-row {
  border: 1px solid var(--bbt-line);
  border-radius: var(--bbt-radius);
  background: var(--bbt-surface);
  box-shadow: 0 16px 44px rgba(17, 17, 17, 0.045);
}

.bbt-promotion-card {
  overflow: hidden;
}

.bbt-promotion-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.bbt-promotion-card > div,
.bbt-custom-section-copy {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.bbt-promotion-card h3,
.bbt-custom-section-card h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.1;
}

.bbt-promotion-card p,
.bbt-rich-text p {
  margin: 0;
  color: var(--bbt-muted);
}

.bbt-hours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.bbt-hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 14px 16px;
}

.bbt-hours-row span {
  color: var(--bbt-muted);
  font-weight: 760;
}

.bbt-hours-row strong {
  color: var(--bbt-text);
}

.bbt-contact-hours {
  margin-top: 18px;
}

.bbt-contact-hours .bbt-hours-grid {
  grid-template-columns: 1fr;
}

.bbt-contact-hours .bbt-hours-row {
  min-height: 44px;
  padding: 10px 12px;
}

.bbt-faq-item {
  padding: 0;
}

.bbt-faq-item summary {
  cursor: pointer;
  padding: 16px 18px;
  color: var(--bbt-text);
  font-weight: 820;
}

.bbt-faq-item div {
  border-top: 1px solid var(--bbt-line);
  color: var(--bbt-muted);
  padding: 0 18px 18px;
}

.bbt-custom-section-card {
  overflow: hidden;
}

.bbt-custom-section-card.is-split,
.bbt-custom-section-card.is-media {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.bbt-custom-section-card.is-highlight {
  border-color: rgba(15, 107, 99, 0.22);
  background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(236,246,243,0.92));
}

.bbt-custom-section-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.bbt-whatsapp-floating {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 48px rgba(17, 17, 17, 0.16);
  color: var(--bbt-text);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  backdrop-filter: blur(14px);
}

.bbt-mobile-booking-cta {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 999px;
  background: var(--bbt-accent);
  box-shadow: 0 18px 48px rgba(17, 17, 17, 0.22);
  color: var(--bbt-on-accent);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 850;
  text-decoration: none;
}

.bbt-footer {
  border-top: 1px solid var(--bbt-line);
  color: var(--bbt-muted);
  background: rgba(255, 255, 255, 0.48);
}

.bbt-footer-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 1fr;
  gap: 24px;
  max-width: var(--bbt-content);
  margin: 0 auto;
  padding: 34px 20px 86px;
}

.bbt-footer-brand {
  color: var(--bbt-text);
  font-weight: 850;
  text-decoration: none;
}

.bbt-footer-inner p {
  margin: 8px 0 0;
}

.bbt-footer-nav,
.bbt-footer-contact {
  display: grid;
  gap: 8px;
  align-content: start;
}

.bbt-footer-nav a,
.bbt-footer-contact a {
  color: var(--bbt-muted);
  text-decoration: none;
}

.bbt-footer-nav a:hover,
.bbt-footer-contact a:hover {
  color: var(--bbt-text);
}

/* ----------------------------------------------------------------------------
   Footer style variants — one footer.php DOM, curated presentations. The base
   rule keeps a generous bottom padding so the fixed mobile booking CTA never
   overlaps footer content; variants only adjust top padding, tone and type.
   ---------------------------------------------------------------------------- */
.bbt-footer-style-bordered .bbt-footer {
  background: var(--bbt-surface);
  border-top: 2px solid var(--bbt-text);
}

.bbt-footer-style-minimal .bbt-footer {
  background: transparent;
  border-top: 1px solid var(--bbt-line);
}

.bbt-footer-style-minimal .bbt-footer-inner {
  padding-top: 24px;
}

.bbt-footer-style-minimal .bbt-footer-brand {
  font-size: 15px;
}

.bbt-footer-style-minimal .bbt-footer-nav,
.bbt-footer-style-minimal .bbt-footer-contact {
  font-size: 14px;
}

.bbt-footer-style-editorial .bbt-footer {
  background: var(--bbt-surface);
  border-top: 1px solid var(--bbt-line);
}

.bbt-footer-style-editorial .bbt-footer-inner {
  padding-top: 56px;
}

.bbt-footer-style-editorial .bbt-footer-brand {
  font-family: var(--bbt-font-head);
  font-size: 24px;
  letter-spacing: -0.01em;
}

.bbt-footer-style-editorial .bbt-footer-nav a {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 800;
}

.bbt-footer-style-dark .bbt-footer {
  background: #15171a;
  border-top: 0;
  color: rgba(255, 255, 255, 0.66);
}

.bbt-footer-style-dark .bbt-footer-brand {
  color: #ffffff;
}

.bbt-footer-style-dark .bbt-footer-nav a,
.bbt-footer-style-dark .bbt-footer-contact a {
  color: rgba(255, 255, 255, 0.72);
}

.bbt-footer-style-dark .bbt-footer-nav a:hover,
.bbt-footer-style-dark .bbt-footer-contact a:hover {
  color: #ffffff;
}

.bbt-footer-style-centered .bbt-footer-inner {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 16px;
}

.bbt-footer-style-centered .bbt-footer-nav,
.bbt-footer-style-centered .bbt-footer-contact {
  justify-items: center;
}

.bbt-footer-style-centered .bbt-social-list {
  justify-content: center;
}

.bbp-rtl {
  direction: rtl;
  --bbt-font-body: "Segoe UI", Tahoma, Arial, sans-serif;
  --bbt-font-head: "Segoe UI", Tahoma, Arial, sans-serif;
  font-family: var(--bbt-font-body);
  letter-spacing: 0;
}

.bbp-rtl .bbt-header-inner,
.bbp-rtl .bbt-section-header,
.bbp-rtl .bbt-service-meta,
.bbp-rtl .bbt-hero-actions,
.bbp-rtl .bbt-contact-actions,
.bbp-rtl .bbt-social-list {
  flex-direction: row;
}

.bbp-rtl .bbt-hero,
.bbp-rtl .bbt-section,
.bbp-rtl .bbp-booking-form,
.bbp-rtl .bbt-review-card,
.bbp-rtl .bbt-hero-panel {
  text-align: right;
}

.bbp-rtl .bbt-hero h1,
.bbp-rtl .bbt-section-header h2,
.bbp-rtl .bbt-footer-brand,
.bbp-rtl .bbt-eyebrow,
.bbp-rtl .bbt-rating,
.bbp-rtl .bbt-hero-service-preview small {
  /* Arabic is cursive — letter-spacing breaks letter joining, so the premium
     Latin tracking on these uppercase micro-labels is neutralised in RTL. */
  letter-spacing: 0;
}

.bbp-rtl .bbt-hero-actions,
.bbp-rtl .bbt-contact-actions,
.bbp-rtl .bbt-social-list {
  justify-content: flex-start;
}

.bbp-rtl.bbt-hero-style-centered .bbt-hero-inner,
.bbp-rtl.bbt-hero-style-crest .bbt-hero-inner,
.bbp-rtl.bbt-hero-style-cinematic .bbt-hero-inner,
.bbp-rtl.bbt-footer-style-centered .bbt-footer-inner {
  text-align: center;
}

.bbp-rtl.bbt-header-style-crest .bbt-brand span:last-child {
  letter-spacing: 0;
}

.bbp-rtl .bbt-whatsapp-floating {
  right: auto;
  left: 18px;
}

/* The mobile booking CTA is a symmetric full-width bar (left:14/right:14), not a
   corner button, so it needs no RTL flip — flipping it collapsed it to a small
   right-anchored pill in Arabic. It now stays full-width in both directions. */

@media (min-width: 761px) and (max-width: 1024px) {
  .bbt-gallery-style-editorial .bbt-gallery-grid,
  .bbt-gallery-style-warm-strip .bbt-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bbt-gallery-style-mosaic .bbt-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bbt-gallery-style-mosaic .bbt-gallery-item:nth-child(3n + 1) {
    grid-row: auto;
  }

  .bbt-footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* The full primary nav (brand + links + CTA + up to four languages) needs room
   to breathe and crowds well before the body layout collapses — especially in
   German/Turkish, where it forces the brand to wrap. Switch the header alone to
   the compact menu earlier (matching the sales site's 980px nav breakpoint) so
   the CTA and brand never collapse, while sections keep their tablet layout. */
@media (max-width: 980px) {
  .bbt-desktop-nav {
    display: none;
  }

  .bbt-menu-toggle {
    display: inline-flex;
  }

  .bbt-language-switcher {
    margin-inline-start: auto;
  }
}

@media (max-width: 760px) {
  .bbt-header-inner {
    gap: 10px;
    padding-inline: 14px;
  }

  .bbt-brand {
    flex: 1 1 auto;
  }

  .bbt-language-switcher {
    flex: 0 1 auto;
    max-width: 46vw;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-size: 12px;
  }

  .bbt-language-switcher a {
    padding: 5px 7px;
  }

  .bbt-menu-toggle {
    flex: 0 0 44px;
  }

  .bbt-desktop-nav {
    display: none;
  }

  .bbt-menu-toggle {
    display: inline-flex;
  }

  .bbt-language-switcher {
    margin-inline-start: auto;
  }

  .bbt-hero {
    min-height: 76vh;
  }

  .bbt-hero-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: clamp(64px, 12vh, 98px) 18px 40px;
  }

  .bbt-hero h1 {
    max-width: 100%;
    font-size: clamp(2.25rem, 12vw, 3.35rem);
    line-height: 1;
  }

  .bbt-hero-style-cinematic .bbt-hero h1 {
    font-size: clamp(2.45rem, 13vw, 3.65rem);
    line-height: 0.98;
  }

  .bbt-hero p:not(.bbt-eyebrow) {
    max-width: 100%;
    font-size: 1.05rem;
  }

  .bbt-hero-actions .bbt-button {
    flex: 1 1 100%;
    width: 100%;
  }

  .bbt-hero-panel {
    display: grid;
    gap: 8px;
    margin-top: 4px;
    padding: 12px;
    box-shadow: 0 18px 44px rgba(17, 17, 17, 0.08);
  }

  .bbt-hero-panel span {
    min-height: 0;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.35;
  }

  .bbt-hero-service-preview {
    padding: 12px;
  }

  .bbt-hero-service-preview a {
    display: grid;
    gap: 4px;
    align-items: start;
  }

  .bbt-hero-service-preview em {
    white-space: normal;
  }

  body.admin-bar .bbt-header,
  body.admin-bar.bbt-header-style-floating .bbt-header {
    top: 46px;
  }

  .bbt-section-header,
  .bbt-contact {
    display: block;
  }

  .bbt-custom-section-card.is-split,
  .bbt-custom-section-card.is-media {
    grid-template-columns: 1fr;
  }

  .bbt-header-style-floating .bbt-header {
    top: 0;
    width: 100%;
    border-radius: 0;
  }

  .bbt-header-style-centered .bbt-brand,
  .bbt-header-style-crest .bbt-brand {
    justify-content: flex-start;
  }

  .bbt-gallery-style-mosaic .bbt-gallery-grid,
  .bbt-gallery-style-cinematic .bbt-gallery-grid,
  .bbt-gallery-style-editorial .bbt-gallery-grid,
  .bbt-gallery-style-warm-strip .bbt-gallery-grid {
    grid-template-columns: 1fr;
  }

  .bbt-service-grid,
  .bbt-staff-grid,
  .bbt-review-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bbt-gallery-style-mosaic .bbt-gallery-item:nth-child(3n + 1) {
    grid-row: auto;
  }

  .bbt-trust-inner {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .bbt-trust-inner span {
    min-height: 0;
    border-inline-start: 0;
    border-top: 1px solid rgba(17, 17, 17, 0.08);
    padding: 14px 20px;
  }

  .bbt-trust-inner span:first-child {
    border-top: 0;
  }

  .bbp-booking-form {
    grid-template-columns: 1fr;
  }

  .bbp-booking-form input,
  .bbp-booking-form select,
  .bbp-booking-form textarea,
  .bbp-booking-form button {
    min-width: 0;
    max-width: 100%;
  }

  .bbp-booking-steps {
    grid-template-columns: 1fr;
  }

  .bbt-mobile-booking-cta {
    display: inline-flex;
    right: 14px;
    left: 14px;
    width: auto;
    white-space: normal;
  }

  .bbt-whatsapp-floating {
    bottom: 76px;
    max-width: calc(100vw - 32px);
    white-space: normal;
  }

  .bbt-footer-inner {
    grid-template-columns: 1fr;
  }
}