/* ============================================================
   SAMANSTAR v4 — brand palette + more visual layout
   Brand: navy #122337, accent amber #F59E0B (from the logo kit)
   Loaded after style.css + v2.css + v3.css
   ============================================================ */

/* ---------- 1. Brand tokens ---------- */
:root{
  --brand:#122337;
  --brand-d:#0a1522;
  --brand-l:#eef2f7;
  --amber:#F59E0B;
  --amber-d:#b45309;
  --amber-l:#fef3c7;
  --ink:#111d2e;
  --ink-2:#22314b;
  --muted:#5b6b80;
  --muted-2:#8494a6;
  --line:#e4e8ee;
  --line-2:#cfd7e0;
  --bg:#f5f7fa;
  --bg-2:#eef2f7;
  --sh-md:0 16px 36px -20px rgba(10,21,34,.30);
  --sh-lg:0 32px 64px -32px rgba(10,21,34,.42);
}

/* amber accents */
.eyebrow{color:var(--amber-d);background:var(--amber-l);border-color:#fcd34d}
.sect-head span.kicker{color:var(--amber-d)}
.sect-head h2::after{background:linear-gradient(90deg,var(--amber),var(--brand))}
.arrow-link{color:var(--amber-d)}
.arrow-link:hover{color:var(--amber)}
.hd__link.is-active,.hd__item.is-open > .hd__link{color:var(--brand);border-bottom-color:var(--amber)}
.side__link.is-active{background:var(--brand-l);color:var(--brand-d);border-left-color:var(--amber)}
.check-list svg{color:var(--amber)}
.feature__icon{background:linear-gradient(150deg,#fff8ec,#fdf0d8);border-color:#fbe3b4;color:var(--amber-d)}
.fgroup > h4,.spectable th{color:var(--brand)}
.spectable th{background:var(--brand-l)}
.filters__head{background:var(--brand)}
.kv b{color:var(--brand)}
.about-stats b{color:var(--brand)}
.about-stats b em{color:var(--amber);font-style:normal}

.btn--amber{--btn-bg:var(--amber);--btn-fg:#122337;font-weight:800}
.btn--amber:hover{--btn-bg:#e08c04}

/* ---------- 2. Header: amber logo chip + topbar language button ---------- */
.hd__logo img{width:auto;height:42px}
.footer-brand--chip{
  display:inline-flex;align-items:center;padding:14px 18px;
  background:#fff;border-radius:14px;margin-bottom:18px;
}
.footer-brand--chip img{width:auto;height:40px;display:block}
.langbtn{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.30);
  background:none;color:#dbe6f2;font-size:.74rem;font-weight:800;letter-spacing:.08em;cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.langbtn:hover{background:rgba(255,255,255,.14);color:#fff}
.langbtn.is-current{background:var(--amber);border-color:var(--amber);color:#122337}
.topbar__list .langbtn{margin-left:4px}

/* ---------- 3. Visual hero (navy band) ---------- */
.hero-v4{
  position:relative;isolation:isolate;overflow:hidden;color:#dfe8f2;
  background:radial-gradient(1000px 520px at 82% -12%,#1b3550 0%,transparent 62%),
             radial-gradient(700px 420px at 4% 108%,#16304a 0%,transparent 62%),
             linear-gradient(160deg,#122337 0%,#0a1522 100%);
  padding-top:clamp(34px,4.2vw,62px);padding-bottom:clamp(36px,4.4vw,64px);
}
.hero-v4::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 76%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 76%);
}
.hero-v4 .container{position:relative;z-index:1}
.hero-v4 h1{color:#fff;font-size:clamp(1.9rem,1.25rem + 2.2vw,3.1rem)}
.hero-v4 h1 .accent{color:var(--amber)}
.hero-v4 .hero__lead{color:#9fb3c8;margin-top:18px;max-width:56ch}
.hero-v4 .eyebrow{color:var(--amber);background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35)}
.hero-v4 .hero--badges li{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#cfe0f0}
.hero-v4 .hero--badges svg{color:var(--amber)}
.hero-v4 .form-note{color:#7f96ad!important}
.hero-v4__stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
  margin-top:clamp(28px,3.2vw,46px);padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12);
}
.hero-v4__stats b{display:block;font-size:clamp(1.3rem,1rem + 1vw,1.9rem);color:#fff;font-weight:800;line-height:1}
.hero-v4__stats b em{color:var(--amber);font-style:normal}
.hero-v4__stats span{display:block;margin-top:6px;font-size:.78rem;color:#8fa6bd}
@media (max-width:640px){.hero-v4__stats{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   v4h — HOME HERO AS A THREE-BRAND CAROUSEL

   The navy .hero-v4 band stays for every other page; the home page
   adds .hcarousel to the same element: blue-white gradient plus a
   geometric "technical" pattern, official brand logo, HTML headline
   and one CTA per brand, product photo on the right dissolving into
   the background.

   The viewport is 100vw wide so the photo can run to the edge of the
   screen with no seam, while the copy keeps the normal 1200px
   container inset (--hc-gut).
   ============================================================ */

.hcarousel{
  /* colours for the copy that is laid over the client's artwork */
  --hc-ink:#eef5ff;
  --hc-dim:#a9c3de;
  --hc-soft:#c6d8ea;
  --hc-accent:#3f9cf0;
  --hc-gut:max(22px,calc((100vw - 1200px) / 2 + 22px));
  --hc-delay:6.5s;
  /* 底色取品牌底图最下沿（地面）的颜色：图片下沿和下面那条数据带之间看不出接缝 */
  --hc-band:#040f1e;
  position:relative;isolation:isolate;overflow:hidden;color:var(--hc-ink);
  background:var(--hc-band);
  padding-top:0;
  padding-bottom:clamp(22px,2.8vw,38px);
}
.hcarousel::before{content:none}
.hcarousel .container{position:relative;z-index:1}

/* ---------- carousel viewport / track ---------- */
.hc__viewport{position:relative;overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);touch-action:pan-y}
.hc__track{display:flex;transition:transform .62s var(--ease)}
.hcarousel.is-instant .hc__track{transition:none}
@media (prefers-reduced-motion:reduce){.hc__track{transition:none}}

.hc-slide{
  position:relative;flex:0 0 100%;min-width:100%;
  display:flex;flex-direction:column;justify-content:center;
  /* 底图是 2172x724，所以这一屏至少要和它的比例一样高；文字多了可以撑高，
     底图用 cover 跟上（只会轻微裁掉两边，产品照始终在画面里） */
  min-height:calc(100vw / 3);
}

/* ---------- brand artwork + the copy laid over it ----------
   底图直接就是客户那张 banner 的原图（只把烘焙进去的文字擦掉了，做法见
   work/build-hero-art.py）：比例固定 2172x724，图片永远不裁不拉。
   文字字号全部用 vw 换算，和底图一起缩放，换屏幕宽度比例也不变；
   文字块垂直居中（和原图一致），左边界对齐 1200 容器。 */
.hc-slide__art{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
}
.hc-slide__copy{
  position:relative;z-index:2;
  /* content-box：width 是文字自己的宽度，左边距单独算，文字不会压到产品上 */
  box-sizing:content-box;
  margin:0;max-width:none;
  padding:0 24px 0 var(--hc-gut);
  width:min(calc(49vw - var(--hc-gut)),700px);
  /* 1em = 原图正文字号（约 20px / 2172px 宽），其它元素全部按 em 换算 */
  font-size:clamp(.58rem,1.08vw,1.49rem);
}
/* 轮播里原来压在品牌标题上方的那枚品牌 logo（Daheng / AZURE / CHIOPT）已按客户
   要求去掉，下面这几条 .hc-slide__logo 规则现在没有元素用到，先留着备用。 */
.hc-slide__logo{display:block;width:auto;height:auto;max-height:2.6em;margin-bottom:.9em}
/* Daheng 那枚标志是两行叠排（还有一道斜杠），同样高度下会看不清，
   所以给它一根更高的上限，视觉分量和单行的 AZURE / CHIOPT 相当 */
.hc-slide--daheng .hc-slide__logo{max-height:4.2em}
.hcarousel h1,.hcarousel h2,.hcarousel h3{color:var(--hc-ink);margin:0}
.hc-slide__copy h1{font-size:2.5em;line-height:1.08;max-width:none}
.hc-slide__copy h2{font-size:2.25em;line-height:1.1;max-width:none}
/* 自有品牌那一屏（客户给的原版）：不带 logo 图、文字左对齐，
   文案更长所以文字列更宽、字号也更大；另外三屏保持不动。 */
.hc-slide--samanstar .hc-slide__copy{
  width:min(calc(66vw - var(--hc-gut)),1000px);
  font-size:clamp(.8rem,1.26vw,1.74rem);
  /* 客户要求：这一屏的字号再放大，文字铺满整块底图的高度，
     所以整块垂直居中，不再往上抬（放大后按钮已经落在光带下方） */
  padding-bottom:0;
}
.hc-slide--samanstar .hc-slide__copy h1{font-size:2.7em}
.hc-slide--samanstar .hero__lead{font-size:1.5em;max-width:none}
.hc-slide--samanstar .hc-slide__copy .btn{font-size:1.2em}
/* 标题下面那行代理品牌名，留着以后可能用 */
.hc-slide__brands{margin:.45em 0 0;font-size:1.35em;font-weight:600;letter-spacing:.005em;color:#8fb4d9}
/* 客户要求：四屏的这段简介一律排成一行，不要折行；字号没变，
   只是把原来按字符数卡死的宽度（44ch / 46ch / 56ch）放开。 */
.hcarousel .hero__lead{color:var(--hc-dim);margin-top:.85em;font-size:1.05em;line-height:1.5;max-width:none;white-space:nowrap}
/* 四屏正文下面那一行联系方式（邮箱 + WhatsApp），点击直达 */
.hc-slide__contact{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5em 1.4em;
  margin-top:.85em;font-size:1em;font-weight:700;letter-spacing:.01em;
}
.hc-slide--centered .hc-slide__contact{justify-content:center}
.hc-slide__contact a{
  display:inline-flex;align-items:center;gap:.5em;color:#eaf2ff;text-decoration:none;
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.hc-slide__contact a:hover{color:var(--amber);border-bottom-color:var(--amber)}
.hc-slide__contact a svg{width:1.25em;height:1.25em;flex:none;color:var(--amber)}
.hc-slide__contact a.hc-slide__contact--wa svg{color:#7ee2a8}
.hcarousel .hero--badges{gap:.5em;margin-top:1.3em}
.hcarousel .hero--badges li{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:var(--hc-soft);
  font-size:1em;padding:.34em .72em;gap:.36em;
}
.hcarousel .hero--badges svg{color:var(--hc-accent);width:1em;height:1em}
.hcarousel .eyebrow{
  color:var(--amber);background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.42);
  font-size:1em;letter-spacing:.1em;padding:.32em .62em;margin-bottom:.8em;
}
.hc-slide__copy .btn-row{margin-top:1.3em}
.hc-slide__copy .btn{font-size:1.1em;padding:.72em 1.4em}
.hc-slide__copy .btn svg{width:1em;height:1em}
.hcarousel .btn--ghost{--btn-bd:rgba(255,255,255,.34);--btn-fg:var(--hc-ink)}
.hcarousel .btn--ghost:hover{--btn-bd:var(--amber);--btn-fg:var(--amber)}

/* 三个代理品牌那一屏：客户给的纯背景 + 文字整体居中（含标签和按钮） */
.hc-slide--centered .hc-slide__copy{
  align-items:center;text-align:center;
  margin-inline:auto;padding:0 24px;
  width:min(64vw,800px);
}
.hc-slide--centered .hero--badges{justify-content:center;max-width:100%}
.hc-slide--centered .btn-row{justify-content:center}
.hc-slide--centered .hero__lead{max-width:none}
/* 客户这张背景中间横着一道很亮的光带，标签和第二个按钮压在上面会发灰，
   所以给它们一个更实的深色底，保证任何位置上文字都清楚 */
.hc-slide--centered .hero--badges li{
  background:rgba(5,17,34,.62);border-color:rgba(255,255,255,.3);
}
.hc-slide--centered .btn--ghost{background:rgba(5,17,34,.58)}

/* ---------- stats strip: same content, colours for the navy hero ---------- */
.hcarousel .hero-v4__stats{
  position:relative;z-index:2;
  border-top-color:rgba(255,255,255,.14);
  margin-top:clamp(18px,2.2vw,30px);
  /* 数据带现在整幅铺在底图下面，不再给右边的产品照让位 */
  max-width:none;
}
/* 和客户给的那版一样，四个数据之间加一道竖分隔线 */
.hcarousel .hero-v4__stats > div + div{
  border-left:1px solid rgba(255,255,255,.14);
  padding-left:clamp(16px,1.6vw,26px);
}
.hcarousel .hero-v4__stats b{color:var(--hc-ink)}
.hcarousel .hero-v4__stats b em{color:var(--amber)}
.hcarousel .hero-v4__stats span{color:#8fa6bd}

/* ---------- dots + arrows ---------- */
.hc__ui{
  position:relative;z-index:2;display:flex;align-items:center;gap:20px;
  margin-top:clamp(16px,2vw,24px);
}
.hc__dots{display:flex;align-items:center;gap:10px}
.hc__dot{
  width:34px;height:6px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.22);overflow:hidden;
  transition:width .3s var(--ease),background-color .3s var(--ease);
}
.hc__dot span{display:block;height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,var(--hc-accent),#3f8fdc);transform:scaleX(0);transform-origin:left center}
.hc__dot.is-active{width:56px;background:rgba(255,255,255,.16)}
.hc__dot.is-active span{animation:hc-fill var(--hc-delay) linear forwards}
.hcarousel.is-paused .hc__dot.is-active span{animation-play-state:paused}
.hcarousel.is-autoplay-off .hc__dot.is-active span{animation:none;transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.hc__dot.is-active span{animation:none;transform:scaleX(1)}}
@keyframes hc-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.hc__arrows{display:flex;gap:10px}
.hc__arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  color:#dbe9f8;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.hc__arrow:hover{background:rgba(255,255,255,.2);border-color:var(--hc-accent);color:#fff}
.hc__arrow:focus-visible{outline:2px solid var(--hc-accent);outline-offset:2px}
.hc__toggle .hc__ico--play{display:none}
.hcarousel.is-autoplay-off .hc__toggle .hc__ico--pause{display:none}
.hcarousel.is-autoplay-off .hc__toggle .hc__ico--play{display:block}
.hcarousel .hc-sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 窄屏：文字在上，底图在下 ----------
   900px 以下 3:1 的底图只剩一条，文字压在上面会挤成一团，所以改成上下两段：
   上面深蓝底上放文字，下面是底图（按高度 cover，保留右边的产品）。 */
@media (max-width:900px){
  .hc__viewport{width:auto;margin-left:0}
  /* 客户反馈：底图不该跑到文字下面。手机上改成和桌面版一样 —— 底图铺满整屏、
     文字压在图上，再加一层深色渐变蒙版保证文字对比度（底图是纯科技渐变+网格，
     没有产品照，放大裁切不会有损失）。 */
  .hc-slide{min-height:0;display:block;position:relative}
  .hc-slide__art{
    position:absolute;inset:0;height:auto;
    background-position:center;background-size:cover;
  }
  .hc-slide__art::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(4,16,31,.5) 0%,rgba(4,16,31,.78) 45%,rgba(4,16,31,.94) 100%);
  }
  .hc-slide__copy{
    position:relative;z-index:2;box-sizing:border-box;width:auto;max-width:none;
    padding:clamp(26px,6vw,40px) var(--hc-gut) clamp(18px,4vw,26px);
    font-size:1rem;
  }
  /* 居中的那几屏在手机上也要占满整行（上面那条 64vw 的规则选择器更具体，必须在这里压回来） */
  .hc-slide--centered .hc-slide__copy{width:auto;max-width:none;padding-inline:var(--hc-gut)}
  .hc-slide__copy h1{font-size:clamp(1.7rem,1.15rem + 3.4vw,2.4rem)}
  .hc-slide__copy h2{font-size:clamp(1.55rem,1.05rem + 3.2vw,2.2rem)}
  /* 自有品牌那一屏在桌面上字号更大，手机上得压回来，不然标题会折成六行 */
  .hc-slide--samanstar .hc-slide__copy h1{font-size:clamp(1.55rem,1.05rem + 2.6vw,2.1rem)}
  /* 手机上这一屏必须和别的屏一样占满整行：桌面那条 66vw 的宽度选择器
     比通用移动端重置更具体，之前把文案挤成一条窄柱，还把所有屏都撑高了 */
  .hc-slide--samanstar .hc-slide__copy{width:auto;max-width:none;font-size:1rem;padding-bottom:0}
  .hc-slide__logo{max-height:38px;margin-bottom:16px}
  .hc-slide--daheng .hc-slide__logo{max-height:54px}
  .hc-slide__brands{font-size:clamp(.95rem,.75rem + 1.1vw,1.2rem)}
  .hcarousel .hero__lead{font-size:1rem;max-width:46ch;white-space:normal}
  .hcarousel .hero--badges li{font-size:.85rem;padding:7px 13px}
  .hcarousel .eyebrow{font-size:.68rem;letter-spacing:.07em;padding:6px 12px}
  .hc-slide__copy .btn{font-size:1rem;padding:14px 24px}
  .hcarousel .hero-v4__stats,.hc__ui{max-width:none}
  .hcarousel .hero-v4__stats{margin-top:18px}
}

/* ---------- small screens: the header logo was overflowing the viewport ----------
   .hd__logo img is a fixed 42px tall, which is ~400px wide on a 390px phone;
   the header then pushed the search + burger off screen and the whole page
   scrolled sideways. Cap it instead. */
@media (max-width:760px){
  .hd__logo{min-width:0}
  .hd__logo img{width:auto;height:auto;max-height:32px;max-width:min(52vw,220px)}
}

/* ---------- brand landing pages: same artwork as the page banner ---------- */
.cat-hero--brand{
  position:relative;overflow:hidden;
  /* 和首页共用客户那张底图（不带产品的版本）。
     路径写 ../ 是因为 CSS 里的 url() 按样式表所在目录解析（assets/css/）。
     定位取 top：这条横幅比底图矮，这样能避开图中间那道很亮的横向光带，
     文字压在上半部的深色区域更清楚。 */
  background:url(../img/hero/hero-art-plain.webp) center top/cover no-repeat,#04101f;
  border-bottom-color:rgba(255,255,255,.10);
}
.cat-hero--brand::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(140,200,255,.075) 1px,transparent 1px),
    linear-gradient(180deg,rgba(140,200,255,.075) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(120% 130% at 8% 0%,#000 0%,rgba(0,0,0,.45) 55%,transparent 85%);
  mask-image:radial-gradient(120% 130% at 8% 0%,#000 0%,rgba(0,0,0,.45) 55%,transparent 85%);
}
.cat-hero--brand h1{color:#eef5ff}
.cat-hero--brand p{color:#a9c3de}
.cat-hero--brand .cat-hero__chips li{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#c6d8ea}
.cat-hero--brand .crumbs,.cat-hero--brand .crumbs a{color:#8fa6bd}
.cat-hero--brand .container{position:relative;z-index:1}
/* 和首页那三个品牌屏一致：整块文字居中（面包屑、标题、说明、标签） */
.cat-hero--brand .container{text-align:center}
.cat-hero--brand .crumbs{justify-content:center}
.cat-hero--brand h1,.cat-hero--brand p,
.cat-hero--brand .crumbs,.cat-hero--brand .cat-hero__chips{max-width:none;margin-inline:auto}
.cat-hero--brand p{max-width:64ch}
.cat-hero--brand .cat-hero__chips{justify-content:center;max-width:900px}
/* 底图中间有亮光带，标签给个更实的深色底才看得清 */
.cat-hero--brand .cat-hero__chips li{background:rgba(5,17,34,.62);border-color:rgba(255,255,255,.3)}

/* 品牌页横幅上的联系方式（.hero-contact）：客户要求把邮箱 / WhatsApp 从最上面那条
   窄栏挪到这张底图上（点击直达 mailto: / wa.me），所以顶部栏那一组在品牌页不再输出。
   邮箱图标沿用全站的琥珀色，WhatsApp 沿用顶部栏那枚绿色，位置和观感一致。 */
.hero-contact{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 30px;margin:1.6em auto 0;font-size:1rem;font-weight:700;letter-spacing:.01em;
}
.hero-contact a{
  display:inline-flex;align-items:center;gap:.6em;color:#eaf2ff;text-decoration:none;
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.hero-contact a:hover{color:var(--amber);border-bottom-color:var(--amber)}
.hero-contact a svg{width:1.25em;height:1.25em;flex:none;color:var(--amber)}
.hero-contact a.hero-contact--wa svg{color:#7ee2a8}

/* 品牌页顶部那条栏只剩地址 / 时间 / 语言，居中摆才不显得左边空了一块；
   900px 以下这一组本来就要藏起来（见上），整条直接不显示。 */
.topbar--metaonly .topbar__in{justify-content:center}
@media (max-width:900px){
  .hero-contact{flex-direction:column;gap:12px;margin-top:1.3em;font-size:.95rem}
  .topbar--metaonly{display:none}
}
@media (max-width:900px){
  .cat-hero--brand h1,.cat-hero--brand p,.cat-hero--brand .crumbs,.cat-hero--brand .cat-hero__chips{max-width:none}
}

/* ---------- 4. Compact sections (shorter home page) ---------- */
.section--tight{padding-block:clamp(34px,3.6vw,56px)}
.sect-head{margin-bottom:clamp(20px,2.6vw,34px)}

/* ---------- 5. Bigger, more visual category tiles ---------- */
.cat-tile--big .cat-tile__media{aspect-ratio:16/11}
.cat-tile--big .cat-tile__media img{inset:22px}
.cat-tile--big .cat-tile__body{padding:22px 24px 26px}
.cat-tile--big .cat-tile__body h3{font-size:1.12rem}
.cat-tile:hover .cat-tile__media img{transform:scale(1.07)}

/* dark stat band */
.statband{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:radial-gradient(700px 380px at 86% 0%,#1b3550 0%,transparent 62%),linear-gradient(150deg,#122337,#0a1522);
  padding:clamp(24px,3vw,38px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;
}
.statband b{display:block;font-size:clamp(1.4rem,1.05rem + 1.2vw,2rem);font-weight:800;color:#fff;line-height:1}
.statband b em{color:var(--amber);font-style:normal}
.statband span{display:block;margin-top:7px;font-size:.79rem;color:#8fa6bd}
@media (max-width:760px){.statband{grid-template-columns:repeat(2,1fr)}}

/* ---------- 6. News cards ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.news-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease);
}
.news-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:#c9d6e4}
.news-card__media{
  aspect-ratio:16/9;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#122337,#1b3550);
  display:grid;place-items:center;
}
.news-card__media img{width:58%;height:auto;opacity:.95}
.news-card__tag{
  position:absolute;top:12px;left:12px;font-size:.68rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;
  background:var(--amber);color:#122337;
}
.news-card__body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.news-card__date{font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2)}
.news-card__body h3{margin-top:9px;font-size:1rem;line-height:1.4}
.news-card__body p{margin-top:9px;font-size:.875rem;color:var(--muted);flex:1}
.news-card__body .arrow-link{margin-top:14px}
@media (max-width:900px){.news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.news-grid{grid-template-columns:1fr}}

/* ---------- 7. Expandable product rows ---------- */
.prow{grid-template-columns:132px minmax(0,1fr) auto}
.prow__head{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.prow__toggle{
  margin-left:auto;font-size:.78rem;font-weight:800;letter-spacing:.04em;
  color:var(--amber-d);background:none;border:0;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;
}
.prow__toggle svg{width:12px;height:12px;transition:transform .22s var(--ease)}
.prow.is-open .prow__toggle svg{transform:rotate(180deg)}
.prow__detail{
  grid-column:1/-1;display:none;
  border-top:1px solid var(--line);margin-top:16px;padding-top:16px;
}
.prow.is-open .prow__detail{display:block}
.prow__detail .spectable td{padding:8px 12px;font-size:.86rem}

/* ---------- 8. Solutions / service cards ---------- */
.svc{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 24px 26px;display:flex;flex-direction:column;gap:12px;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease);
}
.svc:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:#c9d6e4}
.svc__icon{
  width:48px;height:48px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(150deg,#122337,#1b3550);color:var(--amber);
}
.svc__icon svg{width:23px;height:23px}
.svc h3{font-size:1.02rem}
.svc p{font-size:.89rem;color:var(--muted)}
.svc ul{margin-top:2px;display:grid;gap:7px}
.svc li{display:flex;gap:8px;align-items:flex-start;font-size:.85rem;color:var(--ink-2)}
.svc li svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--amber)}

/* ---------- 9. Company / about strip ---------- */
.about-strip{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,3.2vw,50px);align-items:center;
}
.about-strip__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
.about-strip__facts div{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
.about-strip__facts dt{font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2)}
.about-strip__facts dd{margin:6px 0 0;font-size:.95rem;font-weight:700;color:var(--ink)}
@media (max-width:900px){.about-strip{grid-template-columns:1fr}}

/* ---------- 10. Misc ---------- */
.emailrow{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px}
.emailrow a{font-size:.92rem;font-weight:700;color:var(--brand)}
.emailrow a:hover{color:var(--amber-d)}
.tag-amber{
  display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#122337;background:var(--amber);border-radius:999px;padding:4px 10px;
}

/* real-datasheet details on the product page */
.pdp__oem{display:block;margin-top:6px;font-size:.82rem;color:var(--muted)}
.pdp__oem b{color:var(--ink-2)}
.tech__box{display:grid;place-items:center;overflow:hidden;text-decoration:none}
.tech__box img{border-radius:var(--r-sm)}

/* ---------- 11. Top bar: contact details emphasised ---------- */
.topbar{background:#0a1c2e;border-bottom:1px solid rgba(255,255,255,.08)}
.topbar__in{height:46px}
.topbar__list{gap:22px}
.topbar__list--contact li{font-weight:700;color:#eaf2ff}
.topbar__list--contact a{color:#fff}
.topbar__list--contact > li > svg{color:var(--amber);width:15px;height:15px}
.topbar__list--meta{color:#9db2c9;font-weight:500}
.topbar__hot{display:inline-flex;align-items:center;gap:8px;font-weight:800!important;color:#7ee2a8!important}
.topbar__hot svg{width:16px;height:16px;color:#7ee2a8}
.topbar__hot:hover{color:#fff!important}
@media (max-width:900px){
  .topbar__list--meta{display:none}
  .topbar__in{height:40px}
}

/* ---------- 12. Header search ---------- */
.hd__search{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;
  color:var(--ink);background:none;cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.hd__search svg{width:19px;height:19px}
.hd__search:hover{background:var(--brand-l);color:var(--brand-d)}

.searchbox{
  position:fixed;inset:0;z-index:130;display:none;
  background:rgba(8,15,30,.74);backdrop-filter:blur(7px);
  padding:clamp(14px,6vh,80px) 18px;overflow-y:auto;
}
.searchbox.is-open{display:block}
.searchbox__panel{
  max-width:780px;margin:0 auto;background:#fff;border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);padding:clamp(18px,2.4vw,28px);
}
.searchbox__bar{display:flex;gap:12px;align-items:center}
.searchbox__bar input{
  flex:1;min-width:0;padding:14px 18px;border-radius:var(--r-md);
  border:1px solid var(--line-2);background:#fbfdff;font-size:1.05rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease);
}
.searchbox__bar input:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(11,92,171,.13)}
.searchbox__close{
  width:44px;height:44px;border-radius:12px;flex:none;font-size:1.7rem;line-height:1;
  color:var(--muted);background:var(--bg);cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease);
}
.searchbox__close:hover{background:var(--line);color:var(--ink)}
.searchbox__hint{margin-top:12px;font-size:.82rem;color:var(--muted-2)}
.searchbox__hint b{color:var(--brand-d)}
.searchbox__results{margin-top:14px;display:grid;gap:8px;max-height:56vh;overflow-y:auto}
.sres{
  display:flex;gap:14px;align-items:center;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  transition:border-color .18s var(--ease),background-color .18s var(--ease),transform .18s var(--ease);
}
.sres:hover{border-color:#c9dcf1;background:var(--brand-l);transform:translateX(3px)}
.sres img{width:54px;height:54px;object-fit:contain;background:#f7fafd;border-radius:9px;flex:none;padding:4px}
.sres b{display:block;font-size:.94rem;color:var(--ink);line-height:1.35}
.sres span{display:block;font-size:.78rem;color:var(--muted);margin-top:3px}
.sres em{
  margin-left:auto;flex:none;font-style:normal;font-size:.71rem;font-weight:800;letter-spacing:.06em;
  color:var(--brand-d);background:var(--brand-l);border-radius:999px;padding:4px 10px;white-space:nowrap;
}
.searchbox__empty{padding:26px 4px;color:var(--muted);font-size:.92rem}
@media (max-width:640px){
  .sres img{width:42px;height:42px}
  .sres em{display:none}
}

/* ---------- 13. Slide-in reveals ----------
   Utility classes, plus an automatic rule: inside a two column split the image
   column always slides in from its own side, text columns keep the fade-up. */
.js .reveal-left,.js .reveal-right{opacity:0;transition:opacity .82s var(--ease),transform .82s var(--ease)}
.js .reveal-left{transform:translateX(-52px)}
.js .reveal-right{transform:translateX(52px)}
.js .reveal-left.is-in,.js .reveal-right.is-in{opacity:1;transform:none}

.js .split .split__media.reveal,
.js .split .split__media > .reveal,
.js .split .media-frame.reveal,
.js .about-blk__art.reveal,
.js .about-blk .media-frame.reveal{
  opacity:0;transform:translateX(58px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.js .split--rev .split__media.reveal,
.js .split--rev .split__media > .reveal,
.js .split--rev .media-frame.reveal{
  transform:translateX(-58px);
}
.js .split .split__media.reveal.is-in,
.js .split .split__media > .reveal.is-in,
.js .split .media-frame.reveal.is-in,
.js .about-blk__art.reveal.is-in,
.js .about-blk .media-frame.reveal.is-in{opacity:1;transform:none}

@media (max-width:900px){
  .js .split .split__media.reveal,
  .js .split .split__media > .reveal,
  .js .split .media-frame.reveal,
  .js .split--rev .split__media.reveal,
  .js .split--rev .split__media > .reveal,
  .js .split--rev .media-frame.reveal,
  .js .about-blk__art.reveal{transform:translateY(24px)}
}

@media (prefers-reduced-motion:reduce){
  .js .reveal-left,.js .reveal-right,
  .js .split .split__media.reveal,
  .js .split .split__media > .reveal,
  .js .split .media-frame.reveal,
  .js .about-blk__art.reveal{opacity:1!important;transform:none!important}
}

/* ---------- 14. Brand pages ----------
   Lenses-by-brand landing pages list every configuration of one manufacturer,
   grouped under a category heading. */
.brand-group{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:38px 0 14px;padding-bottom:12px;border-bottom:2px solid var(--line);
  font-size:1.22rem;font-weight:800;letter-spacing:-.01em;color:var(--ink);
}
.brand-group:first-child{margin-top:0}
.brand-group a{color:var(--ink);text-decoration:none}
.brand-group a:hover{color:var(--brand-d)}
.brand-group span{
  font-size:.76rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--brand-d);background:var(--brand-l);border-radius:999px;padding:5px 12px;
}

/* ---------- 15. Rich text (product overview from the CMS) ---------- */
.prose{max-width:74ch;color:var(--muted);font-size:.98rem;line-height:1.72}
.prose > * + *{margin-top:14px}
.prose h3,.prose h4{color:var(--ink);font-size:1.06rem;font-weight:800;margin-top:26px}
.prose strong{color:var(--ink);font-weight:700}
.prose ul,.prose ol{padding-left:1.35em}
.prose li{margin-top:7px;list-style:disc}
.prose ol li{list-style:decimal}
.prose blockquote{
  margin:18px 0;padding:14px 18px;border-left:3px solid var(--brand);
  background:var(--brand-l);border-radius:0 var(--r-md) var(--r-md) 0;color:var(--ink-2);
}


/* ---------- 16. 产品图库：超宽的图片不能撑破版面 ----------
   .pdp 是 CSS Grid，两个格子的 min-width 默认是 auto —— 遇到很宽的图片
   （比如机械尺寸图）会把整列撑开，图片就溢出到右边盖住规格卡片。
   把 min-width 归零 + 给外框加裁剪，宽图会被等比缩到框内。 */
.pdp > *{min-width:0}
.pdp__gallery{min-width:0}
.pdp__main{min-width:0;overflow:hidden}
.pdp__main img{display:block;max-width:100%;max-height:100%}
.pdp__thumbs div{overflow:hidden}
.pdp__thumbs img{max-width:100%;max-height:100%}


/* ---------- 17. 产品页 Dimensions（原来 Overview 的位置） ----------
   机械尺寸图 + 右侧尺寸相关的几个规格；点图放大。 */
.dims{
  display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
  gap:clamp(16px,2.2vw,30px);align-items:start;
}
.dims__box{
  position:relative;display:grid;place-items:center;text-decoration:none;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(14px,1.8vw,24px);min-height:240px;cursor:zoom-in;
}
.dims__box img{
  display:block;width:100%;height:auto;max-height:min(58vh,560px);
  object-fit:contain;
}
.dims__box:hover{border-color:var(--line-2);box-shadow:var(--sh-md)}
.dims__box::after{
  content:"Click to enlarge";position:absolute;right:12px;bottom:12px;
  font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:#122337;background:var(--amber);border-radius:999px;padding:4px 10px;
}
.dims__box--empty{cursor:default;color:var(--muted);font-size:.95rem;text-align:center}
.dims__box--empty::after{content:none}
.dims__side{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(18px,2vw,24px);
}
.dims__side h3{margin:0;font-size:1.02rem}
.dims__side > p{margin:10px 0 0;font-size:.9rem;color:var(--muted)}
.dims__facts{list-style:none;margin:14px 0 0;padding:0}
.dims__facts li{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 0;border-top:1px solid var(--line);font-size:.89rem;color:var(--muted);
}
.dims__facts li:first-child{border-top:0;padding-top:0}
.dims__facts b{color:var(--ink);text-align:right}
@media (max-width:900px){
  .dims{grid-template-columns:1fr}
}


/* ---------- 18. 图片放大层（lightbox） ---------- */
.pdp__main.is-zoomable{cursor:zoom-in}
.lbx{
  position:fixed;inset:0;z-index:150;display:none;align-items:center;justify-content:center;
  background:rgba(6,12,24,.93);padding:clamp(12px,4vh,48px);
}
.lbx.is-open{display:flex}
.lbx__img{
  max-width:min(1500px,94vw);max-height:86vh;width:auto;height:auto;
  object-fit:contain;background:#fff;border-radius:8px;box-shadow:var(--sh-lg);
}
.lbx__close,.lbx__nav{
  position:absolute;border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.09);color:#fff;cursor:pointer;line-height:1;
  transition:background-color .18s var(--ease);
}
.lbx__close{top:14px;right:16px;width:46px;height:46px;border-radius:50%;font-size:1.7rem}
.lbx__nav{top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;font-size:2rem}
.lbx__nav--prev{left:14px}
.lbx__nav--next{right:14px}
.lbx__close:hover,.lbx__nav:hover{background:rgba(255,255,255,.22)}
.lbx[data-multi="0"] .lbx__nav{display:none}
.lbx__count{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  color:#c9d8e8;font-size:.8rem;font-weight:700;letter-spacing:.1em;
}
.lbx[data-multi="0"] .lbx__count{display:none}
@media (max-width:640px){
  .lbx__nav{width:42px;height:42px;font-size:1.6rem}
  .lbx__close{width:40px;height:40px;font-size:1.4rem}
}


/* ---------- 19. Leave Your Message 弹窗 ---------- */
.lmsg{
  position:fixed;inset:0;z-index:140;display:none;overflow-y:auto;
  background:rgba(8,15,30,.55);backdrop-filter:blur(3px);
  padding:clamp(14px,5vh,60px) 18px;
}
.lmsg.is-open{display:block}
.lmsg__panel{
  max-width:680px;margin:0 auto;background:#fff;border-radius:14px;
  box-shadow:var(--sh-lg);overflow:hidden;
}
.lmsg__head{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px clamp(18px,3vw,30px);border-bottom:1px solid var(--line);
}
.lmsg__head h2{margin:0;font-size:1.22rem}
.lmsg__close{
  width:38px;height:38px;flex:none;border-radius:10px;border:0;
  font-size:1.6rem;line-height:1;color:var(--muted);background:none;cursor:pointer;
}
.lmsg__close:hover{background:var(--bg);color:var(--ink)}
.lmsg__form{padding:clamp(16px,2.4vw,26px) clamp(18px,3vw,30px) clamp(20px,3vw,28px)}
.lmsg__field{margin-bottom:14px}
.lmsg__field input,.lmsg__field select,.lmsg__field textarea{
  width:100%;padding:12px 14px;font-family:inherit;font-size:.95rem;color:var(--ink);
  border:1px solid #dbe3ec;border-left:3px solid var(--brand);border-radius:4px;background:#fff;
}
.lmsg__field textarea{resize:vertical;min-height:118px;line-height:1.5}
.lmsg__field input:focus,.lmsg__field select:focus,.lmsg__field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(18,35,55,.09);
}
.lmsg__status{margin:0 0 10px;font-size:.85rem;color:var(--muted)}
.lmsg__status.is-err{color:#b42318;font-weight:700}
.lmsg__status.is-ok{color:#0a7a43}
.lmsg__status a{color:var(--brand);text-decoration:underline}
.lmsg__send{
  display:block;width:100%;padding:15px 20px;border:0;border-radius:4px;
  background:#1a9bd7;color:#fff;font-size:1.02rem;font-weight:800;font-family:inherit;cursor:pointer;
  transition:background-color .18s var(--ease);
}
.lmsg__send:hover{background:#1589c0}


/* ---------- 20. 联系信息（合并成一块） ---------- */
.cinfo{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
}
.cinfo__row{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;background:#fff;text-decoration:none}
.cinfo__row h3{margin:0 0 4px;font-size:.95rem;color:var(--ink)}
.cinfo__row p{margin:0;font-size:.92rem;color:var(--muted);line-height:1.55}
.cinfo__row a{color:var(--brand)}
.cinfo__ic{
  width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:var(--brand-l);color:var(--brand);
}
.cinfo__ic svg{width:20px;height:20px}
.cinfo__row--wa .cinfo__ic{background:#e8f8ef;color:#0a7a43}
.cinfo__row:hover h3{color:var(--amber-d)}
@media (max-width:760px){.cinfo{grid-template-columns:1fr}}


/* ---------- language switch as real links + Russian placeholder notice ---------- */
a.langbtn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.ru-pending{
  margin:0;padding:11px 18px;text-align:center;
  background:rgba(245,158,11,.14);border-bottom:1px solid rgba(245,158,11,.35);
  color:#8a5a06;font-size:.9rem;font-weight:600;
}

/* ---------- Russian header: the labels are longer than the English ones ---------- */

/* ---------- Russian header ----------
   Cyrillic labels are longer than the English ones, so the Russian pages get a
   slightly wider header, and below 1300px the nav folds into the burger menu
   (the same layout the site already uses under 900px). */
@media (min-width:1301px){
  :lang(ru) .container.hd__in{max-width:1340px}
  :lang(ru) .hd__logo img{height:36px}
  :lang(ru) .hd__link{font-size:.94em;padding:0 clamp(8px,.9vw,13px)}
  :lang(ru) .hd__cta .btn--desk{font-size:.92em;padding-inline:1.05em}
}
@media (max-width:1300px){
  :lang(ru) .hd__nav{
    position:absolute;left:0;right:0;top:100%;
    display:none;flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:#fff;border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px -24px rgba(16,32,54,.4);
    padding:8px 16px 16px;max-height:calc(100vh - 74px);overflow-y:auto;
  }
  :lang(ru) .hd__nav.is-open{display:flex}
  :lang(ru) .hd__link{height:auto;padding:14px 8px;width:100%;justify-content:space-between;border-bottom:1px solid var(--line);font-size:1rem}
  :lang(ru) .hd__item{position:static}
  :lang(ru) .hd__mega{position:static;width:auto;transform:none;opacity:1;visibility:visible;pointer-events:auto;display:none;border:0;border-radius:0;box-shadow:none;padding:8px 0 14px}
  :lang(ru) .hd__item.is-open .hd__mega{display:block;transform:none}
  :lang(ru) .hd__mega-grid{grid-template-columns:1fr;gap:16px}
  :lang(ru) .hd__mega-foot{display:none}
  :lang(ru) .hd__toggle{display:flex}
  :lang(ru) .hd__cta .btn--desk{display:none}
}

/* ---------- 轮播图 AZURE / CHIOPT 两屏的简介：一行装不下，改成两行居中 ----------
   实测（1280 视口）：这一段英文一行 875 / 807px，俄文 1008 / 1061px，而居中那几屏的
   文字列只有 800px；原来按客户最初的要求强制不折行，于是文字直接跑出底图，还压到
   下面那行联系方式上。
   这里只在桌面端放开折行、宽度用满文字列（800px）：AZURE / CHIOPT 两屏自动变成两行，
   再配 text-wrap:balance 让两行长短接近、整体居中；Daheng 那屏正好 800px，仍是一行。 */
@media (min-width:901px){
  .hcarousel .hc-slide--centered .hero__lead{
    white-space:normal;max-width:100%;margin-inline:auto;text-wrap:balance;
  }
}

/* ---------- 产品页图库：图片必须完整、居中 ----------
   第一版只加了 width/height:100% + object-fit:contain，实测仍然被裁：
   .pdp__main 是单格网格，行高 auto，行高会被图片自身撑到 615px（容器只有 417px），
   网格项上的 height:100% 在 auto 行里无法解析，object-fit 也就没机会生效。
   现在改成"绝对定位 + inset:0 + margin:auto + max-width/height:100%"这一套：
   图片按自身比例缩到容器内、水平垂直居中，既不溢出也不被裁，且不依赖网格行高的解析。 */
.pdp__main{position:relative}
.pdp__main img{
  position:absolute;inset:0;margin:auto;width:auto;height:auto;
  max-width:100%;max-height:100%;object-fit:contain;object-position:center;
}
.pdp__thumbs div{position:relative}
.pdp__thumbs img{
  position:absolute;inset:0;margin:auto;width:auto;height:auto;
  max-width:100%;max-height:100%;object-fit:contain;object-position:center;
}

/* ============================================================
   SAMANSTAR v4m additions
   Phase-2 catalogue work: mobile filter drawer, sort control,
   "load more" paging, search result count, richer enquiry form.
   Kept in its own file so it is clear what this revision added;
   L1-next-asset.mjs appends it to the previous stylesheet.
   ============================================================ */

/* ---------- rows hidden by the paging engine ----------
   [hidden] alone is not enough: .prow sets display:grid, which wins over the
   browser's own [hidden] rule. The class carries !important as well, so even a
   visitor whose browser still has the older v3.js cached (it wrote inline
   display on the rows) cannot unhide a paged-out row. */
.prow[hidden],
[data-product][hidden],
.prow.is-filtered-out,
.prow.is-paged-out,
[data-product].is-filtered-out,
[data-product].is-paged-out{display:none!important}

/* ---------- result toolbar: count + sort ---------- */
.fcount{gap:12px}
.fcount__sort{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--muted)}
.fcount__sort select{
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 12px;
  font-size:.85rem;background:#fff;color:var(--ink);cursor:pointer;
}
.fcount__sort select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(11,92,171,.13)}
.fcount__note{font-size:.8rem;color:var(--muted-2)}

/* ---------- "load more" paging ---------- */
.plist__more{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:20px}
.plist__more[hidden]{display:none}
.plist__more span{font-size:.84rem;color:var(--muted)}

/* ---------- mobile filter drawer ---------- */
.filters__toggle{display:none}
.filters__close{display:none}
.filters__count{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:999px;background:var(--brand);color:#fff;font-size:.72rem;font-weight:800;
}
.filters__toggle .filters__count{background:var(--amber);color:#122337}

@media (max-width:980px){
  /* the rail would otherwise push 100+ product rows far down the page */
  .filters__toggle{
    display:inline-flex;align-items:center;gap:9px;width:100%;justify-content:center;
    background:#fff;border:1px solid var(--line-2);border-radius:var(--r-md);
    padding:12px 16px;margin-bottom:14px;font-size:.9rem;font-weight:800;color:var(--ink);cursor:pointer;
  }
  .filters__toggle:hover{border-color:var(--brand);color:var(--brand-d)}
  .shop .filters{display:none}
  .shop.is-filters-open .filters{display:block;margin-bottom:18px}
  .filters{position:static}
  .filters__close{
    display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
    border:0;border-radius:6px;background:rgba(255,255,255,.16);color:#fff;font-size:1.05rem;
    line-height:1;cursor:pointer;
  }
  .filters__close:hover{background:rgba(255,255,255,.3)}
}

/* the head needs room for the new close button on small screens */
.filters__head{gap:10px}
.filters__head span{display:inline-flex;align-items:center;gap:8px}

/* ---------- search: result count + footer links ---------- */
.searchbox__count{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:space-between;
  padding:0 2px 10px;font-size:.8rem;color:var(--muted-2);border-bottom:1px solid var(--line);
  margin-bottom:4px;
}
.searchbox__count b{color:var(--ink)}
.searchbox__foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:12px;font-size:.84rem}
.searchbox__foot a{color:var(--brand);font-weight:700}
.searchbox__foot a:hover{color:var(--amber-d)}
.searchbox__clear{
  background:none;border:1px solid var(--line-2);border-radius:999px;padding:5px 12px;
  font-size:.78rem;font-weight:700;color:var(--muted);cursor:pointer;
}
.searchbox__clear:hover{border-color:var(--brand);color:var(--brand)}

/* ---------- empty state with a way out ---------- */
.empty__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:16px}

/* ---------- enquiry form: two columns for the short fields ---------- */
.lmsg__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.lmsg__row{grid-template-columns:1fr}}
.lmsg__hint{margin:-4px 0 12px;font-size:.78rem;color:var(--muted-2)}
.lmsg__alt{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.lmsg__alt button{
  background:#e8f8ef;border:1px solid #bde6cf;border-radius:var(--r-sm);color:#0a7a43;
  font-size:.85rem;font-weight:700;padding:9px 14px;cursor:pointer;
}
.lmsg__alt button:hover{background:#d5f1e1}
.lmsg__alt span{font-size:.78rem;color:var(--muted-2)}
/* honeypot: hidden from people, still posted for the spam check */
.lmsg__hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}