:root {
  --font-display: "Cormorant Garamond", "Noto Serif SC", "Songti SC", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --paper: #f4efe6;
  --paper-soft: #fbf7f0;
  --ink: #27221e;
  --muted: #756c62;
  --line: #d8cfc2;
  --wine: #87323b;
  --copper: #b9854e;
  --radius: 6px;
  --a9-focus-ring-width: 2px;
  --a9-focus-ring-color: rgba(39, 34, 30, 0.42);
  /* Motion: one exponential ease-out shared by CSS transitions + the GSAP layer,
     for a unified, unhurried luxury feel (matches power3.out). */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
}

:where(.a9-editable-scope) {
  width: 100%;
}

:where(.a9-editable-scope:is(section, header, footer, div)),
:where(.a9-editable-scope > section),
:where(.a9-editable-scope > header),
:where(.a9-editable-scope > footer),
:where(.a9-editable-scope > div) {
  margin-top: var(--a9-section-spacing-top, 0);
  margin-bottom: var(--a9-section-spacing-bottom, 0);
  border-top: var(--a9-section-border-width, 0) solid var(--a9-section-border-color, transparent);
  border-bottom: var(--a9-section-border-width, 0) solid var(--a9-section-border-color, transparent);
  background-color: var(--a9-section-background-color, transparent);
  padding-left: var(--a9-section-inline-padding, 0);
  padding-right: var(--a9-section-inline-padding, 0);
  max-width: var(--a9-section-max-width, none);
  gap: var(--a9-section-content-gap, inherit);
}

.a9-editable-scope h1,
.a9-editable-scope h2,
.a9-editable-scope h3 {
  color: var(--a9-section-heading-color, inherit);
  font-family: var(--font-display);
  text-align: var(--a9-section-text-align, inherit);
}

.a9-editable-scope p,
.a9-editable-scope a,
.a9-editable-scope button,
.a9-editable-scope input,
.a9-editable-scope label,
.a9-editable-scope span {
  font-family: var(--font-body);
}

.a9-editable-scope h1,
.a9-editable-scope h2 {
  font-size: var(--a9-section-heading-size, inherit);
}

.a9-editable-scope p,
.a9-editable-scope label {
  color: var(--a9-section-text-color, inherit);
  font-size: var(--a9-section-text-size, inherit);
  text-align: var(--a9-section-text-align, inherit);
}

.a9-editable-scope .hero-actions {
  justify-content: var(--a9-section-action-align, inherit);
}

.a9-editable-scope img {
  /* No !important here: when a section sets "保持原样/auto", let each
     section's OWN designed aspect-ratio (defined lower in this file) take
     over instead of forcing the image's natural proportions — that's what
     kept differently-sized swapped images from shifting the layout.
     object-fit stays !important so every image always fills + crops. */
  aspect-ratio: var(--a9-media-aspect-ratio, auto);
  border-radius: var(--a9-media-radius, 0);
  object-fit: var(--a9-media-fit, cover) !important;
  object-position: var(--a9-media-position, center) !important;
}

/* A9: 板块「显示设备」(电脑+手机/仅电脑/仅手机)。装修编辑器预览也按宽度生效,
   被隐藏的板块仍可在左侧板块列表里选中编辑。 */
@media (max-width: 760px) {
  .a9-only-desktop { display: none !important; }
}
@media (min-width: 761px) {
  .a9-only-mobile { display: none !important; }
}

.a9-editable-block {
  width: var(--a9-block-width, auto);
  padding: var(--a9-block-padding, 0);
  background-color: var(--a9-block-background-color, transparent);
  border: var(--a9-block-border-width, 0) solid var(--a9-block-border-color, currentColor);
  border-color: var(--a9-block-border-color, currentColor);
  border-radius: var(--a9-block-radius, 0);
  color: var(--a9-block-text-color, inherit);
  opacity: var(--a9-block-opacity, 1);
  text-align: var(--a9-block-text-align, inherit);
}

.a9-editable-block h1,
.a9-editable-block h2,
.a9-editable-block h3,
.a9-editable-block strong {
  color: var(--a9-block-heading-color, inherit);
}

.a9-editable-block p,
.a9-editable-block span {
  color: var(--a9-block-text-color, inherit);
}

.a9-editable-block img,
img.a9-editable-block {
  /* No !important on aspect-ratio (see note above) so per-block/section
     designed ratios win over "auto" → swapped images keep the layout. */
  aspect-ratio: var(--a9-block-media-aspect-ratio, var(--a9-media-aspect-ratio, auto));
  border-radius: var(--a9-block-media-radius, var(--a9-media-radius, 0));
  object-fit: var(--a9-block-media-fit, var(--a9-media-fit, cover)) !important;
  object-position: var(--a9-block-media-position, var(--a9-media-position, center)) !important;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

/* A9: 修复前台按钮出现的非预期“粉色/彩色框”。
   该框来自浏览器/系统的点按高亮与鼠标点击后的焦点描边，
   这里统一关闭点按高亮，并且只在键盘 Tab 操作时显示主题焦点环。 */
a,
button,
input,
[role="button"],
.a9-action-button,
.a9-commerce-button {
  -webkit-tap-highlight-color: transparent;
}

.button:focus:not(:focus-visible),
.a9-action-button:focus:not(:focus-visible),
.a9-inner-button:focus:not(:focus-visible),
.quick-add:focus:not(:focus-visible),
.quick-shop-item button:focus:not(:focus-visible),
.outfit-add:focus:not(:focus-visible),
.complete-look-add:focus:not(:focus-visible),
.product-add:focus:not(:focus-visible),
.size-options button:focus:not(:focus-visible),
.quantity-control button:focus:not(:focus-visible),
.swatch:focus:not(:focus-visible) {
  outline: none;
}

img {
  display: block;
  max-width: 100%;
}

/* 购物车结账区(抽屉/页面/固定条)里平台注入的支付品牌小图标本是内联横排,
   被上面的全局 img{display:block} 掰成一行一个 → 还原为内联横排。 */
.cart-checkout img,
.cart-drawer__payment img,
.main-cart-footer__payment-info img,
.cart-fixed-checkout img {
  display: inline-block;
  vertical-align: middle;
}

.announcement {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 8px 18px;
  background: var(--a9-notice-bg, var(--ink));
  color: var(--a9-notice-text, var(--paper-soft));
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.announcement a {
  color: #e4bd8a;
  border-bottom: 1px solid currentColor;
}

.home-page .announcement {
  display: none;
}

/* 仅当后台开启“在首页显示公告栏”时，首页(含编辑器实时预览)才显示公告，
   否则首页页头上方不会出现公告留白；编辑器与前台表现一致。 */
.home-page .announcement.a9-show-home,
.a9-design-mode.home-page .announcement.a9-show-home {
  display: flex;
}

.announcement.a9-editable-scope {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-width: none !important;
}

.a9-design-mode :where([class*="review" i][style*="position: fixed" i],
[id*="review" i][style*="position: fixed" i],
[class*="judgeme" i][style*="position: fixed" i],
[class*="judge" i][style*="position: fixed" i],
[class*="loox" i][style*="position: fixed" i],
iframe[src*="review" i],
iframe[src*="judge" i],
iframe[src*="loox" i]) {
  display: none !important;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--a9-header-height, 72px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--a9-header-pad-x, 30px);
  border-bottom: 1px solid rgba(248, 239, 226, 0.28);
  background: color-mix(in srgb, var(--a9-header-bg-color, #27221e) calc(var(--a9-header-bg-opacity, 0.86) * 100%), transparent);
  color: #fff8ef;
  backdrop-filter: blur(16px);
  transform: translateY(0);
  transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out), min-height 220ms var(--ease-out), transform 220ms var(--ease-out);
}

.home-page .site-header {
  position: sticky;
  top: 0;
}

.a9-design-mode .site-header,
.a9-design-mode.home-page .site-header {
  position: relative;
  top: auto;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-width: none !important;
  transform: none !important;
}

.site-header.a9-editable-scope {
  min-height: var(--a9-header-height, 72px) !important;
  height: auto !important; /* 不再硬卡 72px:logo 调大时页头自动增高,不会被截/溢出 */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-width: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0;
  align-content: center;
  overflow: visible;
}

.a9-design-mode .site-header.a9-editable-scope {
  min-height: var(--a9-header-height, 72px) !important;
  height: auto !important;
  padding-left: clamp(18px, 3vw, 30px);
  padding-right: clamp(18px, 3vw, 30px);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0;
  align-content: center;
}

.site-header.a9-editable-scope.is-open {
  height: auto !important;
}

.a9-design-mode.home-page .site-header:not(.is-scrolled) {
  border-bottom-color: rgba(248, 239, 226, 0.28);
  background: rgba(39, 34, 30, 0.86);
  backdrop-filter: blur(16px);
}

.home-page .site-header:not(.is-scrolled) {
  border-bottom-color: rgba(248, 239, 226, 0.28);
  background: rgba(39, 34, 30, 0.86);
  backdrop-filter: blur(16px);
}

.site-header.nav-visible,
.site-header:focus-within,
.site-header.is-open {
  transform: translateY(0);
}

/* nav-hidden must come AFTER nav-visible: the JS keeps nav-visible on while
   scrolled, so this scroll-down hide has to win the (equal-specificity) tie. */
.site-header.nav-hidden {
  transform: translateY(-100%);
}

/* A9: 首页页头叠加在首图之上，做成沉浸式全屏首图，
   消除“页头与下方内容之间的大块留白/分离感”。
   仅首页生效；其它页面与装修编辑器内仍是普通页头，方便编辑。 */
.home-page .site-header.is-overlay {
  position: fixed;
  inset: 0 0 auto 0;
}

.home-page .site-header.is-overlay:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}

.home-page .site-header.is-overlay:not(.is-scrolled)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 17, 14, 0.55), rgba(20, 17, 14, 0));
}

.home-page .site-header.is-overlay.is-scrolled {
  background: color-mix(in srgb, var(--a9-header-bg-color, #27221e) calc(var(--a9-header-bg-opacity, 0.86) * 100%), transparent);
  backdrop-filter: blur(16px);
}

/* A9: 内页(非首页、非编辑器)页头也做成「悬浮自动隐藏」，与首页一致。
   页头脱离文档流(fixed)，由 a9-global-header 注入的 body 顶部留白占位；
   下滑隐藏/上滑显示沿用 .site-header.nav-hidden(translateY) 机制，无需额外 JS。 */
body:not(.home-page):not(.a9-design-mode) .site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
}

.a9-design-mode .site-header.is-overlay,
.a9-design-mode.home-page .site-header.is-overlay {
  position: relative !important;
  inset: auto !important;
  background: rgba(39, 34, 30, 0.86);
  backdrop-filter: blur(16px);
}

/* A9 页头布局「固定顶部(实色)」：随页面滚动始终吸顶，且保持占位、不遮挡内容 */
.site-header.is-solid {
  position: sticky;
  top: 0;
  background: rgba(39, 34, 30, 0.95);
  backdrop-filter: blur(16px);
}

.a9-design-mode .site-header.is-solid {
  position: relative !important;
}

/* A9: 页头导航「靠左」排布，把导航移到品牌名旁边，减少页头中间的大片留白 */
.site-header.is-nav-left {
  grid-template-columns: auto auto 1fr;
  column-gap: clamp(22px, 4vw, 60px);
}

.site-header.is-nav-left .primary-nav {
  justify-self: start;
}

.site-header.is-nav-left .header-actions {
  justify-self: end;
}

/* A9: 首图占满整行（与页头同宽），不被任何最大宽度限制 */
.wide-hero {
  max-width: none !important;
}

/* A9: 装修编辑器内把“用户评论 / 社媒”的堆叠卡片摊开成普通竖排，
   让新增的每张卡片都能看到并编辑（已发布前台仍是堆叠轮播效果）。 */
.a9-design-mode .stacked-review-deck:not(.a9-cards-list),
.a9-design-mode .stacked-social-deck:not(.a9-cards-list) {
  position: static !important;
  display: grid !important;
  gap: 12px !important;
  min-height: 0 !important;
  height: auto !important;
  contain: none !important;
}

.a9-design-mode .stacked-review-deck:not(.a9-cards-list) .review-snap-card,
.a9-design-mode .stacked-social-deck:not(.a9-cards-list) .story-chip {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* A9: 卡片展示方式=「长堆叠」时，评论/社媒把全部卡片层层叠叠地一路铺展下去
   （保留卡片堆叠的层次感，但不再只显示三张、也不是简单平铺）。 */
.stacked-review-deck.a9-cards-list,
.stacked-social-deck.a9-cards-list {
  position: static;
  display: block;
  min-height: 0;
  height: auto;
  contain: none;
  overflow: visible;
  padding: 8px 20px 34px 8px;
}

.stacked-review-deck.a9-cards-list .review-snap-card,
.stacked-social-deck.a9-cards-list .story-chip {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  margin-top: -18px;
  box-shadow: 0 -12px 32px rgba(39, 34, 30, 0.13);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}

.stacked-review-deck.a9-cards-list > :first-child,
.stacked-social-deck.a9-cards-list > :first-child {
  margin-top: 0 !important;
}

.stacked-review-deck.a9-cards-list .review-snap-card:nth-child(odd),
.stacked-social-deck.a9-cards-list .story-chip:nth-child(odd) {
  transform: rotate(-1.5deg) translateX(9px) !important;
}

.stacked-review-deck.a9-cards-list .review-snap-card:nth-child(even),
.stacked-social-deck.a9-cards-list .story-chip:nth-child(even) {
  transform: rotate(1.5deg) translateX(-9px) !important;
}

.stacked-review-deck.a9-cards-list .review-snap-card:hover,
.stacked-social-deck.a9-cards-list .story-chip:hover {
  z-index: 3;
  transform: rotate(0) translateX(0) translateY(-4px) !important;
  box-shadow: 0 18px 40px rgba(39, 34, 30, 0.2) !important;
}

/* 长堆叠「显示 N 行 + 板块内上下滑」:仅【电脑端】竖排时生效。手机端的排版交给 mobile_layout
   (横滑/堆叠/两列),若在手机端也套这套竖向滚动会和横滑打架 → 卡片错乱(已修)。
   max-height 由 product-reviews.js 按真实卡高量好;这里负责开滚动并【隐藏滚动条】(用户不想要,
   仍可滑)。装修编辑器(.a9-design-mode)内不限制,方便逐张编辑。 */
@media (min-width: 761px) {
  body:not(.a9-design-mode) .stacked-review-deck.a9-cards-list[data-a9-list-rows] {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none; /* 隐藏滚动条,仍可滑 */
    padding-left: 14px; /* 容下偶数卡 translateX(-9px) 的错位,避免被裁 */
  }
  body:not(.a9-design-mode) .stacked-review-deck.a9-cards-list[data-a9-list-rows]::-webkit-scrollbar {
    display: none;
  }
}

.brand {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0;
}

.brand-mark {
  justify-self: start;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--a9-brand-color, #fff8ef);
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.44);
}

/* 提高优先级，确保品牌名颜色与展示字体不被 .a9-editable-scope a 等继承规则覆盖
   （此前品牌名错误地用了正文无衬线字体，中文显示成粗黑体）。 */
.site-header .brand,
.site-header .brand-mark {
  color: var(--a9-brand-color, #fff8ef);
  font-family: var(--font-display);
  transform: translate(var(--a9-logo-offset-x, 0px), var(--a9-logo-offset-y, 0px));
}

/* A9: Logo 水平居中（仅完整导航的电脑端 ≥981px；与页头 980px 收起断点对齐，
   避免 761-980px 平板窗口里居中网格与汉堡菜单打架）——品牌居中、导航移到左侧、操作按钮在右侧 */
@media (min-width: 981px) {
  .site-header.is-logo-center {
    grid-template-columns: 1fr auto 1fr;
  }
  .site-header.is-logo-center .brand-mark {
    grid-column: 2;
    justify-self: center;
  }
  .site-header.is-logo-center .primary-nav {
    grid-column: 1;
    justify-self: start;
  }
  .site-header.is-logo-center .header-actions {
    grid-column: 3;
    justify-self: end;
  }
}

/* A9: 页头图片 Logo（上传后替代文字品牌名） */
.site-header .brand-mark.has-logo-image {
  display: inline-flex;
  align-items: center;
}
.site-header .brand-logo-img {
  display: block;
  height: var(--a9-logo-height, 32px);
  width: auto;
  max-width: clamp(120px, 70vw, 520px); /* 放宽宽度上限,宽形 logo 也能调大不被卡住 */
  object-fit: contain;
}

.primary-nav,
.header-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 13px;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 180ms var(--ease-out);
}

.primary-nav a,
.header-actions button {
  color: rgba(255, 248, 239, 0.82);
}

.header-actions {
  justify-content: flex-end;
}

.header-actions button,
.menu-toggle,
.wishlist {
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* A9: 页头语言/国家(币种)选择器 — 原生 <select> 提交 localization 表单,无弹层、手机也可靠。
   样式做成和旁边文字链接一致:透明底、继承颜色,右侧画一个小箭头。 */
.a9-locale { display: flex; align-items: center; gap: 14px; }
.a9-locale form { display: flex; align-items: center; gap: 14px; }
.a9-locale__item { position: relative; display: inline-flex; align-items: center; }
.a9-locale__item::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
  pointer-events: none;
}
.a9-locale__select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  letter-spacing: inherit;
  cursor: pointer;
  padding: 2px 16px 2px 0;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.a9-locale__select:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.a9-locale__select option { color: #27221e; background: #fffaf2; }
@media (max-width: 760px) {
  .a9-locale__select { max-width: 200px; font-size: 14px; }
  /* 汉堡菜单里:语言/币种独占一行,上下细线分隔,和导航/操作链接不挤在一起 */
  .site-header.is-open .header-actions { flex-wrap: wrap; }
  .header-actions .a9-locale {
    flex-basis: 100%;
    width: 100%;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 248, 239, 0.18);
    border-bottom: 1px solid rgba(255, 248, 239, 0.18);
  }
  .header-actions .a9-locale form { gap: 22px; }
}

.cart-button span {
  display: inline-grid;
  min-width: 21px;
  min-height: 21px;
  margin-left: 4px;
  place-items: center;
  border-radius: 999px;
  background: var(--paper-soft);
  color: var(--ink);
  font-size: 11px;
}

.menu-toggle {
  display: none;
}

.hero {
  position: relative;
  overflow: hidden;
}

.wide-hero {
  min-height: var(--a9-hero-height, 100svh);
  display: grid;
  align-items: end;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(20, 17, 14, 0.72), rgba(20, 17, 14, 0.26) 44%, rgba(20, 17, 14, 0.06)),
    linear-gradient(0deg, rgba(20, 17, 14, 0.5), transparent 42%);
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: var(--a9-media-fit, cover);
  object-position: var(--a9-hero-position, center 35%);
}

.hero-media {
  min-height: 620px;
  overflow: hidden;
}

.hero-overlay {
  width: var(--a9-hero-content-width, min(720px, calc(100% - 40px)));
  margin: 0 0 clamp(28px, 6vw, 64px) clamp(20px, 7vw, 92px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--a9-section-content-gap, clamp(10px, 1.4vw, 18px));
  color: #fff8ef;
}

/* 让“内容间距”后台选项统一控制 眉标/标题/描述/按钮 的间距，避免标题与内容游离 */
.hero-overlay > .eyebrow,
.hero-overlay > h1,
.hero-overlay > p,
.hero-overlay > .hero-actions {
  margin: 0;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--a9-accent-color, var(--wine));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-overlay .eyebrow,
.lookbook-copy .eyebrow,
.private-sale .eyebrow {
  color: #e7bb84;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

h1 {
  max-width: 760px;
  margin-bottom: 18px;
  font-size: clamp(44px, 6.4vw, 92px);
  line-height: 0.92;
}

h2 {
  font-size: clamp(32px, 4.2vw, 58px);
  line-height: 1;
}

.lookbook h2,
.product-story h3,
.behind-scenes h2,
.story h2,
.private-sale h2,
.editorial-commerce h2,
.newsletter h2 {
  font-size: var(--a9-section-heading-size, inherit);
}

.lookbook p,
.product-story p,
.behind-scenes .eyebrow,
.story p,
.private-sale p,
.editorial-commerce p,
.newsletter label {
  font-size: var(--a9-section-text-size, inherit);
}

.hero-overlay p:not(.eyebrow),
.lookbook-copy p,
.set-copy p,
.private-sale p,
.story-copy p,
.signature-copy p {
  max-width: 58ch;
  color: var(--a9-section-text-color, var(--muted));
  line-height: 1.75;
}

.hero-overlay p:not(.eyebrow) {
  color: var(--a9-section-text-color, rgba(255, 248, 239, 0.86));
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.a9-button-group-section {
  width: min(1180px, calc(100% - 40px));
  margin: clamp(28px, 5vw, 64px) auto;
}

.a9-button-group-inner {
  margin-top: 0;
}

.button,
.a9-inner-button {
  display: inline-flex;
  min-height: var(--a9-button-height, 46px);
  align-items: center;
  justify-content: center;
  border: var(--a9-button-border-width, 1px) solid var(--a9-button-border-color, currentColor);
  border-radius: var(--a9-button-radius, var(--radius));
  background: var(--a9-button-background-color, transparent);
  color: var(--a9-button-text-color, inherit);
  padding: var(--a9-button-padding, 0 20px);
  cursor: pointer;
  font-size: var(--a9-button-font-size, 13px);
  font-weight: var(--a9-button-font-weight, 700);
  letter-spacing: var(--a9-button-letter-spacing, 0.05em);
  transition: transform 180ms var(--ease-out), background 180ms var(--ease-out), color 180ms var(--ease-out);
}

.quick-add,
.quick-shop-item button,
.outfit-add,
.complete-look-add,
.product-add {
  min-height: var(--a9-button-height, 44px);
  border-width: var(--a9-button-border-width, 1px);
  border-style: solid;
  border-color: var(--a9-button-border-color, currentColor);
  border-radius: var(--a9-button-radius, var(--radius));
  background-color: var(--a9-button-background-color, transparent);
  color: var(--a9-button-text-color, inherit);
  padding: var(--a9-button-padding, 0 20px);
  font-size: var(--a9-button-font-size, inherit);
  font-weight: var(--a9-button-font-weight, 700);
}

.button:active {
  transform: translateY(1px);
}

.button-dark {
  border-width: var(--a9-button-border-width, 1px);
  border-color: var(--a9-button-border-color, var(--ink));
  background: var(--a9-button-background-color, var(--ink));
  color: var(--a9-button-text-color, #fff8ef);
}

.hero-overlay .button-dark {
  border-width: var(--a9-button-border-width, 1px);
  border-color: var(--a9-button-border-color, #fff8ef);
  background: var(--a9-button-background-color, #fff8ef);
  color: var(--a9-button-text-color, var(--ink));
}

.button-light {
  background: transparent;
  color: var(--a9-button-text-color, inherit);
}

.button-full {
  width: 100%;
}

/* A9: 关闭 CHICORY 基础主题给 .button 叠加的 ::after 描边光圈。
   该光圈使用配色方案的“按钮背景色”（scheme-1 为粉色 #fd7ad4），
   会在已发布前台的按钮外侧画出无法在编辑器中去除的粉色框。
   a9 按钮的描边改由自身 border（后台“按钮边框宽度/颜色”）控制。 */
.a9-action-button::after,
.a9-commerce-button::after,
.button-dark::after,
.button-light::after {
  display: none !important;
}

.button:hover,
.a9-inner-button:hover,
.quick-add:hover,
.quick-shop-item button:hover,
.outfit-add:hover,
.complete-look-add:hover,
.product-add:hover,
.article-product-card button:hover {
  border-color: var(--a9-button-hover-border-color, var(--a9-button-border-color, currentColor));
  background: var(--a9-button-hover-background-color, var(--a9-button-background-color, currentColor));
  color: var(--a9-button-hover-text-color, var(--a9-button-text-color, inherit));
}

.button:focus-visible,
.a9-inner-button:focus-visible,
.quick-add:focus-visible,
.quick-shop-item button:focus-visible,
.outfit-add:focus-visible,
.complete-look-add:focus-visible,
.product-add:focus-visible,
.article-product-card button:focus-visible {
  outline: var(--a9-focus-ring-width, 2px) solid var(--a9-focus-ring-color, rgba(39, 34, 30, 0.42));
  outline-offset: 2px;
}

.collection-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
}

.collection-strip a {
  min-height: 86px;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 34px);
}

.collection-strip a:last-child {
  border-right: 0;
}

.theme-capabilities {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--paper-soft);
}

.theme-capabilities article {
  min-height: 260px;
  padding: clamp(24px, 3.5vw, 46px);
  border-right: 1px solid var(--line);
}

.theme-capabilities article:last-child {
  border-right: 0;
}

.theme-capabilities span,
.journal-preview span {
  color: var(--a9-accent-color, var(--wine));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.theme-capabilities h2 {
  margin: 20px 0 12px;
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.05;
}

.theme-capabilities p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.65;
}

.duo-promo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: #eef2ef;
}

.promo-panel {
  position: relative;
  min-height: min(62dvh, 640px);
  overflow: hidden;
  color: #fff;
}

.promo-panel + .promo-panel {
  border-left: 1px solid rgba(39, 34, 30, 0.12);
}

.promo-panel img {
  width: 100%;
  height: 100%;
  object-fit: var(--a9-media-fit, cover);
  object-position: var(--a9-media-position, center 28%);
}

.promo-panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.48), transparent);
}

.promo-panel div {
  position: absolute;
  left: 50%;
  bottom: 34px;
  z-index: 1;
  width: min(520px, calc(100% - 34px));
  transform: translateX(-50%);
  text-align: center;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.52);
}

.promo-panel span {
  display: block;
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 700;
}

.promo-panel strong {
  display: block;
  font-size: clamp(48px, 6.4vw, 96px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.9;
  text-transform: uppercase;
}

.a9-section {
  width: min(1340px, calc(100% - 40px));
  margin: 0 auto;
  padding: calc(clamp(46px, 6vw, 90px) * var(--a9-density, 1)) 0;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  margin-bottom: clamp(16px, 2vw, 22px);
}

.section-heading h2 {
  max-width: 860px;
  margin-bottom: 0;
}

.section-heading a {
  border-bottom: 1px solid currentColor;
  color: var(--a9-accent-color, var(--wine));
  font-size: 13px;
  font-weight: 700;
}

.category-mosaic {
  padding-bottom: clamp(40px, 6vw, 86px);
}

.mosaic-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr;
  grid-template-rows: repeat(2, minmax(260px, 1fr));
  gap: 18px;
}

.mosaic-card {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink);
}

.mosaic-large {
  grid-row: span 2;
}

.mosaic-card img {
  width: 100%;
  height: 100%;
  object-fit: var(--a9-media-fit, cover);
  opacity: 0.88;
  transition: transform 600ms var(--ease-out);
}

.mosaic-card:hover img {
  transform: scale(1.04);
}

.mosaic-card span {
  position: absolute;
  left: 20px;
  bottom: 18px;
  color: #fff8ef;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 54px);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(var(--a9-grid-cols-d, 4), minmax(0, 1fr));
  gap: 18px;
}

/* A9 相关推荐商品:列数可调,且只影响本模块(用 id 提高优先级)。电脑端读 --a9-grid-cols-d;
   ≤980px(平板/手机)改读本模块自己的 --a9-grid-cols-m,覆盖全局把商品网格压成 2 列/1 列的硬编码,
   解决「相关推荐手机端没法设列数、适配差」。 */
#related-products .product-grid {
  grid-template-columns: repeat(var(--a9-grid-cols-d, 4), minmax(0, 1fr));
}
@media (max-width: 980px) {
  #related-products .product-grid {
    grid-template-columns: repeat(var(--a9-grid-cols-m, 2), minmax(0, 1fr));
  }
}

.product-card {
  position: relative;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  overflow: hidden;
}

.product-link {
  display: block;
}

.product-card img {
  width: 100%;
  aspect-ratio: 3 / 4.25;
  object-fit: var(--a9-media-fit, cover);
  transition: transform 520ms var(--ease-out);
}

.product-card:hover img {
  transform: scale(1.035);
}

.wishlist {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(251, 247, 240, 0.88);
  color: var(--ink);
  font-size: 12px;
}

.wishlist.is-active {
  background: var(--a9-accent-color, var(--wine));
  color: #fff8ef;
}

.product-meta {
  min-height: 88px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
}

.product-meta > div {
  min-width: 0;
}

.product-meta h3 {
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-meta p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-meta strong {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Quick-add: a clear, solid, rounded CTA inset from the card edges
   (was a thin barely-visible top-border strip). Respects the section's
   button settings, but defaults to solid ink so it reads as a real
   "add to cart" button. */
.quick-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: var(--a9-button-height, 48px);
  border: var(--a9-button-border-width, 1px) solid var(--a9-button-background-color, var(--ink));
  border-radius: var(--a9-button-radius, 8px);
  background: var(--a9-button-background-color, var(--ink));
  color: var(--a9-button-text-color, #fff8ef);
  font-weight: var(--a9-button-font-weight, 600);
  font-size: var(--a9-button-font-size, 13px);
  letter-spacing: var(--a9-button-letter-spacing, 0.04em);
  cursor: pointer;
}

.quick-add:hover {
  background: var(--a9-button-hover-background-color, var(--a9-accent-color, var(--wine)));
  border-color: var(--a9-button-hover-background-color, var(--a9-accent-color, var(--wine)));
  color: var(--a9-button-hover-text-color, #fff8ef);
}

.mobile-quick-shop {
  display: none;
  width: min(100%, 1340px);
  min-height: var(--a9-quick-section-height, auto);
  margin: 0 auto;
  padding: var(--a9-quick-padding, 0 20px 18px);
}

.quick-shop-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--a9-quick-card-width, minmax(240px, 78%));
  gap: var(--a9-quick-gap, 12px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
}

.quick-shop-item {
  display: grid;
  grid-template-columns: var(--a9-quick-image-width, 82px) 1fr;
  gap: 12px;
  align-items: center;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  background: var(--paper-soft);
}

.quick-shop-item img {
  width: var(--a9-quick-image-width, 82px);
  height: var(--a9-quick-image-height, 104px);
  object-fit: var(--a9-media-fit, cover);
}

.quick-shop-item div {
  display: grid;
  gap: 6px;
  padding: 10px 10px 10px 0;
}

.quick-shop-item h2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.quick-shop-item p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.quick-shop-item button {
  width: fit-content;
  min-height: 32px;
  border: var(--a9-button-border-width, 1px) solid var(--a9-button-border-color, var(--ink));
  border-radius: var(--radius);
  padding: 0 12px;
  background: var(--a9-button-background-color, var(--ink));
  color: var(--a9-button-text-color, #fff8ef);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.event-showcase {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.7fr);
  gap: clamp(24px, 4vw, 58px);
  align-items: start;
  width: min(1520px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(58px, 8vw, 104px) 0;
}

.event-image {
  min-height: 620px;
  overflow: hidden;
}

.event-image img {
  width: 100%;
  height: 100%;
  object-fit: var(--a9-media-fit, cover);
}

.event-content h2 {
  margin-bottom: 16px;
  font-size: clamp(28px, 3vw, 42px);
}

.event-content > a {
  display: inline-block;
  margin: 6px 0 22px;
  border-bottom: 1px solid currentColor;
  color: var(--muted);
}

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

.event-products article img {
  width: 100%;
  aspect-ratio: 3 / 4.25;
  object-fit: var(--a9-media-fit, cover);
  background: var(--paper-soft);
}

.event-products h3 {
  min-height: 46px;
  margin: 14px 0 10px;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.25;
}

.event-products strong {
  color: var(--a9-block-accent-color, var(--a9-accent-color, #d9564b));
}

/* ============================================================
   Editable hover animation for image blocks (CSS only, no JS).
   Each block exposes a "鼠标悬停动效" select that writes
   data-a9-anim = none | lift | zoom | tilt on its root element.
   "可更换" = pick an effect; "可开关" = choose 无动效(none).
   ============================================================ */
[data-a9-anim="lift"],
[data-a9-anim="zoom"],
[data-a9-anim="tilt"] {
  transition: transform 0.5s var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
  will-change: transform;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  [data-a9-anim="lift"]:hover {
    transform: translateY(-8px) scale(1.015);
  }
  [data-a9-anim="zoom"]:hover {
    transform: scale(1.045);
  }
  [data-a9-anim="tilt"]:hover {
    transform: translateY(-5px) rotate(1.2deg) scale(1.02);
  }
}

.lookbook {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  background: #2b2621;
  color: #f8efe2;
}

.lookbook img {
  width: 100%;
  height: 760px;
  object-fit: var(--a9-media-fit, cover);
}

.lookbook-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 6vw, 90px);
}

.lookbook-copy p {
  color: var(--a9-section-text-color, #d0c3b3);
}

.lookbook-copy .button-dark {
  width: fit-content;
  border-color: var(--a9-button-border-color, #f8efe2);
  background: var(--a9-button-background-color, #f8efe2);
  color: var(--a9-button-text-color, #2b2621);
}

.behind-scenes {
  position: relative;
  min-height: 560px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 0;
  color: #fff8ef;
  text-align: center;
}

.behind-scenes::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.44);
}

.behind-scenes img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--a9-media-fit, cover);
  object-position: var(--a9-media-position, center 38%);
}

.behind-scenes div {
  position: relative;
  z-index: 1;
  padding: 0 20px;
}

.behind-scenes h2 {
  margin-bottom: 24px;
  font-style: italic;
  line-height: 1.12;
}

.behind-scenes .hero-actions {
  justify-content: center;
}

.behind-scenes .button-dark {
  border-color: var(--a9-button-border-color, var(--ink));
  background: var(--a9-button-background-color, var(--ink));
  color: var(--a9-button-text-color, #fff8ef);
}

.behind-scenes .button-light {
  background: #fff8ef;
  color: var(--ink);
}

.signature-collection {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(28px, 6vw, 84px);
  align-items: center;
}

.signature-gallery {
  display: grid;
  grid-template-columns: 0.75fr 1fr 0.75fr;
  gap: 14px;
  align-items: center;
}

.signature-gallery img {
  width: 100%;
  object-fit: var(--a9-media-fit, cover);
  border-radius: var(--radius);
}

.signature-gallery img:nth-child(1),
.signature-gallery img:nth-child(3) {
  aspect-ratio: 3 / 4.2;
}

.signature-gallery img:nth-child(2) {
  aspect-ratio: 3 / 5;
}

.product-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 720px;
  background: #fbfaf6;
}

.story-model {
  height: 100%;
  min-height: 720px;
  overflow: hidden;
}

.story-model img {
  width: 100%;
  height: 100%;
  object-fit: var(--a9-media-fit, cover);
  object-position: var(--a9-media-position, center 30%);
}

.story-product-card {
  position: relative;
  width: min(560px, calc(100% - 44px));
  margin: 0 auto;
}

.story-product-card .sale-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 1;
  padding: 8px 12px;
  background: var(--a9-badge-background-color, #f05a22);
  color: var(--a9-badge-text-color, #fff);
  font-size: 13px;
}

.story-product-card img {
  width: 100%;
  aspect-ratio: 4 / 5.2;
  object-fit: var(--a9-media-fit, cover);
  background: var(--paper);
}

/* Linked image wrappers stay block so the image fills as before */
.story-product-card__media,
.quick-shop-item__media,
.a9-outfit-line__media {
  display: block;
}

.story-product-card h3 {
  margin: 18px 0 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--muted);
}

.story-product-card p strong {
  color: var(--a9-block-accent-color, var(--a9-accent-color, #d9564b));
  font-size: 20px;
}

.story-product-card s {
  margin-left: 8px;
  color: #8b857f;
}

.curated-set {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 6vw, 88px);
  align-items: center;
}

.set-list {
  border-top: 1px solid var(--line);
}

.set-list div {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 18px;
  align-items: center;
  min-height: 82px;
  border-bottom: 1px solid var(--line);
}

.set-list span,
.set-list em {
  color: var(--muted);
  font-style: normal;
}

.set-list .a9-commerce-button {
  width: 100%;
  margin-top: 18px;
}

.outfit-builder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 6vw, 74px);
  width: min(1520px, calc(100% - 40px));
  margin: clamp(66px, 9vw, 126px) auto;
  align-items: center;
}

.outfit-image img {
  width: 100%;
  aspect-ratio: 1 / 1.04;
  object-fit: var(--a9-media-fit, cover);
  object-position: var(--a9-media-position, center 25%);
}

.outfit-panel > p {
  margin-bottom: 28px;
  text-align: center;
  color: var(--muted);
}

.outfit-lines {
  display: grid;
  gap: 26px;
}

.outfit-lines article {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 22px;
  align-items: center;
}

.outfit-lines img {
  width: 92px;
  height: 92px;
  object-fit: var(--a9-media-fit, cover);
  background: var(--paper-soft);
}

.outfit-lines span {
  color: var(--muted);
}

.outfit-lines strong {
  color: var(--a9-block-accent-color, var(--a9-accent-color, #d9564b));
  white-space: nowrap;
}

.outfit-add {
  width: 100%;
  min-height: 54px;
  margin-top: 34px;
  border: var(--a9-button-border-width, 1px) solid var(--a9-button-border-color, var(--ink));
  border-radius: var(--radius);
  background: var(--a9-button-background-color, var(--ink));
  color: var(--a9-button-text-color, #fff8ef);
  cursor: pointer;
  font-weight: 700;
}

.outfit-lines .a9-commerce-button {
  width: 100%;
  margin-top: 8px;
}

.private-sale {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr);
  gap: 28px;
  align-items: center;
  padding: clamp(46px, 7vw, 76px) clamp(20px, 6vw, 72px);
  background: var(--wine);
  color: #fff8ef;
}

.private-sale p {
  color: var(--a9-section-text-color, #f1d1b0);
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.countdown span {
  min-height: 126px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 248, 239, 0.32);
  border-radius: var(--radius);
  color: #f1d1b0;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.1em;
}

.countdown b {
  display: block;
  color: #fff8ef;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 400;
  letter-spacing: 0;
}

.story {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(30px, 7vw, 96px);
  align-items: center;
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) 0;
}

.story-images {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 16px;
  align-items: end;
}

.story-images img {
  width: 100%;
  object-fit: var(--a9-media-fit, cover);
  border-radius: var(--radius);
}

.story-images img:first-child {
  aspect-ratio: 3 / 4;
}

.story-images img:last-child {
  aspect-ratio: 3 / 4.8;
}

.atelier-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.atelier-services div {
  min-height: 260px;
  padding: clamp(26px, 4vw, 54px);
  border-right: 1px solid var(--line);
}

.atelier-services div:last-child {
  border-right: 0;
}

.atelier-services span {
  color: var(--a9-accent-color, var(--wine));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.atelier-services h3 {
  margin: 26px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 400;
}

.atelier-services p {
  color: var(--muted);
  line-height: 1.7;
}

.social-proof {
  position: relative;
  width: min(1340px, calc(100% - 40px));
  margin: clamp(70px, 9vw, 126px) auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  gap: clamp(28px, 5vw, 74px);
  align-items: stretch;
}

.mobile-reviews {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.proof-quote {
  position: relative;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 5vw, 70px);
  background: var(--a9-proof-bg, var(--ink));
  color: var(--a9-proof-text, #fff8ef);
  overflow: hidden;
}

.proof-quote__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.proof-quote__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--a9-proof-image-opacity, 0.4);
}

.proof-quote > :not(.proof-quote__media) {
  position: relative;
  z-index: 1;
}

.proof-quote h2 {
  max-width: 760px;
  margin: 28px 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 72px);
  font-weight: 400;
  line-height: 1.02;
}

.proof-quote p:last-child {
  max-width: 48ch;
  color: rgba(255, 248, 239, 0.72);
  line-height: 1.7;
}

/* 大卡片底部的「评分概览」(可选,默认关) —— 与商品详情页评分概览同款,放在深色大卡上 */
.proof-quote__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 248, 239, 0.22);
  color: var(--a9-proof-text, #fff8ef);
}
.proof-quote__score {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
}
.proof-quote__stars {
  color: var(--a9-accent-color, #b9854e);
  letter-spacing: 2px;
}
.proof-quote__sumlabel {
  font-size: 13px;
  opacity: 0.8;
}

.testimonial-grid {
  display: grid;
  gap: 14px;
}

.review-snap-track {
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 34%);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  padding-bottom: 10px;
}

.stacked-review-deck {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
  padding: 0;
}

.testimonial-card {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  background: var(--paper-soft);
}

.review-snap-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  scroll-snap-align: start;
}

/* Optional review photo (buyer show). A9: 比例不再锁死 4/3。比例交给 img 上的
   --a9-block-media-aspect-ratio（编辑器「单项图片比例」可选），默认 auto 顺应原图，
   因此竖图/方图/横图都能完整显示，不再被强制裁成横屏。 */
.review-snap-card__media {
  margin-bottom: 16px;
  border-radius: var(--a9-block-media-radius, 4px);
  overflow: hidden;
}

.review-snap-card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--a9-block-media-aspect-ratio, auto);
  object-fit: var(--a9-block-media-fit, cover);
  display: block;
}

/* A9: 客户名字 + 尺码说明 → 卡片右下角 */
.review-snap-card__footer {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 4px;
}
.review-snap-card__footer .review-snap-card__size {
  margin-top: 0;
  border-bottom: 0;
  color: var(--a9-pr-text, var(--muted));
  opacity: 0.9;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.review-snap-card__footer .review-snap-card__name {
  margin-top: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 14px;
  color: var(--a9-block-accent-color, var(--a9-pr-accent, var(--a9-accent-color, #87323b)));
}

/* ============================================================
   A9 规格折叠（尺码/款式）—— 在原生 flatten 变体选择器外的呈现层。
   关闭(off)时本组样式不生效；原生选规格逻辑不受影响。
   ============================================================ */
/* 已选摘要：默认隐藏，有值时由 JS 填入「已选 X」 */
.variant-picker__chosen {
  font-size: 12px;
  color: var(--muted);
  margin-left: 8px;
  white-space: nowrap;
}
.variant-picker__chosen:empty { display: none; }

/* —— 手风琴折叠 —— */
.a9-vc--accordion .variant-picker__group { border-top: 1px solid var(--line); }
.a9-vc--accordion .variant-picker__group:first-of-type { border-top: 0; }
.a9-vc--accordion .variant-picker__group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  padding: 14px 6px;
  border-radius: var(--a9-vc-radius, 10px);
  transition: background 0.18s var(--ease-out, ease);
}
.a9-vc--accordion .variant-picker__group-head:hover { background: rgba(20, 17, 14, 0.035); }
.a9-vc--accordion .variant-picker__group-head::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease-out, ease);
  opacity: 0.5;
}
.a9-vc--accordion .variant-picker__group:not(.a9-vc-collapsed) .variant-picker__group-head::after {
  transform: rotate(-135deg);
}
.a9-vc--accordion .variant-picker__group.a9-vc-collapsed .variant-picker__options {
  display: none;
}
.a9-vc--accordion .variant-picker__options { padding: 4px 6px 14px; }

/* —— 点击展开（药丸按钮）—— */
.a9-vc-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid var(--a9-input-border-color, var(--line));
  border-radius: var(--a9-vc-radius, 999px);
  background: var(--a9-input-background-color, #fffaf2);
  cursor: pointer;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: border-color 0.18s var(--ease-out, ease), background 0.18s var(--ease-out, ease);
}
.a9-vc-expand-btn::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
  transition: transform 0.2s var(--ease-out, ease);
}
.a9-vc-expand-btn.is-open::after { transform: rotate(-135deg); }
.a9-vc-expand-btn:hover { border-color: var(--ink); }
.a9-vc--expand.a9-vc-hidden .variant-picker__group {
  display: none;
}

/* —— 抽屉式（屏幕居中弹窗，圆角 + 留白更足）—— */
.a9-vc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 14px 16px;
  border: 1px solid var(--a9-input-border-color, var(--line));
  background: var(--a9-input-background-color, #fffaf2);
  color: var(--ink);
  border-radius: var(--a9-vc-radius, 10px);
  font-size: 14px;
  transition: border-color 0.18s var(--ease-out, ease);
}
.a9-vc-trigger:hover { border-color: var(--ink); }
.a9-vc-trigger__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.35;
}
.a9-vc-trigger__line { display: block; }
.a9-vc-trigger__arrow {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.55;
}
/* 手机端「通栏填满」触发样式（淘宝风）：左右拉满到屏幕边、去掉卡片边框圆角,
   只留上下细分隔线;内边距补回拉出的量,让文字与页面其余内容左对齐。
   负 margin 公式与原生 media-gallery 的全出血一致;在快速购买弹窗里变量为 0,自动退化为普通整行。 */
@media (max-width: 760px) {
  .a9-vc-trigger--fill {
    width: calc(100% + var(--detail-padding-inline-start, 0px) + var(--detail-padding-inline-end, 0px) + 2 * var(--page-padding, 0px)) !important;
    margin-inline: calc(-1 * (var(--detail-padding-inline-start, 0px) + var(--page-padding, 0px))) calc(-1 * (var(--detail-padding-inline-end, 0px) + var(--page-padding, 0px)));
    padding: 15px max(16px, calc(var(--detail-padding-inline-end, 0px) + var(--page-padding, 0px))) 15px max(16px, calc(var(--detail-padding-inline-start, 0px) + var(--page-padding, 0px)));
    border-inline: 0;
    border-radius: 0;
    border-top: 1px solid var(--a9-input-border-color, var(--line));
    border-bottom: 1px solid var(--a9-input-border-color, var(--line));
  }
}
.a9-vc--drawer .a9-vc-sheet,
.a9-vc--drawer .a9-vc-overlay {
  display: none;
}
.a9-vc--drawer.a9-vc-open .a9-vc-overlay {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1099;
  background: rgba(20, 17, 14, 0.55);
  backdrop-filter: blur(3px);
}
.a9-vc--drawer.a9-vc-open .a9-vc-sheet {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 36px));
  max-height: 84vh;
  overflow-y: auto;
  overflow-x: hidden; /* 不让内容横向溢出 → 去掉底部那条横向滚动条 */
  scrollbar-width: thin; /* 右侧竖向滚动条收细,观感更干净 */
  z-index: 1100;
  padding: 26px 26px calc(26px + env(safe-area-inset-bottom, 0px));
  background: var(--paper-soft, #fbf7f0);
  border-radius: var(--a9-vc-radius, 18px);
  box-shadow: 0 24px 70px rgba(20, 17, 14, 0.28);
  animation: a9VcModalIn 220ms var(--ease-out, ease);
}
.a9-vc-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.a9-vc-sheet__title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
}
.a9-vc-sheet__done {
  flex: none;
  border: 0;
  cursor: pointer;
  padding: 9px 22px;
  border-radius: var(--a9-vc-radius, 6px);
  background: var(--a9-button-background-color, var(--ink));
  color: var(--a9-button-text-color, #fff8ef);
  font-size: 13px;
  font-weight: var(--a9-button-font-weight, 700);
  letter-spacing: var(--a9-button-letter-spacing, 0.05em);
}
.a9-vc-sheet .variant-picker__group {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.a9-vc-sheet .variant-picker__group:last-of-type { border-bottom: 0; }
/* 组间留白更足(颜色组 ↔ 尺码组不再挤在一起) */
.a9-vc-sheet .variant-picker__group { padding: 18px 0; }

/* 抽屉内统一布局:标题永远在按钮上方;弹窗里不再显示「已选」(详情页触发条已显示选择)。 */
.a9-vc-sheet .product-detail__row { display: block; }
.a9-vc-sheet .variant-picker__group-head { margin-bottom: 12px; }
.a9-vc--drawer .variant-picker__chosen { display: none; }

/* 默认:颜色/款式(色块 / 图片)= 紧凑换行排列,不再稀疏拉开 →「间隔太大」修复。
   同时把原生「色块滑块」摊平成换行、隐藏左右滑动箭头 → 去掉横向滚动条。 */
.a9-vc-sheet .variant-picker__options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: stretch;
  overflow: visible !important;
}
.a9-vc-sheet .variant-picker__options--slider { flex-wrap: wrap !important; }
.a9-vc-sheet .variant-picker__swatch-carousel-button { display: none !important; }

/* 只有「文字规格(尺码)」才用等宽两列网格、同行等高、大小统一 */
.a9-vc-sheet .variant-picker__options:has(.variant-picker__button--text) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
}
.a9-vc-sheet .variant-picker__options:has(.variant-picker__button--text) .variant-picker__option {
  display: flex !important;
  flex: initial !important;
  width: auto !important;
  max-width: none !important;
}
.a9-vc-sheet .variant-picker__button--text {
  flex: 1;
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.25;
  font-size: 13.5px;
}

/* 色块 / 图片按钮:够大看得清(64px 方形),图片铺满裁切(去掉「一大圈黑边」的留白),
   选中态用柔和的强调色细环代替生硬黑框。 */
.a9-vc-sheet .variant-picker__button--swatch,
.a9-vc-sheet .variant-picker__button--image {
  width: 64px !important;
  height: 64px !important;
  min-height: 0 !important;
  padding: 3px !important;
  border-radius: var(--a9-vc-radius, 10px);
  background: var(--paper-soft, #fbf7f0) !important;
}
.a9-vc-sheet .variant-picker__button--image .variant-picker__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--a9-vc-radius, 10px) - 3px);
}
.a9-vc-sheet .variant-picker__button--swatch .variant-picker__swatch-inner {
  border-radius: calc(var(--a9-vc-radius, 10px) - 3px);
}
/* 压掉色块原生的黑色 ::after 描边,改用下面的柔环 */
.a9-vc-sheet .variant-picker__button--swatch::after { box-shadow: none !important; }
.a9-vc-sheet .variant-picker__option:has(input:checked) .variant-picker__button--image,
.a9-vc-sheet .variant-picker__option:has(input:checked) .variant-picker__button--swatch {
  outline: 2px solid var(--a9-accent-color, #87323b);
  outline-offset: 2px;
}

/* ============================================================
   自动填充变体图片(可选,变体在后台设了主图才有):把「颜色/款式」按钮自动配上
   对应款式的商品图。脚本 variant-auto-image.js 注入 <img.a9-vc-autoimg__img>。
   尺码等「同一张图」的规格会被脚本跳过,只给真正能用图区分的规格(颜色/款式)加图。
   ============================================================ */
.variant-picker__button.a9-vc-autoimg {
  flex-direction: column;
  gap: 6px;
}
.a9-vc-autoimg__img {
  display: block;
  width: 100%;
  object-fit: cover;
}
/* 文字按钮加图:图在上、名字在下,像迷你款式卡 */
.variant-picker__button--text.a9-vc-autoimg .a9-vc-autoimg__img {
  aspect-ratio: 1 / 1;
  max-width: 100%;
  border-radius: calc(var(--a9-vc-radius, 8px) - 2px);
}
/* 色块按钮加图:铺满盖住棋盘格占位 */
.variant-picker__button--swatch.a9-vc-autoimg .variant-picker__swatch-inner .a9-vc-autoimg__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

body.a9-vc-lock {
  overflow: hidden;
}
@keyframes a9VcModalIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ============================================================
   Product-page reviews section (a9-product-10-reviews):
   rating summary + curated cards + customer "write a review"
   form (submits via Shopline contact form to merchant inbox).
   ============================================================ */
.a9-product-reviews {
  position: relative;
  background: var(--a9-pr-bg, transparent);
  padding: var(--a9-pr-spacing-top, 72px) 24px var(--a9-pr-spacing-bottom, 72px);
}

/* A9 评价条数徽章（右上角，可编辑文案；商品页 + 首页共用样式） */
.a9-product-reviews__total,
.social-proof__count {
  position: absolute;
  top: clamp(16px, 3vw, 30px);
  right: clamp(16px, 4vw, 34px);
  z-index: 3;
  color: var(--a9-pr-text, var(--muted));
  font-size: 13px;
  letter-spacing: 0.06em;
}
.a9-product-reviews__total[hidden],
.social-proof__count[hidden] { display: none; }

/* A9 评价自动轮播（淡入 / 横滑）—— 桌面端单卡居中、自动切换；仅 ≥761px 生效，
   手机端走「手机端布局」(swipe/stack/grid2)，不套轮播，避免卡片堆叠/拉伸变形。 */
/* A9 评价自动轮播 —— 电脑端 + 手机端都生效(轮播开启时本 section 不再套手机端布局)。 */
/* 淡入：单卡居中交叉淡入 */
/* 轮播样式不再绑定 .a9-product-reviews__grid:.a9-rc--* 只由轮播脚本动态加在轮播容器上,
   因此通用化后可同时驱动「商品详情评价网格」与「首页评价轨道(.review-snap-track)」。 */
/* 必须用「宿主类.a9-rc--*」限定(0,2,0),否则会输给后面定义的基础规则
   .a9-product-reviews__grid{display:grid}(2381 行)/ .review-snap-track —— 那正是
   v1.61 把选择器从 .a9-product-reviews__grid.a9-rc--* 泛化成 .a9-rc--* 后,商品页轮播
   在手机端塌成「一列下排」的根因。 */
.a9-product-reviews__grid.a9-rc--fade,
.review-snap-track.a9-rc--fade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 680px;
  margin-inline: auto;
  gap: 0;
}
.a9-rc--fade > * {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out, ease);
  pointer-events: none;
}
.a9-rc--fade > .is-active {
  opacity: 1;
  pointer-events: auto;
}
/* 横滑：多列连续左移；每屏列数由 --a9-rc-cols 控制，整排靠 --a9-rc-x 平移 */
.a9-product-reviews__grid.a9-rc--slide,
.review-snap-track.a9-rc--slide {
  display: flex;
  overflow: hidden;
  gap: 18px;
}
.a9-rc--slide > * {
  flex: 0 0 calc((100% - 18px * (var(--a9-rc-cols, 3) - 1)) / var(--a9-rc-cols, 3));
  min-width: 0;
  transform: translateX(var(--a9-rc-x, 0px));
  transition: transform 0.6s var(--ease-out, ease);
}
.a9-rc--slide.a9-rc-noanim > * {
  transition: none;
}
.a9-rc__ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
}
/* 手机端：横滑每屏 1 列(多列在手机上太挤)；淡入本就单卡 */
@media (max-width: 760px) {
  .a9-rc--slide > * { flex-basis: 100%; }
}

/* ============================================================
   A9 带图沉浸式评价卡（样式2）：买家秀照片铺满当背景 + 暗色渐变 + 文字压在上面。
   由评价 section「评价卡风格=带图沉浸式」加 .a9-cards-immersive 开启；纯 CSS 叠加，
   不改卡片结构。盒子比例由 --a9-card-aspect 控制(竖屏 3:4 默认，适配服装)。
   ============================================================ */
.a9-cards-immersive .review-snap-card {
  position: relative;
  overflow: hidden;
  min-height: 0;
  aspect-ratio: var(--a9-card-aspect, 3 / 4);
  padding: clamp(20px, 3vw, 30px);
  border: 0;
  border-radius: var(--a9-block-radius, 8px);
  color: #fff;
  justify-content: flex-end;
  background: var(--ink, #27221e);
}
.a9-cards-immersive .review-snap-card__media {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 0;
  z-index: 0;
}
.a9-cards-immersive .review-snap-card__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
.a9-cards-immersive .review-snap-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20, 17, 14, 0.04) 0%, rgba(20, 17, 14, 0.32) 45%, rgba(20, 17, 14, 0.82) 100%);
}
.a9-cards-immersive .review-snap-card > *:not(.review-snap-card__media) {
  position: relative;
  z-index: 2;
}
.a9-cards-immersive .review-snap-card span,
.a9-cards-immersive .review-snap-card h3,
.a9-cards-immersive .review-snap-card p,
.a9-cards-immersive .review-snap-card small,
.a9-cards-immersive .review-snap-card .review-snap-card__name,
.a9-cards-immersive .review-snap-card .review-snap-card__size {
  color: #fff;
}
.a9-cards-immersive .review-snap-card .review-snap-card__footer { border: 0; }

/* ============================================================
   A9 评价精选小卡（样式3）：紧凑的星级+短评+买家名,独立板块,适合放购物车按钮附近。
   ============================================================ */
.a9-review-snippets {
  padding: var(--a9-rs-pad-top, 24px) 24px var(--a9-rs-pad-bottom, 24px);
  font-family: var(--font-body);
}
.a9-review-snippets__inner { max-width: var(--a9-rs-max, 1180px); margin: 0 auto; }
.a9-review-snippets__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--a9-rs-heading, var(--ink));
  margin: 0 0 18px;
  text-align: center;
}
.a9-review-snippets__list { display: grid; gap: 12px; }
/* row / carousel = 行内胶囊条(⭐ "短评" — 名字),像截图那条;column = 竖排块状卡片 */
.a9-review-snippets__list--row { grid-auto-flow: column; justify-content: center; gap: 12px; }
.a9-review-snippets__list--column { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
.a9-review-snippets__list--carousel { justify-items: center; align-items: center; }
.a9-review-snippets__list--carousel .a9-review-snippet { grid-area: 1 / 1; }

/* 行内胶囊样式 */
.a9-review-snippets__list--row .a9-review-snippet,
.a9-review-snippets__list--carousel .a9-review-snippet {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  margin: 0;
  padding: 9px 18px;
  max-width: 100%;
  background: var(--a9-rs-bg, var(--paper-soft, #fbf7f0));
  border: var(--a9-rs-border, 1px) solid var(--line);
  border-radius: var(--a9-rs-radius, 10px);
}
/* 轮播:多条叠在同一处淡入淡出。脚本就绪后(.a9-snip-ready)才隐藏非当前条 →
   无 JS 时全部显示,优雅降级,不会一片空白。 */
.a9-review-snippets__list--carousel.a9-snip-ready .a9-review-snippet {
  opacity: 0;
  transition: opacity 0.5s var(--ease-out, ease);
  pointer-events: none;
}
.a9-review-snippets__list--carousel.a9-snip-ready .a9-review-snippet.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* 竖排块状卡片 */
.a9-review-snippets__list--column .a9-review-snippet {
  margin: 0;
  padding: 16px 18px;
  background: var(--a9-rs-bg, var(--paper-soft, #fbf7f0));
  border: var(--a9-rs-border, 1px) solid var(--line);
  border-radius: var(--a9-rs-radius, 10px);
}

.a9-review-snippet__stars { color: var(--a9-rs-star, var(--copper, #b9854e)); letter-spacing: 2px; font-size: 14px; flex-shrink: 0; }
.a9-review-snippet__quote { color: var(--a9-rs-heading, var(--ink)); font-size: 15px; line-height: 1.5; }
.a9-review-snippet__name { color: var(--a9-rs-text, var(--muted)); font-size: 13px; font-style: italic; flex-shrink: 0; }
/* column 模式下三段竖排展开 */
.a9-review-snippets__list--column .a9-review-snippet__stars { display: block; }
.a9-review-snippets__list--column .a9-review-snippet__quote { display: block; margin-top: 8px; }
.a9-review-snippets__list--column .a9-review-snippet__name { display: block; margin-top: 10px; }
@media (max-width: 760px) {
  .a9-review-snippets__list--row { grid-auto-flow: row; justify-items: center; }
}
.a9-rc__arrow {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--a9-pr-text, var(--line));
  border-radius: 999px;
  background: transparent;
  color: var(--a9-pr-heading, var(--ink));
  cursor: pointer;
  transition: background 0.18s var(--ease-out, ease), color 0.18s var(--ease-out, ease);
}
.a9-rc__arrow:hover {
  background: var(--a9-pr-heading, var(--ink));
  color: var(--paper-soft, #fbf7f0);
}
.a9-rc__arrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}
.a9-rc__arrow--prev::before { transform: rotate(45deg); margin-left: 3px; }
.a9-rc__arrow--next::before { transform: rotate(-135deg); margin-right: 3px; }
.a9-rc__num {
  min-width: 64px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  font-size: 13px;
  color: var(--a9-pr-text, var(--muted));
}
.a9-product-reviews__inner {
  max-width: var(--a9-pr-max-width, 1180px);
  margin: 0 auto;
}
.a9-product-reviews__head {
  text-align: center;
  margin-bottom: 40px;
}
.a9-product-reviews__head h2 {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 400;
  color: var(--a9-pr-heading, var(--ink));
}
.a9-product-reviews__intro {
  max-width: 60ch;
  margin: 14px auto 0;
  color: var(--a9-pr-text, var(--muted));
  line-height: 1.7;
}
.a9-product-reviews__summary {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 20px;
}
.a9-product-reviews__score {
  font-family: var(--font-display);
  font-size: 40px;
  color: var(--a9-pr-heading, var(--ink));
}
.a9-product-reviews__stars {
  color: var(--a9-pr-accent, #87323b);
  letter-spacing: 2px;
}
.a9-product-reviews__count {
  color: var(--a9-pr-text, var(--muted));
  font-size: 13px;
}
.a9-product-reviews__grid {
  display: grid;
  grid-template-columns: repeat(var(--a9-pr-columns, 3), minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 48px;
}
.a9-product-reviews__form-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 44px);
  background: var(--paper-soft, #fbf7f0);
  border: 1px solid var(--line, #d8cfc2);
  border-radius: 8px;
}
.a9-product-reviews__form-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--a9-pr-heading, var(--ink));
}
.a9-product-reviews__form-note {
  margin: 0 0 20px;
  color: var(--a9-pr-text, var(--muted));
  font-size: 13px;
  line-height: 1.6;
}
.a9-product-reviews__form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.a9-pr-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.a9-pr-field--full {
  margin-bottom: 18px;
}
.a9-pr-field__label {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--a9-pr-text, var(--muted));
}
.a9-pr-field input,
.a9-pr-field select,
.a9-pr-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line, #d8cfc2);
  border-radius: 5px;
  background: #fffaf2;
  color: var(--ink, #27221e);
  font: inherit;
  font-size: 14px;
}
.a9-pr-field textarea {
  resize: vertical;
  min-height: 110px;
}
.a9-pr-field__file {
  padding: 9px 12px;
  font-size: 13px;
  cursor: pointer;
}
.a9-pr-field__hint {
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted, #756c62);
}
.a9-product-reviews__feedback {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 5px;
  font-size: 14px;
}
.a9-product-reviews__feedback--ok {
  background: rgba(135, 50, 59, 0.08);
  color: var(--a9-pr-accent, #87323b);
}
.a9-product-reviews__feedback--err {
  background: rgba(179, 38, 30, 0.1);
  color: #b3261e;
}
.a9-product-reviews__submit {
  margin-top: 4px;
}
@media (max-width: 760px) {
  .a9-product-reviews__form-grid {
    grid-template-columns: 1fr;
  }

  /* ===== Reviews — selectable mobile layout (swipe | stack | grid2) =====
     Works for both the product-page reviews grid (.a9-product-reviews__grid)
     and the homepage review track (.review-snap-track). For the homepage
     deck, first neutralise its desktop/JS stacking so the choice applies. */
  .a9-product-reviews__grid {
    grid-template-columns: 1fr; /* safe fallback if no layout chosen */
  }
  [data-a9-reviews-mobile] .review-snap-track {
    position: static !important;
    grid-auto-flow: initial !important;
    grid-auto-columns: initial !important;
    min-height: 0 !important;
  }
  [data-a9-reviews-mobile] .review-snap-track .review-snap-card {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* swipe: horizontal scroll-snap carousel (finger left/right) */
  [data-a9-reviews-mobile="swipe"] .review-snap-track,
  [data-a9-reviews-mobile="swipe"] .a9-product-reviews__grid {
    display: flex !important;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  [data-a9-reviews-mobile="swipe"] .review-snap-track::-webkit-scrollbar,
  [data-a9-reviews-mobile="swipe"] .a9-product-reviews__grid::-webkit-scrollbar {
    display: none;
  }
  [data-a9-reviews-mobile="swipe"] .review-snap-track > *,
  [data-a9-reviews-mobile="swipe"] .a9-product-reviews__grid > * {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }

  /* stack: single column, top to bottom */
  [data-a9-reviews-mobile="stack"] .review-snap-track,
  [data-a9-reviews-mobile="stack"] .a9-product-reviews__grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* grid2: two compact columns */
  [data-a9-reviews-mobile="grid2"] .review-snap-track,
  [data-a9-reviews-mobile="grid2"] .a9-product-reviews__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

.stacked-review-deck .review-snap-card {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(30px) scale(0.92) rotate(4deg);
  transition: opacity 260ms var(--ease-out), transform 360ms var(--ease-out);
}

.stacked-review-deck:not(.a9-stack-ready) .review-snap-card:nth-child(1) {
  z-index: 4;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1) rotate(0);
}

.stacked-review-deck:not(.a9-stack-ready) .review-snap-card:nth-child(2) {
  z-index: 3;
  opacity: 0.72;
  pointer-events: auto;
  transform: translateX(18px) translateY(18px) scale(0.96) rotate(-2deg);
}

.stacked-review-deck:not(.a9-stack-ready) .review-snap-card:nth-child(3) {
  z-index: 2;
  opacity: 0.42;
  pointer-events: auto;
  transform: translateX(34px) translateY(34px) scale(0.92) rotate(3deg);
}

.stacked-review-deck .review-snap-card.is-active {
  z-index: 4;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1) rotate(0);
}

.stacked-review-deck .review-snap-card.is-next {
  z-index: 3;
  opacity: 0.72;
  pointer-events: auto;
  transform: translateX(18px) translateY(18px) scale(0.96) rotate(-2deg);
}

.stacked-review-deck .review-snap-card.is-back {
  z-index: 2;
  opacity: 0.42;
  pointer-events: auto;
  transform: translateX(34px) translateY(34px) scale(0.92) rotate(3deg);
}

.testimonial-card span,
.social-video-card span {
  color: var(--a9-accent-color, var(--wine));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.testimonial-card h3 {
  margin: 16px 0 10px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 400;
}

.testimonial-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.testimonial-card small {
  display: inline-flex;
  width: fit-content;
  margin-top: 22px;
  border-bottom: 1px solid currentColor;
  color: var(--a9-accent-color, var(--wine));
  font-size: 12px;
}

.social-videos {
  width: min(1340px, calc(100% - 40px));
  margin: 0 auto clamp(70px, 9vw, 126px);
}

.mobile-social-studio {
  width: min(1180px, calc(100% - 28px));
}

.social-video-experience {
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(320px, 0.32fr);
  gap: clamp(16px, 3vw, 34px);
  align-items: start;
}

.social-video-stage {
  min-height: var(--a9-studio-height, 640px);
  display: grid;
  grid-template-columns: 1fr;
  background: var(--ink);
  color: #fff8ef;
}

/* 让社媒左侧卡片区与右侧预览等高，避免左边太短、中间发空 */
.social-video-experience {
  min-height: var(--a9-studio-height, 640px);
}

.social-video-feed.a9-cards-list {
  align-content: start;
}

.phone-preview {
  width: min(430px, 100%);
  justify-self: center;
  overflow: hidden;
  border: 10px solid #201b17;
  border-radius: 36px;
  box-shadow: 0 30px 90px rgba(39, 34, 30, 0.26);
}

.social-stage-media {
  position: relative;
  overflow: hidden;
  background: #16120f;
}

.social-stage-media img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: var(--a9-media-fit, cover);
  opacity: 0.88;
  transition: opacity 220ms var(--ease-out), transform 560ms var(--ease-out);
}

.social-stage-origin {
  display: block;
  position: relative;
  cursor: pointer;
}

.social-stage-videos {
  position: absolute;
  inset: 0;
}

.social-stage-video-slot {
  position: absolute;
  inset: 0;
}

.social-stage-video-slot[hidden] {
  display: none;
}

.social-stage-video,
.social-stage-video-slot video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--a9-media-fit, cover);
  background: #16120f;
  display: block;
}

.social-stage-media.is-playing .social-play-mark {
  display: none;
}

/* While a video is actually playing, fade the cover image out so it stops
   covering the <video> underneath (the image's opacity:0.88 makes it paint
   over the absolutely-positioned video pool). Layout height is preserved. */
.social-stage-media.is-playing [data-social-stage-image] {
  opacity: 0;
}

.social-stage-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 248, 239, 0.12), transparent 34%),
    linear-gradient(180deg, transparent 42%, rgba(22, 18, 15, 0.58));
}

.social-play-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 248, 239, 0.76);
  border-radius: 999px;
  color: #fff8ef;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

.phone-metrics {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255, 248, 239, 0.82);
  font-size: 12px;
}

.social-stage-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
  padding: clamp(28px, 4vw, 52px);
}

.phone-preview .social-stage-copy {
  padding: 24px;
}

.social-stage-copy span {
  color: #e4bd8a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.social-stage-copy h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 66px);
  font-weight: 400;
  line-height: 1;
}

.social-stage-copy p {
  margin: 0;
  color: rgba(255, 248, 239, 0.72);
  line-height: 1.7;
}

.social-video-feed {
  display: grid;
  gap: 10px;
}

.creator-story-rail {
  grid-auto-flow: row;
}

.stacked-social-deck {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
}

.social-video-card {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 14px;
  align-items: stretch;
  min-height: 148px;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.stacked-social-deck .story-chip {
  position: absolute;
  inset: 0;
  height: 160px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(46px) scale(0.9) rotate(5deg);
  transition: opacity 240ms var(--ease-out), transform 360ms var(--ease-out), border-color 180ms var(--ease-out), background 180ms var(--ease-out);
}

.stacked-social-deck:not(.a9-stack-ready) .story-chip:nth-child(1) {
  z-index: 5;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1) rotate(0);
}

.stacked-social-deck:not(.a9-stack-ready) .story-chip:nth-child(2) {
  z-index: 4;
  opacity: 0.78;
  pointer-events: auto;
  transform: translateY(118px) scale(0.96) rotate(-2deg);
}

.stacked-social-deck:not(.a9-stack-ready) .story-chip:nth-child(3) {
  z-index: 3;
  opacity: 0.54;
  pointer-events: auto;
  transform: translateY(230px) scale(0.92) rotate(3deg);
}

.stacked-social-deck .story-chip.is-active {
  z-index: 5;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1) rotate(0);
}

.stacked-social-deck .story-chip.is-next {
  z-index: 4;
  opacity: 0.78;
  pointer-events: auto;
  transform: translateY(118px) scale(0.96) rotate(-2deg);
}

.stacked-social-deck .story-chip.is-back {
  z-index: 3;
  opacity: 0.54;
  pointer-events: auto;
  transform: translateY(230px) scale(0.92) rotate(3deg);
}

.social-video-card img {
  width: 116px;
  height: 128px;
  object-fit: var(--a9-media-fit, cover);
  filter: saturate(0.88);
}

.social-video-card div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 4px;
}

.social-video-card strong {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 400;
  line-height: 1.08;
}

.social-video-card em {
  color: var(--muted);
  font-style: normal;
  font-size: 13px;
}

.social-video-card:hover,
.social-video-card.is-active {
  border-color: var(--ink);
  background: #efe5d8;
  transform: translateX(-6px);
}

.social-video-card.is-active img {
  filter: saturate(1);
}

.story-chip {
  border-radius: 18px;
}

.editorial-commerce {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.55fr);
  gap: clamp(28px, 6vw, 82px);
  align-items: center;
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto clamp(64px, 9vw, 120px);
  padding: clamp(54px, 8vw, 96px) 0 0;
  border-top: 1px solid var(--line);
}

.editorial-commerce p:not(.eyebrow) {
  max-width: 62ch;
  color: var(--muted);
  line-height: 1.75;
}

.editorial-commerce .button-light {
  color: var(--ink);
}

.journal-preview {
  display: block;
  border: 1px solid var(--line);
  background: var(--paper-soft);
}

.journal-preview img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: var(--a9-media-fit, cover);
}

.journal-preview span {
  display: block;
  padding: 18px 20px 0;
}

.journal-preview h3 {
  margin: 12px 20px 22px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 400;
  line-height: 1.12;
}

.newsletter {
  width: min(920px, calc(100% - 40px));
  margin: clamp(64px, 9vw, 120px) auto;
  padding: clamp(34px, 6vw, 70px);
  border: 1px solid var(--line);
  background: var(--paper-soft);
  text-align: center;
}

.newsletter form {
  max-width: 560px;
  margin: 26px auto 0;
  text-align: left;
}

.newsletter label {
  display: block;
  margin-bottom: 8px;
  color: var(--a9-section-text-color, var(--muted));
  font-size: 13px;
}

.newsletter form div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.newsletter .a9-commerce-button {
  min-width: 132px;
}

.newsletter input {
  min-height: 46px;
  border: 1px solid var(--a9-input-border-color, var(--line));
  border-radius: var(--radius);
  padding: 0 14px;
  background: var(--a9-input-background-color, #fffaf2);
  color: var(--a9-input-text-color, var(--ink));
}

/* ============================================================
   A9: 积木式页脚（菜单列 / 社媒 / 订阅 / 支付 / 品牌 / 版权块）
   桌面分栏 · 手机折叠（原生 <details> 手风琴，无需 JS）
   ============================================================ */
.site-footer {
  padding: clamp(40px, 5vw, 64px) 30px clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--a9-footer-bg-color, #27221e) calc(var(--a9-footer-bg-opacity, 0) * 100%), transparent);
  color: var(--a9-footer-link-color, var(--muted));
}
.site-footer__inner {
  max-width: 1340px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--a9-footer-cols-gap, 48px);
}

.footer-block { min-width: 0; }
.footer-block__title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--a9-section-heading-color, var(--ink));
  margin: 0 0 14px;
}

/* —— 品牌/Logo 块 —— */
.footer-brand { flex: 1 1 220px; }
.footer-brand--center { text-align: center; }
.footer-brand__name { font-family: var(--font-display); font-size: 26px; color: var(--a9-section-heading-color, var(--ink)); text-decoration: none; }
.footer-brand__logo { display: inline-block; }
.footer-brand__logo img { display: block; width: auto; object-fit: contain; }
.footer-brand__text { margin: 12px 0 0; max-width: 36ch; color: var(--a9-footer-link-color, var(--muted)); line-height: 1.7; font-size: 13px; }
.footer-brand--center .footer-brand__text { margin-inline: auto; }

/* —— 菜单列（div + JS 手风琴：电脑端始终展开；手机端可折叠。
   链接默认就 display:grid，所以即使 JS 没跑，电脑端也能正常显示）—— */
.footer-col { flex: 1 1 150px; max-width: 240px; }
.footer-col__title {
  width: 100%;
  margin: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: default;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--a9-section-heading-color, var(--ink));
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
}
.footer-col__chev {
  flex: none;
  width: 9px; height: 9px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 200ms;
  opacity: 0.55;
  display: none;
}
.footer-col__links { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.footer-col.is-collapsed .footer-col__links { display: none; }
.footer-col__links a { color: var(--a9-footer-link-color, var(--muted)); text-decoration: none; font-size: 13px; }
.footer-col__links a:hover { color: var(--a9-section-heading-color, var(--ink)); }

/* —— 社交媒体 —— */
.footer-social { flex: 1 1 200px; }
.footer-social__icons { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.footer-social__a { color: var(--a9-footer-link-color, var(--ink)); display: inline-flex; }
.footer-social__a svg { width: 22px; height: 22px; display: block; }
.footer-social__a--img img { width: 22px; height: 22px; object-fit: contain; display: block; }
.footer-social__a:hover { opacity: 0.6; }

/* —— 邮件订阅 —— */
.footer-newsletter { flex: 1 1 260px; }
.footer-newsletter__text { margin: 0 0 12px; font-size: 13px; color: var(--a9-footer-link-color, var(--muted)); }
.footer-newsletter__form { display: flex; gap: 8px; max-width: 340px; }
.footer-newsletter__input { flex: 1 1 auto; min-width: 0; height: var(--a9-button-height, 46px); padding: 0 14px; border: 1px solid var(--a9-input-border-color, var(--line)); background: var(--a9-input-background-color, #fffaf2); color: var(--a9-input-text-color, var(--ink)); border-radius: var(--a9-button-radius, 6px); font-size: 14px; }
.footer-newsletter__btn { height: var(--a9-button-height, 46px); padding: var(--a9-button-padding, 0 20px); border: var(--a9-button-border-width, 1px) solid var(--a9-button-border-color, var(--ink)); background: var(--a9-button-background-color, var(--ink)); color: var(--a9-button-text-color, #fff8ef); border-radius: var(--a9-button-radius, 6px); font-size: var(--a9-button-font-size, 13px); font-weight: var(--a9-button-font-weight, 700); letter-spacing: var(--a9-button-letter-spacing, 0.05em); cursor: pointer; white-space: nowrap; }
.footer-newsletter__btn:hover { background: var(--a9-button-hover-background-color, var(--ink)); color: var(--a9-button-hover-text-color, #fff8ef); }

/* —— 语言/国家(币种)选择器块：描边整行框,上下排列(参考 CIDER 页脚) —— */
.footer-locale { flex: 1 1 260px; }
.footer-locale form { display: grid; gap: 10px; max-width: 340px; }
.footer-locale__item { position: relative; display: block; }
.footer-locale__item::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
  pointer-events: none;
}
.footer-locale__select {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: var(--a9-button-height, 46px);
  padding: 0 38px 0 14px;
  border: 1px solid var(--a9-input-border-color, var(--line));
  border-radius: var(--a9-button-radius, 6px);
  background: var(--a9-input-background-color, #fffaf2);
  color: var(--a9-input-text-color, var(--ink));
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.footer-locale.fb-align-center form { margin-inline: auto; }
.footer-locale.fb-align-right form { margin-inline-start: auto; }
@media (max-width: 920px) {
  .footer-locale { margin-bottom: 26px; }
  .footer-locale form { max-width: none; }
}

/* —— 支付图标 —— */
.footer-payment { flex-basis: 100%; }
.footer-payment__img { max-width: 100%; height: auto; display: block; }
.footer-payment__icons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.footer-pay__ic { width: 36px; height: 24px; display: block; flex: none; border-radius: 3px; }

/* A9: 页脚各板块内容对齐（每块「板块内容对齐」可选） */
.footer-block.fb-align-left { text-align: left; }
.footer-block.fb-align-center { text-align: center; }
.footer-block.fb-align-right { text-align: right; }
.footer-block.fb-align-center .footer-social__icons,
.footer-block.fb-align-center .footer-payment__icons { justify-content: center; }
.footer-block.fb-align-right .footer-social__icons,
.footer-block.fb-align-right .footer-payment__icons { justify-content: flex-end; }
.footer-block.fb-align-center .footer-newsletter__form { margin-inline: auto; }
.footer-block.fb-align-right .footer-newsletter__form { margin-inline-start: auto; }

/* A9: 页脚各板块水平/垂直位置微调（每块「水平/垂直位置微调」滑杆）。
   仅电脑端生效，手机端整行堆叠不受 translate 影响、避免横向溢出。 */
@media (min-width: 761px) {
  .footer-block {
    transform: translate(var(--fb-ox, 0px), var(--fb-oy, 0px));
  }
}

/* —— 底部版权栏（永远排在最后、整行）—— */
.footer-bottom { flex-basis: 100%; order: 99; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between; margin-top: 6px; padding-top: 20px; border-top: 1px solid var(--line); }
.footer-bottom__copy { margin: 0; font-size: 12px; color: var(--a9-footer-link-color, var(--muted)); }
.footer-bottom__policies { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-bottom__policies a { font-size: 12px; color: var(--a9-footer-link-color, var(--muted)); text-decoration: none; }

/* A9 页脚：≤920px(平板+手机)各块整行堆叠 + 菜单列折叠手风琴，避免平板上挤成一排。
   与 footer-accordion.js 的 920 断点一致。 */
@media (max-width: 920px) {
  .site-footer__inner { gap: 0; }
  /* 包装层兜底:装修编辑器会给每个积木块包一层选择用的包装元素,flex 子项变成包装层,
     按类名写的整行规则就落不到 flex 子项上 → 直接让 inner 的所有直接孩子整行。 */
  .site-footer__inner > * {
    flex: 1 1 100% !important;
    width: 100%;
    max-width: none !important;
    min-width: 0;
  }
  .footer-brand,
  .footer-social,
  .footer-newsletter,
  .footer-payment,
  .footer-col {
    flex: 1 1 100% !important;
    max-width: none !important;
  }
  .footer-brand,
  .footer-social,
  .footer-newsletter { margin-bottom: 26px; }
  .footer-payment { margin-bottom: 4px; }
  .footer-col { border-top: 1px solid var(--line); }
  .footer-col:not(:has(~ .footer-col)) { border-bottom: 1px solid var(--line); }
  .footer-col__title { padding: 17px 0; font-size: 13px; }
  .footer-col.is-interactive .footer-col__title { cursor: pointer; }
  .footer-col.is-interactive .footer-col__chev { display: block; }
  .footer-col.is-interactive:not(.is-collapsed) .footer-col__chev { transform: rotate(-135deg); }
  .footer-col__links { margin-top: 0; padding-bottom: 18px; gap: 13px; }
  .footer-col__links a { font-size: 14px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}
.footer-bottom__policies a:hover { text-decoration: underline; }

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  max-width: 280px;
  padding: 13px 16px;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff8ef;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Native cart drawer + notification — Atelier reskin.
   These render at <body> level (outside .a9-commerce-page), so
   a9-commerce-pages.css never reaches them. Style globally here
   in the wine/ink/paper palette with the display font for heads.
   Scoped to native class names; touches surface, not layout.
   ============================================================ */
.cart-drawer__body,
.cart-notification__body {
  background: var(--paper-soft);
  color: var(--ink);
  font-family: var(--font-body);
}

.cart-drawer__header {
  border-bottom: 1px solid var(--line);
}

.cart-drawer__header .title4 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: 0.01em;
}

.cart-drawer__close {
  color: var(--ink);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.cart-drawer__close:hover {
  opacity: 0.6;
}

/* Line items + totals: hairlines and muted meta in the paper palette */
.cart-drawer .cart-item,
.cart-notification .cart-item {
  border-color: var(--line);
}

.cart-drawer__payment,
.cart-drawer__fixed-checkout {
  border-top: 1px solid var(--line);
  background: var(--paper-soft);
}

.cart-amount > li em {
  color: var(--muted);
}

.cart-amount > li span {
  color: var(--ink);
}

/* Checkout / continue buttons inside the drawer: lock the ink button
   across states so they never flash to white on press. */
.cart-drawer .button:not(.button--link):not(.button--secondary),
.cart-notification .button:not(.button--link):not(.button--secondary),
.cart-drawer .button:not(.button--link):not(.button--secondary):hover,
.cart-drawer .button:not(.button--link):not(.button--secondary):focus,
.cart-drawer .button:not(.button--link):not(.button--secondary):active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff8ef;
  border-radius: var(--radius);
}

.cart-drawer .button:not(.button--link):not(.button--secondary):hover {
  opacity: 0.92;
}

/* Coupon field aligns with the rest of the Atelier inputs */
.cart-coupon__form .field__input {
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}

/* Empty state: quieter, on-palette */
.cart-empty__tips {
  color: var(--muted);
}

.breadcrumb,
.product-page,
.collection-page {
  color: var(--ink);
}

.breadcrumb {
  width: min(1340px, calc(100% - 40px));
  margin: 26px auto;
  display: flex;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.product-detail {
  width: min(1340px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, var(--a9-gallery-col, 1.3fr)) minmax(300px, var(--a9-info-col, 0.82fr));
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  padding: 22px 0 clamp(60px, 8vw, 110px);
}

/* A9: 商品主图整体放大；尺寸/比例可在后台“单个商品”中调整 */
.product-detail.a9-gallery-full {
  grid-template-columns: 1fr;
}

.product-detail.a9-gallery-full .product-info {
  position: static;
  max-width: 760px;
  margin-inline: auto;
}

.product-gallery__main {
  width: 100%;
  max-width: var(--a9-gallery-max, none);
  aspect-ratio: var(--a9-gallery-aspect, 4 / 5);
  object-fit: var(--a9-media-fit, cover);
  background: var(--paper-soft);
}

/* 让后台“主图比例”(gallery_aspect) 真正生效：
   覆盖通用规则 .a9-editable-scope img{aspect-ratio: ... !important} */
.product-detail.a9-editable-scope img.product-gallery__main {
  aspect-ratio: var(--a9-gallery-aspect, 4 / 5) !important;
}

.product-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.product-thumbs button {
  border: 1px solid transparent;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.product-thumbs button.is-active {
  border-color: var(--ink);
}

.product-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: var(--a9-media-fit, cover);
}

.product-info {
  position: sticky;
  top: 94px;
}

.product-info h1,
.collection-hero h1 {
  color: var(--ink);
}

.product-info h1 {
  font-size: var(--a9-section-heading-size, inherit);
}

.product-price {
  color: var(--a9-accent-color, #d9564b);
  font-size: 22px;
  font-weight: 700;
}

.product-summary {
  color: var(--muted);
  font-size: var(--a9-section-text-size, inherit);
  line-height: 1.7;
}

.option-group,
.quantity-control {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}

.swatches,
.size-options,
.quantity-control div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.swatch {
  width: 34px;
  height: 34px;
  border: var(--a9-button-border-width, 1px) solid var(--a9-button-border-color, var(--line));
  border-radius: 999px;
  background: var(--swatch);
  cursor: pointer;
}

.swatch.is-active,
.size-options button.is-active {
  outline: var(--a9-focus-ring-width, 2px) solid var(--a9-focus-ring-color, rgba(39, 34, 30, 0.42));
  outline-offset: 2px;
}

.size-options button,
.quantity-control button {
  min-width: 44px;
  min-height: 42px;
  border: var(--a9-button-border-width, 1px) solid var(--a9-button-border-color, var(--line));
  border-radius: var(--a9-button-radius, var(--radius));
  background: var(--a9-input-background-color, var(--paper-soft));
  color: var(--a9-input-text-color, var(--ink));
  cursor: pointer;
}

.quantity-control output {
  min-width: 36px;
  text-align: center;
}

.product-actions {
  display: grid;
  gap: 10px;
  margin: 8px 0 10px;
}

.product-actions .a9-commerce-button {
  width: 100%;
}

.product-add {
  width: 100%;
  margin: 8px 0 10px;
}

.size-options button:disabled {
  cursor: not-allowed;
  color: #9a9288;
  text-decoration: line-through;
  background: color-mix(in srgb, var(--a9-input-background-color, #eee6dc) 82%, #000 8%);
}

.product-accordions {
  margin-top: 24px;
  border-top: 1px solid var(--line);
}

.product-accordions details {
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}

.product-accordions summary {
  cursor: pointer;
  font-weight: 700;
}

.product-accordions p {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.product-trust {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.product-trust div {
  display: grid;
  gap: 4px;
}

.product-trust strong {
  font-size: 13px;
}

.product-trust span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.complete-look-add {
  width: fit-content;
  margin-top: 22px;
}

.collection-hero {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(54px, 8vw, 110px) 0 30px;
  text-align: center;
}

.collection-hero p:not(.eyebrow) {
  margin-inline: auto;
  max-width: 60ch;
  color: var(--muted);
  line-height: 1.7;
}

.collection-toolbar {
  width: min(1340px, calc(100% - 40px));
  margin: 0 auto 26px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-toggle {
  display: none;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff8ef;
  padding: 0 14px;
  cursor: pointer;
}

.filter-group button,
.collection-toolbar select {
  min-height: 38px;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  color: var(--ink);
  padding: 0 12px;
}

.filter-group button.is-active {
  background: var(--ink);
  color: #fff8ef;
}

.collection-grid {
  width: min(1340px, calc(100% - 40px));
  margin: 0 auto clamp(64px, 8vw, 110px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.product-card .product-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
  background: rgba(251, 247, 240, 0.92);
}

.collection-empty {
  width: min(1340px, calc(100% - 40px));
  margin: -30px auto clamp(64px, 8vw, 110px);
  padding: 22px;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  color: var(--muted);
  text-align: center;
}

.blog-page,
.article-page {
  background: var(--paper);
}

.blog-hero,
.article-body {
  width: min(920px, calc(100% - 40px));
  margin: 0 auto;
}

.blog-hero {
  padding: clamp(54px, 8vw, 110px) 0 34px;
  text-align: center;
}

.blog-hero p:not(.eyebrow),
.article-body p {
  color: var(--muted);
  line-height: 1.8;
}

.journal-listing,
.blog-product-strip,
.article-products {
  width: min(1280px, calc(100% - 40px));
  margin: clamp(50px, 7vw, 96px) auto;
}

.journal-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}

.journal-feature img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: var(--a9-media-fit, cover);
}

.journal-feature span {
  color: var(--a9-accent-color, var(--wine));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.journal-card-grid,
.blog-product-strip,
.article-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.journal-card-grid {
  margin-top: 24px;
}

.journal-card-grid img,
.article-product-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: var(--a9-media-fit, cover);
}

.journal-card-grid h3,
.article-product-card h3 {
  margin: 14px 0 8px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
}

.journal-card-grid p,
.article-product-card p {
  color: var(--muted);
  line-height: 1.65;
}

.article-hero {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(48px, 7vw, 92px) 0 0;
}

.article-hero img {
  width: 100%;
  max-height: 680px;
  object-fit: var(--a9-media-fit, cover);
}

.article-body {
  padding: clamp(42px, 6vw, 78px) 0 0;
}

.article-product-card {
  border: 1px solid var(--line);
  background: var(--paper-soft);
  padding: 14px;
}

.article-product-card button {
  width: 100%;
  min-height: 42px;
  border: var(--a9-button-border-width, 1px) solid var(--a9-button-border-color, var(--ink));
  border-radius: var(--radius);
  background: var(--a9-button-background-color, var(--ink));
  color: var(--a9-button-text-color, #fff8ef);
  cursor: pointer;
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: auto auto;
    background: rgba(39, 34, 30, 0.9);
  }

  .site-header.is-open {
    transform: translateY(0);
  }

  .brand {
    z-index: 22;
  }

  .menu-toggle {
    z-index: 22;
    justify-self: end;
    display: grid;
    gap: 6px;
    width: 42px;
    height: 42px;
    place-content: center;
  }

  .menu-toggle span {
    width: 24px;
    height: 1px;
    background: #fff8ef;
  }

  .primary-nav,
  .header-actions {
    grid-column: 1 / -1;
    display: none;
    width: 100%;
    padding: 16px 0;
    justify-content: flex-start;
  }

  .site-header.is-open .primary-nav,
  .site-header.is-open .header-actions {
    display: flex;
  }

  .journal-feature,
  .journal-card-grid,
  .blog-product-strip,
  .article-products {
    grid-template-columns: 1fr;
  }

  .lookbook,
  .signature-collection,
  .curated-set,
  .event-showcase,
  .product-story,
  .outfit-builder,
  .product-detail,
  .private-sale,
  .theme-capabilities,
  .editorial-commerce,
  .social-proof,
  .story {
    grid-template-columns: 1fr;
  }

  .theme-capabilities article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .theme-capabilities article:last-child {
    border-bottom: 0;
  }

  .mosaic-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .mosaic-large {
    grid-row: auto;
  }

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

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

  .product-info {
    position: static;
  }

  .duo-promo,
  .event-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .social-video-experience {
    grid-template-columns: 1fr;
  }

  .creator-story-rail {
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 28%);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    padding-bottom: 8px;
  }

  .stacked-social-deck {
    min-height: 360px;
    overflow: hidden;
    padding-bottom: 0;
  }

  .stacked-social-deck .story-chip.is-next {
    transform: translateY(96px) scale(0.96) rotate(-2deg);
  }

  .stacked-social-deck .story-chip.is-back {
    transform: translateY(188px) scale(0.92) rotate(3deg);
  }

  .stacked-social-deck:not(.a9-stack-ready) .story-chip:nth-child(2) {
    transform: translateY(96px) scale(0.96) rotate(-2deg);
  }

  .stacked-social-deck:not(.a9-stack-ready) .story-chip:nth-child(3) {
    transform: translateY(188px) scale(0.92) rotate(3deg);
  }

  .story-chip {
    scroll-snap-align: start;
  }

  .lookbook img {
    height: 58dvh;
  }

  .story-model,
  .event-image {
    min-height: 56dvh;
  }

  .private-sale {
    grid-template-columns: 1fr;
  }

  .atelier-services {
    grid-template-columns: 1fr;
  }

  .atelier-services div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .proof-quote {
    min-height: 340px;
  }
}

@media (max-width: 760px) {
  .announcement {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }

  .site-header {
    min-height: 64px;
    padding: 0 18px;
  }

  .site-header.a9-editable-scope {
    min-height: 64px !important;
    height: 64px !important;
  }

  .site-header.a9-editable-scope.is-open {
    height: auto !important;
  }

  .primary-nav,
  .header-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .wide-hero {
    min-height: var(--a9-hero-mobile-height, 76dvh);
  }

  .hero-overlay {
    margin: 0 20px 38px;
  }

  h1 {
    font-size: clamp(42px, 16vw, 70px);
  }

  .collection-strip,
  .event-products,
  .collection-grid,
  .countdown,
  .newsletter form div,
  .signature-gallery,
  .social-video-experience,
  .social-video-stage {
    grid-template-columns: 1fr;
  }

  /* A9: 双图促销手机端每行数量可选 —— 上下两行(1) / 并排一行(2)，由该模块「手机端每行数量」控制 */
  .duo-promo {
    grid-template-columns: repeat(var(--a9-duo-cols-m, 1), minmax(0, 1fr));
  }

  /* 默认手机端 1 列（适用于未指定布局的商品网格，如首页上新/相关推荐等） */
  .product-grid {
    grid-template-columns: 1fr;
  }

  /* A9 各板块手机端每行数量(跟双图促销同款 --*-cols-m)。用 id 提高优先级,只影响对应板块、
     稳压上面的基础移动端规则。默认沿用各板块原本的手机端列数(都是 1);选 2 列即可让该板块
     手机端更紧凑、不用一直往下滑。 */
  #new-arrivals .product-grid { grid-template-columns: repeat(var(--a9-grid-cols-m, 1), minmax(0, 1fr)); }
  #event-showcase .event-products { grid-template-columns: repeat(var(--a9-event-cols-m, 1), minmax(0, 1fr)); }
  #atelier-services.atelier-services { grid-template-columns: repeat(var(--a9-svc-cols-m, 1), minmax(0, 1fr)); }
  #theme-capabilities.theme-capabilities { grid-template-columns: repeat(var(--a9-cap-cols-m, 1), minmax(0, 1fr)); }
  #category-mosaic .mosaic-grid { grid-template-columns: repeat(var(--a9-mosaic-cols-m, 1), minmax(0, 1fr)); }
  #signature-collection .signature-gallery { grid-template-columns: repeat(var(--a9-sig-cols-m, 1), minmax(0, 1fr)); }

  /* A9 「手机端紧凑模式」:板块设置里开 mobile_compact → root 加 .a9-mcompact;旋钮调收紧程度。
     只对这些特殊排版板块、且仅手机端 + 开启时收紧;默认关 → 完全不影响现有观感。 */
  #lookbook.a9-mcompact img { height: var(--a9-mc-img-h, 280px); width: 100%; object-fit: cover; }
  #lookbook.a9-mcompact .lookbook-copy { padding: clamp(16px, 4vw, 24px); justify-content: flex-start; }

  #behind-scenes.a9-mcompact { min-height: var(--a9-mc-min-height, 340px); }
  #behind-scenes.a9-mcompact h2 { margin-bottom: 16px; }
  #behind-scenes.a9-mcompact .eyebrow { margin-bottom: 8px; }

  #product-story.a9-mcompact .story-model { min-height: var(--a9-mc-img-h, 360px); }

  #curated-set.a9-mcompact .set-list div { min-height: var(--a9-mc-row-h, 64px); gap: 12px; }

  #outfit-builder.a9-mcompact .outfit-image img { height: var(--a9-mc-img-h, 300px); width: 100%; aspect-ratio: auto; object-fit: var(--a9-media-fit, cover); object-position: var(--a9-media-position, center 25%); }
  #outfit-builder.a9-mcompact .outfit-panel > p { margin-bottom: 16px; }
  #outfit-builder.a9-mcompact .outfit-lines { gap: 16px; }
  #outfit-builder.a9-mcompact .outfit-lines article { grid-template-columns: 64px 1fr; gap: 14px; }
  #outfit-builder.a9-mcompact .outfit-lines img { width: 64px; height: 64px; min-width: 64px; min-height: 64px; }

  #editorial-commerce.a9-mcompact .journal-preview { margin-bottom: 12px; }
  #editorial-commerce.a9-mcompact .journal-preview img { height: var(--a9-mc-card-img-h, 280px); aspect-ratio: auto; object-fit: cover; }
  #editorial-commerce.a9-mcompact .journal-preview h3 { margin: 6px 14px 12px; font-size: clamp(16px, 2vw, 20px); line-height: 1.2; }

  #mobile-quick-shop.a9-mcompact .quick-shop-item img { height: var(--a9-mc-img-h, 88px); }

  /* A9: 商品列表手机端布局（大图/两列/列表/左右滑动/一大两小），由收藏页「手机端布局」控制 */
  .product-grid[data-a9-mlayout="big"] {
    grid-template-columns: 1fr;
  }
  .product-grid[data-a9-mlayout="grid2"],
  .product-grid[data-a9-mlayout="feature"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-grid[data-a9-mlayout="feature"] > .product-card:first-child {
    grid-column: 1 / -1;
  }
  .product-grid[data-a9-mlayout="list"] {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .product-grid[data-a9-mlayout="list"] .product-link {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 12px;
    align-items: center;
  }
  .product-grid[data-a9-mlayout="list"] .product-card img {
    aspect-ratio: 3 / 4;
  }
  .product-grid[data-a9-mlayout="scroll"] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-right: -14px;
    padding-right: 14px;
  }
  .product-grid[data-a9-mlayout="scroll"] > .product-card {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }

  /* A9: 通用手机端横滑（各板块「手机端布局」选单列/双列横滑时挂上）。
     !important 用于压过各板块 id 级网格规则(#new-arrivals .product-grid 等)。
     无滚动条(用户要求),靠下一张露出一截提示可滑。 */
  .a9-mswipe {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    grid-template-rows: repeat(var(--a9-mswipe-rows, 1), auto);
    grid-auto-columns: var(--a9-mswipe-w, 80%);
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    align-items: stretch;
  }
  .a9-mswipe::-webkit-scrollbar { display: none; }
  .a9-mswipe--2 { --a9-mswipe-w: 44%; }
  /* 横滑卡统一图片比例:默认 3:4;板块「图片比例」设了具体值则用设的
     (模板仅在非 auto 时输出 --a9-mswipe-ratio)。固定宽高的小缩略图不受影响。 */
  .a9-mswipe img { aspect-ratio: var(--a9-mswipe-ratio, 3 / 4); }
  .a9-mswipe > * {
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    scroll-snap-align: start;
  }

  .social-proof {
    width: min(100%, calc(100% - 28px));
  }

  .proof-quote {
    min-height: 0;
    padding: 28px;
  }

  .testimonial-card {
    padding: 22px;
  }

  .mobile-social-studio {
    width: min(100%, calc(100% - 24px));
  }

  .review-snap-track {
    grid-auto-columns: minmax(82%, 1fr);
    margin-right: -14px;
    padding-right: 14px;
  }

  .stacked-review-deck {
    min-height: 410px;
    margin-right: 0;
    padding-right: 0;
  }

  .phone-preview {
    width: min(390px, 100%);
    border-width: 7px;
    border-radius: 30px;
  }

  .social-stage-media img {
    min-height: 440px;
  }

  .social-video-card {
    grid-template-columns: 92px 1fr;
    min-height: 124px;
    transform: none;
  }

  .social-video-card:hover,
  .social-video-card.is-active {
    transform: none;
  }

  .social-video-card img {
    width: 92px;
    height: 104px;
  }

  .collection-strip a {
    min-height: 62px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .section-heading {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .product-meta,
  .set-list div {
    grid-template-columns: 1fr;
  }

  /* A9 页脚手机端：各菜单列变整行手风琴，块之间用分隔线（CIDER 风格）。
     !important 用于盖过各块「板块宽度」写在行内的 flex，确保手机端始终整行堆叠。
     行高/字号与 920px 主块保持一致。 */
  .site-footer__inner { gap: 0; }
  .site-footer__inner > * {
    flex: 1 1 100% !important;
    width: 100%;
    max-width: none !important;
    min-width: 0;
  }
  .footer-brand,
  .footer-social,
  .footer-newsletter,
  .footer-payment,
  .footer-col {
    flex: 1 1 100% !important;
    max-width: none !important;
  }
  .footer-brand,
  .footer-social,
  .footer-newsletter { margin-bottom: 26px; }
  .footer-payment { margin-bottom: 4px; }
  .footer-col {
    border-top: 1px solid var(--line);
  }
  .footer-col:not(:has(~ .footer-col)) { border-bottom: 1px solid var(--line); }
  .footer-col__title { padding: 17px 0; font-size: 13px; }
  .footer-col.is-interactive .footer-col__title { cursor: pointer; }
  .footer-col.is-interactive .footer-col__chev { display: block; }
  .footer-col.is-interactive:not(.is-collapsed) .footer-col__chev { transform: rotate(-135deg); }
  .footer-col__links { margin-top: 0; padding-bottom: 18px; gap: 13px; }
  .footer-col__links a { font-size: 14px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }

  .story-images {
    grid-template-columns: 1fr 1fr;
  }

  .promo-panel {
    min-height: 54dvh;
  }

  .outfit-lines article {
    grid-template-columns: 74px 1fr;
  }

  .outfit-lines strong {
    grid-column: 2;
  }

  .collection-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .filter-toggle {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
  }

  .filter-group {
    display: none;
  }

  .filter-group.is-open {
    display: flex;
  }

  .mobile-quick-shop {
    display: block;
  }

  .mobile-commerce-bar {
    position: sticky;
    bottom: 0;
    z-index: 18;
  }

  .quick-shop-rail {
    margin-right: -20px;
    padding: 0 20px 6px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Quick-add as a dark bar OVERLAID on the bottom of the product image
   (matches the requested design). Hidden by default, slides in on card
   hover/focus; always visible on touch / mobile. The overlay box matches
   the image via the same aspect-ratio, so the bar sits exactly at the
   image's bottom edge and never covers the title/price below. */
.product-card theme-product-form,
.product-card .a9-quick-add-form {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 3 / 4.25;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  pointer-events: none;
  z-index: 2;
}

/* The dark add bar, refined: slightly translucent ink with a soft blur so it
   reads over any image, uppercase tracking, a subtle lift, and a wine hover. */
.product-card .quick-add {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: var(--a9-button-radius, 6px);
  background: rgba(39, 34, 30, 0.9);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: #fff8ef;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 10px 26px -14px rgba(20, 16, 12, 0.7);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out),
    background 180ms var(--ease-out);
}

.product-card .quick-add:hover {
  background: rgba(39, 34, 30, 1);
}

.product-card:hover .quick-add,
.product-card:focus-within .quick-add {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (hover: none), (max-width: 760px) {
  .product-card .quick-add {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* "Add complete look" batch button (outfit / curated set) */
.outfit-add-all {
  width: 100%;
  margin-top: 18px;
}

.outfit-add-all[data-loading] {
  opacity: 0.75;
  cursor: progress;
}

/* a9 demo blocks (story/commerce/quick-shop/outfit) wrap their button in a
   native theme-product-form when a product is bound; keep the wrapper
   transparent to layout so the button sits exactly where it used to. */
.a9-inline-add-form {
  display: contents;
}

/* ============================================================
   Product fabric/material showcase section (a9-product-06).
   Dark editorial band: centred heading + image/caption grid.
   ============================================================ */
.a9-fabric-showcase {
  background: var(--a9-fabric-bg, var(--ink));
  color: var(--a9-fabric-text, var(--line));
  padding: clamp(48px, 8vw, 110px) 0;
}

.a9-fabric-showcase__inner {
  width: min(1340px, calc(100% - 40px));
  margin: 0 auto;
}

.a9-fabric-showcase__head {
  max-width: 760px;
  margin: 0 auto clamp(32px, 5vw, 64px);
  text-align: center;
}

.a9-fabric-showcase__eyebrow {
  margin: 0 0 14px;
  color: var(--a9-fabric-accent, var(--copper));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.a9-fabric-showcase__heading {
  margin: 0 0 16px;
  color: var(--a9-fabric-heading, var(--paper));
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 64px);
  font-weight: 500;
  line-height: 1.02;
}

.a9-fabric-showcase__subtitle {
  margin: 0 auto;
  max-width: 60ch;
  color: var(--a9-fabric-text, var(--line));
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.55;
}

/* Modular grid of a9-editorial-image blocks (figure + figcaption) */
.a9-fabric-showcase__grid {
  display: grid;
  grid-template-columns: repeat(var(--a9-fabric-cols, 3), minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 30px);
}

.a9-fabric-showcase__grid > .a9-editable-block,
.a9-fabric-showcase__grid > figure {
  width: 100% !important;
  margin: 0;
}

.a9-fabric-showcase__grid img {
  display: block;
  width: 100%;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  transition: transform 600ms var(--ease-out);
}

.a9-fabric-showcase__grid figure:hover img {
  transform: scale(1.03);
}

/* Captions: editorial display type; the block's own caption_color still wins */
.a9-fabric-showcase__grid figcaption {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 500;
  line-height: 1.2;
}

@media (max-width: 760px) {
  /* Showcase sections on the product page — mobile comfort */
  .a9-fabric-showcase {
    padding: clamp(32px, 6vw, 64px) 0;
  }
  .a9-fabric-showcase__inner {
    width: min(1340px, calc(100% - 28px));
  }
  .a9-fabric-showcase__heading {
    font-size: clamp(26px, 7vw, 44px);
    line-height: 1.08;
  }
  .a9-fabric-showcase__subtitle {
    font-size: clamp(13px, 3.6vw, 15px);
  }
  .a9-fabric-showcase__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 3vw, 18px);
  }
  .a9-fabric-showcase__grid figcaption {
    margin-top: 10px;
    font-size: clamp(14px, 4vw, 18px);
  }

  /* Lookbook (now on product page): single column, lighter padding */
  .lookbook {
    grid-template-columns: 1fr;
  }
  .lookbook-copy {
    padding: clamp(26px, 6vw, 44px);
    min-height: auto;
  }
  .lookbook img {
    height: clamp(280px, 60vh, 420px);
  }

  /* Behind-scenes (craft): shorter band, readable heading */
  .behind-scenes {
    min-height: 420px;
  }
  .behind-scenes h2 {
    font-size: clamp(24px, 6vw, 42px);
  }
}

@media (max-width: 480px) {
  .a9-fabric-showcase__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .a9-fabric-showcase__heading {
    font-size: clamp(22px, 8vw, 32px);
  }
  .lookbook-copy {
    padding: clamp(20px, 5vw, 28px);
  }
  .behind-scenes {
    min-height: 360px;
  }
}

/* ============================================================
   A9: 电脑端横滑(各板块「电脑端布局」=横滑)。
   每屏列数/行数由 --a9-dswipe-cols/--a9-dswipe-rows(板块设置内联)控制;
   自动轮播由 a9/swipe-autoplay.js 读取 --a9-swipe-auto-d/-m 驱动。
   !important 压过各板块 id 级网格规则,同 .a9-mswipe 的做法。
   ============================================================ */
@media (min-width: 761px) {
  .a9-dswipe {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    grid-template-rows: repeat(var(--a9-dswipe-rows, 1), auto);
    grid-auto-columns: calc((100% - (var(--a9-dswipe-cols, 4) - 1) * 16px) / var(--a9-dswipe-cols, 4));
    gap: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    align-items: stretch;
  }
  .a9-dswipe::-webkit-scrollbar { display: none; }
  .a9-dswipe > * {
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    scroll-snap-align: start;
  }
  .a9-dswipe img { aspect-ratio: var(--a9-mswipe-ratio, 3 / 4); }
}