@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 !important;
  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  !important;
}
@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"
    "banner banner"
    "main main"
    "footer footer";
  grid-template-rows: 8rem 1fr;
  grid-template-columns: 24rem 1fr;
}
@media (max-width: 425px) {
  .page {
    grid-template-areas: "header header" "banner banner" "main main" "footer footer";
  }
}
@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;
}

/* 滚动时添加的样式 */
.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: 2.6rem 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: 2.6rem 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__link.active {
  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;
  }
}

.main {
  grid-area: main;
  padding: 4rem;
  /* padding-right: 0; */
  box-sizing: border-box;
  text-align: -webkit-center;


}

@media (max-width: 600px) {
  .main {
    padding-left: 0;
    padding: 0;
  }
}
.main__title {
  font-size: 3rem;
  margin: 1rem 0.4rem 3rem;
  text-align: left;
  /* display: none; */
}
@media (max-width: 425px) {
  .main__title {
    font-size: 2.5rem;
    display: block;
  }
}

.filters {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4rem;
}
@media (max-width: 425px) {
  .filters {
    justify-content: flex-start;
  }
}
.filters__btn {
  background: transparent;
  font-size: 1.7rem;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: 0.1s linear;
}
.filters__btn:hover, .filters__btn:hover > svg {
  stroke: var(--hovered-color);
  color: var(--hovered-color);
}
.filters__btn > svg {
  height: 1.9rem;
  margin-left: 0.4rem;
  transition: 0.1s linear;
}
.filters__btn--sort {
  margin-left: 1.6rem;
}
/* 排序下拉菜单 */
.filters__menu {
  position: absolute;
  background-color: #ffffff;
  margin-top: 35px;
  font-size: 1.4rem;
  line-height: 2.8rem;
  padding: 0;
  border: 1px solid #efefef;
  border-radius: 3px;
  list-style: none;
  user-select: none;
  display: none;
  z-index: 1000;
}
.filters__menu.show {
  display: block;
}
.filters__menu li {
  padding: 5px 30px;
  cursor: pointer;
}
.filters__menu li:hover {
  background-color: #e4e4e4;
}


.show {
  display: none;
}
@media (max-width: 425px) {
  .show {
    display: initial;
  }
}

@media (max-width: 425px) {
  .hide {
    display: none;
  }
}

/* 基础布局调整 */
.items {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5rem; /* 抵消item的左右margin */
  /* justify-content: center; */
  
}
@media (max-width: 600px) {
  .items {
    margin: 0 -2rem;
  }
}
@media (max-width: 375px) {
  .items {
    margin: 0 -2rem;
  }
}





.item {
  flex: 0 0 calc(25% - 10rem); /* 4列布局 */
  margin: 0 5rem 10rem 5rem; /* 左右5rem，下10rem */

}


/* 响应式断点调整 */
@media (max-width: 1200px) {
  .item {
    flex: 0 0 calc(33.333% - 10rem); /* 3列布局 */
  }
}

@media (max-width: 900px) {
  .item {
    flex: 0 0 calc(50% - 10rem); /* 2列布局 */
  }
}


@media (max-width: 600px) {
  .item {
    flex: 0 0 calc(100% - 4rem); /* 2列布局 */
    margin: 0 2rem 5rem 2rem;
  }
}







.item__position {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 比例 */
  height: 0;
  overflow: hidden;
  background: #f7f7f7;
  cursor: pointer;
}

.item__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease; /* 可选：添加悬停效果 */
}

.item__image:hover {
  transform: scale(1.05); /* 可选：悬停放大效果 */
}

.item__image--hue {
  /* filter: hue-rotate(130deg); */
}
.item__detail {
  font-size: 1.4rem;
  letter-spacing: 1px;
  text-align: left;
  cursor: pointer;
}


.item__detail p {
  margin: 0;
}
/* 名称 */
.detail-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.2rem;
}

/* 下标 */
.item_avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  padding-top: 2px;
  object-fit: cover;
  object-position: center;
}
.user_name {
  display: flex;
  align-items: flex-end;
  gap: 0rem;
  font-weight: 500;
  
}
.user_name a {
  /* display: inline; */
  color: #ffffff;
  background-color: #050505;
  padding: 0px 5px;
  text-align: center;
}
.user_name a:hover {
  color: #f6f6f6;
}

.pagination__page {
  text-align: center;
  font-size: 1.6rem;
}
.pagination__links {
  margin: 2rem 0 3rem;
  display: flex;
  justify-content: space-between;
}
.pagination__link {
  font-size: 1.8rem;
  display: flex;
  align-items: center;
}
.pagination__link > svg {
  --s: .6rem;
  height: 1em;
  transition: 0.1s linear;
}
.pagination__link:hover > svg {
  stroke: var(--hovered-color);
}

.basket {
  position: sticky;
  bottom: 0;
  width: 30rem;
  height: 6rem;
  /* border-radius: 0.4rem 0.4rem 0 0; */
  background: #000;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.4rem 2rem;
  box-sizing: border-box;
}
.basket:hover {
  background: #181818;
}


/* @media (max-width: 425px) {
  .basket {
    width: 0rem;
  }
} */

@media (max-width: 375px) {
  .basket {
    width: 100%;
  }
}

.basket__list {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f7f7f7;
  font-size: x-large;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.basket__item {
  height: 4rem;
}
.basket__item:not(:first-child) {
  margin-left: 1.4rem;
}
.basket__btn {
  width: 4rem;
  height: 4rem;
  border-radius: 4rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.1s linear;
}
.basket__btn:hover {
  background: #ffffff33;
}

.footer {
  grid-area: footer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4rem 0 2rem;
  border-top: 1px solid #0000004d;
}
.footer a:not(.footer__link) {
  border-bottom: 1px solid #00000066;
  padding-bottom: 0.4rem;
  transition: 0.1s linear;
}
.footer a:not(.footer__link):hover {
  border-bottom-color: #0000004d;
}
.footer__made-by {
  font-size: 1.6rem;
  margin: 0.8rem 0 1.4rem;
}
.footer__made-by > svg {
  fill: #5ab7e3;
  height: 1.4em;
  transform: translateY(4px);
}
.footer__made-by > a {
  font-weight: bold;
}
.footer__social {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.footer__link {
  width: 4rem;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4rem;
}
.footer__link:hover {
  background: #e6e6e6;
}
.footer__link > svg {
  height: 2.5rem;
}
.tea {
  /* width: 150px; */
  height: 32px;
  margin-left: 4rem;
}
.footer__credits {
  margin-top: 3rem;
  font-size: 1.4rem;
  text-align: center;
}

/* 标题文字动画 */
.char {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  overflow: hidden;
  box-sizing: border-box;
}