/*
 * theme-base.css — static storefront CSS extracted from base.html.twig (2026-07).
 *
 * WHY: base.html.twig used to carry ~3,600 lines of inline <style>. Sulu's preview
 * re-injects the whole page HTML into a live iframe on render; parsing that giant
 * inline sheet each time spiked CPU and Chrome's Heavy-Ad-Intervention killed the
 * preview iframe. Moving the STATIC rules here (browser-cached, parsed once) leaves
 * only a small dynamic :root{} block inline in base.html.twig.
 *
 * All per-org theming still comes from that inline :root{} block (Color/Menu/Contact
 * snippet settings -> CSS custom properties). The rules below only reference
 * var(--...); an unset var with no fallback drops the declaration, exactly like the
 * old {% if setting %} guards did.
 *
 * Imported LAST in both drivingschool_cms.js (live) and drivingschool_preview.js
 * (preview) so it keeps the override priority the inline <style> used to have.
 * Keep in sync across those two entrypoints.
 */

        /* Apply heading styles.
           Only emit the properties the owner actually set in Color Settings.
           Blank = emit nothing, so each heading keeps its section/theme default
           (no more forced `inherit !important` flattening everything).
           Color is forced (!important) so a configured brand color reaches
           headings inside designed components (.feature-card h3, .cta-box h2,
           .article-body h2, ...). Size/weight/family/transform/spacing are
           page-wide defaults WITHOUT !important, so those components can still
           override them and keep their intentional sizing. */
        
        h1 {
            font-family: var(--h1-font-family);
            font-size: var(--h1-font-size);
            color: var(--h1-color) !important;
            font-weight: var(--h1-font-weight);
            text-transform: var(--h1-text-transform);
            letter-spacing: var(--h1-letter-spacing);
        }
        

        
        h2 {
            font-family: var(--h2-font-family);
            font-size: var(--h2-font-size);
            color: var(--h2-color) !important;
            font-weight: var(--h2-font-weight);
            text-transform: var(--h2-text-transform);
            letter-spacing: var(--h2-letter-spacing);
        }
        

        
        h3 {
            font-family: var(--h3-font-family);
            font-size: var(--h3-font-size);
            color: var(--h3-color) !important;
            font-weight: var(--h3-font-weight);
            text-transform: var(--h3-text-transform);
            letter-spacing: var(--h3-letter-spacing);
        }
        

        
        h4 {
            font-family: var(--h4-font-family);
            font-size: var(--h4-font-size);
            color: var(--h4-color) !important;
            font-weight: var(--h4-font-weight);
            text-transform: var(--h4-text-transform);
            letter-spacing: var(--h4-letter-spacing);
        }
        

        
        h5 {
            font-family: var(--h5-font-family);
            font-size: var(--h5-font-size);
            color: var(--h5-color) !important;
            font-weight: var(--h5-font-weight);
            text-transform: var(--h5-text-transform);
            letter-spacing: var(--h5-letter-spacing);
        }
        

        
        h6 {
            font-family: var(--h6-font-family);
            font-size: var(--h6-font-size);
            color: var(--h6-color) !important;
            font-weight: var(--h6-font-weight);
            text-transform: var(--h6-text-transform);
            letter-spacing: var(--h6-letter-spacing);
        }
        

        .social-colors, .social-colors a, .social-colors a i{
            background-color: var(--social-header-bg-color);
            color: var(--social-header-text-color);
            font-family: var(--social-bar-font-family);
        }
        {# Font size goes ONLY on the text nav links on the right side.
           Bootstrap Icons (bi-*) render at the font-size of their parent, so
           if we put font-size on the wrapper the social logos would grow/shrink too. #}
        
        .social-colors .social-bar-link {
            font-size: var(--social-bar-font-size);
        }
        
        .social-colors a:hover, .social-colors a:hover i, .social-colors a:active, .social-colors a:active i, .social-colors a:focus, .social-colors a:focus i{
            color: var(--button-bg-color);
        }
        .social-colors-empty{
            background-color: transparent !important;
        }

        /* Social bar layout — flat, single-row flex that cannot wrap.
           Outer row holds two groups: icons on the left, links on the right. */
        .social-bar-row {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            min-width: 0; /* allow children to shrink-stop properly */
        }
        .social-bar-icons,
        .social-bar-links {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            flex-shrink: 0;
        }
        .social-bar-links {
            justify-content: flex-end;
            margin-left: auto; /* anchor to the right edge */
        }
        .social-bar-item {
            white-space: nowrap;
            flex-shrink: 0;
            padding: 0.5rem 0.5rem;
            text-decoration: none;
        }
        .social-bar-item + .social-bar-item {
            margin-left: 0.25rem;
        }

        /* Delimiter between adjacent items in either group.
           Painted via ::before on every item that follows another. No-op when
           --social-bar-delimiter is unset (i.e. "Delimiter Between Items: None"). */
        .social-colors--with-delimiter .social-bar-icons > .social-bar-item + .social-bar-item::before,
        .social-colors--with-delimiter .social-bar-links > .social-bar-item + .social-bar-item::before {
            content: var(--social-bar-delimiter, "");
            display: inline-block;
            margin: 0 0.5rem 0 -0.25rem; /* cancel the inter-item margin-left */
            color: var(--social-header-text-color);
            opacity: 0.6;
        }
        .info-bar{
            background-color: var(--info-bar-bg-color);
            color: var(--info-bar-text-color);
            font-family: var(--info-bar-font-family);
            font-size: var(--info-bar-font-size);
            font-weight: var(--info-bar-font-weight);
            margin-bottom: var(--info-bar-padding-bottom, 0);
        }
        
        /* Bootstrap's `.nav-link` rule sets font-family/size/weight DIRECTLY on the
           link (and the global app.css `.nav-link { font-family: Tahoma }` piles on),
           which beats the values inherited from the `.info-bar` container. So emit the
           chosen typography directly on the links to make the snippet selection win. */
        .info-bar a, .info-bar .nav-link, .info-bar .dropdown-item {
            font-family: var(--info-bar-font-family);
            font-size: var(--info-bar-font-size);
            font-weight: var(--info-bar-font-weight);
        }
        
        /* Force each info-bar group to be a horizontal row. The purged CSS bundle doesn't
           reliably apply Bootstrap's default .nav flex, so the <li> items stack as blocks
           (the menu nav only works because it adds explicit flex-lg-row classes). */
        .info-bar ul.nav {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            align-items: center;
            padding-left: 0;
            margin-bottom: 0;
            list-style: none;
        }
        .info-bar ul.nav > li {
            list-style: none;
            display: flex;          /* keep the delimiter ::before and the link on one centered line */
            align-items: center;
            flex: 0 0 auto;
            width: auto;
        }
        .info-bar ul.nav .nav-link {
            white-space: nowrap;
            display: inline-block;  /* not block, so it sits beside the delimiter */
        }
        /* Delimiter between adjacent info-bar items (within each group). No-op when unset. */
        .info-bar--with-delimiter ul.nav > li + li::before,
        .info-bar--with-delimiter ul.nav > li + .dropdown::before,
        .info-bar--with-delimiter ul.nav > .dropdown + li::before,
        .info-bar--with-delimiter ul.nav > .dropdown + .dropdown::before {
            content: var(--info-bar-delimiter, "");
            display: inline-block;
            vertical-align: middle;
            margin: 0 0.25rem;
            color: var(--info-bar-text-color);
            opacity: 0.6;
        }
        /* Padding above the info bar (space between page top and bar) */
        body > .content-area-colors > header {
            padding-top: var(--info-bar-padding-top, 0.5rem);
        }
        .info-bar a, .info-bar a i, .info-bar .nav-link{
            color: var(--info-bar-text-color);
        }
        .info-bar a:hover, .info-bar a:hover i, .info-bar .nav-link:hover{
            color: var(--button-bg-color);
        }
        .info-bar .dropdown-menu{
            background-color: var(--info-bar-bg-color);
        }
        .info-bar .dropdown-menu .dropdown-item{
            color: var(--info-bar-text-color);
        }
        .menu-colors, .menu-colors > a, .menu-colors > a i{
            color: var(--menu-header-text-color);
            background-color: var(--menu-header-bg-color);
        }
        .menu-colors > a:hover, .menu-colors > a:hover i, .menu-colors > a:active, .menu-colors > a:active i, .menu-colors > a:focus, .menu-colors > a:focus i{
            color: var(--button-bg-color);
            /*background-color: var(--button-bg-color);*/
            background: none;
        }

        .menu-colors, .menu-colors a, .menu-colors a i{
            /*background-color: var(--menu-header-bg-color);*/
            color: var(--menu-header-text-color);
        }
        .menu-colors a:hover, .menu-colors a:hover i, .menu-colors a:active, .menu-colors a:active i, .menu-colors a:focus, .menu-colors a:focus i{
            color: var(--button-bg-color);
        }

        /* Enhanced Navigation Menu Styles */
        header.menu-colors {
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
            min-height: var(--menu-min-height, 48px);
            display: flex;
            align-items: center;
        }
        header.menu-colors > .container {
            width: 100%;
        }

        /* Mobile hamburger toggle */
        .menu-hamburger {
            background: transparent;
            border: 1px solid currentColor;
            color: var(--menu-header-text-color, #ffffff);
            padding: 0.375rem 0.75rem;
            border-radius: 0.25rem;
            font-size: 1.5rem;
            line-height: 1;
            cursor: pointer;
        }
        .menu-hamburger:focus {
            outline: 2px solid var(--button-bg-color);
            outline-offset: 2px;
        }
        @media (min-width: 992px) {
            /* Force the collapsible content to act as flex row on desktop, regardless of .collapse / .show state */
            .mobile-nav-wrap {
                display: flex !important;
            }
            /* The mobile grid-animation wrapper is layout-transparent on desktop so the
               nav still flows as a single flex row. */
            .mobile-nav-inner {
                display: contents !important;
            }
            /* Wrapper around mobile-only panel becomes transparent to layout on desktop */
            .d-lg-contents {
                display: contents !important;
            }
        }
        @media (max-width: 991.98px) {
            /* The mobile drawer — right-justified popover-style; not full-width.
               Curtain-drop animation: the panel unrolls DOWNWARD from its top edge
               (transform-origin: top) via scaleY, so it appears to drop down from just
               under the top header. JS pins its top to the header's bottom, so it never
               overlaps the header — it always shows beneath it. Pure transform, no fade. */
            .mobile-nav-wrap {
                display: grid !important;   /* override .collapse / Bootstrap; grid row animates the real content height */
                grid-template-rows: 0fr;    /* collapsed */
                position: fixed;
                top: 0;        /* JS pins the real top — below the header incl. its bottom-padding band */
                right: 1rem;   /* default to right side — overridden by .mobile-nav-left */
                left: auto;
                z-index: 1050;
                width: 380px;
                max-width: calc(100vw - 2rem);
                background: transparent;
                box-shadow: none;   /* no drawer shadow — only the header's bottom shadow shows */
                border-radius: 0;
                /* Curtain via grid-template-rows 0fr -> 1fr: animates to the ACTUAL
                   content height, so open AND close are smooth with no close-delay
                   (unlike max-height:100vh, which spends the first ~0.3s shrinking the
                   invisible 100vh->content gap on close). */
                visibility: hidden;
                pointer-events: none;
                transition: grid-template-rows 0.4s ease,
                            visibility 0s linear 0.4s;
            }
            .mobile-nav-wrap.show {
                grid-template-rows: 1fr;   /* expand to content height */
                visibility: visible;
                pointer-events: auto;
                transition: grid-template-rows 0.4s ease;
            }
            /* The single inner row that actually clips during the animation. */
            .mobile-nav-inner {
                overflow: hidden;
                min-height: 0;
            }
            .mobile-nav-wrap.mobile-nav-left {
                left: 1rem;
                right: auto;
            }
            /* Dimming backdrop is disabled — the controller still creates this element,
               but it must never show or capture clicks, so the page stays interactive. */
            .mobile-nav-overlay,
            .mobile-nav-overlay.active {
                display: none !important;
            }
            @media (prefers-reduced-motion: reduce) {
                .mobile-nav-wrap,
                .mobile-nav-overlay {
                    transition: none;
                }
            }
            /* Page scroll is intentionally NOT locked and there is no dimming backdrop,
               so the rest of the site stays fully interactive while the menu is open. */
            /* The colored top panel that holds nav + buttons */
            .mobile-nav-panel {
                display: block;
                background-color: var(--menu-header-bg-color, #1976d2);
                color: var(--menu-header-text-color, #ffffff);
                padding: 1rem 1.25rem;
            }
            .mobile-nav-panel .nav {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                width: 100%;
                margin: 0 !important;   /* kill Bootstrap mt-2/mb-2 so items sit closer */
                padding: 0;
            }
            .mobile-nav-panel .nav > li,
            .mobile-nav-panel .nav > .dropdown {
                width: 100%;
                text-align: center;
                margin-bottom: 8px;
            }
            .mobile-nav-panel .nav-link,
            .mobile-nav-panel .dropdown-item {
                color: var(--menu-header-text-color, #ffffff) !important;
                text-align: center;
            }
            /* Match the desktop rollover: links turn the button/accent color on
               hover. :focus/:active included so the effect also fires on touch taps. */
            .mobile-nav-panel .nav-link:hover,
            .mobile-nav-panel .nav-link:focus,
            .mobile-nav-panel .nav-link:active,
            .mobile-nav-panel .nav-link:hover i,
            .mobile-nav-panel .dropdown-item:hover,
            .mobile-nav-panel .dropdown-item:focus,
            .mobile-nav-panel .dropdown-item:active {
                color: var(--button-bg-color) !important;
            }
            /* Primary nav link sizing — matches the reference: 17px, bold, uppercase
               (uppercase comes from the global menu rule). Extra specificity + !important
               to beat "header.menu-colors .nav > li > .nav-link { font-size … !important }". */
            .mobile-nav-wrap .mobile-nav-panel .nav .nav-link {
                font-size: 18px !important;
                font-weight: 700 !important;
                line-height: 1.18 !important;
                letter-spacing: 0.5px !important;
                padding: 0 !important;
            }
            /* Center the dropdown toggle (it's display:flex on desktop, which would
               otherwise left-align it) and keep its caret beside the text. */
            .mobile-nav-wrap .mobile-nav-panel .dropdown-toggle {
                display: inline-flex !important;
                justify-content: center;
                align-items: center;
                gap: 0.3rem;
                width: auto;
            }
            /* Thin centered line UNDER each main menu item. An ::after on the container
               (li/.dropdown) — never the link — so it can't collide with the flex
               dropdown-toggle or its caret. */
            .mobile-nav-panel .nav > li::after,
            .mobile-nav-panel .nav > .dropdown::after {
                content: '';
                display: block;
                width: 60%;
                height: 1px;
                margin: 6px auto 0;
                background: rgba(255, 255, 255, 0.5);
            }
            /* Split menu: the last LEFT item keeps its line (the right group follows it);
               a SINGLE right item has no line (it's the visual bottom); 2+ right items
               all keep their lines. (.split-menu-right > .nav > *:only-child = count==1) */
            .mobile-nav-panel .split-menu-right .nav > li:only-child::after,
            .mobile-nav-panel .split-menu-right .nav > .dropdown:only-child::after {
                display: none !important;
            }
            /* Non-split menu: the single shared list's last item has no line. */
            .mobile-nav-panel:not(:has(.split-menu-right)) > .nav > li:last-child::after,
            .mobile-nav-panel:not(:has(.split-menu-right)) > .nav > .dropdown:last-child::after {
                display: none !important;
            }
            /* Expanded dropdown renders inline in the drawer — flatten it completely.
               Higher specificity (+ .mobile-nav-wrap) than the global
               ".menu-colors .dropdown-menu { position:absolute!important }" so it
               wins regardless of source order; otherwise it floats as an absolute
               bordered box over the buttons. */
            .mobile-nav-wrap .mobile-nav-panel .dropdown-menu {
                position: static !important;
                inset: auto !important;
                transform: none !important;
                float: none !important;
                width: 100% !important;
                min-width: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
                border: 0 !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                background-color: transparent !important;
                animation: none !important;
                z-index: auto !important;
            }
            .mobile-nav-wrap .mobile-nav-panel .dropdown-menu::before,
            .mobile-nav-wrap .mobile-nav-panel .dropdown-menu::after {
                display: none !important;
            }
            /* Dropdown children: no per-item divider. */
            .mobile-nav-panel .dropdown-menu li::after {
                display: none !important;
            }
            /* No search box in the mobile drawer (matches reference design). */
            .mobile-nav-panel form {
                display: none !important;
            }
            /* Login + Register render as two orange buttons, centered (mockup look).
               Content-width with generous padding, not stretched full-width. */
            /* Login + cart buttons: centered, square, content-width (mockup). This org
               uses the 'rectangle_full' login style, which adds .menu-btn-rect-full with
               a LATER, equal-specificity global !important rule — so we need the
               .mobile-nav-wrap … prefix (higher specificity) + !important to win. */
            .mobile-nav-wrap .mobile-nav-panel .text-end {
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                gap: 12px !important;
                margin: 16px 0 0 !important;
            }
            .mobile-nav-wrap .mobile-nav-panel .text-end .btn,
            .mobile-nav-wrap .mobile-nav-panel .text-end .btn.menu-btn-rect-full {
                flex: 0 0 auto !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                min-height: 0 !important;
                margin: 0 !important;
                border: 0 !important;
                border-radius: 0 !important;
                padding: 12px 26px !important;
                background: var(--button-bg-color, #e8861e) !important;
                color: var(--button-text-color, #ffffff) !important;
                font-size: 16px !important;
                font-weight: 700 !important;
                letter-spacing: 0.5px !important;
                text-transform: uppercase !important;
            }
            /* Login + cart rollover — matches the desktop buttons: background darkens
               to 30% black, text stays white. :focus/:active so it fires on touch. */
            .mobile-nav-wrap .mobile-nav-panel .text-end .btn:hover,
            .mobile-nav-wrap .mobile-nav-panel .text-end .btn:focus,
            .mobile-nav-wrap .mobile-nav-panel .text-end .btn:active,
            .mobile-nav-wrap .mobile-nav-panel .text-end .btn.menu-btn-rect-full:hover,
            .mobile-nav-wrap .mobile-nav-panel .text-end .btn.menu-btn-rect-full:focus,
            .mobile-nav-wrap .mobile-nav-panel .text-end .btn.menu-btn-rect-full:active {
                background: color-mix(in srgb, var(--button-bg-color) 70%, black) !important;
                color: var(--button-text-color, #ffffff) !important;
            }
            /* Info section continues the colored panel — one continuous blue box,
               pinned at the very bottom of the drawer (matches reference design). */
            .mobile-info-section {
                background-color: var(--menu-header-bg-color, #1976d2);
                color: var(--menu-header-text-color, #ffffff);
                padding: 0.25rem 0.5rem 0.5rem;   /* trim sides + reduced bottom padding */
                text-align: center;
            }
            .mobile-info-section .mobile-info-phone {
                color: var(--menu-header-text-color, #ffffff);
                font-weight: 500;
            }
            /* Single horizontal row, centered, never wraps (this org's labels are
               long, so wrapping looked broken — keep them on one line). */
            .mobile-info-section .mobile-info-nav {
                display: flex !important;
                flex-direction: row !important;
                flex-wrap: nowrap !important;
                justify-content: center;
                align-items: center;
                column-gap: 0;
                margin: 12px auto 0;
                padding: 0;
                list-style: none;
            }
            /* The mobile info row mirrors the desktop info bar's Sulu admin settings
               (font family / weight, the chosen delimiter, normal case — the info bar
               is NOT uppercase). Needs higher specificity (header.menu-colors …) +
               !important to beat the global "header.menu-colors .nav > li > .nav-link"
               rule, which forces font-size / uppercase / letter-spacing with !important.
               Color stays white because this row sits on the blue menu panel, where the
               admin info_bar_text_color (meant for the bar's own background) would be
               unreadable. */
            header.menu-colors .mobile-info-section .mobile-info-nav .nav-link {
                color: var(--menu-header-text-color, #ffffff) !important;
                display: inline-block !important;   /* keep the ::before bullet on the same line */
                padding: 0 !important;
                font-size: 15px !important;
                font-family: var(--info-bar-font-family) !important;
                font-weight: 700 !important;
                letter-spacing: 0 !important;
                text-transform: none !important;
                white-space: nowrap;
            }
            /* Info-row rollover — same accent color as the main mobile menu links.
               :focus/:active so it also fires on touch taps. */
            header.menu-colors .mobile-info-section .mobile-info-nav .nav-link:hover,
            header.menu-colors .mobile-info-section .mobile-info-nav .nav-link:focus,
            header.menu-colors .mobile-info-section .mobile-info-nav .nav-link:active {
                color: var(--button-bg-color) !important;
            }
            /* Delimiter between items — uses the same character chosen in Sulu admin
               (--info-bar-delimiter); shown only when a delimiter is configured. */
            .mobile-info-section .mobile-info-nav.info-bar--with-delimiter li + li::before {
                content: var(--info-bar-delimiter, "");
                font-size: 15px;
                color: rgba(255, 255, 255, 0.9);
                margin: 0 6px;     /* even space on both sides of the bullet */
                align-self: center;
            }

            /* Mobile logo size — matches reference design (100px tall) */
            .above-menu-logo,
            .menu-logo {
                max-height: 100px !important;
                height: 100px !important;
                width: auto !important;
            }
            /* On mobile, the menu band blends into the page background — but always keeps
               a single BOTTOM-only drop shadow (negative spread kills any top/side
               shadow). On all the time in mobile view. */
            header.menu-colors {
                background-color: transparent !important;
                box-shadow: 0 6px 8px -4px rgba(0, 0, 0, 0.18) !important;
            }
            /* When the drawer is open, the top bar becomes a solid white header with a
               dark X, and the blue menu sits cleanly beneath it (matches dw.png). */
            body.mobile-menu-open header.menu-colors {
                background-color: #ffffff !important;
                /* shadow comes from the base header.menu-colors rule (bottom-only, always on) */
            }
            body.mobile-menu-open .menu-hamburger {
                color: #1a1a1a !important;
            }
            /* Thicker, borderless hamburger button on mobile (20% smaller than the old 54px). */
            .menu-hamburger {
                font-size: 43px;
                font-weight: 900;
                padding: 0;
                background: transparent;
                color: var(--menu-header-bg-color, #333333);
                border: none;
                line-height: 1;
                position: relative;
                z-index: 1100;
                display: inline-flex;
                align-items: center;
                align-self: center;
            }
            /* Thicken BOTH the hamburger (bi-list) and the X (bi-x-lg) strokes — icon
               fonts ignore font-weight, so text-stroke gives the 900 weight visually. */
            .menu-hamburger .bi-list,
            .menu-hamburger .bi-x-lg {
                -webkit-text-stroke: 1.4px currentColor;
                text-stroke: 1.4px currentColor;
                display: block;
                line-height: 1;
            }
            /* The X (open state) — 20% smaller than the hamburger and bolder. */
            .menu-hamburger .bi-x-lg {
                font-size: 34px;
                -webkit-text-stroke: 2.2px currentColor;
                text-stroke: 2.2px currentColor;
            }
            .menu-hamburger:hover,
            .menu-hamburger:focus {
                background: transparent;
                outline: none;
            }

            /* Centered-logo (center_split) layout: actually center the logo on
               mobile too. The desktop split rule is min-width:992px only, so
               below lg the logo would otherwise fall to the far left. */
            header.menu-split > .container > .d-flex {
                position: relative;
                justify-content: center !important;
            }
            header.menu-split .menu-logo-link {
                margin: 0 !important;
            }
            /* White band under the logo (matches 5.png) — the header's OWN bottom padding.
               Because it's part of the header box: the menu opens BELOW the band
               automatically (the band is included in the header's measured bottom), and
               the open-header drop shadow lands at the band's bottom edge instead of
               floating on the white space. */
            header.menu-colors.menu-split,
            header.menu-colors.has-menu-logo {
                padding-bottom: 1.5rem !important;
            }
            header.menu-split .menu-hamburger {
                position: absolute;
                right: -0.75rem;   /* push past the container padding, as far right as is safe */
                top: 50%;
                transform: translateY(-50%);
                margin: 0 !important;
            }
            /* center_split: keep the mobile drawer compact & vertical. The panel's
               w-100 class is NOT breakpoint-scoped, so without this it stretches the
               fixed drawer out to its full max-width (nearly the whole viewport). */
            .menu-split .mobile-nav-panel {
                width: auto !important;
                display: block !important;
            }
            /* display:contents removes the wrapper's own box entirely, so the right
               nav group + buttons flow as direct children of the panel — both nav
               groups become one continuous, evenly-spaced vertical list. */
            .menu-split .split-menu-right {
                display: contents !important;
            }
            /* Hide the centered split logo on mobile so it adds no gap between groups. */
            .menu-split .split-menu-logo {
                display: none !important;
            }
        }
        /* The above-menu logo container sets z-index:1001 + negative margin to overlap the menu.
           That overlap zone covers the menu/info-bar items below it and would intercept clicks.
           Make the container transparent to clicks, but let the logo image (and its anchor) stay interactive. */
        .container.position-relative[style*="z-index: 1001"] {
            pointer-events: none;
        }
        .container.position-relative[style*="z-index: 1001"] img,
        .container.position-relative[style*="z-index: 1001"] a {
            pointer-events: auto;
        }

        /* Prevent Bootstrap Popper from affecting layout */
        .menu-colors .dropdown-menu[data-bs-popper] {
            top: 100% !important;
            left: 0 !important;
            transform: none !important;
        }
        
        /* Main navigation links and dropdown items */
        header.menu-colors .nav > li > .nav-link,
        header.menu-colors .nav > .dropdown > .nav-link,
        header.menu-colors .nav .dropdown-menu .nav-link,
        header.menu-colors .nav .dropdown-menu .dropdown-item {
            font-weight: var(--menu-font-weight, 500) !important;
            letter-spacing: var(--menu-letter-spacing, 0.5px) !important;
            text-transform: var(--menu-text-transform, uppercase) !important;
            font-size: var(--menu-font-size, 0.9rem) !important;
            font-family: var(--menu-font-family, inherit) !important;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .menu-colors > .nav > li > .nav-link:not(.dropdown-toggle)::after,
        .menu-colors > div > .nav-link:not(.dropdown-toggle)::after,
        .nav.menu-colors > li > .nav-link:not(.dropdown-toggle)::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            /*AHW background-color: var(--menu-header-text-color);*/
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }
        
        .menu-colors > .nav > li > .nav-link:not(.dropdown-toggle):hover::after,
        .menu-colors > div > .nav-link:not(.dropdown-toggle):hover::after,
        .nav.menu-colors > li > .nav-link:not(.dropdown-toggle):hover::after {
            width: 80%;
        }
        
        /* Dropdown toggle styling */
        .menu-colors .dropdown-toggle {
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
        
        .menu-colors .dropdown-toggle::after {
            border-top: 0.4em solid;
            border-right: 0.4em solid transparent;
            border-bottom: 0;
            border-left: 0.4em solid transparent;
            transition: transform 0.3s ease;
        }
        
        .menu-colors .dropdown.show .dropdown-toggle::after {
            transform: rotate(180deg);
        }
        
        .menu-colors .dropdown {
            position: relative;
        }

        .menu-colors .dropdown-menu {
            position: absolute !important;
            top: 100% !important;
            left: 0;
            z-index: 1000;
            transform: none !important;
            inset: auto !important;
            margin-top: 0.5rem !important;
            border: 1px solid rgba(0,0,0,0.1);
            border-radius: 8px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
            padding: 0.5rem 0;
            margin-top: 0.5rem;
            animation: dropdownFade 0.3s ease;
            background-color: var(--menu-header-bg-color);
            min-width: 180px;
        }
        
        /* Arrow pointer for dropdown */
        .menu-colors .dropdown-menu::before {
            content: '';
            position: absolute;
            top: -8px;
            left: 20px;
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid var(--menu-header-bg-color);
        }

        .menu-colors .dropdown-menu::after {
            content: '';
            position: absolute;
            top: -9px;
            left: 19px;
            width: 0;
            height: 0;
            border-left: 9px solid transparent;
            border-right: 9px solid transparent;
            border-bottom: 9px solid rgba(0,0,0,0.1);
        }

        @keyframes dropdownFade {
            from {
                opacity: 0;

            }
            to {
                opacity: 1;
            }
        }
        
        .menu-colors .dropdown-menu .dropdown-item {
            padding: 0.4rem 1rem;
            font-weight: 400;
            transition: all 0.2s ease;
            border-radius: 0;
            color: var(--menu-header-text-color) !important;
            background-color: transparent !important;
            text-transform: none;
            font-size: 0.9rem;
            position: relative;
            letter-spacing: normal;
        }
        
        .menu-colors .dropdown-menu .dropdown-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 0;
            background-color: var(--button-bg-color);
            transition: height 0.3s ease;
        }
        
        .menu-colors .dropdown-menu .dropdown-item:hover {
            background-color: transparent !important;
            color: var(--button-bg-color) !important;
            padding-left: 1.25rem;
        }
        
        .menu-colors .dropdown-menu .dropdown-item:hover::before {
            height: 70%;
        }
        
        /* Remove nav-link styling from dropdown items */
        .menu-colors .dropdown-menu .nav-link {
            text-transform: none;
            letter-spacing: normal;
            font-size: 0.9rem;
            padding: 0.4rem 1rem !important;
        }
        
        .menu-colors .dropdown-menu .nav-link:hover {
            padding-left: 1.25rem !important;
        }
        
        .menu-colors .dropdown-menu .nav-link::after {
            display: none;
        }
        
        /* Divider in dropdown */
        .menu-colors .dropdown-divider {
            margin: 0.5rem 0;
            border-color: rgba(0,0,0,0.1);
        }
        
        .menu-colors .btn-outline-login {
            background: var(--button-bg-color);
            color: white;
            border: 2px solid var(--button-bg-color);
            border-radius: 25px;
            font-family: var(--menu-font-family, inherit) !important;
            font-size: var(--login-cart-font-size, var(--menu-font-size, 0.9rem)) !important;
            font-weight: var(--login-cart-font-weight, var(--menu-font-weight, 600)) !important;
            text-transform: var(--menu-text-transform, none) !important;
            letter-spacing: var(--menu-letter-spacing, normal) !important;
            padding: 0.5rem 1.5rem;
        }
        .menu-colors .btn-outline-login.menu-btn-rect-full,
        .menu-colors .btn-cart.menu-btn-rect-full {
            border-radius: 0 !important;
            padding: 0.5rem 1.5rem !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-width: 0 !important;
            /* Fill the menu band: button is at least as tall as menu min-height + padding.
               If the user dials both to 0, the button still keeps its own content padding so it stays visible. */
            min-height: calc(var(--menu-min-height, 48px) + (2 * var(--menu-padding-y, 0.25rem))) !important;
            margin-top: calc(-1 * var(--menu-padding-y, 0.25rem)) !important;
            margin-bottom: calc(-1 * var(--menu-padding-y, 0.25rem)) !important;
            box-sizing: border-box !important;
        }

        .menu-colors .btn-outline-login:hover {
            /* Same hue as --button-bg-color, but 30% darker
               (70% original + 30% black). */
            background: color-mix(in srgb, var(--button-bg-color) 70%, black);
            border-color: color-mix(in srgb, var(--button-bg-color) 70%, black);
            color: white;
        }

        .menu-colors .btn-cart{
            border-width: 2px;
            background: var(--button-bg-color);
            color: white; /* match the Login button's text color */
            border: var(--button-bg-color) 2px solid;
            font-family: var(--menu-font-family, inherit) !important;
            font-size: var(--login-cart-font-size, var(--menu-font-size, 0.9rem)) !important;
            font-weight: var(--login-cart-font-weight, var(--menu-font-weight, 600)) !important;
            text-transform: var(--menu-text-transform, none) !important;
            letter-spacing: var(--menu-letter-spacing, normal) !important;
        }
        /* Bootstrap Icons glyphs don't respond to font-weight, so thicken the
           cart icon's stroke to visually match the Login word's weight. */
        .menu-colors .btn-cart .bi,
        .menu-colors .btn-cart span.bi {
            -webkit-text-stroke: 0.035em currentColor;
            text-stroke: 0.035em currentColor;
        }
        .menu-colors .btn-cart:hover {
            /* Same hue as --button-bg-color, but 30% darker
               (70% original + 30% black). */
            background: color-mix(in srgb, var(--button-bg-color) 70%, black);
            color: white; /* match the Login button's text color */
            border: 2px solid color-mix(in srgb, var(--button-bg-color) 70%, black);
        }

        /* Login + Cart: keep the rollover visual (color change + Bootstrap focus
           ring), but the button itself must never translate up/down on hover,
           focus, or click. Lock transform to none across every state. */
        .menu-colors .btn-outline-login,
        .menu-colors .btn-outline-login:hover,
        .menu-colors .btn-outline-login:focus,
        .menu-colors .btn-outline-login:focus-visible,
        .menu-colors .btn-outline-login:active,
        .menu-colors .btn-outline-login.active,
        .menu-colors .btn-cart,
        .menu-colors .btn-cart:hover,
        .menu-colors .btn-cart:focus,
        .menu-colors .btn-cart:focus-visible,
        .menu-colors .btn-cart:active,
        .menu-colors .btn-cart.active {
            transform: none !important;
        }

        .menu-colors .btn-warning {
            background: linear-gradient(135deg, #FFC107 0%, #FFB300 100%);
            border: none;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
            transition: all 0.3s ease;
        }
        
        .menu-colors .btn-warning:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 193, 7, 0.5);
            background: linear-gradient(135deg, #FFB300 0%, #FFA000 100%);
        }
        
        .menu-colors .form-control {
            border: 2px solid rgba(255,255,255,0.2);
            background-color: rgba(255,255,255,0.1);
            color: var(--menu-header-text-color);
            transition: all 0.3s ease;
        }
        
        .menu-colors .form-control::placeholder {
            color: rgba(255,255,255,0.6);
        }
        
        .menu-colors .form-control:focus {
            background-color: rgba(255,255,255,0.15);
            border-color: var(--menu-header-text-color);
            box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.1);
        }
        
        /* Logo/Home icon enhancement */
        .menu-colors a:has(.bi-house-door-fill) {
            background-color: transparent !important;
        }

        .menu-colors .bi-house-door-fill {
            font-size: 1.5rem;
            transition: color 0.3s ease;
        }

        @keyframes jiggle {
            0%, 100% { transform: rotate(0deg); }
            10% { transform: rotate(-10deg); }
            20% { transform: rotate(10deg); }
            30% { transform: rotate(-10deg); }
            40% { transform: rotate(10deg); }
            50% { transform: rotate(-10deg); }
            60% { transform: rotate(10deg); }
            70% { transform: rotate(-5deg); }
            80% { transform: rotate(5deg); }
            90% { transform: rotate(-2deg); }
        }

        .menu-colors a:hover .bi-house-door-fill {
            animation: jiggle 0.6s ease;
            color: var(--button-bg-color);
        }
        
        /* Mobile menu improvements */
        @media (max-width: 991px) {
            .menu-colors .nav {
                /* padding: 1rem 0;  removed — its top/bottom padding on EACH nav group
                   created the big gap between the two main-nav groups on mobile. */
                padding: 0;
            }

            .menu-colors .nav-link {
                /* padding: 0.75rem 1rem; margin: 0.25rem 0;  removed — the mobile drawer
                   controls its own nav-link spacing (.mobile-nav-panel rules). */
                padding: 0;
                margin: 0;
            }

            .menu-colors .dropdown-menu {
                box-shadow: none;
                background-color: rgba(0,0,0,0.05);
                margin-top: 0;
            }
        }

        /* Menu logo styles */
        .menu-logo {
            max-height: 50px;
            width: auto;
        }

        .menu-logo-link {
            flex: 0 0 auto;
            margin-right: auto !important;
            position: relative;
            z-index: 2;
        }

        /* Admin-controlled padding for the left-side (in-menu) logo — Menu Settings → Header Spacing */
        header.has-menu-logo .menu-logo-link {
            padding: var(--menu-logo-padding, 0);
        }

        /* When logo is in menu, push nav to the right */
        header.has-menu-logo > .container > .d-flex {
            flex-wrap: nowrap;
            justify-content: flex-start;
        }

        header.has-menu-logo .nav {
            flex: 0 0 auto;
            margin-left: auto !important;
            margin-right: 1rem !important;
            padding-left: 0;
        }

        @media (max-width: 991px) {
            header.has-menu-logo > .container > .d-flex {
                flex-wrap: wrap;
            }

            .menu-logo-link {
                margin-right: 1rem !important;
            }

            header.has-menu-logo .nav {
                margin-left: 0 !important;
                width: 100%;
            }
        }

        /* Custom Primary Button Style */
        .btn-bit-primary {
            background-color: var(--button-bg-color);
            color: var(--button-text-color);
            border: 2px solid var(--button-bg-color);
            padding: 0.625rem 1.5rem;
            font-weight: 600;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-radius: 6px;
            transition: all 0.3s ease;
            display: inline-block;
            text-decoration: none;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        
        .btn-bit-primary::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
        }
        
        .btn-bit-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            background-color: var(--button-bg-color);
            color: var(--button-text-color);
            text-decoration: none;
        }
        
        .btn-bit-primary:hover::before {
            width: 300px;
            height: 300px;
        }
        
        .btn-bit-primary:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .btn-bit-primary:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(var(--button-bg-color), 0.3);
        }
        
        /* Button size variations */
        .btn-bit-primary.btn-sm {
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
        }
        
        .btn-bit-primary.btn-lg {
            padding: 0.75rem 2rem;
            font-size: 1.125rem;
        }
        
        /* Button full width */
        .btn-bit-primary.btn-block {
            display: block;
            width: 100%;
        }
        
        /* Disabled state */
        .btn-bit-primary:disabled,
        .btn-bit-primary.disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        .btn-bit-primary:disabled:hover,
        .btn-bit-primary.disabled:hover {
            transform: none;
            box-shadow: none;
        }
        
        /* Custom Primary Outline Button Style */
        .btn-bit-primary-outline {
            background-color: transparent;
            color: var(--button-bg-color);
            border: 2px solid var(--button-bg-color);
            padding: 0.625rem 1.5rem;
            font-weight: 600;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-radius: 6px;
            transition: all 0.3s ease;
            display: inline-block;
            text-decoration: none;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        
        .btn-bit-primary-outline::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background-color: var(--button-bg-color);
            transition: left 0.3s ease;
            z-index: -1;
        }
        
        .btn-bit-primary-outline:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            color: var(--button-text-color);
            text-decoration: none;
            border-color: var(--button-bg-color);
        }
        
        .btn-bit-primary-outline:hover::before {
            left: 0;
        }
        
        .btn-bit-primary-outline:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .btn-bit-primary-outline:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(var(--button-bg-color), 0.3);
        }
        
        /* Button size variations for outline */
        .btn-bit-primary-outline.btn-sm {
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
        }
        
        .btn-bit-primary-outline.btn-lg {
            padding: 0.75rem 2rem;
            font-size: 1.125rem;
        }
        
        /* Button full width for outline */
        .btn-bit-primary-outline.btn-block {
            display: block;
            width: 100%;
        }
        
        /* Disabled state for outline */
        .btn-bit-primary-outline:disabled,
        .btn-bit-primary-outline.disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        .btn-bit-primary-outline:disabled:hover,
        .btn-bit-primary-outline.disabled:hover {
            transform: none;
            box-shadow: none;
            color: var(--button-bg-color);
        }
        
        .btn-bit-primary-outline:disabled::before,
        .btn-bit-primary-outline.disabled::before {
            left: -100%;
        }
        
        /* Custom Secondary Button Style */
        .btn-bit-secondary {
            background-color: var(--secondary-button-bg-color);
            color: var(--secondary-button-text-color);
            border: 2px solid var(--secondary-button-bg-color);
            padding: 0.625rem 1.5rem;
            font-weight: 600;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-radius: 6px;
            transition: all 0.3s ease;
            display: inline-block;
            text-decoration: none;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        
        .btn-bit-secondary::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
        }
        
        .btn-bit-secondary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            background-color: var(--secondary-button-bg-color);
            color: var(--secondary-button-text-color);
            text-decoration: none;
        }
        
        .btn-bit-secondary:hover::before {
            width: 300px;
            height: 300px;
        }
        
        .btn-bit-secondary:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .btn-bit-secondary:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(var(--secondary-button-bg-color), 0.3);
        }
        
        /* Button size variations for secondary */
        .btn-bit-secondary.btn-sm {
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
        }
        
        .btn-bit-secondary.btn-lg {
            padding: 0.75rem 2rem;
            font-size: 1.125rem;
        }
        
        /* Button full width for secondary */
        .btn-bit-secondary.btn-block {
            display: block;
            width: 100%;
        }
        
        /* Disabled state for secondary */
        .btn-bit-secondary:disabled,
        .btn-bit-secondary.disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        .btn-bit-secondary:disabled:hover,
        .btn-bit-secondary.disabled:hover {
            transform: none;
            box-shadow: none;
        }
        
        /* Custom Secondary Outline Button Style */
        .btn-bit-secondary-outline {
            background-color: transparent;
            color: var(--secondary-button-bg-color);
            border: 2px solid var(--secondary-button-bg-color);
            padding: 0.625rem 1.5rem;
            font-weight: 600;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-radius: 6px;
            transition: all 0.3s ease;
            display: inline-block;
            text-decoration: none;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        
        .btn-bit-secondary-outline::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background-color: var(--secondary-button-bg-color);
            transition: left 0.3s ease;
            z-index: -1;
        }
        
        .btn-bit-secondary-outline:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            color: var(--secondary-button-text-color);
            text-decoration: none;
            border-color: var(--secondary-button-bg-color);
        }
        
        .btn-bit-secondary-outline:hover::before {
            left: 0;
        }
        
        .btn-bit-secondary-outline:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .btn-bit-secondary-outline:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(var(--secondary-button-bg-color), 0.3);
        }
        
        /* Button size variations for secondary outline */
        .btn-bit-secondary-outline.btn-sm {
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
        }
        
        .btn-bit-secondary-outline.btn-lg {
            padding: 0.75rem 2rem;
            font-size: 1.125rem;
        }
        
        /* Button full width for secondary outline */
        .btn-bit-secondary-outline.btn-block {
            display: block;
            width: 100%;
        }
        
        /* Disabled state for secondary outline */
        .btn-bit-secondary-outline:disabled,
        .btn-bit-secondary-outline.disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        .btn-bit-secondary-outline:disabled:hover,
        .btn-bit-secondary-outline.disabled:hover {
            transform: none;
            box-shadow: none;
            color: var(--secondary-button-bg-color);
        }
        
        .btn-bit-secondary-outline:disabled::before,
        .btn-bit-secondary-outline.disabled::before {
            left: -100%;
        }
        .body-colors{
            background-color: var(--body-bg-color);
            color: var(--body-text-color);
            font-family: var(--body-font-family);
            font-size: var(--body-font-size);
            font-weight: var(--body-font-weight);
        }
        .footer-colors{
            background-color: var(--footer-bg-color);
            color: var(--footer-text-color);
        }
        /* OUTSIDE the colored area — vertical gap BETWEEN blocks ("Space Below").
           margin-bottom keeps the gap transparent so the next block (or the
           page background) shows through, regardless of this block's color. */
        .page-block { margin-bottom: var(--block-gap, 2rem); }
        .page-block:last-child { margin-bottom: 0; }
        .page-block--gap-none { margin-bottom: 0; }
        .page-block--gap-sm   { margin-bottom: 1rem; }
        .page-block--gap-md   { margin-bottom: 2rem; }
        .page-block--gap-lg   { margin-bottom: 4rem; }

        /* INSIDE the colored area — extra padding on TOP and BOTTOM that PAINTS
           with the block's background ("Inner Padding"). Lives on .page-block-inner
           which is the element that carries the background-color. Left/right stay 0
           so horizontal layout is unaffected. */
        .page-block-inner--pad-none { padding-top: 0;    padding-bottom: 0; }
        .page-block-inner--pad-sm   { padding-top: 1rem; padding-bottom: 1rem; }
        .page-block-inner--pad-md   { padding-top: 2rem; padding-bottom: 2rem; }
        .page-block-inner--pad-lg   { padding-top: 4rem; padding-bottom: 4rem; }

        /* Per-block Title / Description color overrides.
           default.html.twig sets --block-title-color / --block-description-color
           on .page-block-inner when the block's Title Color / Description Color
           fields are filled. The rules below need !important because the global
           h1/h2/hero-subtitle rules in this file are ALSO !important — without
           it those win. The fallback chain (var → theme color → inherit)
           preserves existing behavior when the per-block field is blank. */
        .page-block-inner .card-grid-title,
        .page-block-inner .content-title,
        .page-block-inner .faq-title,
        .page-block-inner .bit-map-title,
        .page-block-inner .text-block-title {
            color: var(--block-title-color, var(--h2-color, inherit)) !important;
        }
        .page-block-inner .hero-title,
        .page-block-inner .hero-stats-title {
            color: var(--block-title-color, var(--h1-color, inherit)) !important;
        }
        {# Block titles follow the H1–H6 heading color that matches their ACTUAL
           tag (e.g. <h3 class="content-title"> → --h3-color), instead of being
           pinned to --h2-color / --h1-color above. A per-block "Title Color"
           (--block-title-color) still wins when set. Tag-qualified so specificity
           (0,2,1) outranks the tag-agnostic fallback rules just above (0,2,0).
           Color only — sizing/weight stay component-controlled, per the heading
           rules near the top of this file. #}
                .page-block-inner h1.card-grid-title,
        .page-block-inner h1.content-title,
        .page-block-inner h1.faq-title,
        .page-block-inner h1.bit-map-title,
        .page-block-inner h1.text-block-title,
        .page-block-inner h1.hero-title,
        .page-block-inner h1.hero-stats-title {
            color: var(--block-title-color, var(--h1-color, inherit)) !important;
        }
        .page-block-inner h2.card-grid-title,
        .page-block-inner h2.content-title,
        .page-block-inner h2.faq-title,
        .page-block-inner h2.bit-map-title,
        .page-block-inner h2.text-block-title,
        .page-block-inner h2.hero-title,
        .page-block-inner h2.hero-stats-title {
            color: var(--block-title-color, var(--h2-color, inherit)) !important;
        }
        .page-block-inner h3.card-grid-title,
        .page-block-inner h3.content-title,
        .page-block-inner h3.faq-title,
        .page-block-inner h3.bit-map-title,
        .page-block-inner h3.text-block-title,
        .page-block-inner h3.hero-title,
        .page-block-inner h3.hero-stats-title {
            color: var(--block-title-color, var(--h3-color, inherit)) !important;
        }
        .page-block-inner h4.card-grid-title,
        .page-block-inner h4.content-title,
        .page-block-inner h4.faq-title,
        .page-block-inner h4.bit-map-title,
        .page-block-inner h4.text-block-title,
        .page-block-inner h4.hero-title,
        .page-block-inner h4.hero-stats-title {
            color: var(--block-title-color, var(--h4-color, inherit)) !important;
        }
        .page-block-inner h5.card-grid-title,
        .page-block-inner h5.content-title,
        .page-block-inner h5.faq-title,
        .page-block-inner h5.bit-map-title,
        .page-block-inner h5.text-block-title,
        .page-block-inner h5.hero-title,
        .page-block-inner h5.hero-stats-title {
            color: var(--block-title-color, var(--h5-color, inherit)) !important;
        }
        .page-block-inner h6.card-grid-title,
        .page-block-inner h6.content-title,
        .page-block-inner h6.faq-title,
        .page-block-inner h6.bit-map-title,
        .page-block-inner h6.text-block-title,
        .page-block-inner h6.hero-title,
        .page-block-inner h6.hero-stats-title {
            color: var(--block-title-color, var(--h6-color, inherit)) !important;
        }

        .page-block-inner .card-grid-description,
        .page-block-inner .content-description,
        .page-block-inner .faq-description,
        .page-block-inner .hero-stats-description,
        .page-block-inner .bit-map-description {
            color: var(--block-description-color, inherit) !important;
        }
        .page-block-inner .hero-subtitle {
            color: var(--block-description-color, var(--hero-subtitle-color, rgba(255, 255, 255, 0.9))) !important;
        }

        /* The gap is the single source of vertical spacing between blocks:
           neutralise each block root's own top/bottom margin (e.g. Bootstrap
           .my-4 on the YouTube block) so it can't leak through the wrapper and
           "None" truly means no gap. Vertical only — keep horizontal
           auto-centering (.container) intact. */
        .page-block > * { margin-top: 0 !important; margin-bottom: 0 !important; }
        .hero-section {
            min-height: var(--hero-min-height, 670px);
            position: relative;
            overflow: hidden;
        }
        .hero-section .hero-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: var(--hero-background-size, cover);
            background-position: var(--hero-background-position, center top 24%);
            background-repeat: no-repeat;
        }
        .hero-section .hero-overlay {
            position: relative;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--hero-overlay-color, rgba(0, 0, 0, 0));
        }
        /* Hero title styles — apply anywhere `.hero-title` is used (not just inside `.hero-section`),
           so the global settings reach contact/services/product pages as well. */
        body .hero-title,
        body .hero-stats-title {
            font-size: var(--hero-font-size, 3rem) !important;
            font-weight: var(--hero-font-weight, 700) !important;
            font-family: var(--hero-font-family, inherit) !important;
            color: var(--hero-color, #ffffff) !important;
            text-transform: var(--hero-text-transform, none) !important;
            letter-spacing: var(--hero-letter-spacing, normal) !important;
            text-shadow: var(--hero-text-shadow, 2px 2px 4px rgba(0, 0, 0, 0.8)) !important;
        }
        body .hero-subtitle {
            font-size: var(--hero-subtitle-font-size, 1.25rem) !important;
            font-weight: var(--hero-subtitle-font-weight, 400) !important;
            font-family: var(--hero-subtitle-font-family, inherit) !important;
            color: var(--hero-subtitle-color, rgba(255, 255, 255, 0.9)) !important;
            text-transform: var(--hero-subtitle-text-transform, none) !important;
            letter-spacing: var(--hero-subtitle-letter-spacing, normal) !important;
            text-shadow: var(--hero-subtitle-text-shadow, 1px 1px 2px rgba(0, 0, 0, 0.6)) !important;
            margin-top: 1rem;
        }
        @media (max-width: 991.98px) {
            .hero-section {
                height: var(--hero-min-height-mobile, 250px);
                min-height: var(--hero-min-height-mobile, 250px);
            }
            /* Scale hero title down at the hamburger breakpoint (same as <lg).
               Factor 0.55 keeps the title readable on phones without truncating. */
            body .hero-title,
            body .hero-stats-title {
                font-size: calc(var(--hero-font-size, 3rem) * 0.55) !important;
            }
        }
        
        /* Card Styles */
        /*.card {*/
        /*    height: 100%;*/
        /*    transition: transform 0.3s ease;*/
        /*}*/
        .card:hover {
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        .card .card-img-top {
            width: 100%;
            height: 250px;
            object-fit: contain;
            background-color: #f8f9fa;
            padding: 10px;
        }
        .card-buttons,
        .polaroid-buttons {
            gap: 0.5rem;
        }
        .card-buttons .btn-bit-primary,
        .polaroid-buttons .btn-bit-primary {
            flex: 1 1 150px;
            text-align: center;
            min-width: 120px;
        }
        /* When only one button, don't stretch it */
        .card-buttons:has(.btn-bit-primary:only-child) .btn-bit-primary,
        .polaroid-buttons:has(.btn-bit-primary:only-child) .btn-bit-primary {
            flex: 0 1 auto;
            min-width: 120px;
        }
        .card-buttons:has(.btn-bit-primary:only-child),
        .polaroid-buttons:has(.btn-bit-primary:only-child) {
            justify-content: center !important;
        }
        
        /* Horizontal Polaroid Style */
        .card-polaroid-horizontal {
            background: #fff;
            padding: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
            border: 1px solid #f0f0f0;
            margin-bottom: 20px;
            transition: box-shadow 0.3s ease;
        }
        .card-polaroid-horizontal:hover {
            box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.12);
        }
        .card-polaroid-horizontal .polaroid-inner {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 20px;
        }
        .card-polaroid-horizontal .polaroid-image {
            flex: 0 0 40%;
            max-width: 40%;
        }
        .card-polaroid-horizontal .polaroid-image img {
            width: 100%;
            height: 200px;
            object-fit: contain;
            background-color: #f8f9fa;
            border: 3px solid #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 5px;
        }
        .card-polaroid-horizontal .polaroid-content {
            flex: 1;
            padding: 10px;
        }
        .card-polaroid-horizontal .polaroid-title {
            font-family: 'Permanent Marker', cursive;
            color: #333;
            margin-bottom: 10px;
            font-size: 1.5rem;
        }
        .card-polaroid-horizontal .polaroid-text {
            color: #666;
            font-size: 0.95rem;
            line-height: 1.6;
        }
        
        /* Responsive adjustments for polaroid cards */
        @media (max-width: 768px) {
            .card-polaroid-horizontal .polaroid-inner {
                flex-direction: column;
            }
            .card-polaroid-horizontal .polaroid-image {
                flex: none;
                max-width: 100%;
            }
        }
        
        /* Page Section Style */
        .card-section {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            margin-bottom: 2rem;
            transition: box-shadow 0.3s ease;
        }
        
        .card-section:hover {
            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
        }
        
        .card-section .section-inner {
            display: flex;
            align-items: flex-start;
            min-height: 300px;
        }
        
        .card-section .section-image {
            flex: 0 0 45%;
            max-width: 45%;
            padding: 2rem 2.5rem;
            display: flex;
            align-items: flex-start;
            justify-content: center;
        }
        
        .card-section .section-image img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .card-section .section-content {
            flex: 1;
            padding: 2rem 2.5rem;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }
        
        .card-section .section-title {
            font-size: 2.25rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: #2c3e50;
            line-height: 1.2;
            text-align: left;
        }
        
        .card-section .section-text {
            font-size: 1.1rem;
            line-height: 1.7;
            color: #555;
            margin-bottom: 1.5rem;
        }
        
        .section-buttons {
            gap: 0.5rem;
        }
        .section-buttons .btn-bit-primary {
            flex: 1 1 150px;
            text-align: center;
            min-width: 120px;
        }
        /* When only one button, don't stretch it */
        .section-buttons:has(.btn-bit-primary:only-child) .btn-bit-primary {
            flex: 0 1 auto;
            min-width: 120px;
        }
        .section-buttons:has(.btn-bit-primary:only-child) {
            justify-content: center !important;
        }
        
        /* Section without image - center content */
        .card-section:not(:has(.section-image)) .section-content {
            text-align: center;
            padding: 3rem 2.5rem;
        }
        
        .card-section:not(:has(.section-image)) .section-title {
            text-align: center;
        }
        
        .card-section:not(:has(.section-image)) .section-buttons {
            justify-content: center;
        }
        
        /* Alternate layout - image on right */
        .card-section.image-right .section-inner {
            flex-direction: row-reverse;
        }
        
        /* Responsive section cards */
        @media (max-width: 992px) {
            .card-section .section-inner {
                flex-direction: column;
                min-height: auto;
            }
            
            .card-section .section-image {
                flex: none;
                max-width: 100%;
                height: 250px;
            }
            
            .card-section .section-content {
                padding: 2rem 1.5rem;
            }
            
            .card-section .section-title {
                font-size: 1.875rem;
                text-align: center;
            }
            
            .card-section .section-buttons {
                justify-content: center;
            }
        }
        
        @media (max-width: 576px) {
            .card-section .section-content {
                padding: 1.5rem 1rem;
            }
            
            .card-section .section-title {
                font-size: 1.5rem;
            }
            
            .card-section .section-buttons .btn-bit-primary {
                min-width: 120px;
            }
        }
        
        /* Article Styles */
        .article-container {
            padding: 3rem 0;
            background-color: #fff;
        }
        
        .article-header {
            margin-bottom: 3rem;
            padding-bottom: 2rem;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .article-meta {
            display: flex;
            gap: 1.5rem;
            margin-bottom: 1rem;
            font-size: 0.875rem;
            color: #6b7280;
        }
        
        .article-category {
            color: var(--button-bg-color);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .article-title {
            font-size: 2.5rem;
            font-weight: 800;
            line-height: 1.2;
            color: #1f2937;
            margin-bottom: 1.5rem;
        }
        
        .article-lead {
            font-size: 1.25rem;
            line-height: 1.6;
            color: #4b5563;
            font-weight: 400;
            margin-bottom: 2rem;
        }
        
        .article-author {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .author-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-info {
            display: flex;
            flex-direction: column;
        }
        
        .author-info strong {
            color: #1f2937;
            font-size: 1rem;
        }
        
        .author-info span {
            color: #6b7280;
            font-size: 0.875rem;
        }
        
        /* Article Body Typography */
        .article-body {
            font-size: 1.125rem;
            line-height: 1.8;
            color: #374151;
        }
        
        .article-body p {
            margin-bottom: 1.5rem;
        }
        
        .article-body p.first-letter::first-letter {
            float: left;
            font-size: 5rem;
            line-height: 1;
            font-weight: 700;
            margin-right: 0.5rem;
            margin-top: -0.2rem;
            color: var(--button-bg-color);
        }
        
        .article-body h2 {
            font-size: 2rem;
            font-weight: 700;
            color: #1f2937;
            margin-top: 3rem;
            margin-bottom: 1.5rem;
            position: relative;
            padding-left: 1rem;
        }
        
        .article-body h2::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 80%;
            background-color: var(--button-bg-color);
        }
        
        .article-body h3 {
            font-size: 1.5rem;
            font-weight: 600;
            color: #1f2937;
            margin-top: 2rem;
            margin-bottom: 1rem;
        }
        
        .article-image {
            margin: 2.5rem 0;
        }
        
        .article-image img {
            width: 100%;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        
        .article-image figcaption {
            text-align: center;
            font-size: 0.875rem;
            color: #6b7280;
            margin-top: 1rem;
            font-style: italic;
        }
        
        .article-quote {
            margin: 2.5rem 0;
            padding: 2rem;
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            border-left: 4px solid var(--button-bg-color);
            border-radius: 8px;
        }
        
        .article-quote p {
            font-size: 1.25rem;
            font-style: italic;
            color: #1e40af;
            margin-bottom: 1rem;
        }
        
        .article-quote cite {
            font-size: 1rem;
            color: #3730a3;
            font-style: normal;
            font-weight: 600;
        }
        
        .article-list {
            margin: 1.5rem 0;
            padding-left: 0;
            list-style: none;
        }
        
        .article-list li {
            position: relative;
            padding-left: 2rem;
            margin-bottom: 1rem;
            line-height: 1.6;
        }
        
        .article-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--button-bg-color);
            font-weight: bold;
            font-size: 1.25rem;
        }
        
        .article-highlight {
            margin: 2.5rem 0;
            padding: 1.5rem;
            background-color: #fef3c7;
            border-radius: 12px;
            border: 2px solid #fbbf24;
        }
        
        .article-highlight h4 {
            color: #92400e;
            font-size: 1.25rem;
            margin-bottom: 0.75rem;
        }
        
        .article-highlight p {
            color: #78350f;
            margin-bottom: 0;
        }
        
        /* Article Footer */
        .article-footer {
            margin-top: 3rem;
            padding-top: 2rem;
            border-top: 1px solid #e5e7eb;
        }
        
        .article-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-bottom: 2rem;
        }
        
        .article-tags .tag {
            padding: 0.5rem 1rem;
            background-color: #f3f4f6;
            color: #4b5563;
            border-radius: 20px;
            font-size: 0.875rem;
            transition: all 0.3s ease;
        }
        
        .article-tags .tag:hover {
            background-color: var(--button-bg-color);
            color: white;
            transform: translateY(-2px);
        }
        
        .article-share {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .article-share span {
            font-weight: 600;
            color: #4b5563;
        }
        
        .share-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #f3f4f6;
            color: #4b5563;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .share-btn:hover {
            background-color: var(--button-bg-color);
            color: white;
            transform: scale(1.1);
        }
        
        /* Related Articles */
        .related-articles {
            margin-top: 4rem;
            padding-top: 3rem;
            border-top: 2px solid #e5e7eb;
        }
        
        .related-articles h3 {
            font-size: 1.875rem;
            font-weight: 700;
            margin-bottom: 2rem;
            color: #1f2937;
        }
        
        .related-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
        }
        
        .related-card:hover {
            box-shadow: 0 8px 25px rgba(0,0,0,0.12);
        }
        
        .related-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .related-content {
            padding: 1.5rem;
        }
        
        .related-content h4 {
            font-size: 1.25rem;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 0.75rem;
        }
        
        .related-content p {
            color: #6b7280;
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 1rem;
        }
        
        .read-more {
            color: var(--button-bg-color);
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .read-more:hover {
            color: var(--button-bg-color);
            padding-left: 5px;
        }
        
        /* Informational Page Styles */
        .info-page-container {
            background: #f9fafb;
        }
        
        .info-intro {
            padding: 4rem 0;
            background: white;
        }
        
        .info-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 1.5rem;
        }
        
        .info-lead {
            font-size: 1.25rem;
            color: #4b5563;
            line-height: 1.8;
            margin-bottom: 2rem;
        }
        
        .info-cta-group {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .info-features {
            padding: 4rem 0;
            background: #f9fafb;
        }
        
        .feature-card {
            background: white;
            padding: 2rem;
            border-radius: 12px;
            text-align: center;
            height: 100%;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        }
        
        .feature-card:hover {
            box-shadow: 0 8px 25px rgba(0,0,0,0.12);
        }
        
        .feature-icon {
            font-size: 3rem;
            color: var(--button-bg-color);
            margin-bottom: 1.5rem;
        }
        
        .feature-card h3 {
            font-size: 1.5rem;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 1rem;
        }
        
        .feature-card p {
            color: #6b7280;
            line-height: 1.6;
        }
        
        .info-content {
            padding: 4rem 0;
            background: white;
        }
        
        .info-content h2 {
            font-size: 2rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 1.5rem;
        }
        
        .info-content p {
            font-size: 1.125rem;
            color: #4b5563;
            line-height: 1.8;
            margin-bottom: 1.5rem;
        }
        
        .info-checklist {
            list-style: none;
            padding: 0;
            margin-bottom: 2rem;
        }
        
        .info-checklist li {
            position: relative;
            padding-left: 2rem;
            margin-bottom: 1rem;
            color: #4b5563;
            line-height: 1.6;
        }
        
        .info-checklist li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--button-bg-color);
            font-weight: bold;
            font-size: 1.25rem;
        }
        
        .info-stats {
            padding: 4rem 0;
            background: linear-gradient(135deg, var(--button-bg-color) 0%, var(--menu-bg-color) 100%);
            color: white;
        }
        
        .stat-card {
            text-align: center;
            padding: 1.5rem;
        }
        
        .stat-number {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        
        .stat-label {
            font-size: 1.125rem;
            opacity: 0.9;
        }
        
        .info-testimonial {
            padding: 4rem 0;
            background: #f9fafb;
        }
        
        .testimonial-card {
            background: white;
            padding: 3rem;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            position: relative;
        }
        
        .testimonial-quote {
            font-size: 4rem;
            color: var(--button-bg-color);
            opacity: 0.2;
            margin-bottom: 1rem;
        }
        
        .testimonial-text {
            font-size: 1.25rem;
            color: #4b5563;
            line-height: 1.8;
            margin-bottom: 2rem;
            font-style: italic;
        }
        
        .testimonial-author strong {
            display: block;
            font-size: 1.125rem;
            color: #1f2937;
            margin-bottom: 0.25rem;
        }
        
        .testimonial-author span {
            color: #6b7280;
            font-size: 0.95rem;
        }
        
        .info-cta-section {
            padding: 4rem 0;
            background: white;
        }
        
        .cta-box {
            background: linear-gradient(135deg, var(--button-bg-color) 0%, var(--menu-bg-color) 100%);
            padding: 3rem;
            border-radius: 12px;
            color: white;
        }
        
        .cta-box h2 {
            font-size: 2.25rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }
        
        .cta-box p {
            font-size: 1.125rem;
            opacity: 0.95;
            margin-bottom: 0;
        }
        
        .cta-box .btn-outline-light {
            color: white;
            border-color: white;
            margin-left: 1rem;
        }
        
        .cta-box .btn-outline-light:hover {
            background-color: white;
            color: var(--button-bg-color);
        }
        
        .info-faq {
            padding: 4rem 0;
            background: white;
        }
        
        .faq-item {
            margin-bottom: 2rem;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .faq-item:last-child {
            border-bottom: none;
        }
        
        .faq-item h4 {
            font-size: 1.25rem;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 1rem;
        }
        
        .faq-item p {
            color: #6b7280;
            line-height: 1.6;
            margin-bottom: 0;
        }
        
        /* Responsive Article Styles */
        @media (max-width: 768px) {
            .article-title {
                font-size: 2rem;
            }
            
            .article-lead {
                font-size: 1.125rem;
            }
            
            .article-body {
                font-size: 1rem;
            }
            
            .article-body h2 {
                font-size: 1.5rem;
            }
            
            .article-body h3 {
                font-size: 1.25rem;
            }
            
            .article-meta {
                flex-direction: column;
                gap: 0.5rem;
            }
        }

         .faq-accordion-block {
             padding: 5rem 0;
             background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
         }

        .faq-title {
            font-size: 2.75rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 1.5rem;
            position: relative;
        }

        .faq-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, var(--button-bg-color), var(--menu-header-bg-color));
            border-radius: 2px;
        }

        .faq-description {
            font-size: 1.125rem;
            color: #6b7280;
            max-width: 700px;
            margin: 0 auto 1rem;
            line-height: 1.6;
        }

        .faq-item {
            border: none;
            margin-bottom: 1.25rem;
            background: white;
            border-radius: 16px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
        }

        .faq-item:hover {
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        }

        .faq-highlight {
            border-left: 5px solid var(--button-bg-color);
            background: linear-gradient(135deg, rgba(var(--button-bg-color-rgb, 0, 123, 255), 0.02) 0%, white 100%);
        }

        .faq-badge {
            position: absolute;
            top: -10px;
            right: 24px;
            background: linear-gradient(135deg, var(--button-bg-color), var(--menu-header-bg-color));
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 700;
            z-index: 10;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .faq-highlight .faq-badge {
            background: linear-gradient(135deg, var(--menu-header-bg-color), var(--button-bg-color));
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }

        .bit-accordion-button {
            background: white;
            color: #1f2937;
            font-weight: 600;
            padding: 1.75rem 2rem;
            font-size: 1.125rem;
            border: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 16px;
            width: 100%;
            text-align: left;
        }

        .bit-accordion-button:hover {
            background: #f8fafc;
            color: var(--button-bg-color);
        }

        .bit-accordion-button:not(.collapsed) {
            background: var(--button-bg-color);
            color: white;
            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
        }

        .bit-accordion-button:not(.collapsed):hover {
            background: var(--menu-header-bg-color);
            color: white;
        }

        .bit-accordion-button:focus {
            box-shadow: 0 0 0 3px rgba(var(--button-bg-color-rgb, 0, 123, 255), 0.15);
            border-color: transparent;
            outline: none;
        }

        .bit-accordion-button::after {
            display: none; /* Hide default Bootstrap arrow */
        }

        .faq-question {
            flex-grow: 1;
            text-align: left;
            font-size: 1.125rem;
            line-height: 1.4;
            font-weight: 600;
        }

        .faq-icon {
            font-size: 1.5rem;
            color: #9ca3af;
            margin-left: 1.5rem;
            position: relative;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 50%;
            transition: all 0.4s ease;
        }

        .bit-accordion-button:hover .faq-icon {
            background: rgba(var(--button-bg-color-rgb, 0, 123, 255), 0.1);
            color: var(--button-bg-color);
        }

        .bit-accordion-button:not(.collapsed) .faq-icon {
            background: rgba(255, 255, 255, 0.2);
            color: white;
        }

        .faq-icon-plus,
        .faq-icon-minus {
            position: absolute;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            font-weight: 700;
        }

        .bit-accordion-button:not(.collapsed) .faq-icon-plus {
            opacity: 0;
            transform: rotate(135deg) scale(0.8);
        }

        .bit-accordion-button.collapsed .faq-icon-minus {
            opacity: 0;
            transform: rotate(-135deg) scale(0.8);
        }

        .bit-accordion-button:not(.collapsed) .faq-icon-minus {
            opacity: 1;
            transform: rotate(0deg) scale(1);
        }

        .bit-accordion-button.collapsed .faq-icon-plus {
            opacity: 1;
            transform: rotate(0deg) scale(1);
        }

        .bit-accordion-body {
            padding: 2rem;
            border: none;
            background: #fafbfc;
            margin: 0 1px 1px 1px;
            border-radius: 0 0 15px 15px;
        }

        .faq-answer {
            color: #4b5563;
            line-height: 1.8;
            font-size: 1rem;
        }

        .faq-answer p {
            margin-bottom: 1rem;
        }

        .faq-answer p:last-child {
            margin-bottom: 0;
        }

        .faq-answer ul,
        .faq-answer ol {
            margin-left: 1.5rem;
            margin-bottom: 1rem;
        }

        .faq-answer li {
            margin-bottom: 0.5rem;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .faq-accordion-block {
                padding: 4rem 0;
            }

            .faq-title {
                font-size: 2.25rem;
            }

            .bit-accordion.faq-accordion {
                --bs-accordion-btn-padding-x: 1.5rem;
                --bs-accordion-btn-padding-y: 1.5rem;
                --bs-accordion-body-padding-x: 1.5rem;
                --bs-accordion-body-padding-y: 1.5rem;
            }

            .faq-item {
                margin-bottom: 1rem;
            }

            .faq-question {
                font-size: 1rem;
                line-height: 1.5;
            }

            .faq-icon {
                width: 20px;
                height: 20px;
                font-size: 1.25rem;
                margin-left: 1rem;
            }

            .faq-badge {
                right: 16px;
                top: -8px;
                padding: 0.375rem 0.75rem;
                font-size: 0.75rem;
            }

            .bit-accordion-body {
                padding: 1.5rem;
            }

            .faq-answer {
                font-size: 0.95rem;
                line-height: 1.7;
            }
        }

        @media (max-width: 576px) {
            .faq-accordion-block {
                padding: 3rem 0;
            }

            .faq-title {
                font-size: 1.875rem;
            }

            .faq-description {
                font-size: 1rem;
            }

            .faq-accordion {
                --bs-accordion-btn-padding-x: 1.25rem;
                --bs-accordion-btn-padding-y: 1.25rem;
                --bs-accordion-body-padding-x: 1.25rem;
                --bs-accordion-body-padding-y: 1.25rem;
            }

            .faq-question {
                font-size: 0.95rem;
            }

            .accordion-body {
                padding: 1.25rem;
            }

            .faq-answer {
                font-size: 0.9rem;
            }
        }

        .product-display-block {
            position: relative;
            overflow: hidden;
        }

        .product-display-background {
            padding: 4rem 0;
            position: relative;
            z-index: 0;
        }

        .product-display-background .container {
            position: relative;
            z-index: 2;
        }

        .product-bg-default {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        }

        .product-bg-custom {
            color: white;
        }

        .product-bg-image {
            position: relative;
            color: white;
        }

        .product-background-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            z-index: 0;
        }

        .product-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1;
        }

        .product-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: inherit;
            line-height: 1.2;
        }

        .product-description {
            font-size: 1.125rem;
            line-height: 1.6;
            margin-bottom: 2rem;
            opacity: 0.9;
        }

        .product-description p {
            margin-bottom: 1rem;
        }

        .product-description p:last-child {
            margin-bottom: 0;
        }

        .product-price {
            font-size: 2rem;
            font-weight: 700;
            color: var(--button-bg-color);
            margin-bottom: 2rem;
        }

        .product-image-container {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .product-image-container.centered {
            margin: 2rem auto 0;
            max-width: 400px;
        }

        .product-image {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .product-image:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .product-image-placeholder {
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.1);
            border: 2px dashed rgba(255, 255, 255, 0.3);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            color: rgba(255, 255, 255, 0.5);
            transition: all 0.3s ease;
        }

        .product-bg-default .product-image-placeholder {
            background: rgba(0, 0, 0, 0.05);
            border-color: rgba(0, 0, 0, 0.1);
            color: rgba(0, 0, 0, 0.3);
        }

        .product-image-placeholder:hover {
            transform: scale(1.05);
            background: rgba(255, 255, 255, 0.15);
        }

        .product-bg-default .product-image-placeholder:hover {
            background: rgba(0, 0, 0, 0.1);
        }

        .product-content {
            padding: 0 1rem;
        }

        .product-actions {
            margin-top: 2rem;
        }

        .product-additional-buttons {
            margin-top: 1rem;
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }

        .product-additional-buttons .btn-bit-primary {
            margin: 0;
        }

        .btn-add-now {
            display: inline-block;
            background: var(--button-bg-color);
            color: white;
            padding: 0.875rem 2rem;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .btn-add-now:hover {
            background: var(--menu-header-bg-color);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            color: white;
            text-decoration: none;
        }

        .product-bg-custom .btn-add-now,
        .product-bg-image .btn-add-now {
            background: rgba(255, 255, 255, 0.9);
            color: var(--button-bg-color);
        }

        .product-bg-custom .btn-add-now:hover,
        .product-bg-image .btn-add-now:hover {
            background: white;
            color: var(--menu-header-bg-color);
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .product-display-background {
                padding: 3rem 0;
            }

            .product-title {
                font-size: 2rem;
                text-align: center;
            }

            .product-description {
                text-align: center;
                font-size: 1rem;
            }

            .product-price {
                font-size: 1.75rem;
                text-align: center;
            }

            .product-image-placeholder {
                width: 250px;
                height: 250px;
                font-size: 3rem;
            }

            .product-content {
                text-align: center;
            }

            .product-image {
                height: 250px;
            }

            .product-actions {
                margin-top: 1.5rem;
            }

            .product-additional-buttons {
                margin-top: 1rem;
                justify-content: center;
            }

            .col-12.text-center .product-additional-buttons {
                justify-content: center;
            }
        }

        @media (max-width: 576px) {
            .product-display-background {
                padding: 2rem 0;
            }

            .product-title {
                font-size: 1.75rem;
            }

            .product-description {
                font-size: 0.875rem;
                margin-bottom: 1.5rem;
            }

            .product-price {
                font-size: 1.5rem;
                margin-bottom: 1.5rem;
            }

            .product-image-placeholder {
                width: 200px;
                height: 200px;
                font-size: 2.5rem;
            }

            .product-image-container.centered {
                margin-top: 1.5rem;
            }

            .product-image {
                height: 200px;
            }

            .btn-add-now {
                padding: 0.75rem 1.5rem;
                font-size: 1rem;
            }

            .product-actions {
                margin-top: 1rem;
            }

            .product-additional-buttons {
                margin-top: 0.75rem;
                justify-content: center;
            }

            .col-12.text-center .product-additional-buttons {
                justify-content: center;
            }
        }



        /* Map Block Styles */
        .bit-map-block {
            padding: 4rem 0;
            background: white;
        }

        .bit-map-full-width {
            padding: 0;
        }

        .bit-map-full-width .bit-map-container {
            margin-bottom: 0;
            border-radius: 0;
            box-shadow: none;
        }

        .bit-map-full-width .bit-map-embed {
            border-radius: 0;
            height: 60vh;
            min-height: 400px;
        }

        .bit-map-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 1rem;
            position: relative;
        }

        .bit-map-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, var(--button-bg-color), var(--menu-header-bg-color));
            border-radius: 2px;
        }

        .bit-map-description {
            font-size: 1.125rem;
            color: #6b7280;
            max-width: 700px;
            margin: 0 auto 1rem;
            line-height: 1.6;
        }

        .bit-map-container {
            position: relative;
            background: #f8fafc;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
            margin-bottom: 2rem;
        }

        .bit-map-height-small { height: 300px; }
        .bit-map-height-medium { height: 400px; }
        .bit-map-height-large { height: 500px; }
        .bit-map-height-xl { height: 600px; }

        .bit-map-embed {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 16px;
            display: block;
        }

        .bit-map-actions {
            text-align: center;
            margin-top: 1rem;
        }

        .bit-map-actions .btn-bit-primary {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .bit-multiple-locations-note {
            position: absolute;
            bottom: 15px;
            left: 15px;
            background: rgba(255, 255, 255, 0.95);
            padding: 0.75rem 1rem;
            border-radius: 8px;
            font-size: 0.9rem;
            color: #4b5563;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .bit-multiple-locations-note i {
            color: var(--button-bg-color);
            font-size: 1rem;
        }

        /* Location List Styles */
        .bit-location-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-top: 2rem;
        }

        .bit-location-item {
            display: flex;
            flex-direction: column;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
            border: 2px solid transparent;
            overflow: hidden; /* clip iframe corners to card radius */
        }

        .bit-location-map {
            position: relative;
            background: #f8fafc;
            width: 100%;
        }

        .bit-location-map .bit-map-embed {
            border-radius: 0; /* card already clips corners */
        }

        .bit-location-body {
            display: flex;
            align-items: flex-start;
            padding: 1.5rem;
        }

        .bit-location-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
            border-color: var(--button-bg-color);
        }

        .bit-location-highlight {
            border-color: var(--button-bg-color);
            background: linear-gradient(135deg, rgba(var(--button-bg-color-rgb, 0, 123, 255), 0.02) 0%, white 100%);
        }

        .bit-location-active {
            border-color: var(--menu-header-bg-color) !important;
            background: linear-gradient(135deg, rgba(var(--button-bg-color-rgb, 0, 123, 255), 0.05) 0%, white 100%) !important;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
        }

        .bit-location-marker-preview {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--button-bg-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1rem;
            margin-right: 1rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            flex-shrink: 0;
        }

        .bit-location-info {
            flex-grow: 1;
        }

        .bit-location-name {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 0.5rem;
        }

        .bit-location-address {
            color: #6b7280;
            margin-bottom: 0.75rem;
            line-height: 1.5;
        }

        .bit-location-description {
            color: #4b5563;
            margin-bottom: 1rem;
            line-height: 1.6;
            font-size: 0.95rem;
        }

        .bit-location-contact {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            align-items: center;
        }

        .bit-location-map-link {
            margin-left: auto;
        }

        .bit-location-phone,
        .bit-location-email {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #6b7280;
            font-size: 0.9rem;
        }

        .bit-location-phone i,
        .bit-location-email i {
            color: var(--button-bg-color);
            font-size: 1rem;
        }

        .bit-location-phone a,
        .bit-location-email a {
            color: #4b5563;
            text-decoration: none;
        }

        .bit-location-phone a:hover,
        .bit-location-email a:hover {
            color: var(--button-bg-color);
            text-decoration: underline;
        }

        /* Map responsive adjustments */
        @media (max-width: 768px) {
            .bit-map-block {
                padding: 3rem 0;
            }

            .bit-map-full-width .bit-map-embed {
                height: 50vh;
                min-height: 300px;
            }

            .bit-map-title {
                font-size: 2rem;
            }

            .bit-map-description {
                font-size: 1rem;
            }

            .bit-map-height-small { height: 250px; }
            .bit-map-height-medium { height: 300px; }
            .bit-map-height-large { height: 350px; }
            .bit-map-height-xl { height: 400px; }

            .bit-location-list {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .bit-location-body {
                padding: 1.25rem;
            }

            .bit-location-contact {
                flex-direction: column;
                gap: 0.5rem;
            }
        }

        @media (max-width: 576px) {
            .bit-map-block {
                padding: 2rem 0;
            }

            .bit-map-full-width .bit-map-embed {
                height: 40vh;
                min-height: 250px;
            }

            .bit-map-title {
                font-size: 1.75rem;
            }

            .bit-map-height-small { height: 200px; }
            .bit-map-height-medium { height: 250px; }
            .bit-map-height-large { height: 300px; }
            .bit-map-height-xl { height: 350px; }

            .bit-location-body {
                flex-direction: column;
                text-align: center;
            }

            .bit-location-marker-preview {
                margin: 0 auto 1rem auto;
            }

            .bit-location-map-link {
                margin-left: 0;
                margin-top: 0.5rem;
            }
        }

        /* Footer Styles */
        .bit-footer {
            padding: 3rem 0 0;
            margin-top: 4rem;
        }

        .bit-footer-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1.2fr 1.3fr;
            gap: 2rem;
            align-items: start;
        }

        .bit-footer-column {
            display: flex;
            flex-direction: column;
        }

        .bit-footer-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 1.25rem;
            color: var(--footer-text-color);
        }

        .bit-footer-logo {
            max-height: 60px;
            max-width: 200px;
            width: auto;
            height: auto;
            object-fit: contain;
            margin-bottom: 1rem;
        }

        .bit-footer-description {
            font-size: 0.9rem;
            line-height: 1.6;
            opacity: 0.9;
        }

        .bit-footer-menu {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .bit-footer-menu-item {
            margin-bottom: 0.5rem;
        }

        .bit-footer-link {
            color: var(--footer-text-color);
            text-decoration: none;
            font-size: 0.95rem;
            opacity: 0.9;
            transition: all 0.3s ease;
        }

        .bit-footer-link:hover {
            color: var(--button-bg-color);
            opacity: 1;
        }

        .bit-footer-contact-item {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
            font-size: 0.95rem;
        }

        .bit-footer-contact-item i {
            color: var(--footer-icon-text-color);
            font-size: 1rem;
            margin-top: 0.15rem;
            flex-shrink: 0;
        }

        .bit-footer-social {
            display: flex;
            gap: 0.75rem;
            margin-top: 1rem;
        }

        .bit-footer-social a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: var(--footer-text-color);
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .bit-footer-social a:hover {
            background: var(--footer-icon-color);
            color: var(--footer-icon-text-color);
        }

        .bit-footer-newsletter-text {
            font-size: 0.9rem;
            margin-bottom: 1rem;
            opacity: 0.9;
        }

        .bit-footer-newsletter-form {
            display: flex;
            gap: 0;
        }

        .bit-footer-newsletter-input {
            flex: 1;
            padding: 0.6rem 1rem;
            border: none;
            border-radius: 4px 0 0 4px;
            font-size: 0.9rem;
            background: #fff;
            color: #333;
        }

        .bit-footer-newsletter-input::placeholder {
            color: #999;
        }

        .bit-footer-newsletter-btn {
            padding: 0.6rem 1rem;
            background: var(--button-bg-color);
            color: var(--button-text-color);
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .bit-footer-newsletter-btn:hover {
            opacity: 0.9;
        }

        .bit-footer-bottom {
            display: flex;
            justify-content: center;
            align-items: center;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding: 1.5rem 0;
            margin-top: 2rem;
        }

        .bit-footer-copyright p {
            margin: 0;
            font-size: 0.9rem;
            opacity: 0.8;
        }

        /* Footer responsive adjustments */
        @media (max-width: 992px) {
            .bit-footer-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .bit-footer-column:first-child {
                grid-column: 1 / -1;
                text-align: center;
                margin-bottom: 1rem;
            }

            .bit-footer-column:first-child .bit-footer-logo {
                margin-left: auto;
                margin-right: auto;
            }
        }

        @media (max-width: 768px) {
            .bit-footer {
                padding: 2rem 0 0;
            }

            .bit-footer-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1.5rem;
            }

            .bit-footer-column:first-child {
                grid-column: 1 / -1;
            }
        }

        @media (max-width: 576px) {
            .bit-footer-grid {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .bit-footer-column:first-child {
                grid-column: auto;
            }

            .bit-footer-social {
                justify-content: center;
            }

            .bit-footer-contact-item {
                justify-content: center;
            }

            .bit-footer-newsletter-form {
                flex-direction: column;
            }

            .bit-footer-newsletter-input {
                border-radius: 4px;
                margin-bottom: 0.5rem;
            }

            .bit-footer-newsletter-btn {
                border-radius: 4px;
            }
        }