html {
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: 100%;
line-height: 1.15; }
body, html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background-color: #fff;
color: var(--skin-text-color);
font-family: var(--skin-text-font);
font-size: 14px;
font-weight: 400;
line-height: 1.4;
position: relative; }
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
/* 1.1 - HTML5 Elements */
article, aside, details, figcaption, figure, dialog, footer, header, hgroup, menu, nav, section {
display: block; }
/* 1.2 - Typography */
h1, h2, h3, h4, h5, h6 {
color: var(--skin-text-color);
font-family: var(--skin-text-font);
margin: 0 0 10px 0;
font-weight: 600;
line-height: 1.6; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: var(--skin-text-color); }
/* 1.3 - Links */
a {
color: var(--skin-text-color);
text-decoration: none;
outline: none;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; }
a:hover, a:focus {
color: var(--skin-text-color);
text-decoration: none;
outline: none; }
a:active {
outline: none; }
.a-link {
text-decoration: underline !important; }
strong {
font-weight: 700; }
em {
font-style: italic; }
/* 1.4 - Lists */
ul, ol {
padding: 0;
margin: 0;
list-style-type: none; }
.typeList-style * {
max-width: 100% !important; }
.typeList-style ul {
list-style: initial;
padding-left: 20px; }
.typeList-style ol {
list-style-type: decimal;
padding-left: 20px; }
.typeList-style ul ul {
list-style-type: circle; }
.typeList-style ul ul ul {
list-style-type: square; }
.typeList-style ul li, .typeList-style ol li {
margin: 5px 0; }
/* 1.5 - form */
input[type='text'], input[type='email'], input[type='tel'], input[type='password'], .input {
-moz-appearance: none;
/* Firefox */
-webkit-appearance: none;
/* Safari and Chrome */
appearance: none; }
input[type=date].form-control, input[type=time].form-control, input[type=datetime-local].form-control, input[type=month].form-control {
-moz-appearance: none;
appearance: none; }
input[placeholder] {
text-overflow: ellipsis; }
input:required {
box-shadow: none; }
textarea {
resize: none; }
.form-control {
-ms-flex: 0 0 auto !important;
flex: 0 0 auto !important;
display: block;
width: 100%;
height: 45px;
padding: 6px 12px;
font-size: 12px;
font-weight: 500;
line-height: 1.5;
color: #27251f;
background: #F9FAFB;
background-clip: padding-box;
border: 1px solid var(--skin-border-color);
border-radius: 2px !important;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
/*
&.is-invalid, &:invalid {
border-color: #d91f46;
padding-right: calc(1.5em + 0.75rem) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23d91f46' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23d91f46' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
&:focus {
border-color: #d91f46!important;
box-shadow: 0 0 0 .2rem rgba(217,31,70,.25);
}
&~.invalid-feedback {display: block;}
}
*/ }
.form-control::-ms-expand {
background-color: transparent;
border: 0; }
.form-control:focus {
color: #27251f;
background-color: #fff;
border-color: #27251f;
outline: 0;
box-shadow: none; }
.form-control:-ms-input-placeholder {
color: #000102;
opacity: 1; }
.form-control::placeholder {
color: #000102;
opacity: 1; }
.form-control:disabled, .form-control[readonly] {
background-color: #e9ecef;
opacity: 1; }
.form-control:autofill, .form-control:valid {
background: #F9FAFB; }
.form-control.warming {
border: 1px solid red; }
@media (min-width: 992px) {
.form-control {
font-size: 14px; } }
.form-check-input.is-invalid ~ .form-check-label {
color: #d91f46; }
.form-check-input.is-invalid ~ .invalid-feedback {
display: block; }
select.form-control:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #27251f; }
select.form-control:focus::-ms-value {
color: #27251f;
background-color: #fff; }
select.form-control[size], select.form-control[multiple] {
height: auto; }
select.form-control.is-invalid {
padding-right: 3rem !important;
background-position: right 1.5rem center; }
textarea.form-control {
height: auto; }
textarea.form-control.is-invalid {
padding-right: calc(1.5em + 0.75rem);
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); }
.form-group {
margin-bottom: 20px;
position: relative; }
.form-group .invalid-feedback {
display: none;
width: 100%;
margin-top: .25rem;
font-size: 0.625rem;
color: #d91f46; }
.form-group.input-group {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: stretch;
align-items: stretch;
width: 100%; }
.form-group.input-group label {
color: #71706c;
display: -ms-flexbox;
display: flex;
font-size: .625rem;
height: 1rem;
left: 1.25rem;
margin: .375rem 0;
position: absolute;
z-index: 5; }
.form-group.input-group > .form-control,
.form-group.input-group > .form-control-plaintext,
.form-group.input-group > .custom-select,
.form-group.input-group > .custom-file {
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 1%;
min-width: 0;
margin-bottom: 0; }
.form-group.input-group.required .form-control-label::after {
color: #71706c;
content: "*";
padding-left: 2px; }
.form-group.input-group.required .form-control-label::before {
content: ""; }
.form-group.check-group label[for*='radio'] {
margin-bottom: 0;
margin: 0 20px 0 4px;
font-size: 12px; }
.form-group.check-group input[name="gender"] {
margin-top: 0;
vertical-align: top;
width: 14px;
height: 14px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
cursor: pointer;
outline: 0 !important; }
.form-group.check-group input[name="gender"]:before {
content: "";
position: absolute;
z-index: 1;
left: -1px;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: 10px;
height: 10px;
background: #fff;
border: 1px solid #fff;
cursor: pointer;
border-radius: 50%; }
.form-group.check-group input[name="gender"]:checked:before {
background: var(--skin-primary-color-1);
border-color: var(--skin-primary-color-1); }
.form-group.check-group input[name="gender"]:after {
content: "";
position: absolute;
left: -1px;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: 14px;
height: 14px;
background: #fff;
border: 1px solid #777777;
cursor: pointer;
border-radius: 50%; }
.form-group.check-group input[name="gender"]:checked:after {
border-color: var(--skin-primary-color-1); }
/* 1.6 - Img */
img {
max-width: 100%; }
/* 1.7 - Button */
.btn-link {
color: var(--skin-text-color);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
height: auto;
padding: 0;
position: relative;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
-webkit-transition: all .15s ease-in-out;
transition: all .15s ease-in-out; }
.btn-link.has-svg {
gap: 8px; }
.btn-link.has-svg svg {
width: 14px;
height: 14px;
position: relative;
z-index: 2; }
.btn-link:hover {
text-decoration: none;
color: var(--skin-text-color); }
@media (min-width: 992px) {
.btn-link {
font-size: 16px; }
.btn-link.has-svg svg {
width: 24px;
height: 24px; } }
.btn-go, .btn {
height: 36px;
color: var(--skin-textbtn-color);
border: 1px solid var(--skin-borderbtn-color);
background: var(--skin-bgbtn-color);
border-radius: 0px;
box-shadow: none;
outline: none !important;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 12px;
transition: all .4s; }
.btn-go.has-svg, .btn.has-svg {
gap: 4px; }
.btn-go.has-svg svg, .btn.has-svg svg {
width: 14px;
height: 14px;
position: relative;
z-index: 2; }
.btn-go:hover, .btn:hover {
color: #fff;
background: #000102;
border: 1px solid #000102; }
.btn-go.btn-second, .btn.btn-second {
border: 1px solid var(--skin-borderbtn-color);
color: #fff;
background: var(--skin-borderbtn-color); }
.btn-go.btn-third, .btn.btn-third {
border: 1px solid #D1D5DB;
color: var(--skin-text-color);
background: #D1D5DB; }
.btn-go.outline-1, .btn.outline-1 {
border: 1px solid #ffffff;
color: #ffffff;
background: transparent;
border-radius: 22px; }
.btn-go.outline-1:hover, .btn.outline-1:hover {
color: #000102;
background: #fff;
border: 1px solid #000102; }
.btn-go.outline-2, .btn.outline-2 {
border: 1px solid #000102;
color: #000102;
background: transparent; }
.btn-go.outline-2:hover, .btn.outline-2:hover {
color: #fff;
background: #000102; }
.btn-go.btn-icon, .btn.btn-icon {
padding: 0;
width: 26px;
height: 26px; }
.btn-go.btn-full, .btn.btn-full {
width: 100%;
display: flex; }
@media (min-width: 568px) {
.btn-go, .btn {
padding: 4px 20px; } }
@media (min-width: 992px) {
.btn-go, .btn {
font-size: 15px;
padding: 12px 24px; }
.btn-go.has-svg svg, .btn.has-svg svg {
width: 20px;
height: 20px; }
.btn-go.btn-icon, .btn.btn-icon {
width: 36px;
height: 36px; }
.btn-go.outline-1, .btn.outline-1 {
height: 46px; }
.btn-go:not(.btn-icon, .btn-icon), .btn:not(.btn-icon, .btn-icon) {
padding: 0 24px; } }
.btn-loadmore {
position: relative;
color: var(--skin-textbtn-color);
border: 1px solid var(--skin-borderbtn-color);
background: var(--skin-bgbtn-color);
text-transform: initial; }
/* 1.8 - Swiper */
.swiper-style .swiper-pagination {
z-index: 4;
justify-content: center;
display: flex;
position: relative;
padding: 16px 0; }
.swiper-style .swiper-pagination span {
display: inline-flex;
width: 40px;
padding: 10px 0;
position: relative;
background: transparent;
border-radius: 0; }
.swiper-style .swiper-pagination span:before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
height: 4px;
width: 40px;
background: rgba(255, 255, 255, 0.4); }
.swiper-style .swiper-pagination span.swiper-pagination-bullet-active:before {
background: white; }
.swiper-style .swiper-button-next, .swiper-style .swiper-button-prev {
align-items: center;
border-radius: 100%;
cursor: pointer;
display: flex;
height: 32px;
width: 32px;
transition: all .4s;
justify-content: center;
font-size: 0;
background: var(--skin-primary-color);
color: #fff;
border: 1px solid var(--skin-primary-color);
margin: 0;
opacity: 1; }
.swiper-style .swiper-button-next svg, .swiper-style .swiper-button-prev svg {
width: 16px;
height: 16px; }
.swiper-style .swiper-button-next:after, .swiper-style .swiper-button-prev:after {
content: none; }
.swiper-style .swiper-button-next.swiper-button-disabled, .swiper-style .swiper-button-prev.swiper-button-disabled {
background: #fff;
border-color: #fff;
color: var(--skin-primary-color);
opacity: 0.4; }
@media (min-width: 992px) {
.swiper-style .swiper-button-next, .swiper-style .swiper-button-prev {
height: 42px;
width: 42px; }
.swiper-style .swiper-button-next svg, .swiper-style .swiper-button-prev svg {
width: 19px;
height: 19px; } }
.swiper-style.swiper-banner .swiper-button-next, .swiper-style.swiper-banner .swiper-button-prev {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: transparent;
color: #fff;
border: 1px solid #fff; }
.swiper-style.swiper-banner .swiper-button-prev {
left: 3%; }
.swiper-style.swiper-banner .swiper-button-next {
right: 3%; }
.swiper-style.swiper-loop .swiper-button-next, .swiper-style.swiper-loop .swiper-button-prev {
top: 50%;
transform: translateY(-50%); }
@media (min-width: 992px) {
.swiper-style.swiper-loop .swiper-button-prev {
left: -21px; }
.swiper-style.swiper-loop .swiper-button-next {
right: -21px; } }
.swiper-gallery .swiper-pagination {
z-index: 10;
justify-content: center;
display: flex;
position: absolute;
padding: 16px 0;
bottom: 0; }
.swiper-gallery .swiper-pagination span {
display: inline-flex;
width: 12px;
height: 12px;
padding: 0;
position: relative;
background: transparent;
border-radius: 100%; }
.swiper-gallery .swiper-pagination span:before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
height: 12px;
width: 12px;
background: rgba(0, 0, 0, 0.9);
border-radius: 100%;
background-color: rgba(255, 255, 255, 0.8);
border: solid 1px rgba(153, 153, 153, 0.8); }
.swiper-gallery .swiper-pagination span.swiper-pagination-bullet-active:before {
background-color: rgba(56, 56, 56, 0.8);
border-color: rgba(255, 255, 255, 0.8); }
/* 1.9 - Layout */
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
padding-right: 16px;
padding-left: 16px; }
.row {
margin-left: -16px;
margin-right: -16px; }
.container, .container-fluid {
padding-left: 16px;
padding-right: 16px; }
@media (min-width: 576px) {
.container {
max-width: 100%; } }
@media (min-width: 736px) {
.w-8 {
width: 83.3333333333%;
margin: auto; } }
@media (min-width: 768px) {
.container-md, .container-sm, .container {
max-width: 100%; } }
@media (min-width: 992px) {
.container-md, .container-sm, .container {
max-width: 940px; } }
@media (min-width: 1025px) {
.container-lg, .container-md, .container-sm, .container {
max-width: 940px; } }
@media (min-width: 1200px) {
.container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1160px; } }
@media (min-width: 1400px) {
.container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 100%; }
.container {
padding-left: 120px;
padding-right: 120px;
max-width: 1440px; } }
/* 1.10 - Anmaiton css3 */
@keyframes bounce {
from {
transform: translate3d(0, 0, 0); }
to {
transform: translate3d(0, 10px, 0); } }
@keyframes sk-rotate {
100% {
transform: rotate(360deg); } }
@keyframes sk-bounce {
0%, 100% {
transform: scale(0); }
50% {
transform: scale(1); } }
@keyframes load {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
@keyframes addedToBag {
0% {
background-color: #27251f;
color: #27251f; }
10% {
background-color: #27251f;
color: #fff; }
90% {
background-color: #27251f;
color: #fff; }
100% {
background-color: #27251f;
color: #27251f; } }
@keyframes check {
0% {
border-color: #27251f;
top: .6em; }
5% {
border-color: #fff;
top: .6em; }
10% {
border-color: #fff;
top: 1.1em; }
12% {
border-color: #fff;
top: .8em; }
15% {
border-color: #fff;
top: 1.1em; }
90% {
border-color: #fff;
top: 1.1em; }
100% {
border-color: #27251f;
top: 1.1em; } }
@keyframes loading {
100% {
transform: translateX(100%); } }
@keyframes popoverTheLookDot {
from {
opacity: 0;
transform: scale(0.6); }
to {
opacity: 1;
transform: scale(1); } }
/* 1.11 - Tables */
table {
width: 100%;
border-spacing: 0; }
table tr td {
border-top: 1px solid #dddddd; }
table tr td, table tr th {
padding: 10px;
text-align: left; }
table tr td:first-child, table tr th:first-child {
padding-left: 0px; }
table tr td:last-child, table tr th:last-child {
padding-right: 0px; }
/* 1.12 - Variable */
.article-item .article-item--detail .art-title a, .article-item .article-item--detail .art-desc {
white-space: initial;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box; }
/*-----------------------------------------------*/
/* GENERAL */
/*-----------------------------------------------*/
.overlay {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(2, 6, 23, 0.1);
display: none;
z-index: 10; }
.overlay.overlay-menu {
z-index: 10; }
/* - Loading */
.mainLoading {
position: fixed;
z-index: 1051;
text-align: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
opacity: 0;
visibility: hidden;
display: none; }
.mainLoading .underlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .5;
background-color: #000; }
.mainLoading .spinner {
position: fixed;
width: 80px;
height: 80px;
text-align: center;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -40px;
animation: sk-rotate 2s infinite linear; }
.mainLoading .dot1, .mainLoading .dot2 {
width: 60%;
height: 60%;
display: inline-block;
position: absolute;
top: 0;
background-color: #fff;
border-radius: 100%;
animation: sk-bounce 2s infinite ease-in-out; }
.mainLoading .dot2 {
top: auto;
bottom: 0;
animation-delay: -1s; }
.mainLoading.active {
opacity: 1;
visibility: visible;
display: block; }
.no-img--loading img {
visibility: hidden;
opacity: 0; }
.no-img--loading .aspect-ratio {
position: relative;
overflow: hidden;
padding-bottom: 100%;
background: #f3f3f3; }
.no-img--loading .aspect-ratio:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
transform: translateX(-100%);
animation: loading 1.5s infinite;
z-index: 1;
top: 0; }
.product-loading {
padding: 0 1px; }
.product-loading .product-loop--wrap {
background: #fff;
height: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease; }
.product-loading .product-loop--head .lazy-img {
position: relative;
width: 100%;
height: 0;
flex: 0 0 100%;
-ms-flex: 0 0 100%;
padding-bottom: calc(1024/683 * 100%);
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
background: #f5f5f5; }
.product-loading .product-loop--body {
position: relative;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
text-align: center;
background: #fff;
-webkit-transition: transform 300ms ease;
-moz-transition: transform 300ms ease;
-ms-transition: transform 300ms ease;
-o-transition: transform 300ms ease;
transition: transform 300ms ease; }
.product-loading .loading-mask .loading-mask--image {
position: relative;
overflow: hidden;
width: 100%;
padding: 0; }
.product-loading .loading-mask .loading-mask--detail {
padding: 10px 0; }
.product-loading .loading-mask .loading-mask--detail .mask-line {
height: 10px;
width: 100%;
border-radius: 8px;
margin: 4px 0;
background: #f5f5f5; }
.product-loading .loading-mask .loading-mask--detail .mask-line:nth-child(2) {
width: 80%;
background: #f5f5f5; }
.product-loading .loading-mask .loading-mask--detail .mask-line:nth-child(3) {
width: 65%;
background: #f5f5f5; }
.product-loading .product-loop-load {
border: 1px solid #eae8e4;
margin-left: -1px;
margin-bottom: -1px; }
.product-loading.small-loop .product-loop--wrap {
display: flex;
gap: 8px;
align-items: center;
flex-direction: row; }
.product-loading.small-loop .product-loop--head {
-webkit-flex: 0 0 40%;
flex: 0 0 40%;
max-width: 40%; }
.product-loading.small-loop .product-loop--head .lazy-img {
border-radius: 4px;
background: #F0EFEF;
padding-bottom: 100%; }
.product-loading.small-loop .product-loop--body {
-webkit-flex: 0 0 calc(60% - 8px);
flex: 0 0 calc(60% - 8px);
max-width: calc(60% - 8px); }
.product-loading.small-loop .loading-mask .loading-mask--detail {
padding: 4px 0; }
.product-loading.small-loop .loading-mask .loading-mask--detail .mask-line {
height: 5px;
margin: 2px 0; }
.catemenu-loading {
position: relative;
overflow: hidden;
height: 37px;
width: 100px;
background: #efefef; }
.line-loading .line-block {
height: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
overflow: hidden;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease; }
.line-loading .loading-mask .loading-mask--title {
padding: 10px 4px;
position: relative;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
justify-content: center;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
text-align: center;
background: #fff;
border: 1px solid #f5f5f5;
border-radius: 4px;
height: 94px;
-webkit-transition: transform 300ms ease;
-moz-transition: transform 300ms ease;
-ms-transition: transform 300ms ease;
-o-transition: transform 300ms ease;
transition: transform 300ms ease; }
.line-loading .loading-mask .loading-mask--title .mask-line {
height: 8px;
border-radius: 8px;
margin: 2px 0;
background: #f5f5f5; }
.line-loading .loading-mask .loading-mask--title .mask-line:nth-child(1) {
width: 100%; }
.line-loading .loading-mask .loading-mask--title .mask-line:nth-child(2) {
width: 80%; }
.line-loading .loading-mask .loading-mask--title .mask-line:nth-child(3) {
width: 60%; }
.line-loading .loading-mask .loading-mask--title .mask-line:nth-child(4) {
width: 40%; }
.line-loading.line-cart .line-block {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
height: 152px; }
.line-loading.line-cart .loading-mask .loading-mask--title {
-ms-flex: 0 0 88%;
flex: 0 0 88%;
max-width: 88%;
padding: 16px 24px;
border: none;
border-radius: 0; }
.line-loading.line-cart .loading-mask .loading-mask--img {
background: #f5f5f5;
-ms-flex: 0 0 12%;
flex: 0 0 12%;
max-width: 12%; }
.alert-info {
position: relative;
padding: .75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: .25rem; }
.unreset {
line-height: 1.2; }
.unreset body {
margin: 8px; }
.unreset th {
font-weight: bold;
text-align: center; }
.unreset caption {
text-align: center; }
.unreset h1 {
font-size: 2em;
margin: .67em 0; }
.unreset h2 {
font-size: 1.5em;
margin: .75em 0; }
.unreset h3 {
font-size: 1.17em;
margin: .83em 0; }
.unreset h4, .unreset p, .unreset blockquote, .unreset ul, .unreset fieldset, .unreset form, .unreset ol, .unreset dl, .unreset dir, .unreset menu {
margin: 1.12em 0; }
.unreset h5 {
font-size: .83em;
margin: 1.5em 0; }
.unreset h6 {
font-size: .75em;
margin: 1.67em 0; }
.unreset h1, .unreset h2, .unreset h3, .unreset h4, .unreset h5, .unreset h6, .unreset b, .unreset strong {
font-weight: bold; }
.unreset blockquote {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 40px;
margin-inline-end: 40px;
font-style: italic;
padding: 2px 0;
border-style: solid;
border-color: #ccc;
border-width: 0;
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px; }
.unreset i, .unreset cite, .unreset em, .unreset var, .unreset address {
font-style: italic; }
.unreset pre, .unreset tt, .unreset code, .unreset kbd, .unreset samp {
font-family: monospace; }
.unreset pre {
white-space: pre; }
.unreset big {
font-size: 1.17em; }
.unreset small, .unreset sub, .unreset sup {
font-size: .83em; }
.unreset sub {
vertical-align: sub; }
.unreset sup {
vertical-align: super; }
.unreset table {
border-spacing: 2px;
border-collapse: separate; }
.unreset thead, .unreset tbody, .unreset tfoot {
vertical-align: middle; }
.unreset td, .unreset th, .unreset tr {
vertical-align: inherit; }
.unreset s, .unreset strike, .unreset del {
text-decoration: line-through; }
.unreset hr {
border: 1px inset; }
.unreset ol, .unreset ul, .unreset dir, .unreset menu, .unreset dd {
margin-left: 40px; }
.unreset ol {
list-style-type: decimal; }
.unreset ul {
list-style-type: disc; }
.unreset ol ul, .unreset ul ol, .unreset ul ul, .unreset ol ol {
margin-top: 0;
margin-bottom: 0; }
.unreset figure {
margin: 1em 40px; }
.content-style-list ul {
list-style: initial;
padding-left: 30px; }
.content-style-list ol {
list-style: decimal;
padding-left: 30px; }
.content-style-list ul, .content-style-list ol {
margin-bottom: 12px; }
.content-style-list ul li:last-child, .content-style-list ol li:last-child {
margin-bottom: 0; }
.content-style-list ul ul, .content-style-list ol ul {
list-style: circle;
margin-bottom: 0; }
.content-style-list li, .content-style-list p {
margin-bottom: 10px; }
.content-style-list li {
margin-bottom: 2px; }
.content-style-list table {
width: 100% !important;
margin-bottom: 12px; }
.content-style-list h3, .content-style-list h4, .content-style-list h5, .content-style-list h6 {
margin-bottom: 12px;
font-weight: bold;
color: #000; }
.content-style-list h1, .content-style-list h2 {
color: #f00 !important;
margin-bottom: 12px;
font-weight: bold; }
.content-style-list h1 *, .content-style-list h2 * {
color: inherit !important; }
.content-style-list h1 {
font-size: 22px; }
.content-style-list h2 {
font-size: 18px; }
.content-style-list h3 {
font-size: 16px; }
.content-style-list h4 {
font-size: 14px; }
.content-style-list a[href] {
color: #007bff; }
.content-style-list blockquote {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 40px;
margin-inline-end: 40px;
font-style: italic;
padding: 2px 0;
border-style: solid;
border-color: #ccc;
border-width: 0;
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
margin-bottom: 12px; }
.content-style-list figure {
margin: 12px 40px; }
.content-style-list img {
display: block; }
/* - Breadcrumb - Pagination */
.breadcrumb-wrapper {
background: transparent; }
.breadcrumb-wrapper .breadcrumb-list {
overflow: hidden; }
.breadcrumb-wrapper .breadcrumb-list .breadcrumb-arrows {
font-size: 12px;
padding: 20px 0;
background: transparent;
border-radius: 0;
margin: 0;
list-style: none;
align-items: center; }
.breadcrumb-wrapper .breadcrumb-list .breadcrumb-arrows > li {
display: inline-flex; }
.breadcrumb-wrapper .breadcrumb-list .breadcrumb-arrows > li strong {
font-weight: 400;
color: var(--skin-link-color); }
.breadcrumb-wrapper .breadcrumb-list .breadcrumb-arrows > li a {
color: #71706c; }
.breadcrumb-wrapper .breadcrumb-list .breadcrumb-arrows > li + li:before {
content: "";
margin: 0 2px;
width: 20px;
color: #71706c;
background-repeat: no-repeat;
background-size: 9px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' id='sprite-caret-right' viewBox='0 0 20 20'%3E%3Ctitle%3Ecaret-right%3C/title%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.275 10.07a.1.1 0 00.001-.143L5.422.073a.1.1 0 00-.14 0l-.572.56a.1.1 0 000 .141l9.15 9.15a.1.1 0 010 .142L4.714 19.21a.1.1 0 000 .14l.56.572a.1.1 0 00.141 0L15 10.338l.274-.269z' fill='%2327251F'/%3E%3C/svg%3E");
align-items: center;
justify-content: center;
background-position: center;
display: inline-flex; }
@media (max-width: 767px) {
.breadcrumb-wrapper .breadcrumb-list .breadcrumb-arrows {
padding: 7px 0;
font-size: 12px;
flex-wrap: nowrap;
white-space: nowrap;
overflow: scroll; }
.breadcrumb-wrapper .breadcrumb-list .breadcrumb-arrows > li + li:before {
padding: 0 2px; }
.breadcrumb-wrapper .breadcrumb-list .breadcrumb-arrows::-webkit-scrollbar {
display: none; }
.breadcrumb-wrapper .breadcrumb-list .breadcrumb-arrows {
-ms-overflow-style: none;
scrollbar-width: none; } }
.pagination-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
padding: 22px 0 0; }
.pagination-wrapper .page-node {
background: transparent;
color: #000102;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 0;
border: none;
border-bottom: 1px solid transparent; }
.pagination-wrapper .page-node.next, .pagination-wrapper .page-node.prev {
background: transparent; }
.pagination-wrapper .page-node.prev {
margin-right: 0; }
.pagination-wrapper .page-node.next {
margin-left: 0; }
.pagination-wrapper .page-node.current {
border-color: #707070; }
@media (min-width: 992px) {
.pagination-wrapper {
padding: 44px 0 0; } }
/*-----------------------------------------------*/
/* ALL */
/*-----------------------------------------------*/
.product-banner .box {
position: relative;
overflow: hidden; }
.product-banner .box-img {
position: relative;
overflow: hidden;
padding-bottom: calc(526 / 315 * 100%); }
.product-banner .box-img img {
-o-object-fit: cover;
object-fit: cover;
object-position: top;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.product-banner .box-text {
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px;
width: 100%;
color: #fff;
font-size: 12px; }
.product-banner .box-text h3 {
color: #fff;
margin-bottom: 0;
font-weight: 600;
font-size: 16px;
position: relative;
z-index: 1; }
.product-banner .box-text .action {
color: #fff;
padding-top: 12px; }
.product-banner .box-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: linear-gradient(0deg, #000102 0%, rgba(0, 1, 2, 0) 50%); }
@media (min-width: 992px) {
.product-banner .box-text {
gap: 16px;
padding: 24px;
font-size: 14px; }
.product-banner .box-text h3 {
font-size: 24px; }
.product-banner .box-text .action {
padding-top: 24px; } }
.product-loop .product-loop--wrap {
display: flex;
flex-direction: column;
position: relative; }
.product-loop .product-loop--wrap .product-loop--badges span {
display: inline-flex;
padding: 3px 10px;
justify-content: center;
align-items: center;
border-radius: 100px;
background: #FCFCFC;
width: max-content;
font-size: 10px;
font-weight: 400; }
.product-loop .product-loop--wrap .product-loop--badges .badge-new {
background: #000;
color: #fff; }
.product-loop .product-loop--wrap .product-loop--badges .badge-sale {
background: #EF9B2C;
color: #fff; }
.product-loop .product-loop--wrap .product-loop--badges .badge-percent-sale {
color: #fff;
border-radius: 100px;
background: #000000;
display: inline-flex;
width: max-content;
justify-content: center;
align-items: center;
font-weight: 500;
padding: 0px 10px;
font-size: 10px; }
.product-loop .product-loop--wrap .product-loop--badges .badge-soldout {
color: #2D2A2C;
background: #D9D9D9;
padding: 2px 10px; }
.product-loop .product-loop--wrap .product-loop--badges .badge-trend {
color: #2D2A2C;
background: #C8FF85; }
.product-loop .product-loop--wrap .product-loop--head {
position: relative;
overflow: hidden; }
.product-loop .product-loop--wrap .product-loop--head .product-loop--badges {
display: inline-flex;
flex-direction: column;
gap: 12px;
position: absolute;
z-index: 2;
top: 8px;
left: 8px; }
.product-loop .product-loop--wrap .product-loop--head .product-loop--img {
display: block;
padding-bottom: calc(1024/683 * 100%);
position: relative;
z-index: 1; }
.product-loop .product-loop--wrap .product-loop--head .product-loop--img picture {
transition: all 0.4s; }
.product-loop .product-loop--wrap .product-loop--head .product-loop--img picture.img-second {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: block;
opacity: 0;
visibility: hidden; }
.product-loop .product-loop--wrap .product-loop--head .product-loop--img picture img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
background-color: #ffffff; }
.product-loop .product-loop--wrap .product-loop--head .product-loop--img picture img:first-child {
z-index: 2; }
.product-loop .product-loop--wrap .product-loop--head .product-loop--img picture img:last-child {
z-index: 1; }
.product-loop .product-loop--wrap .product-loop--head .product-loop--link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 3; }
.product-loop .product-loop--wrap .product-loop--head .product-loop-frame {
position: absolute;
bottom: 0;
width: 100%;
z-index: 2;
left: 0; }
.product-loop .product-loop--wrap .product-loop--body {
display: flex;
flex-direction: column;
padding: 10px 0;
gap: 10px; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--title {
display: flex;
flex-direction: column;
gap: 4px; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--title h3 {
font-size: 14px;
margin-bottom: 0;
overflow: hidden;
font-weight: 300;
min-height: 20px; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--title h3 a {
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
color: #1A0C09; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--title .product-brand {
font-weight: 400;
letter-spacing: 0.6px;
text-transform: uppercase; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--prices {
display: flex;
gap: 2px 6px;
align-items: center;
flex-wrap: wrap; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--prices .price-current {
font-weight: 600;
color: #000000;
font-size: 14px;
letter-spacing: 0.6px; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--prices .price-compare {
display: inline-flex;
align-items: center;
gap: 4px; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--prices .price-compare del {
color: #B7B7B8;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.4px; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--prices .price-compare span {
color: #FFF;
font-size: 9px;
font-weight: 700;
border-radius: 23.25px;
background: #FF0A47;
display: inline-flex;
padding: 1px 6px;
align-items: center;
justify-content: center; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--btn {
display: none; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--btn .product-btn {
background: #F3F3F3;
border: none;
display: inline-flex;
justify-content: center;
align-items: center; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--btn .quick-view {
width: 25px;
height: 25px;
border-radius: 100%; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--btn .add-to-cart {
width: 35px;
height: 35px;
border-radius: 8px; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--swatch {
overflow: hidden; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--swatch .swatch-list {
display: flex;
gap: 4px;
flex-wrap: nowrap;
overflow-x: scroll; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--swatch .swatch-list::-webkit-scrollbar {
display: none; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--swatch .swatch-item {
position: relative;
display: flex;
width: 16px;
height: 16px;
padding: 1px;
border-radius: 100%;
border: 1px solid #CFCFCF;
background: #F3F3F3; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--swatch .swatch-item.selected {
border: 1px solid #000; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--swatch .swatch-item span {
display: inline-flex;
width: 12px;
height: 12px;
border-radius: 100%;
align-items: center;
justify-content: center; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--top {
display: flex;
gap: 14px;
flex-direction: column; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--top .product-loop--title {
flex: 0 0 100%;
max-width: 100%; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--bottom {
display: flex;
gap: 8px;
flex-direction: column; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--bottom .product-loop--title {
flex: 0 0 100%;
max-width: 100%; }
.product-loop .product-loop--wrap .product-btn {
display: inline-flex;
align-items: center;
justify-content: center;
outline: none; }
@media (min-width: 992px) {
.product-loop .product-loop--wrap .product-loop--body {
padding: 16px; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--swatch .swatch-list {
gap: 6px; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--swatch .swatch-item {
width: 20px;
height: 20px; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--swatch .swatch-item span {
width: 16px;
height: 16px; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--prices .price-current {
font-size: 16px; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--prices .price-compare del {
font-size: 14px; }
.product-loop .product-loop--wrap .product-loop--body .product-loop--prices .price-compare span {
font-size: 11px; }
.product-loop .product-loop--wrap .product-loop--head:hover .product-loop--img picture.img-first {
opacity: 0;
visibility: hidden; }
.product-loop .product-loop--wrap .product-loop--head:hover .product-loop--img picture.img-second {
opacity: 1;
visibility: visible; } }
.product-tile .product-loop--wrap .product-loop--head .product-loop--buttons[data-view="collection"] {
display: flex;
width: 100%;
opacity: 0;
visibility: hidden;
position: absolute;
z-index: 4;
left: 0;
right: 0;
bottom: 0;
margin: auto;
padding: 0 16px 16px;
-webkit-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
transition: all ease 0.5s; }
.product-tile .product-loop--wrap .product-loop--head .product-loop--buttons[data-view="collection"] .product-action.quick-view {
display: flex; }
@media (min-width: 1024px) {
.product-tile .product-loop--head:hover .product-loop--buttons[data-view="collection"] {
opacity: 1;
visibility: visible; } }
.product-loop.small-loop .product-loop--wrap {
flex-direction: row;
flex-wrap: wrap;
gap: 8px; }
.product-loop.small-loop .product-loop--wrap .product-loop--head {
-webkit-flex: 0 0 40%;
flex: 0 0 40%;
max-width: 40%;
border-radius: 4px;
background: #F0EFEF; }
.product-loop.small-loop .product-loop--wrap .product-loop--head .product-loop--img {
padding-bottom: 100%;
height: 100%; }
.product-loop.small-loop .product-loop--wrap .product-loop--head .product-loop--img picture {
opacity: 1 !important;
visibility: visible !important; }
.product-loop.small-loop .product-loop--wrap .product-loop--head .product-loop--img picture img {
background: #f7f7f7;
object-fit: contain; }
.product-loop.small-loop .product-loop--wrap .product-loop--body {
-webkit-flex: 0 0 calc(60% - 8px);
flex: 0 0 calc(60% - 8px);
max-width: calc(60% - 8px);
padding: 0; }
.product-loop.small-loop .product-loop--wrap .product-loop--body .product-loop--title h3 a {
-webkit-line-clamp: 2; }
.product-loop.small-loop .product-loop--wrap .product-loop--body .product-loop--prices {
gap: 2px;
flex-direction: column;
align-items: flex-start; }
.product-loop.small-loop .product-loop--wrap .product-loop--body .product-loop--prices .price-current {
font-size: 14px; }
.product-loop.small-loop .product-loop--wrap .product-loop--body .product-loop--prices .price-compare del {
font-size: 12px; }
.product-loop.small-loop .product-loop--wrap .product-loop--body .product-loop--btn {
display: block; }
.product-loop.small-loop .product-loop--wrap .product-loop--body .product-loop--btn a {
font-size: 12px;
height: 30px;
padding: 0 5px; }
@media (min-width: 992px) {
.product-loop.small-loop .product-loop--wrap .product-loop--body .product-loop--prices .price-current {
font-size: 14px; }
.product-loop.small-loop .product-loop--wrap .product-loop--body .product-loop--prices .price-compare del {
font-size: 12px; } }
.product-loop.flashsale .proloop-progress {
position: relative;
margin-top: 8px; }
.product-loop.flashsale .progress-bar {
width: 100%;
height: auto;
border-radius: 20px;
background: none;
overflow: initial; }
.product-loop.flashsale .progress-bar .progress-percent {
display: flex;
align-items: center;
background: #FFE7F0;
border-radius: 20px;
position: relative;
width: 100%;
height: 12px; }
.product-loop.flashsale .progress-bar span.icon {
position: absolute;
bottom: 0;
left: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 26px; }
.product-loop.flashsale .progress-bar span.icon svg {
width: 100%;
height: 100%; }
.product-loop.flashsale .progress-bar span.icon.icon-sold {
left: 6px; }
.product-loop.flashsale .progress-bar span.text {
background: linear-gradient(90deg, #FF481F 0%, #FF481F 100%);
border-radius: 20px;
display: inline-flex;
align-items: center;
font-size: 9px;
padding: 0px 20px 0px 36px;
letter-spacing: -0.2px;
height: 100%; }
.product-loop.flashsale .progress-bar span.text.text-sold {
background: linear-gradient(270deg, #EF0300 0%, #FF481F 100%); }
@media (min-width: 992px) {
.product-loop.flashsale .progress-bar .progress-percent {
height: 18px; }
.product-loop.flashsale .progress-bar span.icon {
width: 20px;
height: 30px; }
.product-loop.flashsale .progress-bar span.text {
font-size: 12px;
padding: 0px 20px 0px 36px; }
.product-loop.flashsale .progress-bar span.text.text-sold {
width: 60%; } }
.article-loop .article-block {
display: flex;
flex-direction: column; }
.article-loop .article-image {
--width: 717;
--height: 818;
flex-basis: 100%; }
.article-loop .article-detail {
flex-basis: 100%;
padding: 16px 16px 0;
display: flex;
flex-direction: column;
gap: 16px; }
.article-loop .article-detail .article-detail--top {
width: 100%; }
.article-loop .article-detail .article-detail--top span {
color: #EF9B2C;
text-transform: uppercase;
display: block; }
.article-loop .article-detail .article-detail--top h3 {
margin: 4px 0 0;
font-size: 14px;
font-weight: 500; }
.article-loop .article-detail .article-detail--bottom {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px; }
.article-loop .article-detail .article-detail--bottom .art-meta {
color: rgba(45, 42, 44, 0.5); }
.article-loop .article-detail .article-detail--bottom .art-view a {
border-radius: 100%;
border: 1px solid #EF9B2C;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center; }
@media screen and (min-width: 992px) {
.article-loop .article-detail {
padding: 20px 16px 0;
gap: 25px; }
.article-loop .article-detail .article-detail--top h3 {
margin: 9px 0 0;
font-size: 18px; }
.article-loop .article-detail .article-detail--bottom .art-meta {
font-size: 16px; }
.article-loop .article-detail .article-detail--bottom .art-view a {
width: 36px;
height: 36px; } }
.grid-products {
--sectional-grid-gap-col: 8px;
--sectional-grid-gap-row: 16px;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: var(--sectional-grid-gap-row) var(--sectional-grid-gap-col); }
.grid-products .product-loop {
-webkit-flex: 0 0 calc((100% - var(--sectional-grid-gap-col)) /2);
flex: 0 0 calc((100% - var(--sectional-grid-gap-col)) /2);
max-width: calc((100% - var(--sectional-grid-gap-col)) /2); }
@media (min-width: 992px) {
.grid-products {
--sectional-grid-gap-col: 16px;
--sectional-grid-gap-row: 40px; }
.grid-products .product-loop {
-webkit-flex: 0 0 calc((100% - (var(--sectional-grid-gap-col)*2)) /3);
flex: 0 0 calc((100% - (var(--sectional-grid-gap-col)*2)) /3);
max-width: calc((100% - (var(--sectional-grid-gap-col)*2)) /3); } }
.products-grid {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 16px; }
.products-grid .product-loop {
-ms-flex: 0 0 calc((100% - 16px) /2);
flex: 0 0 calc((100% - 16px) /2);
max-width: calc((100% - 16px) /2); }
@media (min-width: 992px) {
.products-grid {
gap: 8px; }
.products-grid .product-loop {
-ms-flex: 0 0 calc((100% - (8px*3)) /4);
flex: 0 0 calc((100% - (8px*3)) /4);
max-width: calc((100% - (8px*3)) /4); } }
.products-list .product-loop {
padding: 0 1px; }
.menuList-links {
margin: 0;
padding: 0;
list-style: none; }
.menuList-links li {
position: relative; }
.menuList-links li a {
position: relative;
font-size: 12px;
display: block; }
.menuList-links > li.has-submenu > a {
padding-right: 30px; }
.menuList-links > li.has-submenu span.icon-plus-submenu {
width: 25px;
height: 25px;
cursor: pointer;
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 1px solid transparent; }
.menuList-links .icon-plus-submenu:after,
.menuList-links .icon-plus-submenu:before {
background: rgba(9, 9, 9, 0.6);
content: '';
display: block;
position: absolute;
margin-right: 7px;
top: 50%;
right: 0;
-moz-transition: all .25s linear;
-o-transition: all .25s linear;
-webkit-transition: all .25s linear;
transition: all .25s linear; }
.menuList-links .icon-plus-submenu:before {
width: 9px;
height: 1px;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.menuList-links .icon-plus-submenu:after {
width: 1px;
height: 9px;
right: 4px;
transform-origin: center;
-moz-transform: translateY(-50%) scale(1, 1);
-ms-transform: translateY(-50%) scale(1, 1);
-webkit-transform: translateY(-50%) scale(1, 1);
transform: translateY(-50%) scale(1, 1); }
.menuList-links .has-submenu.opened > a .icon-plus-submenu:after {
-moz-transform: translateY(-50%) scale(1, 0);
-ms-transform: translateY(-50%) scale(1, 0);
-webkit-transform: translateY(-50%) scale(1, 0);
transform: translateY(-50%) scale(1, 0); }
.menuList-links > li.has-submenu .icon-plus-submenu:hover {
border: 1px solid #f4f5f7; }
.menuList-links li ul.submenu-links {
display: none; }
.menuList-links ul.submenu-links li a {
padding: 8px 0 8px 0px; }
.menuList-links li.has-submenu.level0 > ul.submenu-links {
border-top: 1px solid #ddd;
padding: 8px 0; }
.menuList-links li.has-submenu.level0 > ul.submenu-links li a {
padding-left: 14px; }
.menuList-links li.has-submenu.level1 > ul.submenu-links li a:hover {
text-decoration: underline; }
.box-banner {
position: relative; }
.box-banner picture {
position: relative;
padding-bottom: calc(var(--mb-height-img)/var(--mb-width-img) * 100%);
display: block; }
.box-banner img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
aspect-ratio: var(--mb-height-img)/var(--mb-width-img); }
.box-banner .media {
overflow: hidden;
display: block;
position: relative; }
.box-banner .media a.media-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: linear-gradient(0deg, #000102 0%, rgba(0, 1, 2, 0) 50%); }
.box-banner .content {
position: absolute;
z-index: 2;
left: 0;
bottom: 0;
padding: 12px 0;
width: 100%; }
.box-banner .content h2 {
margin-bottom: 4px;
font-weight: 600;
font-size: 20px;
position: relative;
z-index: 1;
color: #fff; }
.box-banner .content p {
color: #fff;
margin-bottom: 0;
font-weight: 500; }
.box-banner .content .box-detail {
display: flex;
flex-direction: column;
gap: 12px; }
@media (min-width: 992px) {
.box-banner picture {
padding-bottom: calc(var(--height-img)/var(--width-img) * 100%); }
.box-banner img {
aspect-ratio: var(--height-img)/var(--width-img); }
.box-banner .content {
padding: 24px 0; }
.box-banner .content h2 {
font-size: 32px; }
.box-banner .content .box-detail {
gap: 24px; } }
/*-----*/
.article-item .article-item--image a {
position: relative;
overflow: hidden;
display: block;
padding-bottom: 100%; }
.article-item .article-item--image a img {
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.article-item .article-item--detail {
padding: 13px 0 0;
display: flex;
display: -ms-flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex: 1 1 auto;
flex: 1 1 auto; }
.article-item .article-item--detail .art-title {
font-size: 16px;
margin-bottom: 8px;
font-weight: 700;
transition: transform .3s ease;
min-height: 41px; }
.article-item .article-item--detail .art-title a {
color: #3B3B3B; }
.article-item .article-item--detail .art-desc {
font-size: 14px;
color: #787878; }
.article-item .article-item--detail .art-meta {
display: flex;
display: -ms-flex;
align-items: center;
-ms-align-items: center;
font-size: 12px;
gap: 4px 12px;
flex-wrap: wrap;
margin-bottom: 8px; }
.article-item .article-item--detail .art-meta .art-date {
color: #C9C9C9;
font-size: 12px;
font-weight: 400;
letter-spacing: -0.06px; }
.article-item .article-item--detail .art-meta .art-cate {
overflow: hidden;
color: #565656;
text-overflow: ellipsis;
font-size: 12px;
font-weight: 500;
letter-spacing: -0.5px;
padding: 6px 10px;
display: inline-flex;
border-radius: 16px;
background: #F4F4F4; }
.article-item .article-item--detail .art-viewmore {
margin-top: 16px; }
.article-item .article-item--detail .art-viewmore a {
display: flex;
gap: 4px;
align-items: center; }
@media (min-width: 992px) {
.article-item .article-item--detail {
padding: 13px 8px 16px; } }
.article-grid {
--sectional-grid-gapcol: 16px;
display: flex;
flex-wrap: wrap;
gap: var(--sectional-grid-gapcol); }
.article-grid .article-item {
-webkit-flex: 0 0 calc((100% - (var(--sectional-grid-gapcol)*1)) /2);
flex: 0 0 calc((100% - (var(--sectional-grid-gapcol)*1)) /2);
max-width: calc((100% - (var(--sectional-grid-gapcol)*1)) /2); }
@media (min-width: 1024px) {
.article-grid .article-item {
-webkit-flex: 0 0 calc((100% - (var(--sectional-grid-gapcol)*3)) /4);
flex: 0 0 calc((100% - (var(--sectional-grid-gapcol)*3)) /4);
max-width: calc((100% - (var(--sectional-grid-gapcol)*3)) /4); } }
/*-----*/
.coupon-initial .coupon-item--inner {
background: var(--skin-coupon-bg);
display: flex;
display: -ms-flex;
border-radius: 2px;
height: 100%;
border: 1px solid transparent;
position: relative; }
.coupon-initial .coupon-item--inner:after, .coupon-initial .coupon-item--inner:before {
content: "";
width: 24px;
height: 12px;
right: 22px;
position: absolute;
z-index: 10;
border: 1px solid #f9fafb;
background: #f9fafb; }
.coupon-initial .coupon-item--inner:before {
top: -1px;
border-top: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; }
.coupon-initial .coupon-item--inner:after {
bottom: -1px;
border-bottom: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px; }
.coupon-initial .coupon-item--right {
width: 64px;
position: relative; }
.coupon-initial .coupon-item--right:after {
content: '';
height: 100%;
right: 32px;
width: 1px;
border-left: 1px dashed var(--skin-border-color);
position: absolute;
top: 0;
bottom: 0;
margin: auto; }
.coupon-initial .coupon-item--left {
width: calc(100% - 64px);
position: relative;
display: flex;
display: -ms-flex;
flex-direction: column;
-ms-flex-direction: column;
justify-content: space-between;
-ms-justify-content: space-between;
padding: 12px 0 12px 12px; }
.coupon-initial .coupon-item--left .cp-icon {
background: transparent;
border: 0;
outline: none;
cursor: pointer;
position: absolute;
z-index: 1;
top: 12px;
right: 12px;
padding: 0;
cursor: pointer; }
.coupon-initial .coupon-item--left .cp-top {
padding-bottom: 47px;
padding-right: 0; }
.coupon-initial .coupon-item--left .cp-top h3 {
margin: 0 0 4px;
font-size: 14px;
font-weight: 700; }
.coupon-initial .coupon-item--left .cp-top p {
font-size: 12px;
margin-bottom: 0;
font-weight: 600; }
.coupon-initial .coupon-item--left .cp-bottom {
display: flex;
display: -ms-flex;
justify-content: space-between;
-ms-justify-content: space-between;
align-items: flex-end;
gap: 8px; }
.coupon-initial .coupon-item--left .cp-bottom .cp-bottom-btn {
display: flex;
display: -ms-flex;
outline: none; }
.coupon-initial .coupon-item--left .cp-bottom span {
font-size: 12px;
color: #6B7280;
font-weight: 600; }
.coupon-initial .coupon-item--left .cp-bottom span strong {
letter-spacing: 0.4px;
font-size: 14px; }
.coupon-initial .coupon-item--left .cp-bottom .button {
padding: 3px 16px 4px;
font-size: 13px;
font-weight: 600;
min-width: 78px;
height: 36px;
border-radius: 2px;
margin-top: auto;
background: #D1D5DB;
border: none;
outline: none; }
.coupon-initial .coupon-item--left .cp-bottom .button.disabled {
opacity: 0.6;
cursor: default;
pointer-events: none; }
.coupon-initial .coupon-item--left ul {
list-style: none; }
.coupon-initial .coupon-item.copied .coupon-item--left .cp-btn {
pointer-events: none; }
.coupon-initial .coupon-item:hover .coupon-item--inner {
background: var(--skin-coupon-highlight);
border: 1px solid transparent;
color: #fff; }
.coupon-initial .coupon-item:hover .coupon-item--left .cp-top h3 {
color: var(--skin-coupon-text); }
.coupon-initial .coupon-item:hover .coupon-item--left .cp-bottom span {
color: var(--skin-coupon-text); }
.coupon-initial .coupon-item:hover .coupon-item--left .cp-bottom .button {
background: #fff;
color: #000102; }
@media (max-width: 480px) {
.coupon-initial .coupon-item--inner:after, .coupon-initial .coupon-item--inner:before {
right: 55px; }
.coupon-initial .coupon-item--right {
width: 60px; }
.coupon-initial .coupon-item--left {
width: calc(100% - 60px);
padding: 8px 6px 8px 12px; }
.coupon-initial .coupon-item--left .cp-icon {
top: 8px;
right: 6px; }
.coupon-initial .coupon-item--left .cp-top {
padding-right: 16px; }
.coupon-initial .coupon-item--left .cp-bottom .button {
padding: 2px 8px 3px; } }
.coupon-info {
display: none;
padding: 0 16px 16px; }
.coupon-info .content-coupon {
font-size: 13px;
border: 1px solid #fafafa; }
.coupon-info .content-coupon .dfex-txt {
padding: 10px 16px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.coupon-info .content-coupon .dfex-txt.dfex-none {
display: none; }
.coupon-info .content-coupon .dfex-txt--1 {
width: 33%;
min-width: 100px;
flex: 0 0 auto;
font-size: 13px;
line-height: 20px;
color: #787878; }
.coupon-info .content-coupon .dfex-txt--2 {
padding-left: 20px; }
.coupon-info .content-coupon .dfex-txt--2 span {
width: 24px;
height: 24px;
display: none;
vertical-align: middle;
margin-left: 6px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%20%20%20%20%3Cdefs%3E%20%20%20%20%20%20%20%20%3Cpath%20id%3D%22labrj0lkfa%22%20d%3D%22M6.527%202.099c.521%200%20.946.425.949.948v8.004c0%20.524-.425.949-.949.949H.95C.425%2012%200%2011.575%200%2011.051V3.047C0%202.524.425%202.1.949%202.1zm-.002.663H.946c-.157%200-.285.128-.285.285v8.002c0%20.157.128.285.285.285h5.579c.157%200%20.285-.128.285-.285V3.047c0-.157-.128-.285-.285-.285zM8.66%200c.524%200%20.949.425.949.949v8.004c0%20.523-.425.948-.949.948-.184%200-.332-.147-.332-.331%200-.185.148-.332.332-.332.158%200%20.285-.128.285-.285V.949c0-.158-.127-.285-.285-.285H3.082c-.158%200-.285.127-.285.285%200%20.184-.148.331-.332.331-.184%200-.332-.147-.332-.331%200-.524.425-.949.949-.949z%22%2F%3E%20%20%20%20%3C%2Fdefs%3E%20%20%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cg%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%28-2760%20-4524%29%20translate%282708%2080%29%20translate%2852%204304%29%20translate%280%20140%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2212%22%20fill%3D%22%23E5F2FF%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%286%206%29%20translate%281%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22n5b3eobj0b%22%20fill%3D%22%23fff%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23labrj0lkfa%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fmask%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22%23787878%22%20xlink%3Ahref%3D%22%23labrj0lkfa%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20fill%3D%22%23017FFF%22%20mask%3D%22url%28%23n5b3eobj0b%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%200H12V12H0z%22%20transform%3D%22translate%28-1%29%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-size: 24px; }
.coupon-info .content-coupon .dfex-txt--3 {
width: 100%; }
.coupon-info .content-coupon .dfex-txt--3 ul {
list-style-type: disc;
margin-bottom: 0;
margin-top: 0;
margin-left: 16px; }
.coupon-info .content-coupon .dfex-txt--3 ul li {
list-style-position: outside; }
.coupon-info .content-coupon .dfex-txt--3 ul li + li {
margin-top: 3px; }
.coupon-info .content-coupon .dfex-txt--3 ul li::marker {
color: #000; }
.coupon-info .content-coupon .dfex-txt--cta {
width: 100%;
display: flex;
column-gap: 10px;
margin-top: 12px; }
.coupon-info .content-coupon .dfex-txt--cta .btn-popover {
display: block;
width: 100%;
padding: 0px 12px;
font-size: 13px;
height: 40px;
line-height: 40px;
border-radius: 4px;
font-weight: 500;
color: #d92046;
background: #fff;
border: 1px solid #d92046; }
.coupon-info .content-coupon .dfex-txt--cta .btn-popover + .btn-popover {
color: #fff;
background: #d92046; }
.coupon-info .content-coupon .dfex-bkg:nth-child(2n+1) {
background-color: #fafafa; }
.coupon-info .content-coupon .cpi-trigger {
cursor: pointer; }
.coupon-info.show {
display: block; }
@media (max-width: 767px) {
.coupon-info .content-coupon .dfex-txt {
padding: 12px 20px; }
.coupon-info .content-coupon .dfex-txt.dfex-none {
display: -ms-flexbox;
display: -webkit-flex;
display: flex; } }
/*-----*/
.box-soon .soon > .soon-group > .soon-group-inner {
display: flex;
align-items: center;
gap: 8px; }
.box-soon .soon-slot {
letter-spacing: 1px;
text-indent: 1px; }
.box-soon .soon[data-layout*=group] {
font-size: 12px;
padding: 0; }
.box-soon .soon[data-layout*=group] .soon-label {
margin: 0;
display: none; }
.box-soon .soon-slot-inner {
color: var(--countdown-text-color);
font-weight: 700;
text-align: center;
height: auto; }
.box-soon .soon-group.soon-group-sub {
background: var(--countdown-bg-color);
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 2px; }
@media (min-width: 992px) {
.box-soon .soon[data-layout*=group] {
font-size: 14px; }
.box-soon .soon-group.soon-group-sub {
width: 40px;
height: 40px;
line-height: 40px; } }
@media (max-width: 767px) {
.modal-coupon--backdrop {
position: fixed;
background-color: rgba(0, 0, 0, 0.4);
top: 0;
left: 0;
right: 0;
height: 100%;
z-index: 999;
display: none;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
.modal-coupon--backdrop.js-modal-show {
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto; } }
/*-----*/
.section {
overflow: hidden;
padding-bottom: calc(var(--space-unit)*2);
position: relative; }
.section .s-heading {
display: flex;
flex-direction: row;
gap: 16px;
justify-content: space-between; }
.section .s-heading h2 {
font-size: 24px;
margin-bottom: 0;
overflow-wrap: break-word;
word-break: normal; }
.section .s-heading .tablist {
--color-tab-tt: #000000;
--color-tab-bd: #000000;
--color-tab-bg-active: #000000;
--color-tab-tt-active: #ffffff;
--color-tab-bd-active: #000000;
display: flex;
gap: 8px;
align-items: center;
overflow-x: scroll; }
.section .s-heading .tablist a {
padding: 6px;
display: inline-flex;
align-items: center;
color: var(--color-tab-tt);
border: 1px solid var(--color-tab-bd);
background: transparent;
height: 40px;
border-radius: 0;
font-size: 12px;
font-weight: 400;
white-space: nowrap; }
.section .s-heading .tablist a.active {
background: var(--color-tab-bg-active);
color: var(--color-tab-tt-active);
border-color: var(--color-tab-bd-active); }
.section .s-heading .s-heading--right {
-ms-flex: 0 0 calc(40% - 16px);
flex: 0 0 calc(40% - 16px);
max-width: calc(40% - 16px);
display: flex;
flex-direction: row;
gap: 16px 8px;
justify-content: flex-end; }
.section .s-heading .s-heading--left {
-ms-flex: 0 0 60%;
flex: 0 0 60%;
max-width: 60%;
display: flex; }
.section .s-heading.has-tab {
flex-direction: column; }
.section .s-heading.has-tab .s-heading--right {
justify-content: space-between; }
.section .s-heading.has-tab .s-heading--left, .section .s-heading.has-tab .s-heading--right {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
display: flex; }
.section .s-heading.s-center {
justify-content: center; }
.section .s-content .tabcontent .tabpand {
display: none; }
.section .s-content .tabcontent .tabpand.active {
display: block; }
.section .s-wrapper {
display: flex;
flex-direction: column;
gap: 16px; }
.section .s-wrapper .media {
height: 100%;
width: 100%;
position: relative;
overflow: hidden; }
.section .s-wrapper .media img, .section .s-wrapper .media video {
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.section.has-banner .s-inner {
display: flex;
flex-direction: column;
gap: 16px; }
.section.has-banner .s-inner .s-coll {
-webkit-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%; }
@media (min-width: 992px) {
.section {
padding-bottom: calc(var(--space-unit)*4); }
.section .s-wrapper {
gap: 40px; }
.section .s-heading {
flex-direction: row;
gap: 40px;
justify-content: space-between; }
.section .s-heading h2 {
font-size: 32px; }
.section .s-heading .s-heading--right {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
max-width: 100%;
flex-direction: row;
align-items: center; }
.section .s-heading .s-heading--left {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
max-width: 100%; }
.section .s-heading .tablist {
overflow: hidden;
gap: 16px; }
.section .s-heading .tablist a {
padding: 10px 30px;
font-size: 14px; }
.section .s-heading.has-tab {
flex-direction: row; }
.section .s-heading.has-tab .s-heading--right {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
max-width: 100%;
justify-content: space-between; }
.section .s-heading.has-tab .s-heading--left {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
max-width: 100%; }
.section.has-banner .s-inner {
flex-direction: row; }
.section.has-banner .s-inner .s-coll {
-webkit-flex: 0 0 calc((100% - 16px)/ 2);
flex: 0 0 calc((100% - 16px)/ 2);
max-width: calc((100% - 16px)/ 2); } }
.section {
--sectional-grid-gap: 10px; }
.section.section-collection .s-content {
position: relative; }
.section .swiper:not(.swiper-initialized),
.section .swiper-container:not(.swiper-initialized) {
padding-left: 16px;
margin: 0 -16px; }
.section .swiper:not(.swiper-initialized) .products-slide,
.section .swiper-container:not(.swiper-initialized) .products-slide {
display: -ms-flex;
display: -webkit-flex;
display: flex;
gap: var(--sectional-grid-gap);
overflow-x: scroll;
padding-left: 16px;
margin: 0 -16px; }
.section .swiper:not(.swiper-initialized) .products-slide::-webkit-scrollbar,
.section .swiper-container:not(.swiper-initialized) .products-slide::-webkit-scrollbar {
display: none; }
.section .swiper:not(.swiper-initialized) .products-slide .swiper-slide,
.section .swiper-container:not(.swiper-initialized) .products-slide .swiper-slide {
-webkit-flex: 0 0 85%;
flex: 0 0 85%;
max-width: 85%; }
.section .swiper:not(.swiper-initialized) .blog-slide,
.section .swiper-container:not(.swiper-initialized) .blog-slide {
display: -ms-flex;
display: -webkit-flex;
display: flex;
gap: var(--sectional-grid-gap);
overflow-x: scroll;
padding-left: 16px;
margin: 0 -16px; }
.section .swiper:not(.swiper-initialized) .blog-slide::-webkit-scrollbar,
.section .swiper-container:not(.swiper-initialized) .blog-slide::-webkit-scrollbar {
display: none; }
.section .swiper:not(.swiper-initialized) .blog-slide .swiper-slide,
.section .swiper-container:not(.swiper-initialized) .blog-slide .swiper-slide {
-webkit-flex: 0 0 45%;
flex: 0 0 45%;
max-width: 45%; }
@media (min-width: 586px) {
.section .swiper:not(.swiper-initialized) .products-slide .swiper-slide,
.section .swiper-container:not(.swiper-initialized) .products-slide .swiper-slide {
-webkit-flex: 0 0 45%;
flex: 0 0 45%;
max-width: 45%; } }
@media (min-width: 992px) {
.section {
--sectional-grid-gap: 16px; }
.section .swiper:not(.swiper-initialized),
.section .swiper-container:not(.swiper-initialized) {
padding-left: 0px;
margin: 0; }
.section .swiper:not(.swiper-initialized) .products-slide,
.section .swiper-container:not(.swiper-initialized) .products-slide {
flex-wrap: nowrap;
overflow: hidden;
padding-left: 0px;
margin: 0; }
.section .swiper:not(.swiper-initialized) .products-slide[data-view="3"] .swiper-slide,
.section .swiper-container:not(.swiper-initialized) .products-slide[data-view="3"] .swiper-slide {
-webkit-flex: 0 0 calc((100% - (var(--sectional-grid-gap)*2)) /3);
flex: 0 0 calc((100% - (var(--sectional-grid-gap)*2)) /3);
max-width: calc((100% - (var(--sectional-grid-gap)*2)) /3); }
.section .swiper:not(.swiper-initialized) .products-slide[data-view="4"] .swiper-slide,
.section .swiper-container:not(.swiper-initialized) .products-slide[data-view="4"] .swiper-slide {
-webkit-flex: 0 0 calc((100% - (var(--sectional-grid-gap)*3)) /4);
flex: 0 0 calc((100% - (var(--sectional-grid-gap)*3)) /4);
max-width: calc((100% - (var(--sectional-grid-gap)*3)) /4); }
.section .swiper:not(.swiper-initialized) .products-slide[data-view="2"] .swiper-slide,
.section .swiper-container:not(.swiper-initialized) .products-slide[data-view="2"] .swiper-slide {
-webkit-flex: 0 0 calc((100% - (var(--sectional-grid-gap)*1)) /2);
flex: 0 0 calc((100% - (var(--sectional-grid-gap)*1)) /2);
max-width: calc((100% - (var(--sectional-grid-gap)*1)) /2); } }
/*----- Modal -----*/
.modal {
background: rgba(0, 1, 2, 0.35);
backdrop-filter: blur(8px); }
.modal .modal-content {
border-radius: 0;
padding: 0; }
.modal .modal-content .modal-header {
border-radius: 0;
border-bottom: 1px solid #E5E7EB;
padding: 12px 24px;
align-items: center; }
.modal .modal-content .modal-header h4 {
font-size: 18px;
text-transform: uppercase;
margin-bottom: 0; }
.modal .modal-content .modal-header .close {
margin: 0;
opacity: 1;
outline: none;
padding: 0; }
.modal .modal-content .modal-header .close svg {
width: 24px;
height: 24px; }
.modal .modal-content .modal-body {
padding: 20px 0; }
.modal .modal-content .modal-footer {
padding: 0 0 20px;
gap: 20px;
border-top: none; }
.modal .modal-content .modal-footer button {
margin: 0; }
@media (min-width: 992px) {
.modal .modal-content .modal-header h4 {
font-size: 32px; } }
@media (min-width: 544px) {
.modal .modal-dialog {
max-width: 730px; }
.modal .modal-sm {
max-width: 300px; } }
@media (min-width: 1025px) {
.modal .modal-lg, .modal .modal-xl {
max-width: 800px; } }
@media (min-width: 1200px) {
.modal .modal-xl {
max-width: 1140px; } }
.modal.modal-sizechart .modal-header {
border-bottom: none;
padding: 23px; }
.modal.modal-sizechart .modal-header h4 {
font-size: 0 !important; }
.modal.modal-sizechart .modal-body {
padding: 0 23px 23px;
display: flex;
flex-direction: column;
gap: 15px; }
.modal.modal-sizechart .modal-inner {
margin-bottom: 20px; }
.modal.modal-sizechart .size-tabaction {
display: flex;
align-items: center;
justify-content: space-between; }
.modal.modal-sizechart .size-tabaction .size-title {
color: #000;
font-size: 28px;
font-weight: 700; }
.modal.modal-sizechart .size-tabaction .size-select select {
border-radius: 4px;
border: 1px solid #CFCFCF;
background: #FFF;
height: 40px;
min-width: 120px;
padding: 0 10px;
text-transform: capitalize;
font-size: 16px;
outline: none; }
.modal.modal-sizechart .size-tabcontents .tabcontent-item {
display: none; }
.modal.modal-sizechart .size-tabcontents .tabcontent-item.active {
display: block; }
@media (min-width: 550px) {
.modal.modal-sizechart .modal-dialog {
margin-left: 45px;
margin-right: 45px; }
.modal.modal-sizechart .modal-inner {
margin-bottom: 40px; } }
@media (min-width: 992px) {
.modal.modal-sizechart .modal-dialog {
margin-left: auto;
margin-right: auto;
max-width: 580px; } }
.modal.modal-success .modal-content {
max-width: 500px;
margin: auto; }
.modal.modal-success .modal-header {
border-bottom: none;
padding: 0; }
.modal.modal-success .modal-header h4 {
font-size: 0; }
.modal.modal-success .modal-header button {
position: absolute;
top: 0;
right: 0;
padding: 8px;
z-index: 2; }
.modal.modal-success .modal-body {
padding: 24px 16px 24px;
display: flex;
flex-direction: column;
gap: 16px;
font-size: 14px; }
.modal.modal-success .modal-body h4 {
font-size: 24px; }
.modal.modal-quickview .modal-content .modal-header {
border: none;
padding: 0; }
.modal.modal-quickview .modal-content .modal-header h4 {
font-size: 0; }
.modal.modal-quickview .modal-content .modal-header button {
position: absolute;
top: 0;
right: 0;
padding: 8px;
z-index: 2; }
.modal.modal-quickview .modal-content .modal-body {
padding: 0; }
@media (min-width: 992px) {
.modal.modal-success .modal-dialog {
margin-left: auto;
margin-right: auto;
max-width: 500px; } }
.modal-backdrop.show {
opacity: 0 !important; }
.swal2-modal {
font-size: 14px;
padding: 24px;
color: #111; }
.swal2-modal .swal2-title {
font-size: 18px;
text-transform: uppercase;
margin: 20px 0 12px;
color: #333; }
.swal2-modal .swal2-text {
font-size: 14px; }
.swal2-modal .swal2-actions {
flex-direction: row-reverse;
flex-wrap: nowrap;
margin-top: 24px;
width: 100%; }
.swal2-modal .swal2-actions button {
position: relative;
padding: 12px 20px;
margin: 0;
line-height: normal;
border: 1px solid transparent;
border-radius: 4px;
text-align: center;
letter-spacing: 1px;
z-index: 1;
overflow: hidden;
box-shadow: none;
width: 100%;
outline: none;
-webkit-transition: color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86), border 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86), border 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86); }
.swal2-modal .swal2-actions button.swal2-cancel {
border: 1px solid #ececec;
background-color: #ececec;
color: #111111; }
.swal2-modal .swal2-actions button.swal2-cancel:focus {
box-shadow: 0 0 0 3px rgba(236, 236, 236, 0.5); }
.swal2-modal .swal2-actions button.swal2-confirm {
border: 1px solid #e30019;
background-color: #e30019;
color: #fff; }
.swal2-modal .swal2-actions button.swal2-confirm:focus {
box-shadow: 0 0 0 3px rgba(227, 0, 25, 0.5); }
.swal2-modal .swal2-actions button + button {
margin-right: 8px; }
.swal2-modal .swal2-html-container {
margin: 6px 0 8px; }
.swal2-modal .swal2-icon {
margin: 0 auto;
font-size: 12px; }
.swal2-modal .swal2-icon .swal2-icon-content {
font-size: 2rem; }
.swal2-modal .swal2-icon.swal2-success {
border-color: var(--color-state-success);
color: var(--color-state-success); }
.swal2-modal .swal2-icon.swal2-error {
border-color: var(--color-state-error);
color: var(--color-state-error); }
.swal2-modal .swal2-icon.swal2-warning {
border-color: var(--color-state-warning);
color: var(--color-state-warning); }
.swal2-modal .swal2-icon.swal2-info {
border-color: var(--color-state-info);
color: var(--color-state-info); }
.swal2-modal .swal2-icon.swal2-question {
border-color: var(--color-state-question);
color: var(--color-state-question); }
.swal2-popup {
border-radius: 2px;
color: var(--skin-text-color);
font-size: 14px; }
.swal2-popup .swal2-title {
text-transform: uppercase;
font-size: 16px;
padding: 0; }
.swal2-popup .swal2-icon {
font-size: 12px; }
.swal2-popup .swal2-icon.swal2-warning {
border-color: #FF9800;
color: #FF9800; }
.swal2-popup .swal2-icon.swal2-error {
border-color: #d92046;
color: #d92046; }
.swal2-popup .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
background-color: #d92046; }
.swal2-popup .swal2-icon.swal2-success {
color: #4caf50;
border-color: #4caf50; }
.swal2-popup .swal2-icon.swal2-success .swal2-success-ring {
border-color: #4caf50; }
.swal2-popup .swal2-icon.swal2-success [class^=swal2-success-line] {
background-color: #4caf50; }
.swal2-popup .swal2-actions button {
border-radius: 2px;
box-shadow: none !important; }
.swal2-popup .swal2-actions button.swal2-confirm {
background-color: var(--skin-bgbtn-color);
color: #fff;
border: 1px solid var(--skin-bgbtn-color); }
.swal2-popup .swal2-actions button.swal2-cancel {
background-color: #fff;
color: var(--skin-bgbtn-color);
border: 1px solid var(--skin-bgbtn-color); }
@media (min-width: 992px) {
.swal2-popup .swal2-title {
font-size: 20px; } }
/*----- Sidebar -----*/
.sidebar-overlay {
background: #262626;
opacity: 0.5;
position: fixed;
z-index: 14;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
-ms-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s; }
.sidebar-main .sidebar-wrapper {
position: fixed;
top: 0;
height: 100%;
width: 100%;
max-width: 480px;
z-index: 15;
opacity: 0;
visibility: hidden;
-ms-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s; }
.sidebar-main .sidebar-wrapper.sidebar-right {
right: 0;
-ms-transform: translateX(150%);
-webkit-transform: translateX(150%);
transform: translateX(150%); }
.sidebar-main .sidebar-wrapper.sidebar-left {
left: 0;
-ms-transform: translateX(-150%);
-webkit-transform: translateX(-150%);
transform: translateX(-150%); }
.sidebar-main .sidebar-wrapper .sidebar-nav {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
bottom: 0;
right: 0;
background: #ffffff;
max-width: 480px;
height: 100%;
width: 100%;
z-index: 1; }
.sidebar-main .sidebar-wrapper .sidebar-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px;
position: relative;
gap: 20px; }
.sidebar-main .sidebar-wrapper .sidebar-head h4 {
font-size: 18px;
line-height: 25px;
font-weight: 700;
margin-bottom: 0; }
.sidebar-main .sidebar-wrapper .sidebar-head button {
border: none;
background: transparent;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
outline: none; }
.sidebar-main .sidebar-wrapper .sidebar-body {
padding: 0 14px;
position: relative;
overflow-y: scroll;
overflow-x: hidden;
height: 100%;
margin-right: 2px;
-webkit-overflow-scrolling: touch;
-ms-scroll-chaining: none;
overscroll-behavior: none; }
.sidebar-main .sidebar-wrapper .sidebar-body::-webkit-scrollbar {
width: 2px;
height: 2px; }
.sidebar-main .sidebar-wrapper .sidebar-body::-webkit-scrollbar-track {
-webkit-border-radius: 0px;
border-radius: 0px;
background: #E7E7E7; }
.sidebar-main .sidebar-wrapper .sidebar-body::-webkit-scrollbar-thumb {
-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: inset 0 0 6px #262626; }
.sidebar-main .sidebar-wrapper .sidebar-body::-webkit-scrollbar-thumb:window-inactive {
background: #262626; }
.sidebar-main .sidebar-wrapper .sidebar-foot {
padding: 14px; }
@media (min-width: 768px) {
.sidebar-main .sidebar-wrapper .sidebar-head {
padding: 24px; }
.sidebar-main .sidebar-wrapper .sidebar-head h4 {
font-size: 24px; }
.sidebar-main .sidebar-wrapper .sidebar-body {
padding: 0 24px; }
.sidebar-main .sidebar-wrapper .sidebar-foot {
padding: 24px; } }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart {
padding-bottom: 14px; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .cart-group {
display: flex;
flex-direction: column;
gap: 16px; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item {
display: flex;
gap: 16px; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item .minicart-left {
width: 100px;
position: relative;
overflow: hidden; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item .minicart-left .item-img {
height: 100%; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item .minicart-left a {
display: block;
width: 100%;
height: 100%;
padding-bottom: calc(140/104 * 100%);
position: relative;
overflow: hidden; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item .minicart-left img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
width: 100%;
height: 100%; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item .minicart-right {
width: calc(100% - 100px - 16px);
display: flex;
flex-direction: column;
gap: 16px; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item .minicart-right .item-info {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item .minicart-right .item-meta {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item .minicart-right .item-desc span.label-gift {
font-size: 12px;
display: inline-block;
padding: 2px 10px;
border-radius: 2px;
color: #F9FAFB;
background: #000102;
font-weight: 600; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item .minicart-right .item-desc h3 {
font-size: 16px;
font-weight: 400;
margin: 0 0 4px; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item .minicart-right .item-price {
width: 100%;
display: flex;
align-items: center;
gap: 12px; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item .minicart-right .item-price * {
display: inline-block; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item .minicart-right .item-price del {
color: #C1C1C1; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item .minicart-right .item-price span:not(.percent) {
font-weight: 700;
font-size: 16px; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item .minicart-right .item-price span.percent {
color: #F9FAFB;
border-radius: 2px;
background: #B51F29;
font-size: 12px;
font-weight: 600;
padding: 3px 10px; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item .minicart-right .item-actions {
width: 100%; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item .minicart-right .item-actions .item-quan {
display: inline-flex;
align-items: center;
justify-content: center; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item .minicart-right .item-actions .item-quan .quantity-partent {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item .minicart-right .item-actions .item-quan .qty-btn {
height: 30px;
width: 30px;
border: none;
background: none;
outline: none;
display: inline-flex;
align-items: center;
justify-content: center; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item .minicart-right .item-actions .item-quan .qty-btn.disabled {
opacity: 0.3; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item .minicart-right .item-actions .item-quan .qty-btn svg {
width: 16px;
height: 16px; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item .minicart-right .item-actions .item-quan input {
width: 44px;
height: 30px;
color: #000;
border: none;
border-radius: 4px;
background: #F3F4F6;
outline: none;
text-align: center; }
.sidebar-main .sidebar-cart .sidebar-body .list-minicart .minicart-item .minicart-right .item-remove a {
display: inline-flex;
text-decoration: underline;
font-weight: 600;
color: #6B7280;
font-size: 12px; }
.sidebar-main .sidebar-cart .sidebar-body.notitem {
padding: 0; }
.sidebar-main .sidebar-cart .sidebar-body.notitem .minicart-empty {
padding: 24px;
background: #efefef;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%; }
.sidebar-main .sidebar-cart .sidebar-foot .line-total .line {
display: flex;
justify-content: space-between;
align-items: center; }
.sidebar-main .sidebar-cart .sidebar-foot .line-total .text {
font-weight: 700; }
.sidebar-main .sidebar-cart .sidebar-foot .line-total .number {
color: #B51F29;
font-weight: 600;
font-size: 20px; }
.sidebar-main .sidebar-cart .sidebar-foot .line-actions {
padding-top: 12px;
display: flex;
gap: 16px; }
.sidebar-main .sidebar-cart .sidebar-foot .line-actions a {
width: 100%;
height: 40px;
font-weight: 600; }
.sidebar-main .sidebar-cart .sidebar-suggest {
position: relative;
width: 100%;
padding: 20px 0;
background: #fff; }
.sidebar-main .sidebar-cart .sidebar-suggest .sidebar-title {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 16px 24px;
position: relative;
gap: 20px; }
.sidebar-main .sidebar-cart .sidebar-suggest .sidebar-title h4 {
font-size: 18px;
font-weight: 700;
margin-bottom: 0; }
.sidebar-main .sidebar-cart .sidebar-suggest .sidebar-title .navcontrol {
display: none; }
.sidebar-main .sidebar-cart .sidebar-suggest .sidebar-content {
padding: 0 16px; }
.sidebar-main .sidebar-cart .sidebar-suggest .sidebar-content .swiper:not(.swiper-initialized) .products-slide {
display: -ms-flex;
display: -webkit-flex;
display: flex;
gap: 8px;
overflow-x: scroll; }
.sidebar-main .sidebar-cart .sidebar-suggest .sidebar-content .swiper:not(.swiper-initialized) .products-slide::-webkit-scrollbar {
display: none; }
.sidebar-main .sidebar-cart .sidebar-suggest .sidebar-content .swiper:not(.swiper-initialized) .swiper-slide {
-webkit-flex: 0 0 45%;
flex: 0 0 45%;
max-width: 45%; }
@media (min-width: 768px) {
.sidebar-main .sidebar-cart .sidebar-body .list-minicart {
padding-bottom: 24px; }
.sidebar-main .sidebar-cart .sidebar-suggest .sidebar-title h4 {
font-size: 24px; } }
@media (min-width: 992px) {
.sidebar-main .sidebar-cart .sidebar-suggest .sidebar-title .navcontrol {
display: inline-flex;
align-items: center;
gap: 4px; } }
@media (min-width: 1024px) {
.sidebar-main .sidebar-cart .sidebar-suggest {
padding: 40px 0;
position: fixed;
display: block;
max-width: 450px;
max-height: 100%;
width: 450px;
top: 8.125rem;
right: calc(100% + 20px);
overflow: visible;
margin: 0px auto; }
.sidebar-main .sidebar-cart .sidebar-suggest:after {
left: 100%;
top: 104px;
content: " ";
height: 0px;
width: 0px;
position: absolute;
pointer-events: none;
margin-top: -9px;
border-style: solid;
border-image: initial;
border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) white;
border-width: 8px; } }
.sidebar-main .sidebar-menu.sidebar-wrapper {
width: 85%; }
.sidebar-main .sidebar-menu .sidebar-head {
border-bottom: 1px solid #ddd; }
.sidebar-main .sidebar-menu .sidebar-head h4 a {
display: block; }
.sidebar-main .sidebar-menu .sidebar-head h4 img {
height: 24px; }
.sidebar-main .sidebar-menu .sidebar-head button {
position: absolute;
right: -53px;
top: 0;
color: #fff;
width: 53px;
height: 53px;
background: #000102; }
.sidebar-main .sidebar-menu .menuList-links {
display: flex;
flex-direction: column; }
.sidebar-main .sidebar-menu .menuList-links > li {
border: 0; }
.sidebar-main .sidebar-menu .menuList-links > li > a {
font-size: 14px;
padding: 10px 0; }
.sidebar-main .sidebar-menu .menuList-links li.has-submenu.level0 > ul.submenu-links li a {
padding: 12px 14px; }
.sidebar-main .sidebar-menu .mobile-menu--banner {
display: flex;
gap: 10px;
flex-direction: column; }
.sidebar-main .sidebar-menu .mobile-menu--banner .banner-inner a {
position: relative;
overflow: hidden;
padding-bottom: calc(106/320 * 100%);
display: block; }
.sidebar-main .sidebar-menu .mobile-menu--banner .banner-inner a img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover; }
.sidebar-main .sidebar-menu .mobile-menu--banner + .mobile-menu--wrap {
margin-top: 16px; }
.sidebar-main .sidebar-menu .mobile-menu--support {
background: #f8f8f8;
margin: 0 -14px;
border-top: 10px solid #f8f8f8;
margin-top: 16px; }
.sidebar-main .sidebar-menu .mobile-menu--support .mobile-social {
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: #fff; }
.sidebar-main .sidebar-menu .mobile-menu--support .mobile-social a {
flex: 1 1 auto;
border-radius: 50%;
height: 30px;
width: 30px;
display: inline-flex;
align-items: center;
justify-content: center; }
.sidebar-main .sidebar-menu .mobile-menu--support .mobile-social svg {
height: 30px;
width: 30px; }
.sidebar-main .sidebar-menu .mobile-menu--support .mobile-account .account-action {
display: flex;
gap: 10px;
align-items: center;
text-decoration: underline;
color: #666;
padding: 16px;
border-bottom: 1px solid #ddd; }
.sidebar-main .sidebar-menu .mobile-menu--support .mobile-account .account-listing {
padding: 14px;
display: flex;
flex-direction: column;
gap: 6px; }
.sidebar-main .sidebar-menu .mobile-menu--support .mobile-account .account-listing .line a {
display: flex;
gap: 4px;
align-items: center; }
.sidebar-main .sidebar-menu .mobile-menu--support .mobile-account .account-listing .line a svg {
width: 20px;
height: 20px; }
.sidebar-main .sidebar-menu .mobile-menu--support .mobile-account .account-listing .line a span.icon {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center; }
.sidebar-main .sidebar-menu .mobile-menu--support .mobile-account .account-listing .line a span.text {
width: calc(100% - 54px); }
.sidebar-main .sidebar-menu .mobile-menu--support .mobile-submenu {
border-top: 1px solid #ddd;
padding: 0 0 12px; }
.sidebar-main .sidebar-menu .mobile-menu--support .mobile-submenu .menuList-links > li + li {
border-top: 1px solid #ddd; }
.sidebar-main .sidebar-menu .mobile-menu--support .mobile-submenu .menuList-links > li > a {
padding: 12px 14px; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap {
z-index: 1;
width: 100%;
height: 100%;
background: #fff;
overflow: hidden;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-btn {
background-color: #f5f5f5;
height: 53px;
padding: 12px 55px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
text-transform: uppercase; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-btn a {
padding: 0;
border: none;
display: flex;
align-items: center;
justify-content: center;
background: none;
height: 53px;
width: 53px;
outline: none;
position: absolute;
left: 0;
top: 0; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-btn a svg {
width: 20px;
height: 15px; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-btn span {
font-size: 16px;
font-weight: 700; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-nav {
height: calc(100% - 45px);
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
position: relative; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-nav::-webkit-scrollbar {
width: 2px;
height: 2px; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-nav::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
border-radius: 10px; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-nav::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(105, 105, 105, 0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-nav::-webkit-scrollbar-thumb:window-inactive {
background: rgba(105, 105, 105, 0.4); }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-list {
display: flex;
flex-wrap: wrap;
z-index: 99;
margin: 0;
gap: 0 30px;
flex-direction: column;
gap: 16px; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-list-item {
position: initial; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-list-item > .wrap-group-menu {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
padding: 0;
height: 96px;
background-position: right;
background-size: contain;
background-repeat: no-repeat;
background-color: #eee;
border: 1px solid #eee; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-list-item > .wrap-group-menu > a {
display: flex;
gap: 15px;
padding: 16px;
height: 100%;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
align-items: center;
position: relative; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-list-item > a {
display: flex;
gap: 10px;
padding: 16px 0 16px;
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
align-items: center;
position: relative;
justify-content: space-between; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-list-item > a svg {
width: 10px;
height: 10px; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-list-item > a:before {
content: '';
position: absolute;
border-top: 3px solid #ffcad4;
bottom: 0;
left: 0;
right: 26px;
display: none; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-list-item.link-mobile > a {
justify-content: flex-start; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-list-item.link-mobile > a svg {
width: 20px;
height: 20px; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-list-item:hover > a.active svg {
transform: rotate(180deg); }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .not-mega-sub .mobile-menu-mega .mobile-menu-mega-list {
flex-direction: column;
padding-top: 40px;
padding-bottom: 40px;
gap: 12px; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .not-mega-sub .mobile-menu-mega .mobile-menu-mega-list .mobile-menu-mega-item > a {
font-weight: 400;
font-size: 14px;
font-family: var(--skin-text-font);
text-transform: initial; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-mega {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
transform: translateX(-100%);
transition: all .4s;
visibility: hidden;
width: 100%;
display: none; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-mega .mobile-menu-mega-list {
display: flex;
gap: 6px;
flex-direction: column;
padding: 10px 0; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-mega .mobile-menu-mega-list .mobile-menu-mega-item {
width: 100%;
padding-left: 0;
padding-right: 0; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-mega .mobile-menu-mega-list .mobile-menu-mega-item > .wrap-group-menu .box-arrow-svg {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-mega .mobile-menu-mega-list .mobile-menu-mega-item > .wrap-group-menu > a {
padding: 8px 14px;
display: flex;
gap: 15px;
font-weight: 500;
align-items: center; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-mega .mobile-menu-mega-list .mobile-menu-mega-item > .wrap-group-menu > a > span.img {
width: 40px;
height: 40px;
display: inline-flex;
overflow: hidden;
align-items: center; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-mega .mobile-menu-mega-list .mobile-menu-mega-item > .wrap-group-menu > a > span.text {
width: calc(100% - 55px); }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-mega .mobile-menu-mega-list .mobile-menu-mega-item > .wrap-group-menu svg {
display: inline-block;
transform: rotate(-90deg);
width: 10px;
height: 10px; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-mega .mobile-menu-mega-list .mobile-menu-mega-item > a {
padding: 8px 0;
display: flex;
text-transform: uppercase;
font-weight: 500;
font-size: 12px;
padding-left: 15px;
padding-right: 15px;
justify-content: space-between;
align-items: center; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-mega .mobile-menu-mega-list .mobile-menu-mega-item > a svg {
display: inline-block;
transform: rotate(-90deg);
width: 10px;
height: 10px; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-mega-sub {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
transform: translateX(-100%);
transition: all .4s;
visibility: hidden;
display: none;
width: 100%; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-mega-sub li:not(.mobile-menu-btn) a {
padding: 8px 14px;
display: flex;
gap: 15px;
font-weight: 500;
align-items: center; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-mega-sub li:not(.mobile-menu-btn) a > span.img {
width: 40px;
height: 40px;
display: inline-flex;
overflow: hidden;
align-items: center; }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-mega-sub li:not(.mobile-menu-btn) a > span.text {
width: calc(100% - 55px); }
.sidebar-main .sidebar-menu .mobile-menu .mobile-menu--wrap .mobile-menu-mega-wrapper {
position: relative;
overflow-y: scroll;
overflow-x: hidden;
height: 100%;
margin-right: 2px;
-webkit-overflow-scrolling: touch;
-ms-scroll-chaining: none;
overscroll-behavior: none; }
.sidebar-main .sidebar-menu .sidebar-body {
padding: 14px 14px 0 14px; }
.sidebar-main .sidebar-menu .sidebar-body.open-sub {
overflow: hidden !important; }
.sidebar-main .sidebar-menu .sidebar-body.open-sub .mobile-menu--wrap .mobile-menu-mega.open {
visibility: visible;
height: 100%;
transform: translateX(0%);
z-index: 100;
display: block; }
.sidebar-main .sidebar-menu .sidebar-body.open-sub .mobile-menu--wrap .mobile-menu-mega-sub.open {
visibility: visible;
height: 100%;
transform: translateX(0%);
z-index: 100;
display: block; }
/*-----------------------------------------------*/
/* HEADER */
/*-----------------------------------------------*/
.topbar {
padding: 6px 0;
background: var(--skin-topbar-bg);
text-align: center;
font-size: 12px;
position: relative;
z-index: 13; }
.topbar .topbar-list a {
color: var(--skin-topbar-text);
display: flex;
flex-wrap: wrap;
justify-content: center; }
@media (min-width: 768px) {
.topbar {
font-size: 14px;
padding: 10px 0; } }
.main-header {
position: sticky;
z-index: 13;
top: 0;
left: 0;
right: 0;
width: 100%;
border-bottom: 1px solid #D3D3D3;
background: #FFF; }
.main-header .main-header--grid {
display: -ms-flexbox;
display: flex;
justify-content: space-between;
column-gap: 16px;
padding: 12px 0; }
.main-header .main-header--grid .main-header--logo, .main-header .main-header--grid .main-header--action {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
display: -ms-flexbox;
display: flex;
align-items: center; }
.main-header .main-header--grid .main-header--menu {
display: none;
-ms-flex: 1 1 auto;
flex: 1 1 auto; }
.main-header .main-header--grid .main-header--logo {
gap: 10px; }
@media (min-width: 992px) {
.main-header .main-header--grid {
padding: 0;
column-gap: 20px; }
.main-header .main-header--grid .main-header--menu {
display: block; } }
@media (min-width: 1024px) {
.main-header .main-header--grid {
padding: 0;
column-gap: 40px; } }
/* - Main logo */
.main-header--logo a {
display: -ms-flexbox;
display: flex;
align-items: center; }
.main-header--logo a img {
height: 30px;
aspect-ratio: 257 / 74; }
@media (min-width: 768px) {
.main-header--logo a img {
height: 38px; } }
@media (min-width: 1170px) {
.main-header--logo a img {
height: 48px; } }
/* - Main action */
.main-header--action {
justify-content: flex-end;
display: flex;
gap: 18px;
align-items: center;
flex-direction: row-reverse; }
.main-header--action .main-header--action-list {
display: flex;
align-items: center;
gap: 8px; }
.main-header--action .main-header--action-list > div {
display: inline-flex;
align-items: center;
justify-content: center; }
.main-header--action .main-header--action-list .main-header--icon > a {
width: 24px;
height: 24px;
display: inline-flex; }
.main-header--action .main-header--action-list .main-header--icon.h-cart a {
position: relative; }
.main-header--action .main-header--action-list .main-header--icon.h-cart a span.count {
background-color: #222;
border-radius: 50%;
width: 18px;
height: 18px;
line-height: normal;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
position: absolute;
top: -3px;
left: 15px;
color: #fff; }
.main-header--action .main-header--action-list .main-header--icon.h-menu-mb a {
justify-content: flex-end; }
.main-header--action .main-header--action-list .main-header--icon.h-menu-mb svg {
width: 20px; }
.main-header--action .main-header--action-list .main-header--text {
padding-left: 8px;
display: none; }
.main-header--action .main-header--action-list .main-header--text a {
text-decoration: underline;
display: inline-flex;
font-weight: 600; }
@media (min-width: 568px) {
.main-header--action .main-header--action-list .main-header--icon.h-search {
display: none; } }
@media (min-width: 992px) {
.main-header--action .main-header--action-list .main-header--icon.h-menu-mb {
display: none; } }
@media (max-width: 1199px) and (min-width: 992px) {
.main-header--action .main-header--action-list .main-header--icon.h-search {
display: inline-flex; } }
@media (min-width: 1024px) {
.main-header--action .main-header--action-list .main-header--text {
display: inline-flex; } }
/* - Main menu */
.main-nav-menu ul {
margin-bottom: 0;
padding-left: 0;
list-style-type: none; }
.main-nav-menu .menu-list {
display: -ms-flexbox;
display: flex; }
.main-nav-menu .menu-list svg.icon--arrow-bottom {
width: 10px;
height: 6px;
margin-left: 4px;
-webkit-transition: .2s;
-moz-transition: .2s;
-o-transition: .2s;
transition: .2s; }
.main-nav-menu .menu-list svg.icon--nav-triangle {
opacity: 0;
position: absolute;
bottom: -1px;
right: 50%;
width: 20px;
height: 9px;
z-index: 4; }
.main-nav-menu .menu-list--top {
display: -ms-flexbox;
display: flex;
justify-content: center; }
.main-nav-menu .menu-list--top > li {
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
padding: 24px 0 19px;
display: inline-flex; }
.main-nav-menu .menu-list--top > li > a {
position: relative;
display: block;
margin: auto;
min-height: 35px;
padding: 10px 14px;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
display: flex;
align-items: center; }
.main-nav-menu .menu-list--top > li > a > span.icon--menu {
height: 20px;
width: 20px;
background-size: 100%;
background-repeat: no-repeat;
background-position: 50%;
display: inline-block;
margin-right: 4px; }
.main-nav-menu .menu-list--top > li > a > span[data] {
display: block; }
.main-nav-menu .menu-list--top > li:hover > a {
font-weight: 700;
text-decoration: underline; }
.main-nav-menu .menu-list--top > li:hover > a svg.icon--nav-triangle {
opacity: 1; }
.main-nav-menu .menu-list--top > li.active > a {
font-weight: 700;
text-decoration: underline; }
.main-nav-menu .menu-list--top > li.menu-red > a {
color: #FF0000; }
@media (min-width: 1024px) {
.main-nav-menu .menu-list--top > li {
padding: 34px 0 29px; } }
@media (min-width: 1170px) {
.main-nav-menu .menu-list--top > li > a {
padding: 10px 14px; } }
.main-nav-menu .menu-list--top > li.menu-item--dropdown {
display: inline-flex;
justify-content: center; }
.main-nav-menu .menu-list--top > li.menu-item--dropdown .menu-list--dropdown {
background: #fff;
position: absolute;
z-index: 2;
opacity: 0;
visibility: hidden;
padding: 12px 0;
list-style-type: none;
top: 101%;
-moz-box-shadow: 0px 2px 6px rgba(193, 193, 193, 0.25);
-webkit-box-shadow: 0px 2px 6px rgba(193, 193, 193, 0.25);
box-shadow: 0px 2px 6px rgba(193, 193, 193, 0.25); }
.main-nav-menu .menu-list--top > li.menu-item--dropdown .menu-list--dropdown li {
position: relative; }
.main-nav-menu .menu-list--top > li.menu-item--dropdown .menu-list--dropdown li a {
padding: 8px 20px;
white-space: nowrap;
text-align: left;
display: block;
font-size: 14px; }
.main-nav-menu .menu-list--top > li.menu-item--dropdown .menu-list--dropdown li a svg.icon--arrow-bottom {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg); }
.main-nav-menu .menu-list--top > li.menu-item--dropdown .menu-list--dropdown li a svg.icon--nav-triangle {
top: 15px;
right: -6px;
width: 18px;
height: 9px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg); }
.main-nav-menu .menu-list--top > li.menu-item--dropdown .menu-list--dropdown li .menu-list--dropdown {
left: 100%;
top: 0;
margin-left: 0px;
margin-top: -1px;
visibility: hidden;
opacity: 0;
list-style-type: none;
border-radius: 0 5px 5px 5px;
-moz-box-shadow: 0px 2px 6px rgba(193, 193, 193, 0.25);
-webkit-box-shadow: 0px 2px 6px rgba(193, 193, 193, 0.25);
box-shadow: 0px 2px 6px rgba(193, 193, 193, 0.25); }
.main-nav-menu .menu-list--top > li.menu-item--dropdown .menu-list--dropdown li:hover > .menu-list--dropdown {
visibility: visible;
opacity: 1; }
.main-nav-menu .menu-list--top > li.menu-item--dropdown .menu-list--dropdown li:hover svg.icon--nav-triangle {
opacity: 1; }
.main-nav-menu .menu-list--top > li.menu-item--dropdown:hover > .menu-list--dropdown {
visibility: visible;
opacity: 1; }
.main-nav-menu .menu-list--top > li.menu-item--dropdown:not(.menu-red):hover > a {
color: #000000; }
.main-nav-menu .menu-list--top > li.menu-item--dropdown.last {
position: relative; }
.main-nav-menu .menu-list--top > li.menu-item--dropdown.last .menu-list--dropdown {
right: 0; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content {
width: 100%;
padding: 30px 0;
position: absolute;
left: 0;
background: #fff;
z-index: 2;
overflow: hidden;
top: 140%;
opacity: 0;
visibility: hidden;
transition: all 0.2s;
-moz-box-shadow: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
-webkit-box-shadow: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
box-shadow: 0px 24px 48px -12px rgba(16, 24, 40, 0.18); }
@media (max-width: 1320px) and (min-width: 1200px) {
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content {
height: 100%;
min-height: 60vh;
overflow-y: scroll; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content::-webkit-scrollbar {
display: none; } }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex {
display: flex;
align-items: flex-start;
justify-content: center;
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding: 0 16px; }
@media (min-width: 1025px) {
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex {
max-width: 940px; } }
@media (min-width: 1200px) {
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex {
max-width: 1160px; } }
@media (min-width: 1400px) {
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex {
padding-left: 120px;
padding-right: 120px;
max-width: 1440px; } }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex > a {
padding: 0 15px;
font-size: 13px;
text-transform: uppercase;
line-height: 55px; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-box {
-ms-flex: 0 0 100%;
flex: 0 0 10%;
max-width: 100%; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-list--second {
display: grid;
gap: 26px 14px;
grid-template-columns: repeat(5, minmax(auto, 1fr)); }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-list--second > li {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 138px; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-list--second > li > a {
display: block;
font-size: 14px;
font-weight: 700;
text-transform: uppercase; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-list--second > li .menu-list--thirt {
flex-direction: column;
gap: 8px; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-list--second > li .menu-list--thirt li {
width: 100%; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-list--second > li .menu-list--thirt li > a {
font-size: 14px;
font-weight: 400;
display: block; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-list--second.size-2 {
grid-template-columns: repeat(2, minmax(auto, 1fr)); }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-list--second.size-3 {
grid-template-columns: repeat(3, minmax(auto, 1fr)); }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-list--second.size-4 {
grid-template-columns: repeat(4, minmax(auto, 1fr)); }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-list--second.size-5 {
grid-template-columns: repeat(5, minmax(auto, 1fr)); }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-product--list {
padding-left: 26px;
display: flex;
gap: 10px; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-product--list .menu-product--item {
display: flex;
flex-direction: column;
position: relative;
flex: 1;
gap: 10px; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-product--list .menu-product--item .item--img {
position: relative;
overflow: hidden; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-product--list .menu-product--item .item--img a {
display: block;
padding-bottom: calc(3 / 2* 100%);
position: relative;
z-index: 1; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-product--list .menu-product--item .item--img img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-product--list .menu-product--item .item--detail {
display: flex;
flex-direction: column;
padding: 12px 0 0;
gap: 8px; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-product--list .menu-product--item .item--detail h3 {
font-size: 16px;
margin-bottom: 0;
text-transform: uppercase;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-product--list .menu-product--item .item--detail h3 a {
color: #0a0a0a; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-product--list .menu-product--item .item--detail .item--price {
display: flex;
font-size: 14px;
gap: 12px;
align-items: center; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-product--list .menu-product--item .item--detail .item--price .price {
font-weight: 700; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-product--list .menu-product--item .item--detail .item--price .price.hightlight {
color: #B51F29; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex .menu-product--list .menu-product--item .item--detail .item--price .price-del {
font-weight: 400;
color: #6B7280; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex.has-img .menu-box {
display: flex;
gap: 57px; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex.has-img .menu-box .menu-list {
-ms-flex: 1 1 auto;
flex: 1 1 auto; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content .menu-flex.has-img .menu-box .menu-banner {
-ms-flex: 0 0 326px;
flex: 0 0 326px;
max-width: 326px; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content.menu-package .menu-list {
gap: 37px;
justify-content: center;
width: 100%; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content.menu-package .menu-list .menu-item {
-ms-flex: 0 0 calc((100% - (37px*3)) / 4);
flex: 0 0 calc((100% - (37px*3)) / 4);
max-width: calc((100% - (37px*3)) / 4); }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content.menu-package .box {
display: flex;
flex-direction: column;
gap: 24px; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content.menu-package .box a {
display: block;
text-align: center; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content.menu-package .box h3 {
font-size: 14px;
font-weight: 700;
margin-bottom: 0;
text-transform: uppercase; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content.menu-package .box .menu-img {
background: #F7F7F7;
padding-bottom: 100%;
position: relative;
overflow: hidden; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content.menu-package .box .menu-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content.menu-brand .menu-list {
gap: 32px;
justify-content: center;
width: 100%; }
.main-nav-menu .menu-list--top > li.menu-item--mega .menu-content.menu-brand .menu-list .menu-item {
-ms-flex: 0 0 calc((100% - (32px*4)) / 5);
flex: 0 0 calc((100% - (32px*4)) / 5);
max-width: calc((100% - (32px*4)) / 5); }
.main-nav-menu .menu-list--top > li.menu-item--mega:hover .menu-content {
visibility: visible;
opacity: 1;
top: calc(100% + 1px); }
.main-header--search {
display: none; }
.main-header--search .search-box {
position: relative; }
.main-header--search .searchform {
position: relative;
min-width: 170px;
margin: 10px 5px; }
.main-header--search .searchform .input-search {
height: 40px;
padding: 8px 16px 8px 50px;
margin: 0;
width: 100%;
border: none;
font-weight: 400;
display: inline-block;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
border-radius: 100px;
background: #F2F2F2;
font-size: 14px; }
.main-header--search .searchform .input-search::placeholder {
color: #717171; }
.main-header--search .searchform .input-search:focus {
outline: none; }
.main-header--search .searchform .btn-search {
width: 40px;
height: 40px;
line-height: 40px;
position: absolute;
padding: 0;
top: 0px;
left: 8px;
background: transparent;
transition: opacity 150ms linear;
border: none; }
.main-header--search .smart-search-wrapper {
position: relative;
z-index: 2;
width: 100%;
background: #FFFFFF; }
.main-header--search .smart-search-wrapper .resultsContent {
max-width: 648px;
margin: auto; }
.main-header--search .smart-search-wrapper .dataEmpty {
text-align: center;
padding: 20px 0; }
.main-header--search .smart-search-wrapper .dataMore {
width: 100%;
text-align: center;
padding: 16px 0; }
.main-header--search .smart-search-wrapper .item-ult {
padding: 12px;
border-bottom: 1px dotted #dfe0e1;
width: 100%;
display: flex; }
.main-header--search .smart-search-wrapper .item-ult .thumbs {
width: 60px;
display: inline-block; }
.main-header--search .smart-search-wrapper .item-ult .thumbs a {
display: inline-block;
width: 100%;
height: 100%;
padding-bottom: 120%;
position: relative;
overflow: hidden; }
.main-header--search .smart-search-wrapper .item-ult .thumbs a img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; }
.main-header--search .smart-search-wrapper .item-ult .info {
width: calc(100% - 60px);
padding-left: 12px;
position: relative; }
.main-header--search .smart-search-wrapper .item-ult .info .title a {
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
margin: 0 0 6px;
font-weight: 600;
text-decoration: none; }
.main-header--search .smart-search-wrapper .item-ult .info .title p {
font-size: 12px;
font-weight: 500;
margin: 0; }
.main-header--search .smart-search-wrapper .item-ult .info .price {
margin-top: 6px; }
.main-header--search .smart-search-wrapper .item-ult .info .price .has-sale {
display: inline-flex;
gap: 10px;
align-items: center; }
.main-header--search .smart-search-wrapper .item-ult .info .price del {
font-size: 12px;
font-weight: 400;
color: #797979; }
.main-header--search .smart-search-wrapper .list {
max-height: 520px;
overflow-y: auto; }
.main-header--search .smart-search-wrapper .list::-webkit-scrollbar {
width: 2px;
height: 2px; }
.main-header--search .smart-search-wrapper .list::-webkit-scrollbar-track {
-webkit-border-radius: 0px;
border-radius: 0px;
background: #E7E7E7; }
.main-header--search .smart-search-wrapper .list::-webkit-scrollbar-thumb {
-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: inset 0 0 6px #262626; }
.main-header--search .smart-search-wrapper .list::-webkit-scrollbar-thumb:window-inactive {
background: #262626; }
@media (min-width: 568px) {
.main-header--search {
display: block; }
.main-header--search .search-box {
padding-top: 0; }
.main-header--search .searchform {
margin: 0; }
.main-header--search .smart-search-wrapper {
position: absolute;
right: 0;
min-width: 400px;
max-width: 500px;
border: 1px solid #EDEDED;
box-shadow: 0px 8px 14px rgba(224, 229, 238, 0.8); } }
@media (max-width: 1199px) and (min-width: 992px) {
.main-header--search {
display: none; }
.main-header--search .searchform {
margin: 10px 5px; } }
@media (min-width: 1170px) {
.main-header--search {
min-width: 200px; } }
@media (min-width: 1200px) {
.main-header--search .smart-search-wrapper {
top: calc(100% + 30px); } }
/*-----------------------------------------------*/
/* FOOTER */
/*-----------------------------------------------*/
.main-footer {
background: #000102;
padding: 35px 0 16px; }
.main-footer * {
color: #fff; }
.main-footer a:hover {
color: #fff;
text-decoration: underline; }
.main-footer .main-footer--flex {
display: flex;
flex-direction: column;
gap: 16px; }
.main-footer .main-footer--flex .widget-footer {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%; }
.main-footer .footer-bottom {
padding-top: 16px;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 35px; }
.main-footer .widget-footer {
display: flex;
flex-direction: column;
gap: 20px; }
.main-footer .widget-footer .widget-block {
display: flex;
flex-direction: column;
gap: 0px; }
.main-footer .widget-footer .widget-block .widget-block--title {
font-size: 16px;
font-weight: 600;
margin-bottom: 0;
padding: 0 0 10px; }
.main-footer .widget-footer .footerNav-link {
display: flex;
flex-direction: column;
gap: 8px; }
.main-footer .widget-footer .content-info {
display: flex;
flex-direction: column;
gap: 16px; }
.main-footer .widget-footer .content-info .address-footer ul {
display: flex;
flex-direction: column;
gap: 8px; }
.main-footer .widget-footer .content-info .address-footer li {
position: relative;
padding-left: 30px; }
.main-footer .widget-footer .content-info .address-footer li:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
background-size: 24px; }
.main-footer .widget-footer .content-info .address-footer li.contact-1:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.25 13.4951C10.741 13.4951 9.51302 12.2681 9.51302 10.7591C9.51302 9.25012 10.741 8.02213 12.25 8.02213C13.759 8.02213 14.986 9.25012 14.986 10.7591C14.986 12.2681 13.759 13.4951 12.25 13.4951ZM17.864 4.65212C16.333 3.07312 14.339 2.20312 12.25 2.20312C10.159 2.20312 8.16502 3.07312 6.63302 4.65312C5.07802 6.25712 4.22402 8.41212 4.29102 10.5661C4.48002 16.6701 11.67 21.4231 11.977 21.6221L12.246 21.7971L12.518 21.6251C12.824 21.4311 20.019 16.7931 20.209 10.5651C20.275 8.41212 19.42 6.25612 17.864 4.65212Z' fill='white'/%3E%3C/svg%3E"); }
.main-footer .widget-footer .content-info .address-footer li.contact-2:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.5317 12.4724C15.5208 16.4604 16.4258 11.8467 18.9656 14.3848C21.4143 16.8328 22.8216 17.3232 19.7192 20.4247C19.3306 20.737 16.8616 24.4943 8.1846 15.8197C-0.493478 7.144 3.26158 4.67244 3.57397 4.28395C6.68387 1.17385 7.16586 2.58938 9.61449 5.03733C12.1544 7.5765 7.54266 8.48441 11.5317 12.4724Z' fill='white'/%3E%3C/svg%3E"); }
.main-footer .widget-footer .content-info .address-footer li.contact-3:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M15 15.5002L24.32 7.93018H24.22H5.78003L15 15.5002Z' fill='white'/%3E%3Cpath d='M15.4499 17.0002C15.3222 17.1024 15.1635 17.1581 14.9999 17.1581C14.8363 17.1581 14.6776 17.1024 14.5499 17.0002L5.07991 9.16016V21.3802C5.07858 21.4729 5.09571 21.565 5.13029 21.6511C5.16488 21.7372 5.21623 21.8155 5.28136 21.8816C5.34649 21.9477 5.42411 22.0001 5.5097 22.0359C5.59528 22.0717 5.68713 22.0902 5.77991 22.0902H24.2199C24.3127 22.0902 24.4045 22.0717 24.4901 22.0359C24.5757 22.0001 24.6533 21.9477 24.7184 21.8816C24.7836 21.8155 24.8349 21.7372 24.8695 21.6511C24.9041 21.565 24.9212 21.4729 24.9199 21.3802V9.27016L15.4499 17.0002Z' fill='white'/%3E%3C/svg%3E"); }
.main-footer .widget-footer .logo-footer {
margin-bottom: 20px; }
.main-footer .widget-footer .logo-footer a {
display: block; }
.main-footer .widget-footer .logo-footer img {
max-height: 60px; }
.main-footer .widget-footer .payment-footer ul {
display: flex;
align-items: center;
gap: 12px; }
.main-footer .widget-footer .payment-footer ul li img {
max-width: 42px; }
.main-footer .widget-footer .bct-footer a {
display: block; }
.main-footer .widget-footer .bct-footer img {
max-height: 50px; }
.main-footer .widget-footer .newsletter-footer .newsletter-form form .input-group {
position: relative;
border: 1px solid #FFF;
border-radius: 8px;
overflow: hidden; }
.main-footer .widget-footer .newsletter-footer .newsletter-form input {
padding: 13px 13px 13px 19px;
border: none;
background: none;
height: 48px;
font-size: 12px;
color: #fff;
border-radius: 0px !important; }
.main-footer .widget-footer .newsletter-footer .newsletter-form input:-ms-input-placeholder {
color: #ffffff;
opacity: 1; }
.main-footer .widget-footer .newsletter-footer .newsletter-form input::placeholder {
color: #ffffff;
opacity: 1; }
.main-footer .widget-footer .newsletter-footer .newsletter-form button {
padding: 0;
background: #fff;
border: none;
position: absolute;
zindex: 2;
top: 0;
bottom: 0;
right: 0;
margin: auto;
display: inline-flex;
align-items: center;
justify-content: center;
color: #20265B;
font-size: 14px;
font-weight: 500;
border-radius: 0;
width: 70px; }
.main-footer .widget-footer.col-first {
margin-bottom: 25px; }
.main-footer .widget-footer.block-collapse .widget-block--title {
position: relative;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.main-footer .widget-footer.block-collapse .widget-block--title:before {
content: "";
right: 5px;
position: absolute;
box-sizing: border-box;
height: 8px;
width: 8px;
border-style: solid;
border-color: currentColor;
border-width: 0px 1px 1px 0px;
transform: rotate(45deg);
transition: border-width 150ms ease-in-out;
transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s; }
.main-footer .widget-footer.block-collapse .widget-block--content {
display: none;
padding: 8px 0 16px; }
@media (min-width: 992px) {
.main-footer {
padding: 45px 0; }
.main-footer .main-footer--flex {
flex-direction: row;
flex-wrap: wrap; }
.main-footer .main-footer--flex .widget-footer {
-ms-flex: 0 0 calc((100% - 16px) /2);
flex: 0 0 calc((100% - 16px) /2);
max-width: calc((100% - 16px) /2); }
.main-footer .main-footer--flex .widget-footer.col-first, .main-footer .main-footer--flex .widget-footer.col-last {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%; }
.main-footer .footer-bottom {
padding-top: 40px;
margin: 0;
border-top: none; }
.main-footer .widget-footer {
gap: 19px; }
.main-footer .widget-footer .logo-footer {
margin-bottom: 0; }
.main-footer .widget-footer .widget-block {
gap: 16px; }
.main-footer .widget-footer .widget-block .widget-block--title {
padding: 0;
border-bottom: none; }
.main-footer .widget-footer .widget-block .widget-block--title:before {
content: none; }
.main-footer .widget-footer .address-footer {
margin-bottom: 0; }
.main-footer .widget-footer .address-footer ul {
gap: 14px; }
.main-footer .widget-footer.col-first {
margin-bottom: 0; }
.main-footer .widget-footer.block-collapse .widget-block--content {
display: block;
padding: 0; } }
@media (min-width: 1240px) {
.main-footer .main-footer--flex {
--footer-gap-col: 40px;
flex-direction: row;
gap: var(--footer-gap-col); }
.main-footer .main-footer--flex .widget-footer {
-ms-flex: 0 0 calc((40% - var(--footer-gap-col)) /2);
flex: 0 0 calc((40% - var(--footer-gap-col)) /2);
max-width: calc((40% - var(--footer-gap-col)) /2); }
.main-footer .main-footer--flex .widget-footer.col-first {
-ms-flex: 0 0 calc(28% - var(--footer-gap-col));
flex: 0 0 calc(28% - var(--footer-gap-col));
max-width: calc(28% - var(--footer-gap-col)); }
.main-footer .main-footer--flex .widget-footer.col-last {
-ms-flex: 0 0 calc(32% - var(--footer-gap-col));
flex: 0 0 calc(32% - var(--footer-gap-col));
max-width: calc(32% - var(--footer-gap-col)); } }
@media (max-width: 991px) {
.main-footer .widget-footer.copyright-footer .widget-block--content {
display: flex;
gap: 4px;
justify-content: center;
flex-wrap: wrap;
margin-top: 10px; } }
/*-----------------------------------------------*/
/* COLLECTION TEMPLATE */
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/* QUICKVIEW TEMPLATE */
/*-----------------------------------------------*/
/*----------------------------------------------*/
/* CUSTOMER TEMPLATE */
/*----------------------------------------------*/
/*----------------------------------------------*/
/* CART TEMPLATE */
/*----------------------------------------------*/
.cart-layout {
background: #F4F4F4; }
.cart-layout .product-loop .product-loop--wrap {
background: #fff; }
.cart-layout .product-loop .lazy-img {
background: #fff !important; }
.cart-layout .cart-heading h1 {
font-size: 20px;
font-weight: 700;
margin-bottom: 0;
text-align: center; }
.cart-layout .cart-heading h2 {
font-size: 14px;
font-weight: 600;
margin-bottom: 16px; }
@media (min-width: 992px) {
.cart-layout .cart-heading h1 {
font-size: 28px; }
.cart-layout .cart-heading h2 {
font-size: 18px; } }
.cart-layout .button.btn-checkout {
width: 100%;
font-size: 16px;
font-weight: 600;
padding: 16px; }
.cart-layout .button.btn-update {
width: 100%;
background: #fff;
color: #000; }
.cart-layout .button.disabled {
color: #000 !important;
background: #cfcfcf;
border: 1px solid #cfcfcf;
opacity: 0.6;
cursor: not-allowed; }
.cart-layout .cart-order {
display: flex;
flex-direction: column;
border-radius: 8px;
background: #FFF;
padding: 22px; }
.cart-layout .cart-order.cart-order--loading {
gap: 41px; }
.cart-layout .cart-order .table-cart {
display: flex;
flex-direction: column;
gap: 20px; }
.cart-layout .cart-order .line-item {
display: flex;
padding: 10px 0;
position: relative;
z-index: 1; }
.cart-layout .cart-order .line-item + .line-item {
border-top: 1px solid #E5E5E5; }
.cart-layout .cart-order .line-item .line-item--media {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%; }
.cart-layout .cart-order .line-item .line-item--media .img {
margin: 0 auto;
text-align: center;
position: relative; }
.cart-layout .cart-order .line-item .line-item--media .img a {
display: block;
padding-bottom: calc(140/104 * 100%); }
.cart-layout .cart-order .line-item .line-item--media .img img {
position: absolute;
top: 0;
left: 0;
display: block;
object-fit: cover;
width: 100%;
height: 100%; }
.cart-layout .cart-order .line-item .line-item--info {
display: flex;
-ms-flex: 0 0 80%;
flex: 0 0 80%;
max-width: 80%;
padding: 0 0 0 14px;
flex-direction: column;
gap: 16px;
font-weight: 12px;
position: relative; }
.cart-layout .cart-order .line-item .line-item--info .detail {
display: flex;
flex-direction: column;
gap: 6px; }
.cart-layout .cart-order .line-item .line-item--info .action {
display: flex;
gap: 8px;
align-items: center; }
.cart-layout .cart-order .line-item .line-item--info .delete a {
display: inline-flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center; }
.cart-layout .cart-order .line-item .line-item--info .title a {
display: block;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis; }
.cart-layout .cart-order .line-item .line-item--info .desc {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 8px; }
.cart-layout .cart-order .line-item .line-item--info .qty .qty-box {
display: inline-flex;
align-items: center;
justify-content: space-between;
height: 36px; }
.cart-layout .cart-order .line-item .line-item--info .qty input.qty-input {
font-weight: 400;
height: 40px;
width: 60px;
padding: 0;
text-align: center;
color: #000;
border: none;
border-radius: 4px;
background: #F3F4F6;
-webkit-appearance: none; }
.cart-layout .cart-order .line-item .line-item--info .qty input.qty-input:focus {
outline: none; }
.cart-layout .cart-order .line-item .line-item--info .qty button.qty-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
height: 40px;
width: 40px;
padding: 0;
text-align: center;
border: none;
border-radius: 0;
-webkit-appearance: none; }
.cart-layout .cart-order .line-item .line-item--info .qty button.qty-btn:focus {
outline: none; }
.cart-layout .cart-order .line-item .line-item--info .qty button.qty-btn svg {
width: 18px;
height: 18px; }
.cart-layout .cart-order .line-item .line-item--info .qty button.disabled {
cursor: default;
pointer-events: none;
opacity: 0.4; }
.cart-layout .cart-order .line-item .line-item--info .variant {
display: flex;
gap: 8px; }
.cart-layout .cart-order .line-item .line-item--info .variant .box {
gap: 6px;
display: flex;
align-items: center; }
.cart-layout .cart-order .line-item .line-item--info .variant .box span.bg {
display: none;
width: 24px;
height: 24px; }
.cart-layout .cart-order .line-item .line-item--info .variant .box span.text {
text-transform: uppercase;
width: 100%;
display: block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical; }
.cart-layout .cart-order .line-item .line-item--info .variant .current-option {
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
border: 1px solid #E5E7EB;
background: #F9FAFB;
width: 100%;
height: 36px;
border-radius: 2px;
justify-content: space-between; }
.cart-layout .cart-order .line-item .line-item--info .variant .current-option .icon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center; }
@media (min-width: 768px) {
.cart-layout .cart-order .line-item .line-item--info .variant .current-option {
min-width: 110px; } }
.cart-layout .cart-order .line-item .line-item--info .variant .select-option {
display: none;
flex-direction: column;
gap: 4px;
padding: 4px;
background: #F9FAFB;
position: absolute;
top: 100%;
left: 0;
width: 100%;
z-index: 10;
border: 1px solid #E5E7EB;
opacity: 0;
visibility: hidden;
max-height: 200px;
overflow-y: auto; }
.cart-layout .cart-order .line-item .line-item--info .variant .select-option .option {
padding-right: 16px;
position: relative; }
.cart-layout .cart-order .line-item .line-item--info .variant .select-option .option:after {
content: '';
position: absolute;
top: 0;
right: 2px;
bottom: 0;
margin: auto;
background-image: url("data:image/svg+xml,%3Csvg width='9' height='8' viewBox='0 0 9 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.96967 0.968522C7.11054 0.834411 7.298 0.760269 7.49249 0.76174C7.68698 0.763212 7.87329 0.840182 8.01212 0.976409C8.15094 1.11264 8.23141 1.29747 8.23655 1.4919C8.24169 1.68633 8.1711 1.87515 8.03967 2.01852L4.04967 7.00852C3.98106 7.08242 3.89825 7.14172 3.8062 7.18289C3.71415 7.22405 3.61474 7.24623 3.51392 7.2481C3.4131 7.24997 3.31294 7.23148 3.21943 7.19375C3.12591 7.15603 3.04097 7.09983 2.96967 7.02852L0.323669 4.38252C0.249983 4.31386 0.19088 4.23106 0.149888 4.13906C0.108896 4.04706 0.0868544 3.94775 0.0850777 3.84704C0.0833009 3.74634 0.101826 3.64631 0.139547 3.55292C0.177268 3.45954 0.233412 3.3747 0.304631 3.30348C0.37585 3.23226 0.460684 3.17612 0.554072 3.1384C0.64746 3.10068 0.747489 3.08215 0.848192 3.08393C0.948895 3.08571 1.04821 3.10775 1.14021 3.14874C1.23221 3.18973 1.31501 3.24883 1.38367 3.32252L3.47767 5.41552L6.95067 0.990522C6.95692 0.982823 6.9636 0.975478 6.97067 0.968522H6.96967Z' fill='%2394a3b8'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: 8px;
background-position: center;
display: none;
opacity: 0;
visibility: hidden;
width: 12px;
height: 12px; }
.cart-layout .cart-order .line-item .line-item--info .variant .select-option .option.selected:after {
display: block;
opacity: 1;
visibility: visible; }
.cart-layout .cart-order .line-item .line-item--info .variant .box-option {
position: relative; }
.cart-layout .cart-order .line-item .line-item--info .variant .box-option.box-option--show .select-option {
display: flex;
opacity: 1;
visibility: visible; }
.cart-layout .cart-order .line-item .line-item--info .price-unit {
display: flex;
align-items: center;
gap: 8px; }
.cart-layout .cart-order .line-item .line-item--info .price-unit .price-current {
font-size: 16px;
font-weight: 700;
color: #0A0A0A; }
.cart-layout .cart-order .line-item .line-item--info .price-unit .percent {
display: none; }
.cart-layout .cart-order .line-item .line-item--info .price-unit .percent span {
background: #B51F29;
color: #F9FAFB;
height: 20px;
border-radius: 2px;
display: inline-flex;
align-items: center;
padding: 2px 10px;
font-size: 12px;
font-weight: 600; }
.cart-layout .cart-order .line-item .line-item--info .price-unit .price-compare {
color: #C1C1C1; }
.cart-layout .cart-order .line-item .line-item--info .price .price-current {
font-size: 16px;
font-weight: 700; }
@media (min-width: 768px) {
.cart-layout .cart-order .line-item {
padding: 16px; }
.cart-layout .cart-order .line-item .line-item--media {
-ms-flex: 0 0 12%;
flex: 0 0 12%;
max-width: 12%; }
.cart-layout .cart-order .line-item .line-item--info {
-ms-flex: 0 0 88%;
flex: 0 0 88%;
max-width: 88%;
padding: 0 0 0 24px;
flex-direction: row;
align-items: center; }
.cart-layout .cart-order .line-item .line-item--info .detail {
gap: 10px;
width: 50%; }
.cart-layout .cart-order .line-item .line-item--info .action {
gap: 16px;
width: calc(50% - 16px); }
.cart-layout .cart-order .line-item .line-item--info .action .qty, .cart-layout .cart-order .line-item .line-item--info .action .price {
width: 40%;
text-align: center; }
.cart-layout .cart-order .line-item .line-item--info .action .delete {
width: 15%;
text-align: right; }
.cart-layout .cart-order .line-item .line-item--info .title {
font-size: 16px; }
.cart-layout .cart-order .line-item .line-item--info .price-unit {
gap: 16px; } }
@media (min-width: 768px) {
.cart-layout .cart-order .table-cart {
gap: 10px; } }
.cart-layout .cart-inner {
display: flex;
flex-direction: column;
gap: 40px; }
.cart-layout .cart-inner > div {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%; }
.cart-layout .cart-box {
border-radius: 8px;
background: #FFF;
padding: 30px; }
.cart-layout .cart-summary {
display: flex;
flex-direction: column;
gap: 32px; }
.cart-layout .cart-summary .summary-action {
width: 100%;
display: flex;
align-items: center;
flex-wrap: wrap; }
.cart-layout .cart-summary .summary-action .notify-cart {
width: 100%;
padding: 12px 16px;
background: #F1F5F9;
color: #000;
text-decoration: underline; }
.cart-layout .cart-summary .summary-action .total-price {
width: 50%;
color: #000;
font-size: 12px;
padding: 0 16px; }
.cart-layout .cart-summary .summary-action .total-price span {
display: flex;
align-items: center;
justify-content: space-between; }
.cart-layout .cart-summary .summary-action .total-price span span {
font-weight: 600; }
.cart-layout .cart-summary .summary-action .btn-checkout {
height: 40px; }
.cart-layout .cart-summary .summary-total {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%; }
.cart-layout .cart-summary .summary-total .summary-line {
display: flex;
flex-direction: column;
gap: 8px; }
.cart-layout .cart-summary .summary-total .summary-line > div {
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between; }
.cart-layout .cart-summary .summary-total .summary-line > div span:last-child {
font-weight: 600;
font-size: 16px; }
.cart-layout .cart-summary .summary-notify {
color: #7c7c7c;
font-size: 0.875rem; }
@media (min-width: 768px) {
.cart-layout .cart-summary {
font-size: 16px; } }
.cart-layout .cart-emty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center; }
.cart-layout .cart-emty .empty-page-cart {
margin-top: 15px; }
.cart-layout .cart-emty .expanded-message {
margin-bottom: 16px; }
.cart-layout .cart-emty .expanded-message .link-continue {
margin: 15px 0 0; }
.cart-layout .cart-emty .expanded-message .link-continue .btn {
cursor: pointer;
padding: 10px 24px;
outline: none;
display: inline-flex; }
.cart-layout .cart-main {
padding: 40px 0; }
.cart-layout .cart-main .cart-push {
display: -ms-flexbox;
display: flex;
flex-direction: column;
gap: 16px; }
.cart-layout .cart-main .cart-left, .cart-layout .cart-main .cart-right {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
display: flex;
flex-direction: column;
gap: 16px; }
@media (min-width: 768px) {
.cart-layout .cart-main {
padding: 54px 0 70px; }
.cart-layout .cart-main .cart-right {
flex-direction: row; }
.cart-layout .cart-main .cart-right > div {
width: calc((100% - 16px) /2); } }
@media (min-width: 1024px) {
.cart-layout .cart-main .cart-push {
max-width: 85%;
margin: auto; } }
.cart-layout .cart-wrapper {
padding-bottom: var(--spacing-5); }
@media screen and (min-width: 768px) {
.cart-layout .cart-wrapper {
padding-bottom: var(--spacing-8); } }
@media (min-width: 992px) {
.cart-layout .cart-wrapper {
padding-bottom: var(--spacing-10); } }
.cart-layout .cart-notes textarea {
border-radius: 4px !important;
border: 1px solid #E5E5E5;
background: #f4f4f4;
padding: 12px;
font-weight: 400; }
.cart-layout .cart-promo {
display: flex;
flex-direction: column;
gap: 16px;
font-size: 12px; }
.cart-layout .cart-promo h3 {
font-size: 14px;
font-weight: 500;
margin-bottom: 12px; }
.cart-layout .cart-promo .promo-box--progress {
position: relative;
overflow: hidden; }
.cart-layout .cart-promo .promo-box--progress:before {
content: '';
width: 100%;
background: #E5E7EB;
height: 4px;
border-radius: 2px;
position: absolute;
margin: 10px 0;
top: 0;
left: 0;
z-index: 0; }
.cart-layout .cart-promo .promo-box--progress .promo-box--scroll {
position: relative;
display: flex;
/*overflow-x: scroll; */ }
.cart-layout .cart-promo .promo-box--progress .promo-progress {
background: #E5E7EB;
height: 4px;
border-radius: 2px;
position: absolute;
margin: 10px 0;
left: 0;
width: 73%;
/*&.full { width: 100%;}*/ }
.cart-layout .cart-promo .promo-box--progress .promo-progress .promo-progress-bar {
height: 4px;
background: #F92940;
border-radius: 5px;
width: 0%;
transition: width 0.5s; }
.cart-layout .cart-promo .promo-box--progress .promo-points {
display: flex;
width: 100%; }
.cart-layout .cart-promo .promo-box--progress .promo-points .box {
position: relative;
text-align: center; }
.cart-layout .cart-promo .promo-box--progress .promo-points .box .icon svg {
position: relative;
z-index: 1; }
.cart-layout .cart-promo .promo-box--progress .promo-points .box .icon svg rect {
fill: #070707; }
.cart-layout .cart-promo .promo-box--progress .promo-points .box .icon svg path {
stroke: none; }
.cart-layout .cart-promo .promo-box--progress .promo-points .box .text {
font-weight: 700;
padding: 6px 4px 0; }
.cart-layout .cart-promo .promo-box--progress .promo-points .box .text span {
display: block;
min-height: 42px; }
.cart-layout .cart-promo .promo-box--progress .promo-points .promo-point.active .box .icon svg rect {
fill: #F92940;
stroke: #F92940; }
.cart-layout .cart-promo .promo-box--progress .promo-points .promo-point.active .box .icon svg path {
stroke: #fff; }
@media (min-width: 992px) {
.cart-layout .cart-promo {
font-size: 14px; }
.cart-layout .cart-promo h3 {
font-size: 16px;
margin-bottom: 32px; }
.cart-layout .cart-promo .promo-box--progress {
overflow-x: hidden; }
.cart-layout .cart-promo .promo-box--progress:before {
width: calc((100% / 4) * 3);
margin: 10px auto;
left: 0;
right: 0; }
.cart-layout .cart-promo .promo-box--progress .promo-progress {
width: calc((100% / 4) * 3);
margin: 10px auto;
left: 0;
right: 0; }
.cart-layout .cart-promo .promo-box--progress .promo-points .box .text {
padding: 12px 8px 0; }
.cart-layout .cart-promo .promo-box--progress .promo-points .box .text span {
min-height: auto; }
.cart-layout .cart-promo .promo-box--progress .promo-points .promo-point {
width: calc(100%/4);
min-width: 191px; } }
/*----------------------------------------------*/
/* PAGE TEMPLATE */
/*----------------------------------------------*/
/*----- Store page -----*/
.store-layout iframe {
border: none; }
.store-layout .listStore {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 40px;
margin-bottom: 60px; }
.store-layout .listStore .leftColStore {
display: flex;
flex-direction: column; }
.store-layout .titleStorePage {
font-size: 18px;
margin: 15px 0;
cursor: pointer;
font-weight: normal; }
.store-layout .resultStoreBig .resultStore {
width: 100%;
background: #f5f5f5;
max-height: 450px;
overflow: hidden;
padding-right: 4px;
padding: 30px 4px 30px 0px; }
.store-layout .resultStoreBig .resultStore a {
color: #252a2b; }
.store-layout .resultStoreBig .resultStore .innerResultStore {
height: 335px;
display: flex;
flex-direction: column;
overflow-y: scroll;
overflow-x: hidden;
padding: 0 20px;
gap: 16px; }
.store-layout .resultStoreBig .resultStore .innerResultStore::-webkit-scrollbar {
width: 2px;
height: 2px; }
.store-layout .resultStoreBig .resultStore .innerResultStore::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
border-radius: 10px; }
.store-layout .resultStoreBig .resultStore .innerResultStore::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(105, 105, 105, 0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }
.store-layout .resultStoreBig .resultStore .innerResultStore::-webkit-scrollbar-thumb:window-inactive {
background: rgba(105, 105, 105, 0.4); }
.store-layout .resultStoreBig .resultStore .itemStore {
width: 100%; }
.store-layout .resultStoreBig .resultStore .districtStore a {
color: #252a2b;
display: flex;
gap: 5px; }
.store-layout .resultStoreBig .resultStore .districtStore span {
font-weight: bold;
font-size: 16px; }
.store-layout .resultStoreBig .resultStore .districtStore svg {
margin-top: 5px; }
.store-layout .resultStoreBig .resultStore .addressStore {
font-size: 14px;
margin: 0 0 0 20px; }
.store-layout .resultStoreBig .resultStore .addressStore a {
color: #252a2b; }
.store-layout .resultStoreBig .resultStore .addressStore > a {
color: #252a2b; }
.store-layout .resultStoreBig .resultStore .addressStore > a > span {
color: #252a2b;
float: left;
width: 100%;
margin: 0 0 3px;
cursor: pointer; }
.store-layout .resultStoreBig .resultStore .addressStore .infoStatus p, .store-layout .resultStoreBig .resultStore .addressStore .infoTime p {
margin: 0 0 3px; }
.store-layout .resultStoreBig .resultStore .guideWay {
text-decoration: underline;
font-size: 12px; }
.store-layout .resultStoreBig .resultStore .dateOpen {
background: #d92046;
color: white;
font-size: 10px;
padding: 2px 7px;
margin: 2px 0 4px 20px;
display: inline-block; }
.store-layout .resultStoreBig .resultStore.heightAuto {
height: auto; }
@media (min-width: 992px) {
.store-layout .listStore {
flex-direction: row; }
.store-layout .listStore .leftColStore {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%; }
.store-layout .listStore .rightColStore {
-ms-flex: 0 0 calc(66.666667% - 20px);
flex: 0 0 calc(66.666667% - 20px);
max-width: calc(66.666667% - 20px); } }
/*-----------------------------------------------*/
/* BODY JS */
/*-----------------------------------------------*/
html.open-minicart .sidebar-main .sidebar-wrapper.sidebar-cart, body.open-minicart .sidebar-main .sidebar-wrapper.sidebar-cart {
opacity: 1;
visibility: visible;
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0); }
html.open-minicart .sidebar-overlay, body.open-minicart .sidebar-overlay {
display: block; }
html.open-menumobile .sidebar-main .sidebar-wrapper.sidebar-menu, body.open-menumobile .sidebar-main .sidebar-wrapper.sidebar-menu {
opacity: 1;
visibility: visible;
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0); }
html.open-menumobile .sidebar-overlay, body.open-menumobile .sidebar-overlay {
display: block; }
@media (max-width: 567px) {
html.open-search .main-header, html.open-search .topbar, body.open-search .main-header, body.open-search .topbar {
z-index: 15; }
html.open-search .sidebar-overlay, body.open-search .sidebar-overlay {
display: block; }
html.open-search .main-header--search, body.open-search .main-header--search {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: auto;
background: #000;
display: block; } }
@media (max-width: 1199px) and (min-width: 992px) {
html.open-search .main-header, html.open-search .topbar, body.open-search .main-header, body.open-search .topbar {
z-index: 15; }
html.open-search .sidebar-overlay, body.open-search .sidebar-overlay {
display: block; }
html.open-search .main-header--search, body.open-search .main-header--search {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-left: auto;
background: rgba(225, 225, 225, 0.4);
display: block;
max-width: 500px;
width: 100%; } }
html.open-filtermb .sidebar-overlay, body.open-filtermb .sidebar-overlay {
display: block; }
html.clock-scroll, body.clock-scroll {
overflow: hidden; }