:root {
--smc-black: #111111;
--smc-red: #A11217;
--smc-red-bright: #D71920;
--smc-gold: #A67C2D;
--smc-white: #ffffff;
--smc-text: #222222;
--smc-border: #e7e3dc;
--smc-soft: #faf8f4;
--smc-top-height: 74px;
--smc-bottom-height: 74px;
}
#header,
.ct-header {
display: none !important;
}
body {
padding-top:
var(--smc-top-height) !important;
}
.smc-top,
.smc-bottom,
.smc-mobile-backdrop,
.smc-mobile-categories,
.smc-mobile-search,
.smc-top-action-panel {
font-family:
"Poppins",
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
}
.smc-bottom,
.smc-mobile-backdrop,
.smc-mobile-categories,
.smc-mobile-search {
display: none;
}
.smc-top svg,
.smc-bottom svg,
.smc-mobile-categories svg,
.smc-mobile-search svg,
.smc-top-action-panel svg {
display: block;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.smc-top {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: var(--smc-top-height);
background: var(--smc-black);
color: var(--smc-white);
z-index: 1000000;
box-sizing: border-box;
border-bottom:
0;
box-shadow:
0 2px 10px rgba(0,0,0,0.16);
}
.smc-top-inner {
width: 100%;
height: 100%;
max-width: 1600px;
margin:
0 auto;
padding:
0 26px;
box-sizing:
border-box;
display: grid;
grid-template-columns:
1fr auto 1fr;
align-items:
center;
gap:
20px;
}
.smc-logo-wrap {
justify-self:
start;
display:
flex;
align-items:
center;
}
.smc-logo {
display:
flex;
align-items:
center;
justify-content:
center;
width:
52px;
height:
52px;
text-decoration:
none;
}
.smc-logo img {
display:
block;
width:
50px;
height:
50px;
object-fit:
contain;
}
.smc-logo-fallback {
display:
flex;
align-items:
center;
justify-content:
center;
width:
46px;
height:
46px;
border-radius:
50%;
border:
2px solid #ffffff;
color:
#ffffff;
font-size:
16px;
font-weight:
700;
}
.smc-desktop-nav {
justify-self:
center;
display:
flex;
align-items:
stretch;
height:
var(--smc-top-height);
}
.smc-desktop-link,
.smc-desktop-button {
position:
relative;
display:
flex;
align-items:
center;
justify-content:
center;
height:
100%;
padding:
0 20px;
box-sizing:
border-box;
border:
0;
background:
transparent;
color:
#ffffff;
text-decoration:
none;
font-family:
inherit;
font-size:
15px;
font-weight:
600;
letter-spacing:
0.1px;
cursor:
pointer;
transition:
background 0.18s ease,
color 0.18s ease;
}
.smc-desktop-link:hover,
.smc-desktop-button:hover {
color:
#ffffff;
background:
rgba(255,255,255,0.07);
}
.smc-desktop-link.is-active::after,
.smc-desktop-button.is-active::after {
content:
"";
position:
absolute;
left:
20px;
right:
20px;
bottom:
8px;
height:
2px;
border-radius:
20px;
background:
var(--smc-gold);
}
.smc-desktop-categories {
position:
relative;
height:
100%;
}
.smc-desktop-categories-button {
gap:
8px;
}
.smc-chevron {
width:
16px !important;
height:
16px !important;
transition:
transform 0.18s ease;
}
.smc-desktop-categories:hover .smc-chevron,
.smc-desktop-categories.is-pinned .smc-chevron {
transform:
rotate(180deg);
}
.smc-desktop-categories-dropdown {
position:
absolute;
top:
calc(100% - 1px);
left:
50%;
width:
350px;
padding:
10px;
box-sizing:
border-box;
background:
#ffffff;
border:
1px solid rgba(0,0,0,0.08);
border-radius:
0 0 14px 14px;
box-shadow:
0 18px 38px rgba(0,0,0,0.18);
opacity:
0;
visibility:
hidden;
pointer-events:
none;
transform:
translate(-50%, -8px);
transition:
opacity 0.18s ease,
visibility 0.18s ease,
transform 0.18s ease;
}
.smc-desktop-categories:hover
.smc-desktop-categories-dropdown,
.smc-desktop-categories.is-pinned
.smc-desktop-categories-dropdown {
opacity:
1;
visibility:
visible;
pointer-events:
auto;
transform:
translate(-50%, 0);
}
.smc-category-menu-item {
display:
flex;
align-items:
center;
min-height:
58px;
padding:
9px 11px;
box-sizing:
border-box;
border-radius:
9px;
color:
var(--smc-text);
text-decoration:
none;
transition:
background 0.16s ease,
color 0.16s ease;
}
.smc-category-menu-item:hover {
background:
var(--smc-soft);
color:
var(--smc-red);
}
.smc-category-menu-icon {
flex:
0 0 auto;
display:
flex;
align-items:
center;
justify-content:
center;
width:
40px;
height:
40px;
margin-right:
12px;
border-radius:
9px;
background:
rgba(166,124,45,0.10);
color:
var(--smc-gold);
}
.smc-category-menu-icon svg {
width:
24px;
height:
24px;
}
.smc-category-menu-all {
margin-bottom:
3px;
}
.smc-category-menu-all .smc-category-menu-icon {
background:
rgba(161,18,23,0.08);
color:
var(--smc-red);
}
.smc-category-menu-label {
flex:
1;
font-size:
14px;
font-weight:
600;
line-height:
1.25;
}
.smc-category-menu-arrow {
color:
#a7a7a7;
font-size:
20px;
line-height:
1;
}
.smc-desktop-search-wrap {
position:
relative;
height:
100%;
}
.smc-desktop-search-button {
width:
auto;
min-width:
104px;
padding:
0 20px;
gap:
8px;
}
.smc-desktop-search-button svg {
width:
21px;
height:
21px;
flex:
0 0 auto;
}
.smc-desktop-search-button span {
display:
inline-block;
white-space:
nowrap;
}
.smc-desktop-search-panel {
position:
absolute;
top:
calc(100% - 1px);
left:
50%;
width:
390px;
padding:
14px;
box-sizing:
border-box;
background:
#ffffff;
border:
1px solid rgba(0,0,0,0.08);
border-radius:
0 0 12px 12px;
box-shadow:
0 14px 34px rgba(0,0,0,0.18);
opacity:
0;
visibility:
hidden;
pointer-events:
none;
transform:
translate(-50%, -8px);
transition:
opacity 0.18s ease,
visibility 0.18s ease,
transform 0.18s ease;
}
.smc-desktop-search-wrap.is-open
.smc-desktop-search-panel {
opacity:
1;
visibility:
visible;
pointer-events:
auto;
transform:
translate(-50%, 0);
}
.smc-desktop-search-form {
display:
flex;
align-items:
center;
gap:
8px;
}
.smc-desktop-search-form input[type="search"] {
flex:
1;
min-width:
0;
height:
46px;
padding:
0 14px;
box-sizing:
border-box;
border:
1px solid #cccccc;
border-radius:
7px;
font-family:
inherit;
font-size:
15px;
outline:
none;
}
.smc-desktop-search-form input[type="search"]:focus {
border-color:
var(--smc-red);
box-shadow:
0 0 0 2px rgba(161,18,23,0.10);
}
.smc-desktop-search-form button {
height:
46px;
padding:
0 18px;
border:
0;
border-radius:
7px;
background:
var(--smc-red);
color:
#ffffff;
font-family:
inherit;
font-size:
13px;
font-weight:
700;
cursor:
pointer;
}
.smc-top-actions {
justify-self:
end;
display:
flex;
align-items:
center;
gap:
11px;
}
.smc-top-action {
position:
relative;
display:
flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
min-width:
48px;
gap:
2px;
padding:
0;
border:
0;
background:
transparent;
color:
#ffffff;
text-decoration:
none;
font-family:
inherit;
font-size:
10px;
font-weight:
600;
line-height:
1.15;
cursor:
pointer;
transition:
opacity 0.18s ease,
color 0.18s ease;
}
.smc-top-action:hover {
color:
#ffffff;
opacity:
0.82;
}
.smc-top-action svg {
width:
24px;
height:
24px;
}
.smc-top-action-wrap {
position: relative;
display: flex;
align-items: stretch;
height: var(--smc-top-height);
}
.smc-top-action-wrap > .smc-top-action {
height: 100%;
}
.smc-top-action.is-open {
opacity: 1;
color: #ffffff;
}
.smc-top-action-panel {
position: absolute;
top: calc(100% - 1px);
right: 0;
width: 330px;
max-height: min(620px, calc(100vh - var(--smc-top-height) - 24px));
overflow-y: auto;
padding: 14px;
box-sizing: border-box;
background: #ffffff;
border:
1px solid rgba(0,0,0,0.09);
border-radius:
0 0 14px 14px;
box-shadow:
0 18px 38px rgba(0,0,0,0.20);
color:
#222222;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform:
translateY(-8px);
transition:
opacity 0.18s ease,
visibility 0.18s ease,
transform 0.18s ease;
z-index:
1000002;
}
.smc-top-action-wrap.is-open
.smc-top-action-panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform:
translateY(0);
}
@media (min-width: 1025px) {
#smc-help-wrap > .smc-top-action-panel {
left: 50%;
right: auto;
transform: translate(-50%, -8px);
}
#smc-help-panel .smc-contact-list {
grid-template-columns: 1fr;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #ececef;
}
#smc-help-wrap:hover > .smc-top-action-panel,
#smc-help-wrap.is-open > .smc-top-action-panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
}
#smc-help-wrap:hover > .smc-top-action {
opacity: 1;
color: #ffffff;
}
}
.smc-top-panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.smc-top-panel-title {
margin: 0;
color: #111111;
font-size: 19px;
font-weight: 700;
line-height: 1.2;
}
.smc-top-panel-text {
margin: 4px 0 0;
color: #6d6d72;
font-size: 12px;
line-height: 1.4;
}
.smc-top-panel-close {
display: none;
flex:
0 0 auto;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 50%;
background: #f2f2f3;
color: #222222;
font-family: inherit;
font-size: 21px;
cursor: pointer;
}
.smc-help-list {
display: grid;
grid-template-columns: 1fr;
gap: 7px;
}
.smc-help-link {
display: flex;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 8px 10px;
box-sizing: border-box;
border:
1px solid #e8e8ea;
border-radius:
9px;
background:
#ffffff;
color:
#242428;
text-decoration:
none;
font-size:
13px;
font-weight:
600;
transition:
background-color 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
.smc-help-link:hover {
background: #faf7f1;
border-color: rgba(166,124,45,.38);
color: var(--smc-red);
}
.smc-help-link-icon {
flex: 0 0 34px;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background:
rgba(166,124,45,.11);
color:
var(--smc-gold);
}
.smc-help-link-icon svg {
width: 18px;
height: 18px;
}
.smc-help-link > span:nth-child(2) {
flex: 1;
min-width: 0;
}
.smc-help-link-arrow {
color: #a5a5aa;
}
.smc-help-link-arrow svg {
width: 16px;
height: 16px;
}
.smc-contact-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.smc-social-list {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.smc-contact-link {
min-width: 0;
min-height: 64px;
display: flex;
align-items: center;
gap: 9px;
padding: 9px 10px;
box-sizing: border-box;
border:
1px solid #e8e8ea;
border-radius:
10px;
background:
#ffffff;
color:
#222222;
text-decoration:
none;
transition:
transform 0.15s ease,
box-shadow 0.15s ease,
border-color 0.15s ease;
}
.smc-contact-link:hover {
transform: translateY(-1px);
border-color:
#d6d6da;
box-shadow:
0 7px 18px rgba(0,0,0,.07);
color:
#222222;
}
.smc-contact-icon {
flex: 0 0 36px;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
color: #ffffff;
}
.smc-contact-icon svg {
width: 19px;
height: 19px;
}
.smc-contact-link-text {
min-width: 0;
}
.smc-contact-link-text strong {
display: block;
color: #202024;
font-size: 12px;
font-weight: 700;
line-height: 1.15;
}
.smc-contact-link-text small {
display: block;
margin-top: 3px;
overflow: hidden;
color: #77777d;
font-size: 10.5px;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.smc-contact-whatsapp .smc-contact-icon {
background: #25D366;
}
.smc-contact-email .smc-contact-icon {
background: var(--smc-red);
}
.smc-contact-instagram .smc-contact-icon {
background:
linear-gradient(
135deg,
#f9ce34 0%,
#ee2a7b 48%,
#6228d7 100%
);
}
.smc-contact-facebook .smc-contact-icon {
background: #1877F2;
}
.smc-contact-tiktok .smc-contact-icon {
background: #111111;
box-shadow:
inset 3px 0 0 #25F4EE,
inset -3px 0 0 #FE2C55;
}
@media (min-width: 1025px) {
body.admin-bar {
padding-top:
var(--smc-top-height) !important;
}
body.admin-bar .smc-top {
top:
32px;
}
}
@media (max-width: 1024px) {
[data-header*="type-"] {
--header-height: 0px !important;
}
html {
margin-top:
0 !important;
}
body {
padding-top:
var(--smc-top-height) !important;
padding-bottom:
var(--smc-bottom-height) !important;
}
body.admin-bar #wpadminbar {
display:
none !important;
}
.smc-top-inner {
display:
grid;
grid-template-columns:
1fr auto;
padding:
0 18px;
gap:
16px;
}
.smc-logo-wrap {
justify-self:
start;
}
.smc-desktop-nav {
display:
none !important;
}
.smc-top-actions {
justify-self:
end;
gap:
6px;
justify-content:
center;
}
.smc-top-action {
min-width:
40px;
font-size:
8.5px;
}
.smc-top-action svg {
width:
22px;
height:
22px;
}
.smc-top-action-wrap {
height:
var(--smc-top-height);
}
.smc-top-action-panel {
position:
fixed;
top:
var(--smc-top-height);
left:
50%;
right:
auto;
width:
min(360px, calc(100vw - 24px));
max-height:
calc(
100vh
- var(--smc-top-height)
- var(--smc-bottom-height)
- 24px
);
border-radius:
0 0 16px 16px;
transform:
translate(-50%, -12px);
z-index:
999999;
}
.smc-top-action-wrap.is-open
.smc-top-action-panel {
transform:
translate(-50%, 0);
}
.smc-top-panel-close {
display:
flex;
}
.smc-top-panel-header {
position:
relative;
align-items:
center;
padding-right:
42px;
}
.smc-top-panel-header > div:first-child {
width:
100%;
text-align:
center;
}
.smc-top-panel-close {
position:
absolute;
top:
0;
right:
0;
}
.smc-contact-list,
.smc-social-list,
.smc-help-list {
grid-template-columns:
1fr;
}
.smc-contact-link,
.smc-help-link {
width:
100%;
}
.smc-contact-link-text small {
white-space:
normal;
text-overflow:
clip;
}
.smc-bottom {
display:
grid;
grid-template-columns:
repeat(4, 1fr);
position:
fixed;
left:
0;
right:
0;
bottom:
0;
width:
100%;
height:
var(--smc-bottom-height);
background:
#ffffff;
z-index:
1000000;
border-top:
1px solid rgba(0,0,0,0.12);
box-shadow:
0 -3px 14px rgba(0,0,0,0.10);
padding-bottom:
env(safe-area-inset-bottom);
box-sizing:
border-box;
}
.smc-bottom-item {
position:
relative;
display:
flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
gap:
4px;
padding:
0;
border:
0;
background:
transparent;
color:
#222222;
text-decoration:
none;
font-family:
inherit;
font-size:
11px;
font-weight:
600;
cursor:
pointer;
-webkit-tap-highlight-color:
transparent;
}
.smc-bottom-item svg {
width:
26px;
height:
26px;
}
.smc-bottom-item.is-active {
color:
var(--smc-red);
}
.smc-bottom-item.is-active::after {
content:
"";
position:
absolute;
bottom:
7px;
width:
22px;
height:
2px;
border-radius:
10px;
background:
var(--smc-gold);
}
.smc-mobile-backdrop {
position:
fixed;
top:
var(--smc-top-height);
left:
0;
right:
0;
bottom:
var(--smc-bottom-height);
background:
rgba(0,0,0,0.40);
z-index:
999997;
}
.smc-mobile-backdrop.is-open {
display:
block;
}
.smc-mobile-categories {
display:
block;
position:
fixed;
left:
0;
right:
0;
bottom:
var(--smc-bottom-height);
width:
100%;
max-height:
72vh;
background:
#ffffff;
z-index:
999999;
border-radius:
18px 18px 0 0;
box-shadow:
0 -8px 30px rgba(0,0,0,0.18);
box-sizing:
border-box;
transform:
translateY(110%);
transition:
transform 0.28s ease;
overflow-y:
auto;
overscroll-behavior:
contain;
}
.smc-mobile-categories.is-open {
transform:
translateY(0);
}
.smc-sheet-handle {
position:
relative;
width:
86px;
height:
28px;
margin:
0 auto;
background:
transparent;
cursor:
grab;
touch-action:
none;
-webkit-user-select:
none;
user-select:
none;
}
.smc-sheet-handle::before {
content:
"";
position:
absolute;
left:
50%;
top:
10px;
width:
46px;
height:
5px;
transform:
translateX(-50%);
border-radius:
20px;
background:
#c7c7c7;
transition:
width 0.16s ease,
background-color 0.16s ease;
}
.smc-sheet-handle:active {
cursor:
grabbing;
}
.smc-sheet-handle:active::before {
width:
56px;
background:
#9e9e9e;
}
.smc-mobile-categories {
touch-action:
pan-x;
}
.smc-mobile-categories.is-dragging {
transition:
none !important;
user-select:
none;
-webkit-user-select:
none;
}
.smc-mobile-categories-header {
display:
flex;
align-items:
center;
justify-content:
space-between;
padding:
12px 18px 12px 20px;
border-bottom:
1px solid #eeeeee;
}
.smc-mobile-categories-header strong {
font-size:
20px;
font-weight:
700;
color:
#111111;
}
.smc-mobile-categories-close {
display:
flex;
align-items:
center;
justify-content:
center;
width:
40px;
height:
40px;
border:
0;
border-radius:
50%;
background:
#f2f2f2;
color:
#222222;
font-size:
24px;
cursor:
pointer;
}
.smc-mobile-category-list {
display:
grid;
grid-template-columns:
1fr;
gap:
9px;
padding:
14px 14px 20px 14px;
}
.smc-mobile-category-link {
display:
flex;
align-items:
center;
min-height:
62px;
padding:
9px 12px;
box-sizing:
border-box;
border:
1px solid var(--smc-border);
border-radius:
11px;
background:
#ffffff;
color:
var(--smc-text);
text-decoration:
none;
font-size:
14px;
font-weight:
600;
line-height:
1.25;
-webkit-tap-highlight-color:
transparent;
transition:
transform 0.10s ease,
background-color 0.12s ease,
border-color 0.12s ease,
color 0.12s ease,
box-shadow 0.12s ease;
}
.smc-mobile-category-link:active,
.smc-mobile-category-link.is-pressed {
transform:
scale(0.985);
background:
#f7f1e7;
border-color:
rgba(166,124,45,0.55);
color:
var(--smc-red);
box-shadow:
inset 0 0 0 1px rgba(166,124,45,0.12);
}
.smc-mobile-category-icon {
flex:
0 0 auto;
display:
flex;
align-items:
center;
justify-content:
center;
width:
40px;
height:
40px;
margin-right:
12px;
border-radius:
9px;
background:
rgba(166,124,45,0.10);
color:
var(--smc-gold);
transition:
transform 0.12s ease,
background-color 0.12s ease,
color 0.12s ease;
}
.smc-mobile-category-link:active
.smc-mobile-category-icon,
.smc-mobile-category-link.is-pressed
.smc-mobile-category-icon {
transform:
scale(0.92);
background:
rgba(161,18,23,0.10);
color:
var(--smc-red);
}
.smc-mobile-category-icon svg {
width:
24px;
height:
24px;
}
@media (min-width: 600px) {
.smc-mobile-category-list {
grid-template-columns:
repeat(2, 1fr);
}
}
.smc-mobile-search {
position:
fixed;
left:
0;
right:
0;
bottom:
var(--smc-bottom-height);
width:
100%;
z-index:
999999;
background:
#ffffff;
padding:
15px;
box-sizing:
border-box;
border-radius:
16px 16px 0 0;
box-shadow:
0 -5px 20px rgba(0,0,0,0.14);
}
.smc-mobile-search.is-open {
display:
block;
}
body.smc-mobile-search-focused
.smc-bottom {
visibility:
hidden;
pointer-events:
none;
transform:
translateY(100%);
}
body.smc-mobile-search-focused
.smc-mobile-search {
bottom:
0;
}
.smc-mobile-search-form {
display:
flex;
align-items:
center;
width:
100%;
gap:
8px;
}
.smc-mobile-search-form input[type="search"] {
flex:
1;
min-width:
0;
height:
48px;
padding:
0 14px;
box-sizing:
border-box;
border:
1px solid #cccccc;
border-radius:
7px;
font-family:
inherit;
font-size:
16px;
outline:
none;
}
.smc-mobile-search-form input[type="search"]:focus {
border-color:
var(--smc-red);
}
.smc-mobile-search-form button {
height:
48px;
padding:
0 18px;
border:
0;
border-radius:
7px;
background:
var(--smc-red);
color:
#ffffff;
font-family:
inherit;
font-size:
14px;
font-weight:
700;
}
body.smc-mobile-panel-open {
overflow:
hidden !important;
}
}
@media (max-width: 390px) {
.smc-top-inner {
padding:
0 12px;
}
.smc-top-actions {
gap:
3px;
justify-content:
center;
}
.smc-top-action {
min-width:
37px;
font-size:
8px;
}
.smc-top-action svg {
width:
21px;
height:
21px;
}
.smc-contact-list {
gap:
6px;
}
.smc-contact-link {
min-height:
59px;
padding:
7px;
}
.smc-contact-icon {
flex-basis:
31px;
width:
31px;
height:
31px;
}
.smc-contact-link-text strong {
font-size:
11px;
}
.smc-contact-link-text small {
font-size:
9.5px;
}
}