/* Nav menu: hide hamburger on desktop, show on tablet */
    @media (min-width: 1025px) {
        .elementor-menu-toggle, div.elementor-menu-toggle { display: none !important; }
        .elementor-nav-menu--dropdown.elementor-nav-menu__container { display: none !important; }
    }
    @media (max-width: 1024px) {
        .elementor-nav-menu--main { display: none !important; }
        .elementor-menu-toggle, div.elementor-menu-toggle { display: flex !important; width: 44px !important; height: 44px !important; }
        .cook-nav-break { display: none !important; }
    }
    .elementor-menu-toggle svg.e-font-icon-svg { width: 28px !important; height: 28px !important; max-width: 28px !important; max-height: 28px !important; }

    /* Nav link colors + sizing: dark text on white nav bar */
    .elementor-nav-menu .elementor-item { color: var(--cook-text, #4F4F4F) !important; font-size: 1.125rem !important; font-weight: 700 !important; padding: 0.75rem 1rem !important; text-decoration: none !important; text-align: center !important; line-height: 1.2 !important; position: relative !important; }
    .elementor-nav-menu .elementor-item::after { content: "" !important; position: absolute !important; bottom: 0.25rem !important; left: 50% !important; transform: translateX(-50%) scaleX(0) !important; width: calc(100% - 2.5rem) !important; height: 3px !important; background: var(--cook-accent, #BA2031) !important; transition: transform var(--cook-transition-fast, 0.2s ease) !important; }
    .elementor-nav-menu .elementor-item:hover,
    .elementor-nav-menu .elementor-item:focus { color: var(--cook-accent, #BA2031) !important; text-decoration: none !important; }
    .elementor-nav-menu .elementor-item:hover::after,
    .elementor-nav-menu .elementor-item:focus::after { transform: translateX(-50%) scaleX(1) !important; }
    .elementor-nav-menu .elementor-item.elementor-item-active { color: var(--cook-accent, #BA2031) !important; text-decoration: none !important; }
    .elementor-nav-menu .elementor-item.elementor-item-active::after { transform: translateX(-50%) scaleX(1) !important; }

    /* Main nav bar: force white background + vertical center all columns */
    .cook-nav-bar, .cook-nav-bar.elementor-section { background-color: var(--cook-bg-primary, #FFFFFF) !important; background-image: none !important; border-bottom: 1px solid var(--cook-border, #D3D3D3); padding: 0 1.25rem !important; margin: 0 !important; }
    .cook-nav-bar > .elementor-container { align-items: center !important; justify-content: space-between !important; padding: 0 !important; min-height: 2.5rem; max-width: 1140px !important; margin: 0 auto !important; }
    .cook-nav-bar > .elementor-container > .elementor-column { display: flex; align-items: center; justify-content: center !important; padding: 0 !important; }
    .cook-nav-bar .elementor-widget-wrap { display: flex; align-items: center; justify-content: center !important; padding: 0 !important; margin: 0 !important; }
    .cook-nav-bar .elementor-widget { margin: 0 !important; }
    .cook-utility-bar, .cook-utility-bar.elementor-section { background-color: var(--cook-topbar, #5E5E5E) !important; padding: 0 1.25rem !important; margin: 0 !important; }
    /* CLS (v37m.28). The store-indicator is JS-injected as a flex sibling of the links text-editor on
       DOMContentLoaded; it steals row width and transiently wraps the links to a new line, growing the
       bar and shoving MAIN ~26px (CLS ~0.18). Cap the bar height + clip (early render-blocking CSS) so
       no internal reflow can move MAIN. Desktop = single 44px row; mobile = 2 rows (60px) after the RTO
       phone line is dropped below (redundant with the footer RTO disclosure), restoring the intended
       2-row design and avoiding a 3rd-row overflow that a cap would otherwise clip. */
    @media (min-width: 768px) { .cook-utility-bar, .cook-utility-bar.elementor-section { max-height: 2.75rem; overflow: hidden; } }
    @media (max-width: 767px) {
      .cook-utility-bar .cook-util-rto { display: none; } /* drop verbose RTO phone line (+ its leading separator) on mobile; it remains in the footer RTO disclosure */
      .cook-utility-bar, .cook-utility-bar.elementor-section { max-height: 3.75rem; overflow: hidden; }
    }
    .cook-utility-bar > .elementor-container { align-items: center !important; min-height: 1.75rem !important; padding: 0 !important; max-width: 1140px !important; margin: 0 auto !important; }
    .cook-utility-bar > .elementor-container > .elementor-column { display: flex; align-items: center; padding: 0 !important; }
    .cook-utility-bar .elementor-widget-wrap { display: flex; align-items: center; width: 100%; padding: 0 !important; margin: 0 !important; }
    .cook-utility-bar .elementor-widget { margin: 0 !important; padding: 0 !important; }
    .cook-utility-bar .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
    .cook-utility-bar .elementor-text-editor p { margin: 0 !important; line-height: 2 !important; font-size: 1.25rem !important; }

    /* Logo: constrain size */
    .elementor-widget-image .attachment-full.size-full { max-width: 9.375rem !important; height: auto !important; }

    /* Utility bar: enforce 44px minimum touch targets */
    .elementor-section:first-child .elementor-text-editor a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 0.25rem; }
    .elementor-section:first-child .elementor-text-editor p { margin: 0; line-height: 44px; }

    /* CTA bar: uniform buttons + layout */
    .cook-cta-bar, .cook-cta-bar.elementor-section { padding: 0.875rem 2.5rem !important; }
    .cook-cta-bar > .elementor-container { align-items: center !important; justify-content: space-between !important; max-width: 1140px !important; margin: 0 auto !important; }
    .cook-cta-bar > .elementor-container { flex-direction: row !important; }
    .cook-cta-bar > .elementor-container > .elementor-column { flex: 1 !important; padding: 0 0.5rem !important; }
    .cook-cta-bar .elementor-heading-title { font-size: 1.75rem !important; color: var(--cook-text-inverse, #FFFFFF) !important; text-align: center !important; }
    .cook-cta-bar .elementor-button { display: block !important; width: 100% !important; text-align: center !important; padding: 1rem 1.5rem !important; font-size: 1.25rem !important; box-sizing: border-box !important; line-height: 1.2 !important; }

    /* Trust bar: bigger text, even spacing */
    .cook-trust-bar > .elementor-container { align-items: center !important; max-width: 1140px !important; margin: 0 auto !important; justify-content: space-around !important; }
    .cook-trust-bar .elementor-heading-title { font-size: 1.25rem !important; color: var(--cook-text-inverse, #FFFFFF) !important; letter-spacing: 0.0625rem !important; }

    /* Promo slider + CTA band: full viewport width, no side padding */
    .cook-promo-slider { overflow: hidden; }
    .cook-promo-slider img { width: 100%; height: auto; display: block; }
    .elementor-section:has(.cook-promo-slider) > .elementor-container,
    .elementor-section:has(.cook-cta-bar) > .elementor-container,
    .elementor-section:has(.cook-prefooter-cta) > .elementor-container,
    .elementor-section:has([data-elementor-id="780"]) > .elementor-container {
        max-width: 100% !important;
        padding: 0 !important;
    }
    .elementor-section:has(.cook-promo-slider) .elementor-column-wrap,
    .elementor-section:has(.cook-promo-slider) .elementor-widget-wrap,
    .elementor-section:has(.cook-promo-slider) .elementor-column,
    .elementor-section:has(.cook-prefooter-cta) .elementor-column-wrap,
    .elementor-section:has(.cook-prefooter-cta) .elementor-widget-wrap,
    .elementor-section:has(.cook-prefooter-cta) .elementor-column {
        padding: 0 !important;
    }
    /* a67i.1 pilot: the dealer-CTA widget's own .cook-prefooter-cta is a full-bleed
       band (own red bg + inner padding), so zero the wrapping section's horizontal
       padding too — keeps the band edge-to-edge regardless of section config. */
    .elementor-section:has(.cook-prefooter-cta) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* uvod (2026-07-10): the sr-only SEO <h1> widget sits above the slider in the same
       column; as a non-last widget it carries Elementor's default 20px bottom margin,
       leaving a 20px gap under the nav even after the slider's own top padding is zeroed.
       Collapse it so the full-bleed banner sits truly flush under the header. */
    .elementor-widget-wrap:has(.cook-promo-slider) > .elementor-widget:not(:last-child) {
        margin-bottom: 0 !important;
    }

    /* bk0n: CTA Band (#780) two-button row. Section/column gap is "no", so when the
       columns stack on mobile the call + quote buttons touch and read as one white
       block. Add a gap below the call button on mobile only (desktop spreads L/R). */
    @media (max-width: 767px) {
        .elementor-element-cta_section_01 .cook-phone-btn { margin-bottom: 12px; }
    }

    /* Prevent any element from overflowing viewport */
    body { overflow-x: hidden; }
    .elementor-section { max-width: 100vw; overflow: hidden; }
    .elementor-section > .elementor-container { max-width: 1140px !important; margin-left: auto !important; margin-right: auto !important; }

    /* Building Card: pin button to bottom of card */
    .elementor-loop-container .elementor-section-wrap > .elementor-section { height: 100%; }
    .elementor-loop-container .elementor-section-wrap > .elementor-section > .elementor-container { height: 100%; }
    .elementor-loop-container .elementor-section-wrap > .elementor-section > .elementor-container > .elementor-column { height: 100%; }
    .elementor-loop-container .elementor-section-wrap > .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }
    .elementor-loop-container .elementor-section-wrap > .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget:last-child {
        margin-top: auto !important;
    }

    /* Quote form section — conversion destination, more breathing room */
    .cook-quote-form.elementor-section { padding: 3.75rem 1.25rem !important; }

    /* RTO stat section — key persuasion moment, give it weight */
    .cook-rto-stats.elementor-section { padding: 3.125rem 1.25rem !important; }

    /* How It Works — supporting content, keep it tighter */
    .cook-how-it-works.elementor-section { padding: 1.875rem 1.25rem !important; }

    /* Building cards: image aspect ratio */
    .elementor-loop-container .elementor-widget-image img {
        aspect-ratio: 4/3 !important;
        object-fit: cover !important;
    }

    /* Building cards: readable font sizes */
    .elementor-loop-container .elementor-heading-title {
        font-size: 1.25rem !important;
    }

    .elementor-loop-container .elementor-widget:has(> .elementor-shortcode:empty) {
        display: none !important;
    }

    /* Building cards: tighten widget spacing (Elementor default 20px is too much) */
    .elementor-loop-container .elementor-widget {
        margin-bottom: 8px !important;
    }

    /* Building cards: hide empty shortcode widgets (no configurator_slug) */
    .elementor-loop-container .elementor-widget-shortcode:has(.elementor-shortcode:empty) {
        display: none !important;
    }

    /* Building cards: price alignment */
    .elementor-loop-container .cook-price,
    .elementor-loop-container .cook-price--empty {
        margin: 4px 0 !important;
        text-align: center !important;
    }
    .elementor-loop-container .cook-price--empty a {
        display: inline-block !important;
    }

    /* Building cards: button area — last two visible widgets side by side */
    .elementor-loop-container .elementor-widget-button {
        margin-bottom: 0 !important;
    }
    .elementor-loop-container .elementor-widget:has(.cook-customizer-btn) {
        margin-bottom: 4px !important;
    }
    .elementor-loop-container .elementor-widget:has(.cook-customizer-btn) + .elementor-widget-button {
        /* When both buttons exist: make a flex row */
    }

    /* Building cards: button sizing — both buttons consistent */
    .elementor-loop-container .cook-customizer-btn,
    .elementor-loop-container .elementor-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 44px !important;
        padding: var(--cook-space-2, 8px) var(--cook-space-4, 16px) !important;
        font-family: Roboto Slab, serif !important;
        font-weight: 700 !important;
        font-size: 0.75rem !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        text-align: center !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        border-radius: var(--cook-radius-sm, 4px) !important;
        transition: var(--cook-transition-fast, 0.2s ease) !important;
        box-sizing: border-box !important;
    }

    /* Building cards: View Details (Elementor native button) — secondary color, matches Customize shape */
    .elementor-loop-container .elementor-widget-button .elementor-button {
        background-color: var(--cook-dark-gray, #373737) !important;
        color: #FFFFFF !important;
        border: none !important;
    }
    .elementor-loop-container .elementor-widget-button .elementor-button:hover,
    .elementor-loop-container .elementor-widget-button .elementor-button:focus {
        background-color: #1F1F1F !important;
        color: #FFFFFF !important;
    }

    /* Building cards: when both buttons exist, put them side by side */
    .elementor-loop-container .elementor-element-cook_customizer_card:not(:has(.elementor-shortcode:empty)),
    .elementor-loop-container .elementor-element-cook_customizer_card:not(:has(.elementor-shortcode:empty)) + .elementor-element-14cd383 {
        display: inline-block !important;
        width: 49% !important;
        vertical-align: top !important;
        margin-bottom: 0 !important;
    }

    /* Mobile hamburger CTA: show Start Designing menu item as red button on mobile, hide on desktop */
    .cook-mobile-cta { display: none !important; }
    @media (max-width: 1024px) {
        .cook-mobile-cta { display: block !important; margin-top: 8px !important; }
        .cook-mobile-cta > a.elementor-item,
        .cook-mobile-cta > a {
            background: var(--cook-red, #BA2031) !important;
            color: #FFFFFF !important;
            font-family: Roboto Slab, serif !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            text-align: center !important;
            border-radius: var(--cook-radius-sm, 4px) !important;
            padding: 12px 20px !important;
            min-height: 44px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            margin: 8px 16px !important;
        }
        .cook-mobile-cta > a:hover,
        .cook-mobile-cta > a:focus {
            background: #9A1A29 !important;
            color: #FFFFFF !important;
        }
    }

    /* P0 Accessibility: visible focus indicator for keyboard users (WCAG 2.4.7) */
    *:focus-visible {
        outline: 2px solid var(--cook-red, #BA2031) !important;
        outline-offset: 2px !important;
    }

    /* P0 Accessibility: skip-to-content link visible on focus (WCAG 2.4.1) */
    .screen-reader-text:focus,
    .skip-link:focus {
        clip: auto !important;
        clip-path: none !important;
        height: auto !important;
        width: auto !important;
        overflow: visible !important;
        position: fixed !important;
        top: 8px !important;
        left: 8px !important;
        z-index: 100000 !important;
        background: #fff !important;
        color: var(--cook-red, #BA2031) !important;
        padding: 8px 16px !important;
        font-size: var(--cook-text-sm, 0.8125rem) !important;
        font-family: Cabin, sans-serif !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
        border-radius: var(--cook-radius-sm, 4px) !important;
    }

    /* P1 Touch targets: utility bar links need 44px tappable height */
    .cook-utility-bar a {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* P1 Touch targets: footer nav links need 44px tappable height */
    footer a,
    .elementor-location-footer a {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* P2 Touch targets: Elementor small buttons (View Details etc.) */
    .elementor-button.elementor-size-sm {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* ===== Wave 3 Phase 2: Elementor button widget → cook-btn mapping =====
       Universal base: every .elementor-widget-button .elementor-button adopts
       cook-btn base styles + primary variant by default (Cook design system:
       Elementor buttons ARE CTAs, CTAs ARE red).
       Override via widget CSS Classes field: cook-btn--secondary | --ghost |
       --link | --primary-inverse | --sm | --lg. Class lands on .elementor-widget
       wrapper, so we use ancestor selectors to reach the <a>. */

    .elementor-widget-button .elementor-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--cook-space-2, 0.5rem);
        box-sizing: border-box;
        min-height: var(--cook-touch-target, 44px);
        min-width: var(--cook-touch-target, 44px);
        padding: 10px 24px !important;
        font-family: "Roboto Slab", serif !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        letter-spacing: 0.02em !important;
        border: var(--cook-btn-border-width, 2px) solid transparent !important;
        border-radius: var(--cook-radius-sm, 4px) !important;
        cursor: pointer;
        user-select: none;
        backface-visibility: hidden;
        -webkit-font-smoothing: antialiased;
        transform: translate3d(0, 0, 0);
        transition:
            background-color var(--cook-transition-fast, 0.2s ease),
            color var(--cook-transition-fast, 0.2s ease),
            border-color var(--cook-transition-fast, 0.2s ease),
            transform var(--cook-transition-fast, 0.2s ease),
            box-shadow var(--cook-transition-fast, 0.2s ease);
    }

    /* Default variant = primary (red fill + white text + red border) */
    .elementor-widget-button .elementor-button {
        background-color: var(--cook-red, #BA2031) !important;
        color: var(--cook-white, #FFFFFF) !important;
        border-color: var(--cook-red, #BA2031) !important;
    }
    .elementor-widget-button .elementor-button:hover {
        background-color: var(--cook-red-hover, #D41A34) !important;
        border-color: var(--cook-red-hover, #D41A34) !important;
        color: var(--cook-white, #FFFFFF) !important;
        transform: translate3d(0, -1px, 0);
        box-shadow: var(--cook-shadow-card-hover, 0 4px 12px rgba(0,0,0,0.12));
    }
    .elementor-widget-button .elementor-button:active {
        background-color: var(--cook-red-dark-hover, #9A1A29) !important;
        border-color: var(--cook-red-dark-hover, #9A1A29) !important;
        transform: translate3d(0, 0, 0);
        box-shadow: none;
    }

    /* Dual-ring focus (beats red-on-red invisibility) */
    .elementor-widget-button .elementor-button:focus-visible {
        outline: none;
        box-shadow:
            inset 0 0 0 2px var(--cook-white, #FFFFFF),
            0 0 0 var(--cook-btn-focus-ring, 4px) var(--cook-red, #BA2031) !important;
    }

    /* === Sizes (wrapper class opt-in) === */
    .elementor-widget-button.cook-btn--sm .elementor-button {
        min-height: var(--cook-touch-target-sm, 36px);
        min-width: var(--cook-touch-target-sm, 36px);
        padding: 6px 16px !important;
        font-size: 0.875rem !important;
    }
    .elementor-widget-button.cook-btn--lg .elementor-button {
        min-height: var(--cook-touch-target-lg, 52px);
        min-width: var(--cook-touch-target-lg, 52px);
        padding: 14px 32px !important;
        font-size: 1.125rem !important;
    }

    /* === Secondary: white fill + red border + red text, flip on hover === */
    .elementor-widget-button.cook-btn--secondary .elementor-button {
        background-color: var(--cook-white, #FFFFFF) !important;
        color: var(--cook-red, #BA2031) !important;
        border-color: var(--cook-red, #BA2031) !important;
    }
    .elementor-widget-button.cook-btn--secondary .elementor-button:hover {
        background-color: var(--cook-red, #BA2031) !important;
        color: var(--cook-white, #FFFFFF) !important;
        border-color: var(--cook-red, #BA2031) !important;
    }

    /* === Ghost: transparent + dark outline + body text === */
    .elementor-widget-button.cook-btn--ghost .elementor-button {
        background-color: transparent !important;
        color: var(--cook-text, #4F4F4F) !important;
        border-color: var(--cook-dark, #373737) !important;
    }
    .elementor-widget-button.cook-btn--ghost .elementor-button:hover {
        background-color: var(--cook-dark, #373737) !important;
        color: var(--cook-white, #FFFFFF) !important;
        border-color: var(--cook-dark, #373737) !important;
    }

    /* === Link: underlined red, no chrome === */
    .elementor-widget-button.cook-btn--link .elementor-button {
        background: transparent !important;
        border-color: transparent !important;
        color: var(--cook-red, #BA2031) !important;
        padding: 8px 4px !important;
        text-transform: none !important;
        text-decoration: underline !important;
        text-underline-offset: 3px;
        font-family: "Cabin", sans-serif !important;
        font-weight: 600 !important;
        letter-spacing: normal !important;
    }
    .elementor-widget-button.cook-btn--link .elementor-button:hover {
        color: var(--cook-red-hover, #D41A34) !important;
        text-decoration-thickness: 2px !important;
    }

    /* === Primary-inverse: white fill + red text + white border (for red/dark surfaces) === */
    .elementor-widget-button.cook-btn--primary-inverse .elementor-button {
        background-color: var(--cook-white, #FFFFFF) !important;
        color: var(--cook-red, #BA2031) !important;
        border-color: var(--cook-white, #FFFFFF) !important;
    }
    .elementor-widget-button.cook-btn--primary-inverse .elementor-button:hover {
        background-color: var(--cook-neutral-100, #F5F5F5) !important;
        color: var(--cook-red-dark-hover, #9A1A29) !important;
        border-color: var(--cook-neutral-100, #F5F5F5) !important;
    }

    /* === Outline-inverse: transparent + white outline + white text (for red/dark surfaces) === */
    .elementor-widget-button.cook-btn--outline-inverse .elementor-button {
        background-color: transparent !important;
        color: var(--cook-white, #FFFFFF) !important;
        border-color: var(--cook-white, #FFFFFF) !important;
    }
    .elementor-widget-button.cook-btn--outline-inverse .elementor-button:hover {
        background-color: var(--cook-white, #FFFFFF) !important;
        color: var(--cook-red, #BA2031) !important;
        border-color: var(--cook-white, #FFFFFF) !important;
    }

    /* Disabled state */
    .elementor-widget-button .elementor-button[disabled],
    .elementor-widget-button .elementor-button[aria-disabled="true"] {
        opacity: 0.55 !important;
        cursor: not-allowed !important;
        transform: none !important;
        box-shadow: none !important;
    }

    /* Carousel nav: upgrade to overlay token + dual-ring focus (Phase 2 a11y) */
    .cook-carousel-btn {
        background: var(--cook-overlay-dark, rgba(0,0,0,0.6)) !important;
    }
    .cook-carousel-btn:hover {
        background: var(--cook-overlay-dark-hover, rgba(0,0,0,0.75)) !important;
    }
    .cook-carousel-btn:focus-visible {
        outline: none !important;
        box-shadow:
            inset 0 0 0 2px var(--cook-white, #FFFFFF),
            0 0 0 var(--cook-btn-focus-ring, 4px) var(--cook-red, #BA2031) !important;
    }