/* 19 · 酱油分类速查 —— 视觉母题「酱园货架」：酱褐 / 琥珀 / 瓶身标签 / 分级刻度
   独立布局：货架格卡 + 刻度条 + 瓶形插画，与其它页不共用视觉组件。 */
.t28.ss-wrap {
    --t28-bg: #faf5ef;
    --t28-surface: #fffdfa;
    --t28-surface-2: #f3e9dd;
    --t28-ink: #2e2119;
    --t28-sub: #65503f;
    --t28-muted: #97826c;
    --t28-line: #e6d8c7;
    --t28-accent: #8b3f27;
    --t28-accent-2: #c08a2e;
    --t28-soft: #f6e6d5;
    --t28-on-accent: #fffdfa;
    --t28-ok: #4a7440;
    --t28-warn: #a36b10;
    --t28-danger: #a63d31;
    --t28-ok-soft: #e8f2e1;
    --t28-warn-soft: #faf0d5;
    --t28-danger-soft: #fae6e1;
    --t28-radius: 8px;
    --t28-radius-sm: 6px;
    --t28-font: "Songti SC", "SimSun", "PingFang SC", "Microsoft YaHei", serif;
    --t28-shadow: 0 2px 0 rgba(139,63,39,.08), 0 8px 24px rgba(90,60,35,.07);
    --t28-shadow-lift: 0 4px 0 rgba(139,63,39,.1), 0 16px 34px rgba(90,60,35,.15);
}
:root[data-theme="dark"] .t28.ss-wrap {
    --t28-bg: #16110d;
    --t28-surface: #201911;
    --t28-surface-2: #2b2117;
    --t28-ink: #f7ecdf;
    --t28-sub: #d5bda4;
    --t28-muted: #a98e73;
    --t28-line: #3c2d20;
    --t28-accent: #e0a077;
    --t28-accent-2: #e8c477;
    --t28-soft: #3a291c;
    --t28-on-accent: #201911;
    --t28-ok: #9acb85;
    --t28-warn: #e9c075;
    --t28-danger: #f09a8b;
    --t28-ok-soft: #233120;
    --t28-warn-soft: #3a2e18;
    --t28-danger-soft: #3b211d;
    --t28-shadow: 0 8px 26px rgba(0,0,0,.4);
}
.ss-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 26px; align-items: center; padding: 34px 0 26px; }
.ss-hero h1 em { display: block; font-style: normal; font-size: .54em; color: var(--t28-accent-2); margin-top: 10px; }
.ss-wrap .t28-eyebrow { border-radius: 4px; }
.ss-wrap .t28-panel-title { letter-spacing: .02em; }

/* 货架与瓶：纯 CSS 绘制 */
.ss-shelf { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 16px;
    min-height: 190px; padding: 18px 14px 34px; border-radius: 8px;
    background: linear-gradient(180deg, transparent 62%, rgba(139,63,39,.07) 62%); }
.ss-bottle { position: relative; width: 62px; height: 116px; border-radius: 9px 9px 13px 13px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset -10px 0 14px rgba(0,0,0,.14), 0 6px 0 rgba(0,0,0,.06); }
.ss-bottle::before { content: ''; position: absolute; top: -22px; left: 20px; width: 22px; height: 24px;
    border-radius: 4px 4px 0 0; background: inherit; box-shadow: inset -4px 0 6px rgba(0,0,0,.16); }
.ss-bottle::after { content: ''; position: absolute; top: -27px; left: 17px; width: 28px; height: 7px; border-radius: 3px; background: #3b2b21; }
.ss-bottle span { writing-mode: vertical-rl; font-size: 13px; font-weight: 800; letter-spacing: .18em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.ss-b1 { background: linear-gradient(150deg, #c98a4b, #965021); }
.ss-b2 { background: linear-gradient(150deg, #6c3a24, #3d2017); }
.ss-b3 { background: linear-gradient(150deg, #d6a758, #a76f2a); }
.ss-board { position: absolute; left: 8%; right: 8%; bottom: 20px; height: 12px; border-radius: 3px;
    background: linear-gradient(180deg, #c39a6b, #8d6440); box-shadow: 0 6px 12px rgba(90,60,35,.22); }

/* 首屏查询区：酱色左侧色带 */
.ss-quick { border-left: 5px solid var(--t28-accent); }

/* 货架卡 */
.ss-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ss-card { position: relative; padding: 20px 18px 18px; border: 1px solid var(--t28-line);
    border-radius: 8px; background: var(--t28-surface); box-shadow: var(--t28-shadow); }
.ss-card::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--t28-accent), var(--t28-accent-2)); opacity: .55; }
.ss-card h3 { font-size: 19px; margin: 10px 0 8px; }
.ss-card p { font-size: 14.5px; line-height: 1.75; color: var(--t28-sub); margin-bottom: 10px; min-height: 52px; }
.ss-card small { font-size: 12.5px; color: var(--t28-muted); }
.ss-tag { display: inline-block; padding: 3px 9px; border-radius: 3px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
.ss-tag-light { background: #f6e6c8; color: #8a5a12; }
.ss-tag-dark { background: #4a2b20; color: #ffe9d5; }
.ss-tag-special { background: var(--t28-soft); color: var(--t28-accent); }
:root[data-theme="dark"] .ss-tag-light { background: #4a3518; color: #f0cd8b; }
:root[data-theme="dark"] .ss-tag-dark { background: #5b3627; color: #ffe9d5; }

/* 分级刻度 */
.ss-scale { margin: 8px 0 18px; }
.ss-scale-bar { position: relative; height: 16px; border-radius: 999px;
    background: linear-gradient(90deg, #d9c3a5 0%, #c99a58 45%, #8b3f27 100%); }
.ss-scale-bar i { position: absolute; top: -4px; width: 2px; height: 24px; background: var(--t28-surface); box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
.ss-scale-labels { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--t28-muted); }
.ss-reading .t28-prose { max-width: 860px; }

@media (max-width: 860px) {
    .ss-hero { grid-template-columns: minmax(0, 1fr); }
    .ss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ss-shelf { min-height: 160px; }
}
@media (max-width: 520px) {
    .ss-grid { grid-template-columns: minmax(0, 1fr); }
    .ss-card p { min-height: 0; }
    .ss-scale-labels { font-size: 10.5px; flex-wrap: wrap; }
    .ss-bottle { width: 54px; height: 100px; }
}