/* -------------------------------------------------------------------------
   Smash Fit Gym - Laravel-era additions on top of the theme's style.css.
   Loaded last. Keep this small; structural styles stay in style.css.
   ------------------------------------------------------------------------- */

/* The theme only imports Montserrat @900. We now use it as the site-wide
   text face (headings + body), so pull the full weight range. Teko stays
   for buttons + eyebrows only (--sf-display below). @import must stay first. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300..900;1,300..900&display=swap');

/* =========================================================================
   0. DESIGN TOKENS
   The single source of truth for spacing, radius, type, elevation and the
   semantic colours used by every Laravel-era surface (dashboard, membership,
   checkout, cart, auth, alerts, badges, forms). Marketing pages keep the
   theme's own rhythm; these tokens govern the app shell built on top of it.
   Dark-mode values are re-declared in color.css under `body.dark-mode`.
   ========================================================================= */
:root {
    /* Type families ------------------------------------------------------
       Montserrat is the site-wide text face (overrides the theme's
       `--common-found: Teko` / `--theme-found: DM Sans`). Teko is kept
       for buttons + eyebrows only, via --sf-display. */
    --common-found: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --theme-found:  'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --sf-font-body: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --sf-display:   'Teko', 'Oswald', 'Bebas Neue', 'Arial Narrow', sans-serif;

    /* Spacing scale (4-based) */
    --sf-space-1: 4px;
    --sf-space-2: 8px;
    --sf-space-3: 12px;
    --sf-space-4: 16px;
    --sf-space-5: 20px;
    --sf-space-6: 24px;
    --sf-space-7: 32px;
    --sf-space-8: 40px;
    --sf-space-9: 48px;
    --sf-space-10: 64px;
    --sf-space-11: 80px;

    /* Radius scale */
    --sf-radius-xs: 4px;
    --sf-radius-sm: 8px;
    --sf-radius-md: 12px;
    --sf-radius-lg: 16px;
    --sf-radius-pill: 999px;

    /* Type scale (px) */
    --sf-fs-caption: 12px;
    --sf-fs-label: 13px;
    --sf-fs-sm: 14px;
    --sf-fs-body: 15px;
    --sf-fs-md: 16px;
    --sf-fs-lg: 18px;
    --sf-fs-xl: 20px;
    --sf-fs-2xl: 24px;
    --sf-fs-3xl: 30px;
    --sf-fs-4xl: 38px;

    /* Line heights */
    --sf-lh-tight: 1.15;
    --sf-lh-snug: 1.35;
    --sf-lh-normal: 1.6;

    /* Weights */
    --sf-fw-regular: 400;
    --sf-fw-medium: 500;
    --sf-fw-semibold: 600;
    --sf-fw-bold: 700;

    /* Elevation */
    --sf-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 34px -14px rgba(16, 24, 40, .09);
    --sf-shadow-md: 0 6px 24px -12px rgba(16, 24, 40, .18);
    --sf-shadow-lg: 0 24px 60px -24px rgba(16, 24, 40, .28);

    /* Surfaces + lines */
    --sf-surface: #ffffff;
    --sf-surface-sunken: #fafafa;
    --sf-surface-inverse: #101114;
    --sf-line: #e6e6ea;
    --sf-line-strong: #d6d9df;
    --sf-text: #14161c;
    --sf-text-muted: #6a7280;
    --sf-text-subtle: #9aa1ae;

    /* Accent (inherits the theme's brand colour) */
    --sf-accent: var(--theme-color, #fa3f01);
    --sf-accent-soft: rgba(250, 63, 1, .12);
    --sf-accent-ring: rgba(250, 63, 1, .16);

    /* Semantic status */
    --sf-success-bg: #e7f6ec;
    --sf-success-fg: #1c6b3a;
    --sf-success-line: #bfe4cd;
    --sf-warn-bg: #fff4e0;
    --sf-warn-fg: #96601a;
    --sf-warn-line: #f0dcae;
    --sf-danger-bg: #fbe9e7;
    --sf-danger-fg: #a12d20;
    --sf-danger-line: #f2c7c1;

    /* Controls + cards */
    --sf-control-h: 48px;
    --sf-control-pad-x: 16px;
    --sf-card-pad: var(--sf-space-6);
    --sf-card-pad-sm: var(--sf-space-5);
    --sf-card-radius: 0;

    --sf-ease: .2s ease;
}

/* =========================================================================
   1a. TYPOGRAPHY — Montserrat everywhere; Teko on buttons + eyebrows ALONE
   ========================================================================= */

/* --- Teko: buttons + section eyebrows ONLY --------------------------------
   The eyebrow selectors are direct-child (`> span`) so the coloured `.accent`
   word *inside* a heading is NOT caught. */
.theme-btn,
a.theme-btn,
button.theme-btn,
.sf-btn-sm,
.tt-cell .tt-book,
.sf-membership .sf-tier-choose,
.profile-avatar-btn,
.box form button,
.sf-eyebrow,
.heading > span,
.heading-style-2 .data > span,
.blog-intro > span,
.blog-heading > span,
.blog-style-three .blog-heading > span,
.our-projects-one .classes-intro .classes-intro-text > span,
.about-style-one .about-data-right > span,
.who-we-are > span,
.tt-head > span,
.featured-slider-one .f-slider-one-data span,
.service-detail .text-uppercase.d-block {
    font-family: var(--sf-display) !important;
    font-weight: 600;
}

/* --- Montserrat Black: every heading -------------------------------------- */
h1, h2, h3, h4, h5, h6,
.banner-style-one .banner-details h2,
.heading h2, .heading-style-2 .data h2, .data h2,
.who-we-are h2, .who-we-are h3, .cta-data h2,
.blog-intro h2, .blog-heading h2, .blog-post h2, .blog-data h2,
.our-projects-one .classes-intro h2, .tt-head h2,
.about-style-one .about-data-right h2, .renovation .reno-data h2,
.service-data h3, .pd-data h2, .plans h3,
.dashboard-card h3, .auth-modal__title {
    font-family: var(--sf-font-body) !important;
    font-weight: 900 !important;
}
/* an accent word inside a heading follows that heading's font, but stays
   brand-orange (the theme only colours .accent in a few hand-picked
   contexts — make it consistent everywhere). */
h1 .accent, h2 .accent, h3 .accent, h4 .accent {
    font-family: inherit !important;
    font-weight: inherit !important;
}
.accent { color: var(--sf-accent); }
/* small byline / label headings stay off "black" */
.blog-style-one .blog-post .blog-author .details h3,
.mobile-nav .desktop-menu h3,
.comment .c-data h4,
.about-info h4 {
    font-weight: 600 !important;
}

/* Off-canvas menu panel tagline heading - the theme default (28px) reads
   too heavy in that 400px-wide panel. */
.mobile-nav.desktop-menu h2 {
    font-size: 20px !important;
}

/* A handful of minor elements hard-code 'Teko' in the theme — pull them
   back onto Montserrat so "everything else" really is Montserrat. */
.category p,
.loc-date span,
.team-detail .team-data > p,
.pd-cat-tags ul li,
.pd-cat-tags ul li a,
.cart .cart-table .c-c .c-quality {
    font-family: var(--sf-font-body) !important;
}

/* Kept on Teko (client requests) — sits AFTER the headings rule so it wins:
   the "SMASHFIT!" video-band word, the BMI block ("Your BMI", the "BMI Chart"
   title + table), and the home "Services" cards (kicker + title). */
.jumbotron h1,
.your-bmi h5,
.fit_bmichart h1,
.fit_bmichart .bmi_title,
.fit_bmichart table,
.fit_bmichart table th,
.fit_bmichart table td,
.project-style-one .project-post .project-data h4,
.project-style-one .project-post .project-data h3,
.project-style-one .project-post .project-data h3 a,
.team-style-one .team-data .team-info p,
.team-slider .team-info p,
.team-info p,
.shop-style-one .shop-filter p,
.shop-filter p {
    font-family: var(--sf-display) !important;
    font-weight: 600 !important;
}

/* Footer column headings — Montserrat Black, dialled down in size. */
.footer-style-one .footer-p-2 .footer-col h3 {
    font-family: var(--sf-font-body) !important;
    font-weight: 900 !important;
    font-size: 20px;
    letter-spacing: .01em;
}
@media (max-width: 767.98px) {
    .footer-style-one .footer-p-2 .footer-col h3 { font-size: 18px; }
}

/* =========================================================================
   1b. SECTION HEADINGS — one size + left-aligned on EVERY page
   The theme only gave this treatment to body.home-page / .about-page /
   .contact-page; every other page fell back to the base 60px centred H2.
   ========================================================================= */
.heading,
.heading.heading-left,
.heading-style-2,
.heading-style-2 .data,
.our-projects-one .classes-intro,
.blog-intro,
.tt-head {
    text-align: left;
}
.heading { padding-bottom: 32px; }
.heading-style-2 { margin-bottom: 32px; }
.heading > span,
.heading-style-2 .data > span,
.blog-intro > span,
.blog-heading > span,
.tt-head > span {
    margin-left: 0;
    margin-right: 0;
}
/* Eyebrows — brand orange on every page (theme only did it on the homepage). */
.sf-eyebrow,
.heading > span,
.heading-style-2 .data > span,
.blog-intro > span,
.blog-heading > span,
.our-projects-one .classes-intro .classes-intro-text > span,
.about-style-one .about-data-right > span,
.who-we-are > span,
.tt-head > span,
.service-detail .text-uppercase.d-block {
    color: var(--sf-accent);
}
.heading h2,
.heading.heading-left h2,
.heading-style-2 .data h2,
.data h2,
.blog-intro h2,
.blog-heading h2,
.our-projects-one .classes-intro h2,
.tt-head h2,
.cta-data h2,
.related-products .heading h2 {
    width: auto !important;
    max-width: 680px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 36px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    margin-bottom: 16px !important;
}
@media (max-width: 1199.98px) {
    .heading h2, .heading.heading-left h2, .heading-style-2 .data h2, .data h2,
    .blog-intro h2, .blog-heading h2, .our-projects-one .classes-intro h2,
    .tt-head h2, .cta-data h2, .related-products .heading h2 { font-size: 30px !important; }
}
@media (max-width: 767.98px) {
    .heading h2, .heading.heading-left h2, .heading-style-2 .data h2, .data h2,
    .blog-intro h2, .blog-heading h2, .our-projects-one .classes-intro h2,
    .tt-head h2, .cta-data h2, .related-products .heading h2 { font-size: 26px !important; }
}

/* =========================================================================
   1. SHARED PRIMITIVES
   ========================================================================= */

/* Surface / card — one look for every app panel. */
.sf-card,
.dashboard-card,
.sf-membership .sf-tier,
.sf-membership .sf-extras {
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-card-radius);
    padding: var(--sf-card-pad);
    box-shadow: var(--sf-shadow-sm);
}
body.dark-mode .sf-card,
body.dark-mode .dashboard-card,
body.dark-mode .sf-membership .sf-tier,
body.dark-mode .sf-membership .sf-extras {
    background: var(--sf-surface);
    border-color: var(--sf-line);
    box-shadow: var(--sf-shadow-sm);
}

/* Stack rhythm between consecutive cards. */
.dashboard-card + .dashboard-card,
.sf-card + .sf-card { margin-top: var(--sf-space-6); }

/* Small inline text helpers (replace one-off inline styles). */
.sf-hint,
.sf-meta {
    font-family: var(--theme-found);
    font-size: var(--sf-fs-label);
    color: var(--sf-text-subtle);
    letter-spacing: 0;
}
.sf-muted { color: var(--sf-text-muted); }
.sf-eyebrow {
    display: block;
    font-family: var(--sf-display); /* Teko — see §1a */
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: var(--sf-fs-label);
    color: var(--sf-text-muted);
}

/* Status line — used on class / product detail ("You are booked", "Out of
   stock"). Previously unstyled markup. */
.membership-status {
    display: inline-block;
    margin: var(--sf-space-4) 0;
    padding: var(--sf-space-2) var(--sf-space-4);
    border-radius: var(--sf-radius-sm);
    font-family: var(--common-found);
    font-size: var(--sf-fs-sm);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.membership-status.active {
    background: var(--sf-success-bg);
    color: var(--sf-success-fg);
    border: 1px solid var(--sf-success-line);
}
.membership-status.inactive {
    background: var(--sf-danger-bg);
    color: var(--sf-danger-fg);
    border: 1px solid var(--sf-danger-line);
}

/* Small button — one size for the compact actions that sit inside cards,
   tables and pricing rows (was: .tt-book, .sf-tier-choose, .dash-btn-sm,
   .profile-avatar-btn all diverging). */
.sf-btn-sm,
.tt-cell .tt-book,
.sf-membership .sf-tier-choose {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sf-space-2);
    min-height: 34px;
    padding: var(--sf-space-2) var(--sf-space-4);
    border: 0;
    border-radius: var(--sf-radius-sm);
    background: var(--sf-accent);
    color: #fff;
    font-family: var(--common-found);
    font-size: var(--sf-fs-label);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1;
    cursor: pointer;
    transition: filter var(--sf-ease), transform var(--sf-ease);
}
.sf-btn-sm:hover,
.tt-cell .tt-book:hover,
.sf-membership .sf-tier-choose:hover {
    color: #fff;
    filter: brightness(1.07);
    transform: translateY(-1px);
}
.sf-btn-sm:disabled,
.sf-membership .sf-tier-choose:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: none; }

/* Header: theme toggle + account icon sitting in .extras */
.desktop-nav .nav-bar .extras .theme-toggle,
.desktop-nav .nav-bar .extras .account-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: 14px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.desktop-nav .nav-bar .extras .theme-toggle:hover,
.desktop-nav .nav-bar .extras .account-link:hover {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: #fff;
}

/* Once the sticky bar goes solid the icons need a visible outline on light */
.header-style-one .desktop-nav.slideDown .nav-bar .extras .theme-toggle,
.header-style-one .desktop-nav.slideDown .nav-bar .extras .account-link {
    border-color: rgba(255, 255, 255, .4);
}

/* Every page except the homepage: the nav sits over a solid black banner
   anyway, so skip the transparent-until-scroll treatment and start solid —
   only the homepage (hero image behind the nav) keeps the transparent start. */
body:not(.home-page) .header-style-one {
    border-bottom: 0;
    background: #000;
}
body:not(.home-page) .header-style-one .desktop-nav .nav-bar .extras .theme-toggle,
body:not(.home-page) .header-style-one .desktop-nav .nav-bar .extras .account-link {
    border-color: rgba(255, 255, 255, .4);
}

/* ---------------------------------------------------------------------
   Off-canvas mobile menu (#mobile-nav) — full redesign.
   Slides in from the RIGHT (theme default is left), carries the theme
   toggle + account link that the phone-width navbar no longer shows, a
   membership CTA, and a contact/email footer. Only ever opens below
   1199.98px (the theme's own breakpoint for showing the hamburger), so
   these rules are safe to leave unscoped by width — they never engage
   on desktop. `#…` selectors throughout so the theme's second off-canvas
   panel (.mobile-nav.desktop-menu, a different feature) is untouched. */
.desktop-nav .nav-bar .extras .theme-toggle,
.desktop-nav .nav-bar .extras .account-link,
.desktop-nav .nav-bar .extras > a.theme-btn {
    display: none;
}
@media (min-width: 1200px) {
    .desktop-nav .nav-bar .extras .theme-toggle,
    .desktop-nav .nav-bar .extras .account-link,
    .desktop-nav .nav-bar .extras > a.theme-btn {
        display: inline-flex;
    }
}

/* ---------------------------------------------------------------------
   Menu toggle button (#mobile-menu) — phone / tablet / iPad.
   The theme ships a bare 50px SVG with lopsided margins; this turns it
   into a proper icon button: a bordered, faintly-frosted square that
   picks up the brand orange on hover / when the panel is open, with the
   3-line → X morph kept intact. Sizes step up on tablet/iPad where
   there's more room and the tap target wants to be a touch bigger.
   No `display` on the base rule — the theme hides .menu-start above
   1199px (where #desktop-menu takes over), and we only re-show
   #mobile-menu inside the ≤1199 query below. */
.desktop-nav .nav-bar .extras #mobile-menu.menu-start {
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 0 0 4px !important;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background .25s ease, border-color .25s ease, transform .12s ease;
}
.desktop-nav .nav-bar .extras #mobile-menu.menu-start svg {
    width: 24px;
    height: 24px;
    margin: 0 !important;
    fill: none;
}
.desktop-nav .nav-bar .extras #mobile-menu.menu-start .line {
    stroke: #fff;
    stroke-width: 4.5;
}
.desktop-nav .nav-bar .extras #mobile-menu.menu-start:hover,
.desktop-nav .nav-bar .extras #mobile-menu.menu-start:focus-visible {
    background: var(--theme-color);
    border-color: var(--theme-color);
}
.desktop-nav .nav-bar .extras #mobile-menu.menu-start:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}
.desktop-nav .nav-bar .extras #mobile-menu.menu-start:active {
    transform: scale(.93);
}
.desktop-nav .nav-bar .extras #mobile-menu.menu-start.open {
    background: var(--theme-color);
    border-color: var(--theme-color);
}

/* Phone + tablet + iPad: the theme reveals .menu-start here — make it a
   flex box so the SVG actually centres. */
@media (max-width: 1199.98px) {
    .desktop-nav .nav-bar .extras #mobile-menu.menu-start { display: inline-flex; }
}

/* Tablet / iPad — a little more presence and a bigger tap target. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .desktop-nav .nav-bar .extras #mobile-menu.menu-start {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        margin-left: 8px !important;
    }
    .desktop-nav .nav-bar .extras #mobile-menu.menu-start svg {
        width: 27px;
        height: 27px;
    }
}

.mnav-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 111114;
    opacity: 0; visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
}
.mnav-backdrop.is-visible { opacity: 1; visibility: visible; }

#mobile-nav {
    left: auto; right: 0;
    width: 86%; max-width: 380px;
    background: #0a0a0c;
    padding: 0;
    display: flex; flex-direction: column;
    transform: translateX(101%);
    /* No shadow while closed: the panel is parked just off the right edge
       (translateX 101%), but a static box-shadow still paints ~90px of blur
       back into the viewport — a phantom grey band down the right side of
       every page. Only cast it once the panel is actually sliding in. */
    box-shadow: none;
}
#mobile-nav.open {
    transform: translateX(0);
    box-shadow: -30px 0 70px -20px rgba(0, 0, 0, .6);
}

#mobile-nav .mnav-top {
    display: flex; align-items: center; justify-content: space-between;
    flex: 0 0 auto;
    padding: 26px 22px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
#mobile-nav .res-log { margin: 0; }
#mobile-nav .res-log img { width: 128px; }
#mobile-nav a#res-cross {
    position: static;
    width: 36px; height: 36px; flex: 0 0 auto;
    display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
    color: #e9ebef; font-size: 14px;
    transition: border-color .2s ease, color .2s ease;
}
#mobile-nav a#res-cross:before { content: none; }
#mobile-nav a#res-cross:hover { border-color: var(--theme-color); color: var(--theme-color); }

#mobile-nav .mnav-links {
    flex: 0 1 auto;
    overflow-y: auto;
    margin: 0; padding: 6px 22px 4px;
}
#mobile-nav .mnav-links > li {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding: 0;
}
#mobile-nav .mnav-links > li > a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 1px;
    font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px;
    line-height: 1.3; letter-spacing: .02em; text-transform: uppercase;
    color: #f1f2f4;
}
#mobile-nav .mnav-links > li > a:hover { color: var(--theme-color); }
#mobile-nav .menu-item-has-children:before { content: none; }
#mobile-nav .mnav-caret {
    font-size: 11px; color: #7f8288;
    transition: transform .25s ease, color .25s ease;
}
#mobile-nav .menu-item-has-children.active .mnav-caret {
    transform: rotate(90deg);
    color: var(--theme-color);
}
#mobile-nav .sub-menu { padding-left: 14px; }
#mobile-nav .sub-menu li a {
    font-family: var(--sf-font-body, inherit); font-weight: 600; font-size: 13.5px;
    text-transform: none; letter-spacing: 0; color: #b0b3b8; padding: 9px 0;
}
#mobile-nav .sub-menu li a:before { content: none; }

#mobile-nav .mnav-utility {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 10px;
    margin: 4px 22px 0; padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
#mobile-nav .mnav-theme-toggle {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
    background: transparent; color: #e9ebef; font-size: 15px;
    display: grid; place-items: center; cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}
#mobile-nav .mnav-theme-toggle:hover { border-color: var(--theme-color); color: var(--theme-color); }
#mobile-nav .mnav-account {
    flex: 1 1 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px;
    font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: #e9ebef; text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}
#mobile-nav .mnav-account:hover { border-color: var(--theme-color); color: var(--theme-color); }

#mobile-nav .mnav-cta { flex: 0 0 auto; padding: 16px 22px 4px; }
#mobile-nav .mnav-membership {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 50px;
    background: var(--theme-color, #fa3f01); color: #fff; text-decoration: none;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13.5px;
    text-transform: uppercase; letter-spacing: .04em;
}

#mobile-nav .mnav-footer {
    flex: 0 0 auto;
    margin-top: auto;
    padding: 20px 22px 28px;
}
#mobile-nav .mnav-contact-item {
    display: flex; align-items: center; gap: 10px;
    font-size: 13.5px; color: #b0b3b8; text-decoration: none;
    margin-bottom: 10px;
}
#mobile-nav .mnav-contact-item:hover { color: #fff; }
#mobile-nav .mnav-contact-item i { width: 16px; text-align: center; color: var(--theme-color); }
#mobile-nav .mnav-social {
    display: flex; gap: 16px;
    list-style: none; margin: 14px 0 0; padding: 0;
}
#mobile-nav .mnav-social a { color: #b0b3b8; font-size: 15px; }
#mobile-nav .mnav-social a:hover { color: var(--theme-color); }

@media (max-width: 400px) {
    #mobile-nav { width: 100%; max-width: none; }
}

.nav-bar ul li a.active {
    color: var(--theme-color);
}

/* Signature / logo swaps between themes (.light-icon shows in light,
   .dark-icon shows in dark). The light rule must ALWAYS apply. */
.dark-icon { display: none; }
body.dark-mode .light-icon { display: none; }
body.dark-mode .dark-icon { display: inline-block; }

/* ---- Alerts + inline form errors (member area, auth) ------------------- */
.alert {
    padding: var(--sf-space-4) var(--sf-space-5);
    border-radius: var(--sf-radius-sm);
    margin-bottom: var(--sf-space-6);
    font-family: var(--theme-found);
    font-size: var(--sf-fs-body);
    line-height: var(--sf-lh-snug);
}
.alert-success { background: var(--sf-success-bg); color: var(--sf-success-fg); border: 1px solid var(--sf-success-line); }
.alert-danger  { background: var(--sf-danger-bg);  color: var(--sf-danger-fg);  border: 1px solid var(--sf-danger-line); }
.alert-warning { background: var(--sf-warn-bg);    color: var(--sf-warn-fg);    border: 1px solid var(--sf-warn-line); }

.field-error {
    color: var(--sf-danger-fg);
    font-family: var(--theme-found);
    font-size: var(--sf-fs-label);
    margin: calc(-1 * var(--sf-space-2)) 0 var(--sf-space-3);
}

/* ---- Member dashboard + profile ------------------------------------- */

/* generic panel — dashboard, profile, bookings, cart, checkout.
   Base surface comes from the shared .sf-card / .dashboard-card primitive above. */
.dashboard-card h3 {
    margin: 0 0 var(--sf-space-4);
    text-transform: uppercase;
    font-size: var(--sf-fs-xl);
    line-height: var(--sf-lh-tight);
    letter-spacing: .04em;
}

.dash-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sf-space-3);
    margin-bottom: var(--sf-space-2);
}
.dash-card-head h3 { margin: 0; }
.dash-card-link {
    font-family: var(--common-found);
    text-transform: uppercase;
    font-size: var(--sf-fs-sm);
    letter-spacing: .04em;
    color: var(--sf-accent);
}

/* hero: identity + membership */
.dash-hero {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: var(--sf-space-4);
    margin-bottom: var(--sf-space-6);
}
@media (max-width: 991px) { .dash-hero { grid-template-columns: 1fr; } }

.dash-hero-id {
    display: flex;
    align-items: center;
    gap: var(--sf-space-4);
    padding: var(--sf-space-5);
    border-radius: var(--sf-card-radius);
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    box-shadow: var(--sf-shadow-sm);
    color: var(--sf-text);
    position: relative;
    overflow: hidden;
}
.dash-hero-id::after {
    content: "";
    position: absolute;
    right: -50px; top: -50px;
    width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle, rgba(250, 63, 1, .32), transparent 70%);
    pointer-events: none;
}
.dash-avatar {
    flex: 0 0 auto;
    width: 56px; height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--theme-color);
    color: #fff;
    font-family: var(--common-found);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 0 0 0 3px var(--sf-surface), 0 0 0 4px var(--sf-line-strong);
    position: relative;
    z-index: 1;
}
.dash-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dash-hero-text { position: relative; z-index: 1; }
.dash-hi {
    display: block;
    font-family: var(--common-found);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: var(--sf-fs-sm);
    color: var(--sf-accent);
}
.dash-hero-text h2 {
    margin: var(--sf-space-1) 0;
    color: var(--sf-text);
    font-size: var(--sf-fs-2xl);
    line-height: var(--sf-lh-tight);
    text-transform: uppercase;
}
.dash-email { margin: 0; color: var(--sf-text-muted); font-size: var(--sf-fs-sm); word-break: break-all; }

.dash-membership {
    display: flex;
    flex-direction: column;
    gap: var(--sf-space-2);
    padding: var(--sf-card-pad-sm);
    border-radius: var(--sf-card-radius);
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    box-shadow: var(--sf-shadow-sm);
}
.dash-membership.is-active {
    border-left: 4px solid var(--sf-success-fg);
    background: linear-gradient(180deg, var(--sf-success-bg), var(--sf-surface) 65%);
}
.dash-membership.is-inactive {
    border-left: 4px solid var(--sf-accent);
    background: linear-gradient(180deg, var(--sf-accent-soft), var(--sf-surface) 65%);
}
.dash-membership-label {
    font-family: var(--common-found);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: var(--sf-fs-label);
    color: var(--sf-text-subtle);
}
.dash-membership strong {
    font-family: var(--common-found);
    font-weight: 800;
    font-size: var(--sf-fs-xl);
    text-transform: uppercase;
    line-height: var(--sf-lh-tight);
}
.dash-membership-meta { font-size: var(--sf-fs-sm); color: var(--sf-text-muted); }
.dash-progress {
    display: block;
    height: 7px;
    border-radius: var(--sf-radius-pill);
    background: var(--sf-line);
    overflow: hidden;
    margin-top: var(--sf-space-2);
}
.dash-progress i {
    display: block;
    height: 100%;
    border-radius: var(--sf-radius-pill);
    background: linear-gradient(90deg, var(--sf-accent), #ff7a45);
}
.theme-btn.dash-btn-sm {
    align-self: flex-start;
    margin-top: var(--sf-space-3);
    padding: var(--sf-space-2) var(--sf-space-6);
    font-size: var(--sf-fs-md);
}

/* stat tiles */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sf-space-4);
    margin-bottom: var(--sf-space-6);
}
@media (max-width: 767px) { .dash-stats { grid-template-columns: repeat(2, 1fr); } }
.dash-stat {
    padding: var(--sf-space-4);
    border-radius: var(--sf-card-radius);
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    box-shadow: var(--sf-shadow-sm);
    position: relative;
    overflow: hidden;
    transition: transform var(--sf-ease), box-shadow var(--sf-ease), border-color var(--sf-ease);
}
.dash-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sf-accent), transparent);
    opacity: 0;
    transition: opacity var(--sf-ease);
}
.dash-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--sf-shadow-md);
    border-color: var(--sf-line-strong);
}
.dash-stat:hover::before { opacity: 1; }
.dash-stat-label {
    display: block;
    font-family: var(--common-found);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: var(--sf-fs-label);
    color: var(--sf-text-subtle);
}
.dash-stat-value {
    display: block;
    font-family: var(--common-found);
    font-weight: 800;
    font-size: var(--sf-fs-2xl);
    line-height: var(--sf-lh-tight);
    margin-top: var(--sf-space-1);
}

.dash-links { margin: 0; }
.dash-links li { padding: var(--sf-space-2) 0; border-bottom: 1px solid var(--sf-line); }
.dash-links li:last-child { border-bottom: 0; }

.dash-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sf-space-4);
    padding: var(--sf-space-4) var(--sf-space-3);
    margin: 0 calc(var(--sf-space-3) * -1);
    border-bottom: 1px solid var(--sf-line);
    border-radius: var(--sf-card-radius);
    transition: background-color var(--sf-ease);
}
.dash-row:hover { background: var(--sf-surface-sunken); }
.dash-row:last-child { border-bottom: 0; }
.dash-row-main { min-width: 0; }
.dash-row strong {
    display: block;
    font-family: var(--common-found);
    font-size: var(--sf-fs-lg);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.dash-row span { display: block; font-size: var(--sf-fs-sm); color: var(--sf-text-muted); }
.dash-empty { margin: var(--sf-space-2) 0 0; color: var(--sf-text-muted); }

/* quick-actions card */
.dash-actions { position: sticky; top: 110px; }
.dash-action {
    display: flex;
    align-items: center;
    gap: var(--sf-space-3);
    padding: var(--sf-space-3);
    margin: 0 calc(var(--sf-space-3) * -1);
    border-bottom: 1px solid var(--sf-line);
    border-radius: var(--sf-card-radius);
    font-family: var(--common-found);
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: var(--sf-fs-md);
    color: inherit;
    transition: color var(--sf-ease), background-color var(--sf-ease), padding-left var(--sf-ease);
}
.dash-action:hover { color: var(--sf-accent); background: var(--sf-accent-soft); padding-left: calc(var(--sf-space-3) + var(--sf-space-1)); }
.dash-action-ic {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: var(--sf-radius-sm);
    display: grid;
    place-items: center;
    font-size: var(--sf-fs-body);
    background: var(--sf-accent-soft);
    color: var(--sf-accent);
    transition: transform var(--sf-ease);
}
.dash-action:hover .dash-action-ic { transform: scale(1.08); }
.dash-action-logout { padding-top: var(--sf-space-4); }

.link-btn {
    background: none;
    border: 0;
    padding: 0;
    color: var(--sf-accent);
    font-family: var(--common-found);
    text-transform: uppercase;
    letter-spacing: .02em;
    cursor: pointer;
}
.link-btn.danger, .link-btn.danger:hover { color: var(--sf-danger-fg); }

.theme-btn.danger-btn { background: var(--sf-danger-fg); border-color: var(--sf-danger-fg); }

.badge {
    display: inline-block;
    padding: var(--sf-space-1) var(--sf-space-3);
    border-radius: var(--sf-radius-pill);
    font-size: var(--sf-fs-caption);
    font-family: var(--theme-found);
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--sf-line);
    color: var(--sf-text-muted);
    white-space: nowrap;
}
.badge.badge-accent { background: var(--sf-accent); color: #fff; }
.badge.status-active, .badge.status-paid, .badge.status-success, .badge.status-fulfilled { background: var(--sf-success-bg); color: var(--sf-success-fg); }
.badge.status-pending { background: var(--sf-warn-bg); color: var(--sf-warn-fg); }
.badge.status-failed, .badge.status-cancelled, .badge.status-expired { background: var(--sf-danger-bg); color: var(--sf-danger-fg); }

/* ---- Profile: avatar field --------------------------------------- */
.profile-avatar {
    display: flex;
    align-items: center;
    gap: var(--sf-space-5);
    padding-bottom: var(--sf-space-6);
    margin-bottom: var(--sf-space-6);
    border-bottom: 1px solid var(--sf-line);
}
.profile-avatar-img {
    flex: 0 0 auto;
    width: 92px; height: 92px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--sf-accent);
    color: #fff;
    font-family: var(--common-found);
    font-size: var(--sf-fs-3xl);
}
.profile-avatar-img img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-3) var(--sf-space-4); }
.profile-avatar-btn {
    cursor: pointer;
    margin: 0;
    padding: var(--sf-space-2) var(--sf-space-5);
    border: 2px solid var(--sf-accent);
    color: var(--sf-accent);
    background: transparent;
    font-family: var(--common-found);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: var(--sf-fs-sm);
    transition: background var(--sf-ease), color var(--sf-ease);
}
.profile-avatar-btn:hover { background: var(--sf-accent); color: #fff; }
.profile-avatar-remove {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-2);
    margin: 0;
    font-family: var(--theme-found);
    text-transform: none;
    font-size: var(--sf-fs-sm);
    letter-spacing: 0;
    color: var(--sf-text-muted);
    cursor: pointer;
}
.profile-avatar-hint { flex-basis: 100%; font-size: var(--sf-fs-label); color: var(--sf-text-subtle); }

/* ---- Member / checkout form system -------------------------------------
   One field style for every app-shell form: .theme-form (profile), the
   checkout delivery block and the standalone auth pages (.login-register
   .box). Marketing forms (contact, membership enquiry modal) keep the
   theme's own 60px field styling. */
.theme-form label {
    display: block;
    font-family: var(--common-found);
    text-transform: uppercase;
    font-size: var(--sf-fs-label);
    letter-spacing: .03em;
    margin-bottom: var(--sf-space-2);
}
/* radio / checkbox option rows keep sentence case + inline layout */
.theme-form label:has(> input[type=radio]),
.theme-form label:has(> input[type=checkbox]) {
    display: flex;
    align-items: baseline;
    gap: var(--sf-space-2);
    font-family: var(--theme-found);
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--sf-fs-body);
}
.theme-form input:not([type=radio]):not([type=checkbox]):not([type=file]),
.theme-form select,
.theme-form textarea {
    width: 100%;
    margin-bottom: var(--sf-space-5);
    min-height: var(--sf-control-h);
    height: auto;
    padding: var(--sf-space-3) var(--sf-control-pad-x);
    border: 1px solid var(--sf-line-strong);
    border-radius: var(--sf-radius-sm) !important; /* beats theme's `border-radius:0 !important` reset */
    background: var(--sf-surface-sunken);
    font-family: var(--theme-found);
    font-size: var(--sf-fs-body);
    color: var(--sf-text);
    transition: border-color var(--sf-ease), box-shadow var(--sf-ease), background var(--sf-ease);
}
.theme-form input[type=radio],
.theme-form input[type=checkbox] { accent-color: var(--sf-accent); }
.theme-form textarea { min-height: 120px; line-height: var(--sf-lh-normal); }
.theme-form input:not([type=radio]):not([type=checkbox]):not([type=file]):focus,
.theme-form select:focus,
.theme-form textarea:focus {
    outline: 0;
    background: var(--sf-surface);
    border-color: var(--sf-accent);
    box-shadow: 0 0 0 3px var(--sf-accent-ring);
}
.theme-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--sf-space-5);
}
.theme-form .form-grid-full { grid-column: 1 / -1; }
@media (max-width: 575px) { .theme-form .form-grid { grid-template-columns: 1fr; } }

.dashboard-card.dash-danger { border-color: var(--sf-danger-line); }
.dashboard-card.dash-danger h3 { color: var(--sf-danger-fg); }

/* ---- Standalone auth pages (login / register / reset / verify) ---------
   Fallbacks for the #authModal popup. Bring the theme's .box onto the
   design system so a user who lands here sees the same rhythm. */
.login-register .box {
    border-radius: var(--sf-card-radius);
    padding: var(--sf-card-pad);
}
.login-register .box h3 {
    font-size: var(--sf-fs-3xl);
    line-height: var(--sf-lh-tight);
    margin-bottom: var(--sf-space-4);
}
.login-register .box input:not([type=checkbox]) {
    height: var(--sf-control-h);
    margin-bottom: var(--sf-space-3);
    padding-left: var(--sf-control-pad-x);
    border: 1px solid var(--sf-line-strong);
    border-radius: var(--sf-radius-sm) !important; /* beats theme reset */
}
.login-register .box input:not([type=checkbox]):focus {
    border-color: var(--sf-accent);
    box-shadow: 0 0 0 3px var(--sf-accent-ring);
}
.login-register .box form button { margin-top: var(--sf-space-5); }
.login-register .box form .remember .second a,
.login-register .box form .remember label { font-size: var(--sf-fs-sm); }

/* Honeypot safety net in case an inline style is ever stripped */
input[name="website"] {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

.desktop-nav .nav-bar .extras .cart-link { position: relative; }
.desktop-nav .nav-bar .extras .cart-link .cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--sf-radius-pill);
    background: var(--sf-accent);
    color: #fff;
    font-size: 10px;
    font-family: var(--theme-found);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1199px) {
    .desktop-nav .nav-bar .extras .theme-toggle,
    .desktop-nav .nav-bar .extras .account-link {
        width: 34px;
        height: 34px;
        margin-right: 10px;
    }
}

/* ---- Class timetable: booking controls (theme has .tt-* base;
   .tt-book pulls its shape from the shared .sf-btn-sm rule above) --------- */
.tt-cell .tt-book { margin-top: var(--sf-space-2); }
.tt-cell .tt-spots { font-size: var(--sf-fs-caption); color: var(--sf-text-muted); }
.tt-cell .tt-booked { display: inline-block; margin-top: var(--sf-space-2); font-size: var(--sf-fs-caption); color: var(--sf-success-fg); text-transform: uppercase; }
.tt-cell .tt-full   { display: inline-block; margin-top: var(--sf-space-2); font-size: var(--sf-fs-caption); color: var(--sf-danger-fg); text-transform: uppercase; }

/* =====================================================================
   Blog article (pages/blog-detail.blade.php) — modern single-column
   reading layout. No sidebar: related posts run as a card row below the
   piece instead of a tall, mostly-empty rail.
   ===================================================================== */
.sf-article { padding: 40px 0 64px; }

.sf-post { width: 100%; }

/* Reading column: title, meta and copy keep a comfortable measure and hug
   the container's left edge (no auto-centered gutters). The hero image and
   the related-post grid below stay full-width — that's what should "use
   the container". Matches the home page's own eyebrow + heading scale. */
.sf-post__cat {
    display: block;
    max-width: 760px;
    font-family: var(--sf-display);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: var(--sf-fs-label);
    font-weight: 700;
    color: var(--sf-accent);
    margin-bottom: 10px;
}
.sf-post__title {
    max-width: 760px;
    font-size: 30px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    margin: 0 0 16px !important;
}
@media (max-width: 1199.98px) { .sf-post__title { font-size: 26px !important; } }
@media (max-width: 767.98px)  { .sf-post__title { font-size: 22px !important; } }

.sf-post__byline { display: flex; align-items: center; gap: 12px; max-width: 760px; margin-bottom: 32px; }
.sf-post__avatar {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--sf-accent-soft);
    display: grid;
    place-items: center;
}
.sf-post__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-post__avatar b { font-family: var(--sf-font-body); font-weight: 700; font-size: 15px; color: var(--sf-accent); }
.sf-post__byline-tx { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.sf-post__byline-tx strong { color: var(--sf-text); font-weight: 700; }
.sf-post__byline-tx span { color: var(--sf-text-muted); }

.sf-post__hero {
    margin: 0 0 34px;
    border-radius: var(--sf-radius-lg);
    overflow: hidden;
    box-shadow: var(--sf-shadow-md);
}
.sf-post__hero img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
}

/* article body — the actual content typography */
.sf-post__body { max-width: 760px; font-size: 17px; line-height: 1.8; color: var(--sf-text); }
.sf-post__body > :first-child { margin-top: 0; }
.sf-post__body > :last-child { margin-bottom: 0; }
.sf-post__body p { margin: 0 0 20px; }
.sf-post__body h2 { font-size: 25px !important; line-height: 1.25 !important; margin: 38px 0 14px !important; text-transform: none !important; letter-spacing: 0 !important; }
.sf-post__body h3 { font-size: 20px !important; line-height: 1.3 !important; margin: 30px 0 10px !important; text-transform: none !important; letter-spacing: 0 !important; }
.sf-post__body h4 { font-size: 17px !important; line-height: 1.35 !important; margin: 26px 0 8px !important; text-transform: none !important; letter-spacing: 0 !important; }
.sf-post__body ul,
.sf-post__body ol { margin: 0 0 20px; padding-left: 22px; }
.sf-post__body li { margin-bottom: 8px; }
.sf-post__body li::marker { color: var(--sf-accent); }
.sf-post__body img { border-radius: var(--sf-radius-md); margin: 26px 0; width: 100%; height: auto; }
.sf-post__body a { color: var(--sf-accent); text-decoration: underline; text-underline-offset: 2px; }
.sf-post__body blockquote {
    margin: 30px 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--sf-accent);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--sf-text);
}
.sf-post__body hr { margin: 34px 0; border: 0; border-top: 1px solid var(--sf-line); }

/* FAQ accordion — consecutive "**Question?**" blocks render as a
   collapsible Q&A list instead of spelled-out headings (see
   BlogPost::bodyHtml()). Reuses the theme's .acc2 accordion component,
   tuned to the article's own type scale. */
.sf-post__body .sf-faq { margin: 28px 0; }
.sf-post__body .sf-faq.acc2 { padding-top: 0; }
.sf-post__body .sf-faq .accordion-header {
    font-size: inherit !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.sf-post__body .sf-faq .accordion-item button,
.sf-post__body .sf-faq .accordion-button {
    font-family: var(--sf-font-body) !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    height: auto !important;
    min-height: 52px;
    padding: 15px 40px 15px 0 !important;
}
.sf-post__body .sf-faq .accordion-body {
    font-family: var(--sf-font-body) !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    padding: 0 0 20px !important;
}
.sf-post__body .sf-faq .accordion-body > :last-child { margin-bottom: 0; }

.sf-post__share {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 760px;
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid var(--sf-line);
}
.sf-post__share > span {
    font-family: var(--sf-display);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 13px;
    color: var(--sf-text-muted);
    margin-right: 4px;
}
.sf-post__share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--sf-line-strong);
    border-radius: 50%;
    font-size: 14px;
    color: var(--sf-text);
    background: var(--sf-surface);
    transition: background var(--sf-ease), border-color var(--sf-ease), color var(--sf-ease), transform var(--sf-ease);
}
.sf-post__share-btn:hover { background: var(--sf-accent); border-color: var(--sf-accent); color: #fff; transform: translateY(-2px); }

/* Body + share sit in a fixed-measure column; "Keep reading" fills the
   rest of the container as a sticky rail, so nothing on the right goes
   to waste while you scroll the piece.
   The main column's 760px floor doesn't yield until the container itself
   is much wider, so across Bootstrap's whole "lg" tier (992-1199.98px —
   iPad/tablet landscape included, container capped at 936px) the rail was
   squeezed into a ~128px sliver with its card titles wrapping one word per
   line. Stack to a single column through that whole tier instead — the
   same point the rail already loses its sticky positioning below. */
.sf-post__cols {
    display: grid;
    grid-template-columns: minmax(0, 760px) 1fr;
    gap: 48px;
    align-items: start;
}
@media (max-width: 1199.98px) { .sf-post__cols { grid-template-columns: 1fr; gap: 36px; } }

.sf-post__main { min-width: 0; }

.sf-post__rail { position: sticky; top: 100px; min-width: 0; }
@media (max-width: 1199.98px) { .sf-post__rail { position: static; } }
.sf-post__rail-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sf-accent);
    margin: 0 0 16px !important;
}
/* Cards inside reuse the theme's own .blog-post component (blog-style-one +
   our-blog-one below scope its CSS) — just laid out in a single column
   instead of the listing page's 3-up grid. */
.sf-post__rail-list { display: flex; flex-direction: column; gap: 20px; }
.sf-post__rail-list.our-blog-one .blog-post:hover { transform: translateY(-4px); }

/* Disabled add-to-cart */
.theme-btn.disabled { opacity: .5; pointer-events: none; }

/* Site-wide announcement banner (settings.announcement.text) */
.site-announcement {
    background: var(--sf-accent);
    color: #fff;
    text-align: center;
    font-family: var(--theme-found);
    font-size: var(--sf-fs-sm);
    letter-spacing: .01em;
    padding: var(--sf-space-2) var(--sf-space-4);
}

/* Coaches grid + detail */
.team-style-one .team-data .team-link {
    display: inline-block;
    margin-top: var(--sf-space-3);
    font-family: var(--common-found);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--sf-accent);
}
.coach-photo img { border-radius: var(--sf-radius-xs); }
body.dark-mode .coach-photo img { filter: brightness(.95); }

/* Our Classes intro: heading left, "See the timetable" button right */
.our-projects-one .classes-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sf-space-5) var(--sf-space-8);
    flex-wrap: wrap;
    max-width: none;               /* theme caps .classes-intro at 720px */
}
.our-projects-one .classes-intro .classes-intro-text { max-width: 720px; }
.our-projects-one .classes-intro .classes-intro-text > span {
    display: block;
    color: var(--sf-accent);
    font-family: var(--common-found);
    text-transform: uppercase;
    font-size: var(--sf-fs-lg);
    margin-bottom: var(--sf-space-2);
}
.our-projects-one .classes-intro > .theme-btn { flex: 0 0 auto; }
@media (max-width: 991px) {
    .our-projects-one .classes-intro { justify-content: flex-start; }
}

/* ---- "Get Membership" enquiry modal ------------------------------------
   Theme's .conslt-popup .modal-body is display:flex with a fixed 875px width;
   the side image had no size constraint (the original used a tiny placeholder),
   so a real photo blew the layout out. Pin it to a side panel. */
/* Bootstrap's .modal-dialog-centered vertically centers via
   min-height: calc(100% - 1rem), which leaves it sitting high whenever the
   card is short relative to the viewport (as it is here, phone especially).
   Give it the same explicit allowance already used for .auth-modal. */
.conslt-popup .modal-dialog-centered { min-height: calc(100% - 2rem); }
.conslt-popup .modal-body {
    max-width: 92vw;
    overflow: hidden;
}
.conslt-popup .modal-body > img {
    width: 320px;
    max-width: 40%;
    height: auto;
    align-self: stretch;
    object-fit: cover;
    flex-shrink: 0;
}
@media (max-width: 767px) {
    .conslt-popup .modal-body { display: block; width: auto; }
    .conslt-popup .modal-body > img { display: none; }
    .popups.modal.show .modal-dialog { margin-right: auto; }
    /* "Get Membership" title (theme default: 38px/40px) wraps to two lines
       once the side image is gone and the form is the full, narrow width. */
    .conslt-popup .popup h3 { font-size: 24px; line-height: 1.2; }
    /* The close button is a 40px circle absolutely positioned at
       top:14px/right:16px of the card (style.css), floating over content
       rather than sitting in flow. At one line the title now runs the full
       card width and collides with it. Push the form's top padding down
       past the button instead of narrowing the title. */
    .conslt-popup .c-form-2 { padding-top: 62px; }
}

/* ---- Membership pricing (tiers + additional services) -----------------
   Card surface + the .sf-tier-choose button come from the shared primitives
   at the top of this file; only the layout specifics live here. Was a
   page-scoped <style> block in pages/membership.blade.php. */
.sf-membership .sf-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--sf-space-5) var(--sf-space-6);   /* tighter than the shared card */
    border-radius: 0;                               /* sharp corners */
}
.sf-membership .sf-extras {
    padding: var(--sf-space-5) var(--sf-space-6);
    border-radius: 0;
    margin-top: var(--sf-space-6);
}
.sf-membership .sf-tier--featured {
    border-color: var(--sf-accent);
    box-shadow: 0 14px 40px -14px var(--sf-accent-ring);
}
.sf-membership .sf-tier-flag {
    position: absolute; top: calc(-1 * var(--sf-space-3)); left: var(--sf-space-6);
    background: var(--sf-accent); color: #fff;
    font-size: var(--sf-fs-caption); font-weight: var(--sf-fw-bold);
    letter-spacing: .04em; text-transform: uppercase;
    padding: var(--sf-space-1) var(--sf-space-3); border-radius: var(--sf-radius-pill);
}
.sf-membership .sf-tier-name { text-transform: uppercase; font-weight: var(--sf-fw-bold); margin: 0 0 var(--sf-space-2); }
.sf-membership .sf-tier-blurb { font-size: var(--sf-fs-sm); color: var(--sf-text-muted); margin-bottom: var(--sf-space-4); }
.sf-membership .sf-tier-rows { list-style: none; padding: 0; margin: 0 0 auto; }
.sf-membership .sf-tier-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sf-space-3);
    padding: var(--sf-space-3) 0; border-top: 1px solid var(--sf-line);
}
.sf-membership .sf-tier-row:last-child { border-bottom: 1px solid var(--sf-line); }
.sf-membership .sf-tier-row-head { display: flex; flex-direction: column; }
.sf-membership .sf-tier-period { font-size: var(--sf-fs-caption); font-weight: var(--sf-fw-semibold); text-transform: uppercase; letter-spacing: .05em; color: var(--sf-text-muted); }
.sf-membership .sf-tier-price { font-size: var(--sf-fs-lg); font-weight: var(--sf-fw-bold); }
.sf-membership .sf-extras-title { text-transform: uppercase; font-weight: var(--sf-fw-bold); margin: 0 0 var(--sf-space-4); }
.sf-membership .sf-extras-list { list-style: none; padding: 0; margin: 0; }
.sf-membership .sf-extras-list li {
    display: flex; align-items: center; gap: var(--sf-space-4); flex-wrap: wrap;
    padding: var(--sf-space-3) 0; border-top: 1px solid var(--sf-line);
}
.sf-membership .sf-extras-list li:first-child { border-top: 0; }
.sf-membership .sf-extras-price { font-weight: var(--sf-fw-bold); margin-left: auto; }
.sf-membership .sf-extras-note { font-size: var(--sf-fs-label); color: var(--sf-text-muted); width: 100%; }
@media (max-width: 575px) { .sf-membership .sf-extras-price { margin-left: 0; } }

/* ---- Responsiveness fixes (phone + tablet) -------------------------- */

/* Safety net: nothing should be able to push the page wider than the screen. */
img, video, iframe, table { max-width: 100%; }

/* Shop grid: the theme keeps the "Add to cart / Choose options" button
   hidden (display:none / absolute + opacity:0) until .product:hover, so on
   touch screens the listing has no visible CTA at all. Render it in normal
   flow whenever hover isn't available (covers phones + tablets). */
@media (hover: none), (max-width: 991.98px) {
    .shop-style-one.addition .grid .product .theme-btn,
    .shop-style-one.addition .grid .product form {
        display: block;
    }
    .shop-style-one.addition .grid .product .theme-btn {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        width: 100%;
        margin: 14px 0 0;
        text-align: center;
    }
    .shop-style-one.addition .grid .product:hover .theme-btn {
        left: auto;
        background: var(--theme-color);
        color: #fff;
    }
    .shop-style-one.addition .grid .product .btn-hover figure::before { display: none; }
}

/* Shop product cards — trimmed title + price (client request; theme ships
   28px title / 30px price). */
.shop-style-one .product h3 a,
.shop-style-one .product .data h3 a {
    font-size: 20px;
    padding-top: 12px;
}
.shop-style-one .product .price-range span {
    font-size: 20px;
}
@media (max-width: 575.98px) {
    .shop-style-one .product h3 a,
    .shop-style-one .product .data h3 a,
    .shop-style-one .product .price-range span { font-size: 18px; }
}

/* Product detail: trim the oversized theme type, cap the image and cut the
   section's top gap (client request). Theme ships 46px title / 42px price /
   460x500 image / 120px section padding. */
.product-detail.gap { padding-top: 56px; }

.product-detail .pd-data h2 {
    font-size: 28px;
    line-height: var(--sf-lh-tight);
    padding-top: 8px;
}
.product-detail ul.pd-price { margin-top: 20px; }
.product-detail ul.pd-price li.pd-sale-price,
.product-detail ul.pd-price li.pd-sale-price span {
    font-size: 24px;
    line-height: 1.2;
}
.product-detail ul.pd-price li.pd-regular-price,
.product-detail ul.pd-price li.pd-regular-price span { font-size: 17px; }
.product-detail .pd-data > p { font-size: var(--sf-fs-body); line-height: var(--sf-lh-normal); }

.product-detail .pd-main-img {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}
.product-detail .pd-main-img img { width: 100%; height: 100%; object-fit: cover; }
.product-detail .pd-thumbs img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--sf-radius-xs);
}
@media (max-width: 991.98px) {
    .product-detail .pd-main-img { max-width: 340px; margin: 0 auto 24px; }
}

/* Product detail: the "You might also like" cards don't carry the theme's
   shop wrapper classes, so their images had no sizing at all (rendered at
   the file's intrinsic 1024px). Constrain them like the shop grid. */
.related-products .heading h2,
.related-products .heading.heading-left h2 { font-size: 24px !important; margin-bottom: 24px; }
.related-products .row { row-gap: 24px; }

.related-products .product {
    height: 100%;
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-md);
    padding: 14px;
    transition: box-shadow var(--sf-ease), transform var(--sf-ease);
}
.related-products .product:hover {
    box-shadow: var(--sf-shadow-md);
    transform: translateY(-2px);
}
.related-products .product .main-data figure {
    margin: 0 0 12px;
    overflow: hidden;
    border-radius: var(--sf-radius-sm);
    background: #f4f2ee;
}
.related-products .product .main-data figure img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform .3s ease;
}
.related-products .product:hover .main-data figure img { transform: scale(1.04); }
.related-products .product .data h3 { margin: 0; font-size: 16px; line-height: var(--sf-lh-snug); }
.related-products .product .data h3 a { color: var(--sf-text); }
.related-products .product .data h3 a:hover { color: var(--sf-accent); }
.related-products .product .price-range { margin-top: 4px; }
.related-products .product .price-range span {
    font-size: var(--sf-fs-sm);
    color: var(--sf-text-muted);
    font-family: var(--sf-font-body);
}
body.dark-mode .related-products .product { background: var(--sf-surface); border-color: var(--sf-line); }
body.dark-mode .related-products .product .main-data figure { background: #000000; }
@media (max-width: 575.98px) {
    .related-products .product .main-data figure img { height: 220px; }
}

/* Coach cards: 26px name over a narrow 2-up / 1-up column wrapped to 3
   lines and broke the grid. Ease the size down on smaller screens. */
@media (max-width: 991.98px) {
    .team-style-one .team-data .team-info h3 { font-size: 22px !important; min-height: 0; }
}

/* Coach cards: the 300px fixed photo height crops the coach off at the waist
   on phones (cards are full-width there, so there's room to grow). */
@media (max-width: 767.98px) {
    .team-style-one .team-image img { height: 380px; }
}
@media (max-width: 575.98px) {
    .team-style-one .team-image img { height: 440px; }
}

/* Section headings: the accent word (e.g. "EXPERT COACHES", "CALCULATE YOUR
   BMI") gets caught by the theme's `.data span { font-size: 18px }` eyebrow
   rule and shrinks. Make it match the rest of the heading. */
.heading-style-2 .data h2 .accent,
.heading .data h2 .accent,
.heading h2 .accent,
.data h2 .accent {
    font-size: inherit !important;
    line-height: inherit !important;
    text-transform: inherit !important;
    letter-spacing: inherit !important;
    font-weight: inherit !important;
    color: var(--theme-color) !important;
}

/* Pagination (gallery / shop / blog) — Bootstrap-5 markup. The theme only
   styles <a>, but BS5 renders active/disabled items as <span>, so the boxes
   drift in size and the row sits left. Style .page-link (covers both) and
   centre the whole control with a uniform 44px square button. */
.gym-pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
.gym-pagination nav { display: flex; justify-content: center; width: 100%; }
.gym-pagination .pagination,
.gym-pagination ul.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.gym-pagination .page-item { margin: 0; }
.gym-pagination .page-link,
.gym-pagination ul.pagination li a,
.gym-pagination ul.pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--sf-line-strong);
    border-radius: var(--sf-radius-sm) !important;
    background: var(--sf-surface);
    color: var(--sf-text);
    font-family: var(--sf-font-body);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}
.gym-pagination .page-item:first-child .page-link,
.gym-pagination .page-item:last-child .page-link,
.gym-pagination ul.pagination li:first-child a,
.gym-pagination ul.pagination li:last-child a {
    background: var(--sf-surface-inverse);
    border-color: var(--sf-surface-inverse);
    color: #fff;
    padding: 0 16px;
}
.gym-pagination .page-item.disabled .page-link { opacity: .4; pointer-events: none; }
.gym-pagination .page-item.active .page-link,
.gym-pagination ul.pagination li.active a,
.gym-pagination ul.pagination li.active span {
    background: var(--sf-accent) !important;
    border-color: var(--sf-accent) !important;
    color: #fff !important;
}
.gym-pagination .page-link:hover,
.gym-pagination ul.pagination li a:hover {
    background: var(--sf-accent);
    border-color: var(--sf-accent);
    color: #fff;
}
body.dark-mode .gym-pagination .page-link,
body.dark-mode .gym-pagination ul.pagination li a,
body.dark-mode .gym-pagination ul.pagination li span {
    background: var(--sf-surface);
    border-color: var(--sf-line);
    color: var(--sf-text);
}
/* BS5's view ships a separate cramped "Previous / Next" control for < sm and
   hides the numbered list — keep the numbered list on every width. */
.gym-pagination nav > .d-sm-none { display: none !important; }
.gym-pagination nav > .d-none.d-sm-flex { display: flex !important; }

/* Phone: BS5's sm+ branch (forced visible above) lays the "Showing x–y of
   z" text and the numbered list side by side. At phone width that squeezes
   the list into half the row, so it wraps and the arrows drop onto their
   own line. Stack the two, centre them, and shrink the buttons. */
@media (max-width: 575.98px) {
    .gym-pagination.mt-5 { margin-top: 28px !important; }
    .gym-pagination nav > .d-none.d-sm-flex {
        flex-direction: column;
        align-items: center !important;
        gap: 12px;
    }
    .gym-pagination nav > .d-none.d-sm-flex .small.text-muted {
        margin: 0;
        text-align: center;
    }
    .gym-pagination .pagination,
    .gym-pagination ul.pagination { gap: 5px; }
    .gym-pagination .page-link,
    .gym-pagination ul.pagination li a,
    .gym-pagination ul.pagination li span {
        min-width: 34px;
        height: 34px;
        padding: 0 5px;
        font-size: 13px;
        border-radius: var(--sf-radius-sm) !important;
    }
    .gym-pagination .page-item:first-child .page-link,
    .gym-pagination .page-item:last-child .page-link,
    .gym-pagination ul.pagination li:first-child a,
    .gym-pagination ul.pagination li:last-child a { padding: 0 9px; }
}

/* Contact page — the Address / Telephone / Email labels blew up once every
   heading went Montserrat Black. */
.contact-form-2 .info ul.contact li h3 {
    font-size: 20px;
    line-height: var(--sf-lh-tight);
    margin-bottom: 4px;
}
.contact-form-2 .info ul.contact li p,
.contact-form-2 .info ul.contact li a { font-size: var(--sf-fs-md); }

/* The map iframe's height="760" attribute made it dominate the page on
   desktop - the responsive breakpoints already trim it down, this brings
   desktop in line. */
.contact-map iframe { height: 420px; }

/* Home hero: the visible height is set by `.f-slider-layer { min-height: 100vh }`
   in style.css (the slide copy is flex-centred inside that box, so its padding
   does NOT drive height). Shrink the box itself on phones, and trim it a
   little on iPad/tablet too — full 100vh reads overly tall at that size. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .featured-slider-one .f-slider-layer {
        min-height: 85vh;
    }
}
@media (max-width: 575px) {
    .featured-slider-one .f-slider-layer {
        min-height: 600px;
    }

    /* Narrower side padding on phones buys the headline enough width to wrap
       in 2 lines (S8 / 360px), matching how it reads on a larger phone. */
    .featured-slider-one .f-slider-one-data,
    .featured-slider-one .owl-item.active .f-slider-one-data {
        padding: 96px 20px 52px !important;
    }
    .featured-slider-one .owl-item.active .f-slider-one-data h1 {
        font-size: 22px !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
    }
    .featured-slider-one .owl-item.active .f-slider-one-data p {
        font-size: 15px !important;
        margin-bottom: 22px !important;
    }
    .featured-slider-one .f-slider-one-data span {
        font-size: 15px !important;
        letter-spacing: 3px;
    }

    /* Two hero CTAs share one row, equal width, filling it - not stacked. */
    .featured-slider-one .f-slider-one-data .hero-cta {
        display: flex;
        gap: 10px;
        margin-top: 22px;
        max-width: 420px;
    }
    .featured-slider-one .owl-item.active .f-slider-one-data .hero-cta .theme-btn {
        flex: 1 1 0;
        margin: 0;
        padding: 12px 6px;
        font-size: 12px;
        letter-spacing: .3px;
        text-align: center;
        white-space: nowrap;
    }

    /* Slider dots: bottom-left, lined up under the buttons (matches the
       headline's 20px padding). Overrides the desktop 36px / centred rules. */
    .featured-slider-one .owl-dots {
        left: 0;
        right: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        text-align: left;
        bottom: 22px;
    }
    .featured-slider-one .owl-dots button.owl-dot {
        margin: 0 8px 0 0;
    }
}

@media (max-width: 360px) {
    .featured-slider-one .owl-item.active .f-slider-one-data .hero-cta .theme-btn {
        font-size: 11px;
        padding: 11px 4px;
    }
}

/* ---- "SMASHFIT!" video band (.renovation / .jumbotron) on phone + tablet --
   The theme hides the video + word-mask below 992px (responsive.css:~1963,
   .jumbotron/.renovation video { display:none } + .reno-data goes to a plain
   black block). Keep the desktop composition instead — just scale the word
   down so it fits the narrower screen.
   Widened to 1366.98px (was 991.98px): the theme's own fixed-pixel jumbotron
   sizing (350px/470px, responsive.css ~992-1366px brackets) was never tuned
   for iPad/tablet landscape (1024-1366 wide) — the word massively overflowed
   the section and got cropped by .renovation's overflow:hidden, showing only
   its middle few letters. A single vw-scaled tier now covers every tablet
   width in both orientations. line-height is unitless so it scales with the
   font instead of clipping at the wider end of the range; the video height
   reset also shortens the whole section, which was ~650-810px tall in that
   broken landscape range. */
@media (max-width: 1366.98px) {
    .renovation {
        padding: 0;
    }
    /* Height tracks the word (16vw font-size × 1.15 line-height) plus the
       gap + button + bottom margin set below, so the video/black band is
       exactly as tall as its content — no leftover dead space under the
       button — instead of a fixed 380px box the shorter tablet word only
       filled the top third of. */
    .renovation video {
        display: block;
        height: calc(18.4vw + 90px);
    }
    .jumbotron {
        display: flex;
        align-items: flex-start;
    }
    .jumbotron h1 {
        font-size: 16vw;          /* was 350px/470px (fixed px) at this breakpoint */
        line-height: 1.15;        /* unitless so it scales with font-size instead of clipping */
    }
    /* The button used to be pinned to the *section's* bottom edge (bottom: 18px)
       while the word was pinned to the top — two independent anchors, so the
       black gap between them was whatever was left over (up to ~165px on
       narrower tablets, where the word itself is shorter). Anchoring the
       button's `top` to the word's own rendered height instead keeps a
       fixed, small gap under the word at every tablet width. */
    .renovation .reno-data,
    body.home-page .renovation .reno-data {
        position: absolute;
        top: calc(18.4vw + 16px);
        bottom: auto;
        background-color: transparent;
        padding: 0 16px;
    }
    .renovation .reno-data a { margin-top: 0; }
}

@media (max-width: 575.98px) {
    /* Phone: 21vw + a 170px line-height blew the word past both screen
       edges and the button (anchored ~88px down from the tablet rule
       above) landed on top of it. Shrink the word so it fits the
       viewport, give it a sane line-height, and drop the button to the
       bottom of the band, clear of the text. */
    .renovation video { height: 225px; }
    .jumbotron {
        align-items: flex-start;
        padding-top: 32px;
    }
    .jumbotron h1 {
        font-size: 15vw;
        line-height: 1;
    }
    .renovation .reno-data,
    body.home-page .renovation .reno-data {
        top: auto;
        bottom: 24px;
        padding: 0 16px;
    }
    .renovation .reno-data a { margin-top: 0; }
    .renovation .reno-data .theme-btn {
        font-size: 15px;
        padding: 11px 22px;
        letter-spacing: .5px;
    }
}

/* Services ("Workout Classes") section heading: left-aligned instead of
   centred. Sits in a .container so it lines up with the rest of the page. */
body.home-page .project-style-one .heading.heading-left {
    text-align: left;
}
body.home-page .project-style-one .heading.heading-left h2 {
    margin-left: 0;
    margin-right: 0;
}

/* Services grid → one-card-per-frame swipe slider on phones (it stacked into
   one very long full-bleed column otherwise). CSS scroll-snap + JS-built
   position pills (see home.blade.php @push('scripts')). No owl re-init.
   Also pins the card caption in — there's no :hover on touch. */
.svc-slider-dots { display: none; }

@media (max-width: 767px) {
    .project-style-one .row.g-0 {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .project-style-one .row.g-0::-webkit-scrollbar { display: none; }

    .project-style-one .row.g-0 > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        scroll-snap-align: center;
    }

    .project-style-one .project-post figure { position: relative; margin: 0; }
    .project-style-one .project-post figure img { height: 360px; }
    .project-style-one .project-post figure::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0) 55%);
        pointer-events: none;
    }

    /* caption: always visible, bottom-left, no sliding panel / decorative bar */
    .project-style-one .project-post .project-data {
        right: 24px;
        left: 24px;
        bottom: 22px;
        width: auto;
        text-align: left;
        z-index: 2;
    }
    .project-style-one .project-post .project-data::before { display: none; }
    .project-style-one .project-post .project-data h4 { font-size: 15px; }
    .project-style-one .project-post .project-data h3 a { font-size: 24px; padding-top: 4px; }
    .project-style-one .project-post .project-data > a { font-size: 15px; padding-top: 6px; }

    /* scroll-position pills */
    .svc-slider-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 18px 16px 4px;
    }
    .svc-slider-dots .svc-dot {
        width: 24px;
        height: 4px;
        padding: 0;
        border: 0;
        border-radius: 99px;
        background: #d3d3d3;
        cursor: pointer;
        transition: width .25s ease, background .25s ease;
    }
    .svc-slider-dots .svc-dot.is-active {
        width: 40px;
        background: var(--theme-color);
    }

    /* The "Welcome to Smash Fit Gym" (about) block keeps a 20px left indent
       from the theme's tablet rules right down to mobile — drop it so it
       lines up with every other section's container edge. */
    .about-style-one .about-data-right {
        padding-left: 0;
        padding-right: 0;
    }
}
body.dark-mode .svc-slider-dots .svc-dot { background: #3a3b40; }

/* Blog grids → swipe slider on phones (cards stacked into a very long column
   otherwise). Same scroll-snap + JS-built pills pattern as the services
   slider. Targets: /blog listing (.our-blog-one .row.g-4) and the homepage
   "Latest News" strip (.blog-style-three .blog-posts.row#home-blog-slider). */
.mini-slider-dots { display: none; }

@media (max-width: 767px) {
    .our-blog-one .row.g-4,
    #home-blog-slider {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: 0;
        margin-right: 0;
    }
    .our-blog-one .row.g-4::-webkit-scrollbar,
    #home-blog-slider::-webkit-scrollbar { display: none; }

    .our-blog-one .row.g-4 > [class*="col-"],
    #home-blog-slider > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        scroll-snap-align: center;
    }

    .our-blog-one .blog-post .blog-image figure { margin: 0; }
    .our-blog-one .blog-post .blog-image figure img,
    #home-blog-slider .boxx figure img {
        width: 100%;
        height: 210px;
        object-fit: cover;
    }
    #home-blog-slider .boxx figure { margin: 0; }

    .mini-slider-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 20px 16px 0;
    }
    .mini-slider-dots .mini-dot {
        width: 24px;
        height: 4px;
        padding: 0;
        border: 0;
        border-radius: 99px;
        background: #d3d3d3;
        cursor: pointer;
        transition: width .25s ease, background .25s ease;
    }
    .mini-slider-dots .mini-dot.is-active {
        width: 40px;
        background: var(--theme-color);
    }
}
body.dark-mode .mini-slider-dots .mini-dot { background: #3a3b40; }

/* ====================================================================
   Auth popup — login / register / password reset in one modal.
   Markup: partials/auth-modal.blade.php. Styled to match the admin
   sign-in card: white, sharp corners, orange full-width button.
   ==================================================================== */
.auth-modal .modal-dialog { max-width: 820px; width: 94vw; }
.auth-modal .modal-content {
    position: relative;
    flex-direction: row;
    width: 100%;                          /* theme sets .modal-content{width:auto} */
    border: 0;
    border-radius: 0;                     /* sharp corners */
    overflow: hidden;
    background: #fff;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .5);
}

/* Left image panel (desktop: single cover image filling a 44% column) */
.auth-modal__media {
    position: relative;
    flex: 0 0 44%;
    align-self: stretch;
    overflow: hidden;
    background-color: #101114;
}
.auth-modal__media span {
    position: absolute;
    background-size: cover;
    background-position: center;
}
.auth-modal__media-a { inset: 0; }
.auth-modal__media-b { display: none; }

.auth-modal__body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 44px 40px 34px;
}

/* Phone: stack, and drop the two-photo collage entirely — on a small
   screen it pushed the actual form (or the "accounts on pause" notice)
   below the fold and crowded the close button, without adding anything
   the form itself needs. */
@media (max-width: 767px) {
    .auth-modal .modal-dialog {
        width: auto;
        max-width: none;
        margin: 1rem 12px;
    }
    .auth-modal .modal-content {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
    }

    .auth-modal__media { display: none; }

    .auth-modal__body { padding: 16px 22px 26px; }
}

.auth-modal__close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: #9aa1ae;
    cursor: pointer;
    transition: color .15s;
}
.auth-modal__close:hover { color: #14161c; }

.auth-modal__brand { text-align: center; margin-bottom: 18px; }
.auth-modal__brand img { height: 42px; width: auto; }

.auth-modal__tabs {
    display: flex;
    gap: 4px;
    background: #f1f0ec;
    padding: 4px;
    margin-bottom: 24px;
}
.auth-modal__tab {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 10px 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6a7280;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.auth-modal__tab.is-active {
    background: #fff;
    color: #14161c;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.auth-modal__panel { display: none; }
.auth-modal__panel.is-active { display: block; }

.auth-modal__title {
    margin: 0 0 4px;
    font-family: 'Montserrat', var(--theme-found), sans-serif;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.01em;
    text-align: center;
    text-transform: none;
    color: #14161c;
}
.auth-modal__lead {
    margin: 0 0 18px;
    text-align: center;
    font-size: 14px;
    color: #6a7280;
}

.auth-field { display: block; margin-bottom: 14px; }
.auth-field > span {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #40454f;
}
.auth-field > span i { color: var(--theme-color, #fa3f01); font-style: normal; }
.auth-field > span small { color: #8b93a1; font-weight: 500; }
.auth-field input {
    width: 100%;
    height: var(--sf-control-h);
    margin: 0;
    padding: 0 var(--sf-control-pad-x);
    border: 1px solid var(--sf-line-strong);
    border-radius: var(--sf-radius-sm);
    background: var(--sf-surface);
    font-size: var(--sf-fs-body);
    color: var(--sf-text);
    transition: border-color .15s, box-shadow .15s;
}
.auth-field input:focus {
    outline: 0;
    border-color: var(--sf-accent);
    box-shadow: 0 0 0 3px var(--sf-accent-ring);
}
.auth-field__error {
    margin: calc(-1 * var(--sf-space-2)) 0 var(--sf-space-3);
    font-size: var(--sf-fs-label);
    color: var(--sf-danger-fg);
}

.auth-modal__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 4px 0 20px;
}
.auth-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13.5px;
    color: #40454f;
    cursor: pointer;
}
.auth-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--theme-color, #fa3f01);
}
.auth-modal__link,
.auth-modal__alt button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--theme-color, #fa3f01);
    cursor: pointer;
}
.auth-modal__link:hover,
.auth-modal__alt button:hover { text-decoration: underline; }

.auth-modal__submit {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}
.auth-modal__alt {
    margin: 16px 0 0;
    text-align: center;
    font-size: 13.5px;
    color: #6a7280;
}
.auth-modal__hint {
    margin: 2px 0 16px;
    font-size: 12px;
    line-height: 1.6;
    color: #8b93a1;
}
.auth-modal__ok {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #b7e3c9;
    background: #e7f6ee;
    font-size: 13px;
    color: #0f7a44;
}

@media (max-width: 480px) {
    .auth-modal__body { padding: 38px 22px 26px; }
    .auth-modal__title { font-size: 19px; }
}

/* Dark mode */
body.dark-mode .auth-modal .modal-content {
    background: #000000;
    border: 1px solid #2a2b31;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85);
}
body.dark-mode .auth-modal__title { color: #e9ebef; }
body.dark-mode .auth-modal__lead,
body.dark-mode .auth-modal__alt { color: #9aa1ae; }
body.dark-mode .auth-modal__tabs { background: #000000; border: 1px solid #2a2b31; }
body.dark-mode .auth-modal__tab { color: #9aa1ae; }
body.dark-mode .auth-modal__tab.is-active { background: #1c1c22; color: #fff; }
body.dark-mode .auth-field > span { color: #c3c8d1; }
body.dark-mode .auth-field input {
    background: #1c1f26;
    border-color: rgba(255, 255, 255, .14);
    color: #e9ebef;
}
body.dark-mode .auth-check { color: #c3c8d1; }
body.dark-mode .auth-modal__close { color: #6a7280; }
body.dark-mode .auth-modal__close:hover { color: #e9ebef; }
body.dark-mode .auth-modal__hint { color: #757c8a; }

/* ====================================================================
   Footer on phones
   ==================================================================== */
@media (max-width: 767px) {
    /* Photo strip → 2-per-frame swipe slider (dots: [data-footer-dots],
       wired in partials/scripts.blade.php). */
    .footer-style-one ul.image-gallery {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-bottom: 0;
    }
    .footer-style-one ul.image-gallery::-webkit-scrollbar { display: none; }
    .footer-style-one ul.image-gallery li {
        flex: 0 0 50%;
        width: 50%;
        scroll-snap-align: none;
    }
    .footer-style-one ul.image-gallery li:nth-child(odd) { scroll-snap-align: start; }
    .footer-style-one ul.image-gallery li img,
    .footer-style-one ul.image-gallery li figure { height: 200px; }

    /* footer-p-1: drop the coach avatars + "call us" line + membership button,
       and tighten the near-empty logo band (theme sets 60-80px padding here). */
    .footer-style-one .footer-p-1 .contact-info,
    .footer-style-one .footer-p-1 .footer-first > .theme-btn { display: none; }
    .footer-style-one .footer-p-1 { padding: 22px 0; }
    .footer-style-one .footer-p-1 .footer-first { justify-content: center; }
    .footer-style-one .footer-p-1 .footer-first .footer-logo { margin-bottom: 0; }
}

/* footer-p-1, iPad/tablet only: drop the coach avatars + phone number (kept
   for mobile above and desktop below), keep the membership button but pin
   it to the right instead of letting the row wrap under the logo. */
/* About page intro, iPad/tablet only: the theme stretches .who-we-are to
   `height: 100%` with `justify-content: space-between` so the figure pins to
   the bottom of the row, matching the taller text column on desktop. At
   tablet widths the text column wraps onto more lines (taller still), which
   blows that gap up into a big empty band under the heading. Drop back to
   normal block flow so the image sits right under the heading. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    body.about-page .about-first .who-we-are {
        display: block;
        height: auto;
    }
    body.about-page .about-first .who-we-are h2 {
        margin-bottom: 24px !important;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .footer-style-one .footer-p-1 .contact-info { display: none; }
    .footer-style-one .footer-p-1 .footer-first {
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    .footer-style-one .footer-p-1 .footer-first .footer-logo {
        width: auto;
        margin-bottom: 0;
    }
}

/* =========================================================================
   COACHES GRID (pages/coaches.blade.php) — hairline card outline
   -------------------------------------------------------------------------
   .team-data's translucent 1px border (#9999, ~60% alpha — kept translucent
   so it reads on both light and dark page backgrounds) rasterizes
   inconsistently across a CSS grid row: on some builds the leftmost card's
   left edge anti-aliases down to fully transparent for most of its height,
   leaving only the top-left corner visible. An inset box-shadow paints the
   same hairline as a composited overlay instead of a border-box stroke,
   which browsers snap far more consistently at fractional column widths.
   ========================================================================= */
.team-style-one .team-data {
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(153, 153, 153, .6);
}

/* =========================================================================
   MEMBER DASHBOARD (dashboard.blade.php) — match the homepage type scale
   -------------------------------------------------------------------------
   The dashboard is built on the --sf-* token scale (13-24px, tracked).
   Re-map its type to the homepage's own scale: Montserrat 900 section
   headings at 36/30/26px with no tracking, 18px uppercase eyebrows at
   weight 600, and 18px/1.65 body copy. Scoped to body.member-dashboard-page
   so the shared .dashboard-card components on profile/bookings are untouched.
   ========================================================================= */

/* Eyebrows + labels — homepage `.heading span`: 18px, Montserrat 600,
   uppercase, no letter-spacing. */
body.member-dashboard-page .dash-hi,
body.member-dashboard-page .dash-membership-label,
body.member-dashboard-page .dash-stat-label,
body.member-dashboard-page .dash-card-link {
    font-family: var(--common-found);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
}

/* Section headings — homepage section `h2`: Montserrat 900, 36px,
   line-height 1.15, no tracking. */
body.member-dashboard-page .dashboard-card h3,
body.member-dashboard-page .dash-hero-text h2 {
    font-family: var(--sf-font-body);
    font-size: 36px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: uppercase;
}
@media (max-width: 1199.98px) {
    body.member-dashboard-page .dashboard-card h3,
    body.member-dashboard-page .dash-hero-text h2 { font-size: 30px; }
}
@media (max-width: 767.98px) {
    body.member-dashboard-page .dashboard-card h3,
    body.member-dashboard-page .dash-hero-text h2 { font-size: 26px; }
}

/* Sub-headings — homepage `.about-info h3`: Montserrat 900, 22px / 1.2. */
body.member-dashboard-page .dash-membership strong,
body.member-dashboard-page .dash-row strong {
    font-family: var(--sf-font-body);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0;
}
body.member-dashboard-page .dash-stat-value {
    font-family: var(--sf-font-body);
    font-size: 30px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0;
}

/* Body copy — homepage `p`: 18px / 1.65 / weight 400. */
body.member-dashboard-page .dash-email,
body.member-dashboard-page .dash-membership-meta,
body.member-dashboard-page .dash-row span,
body.member-dashboard-page .dash-empty {
    font-size: 18px;
    line-height: 1.65;
    font-weight: 400;
}
body.member-dashboard-page .dash-action {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0;
}