.r37-contact{border-top:1px solid #cdd1c2;margin-top:32px;padding-top:26px}
.r37-contact-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-bottom:15px}
.r37-contact-head h3{font:400 28px/1.2 Georgia,serif;letter-spacing:-.025em;margin:0;color:#2d3d2e}
.r37-contact-head span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#6b755f}
.r37-map{position:relative;border:1px solid #ced1c4;background:#e5e8de;height:240px;overflow:hidden}
.r37-map iframe{width:100%;height:100%;border:0;display:block}
.r37-contact .r37-address{font-size:12px;line-height:1.75;margin:16px 0 0;color:#59664f;max-width:none}
.r37-contact .r37-company{display:block;font-size:12px;font-weight:600;color:#30452d;margin-bottom:4px}
.r37-map-links{display:flex;flex-wrap:wrap;gap:18px;margin:12px 0 20px;font-size:11px}
.r37-map-links a{border-bottom:1px solid #a5af96;padding-bottom:5px}
.r37-channels{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #cdd1c2}
.r37-channels a{display:flex;flex-direction:column;gap:5px;padding:14px 0;border-bottom:1px solid #cdd1c2;min-width:0;font-size:12px;overflow-wrap:anywhere;color:#30452d}
.r37-channels a:first-child{grid-column:1/-1}.r37-channels a span:first-child{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#718064}
.r37-channels a:hover span:last-child{text-decoration:underline;text-underline-offset:4px}
.r37-contact .r37-visit-note{font-size:10px;line-height:1.6;margin-top:12px;color:#6c765f}风格摆放各种我们的证书，有一种高级的设计感，通过图片拼版文字拼配
       以及掺入一些交互感强的动效 UI 跟 3d 效果」

   实现：
     左栏  · 工厂照片轮播（8 张），hover 有 3D 倾斜 + 视差
     右栏  · 证书皇冠（7 张，1 / 3 / 3 三层拱形）
             每张 hover 上浮 + 微旋 + 光晕跟随鼠标
     入场  · IntersectionObserver 逐张浮现
     全部纯 CSS + 少量 JS，不引第三方库
   ========================================================================== */

.qs-quality { position: relative; }

.qs-heading { margin-bottom: 40px; }

.qs-layout {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 48px;
    align-items: start;
    margin-top: 8px;
}

/* ---------------------------------------------------------- 左：工厂照片 */

.qs-factory {
    position: relative;
    /* 右栏比左栏高很多（7 张证书），左栏在滚动时粘住，
       避免底部留出一大片空白 */
    position: sticky;
    top: 24px;
}

/* 左栏底部补一条简短的事实带，平衡高度，也补充信息 */
.qs-factory-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid currentColor;
    border-top-color: rgba(0,0,0,.14);
}
.qs-factory-facts div { line-height: 1.3; }
.qs-factory-facts b {
    display: block;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
}
.qs-factory-facts span {
    display: block;
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .55;
    margin-top: 2px;
}

.qs-factory-stage {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 14px;
    background: #1b241f;
    /* 3D 倾斜的容器 */
    perspective: 1200px;
    transform-style: preserve-3d;
}

.qs-factory-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
}
.qs-factory-slide[data-active="true"] {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.qs-factory-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* 视差由 JS 写 --qs-px/--qs-py */
    transform: translate3d(calc(var(--qs-px, 0) * 8px), calc(var(--qs-py, 0) * 8px), 0) scale(1.06);
    transition: transform .35s ease-out;
}

.qs-factory-slide figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 42px 18px 14px;
    font-size: 12.5px;
    letter-spacing: .02em;
    color: #f3efe4;
    background: linear-gradient(to top, rgba(16,24,20,.86), rgba(16,24,20,0));
}

.qs-factory-badge {
    position: absolute;
    top: 14px; left: 14px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #16201b;
    background: rgba(243, 239, 228, .88);
    backdrop-filter: blur(6px);
    z-index: 3;
}

.qs-factory-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px; height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(243,239,228,.35);
    background: rgba(20,30,25,.42);
    color: #f3efe4;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    backdrop-filter: blur(4px);
    transition: background .2s ease, transform .2s ease;
}
.qs-factory-nav:hover { background: rgba(20,30,25,.72); }
.qs-prev { left: 12px; }
.qs-next { right: 12px; }

.qs-factory-thumbs {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    margin-top: 10px;
}
.qs-factory-thumbs button {
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: none;
    aspect-ratio: 1;
    opacity: .55;
    transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}
.qs-factory-thumbs button img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.qs-factory-thumbs button:hover { opacity: .85; transform: translateY(-1px); }
.qs-factory-thumbs button[aria-pressed="true"] {
    opacity: 1;
    border-color: currentColor;
}

.qs-factory-note {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.5;
    opacity: .62;
}

/* ------------------------------------------------------------ 右：皇冠 */

.qs-crown {
    position: relative;
    perspective: 1400px;
}

.qs-crown-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: .6;
    margin: 0 0 18px;
}

.qs-crown-row {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 14px;
}
/* 皇冠拱形：上窄下宽，行与行之间负 margin 形成叠压 */
.qs-crown-row-0 { margin-bottom: 14px; }
.qs-crown-row-1 { margin-bottom: 14px; }
.qs-crown-row-2 { margin-bottom: 0; }

/* 皇冠拱形：越往上越窄，三层 26% / 32% / 36%
   同时上层的卡片本身略小（视觉纵深），形成向上的收束 */
.qs-crown-row-0 .qs-cert { width: 26%; }
.qs-crown-row-1 .qs-cert { width: 32%; }
.qs-crown-row-2 .qs-cert { width: 36%; }

/* 皇冠顶那颗做成「主证」：加金色描边强调 */
.qs-crown-row-0 .qs-cert-plate {
    border-color: rgba(176, 138, 62, .55);
    box-shadow:
        0 1px 2px rgba(16,24,20,.10),
        0 14px 30px -16px rgba(16,24,20,.55),
        0 0 0 3px rgba(176, 138, 62, .10);
}

.qs-cert {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease;
    will-change: transform;
}

/* 证书纸面：白底 + 细边 + 阴影，像真文件 */
.qs-cert-plate {
    display: block;
    position: relative;
    aspect-ratio: 3 / 4;
    background: #fff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 6px;
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(16,24,20,.10),
        0 10px 24px -14px rgba(16,24,20,.45);
    transition: box-shadow .35s ease, border-color .35s ease;
}

.qs-cert-plate img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
}

/* hover：整张抬起 + 微旋 + 光晕跟随鼠标（JS 写 --qs-gx/--qs-gy） */
.qs-cert:hover,
.qs-cert:focus-visible {
    transform: translateY(-10px) rotateX(calc(var(--qs-ry, 0) * 1deg)) rotateY(calc(var(--qs-rx, 0) * 1deg));
    z-index: 5;
    filter: none;
}
.qs-cert:hover .qs-cert-plate,
.qs-cert:focus-visible .qs-cert-plate {
    border-color: rgba(0,0,0,.22);
    box-shadow:
        0 2px 4px rgba(16,24,20,.12),
        0 26px 48px -20px rgba(16,24,20,.55);
}
.qs-cert:hover .qs-cert-plate img { transform: scale(1.04); }

/* 光晕 */
.qs-cert-plate::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
    background: radial-gradient(
        220px circle at var(--qs-gx, 50%) var(--qs-gy, 0%),
        rgba(255, 246, 226, .75),
        rgba(255, 246, 226, 0) 62%
    );
    mix-blend-mode: screen;
}
.qs-cert:hover .qs-cert-plate::after,
.qs-cert:focus-visible .qs-cert-plate::after { opacity: 1; }

/* 文字标签 */
.qs-cert-meta {
    display: block;
    margin-top: 8px;
    line-height: 1.35;
}
.qs-cert-meta em {
    display: block;
    font-style: normal;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .55;
}
.qs-cert-meta strong {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
}
.qs-cert-meta small {
    display: block;
    font-size: 10.5px;
    opacity: .58;
}

/* ------------------------------------------------------------ 入场动效 */

.qs-reveal {
    opacity: 0;
    transform: translateY(18px);
    /* 兜底：即使 IntersectionObserver 因布局变化没触发，
       2 秒后也自动浮现，绝不留下空白区块 */
    animation: qs-failsafe .7s ease 1.8s forwards;
}
@keyframes qs-failsafe {
    to { opacity: 1; transform: none; }
}
.qs-reveal.qs-in {
    opacity: 1;
    transform: none;
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
/* 逐张延迟 */
.qs-in .qs-cert,
.qs-crown-row.qs-in .qs-cert {
    transition-delay: calc(var(--qs-i, 0) * 70ms);
}

.qs-scope-note { margin-top: 30px; }============
   2026-10-23 · 批注5 重做（第二版）：#quality-records 改为
   「文档索引列表 + 指针跟随预览」
   --------------------------------------------------------------------------
   用户反馈：「图片放的有点不对，另外这个证书展示效果还有没有更好的选择」。

   第一版的问题是「7 张缩略图铺开成皇冠」—— 证书是文档，不是商品；
   缩小到 26~36% 宽度后，纸面上的字完全不可读，反而丧失了「可审阅」的
   说服力。皇冠造型也只是把卡片摆成拱形，信息结构没变。

   第二版改为设计参考里的主流做法（shadcn 的 awards pointer-following
   preview 一类）：
     左侧  · 一个大尺寸文档预览（可读，跟随右侧悬停的条目切换）
     右侧  · 文档索引列表（分组、标题、编号、外链箭头）
     底部  · 工厂照片横条（横向滚动，作为佐证而非主角）

   为什么这样更好：
     1. 证书的价值在「能看清内容」，大图才成立
     2. 列表比宫格更快扫读（7 条一屏看完）
     3. 预览跟随指针是一种低成本高级感，且不牺牲信息密度
   ========================================================================== */

.ql-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px 52px;
    align-items: start;
    margin-top: 10px;
}

/* ------------------------------------------------ 左：大文档预览 */

.ql-preview { position: sticky; top: 26px; }

.ql-preview-stage {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(160deg, #f4f1e8, #e8e3d6);
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 24px 60px -34px rgba(16, 24, 20, .55);
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}

.ql-preview-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity .5s ease, transform .7s cubic-bezier(.2,.7,.2,1);
    padding: 8px;
    box-sizing: border-box;
}
.ql-preview-img.is-active {
    opacity: 1;
    transform: scale(1);
}

/* 预览右下角的光晕，跟随指针 */
.ql-preview-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .45s ease;
    background: radial-gradient(
        360px circle at var(--ql-gx, 50%) var(--ql-gy, 50%),
        rgba(255, 248, 226, .55),
        rgba(255, 248, 226, 0) 60%
    );
    mix-blend-mode: soft-light;
}
.ql-preview:hover .ql-preview-glow { opacity: 1; }

.ql-preview-kind {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    color: #2a332c;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(6px);
    z-index: 2;
}

.ql-preview-meta { margin-top: 16px; }

.ql-preview-eyebrow {
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .5;
    margin: 0 0 7px;
}
.ql-preview-meta h3 {
    font-size: 21px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -.01em;
    margin: 0 0 6px;
}
.ql-preview-sub {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    opacity: .62;
    margin: 0;
}
.ql-dot { opacity: .45; }

/* ------------------------------------------------ 右：文档索引列表 */

.ql-index { padding-top: 4px; }

.ql-index-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .5;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .14);
}

.ql-group {
    font-size: 9.5px;
    letter-spacing: .11em;
    text-transform: uppercase;
    opacity: .42;
    margin: 20px 0 6px;
}
.ql-group:first-of-type { margin-top: 0; }

.ql-row {
    display: grid;
    grid-template-columns: 1fr auto 18px;
    align-items: center;
    gap: 14px;
    padding: 13px 4px 13px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .11);
    text-decoration: none;
    color: inherit;
    transition: padding-left .3s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
    position: relative;
}
/* 左侧短竖线：悬停时出现，指示"当前预览的是这条" */
.ql-row::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 2px;
    height: 62%;
    background: currentColor;
    opacity: .55;
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
    transform-origin: center;
}
.ql-row.is-active,
.ql-row:hover,
.ql-row:focus-visible {
    padding-left: 8px;
}
.ql-row.is-active::before,
.ql-row:hover::before,
.ql-row:focus-visible::before {
    transform: translateY(-50%) scaleY(1);
}
.ql-index:hover .ql-row:not(.is-active) { opacity: .62; }
.ql-index:hover .ql-row.is-active { opacity: 1; }

.ql-row-title {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.005em;
}
.ql-row-code {
    font-size: 10.5px;
    letter-spacing: .02em;
    opacity: .5;
    font-variant-numeric: tabular-nums;
}
.ql-row-arrow {
    font-size: 13px;
    opacity: .4;
    transition: transform .3s ease, opacity .3s ease;
    justify-self: end;
}
.ql-row:hover .ql-row-arrow,
.ql-row.is-active .ql-row-arrow {
    transform: translate(2px, -2px);
    opacity: .9;
}

/* ------------------------------------------------ 底：工厂照片带 */

.ql-film {
    grid-column: 1 / -1;
    margin-top: 12px;
    padding-top: 22px;
    border-top: 1px solid rgba(0, 0, 0, .14);
}

.ql-film-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .5;
    margin: 0 0 14px;
}

.ql-film-track {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.ql-film-item {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 4 / 3;
    background: #1b241f;
}
.ql-film-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease;
    filter: grayscale(.28) contrast(1.02);
}
.ql-film-item:hover img {
    transform: scale(1.06);
    filter: grayscale(0) contrast(1.04);
}
.ql-film-item figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 22px 9px 8px;
    font-size: 10px;
    letter-spacing: .02em;
    color: #f1eee3;
    background: linear-gradient(to top, rgba(14, 21, 18, .78), rgba(14, 21, 18, 0));
}

.ql-film-note {
    margin: 12px 0 0;
    font-size: 11px;
    opacity: .55;
}

/* ------------------------------------------------ 响应式 */

@media (max-width: 1080px) {
    .ql-layout { grid-template-columns: 1fr; gap: 30px; }
    .ql-preview { position: relative; top: 0; }
    .ql-preview-stage { aspect-ratio: 4 / 3; }
    .ql-film-track { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .ql-preview-stage { aspect-ratio: 3 / 4; }
    .ql-preview-meta h3 { font-size: 17px; }
    .ql-row { grid-template-columns: 1fr 16px; gap: 10px; }
    .ql-row-code { display: none; }
    .ql-row-title { font-size: 13.5px; }
    .ql-film-track { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .ql-preview-stage,
    .ql-preview-img,
    .ql-film-item img,
    .ql-row { transition: none !important; }
}

/* ----- 2026-10-23 批注5 v2 修正 -----
   问题1：预览区用 position:sticky，但它的高度超过了左右两栏的可用高度，
          导致下方的 meta 文字被底部「工厂照片带」压住/重叠。
   问题2：预览图用 object-fit:contain + padding，纸面没有铺满容器，
          看起来像浮在灰底上的小图，缺少「文档展示」的份量。
   修法：取消 sticky（改成普通块级，让两栏自然等高），
        预览图改 cover 且去 padding，让纸面填满。 */

.ql-preview {
    position: relative !important;
    top: auto !important;
}

.ql-preview-stage {
    aspect-ratio: 3 / 4;
    /* 纸面本身是白的，背景改浅一点避免"浮起"感 */
    background: linear-gradient(160deg, #f7f5ef, #efece2);
}

.ql-preview-img {
    object-fit: cover !important;
    padding: 0 !important;
    object-position: top center !important;
}

/* 给 meta 留出与下方照片带的间距，避免看起来粘连 */
.ql-preview-meta {
    margin-top: 18px;
    margin-bottom: 4px;
}

/* 底部照片带只在两栏之后开始，明确换行 */
.ql-film {
    grid-column: 1 / -1;
    margin-top: 26px !important;
}

/* ==========================================================================
   2026-10-23 · 批注1/2/3 第三版：#quality-records 改「横向档案架」
   --------------------------------------------------------------------------
   用户：「再换一种设计样式，我感觉这个也不太行」「去掉这一排照片」
         「内容调整一下，跟展示正式实力比较不搭配」

   前两版的问题：
     v1 皇冠  —— 7 张缩略图摆拱形，字不可读
     v2 列表+大图 —— 结构对了，但左大右小的不对称让页面重心偏移，
                  且照片带喧宾夺主

   v3 换成「档案架 / archive shelf」：
     7 份文档横向一字排开，像档案馆里抽出来的卷宗
       · 每份是一张纸，带档案编号（01–07）和类型标签
       · 横向可滚动，靠近边缘的自动淡出（mask）
       · 悬停任意一份 -> 下方「阅读区」展开该文档的说明与元数据
     这样既保留了文档的实体感（纸面），又不需要牺牲可读性，
     且横向排布天然适合 7 份这个数量。
   ========================================================================== */

/* ---------- 档案架 ---------- */

.qd-shelf { margin-top: 26px; }

.qd-shelf-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .55;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .14);
    margin-bottom: 22px;
}

.qd-track {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

/* 每份文档 */
.qd-sheet {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.qd-sheet:hover,
.qd-sheet:focus-visible,
.qd-sheet.is-active { transform: translateY(-8px); }

.qd-sheet-paper {
    display: block;
    position: relative;
    aspect-ratio: 3 / 4.15;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 3px;
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(16, 24, 20, .10),
        0 12px 22px -14px rgba(16, 24, 20, .5);
    transition: box-shadow .4s ease, border-color .4s ease;
}
.qd-sheet:hover .qd-sheet-paper,
.qd-sheet.is-active .qd-sheet-paper {
    border-color: rgba(0, 0, 0, .3);
    box-shadow:
        0 3px 6px rgba(16, 24, 20, .14),
        0 30px 50px -22px rgba(16, 24, 20, .6);
}

.qd-sheet-paper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    /* 未激活的稍微压暗，激活的恢复 */
    filter: saturate(.92) brightness(.99);
    transition: filter .4s ease;
}
.qd-sheet:hover .qd-sheet-paper img,
.qd-sheet.is-active .qd-sheet-paper img { filter: none; }

/* 档案编号：像馆藏编号一样挂在纸角 */
.qd-sheet-no {
    position: absolute;
    top: 7px;
    left: 7px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    color: #16201b;
    background: rgba(255, 255, 255, .9);
    padding: 2px 5px;
    border-radius: 2px;
    line-height: 1.3;
}

.qd-sheet-kind {
    position: absolute;
    right: 6px;
    bottom: 6px;
    font-size: 8px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #f2efe4;
    background: rgba(22, 32, 27, .74);
    padding: 2px 5px;
    border-radius: 2px;
    line-height: 1.3;
}

.qd-sheet-cap {
    display: block;
    margin-top: 11px;
}
.qd-cap-group {
    display: block;
    font-size: 8.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .45;
    margin-bottom: 4px;
}
.qd-sheet-cap strong {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.005em;
}
.qd-sheet-cap small {
    display: block;
    font-size: 9.5px;
    opacity: .5;
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

/* ---------- 阅读区：悬停时显示该文档的说明 ---------- */

.qd-reader {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 40px;
    margin-top: 30px;
    padding: 22px 0 4px;
    border-top: 1px solid rgba(0, 0, 0, .14);
    min-height: 132px;
}

.qd-reader-group {
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .48;
    margin: 0 0 8px;
}
.qd-reader-main h3 {
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -.01em;
    margin: 0 0 8px;
    line-height: 1.25;
}
.qd-reader-main p[data-qd-desc] {
    font-size: 13px;
    line-height: 1.62;
    opacity: .74;
    margin: 0;
    max-width: 58ch;
}

.qd-reader-meta {
    margin: 0;
    display: grid;
    gap: 9px;
    align-content: start;
}
.qd-reader-meta div {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 10px;
    align-items: baseline;
}
.qd-reader-meta dt {
    font-size: 9.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .45;
}
.qd-reader-meta dd {
    margin: 0;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    opacity: .8;
}

/* 切换时的轻微淡入 */
.qd-reader.is-swapping .qd-reader-main { opacity: 0; }
.qd-reader-main { transition: opacity .18s ease; }

/* ---------- 五道质量关 ---------- */

.qd-gates {
    display: grid;
    grid-template-columns: .85fr 1.35fr;
    gap: 46px;
    margin-top: 52px;
    padding-top: 34px;
    border-top: 1px solid rgba(0, 0, 0, .14);
    align-items: start;
}

.qd-gates-intro h3 {
    font-size: clamp(26px, 2.6vw, 34px);
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -.02em;
    margin: 10px 0 14px;
}
.qd-gates-intro > p:last-child {
    font-size: 13.5px;
    line-height: 1.68;
    opacity: .74;
    margin: 0;
    max-width: 40ch;
}

.qd-gate-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: qdgate;
}
.qd-gate {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.qd-gate:first-child { padding-top: 0; }
.qd-gate-no {
    font-size: 10px;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
    opacity: .42;
    padding-top: 3px;
}
.qd-gate h4 {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 5px;
    letter-spacing: -.005em;
}
.qd-gate p {
    font-size: 12.5px;
    line-height: 1.6;
    opacity: .66;
    margin: 0;
    max-width: 56ch;
}

/* 窄屏保持可读 */

/* ==========================================================================
   2026-10-23 · 批注6：#client-reviews 按 Trustpilot / Google Reviews 风格重做
   --------------------------------------------------------------------------
   用户：「这个客户评价中心我感觉有必要改一改，我后期有可能接入 Trustpilot
         或者 Google Reviews，你可以按照他们的风格来设计」。

   两家共同的视觉语言：
     · 顶部一条「汇总条」：大字总分 + 星星 + 评价数量 + 五档分布条
     · 下方评价卡片网格：头像 / 姓名 / 公司 / 星级 / 正文 / 已认证标记
     · 星级用品牌色实心星，未满分的显示半星位置（这里用行内宽度控制）

   为了「后期能接真实数据」，结构上做了三件事：
     1. 汇总条的分数、总数、各档条数都是独立元素（data-* 可被外部脚本回填）
     2. 每张卡片带 data-rv-card 索引与 data-rv-stars，可整体替换
     3. 明确的 source 占位（Source: placeholder），接真数据时换成
        Trustpilot / Google 的品牌标识，不用改版式
   ========================================================================== */

.rv-reviews { padding-top: 8px; }

/* ---------- 标题区 ---------- */

.rv-head {
    display: grid;
    grid-template-columns: 1fr .9fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 34px;
}

.rv-head-note {
    padding-top: 6px;
}
.rv-demo-badge {
    display: inline-block;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 9px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 999px;
    opacity: .7;
    margin-bottom: 10px;
}
.rv-head-note p {
    font-size: 12.5px;
    line-height: 1.62;
    opacity: .6;
    margin: 0;
}

/* ---------- 汇总条 ---------- */

.rv-summary {
    display: grid;
    grid-template-columns: 210px 1fr 232px;
    gap: 34px;
    align-items: center;
    padding: 24px 26px;
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .34);
    margin-bottom: 28px;
}

.rv-summary-kicker {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 7px;
}
.rv-summary-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 9px;
}
.rv-summary-stars svg {
    width: 22px;
    height: 22px;
    fill: #1f6b3f;
    flex: 0 0 auto;
}

.rv-summary-avg {
    margin: 0 0 3px;
    font-size: 13px;
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.rv-summary-avg strong {
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -.03em;
    line-height: 1;
}
.rv-summary-avg span { opacity: .6; font-size: 12px; }

.rv-summary-count {
    margin: 0;
    font-size: 11px;
    opacity: .55;
}

/* 分布条 */
.rv-summary-dist { display: grid; gap: 7px; }
.rv-dist-row {
    display: grid;
    grid-template-columns: 46px 1fr 22px;
    gap: 10px;
    align-items: center;
    font-size: 10.5px;
}
.rv-dist-label { opacity: .58; white-space: nowrap; }
.rv-dist-bar {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
    overflow: hidden;
}
.rv-dist-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #1f6b3f;
}
.rv-dist-n {
    text-align: right;
    opacity: .6;
    font-variant-numeric: tabular-nums;
}

.rv-summary-cta p {
    font-size: 11.5px;
    line-height: 1.55;
    opacity: .58;
    margin: 0 0 10px;
}
.rv-summary-source {
    display: inline-block;
    font-size: 10px;
    letter-spacing: .04em;
    opacity: .5;
}
.rv-summary-source b { font-weight: 600; }

/* ---------- 工具条 ---------- */

.rv-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .14);
    margin-bottom: 22px;
}
.rv-toolbar-count {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .55;
}
.rv-filters { display: flex; gap: 7px; }
.rv-filters button {
    font: inherit;
    font-size: 11.5px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .18);
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: .7;
    transition: background .2s ease, opacity .2s ease, border-color .2s ease;
}
.rv-filters button:hover { opacity: 1; border-color: rgba(0, 0, 0, .34); }
.rv-filters button[aria-pressed="true"] {
    background: #16201b;
    border-color: #16201b;
    color: #f2efe4;
    opacity: 1;
}

/* ---------- 卡片网格 ---------- */

.rv-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.rv-card {
    display: flex;
    flex-direction: column;
    padding: 20px 20px 22px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 10px;
    background: rgba(255, 255, 255, .3);
    transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.rv-card:hover {
    border-color: rgba(0, 0, 0, .24);
    background: rgba(255, 255, 255, .52);
    transform: translateY(-2px);
}
.rv-card[hidden] { display: none; }

.rv-card-head {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 11px;
    align-items: center;
    margin-bottom: 14px;
}
.rv-avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    object-fit: cover;
    display: block;
    filter: saturate(.9);
}
.rv-who h3 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 0 0 2px;
    letter-spacing: -.005em;
}
.rv-who p {
    font-size: 10.5px;
    line-height: 1.4;
    opacity: .55;
    margin: 0;
}
.rv-source {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .5;
    white-space: nowrap;
}
.rv-source svg {
    width: 12px;
    height: 12px;
    stroke-width: 1.2;
    color: #1f6b3f;
}

.rv-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
}
.rv-stars { display: flex; gap: 2px; }
.rv-stars svg {
    width: 14px;
    height: 14px;
    fill: #1f6b3f;
}
.rv-score {
    font-size: 11px;
    font-weight: 600;
    opacity: .8;
}
.rv-topic {
    margin-left: auto;
    font-size: 9.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .42;
}

.rv-card blockquote {
    margin: 0;
    font-size: 13px;
    line-height: 1.66;
    opacity: .8;
}

/* ---------- 空状态与页脚 ---------- */

.rv-empty {
    text-align: center;
    font-size: 12.5px;
    opacity: .5;
    padding: 30px 0;
    margin: 0;
}

.rv-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 26px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, .14);
}
.rv-foot p {
    font-size: 12px;
    line-height: 1.6;
    opacity: .55;
    margin: 0;
    max-width: 62ch;
}
.rv-foot-link {
    flex: 0 0 auto;
    font-size: 12.5px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
    white-space: nowrap;
    transition: opacity .2s ease;
}
.rv-foot-link:hover { opacity: .65; }

/* ---------- 响应式 ---------- */

@media (max-width: 1080px) {
    .rv-head { grid-template-columns: 1fr; gap: 20px; }
    .rv-summary { grid-template-columns: 190px 1fr; row-gap: 22px; }
    .rv-summary-cta { grid-column: 1 / -1; }
    .rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .rv-summary { grid-template-columns: 1fr; padding: 20px; }
    .rv-summary-avg strong { font-size: 26px; }
    .rv-grid { grid-template-columns: 1fr; }
    .rv-card-head { grid-template-columns: 40px 1fr; }
    .rv-source { display: none; }
    .rv-foot { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .rv-card, .rv-filters button { transition: none !important; }
    .rv-card:hover { transform: none !important; }
}

/* ==========================================================================
   2026-10-23 · 批注3：首页 materials 段与 /materials/ 页适配重做
   --------------------------------------------------------------------------
   用户：「这个板块的内容可以跟我们的材料页互相搭配一下，本身也是讲材料的，
         我们单独落地的材料页 /materials/ 很多内容跟这里很适配，可以再设计一下」。

   原来首页这段只有 3 个色号 + 一段制程影片，是「概念展示」；
   而 /materials/ 页有 12 个材料族 / 110 个色号 / 3 种构造工艺的完整体系。

   新版把首页这段改成「材料库的缩影」，数据全部对齐材料页：
     · 12 个材料族（与 /materials/ 的 12 族一一对应，含各自数量）
     · 6 个精选色号（从真实 thumbnails 里取，可点进对应族）
     · 3 种构造方式（Extruded 57 / Block 27 / Laminated 26 = 110）
     · 末尾明确「屏幕颜色仅供参考，以实物色卡为准」+ 索取样品入口

   这样首页负责「让你知道我们有这套体系」，材料页负责「让你逐张挑」，
   两层不重复，也避免了首页只有 3 个色号误导客户以为总共就这些。
   ========================================================================== */

.mh-materials { padding-top: 6px; }

/* ---------- 标题区 ---------- */

.mh-head {
    display: grid;
    grid-template-columns: 1fr .95fr;
    gap: 44px;
    align-items: start;
    margin-bottom: 36px;
}

.mh-head-side { padding-top: 8px; }
.mh-head-side p {
    font-size: 14px;
    line-height: 1.66;
    margin: 0 0 14px;
    opacity: .78;
}
.mh-head-link {
    font-size: 13px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
    transition: opacity .2s ease;
}
.mh-head-link:hover { opacity: .6; }

/* ---------- 12 个材料族 ---------- */

.mh-families {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.mh-family {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, .26);
    transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.mh-family:hover {
    border-color: rgba(0, 0, 0, .26);
    background: rgba(255, 255, 255, .5);
    transform: translateY(-3px);
}

.mh-family-img {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e8e5da;
}
.mh-family-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.mh-family:hover .mh-family-img img { transform: scale(1.06); }

.mh-family-txt {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding: 9px 10px 10px;
}
.mh-family-txt strong {
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.005em;
}
.mh-family-txt small {
    font-size: 9.5px;
    opacity: .45;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

/* ---------- 精选色号 ---------- */

.mh-swatches-wrap { margin-top: 40px; }

.mh-sub-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .5;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(0, 0, 0, .13);
    margin-bottom: 18px;
}

.mh-swatches {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.mh-swatch {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.mh-swatch:hover { transform: translateY(-4px); }

.mh-swatch-img {
    display: block;
    aspect-ratio: 1;
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .1);
    background: #fff;
    box-shadow: 0 1px 2px rgba(16,24,20,.08), 0 10px 18px -14px rgba(16,24,20,.45);
    transition: box-shadow .3s ease, border-color .3s ease;
}
.mh-swatch:hover .mh-swatch-img {
    border-color: rgba(0, 0, 0, .24);
    box-shadow: 0 2px 4px rgba(16,24,20,.12), 0 20px 30px -18px rgba(16,24,20,.55);
}
.mh-swatch-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mh-swatch-cap { display: block; margin-top: 9px; }
.mh-swatch-cap strong {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
}
.mh-swatch-cap small {
    display: block;
    font-size: 9.5px;
    opacity: .45;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* ---------- 三种构造方式 ---------- */

.mh-construction {
    display: grid;
    grid-template-columns: .82fr 1.4fr;
    gap: 46px;
    margin-top: 50px;
    padding-top: 32px;
    border-top: 1px solid rgba(0, 0, 0, .13);
    align-items: start;
}

.mh-construction-intro h3 {
    font-size: clamp(24px, 2.4vw, 31px);
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -.02em;
    margin: 10px 0 14px;
}
.mh-construction-intro > p:last-child {
    font-size: 13px;
    line-height: 1.66;
    opacity: .7;
    margin: 0;
    max-width: 38ch;
}

.mh-construction-list { display: grid; gap: 0; }

.mh-construction-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .09);
}
.mh-construction-item:first-child { padding-top: 0; }
.mh-c-no {
    font-size: 9.5px;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
    opacity: .4;
    padding-top: 3px;
}
.mh-construction-item h4 {
    font-size: 14.5px;
    font-weight: 500;
    margin: 0 0 3px;
    letter-spacing: -.005em;
}
.mh-c-count {
    font-size: 10px !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .45 !important;
    margin: 0 0 7px !important;
}
.mh-construction-item p {
    font-size: 12.5px;
    line-height: 1.6;
    opacity: .68;
    margin: 0;
    max-width: 58ch;
}

/* ---------- 页脚 ---------- */

.mh-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-top: 34px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, .13);
}
.mh-foot p {
    font-size: 11.5px;
    line-height: 1.6;
    opacity: .55;
    margin: 0;
    max-width: 66ch;
}
.mh-foot-link {
    flex: 0 0 auto;
    font-size: 12.5px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
    white-space: nowrap;
    transition: opacity .2s ease;
}
.mh-foot-link:hover { opacity: .62; }

/* ---------- 响应式 ---------- */

@media (max-width: 1180px) {
    .mh-head { grid-template-columns: 1fr; gap: 20px; }
    .mh-families { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mh-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mh-construction { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 700px) {
    .mh-families { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .mh-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .mh-family-txt strong { font-size: 11px; }
    .mh-construction-intro h3 { font-size: 23px; }
    .mh-construction-item { grid-template-columns: 24px 1fr; gap: 10px; }
    .mh-foot { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .mh-family, .mh-family-img img, .mh-swatch, .mh-swatch-img { transition: none !important; }
    .mh-family:hover, .mh-swatch:hover { transform: none !important; }
}

/* ----- 2026-10-23 批注3 修正：卡片被拉伸 + 色号标签换行难看 -----
   现象：12 族卡片在 grid 里被拉成等高，图片只有 16/10，
        下方空出一大片半透明白（在深色底上就是灰块）。
   修法：grid 加 align-items:start，卡片按内容高度排列。 */

.mh-families { align-items: start !important; }
.mh-swatches { align-items: start !important; }

/* 深色底上的卡片底色调低，避免灰块感 */
.mh-family {
    background: rgba(255, 255, 255, .07) !important;
}
.mh-family:hover {
    background: rgba(255, 255, 255, .16) !important;
}
.mh-family-txt strong {
    color: #eef1e7 !important;
}
.mh-family-txt small {
    color: rgba(238, 241, 231, .55) !important;
    opacity: 1 !important;
}

/* 色号标签：编号不换行 */
.mh-swatch-cap strong {
    color: #eef1e7 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mh-swatch-cap small {
    color: rgba(238, 241, 231, .52) !important;
    opacity: 1 !important;
    white-space: nowrap;
    font-size: 9px !important;
}

/* 精选色号在深色底上需要浅色描边 */
.mh-swatch-img {
    border-color: rgba(255, 255, 255, .16) !important;
}
.mh-swatch:hover .mh-swatch-img {
    border-color: rgba(255, 255, 255, .38) !important;
}

/* 分隔线与说明文字在深色底上要提亮 */
.mh-sub-head {
    border-bottom-color: rgba(255, 255, 255, .18) !important;
    color: rgba(238, 241, 231, .62) !important;
    opacity: 1 !important;
}
.mh-head-side p {
    color: rgba(238, 241, 231, .8) !important;
    opacity: 1 !important;
}
.mh-construction {
    border-top-color: rgba(255, 255, 255, .18) !important;
}
.mh-construction-item {
    border-bottom-color: rgba(255, 255, 255, .1) !important;
}
.mh-construction-intro > p:last-child,
.mh-construction-item p {
    color: rgba(238, 241, 231, .74) !important;
    opacity: 1 !important;
}
.mh-c-count {
    color: rgba(238, 241, 231, .5) !important;
    opacity: 1 !important;
}
.mh-c-no {
    color: rgba(238, 241, 231, .45) !important;
    opacity: 1 !important;
}
.mh-foot {
    border-top-color: rgba(255, 255, 255, .18) !important;
}
.mh-foot p {
    color: rgba(238, 241, 231, .62) !important;
    opacity: 1 !important;
}