/* =========================================================================
   XINZERA · 馨之诚洁具 — 样式表
   章节：1 基础  2 页头  3 首屏  4 走马灯  5 设计理念  6 产品  7 编辑区
        8 关于  9 页脚  10 商品详情  11 内页  12 工厂与联系  13 响应式
   ========================================================================= */

/* ---------------------------------------------------------------- 1 基础 */

:root{
  --paper:#f6f4ef;
  --cream:#eeebe4;
  --ink:#252924;
  --muted:#717771;
  --line:#dcded6;
  --forest:#32453d;
  --forest-deep:#263a30;
  --section-y:clamp(52px,5.4vw,76px);
  --accent:#ae815d;
  --white:#fff;
  --serif:Georgia,'Songti SC','SimSun',serif;
  --sans:'Segoe UI','PingFang SC','Microsoft YaHei',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
/* 首页配色：沿用产品目录页那一档浅绿，首屏作为更亮的浅色面板浮在其上，
   让影片与页面底色拉开层次，而不是糊成一片。 */
body[data-page="home"]{background:#e8eee8}
body[data-page="home"] .product-note{color:#7d8a7e}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
button:focus-visible,a:focus-visible{outline:2px solid #ad7953;outline-offset:4px}
section[id]{scroll-margin-top:88px}

/* ---------------------------------------------------------------- 2 页头 */

.site-header{height:84px;padding:0 clamp(24px,5.5vw,88px);display:flex;align-items:center;justify-content:space-between;background:var(--forest-deep);position:relative;z-index:20}
.brand{display:inline-flex;align-items:center;gap:11px;white-space:nowrap}
.brand-symbol{display:block;width:38px;height:38px;flex:none}
.brand-name{display:flex;flex-direction:column;gap:2px;line-height:1}
.brand-name strong{font-family:Georgia,serif;font-size:20px;letter-spacing:.16em;font-weight:400;color:#f7f4ea}
.brand-name small{font-size:9px;letter-spacing:.13em;margin-top:4px;font-weight:700;color:#a9b8a9}
.desktop-nav{display:flex;gap:42px;margin-left:auto;margin-right:50px}
.desktop-nav a,.footer-nav a{font-size:13px;font-weight:500;letter-spacing:.08em;transition:color .2s}
.desktop-nav a{color:#dfe6dc}
.desktop-nav a:hover,.desktop-nav a[aria-current=page]{color:#d6b692}
.footer-nav a:hover{color:var(--accent)}
.header-actions{display:flex;align-items:center;gap:23px}
/* 语言切换是导航栏里的一项，与「产品系列」共用 .nav-drop 的下拉外观。
   它带明确的「语言 / Language / اللغة」文字标签，所以即使 RTL 下导航镜像，
   也只是在导航内部小幅移动，不会像原来那样从右上角跳到左侧。 */
.nav-lang-button{border:0;background:none;color:#dfe6dc;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;letter-spacing:.08em;padding:0;transition:color .2s}
.nav-lang-button:hover,.nav-lang-button[aria-expanded="true"]{color:#d6b692}
.lang-caret{font-size:9px;line-height:1;transition:transform .2s}
.nav-lang-button[aria-expanded="true"] .lang-caret{transform:rotate(180deg)}
/* 下拉里的语言选项：与系列链接同一套外观，当前语言带勾选标记。 */
.nav-drop-menu button{border:0;background:none;color:#dfe6dc;display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:start;padding:10px 20px;font-size:13px;letter-spacing:.05em;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.nav-drop-menu button:hover{background:#3a5445;color:#f0d5b4}
.nav-drop-menu button.is-active{color:#d6b692}
.nav-drop-menu button.is-active::after{content:"✓";font-size:11px}
.header-cta{height:37px;padding:0 18px;background:#f5f3ec;color:#26362c;display:inline-flex;align-items:center;gap:22px;font-size:11px;letter-spacing:.06em;transition:background .2s,transform .2s}
.header-cta:hover{background:#dfe8db;transform:translateY(-2px)}
.header-cta span:last-child{font-size:15px}
.header-admin{height:37px;padding:0 17px;border:1px solid rgba(247,244,234,.42);color:#eeece3;display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.06em;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.header-admin:hover,.header-admin:focus-visible{background:#f5f3ec;border-color:#f5f3ec;color:#26362c}
/* 「产品系列」下拉：桌面端悬停或点击展开，条目由 series.json 渲染。
   ::after 是一段透明"桥"，避免鼠标从条目移向菜单时穿过空隙而收起。 */
.nav-drop{position:relative;display:flex;align-items:center;gap:6px}
.nav-drop::after{content:"";position:absolute;top:100%;left:-20px;right:-20px;height:20px}
.nav-drop-toggle{border:0;background:none;color:#9aab9c;cursor:pointer;padding:3px 2px;font-size:11px;line-height:1;transition:color .2s,transform .2s}
.nav-drop:hover .nav-drop-toggle,.nav-drop-toggle[aria-expanded="true"]{color:#d6b692}
.nav-drop-toggle[aria-expanded="true"]{transform:rotate(180deg)}
.nav-drop-menu{position:absolute;z-index:30;top:calc(100% + 16px);left:-18px;min-width:196px;background:#2e4438;border:1px solid rgba(247,244,234,.15);box-shadow:0 22px 44px #16241c52;display:flex;flex-direction:column;padding:8px 0}
.nav-drop-menu[hidden]{display:none}
.nav-drop-menu a{padding:10px 20px;font-size:13px;letter-spacing:.05em;white-space:nowrap;transition:background .2s,color .2s}
.nav-drop-menu a:hover{background:#3a5445;color:#f0d5b4}
.menu-toggle{display:none;border:0;background:none;width:30px;height:30px;padding:4px;cursor:pointer}
.menu-toggle span{display:block;height:1px;background:#f7f4ea;margin:6px 0}
.mobile-nav{display:none}

/* ---------------------------------------------------------------- 3 首屏 */

/* 首屏共用的字体与按钮样式。 */
.eyebrow,.section-kicker{display:flex;align-items:center;gap:13px;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.22em}
.eyebrow-line{height:1px;width:27px;background:var(--accent)}
.primary-button{height:53px;min-width:188px;margin-top:26px;background:var(--forest);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 17px 0 22px;font-size:14px;letter-spacing:.07em;transition:background .2s,transform .2s}
.primary-button:hover{background:#3f5a4c;transform:translateY(-2px)}
.button-arrow{font-size:19px;font-weight:300}

/* 首页首屏：满幅静音循环影片 + 左侧文案。按需求不设暂停按钮，
   点击画面也不跳转——这一屏只有「了解产品系列」一个出口。 */
.video-page{position:relative;isolation:isolate;overflow:hidden;background:#e8eee8;min-height:clamp(520px,calc(76svh - 40px),760px);display:flex}
.video-page-media{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.video-page-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(243,247,242,.97) 0%,rgba(243,247,242,.90) 30%,rgba(243,247,242,.40) 58%,rgba(243,247,242,.06) 82%,rgba(243,247,242,0) 100%)}
.video-page-copy{position:relative;z-index:2;width:min(100%,1200px);margin-inline:auto;padding:clamp(64px,10vh,116px) 32px clamp(56px,8vh,92px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;color:var(--ink)}
.video-page-copy .section-kicker{color:#8a998b;font-weight:600}
.video-page-copy h1{font-size:clamp(34px,3.6vw,54px);line-height:1.24;letter-spacing:-.05em;font-weight:400;margin-top:20px}
.video-page-copy h1 span{font-family:var(--serif);font-style:italic;color:#6d8a77;letter-spacing:-.045em}
.video-page-copy h1 em{font-family:var(--serif);font-style:italic;color:#6d8a77;letter-spacing:-.045em}
.video-page-copy>p:last-of-type{max-width:470px;margin-top:18px;font-size:16px;line-height:1.95;color:#5d655e;letter-spacing:.02em}
.video-page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:28px}
.video-page-actions .primary-button{margin-top:0}


/* ------------------------------------------------------- 4 版面基线 */

.section-shell{width:min(100% - 64px,1200px);margin-inline:auto}

/* ------------------------------------------------------------ 5 设计理念 */

/* 设计理念在左、浴缸图在右并排；图片列撑满整行高度，右侧不留空档。 */
.philosophy-layout{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(30px,4.6vw,84px);padding-block:var(--section-y) 0;align-items:stretch}
.approach{min-width:0}
.approach .section-kicker{color:#8a998b;font-weight:600}
.approach-title{font-weight:400;letter-spacing:-.05em;font-size:clamp(30px,2.8vw,42px);line-height:1.26;margin-top:18px}
.approach-title em{font-family:var(--serif);font-style:italic;color:#7a907f;letter-spacing:-.055em;font-weight:400}
.approach-lead{max-width:620px;margin-top:18px;font-size:16px;line-height:1.95;color:#6d756c;letter-spacing:.02em}
.principles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,32px) clamp(22px,2.8vw,44px);margin-top:clamp(28px,3.2vw,44px);border-top:1px solid #d3ddd3;padding-top:clamp(20px,2.4vw,30px)}
.principle{min-width:0}
.principle-index{display:block;font-family:var(--serif);font-style:italic;font-size:14px;color:#b0b9ac;letter-spacing:.06em}
.principle h3{margin-top:11px;font-size:19px;font-weight:500;letter-spacing:.02em}
.principle p{margin-top:9px;font-size:14px;line-height:1.95;color:#767e74;letter-spacing:.03em}
/* 图片撑满右列高度，图注贴在图下方，右侧不留空档。 */
.approach-photo{display:flex;flex-direction:column;min-width:0;min-height:0;margin:0}
.approach-photo img{flex:1 1 0;min-height:clamp(260px,26vw,430px);width:100%;object-fit:cover;object-position:50% 54%}
.approach-photo figcaption{margin:11px 0 0;font-size:12px;letter-spacing:.14em;color:#7f8d80;text-transform:uppercase}
.text-link{margin-top:29px;display:inline-flex;align-items:center;gap:30px;border-bottom:1px solid #929f91;padding-bottom:12px;font-size:14px;font-weight:600;letter-spacing:.08em;transition:gap .2s,color .2s}
.text-link:hover{gap:38px;color:var(--accent)}
.text-link span:last-child{font-size:18px;font-weight:400}
.text-link.light{border-color:#c3cec2;color:#f7f7f0}
.text-link.light:hover{color:#e1c19d}

/* 页面级标题共用同一套字重与强调样式。 */
.products-header h2,.about h2{font-weight:400;letter-spacing:-.05em;font-size:clamp(36px,3.9vw,56px);line-height:1.3}
.products-header h2 em,.about h2 em{font-family:var(--serif);font-style:italic;color:#7a907f;letter-spacing:-.055em;font-weight:400}

/* -------------------------------------------------------- 6 产品与选购 */

.products-section{padding:var(--section-y) 0 calc(var(--section-y) * .85)}
.products-header{display:flex;align-items:end;justify-content:space-between;gap:clamp(24px,4vw,64px)}
.products-header>div{min-width:0}
.products-header h2{margin-top:14px}
.products-header p{max-width:385px;font-size:16px;line-height:1.75;color:#7c837a;letter-spacing:.04em;padding-bottom:11px}
.products-intro{margin-top:14px;max-width:520px;font-size:15px;line-height:1.95;color:#767e74;letter-spacing:.03em}
.filter-row{display:flex;gap:7px;margin-top:28px;margin-bottom:18px}
.filter-button{border:1px solid #cdd2c9;background:transparent;color:#6e786e;border-radius:100px;padding:10px 19px;min-width:76px;cursor:pointer;font-size:13px;letter-spacing:.04em;transition:background .2s,border-color .2s,color .2s}
.filter-button:hover{border-color:var(--forest);color:var(--forest)}
.filter-button.active{background:var(--forest);border-color:var(--forest);color:#fff}
/* 两级筛选：上面一行选「产品系列」，选定后下面一行出现该系列的「品类」。 */
.filter-rows{display:flex;flex-direction:column;gap:10px;min-width:0}
.filter-row.sub{margin-top:0}
.filter-button.sub-button{min-width:0;padding:8px 15px;font-size:12px}
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.products-section .product-grid{margin-top:26px}
.product-card{min-width:0;transition:transform .3s ease}
.product-card:hover{transform:translateY(-4px)}
.product-art{height:360px;background:#f4f3ee;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.product-art img{width:76%;height:85%;object-fit:contain;transition:transform .4s}
.product-card:hover .product-art img{transform:scale(1.045)}
.product-tag{position:absolute;top:21px;left:21px;z-index:1;color:var(--forest);font-size:11px;font-weight:700;letter-spacing:.15em}
.product-number{position:absolute;bottom:20px;right:22px;color:#8f9a8d;font-family:var(--serif);font-style:italic;font-size:14px;z-index:1}
.product-info{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 3px 0}
.product-info h3{font-size:19px;letter-spacing:.03em;font-weight:500}
.product-info p{font-family:var(--serif);font-size:13px;color:#879087;margin-top:5px;letter-spacing:.07em}
.product-open{height:35px;width:35px;border:1px solid #bac4b7;border-radius:50%;background:none;color:var(--forest);font-size:19px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.product-open:hover{background:var(--forest);border-color:var(--forest);color:#fff}
.product-note{display:flex;align-items:center;gap:9px;margin-top:22px;color:#899187;font-size:13px;line-height:1.6}
.product-note span:first-child{color:#ae815d}
.product-card-description{font-size:14px;line-height:1.75;color:#68766b;margin:12px 3px 0;max-width:36ch}
.empty-products{grid-column:1/-1;min-height:220px;display:grid;place-items:center;color:#8a9589;font-size:13px}
.catalogue-link-wrap{margin-top:26px}
.catalogue-link-wrap .outline-button{margin-top:0}
.outline-button{margin-top:31px;border:1px solid #9fac9e;height:48px;min-width:172px;padding:0 17px;display:inline-flex;align-items:center;justify-content:space-between;gap:30px;font-size:14px;letter-spacing:.08em;transition:background .2s,color .2s}
.outline-button span:last-child{font-size:18px}
.outline-button:hover{background:var(--forest);color:#fff}

/* 选购指引：次级区块，字号比主区块小一档，但共用同一套标题色、
   衬线强调与发丝分隔线。标题区与说明文字并排，省掉一整行竖向堆叠。 */
.guide{padding-block:var(--section-y) 0;max-width:1200px}
.guide-head{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:clamp(26px,4.4vw,80px);align-items:end}
.guide-head h2,.section-subtitle{font-weight:400;letter-spacing:-.048em;font-size:clamp(30px,3.2vw,44px);line-height:1.32;margin-top:14px}
.guide-head h2 em,.section-subtitle em{font-family:var(--serif);font-style:italic;color:#7a907f;letter-spacing:-.055em;font-weight:400}
.guide-list{list-style:none;margin:clamp(26px,3.2vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(22px,3vw,48px)}
.guide-list--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.guide-list li{border-top:1px solid #d3ddd3;padding:19px 0 0}
.guide-index{display:block;font-family:var(--serif);font-style:italic;font-size:14px;color:#b0b9ac;letter-spacing:.06em}
.guide-list h3{margin-top:9px;font-size:17px;font-weight:500;letter-spacing:.02em}
.guide-list p{margin-top:9px;font-size:13.5px;line-height:1.9;color:#767e74;letter-spacing:.03em}
.guide-note{margin:0 0 7px;font-size:12.5px;line-height:1.9;color:#7f8b80;letter-spacing:.03em}

/* 产品系列页：系列一览与品类型说明，与选购指引共用发丝分隔线节奏。 */
.series-overview,.category-explainer{padding-block:var(--section-y) 0}
.category-explainer{padding-bottom:calc(var(--section-y) * .6)}
.series-grid,.category-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(22px,3vw,48px);margin-top:clamp(26px,3.2vw,44px)}
.series-card,.category-cards article{border-top:1px solid #d3ddd3;padding:19px 0 21px;display:flex;flex-direction:column;gap:9px;transition:border-color .2s}
.category-cards article{padding-bottom:0}
.series-card:hover{border-color:var(--forest)}
.series-card-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.series-card-name{font-size:17px;font-weight:500;letter-spacing:.02em;color:#26352b;transition:color .2s}
.series-card:hover .series-card-name{color:var(--forest)}
.series-card-arrow{font-size:13px;color:#8d9c8e;transition:transform .2s,color .2s}
.series-card:hover .series-card-arrow{transform:translate(2px,-2px);color:var(--forest)}
.series-card-meta{font-size:11px;font-weight:700;letter-spacing:.12em;color:#8a998b;text-transform:uppercase}
.series-card-kids{font-size:12.5px;line-height:1.8;color:#78847a;letter-spacing:.03em}
.category-index{display:block;font-family:var(--serif);font-style:italic;font-size:14px;color:#b0b9ac;letter-spacing:.06em}
.category-cards h3{margin-top:9px;font-size:17px;font-weight:500;letter-spacing:.02em}
.category-cards p{margin-top:9px;font-size:13.5px;line-height:1.9;color:#767e74;letter-spacing:.03em}

/* ------------------------------------------------------------ 7 编辑区 */

/* 图片收窄到 38%，文字区占 62%，避免照片在版面里压过文字。 */
.editorial{width:min(100% - 64px,1200px);margin-inline:auto;display:grid;grid-template-columns:clamp(200px,24%,300px) minmax(0,1fr);min-height:360px;background:#3d5145}
.editorial-image{overflow:hidden}
.editorial-image img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;filter:saturate(.76)}
.editorial-copy{background:#3d5145;color:#f7f6f0;padding:30px clamp(24px,3.2vw,50px) 26px clamp(24px,3.2vw,50px);display:flex;flex-direction:column;justify-content:space-between}
.editorial-index,.editorial-bottom{font-size:9px;letter-spacing:.22em;color:#b8c5b8}
.editorial-asterisk{font-family:var(--serif);color:#d8c0a2;font-size:42px}
.editorial h2{font-size:clamp(36px,3.8vw,56px);line-height:1.46;font-weight:400;letter-spacing:-.055em;margin-top:13px;white-space:nowrap}
.editorial h2 span{font-family:var(--serif);font-style:italic;color:#c6d0c2}
.editorial p{max-width:415px;color:#c6d0c5;font-size:16px;line-height:1.85;letter-spacing:.05em;margin-top:15px}
.editorial-moments{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.editorial-moments span{border:1px solid rgba(247,246,240,.3);color:#c9d6c8;padding:6px 13px;font-size:11px;letter-spacing:.1em}

/* 设计理念页的深绿引言带：纯文字，与编辑区共用同一档墨绿。 */
.quote-band{margin-top:var(--section-y);background:#3d5145;color:#f7f6f0;padding:clamp(44px,5.6vw,84px) 0}
.quote-mark{display:block;font-family:var(--serif);color:#d8c0a2;font-size:42px;line-height:1}
.quote-band h2{margin-top:13px;font-size:clamp(30px,3.2vw,46px);line-height:1.44;font-weight:400;letter-spacing:-.055em}
.quote-band h2 span{font-family:var(--serif);font-style:italic;color:#c6d0c2}
.quote-band p{max-width:560px;margin-top:18px;font-size:16px;line-height:1.9;color:#c6d0c5;letter-spacing:.04em}

/* -------------------------------------------------------------- 8 关于 */

.about{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-top:var(--section-y);padding-bottom:calc(var(--section-y) * .85)}
.about-left{display:flex;flex-direction:column;justify-content:space-between}
.about-emblem{height:230px;width:230px;border:1px solid #d1d8ce;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:21px;color:#78907d;margin-left:75px}
.about-emblem img{width:72px;height:72px}
.about-emblem>span:last-child{font-family:var(--serif);font-size:11px;letter-spacing:.2em}
.about-right{padding-top:8px}
.about-right p{max-width:420px;margin-top:16px}
/* 三条要点横向排开，标签压在文字上方，避免整块竖向列表拉高版面。 */
.about-points{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(16px,2.2vw,34px)}
.about-points li{display:block;border-top:1px solid #d8e1d7;padding:12px 0;font-size:13.5px;line-height:1.85;color:#6d756c;letter-spacing:.02em}
.about-point-title{display:block;margin-bottom:7px;font-size:11px;font-weight:700;letter-spacing:.12em;color:#8a998b;text-transform:uppercase}

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

.site-footer{background:var(--forest-deep);color:#f7f8f1;padding:44px clamp(24px,6vw,96px) 0}
.footer-main{max-width:1200px;margin:auto;display:grid;grid-template-columns:1.1fr 1.3fr auto;align-items:start;gap:35px;padding-bottom:40px}
.footer-brand .brand-name strong{font-size:22px}
.footer-brand .brand-name small{font-size:8px}
.footer-main p{font-size:14px;color:#b3c0b3;padding-top:8px;letter-spacing:.04em}
.footer-nav{display:flex;gap:26px;padding-top:10px}
.footer-bottom{border-top:1px solid #ffffff29;max-width:1200px;margin:auto;height:56px;display:flex;align-items:center;gap:32px;color:#9eafa0;font-size:11px;letter-spacing:.12em}
.footer-bottom a{margin-left:auto;color:#fff;border:1px solid #809486;width:29px;height:29px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}

/* --------------------------------------------------------- 10 商品详情 */

.product-dialog{border:0;padding:0;width:min(760px,calc(100vw - 36px));max-height:calc(100vh - 36px);background:var(--paper);box-shadow:0 30px 100px #16241c75}
.product-dialog::backdrop{background:#132219a3;backdrop-filter:blur(4px)}
.product-dialog[open]{display:grid;grid-template-columns:48% 52%}
.dialog-close{position:absolute;top:14px;right:16px;border:0;background:#ffffffb8;color:var(--forest);font-size:26px;width:35px;height:35px;cursor:pointer;z-index:2}
.dialog-art{min-height:360px;background:#e9eae4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:26px 0}
.dialog-stage{flex:1;width:100%;min-height:0;display:flex;align-items:center;justify-content:center}
.dialog-stage img{width:90%;height:330px;object-fit:contain}
.dialog-thumbs{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;padding:0 20px}
.dialog-thumb{width:52px;height:52px;padding:0;border:1px solid #c8d2c6;background:#f7f7f2;cursor:pointer;display:grid;place-items:center;transition:border-color .2s,transform .2s}
.dialog-thumb img{width:100%;height:100%;object-fit:contain}
.dialog-thumb:hover{border-color:var(--forest);transform:translateY(-2px)}
.dialog-thumb.is-active{border-color:var(--forest);box-shadow:0 0 0 2px #32453d33}
.dialog-content{padding:38px 36px 28px;overflow:auto}
.dialog-kicker{font-size:10px;letter-spacing:.2em;color:var(--accent)}
.dialog-content h2{font-size:30px;font-weight:400;margin-top:11px}
.dialog-content>p:not(.dialog-disclaimer){margin-top:15px;font-size:15px;line-height:2;color:#667266}
.dialog-specs{margin-top:19px;border-top:1px solid #d5dbd1}
.dialog-specs div{border-bottom:1px solid #d5dbd1;padding:8px 0;display:flex;justify-content:space-between;gap:15px;font-size:13px}
.dialog-specs span:first-child{color:#8c9b8e}
.dialog-disclaimer{margin-top:16px;color:#9aa498;font-size:10px;line-height:1.7}
.product-art.brass img,.dialog-art.brass img{filter:sepia(.7) saturate(.7) hue-rotate(345deg) brightness(.98)}
.product-art.graphite img,.dialog-art.graphite img{filter:grayscale(.7) brightness(.68)}

/* 商品图可点击：给出可见的放大提示，键盘也能聚焦 */
.product-art img[data-zoom]{cursor:zoom-in}
.product-art img[data-zoom]:focus-visible{outline:2px solid var(--forest);outline-offset:2px}

/* ------------------------------------------------------------ 高清大图灯箱 */
.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;overflow:visible}
.lightbox::backdrop{background:#0d1712e8;backdrop-filter:blur(3px)}
/* 用 flex 列布局把图片与标题栏叠在整屏上；点图片或空白处关闭 */
.lightbox[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100vw;max-width:100vw;height:100vh;max-height:100vh;gap:clamp(10px,1.6vh,20px);padding:clamp(14px,3vh,40px)}
.lightbox-body{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;flex:1;width:100%}
.lightbox-body img{max-width:min(1500px,92vw);max-height:100%;width:auto;height:auto;object-fit:contain;
  background:#fff;box-shadow:0 30px 90px #000000a6;cursor:zoom-out}
.lightbox-close{position:fixed;top:clamp(12px,2.4vh,26px);right:clamp(12px,2.4vw,30px);z-index:3;
  width:44px;height:44px;border:0;border-radius:50%;background:#f7f4ea;color:#2a4234;
  font-size:26px;line-height:1;cursor:pointer;box-shadow:0 6px 20px #00000059}
.lightbox-close:hover{background:#fff}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:46px;height:46px;border:0;border-radius:50%;background:#f7f4eac9;color:#243a2c;
  font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lightbox-nav:hover{background:#fff}
.lightbox-nav.prev{left:clamp(6px,1.6vw,26px)}
.lightbox-nav.next{right:clamp(6px,1.6vw,26px)}
/* 必须显式声明：上面的 display:flex 会盖掉浏览器默认的 [hidden]{display:none}，
   导致只有一张图时翻页箭头仍然可见 */
.lightbox-nav[hidden]{display:none}
.lightbox-bar{display:flex;align-items:center;gap:clamp(12px,2vw,26px);flex-wrap:wrap;justify-content:center;
  color:#eef3ea;font-size:15px;letter-spacing:.02em}
.lightbox-bar p{margin:0}
.lightbox-download{color:#f0e2cc;font-size:13px;text-decoration:none;border-bottom:1px solid #f0e2cc7a;padding-bottom:2px}
.lightbox-download:hover{color:#fff;border-bottom-color:#fff}
@media(max-width:700px){
  .lightbox-body img{max-width:94vw}
  .lightbox-nav{width:38px;height:38px;font-size:23px}
  .lightbox-bar{font-size:13px}
}

/* ------------------------------------------------------------ 11 内页 */

.home-search,.catalogue-search{display:flex;align-items:center;gap:24px}
/* 首页搜索已收进「精选系列」标题右侧，不再单独占一条色带。 */
.home-search{display:flex;flex-direction:column;align-items:stretch;gap:9px;width:min(100%,340px);flex:none}
.home-search label{white-space:nowrap;color:#7d8b7e;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.home-search .search-field{max-width:none;height:44px;background:transparent;border:0;border-bottom:1px solid #b9c6b9}
.home-search .search-field button{min-width:64px;background:#8a5f3c;color:#fff;font-size:12px;letter-spacing:.08em}
.home-search .search-field button:hover{background:#77502f}
.home-search label,.catalogue-search label{white-space:nowrap;color:#3c5144;font-size:13px;font-weight:600;letter-spacing:.06em}
.search-field{display:flex;align-items:center;min-width:0;flex:1;max-width:650px;background:#fff;border:1px solid #cad5c9;height:46px;transition:border-color .2s,box-shadow .2s}
.search-field:focus-within{border-color:var(--forest);box-shadow:0 0 0 3px #32453d1f}
.search-field>span{font-size:27px;line-height:1;color:#526b58;padding:0 13px 4px 17px}
.search-field input[type=search]{min-width:0;flex:1;height:100%;border:0;outline:0;background:transparent;color:#263b30;font:15px var(--sans)}
.search-field input[type=search]::placeholder{color:#7f8e83}
.search-field button{height:100%;min-width:85px;border:0;background:#8a5f3c;color:#fff;cursor:pointer;font-size:13px;transition:background .2s}
.search-field button:hover{background:#77502f}

.page-intro{position:relative;overflow:hidden;background:#e8eee8;padding:calc(var(--section-y) * .92) 0}
.page-intro .section-shell{position:relative;z-index:1}
.page-intro h1{font-weight:400;font-size:clamp(48px,5vw,74px);line-height:1.23;letter-spacing:-.055em;max-width:850px;margin-top:16px}
.page-intro h1 em,.factory-copy h2 em,.contact-layout h2 em{font-family:var(--serif);font-weight:400;color:#738d79}
.page-intro p{max-width:665px;margin-top:16px;color:#596b5d;font-size:18px;line-height:1.85}
/* 内页介绍区里的主按钮：flex 行保证按钮按内容宽度而不是撑满整行。 */
.intro-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px}
.intro-actions .primary-button{margin-top:0}
.catalogue-section{padding-top:38px}
.catalogue-search{max-width:800px}
.catalogue-search .search-field{max-width:none}
.catalogue-controls{display:flex;align-items:end;justify-content:space-between;gap:15px;margin:27px 0 0}
.catalogue-controls .filter-row{margin:0;scrollbar-width:none}
.catalogue-controls .filter-row::-webkit-scrollbar{display:none}
.result-count{font-size:13px;color:#66786c;white-space:nowrap;padding-bottom:12px}
.catalogue-section .product-grid{margin-top:13px}

/* ----------------------------------------------------- 12 工厂与联系 */

.about-page-intro{min-height:460px;display:flex;align-items:center;background:#223b32;color:#fff}
.about-page-intro>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;filter:saturate(.65) brightness(.55)}
.about-page-intro:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#142d25e8 0%,#173329ae 54%,#172e2050)}
.about-page-intro .section-shell{z-index:2}
.about-page-intro h1{max-width:790px}
.about-page-intro h1 em{color:#dae5d8}
.about-page-intro p{color:#e4eee4}
.about-page-intro .section-kicker{color:#dbc3a4}
.factory-section{padding-top:var(--section-y);padding-bottom:var(--section-y);display:grid;grid-template-columns:1fr 1.16fr;gap:7vw;align-items:center}
.factory-copy h2,.contact-layout h2{font-size:clamp(41px,4.3vw,63px);font-weight:400;line-height:1.32;letter-spacing:-.05em;margin-top:15px}
.factory-copy p,.contact-layout p{color:#65746a;font-size:17px;line-height:1.9;margin-top:16px}
.factory-media{aspect-ratio:16/9;position:relative;background:#213a30;overflow:hidden}
.factory-video{width:100%;height:100%;object-fit:cover}
.factory-video[hidden],.factory-cover[hidden]{display:none}
/* 工厂视频改为「点击加载」：封面用海报图铺满，叠一层压暗蒙版保证按钮可读。
   视频本体 preload="none"，所以首屏不会下载任何视频数据。 */
.factory-cover{position:absolute;inset:0;border:0;padding:0;margin:0;background:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,1.8vw,22px);overflow:hidden}
.factory-cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.factory-cover::after{content:'';position:absolute;inset:0;background:#16261f66;z-index:1;transition:background .25s}
.factory-cover:hover::after{background:#16261f47}
.factory-cover-play{position:relative;z-index:2;width:clamp(58px,5.2vw,76px);height:clamp(58px,5.2vw,76px);
  border:1px solid #faf7edcc;border-radius:50%;display:grid;place-items:center;padding-left:4px;
  font-size:clamp(17px,1.4vw,21px);color:#f7f4ea;background:#16261f4d;
  transition:transform .25s ease,background .25s ease}
.factory-cover:hover .factory-cover-play{transform:scale(1.08);background:#16261f8c}
.factory-cover:focus-visible{outline:2px solid #f7f4ea;outline-offset:-4px}
.factory-cover-label{position:relative;z-index:2;font-size:clamp(13px,1.05vw,16px);letter-spacing:.06em;
  color:#eef3ea;text-shadow:0 1px 12px #00000073}
.contact-section{background:#e6ebe4;padding:var(--section-y) 0 calc(var(--section-y) * 1.05)}
/* 联系区块只展示一张名片大图（原来右侧的文本联系卡已按反馈移除）：
   标题与说明在上，名片居中放大——名片是图片，放大后才看得清地址与电话。 */
.contact-layout{display:grid;gap:clamp(38px,4.4vw,62px);justify-items:center;text-align:center}
.contact-layout>div:first-child{max-width:660px}
.contact-layout>div:first-child p{margin-inline:auto}
.card-figure{margin:0;width:100%;max-width:1000px;background:#f9f8f2;padding:clamp(14px,1.5vw,24px);box-shadow:0 24px 56px #243a291f}
/* 名片原始比例 16:9，用 aspect-ratio 锁住，任何宽度下都不会被拉伸变形 */
.card-figure img{display:block;width:100%;aspect-ratio:16/9;height:auto}

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

@media(max-width:1050px){
  .desktop-nav{gap:21px;margin-right:25px}
  .site-header{padding:0 32px}
  .principles{gap:24px 30px}
  .series-grid,.category-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-points{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px}
  .product-art{height:300px}
  .editorial h2{font-size:clamp(34px,3.7vw,47px)}
  .footer-main{grid-template-columns:1fr 1fr}
  .footer-nav{grid-column:2}
}

@media(max-width:760px){
  .site-header{height:68px;padding:0 20px}
  .brand-symbol{width:34px;height:34px}
  .brand-name strong{font-size:17px}
  .brand-name small{font-size:8px}
  .desktop-nav,.header-cta,.header-admin{display:none}
  .header-actions{gap:10px}
  .menu-toggle{display:block}
  .mobile-nav:not([hidden]){display:flex;position:absolute;z-index:19;top:68px;left:0;right:0;background:var(--forest-deep);padding:12px 24px 25px;box-shadow:0 14px 24px #16241c33;flex-direction:column;gap:0}
  .mobile-nav a{padding:14px 0;border-top:1px solid rgba(247,244,234,.14);font-size:13px;color:#e6ebe3}
  .mobile-series{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 15px;border-top:1px solid rgba(247,244,234,.14)}
  .mobile-nav .mobile-series a{padding:6px 12px;border:1px solid rgba(247,244,234,.22);font-size:11px;color:#cfdacd}
  .mobile-lang{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 15px;border-top:1px solid rgba(247,244,234,.14)}
  .mobile-lang-label{flex:0 0 100%;font-size:10px;font-weight:700;letter-spacing:.14em;color:#93a294;text-transform:uppercase}
  .mobile-lang-options{display:flex;flex-wrap:wrap;gap:8px}
  .mobile-nav .mobile-lang-options button{padding:6px 12px;border:1px solid rgba(247,244,234,.22);background:none;color:#cfdacd;font-size:11px;cursor:pointer;transition:border-color .2s,color .2s}
  .mobile-nav .mobile-lang-options button.is-active{border-color:#d6b692;color:#d6b692}

  .video-page{min-height:clamp(420px,64svh,560px)}
  .video-page-copy{padding:56px 24px 62px}
  .video-page-veil{background:linear-gradient(180deg,rgba(243,247,242,.93) 0%,rgba(243,247,242,.84) 56%,rgba(243,247,242,.66) 100%)}
  .video-page-copy h1{font-size:clamp(30px,8vw,42px)}
  .video-page-actions{gap:10px}
  .section-shell{width:min(100% - 42px,1200px)}
  .philosophy-layout{grid-template-columns:1fr;gap:0;padding-block:50px 0}
  .approach-title{font-size:clamp(32px,8.4vw,46px);margin-top:14px}
  .approach-lead{margin-top:15px;font-size:15px;line-height:1.95}
  .principles{grid-template-columns:1fr;gap:0;margin-top:28px;padding-top:0}
  .principle{padding:16px 0;border-top:1px solid #d8e1d7}
  .principle:first-child{border-top:0;padding-top:0}
  .principle h3{font-size:17px}
  .approach-photo{margin-top:30px}
  .approach-photo img{flex:none;height:230px;min-height:0}
  .approach-photo figcaption{margin:10px 0 0}
  .products-intro{font-size:14px}
  .guide{padding-block:50px 0}
  .series-overview,.category-explainer{padding-block:50px 0}
  .series-grid,.category-cards{grid-template-columns:1fr;margin-top:24px}
  .series-card{padding:15px 0 16px}
  .quote-band{padding:38px 0}
  .guide-head{grid-template-columns:1fr;gap:0}
  .guide-head h2{font-size:clamp(26px,7vw,34px);margin-top:11px}
  .guide-note{margin:14px 0 0}
  .guide-list{grid-template-columns:1fr;margin-top:24px}
  .guide-list li{padding:15px 0 0}
  .guide-note{margin-top:18px}

  .home-search{padding:0;width:100%;margin-top:24px}
  .home-search label{display:block;margin-bottom:8px}
  .search-field{max-width:none}
  .products-section{padding:50px 0 44px}
  .products-header{display:block}
  .products-header p{margin-top:20px;padding-bottom:0;font-size:15px}
  .filter-row{overflow:auto;padding-bottom:6px;white-space:nowrap;margin-top:29px}
  .filter-button{flex:none}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 11px}
  .product-art{height:clamp(210px,42vw,330px)}
  .product-info h3{font-size:16px}
  .product-info p{font-size:11px}
  .product-tag{top:13px;left:13px;font-size:8px}
  .product-number{right:12px;bottom:12px}

  .editorial{grid-template-columns:1fr;width:min(100% - 42px,1200px)}
  .editorial-image{height:190px}
  .editorial-copy{min-height:0;padding:26px 22px}
  .editorial h2{font-size:clamp(35px,8vw,50px)}
  .editorial p{font-size:15px}
  .editorial-moments{margin-top:15px}

  .about{grid-template-columns:1fr;gap:20px;padding-top:50px;padding-bottom:46px}
  .about-left{gap:35px}
  .about-emblem{width:155px;height:155px;margin-left:0}
  .about-emblem img{width:55px;height:55px}
  .about-emblem>span:last-child{font-size:8px}
  .about-right{padding-top:0}
  .about-points{grid-template-columns:1fr;margin-top:17px}
  .about-points li{padding:10px 0}

  .footer-main{grid-template-columns:1fr;gap:23px;padding-bottom:30px}
  .footer-nav{grid-column:auto;flex-wrap:wrap}
  .footer-bottom{height:auto;min-height:65px;gap:12px;flex-wrap:wrap;padding:15px 0}
  .footer-bottom span:nth-child(2){display:none}
  .footer-bottom a{margin-left:auto}

  .product-dialog[open]{display:block;overflow:auto}
  .dialog-art{min-height:240px;padding:20px 0}
  .dialog-stage img{height:200px}
  .dialog-thumb{width:44px;height:44px}
  .dialog-content{padding:24px 22px 28px}
  .dialog-content h2{font-size:25px}

  .page-intro{padding:50px 0}
  .page-intro h1{font-size:clamp(40px,9vw,60px)}
  .page-intro p{font-size:16px}
  .catalogue-controls{display:block}
  .catalogue-controls .filter-row{margin-bottom:5px}
  .result-count{padding:10px 0}
  .catalogue-section .product-grid{margin-top:8px}
  .about-page-intro{min-height:420px}
  .factory-section{grid-template-columns:1fr;gap:34px;padding-top:50px;padding-bottom:50px}
  .factory-copy p,.contact-layout p{font-size:15px}
  .contact-layout{gap:34px}
  .contact-section{padding:50px 0}
  .factory-cover-play{width:52px;height:52px}
  .factory-cover-label{font-size:13px}
  .card-figure{max-width:100%;padding:10px}
}

@media(max-width:430px){
  .search-field button{min-width:68px}
  .search-field input[type=search]{font-size:13px}
  .catalogue-search{display:block}
  .catalogue-search label{display:block;margin-bottom:9px}
  .site-footer{padding-left:21px;padding-right:21px}
  .product-art{height:205px}
  .product-art img{width:90%}
  .product-open{width:30px;height:30px;flex:none}
  .product-info{align-items:start}
  .editorial-image{height:350px}
  .editorial h2{font-size:34px}
  .page-intro h1{font-size:36px}
  .site-footer{padding-left:21px;padding-right:21px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* --------------------------------------------- 14 阿拉伯语与 RTL 方向 */

/* 阿拉伯语需要一整套能显示阿拉伯字形的字体；原来的 Georgia/雅黑都没有。 */
html[lang="ar"]{--sans:'Segoe UI',Tahoma,'Arabic Typesetting',Arial,sans-serif;--serif:'Segoe UI',Tahoma,'Arabic Typesetting',serif}
/* 字距会把连写的阿拉伯字母拆开，斜体在阿拉伯字体里只是被拉斜的伪斜体，
   全大写也不适用于阿拉伯文——这三项在这里统一关掉。 */
html[lang="ar"] *{letter-spacing:normal!important;font-style:normal!important;text-transform:none!important}
/* 从右往左时，几处用物理方向写死的偏移要翻过来。 */
html[dir="rtl"] .nav-drop-menu{left:auto;right:-18px}
/* 语言下拉用物理 right 定位（因为按钮本身就钉在右上角），RTL 下不需要翻转。 */
html[dir="rtl"] .footer-bottom a{margin-left:0;margin-right:auto}
/* 箭头在 RTL 下应指向另一边。 */
html[dir="rtl"] .header-cta span:last-child,
html[dir="rtl"] .outline-button span:last-child,
html[dir="rtl"] .button-arrow,
html[dir="rtl"] .series-card-arrow,
html[dir="rtl"] .product-open{transform:scaleX(-1)}
html[dir="rtl"] .series-card:hover .series-card-arrow{transform:scaleX(-1) translate(2px,-2px)}
html[dir="rtl"] .editorial h2{white-space:normal}