/* ============================================================
   版面风格样式表
   1. 首页爆款推荐的 5 种排版
   2. 整站 8 种版面风格（classic 为 app.css 默认值）
   3. 后台「商城设置」里的版面选择器
   4. 首页推荐商家的 5 种排版
   依赖 app.css 中的 CSS 变量，须在 app.css 之后引入。

   版面之间的差异只走三件事：容器宽度、字体族与字号阶梯、装饰（描边/圆角/阴影）。
   所有版面共用下面 --token 默认值，取值等于 classic 现在的观感，
   因此新增版面只需要覆盖 token，不必再逐条重写整站规则。
   ============================================================ */

/* ------------------------------------------------------------
   一、爆款推荐排版
   ------------------------------------------------------------ */
.section-head { flex-wrap: wrap; }

.hot-layout-label {
    order: 3;
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
    background: #eef1f4;
    border-radius: 999px;
    padding: 3px 10px;
}

/* 大图焦点：一条横向焦点带压住整块，其余商品在下方按标准网格铺开。
   焦点带不再纵向跨两行，避免半屏大卡和正文之间出现大片空白。 */
.hot-magazine { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.hot-feature {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(200px, 34%) minmax(0, 1fr);
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.hot-feature:hover { box-shadow: var(--shadow-lg); }
.hot-feature-media { position: relative; display: block; aspect-ratio: 4 / 3; max-height: 300px; background: #f2f4f6; overflow: hidden; }
.hot-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.hot-feature-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    align-items: center;
    gap: 0 28px;
    padding: 24px 28px;
    min-width: 0;
}
.hot-feature-main { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.hot-feature-side {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding-left: 28px;
    border-left: 1px solid var(--border);
}
.hot-feature-side .inline-form { width: 100%; }
.hot-feature-side .btn { width: 100%; }
.hot-feature-link { display: block; text-align: center; font-size: 12px; letter-spacing: .5px; color: var(--muted); }
.hot-feature-link:hover { color: var(--brand); }
.hot-feature-kicker {
    align-self: flex-start;
    font-size: 11px;
    letter-spacing: 1px;
    color: #fff;
    background: var(--accent);
    border-radius: 999px;
    padding: 2px 10px;
}
.hot-feature-body h3 { font-size: 20px; font-weight: 600; line-height: 1.4; margin: 0; }
.hot-feature-body h3 a { color: var(--text); }
.hot-feature-body h3 a:hover { color: var(--brand); }
.hot-feature-brief {
    margin: 0;
    max-width: 52ch;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hot-feature-price { margin-top: 2px; }
.hot-feature-price strong { font-size: 24px; }

/* 横向清单：两列紧凑行，价格与按钮收在正文下方，不再横跨整屏留一大段空白 */
.hot-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 12px 16px; }
.hot-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 14px;
    row-gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    transition: border-color .15s, box-shadow .15s;
}
.hot-row:hover { border-color: var(--brand-2); box-shadow: var(--shadow); }
.hot-row-media { grid-row: 1 / span 2; flex: none; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; background: #f2f4f6; }
.hot-row-media img { width: 100%; height: 100%; object-fit: cover; }
.hot-row-body { grid-column: 2; grid-row: 1; min-width: 0; }
.hot-row-body h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; line-height: 1.45; }
.hot-row-body h3 a { color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hot-row-body h3 a:hover { color: var(--brand); }
.hot-row-brief {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hot-row-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hot-row-viewed { font-size: 12px; color: var(--muted); }
.tag-hot { background: var(--accent-light); color: var(--accent); }
.tag-ship { background: #eef6ee; color: #2f7d4f; }
.tag-out { background: #f1f3f5; color: #6b7480; }
.hot-row-side {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.hot-row-side .product-card-price strong { font-size: 18px; }
.hot-row-actions { display: flex; align-items: center; gap: 10px; }
.hot-row-actions .btn-outline { border-color: transparent; background: transparent; color: var(--muted); padding: 6px 2px; }
.hot-row-actions .btn-outline:hover { color: var(--brand); border-color: transparent; background: transparent; }

/* 热销榜单：双列带 TOP 序号，序号与缩略图收小，让位给商品名 */
.hot-rank { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 10px 16px; list-style: none; margin: 0; padding: 0; }
.hot-rank-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.hot-rank-index {
    flex: 0 0 34px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: .5px;
}
.hot-rank-item.is-top .hot-rank-index { color: #fff; background: #98a3ad; border-radius: 8px; padding: 6px 0; font-size: 11px; }
.hot-rank-item.is-top:nth-child(1) .hot-rank-index { background: #d4a017; }
.hot-rank-item.is-top:nth-child(2) .hot-rank-index { background: #a8763f; }
.hot-rank-item.is-top:nth-child(3) .hot-rank-index { background: #8f6b4d; }
.hot-rank-media { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: #f2f4f6; }
.hot-rank-media img { width: 100%; height: 100%; object-fit: cover; }
.hot-rank-body { flex: 1; min-width: 0; }
.hot-rank-body h3 { margin: 0 0 4px; font-size: 14px; font-weight: 500; line-height: 1.45; }
.hot-rank-body h3 a { color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hot-rank-body h3 a:hover { color: var(--brand); }
.hot-rank-note { margin: 4px 0 0; font-size: 12px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hot-rank-form { flex: 0 0 auto; margin: 0; }

/* 横向滑动 */
.hot-scroller-wrap { position: relative; }
.hot-scroller {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 2px 14px;
    scrollbar-width: thin;
}
.hot-scroller-cell { flex: 0 0 208px; scroll-snap-align: start; }
.hot-scroller-cell .product-card { height: 100%; }
.hot-scroller-arrow {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 3;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow);
}
.hot-scroller-arrow:hover { color: var(--brand); border-color: var(--brand); }
.hot-scroller-arrow.prev { left: -12px; }
.hot-scroller-arrow.next { right: -12px; }
.hot-scroller-arrow[disabled] { opacity: .35; cursor: default; }

/* 自动滚动：两组等宽格子首尾相接，轨道整体左移半格宽即完成一次循环。 */
.hot-scroller-track { display: flex; gap: 14px; width: max-content; }
.hot-scroller-cells { display: flex; gap: 14px; }
.hot-scroller-cells--clone { display: none; }
@keyframes hot-scroll {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc(-50% - 7px), 0, 0); }
}
@media (prefers-reduced-motion: no-preference) {
    .hot-scroller { overflow-x: hidden; scroll-snap-type: none; }
    .hot-scroller-cells--clone { display: flex; }
    .hot-scroller-track {
        animation: hot-scroll var(--hot-scroll-sec, 40s) linear infinite;
        will-change: transform;
    }
    /* 悬停或键盘聚焦时停下来让人看清、点得准；指针离开后接着走。 */
    .hot-scroller:hover .hot-scroller-track,
    .hot-scroller:focus-within .hot-scroller-track { animation-play-state: paused; }
    .hot-scroller-arrow { display: none; }
}

/* ------------------------------------------------------------
   二、整站版面 · 公共 token 与骨架规则
   ------------------------------------------------------------ */
body[class*="layout-"] {
    --page-max: 1200px;
    --page-gutter: 32px;
    --display-font: inherit;
    --display-weight: 600;
    --display-tracking: .5px;
    --brand-tracking: .5px;
    --nav-font: inherit;
    --nav-size: 14px;
    --nav-tracking: 0px;
    --h-hero: 40px;
    --h-sec: 22px;
    --h-card: 14px;
    --card-font: inherit;
    --card-weight: 500;
    --shop-title: 17px;
}

@media (min-width: 561px) {
    body[class*="layout-"] .container { width: min(var(--page-max), calc(100% - var(--page-gutter))); }
}

body[class*="layout-"] .brand-text strong {
    font-family: var(--display-font);
    font-weight: var(--display-weight);
    letter-spacing: var(--brand-tracking);
}
body[class*="layout-"] .nav-inner > a {
    font-family: var(--nav-font);
    font-size: var(--nav-size);
    letter-spacing: var(--nav-tracking);
}
body[class*="layout-"] .hero h1 {
    font-family: var(--display-font);
    font-size: var(--h-hero);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
}
body[class*="layout-"] .carousel-caption h2 {
    font-family: var(--display-font);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
}
body[class*="layout-"] .section-head h2 {
    font-family: var(--display-font);
    font-size: var(--h-sec);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
}
body[class*="layout-"] .product-card-body h3 {
    font-family: var(--card-font);
    font-size: var(--h-card);
    font-weight: var(--card-weight);
}
body[class*="layout-"] .hot-feature-body h3 {
    font-family: var(--display-font);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
}
body[class*="layout-"] .rec-shop-body h3 {
    font-family: var(--display-font);
    font-size: var(--shop-title);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
}
body[class*="layout-"] .panel-title,
body[class*="layout-"] .product-detail h1 {
    font-family: var(--display-font);
    letter-spacing: var(--display-tracking);
}

/* ------------------------------------------------------------
   三、逐套版面
   ------------------------------------------------------------ */

/* ---------- 综合商城 marketplace：宽栏 + 彩色导航 + 首页分类竖栏 ---------- */
body.layout-marketplace {
    --page-max: 1240px;
    --page-gutter: 36px;
    --h-hero: 34px;
    --display-tracking: .5px;
}
body.layout-marketplace .topbar { background: var(--brand); border-bottom: 0; color: rgba(255, 255, 255, .88); }
body.layout-marketplace .topbar a { color: #fff; }
body.layout-marketplace .topbar a:hover { color: #fff; text-decoration: underline; }
body.layout-marketplace .topbar .sep { color: rgba(255, 255, 255, .4); }
body.layout-marketplace .header-main { padding: 18px 0 14px; gap: 26px; }
body.layout-marketplace .brand-text strong { font-size: 21px; }
body.layout-marketplace .header-search { flex: 1 1 auto; max-width: 620px; border-radius: 6px; }
body.layout-marketplace .header-search input { padding: 11px 18px; font-size: 15px; }
body.layout-marketplace .header-search button { padding: 0 30px; font-size: 15px; }
body.layout-marketplace .header-cart { border-radius: 6px; padding: 9px 16px; font-weight: 500; }
body.layout-marketplace .main-nav { background: var(--brand); border-top: 0; box-shadow: var(--shadow); }
body.layout-marketplace .nav-inner { gap: 2px; }
body.layout-marketplace .nav-inner > a { color: rgba(255, 255, 255, .92); border-bottom: 0; border-radius: 6px; padding: 11px 14px; }
body.layout-marketplace .nav-inner > a:hover,
body.layout-marketplace .nav-inner > a.active { background: rgba(255, 255, 255, .16); color: #fff; }
body.layout-marketplace .nav-category-toggle { border-radius: 6px 0 0 6px; }
body.layout-marketplace .category-dropdown { border-radius: 0 0 10px 10px; }
body.layout-marketplace .product-grid { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; }
body.layout-marketplace .product-card { border: 1px solid var(--border); }
body.layout-marketplace .product-card:hover { border-color: var(--brand-2); transform: translateY(-2px); }
body.layout-marketplace .site-footer { background: #16202a; }

.home-market { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 20px; }
.home-market-stage { min-width: 0; }
.home-market .home-carousel,
.home-market .hero { margin-top: 0; }
.home-rail {
    position: sticky;
    top: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 0 6px;
    box-shadow: var(--shadow);
}
.home-rail-title { margin: 0 14px 6px; font-size: 14px; font-weight: 600; }
.home-rail-list { list-style: none; margin: 0; padding: 0; }
.home-rail-item { padding: 6px 14px 8px; }
.home-rail-item + .home-rail-item { border-top: 1px solid var(--border); }
.home-rail-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text); font-size: 13px; font-weight: 500; }
.home-rail-link:hover { color: var(--brand); }
.home-rail-arrow { color: var(--muted); }
.home-rail-sub { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; }
.home-rail-sub a { font-size: 12px; color: var(--muted); }
.home-rail-sub a:hover { color: var(--brand); }
.home-rail-empty { padding: 6px 0; }
.home-rail-all { display: block; margin: 10px 14px 4px; font-size: 13px; }

/* ---------- 极简留白 minimal：窄栏、直角、去阴影，字重偏轻 ---------- */
body.layout-minimal {
    --page-max: 1000px;
    --page-gutter: 40px;
    --display-weight: 500;
    --display-tracking: 1px;
    --brand-tracking: 2px;
    --nav-size: 13px;
    --nav-tracking: .5px;
    --h-hero: 30px;
    --h-sec: 16px;
    --h-card: 13px;
    --card-weight: 400;
    --shop-title: 15px;
    --radius: 2px;
}
body.layout-minimal { background: #fff; }
body.layout-minimal .topbar { display: none; }
body.layout-minimal .site-header { background: #fff; box-shadow: none; border-bottom: 1px solid var(--border); }
body.layout-minimal .header-main { padding: 24px 0; gap: 30px; }
body.layout-minimal .brand-mark { border-radius: 4px; }
body.layout-minimal .brand-text strong { font-weight: 500; }
body.layout-minimal .header-search { border: 0; border-bottom: 1px solid #cfd6dd; border-radius: 0; max-width: 400px; }
body.layout-minimal .header-search input { background: transparent; padding: 9px 0; }
body.layout-minimal .header-search button { background: var(--text); color: #fff; padding: 0 18px; font-size: 13px; letter-spacing: 2px; }
body.layout-minimal .header-search button:hover { background: #000; color: #fff; }
body.layout-minimal .header-cart { border: 0; padding: 8px 0; }
body.layout-minimal .main-nav { background: #fff; border-top: 0; }
body.layout-minimal .nav-inner { gap: 22px; }
body.layout-minimal .nav-inner > a { border-bottom: 0; padding: 12px 0; color: #4b5563; }
body.layout-minimal .nav-inner > a.active { color: var(--text); font-weight: 600; box-shadow: inset 0 -1px 0 var(--text); }
body.layout-minimal .nav-category-toggle { background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 0; padding: 10px 14px; letter-spacing: 1px; }
body.layout-minimal .nav-category-toggle:hover { background: transparent; color: var(--brand); border-color: var(--brand); }
body.layout-minimal .category-dropdown { border-radius: 0; border: 1px solid var(--border); box-shadow: none; }
body.layout-minimal .hero { border-radius: 0; padding: 52px 0; background: #f7f8f9; color: var(--text); }
body.layout-minimal .hero-eyebrow,
body.layout-minimal .hero-sub { color: var(--muted); opacity: 1; }
body.layout-minimal .hero .btn-primary { background: var(--text); color: #fff; }
body.layout-minimal .hero .btn-primary:hover { background: #000; color: #fff; }
body.layout-minimal .home-carousel { border-radius: 0; box-shadow: none; }
body.layout-minimal .section { margin-top: 44px; }
body.layout-minimal .section-head { border-bottom: 1px solid var(--border); padding-bottom: 10px; }
body.layout-minimal .section-head h2 { padding-left: 0; }
body.layout-minimal .section-head h2::before { display: none; }
body.layout-minimal .hot-layout-label,
body.layout-minimal .shops-layout-label { background: transparent; color: #9aa3ad; letter-spacing: 1px; }
body.layout-minimal .product-grid { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 26px 20px; }
body.layout-minimal .product-card { background: transparent; box-shadow: none; border-radius: 0; }
body.layout-minimal .product-card:hover { transform: none; box-shadow: none; }
body.layout-minimal .product-card-media { aspect-ratio: 4 / 5; border-radius: 0; background: #f4f5f6; }
body.layout-minimal .badge { border-radius: 0; padding: 2px 6px; }
body.layout-minimal .product-card-body { padding: 10px 0 0; gap: 4px; }
body.layout-minimal .product-card-price strong { color: var(--text); font-size: 15px; font-weight: 500; }
body.layout-minimal .product-card-form .btn { background: transparent; border: 1px solid var(--border); border-radius: 0; color: var(--muted); font-size: 12px; }
body.layout-minimal .product-card-form .btn:hover { border-color: var(--text); color: var(--text); background: transparent; }
body.layout-minimal .site-footer { background: #fff; color: var(--muted); border-top: 1px solid var(--border); }
body.layout-minimal .footer-col h4 { color: var(--text); font-weight: 500; letter-spacing: 1px; }
body.layout-minimal .footer-col p,
body.layout-minimal .footer-col a { color: var(--muted); }
body.layout-minimal .footer-bottom { border-top-color: var(--border); }
body.layout-minimal .hot-feature,
body.layout-minimal .hot-row,
body.layout-minimal .hot-rank-item { box-shadow: none; border-radius: 0; }
body.layout-minimal .hot-feature-media,
body.layout-minimal .hot-row-media,
body.layout-minimal .hot-rank-media { border-radius: 0; }

/* ---------- 杂志陈列 magazine：衬线标题 + 米白底 + 通栏分隔线 ---------- */
body.layout-magazine {
    --page-max: 1080px;
    --display-font: Georgia, "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
    --card-font: Georgia, "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
    --nav-font: Georgia, "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
    --display-weight: 400;
    --display-tracking: 1px;
    --brand-tracking: 1px;
    --nav-size: 15px;
    --nav-tracking: 1px;
    --h-hero: 32px;
    --h-sec: 24px;
    --h-card: 15px;
    --card-weight: 400;
    --shop-title: 17px;
    --radius: 2px;
}
body.layout-magazine { background: #f7f5f1; }
body.layout-magazine .topbar { background: #2b2622; border-bottom: 0; color: #b6ada2; }
body.layout-magazine .topbar a { color: #d8d1c7; }
body.layout-magazine .topbar .sep { color: #4a443d; }
body.layout-magazine .site-header { background: #fffdf9; box-shadow: none; border-bottom: 1px solid #e6e0d5; }
body.layout-magazine .brand-text strong { font-size: 22px; }
body.layout-magazine .brand-text small { letter-spacing: 1px; color: #8d8477; }
body.layout-magazine .header-search { border-color: #2b2622; border-radius: 0; background: #fffdf9; }
body.layout-magazine .header-search button { background: #2b2622; }
body.layout-magazine .header-cart { border-radius: 0; border-color: #d9d2c6; }
body.layout-magazine .main-nav { background: #fffdf9; }
body.layout-magazine .nav-inner > a { border-bottom: 0; color: #4a443d; }
body.layout-magazine .nav-inner > a.active { box-shadow: inset 0 -2px 0 #2b2622; color: #2b2622; }
body.layout-magazine .nav-category-toggle { background: #2b2622; border-radius: 0; }
body.layout-magazine .nav-category-toggle:hover { background: #443c34; }
body.layout-magazine .hero { border-radius: 0; background: #2b2622; padding: 56px 48px; }
body.layout-magazine .hero-media { border-radius: 0; }
body.layout-magazine .home-carousel { border-radius: 0; box-shadow: none; }
body.layout-magazine .section { margin-top: 42px; }
body.layout-magazine .section-head { border-bottom: 2px solid #2b2622; padding-bottom: 10px; }
body.layout-magazine .section-head h2 { padding-left: 0; }
body.layout-magazine .section-head h2::before { display: none; }
body.layout-magazine .hot-layout-label,
body.layout-magazine .shops-layout-label { background: transparent; color: #8d8477; letter-spacing: 1px; }
body.layout-magazine .product-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
body.layout-magazine .product-card { background: #fffdf9; border: 1px solid #e6e0d5; border-radius: 0; box-shadow: none; }
body.layout-magazine .product-card:hover { box-shadow: 0 14px 30px rgba(43, 38, 34, .12); transform: translateY(-2px); }
body.layout-magazine .product-card-media { background: #efeae1; aspect-ratio: 3 / 4; }
body.layout-magazine .product-card-price strong { color: #2b2622; }
body.layout-magazine .badge { border-radius: 0; }
body.layout-magazine .site-footer { background: #211d19; }
body.layout-magazine .hot-feature,
body.layout-magazine .hot-row,
body.layout-magazine .hot-rank-item { background: #fffdf9; border-color: #e6e0d5; border-radius: 0; box-shadow: none; }
body.layout-magazine .hot-feature-media,
body.layout-magazine .hot-row-media,
body.layout-magazine .hot-rank-media { background: #efeae1; border-radius: 0; }
body.layout-magazine .rec-shop-card,
body.layout-magazine .rec-shop-tile,
body.layout-magazine .rec-shop-line,
body.layout-magazine .rec-shop-window { background: #fffdf9; border-color: #e6e0d5; border-radius: 0; box-shadow: none; }

/* ---------- 暗色精品 boutique：深色底 + 主题色点缀 ---------- */
body.layout-boutique {
    --page-max: 1200px;
    --display-tracking: .5px;
    --h-hero: 34px;
    --h-sec: 20px;
    --bg: #0d1317;
    --surface: #151e24;
    --text: #e8eef2;
    --muted: #8ea0ad;
    --border: #26333b;
    --input-bg: #111a20;
    --input-border: #33454f;
    --brand-light: #1b262d;
    --shadow: 0 2px 14px rgba(0, 0, 0, .5);
    --shadow-lg: 0 18px 46px rgba(0, 0, 0, .6);
}
body.layout-boutique .topbar { background: #0a0f13; border-bottom-color: var(--border); color: var(--muted); }
body.layout-boutique .topbar a { color: #a9bac6; }
body.layout-boutique .main-nav,
body.layout-boutique .site-header,
body.layout-boutique .panel,
body.layout-boutique .table-wrap,
body.layout-boutique .product-detail,
body.layout-boutique .product-section,
body.layout-boutique .checkout-summary,
body.layout-boutique .empty-state,
body.layout-boutique .auth-panel,
body.layout-boutique .product-card,
body.layout-boutique .hot-feature,
body.layout-boutique .hot-row,
body.layout-boutique .hot-rank-item,
body.layout-boutique .header-search { background: var(--surface); }
body.layout-boutique .header-search input,
body.layout-boutique .panel,
body.layout-boutique .empty-state,
body.layout-boutique .product-detail,
body.layout-boutique .checkout-summary,
body.layout-boutique .auth-panel { color: var(--text); }
body.layout-boutique .table th,
body.layout-boutique .product-attributes th { background: #1a242b; color: var(--muted); }
body.layout-boutique .table td { border-bottom-color: var(--border); }
body.layout-boutique .table tbody tr:hover,
body.layout-boutique .qty-control button,
body.layout-boutique .btn { background: #22303a; color: var(--text); }
body.layout-boutique .btn { border-color: #2e3f49; }
body.layout-boutique .btn:hover { background: #2b3d48; color: var(--text); }
body.layout-boutique .btn-primary { background: var(--brand-2); color: #f2f7fb; }
body.layout-boutique .btn-primary:hover { background: #3c74a6; color: #fff; }
body.layout-boutique .btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
body.layout-boutique .btn-outline:hover { color: var(--brand-2); border-color: var(--brand-2); }
body.layout-boutique .btn-block-disabled,
body.layout-boutique .product-card-form .btn { background: var(--brand-2); color: #f2f7fb; }
body.layout-boutique .qty-control button { color: var(--text); }
body.layout-boutique .product-card-media,
body.layout-boutique .hot-feature-media,
body.layout-boutique .hot-row-media,
body.layout-boutique .hot-rank-media,
body.layout-boutique .product-main-image,
body.layout-boutique .product-thumb { background: #1d272e; }
body.layout-boutique .product-thumb { color: var(--text); }
body.layout-boutique .product-card { border: 1px solid var(--border); }
body.layout-boutique .product-grid { grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 18px; }
body.layout-boutique .nav-inner > a { color: #b8c6d0; }
body.layout-boutique .nav-inner > a:hover,
body.layout-boutique .nav-inner > a.active,
body.layout-boutique .nav-inner .nav-home { color: var(--brand-2); }
body.layout-boutique .category-dropdown { background: var(--surface); border-color: var(--border); }
body.layout-boutique .category-dropdown-title,
body.layout-boutique .category-dropdown-group a { color: var(--text); }
body.layout-boutique .hero { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
body.layout-boutique .hero .btn-primary,
body.layout-boutique .btn-light { background: var(--brand-2); color: #0b1114; }
body.layout-boutique .alert-success { background: #10231c; color: #7fd4ab; border-color: #1d4636; }
body.layout-boutique .alert-error { background: #2a1618; color: #f0a4a0; border-color: #4d2429; }
body.layout-boutique .checkout-virtual-note,
body.layout-boutique .card-item { background: #1a242b; border-color: var(--border); }
body.layout-boutique .status-tag { background: #22303a; color: var(--brand-2); }
body.layout-boutique .tag-primary { background: #1b2a34; color: #7ab6e8; }
body.layout-boutique .tag-hot { background: #2c2318; color: var(--accent); }
body.layout-boutique .tag-ship { background: #16281d; color: #79c99a; }
body.layout-boutique .tag-out { background: #22282c; color: #98a5ae; }
body.layout-boutique .hot-layout-label,
body.layout-boutique .shops-layout-label { background: #1b262d; color: #9db0bd; }
body.layout-boutique .rec-shop-card,
body.layout-boutique .rec-shop-tile,
body.layout-boutique .rec-shop-line,
body.layout-boutique .rec-shop-window { background: var(--surface); border-color: var(--border); }
body.layout-boutique .site-footer { background: #080d10; }
body.layout-boutique .footer-bottom { border-top-color: #1b2328; }
body.layout-boutique .section-head h2::before { background: var(--brand-2); }

/* ---------- 画廊留白 atelier：白底、直角、发丝描边，hover 才起阴影 ---------- */
body.layout-atelier {
    --page-max: 1120px;
    --page-gutter: 48px;
    --display-weight: 300;
    --display-tracking: 1px;
    --brand-tracking: 1.5px;
    --nav-size: 13px;
    --nav-tracking: 1px;
    --h-hero: 34px;
    --h-sec: 18px;
    --h-card: 14px;
    --card-weight: 400;
    --shop-title: 16px;
    --radius: 2px;
    --bg: #fbfbfa;
    --surface: #ffffff;
    --border: #e8e8e6;
    --shadow: 0 0 0 rgba(0, 0, 0, 0);
    --shadow-lg: 0 20px 44px rgba(28, 28, 30, .12);
}
body.layout-atelier .topbar { background: #fff; border-bottom: 1px solid var(--border); color: #8b8b88; font-size: 12px; }
body.layout-atelier .topbar a { color: #6f6f6c; }
body.layout-atelier .site-header { background: #fff; box-shadow: none; border-bottom: 1px solid var(--border); }
body.layout-atelier .header-main { padding: 26px 0; gap: 30px; }
body.layout-atelier .brand-mark { border-radius: 0; }
body.layout-atelier .brand-text strong { font-size: 18px; font-weight: 500; }
body.layout-atelier .brand-text small { letter-spacing: 1px; color: #8b8b88; }
body.layout-atelier .header-search { background: #fff; border: 1px solid var(--border); border-radius: 0; max-width: 400px; }
body.layout-atelier .header-search input { background: transparent; padding: 11px 14px; }
body.layout-atelier .header-search button { background: var(--text); color: #fff; border-radius: 0; }
body.layout-atelier .header-search button:hover { background: #000; }
body.layout-atelier .header-cart { background: transparent; border: 1px solid var(--border); border-radius: 0; color: var(--text); }
body.layout-atelier .header-cart:hover { border-color: var(--text); }
body.layout-atelier .main-nav { background: #fff; border-top: 0; }
body.layout-atelier .nav-inner { gap: 26px; }
body.layout-atelier .nav-inner > a { border-bottom: 0; padding: 13px 0; color: #6f6f6c; }
body.layout-atelier .nav-inner > a:hover { color: var(--text); }
body.layout-atelier .nav-inner > a.active { color: var(--text); font-weight: 500; box-shadow: inset 0 -1px 0 var(--text); }
body.layout-atelier .nav-inner .nav-home { color: var(--text); }
body.layout-atelier .nav-category-toggle { background: transparent; border: 1px solid var(--border); border-radius: 0; color: var(--text); letter-spacing: 1px; }
body.layout-atelier .nav-category-toggle:hover { background: transparent; border-color: var(--text); color: var(--text); }
body.layout-atelier .category-dropdown { border-radius: 0; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
body.layout-atelier .hero { border-radius: 0; border: 1px solid var(--border); background: #fff; color: var(--text); padding: 64px 48px; }
body.layout-atelier .hero-eyebrow, body.layout-atelier .hero-sub { color: #6f6f6c; opacity: 1; }
body.layout-atelier .hero-media { border-radius: 0; }
body.layout-atelier .hero .btn-primary { background: var(--text); color: #fff; }
body.layout-atelier .hero .btn-primary:hover { background: #000; color: #fff; }
body.layout-atelier .home-carousel { border-radius: 0; box-shadow: none; background: #ececea; }
body.layout-atelier .section { margin-top: 56px; }
body.layout-atelier .section-head { border-bottom: 1px solid var(--border); padding-bottom: 12px; }
body.layout-atelier .section-head h2 { padding-left: 0; color: #4a4a48; font-weight: 500; }
body.layout-atelier .section-head h2::before { display: none; }
body.layout-atelier .hot-layout-label, body.layout-atelier .shops-layout-label { background: transparent; color: #a3a3a0; letter-spacing: 1px; }
body.layout-atelier .product-grid { grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 32px 24px; }
body.layout-atelier .product-card { background: transparent; box-shadow: none; border-radius: 0; transition: transform .2s ease, box-shadow .2s ease; }
body.layout-atelier .product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
body.layout-atelier .product-card-media { aspect-ratio: 3 / 4; border-radius: 0; background: #f1f1f0; }
body.layout-atelier .product-card-body { padding: 12px 0 0; gap: 4px; }
body.layout-atelier .product-card-body h3 { min-height: 40px; }
body.layout-atelier .product-card-price strong { color: var(--text); font-size: 15px; font-weight: 500; }
body.layout-atelier .badge { border-radius: 0; }
body.layout-atelier .btn { border-radius: 0; letter-spacing: 1px; }
body.layout-atelier .panel,
body.layout-atelier .table-wrap,
body.layout-atelier .empty-state,
body.layout-atelier .auth-panel,
body.layout-atelier .product-detail,
body.layout-atelier .product-section,
body.layout-atelier .checkout-summary { box-shadow: none; border: 1px solid var(--border); border-radius: 0; }
body.layout-atelier .table th { background: #fff; color: #8b8b88; letter-spacing: 1px; font-weight: 500; }
body.layout-atelier .hot-feature,
body.layout-atelier .hot-row,
body.layout-atelier .hot-rank-item,
body.layout-atelier .rec-shop-card,
body.layout-atelier .rec-shop-tile,
body.layout-atelier .rec-shop-line,
body.layout-atelier .rec-shop-window { border-radius: 0; box-shadow: none; border-color: var(--border); }
body.layout-atelier .rec-shop-card:hover,
body.layout-atelier .rec-shop-window:hover { box-shadow: var(--shadow-lg); }
body.layout-atelier .hot-feature-media,
body.layout-atelier .hot-row-media,
body.layout-atelier .hot-rank-media,
body.layout-atelier .rec-shop-logo,
body.layout-atelier .rec-shop-tile-logo,
body.layout-atelier .rec-shop-line-logo,
body.layout-atelier .rec-shop-window-logo { border-radius: 0; background: #f1f1f0; }
body.layout-atelier .rec-shop-poster { border-radius: 0; }
body.layout-atelier .track-hero,
body.layout-atelier .express-block { border-radius: 0; box-shadow: none; border: 1px solid var(--border); background: #fff; }
body.layout-atelier .site-footer { background: #f2f2f0; color: #6f6f6c; }
body.layout-atelier .footer-col h4 { color: var(--text); font-weight: 500; letter-spacing: 1px; font-size: 13px; }
body.layout-atelier .footer-col p, body.layout-atelier .footer-col a { color: #6f6f6c; }
body.layout-atelier .footer-bottom { border-top-color: #dddcd8; }

/* ---------- 暗夜鎏金 nocturne：黑底 + 金属细描边，金属色跟随配色主题 ---------- */
body.layout-nocturne {
    --page-max: 1160px;
    --display-weight: 400;
    --display-tracking: 1.5px;
    --brand-tracking: 2px;
    --nav-size: 13.5px;
    --nav-tracking: 1px;
    --h-hero: 32px;
    --h-sec: 20px;
    --shop-title: 16px;
    --gold: var(--accent);
    --bg: #0b0b0d;
    --surface: #141418;
    --text: #eceae6;
    --muted: #938f88;
    --border: #2a2a31;
    --input-bg: #101014;
    --input-border: #3a3a44;
    --input-border-hover: var(--gold);
    --brand-light: #1d1c22;
    --shadow: 0 2px 16px rgba(0, 0, 0, .55);
    --shadow-lg: 0 22px 50px rgba(0, 0, 0, .68);
}
body.layout-nocturne .topbar { background: #08080a; border-bottom-color: #1d1d22; color: #7d7a74; }
body.layout-nocturne .topbar a { color: #a9a59d; }
body.layout-nocturne .topbar a:hover { color: var(--gold); }
body.layout-nocturne .topbar .sep { color: #2e2e34; }
body.layout-nocturne .site-header { background: #101013; box-shadow: none; border-bottom: 1px solid #1f1f24; }
body.layout-nocturne .brand-text small { color: var(--gold); letter-spacing: 1px; }
body.layout-nocturne .main-nav,
body.layout-nocturne .panel,
body.layout-nocturne .table-wrap,
body.layout-nocturne .empty-state,
body.layout-nocturne .auth-panel,
body.layout-nocturne .product-detail,
body.layout-nocturne .product-section,
body.layout-nocturne .checkout-summary,
body.layout-nocturne .product-card,
body.layout-nocturne .hot-feature,
body.layout-nocturne .hot-row,
body.layout-nocturne .hot-rank-item,
body.layout-nocturne .rec-shop-card,
body.layout-nocturne .rec-shop-tile,
body.layout-nocturne .rec-shop-line,
body.layout-nocturne .rec-shop-window,
body.layout-nocturne .track-hero,
body.layout-nocturne .express-block,
body.layout-nocturne .header-search { background: var(--surface); }
body.layout-nocturne .nav-inner > a { color: #a9a59d; border-bottom-color: transparent; }
body.layout-nocturne .nav-inner > a:hover,
body.layout-nocturne .nav-inner > a.active { color: var(--gold); box-shadow: inset 0 -1px 0 var(--gold); }
body.layout-nocturne .nav-inner .nav-home { color: var(--gold); }
body.layout-nocturne .header-search { border: 1px solid #2a2a31; }
body.layout-nocturne .header-search input,
body.layout-nocturne .panel,
body.layout-nocturne .empty-state,
body.layout-nocturne .product-detail,
body.layout-nocturne .checkout-summary,
body.layout-nocturne .auth-panel { color: var(--text); }
body.layout-nocturne .header-search button,
body.layout-nocturne .btn-primary { background: var(--gold); color: #12100b; }
body.layout-nocturne .header-search button:hover,
body.layout-nocturne .btn-primary:hover { filter: brightness(.92); color: #12100b; }
body.layout-nocturne .btn { background: #1d1d23; border-color: #2a2a31; color: var(--text); }
body.layout-nocturne .btn:hover { background: #25252c; color: var(--text); }
body.layout-nocturne .btn-outline { background: transparent; border-color: #35353d; color: var(--text); }
body.layout-nocturne .btn-outline:hover { border-color: var(--gold); color: var(--gold); }
body.layout-nocturne .section-head h2::before { background: var(--gold); }
body.layout-nocturne .hot-layout-label,
body.layout-nocturne .shops-layout-label { background: #1d1d23; color: #9c988f; }
body.layout-nocturne .product-card { border: 1px solid #23232a; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
body.layout-nocturne .product-card:hover { border-color: var(--gold); transform: translateY(-3px); }
body.layout-nocturne .product-card-media,
body.layout-nocturne .hot-feature-media,
body.layout-nocturne .hot-row-media,
body.layout-nocturne .hot-rank-media,
body.layout-nocturne .product-main-image,
body.layout-nocturne .product-thumb,
body.layout-nocturne .rec-shop-logo,
body.layout-nocturne .rec-shop-tile-logo,
body.layout-nocturne .rec-shop-line-logo,
body.layout-nocturne .rec-shop-window-logo,
body.layout-nocturne .rec-shop-poster-logo { background: #1b1b20; }
body.layout-nocturne .product-card-price strong { color: var(--gold); }
body.layout-nocturne .table th { background: #1a1a20; color: var(--gold); }
body.layout-nocturne .table td { border-bottom-color: #23232a; }
body.layout-nocturne .table tbody tr:hover { background: #191920; }
body.layout-nocturne .category-dropdown { background: var(--surface); border-color: #2a2a31; }
body.layout-nocturne .category-dropdown-title,
body.layout-nocturne .category-dropdown-group a { color: var(--text); }
body.layout-nocturne .hero { background: linear-gradient(135deg, #131317, #0b0b0d 62%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
body.layout-nocturne .home-carousel { background: #131317; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
body.layout-nocturne .status-tag { background: #1d1d23; color: var(--gold); }
body.layout-nocturne .alert { background: #17171c; border-color: #2a2a31; color: #cfcac2; }
body.layout-nocturne .alert-success { background: #14201a; color: #8ed7ab; border-color: #234032; }
body.layout-nocturne .alert-error { background: #241618; color: #efa9a4; border-color: #46262a; }
body.layout-nocturne .timeline li { border-bottom-color: #23232a; }
body.layout-nocturne .code-text,
body.layout-nocturne .miniapp-panel-title { color: var(--gold); }
body.layout-nocturne .rec-shop-body h3 a:hover,
body.layout-nocturne .rec-shop-tile:hover .rec-shop-tile-name,
body.layout-nocturne .rec-shop-window:hover strong { color: var(--gold); }
body.layout-nocturne .rec-shop-card:hover,
body.layout-nocturne .rec-shop-line:hover,
body.layout-nocturne .rec-shop-tile:hover { border-color: var(--gold); }
body.layout-nocturne .rec-shop-poster.is-plain { background-image: linear-gradient(135deg, #1c1c22, #33301f); }
body.layout-nocturne .rec-shop-logo span,
body.layout-nocturne .rec-shop-tile-letter,
body.layout-nocturne .rec-shop-line-logo span { background: #26241c; color: var(--gold); }
body.layout-nocturne .site-footer { background: #08080a; color: #85827c; }
body.layout-nocturne .footer-col h4 { color: var(--gold); letter-spacing: 1px; }
body.layout-nocturne .footer-bottom { border-top-color: #1d1d22; }

/* ---------- 东方雅集 manor：宣纸米白、宋体标题、双线分隔，印色跟随主题 ---------- */
body.layout-manor {
    --page-max: 1080px;
    --display-font: Georgia, "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
    --card-font: Georgia, "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
    --nav-font: Georgia, "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
    --display-weight: 400;
    --display-tracking: 1px;
    --brand-tracking: 1.5px;
    --nav-size: 15px;
    --nav-tracking: 1px;
    --h-hero: 30px;
    --h-sec: 22px;
    --h-card: 15px;
    --card-weight: 400;
    --shop-title: 17px;
    --seal: var(--accent);
    --radius: 3px;
    --bg: #f6f2ea;
    --surface: #fffdf8;
    --text: #2a2724;
    --muted: #8a8073;
    --border: #e3dccd;
    --input-bg: #fffdf8;
    --brand-light: #f1ece1;
    --shadow: 0 2px 12px rgba(60, 48, 32, .08);
    --shadow-lg: 0 18px 38px rgba(60, 48, 32, .16);
}
body.layout-manor .topbar { background: #2a2724; border-bottom: 0; color: #a99f8f; }
body.layout-manor .topbar a { color: #d6cfc2; }
body.layout-manor .topbar a:hover { color: #fff; }
body.layout-manor .topbar .sep { color: #4a443c; }
body.layout-manor .site-header { background: var(--surface); box-shadow: none; border-bottom: 3px double #d8cfbe; }
body.layout-manor .brand-text strong { font-size: 22px; }
body.layout-manor .brand-text small { font-family: var(--display-font); color: #a3988a; }
body.layout-manor .header-search { border-radius: 2px; background: #fff; }
body.layout-manor .header-cart { border-radius: 2px; }
body.layout-manor .main-nav { background: var(--surface); }
body.layout-manor .nav-inner { gap: 6px; }
body.layout-manor .nav-inner > a { color: #4c463f; }
body.layout-manor .nav-inner > a.active { color: var(--seal); border-bottom-color: var(--seal); }
body.layout-manor .nav-inner .nav-home { color: var(--seal); }
body.layout-manor .nav-category-toggle { border-radius: 2px; }
body.layout-manor .hero { border-radius: 2px; padding: 56px 44px; }
body.layout-manor .hero-eyebrow { color: #c9b7a4; }
body.layout-manor .hero-media { border-radius: 2px; }
body.layout-manor .section { margin-top: 42px; }
body.layout-manor .section-head { border-bottom: 1px solid #d8cfbe; padding-bottom: 10px; }
body.layout-manor .section-head h2 { padding-left: 0; }
body.layout-manor .section-head h2::before { display: none; }
body.layout-manor .hot-layout-label, body.layout-manor .shops-layout-label { background: #f1ece1; color: var(--seal); }
body.layout-manor .product-grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 22px; }
body.layout-manor .product-card { background: var(--surface); border: 1px solid var(--border); border-radius: 2px; box-shadow: none; }
body.layout-manor .product-card:hover { border-color: #cbbfa9; box-shadow: var(--shadow-lg); }
body.layout-manor .product-card-media { aspect-ratio: 4 / 5; background: #f3eee3; border-radius: 2px 2px 0 0; }
body.layout-manor .badge { border-radius: 2px; }
body.layout-manor .btn { letter-spacing: 1px; }
body.layout-manor .panel,
body.layout-manor .table-wrap,
body.layout-manor .empty-state,
body.layout-manor .auth-panel,
body.layout-manor .product-detail,
body.layout-manor .product-section,
body.layout-manor .checkout-summary { border: 1px solid var(--border); border-radius: 2px; box-shadow: none; background: var(--surface); }
body.layout-manor .table th { background: #f5f0e5; color: #6b6153; font-family: var(--display-font); }
body.layout-manor .table td { border-bottom-color: #e8e1d3; }
body.layout-manor .table tbody tr:hover { background: #faf6ee; }
body.layout-manor .hot-feature,
body.layout-manor .hot-row,
body.layout-manor .hot-rank-item,
body.layout-manor .rec-shop-card,
body.layout-manor .rec-shop-tile,
body.layout-manor .rec-shop-line,
body.layout-manor .rec-shop-window { background: var(--surface); border-color: var(--border); border-radius: 2px; box-shadow: none; }
body.layout-manor .hot-feature-media,
body.layout-manor .hot-row-media,
body.layout-manor .hot-rank-media { background: #f3eee3; border-radius: 2px; }
body.layout-manor .rec-shop-tile-name, body.layout-manor .rec-shop-window strong { font-family: var(--display-font); }
body.layout-manor .rec-shop-logo,
body.layout-manor .rec-shop-tile-logo,
body.layout-manor .rec-shop-line-logo,
body.layout-manor .rec-shop-window-logo { background: #f3eee3; border-radius: 2px; }
body.layout-manor .rec-shop-poster { border-radius: 2px; }
body.layout-manor .rec-shop-poster.is-plain { background-image: linear-gradient(135deg, var(--brand), var(--brand-2)); }
body.layout-manor .rec-shop-card:hover, body.layout-manor .rec-shop-line:hover, body.layout-manor .rec-shop-tile:hover { border-color: #cbbfa9; }
body.layout-manor .track-hero, body.layout-manor .express-block { border: 1px solid var(--border); border-radius: 2px; box-shadow: none; background: var(--surface); }
body.layout-manor .timeline li { border-bottom-color: #ece5d8; }
body.layout-manor .site-footer { background: #241f1a; color: #b4a894; }
body.layout-manor .footer-col h4 { font-family: var(--display-font); color: #e6ddcd; letter-spacing: 2px; }
body.layout-manor .footer-bottom { border-top-color: #3a342c; }

/* ---------- 暗色版面的内页控件补全：表单、价格面板、数量步进 ---------- */
body.layout-boutique .form-field input,
body.layout-boutique .form-field select,
body.layout-boutique .form-field textarea,
body.layout-nocturne .form-field input,
body.layout-nocturne .form-field select,
body.layout-nocturne .form-field textarea { background: var(--input-bg); border-color: var(--input-border); color: var(--text); }
body.layout-boutique .form-field > span,
body.layout-nocturne .form-field > span { color: var(--muted); }
body.layout-boutique .form-field input::placeholder,
body.layout-nocturne .form-field input::placeholder { color: #6d7783; }
body.layout-boutique .product-price-box { background: linear-gradient(90deg, #16242c, rgba(0, 0, 0, 0)); }
body.layout-nocturne .product-price-box { background: linear-gradient(90deg, #201d15, rgba(0, 0, 0, 0)); }
body.layout-boutique .qty-control,
body.layout-nocturne .qty-control { border-color: var(--input-border); }
body.layout-boutique .qty-control input,
body.layout-nocturne .qty-control input { background: var(--input-bg); color: var(--text); }
body.layout-nocturne .qty-control button { background: #1c1b16; color: var(--text); }
body.layout-nocturne .product-attributes th { background: #1a1a20; color: var(--muted); border-color: var(--border); }
body.layout-nocturne .product-attributes td { border-color: var(--border); }

/* ------------------------------------------------------------
   四、响应式收敛
   ------------------------------------------------------------ */
@media (max-width: 1000px) {
    .home-market { grid-template-columns: 1fr; }
    .home-rail { position: static; }
    body.layout-marketplace .header-search { max-width: none; }
    .hot-magazine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hot-rank { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .hot-list { grid-template-columns: minmax(0, 1fr); }
    .hot-magazine { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (max-width: 720px) {
    .hot-feature { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
    .hot-feature-media { max-height: 240px; }
    .hot-feature-body { grid-template-columns: minmax(0, 1fr); gap: 14px 0; padding: 16px 18px 20px; }
    .hot-feature-side { align-self: auto; flex-direction: row; padding-left: 0; border-left: 0; border-top: 1px solid var(--border); padding-top: 14px; }
    .hot-feature-side .inline-form { flex: 1; }
    .hot-row { grid-template-columns: 84px minmax(0, 1fr); }
    .hot-row-media { width: 84px; height: 84px; }
    .hot-scroller-cell { flex-basis: 168px; }
    .hot-scroller-arrow { display: none; }
}

/* ------------------------------------------------------------
   五、后台版面选择器
   ------------------------------------------------------------ */
.layout-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 14px; }
.layout-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.layout-choice:hover { border-color: var(--brand-2); }
.layout-choice:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-light); }
.layout-choice input { margin-top: 4px; accent-color: var(--brand); flex-shrink: 0; }
.layout-choice-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.layout-choice-text strong { font-size: 14px; }
.layout-choice-text small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.layout-preview,
.hot-preview {
    flex: 0 0 62px;
    height: 46px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #f5f7f9;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}
.layout-preview .lp-bar { height: 6px; border-radius: 2px; background: #1f7a5c; }
.layout-preview .lp-hero { height: 12px; border-radius: 2px; background: #cfe3da; }
.layout-preview .lp-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; flex: 1; }
.layout-preview .lp-cells i { border-radius: 2px; background: #fff; border: 1px solid #e0e5ea; }
.layout-preview-classic .lp-bar { background: #eef1f4; }
.layout-preview-classic .lp-hero { background: #1f7a5c; }
.layout-preview-marketplace { background: #eef4fb; }
.layout-preview-marketplace .lp-bar { background: #1d63b8; }
.layout-preview-marketplace .lp-cells { grid-template-columns: repeat(5, 1fr); }
.layout-preview-minimal { background: #fff; }
.layout-preview-minimal .lp-bar { background: #fff; }
.layout-preview-minimal .lp-hero { background: #f2f4f6; height: 16px; }
.layout-preview-minimal .lp-cells i { border: 0; background: #f4f5f6; }
.layout-preview-magazine { background: #f7f5f1; }
.layout-preview-magazine .lp-bar { background: #2b2622; }
.layout-preview-magazine .lp-hero { background: #2b2622; }
.layout-preview-magazine .lp-cells i { background: #fffdf9; border-color: #e6e0d5; }
.layout-preview-boutique { background: #0d1317; border-color: #26333b; }
.layout-preview-boutique .lp-bar { background: #22303a; }
.layout-preview-boutique .lp-hero { background: #1f7a5c; }
.layout-preview-boutique .lp-cells i { background: #151e24; border-color: #26333b; }
/* 三套高端排版的缩略图 */
.layout-preview-atelier { background: #fbfbfa; }
.layout-preview-atelier .lp-bar { background: #fff; border-bottom: 1px solid #e8e8e6; }
.layout-preview-atelier .lp-hero { background: #fff; border: 1px solid #e0e0dd; }
.layout-preview-atelier .lp-cells { grid-template-columns: repeat(4, 1fr); gap: 4px; }
.layout-preview-atelier .lp-cells i { border: 0; background: #f1f1f0; border-radius: 0; }
.layout-preview-nocturne { background: #0b0b0d; border-color: #2a2a31; }
.layout-preview-nocturne .lp-bar { background: #101013; }
.layout-preview-nocturne .lp-hero { background: #131317; border: 1px solid rgba(200, 165, 88, .5); }
.layout-preview-nocturne .lp-cells i { background: #141418; border-color: #c8a558; }
.layout-preview-manor { background: #f6f2ea; }
.layout-preview-manor .lp-bar { background: #2a2724; }
.layout-preview-manor .lp-hero { background: #fffdf8; border: 1px solid #e3dccd; }
.layout-preview-manor .lp-cells i { background: #fffdf8; border-color: #d8cfbe; }
.hot-preview { flex-basis: 76px; height: 50px; flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
.hot-preview .hp-cell { width: 14px; height: 14px; border-radius: 2px; background: #fff; border: 1px solid #dbe2e8; }
.hot-preview .hp-big { width: 30px; height: 30px; background: var(--brand-light); border-color: var(--brand-2); }
.hot-preview-grid { justify-content: flex-start; }
.hot-preview-magazine { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 40% minmax(0, 1fr); gap: 3px; flex-wrap: nowrap; }
.hot-preview-magazine .hp-cell { width: auto; height: auto; }
.hot-preview-magazine .hp-cell:first-child { grid-column: 1 / -1; background: var(--brand); border-color: var(--brand); }
.hot-preview-list { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; flex-wrap: nowrap; }
.hot-preview-list .hp-cell { width: auto; height: 100%; }
.hot-preview-rank .hp-cell { width: 10px; height: 20px; }
.hot-preview-rank .hp-cell:first-child { background: #d4a017; border-color: #d4a017; }
.hot-preview-scroller { flex-wrap: nowrap; align-items: center; }
.hot-preview-scroller .hp-cell { width: 11px; height: 26px; flex-shrink: 0; }

/* 后台工具栏：筛选日期、导出按钮 */
.toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.filter-date input[type="date"] { width: auto; min-width: 130px; }
.report-tabs a.report-export { margin-left: auto; background: var(--brand); color: #fff; }
.report-tabs a.report-export:hover { filter: brightness(.94); }

/* ------------------------------------------------------------
   六、首页推荐商家排版
   ------------------------------------------------------------ */
.shops-layout-label {
    order: 3;
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
    background: #eef1f4;
    border-radius: 999px;
    padding: 3px 10px;
}

.home-shops-section .rec-shop-logo img,
.home-shops-section .rec-shop-tile-logo img,
.home-shops-section .rec-shop-poster-logo img,
.home-shops-section .rec-shop-window-logo img,
.rec-shop-line-logo img { width: 100%; height: 100%; object-fit: contain; }

.rec-shop-tile-letter,
.rec-shop-logo span,
.rec-shop-line-logo span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    background: var(--brand);
}

/* 1. 标准店卡：Logo 与店名同排，底部一行放统计与进店按钮，不留空档 */
.rec-shops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.rec-shop-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}
.rec-shop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.rec-shop-head { display: flex; align-items: flex-start; gap: 14px; }
.rec-shop-logo {
    width: 88px;
    height: 88px;
    border-radius: 14px;
    overflow: hidden;
    background: #f2f4f6;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.rec-shop-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.rec-shop-body h3 { margin: 0; font-weight: 600; }
.rec-shop-body h3 a { color: var(--text); }
.rec-shop-body h3 a:hover { color: var(--brand); }
.rec-shop-desc,
.rec-shop-notice { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.rec-shop-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec-shop-notice { color: var(--accent); }
.rec-shop-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}
.rec-shop-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.rec-shop-meta strong { color: var(--brand-dark); font-size: 14px; }
.rec-shop-enter { flex: none; }

/* 2. Logo 墙 */
.rec-shops-wall {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    justify-items: center;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.rec-shop-tile { width: 100%; max-width: 250px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .18s ease, box-shadow .18s ease; }
.rec-shop-tile:hover { border-color: var(--brand-2); box-shadow: var(--shadow); }
.rec-shop-tile a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px; text-align: center; }
.rec-shop-tile-logo { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #f2f4f6; border: 1px solid var(--border); }
.rec-shop-tile-name { font-size: 14px; font-weight: 600; color: var(--text); }
.rec-shop-tile:hover .rec-shop-tile-name { color: var(--brand); }
.rec-shop-tile-count { font-size: 12px; color: var(--muted); }

/* 3. 店招海报 */
.rec-shops-posters { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
.rec-shop-poster {
    position: relative;
    display: block;
    min-height: 168px;
    border-radius: var(--radius);
    background-color: var(--brand-dark);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}
.rec-shop-poster:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.rec-shop-poster.is-plain { background-image: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.rec-shop-poster::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 18, 24, 0) 32%, rgba(10, 18, 24, .72) 100%);
}
.rec-shop-poster-inner {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
}
.rec-shop-poster-logo { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: #fff; flex-shrink: 0; }
.rec-shop-poster-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rec-shop-poster-text strong { color: #fff; font-size: 17px; }
.rec-shop-poster-text small { color: rgba(255, 255, 255, .82); font-size: 12px; }
.rec-shop-poster-enter {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 12px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 999px;
    padding: 4px 12px;
    transition: opacity .18s ease;
}
.rec-shop-poster:hover .rec-shop-poster-enter { opacity: .78; }

/* 4. 左标右文 */
.rec-shops-split { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }
.rec-shop-line {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color .18s ease;
}
.rec-shop-line:hover { border-color: var(--brand-2); }
.rec-shop-line-logo { width: 54px; height: 54px; border-radius: 10px; overflow: hidden; background: #f2f4f6; border: 1px solid var(--border); flex-shrink: 0; }
.rec-shop-line-body { flex: 1; min-width: 0; }
.rec-shop-line-body h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.rec-shop-line-body h3 a { color: var(--text); }
.rec-shop-line-body h3 a:hover { color: var(--brand); }
.rec-shop-line-body p {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rec-shop-line-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 12px; color: var(--muted); flex-shrink: 0; }

/* 5. 滑动橱窗 */
.rec-shops-scroller {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.rec-shop-window {
    flex: 1 1 200px;
    min-width: 200px;
    max-width: 268px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: transform .18s ease, box-shadow .18s ease;
}
.rec-shop-window:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.rec-shop-window-logo { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; background: #f2f4f6; border: 1px solid var(--border); }
.rec-shop-window strong { font-size: 15px; color: var(--text); }
.rec-shop-window:hover strong { color: var(--brand); }
.rec-shop-window small { font-size: 12px; color: var(--muted); }
.rec-shop-window-desc {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 720px) {
    .rec-shops-wall { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    .rec-shops-posters,
    .rec-shops-split { grid-template-columns: minmax(0, 1fr); }
    .rec-shop-line-body p { white-space: normal; }
    .rec-shop-line-side { flex-direction: row; align-items: center; gap: 10px; }
}

/* 后台选择器里的推荐商家排版缩略图 */
.shop-preview { flex-basis: 76px; height: 52px; flex-direction: row; flex-wrap: wrap; align-content: center; gap: 5px; }
.shop-preview .sp-item { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 22px; }
.shop-preview .sp-item i { width: 13px; height: 13px; border-radius: 50%; background: var(--brand); }
.shop-preview .sp-item b { display: block; width: 20px; height: 4px; border-radius: 2px; background: #cfd7de; }
.shop-preview-logos .sp-item i { width: 20px; height: 12px; border-radius: 3px; background: #fff; border: 1px solid #dbe2e8; }
.shop-preview-logos .sp-item b { width: 14px; }
.shop-preview-poster { align-content: center; }
.shop-preview-poster .sp-item { width: 60px; }
.shop-preview-poster .sp-item i { width: 10px; height: 10px; background: #fff; opacity: .85; }
.shop-preview-poster .sp-item b { width: 44px; background: #fff; opacity: .7; }
.shop-preview-poster .sp-item { flex-direction: row; }
.shop-preview-split { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; }
.shop-preview-split .sp-item { flex-direction: row; align-items: center; gap: 4px; width: auto; }
.shop-preview-split .sp-item i { width: 10px; height: 10px; border-radius: 3px; }
.shop-preview-split .sp-item b { flex: 1; width: auto; }
.shop-preview-scroller { flex-wrap: nowrap; align-items: center; }
.shop-preview-scroller .sp-item { flex-shrink: 0; width: 15px; }
.shop-preview-scroller .sp-item b { width: 13px; }

/* 后台预览页 */
.preview-notice .preview-back { margin-left: auto; background: #eef1f4; color: var(--text); }