@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

h1 {
  font-weight: normal;
  font-size: inherit;
  font-family: "Playfair Display";
}

a {
  color: rgb(26, 26, 26);
  text-decoration: none;
}

.text-black {
  color: #222222;
}

.heading-text {
  font-family: "Playfair Display";
  font-weight: 400;
  color: #222222;
  font-size: 24px;
}

.primary-button {
  height: 45px;
  width: 70px;
  background-color: rgb(174, 132, 95);
  color: white;
  outline: none;
  border: none;
  font-size: 14px;
}
.primary-button:hover {
  background-color: var(--text-dark-grey);
  cursor: pointer;
}

.m0 {
  margin: 0 !important;
}

.m1 {
  margin: 1rem !important;
}

.nb {
  border: none !important;
}

.inline {
  display: inline !important;
}

.primary-color-btn {
  background-color: #AE845F;
  color: white;
  text-align: center;
  padding: 2ex;
  font-size: 14px;
  letter-spacing: 0.12px;
}

input {
  border: 1px solid #DDD;
  padding: 8px;
}
input:focus {
  outline: none;
}

.radio-set {
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.radio-set * {
  margin-top: 10px;
}
.radio-set label {
  cursor: pointer;
}
.radio-set input {
  accent-color: #AE845F;
  width: 15px;
  height: 15px;
}

button, #product-list #product-input .caution, #product-item-update-page #product-item .form-input .caution, .btn-caution, .btn-primary {
  border: none;
  outline: none;
  cursor: pointer;
}

.flex {
  display: flex;
}

/* Banner  */
.banner {
  height: 256px;
  width: 100%;
  padding-top: 71px;
  padding-bottom: 76px;
  background-image: url("/static/images/banner_raw.png");
}

.banner .shop {
  height: 256px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.banner .shop .page-title {
  font-family: "Playfair Display";
  font-weight: 500;
  color: white;
  font-size: 55px;
  text-align: center;
}

.banner .shop .page-breadcrumbs {
  margin-top: 20px;
  text-align: center;
  color: white;
  line-height: 25px;
  font-weight: 400;
  font-size: 14px;
  font-family: "Roboto";
}

.banner .shop .page-breadcrumbs .heading {
  color: white;
  text-decoration: none;
}

.banner .shop .page-breadcrumbs .heading:hover {
  color: #ffbc00;
}

img {
  object-fit: cover;
}

.next-page-container {
  text-align: center;
}
.next-page-container .next-page-btn {
  color: white;
  background-color: #AE845F;
  border: 1px solid #AE845F;
  font-size: 14px;
  font-weight: 400;
  justify-content: center;
  width: 40px;
  line-height: 36px;
}

.error-message {
  color: red;
  font-size: 1rem;
}

.dropdown {
  padding: 0;
  margin: 0;
}
.dropdown ul {
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  height: 250px;
}
.dropdown li {
  list-style: none;
  padding: 2.5px 0 2.5px 0;
  cursor: pointer;
}
.dropdown li:hover {
  background-color: #DDD;
}

.text-active {
  color: rgb(174, 132, 95);
}

.messages {
  list-style: none;
  margin: 1rem auto;
  width: 90%;
}
@media screen and (min-width: 1200px) {
  .messages {
    max-width: 1190px;
  }
}
.messages li {
  font-size: 14px;
  font-family: "Playfair Display";
  background-color: #F5F3F2;
  padding: 15px;
  margin-top: 15px;
}
.messages li a {
  color: black;
  text-decoration: underline;
  font-size: 14px;
  font-weight: 400;
}
.messages li a:hover {
  color: #9f876a;
}
.messages .error {
  color: #c50000;
}

/* Media Query Mixin */
nav {
  position: relative;
  z-index: 30;
  border-bottom: 1px solid;
  border-color: #EEE;
}
@media screen and (max-width: 1200px) {
  nav {
    max-width: 95%;
    margin-inline: auto;
  }
}
@media screen and (max-width: 768px) {
  nav {
    max-width: 95%;
    margin-inline: auto;
  }
}
@media screen and (max-width: 425px) {
  nav {
    max-width: 95%;
    margin-inline: auto;
  }
}
@media screen and (max-width: 360px) {
  nav {
    max-width: 95%;
    margin-inline: auto;
  }
}
nav .nav {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: 0.7fr 3fr 1fr;
  align-items: center;
  justify-items: center;
}
@media screen and (max-width: 1200px) {
  nav .nav {
    grid-template-rows: auto 1fr;
    grid-template-areas: ". . ." "a a a";
  }
}
nav .nav i:nth-child(1) {
  display: block;
  font-size: 18px;
}
nav .nav .nav-links-container .nav-links {
  display: flex;
  flex-direction: column;
  gap: 30px;
  overflow-y: scroll;
  padding: 0px 5px;
}
nav .nav .nav-links-container .nav-links > a {
  text-transform: uppercase;
}
nav .nav .nav-links-container .nav-links .option-popup {
  display: none;
}
nav .nav .nav-links-container .nav-links .option-popup div {
  display: flex;
  flex-direction: column;
  margin: 0px 15px;
  gap: 20px;
}
nav .nav .nav-links-container .nav-links .option-popup div a {
  text-align: left;
}
nav .nav .nav-links-container .nav-links .option-popup div a {
  border-bottom: 1px solid #eee;
  padding: 8px 0;
}
@media (min-width: 1200px) {
  nav .nav .nav-links-container .nav-links .option-popup div a {
    border-bottom: 0;
    padding: 0;
  }
}
nav .nav .nav-links-container a .optn-title {
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
nav .nav .nav-links-container .optn-title-mob {
  border-bottom: 1px solid #eee;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 1200px) {
  nav .nav .nav-links-container .optn-title-mob {
    display: none;
  }
}
nav .nav .nav-logo {
  width: 100%;
  display: grid;
  place-content: flex-start;
}
nav .nav .nav-logo img {
  width: 160px;
  object-position: 0px -5px;
}
nav .nav .nav-icons {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}
nav .nav .nav-icons #search-item {
  display: none;
}
nav .nav .nav-icons i:nth-child(2),
nav .nav .nav-icons i:nth-child(3) {
  display: none;
}
nav .nav .nav-icons i:nth-child(4),
nav .nav .nav-icons i:nth-child(5) {
  font-size: 22px;
}
@media (min-width: 1200px) {
  nav .nav {
    display: grid;
    grid-template-columns: 2fr 5fr 3fr;
    max-width: 1190px;
    margin-inline: auto;
    justify-items: center;
    align-items: center;
    column-gap: 35px;
    padding: 6px 0;
    margin-bottom: 1px;
    padding-inline: 30px;
  }
  nav .nav .nav-icons #search-item {
    display: block;
  }
  nav .nav .nav-icons i:nth-child(2),
  nav .nav .nav-icons i:nth-child(3) {
    display: block;
  }
  nav .nav .nav-icons input:focus {
    outline: none;
  }
}
nav .nav .nav-links-container {
  display: none;
  width: 100%;
  padding-inline: 20px;
}
@media (min-width: 1200px) {
  nav .nav .nav-links-container {
    display: block;
  }
  nav .nav .nav-links-container .nav-links {
    overflow: unset;
  }
}
nav .nav .nav-links-container .nav-links {
  z-index: 8;
  position: fixed;
  background-color: white;
  width: 80vw;
  height: 100vh;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem;
  border: 1px solid black;
}
@media (min-width: 1200px) {
  nav .nav .nav-links-container .nav-links {
    position: static;
    display: flex;
    flex-direction: row;
    justify-content: start;
    padding: 0;
    height: 0;
    background-color: rgba(0, 0, 0, 0);
    align-items: center;
    width: 100%;
    margin-bottom: 0;
    height: auto;
    border: none;
  }
}
nav .nav .nav-links-container .nav-links a {
  font-size: 16px;
}
@media (min-width: 1200px) {
  nav .nav .nav-links-container .nav-links a {
    text-align: center;
    padding: 1rem 0;
    margin: 0;
  }
}
nav .nav .nav-icons svg {
  width: 1.4rem;
  height: 1.4rem;
}
nav .nav .nav-icons .cart-icon-container {
  position: relative;
}
nav .nav .nav-icons .cart-icon-container .cart-number {
  background-color: #ae845f;
  cursor: pointer;
  height: 17px;
  width: 17px;
  font-size: 10px !important;
  color: #fff;
  font-weight: 600;
  border-radius: 50%;
  position: absolute;
  right: -10px;
  top: -5px;
  display: grid;
  place-content: center;
}
nav .nav .nav-icons .wishlist-icon-container {
  position: relative;
}
nav .nav .nav-icons .wishlist-icon-container .wishlist-number {
  background-color: #ae845f;
  cursor: pointer;
  height: 17px;
  width: 17px;
  font-size: 10px !important;
  color: #fff;
  font-weight: 600;
  border-radius: 50%;
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-content: center;
}
@media (min-width: 1200px) {
  nav .nav .nav-icons {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
    font-size: 20px;
  }
  nav .nav .nav-icons svg {
    width: 1.4rem;
    height: 1.4rem;
  }
  nav .nav .nav-icons svg:nth-child(5) {
    width: 1.4rem;
    height: 1.4rem;
  }
  nav .nav .nav-icons .nav-search-container {
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 5px;
    padding: 3px 10px;
  }
  nav .nav .nav-icons .nav-search-container I {
    color: #DDD;
  }
  nav .nav .nav-icons .nav-search-container input {
    border: none;
    color: #B4B4B4;
  }
  nav .nav .nav-icons .nav-search-container #nav-search-item {
    width: 200px;
    height: 30px;
    border-radius: 20px;
    border-color: #222;
    padding: 15px;
    font-size: 15px;
  }
  nav .nav .nav-icons .nav-search-container i {
    margin: 0 !important;
  }
  nav .nav .nav-icons .nav-icons-container {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  nav .nav .nav-icons .profile-icon-container i {
    font-size: 20px !important;
  }
  nav .nav .nav-icons button, nav .nav .nav-icons #product-list #product-input .caution, #product-list #product-input nav .nav .nav-icons .caution, nav .nav .nav-icons #product-item-update-page #product-item .form-input .caution, #product-item-update-page #product-item .form-input nav .nav .nav-icons .caution, nav .nav .nav-icons .btn-caution, nav .nav .nav-icons .btn-primary {
    background-color: unset;
  }
  nav .nav .nav-icons i:hover {
    color: #ae845f;
    cursor: pointer;
  }
  nav .nav .nav-icons svg:hover {
    fill: #ae845f !important;
    cursor: pointer;
  }
  nav .nav .nav-icons .cart-number {
    top: -3px !important;
    right: -10px !important;
  }
  nav .nav .nav-icons .wishlist-number {
    top: -2px !important;
    right: -6px !important;
  }
}
nav .nav .nav-logo {
  width: 160px;
  object-fit: cover;
}
nav .nav .nav-logo img {
  width: 100%;
  object-position: 0px -6px;
}
@media (min-width: 1200px) {
  nav .nav #nav-cat1-optn {
    left: 226px;
    top: 65px;
  }
  nav .nav #nav-cat1-optn .option-up div > a {
    display: none;
  }
}
@media (min-width: 1200px) {
  nav .nav #nav-cat2-optn {
    left: 330px;
    top: 65px;
  }
  nav .nav #nav-cat2-optn .option-up div > a {
    display: none;
  }
}
nav .nav #nav-cat3-optn .shop-optn-container div {
  display: none;
}
nav .nav #nav-cat3-optn .shop-optn-container .shop-mobile {
  display: flex;
}
@media (min-width: 1200px) {
  nav .nav #nav-cat3-optn {
    top: 65px;
    left: 225px;
  }
  nav .nav #nav-cat3-optn .option-up div > a {
    display: none;
  }
  nav .nav #nav-cat3-optn .shop-optn-container {
    display: grid;
    grid-template-columns: 205px 200px 175px;
    column-gap: 5px;
    padding: 10px;
  }
  nav .nav #nav-cat3-optn .shop-optn-container > a {
    display: none;
  }
  nav .nav #nav-cat3-optn .shop-optn-container a {
    font-size: 16px;
    padding: 0;
    place-content: unset;
  }
  nav .nav #nav-cat3-optn .shop-optn-container .shop-mobile {
    display: none;
  }
  nav .nav #nav-cat3-optn .shop-optn-container div {
    display: grid;
  }
  nav .nav #nav-cat3-optn .shop-optn-container div a {
    text-align: left;
  }
  nav .nav #nav-cat3-optn .shop-optn-container div .shop-title:hover {
    color: #222;
    cursor: auto;
  }
}
@media (min-width: 1200px) {
  nav .nav #nav-cat4-optn {
    top: 65px;
    left: 515px;
  }
  nav .nav #nav-cat4-optn .option-up div > a {
    display: none;
  }
}
@media (min-width: 1200px) {
  nav .nav #nav-cat5-optn {
    top: 65px;
    left: 636px;
  }
  nav .nav #nav-cat5-optn .option-up div > a {
    display: none;
  }
}
nav .mobile-search-bar {
  grid-area: a;
  width: 100%;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-inline: auto;
  border: 1px solid #C5C5C5;
  border-radius: 7px;
  padding: 10px;
}
nav .mobile-search-bar input {
  width: 95%;
  padding: 2px;
  border: none;
  color: #C5C5C5;
}
nav .mobile-search-bar input:focus {
  outline: none;
}
nav .mobile-search-bar i {
  color: #ddd;
}
@media (min-width: 1200px) {
  nav .mobile-search-bar {
    display: none;
  }
}

@media (min-width: 1200px) {
  #ham-icon {
    display: none !important;
  }
}

a {
  text-decoration: none;
  color: #222;
}
a:hover {
  cursor: pointer;
  color: #ae845f;
}

.option-popup div a:nth-child(1) {
  display: none;
}
@media (min-width: 1200px) {
  .option-popup {
    display: none;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.97);
    left: 380px;
    top: 64px;
    overflow: hidden;
  }
  .option-popup div {
    display: flex;
    flex-direction: column;
    padding: 10px 18px;
  }
  .option-popup div a {
    padding: 10px 30px;
    place-content: center;
  }
  .option-popup .shop-mobile {
    display: none;
  }
}

h1 {
  font-size: 18px;
}

#hero .banner-image {
  width: 100%;
  height: 100vh;
}
#hero .banner-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

a {
  text-decoration: none;
}

.nav-search-container {
  display: none;
}
@media (min-width: 1200px) {
  .nav-search-container {
    display: flex;
  }
}

.login-with-google-btn {
  transition: background-color 0.3s, box-shadow 0.3s;
  padding: 12px 16px 12px 42px;
  border: none;
  border-radius: 3px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.25);
  color: #757575;
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
  background-color: white;
  background-repeat: no-repeat;
  background-position: 16px 14px;
  min-width: 120px;
}
.login-with-google-btn:hover {
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25);
}
.login-with-google-btn:active {
  background-color: #eeeeee;
}
.login-with-google-btn:focus {
  outline: none;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 3px #c8dafc;
}
.login-with-google-btn:disabled {
  filter: grayscale(100%);
  background-color: #ebebeb;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

.profile-icon-container {
  display: none;
}
@media (min-width: 1200px) {
  .profile-icon-container {
    display: block;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.row-table .row-with-img {
  margin-top: 12px;
  border: 1.5px solid #DDDDDD;
  display: grid;
  grid-template-columns: 3fr 14fr 3fr;
  grid-column-gap: 24px;
  padding: 12px 24px;
}

.row-table .row-with-img .img-container {
  aspect-ratio: 1;
}

.row-table .row-with-img .img-container img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.row-table .row-with-img .product-details {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.row-table .row-with-img .product-details span {
  font-size: 12px;
  color: #767676;
  margin-right: 1rem;
}

.row-table .row-with-img .product-details h2 {
  font-size: 18px;
  padding: 0;
  margin-bottom: 0;
}

.row-table .row-with-img .product-pack-container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.row-table .row-with-img .product-pack-container div {
  padding-right: 3px;
}

button, #product-list #product-input .caution, #product-item-update-page #product-item .form-input .caution,
.btn-caution,
.btn-primary {
  width: 100%;
  font-family: "Roboto";
  display: grid;
  place-content: center;
  padding: 5px 0px;
  border: 0;
  height: 48px;
  transition: background-color 200ms, color 200ms;
}

.btn-primary {
  border: 1px solid #AE845F;
  background-color: #AE845F;
  color: #fff;
}

.btn-primary:hover {
  background-color: white !important;
  color: #AE845F;
}

.btn-caution {
  background-color: white !important;
  border: 1px solid #E33131;
  color: #E33131;
  font-size: 14px;
  text-decoration: none;
}

.btn-caution:hover {
  background-color: #E33131 !important;
  color: white;
}

.text-right {
  text-align: right !important;
}

.text-black {
  color: #e2e2e2 !important;
}

.text-bold {
  font-weight: 600;
}

h1 {
  font-family: "Playfair Display";
  font-size: 24px;
}

.d-8-2 {
  display: grid;
  grid-template-columns: 8fr 2fr;
  gap: 24px;
}

.d-1-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

sup {
  font-size: 12px;
  color: #E33131;
}

.input-section {
  margin: 32px 0;
}

.input-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-container input,
.input-container select,
.input-container .product-select {
  border: 1px solid #DDD;
  height: 50px;
  padding: 8px;
  background-color: white;
}

.input-container input:focus {
  outline: none;
}

.mt-1 {
  margin-top: 1rem !important;
}

.mt-2 {
  margin-top: 2rem !important;
}

.mt-3 {
  margin-top: 3rem !important;
}

.mt-4 {
  margin-top: 4rem !important;
}

.flex-row {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  justify-content: space-around;
  gap: 1rem;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.w-300 {
  width: 300px;
}

a {
  text-decoration: none;
  color: #222;
}

footer {
  grid-area: footer;
  background-color: #F5F3F2;
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  font-family: "Roboto";
}
footer .footer-logo {
  width: 150px;
  height: 100px;
  object-fit: contain;
}
footer .footer-links {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
@media screen and (max-width: 510px) {
  footer .footer-links {
    flex-wrap: wrap;
    justify-content: center;
  }
}
footer .footer-icons {
  display: flex;
  gap: 40px;
}
footer .footer-icons img {
  width: 20px;
  aspect-ratio: 1;
}
footer a:hover {
  color: #ae845f;
}

/*# sourceMappingURL=footer.css.map */
.banner {
  height: 256px;
  width: 100%;
  padding-top: 71px;
  padding-bottom: 76px;
  background-image: url("/static/images/banner_raw.png");
  object-fit: contain;
}
.banner .page-title {
  font-family: "Playfair Display";
  font-weight: 500;
  color: white;
  font-size: 55px;
  text-align: center;
}
.banner .page-breadcrumbs {
  margin-top: 20px;
  text-align: center;
  color: white;
  line-height: 25px;
  font-weight: 400;
  font-size: 14px;
  font-family: "Roboto";
}
.banner .page-breadcrumbs .heading {
  color: white;
  text-decoration: none;
}
.banner .page-breadcrumbs .heading:hover {
  color: #ffbc00;
}

/*
POPUP
Popup Overlay     -> .popup-padding
Popup Container   -> .popup-container
Popup Container   -> .popup-container .width-300 (restrict width only 300px)
header            ->  header                     (heading and close in flex)
section           ->  section                    (popup content with scroll)
*/
popup {
  position: fixed;
  top: 0;
  z-index: 10;
  left: 0;
  height: 100%;
  width: 100%;
  display: grid;
  place-content: center;
  display: none;
}
popup .width-300 {
  width: 300px !important;
}
popup .width-265 {
  width: 265px !important;
}
popup .popup-container {
  border-radius: 10px;
  width: 300px;
  background-color: white;
  max-height: 90vh;
  z-index: 6;
  overflow: hidden;
}
@media screen and (min-width: 1190px) {
  popup .popup-container {
    width: 800px;
  }
}
popup .popup-container header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 !important;
  padding: 20px 20px !important;
}
popup .popup-container header h1 {
  font-size: 18px !important;
  font-family: "Playfair Display" !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  font-weight: 400 !important;
}
popup .popup-container header div {
  font-weight: 900;
}
popup .popup-container section {
  background-color: white;
  overflow-y: scroll;
  padding: 20px 20px;
  margin: 0;
}
popup .popup-container section .btn-outline {
  margin: 10px 0;
  color: #AE845F;
  border: 1px solid #AE845F;
  background-color: white;
}
popup .popup-container section .btn-outline:hover {
  background-color: #AE845F !important;
  color: white;
}
popup .popup-padding {
  position: fixed;
  background-color: rgba(146, 146, 146, 0.4);
  height: 100vh;
  width: 100vw;
  z-index: 5;
}

.wishlist-popup .wishlist-checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 12px;
  height: 48px;
}
.wishlist-popup .wishlist-checkbox-container:hover {
  border: 1px solid gray;
}
.wishlist-popup .wishlist-checkbox-container input {
  height: 20px;
  width: 20px;
  outline: none;
  border: none;
}
.wishlist-popup section {
  padding-top: 0px !important;
  overflow: hidden !important;
}

#all-wishlists {
  max-height: 240px;
  overflow-y: scroll !important;
}

#create-new-wishlist {
  height: 150px;
  display: flex;
  flex-direction: column;
}
#create-new-wishlist label {
  margin: 1rem 0;
}
#create-new-wishlist input {
  height: 48px;
}

.address-editor form > div {
  overflow-y: scroll;
  height: 400px;
}

.row-table .row-with-img {
  margin-top: 12px;
  border: 1.5px solid #DDDDDD;
  display: grid;
  grid-template-columns: 3fr 14fr 3fr;
  grid-column-gap: 24px;
  padding: 12px 24px;
}
.row-table .row-with-img .img-container {
  aspect-ratio: 1;
}
.row-table .row-with-img .img-container img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.row-table .row-with-img .product-details {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.row-table .row-with-img .product-details span {
  font-size: 12px;
  color: #767676;
  margin-right: 1rem;
}
.row-table .row-with-img .product-details h2 {
  font-size: 18px;
  padding: 0;
  margin-bottom: 0;
}
.row-table .row-with-img .product-pack-container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.row-table .row-with-img .product-pack-container div {
  padding-right: 3px;
}

button, #product-list #product-input .caution, #product-item-update-page #product-item .form-input .caution, .btn-caution, .btn-primary {
  width: 100%;
  font-family: "Roboto";
  display: grid;
  place-content: center;
  padding: 5px 0px;
  border: 0;
  height: 48px;
  cursor: pointer;
  transition: background-color 200ms, color 200ms;
}

.btn-primary {
  border: 1px solid #AE845F;
  background-color: #AE845F;
  color: #fff;
}
.btn-primary:hover {
  background-color: white !important;
  color: #AE845F;
}

.btn-caution {
  background-color: white !important;
  border: 1px solid #E33131;
  color: #E33131;
  font-size: 14px;
  text-decoration: none;
}
.btn-caution:hover {
  background-color: #E33131 !important;
  color: white;
}

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

.text-black {
  color: #e2e2e2;
}

.text-bold {
  font-weight: 600;
}

h1 {
  font-family: "Playfair Display";
  font-size: 24px;
  margin-bottom: 32px;
}

.d-8-2 {
  display: grid;
  grid-template-columns: 8fr 2fr;
  gap: 24px;
}

.d-1-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

sup {
  font-size: 12px;
  color: #E33131;
}

.input-section {
  margin: 32px 0;
}

.input-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.input-container input,
.input-container select,
.input-container .product-select {
  border: 1px solid #DDD;
  height: 50px;
  padding: 8px;
  background-color: white;
}
.input-container input:focus {
  outline: none;
}

.mt-1 {
  margin-top: 1rem !important;
}

.mt-2 {
  margin-top: 2rem !important;
}

.mt-3 {
  margin-top: 3rem !important;
}

.mt-4 {
  margin-top: 4rem !important;
}

.flex-row {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  justify-content: space-around;
  gap: 1rem;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.w-300 {
  width: 300px;
}

a {
  text-decoration: none;
  color: #222;
}

#home .products-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
  row-gap: 2rem;
  margin: 1rem;
}
#home .products-container .product-card .product-image .add-to-cart, #home .products-container .product-card .product-image .wishlist {
  transition-delay: 200ms;
  transition: background-color 800ms;
}
@media (min-width: 1200px) {
  #home .products-container {
    max-width: 1190px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-inline: auto;
    column-gap: 2rem;
    row-gap: 3rem;
    overflow: hidden;
  }
}
#home .products-container .product-card {
  overflow: hidden;
}
@media (min-width: 1200px) {
  #home .products-container .product-card {
    text-align: center;
  }
}
#home .products-container .product-card .product-image {
  overflow: hidden;
  margin-bottom: 1rem;
  position: relative;
  height: 343px !important;
}
#home .products-container .product-card .product-image img {
  position: relative;
  z-index: 3;
  top: 0;
  height: 343px !important;
  width: 100%;
  object-fit: cover;
  transition: opacity 500ms ease-in-out;
}
@media (min-width: 1200px) {
  #home .products-container .product-card .product-image img {
    height: 343px;
  }
}
#home .products-container .product-card .product-image img:first-of-type + img {
  opacity: 0;
  display: none;
}
@media (min-width: 1200px) {
  #home .products-container .product-card .product-image img:first-of-type + img {
    display: block;
    position: absolute;
    height: 343px !important;
    opacity: 1;
    z-index: 2 !important;
    top: 0;
  }
}
#home .products-container .product-card .product-image .label {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.28px;
  line-height: 25.2px;
  font-family: "Roboto";
  position: absolute;
  left: 15px;
  top: 15px;
  z-index: 4;
  color: rgb(254, 251, 251);
  cursor: default;
}
#home .products-container .product-card .product-image .label span {
  margin-bottom: 5px;
  width: 42px;
  height: 18px;
  display: grid;
  place-content: center;
  cursor: default;
  background-color: rgb(214, 92, 104);
}
#home .products-container .product-card .product-image .label .blue {
  background-color: rgb(34, 54, 104);
  word-wrap: normal;
  font-size: 9px;
}
#home .products-container .product-card .product-image .options-container {
  z-index: 20;
  position: absolute;
  right: 15px;
  top: 15px;
  display: block;
  transition: top 0.5s ease-out, right 0.5s ease-in-out;
}
#home .products-container .product-card .product-image .wishlist {
  z-index: 20;
  position: relative;
  right: -70px;
  background-color: white;
  border-radius: 50%;
  display: grid;
  place-content: center;
  height: 44px;
  width: 44px;
  cursor: pointer;
}
#home .products-container .product-card .product-image .wishlist svg {
  width: 15px;
  height: 15px;
}
#home .products-container .product-card .product-image .wishlist .add-to-wishlist-popup {
  display: grid;
  place-content: center;
  opacity: 0;
  position: absolute;
  z-index: 3;
  height: 30px;
  width: 100px;
  word-wrap: none;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.28px;
  line-height: 12px;
  font-family: "Roboto";
  right: 55px;
  top: 8px;
  background-color: rgb(34, 34, 34);
  color: white;
  transition: opacity 500ms ease-in-out;
}
#home .products-container .product-card .product-image .wishlist .add-to-wishlist-popup:not(:hover) {
  transition: opacity 0;
}
#home .products-container .product-card .product-image .wishlist .add-to-wishlist-popup .triangle {
  position: absolute;
  top: 7.5px;
  right: -7px;
  border-top: 7.5px solid transparent;
  border-bottom: 7.5px solid transparent;
  border-left: 7.5px solid rgb(34, 34, 34);
}
#home .products-container .product-card .product-image .wishlist:hover {
  background-color: rgb(34, 34, 34);
  color: white;
  fill: white;
  opacity: 1 !important;
}
#home .products-container .product-card .product-image .wishlist:hover .add-to-wishlist-popup {
  opacity: 1;
}
#home .products-container .product-card .product-image .add-to-cart {
  opacity: 0;
  position: absolute;
  background-color: white;
  color: #222;
  width: 80%;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.28px;
  line-height: 36px;
  height: 48px;
  bottom: -60px;
  left: 50%;
  transform: translate(-50%, 0);
  display: block;
  font-family: "Roboto";
  display: grid;
  place-content: center;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 5;
  transition: bottom 0.5s ease-out, bottom 0.5s ease-in-out, opacity 500ms ease-in-out;
}
#home .products-container .product-card .product-image .add-to-cart:hover {
  background-color: #222;
  color: white;
}
#home .products-container .product-card .product-description {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
#home .products-container .product-card .product-description p {
  font-family: "Roboto";
}
#home .products-container .product-card .product-description .product-brand {
  color: #AE845F;
  font-size: 12px;
  font-weight: 500;
}
#home .products-container .product-card .product-description .product-name {
  font-size: 14px;
  font-weight: 400;
  color: #222;
  text-align: center;
  cursor: pointer;
}
#home .products-container .product-card .product-description .product-name:hover {
  color: #AE845F;
}
#home .products-container .product-card .product-description .product-price {
  font-size: 18px;
  font-weight: 500;
  color: #222;
}
#home .products-container .product-card .product-description .product-price span {
  font-size: 16px;
  font-weight: 400;
  color: #767676;
  text-decoration: line-through;
}

/* Media Query Mixin */
/* Base */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* HOME */
#hero .banner-image {
  width: 100%;
  height: 100vh;
}
#hero .banner-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

@media (min-width: 1200px) {
  #home #categories-showcase {
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }
}
#home #categories-showcase .category-container {
  height: 40vh;
  margin: 10px 0;
  overflow: hidden;
}
@media (min-width: 1200px) {
  #home #categories-showcase .category-container {
    height: 60vh;
    padding: 0;
    width: 100%;
  }
}
#home #categories-showcase .category-container .card-A {
  transform: scale(1.8);
  object-position: 50% 50%;
}
@media (min-width: 1200px) {
  #home #categories-showcase .category-container .card-A {
    transform: scale(1.5);
    object-position: 75px -45px;
  }
}
#home #categories-showcase .category-container .card-B {
  object-position: 50% 0px;
}
#home #products-container .product-image-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin: 1rem;
}
#home #products-container .product-image-container .product-image img {
  height: 250px !important;
}
#home #products-container .product-image-container .product-image .product-description {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
#home #products-container .product-image-container .product-image .product-description p {
  font-family: "Roboto";
}
#home #products-container .product-image-container .product-image .product-description .product-brand {
  color: #AE845F;
  font-size: 12px;
  font-weight: 500;
}
#home #products-container .product-image-container .product-image .product-description .product-name {
  font-size: 14px;
  font-weight: 400;
  color: #222;
  text-align: center;
}
#home #products-container .product-image-container .product-image .product-description .product-name:hover {
  color: #AE845F;
}
#home #products-container .product-image-container .product-image .product-description .product-price {
  font-size: 18px;
  font-weight: 500;
  color: #222;
}
#home #products-container .product-image-container .product-image .product-description .product-price span {
  font-size: 16px;
  font-weight: 400;
  color: #767676;
  text-decoration: line-through;
}
@media (min-width: 1200px) {
  #home #products-container .product-image-container {
    max-width: 1190px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-inline: auto;
    gap: 1rem;
    overflow: hidden;
  }
  #home #products-container .product-image-container .product-image {
    text-align: center;
  }
  #home #products-container .product-image-container .product-image img {
    width: 350px;
    height: 370px;
  }
}
#home .home-products-container {
  max-width: 100%;
  justify-content: center;
  display: flex;
  gap: 15px;
  margin: 1rem auto;
}
#home .home-products-container .img-square img {
  height: 65px;
  overflow-y: hidden;
  object-fit: cover;
}
@media (min-width: 1200px) {
  #home .home-products-container .img-square img {
    width: 220px;
    height: 220px;
  }
}
@media (min-width: 1200px) {
  #home .home-products-container {
    max-width: 1190px;
  }
}
#home .text-container {
  text-align: center;
}
#home .text-container .home-heading {
  font-size: 48px;
  font-weight: 400;
}
#home .text-container p {
  color: #909090;
  font-size: 16px;
  font-weight: 400;
  font-family: "Roboto";
}
@media (min-width: 1200px) {
  #home .text-container .text-container {
    text-align: center;
  }
}
.br-container {
  display: grid;
  grid-template-columns: 2.8fr 2.5fr 3fr;
  grid-template-rows: 0.4fr 1fr 1fr;
  grid-template-areas: "a h h" "a c d" "a g f";
  row-gap: 1px;
  column-gap: 10px;
  border: 1px solid #EDEDED;
  height: 120px;
  padding-bottom: 10px;
}

.hover:hover {
  cursor: pointer;
}

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

.h {
  grid-area: h;
}

/* .br-container div{
    display: grid;
    place-content: center;
} */
.review-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reviews-container {
  margin-top: 50px;
}

.product-pic {
  grid-area: a;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 5px;
}

.browser-title {
  grid-area: b;
  display: grid;
  font-size: 16px;
  font-weight: 500;
  color: #222;
  letter-spacing: 0.32px;
  margin-top: 15px;
}

.brow-title-top {
  box-sizing: border-box;
  width: 100%;
  color: black;
  background-color: #EDEDED;
  font-family: "Playfair Display";
  font-size: 20px;
  font-weight: 400;
  padding-top: 25px;
  padding-bottom: 25px;
  margin-top: 25px;
  padding-left: 8%;
}

.browser-price {
  grid-area: c;
  font-size: 24px;
  font-weight: 300;
  display: flex;
  align-items: center;
}

.browser-date {
  grid-area: d;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 300;
  justify-content: center;
}

/* .review-top-bar{
    font-family: 'Playfair Display';
    font-weight:400;
} */
.d1 {
  display: none;
}

.e {
  grid-area: e;
}

.browser-cart {
  /* margin-top: 15px; */
  width: 90%;
  height: 30px;
  background-color: #AE845F;
  font-weight: 400;
  font-size: 12px;
  color: white;
  display: grid;
  place-content: center;
}

.browser-icons {
  grid-area: f;
  display: flex !important;
  align-items: center;
  font-size: 16px;
  margin-left: 15px;
  justify-content: center;
}

.ico2 {
  margin-left: 25px;
}

.hidewish {
  display: none;
}

.next-page-container {
  margin-bottom: 50px;
}

@media screen and (min-width: 1200px) {
  /* #hide-filter{
      display: block;
  } */
  .d2 {
    display: none;
  }
  .product {
    text-align: left;
  }
  .ico1 {
    font-size: 18px;
  }
  .ico2 {
    display: none !important;
    font-size: 15px;
  }
  .browser-icons {
    justify-content: center;
    align-items: center;
  }
  .brow-title-top {
    box-sizing: border-box;
  }
  .review-top-bar {
    grid-template-columns: 1.5fr 3fr 1.8fr 4.8fr 1fr;
    text-align: center;
  }
  .review-top-bar div {
    font-family: "Playfair Display";
    font-weight: 400;
  }
  .br-container {
    display: grid;
    grid-template-columns: 1.5fr 3fr 1.8fr 4.8fr 1fr;
    grid-template-rows: 120px;
    grid-template-areas: "a h c g f";
    column-gap: 5px;
  }
  .browser-price {
    display: grid;
    place-content: center;
  }
  .browser-date {
    place-content: unset;
  }
  .h {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .g {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .browser-cart {
    width: 30%;
    height: 48px;
  }
  .browser-icons {
    justify-content: left;
  }
  .hidewish {
    display: grid;
  }
}
/* Media Query Mixin */
nav {
  position: relative;
  z-index: 30;
  border-bottom: 1px solid;
  border-color: #EEE;
}
@media screen and (max-width: 1200px) {
  nav {
    max-width: 95%;
    margin-inline: auto;
  }
}
@media screen and (max-width: 768px) {
  nav {
    max-width: 95%;
    margin-inline: auto;
  }
}
@media screen and (max-width: 425px) {
  nav {
    max-width: 95%;
    margin-inline: auto;
  }
}
@media screen and (max-width: 360px) {
  nav {
    max-width: 95%;
    margin-inline: auto;
  }
}
nav .nav {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: 0.7fr 3fr 1fr;
  align-items: center;
  justify-items: center;
}
@media screen and (max-width: 1200px) {
  nav .nav {
    grid-template-rows: auto 1fr;
    grid-template-areas: ". . ." "a a a";
  }
}
nav .nav i:nth-child(1) {
  display: block;
  font-size: 18px;
}
nav .nav .nav-links-container .nav-links {
  display: flex;
  flex-direction: column;
  gap: 30px;
  overflow-y: scroll;
  padding: 0px 5px;
}
nav .nav .nav-links-container .nav-links > a {
  text-transform: uppercase;
}
nav .nav .nav-links-container .nav-links .option-popup {
  display: none;
}
nav .nav .nav-links-container .nav-links .option-popup div {
  display: flex;
  flex-direction: column;
  margin: 0px 15px;
  gap: 20px;
}
nav .nav .nav-links-container .nav-links .option-popup div a {
  text-align: left;
}
nav .nav .nav-links-container .nav-links .option-popup div a {
  border-bottom: 1px solid #eee;
  padding: 8px 0;
}
@media (min-width: 1200px) {
  nav .nav .nav-links-container .nav-links .option-popup div a {
    border-bottom: 0;
    padding: 0;
  }
}
nav .nav .nav-links-container a .optn-title {
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
nav .nav .nav-links-container .optn-title-mob {
  border-bottom: 1px solid #eee;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 1200px) {
  nav .nav .nav-links-container .optn-title-mob {
    display: none;
  }
}
nav .nav .nav-logo {
  width: 100%;
  display: grid;
  place-content: flex-start;
}
nav .nav .nav-logo img {
  width: 160px;
  object-position: 0px -5px;
}
nav .nav .nav-icons {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}
nav .nav .nav-icons #search-item {
  display: none;
}
nav .nav .nav-icons i:nth-child(2),
nav .nav .nav-icons i:nth-child(3) {
  display: none;
}
nav .nav .nav-icons i:nth-child(4),
nav .nav .nav-icons i:nth-child(5) {
  font-size: 22px;
}
@media (min-width: 1200px) {
  nav .nav {
    display: grid;
    grid-template-columns: 2fr 5fr 3fr;
    max-width: 1190px;
    margin-inline: auto;
    justify-items: center;
    align-items: center;
    column-gap: 35px;
    padding: 6px 0;
    margin-bottom: 1px;
    padding-inline: 30px;
  }
  nav .nav .nav-icons #search-item {
    display: block;
  }
  nav .nav .nav-icons i:nth-child(2),
  nav .nav .nav-icons i:nth-child(3) {
    display: block;
  }
  nav .nav .nav-icons input:focus {
    outline: none;
  }
}
nav .nav .nav-links-container {
  display: none;
  width: 100%;
  padding-inline: 20px;
}
@media (min-width: 1200px) {
  nav .nav .nav-links-container {
    display: block;
  }
  nav .nav .nav-links-container .nav-links {
    overflow: unset;
  }
}
nav .nav .nav-links-container .nav-links {
  z-index: 8;
  position: fixed;
  background-color: white;
  width: 80vw;
  height: 100vh;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem;
  border: 1px solid black;
}
@media (min-width: 1200px) {
  nav .nav .nav-links-container .nav-links {
    position: static;
    display: flex;
    flex-direction: row;
    justify-content: start;
    padding: 0;
    height: 0;
    background-color: rgba(0, 0, 0, 0);
    align-items: center;
    width: 100%;
    margin-bottom: 0;
    height: auto;
    border: none;
  }
}
nav .nav .nav-links-container .nav-links a {
  font-size: 16px;
}
@media (min-width: 1200px) {
  nav .nav .nav-links-container .nav-links a {
    text-align: center;
    padding: 1rem 0;
    margin: 0;
  }
}
nav .nav .nav-icons svg {
  width: 1.4rem;
  height: 1.4rem;
}
nav .nav .nav-icons .cart-icon-container {
  position: relative;
}
nav .nav .nav-icons .cart-icon-container .cart-number {
  background-color: #ae845f;
  cursor: pointer;
  height: 17px;
  width: 17px;
  font-size: 10px !important;
  color: #fff;
  font-weight: 600;
  border-radius: 50%;
  position: absolute;
  right: -10px;
  top: -5px;
  display: grid;
  place-content: center;
}
nav .nav .nav-icons .wishlist-icon-container {
  position: relative;
}
nav .nav .nav-icons .wishlist-icon-container .wishlist-number {
  background-color: #ae845f;
  cursor: pointer;
  height: 17px;
  width: 17px;
  font-size: 10px !important;
  color: #fff;
  font-weight: 600;
  border-radius: 50%;
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-content: center;
}
@media (min-width: 1200px) {
  nav .nav .nav-icons {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
    font-size: 20px;
  }
  nav .nav .nav-icons svg {
    width: 1.4rem;
    height: 1.4rem;
  }
  nav .nav .nav-icons svg:nth-child(5) {
    width: 1.4rem;
    height: 1.4rem;
  }
  nav .nav .nav-icons .nav-search-container {
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 5px;
    padding: 3px 10px;
  }
  nav .nav .nav-icons .nav-search-container I {
    color: #DDD;
  }
  nav .nav .nav-icons .nav-search-container input {
    border: none;
    color: #B4B4B4;
  }
  nav .nav .nav-icons .nav-search-container #nav-search-item {
    width: 200px;
    height: 30px;
    border-radius: 20px;
    border-color: #222;
    padding: 15px;
    font-size: 15px;
  }
  nav .nav .nav-icons .nav-search-container i {
    margin: 0 !important;
  }
  nav .nav .nav-icons .nav-icons-container {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  nav .nav .nav-icons .profile-icon-container i {
    font-size: 20px !important;
  }
  nav .nav .nav-icons button, nav .nav .nav-icons #product-list #product-input .caution, #product-list #product-input nav .nav .nav-icons .caution, nav .nav .nav-icons #product-item-update-page #product-item .form-input .caution, #product-item-update-page #product-item .form-input nav .nav .nav-icons .caution, nav .nav .nav-icons .btn-primary, nav .nav .nav-icons .btn-caution {
    background-color: unset;
  }
  nav .nav .nav-icons i:hover {
    color: #ae845f;
    cursor: pointer;
  }
  nav .nav .nav-icons svg:hover {
    fill: #ae845f !important;
    cursor: pointer;
  }
  nav .nav .nav-icons .cart-number {
    top: -3px !important;
    right: -10px !important;
  }
  nav .nav .nav-icons .wishlist-number {
    top: -2px !important;
    right: -6px !important;
  }
}
nav .nav .nav-logo {
  width: 160px;
  object-fit: cover;
}
nav .nav .nav-logo img {
  width: 100%;
  object-position: 0px -6px;
}
@media (min-width: 1200px) {
  nav .nav #nav-cat1-optn {
    left: 226px;
    top: 65px;
  }
  nav .nav #nav-cat1-optn .option-up div > a {
    display: none;
  }
}
@media (min-width: 1200px) {
  nav .nav #nav-cat2-optn {
    left: 330px;
    top: 65px;
  }
  nav .nav #nav-cat2-optn .option-up div > a {
    display: none;
  }
}
nav .nav #nav-cat3-optn .shop-optn-container div {
  display: none;
}
nav .nav #nav-cat3-optn .shop-optn-container .shop-mobile {
  display: flex;
}
@media (min-width: 1200px) {
  nav .nav #nav-cat3-optn {
    top: 65px;
    left: 225px;
  }
  nav .nav #nav-cat3-optn .option-up div > a {
    display: none;
  }
  nav .nav #nav-cat3-optn .shop-optn-container {
    display: grid;
    grid-template-columns: 205px 200px 175px;
    column-gap: 5px;
    padding: 10px;
  }
  nav .nav #nav-cat3-optn .shop-optn-container > a {
    display: none;
  }
  nav .nav #nav-cat3-optn .shop-optn-container a {
    font-size: 16px;
    padding: 0;
    place-content: unset;
  }
  nav .nav #nav-cat3-optn .shop-optn-container .shop-mobile {
    display: none;
  }
  nav .nav #nav-cat3-optn .shop-optn-container div {
    display: grid;
  }
  nav .nav #nav-cat3-optn .shop-optn-container div a {
    text-align: left;
  }
  nav .nav #nav-cat3-optn .shop-optn-container div .shop-title:hover {
    color: #222;
    cursor: auto;
  }
}
@media (min-width: 1200px) {
  nav .nav #nav-cat4-optn {
    top: 65px;
    left: 515px;
  }
  nav .nav #nav-cat4-optn .option-up div > a {
    display: none;
  }
}
@media (min-width: 1200px) {
  nav .nav #nav-cat5-optn {
    top: 65px;
    left: 636px;
  }
  nav .nav #nav-cat5-optn .option-up div > a {
    display: none;
  }
}
nav .mobile-search-bar {
  grid-area: a;
  width: 100%;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-inline: auto;
  border: 1px solid #C5C5C5;
  border-radius: 7px;
  padding: 10px;
}
nav .mobile-search-bar input {
  width: 95%;
  padding: 2px;
  border: none;
  color: #C5C5C5;
}
nav .mobile-search-bar input:focus {
  outline: none;
}
nav .mobile-search-bar i {
  color: #ddd;
}
@media (min-width: 1200px) {
  nav .mobile-search-bar {
    display: none;
  }
}

@media (min-width: 1200px) {
  #ham-icon {
    display: none !important;
  }
}

a {
  text-decoration: none;
  color: #222;
}
a:hover {
  cursor: pointer;
  color: #ae845f;
}

.option-popup div a:nth-child(1) {
  display: none;
}
@media (min-width: 1200px) {
  .option-popup {
    display: none;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.97);
    left: 380px;
    top: 64px;
    overflow: hidden;
  }
  .option-popup div {
    display: flex;
    flex-direction: column;
    padding: 10px 18px;
  }
  .option-popup div a {
    padding: 10px 30px;
    place-content: center;
  }
  .option-popup .shop-mobile {
    display: none;
  }
}

h1 {
  font-size: 18px;
}

#hero .banner-image {
  width: 100%;
  height: 100vh;
}
#hero .banner-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

a {
  text-decoration: none;
}

.nav-search-container {
  display: none;
}
@media (min-width: 1200px) {
  .nav-search-container {
    display: flex;
  }
}

.login-with-google-btn {
  transition: background-color 0.3s, box-shadow 0.3s;
  padding: 12px 16px 12px 42px;
  border: none;
  border-radius: 3px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.25);
  color: #757575;
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
  background-color: white;
  background-repeat: no-repeat;
  background-position: 16px 14px;
  min-width: 120px;
}
.login-with-google-btn:hover {
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25);
}
.login-with-google-btn:active {
  background-color: #eeeeee;
}
.login-with-google-btn:focus {
  outline: none;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 3px #c8dafc;
}
.login-with-google-btn:disabled {
  filter: grayscale(100%);
  background-color: #ebebeb;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

.profile-icon-container {
  display: none;
}
@media (min-width: 1200px) {
  .profile-icon-container {
    display: block;
  }
}

.banner {
  height: 256px;
  width: 100%;
  padding-top: 71px;
  padding-bottom: 76px;
  background-image: url("/static/images/banner_raw.png");
  object-fit: contain;
}
.banner .page-title {
  font-family: "Playfair Display";
  font-weight: 500;
  color: white;
  font-size: 55px;
  text-align: center;
}
.banner .page-breadcrumbs {
  margin-top: 20px;
  text-align: center;
  color: white;
  line-height: 25px;
  font-weight: 400;
  font-size: 14px;
  font-family: "Roboto";
}
.banner .page-breadcrumbs .heading {
  color: white;
  text-decoration: none;
}
.banner .page-breadcrumbs .heading:hover {
  color: #ffbc00;
}

.row-table .row-with-img {
  margin-top: 12px;
  border: 1.5px solid #DDDDDD;
  display: grid;
  grid-template-columns: 3fr 14fr 3fr;
  grid-column-gap: 24px;
  padding: 12px 24px;
}
.row-table .row-with-img .img-container {
  aspect-ratio: 1;
}
.row-table .row-with-img .img-container img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.row-table .row-with-img .product-details {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.row-table .row-with-img .product-details span {
  font-size: 12px;
  color: #767676;
  margin-right: 1rem;
}
.row-table .row-with-img .product-details h2 {
  font-size: 18px;
  padding: 0;
  margin-bottom: 0;
}
.row-table .row-with-img .product-pack-container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.row-table .row-with-img .product-pack-container div {
  padding-right: 3px;
}

button, #product-list #product-input .caution, #product-item-update-page #product-item .form-input .caution, .btn-primary, .btn-caution {
  width: 100%;
  font-family: "Roboto";
  display: grid;
  place-content: center;
  padding: 5px 0px;
  border: 0;
  height: 48px;
  cursor: pointer;
  transition: background-color 200ms, color 200ms;
}

.btn-primary {
  border: 1px solid #AE845F;
  background-color: #AE845F;
  color: #fff;
}
.btn-primary:hover {
  background-color: white !important;
  color: #AE845F;
}

.btn-caution {
  background-color: white !important;
  border: 1px solid #E33131;
  color: #E33131;
  font-size: 14px;
  text-decoration: none;
}
.btn-caution:hover {
  background-color: #E33131 !important;
  color: white;
}

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

.text-black {
  color: #e2e2e2;
}

.text-bold {
  font-weight: 600;
}

h1 {
  font-family: "Playfair Display";
  font-size: 24px;
  margin-bottom: 32px;
}

.d-8-2 {
  display: grid;
  grid-template-columns: 8fr 2fr;
  gap: 24px;
}

.d-1-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

sup {
  font-size: 12px;
  color: #E33131;
}

.input-section {
  margin: 32px 0;
}

.input-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.input-container input,
.input-container select,
.input-container .product-select {
  border: 1px solid #DDD;
  height: 50px;
  padding: 8px;
  background-color: white;
}
.input-container input:focus {
  outline: none;
}

.mt-1 {
  margin-top: 1rem !important;
}

.mt-2 {
  margin-top: 2rem !important;
}

.mt-3 {
  margin-top: 3rem !important;
}

.mt-4 {
  margin-top: 4rem !important;
}

.flex-row {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  justify-content: space-around;
  gap: 1rem;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.w-300 {
  width: 300px;
}

a {
  text-decoration: none;
  color: #222;
}

.messages {
  list-style: none;
  margin: 1rem auto;
  width: 90%;
}
@media screen and (min-width: 1200px) {
  .messages {
    max-width: 1190px;
  }
}
.messages li {
  font-size: 14px;
  font-family: "Playfair Display";
  background-color: #F5F3F2;
  padding: 15px;
  margin-top: 15px;
}
.messages li a {
  color: black;
  text-decoration: underline;
  font-size: 14px;
  font-weight: 400;
}
.messages li a:hover {
  color: #9f876a;
}
.messages .error {
  color: #c50000;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.row-table .row-with-img {
  margin-top: 12px;
  border: 1.5px solid #DDDDDD;
  display: grid;
  grid-template-columns: 3fr 14fr 3fr;
  grid-column-gap: 24px;
  padding: 12px 24px;
}

.row-table .row-with-img .img-container {
  aspect-ratio: 1;
}

.row-table .row-with-img .img-container img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.row-table .row-with-img .product-details {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.row-table .row-with-img .product-details span {
  font-size: 12px;
  color: #767676;
  margin-right: 1rem;
}

.row-table .row-with-img .product-details h2 {
  font-size: 18px;
  padding: 0;
  margin-bottom: 0;
}

.row-table .row-with-img .product-pack-container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.row-table .row-with-img .product-pack-container div {
  padding-right: 3px;
}

button, #product-list #product-input .caution, #product-item-update-page #product-item .form-input .caution,
.btn-primary,
.btn-caution {
  width: 100%;
  font-family: "Roboto";
  display: grid;
  place-content: center;
  padding: 5px 0px;
  border: 0;
  height: 48px;
  transition: background-color 200ms, color 200ms;
}

.btn-primary {
  border: 1px solid #AE845F;
  background-color: #AE845F;
  color: #fff;
}

.btn-primary:hover {
  background-color: white !important;
  color: #AE845F;
}

.btn-caution {
  background-color: white !important;
  border: 1px solid #E33131;
  color: #E33131;
  font-size: 14px;
  text-decoration: none;
}

.btn-caution:hover {
  background-color: #E33131 !important;
  color: white;
}

.text-right {
  text-align: right !important;
}

.text-black {
  color: #e2e2e2 !important;
}

.text-bold {
  font-weight: 600;
}

h1 {
  font-family: "Playfair Display";
  font-size: 24px;
}

.d-8-2 {
  display: grid;
  grid-template-columns: 8fr 2fr;
  gap: 24px;
}

.d-1-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

sup {
  font-size: 12px;
  color: #E33131;
}

.input-section {
  margin: 32px 0;
}

.input-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-container input,
.input-container select,
.input-container .product-select {
  border: 1px solid #DDD;
  height: 50px;
  padding: 8px;
  background-color: white;
}

.input-container input:focus {
  outline: none;
}

.mt-1 {
  margin-top: 1rem !important;
}

.mt-2 {
  margin-top: 2rem !important;
}

.mt-3 {
  margin-top: 3rem !important;
}

.mt-4 {
  margin-top: 4rem !important;
}

.flex-row {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  justify-content: space-around;
  gap: 1rem;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.w-300 {
  width: 300px;
}

a {
  text-decoration: none;
  color: #222;
}

footer {
  grid-area: footer;
  background-color: #F5F3F2;
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  font-family: "Roboto";
}
footer .footer-logo {
  width: 150px;
  height: 100px;
  object-fit: contain;
}
footer .footer-links {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
@media screen and (max-width: 510px) {
  footer .footer-links {
    flex-wrap: wrap;
    justify-content: center;
  }
}
footer .footer-icons {
  display: flex;
  gap: 40px;
}
footer .footer-icons img {
  width: 20px;
  aspect-ratio: 1;
}
footer a:hover {
  color: #ae845f;
}

/*# sourceMappingURL=footer.css.map */
#orders-container .grid-container {
  padding-top: 30px;
}
#orders-container .grid-container .search-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "search-bar search-bar" "filter-container filter-container";
}
#orders-container .grid-container .search-container .search-bar {
  grid-area: search-bar;
  display: flex;
  justify-content: space-between;
}
#orders-container .grid-container .search-container .search-bar .filter-icon {
  height: 45px;
  aspect-ratio: 1;
  background-color: white;
  border: 1px solid black;
  transition: background-color 200ms;
  display: inline-block;
}
#orders-container .grid-container .search-container .search-bar .input-group {
  display: flex;
  height: 48px;
}
#orders-container .grid-container .search-container .search-bar .input-group .search-input {
  font-family: "Roboto";
  border: 1px solid #EEEEEE;
}
#orders-container .grid-container .search-container .search-bar .input-group .search-button {
  background-color: #AE845F;
  color: white;
  border: 1px solid #AE845F;
  width: 76px;
}
#orders-container .grid-container .search-container .search-bar .input-group .search-button2 {
  display: none;
}
#orders-container .grid-container .search-container .filter-container {
  grid-area: filter-container;
  margin-top: 20px;
  display: none;
}
#orders-container .grid-container .search-container .filter-container .filters {
  font-family: "Playfair";
  font-size: 20px;
  padding: 10px 20px;
  margin: 0;
  background-color: #EEEEEE;
  border: 1px solid #EEEEEE;
}
#orders-container .grid-container .search-container .filter-container .search-date {
  background-color: #F8F8F8;
  margin: 0;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "date-text date-text" "start-date end-date" "apply apply";
}
#orders-container .grid-container .search-container .filter-container .search-date .date-text {
  grid-area: date-text;
  font-family: "Playfair";
  margin: 0;
  padding: 10px;
  font-size: large;
}
#orders-container .grid-container .search-container .filter-container .search-date .start-date {
  margin: 10px;
  grid-area: start-date;
  display: grid;
  place-content: center;
}
#orders-container .grid-container .search-container .filter-container .search-date .start-date input {
  padding: 0;
  margin: 0;
  width: 40vw;
  height: 40px;
  font-family: "Roboto";
  border: 1px solid #eeeeee;
}
#orders-container .grid-container .search-container .filter-container .search-date .end-date {
  grid-area: end-date;
  display: grid;
  place-content: center;
}
#orders-container .grid-container .search-container .filter-container .search-date .end-date input {
  padding: 0;
  margin: 0;
  width: 40vw;
  height: 40px;
  font-family: "Roboto";
  border: 1px solid #eeeeee;
}
#orders-container .grid-container .search-container .filter-container .search-date .apply {
  margin: 10px 30px;
  grid-area: apply;
  display: grid;
  place-content: center;
}
#orders-container .grid-container .search-container .filter-container .search-date .apply button, #orders-container .grid-container .search-container .filter-container .search-date .apply #product-list #product-input .caution, #product-list #product-input #orders-container .grid-container .search-container .filter-container .search-date .apply .caution, #orders-container .grid-container .search-container .filter-container .search-date .apply #product-item-update-page #product-item .form-input .caution, #product-item-update-page #product-item .form-input #orders-container .grid-container .search-container .filter-container .search-date .apply .caution, #orders-container .grid-container .search-container .filter-container .search-date .apply .btn-primary, #orders-container .grid-container .search-container .filter-container .search-date .apply .btn-caution {
  text-align: center;
  height: 40px;
  background-color: #AE845F;
  color: white;
  border: 1px solid #AE845F;
  width: 88vw;
}
#orders-container .grid-container .order-container .order-heading {
  background-color: #EDEDED;
  font-weight: 500;
  font-family: "Playfair";
  padding: 15px;
  font-size: large;
}
#orders-container .grid-container .order-container .table-header {
  display: none;
}
#orders-container .grid-container .order-container .table-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas: "id . total" "orders orders ." "status . date";
  border: 2px solid #EEEEEE;
  padding: 10px;
  font-family: "Roboto", sans-serif;
  margin-bottom: 15px;
}
#orders-container .grid-container .order-container .table-row .id {
  grid-area: id;
  color: #767676;
}
#orders-container .grid-container .order-container .table-row .total {
  grid-area: total;
  text-align: right;
  color: #222222;
  font-weight: 600;
}
#orders-container .grid-container .order-container .table-row .orders {
  padding-top: 14px;
  grid-area: orders;
  text-align: left;
}
#orders-container .grid-container .order-container .table-row .status {
  grid-area: status;
}
#orders-container .grid-container .order-container .table-row .date {
  grid-area: date;
  text-align: right;
  color: #767676;
}
#orders-container .grid-container .order-container .table-row .success {
  background-color: #306A52;
  border: 2px solid #306A52;
  height: 25px;
  width: 80px;
  color: white;
  text-align: center;
  font-size: 11px;
  font-weight: 400;
}
#orders-container .grid-container .order-container .table-row .cancelled {
  background-color: #D65C68;
  border: 2px solid #D65C68;
  height: 25px;
  width: 80px;
  color: white;
  text-align: center;
  font-size: 11px;
  font-weight: 400;
}
#orders-container .grid-container .order-container .table-row .orders {
  color: #222222;
  font-weight: 700;
}

@media (min-width: 1000px) {
  #orders-container .grid-container {
    display: grid;
    grid-template-columns: 329px 3fr;
    grid-template-areas: "search-container order-container";
    column-gap: 4rem;
    margin: 20px;
  }
  #orders-container .grid-container .search-container {
    grid-area: search-container;
    display: block;
  }
  #orders-container .grid-container .search-container .search-bar .input-group .search-input {
    width: 208px;
  }
  #orders-container .grid-container .search-container .search-bar .input-group .search-button2 {
    display: block;
    background-color: #AE845F;
    color: white;
    border: 1px solid #AE845F;
    width: 121px;
  }
  #orders-container .grid-container .search-container .search-bar .input-group .search-button {
    display: none;
  }
  #orders-container .grid-container .search-container .search-bar .filter-icon {
    display: none;
  }
  #orders-container .grid-container .search-container .filter-container {
    width: 329px;
    height: 313px;
    display: block !important;
  }
  #orders-container .grid-container .search-container .filter-container .filters {
    padding-left: 20px;
  }
  #orders-container .grid-container .search-container .filter-container .search-date {
    width: 310px;
  }
  #orders-container .grid-container .search-container .filter-container .search-date .start-date input {
    width: 120px;
    height: 40px;
    font-family: "Roboto";
    border: 1px solid #eeeeee;
  }
  #orders-container .grid-container .search-container .filter-container .search-date .end-date input {
    width: 120px;
    height: 40px;
    font-family: "Roboto";
    border: 1px solid #eeeeee;
  }
  #orders-container .grid-container .search-container .filter-container .search-date .apply button, #orders-container .grid-container .search-container .filter-container .search-date .apply #product-list #product-input .caution, #product-list #product-input #orders-container .grid-container .search-container .filter-container .search-date .apply .caution, #orders-container .grid-container .search-container .filter-container .search-date .apply #product-item-update-page #product-item .form-input .caution, #product-item-update-page #product-item .form-input #orders-container .grid-container .search-container .filter-container .search-date .apply .caution, #orders-container .grid-container .search-container .filter-container .search-date .apply .btn-primary, #orders-container .grid-container .search-container .filter-container .search-date .apply .btn-caution {
    text-align: center;
    height: 40px;
    background-color: #AE845F;
    color: white;
    border: 1px solid #AE845F;
    width: 275px;
  }
  #orders-container .grid-container .order-container {
    grid-area: order-container;
  }
  #orders-container .grid-container .order-container .order-heading {
    display: none;
    margin-right: 50px;
  }
  #orders-container .grid-container .order-container .table-header {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
    grid-template-areas: "id order total date status";
    font-size: 27px;
    background-color: #EDEDED;
    gap: 5px;
    font-weight: 500;
  }
  #orders-container .grid-container .order-container .table-header .id {
    padding-left: 50px;
    text-align: left;
    padding-left: 10px;
  }
  #orders-container .grid-container .order-container .table-header .date {
    text-align: center;
  }
  #orders-container .grid-container .order-container .table-header .total {
    text-align: right;
  }
  #orders-container .grid-container .order-container .table-header .status {
    text-align: right;
    padding-right: 20px;
  }
  #orders-container .grid-container .order-container .table-row {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "id orders total date status";
    margin: 0;
    border: 1px solid #EEEEEE;
  }
  #orders-container .grid-container .order-container .table-row .id {
    text-align: left;
    padding-left: 10px;
    font-weight: 600;
    color: #1E1E1E;
  }
  #orders-container .grid-container .order-container .table-row .date {
    text-align: center;
  }
  #orders-container .grid-container .order-container .table-row .status {
    text-align: right;
  }
  #orders-container .grid-container .order-container .table-row .total {
    text-align: right;
  }
  #orders-container .grid-container .order-container .next-page-container {
    margin-top: 30px;
  }
}
.pagination-container {
  text-align: center;
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 100px;
  text-decoration: none !important;
}
.pagination-container .pagination-btn {
  background-color: white;
  color: #AE845F;
  border: 1px solid #AE845F;
  font-size: 14px;
  font-weight: 400;
  justify-content: center;
  width: 40px;
  line-height: 36px;
}
.pagination-container .current {
  color: white;
  background-color: #AE845F;
  border: 1px solid #AE845F;
}

.product-inventory-container {
  box-sizing: border-box;
  font-family: "Roboto";
}
.product-inventory-container .product-record .search-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}
.product-inventory-container .product-record .search-container .filter-icon {
  height: 50px;
  border: 2px solid #B4B4B4;
  font-size: 25px;
  width: 50px;
  text-align: center;
  display: grid;
  place-content: center;
}
.product-inventory-container .product-record .search-container .search-bar {
  display: flex;
  flex-direction: row;
}
.product-inventory-container .product-record .search-container .search-bar .search-input input {
  height: 46px;
  border: 2px solid #B4B4B4;
  padding-left: 10px;
}
.product-inventory-container .product-record .search-container .search-bar .search-button .desktop {
  display: none;
}
.product-inventory-container .product-record .search-container .search-bar .search-button .mobile {
  background-color: #AE845F;
  border: 5px solid #AE845F;
  height: 52px;
  color: white;
  width: 50px;
}
.product-inventory-container .product-record .product-details {
  display: none;
}
.product-inventory-container .product-record .product-details .dispatched-details .heading {
  background-color: #EEEEEE;
  font-family: "Playfair Display";
  text-align: start;
  font-size: 20px;
  border: 2px solid #EEEEEE;
  height: 45px;
  padding-top: 16px;
  padding-left: 10px;
}
.product-inventory-container .product-record .product-details .dispatched-details .heading P {
  margin: 0;
}
.product-inventory-container .product-record .product-details .dispatched-details .details {
  line-height: 20px;
  text-align: center;
}
.product-inventory-container .product-record .product-details .ordered-details .heading {
  background-color: #EEEEEE;
  font-family: "Playfair Display";
  text-align: start;
  font-size: 20px;
  height: 45px;
  padding-top: 16px;
  border: 2px solid #EEEEEE;
  padding-left: 10px;
}
.product-inventory-container .product-record .product-details .ordered-details .heading P {
  margin: 0;
}
.product-inventory-container .product-record .product-details .ordered-details .details {
  line-height: 20px;
  text-align: center;
}
.product-inventory-container .product-record .product-details .delivered-details .heading {
  background-color: #EEEEEE;
  font-family: "Playfair Display";
  text-align: start;
  font-size: 20px;
  border: 2px solid #EEEEEE;
  height: 45px;
  padding-top: 16px;
  padding-left: 10px;
}
.product-inventory-container .product-record .product-details .delivered-details .heading P {
  margin: 0;
}
.product-inventory-container .product-record .product-details .delivered-details .details {
  line-height: 20px;
  text-align: center;
}
.product-inventory-container .product-container {
  padding: 5px;
  border: 1px solid #EEEEEE;
}
.product-inventory-container .product-container .product-card {
  display: flex;
  flex-direction: column;
}
.product-inventory-container .product-container .product-card .product-name-details {
  display: flex;
  flex-direction: row;
}
.product-inventory-container .product-container .product-card .product-name-details .product-img {
  display: inline-block;
}
.product-inventory-container .product-container .product-card .product-name-details .product-img img {
  width: 70px;
  height: 70px;
  padding: 10px;
}
.product-inventory-container .product-container .product-card .product-name-details .product-name {
  display: inline-block;
  padding-top: 10px;
}
.product-inventory-container .product-container .product-card .product-name-details .product-name p {
  margin: 0;
}
.product-inventory-container .product-container .product-card .product-name-details .product-name .product-price {
  font-family: "Roboto";
  font-size: 23px;
  padding-top: 10px;
}
.product-inventory-container .product-container .product-card .product-name-details .product-name .product-price p {
  margin: 0;
}
.product-inventory-container .product-container .product-card .goods-info .goods-details {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.product-inventory-container .product-container .product-card .goods-info .goods-details .stock-info {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.product-inventory-container .product-container .product-card .goods-info .goods-details .stock-info p {
  margin: 0;
  padding-top: 5px;
}
.product-inventory-container .product-container .product-card .goods-info .goods-details .stock-info .bold-text {
  font-weight: bold;
}
.product-inventory-container .product-container .product-card .goods-info .goods-details .dispatch-info {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.product-inventory-container .product-container .product-card .goods-info .goods-details .dispatch-info p {
  margin: 0;
  padding-top: 5px;
}
.product-inventory-container .product-container .product-card .goods-info .goods-details .dispatch-info .bold-text {
  font-weight: bold;
}
.product-inventory-container .product-container .product-card .goods-info .goods-details .order-info {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.product-inventory-container .product-container .product-card .goods-info .goods-details .order-info p {
  margin: 0;
  padding-top: 5px;
}
.product-inventory-container .product-container .product-card .goods-info .goods-details .order-info .bold-text {
  font-weight: bold;
}
.product-inventory-container .product-container .product-card .goods-info .product-graph {
  width: 80%;
  border: 1px solid #AE845F;
  margin: 7%;
}
.product-inventory-container .product-container .product-card .goods-info .product-graph .product-progress {
  width: 80%;
  background-color: #AE845F;
}
.product-inventory-container .product-container .product-card .goods-info .product-graph .product-progress p {
  margin: 0;
  color: white;
  text-align: center;
  font-family: "Roboto";
  font-size: 16px;
  padding: 4px;
}
.product-inventory-container .next-page-details .next-page-container {
  text-align: center;
}
.product-inventory-container .next-page-details .next-page-container .next-page-btn {
  color: white;
  background-color: #AE845F;
  border: 1px solid #AE845F;
  font-size: 14px;
  font-weight: 400;
  justify-content: center;
  width: 40px;
  line-height: 36px;
}

@media (min-width: 1000px) {
  .product-inventory-container {
    max-width: 1190px;
    margin: 20px 10%;
    display: grid;
    grid-template-columns: 300px 3fr;
    gap: 30px;
    grid-template-areas: "product-record product-container";
  }
  .product-inventory-container .product-record {
    grid-area: product-record;
  }
  .product-inventory-container .product-record .search-container {
    padding: 0;
  }
  .product-inventory-container .product-record .search-container .filter-icon {
    display: none;
  }
  .product-inventory-container .product-record .search-container .search-bar .search-input {
    width: 200px;
    padding: 0px;
  }
  .product-inventory-container .product-record .search-container .search-bar .search-input input {
    width: 100%;
    padding-left: 10px;
    height: 46px;
  }
  .product-inventory-container .product-record .search-container .search-bar .search-button {
    width: 100px;
  }
  .product-inventory-container .product-record .search-container .search-bar .search-button .desktop {
    display: block;
    background-color: #AE845F;
    border: 1px solid #AE845F;
    color: white;
    height: 52px;
    width: 100%;
    margin: 0;
  }
  .product-inventory-container .product-record .search-container .search-bar .search-button .desktop p {
    width: 50px;
    margin: 0;
    text-align: center;
    padding-left: 12px;
  }
  .product-inventory-container .product-record .search-container .search-bar .search-button .mobile {
    display: none;
  }
  .product-inventory-container .product-record .product-details {
    display: block;
    margin-top: 30px;
  }
  .product-inventory-container .product-record .product-details .dispatched-details {
    background-color: #f5f5f5;
  }
  .product-inventory-container .product-record .product-details .dispatched-details .heading {
    height: 39px;
    padding: 10px 0px 0px 10px;
  }
  .product-inventory-container .product-record .product-details .dispatched-details .details {
    padding: 10px 10px;
    background-color: #f5f5f5;
  }
  .product-inventory-container .product-record .product-details .dispatched-details .details p {
    font-size: 14px;
    margin: 0;
    font-weight: lighter;
  }
  .product-inventory-container .product-record .product-details .ordered-details {
    background-color: #f5f5f5;
  }
  .product-inventory-container .product-record .product-details .ordered-details .heading {
    height: 39px;
    padding: 10px 0px 0px 10px;
  }
  .product-inventory-container .product-record .product-details .ordered-details .details {
    padding: 10px 10px;
    background-color: #f5f5f5;
  }
  .product-inventory-container .product-record .product-details .ordered-details .details p {
    font-size: 14px;
    margin: 0;
    font-weight: lighter;
  }
  .product-inventory-container .product-record .product-details .delivered-details {
    background-color: #f5f5f5;
  }
  .product-inventory-container .product-record .product-details .delivered-details .heading {
    height: 39px;
    padding: 10px 0px 0px 10px;
  }
  .product-inventory-container .product-record .product-details .delivered-details .details {
    padding: 10px 10px;
    background-color: #f5f5f5;
  }
  .product-inventory-container .product-record .product-details .delivered-details .details p {
    font-size: 14px;
    margin: 0;
    font-weight: lighter;
  }
  .product-inventory-container .product-container {
    grid-area: product-container;
    border: 1px solid white;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 20px;
    column-gap: 20px;
  }
  .product-inventory-container .product-container .product-card {
    width: 228px;
    border: 1px solid #AE845F;
    height: 337px;
    align-self: center;
    justify-self: center;
  }
  .product-inventory-container .product-container .product-card .product-name-details {
    display: flex;
    flex-direction: column;
  }
  .product-inventory-container .product-container .product-card .product-name-details .product-img img {
    width: 100%;
    height: 126px;
    padding: 0px;
  }
  .product-inventory-container .product-container .product-card .product-name-details .product-name {
    padding: 10px;
    font-family: "Roboto";
    font-size: 15px;
  }
  .product-inventory-container .product-container .product-card .product-name-details .product-name .product-price {
    font-family: "Roboto";
    font-size: 17px;
    font-weight: bold;
  }
  .product-inventory-container .product-container .product-card .goods-info {
    display: flex;
    flex-direction: column-reverse;
  }
  .product-inventory-container .product-container .product-card .goods-info .goods-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 10px;
    align-items: flex-start;
  }
  .product-inventory-container .product-container .product-card .goods-info .goods-details .stock-info {
    display: flex;
    flex-direction: row;
    gap: 3px;
  }
  .product-inventory-container .product-container .product-card .goods-info .goods-details .stock-info p {
    text-align: left;
    margin: 0;
  }
  .product-inventory-container .product-container .product-card .goods-info .goods-details .dispatch-info {
    display: flex;
    flex-direction: row;
    gap: 3px;
  }
  .product-inventory-container .product-container .product-card .goods-info .goods-details .dispatch-info p {
    margin: 0;
  }
  .product-inventory-container .product-container .product-card .goods-info .goods-details .order-info {
    display: flex;
    flex-direction: row;
    gap: 3px;
  }
  .product-inventory-container .product-container .product-card .goods-info .goods-details .order-info p {
    margin: 0;
  }
  .product-inventory-container .product-container .product-card .goods-info .product-graph {
    margin: 0px 0px 0px 10px;
  }
  .product-inventory-container .product-container .product-card .goods-info .product-graph .product-progress p {
    margin: 0;
  }
  .product-inventory-container .next-page-container {
    margin-right: 5%;
  }
}
.pagination-container {
  text-align: center;
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 100px;
  text-decoration: none !important;
}
.pagination-container .pagination-btn {
  background-color: white;
  color: #AE845F;
  border: 1px solid #AE845F;
  font-size: 14px;
  font-weight: 400;
  justify-content: center;
  width: 40px;
  line-height: 36px;
}
.pagination-container .current {
  color: white;
  background-color: #AE845F;
  border: 1px solid #AE845F;
}

.rev-container {
  box-sizing: content-box;
  margin-top: 40px;
  margin-bottom: 30px;
  max-width: 350px;
  margin-inline: auto;
  /* margin-inline:10px; */
}

.reviews-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* display: grid;
  grid-template-columns: 2fr 5fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: 
  "ra rc"
  "rb rc"
  ;
  row-gap: 30px; */
}

.sort-date {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
}
.sort-date div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.review-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}

.reviews-filter {
  background-color: #F8F8F8;
  padding-bottom: 15px;
}

.rev-filter-icon {
  border: 1px solid #DDDDDD;
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  font-size: 23px;
}

.rev-searchbox {
  height: 50px;
  width: 80%;
  display: grid;
  grid-template-columns: 2fr 1fr;
  border: 0px solid #D2D2D2;
}

.search-input {
  border: 1px solid #D2D2D2;
  padding-left: 10px;
}

.search-btn {
  display: grid;
  place-content: center;
  color: #fff;
  background-color: #AE845F;
  outline: none;
  border: none;
  font-size: 22px;
}

.search-input:focus {
  outline: none;
}

::placeholder {
  font-size: 15px;
  /* text-align: center; */
  color: #b4b4b4;
  font-weight: 400;
}

hover:hover {
  cursor: pointer;
}

.filter-title {
  padding: 15px;
  background-color: #EEEEEE;
  font-size: 20px;
  font-family: "Playfair Display";
  font-weight: 500;
}

.rev-date {
  padding-top: 20px;
  padding-left: 15px;
  padding-right: 25px;
}

.date-title {
  font-size: 24px;
  font-family: "Playfair Display";
  color: black;
  font-weight: 400;
}

.date-range {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  align-items: center;
}

.date-range input {
  width: 45%;
}

.apply {
  margin-top: 15px;
  width: 100%;
  height: 45px;
  background-color: #AE845F;
  font-weight: 500;
  font-size: 16px;
  color: white;
  display: grid;
  place-content: center;
}

.review-main {
  /* border:1px solid blue; */
  padding: 5px;
}

.review-title {
  width: 100%;
  color: black;
  font-family: "Playfair Display";
  font-size: 34px;
  font-weight: 500;
}

.gold {
  color: #AE845F;
}

.grey {
  color: rgba(128, 128, 128, 0.3);
}

.review-page {
  margin-top: 10px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 3fr 1.75fr;
  grid-template-areas: "b1 b2" "b3 b3" "b4 b5";
  column-gap: 10px;
  row-gap: 5px;
  border: 2.5px solid #EEE;
  padding: 25px 15px 9px 15px;
}

.rev {
  /* border:1px solid black; */
  grid-area: b1;
}

.rev-date2 {
  grid-area: b2;
  text-align: right;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.32px;
  /* border:1px solid grey; */
}

.rev-product-name {
  grid-area: b3;
  font-size: 18px;
  font-weight: 700;
  color: black;
  display: flex;
  align-items: center;
  text-decoration: underline;
  letter-spacing: 0.4px;
  /* border:1px solid red; */
}

.rev-content {
  grid-area: b4;
  font-size: 16px;
  font-weight: 400;
  color: black;
  /* border:1px solid green; */
}

.rev-icons {
  display: flex;
  justify-content: flex-end;
  align-items: first baseline;
  grid-area: b5;
  font-size: 25px;
  /* border:1px solid orange; */
}

.review-top-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  font-family: "Playfair Display";
  font-weight: 400;
  font-size: 20px;
  color: black;
}

.rev-icon1 {
  margin-right: 14px;
}

.cb {
  color: black;
}

.rev-pro-img {
  display: none;
}

.review-top-bar {
  display: none;
}

.review-pro-img {
  display: none;
}

.rev-date3 {
  display: none;
}

@media screen and (min-width: 400px) {
  .rev-container {
    max-width: 85%;
  }
}
@media screen and (min-width: 1200px) {
  .review-pro-img {
    display: block;
  }
  .rev-searchbox {
    width: 100%;
  }
  .rev-date3 {
    display: block;
  }
  .review-pro-img img {
    height: 92px;
    aspect-ratio: 1;
    object-fit: cover;
  }
  .rev-container {
    max-width: 1190px;
  }
  .review-page {
    padding: 17px 5px;
    margin-top: 0;
    margin-bottom: 0;
  }
  .rev-filter-icon {
    display: none;
  }
  .reviews-container {
    width: fit-content;
    margin-inline: auto;
  }
  .review-top-bar {
    height: 80px;
    /* background-color: #D2D2D2; */
    align-items: center;
    padding: 17px 5px;
    column-gap: 10px;
  }
  .review-top {
    height: 100%;
  }
  .review-main {
    margin-top: 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .review-title {
    display: none;
  }
  .reviews-filter {
    background-color: #fff;
  }
  .rev-date {
    background-color: #F8F8F8;
    padding-bottom: 19px;
  }
  .review-top-bar {
    display: grid;
    grid-template-columns: 100px 200px 310px 130px 100px;
    border: 1px solid #EEEEEE;
    place-content: center;
    /* padding-top: 15px; */
    /* place-content: center; */
    /* text-align: center; */
    row-gap: 5px;
  }
  .review-page {
    grid-template-columns: 100px 200px 310px 130px 100px;
    grid-template-areas: "a d e b f";
  }
  /* .img{
      width:40%;
      border:1px solid blue;
  }

  .product{
      width:40%;
      border:1px solid red;
  }

  .revs{
      width:70%;
      border:1px solid black;
  } */
  .b0 {
    grid-area: a;
  }
  .b1 {
    grid-area: b;
    display: flex;
    align-items: first baseline;
    word-spacing: 3px;
    justify-content: space-around;
  }
  .b2 {
    display: none;
  }
  .b3 {
    grid-area: d;
    flex-direction: column;
    align-items: unset;
    font-size: 16px;
    font-weight: 500;
    /* text-align: center; */
  }
  .rev-date3 {
    padding-top: 5px;
    color: #818181;
    font-size: 12px;
    font-weight: 400;
    text-decoration: underline;
    /* text-decoration-line: none !important; */
    text-decoration-color: white;
  }
  .b4 {
    grid-area: e;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-align: center;
  }
  .b5 {
    grid-area: f;
    justify-content: center;
  }
  .rev-icon1 {
    margin-left: 15px;
  }
}
#shop {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
  /* Banner  */
  /* Main */
  /* .product-bottom{
      width:300px;
  } */
  /* --------- */
  /* Global Styles */
  /* --------- */
  /* -------- */
  /* Filter Section: Categories */
  /* Products Section */
}
#shop h1 {
  font-weight: normal;
  font-size: inherit;
}
#shop .banner {
  height: 256px;
  width: 100%;
  padding-top: 71px;
  padding-bottom: 76px;
  background-image: url("/static/images/banner_raw.png");
}
#shop .banner .shop {
  height: 256px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
#shop .banner .shop .page-title {
  font-family: "Playfair Display";
  font-weight: 500;
  color: white;
  font-size: 55px;
  text-align: center;
}
#shop .banner .shop .page-breadcrumbs {
  margin-top: 20px;
  text-align: center;
  color: white;
  line-height: 25px;
  font-weight: 400;
  font-size: 14px;
  font-family: "Roboto";
}
#shop .banner .shop .page-breadcrumbs .heading {
  color: white;
  text-decoration: none;
}
#shop .banner .shop .page-breadcrumbs .heading:hover {
  color: #ffbc00;
}
#shop .container {
  /* outline: 1px solid red; */
  padding-inline: 15px;
  margin-inline: auto;
}
#shop .sort-box {
  padding-top: 1rem;
  margin-bottom: 1rem;
}
#shop #filter-icon {
  height: 45px;
  aspect-ratio: 1;
  background-color: white;
  border: 1px solid black;
  transition: background-color 200ms;
  display: inline-block;
}
#shop #filter-icon:hover {
  color: #222222;
  background-color: #ebe7e5;
}
#shop .product-image {
  position: relative;
  width: 100%;
  /* display:inline-block; */
}
#shop .product-image #img2 {
  display: none;
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
}
#shop .product-image:hover #img2 {
  display: inline;
}
#shop .heading-text {
  font-family: "Playfair Display";
  font-weight: 400;
  color: #222222;
  font-size: 24px;
}
#shop .mb-17 {
  margin-bottom: 17px;
}
#shop #product-filters {
  padding-top: 2rem;
}
#shop .text-active {
  color: rgb(174, 132, 95);
}
#shop .flex {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
}
#shop .primary-button {
  height: 45px;
  width: 70px;
  background-color: rgb(174, 132, 95);
  color: white;
  outline: none;
  border: none;
  font-size: 14px;
}
#shop .primary-button:hover {
  background-color: rgb(81, 67, 55);
  cursor: pointer;
}
#shop #product-filters {
  display: none;
}
#shop #product-filters .product-categories {
  color: #222222;
  font-size: 15px;
  list-style: none;
}
#shop #product-filters .product-categories input {
  accent-color: #AE845F;
  width: 15px;
  height: 15px;
}
#shop #product-filters .product-categories > li {
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  line-height: 35px;
}
#shop #product-filters .product-categories > li > p:nth-child(1):hover {
  color: rgb(174, 132, 95);
  cursor: pointer;
}
#shop #product-filters .product-categories > li > p:nth-child(2) {
  color: rgb(177, 177, 177);
}
#shop #product-filters .product-tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}
#shop #product-filters .product-tags > p {
  height: 45px;
  width: 70px;
  background-color: white;
  color: rgb(81, 67, 55);
  outline: none;
  border: 1px solid #ebe7e5;
  font-size: 14px;
  display: grid;
  place-content: center;
}
#shop .input-search {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: visible;
}
#shop .search-bar input {
  padding: 1rem;
  outline: none;
}
#shop .input-search #search-button {
  background-color: #AE845F;
  color: #FFFFFF;
  width: fit-content;
  text-align: center;
  font-weight: 300;
  padding: 0.5rem 1rem;
  outline: none;
  border: none;
}
#shop div div .input-flex .filter-price {
  display: flex;
  flex-direction: row;
}
@media screen and (min-width: 1200px) {
  #shop div div .input-flex .filter-price {
    display: flex;
    flex-direction: row;
  }
}
#shop div div .input-flex .filter-price input {
  width: 137px;
  height: 47px;
}
#shop div div .input-flex .apply-button {
  width: 94px;
  height: 48px;
  background-color: #AE845F;
  color: white;
  font-size: 16px;
}
#shop #products-section .product-cards-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 1rem;
  column-gap: 1rem;
}
#shop .product-image {
  height: 270px;
  position: relative;
  display: inline-block;
}
#shop .edit {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: none;
  z-index: 3;
}
#shop .product-image:hover .edit {
  display: block;
}
#shop .edit a {
  text-decoration: none;
  color: rgba(221, 221, 221, 0.8666666667);
  align-content: center;
  background-color: #D65C68;
  border: 1px solid #D65C68;
  border-radius: 1.5rem;
  padding: 0.5rem;
}
#shop .add-to-cart, #shop .cart-button {
  background-color: rgb(174, 132, 95);
  color: white !important;
  padding: 10px;
  text-align: center;
  font-family: "Roboto";
  font-weight: 400;
  font-style: bold;
  /* width:100%; */
  /* width:300px; */
}
#shop .product-image .product-tags {
  position: absolute;
  left: 1rem;
  top: 5px;
  color: white;
  display: inline-block;
  padding: 5px;
  font-size: 12px;
  font-weight: 400;
  width: 46px;
  /* height:18px; */
  text-align: center;
  z-index: 100;
}
#shop .product-image .blue {
  background-color: rgb(22, 13, 78);
}
#shop .product-image .red {
  background-color: #D65C68;
}
#shop .product-image .green {
  background-color: #306A52;
}
#shop .product-image .one {
  top: 10px;
}
#shop .product-image .two {
  top: 40px;
}
#shop .product-image .three {
  top: 70px;
}
#shop .product-brand {
  text-transform: uppercase;
  color: rgb(174, 132, 95);
  text-align: center;
  font-size: 12px;
  padding-top: 28px;
  font-weight: 500;
  letter-spacing: 0.24px;
  line-height: 12px;
  cursor: pointer;
}
#shop .product-brand:hover {
  color: rgb(34, 34, 34);
}
#shop .product-title {
  text-transform: uppercase;
  text-align: center;
  color: rgb(34, 34, 34);
  margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.28px;
  line-height: 25px;
  cursor: pointer;
}
#shop .product-title:hover {
  color: var(--primary);
}
#shop .product-price {
  font-size: 18px;
  font-weight: 500;
  line-height: 50px;
  text-align: center;
}
#shop .next-page-container {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 100px;
}
#shop .next-page-btn {
  color: white;
  background-color: rgb(174, 132, 95);
  border: 1px solid rgb(174, 132, 95);
  font-size: 14px;
  font-weight: 400;
  justify-content: center;
  width: 40px;
  line-height: 36px;
}
@media screen and (min-width: 600px) {
  #shop #products-section .product-cards-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1rem;
  }
}
@media screen and (min-width: 1200px) {
  #shop #filter-icon {
    display: none;
  }
  #shop .container {
    max-width: 1190px;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 40px 100px;
    column-gap: 1rem;
    margin-top: 1rem;
    grid-template-areas: "filters sort-box" "filters products" "   .   products";
  }
  #shop .justify-right {
    justify-content: right;
  }
  #shop .container #products-section {
    grid-area: products;
  }
  #shop .container #product-filters {
    grid-area: filters;
    display: block;
    padding-top: 4px;
  }
  #shop .container .sort-box {
    grid-area: sort-box;
  }
  #shop #products-section .product-cards-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1rem;
  }
}

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

#search-results {
  display: none;
  position: relative;
  z-index: 10000;
  background-color: white;
  padding: 0.5rem 0.5rem;
}
#search-results p {
  border-bottom: 1px solid;
  cursor: pointer;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

#order-detail-container {
  box-sizing: border-box;
  margin-right: 10px;
  padding: 0;
}
#order-detail-container .order-tracker-icons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 2px;
}
#order-detail-container .order-tracker-icons .order-icon {
  margin: 4px;
  padding: 15px;
  border: 1px solid #AE845F;
  background-color: #AE845F;
  border-radius: 28px;
  color: white;
  align-items: center;
}
#order-detail-container .order-tracker-icons .order-text {
  padding-top: 5px;
  font-family: "Playfair Display";
  margin-right: 5px;
  font-weight: 500;
}
#order-detail-container .order-tracker-icons .order-text .order-status {
  font-weight: 800;
}
#order-detail-container .order-tracker-icons .green {
  background-color: #306A52;
  border: 1px solid #306A52;
}
#order-detail-container .grid-container .order-details {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#order-detail-container .grid-container .order-details .order-info .order-heading {
  display: block;
  font-family: "Playfair Display";
  background-color: #EDEDED;
  height: 62px;
  display: grid;
  place-content: center;
  justify-content: center;
}
#order-detail-container .grid-container .order-details .order-info .order-heading p {
  font-size: 20px;
  margin: 0;
}
#order-detail-container .grid-container .order-details .order-info .delivery-info {
  padding: 10px;
}
#order-detail-container .grid-container .order-details .order-info .delivery-info .estimated-text {
  color: #767676;
  font-size: 16px;
  margin: 0px;
  padding-top: 10px;
}
#order-detail-container .grid-container .order-details .order-info .delivery-info .estimated-text p {
  margin: 0px;
}
#order-detail-container .grid-container .order-details .order-info .delivery-info .delivery-date {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  height: 75px;
}
#order-detail-container .grid-container .order-details .order-info .delivery-info .delivery-date .day-text {
  font-size: 30px;
  color: #222222;
  font-family: "Roboto";
  margin: 0px;
}
#order-detail-container .grid-container .order-details .order-info .delivery-info .delivery-date .order-date-info {
  display: flex;
  flex-direction: row;
  max-width: 100px;
  gap: 10px;
}
#order-detail-container .grid-container .order-details .order-info .delivery-info .delivery-date .order-date-info .order-date {
  font-family: "Playfair Display";
  color: #AE845F;
  font-size: 60px;
  margin: 0;
  line-height: 35px;
}
#order-detail-container .grid-container .order-details .order-info .delivery-info .delivery-date .order-date-info .order-month {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  padding-top: 10px;
  text-align: center;
  font-family: "Roboto";
  margin: 0;
}
#order-detail-container .grid-container .order-details .order-info .delivery-info .delivery-date .order-date-info .order-month p {
  margin: 0;
}
#order-detail-container .grid-container .order-details .order-info .delivery-info .contact-us-mobile {
  display: none;
}
#order-detail-container .grid-container .order-details .delivery-heading {
  display: block;
  font-family: "Playfair Display";
  background-color: #EDEDED;
  height: 62px;
  width: 100%;
}
#order-detail-container .grid-container .order-details .delivery-heading p {
  font-size: 20px;
  margin: 0;
  padding: 10px;
  text-align: center;
}
#order-detail-container .grid-container .order-details .order-address {
  display: grid;
  justify-content: start;
  padding: 10px;
}
#order-detail-container .grid-container .order-details .order-address .order-no {
  margin: 0;
  font-size: 37px;
  color: #767676;
  font-family: "Roboto";
}
#order-detail-container .grid-container .order-details .order-address .delivery-address {
  margin: 0;
  padding: 3px 0px;
  font-size: 17px;
  color: black;
  font-family: "Roboto";
}
#order-detail-container .grid-container .order-details .order-address .customer-address p {
  margin: 0;
  padding: 3px 0px;
  color: #767676;
  font-family: "Roboto", sans-serif;
}
#order-detail-container .grid-container .order-details .contact-us-desktop {
  display: none;
}
#order-detail-container .grid-container .product-details .product-heading {
  font-size: 21px;
  font-family: "Playfair Display";
  margin-left: 10px;
}
#order-detail-container .grid-container .product-details .table-header {
  display: none;
}
#order-detail-container .grid-container .product-details .table-row {
  border: 1px solid #EEEEEE;
  margin: 0px 2px;
  padding-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
#order-detail-container .grid-container .product-details .table-row .product-image {
  grid-area: 1/1/3/2;
  margin-left: 5px;
  object-fit: cover;
  padding-left: 2px;
}
#order-detail-container .grid-container .product-details .table-row .product-name {
  grid-area: 1/2/2/4;
  color: black;
  font-size: 15px;
  font-family: "Roboto";
  padding-top: 25px;
}
#order-detail-container .grid-container .product-details .table-row .product-price {
  color: black;
  font-size: 24px;
  font-family: "Roboto";
  grid-area: 2/2/3/3;
  margin: 0;
}
#order-detail-container .grid-container .product-details .table-row .product-quantity-mobile {
  color: rgba(0, 0, 0, 0.6);
  font-size: 18px;
  font-family: "Roboto";
  padding-top: 5px;
  margin: 20px;
  text-align: center;
  padding-right: 10px;
}
#order-detail-container .grid-container .product-details .table-row .product-quantity-desktop {
  display: none;
  margin: 0;
}
#order-detail-container .grid-container .product-details .table-row .product-status {
  display: none;
}
#order-detail-container .grid-container .next-page-details {
  margin: 30px;
}
#order-detail-container .grid-container .next-page-details .next-page-container {
  text-align: center;
}
#order-detail-container .grid-container .next-page-details .next-page-container .next-page-btn {
  color: white;
  background-color: #AE845F;
  border: 1px solid #AE845F;
  font-size: 14px;
  font-weight: 400;
  justify-content: center;
  width: 40px;
  line-height: 36px;
}

@media (min-width: 1000px) {
  #order-detail-container {
    max-width: 1190px;
    margin-left: 10%;
    margin-right: 10%;
  }
  #order-detail-container .grid-container {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "order-details product-details";
  }
  #order-detail-container .grid-container .order-details {
    grid-area: order-details;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 20px;
  }
  #order-detail-container .grid-container .order-details .order-info {
    grid-area: order-info;
  }
  #order-detail-container .grid-container .order-details .order-info .order-heading {
    display: block;
    font-family: "Playfair Display";
    background-color: #EDEDED;
    height: 62.4px;
    display: grid;
    place-content: center;
    justify-content: start;
  }
  #order-detail-container .grid-container .order-details .order-info .order-heading p {
    font-size: 20px;
    margin: 0;
    padding: 10px;
  }
  #order-detail-container .grid-container .order-details .order-info .delivery-info {
    margin: 25px;
    padding: 0;
    display: block;
    height: 185px;
  }
  #order-detail-container .grid-container .order-details .order-info .delivery-info .estimated-text {
    text-align: center;
    margin: 20px 0px;
  }
  #order-detail-container .grid-container .order-details .order-info .delivery-info .delivery-date {
    display: block;
    display: grid;
    place-content: center;
    margin: 0;
  }
  #order-detail-container .grid-container .order-details .order-info .delivery-info .delivery-date .contact-us-mobile {
    display: none;
  }
  #order-detail-container .grid-container .order-details .delivery-heading {
    display: none;
  }
  #order-detail-container .grid-container .order-details .order-address {
    background-color: #EDEDED;
    display: grid;
    place-content: center;
    padding: 15%;
  }
  #order-detail-container .grid-container .order-details .contact-us-desktop {
    display: grid;
    place-content: center;
    background-color: #EDEDED;
  }
  #order-detail-container .grid-container .order-details .contact-us-desktop div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
  }
  #order-detail-container .product-details {
    grid-area: product-details;
    margin-top: 20px;
  }
  #order-detail-container .product-details .product-heading {
    display: none;
  }
  #order-detail-container .product-details .table-header {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr 1fr;
    grid-template-areas: ". table-header-product table-header-price table-header-quantity table-header-status";
    gap: 1rem;
    background-color: #EDEDED;
    font-size: 20px;
  }
  #order-detail-container .product-details .table-header #table-header-product {
    grid-area: table-header-product;
    padding-left: 6px;
  }
  #order-detail-container .product-details .table-header #table-header-price {
    grid-area: table-header-price;
  }
  #order-detail-container .product-details .table-header #table-header-quantity {
    grid-area: table-header-quantity;
  }
  #order-detail-container .product-details .table-header #table-header-status {
    grid-area: table-header-status;
    padding-left: 10px;
  }
  #order-detail-container .product-details .table-row {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr 1fr;
    grid-template-areas: unset;
    grid-template-areas: "product-image product-name product-price product-quantity product-status";
    grid-template-rows: unset;
    gap: 1rem;
    align-content: center !important;
  }
  #order-detail-container .product-details .table-row .product-image {
    grid-area: product-image;
    display: grid;
    width: 100%;
    height: 100%;
  }
  #order-detail-container .product-details .table-row .product-name {
    grid-area: product-name;
    display: grid;
    place-content: center;
    margin-left: 0;
    justify-content: start;
    padding: 0;
    font-weight: 600;
    font-size: 14px;
  }
  #order-detail-container .product-details .table-row .product-price {
    grid-area: product-price;
    display: grid;
    place-content: center;
    justify-content: start;
    font-size: 14px;
    font-weight: 600;
  }
  #order-detail-container .product-details .table-row .product-quantity-desktop {
    grid-area: product-quantity;
    display: grid;
    place-content: center;
    justify-content: start;
    margin-left: 0;
    padding-left: 20%;
    font-size: 14px;
    font-family: "Roboto", sans-serif;
  }
  #order-detail-container .product-details .table-row .product-quantity-mobile {
    display: none;
  }
  #order-detail-container .product-details .table-row .product-status {
    grid-area: product-status;
    display: block;
    display: grid;
    place-content: center;
    justify-content: start;
    font-family: "Roboto", sans-serif;
  }
  #order-detail-container .product-details .next-page-details {
    margin-top: 40px;
  }
}
.pagination-container {
  text-align: center;
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 100px;
  text-decoration: none !important;
}
.pagination-container .pagination-btn {
  background-color: white;
  color: #AE845F;
  border: 1px solid #AE845F;
  font-size: 14px;
  font-weight: 400;
  justify-content: center;
  width: 40px;
  line-height: 36px;
}
.pagination-container .current {
  color: white;
  background-color: #AE845F;
  border: 1px solid #AE845F;
}

.container {
  margin: auto;
}
@media screen and (max-width: 360px) {
  .container {
    max-width: 320px !important;
  }
}

#transactions-filters {
  margin: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#transactions-filters .transaction-search-bar #filter-icon {
  height: 45px;
  aspect-ratio: 1;
  background-color: white;
  border: 1px solid black;
  transition: background-color 200ms;
  display: inline-block;
}

.input-search {
  display: flex;
}

.transaction-search-bar {
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: space-between;
}

.transaction-search-bar input {
  padding: 1rem;
  width: 60%;
  outline: none;
}

.transaction-search-bar .search-bar {
  background-color: #AE845F;
  color: #FFFFFF;
  width: 40%;
  text-align: center;
  font-weight: 300;
  padding: 1rem 1rem;
}

.filters-box {
  font-family: "Playfair Display";
  background-color: #EEEEEE;
  color: #222222;
  padding: 1.5rem;
  font-weight: 300;
  font-size: 1.5rem;
}

.date-box {
  background-color: #F8F8F8;
  color: #222222;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 1.5rem;
}

.transaction-date {
  font-family: "Playfair";
  font-family: "Playfair Display" sans-serif;
  font-weight: 300;
  color: #222222;
  padding-top: 1.5rem;
  padding-left: 0.5rem;
}

.input-flex {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  justify-content: space-around;
  gap: 1rem;
}

.input-flex input {
  width: 45%;
  padding: 0.5rem 1rem;
  color: black !important;
  font-weight: 300;
  text-align: center;
}

.apply-button {
  background-color: #AE845F;
  color: #EEEEEE;
  text-align: center;
  font-weight: 400;
  padding: 0.5rem 0rem;
  margin-top: 0.5rem;
  margin-inline: 0.5rem;
}

#transactions-section .mobile-header {
  display: block;
  background-color: #EEEEEE;
  padding: 1.5rem;
  font-size: 1.5rem;
  font-weight: 100;
  font-family: "Playfair Display";
}

#transactions-section .table-header {
  display: none;
  background-color: #EDEDED;
  padding: 1.5rem;
  font-family: "Playfair Display";
}

#transactions-section .table-header p {
  font-family: "Playfair";
  font-size: 1.2rem;
  font-weight: 100;
}

#transactions-section .table-row {
  border: 2px solid #EEEEEE;
  display: grid;
  padding: 1rem 0.5rem;
  grid-template-columns: 7fr 3fr;
  grid-template-areas: "txn_id amount" "order_id ." "order mode" "status date";
}
@media screen and (max-width: 360px) {
  #transactions-section .table-row {
    grid-template-columns: 3fr 6fr 1px !important;
  }
}

.transaction-failed {
  width: fit-content;
  text-align: center;
  background-color: #D65C68;
  color: white !important;
  padding: 0.5rem 2rem;
  font-weight: 300;
}

.transaction-success {
  width: fit-content;
  background-color: #306A52;
  color: white !important;
  padding: 0.5rem 1.5rem;
  font-weight: 300;
}

#transactions-section .next-page-container {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

#transactions-section .table-row .txn-id {
  grid-area: txn_id;
  /* line-height: 45px; */
}

#transactions-section .table-row .T-order {
  grid-area: order_id;
}

#transactions-section .table-row .T-order-id {
  grid-area: order;
}

#transactions-section .table-row .T-amount {
  grid-area: amount;
}

#transactions-section .table-row .T-mode {
  grid-area: mode;
}

#transactions-section .table-row .T-date {
  grid-area: date;
}

#transactions-section .table-row div {
  grid-area: status;
}

.table-row {
  margin: 1rem;
}

.transaction-mobile-view {
  display: block;
}

.transaction-web-view {
  display: none;
}

.txn-id {
  font-weight: 500;
  font-size: 0.9rem;
}

.T-order-id {
  font-size: 0.8rem;
  color: #767676;
  font-weight: 400;
}

.T-order {
  text-decoration: underline;
  font-weight: 400;
  font-size: 1rem;
}

.T-amount {
  font-weight: 400;
  text-align: right;
}

.T-mode {
  color: #2A2A2A;
  text-align: right;
}

.T-date {
  font-size: 1rem;
  word-wrap: normal;
  font-weight: 100;
  display: grid;
  text-align: right;
  align-items: center;
}

.filter-date-box {
  display: none;
}

@media screen and (min-width: 1200px) {
  .filter-date-box {
    display: block;
  }
  .transactions {
    max-width: 1190px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "transactions-f transactions";
    gap: 1rem;
  }
  #transactions-section {
    grid-area: transactions;
  }
  #transactions-filters {
    grid-area: transactions-f;
    margin: 0rem;
    gap: 1rem;
  }
  #transactions-section .mobile-header {
    display: none;
  }
  #transactions-section .table-header {
    display: grid;
    grid-template-columns: 1fr 3fr 1.5fr 1.5fr 1.5fr 1.5fr 1.5fr;
    gap: 1rem;
    padding-inline: 0.5rem;
  }
  #transactions-section .table-header p {
    text-align: center !important;
  }
  #transactions-section .table-row {
    display: grid;
    grid-template-columns: 1fr 3fr 1.5fr 1.5fr 1.5fr 1.5fr 1.5fr;
    grid-template-areas: "txn_id order_id order amount mode date status";
    gap: 1rem;
    align-items: center;
  }
  #transactions-section .table-row p {
    text-align: center !important;
  }
  #transactions-section .table-row .price {
    text-align: center;
  }
  .transaction-search-bar {
    margin-bottom: 1.5rem;
  }
  .apply-button {
    margin: 1.5rem 0.5rem;
  }
  .transaction-failed {
    background-color: #D65C68;
    color: white !important;
    padding: unset;
    padding: 0.7rem 1rem;
    padding-left: 1.2rem;
    font-weight: 300;
    margin-inline: auto;
  }
  .transaction-success {
    padding: unset;
    text-align: center;
    background-color: #306A52;
    color: white !important;
    padding: unset;
    padding: 0.7rem 1rem;
    padding-left: 1.2rem;
    font-weight: 300;
    margin-inline: auto;
  }
  .transaction-mobile-view {
    display: none;
  }
  .transaction-web-view {
    display: block;
  }
  .table-row {
    margin: 0;
  }
  .table-row p {
    color: #222222;
  }
  .T-num {
    font-weight: 500;
  }
  .T-order {
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
  }
  .T-date {
    font-size: 0.9rem;
    font-weight: 500;
  }
  #filter-icon {
    display: none !important;
  }
}
.pagination-container {
  text-align: center;
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 100px;
  text-decoration: none !important;
}
.pagination-container .pagination-btn {
  background-color: white;
  color: #AE845F;
  border: 1px solid #AE845F;
  font-size: 14px;
  font-weight: 400;
  justify-content: center;
  width: 40px;
  line-height: 36px;
}
.pagination-container .current {
  color: white;
  background-color: #AE845F;
  border: 1px solid #AE845F;
}

#wishlist-container .container {
  margin-inline: auto;
  font-family: "Roboto";
  margin-bottom: 2rem;
}
#wishlist-container .container #wishlists-section {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#wishlist-container .container #wishlists-section .wishlist-list {
  height: 180px;
  overflow-y: scroll;
}
#wishlist-container .container #wishlists-section .heading {
  font-family: "Playfair Display";
  font-size: 32px;
  color: #222222;
  font-weight: 200;
}
#wishlist-container .container #wishlists-section .wishlist {
  color: #000000;
  font-family: "Playfair Display";
  background-color: #EEEEEE;
  border: 1px solid #DDDDDD;
  font-size: 20px;
  font-weight: 100;
  border-color: 1px black;
  padding: 1rem 1rem;
}
#wishlist-container .container #wishlists-section .wishlist .wishlist-edit div:nth-child(1) {
  display: flex;
  justify-content: space-between;
}
#wishlist-container .container #wishlists-section .wishlist .wishlist-edit .edit-name-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  background-color: white;
}
#wishlist-container .container #wishlists-section .wishlist .wishlist-edit .edit-name-container input {
  border: 0px black;
  padding: 0.9rem;
  color: black;
  font-weight: 100;
  width: 100%;
  outline: none;
}
#wishlist-container .container #wishlists-section .wishlist .wishlist-edit .edit-name-container button, #wishlist-container .container #wishlists-section .wishlist .wishlist-edit .edit-name-container #product-list #product-input .caution, #product-list #product-input #wishlist-container .container #wishlists-section .wishlist .wishlist-edit .edit-name-container .caution, #wishlist-container .container #wishlists-section .wishlist .wishlist-edit .edit-name-container #product-item-update-page #product-item .form-input .caution, #product-item-update-page #product-item .form-input #wishlist-container .container #wishlists-section .wishlist .wishlist-edit .edit-name-container .caution, #wishlist-container .container #wishlists-section .wishlist .wishlist-edit .edit-name-container .btn-primary, #wishlist-container .container #wishlists-section .wishlist .wishlist-edit .edit-name-container .btn-caution {
  background-color: #FFFFFF !important;
  width: 48px !important;
}
#wishlist-container .container #wishlists-section .wishlist .wishlist-edit .edit-name-container button i, #wishlist-container .container #wishlists-section .wishlist .wishlist-edit .edit-name-container #product-list #product-input .caution i, #product-list #product-input #wishlist-container .container #wishlists-section .wishlist .wishlist-edit .edit-name-container .caution i, #wishlist-container .container #wishlists-section .wishlist .wishlist-edit .edit-name-container #product-item-update-page #product-item .form-input .caution i, #product-item-update-page #product-item .form-input #wishlist-container .container #wishlists-section .wishlist .wishlist-edit .edit-name-container .caution i, #wishlist-container .container #wishlists-section .wishlist .wishlist-edit .edit-name-container .btn-primary i, #wishlist-container .container #wishlists-section .wishlist .wishlist-edit .edit-name-container .btn-caution i {
  font-size: 1.5rem;
}
#wishlist-container .container #wishlists-section .new-wishlist {
  background-color: #FFFFFF;
  border: 1px solid #E1E1E1;
  color: #222222;
  text-align: center;
  padding: 0.8rem;
  font-family: "Roboto", sans-serif;
}
#wishlist-container #active-wishlist {
  display: flex;
  flex-direction: column;
}
#wishlist-container #active-wishlist h1 {
  background-color: #EDEDED;
  border: 1px solid #EEEEEE;
  font-family: "Playfair Display";
  font-weight: 100;
  padding: 1rem;
}
#wishlist-container #active-wishlist .wishlist-headings {
  display: none;
}
#wishlist-container #active-wishlist .wishlist-items {
  margin: 1rem;
  margin-inline: 0.5rem;
  border: 2px solid #EDEDED;
  padding: 1.5rem 1rem;
  font-family: "Roboto", sans-serif;
  align-items: center;
  display: grid;
  grid-template-columns: 2.5fr 4fr 2fr 1fr;
  grid-template-rows: 1fr 1fr 2fr;
  gap: 0px 0px;
  grid-template-areas: "wishlist-img product-name product-name trash-icon" "wishlist-img price date date" "buttons buttons buttons buttons ";
}
#wishlist-container #active-wishlist .wishlist-items .wishlist-img {
  grid-area: wishlist-img;
  height: 60px;
  aspect-ratio: 1;
}
#wishlist-container #active-wishlist .wishlist-items .wishlist-img img {
  height: 100%;
  object-fit: cover;
}
#wishlist-container #active-wishlist .wishlist-items .product-name {
  grid-area: product-name;
  text-decoration: underline;
  font-size: 0.9rem;
  color: #222222;
  font-weight: 500;
}
#wishlist-container #active-wishlist .wishlist-items .date {
  grid-area: date;
  font-size: 1rem;
  font-weight: 300;
  text-align: end;
  color: #2A2A2A;
}
#wishlist-container #active-wishlist .wishlist-items .price {
  grid-area: price;
  font-weight: 300;
  font-size: 23px;
  color: rgba(42, 42, 42, 0.9254901961);
}
#wishlist-container #active-wishlist .wishlist-items .price i {
  font-size: 1.8rem;
}
#wishlist-container #active-wishlist .wishlist-items .wishlist-button {
  grid-area: buttons;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#wishlist-container #active-wishlist .wishlist-items .wishlist-button span:nth-child(1) {
  grid-area: copy-button;
  text-align: center;
  border: 1px solid #AE845F;
  color: #AE845F;
  background-color: white;
  padding: 0.8rem 1.5rem;
  width: fit-content;
  font-weight: 300;
}
#wishlist-container #active-wishlist .wishlist-items .wishlist-button span:nth-child(1):hover {
  background-color: #AE845F;
  color: white;
}
#wishlist-container #active-wishlist .wishlist-items .wishlist-button span:nth-child(2) {
  grid-area: add-to-card;
  text-align: center;
  border: 1px solid;
  border-color: #AE845F;
  color: #FFFFFF;
  background-color: #AE845F;
  padding: 0.9rem 1.3rem;
  font-weight: 300;
}
#wishlist-container #active-wishlist .wishlist-items .wishlist-button span:nth-child(2):hover {
  background-color: white;
  color: #AE845F;
}
#wishlist-container #active-wishlist .wishlist-items .delete {
  grid-area: trash-icon;
  text-align: center;
  font-size: 1.2rem;
  padding: 0rem;
}
#wishlist-container .container-2 {
  display: grid;
  grid-template-columns: fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "page-num page-num" "share add-to-cart";
  justify-content: space-between;
  font-family: "Roboto", sans-serif;
  align-items: center;
  padding: 2rem;
  font-size: 13px;
  gap: 2rem;
}
#wishlist-container .container-2 div:nth-child(1) {
  grid-area: share;
  width: fit-content;
  border-color: #AE845F;
  color: #FFFFFF;
  background-color: #AE845F;
  padding: 0.8rem 1rem;
  text-align: center;
}
#wishlist-container .container-2 div:nth-child(2) {
  margin-inline: auto;
  align-items: center;
  grid-area: page-num;
  display: flex;
  gap: 0.5rem;
}
#wishlist-container .container-2 div:nth-child(2) div:nth-child(1) {
  border-color: #AE845F;
  color: #FFFFFF;
  background-color: #AE845F;
  padding: 0.8rem 1rem;
}
#wishlist-container .container-2 div:nth-child(2) div:nth-child(2) {
  border: 1px solid #D9D9D9;
  padding: 0.8rem 1rem;
  text-align: center;
}
#wishlist-container .container-2 div:nth-child(2) div:nth-child(3) {
  border: 1px solid #D9D9D9;
  color: #222222;
  padding: 0.8rem 1rem;
  align-items: right;
  background-color: #FFFFFF;
}
#wishlist-container .container-2 div:nth-child(3) {
  grid-area: add-to-cart;
  width: fit-content;
  border-color: #AE845F;
  color: #FFFFFF;
  background-color: #AE845F;
  padding: 0.8rem 1rem;
  align-items: flex-end !important;
}

@media screen and (min-width: 1000px) {
  #wishlist-container .container {
    max-width: 1190px;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1.4fr 3.1fr;
    grid-template-rows: 2fr;
    gap: 1rem;
    grid-template-areas: ". .";
  }
  #wishlist-container .container #wishlists-section .wishlist-edit {
    color: #000000;
  }
  #wishlist-container .container #wishlists-section .wishlist-edit div div i:hover {
    cursor: pointer;
    color: #AE845F;
  }
  #wishlist-container .container #wishlists-section .wishlist-edit div div a {
    margin-left: 10px;
  }
  #wishlist-container .container #active-wishlist {
    gap: 0.5rem;
  }
  #wishlist-container .container #active-wishlist h1 {
    background-color: white;
    border: 0;
    font-size: 2rem;
    font-weight: 200;
    margin-top: 0.5rem;
  }
  #wishlist-container .container #active-wishlist .wishlist-headings {
    display: block;
    border: 1px solid #EEEEEE;
    color: #1A1A1A;
    font-family: "Playfair Display";
    font-size: 1rem;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 0.7fr 2fr 1fr 0.4fr 2.5fr 0.2fr;
    grid-template-rows: 2fr;
    gap: 2px 2px;
    grid-template-areas: " . . .";
    padding: 1rem;
  }
  #wishlist-container .container #active-wishlist .wishlist-headings .wishlist-product-heading {
    text-align: left;
  }
  #wishlist-container .container #active-wishlist .wishlist-headings .wishlist-qt-heading {
    text-align: left;
  }
  #wishlist-container .container #active-wishlist .wishlist-headings .wishlist-price-heading {
    text-align: right;
  }
  #wishlist-container .container #active-wishlist .wishlist-headings .wishlist-options-heading {
    text-align: center;
  }
  #wishlist-container .container #active-wishlist .input-search {
    display: none;
  }
  #wishlist-container .container #active-wishlist .wishlist-name {
    display: none;
  }
  #wishlist-container .container #active-wishlist .wishlist-items {
    border: 1px solid #EEEEEE;
    margin: 0;
    padding: 0.5rem 1rem;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: 2fr;
    grid-template-columns: 0.7fr 2fr 1fr 0.4fr 2.5fr 0.2fr;
    grid-template-areas: "wishlist-img product-name date price buttons trash-icon " !important;
    gap: 2px 2px;
    align-items: center;
  }
  #wishlist-container .container #active-wishlist .wishlist-items .product-name {
    font-weight: 500;
    color: #222222;
    font-size: 0.8rem;
    text-decoration: none;
  }
  #wishlist-container .container #active-wishlist .wishlist-items .date {
    grid-area: date;
    font-size: 0.8rem;
    font-weight: 400;
    text-align: left;
  }
  #wishlist-container .container #active-wishlist .wishlist-items .red-color {
    color: red;
  }
  #wishlist-container .container #active-wishlist .wishlist-items .price {
    grid-area: price;
    font-weight: 500;
    font-size: 1rem;
    text-align: right;
  }
  #wishlist-container .container #active-wishlist .wishlist-items .price i {
    font-size: 1rem;
  }
  #wishlist-container .container #active-wishlist .wishlist-items .wishlist-button {
    grid-area: buttons;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  #wishlist-container .container #active-wishlist .wishlist-items .wishlist-button span:nth-child(1) {
    padding: 0.8rem 1.5rem;
    text-align: center;
    padding-left: 26px;
  }
  #wishlist-container .container .container-2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-family: "Roboto", sans-serif;
    align-items: center;
    padding: 2rem;
    font-size: 13px;
  }
  #wishlist-container .container .container-2 div:nth-child(1) {
    border-color: #AE845F;
    color: #FFFFFF;
    background-color: #AE845F;
    padding: 1rem 1.5rem;
  }
  #wishlist-container .container .container-2 div:nth-child(2) {
    display: flex;
    gap: 0.5rem;
  }
  #wishlist-container .container .container-2 div:nth-child(2) div:nth-child(1) {
    color: #FFFFFF;
    background-color: #AE845F;
    padding: 0.8rem 1rem;
  }
  #wishlist-container .container .container-2 div:nth-child(2) div:nth-child(2) {
    border: 1px solid #D9D9D9;
    padding: 0.8rem 1rem;
    text-align: center;
  }
  #wishlist-container .container .container-2 div:nth-child(2) div:nth-child(3) {
    border: 1px solid #D9D9D9;
    color: #222222;
  }
  #wishlist-container .container .container-2 div:nth-child(3) {
    border-color: #AE845F;
    color: #FFFFFF;
    background-color: #AE845F;
    padding: 1rem 1rem;
  }
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto";
}

.banner {
  height: 256px;
  width: 100%;
  padding-top: 71px;
  padding-bottom: 76px;
  background-image: url("/static/images/banner_raw.png");
}

.banner .shop {
  height: 256px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.banner .shop .page-title {
  font-family: "Playfair Display";
  font-weight: 500;
  color: white;
  font-size: 55px;
  text-align: center;
}

.banner .shop .page-breadcrumbs {
  margin-top: 20px;
  text-align: center;
  color: white;
  line-height: 25px;
  font-weight: 400;
  font-size: 14px;
  font-family: "Roboto";
}

.banner .shop .page-breadcrumbs .heading {
  color: white;
  text-decoration: none;
}

.banner .shop .page-breadcrumbs .heading:hover {
  color: #ffbc00;
}

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

.heading-text {
  font-family: "Playfair Display";
  font-weight: 400;
  color: rgb(34, 34, 34);
}

.banner {
  height: 256px;
  width: 100%;
  padding-top: 71px;
  padding-bottom: 76px;
  background-image: url("/static/images/banner_raw.png");
}

.white-text {
  color: white;
}

.container > div > * {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.g-center {
  display: grid;
  place-content: center;
}

.form-control {
  color: rgb(34, 34, 34);
  font-size: 14px;
  font-family: "sans serif";
}

.form-control label {
  display: block;
}

.form-control input {
  display: block;
  color: rgb(177, 177, 177);
  border: 1px solid rgb(202, 185, 170);
  outline: none;
  height: 48px;
  padding-inline: 205px;
  margin-top: 10px;
}

.form-control input:focus {
  border: 1px solid #AE845F;
}

.asterisk {
  color: tomato;
}

.remember-me {
  font-family: Roboto;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.28px;
  line-height: 25px;
}

.login-button {
  background-color: #AE845F;
  color: white;
  text-align: center;
  font-size: 15px;
  height: 45px;
  width: 110px;
  font: weight 400px;
  padding-top: 13px;
  margin-top: 30px;
}

.login-button:hover {
  background-color: black;
}

.text {
  color: #767676;
  font-family: Roboto;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.28px;
  line-height: 25px;
}

.text2 {
  font-size: 12px;
  letter-spacing: 0.24px;
  font-style: italic;
  color: #767676;
  letter-spacing: 0.24px;
  line-height: 25px;
}

.register-button {
  background-color: #AE845F;
  color: white;
  text-align: center;
  font-size: 15px;
  height: 45px;
  width: 140px;
  font: weight 400px;
  padding-top: 13px;
  margin-top: 40px;
}

.register-button:hover {
  background-color: black;
}

.forget-password {
  font-family: Roboto;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.28px;
  line-height: 25px;
}

.forget-password:hover {
  color: #AE845F;
}

@media screen and (min-width: 700px) {
  .container {
    max-width: 700px;
  }
  .two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 1200px) {
  .container {
    max-width: 1190px;
  }
}
#product-page {
  /* .hide{
      display: none !important;
  } */
  /* 
  .unhide{
      display: block;
  } */
}
#product-page .container {
  box-sizing: content-box;
  margin-top: 40px;
  margin-bottom: 30px;
  max-width: 320px;
  margin-inline: auto;
  border: 0px solid black;
}
#product-page .product-img {
  width: 100%;
  border: 0px solid red;
}
#product-page .list-img {
  padding: 5px 0px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#product-page .view-img {
  border: 1px solid #ae845f;
  width: 55px;
  aspect-ratio: 1;
}
#product-page .detail-container {
  margin-top: 10px;
}
#product-page .page-loc {
  border: 0px solid rgb(7, 6, 6);
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
}
#product-page .product-navigation {
  font-size: 14px;
  color: #767676;
  font-weight: 400;
}
#product-page .product-navigation a:hover {
  color: #ffbc00;
}
#product-page .next-prev-buttons {
  display: flex;
}
#product-page .product-next-button {
  margin-left: 10px;
}
#product-page .product-prev-button, #product-page .product-next-button {
  display: grid;
  place-content: center;
  height: 25px;
  aspect-ratio: 1;
  background-color: #bfbfbf;
  border-radius: 5px;
  font-size: 12px;
}
#product-page .next-prev-buttons a:hover {
  background-color: #ae845f;
  color: white;
}
#product-page .page-loc a {
  color: #767676;
}
#product-page .page-loc span {
  color: #767676;
}
#product-page .pro-title h1 {
  font-family: "Playfair Display";
  font-size: 28px;
  font-weight: 400;
}
#product-page .pro-price {
  border: 0px solid black;
  margin-top: 40px;
  margin-bottom: 40px;
  color: #222;
  font-size: 22px;
}
#product-page .pro-discount {
  color: #222222;
}
#product-page .pro-save {
  font-size: 18px;
  color: #222222;
  font-weight: 600;
}
#product-page hr {
  height: 1px;
  color: #eeeeee;
}
#product-page .pro-description {
  margin-top: 30px;
  font-size: 15px;
  font-weight: 400;
  color: #767676;
  text-align: justify;
  margin-bottom: 15px;
}
#product-page .color-size-parameters {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
#product-page .cs-title {
  width: 10%;
  font-size: 14px;
}
#product-page .color-parameters, #product-page .size-parameters {
  display: flex;
  align-items: center;
}
#product-page .csboxes {
  margin-left: 15px;
  width: 35%;
  display: flex;
  justify-content: space-between;
}
#product-page .cs-box-out {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  padding: 3px;
  width: 34px;
  height: 34px;
  display: grid;
  place-content: center;
}
#product-page .cs-box {
  width: 26px;
  aspect-ratio: 1;
}
#product-page .cs-box-out:hover {
  cursor: pointer;
  padding: 1px;
  border: 3px solid rgba(0, 0, 0, 0.4);
}
#product-page .sizes {
  display: flex;
}
#product-page .pro-availability {
  color: #ae845f;
  font-size: 14px;
  font-weight: 600;
}
#product-page .pro-quantitycontainer {
  height: 50px;
  margin-top: 10px;
  border: 1px solid #ddd;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
#product-page .incdec {
  background-color: white;
  border: none;
  font-size: 25px;
  font-weight: 300;
}
#product-page .pro-quantitycontainer button:active, #product-page .pro-quantitycontainer #product-list #product-input .caution:active, #product-list #product-input #product-page .pro-quantitycontainer .caution:active, #product-page .pro-quantitycontainer #product-item-update-page #product-item .form-input .caution:active, #product-item-update-page #product-item .form-input #product-page .pro-quantitycontainer .caution:active, #product-page .pro-quantitycontainer .btn-primary:active, #product-page .pro-quantitycontainer .btn-caution:active {
  background-color: rgba(0, 0, 0, 0.5);
}
#product-page .pro-quantity {
  margin-top: 0;
  display: grid;
  place-content: center;
}
#product-page .cart {
  display: grid;
  height: 70px;
  grid-template-columns: 1fr;
}
#product-page .pro-addtocart {
  border: none;
  background-color: #ae845f;
  color: white;
  font-size: 14px;
  font-weight: 600;
  margin-top: 20px;
}
#product-page .pro-addtocart:active {
  background-color: rgba(0, 0, 0, 0.5);
}
#product-page .pro-addn {
  display: flex;
  flex-direction: row;
  margin-top: 30px;
  margin-bottom: 30px;
}
#product-page .compare {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #222222;
  text-decoration: none;
}
#product-page .compare:hover {
  color: #ae845f;
}
#product-page .compare img {
  width: 25px;
  aspect-ratio: 1;
}
#product-page .wishlist {
  margin-left: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #222222;
  text-decoration: none;
}
#product-page .wishlist:hover {
  color: #ae845f;
}
#product-page .wishlist img {
  width: 25px;
  aspect-ratio: 1;
}
#product-page .product-stats {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 20px;
  gap: 5px;
}
#product-page .product-stats .stat-style {
  background-color: rgba(174, 132, 95, 0.41);
  display: flex;
  font-family: "Playfair Display";
  flex-direction: column;
  color: #000000;
  padding: 10px;
  text-align: center;
}
#product-page .product-stats .stat-style hr {
  margin: 1px 0;
  border: 1px solid #000000;
}
#product-page .product-stats .stat-style .stat-name {
  font-size: 20px;
}
#product-page .product-stats .stat-style .stat-text {
  font-size: 10px;
}
#product-page .product-stats .stat-style .stat-num {
  font-size: 15px;
}
#product-page .pro-description2 {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 70px;
}
#product-page .pro-description span {
  color: #767676;
}
#product-page .info-container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 2fr 1fr;
  column-gap: 10px;
  row-gap: 10px;
  margin-bottom: 30px;
}
#product-page .info-container > div {
  font-family: "Playfair Display";
  display: grid;
  place-content: center;
}
#product-page .dc1 {
  font-size: 18px;
  font-weight: 500;
}
#product-page .color1 {
  color: #222222;
}
#product-page .color2 {
  color: #767676;
}
#product-page .pro-info {
  margin-top: 30px;
}
#product-page .description-title1 {
  color: #222;
  font-size: 22px;
  font-weight: 400;
}
#product-page .description-info1 {
  margin-top: 20px;
  color: #767676;
  font-size: 15px;
  text-align: justify;
}
#product-page .addn-grid {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-columns: 3fr 7fr;
  border: 0.5px solid #767676;
  border-bottom: 0px;
  border-right: 0px;
}
#product-page .addn-grid div {
  /* border: 0.5px solid #767676; */
  border-bottom: 0.5px solid #767676;
  border-right: 0.5px solid #767676;
  font-size: 14px;
  color: #767676;
  font-weight: 400;
  padding: 5px;
}
#product-page .no-of-reviews {
  font-family: "Playfair Display";
  font-size: 48px;
  color: grey;
  font-weight: 400;
  display: grid;
  place-content: center;
}
#product-page .stars {
  text-align: center;
}
#product-page .zero-rev {
  text-align: center;
  color: #767676;
  font-size: 12px;
  font-weight: 400;
}
#product-page .ratingsin {
  border: 1px solid #eee;
  padding: 10px;
}
#product-page .ratingsbar {
  display: flex;
  flex-direction: column;
}
#product-page .rating-star {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#product-page .r1 {
  width: 15%;
  font-size: 12px;
  text-align: center;
  color: #222;
  font-weight: 400;
}
#product-page .r2 {
  height: 4px;
  background-color: #767676;
  width: 70%;
  border-radius: 5px;
}
#product-page .rating-percentage1 {
  height: 4px;
  background-color: black;
  z-index: 0;
  border-radius: 5px;
}
#product-page .r2 > div {
  border-radius: 5px;
}
#product-page .r3 {
  width: 10%;
  font-size: 12px;
  text-align: center;
  color: #222;
  font-weight: 400;
}
#product-page .rev-write {
  display: grid;
  height: 70px;
  grid-template-columns: 1fr;
}
#product-page .rev-button {
  border: none;
  background-color: #ae845f;
  color: white;
  font-size: 14px;
  font-weight: 600;
  margin-top: 20px;
}
#product-page .rev-button:active {
  background-color: rgba(0, 0, 0, 0.5);
}
#product-page .ratingsin2 {
  margin-top: 40px;
}
#product-page .rating-input {
  font-size: 14px;
  font-weight: 400;
}
#product-page .supcolor {
  color: red;
  font-size: 14px;
}
#product-page .rating-stars > i {
  margin-left: 10px;
}
#product-page .rating-input2 {
  margin-top: 20px;
}
#product-page .rating-input3 {
  margin-top: 20px;
}
#product-page .rating-desc-input1 {
  margin-top: 10px;
  height: 45px;
  width: 100%;
  padding: 10px;
  border: 1px solid #eee;
}
#product-page .rating-desc-input2 {
  margin-top: 10px;
  height: 150px;
  width: 100%;
  border: 1px solid #eee;
  padding-top: 10px;
  padding-left: 10px;
}
#product-page .rating-title {
  font-size: 14px;
  font-weight: 400;
}
#product-page .review-count {
  margin-top: 50px;
  color: #767676;
  font-size: 14px;
  font-weight: 400;
}
#product-page .name {
  margin-top: 20px;
  padding-left: 5px;
}
#product-page .info-active {
  color: #222222 !important;
}
@media screen and (min-width: 400px) {
  #product-page .product-img img {
    width: 100%;
    border: 1px solid red;
  }
  #product-page .container {
    max-width: 85%;
  }
  #product-page .product-stats {
    gap: 10px;
  }
}
@media screen and (min-width: 800px) {
  #product-page .container {
    max-width: 750px;
  }
  #product-page .product-stats {
    gap: 10px;
  }
}
@media screen and (min-width: 1200px) {
  #product-page {
    /* .hide{
        display: none;
    } */
  }
  #product-page .container {
    max-width: 1190px !important;
    padding: 15px;
  }
  #product-page .product-stats {
    gap: 5px;
  }
  #product-page .c1 {
    display: grid;
    grid-template-columns: 650px 470px;
    grid-template-rows: 5.5fr;
    column-gap: 70px;
  }
  #product-page .product-img img {
    height: 700px;
    width: 650px;
  }
  #product-page .view-img {
    width: 120px;
    aspect-ratio: 1;
  }
  #product-page .detail-container {
    margin-top: 0px;
  }
  #product-page .page-loc {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
  }
  #product-page .pro-price {
    margin: 20px 0;
  }
  #product-page .cart-container {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #product-page .pro-quantitycontainer {
    height: 40px;
    width: 30%;
  }
  #product-page .cart {
    height: 40px;
    width: 68%;
  }
  #product-page .pro-quantitycontainer {
    margin-top: 0px;
  }
  #product-page .pro-addtocart {
    margin-top: 0px;
  }
  #product-page .c2 {
    margin-top: 100px;
  }
  #product-page .info-container {
    display: flex;
    justify-content: space-around;
  }
  #product-page .fs {
    font-size: 36px;
  }
  #product-page .fs:hover {
    cursor: pointer;
  }
  #product-page .list-line {
    line-height: 2;
  }
  #product-page .descr2 {
    display: grid;
    grid-template-columns: 0.62fr 0.38fr;
    grid-template-rows: 1fr;
    column-gap: 40px;
  }
  #product-page .rev2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  #product-page .ratingsin {
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  #product-page .ratingsin2 {
    width: 70%;
    margin-top: 0;
  }
}

#product-item-update-page {
  max-width: 1190px;
  margin-inline: auto;
}
#product-item-update-page #product-item {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}
#product-item-update-page #product-item .form-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#product-item-update-page #product-item .form-input h1 {
  font-size: 24px;
  color: #2A2A2A;
  font-family: "Playfair Display";
  font-weight: 400;
}
#product-item-update-page #product-item .form-input .product-input-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#product-item-update-page #product-item .form-input .product-input-container .input-title sup {
  font-size: 15px;
  color: #E33131;
}
#product-item-update-page #product-item .form-input .product-input-container input,
#product-item-update-page #product-item .form-input .product-input-container select,
#product-item-update-page #product-item .form-input .product-input-container .product-select {
  border: 1px solid #DDD;
  width: 350px;
  height: 50px;
  padding: 8px;
}
#product-item-update-page #product-item .form-input .product-input-container select {
  background-color: white;
}
#product-item-update-page #product-item .form-input .product-input-container input:focus {
  outline: none;
}
#product-item-update-page #product-item .form-input button, #product-item-update-page #product-item .form-input .caution, #product-item-update-page #product-item .form-input .btn-primary, #product-item-update-page #product-item .form-input .btn-caution {
  margin-top: 20px;
  background-color: #AE845F;
  color: white;
  font-weight: 400;
  padding: 1rem 1rem;
  width: 350px;
  height: 50px;
  text-align: center;
  outline: none;
  border: none;
}
#product-item-update-page #product-item .form-input .caution {
  border: 1px solid #E33131;
  background-color: white !important;
  color: #E33131;
  transition: background-color 200ms;
  font-size: 14px;
  text-decoration: none;
}
#product-item-update-page #product-item .form-input .caution:hover {
  background-color: #E33131 !important;
  color: white;
}
#product-item-update-page #product-item .product-cats {
  font-family: Roboto;
  font-weight: 400;
  font-size: 12px;
  color: #767676;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 20px;
}
#product-item-update-page #product-item #pro-item-grid-1 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
#product-item-update-page #product-item #pro-item-grid-1 .product-size h1 {
  font-size: 24px;
  color: #2A2A2A;
  font-family: "Playfair Display";
  font-weight: 400;
  margin-bottom: 30px;
}
#product-item-update-page #product-item #pro-item-grid-1 .product-size .products-navigator {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: scroll;
  height: 250px;
}
#product-item-update-page #product-item #pro-item-grid-1 .product-size .products-navigator .product-item-card {
  display: flex;
  gap: 10px;
  padding: 0.5rem 0.2rem;
}
#product-item-update-page #product-item #pro-item-grid-1 .product-size .products-navigator .product-item-card .image-container {
  width: 50px;
}
#product-item-update-page #product-item #pro-item-grid-1 .product-size .products-navigator .product-item-card .image-container img {
  width: 100%;
  object-fit: cover;
}
#product-item-update-page #product-item #pro-item-grid-1 .product-size .products-navigator .product-item-card .product-item-info a {
  display: block;
}
#product-item-update-page #product-item #pro-item-grid-1 .product-size .products-navigator .product-item-card .product-item-info h3 {
  font-weight: 400;
}
#product-item-update-page #product-item #pro-item-grid-1 .product-size .products-navigator .product-item-card .product-item-info .variations-section {
  margin-top: 0.5rem;
}
#product-item-update-page #product-item #pro-item-grid-1 .product-size .products-navigator .active {
  border: 2px solid #AE845F;
}
#product-item-update-page #product-item #pro-item-grid-1 .upload-media {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#product-item-update-page #product-item #pro-item-grid-1 .upload-media h1 {
  font-size: 24px;
  color: #2A2A2A;
  font-family: "Playfair Display";
  font-weight: 400;
  margin-bottom: 30px;
}
#product-item-update-page #product-item #pro-item-grid-1 .upload-media .img-name {
  font-size: 15px;
  font-weight: 400;
  color: #282828;
  font-family: Roboto;
}
#product-item-update-page #product-item #pro-item-grid-1 .upload-media .upload-image {
  border: 1px solid #DDDDDD;
  height: 370px;
  width: 342px;
}
#product-item-update-page #product-item #pro-item-grid-1 .upload-media button, #product-item-update-page #product-item #pro-item-grid-1 .upload-media #product-list #product-input .caution, #product-list #product-input #product-item-update-page #product-item #pro-item-grid-1 .upload-media .caution, #product-item-update-page #product-item #pro-item-grid-1 .upload-media .btn-primary, #product-item-update-page #product-item #pro-item-grid-1 .upload-media .btn-caution, #product-item-update-page #product-item #pro-item-grid-1 .upload-media .form-input .caution, #product-item-update-page #product-item .form-input #pro-item-grid-1 .upload-media .caution {
  margin-top: 20px;
  background-color: #AE845F;
  color: white;
  font-weight: 400;
  padding: 1rem 1rem;
  width: 350px;
  height: 50px;
  text-align: center;
  outline: none;
  border: none;
}
#product-item-update-page #product-item #pro-item-grid-2 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
#product-item-update-page #product-item #pro-item-grid-2 .product-properties {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#product-item-update-page #product-item #pro-item-grid-2 .product-properties .properties-box {
  display: flex;
  border: 1px solid #888888;
  padding: 1rem;
  color: #D9D9D9;
  justify-content: space-between;
}
#product-item-update-page #product-item #pro-item-grid-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#product-item-update-page #product-item #pro-item-grid-3 .grid-1col .img-name {
  margin-inline: auto;
  font-family: Roboto;
  color: #000000;
  font-weight: 500;
  font-size: 15px;
  text-align: center;
  margin-bottom: 10px;
}
#product-item-update-page #product-item #pro-item-grid-3 .grid-1col img {
  object-fit: contain;
  aspect-ratio: 1;
  width: 256px;
}
#product-item-update-page #product-item #pro-item-grid-3 .img2-name {
  margin-inline: auto;
  font-family: Roboto;
  color: #000000;
  font-weight: 500;
  font-size: 15px;
  text-align: center;
  margin-bottom: 10px;
}
#product-item-update-page #product-item #pro-item-grid-3 .grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
#product-item-update-page #product-item #pro-item-grid-3 .grid-2col a,
#product-item-update-page #product-item #pro-item-grid-3 .grid-2col img {
  width: 125.5px;
  aspect-ratio: 1;
}
#product-item-update-page #product-item #pro-item-grid-3 .grid-videos {
  display: grid;
  grid-template-areas: "a a" "b c";
  gap: 5px;
}
#product-item-update-page #product-item #pro-item-grid-3 .grid-videos a:nth-child(1) {
  grid-area: a;
}
#product-item-update-page #product-item #pro-item-grid-3 .grid-videos a:nth-child(1) img {
  width: 256px;
}
#product-item-update-page #product-item #pro-item-grid-3 .grid-videos a:nth-child(2) {
  grid-area: b;
}
#product-item-update-page #product-item #pro-item-grid-3 .grid-videos a:nth-child(2) img {
  width: 125.5px;
}
#product-item-update-page #product-item #pro-item-grid-3 .grid-videos a:nth-child(3) {
  grid-area: c;
}
#product-item-update-page #product-item #pro-item-grid-3 .grid-videos a:nth-child(3) img {
  width: 125.5px;
}
#product-item-update-page .hr-line {
  margin: 60px 0;
  border: 1px solid #eee;
}
#product-item-update-page #sg-section #product-grid {
  margin: 45px 0;
  display: flex;
  justify-content: space-around;
}
#product-item-update-page #sg-section #product-grid .cw-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
#product-item-update-page #sg-section #product-grid .cw-content img {
  width: 255px;
  aspect-ratio: 1;
}
#product-item-update-page #sg-section #product-grid .cw-content .cart-addtocart {
  border: none;
  background-color: #ae845f;
  color: white;
  font-size: 14px;
  font-weight: 600;
  padding: 15px 10px;
  width: 90%;
  text-align: center;
}
#product-item-update-page #sg-section #product-grid .cw-content .cart-addtocart:hover {
  cursor: pointer;
}
#product-item-update-page #sg-section #product-grid .cw-content .cart-addtocart:active {
  background-color: rgba(0, 0, 0, 0.5);
}
#product-item-update-page #sg-section #product-grid .cw-content .cart-title {
  color: #B6906E;
  font-size: 12px;
  font-weight: 400;
  padding: 10px 0;
  text-align: center;
}
#product-item-update-page #sg-section #product-grid .cw-content .cart-title .cart-name {
  color: #313131;
  font-size: 16px;
  text-align: center;
}
#product-item-update-page #sg-section #product-grid .cw-content select {
  border: 1px solid #DDD;
  color: #DDD;
  width: 100%;
  padding: 8px 10px;
}
#product-item-update-page .variations-section h1 {
  font-size: 24px;
  color: #2A2A2A;
  font-family: "Playfair Display";
  font-weight: 400;
  margin-bottom: 10px;
}
#product-item-update-page .variations-section .sub-variations {
  flex-direction: row;
  margin-left: 15px;
  width: 35%;
  gap: 1rem;
  display: flex;
  justify-content: space-between;
}
#product-item-update-page .variations-section .sub-variations .outer-box {
  border-radius: 2px;
  padding: 1px;
  min-width: 34px;
  height: 34px;
  display: grid;
  place-content: center;
  border: 1px solid rgba(0, 0, 0, 0.651);
}
#product-item-update-page .variations-section .sub-variations .outer-box .color-box {
  border-radius: 2px;
  border: 5px !important;
  width: 32px;
  height: 32px;
}
#product-item-update-page .variations-section .sub-variations .active {
  border: 3px #ae845f solid !important;
  background-color: unset !important;
}
#product-item-update-page .variations-section .sub-variations .active .color-box {
  border-radius: 0px !important;
  width: 28px;
  height: 28px;
}
#product-item-update-page .variations-section .sub-variations .unavailable {
  background-color: rgb(204, 200, 200) !important;
  border: 3px solid rgb(198, 198, 198) !important;
}

#admin-reviews .banner {
  margin-top: 25px;
  height: 256px;
  width: 100%;
  padding-top: 71px;
  padding-bottom: 76px;
  background-image: url("/static/images/banner_raw.png");
}
#admin-reviews .banner .review {
  height: 256px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
#admin-reviews .banner .review .page-title {
  font-family: "Playfair Display";
  font-weight: 500;
  color: white;
  font-size: 55px;
  text-align: center;
}
#admin-reviews .banner .review .page-breadcrumbs {
  margin-top: 20px;
  text-align: center;
  color: white;
  line-height: 25px;
  font-weight: 400;
  font-size: 14px;
  font-family: "Roboto";
}
#admin-reviews .banner .review .page-breadcrumbs .heading {
  color: white;
  text-decoration: none;
}
#admin-reviews .banner .review .page-breadcrumbs .heading:hover {
  color: #ffbc00;
}
#admin-reviews .rev-container {
  box-sizing: content-box;
  margin-top: 40px;
  margin-bottom: 30px;
  max-width: 350px;
  margin-inline: auto;
  /* margin-inline:10px; */
}
#admin-reviews .reviews-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "search-bar search-bar" "filter-container filter-container";
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* display: grid;
  grid-template-columns: 2fr 5fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: 
  "ra rc"
  "rb rc"
  ;
  row-gap: 30px; */
}
#admin-reviews .review-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}
#admin-reviews .reviews-filter {
  background-color: #F8F8F8;
  padding-bottom: 15px;
}
#admin-reviews .rev-filter-icon {
  border: 1px solid #DDDDDD;
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  font-size: 23px;
}
#admin-reviews .rev-searchbox {
  height: 50px;
  width: 80%;
  display: grid;
  grid-template-columns: 2fr 1fr;
  border: 0px solid #D2D2D2;
}
#admin-reviews .search-input {
  border: 1px solid #D2D2D2;
  padding-left: 10px;
}
#admin-reviews .search-btn {
  display: grid;
  place-content: center;
  color: #fff;
  background-color: #AE845F;
  outline: none;
  border: none;
  font-size: 22px;
}
#admin-reviews .search-input:focus {
  outline: none;
}
#admin-reviews ::placeholder {
  font-size: 15px;
  /* text-align: center; */
  color: #b4b4b4;
  font-weight: 400;
}
#admin-reviews hover:hover {
  cursor: pointer;
}
#admin-reviews .filter-title {
  padding: 15px;
  background-color: #EEEEEE;
  font-size: 20px;
  font-family: "Playfair Display";
  font-weight: 500;
}
#admin-reviews .rev-date {
  padding-top: 20px;
  padding-left: 15px;
  padding-right: 25px;
}
#admin-reviews .date-title {
  font-size: 24px;
  font-family: "Playfair Display";
  color: black;
  font-weight: 400;
}
#admin-reviews .date-range {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  align-items: center;
}
#admin-reviews .date-range input {
  width: 45%;
}
#admin-reviews .apply {
  margin-top: 15px;
  width: 100%;
  height: 45px;
  background-color: #AE845F;
  font-weight: 500;
  font-size: 16px;
  color: white;
  display: grid;
  place-content: center;
}
#admin-reviews .review-main {
  /* border:1px solid blue; */
  padding: 5px;
}
#admin-reviews .review-title {
  width: 100%;
  color: black;
  font-family: "Playfair Display";
  font-size: 34px;
  font-weight: 500;
}
#admin-reviews .gold {
  color: #AE845F;
}
#admin-reviews .grey {
  color: rgba(128, 128, 128, 0.3);
}
#admin-reviews .review-page {
  margin-top: 10px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 3fr 1.75fr;
  grid-template-rows: 1fr 1.75fr 3fr;
  grid-template-areas: "b1 b2" "b3 b3" "b4 b5";
  column-gap: 10px;
  row-gap: 5px;
  border: 2.5px solid #EEE;
  padding: 25px 15px 9px 15px;
}
#admin-reviews .rev {
  /* border:1px solid black; */
  grid-area: b1;
}
#admin-reviews .rev-date2 {
  grid-area: b2;
  text-align: right;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.32px;
  /* border:1px solid grey; */
}
#admin-reviews .rev-product-name {
  grid-area: b3;
  font-size: 18px;
  font-weight: 700;
  color: black;
  display: flex;
  align-items: center;
  text-decoration: underline;
  letter-spacing: 0.4px;
  /* border:1px solid red; */
}
#admin-reviews .rev-content {
  grid-area: b4;
  font-size: 16px;
  font-weight: 400;
  color: black;
  /* border:1px solid green; */
}
#admin-reviews .rev-icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  grid-area: b5;
  font-size: 25px;
  /* border:1px solid orange; */
}
#admin-reviews .review-top-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  font-family: "Playfair Display";
  font-weight: 400;
  font-size: 20px;
  color: black;
}
#admin-reviews .rev-icon1 {
  margin-right: 14px;
}
#admin-reviews .cb {
  color: black;
}
#admin-reviews .rev-pro-img {
  display: none;
}
#admin-reviews .review-top-bar {
  display: none;
}
#admin-reviews .review-pro-img {
  display: none;
}
#admin-reviews .rev-date3 {
  display: none;
}
@media screen and (min-width: 400px) {
  #admin-reviews .rev-container {
    max-width: 85%;
  }
}
@media screen and (min-width: 1200px) {
  #admin-reviews {
    /* .img{
        width:40%;
        border:1px solid blue;
    }

    .product{
        width:40%;
        border:1px solid red;
    }

    .revs{
        width:70%;
        border:1px solid black;
    } */
  }
  #admin-reviews .review-pro-img {
    display: block;
  }
  #admin-reviews .rev-searchbox {
    width: 100%;
  }
  #admin-reviews .rev-date3 {
    display: block;
  }
  #admin-reviews .review-pro-img img {
    height: 92px;
    aspect-ratio: 1;
  }
  #admin-reviews .rev-container {
    max-width: 1190px;
  }
  #admin-reviews .review-page {
    padding: 17px 5px;
    margin-top: 0;
    margin-bottom: 0;
  }
  #admin-reviews .rev-filter-icon {
    display: none;
  }
  #admin-reviews .reviews-container {
    display: grid;
    grid-template-columns: 1fr 5fr;
    grid-template-rows: 100px 4fr;
    grid-template-areas: "a c" "b d" ". d";
    row-gap: 0;
    column-gap: 10px;
  }
  #admin-reviews .ra {
    grid-area: a;
    place-content: center;
    align-items: center;
  }
  #admin-reviews .rb {
    grid-area: b;
  }
  #admin-reviews .rc {
    grid-area: c;
  }
  #admin-reviews .rd {
    grid-area: d;
  }
  #admin-reviews .rf {
    grid-area: f;
    height: 1px;
  }
  #admin-reviews .review-top-bar {
    height: 80px;
    /* background-color: #D2D2D2; */
  }
  #admin-reviews .review-top {
    height: 100%;
  }
  #admin-reviews .review-main {
    margin-top: 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  #admin-reviews .review-title {
    display: none;
  }
  #admin-reviews .reviews-filter {
    background-color: #fff;
  }
  #admin-reviews .rev-date {
    background-color: #F8F8F8;
    padding-bottom: 19px;
  }
  #admin-reviews .review-top-bar {
    display: grid;
    grid-template-columns: 100px 220px 430px 80px;
    border: 1px solid #EEEEEE;
    place-content: center;
    /* padding-top: 15px; */
    /* place-content: center; */
    /* text-align: center; */
    column-gap: 5px;
  }
  #admin-reviews .review-page {
    grid-template-columns: 100px 220px 430px 80px;
    grid-template-rows: 100px;
    grid-template-areas: "a d e f" ". . e .";
    column-gap: 5px;
  }
  #admin-reviews .b0 {
    grid-area: a;
    text-align: left;
  }
  #admin-reviews .b1 {
    grid-area: b;
    display: flex;
    align-items: center;
    letter-spacing: 10px;
    /* justify-content: space-around; */
    margin-bottom: 10px;
  }
  #admin-reviews .b2 {
    display: none;
  }
  #admin-reviews .b3 {
    grid-area: d;
    flex-direction: column;
    align-items: unset;
    font-size: 16px;
    font-weight: 500;
    gap: 2px;
    /* text-align: center; */
  }
  #admin-reviews .rev-date3 {
    padding-top: 5px;
    color: #818181;
    font-size: 12px;
    font-weight: 400;
    text-decoration: underline;
    /* text-decoration-line: none !important; */
    text-decoration-color: white;
  }
  #admin-reviews .rev-price {
    text-decoration: underline;
    text-decoration-color: white;
  }
  #admin-reviews .b4 {
    grid-area: e;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-align: justify;
  }
  #admin-reviews .b5 {
    grid-area: f;
    justify-content: center;
  }
  #admin-reviews .rev-icon1 {
    margin-left: 15px;
  }
}

.filter-container {
  grid-area: filter-container;
  margin-top: 20px;
}
.filter-container .filters {
  font-family: "Playfair";
  font-size: 20px;
  padding: 10px 20px;
  margin: 0;
  background-color: #EEEEEE;
  border: 1px solid #EEEEEE;
}
.filter-container .search-date {
  background-color: #F8F8F8;
  margin: 0;
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "date-text date-text" "start-date end-date" "apply apply";
}

.banner {
  height: 256px;
  width: 100%;
  padding-bottom: 76px;
  background-image: url("/static/images/banner_raw.png");
}
.banner .review {
  height: 256px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.banner .review .page-title {
  font-family: "Playfair Display";
  font-weight: 500;
  color: white;
  font-size: 55px;
  text-align: center;
}
.banner .review .page-breadcrumbs {
  margin-top: 20px;
  text-align: center;
  color: white;
  line-height: 25px;
  font-weight: 400;
  font-size: 14px;
  font-family: "Roboto";
}
.banner .review .page-breadcrumbs .heading {
  color: white;
  text-decoration: none;
}
.banner .review .page-breadcrumbs .heading:hover {
  color: #ffbc00;
}

#product-list {
  margin-inline: auto;
  display: grid;
  grid-template-columns: 390px 790px;
  gap: 10px;
  max-width: 1200px;
  margin-top: 100px;
  padding-bottom: 0px;
}
#product-list #product-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#product-list #product-input h1 {
  font-size: 24px;
  color: #2A2A2A;
  font-family: "Playfair Display";
  font-weight: 400;
  margin-bottom: 30px;
}
#product-list #product-input .product-input-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#product-list #product-input .product-input-container .input-title sup {
  font-size: 15px;
  color: #E33131;
}
#product-list #product-input .product-input-container input,
#product-list #product-input .product-input-container select,
#product-list #product-input .product-input-container .product-select {
  border: 1px solid #DDD;
  width: 350px;
  height: 50px;
  padding: 8px;
}
#product-list #product-input .product-input-container input:focus {
  outline: none;
}
#product-list #product-input button, #product-list #product-input .caution, #product-list #product-input .btn-primary, #product-list #product-input .btn-caution, #product-list #product-input #product-item-update-page #product-item .form-input .caution, #product-item-update-page #product-item .form-input #product-list #product-input .caution {
  margin-top: 20px;
  background-color: #AE845F;
  color: white;
  font-weight: 400;
  padding: 1rem 1rem;
  width: 350px;
  height: 50px;
  display: flex;
  justify-content: center;
  outline: none;
  border: none;
  font-size: 16px;
}
#product-list #product-input .caution {
  border: 1px solid #E33131;
  background-color: white !important;
  color: #E33131;
  transition: background-color 200ms;
  font-size: 14px;
  text-decoration: none;
}
#product-list #product-input .caution:hover {
  background-color: #E33131 !important;
  color: white;
}
#product-list .product-box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#product-list .product-box h1 {
  font-family: "Playfair Display";
  color: #2A2A2A;
  font-size: 24px;
}
#product-list .product-box #product-grid {
  border: 1px solid #DDD;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#product-list .product-box #product-grid .product-types {
  font-family: Roboto;
  font-weight: 400;
  font-size: 12px;
  color: #767676;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 7px;
}
#product-list .product-box #product-grid .grid-2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 10px;
}
#product-list .product-box #product-grid .grid-2 div .product-name {
  font-family: Roboto;
  color: #1E1E1E;
  font-weight: 500;
  font-size: 18px;
}
#product-list .product-box #product-grid .grid-2 div .product-items {
  font-family: Roboto;
  color: #2A2A2A;
  font-weight: 400;
  font-size: 14px;
}
#product-list .product-box #product-grid .grid-2 a {
  background-color: #AE845F;
  color: white;
  text-decoration: none;
  font-weight: 300;
  font-size: 16px;
  width: 90px;
  height: 40px;
  display: grid;
  place-content: center;
}
#product-list .product-cats {
  font-family: Roboto;
  font-weight: 400;
  font-size: 12px;
  color: #767676;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 20px;
}

::placeholder {
  font-size: 15px;
  color: #B4B4B4;
}

@media screen and (max-width: 600px) {
  #product-list {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 600px) {
  #product-list #product-input {
    margin: 12px;
    max-width: 300px !important;
  }
}
#product-list #product-input form {
  display: flex;
  flex-direction: column;
}
#product-list #product-input form select {
  background-color: white;
}
@media screen and (max-width: 380px) {
  #product-list #product-input form input {
    width: 250px !important;
  }
}
#product-list #product-input form button, #product-list #product-input form .btn-primary, #product-list #product-input form .btn-caution, #product-list #product-input form #product-item-update-page #product-item .form-input .caution, #product-item-update-page #product-item .form-input #product-list #product-input form .caution, #product-list #product-input form .caution {
  width: 350px !important;
}
@media screen and (max-width: 380px) {
  #product-list #product-input form button, #product-list #product-input form .btn-primary, #product-list #product-input form .btn-caution, #product-list #product-input form #product-item-update-page #product-item .form-input .caution, #product-item-update-page #product-item .form-input #product-list #product-input form .caution, #product-list #product-input form .caution {
    width: 250px !important;
  }
}
@media screen and (max-width: 600px) {
  #product-list .product-box {
    margin: 12px auto;
    max-width: 320px;
  }
}
#product-list .product-box #product-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
  padding: 16px !important;
}
#product-list .product-box #product-grid img {
  height: 90px;
  aspect-ratio: 1;
  object-fit: cover;
}
#product-list .product-box #product-grid div .grid-2 {
  margin-top: 5px !important;
}
#product-list .product-box #product-grid div .grid-2 > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#product-list .product-box #product-grid div .grid-2 > div .product-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@media screen and (max-width: 600px) {
  #product-list .product-box #product-grid div .grid-2 > div .product-items {
    width: 78px;
  }
}

#qr_payments {
  margin-inline: auto;
  max-width: 90%;
  margin-top: 1rem;
}
#qr_payments .progress-bar {
  overflow: hidden;
  border: 2px solid #eee;
  border-radius: 10px;
  max-width: 850px;
  margin-inline: auto;
}
#qr_payments .progress-bar div {
  background-color: #ae845f;
  padding: 8px;
  white-space: nowrap;
}
#qr_payments section {
  border: 2px solid #eee;
  border-radius: 10px;
  padding: 10px 30px;
  margin: 1rem;
}
@media screen and (min-width: 1000px) {
  #qr_payments section {
    max-width: 850px;
    margin-inline: auto;
  }
}
#qr_payments section h1 {
  margin: 0;
}
#qr_payments section .transaction-details {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "a" ".";
  gap: 15px;
  padding: 1rem;
}
@media screen and (min-width: 1000px) {
  #qr_payments section .transaction-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: ". a";
    gap: 80px;
  }
}
#qr_payments section .transaction-details .customer-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#qr_payments section .transaction-details .customer-details .customer-amnt, #qr_payments section .transaction-details .customer-details .customer-name {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#qr_payments section .transaction-details .customer-details h1 {
  text-align: center;
  font-size: 24px;
}
@media screen and (min-width: 1000px) {
  #qr_payments section .transaction-details .customer-details h1 {
    text-align: left;
  }
}
#qr_payments section .transaction-details .customer-details .customer-amnt p:nth-child(1) {
  font-size: 15px;
  font-weight: 300;
}
#qr_payments section .transaction-details .customer-details .customer-amnt p:nth-child(2) {
  font-size: 16px;
  font-weight: 500;
}
#qr_payments section .transaction-details .customer-details .customer-name p:nth-child(1) {
  font-size: 14px;
  font-weight: 300;
}
#qr_payments section .transaction-details .customer-details .customer-name p:nth-child(2) {
  font-size: 16px;
  color: #767676;
  text-transform: capitalize;
}
#qr_payments section .transaction-details .customer-details .customer-add p:nth-child(1) {
  font-size: 16px;
  color: #000000;
  font-weight: 500;
  line-height: 32px;
}
#qr_payments section .transaction-details .customer-details .customer-add p {
  font-size: 14px;
  font-weight: 300;
  color: #000000;
  line-height: 16px;
}
#qr_payments section .transaction-details .qr-container {
  grid-area: a;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
#qr_payments section .transaction-details .qr-container #qrcode img {
  width: 200px;
}

.pagination-container {
  text-align: center;
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 100px;
  text-decoration: none !important;
}
.pagination-container .pagination-btn {
  background-color: white;
  color: #AE845F;
  border: 1px solid #AE845F;
  font-size: 14px;
  font-weight: 400;
  justify-content: center;
  width: 40px;
  line-height: 36px;
}
.pagination-container .current {
  color: white;
  background-color: #AE845F;
  border: 1px solid #AE845F;
}

/*# sourceMappingURL=main.css.map */