.customer-notification-wrap{position:relative}.customer-notification-button{border:0;background:transparent;cursor:pointer}.customer-notification-dropdown{position:absolute;right:0;top:calc(100% + 12px);z-index:1200;width:min(390px,calc(100vw - 28px));display:none;border:1px solid #e2e8f0;border-radius:15px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.18);overflow:hidden}.customer-notification-dropdown.open{display:block}.customer-notification-dropdown-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;border-bottom:1px solid #e2e8f0}.customer-notification-dropdown-head strong,.customer-notification-dropdown-head small{display:block}.customer-notification-dropdown-head strong{font-size:13px;color:#0f172a}.customer-notification-dropdown-head small{margin-top:2px;font-size:9px;color:#94a3b8}.customer-notification-dropdown-head button{border:0;background:transparent;color:#2563eb;font-size:9px;font-weight:800;cursor:pointer}.customer-notification-dropdown-list{max-height:390px;overflow:auto;padding:7px}.customer-notification-item{display:flex;gap:9px;padding:11px;border-radius:10px;color:inherit;text-decoration:none}.customer-notification-item:hover{background:#f8fafc}.customer-notification-item.unread{background:#f7faff}.customer-notification-dot{flex:0 0 8px;width:8px;height:8px;margin-top:5px;border-radius:50%;background:#cbd5e1}.customer-notification-item.unread .customer-notification-dot{background:#2563eb}.customer-notification-copy{min-width:0}.customer-notification-copy strong,.customer-notification-copy span,.customer-notification-copy small{display:block}.customer-notification-copy strong{color:#0f172a;font-size:11px}.customer-notification-copy>span{margin-top:3px;color:#64748b;font-size:9.5px;line-height:1.45}.customer-notification-copy small{margin-top:4px;color:#94a3b8;font-size:8px}.customer-notification-action-pill{display:inline-flex!important;width:max-content;margin-top:6px!important;padding:3px 7px;border-radius:999px;background:#eff6ff;color:#1d4ed8!important;font-size:8px!important;font-weight:900}.customer-notification-dropdown-foot{padding:10px 14px;border-top:1px solid #e2e8f0;background:#f8fafc;text-align:right}.customer-notification-dropdown-foot a{font-size:10px;font-weight:800;color:#2563eb}.customer-notification-empty{margin:0;padding:18px;color:#94a3b8;font-size:10px;text-align:center}.footer-logout-form{margin:0;padding:0}.footer-logout-link{display:block;margin:8px 0;padding:0;border:0;background:none;color:#b8c5c2;font:inherit;text-align:left;cursor:pointer}.footer-logout-link:hover{color:#fff}@media(max-width:900px){.receipt-action .action-copy,.customer-notification-button .action-copy{display:none}}

/* =========================================================
   PROFESSIONAL MOBILE / THREE-DOT NAVIGATION
   ========================================================= */
.professional-menu-btn{
    width:40px;
    height:40px;
    display:none;
    align-items:center;
    justify-content:center;
    border:1px solid #dbe3ec;
    border-radius:10px;
    background:#fff;
    color:#0f172a;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    transition:.15s ease;
}
.professional-menu-btn:hover{
    border-color:#b9cae4;
    background:#f8fafc;
}

.professional-mobile-nav{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    z-index:1500;
    width:min(390px,92vw);
    max-height:100vh;
    display:block!important;
    overflow-y:auto;
    transform:translateX(105%);
    background:#fff;
    border-left:1px solid #e2e8f0;
    box-shadow:-24px 0 70px rgba(15,23,42,.18);
    transition:transform .22s ease;
    visibility:hidden;
}
.professional-mobile-nav.open{
    transform:translateX(0);
    visibility:visible;
}
body.mobile-nav-open{
    overflow:hidden;
}
body.mobile-nav-open::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:1400;
    background:rgba(15,23,42,.42);
    backdrop-filter:blur(1px);
}

.mobile-nav-head{
    position:sticky;
    top:0;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px;
    border-bottom:1px solid #e2e8f0;
    background:#fff;
}
.mobile-account-card{
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
}
.mobile-account-avatar{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#2563eb;
    color:#fff;
    font-weight:900;
}
.mobile-account-card strong,
.mobile-account-card small{
    display:block;
}
.mobile-account-card strong{
    color:#0f172a;
    font-size:12px;
}
.mobile-account-card small{
    max-width:230px;
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#94a3b8;
    font-size:9px;
}
.mobile-nav-close{
    flex:0 0 36px;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:10px;
    background:#f1f5f9;
    color:#64748b;
    font-size:23px;
    cursor:pointer;
}
.mobile-nav-close:hover{
    background:#e2e8f0;
    color:#0f172a;
}
.mobile-nav-body{
    padding:10px 10px 20px;
}
.mobile-nav-section-title{
    display:block;
    padding:14px 9px 6px;
    color:#94a3b8;
    font-size:8px;
    font-weight:900;
    letter-spacing:.12em;
}
.professional-mobile-nav .mobile-nav-body>a,
.professional-mobile-logout{
    width:100%;
    display:grid;
    grid-template-columns:36px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding:10px;
    border:0;
    border-radius:11px;
    background:transparent;
    color:#334155;
    text-decoration:none;
    text-align:left;
    cursor:pointer;
    transition:.14s ease;
    box-sizing:border-box;
}
.professional-mobile-nav .mobile-nav-body>a:hover,
.professional-mobile-nav .mobile-nav-body>a.active,
.professional-mobile-logout:hover{
    background:#eff6ff;
    color:#1d4ed8;
}
.mobile-nav-icon{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#f8fafc;
    color:#64748b;
    font-size:15px;
}
.professional-mobile-nav a.active .mobile-nav-icon,
.professional-mobile-nav a:hover .mobile-nav-icon{
    background:#dbeafe;
    color:#1d4ed8;
}
.professional-mobile-nav a strong,
.professional-mobile-nav a small,
.professional-mobile-logout strong,
.professional-mobile-logout small{
    display:block;
}
.professional-mobile-nav a strong,
.professional-mobile-logout strong{
    color:inherit;
    font-size:11px;
}
.professional-mobile-nav a small,
.professional-mobile-logout small{
    margin-top:2px;
    color:#94a3b8;
    font-size:8.5px;
}
.mobile-nav-count{
    min-width:20px;
    height:20px;
    padding:0 6px;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:#2563eb;
    color:#fff;
    font-size:8px;
}
.mobile-nav-divider{
    height:1px;
    margin:10px 8px;
    background:#e2e8f0;
}
.mobile-logout-form{
    margin:0;
}
.professional-mobile-logout{
    font:inherit;
}
.professional-mobile-logout .mobile-nav-icon{
    background:#fff1f2;
    color:#be123c;
}
.professional-mobile-logout:hover{
    background:#fff7f7;
    color:#be123c;
}

@media(max-width:1050px){
    .professional-menu-btn{
        display:flex;
    }
}
@media(min-width:1051px){
    .professional-mobile-nav{
        visibility:hidden!important;
        transform:translateX(105%)!important;
    }
}


/* =========================================================
   MOBILE HEADER + DRAWER HARD FIX
   Ensures the drawer sits above all storefront stacking layers.
   ========================================================= */

.mobile-nav-backdrop{
    position:fixed!important;
    inset:0!important;
    z-index:2147483000!important;
    display:block!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    background:rgba(15,23,42,.48)!important;
    backdrop-filter:blur(2px)!important;
    transition:opacity .18s ease, visibility .18s ease!important;
}
.mobile-nav-backdrop.open{
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
}

.professional-mobile-nav{
    position:fixed!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;
    z-index:2147483640!important;
    width:min(390px,92vw)!important;
    height:100dvh!important;
    max-height:100dvh!important;
    display:block!important;
    visibility:hidden!important;
    opacity:0!important;
    transform:translate3d(105%,0,0)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-left:1px solid #e2e8f0!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:-28px 0 80px rgba(15,23,42,.26)!important;
    pointer-events:none!important;
    transition:transform .22s ease, opacity .16s ease, visibility .22s ease!important;
    isolation:isolate!important;
}
.professional-mobile-nav.open{
    visibility:visible!important;
    opacity:1!important;
    transform:translate3d(0,0,0)!important;
    pointer-events:auto!important;
}

html.mobile-drawer-open,
body.mobile-drawer-open{
    overflow:hidden!important;
}

/* Disable the earlier pseudo-backdrop so there is only one overlay. */
body.mobile-nav-open::after,
body.mobile-drawer-open::after{
    display:none!important;
    content:none!important;
}

/* Drawer content remains above its own background. */
.professional-mobile-nav .mobile-nav-head{
    position:sticky!important;
    top:0!important;
    z-index:5!important;
}
.professional-mobile-nav .mobile-nav-body{
    position:relative!important;
    z-index:2!important;
}

/* ---------------------------------------------------------
   Compact storefront header for tablet/mobile
   --------------------------------------------------------- */
@media(max-width:1050px){
    .site-header,
    .main-header{
        overflow:visible!important;
    }

    .main-header .header-container,
    .site-header .header-container{
        width:100%!important;
        max-width:none!important;
        padding-left:12px!important;
        padding-right:12px!important;
        gap:8px!important;
    }

    .header-actions{
        flex:0 0 auto!important;
        gap:4px!important;
        margin-left:auto!important;
        min-width:0!important;
    }

    .professional-menu-btn{
        display:flex!important;
        flex:0 0 40px!important;
        width:40px!important;
        height:40px!important;
        border-radius:10px!important;
        z-index:100!important;
    }

    /* Account details live inside the drawer on smaller screens. */
    .header-actions .account-action,
    .header-actions .receipt-action,
    .header-actions .desktop-logout-form{
        display:none!important;
    }

    /* Keep notification and cart as compact icons. */
    .customer-notification-wrap,
    .header-actions .cart-action{
        display:flex!important;
        flex:0 0 40px!important;
        width:40px!important;
    }

    .customer-notification-button,
    .header-actions .cart-action{
        width:40px!important;
        min-width:40px!important;
        height:40px!important;
        padding:0!important;
        display:grid!important;
        place-items:center!important;
        border:1px solid #dbe3ec!important;
        border-radius:10px!important;
        background:#fff!important;
    }

    .customer-notification-button .action-copy,
    .header-actions .cart-action .action-copy{
        display:none!important;
    }

    .customer-notification-button .action-icon,
    .header-actions .cart-action .action-icon{
        margin:0!important;
        width:22px!important;
        height:22px!important;
    }

    .customer-notification-dropdown{
        position:fixed!important;
        top:72px!important;
        right:12px!important;
        z-index:2147483500!important;
        width:min(390px,calc(100vw - 24px))!important;
    }
}

/* ---------------------------------------------------------
   True phone layout
   Logo + search + bell + cart + three dots
   --------------------------------------------------------- */
@media(max-width:680px){
    .topbar{
        display:none!important;
    }

    .main-header,
    .site-header{
        min-height:68px!important;
    }

    .main-header .header-container,
    .site-header .header-container{
        display:flex!important;
        flex-wrap:nowrap!important;
        align-items:center!important;
        min-height:68px!important;
        padding:8px 10px!important;
    }

    .brand,
    .brand-logo,
    .site-logo{
        flex:0 0 auto!important;
        max-width:52px!important;
    }

    .brand img,
    .brand-logo img,
    .site-logo img{
        max-width:48px!important;
        max-height:48px!important;
    }

    /* Category button is better inside the mobile drawer/product pages. */
    .category-menu-wrap{
        display:none!important;
    }

    /* Keep the search useful but compact. */
    .search-form,
    .header-search,
    form.search-form{
        flex:1 1 auto!important;
        min-width:0!important;
        max-width:none!important;
        margin:0!important;
    }

    .search-form input,
    .header-search input{
        min-width:0!important;
        width:100%!important;
    }

    .search-form select,
    .header-search select{
        display:none!important;
    }

    .header-actions{
        gap:3px!important;
    }

    .customer-notification-wrap,
    .header-actions .cart-action,
    .professional-menu-btn{
        flex-basis:38px!important;
        width:38px!important;
        min-width:38px!important;
        height:38px!important;
    }

    .customer-notification-button,
    .header-actions .cart-action{
        width:38px!important;
        min-width:38px!important;
        height:38px!important;
    }

    .professional-menu-btn{
        width:38px!important;
        height:38px!important;
        padding:0!important;
    }

    .mobile-menu-dots{
        transform:translateY(-1px);
        font-size:23px;
    }

    .professional-mobile-nav{
        width:min(360px,94vw)!important;
    }

    .mobile-account-card small{
        max-width:190px!important;
    }
}

/* Very narrow phones: search remains, header icons stay visible. */
@media(max-width:460px){
    .main-header .header-container,
    .site-header .header-container{
        gap:5px!important;
        padding-left:7px!important;
        padding-right:7px!important;
    }

    .brand,
    .brand-logo,
    .site-logo{
        max-width:44px!important;
    }

    .brand img,
    .brand-logo img,
    .site-logo img{
        max-width:40px!important;
        max-height:40px!important;
    }

    .search-form input,
    .header-search input{
        font-size:11px!important;
    }

    .search-form button,
    .header-search button{
        width:38px!important;
        min-width:38px!important;
    }
}


/* =========================================================
   OFF-CANVAS DRAWER ROOT-STACKING FIX
   Drawer/backdrop are moved directly under body by JS.
   ========================================================= */

body > .mobile-nav-backdrop{
    position:fixed!important;
    inset:0!important;
    z-index:2147483000!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    display:block!important;
    background:rgba(15,23,42,.48)!important;
    backdrop-filter:blur(2px)!important;
    transition:opacity .18s ease, visibility .18s ease!important;
}

body > .mobile-nav-backdrop.open{
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
}

body > .professional-mobile-nav{
    position:fixed!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;
    z-index:2147483646!important;
    width:min(390px,92vw)!important;
    height:100dvh!important;
    max-height:100dvh!important;
    display:block!important;
    visibility:hidden!important;
    opacity:0!important;
    transform:translate3d(105%,0,0)!important;
    pointer-events:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    margin:0!important;
    padding:0!important;
    background:#fff!important;
    border:0!important;
    border-left:1px solid #e2e8f0!important;
    border-radius:0!important;
    box-shadow:-28px 0 80px rgba(15,23,42,.28)!important;
    transition:transform .22s ease, opacity .16s ease, visibility .22s ease!important;
}

body > .professional-mobile-nav.open{
    visibility:visible!important;
    opacity:1!important;
    transform:translate3d(0,0,0)!important;
    pointer-events:auto!important;
}

html.mobile-drawer-open,
body.mobile-drawer-open{
    overflow:hidden!important;
}


/* =========================================================
   PHONE DRAWER VISUAL FIX
   Keep the same professional tablet design on narrow phones.
   ========================================================= */
@media(max-width:519px){

    body > .professional-mobile-nav{
        width:94vw!important;
        max-width:360px!important;
        background:#fff!important;
        color:#0f172a!important;
    }

    body > .professional-mobile-nav .mobile-nav-head{
        padding:14px 13px!important;
        border-bottom:1px solid #e2e8f0!important;
        background:#fff!important;
    }

    body > .professional-mobile-nav .mobile-account-card{
        gap:10px!important;
    }

    body > .professional-mobile-nav .mobile-account-avatar{
        width:42px!important;
        height:42px!important;
        flex:0 0 42px!important;
        border-radius:12px!important;
        background:#2563eb!important;
        color:#fff!important;
        font-size:13px!important;
        box-shadow:none!important;
    }

    body > .professional-mobile-nav .mobile-account-card strong{
        display:block!important;
        padding:0!important;
        margin:0!important;
        background:transparent!important;
        color:#0f172a!important;
        font-size:12px!important;
        line-height:1.25!important;
        text-align:left!important;
    }

    body > .professional-mobile-nav .mobile-account-card small{
        display:block!important;
        margin:3px 0 0!important;
        padding:0!important;
        background:transparent!important;
        color:#94a3b8!important;
        font-size:8.5px!important;
        line-height:1.25!important;
        text-align:left!important;
    }

    body > .professional-mobile-nav .mobile-nav-close{
        width:38px!important;
        height:38px!important;
        flex:0 0 38px!important;
        border:0!important;
        border-radius:11px!important;
        background:#f1f5f9!important;
        color:#64748b!important;
        font-size:21px!important;
    }

    body > .professional-mobile-nav .mobile-nav-body{
        padding:10px 10px 22px!important;
        background:#fff!important;
    }

    /* Section headers must be labels, never blue buttons. */
    body > .professional-mobile-nav .mobile-nav-section-title{
        display:block!important;
        width:auto!important;
        height:auto!important;
        margin:11px 4px 5px!important;
        padding:0 7px!important;
        border:0!important;
        border-radius:0!important;
        background:transparent!important;
        box-shadow:none!important;
        color:#94a3b8!important;
        font-size:8px!important;
        line-height:1.35!important;
        font-weight:900!important;
        letter-spacing:.12em!important;
        text-align:left!important;
    }

    /* Navigation item = clean row, same as tablet. */
    body > .professional-mobile-nav .mobile-nav-body > a,
    body > .professional-mobile-nav .professional-mobile-logout{
        width:100%!important;
        min-height:53px!important;
        display:grid!important;
        grid-template-columns:38px minmax(0,1fr) auto!important;
        align-items:center!important;
        gap:10px!important;
        margin:1px 0!important;
        padding:7px 8px!important;
        border:1px solid transparent!important;
        border-radius:11px!important;
        background:transparent!important;
        box-shadow:none!important;
        color:#334155!important;
        text-align:left!important;
        text-decoration:none!important;
    }

    body > .professional-mobile-nav .mobile-nav-body > a:hover{
        border-color:#dbeafe!important;
        background:#f8fbff!important;
    }

    body > .professional-mobile-nav .mobile-nav-body > a.active{
        border-color:#dbeafe!important;
        background:#eff6ff!important;
        color:#1d4ed8!important;
    }

    /* Small icon tile only. */
    body > .professional-mobile-nav .mobile-nav-icon{
        width:36px!important;
        height:36px!important;
        display:grid!important;
        place-items:center!important;
        padding:0!important;
        border:0!important;
        border-radius:10px!important;
        background:#f8fafc!important;
        color:#64748b!important;
        box-shadow:none!important;
        font-size:13px!important;
    }

    body > .professional-mobile-nav .mobile-nav-body > a.active .mobile-nav-icon{
        background:#dbeafe!important;
        color:#2563eb!important;
    }

    /* Remove inherited full-width blue backgrounds from text. */
    body > .professional-mobile-nav .mobile-nav-body > a span:not(.mobile-nav-icon),
    body > .professional-mobile-nav .professional-mobile-logout span:not(.mobile-nav-icon){
        min-width:0!important;
        width:auto!important;
        padding:0!important;
        margin:0!important;
        border:0!important;
        border-radius:0!important;
        background:transparent!important;
        box-shadow:none!important;
        text-align:left!important;
    }

    body > .professional-mobile-nav .mobile-nav-body > a strong,
    body > .professional-mobile-nav .professional-mobile-logout strong{
        display:block!important;
        width:auto!important;
        padding:0!important;
        margin:0!important;
        border:0!important;
        border-radius:0!important;
        background:transparent!important;
        box-shadow:none!important;
        color:#1e293b!important;
        font-size:10.5px!important;
        line-height:1.25!important;
        font-weight:750!important;
        text-align:left!important;
    }

    body > .professional-mobile-nav .mobile-nav-body > a small,
    body > .professional-mobile-nav .professional-mobile-logout small{
        display:block!important;
        width:auto!important;
        padding:0!important;
        margin:3px 0 0!important;
        border:0!important;
        border-radius:0!important;
        background:transparent!important;
        box-shadow:none!important;
        color:#94a3b8!important;
        font-size:8px!important;
        line-height:1.25!important;
        text-align:left!important;
    }

    body > .professional-mobile-nav .mobile-nav-body > a.active strong{
        color:#1d4ed8!important;
    }

    body > .professional-mobile-nav .mobile-nav-count{
        min-width:21px!important;
        height:21px!important;
        padding:0 6px!important;
        border-radius:999px!important;
        background:#2563eb!important;
        color:#fff!important;
        font-size:8px!important;
        font-weight:900!important;
    }

    body > .professional-mobile-nav .mobile-nav-divider{
        height:1px!important;
        margin:10px 7px!important;
        background:#e2e8f0!important;
    }

    /* Professional logout row. */
    body > .professional-mobile-nav .professional-mobile-logout{
        border-color:transparent!important;
        background:transparent!important;
        color:#be123c!important;
    }

    body > .professional-mobile-nav .professional-mobile-logout .mobile-nav-icon{
        background:#fff1f2!important;
        color:#be123c!important;
    }

    body > .professional-mobile-nav .professional-mobile-logout strong{
        color:#be123c!important;
    }

    body > .professional-mobile-nav .professional-mobile-logout:hover{
        border-color:#ffe4e6!important;
        background:#fff7f7!important;
    }
}