/* General classes */
:root {
--gray-900: #212121;
--gray-800: #424242;
--gray-700: #616161;
--gray-600: #757575;
--gray-500: #9e9e9e;
--gray-400: #bdbdbd;
--gray-350: #d9d9d9;
--gray-300: #e0e0e0;
--gray-200: #eeeeee;
--gray-100: #f5f5f5;
--gray-50: #fafafa;
--white: #ffffff;
--black: #000000;
--primary-color: #ac1e4f;
--secondary-color: #6a1b36;
--green-color: #37b853;
--green-dark-color: #1d723f;
}
.custom-alert {
background-color: var(--primary-color);
color: var(--white);
position: fixed;
bottom: 40px;
right: 60px;
}
.disabled-swiper-button {
display: none;
}
.custom-alert.alert-dismissible .btn-close {
top: 12px;
}
.custom-alert .btn-close {
--bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
.custom-alert .btn-close:focus {
outline: 0;
box-shadow: none;
}
.custom-alert p {
font-size: 15px;
font-weight: 400;
}
.alert-content {
padding-right: 30px;
}
.container-large {
width: 1740px;
}
.container-medium {
width: 1400px;
}
.container-small {
width: 1100px;
}
.container-smaller {
width: 800px;
}
.popupModal .modal-content {
background: transparent;
border: 0;
}
.popupModal .modal-body {
padding: 0;
}
.popupModal .btn-close {
float: right;
margin-bottom: 12px;
--bs-btn-close-opacity: 1;
--bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e")
}
/* Rating stars */
.rating-group {
display: inline-flex;
padding-bottom: 10px;
margin-bottom: 20px;
}
.rating__icon {
pointer-events: none;
}
.rating__input {
position: absolute !important;
left: -9999px !important;
}
.rating__label {
cursor: pointer;
padding: 0 0.1em;
font-size: 2.2rem !important;
}
.rating__icon--star {
color: var(--primary-color);
transition: all 0.2s ease-in-out;
}
.rating__icon--none {
color: var(--gray-500);
transition: all 0.2s ease-in-out;
}
.rating__input:checked~.rating__label .rating__icon--star {
color: var(--gray-500);
transition: all 0.2s ease-in-out;
}
.rating-group:hover .rating__label .rating__icon--star {
color: var(--primary-color);
}
.rating__input:hover~.rating__label .rating__icon--star {
color: var(--gray-500);
}
.rating-group:hover .rating__input--none:not(:hover)+.rating__label .rating__icon--none {
color: var(--gray-500);
}
/* End rating stars */
body {
font-family: "Fustat", sans-serif;
letter-spacing: 0.35px;
overflow-x: hidden;
}
* {
box-sizing: border-box;
margin: 0;
}
.container-large {
max-width: 100%;
}
.primary-color {
color: var(--primary-color);
}
.black {
color: var(--black);
}
.gray-500 {
color: var(--gray-500);
}
/* Buttons */
.back-button {
border-radius: 5px;
padding: 4px 12px;
background: var(--gray-800);
border: 0;
}
.back-button i {
font-size: 12px;
color: var(--white);
font-weight: 900;
}
.white-button {
background-color: var(--white);
color: var(--black);
text-decoration: none;
border-radius: 5px;
border: none;
padding: 10px 16px;
transition: all 0.2s ease-in-out;
font-size: 15px;
font-weight: 700;
text-align: center;
display: block;
}
.white-button:hover {
background-color: var(--primary-color);
color: var(--white);
}
.primary-button {
background-color: var(--primary-color);
color: var(--white);
text-decoration: none;
border-radius: 5px;
border: none;
padding: 14px 30px;
transition: all 0.2s ease-in-out;
font-size: 15px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.primary-button:hover {
box-shadow: 0px 0px 0px 1.2px var(--primary-color) inset;
background: transparent;
color: var(--primary-color);
}
.primary-button-outline {
background-color: transparent;
color: var(--primary-color);
box-shadow: 0px 0px 0px 1.2px var(--primary-color) inset;
text-decoration: none;
border-radius: 5px;
border: none;
padding: 14px 30px;
transition: all 0.2s ease-in-out;
font-size: 15px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.primary-button-outline:hover {
background: var(--primary-color);
color: var(--white);
}
.green-button {
background-color: var(--green-color);
color: var(--white);
text-decoration: none;
border-radius: 5px;
border: none;
padding: 14px 30px;
transition: all 0.2s ease-in-out;
font-size: 15px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.green-button:hover {
box-shadow: 0px 0px 0px 1.2px var(--green-color) inset;
background: transparent;
color: var(--green-color);
}
.green-button-outline {
background-color: transparent;
color: var(--green-color);
text-decoration: none;
border-radius: 5px;
border: none;
box-shadow: 0px 0px 0px 1.2px var(--green-color) inset;
padding: 14px 30px;
transition: all 0.2s ease-in-out;
font-size: 15px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.green-button-outline:hover {
background: var(--green-color);
color: var(--white);
}
.secondary-button {
background-color: transparent;
color: var(--black);
text-decoration: none;
border-radius: 5px;
border: none;
box-shadow: 0px 0px 0px 1.2px var(--secondary-color) inset;
padding: 14px 30px;
transition: all 0.2s ease-in-out;
font-size: 15px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.secondary-button:hover {
background: var(--secondary-color);
color: var(--white);
}
.black-button-outline {
background-color: transparent;
color: var(--black);
box-shadow: 0px 0px 0px 1.2px var(--black) inset;
text-decoration: none;
border-radius: 5px;
border: none;
padding: 10px 20px;
transition: all 0.2sease-in-out;
font-size: 13px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
transition: all .2s ease-in-out;
}
.black-button-outline:hover {
background: var(--black);
color: var(--white);
}
/* Header */
.logged-user button {
font-size: 13px;
color: var(--gray-600);
font-weight: 400;
background: transparent;
border: none;
padding: 0;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
position: relative;
}
.header-search-mobile,
.navbar-nav hr {
display: none;
}
.navbar-nav .products-menu {
opacity: 0;
}
.product-categories-checkbox {
margin-top: 8px;
height: 20px;
width: 20px;
}
.product-categories-checkbox:checked {
background-color: var(--secondary-color);
border-color: var(--secondary-color);
}
.products-menu {
background-color: var(--white);
border: 1px solid var(--black);
padding: 12px;
position: absolute;
width: 800px;
z-index: 2;
}
.products-menu i,
.products-menu-mobile i {
border: 1px solid var(--black);
border-radius: 50%;
height: 100%;
padding: 2px;
font-size: 12px;
margin-bottom: 2px;
}
.products-menu .scroll {
max-height: 300px;
padding: 0;
position: relative;
overflow: auto;
}
.products-menu .view-more-menu,
.products-menu-mobile .view-more-menu {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
width: 100%;
background: var(--white);
padding-top: 10px;
cursor: pointer;
}
.products-menu .view-more-menu.hidden {
display: none;
}
.row.equal {
display: flex;
flex-wrap: wrap;
}
.menu-border {
border-right: 1px solid var(--gray-300);
}
.products-menu a {
font-size: 16px;
color: var(--black);
font-weight: 700;
text-decoration: none;
padding: 6px 0;
display: block;
width: 100%;
padding-left: 12px;
padding-right: 16px;
}
.products-menu-mobile a {
font-size: 16px;
color: var(--black);
font-weight: 300;
text-decoration: none;
padding: 6px 0;
display: block;
width: 100%;
padding-left: 12px;
padding-right: 16px;
}
.products-menu a:hover {
background-color: var(--gray-100);
}
.products-menu .sub-menu a,
.products-menu-mobile .sub-menu a {
font-weight: 300;
padding-left: 18px;
}
.search-mobile {
display: inherit;
}
.dropdown-arrow {
display: inline-block;
margin-left: 5px;
width: 10px;
height: 10px;
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgMTEgNiIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTEwIDVMNS41IDFMMSA1IiBzdHJva2U9IiNBQzFFNEYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") no-repeat center;
background-size: 8px 8px;
transition: transform 0.2s ease;
}
.rotate {
transform: rotate(180deg);
}
.logged-user .dropdown-toggle::after {
content: none;
}
.logged-user .dropdown-item {
font-size: 16px;
color: var(--black);
font-weight: 400;
padding: 10px 20px;
}
.logged-user .dropdown-menu {
--bs-dropdown-min-width: 14rem;
left: -80px;
}
.logged-user hr {
margin: 6px 0;
}
.logged-user .dropdown-item.active,
.logged-user .dropdown-item:active {
background-color: var(--gray-300);
}
.welcome {
font-size: 13px;
color: var(--gray-600);
font-weight: 700;
margin-bottom: 0;
}
.logged-user .custom-dropdown-item {
font-weight: 300;
color: var(--gray-800);
}
.header-bar {
background-color: var(--primary-color);
font-size: 14px;
color: var(--white);
font-weight: 400;
padding: 10px 0;
}
.header-bar span {
font-weight: 700;
}
.custom-accordion-header a,
.custom-accordion-header#accordionFilters [type="button"]:not(:disabled) {
font-size: 20px;
}
.all-categories a {
padding: 0 0 0 20px;
font-size: 20px;
color: var(--black);
font-weight: 600;
text-decoration: none;
display: block;
}
.all-categories hr {
border: 1px solid var(--gray-350);
opacity: 1;
}
.menu-header-see-more a {
font-size: 20px;
padding: 0 0 0 20px;
display: inline-block;
color: var(--primary-color);
font-weight: 600;
}
.products-menu-mobile .offcanvas-header {
padding-left: 26px;
padding-right: 26px;
}
.all-categories {
padding-top: 16px;
}
.nav-link {
color: var(--black);
font-size: 15px;
font-weight: 500;
}
.navbar .nav-item:hover .nav-link {
text-decoration: underline;
}
.header-content-mobile {
display: none;
}
.navbar .navbar-toggler {
border: none;
}
.navbar .navbar-toggler:focus {
box-shadow: none;
}
.navbar {
padding: 13px 0;
box-shadow: 0px 4px 15px 1px rgba(0, 0, 0, 0.04);
}
.navbar-brand {
margin-right: 45px;
}
.navbar .navbar-nav {
gap: 3rem;
}
.navbar img {
width: 100%;
height: 100%;
max-width: 80px;
max-height: 80px;
}
.header-login a {
font-size: 13px;
color: var(--gray-600);
font-weight: 700;
text-decoration: none;
}
.header-login span {
font-size: 13px;
color: var(--gray-600);
font-weight: 400;
}
.header-login i,
.bag-shopping i {
color: var(--gray-600);
font-size: 40px;
padding-right: 12px;
}
.search-header input {
padding-right: 40px;
border: 1px solid var(--gray-600);
opacity: 1;
}
.search-header.expanded .search-input {
width: 100%;
max-width: 100%;
opacity: 1;
padding: 5px 10px;
margin-left: 8px;
padding-right: 40px;
}
.search-button {
background: none;
border: none;
cursor: pointer;
position: absolute;
}
.search-input {
width: 0;
max-width: 0;
transition: all 0.3s ease;
opacity: 0;
border: 1px solid var(--gray-600);
}
.right-side-header.active .search-header {
width: 100%;
}
.right-side-content {
gap: 46px;
width: 100%;
}
.right-side-header.active {
width: 50%;
}
.right-side-header.active .search-header i {
right: 32px;
}
.right-side-header {
gap: 46px;
width: 55%;
justify-content: flex-end;
}
.search-header input:focus {
box-shadow: none;
border: 1px solid var(--gray-600);
}
.search-header {
position: relative;
transition: all 0.3s ease-in-out;
width: 30%;
justify-content: end;
}
.search-header i {
position: absolute;
right: 17px;
top: 16px;
font-size: 18px;
color: var(--gray-600);
cursor: pointer;
}
.bag-shopping-count {
background-color: var(--secondary-color);
font-size: 13px;
font-weight: 400;
border-radius: 5px;
color: var(--white);
position: absolute;
right: -8px;
top: 3px;
padding: 2px 8px;
display: flex;
justify-content: center;
align-items: center;
}
.bag-shopping {
text-decoration: none;
position: relative;
display: flex;
align-items: center;
}
/* Footer */
.footer-social a {
background-color: var(--primary-color);
width: 40px;
height: 40px;
padding: 5px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: transform 0.2s ease-in-out;
}
.footer-social a:hover {
transform: scale(1.05);
}
.footer-social i {
color: var(--white);
font-size: 26px;
}
.footer-head {
background-color: var(--secondary-color);
padding-top: 50px;
padding-bottom: 80px;
}
.footer-bottom {
background-color: var(--secondary-color);
padding-top: 10px;
padding-bottom: 10px;
}
.footer-bottom p {
font-size: 12px;
margin-bottom: 0;
font-weight: 400;
text-align: start;
color: var(--white);
}
.footer-bottom img {
width: 100%;
max-width: 60px;
max-height: 28px;
}
.footer-body {
background-color: var(--white);
padding-top: 30px;
padding-bottom: 30px;
}
.footer-body img {
min-height: 46px;
max-height: 46px;
}
.footer-links h4 {
font-size: 20px;
font-weight: 600;
font-family: Lora;
margin-bottom: 30px;
color: var(--white);
}
.footer-links a:not(.footer-social a),
.footer-links p {
font-size: 16px;
color: var(--white);
text-decoration: none;
font-weight: 300;
margin-bottom: 20px;
transition: color 0.2s ease-in-out;
width: fit-content;
}
.footer-links a:not(.footer-social a):hover {
color: var(--gray-400);
}
.map-link p:hover {
color: var(--gray-400);
}
.footer-body p {
font-size: 16px;
color: var(--black);
font-weight: 300;
margin-bottom: 10px;
}
/* Home */
#legalAge h2 {
font-size: 36px;
color: var(--black);
font-weight: 600;
margin-bottom: 0;
}
#legalAge .modal-footer {
border-top: 0;
justify-content: center;
gap: 16px;
padding: 35px;
padding-top: 0;
}
#legalAge .modal-body {
padding: 35px;
padding-bottom: 25px;
}
#legalAge .primary-button {
width: 30%;
}
#legalAge .secondary-button {
width: 30%;
}
#legalAge .modal-lg {
--bs-modal-width: 600px;
}
.banner-home h1 {
font-family: Lora;
font-size: 48px;
color: var(--white);
font-weight: 600;
margin-bottom: 15px;
}
.banner-home p {
font-size: 14px;
color: var(--white);
font-weight: 400;
margin-bottom: 25px;
}
.banner-home {
padding: 120px 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.banner-home .green-button {
width: fit-content;
padding: 10px 80px;
}
.swiperCategories a {
text-decoration: none;
}
.swiperCategories {
padding-top: 120px;
padding-bottom: 120px;
}
.card-container {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
border-radius: 5px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.categories-text {
color: var(--white);
}
.card-container:hover {
transform: translateY(-10px);
}
.card-container:hover .white-button {
background-color: var(--secondary-color);
color: var(--white);
}
.categories-text h2 {
font-family: Lora;
font-size: 28px;
font-weight: 700;
margin-bottom: 0;
}
.categories-text p {
font-size: 14px;
font-weight: 500;
}
.card-container .card-content {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: flex-end;
}
.categories-data {
position: relative;
width: 100%;
padding: 48px 25px 25px;
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6));
display: flex;
justify-content: space-between;
align-items: end;
}
.categories-title {
font-size: 24px;
color: var(--color-white);
font-weight: 600;
padding-right: 10px;
}
.categories-description {
font-size: 14px;
color: var(--gray-300);
font-weight: 300;
padding-right: 20px;
margin-bottom: 0;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.categories-content {
overflow: hidden;
display: flex;
flex-direction: column;
}
.product-card {
border: 1px solid var(--gray-300);
width: 100%!important;
height: 100%;
}
.product-card-data-hide-desktop {
display: none;
}
.product-card a {
text-decoration: none;
}
.price {
font-size: 18px;
color: var(--black);
margin-bottom: 0;
font-weight: 600;
}
.old-price {
font-size: 14px;
color: var(--gray-600);
font-weight: 300;
margin-bottom: 2px;
text-decoration-line: line-through;
}
.product-card .card-title {
font-family: Lora;
font-size: 20px;
color: var(--secondary-color);
font-weight: 700;
margin-bottom: 10px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.price-credit {
font-size: 12px;
color: var(--black);
font-weight: 300;
margin-bottom: 15px;
}
.product-card .card-img-top {
padding: 36px 50px 20px 50px;
width: 100%;
min-height: 270px;
height: 100%;
object-fit: cover;
}
.more-sales-products h2 {
font-family: Lora;
font-size: 48px;
color: var(--black);
font-weight: 600;
margin-bottom: 25px;
}
.more-sales-products {
margin-bottom: 120px;
}
.swiper-button-next-2,
.swiper-button-next-4,
.swiper-button-prev-2,
.swiper-button-prev-4 {
color: var(--white);
background-color: var(--gray-800);
padding: 10px 14px;
width: 35px;
height: 35px;
border-radius: 5px;
position: absolute;
}
.swiper-button-next-2,
.swiper-button-next-4 {
right: -26px;
}
.swiper-button-prev-2,
.swiper-button-prev-4 {
left: -34px;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after,
.swiper-rtl .swiper-button-prev:after {
content: "";
}
.home-first-card {
min-height: 290px;
}
.home-second-card {
min-height: 290px;
}
.home-first-card h2,
.home-second-card h2 {
font-size: 40px;
font-weight: 300;
margin-bottom: 30px;
}
.home-first-card div:first-child,
.home-second-card div:first-child {
padding: 50px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-radius: 5px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.cards-home {
margin-bottom: 120px;
}
.home-first-card .primary-button,
.home-second-card .primary-button {
width: fit-content;
padding: 10px 60px;
}
.home-first-card h2 {
color: var(--gray-900);
}
.home-second-card h2 {
color: var(--white);
}
.home-first-card span {
font-weight: 700;
}
.highlightProductSwiper img {
width: 100%;
max-width: 500px;
}
.highlightProductSwiper .swiper-slide {
text-align: center;
}
.highlightProductSwiper .swiper-button-next-3,
.highlightProductSwiper .swiper-button-prev-3 {
color: var(--gray-500);
font-size: 20px;
}
.highlightProductSwiper .swiper-button-next-3 {
right: 50px;
}
.highlightProductSwiper .swiper-button-prev-3 {
left: 50px;
}
.highlight-product {
margin-bottom: 120px;
margin-right: 0;
padding-right: 0;
}
.highlight-product-bg {
background-color: var(--gray-200);
padding: 80px;
padding-right: 150px;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.highlight-section-title {
font-family: Lora;
font-size: 48px;
color: var(--black);
font-weight: 600;
margin-bottom: 36px;
}
.highlight-title {
font-family: Lora;
font-size: 32px;
color: var(--green-dark-color);
font-weight: 700;
margin-bottom: 20px;
}
.highlight-description p {
font-size: 18px;
color: var(--black);
font-weight: 400;
margin-bottom: 14px;
}
.highlight-ref {
font-size: 14px;
color: var(--black);
font-weight: 300;
margin-bottom: 20px;
}
.highlight-product-bg .green-button-outline {
width: fit-content;
margin-top: 50px;
}
.highlight-product-price {
font-size: 32px;
color: var(--black);
margin-bottom: 0;
font-weight: 700;
}
.highlight-product-old-price {
font-size: 18px;
color: var(--gray-400);
font-weight: 400;
margin-bottom: 2px;
text-decoration-line: line-through;
}
.highlight-product-link {
display: flex;
text-decoration: none;
flex-direction: column;
height: 100%;
}
.club-card {
background-color: var(--secondary-color);
padding: 40px;
color: var(--white);
max-width: 450px;
border-radius: 5px;
}
.club-card h2 {
font-family: Lora;
font-size: 36px;
font-weight: 600;
margin-bottom: 45px;
}
.club-card-banner {
margin-bottom: 120px;
}
.club-card ul {
list-style: none;
padding-left: 0;
}
.club-card li {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 30px;
}
.club-card i {
font-size: 30px;
}
.club-card .item-text {
font-size: 12px;
font-weight: 300;
margin-bottom: 0;
}
.club-card span {
font-size: 15px;
font-weight: 700;
}
.extra-msg {
font-size: 15px;
font-weight: 600;
margin-bottom: 35px;
}
.club-card-bg {
display: flex;
justify-content: end;
background-size: cover;
padding: 60px 90px;
border-radius: 5px;
}
.club-card-bg .primary-button:hover {
box-shadow: 0px 0px 0px 1.2px var(--white) inset;
background: transparent;
color: var(--white);
}
.recommended-products h2 {
font-family: Lora;
font-size: 48px;
color: var(--black);
font-weight: 600;
margin-bottom: 25px;
}
.recommended-products {
margin-bottom: 160px;
}
.product-badge {
font-size: 12px;
background-color: var(--secondary-color);
font-weight: 600;
color: var(--white);
padding: 10px 20px;
border-radius: 5px;
width: fit-content;
position: absolute;
right: 10px;
top: 10px;
}
.home-video {
margin-bottom: 120px;
}
.home-video img {
width: 100%;
height: 100%;
max-height: 640px;
object-fit: cover;
border-radius: 5px;
}
.video-loading-background {
background: var(--black);
}
.custom-video-modal .modal-body {
padding: 0;
}
.custom-video-modal .modal-header {
border: none;
padding: 0;
}
.custom-video-modal .modal-content {
background: transparent;
border: none;
}
.custom-video-modal .modal-header button {
border: none;
background: transparent;
color: var(--white);
}
.custom-btn {
background: var(--secondary-color);
font-size: 36px;
font-weight: 700;
border: none;
color: var(--white);
padding: 12px 50px;
border-radius: 5px;
transition: all 0.2s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
}
.custom-btn:hover {
background: var(--primary-color);
color: var(--white);
}
.home-video-container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.play-button {
position: absolute;
width: 90px;
height: 90px;
}
.video-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.video-content h2 {
font-family: Lora;
font-size: 42px;
font-weight: 400;
color: var(--green-dark-color);
margin-bottom: 23px;
}
.video-content h3 {
font-size: 20px;
margin-bottom: 16px;
font-weight: 800;
}
.video-content p {
font-size: 18px;
margin-bottom: 23px;
font-weight: 400;
}
.video-content {
padding: 0 170px;
}
.video-content .primary-button {
width: fit-content;
padding: 14px 60px;
}
/* Error */
.error h1 {
font-size: 64px;
color: var(--black);
font-weight: 700;
margin-bottom: 20px;
text-align: center;
}
.error {
margin-top: 60px;
margin-bottom: 160px;
}
.error .primary-button {
width: 30%;
padding-top: 14px;
padding-bottom: 14px;
}
.error h2 {
font-size: 24px;
color: var(--black);
font-weight: 300;
margin-bottom: 35px;
text-align: center;
}
.error img {
width: 100%;
max-width: 500px;
margin-bottom: 45px;
}
/* About */
.about h1 {
font-size: 36px;
color: var(--black);
font-weight: 700;
margin-bottom: 23px;
}
.about p {
font-size: 16px;
color: var(--black);
font-weight: 400;
margin-bottom: 15px;
}
.about img {
width: 100%;
height: 100%;
max-height: 700px;
object-fit: cover;
border-radius: 5px;
}
.about {
margin-top: 50px;
margin-bottom: 170px;
}
.about-content {
padding: 0 100px;
display: flex;
flex-direction: column;
justify-content: center;
}
.about-content .green-button {
width: fit-content;
padding: 14px 90px;
}
.know-our-team {
margin-bottom: 200px;
}
.know-our-team img {
width: 100%;
max-height: 550px;
object-fit: cover;
}
.know-our-team-content {
border: 1px solid var(--gray-300);
padding: 55px;
padding-right: calc(55px + 12px);
border-radius: 5px;
}
.know-our-team-content h2 {
font-size: 36px;
color: var(--black);
margin-bottom: 23px;
font-weight: 700;
}
.know-our-team-content p {
font-size: 16px;
color: var(--black);
font-weight: 400;
margin-bottom: 0;
}
.know-our-team-text {
padding: 0 100px;
display: flex;
flex-direction: column;
justify-content: center;
}
.video-container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
}
.video-container img {
width: 100%;
height: 700px;
border-radius: 5px;
object-fit: cover;
}
#ytVideo {
width: 100%;
height: 700px;
border-radius: 5px;
}
.about-video {
margin-bottom: 170px;
}
.about-video p {
margin-top: 18px;
font-size: 16px;
color: var(--black);
font-weight: 400;
}
.video-container-content {
padding: 0 100px;
}
.video-container-content-custom {
margin-top: 52px;
}
.video-container-content .green-button {
padding: 14px 80px;
margin-top: 40px;
}
/* BrotherHood */
.brotherhood-content {
padding: 0 100px;
display: flex;
flex-direction: column;
justify-content: center;
}
.brotherhood-content .green-button {
width: fit-content;
padding: 14px 90px;
margin-top: 12px;
}
.brotherhood h1 {
font-size: 36px;
color: var(--black);
font-weight: 700;
margin-bottom: 23px;
}
.brotherhood p {
font-size: 16px;
color: var(--black);
font-weight: 400;
margin-bottom: 18px;
}
.brotherhood img {
width: 100%;
max-height: 700px;
object-fit: cover;
border-radius: 5px;
}
.brotherhood {
margin-top: 50px;
margin-bottom: 120px;
}
.about-video .green-button {
width: fit-content;
}
#accordionQuestions .accordion-button:not(.collapsed),
#accordionFilters .accordion-button:not(.collapsed) {
background: var(--color-white);
color: var(--color-black);
box-shadow: none;
}
#accordionQuestions .accordion-body {
color: var(--gray-600);
padding-top: 0;
padding-left: 0;
padding-right: 30px;
font-size: 14px;
}
#accordionFilters .accordion-body {
color: var(--gray-600);
padding: 20px;
padding-top: 0;
font-size: 14px;
max-height: 600px;
overflow-y: scroll;
overflow-x: hidden;
}
#accordionQuestions .accordion-item,
#accordionFilters .accordion-item {
border-left: none;
border-top: none;
border-right: none;
border-bottom: 2px solid var(--gray-350);
}
#accordionQuestions [type="button"]:not(:disabled),
[type="reset"]:not(:disabled) {
font-size: 18px;
color: var(--black);
font-weight: 600;
padding-right: 0;
padding-left: 0;
justify-content: space-between;
}
#accordionFilters [type="button"]:not(:disabled) {
font-size: 18px;
color: var(--black);
font-weight: 600;
justify-content: space-between;
}
#accordionQuestions [type="button"]:not(:disabled):focus,
#accordionFilters [type="button"]:not(:disabled):focus,
[type="reset"]:not(:disabled):focus {
outline: none;
box-shadow: none;
border: none;
}
#accordionQuestions .accordion-button:not(.collapsed)::after {
margin-left: 45px;
background-image: url("data:image/svg+xml,");
}
#accordionQuestions .accordion-button::after {
margin-left: 45px;
background-image: url("data:image/svg+xml,");
}
#accordionFilters .accordion-button:not(.collapsed)::after {
margin-left: 45px;
background-image: url("data:image/svg+xml,");
}
#accordionFilters .accordion-button::after {
margin-left: 45px;
background-image: url("data:image/svg+xml,");
}
#accordionQuestions.accordion,
#accordionFilters.accordion {
--bs-accordion-border-radius: 0;
}
.questions {
margin-bottom: 120px;
}
.questions h2 {
font-size: 40px;
color: var(--black);
font-weight: 700;
}
.questions p {
font-size: 20px;
color: var(--black);
font-weight: 300;
margin-bottom: 40px;
}
#accordionQuestions {
padding: 0 160px;
}
#accordionQuestions .accordion-item:first-child .accordion-header {
border-top: 1px solid var(--gray-350);
}
.wpp-floating:hover {
transform: scale(1.05);
}
.wpp-floating img {
width: 100%;
border-radius: 10px;
}
.wpp-floating {
z-index: 99;
position: fixed;
bottom: 40px;
right: 40px;
transition: transform 0.2s ease-in-out;
}
/* Product show */
.product-img-side img {
width: 90px;
height: 130px;
object-fit: cover;
}
.productGallerySwiper .swiper-wrapper .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
.productGallerySwiper {
height: 100%;
border: 1px solid var(--gray-100);
border-radius: 5px;
}
.product-img-side .product-img-container {
border: 1px solid var(--gray-100);
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
width: 110px;
}
.product-details {
margin-top: 50px;
margin-bottom: 120px;
}
.productGallerySwiper img {
width: 100%;
max-width: 300px;
max-height: 460px;
}
.show-product img {
width: 100%;
height: 100%;
object-fit: cover;
}
.show-product {
min-height: 600px;
}
.custom-padding-product {
padding-right: 36px;
}
.product-img-side .swiper {
max-height: 500px;
}
.wine-content {
border: 1px solid var(--gray-500);
padding: 4px;
padding-left: 12px;
border-radius: 5px;
display: flex;
gap: 10px;
align-items: center;
width: fit-content;
}
.wine-content p {
font-size: 14px;
color: var(--black);
font-weight: 400;
margin-bottom: 0;
}
.wine-content span {
font-size: 14px;
color: var(--white);
font-weight: 700;
background-color: var(--secondary-color);
border-radius: 5px;
padding: 5px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.productGallerySwiper i {
color: var(--gray-400);
font-size: 30px;
}
.productGallerySwiper .swiper-button-next {
margin-right: 70px;
}
.productGallerySwiper .swiper-button-prev {
margin-left: 70px;
}
.product-card-data {
position: sticky;
top: 50px;
}
.product-collection {
font-size: 14px;
color: var(--black);
margin-bottom: 0;
font-weight: 300;
}
.product-country {
font-size: 16px;
color: var(--black);
font-weight: 400;
text-decoration: none;
}
.product-country:hover {
text-decoration: underline;
}
.product-card-data h1 {
font-family: Lora;
font-size: 32px;
color: var(--black);
font-weight: 700;
margin-bottom: 10px;
margin-top: 5px;
line-break: anywhere;
}
.product-prices h3 {
font-size: 20px;
color: var(--gray-600);
font-weight: 700;
text-decoration-line: line-through;
margin-bottom: 4px;
}
.product-prices h2 {
font-size: 36px;
color: var(--black);
font-weight: 700;
margin-bottom: 4px;
}
.product-prices {
margin-top: 40px;
margin-bottom: 45px;
}
.product-prices p {
font-size: 14px;
color: var(--black);
font-weight: 400;
}
.product-prices p span {
font-weight: 600;
}
.product-quantity {
border: 1px solid var(--black);
padding: 0 12px;
border-radius: 5px;
}
.product-quantity button {
border: none;
background: none;
font-size: 24px;
font-weight: 700;
columns: var(--black);
color: var(--black);
}
.product-quantity input {
border: none;
font-size: 24px;
color: var(--black);
font-weight: 600;
max-width: 80px;
text-align: center;
}
.product-quantity input {
appearance: none; /* Safari moderno */
-webkit-appearance: none; /* iOS/Safari antigo */
height: 40px; /* define uma altura padrão */
box-sizing: border-box;
}
.product-quantity input:focus {
outline: none;
}
.product-quantity input::-webkit-outer-spin-button,
.product-quantity input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.product-quantity input[type="number"] {
-moz-appearance: textfield;
}
.product-card-data .primary-button {
padding: 14px 50px;
}
.notes {
margin-top: 90px;
}
.notes h2 {
font-size: 32px;
color: var(--black);
font-weight: 700;
margin-bottom: 12px;
}
.notes p {
font-size: 16px;
color: var(--black);
font-weight: 400;
margin-bottom: 15px;
}
.notes img {
width: 100%;
max-height: 450px;
object-fit: contain;
margin-bottom: 60px;
margin-top: 12px;
}
.product-details-section h2 {
font-size: 24px;
color: var(--black);
font-weight: 700;
margin-bottom: 20px;
}
.product-details-section td {
font-size: 16px;
color: var(--gray-700);
font-weight: 500;
}
.product-details-section table {
width: 100%;
border-collapse: collapse;
margin-bottom: 60px;
}
.product-details-section tr {
border-bottom: 1px solid var(--gray-350);
}
.product-details-section td {
padding: 20px 0;
}
.product-video-container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.product-video-container img {
width: 100%;
max-height: 450px;
object-fit: cover;
}
.another-products h2 {
font-family: Lora;
font-size: 48px;
color: var(--black);
font-weight: 600;
margin-bottom: 25px;
}
.another-products {
margin-bottom: 160px;
margin-top: 120px;
}
.product-video-container .play-button {
width: 70px;
height: 70px;
}
.product-video-container .custom-btn {
padding: 12px 36px;
}
.general-reviews p {
font-size: 16px;
color: var(--gray-800);
font-weight: 400;
margin-bottom: 5px;
}
.general-reviews {
margin-bottom: 70px;
}
.general-reviews h2 {
font-size: 48px;
color: var(--black);
font-weight: 700;
}
.general-reviews i {
font-size: 20px;
}
.review-author h2 {
font-size: 20px;
color: var(--black);
margin-bottom: 4px;
font-weight: 700;
}
.review-author p {
font-size: 14px;
color: var(--gray-700);
font-weight: 700;
margin-bottom: 0;
}
.review-content i {
font-size: 20px;
}
.review-content h2 {
font-size: 20px;
color: var(--black);
margin-bottom: 10px;
font-weight: 700;
margin-top: 20px;
}
.review-content p {
font-size: 16px;
color: var(--gray-800);
font-weight: 400;
margin-bottom: 0;
}
.review-buttons button {
padding: 14px 90px;
}
.review-buttons {
margin-top: 40px;
}
.review-resume-hr {
margin: 40px 0;
color: var(--gray-350);
}
#allRatingsModal .dropdown-item.active,
#allRatingsModal .dropdown-item:active {
background-color: var(--gray-300);
color: var(--black);
}
#allRatingsModal .dropdown-item {
padding: 10px 12px;
}
#allRatingsModal .modal-header {
padding: 30px;
}
#allRatingsModal .modal-body h3 {
font-size: 20px;
color: var(--black);
font-weight: 300;
}
#allRatingsModal .modal-body h2 {
font-size: 40px;
color: var(--black);
font-weight: 700;
}
#allRatingsModal .rating-quantity {
font-size: 16px;
color: var(--black);
margin-bottom: 0;
font-weight: 300;
}
#allRatingsModal .rating-card>p:first-of-type {
-webkit-line-clamp: unset;
}
#allRatingsModal .rating-card {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
}
#allRatingsModal .modal-body {
padding: 30px;
}
.rating-card {
border: 1px solid var(--gray-500);
border-radius: 5px;
}
.rating-card a {
font-size: 16px;
color: var(--black);
text-decoration: underline;
font-weight: 500;
}
.rating-card {
padding: 20px 22px;
border-radius: 5px;
width: 100%;
min-height: 270px;
}
.rating-card i {
font-size: 11px;
}
.rating-card div:first-child p {
font-size: 11px;
color: var(--black);
font-weight: 300;
padding-top: 5px;
}
.rating-card>p:first-of-type {
font-size: 16px;
color: var(--black);
font-weight: 300;
padding-top: 14px;
margin-bottom: 5px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.rating-card>p:nth-of-type(2) {
text-decoration: underline;
font-size: 16px;
color: var(--black);
font-weight: 500;
}
.rating-card p:last-child {
font-size: 15px;
color: var(--black);
font-weight: 500;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
#allRatingsModal .dropdown-toggle {
background: var(--white);
color: var(--black);
border: none;
text-decoration: underline;
}
#allRatingsModal .dropdown-menu {
padding: 0;
border: none;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.132);
margin-top: 10px !important;
}
#rateModal .modal-body textarea:focus {
outline: none;
box-shadow: none;
}
#rateModal .modal-body textarea::placeholder {
font-size: 15px;
color: var(--gray-800);
font-weight: 300;
}
#rateModal .modal-body {
margin-top: 30px;
}
#rateModal .modal-body textarea {
border: 1px solid var(--black);
padding: 20px;
resize: none;
border-radius: 5px;
font-size: 15px;
margin-bottom: 40px;
}
#rateModal .modal-body input {
border: 1px solid var(--black);
padding: 20px;
resize: none;
border-radius: 5px;
font-size: 15px;
margin-bottom: 40px;
}
#rateModal .modal-body input:focus {
outline: none;
box-shadow: none;
}
#rateModal .modal-body input::placeholder {
font-size: 15px;
color: var(--gray-800);
font-weight: 300;
}
#rateModal .modal-footer {
padding-left: 35px;
padding-right: 35px;
padding-top: 25px;
padding-bottom: 25px;
}
#rateModal .modal-header {
padding: 25px;
}
#rateModal .modal-body {
padding-left: 35px;
padding-right: 35px;
}
#rateModal .modal-body label {
font-size: 16px;
color: var(--black);
font-weight: 500;
}
#rateModal .modal-title {
font-size: 18px;
color: var(--black);
font-weight: 500;
width: 100%;
}
#rateModal .primary-button {
padding: 14px 80px;
}
.no-ratings .primary-button {
padding: 14px 80px;
margin-top: 28px;
}
/* Products */
.banner-products h1 {
font-family: Lora;
font-size: 48px;
color: var(--white);
font-weight: 600;
margin-bottom: 15px;
}
.banner-products p {
font-size: 14px;
color: var(--white);
font-weight: 400;
margin-bottom: 25px;
}
.banner-products {
padding: 60px 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
margin-top: 70px;
margin-bottom: 40px;
border-radius: 5px;
}
.banner-products .green-button {
width: fit-content;
padding: 10px 80px;
}
.product-filters .black-button-outline i {
font-size: 18px;
}
.product-filters .black-button-outline p {
margin-top: 3px;
}
.product-filters {
margin-bottom: 40px;
}
.product-filters .select2-container--default .select2-selection--single {
border: 1px solid var(--black);
border-radius: 5px;
font-size: 16px;
color: var(--black);
font-weight: 500;
padding-right: 60px;
align-items: center;
display: flex;
height: 55px;
position: relative;
width: fit-content;
}
.custom-filters-list .select2-container--default .select2-selection--single {
height: 40px;
}
.product-filters .primary-button {
padding: 14px 60px;
}
.clean-filters {
text-wrap: nowrap;
font-size: 14px;
color: var(--gray-800);
font-weight: 500;
display: flex;
align-items: center;
}
.clean-filters-desktop {
display: flex;
}
.clean-filters-mobile {
display: none;
}
.filter-button-desktop {
display: flex;
}
.filter-button-mobile {
display: none;
}
.filter-badge {
background-color: var(--secondary-color);
padding: 10px 20px;
font-size: 13px;
font-weight: 500;
border-radius: 5px;
width: fit-content;
}
.filter-badge a {
text-decoration: none;
display: flex;
align-items: center;
}
.filter-badge p {
color: var(--white);
}
.filter-list {
margin-top: 15px;
}
.custom-filters-list .filter-list {
margin-top: 0;
}
.custom-filters-list .black-button-outline p {
margin-top: 0;
}
.filter-badge i {
margin-top: 3px;
color: var(--gray-200);
}
#productFilters .offcanvas-title {
width: 100%;
text-align: center;
font-size: 16px;
color: var(--black);
font-weight: 700;
}
#productFilters .offcanvas-body {
padding-left: 0;
padding-right: 0;
padding-top: 0;
overflow: hidden;
}
#productFilters .accordion-button {
padding: 20px;
}
#productFilters .offcanvas-header {
padding: var(--bs-offcanvas-padding-y) 20px;
}
.product-filters .select2-container--default .select2-selection--single .select2-selection__arrow {
top: 12px;
right: 8px;
}
.custom-filters-list .select2-container--default .select2-selection--single .select2-selection__arrow {
top: 5px;
right: 8px;
}
.custom-classes .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background: var(--secondary-color) !important;
}
.custom-classes .select2-container .select2-selection--single .select2-selection__rendered {
padding-left: 12px;
}
.custom-classes .select2-container {
width: fit-content !important;
}
.custom-classes .select2-results__option--selectable:not(.select2-results__option--selectable:last-child) {
border-bottom: 1px solid var(--gray-350);
}
.custom-classes .select2-results__option--selectable {
padding: 12px 20px;
}
.custom-classes .select2-container--default .select2-results__option--disabled {
padding: 12px 20px;
border-bottom: 1px solid var(--gray-350);
}
.custom-classes .select2-container--default .select2-results>.select2-results__options {
max-height: 360px;
}
.custom-classes .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {
width: 6px;
}
.custom-classes .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {
background: var(--gray-200);
}
.custom-classes .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
background: var(--gray-400);
border-radius: 5px;
}
.custom-classes .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb:hover {
background: var(--gray-500);
}
#accordionFilters .accordion-body::-webkit-scrollbar,
#termsModal .modal-body::-webkit-scrollbar {
width: 6px;
}
#accordionFilters .accordion-body::-webkit-scrollbar-track,
#termsModal .modal-body::-webkit-scrollbar-track {
background: var(--gray-200);
}
#accordionFilters .accordion-body::-webkit-scrollbar-thumb,
#termsModal .modal-body::-webkit-scrollbar-thumb {
background: var(--gray-400);
border-radius: 5px;
}
#accordionFilters .accordion-body::-webkit-scrollbar-thumb:hover,
#termsModal .modal-body::-webkit-scrollbar-thumb:hover {
background: var(--gray-500);
}
#productFilters .form-check-input:checked {
background-color: var(--secondary-color);
border-color: var(--secondary-color);
}
#productFilters .form-check-input:focus {
box-shadow: none;
}
#productFilters .form-check {
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 12px;
}
#productFilters .form-check-input {
width: 1.3rem;
height: 1.3rem;
margin-bottom: 4px;
}
#productFilters .form-check label {
font-size: 16px;
color: var(--black);
}
.slider-values p {
margin-bottom: 5px;
font-size: 14px;
font-weight: 500;
color: var(--black);
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
border-radius: 20px;
background-color: var(--secondary-color) !important;
border-color: var(--secondary-color) !important;
}
.ui-slider-horizontal {
height: 0.4em !important;
}
.ui-slider-horizontal .ui-slider-handle {
top: -0.4em !important;
}
.ui-slider-horizontal .ui-slider-range {
background: var(--secondary-color);
}
#slider-range>span.ui-slider-handle:active {
background-color: var(--secondary-color) !important;
border-color: var(--secondary-color) !important;
}
#productFilters .accordion {
max-height: 100%;
overflow: scroll;
}
#productFilters .accordion::-webkit-scrollbar {
display: none;
}
#productFilters .accordion {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Club */
.club-banner {
width: 100%;
max-height: 500px;
object-fit: cover;
}
.club-initial {
margin-top: 100px;
margin-bottom: 170px;
}
.club-advantage {
display: flex;
margin-bottom: 55px;
align-items: center;
gap: 16px;
}
.club-advantage-icon {
background: var(--secondary-color);
border-radius: 5px;
width: 96px;
height: 82px;
padding: 30px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 32px;
}
.club-advantage h3 {
font-size: 15px;
color: var(--black);
font-weight: 700;
margin-bottom: 4px;
}
.club-advantage p {
font-size: 12px;
color: var(--black);
font-weight: 300;
margin-bottom: 0;
}
.club-advantage-list {
list-style: none;
padding-left: 0;
}
.club-advantage-list.first li {
padding-left: 80px;
}
.club-advantage-section {
margin-bottom: 180px;
}
.club-advantage-section h2 {
font-family: Lora;
font-size: 48px;
color: var(--black);
font-weight: 700;
margin-bottom: 60px;
padding: 0 15rem;
}
.club-advantage-section .primary-button {
width: fit-content;
padding: 14px 80px;
}
.categorySwiper img {
width: 100%;
max-height: 360px;
object-fit: cover;
}
.category-card-container {
border: 1px solid var(--gray-300);
border-radius: 5px;
padding: 55px 65px;
margin-top: 50px;
margin-bottom: 100px;
}
.categorySwiper h2 {
font-family: Lora;
font-size: 40px;
color: var(--black);
font-weight: 600;
margin-bottom: 14px;
}
.categorySwiper p {
font-size: 14px;
color: var(--gray-900);
font-weight: 400;
margin-bottom: 0;
}
.category-card-container {
position: relative;
}
.categorySwiper .swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
bottom: var(--swiper-pagination-bottom, -26px);
}
.category-card-container .swiper-pagination-bullet-active {
background: var(--gray-500) !important;
}
/* Login */
#forgotPasswordModal .modal-title {
font-size: 20px;
}
/* Register */
#termsModal .modal-title {
font-size: 30px;
}
#termsModal .modal-body {
display: flex;
flex-direction: column;
padding: 32px 26px;
}
#termsModal .modal-header {
padding: 20px 26px;
}
#termsModal .modal-body p {
font-size: 18px;
color: var(--black);
font-weight: 300;
margin-bottom: 5px;
}
#termsModal .modal-body h2 {
font-size: 32px;
color: var(--black);
font-weight: 700;
margin-bottom: 30px;
}
.terms input {
accent-color: var(--secondary-color);
width: 18px;
height: 18px;
margin-bottom: 3px;
}
.terms label {
font-size: 14px;
color: var(--black);
font-weight: 400;
}
.remember input {
accent-color: var(--secondary-color);
width: 18px;
height: 18px;
margin-bottom: 3px;
}
.remember label {
font-size: 14px;
color: var(--black);
font-weight: 400;
}
.terms a {
color: var(--gray-700);
}
.form-card {
border: 1px solid var(--gray-400);
border-radius: 5px;
padding: 53px 68px;
margin-top: 115px;
margin-bottom: 200px;
}
.custom-input {
border: 1px solid var(--gray-300);
border-radius: 5px;
padding: 18px;
}
.custom-input:focus {
box-shadow: none;
border: 1px solid var(--gray-700);
}
.custom-input::placeholder {
font-size: 16px;
color: var(--gray-500);
font-weight: 400;
}
.form-card h1 {
font-size: 36px;
color: var(--black);
font-weight: 700;
margin-bottom: 5px;
}
.form-card p {
font-size: 16px;
color: var(--gray-700);
font-weight: 400;
margin-bottom: 30px;
}
.forgot-password {
font-size: 12px;
color: var(--gray-700);
font-weight: 400;
}
/* Contact */
.contact-card h1 {
font-size: 36px;
color: var(--black);
font-weight: 700;
margin-bottom: 5px;
}
.contact-card p {
font-size: 16px;
color: var(--gray-700);
font-weight: 400;
margin-bottom: 30px;
}
.contact-card {
box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.05);
border-radius: 5px;
padding: 60px 130px;
margin-top: 115px;
margin-bottom: 200px;
}
.custom-input {
resize: none;
}
/* Cart */
.cart-content-card {
margin-top: 30px;
margin-bottom: 20px;
box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.05);
}
.card-content-header h1 {
font-size: 24px;
color: var(--black);
font-weight: 700;
margin-bottom: 0;
}
.card-content-header span {
font-size: 24px;
color: var(--gray-600);
font-weight: 400;
}
.card-content-header {
border-bottom: 1px solid var(--gray-200);
padding: 20px 30px;
margin-bottom: 20px;
}
.cart-content-body {
padding: 20px 30px;
}
.cart-item-card img {
width: 100%;
max-width: 130px;
object-fit: cover;
margin-right: 20px;
}
.cart-item-card {
border-radius: 5px;
border: 1px solid var(--gray-300);
padding: 30px;
margin-bottom: 20px;
}
.cart-item-card i {
color: var(--gray-400);
font-size: 22px;
}
.cart-item-prices h2 {
font-size: 18px;
color: var(--black);
margin-bottom: 0;
font-weight: 600;
}
.cart-item-prices h3 {
font-size: 14px;
color: var(--gray-600);
font-weight: 300;
text-decoration-line: line-through;
margin-bottom: 0;
margin-bottom: 2px;
}
.product-title {
font-family: Lora;
font-size: 20px;
color: var(--secondary-color);
font-weight: 700;
margin-bottom: 14px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.cart-content-body .product-quantity input,
.cart-content-body .product-quantity button {
font-size: 16px;
}
.cart-content-body .product-quantity input {
max-width: 24px;
}
.cart-content-body .product-quantity {
padding: 3px 12px;
}
.free-shipping {
margin-top: 30px;
box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.05);
border-radius: 5px;
padding: 27px 67px;
margin-bottom: 20px;
}
.free-shipping .progress-bar {
background-color: var(--green-dark-color);
}
.free-shipping h2 {
font-size: 24px;
color: var(--black);
font-weight: 500;
margin-bottom: 10px;
text-align: center;
}
.free-shipping .progress,
.progress-stacked {
--bs-progress-height: 0.7rem;
}
.cart-side-data {
position: sticky;
margin-bottom: 130px;
top: 30px;
}
.order-summary-top {
padding-top: 22px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 0;
}
.order-summary {
box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.05);
border-radius: 5px;
margin-bottom: 30px;
}
.order-summary hr {
margin: 15px 0;
}
.order-summary h2 {
font-size: 24px;
color: var(--black);
font-weight: 700;
margin-bottom: 30px;
}
.order-summary-content {
font-size: 20px;
color: var(--black);
font-weight: 400;
}
.order-summary-bottom {
padding: 22px 30px;
}
.cart-final-price p:first-child {
font-size: 20px;
color: var(--black);
font-weight: 700;
margin-bottom: 0;
}
.cart-final-price p:last-child {
font-size: 14px;
color: var(--black);
font-weight: 400;
margin-bottom: 0;
}
.order-summary-bottom p {
font-size: 20px;
color: var(--black);
font-weight: 700;
margin-bottom: 0;
}
.order-summary-bottom .green-button {
margin-top: 18px;
}
.discount-coupon {
padding: 22px 30px;
box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.05);
border-radius: 5px;
}
.discount-coupon h2 {
font-size: 24px;
color: var(--black);
font-weight: 700;
margin-bottom: 22px;
}
.discount-coupon input {
margin-bottom: 27px;
}
/* Checkout */
.payment-method p {
font-size: 13px;
color: var(--black);
font-weight: 300;
margin-bottom: 5px;
}
.payment-method h2 {
font-size: 24px;
color: var(--black);
font-weight: 700;
margin-bottom: 20px;
}
.payment-method {
margin-top: 30px;
box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.05);
border-radius: 5px;
}
.payment-method hr {
color: var(--gray-400);
margin-bottom: 34px;
}
.payment-method-body {
padding: 30px;
padding-top: 0;
}
.payment-method-top {
padding: 30px;
padding-bottom: 0;
}
.delivery-address-body {
padding: 30px;
padding-top: 0;
}
.delivery-address-body i {
font-size: 24px;
color: var(--black);
}
.delivery-address hr {
color: var(--gray-400);
margin-bottom: 34px;
margin-top: 30px;
}
.delivery-address-top {
padding: 30px;
padding-bottom: 0;
}
.delivery-address p {
font-size: 13px;
color: var(--black);
font-weight: 300;
margin-bottom: 5px;
}
.delivery-address h2 {
font-size: 24px;
color: var(--black);
font-weight: 700;
margin-bottom: 0;
margin-top: 3px;
}
.delivery-address {
margin-top: 30px;
box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.05);
border-radius: 5px;
}
.saved-cards label span:first-child {
font-size: 15px;
color: var(--black);
font-weight: 500;
}
.saved-cards label span:nth-child(2) {
font-size: 12px;
color: #535353;
display: flex;
align-items: center;
font-weight: 400;
}
.saved-cards label span:nth-child(2) a {
margin-left: 10px;
display: none;
}
.saved-cards label span:nth-child(2) a:hover i {
color: var(--white);
background: #ea2121;
border-radius: 5px;
}
.saved-cards label span:nth-child(2) a i {
font-size: 14px;
color: var(--black);
padding: 10px;
transition: all 0.2s ease-in-out;
}
.saved-addresses label span:first-child {
font-size: 15px;
color: var(--black);
font-weight: 500;
}
.saved-addresses label span:nth-child(2) {
font-size: 12px;
color: #535353;
display: flex;
align-items: center;
font-weight: 400;
}
.saved-addresses label span:nth-child(2) a {
margin-left: 10px;
display: none;
}
.saved-addresses label span:nth-child(2) a:hover i {
color: var(--white);
background: #ea2121;
border-radius: 5px;
}
.saved-addresses label span:nth-child(2) a i {
font-size: 14px;
color: var(--black);
padding: 10px;
transition: all 0.2s ease-in-out;
}
.payment-option button:not(.primary-button, .green-button) {
background: var(--white);
border: 1px solid var(--gray-350);
width: 100%;
text-align: start;
padding: 20px 20px;
border-radius: 5px;
margin-bottom: 10px;
font-size: 15px;
font-weight: 500;
transition: all 0.1s ease-in-out;
}
.payment-option .primary-button {
padding: 18px;
}
.payment-option {
margin-top: 20px;
}
.payment-option a {
margin-top: 35px;
}
.saved-cards label {
width: 100%;
cursor: pointer;
transition: all 0.1s ease-in-out;
}
.saved-cards input[type="radio"]+label {
border: 1px solid var(--gray-350);
padding: 10px 20px;
font-size: 14px;
width: 100%;
text-align: center;
color: var(--black);
border-radius: 5px;
}
.saved-cards input[type="radio"]+label:hover {
border: 1px solid var(--black);
}
.saved-cards input[type="radio"]:checked+label {
border: 1px solid var(--black);
font-size: 14px;
}
.saved-cards input[type="radio"] {
display: none;
}
.saved-cards img {
width: 100%;
max-width: 40px;
max-height: 30px;
}
.saved-addresses label {
width: 100%;
cursor: pointer;
transition: all 0.1s ease-in-out;
}
.saved-addresses input[type="radio"]+label {
border: 1px solid var(--gray-350);
padding: 10px 20px;
font-size: 14px;
width: 100%;
text-align: center;
color: var(--black);
border-radius: 5px;
}
.saved-addresses input[type="radio"]+label:hover {
border: 1px solid var(--black);
}
.saved-addresses input[type="radio"]:checked+label {
border: 1px solid var(--black);
font-size: 14px;
}
.saved-addresses input[type="radio"] {
display: none;
}
.saved-addresses img {
width: 100%;
max-width: 40px;
max-height: 30px;
}
#cardForm {
display: none;
}
.time-to-pay-card {
background-color: var(--secondary-color);
border-radius: 5px;
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.time-to-pay-card p {
font-size: 14px;
color: var(--white);
font-weight: 300;
}
.time-to-pay-card i {
color: var(--white);
font-size: 20px;
}
#pixForm .time-to-pay-card {
margin-bottom: 25px;
margin-top: 40px;
}
#pixForm .time-to-pay-card p {
color: var(--white);
}
#pixForm {
display: none;
padding: 0 100px;
}
.pix-code {
margin-top: 35px;
}
#pixForm div:nth-child(2) h2 {
font-size: 16px;
color: var(--black);
font-weight: 500;
margin-bottom: 10px;
}
#pixForm div:nth-child(2) p {
font-size: 12px;
color: var(--gray-800);
font-weight: 300;
}
#pixForm .pix-value p:first-child {
font-size: 14px;
color: var(--black);
font-weight: 400;
margin-bottom: 7px;
}
#pixForm .pix-value p:last-child {
font-size: 14px;
color: var(--black);
font-weight: 700;
margin-bottom: 0;
}
#pixForm .pix-code p:first-child {
font-size: 13px;
color: var(--black);
font-weight: 300;
}
#pixForm2 .time-to-pay-card {
margin-bottom: 25px;
margin-top: 40px;
}
#pixForm2 .time-to-pay-card p {
color: var(--white);
}
#pixForm2 {
padding: 0 100px;
}
#pixForm2 div:nth-child(2) h2 {
font-size: 16px;
color: var(--black);
font-weight: 500;
margin-bottom: 10px;
}
#pixForm2 div:nth-child(2) p {
font-size: 12px;
color: var(--gray-800);
font-weight: 300;
}
#pixForm2 .pix-value p:first-child {
font-size: 14px;
color: var(--black);
font-weight: 400;
margin-bottom: 7px;
}
#pixForm2 .pix-value p:last-child {
font-size: 14px;
color: var(--black);
font-weight: 700;
margin-bottom: 0;
}
#pixForm2 .pix-code p:first-child {
font-size: 13px;
color: var(--black);
font-weight: 300;
}
#pixForm2 .primary-button {
padding: 18px;
width: 100%;
margin-top: 30px;
}
#pixForm2 img {
width: 100%;
max-width: 250px;
max-height: 250px;
}
.floating-label {
position: absolute;
top: 10px;
left: 15px;
font-size: 12px;
color: var(--black);
}
.input-group {
position: relative;
width: 100%;
}
.payment-option input:focus+.floating-label,
.payment-option input:not(:placeholder-shown)+.floating-label {
top: 5px;
font-size: 16px;
color: var(--gray-500);
font-weight: 300;
}
.payment-option .input-group input {
width: 100%;
padding: 25px 15px 10px 15px;
border: 1px solid var(--gray-300);
font-size: 16px;
color: var(--black);
border-radius: 5px !important;
}
.payment-option .input-group input:focus {
outline: none;
border: 1px solid var(--gray-700);
}
.payment-option .default-input>input {
width: 100%;
border: 1px solid var(--gray-300);
}
.payment-option .save-card label {
font-size: 14px;
color: var(--black);
font-weight: 300;
}
.save-card label {
font-size: 14px;
color: var(--black);
font-weight: 300;
}
.payment-option .save-card .primary-button {
padding: 14px 70px;
}
.payment-option .save-card {
display: flex;
align-items: center;
margin-top: 25px;
gap: 26px;
flex-wrap: wrap;
}
.payment-option .save-card input {
width: 22px;
height: 22px;
margin-bottom: 0;
}
.save-card input {
width: 22px;
height: 22px;
margin-bottom: 0;
}
.save-card {
margin-bottom: 36px;
}
.payment-option input::placeholder {
font-size: 16px;
color: var(--gray-500);
font-weight: 300;
}
.card-icon {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
height: 24px;
width: auto;
}
.payment-option #saveCard:checked {
accent-color: var(--primary-color);
}
#gift:checked {
accent-color: var(--primary-color);
}
.delivery-address-body .primary-button {
width: fit-content;
padding: 14px 70px;
}
/* Order confirmed */
.order-confirmed {
margin-top: 80px;
}
.order-confirmed h1 {
font-size: 26px;
color: var(--black);
font-weight: 700;
margin-bottom: 3px;
}
.order-confirmed p {
font-size: 16px;
color: var(--gray-800);
font-weight: 300;
margin-bottom: 0;
}
.order-confirmed i {
font-size: 150px;
padding-bottom: 30px;
color: #37b853;
}
.order-details p {
font-size: 16px;
color: var(--black);
font-weight: 700;
margin-bottom: 25px;
}
.order-details .primary-button {
width: 100%;
margin-top: 40px;
margin-bottom: 160px;
padding: 18px;
}
.order-details-canceled .section-space {
margin-left: 150px;
margin-right: 150px;
}
.order-details li {
font-size: 14px;
color: var(--gray-800);
font-weight: 300;
}
.order-details li::marker {
font-size: 10px;
}
.order-confirmed.container {
padding-right: calc(var(--bs-gutter-x) * 5.5);
padding-left: calc(var(--bs-gutter-x) * 5.5);
}
.order-details.container {
padding-right: calc(var(--bs-gutter-x) * 5.5);
padding-left: calc(var(--bs-gutter-x) * 5.5);
}
.order-details ul {
line-height: 25px;
}
/* Profile */
.subscription-card .card-header {
background-color: var(--primary-color);
padding: 16px 30px;
}
.subscription-help {
background: var(--green-color);
color: var(--white);
}
.subscription-card .card-body {
padding: 24px 30px;
}
.subscription {
margin-top: 100px;
margin-bottom: 160px;
}
.subscription-profile-intro h2 {
font-size: 36px;
color: var(--black);
font-weight: 700;
margin-bottom: 0;
margin-top: 3px;
}
.subscription-profile-intro {
margin-top: 55px;
margin-bottom: 35px;
}
.profile-intro h1 {
font-size: 36px;
color: var(--black);
font-weight: 700;
margin-bottom: 0;
margin-top: 3px;
}
.profile-content {
margin-bottom: 200px;
}
.profile-intro {
margin-top: 55px;
margin-bottom: 40px;
}
a.profile-card {
text-decoration: none;
display: block;
}
.profile-card h2 {
font-size: 20px;
color: var(--black);
font-weight: 700;
}
.profile-card p {
font-size: 15px;
color: var(--black);
font-weight: 300;
margin-bottom: 0;
}
.profile-card {
border: 1px solid var(--gray-300);
box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.072);
margin-bottom: 25px;
border-radius: 15px;
padding: 30px;
transition: 0.2s ease-in-out;
}
.profile-card:hover {
transform: translateY(-5px);
}
/* Edit profile */
.edit-profile-intro h1 {
font-size: 36px;
color: var(--black);
font-weight: 700;
margin-bottom: 0;
margin-top: 3px;
}
.edit-profile-intro {
margin-top: 55px;
margin-bottom: 40px;
}
.edit-profile-input input::placeholder {
font-size: 16px;
color: var(--gray-500);
font-weight: 300;
}
.edit-profile-input input {
font-size: 16px;
color: var(--black);
font-weight: 300;
border-color: var(--gray-350);
border-top: none;
border-left: none;
border-right: none;
width: 100%;
padding-bottom: 15px;
}
.edit-profile-input input:focus {
outline: none;
}
.edit-profile p {
margin-bottom: 5px;
font-size: 18px;
color: var(--black);
font-weight: 500;
}
.edit-profile a {
font-size: 14px;
color: var(--black);
font-weight: 500;
}
.edit-profile .primary-button {
padding: 18px 30px;
margin-top: 40px;
}
.edit-profile {
padding-bottom: 120px;
}
/* Edit payment */
#deleteCardModal .modal-body {
display: flex;
flex-direction: column;
align-items: center;
padding: 60px 50px;
}
#deleteCardModal .modal-body p {
font-size: 20px;
color: var(--black);
font-weight: 300;
margin-bottom: 5px;
}
#deleteCardModal .modal-body h2 {
font-size: 32px;
color: var(--black);
font-weight: 700;
margin-bottom: 30px;
}
#deleteCardModal .modal-body .primary-button {
width: 100%;
margin-bottom: 15px;
padding: 18px;
}
#deleteCardModal .modal-body .black-button-outline {
width: 70%;
padding: 14px;
}
.payment-method-profile-intro h2 {
font-size: 36px;
color: var(--black);
font-weight: 700;
margin-bottom: 0;
margin-top: 3px;
}
.payment-method-profile #default,
#cardEdit #defaultEdit {
width: 20px;
height: 20px;
}
.payment-method-profile #default:checked,
#cardEdit #defaultEdit:checked {
accent-color: var(--primary-color);
}
.payment-method-profile-intro {
margin-top: 55px;
margin-bottom: 35px;
}
.profile-payment-method .payment-option {
margin-top: 0;
}
.profile-payment-method .col-6 p:first-child {
font-size: 14px;
color: var(--black);
font-weight: 400;
margin-bottom: 5px;
}
.profile-payment-method {
margin-bottom: 100px;
}
.saved-cards label span:first-child {
font-size: 15px;
color: var(--black);
font-weight: 500;
}
.saved-cards label span:nth-child(2) {
font-size: 12px;
color: #535353;
display: flex;
align-items: center;
font-weight: 400;
}
.saved-cards label span:nth-child(2) a {
margin-left: 10px;
display: none;
}
.saved-cards label span:nth-child(2) a:hover i {
color: var(--white);
background: #ea2121;
border-radius: 5px;
}
.saved-cards label span:nth-child(2) a i {
font-size: 14px;
color: var(--black);
padding: 10px;
transition: all 0.2s ease-in-out;
}
.saved-cards label {
width: 100%;
cursor: pointer;
transition: all 0.1s ease-in-out;
}
.saved-cards input[type="radio"]+label {
border: 1px solid var(--gray-350);
padding: 10px 20px;
font-size: 14px;
width: 100%;
text-align: center;
color: var(--black);
border-radius: 5px;
}
.saved-cards input[type="radio"]+label:hover {
border: 1px solid var(--black);
}
.saved-cards input[type="radio"]:checked+label {
border: 1px solid var(--black);
font-size: 14px;
}
.saved-cards input[type="radio"] {
display: none;
}
.saved-cards img {
width: 100%;
max-width: 40px;
max-height: 30px;
}
.saved-addresses label span:first-child {
font-size: 15px;
color: var(--black);
font-weight: 500;
}
.address-option-profile #default:checked {
accent-color: var(--primary-color);
}
.address-option-profile #default {
width: 20px;
height: 20px;
}
.saved-addresses label span:nth-child(2) {
font-size: 12px;
color: #535353;
display: flex;
align-items: center;
font-weight: 400;
}
.saved-addresses label span:nth-child(2) a {
margin-left: 10px;
display: none;
}
.saved-addresses label span:nth-child(2) a:hover i {
color: var(--white);
background: #ea2121;
border-radius: 5px;
}
.saved-addresses label span:nth-child(2) a i {
font-size: 14px;
color: var(--black);
padding: 10px;
transition: all 0.2s ease-in-out;
}
.saved-addresses label {
width: 100%;
cursor: pointer;
transition: all 0.1s ease-in-out;
}
.saved-addresses input[type="radio"]+label {
border: 1px solid var(--gray-350);
padding: 10px 20px;
font-size: 14px;
width: 100%;
text-align: center;
color: var(--black);
border-radius: 5px;
}
.saved-addresses input[type="radio"]+label:hover {
border: 1px solid var(--black);
}
.saved-addresses input[type="radio"]:checked+label {
border: 1px solid var(--black);
font-size: 14px;
}
.saved-addresses input[type="radio"] {
display: none;
}
.payment-method-profile.payment-method {
box-shadow: none;
margin-top: 0;
}
.payment-method-profile .save-card {
margin-top: 0;
}
.payment-method-profile .green-button {
width: 100%;
}
/* Addresses */
#deleteAddressModal .modal-body {
display: flex;
flex-direction: column;
align-items: center;
padding: 60px 50px;
}
#deleteAddressModal .modal-body p {
font-size: 20px;
color: var(--black);
font-weight: 300;
margin-bottom: 5px;
}
#deleteAddressModal .modal-body h2 {
font-size: 32px;
color: var(--black);
font-weight: 700;
margin-bottom: 30px;
text-align: center;
}
#deleteAddressModal .modal-body .primary-button {
width: 100%;
margin-bottom: 15px;
padding: 18px;
}
#deleteAddressModal .modal-body .black-button-outline {
width: 70%;
padding: 14px;
}
.address-option-profile-intro h2 {
font-size: 36px;
color: var(--black);
font-weight: 700;
margin-bottom: 0;
margin-top: 3px;
}
.address-option-profile-intro {
margin-top: 55px;
margin-bottom: 35px;
}
.address-option-profile {
box-shadow: none;
margin-top: 0;
}
.address-option-profile .save-address {
margin-top: 0;
}
.address-option-profile .green-button {
width: 100%;
}
.saved-addresses label span:first-child {
font-size: 15px;
color: var(--black);
font-weight: 500;
}
.saved-addresses label span:nth-child(2) {
font-size: 12px;
color: #535353;
display: flex;
align-items: center;
font-weight: 400;
}
.saved-addresses label span:nth-child(2) a {
margin-left: 10px;
display: none;
}
.saved-addresses label span:nth-child(2) a:hover i {
color: var(--white);
background: #ea2121;
border-radius: 5px;
}
.saved-addresses label span:nth-child(2) a i {
font-size: 14px;
color: var(--black);
padding: 10px;
transition: all 0.2s ease-in-out;
}
.saved-addresses label {
width: 100%;
cursor: pointer;
transition: all 0.1s ease-in-out;
}
.saved-addresses input[type="radio"]+label {
border: 1px solid var(--gray-350);
padding: 10px 20px;
font-size: 14px;
width: 100%;
color: var(--black);
border-radius: 5px;
}
.saved-addresses input[type="radio"]+label:hover {
border: 1px solid var(--black);
}
.saved-addresses input[type="radio"]:checked+label {
border: 1px solid var(--black);
font-size: 14px;
}
.saved-addresses input[type="radio"] {
display: none;
}
.saved-addresses img {
width: 100%;
max-width: 40px;
max-height: 30px;
}
.saved-addresses i {
font-size: 24px;
color: var(--black);
}
/* Purchase history */
.purchase-history-intro h2 {
font-size: 36px;
color: var(--black);
font-weight: 700;
margin-bottom: 0;
margin-top: 3px;
}
.purchase-history-top-card hr,
.order-details-top-card hr {
display: none;
color: var(--gray-350);
margin-bottom: 20px;
margin-top: 20px;
}
.purchase-history-intro {
margin-top: 55px;
margin-bottom: 35px;
}
.purchase-history-intro .select2-container--default .select2-selection--single {
border: 1px solid var(--black);
border-radius: 5px;
font-size: 16px;
color: var(--black);
font-weight: 500;
padding-right: 60px;
padding-top: 12px;
padding-bottom: 12px;
align-items: center;
display: flex;
height: 100%;
position: relative;
width: fit-content;
}
.purchase-history-intro .select2-container--default .select2-selection--single .select2-selection__arrow {
top: 12px;
right: 12px;
}
.purchase-history-top-card {
background-color: var(--gray-200);
border-radius: 5px;
padding: 20px 28px;
}
.purchase-history-top-card p:first-child {
font-size: 14px;
color: var(--gray-800);
font-weight: 400;
margin-bottom: 0;
}
.purchase-history-top-card p:last-child {
font-size: 16px;
color: var(--black);
font-weight: 500;
margin-bottom: 0;
line-break: anywhere;
}
.purchase-history-card-container {
margin-bottom: 50px;
}
.purchase-history-card-container:last-child {
margin-bottom: 120px;
}
.history-item-card img {
width: 100%;
max-width: 130px;
object-fit: cover;
}
.history-item-card i {
color: var(--gray-400);
font-size: 22px;
}
.history-item-prices h2 {
font-size: 18px;
color: var(--black);
margin-bottom: 0;
font-weight: 600;
}
.purchase-history-body-card {
border-radius: 5px;
border: 1px solid var(--gray-400);
padding: 30px;
}
.purchase-history-body-card hr {
color: var(--gray-400);
margin: 30px 0;
}
.product-image {
border: 1px solid var(--gray-200);
width: 100%;
padding: 0 14px;
display: flex;
justify-content: center;
}
/* Order details */
.order-details-intro h2 {
font-size: 36px;
color: var(--black);
font-weight: 700;
margin-bottom: 0;
margin-top: 3px;
}
.order-details-btn-mobile {
display: none;
}
.order-details-intro {
margin-top: 55px;
margin-bottom: 35px;
}
.order-details-top-card {
border-radius: 5px;
background-color: var(--gray-200);
padding: 20px 28px;
}
.order-details-top-card p {
margin-bottom: 0;
}
.order-details-top-card p:first-child {
font-size: 14px;
color: var(--gray-800);
font-weight: 400;
}
.order-details-top-card p:last-child {
font-size: 16px;
font-weight: 500;
line-break: anywhere;
}
.delivery-time {
color: #37b853;
}
.order-details-body-card {
border-radius: 5px;
border: 1px solid var(--gray-400);
padding: 30px;
margin-bottom: 200px;
}
.order-details-body-card hr {
color: var(--gray-400);
margin: 30px 0;
}
.order-details-side-content {
top: 30px;
position: sticky;
margin-bottom: 200px;
}
.sent-address {
box-shadow: 0px 4px 25px 1px rgba(0, 0, 0, 0.05);
border-radius: 5px;
padding: 22px;
margin-bottom: 23px;
}
.sent-address h2 {
font-size: 20px;
color: var(--black);
font-weight: 700;
margin-bottom: 5px;
}
.sent-address p {
font-size: 16px;
color: var(--black);
font-weight: 400;
margin-bottom: 0;
}
.payment-method-card {
box-shadow: 0px 4px 25px 1px rgba(0, 0, 0, 0.05);
border-radius: 5px;
}
.payment-method-card-top {
padding: 22px;
}
.payment-method-card-top h2 {
font-size: 20px;
color: var(--black);
font-weight: 700;
}
.payment-method-card-top h2:first-child {
margin-bottom: 6px;
}
.payment-method-card-top h2:last-of-type {
margin-bottom: 20px;
}
.order-details-content p {
font-size: 20px;
color: var(--black);
font-weight: 400;
margin-bottom: 0;
}
.order-details-bottom {
padding: 22px 30px;
}
.order-details-bottom p {
font-size: 20px;
color: var(--black);
font-weight: 700;
margin-bottom: 0;
}
.order-details-final-price p:first-child {
font-size: 20px;
color: var(--black);
font-weight: 700;
margin-bottom: 0;
}
.order-details-final-price p:last-child {
font-size: 14px;
color: var(--black);
font-weight: 400;
margin-bottom: 0;
}
.payment-method-type {
font-size: 16px;
color: var(--black);
font-weight: 400;
margin-bottom: 40px;
}
/* Order problems */
.order-problems-intro h2 {
font-size: 36px;
color: var(--black);
font-weight: 700;
margin-bottom: 0;
margin-top: 3px;
}
.order-problems-intro {
margin-top: 55px;
margin-bottom: 35px;
}
.order-problems-top {
background-color: var(--gray-200);
border-radius: 5px;
padding: 20px 23px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.order-problems-top h2 {
font-size: 20px;
color: var(--black);
font-weight: 500;
margin-bottom: 0;
}
.order-problems-body {
border-radius: 5px;
border: 1px solid var(--gray-400);
padding: 30px;
margin-bottom: 200px;
}
.order-problems-body hr {
color: var(--gray-400);
margin: 30px 0;
}
.order-problems-item-card img {
width: 100%;
max-width: 130px;
object-fit: cover;
}
.order-problems-item-card i {
color: var(--gray-400);
font-size: 22px;
}
/* FAQ */
.faq-intro h2 {
font-size: 36px;
color: var(--black);
font-weight: 700;
margin-bottom: 0;
margin-top: 3px;
}
.faq-intro {
margin-top: 55px;
margin-bottom: 35px;
}
.faq #accordionQuestions {
padding: 0;
margin-bottom: 20rem;
}
.faq #accordionQuestions .accordion-item:first-child .accordion-header {
border-top: 0;
}
/* Privacy policy */
.privacy-policy-intro h2 {
font-size: 36px;
color: var(--black);
font-weight: 700;
margin-bottom: 0;
margin-top: 3px;
}
.privacy-policy-intro {
margin-top: 55px;
margin-bottom: 35px;
}
.privacy-policy-content h2 {
font-size: 20px;
color: var(--black);
font-weight: 700;
margin-bottom: 11px;
}
.privacy-policy-content h3 {
font-size: 16px;
font-weight: 300;
color: var(--black);
margin-bottom: 35px;
}
.privacy-policy-content-container {
margin-bottom: 200px;
}
/* Terms */
.terms-intro h2 {
font-size: 36px;
color: var(--black);
font-weight: 700;
margin-bottom: 0;
margin-top: 3px;
}
.terms-intro {
margin-top: 55px;
margin-bottom: 35px;
}
.terms-content h2 {
font-size: 20px;
color: var(--black);
font-weight: 700;
margin-bottom: 11px;
}
.terms-content h3 {
font-size: 16px;
font-weight: 300;
color: var(--black);
margin-bottom: 35px;
}
.terms-content-container {
margin-bottom: 200px;
}
@media (max-width: 1800px) {
.swiper-button-next-2,
.swiper-button-next-4 {
right: 20px;
}
.swiper-button-prev-2,
.swiper-button-prev-4 {
left: 20px;
}
}
@media (max-width: 1400px) {
.container-large {
width: 1270px;
}
.container-medium {
width: 1170px;
}
.container-small {
width: 970px;
}
.container-smaller {
width: 750px;
}
.navbar .navbar-nav {
gap: 1rem;
}
.right-side-content .primary-button {
padding: 14px 18px;
}
.nav-link {
font-size: 14px;
}
.right-side-content {
gap: 25px;
}
.swiper-button-next-2,
.swiper-button-next-4 {
right: 20px;
}
.swiper-button-prev-2,
.swiper-button-prev-4 {
left: 20px;
}
.swiperProducts .swiper-slide,
.swiperRecommendedProducts .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
.video-content {
padding: 0 70px;
}
.product-filters .select2-container--default .select2-selection--single {
padding-right: 40px;
}
.order-details-top-card .primary-button-outline {
padding: 10px;
}
.break-line-small-screen {
display: block;
}
}
@media (max-width: 1200px) {
.container-large {
width: 1170px;
}
.container-medium {
width: 970px;
}
.container-small {
width: 750px;
}
.container-smaller {
width: 100%;
}
.navbar .navbar-nav {
gap: 0.5rem;
}
.right-side-content {
gap: 14px;
}
.bag-shopping-count {
font-size: 12px;
}
.header-login i,
.bag-shopping i {
font-size: 32px;
}
.right-side-content .primary-button {
padding: 14px;
}
.video-content {
padding: 0 20px;
}
.filters-hide-mobile {
display: none !important;
}
.know-our-team-text {
padding: 0 20px;
}
#pixForm {
padding: 0;
}
}
@media (max-width: 992px) {
.club-advantage-list.first li {
padding-left: 0;
}
.navbar-nav .products-menu {
display: none;
}
.brotherhood {
flex-direction: column-reverse;
}
.brotherhood img {
margin-bottom: 50px;
}
.container-large {
width: 970px;
}
.container-medium {
width: 750px;
}
.container-small {
width: 100%;
}
.container-smaller {
width: 100%;
}
.header-content-mobile {
display: block;
}
.break-line-small-screen {
display: contents;
}
.header-content-mobile .fa-user {
color: var(--gray-600);
font-size: 30px;
}
.navbar-brand {
margin-right: 0;
}
.header-search-mobile {
display: contents;
}
.header-search-mobile input {
padding: 12px;
margin-top: 16px;
}
.header-search-mobile button {
border: none;
background-color: var(--primary-color);
border-radius: 5px;
color: var(--white);
font-size: 22px;
display: flex;
justify-content: center;
align-items: center;
margin-top: -50px;
padding: 14px;
}
.order-details-btn,
.need-help-btn {
display: none;
}
.order-details-body-card {
margin-bottom: 40px;
}
.order-details-btn-mobile {
display: block;
}
.navbar-nav {
margin-top: 20px;
}
.nav-link {
font-size: 16px;
}
.navbar-nav hr {
display: block;
}
.home-first-card {
margin-bottom: 25px;
}
.video-content h3 {
margin-top: 40px;
}
.productGallerySwiper .swiper-button-next {
margin-right: 26px;
}
.productGallerySwiper .swiper-button-prev {
margin-left: 26px;
}
.swiper-vertical>.swiper-wrapper {
flex-direction: row;
}
.product-img-side {
display: none;
}
.product-card-data .primary-button {
padding: 14px 20px;
}
.product-video-container .play-button {
width: 55px;
height: 55px;
font-size: 24px;
}
.product-video-container .custom-btn {
padding: 12px 30px;
}
.clean-filters-desktop {
display: none;
}
.clean-filters-mobile {
display: flex;
}
.about img {
margin-top: 80px;
}
.about-content {
padding: 0px 12px;
}
.club-initial {
margin-top: 50px;
}
.club-advantage-section h2 {
padding: 0;
}
#accordionQuestions {
padding: 0;
}
.categorySwiper img {
max-height: 100%;
margin-top: 45px;
}
.category-card-container {
padding: 55px 30px;
}
.about-banner.about img {
margin-top: 0;
padding-bottom: 32px;
}
.about-banner.about {
margin-bottom: 100px;
}
.know-our-team {
padding: 0 26px;
}
.know-our-team img {
margin-bottom: 32px;
}
.form-card {
padding: 53px 30px;
}
.cart-content-card {
margin-bottom: 0;
}
.payment-method {
margin-bottom: 0;
}
.order-details.container {
padding-right: calc(var(--bs-gutter-x) * 0.5);
padding-left: calc(var(--bs-gutter-x) * 0.5);
}
.order-confirmed.container {
padding-right: calc(var(--bs-gutter-x) * 0.5);
padding-left: calc(var(--bs-gutter-x) * 0.5);
}
.purchase-history-top-card hr,
.order-details-top-card hr {
display: block;
}
.highlightProductSwiper img {
margin-bottom: 30px;
}
}
@media (max-width: 768px) {
.custom-filters-list .main-filter {
margin-top: 24px;
}
.container-large,
.container-medium,
.container-small,
.container-smaller {
width: 100%;
}
.brotherhood-content {
padding: 0 12px;
display: flex;
}
.footer-content-items {
margin-bottom: 60px;
}
.footer-logo {
margin-bottom: 40px;
}
.footer-body img {
min-height: 42px;
max-height: 42px;
}
.footer-bottom p {
font-size: 10px;
}
.payment-option .save-card .primary-button {
width: 100%;
}
.wpp-floating {
bottom: 12px;
right: 12px;
}
#rateModal .modal-body {
padding-left: 20px;
padding-right: 20px;
}
#allRatingsModal .modal-body {
padding: 20px;
}
.banner-home h1,
.more-sales-products h2,
.highlight-section-title,
.another-products h2,
.banner-products h1,
.club-advantage-section h2,
.recommended-products h2 {
font-size: 40px;
}
.video-content h2 {
margin-bottom: 14px;
font-size: 36px;
}
.home-first-card h2,
.home-second-card h2 {
font-size: 24px;
}
.highlight-description,
.video-content p {
font-size: 16px;
}
.order-problems-intro h2,
.profile-intro h1,
.edit-profile-intro h1,
.faq-intro h2,
.terms-intro h2 {
font-size: 30px;
}
.highlight-title {
font-size: 30px;
}
.highlight-ref {
margin-bottom: 4px;
}
.highlightProductSwiper img {
max-width: 400px;
}
.club-card h2 {
font-size: 28px;
margin-bottom: 26px;
}
.highlight-product-bg .green-button-outline {
margin-top: 30px;
}
.club-card-bg {
justify-content: center;
padding-top: 4rem;
padding-left: 30px;
padding-right: 30px;
}
.purchase-history-intro .select2-container--default {
margin-top: 24px;
}
.purchase-history-intro .select2-container--default .select2-selection--single {
width: 100%;
}
.order-problems-top .primary-button {
width: 100%;
}
.highlight-product-bg {
padding: 50px 30px;
}
.highlight-product {
padding-right: 12px;
}
#deleteAddressModal .modal-body {
padding: 35px 25px;
}
.history-item-card img {
max-width: 160px;
}
.product-image {
margin-bottom: 20px;
}
.product-card-data-hide-mobile {
display: none;
}
.product-card-data-hide-desktop {
display: block;
margin-top: 55px;
}
.review-author h2 {
margin-top: 28px;
}
.review-content h2 {
margin-top: 24px;
}
.review-buttons button {
width: 100%;
margin-bottom: 23px;
}
.review-buttons {
flex-direction: column-reverse;
}
.custom-padding-product {
padding-right: 12px;
}
#rateModal .primary-button {
width: 100%;
}
.open-filters-btn button {
margin-bottom: 24px;
}
.custom-classes .select2-container,
.open-filters-btn button,
.product-filters .select2-container--default .select2-selection--single {
width: 100% !important;
}
.filter-button-desktop {
display: none;
}
.filter-button-mobile {
display: flex;
}
.product-filters .primary-button {
margin-top: 30px;
margin-bottom: 20px;
width: 100%;
}
.video-container-content {
padding: 0 12px;
}
.about-video {
margin-bottom: 100px;
}
.know-our-team {
margin-bottom: 120px;
}
.know-our-team-content {
padding: 40px 16px;
}
.error .primary-button {
width: 75%;
}
.error h1 {
font-size: 48px;
}
.error h2 {
font-size: 18px;
}
.contact-card {
padding: 40px 26px;
}
.product-title {
font-size: 18px;
margin-bottom: 28px;
}
.cart-item-prices {
flex-wrap: wrap-reverse;
}
.quantity-btn {
height: 100%;
}
.cart-item-card i {
font-size: 18px;
}
.cart-item-card {
padding: 16px;
}
.cart-item-card img {
margin-right: 0;
margin-bottom: 26px;
max-width: 160px;
}
.cart-item-card {
position: relative;
}
.delete-card-item {
position: absolute;
top: 30px;
right: 30px;
}
.due-date {
margin-bottom: 1rem;
}
.add-card,
.add-address,
.edit-address {
margin-top: 24px;
}
}
@media (max-width: 576px) {
#pixForm img {
margin-bottom: 26px;
}
.custom-alert {
right: 0;
left: 0;
margin-left: 12px;
margin-right: 12px;
z-index: 1150;
}
.custom-alert p {
font-size: 14px;
}
.product-card .card-img-top {
padding: 36px 30px 0 30px;
min-height: 228px;
}
}
@media (max-width: 428px) {
.footer-bottom img {
margin-top: 12px;
max-width: 34px;
}
.footer-bottom p {
text-align: center;
}
.container-large,
.container-medium,
.container-small,
.container-smaller {
width: 100%;
}
.product-card-data .primary-button {
width: 100%;
font-size: 14px;
}
.product-quantity input {
max-width: 50px;
}
}
[onclick] {
cursor: pointer;
}
.display-all {
font-size: 20px!important;
color: var(--primary-color)!important;
font-weight: 600!important;
}