/* dtks.com.cn: design-systems/dtks v1.1.0 colors_and_type.css + components.css, verbatim except the three @font-face
   lines (moved to fonts.css). Re-copy from the package when it moves; never edit tokens here. */
/* ═══════════════════════════════════════════════
   DTKS 迪泰克斯 – COLORS & TYPE
   Light theme · Lato + League Spartan for Latin, Noto Sans SC for Chinese · Ameratec navy #292a53
   structural, gold #fdb515 primary-CTA accent, the DTKS mark in Ameratec's logo blue #2A398F.
   THE entry point. Link this first in any DTKS artifact. Prefix --dtks-. v1.0.0, 2026-09-15.

   FAMILY MEMBER OF AMERATEC (David 2026-09-15, gate 3 and gate 4 of the DTKS brand sprint):
   DTKS is Ameratec's mainland China side, so every color, the Latin faces, the spacing, radii,
   motion and shadows are the parent's (design-systems/ameratec/colors_and_type.css, itself traced
   to the live ameratec.com.hk theme.css). This file adds what the mainland brand needs on its own:
   the CJK type system, the house mark, the stock badges and the four-partner strip.
   What it deliberately does NOT carry: Detex red. The house identity is DTKS; DETEX, SDC, DSI and
   Hager appear as partner badges in their own artwork (design-systems/detex/ for Detex).

   Never invent values. Every token below names its source.
   ═══════════════════════════════════════════════ */

/* ── FONTS ──
   MAINLAND RULE: Google Fonts is blocked in China, so nothing may reference googleapis or gstatic.
   Latin faces are bundled here (fonts/, OFL): Lato 400/700 and League Spartan 600, the same three
   woff2 files Ameratec ships. Chinese: Noto Sans SC 400/500/700 in Google's unicode-range subsets,
   self-hosted on the site (Sites/detex.com.cn/assets/fonts/, 505 files, declared by that site's
   assets/css/fonts.css); a new surface copies that declaration block, it is not duplicated here.
   Where a subset is missing the stack falls through to the system CJK face, which is correct. */

:root {
  /* ── BRAND COLORS ── (Ameratec, verbatim; see ../ameratec/colors_and_type.css for the theme.css lines) */
  --dtks-navy:        #292a53;  /* structural: header text, footer, hero scrim, nav, stats, totals */
  --dtks-navy-dark:   #20214a;  /* navy button hover */
  --dtks-navy-900:    #1a1b3a;  /* deepest navy */
  --dtks-navy-600:    #353775;  /* navy step */
  --dtks-navy-link-h: #494c9e;  /* link / nav hover */
  --dtks-navy-light:  #eceef7;  /* navy tint surface / hover fill */
  --dtks-navy-50:     #f5f6fb;  /* faintest navy tint */
  --dtks-gold:        #fdb515;  /* PRIMARY-CTA + accent: primary button, eyebrow on navy, focus ring, the accent rule */
  --dtks-gold-hover:  #d99800;  /* primary button hover */
  --dtks-gold-deep:   #b87f00;  /* gold as TEXT on light (contrast-safe); never #fdb515 as text on white */
  --dtks-gold-light:  #fec74a;  /* stats label on navy */
  --dtks-gold-soft:   #fff6dd;  /* gold tint surface / callout */
  --dtks-logo-blue:   #2A398F;  /* THE MARK ONLY. Ameratec's logo artwork blue; the DTKS lockups are drawn in it so the two marks sit as one family in print. Never a UI color. */

  /* ── TEXT ── (Ameratec ink scale; never pure #000 on screen) */
  --dtks-ink:         #292a53;  /* default body and heading color */
  --dtks-ink-900:     #15162a;
  --dtks-ink-800:     #1f2040;  /* strong text, gold-button label */
  --dtks-ink-soft:    #5b5d82;  /* muted body / descriptions */
  --dtks-ink-mute:    #8587a1;  /* faint meta / placeholder */
  --dtks-ink-300:     #b6b8ba;  /* disabled */

  /* ── SURFACES ── */
  --dtks-bg:          #f6f7f8;  /* alt-section background */
  --dtks-panel:       #ffffff;  /* page, cards, white surface */
  --dtks-line:        #e4e5e8;  /* default hairline */
  --dtks-line-2:      #eef0f2;  /* faint divider */
  --dtks-line-strong: #d4d5d8;  /* stronger rule */

  /* ── SEMANTIC ── */
  --dtks-positive:    #0e6e3a;  /* success, confirmed, 深圳现货 */
  --dtks-danger:      #c0392b;  /* error, out of stock */
  --dtks-warn:        #8a5a00;  /* warning text */
  --dtks-warn-bg:     #fdf4dd;  /* warning background */

  /* ── STOCK BADGES ── (the position's biggest promise is stock, so the three states are tokens,
     not ad-hoc colors; the state names are the ones the site and the ERP already use) */
  --dtks-stock-sz:    var(--dtks-positive);   /* 深圳现货: Pingshan shelf, same day */
  --dtks-stock-hk:    var(--dtks-navy);       /* 香港仓: 2 to 3 days transit and reship, outline badge */
  --dtks-stock-bo:    var(--dtks-ink-mute);   /* 期货: ordered from the factory, lead time on the quote */

  /* ── SEMANTIC ALIASES ── */
  --dtks-primary:     var(--dtks-navy);
  --dtks-accent:      var(--dtks-gold);
  --dtks-fg:          var(--dtks-ink);
  --dtks-fg-muted:    var(--dtks-ink-soft);
  --dtks-bg-elevated: var(--dtks-panel);
  --dtks-border:      var(--dtks-line);

  /* ── TYPOGRAPHY ──
     Latin = the parent's faces. Chinese = Noto Sans SC, the face the spec sheets and the site set.
     The CJK face is appended to every stack so Latin product names render in the brand face and
     Chinese falls through to Noto, which is how a Latin brand font is handled on a mainland page. */
  --dtks-font:         'Lato', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --dtks-font-display: 'League Spartan', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
  --dtks-font-zh:      'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;   /* Chinese-only runs: headings, the tagline, badges */
  --dtks-font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;              /* model numbers in tables, prices */

  /* Type scale: the parent's fixed px, exactly (theme.css --fs-*) */
  --dtks-fs-display:  64px;   /* hero */
  --dtks-fs-h1:       48px;
  --dtks-fs-h2:       36px;
  --dtks-fs-h3:       24px;
  --dtks-fs-h4:       19px;
  --dtks-fs-body:     17px;
  --dtks-fs-small:    15px;
  --dtks-fs-caption:  12px;
  --dtks-fs-micro:    11px;
  --dtks-h-hero:      clamp(36px, 6vw, 64px);
  --dtks-h-1:         clamp(32px, 4.5vw, 48px);
  --dtks-h-2:         clamp(26px, 3vw, 36px);
  --dtks-h-3:         24px;
  --dtks-h-4:         19px;

  /* Weights. CJK RULE (from 1apg, the family's other CJK package): Chinese body is 400, never the
     parent's 300 (Noto 300 at 17px on white is too thin to read on a phone); Chinese headings max 700.
     Latin keeps the parent's 300/400/500/700 where a run is Latin-only. */
  --dtks-w-light:     300;   /* Latin-only body on a marketing page, if wanted */
  --dtks-w-regular:   400;   /* DEFAULT body weight (Chinese pages) */
  --dtks-w-medium:    500;   /* Latin headings, nav, buttons, labels */
  --dtks-w-bold:      700;   /* Chinese headings, emphasis, the tagline */

  /* Line heights. CJK RULE: 1.3 for Chinese headings, 1.75 for Chinese body (1apg); Latin keeps 1.55 */
  --dtks-lh-tight:    1.15;
  --dtks-lh-snug:     1.3;
  --dtks-lh-normal:   1.55;  /* Latin body */
  --dtks-lh-zh:       1.75;  /* Chinese body */

  /* Tracking. CJK RULE: no negative tracking on Chinese, ever; eyebrows in Chinese track .3em at 500 */
  --dtks-track-tight:   -0.01em;  /* Latin headings */
  --dtks-track-display: -0.02em;  /* Latin hero */
  --dtks-track-btn:      0.02em;
  --dtks-track-label:    0.08em;  /* Latin eyebrow */
  --dtks-track-label-zh: 0.30em;  /* Chinese eyebrow */
  --dtks-track-zh:       0;

  /* ── SPACING ── (parent: 4/8/12/16/20/24/32/40/56/72/96) */
  --dtks-space-1: 4px;   --dtks-space-2: 8px;   --dtks-space-3: 12px;  --dtks-space-4: 16px;
  --dtks-space-5: 20px;  --dtks-space-6: 24px;  --dtks-space-7: 32px;  --dtks-space-8: 40px;
  --dtks-space-9: 56px;  --dtks-space-10: 72px; --dtks-space-11: 96px;
  --dtks-space-section: var(--dtks-space-10);

  /* ── RADII ── (parent: tight) */
  --dtks-radius-sm:   2px;  --dtks-radius: 4px;  --dtks-radius-lg: 8px;  --dtks-radius-pill: 999px;

  /* ── LAYOUT ── */
  --dtks-container:   1280px;  --dtks-gutter: 40px;  --dtks-header-h: 72px;

  /* ── MOTION ── */
  --dtks-ease: ease;  --dtks-dur-fast: 0.12s;  --dtks-dur-base: 0.15s;  --dtks-dur-card: 0.22s;

  /* ── SHADOWS ── (navy-tinted, low; never a glow) */
  --dtks-shadow-sm:   0 1px 2px rgba(41, 42, 83, 0.06), 0 1px 1px rgba(41, 42, 83, 0.04);
  --dtks-shadow:      0 2px 6px rgba(41, 42, 83, 0.08), 0 1px 2px rgba(41, 42, 83, 0.04);
  --dtks-shadow-lg:   0 8px 20px rgba(41, 42, 83, 0.10), 0 2px 6px rgba(41, 42, 83, 0.06);
  --dtks-shadow-hover: 0 14px 28px rgba(41, 42, 83, 0.14);
  --dtks-focus-gold:  2px solid var(--dtks-gold);
}
@media (max-width: 767px) { :root { --dtks-gutter: 16px; } }

/* ═══ SEMANTIC BASE ═══ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
       font-family: var(--dtks-font); color: var(--dtks-ink); background: var(--dtks-panel); }
html, body { margin: 0; }
body { background: var(--dtks-panel); font-size: var(--dtks-fs-body); font-weight: var(--dtks-w-regular); line-height: var(--dtks-lh-zh); }
:lang(en) body, body:lang(en) { line-height: var(--dtks-lh-normal); }
h1, h2, h3, h4, h5, h6 { font-family: var(--dtks-font-display); font-weight: var(--dtks-w-medium); line-height: var(--dtks-lh-snug);
                         letter-spacing: var(--dtks-track-tight); color: var(--dtks-ink); margin: 0 0 var(--dtks-space-4); text-wrap: balance; }
/* Chinese headings: Noto 700, no tracking. Mark the run with lang="zh-CN" (the page or the element). */
:lang(zh-CN) h1, :lang(zh-CN) h2, :lang(zh-CN) h3, :lang(zh-CN) h4, h1:lang(zh-CN), h2:lang(zh-CN), h3:lang(zh-CN), h4:lang(zh-CN) {
  font-family: var(--dtks-font-zh); font-weight: var(--dtks-w-bold); letter-spacing: var(--dtks-track-zh); }
h1 { font-size: var(--dtks-h-1); line-height: var(--dtks-lh-tight); }
:lang(zh-CN) h1 { line-height: 1.2; }
h2 { font-size: var(--dtks-h-2); }  h3 { font-size: var(--dtks-h-3); }  h4 { font-size: var(--dtks-h-4); }
p  { margin: 0 0 var(--dtks-space-4); }
a  { color: var(--dtks-navy); text-decoration: none; transition: color var(--dtks-dur-fast) var(--dtks-ease); }
a:hover { color: var(--dtks-navy-link-h); }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: var(--dtks-focus-gold); outline-offset: 1px; }

/* Hero title: display face, white on the navy scrim */
.dtks-hero-title { font-family: var(--dtks-font-display); font-size: var(--dtks-h-hero); font-weight: var(--dtks-w-medium); letter-spacing: var(--dtks-track-display); line-height: var(--dtks-lh-tight); color: #fff; }
.dtks-hero-title:lang(zh-CN) { font-family: var(--dtks-font-zh); font-weight: var(--dtks-w-bold); letter-spacing: 0; line-height: 1.2; }
.dtks-lead { font-size: var(--dtks-fs-h4); line-height: 1.6; color: var(--dtks-ink-soft); }

/* Eyebrow: Latin 12px caps tracked .08em; Chinese 12px tracked .3em at 500 */
.dtks-eyebrow { font-size: var(--dtks-fs-caption); font-weight: var(--dtks-w-medium); letter-spacing: var(--dtks-track-label); text-transform: uppercase; color: var(--dtks-ink-soft); margin-bottom: var(--dtks-space-2); }
.dtks-eyebrow:lang(zh-CN), :lang(zh-CN) .dtks-eyebrow { letter-spacing: var(--dtks-track-label-zh); text-transform: none; }
.dtks-eyebrow--gold { color: var(--dtks-gold); }
.dtks-small { font-size: var(--dtks-fs-small); }
.dtks-caption { font-size: var(--dtks-fs-caption); color: var(--dtks-ink-soft); }
.dtks-micro { font-size: var(--dtks-fs-micro); }
.dtks-mono { font-family: var(--dtks-font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* The tagline and brand line are typeset objects, not free copy: Noto 700, and the Chinese full-width
   comma is the separator. English renderings are for internal documents only. */
.dtks-tagline { font-family: var(--dtks-font-zh); font-weight: var(--dtks-w-bold); font-size: var(--dtks-h-2); line-height: 1.25; letter-spacing: 0.02em; color: var(--dtks-ink); }
.dtks-brandline { font-family: var(--dtks-font-zh); font-weight: var(--dtks-w-regular); font-size: var(--dtks-fs-h4); line-height: 1.6; color: var(--dtks-ink-soft); }

/* Gold accent rule: the family motif (Ameratec .am-rule) */
.dtks-rule { width: 64px; height: 3px; background: var(--dtks-gold); border: none; border-radius: 2px; margin: var(--dtks-space-4) 0; }

/* Bilingual pair: Chinese first, English beneath in the muted ink */
.dtks-bi { display: grid; gap: 2px; }
.dtks-bi > [lang="en"] { font-size: 0.88em; color: var(--dtks-ink-soft); font-weight: var(--dtks-w-regular); letter-spacing: 0; }

/* ═══ PRINT-SAFE DEFAULTS ═══ */
@media print { .print-hide { display: none !important; } }

/* ═══════════════════════════════════════════════
   DTKS 迪泰克斯 – COMPONENTS
   Built only on tokens from colors_and_type.css. Link AFTER it. Never hard-code hex here.
   Patterns are Ameratec's (white sticky header, gold primary button, hairline cards, navy quote
   panel) plus what the mainland brand needs: the house mark sized by height, the four-partner
   strip, the three stock badges and the bilingual pair.
   ═══════════════════════════════════════════════ */

/* ════ LAYOUT ════ */
.dtks-container { max-width: var(--dtks-container); margin-inline: auto; padding-inline: var(--dtks-gutter); }
.dtks-section { padding-block: var(--dtks-space-section); }
.dtks-section--tight { padding-block: var(--dtks-space-8); }
.dtks-section--alt { background: var(--dtks-bg); }
.dtks-section--brand { background: var(--dtks-navy); color: #fff; }
.dtks-section--brand h1, .dtks-section--brand h2, .dtks-section--brand h3 { color: #fff; }
.dtks-section--brand .dtks-eyebrow { color: var(--dtks-gold); }
.dtks-section--gold { background: var(--dtks-gold); color: var(--dtks-ink-800); }
.dtks-grid { display: grid; gap: var(--dtks-space-6); }
.dtks-grid--2 { grid-template-columns: repeat(2, 1fr); }
.dtks-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dtks-grid--4 { grid-template-columns: repeat(4, 1fr); }
.dtks-grid--cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 900px) { .dtks-grid--3, .dtks-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .dtks-grid--2, .dtks-grid--3, .dtks-grid--4 { grid-template-columns: 1fr; } }

/* ════ HEADER ════ white, sticky, hairline; the WIDE lockup at 40px; nav in the small size */
.dtks-header { display: flex; align-items: center; justify-content: space-between; gap: var(--dtks-space-5);
  background: var(--dtks-panel); color: var(--dtks-ink); border-bottom: 1px solid var(--dtks-line);
  padding: 14px var(--dtks-gutter); position: sticky; top: 0; z-index: 100; min-height: var(--dtks-header-h); }
.dtks-header__nav { display: flex; gap: var(--dtks-space-5); align-items: center; flex: 1 1 auto; justify-content: center; min-width: 0; }
.dtks-header__nav a { color: var(--dtks-ink); font-weight: var(--dtks-w-medium); font-size: var(--dtks-fs-small); padding: 8px 4px; }
.dtks-header__nav a:hover { color: var(--dtks-navy-link-h); }
.dtks-header__right { display: flex; align-items: center; gap: var(--dtks-space-3); flex-shrink: 0; }
.dtks-header--navy { background: var(--dtks-navy); color: #fff; border-bottom: 3px solid var(--dtks-gold); }
.dtks-header--navy .dtks-header__nav a { color: rgba(255,255,255,.92); }

/* ════ THE MARK ════ height-only sizing, never a width (see ../_SPEC.md "Logo handling") */
.dtks-logo { height: auto; width: auto; object-fit: contain; display: block; }
.dtks-logo--header { max-height: 34px; }   /* the wordmark: its viewBox is the ink box, so 34px is 34px of ink */
.dtks-logo--footer { max-height: 38px; }
.dtks-logo--sm     { max-height: 24px; }   /* the wordmark's floor; below this use the square mark */
.dtks-logo--lg     { max-height: 72px; }   /* the wordmark on covers */
.dtks-logo--mark   { height: 32px; width: 32px; }

/* ════ PARTNER STRIP ════ the house beside its four manufacturers. Every badge is that maker's own
   artwork, sized by height to one common cap line, greyscale off, color on. DETEX keeps its red:
   the house does not carry Detex red, the badge does. Order is fixed: Detex, SDC, DSI, Hager. */
.dtks-partners { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dtks-space-8) var(--dtks-space-9); }
.dtks-partners__label { font-size: var(--dtks-fs-caption); font-weight: var(--dtks-w-medium); letter-spacing: var(--dtks-track-label-zh); color: var(--dtks-ink-soft); flex-basis: 100%; }
.dtks-partners img { max-height: 32px; width: auto; height: auto; object-fit: contain; }
.dtks-partners--lg img { max-height: 48px; }
.dtks-partners--quiet img { filter: grayscale(1); opacity: .75; transition: filter var(--dtks-dur-base) var(--dtks-ease), opacity var(--dtks-dur-base) var(--dtks-ease); }
.dtks-partners--quiet img:hover { filter: none; opacity: 1; }
.dtks-partners__house { padding-right: var(--dtks-space-6); border-right: 1px solid var(--dtks-line-strong); }
.dtks-partners__house img { max-height: 28px; }   /* 1.15x DETEX's 24px cap, the ceiling */

/* ════ BUTTONS ════ gold primary, navy dark, ghost; 12x20 pad, 4px radius, 15px 500 */
.dtks-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px;
  border-radius: var(--dtks-radius); font-family: var(--dtks-font); font-size: var(--dtks-fs-small); font-weight: var(--dtks-w-medium);
  letter-spacing: var(--dtks-track-btn); line-height: 1; border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--dtks-dur-base) var(--dtks-ease), color var(--dtks-dur-base) var(--dtks-ease), border-color var(--dtks-dur-base) var(--dtks-ease), transform var(--dtks-dur-base) var(--dtks-ease); }
.dtks-btn:lang(zh-CN) { letter-spacing: .06em; }
.dtks-btn:active { transform: translateY(1px); }
.dtks-btn--primary { background: var(--dtks-gold); color: var(--dtks-ink-800); border-color: var(--dtks-gold); }
.dtks-btn--primary:hover { background: var(--dtks-gold-hover); border-color: var(--dtks-gold-hover); color: var(--dtks-ink-800); }
.dtks-btn--dark { background: var(--dtks-navy); color: #fff; border-color: var(--dtks-navy); }
.dtks-btn--dark:hover { background: var(--dtks-navy-dark); color: #fff; }
.dtks-btn--ghost { background: transparent; color: var(--dtks-ink); border-color: var(--dtks-line-strong); }
.dtks-btn--ghost:hover { border-color: var(--dtks-navy); color: var(--dtks-navy); }
.dtks-btn--onnavy { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.dtks-btn--onnavy:hover { background: rgba(255,255,255,.1); color: #fff; }
.dtks-btn--sm { padding: 8px 14px; font-size: var(--dtks-fs-caption); }

/* ════ STOCK BADGES ════ 深圳现货 solid green, 香港仓 navy outline, 期货 muted outline.
   The badge text is the promise; the token is the state. Never a fourth state. */
.dtks-stock { display: inline-flex; align-items: center; gap: .4em; padding: 4px 10px; border-radius: var(--dtks-radius-pill);
  font-family: var(--dtks-font-zh); font-size: var(--dtks-fs-caption); font-weight: var(--dtks-w-medium); letter-spacing: .04em; line-height: 1.2; border: 1px solid currentColor; }
.dtks-stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dtks-stock--sz { background: var(--dtks-stock-sz); color: #fff; border-color: var(--dtks-stock-sz); }
.dtks-stock--sz::before { background: #fff; }
.dtks-stock--hk { color: var(--dtks-stock-hk); background: var(--dtks-panel); }
.dtks-stock--bo { color: var(--dtks-stock-bo); background: var(--dtks-panel); }

/* ════ CHIPS / PILLS ════ */
.dtks-pill { display: inline-flex; padding: 4px 12px; border-radius: var(--dtks-radius-pill); font-size: var(--dtks-fs-micro); font-weight: var(--dtks-w-medium); letter-spacing: .04em; text-transform: uppercase; }
.dtks-pill:lang(zh-CN) { text-transform: none; letter-spacing: .1em; }
.dtks-pill--gold { background: var(--dtks-gold); color: var(--dtks-ink-800); }
.dtks-pill--navy { background: var(--dtks-navy); color: #fff; }
.dtks-pill--soft { background: var(--dtks-navy-light); color: var(--dtks-navy); }
.dtks-pill--danger { background: var(--dtks-danger); color: #fff; }

/* ════ CARDS ════ white, hairline, 4px, lift on hover */
.dtks-card { background: var(--dtks-panel); border: 1px solid var(--dtks-line); border-radius: var(--dtks-radius); padding: var(--dtks-space-6);
  transition: transform var(--dtks-dur-card) var(--dtks-ease), box-shadow var(--dtks-dur-card) var(--dtks-ease); }
.dtks-card--lift:hover { transform: translateY(-3px); box-shadow: var(--dtks-shadow-hover); }
.dtks-card__title { font-family: var(--dtks-font-display); font-size: var(--dtks-fs-h4); font-weight: var(--dtks-w-medium); margin: 0 0 var(--dtks-space-2); }
.dtks-card__title:lang(zh-CN) { font-family: var(--dtks-font-zh); font-weight: var(--dtks-w-bold); }
.dtks-card__meta { font-size: var(--dtks-fs-caption); color: var(--dtks-ink-soft); }
/* product card: image on the alt surface, model number in mono, badge top-left */
.dtks-product { position: relative; display: flex; flex-direction: column; gap: var(--dtks-space-3); }
.dtks-product__fig { aspect-ratio: 4/3; background: var(--dtks-bg); display: grid; place-items: center; overflow: hidden; border-radius: var(--dtks-radius-sm); }
.dtks-product__fig img { max-height: 84%; width: auto; }
.dtks-product .dtks-stock { position: absolute; top: 10px; left: 10px; }
.dtks-product__sku { font-family: var(--dtks-font-mono); font-size: var(--dtks-fs-small); color: var(--dtks-ink); }
.dtks-product__maker { font-size: var(--dtks-fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--dtks-ink-mute); }

/* ════ QUOTE PANEL ════ the package quote (一扇门，一次备齐): navy panel, light inputs, gold submit */
.dtks-quote { background: var(--dtks-navy); color: #fff; border-radius: var(--dtks-radius-lg); padding: var(--dtks-space-8); }
.dtks-quote h2, .dtks-quote h3 { color: #fff; }
.dtks-quote .dtks-eyebrow { color: var(--dtks-gold); }
.dtks-field { display: grid; gap: 6px; }
.dtks-field label { font-size: var(--dtks-fs-caption); font-weight: var(--dtks-w-medium); letter-spacing: .06em; color: rgba(255,255,255,.75); }
.dtks-input, .dtks-select, .dtks-textarea { width: 100%; padding: 12px 14px; border-radius: var(--dtks-radius); border: 1px solid var(--dtks-line);
  background: var(--dtks-panel); color: var(--dtks-ink); font: inherit; font-size: var(--dtks-fs-small); }
.dtks-input:focus, .dtks-select:focus, .dtks-textarea:focus { outline: var(--dtks-focus-gold); outline-offset: 1px; }
.dtks-textarea { min-height: 120px; resize: vertical; }

/* ════ DATA TABLE ════ price lists, door schedules; model numbers mono, figures tabular */
.dtks-table-wrap { overflow-x: auto; }
.dtks-table { width: 100%; border-collapse: collapse; font-size: var(--dtks-fs-small); }
.dtks-table th { text-align: left; font-size: var(--dtks-fs-caption); font-weight: var(--dtks-w-medium); letter-spacing: .06em; color: var(--dtks-ink-soft); padding: 10px 14px; border-bottom: 1px solid var(--dtks-line-strong); }
.dtks-table td { padding: 10px 14px; border-bottom: 1px solid var(--dtks-line-2); vertical-align: top; }
.dtks-table .num, .dtks-table .sku { font-family: var(--dtks-font-mono); font-variant-numeric: tabular-nums; }
.dtks-table .num { text-align: right; }
.dtks-table tr:hover td { background: var(--dtks-navy-50); }

/* ════ DOCUMENT / SPEC ROW ════ a spec sheet with its language tags (the 65 Chinese sheets sit beside the English originals) */
.dtks-doc { display: flex; align-items: center; gap: var(--dtks-space-4); padding: 12px 0; border-bottom: 1px solid var(--dtks-line-2); }
.dtks-doc__name { flex: 1 1 auto; font-weight: var(--dtks-w-medium); }
.dtks-doc__lang { font-size: var(--dtks-fs-micro); letter-spacing: .1em; padding: 2px 8px; border: 1px solid var(--dtks-line-strong); border-radius: var(--dtks-radius-sm); color: var(--dtks-ink-soft); }
.dtks-doc__lang--zh { color: var(--dtks-navy); border-color: var(--dtks-navy); }

/* ════ CALLOUTS ════ */
.dtks-callout { border-left: 3px solid var(--dtks-gold); background: var(--dtks-gold-soft); padding: var(--dtks-space-4) var(--dtks-space-5); border-radius: 0 var(--dtks-radius) var(--dtks-radius) 0; }
.dtks-callout--navy { border-left-color: var(--dtks-navy); background: var(--dtks-navy-light); }
.dtks-callout--warn { border-left-color: var(--dtks-warn); background: var(--dtks-warn-bg); color: var(--dtks-warn); }

/* ════ FOOTER ════ navy, the white lockup, the four partner badges knocked to white, the ICP line */
.dtks-footer { background: var(--dtks-navy); color: rgba(255,255,255,.72); padding: var(--dtks-space-9) 0 var(--dtks-space-6); font-size: var(--dtks-fs-small); }
.dtks-footer a { color: rgba(255,255,255,.85); }
.dtks-footer a:hover { color: var(--dtks-gold-light); }
.dtks-footer h4 { color: #fff; font-size: var(--dtks-fs-caption); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--dtks-space-3); }
.dtks-footer h4:lang(zh-CN) { text-transform: none; letter-spacing: .3em; }
.dtks-footer__legal { margin-top: var(--dtks-space-8); padding-top: var(--dtks-space-4); border-top: 1px solid rgba(255,255,255,.15); font-size: var(--dtks-fs-caption); color: rgba(255,255,255,.5); display: flex; flex-wrap: wrap; gap: var(--dtks-space-4); justify-content: space-between; }
.dtks-footer .dtks-partners img { opacity: .8; } /* the footer references assets/partners/*-white.png and detex-wordmark-white.svg; a brightness/invert filter fills the SDC letters solid, so no filter here */

/* ════ UTILITIES ════ */
.dtks-muted { color: var(--dtks-ink-soft); }
.dtks-navy-text { color: var(--dtks-navy); }
.dtks-gold-text { color: var(--dtks-gold-deep); }   /* gold as text is always the deep gold */
.dtks-center { text-align: center; }
.dtks-stack { display: grid; gap: var(--dtks-space-4); }
.dtks-row { display: flex; flex-wrap: wrap; gap: var(--dtks-space-4); align-items: center; }