@media (max-width: 996px) {
#smp-sidebar-wrapper,
#smp-open-sidebar, .smp-open-sidebar{
display: none !important;
}
}
li.smp-open-sidebar > a::after{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 10px;
content: ""; font-family: "FontAwesome"; font-weight: 400;
} #smp-sidebar-wrapper {
position: fixed;
width: 70dvw;
height: 100dvh;
display: flex; transition: transform 0.3s ease;
z-index: 99999 !important;
overflow: hidden;
box-shadow: 0.2rem 0 0.8rem rgba(0, 0, 0, 0.3);
background-color: #fff; border-radius: 1rem;
top: 50dvh !important;
left: 50dvw !important;
transform: translate(-50%, -50%) !important;
} .smp-right {
left: auto;
right: 0;
transform: translateX(100%);
border-radius: 1rem 0 0 1rem;
} #smp-sidebar-wrapper.active { } #smp-sidebar-left {
width: 35%;
padding: 2rem;
overflow-y: auto;
border-right: 0.1rem solid #ddd;
background: rgba(255, 255, 255, 0.95);
}
.smp-menu-header {
font-size: 2.4rem;
font-weight: 400;
padding-bottom: 1.2rem;
margin-bottom: 2rem;
border-bottom: 0.2rem solid #eee;
color: inherit;
}
.smp-category-list {
list-style: none;
margin: 0;
padding: 0;
}
.smp-category-list > li .smp-cat-icon ,  .smp-category-list > li span{
transition: all 400ms ease-in-out; 
}
.smp-category {
display: flex;
align-items: center;
padding: 1.5rem;
margin-bottom: 0.5rem;
border: 0.1rem solid #f0f0f0;
border-radius: 0.5rem;
cursor: pointer;
transition: background-color 0.25s ease, transform 0.25s ease;
}
.smp-category:hover {
background-color: #f9f9f9;
transform: translateX(0.5rem);
.smp-cat-arrow::before {
color: #f17d7d !important;
}
}
.smp-cat-icon {
width: 4rem;
height: 4rem;
object-fit: cover;
margin-right: 1rem;
border-radius: 50%;
}
.smp-cat-title {
flex: 1;
font-size: 1.6rem;
}
.smp-cat-arrow {
font-size: 1.6rem; } #smp-sidebar-right {
width: 65%;
padding: 20px;
overflow-y: auto;
border-left: 1px solid #ddd;
background: rgba(250, 250, 250, 0.95);
} .smp-category-content {
display: none;
}
.smp-category-content.active {
display: block;
}
.smp-detail-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 1.5rem;
margin-bottom: 2.5rem;
border-bottom: 0.2rem solid #eee;
}
.smp-detail-title {
font-family: Comfortaa;
font-size: 2.4rem;
font-weight: 400;
}
.smp-see-all-btn {
font-size: 1.6rem;
text-decoration: none; }
.smp-see-all-btn:hover {
text-decoration: underline;
} .smp-item-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
list-style: none;
margin: 0;
padding: 0;
}
.smp-item-list li {
display: flex;
justify-content: left;
align-items: center;
text-align: left;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.smp-item-list li a {
padding: 0.5rem;
border-radius: 0.8rem;
display: inline-flex;
align-items: center;
text-decoration: none;
color: inherit;
font-weight: 500;
transition: all 400ms ease-in-out;
}
.smp-item-list li:hover a { font-weight: 700;
transform: scale(1.05); }
.smp-item-icon {
width: 3rem;
height: 3rem;
object-fit: cover;
margin-right: 0.5rem;
transition: all 400ms ease-in-out !important;
} .smp-close-btn {
position: absolute;
top: 1.5rem;
right: 1.5rem;
background: transparent;
border: none;
font-size: 2.8rem;
color: #555;
cursor: pointer;
}   .smp-toggle-btn {
position: fixed;
top: 50%;
transform: translateY(-50%);
border: none;
cursor: pointer;
z-index: 10000;
box-sizing: border-box !important;
padding: 1rem;
transition: all 0.3s ease;
}
.smp-toggle-btn.left {
left: 0;
border-radius: 0 0.4rem 0.4rem 0;
}
.smp-toggle-btn.right {
right: 0;
border-radius: 0.4rem 0 0 0.4rem;
} .smp-admin-wrap input[type="text"],
.smp-admin-wrap input[type="number"],
.smp-admin-wrap select {
padding: 0.5rem;
border: 0.1rem solid #ccc;
border-radius: 0.3rem;
width: 100%;
}
.smp-admin-wrap .smp-cat-preview img,
.smp-admin-wrap .smp-item-preview img {
max-width: 5rem; border: 0.1rem solid #ccc;
padding: 0.2rem;
border-radius: 0.3rem;
margin-top: 0.5rem;
}
.smp-cat-arrow::before {
content: "\25B6";
color: #4f5962;
font-size: 1em;      
transition: all 400ms ease-in-out;
}