@media (max-width: 1024px) {
html {
margin-top: 0 !important;
padding-top: 0 !important;
}
body.admin-bar {
margin-top: 0 !important;
}
#wpadminbar {
display: none !important;
}
.smc-top {
top: 0 !important;
}
[data-header*="type-"] {
--header-height: 0px !important;
}
#header,
.ct-header {
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
}
@media (max-width: 1024px) {
html {
background-color: #111111 !important;
}
.smc-top {
isolation: isolate;
background-color: #111111 !important;
background-image: none !important;
}
.smc-top::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: #111111;
transform: translateZ(0);
backface-visibility: hidden;
}
.smc-top-inner {
position: relative;
z-index: 1;
grid-template-columns: 52px minmax(0, 1fr) !important;
gap: 10px !important;
}
#smc-social-wrap {
display: none !important;
}
.smc-top-actions {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
align-items: stretch !important;
justify-self: end !important;
justify-content: end !important;
gap: 0 !important;
}
.smc-top-action,
.smc-top-action-wrap {
width: 100% !important;
min-width: 0 !important;
height: var(--smc-top-height) !important;
}
.smc-top-action {
gap: 3px !important;
padding: 0 1px !important;
font-size: 10px !important;
line-height: 1.05 !important;
text-align: center;
}
.smc-top-action svg {
width: 29px !important;
height: 29px !important;
}
.smc-bottom {
grid-template-columns: repeat(3, 1fr) !important;
background: #eeeeee !important;
}
}
@media (max-width: 600px) {
.smc-top-inner {
grid-template-columns: 52px minmax(0, 1fr) !important;
gap: 8px !important;
padding: 0 10px !important;
}
.smc-logo-wrap,
.smc-logo {
width: 52px;
}
.smc-logo {
height: 52px;
}
.smc-logo img {
width: 50px;
height: 50px;
}
.smc-top-action {
font-size: 9.5px !important;
}
}
@media (max-width: 370px) {
.smc-top-inner {
grid-template-columns: 48px minmax(0, 1fr) !important;
gap: 5px !important;
padding: 0 7px !important;
}
.smc-logo-wrap,
.smc-logo {
width: 48px;
}
.smc-logo img {
width: 46px;
height: 46px;
}
.smc-top-action svg {
width: 27px !important;
height: 27px !important;
}
}
@media (max-width: 1024px) {
.smc-mobile-categories {
max-height: 78vh !important;
}
.smc-sheet-handle {
width: 66px !important;
height: 14px !important;
margin: 0 auto !important;
}
.smc-sheet-handle::before {
top: 4px !important;
width: 40px !important;
height: 4px !important;
}
.smc-mobile-categories-header {
min-height: 38px !important;
padding: 1px 12px 5px 15px !important;
}
.smc-mobile-categories-header strong {
font-size: 17px !important;
}
.smc-mobile-categories-close {
width: 31px !important;
height: 31px !important;
font-size: 19px !important;
}
.smc-mobile-category-list {
gap: 3px !important;
padding: 5px 10px 10px !important;
}
.smc-mobile-category-link {
min-height: 42px !important;
padding: 4px 8px !important;
border-radius: 8px !important;
font-size: 12.5px !important;
}
.smc-mobile-category-icon {
width: 31px !important;
height: 31px !important;
flex-basis: 31px !important;
margin-right: 9px !important;
border-radius: 8px !important;
}
.smc-mobile-category-icon svg {
width: 18px !important;
height: 18px !important;
}
}
@media (max-width: 600px) {
.smc-mobile-category-link {
min-height: 41px !important;
}
}
.smc-mobile-help {
display:
none;
}
@media (max-width: 1024px) {
#smc-help-panel {
display:
none !important;
}
.smc-mobile-help {
display:
block;
position:
fixed;
top:
var(--smc-top-height);
left:
50%;
width:
min(390px, calc(100vw - 18px));
max-height:
calc(
100vh
- var(--smc-top-height)
- var(--smc-bottom-height)
- 10px
);
box-sizing:
border-box;
background:
#ffffff;
color:
#1b1b1f;
border:
1px solid rgba(0,0,0,.10);
border-top:
0;
border-radius:
0 0 18px 18px;
box-shadow:
0 16px 34px rgba(0,0,0,.22);
z-index:
999999;
transform:
translate(-50%, -110%);
transition:
transform .28s ease;
overflow-y:
auto;
overscroll-behavior:
contain;
touch-action:
pan-x;
will-change:
transform;
}
.smc-mobile-help.is-open {
transform:
translate(-50%, 0);
}
.smc-mobile-help.is-dragging {
transition:
none !important;
user-select:
none;
-webkit-user-select:
none;
}
.smc-mobile-help-header {
display:
flex;
align-items:
center;
justify-content:
space-between;
min-height:
46px;
padding:
6px 12px 6px 16px;
box-sizing:
border-box;
border-bottom:
1px solid #ededf0;
}
.smc-mobile-help-header strong {
font-size:
18px;
font-weight:
750;
color:
#17171a;
}
.smc-mobile-help-close {
display:
flex;
align-items:
center;
justify-content:
center;
width:
34px;
height:
34px;
padding:
0;
border:
0;
border-radius:
50%;
background:
#f1f1f3;
color:
#222226;
font-family:
inherit;
font-size:
21px;
cursor:
pointer;
}
.smc-mobile-help-content {
padding:
10px 12px 8px;
box-sizing:
border-box;
}
.smc-mobile-help-contact {
display:
grid;
grid-template-columns:
minmax(0, .88fr)
minmax(0, 1.12fr);
gap:
7px;
padding-bottom:
10px;
margin-bottom:
9px;
border-bottom:
1px solid #ececef;
}
.smc-mobile-help-contact-card {
display:
flex;
align-items:
center;
gap:
7px;
min-width:
0;
min-height:
58px;
padding:
7px 8px;
box-sizing:
border-box;
border:
1px solid #dcdce1;
border-radius:
10px;
background:
#ffffff;
color:
#1b1b1f;
text-decoration:
none;
}
.smc-mobile-help-contact-icon {
display:
flex;
align-items:
center;
justify-content:
center;
flex:
0 0 34px;
width:
34px;
height:
34px;
border-radius:
50%;
color:
#ffffff;
}
.smc-mobile-help-whatsapp
.smc-mobile-help-contact-icon {
background:
#20c96b;
}
.smc-mobile-help-email
.smc-mobile-help-contact-icon {
background:
#bf2432;
}
.smc-mobile-help-contact-icon svg {
width:
18px;
height:
18px;
}
.smc-mobile-help-contact-text {
display:
flex;
flex-direction:
column;
min-width:
0;
flex:
1 1 auto;
}
.smc-mobile-help-contact-text strong {
color:
#17171a;
font-size:
12.5px;
font-weight:
750;
line-height:
1.05;
}
.smc-mobile-help-contact-text small {
display:
block;
margin-top:
4px;
color:
#333338;
font-size:
10.7px;
font-weight:
700;
line-height:
1.05;
white-space:
nowrap;
overflow:
hidden;
text-overflow:
ellipsis;
}
.smc-mobile-help-links {
display:
grid;
grid-template-columns:
1fr;
gap:
6px;
}
.smc-mobile-help-link {
display:
flex;
align-items:
center;
gap:
9px;
min-height:
48px;
padding:
6px 9px;
box-sizing:
border-box;
border:
1px solid #e5e5e8;
border-radius:
9px;
background:
#ffffff;
color:
#222226;
text-decoration:
none;
font-size:
13px;
font-weight:
650;
}
.smc-mobile-help-link-icon {
display:
flex;
align-items:
center;
justify-content:
center;
flex:
0 0 34px;
width:
34px;
height:
34px;
border-radius:
50%;
background:
#f4efe5;
color:
#b28126;
}
.smc-mobile-help-link-icon svg {
width:
18px;
height:
18px;
}
.smc-mobile-help-link-arrow {
margin-left:
auto;
color:
#a0a0a6;
}
.smc-mobile-help-link-arrow svg {
width:
17px;
height:
17px;
}
.smc-mobile-help-handle {
width:
44px;
height:
5px;
margin:
10px auto 2px;
border-radius:
20px;
background:
#c2c2c7;
}
.smc-top-actions {
width:
198px !important;
max-width:
calc(100vw - 80px) !important;
justify-self:
end !important;
grid-template-columns:
repeat(3, minmax(0, 1fr)) !important;
gap:
0 !important;
}
.smc-top-action {
padding:
0 1px !important;
}
}
@media (max-width: 600px) {
.smc-top-actions {
width:
186px !important;
max-width:
calc(100vw - 72px) !important;
}
}
@media (max-width: 370px) {
.smc-top-actions {
width:
174px !important;
max-width:
calc(100vw - 66px) !important;
}
.smc-mobile-help-contact-text small {
font-size:
9.8px;
}
}
@media (max-width: 1024px) {
.smc-mobile-help-contact-icon svg {
width:
18px !important;
height:
18px !important;
fill:
none !important;
stroke:
currentColor !important;
stroke-width:
1.9 !important;
stroke-linecap:
round !important;
stroke-linejoin:
round !important;
}
.smc-mobile-help-section-title {
margin:
2px 2px 8px !important;
color:
#17171a;
font-size:
16px;
font-weight:
750;
line-height:
1.15;
}
.smc-mobile-help-contact {
margin-bottom:
12px !important;
padding-bottom:
12px !important;
border-bottom:
1px solid #e6e6ea !important;
}
.smc-mobile-help-link-icon svg,
.smc-mobile-help-link-arrow svg {
fill:
none !important;
stroke:
currentColor !important;
stroke-width:
1.8 !important;
stroke-linecap:
round !important;
stroke-linejoin:
round !important;
}
.smc-mobile-help-links {
gap:
6px !important;
}
}
@media (max-width: 1024px) {
.smc-top-action,
.smc-top-action > span,
.smc-bottom-item,
.smc-bottom-item > span {
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif !important;
}
}