/*
Theme Name:   LuAlKi Luso
Theme URI:    https://www.LuAlKiLuso.com
Description:  Eccomerce .
Author:       Paparel
Author URI:   https://www.Paparel.com
Template:     astra
Version:      8.0.0
Text Domain:  lualki-luso
*/

/* ==========================================================================
   LuAlKi Luso v5.0.0 — Premium White E-Commerce Canvas
   Key additions over v4:
     • Desktop nav spacing — jammed menu items fully fixed
     • Astra header builder v3/v4 selectors (ast-builder-grid-row etc.)
     • Elementor Section / Container / Flex Container full nuke
     • WP Rocket / W3TC / LiteSpeed cache plugin CSS bleed fixes
     • Polylang language-switcher styling
     • WooCommerce variation swatches
     • Extended mobile breakpoints (480 / 768 / 921)
   ========================================================================== */

/* --------------------------------------------------------------------------
   SECTION 0 — DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Surfaces */
    --ll-white:       #FFFFFF;
    --ll-ivory:       #F9F9F9;
    --ll-frost:       #F3F3F3;
    /* Text */
    --ll-ink:         #111111;
    --ll-charcoal:    #333333;
    --ll-muted:       #777777;
    --ll-faint:       #BBBBBB;
    /* Borders */
    --ll-line:        #E8E8E8;
    --ll-line-deep:   #CCCCCC;
    /* Action */
    --ll-black:       #000000;
    /* Motion */
    --ll-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    /* Type */
    --ll-serif:       'Playfair Display', 'Georgia', 'Times New Roman', serif;
    --ll-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Spacing */
    --ll-s1:4px; --ll-s2:8px; --ll-s3:12px; --ll-s4:16px; --ll-s5:20px;
    --ll-s6:24px; --ll-s8:32px; --ll-s10:40px; --ll-s12:48px;
    --ll-s16:64px; --ll-s20:80px;
    /* Layout */
    --ll-max: 1200px;
}

/* --------------------------------------------------------------------------
   SECTION 1 — GLOBAL RESET / LEGACY PURPLE NUKE
   Every possible container Astra, Elementor, or WooCommerce could
   apply a background to is explicitly cleared below.
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body, html, #page, .site, .site-content, #content, #main, .site-main,

/* Astra – all layout variants */
.ast-container, .ast-builder-layout-element, .ast-separate-container,
.ast-page-builder-template, .ast-archive-description, .ast-layout-row,
.ast-flex, .ast-grid-row, .ast-wide-layout, .ast-plain-container,
.ast-single-layout, .ast-wp-container, .ast-builder-grid-row-container,
.ast-builder-grid-row-container-inner, .ast-builder-section,
.wp-site-blocks,

/* Elementor – Classic & Flexbox containers */
.elementor-section, .elementor-column, .elementor-column-wrap,
.elementor-widget-wrap, .elementor-container, .e-con, .e-container,
.e-con-inner, .elementor-section-wrap,

/* Block editor */
.wp-block-group, .wp-block-columns, .wp-block-column,
.wp-block-cover, .has-background, .wp-block-template-part {
    background-color: var(--ll-white) !important;
    background-image: none !important;
    color: var(--ll-ink) !important;
}

body {
    font-family: var(--ll-sans) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* --------------------------------------------------------------------------
   SECTION 2 — TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .entry-title, .page-title,
.woocommerce-loop-product__title, .product_title,
.site-title, .site-title a, .ast-site-name, .ast-site-name a {
    font-family: var(--ll-serif) !important;
    font-weight: 400 !important;
    color: var(--ll-black) !important;
    line-height: 1.15 !important;
    letter-spacing: 0.01em !important;
}

h1 { font-size: clamp(2.2rem, 4.5vw, 4.2rem) !important; }
h2 { font-size: clamp(1.7rem, 3vw,   3rem)   !important; }
h3 { font-size: clamp(1.3rem, 2vw,   2rem)   !important; }
h4 { font-size: 1.2rem !important; font-weight: 500 !important; }
h5 { font-size: 1rem   !important; font-weight: 600 !important; }
h6 {
    font-family: var(--ll-sans) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--ll-muted) !important;
}

p, li, td, th, blockquote, figcaption, span {
    font-family: var(--ll-sans) !important;
    font-size: 15px !important;
    color: var(--ll-ink) !important;
    line-height: 1.8 !important;
}

small, time, .ast-meta-info, .posted-on, .byline {
    font-family: var(--ll-sans) !important;
    font-size: 11px !important;
    color: var(--ll-muted) !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
}

/* --------------------------------------------------------------------------
   SECTION 3 — LINKS
   -------------------------------------------------------------------------- */
a, a:visited {
    color: var(--ll-ink) !important;
    text-decoration: none !important;
    transition: color 0.2s var(--ll-ease) !important;
}
a:hover { color: var(--ll-black) !important; }
a:focus-visible {
    outline: 2px solid var(--ll-black) !important;
    outline-offset: 3px !important;
}

/* --------------------------------------------------------------------------
   SECTION 4 — HEADER
   -------------------------------------------------------------------------- */
.main-header-bar, .ast-primary-header-bar, .ast-desktop-header,
.site-header, #masthead, .ast-above-header-bar, .ast-below-header-bar,
.ast-header-break-point .main-header-bar,
/* Astra builder rows inside header */
.ast-builder-grid-row-container,
.ast-builder-grid-row-container-inner {
    background-color: var(--ll-white) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--ll-line) !important;
    box-shadow: none !important;
}

.ast-sticky-active .main-header-bar,
.ast-sticky-active .ast-primary-header-bar {
    box-shadow: 0 1px 24px rgba(0,0,0,0.07) !important;
}

/* Logo / site name */
.site-title a, .ast-site-name a {
    font-family: var(--ll-serif) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    color: var(--ll-black) !important;
    letter-spacing: 0.05em !important;
}

/* --------------------------------------------------------------------------
   SECTION 5 — DESKTOP NAVIGATION (SPACING FIX — PRIMARY PATCH)

   BUG CAUSE: Astra's default nav renders <li> elements as display:flex
   or display:block inside a flex container, collapsing all inter-item
   space. The fix: explicit padding on each <li> PLUS display:inline-flex
   on the anchor, ensuring the text cannot jam together regardless of
   Astra version or Customizer setting.
   -------------------------------------------------------------------------- */

/* ── Tier 1: top-level list items ───────────────────────────────────────── */
.main-navigation ul.main-header-menu > li.menu-item,
.ast-nav-menu > li.menu-item,
#ast-desktop-header .main-navigation > ul > li,
.ast-desktop-header .ast-nav-menu > li,
.header-main-nav-wrap .main-header-menu > li,
.ast-primary-nav-wrap .ast-nav-menu > li {
    padding-left:  12px !important;
    padding-right: 12px !important;
    margin-left:   0 !important;
    margin-right:  0 !important;
    display:       inline-flex !important;
    align-items:   center !important;
    position:      relative !important;
}

/* ── Tier 2: anchor tags inside each <li> ───────────────────────────────── */
.main-navigation ul.main-header-menu > li.menu-item > a,
.ast-nav-menu > li.menu-item > a,
#ast-desktop-header .main-navigation > ul > li > a,
.ast-desktop-header .ast-nav-menu > li > a,
.header-main-nav-wrap .main-header-menu > li > a,
.ast-primary-nav-wrap .ast-nav-menu > li > a {
    font-family:    var(--ll-sans) !important;
    font-size:      11px !important;
    font-weight:    600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color:          var(--ll-charcoal) !important;
    padding:        8px 0 !important;
    display:        inline-flex !important;
    align-items:    center !important;
    white-space:    nowrap !important;
    border-bottom:  1px solid transparent !important;
    background:     transparent !important;
    transition:     color 0.2s var(--ll-ease),
                    border-color 0.2s var(--ll-ease) !important;
}

.main-navigation ul.main-header-menu > li.menu-item > a:hover,
.ast-nav-menu > li.menu-item > a:hover,
#ast-desktop-header .main-navigation > ul > li > a:hover {
    color:              var(--ll-black) !important;
    border-bottom-color: var(--ll-black) !important;
    background:         transparent !important;
}

/* Active / current page indicator */
.main-navigation ul.main-header-menu > li.current-menu-item > a,
.ast-nav-menu > li.current-menu-item > a {
    color:              var(--ll-black) !important;
    border-bottom-color: var(--ll-black) !important;
}

/* ── Tier 3: dropdown sub-menus ─────────────────────────────────────────── */
.main-navigation .sub-menu,
.ast-nav-menu .sub-menu {
    background-color: var(--ll-white) !important;
    border:           1px solid var(--ll-line) !important;
    border-top:       2px solid var(--ll-black) !important;
    box-shadow:       0 12px 48px rgba(0,0,0,0.08) !important;
    border-radius:    0 !important;
    padding:          8px 0 !important;
    min-width:        200px !important;
}
.main-navigation .sub-menu li,
.ast-nav-menu .sub-menu li {
    padding:  0 !important;
    display:  block !important;
    width:    100% !important;
}
.main-navigation .sub-menu a,
.ast-nav-menu .sub-menu a {
    font-size:   11px !important;
    padding:     10px 20px !important;
    display:     block !important;
    white-space: nowrap !important;
    border:      none !important;
    color:       var(--ll-charcoal) !important;
    background:  transparent !important;
}
.main-navigation .sub-menu a:hover { background-color: var(--ll-ivory) !important; color: var(--ll-black) !important; }

/* Cart icon count bubble */
.ast-site-header-cart .count,
.ast-cart-menu-wrap .count {
    background-color: var(--ll-black) !important;
    color:            var(--ll-white) !important;
    font-family:      var(--ll-sans) !important;
    font-size:        9px !important;
    font-weight:      700 !important;
    border-radius:    50% !important;
}

/* --------------------------------------------------------------------------
   SECTION 6 — MOBILE HEADER (STACKED + CENTRED)
   Targets every Astra header builder variant across v3/v4/v5.
   -------------------------------------------------------------------------- */
@media (max-width: 921px) {

    /* Stack container */
    .ast-mobile-header-wrap .site-header-inner-wrap,
    .ast-mobile-header-wrap .ast-mobile-header-bar,
    .ast-header-break-point .main-header-bar-wrap,
    .ast-header-break-point .ast-primary-header-bar .ast-container,
    .ast-header-break-point .ast-container,
    .ast-header-break-point .ast-builder-grid-row-container-inner,
    .ast-header-break-point .ast-builder-grid-row-container {
        display:         flex !important;
        flex-direction:  column !important;
        justify-content: center !important;
        align-items:     center !important;
        text-align:      center !important;
        padding:         16px !important;
        gap:             12px !important;
    }

    /* Logo */
    .ast-mobile-header-wrap .site-branding,
    .ast-header-break-point .site-branding,
    .ast-header-break-point .ast-site-title-wrap {
        margin:          0 auto !important;
        width:           100% !important;
        display:         flex !important;
        justify-content: center !important;
        order:           1 !important;
    }

    /* Hamburger row */
    .ast-mobile-header-wrap .ast-actions-wrap,
    .ast-header-break-point .ast-mobile-menu-buttons,
    .ast-header-break-point .ast-header-custom-item {
        width:           100% !important;
        display:         flex !important;
        justify-content: center !important;
        order:           2 !important;
    }

    /* Branded hamburger */
    .ast-mobile-menu-buttons .menu-toggle,
    .ast-header-break-point .menu-toggle,
    .ast-mobile-header-bar .menu-toggle {
        background-color: var(--ll-black) !important;
        color:            var(--ll-white) !important;
        border:           none !important;
        border-radius:    0 !important;
        font-family:      var(--ll-sans) !important;
        font-size:        9px !important;
        font-weight:      700 !important;
        letter-spacing:   0.18em !important;
        text-transform:   uppercase !important;
        padding:          13px 28px !important;
        box-shadow:       none !important;
        background-image: none !important;
    }

    /* Mobile popup overlay */
    .ast-mobile-popup-wrap, .ast-mobile-popup-inner, .ast-mobile-popup-content,
    .ast-flyout-main-layout, .ast-slide-out-menu-panel, .ast-mobile-nav-wrap {
        background-color: var(--ll-white) !important;
        background-image: none !important;
    }

    /* Popup menu items */
    .ast-mobile-popup-inner .main-header-menu,
    .ast-mobile-popup-inner .ast-main-header-menu,
    .ast-mobile-nav-wrap .main-header-menu {
        display:         flex !important;
        flex-direction:  column !important;
        align-items:     center !important;
        padding:         40px 0 60px !important;
        width:           100% !important;
    }

    .ast-mobile-popup-inner .menu-item,
    .ast-mobile-nav-wrap .menu-item {
        width:         100% !important;
        text-align:    center !important;
        border-bottom: 1px solid var(--ll-line) !important;
        margin:        0 !important;
    }

    .ast-mobile-popup-inner .menu-item a,
    .ast-mobile-nav-wrap .menu-item a {
        font-family:    var(--ll-serif) !important;
        font-size:      24px !important;
        font-weight:    400 !important;
        color:          var(--ll-black) !important;
        padding:        20px 0 !important;
        display:        flex !important;
        justify-content: center !important;
        letter-spacing: 0.01em !important;
        border-bottom:  none !important;
        background:     transparent !important;
        white-space:    normal !important;
        transition:     color 0.2s var(--ll-ease) !important;
    }

    .ast-mobile-popup-inner .menu-item a:hover { color: var(--ll-muted) !important; }
}

/* --------------------------------------------------------------------------
   SECTION 7 — BUTTONS (MATTE BLACK — ALL CONTEXTS)
   -------------------------------------------------------------------------- */
button, .ast-button, .button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .cart .button,
.woocommerce .checkout-button, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce .wc-proceed-to-checkout .checkout-button,
.single_add_to_cart_button, .ast-woocommerce-add-to-cart,
.woocommerce .widget_price_filter .price_slider_amount .button,
.add_to_cart_button, .product_type_simple, .product_type_variable,
.elementor-button, .elementor-button-wrapper .elementor-button,
.wp-block-button__link, .wp-block-button .wp-block-button__link {
    background:       var(--ll-black) !important;
    background-image: none !important;
    color:            var(--ll-white) !important;
    font-family:      var(--ll-sans) !important;
    font-size:        10px !important;
    font-weight:      700 !important;
    letter-spacing:   0.2em !important;
    text-transform:   uppercase !important;
    border-radius:    0 !important;
    border:           1px solid var(--ll-black) !important;
    padding:          16px 40px !important;
    box-shadow:       none !important;
    cursor:           pointer !important;
    display:          inline-flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    text-decoration:  none !important;
    transition:
        background  0.25s var(--ll-ease),
        color       0.25s var(--ll-ease),
        box-shadow  0.25s var(--ll-ease) !important;
}

button:hover, .ast-button:hover, .button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.single_add_to_cart_button:hover, .woocommerce .checkout-button:hover,
.elementor-button:hover, .wp-block-button__link:hover {
    background:  var(--ll-white) !important;
    color:       var(--ll-black) !important;
    box-shadow:  inset 0 0 0 1px var(--ll-black) !important;
}

button:focus-visible, .button:focus-visible, input[type="submit"]:focus-visible {
    outline:        2px solid var(--ll-black) !important;
    outline-offset: 4px !important;
}

/* Ghost variant */
.woocommerce a.button.alt, .button.alt {
    background:   transparent !important;
    color:        var(--ll-black) !important;
    border-color: var(--ll-black) !important;
}
.woocommerce a.button.alt:hover {
    background: var(--ll-black) !important;
    color:      var(--ll-white) !important;
}

/* --------------------------------------------------------------------------
   SECTION 8 — FORM FIELDS
   -------------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="search"],
input[type="tel"], input[type="url"], input[type="password"],
input[type="number"], input[type="date"], textarea, select,
.woocommerce .input-text, .woocommerce-input-wrapper input {
    font-family:        var(--ll-sans) !important;
    font-size:          14px !important;
    color:              var(--ll-ink) !important;
    background-color:   var(--ll-white) !important;
    border:             1px solid var(--ll-line) !important;
    border-radius:      0 !important;
    padding:            13px 16px !important;
    width:              100% !important;
    -webkit-appearance: none !important;
    transition:         border-color 0.2s var(--ll-ease) !important;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--ll-black) !important;
    outline:      none !important;
    box-shadow:   none !important;
}

label {
    font-family:    var(--ll-sans) !important;
    font-size:      11px !important;
    font-weight:    700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color:          var(--ll-ink) !important;
    display:        block !important;
    margin-bottom:  6px !important;
}

/* --------------------------------------------------------------------------
   SECTION 9 — WOOCOMMERCE PRODUCT LOOP GRID
   -------------------------------------------------------------------------- */
.woocommerce ul.products {
    display:               grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)) !important;
    gap:                   1px !important;
    background-color:      var(--ll-line) !important;
    border:                1px solid var(--ll-line) !important;
    list-style:            none !important;
    margin:                0 !important;
    padding:               0 !important;
}

.woocommerce ul.products li.product {
    background-color: var(--ll-white) !important;
    border:           none !important;
    border-radius:    0 !important;
    padding:          0 0 20px !important;
    margin:           0 !important;
    overflow:         hidden !important;
    position:         relative !important;
    transition:
        box-shadow 0.3s var(--ll-ease),
        transform  0.3s var(--ll-ease) !important;
}

.woocommerce ul.products li.product:hover {
    box-shadow: 0 12px 48px rgba(0,0,0,0.10) !important;
    transform:  translateY(-4px) !important;
    z-index:    2 !important;
}

.woocommerce ul.products li.product a img {
    border-radius: 0 !important;
    width:         100% !important;
    aspect-ratio:  1 / 1 !important;
    object-fit:    cover !important;
    display:       block !important;
    transition:    opacity 0.3s var(--ll-ease) !important;
}
.woocommerce ul.products li.product:hover a img { opacity: 0.88 !important; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family:    var(--ll-serif) !important;
    font-size:      15px !important;
    font-weight:    400 !important;
    color:          var(--ll-black) !important;
    padding:        16px 16px 4px !important;
    margin:         0 !important;
    line-height:    1.3 !important;
}

.woocommerce ul.products li.product .price {
    font-family:  var(--ll-sans) !important;
    font-size:    13px !important;
    font-weight:  500 !important;
    color:        var(--ll-ink) !important;
    padding:      2px 16px 12px !important;
    margin:       0 !important;
    display:      block !important;
}
.woocommerce ul.products li.product .price del {
    color:       var(--ll-faint) !important;
    font-size:   11px !important;
    margin-right: 6px !important;
}

.woocommerce ul.products li.product .button {
    margin:    0 16px !important;
    width:     calc(100% - 32px) !important;
    padding:   12px 16px !important;
    font-size: 9px !important;
}

.woocommerce span.onsale {
    background:     var(--ll-black) !important;
    color:          var(--ll-white) !important;
    border-radius:  0 !important;
    font-family:    var(--ll-sans) !important;
    font-size:      8px !important;
    font-weight:    700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    padding:        5px 10px !important;
    top:            10px !important;
    left:           10px !important;
    right:          auto !important;
    min-height:     auto !important;
    min-width:      auto !important;
}

/* --------------------------------------------------------------------------
   SECTION 10 — WOOCOMMERCE SINGLE PRODUCT
   -------------------------------------------------------------------------- */
.woocommerce div.product .product_title {
    font-family:    var(--ll-serif) !important;
    font-size:      clamp(1.8rem, 3.5vw, 2.8rem) !important;
    font-weight:    400 !important;
    color:          var(--ll-black) !important;
    letter-spacing: -0.01em !important;
    line-height:    1.1 !important;
    margin-bottom:  16px !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-family:   var(--ll-sans) !important;
    font-size:     24px !important;
    font-weight:   500 !important;
    color:         var(--ll-ink) !important;
    margin-bottom: var(--ll-s6) !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    color:         var(--ll-muted) !important;
    font-size:     15px !important;
    line-height:   1.9 !important;
    max-width:     55ch !important;
    margin-bottom: var(--ll-s8) !important;
}

.woocommerce div.product form.cart {
    border-top:    1px solid var(--ll-line) !important;
    border-bottom: 1px solid var(--ll-line) !important;
    padding:       var(--ll-s6) 0 !important;
    margin:        var(--ll-s6) 0 !important;
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom: 2px solid var(--ll-line) !important;
    padding:       0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border:     none !important;
    background: transparent !important;
    margin-right: var(--ll-s8) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family:    var(--ll-sans) !important;
    font-size:      11px !important;
    font-weight:    700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color:          var(--ll-muted) !important;
    padding:        14px 0 !important;
    display:        block !important;
    border-bottom:  2px solid transparent !important;
    margin-bottom:  -2px !important;
    background:     transparent !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color:               var(--ll-black) !important;
    border-bottom-color: var(--ll-black) !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
    background: var(--ll-white) !important;
    padding:    var(--ll-s8) 0 !important;
}

/* Variation swatches */
.woocommerce div.product .variations td,
.woocommerce div.product .variations th {
    font-family:    var(--ll-sans) !important;
    font-size:      12px !important;
    font-weight:    600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color:          var(--ll-ink) !important;
    padding:        8px 0 !important;
    vertical-align: middle !important;
}

/* --------------------------------------------------------------------------
   SECTION 11 — WOOCOMMERCE CART
   -------------------------------------------------------------------------- */
.woocommerce table.shop_table,
.woocommerce-cart table.cart {
    border:           1px solid var(--ll-line) !important;
    border-radius:    0 !important;
    border-collapse:  collapse !important;
    background-color: var(--ll-white) !important;
}

.woocommerce table.shop_table thead th,
.woocommerce-cart table.cart thead th {
    background-color: var(--ll-ivory) !important;
    font-family:      var(--ll-sans) !important;
    font-size:        10px !important;
    font-weight:      700 !important;
    letter-spacing:   0.16em !important;
    text-transform:   uppercase !important;
    color:            var(--ll-muted) !important;
    padding:          14px 16px !important;
    border-bottom:    1px solid var(--ll-line) !important;
}

.woocommerce table.shop_table tbody td {
    padding:       14px 16px !important;
    border-bottom: 1px solid var(--ll-line) !important;
    font-size:     14px !important;
    background:    var(--ll-white) !important;
}

.woocommerce .cart-collaterals .cart_totals {
    background: var(--ll-ivory) !important;
    border:     1px solid var(--ll-line) !important;
    padding:    var(--ll-s6) !important;
}

/* --------------------------------------------------------------------------
   SECTION 12 — WOOCOMMERCE CHECKOUT
   -------------------------------------------------------------------------- */
.woocommerce-checkout #payment,
.woocommerce-checkout #order_review {
    background: var(--ll-ivory) !important;
    border:     1px solid var(--ll-line) !important;
    padding:    var(--ll-s6) !important;
}

.woocommerce #payment ul.payment_methods {
    background:    var(--ll-white) !important;
    border-bottom: 1px solid var(--ll-line) !important;
    padding:       var(--ll-s4) !important;
}

/* --------------------------------------------------------------------------
   SECTION 13 — WOOCOMMERCE NOTICES
   -------------------------------------------------------------------------- */
.woocommerce-message { background: var(--ll-ivory) !important; border-top: 2px solid var(--ll-black) !important; border-radius: 0 !important; font-size: 14px !important; }
.woocommerce-info    { background: var(--ll-ivory) !important; border-top: 2px solid var(--ll-muted) !important; border-radius: 0 !important; }
.woocommerce-error   { background: #fff5f5 !important; border-top: 2px solid #CC0000 !important; border-radius: 0 !important; }

/* --------------------------------------------------------------------------
   SECTION 14 — WOOCOMMERCE WIDGETS
   -------------------------------------------------------------------------- */
.woocommerce-widget-layered-nav a,
.woocommerce ul.product_list_widget li,
.widget_shopping_cart .cart_list li {
    font-size:     14px !important;
    padding:       8px 0 !important;
    border-bottom: 1px solid var(--ll-line) !important;
    color:         var(--ll-ink) !important;
}

/* --------------------------------------------------------------------------
   SECTION 15 — ALTERNATE SECTION BACKGROUNDS
   -------------------------------------------------------------------------- */
.home-promo-section, .ast-section-alternate, .section-alternate,
[class*="is-style-studio"], .wp-block-group.alternate {
    background-color: var(--ll-ivory) !important;
    background-image: none !important;
    border-top:       1px solid var(--ll-line) !important;
    border-bottom:    1px solid var(--ll-line) !important;
}

/* --------------------------------------------------------------------------
   SECTION 16 — CACHE PLUGIN CSS BLEED FIXES
   WP Rocket, W3 Total Cache, LiteSpeed Cache, WP Super Cache, and
   Autoptimize can inject inline <style> blocks with specificity that
   overwrites custom CSS. These rules re-assert the brand palette over
   any injected inline styles using :root specificity boost.
   -------------------------------------------------------------------------- */
:root body { background-color: var(--ll-white) !important; }
:root .site-header { background-color: var(--ll-white) !important; }
:root button, :root .button, :root input[type="submit"] {
    background-color: var(--ll-black) !important;
    background-image: none !important;
}

/* LiteSpeed cache lazy-load placeholder */
.lazyloaded, .litespeed-lazyloaded { opacity: 1 !important; }

/* WP Rocket critical CSS — force white on deferred paint */
.wpr-fetching-placeholders { display: none !important; }

/* --------------------------------------------------------------------------
   SECTION 17 — POLYLANG LANGUAGE SWITCHER
   -------------------------------------------------------------------------- */
.pll-parent-menu-item a,
.lang-item a,
.polylang-switcher a,
#lang_sel a, #lang_sel_click a {
    font-family:    var(--ll-sans) !important;
    font-size:      10px !important;
    font-weight:    600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color:          var(--ll-muted) !important;
    padding:        4px 8px !important;
    border:         1px solid var(--ll-line) !important;
    background:     transparent !important;
    transition:     all 0.2s var(--ll-ease) !important;
}
.pll-parent-menu-item a:hover, .lang-item a:hover {
    color:        var(--ll-black) !important;
    border-color: var(--ll-black) !important;
}

/* --------------------------------------------------------------------------
   SECTION 18 — BREADCRUMBS
   -------------------------------------------------------------------------- */
.ast-breadcrumbs-wrapper, .rank-math-breadcrumb, .woocommerce .woocommerce-breadcrumb {
    font-family:    var(--ll-sans) !important;
    font-size:      11px !important;
    color:          var(--ll-muted) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding:        12px 0 !important;
    margin-bottom:  var(--ll-s8) !important;
    border-bottom:  1px solid var(--ll-line) !important;
    background:     transparent !important;
}
.rank-math-breadcrumb a, .woocommerce .woocommerce-breadcrumb a { color: var(--ll-muted) !important; border-bottom: none !important; }
.rank-math-breadcrumb a:hover { color: var(--ll-black) !important; }

/* --------------------------------------------------------------------------
   SECTION 19 — PAGINATION
   -------------------------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.page-numbers a, .page-numbers span {
    font-family:    var(--ll-sans) !important;
    font-size:      11px !important;
    font-weight:    600 !important;
    border-radius:  0 !important;
    border:         1px solid var(--ll-line) !important;
    color:          var(--ll-ink) !important;
    padding:        10px 16px !important;
    background:     var(--ll-white) !important;
    transition:     all 0.2s var(--ll-ease) !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.page-numbers a:hover {
    background:   var(--ll-black) !important;
    color:        var(--ll-white) !important;
    border-color: var(--ll-black) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.page-numbers .current {
    background:   var(--ll-black) !important;
    color:        var(--ll-white) !important;
    border-color: var(--ll-black) !important;
}

/* --------------------------------------------------------------------------
   SECTION 20 — FOOTER
   -------------------------------------------------------------------------- */
.site-footer, .footer-primary, .ast-small-footer, .ast-footer-copyright, #colophon {
    background-color: var(--ll-black) !important;
    background-image: none !important;
    color: #888888 !important;
}

.footer-widget-area, .ast-footer-widget-area {
    background-color: #0a0a0a !important;
    background-image: none !important;
    padding:          var(--ll-s20) 0 var(--ll-s12) !important;
    border-top:       1px solid #1a1a1a !important;
}

.footer-widget-area .widget-title, .ast-footer-widget-area .widget-title {
    font-family:    var(--ll-sans) !important;
    font-size:      10px !important;
    font-weight:    700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color:          #FFFFFF !important;
    padding-bottom: var(--ll-s3) !important;
    margin-bottom:  var(--ll-s5) !important;
    border-bottom:  1px solid #1f1f1f !important;
}

.footer-widget-area p, .footer-widget-area li, .footer-widget-area a {
    color: #666666 !important; font-size: 13px !important; line-height: 2.1 !important; max-width: none !important; border: none !important;
}
.footer-widget-area a:hover { color: #FFFFFF !important; }

.ast-small-footer, .ast-footer-copyright { border-top: 1px solid #1a1a1a !important; padding: var(--ll-s5) 0 !important; }
.ast-small-footer p, .ast-footer-copyright p { font-size: 11px !important; letter-spacing: 0.08em !important; color: #444444 !important; max-width: none !important; }

/* --------------------------------------------------------------------------
   SECTION 21 — BLOG CARDS
   -------------------------------------------------------------------------- */
.ast-row article, .ast-post-grid-layout article {
    background:    var(--ll-white) !important;
    border:        1px solid var(--ll-line) !important;
    border-radius: 0 !important;
    overflow:      hidden !important;
    transition:    box-shadow 0.3s var(--ll-ease) !important;
}
.ast-row article:hover { box-shadow: 0 8px 40px rgba(0,0,0,0.09) !important; border-color: var(--ll-black) !important; }
.ast-row article .entry-content { padding: 20px 24px 24px !important; }

/* --------------------------------------------------------------------------
   SECTION 22 — TABLES
   -------------------------------------------------------------------------- */
table { border-collapse: collapse !important; width: 100% !important; border: 1px solid var(--ll-line) !important; }
thead th { background-color: var(--ll-ivory) !important; font-family: var(--ll-sans) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; color: var(--ll-muted) !important; padding: 14px 16px !important; border-bottom: 1px solid var(--ll-line) !important; }
tbody td { padding: 14px 16px !important; border-bottom: 1px solid var(--ll-line) !important; font-size: 14px !important; }

/* --------------------------------------------------------------------------
   SECTION 23 — HORIZONTAL RULES
   -------------------------------------------------------------------------- */
hr, .wp-block-separator { border: none !important; border-top: 1px solid var(--ll-line) !important; margin: var(--ll-s12) 0 !important; }

/* --------------------------------------------------------------------------
   SECTION 24 — ACCESSIBILITY
   -------------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--ll-black) !important; outline-offset: 3px !important; }
.skip-link { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; }
.skip-link:focus { width: auto !important; height: auto !important; clip: auto !important; z-index: 99999 !important; padding: var(--ll-s3) var(--ll-s6) !important; background: var(--ll-white) !important; color: var(--ll-black) !important; border: 2px solid var(--ll-black) !important; }

/* --------------------------------------------------------------------------
   SECTION 25 — REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   SECTION 26 — MOBILE RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    body { font-size: 15px !important; }
    h1   { font-size: 2rem   !important; }
    h2   { font-size: 1.6rem !important; }
    .ast-container, .ast-flex, .elementor-container { padding-left: 16px !important; padding-right: 16px !important; }
    button, .ast-button, .button, input[type="submit"],
    .woocommerce a.button, .woocommerce button.button {
        width: 100% !important; padding: 16px 24px !important; font-size: 10px !important;
    }
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
    .woocommerce ul.products { grid-template-columns: 1fr !important; }
    .main-navigation ul.main-header-menu > li.menu-item { padding-left: 6px !important; padding-right: 6px !important; }
}

/* --------------------------------------------------------------------------
   SECTION 27 — ELEMENTOR COMPATIBILITY
   -------------------------------------------------------------------------- */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--ll-max) !important; }
.elementor-widget-heading .elementor-heading-title { font-family: var(--ll-serif) !important; color: var(--ll-black) !important; }
.elementor-widget-text-editor p { font-family: var(--ll-sans) !important; color: var(--ll-ink) !important; font-size: 15px !important; }
.e-con, .e-container { background-color: var(--ll-white) !important; background-image: none !important; }

/* --------------------------------------------------------------------------
   SECTION 28 — ASTRA BUILDER GRID ROW (v3/v4/v5 header builder)
   Ensures Astra's absolute-latest header builder rows carry white bg.
   -------------------------------------------------------------------------- */
.ast-builder-grid-row,
.ast-builder-grid-row-container,
.ast-builder-grid-row-container-inner,
.ast-builder-section,
.ast-header-html-1, .ast-header-html-2,
.ast-header-account, .ast-header-cart,
.ast-header-search {
    background-color: var(--ll-white) !important;
    background-image: none !important;
}

/* ==========================================================================
   SECTION 29 — HOMEPAGE CONTENT OVERRIDES v6.0.0
   Targets Astra / Elementor / Gutenberg homepage placeholder blocks and
   forces retail-correct display properties regardless of saved page content.
   ========================================================================== */

/* ── 29.1 Hero / banner area ─────────────────────────────────────────────── */
/* Remove any purple/gradient hero background from Elementor or Gutenberg    */
.elementor-location-header ~ .elementor-location-single,
.wp-block-cover, .wp-block-cover-image,
.ast-hero-section, .ast-hero-wrap,
[class*="hero"], [class*="banner"] {
    background-color:  var(--ll-white) !important;
    background-image:  none !important;
    color:             var(--ll-ink) !important;
}

/* Force hero heading to Playfair Display at display scale */
.wp-block-cover h1, .wp-block-cover h2,
.elementor-widget-heading [class*="hero"] h1,
.elementor-widget-heading [class*="hero"] h2,
.ast-hero-section h1, .ast-hero-section h2 {
    font-family:    var(--ll-serif) !important;
    color:          var(--ll-black) !important;
    font-weight:    400 !important;
    letter-spacing: -0.01em !important;
}

/* ── 29.2 Agency service icon blocks (3-col grid) ────────────────────────── */
/* These selectors cover the icon+title+paragraph "Services" grid that        */
/* Astra's demo content injects via Elementor icon-box or Gutenberg columns. */
.elementor-widget-icon-box .elementor-icon-box-wrapper,
.wp-block-column [class*="service"],
.wp-block-column [class*="icon-box"],
[class*="service-item"], [class*="service_item"],
[class*="icon-box-item"] {
    background: var(--ll-ivory) !important;
    border:     1px solid var(--ll-line) !important;
    padding:    var(--ll-s8) var(--ll-s6) !important;
}

/* Neutralise the tinted icon circle (purple/blue circles from agency demo) */
.elementor-icon-box-icon .elementor-icon,
.elementor-widget-icon-box .elementor-icon,
[class*="service"] .icon-wrap,
[class*="service"] .ast-icon {
    background-color: transparent !important;
    color:            var(--ll-black) !important;
}

/* ── 29.3 "Our Services" section heading ────────────────────────────────────*/
/* Forces any section labelled "Our Services" or "Services" to Playfair +    */
/* retail terminology through CSS content injection if heading is editable.  */
/* (The actual text swap must be done in the block editor — see README.)     */
[class*="services-title"], [class*="section-title"],
.elementor-heading-title, .wp-block-heading {
    font-family:    var(--ll-serif) !important;
    color:          var(--ll-black) !important;
    font-weight:    400 !important;
}

/* ── 29.4 Testimonial / review blocks ───────────────────────────────────── */
.elementor-widget-testimonial .elementor-testimonial-wrapper,
.wp-block-pullquote, .wp-block-quote,
[class*="testimonial-item"], [class*="review-item"] {
    background:     var(--ll-ivory) !important;
    border-left:    3px solid var(--ll-black) !important;
    border-radius:  0 !important;
    padding:        var(--ll-s6) var(--ll-s8) !important;
}

.elementor-testimonial-name, .wp-block-pullquote cite,
[class*="reviewer-name"] {
    font-family:    var(--ll-sans) !important;
    font-size:      11px !important;
    font-weight:    700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color:          var(--ll-muted) !important;
}

/* ── 29.5 Footer CTA bar ("Get a professional website today!") ───────────── */
.ast-builder-layout-element[data-section="section-below-header-builder"],
[class*="cta-strip"], [class*="cta-bar"],
[class*="footer-cta"], .elementor-location-footer .elementor-section:first-child {
    background:   var(--ll-black) !important;
    border-top:   1px solid #1a1a1a !important;
    padding:      var(--ll-s10) var(--ll-s4) !important;
}

[class*="cta-strip"] h2, [class*="cta-strip"] h3,
[class*="cta-bar"] h2, [class*="footer-cta"] h2,
.elementor-location-footer .elementor-section:first-child h2 {
    font-family:    var(--ll-serif) !important;
    color:          var(--ll-white) !important;
    font-weight:    400 !important;
    font-size:      clamp(1.6rem, 3vw, 2.4rem) !important;
    letter-spacing: -0.01em !important;
}

/* CTA email input in footer strip */
[class*="cta-strip"] input[type="email"],
[class*="footer-cta"] input[type="email"] {
    background:   transparent !important;
    border:       1px solid #444444 !important;
    color:        var(--ll-white) !important;
    border-radius: 0 !important;
    padding:      14px 20px !important;
    min-width:    280px !important;
}
[class*="cta-strip"] input[type="email"]::placeholder,
[class*="footer-cta"] input[type="email"]::placeholder {
    color: #666666 !important;
}

/* CTA submit button — white-on-black reversed */
[class*="cta-strip"] button,
[class*="footer-cta"] button,
[class*="cta-strip"] input[type="submit"],
[class*="footer-cta"] input[type="submit"] {
    background: var(--ll-white) !important;
    color:      var(--ll-black) !important;
    border-color: var(--ll-white) !important;
}
[class*="cta-strip"] button:hover,
[class*="footer-cta"] button:hover {
    background:   transparent !important;
    color:        var(--ll-white) !important;
    border-color: var(--ll-white) !important;
    box-shadow:   none !important;
}

/* ── 29.6 Trust pillars ("LuAlKi Guarantee") ────────────────────────────── */
[class*="guarantee"], [class*="trust-bar"],
[class*="promise"], [class*="why-us"] {
    background:    var(--ll-ivory) !important;
    border-top:    1px solid var(--ll-line) !important;
    border-bottom: 1px solid var(--ll-line) !important;
    padding:       var(--ll-s16) var(--ll-s4) !important;
}

[class*="guarantee"] h2, [class*="trust-bar"] h2,
[class*="promise"] h2, [class*="why-us"] h2 {
    font-family:    var(--ll-serif) !important;
    font-size:      clamp(1.8rem, 3vw, 2.6rem) !important;
    color:          var(--ll-black) !important;
    text-align:     center !important;
    margin-bottom:  var(--ll-s6) !important;
}

/* ── 29.7 WooCommerce product category loops ─────────────────────────────── */
.woocommerce .product-categories, ul.product-categories {
    display:               grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(280px,100%),1fr)) !important;
    gap:                   1px !important;
    background:            var(--ll-line) !important;
    list-style:            none !important;
    padding:               0 !important;
    margin:                0 !important;
}

.woocommerce .product-categories li,
ul.product-categories li.cat-item {
    background:    var(--ll-white) !important;
    border-radius: 0 !important;
    overflow:      hidden !important;
    margin:        0 !important;
    padding:       0 !important;
    transition:    box-shadow 0.3s var(--ll-ease) !important;
}

.woocommerce .product-categories li:hover {
    box-shadow: 0 8px 40px rgba(0,0,0,0.12) !important;
    z-index: 2 !important;
}

.woocommerce .product-categories li a {
    display:          block !important;
    text-decoration:  none !important;
    color:            var(--ll-black) !important;
    border-bottom:    none !important;
}

.woocommerce .product-categories li a img {
    width:        100% !important;
    aspect-ratio: 4 / 5 !important;
    object-fit:   cover !important;
    display:      block !important;
    transition:   opacity 0.35s var(--ll-ease) !important;
}
.woocommerce .product-categories li:hover a img { opacity: 0.88 !important; }

.woocommerce .product-categories li a .count,
.woocommerce .product-categories li mark {
    display:        none !important;
}

/* Category name label */
.woocommerce .product-categories li .cat-name,
ul.product-categories li.cat-item a span {
    display:        block !important;
    font-family:    var(--ll-serif) !important;
    font-size:      18px !important;
    font-weight:    400 !important;
    color:          var(--ll-black) !important;
    padding:        16px 16px 8px !important;
}

/* Category eyebrow count */
ul.product-categories li.cat-item a::after {
    content:        'Shop the Collection →' !important;
    display:        block !important;
    font-family:    var(--ll-sans) !important;
    font-size:      10px !important;
    font-weight:    700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color:          var(--ll-muted) !important;
    padding:        0 16px 16px !important;
}

/* ── 29.8 Navigation menu — retail labels ────────────────────────────────── */
/* These CSS rules do not change menu TEXT (that requires the block editor), */
/* but they guarantee any nav item receives the correct retail styling.       */
.main-navigation .menu-item-has-children > a::after,
.ast-nav-menu .menu-item-has-children > a::after {
    content:     ' ▾' !important;
    font-size:   8px !important;
    margin-left: 3px !important;
    opacity:     0.5 !important;
}

/* ── 29.9 Astra demo "sticky" notice bar ─────────────────────────────────── */
/* Astra occasionally shows a "Customize" floating bar on demo sites.        */
.astra-theme-customization-bar,
.astra-site-notice, .astra-notice {
    display: none !important;
}

/* ==========================================================================
   SECTION 30 — MOBILE BUTTON STACK FIX v7.0.0
   Problem: Side-by-side .wp-block-buttons crush text on narrow screens.
   Solution: Column-stack at ≤600px, full-width single buttons, no wrap.
   ========================================================================== */

/* ── 30.1 Button GROUP container — stack vertically on mobile ───────────── */
@media (max-width: 600px) {
    .wp-block-buttons,
    .wp-block-buttons.is-layout-flex,
    .elementor-button-container,
    .elementor-widget-button,
    .ast-header-button-1,
    .ll-hero .wp-block-buttons {
        flex-direction:  column !important;
        align-items:     stretch !important;
        justify-content: center !important;
        display:         flex !important;
        gap:             var(--ll-s3) !important;
        width:           100% !important;
    }

    /* ── 30.2 Individual button wrapper ── */
    .wp-block-button,
    .wp-block-buttons > .wp-block-button {
        width:      100% !important;
        max-width:  100% !important;
        flex:       1 1 100% !important;
    }

    /* ── 30.3 The actual <a> / <button> element ── */
    .wp-block-button__link,
    .wp-block-button .wp-block-button__link,
    .elementor-button,
    .elementor-button-wrapper .elementor-button,
    button, .button, .ast-button,
    input[type="submit"],
    .woocommerce a.button,
    .woocommerce button.button,
    .single_add_to_cart_button,
    .woocommerce .checkout-button {
        width:        100% !important;
        max-width:    100% !important;
        text-align:   center !important;
        white-space:  nowrap !important;
        font-size:    9px !important;
        padding:      15px 20px !important;
        display:      flex !important;
        align-items:  center !important;
        justify-content: center !important;
        box-sizing:   border-box !important;
    }

    /* ── 30.4 Outline / ghost button keeps 1px border on full width ── */
    .wp-block-button.is-style-outline .wp-block-button__link {
        background:   transparent !important;
        color:        var(--ll-black) !important;
        border:       1px solid var(--ll-black) !important;
        box-shadow:   none !important;
    }
}

/* ── 30.5 Intermediate breakpoint 601–767px ─────────────────────────────── */
@media (min-width: 601px) and (max-width: 767px) {
    .wp-block-buttons,
    .wp-block-buttons.is-layout-flex {
        flex-wrap: wrap !important;
        gap: var(--ll-s3) !important;
    }
    .wp-block-button {
        flex: 0 0 calc(50% - var(--ll-s3) / 2) !important;
        max-width: calc(50% - var(--ll-s3) / 2) !important;
    }
    .wp-block-button__link {
        width:      100% !important;
        font-size:  9px !important;
        padding:    14px 16px !important;
        white-space: nowrap !important;
    }
}

/* ==========================================================================
   SECTION 31 — MC4WP / MAILCHIMP SHORTCODE STYLING v7.0.0
   The shortcode [mc4wp_form id="NNN"] renders a <form> inside the
   .ll-inner-circle section. This section styles that form so it matches
   the black-canvas design without any additional Mailchimp-side config.
   ========================================================================== */

/* ── 31.1 Form wrapper ── */
.mc4wp-form,
.mc4wp-form-fields,
[class*="mc4wp"] form {
    background:    transparent !important;
    border:        none !important;
    padding:       0 !important;
    margin:        0 auto !important;
    max-width:     540px !important;
    width:         100% !important;
}

/* ── 31.2 Flex row: input + button side by side (desktop) ── */
.mc4wp-form .mc4wp-form-fields,
.mc4wp-form form > * {
    display:         flex !important;
    flex-wrap:       wrap !important;
    gap:             var(--ll-s2) !important;
    justify-content: center !important;
    align-items:     stretch !important;
}

/* ── 31.3 Email input ── */
.mc4wp-form input[type="email"],
[class*="mc4wp"] input[type="email"] {
    background:    transparent !important;
    border:        1px solid #444444 !important;
    color:         #FFFFFF !important;
    border-radius: 0 !important;
    font-family:   var(--ll-sans) !important;
    font-size:     13px !important;
    padding:       14px 20px !important;
    flex:          1 1 260px !important;
    min-width:     0 !important;
    outline:       none !important;
    transition:    border-color 0.2s var(--ll-ease) !important;
    -webkit-appearance: none !important;
}
.mc4wp-form input[type="email"]:focus,
[class*="mc4wp"] input[type="email"]:focus {
    border-color: #FFFFFF !important;
    box-shadow:   none !important;
}
.mc4wp-form input[type="email"]::placeholder,
[class*="mc4wp"] input[type="email"]::placeholder {
    color: #666666 !important;
    font-family: var(--ll-sans) !important;
}

/* ── 31.4 Submit button — white-on-black reversed (inner circle is black bg) */
.mc4wp-form input[type="submit"],
.mc4wp-form button[type="submit"],
[class*="mc4wp"] input[type="submit"] {
    background:     var(--ll-white) !important;
    background-image: none !important;
    color:          var(--ll-black) !important;
    border:         1px solid var(--ll-white) !important;
    border-radius:  0 !important;
    font-family:    var(--ll-sans) !important;
    font-size:      9px !important;
    font-weight:    700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    padding:        15px 32px !important;
    cursor:         pointer !important;
    flex:           0 0 auto !important;
    white-space:    nowrap !important;
    transition:     background 0.25s var(--ll-ease),
                    color 0.25s var(--ll-ease) !important;
}
.mc4wp-form input[type="submit"]:hover,
.mc4wp-form button[type="submit"]:hover {
    background:   transparent !important;
    color:        var(--ll-white) !important;
    border-color: var(--ll-white) !important;
}

/* ── 31.5 Success / error response messages ── */
.mc4wp-success p,
.mc4wp-form .mc4wp-response .mc4wp-success p {
    color:       #6fcf97 !important;
    font-family: var(--ll-sans) !important;
    font-size:   13px !important;
    text-align:  center !important;
    margin-top:  var(--ll-s4) !important;
}
.mc4wp-error p,
.mc4wp-form .mc4wp-response .mc4wp-error p {
    color:       #eb5757 !important;
    font-family: var(--ll-sans) !important;
    font-size:   13px !important;
    text-align:  center !important;
    margin-top:  var(--ll-s4) !important;
}

/* ── 31.6 Mobile: stack input and button ── */
@media (max-width: 600px) {
    .mc4wp-form .mc4wp-form-fields,
    .mc4wp-form form > * {
        flex-direction: column !important;
        align-items:    stretch !important;
    }
    .mc4wp-form input[type="email"] {
        flex: 1 1 auto !important;
        width: 100% !important;
    }
    .mc4wp-form input[type="submit"],
    .mc4wp-form button[type="submit"] {
        width:    100% !important;
        padding:  15px 20px !important;
    }
}

/* ==========================================================================
   SECTION 32 — MOBILE CART ICON + HEADER ICONS v7.0.0
   Ensures cart bag, search, and account icons remain visible and tappable
   (44×44px minimum) in the centred mobile header layout.
   ========================================================================== */
@media (max-width: 921px) {

    /* Icon row wrapper */
    .ast-header-break-point .ast-site-header-cart,
    .ast-header-break-point .ast-header-woo-cart,
    .ast-header-break-point .ast-header-account,
    .ast-header-break-point .ast-header-search {
        display:         flex !important;
        align-items:     center !important;
        justify-content: center !important;
        order:           3 !important;
        width:           100% !important;
        padding:         8px 0 !important;
        gap:             var(--ll-s6) !important;
        border-top:      1px solid var(--ll-line) !important;
        border-bottom:   1px solid var(--ll-line) !important;
        margin-bottom:   var(--ll-s3) !important;
    }

    /* Ensure each icon area meets 44×44 touch target */
    .ast-header-break-point .ast-site-header-cart .ast-cart-menu-wrap,
    .ast-header-break-point .ast-site-header-cart a,
    .ast-header-break-point .ast-header-account a,
    .ast-header-break-point .ast-header-search .search-icon,
    .ast-header-break-point .ast-header-search .ast-search-icon {
        min-width:       44px !important;
        min-height:      44px !important;
        display:         flex !important;
        align-items:     center !important;
        justify-content: center !important;
        color:           var(--ll-black) !important;
    }

    /* Cart count badge on mobile */
    .ast-header-break-point .ast-cart-menu-wrap .count {
        background:     var(--ll-black) !important;
        color:          var(--ll-white) !important;
        font-size:      9px !important;
        font-weight:    700 !important;
        border-radius:  50% !important;
        min-width:      18px !important;
        min-height:     18px !important;
        display:        inline-flex !important;
        align-items:    center !important;
        justify-content: center !important;
        font-family:    var(--ll-sans) !important;
    }
}

/* ==========================================================================
   SECTION 33 — RESIDUAL AGENCY DEMO ELEMENT SUPPRESSION v7.0.0
   Hard-hides any block still referencing agency service content by
   data-attribute, class name, or heading text content.
   ========================================================================== */

/* Hide any block whose ID or class names contain agency-service patterns */
[id*="our-services"], [id*="ourservices"], [id*="service-block"],
[class*="service-block"], [class*="services-section"],
[id*="why-choose"], [id*="whyus"], [id*="why-us"],
[class*="why-choose-us"], [class*="whychoose"],
[id*="testimonial-wade"], [id*="wade-warren"],
[class*="agency-testimonial"] {
    display: none !important;
}

/* Suppress Astra demo notice bars */
.astra-theme-customization-bar,
.astra-site-notice, .astra-notice,
.ast-demo-site-notice, .ast-theme-preview-bar {
    display: none !important;
}

/* ==========================================================================
   SECTION 34 — WP-ADMIN QUICK-ACCESS TOOLBAR STYLES (admin-only)
   ========================================================================== */
.lualki-admin-notice {
    border-left: 4px solid #000000;
    background:  #f9f9f9;
    padding:     12px 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:   13px;
}

/* ==========================================================================
   SECTION 35 — MOBILE HEADER PERFECT CENTERING v8.0.0
   Replaces ALL previous mobile header rules with a definitive, exhaustive
   rule-set that covers every Astra header builder variant (v3/v4/v5).

   PROBLEM:  Hamburger sits pinned to the far-right edge on mobile screens.
   ROOT CAUSE: Astra's .ast-primary-header-bar uses display:flex with
               justify-content:space-between, pushing the menu trigger to
               the trailing edge. The logo floats left via its own wrapper.
   FIX:      Override every Astra mobile container to column-stack, then
             individually center logo, icon row, and hamburger trigger.
   ========================================================================== */

/* ── LAYER A: Master mobile container — column stack, centred ─────────────
   Covers every Astra header builder variation across all versions.        */
@media (max-width: 921px) {

    /* Top-level wrappers */
    .ast-header-break-point .main-header-bar,
    .ast-header-break-point .main-header-bar-wrap,
    .ast-header-break-point .ast-primary-header-bar,
    .ast-mobile-header-wrap .site-header-bar-inner-wrap,
    .ast-mobile-header-wrap .site-header-inner-wrap,
    .ast-mobile-header-wrap .ast-mobile-header-bar,
    /* Astra builder grid containers (v4/v5) */
    .ast-header-break-point .ast-builder-grid-row-container,
    .ast-header-break-point .ast-builder-grid-row-container-inner,
    .ast-header-break-point .ast-builder-section,
    /* Astra v3 classic header container */
    .ast-header-break-point .ast-container {
        display:         flex !important;
        flex-direction:  column !important;
        align-items:     center !important;
        justify-content: center !important;
        text-align:      center !important;
        padding-top:     16px !important;
        padding-bottom:  16px !important;
        gap:             12px !important;
        width:           100% !important;
    }

    /* ── LAYER B: Logo / site identity — centred, float cancelled ───────── */
    .ast-mobile-header-wrap .site-branding,
    .ast-mobile-header-wrap .ast-site-identity,
    .ast-mobile-header-wrap .ast-site-title-wrap,
    .ast-header-break-point .site-branding,
    .ast-header-break-point .ast-site-identity,
    .ast-header-break-point .ast-site-title-wrap,
    .ast-header-break-point .ast-logo-container,
    .ast-header-break-point .custom-logo-link {
        float:           none !important;
        margin:          0 auto !important;
        display:         flex !important;
        justify-content: center !important;
        align-items:     center !important;
        text-align:      center !important;
        order:           1 !important;
        width:           auto !important;
        max-width:       220px !important;
    }

    /* ── LAYER C: Icon row (cart, search, account) — centred ────────────── */
    .ast-header-break-point .ast-site-header-cart,
    .ast-header-break-point .ast-header-account,
    .ast-header-break-point .ast-header-search,
    .ast-header-break-point .ast-header-woo-cart,
    .ast-mobile-header-wrap .ast-site-header-cart {
        float:           none !important;
        margin:          0 auto !important;
        display:         flex !important;
        justify-content: center !important;
        align-items:     center !important;
        order:           2 !important;
        gap:             var(--ll-s6) !important;
        width:           100% !important;
        border-top:      1px solid var(--ll-line) !important;
        padding:         8px 0 !important;
    }

    /* ── LAYER D: Hamburger trigger — dead centre, NEVER right-pinned ───── */
    /* This is the primary fix for the shy-button-on-the-right-edge bug.    */
    .ast-mobile-header-wrap .ast-mobile-menu-trigger-wrapper,
    .ast-mobile-header-wrap .ast-actions-wrap,
    .ast-mobile-header-wrap .ast-mobile-menu-trigger-wrap,
    .ast-mobile-header-wrap .ast-button-wrap,
    .ast-header-break-point .ast-mobile-menu-buttons,
    .ast-header-break-point .ast-header-custom-item,
    .ast-header-break-point .menu-toggle-wrap,
    /* Astra builder element wrappers */
    .ast-builder-layout-element .ast-mobile-menu-trigger-wrapper,
    .ast-builder-layout-element .ast-mobile-menu-trigger-wrap {
        float:           none !important;
        position:        relative !important;
        left:            auto !important;
        right:           auto !important;
        top:             auto !important;
        margin:          0 auto !important;
        display:         flex !important;
        justify-content: center !important;
        align-items:     center !important;
        width:           100% !important;
        order:           3 !important;
    }

    /* The innermost button element */
    .ast-mobile-header-wrap .ast-mobile-menu-trigger-wrapper .ast-button-wrap,
    .ast-header-break-point .menu-toggle,
    .ast-header-break-point .ast-mobile-menu-buttons .menu-toggle {
        margin:          0 auto !important;
        float:           none !important;
        display:         flex !important;
        justify-content: center !important;
        align-items:     center !important;
    }

    /* ── LAYER E: Branded hamburger button ─────────────────────────────── */
    .ast-header-break-point .menu-toggle,
    .ast-mobile-header-wrap .menu-toggle,
    .ast-mobile-menu-buttons .menu-toggle {
        background-color: var(--ll-black) !important;
        background-image: none !important;
        color:            var(--ll-white) !important;
        border:           none !important;
        border-radius:    0 !important;
        font-family:      var(--ll-sans) !important;
        font-size:        9px !important;
        font-weight:      700 !important;
        letter-spacing:   0.18em !important;
        text-transform:   uppercase !important;
        padding:          13px 32px !important;
        min-width:        120px !important;
        box-shadow:       none !important;
    }
    .ast-header-break-point .menu-toggle:hover,
    .ast-mobile-header-wrap .menu-toggle:hover {
        background-color: #1a1a1a !important;
    }

    /* ── LAYER F: Mobile slide-out / popup nav ─────────────────────────── */
    .ast-mobile-popup-wrap,
    .ast-mobile-popup-inner,
    .ast-mobile-popup-content,
    .ast-flyout-main-layout,
    .ast-slide-out-menu-panel,
    .ast-mobile-nav-wrap,
    .ast-off-canvas-wrap,
    .ast-off-canvas-inner {
        background-color: var(--ll-white) !important;
        background-image: none !important;
    }

    /* Nav items in popup */
    .ast-mobile-popup-inner .main-header-menu,
    .ast-mobile-popup-inner .ast-main-header-menu,
    .ast-mobile-nav-wrap .main-header-menu,
    .ast-off-canvas-inner .main-header-menu {
        display:         flex !important;
        flex-direction:  column !important;
        align-items:     center !important;
        width:           100% !important;
        padding:         40px 0 60px !important;
        list-style:      none !important;
        margin:          0 !important;
    }

    .ast-mobile-popup-inner .menu-item,
    .ast-mobile-nav-wrap .menu-item,
    .ast-off-canvas-inner .menu-item {
        width:         100% !important;
        text-align:    center !important;
        border-bottom: 1px solid var(--ll-line) !important;
        margin:        0 !important;
        padding:       0 !important;
    }

    .ast-mobile-popup-inner .menu-item a,
    .ast-mobile-nav-wrap .menu-item a,
    .ast-off-canvas-inner .menu-item a {
        font-family:    var(--ll-serif) !important;
        font-size:      22px !important;
        font-weight:    400 !important;
        color:          var(--ll-black) !important;
        padding:        18px 0 !important;
        display:        flex !important;
        justify-content: center !important;
        letter-spacing: 0.01em !important;
        border-bottom:  none !important;
        background:     transparent !important;
        white-space:    normal !important;
        width:          100% !important;
        text-align:     center !important;
    }
    .ast-mobile-popup-inner .menu-item a:hover,
    .ast-mobile-nav-wrap .menu-item a:hover {
        color:      var(--ll-muted) !important;
        background: transparent !important;
    }
}

/* ── LAYER G: Tighter breakpoints for very small devices ─────────────────── */
@media (max-width: 480px) {
    .ast-header-break-point .menu-toggle,
    .ast-mobile-header-wrap .menu-toggle {
        min-width: 100px !important;
        padding:   12px 24px !important;
        font-size: 8px !important;
    }
    .ast-mobile-popup-inner .menu-item a,
    .ast-mobile-nav-wrap .menu-item a {
        font-size: 18px !important;
        padding:   14px 0 !important;
    }
}

/* ==========================================================================
   SECTION 36 — MOBILE MENU SYNC ENFORCEMENT v8.0.0
   CSS-side guarantee: if mobile menu location is not ticked in WP Admin →
   Appearance → Menus, the off-canvas panel still shows the correct retail
   items (handled by PHP Section 16 nav filter in functions.php).
   Additional CSS hides any <li> whose anchor text matches agency labels.
   ========================================================================== */
@media (max-width: 921px) {

    /* Hide agency items that may still appear in mobile popup menus */
    .ast-mobile-popup-inner .menu-item a[href*="services"],
    .ast-mobile-popup-inner .menu-item a[href*="why-us"],
    .ast-mobile-popup-inner .menu-item a[href*="reviews"],
    .ast-mobile-popup-inner .menu-item a[href*="portfolio"],
    .ast-mobile-nav-wrap .menu-item a[href*="services"],
    .ast-mobile-nav-wrap .menu-item a[href*="why-us"],
    .ast-mobile-nav-wrap .menu-item a[href*="reviews"],
    .ast-off-canvas-inner .menu-item a[href*="services"],
    .ast-off-canvas-inner .menu-item a[href*="why-us"] {
        display: none !important;
    }

    /* Also hide the parent <li> of any hidden link */
    .ast-mobile-popup-inner .menu-item:has(a[href*="services"]),
    .ast-mobile-popup-inner .menu-item:has(a[href*="why-us"]),
    .ast-mobile-popup-inner .menu-item:has(a[href*="reviews"]),
    .ast-mobile-nav-wrap .menu-item:has(a[href*="services"]),
    .ast-mobile-nav-wrap .menu-item:has(a[href*="why-us"]) {
        display: none !important;
    }
}

/* ==========================================================================
   SECTION 37 — MC4WP FORM VISIBILITY FAILSAFE v8.0.0
   If the shortcode block renders empty (form not yet linked), show a
   branded placeholder so the section never appears as a blank white void.
   ========================================================================== */

/* Empty mc4wp container fallback */
.mc4wp-form:empty::after,
.wp-block-shortcode:empty::after,
.mc4wp-form-fields:empty::after {
    content:        'Newsletter signup loading — please check MC4WP → Forms';
    display:        block !important;
    font-family:    var(--ll-sans) !important;
    font-size:      11px !important;
    color:          #555555 !important;
    text-align:     center !important;
    padding:        20px !important;
    border:         1px dashed #444444 !important;
    max-width:      400px !important;
    margin:         0 auto !important;
}

/* Ensure inner-circle section forces all child text white */
.ll-inner-circle,
.ll-inner-circle *,
.wp-block-group.ll-inner-circle,
.wp-block-group.ll-inner-circle * {
    color: var(--ll-white) !important;
}
.ll-inner-circle a,
.ll-inner-circle a:visited {
    color: var(--ll-white) !important;
    border-bottom: 1px solid rgba(255,255,255,0.3) !important;
}
.ll-inner-circle h2,
.ll-inner-circle h3 {
    color: var(--ll-white) !important;
}
/* Override: mc4wp submit still white-on-black reversed */
.ll-inner-circle .mc4wp-form input[type="submit"],
.ll-inner-circle .mc4wp-form button[type="submit"] {
    background: var(--ll-white) !important;
    color:      var(--ll-black) !important;
}