/* Product Nav Bar — plg_j2commerce_app_productnavbar */

#productNav {
    /* Follow the theme's Bootstrap tokens when present (adapts to dark/light);
       fall back to sensible light defaults on templates that don't expose them.
       Admin colour pickers override --pnav-* inline. */
    --pnav-bg: var(--bs-body-bg, #ffffff);
    --pnav-text: var(--bs-body-color, #212529);
    --pnav-link: var(--bs-primary, #0d6efd);
    position: sticky;
    top: 0;
    z-index: 1010;
}

/* Bar chrome only when the nav is stuck (fixed to viewport top). */
#productNav.pnav-bar--stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    z-index: 1010;
    background-color: var(--pnav-bg);
    color: var(--pnav-text);
    border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, .125));
    padding: .5rem 1rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
}

/* Neutralise framework tab-bar chrome when stuck (BS5 nav-tabs / UIkit uk-tab). */
#productNav.pnav-bar--stuck .nav-tabs {
    border-bottom: 0;
    margin-bottom: 0;
}

#productNav.pnav-bar--stuck .uk-tab {
    margin-bottom: 0;
}

#productNav.pnav-bar--stuck .uk-tab::before {
    display: none;
}

/* Link colours and indicator in stuck state. */
#productNav.pnav-bar--stuck .pnav-link {
    color: var(--pnav-text);
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
    white-space: nowrap;
}

#productNav.pnav-bar--stuck .pnav-link:hover,
#productNav.pnav-bar--stuck .pnav-link:focus {
    color: var(--pnav-link);
    text-decoration: none;
}

#productNav.pnav-bar--stuck .pnav-link.active {
    color: var(--pnav-link);
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid var(--pnav-link);
}

#productNav.pnav--bottom {
    position: fixed;
    inset: auto 0 0 0;
    top: auto;
    background-color: var(--pnav-bg);
    color: var(--pnav-text);
    border-top: 1px solid var(--bs-border-color, rgba(0, 0, 0, .125));
    border-bottom: none;
    padding: .5rem 1rem;
}

#productNav.pnav--bottom .nav-tabs {
    border-bottom: 0;
    margin-bottom: 0;
}

#productNav.pnav--bottom .uk-tab {
    margin-bottom: 0;
}

#productNav.pnav--bottom .uk-tab::before {
    display: none;
}

#productNav.pnav--bottom .pnav-link {
    color: var(--pnav-text);
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
    white-space: nowrap;
}

#productNav.pnav--bottom .pnav-link:hover,
#productNav.pnav--bottom .pnav-link:focus {
    color: var(--pnav-link);
    text-decoration: none;
}

#productNav.pnav--bottom .pnav-link.active {
    color: var(--pnav-link);
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid var(--pnav-link);
}

/* Add to Cart button — hidden inline, visible only when bar is stuck/fixed. */

.pnav-cart {
    display: none;
    margin-inline-start: auto;
    align-items: center;
}

#productNav.pnav-bar--stuck .pnav-cart {
    display: flex;
}

#productNav.pnav--bottom .pnav-cart {
    display: flex;
}

.pnav-cart-btn:disabled,
.pnav-cart-btn[disabled] {
    pointer-events: none;
    opacity: .5;
}


#j2commerce-product-navbar-tab {box-shadow: rgba(0, 0, 0, .05) 0 -4px inset;}
#j2commerce-product-navbar-tab .nav-link {box-shadow:none!important;}
#j2commerce-product-navbar-tab .nav-link.active {background: transparent;font-weight: 700;}

@media (max-width: 575.98px) {
    .pnav-cart-label {
        display: none;
    }
}