/* ============================================================
   Xzqtive Child — 首页板块样式
   ------------------------------------------------------------
   作用范围：仅 front-page.php 渲染的 5 段板块
   依赖：main.css 的 CSS variable token + utility class
   ============================================================ */

/* ============ 全局：板块标题对齐 ============ */
.xz-section-head { margin-bottom: var(--xz-sp-6); }
.xz-section-title {
  font-family: var(--xz-font-serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  color: var(--xz-brand-primary);
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: none;
}

/* ============ 1. 公告条 ============ */
.xz-announcement-bar {
  background: var(--xz-ink);
  color: var(--xz-paper);
  text-align: center;
  font-family: var(--xz-font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 16px;
}
.xz-announcement-bar__message { display: inline-block; }
.xz-announcement-bar a { color: var(--xz-sand); text-decoration: underline; text-underline-offset: 3px; }

/* ============ 2. Hero — Split Layout (左文右图，高端品牌经典) ============ */
.xz-hero--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
  max-height: 820px;
  background: var(--xz-paper);
  overflow: hidden;
}
.xz-hero--split .xz-hero__text {
  display: flex;
  align-items: center;
  padding: var(--xz-sp-8) clamp(var(--xz-sp-5), 6vw, var(--xz-sp-9));
  background: var(--xz-paper);
}
.xz-hero--split .xz-hero__text-inner {
  max-width: 480px;
}
.xz-hero--split .xz-hero__eyebrow {
  color: var(--xz-rust);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
  margin: 0 0 var(--xz-sp-2);
  opacity: 0.95;
}
.xz-hero--split .xz-hero__title {
  color: var(--xz-ink);
  font-family: var(--xz-font-serif);
  font-size: clamp(40px, 5.2vw, 68px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.04em;
  margin: 0 0 var(--xz-sp-4);
  text-shadow: none;
  text-transform: none;
}
.xz-hero--split .xz-hero__subtitle {
  color: var(--xz-mute);
  font-family: var(--xz-font-sans);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  margin: 0 0 var(--xz-sp-5);
  max-width: 420px;
}
.xz-hero--split .xz-hero__ctas {
  display: flex;
  gap: var(--xz-sp-3);
  flex-wrap: wrap;
}

/* 右侧 image — 完整显示模特，object-fit cover 但 image 本身比例 1:1 不会切重要部分 */
.xz-hero--split .xz-hero__image {
  position: relative;
  overflow: hidden;
  background: var(--xz-bronze);
}
.xz-hero--split .xz-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;   /* 优先保模特上半部分（头/脸/上身），切下半 */
  display: block;
  transition: transform 1.2s ease-out;
}
.xz-hero--split:hover .xz-hero__image img {
  transform: scale(1.03);
}

/* mobile: 堆叠（image 在上，文字在下）*/
@media (max-width: 900px) {
  .xz-hero--split {
    grid-template-columns: 1fr;
    max-height: none;
  }
  .xz-hero--split .xz-hero__image {
    order: 1;
    aspect-ratio: 4 / 5;
    max-height: 70vh;
  }
  .xz-hero--split .xz-hero__text {
    order: 2;
    padding: var(--xz-sp-6) var(--xz-sp-4);
  }
}

/* ============ 2b. Hero Fullscreen — 横版 banner image cover + 居中文字 ============ */
.xz-hero--fullscreen,
.xz-hero--gradient,
.xz-hero--slider {
  position: relative;
  min-height: 70vh;
  max-height: 820px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

/* ============ Hero Slider — 4 张 fade 轮播 + dot 手动切换 ============
   自动模式：CSS @keyframes 24s 循环（每张 5s 显示 + 1s fade）
   手动模式：JS 加 .is-manual class 停掉 animation，用 .is-active 控制 opacity
*/
.xz-hero--slider .xz-hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  z-index: -2;
  opacity: 0;
  animation: xz-hero-fade 24s infinite ease-in-out;
}
.xz-hero--slider .xz-hero__bg--slide-1 { animation-delay:  0s; }
.xz-hero--slider .xz-hero__bg--slide-2 { animation-delay:  6s; }
.xz-hero--slider .xz-hero__bg--slide-3 { animation-delay: 12s; }
.xz-hero--slider .xz-hero__bg--slide-4 { animation-delay: 18s; }

@keyframes xz-hero-fade {
  0%, 20.8% { opacity: 1; }
  25%       { opacity: 0; }
  100%      { opacity: 0; }
}

/* 手动模式 — JS 控制 */
.xz-hero--slider.is-manual .xz-hero__bg {
  animation: none;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
.xz-hero--slider.is-manual .xz-hero__bg.is-active {
  opacity: 1;
}

/* Dots — 底部居中 3-5 个圆点 */
.xz-hero__dots {
  position: absolute;
  bottom: var(--xz-sp-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;
}
.xz-hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}
.xz-hero__dot:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.2);
}
.xz-hero__dot.is-active {
  background: var(--xz-white);
  width: 28px;
  border-radius: 5px;
}
.xz-hero__dot:focus-visible {
  outline: 2px solid var(--xz-rust);
  outline-offset: 2px;
}

/* 用户偏好减少动画时禁用轮播（accessibility） */
@media (prefers-reduced-motion: reduce) {
  .xz-hero--slider .xz-hero__bg { animation: none; }
  .xz-hero--slider .xz-hero__bg--slide-1 { opacity: 1; }
}

.xz-hero--fullscreen .xz-hero__bg,
.xz-hero--gradient .xz-hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 30%;     /* 30% from top: 露模特脸+腰带的画面焦点 */
  background-repeat: no-repeat;
  z-index: -2;
  transform: scale(1.02);
  transition: transform 1.2s ease-out;
}
.xz-hero--fullscreen:hover .xz-hero__bg { transform: scale(1.05); }

.xz-hero--fullscreen .xz-hero__overlay,
.xz-hero--gradient .xz-hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0, calc(var(--xz-hero-overlay, 0.32) * 0.4)) 0%,
      rgba(0,0,0, calc(var(--xz-hero-overlay, 0.32) * 0.8)) 70%,
      rgba(0,0,0, calc(var(--xz-hero-overlay, 0.32) * 1.0)) 100%);
  z-index: -1;
}

.xz-hero--fullscreen .xz-hero__content,
.xz-hero--gradient .xz-hero__content {
  text-align: center;
  color: var(--xz-white);
  padding: var(--xz-sp-7) var(--xz-sp-4);
  max-width: 880px;
}
.xz-hero--fullscreen .xz-hero__eyebrow,
.xz-hero--gradient .xz-hero__eyebrow {
  color: var(--xz-white);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1;
  margin: 0 0 var(--xz-sp-2);
  opacity: 0.95;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.xz-hero--fullscreen .xz-hero__title,
.xz-hero--gradient .xz-hero__title {
  color: var(--xz-white);
  font-family: var(--xz-font-serif);
  font-size: clamp(38px, 6vw, 76px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;
  margin: 0 0 var(--xz-sp-4);
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
  text-transform: none;
}
.xz-hero--fullscreen .xz-hero__subtitle,
.xz-hero--gradient .xz-hero__subtitle {
  color: var(--xz-paper);
  font-family: var(--xz-font-sans);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  max-width: 600px;
  margin: 0 auto var(--xz-sp-5);
  opacity: 0.95;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.xz-hero--fullscreen .xz-hero__ctas,
.xz-hero--gradient .xz-hero__ctas {
  display: flex;
  gap: var(--xz-sp-3);
  justify-content: center;
  flex-wrap: wrap;
}
.xz-hero__bg {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -2;
  transform: scale(1.02);
  transition: transform 1.2s ease-out;
}
.xz-hero:hover .xz-hero__bg { transform: scale(1.05); }

/* gradient 模式下叠加微噪点 / 装饰光晕，避免纯色"塑料感" */
.xz-hero--gradient .xz-hero__bg::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(245,239,230,0.18), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(42,31,23,0.20), transparent 55%);
  pointer-events: none;
}

/* gradient 模式加超大半透明 XZQTIVE watermark，让背景不空 */
.xz-hero--gradient::before {
  content: "XZQTIVE";
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--xz-font-serif);
  font-weight: 700;
  font-size: clamp(80px, 18vw, 280px);
  letter-spacing: 0.15em;
  color: rgba(245, 239, 230, 0.08);
  white-space: nowrap;
  pointer-events: none;
  z-index: -1;
  line-height: 1;
}

/* Scroll Hint 装饰 — 底部居中，浮动箭头 */
.xz-hero__scroll-hint {
  position: absolute;
  bottom: var(--xz-sp-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--xz-sp-2);
  color: var(--xz-white);
  opacity: 0.7;
  font-family: var(--xz-font-sans);
}
.xz-hero__scroll-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.xz-hero__scroll-arrow {
  font-size: 18px;
  line-height: 1;
  animation: xz-scroll-bounce 1.8s ease-in-out infinite;
}
@keyframes xz-scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(8px); opacity: 1; }
}
@media (max-width: 600px) {
  .xz-hero__scroll-hint { display: none; }
}
.xz-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,calc(var(--xz-hero-overlay) * 0.6)) 0%, rgba(0,0,0,var(--xz-hero-overlay)) 100%);
  z-index: -1;
}

.xz-hero__content {
  text-align: center;
  color: var(--xz-white);
  padding: var(--xz-sp-8) var(--xz-sp-4);
  max-width: 880px;
}
.xz-hero__eyebrow {
  color: var(--xz-white);
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
  margin-bottom: var(--xz-sp-2);
  opacity: 0.95;
}
.xz-hero__title {
  color: var(--xz-white);
  font-family: var(--xz-font-serif);
  font-size: clamp(40px, 7vw, 80px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.05em;
  margin: 0 0 var(--xz-sp-4);
  text-transform: none;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.xz-hero__subtitle {
  color: var(--xz-paper);
  font-family: var(--xz-font-sans);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
  max-width: 600px;
  margin: 0 auto var(--xz-sp-6);
  opacity: 0.95;
}
.xz-hero__ctas {
  display: flex;
  gap: var(--xz-sp-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============ 3. Featured Collections — 5 卡分类 ============ */
.xz-featured__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--xz-sp-3);
  margin-top: var(--xz-sp-6);
}
.xz-featured__card {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: var(--xz-white);
  background: var(--xz-bronze);
}
.xz-featured__image {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease-out;
}
.xz-featured__card:hover .xz-featured__image { transform: scale(1.06); }
.xz-featured__card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(42,31,23,0) 40%, rgba(42,31,23,0.7) 100%);
  pointer-events: none;
}
.xz-featured__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--xz-sp-5);
  z-index: 2;
  color: var(--xz-white);
  text-align: left;
}
.xz-featured__label {
  font-family: var(--xz-font-serif);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 0 var(--xz-sp-1);
  color: var(--xz-white);
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.xz-featured__desc {
  font-family: var(--xz-font-sans);
  font-size: 13px;
  font-weight: 400;
  margin: 0 0 var(--xz-sp-2);
  color: var(--xz-paper);
  opacity: 0.92;
}
.xz-featured__cta {
  font-family: var(--xz-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--xz-white);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--xz-white);
  display: inline-block;
  margin-top: var(--xz-sp-1);
}

/* 中屏 / 平板：3 列（1280 以下） */
@media (max-width: 1280px) {
  .xz-featured__grid { grid-template-columns: repeat(3, 1fr); }
}
/* 小屏：2 列 */
@media (max-width: 768px) {
  .xz-featured__grid { grid-template-columns: repeat(2, 1fr); }
  .xz-featured__caption { padding: var(--xz-sp-3); }
  .xz-featured__label { font-size: 18px !important; }
}
/* mobile: 1 列 */
@media (max-width: 480px) {
  .xz-featured__grid { grid-template-columns: 1fr; }
}

/* ============ 4. Product Grid — 商品宫格 ============ */
.xz-product-grid__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--xz-sp-3);
  margin-top: var(--xz-sp-6);
}
.xz-product-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--xz-white);
  border: 1px solid var(--xz-line);
  transition: box-shadow var(--xz-transition), transform var(--xz-transition);
}
.xz-product-card:hover {
  box-shadow: 0 6px 28px rgba(42,31,23,0.10);
  transform: translateY(-2px);
}
.xz-product-card__image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.xz-product-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease-out;
}
.xz-product-card:hover .xz-product-card__image img { transform: scale(1.04); }
.xz-product-card__meta {
  padding: var(--xz-sp-3);
  text-align: center;
}
.xz-product-card__name {
  font-family: var(--xz-font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--xz-ink);
  margin: 0 0 var(--xz-sp-1);
  letter-spacing: 0.03em;
  line-height: 1.35;
}
.xz-product-card__price {
  font-family: var(--xz-font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--xz-rust);
  letter-spacing: 0;
}

/* tablet: 3 列 / mobile: 2 列 */
@media (max-width: 1024px) {
  .xz-product-grid__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .xz-product-grid__grid { grid-template-columns: repeat(2, 1fr); gap: var(--xz-sp-2); }
  .xz-product-card__meta { padding: var(--xz-sp-2); }
}

/* ============ 5. Editorial Banner（可复用：image-left / image-right / image-full）============ */
.xz-editorial { overflow: hidden; }
.xz-editorial__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--xz-sp-7);
  align-items: center;
}
.xz-editorial--image-left .xz-editorial__image  { order: 1; }
.xz-editorial--image-left .xz-editorial__content { order: 2; }
.xz-editorial--image-right .xz-editorial__image  { order: 2; }
.xz-editorial--image-right .xz-editorial__content { order: 1; }

.xz-editorial__image img {
  width: 100%; height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.xz-editorial__content { padding: var(--xz-sp-5) 0; }
.xz-editorial__title {
  font-family: var(--xz-font-serif);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  color: var(--xz-ink);
  letter-spacing: 0.04em;
  margin: var(--xz-sp-2) 0 var(--xz-sp-2);
  line-height: 1.15;
}
.xz-editorial__subtitle {
  font-family: var(--xz-font-script);
  color: var(--xz-rust);
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  margin: 0 0 var(--xz-sp-3);
}
.xz-editorial__desc {
  font-family: var(--xz-font-sans);
  font-size: 15px;
  color: var(--xz-mute);
  line-height: 1.7;
  max-width: 480px;
  margin: 0 0 var(--xz-sp-4);
}

/* mobile: 1 列堆叠 + 图始终在上 */
@media (max-width: 900px) {
  .xz-editorial__grid {
    grid-template-columns: 1fr;
    gap: var(--xz-sp-4);
  }
  .xz-editorial--image-left .xz-editorial__image,
  .xz-editorial--image-right .xz-editorial__image  { order: 1; }
  .xz-editorial--image-left .xz-editorial__content,
  .xz-editorial--image-right .xz-editorial__content { order: 2; padding: 0; }
}

/* ============ 6. Brand Story ============ */
.xz-brand-story {
  background: var(--xz-paper);
  padding: var(--xz-sp-9) 0;
}
.xz-brand-story__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--xz-sp-8);
  align-items: center;
}
.xz-brand-story__image img {
  width: 100%; height: auto;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.xz-brand-story__title {
  font-family: var(--xz-font-serif);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 700;
  color: var(--xz-ink);
  letter-spacing: 0.04em;
  margin: var(--xz-sp-2) 0 0;
  line-height: 1.2;
}
.xz-divider--left {
  margin: var(--xz-sp-3) 0;
}
.xz-brand-story__para {
  font-family: var(--xz-font-sans);
  font-size: 16px;
  color: var(--xz-mute);
  line-height: 1.75;
  margin: 0 0 var(--xz-sp-3);
  max-width: 560px;
}

@media (max-width: 900px) {
  .xz-brand-story__grid {
    grid-template-columns: 1fr;
    gap: var(--xz-sp-5);
  }
}

/* ============ 7. Lookbook —— 4 portraits ============ */
.xz-lookbook__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--xz-sp-3);
  margin-top: var(--xz-sp-6);
}
.xz-lookbook__card {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--xz-white);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--xz-bronze);
}
.xz-lookbook__image {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease-out;
}
.xz-lookbook__card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(42,31,23,0) 50%, rgba(42,31,23,0.7) 100%);
  pointer-events: none;
}
.xz-lookbook__card:hover .xz-lookbook__image { transform: scale(1.06); }

.xz-lookbook__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--xz-sp-4);
  z-index: 2;
  text-align: center;
}
.xz-lookbook__title {
  font-family: var(--xz-font-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--xz-white);
  margin: 0 0 var(--xz-sp-1);
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.xz-lookbook__cta {
  font-family: var(--xz-font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--xz-white);
  border-bottom: 1px solid var(--xz-white);
  padding-bottom: 2px;
  display: inline-block;
}

@media (max-width: 900px) {
  .xz-lookbook__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .xz-lookbook__grid { grid-template-columns: 1fr; }
}

/* ============ 8. Brand Slogan —— 全宽文字收尾 ============ */
.xz-slogan {
  padding: var(--xz-sp-9) 0;
  text-align: center;
}
.xz-slogan__eyebrow {
  display: block;
  font-family: var(--xz-font-script);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  margin: 0 0 var(--xz-sp-1);
  opacity: 0.85;
}
.xz-slogan__headline {
  font-family: var(--xz-font-serif);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: var(--xz-sp-2) 0 var(--xz-sp-3);
  line-height: 1.25;
  text-transform: none;
}
.xz-slogan__subline {
  font-family: var(--xz-font-sans);
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 400;
  letter-spacing: 0.04em;
  opacity: 0.85;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ============ 9. Journal —— 博客 3 篇 ============ */
.xz-journal {
  background: var(--xz-paper);
}
.xz-journal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--xz-sp-5);
  margin-top: var(--xz-sp-6);
}
.xz-journal__card {
  background: transparent;
}
.xz-journal__image {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: var(--xz-sp-3);
}
.xz-journal__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease-out;
}
.xz-journal__card:hover .xz-journal__image img { transform: scale(1.04); }

.xz-journal__meta {
  display: flex;
  gap: var(--xz-sp-2);
  align-items: center;
  font-family: var(--xz-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--xz-mute);
  margin-bottom: var(--xz-sp-2);
}
.xz-journal__category {
  color: var(--xz-rust);
}
.xz-journal__date::before {
  content: "·";
  margin-right: var(--xz-sp-2);
  color: var(--xz-mute);
}
.xz-journal__title {
  font-family: var(--xz-font-serif);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  color: var(--xz-ink);
  margin: 0 0 var(--xz-sp-2);
  letter-spacing: 0.03em;
  line-height: 1.3;
}
.xz-journal__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--xz-transition);
}
.xz-journal__title a:hover {
  color: var(--xz-rust);
  text-decoration: none;
}
.xz-journal__excerpt {
  font-family: var(--xz-font-sans);
  font-size: 14px;
  color: var(--xz-mute);
  line-height: 1.65;
  margin: 0 0 var(--xz-sp-2);
}
.xz-journal__readmore {
  display: inline-block;
  font-family: var(--xz-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--xz-rust);
  text-decoration: none;
  border-bottom: 1px solid var(--xz-rust);
  padding-bottom: 2px;
  transition: all var(--xz-transition);
}
.xz-journal__readmore:hover {
  color: var(--xz-ink);
  border-color: var(--xz-ink);
}

@media (max-width: 900px) {
  .xz-journal__grid { grid-template-columns: 1fr; gap: var(--xz-sp-5); }
}

/* ============ 10. Newsletter —— 订阅段 ============ */
.xz-newsletter {
  padding: var(--xz-sp-8) 0;
}
.xz-newsletter__title {
  font-family: var(--xz-font-serif);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  color: var(--xz-ink);
  letter-spacing: 0.04em;
  margin: var(--xz-sp-2) 0 var(--xz-sp-2);
  text-transform: none;
}
.xz-newsletter__subtitle {
  font-family: var(--xz-font-sans);
  font-size: 16px;
  color: var(--xz-ink);
  max-width: 580px;
  margin: 0 auto var(--xz-sp-5);
  line-height: 1.6;
  opacity: 0.85;
}
.xz-newsletter__form {
  display: flex;
  max-width: 480px;
  margin: 0 auto;
  gap: 0;
  background: var(--xz-paper);
  border: 1px solid var(--xz-ink);
  border-radius: var(--xz-radius-sm);
  overflow: hidden;
}
.xz-newsletter__input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 14px 18px;
  font-family: var(--xz-font-sans);
  font-size: 14px;
  color: var(--xz-ink);
  outline: none;
  min-width: 0;
}
.xz-newsletter__input::placeholder {
  color: var(--xz-mute);
  opacity: 0.7;
}
.xz-newsletter__submit {
  border-radius: 0;
  letter-spacing: 0.16em;
  padding: 14px 24px;
  white-space: nowrap;
  flex-shrink: 0;
}
.xz-newsletter__note {
  font-family: var(--xz-font-sans);
  font-size: 12px;
  color: var(--xz-mute);
  margin: var(--xz-sp-3) 0 0;
  opacity: 0.8;
}

@media (max-width: 540px) {
  .xz-newsletter__form {
    flex-direction: column;
    border-radius: var(--xz-radius-sm);
  }
  .xz-newsletter__input {
    border-bottom: 1px solid var(--xz-ink);
  }
}

/* ============================================================
 * Featured Picks —— 主推商品板块（2 大卡片）
 * 紧跟 Hero 之后，宣传运营手选的当月主推。卡片整体可点击 → PDP。
 * ============================================================ */
.xz-featured-picks {
  padding: var(--xz-sp-8) 0;
  background: var(--xz-paper);
}
.xz-featured-picks__sub {
  margin-top: var(--xz-sp-3);
  color: var(--xz-mute);
  font-family: var(--xz-font-sans);
  font-size: 1rem;
  font-style: italic;
}
.xz-featured-picks__grid {
  margin-top: var(--xz-sp-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--xz-sp-5);
  /* 限宽居中：卡片收小留白变多，更秀气（不要满版大图） */
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.xz-featured-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--xz-white);
  transition: transform .3s ease, box-shadow .3s ease;
}
.xz-featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(42, 31, 23, 0.12);
}
.xz-featured-card__image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--xz-white);
}
.xz-featured-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 白底产品图不裁切，完整露出腰带 */
  display: block;
  padding: var(--xz-sp-3);
  box-sizing: border-box;
  transition: transform .8s ease;
}
.xz-featured-card:hover .xz-featured-card__image img {
  transform: scale(1.06);
}
.xz-featured-card__meta {
  padding: var(--xz-sp-4) var(--xz-sp-4);
  text-align: center;
}
.xz-featured-card__name {
  font-family: var(--xz-font-serif);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 var(--xz-sp-2);
  color: var(--xz-ink);
  /* 长标题截 2 行，卡片高度稳定 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.xz-featured-card__price {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--xz-rust);
  margin-bottom: var(--xz-sp-2);
}
.xz-featured-card__price .price { color: var(--xz-rust); }
.xz-featured-card__variations {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--xz-mute);
  letter-spacing: 0.04em;
  margin-bottom: var(--xz-sp-3);
}
.xz-featured-card__cta {
  display: inline-block;
  margin-top: var(--xz-sp-2);
  font-family: var(--xz-font-sans);
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--xz-ink);
  border-bottom: 1px solid var(--xz-ink);
  padding-bottom: 3px;
  transition: color .2s ease, border-color .2s ease;
}
.xz-featured-card:hover .xz-featured-card__cta {
  color: var(--xz-rust);
  border-color: var(--xz-rust);
}
@media (max-width: 768px) {
  .xz-featured-picks { padding: var(--xz-sp-6) 0; }
  .xz-featured-picks__grid {
    grid-template-columns: 1fr;
    gap: var(--xz-sp-4);
  }
}