: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: var(--a9-nav-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;
    opacity: calc(var(--a9-hero-overlay, 100) / 100);
    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);
        height: auto;
    }

    .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);
        height: auto;
    }
}

/* 连续滚动(跑马灯)= 等高小图带:固定高度、宽度自适应,与「每页列数」无关。*/

.a9-marquee,
.a9-dswipe.a9-marquee,
.a9-mswipe.a9-marquee {
    display: block !important;
    overflow: hidden !important;
    grid-template-columns: none !important;
    background: transparent !important;
}

.a9-marquee>.a9-marquee__track {
    display: flex !important;
    width: max-content !important;
    max-width: none !important;
    align-items: center;
    animation: a9-marquee-scroll linear infinite;
    will-change: transform;
}

.a9-marquee.a9-paused .a9-marquee__track {
    animation-play-state: paused;
}

@keyframes a9-marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.a9-marquee__track>* {
    flex: 0 0 auto;
    width: auto !important;
    margin-right: 10px;
    transition: none;
}

.a9-marquee__track img {
    height: var(--a9-marquee-h, 200px) !important;
    width: auto !important;
    aspect-ratio: auto !important;
    border-radius: 10px;
}

/* 画廊大标题(横滑图带上方;跑马灯模式下由 .a9-marquee-keep 保留可见)。
   用 .lookbook .a9-gallery-title 提权,压过 .a9-editable-scope h2 / .lookbook h2(否则字号/居中被它们盖掉) */
.lookbook .a9-gallery-title {
    grid-column: 1 / -1;
    margin: 0 0 clamp(30px, 4vw, 46px);
    font-family: var(--font-display, inherit);
    font-size: var(--a9-gallery-title-size, clamp(30px, 4.4vw, 52px));
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--a9-gallery-title-color, #27221e);
    text-align: var(--a9-gallery-title-align, center);
}

/* 中间放大动效:留出上下空间避免放大时被裁;以中心为变换原点 */
.a9-czoom {
    padding-block: 24px;
}

.a9-czoom .a9-marquee__track>* {
    transform-origin: center center;
    will-change: transform;
}

/* 关掉横滑图片的悬停上浮(data-a9-anim=lift 等),消除卡顿;中间放大的 inline transform 仍优先生效 */
.a9-marquee .a9-marquee__track>*:hover {
    transform: none;
}


/* ============================================================
   A9 页头 · lacemade 风格增强
   ============================================================ */
.site-header {
    font-family: var(--font-body);
}

.site-header .brand,
.site-header .brand-mark {
    font-family: var(--font-display);
}

.home-page .site-header.is-overlay.is-hover-reveal:not(.is-scrolled):hover {
    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);
}

.home-page .site-header.is-overlay.is-top-line:not(.is-scrolled) {
    border-bottom-color: rgba(248, 239, 226, 0.5);
}

.a9-header-action .a9-action-ico {
    display: none;
}

.site-header.is-actions-icon .a9-header-action .a9-action-ico,
.site-header.is-actions-both .a9-header-action .a9-action-ico {
    display: inline-block;
    vertical-align: middle;
}

.site-header.is-actions-icon .a9-header-action .a9-action-text {
    display: none;
}

.site-header.is-actions-icon .header-actions {
    gap: 18px;
}

.site-header.is-actions-icon .a9-header-action,
.site-header.is-actions-both .a9-header-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.site-header .a9-cart-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 购物车去重:隐藏 cart-bubble 自带的袋子图标(保留数量徽章);袋子统一用描边款 */
.site-header .cart-bubble svg {
    display: none;
}

.site-header .a9-mobile-bar .cart-bubble {
    min-width: 0;
}

@media (max-width: 980px) {
    .site-header .menu-toggle {
        order: -1;
        justify-self: start;
    }

    /* 手机端 Logo 居中:三列网格(汉堡 | Logo | 图标条),Logo 走文档流(不再绝对定位)。
     ① 三者天然同一行、由 align-items:center 垂直对齐;
     ② Logo 在流内 → 页头随 Logo 高度自适应、不再裁切(min-height 兜底高度,小 Logo 时
        align-content:center 让单行 bar 上下留白居中);
     ③ 展开汉堡菜单:导航/操作落到下方新行(base 已设 grid-column:1/-1),Logo 留在第一行不乱跑。 */
    .site-header.is-logo-center-m {
        grid-template-columns: 1fr auto 1fr;
        min-height: var(--a9-header-height, 64px);
        align-content: center;
    }

    .site-header.is-logo-center-m .menu-toggle {
        grid-row: 1;
        grid-column: 1;
        justify-self: start;
    }

    .site-header.is-logo-center-m .brand {
        grid-row: 1;
        position: static;
        grid-column: 2;
        justify-self: center;
    }

    .site-header.is-logo-center-m .a9-mobile-bar {
        grid-row: 1;
        position: static;
        grid-column: 3;
        justify-self: end;
        top: auto;
        right: auto;
        height: auto;
    }

    /* 手机端 Logo 大小:用单独的 --a9-logo-height-m(自动=电脑端 ×0.72) */
    .site-header .brand-logo-img {
        height: var(--a9-logo-height-m, calc(var(--a9-logo-height) * 0.72));
    }
}

/* Logo 居中 + 导航居中 = 两层式(Logo 居中在上、导航居中在下;操作图标右侧居中)。
   一行里两个都居中做不到,故用两层。仅完整导航电脑端 ≥981px。 */
@media (min-width: 981px) {
    .site-header.is-logo-center:not(.is-nav-left) {
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto auto;
        row-gap: 6px;
    }

    .site-header.is-logo-center:not(.is-nav-left) .brand-mark {
        grid-row: 1;
        grid-column: 2;
        justify-self: center;
    }

    .site-header.is-logo-center:not(.is-nav-left) .primary-nav {
        grid-row: 2;
        grid-column: 1 / -1;
        justify-self: center;
    }

    .site-header.is-logo-center:not(.is-nav-left) .header-actions {
        grid-row: 1 / -1;
        grid-column: 3;
        justify-self: end;
        align-self: center;
    }
}