body {
  /* font-family: "Misans"; */
}
.TenorSans {
  font-family: "TenorSans";
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* user-select: none; */
  /* 防止图片拖拽 */
  -webkit-user-drag: none;

  position: relative;
}
:root {
  font-size: clamp(14px, 0.83333vw, 16px);
  --px: max(calc((100vw - 1760px) / 2), 1.2rem);
  --theme-color: #785330;
  --transition-default: all 0.4s ease-in-out;
}
@media (min-width: 1024px) {
  :root {
    --px: max(calc((100vw - 1760px) / 2), 6rem);
  }
}
.text-theme {
  color: var(--theme-color);
}
.transitionDefault {
  transition: var(--transition-default);
}
.lrPadding {
  padding-left: var(--px);
  padding-right: var(--px);
}
/* 滚动条样式 */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-thumb {
  background: var(--theme-color);
  border-radius: 1.25rem;
  width: 2px;
  height: 4px !important;
}
/* 隐藏密码显示图标 */
input[type="password"]::-ms-reveal,
input[type="password"]::-webkit-reveal,
input[type="password"]::-webkit-eye-dummy {
  display: none !important;
}

/* 针对 Safari iOS */
input[type="password"]::-webkit-credentials-auto-fill-button {
  display: none !important;
}
/* ✅ 所有浏览器通用 */
input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; /* Chrome, Safari, Edge */
  margin: 0;
}

[tr-enter] {
  transition: all 1.4s;
}
[tr-enter=""] {
  transform: translateY(2rem);
  opacity: 0;
}
[tr-enter-left=""] {
  transform: translateX(-10vw);
  opacity: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
[bg] {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
button {
  outline: none;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  user-select: none;
}
[button] {
  border: none;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  border: 1px solid var(--bg, black);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: max-content;
  gap: 0.5rem;
  color: var(--t, white);
  background: linear-gradient(
    to right,
    var(--bg1, rgba(0, 0, 0, 0.2)) 50%,
    var(--bg, black) 50%
  );
  background-size: 205% 100%;
  background-position: 99% 0;
  transition: var(--transition-default);
  user-select: none;
  font-size: 1rem;
}
[button="arrow"]:after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2 10H18 M18 10 L14 6 M18 10 L14 14' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  transition: var(--transition-default);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2 10H18 M18 10 L14 6 M18 10 L14 14' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}
[button="close"]:after {
  content: "";
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2 10H18' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: 80%;
  mask-position: center;
}
[button="open"]:after {
  content: "";
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2 10H18 M10 2V18' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: 80%;
  mask-position: center;
}
[button]:hover {
  background-position: 1% 0;
  color: var(--t1, white);
  border-color: var(--bg1, rgba(0, 0, 0, 0.2));
}
/* [button]:hover::after {
  content: "";
  transform: translateX(40%);
} */
h1 {
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
}
p {
  line-height: 1.4;
}

@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
}
[card] {
  transition: var(--transition-default);
}
[card]:hover {
  transform: translateY(-10px);
}
[line]:after {
  content: "";
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: var(--transition-default);
  position: absolute;
  bottom: 0;
  left: 0;
}
[line]:hover:after {
  content: "";
  width: 100%;
}

[circleButton] {
  background: radial-gradient(
      circle at center,
      var(--theme-color) 50%,
      transparent 50%
    )
    no-repeat center;
  background-size: 0 0;
  transition: var(--transition-default);
}
[circleButton]:hover {
  background-size: 200% 200%;
  border-color: var(--theme-color);
  color: white;
  box-shadow: var(--theme-color) 0 0 6px;
}

@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
input,textarea {
  border: none;
  outline: none;
  background: transparent;
  font-size: 1rem;
}
:root {
  --swiper-scrollbar-bg-color: rgba(255, 255, 255, 0.2);
  --swiper-scrollbar-drag-bg-color: white;
}
/**swiper*/
.swiper-scrollbar {
  width: 18.75rem !important;
  height: 1px !important;
  position: relative !important;
  left: 0 !important;
}

/**分页**/
.swiper-pagination-current {
  font-size: 1.5rem;
  color: white;
}
.swiper-pagination {
  --swiper-pagination-bullet-width: 1.25rem;
  --swiper-pagination-bullet-height: 1.25rem;
  --swiper-pagination-bullet-inactive-color: transparent;
  --swiper-pagination-bullet-inactive-opacity: 0.5;
  --swiper-pagination-color: #2b2218;
  --swiper-pagination-bullet-opacity: 0.6;
  position: relative !important;
  width: max-content !important;
}
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
  border: 1px solid #585048;
}
.swiper-pagination-total {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.4);
}

/* 翻页 */
#pages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
#pages > li {
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  font-size: 1rem;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
#pages a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#pages > li:last-of-type :is(a, span),
#pages > li:first-of-type :is(a, span) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
#pages > li:first-of-type:before {
  content: "";
  display: inline-block;
  width: 60%;
  height: 60%;
  background-color: black; /* 通过 color 控制图标颜色 */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M60 30 L40 50 L60 70' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M60 30 L40 50 L60 70' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
}

#pages > li:last-of-type:before {
  content: "";
  display: inline-block;
  width: 60%;
  height: 60%;
  background-color: black; /* 通过 color 控制图标颜色 */

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M40 30 L60 50 L40 70' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
}
#pages > li:hover {
  background: black;
  color: white;
}
#pages > li:first-of-type:hover:before,
#pages > li:last-of-type:hover:before {
  content: "";
  background: white;
}
#pages :is(.active,.currentPage) {
  background: black;
  color: white;
}

.productImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-default);
  &:hover {
    transform: scale(1.1);
  }
}
:has(> .productImg) {
  aspect-ratio: 1/1.1;
  overflow: hidden;
}

th {
  font-weight: normal;
}

/* 1. 重置 dialog 默认样式 */
/* 1. 重置 dialog 默认样式 */
dialog {
  /* 去除默认边框和内外边距 */
  border: none;
  padding: 0;
  /* 背景色、圆角、阴影 */
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  /* 宽度限制 */
  max-width: 90vw;
  max-height: 90vh;
  min-width: 400px; /* 默认宽度，可按需调整 */
  /* 弹出动画（可选） */
  animation: dialogFadeIn 0.25s ease-out;
  /* 溢出处理 */
  overflow: hidden;
  /* 内部内边距（也可在内容区单独加） */
  padding: 24px 32px;
  margin: auto;
  position: fixed;
  inset: 0;
  z-index:99;
  display: flex;
}
dialog:not([open]) {
  display: none !important;
}
dialog *:focus{
    outline: none;
}
/* 2. 蒙版（背景遮罩） */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px); /* 背景模糊效果 */
  animation: backdropFadeIn 0.25s ease-out;
}

/* 3. 简单动画（淡入 + 轻微上浮） */
@keyframes dialogFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes backdropFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 4. 针对移动端适配（让弹窗占满屏幕） */
@media (max-width: 640px) {
  dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 80dvh;
    border-radius: 0;
    padding: 20px 16px;
    margin: auto;
    animation: dialogSlideUp 0.3s ease-out;
  }

  @keyframes dialogSlideUp {
    from {
      transform: translateY(30px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}
/* 省略两行 */
.ellipsis1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height:1.4;
}
/* 省略两行 */
.ellipsis2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height:1.4;
}
.needBorder{
  border:solid 1px #D3D2D0;
}
.color-active {
    box-shadow:
            0 0 0 3px white,
            0 0 0 5px rgba(0, 0, 0, 0.5);
}
.size-active {
    border-color: #836347;
}