:root {
    --body-bg: #fff;
    --footer-bg-main: #F0F0F0;
    --footer-bg-secondary: #F0F0F0;
    --red-light: #F00;
    --Red: #EB5757;
    --Green-1: #219653;
    --Green-3: #6FCF97;
    --Gray-2: #4F4F4F;
    --Gray-3: #828282;
    --Gray-4: rgb(0, 0, 0, 0.2);
    --Gray-5: #E0E0E0;
    /*--Foundation-Primary-Normal: #FF78C4;*/
    --Foundation-Primary-Normal: #FF6F61;
    --Foundation-Pantone-Normal: #FF8C55;
    --Foundation-Pantone-Secondary: #82110C;
    --Foundation-Forth-Normal: #FFECEC;
    --Foundation-Primary-Light: #FFF2F9;
    --foundation-primary-light-active: #FFD5ED;
    --foundation-primary-light-hover: #FFEBF6;
    --Foundation-Forth-Darker: #595353;
    --Foundation-Primary-Dark: #972f29;
    --slide-nav-bg: rgba(255, 255, 255, 0.70);
    --Foundation-Forth-Light: #FFFDFD;
    --Foundation-Secondary-Normal: #ff958b;
    --Foundation-Secondary-Dark: #fda8a0;
    --Foundation-Secondary-Darker: #ffbab6;
    --Foundation-Primary-Darker: #82110C;
    --Foundation-Secondary-Light: #FCF7FF;
    --Foundation-Third-Normal: #ffae8b;
    --header-bg: #F5F5F5;
    --input-gb-dark: #E3E3E3;
}

@font-face {
    font-family: site-font;
    font-weight: 100;
    src: url("../webfonts/liana/Liana-FD-Light.b35cf6432588.ttf");
}
@font-face {
    font-family: site-font;
    font-weight: 200;
    src: url("../webfonts/liana/Liana-FD-Light.b35cf6432588.ttf");
}
@font-face {
    font-family: site-font;
    font-weight: 300;
    src: url("../webfonts/liana/Liana-FD-Light.b35cf6432588.ttf");
}
@font-face {
    font-family: site-font;
    font-weight: 400;
    src: url("../webfonts/liana/Liana-FD-Regular.abdf36086bd6.ttf");
}
@font-face {
    font-family: site-font;
    font-weight: 500;
    src: url("../webfonts/liana/Liana-FD-Regular.abdf36086bd6.ttf");
}
@font-face {
    font-family: site-font;
    font-weight: 600;
    src: url("../webfonts/liana/Liana-FD-Bold.4988c3490978.ttf");
}
@font-face {
    font-family: site-font;
    font-weight: 700;
    src: url("../webfonts/liana/Liana-FD-Bold.4988c3490978.ttf");
}
@font-face {
    font-family: site-font;
    font-weight: 800;
    src: url("../webfonts/liana/Liana-FD-Black.d7e72583c043.ttf");
}
@font-face {
    font-family: site-font;
    font-weight: 900;
    src: url("../webfonts/liana/Liana-FD-Black.d7e72583c043.ttf");
}
@font-face {
    font-family: site-awesome;
    font-weight: 900;
    src: url("../webfonts/fa-solid-900.25914cfeafce.ttf");
}

/* =====================Reset CSS================== */
/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
    box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
    margin: 0;
    outline: none;
}
/*
  Typographic tweaks!
  3. Add accessible line-height
  4. Improve text rendering
*/
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
/*
  5. Improve media defaults
*/
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
/*
  6. Remove built-in form typography styles
*/
input, button, textarea, select {
    font: inherit;
}
/*
  7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
/*
  8. Create a root stacking context
*/
#root, #__next {
    isolation: isolate;
}
/* ================================================ */
body {
    font-family: site-font, sans-serif;
    font-weight: 400;
    font-size: 16px;
    background: var(--body-bg);
}

.h100 {
    height: 100%;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.mb0 {
    margin-bottom: 0;
}

p {
    font-size: 16px;
    margin-bottom: 16px;
}

hr {
    border: none;
    border-top: 1px solid #E9EBF8;
    margin: 16px 0;
}

hr.narrow {
    margin: 0;
}

button, a {
    cursor: pointer;
    border: none;
    text-decoration: none;
    color: inherit;
}

li {
    list-style: none;
}

input:disabled {
    background: #ddd;
}

textarea {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: 300px;
    min-height: 120px;
    max-height: 300px;
}

.container {
    max-width: 1200px;
    margin: auto;
}

.text-justify {
    text-align: justify;
    margin: 12px 0;
}

.text-center {
    text-align: center;
}

.hyperlink {
    color: var(--Foundation-Primary-Normal);
}

.mt-16 {
    margin-top: 16px !important;
}

.mt-32 {
    margin-top: 32px !important;
}

.mt-48 {
    margin-top: 48px !important;
}

.no-margin {
    margin: 0 !important;
}

.no-padding {
    padding: 0 !important;
}

.full-width {
    width: 100%;
}

.hide-desktop {
    display: none;
}

/*======================= Site Header ===========================*/
header.header {
    position: relative;
    z-index: 101;
}

.header-notice {
    background: var(--Foundation-Primary-Normal);
    color: var(--Foundation-Forth-Normal);
    text-align: center;
    font-size: 16px;
    padding: 12px 0;
}

.header-nav {
    height: 80px;
    background: var(--header-bg);
    /*box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);*/
    position: relative;
    z-index: 1;
}

.header-nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.header-nav-content {
    display: flex;
}

#header-nav-menu-btn {
    display: none;
    background: none;
    padding: 14px 14px 9px;
    color: var(--Foundation-Primary-Dark);
}

#header-nav-menu-btn i {
    font-size: 29px;
}

#header-nav-menu-btn .fa-xmark {
    display: none;
}

#header-nav-menu-btn.expand .fa-bars {
    display: none;
}

#header-nav-menu-btn.expand .fa-xmark {
    display: block;
}

.header-nav-search-container {
    width: 270px;
    height: 56px;
    border-radius: 12px;
    background: var(--input-gb-dark);
    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.25) inset;
    display: flex;
    justify-content: space-between;
}

.header-nav-search-input {
    background: transparent;
    border: none;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    padding-right: 18px;
    color: var(--Gray-2);
    width: 225px;
}

.header-nav-search-input::placeholder {
    color: var(--Gray-2);
}

.header-nav-search-btn {
    background: transparent;
    border: none;
    color: var(--Gray-2);
    line-height: 60%;
    cursor: pointer;
    margin-left: 10px;
}

.header-nav-btn {
    height: 56px;
    line-height: 56px;
    text-align: center;
    border-radius: 12px;
    background: var(--Foundation-Pantone-Normal);
    color: var(--Foundation-Forth-Light);
    /*box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.25);*/
    cursor: pointer;
    position: relative;
    margin-right: 26px;
    padding: 0 15px;
}

.header-nav-btn.outline {
    background: transparent;
    border: 1px solid var(--Foundation-Pantone-Secondary);
    color: var(--Foundation-Pantone-Secondary);
}

.header-nav-btn i {
    font-size: 18px;
    margin-left: 8px;
    /*color: var(--Foundation-Forth-Darker);*/
}

.mobile-navigation-cart-count,
.header-nav-cart-count {
    position: absolute;
    text-align: center;
    width: 25px;
    height: 25px;
    line-height: 25px;
    background: var(--Foundation-Pantone-Normal);
    color: #fff;
    border-radius: 50%;
    right: -10px;
    bottom: -10px;
}

.mobile-navigation-cart-count {
    top: 0;
    right: 0;
}

#mobile-category-list {
    position: fixed;
    background: var(--Foundation-Secondary-Darker);
    top: 60px;
    right: 0;
    left: 0;
    bottom: 0;
    display: none;
}

#mobile-category-list ul {
    padding: 0;
}

#mobile-category-list ul li {
    border-bottom: 1px solid var(--Foundation-Secondary-Normal);
}

#mobile-category-list ul li a {
    display: block;
    padding: 12px 0;
}

#mobile-menu-search-container {
    background: var(--Foundation-Forth-Normal);
    position: fixed;
    bottom: 55px;
    right: 0;
    left: 0;
    padding: 20px;
    display: none;
}

#mobile-menu-search-container .header-nav-search-container {
    width: 100%;
}

.header-menu {
    height: 50px;
    background: var(--header-bg);
    /*background: var(--Foundation-Primary-Dark);*/
    /*box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);*/
    position: relative;
    z-index: 0;
    border-bottom: 1px solid rgba(255, 111, 97, 0.2);
}

.header-menu .container {
    height: 100%;
}

.header-menu ul {
    display: flex;
    /*height: 100%;*/
    align-items: center;
    padding: 0;
}

.header-menu li {
    margin-left: 16px;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.header-menu a {
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    /*color: #fff;*/
    height: 29px;
    line-height: 29px;
    padding: 0 7px;
    display: block;
    border-radius: 8px;
    transition: all 0.3s;
}

.header-menu a.active,
.header-menu a:hover {
    background: var(--Foundation-Pantone-Normal);
    color: var(--Foundation-Forth-Normal);
}

.header-mega-menu {
    position: absolute;
    align-items: stretch;
    top: 49px;
    right: 0;
    background: var(--header-bg);
    border: 1px solid rgba(255, 111, 97, 0.2);
    border-radius: 0 0 16px 16px;
    height: auto;
    padding: 12px 16px;
    display: none;
}

.header-mega-menu-col {
    min-width: 125px;
    position: relative;
    padding: 0 8px;
}

.header-mega-menu-col:not(:last-child)::after {
    content: "";
    background: rgba(255, 111, 97, 0.2);
    width: 1px;
    position: absolute;
    left: 7px;
    top: 10%;
    bottom: 10%;
}

.header-mega-menu-col-title {
    color: var(--Foundation-Pantone-Secondary);
    font-weight: 600;
    margin-bottom: 8px;
}

.header-submenu {
    display: flex;
    flex-direction: column;
}

ul.header-submenu li {
    width: 100%;
    margin-bottom: 4px;
}

ul.header-submenu li a {
    width: 100%;
    padding-right: 8px;
    cursor: pointer;
}

ul.header-submenu i {
    font-size: 8px;
    margin-left: 4px;
}

.header-menu li:hover .header-mega-menu {
    display: flex;
}

#mobile-navigation {
    background: var(--Foundation-Primary-Normal);
    color: #fff;
    box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.2);
    position: fixed;
    z-index: 1;
    bottom: 0;
    right: 0;
    left: 0;
    height: 56px;
    display: none;
}

#mobile-navigation ul {
    display: flex;
    padding: 0;
    height: 100%;
    align-items: center;
    justify-content: space-around;
}

#mobile-navigation a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 10px 0;
    position: relative;
}

#mobile-navigation a label {
    font-size: 14px;
    font-weight: 400;
    margin-top: 4px;
}

.story-bar {
    /*background: rgba(255, 111, 97, 0.15);*/
    padding: 9px 0 0 0;
}

.story-item-container {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 16px;
    padding-bottom: 16px;
}

.story-item-container::-webkit-scrollbar {
    height: 5px; /* Scrollbar width */
}

.story-item-container::-webkit-scrollbar-track {
    background: rgba(255, 111, 97, 0.15); /* Track color */
}

.story-item-container::-webkit-scrollbar-thumb {
    background: var(--Foundation-Pantone-Normal); /* Scrollbar handle color */
    border-radius: 5px;
}

.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.story-item-img {
    border-radius: 100%;
    width: 80px;
    height: 80px;
    border: 1px solid var(--Foundation-Pantone-Secondary);
}

.story-item-title {
    margin-top: 4px;
}

/*==================== Site Header Cart =========================*/
.header-cart-container {
    background: var(--Foundation-Primary-Darker);
    box-shadow: -5px 0 8px 1px rgba(0, 0, 0, 0.25);
    position: fixed;
    top: 0;
    right: -500px;
    bottom: 0;
    z-index: 10;
    padding: 30px 34px;
    color: #fff;
    width: 440px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
}

.header-cart-container.show {
    right: 0;
}

.header-cart-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid #fff;
}

.header-cart-title {
    font-size: 20px;
    font-weight: 900;
}

#header-cart-close {
    background: none;
}

.header-cart-list {
    margin-top: 24px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.header-cart-product {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.square-image-container,
.header-cart-product-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
}

.square-image-container img,
.header-cart-product-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.header-cart-product-info {
    font-size: 16px;
    font-weight: 400;
    margin-right: 16px;
}

.header-cart-product-info-title {
    display: flex;
    margin-bottom: 12px;
}

.header-cart-product-info-title-text {
    text-wrap: nowrap;
    text-overflow: ellipsis;
    max-width: 200px;
    overflow: hidden;
}

.header-cart-product-info-title-count {
    margin-right: 4px;
}

.header-cart-product-cta {
    margin-right: auto;
    background: none;
}

#header-cart-see-more {
    height: 40px;
    line-height: 36px;
    text-align: center;
    background: #fff;
    color: var(--Foundation-Primary-Darker);
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    margin-top: auto;
    transition: all 0.3s;
    border: 1px solid transparent;
}

#header-cart-see-more:hover {
    background: var(--Foundation-Primary-Darker);
    color: #fff;
    border-color: #fff;
}

/*======================= Site Popup ============================*/
.overlay {
    background: rgba(0, 0, 0, 0.75);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 110;
    display: none;
}

.overlay.show {
    display: block;
}

.popup-container {
    background: #fff;
    width: 40%;
    height: 380px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 120;
    border-radius: 12px;
    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.25);
    flex-direction: column;
    padding: 20px;
    display: none;
}

.popup-container.full-height {
    height: auto;
}

.popup-container.show {
    display: flex;
}

.close-popup {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 24px;
    height: 24px;
    background: none;
}

.popup-title {
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 16px;
}

.popup-content {
    font-size: 12px;
    text-align: justify;
    overflow-y: auto;
}

.popup-content-video {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-content-video video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Keeps aspect ratio, avoids cropping */
}

/*======================= Site Footer ===========================*/
.site-footer {
    background: var(--footer-bg-main);
    padding-top: 36px;
    font-size: 12px;
    border-top: 1px solid var(--Gray-4);
}

.site-footer-bottom {
    background: var(--footer-bg-secondary);
    border-top: 1px solid var(--Gray-4);
    padding: 12px 0;
    margin-top: 24px;
}

.site-footer-bottom-content {
    display: flex;
    justify-content: space-between;
}

.site-footer-bottom-content > div {
    width: 33%;
}

.site-footer-bottom-content-copyright {
    text-align: center;
}

.site-footer-row {
    display: flex;
}

/*.site-footer-row > div {*/
/*    flex: 0 0 calc(25% - 20px);*/
/*}*/

.site-footer-about {
    flex: calc(40%);
    margin-left: 80px;
}

.site-footer-link {
    flex: calc(20%);
    margin-left: 20px;
}

.site-footer-contact {
    flex: calc(20%);
    margin-left: 30px;
}

.site-footer-certifications {
    flex: calc(20%);
}

.site-footer-title {
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 12px;
}

.site-footer ul {
    padding: 0;
}

.site-footer ul li {
    margin-bottom: 18px;
}

.site-footer ul.thin li {
    margin-bottom: 8px;
}

.site-footer p {
    text-align: justify;
}

.footer-link,
.site-footer a {
    font-size: 14px;
}

.footer-link i {
    font-size: 8px;
}

.nav-to-top {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: url("../images/icon-title-arrow.15d33f98e347.svg") no-repeat 12px 13px;
    background-size: 32px;
    transform: rotate(90deg);
    border: 1px solid var(--Foundation-Pantone-Normal);
    position: fixed;
    left: 32px;
    bottom: 12px;
    cursor: pointer;
    display: none;
    transition: opacity 0.3s ease-in-out;
    z-index: 100;
}

.floating-menu-container {
    position: fixed;
    bottom: 72px;
    right: 32px;
    z-index: 10;
}
.floating-menu-button, .floating-menu-item {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px !important;
    border: none;
    cursor: pointer;
    position: absolute;
    transition: transform 0.3s ease-in-out, opacity 0.3s;
}
.floating-menu-button {
    background-color: var(--Foundation-Primary-Normal);
    z-index: 10;
}
.floating-menu-item {
    background-color: var(--Foundation-Pantone-Normal);
    opacity: 0;
    transform: translateY(0);
}
.floating-menu-open .floating-menu-item:nth-child(2) { transform: translateY(-280px); opacity: 1; }
.floating-menu-open .floating-menu-item:nth-child(3) { transform: translateY(-210px); opacity: 1; }
.floating-menu-open .floating-menu-item:nth-child(4) { transform: translateY(-140px); opacity: 1; }
.floating-menu-open .floating-menu-item:nth-child(5) { transform: translateY(-70px); opacity: 1; }

/*======================= Accordion ===========================*/
.accordion-section {
    margin-bottom: 128px;
}

.accordion {
    margin-top: 32px;
}

.accordion-toggle-btn {
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    margin: auto;
    margin-top: 16px;
}

.accordion-toggle-btn i {
    margin: 0 12px;
}

.accordion-toggle-btn:hover {
    /*background-color: #ff6f61;*/
}

.accordion-text {
    max-height: 100px;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    will-change: max-height;
}

.accordion-text.open {
    max-height: 2000px;
}

/*======================= Slider ===========================*/
.section-slider {
    padding-top: 42px;
    padding-bottom: 35px;
}

.section-slider .swiper {
    border-radius: 18px;
}

.header-slider img {
    border-radius: 18px;
}

/* Slider Override */
.section-slider {
    --swiper-navigation-size: 12px;
    --swiper-navigation-sides-offset: 25px;
    --swiper-navigation-color: yellow;
    --swiper-pagination-color: #fff;
}

.section-slider .swiper-button-next,
.section-slider .swiper-button-prev {
    width: 24px;
    height: 24px;
    background: var(--slide-nav-bg);
    color: var(--Gray-2);
    border-radius: 100%;
}

.section-latest-products {
    padding-top: 35px;
    padding-bottom: 48px;
}

.product-container {
    display: flex;
    justify-content: space-between;
}

.latest-products-slider {
    padding: 10px;
}

.swiper-wrapper {
    /*padding-bottom: 16px;*/
}

.swiper-scrollbar {
    /*background: #ddd; */
}

.swiper-scrollbar-drag {
    background: var(--Foundation-Pantone-Normal);
}

/*======================= Product Box ===========================*/
.product-box {
    border-radius: 12px;
    overflow: hidden;
    background: var(--Foundation-Forth-Light);
    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.25);
    position: relative;
    display: block;
}

.swiper-slide .product-box {
    height: 100%;
}

.swiper-slide {
    height: auto;
    margin-bottom: 32px;
}

.product-box-off-badge {
    position: absolute;
    border-radius: 16px;
    padding: 2px 12px;
    color: #fff;
    background: var(--red-light);
    font-size: 24px;
    font-weight: 800;
    top: 16px;
    right: 13px;
    height: 32px;
    line-height: 32px;
}

.product-main-image-container {
    position: relative;
    overflow: hidden;
}

.product-box-out-of-stock {
    position: absolute;
    background: var(--Gray-3);
    color: #fff;
    width: 200px;
    transform: rotate(-45deg);
    text-align: center;
    top: 24px;
    left: -64px;
}

.product-box-image {
    width: 100%;
}

.product-box-detail {
    padding: 9px 13px;
    /*height: 100%;*/
}

.product-box-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.product-box-cats {
    display: flex;
    padding: 0;
    font-size: 12px;
    color: var(--Gray-3);
}

.product-box-cats li:not(:last-child)::after {
    content: "/";
    margin: 0 4px;
}

.product-box-price {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    margin-top: 18px;
}

.product-price-main {
    color: var(--Green-1);
    margin-right: auto;
}

.product-price-old {
    color: var(--Red);
    text-decoration: line-through;
}

.count-picker {
    display: flex;
    align-items: center;
}

.count-picker input {
    text-align: center;
    width: 50px;
    border-color: var(--Gray-3);
    border-radius: 4px;
    background: transparent;
    border: none;
}

.count-picker input::-webkit-outer-spin-button,
.count-picker input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.count-picker input[type=number] {
    -moz-appearance: textfield;
}

 .btn-counter {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--Gray-5);
    color: #4A4A4A;
}

/*======================= Section Special Offer ===========================*/
.section-special-offer {
    /*background: var(--Foundation-Secondary-Darker);*/
    padding: 32px 0;
}

.special-offer-badge-title {
    background: url("../images/discount-icon.049ce0412d12.svg") no-repeat center top;
    background-size: 128px;
    padding-top: 135px;
    min-width: 128px;
    text-align: center;
    font-size: 40px;
    font-weight: 900;
    align-self: center;
    width: 25%;
}

.section-special-offer-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.special-offer-container > div {
    flex: 0 0 calc(25% - 20px); /* Adjust the percentage and margin as needed */
    margin-right: 20px; /* Adjust the margin as needed */
}

.special-offer-container > div:first-child {
    margin-right: 0;
}

/*======================= Section Banner ===========================*/
.section-banner {
    padding: 64px 0;
}

.simple-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.simple-category-list-item {
    width: calc(25% - 16px);
}

.simple-category-list-item img {
    width: 100%;
    border-radius: 16px;
}

.banner-grid {
    display: grid;
    grid-template-areas:
    "banner2 banner2 banner1 banner1"
    "banner3 banner3 banner1 banner1";
    grid-template-columns: repeat(4, 1fr); /* 4 columns with equal width */
    gap: 24px; /* Adjust the gap as needed */
    direction: ltr;
}

.banner-1 {
    grid-area: banner1;
}

.banner-2 {
    grid-area: banner2;
}

.banner-3 {
    grid-area: banner3;
}

.banner-img-container {
    border-radius: 12px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    display: block;
    position: relative;
}

.banner-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-desc {
    position: absolute;
    right: 0;
    left: 0;
    height: 100%;
    top: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
    color: #fff;
    font-size: 48px;
    font-weight: 300;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-right: 32px;
    padding-bottom: 16px;
    transition: all 0.3s;
}

.banner-img-container:hover .banner-desc {
    top: 0;
}

/*======================= Section Banner ===========================*/
.section-category-sample {
    padding: 32px 0;
}

.section-category-sample.highlight {
    background: var(--Foundation-Secondary-Light);
}

.section-category-container-flex {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.section-category-container-flex .swiper {
    width: 75%;
}

.section-category-container {
}

.section-category-container .section-category-content {
    width: 25%;
}

.section-category-container .swiper {
    /*width: 75%;*/
    padding: 5px;
}

.highlight .section-category-container {
    flex-direction: row-reverse;
}

.section-category-container > div {
    /*flex: 0 0 calc(25% - 20px); !* Adjust the percentage and margin as needed *!*/
    /*margin-right: 20px; !* Adjust the margin as needed *!*/
}

.section-category-container > div:first-child {
    /*margin-right: 0;*/
}

.section-category-content {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
}

.section-category-content-title {
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    color: var(--Foundation-Primary-Darker);
    margin-bottom: 24px;
}

.section-category-content-desc {
    text-align: justify;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 16px;
}

.read-more {
    display: flex;
    align-items: center;
    background: var(--Foundation-Pantone-Normal);
    color: var(--Foundation-Forth-Normal);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.3s;
}
.read-more i {
    font-size: 8px;
    margin-right: 8px;
    order: 2;
}
.read-more:hover {
    background: transparent;
    color: var(--Foundation-Pantone-Normal);
    border-color: var(--Foundation-Pantone-Normal);
}

.section-category-content-see-more {
    margin-top: auto;
    align-self: flex-end;
}

/*======================= Section Latest News ===========================*/
.section-latest-news {
    padding: 98px 0;
}

.section-header-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
}

.section-header-row-title {
    background: url("../images/icon-title-arrow.15d33f98e347.svg") no-repeat;
    background-position: center right;
    line-height: 42px;
    padding-right: 12px;
    font-size: 16px;
    font-weight: 900;
}

.section-latest-news-container {
    display: flex;
    justify-content: space-between;
}

.latest-news-slider {
    padding: 10px;
    /*padding-bottom: 16px;*/
}

.news-box {
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.25);
    background: #FFF;
    border: 1px solid var(--Foundation-Pantone-Normal);
    padding: 16px 16px 0;
    flex-direction: column;
    height: 100%;
    flex: 0 0 calc(33.33% - 10px);
}

.news-box-img-container {
    position: relative;
}

.news-box-img {
    object-fit: cover;
    border-radius: 12px;
}

.news-box-img-label {
    background: var(--Foundation-Pantone-Normal);
    color: var(--Foundation-Forth-Light);
    position: absolute;
    top: 0;
    left: 0;
    padding: 4px 8px;
    border-radius: 12px 0 0 0 ;
}

.news-box-details {
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
}

.news-box-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}

.news-box-date {
    color: var(--Gray-3);
    font-size: 14px;
    margin-bottom: 12px;
}

.news-box-excerpt {
    font-size: 10px;
    text-align: justify;
}

.news-box-see-more {
    color: #0047B3;
    font-size: 12px;
    margin-top: 12px;
    align-self: flex-end;
}

.page-main {
    padding: 46px 0;
}

.page-title-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.mobile-page-title-row {
    display: none;
}

.page-title {
    font-size: 20px;
    font-weight: 900;
}

.page-title-sort-container {
    margin-right: auto;
    border-radius: 8px;
    padding: 16px;
    background: var(--Foundation-Secondary-Light);
}

.page-title-sort-label {
    font-size: 12px;
    font-weight: 700;
    margin-left: 12px;
}

.select-regular {
    min-width: 142px;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--Foundation-Primary-Darker);
}

.card {
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.25);
    margin-bottom: 18px;
    position: relative;
}

.card-content {
    padding: 14px 12px;
}

.card-content-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.card-list {
    padding: 0;
    font-size: 16px;
}

.card-list li {
    margin-bottom: 8px;
}

.card-list li a {
    transition: all 0.3s;
}

.card-list li a:hover {
    color: var(--Foundation-Primary-Dark);
}

.card-list-open {
    font-size: 12px;
    padding: 4px 8px;
    transition: all 0.3s;
    display: inline-block;
}

.card-list-open.expand {
    transform: rotate(-90deg);
}

.card-list-open:hover {
    color: var(--Foundation-Primary-Dark);
}

.card-list-sub {
    font-size: 14px;
    margin-top: 8px;
    padding-right: 30px;
    display: none;
}

.card-list-sub.show {
    display: block;
}

.card-list-sub .checkbox {
    position: relative;
    top: 3px;
    margin-left: 4px;
}

.card-list-search-container {
    display: flex;
    justify-content: space-between;
    border-radius: 21px;
    width: 100%;
    height: 32px;
    background: var(--Foundation-Secondary-Light);
    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.25) inset;
}

.card-list-search-container input {
    background: transparent;
    border: none;
    height: 100%;
    padding: 0 12px;
}

.card-list-search-container ::placeholder {
    color: var(--Foundation-Secondary-Dark);
}

.card-list-search-btn {
    background: transparent;
    border: none;
    color: var(--Foundation-Secondary-Dark);
    line-height: 60%;
    cursor: pointer;
    margin-left: 10px;
}

/* range slider */
.range-slider {
    direction: ltr;
    background-color: var(--foundation-primary-light-active);
    /*box-shadow: inset 0 0 8px #19182b;*/
    border-radius: 8px;
    height: 7px;
    position: relative;
    max-width: 560px;
    width: 100%;
    margin-top: 12px;
}
.range-slider__indicators {
    bottom: 64px;
    left: -16px;
    position: absolute;
    width: calc(100% + 32px);
}
.range-slider__value {
    position: absolute;
    text-align: center;
    display: none;
}
.range-slider__slider {
    appearance: none;
    border-radius: 8px;
    height: 3px;
    left: 0;
    right: 0;
    top: 2px;
    pointer-events: none;
    position: absolute;
    width: 100%;
}
.range-slider__slider::-webkit-slider-thumb {
    appearance: none;
    background-color: var(--Foundation-Primary-Dark);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2), inset 0 0 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    height: 12px;
    pointer-events: all;
    width: 12px;
}
.range-slider__slider::-moz-range-thumb {
    appearance: none;
    background-color: var(--Foundation-Primary-Dark);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2), inset 0 0 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    height: 12px;
    pointer-events: all;
    width: 12px;
}
.range-slider__slider::-webkit-slider-thumb:hover {
    background: var(--Foundation-Primary-Dark);
}
.range-slider__slider::-moz-range-thumb:hover {
    background: var(--Foundation-Primary-Dark);
}

.range-slider__slider--from {
    height: 0 !important;
    top: 4px;
    z-index: 1 !important;
}
.range-slider__scale {
    display: flex;
    justify-content: space-between;
    padding: 0 4px;
    position: relative;
    width: 100%;
}
.range-slider__scale i {
    background-color: #2c2641;
    display: block;
    height: 8px;
    width: 2px;
}
.range-slider__label {
    color: #19182b;
    font-size: 1.8rem;
    font-weight: bold;
    position: absolute;
    top: 24px;
}
.range-slider__label--min {
    left: -4px;
}
.range-slider__label--max {
    right: 4px;
}
.slider-prices-container {
    margin-top: 16px;
}
.slider-price-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}
.range-slider__value--min-label::after,
.range-slider__value--max-label::after {
    content: 'تومان';
    margin-right: 4px;
}

/*================== Shop Page Styles =====================*/
.shop-container {
    display: flex;
}

.shop-filters-col {
    flex: 2;
}

.shop-products-col-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    flex: 10;
    margin-right: 12px;
}

.shop-products-col-list::after {
    content: "";
    flex: auto;
}

.shop-products-col-list .product-box {
    width: calc(25% - 20px);
    margin: 0 10px 20px;
}

.mobile-shop-filter {
    background: var(--foundation-primary-light-active);
    color: var(--Foundation-Primary-Dark);
    padding: 0 20px;
    height: 42px;
    position: fixed;
    z-index: 2;
    bottom: 56px;
    right: 0;
    left: 0;
    display: none;
}

.mobile-shop-filter.expand {
    top: 60px;
    bottom: initial;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.mobile-shop-filter a {
    display: flex;
    align-items: center;
    padding: 0 12px;
}

.mobile-shop-filter a i {
    margin: 0 4px;
}

.mobile-shop-filter label {
    font-size: 14px;
}

.btn-info {
    color: var(--Foundation-Secondary-Dark);
    font-size: 14px;
    background: none;
    position: absolute;
    top: 12px;
    left: 12px;
}

.btn-info i {
    font-size: 20px;
    position: relative;
    top: 2px;
}

/*================== Pagination Styles =====================*/
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 56px;
}

.pagination-btn {
    width: 42px;
    height: 42px;
    line-height: 42px;
    border-radius: 100%;
    background: var(--Foundation-Primary-Light);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
    margin: 0 8px;
    transition: all 0.3s;
}

.pagination-btn:hover,
.pagination-btn.active {
    background: var(--Foundation-Primary-Dark);
    color: #fff;
}

.pagination-btn.prev,
.pagination-btn.next {
    background: none;
    box-shadow: none;
    color: var(--Foundation-Primary-Darker);
}

.pagination-btn.prev:disabled,
.pagination-btn.next:disabled {
    color: #AEAEAE;
}

.pagination-btn.empty {
    width: 12px;
    height: 12px;
    background: var(--Foundation-Primary-Dark);
    border-radius: 100%;
    box-shadow: none;
    position: relative;
    margin: 0 32px;
}
.pagination-btn.empty::before,
.pagination-btn.empty::after {
    content: '';
    width: 12px;
    height: 12px;
    background: var(--Foundation-Primary-Dark);
    border-radius: 100%;
    position: absolute;
    right: 16px;
    top: 0;
}
.pagination-btn.empty::after {
    right: initial;
    left: 16px;
}

/*================== Product Page Styles =====================*/
.page-product-header {
    display: flex;
}

.page-product-gallery-container {
    width: 25%;
}

.page-product-header-content {
    width: 75%;
    margin-right: 22px;
}

.page-product-header-content .page-title {
    margin-bottom: 14px;
}

.page-product-gallery-featured-image {
    position: relative;
}

.page-product-gallery img,
.page-product-gallery-featured-image img {
    border-radius: 8px;
}

#expand-gallery {
    position: absolute;
    bottom: 0;
    color: #fff;
    background: #000000;
    width: 32px;
    height: 32px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;
}

#close-gallery {
    background: transparent;
    color: #fff;
    position: fixed;
    top: 5%;
    right: 0;
    left: 0;
}

#close-gallery i {
    position: relative;
    top: 2px;
}

.page-product-gallery-featured-image:hover #expand-gallery {
    visibility: visible;
    opacity: 1;
}

.page-product-gallery-full-screen-container {
    display: none;
    position: fixed;
    top: 10%;
    right: 0;
    left: 0;
    z-index: 120;
}

.page-product-gallery-full-screen-container.show {
    display: block;
}

.page-product-gallery-full-screen {
    --swiper-navigation-color: #fff;
}

.product-page-gallery-image-full {
    height: 100%;
}

.product-page-gallery-image-full img {
    margin: auto;
    max-height: 80vh;
}

#expand-gallery i {
    position: relative;
    top: 3px;
}

.page-product-gallery {
    margin-top: 30px;
}

.product-page-gallery-image {
    height: 80px;
    cursor: pointer;
    transition: all 0.3s;
}

.product-page-gallery-image:hover {
    opacity: 0.7;
}

.page-product-gallery img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.breadcrumb {
    padding: 15px;
    font-size: 14px;
    border-radius: 8px;
    background: var(--Foundation-Secondary-Light);
    display: flex;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb i {
    font-size: 8px;
    margin: 0 8px;
}

.page-product-action-container {
    margin-top: 28px;
    margin-bottom: 0;
    padding: 18px 20px;
    position: sticky;
    top: 10px;
}

.page-card-title {
    margin-bottom: 12px;
    font-size: 16px;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    font-size: 14px;
}

.tags-list li {
    margin-left: 8px;
}

.tags-list li:not(:last-child)::after {
    content: '،';
}

.tags-list a:hover {
    text-decoration: underline;
}

.page-product-variant {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
}

.page-product-variant label {
    width: 10%;
}

.page-product-variant button {
    margin-right: 16px;
}

.btn-regular {
    border-radius: 8px;
    padding: 0 24px;
    background: var(--Gray-5);
    color: #4A4A4A;
    height: 42px;
    line-height: 42px;
    min-width: 190px;
    transition: all 0.3s;
    border: 1px solid transparent;
}

.btn-regular:hover {
    background: transparent;
    border-color: #4A4A4A;
}

.btn-regular.cta {
    background: var(--Foundation-Secondary-Normal);
    color: var(--Foundation-Primary-Darker);
}

.btn-regular.cta:hover {
    color: var(--Foundation-Secondary-Normal);
    background: var(--Foundation-Primary-Darker);
}

.btn-regular:disabled,
.btn-regular:disabled:hover {
    background: var(--Gray-5);
    color: var(--Gray-3);
    border-color: transparent;
    cursor: not-allowed;
}

.add-to-favorite {
    margin-left: 8px;
    background: transparent;
    border-color: var(--Foundation-Pantone-Normal);
    color: var(--Foundation-Pantone-Normal);
}

.add-to-favorite:hover {
    margin-left: 8px;
    background: transparent;
    border-color: var(--Foundation-Pantone-Normal);
    background: var(--Foundation-Pantone-Normal);
    color:var(--Foundation-Forth-Light);
}

.add-to-favorite-selected {
    margin-left: 8px;
    background: transparent;
    border-color: var(--Foundation-Pantone-Normal);
    background: var(--Foundation-Pantone-Normal);
    color:var(--Foundation-Forth-Light);
}

.add-to-favorite-selected:hover {
    margin-left: 8px;
    background: transparent;
    border-color: var(--Foundation-Pantone-Normal);
    color: var(--Foundation-Pantone-Normal);
}

.btn-mini.btn-default {
    background: var(--Gray-5);
    color: var(--Gray-2);
    text-align: center;
}

.btn-cta {
    background: #FF2929;
    color: #fff;
}

.btn-cta:hover {
    background: #fff;
    color: #FF2929;
    border-color: #FF2929;
}

.table-btn {
    height: 30px;
    line-height: 30px;
    width: 100%;
    min-width: initial;
    display: block;
}

.table-btn.mini {
    width: auto;
    padding: 0 8px 0 4px;
    display: inline-block;
}

.btn-regular.cta.table-btn-transparent {
    background: transparent;
    color: var(--Foundation-Primary-Dark);
    border: none;
    width: auto;
    min-width: auto;
    padding: 0 8px;
    display: inline-block;
}

.btn-regular.cta.table-btn-transparent:hover {
    border: none;
}

.btn-regular i {
    font-size: 14px;
    margin-left: 4px;
}

.btn-mini {
    background: var(--Foundation-Secondary-Normal);
    color: var(--Foundation-Primary-Darker);
    height: 34px;
    line-height: 32px;
    font-size: 18px;
}

.btn-mini:hover {
    opacity: 0.7;
}

.page-product-price-container {
    display: flex;
}

.page-product-price-container .product-price-old {
    margin-right: auto;
}

.page-product-price-container .product-price-main {
    margin-right: 16px;
}

.page-product-add-to-card-container {
    display: flex;
    justify-content: flex-end;
}

.page-product-add-to-card-container .count-picker {
    margin-left: 24px;
}

.page-product-add-to-card-continue {
    display: flex;
    justify-content: flex-end;
}

.product-page-description {
    margin-top: 44px;
}

.product-page-description .section-header-row-title {
    margin-bottom: 16px;
}

.product-page-description .card {
    padding: 28px 36px;
    margin-bottom: 46px;
}

.product-page-description .card p {
    text-align: justify;
    font-size: 14px;
    line-height: 25px;
}

.page-comments {
    margin-top: 48px;
    margin-bottom: 48px;
}

.page-comments .card {
    padding: 24px 20px;
}

.page-comments .section-header-row-title {
    margin-bottom: 16px;
}

.comment-box {
    display: flex;
}

.comment-box-author {
    min-width: 140px;
    margin-left: 12px;
    padding-top: 7px;
}

.comment-author-info {
    display: flex;
}

.comment-author-img {
    width: 42px;
    height: 42px;
    overflow: hidden;
    border-radius: 12px;
}

.comment-author-detail {
    margin-right: 12px;
}

.comment-author-name {
    font-size: 14px;
}

.comment-author-date {
    font-size: 14px;
    color: #8E98A8;
}

.comment-author-stars {
    margin-top: 16px;
}

.comment-author-stars i {
    color: var(--Foundation-Primary-Normal);
    font-size: 12px;
}

.comment-box-comment {
    font-size: 14px;
    line-height: 32px;
}

.comment-form {
    width: 40%;
}

.comment-form-title {
    margin-bottom: 16px;
}

.form-control {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
    position: relative;
}

.form-control.left {
    align-items: flex-end;
}

.form-control label {
    font-size: 14px;
    margin-bottom: 8px;
}

.form-control.error input {
    border-color: var(--red-light);
}

.form-input {
    border: 1px solid var(--Foundation-Primary-Darker);
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 14px;
}

.form-input-mini {
    width: 40px;
    text-align: center;
}

.rate-container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.rate-box {
    display: flex;
    direction: ltr;
}

.rate-box i {
    color: var(--Foundation-Primary-Normal);
    font-size: 14px;
    cursor: pointer;
    padding: 8px;
}

.form-control button {
    width: auto;
}

/*================== Cart Page =====================*/
.cart-page-card {
    padding: 50px 25px;
}

.cart-page-card-narrow {
    padding: 20px 25px;
}

.cart-page-card.cart-page-card-narrow .page-card-title {
    margin-top: 0;
}

.cart-page-card .page-card-title {
    margin-top: 16px;
}

.cart-product-row {
    display: flex;
    align-items: center;
    padding-bottom: 24px;
    border-bottom: 1px solid #E9EBF8;
    margin-bottom: 21px;
}

.cart-product-row input[type="checkbox"] {
    margin-left: 16px;
    cursor: pointer;
}

.cart-product-name {
    margin-right: 16px;
}

.cart-product-count {
    margin-right: 8px;
}

.cart-product-price {
    margin-right: auto;
}

.cart-product-amount {
    margin-right: 70px
}

button.cart-product-remove {
    margin-right: 24px;
    background: transparent;
    color: #FF2929;
}

.cart-page-option-row {
    display: flex;
    align-items: flex-start;
    margin-top: 16px;
}

.cart-page-option-label-container {
    margin-right: 16px;
}

.cart-page-option-radio {
    cursor: pointer;
    margin-top: 4px;
}

.cart-page-option-label-container label {
    display: block;
    font-size: 14px;
    cursor: pointer;
}

.cart-page-option-help {
    color: var(--Gray-3);
}

.cart-page-option-row-hidden-fields {
    display: none;
    margin-right: auto;
}

.cart-page-option-row-hidden-fields.show {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.prev-order-code .form-input {
    margin-right: 12px;
}

.prev-order-code button {
    margin-right: 12px;
}

.cart-page-option-feedback {
    font-size: 14px;
    margin-right: 12px;
    margin-top: 8px;
}

.cart-page-option-feedback.error {
    color: #FF0000;
}

.cart-page-option-feedback.success {
    color: var(--Green-1);
}

.delivery-type-price {
    font-size: 14px;
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
}

.cart-first-box-ctas {
    display: flex;
    justify-content: space-between;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner {
    animation: spin 1s linear infinite;
}

.cart-discount-code {
    display: flex;
    font-size: 14px;
    margin-bottom: 16px;
}

.cart-discount-code-value {
    margin: 0 8px;
}

.cart-discount-code-remove {
    background: transparent;
    color: var(--Foundation-Primary-Dark);
}

.cart-page-checkout-section {
    display: flex;
    justify-content: space-between;
}

.cart-page-checkout-section > .card {
    width: calc(50% - 10px);
}

.cart-title-row {
    display: flex;
    align-items: center;
}

.page-card-title-link {
    font-size: 14px;
    margin-bottom: 12px;
    margin-right: 16px;
}

.page-card-title-link a {
    color: var(--Foundation-Primary-Dark);
}

.cart-page-checkout-section textarea {
    height: 120px;
}

.cart-gateway {
    border: 1px solid var(--Foundation-Primary-Darker);
    background: var(--Foundation-Secondary-Light);
    display: flex;
    align-items: center;
    border-radius: 9px;
    height: 72px;
    padding: 0 12px;
    margin-top: 8px;
    cursor: pointer;
}

.cart-gateway * {
    cursor: pointer;
}

.cart-gateway-name {
    display: flex;
    align-items: center;
}

.cart-gateway:hover,
.cart-gateway.active {
    background: var(--Foundation-Third-Normal);
}

.cart-gateway-name input {
    margin-left: 12px;
}

.cart-gateway-name label {
    display: block;
    margin-bottom: 4px;
}

.cart-gateway-name-title {
    font-size: 16px;
}

.cart-gateway-name-desc {
    font-size: 14px;
}

.cart-gateway-logo {
    margin-right: auto;
}

.accept-rules {
    font-size: 14px;
}

.accept-rules * {
    cursor: pointer;
}

.accept-rules input {
    position: relative;
    top: 2px;
}

.accept-rules label {
    padding-right: 8px;
}

#payment-btn {
    margin-top: 16px;
    width: 100%;
}

/*================== Login Page =====================*/
.login-card {
    display: flex;
    min-height: 400px;
    overflow: hidden;
    width: 65%;
    margin: auto;
    margin-bottom: 128px;
}

.login-card button {
    display: block;
    margin: auto;
    margin-top: 16px;
}

.login-card-content {
    width: 50%;
    padding: 20px;
}

.login-form-title {
    font-weight: 900;
    font-size: 20px;
    line-height: 31px;
    text-align: center;
    margin-bottom: 16px;
}

.login-card-img {
    overflow: hidden;
    width: 50%;
}

.login-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.form-control-error {
    color: var(--red-light);
    margin-top: 4px;
    display: none;
}

.form-control-error.show {
    display: block;
}

.verify-code-container {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row-reverse;
}

/*================== Dashboard Page =====================*/
.dashboard-container {
    display: flex;
    align-items: flex-start;
    min-height: 600px;
}

.dashboard-nav {
    width: 25%;
    overflow: hidden;
}

.dashboard-nav ul {
    padding-right: 0;
}

.dashboard-nav li {}

.dashboard-nav li a {
    display: block;
    padding: 8px 24px;
    font-size: 14px;
    border-bottom: 1px solid rgb(89 42 69 / 20%);
}

.dashboard-nav li:last-child a {
    border-bottom-color: transparent;
}

.dashboard-nav li a i {
    width: 18px;
    text-align: center;
    cursor: pointer;
}

.dashboard-nav li a label {
    cursor: pointer;
}

.dashboard-nav li a:hover,
.dashboard-nav li a.active {
    background: var(--Foundation-Third-Normal);
}

.dashboard-content {
    width: calc(75% - 20px);
    margin-right: 20px;
}

.dashboard-stats-container {
    display: flex;
    justify-content: space-between;
}

.dashboard-stats {
    width: calc(33% - 10px);
    text-align: center;
    font-weight: 600;
    padding: 20px 0 14px;
}

.dashboard-stats i {
    color: var(--Foundation-Primary-Dark);
    font-size: 24px;
}

.dashboard-stats-title {
    font-size: 14px;
    margin: 12px 0 6px;
}

.dashboard-stats-value {
    font-size: 40px;
}

.dashboard-content-latest-products {
    padding: 20px;
}

.dashboard-content-latest-products-items {
    margin-top: 16px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.dashboard-content-latest-products-items .product-box {
    width: calc(25% - 10px);
}

.dashboard-nav-mobile {
    display: none;
}

.dashboard-list-card-row {
    display: flex;
    align-items: center;
    justify-content: left;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    padding-bottom: 16px;
}


.dashboard-list-card-row.no-border {
    border: none;
}

.dashboard-list-card {
    padding: 16px;
}

.dashboard-list-card-title {
    font-size: 20px;
    margin-left: auto;
}

.dashboard-list-card-title i {
    position: relative;
    top: 2px;
    margin-left: 8px;
}

.dashboard-list-tabs {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    padding-right: 0;
    margin-top: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    padding-bottom: 6px;
}

.dashboard-list-tab {
    padding: 3px 16px;
    border-bottom: 3px solid transparent;
}

.dashboard-list-tab.active {
    color: var(--Foundation-Primary-Normal);
    border-bottom-color: var(--Foundation-Primary-Normal);
}

.dashboard-list-content {
    font-size: 14px;
    margin-top: 12px;
    display: none;
}

.dashboard-list-content.show {
    display: block;
}

.dashboard-list-row {
    display: flex;
    align-items: center;
    padding: 4px 0;
}

.dashboard-list-row.row-header:nth-child(odd) {
    font-weight: 500;
    background: transparent;
}

.dlr-col {
    padding: 0 8px;
    text-align: center;
}

.dashboard-list-row:nth-child(even) {
    background: var(--Foundation-Primary-Light);
}

.dashboard-list-row:nth-child(odd) {
    background: var(--foundation-primary-light-active);
}

.dlr-col.col-05 {
    width: 5%;
}
.dlr-col.col-10 {
    width: 10%;
}
.dlr-col.col-15 {
    width: 15%;
}
.dlr-col.col-20 {
    width: 20%;
}
.dlr-col.col-25 {
    width: 25%;
}
.dlr-col.col-30 {
    width: 30%;
}
.dlr-col.col-40 {
    width: 40%;
}
.dlr-col.col-50 {
    width: 50%;
}

.back-btn {
    background: none;
    font-size: 14px;
    margin-left: 16px;
}

.dashboard-list-card-row-btn {
    font-size: 14px;
}

.dashboard-order-detail-row {
    font-size: 14px;
    display: flex;
    padding: 8px 0;
}

.dashboard-order-detail-col {
    margin: 0 12px;
    position: relative;
}

.dashboard-order-detail-col:not(:last-child)::after {
    content: '';
    width: 1px;
    background: #ccc;
    position: absolute;
    left: -12px;
    top: 4px;
    bottom: 4px
}

.address-box {
    border: 1px solid #E9E9E9;
    border-radius: 8px;
    margin-top: 12px;
    padding: 12px;
    font-size: 14px;
}

.address-box-row {
    display: flex;
}

.address-box-row b {
    margin-left: 8px;
}

.address-box p {
    margin-top: 12px;
}

.address-box-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.address-box-actions .btn-default {
    margin-left: 8px;
}

.btn-remove {
    color: var(--red-light);
    margin-left: 16px;
}

.btn-edit {
    color: var(--Foundation-Primary-Dark);
}

#address-form {
    margin-top: 16px;
}

#address-address {
    height: 100px;
    min-height: 100px;
}

.dashboard-total-credit {
    display: flex;
    align-items: center;
}

.dashboard-total-credit-title {}

.dashboard-total-credit-amount {
    font-weight: 700;
    font-size: 24px;
    line-height: 38px;
    margin-left: 8px;
    margin-right: 12px;
}

.dashboard-total-credit-icon {
    font-size: 16px;
    line-height: 16px;
    color: var(--Foundation-Primary-Dark);
}

.dashboard-list-row.has-copy .copy-discount-code {
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;
}

.dashboard-list-row.has-copy:hover .copy-discount-code {
    visibility: visible;
    opacity: 1;
}

.popup-detail td {
    padding: 4px;
}

.popup-detail td:first-child {
    font-weight: 500;
}

#ticket-reason {
    height: 100px;
}

.dashboard-ticket-create-main {
    display: none;
}

.dashboard-ticket-create-main.show {
    display: block;
}


.ticket-status {
    font-size: 14px;
    color: var(--Foundation-Primary-Dark);
    margin-left: 8px;
}

.dashboard-profile-content {
    width: 50%;
}

.change-disabled-input {
    font-size: 14px;
    color: var(--Foundation-Primary-Dark);
    position: absolute;
    top: 72px;
    left: 0;
    cursor: pointer;
    z-index: 2;
}

#profile-phone-confirm {
    background: var(--Green-3);
    color: #fff;
    align-self: flex-end;
    margin-top: 42px;
    display: none;
}

#profile-phone-confirm.show {
    display: block;
}

#profile-phone-confirm:hover {
    border-color: transparent;
}

#popup-confirm-phone {
    height: 180px;
    width: 300px;
}

.blog-container {
    display: flex;
}

.blog-list {
    width: 70%;
}

.blog-sidebar {
    width: 30%;
    margin-right: 20px;
}

.blog-list-card {
    display: flex;
    padding: 12px;
    margin-bottom: 16px;
}

.blog-list-card-thumbnail {
    width: 30%;
    border-radius: 8px;
    overflow: hidden;
}

.blog-list-card-thumbnail img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.blog-list-card-content {
    width: 70%;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
}

.blog-list-card-title {
    font-weight: 900;
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 8px;
}

.blog-list-card-date {
    font-size: 14px;
    line-height: 16px;
    color: var(--Gray-3);
}

.blog-list-card-excerpt {
    margin-top: 14px;
    font-size: 14px;
    text-align: justify;
}

.blog-list-card-readmore {
    font-size: 16px;
    color: #0047B3;
    align-self: flex-end;
    margin-top: auto;
}

.blog-sidebar-card {
    padding: 14px 16px;
}

.blog-sidebar-card-title {
    font-size: 14px;
    margin-bottom: 4px;
}

.blog-sidebar-card-element {
    display: flex;
    padding-bottom: 16px;
    margin-top: 16px;
    border-bottom: 1px solid #E9EBF8;
}

.blog-sidebar-card-element:last-child {
    border-bottom: none;
}

.blog-sidebar-card-element-img {
    width: 95px;
    height: 95px;
    border-radius: 12px;
    overflow: hidden;
}

.blog-sidebar-card-element-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-sidebar-card-element-content {
    margin-right: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 210px;
}

.blog-sidebar-card-element-content .product-price-main {
    margin-right: 0;
}

.blog-sidebar-card-element-content-title {
    font-size: 14px;
    margin-bottom: 8px;
}

.post-card {
    padding: 12px;
}

.post-card-thumbnail {
    border-radius: 8px;
    overflow: hidden;
}

.post-card-thumbnail img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.post-date {
    font-size: 14px;
    margin-top: 12px;
}

.post-tags-container,
.post-category-container {
    display: flex;
    padding: 0;
    font-size: 14px;
    margin-top: 8px;
}

.post-category-container a,
.post-tags-container a {
    color: var(--Foundation-Primary-Dark);
    margin-left: 4px;
}

.post-tags-container a:hover,
.post-category-container a:hover {
    text-decoration: underline;
}

.post-category-container li:not(:last-child) a::after {
    content: '،';
}

.post-content {
    text-align: justify;
    line-height: 28px;
    margin-top: 8px;
}

.post-card-title {
    font-size: 14px;
}

.post-tags-container li {
    margin-left: 4px
}

.page-list {
    width: 100%;
}

/*================== Responsive for Medium Screen =====================*/
@media screen and (max-width: 1200px) {

    .container {
        margin: 0 25px;
    }

    .special-offer-container .product-box {
        margin: 0 5px;
    }

    .section-category-sample .product-box {
        margin: 0 5px;
    }

    .shop-products-col-list .product-box {
        width: calc(33% - 20px);
    }

}
/*================== Responsive for Tablet Screen =====================*/
@media screen and (max-width: 768px) {

    body {
        padding-top: 60px;
    }

    .hide-desktop {
        display: block;
    }

    .block-tablet {
        display: block;
    }

    .hide-tablet {
        display: none;
    }

    .flex-between {
        padding: 0 25px;
    }

    .header-nav {
        background: var(--Foundation-Forth-Normal);
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
        height: 60px;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
    }

    .header-menu li:hover .header-mega-menu {
        display: none;
    }

    #header-nav-menu-btn {
        display: block;
    }

    .header-menu {
        position: fixed;
        z-index: 2;
        top: 60px;
        right: 0;
        left: 0;
        bottom: 0;
        height: auto;
        overflow-x: auto;
        display: none;
    }

    .header-menu a {
        font-size: 16px;
    }

    #header-menu.expand {
        display: block;
    }

    .header-nav-content {
        display: none;
    }

    .header-menu .container {
        margin: 0;
    }

    .header-menu ul {
        display: flex;
        height: auto;
        margin: 0;
        align-items: flex-start;
        flex-direction: column;
        padding: 0;
    }

    .header-menu li {
        width: 100%;
        flex-direction: column;
        border-top: 1px solid var(--Foundation-Primary-Darker);
    }

    .header-menu li a {
        width: 100%;
        height: 60px;
        line-height: 60px;
        padding: 0 25px;
        border-radius: 0;
    }

    ul.header-submenu {
        position: initial;
        width: 100%;
        box-shadow: none;
    }

    ul.header-submenu li a {
        padding-right: 40px;
    }

    #mobile-navigation {
        display: block;
    }

    .product-box-price {
        font-size: 10px;
        flex-direction: column;
        align-items: flex-end;
    }

    .product-box-off-badge {
        font-size: 14px;
        height: 24px;
        line-height: 24px;
    }

    .product-box-cats {
        font-size: 10px;
    }

    .special-offer-badge-title {
        font-size: 18px;
        background-size: 64px;
        padding-top: 78px;
    }

    .section-category-container {
        /*flex-wrap: wrap;*/
    }

    .section-category-container > div {
        /*flex: 0 0 calc(50% - 20px);*/
    }

    .section-category-sample .product-box {
        /*margin: 0 5px;*/
        /*width: 25%;*/
    }

    .section-category-sample .product-box:last-child {
        /*display: none;*/
    }

    .special-offer-badge-title {
        width: 40%;
    }

    .shop-filters-col {
        display: none;
    }

    .shop-filters-col.expand {
        background: var(--foundation-primary-light-hover);
        padding-top: 44px;
        display: block;
        position: fixed;
        top: 60px;
        right: 0;
        left: 0;
        bottom: 56px;
        overflow-y: auto;
        box-shadow: 0 1px 5px rgba(0,0,0,0.3);
    }

    .shop-filters-col.expand .card {
        background: transparent;
        box-shadow: none;
        margin-bottom: 0;
    }

    .shop-filters-col.expand .card-list li {
        margin-bottom: 24px;
    }
    .shop-filters-col.expand .card-list-sub {
        margin-top: 24px;
    }

    .shop-products-col-list {
        margin-right: 0;
    }

    .shop-products-col-list.collapse {
        display: none;
    }

    .mobile-shop-filter {
        display: flex;
        justify-content: space-between;
    }

    #mobile-shop-filter-apply {
        display: none;
    }

    .mobile-shop-filter.expand #mobile-shop-filter-remove {
        display: none;
    }

    .mobile-shop-filter.expand #mobile-shop-filter-apply {
        display: flex;
    }

    .page-title-sort-label {
        display: none;
    }

    .shop-products-col-list .product-box {
        width: calc(50% - 20px);
    }

    .comment-form {
        width: 100%;
    }

    .popup-container {
        width: 90%;
    }

    .cart-update-container {
        text-align: left;
    }

    .cart-discount-container {
        padding-left: 24px;
    }

    .cart-discount-container input,
    .cart-update-container button {
        margin-bottom: 12px;
        width: 100%;
    }

    .cart-discount-container button.btn-regular {
        width: 100%;
    }

    .cart-gateway {
        margin-top: 24px;
        height: 100px;
    }

    .login-card {
        flex-direction: column;
    }

    .login-card-content,
    .login-card-img {
        width: 100%;
    }

    .login-card-img {
        height: 400px;
    }

    .dashboard-content-latest-products-items .product-box {
        width: calc(50% - 10px);
        margin-bottom: 20px;
    }

    .dashboard-list-row.row-header {
        display: none;
    }

    .dashboard-list-row {
        flex-wrap: wrap;
    }

    .dlr-col:nth-child(1) {
        display: none;
    }

    .dlr-col:nth-child(2),
    .dlr-col:nth-child(3),
    .dlr-col:nth-child(4) {
        width: 33%;
    }
    .dlr-col:nth-child(5),
    .dlr-col:nth-child(6) {
        width: 50%;
        margin: 12px 0;
    }

    .tablet-2-col .dlr-col:nth-child(2),
    .tablet-2-col .dlr-col:nth-child(6) {
        width: 50%;
        margin: 0;
    }

    .tablet-2-col .dlr-col:nth-child(7) {
        width: 100%;
    }

    .tablet-2-col .dlr-col:nth-child(7) button {
        width: auto;
        margin: auto;
    }

    .tablet-3-col .dlr-col:nth-child(2),
    .tablet-3-col .dlr-col:nth-child(3),
    .tablet-3-col .dlr-col:nth-child(7) {
        width: 33%;
    }

    .tablet-3-col .dlr-col:nth-child(8) {
        width: 100%;
    }

    .tablet-3-col .dlr-col:nth-child(8) button {
        width: auto;
        margin: auto;
    }

    .dashboard-list-row.has-copy .copy-discount-code {
        visibility: visible;
        opacity: 1;
    }

    .dashboard-profile-content {
        width: 100%;
    }

    .blog-list {
        width: 60%;
    }

    .blog-sidebar {
        width: 35%;
    }

    .post-container {
        flex-direction: column;
    }

    .post-container .blog-list,
    .post-container .blog-sidebar {
        width: 100%;
        margin: 0;
    }

    .post-container .blog-sidebar {
        margin-top: 24px;
    }

    .post-container .page-comments {
        margin: 0;
    }

    .simple-category-list {
        flex-wrap: wrap;
        justify-content: center;
    }

    .simple-category-list-item {
        width: 20%;
    }

    .nav-to-top {
        bottom: 64px;
    }

    .floating-menu-button {
        bottom: -8px;
    }

    .floating-menu-open .floating-menu-item:nth-child(2) { transform: translateY(-330px); }
    .floating-menu-open .floating-menu-item:nth-child(3) { transform: translateY(-260px); }
    .floating-menu-open .floating-menu-item:nth-child(4) { transform: translateY(-190px); }
    .floating-menu-open .floating-menu-item:nth-child(5) { transform: translateY(-120px); }

    .page-product-add-to-card-continue {
        flex-direction: column;
        gap: 16px;
    }
}


/*================== Responsive for Mobile Screen =====================*/
@media screen and (max-width: 576px) {

    .block-mobile {
        display: block;
    }

    .hide-mobile {
        display: none;
    }

    .section-related-products.container,
    .section-other-products.container,
    .section-latest-products.container {
        margin: 0;
    }
    .section-related-products .section-header-row,
    .section-other-products .section-header-row,
    .section-latest-products .section-header-row {
        margin: 0 25px;
    }

    .product-box-price {
        font-size: 14px;
    }

    .special-offer-badge {
        display: none;
    }

    .special-offer-badge-mobile {
        display: block;
        margin-bottom: 16px;
    }

    .section-related-products,
    .section-other-products,
    .section-latest-products {
        padding: 14px 0 36px;
    }

    .section-special-offer {
        padding: 28px 0 43px;
    }

    .section-special-offer .container {
        margin: 0;
    }

    .special-offer-badge-title {
        background-size: 32px;
        background-position: center right;
        min-height: 32px;
        padding: 0 40px;
        margin-bottom: 18px;
        margin-right: 25px;
        margin-left: auto;
    }

    .special-offer-container-slider {
        display: block;
        padding: 10px;
    }

    .special-offer-container {
        display: none;
    }

    .section-banner {
        padding: 24px 0;
    }

    .banner-grid {
        grid-template-areas:
        "banner1 banner1 banner1 banner1"
        "banner2 banner2 banner2 banner2"
        "banner3 banner3 banner3 banner3";
    }

    .section-category-sample .container {
        margin: 0;
    }

    .highlight .section-category-container,
    .section-category-container {
        flex-direction: column;
    }

    .section-category-container .section-category-content {
        width: 100%;
        margin-bottom: 16px;
    }

    .section-category-container .swiper {
        width: 100%;
    }

    .section-category-content-desc {
        display: none;
    }

    .section-category-content {
        flex-direction: row;
        justify-content: space-between;
    }

    .section-category-content-title {
        font-size: 14px;
        font-weight: 900;
        color: #000;
        margin-bottom: 0;
    }

    .section-category-content-see-more {
        margin-bottom: 2px;
    }

    .section-latest-news .container {
        margin: 0;
    }

    .section-latest-news .section-header-row {
        margin: 0 25px 24px;
    }

    .news-box {
        flex-direction: column;
    }

    .news-box-img {
        width: 100%;
    }

    .site-footer {
        padding-bottom: 32px;
    }

    .site-footer-row {
        flex-direction: column;
    }

    .site-footer-about,
    .site-footer-link,
    .site-footer-contact,
    .site-footer-certifications {
        margin: 0 0 24px;
    }

    .site-footer-bottom-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .site-footer-bottom-content > div {
        width: 100%;
        margin-bottom: 16px;
    }

    .pagination-btn {
        display: none;
    }

    .pagination-btn.prev,
    .pagination-btn.next,
    .pagination-btn.empty,
    .pagination-btn.first,
    .pagination-btn.last {
        display: block;
    }

    .page-main.container {
       margin: 0 10px;
    }

    .page-product-header.container {
        flex-direction: column;
    }

    .page-product-gallery-container {
        width: 100%;
    }

    .page-product-gallery-featured-image img {
        /*height: 300px;*/
        /*margin: auto;*/
    }

    .mobile-page-title-row {
        display: block;
    }

    .page-product-header-content .page-title {
        display: none;
    }

    .breadcrumb {
        display: none;
    }

    .page-product-header-content {
        width: 100%;
        margin-right: 0;
    }

    .page-product-variant {
        flex-direction: column;
        align-items: flex-start;
    }

    .select-regular {
        width: 100%;
    }

    .page-product-variant button {
        margin-right: 0;
        margin-top: 12px;
    }

    .page-product-add-to-card-container {
        flex-direction: column;
    }

    .count-picker {
        justify-content: center;
        margin: 12px 0;
    }

    .btn-counter {
        width: 48px;
        height: 48px;
    }

    .page-product-add-to-card-continue .btn-regular {
        width: 100%;
    }

    .page-product-action-container {
        margin-bottom: 32px;
    }

    .comment-box {
        flex-direction: column;
    }

    .rate-box i {
        padding: 15px;
    }

    .form-control .btn-regular.cta {
        width: 100%;
    }

    .cart-product-row {
        flex-wrap: wrap;
    }

    .square-image-container {
        order: 1;
        width: 48px;
        height: 48px;
    }
    .cart-product-name {
        order: 2;
    }
    .cart-product-count {
        order: 3;
    }
    .cart-product-price {
        order: 6;
    }
    .cart-product-amount {
        order: 5;
        margin-right: 0;
    }
    button.cart-product-remove {
        order: 4;
        margin-right: auto;
    }

    .cart-page-option-row:not(.delivery-type) {
        flex-wrap: wrap;
    }

    .cart-page-option-row:not(.delivery-type) .cart-page-option-row-hidden-fields {
        width: 100%;
        justify-content: center;
    }

    .cart-page-option-row-hidden-fields input,
    .cart-page-option-row-hidden-fields button {
        width: 100%;
        margin-top: 12px;
    }

    .cart-first-box-ctas {
        flex-direction: column;
    }

    .cart-discount-container {
        padding-left: 0;
        margin-bottom: 12px;
    }

    .cart-page-checkout-section {
        flex-direction: column;
    }

    .cart-page-checkout-section > .card {
        width: 100%;
    }

    .login-card {
        width: 100%;
    }

    .dashboard-nav {
        position: fixed;
        width: 100%;
        right: 0;
        left: 0;
        bottom: -330px;
        background: var(--foundation-primary-light-active);
        padding-bottom: 40px;
        border-radius: 0;
        color: var(--Foundation-Primary-Dark);
        font-size: 12px;
        box-shadow: 0 -3px 3px rgba(0,0,0,0.1);
        z-index: 2;
        transition: all 0.3s;
    }

    .dashboard-nav.expand {
        bottom: 8px;
    }

    .dashboard-nav.expand .dashboard-nav-mobile-current {
        visibility: hidden;
    }

    .dashboard-content {
        width: 100%;
        margin: 0;
    }

    .dashboard-nav-mobile-toggle {
        background: none;
        display: flex;
        align-items: center;
    }

    .dashboard-nav-mobile-toggle i {
        margin-right: 8px;
        transition: all 0.3s;
    }

    .dashboard-nav-mobile-toggle .open-text,
    .dashboard-nav-mobile-toggle.expand .close-text {
        display: block;
    }

    .dashboard-nav-mobile-toggle:not(.expand) i {
        transform: rotate(180deg);
    }

    .dashboard-nav-mobile-toggle .close-text,
    .dashboard-nav-mobile-toggle.expand .open-text {
        display: none;
    }

    .dashboard-nav-mobile {
        display: flex;
        justify-content: space-between;
        padding: 12px 24px;
    }

    .dashboard-nav li a {
        border-bottom: none;
        padding-top: 12px;
    }

    .dashboard-nav li a:hover,
    .dashboard-nav li a.active {
        background: initial;
        border-bottom: none;
    }

    .dashboard-stats-container {
        flex-direction: column;
    }

    .dashboard-stats {
        width: 100%;
        padding: 10px 0 4px;
    }

    .dashboard-stats-value {
        font-size: 20px;
    }

    .address-box-actions-form {
        flex-direction: column;
    }

    .address-box-actions .btn-default {
        margin-left: 0;
        margin-bottom: 16px;
    }

    .address-box-actions-form a,
    .address-box-actions-form button {
        height: 44px;
        line-height: 44px;
    }

    .dashboard-total-credit-title {
        display: none;
    }

    #popup-detail-credit,
    #popup-detail-discount {
        height: 320px;
    }

    #profile-phone-confirm {
        align-self: stretch;
    }

    .blog-container {
        flex-direction: column;
    }

    .blog-list {
        width: 100%;
    }

    .blog-sidebar {
        width: 100%;
    }

    .blog-list-card {
        flex-direction: column;
    }

    .blog-list-card-thumbnail {
        width: 100%;
    }

    .blog-list-card-content {
        width: 100%;
        margin-right: 0;
        margin-top: 12px;
    }

    .blog-list-card-readmore {
        margin-top: 16px;
        margin-bottom: 8px;
    }
}