/* =========================
   全局基础
   ========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --header-height: 72px;
  --container-width: 1200px;

  --bg-body: #f3f4f6;
  --accent: #ff6b1a;

  --text-main: #111827;
  --text-muted: #6b7280;

  --card-bg: #ffffff;
  --border-soft: rgba(15, 23, 42, 0.06);

  /* 阴影整体调得很轻 */
  --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.1);

  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-pill: 999px;

  --IconFF1: "Material Icons";
  --IconFF: var(--IconFF1);

  /* JS 会根据当前 banner 的 data-color 动态更新这个主色 */
  --banner-color: #303545;
}

/* 字体引入 */
@import url("../../../assets/test/fonts/css2.css");
@import url("../../../assets/test/fonts/icon.css");

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei", sans-serif;
  color: var(--text-main);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg-body); /* 底色统一用浅灰 */
}


/* 主体区域占满中间空间 */
#page_main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* 头部、底部不参与拉伸，只按内容高度排布 */
#site_header {
  flex-shrink: 0;
}

#site_footer {
  flex-shrink: 0;
  margin-top: auto; /* ⭐ 把 footer 推到页面最底部 */
}

/* 公共宽度容器 */
.container {
  width: min(100% - 48px, var(--container-width));
  margin-inline: auto;
}

/* 通用按钮 */
.btn {
  border: none;
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, color 120ms ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn-dark {
  background: #111827;
  color: #ffffff;
}

.btn-dark:hover {
  background: #020617;
}

/* Footer 里面的 logo 用（通用组件，先留在全局） */
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #ffffff;
}

.logo-mark {
  font-size: 20px;
}

.logo-text {
  font-size: 18px;
}

/* =========================
   Hero 区域 + 动态背景
   ========================= */

.hero-section {
  position: relative;
  padding: 24px 0 40px;
}

/* 整个 Hero 容器 */
#home_cover {
  position: relative;
}

/* 内容区：类似 SEAGM 的 .inner */
#home_cover .hero-inner,
#home_cover .inner {
  position: relative;
  width: min(1440px, 100vw - 200px);
  margin-inline: auto;
  box-sizing: border-box;
}

/* 背景块：铺满整个视口宽度，覆盖 banner + NEW & HOT 区域 */
#home_slider_bg {
  position: absolute;
  /* 略微顶上去一点，让背景贴着 header 底部 */
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 620px; /* 这块高度基本覆盖 banner + NEW & HOT */
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

/* 上层：根据 banner 主色做纵向渐变（到下方过渡为页面灰白） */
#home_slider_bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--banner-color) 90%, transparent) 0%,
    color-mix(in srgb, var(--banner-color) 70%, #ffffff 30%) 35%,
    color-mix(in srgb, var(--banner-color) 25%, #f3f4f6 75%) 65%,
    #f3f4f6 100%
  );
  transition: background 600ms ease-out;
}

/* 底层：SVG 背景图，带一点透明度，能隐约透出来 */
#home_slider_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../../../assets/test/img/home_bg.svg')
    no-repeat top center / cover;
  opacity: 0.45;        /* SVG 可见度，想更明显就调大一点，例如 0.6 */
  pointer-events: none;
}

/* =========================
   主 Banner Swiper
   ========================= */

#home_slider {
  position: relative;
  z-index: 1;
  padding-bottom: 32px;
  width: 100%;
}

#home_slider .list {
  display: flex;
  align-items: center;
}

/* 关键：
 * 1. slide 宽度调小一点，让左右两侧预览更窄
 * 2. 两侧露出的宽度 ≈ 36px（差不多接近 SEAGM）
 */
#home_slider .slide {
  width: calc(100% - 72px); /* 之前是 100% - 120px，现在更靠近一点 */
  max-width: 1120px;
  transition: transform 300ms ease, opacity 300ms ease, filter 300ms ease;
  transform-origin: center center;
  opacity: 0.25;
  filter: grayscale(55%);
}

/* 中间主图 */
#home_slider .slide.swiper-slide-active {
  transform: scale(1);
  opacity: 1;
  filter: grayscale(0);
}

/* 左右预览：稍微缩小一点 + 半透明 */
#home_slider .slide.swiper-slide-prev,
#home_slider .slide.swiper-slide-next {
  transform: scale(0.92);
  opacity: 0.7;
  filter: grayscale(35%);
}

/* 图片本身：阴影极轻 */
#home_slider .img {
    box-shadow: none !important;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.10); /* 非常轻的阴影，如果还嫌明显就改成 none */
}

#home_slider picture,
#home_slider img {
  display: block;
  width: 100%;
  height: clamp(260px, 32vw, 380px);
  object-fit: cover;
}

/* =========================
   左右导航箭头区域
   ========================= */

#home_slider .navigation {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2em;
  pointer-events: none;
}

/* nav 本身：固定尺寸，大致 172×banner 高度 */
#home_slider .nav {
  width: 172px;
  height: clamp(260px, 32vw, 380px);
  pointer-events: initial;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#home_slider .nav.prev {
  justify-content: flex-start;
}

#home_slider .nav.next {
  justify-content: flex-end;
}

/* hover 的暗角背景，只覆盖 nav 区域 */
#home_slider .nav::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.28), transparent 70%);
  opacity: 0;
  transition: opacity 260ms ease;
}

#home_slider .nav:hover::after {
  opacity: 1;
}

/* 箭头 icon（Material Icons） */
#home_slider .nav::before {
  content: attr(icon);
  display: block;
  font-size: 3em;
  width: 1em;
  height: 1em;
  line-height: 1;
  overflow: hidden;
  opacity: 0;
  transition: opacity 300ms;
  color: #fff;
}

/* hover 时显示箭头 */
#home_slider .nav:hover::before {
  opacity: 1;
}

/* Material Icons 映射（供整个站点用） */
[icon]::before,
[icon-only]::before,
[icon-after]::after {
  font-family: var(--IconFF);
  font-style: normal;
  speak: none;
  display: block;
  width: 1em;
  height: 1em;
  line-height: 1;
  overflow: hidden;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* =========================
   分类区域
   ========================= */

.category-section {
  margin-top: 32px;
  margin-bottom: 32px;
}

.category-section .section-header {
  margin-bottom: 16px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.category-card {
  padding: 18px 10px;
  text-align: center;
  border-radius: var(--radius-md);
  background: #ffffff;
  border: 1px solid var(--border-soft);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
  font-size: 13px;
  color: #111827;
}

/* =========================
   活动推荐
   ========================= */

.news-section {
  background: #f3f4f6;
  padding: 32px 0 40px;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.news-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
}

.news-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.news-info {
  padding: 12px 14px 14px;
}

.news-info h4 {
  margin: 0 0 6px;
  font-size: 14px;
}

.news-info p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* =========================
   响应式
   ========================= */

@media (max-width: 1024px) {
  .offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding-top: 16px;
  }

  #home_cover .hero-inner,
  #home_cover .inner {
    width: 100%;
    padding-block: 18px 26px;
  }

  #home_slider .slide {
    width: 100%;
  }

  #home_slider .slide.swiper-slide-prev,
  #home_slider .slide.swiper-slide-next {
    display: none;
  }

  #home_slider .navigation {
    display: none;
  }

  .exclusive-offers {
    margin-top: 12px;
  }

  .offer-grid {
    grid-template-columns: 1fr;
  }

  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .news-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================
   覆盖 Banner 左右导航箭头
   不再依赖 Google 字体，避免出现「ch」
   ========================= */

/* 先清掉原先 ::before 用 attr(icon) 的内容 */
#home_slider .nav::before {
    content: "";
}

/* 自己画一个圆形按钮 + 箭头 */
#home_slider .nav.prev::before,
#home_slider .nav.next::before {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 40px;
    line-height: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;
    border-radius: 999px;

    /*background: rgba(17, 24, 39, 0.65);*/
    color: #ffffff;

    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.45);
    transform: translateY(2px);
    transition:
        background 160ms ease,
        transform 160ms ease,
        box-shadow 160ms ease;
}







/* =========================
   重新定义 Banner 左右导航
   - 去掉整块阴影层
   - 小号箭头按钮
   - 离两侧远一点
   ========================= */

/* 去掉原来 nav 自带的背景/阴影 */
#home_slider .nav {
    background: transparent !important;
    box-shadow: none !important;
}

/* 完全取消原来的遮罩层（避免那条生硬的边线） */
#home_slider .nav::after {
    content: none !important;
}

/* 小号圆形箭头按钮 */
#home_slider .nav.prev::before,
#home_slider .nav.next::before {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;
    border-radius: 999px;

    /*background: rgba(17, 24, 39, 0.85);*/
    color: #ffffff;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 18px;
    line-height: 1;

    transform: translateY(0);
    transition:
        background 160ms ease,
        transform 160ms ease;
}

/* 左右箭头字符 */
#home_slider .nav.prev::before {
    content: "‹";
}

#home_slider .nav.next::before {
    content: "›";
}

/* hover 稍微亮一点 + 轻微放大，不要阴影块 */
#home_slider .nav:hover::before {
    background: rgba(17, 24, 39, 1);
    transform: scale(1.05);
}

/* 让左右箭头离两侧远一点 */
#home_slider .nav.prev {
    margin-top: -20px;
    left: -4%;   /* 不够远就再调大一点 */
}

#home_slider .nav.next {
    margin-top: -20px;
    right: -4%;
}


/* =========================
   覆盖 Banner 左右导航样式
   - 不要遮罩层，不要圆圈
   - 只显示一个小箭头
   ========================= */

/* 调整导航容器：左右留一点边距 */
#home_slider .navigation {
    padding-inline: 80px;    /* 箭头离两侧远一点，不够就再调大 */
}

/* nav 本身：缩小为点击热点，透明背景 */
#home_slider .nav {
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 完全取消原来的那块阴影遮罩 */
#home_slider .nav::after {
    content: none !important;
}

/* 重新定义箭头：用普通字体渲染，不再用 icon 字体 */
#home_slider .nav::before {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 22px;          /* 箭头大小，大/小随便改 */
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    opacity: 1;
    transform: translateY(0);
    transition: transform 120ms ease, color 120ms ease;
}

/* 左右箭头字符 */
#home_slider .nav.prev::before {
    content: "‹";
}

#home_slider .nav.next::before {
    content: "›";
}

/* hover 上去只轻微变化一下，不要阴影块 */
#home_slider .nav:hover::before {
    transform: translateY(-1px);
    color: #f9fafb;
}



#global_nav > .inner.container,
#main_nav  > .inner.container {
    width: min(1440px, calc(100% - 80px)); /* 左右各 40px */
    margin-inline: auto;
}



/* 默认隐藏 */
.cm-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease-out;
}

.cm-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}



/* =========================
   手机/Pad：留边距 + 滑动不乱 + 去掉底部灰影
   ========================= */
@media (max-width: 1024px) {

  /* 1) 左右边距（你要的“至少有点边距”） */
  #home_cover .hero-inner,
  #home_cover .inner {
    width: 100% !important;
    padding-inline: clamp(12px, 3vw, 20px);
  }

  /* 2) 关键：不要用 !important 改 width，让 Swiper 自己算宽度 */
  #home_slider {
    overflow: hidden;         /* 防止边缘漏出 */
    padding-bottom: 0;        /* 可选：去掉 slider 自己的底部空隙 */
  }

  #home_slider .slide {
    max-width: none;
    opacity: 1;
    filter: none;
    transform: none;
    /* ❌ 不要写 width:100% !important; 会导致滑动错乱 */
  }

  /* 3) 关键：不要 display:none prev/next（会导致切换过程中闪/错乱） */
  #home_slider .slide.swiper-slide-prev,
  #home_slider .slide.swiper-slide-next {
    display: block !important; /* 如果你之前写过 display:none，这里强行救回来 */
    opacity: 1;
    filter: none;
    transform: none;
  }

  /* 4) 你红框那个“灰色透明底/阴影”——就是 box-shadow */
  #home_slider .img {
    box-shadow: none !important;
  }

  /* 5) 移动端一般不需要左右大导航热区 */
  #home_slider .navigation {
    display: none !important;
  }
}
/* =========================
   Mobile：Banner 22/9 + 顶部间距收紧（不影响 PC）
   ========================= */
@media (max-width: 768px){

  /* 1) Hero 整体上边距减少 */
  .hero-section{
    padding-top: 8px !important;     /* 原来 16px -> 更紧 */
    padding-bottom: 22px !important; /* 轻微收一点 */
  }

  /* 2) 你移动端 inner 之前有 padding-block：再收紧上方 */
  #home_cover .hero-inner,
  #home_cover .inner{
    padding-top: 10px !important;     /* 原来 18px -> 更紧 */
    padding-bottom: 18px !important;
  }

  /* 3) Swiper banner：固定 22/9 */
  #home_slider{
    padding-bottom: 16px !important; /* 原来 32px -> 收紧 */
  }

  #home_slider .img{
    aspect-ratio: 23 / 8 !important;
    border-radius: 18px;
  }

  #home_slider picture,
  #home_slider img{
    height: 100% !important;
    width: 100% !important;
    object-fit: cover;
  }

  /* 4) 背景块也跟着收一些，避免顶部看起来“空” */
  #home_slider_bg{
    top: -40px !important;     /* 原 -40 / -24 -> 更贴近 header */
    height: 420px !important;  /* 你可在 380~460 微调 */
  }

  /* 5) 如果你用的是 Bootstrap 的 #homeHero 那套，也同步 22/9 */
  .u-hero #homeHero .carousel-inner{
    aspect-ratio: 22 / 9 !important;
    border-radius: 18px;
  }

  .u-hero #homeHero .carousel-item,
  .u-hero #homeHero .carousel-item a{
    height: 100%;
    display: block;
  }

  .u-hero #homeHero .carousel-item img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
  }
}