/* =========================================================================
   «Барбер» — a template for barbershops.

   Tobacco-dark leather and cream paper, brass hairlines and barber-pole
   stripes, a heavy high-contrast serif for headlines and a narrow sign
   face for prices, menus and buttons. Photos stand in arched mirror frames;
   cards carry an inset brass rule like a framed price card on the wall.

   1. Fonts             5. Header            9. Shared blocks re-dressed
   2. Design settings   6. Footer           10. Phones and motion
   3. Tokens and tones  7. Kit: pole, seal, mirror, board
   4. Type, buttons     8. Own blocks
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Fonts — self-hosted: Playfair Display and Oswald (assets/fonts, OFL),
   the parent's Manrope, Inter, Onest and Unbounded.
   ------------------------------------------------------------------------- */

@font-face { font-family: 'Barber Playfair'; font-style: normal; font-display: swap; font-weight: 400 900;
    src: url('../fonts/playfair-display-cyrillic-wght-normal.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Barber Playfair'; font-style: normal; font-display: swap; font-weight: 400 900;
    src: url('../fonts/playfair-display-latin-wght-normal.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+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barber Oswald'; font-style: normal; font-display: swap; font-weight: 200 700;
    src: url('../fonts/oswald-cyrillic-wght-normal.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Barber Oswald'; font-style: normal; font-display: swap; font-weight: 200 700;
    src: url('../fonts/oswald-latin-wght-normal.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+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barber Manrope'; font-style: normal; font-display: swap; font-weight: 200 800;
    src: url('/themes/default/assets/fonts/manrope-cyrillic-wght-normal.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Barber Manrope'; font-style: normal; font-display: swap; font-weight: 200 800;
    src: url('/themes/default/assets/fonts/manrope-latin-wght-normal.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+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barber Inter'; font-style: normal; font-display: swap; font-weight: 100 900;
    src: url('/themes/default/assets/fonts/inter-cyrillic-wght-normal.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Barber Inter'; font-style: normal; font-display: swap; font-weight: 100 900;
    src: url('/themes/default/assets/fonts/inter-latin-wght-normal.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+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barber Onest'; font-style: normal; font-display: swap; font-weight: 100 900;
    src: url('/themes/default/assets/fonts/onest-cyrillic-wght-normal.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Barber Onest'; font-style: normal; font-display: swap; font-weight: 100 900;
    src: url('/themes/default/assets/fonts/onest-latin-wght-normal.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+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barber Unbounded'; font-style: normal; font-display: swap; font-weight: 200 900;
    src: url('/themes/default/assets/fonts/unbounded-cyrillic-wght-normal.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Barber Unbounded'; font-style: normal; font-display: swap; font-weight: 200 900;
    src: url('/themes/default/assets/fonts/unbounded-latin-wght-normal.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+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* -------------------------------------------------------------------------
   2. Design settings (theme.json → design.controls). Core prints the
   owner's values as :root{--barber-…} after this file.
   ------------------------------------------------------------------------- */

:root {
    --barber-accent: #b8322a;
    --barber-brass: #c9a45c;
    --barber-font-display: 'Barber Playfair', 'Playfair Display', Georgia, serif;
    --barber-font-body: 'Barber Manrope', 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --barber-font-label: 'Barber Oswald', 'Oswald', 'Arial Narrow', sans-serif;
    --barber-radius: 0px;
}

/* -------------------------------------------------------------------------
   3. Tokens and tones
   ------------------------------------------------------------------------- */

:root:root {
    --bb-red: var(--barber-accent);
    --bb-red-hi: color-mix(in srgb, var(--bb-red), #ffffff 14%);
    --bb-red-lo: color-mix(in srgb, var(--bb-red), #000000 22%);
    --bb-brass: var(--barber-brass);
    --bb-brass-dim: color-mix(in srgb, var(--bb-brass) 42%, transparent);
    --bb-brass-ink: color-mix(in srgb, var(--bb-brass), #000000 48%);
    --bb-cream: #f3ebdd;         /* text on the red */
    --bb-navy: #22304a;          /* the third stripe of the pole */
    --bb-label: var(--barber-font-label);

    --bb-bg: #13100d;
    --bb-surface: #1c1713;
    --bb-raise: #251e18;
    --bb-sunk: #0c0a08;
    --bb-line: #30271f;
    --bb-line-hi: #4a3d31;
    --bb-text: #d8cdbd;
    --bb-strong: #f4ede1;
    --bb-muted: #a89b8c;
    --bb-faint: #807466;

    --bb-paper: #efe6d6;
    --bb-paper-card: #f8f2e7;
    --bb-paper-line: #d3c4a9;
    --bb-ink: #1d1712;
    --bb-ink-text: #3a3027;
    --bb-ink-muted: #5f5347;

    --bb-r: var(--barber-radius);
    --bb-hair: 1px solid var(--bb-line);
    --bb-pole: repeating-linear-gradient(-45deg, var(--bb-red) 0 9px, var(--bb-cream) 9px 18px, var(--bb-navy) 18px 27px, var(--bb-cream) 27px 36px);

    --c-bg: var(--bb-bg);
    --c-surface: var(--bb-surface);
    --c-surface-sunk: var(--bb-sunk);
    --c-text: var(--bb-text);
    --c-text-strong: var(--bb-strong);
    --c-text-muted: var(--bb-muted);
    --c-text-faint: var(--bb-faint);
    --c-border: var(--bb-line);
    --c-border-strong: var(--bb-line-hi);
    --c-accent: var(--bb-red);
    --c-accent-hover: var(--bb-red-hi);
    --c-accent-contrast: var(--bb-cream);
    --c-accent-soft: color-mix(in srgb, var(--bb-red) 14%, var(--bb-bg));
    --c-link: var(--bb-brass);
    --c-link-hover: var(--bb-strong);
    --c-mark: var(--bb-brass);
    --c-mark-text: var(--bb-brass);
    --c-mark-soft: color-mix(in srgb, var(--bb-brass) 14%, var(--bb-bg));
    --c-slab: var(--bb-sunk);
    --c-slab-text: var(--bb-strong);
    --c-slab-muted: var(--bb-muted);
    --c-danger: #ff7a6b;
    --c-success: #8fc98a;

    --font-display: var(--barber-font-display);
    --font-ui: var(--barber-font-body);
    --font-prose: var(--barber-font-body);
    --font-mono: var(--barber-font-label);
    --fw-heading: 800;
    --tr-tight: -0.015em;
    --tr-snug: -0.01em;
    --lh-tight: 1.04;
    --lh-snug: 1.12;
    --t-lg: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
    --t-xl: clamp(1.5rem, 1.15rem + 1.4vw, 2.4rem);
    --t-2xl: clamp(2rem, 1.3rem + 2.8vw, 3.7rem);
    --t-3xl: clamp(2.3rem, 1.3rem + 3.6vw, 4.3rem);

    --r-xs: var(--bb-r);
    --r-sm: var(--bb-r);
    --r-md: var(--bb-r);
    --r-lg: var(--bb-r);
    --r-btn: var(--bb-r);
    --card-radius: var(--bb-r);
    --card-bg: var(--bb-surface);
    --card-border: 1px solid var(--bb-line);
    --card-shadow: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: 0 30px 60px -30px rgb(0 0 0 / 0.85);
    --shadow-lift: 0 30px 60px -30px rgb(0 0 0 / 0.85);

    --w-container: 76rem;
    --w-wide: 86rem;
    --sp-sm: clamp(2.5rem, 2rem + 2.5vw, 4rem);
    --sp-md: clamp(4.5rem, 3rem + 5vw, 7.5rem);
    --sp-lg: clamp(5.5rem, 3.5rem + 7vw, 10rem);

    color-scheme: dark;
}

html[data-barber-palette="ink"] {
    --bb-bg: #0f1216;
    --bb-surface: #171b21;
    --bb-raise: #1f242c;
    --bb-sunk: #090b0e;
    --bb-line: #262c35;
    --bb-line-hi: #3a424e;
    --bb-text: #cfd3d8;
    --bb-strong: #f1f0ec;
    --bb-muted: #9ba2ab;
    --bb-faint: #737a84;
    --bb-paper: #ebe8e1;
    --bb-paper-card: #f6f4ef;
    --bb-paper-line: #cfcabd;
    --bb-ink: #14171c;
    --bb-ink-text: #30343b;
    --bb-ink-muted: #545a63;
}

html[data-barber-palette="oxblood"] {
    --bb-bg: #170d0e;
    --bb-surface: #221415;
    --bb-raise: #2d1b1c;
    --bb-sunk: #0f0808;
    --bb-line: #3a2426;
    --bb-line-hi: #553538;
    --bb-text: #dfcdc6;
    --bb-strong: #f7ece6;
    --bb-muted: #b09a93;
    --bb-faint: #87716b;
    --bb-paper: #f1e5dc;
    --bb-paper-card: #faf2ec;
    --bb-paper-line: #dbc4b6;
    --bb-ink: #231314;
    --bb-ink-text: #45302f;
    --bb-ink-muted: #6a514d;
}

html.barber { background-color: var(--bb-bg); }

body.bb-body {
    background-color: var(--bb-bg);
    color: var(--c-text);
    font-family: var(--font-ui);
    font-feature-settings: 'lnum' 1;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--bb-red); color: var(--bb-cream); }

/* Tones. The id-level boost keeps the site's generated tones out. */

/* Soft: cream paper — or, with «paper» off, a darker leather band. */
.cms-tone-soft:not(#bb) {
    --section-bg: var(--bb-sunk);
    --c-bg: var(--bb-sunk);
    --c-surface: var(--bb-surface);
    --card-bg: var(--bb-surface);
    background-color: var(--bb-sunk);
}

html[data-barber-paper="on"] .cms-tone-soft:not(#bb) {
    --section-bg: var(--bb-paper);
    --c-bg: var(--bb-paper);
    --c-surface: var(--bb-paper-card);
    --c-surface-sunk: color-mix(in srgb, var(--bb-paper), #000 5%);
    --c-text: var(--bb-ink-text);
    --c-text-strong: var(--bb-ink);
    --c-text-muted: var(--bb-ink-muted);
    --c-text-faint: color-mix(in srgb, var(--bb-ink-muted), var(--bb-paper) 25%);
    --c-border: var(--bb-paper-line);
    --c-border-strong: color-mix(in srgb, var(--bb-paper-line), #000 18%);
    --c-accent-soft: color-mix(in srgb, var(--bb-red) 10%, var(--bb-paper));
    --c-link: var(--bb-red-lo);
    --c-link-hover: var(--bb-ink);
    --c-mark: var(--bb-brass-ink);
    --c-mark-text: var(--bb-brass-ink);
    --card-bg: var(--bb-paper-card);
    --card-border: 1px solid var(--bb-paper-line);
    --bb-brass-dim: color-mix(in srgb, var(--bb-brass-ink) 45%, transparent);
    --bb-line: var(--bb-paper-line);
    color: var(--bb-ink-text);
    background-color: var(--bb-paper);
    background-image:
        radial-gradient(circle at 18% 22%, rgb(120 90 50 / 0.07), transparent 38%),
        radial-gradient(circle at 82% 78%, rgb(120 90 50 / 0.08), transparent 42%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    color-scheme: light;
}

:is(.cms-tone-dark, .cms-on-dark):not(#bb) {
    --section-bg: var(--bb-sunk);
    --c-bg: var(--bb-sunk);
    --c-surface: var(--bb-surface);
    --card-bg: var(--bb-surface);
    color-scheme: dark;
}
.cms-tone-dark:not(#bb) {
    background-color: var(--bb-sunk);
    background-image: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--bb-brass) 7%, transparent), transparent 60%);
}

.cms-tone-primary:not(#bb),
.cms-tone-accent:not(#bb) {
    --section-bg: var(--bb-red);
    --c-bg: var(--bb-red);
    --c-surface: var(--bb-red-lo);
    --c-text: color-mix(in srgb, var(--bb-cream) 88%, var(--bb-red));
    --c-text-strong: var(--bb-cream);
    --c-text-muted: color-mix(in srgb, var(--bb-cream) 75%, var(--bb-red));
    --c-border: color-mix(in srgb, var(--bb-cream) 26%, transparent);
    --c-accent: var(--bb-cream);
    --c-accent-hover: #ffffff;
    --c-accent-contrast: var(--bb-red-lo);
    --c-link: var(--bb-cream);
    background-color: var(--bb-red);
    color-scheme: dark;
}

/* -------------------------------------------------------------------------
   4. Type, buttons, section heads
   ------------------------------------------------------------------------- */

body.bb-body :is(h1, h2, h3, h4) {
    font-family: var(--font-display);
    color: var(--c-text-strong);
}

/* Page titles of module pages. */
body.bb-body h1:not(.bb-hero__title) {
    font-size: clamp(2rem, 1.2rem + 3vw, 3.8rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.cms-section__head { max-width: 54rem; margin-block-end: clamp(2rem, 1.4rem + 2vw, 3.4rem); }

/* An engraved ornament over every section title: rule, diamond, rule. */
.cms-section__head .cms-section__title::before {
    content: '';
    display: block;
    width: 5.5rem;
    height: 12px;
    margin-block-end: 1.1rem;
    background-color: var(--bb-brass);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 12'%3E%3Cpath d='M0 5.5h34v1H0zM54 5.5h34v1H54z'/%3E%3Cpath d='M44 0l6 6-6 6-6-6z'/%3E%3Ccircle cx='36.5' cy='6' r='1.3'/%3E%3Ccircle cx='51.5' cy='6' r='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 12'%3E%3Cpath d='M0 5.5h34v1H0zM54 5.5h34v1H54z'/%3E%3Cpath d='M44 0l6 6-6 6-6-6z'/%3E%3Ccircle cx='36.5' cy='6' r='1.3'/%3E%3Ccircle cx='51.5' cy='6' r='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-barber-paper="on"] .cms-tone-soft .cms-section__head .cms-section__title::before { background-color: var(--bb-red); }
.cms-section__head--center .cms-section__title::before { margin-inline: auto; }

.cms-section__title {
    font-weight: var(--fw-heading);
    letter-spacing: var(--tr-snug);
    line-height: 1.06;
    text-wrap: balance;
}

.cms-section__subtitle {
    max-width: 44rem;
    color: var(--c-text-muted);
    font-size: var(--t-md);
    line-height: 1.6;
}

.bb-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 1.3rem;
    font-family: var(--bb-label);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bb-brass);
}
.bb-eyebrow::before,
.bb-eyebrow::after {
    content: '';
    flex: 0 0 2.2rem;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}
.bb-eyebrow::after { flex-basis: 0; flex-grow: 0; }

.cms-btn {
    min-height: 52px;
    padding: 0.85rem 1.7rem;
    border-radius: var(--r-btn);
    font-family: var(--bb-label);
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cms-btn--primary {
    background-color: var(--c-accent);
    color: var(--c-accent-contrast);
    border-color: var(--c-accent);
    box-shadow: inset 0 0 0 1px var(--c-accent), inset 0 0 0 4px color-mix(in srgb, var(--c-accent-contrast) 22%, transparent);
}
.cms-btn--primary:hover {
    background-color: var(--c-accent-hover);
    border-color: var(--c-accent-hover);
    color: var(--c-accent-contrast);
}
.cms-btn--ghost {
    border: 1px solid var(--bb-brass-dim);
    color: var(--c-text-strong);
    background: transparent;
}
.cms-btn--ghost:hover {
    border-color: var(--bb-brass);
    color: var(--c-text-strong);
    background: color-mix(in srgb, var(--bb-brass) 10%, transparent);
}

:focus-visible { outline-color: var(--bb-brass); }

.bb-ticks { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.bb-ticks li { position: relative; padding-inline-start: 1.6rem; line-height: 1.5; color: var(--c-text); }
.bb-ticks li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0.1rem;
    top: 0.5em;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--bb-red);
    transform: rotate(45deg);
}

/* Density */
html[data-barber-density="compact"] {
    --sp-sm: clamp(2rem, 1.6rem + 1.6vw, 3rem);
    --sp-md: clamp(3rem, 2.2rem + 3.4vw, 5rem);
    --sp-lg: clamp(4rem, 3rem + 4vw, 6.5rem);
}

/* Forms */
body.bb-body .cms-form__input,
body.bb-body .cms-calc__number {
    background-color: color-mix(in srgb, var(--c-text-strong) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-text-strong) 18%, transparent);
    border-radius: var(--bb-r);
    color: var(--c-text-strong);
}
body.bb-body .cms-form__input::placeholder { color: var(--c-text-faint); }
body.bb-body :is(.cms-form__input, .cms-calc__number):focus {
    border-color: var(--bb-brass);
    outline: 2px solid color-mix(in srgb, var(--bb-brass) 35%, transparent);
    outline-offset: 0;
}
body.bb-body select.cms-form__input option { background: var(--bb-surface); color: var(--bb-strong); }
body.bb-body .cms-form__label {
    font-family: var(--bb-label);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
body.bb-body .cms-form__req { color: var(--bb-red); }
body.bb-body input[type="checkbox"],
body.bb-body input[type="radio"] { accent-color: var(--bb-red); }
body.bb-body .cms-form__check { color: var(--c-text-muted); font-size: 0.86rem; }

/* -------------------------------------------------------------------------
   5. Header
   ------------------------------------------------------------------------- */

.bb-hdr.site-header {
    background-color: var(--bb-sunk);
    border-bottom: 0;
    color: var(--bb-text);
}

.bb-hdr .hdr-row__inner { max-width: var(--w-wide); }

.bb-hdr .hdr-row--top {
    background: var(--bb-sunk);
    border-bottom: 1px solid var(--bb-line);
    color: var(--bb-muted);
    font-family: var(--bb-label);
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.bb-hdr .hdr-row--top .hdr-row__inner { min-height: 2.35rem; }
.bb-hdr .hdr-row--top .cms-icon { color: var(--bb-brass); }
.bb-hdr .hdr-row--top a { color: inherit; }
.bb-hdr .hdr-row--top a:hover { color: var(--bb-strong); }
.bb-hdr .hdr-row--top .hdr-el + .hdr-el::before {
    content: '◆';
    margin-inline-end: 1rem;
    font-size: 0.5rem;
    color: var(--bb-red);
}

.bb-hdr .hdr-row--main {
    position: relative;
    background: var(--bb-bg);
    padding-bottom: 6px;
}
.bb-hdr .hdr-row--main .hdr-row__inner { min-height: 5rem; }

.bb-pole {
    display: block;
    height: 6px;
    background: var(--bb-pole);
}
html[data-barber-pole="off"] .bb-pole {
    background: linear-gradient(90deg, transparent, var(--bb-brass-dim) 15%, var(--bb-brass-dim) 85%, transparent);
    height: 1px;
}
.bb-hdr__pole {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
}

.bb-logo { color: var(--bb-strong); gap: 0.8rem; }
.bb-logo__mark { width: 2.9rem; height: 2.9rem; color: var(--bb-brass); flex: none; }
.bb-hdr .hdr-logo__text { gap: 0.15rem; }
.bb-hdr .hdr-logo__name,
.bb-drawer .hdr-logo__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.45rem;
    letter-spacing: 0.01em;
    line-height: 1;
    color: var(--bb-strong);
}
.bb-hdr .hdr-logo__tagline {
    font-family: var(--bb-label);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bb-brass);
}

.bb-hdr .hdr-nav__link {
    font-family: var(--bb-label);
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bb-text);
}
.bb-hdr .hdr-nav__link:hover,
.bb-hdr .hdr-nav__link.is-active { color: var(--bb-strong); }
.bb-hdr .hdr-nav__link.is-active { box-shadow: inset 0 -2px 0 var(--bb-red); }
.bb-hdr .hdr-nav__toggle { color: var(--bb-brass); }

.bb-hdr .hdr-sub {
    background: var(--bb-surface);
    border: 1px solid var(--bb-line-hi);
    border-top: 3px solid var(--bb-red);
    border-radius: 0;
    box-shadow: var(--shadow-lg);
}
.bb-hdr .hdr-sub__link { color: var(--bb-text); font-size: 0.95rem; border-radius: 0; }
.bb-hdr .hdr-sub__link:hover { background: var(--bb-raise); color: var(--bb-strong); }

.bb-hdr .hdr-phone__number {
    font-family: var(--bb-label);
    font-size: 1.08rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--bb-strong);
}
.bb-hdr .hdr-phone__caption { font-size: 0.72rem; color: var(--bb-muted); }
.bb-hdr .hdr-button { min-height: 46px; padding-inline: 1.3rem; }
.bb-hdr .hdr-icon-btn,
.bb-hdr .shop-hlink { color: var(--bb-strong); }
.bb-burger { color: var(--bb-strong); }

/* Emblem layout (default): the menu on the left, the logo in the middle as
   a round sign hanging below the bar, the phone and button on the right. */
@media (min-width: 60rem) {
    html:not([data-barber-header="line"]) .bb-hdr .hdr-row--main .hdr-row__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
    }
    html:not([data-barber-header="line"]) .bb-hdr .hdr-row--main .hdr-zone:has(> .hdr-nav) { grid-column: 1; grid-row: 1; justify-content: flex-start; }
    html:not([data-barber-header="line"]) .bb-hdr .hdr-row--main .hdr-zone:has(> .hdr-nav) :is(.hdr-nav, .hdr-nav__list) { justify-content: flex-start; }
    html:not([data-barber-header="line"]) .bb-hdr .hdr-row--main .bb-hdr__zone--brand { grid-column: 2; grid-row: 1; justify-content: center; }
    html:not([data-barber-header="line"]) .bb-hdr .hdr-row--main .hdr-zone--right { grid-column: 3; grid-row: 1; justify-content: flex-end; margin: 0; }

    html:not([data-barber-header="line"]) .bb-hdr__zone--brand .bb-logo {
        position: relative;
        flex-direction: column;
        gap: 0.35rem;
        margin-block: -0.4rem -1.9rem;
        padding: 0.85rem 1.6rem 0.9rem;
        background: var(--bb-bg);
        border: 1px solid var(--bb-brass-dim);
        border-top: 0;
        border-radius: 0 0 999px 999px / 0 0 3.2rem 3.2rem;
        text-align: center;
        z-index: 2;
    }
    html:not([data-barber-header="line"]) .bb-hdr__zone--brand .bb-logo::after {
        content: '';
        position: absolute;
        inset: 0 5px 5px;
        border: 1px solid var(--bb-brass-dim);
        border-top: 0;
        border-radius: inherit;
        pointer-events: none;
    }
    html:not([data-barber-header="line"]) .bb-hdr__zone--brand .hdr-logo__text { align-items: center; }
    html:not([data-barber-header="line"]) .bb-hdr__zone--brand .bb-logo__mark { width: 2.5rem; height: 2.5rem; }
    html:not([data-barber-header="line"]) .bb-hdr__zone--brand .hdr-logo__name { font-size: 1.55rem; }
    html:not([data-barber-header="line"]) .bb-hdr__zone--brand .hdr-logo__image img { max-height: calc(var(--logo-h, 44px) * 1.2); }
}

.bb-drawer.hdr-drawer {
    background: var(--bb-sunk);
    color: var(--bb-text);
    border-left: 1px solid var(--bb-line-hi);
}
.bb-drawer .hdr-drawer__close { color: var(--bb-strong); }
.bb-drawer a { color: var(--bb-strong); }
.bb-drawer .cms-icon { color: var(--bb-brass); }
.bb-drawer__pole { margin-block-start: 2rem; }

/* -------------------------------------------------------------------------
   6. Footer
   ------------------------------------------------------------------------- */

.bb-ftr.site-footer {
    background-color: var(--bb-sunk);
    color: var(--bb-muted);
    border-top: 0;
}
.bb-ftr__pole { height: 10px; }
html[data-barber-pole="off"] .bb-ftr__pole { height: 1px; }

.bb-ftr__seal-row {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    max-width: var(--w-wide);
    margin: 0 auto;
    padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) var(--gutter) 0;
}
.bb-ftr__rule {
    flex: 1 1 0;
    height: 5px;
    border-block: 1px solid var(--bb-brass-dim);
}
.bb-ftr__seal { width: clamp(7.5rem, 6rem + 5vw, 10rem); height: auto; color: var(--bb-brass); flex: none; }

.bb-seal { overflow: visible; }
.bb-seal__ring {
    font-family: var(--bb-label);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.18em;
    fill: currentColor;
}
.bb-seal__center {
    font-family: var(--font-display);
    font-size: 58px;
    font-weight: 800;
    fill: currentColor;
}

.bb-ftr .site-footer__inner { max-width: var(--w-wide); }
.bb-ftr .ftr-col__title {
    font-family: var(--bb-label);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bb-brass);
}
.bb-ftr .ftr-menu__link { color: var(--bb-text); }
.bb-ftr .ftr-menu__link:hover { color: var(--bb-strong); }
.bb-ftr .ftr-about { color: var(--bb-muted); line-height: 1.65; }
.bb-ftr .ftr-contacts__phone a {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--bb-strong);
}
.bb-ftr .ftr-contacts__line { color: var(--bb-text); }
.bb-ftr .ftr-contacts .cms-icon { color: var(--bb-brass); }
.bb-ftr__bottom.ftr-bottom {
    border-top: 1px solid var(--bb-line);
    font-family: var(--bb-label);
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bb-faint);
}
.bb-ftr__bottom a { color: var(--bb-muted); }
.bb-ftr__bottom a:hover { color: var(--bb-strong); }

/* -------------------------------------------------------------------------
   7. Kit — the arched mirror, the price board, the seal
   ------------------------------------------------------------------------- */

.bb-mirror {
    position: relative;
    margin: 0;
    padding: 9px;
    border: 1px solid var(--bb-brass);
    border-radius: 999px 999px 3px 3px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--bb-brass) 18%, transparent), transparent 40%);
}
.bb-mirror::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid var(--bb-brass-dim);
    border-radius: inherit;
    pointer-events: none;
}
.bb-mirror > img,
.bb-mirror__img,
.bb-mirror__empty {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 999px 999px 0 0;
    background: var(--bb-surface);
}
html[data-barber-cards="plain"] .bb-mirror,
html[data-barber-cards="plain"] .bb-mirror > img,
html[data-barber-cards="plain"] .bb-mirror__img,
html[data-barber-cards="plain"] .bb-mirror__empty { border-radius: var(--bb-r); }

.bb-board {
    padding: 1.2rem 1.4rem 1.1rem;
    border: 1px solid var(--bb-brass-dim);
    background: color-mix(in srgb, var(--bb-sunk) 70%, transparent);
    outline: 1px solid color-mix(in srgb, var(--bb-brass) 18%, transparent);
    outline-offset: 4px;
}
.bb-board__title {
    margin: 0 0 0.7rem;
    font-family: var(--bb-label);
    font-size: 0.76rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bb-brass);
}
.bb-board__list { display: grid; gap: 0.55rem; margin: 0; }
.bb-board__row { display: flex; align-items: baseline; gap: 0.6rem; }
.bb-board__row::after { content: none; }
.bb-board__name {
    order: 1;
    color: var(--bb-strong);
    font-size: 1rem;
}
.bb-board__row::before {
    content: '';
    order: 2;
    flex: 1 1 1rem;
    min-width: 1rem;
    border-bottom: 2px dotted color-mix(in srgb, var(--bb-brass) 55%, transparent);
    transform: translateY(-0.25em);
}
.bb-board__price {
    order: 3;
    margin: 0;
    font-family: var(--bb-label);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--bb-brass);
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   8. Own blocks
   ------------------------------------------------------------------------- */

/* 8.1 First screen */
.bb-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--bb-bg);
    background-image:
        radial-gradient(ellipse at 78% 30%, color-mix(in srgb, var(--bb-brass) 12%, transparent), transparent 55%),
        radial-gradient(ellipse at 10% 100%, color-mix(in srgb, var(--bb-red) 12%, transparent), transparent 50%);
    color: var(--bb-text);
}
.bb-hero__pole {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: 14px;
    background: var(--bb-pole);
    background-size: 100% 50.9px;
    box-shadow: inset 3px 0 6px rgb(0 0 0 / 0.45), inset -2px 0 4px rgb(255 255 255 / 0.2);
}
html[data-barber-pole="off"] .bb-hero__pole { display: none; }
.bb-hero__frame {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(2rem, 1rem + 4vw, 5.5rem);
    align-items: center;
    max-width: var(--w-wide);
    margin-inline: auto;
    padding: clamp(3.5rem, 2rem + 5vw, 7rem) calc(var(--gutter) + 14px) clamp(3.5rem, 2rem + 5vw, 6.5rem) var(--gutter);
}
.bb-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5.4rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: var(--bb-strong);
    text-wrap: balance;
}
.bb-hero__lead {
    max-width: 36rem;
    margin: 1.6rem 0 0;
    font-size: var(--t-md);
    line-height: 1.65;
    color: var(--bb-text);
}
.bb-hero__actions { margin-block-start: 2.2rem; }
.bb-hero__board { max-width: 30rem; margin-block-start: 2.6rem; }
.bb-hero__media { position: relative; max-width: 30rem; justify-self: center; width: 100%; }
.bb-hero__seal {
    position: absolute;
    width: clamp(7.5rem, 5.5rem + 5vw, 10.5rem);
    height: auto;
    left: clamp(-3.5rem, -3vw, -1rem);
    bottom: 12%;
    color: var(--bb-brass);
    filter: drop-shadow(0 12px 22px rgb(0 0 0 / 0.55));
}
.bb-seal__disc { fill: var(--bb-sunk); stroke: currentColor; stroke-width: 2; }
.bb-hero__seal .bb-seal__spin { transform-origin: 100px 100px; }
.bb-hero--no-photo .bb-mirror__empty {
    background:
        repeating-linear-gradient(45deg, transparent 0 14px, color-mix(in srgb, var(--bb-brass) 8%, transparent) 14px 15px),
        var(--bb-surface);
}

@media (prefers-reduced-motion: no-preference) {
    .bb-hero__pole { animation: bb-pole 6s linear infinite; }
    .bb-hero__seal .bb-seal__spin { animation: bb-spin 40s linear infinite; }
}
@keyframes bb-pole { to { background-position: 0 50.9px; } }
@keyframes bb-spin { to { transform: rotate(360deg); } }

/* 8.2 Price board by master levels */
.bb-menu {
    --bb-price-w: 7.2rem;
    display: grid;
    gap: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
.bb-menu__levels,
.bb-menu__row {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(2rem, 1fr) calc(var(--bb-cols) * var(--bb-price-w));
    column-gap: 1rem;
    align-items: end;
}
.bb-menu__levels {
    grid-template-columns: minmax(0, 1fr) repeat(var(--bb-cols), var(--bb-price-w));
    column-gap: 0;
    padding-block: 0 0.8rem;
    margin-block-end: -1rem;
    border-bottom: 1px solid var(--bb-brass-dim);
}
.bb-menu__level { display: grid; gap: 0.15rem; text-align: end; }
.bb-menu__level-name {
    font-family: var(--bb-label);
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-strong);
}
.bb-menu__level-note { font-size: 0.74rem; color: var(--c-text-muted); }
.bb-menu__group-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 0.6rem;
    font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
    font-weight: 700;
}
.bb-menu__group-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bb-brass-dim);
}
.bb-menu__list { margin: 0; padding: 0; list-style: none; }
.bb-menu__row {
    padding-block: 1rem;
    border-bottom: 1px dashed color-mix(in srgb, var(--c-border) 90%, transparent);
}
.bb-menu__row:last-child { border-bottom: 0; }
.bb-menu__name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.7rem;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
    font-weight: 700;
    color: var(--c-text-strong);
}
.bb-menu__badge {
    padding: 0.18rem 0.5rem;
    background: var(--bb-red);
    color: var(--bb-cream);
    font-family: var(--bb-label);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.bb-menu__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1rem;
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: var(--c-text-muted);
}
.bb-menu__time { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--bb-label); letter-spacing: 0.06em; }
.bb-menu__time .cms-icon { width: 0.9rem; height: 0.9rem; color: var(--bb-brass); }
html[data-barber-paper="on"] .cms-tone-soft .bb-menu__time .cms-icon { color: var(--bb-red); }
.bb-menu__leader {
    align-self: end;
    margin-block-end: 0.45rem;
    border-bottom: 2px dotted var(--bb-brass-dim);
}
.bb-menu__prices {
    display: grid;
    grid-template-columns: repeat(var(--bb-cols), var(--bb-price-w));
    margin: 0;
}
.bb-menu__cell { text-align: end; }
.bb-menu__cell-level { display: none; }
.bb-menu__price {
    margin: 0;
    font-family: var(--bb-label);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--c-text-strong);
    white-space: nowrap;
}
.bb-menu__cell:first-child .bb-menu__price { color: var(--bb-brass); }
html[data-barber-paper="on"] .cms-tone-soft .bb-menu__cell:first-child .bb-menu__price { color: var(--bb-red-lo); }
.bb-menu__cell.is-empty .bb-menu__price { color: var(--c-text-faint); }
.bb-menu__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding-block-start: 1.5rem;
    border-top: 5px double var(--bb-brass-dim);
}
.bb-menu__note { max-width: 40rem; margin: 0; color: var(--c-text-muted); }

/* 8.3 Gift certificate */
.bb-cert {
    display: grid;
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: center;
}
.bb-cert--card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.bb-cert__text { max-width: 36rem; margin: 0 0 1.4rem; font-size: var(--t-md); line-height: 1.65; }
.bb-cert__points { margin-block-end: 1.8rem; }
.bb-cert__nominals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.9rem;
    margin: 0 0 1.8rem;
    padding: 0;
    list-style: none;
}
.bb-stub__link {
    position: relative;
    display: grid;
    gap: 0.3rem;
    height: 100%;
    padding: 1.1rem 1.1rem 1rem 1.5rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    text-decoration: none;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bb-stub__link::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0.55rem;
    border-left: 2px dotted var(--bb-brass-dim);
}
a.bb-stub__link:hover { border-color: var(--bb-red); transform: translateY(-2px); }
.bb-stub__value {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--c-text-strong);
}
.bb-stub__title {
    font-family: var(--bb-label);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bb-red);
}
.bb-cert__note { margin: 1rem 0 0; font-size: 0.88rem; color: var(--c-text-muted); }
.bb-stub__text { font-size: 0.88rem; color: var(--c-text-muted); }

.bb-cert__stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 24rem;
    padding: clamp(1.5rem, 1rem + 3vw, 3.5rem) clamp(1rem, 0.5rem + 2vw, 2rem);
}
.bb-cert__photo {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
}
.bb-cert__photo img { width: 100%; height: 100%; object-fit: cover; }
.bb-cert__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgb(10 8 6 / 0.35), rgb(10 8 6 / 0.7)); }

.bb-ticket {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.2rem;
    width: min(100%, 30rem);
    color: var(--bb-strong);
    background: var(--bb-bg);
    box-shadow: 0 30px 50px -20px rgb(0 0 0 / 0.7);
    transform: rotate(-3deg);
}
.bb-ticket__main {
    position: relative;
    display: grid;
    gap: 0.4rem;
    padding: 2.3rem 1.8rem 1.6rem;
    border: 1px solid var(--bb-brass);
    outline: 1px solid var(--bb-brass-dim);
    outline-offset: -8px;
    border-right: 0;
}
.bb-ticket__pole { position: absolute; top: 0; left: 0; right: 0; height: 8px; }
.bb-ticket__label {
    font-family: var(--bb-label);
    font-size: 0.8rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--bb-brass);
}
.bb-ticket__value {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem);
    font-weight: 900;
    line-height: 1;
    color: var(--bb-strong);
}
.bb-ticket__note { font-size: 0.92rem; color: var(--bb-muted); }
.bb-ticket__brand {
    margin-block-start: 1rem;
    padding-block-start: 0.8rem;
    border-top: 1px solid var(--bb-line-hi);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bb-brass);
}
.bb-ticket__stub {
    position: relative;
    display: grid;
    place-items: center;
    border: 1px solid var(--bb-brass);
    border-left: 2px dashed var(--bb-brass-dim);
    background: var(--bb-red);
}
.bb-ticket__stub::before,
.bb-ticket__stub::after {
    content: '';
    position: absolute;
    left: -11px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--section-bg, var(--c-bg));
}
.bb-ticket__stub::before { top: -11px; }
.bb-ticket__stub::after { bottom: -11px; }
.bb-cert__photo ~ .bb-ticket .bb-ticket__stub::before,
.bb-cert__photo ~ .bb-ticket .bb-ticket__stub::after { background: #2a211a; }
.bb-ticket__serial {
    writing-mode: vertical-rl;
    font-family: var(--bb-label);
    font-size: 0.95rem;
    letter-spacing: 0.24em;
    color: var(--bb-cream);
}

/* 8.4 House rules */
.bb-rules { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.bb-rules--aside { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr); }
.bb-rules__list { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.bb-rules__item {
    display: grid;
    grid-template-columns: 4.6rem minmax(0, 1fr);
    gap: 1.2rem;
    padding-block: 1.3rem;
    border-bottom: 1px solid var(--c-border);
}
.bb-rules__item:first-child { border-top: 5px double var(--bb-brass-dim); }
.bb-rules__num {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.6rem);
    font-weight: 900;
    line-height: 1;
    color: var(--bb-red);
}
.bb-rules__title { margin: 0.2rem 0 0; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); font-weight: 700; line-height: 1.25; }
.bb-rules__text { margin: 0.45rem 0 0; color: var(--c-text-muted); line-height: 1.6; }
.bb-rules__aside { display: grid; gap: 1.6rem; position: sticky; top: 7rem; }
.bb-rules__mirror { max-width: 22rem; }
.bb-rules__quote { margin: 0; }
.bb-rules__quote p {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.7rem);
    font-weight: 600;
    line-height: 1.35;
    color: var(--c-text-strong);
}
.bb-rules__quote p::before { content: '«'; color: var(--bb-red); }
.bb-rules__quote p::after { content: '»'; color: var(--bb-red); }
.bb-rules__sign { display: grid; gap: 0.15rem; margin-block-start: 1rem; }
.bb-rules__sign cite {
    font-style: normal;
    font-family: var(--bb-label);
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-text-strong);
}
.bb-rules__sign span { font-size: 0.88rem; color: var(--c-text-muted); }

/* -------------------------------------------------------------------------
   9. Shared blocks re-dressed
   ------------------------------------------------------------------------- */

/* Framed cards: an inset brass rule over the card, like a framed price
   card on the wall. The outline is painted over the photo on purpose. */
html[data-barber-cards="frame"] body.bb-body :is(.cms-card:not(.cms-card--plain), .cms-review, .cms-ptable__plan-inner) {
    outline: 1px solid var(--bb-brass-dim);
    outline-offset: -7px;
}
body.bb-body .cms-card { border-radius: var(--bb-r); }

/* Gallery: works in portrait frames with a caption plate. */
body.bb-body .cms-block--gallery :is(.cms-gallery__item, .cms-gallery__link, figure) { border-radius: 0; }
html[data-barber-cards="frame"] body.bb-body .cms-block--gallery :is(.cms-gallery__item, figure) {
    position: relative;
    padding: 6px;
    border: 1px solid var(--bb-brass-dim);
    background: var(--c-surface);
}
body.bb-body .cms-block--gallery figcaption {
    font-family: var(--bb-label);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
body.bb-body .cms-block--gallery img { filter: sepia(0.12) contrast(1.04); transition: filter 500ms var(--ease), transform 600ms var(--ease); }
body.bb-body .cms-block--gallery a:hover img { filter: none; }

/* Pricing table (memberships) */
body.bb-body .cms-block--pricing_table { --ptable-yes: var(--bb-red); }
body.bb-body .cms-ptable__plan-inner { background: var(--c-surface); border-radius: var(--bb-r); }
body.bb-body .cms-ptable__plan.is-featured .cms-ptable__plan-inner {
    background: linear-gradient(var(--bb-red), var(--bb-red)) top / 100% 5px no-repeat, var(--c-surface);
    box-shadow: 0 0 0 1px var(--bb-red);
}
body.bb-body .cms-ptable__name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--c-text-strong);
}
body.bb-body .cms-ptable__amount { font-family: var(--font-display); font-weight: 900; color: var(--c-text-strong); }
body.bb-body .cms-ptable__plan.is-featured .cms-ptable__amount { color: var(--bb-red); }
body.bb-body :is(.cms-ptable__period, .cms-ptable__old) { font-family: var(--bb-label); letter-spacing: 0.06em; color: var(--c-text-muted); }
body.bb-body .cms-ptable__badge {
    background: var(--bb-red);
    color: var(--bb-cream);
    border-radius: 0;
    font-family: var(--bb-label);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
body.bb-body .cms-ptable__group {
    font-family: var(--bb-label);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bb-red);
}
body.bb-body .cms-ptable__row { border-color: var(--c-border); }
body.bb-body .cms-ptable__mark--yes { color: var(--bb-red); }
body.bb-body .cms-ptable__text { font-family: var(--bb-label); letter-spacing: 0.04em; color: var(--c-text-strong); }

/* Testimonials */
body.bb-body .cms-review { border-radius: var(--bb-r); }
body.bb-body .cms-review__text { color: var(--c-text-strong); font-family: var(--font-display); font-size: 1.12rem; line-height: 1.5; }
body.bb-body .cms-review__initial { border-radius: 50%; background: var(--bb-red); color: var(--bb-cream); font-family: var(--font-display); font-weight: 800; }
body.bb-body .cms-review__name { color: var(--c-text-strong); font-weight: 700; }
body.bb-body :is(.cms-review__role, .cms-review__source) { font-family: var(--bb-label); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-muted); }
body.bb-body .cms-stars { color: var(--bb-brass); }
html[data-barber-paper="on"] body.bb-body .cms-tone-soft .cms-stars { color: var(--bb-red); }
body.bb-body .cms-rating-summary__value { font-family: var(--font-display); font-weight: 900; color: var(--c-text-strong); }

/* FAQ */
body.bb-body .cms-faq__item { border-color: var(--c-border); }
body.bb-body .cms-faq__question { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; color: var(--c-text-strong); }
body.bb-body .cms-faq__question:hover { color: var(--bb-brass); }
body.bb-body .cms-faq__toggle { color: var(--bb-red); }

/* Stats */
body.bb-body :is(.cms-stat__value, .cms-stats__value) { font-family: var(--font-display); font-weight: 900; color: var(--c-text-strong); }
body.bb-body :is(.cms-stat__label, .cms-stats__label) { font-family: var(--bb-label); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.82rem; }

/* Contacts */
body.bb-body :is(.cms-contacts__icon, .cms-contact__icon) { color: var(--bb-red); border-radius: 50%; }

/* "More" links under listings */
body.bb-body :is(.svc-more, .team-more, .shop-more, .cms-more) .cms-btn { min-width: 14rem; }

/* -------------------------------------------------------------------------
   10. Phones and motion
   ------------------------------------------------------------------------- */

@media (max-width: 64rem) {
    .bb-hero__frame { grid-template-columns: minmax(0, 1fr); }
    .bb-hero__media { max-width: 26rem; justify-self: start; }
    .bb-cert--card { grid-template-columns: minmax(0, 1fr); }
    .bb-rules--aside { grid-template-columns: minmax(0, 1fr); }
    .bb-rules__aside { position: static; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); align-items: center; }
}

@media (max-width: 48rem) {
    .bb-menu__levels { display: none; }
    .bb-menu__row { grid-template-columns: minmax(0, 1fr); row-gap: 0.7rem; }
    .bb-menu__leader { display: none; }
    .bb-menu__prices { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 0.4rem; }
    .bb-menu__cell {
        display: grid;
        gap: 0.1rem;
        padding: 0.45rem 0.6rem;
        border: 1px solid var(--c-border);
        text-align: start;
    }
    .bb-menu__cell-level {
        display: block;
        font-family: var(--bb-label);
        font-size: 0.66rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--c-text-muted);
    }
    .bb-menu__price { font-size: 1.05rem; }
}

@media (max-width: 40rem) {
    .bb-hero__frame { padding-block: 3rem 3rem; gap: 2.4rem; }
    .bb-hero__title { font-size: clamp(2.1rem, 1.2rem + 5.5vw, 2.9rem); }
    .bb-hero__media { max-width: 17.5rem; margin-inline-start: 2.5rem; }
    .bb-hero__seal { left: -2.6rem; width: 6.8rem; }
    .bb-hero__pole { width: 8px; }
    .bb-hero__board { padding: 1rem; }
    .bb-board__name { font-size: 0.95rem; }
    .bb-rules__item { grid-template-columns: 3rem minmax(0, 1fr); gap: 0.8rem; }
    .bb-rules__aside { grid-template-columns: minmax(0, 1fr); }
    .bb-rules__mirror { max-width: 15rem; }
    .bb-ticket { grid-template-columns: minmax(0, 1fr) 3rem; transform: rotate(-2deg); }
    .bb-ticket__main { padding: 2rem 1.2rem 1.3rem; }
    .bb-cert__stage { min-height: 0; padding: 2rem 0.9rem; }
    .bb-ftr__seal-row { gap: 1rem; }
    .bb-hdr .hdr-logo__name { font-size: 1.25rem; }
    .bb-logo__mark { width: 2.4rem; height: 2.4rem; }
    .cms-btn { padding-inline: 1.2rem; letter-spacing: 0.1em; }
}

@media (max-width: 59.99rem) {
    .bb-hdr .hdr-logo__tagline { display: none; }
    .bb-hdr .hdr-row--main .hdr-row__inner { min-height: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bb-hero__pole,
    .bb-hero__seal .bb-seal__spin { animation: none; }
    .cms-btn,
    .bb-stub__link { transition: none; }
}