@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;500;600;700;800;900&display=swap");

:root {
  --black: #000000;
  --secondary-black: #141414;
  --dark-blue: #232b2f;
  --secondary-text: #898989;
  --primary-bg: #f4f5f8;
  --secondary-bg: #fff;
  --grey: #f0f0f0;
  --grizzle-gray: #626262;
  --primary: #e42a12;
  --orange: #ffa100;
  --border: #e9e9e9;
  --red: #ff3d00;
  --green: #e42a12;
  --primary-hover: #e41c02;
  --blue: #03758e;
  --light-blue: #0d5fff;
  --white: #fff;
  --purple: #f3ded4;
  --primary-transparent: rgba(151, 229, 103, 0.2);
  --popover-box-shadow: 0px 20px 60px rgba(168, 168, 169, 0.65);
  --cart-box-shadow: 0 4px 4px rgba(194, 194, 194, 0.49);
  --tab-box-shadow: 0px 2px 2px rgba(221, 221, 221, 0.57);
  --nav-link-box-shadow: 0px 2px 4px #ebebeb;
  --border-color: rgba(46, 52, 86, 0.2);
}
[data-theme="dark"] {
  --black: #f4f5f8;
  --dark-blue: #f4f5f8;
  --secondary-black: #f4f5f8;
  --secondary-text: #787e85;
  --primary-bg: #2b343b;
  --secondary-bg: #182025;
  --grey: #f4f5f81a;
  --grizzle-gray: #626262;
  --primary: #e42a12;
  --orange: #ffa100;
  --border: #2b343b;
  --red: #ff3d00;
  --green: #e42a12;
  --primary-hover: #e41c02;
  --blue: #00cbf8;
  --white: #000;
  --purple: #f3ded4;
  --popover-box-shadow: 0px 16px 60px rgba(0, 0, 0, 0.6);
  --cart-box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.85);
  --tab-box-shadow: 0px 2px 2px rgba(20, 21, 22, 0.71);
  --nav-link-box-shadow: 0px 2px 4px #ebebeb;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  scroll-behavior: smooth;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
  font-family: "Nunito", sans-serif;
  color: var(--black);
}

body {
  background-color: var(--primary-bg);
}

.container {
  width: 100%;
  padding: 0 50px;
}
.shop-container {
  width: 100%;
  padding: 0 30px 0 50px;
}
.store .shop-container {
  padding: 0 30px;
}
.bg-white {
  min-height: calc(100vh - 70px);
  background-color: var(--secondary-bg);
}
.white-splash {
  background-color: var(--secondary-bg);
}
.background {
  background-color: var(--primary-bg);
}

.layout-container .container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 50px;
}

button {
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
}

img {
  object-fit: cover;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
  background-color: transparent !important;
}

/* .swiper.banner-swiper {
  padding: 0 20px;
} */
.swiper.tab-swiper .swiper-slide {
  width: auto;
}
.swiper .swiper-button-next,
.swiper .swiper-button-prev {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--grey);
  background-color: var(--secondary-bg);
  transition: all 0.2s;
  box-shadow: var(--tab-box-shadow);
}
.swiper .swiper-button-disabled {
  display: none;
}
.swiper .swiper-button-next::after,
.swiper .swiper-button-prev::after {
  font-size: 16px;
  color: var(--dark-blue);
}
.swiper .swiper-button-next:hover,
.swiper .swiper-button-prev:hover {
  border-color: var(--primary);
}

.toast-alert .Toastify__toast-theme--light {
  background: var(--secondary-bg);
  box-shadow: var(--tab-box-shadow);
  padding: 0;
  border-radius: 10px;
}
.toast-alert .Toastify__toast-body {
  display: block;
  margin: 0;
  padding: 0;
}
.toast-alert .Toastify__toast-body > div {
  height: 100%;
}

.banner-placeholder {
  width: 100%;
  padding-top: 20%;
  background-color: var(--secondary-bg);
}

#nprogress .bar {
  height: 3px !important;
  background: var(--primary) !important;
}

#nprogress .peg {
  box-shadow: 0 0 10px var(--primary), 0 0 5px var(--primary);
}

.red {
  color: var(--red);
}
.strike {
  text-decoration: line-through;
}

.swiper.story {
  height: 100%;
}

.pac-container {
  background-color: var(--secondary-bg);
  z-index: 2001;
  margin-top: 8px;
  box-shadow: none;
  box-shadow: 0px 25px 50px var(--grey);
  border-radius: 8px;
  left: auto;
  border: 1px solid var(--grey);
}
.pac-container .pac-item {
  border-top: none;
  cursor: pointer;
  padding: 12px 20px;
  border-bottom: 1px solid var(--grey);
}

.ReactModal__Overlay {
  z-index: 1400 !important;
}

@supports (font: -apple-system-body) and (-webkit-appearance: none) {
  img[loading="lazy"] {
    clip-path: inset(0.6px);
  }
}

[data-theme="dark"] ::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

@media (max-width: 1139px) {
  .container {
    padding: 0 15px;
  }
  .shop-container {
    padding: 0 15px;
  }
  .store .shop-container {
    padding: 0 15px;
  }
  .layout-container .container,
  .layout-container .shop-container {
    max-width: 100%;
    padding: 0 15px;
  }
  .swiper.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 0 15px;
  }
  .swiper.banner-swiper .swiper-slide {
    max-width: 310px;
  }
  .swiper.story-swiper .swiper-slide {
    max-width: 130px;
  }
  .swiper.featured-shops .swiper-slide {
    max-width: 180px;
  }
  .swiper.shop-list .swiper-slide {
    max-width: 300px;
  }
  .banner-placeholder {
    padding-top: 50%;
  }
}

@media (max-width: 576px) {
  .swiper.banner-swiper .swiper-slide {
    max-width: 258px;
  }
  .swiper.story-swiper .swiper-slide {
    max-width: 120px;
  }
  .swiper.featured-shops .swiper-slide {
    max-width: 150px;
  }
  .swiper.shop-list .swiper-slide {
    max-width: 286px;
  }
  .banner-placeholder {
    padding-top: 100%;
  }
}

.swiper-pagination .swiper-pagination-bullet {
  background-color: var(--primary);
}