:root {
  --sticky-footer-bottom: 61px;
}

.modal {
  z-index: 10000;
}

.modal .category-modal {
  padding: 0 24px !important;
}

.min-w-full {
  min-width: 100% !important;
  margin-right: 0px !important;
}

.btn-out-stock {
  font-weight: 500;
}

.btn-out-stock__normal {
  text-align: start !important;
  padding-left: 0;
  font-weight: 500 !important;
}
.btn-out-stock__modal {
  width: calc(100% + 12px) !important;
}

.with-cart-add-to-bag-button button {
  width: 33%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.d-none {
  display: none;
}

.with-cart-add-to-bag-button .product-qty {
  width: 33%;
  height: 100%;
  align-items: center;
}

.matrixFooter {
  margin-bottom: 0;
}

.without-cart-add-to-bag-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 5px 16px;
  position: relative;
}

.without-cart-add-to-bag-button:hover {
  background-color: rgba(var(--primary-rgb), 0.1);
}

product-variant-selection-modal .modal .modal-content {
  max-height: calc(100vh - 72px);
}

/** NavItems Menu **/
.menuItemsSidebar .modal .modal-content {
  max-height: 100%;
  height: 100%;
  background-color: white;
  max-width: 400px;
  padding: 24px 16px;
  max-height: 100%;
  position: relative;
  border-radius: 8px;
  overflow: auto;
  margin-right: 0;
  border-radius: 0;
}

.menuItemsSidebar .modal {
  background-color: rgba(0, 0, 0, 0.7);
}

/** NavItems Desktop **/

.navLinksContainer {
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  z-index: 101;
  padding-bottom: 16px;
}

.navLinksWrapper {
  display: flex;
}

.navLinks-item ul {
  position: absolute;
  background: var(--white);
  z-index: 1;
  min-width: 100px;
  max-width: max-content;
  display: none;
  top: 100%;
  cursor: pointer;
}

.navLinks-item a {
  position: relative;
}

.navLinks-item a div {
  white-space: nowrap;
  border-radius: 20px;
  overflow: hidden;
}

.navLinks-item:hover a div {
  background: rgba(0, 0, 0, 0.03);
}

.navLinks-item:hover ul {
  display: block;
}

.navLinks-item ul {
  border-radius: var(--border-radius-large);
  box-shadow: 0 0 1px 1px rgb(0 0 0 / 20%);
}

.navLinks-item ul li a {
  white-space: nowrap;
}

/** NavItems Desktop **/

/** NavItems Mobile **/

.mobile-menu-drop-down {
  border-left: 1px solid var(--black-85);
  margin-top: 16px;
  padding-top: 4px;
  padding-left: 20px;
  padding-bottom: 8px;
}

.mobile-arrow-up {
  transform: rotate(180deg);
}

.category-name {
  font-size: 18px;
  line-height: 26px;
  font-weight: var(--medium-font-weight);
}

/** NavItems Mobile **/

/** NavItems Menu **/

@media only screen and (max-width: 1024px) {
  .category-name {
    font-size: 16px;
    line-height: 24px;
  }
  .category-product-count {
    color: var(--black-50);
  }
}

.display-none {
  display: none;
}

.border-bottom {
  border-bottom: 1px solid var(--division-primary);
}

.dukaan-auth-modal {
  z-index: 10000 !important;
}

.dukaan-auth-modal-btn-primary {
  background-color: var(--primary) !important;
}

.navbar .navbarTitle {
  display: none;
}

.modal .category-modal .modal-content {
  padding: 16px;
}

.disable-select {
  user-select: none;
}

.search-input {
  border: none;
  background-color: #f2f2f2;
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  background: var(--search-background);
  color: var(--black-30);
  opacity: 1;
  border: 1px solid transparent;
  border-radius: 6px;
}

.navbarWrapper {
  background-color: var(--white);
}

@media only screen and (max-width: 1024px) {
  .navbarWrapper {
    top: auto;
  }
  .titleSection .text {
    margin: 0;
    padding: 12px 16px;
  }
}

/* .navbarWrapper {
  background-color: var(--white);
  height: auto;
  position: sticky;
  top: 0;
} */

.sectionDividerDesktop {
  display: block;
  border-top: 1px solid var(--black-90);
  border-bottom: 0;
  margin: 0;
  padding: 0;
  border-left: 0;
  border-right: 0;
}

.navbar {
  padding: 16px 0px;
  height: 84px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  gap: 20px;
  z-index: 1000;
  background-color: white;
}

@media only screen and (max-width: 1024px) {
  .headerBackground {
    position: initial !important;
  }
  .navbar {
    padding: 0;
    z-index: 1000;
    background-color: white;
  }
}
@media only screen and (max-width: 1024px) {
  .navbar .mobileHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
@media only screen and (max-width: 1024px) {
  .navbar .mobileHeader .mobileHeaderIcons .mobileIcon {
    margin-left: 8px;
  }
}
.navbar .mobileHeader .mobileHeading .backToCategoryText {
  margin-left: 8px;
}
@media only screen and (max-width: 1024px) {
  .navbar .mobileHeader .mobileHeading .backToCategoryText {
    margin-left: 4px;
  }
}
@media only screen and (max-width: 1024px) {
  .navbar .mobileHeader .mobileHeading {
    display: flex;
    align-items: center;
  }
}
.navbar .mainHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--white);
}

.headerContainer {
  position: relative;
  right: 2px;
}

@media screen and (min-width: 1024px) {
  .headerStoreInfoLink {
    width: 100%;
    max-width: 300px;
  }
}

@media screen and (max-width: 1024px) {
  .headerStoreInfoLink {
    width: 100%;
    max-width: calc(100vw - 72px);
  }
}

.navbar .mainHeader .headerStoreInfo {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 18px;
  line-height: 22px;
}
.navbar .mainHeader .headerStoreInfo img {
  max-width: 160px;
  width: auto;
  object-fit: contain;
  height: 52px;
  border-radius: 6px;
}

@media only screen and (max-width: 1024px) {
  .navbar .mainHeader .headerStoreInfo img {
    height: 52px;
    width: auto;
    max-width: 120px;
  }

  .searchIcon {
    height: 20px;
    width: 20px;
  }
}

.navbar .mainHeader .headerStoreInfo {
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
  /* margin-left: 16px; */
}

.navbar .mainHeader .headerStoreInfo .headerStoreName {
  max-width: 200px;
}

.storeImage {
  /* margin-left: 16px; */
  margin-right: 4px;
  object-fit: contain;
}

@media only screen and (max-width: 1024px) {
  .storeImage {
    margin-left: 16px;
  }
}

@media only screen and (max-width: 1024px) {
  .navbar .mainHeader .headerStoreInfo {
    width: 100%;
    gap: 0;
  }

  .mainHeader {
    justify-content: space-between !important;
    padding: 12px 16px 0;
    height: 100%;
  }

  .navbar .mainHeader .headerStoreInfo .headerStoreName {
    margin-left: 8px;
    margin-right: 5px;
  }
}

@media only screen and (max-width: 1024px) {
  .navbar .mainHeader .headerStoreInfo .headerStoreName {
    /* display: block; */
    color: var(--black-12);
    font-size: 18px;
    line-height: 22px;
    font-weight: 500;
  }
  .mobile-menu-section.active{
    z-index: 99999;
  }
  .drawerButton {
    /* margin-right: 4px; */
  }
}
.navbar .mainHeader .headerSearch {
  /* margin-left: 40px; */
  height: 38px;
  width: 432px;
  background: #f2f2f2;
  padding: 7px 12px;
  display: flex;
  flex-direction: row;
  gap: 13px;
  align-items: center;
  border-radius: var(--border-radius-large);
  z-index: 100000;
  margin: 0 24px;
  /* margin-right: 0; */
  position: relative;
  /* right: -60px; */
}

.navbar .mainHeader .headerSearch:focus-visible {
  background-color: white;
}
@media only screen and (max-width: 1024px) {
  .navbar .mainHeader .headerSearch {
    display: none;
  }
}
.navbar .mainHeader .headerSearch .searchPlaceholder {
  width: 380px;
  height: 24px;
}
.navbar .mainHeader .headerSearch .searchPlaceholder p {
  color: var(--black-60);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}
.navbar .mainHeader .navBarContainer {
  display: flex;
  flex-direction: row;
  position: relative;
}
@media only screen and (max-width: 1024px) {
  .navbar .mainHeader .navBarContainer {
    display: none;
  }
}
.navbar .mainHeader .navBarContainer .navButton {
  position: relative;
  display: flex;
  flex-direction: row;
  padding: 6px 10px;
  margin-right: 16px;
  align-items: center;
  border-radius: 20px;
  cursor: pointer;
}

.navbar .mainHeader .navBarContainer .navButton.active {
  position: relative;
}

.navbar .mainHeader .navBarContainer .navButton.active .default {
  display: none;
}

.navbar .mainHeader .navBarContainer .navButton.active .activated.hidden {
  display: block !important;
}

.navbar .mainHeader .navBarContainer .navButton.active h5,
.navbar .mainHeader .navBarContainer .navButton.active svg {
  color: var(--primary);
}

.navbar .mainHeader .navBarContainer .navButton.active::before {
  content: '';
  background-color: var(--primary);
  opacity: 0.1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 20px;
}

.close-variant-modal {
  position: relative;
  padding: 0;
  margin: 0;
  border: none;
  background-color: transparent;
}

.close-variant-modal svg {
  position: relative;
  z-index: 20;
}

.close-variant-modal::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: 140%;
  background-color: transparent;
  border-radius: 50%;
}
.close-variant-modal:hover::before {
  background-color: #f2f2f2;
}

.navbar .mainHeader .navBarContainer .navButton:hover {
  background-color: var(--black-95);
}

.navbar .mainHeader .navBarContainer .navButton:last-child {
  margin-right: 0;
}
.navbar .mainHeader .navBarContainer .navButton h5 {
  color: var(--black-30);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  margin-left: 8px;
}

.navbar .navLinks {
  display: flex;
  flex-direction: row;
  animation-duration: 100ms;
  animation-name: slidein;
  gap: 24px;
}
@media only screen and (max-width: 1024px) {
  .navbar .navLinks {
    display: none;
  }
  @keyframes slidein {
    0% {
      margin-left: 100%;
    }
    20% {
      margin-left: 80%;
    }
    40% {
      margin-left: 60%;
    }
    60% {
      margin-left: 40%;
    }
    80% {
      margin-left: 20%;
    }
    100% {
      margin-left: 0%;
    }
  }
}
.navbar .navLinks li h4 {
  color: var(--black-12);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
.navbar .navLinks li:hover {
  background-color: var(--black-95);
  border-radius: 12px;
}
.navbar .navLinks h3 {
  display: none;
}
@media only screen and (max-width: 1024px) {
  .navbar .navLinks h3 {
    display: block;
    color: var(--black-12);
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
  }
}
.navbar .navLinks .drawerHeading {
  display: none;
}
@media only screen and (max-width: 1024px) {
  .navbar .navLinks .drawerHeading {
    display: none;
    flex-direction: row;
    justify-content: space-between;
  }
}
.navbar .drawerButton {
  display: none;
  border: 0;
  background-color: var(--white);
}
@media only screen and (max-width: 1024px) {
  .navbar .drawerButton {
    display: block;
  }
}

.productPageName {
  display: flex;
  align-items: center;
}
.productPageName .productNameTitle {
  margin-left: 8px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
}

.badge {
  position: absolute;
  left: 2px;
  top: -2px;
  white-space: nowrap;
  color: #fff;
  background-color: #e50b20;
  display: inline-block;
  text-align: center;

  height: 18px;
  min-width: 18px;
  border-radius: 9px;
  padding: 2px 4px;
  font-size: 14px;
  line-height: 14px;
  font-weight: 400;
}

.menuItemsNav {
  overflow-x: clip;
  position: relative;
  margin-left: -12px;
}

.menuItemsNav::after {
  content: '';
  position: absolute;
  text-align: right;
  height: 100%;
  right: 0px;
  top: -10px;
  width: 65px;
  color: var(--primary);
  background: -webkit-linear-gradient(
    left,
    hsla(0, 0%, 100%, 0) 0,
    var(--white) 86.33%
  );
  background: linear-gradient(
    90deg,
    hsla(0, 0%, 100%, 0) 0,
    var(--white) 86.33%
  );
  pointer-events: all;
  display: none;
  align-items: flex-end;
  justify-content: flex-end;
  padding-bottom: 10px;
}

.showGradient .menuItemsNav::after {
  display: flex;
}

.menuItem {
  width: 100%;
  margin-top: 24px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}

.navHamburger {
  display: block;
}

.navLinks {
  display: flex;
  font-weight: 500;
}

@media screen and (max-width: 1024px) {
  .navHamburger {
    display: none;
  }

  .navLinks {
    display: none;
  }
}

.navLinks .navLinksItems p {
  font-size: 16px;
  line-height: 24px;
  padding: 4px 4px 4px 12px;
  width: 100%;
  /* font-size: 600; */
}

.navLinks .navLinksItems {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}

a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

* {
  scroll-behavior: smooth;
}

.sectionDividerMobile {
  display: none;
}

.headerBackground {
  position: sticky;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  background-color: var(--white);
  border-bottom: 1px solid var(--black-90);
}

.container {
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 576px) {
  .container {
    width: 540px;
  }
}

@media only screen and (min-width: 768px) {
  .container {
    width: 720px;
  }
}

@media only screen and (min-width: 992px) {
  .container {
    width: 960px;
  }
}

@media only screen and (min-width: 1200px) {
  .container {
    width: 1248px !important;
  }
}

@media only screen and (max-width: 1024px) {
  .sectionDividerMobile {
    display: block;
    border-top: 1px solid var(--black-90);
    border-bottom: 0;
    margin: 0;
    padding: 0;
    border-left: 0;
    border-right: 0;
  }

  .sectionDividerDesktop {
    display: none !important;
  }
}

.static {
  position: static !important;
}

.body {
  height: auto;
}

.path .existingPath {
  white-space: nowrap;
  color: var(--black-30);
}

.path .existingPath:hover {
  text-decoration: underline !important;
}

.path .currentPath {
  white-space: nowrap;
  color: var(--black-55);
}

.path .currentPage {
  white-space: nowrap;
  color: var(--black-55);
}

.badgeValue {
  position: absolute;
  left: -8px;
  top: -8px;
  height: 18px;
  min-width: 18px;
  padding: 2px 4px;
  white-space: nowrap;
  color: white;
  background-color: var(--secondary-red);
  display: inline-block;
  font-weight: 500;
  text-align: center;
  border-radius: 100px;
}

@media screen and (max-width: 1024px) {
  .badgeValue {
    height: 16px;
    min-width: 16px;
    border-radius: 8px;
    font-size: 12px !important;
    line-height: 12px;
  }
}

/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------CARDS----------------------------------------- */

.bigSectionDivider {
  height: 8px;
  background-color: var(--black-95);
  border-top: 1px solid #d2d2d2;
  border-bottom: 0;
  margin: 0;
  padding: 0;
  border-left: 0;
  border-right: 0;
}

.mobileSearchbar {
  display: none;
  padding: 12px 16px;
}

.mobileSearchbar .headerSearch {
  display: none;
}

.categoryName {
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

@media only screen and (max-width: 1024px) {
  .categoryName {
    font-size: 13px;
    line-height: 16px;
    font-weight: 500;
  }

  .bigSectionDivider {
    /* display: none; */
  }

  .headerBackground {
    border-bottom: none;
  }

  .mobileSearchbar {
    display: block;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--white);
    border-bottom: 1px solid var(--black-90);
  }

  .mobileSearchbar .headerSearch {
    display: flex;
    /*height: 38px;*/
    /* width: 432px; */
    width: 100%;
    background: #f2f2f2;
    padding: 7px 28px 6px 12px;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    border-radius: 6px;
  }

  .store-locator {
    padding: 0px 16px;
  }
}
.mobileSearchbar .headerSearch .searchPlaceholder {
  /*height: 26px;*/
}
.mobileSearchbar .headerSearch .searchPlaceholder p {
  color: var(--black-60);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}

hr.sectionDivider {
  border-top: 1px solid var(--black-90);
  border-bottom: 0;
  margin: 0;
  padding: 0;
  border-left: 0;
  border-right: 0;
}

.top {
  position: sticky;
  top: 84px;
  z-index: 100;
}

@media only screen and (max-width: 1024px) {
  .top {
    position: static;
    z-index: 100;
  }
}

hr.sectionTitleDivider {
  /* border-top: 2px solid #d2d2d2; */
  border-top: 10px solid red;
  border-top: 0;
  border-left: 0;
}

@media only screen and (max-width: 1024px) {
  hr.sectionTitleDivider {
    /* display: none; */
  }
}

@media only screen and (max-width: 1024px) {
  .title {
    font-size: 16px;
    line-height: 24px;
  }
}

.mobileViewAll {
  display: none;
}

.viewAll .title {
  font-size: 16px;
  line-height: 24px;
  color: var(--primary);
  font-weight: 500;
}

.viewAllButton .title:hover {
  text-decoration: underline;
}

@media only screen and (max-width: 1024px) {
  .viewAll .title {
    font-size: 14px !important;
    line-height: 20px !important;
    /* color: var(--primary); */
    /* font-weight: 500; */
  }

  .mobileViewAll {
    font-size: 14px;
    line-height: 20px;
    margin-top: 6px;
    margin-bottom: 16px;
    display: block;
  }
}

.banners {
  padding-top: 16px;
  width: 100%;
  display: flex;
  flex-direction: row;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.banners::-webkit-scrollbar {
  display: none;
}

@media only screen and (max-width: 1024px) {
  .banners {
    overflow-x: scroll;
  }
}

.banner {
  width: 33%;
  max-width: 33%;
  max-height: 170px;
  overflow: hidden;
  border: 0px solid transparent;
  border-radius: var(--border-radius-medium);
  margin-right: 16px;
}

.banner:last-child {
  margin-right: 0;
}

@media only screen and (max-width: 1024px) {
  .banner {
    margin-right: 12px;
    min-width: 248px !important;
    height: 104px !important;
    overflow: hidden;
    border-radius: var(--border-radius-medium);
  }

  .banner:first-child {
    margin-left: 16px;
  }

  .banner:last-child {
    margin-right: 16px;
  }

  .banners {
    padding-bottom: 16px;
  }
}

.bannerImg {
  max-width: 100%;
  object-fit: cover;
  transition: all 0.4s ease-in-out;
}

.bannerImg:hover {
  transform: scale(1.05);
}

.titleSectionWrapper {
  background-color: var(--white);
  position: sticky;
  top: 109px;
  z-index: 2;
}

.titleSection {
  margin-top: 12px;
  color: var(--black-12);
  display: flex;
  font-weight: 500;
  flex-direction: column;
  justify-content: space-between;
  top: calc(85px - 12px);
  position: sticky;
  z-index: 1;
  color: var(--primary-black);
  background-color: white;
}

.titleSection .text {
  margin-top: 24px;
}

.titleSection .allCategoriesHeader {
  margin-top: 16px;
  padding: 8px 0px;
}

@media only screen and (max-width: 1024px) {
  .titleSectionWrapper {
    top: calc(60px - 1px);
  }

  .titleSection {
    top: calc(60px - 1px);
    margin: 0 !important;
    z-index: 1;
  }

  .titleSection .sectionDivider {
    margin: 0 16px;
  }

  .titleSection .allCategoriesHeader {
    margin-top: 0px;
    padding: 12px 16px;
  }

  .titleSection .text {
    padding: 16px 16px 12px;
    margin-top: 0;
  }

  .allCategories .container .sectionDivider {
    display: none;
  }
}
.allCategories {
  position: relative;
}
.categoryWrapper {
  display: flex;
  flex-direction: row;
  overflow: scroll;
  justify-content: flex-start;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.navigation__arrow {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 38%;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  background: #ffffff;
  border-radius: 50%;
  border: none;
  filter: drop-shadow(0 2px 4px rgba(26, 24, 30, 0.24));
}
.navigation__arrow--prev {
  left: -15px;
}
.navigation__arrow--next {
  right: -15px;
}
@media only screen and (max-width: 768px) {
  .navigation__arrow {
    display: none;
  }
}

.categoryWrapper::-webkit-scrollbar {
  display: none;
}

.categoryCard {
  text-align: center;
  margin: 0 12px;
  max-width: 128px;
}

.categoryCard:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 1024px) {
  .categoryCard {
    margin: 0 6px;
    max-width: 80px;
  }

  .categoryCard:first-child {
    margin-left: 0;
  }

  .categoryCard:last-child {
    margin-right: 16px;
  }
}

.headerStoreName {
  margin-left: 16px;
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
}

.lineClamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.categoryImg {
  min-width: 128px;
  height: 128px;
  max-width: 100%;
  max-height: 100%;
  /* min-width: 80px; */
  /* min-height: 80px; */
  object-fit: contain;
  aspect-ratio: 1;
  border: 1px solid var(--black-90);
  border-radius: var(--border-radius-large);
}

@media only screen and (max-width: 1024px) {
  .categoryImg {
    object-fit: contain;
    min-width: 76px;
    height: 76px;
    border: 1px solid var(--black-90);
  }
}

.text {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  line-height: 32px;
  font-weight: 500 !important;
  padding: 8px 0;
}

@media only screen and (max-width: 1024px) {
  .text {
    padding: 0 10px;
  }
  .title {
    color: var(--black-12);
    font-size: 16px !important;
    line-height: 24px !important;
  }
}

/** Spacings */

.pb0 {
  padding-bottom: 0;
}

.pl0 {
  padding-left: 0;
}

.pt0 {
  padding-top: 0;
}

.py2 {
  padding-top: 2px;
  padding-bottom: 2px;
}

.py4 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.py5 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.pt6 {
  padding-top: 6px;
}

.px6 {
  padding-left: 6px;
  padding-right: 6px;
}

.py6 {
  padding-top: 6px;
  padding-bottom: 6px;
}

.p8 {
  padding: 8px;
}

.py8 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.px8 {
  padding-left: 8px;
  padding-right: 8px;
}

.pb8 {
  padding-bottom: 8px;
}

.pt8 {
  padding-top: 8px;
}

.py10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.px10 {
  padding-left: 10px;
  padding-right: 10px;
}

.pl10 {
  padding-left: 10px;
}

.pt10 {
  padding-top: 10px;
}

.pb10 {
  padding-bottom: 10px;
}

.p12 {
  padding: 12px;
}

.px12 {
  padding-left: 12px;
  padding-right: 12px;
}

.py12 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.p16 {
  padding: 16px;
}

.pt16 {
  padding-top: 16px;
}

.pb16 {
  padding-bottom: 16px;
}

.pb18 {
  padding-bottom: 18px;
}

.py16 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.px16 {
  padding-left: 16px;
  padding-right: 16px;
}

.pt20 {
  padding-top: 20px;
}

.pb20 {
  padding-bottom: 20px;
}

.pt22 {
  padding-top: 22px;
}

.p24 {
  padding: 24px;
}

.pt24 {
  padding-top: 24px;
}

.pb24 {
  padding-bottom: 24px;
}

.py24 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.px24 {
  padding-left: 24px;
  padding-right: 24px;
}

.pl32 {
  padding-left: 32px;
}

.px32 {
  padding-left: 32px;
  padding-right: 32px;
}

.pb32 {
  padding-bottom: 32px;
}

.py40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

@media screen and (max-width: 1024px) {
  .m-pt0 {
    padding-top: 0;
  }

  .m-px0 {
    padding-left: 0;
    padding-right: 0;
  }

  .m-p0 {
    padding: 0;
  }

  .m-px10 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .m-p16 {
    padding: 16px;
  }

  .m-p16 {
    padding: 16px;
  }

  .m-py16 {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .m-pb18 {
    padding-bottom: 18px;
  }

  .m-pb24 {
    padding-bottom: 24px;
  }

  .m-pt26 {
    padding-top: 26px;
  }

  .m-p24 {
    padding: 24px;
  }

  .m-px16 {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ================ */

.m0 {
  margin: 0;
}

.mt4 {
  margin-top: 4px;
}

.ml4 {
  margin-left: 4px;
}

.mt4 {
  margin-top: 4px;
}

.ml6 {
  margin-left: 6px;
}

.mr6 {
  margin-right: 6px;
}

.mb6 {
  margin-bottom: 6px;
}
.mb8 {
  margin-bottom: 6px;
}

.mt8 {
  margin-top: 8px;
}

.mr8 {
  margin-right: 8px;
}

.ml8 {
  margin-left: 8px;
}

.my8 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.ml10 {
  margin-left: 10px;
}

.mt10 {
  margin-top: 10px;
}

.mb10 {
  margin-bottom: 10px;
}

.mt12 {
  margin-top: 12px;
}

.mb12 {
  margin-bottom: 12px;
}

.mr12 {
  margin-right: 12px;
}

.my16 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.mt16 {
  margin-top: 16px;
}

.ml16 {
  margin-left: 16px;
}

.mb16 {
  margin-bottom: 16px;
}

.ml20 {
  margin-left: 20px;
}

.mb20 {
  margin-bottom: 20px;
}

.mt24 {
  margin-top: 24px;
}

.mb24 {
  margin-bottom: 24px;
}

.mr24 {
  margin-right: 24px;
}

.mt32 {
  margin-top: 32px;
}

.mt64 {
  margin-top: 64px;
}

@media screen and (max-width: 1024px) {
  .m-mr0 {
    margin-right: 0;
  }

  .m-mr4 {
    margin-right: 4px;
  }

  .m-ml12 {
    margin-left: 12px;
  }

  .m-mb16 {
    margin-bottom: 16px;
  }

  .m-mt32 {
    margin-top: 32px;
  }
}

/** Spacings */

/** Font sizes and weights */

.regular {
  font-weight: var(--regular-font-weight);
}

.medium {
  font-weight: var(--medium-font-weight);
}

.bold {
  font-weight: var(--bold-font-weight);
}

.t-smaller {
  font-size: smaller;
}

.t-12_16 {
  font-size: 12px;
  line-height: 16px;
}

.t-14,
.t-14_14 {
  font-size: 14px;
  line-height: 14px;
}

.t-14_18 {
  font-size: 14px;
  line-height: 18px;
}

.t-14_20 {
  font-size: 14px;
  line-height: 20px;
}

.t-15,
.t-15_15 {
  font-size: 15px;
  line-height: 15px;
}

.t-15_22 {
  font-size: 15px;
  line-height: 22px;
}

.t-16_24 {
  font-size: 16px;
  line-height: 24px;
}

.t-18 {
  font-size: 18px;
  line-height: 18px;
}

.t-18_26 {
  font-size: 18px;
  line-height: 26px;
}

.t-20,
.t-20_20 {
  font-size: 20px;
  line-height: 20px;
}

.t-20_28 {
  font-size: 20px;
  line-height: 28px;
}

.t-20_32 {
  font-size: 20px;
  line-height: 32px;
}

.t-26_34 {
  font-size: 26px;
  line-height: 34px;
}

@media screen and (max-width: 1024px) {
  .mt-13_16 {
    font-size: 13px;
    line-height: 26px;
  }

  .mt-14 {
    font-size: 14px;
    line-height: 14px;
  }

  .mt-14_18 {
    font-size: 14px;
    line-height: 18px;
  }

  .mt-14_20 {
    font-size: 14px;
    line-height: 20px;
  }

  .mt-15_20 {
    font-size: 15px;
    line-height: 20px;
  }

  .mt-15_22 {
    font-size: 15px;
    line-height: 22px;
  }

  .mt-16_24 {
    font-size: 16px;
    line-height: 24px;
  }
}

/** Font sizes */

.title {
  color: var(--black-12);
  font-size: 20px;
  line-height: 26px;
}

.viewAll {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.viewAllButton {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  background-color: transparent;
  border: none;
  width: auto;
}

@media only screen and (max-width: 1024px) {
  .viewAllButton {
    margin: 0;
    padding: 0;
    width: auto;
  }

  .viewAllButton svg {
    height: 16px;
    width: 16px;
  }
}
.arrow {
  margin-left: 8px;
  background-color: var(--primary);
  border-radius: 100%;
}

/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */

.adv-category-product-list,
.adv-category-product-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: calc(100% + 32px);
  margin-top: 24px;
}

@media only screen and (max-width: 1024px) {
  .adv-category-product-list {
    width: calc(100% + 12px);
    margin-top: 0;
  }
}

.adv-category-product-list .productCard {
  height: auto;
  width: calc((100% / 5) - 32px);
  display: flex;
  flex-direction: column;
  text-align: left;
  position: relative;
  overflow: visible;
  margin: 0 16px 32px;
}
@media only screen and (max-width: 1024px) {
  .adv-category-product-list .productCard {
    width: calc(50% - 12px);
    margin: 0 6px 20px;
  }

  .cardWrapper__home-page .productCard:first-of-type,
  .cardWrapper__home-page .productCard:nth-of-type(2) {
    margin-top: 0;
  }

  .titleSection .container .sectionDivider {
    margin: 0 8px;
    display: block;
  }
}
.adv-category-product-list .productImageWrapper {
  width: 100%;
}

.adv-category-product-list .productImageWrapper:hover {
  border: 1px solid var(--black-90);
  border-radius: var(--border-radius-medium);
}

.adv-category-product-list .productImageWrapper .productImage {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}
.adv-category-product-list .productInfo {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  color: var(--primary-black);
}

.adv-category-product-list .productTitle {
  color: var(--black-12);
}
.adv-category-product-list .productTitle:hover {
  text-decoration: underline;
}
/* .adv-category-product-list .addToBagButton {
  padding: 6px 14px;
  width: 80px;
  height: 28px;
  border: 1px solid;
  background-color: transparent;
  color: var(--primary);
  border-radius: var(--border-radius-small);
} */
.adv-category-product-list .quantity {
  color: var(--black-50);
  margin-top: 4px;
  font-weight: 200;
}
.adv-category-product-list .discount {
  font-weight: 500;
  color: var(--secondary);
}
.adv-category-product-list .originalPrice {
  color: var(--black-50);
  text-decoration: line-through;
  margin-right: 8px;
  font-weight: 300 !important;
}
.adv-category-product-list .discountedPrice {
  color: var(--black-12);
  margin-right: 4px;
  font-weight: 500 !important;
}
.adv-category-product-list .pricing {
  margin-top: 6px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: row;
}
.adv-category-product-list .quantity {
  color: var(--black-50);
  margin-top: 4px;
  font-weight: 200;
}

.adv-category-product-list .quantity {
  /* heelo: lsdjfkla */
  color: var(--black-50);
  margin-top: 4px;
  font-weight: 200;
}

.outOfStock {
  color: var(--secondary-red);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

/* ------------------------------------ */
@media only screen and (max-width: 1024px) {
  .outOfStock {
    font-size: 14px;
    line-height: 20px;
  }
}
.adv-category-product-list .title {
  padding: 8px 0;
  font-size: 20px;
  line-height: 32px;
  font-weight: 500;
}

.productCard {
  justify-content: start;
  text-align: left;
  /* width: 222px; */
  display: flex;
  flex-direction: column;
  /* margin: 16px 32px 16px 0; */
  position: relative;
}

.bxgy-badge-matrix {
  z-index: 1;
  position: absolute;
  top: 8px;
  left: -10px;
  min-width: 87px;
  width: auto;
  background: var(--bxgy-green);
  color: white;
  text-align: center;
  overflow: visible;
  border-radius: 2px 2px 2px 0px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bxgy-badge-matrix:before {
  position: absolute;
  top: 24px;
  left: 0px;
  content: '';
  width: 0px;
  height: 0px;
  border: 5px solid;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-top-color: var(--bxgy-green);
  border-right-color: var(--bxgy-green);
  filter: brightness(0.8);
}

@media only screen and (max-width: 1024px) {
  .bxgy-badge-matrix {
    padding: 2px 6px;
    font-weight: 600;
    font-size: 10px;
    line-height: 14px;
    border-radius: 2px 2px 2px 0px;
    min-width: auto;
    top: 4px;
    left: -4px;
  }
  .bxgy-badge-matrix:before {
    top: 18px;
    border-width: 2px;
  }
}

@media only screen and (min-width: 1024px) {
  .productCard:nth-child(5n) {
    /* margin-right: 0; */
  }
}

@media only screen and (max-width: 1024px) {
  .productCard {
    margin: 8px;
    width: calc(100% / 2.25);
  }
}
.productCard .productImageWrapper {
  overflow: hidden;
  height: fit-content;
  border: 1px solid var(--black-90);
  border-radius: var(--border-radius-large);
  padding-top: 4px;
  /* padding: 24px 0; */
}
.productCard .productImageWrapper .productImage {
  width: 100%;
  height: 100%;
  transition: all 0.4s ease;
  object-fit: contain;
  aspect-ratio: 0.8/1;
  /* border: 1px solid #d2d2d2; */
  /* border-radius: var(--border-radius-large);*/
}

.productCard .unit {
  font-size: 14px;
  line-height: 18px;
  word-break: break-word;
  color: var(--black-50);
  margin-top: 4px;
}

@media only screen and (max-width: 1024px) {
  .productCard .productImageWrapper .productImage {
    max-height: 220px;
  }

  .productCard .unit {
    font-size: 12px;
    line-height: 16px;
  }
}

@media only screen and (max-width: 1024px) {
  .productCard .productImageWrapper {
    /* border: 1px solid #d2d2d2; */
    /* border-radius: var(--border-radius-small); */
    padding: 0;
  }

  .productImage {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

.productCard .productImageWrapper .productImage:hover {
  transform: scale(1.05);
}
.productCard .productInfo {
  margin-top: 12px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  color: var(--primary-black);
}

@media only screen and (max-width: 1024px) {
  .adv-category-product-list .productInfo {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    font-size: 13px;
    line-height: 16px;
    font-weight: 400;
  }
}

@media only screen and (max-width: 1024px) {
  .productInfo {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
  }

  .pricing {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    margin-bottom: 12px;
  }

  .productDescription .pricing {
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
  }

  .discountedPrice {
    margin: 0;
  }

  .originalPrice {
    margin: 0;
  }

  .productCard .productInfo .pricing {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media only screen and (max-width: 1024px) {
  .adv-category-product-list .productCard .productInfo .pricing .discountedPrice {
    margin-right: 4px;
  }

  .adv-category-product-list .productCard .productInfo .pricing .originalPrice {
    margin-right: 4px;
  }
}

.productCard .productInfo .productTitle {
  font-size: 14px;
  line-height: 18px;
  font-weight: var(--regular-font-weight);
}
.productCard .productInfo .productTitle:hover {
  text-decoration: underline;
}
.productCard .productInfo .quantity {
  color: var(--black-50);
  margin-top: 4px;
  font-weight: 200;
}
.productCard .productInfo .addToBagButton {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  cursor: pointer;
}
.productCard .productInfo .addToBagButton:hover {
  background-color: rgba(var(--primary-rgb), 0.1);
  border: 1px solid var(--primary);
}
.productCard .productInfo .addToBagButton .plus {
  margin-left: 6px;
}
.productCard .productInfo .pricing {
  margin-top: 6px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.productCard .productInfo .pricing .discountedPrice {
  font-size: 16px;
  line-height: 20px;
  margin-right: 4px;
  font-weight: 500;
}

@media screen and (max-width: 1024px) {
  .productCard .productInfo .pricing {
    margin-top: 4px;
    margin-bottom: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .productCard .productInfo .productTitle {
    font-size: 13px;
  }
  .productCard .productInfo .pricing .discountedPrice {
    font-size: 14px;
    margin-right: 4px;
  }

  .productCard .productInfo .pricing .originalPrice {
    font-size: 12px !important;
    margin-right: 4px !important;
  }

  .productCard .productInfo .pricing .discount {
    font-size: 14px !important;
    line-height: 20px !important;
  }
}
.productCard .productInfo .pricing .originalPrice {
  color: var(--black-50);
  text-decoration: line-through;
  font-size: 14px;
  line-height: 20px;
  margin-right: 8px;
  font-weight: 300;
}
.productCard .productInfo .pricing .discount {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--secondary);
}
.productCard .productInfo .addToBagButton {
  padding: 6px 14px;
  width: 80px;
  height: 28px;
  border: 1px solid var(--primary);
  background-color: transparent;
  color: var(--primary);
  font-size: 14px;
  line-height: 14px;
  font-weight: 600;
  border-radius: var(--border-radius-small);
}

/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* -----------------------------------FOOTER----------------------------------------------- */

.adv-category-product-list .addToBagButton {
  padding: 6px 14px;
  width: 80px;
  height: 28px;
  border: 1px solid;
  background-color: transparent;
  color: var(--primary);
  border-radius: var(--border-radius-small);
}
.without-cart-add-to-bag-button {
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  border-radius: var(--border-radius-small);
  border: 1px solid var(--primary);
  overflow: hidden;
  height: 28px;
  width: 80px;
  min-width: 80px;
  background-color: #fff;
  color: var(--primary);
  padding: 4px 11px;
}

@media only screen and (max-width: 1024px) {
  .without-cart-add-to-bag-button p {
    font-size: 14px;
  }
}

.with-cart-add-to-bag-button {
  border-radius: var(--border-radius-small);
  border: 1px solid var(--primary);
  overflow: hidden;
  height: 28px;
  width: 80px;
  min-width: 80px;
  padding: 0;
  position: relative;
}

.with-cart-add-to-bag-button > div:not(.product-qty) {
  font-weight: 500;
  cursor: pointer;
  font-size: 14px;
  line-height: 14px;
  background-color: var(--white);
  border: 0;
  color: var(--primary);
  flex: 1;
}

.with-cart-add-to-bag-button > div.product-qty {
  flex: 1.2;
}

.with-cart-add-to-bag-button .product-qty {
  color: var(--primary);
  font-size: 14px;
  line-height: 26px;
  min-width: 26px;
  background: white;
  /*background-color: #146eb41a;*/
  font-weight: 500;
}

/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */

/* MOBILE NAVBAR */

.active-nav {
  padding: 6px 10px;
  background: var(--primary-background);
  border-radius: 24px;
}

.navButton .active-icon {
  display: none;
}

.active-nav p {
  color: var(--primary) !important;
}

.active-nav .icon {
  /* fill: var(--primary); */
  display: none !important;
}
.active-nav .active-icon {
  fill: var(--primary);
  display: block !important;
}

.mobileNavbar {
  display: none;
}

.mobileNavbar .navButton {
  /* width: 33%; */
  position: relative;
  padding: 6px 10px;
  min-width: 104px;
}

.mobileNavbar .navButton .account {
  width: 33%;
  position: relative;
  padding: 6px 10px;
}

.mobileNavbar .navButton .buttonTitle {
  font-size: 14px;
  line-height: 24px;
  color: var(--black-60);
  margin-left: 6px;
  font-weight: 500;
}

.mobileNavBadge {
  position: absolute;
  left: 22px;
  top: 6px;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  color: #fff;
  background-color: #e50b20;
  text-align: center;

  height: 16px;
  width: 16px;
  border-radius: 8px;
  padding: 2px 4px;
  font-size: 12px;
  line-height: 12px;
}

@media only screen and (max-width: 1024px) {
  .mobileNavbar {
    border-top: 1px solid var(--black-85);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: sticky;
    bottom: 0;
    width: 100%;
    padding: 12px 16px;
    background-color: white;
    z-index: 100;
  }

  .mobileNavbar .navButton {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .mobileNavbar .navButton.bag {
    /*margin: 0 8px;*/
  }

  .mobileNavbar .navButton h5 {
    padding-left: 6px;
  }

  /* .mobileNavbar .navButton .home {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
  .mobileNavbar .navButton .bag {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .mobileNavbar .navButton .account {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  } */
}

.sort-selection {
  border: none;
  width: 100px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--primary);
}

.btn-primary {
  background-color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--border-radius-medium);
  color: var(--white);
  font-weight: var(--medium-font-weight);
  padding: 0;
}

.btn-primary:hover {
  background-color: var(--primary-hover);
}

.btn-outline-primary {
  background: var(--white);
  border: 1px solid var(--primary);
  border-radius: var(--border-radius-medium);
  color: var(--primary);
  font-weight: var(--medium-font-weight);
  padding: 0;
}
.btn-lg {
  border-radius: var(--border-radius-large);
  height: 48px;
  width: 100%;
  font-size: 16px;
  line-height: 24px;
}
.modal .modal-content {
  background-color: white;
  margin: auto;
  width: 100%;
  max-width: 446px;
  max-height: 446px;
  position: relative;
  border-radius: 8px;
  overflow: auto;
}
.h15 {
  height: 15px;
}
.h20 {
  height: 20px;
}
.h30 {
  height: 30px;
}
.relative {
  position: relative;
}
.line-clamp,
.lineClamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2,
.lineClamp2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.square {
  width: 100%;
  height: 0;
  position: relative;
  padding-top: 100%;
  overflow: hidden;
}
.square-children {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
}
.ar-100 {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.br-s {
  border-radius: var(--border-radius-small);
  overflow: hidden;
}
.br-m {
  border-radius: var(--border-radius-medium);
  overflow: hidden;
}
.br-l {
  border-radius: var(--border-radius-large);
  overflow: hidden;
}
.br20 {
  border-radius: 20px;
}
.br100 {
  border-radius: 100px;
}
.bordered {
  border: 1px solid var(--black-90);
}
.flex-1 {
  flex: 1;
}
.flex-15 {
  flex: 1.5;
}
/* .modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.3);
}
.modal .modal-content {
  background-color: white;
  margin: auto;
  width: 100%;
  max-width: 446px;
  max-height: 446px;
  position: relative;
  border-radius: 8px;
  overflow: auto;
} */
.hide-mob {
  display: block;
}
.hide-desk {
  display: none;
}
@media only screen and (max-width: 1024px) {
  :root {
    --sticky-top: 62px;
  }
  .m-d-c {
    flex-direction: column;
  }
  .m-j-sb {
    justify-content: space-between;
  }
  .m-nsticky {
    position: relative;
    top: 0;
  }
  .hide-desk {
    display: block;
  }
  .hide-mob {
    display: none;
  }
  .modal .modal-content {
    margin-bottom: 0;
  }
}
/** COMMON CSS */
/** Spacings */
.pb0 {
  padding-bottom: 0;
}
.pl0 {
  padding-left: 0;
}
.pt0 {
  padding-top: 0;
}
.py2 {
  padding-top: 2px;
  padding-bottom: 2px;
}
.py4 {
  padding-top: 4px;
  padding-bottom: 4px;
}
.pt6 {
  padding-top: 6px;
}
.px6 {
  padding-left: 6px;
  padding-right: 6px;
}
.py6 {
  padding-top: 6px;
  padding-bottom: 6px;
}
.p8 {
  padding: 8px;
}
.py8 {
  padding-top: 8px;
  padding-bottom: 8px;
}
.px8 {
  padding-left: 8px;
  padding-right: 8px;
}
.pb8 {
  padding-bottom: 8px;
}
.py10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.px10 {
  padding-left: 10px;
  padding-right: 10px;
}
.pl10 {
  padding-left: 10px;
}
.pt10 {
  padding-top: 10px;
}
.pb10 {
  padding-bottom: 10px;
}
.p12 {
  padding: 12px;
}
.px12 {
  padding-left: 12px;
  padding-right: 12px;
}
.py12 {
  padding-top: 12px;
  padding-bottom: 12px;
}
.p16 {
  padding: 16px;
}
.pt16 {
  padding-top: 16px;
}
.py16 {
  padding-top: 16px;
  padding-bottom: 16px;
}
.px16 {
  padding-left: 16px;
  padding-right: 16px;
}
.pt22 {
  padding-top: 22px;
}
.p24 {
  padding: 24px;
}
.pt24 {
  padding-top: 24px;
}
.pb24 {
  padding-bottom: 24px;
}
.py24 {
  padding-top: 24px;
  padding-bottom: 24px;
}
.px24 {
  padding-left: 24px;
  padding-right: 24px;
}
.pl32 {
  padding-left: 32px;
}
.px32 {
  padding-left: 32px;
  padding-right: 32px;
}
.py40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.pb16 {
  padding-bottom: 16px;
}

.mr12 {
  margin-right: 12px;
}

.ml12 {
  margin-left: 12px;
}
@media screen and (max-width: 1024px) {
  .m-pt0 {
    padding-top: 0;
  }
  .m-p0 {
    padding: 0;
  }
  .m-p16 {
    padding: 16px;
  }
  .m-p16 {
    padding: 16px;
  }
  .m-pb24 {
    padding-bottom: 24px;
  }
  .m-pt26 {
    padding-top: 26px;
  }
  .m-p24 {
    padding: 24px;
  }
  .m-px16 {
    padding-left: 16px;
    padding-right: 16px;
  }
  .m-py16 {
    padding: 16px 0;
  }

  .m-py0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .m-pb16 {
    padding-bottom: 16px;
  }

  .m-ml16 {
    margin-left: 16px;
  }
}
/* ================ */
.m0 {
  margin: 0;
}
.mr2 {
  margin-right: 2px;
}
.ml2 {
  margin-left: 2px;
}
.mt4 {
  margin-top: 4px;
}
.ml6 {
  margin-left: 6px;
}
.mr6 {
  margin-right: 6px;
}
.mb6 {
  margin-bottom: 6px;
}
.mt8 {
  margin-top: 8px;
}
.mr8 {
  margin-right: 8px;
}
.ml8 {
  margin-left: 8px;
}
.my8 {
  margin-top: 8px;
  margin-bottom: 8px;
}
.ml10 {
  margin-left: 10px;
}
.mb10 {
  margin-bottom: 10px;
}
.mt12 {
  margin-top: 12px;
}
.mb12 {
  margin-bottom: 12px;
}
.mr12 {
  margin-right: 12px;
}
.my16 {
  margin-top: 16px;
  margin-bottom: 16px;
}
.mt16 {
  margin-top: 16px;
}
.mt20 {
  margin-top: 20px;
}
.mt24 {
  margin-top: 24px;
}
.ml16 {
  margin-left: 16px;
}
.ml20 {
  margin-left: 20px;
}
.mb20 {
  margin-bottom: 20px;
}
.mt24 {
  margin-top: 24px;
}
.mb24 {
  margin-bottom: 24px;
}
.mr24 {
  margin-right: 24px;
}
.mt32 {
  margin-top: 32px;
}
.mt64 {
  margin-top: 64px;
}
@media screen and (max-width: 1024px) {
  .m-mr0 {
    margin-right: 0;
  }
  .m-mr4 {
    margin-right: 4px;
  }
  .m-ml4 {
    margin-left: 4px;
  }
  .m-ml12 {
    margin-left: 12px;
  }
  .m-mb16 {
    margin-bottom: 16px;
  }
  .m-mt32 {
    margin-top: 32px;
  }
  .m-mt12 {
    margin-top: 12px;
  }
  .m-mt0 {
    margin-top: 0;
  }
}
/** Spacings */
/** Font sizes and weights */
.regular {
  font-weight: var(--regular-font-weight);
}
.medium {
  font-weight: var(--medium-font-weight);
}
.bold {
  font-weight: var(--bold-font-weight);
}
.t-smaller {
  font-size: smaller;
}
.t-12_16 {
  font-size: 12px;
  line-height: 16px;
}
.t-14,
.t-14_14 {
  font-size: 14px;
  line-height: 14px;
}
.t-14_18 {
  font-size: 14px;
  line-height: 18px;
}
.t-14_20 {
  font-size: 14px;
  line-height: 20px;
}
.t-15,
.t-15_15 {
  font-size: 15px;
  line-height: 15px;
}
.t-15_22 {
  font-size: 15px;
  line-height: 22px;
}
.t-16_24 {
  font-size: 16px;
  line-height: 24px;
}
.t-18 {
  font-size: 18px;
  line-height: 18px;
}
.t-18_26 {
  font-size: 18px;
  line-height: 26px;
}
.t-20,
.t-20_20 {
  font-size: 20px;
  line-height: 20px;
}
.t-20_28 {
  font-size: 20px;
  line-height: 28px;
}
.t-20_32 {
  font-size: 20px;
  line-height: 32px;
}
.t-26_34 {
  font-size: 26px;
  line-height: 34px;
}
@media screen and (max-width: 1024px) {
  .mt-13_16 {
    font-size: 13px;
    line-height: 26px;
  }
  .mt-14 {
    font-size: 14px;
    line-height: 14px;
  }
  .mt-14_18 {
    font-size: 14px;
    line-height: 18px;
  }
  .mt-14_20 {
    font-size: 14px;
    line-height: 20px;
  }
  .mt-15_20 {
    font-size: 15px;
    line-height: 20px;
  }
  .mt-15_22 {
    font-size: 15px;
    line-height: 22px;
  }
  .mt-16_24 {
    font-size: 16px;
    line-height: 24px;
  }
}
/** Font sizes */
/** Colors and Background Colors **/
.c-white {
  color: var(--black-100);
}
.c-red {
  color: var(--secondary-red);
}
.c-green {
  color: var(--secondary-green);
}
.c-primary {
  color: var(--primary);
}
.c-black {
  color: var(--primary-black);
}
.c-black-12 {
  color: var(--black-12);
}
.c-black-30 {
  color: var(--black-30);
}
.c-black-50 {
  color: var(--black-50);
}
.c-black-60,
.c-medium-gray {
  color: var(--black-60);
}
.c-black-85 {
  color: var(--black-85);
}
.bk-black {
  background-color: var(--primary-black);
}
.bk-white {
  background-color: var(--black-100);
}
.bk-secondary {
  background-color: var(--secondary);
}
.bk-black-90 {
  background-color: var(--black-90);
}
.bk-black-95 {
  background-color: var(--black-95);
}
.bk-t-white {
  background-color: var(--white-a10);
}
/** Colors and Background Colors **/
.divider {
  height: 1px;
  width: 100%;
}
.wrap {
  flex-wrap: wrap;
}
.display-none {
  display: none;
}
/** MODAL CSS **/
/** Size **/
.radio-wrapper input {
  display: none;
}
.svg-checked,
.svg-unchecked {
  display: none;
}
/** radio checked **/
.radio-wrapper input:checked ~ .svg-checked {
  display: block;
}
.radio-wrapper input:checked ~ .svg-unchecked {
  display: none;
}
/** radio checked **/
/** radio unchecked **/
.radio-wrapper input ~ .svg-checked {
  display: none;
}
.radio-wrapper input ~ .svg-unchecked {
  display: block;
}
/** radio unchecked **/
/** Size **/
/** Color **/
.color-value-wrapper {
  height: 40px;
  width: 40px;
  padding: 2px;
  margin: 0 12px 6px 0;
  background-color: var(--white);
  border: solid 1px var(--black-90);
  border-radius: var(--border-radius-small);
}
.color-value {
  height: 34px;
  width: 34px !important;
  padding: 0px;
  border: solid 1px var(--black-90);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  outline: none;
  -webkit-transition: 0.15s ease-in-out;
  transition: 0.15s ease-in-out;
}
.color-value:before {
  height: 8px;
  width: 17px;
  border: 3px solid var(--tick-color);
  border-right: 0;
  border-top: 0;
  transform: rotate(-45deg) translate(2px, -2.5px);
  border-bottom-left-radius: 3px;
}
.color-label input {
  display: none;
}
.color-label input:checked + .color-value-wrapper .color-value:before {
  content: '';
}

.dkn-variant-section {
  margin-bottom: 24px;
}

.dkn-product-modal-information .dkn-pricing-label {
  margin-top: 12px;
}

.dkn-variant-section .dkn-variant-section-heading,
.dkn-product-modal-information .dkn-product-name,.dkn-product-modal-information .dkn-product-selling-price{
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--black-12);
}

.dkn-product-modal-information .dkn-product-original-price {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--black-50);
}

.dkn-product-modal-information .dkn-product-discount {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--secondary);
}

.dkn-variant-section .dkn-variant-section-header {
  padding-bottom: 12px;
}

.dkn-variant-section-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -6px;
  margin-top: -6px;
}

.dkn-variant-section-list .dkn-size-variant-item label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px;
  padding: 8px 16px;
  border: 1px solid var(--black-90);
  border-radius: var(--border-radius-small);
  color: var(--black-12);
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.dkn-variant-section-list
  .dkn-size-variant-item
  input[type='radio']:checked
  + label,
.dkn-variant-section-list .dkn-size-variant-item label:hover {
  color: var(--primary);
  border-color: var(--primary);
  background-color: rgba(var(--primary-rgb), 0.1);
  white-space: nowrap;
}

.dkn-variant-section-list .dkn-color-variant-item label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px;
  padding: 3px;
  height: 40px;
  width: 40px;
  background-color: var(--white);
  border: 1px solid var(--black-90);
  border-radius: var(--border-radius-small);
}

.dkn-variant-section-list .dkn-color-variant-item .dkn-color-variant-bg-color {
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.dkn-variant-section-list .dkn-color-variant-item label svg {
  visibility: hidden;
}

.dkn-variant-section-list .dkn-color-variant-item label svg {
  visibility: hidden;
}

.dkn-variant-section-list .dkn-color-variant-item label:hover svg {
  visibility: visible;
}

.dkn-variant-section-list
  .dkn-color-variant-item
  input[type='radio']:checked
  + label
  svg {
  visibility: visible;
}

/** Color **/
/** MODAL CSS **/
/* menu dropdown */
.dropdown-wrapper {
  position: relative;
  display: flex;
}
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 170px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
  z-index: 600;
  border: solid var(--black-30);
  background: #fff;
  top: 32px;
  border-top: none;
  border-radius: 0 0 15px 15px;
}
.dropdown-content a {
  color: var(--black-30);
  padding: 10px 16px;
  text-decoration: none;
  display: block;
}
.dropdown a:hover {
  background-color: #ddd;
}
.show {
  display: block;
}

.matrixFooter {
  background-color: var(--black-12);
}

.matrixFooter hr {
  margin: 0;
  padding: 0;
  opacity: 0.1;
}
.matrixFooter h3 {
  color: var(--white);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
@media only screen and (max-width: 1024px) {
  .matrixFooter h3 {
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
  }
}
.matrixFooter p {
  color: var(--black-85);
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  text-align: left;
}
@media only screen and (max-width: 1024px) {
  .matrixFooter p {
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
  }
}
/* 
.matrixContentInfo h3 {
  color: var(--white);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
} */

.matrixContentInfo p {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.matrixFeatures {
  padding: 40px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media only screen and (max-width: 1024px) {
  .matrixFeatures {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 32px 0;
  }

  .matrixFeature {
    width: 100% !important;
  }

  /* .matrixContentInfo p {
    margin-top: 4px;
    font-size: 12px;
    line-height: 16px;
  } */

  .matrixStoreTitle {
    text-transform: uppercase !important;
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 400 !important;
    color: var(--black-60) !important;
    text-align: center !important;
    margin-bottom: 12px !important;
  }
}

.matrixFeature {
  width: 33%;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.matrixFeature .mainTitle {
  text-align: center;
  font-size: 16px;
  line-height: 24px;
  color: var(--white);
  font-weight: 500;
}

.matrixContentTitle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.matrixContentInfo .subTitle {
  font-size: 14px;
  line-height: 20px;
  color: var(--black-85);
  font-weight: 400;
  text-align: center;
  margin-top: 2px;
}

@media only screen and (max-width: 1024px) {
  .matrixContentInfo .subTitle {
    font-size: 12px;
  }
  .matrixFeature .mainTitle {
    font-size: 14px;
  }

  .matrixFeature {
    margin-bottom: 24px;
  }
}
.matrixFeature:last-child {
  margin-bottom: 0;
}

.matrixDetails {
  padding: 32px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 1024px) {
  .matrixDetails {
    padding: 24px 16px;
  }
}

.matrixStoreTitle {
  opacity: 60%;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
}

.matrixStoreName {
  padding-top: 12px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  margin-bottom: 4px;
}

.matrixIcon {
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
}

.matrixAddress {
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  text-align: center !important;
}
@media only screen and (max-width: 1024px) {
  .matrixAddress {
    word-break: break-word;
  }
}

.matrixSocials {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px 0;
}

@media only screen and (max-width: 1024px) {
  .matrixSocials {
    padding-bottom: 24px;
  }
}

.matrixSocialText {
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  opacity: 60%;
}

.matrixLinks {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 1024px) {
  .matrixLinks {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .matrixLink:not(:first-child) {
    margin-left: 24px;
  }
  .matrixLink img {
    height: 24px;
    width: 24px;
    min-width: 24px;
  }
}

.matrixLink:not(:first-child) {
  margin-left: 32px;
}

.matrixLink {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 1024px) {
  .matrixLink {
    margin-right: 0;
  }
}

.matrixSocialIcon {
  height: 20px;
  width: 20px;
}

.matrixSocialLink {
  margin-left: 8px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: var(--white) !important;
}
@media only screen and (max-width: 1024px) {
  .matrixSocialLink {
    display: none;
  }
}

.sidebar {
  display: none;
  overflow: scroll;
}

@media only screen and (max-width: 1024px) {
  .navbar {
    background-color: transparent;
    height: auto;
  }
}

.sidebar-close {
  display: flex;
  align-items: center;
}

.mobileDrawerWrapper {
  padding: 16px;
}

.closeDrawer {
  /* height: 30px; */
  /* width: 30px; */
  color: var(--black-50);
}

.mobileDrawerHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  padding-bottom: 12px;
}

.sectionDividerSecondary {
  margin: 0;
  border: 0.75px solid #e6e6e6;
}

.sidebar .navLinksItems {
  display: flex;
  align-items: center;
  margin-top: 18px;
}

.navLinksItems__button {
  background-color: transparent;
  border: none;
  padding: 0;
}

.navLinksItems p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}

.navLinksItems img {
  margin-left: 4px;
  width: 16px;
  height: 16px;
}

.mobileCategoriesList {
  display: none;
}

@media only screen and (max-width: 1024px) {
  .mobileCategoriesList {
    display: flex;
    border: 1px solid transparent;
    border-radius: 100%;
    position: fixed;
    bottom: 72px;
    right: 16px;
    white-space: nowrap;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    min-width: 48px;
    min-height: auto;
    border-radius: 24px;
    z-index: 10;
  }
}

#category-popup {
  padding: 16px;
}

.list-wrapper {
  overflow: scroll;
  height: auto;
}

.category-list {
  /* padding: 16px; */
}

.category-list li {
  text-transform: capitalize;
  font-size: 16px;
  line-height: 24px;
  -webkit-align-items: center;
  -moz-box-align: center;
  align-items: center;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  margin-top: 16px;
  flex-direction: row;
  justify-content: space-between;
}

.category-list li a {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
}

.category-list li:first-child {
  margin-top: 0;
}

.modal .modal-content {
  overflow: scroll;
}

.category-list-title {
  flex: 1 1;
}

.viewAllCategories {
  color: var(--primary);
  align-items: center;
  color: var(--primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  padding: 12px 16px 12px;
  position: sticky;
  bottom: 0;
  border-top: 1px solid var(--black-85);
  background: var(--white);
}

.category-list-product-count {
  background-color: var(--black-60);
  border-radius: var(--border-radius-small);
  padding: 3px 2px;
  color: var(--white);
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  min-width: 29px;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: inline-flex;
  -webkit-align-items: center;
  -moz-box-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  justify-content: center;
  margin-left: 8px;
}

#categoryPopupWrapper .modal.category-modal {
  z-index: 10000 !important;
}

#categoryPopupWrapper .modal.category-modal .modal-content {
  width: 100%;
  padding: 16px;
  height: auto;
  /* margin: 0 24px 76px 24px; */
  margin-bottom: 76px;
  /* margin-top: 76px; */
  margin-left: 24px;
  margin-right: 24px;
  border: 0px solid transparent;
  border-radius: var(--border-radius-medium) !important;
}

.viewAllCategories p {
  margin-right: 6px;
}

.categoriesButton {
  border-radius: 24px;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2),
    0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
  outline: none;
  background-color: var(--black-30);
  padding: 12px;
  border: none;
}

.categoriesButton .categoriesButtonWrapper {
  display: flex;
  /* max-width: 90px; */
  opacity: 1;
  text-transform: capitalize;
  -webkit-transition: all 0.5s, opacity 0.5s, margin 0.5s;
  transition: all 0.5s, opacity 0.5s, margin 0.5s;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--white);
}

.categoriesIcon {
  cursor: pointer;
  color: var(--white);
  height: 22px;
  width: 22px;
}

.modal .category-modal {
  padding: 0 24px !important;
}

.searchbar-component {
  margin: 0 24px;
}

.searchbar-wrapper {
  position: relative;
}

.searchbar-component .searchbar-wrapper {
  width: 432px;
  background: var(--black-95);
  border-radius: var(--border-radius-medium);
  z-index: 103;
}

.searchbar-wrapper input {
  padding: 7px 28px 6px 40px;
  width: 100%;
  font-size: 16px;
  line-height: 26px;
  background: var(--black-95);
  color: var(--black-30);
  opacity: 1;
  border: 1px solid transparent;
  border-radius: 6px;
}

.searchbar-wrapper input::placeholder {
  color: var(--black-60);
}

.searchbar-wrapper .search-icon {
  position: absolute;
  left: 12px;
  top: 10px;
  height: 20px;
  width: 20px;
}

.searchbar-wrapper .cancel-btn {
  position: absolute;
  right: 14px;
  top: 14px;
}

.searchbar-wrapper .cancel-btn path {
  fill: var(--black-30);
}

.searchbar-component .search-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  z-index: 1000;
  background-color: var(--white);
  border-radius: var(--border-radius-large);
  overflow-y: auto;
  overflow-x: hidden;
  width: 432px;
  max-height: 415px;
}

.modal.searchbar-backdrop {
  z-index: 101;
}

.search-content-wrapper {
  padding: 16px;
}

.search-content-wrapper .category-list {
  flex-wrap: wrap;
  margin: -8px;
}

.search-content-wrapper .category-list .category-list-item {
  width: calc((100% - 64px) / 4);
  margin: 8px;
}

.category-list-shimmer-item {
  width: calc((100% - 64px) / 4);
}

.category-list-shimmer-item .category-image {
  width: 100%;
  height: 88px;
}

.search-content-wrapper .category-list .category-list-item img {
  width: 100%;
  object-fit: contain;
  aspect-ratio: 1/1;
  border: 1px solid var(--black-90);
  border-radius: var(--border-radius-medium);
}

.search-content-wrapper .category-list .category-name {
  padding-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--primary-black);
  font-size: 14px;
  line-height: 18px;
  text-align: center;
}

.m-search-modal-header {
  position: sticky;
  top: 0;
  background: var(--white);
}

@media screen and (min-width: 1024px) {
  .searchbar-wrapper input:focus {
    background: white;
  }
}

@media screen and (max-width: 1024px) {
  .search-content-wrapper .category-list .category-list-item {
    width: calc((100% - 32px) / 2);
    margin: 8px;
  }

  .category-list-shimmer-item {
    width: calc((100% - 32px) / 2);
  }
  .category-list-shimmer-item .category-image {
    width: 100%;
    height: 160px;
  }

  .modal.m-search-modal .modal-content {
    width: 100%;
    height: 100%;
    max-height: none !important;
    border-radius: 0px !important;
    overflow: hidden;
    overflow-y: scroll;
  }

  .m-search-modal-header {
    padding: 12px;
  }

  .search-content-wrapper {
    padding: 16px;
  }
}

/* Hellobar Overrides */
.hellobar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto !important;
}
@media only screen and (max-width: 768px) {
  .hellobar-text {
    font-size: 14px !important;
  }
}
/* Coupons Overrides */
.coupon-data-mobile {
  margin-left: 4px !important;
}
.coupon-title-mobile {
  margin-bottom: 2px;
}
.coupon-desc-mobile {
  color: var(--black-50) !important;
}

.mobile-menu-chevron-icon {
  border-left: 1px solid var(--black-85);
  padding-left: 16px;
}

.with-sort-container {
  justify-content: space-between;
}

.sortContainer {
  display: flex;
  align-items: center;
}

.sortContainer p {
  font-size: 14px;
  line-height: 20px;
  padding-right: 16px;
}

.sortContainer img {
  margin-left: 4px;
  margin-right: 0px;
}

.sortContainer div {
  font-weight: 500;
  cursor: pointer;
}

.sortItems {
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  position: absolute;
  top: 110px;
  border: 1px solid gainsboro;
  background-color: white;
  box-shadow: 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%),
    0px 3px 14px 2px rgb(0 0 0 / 12%);
}

.sortItem {
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 24px;
}

.sortItem:nth-last-child(1) {
  margin-bottom: 0;
}

.sort-popper .modal-content {
  z-index: 100002;
  position: absolute;
  background: white;
  white-space: nowrap;
  right: 0;
  top: calc(100% + 5px);
  max-width: 220px;
  border-radius: 4px;
  box-shadow: 0px 5px 5px -3px rgb(0 0 0 / 20%),
    0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%);
}

.form-wrapper img {
  display: none;
}

@media screen and (max-width: 1024px) {
  .form-wrapper img {
    display: block;
  }
}

.sortLabel {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 16px;
}

.sortLabel:last-child {
  margin-bottom: 0;
}

.sortLabel input {
  margin: 0 8px 0 0;
}

.sortLabel label {
  font-size: 16px;
  line-height: 24px;
}

.form-wrapper {
  padding: 16px;
}

input[type='radio'] {
  border: 0px;
  height: 25px;
  accent-color: var(--primary);
  width: 18px;
  height: 18px;
}

.form-wrapper img {
  position: absolute;
  right: 24px;
  top: 12px;
}

@media screen and (max-width: 1024px) {
  .popover-content {
    width: 100%;
  }

  .popover-modal {
    background-color: rgba(0, 0, 0, 0.3);
  }

  .sortContainer {
    display: none;
  }
}

.mobile-sort-by__wrapper {
  display: none;
  width: 100%;
  box-shadow: 0 1px 0 var(--black-90);
}

.mobile-sort-by__button {
  border: none;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: var(--black-30);
}

.mobile-sort-by__button svg {
  height: 20px;
  width: 20px;
}

.mobile-sort-by__button span {
  margin-left: 8px;
}

.mobile-sort-by__modal {
  justify-content: flex-end;
}

.mobile-sort-by__content {
  width: 100%;
  background-color: var(--black-100);
  border-radius: 16px 16px 0 0;
  padding: 24px 16px;
  position: relative;
}

.mobile-sort-by__close-modal {
  position: absolute;
  top: 29px;
  right: 24px;
  border: none;
  background-color: transparent;
  padding: 0;
}

@media only screen and (max-width: 1024px) {
  .mobile-sort-by__wrapper {
    display: block;
  }
}

.sticky {
  position: sticky;
  z-index: 2;
}

.sticky-bottom {
  top: unset;
  bottom: 0;
}

.sticky-top {
  top: 0;
}

product-variant-selection-modal .modal-content {
  border-radius: var(--border-radius-large) !important;
}

product-variant-selection-modal .modal .modal-content {
  max-width: 540px;
  width: 540px;
  max-height: 85vh;
}

@media only screen and (max-width: 1024px) {
  product-variant-selection-modal .modal-content {
    border-radius: 16px 16px 0px 0px !important;
  }

  product-variant-selection-modal .modal .modal-content {
    width: 100%;
  }
}

.variant-selection .size-selection .size-label:not(:first-child) {
  padding-top: 12px;
}

.size-selection .size-label:first-of-type {
  padding-top: 0;
}

.second-heading--inner,
.second-heading--inner:hover {
  color: var(--black-50);
}

.second-heading--inner:hover {
  cursor: pointer;
  text-decoration: underline;
}

.productCard img#product-card-images:hover {
  transform: scale(1.05);
  transition: all 0.4s ease;
}

.splide-progress-bar {
  position: absolute;
  bottom: 2px;
  left: 0;
  background: var(--primary);
  opacity: 0.9;
  height: 3px;
  transition-property: width;
  transition-timing-function: linear;
  width: 0%;
}

@media screen and (max-width: 768px) {
  .splide-progress-bar {
    bottom: 0;
  }
}

.splide-progress-bar-animation {
  -webkit-animation-name: productSplideAnimation;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes productSplideAnimation {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.pt32 {
  padding-top: 32px;
}

@media screen and (max-width: 1024px) {
  .m-pt16 {
    padding-top: 16px;
  }
}

  .text-14{
    font-size: 14px;
    line-height: 20px;
  }

.gap-12{
  gap: 12px;
}
.luxury-footer-menu{
  justify-content: flex-start !important;
}
@media only screen and (min-width: 992px) {
  .luxury-footer-menu{
    justify-content: center;
  }
  .gap-lg-3{
    gap: 16px;
  }
}

.menu-drop-ul.overflow-menu-container{
  top: calc(100% - 18px) !important;
}
.header-main{
  position: relative !important;
}
.menu-drop-ul{
  top: calc(100% - 16px) !important;
  border-radius: var(--border-radius-large) !important;
  box-shadow: 0px 4px 12px rgba(26, 24, 30, 0.1);

}
.menu-content a{
  color: var(--black-12) !important;
}
#closeMenu svg{
  height: 24px;
  width: 24px;
}
.header-inner .menu-main{
  margin: 0 !important;
}
.menu-dropdown__button{
  right: -6px !important;
}
.text-14_24 {
  font-size: 14px;
  line-height: 24px;
}
.text-decoration-underline {
  text-decoration: underline;
}
/* WISHLIST */
wishlist-button-load-point button {
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

[data-template-id="heart-wishlist-button-template"] {
  position: absolute;
  bottom: 8px;
  right: 8px;
}

[data-template-id="heart-wishlist-button-template"] .wishlist-svg-wrapper {
  background: #ffffff;
  box-shadow: 0px 2px 4px rgb(26 24 30 / 24%);
  padding: 6px;
  border-radius: 50%;
}

[data-template-id="modal-wishlist-button-template"] {
  width: 100%;
}

[data-template-id="modal-wishlist-button-template"] .detail-wishlist-btn {
  color: var(--primary);
  border: 1px solid var(--primary);
  background-color: #fff;
  padding: 4px 11px;
  font-weight: 500;
  overflow: hidden;
}

[data-template-id="pdp-wishlist-button-template"] .wishlist-svg-wrapper {
  margin-right: 6px;
}

[data-template-id="pdp-wishlist-button-template"] .wishlist-svg-wrapper svg {
  width: 20px;
  height: 20px;
}

[data-template-id="pdp-wishlist-button-template"] .wishlist-btn-text {
  font-size: 14px;
  line-height: 24px;
  text-decoration: underline;
  font-weight: 500;
  color: var(--black-30);
}

[data-template-id="modal-wishlist-button-template"] .wishlist-svg-wrapper {
  margin-right: 8px;
}

@media screen and (min-width: 992px) {
  [data-template-id="pdp-wishlist-button-template"] .wishlist-svg-wrapper {
    margin-right: 8px;
  }

  [data-template-id="pdp-wishlist-button-template"] .wishlist-svg-wrapper svg {
    width: 24px;
    height: 24px;
  }

  [data-template-id="pdp-wishlist-button-template"] .wishlist-btn-text {
    font-size: 16px;
    line-height: 24px;
  }
}

.modal-content.request-access-modal {
  padding-top: 48px;
  width: 500px;
  max-width: 500px;
  min-width: 500px;
  height: 640px;
  min-height: 640px;
  max-height: 640px;
  border-radius: 4px;
  overflow-y: auto;
}

@media screen and (max-width: 1024px) {
  .modal-content.request-access-modal {
    padding-top: 48px;
    border-radius: 0px;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
  }
}