/* ARMANIPLAST-PASS-040 — desktop sticky, mega flyouts, inner date, phones */

/* REG-040-STICKY-DESKTOP — Pass 037 set nav { position:relative !important } at ≥992px,
   which beat compiled nav.nav.scrolled { position:fixed }. Pin only when .scrolled. */
@media (min-width: 992px) {
    header.header > nav.nav,
    header.header.inner > nav.nav {
        position: relative;
        margin-top: 0;
    }
    header.header nav.nav.scrolled,
    header.header.inner nav.nav.scrolled {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto !important;
        z-index: 320 !important;
        transform: none !important;
    }
    header.header nav.nav.scrolled > .nav-container.bottom,
    header.header.inner nav.nav.scrolled > .nav-container.bottom {
        margin-left: auto;
        margin-right: auto;
    }
    header.header nav.nav.scrolled,
    header.header nav.nav.scrolled .nav-inner,
    header.header nav.nav.scrolled .nav-item.has-dropdown {
        overflow: visible !important;
    }
    .ap-nav-sticky-slot {
        display: block;
        width: 100%;
        height: 0;
        pointer-events: none;
    }
}

/* REG-040-MEGA-SPACING + FLYOUT + VISUAL */
@media (min-width: 990px) {
    header.header .nav-item.has-dropdown > #nav-products-submenu {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        align-items: flex-start !important;
        align-content: flex-start !important;
    }
    /* Accordion chevrons are for mobile; on desktop they sat in-flow (2.2rem) and created 35px gaps. */
    header.header #nav-products-submenu .nav-dropdown-toggle {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
    header.header #nav-products-submenu > .dropdown-item {
        height: auto !important;
        min-height: 0 !important;
        align-self: flex-start !important;
        overflow: visible !important;
    }
    header.header #nav-products-submenu > .dropdown-item > a,
    header.header #nav-products-submenu > .dropdown-item > .dropdown-item-text,
    header.header #nav-products-submenu > .ap-nav-col-stack > .ap-nav-stack-group > a {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        padding: 0.25rem 0.75rem 0.2rem !important;
        margin: 0 0 0.75rem !important;
        line-height: 1.35 !important;
    }
    header.header #nav-products-submenu > .dropdown-item > .dropdown-menu > .dropdown-item {
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        position: relative;
    }
    header.header #nav-products-submenu > .dropdown-item > .dropdown-menu > .dropdown-item > a,
    header.header #nav-products-submenu > .ap-nav-col-stack > .ap-nav-stack-group > .dropdown-menu > .dropdown-item > a {
        font-size: 0.875rem !important;
        font-weight: 500 !important;
        padding: 0.32rem 0.7rem !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }
    header.header #nav-products-submenu > .ap-nav-col-stack {
        gap: 0.85rem !important;
    }
    header.header .nav-item.has-dropdown > #nav-products-submenu > .dropdown-item:nth-child(3) > .dropdown-menu {
        align-content: start !important;
        align-items: start !important;
        row-gap: 0 !important;
        column-gap: 0.5rem !important;
    }

    /* Nested flyouts: beside parent. Extra .has-dropdown chain beats Pass 038 inset:auto. */
    header.header #nav-products-submenu > .dropdown-item > .dropdown-menu > .dropdown-item.has-dropdown > .dropdown-menu,
    header.header #nav-products-submenu > .ap-nav-col-stack > .ap-nav-stack-group > .dropdown-menu > .dropdown-item.has-dropdown > .dropdown-menu,
    header.header #nav-products-submenu .dropdown-item.has-dropdown > .dropdown-menu .dropdown-item.has-dropdown > .dropdown-menu {
        position: absolute !important;
        top: 0 !important;
        right: calc(100% - 4px) !important;
        left: auto !important;
        bottom: auto !important;
        width: max-content !important;
        min-width: 11rem !important;
        max-width: 16rem !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0.2rem 0 !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 120 !important;
        background: #f5f6f7 !important;
        border: 1px solid #e5e7eb !important;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: none !important;
    }
    header.header #nav-products-submenu > .dropdown-item > .dropdown-menu > .dropdown-item.has-dropdown:hover > .dropdown-menu,
    header.header #nav-products-submenu > .dropdown-item > .dropdown-menu > .dropdown-item.has-dropdown:focus-within > .dropdown-menu,
    header.header #nav-products-submenu > .dropdown-item > .dropdown-menu > .dropdown-item.has-dropdown.open > .dropdown-menu,
    header.header #nav-products-submenu > .ap-nav-col-stack > .ap-nav-stack-group > .dropdown-menu > .dropdown-item.has-dropdown:hover > .dropdown-menu,
    header.header #nav-products-submenu > .ap-nav-col-stack > .ap-nav-stack-group > .dropdown-menu > .dropdown-item.has-dropdown:focus-within > .dropdown-menu,
    header.header #nav-products-submenu .dropdown-item.has-dropdown:hover > .dropdown-menu > .dropdown-item.has-dropdown:hover > .dropdown-menu,
    header.header #nav-products-submenu .dropdown-item.has-dropdown:focus-within > .dropdown-menu > .dropdown-item.has-dropdown:focus-within > .dropdown-menu,
    header.header #nav-products-submenu .dropdown-item.has-dropdown > .dropdown-menu .dropdown-item.has-dropdown.open > .dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    header.header #nav-products-submenu > .dropdown-item > .dropdown-menu > .dropdown-item.has-dropdown > .dropdown-menu > .dropdown-item > a,
    header.header #nav-products-submenu > .ap-nav-col-stack .dropdown-item.has-dropdown > .dropdown-menu > .dropdown-item > a {
        font-size: 0.8125rem !important;
        font-weight: 400 !important;
        padding: 0.2rem 0.65rem !important;
        background: transparent !important;
    }
    header.header #nav-products-submenu > .dropdown-item > .dropdown-menu > .dropdown-item.has-dropdown > .dropdown-menu > .dropdown-item:hover > a,
    header.header #nav-products-submenu > .ap-nav-col-stack .dropdown-item.has-dropdown > .dropdown-menu > .dropdown-item:hover > a {
        background: #eceef0 !important;
    }
}

/* REG-040-INNER-DATE — same grid as homepage; do not retune homepage numbers */
@media (min-width: 992px) {
    header.header.inner {
        padding-inline: 0.5rem !important;
    }
    header.header.inner > .nav-container.top.container {
        width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        box-sizing: border-box;
        max-width: 960px !important;
    }
    header.header.inner > .nav-container.top .row {
        align-items: flex-end;
    }
}
@media (min-width: 1200px) {
    header.header.inner > .nav-container.top.container {
        max-width: 1140px !important;
    }
}
@media (min-width: 1400px) {
    header.header.inner > .nav-container.top.container {
        max-width: 1320px !important;
    }
}

/* REG-040-FOOTER-PHONE-PUNCTUATION */
footer.footer .ap-phone-part {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    white-space: nowrap;
}
@media (max-width: 767.98px) {
    footer.footer li .d-flex.flex-column.flex-md-row.gap-1 {
        flex-direction: column;
        align-items: flex-start;
    }
    footer.footer .ap-phone-part {
        display: flex;
        white-space: nowrap;
    }
    footer.footer .ap-phone-part > span {
        display: inline;
    }
}