@charset "UTF-8";
/*

Beautiful shopping
• UI (User Interface) made using CSS Grid
• UX (User Experience) made using GreenSock's FLIP

Details:
--------------------------------
Click on any of the *Plant* to move it to the basket and if you didn't like the plant or you choose to select another plant click the plant that is inside the basket and it will be moved back to its original place — All will happen with beautiful and eye-catching animation. I set the basket UI limit to be able to hold four to five (depends on image size) plants, it can take more ...but then the basket UI would look broken, the plants are going to move outside the basket — Just clarifying, *It is on purpose*. I've used the word *click* but that doesn't mean you can't touch/tap the plant, if you're using touch screen devices, it gonna work fine, and yup, it's responsive!

*/
html {
  font-size: 62.5%;
}

body {
  --hovered-color: #606060;
  --hovered-background: #ebebeb;
  padding: 2rem 4rem;
  margin: 0;
  color: #050505;
  /* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;
  line-height: 1.6;
}
@media (max-width: 425px) {
  body {
    padding: 1rem;
  }
}

/* 一开始隐藏页面内容 */
#isVisible {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

/* 加载后添加 visible 类进行淡入 */
#isVisible.visible {
  opacity: 1;
}

a, a:link {
  color: #000;
  text-decoration: none;
  transition: 0.1s linear;
}
a:hover {
  color: var(--hovered-color);
}
a:focus {
  outline: none;
}

input:focus,
button:focus {
  outline: none;
}

/* 定义网格 */
.page {
  display: grid;
  grid-template-areas: 
    "header header";
  grid-template-rows: 8rem 1fr;
  grid-template-columns: 24rem 1fr;
}
/* @media (max-width: 425px) {
  .page {
    grid-template-areas: "header header";
  }
} */
/* @media (max-width: 375px) {
  .page {
    
    grid-template-rows: 6rem 1fr;
  }
} */

.header {
  grid-area: header;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
  /* 将Header固定再页面顶部 */
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  border-bottom: 2px solid #000;
}

/* 滚动时添加的样式 */
.header.scrolled {
  border-bottom: 2px solid lch(6.32% 0 296.81); /* 你喜欢的边框颜色 */
  /* box-shadow: 0 2px 10px rgba(0,0,0,0.05); */
}

@media (max-width: 375px) {
  .header {
    gap: 0.9rem;
  }
}
.header__logo-container {
  width: 24rem;
}
@media (max-width: 1024px) {
  .header__logo-container {
    width: auto;
  }
}
@media (max-width: 768px) {
  .header__logo-container {
    flex: 1;
  }
}
.header__logo {
  display: inline-block;
  background: #000;
  width: 3rem;
  height: 3rem;
  border-radius: 3rem;
}
.header__links {
  flex-grow: 1;
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  align-items: center;
}
@media (max-width: 768px) {
  .header__links {
    /* display: none; */
    /* flex-grow: 1;
    display: flex;
    gap: 0.0rem;
    justify-content: center;
    align-items: center; */
  }
}
.header__link {
  padding: 1.8rem 1rem;
  box-sizing: border-box;
  font-size: 1.7rem;
  border-bottom: 2px solid transparent;
}



.header__link::before {
  content: "";                    /* 关键属性：空内容 */
  display: inline-block;          /* 允许设置宽高 */
  width: 6px;                     /* 圆点宽度 */
  height: 6px;                    /* 圆点高度 */
  background-color: #000000;         /* 圆点颜色 */
  border-radius: 50%;             /* 圆形效果 */
  margin-right: 8px;              /* 圆点与文字间距 */
  vertical-align: middle;         /* 垂直对齐方式 */
  position: relative;
  top: -1px;                      /* 微调垂直位置 */
}

@media (max-width: 768px) {
  .header__link {
    padding: 1.8rem 0.5rem;
  }
  .header__link::before {
    content: "";                    /* 关键属性：空内容 */
    display: inline-block;          /* 允许设置宽高 */
    width: 0px;                     /* 圆点宽度 */
    height: 0px;                    /* 圆点高度 */
    background-color: #000000;         /* 圆点颜色 */
    border-radius: 50%;             /* 圆形效果 */
    margin-right: 0px;              /* 圆点与文字间距 */
    vertical-align: middle;         /* 垂直对齐方式 */
    position: relative;
    top: 0px;                      /* 微调垂直位置 */
  }
}

.header__link:hover::before {
  background-color: var(--hovered-color); /* 更深一级的橙色 */
}

.header__link:hover {
  border-bottom-color: var(--hovered-color);
}
.header__search-container {
  position: relative;
}

@media (max-width: 600px) {
  .header__search-container {
    /* width: 3.8rem;
    height: 3.8rem;
    border-radius: 3.8rem; */
    display: none;
    /* justify-content: center;
    align-items: center;
    background: var(--hovered-background); */
  }
  .header__link:hover {
    border-bottom-color: transparent;
  }
}
.header__search-container > svg {
  position: absolute;
  left: 1.2rem;
  top: 48%;
  transform: translateY(-50%);
}
@media (max-width: 375px) {
  .header__search-container > svg {
    position: initial;
    transform: translate(-1px, -1px);
  }
}
.header__search-container:hover .header__search, .header__search-container:focus-within .header__search {
  background: var(--hovered-background);
}
.header__search {
  width: 18.4rem;
  height: 4.4rem;
  border-radius: 100rem;
  background: #f5f5f5;
  border: 0;
  box-sizing: border-box;
  padding: 0.4rem 1.4rem 0.4rem 4.6rem;
  font-size: 1.7rem;
  transition: 0.1s linear;
}
.header__search::-webkit-input-placeholder {
  color: #b3b3b3;
}
@media (max-width: 375px) {
  .header__search {
    display: none;
  }
}
.header__user {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.header__user > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 4rem;
  font-size: 1.7rem;
}
.header__user > a:hover {
  background-color: var(--hovered-background);
}
.header__profile:link {
  background: url("");
  background-size: cover;
}

/* .sidebar {
  grid-area: sidebar;
} */
/* @media (max-width: 425px) {
  .sidebar {
    display: none;
  }
} */
.sidebar__title {
  font-size: 2.8rem;
  font-weight: normal;
  margin-top: 3.4rem;
}
.sidebar__category:not(:first-of-type) .sidebar__heading {
  border-top: 1px solid #00000033;
  margin: 4rem 0 1.6rem;
}
.sidebar__heading {
  font-size: 1.6rem;
  margin: 2rem 0 1.6rem;
  padding-top: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: 0.1s linear;
}
.sidebar__heading:hover {
  color: var(--hovered-color);
}
.sidebar__heading > svg {
  height: 2.2rem;
}
.sidebar__options {
  padding: 0 1rem;
  box-sizing: border-box;
}

.check {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  cursor: pointer;
  transition: 0.1s linear;
}
.check:hover {
  color: var(--hovered-color);
}
.check__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.check__input:checked + .check__checkbox {
  background: #000;
}
.check__checkbox {
  width: 2rem;
  height: 2rem;
  border: 1px solid #00000066;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.check__checkbox > svg {
  height: 2rem;
}
.check__text {
  font-size: 1.6rem;
  margin: 0;
  margin-left: 0.8rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.color {
  display: inline-block;
  width: 3.4rem;
  height: 3.4rem;
  margin: 0.5rem;
  border-radius: 3.4rem;
  background: hsl(var(--hue), 60%, 60%);
  cursor: pointer;
}

.banner {
  grid-area: banner;
  padding: 4rem 4rem 2rem 4rem;
  box-sizing: border-box;
  /* text-align: -webkit-center; */
}

.banner_img img {
  width: 100%;
}

@media (max-width: 600px) {
  .banner {
    padding: 0rem;
  }
}
@media (max-width: 425px) {
  .banner {
    padding: 0rem;
  }
}
@media (max-width: 375px) {
  .banner {
    padding: 0rem;
  }
}