/*
 * Middletown Home Outlet
 *
 * 两条约束决定了这份样式的样子：
 *
 * 1. 现有照片最大只有 600px。所以**任何图片都不能被放大显示** —— 放大就发虚，
 *    而发虚的卖场照比没有照片更伤信任。所有图位都按素材真实尺寸封顶。
 *    店主补拍高清图之后，把封顶值调大即可。
 *
 * 2. 橙色全站禁用。一家卖「退回给某个橙色品牌的货」的店，用橙色做主色
 *    会在任何人读到文字之前就先读成「有关联」。免责声明是文字层的工作，
 *    配色是视觉层的同一件工作。
 */

:root {
  /* 配色。2026-10-12 店主拍板改成橙色主色（参照 demo.tooo.ai 那版）。
     在此之前这里是刻意不用橙色的 —— 理由见 README：卖「退回给某个橙色品牌
     的货」的店用橙色主色，在任何人读文字之前就先被读成有关联。
     与此同时页面上已经不出现任何零售商名字，文字上的关联已经切断。
     check.mjs 原来的第 5 条（禁橙色）已相应改成只盯对比度。 */
  --ground: #faf6f1;      /* 暖米白，配橙色不发灰 */
  --surface: #ffffff;
  --ink: #1a1410;
  --body: #4a4035;
  --hairline: #e0d8cc;
  --brand: #e85a1a;       /* 主色。只用于强调、按钮和线条 */
  --brand-deep: #c64612;  /* 深一档，用于 hover 和深色底上的文字 */
  --tag: #ffd24d;         /* 高亮块。永远配深色字 */
  --brand-tint: #fbe7dc;  /* 品类图标的浅橙圆底，配 --brand-deep 图标（4.1:1，check.mjs 查） */
  --trade: #1f1a16;
  --track-new: #1f4e46;
  --track-liq: #2a1f17;
  --open: #1e7a45;
  --closed: #6b6862;
  --wrap: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;    /* 不做深色模式：卖场光线强，深色反光看不清 */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font: 400 17px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;  /* 价格和时间表要能对齐成一列 */
}

h1, h2, h3, h4, .brand-name, .btn, .chip, .facts dt, .eyebrow {
  color: var(--brand-deep);
  font-family: Archivo, Inter, system-ui, sans-serif;
  color: var(--ink);
}

h1 { font: 800 clamp(2rem, 6vw, 3.2rem)/1.08 Archivo, sans-serif; letter-spacing: -0.02em; margin: 0 0 0.5em; }
h2 { font: 700 clamp(1.45rem, 3.6vw, 2.1rem)/1.15 Archivo, sans-serif; letter-spacing: -0.02em; margin: 0 0 0.5em; }
h3 { font: 700 1.15rem/1.25 Archivo, sans-serif; margin: 0 0 0.4em; }
p { margin: 0 0 1em; }
a { color: inherit; }

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

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap.narrow { max-width: 780px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff; padding: 0.6rem 1rem;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 100; }

.eyebrow {
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--closed); margin: 0 0 0.4em; font-weight: 600;
}
.intro { max-width: 68ch; }
.note { font-size: 0.94rem; color: var(--body); max-width: 68ch; }

/* ── 顶栏 ────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--ground);
  border-bottom: 1px solid var(--hairline);
}
.topbar-in {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.6rem 0; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; }
.brand-mark { width: auto; height: 38px; flex: none; }
.brand-text { display: grid; line-height: 1.15; }
.foot-logo { width: 150px; height: auto; margin-bottom: 0.9rem; }
.brand-name { display: block; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
/* 地名是品牌锁的一部分，不可省：homeoutlet.com 是个全国连锁，
   而且全美有好几个 Middletown 在抢同一个名字 */
.brand-place { display: block; font-size: 0.72rem; color: var(--closed); letter-spacing: 0.06em; text-transform: uppercase; }

.topbar-addr, .topbar-tel { text-decoration: none; font-size: 0.95rem; white-space: nowrap; }
.topbar-addr { color: var(--body); border-bottom: 1px solid var(--hairline); }
.topbar-tel { font-weight: 700; color: var(--ink); font-size: 1.05rem; }

.chip {
  font-size: 0.82rem; font-weight: 600; padding: 0.25rem 0.6rem;
  border: 1px solid var(--hairline); border-radius: 999px; white-space: nowrap;
}
.chip a { text-decoration: none; }
.chip.is-open { color: var(--open); border-color: color-mix(in srgb, var(--open) 35%, var(--hairline)); }
.chip.is-closed { color: var(--closed); }

.pill {
  background: var(--brand-deep); color: #fff;
  text-decoration: none; font-weight: 700; font-size: 0.82rem;
  padding: 0.4rem 0.85rem; border-radius: 999px; white-space: nowrap;
}

/* ── 顶栏「全部品类」下拉 ────────────────────────────────────────────────
   <details> 开合，没有 JS 也能用。面板 position:absolute 挂在 sticky 的 .topbar
   上（sticky 是定位元素），所以 top:100% 就是顶栏下沿，left/right:0 撑满全宽。
   收起时面板是 display:none（<details> 自带），audit.mjs 量不到它，不算溢出。 */
.dept summary { list-style: none; cursor: pointer; user-select: none; }
.dept summary::-webkit-details-marker { display: none; }
.dept-btn {
  display: inline-flex; align-items: center; gap: 0.42rem;
  font-size: 0.88rem; padding: 0.5rem 0.95rem;
}
.dept-btn:hover { background: color-mix(in srgb, var(--brand-deep) 82%, #000); }
.dept-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.dept[open] > .dept-btn { background: var(--ink); }
.dept-btn .ico { width: 1.05rem; height: 1.05rem; flex: none; }
.dept-btn .ico-caret { width: 0.9rem; height: 0.9rem; transition: transform 0.15s; }
.dept[open] .ico-caret { transform: rotate(180deg); }

.dept-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  box-shadow: 0 24px 40px -24px rgba(26, 20, 16, 0.5);
  max-height: min(78vh, 640px); overflow-y: auto; overscroll-behavior: contain;
}
.dept-list {
  list-style: none; margin: 0; padding: 0.9rem 0 0.3rem;
  display: grid; gap: 0.2rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) { .dept-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .dept-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dept-list a {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.5rem 0.55rem; border-radius: 8px;
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 0.95rem; line-height: 1.25;
}
.dept-list a:hover, .dept-list a:focus-visible { background: var(--ground); }
.dept-list a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
/* 在门窗页上，门窗那一项标成「当前页」 */
.dept-list a[aria-current] { background: var(--ground); box-shadow: inset 3px 0 0 var(--brand-deep); }
.dept-ico, .dir-ico {
  flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand-deep);
}
.dept-ico { width: 2.4rem; height: 2.4rem; }
.dept-ico .ico { width: 1.3rem; height: 1.3rem; }
.dept-more { margin: 0; padding: 0.4rem 0.55rem 1rem; font-size: 0.9rem; font-weight: 600; }
.dept-more a { color: var(--brand-deep); }
/* 西语有「Electrodomésticos」这种一个词就比半屏宽的，不让它断就会把两列撑出屏幕
   （audit.mjs 在 390px 上量到过 413px）。先按音节加连字符断（页面有 lang），
   断不了再任意断。min-width:0 让网格项肯缩到比最长的词还窄 */
.dept-list li, .dept-list a, .dir li, .dir-item { min-width: 0; }
.dept-list a > span:last-child, .dir-label {
  -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere;
  /* 只断 10 个字母以上的长词，断开后两边各留至少 4 个字母 ——
     不加这条会断出「acondiciona-do」「re-gadera」这种碎片 */
  hyphenate-limit-chars: 10 4 4;
}
@media (max-width: 700px) {
  /* 手机顶栏本来就三行（店名 / 营业状态 + 电话 / 这颗按钮 + 语言）。按钮再宽一点
     就会自己掉到第四行，sticky 顶栏一下子吃掉四分之一屏 —— 所以这里收紧，去掉箭头
     （展开时按钮变黑，开合一样看得出来） */
  .topbar-in { gap: 0.6rem 0.75rem; }
  .dept-btn { padding: 0.45rem 0.8rem; font-size: 0.85rem; }
  .dept-btn .ico-caret { display: none; }
}
@media (max-width: 520px) {
  .dept-list { gap: 0.15rem 0.5rem; }
  .dept-list a { font-size: 0.9rem; gap: 0.5rem; padding: 0.45rem 0.3rem; }
  .dept-ico { width: 2.1rem; height: 2.1rem; }
  .dept-ico .ico { width: 1.15rem; height: 1.15rem; }
}

/* ── 按钮 ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block; text-decoration: none; font-weight: 700;
  padding: 0.85rem 1.4rem; border-radius: 6px; border: 1px solid transparent;
  font-size: 1rem;
}
/* 白字配 --brand-deep 是 4.89:1（过 AA）；配亮橙 --brand 只有 3.55:1，
   小号文字过不了。改色前先算对比度，别直接换成 --brand */
.btn-tag { background: var(--brand-deep); color: #fff; }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.cta-row { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 1.4rem 0 0; }

/* ── 首屏 ────────────────────────────────────────────────────────────── */

.hero { padding: 2.5rem 0 3rem; border-bottom: 1px solid var(--hairline); }
.hero-in { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 900px) {
  /* 首屏图 2026-10-14 从 3:4 竖图换成 4:3 横图（厨房），这一栏跟着加宽 */
  .hero-in { grid-template-columns: 1fr 560px; gap: 3rem; }
}
.lede { font-size: 1.08rem; max-width: 62ch; }
.honesty {
  border-left: 3px solid var(--brand); padding-left: 0.9rem;
  font-size: 0.98rem; max-width: 62ch;
}
/* 图片按素材真实尺寸封顶，绝不放大 */
.hero-shot { margin: 0; border: 1px solid var(--hairline); background: var(--surface); }
.hero-shot img { width: 100%; max-width: 560px; margin-inline: auto; }

.facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem; margin: 1.6rem 0 0; padding: 1.1rem 0 0;
  border-top: 1px solid var(--hairline);
}
@media (min-width: 700px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts dt {
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--closed); font-weight: 600; margin-bottom: 0.2rem;
}
.facts dd { margin: 0; font-size: 0.97rem; font-weight: 500; color: var(--ink); }
.facts a { text-decoration: none; border-bottom: 1px solid var(--hairline); }

/* ── 通用区块 ────────────────────────────────────────────────────────── */

.band { padding: 3rem 0; border-bottom: 1px solid var(--hairline); }
.band-alt { background: var(--surface); }

/* 跳到锚点时别让标题钻到 sticky 顶栏底下。--topbar-h 由页面里的 JS 量出来
   （顶栏高度随语言和屏宽变）；没有 JS 时用估值：桌面一行约 60px，手机三行约 150px */
[id] { scroll-margin-top: calc(var(--topbar-h, 3.8rem) + 0.8rem); }
@media (max-width: 700px) { [id] { scroll-margin-top: calc(var(--topbar-h, 9.5rem) + 0.8rem); } }

/* ── 首页品类目录 ────────────────────────────────────────────────────────
   紧跟首屏（店主 2026-11-09：品类要在首页有目录、要突出）。
   宽屏、小桌面：图标在上、字在下；窄屏两列、三列：图标在左、字在右 ——
   西语最长那个「Puertas de regadera, sanitarios y tocadores」两列也排得下。

   2026-11-10 加了台面，变成 13 格：用 grid 的话每种列数最后都单出一格贴在行首。
   改成 flex 换行 + 居中：每格宽度按列数算（--cols），排不满的最后一行自动居中，
   以后加减品类不用回来改。宽屏 7 列（13 = 7 + 6），小桌面 5 列（5 + 5 + 3）。 */
.dir-band { padding: 2.2rem 0 2.6rem; }
.dir-band h2 { margin-bottom: 1.1rem; }
.dir {
  --cols: 2; --gap: 0.7rem;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap);
}
@media (min-width: 640px) { .dir { --cols: 3; } }
@media (min-width: 900px) { .dir { --cols: 5; --gap: 0.9rem; } }
@media (min-width: 1100px) { .dir { --cols: 7; } }
.dir li { display: flex; flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); }
.dir-item {
  flex: 1; display: flex; align-items: center; gap: 0.65rem;
  padding: 0.75rem 0.8rem; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 10px;
  text-decoration: none; color: var(--ink);
  font: 700 0.92rem/1.25 Archivo, Inter, system-ui, sans-serif;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.dir-item:hover { border-color: var(--brand-deep); box-shadow: 0 12px 26px -16px rgba(26, 20, 16, 0.5); transform: translateY(-2px); }
.dir-item:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* 悬停时图标反白：白字配 --brand-deep 4.89:1 */
.dir-item:hover .dir-ico { background: var(--brand-deep); color: #fff; }
.dir-ico { width: 2.6rem; height: 2.6rem; transition: background-color 0.15s, color 0.15s; }
.dir-ico .ico { width: 1.4rem; height: 1.4rem; }
@media (max-width: 520px) {
  .dir { --gap: 0.55rem; }
  .dir-item { padding: 0.7rem 0.65rem; gap: 0.55rem; font-size: 0.9rem; }
  .dir-ico { width: 2.35rem; height: 2.35rem; }
  .dir-ico .ico { width: 1.3rem; height: 1.3rem; }
}
@media (min-width: 900px) {
  .dir-item {
    flex-direction: column; justify-content: flex-start; text-align: center;
    padding: 1.2rem 0.7rem 1.1rem; gap: 0.7rem; font-size: 0.98rem;
  }
  .dir-ico { width: 3.5rem; height: 3.5rem; }
  .dir-ico .ico { width: 1.85rem; height: 1.85rem; }
}

/* ── 语言切换 ────────────────────────────────────────────────────────
   顶栏一个，页脚一个。顶栏那个在窄屏会被顶栏本身的换行规则挤掉，
   所以页脚那个是**必须保留**的 —— 手机用户找语言全靠它。                 */

.langs { display: flex; gap: 0.1rem; align-items: center; }
.langs .lang {
  font-size: 0.78rem; font-weight: 600; padding: 0.2rem 0.42rem;
  border-radius: 3px; text-decoration: none; color: var(--muted); white-space: nowrap;
}
.langs a.lang:hover { color: var(--ink); background: var(--surface); text-decoration: none; }
.langs .is-on { color: var(--ink); background: var(--surface); }

.foot-langs { display: flex; gap: 0.75rem; margin-top: 0.9rem; font-size: 0.86rem; }
.foot-langs a { color: inherit; opacity: 0.75; }
.foot-langs a:hover { opacity: 1; }
.foot-langs span[aria-current] { font-weight: 700; }

/* ── 品类卡片 ────────────────────────────────────────────────────────── */

.tiles {
  display: grid; gap: 1.1rem; margin-top: 1.6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* 手机也两列：一列看着像精品店，两列才像仓库 */
}
@media (min-width: 760px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 格数不是 3 的倍数时，最后一格会孤零零待在行首，看着像漏排版。
     「既是最后一个、又是某行第一个」= 这一行只有它，把它挪到中列居中。
     规则按格数自适应，以后加减品类不用回来改。 */
  .tiles .tile:last-child:nth-child(3n + 1) { grid-column: 2; }
}
/* 手机两列时同理：格数是单数，最后一格单独一行 —— 居中放，宽度跟别的格一样 */
@media (max-width: 759px) {
  .tiles .tile:last-child:nth-child(2n + 1) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 1.1rem) / 2); }
}
.tile { background: var(--surface); border: 1px solid var(--hairline); }
/* 从品类导航跳过来的那一格框出来，不然一屏六张图不知道是哪张 */
.tile:target { outline: 3px solid var(--brand-deep); outline-offset: 3px; }
.band-alt .tile { background: var(--ground); }
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tile-body { padding: 0.85rem 0.95rem 1.1rem; }
.tile-body h3 { font-size: 1.02rem; margin-bottom: 0.25rem; }
.tile-body p { font-size: 0.88rem; margin: 0; line-height: 1.45; }

/* ── 地板价目表 ──────────────────────────────────────────────────────
   宽屏是表格，窄屏每行塌成一张卡片。
   **不要改成横向滚动表** —— audit.mjs 判横向溢出会红，而且手机上拖着看价格
   本身就难用。DOM 保持 <table> 是为了语义和读屏器，塌陷全靠 CSS。            */

.fl-table { width: 100%; border-collapse: collapse; margin-top: 1.6rem; font-size: 0.95rem; }
.fl-table thead th {
  text-align: left; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 0 0.7rem 0.55rem; border-bottom: 2px solid var(--ink);
}
.fl-table tbody tr { border-bottom: 1px solid var(--hairline); }
.fl-table tbody tr:nth-child(even) { background: var(--surface); }
.fl-table th, .fl-table td { padding: 0.72rem 0.7rem; vertical-align: top; text-align: left; }
.fl-table tbody th { font-weight: 700; }
.fl-build, .fl-sub { display: block; font-size: 0.8rem; color: var(--muted); font-weight: 400; margin-top: 0.15rem; }
.fl-psf b { font-size: 1.16rem; font-weight: 800; white-space: nowrap; color: var(--brand-deep); }
.fl-unit { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }

@media (max-width: 720px) {
  .fl-table, .fl-table tbody, .fl-table tr, .fl-table th, .fl-table td { display: block; }
  .fl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fl-table tbody tr {
    background: var(--surface); border: 1px solid var(--hairline);
    padding: 0.5rem 0.2rem; margin-bottom: 0.8rem;
  }
  .fl-table tbody tr:nth-child(even) { background: var(--surface); }
  .fl-table tbody th { font-size: 1.02rem; padding-bottom: 0.5rem; }

  /* 窄屏没有表头，标签从 data-l 属性出。
     **不要用 display:grid 做这个左标签右值的两栏** —— grid 会把 td 里的每个
     子节点（包括裸文本节点和 .fl-sub）各算一个网格项，副行会被甩到下一行的
     标签列，"/ sq ft" 也会被挤断行。用左内边距 + 绝对定位标签，值就是正常
     行内流，想怎么换行怎么换行。                                            */
  .fl-table td { position: relative; padding: 0.26rem 0.7rem 0.26rem 6.4rem; min-height: 1.35rem; }
  .fl-table td::before {
    content: attr(data-l); position: absolute; left: 0.7rem; top: 0.38rem; width: 5.4rem;
    color: var(--muted); font-size: 0.72rem; line-height: 1.2;
    letter-spacing: 0.05em; text-transform: uppercase;
  }
  .fl-table .fl-sub { display: inline; margin-left: 0.45rem; }
  .fl-table .fl-psf b { font-size: 1.1rem; }
}

/* ── 台面价目（/countertops/，2026-11-10）──────────────────────────────
   三张表都借地板价目表的 .fl-table（宽屏是表、窄屏塌成卡片），这里只补差异。 */
.ct-h2 { margin-top: 2.4rem; }
.ct-muted { color: var(--muted); font-size: 0.88rem; }
.ct-note { display: inline-block; font-size: 0.8rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px;
  background: var(--brand-tint); color: var(--brand-deep); white-space: nowrap; }
.ct-table td b { color: var(--brand-deep); }
.ct-cmp tbody th { width: 9.5rem; }
@media (max-width: 720px) {
  .ct-table td:empty { display: none; }  /* 没有备注的那格：窄屏上不留一个空标签 */
  .ct-cmp tbody th { width: auto; }
}

/* 石英每款一张卡片（2026-11-11 店主发了板材照片）：板面图 3:2 + 编码 + 颜色 + 售价。
   宽屏 4 列、平板 3 列、手机 2 列 —— 改列数要同步改 build.mjs 的 CARD_SIZES（srcset 选档） */
.ct-cards { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 1.1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .ct-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ct-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ct-card { background: var(--surface); border: 1px solid var(--hairline); display: flex; flex-direction: column; }
.ct-card:target { outline: 3px solid var(--brand-deep); outline-offset: 3px; }  /* 从首页小图点过来的那款框出来 */
.ct-zoom { position: relative; display: block; overflow: hidden; }
.ct-zoom img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.35s ease; }
.ct-zoom:hover img, .ct-zoom:focus-visible img { transform: scale(1.04); }
.ct-hint { position: absolute; right: 0.5rem; bottom: 0.5rem; font-size: 0.75rem; font-weight: 600; color: #fff;
  background: rgba(26, 20, 16, 0.72); padding: 0.15rem 0.5rem; border-radius: 999px; opacity: 0; transition: opacity 0.2s; }
.ct-zoom:hover .ct-hint, .ct-zoom:focus-visible .ct-hint { opacity: 1; }
@media (hover: none) { .ct-hint { opacity: 1; } }   /* 手机没有悬停：一直显示「点开看大图」 */
.ct-card p { margin: 0; padding: 0 0.85rem; }
.ct-code { padding-top: 0.75rem !important; font-size: 1.02rem; color: var(--ink); line-height: 1.3; }
.ct-code b { font-weight: 800; letter-spacing: 0.02em; }
.ct-name { font-weight: 600; }
.ct-look { font-size: 0.88rem; line-height: 1.4; margin-top: 0.2rem !important; }
.ct-price { margin-top: auto !important; padding-top: 0.5rem !important; padding-bottom: 0.85rem !important; line-height: 1.6; }
.ct-price b { font-size: 1.12rem; font-weight: 800; color: var(--brand-deep); white-space: nowrap; }
.ct-price .ct-note { margin-left: 0.25rem; vertical-align: 0.1rem; }

/* 首页那排台面小图：宽屏 8 列、平板 6 列、手机 4 列（同步 build.mjs 的 CHIP_SIZES） */
.ct-chips { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 0.8rem;
  grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 760px) { .ct-chips { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ct-chips { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.ct-chips a { display: block; text-decoration: none; color: var(--ink); }
.ct-chips img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border: 1px solid var(--hairline); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.ct-chips a:hover img, .ct-chips a:focus-visible img { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(26, 20, 16, 0.14); }
.ct-chips b { display: block; font-size: 0.86rem; font-weight: 800; margin-top: 0.35rem; letter-spacing: 0.02em; }
.ct-chips span { display: block; font-size: 0.8rem; color: var(--brand-deep); font-weight: 700; }

/* 看大图的弹窗 */
.ct-dlg { border: 0; padding: 0; width: min(94vw, 1100px); max-height: 94vh; background: var(--surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); overflow: auto; }
.ct-dlg::backdrop { background: rgba(26, 20, 16, 0.8); }
.ct-dlg-pic img { display: block; width: 100%; height: auto; }
.ct-dlg-cap { margin: 0; padding: 0.8rem 1rem 1rem; color: var(--ink); font-weight: 600; }
.ct-dlg form { position: absolute; top: 0.5rem; right: 0.5rem; margin: 0; }
.ct-x { width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: rgba(26, 20, 16, 0.72); color: #fff;
  font-size: 1.6rem; line-height: 1; cursor: pointer; }
.ct-x:hover { background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .ct-zoom img, .ct-chips img { transition: none; } }

.tile-link { margin-top: 0.55rem; font-size: 0.86rem; font-weight: 600; }
.tile-link a { text-decoration: none; color: var(--brand-deep); }
.tile-link a:hover { text-decoration: underline; }

/* ── 营业时间 ────────────────────────────────────────────────────────── */

.hours-in { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 800px) { .hours-in { grid-template-columns: 1fr 340px; gap: 3rem; } }
.hours-table { width: 100%; border-collapse: collapse; background: var(--ground); }
.band-alt .hours-table { background: var(--surface); }
.hours-table th, .hours-table td {
  text-align: left; padding: 0.62rem 0.9rem; border-bottom: 1px solid var(--hairline);
  font-weight: 400; font-size: 0.97rem;
}
.hours-table td { text-align: right; color: var(--ink); }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: 0; }
.hours-table tr.is-today { background: color-mix(in srgb, var(--tag) 22%, transparent); }
.hours-table tr.is-today th { font-weight: 700; box-shadow: inset 3px 0 0 var(--ink); }
.hours-table tr.is-today th::after { content: " · Today"; font-weight: 400; color: var(--closed); font-size: 0.82rem; }

/* ── 两条货源线 ──────────────────────────────────────────────────────── */

.tracks { display: grid; gap: 1.2rem; margin-top: 1.6rem; }
@media (min-width: 820px) { .tracks { grid-template-columns: 1fr 1fr; } }
.track { background: var(--surface); border: 1px solid var(--hairline); padding: 1.4rem 1.5rem; }
.band-alt .track { background: var(--ground); }
.track-new { border-left: 3px solid var(--track-new); }
.track-liq { border-left: 3px solid var(--track-liq); }
.track-new h3 { color: var(--track-new); }
.track-liq h3 { color: var(--track-liq); }

/* 免责声明必须留在这个块里、正文字号、不灰、不缩小。
   手机上一折叠就跑进页脚没人看得见，那样等于没写 */
.disclaim {
  font-size: 0.92rem; margin: 1rem 0 0; padding-top: 0.9rem;
  border-top: 1px solid var(--hairline); color: var(--body);
}

.howitworks {
  display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center;
  margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline);
  font-weight: 600; color: var(--ink);
}
.howitworks b { color: var(--closed); }

/* ── 验货步骤 ────────────────────────────────────────────────────────── */

.steps { counter-reset: s; list-style: none; padding: 0; margin: 1.4rem 0; }
.steps li {
  counter-increment: s; position: relative;
  padding: 0 0 1.1rem 3rem; max-width: 68ch;
}
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -0.1rem;
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  background: var(--brand); color: var(--ink);
  font: 800 1rem/1 Archivo, sans-serif; border-radius: 3px;
}

/* ── 怎么来 ──────────────────────────────────────────────────────────── */

.getting-in { display: grid; gap: 2.4rem; }
@media (min-width: 860px) { .getting-in { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.nap { font-style: normal; font-size: 1.05rem; line-height: 1.7; color: var(--ink); }
.nap strong { font-family: Archivo, sans-serif; font-size: 1.15rem; }
.sub { font-size: 1.05rem; }
.routes { margin: 1rem 0 0; }
.routes > div {
  display: grid; grid-template-columns: 1fr; gap: 0.1rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--hairline);
}
@media (min-width: 560px) { .routes > div { grid-template-columns: 150px 1fr; gap: 1rem; } }
.routes dt { font-weight: 700; color: var(--ink); font-size: 0.94rem; }
.routes dd { margin: 0; font-size: 0.94rem; }
.ticks { list-style: none; padding: 0; margin: 1rem 0; }
.ticks li { padding-left: 1.4rem; position: relative; margin-bottom: 0.35rem; font-size: 0.95rem; }
.ticks li::before { content: "\2713"; position: absolute; left: 0; color: var(--open); font-weight: 700; }

/* ── 批发 ────────────────────────────────────────────────────────────── */


/* ── FAQ ─────────────────────────────────────────────────────────────── */

.faq { border-bottom: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer; padding: 1rem 0; font-weight: 700; color: var(--ink);
  font-family: Archivo, sans-serif; font-size: 1.02rem; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--closed); line-height: 1; }
.faq[open] summary::after { content: "\2212"; }
.faq-body { padding: 0 0 1rem; max-width: 68ch; }
.faq-body p:last-child { margin-bottom: 0; }

/* ── 门窗页（/windows/，Crystal 授权经销商）───────────────────────────── */

.crumbs { font-size: 0.82rem; color: var(--closed); margin: 0 0 0.9rem; }
.crumbs a { color: var(--body); }
/* 图注写明「摄于 Crystal 展厅」—— 这两张不是本店卖场，图注是诚实的那一半 */
.hero-shot figcaption, .fig figcaption {
  font-size: 0.8rem; line-height: 1.4; color: var(--closed);
  padding: 0.55rem 0.8rem 0.65rem;
}

.cards { display: grid; gap: 1.1rem; margin-top: 1.6rem; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-top: 3px solid var(--brand); padding: 1.15rem 1.3rem 1.3rem;
}
.card p { margin: 0; font-size: 0.95rem; }

.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.3rem 1.5rem; margin: 1.8rem 0 0;
}
@media (min-width: 820px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats > div { border-top: 2px solid var(--ink); padding-top: 0.7rem; }
/* 大数字用 --brand-deep：白底上 4.89:1。亮橙 --brand 只有 3.55:1，别换 */
.stats dt {
  font: 800 clamp(1.3rem, 3.2vw, 1.85rem)/1.12 Archivo, sans-serif;
  color: var(--brand-deep); letter-spacing: -0.01em;
}
/* 单位小一号、整体不断行：放不下就整个掉到下一行，不会断在「平方英 / 尺」中间 */
.stats .stat-u { font-size: 0.62em; font-weight: 700; white-space: nowrap; letter-spacing: 0; }
.stats dd { margin: 0.35rem 0 0; font-size: 0.9rem; line-height: 1.45; }

.split { display: grid; gap: 1.6rem; margin: 2rem 0 1.6rem; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 440px; gap: 3rem; } }
.points li { margin-bottom: 0.8rem; }
/* 单栏时（平板）封顶 560px，不然一张图横跨整个版心，比正文还抢眼 */
.fig { margin: 0; max-width: 560px; border: 1px solid var(--hairline); background: var(--ground); }
.fig img { width: 100%; }

/* ── 页脚 ────────────────────────────────────────────────────────────── */

/* B2B 深色块。整页只有这一节是深底 —— 它面向的是承包商不是散客，
   视觉上分开比加个小标题管用 */
.trade { background: var(--trade); color: #e9e6e0; border-bottom: 0; }
.trade h2 { color: #fff; }
.trade .eyebrow { color: var(--tag); }
.trade .intro { color: #ddd8d1; }
.trade .note { color: #b9b5ae; }
.trade .ticks li { color: #ddd8d1; }

.foot { background: var(--trade); color: #cbc7c0; padding: 2.8rem 0 6rem; }
.foot a { color: #e9e6e0; }
.foot-in { display: grid; gap: 2rem; }
@media (min-width: 760px) { .foot-in { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; } }
.foot-nap strong { color: #fff; font-family: Archivo, sans-serif; font-size: 1.1rem; display: block; margin-bottom: 0.5rem; }
.foot-nap address { font-style: normal; line-height: 1.75; }
.foot-hours { margin-top: 0.8rem; color: var(--tag); font-weight: 600; }
.foot-links h4 { color: #fff; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.7rem; }
.foot-links ul { list-style: none; padding: 0; margin: 0; }
.foot-links li { margin-bottom: 0.45rem; font-size: 0.94rem; }
.foot-legal { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid #2e2c29; font-size: 0.88rem; }
.foot-legal .disclaim { border: 0; padding: 0; color: #a5a19a; }
.foot-legal .copy { color: #7d7a74; margin-bottom: 0; }

/* ── 手机底部常驻栏 ──────────────────────────────────────────────────── */

.stickybar { display: none; }
@media (max-width: 700px) {
  .stickybar {
    position: fixed; inset: auto 0 0 0; z-index: 50;
    display: grid; grid-template-columns: 1.4fr 1fr;
    background: var(--trade); border-top: 1px solid #2e2c29;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .stickybar a {
    text-decoration: none; text-align: center; padding: 0.95rem 0.5rem;
    font-weight: 700; font-size: 0.95rem; font-family: Archivo, sans-serif;
  }
  .sb-call { background: var(--brand-deep); color: #fff; }
  .sb-dir { color: #fff; }
  .topbar-addr { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}