*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--primary-color: #d0011b;
--text-light: #e6e6e6;
--text-dark: #111;
--max-width: 1200px;
--header-height: 120px;
}
body {
line-height: 1.6;
padding-top: calc(var(--header-height) + env(safe-area-inset-top));
}
.rtd-header {
width: 100%;
z-index: 1200;
position: fixed;
top: 0;
left: 0;
background-color: var(--primary-color);
height: calc(var(--header-height) + env(safe-area-inset-top));
box-shadow: 0 3px 5px rgb(0 0 0 / 30%);
padding-top: env(safe-area-inset-top);
}
.rtd-container {
max-width: var(--max-width);
margin: 0 auto;
padding-left: 5px;
display: flex;
align-items: center;
}
.rtd-top-bar {
padding: 8px 0;
color: var(--text-light);
height: 30px;
}
.rtd-top-left {
display: flex;
align-items: center;
}
.rtd-top-left a,
.rtd-top-right a {
color: #e6e6e6;
text-decoration: none;
margin: 0;
font-size: 13px;
}
.rtd-top-left a:focus,
.rtd-top-right a:focus,
.rtd-top-left a:visited,
.rtd-top-right a:visited .rtd-top-left a:active,
.rtd-top-right a:active {
color: #e6e6e6;
}
.rtd-top-left a:hover,
.rtd-top-right a:hover {
color: #fff;
}
.rtd-top-left a img,
.rtd-top-right a img {
opacity: 0.9;
}
.rtd-top-left a:hover img,
.rtd-top-right a:hover img {
opacity: 1;
}
.rtd-top-right {
display: flex;
align-items: center;
margin-left: auto;
}
.rtd-main-header {
height: 90px;
}
.rtd-main-header .rtd-container {
height: 100%;
position: relative;
}
.rtd-logo {
margin-right: 20px;
}
.rtd-logo img {
min-width: 60px !important;
min-height: 74px !important;
}
.rtd-nav {
display: flex;
align-items: center;
flex: 1;
height: 100%;
}
.rtd-menu-wrapper {
position: relative;
height: 100%;
display: flex;
align-items: center;
width: 22%;
min-width: 195px;
}
.rtd-menu-wrapper::after {
content: "";
position: absolute;
width: 100%;
height: 20px;
bottom: -2px;
left: 0;
z-index: 99;
}
.rtd-menu-toggle,
.rtd-menu-toggle a {
background: none;
border: none;
color: #fff;
cursor: pointer;
font-size: 15px;
font-weight: 700;
padding: 8px 15px;
display: flex;
align-items: center;
text-transform: initial;
}
.rtd-menu-toggle a {
padding: 0;
}
.rtd-menu-toggle:hover,
.rtd-menu-toggle:focus,
.rtd-menu-toggle:active,
.rtd-menu-toggle a:hover,
.rtd-menu-toggle a:focus,
.rtd-menu-toggle a:active {
color: #fff;
background: none;
outline: none;
}
.rtd-menu-toggle:after {
content: "▼";
margin-left: 5px;
font-size: 12px;
}
.rtd-dropdown {
position: fixed;
top: 120px;
left: 50%;
transform: translateX(-50%);
width: 1200px;
z-index: 100;
background: #fff;
box-shadow: 0 3px 10px rgb(0 0 0 / 0.1);
display: none;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 20px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
margin-top: 0;
}
.rtd-menu-wrapper:hover .rtd-dropdown,
.rtd-dropdown:hover {
display: grid;
}
.rtd-dropdown-section h4 {
margin-top: 0;
margin-bottom: 10px;
font-size: 16px;
font-weight: 700;
color: var(--primary-color);
padding-bottom: 12px;
border-bottom: 1px solid rgb(85 85 85 / 0.5);
}
.rtd-dropdown-section .first {
padding-top: 5px;
}
.rtd-dropdown-section li {
padding-top: 3px;
}
.rtd-dropdown-section h4 a {
text-decoration: none;
color: #555;
display: flex;
align-items: center;
}
.rtd-dropdown-section h4 i {
margin-right: 8px;
}
.rtd-dropdown-section ul {
list-style: none;
padding: 0;
margin: 0;
}
.rtd-dropdown-section ul li {
margin-bottom: 8px;
}
.rtd-dropdown-section ul li a {
text-decoration: none;
color: #666;
font-size: 14px;
transition: color 0.2s;
}
.rtd-dropdown-section ul li a:hover {
color: #666;
}
.rtd-search {
width: 100%;
}
.rtd-custom-cart {
width: 43px;
margin-right: 20px;
margin-left: 20px;
}
.rtd-mobile-menu,
.rtd-mobile-search,
.rtd-mobile-cart {
display: none;
}
@media (max-width: 1200px) {
.rtd-dropdown {
width: 100%;
max-width: 1200px;
}
}
@media (max-width: 804px) {
.rtd-logo {
margin-right: auto;
}
.rtd-nav {
display: none;
}
.rtd-mobile-menu {
display: block;
}
.rtd-mobile-search {
width: 100%;
margin-top: 10px;
}
}
@media (max-width: 804px) {
.rtd-top-bar {
display: none;
}
:root {
--header-height: 74px;
}
.rtd-header {
height: var(--header-height);
}
.rtd-main-header {
height: var(--header-height);
}
.rtd-logo {
display: none;
}
.rtd-main-header .rtd-container {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
padding: 0 10px;
align-items: center;
}
.rtd-mobile-menu {
display: flex;
justify-content: flex-start;
align-items: center;
}
.rtd-mobile-search {
display: block !important;
width: 100%;
margin-top: 0;
}
.rtd-mobile-search .dgwt-wcas-search-wrapp {
min-width: 100px;
max-width: 100%;
}
.rtd-mobile-cart {
display: block;
padding-top: 8px;
padding-right: 6px;
margin-right: 10px;
}
}
.admin-bar .rtd-header {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar .rtd-header {
top: 46px;
}
}
.navbar__link-separator {
border-right: 1px solid hsl(0 0% 100% / 0.6);
margin-right: 7px;
margin-left: 7px;
height: 14px;
}
.elementor-20583 .elementor-element.elementor-element-6fe46ce1 .uael-mc__btn {
padding: 0 0 0 0px !important;
font-size: 30px !important;
color: #ffffff !important;
}
.elementor-20583 .elementor-element.elementor-element-6fe46ce1 .uael-mc__btn-text {
margin-right: 0px !important;
}
.elementor-20583 .elementor-element.elementor-element-6fe46ce1 .uael-mc__btn-inner-text {
margin-right: 0px !important;
}
.rtd-user-order {
color: var(--text-light);
text-decoration: none;
margin: 0 5px;
font-size: 13px;
}
.rtd-user-menu-wrapper {
position: relative;
display: inline-block;
margin-left: 5px;
}
.rtd-user-toggle {
color: var(--text-light);
text-decoration: none;
font-size: 13px;
display: flex;
align-items: center;
cursor: pointer;
}
.rtd-user-toggle img {
width: 23px;
border-radius: 50%;
margin-right: 5px;
}
.rtd-dropdown-arrow {
font-size: 10px;
margin-left: 3px;
}
.rtd-user-dropdown {
position: absolute;
top: 30px;
right: 0;
background-color: #fff;
min-width: 160px;
box-shadow: 0 4px 8px rgb(0 0 0 / 0.1);
border-radius: 4px;
padding: 8px 0;
z-index: 1100;
display: none;
list-style-type: none;
margin: 0;
}
.rtd-user-dropdown::before {
content: "";
position: absolute;
top: -8px;
right: 20px;
z-index: -1;
border-left: 15px solid #fff0;
border-right: 15px solid #fff0;
border-bottom: 12px solid #fff;
}
.rtd-user-menu-wrapper::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30px;
background: #fff0;
z-index: 1099;
}
.rtd-user-dropdown li {
padding: 0;
margin: 0;
}
.rtd-user-dropdown li a {
color: var(--text-dark);
padding: 8px 16px;
text-decoration: none;
display: block;
font-size: 14px;
}
.rtd-user-dropdown li a:hover {
background-color: #f5f5f5;
color: var(--primary-color);
}
.rtd-user-menu-wrapper:hover .rtd-user-dropdown {
display: block;
}
@media (max-width: 804px) {
.rtd-user-toggle {
font-size: 12px;
}
.rtd-user-toggle img {
width: 21px;
height: 21px;
}
}
#mobile-home-icon {
font-size: 25px;
color: #fff;
padding-left: 10px;
}
.rtd-mobile-home-link {
text-decoration: none;
background: none;
-webkit-tap-highlight-color: #fff0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.rtd-mobile-home-link:hover,
.rtd-mobile-home-link:active,
.rtd-mobile-home-link:focus {
background: none;
outline: none;
text-decoration: none;
}
.rtd-mobile-home-link:active #mobile-home-icon {
color: #fff;
opacity: 0.8;
}
.rtd-search-overlay {
display: none;
position: fixed;
top: var(--header-height, 160px);
left: 0;
right: 0;
bottom: 0;
background: rgb(0 0 0 / 0.5);
z-index: 3;
opacity: 0;
transition: opacity 0.3s ease;
}
.rtd-search-overlay.active {
display: block;
opacity: 1;
}
.dgwt-wcas-suggestions-wrapp {
z-index: 1200 !important;
}
.rtd-bottom-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 1px solid #e0e0e0;
box-shadow: 0 -2px 10px rgb(0 0 0 / 0.1);
z-index: 5;
height: 65px;
padding-bottom: env(safe-area-inset-bottom);
height: calc(65px + env(safe-area-inset-bottom));
}
.rtd-bottom-nav-container {
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
max-width: 600px;
margin: 0 auto;
padding: 0 5px;
}
.rtd-bottom-nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
color: #666;
transition: all 0.3s ease;
padding: 8px 5px;
position: relative;
-webkit-tap-highlight-color: #fff0;
}
.rtd-bottom-nav-item:active {
transform: scale(0.95);
}
.rtd-bottom-nav-item i {
font-size: 22px;
margin-bottom: 4px;
transition: all 0.3s ease;
}
.rtd-bottom-nav-item span {
font-size: 11px;
font-weight: 500;
transition: all 0.3s ease;
}
.rtd-bottom-nav-item.active {
color: #c8102e;
}
.rtd-bottom-nav-item.active i {
color: #c8102e;
transform: scale(1.1);
}
@media (hover: hover) {
.rtd-bottom-nav-item:hover {
color: #c8102e;
}
.rtd-bottom-nav-item:hover i {
transform: scale(1.1);
}
}
.rtd-bottom-category-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: calc(65px + env(safe-area-inset-bottom));
background: rgb(0 0 0 / 0.5);
z-index: 4;
opacity: 0;
visibility: hidden;
transition:
opacity 0.3s ease,
visibility 0.3s ease;
}
.rtd-bottom-category-overlay.active {
opacity: 1;
visibility: visible;
}
.rtd-bottom-category-menu {
position: fixed;
bottom: 0;
left: 0;
right: 0;
max-height: 60vh;
background: #fff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
box-shadow: 0 -5px 20px rgb(0 0 0 / 0.2);
z-index: 4;
overflow-y: auto;
transform: translateY(100%);
transition: transform 0.3s ease;
-webkit-overflow-scrolling: touch;
padding-bottom: env(safe-area-inset-bottom);
bottom: calc(65px + env(safe-area-inset-bottom));
}
.rtd-bottom-category-menu.active {
transform: translateY(0);
}
.rtd-bottom-category-header {
z-index: 1;
position: sticky;
top: 0;
background: #c8102e;
color: #fff;
padding: 15px 20px;
font-size: 16px;
font-weight: 700;
display: flex;
justify-content: space-between;
align-items: center;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.rtd-bottom-category-close {
font-size: 24px;
cursor: pointer;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgb(255 255 255 / 0.2);
}
.rtd-bottom-category-list {
padding: 10px 0;
}
.rtd-bottom-category-section {
margin-bottom: 15px;
}
.rtd-bottom-category-section h3 {
background: #f8f8f8;
padding: 12px 20px;
margin: 0;
font-size: 15px;
font-weight: 700;
color: #333;
border-left: 4px solid #c8102e;
}
.rtd-bottom-category-section ul {
list-style: none;
margin: 0;
padding: 0;
}
.rtd-bottom-category-section li {
border-bottom: 1px solid #f0f0f0;
}
.rtd-bottom-category-section li:last-child {
border-bottom: none;
}
.rtd-bottom-category-section a {
display: block;
padding: 12px 20px 12px 35px;
color: #555;
text-decoration: none;
transition: all 0.2s ease;
position: relative;
}
.rtd-bottom-category-section a:before {
content: "›";
position: absolute;
left: 20px;
color: #c8102e;
font-size: 18px;
font-weight: 700;
}
.rtd-bottom-category-section a:active {
background: #f8f8f8;
color: #c8102e;
}
@media (max-width: 804px) {
.rtd-bottom-nav {
display: block;
}
body {
padding-bottom: calc(65px + env(safe-area-inset-bottom)) !important;
}
}
@media (min-width: 804px) {
.rtd-bottom-category-overlay,
.rtd-bottom-category-menu {
display: none !important;
}
}
.rtd-bottom-category-section a:active,
.rtd-bottom-category-section a.active-link {
background: #ffebee;
color: #c8102e;
font-weight: 600;
}
.rtd-bottom-category-section a:active {
transform: scale(0.98);
transition: all 0.1s ease;
}
.rtd-bottom-nav-item.category-active {
color: #c8102e;
}
.rtd-bottom-nav-item.category-active i {
color: #c8102e;
transform: scale(1.1);
}