/*
 * Plastonax Responsive Guard v1.2.1
 *
 * v1.1.0 fixes the Nest Hub Max / emulated-device edge case by using an
 * "effective viewport" measured from window.innerWidth, documentElement
 * clientWidth and visualViewport.width. JS writes deterministic body classes,
 * while CSS responds to those classes.
 */

/* =========================================================
   0. FULL WIDTH GUARD
   Applies whenever JS detects effective viewport <= 1366 px.
   ========================================================= */
body.plx-responsive-guard.plx-rg-fullwidth {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

@supports (overflow: clip) {
    body.plx-responsive-guard.plx-rg-fullwidth {
        overflow-x: clip !important;
    }
}

body.home.plx-rg-fullwidth #page,
body.home.plx-rg-fullwidth.site,
body.home.plx-rg-fullwidth #content,
body.home.plx-rg-fullwidth .site-content,
body.home.plx-rg-fullwidth .site-content > .ast-container,
body.home.plx-rg-fullwidth #primary,
body.home.plx-rg-fullwidth #main,
body.home.plx-rg-fullwidth article#post-1463,
body.home.plx-rg-fullwidth article#post-1463 > .entry-content,
body.home.plx-rg-fullwidth .elementor-1463,
body.home.plx-rg-fullwidth .elementor-1463 > .e-con,
body.home.plx-rg-fullwidth .elementor-element-8bcd764,
body.home.plx-rg-fullwidth #plastonax-social-feed {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

body.home.plx-rg-fullwidth .site-content > .ast-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Prevent a classic Astra/Elementor max-width container from leaving
   a right-side "dead strip" on device presets such as Nest Hub Max. */
body.home.plx-rg-fullwidth .ast-container,
body.home.plx-rg-fullwidth .e-con.e-flex,
body.home.plx-rg-fullwidth .e-con.e-con-full,
body.home.plx-rg-fullwidth .elementor-section,
body.home.plx-rg-fullwidth .elementor-container {
    min-width: 0 !important;
}

/* =========================================================
   1. COMPACT HEADER
   Deterministic class when effective viewport <= 1180 px.
   ========================================================= */
body.plx-responsive-guard.plx-rg-compact #masthead {
    width: 100% !important;
    max-width: 100% !important;
}

body.plx-responsive-guard.plx-rg-compact #ast-desktop-header {
    display: none !important;
}

body.plx-responsive-guard.plx-rg-compact #ast-mobile-header {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #fff !important;
}

body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .ast-main-header-wrap,
body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .ast-primary-header-bar {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #fff !important;
}

body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .ast-primary-header-bar {
    min-height: 76px !important;
    padding: 0 !important;
}

body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .ast-builder-grid-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 76px !important;
    padding: 11px 20px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .site-header-primary-section-left {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
}

body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .site-header-primary-section-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    min-width: max-content !important;
}

body.plx-responsive-guard.plx-rg-compact #ast-mobile-header [data-section="title_tagline"],
body.plx-responsive-guard.plx-rg-compact #ast-mobile-header [data-section="section-header-woo-cart"],
body.plx-responsive-guard.plx-rg-compact #ast-mobile-header [data-section="section-header-mobile-trigger"] {
    display: flex !important;
    align-items: center !important;
}

body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .site-logo-img img,
body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .custom-logo-link img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 188px !important;
    max-height: 50px !important;
}

body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border-radius: 10px !important;
}

body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .ast-mobile-header-content {
    display: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 20px 18px !important;
    background: #fff !important;
    border-top: 1px solid rgba(15, 23, 42, .07) !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .08) !important;
    box-sizing: border-box !important;
}

body.plx-responsive-guard.plx-rg-compact #ast-mobile-header.plx-mobile-menu-open .ast-mobile-header-content {
    display: block !important;
}

body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .ast-mobile-header-content .ast-builder-menu,
body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .ast-mobile-header-content .main-header-bar-navigation,
body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .ast-mobile-header-content .main-navigation,
body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .ast-mobile-header-content .main-header-menu {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .ast-mobile-header-content .main-header-menu {
    margin: 0 0 10px !important;
    padding: 0 !important;
}

body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .ast-mobile-header-content .menu-item {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .ast-mobile-header-content .menu-link {
    display: flex !important;
    align-items: center !important;
    min-height: 46px !important;
    padding: 10px 8px !important;
    border-bottom: 1px solid rgba(15, 23, 42, .06) !important;
    line-height: 1.3 !important;
}

/* =========================================================
   2. HERO GUARD
   ========================================================= */
body.home.plx-rg-compact .elementor-element-8bcd764 {
    overflow: hidden !important;
}

body.home.plx-rg-compact .elementor-element-8bcd764 > .e-con-inner {
    width: 100% !important;
    max-width: 1200px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

body.home.plx-rg-compact .elementor-element-8bcd764 .elementor-element-3211a19 {
    min-width: 0 !important;
    max-width: 62% !important;
}

body.home.plx-rg-compact .elementor-element-8bcd764 .elementor-element-5e9b6ee h1 {
    font-size: clamp(36px, 5vw, 54px) !important;
    line-height: 1.07 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

body.home.plx-rg-compact .elementor-element-8bcd764 .elementor-element-1cd09d4 h4 {
    font-size: clamp(18px, 2.4vw, 26px) !important;
    line-height: 1.2 !important;
}

body.home.plx-rg-compact .elementor-element-8bcd764 .elementor-element-68cc8a5 {
    max-width: 560px !important;
}

/* =========================================================
   3. SOCIAL FEED CLASSES
   ========================================================= */
body.plx-rg-tablet-feed #plastonax-social-feed .plx-social-feed__track {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

body.plx-rg-tablet-feed #plastonax-social-feed .plx-social-card,
body.plx-rg-tablet-feed #plastonax-social-feed .plx-social-card:nth-child(n+3) {
    display: block !important;
}

body.plx-rg-tablet-feed #plastonax-social-feed .plx-social-card__body {
    padding: 18px 18px 20px !important;
}

body.plx-rg-tablet-feed #plastonax-social-feed .plx-social-card__message {
    font-size: 14px !important;
    line-height: 1.55 !important;
}

body.plx-rg-two-card-feed #plastonax-social-feed .plx-social-feed__track {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

body.plx-rg-two-card-feed #plastonax-social-feed .plx-social-card:nth-child(n+3) {
    display: none !important;
}

/* =========================================================
   4. PHONE / LOW LANDSCAPE
   ========================================================= */
@media (max-width: 700px) {
    body.plx-rg-compact #ast-mobile-header .ast-builder-grid-row {
        min-height: 70px !important;
        padding: 9px 14px !important;
    }

    body.plx-rg-compact #ast-mobile-header .ast-primary-header-bar {
        min-height: 70px !important;
    }

    body.plx-rg-compact #ast-mobile-header .site-logo-img img,
    body.plx-rg-compact #ast-mobile-header .custom-logo-link img {
        max-width: 160px !important;
    }

    body.home.plx-rg-compact .elementor-element-8bcd764 .elementor-element-3211a19 {
        max-width: 100% !important;
    }

    body.home.plx-rg-compact .elementor-element-8bcd764 .elementor-element-5e9b6ee h1 {
        font-size: clamp(34px, 10vw, 46px) !important;
    }
}

body.plx-rg-low-landscape #ast-mobile-header .ast-builder-grid-row {
    min-height: 60px !important;
    padding: 6px 14px !important;
}

body.plx-rg-low-landscape #ast-mobile-header .ast-primary-header-bar {
    min-height: 60px !important;
}

body.plx-rg-low-landscape #ast-mobile-header .site-logo-img img,
body.plx-rg-low-landscape #ast-mobile-header .custom-logo-link img {
    max-width: 150px !important;
    max-height: 39px !important;
}

body.home.plx-rg-low-landscape .elementor-element-8bcd764 .elementor-element-3211a19 {
    max-width: 64% !important;
}

body.home.plx-rg-low-landscape .elementor-element-8bcd764 .elementor-element-5e9b6ee h1 {
    font-size: clamp(31px, 5vw, 41px) !important;
    line-height: 1.04 !important;
}

body.home.plx-rg-low-landscape .elementor-element-8bcd764 .elementor-element-1cd09d4 h4 {
    font-size: clamp(17px, 2.5vw, 21px) !important;
}

body.plx-rg-low-landscape .plx-floating-phone {
    right: 10px !important;
    bottom: 10px !important;
    min-width: 150px !important;
    height: 46px !important;
    padding: 0 13px 0 10px !important;
    gap: 8px !important;
}

body.plx-rg-low-landscape .plx-phone-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
}

body.plx-rg-low-landscape .plx-phone-label {
    font-size: 12px !important;
}

body.plx-rg-low-landscape #plastonax-facebook-float.plastonax-facebook-float {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
}

body.plx-rg-low-landscape #plastonax-social-feed.plx-social-feed {
    padding-top: 34px !important;
    padding-bottom: 38px !important;
}

/* =========================================================
   5. HEADER / STICKY RECONCILE v1.3.1
   Audit-driven fix.

   Confirmed live configuration:
   - Astra hb-header-height desktop = 80 px
   - Astra primary builder padding = 20 px top + 20 px bottom
   - Astra logo width = 227 px
   - Elementor hero #8bcd764 desktop margin-top = 100 px
   - Astra transparent header = disabled

   Previous v1.2.x changed the physical header height after scroll.
   That caused a layout reflow / hero jump.

   v1.3.0 rules:
   - remove the redundant 100 px hero top margin,
   - keep sticky header geometry CONSTANT while scrolling,
   - only shrink logo / CTA visually via transform,
   - explicitly neutralize Astra's 20+20 px desktop header padding.
   ========================================================= */

/* The 100px Elementor margin was a legacy spacing hack.
   Transparent header is disabled, so it creates a dead white band. */
body.home.plx-responsive-guard .elementor-element-8bcd764 {
    margin-top: 0 !important;
}

/* Sticky shell: stays in normal flow and has constant geometry. */
body.plx-responsive-guard #masthead {
    position: sticky !important;
    top: 0 !important;
    z-index: 99990 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    transition:
        box-shadow .22s ease,
        background-color .22s ease,
        border-color .22s ease !important;
}

body.plx-responsive-guard.plx-header-scrolled #masthead {
    background: rgba(255,255,255,.985) !important;
    border-bottom: 1px solid rgba(15,23,42,.07) !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.10) !important;
    backdrop-filter: saturate(150%) blur(9px);
    -webkit-backdrop-filter: saturate(150%) blur(9px);
}

/* WordPress admin toolbar. */
body.admin-bar.plx-responsive-guard #masthead {
    top: 32px !important;
}

@media (max-width: 782px) {
    body.admin-bar.plx-responsive-guard #masthead {
        top: 46px !important;
    }
}

/* Do NOT animate height/min-height/padding.
   Only paint/transform properties are animated -> no layout jump. */
body.plx-responsive-guard #masthead .site-logo-img img,
body.plx-responsive-guard #masthead .custom-logo-link img,
body.plx-responsive-guard #masthead .ast-custom-button,
body.plx-responsive-guard #masthead .ast-site-header-cart,
body.plx-responsive-guard #masthead .menu-toggle {
    transition: transform .22s ease, opacity .22s ease !important;
}

/* ---------------------------------------------------------
   DESKTOP > 1180 px
   Constant 88 px header at rest AND after scroll.
   --------------------------------------------------------- */
@media (min-width: 1181px) {
    /* Critical audit fix: Astra itself adds 20px top + 20px bottom. */
    body.plx-responsive-guard #ast-desktop-header .ast-primary-header-bar.main-header-bar {
        height: 88px !important;
        min-height: 88px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body.plx-responsive-guard #ast-desktop-header .site-primary-header-wrap {
        height: 88px !important;
        min-height: 88px !important;
    }

    body.plx-responsive-guard #ast-desktop-header .ast-builder-grid-row {
        height: 88px !important;
        min-height: 88px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        box-sizing: border-box !important;
    }

    body.plx-responsive-guard #ast-desktop-header .main-header-menu > .menu-item > .menu-link {
        height: 88px !important;
        min-height: 88px !important;
        line-height: 88px !important;
    }

    body.plx-responsive-guard #ast-desktop-header .site-logo-img img,
    body.plx-responsive-guard #ast-desktop-header .custom-logo-link img {
        display: block !important;
        width: 200px !important;
        max-width: 200px !important;
        height: auto !important;
        max-height: none !important;
        transform: scale(1) !important;
        transform-origin: left center !important;
    }

    /* Visual MB-Group-style compact state WITHOUT changing header height. */
    body.plx-responsive-guard.plx-header-scrolled #ast-desktop-header .site-logo-img img,
    body.plx-responsive-guard.plx-header-scrolled #ast-desktop-header .custom-logo-link img {
        transform: scale(.82) !important;
    }

    body.plx-responsive-guard.plx-header-scrolled #ast-desktop-header .ast-custom-button {
        transform: scale(.95) !important;
    }

    body.plx-responsive-guard.plx-header-scrolled #ast-desktop-header .ast-site-header-cart {
        transform: scale(.94) !important;
        transform-origin: center !important;
    }
}

/* ---------------------------------------------------------
   COMPACT HEADER <= 1180 px
   Existing responsive guard switches to Astra mobile header.
   Keep one stable 68 px geometry.
   --------------------------------------------------------- */
body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .ast-primary-header-bar.main-header-bar {
    height: 68px !important;
    min-height: 68px !important;
    padding: 0 !important;
}

body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .ast-builder-grid-row {
    height: 68px !important;
    min-height: 68px !important;
    padding: 6px 14px !important;
    box-sizing: border-box !important;
}

body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .site-logo-img img,
body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .custom-logo-link img {
    width: 168px !important;
    max-width: 168px !important;
    height: auto !important;
    max-height: none !important;
    transform: scale(1) !important;
    transform-origin: left center !important;
}

body.plx-responsive-guard.plx-rg-compact.plx-header-scrolled #ast-mobile-header .site-logo-img img,
body.plx-responsive-guard.plx-rg-compact.plx-header-scrolled #ast-mobile-header .custom-logo-link img {
    transform: scale(.86) !important;
}

body.plx-responsive-guard.plx-rg-compact.plx-header-scrolled #ast-mobile-header .ast-site-header-cart {
    transform: scale(.94) !important;
    transform-origin: center !important;
}

body.plx-responsive-guard.plx-rg-compact.plx-header-scrolled #ast-mobile-header .menu-toggle {
    transform: scale(.94) !important;
}

/* Phone portrait: slightly smaller stable shell. */
@media (max-width: 700px) {
    body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .ast-primary-header-bar.main-header-bar,
    body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .ast-builder-grid-row {
        height: 64px !important;
        min-height: 64px !important;
    }

    body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .site-logo-img img,
    body.plx-responsive-guard.plx-rg-compact #ast-mobile-header .custom-logo-link img {
        width: 156px !important;
        max-width: 156px !important;
    }
}

/* Low landscape: protect precious vertical space, but still do not resize on scroll. */
body.plx-responsive-guard.plx-rg-low-landscape #ast-mobile-header .ast-primary-header-bar.main-header-bar,
body.plx-responsive-guard.plx-rg-low-landscape #ast-mobile-header .ast-builder-grid-row {
    height: 56px !important;
    min-height: 56px !important;
}

body.plx-responsive-guard.plx-rg-low-landscape #ast-mobile-header .site-logo-img img,
body.plx-responsive-guard.plx-rg-low-landscape #ast-mobile-header .custom-logo-link img {
    width: 146px !important;
    max-width: 146px !important;
}

/* Remove any accidental wrapper spacing before hero.
   The actual Elementor hero margin is already overridden above. */
body.home.plx-responsive-guard #content,
body.home.plx-responsive-guard .site-content,
body.home.plx-responsive-guard #primary,
body.home.plx-responsive-guard #main,
body.home.plx-responsive-guard article#post-1463,
body.home.plx-responsive-guard article#post-1463 > .entry-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Better anchor navigation with sticky header. */
html {
    scroll-padding-top: 96px;
}

body.plx-rg-compact {
    scroll-padding-top: 76px;
}

@media (prefers-reduced-motion: reduce) {
    body.plx-responsive-guard #masthead,
    body.plx-responsive-guard #masthead * {
        transition: none !important;
    }
}


/* =========================================================
   6. REAL DEVICE LANDSCAPE WIDTH FIX v1.3.1
   Headless desktop emulation passed, but a real Android device can keep
   one layout metric at the previous portrait width after rotation.
   Result: the entire WordPress page is only ~2/3 of the landscape screen
   and the remaining right side is white.

   v1.3.1 measures the widest settled viewport metric in JavaScript and
   publishes it as --plx-layout-vw. This rule is active ONLY in the
   low-height landscape mode that exhibited the bug.
   ========================================================= */

html.plx-rg-low-landscape-root,
html.plx-rg-low-landscape-root body {
    width: var(--plx-layout-vw, 100dvw) !important;
    min-width: var(--plx-layout-vw, 100dvw) !important;
    max-width: var(--plx-layout-vw, 100dvw) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
}

@supports (overflow: clip) {
    html.plx-rg-low-landscape-root,
    html.plx-rg-low-landscape-root body {
        overflow-x: clip !important;
    }
}

html.plx-rg-low-landscape-root body.home #page,
html.plx-rg-low-landscape-root body.home #masthead,
html.plx-rg-low-landscape-root body.home #content,
html.plx-rg-low-landscape-root body.home .site-content,
html.plx-rg-low-landscape-root body.home .site-content > .ast-container,
html.plx-rg-low-landscape-root body.home #primary,
html.plx-rg-low-landscape-root body.home #main,
html.plx-rg-low-landscape-root body.home article#post-1463,
html.plx-rg-low-landscape-root body.home article#post-1463 > .entry-content,
html.plx-rg-low-landscape-root body.home .elementor-1463,
html.plx-rg-low-landscape-root body.home .elementor-element-8bcd764,
html.plx-rg-low-landscape-root body.home #plastonax-social-feed {
    width: var(--plx-layout-vw, 100dvw) !important;
    min-width: var(--plx-layout-vw, 100dvw) !important;
    max-width: var(--plx-layout-vw, 100dvw) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

html.plx-rg-low-landscape-root body.home .site-content > .ast-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Header must bind to both viewport edges on the problematic orientation. */
html.plx-rg-low-landscape-root body #masthead {
    left: 0 !important;
    right: 0 !important;
    inset-inline: 0 !important;
}

/* Hero outer shell fills the real landscape width. Inner design remains
   controlled by the existing responsive hero rules. */
html.plx-rg-low-landscape-root body.home .elementor-element-8bcd764 {
    max-width: none !important;
}

/* CSS-only safety fallback for browsers supporting dynamic viewport units. */
@media (orientation: landscape) and (max-height: 620px) {
    @supports (width: 100dvw) {
        html.plx-rg-low-landscape-root,
        html.plx-rg-low-landscape-root body {
            width: var(--plx-layout-vw, 100dvw) !important;
            min-width: var(--plx-layout-vw, 100dvw) !important;
            max-width: var(--plx-layout-vw, 100dvw) !important;
        }
    }
}