:root {
--pp-emerald: #10b981;
--pp-emerald-dark: #065f46;
--pp-emerald-soft: #ecfdf5;
--pp-dark: #111827;
--pp-radius: 18px;
--pp-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
@media (max-width: 849px) { .mfp-wrap.mfp-ready { z-index: 999999 !important; }
.mobile-sidebar {
background-color: #f8fafc !important;
border-radius: 24px 0 0 24px !important;
z-index: 1000000 !important;
overflow-x: hidden !important;
} .mobile-sidebar .pp-slide-panel.pp-slide-hidden {
display: none !important;
}
.mobile-sidebar .pp-slide-panel.pp-slide-active {
display: block !important;
animation: ppFadeIn 0.3s ease-out;
}
@keyframes ppFadeIn {
from { opacity: 0; transform: translateX(10px); }
to { opacity: 1; transform: translateX(0); }
}
.mobile-sidebar ul, 
.mobile-sidebar li {
background: none !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}  .mobile-sidebar ul.nav-sidebar li a {
background: #fff !important;
border-radius: var(--pp-radius) !important;
margin: 8px 15px !important;
padding: 16px 20px !important;
color: var(--pp-dark) !important;
font-family: 'Manrope', sans-serif !important;
font-weight: 800 !important;
font-size: 13px !important;
text-transform: uppercase !important;
letter-spacing: 0.02em !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important; border: 1px solid #edf2f7 !important;
box-shadow: var(--pp-shadow) !important;
min-height: 58px !important;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative;
}
.mobile-sidebar ul.nav-sidebar li a:active {
background: var(--pp-emerald-soft) !important;
color: var(--pp-emerald) !important;
transform: scale(0.97);
} .mobile-sidebar .pp-mm-l0-icon {
margin-right: 14px !important;
color: var(--pp-emerald) !important;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.9;
}
.mobile-sidebar .pp-mm-l0-icon svg {
width: 20px !important;
height: 20px !important;
}  .mobile-sidebar .pp-menu-item .toggle {
position: absolute !important;
right: 15px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: var(--pp-emerald-soft) !important;
color: var(--pp-emerald) !important;
width: 34px !important;
height: 34px !important;
border-radius: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 14px !important;
border: none !important;
cursor: pointer !important;
} .mobile-sidebar ul.nav-sidebar li.pp-has-children > a::after {
content: '';
position: absolute;
right: 58px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 24px;
background: #f1f5f9;
}  .mobile-sidebar .pp-slide-back {
background: #fff !important;
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid #edf2f7 !important;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
}
.mobile-sidebar .pp-slide-back-btn {
width: 100% !important;
background: none !important;
border: none !important;
display: flex !important;
align-items: center !important;
padding: 18px 20px !important;
cursor: pointer !important;
text-align: left;
}
.mobile-sidebar .pp-slide-back-icon {
background: var(--pp-dark) !important;
color: #fff !important;
width: 38px !important;
height: 38px !important;
border-radius: 14px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-right: 15px !important;
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: transform 0.2s ease;
}
.mobile-sidebar .pp-slide-back-btn:active .pp-slide-back-icon {
transform: translateX(-3px);
}
.mobile-sidebar .pp-slide-back-icon::before {
content: '\e900'; font-family: 'fl-icons';
font-size: 16px;
font-weight: bold;
}
.mobile-sidebar .pp-slide-back-label {
color: var(--pp-dark) !important;
font-size: 15px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em;
line-height: 1.2;
} .mobile-sidebar .pp-view-all {
margin: 15px !important;
}
.mobile-sidebar .pp-view-all a {
background: var(--pp-emerald-soft) !important;
border: 1px dashed var(--pp-emerald) !important;
color: var(--pp-emerald-dark) !important;
justify-content: flex-start !important;
text-transform: none !important;
font-weight: 700 !important;
margin: 0 !important;
padding: 18px 20px !important;
min-height: auto !important;
font-size: 14px !important;
}
.mobile-sidebar .pp-view-all .pp-view-all-arrow {
margin-right: 10px;
font-weight: 800;
color: var(--pp-emerald);
}
.mobile-sidebar .pp-view-all strong {
margin-left: 4px;
font-weight: 800;
} .mobile-sidebar .searchform-wrapper { 
padding: 15px !important; 
background: #fff !important;
border-bottom: 1px solid #edf2f7 !important;
}
.mobile-sidebar .search-field {
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 16px !important;
padding: 14px 20px 14px 45px !important;
font-weight: 700 !important;
} .mobile-sidebar ul.nav-sidebar li.my-account-link a {
background: var(--pp-dark) !important;
color: #fff !important;
justify-content: center !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
} .mobile-sidebar .mobile-sidebar-footer {
display: flex !important;
justify-content: space-around !important;
padding: 20px 10px !important;
background: #fff !important;
margin-top: 10px !important;
border-top: 1px solid #edf2f7 !important;
}
.pp-mm-footer-item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 5px !important;
text-decoration: none !important;
}
.pp-mm-footer-icon {
width: 40px !important;
height: 40px !important;
background: #f1f5f9 !important;
border-radius: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #64748b !important;
}
.pp-mm-footer-icon.pp-mm-highlight {
background: var(--pp-emerald-soft) !important;
color: var(--pp-emerald) !important;
}
.pp-mm-footer-label {
font-size: 10px !important;
font-weight: 800 !important;
color: #64748b !important;
} .mfp-close {
top: 12px !important; right: 12px !important;
background: var(--pp-dark) !important;
color: #fff !important; border-radius: 12px !important;
width: 48px !important; height: 48px !important;
opacity: 1 !important; z-index: 1000001 !important;
}
}