/* ============================================================
 * 红豆商城 · 布局系统（layouts.css · v42）
 * ------------------------------------------------------------
 * 皮肤（data-skin）管「颜色 / 质感」，本文件管「结构 / 排布」。
 * 两者正交：任意皮肤 × 任意布局都能组合。
 *
 * 一键替换的三种入口（优先级从高到低）：
 *   ① URL   ?layout=list          —— 试看，不落盘
 *   ② 访客  顶栏「风格」菜单里的「布局」→ localStorage（站长可在后台关闭）
 *   ③ 站长  后台「设置 → 界面布局」→ settings.layout_style（全站默认）
 *
 * 两套布局（v53 精简：四套在手机端区分度不够，砍成两套）：
 *   grid      双列卡片（默认）—— 手机 2 列、桌面 4~5 列
 *   list      单列清单        —— 手机 1 列大卡、桌面 2 列图左信息右
 *
 * 作用域：全部限定在首页 main.shop-home 内 —— 详情页 / 收银台 /
 * 订单查询 / 会员中心 / 后台的既有排版一行都不动。
 *
 * 三条硬规矩：
 *   1. 一律居中、左右留白对称，禁止一边倒；
 *   2. 间距只走 --flow-gap / --pad-* / --grid-gap，不写魔法数字；
 *   3. 任何布局在 320px 宽下都不得横向溢出。
 * ============================================================ */

/* ------------------------------------------------------------
 * 0. 密度令牌 + 开源纹理
 * ------------------------------------------------------------ */
html[data-layout] {
    --flow-gap: 14px;        /* 主内容块之间的间距 */
    --pad-x: 18px;           /* 面板左右内边距 */
    --pad-y: 16px;           /* 面板上下内边距 */
    --thumb-ratio: 4 / 3;    /* 商品图比例 */
    --grid-gap: 12px;        /* 商品卡间距 */
    --card-radius: var(--r-md);
    --card-title-size: 13.5px; /* v53: 信息区字号整体小一号 */
    --card-price-size: 17px;
    /* 开源纹理：Hero Patterns（MIT）的 SVG 图案，内联为 data URI ——
     * 零外部请求、不受 CSP 限制，用极低透明度给大片留白一点质感。 */
    --pat-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='9' cy='9' r='1.3' fill='%237C6BDB' fill-opacity='0.20'/%3E%3C/svg%3E");
    --pat-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M22 0H0v22' fill='none' stroke='%237C6BDB' stroke-opacity='0.14' stroke-width='1'/%3E%3C/svg%3E");
    --pat-stripe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M-3 3l6-6M0 12l12-12M9 15l6-6' stroke='%237C6BDB' stroke-opacity='0.16' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
    --pat-blocks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 12h12v12M12 0h12v12' fill='none' stroke='%237C6BDB' stroke-opacity='0.14' stroke-width='1'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
 * 1. 内容流：main.shop-home 变成统一间距的编排容器
 *    以前靠 .panel{margin-top:16px} + hero{margin-top:18px} 拼，
 *    现在统一走 gap，块与块严格等距。
 * ------------------------------------------------------------ */
html[data-layout] main.shop-home {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--flow-gap);
    align-content: start;
}
html[data-layout] main.shop-home > * { margin-top: 0; margin-bottom: 0; }
html[data-layout] .shop-home .panel { margin-top: 0; }
html[data-layout] .shop-home .panel-body { padding: var(--pad-y) var(--pad-x); }
html[data-layout] .shop-home .panel-header { padding: 12px var(--pad-x); }

/* 商品卡统一走令牌（省得每套布局各写一遍字号/圆角） */
html[data-layout] .shop-home .item-list { margin-top: 0; gap: var(--grid-gap); }
html[data-layout] .shop-home .item-card { border-radius: var(--card-radius); }
html[data-layout] .shop-home .item-thumb { aspect-ratio: var(--thumb-ratio); }
html[data-layout] .shop-home .goods-title { font-size: var(--card-title-size); }
/* v61: 删掉这里对 .item-info 的 padding/gap 覆盖与 .price margin-top:auto ——
 * 它们特异性高于 style.css 的手机端媒体查询，导致手机端信息区压缩从来没生效过
 * （用户反复反馈「下面还是那么高」的真正原因）。信息区样式统一由 style.css 管。 */
html[data-layout] .shop-home .item-card .price { font-size: var(--card-price-size); }

/* 分类胶囊：横排 + 等距换行（各布局可按需改成竖排） */
html[data-layout] .shop-home .cats {
    display: flex; flex-flow: row wrap;
    align-items: center; align-content: flex-start; gap: 8px;
    margin: 0 0 12px;
}
/* 二级分类（内核 / 直装）：v51 改「矩形轻微倒角」分段条。
 * 用户反馈 999px 全圆 + 30px 矮条太扁、太像胶囊；参考 Material 按钮风格，
 * 改成矩形 + 8~12px 倒角 + 加高到 38px + 字号加大，看起来是「按钮」不是「胶囊」。
 * 提供 3 个版本用 ?substyle=a/b/c 切换验收（默认 a）：
 *   a = 浅底分段条 + 选中浅红（本来的层级关系，只是变方变高）
 *   b = 无容器条，独立描边矩形按钮，选中实心红白字（对齐参考图填充/描边按钮）
 *   c = 浅底分段条 + 选中实心红白字（对比最强烈） */
html[data-layout] .shop-home .subcats {
    flex: 1 0 100%;
    width: 100%;
    margin: 0 0 2px;
    padding: 5px;
    gap: 5px;
    /* 用 --line-2 而不是 --line：--line 在 isekai 亮色下是白色半透明，
     * 叠在白面板上完全看不见，条就「秃」了；--line-2 与一级胶囊同款可见 */
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: var(--surface-2);
}
html[data-layout] .shop-home .subcats .subcat {
    flex: 1 1 72px;
    min-width: 0; min-height: 38px;
    padding: 8px 18px;
    justify-content: center;
    font-size: 12.5px; font-weight: 600;
    border-color: transparent;
    border-radius: 8px;
    background: transparent;
    overflow: hidden;
}
html[data-layout] .shop-home .subcats .subcat:hover { background: var(--surface-3); border-color: transparent; }
html[data-layout] .shop-home .subcats .subcat.is-active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-ink);
    box-shadow: var(--sh-1);
}
/* ---- 版本 b：独立描边矩形按钮（去容器条）---- */
html[data-substyle="b"] .shop-home .subcats {
    padding: 0; gap: 8px;
    border: 0; background: transparent;
}
html[data-substyle="b"] .shop-home .subcats .subcat {
    border: 1.5px solid var(--line-2);
    background: var(--surface);
    border-radius: 9px;
}
html[data-substyle="b"] .shop-home .subcats .subcat:hover {
    border-color: var(--accent); background: var(--surface);
}
html[data-substyle="b"] .shop-home .subcats .subcat.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}
/* ---- 版本 c：保留分段条，选中实心红 ---- */
html[data-substyle="c"] .shop-home .subcats .subcat.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}
/* 桌面端别拉太宽：三段各 ~200px 最舒服，左侧对齐 */
@media (min-width: 768px) {
    html[data-layout] .shop-home .subcats { max-width: 620px; }
}

/* ============================================================
 * 布局 1 · grid 匀称网格（默认）
 * ============================================================ */
html[data-layout="grid"] {
    --thumb-ratio: 1 / 1;
    --grid-gap: 12px;
    --flow-gap: 14px;
}
html[data-layout="grid"] .shop-home .item-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px)  { html[data-layout="grid"] .shop-home .item-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { html[data-layout="grid"] .shop-home .item-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { html[data-layout="grid"] .shop-home .item-list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* v73: hero 收紧到 216px，且改为布局无关 —— 无论单列双列，大卡片一律用这套
 * （原 grid 专属样式）。选择器从 data-layout="grid" 放宽为 data-layout。 */
html[data-layout] .shop-home .isekai-hero { min-height: 0; margin-top: 0; border-radius: var(--r-lg); }
html[data-layout] .shop-home .isekai-hero-copy { padding: 22px clamp(20px, 3vw, 40px); }
html[data-layout] .shop-home .isekai-hero h1 { font-size: clamp(24px, 2.6vw, 34px); }
html[data-layout] .shop-home .isekai-hero p { margin: 10px 0 14px; }
html[data-layout] .shop-home .isekai-hero img { height: 216px; }
html[data-layout] .shop-home .isekai-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image: var(--pat-dots); opacity: .55; pointer-events: none;
}
/* v141: keep the selected theme artwork above the layout's decorative pattern. */
html[data-layout]:is([data-skin="hanami"]) .shop-home .isekai-hero::after,
html[data-layout]:is([data-skin="pixel-arcade"]) .shop-home .isekai-hero::after,
html[data-layout]:is([data-skin="deep-radio"]) .shop-home .isekai-hero::after,
html[data-layout]:is([data-skin="sunset-mart"],[data-skin="cyber-blackbox"],[data-skin="y2k-bubblehouse"],[data-skin="shanhai-bestiary"]) .shop-home .isekai-hero::after {
    inset: auto 2% 0 auto; z-index: 0; width: 37%; height: 100%;
    background-position: center bottom; background-size: contain; background-repeat: no-repeat; opacity: 1;
}
html[data-layout][data-skin="hanami"] .shop-home .isekai-hero::after { background-image: url('/shop/assets/uploads/theme-v141/hanami.webp?v=170'); }
html[data-layout][data-skin="pixel-arcade"] .shop-home .isekai-hero::after { background-image: var(--theme-hero-art); image-rendering: pixelated; }
html[data-layout][data-skin="deep-radio"] .shop-home .isekai-hero::after { background-image: url('/shop/assets/uploads/theme-v141/deep-radio.webp?v=170'); }
html[data-layout][data-skin="sunset-mart"] .shop-home .isekai-hero::after { background-image: url('/shop/assets/uploads/theme-v141/sunset-mart.webp?v=170'); }
:is(html[data-layout][data-skin="cyber-blackbox"],html[data-layout][data-skin="y2k-bubblehouse"],html[data-layout][data-skin="shanhai-bestiary"]) .shop-home .isekai-hero::after { background-image: var(--theme-hero-art); }
@media (max-width: 619px) {
    html[data-layout][data-skin="hanami"] .shop-home .isekai-hero::after,
    html[data-layout][data-skin="pixel-arcade"] .shop-home .isekai-hero::after,
    html[data-layout][data-skin="deep-radio"] .shop-home .isekai-hero::after,
    html[data-layout][data-skin="sunset-mart"] .shop-home .isekai-hero::after,
    html[data-layout]:is([data-skin="cyber-blackbox"],[data-skin="y2k-bubblehouse"],[data-skin="shanhai-bestiary"]) .shop-home .isekai-hero::after { right: -8px; width: 43%; }
}

/* 分类侧栏 168px，与右侧商品区顶部对齐 */
@media (min-width: 960px) {
    html[data-layout="grid"] .shop-home #shop-products > .panel-body {
        display: grid; grid-template-columns: 168px minmax(0, 1fr);
        gap: 16px; align-items: start;
    }
    html[data-layout="grid"] .shop-home #shop-products .cats {
        grid-column: 1; grid-row: 1 / span 2;
        flex-direction: column; flex-wrap: nowrap; gap: 6px; margin: 0;
    }
    html[data-layout="grid"] .shop-home #shop-products .cats .chip {
        width: 100%; min-width: 0; justify-content: flex-start; border-radius: var(--r-sm);
    }
    html[data-layout="grid"] .shop-home #shop-products .subcats {
        flex: none; flex-direction: column; width: 100%; max-width: 100%;
        margin: 0 0 4px; padding: 4px; border-radius: var(--r-md); gap: 3px;
    }
    html[data-layout="grid"] .shop-home #shop-products .subcat {
        flex: 0 0 auto; width: 100%; min-height: 30px; justify-content: center;
    }
    html[data-layout="grid"] .shop-home #shop-products .item-list { grid-column: 2; }
    html[data-layout="grid"] .shop-home #shop-products .state-box { grid-column: 2; }
}

/* ============================================================
 * 布局 2 · list 双列清单
 * ============================================================ */
html[data-layout="list"] {
    --grid-gap: 10px;
    /* v73: --pad-x/--pad-y/--flow-gap 不再被 list 覆盖 —— 否则 hero 容器宽度
     * 与 grid 差 4px，大卡片文字换行点不同、高度不一致（实测 206 vs 202）。
     * 间距令牌与 grid 完全一致，布局差异只体现在商品列表本身。 */
    --thumb-ratio: 1 / 1;
    --card-title-size: 13.5px; /* v53: 单列清单同步小一号 */
    --card-price-size: 17px;
}
html[data-layout="list"] .shop-home .item-list { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
    html[data-layout="list"] .shop-home .item-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html[data-layout="list"] .shop-home .item-card {
    display: grid; grid-template-columns: 116px minmax(0, 1fr);
    align-items: stretch; min-height: 116px;
}
@media (min-width: 560px) {
    html[data-layout="list"] .shop-home .item-card { grid-template-columns: 130px minmax(0, 1fr); min-height: 130px; }
}
/* v81: 单列改淘宝/拼多多式 —— 图列方形 + cover 填满（零留白），
 * 信息区垂直居中；主推三角标贴方形图左上角严丝合缝 */
html[data-layout="list"] .shop-home .item-thumb {
    height: 100%; aspect-ratio: auto; min-height: 116px;
    background-size: cover; background-repeat: no-repeat; background-position: center;
    background-color: transparent;
    border-right: 1px solid var(--line);
}
/* v83: 信息区上下两端对齐（徽章行顶格 / 标题居中 / 价格贴底）——
 * 垂直居中会让 116px 高的卡片上下各空 20 多px，两端对齐才饱满 */
html[data-layout="list"] .shop-home .item-info { padding: 10px 12px; gap: 4px; justify-content: space-between; }
/* v82: 去掉 price-row 的 margin-top:auto（价格贴底逻辑与居中/对齐冲突） */
html[data-layout="list"] .shop-home .price-row { margin-top: 0; }
/* 单列列表的封面较小，主推三角收紧一档。 */
html[data-layout="list"] .shop-home .featured-badge { width: 32px; height: 32px; }
html[data-layout="list"] .shop-home .fb-ribbon {
    top: 5.4px; left: -8.1px; width: 36px; font-size: 8.5px; letter-spacing: 0;
    -webkit-text-stroke: .4px currentColor;
}
html[data-layout="list"] .shop-home .goods-title { -webkit-line-clamp: 1; }

/* v73: hero 大卡片不再随布局切换变化 —— 删除 list 布局对 isekai-hero 的
 * 全部覆盖（压扁/藏副标题/缩图），无论单列双列，hero 始终保持双列（grid）样式。 */
@media (min-width: 960px) {
    html[data-layout="list"] .shop-home #shop-products > .panel-body { display: block; }
    html[data-layout="list"] .shop-home #shop-products .cats { flex-flow: row wrap; }
    html[data-layout="list"] .shop-home #shop-products .subcats { flex-flow: row wrap; margin: 2px 0 8px; }
}

/* v53: compact / editorial / showcase 三套布局已删除 —— 只保留 grid(双列) 与 list(单列) */

/* 侧栏式布局：给左栏一条竖向分隔线。
 * 分类数量少时下方必然有空档，加线之后这段空白变成「栏目留白」，
 * 视觉上是刻意的分隔而不是「没排满」。 */
@media (min-width: 960px) {
    html[data-layout="grid"] .shop-home #shop-products .cats {
        border-right: 1px solid var(--line-2);
        padding-right: 14px;
        min-height: 100%;
    }
}

/* ------------------------------------------------------------
 * 布局切换器（顶栏「风格」下拉里的「布局」分组）
 * ------------------------------------------------------------ */
.skin-menu__section {
    padding: 6px 12px 2px; font-size: 11px; font-weight: 700;
    letter-spacing: .1em; color: var(--ink-4);
}
.layout-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0 6px 6px; }
.layout-menu__item {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 9px; border-radius: var(--r-sm); cursor: pointer;
    border: 1px solid transparent; background: transparent;
    color: var(--ink-2); font-size: 12.5px; font-weight: 600; font-family: inherit;
    text-align: left; transition: all var(--dur) var(--ease);
}
.layout-menu__item:hover { background: var(--surface-2); color: var(--ink); }
.layout-menu__item.is-active { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.layout-menu__item .i { width: 15px; height: 15px; flex-shrink: 0; }

/* ------------------------------------------------------------
 * 响应式收敛
 * ------------------------------------------------------------ */
@media (max-width: 767px) {
    html[data-layout] { --flow-gap: 12px; --pad-x: 14px; --pad-y: 13px; }
    html[data-layout] .shop-home .isekai-hero { border-radius: var(--r-md); }
    /* 手机上 hero 统一压到 176px（原来 210px），标题区少占一屏 */
    html[data-layout] .shop-home .isekai-hero { min-height: 176px !important; margin-top: 0; }
    html[data-layout] .shop-home .isekai-hero-copy { padding: 18px 16px; }
    html[data-layout] .shop-home .cats { gap: 6px; margin-bottom: 10px; }
    /* v52: 手机端不再压扁一级分类（30px 太扁），与桌面统一 38px 矩形倒角 */
    html[data-layout] .shop-home .chip { min-height: 38px; padding: 7px 13px 7px 6px; font-size: 12.5px; }
    html[data-layout] .shop-home .panel-header { padding: 10px var(--pad-x); }
}
@media (max-width: 359px) {
    html[data-layout] { --grid-gap: 8px; --pad-x: 12px; }
}

/* v55: 手机端商品图 1:1 大封面（拉大图片、上图:下文 ≈ 2:1）。
 * 必须在这里覆盖 --thumb-ratio —— 布局变量声明在 html[data-layout] 上，
 * style.css 里低特异性的 .item-thumb 媒体查询压不过它（实测踩坑）。 */
@media (max-width: 619px) {
    html[data-layout] .shop-home { --thumb-ratio: 1 / 1; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-layout] .shop-home .item-card { transition: none !important; animation: none !important; }
    html[data-layout] .shop-home .isekai-hero { transition: none !important; }
}

/* ============================================================
 * 交互反馈（点击高亮 / 点击波纹 / 按压反馈）
 * v46 起统一收口到 /assets/css/ui.css —— 全站每页加载，
 * 入口页与商城行为完全一致（入口页原来漏加载，点按钮还冒蓝块）。
 * ============================================================ */