:root{
  --brand-accent:#0ea5e9;--ink:#0f172a;--muted:#64748b;--surface:#fff;--radius:16px;
}
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.container,.wrap,.section,.content{max-width:1200px;margin-left:auto;margin-right:auto}
.card,.feature,.panel{background:var(--surface);border-radius:var(--radius);box-shadow:0 1px 0 rgba(2,6,23,.04),0 8px 30px rgba(2,6,23,.06);overflow:hidden}
.section-title{font-weight:700;font-size:clamp(20px,2.4vw,30px);margin:32px 0 10px;letter-spacing:.2px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;letter-spacing:.3px;background:rgba(14,165,233,.1);color:#0369a1;border:1px solid rgba(14,165,233,.2)}
.hero--seaside{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/9;margin:28px auto;box-shadow:0 20px 60px rgba(2,6,23,.18)}
.hero--seaside .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,.25) 10%,rgba(2,6,23,.55) 100%)}
.hero--seaside h1,.hero--seaside p{position:absolute;left:4%;bottom:6%;right:4%;color:#fff;text-shadow:0 8px 30px rgba(0,0,0,.4);max-width:720px}
.hero--seaside h1{font-size:clamp(24px,3.6vw,44px);margin-bottom:8px}
.hero--seaside p{font-size:clamp(14px,1.8vw,18px);opacity:.95}
/* Slider */
.seaside-slider{position:relative;margin:28px auto;border-radius:18px;overflow:hidden;aspect-ratio:29/22;}
@media (min-width:1200px){.seaside-slider{aspect-ratio:29/20}}
.seaside-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.seaside-slide.is-active{opacity:1}
.seaside-slide img{width:100%;height:100%;object-fit:cover;display:block}
.fade-in{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.fade-in.appear{opacity:1;transform:none}


/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Source+Sans+3:wght@300;400;600&display=swap');
/* Font Awesome图标支持 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* ========== TOKENS / RESET ========== */
:root{
  /* colors */
  --bg:#ffffff;
  --text:#111111;
  --muted:#6b7280;
  --accent:#4b3df6;
  --accent-dark:#2f27c9;
  --border:#e5e7eb;
  --soft:#f7f7f8;
  --footer:#0c0f14;

  /* fonts */
  --font-heading: "Marcellus", serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --w-heading: 400;
  --w-body: 300;
  --track-lg: .08em;
  --track-md: .06em;

  /* image sizes */
  --prod-card-size: 220px;
  --gallery-size:   220px;
  --pdp-main-max:   520px;
  --pdp-thumb-size: 96px;
  --hero-max-h:     420px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{
  background:var(--bg); color:var(--text);
  font-family: var(--font-body);
  font-weight: var(--w-body);
  font-size:16px; line-height:1.6; letter-spacing:.02em;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* Helpers */
.container{ width:min(1200px, 92vw); margin-inline:auto; }
main{ min-height:52vh; }

/* ========== HEADER / NAV ========== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:#fff; border-bottom:1px solid var(--border);
  transition: box-shadow .2s ease;
  backdrop-filter:saturate(180%) blur(6px);
}
.site-header .nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 2px;
}
.brand{
  font-family: var(--font-heading);
  font-weight: var(--w-heading);
  letter-spacing: var(--track-md);
  text-transform: uppercase;
}
.menu a{
  margin-left:22px; font-size:15px;
  font-family: var(--font-body); font-weight: 400;
}
.menu a:hover{ color:var(--accent); }

/* Header shadow on scroll */
@supports (animation-timeline: scroll()) {
  body{ scroll-timeline-name: page; scroll-timeline-axis: block; }
  .site-header{ animation: headerShadow both linear; animation-timeline: page; animation-range: 0 100px; }
  @keyframes headerShadow{
    from{ box-shadow:none; }
    to{ box-shadow:0 4px 20px rgba(0,0,0,.06); }
  }
}

/* ========== BUTTONS ========== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:999px; border:1px solid transparent;
  transition: transform .08s ease, background-color .15s ease, border-color .15s ease;
  will-change: transform;
  font-family: var(--font-body); font-weight:600; letter-spacing:.02em;
  cursor:pointer;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn-dark{ background:var(--text); color:#fff; }
.btn-dark:hover{ background:#000; }
.btn-light{ background:#fff; border-color:var(--border); color:var(--text); }
.btn-light:hover{ border-color:#c7cad1; }
.btn-xl{ padding:16px 22px; font-weight:600; }
.w-100{ width:100%; }

/* ========== HERO（基础） ========== */
.hero{ padding:56px 0 32px; }
.hero-inner{ display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:center; }
.hero-copy h1{
  font-family: var(--font-heading);
  font-weight: var(--w-heading);
  letter-spacing: var(--track-md);
  text-transform: uppercase;
  font-size: 36px;
  margin:0 0 8px;
}
.hero-copy p{
  font-family: var(--font-body); font-weight: var(--w-body);
  margin:0 0 18px;
}
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }

/* ======= HERO：IMG版（完整显示图片） ======= */
.hero.hero--image{
  position: relative;
  min-height: clamp(420px, 62vh, 820px);
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* 主图 */
.hero-figure{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
  object-fit: contain;          
  object-position: center;
}
.hero-figure img{ object-fit: contain; } 

/* 可选渐变（若页面里无此元素，不影响） */
.hero-gradient{
  position: absolute; 
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0,0,0,.56) 0%,
    rgba(0,0,0,.32) 32%,
    rgba(0,0,0,0)   70%);
  z-index: 2;
  pointer-events: none;
}

/* 文案层盖在最上面 */
.hero-layer{
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
  width: 100%;
}

/* 文案左右边距与最大宽度 */
.hero-copy{ 
  margin-left: clamp(16px, 6vw, 80px); 
  max-width: 560px;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* ========== FEATURES（六宫格） ========== */
.features{ padding:36px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#fafafa; }
.features-grid{
  display:grid; grid-template-columns: repeat(6, 1fr); gap:24px; text-align:center;
}
.feature .icon{ font-size:28px; margin-bottom:8px; }
.feature h3{
  font-family: var(--font-heading);
  font-weight: var(--w-heading);
  text-transform: uppercase;
  letter-spacing: var(--track-md);
  font-size:16px; margin:6px 0;
}
.feature p{
  font-family: var(--font-body); font-weight: var(--w-body);
  color:var(--muted); font-size:14px; margin:0;
}

/* ========== SECTION / TITLES ========== */
.section{ padding:56px 0; }
.section-title{
  font-family: var(--font-heading);
  font-weight: var(--w-heading);
  text-transform: uppercase;
  letter-spacing: var(--track-lg);
  font-size:22px;
  margin:0 0 18px;
}
.sub-title{
  font-family: var(--font-heading);
  letter-spacing:.06em;
  font-size:18px;
  margin:6px 0 10px;
}

/* ========== PRODUCTS GRID（热门产品） ========== */
.product-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:24px;
}
.product-card{
  border:1px solid var(--border); border-radius:12px; padding:14px; background:#fff;
  text-align:center; position:relative; display:flex; flex-direction:column; align-items:center;
  overflow:hidden;
}
.product-card .thumb{
  position:relative; z-index:1;
  width: var(--prod-card-size); height: var(--prod-card-size);
  margin: 0 auto 12px;
  border-radius:10px; overflow:hidden;
  border:1px solid var(--border); background:var(--soft);
}
.product-card img{ width:100%; height:100%; object-fit:cover; }
.product-card .btn{ position:relative; z-index:2; }
.product-title{
  font-family: var(--font-body); font-weight:600;
  font-size:16px; margin:10px 0 6px;
}
.price{ font-weight:600; margin-bottom:10px; }

/* ========== LEARN CARDS（三张图） ========== */
.section--learn{ background:#fafafa; }
.card-row{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; }
.learn-card{ position:relative; display:block; border-radius:14px; overflow:hidden; color:var(--text); }
.learn-card img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 16/10; }
.learn-card h3{
  position:absolute; left:12px; bottom:12px; margin:0;
  background:rgba(255,255,255,.9); padding:6px 10px; border-radius:8px; font-size:16px;
  font-family: var(--font-body); font-weight:600;
}

/* ========== GALLERY（四张产品图） ========== */
.gallery{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; justify-items:center;
}

.gallery img{
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:10px;
  transition:transform .25s ease;
  display:block;
}

.gallery img:hover{ transform:scale(1.04); }

/* ========== PDP（产品详情） ========== */
.pdp{ padding:48px 0; }
.pdp-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:start; }
.pdp-media > img{
  width:100%; max-width: var(--pdp-main-max); height:auto;
  object-fit:contain; display:block; margin-inline:auto;
  border-radius:14px; border:1px solid var(--border); background:var(--soft);
}
.pdp-thumbs{
  display:grid; grid-template-columns: repeat(4, var(--pdp-thumb-size));
  gap:10px; justify-content:start; margin-top:10px;
}
.pdp-thumbs img{
  width: var(--pdp-thumb-size); height: var(--pdp-thumb-size);
  object-fit:cover; border-radius:10px; border:1px solid var(--border); background:#fff;
}
.pdp-info h1{
  font-family: var(--font-heading);
  font-weight: var(--w-heading);
  letter-spacing: var(--track-md);
  text-transform: uppercase;
  margin:0 0 6px; font-size:26px;
}
.pdp-price{ font-size:22px; font-weight:700; margin-bottom:14px; }
.pdp-option{ margin:16px 0; }
.pdp-option .label{ font-weight:600; margin-bottom:6px; }
.pills{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  padding:10px 12px; border-radius:999px; border:1px solid var(--border); background:#fff; cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease;
  font-family: var(--font-body); font-weight:400;
}
.pill.is-active, .pill:hover{ border-color:var(--text); }
.pdp-qty label{ display:block; margin-bottom:6px; }
.qty{
  display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:999px; overflow:hidden;
  background: #fff;
}
.qty input{ width:60px; text-align:center; border:0; outline:0; padding:10px 0; font-size:16px; background: transparent; }
.qty-btn{ padding:10px 14px; background:#f4f4f4; border:0; cursor:pointer; font-size:16px; }
.affirm{ color:var(--muted); font-size:14px; margin:10px 0 16px; }
.pdp-bullets{ padding-left:18px; color:#333; line-height:1.8; }

/* 支付按钮区域 */
.pdp-actions{ margin:14px 0 8px; }
.pdp-actions .btn{ width:100%; }

/* ========== CONTACT / REVIEWS / EVENTS ========== */
.reviews-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.review-card{ border:1px solid var(--border); border-radius:10px; padding:20px; background:#fff; font-size:15px; }
.review-card span{ display:block; margin-top:10px; font-weight:600; color:var(--muted); }

.contact-form{ display:grid; gap:12px; max-width:500px; margin-top:20px; }
.contact-form input, .contact-form textarea{
  padding:12px; border:1px solid var(--border); border-radius:8px; font-size:15px; font-family: var(--font-body);
}
.contact-form textarea{ resize:vertical; }

.events-list{ display:grid; gap:18px; margin-top:20px; }
.event-card{ border:1px solid var(--border); border-radius:10px; padding:20px; background:#fff; }
.event-card h3{ margin-top:0; font-size:18px; font-family: var(--font-heading); }

/* 活动页/素材四宫格 */
.content{ width:min(1100px, 92vw); margin:32px auto; }
.content h2{
  font-family: var(--font-heading); font-weight: var(--w-heading);
  letter-spacing: var(--track-md); text-transform: uppercase; font-size:22px; margin-bottom:12px;
}
.content .bullet{ margin-left:18px; }
.content .bullet li{ margin:6px 0; }
.card{ border:1px solid var(--border); border-radius:12px; padding:16px; background:#fff; margin:12px 0; }
.col-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.img-placeholder{
  border:1px dashed var(--border); border-radius:12px; padding:24px; text-align:center; color:#6b7280; background:#fafafa;
}

.four-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-top:14px; }
.four-grid .ph{
  aspect-ratio: 16/11; border-radius:12px; border:1px solid var(--border); overflow:hidden;
  background:#eef1f6; display:grid; place-items:center; color:#6b7280; font-size:14px;
  background-image: var(--img); background-size: cover; background-position: center;
}

/* 简单的前端 Chat demo */
.chatbot{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff; }
.chat-window{ height:240px; overflow:auto; padding:12px; }
.msg{ padding:8px 12px; border-radius:10px; margin:6px 0; max-width:80%; }
.msg.bot{ background:#f3f4f6; align-self:flex-start; }
.msg.user{ background:#111; color:#fff; margin-left:auto; }
.chat-input{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--border); }
.chat-input input{ flex:1; padding:10px; border:1px solid var(--border); border-radius:8px; }
.chips{ display:flex; gap:8px; margin-top:8px; }
.chip{ padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:#fff; cursor:pointer; }

/* ========== FOOTER ========== */
.site-footer{ background:var(--footer); color:#d1d5db; margin-top:64px; padding-top:36px; }
.site-footer a{ color:#d1d5db; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 2fr; gap:28px; }
.site-footer h4{
  margin:0 0 10px; color:#fff; letter-spacing:.06em; text-transform:uppercase; font-size:14px;
  font-family: var(--font-heading); font-weight: var(--w-heading);
}
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ margin:8px 0; }
.subscribe{ display:flex; gap:8px; margin:12px 0; }
.subscribe input{
  flex:1; padding:10px 12px; border-radius:8px; border:1px solid #202530; background:#0f131a; color:#e5e7eb;
  font-family: var(--font-body);
}
.subscribe button{
  padding:10px 14px; border:1px solid #2b3340; border-radius:8px; background:#18202c; color:#fff; cursor:pointer;
  font-family: var(--font-body); font-weight:600;
}
.socials{ display:flex; gap:10px; margin-top:8px; }
.socials a{ display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; border:1px solid #2b3340; border-radius:50%; font-size:12px; }
.footer-bottom{
  border-top:1px solid #1e2632; margin-top:26px; padding:12px 0 18px;
  display:flex; align-items:center; justify-content:space-between; font-size:14px;
  font-family: var(--font-body);
}
.footer-bottom nav a{ margin-left:14px; }

/* ========== RESPONSIVE ========== */
@media (min-width:1081px){
  /* 可选：固定三列产品卡片 */
  /* .product-grid{ grid-template-columns: repeat(3, 1fr); } */
}
@media (max-width:1180px){
  .features-grid{ grid-template-columns: repeat(3, 1fr); }
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:900px){
  .hero-inner{ grid-template-columns: 1fr; }
  .pdp-grid{ grid-template-columns: 1fr; }
  
  /* 响应式调整hero部分 */
  .hero.hero--image { min-height: clamp(320px, 50vh, 620px); }
  .hero-copy { margin-left: 0; padding: 0 20px; text-align: center; }
  .hero-ctas { justify-content: center; }
}
@media (max-width:720px){
  .features-grid{ grid-template-columns: repeat(2, 1fr); }
  .product-grid{ grid-template-columns: repeat(2, 1fr); }
  .card-row{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: repeat(2, 1fr); }
  .menu a{ margin-left:14px; }
  .col-2{ grid-template-columns:1fr; }
  .four-grid{ grid-template-columns: repeat(2, 1fr); }
  .hero-copy h1 { font-size: 28px; }
}
@media (max-width:480px){
  .hero-copy h1{ font-size:24px; }
  .product-title{ font-size:15px; }
  .hero-ctas { flex-direction: column; align-items: center; }
  .hero-ctas .btn { width: 200px; margin-bottom: 10px; }
}

/* ===== Mini Cart（右侧抽屉） ===== */
.mini-cart{
  position: fixed; top:0; right:-380px; width:360px; height:100vh;
  background:#fff; border-left:1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0,0,0,.08);
  display:flex; flex-direction:column; z-index: 110;
  transition: right .25s ease;
}
.mini-cart.is-open{ right:0; }
.mc-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.28); opacity:0; pointer-events:none; z-index:109;
  transition: opacity .2s ease;
}
.mc-backdrop.is-show{ opacity:1; pointer-events:auto; }
.mc-head, .mc-foot{ padding:14px; border-bottom:1px solid var(--border); }
.mc-foot{ border-bottom:0; border-top:1px solid var(--border); }
.mc-head{ display:flex; align-items:center; justify-content:space-between; font-size:16px; }
.mc-close{ background:transparent; border:0; font-size:24px; line-height:1; cursor:pointer; }
.mc-body{ flex:1; overflow:auto; padding:12px 14px; }
.mc-items{ list-style:none; margin:0; padding:0; }
.mc-item{ display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.mc-thumb{ width:64px; height:64px; border-radius:8px; overflow:hidden; border:1px solid var(--border); }
.mc-thumb img{ width:100%; height:100%; object-fit:cover; }
.mc-info{ flex:1; }
.mc-info b{ display:block; font-size:14px; }
.mc-meta{ font-size:13px; color:var(--muted); }
.mc-price{ font-weight:700; }
.mc-row{ display:flex; align-items:center; justify-content:space-between; margin:8px 0 12px; }

/* ===== Checkout Overlay（全屏加载） ===== */
.checkout-overlay{
  position:fixed; inset:0; background:rgba(255,255,255,.86); backdrop-filter: blur(4px);
  display:none; align-items:center; justify-content:center; z-index:120;
}
.checkout-overlay.is-show{ display:flex; }
.overlay-card{
  width:min(420px, 92vw); background:#fff; border:1px solid var(--border);
  border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.12);
  padding:24px; text-align:center;
}
.overlay-spinner{
  width:40px; height:40px; border-radius:50%;
  border:3px solid #e5e7eb; border-top-color:#111; margin:0 auto 12px;
  animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.overlay-sub{ color:var(--muted); font-size:14px; margin-top:4px; }
.overlay-progress{ height:4px; background:#f3f4f6; border-radius:999px; overflow:hidden; margin-top:14px; }
.overlay-progress > div{
  width:40%; height:100%; background:#111; animation: progressSlide 1.2s ease-in-out infinite;
}
@keyframes progressSlide{
  0%{ transform: translateX(-100%); } 50%{ transform: translateX(20%); } 100%{ transform: translateX(160%); }
}

/* Mini-Cart 行内数量控件 */
.mc-ctrl{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px;
}
.mc-qty{
  display:inline-flex; align-items:center; border:1px solid var(--border);
  border-radius:999px; overflow:hidden; background:#fff;
}
.mc-qty button{
  width:28px; height:28px; border:0; background:#f5f5f5; cursor:pointer; font-size:16px; line-height:1;
}
.mc-qty input{
  width:36px; height:28px; text-align:center; border:0; outline:0; background:#fff; font-size:14px;
}
.mc-price{ font-weight:700; white-space:nowrap; }

/* 购物车按钮（导航右侧） */
.cart-button{
  position: relative;
  margin-left: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .08s ease;
}
.cart-button:hover{ background:#f8f8f8; border-color:#d7dae0; }
.cart-button:active{ transform: translateY(1px); }

/* 数量角标 */
.cart-count{
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background:#111; color:#fff;
  font-size: 12px; line-height: 18px; text-align:center;
  border: 2px solid #fff;
}
.cart-count.is-zero{ display:none; }

/* ===== 首页左右分栏（统一等宽） ===== */
.split-layout{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:center; }
.split-text { flex:1; max-width: none; }           /* 关键：去掉原先 60% 限制 */
.split-image { flex:1; border-radius:10px; overflow:hidden; box-shadow:0 5px 15px rgba(0,0,0,.1); }
.split-image img{ width:100%; height:auto; display:block; }

/* ===== Benefits（统一三列等宽，中图等高） ===== */
.benefits-section { background-color:#f1f8f7; padding:80px 0; }
.benefits-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 左中右等宽 */
  gap:40px;
  align-items: stretch;                /* 三列等高 */
  margin-top:20px;
}
.benefits-left, .benefits-right{ display:flex; flex-direction:column; gap:20px; }
.benefit-text-top, .benefit-text-bottom, .benefit-text-right{
  padding:24px; background:#f7f7f8; border-radius:10px; line-height:1.7;
}
.benefits-center{ align-self:stretch; }
.benefits-center img{
  width:100%; height:100%;
  object-fit:cover;                     /* 需要完整显示则改为 contain */
  border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,.05);
}

/* 关于页面布局 */
.about-layout{ display:flex; align-items:center; gap:40px; margin-bottom:40px; }
.about-text{ flex:1; font-size:20px; align-items:center; gap:40px; margin-bottom:60px; }
.eco-layout{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; margin-top:30px; }
.eco-item{ text-align:center; padding:20px; background:#fff; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,.05); }
.eco-icon{ font-size:30px; color:#2a9d8f; margin-bottom:15px; }

/* 产品页面instruction图片 */
.instruction-image{ margin-top:30px; border-radius:10px; overflow:hidden; box-shadow:0 5px 15px rgba(0,0,0,.1); }
.instruction-image img{ width:100%; height:auto; display:block; }

/* =============== 评价系统样式 =============== */
.reviews-section{ padding:60px 0; border-top:1px solid var(--border); }
.reviews-header{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; margin-bottom:40px; }
.rating-overview{ display:flex; gap:40px; align-items:center; }
.overall-rating{ text-align:center; }
.stars-large{ font-size:32px; color:#ffc107; margin-bottom:8px; }
.rating-text{ font-size:48px; font-weight:bold; margin-left:10px; }
.rating-count{ color:var(--muted); font-size:14px; }
.rating-breakdown{ flex:1; }
.rating-bar{ display:flex; align-items:center; gap:10px; margin:8px 0; font-size:14px; }
.rating-bar span:first-child{ width:30px; }
.rating-bar span:last-child{ width:40px; text-align:right; }
.bar{ flex:1; height:8px; background:#f0f0f0; border-radius:4px; overflow:hidden; }
.bar .fill{ height:100%; background:#ffc107; border-radius:4px; }

.recent-reviews{ margin:30px 0; }
.review-item{ border:1px solid var(--border); border-radius:8px; padding:20px; margin-bottom:20px; background:#fff; }
.review-header{ display:flex; justify-content:space-between; align-items:start; margin-bottom:12px; }
.reviewer-info strong{ display:block; margin-bottom:4px; }
.verified{ color:var(--muted); font-size:12px; }
.review-stars{ color:#ffc107; font-size:18px; }
.review-text{ line-height:1.6; margin-bottom:15px; }
.review-media{ display:flex; gap:10px; margin-bottom:15px; }
.review-media img, .review-media video{ width:80px; height:80px; object-fit:cover; border-radius:6px; }
.reviews-footer{ text-align:center; margin-top:30px; }
.reviews-footer .btn{ margin: 0 10px; }

/* 评价模态框 */
.review-modal{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:1000; }
.review-modal.active{ display:flex; }
.modal-content{ background:#fff; border-radius:12px; width:90%; max-width:600px; max-height:90vh; overflow-y:auto; }
.modal-header{ display:flex; justify-content:space-between; align-items:center; padding:20px; border-bottom:1px solid var(--border); }
.modal-close{ background:none; border:none; font-size:24px; cursor:pointer; color:var(--muted); }
.review-form{ padding:20px; }
.form-group{ margin-bottom:20px; }
.form-group label{ display:block; margin-bottom:8px; font-weight:600; }
.star-rating{ display:flex; flex-direction: row-reverse; justify-content:flex-end; }
.star-rating input{ display:none; }
.star-rating label{ font-size:32px; color:#ddd; cursor:pointer; transition:color .2s; }
.star-rating label:hover, .star-rating label:hover ~ label, .star-rating input:checked ~ label{ color:#ffc107; }
.upload-area{ border:2px dashed var(--border); border-radius:8px; padding:30px; text-align:center; cursor:pointer; transition:border-color .3s; }
.upload-area:hover{ border-color:var(--accent); }
.upload-placeholder span{ font-size:48px; color:var(--muted); display:block; margin-bottom:10px; }
.upload-preview{ display:flex; flex-wrap:wrap; gap:10px; margin-top:15px; }
.media-item{ width:80px; height:80px; border-radius:6px; overflow:hidden; }
.media-item img, .media-item video{ width:100%; height:100%; object-fit:cover; }
.form-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:30px; }

/* 评价页面样式 */
.reviews-controls{ display:flex; gap:20px; margin-bottom:30px; flex-wrap:wrap; }
.filter-group, .sort-group{ display:flex; align-items:center; gap:10px; }
.filter-group select, .sort-group select{ padding:8px 12px; border:1px solid var(--border); border-radius:6px; background:#fff; }

.review-card{ border:1px solid var(--border); border-radius:8px; padding:20px; margin-bottom:20px; background:#fff; }
.review-card-header{ display:flex; justify-content:space-between; align-items:start; margin-bottom:12px; }
.review-rating{ color:#ffc107; font-size:18px; }
.review-content{ line-height:1.6; margin-bottom:15px; }
.review-media-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap:10px; margin-bottom:15px; }
.review-media-grid .media-item{ width:100%; height:100px; }
.review-helpful{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14px; }
.helpful-btn{ background:none; border:1px solid var(--border); border-radius:20px; padding:4px 12px; cursor:pointer; transition:all .2s; }
.helpful-btn:hover{ background:#f5f5f5; }
.load-more-container{ text-align:center; margin-top:30px; }
.no-reviews{ text-align:center; color:var(--muted); padding:40px; font-style:italic; }

/* 本地存储评价系统特定样式 */
.media-item{ position:relative; display:inline-block; margin:5px; }
.media-item button{ position:absolute; top:-8px; right:-8px; background:#ff4444; color:#fff; border:none; border-radius:50%; width:20px; height:20px; font-size:12px; cursor:pointer; }
.helpful-btn.active{ background:#4CAF50; color:#fff; }
.star-rating label.active{ color:#ffc107; }
.no-reviews{ text-align:center; padding:40px; color:#666; font-style:italic; }
.review-text{ line-height:1.5; margin:10px 0; }
.review-content{ line-height:1.6; color:#333; }

/* ========== Product页：左侧特性为单列 ========== */
.feature-grid{ display:flex; flex-direction:column; gap:30px; margin-top:40px; }
.feature-item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:15px; }
.feature-text{
  font-family: var(--font-heading); font-weight: var(--w-heading); font-size:18px; letter-spacing: var(--track-md);
  text-transform: uppercase; color: var(--text); padding:12px 20px; background:#f8f9fa; border-radius:8px; border-left:4px solid var(--accent);
}
.feature-item img{ width:100%; max-width:400px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.1); transition: transform .3s ease; }
.feature-item img:hover{ transform: scale(1.02); }

/* 左右分栏特性布局（在 PDP 下半区使用单列覆盖） */
.features-columns{ display:flex; gap:40px; margin-top:40px; }
.features-left, .features-right{ flex:1; display:flex; flex-direction:column; gap:30px; }
.feature-item{ display:flex; gap:15px; }
.feature-text{ font-family:var(--font-heading); font-weight:var(--w-heading); font-size:20px; letter-spacing:var(--track-md); text-transform:uppercase; color:var(--text); padding:12px 20px; background:#f8f9fa; border-radius:8px; border-left:4px solid var(--accent); width:100%; }
.feature-item img{ width:100%; max-width:600px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.1); transition: transform .3s ease; }
.feature-item img:hover{ transform: scale(1.02); }

/* 整体页面布局（左侧滚动图 + 右侧内容） */
.page-layout-container{ display:flex; min-height: calc(100vh - 200px); }
.scroll-sidebar{ flex:0 0 300px; position:sticky; top:80px; height:calc(100vh - 80px); overflow:hidden; background:#fafafa; border-right:1px solid var(--border); }
.scroll-image-container{ height:100%; position:relative; overflow:hidden; }
.scroll-image-track{ position:absolute; animation: scrollUp 30s linear infinite; display:flex; flex-direction:column; gap:0; }
.scroll-image-track img{ width:100%; height:auto; object-fit:cover; }
@keyframes scrollUp{ 0%{ transform: translateY(0);} 100%{ transform: translateY(-50%);} }
.scroll-image-container:hover .scroll-image-track{ animation-play-state: paused; }
.content-sidebar{ flex:1; min-width:0; }


/* ===== PDP 下半区左右分栏（图文左 / 评价右） ===== */
.pdp-below { padding: 56px 0; }
.pdp-below .two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.pdp-below .reviews-section{ padding:0; border-top:0; }
.pdp-below .col-right{ position: sticky; top: 96px; align-self: start; }
.pdp-below .section--features{ padding: 0; }

/* Product页：左侧图文单列（覆盖） */
.pdp-below .col-left .features-columns{ display:flex; flex-direction:column; gap:30px; }
.pdp-below .col-left .features-left, .pdp-below .col-left .features-right{ flex:0 0 auto; width:100%; }
.pdp-below .col-left .feature-item img{ max-width:720px; margin-inline:auto; }

/* 响应式 */
@media (max-width: 980px){
  .pdp-below .two-col{ grid-template-columns: 1fr; }
  .pdp-below .col-right{ position: static; }
}
@media (max-width: 1200px){ .scroll-sidebar{ flex:0 0 250px; } }
@media (max-width: 992px){
  .page-layout-container{ flex-direction:column; }
  .scroll-sidebar{ position:relative; top:0; height:300px; flex:0 0 auto; border-right:none; border-bottom:1px solid var(--border); }
  .scroll-image-track{ animation-duration:20s; }
  .content-sidebar .split-layout{ grid-template-columns:1fr; }
}
.content-sidebar .hero.hero--image{ min-height: clamp(420px, 62vh, 820px); }
.content-sidebar .hero-layer{ width:100%; }
.content-sidebar .hero-copy{ margin-left: clamp(16px, 6vw, 80px); max-width: 560px; }

/* 评价上传预览栅格（移动） */
@media (max-width: 640px){
  .review-media { display:grid; grid-template-columns:1fr; }
  .upload-preview { display:grid; grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 768px){ .scroll-sidebar{ height:250px; } }
@media (max-width: 768px){
  .features-columns{ flex-direction:column; gap:20px; }
  .features-left, .features-right{ gap:20px; }
  .feature-text{ font-size:16px; padding:10px 16px; }
  .feature-item img{ max-width:100%; }
}
@media (max-width: 480px){ .feature-text{ font-size:14px; } }
@media (max-width: 480px){ .feature-grid{ gap:20px; } .feature-text{ font-size:14px; } }
@media (max-width: 768px){
  .reviews-header{ grid-template-columns:1fr; gap:20px; }
  .rating-overview{ flex-direction:column; gap:20px; text-align:center; }
  .reviews-controls{ flex-direction:column; }
  .modal-content{ width:95%; margin:20px; }
}
@media (max-width: 900px){
  .benefits-grid{ grid-template-columns:1fr; }
  .benefits-center img{ height:auto; }
}
@media (max-width: 992px){
  .split-layout{ grid-template-columns:1fr; gap:40px; }
  .benefits-layout{ flex-direction:column; }
  .about-layout{ flex-direction:column; }
  .eco-layout{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
  .eco-layout{ grid-template-columns:1fr; }
}
@media (max-width: 768px){ .gallery-item{ width:250px; } .gallery-item img{ height:180px; } }
@media (max-width: 480px){ .gallery-item{ width:200px; } .gallery-item img{ height:150px; } }

@media (max-width: 992px){
  .about-layout{ grid-template-columns: 1fr; }
  .about-text, .about-image{ min-height: auto; }
  .about-image img{ height: auto; }
}

/* === About → Eco & Travel friendly：三卡内容区等高 === */
.section--learn .eco-item{
  display: flex;               /* 让内容能被拉伸对齐 */
  flex-direction: column;
  align-items: center;
}

/* 统一三张“内容框”（左p / 中右img）的尺寸与外观 */
.section--learn .eco-item > p,
.section--learn .eco-item > img{
  width: 100%;
  border-radius: 12px;
}

/* 中、右：图片充满固定高度的内容框 */
.section--learn .eco-item > img{
  height: clamp(220px, 28vw, 360px);   /* ↔ 统一高度：可按需求微调 */
  object-fit: cover;                   /* 若要完整显示改为 contain */
  display: block;
}

/* 左：文字块也给同样的高度，并做成卡片样式 */
.section--learn .eco-item > p{
  min-height: clamp(220px, 28vw, 360px); /* ↔ 与图片同高 */

  font-size: 20px;

  display: block;
  column-count: 1 !important;
  column-gap: 0 !important;
  column-width: auto !important; 
  
  width: 100%;
  margin: 0;
  padding: 30px;
  text-align: left;
  white-space: normal;
  word-break: normal;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}

/* 移动端：单列时恢复自适应高度，避免空白过大 */
@media (max-width: 768px){
  .section--learn .eco-item > img{ height: auto; }
  .section--learn .eco-item > p{ min-height: auto; }
}


/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Source+Sans+3:wght@300;400;600&display=swap');
/* Font Awesome图标支持 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* ========== TOKENS / RESET ========== */
:root{
  /* colors */
  --bg:#ffffff;
  --text:#111111;
  --muted:#6b7280;
  --accent:#4b3df6;
  --accent-dark:#2f27c9;
  --border:#e5e7eb;
  --soft:#f7f7f8;
  --footer:#0c0f14;

  /* fonts */
  --font-heading: "Marcellus", serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --w-heading: 400;
  --w-body: 300;
  --track-lg: .08em;
  --track-md: .06em;

  /* image sizes */
  --prod-card-size: 220px;
  --gallery-size:   220px;
  --pdp-main-max:   520px;
  --pdp-thumb-size: 96px;
  --hero-max-h:     420px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{
  background:var(--bg); color:var(--text);
  font-family: var(--font-body);
  font-weight: var(--w-body);
  font-size:16px; line-height:1.6; letter-spacing:.02em;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* Helpers */
.container{ width:min(1200px, 92vw); margin-inline:auto; }
main{ min-height:52vh; }

/* ========== HEADER / NAV ========== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:#fff; border-bottom:1px solid var(--border);
  transition: box-shadow .2s ease;
  backdrop-filter:saturate(180%) blur(6px);
}
.site-header .nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 2px;
}
.brand{
  font-family: var(--font-heading);
  font-weight: var(--w-heading);
  letter-spacing: var(--track-md);
  text-transform: uppercase;
}
.menu a{
  margin-left:22px; font-size:15px;
  font-family: var(--font-body); font-weight: 400;
}
.menu a:hover{ color:var(--accent); }

/* Header shadow on scroll */
@supports (animation-timeline: scroll()) {
  body{ scroll-timeline-name: page; scroll-timeline-axis: block; }
  .site-header{ animation: headerShadow both linear; animation-timeline: page; animation-range: 0 100px; }
  @keyframes headerShadow{
    from{ box-shadow:none; }
    to{ box-shadow:0 4px 20px rgba(0,0,0,.06); }
  }
}

/* ========== BUTTONS ========== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:999px; border:1px solid transparent;
  transition: transform .08s ease, background-color .15s ease, border-color .15s ease;
  will-change: transform;
  font-family: var(--font-body); font-weight:600; letter-spacing:.02em;
  cursor:pointer;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn-dark{ background:var(--text); color:#fff; }
.btn-dark:hover{ background:#000; }
.btn-light{ background:#fff; border-color:var(--border); color:var(--text); }
.btn-light:hover{ border-color:#c7cad1; }
.btn-xl{ padding:16px 22px; font-weight:600; }
.w-100{ width:100%; }

/* ========== HERO（基础） ========== */
.hero{ padding:80px 0 50px; }
.hero-inner{ display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:center; }
.hero-copy h1{
  font-family: var(--font-heading);
  font-weight: var(--w-heading);
  letter-spacing: var(--track-md);
  text-transform: uppercase;
  font-size: 36px;
  margin:0 0 8px;
}
.hero-copy p{
  font-family: var(--font-body); font-weight: var(--w-body);
  margin:0 0 18px;
}
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }

/* ======= HERO：IMG版（完整显示图片） ======= */
.hero.hero--image{
  position: relative;
  min-height: clamp(420px, 62vh, 820px);
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* 主图：修复为 contain（关键） */
.hero-figure{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 133%;
  z-index: 1;
  pointer-events: none;
  object-fit: contain;          /* 关键：完整显示整张图 */
  object-position: center;
}
.hero-figure img{ object-fit: contain; } /* 兼容写法，如结构为 .hero-figure > img */

/* 可选渐变（若页面里无此元素，不影响） */
.hero-gradient{
  position: absolute; 
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0,0,0,.56) 0%,
    rgba(0,0,0,.32) 32%,
    rgba(0,0,0,0)   70%);
  z-index: 2;
  pointer-events: none;
}

/* 文案层盖在最上面 */
.hero-layer{
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
  width: 100%;
}

/* 文案左右边距与最大宽度 */
.hero-copy{ 
  margin-left: clamp(16px, 6vw, 80px); 
  max-width: 560px;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* ========== FEATURES（六宫格） ========== */
.features{ padding:36px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#fafafa; }
.features-grid{
  display:grid; grid-template-columns: repeat(6, 1fr); gap:24px; text-align:center;
}
.feature .icon{ font-size:28px; margin-bottom:8px; }
.feature h3{
  font-family: var(--font-heading);
  font-weight: var(--w-heading);
  text-transform: uppercase;
  letter-spacing: var(--track-md);
  font-size:16px; margin:6px 0;
}
.feature p{
  font-family: var(--font-body); font-weight: var(--w-body);
  color:var(--muted); font-size:14px; margin:0;
}

/* ========== SECTION / TITLES ========== */
.section{ padding:56px 0; }
.section-title{
  font-family: var(--font-heading);
  font-weight: var(--w-heading);
  text-transform: uppercase;
  letter-spacing: var(--track-lg);
  font-size:22px;
  margin:0 0 18px;
}
.sub-title{
  font-family: var(--font-heading);
  letter-spacing:.06em;
  font-size:18px;
  margin:6px 0 10px;
}

/* ========== PRODUCTS GRID（热门产品） ========== */
.product-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:24px;
}
.product-card{
  border:1px solid var(--border); border-radius:12px; padding:14px; background:#fff;
  text-align:center; position:relative; display:flex; flex-direction:column; align-items:center;
  overflow:hidden;
}
.product-card .thumb{
  position:relative; z-index:1;
  width: var(--prod-card-size); height: var(--prod-card-size);
  margin: 0 auto 12px;
  border-radius:10px; overflow:hidden;
  border:1px solid var(--border); background:var(--soft);
}
.product-card img{ width:100%; height:100%; object-fit:cover; }
.product-card .btn{ position:relative; z-index:2; }
.product-title{
  font-family: var(--font-body); font-weight:600;
  font-size:16px; margin:10px 0 6px;
}
.price{ font-weight:600; margin-bottom:10px; }

/* ========== LEARN CARDS（三张图） ========== */
.section--learn{ background:#fafafa; }
.card-row{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; }
.learn-card{ position:relative; display:block; border-radius:14px; overflow:hidden; color:var(--text); }
.learn-card img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 16/10; }
.learn-card h3{
  position:absolute; left:12px; bottom:12px; margin:0;
  background:rgba(255,255,255,.9); padding:6px 10px; border-radius:8px; font-size:16px;
  font-family: var(--font-body); font-weight:600;
}

/* ========== PDP（产品详情） ========== */
.pdp{ padding:48px 0; }
.pdp-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:start; }
.pdp-media > img{
  width:100%; max-width: var(--pdp-main-max); height:auto;
  object-fit:contain; display:block; margin-inline:auto;
  border-radius:14px; border:1px solid var(--border); background:var(--soft);
}
.pdp-thumbs{
  display:grid; grid-template-columns: repeat(4, var(--pdp-thumb-size));
  gap:10px; justify-content:start; margin-top:10px;
}
.pdp-thumbs img{
  width: var(--pdp-thumb-size); height: var(--pdp-thumb-size);
  object-fit:cover; border-radius:10px; border:1px solid var(--border); background:#fff;
}
.pdp-info h1{
  font-family: var(--font-heading);
  font-weight: var(--w-heading);
  letter-spacing: var(--track-md);
  text-transform: uppercase;
  margin:0 0 6px; font-size:26px;
}
.pdp-price{ font-size:22px; font-weight:700; margin-bottom:14px; }
.pdp-option{ margin:16px 0; }
.pdp-option .label{ font-weight:600; margin-bottom:6px; }
.pills{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  padding:10px 12px; border-radius:999px; border:1px solid var(--border); background:#fff; cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease;
  font-family: var(--font-body); font-weight:400;
}
.pill.is-active, .pill:hover{ border-color:var(--text); }
.pdp-qty label{ display:block; margin-bottom:6px; }
.qty{
  display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:999px; overflow:hidden;
  background: #fff;
}
.qty input{ width:60px; text-align:center; border:0; outline:0; padding:10px 0; font-size:16px; background: transparent; }
.qty-btn{ padding:10px 14px; background:#f4f4f4; border:0; cursor:pointer; font-size:16px; }
.affirm{ color:var(--muted); font-size:14px; margin:10px 0 16px; }
.pdp-bullets{ padding-left:18px; color:#333; line-height:1.8; }

/* 支付按钮区域 */
.pdp-actions{ margin:14px 0 8px; }
.pdp-actions .btn{ width:100%; }

/* ========== CONTACT / REVIEWS / EVENTS ========== */
.reviews-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.review-card{ border:1px solid var(--border); border-radius:10px; padding:20px; background:#fff; font-size:15px; }
.review-card span{ display:block; margin-top:10px; font-weight:600; color:var(--muted); }

.contact-form{ display:grid; gap:12px; max-width:500px; margin-top:20px; }
.contact-form input, .contact-form textarea{
  padding:12px; border:1px solid var(--border); border-radius:8px; font-size:15px; font-family: var(--font-body);
}
.contact-form textarea{ resize:vertical; }

.events-list{ display:grid; gap:18px; margin-top:20px; }
.event-card{ border:1px solid var(--border); border-radius:10px; padding:20px; background:#fff; }
.event-card h3{ margin-top:0; font-size:18px; font-family: var(--font-heading); }

/* 活动页/素材四宫格 */
.content{ width:min(1100px, 92vw); margin:32px auto; }
.content h2{
  font-family: var(--font-heading); font-weight: var(--w-heading);
  letter-spacing: var(--track-md); text-transform: uppercase; font-size:22px; margin-bottom:12px;
}
.content .bullet{ margin-left:18px; }
.content .bullet li{ margin:6px 0; }
.card{ border:1px solid var(--border); border-radius:12px; padding:16px; background:#fff; margin:12px 0; }
.col-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.img-placeholder{
  border:1px dashed var(--border); border-radius:12px; padding:24px; text-align:center; color:#6b7280; background:#fafafa;
}

.four-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-top:14px; }
.four-grid .ph{
  aspect-ratio: 16/11; border-radius:12px; border:1px solid var(--border); overflow:hidden;
  background:#eef1f6; display:grid; place-items:center; color:#6b7280; font-size:14px;
  background-image: var(--img); background-size: cover; background-position: center;
}

/* 简单的前端 Chat demo */
.chatbot{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff; }
.chat-window{ height:240px; overflow:auto; padding:12px; }
.msg{ padding:8px 12px; border-radius:10px; margin:6px 0; max-width:80%; }
.msg.bot{ background:#f3f4f6; align-self:flex-start; }
.msg.user{ background:#111; color:#fff; margin-left:auto; }
.chat-input{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--border); }
.chat-input input{ flex:1; padding:10px; border:1px solid var(--border); border-radius:8px; }
.chips{ display:flex; gap:8px; margin-top:8px; }
.chip{ padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:#fff; cursor:pointer; }

/* ========== FOOTER ========== */
.site-footer{ background:var(--footer); color:#d1d5db; margin-top:64px; padding-top:36px; }
.site-footer a{ color:#d1d5db; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 2fr; gap:28px; }
.site-footer h4{
  margin:0 0 10px; color:#fff; letter-spacing:.06em; text-transform:uppercase; font-size:14px;
  font-family: var(--font-heading); font-weight: var(--w-heading);
}
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ margin:8px 0; }
.subscribe{ display:flex; gap:8px; margin:12px 0; }
.subscribe input{
  flex:1; padding:10px 12px; border-radius:8px; border:1px solid #202530; background:#0f131a; color:#e5e7eb;
  font-family: var(--font-body);
}
.subscribe button{
  padding:10px 14px; border:1px solid #2b3340; border-radius:8px; background:#18202c; color:#fff; cursor:pointer;
  font-family: var(--font-body); font-weight:600;
}
.socials{ display:flex; gap:10px; margin-top:8px; }
.socials a{ display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; border:1px solid #2b3340; border-radius:50%; font-size:12px; }
.footer-bottom{
  border-top:1px solid #1e2632; margin-top:26px; padding:12px 0 18px;
  display:flex; align-items:center; justify-content:space-between; font-size:14px;
  font-family: var(--font-body);
}
.footer-bottom nav a{ margin-left:14px; }

/* ========== RESPONSIVE ========== */
@media (min-width:1081px){
  /* 可选：固定三列产品卡片 */
  /* .product-grid{ grid-template-columns: repeat(3, 1fr); } */
}
@media (max-width:1180px){
  .features-grid{ grid-template-columns: repeat(3, 1fr); }
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:900px){
  .hero-inner{ grid-template-columns: 1fr; }
  .pdp-grid{ grid-template-columns: 1fr; }
  
  /* 响应式调整hero部分 */
  .hero.hero--image { min-height: clamp(320px, 50vh, 620px); }
  .hero-copy { margin-left: 0; padding: 0 20px; text-align: center; }
  .hero-ctas { justify-content: center; }
}
@media (max-width:720px){
  .features-grid{ grid-template-columns: repeat(2, 1fr); }
  .product-grid{ grid-template-columns: repeat(2, 1fr); }
  .card-row{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: repeat(2, 1fr); }
  .menu a{ margin-left:14px; }
  .col-2{ grid-template-columns:1fr; }
  .four-grid{ grid-template-columns: repeat(2, 1fr); }
  .hero-copy h1 { font-size: 28px; }
}
@media (max-width:480px){
  .hero-copy h1{ font-size:24px; }
  .product-title{ font-size:15px; }
  .hero-ctas { flex-direction: column; align-items: center; }
  .hero-ctas .btn { width: 200px; margin-bottom: 10px; }
}

/* ===== Mini Cart（右侧抽屉） ===== */
.mini-cart{
  position: fixed; top:0; right:-380px; width:360px; height:100vh;
  background:#fff; border-left:1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0,0,0,.08);
  display:flex; flex-direction:column; z-index: 110;
  transition: right .25s ease;
}
.mini-cart.is-open{ right:0; }
.mc-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.28); opacity:0; pointer-events:none; z-index:109;
  transition: opacity .2s ease;
}
.mc-backdrop.is-show{ opacity:1; pointer-events:auto; }
.mc-head, .mc-foot{ padding:14px; border-bottom:1px solid var(--border); }
.mc-foot{ border-bottom:0; border-top:1px solid var(--border); }
.mc-head{ display:flex; align-items:center; justify-content:space-between; font-size:16px; }
.mc-close{ background:transparent; border:0; font-size:24px; line-height:1; cursor:pointer; }
.mc-body{ flex:1; overflow:auto; padding:12px 14px; }
.mc-items{ list-style:none; margin:0; padding:0; }
.mc-item{ display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.mc-thumb{ width:64px; height:64px; border-radius:8px; overflow:hidden; border:1px solid var(--border); }
.mc-thumb img{ width:100%; height:100%; object-fit:cover; }
.mc-info{ flex:1; }
.mc-info b{ display:block; font-size:14px; }
.mc-meta{ font-size:13px; color:var(--muted); }
.mc-price{ font-weight:700; }
.mc-row{ display:flex; align-items:center; justify-content:space-between; margin:8px 0 12px; }

/* ===== Checkout Overlay（全屏加载） ===== */
.checkout-overlay{
  position:fixed; inset:0; background:rgba(255,255,255,.86); backdrop-filter: blur(4px);
  display:none; align-items:center; justify-content:center; z-index:120;
}
.checkout-overlay.is-show{ display:flex; }
.overlay-card{
  width:min(420px, 92vw); background:#fff; border:1px solid var(--border);
  border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.12);
  padding:24px; text-align:center;
}
.overlay-spinner{
  width:40px; height:40px; border-radius:50%;
  border:3px solid #e5e7eb; border-top-color:#111; margin:0 auto 12px;
  animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.overlay-sub{ color:var(--muted); font-size:14px; margin-top:4px; }
.overlay-progress{ height:4px; background:#f3f4f6; border-radius:999px; overflow:hidden; margin-top:14px; }
.overlay-progress > div{
  width:40%; height:100%; background:#111; animation: progressSlide 1.2s ease-in-out infinite;
}
@keyframes progressSlide{
  0%{ transform: translateX(-100%); } 50%{ transform: translateX(20%); } 100%{ transform: translateX(160%); }
}

/* Mini-Cart 行内数量控件 */
.mc-ctrl{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px;
}
.mc-qty{
  display:inline-flex; align-items:center; border:1px solid var(--border);
  border-radius:999px; overflow:hidden; background:#fff;
}
.mc-qty button{
  width:28px; height:28px; border:0; background:#f5f5f5; cursor:pointer; font-size:16px; line-height:1;
}
.mc-qty input{
  width:36px; height:28px; text-align:center; border:0; outline:0; background:#fff; font-size:14px;
}
.mc-price{ font-weight:700; white-space:nowrap; }

/* 购物车按钮（导航右侧） */
.cart-button{
  position: relative;
  margin-left: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .08s ease;
}
.cart-button:hover{ background:#f8f8f8; border-color:#d7dae0; }
.cart-button:active{ transform: translateY(1px); }

/* 数量角标 */
.cart-count{
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background:#111; color:#fff;
  font-size: 12px; line-height: 18px; text-align:center;
  border: 2px solid #fff;
}
.cart-count.is-zero{ display:none; }

/* ===== 圆形文字动画 ===== */
.circle-text-animation { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; margin:60px 0; gap:40px; }
.circle-text-container { position:relative; width:340px; height:340px; }
.circle-text { position:relative; width:100%; height:100%; }
.circle-text svg { width:100%; height:100%; aspect-ratio: 1 / 1; animation: rotate 25s linear infinite; }
.circle-text path { fill: transparent; }
.circle-text text { font-size: 2.2em; font-weight: 600; fill: #178b7d; font-family: var(--font-heading); letter-spacing: 1.5px; transform-origin: center;}
.circle-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width: 85%; height: 85%; text-align:center; }
.circle-center h3 { font-family: var(--font-heading); font-size: 20px; margin-bottom: 5px; }

.circle-center img {
  width: 100%;
  height: 100%;
  object-fit: contain; 
  background-color: transparent !important;
}

.circle-images-container { width:300px; height:300px; position:relative; }
.circle-images { position:relative; width:100%; height:100%; }
.circle-images img{
  position:absolute; width:80px; height:80px; border-radius:50%;
  object-fit:cover; border:3px solid #fff; box-shadow:0 5px 15px rgba(0,0,0,.1); animation: orbit 15s linear infinite;
}
@keyframes orbit { 0%{ transform: rotate(0deg) translateX(110px) rotate(0deg); } 100%{ transform: rotate(360deg) translateX(110px) rotate(-360deg); } }
@keyframes rotate { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

/* ===== 首页左右分栏（统一等宽） ===== */
.split-layout{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:center; }
.split-text { flex:1; max-width: none; }           /* 关键：去掉原先 60% 限制 */
.split-image { flex:1; border-radius:10px; overflow:hidden; box-shadow:0 5px 15px rgba(0,0,0,.1); }
.split-image img{ width:100%; height:auto; display:block; }

/* ===== Benefits（统一三列等宽，中图等高） ===== */
.benefits-section { background-color:#f1f8f7; padding:80px 0; }
.benefits-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 左中右等宽 */
  gap:40px;
  align-items: stretch;                /* 三列等高 */
  margin-top:20px;
}
.benefits-left, .benefits-right{ display:flex; flex-direction:column; gap:20px; }
.benefit-text-top, .benefit-text-bottom, .benefit-text-right{
  padding:24px; background:#f7f7f8; border-radius:10px; line-height:1.7;
}
.benefits-center{ align-self:stretch; }
.benefits-center img{
  width:100%; height:100%;
  object-fit:cover;                     /* 需要完整显示则改为 contain */
  border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,.05);
}

/* Gallery循环滚动样式 */
.gallery-slider-container { overflow:hidden; position:relative; margin:20px 0; }
.gallery-slider{ overflow:hidden; width:100%; }
.gallery-track{ display:flex; animation: scroll 30s linear infinite; width:max-content; }
.gallery-slider-container:hover .gallery-track{ animation-play-state: paused; }
.gallery-item{ flex:0 0 auto; width:300px; margin-right:16px; }
.gallery-link{ display:block; text-decoration:none; transition: transform .3s ease; }
.gallery-link:hover{ transform: scale(1.05); }
.gallery-item img{ width:100%; height:200px; object-fit:cover; border-radius:8px; transition: filter .3s ease; }
.gallery-link:hover img{ filter: brightness(1.1); }
@keyframes scroll { 0%{ transform: translateX(0); } 100%{ transform: translateX(-50%); } }

/* 产品页面instruction图片 */
.instruction-image{ margin-top:30px; border-radius:10px; overflow:hidden; box-shadow:0 5px 15px rgba(0,0,0,.1); }
.instruction-image img{ width:100%; height:auto; display:block; }

/* =============== 评价系统样式 =============== */
.reviews-section{ padding:60px 0; border-top:1px solid var(--border); }
.reviews-header{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; margin-bottom:40px; }
.rating-overview{ display:flex; gap:40px; align-items:center; }
.overall-rating{ text-align:center; }
.stars-large{ font-size:32px; color:#ffc107; margin-bottom:8px; }
.rating-text{ font-size:48px; font-weight:bold; margin-left:10px; }
.rating-count{ color:var(--muted); font-size:14px; }
.rating-breakdown{ flex:1; }
.rating-bar{ display:flex; align-items:center; gap:10px; margin:8px 0; font-size:14px; }
.rating-bar span:first-child{ width:30px; }
.rating-bar span:last-child{ width:40px; text-align:right; }
.bar{ flex:1; height:8px; background:#f0f0f0; border-radius:4px; overflow:hidden; }
.bar .fill{ height:100%; background:#ffc107; border-radius:4px; }

.recent-reviews{ margin:30px 0; }
.review-item{ border:1px solid var(--border); border-radius:8px; padding:20px; margin-bottom:20px; background:#fff; }
.review-header{ display:flex; justify-content:space-between; align-items:start; margin-bottom:12px; }
.reviewer-info strong{ display:block; margin-bottom:4px; }
.verified{ color:var(--muted); font-size:12px; }
.review-stars{ color:#ffc107; font-size:18px; }
.review-text{ line-height:1.6; margin-bottom:15px; }
.review-media{ display:flex; gap:10px; margin-bottom:15px; }
.review-media img, .review-media video{ width:80px; height:80px; object-fit:cover; border-radius:6px; }
.reviews-footer{ text-align:center; margin-top:30px; }
.reviews-footer .btn{ margin: 0 10px; }

/* 评价模态框 */
.review-modal{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:1000; }
.review-modal.active{ display:flex; }
.modal-content{ background:#fff; border-radius:12px; width:90%; max-width:600px; max-height:90vh; overflow-y:auto; }
.modal-header{ display:flex; justify-content:space-between; align-items:center; padding:20px; border-bottom:1px solid var(--border); }
.modal-close{ background:none; border:none; font-size:24px; cursor:pointer; color:var(--muted); }
.review-form{ padding:20px; }
.form-group{ margin-bottom:20px; }
.form-group label{ display:block; margin-bottom:8px; font-weight:600; }
.star-rating{ display:flex; flex-direction: row-reverse; justify-content:flex-end; }
.star-rating input{ display:none; }
.star-rating label{ font-size:32px; color:#ddd; cursor:pointer; transition:color .2s; }
.star-rating label:hover, .star-rating label:hover ~ label, .star-rating input:checked ~ label{ color:#ffc107; }
.upload-area{ border:2px dashed var(--border); border-radius:8px; padding:30px; text-align:center; cursor:pointer; transition:border-color .3s; }
.upload-area:hover{ border-color:var(--accent); }
.upload-placeholder span{ font-size:48px; color:var(--muted); display:block; margin-bottom:10px; }
.upload-preview{ display:flex; flex-wrap:wrap; gap:10px; margin-top:15px; }
.media-item{ width:80px; height:80px; border-radius:6px; overflow:hidden; }
.media-item img, .media-item video{ width:100%; height:100%; object-fit:cover; }
.form-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:30px; }

/* 评价页面样式 */
.reviews-controls{ display:flex; gap:20px; margin-bottom:30px; flex-wrap:wrap; }
.filter-group, .sort-group{ display:flex; align-items:center; gap:10px; }
.filter-group select, .sort-group select{ padding:8px 12px; border:1px solid var(--border); border-radius:6px; background:#fff; }

.review-card{ border:1px solid var(--border); border-radius:8px; padding:20px; margin-bottom:20px; background:#fff; }
.review-card-header{ display:flex; justify-content:space-between; align-items:start; margin-bottom:12px; }
.review-rating{ color:#ffc107; font-size:18px; }
.review-content{ line-height:1.6; margin-bottom:15px; }
.review-media-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap:10px; margin-bottom:15px; }
.review-media-grid .media-item{ width:100%; height:100px; }
.review-helpful{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14px; }
.helpful-btn{ background:none; border:1px solid var(--border); border-radius:20px; padding:4px 12px; cursor:pointer; transition:all .2s; }
.helpful-btn:hover{ background:#f5f5f5; }
.load-more-container{ text-align:center; margin-top:30px; }
.no-reviews{ text-align:center; color:var(--muted); padding:40px; font-style:italic; }

/* 本地存储评价系统特定样式 */
.media-item{ position:relative; display:inline-block; margin:5px; }
.media-item button{ position:absolute; top:-8px; right:-8px; background:#ff4444; color:#fff; border:none; border-radius:50%; width:20px; height:20px; font-size:12px; cursor:pointer; }
.helpful-btn.active{ background:#4CAF50; color:#fff; }
.star-rating label.active{ color:#ffc107; }
.no-reviews{ text-align:center; padding:40px; color:#666; font-style:italic; }
.review-text{ line-height:1.5; margin:10px 0; }
.review-content{ line-height:1.6; color:#333; }

/* ========== Product页：左侧特性为单列 ========== */
.feature-grid{ display:flex; flex-direction:column; gap:30px; margin-top:40px; }
.feature-item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:15px; }
.feature-text{
  font-family: var(--font-heading); font-weight: var(--w-heading); font-size:18px; letter-spacing: var(--track-md);
  text-transform: uppercase; color: var(--text); padding:12px 20px; background:#f8f9fa; border-radius:8px; border-left:4px solid var(--accent);
}
.feature-item img{ width:100%; max-width:400px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.1); transition: transform .3s ease; }
.feature-item img:hover{ transform: scale(1.02); }

/* 左右分栏特性布局（在 PDP 下半区使用单列覆盖） */
.features-columns{ display:flex; gap:40px; margin-top:40px; }
.features-left, .features-right{ flex:1; display:flex; flex-direction:column; gap:30px; }
.feature-item{ display:flex; gap:15px; }
.feature-text{ font-family:var(--font-heading); font-weight:var(--w-heading); font-size:20px; letter-spacing:var(--track-md); text-transform:uppercase; color:var(--text); padding:12px 20px; background:#f8f9fa; border-radius:8px; border-left:4px solid var(--accent); width:100%; }
.feature-item img{ width:100%; max-width:600px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.1); transition: transform .3s ease; }
.feature-item img:hover{ transform: scale(1.02); }

/* 整体页面布局（左侧滚动图 + 右侧内容） */
.page-layout-container{ display:flex; min-height: calc(100vh - 200px); }
.scroll-sidebar{ flex:0 0 300px; position:sticky; top:80px; height:calc(100vh - 80px); overflow:hidden; background:#fafafa; border-right:1px solid var(--border); }
.scroll-image-container{ height:100%; position:relative; overflow:hidden; }
.scroll-image-track{ position:absolute; animation: scrollUp 30s linear infinite; display:flex; flex-direction:column; gap:0; }
.scroll-image-track img{ width:100%; height:auto; object-fit:cover; }
@keyframes scrollUp{ 0%{ transform: translateY(0);} 100%{ transform: translateY(-50%);} }
.scroll-image-container:hover .scroll-image-track{ animation-play-state: paused; }
.content-sidebar{ flex:1; min-width:0; }

/* 统一 content-sidebar 下的 split 等宽（覆盖旧的 flex 比例） */
.content-sidebar .split-layout{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.content-sidebar .split-text,
.content-sidebar .circle-text-animation,
.content-sidebar .split-image{ flex:unset; }

/* ===== PDP 下半区左右分栏（图文左 / 评价右） ===== */
.pdp-below { padding: 56px 0; }
.pdp-below .two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.pdp-below .reviews-section{ padding:0; border-top:0; }
.pdp-below .col-right{ position: sticky; top: 96px; align-self: start; }
.pdp-below .section--features{ padding: 0; }

/* Product页：左侧图文单列（覆盖） */
.pdp-below .col-left .features-columns{ display:flex; flex-direction:column; gap:30px; }
.pdp-below .col-left .features-left, .pdp-below .col-left .features-right{ flex:0 0 auto; width:100%; }
.pdp-below .col-left .feature-item img{ max-width:720px; margin-inline:auto; }

/* 响应式 */
@media (max-width: 980px){
  .pdp-below .two-col{ grid-template-columns: 1fr; }
  .pdp-below .col-right{ position: static; }
}
@media (max-width: 1200px){ .scroll-sidebar{ flex:0 0 250px; } }
@media (max-width: 992px){
  .page-layout-container{ flex-direction:column; }
  .scroll-sidebar{ position:relative; top:0; height:300px; flex:0 0 auto; border-right:none; border-bottom:1px solid var(--border); }
  .scroll-image-track{ animation-duration:20s; }
  .content-sidebar .split-layout{ grid-template-columns:1fr; }
}
.content-sidebar .hero.hero--image{ min-height: clamp(420px, 62vh, 820px); }
.content-sidebar .hero-layer{ width:100%; }
.content-sidebar .hero-copy{ margin-left: clamp(16px, 6vw, 80px); max-width: 560px; }

/* 评价上传预览栅格（移动） */
@media (max-width: 640px){
  .review-media { display:grid; grid-template-columns:1fr; }
  .upload-preview { display:grid; grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 768px){ .scroll-sidebar{ height:250px; } }
@media (max-width: 768px){
  .features-columns{ flex-direction:column; gap:20px; }
  .features-left, .features-right{ gap:20px; }
  .feature-text{ font-size:16px; padding:10px 16px; }
  .feature-item img{ max-width:100%; }
}
@media (max-width: 480px){ .feature-text{ font-size:14px; } }
@media (max-width: 480px){ .feature-grid{ gap:20px; } .feature-text{ font-size:14px; } }
@media (max-width: 768px){
  .reviews-header{ grid-template-columns:1fr; gap:20px; }
  .rating-overview{ flex-direction:column; gap:20px; text-align:center; }
  .reviews-controls{ flex-direction:column; }
  .modal-content{ width:95%; margin:20px; }
}
@media (max-width: 900px){
  .benefits-grid{ grid-template-columns:1fr; }
  .benefits-center img{ height:auto; }
}
@media (max-width: 992px){
  .split-layout{ grid-template-columns:1fr; gap:40px; }
  .benefits-layout{ flex-direction:column; }
  .about-layout{ flex-direction:column; }
  .eco-layout{ grid-template-columns: repeat(2, 1fr); }
  .circle-text-animation{ flex-direction:column; }
}
@media (max-width: 768px){
  .eco-layout{ grid-template-columns:1fr; }
  .circle-text-container, .circle-images-container{ width:250px; height:250px; }
  .circle-images img{ width:60px; height:60px; }
}
@media (max-width: 768px){ .gallery-item{ width:250px; } .gallery-item img{ height:180px; } }
@media (max-width: 480px){ .gallery-item{ width:200px; } .gallery-item img{ height:150px; } }

@media (max-width: 992px){
  .about-layout{ grid-template-columns: 1fr; }
  .about-text, .about-image{ min-height: auto; }
  .about-image img{ height: auto; }
}

/* === About → Eco & Travel friendly：三卡内容区等高 === */
.section--learn .eco-item{
  display: flex;               /* 让内容能被拉伸对齐 */
  flex-direction: column;
  align-items: center;
}

/* 统一三张“内容框”（左p / 中右img）的尺寸与外观 */
.section--learn .eco-item > p,
.section--learn .eco-item > img{
  width: 100%;
  border-radius: 12px;
}

/* 中、右：图片充满固定高度的内容框 */
.section--learn .eco-item > img{
  height: clamp(220px, 28vw, 360px);   /* ↔ 统一高度：可按需求微调 */
  object-fit: cover;                   /* 若要完整显示改为 contain */
  display: block;
}

/* 左：文字块也给同样的高度，并做成卡片样式 */
.section--learn .eco-item > p{
  min-height: clamp(220px, 28vw, 360px); /* ↔ 与图片同高 */

  font-size: 20px;

  display: block;
  column-count: 1 !important;
  column-gap: 0 !important;
  column-width: auto !important; 
  
  width: 100%;
  margin: 0;
  padding: 30px;
  text-align: left;
  white-space: normal;
  word-break: normal;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}

/* 移动端：单列时恢复自适应高度，避免空白过大 */
@media (max-width: 768px){
  .section--learn .eco-item > img{ height: auto; }
  .section--learn .eco-item > p{ min-height: auto; }
}

/* =====================================================
   Elegant Theme Overrides — premium, clean, airy
   (Scoped overrides; safe to remove without breaking layout)
   ===================================================== */

/* Palette tweaks */
:root{
  --bg:#ffffff;
  --text:#0b0b11;
  --muted:#6c7280;
  --border:#e7e9ee;
  --soft:#f8f9fb;
  --accent:#1f7a6e;           /* deep teal */
  --accent-dark:#155d52;
  --footer:#0e1218;
}

/* Typography polish */
body{
  font-feature-settings:"liga","kern","cv10";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:.01em;
}
.section-title{
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: .12em;
}
.sub-title{ letter-spacing:.08em; }
p{ line-height: 1.75; }

/* Containers & cards */
.container{ width:min(1180px, 92vw); }
.card, .product-card, .review-card, .event-card,
.pdp-media > img, .gallery img,
.benefit-text-top, .benefit-text-bottom,
.review-item, .modal-content{
  border-radius:16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
  border: 1px solid var(--border);
}
.feature-item img{ border-radius:16px; }

/* Buttons */
.btn{
  border-radius: 999px;
  padding: 12px 20px;
  transition: transform .06s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-dark{
  background:#111; color:#fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.btn-dark:hover{ background:#000; box-shadow:0 10px 28px rgba(0,0,0,.18); }
.btn-light{ background:#fff; border-color:#d6dae2; }
.btn-light:hover{ background:#f9fafb; border-color:#c7ccd6; }

/* Nav refinement */
.site-header{
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(8px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.menu a{ transition: color .15s ease, opacity .15s ease; }
.menu a:hover{ color: var(--accent); opacity: .95; }

/* Hero polish */
.hero.hero--image{
  min-height: clamp(440px, 62vh, 820px);
}
.hero-copy h1{
  text-shadow: 0 8px 30px rgba(0,0,0,.18);
}
.hero-ctas .btn{ margin-top: 6px; }

/* Product page */
.pdp-info h1{ letter-spacing:.08em; }
.pill{ border-radius: 999px; padding: 10px 14px; }
.pdp-media > img{ background: #fff; }

/* Reviews */
.stars-large, .review-stars, .review-rating{ color:#f4c060; }
.review-item{ transition: transform .12s ease, box-shadow .2s ease; }
.review-item:hover{ transform: translateY(-2px); box-shadow:0 12px 36px rgba(0,0,0,.1); }

/* Sections */
.features{ background: linear-gradient(180deg,#fafbfd, #ffffff); }
.benefits-section{ background: #f6fbf9; }
.section{ padding: clamp(48px, 6vw, 80px) 0; }

/* Micro interactions */
.product-card{ transition: transform .12s ease, box-shadow .2s ease; }
.product-card:hover{ transform: translateY(-3px); box-shadow:0 14px 40px rgba(0,0,0,.12); }
.gallery img{ transition: transform .22s ease, box-shadow .22s ease; }
.gallery img:hover{ transform: scale(1.04); box-shadow:0 14px 40px rgba(0,0,0,.12); }

/* Footer */
.site-footer{ background: linear-gradient(180deg,#0d121a,#0a0d12); }

/* Eco cards equal heights (content area) */
.section--learn .eco-item > img{ border: 1px solid var(--border); }
.section--learn .eco-item > p{ border: 1px solid var(--border); }

/* Reduce heavy borders on mobile */
@media (max-width: 640px){
  .card, .product-card, .review-card, .event-card,
  .pdp-media > img, .gallery img,
  .benefit-text-top, .benefit-text-bottom,
  .review-item, .modal-content{
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
  }
}

/* ===== Elegant Enhanced v2 ===== */
:root{
  --text:#0a0a12;
  --muted:#6a7280;
  --border:#e6e9f0;
  --soft:#f8f9fb;
  --accent:#146e60;
  --accent-dark:#0f544a;
}
body{ letter-spacing:.01em; }
.section-title{ font-size: clamp(24px, 2.4vw, 30px); letter-spacing:.14em; }
.card, .product-card, .review-card, .event-card,
.pdp-media > img, .review-item, .modal-content{
  border-radius:16px;
  box-shadow:0 10px 34px rgba(0,0,0,.08);
}
.btn-dark{ box-shadow:0 10px 28px rgba(0,0,0,.18); }
.stars-large, .review-stars, .review-rating{ color:#f2c653; }
.review-item:hover{ transform: translateY(-2px); box-shadow:0 14px 40px rgba(0,0,0,.12); }



/* Reviews minimal layout fallback (safe) */
.reviews-list{ display:grid; gap:16px; }
.review-item{ border:1px solid var(--border); border-radius:12px; padding:16px; background:#fff; }
.review-header{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.review-stars{ color:#f2c653; font-size:18px; letter-spacing:2px; }
.stars-large{ color:#f2c653; font-size:24px; letter-spacing:3px; }
.rating-bar{ display:grid; grid-template-columns:28px 1fr 44px; align-items:center; gap:10px; margin:6px 0; }
.rating-bar .bar{ height:6px; border-radius:6px; background:#eef1f5; overflow:hidden; }
.rating-bar .fill{ height:100%; background:#1f7a6e; }
.review-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.4); padding:24px; z-index:9999; }
.review-modal.active{ display:flex; }
.modal-content{ background:#fff; border-radius:16px; width:min(560px, 92vw); padding:20px; box-shadow:0 20px 60px rgba(0,0,0,.2); }
.modal-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.modal-close{ border:none; background:transparent; font-size:24px; line-height:1; cursor:pointer; }
.star-rating{ display:flex; flex-direction:row-reverse; gap:4px; font-size:28px; }
.star-rating input{ display:none; }
.star-rating label{ cursor:pointer; filter:grayscale(1) contrast(.7); }
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label{ filter:none; color:#f2c653; }
.review-form .form-group{ margin:12px 0; }
.review-form input, .review-form textarea{ width:100%; border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:#fff; }
.review-form .form-actions{ display:flex; justify-content:flex-end; gap:10px; }

.rating-count{ display:none; }

/* ===== Update_Seaside_Optimized_Slider/styles.css ===== */



/* mini-cart qty controls */
.mc-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px dashed #eee}
.mc-left{display:flex;flex-direction:column;gap:6px}
.mc-qty{display:inline-flex;align-items:center;gap:8px}
.mc-qty-btn{width:28px;height:28px;border-radius:8px;border:1px solid #111;background:#fff;color:#111;font-weight:700;cursor:pointer}
.mc-remove{margin-top:6px;border:none;background:none;font-size:20px;line-height:1;cursor:pointer;color:#999}
.mc-remove:hover{color:#111}

/* mini-cart thumbnail layout */
.mc-left{display:flex;gap:10px;align-items:flex-start}
.mc-info{display:flex;flex-direction:column;gap:6px}
.mc-thumb{width:54px;height:54px;object-fit:cover;border-radius:8px;border:1px solid #eee;flex:0 0 auto}


/* === Mini Cart (CSP-safe external CSS) === */
#mc-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);backdrop-filter:saturate(120%) blur(1px);z-index:9990;display:none}
#mini-cart[aria-hidden="false"]~#mc-backdrop{display:block}
#mini-cart{position:fixed;top:0;right:0;width:min(420px,90vw);height:100%;background:#fff;z-index:9991;border-left:1px solid #eee;transform:translateX(100%);transition:transform .28s ease}
#mini-cart[aria-hidden="false"]{transform:none}
.mc-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #eee;font-weight:700}
.mc-body{padding:16px 18px;height:calc(100% - 160px);overflow:auto}
.mc-foot{padding:16px 18px;border-top:1px solid #eee}
.mc-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px dashed #eee}
.mc-left{display:flex;gap:10px;align-items:flex-start}
.mc-info{display:flex;flex-direction:column;gap:6px}
.mc-thumb{width:54px;height:54px;object-fit:cover;border-radius:8px;border:1px solid #eee;flex:0 0 auto}
.mc-actions{display:flex;gap:10px}
.mc-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 14px;border-radius:12px;border:1px solid #111;background:#111;color:#fff;text-decoration:none}
.mc-btn.alt{background:#fff;color:#111}
.mc-qty{display:inline-flex;align-items:center;gap:8px}
.mc-qty-btn{width:28px;height:28px;border-radius:8px;border:1px solid #111;background:#fff;color:#111;font-weight:700;cursor:pointer}
.mc-remove{margin-top:6px;border:none;background:none;font-size:20px;line-height:1;cursor:pointer;color:#999}
.mc-remove:hover{color:#111}

/* === Reviews (external CSS) === */
.reviews-summary{font-weight:600;margin:.5rem 0 1rem;}
.reviews-items{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.review-item{border:1px solid #eee;border-radius:12px;padding:1rem}
.review-head{display:flex;justify-content:space-between;font-weight:600}
.rating{letter-spacing:1px}
.review-body{margin-top:.5rem;line-height:1.6}
.review-foot{margin-top:.5rem;font-size:.875rem;opacity:.7}



/* Ensure full image in gallery */
.seaside-slide{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity .8s ease;
  object-fit:contain; object-position:center; background:#fff;
}
.seaside-slide.is-active{opacity:1}


/* ========== 修复图片阴影 & 亮度问题 ========== */

/* 首页与 About 页 hero 部分：完整显示图片 */
.hero--seaside img,
.hero--seaside video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 去除遮罩阴影层 */
.hero--seaside .overlay {
  display: none !important;
}

/* Reviews 页图片亮度恢复 */
.review-media img,
.review-media video {
  filter: brightness(1.05) !important;
  box-shadow: none !important;
}

.profile-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  align-items: center;
  background: var(--foam);
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--line);
}
.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--line);
}
.input-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
label.input-file {
  border: 1px dashed var(--line);
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
}
input[type=file] { display: none; }
.btn.danger {
  background: #ef4444;
}

/* ===================== AUTH & REVIEWS 统一风格补丁 ===================== */

/* My Account 按钮：黑底白字，与原始按钮风格一致 */
#myAccountBtn, .auth-btn, .btn-auth {
  background: #111 !important;
  color: #fff !important;
  border: 1px solid #111 !important;
  border-radius: 999px;
  font-weight: 600;
  transition: background .2s ease, transform .08s ease;
}
#myAccountBtn:hover,
.auth-btn:hover,
.btn-auth:hover {
  background: #000 !important;
  transform: translateY(-1px);
}

/* 登录 / 注册 / 忘记密码 标签：高对比度白字 */
.auth-tabs .tab {
  color: #fff !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.auth-tabs .tab.active {
  border-bottom: 2px solid #fff !important;
}

/* 弹窗背景统一（模态框） */
#auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
#auth-overlay.active { display: flex; }

.auth-modal {
  background: #fff;
  border-radius: 14px;
  padding: 32px;
  width: 90%;
  max-width: 480px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.auth-modal h2 {
  margin-bottom: 20px;
  font-family: var(--font-heading);
  text-align: center;
  text-transform: uppercase;
}
.auth-form input {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-bottom: 14px;
  font-size: 15px;
}
.auth-form button {
  width: 100%;
  background: #111;
  color: #fff;
  border-radius: 999px;
  padding: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}
.auth-form button:hover { background: #000; }

/* 登录表单消息 */
#auth-message {
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
}

/* 上传预览优化 */
.media-preview {
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,.1);
  margin-top: 10px;
}
.review-modal .media-preview {
  max-width: 100%;
  border: 1px solid var(--border);
}

/* Review 取消/提交按钮对齐 */
.review-form .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.review-form .form-actions button {
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
}
.review-form .form-actions .modal-cancel {
  background: #fff;
  color: #111;
  border: 1px solid var(--border);
}
.review-form .form-actions .modal-cancel:hover {
  background: #f9f9f9;
}
.review-form .form-actions .modal-submit {
  background: #111;
  color: #fff;
  border: none;
}
.review-form .form-actions .modal-submit:hover {
  background: #000;
}

/* Modal 修复：允许滚动内容区域 */
.modal-content {
  overflow-y: auto;
  max-height: 90vh;
  border-radius: 12px;
}

/* 移动端适配 */
@media (max-width: 640px) {
  .auth-modal {
    padding: 20px;
  }
  .auth-form input {
    font-size: 14px;
  }
  .auth-form button {
    padding: 10px;
  }
  .review-form .form-actions {
    flex-direction: column;
  }
}

/* ===== About页专用样式 ===== */

/* 背景轮播层 */
.seaside-bg-slider-container {
  position: relative;
  height: 90vh;
  overflow: hidden;
}
.seaside-bg-slider {
  position: absolute;
  inset: 0;
}
.seaside-bg-slider picture {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.seaside-bg-slider picture.active {
  opacity: 1;
}
.seaside-bg-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 文字区 */
.about-text-block {
  position: relative;
  background: #ffffff;
  padding: 80px 0;
  text-align: center;
  color: #0f172a;
  z-index: 2;
}
.about-text-block h1 {
  font-family: var(--font-heading);
  font-size: 36px;
  margin-bottom: 20px;
}
.about-text-block p {
  font-size: 18px;
  max-width: 800px;
  margin: 12px auto;
  line-height: 1.8;
}

/* 视频区 */
.about-video-block {
  padding: 40px 0 80px;
  display: flex;
}
.about-video-block video {
  width: 100%;
  max-width: none; 
  aspect-ratio: 16 / 9; 
  display: block;
  object-fit: contain; 
}

.hidden {
  display: none !important;
}

.auth-logout .btn-light {
  background: #f5f5f5;
  border: 1px solid #ccc;
  color: #333;
}