/* hilaldecor - palette B, Royal Midnight.
* All direction-dependent properties use CSS logical properties
* (margin-inline / inset-block / border-block), so adding dir="rtl" mirrors the
* layout with no rewrite. */
/* ── 品牌衬线字体（2026-10-21 引进，先只在 About 页试用）───────────────
为什么自托管：站内 `_headers` 给 /*.woff2 设了 immutable 长缓存，
引 Google Fonts CDN 会多一个第三方域名（也违背 CSP img/font 白名单思路）。
文件名带 v1 —— 换字体就换文件名，避免 immutable 缓存钉死旧字体。
unicode-range 只覆盖拉丁：中文/阿拉伯文继续走系统字体，不会拉到空字形。 */
@font-face {
font-family: "Fraunces";
src: url("/assets/fonts/fraunces-latin-v1.woff2") format("woff2");
font-weight: 400 900; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* 显示字体（标题用）。2026-10-21 老板定稿：Fraunces（对比 Playfair 后选它）。
⛔ 换字只改这一处；正文( --font-body )仍走系统无衬线，长文可读性优先。 */
--font-display: "Fraunces", Georgia, "Times New Roman", serif;
--navy: #0B1B3A;
--navy-2: #122A55;
--gold: #D4AF37;
--gold-lt: #E8D28A;
--gold-hero: #F5E6B8; /* 首页 hero 标题里的金色 **专用**（2026-10-08）：
* 遮罩调浅到 0.58 后，--gold-lt #E8D28A 在白字旁边
* 亮度掉一档、对比只有约 3:1（不达 AA）。
* 这是**深色底上的文字色**（H 45° 保持品牌金调、明度提到近白），
* 只给 `.hero h1 em` 用；其他深色区仍用 --gold-lt（那里底更深，够用）。 */
--gold-dk: #8A6E15;
--body: #3A4356;
--paper: #FFFFFF;
--paper-2: #F6F7FA;
--line: #DDE1E9;
/* ── 语义色（2026-09-24 令牌化）────────────────────────────────
* 这些值此前在样式里**硬编码 60+ 处**，改一次主题要全文替换。
* 现在只在这里定义一次，其余地方一律 var()。
* 命名规则：on-dark-* = 深色底上的文字；ink-* = 浅色底上的文字层级。 */
--on-dark-1: #C9D3E4; /* 深色底 · 正文 */
--on-dark-2: #9FB0C9; /* 深色底 · 次要文字 */
--on-dark-3: #BFCBE0; /* 深色底 · 描述文字 */
--ink-2: #5A6376; /* 浅色底 · 次要正文 */
--ink-3: #666F80; /* 浅色底 · 提示/弱化文字（原 #7A8398 对比度仅 3.80:1，WCAG AA 要求 4.5:1 → 调深到 5.06:1；用于面包屑/SKU/卡片副标题等 8 处小字） */
--on-gold: #1A1405; /* 金色底 · 文字（CTA 按钮） */
--danger: #C0392B; /* 错误态 */
/* ── 产品卡标签（2026-09-25）───────────────────────────────
* S2 要求颜色一律走令牌。对比度实测 6.95:1（WCAG AA 需 4.5:1）。 */
--gold-tint: #FFF9E6; /* 标签底 */
--gold-line: #E3CE86; /* 标签描边 */
--gold-ink: #6B5310; /* 标签文字 */
/* ── 圆角（2026-09-25 收敛）───────────────────────────────────────
* 此前混用 10 个值：2 / 6 / 8 / 10 / 12 / 14 / 16 / 20 / 100px / 50%。
* 同一类元素（都是卡片）在不同页面圆角不同 —— 这是"各页各做"的直接来源。
* 现在只有 4 个令牌；S11 闸门盯着，写别的值会报错。
* 唯一例外：气泡尾巴（12px 12px 12px 4px），是形状不是漂移。 */
--r-sm: 8px; /* 小件：标签 / 按钮 / 输入框 / 缩略图 / 小面板 */
--r-md: 12px; /* 卡片 / 面板 / 图片块 / 深色带 */
--r-pill: 100px; /* 胶囊：副标题标签 / 圆形角标 / 浮动条按钮 */
/* ── 垂直节奏（2026-09-25 统一）──────────────────────────────────
* 此前散在 28/30/34/36/40/44/48/64/72/96/104 十一个值上，
* 同一层级的留白在不同页面不一样 —— 这是"页面看着松紧不一"的主因。
* ⛔ hero 卡片（.ab-hero）**不跟着放大** —— 老板 09-25 明确说过
* "hero 太大"，它的内距有自己的档位。 */
--sp-section: 96px; /* 板块之间（.ab-sec / .pd 底） */
--sp-block: 56px; /* 板块内的子块（.grp / 正文段） */
--sp-body: 48px; /* 正文区顶部（.pd） */
--sp-gap: 40px; /* 标题与内容之间 */
--sp-tight: 24px; /* 次级间隔 / 深色带头部内距 */
/* 产品卡固定行高（见下方 .pcard-name / -pack 的说明）
⛔ 2026-09-25 删掉 --pcard-tag-row：标签行已从卡片上移除（只产品页显示标签），
固定行高随之下线 —— 留着就是"声明了没人用"的死令牌。 */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: var(--body); background: var(--paper); line-height: 1.65;
/* 2026-10-15 老板「全站字太小，现代浏览风格就是图多字大」⇒ 基准 16 → 17px。
这是**继承型**文字的底噪（导航 .94rem 卡片标题等显式字号不受影响），
组件字号由 :root 的 --ab-fs-* 统一放大。 */
font-size: 1.06rem;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { color: var(--navy); font-weight: 700; }
h1 { font-size: 2.2rem; line-height: 1.22; }
/* 2026-09-24 按老板要求放宽到 1660（参照 islamicwallartstore 的 .page-width）。
⚠️ 本文件里 .wrap 定义了两次（见下方「共享组件」段），改宽度要两处一起改。 */
.wrap { max-inline-size: 1660px; margin-inline: auto; padding-inline: 24px; }
/* header */
.hd { position: sticky; inset-block-start: 0; z-index: 50; background: var(--navy); border-block-end: 2px solid var(--gold); }
.hd nav { display: flex; gap: 28px; font-size: .94rem; align-items: center; }
.hd nav a { color: var(--on-dark-1); padding-block: 6px; border-block-end: 2px solid transparent; transition: .18s; }
.hd nav a:hover { color: var(--paper); border-block-end-color: var(--gold); }
/* ── Products 下拉（2026-10-21 老板：「Products 加下拉，直接列出 9 个分类」）──
为什么之前没有：点 Products 直达 /products/（按标签筛选的浏览页），9 个分类页
只有页脚有入口 → 买家想看"灯笼"得先进目录页再点左栏。
实现只用 CSS（hover + focus-within），不引 JS：
· ≥901px 悬停/聚焦展开；
· 641–900px 不展开（触屏没有 hover），点 Products 进目录页走左栏；
· ≤640px 抽屉里平铺展开（见该断点的覆盖规则）。
⚠️ 不要给这里加 transition/animation 之外的花活，页头全站 528 页共用。 */
.nav-drop { position: relative; display: flex; align-items: center; }
/* ⛔ 2026-10-21 修「Products 比别的导航项高一截」：
包了一层 div 之后，里面的 仍是 **inline** 级，行盒会多出一截 leading；
而同级其他 是 flex item（被块化）—— 两者盒高算法不同，肉眼就是一高一低。
`.nav-drop` 自己也做 flex，里面的 一样被块化，高度就跟兄弟项完全一致。 */
.nav-drop-m {
/* ⛔ 2026-10-21 修「鼠标移到 Products，来不及选就消失」——
原写法 `inset-block-start: calc(100% + 10px)` 在触发项和面板之间留出 10px **空隙**，
指针穿过空隙时 `.nav-drop:hover` 立刻失效 → 面板关闭，根本够不到里面的菜单项。
现在面板顶端贴住触发项（`100%`），视觉上的 16px 间距改由**面板自己的上内距**提供 ——
内距属于面板，指针停在那里仍然算 hover，不会掉出。
⛔ 以后任何 hover 展开的浮层，都不许用「位移」制造间距，只能用自己的 padding。 */
position: absolute; inset-block-start: 100%; inset-inline-start: -16px;
min-inline-size: 236px; padding: 16px 8px 8px; display: none; z-index: 60;
background: var(--navy-2); border: 1px solid rgba(255, 255, 255, .16);
border-radius: var(--r-md); box-shadow: 0 20px 44px rgba(0, 0, 0, .38);
}
.nav-drop:hover .nav-drop-m, .nav-drop:focus-within .nav-drop-m { display: block; }
.nav-drop-m a {
display: block; padding: 9px 12px; border: 0; border-radius: var(--r-sm);
font-size: .92rem; color: var(--on-dark-1);
}
.nav-drop-m a:hover { background: rgba(255, 255, 255, .08); color: var(--paper); border: 0; }
/* 策展位（HOT / NEW）+ All collections 自成一组，与 7 个真实品类之间一道细分隔。
⛔ 不要用 `.nd-cur:first-of-type` —— 面板里第一个 是品类链接，
那个选择器永远匹配不到，分隔线会整条消失（2026-10-21 实测踩到）。 */
.nav-drop-m .nd-cur-wrap {
margin-block-start: 6px; padding-block-start: 6px;
border-block-start: 1px solid rgba(255, 255, 255, .14);
}
.nav-drop-m .nd-all { color: var(--gold-lt); }
/* Mobile menu.
* The nav used to be hidden below the breakpoint, which left phones with no
* navigation at all. It now collapses into a toggle plus dropdown panel driven
* by assets/site.js. */
/* Toggle button for the mobile nav panel.
* 外观定义集中在基础层，媒体查询里只切换 display —— 与首页写法一致。
* （此前外观写在 640 断点里，同一组件的定义散落两处，改的时候容易漏。） */
.nav-toggle {
display: none;
align-items: center; justify-content: center;
inline-size: 44px; block-size: 44px; flex: none;
background: transparent; border: 1px solid rgba(255, 255, 255, .30); border-radius: var(--r-sm);
cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.nav-bars, .nav-bars::before, .nav-bars::after {
display: block; inline-size: 20px; block-size: 2px; border-radius: var(--r-pill);
background: var(--paper); transition: transform .18s ease, background .18s ease;
}
.nav-bars { position: relative; }
.nav-bars::before, .nav-bars::after { content: ""; position: absolute; inset-inline-start: 0; }
.nav-bars::before { inset-block-start: -6px; }
.nav-bars::after { inset-block-start: 6px; }
/* toggle bars become an X when open */
.nav-open .nav-bars { background: transparent; }
.nav-open .nav-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-bars::after { transform: translateY(-6px) rotate(-45deg); }
/* CTA inside the panel, small screens only.
* The header button and the toggle cannot share one row at 390px - the toggle
* gets pushed past the right edge - so the CTA moves into the panel. */
.nav-cta { display: none; }
/* breadcrumbs */
/* 面包屑条 —— 全站唯一位置：紧跟页头、hero 之前。
老板 2026-09-25 指出「面包屑和 hero 合并后，和页头是不是也糊成一块了」：
页头与 hero 卡片（.ab-hero）同为 var(--navy) 系，中间只隔 2px 金线。
这条浅底细条本身就成了**页头（深）与 hero（深）之间的分隔层**，问题消解。 */
.crumbs { background: var(--paper); border-block-end: 1px solid var(--line); }
.crumbs-in {
display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
max-inline-size: 1660px; margin-inline: auto; padding: 11px 24px;
font-size: .8rem; color: var(--ink-3);
}
.crumbs a { color: var(--gold-dk); }
.crumbs span { color: var(--body); }
.crumbs i { display: block; inline-size: 14px; block-size: 1px; background: currentColor; opacity: .5; }
/* product page */
.pd { padding-block: var(--sp-body) var(--sp-section); }
/* 分类页正文区间距（2026-09-25 二次修正）
⛔ 原先分类页是**三段**：`.cat-hero` 段 → `.subnav` 段 → `.wrap.pd.cat-body` 段，
每段落白各算各的，`hero → 产品` 与 `subnav → 产品` 都退化成 0 ——
这就是老板看到的「部分列表页依然和产品行紧贴着」。
现在整页是**单个 `.wrap.pd` 段**，段内间距由下面这几条统一控制，
不再需要 `.cat-body` 这类"补丁式"类。 */
/* 列宽必须与主图宽度一致（2026-09-25）：
旧版媒体列 1.15fr 约 800px 而主图封顶 520px -> 图右侧多出约 280px 空白，
加上 gap 看起来就是「图和说明之间空一大块」。现在列宽 = 主图宽。 */
.pd-grid { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
gap: 44px; align-items: start; }
.pd-info { max-inline-size: 760px; }
/* ── 产品媒体区（2026-09-25 照成熟方案重做）────────────────────────────
老板反馈：「缩略图太大，描述文字被挤到缩略图下面去了」。
旧版是 2×2 等大图（第一张跨两列）→ 整块高度约 1.4 屏。
成熟方案（参照站 islamicwallartstore / Shopify Impulse 实测）：
`.product__thumbs--beside{flex:0 0 60px}` —— **1 张大主图 + 一排小缩略图**。
我们取 76px：比 60 略大，兼顾触摸目标（DESIGN-SPEC S6 要求 ≥44px），
但远小于旧版的半宽（1660 容器下约 400px）。主图封顶 520px，避免高屏占满。
⛔ 缩略图是