/* ============================================
   YANN & CO. — Global Styles
   Light Luxury · Modern Elegance
============================================ */

:root {
  /* Yann & Co. 专属品牌色 */
  --color-white:      #ffffff;
  --color-black:      #1a1a1a;        /* 柔和黑，用于主要文本和标题 */
  --color-greige:     #e1dbdd;        /* 微醺米色，用于高级感背景 */
  --color-green:      #a5c9b8;        /* 冷翠绿，用于按钮和高亮视觉焦点 */
  --color-almond:     #d1b99a;        /* 柔焦杏仁，用于页脚和次要点缀 */
  
  /* 辅助过渡色 */
  --color-light-bg:   #f8f9fa;        /* 极浅灰白，用于区块分割 */
  --color-text-muted: #666666;        /* 灰色，用于次要说明文字 */
  --color-border:     #eaeaec;        /* 极浅的边框色 */

  /* 字体保留原有的经典搭配（衬线+无衬线） */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', 'Helvetica Neue', sans-serif;

  --nav-height: 72px;
  --max-width:  1280px;
  --gap:        clamp(1rem, 3vw, 2rem);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--color-white);
  color: var(--color-black);
  line-height: 1.65;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ============================================
   ANNOUNCEMENT BAR
============================================ */
.announcement-bar {
  background: var(--color-almond);
  color: var(--color-white);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow: hidden;
  height: 34px;
  display: flex;
  align-items: center;
}
.announcement-inner {
  display: flex;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
  gap: 4rem;
}
.announcement-inner span { padding: 0 2rem; }
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================
   HEADER
============================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow 0.3s;
}
.header.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.04); }

.header-top {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gap);
  height: var(--nav-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.nav-left, .nav-right {
  display: flex;
  align-items: center;
  gap: 1.8rem;
}
.nav-right { justify-content: flex-end; }
.nav-left a, .nav-right a {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color 0.2s;
  font-weight: 400;
}
.nav-left a:hover, .nav-right a:hover { color: var(--color-black); }

/* Logo 容器 - 整体居中 */
.logo {
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-text {
  text-align: center;
}


.logo-main {
  font-family: var(--font-display); 
  font-weight: 600; 
  
  /* 1. 字号调大：从 1.5rem 直接拉大到 2rem（你可以根据感觉微调 1.8 到 2.2 之间） */
  font-size: 2rem; 
  color: var(--color-black);
  text-transform: none; 
  letter-spacing: 0; 
  display: block;
  
  /* 2. 核心魔法：把行高压缩，保证绝对不会撑大整个导航栏的上下高度 */
  line-height: 0.8; 
  
  /* 稍微给下方的小标题留一点点精准的距离，避免粘连 */
  margin-bottom: 6px; 
}

/* 小标题保持极简无衬线，作为对比层次 */
.logo-sub {
  font-family: var(--font-body); /* 保持原本干净的无衬线 */
  font-size: 8px; /* 极小，增加高级感 */
  font-weight: 400;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  display: block;
  margin-top: 1px;
}

/* Nav Icons */
.nav-icons { display: flex; align-items: center; gap: 0.6rem; margin-left: 0.6rem; }
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--color-black);
  transition: background 0.2s, color 0.2s;
  position: relative;
}
.icon-btn:hover { background: var(--color-light-bg); color: var(--color-green); }
.cart-count {
  position: absolute;
  top: 2px; right: 2px;
  background: var(--color-green);
  color: white;
  font-size: 9px;
  width: 14px; height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}

/* ============================================
   HERO - 左侧1/2图片 + 右侧1/2文字
============================================ */
.hero-split {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--color-white);
  min-height: 75vh;
}

.hero-split__image {
  flex: 0 0 50%; /* 图片占比 50% */
  max-width: 50%;
  position: relative; /* 新增：为双图完美叠加做准备 */
  overflow: hidden;   /* 新增：保证边缘绝对对齐，不溢出 */
}

.hero-split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 加入高级的丝滑过渡动效 */
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}

/* --- MYSTERY BOX 双图悬停互动 (极致丝滑溶解式 - 修复版) --- */

.hero-split__image {
  flex: 0 0 50%;
  max-width: 50%;
  position: relative;
  overflow: hidden;
  background-color: var(--color-greige); 
  /* 让整个图片盒子入场时也有个自然的浮现 */
  animation: fadeUpLuxury 1.2s ease-out forwards;
}

.hero-split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 核心魔法：将时间拉长到 1秒，增加 ease (平滑) 曲线 */
  transition: opacity 1s ease, transform 1s ease, filter 0.8s ease !important;
}

/* 底图 (闭合的盒子) */
.img-base {
  position: relative;
  z-index: 1;
  opacity: 1 !important;
  filter: blur(0);
}

/* 顶图 (打开的盒子) - 初始状态：完全透明 + 微微模糊 + 稍微放大 */
.img-hover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0 !important; 
  filter: blur(10px); /* 初始模糊，增加“溶解”感 */
  transform: scale(1.02); 
}

/* === 鼠标悬停时的极致丝滑切换 === */
.hero-split__image:hover .img-base {
  opacity: 0 !important;
  transform: scale(0.98);
  filter: blur(5px); /* 消失时带一点点晕开的效果 */
}

.hero-split__image:hover .img-hover {
  opacity: 1 !important;
  transform: scale(1);
  filter: blur(0); /* 出现时从模糊变清晰 */
}

.hero-split__content {
  flex: 0 0 50%; /* 文字区占比 50% */
  max-width: 50%;
  padding: 4rem clamp(2rem, 5vw, 6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero-split__title {
  font-family: var(--font-display);
  font-size: clamp(4rem, 7vw, 6.5rem); /* 字体最大：Yann & Co. */
  font-weight: 400;
  color: var(--color-black);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

/* Mystery Box 字体放大，接替成为视觉老大 */
.hero-split__subtitle {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 6vw, 5.5rem); /* 从原本的副标题尺寸，拉大到原先主标题的尺寸 */
  font-weight: 300;
  color: var(--color-black);
  margin-bottom: 0px; 
  line-height: 1.2;
}

/* 随意涂鸦的高亮背景 */
.brush-highlight {
  position: relative;
  display: inline-block;
  z-index: 1; /* 保证文字在最上层 */
}

.brush-highlight::before {
  content: "";
  position: absolute;
  z-index: -1; /* 把涂鸦底色放到文字的后面 */
  background-color: var(--color-greige); /* 使用微醺米色 #e1dbdd */
  
  /* 调整底色块的大小，让它比文字稍微大一圈 */
  top: 5%;
  bottom: 0%;
  left: -5%;
  right: -3%;
  
  /* 核心魔法：通过不对称的圆角，模拟刷子划过时边缘不平整的痕迹 */
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  
  /* 微微逆时针倾斜1.5度，打破规矩的方框感，增加手绘的随性 */
  transform: rotate(-1.5deg);
  
  /* 加一点点非常微弱的阴影，让笔触更有厚度和层次感 */
  box-shadow: 2px 2px 5px rgba(0,0,0,0.03);
}
/* 描述文案放大 */
.hero-split__desc {
  font-size: clamp(1.2rem, 2vw, 1.5rem); /* 从 1rem 级别放大到 1.5rem 级别 */
  color: var(--color-black);
  margin-top: 1rem; /* 稍微拉开一点点和上方涂鸦背景的距离，避免粘连 */
  margin-bottom: 3.5rem; 
  letter-spacing: 0.05em;
}

/* 绿底白字专属按钮放大 */
.btn-mystery {
  display: inline-block;
  background-color: var(--color-green);
  color: var(--color-white);
  padding: 1.2rem 3.5rem; /* 按钮的内边距同步放大，让按钮显得更饱满 */
  font-size: 13px; /* 字体从 11px 放大到 13px */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid var(--color-green);
}

.btn-mystery:hover {
  background-color: #8fb5a3;
  border-color: #8fb5a3;
  color: var(--color-white);
}

/* --- 手机端适配：当屏幕较小时，自动变为上下结构 --- */
@media (max-width: 900px) {
  .hero-split__image {
    flex: 0 0 100%;
    max-width: 100%;
    height: 40vh;
  }
  .hero-split__content {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 4rem 2rem;
  }
}

/* ============================================
   HERO 入场动画 (高级轻奢感)
============================================ */

/* 1. 定义动画关键帧 */
/* 图片柔和展开：从放大1.05倍+透明，过渡到原比例+完全不透明 */
@keyframes imageReveal {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 文字/按钮阶梯上浮：从下方 30px 处+透明，缓缓浮动到原本位置 */
@keyframes fadeUpLuxury {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. 将动画绑定到首屏元素上 */



/* 右侧主标题 (Mystery Box)：延迟 0.3 秒出场 */
.hero-split__subtitle {
  opacity: 0;
  animation: fadeUpLuxury 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.3s;
}

/* 右侧描述文字：延迟 0.5 秒出场 */
.hero-split__desc {
  opacity: 0;
  animation: fadeUpLuxury 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.5s;
}

/* 右侧下单按钮：最后压轴，延迟 0.7 秒出场 */
.btn-mystery {
  opacity: 0;
  animation: fadeUpLuxury 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.7s;
}

/* ============================================
   BUTTONS (全局按钮)
============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2.2rem;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 0.3s ease;
  border-radius: 0;
  cursor: pointer;
}

.btn-primary {
  background: var(--color-green);
  color: white;
  border: 1px solid var(--color-green);
}
.btn-primary:hover {
  background: #8fb5a3;
  border-color: #8fb5a3;
}

.btn-ghost {
  background: transparent;
  color: var(--color-black);
  border: 1px solid var(--color-black);
}
.btn-ghost:hover {
  background: var(--color-black);
  color: white;
}

.btn-outline {
  background: transparent;
  color: var(--color-black);
  border: 1px solid var(--color-border);
}
.btn-outline:hover {
  border-color: var(--color-black);
}

.text-center { text-align: center; margin-top: 3rem; }

/* ============================================
   VALUES STRIP
============================================ */
.values-strip {
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 1.5rem 0;
  overflow: hidden;
}
.values-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gap);
}
.value-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-black);
}
.value-divider {
  color: var(--color-almond);
  font-size: 10px;
}

/* ============================================
   SECTION HEADERS
============================================ */
.section-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3.5rem;
}
.section-eyebrow {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}
.section-eyebrow::before, .section-eyebrow::after {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background: var(--color-border);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  color: var(--color-black);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.section-title em { font-style: italic; color: var(--color-green); }
.section-desc {
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ============================================
   COLLECTIONS (保留 1.4:1:1 宽度，高度完美对齐)
============================================ */
.collections-section {
  padding: 6rem var(--gap);
  max-width: var(--max-width);
  margin: 0 auto;
}

.collections-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr; /* 保留你想要的：第一个宽，后两个一样宽 */
  gap: 1.2rem;
  align-items: stretch; /* 魔法 1：强制这一排的所有卡片总高度一样 */
  margin-bottom: 0;
}

/* --- Signature Categories 卡片基础样式 --- */
/* --- Signature Categories (悬停时纯粹放大，不上浮) --- */
.collection-card {
  display: flex;
  flex-direction: column;
  background: var(--color-light-bg);
  height: 100%;
  position: relative;
  z-index: 1;
  /* 核心修复：我彻底删除了这里的 transition 代码！
     这样它就能完美找回 0.1s、0.2s 的阶梯延迟，像 Trending Now 一样优雅入场 */
}

.collection-card:hover { 
  /* 光标碰到时，纯粹地放大 */
  transform: scale(1.03) !important; 
  z-index: 10; 
  /* 魔法小细节：光标放上去的瞬间取消延迟，让卡片立刻开始放大 */
  transition-delay: 0s !important; 
}

/* 确保下方的图片样式不受影响 */

/* 魔法 2：将原本的 translateY 改为 scale 放大 */
.collection-card:hover { 
  /* 放大 1.05 倍，并配合微小的上移，会让卡片看起来像“浮”向用户 */
  transform: scale(1.05) translateY(-5px) !important; 
  
  /* 增加更柔和的阴影，强化悬浮的立体感 */
  box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
  
  /* 确保悬浮的卡片在视觉最上层，不会被旁边的卡片边缘遮挡 */
  z-index: 10; 
}

.collection-card__img {
  position: relative;
  width: 100%;
  flex-grow: 1; /* 魔法 2：让图片区域自动向下伸展，吃掉所有的留白空隙 */
  overflow: hidden;
  background: var(--color-greige);
}

/* 左侧大图保留基础比例，它来撑起整个一行的高度 */
.collection-card--large .collection-card__img {
  aspect-ratio: 3/4;
}

.collection-card__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证图片不管被拉伸成什么比例，都能完美裁切不变形 */
}

.collection-card__info {
  padding: 1.4rem 1.5rem;
  background: var(--color-white); /* 换回干净的白底 */
  border: 1px solid var(--color-border); /* 加回极细的边框，勾勒卡片轮廓 */
  border-top: none;
  display: flex;
  flex-direction: column;
}

/* 标题（H3）和描述（P）原本就是黑/灰色系，保持不变即可 */
.collection-card__info h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-black);
  margin-bottom: 0.25rem;
}

.collection-card__info p {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.8rem;
}

/* 专门修改 Shop Now 链接的颜色 */
.collection-link {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-green); /* 这里改成了冷翠绿 #a5c9b8 */
  font-weight: 500;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: all 0.3s;
  align-self: flex-start;
}

/* 鼠标悬停时，底部的下划线也变成冷翠绿，交互感更一致 */
.collection-card:hover .collection-link { 
  border-color: var(--color-green); 
}

.collection-card:hover .collection-link { border-color: var(--color-black); }

/* 手机端适配：自动变成上下排列 */
@media (max-width: 900px) {
  .collections-grid {
    grid-template-columns: 1fr;
  }
  .collection-card__img {
    aspect-ratio: 4/5; 
  }
}

/* ============================================
   PHILOSOPHY (The Brand)
============================================ */
.philosophy-section {
  background: var(--color-light-bg);
  padding: 4rem var(--gap); /* 核心在这里：把原本 6rem 的上下内边距改成了 4rem，大幅缩减了空白 */
}
.philosophy-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.philosophy-text .section-eyebrow { justify-content: center; }
.philosophy-text h2 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 300;
  color: var(--color-black);
  line-height: 1.1;
  margin-bottom: 1.5rem; /* 让大标题和下面的按钮保持一个紧凑且优雅的距离 */
}
.philosophy-text h2 em { font-style: italic; color: var(--color-green); }
.philosophy-text p {
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.philosophy-text .btn-outline { margin-top: 1rem; }

/* ============================================
   CUSTOMER REVIEWS
============================================ */
.reviews-section {
  padding: 6rem var(--gap);
  max-width: var(--max-width);
  margin: 0 auto;
  background-color: var(--color-white); /* 纯白背景 */
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.review-card {
  background: var(--color-light-bg); /* 极浅灰白，与白底形成微弱层次 */
  padding: 3rem 2rem;
  text-align: center;
  border: 1px solid var(--color-border);
  transition: transform 0.4s ease;
}

.review-card:hover {
  transform: translateY(-5px);
}

.review-stars {
  color: var(--color-almond); /* 柔焦杏仁色，呈现香槟金质感 */
  font-size: 1.2rem;
  letter-spacing: 3px;
  margin-bottom: 1.5rem;
}

.review-text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--color-black);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.review-author {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* ============================================
   PRODUCTS
============================================ */
.products-section {
  /* 魔法在这里：2rem是上边距(变窄了)，var(--gap)是左右边距，6rem是下边距(保持底部的呼吸感) */
  padding: 2rem var(--gap) 6rem; 
  max-width: var(--max-width);
  margin: 0 auto;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* --- Trending Now (悬停时绝对静止，不放大也不上浮) --- */
.product-card {
  background: white;
  overflow: hidden;
  border: 1px solid transparent;
  /* 移除了原有的 transform 和 box-shadow 的过渡时间，因为它不需要动了 */
}

.product-card:hover {
  /* 移除了 translateY 和 悬浮阴影，让它像画报一样静止 */
  /* 仅保留极其微弱的边框线作为触碰反馈，保持克制 */
  border-color: var(--color-border); 
}

.product-card__img-wrap {
  position: relative;
  display: block;
}
.product-card__img {
  aspect-ratio: 3/4;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--color-light-bg); 
  transition: opacity 0.4s ease;
}
.product-card:hover .product-card__img { opacity: 0.9; }

.product-card__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--color-black);
  color: var(--color-white);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
}
.product-card__badge--sale { background: var(--color-almond); }

.product-card__info { padding: 1.2rem 0; }
.product-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-black);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}
.product-subtitle {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 0.8rem;
}
.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.product-price {
  font-size: 14px;
  color: var(--color-black);
  font-weight: 400;
}
.product-price--sale { color: var(--color-almond); }
.product-price--original {
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.add-to-cart {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-black);
  cursor: pointer;
  transition: all 0.2s;
}
.add-to-cart:hover {
  background: var(--color-green);
  color: white;
  border-color: var(--color-green);
}

/* ============================================
   JOURNAL
============================================ */
.journal-section {
  padding: 6rem var(--gap);
  max-width: var(--max-width);
  margin: 0 auto;
}

.journal-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 1.5rem;
}

.journal-card {
  display: block;
  background: white;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.journal-card:hover { transform: translateY(-4px); }

.journal-card__img {
  aspect-ratio: 4/3;
  background: var(--color-light-bg);
  position: relative;
  overflow: hidden;
}
.journal-img-1 { background: #f0f0f0; }
.journal-img-2 { background: var(--color-greige); }
.journal-img-3 { background: #eaeaec; }

.journal-card--featured .journal-card__img { aspect-ratio: 4/3.5; }

.journal-card__info { padding: 1.4rem 0; }
.journal-tag {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: inline-block;
  background: var(--color-light-bg);
  padding: 4px 8px;
  margin-bottom: 0.8rem;
}
.journal-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-black);
  margin-bottom: 0.6rem;
  line-height: 1.3;
}
.journal-card p {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 1rem;
}
.journal-link {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-black);
  font-weight: 500;
  border-bottom: 1px solid var(--color-black);
  padding-bottom: 2px;
}

/* ============================================
   INSTAGRAM FEED
============================================ */
.feed-section {
  padding: 4rem var(--gap) 6rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.feed-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
}

.feed-item {
  aspect-ratio: 1;
  background: var(--color-light-bg); 
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.feed-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26,26,26,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.feed-item:hover .feed-overlay { opacity: 1; }

/* ============================================
   NEWSLETTER
============================================ */
.newsletter-section {
  background: var(--color-greige); 
  padding: 6rem var(--gap);
  text-align: center;
}
.newsletter-inner { max-width: 560px; margin: 0 auto; }

.newsletter-section .section-eyebrow { color: var(--color-text-muted); }
.newsletter-section h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--color-black);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.newsletter-section h2 em { font-style: italic; color: var(--color-green); }
.newsletter-section > .newsletter-inner > p {
  font-size: 15px;
  color: var(--color-black);
  opacity: 0.8;
  margin-bottom: 2rem;
}

.newsletter-form {
  display: flex;
  gap: 0;
  max-width: 440px;
  margin: 0 auto 1rem;
  border: 1px solid var(--color-black);
}
.newsletter-input {
  flex: 1;
  background: var(--color-white);
  border: none;
  padding: 0.9rem 1.2rem;
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
}
.newsletter-input::placeholder { color: var(--color-text-muted); }
.newsletter-note {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}
/* ============================================
   FOOTER (全新古典衬线体版)
============================================ */
.footer {
  background: var(--color-almond); 
  color: var(--color-white);
}

/* 强制抵抗 HTML 里的全局黑字干扰 */
.footer h3, .footer h4, .footer p, .footer a, .footer li {
  color: var(--color-white) !important;
}

.footer-top {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4rem var(--gap) 3rem;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 4rem;
}

/* 品牌名：高级衬线体、取消大写 */
.footer-brand h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none; 
  margin-bottom: 1.2rem;
}

.footer-tagline {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,0.8) !important;
  margin-bottom: 1.5rem;
  max-width: 260px;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 2rem;
}

/* 标题栏：高级衬线体、取消大写、字号稍微放大 */
.footer-column h4 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 400;
  margin-bottom: 1.2rem;
}

.footer-column li { margin-bottom: 0.65rem; }

/* 链接：高级衬线体、取消大写 */
.footer-column a {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 400;
  color: rgba(255,255,255,0.8) !important;
  transition: color 0.2s;
}
.footer-column a:hover { color: var(--color-white) !important; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.2);
  padding: 1.5rem var(--gap);
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-bottom p {
  font-family: var(--font-body); /* 底部版权信息保留无衬线以保证清晰度 */
  font-size: 11px;
  color: rgba(255,255,255,0.6) !important;
}
.footer-bottom a { 
  color: var(--color-white) !important; 
  text-decoration: underline; 
  font-family: var(--font-body);
  font-size: 11px;
}

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 1100px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .collections-grid { grid-template-columns: 1fr 1fr; }
  .journal-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .header-top { grid-template-columns: 1fr auto; }
  .nav-left { display: none; }
  .philosophy-content,
  .impact-inner { grid-template-columns: 1fr; gap: 3rem; }
  .footer-top { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-links { grid-template-columns: repeat(2, 1fr); }
  .feed-grid { grid-template-columns: repeat(3, 1fr); }
  .journal-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .collections-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr 1fr; }
  .feed-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .newsletter-form { flex-direction: column; border: none; gap: 10px; }
  .newsletter-input { border: 1px solid var(--color-border); width: 100%; }
  .hero-ctas { flex-direction: column; align-items: center; }
  .values-inner { gap: 1rem; }
}

/* ============================================
   DROPDOWN MENU (Shop All 下拉悬浮菜单)
============================================ */
.nav-item-dropdown {
  position: relative;
  padding: 15px 0; 
  margin: -15px 0;
  display: flex;
  align-items: center;
}

/* 这个是控制悬浮窗长什么样，以及默认把它“藏”起来 */
.dropdown-menu {
  position: absolute; /* 绝对定位，让它“飘”在网页上方，不挤占原有空间 */
  top: 100%;
  left: -15px; 
  background-color: var(--color-white);
  min-width: 220px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.06); 
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-green); 
  
  /* 核心隐藏魔法：默认透明且不可见 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px); /* 默认往下沉一点 */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
  z-index: 200; /* 确保它弹出来时不会被下面的图片挡住 */
}

/* 核心显示魔法：当鼠标放上去时，让它显现！ */
.nav-item-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); 
}

/* 菜单里面文字的样式 */
.dropdown-menu a {
  padding: 0.8rem 1.5rem;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: all 0.3s ease;
  display: block;
  width: 100%;
}

/* 鼠标滑过具体选项时，文字微微向右缩进的高级特效 */
.dropdown-menu a:hover {
  color: var(--color-black);
  background-color: var(--color-light-bg); 
  padding-left: 1.9rem; 
}

/* ============================================
   OUR STORY PAGE (统一宽度排版)
============================================ */
.story-page {
  background-color: var(--color-white);
  padding-bottom: 6rem;
}

.story-header {
  text-align: center;
  /* 上下统一改为 3rem，大幅缩小了留白，并且绝对对称 */
  padding: 3rem 2rem; 
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem); 
  font-weight: 400;
  color: var(--color-green); 
  letter-spacing: 0.1em;
  /* 强制清零默认的边距，确保文字在白框里绝对居中 */
  margin: 0; 
  line-height: 1; 
}

/* 核心魔法：统一的容器宽度，保证所有内容边缘平齐 */
.story-container {
  max-width: 860px; /* 设定所有图文的统一最大宽度 */
  margin: 0 auto;
  padding: 0 var(--gap);
}

/* 顶部大图 */
.story-hero-image {
  width: 100%; /* 占满容器宽度 */
  margin-bottom: 4rem;
}

.story-hero-image img {
  width: 100%;
  aspect-ratio: 21 / 9; /* 宽幅画幅 */
  object-fit: cover;
  background-color: var(--color-greige);
  display: block;
}

/* 文章容器 */
.story-article {
  width: 100%;
}

/* 文字区块 */
.story-text {
  width: 100%; /* 占满容器宽度 */
  margin: 0 auto 4rem;
}

.story-text p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

/* 独立设计的引言段落 */
.story-text p.intro {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  line-height: 1.6;
  color: var(--color-almond); /* #e1dbdd 微醺米色 */
  font-style: italic;         /* 斜体 */
  margin-bottom: 2.5rem;
  text-align: center;
}

/* 并排双图 */
.story-image-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  width: 100%; /* 占满容器宽度 */
  margin: 0 auto;
}

.story-image-duo .duo-img img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background-color: var(--color-almond);
  display: block;
}

/* 手机端适配 */
@media (max-width: 768px) {
  .story-hero-image img {
    aspect-ratio: 4 / 3;
  }
  .story-image-duo {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ============================================
   STORY / PRIVACY POLICY 排版优化
============================================ */
/* 统一正文字体为纤细的无衬线体 */
.story-text {
  font-family: var(--font-body); 
  font-weight: 300; 
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

/* 统一小标题为优雅的古典衬线体 */
.story-text h3 {
  font-family: var(--font-display);
  font-weight: 500; 
  font-size: 1.25rem;
  letter-spacing: 1px; 
  margin-top: 3rem; 
  margin-bottom: 1rem;
  color: var(--color-black);
  text-transform: uppercase; 
}

/* 段落和列表底部留白 */
.story-text p, .story-text ul {
  margin-bottom: 1.5rem;
}

/* 列表项专属优雅设计 */
.story-text li {
  margin-bottom: 0.8rem;
  list-style-type: none; /* 去掉默认的丑陋黑点 */
  position: relative;
  padding-left: 1.5rem;
}

/* 用品牌的冷翠绿小星星代替默认黑点 */
.story-text li::before {
  content: "✦"; 
  color: var(--color-green); 
  font-size: 0.8rem;
  position: absolute;
  left: 0;
  top: 2px;
}
/* ============================================
   SUBPAGE FOOTER (子页面：微醺米色底 + 黑字)
============================================ */
.footer-subpage {
  background-color: #e1dbdd !important; 
  color: #1a1a1a !important;
}

/* 强制让子页面 Footer 里的所有标题、正文、链接都变成黑色 */
.footer-subpage h3,
.footer-subpage h4,
.footer-subpage p,
.footer-subpage a {
  color: #1a1a1a !important; 
}

/* 鼠标悬停在链接上时，稍微变浅一点 */
.footer-subpage a:hover {
  opacity: 0.6;
}

/* 将最底部的版权分割线改成半透明的深色 */
.footer-subpage .footer-bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}
/* ============================================
   SIDE CART (侧边栏购物车)
============================================ */
/* 1. 背景遮罩 */
.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

/* 2. 购物车面板本身 */
.side-cart {
  position: fixed;
  top: 0;
  right: -450px; /* 初始状态：隐藏在屏幕右侧外部 */
  width: 100%;
  max-width: 420px;
  height: 100vh;
  background-color: var(--color-white);
  z-index: 1000;
  box-shadow: -5px 0 30px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 丝滑的减速滑动动画 */
}

/* 3. 激活状态 (当 JS 给它们加上 .active 类名时触发显示) */
.cart-overlay.active {
  opacity: 1;
  visibility: visible;
}
.side-cart.active {
  right: 0; /* 滑入屏幕 */
}

/* --- 购物车内部排版 --- */
.cart-header {
  padding: 2rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-header h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0;
}

.close-cart {
  background: none;
  border: none;
  font-size: 2rem;
  font-weight: 300;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.3s;
}
.close-cart:hover { color: var(--color-black); }

.cart-body {
  flex-grow: 1;
  padding: 2rem;
  overflow-y: auto; /* 商品多了可以上下滚动 */
}

.cart-item {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.cart-item-img {
  width: 90px;
  height: 110px;
  background-color: var(--color-greige);
}
.cart-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.cart-item-info h4 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.cart-item-price {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.cart-item-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  width: fit-content;
}

.qty-btn {
  background: none;
  border: none;
  padding: 5px 12px;
  cursor: pointer;
  color: var(--color-text-muted);
}
.cart-item-qty span { font-size: 13px; padding: 0 10px; }

.cart-item-remove {
  background: none;
  border: none;
  text-decoration: underline;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  cursor: pointer;
  align-self: flex-start;
  margin-top: 0.5rem;
}

.cart-footer {
  padding: 2rem;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-light-bg);
}

.cart-subtotal {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.cart-taxes {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

.btn-checkout {
  width: 100%;
  background-color: var(--color-green);
  color: white;
  border: none;
  padding: 1.2rem;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.3s;
}
.btn-checkout:hover { opacity: 0.8; }

/* ============================================
   OUR STORY 页面入场动画 (画册翻阅感)
============================================ */

/* 1. 顶部标题：直接开始缓缓浮现 */
.story-header {
  opacity: 0;
  /* 复用刚刚写好的 fadeUpLuxury 上浮动画 */
  animation: fadeUpLuxury 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 2. 顶部宽幅大图：如电影开场般缓缓清晰放大 */
.story-hero-image img {
  opacity: 0;
  /* 复用图片柔和展开动画，延迟 0.3 秒，让标题先亮出来 */
  animation: imageReveal 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.3s;
}

/* 3. 文章主体文字区：跟着大图的节奏上浮 */
.story-text {
  opacity: 0;
  animation: fadeUpLuxury 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.6s;
}

/* 4. 底部并排双图：最后压轴浮现 */
.story-image-duo {
  opacity: 0;
  animation: fadeUpLuxury 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.9s; /* 延迟时间最长，作为视觉的收尾 */
}

/* ============================================
   MOBILE MENU & HEADER (移动端专属样式)
============================================ */

/* 1. 默认状态：在电脑端隐藏移动端菜单元素 */
.mobile-nav-toggle, .mobile-menu { display: none; }

@media (max-width: 900px) {
  /* --- A. 修复 Header 绝对居中与紧凑排版 --- */
  .header-top {
    display: flex !important; 
    justify-content: space-between; 
    align-items: center;
    padding: 0 1rem !important; 
    height: 60px !important;
    position: relative; /* 核心魔法 1：开启绝对定位的锚点 */
  }

  .nav-left, .nav-right {
    flex: unset !important;
    display: flex;
    align-items: center;
  }

  .nav-left a, .nav-right a, .nav-item-dropdown {
    display: none !important; /* 隐藏冗余文字链接 */
  }

  /* 核心魔法 2：强行把 Logo 钉死在屏幕绝对物理中心 */
  .logo {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .logo-main {
    font-size: 1.4rem !important; 
    line-height: 1;
    margin-bottom: 2px;
  }

  .logo-sub {
    font-size: 6px !important;
    letter-spacing: 0.1em;
  }

  /* 收紧右侧三个图标的间距 */
  .nav-icons {
    gap: 0 !important; 
  }
  .icon-btn {
    width: 32px !important; 
    height: 32px !important;
    padding: 0 !important;
  }

  .header {
    background: var(--color-white) !important;
    position: sticky;
    top: 0;
    z-index: 1000;
  }

/* --- B. 汉堡菜单面板样式 (Gloria 修正版) --- */
  .mobile-nav-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    width: 22px;
    height: 14px;
    z-index: 1100;
  }
  .mobile-nav-toggle span {
    display: block;
    width: 100%;
    height: 1.5px;
    background-color: var(--color-black);
  }

  .mobile-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: -100%; 
    width: 80%; 
    max-width: 300px; 
    height: 100vh;
    background-color: var(--color-white); /* 菜单主体恢复干净的纯白 */
    z-index: 1100;
    transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 10px 0 30px rgba(0,0,0,0.05);
  }
  .mobile-menu.active { left: 0; } 

/* 2. Logo 部分背景换成柔焦杏仁 (#d1b99a) */
  .menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-greige); 
    /* 核心调整：将上下的 2.5rem 缩减为 1.2rem，大幅压低色块的高度 */
    padding: 1.9rem 2rem; 
  }
  
  /* 3. Logo 使用 Serif 字体，取消全部大写，展现原汁原味的 Yann & Co. */
  .menu-logo { 
    font-family: var(--font-display); 
    font-size: 1.8rem; 
    font-weight: 500;
    color: var(--color-white); /* 杏仁底色搭配白色字体，最显温柔高级 */
    text-transform: none; /* 强制取消大写 */
    line-height: 1;
  }
  
  .close-menu { 
    font-size: 2.2rem; 
    font-weight: 300; 
    color: var(--color-white); /* 关闭按钮与 Logo 颜色统一 */
    line-height: 1; 
    transition: opacity 0.3s ease;
  }
  .close-menu:hover { opacity: 0.7; } 

  /* 1. 字体恢复原来的精巧大小和比例 */
  .menu-body { 
    display: flex; 
    flex-direction: column; 
    padding: 1.5rem 2rem; 
  }
  
  .menu-body a {
    font-family: var(--font-body);
    font-size: 12px; 
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-black);
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border); /* 恢复细线分割 */
    transition: all 0.3s ease;
  }

  .menu-body a:hover, 
  .menu-body a:active {
    color: var(--color-green); 
    padding-left: 8px; /* 触碰时微微右移的细腻交互 */
    border-bottom-color: var(--color-green); 
  }
} /* 🔴 依然注意：这个关门大括号必须留在这里！ */

/* ============================================
   MOBILE SWIPE CAROUSELS (自带保护罩，仅限手机端)
============================================ */
@media (max-width: 900px) {
  /* 1. 将原本上下堆叠的网格，强制改为横向排列 */
  .collections-grid, 
  .products-grid, 
  .reviews-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory; 
    -webkit-overflow-scrolling: touch; 
    gap: 1rem;
    padding-bottom: 1.5rem; 
    
    /* 解决贴边问题，保证左右留白 */
    padding-left: var(--gap) !important;
    padding-right: var(--gap) !important;
    margin-left: calc(-1 * var(--gap)) !important;
    margin-right: calc(-1 * var(--gap)) !important;
  }

  /* 2. 隐藏原生的丑陋滚动条 */
  .collections-grid::-webkit-scrollbar, 
  .products-grid::-webkit-scrollbar, 
  .reviews-grid::-webkit-scrollbar {
    display: none !important;
  }
  .collections-grid, .products-grid, .reviews-grid {
    -ms-overflow-style: none !important;  
    scrollbar-width: none !important;  
  }

  /* 3. 设定滑动卡片的尺寸：占屏幕 75% */
  .collection-card, 
  .product-card, 
  .review-card {
    flex: 0 0 75% !important; 
    width: 75% !important;
    scroll-snap-align: center; 
  }

  .collection-card__img {
    aspect-ratio: 4/5 !important; 
  }
} /* 🔴 这个大括号就是结界，它保证这段代码绝对不会跑到电脑端去！ */




/* ============================================
   SCROLL REVEAL (全站统一滚动入场动画)
============================================ */

/* 1. 初始状态：透明且向下偏移 30px */
.reveal-element {
  opacity: 0;
  transform: translateY(30px);
  /* 统一使用 0.8s 的丝滑曲线 */
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 2. 激活状态：当 JS 侦测到滚动到此处时触发 */
.reveal-element.active {
  opacity: 1;
  transform: translateY(0);
}

/* 3. 阶梯式延迟：让一排卡片像多米诺骨牌一样依次浮现 */
.collection-card:nth-child(2), .product-card:nth-child(2) { transition-delay: 0.1s; }
.collection-card:nth-child(3), .product-card:nth-child(3) { transition-delay: 0.2s; }
.product-card:nth-child(4) { transition-delay: 0.3s; }

/* ============================================
   MOBILE TWEAKS: 手机端终极整合微调版
============================================ */

/* 1. 默认在电脑端彻底隐藏滑动指示点 */
.pagination-dots {
  display: none;
}

/* --------------------------------------------
   A. 平板与手机端全局适配 (900px 以下)
-------------------------------------------- */
@media (max-width: 900px) {

  /* --- 1. 强制 Jewelry 手机端插队 --- */
  .card-jewelry { order: -1 !important; }

  /* --- 2. 横向滑动轨道核心设置 --- */
  .carousel-main {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory; 
    -webkit-overflow-scrolling: touch; 
    gap: 1rem;
    padding-bottom: 1.5rem !important; 
    padding-left: var(--gap) !important;
    padding-right: var(--gap) !important;
    margin-left: calc(-1 * var(--gap)) !important;
    margin-right: calc(-1 * var(--gap)) !important;
    align-items: stretch !important; 
  }
  .carousel-main::-webkit-scrollbar { display: none !important; }
  .carousel-main { -ms-overflow-style: none !important; scrollbar-width: none !important; }

  /* --- 3. 滑动卡片等高与比例锁定 --- */
  .collection-card, .product-card, .review-card {
    flex: 0 0 85% !important; 
    width: 85% !important;
    scroll-snap-align: center; 
    height: auto !important; 
  }
  .collection-card__img {
    flex-grow: 0 !important; 
    aspect-ratio: 4/5 !important; 
  }
  .collection-card__info {
    flex-grow: 1 !important; 
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
  }

  /* --- 4. 极简滑动指示点 (柔焦杏仁色) --- */
  .pagination-dots {
    display: flex !important; 
    justify-content: center;
    gap: 10px; 
    margin-top: 1rem; 
    padding-bottom: 1rem;
  }
  .pagination-dots .dot {
    display: block; width: 6px; height: 6px; border-radius: 50%;
    background-color: transparent; border: 1px solid var(--color-border); 
    transition: all 0.3s ease;
  }
  .pagination-dots .dot.active {
    background-color: var(--color-almond) !important;
    border-color: var(--color-almond) !important;
  }

  /* --- 5. 首屏 (Hero) 与区块留白极限压缩 --- */
  .hero-split__content { padding: 2rem 2rem 3.5rem !important; }
  .hero-split__desc { margin-bottom: 1.5rem !important; }
  
  .collections-section, .products-section, .reviews-section {
    padding-top: 2rem !important; padding-bottom: 0.5rem !important;
  }
  .philosophy-section, .newsletter-section {
    padding-top: 2.5rem !important; padding-bottom: 2.5rem !important;
  }
  .section-header { margin-bottom: 2rem !important; }

  /* --- 6. 侧边购物车防遮挡 --- */
  .side-cart { height: 100dvh !important; }
  .cart-header, .cart-body, .cart-footer { padding: 1.5rem !important; }
  .btn-checkout { padding: 1rem !important; }

 /* --- 7. Footer (页脚) 强制三栏并排版 (大字号舒展版) --- */
  .footer-top {
    display: flex !important; flex-direction: column !important;
    gap: 3rem !important; padding-top: 3rem !important; padding-bottom: 2rem !important;
  }
  .footer-links {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; 
    /* 稍微放宽一点列间距，让变大的字体有呼吸感 */
    gap: 1.5rem 0.8rem !important; 
  }
  
  /* 🌟 核心修改：大幅提升标题和链接的字号，撑起下方空间 */
  .footer-column h4 { 
    font-size: 16px !important; /* 从 14px 放大到 16px */
    margin-bottom: 1rem !important; 
    letter-spacing: 0 !important; /* 取消多余字距，防止换行 */
  }
  .footer-column a { 
    font-size: 14px !important; /* 从 12px 放大到 14px (标准的正文阅读尺寸) */
    letter-spacing: 0 !important;
  }

  .footer-bottom {
    flex-direction: column !important; gap: 0.8rem !important; padding-top: 2rem !important;
  }

/* --------------------------------------------
   B. 极窄手机屏幕专属适配 (600px 以下)
-------------------------------------------- */
@media (max-width: 600px) {
  /* --- 8. 价值观横幅 (星星隔断) 强制锁死在一排 --- */
  .values-inner {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 2px !important; 
    padding: 0 10px !important; 
    width: 100%;
  }
  .value-item {
    font-size: 8.5px !important; 
    letter-spacing: 0.02em !important; 
    text-align: center;
    flex: 1; 
    justify-content: center;
    line-height: 1.2;
  }
  .value-divider {
    font-size: 8px !important;
    flex-shrink: 0; 
    margin: 0 2px !important; 
  }
}