/* singeronline.com menu css 08/04/2025 */
/* smenu css 12/11/2024 */

/*#site-header,
#site-inner,
#site-footer {
opacity: 1;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.page-smenu-active #site-header,
.page-smenu-active #site-inner,
.page-smenu-active #site-footer {
opacity: 0.2;
}*/

:root {
--smenu-width: 340px;
}
    
body.page-smenu-active > :not(#smenu) {
position: fixed;
top: 0;
left: 0;
opacity: 0.3;
/*overflow: hidden;*/
}

body.page-smenu-active.store-editor > center,
body.page-smenu-active #fcart {
display: none;
}

#smenu {
position: fixed;
z-index: 9;
top: 0;
bottom: 0;
left: calc((var(--smenu-width) + 5px) * -1);
width: var(--smenu-width);
overflow: hidden;
overflow-y: scroll;
color: #000;
color: #000000;
background: linear-gradient(0deg, #f7f7f7, #fff);
-webkit-transition: left 0.3s ease;
-moz-transition: left 0.3s ease;
-ms-transition: left 0.3s ease;
-o-transition: left 0.3s ease;
transition: left 0.3s ease;
}

#smenu.smenu-active {
left: 0;
box-shadow: 5px 0px 5px;
}

#smenu ul {
display: block;
margin: 0;
padding: 0;
}

/*
#smenu ul.smenu-top {}
*/

#smenu-cover {
position: absolute;
top: auto;
left: 0;
bottom: 0;
width: 100%;
background: #fff;
}

#smenu li {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0;
padding: 0;
border-bottom: 1px solid #d0d0d0;
background: #fff;
list-style: none;
}

#smenu li:first-child {
border-top: 1px solid #d0d0d0;
}

#smenu li a,
#smenu li .nav-name {
display: block;
overflow: hidden;
box-sizing: border-box;
height: 40px;
padding: 0 15px 0 15px;
color: #303030;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 16px;
line-height: 40px;
}

#smenu .smenu-sub {
position: absolute;
z-index: 1;
top: 0;
left: var(--smenu-width);
width: var(--smenu-width);
height: 100%;
background: #fff;
-webkit-transition: left 0.3s ease;
-moz-transition: left 0.3s ease;
-ms-transition: left 0.3s ease;
-o-transition: left 0.3s ease;
transition: left 0.3s ease;
}

#smenu .smenu-parent.smenu-active .smenu-sub {
left: 0;
}

#smenu .smenu-sub .smenu-sub-title {
justify-content: flex-start;
box-sizing: border-box;
border-width: 0 0 1px;
border-style: solid;
border-color: #d0d0d0;
background: #f0f0f0;
cursor: pointer;
}

#smenu .smenu-sub .smenu-sub-title a,
#smenu .smenu-sub .smenu-sub-title .nav-name {
color: #000;
}

#smenu .smenu-sub-control {
cursor: pointer;
}

#smenu .smenu-sub .smenu-sub-title .smenu-sub-control::before {
display: block;
width: 9px;
height: 9px;
margin: 16px 0 0 17px;
border-top: 2px solid #303030;
border-right: 2px solid #303030;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
content: '';
}

#smenu .smenu-parent > a {
max-width: calc(100% - 40px);
padding-right: 10px;
}

#smenu .smenu-parent-control {
width: 40px;
height: 40px;
cursor: pointer;
}

#smenu li.smenu-parent .smenu-parent-control::after {
display: block;
width: 9px;
height: 9px;
margin: 17px 0 0 13px;
border-bottom: 2px solid #303030;
border-left: 2px solid #303030;
cursor: pointer;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
content: '';
}

#smenu-close {
position: absolute;
z-index: 2;
top: 5px;
right: 0;
width: 40px;
height: 40px;
text-align: right;
cursor: pointer;
}

#smenu-close > span {
display: inline-block;
position: relative;
width: 20px;
height: 20px;
margin: 9px 15px 10px 0;
cursor: pointer;
}

/*
#smenu-close > span:hover {}
*/

#smenu-close > span::before,
#smenu-close > span::after {
display: block;
position: absolute;
left: 15px;
content: '';
height: 21px;
width: 1px;
background-color: #000;
}

#smenu-close > span::before {
transform: rotate(45deg);
}

#smenu-close > span::after {
transform: rotate(-45deg);
}

/* TITLE */

#smenu-title {
position: absolute;
top: 15px;
left: 15px;
color: #000;
opacity: 0.9;
font-weight: 500;
font-size: 18px;
line-height: 1;
}

/* CONTENT */

#smenu-content {
position: relative;
top: 50px;
}

/* BLURB */

#smenu-blurb,
#smenu-blurb > * {
display: none;
}

/* FOOTER */

#smenu-footer {
display: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
border-top: 1px solid #c0c0c0;
background: #fff;
}

/* .......... / .......... */