/* ============================================================
   ICSmooth Layout & Home — ics- design system
   Engineer-tool style: sharp corners, hairline borders,
   navy/cyan palette, mono part numbers. No cartzilla demo look.
   ============================================================ */

:root {
    --ics-navy: #0A1E38;
    --ics-navy-2: #0F2D52;
    --ics-blue: #15549E;
    --ics-blue-h: #10417C;
    --ics-cyan: #38BDF8;
    --ics-bg-soft: #F5F8FC;
    --ics-line: #E2E8F0;
    --ics-ink: #0F172A;
    --ics-mute: #64748B;
    --ics-green: #16A34A;
    --ics-mono: 'Manrope', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif; /* 2026-09-22 客户定稿：全站统一 Manrope，变量名保留兼容 44 处引用 */
    --ics-radius: 6px;
    --ics-radius-btn: 4px;
}

/* ---------- shared bits ---------- */

body { font-variant-numeric: tabular-nums; } /* Manrope 数字表格化，保持价格/数量列对齐 */

.ics-pn {
    font-family: var(--ics-mono);
    letter-spacing: -0.01em;
}

.ics-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: var(--ics-radius-btn);
    border: 1px solid var(--ics-blue);
    background: var(--ics-blue);
    color: #fff;
    font-weight: 600;
    font-size: .875rem;
    padding: .625rem 1.25rem;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
    cursor: pointer;
}
.ics-btn:hover { background: var(--ics-blue-h); border-color: var(--ics-blue-h); color: #fff; }
.ics-btn--ghost { background: transparent; color: var(--ics-blue); }
.ics-btn--ghost:hover { background: rgba(21, 84, 158, .08); color: var(--ics-blue); }
.ics-btn--light { background: #fff; border-color: #fff; color: var(--ics-navy); }
.ics-btn--light:hover { background: var(--ics-cyan); border-color: var(--ics-cyan); color: var(--ics-navy); }
.ics-btn--cyan { background: transparent; border-color: var(--ics-cyan); color: var(--ics-cyan); }
.ics-btn--cyan:hover { background: var(--ics-cyan); border-color: var(--ics-cyan); color: var(--ics-navy); }
.ics-btn--sm { padding: .375rem .875rem; font-size: .8125rem; }

.ics-tag {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ics-cyan);
}

.ics-eyebrow {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ics-mute);
}

.ics-section-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ics-ink);
    margin: 0;
    letter-spacing: -0.01em;
}

.ics-stock { color: var(--ics-green); font-size: .75rem; font-weight: 600; }
.ics-stock::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ics-green); margin-right: .375rem; vertical-align: 1px; }

/* scroll reveal */
.ics-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.ics-reveal.ics-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .ics-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   HEADER — two-deck: masthead / navbar
   ============================================================ */

.ics-head-sticky {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid var(--ics-line);
}

/* masthead */
.ics-masthead { padding: .875rem 0; }
.ics-masthead__row { display: flex; align-items: center; gap: 1.5rem; }
.ics-logo { height: 52px; width: auto; max-width: 100%; flex-shrink: 0; }
.ics-masthead__burger {
    display: none;
    border: 1px solid var(--ics-line);
    background: #fff;
    border-radius: var(--ics-radius-btn);
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    color: var(--ics-ink);
}
@media (max-width: 991.98px) {
    .ics-logo { height: 36px; }
    .ics-masthead__burger { display: inline-flex; }
}

/* big search */
.ics-search { position: relative; flex: 1 1 auto; max-width: 760px; }
.ics-search__input {
    width: 100%;
    height: 46px;
    border: 2px solid var(--ics-ink);
    border-radius: var(--ics-radius-btn);
    padding: 0 110px 0 2.75rem;
    font-size: .9375rem;
    color: var(--ics-ink);
    background: #fff;
    outline: none;
    transition: border-color .15s ease;
}
.ics-search__input:focus { border-color: var(--ics-blue); }
.ics-search__icon {
    position: absolute; left: .875rem; top: 50%; transform: translateY(-50%);
    color: var(--ics-mute); font-size: 1rem; pointer-events: none;
}
.ics-search__go {
    position: absolute; right: 4px; top: 4px; bottom: 4px;
    border: 0; border-radius: 2px;
    background: var(--ics-blue); color: #fff;
    font-weight: 600; font-size: .8125rem;
    padding: 0 1rem;
    cursor: pointer;
    transition: background .15s ease;
}
.ics-search__go:hover { background: var(--ics-blue-h); }

/* suggestion dropdown (shared) */
.ics-suggest {
    display: none;
    position: absolute; left: 0; right: 0; top: calc(100% + 6px);
    background: #fff;
    border: 1px solid var(--ics-line);
    border-top: 3px solid var(--ics-blue);
    border-radius: var(--ics-radius);
    box-shadow: 0 12px 32px rgba(10, 30, 56, .12);
    max-height: 380px;
    overflow-y: auto;
    z-index: 50;
}
.ics-suggest.show { display: block; }
.ics-suggest__item {
    display: flex; align-items: center; gap: .625rem;
    padding: .625rem .875rem;
    color: var(--ics-ink); text-decoration: none;
    border-bottom: 1px solid var(--ics-bg-soft);
}
.ics-suggest__item:hover { background: var(--ics-bg-soft); }
.ics-suggest__item i { color: var(--ics-mute); }
.ics-suggest__pn { font-family: var(--ics-mono); font-weight: 600; font-size: .8125rem; }
.ics-suggest__meta { font-size: .75rem; color: var(--ics-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ics-suggest__empty { padding: .75rem .875rem; color: var(--ics-mute); font-size: .8125rem; }
.ics-suggest__all {
    display: block; text-align: center;
    padding: .625rem; font-size: .8125rem; font-weight: 600;
    color: var(--ics-blue); text-decoration: none;
}
.ics-suggest__all:hover { background: var(--ics-bg-soft); }

/* RFQ button */
.ics-rfq-btn {
    display: inline-flex; align-items: center; gap: .625rem;
    border: 1px solid var(--ics-line);
    border-radius: var(--ics-radius);
    background: #fff;
    padding: .5rem .875rem;
    text-decoration: none;
    color: var(--ics-ink);
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
    transition: border-color .15s ease;
}
.ics-rfq-btn:hover { border-color: var(--ics-blue); color: var(--ics-ink); }
.ics-rfq-btn__badge {
    min-width: 20px; height: 20px;
    border-radius: 10px;
    background: var(--ics-blue);
    color: #fff;
    font-size: .6875rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 6px;
}
.ics-rfq-btn--dark { background: var(--ics-navy); border-color: var(--ics-navy); color: #fff; }
.ics-rfq-btn--dark:hover { background: var(--ics-navy-2); border-color: var(--ics-navy-2); color: #fff; }
.ics-rfq-btn--dark .ics-rfq-btn__badge { background: var(--ics-cyan); color: var(--ics-navy); }

/* ---------- guard: Cartzilla reboot forces ol,ul { display:flex; flex-direction:column; padding-left:1.5rem }
   every ics- list below re-declares its full flex/list properties so nothing falls through to that rule ---------- */

/* ---------- guard: Cartzilla sets a near-black color directly on h1-h6 (element rule beats inheritance),
   so every dark-themed container below must force its headings back to the container color ---------- */
.ics-hero h1, .ics-hero h2, .ics-hero h3, .ics-hero h4, .ics-hero h5, .ics-hero h6,
.ics-info-card h1, .ics-info-card h2, .ics-info-card h3, .ics-info-card h4, .ics-info-card h5, .ics-info-card h6,
.ics-cta h1, .ics-cta h2, .ics-cta h3, .ics-cta h4, .ics-cta h5, .ics-cta h6,
.ics-cathead h1, .ics-cathead h2, .ics-cathead h3, .ics-cathead h4, .ics-cathead h5, .ics-cathead h6,
.ics-catcta h1, .ics-catcta h2, .ics-catcta h3, .ics-catcta h4, .ics-catcta h5, .ics-catcta h6,
.ics-foot-cta h1, .ics-foot-cta h2, .ics-foot-cta h3, .ics-foot-cta h4, .ics-foot-cta h5, .ics-foot-cta h6,
.ics-foot h1, .ics-foot h2, .ics-foot h3, .ics-foot h4, .ics-foot h5, .ics-foot h6 {
    color: inherit;
}

/* navbar deck */
.ics-navbar { border-top: 1px solid var(--ics-line); }
.ics-navbar__list {
    display: flex; flex-direction: row; align-items: stretch;
    list-style: none; margin: 0; padding: 0;
    gap: .25rem;
}
.ics-navbar__link {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .6875rem .875rem;
    font-size: .875rem; font-weight: 600;
    color: var(--ics-ink); text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}
.ics-navbar__link:hover { color: var(--ics-blue); }
.ics-navbar__link.ics-is-active { color: var(--ics-blue); border-bottom-color: var(--ics-blue); }
.ics-navbar__caret { font-size: .625rem; color: var(--ics-mute); transition: transform .15s ease; }
.ics-nav-item { position: relative; }
.ics-nav-item:hover .ics-navbar__caret { transform: rotate(180deg); }

/* products dropdown panel */
.ics-nav-dd {
    display: none;
    position: absolute; left: 0; top: 100%;
    width: 840px; max-width: calc(100vw - 3rem);
    background: #fff;
    border: 1px solid var(--ics-line);
    border-top: 3px solid var(--ics-blue);
    border-radius: 0 0 var(--ics-radius) var(--ics-radius);
    box-shadow: 0 20px 48px rgba(10, 30, 56, .14);
    padding: 1.375rem 1.5rem 1.75rem;
    z-index: 60;
}
.ics-nav-item:hover .ics-nav-dd,
.ics-nav-item:focus-within .ics-nav-dd { display: block; }
.ics-nav-dd__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2.25rem; }
.ics-nav-dd__cat {
    display: flex; flex-direction: column;
    padding: .125rem 0;
}
.ics-nav-dd__catname {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    font-weight: 700; font-size: .8125rem; color: var(--ics-ink);
    text-decoration: none;
    padding: .1875rem 0 .5rem;
    border-bottom: 1px solid var(--ics-line);
    margin-bottom: .5rem;
}
.ics-nav-dd__catname > span:first-child {
    min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.ics-nav-dd__catname:hover { color: var(--ics-blue); }
.ics-nav-dd__num { font-family: var(--ics-mono); font-size: .6875rem; color: var(--ics-mute); font-weight: 500; white-space: nowrap; }
.ics-nav-dd__subs {
    display: grid; flex-direction: row; grid-template-columns: 1fr 1fr;
    gap: .375rem; padding: 0; list-style: none;
}
.ics-nav-dd__sub {
    display: flex; flex-direction: row; align-items: center;
    height: 2.875rem; padding: .375rem .625rem;
    font-size: .75rem; line-height: 1.25; color: var(--ics-ink);
    background: var(--ics-bg-soft);
    border: 1px solid var(--ics-line);
    border-radius: var(--ics-radius-btn);
    text-decoration: none;
    overflow: hidden; word-break: break-word;
    transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
.ics-nav-dd__subtxt {
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden;
}
.ics-nav-dd__sub:hover { color: var(--ics-blue); border-color: var(--ics-blue); background: #fff; }
.ics-nav-dd__sub--blank { visibility: hidden; }
.ics-nav-dd__more {
    align-self: flex-end;
    margin-top: .4375rem;
    font-size: .6875rem; font-weight: 700; color: var(--ics-blue); text-decoration: none;
}
.ics-nav-dd__more:hover { color: var(--ics-blue-h); }

/* mobile drawer */
.ics-drawer__search { position: relative; margin-bottom: 1rem; }
.ics-drawer__search .ics-search__input { padding-right: 5.5rem; }
.ics-drawer__search .ics-search__go { padding: 0 .875rem; }
.ics-drawer__nav { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; gap: 0; }
.ics-drawer__nav > li + li { border-top: 1px solid var(--ics-bg-soft); }
.ics-drawer__nav a {
    display: flex; align-items: center; justify-content: space-between;
    padding: .875rem .25rem;
    font-weight: 600; font-size: .9375rem;
    color: var(--ics-ink); text-decoration: none;
}
.ics-drawer__nav a:hover { color: var(--ics-blue); }
.ics-drawer__cats { padding: .25rem 0 .25rem 1rem; }
.ics-drawer__cats a {
    display: block; padding: .4375rem .25rem;
    font-size: .8125rem; font-weight: 400; color: var(--ics-mute); text-decoration: none;
}
.ics-drawer__cats a:hover { color: var(--ics-blue); }
.ics-drawer__foot { display: flex; gap: .75rem; margin-top: 1.25rem; }

/* ============================================================
   HOME
   ============================================================ */

/* ---- S1 hero ---- */
.ics-hero {
    position: relative;
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 1.6px),
        radial-gradient(1000px 480px at 78% -10%, rgba(56, 189, 248, .18), transparent 60%),
        radial-gradient(800px 420px at 8% 110%, rgba(21, 84, 158, .35), transparent 60%),
        linear-gradient(135deg, var(--ics-navy) 0%, var(--ics-navy-2) 100%);
    background-size: 26px 26px, auto, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat;
    color: #fff;
    padding: 4.5rem 0 0;
    overflow: hidden;
}
/* circuit trace layer: wide grid + solder joints at intersections */
.ics-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle 2px at 1px 1px, rgba(56, 189, 248, .22) 98%, transparent),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 130px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 130px);
    background-size: 130px 130px, auto, auto;
    -webkit-mask-image: radial-gradient(1300px 640px at 50% 0%, #000 25%, transparent 78%);
    mask-image: radial-gradient(1300px 640px at 50% 0%, #000 25%, transparent 78%);
    pointer-events: none;
}
/* diagonal light beam sweep */
.ics-hero::after {
    content: "";
    position: absolute; top: -10%; bottom: -10%; left: -35%;
    width: 34%;
    background: linear-gradient(115deg, transparent, rgba(56, 189, 248, .08), transparent);
    transform: skewX(-14deg);
    animation: icsBeam 9s ease-in-out infinite;
    pointer-events: none;
}
@keyframes icsBeam {
    0% { transform: translateX(0) skewX(-14deg); }
    55%, 100% { transform: translateX(430%) skewX(-14deg); }
}
@media (prefers-reduced-motion: reduce) { .ics-hero::after { animation: none; display: none; } }
/* decorative CSS-drawn chip, right side */
.ics-chip-deco {
    position: absolute; right: 5%; top: 50%;
    width: 290px; height: 290px;
    transform: translateY(-50%) rotate(9deg);
    opacity: .45;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, rgba(56, 189, 248, .5) 0 3px, transparent 3px 26px) top / 100% 44px no-repeat,
        repeating-linear-gradient(90deg, rgba(56, 189, 248, .5) 0 3px, transparent 3px 26px) bottom / 100% 44px no-repeat,
        repeating-linear-gradient(0deg, rgba(56, 189, 248, .5) 0 3px, transparent 3px 26px) left / 44px 100% no-repeat,
        repeating-linear-gradient(0deg, rgba(56, 189, 248, .5) 0 3px, transparent 3px 26px) right / 44px 100% no-repeat;
}
.ics-chip-deco::before {
    content: "";
    position: absolute; inset: 44px;
    border: 2px solid rgba(56, 189, 248, .3);
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(56, 189, 248, .08), rgba(21, 84, 158, .14));
    box-shadow: 0 0 70px rgba(56, 189, 248, .16), inset 0 0 46px rgba(56, 189, 248, .07);
}
.ics-chip-deco::after {
    content: "";
    position: absolute; inset: 44px; margin: auto;
    width: 96px; height: 96px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(56, 189, 248, .55), rgba(21, 84, 158, .45));
    box-shadow: 0 0 46px rgba(56, 189, 248, .45);
}
@media (max-width: 1279.98px) { .ics-chip-deco { right: -6%; opacity: .3; } }
@media (max-width: 991.98px) { .ics-chip-deco { display: none; } }
.ics-hero__inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; text-align: center; padding: 0 1rem; }
.ics-hero__kicker {
    display: inline-flex; align-items: center; gap: .5rem;
    border: 1px solid rgba(56, 189, 248, .4);
    color: var(--ics-cyan);
    border-radius: 999px;
    font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    padding: .375rem .875rem;
    margin-bottom: 1.5rem;
}
.ics-hero__title {
    font-size: clamp(1.875rem, 4.2vw, 3.25rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}
.ics-hero__title em { font-style: normal; color: var(--ics-cyan); }
.ics-hero__sub {
    color: rgba(255, 255, 255, .72);
    font-size: clamp(.9375rem, 1.6vw, 1.0625rem);
    line-height: 1.65;
    max-width: 620px;
    margin: 0 auto 2.25rem;
}
/* hero search = search in dark */
.ics-hero .ics-search { max-width: 680px; margin: 0 auto; }
.ics-hero .ics-search__input {
    height: 54px;
    border: 2px solid rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .97);
    padding: 0 132px 0 2.875rem;
    font-size: 1rem;
}
/*2026-09-28 修复: 输入框为白底, 原白色 75% 图标不可见*/
.ics-hero .ics-search__icon { color: var(--ics-mute); }
.ics-hero .ics-search__go { top: 5px; bottom: 5px; right: 5px; padding: 0 1.375rem; font-size: .875rem; }
.ics-hero__trending {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: .5rem; margin-top: 1.125rem;
    font-size: .8125rem; color: rgba(255, 255, 255, .55);
}
.ics-hero__chip {
    font-family: var(--ics-mono);
    font-size: .75rem;
    color: rgba(255, 255, 255, .85);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    padding: .3125rem .75rem;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.ics-hero__chip:hover { border-color: var(--ics-cyan); color: var(--ics-cyan); }
/* stats band at hero bottom */
.ics-hero__stats {
    position: relative;
    margin-top: 3.25rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.ics-hero__stat {
    padding: 1.5rem 1rem 1.75rem;
    text-align: center;
}
.ics-hero__stat + .ics-hero__stat { border-left: 1px solid rgba(255, 255, 255, .14); }
.ics-hero__num {
    font-family: var(--ics-mono);
    font-size: clamp(1.25rem, 2.6vw, 1.875rem);
    font-weight: 700;
    color: var(--ics-cyan);
    line-height: 1.1;
}
.ics-hero__label { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-top: .375rem; }
@media (max-width: 575.98px) {
    .ics-hero { padding-top: 3rem; }
    .ics-hero__stats { grid-template-columns: 1fr; }
    .ics-hero__stat + .ics-hero__stat { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
    .ics-hero__stat { padding: 1rem 0 1.125rem; }
}

/* ---- S2 category cards ---- */
.ics-cats { padding: 2.75rem 0 3rem; }
.ics-cats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .875rem;
}
@media (min-width: 992px) { .ics-cats__grid { grid-template-columns: repeat(7, 1fr); } }
.ics-cat {
    position: relative;
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--ics-line);
    border-top: 3px solid var(--ics-blue);
    border-radius: var(--ics-radius);
    padding: 1rem .875rem 1.125rem;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ics-cat:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(10, 30, 56, .1);
    border-top-color: var(--ics-cyan);
}
.ics-cat__icon { font-size: 1.375rem; color: var(--ics-blue); margin-bottom: .625rem; }
.ics-cat:hover .ics-cat__icon { color: var(--ics-cyan); }
.ics-cat__name { font-size: .8125rem; font-weight: 700; color: var(--ics-ink); line-height: 1.3; min-height: 2.4em; }
.ics-cat__num { font-family: var(--ics-mono); font-size: .6875rem; color: var(--ics-mute); margin-top: .5rem; }
.ics-cat__num b { color: var(--ics-blue); font-weight: 700; }
.ics-cats__all {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: .5rem;
}

/* ---- S3 process band ---- */
.ics-process { background: var(--ics-bg-soft); border-top: 1px solid var(--ics-line); border-bottom: 1px solid var(--ics-line); padding: 2.5rem 0; }
.ics-process__row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.ics-process__steps { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.ics-step { display: flex; gap: .875rem; align-items: flex-start; max-width: 240px; }
.ics-step__no {
    font-family: var(--ics-mono);
    font-size: 1.625rem; font-weight: 700; color: var(--ics-cyan);
    line-height: 1;
    border-bottom: 3px solid var(--ics-blue);
    padding-bottom: .125rem;
}
.ics-step__t { font-weight: 700; font-size: .875rem; color: var(--ics-ink); margin-bottom: .25rem; }
.ics-step__d { font-size: .8125rem; color: var(--ics-mute); line-height: 1.5; }

/* ---- S4 hot deals rail ---- */
.ics-sec { padding: 3rem 0; }
.ics-sec--soft { background: var(--ics-bg-soft); border-top: 1px solid var(--ics-line); border-bottom: 1px solid var(--ics-line); }
.ics-sec__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.375rem; }
.ics-sec__head-l { display: flex; align-items: center; gap: .875rem; }
.ics-sec__head-note { font-size: .8125rem; color: var(--ics-mute); margin: 0; }
.ics-rail-nav { display: flex; gap: .375rem; }
.ics-rail-btn {
    width: 36px; height: 36px;
    border: 1px solid var(--ics-line);
    background: #fff;
    border-radius: var(--ics-radius-btn);
    color: var(--ics-ink);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.ics-rail-btn:hover:not(:disabled) { border-color: var(--ics-blue); color: var(--ics-blue); }
.ics-rail-btn:disabled { opacity: .35; cursor: default; }
.ics-rail {
    display: flex; gap: .875rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .5rem;
    scrollbar-width: thin;
}
.ics-rail::-webkit-scrollbar { height: 6px; }
.ics-rail::-webkit-scrollbar-thumb { background: var(--ics-line); border-radius: 3px; }
.ics-prod-card {
    scroll-snap-align: start;
    flex: 0 0 212px;
    background: #fff;
    border: 1px solid var(--ics-line);
    border-radius: var(--ics-radius);
    padding: 1rem;
    display: flex; flex-direction: column;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ics-prod-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(10, 30, 56, .1); border-color: var(--ics-blue); }
.ics-prod-card__imgbox {
    background: #fff;
    border: 1px solid var(--ics-bg-soft);
    border-radius: var(--ics-radius);
    height: 108px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: .875rem;
}
.ics-prod-card__imgbox img { max-width: 88%; max-height: 88%; object-fit: contain; }
.ics-prod-card__mfr { font-size: .6875rem; color: var(--ics-mute); margin-bottom: .25rem; }
.ics-prod-card__pn {
    font-family: var(--ics-mono); font-size: .8125rem; font-weight: 700; color: var(--ics-ink);
    line-height: 1.35; min-height: 2.6em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: .5rem;
}
.ics-prod-card:hover .ics-prod-card__pn { color: var(--ics-blue); }
.ics-prod-card__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; }

/* ---- S5 new parts ---- */
.ics-newgrid { display: grid; grid-template-columns: 300px 1fr; gap: 1.5rem; align-items: stretch; }
@media (max-width: 991.98px) { .ics-newgrid { grid-template-columns: 1fr; } }
.ics-info-card {
    position: relative;
    overflow: hidden;
    background:
        /* fine dot matrix */
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .14) 1.2px, transparent 1.8px),
        /* circuit grid + solder joints */
        radial-gradient(circle 2.5px at 1px 1px, rgba(56, 189, 248, .38) 98%, transparent),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .055) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .055) 0 1px, transparent 1px 72px),
        /* glow + base gradient */
        radial-gradient(420px 260px at 90% -20%, rgba(56, 189, 248, .22), transparent 65%),
        linear-gradient(160deg, var(--ics-navy) 0%, var(--ics-navy-2) 100%);
    background-size: 22px 22px, 72px 72px, auto, auto, auto, auto;
    background-repeat: repeat, repeat, repeat, repeat, no-repeat, no-repeat;
    color: #fff;
    border-radius: var(--ics-radius);
    padding: 2rem 1.75rem;
    display: flex; flex-direction: column; justify-content: center;
}
/* concentric rings ornament, bottom-right */
.ics-info-card::before {
    content: "";
    position: absolute; right: -70px; bottom: -70px;
    width: 250px; height: 250px;
    background: repeating-radial-gradient(circle at center, rgba(56, 189, 248, .2) 0 1.5px, transparent 1.5px 22px);
    -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 72%);
    mask-image: radial-gradient(circle, #000 25%, transparent 72%);
    pointer-events: none;
}
/* diagonal light band, top-left */
.ics-info-card::after {
    content: "";
    position: absolute; top: -30%; bottom: -30%; left: -20%;
    width: 45%;
    background: linear-gradient(115deg, transparent, rgba(56, 189, 248, .1), transparent);
    transform: skewX(-14deg);
    pointer-events: none;
}
.ics-info-card > * { position: relative; z-index: 1; }
.ics-info-card .ics-tag { margin-bottom: .875rem; }
.ics-info-card__title { font-size: 1.375rem; font-weight: 800; line-height: 1.25; margin: 0 0 .625rem; }
.ics-info-card__desc { color: rgba(255, 255, 255, .72); font-size: .875rem; line-height: 1.65; margin-bottom: 1.5rem; }
/* new parts: compact card grid (4 x 2 on desktop) */
.ics-newcards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .875rem;
    align-content: start;
}
@media (max-width: 1199.98px) { .ics-newcards { grid-template-columns: repeat(2, 1fr); } }
.ics-newcards .ics-prod-card { flex: none; }
.ics-row__pn { font-family: var(--ics-mono); font-size: .8125rem; font-weight: 700; color: var(--ics-ink); text-decoration: none; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ics-row__pn:hover { color: var(--ics-blue); }
.ics-row__meta { font-size: .75rem; color: var(--ics-mute); margin-top: .125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- S6 manufacturers static grid ---- */
.ics-mfrgrid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .875rem;
}
@media (max-width: 1199.98px) { .ics-mfrgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767.98px) { .ics-mfrgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .ics-mfrgrid { grid-template-columns: repeat(2, 1fr); } }
.ics-mfrcard {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .625rem;
    background: #fff;
    border: 1px solid var(--ics-line);
    border-radius: var(--ics-radius);
    padding: 1.25rem .75rem 1rem;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ics-mfrcard:hover {
    transform: translateY(-3px);
    border-color: var(--ics-blue);
    box-shadow: 0 12px 28px rgba(10, 30, 56, .1);
}
.ics-mfrcard__logo {
    height: 44px;
    display: flex; align-items: center; justify-content: center;
    opacity: .85;
}
.ics-mfrcard:hover .ics-mfrcard__logo { opacity: 1; }
.ics-mfrcard__logo img { max-height: 44px; width: auto; max-width: 100%; object-fit: contain; }
.ics-mfrcard__nonlogo {
    font-family: var(--ics-mono);
    font-size: .8125rem; font-weight: 700; color: var(--ics-blue);
}
.ics-mfrcard__name {
    font-size: .75rem; font-weight: 600; color: var(--ics-mute);
    text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%;
}
.ics-mfrcard:hover .ics-mfrcard__name { color: var(--ics-blue); }
.ics-sec__more { font-size: .8125rem; color: var(--ics-mute); text-align: center; margin: 1.375rem 0 0; }

/* ---- S7 news ---- */
.ics-newsgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 767.98px) { .ics-newsgrid { grid-template-columns: 1fr; } }
.ics-news {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--ics-line);
    border-radius: var(--ics-radius);
    overflow: hidden;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ics-news:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(10, 30, 56, .1); border-color: var(--ics-blue); }
.ics-news__cover { position: relative; height: 168px; background: var(--ics-navy); overflow: hidden; }
.ics-news__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ics-news:hover .ics-news__cover img { transform: scale(1.05); }
.ics-news__date {
    position: absolute; left: 0; bottom: 0;
    background: #fff;
    border-top: 1px solid var(--ics-line); border-right: 1px solid var(--ics-line);
    border-radius: 0 var(--ics-radius) 0 0;
    font-family: var(--ics-mono);
    font-size: .6875rem; color: var(--ics-ink);
    padding: .3125rem .625rem;
}
.ics-news__body { padding: 1.125rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.ics-news__cat { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ics-blue); margin-bottom: .5rem; }
.ics-news__title {
    font-size: 1rem; font-weight: 700; color: var(--ics-ink); line-height: 1.4; margin: 0 0 .5rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ics-news:hover .ics-news__title { color: var(--ics-blue); }
.ics-news__desc {
    font-size: .8125rem; color: var(--ics-mute); line-height: 1.6; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ics-news__more { margin-top: auto; padding-top: .875rem; font-size: .8125rem; font-weight: 700; color: var(--ics-blue); }

/* ---- S8 popular parts chips ---- */
.ics-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ics-chip {
    font-family: var(--ics-mono);
    font-size: .75rem; font-weight: 600;
    color: var(--ics-ink);
    background: #fff;
    border: 1px solid var(--ics-line);
    border-radius: var(--ics-radius-btn);
    padding: .4375rem .75rem;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ics-chip:hover { border-color: var(--ics-blue); color: var(--ics-blue); background: #fff; }

/* ---- S9 bottom CTA — same layered language as hero: dot matrix + cyan glow ---- */
.ics-cta {
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 1.6px),
        radial-gradient(760px 340px at 88% 8%, rgba(56, 189, 248, .26), transparent 62%),
        radial-gradient(640px 320px at 0% 115%, rgba(21, 84, 158, .5), transparent 65%),
        linear-gradient(120deg, var(--ics-navy) 0%, var(--ics-navy-2) 68%, #12365F 100%);
    background-size: 26px 26px, auto, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat;
    color: #fff;
    padding: 3.5rem 0;
}
.ics-cta__row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.ics-cta__title { font-size: clamp(1.375rem, 2.6vw, 1.875rem); font-weight: 800; margin: 0 0 .375rem; letter-spacing: -0.01em; }
.ics-cta__title em { font-style: normal; color: var(--ics-cyan); }
.ics-cta__sub { color: rgba(255, 255, 255, .72); font-size: .9375rem; margin: 0; }
.ics-cta__meta {
    font-family: var(--ics-mono);
    font-size: .75rem;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .6);
    margin: .875rem 0 0;
}
.ics-cta__meta b { color: var(--ics-cyan); font-weight: 700; }
.ics-cta__btns { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */

.ics-foot-cta {
    background: linear-gradient(90deg, #2FB3EE 0%, var(--ics-cyan) 55%, #5FCFFA 100%);
    color: var(--ics-navy);
}
.ics-foot-cta__row {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding: 1.125rem 0;
    flex-wrap: wrap;
    font-size: .9375rem; font-weight: 700;
}
.ics-foot-cta__row i { color: var(--ics-navy); }
.ics-foot-cta a {
    color: var(--ics-navy);
    font-weight: 800;
    text-decoration: none;
    border-bottom: 2px solid var(--ics-navy);
    padding-bottom: 1px;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease;
}
.ics-foot-cta a:hover { color: #06263F; border-bottom-color: #06263F; }

.ics-foot {
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .04) 1px, transparent 1.6px),
        radial-gradient(1000px 420px at 100% 0%, rgba(56, 189, 248, .07), transparent 60%),
        linear-gradient(180deg, var(--ics-navy-2) 0%, var(--ics-navy) 55%);
    background-size: 26px 26px, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat;
    color: rgba(255, 255, 255, .78);
}
.ics-logo-footer { height: 40px; width: auto; max-width: 100%; }
.ics-foot__grid {
    display: grid;
    grid-template-columns: 1.35fr .8fr .8fr 1fr;
    gap: 2.5rem;
    padding: 3.25rem 0 2.5rem;
}
@media (max-width: 991.98px) { .ics-foot__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 575.98px) { .ics-foot__grid { grid-template-columns: 1fr; padding: 2.5rem 0 2rem; } }
.ics-foot__brand p { font-size: .8125rem; line-height: 1.7; margin: 0 0 1.25rem; }
.ics-foot__points { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; gap: 0; }
.ics-foot__points li { font-size: .8125rem; padding: .25rem 0; }
.ics-foot__points i { color: var(--ics-cyan); margin-right: .5rem; }
.ics-foot__h {
    font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: #fff; margin: 0 0 1rem;
    border-left: 2px solid var(--ics-cyan);
    padding-left: .625rem;
    line-height: 1.3;
}
.ics-foot__links { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; gap: 0; }
.ics-foot__links li { padding: .25rem 0; }
.ics-foot__links a { font-size: .8125rem; color: rgba(255, 255, 255, .78); text-decoration: none; }
.ics-foot__links a:hover { color: var(--ics-cyan); }
.ics-foot__contact { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; gap: 0; font-size: .8125rem; line-height: 1.65; }
.ics-foot__contact li { padding: .25rem 0; }
.ics-foot__contact i { color: var(--ics-cyan); width: 1.125rem; margin-right: .5rem; text-align: center; }
.ics-foot__contact a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.ics-foot__contact a:hover { color: var(--ics-cyan); }
.ics-foot-bottom { border-top: 1px solid rgba(255, 255, 255, .12); background: rgba(3, 10, 20, .4); }
.ics-foot-bottom__row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.25rem 0;
    flex-wrap: wrap;
    font-size: .75rem; color: rgba(255, 255, 255, .5);
}
.ics-foot-bottom__loc { font-family: var(--ics-mono); }
.ics-foot-bottom__loc i { color: var(--ics-cyan); margin-right: .375rem; }

/* floating buttons */
.ics-totop {
    position: fixed; right: 1.25rem; bottom: 5.5rem; z-index: 1040;
    display: none;
    width: 42px; height: 42px;
    border: 1px solid var(--ics-line); border-radius: var(--ics-radius);
    background: #fff; color: var(--ics-ink);
    align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(10, 30, 56, .12);
    cursor: pointer;
}
.ics-totop.show { display: inline-flex; }
.ics-totop:hover { border-color: var(--ics-blue); color: var(--ics-blue); }
.ics-mail-fab {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1040;
    width: 46px; height: 46px;
    border-radius: var(--ics-radius);
    background: var(--ics-blue); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.125rem;
    box-shadow: 0 10px 28px rgba(21, 84, 158, .35);
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}
.ics-mail-fab:hover { background: var(--ics-navy); color: #fff; transform: translateY(-2px); }

/* ============================================================
   CATEGORY PAGES — banner band, subcategory grid, page CTA
   ============================================================ */

/* ---- banner under header: 80-120px navy band, circuit texture, cyan glow ---- */
.ics-cathead {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(640px 240px at 88% -40%, rgba(56, 189, 248, .18), transparent 62%),
        linear-gradient(94deg, var(--ics-navy) 0%, var(--ics-navy-2) 60%, #14395F 100%);
    color: #fff;
}
.ics-cathead::before { /* circuit grid texture */
    content: "";
    position: absolute; inset: 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: 26px 26px;
    pointer-events: none;
}
.ics-cathead::after { /* cyan accent baseline */
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--ics-cyan) 0%, rgba(56, 189, 248, .35) 45%, transparent 85%);
}
.ics-cathead__deco { /* watermark category icon */
    position: absolute; right: 3%; top: 50%; transform: translateY(-50%);
    font-size: 6.5rem; line-height: 1;
    color: rgba(255, 255, 255, .05);
    pointer-events: none;
}
.ics-cathead__inner {
    position: relative; z-index: 1;
    min-height: 104px;
    display: flex; flex-direction: column; justify-content: center;
    gap: .375rem;
    padding: 1rem 0 1.125rem;
}
.ics-cathead__crumbs {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: .375rem;
    font-size: .75rem;
    color: rgba(255, 255, 255, .62);
}
.ics-cathead__crumbs a { color: rgba(255, 255, 255, .62); text-decoration: none; }
.ics-cathead__crumbs a:hover { color: var(--ics-cyan); }
.ics-cathead__crumbs .ics-cathead__sep { font-size: .5625rem; color: rgba(255, 255, 255, .3); }
.ics-cathead__crumbs [aria-current] {
    color: #fff; font-weight: 600;
    max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ics-cathead__title-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.ics-cathead__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: none;
    border-radius: var(--ics-radius);
    background: rgba(56, 189, 248, .14);
    border: 1px solid rgba(56, 189, 248, .35);
    color: var(--ics-cyan);
    font-size: 1.125rem;
}
.ics-cathead__title {
    margin: 0;
    font-size: 1.375rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2;
    color: #fff;
}
.ics-cathead__num {
    font-family: var(--ics-mono);
    font-size: .75rem; font-weight: 600;
    color: var(--ics-cyan);
    background: rgba(56, 189, 248, .12);
    border: 1px solid rgba(56, 189, 248, .3);
    border-radius: 999px;
    padding: .25rem .75rem;
    white-space: nowrap;
}
@media (max-width: 575.5px) {
    .ics-cathead__inner { min-height: 88px; padding: .875rem 0 1rem; }
    .ics-cathead__title { font-size: 1.125rem; }
    .ics-cathead__deco { display: none; }
}

/* ---- subcategory cards ---- */
.ics-subsec { padding: 2.5rem 0 2.75rem; }
.ics-subgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: .875rem;
}
.ics-subcat {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--ics-line);
    border-radius: var(--ics-radius);
    text-decoration: none;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ics-subcat:hover { transform: translateY(-3px); border-color: var(--ics-blue); box-shadow: 0 12px 28px rgba(10, 30, 56, .1); }
.ics-subcat__img {
    height: 104px;
    background: var(--ics-bg-soft);
    display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid var(--ics-line);
}
.ics-subcat__img img { max-width: 82%; max-height: 82%; object-fit: contain; }
.ics-subcat__body { padding: .75rem .875rem .875rem; }
.ics-subcat__name {
    font-size: .8125rem; font-weight: 700; color: var(--ics-ink); line-height: 1.35;
    min-height: 2.6em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ics-subcat:hover .ics-subcat__name { color: var(--ics-blue); }
.ics-subcat__num { display: block; font-family: var(--ics-mono); font-size: .6875rem; color: var(--ics-mute); margin-top: .375rem; }
.ics-subcat__num b { color: var(--ics-blue); font-weight: 700; }

/* ---- category description prose ---- */
.ics-prose { max-width: 860px; }
.ics-prose p { font-size: .875rem; line-height: 1.75; color: var(--ics-mute); margin-bottom: .875rem; }
.ics-prose a { color: var(--ics-blue); }
.ics-prose h2, .ics-prose h3 { font-size: 1rem; font-weight: 700; color: var(--ics-ink); margin: 1.25rem 0 .5rem; }

/* ---- category page CTA band ---- */
.ics-catcta {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(480px 200px at 92% 120%, rgba(56, 189, 248, .16), transparent 60%),
        linear-gradient(94deg, var(--ics-navy), var(--ics-navy-2));
    border-radius: var(--ics-radius);
    padding: 1.75rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.ics-catcta::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
}
.ics-catcta > * { position: relative; z-index: 1; }
.ics-catcta__title { margin: 0; font-size: 1.25rem; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.ics-catcta__title em { font-style: normal; color: var(--ics-cyan); }
.ics-catcta__sub { font-size: .8125rem; color: rgba(255, 255, 255, .66); margin: .375rem 0 0; }

/* ============================================================
   PRODUCT PAGES — all-categories index, list table, detail
   ============================================================ */

/* ---- /products all categories index ---- */
.ics-allsec { padding: 2.5rem 0 3rem; }
.ics-catnav { background: #fff; border: 1px solid var(--ics-line); border-radius: var(--ics-radius); overflow: hidden; }
.ics-catnav__title {
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--ics-line);
    background: var(--ics-bg-soft);
    font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ics-mute);
}
.ics-catnav__list { max-height: 620px; overflow-y: auto; }
.ics-catnav__item {
    display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--ics-bg-soft);
    text-decoration: none;
}
.ics-catnav__item:last-child { border-bottom: 0; }
.ics-catnav__name { font-size: .8125rem; color: var(--ics-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ics-catnav__num { font-family: var(--ics-mono); font-size: .6875rem; color: var(--ics-mute); flex: none; }
.ics-catnav__item:hover { background: var(--ics-bg-soft); }
.ics-catnav__item:hover .ics-catnav__name { color: var(--ics-blue); }

.ics-catblock { margin-bottom: 2.25rem; }
.ics-catblock:last-child { margin-bottom: 0; }
.ics-catblock__head {
    display: flex; align-items: baseline; gap: .625rem;
    margin-bottom: .75rem; padding-bottom: .5rem;
    border-bottom: 1px solid var(--ics-line);
}
.ics-catblock__name { font-size: 1rem; font-weight: 800; color: var(--ics-ink); text-decoration: none; letter-spacing: -.01em; }
.ics-catblock__name:hover { color: var(--ics-blue); }
.ics-catblock__num { font-family: var(--ics-mono); font-size: .6875rem; color: var(--ics-mute); }
.ics-catblock__more { margin-left: auto; font-size: .75rem; font-weight: 700; color: var(--ics-blue); text-decoration: none; white-space: nowrap; }
.ics-catblock__more:hover { color: var(--ics-blue-h); }
.ics-catblock__subs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .125rem .875rem; }
.ics-catsub {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .375rem .5rem;
    border-radius: var(--ics-radius-btn);
    text-decoration: none;
    min-width: 0;
}
.ics-catsub:hover { background: var(--ics-bg-soft); }
.ics-catsub__name { font-size: .8125rem; color: var(--ics-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ics-catsub:hover .ics-catsub__name { color: var(--ics-blue); }
.ics-catsub__num { font-family: var(--ics-mono); font-size: .6875rem; color: var(--ics-mute); flex: none; }

/* ---- small category: product table (overrides custom.css palette only) ---- */
.product-table-wrap { border: 1px solid var(--ics-line); border-radius: var(--ics-radius); }
.product-table { margin: 0; }
.product-table thead th {
    background: var(--ics-navy);
    /* theme.min.css: .table tbody th,.table thead th{color:var(--cz-table-th-color)!important}
       深色文字!important压制普通color → navy底深色字看不见, 必须同!important回写(icsmooth.css后加载同特异性取胜) */
    color: rgba(255, 255, 255, .85) !important;
    font-family: var(--ics-mono);
    font-size: .6875rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    border-bottom: 0;
    padding: .625rem .75rem;
    /* Bootstrap/Cartzilla 用 inset box-shadow 画单元格底色, 会盖在 background 之上, 必须一并清掉 */
    box-shadow: none;
}
.product-table thead .product-sticky-col { background: var(--ics-navy); box-shadow: none; }
.product-table td { padding: .625rem .75rem; border-color: var(--ics-bg-soft); box-shadow: none; }
.product-table tbody tr:hover td { background: var(--ics-bg-soft); }
.product-table .product-sticky-col { background: #fff; }
.product-table-wrap tbody tr:hover .product-sticky-col { background: var(--ics-bg-soft); }
.ics-tpn {
    font-family: var(--ics-mono); font-weight: 700; font-size: .8125rem;
    color: var(--ics-ink); text-decoration: none;
}
.ics-tpn:hover { color: var(--ics-blue); }
.ics-tqty { font-family: var(--ics-mono); font-size: .75rem; color: var(--ics-green); font-weight: 700; }
.ics-tqty--out { color: var(--ics-mute); font-weight: 500; }
.ics-tprice { font-family: var(--ics-mono); font-size: .75rem; color: var(--ics-ink); font-weight: 600; }
.ics-tattr { font-size: .75rem; color: var(--ics-mute); font-family: var(--ics-mono); }
.ics-tthumb {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--ics-line);
    border-radius: var(--ics-radius-btn);
    background: #fff;
    text-decoration: none;
    overflow: hidden;
}
.ics-tthumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.ics-tthumb--blank { background: var(--ics-bg-soft); color: var(--ics-mute); font-size: 1rem; }

/* ---- side panels (small category sidebar) ---- */
.ics-side {
    background: #fff;
    border: 1px solid var(--ics-line);
    border-radius: var(--ics-radius);
    padding: 1rem 1.125rem;
}
.ics-side + .ics-side { margin-top: 1rem; }
.ics-side__title {
    font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ics-mute); margin-bottom: .625rem;
}
.ics-side__list {
    display: flex; flex-direction: column; gap: .125rem; list-style: none; margin: 0; padding: 0;
    max-height: 320px; overflow-y: auto; overflow-x: hidden;
}
.ics-side__item {
    display: flex; justify-content: space-between; align-items: center; gap: .625rem;
    padding: .3125rem .5rem;
    border-radius: var(--ics-radius-btn);
    text-decoration: none;
    min-width: 0;
}
.ics-side__item:hover { background: var(--ics-bg-soft); }
.ics-side__name { font-size: .8125rem; color: var(--ics-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ics-side__item:hover .ics-side__name { color: var(--ics-blue); }
.ics-side__name.ics-is-active { color: var(--ics-blue); font-weight: 700; }
.ics-side__num { font-family: var(--ics-mono); font-size: .6875rem; color: var(--ics-mute); flex: none; }
.ics-sidecta {
    position: relative; overflow: hidden;
    background:
        radial-gradient(360px 160px at 90% 130%, rgba(56, 189, 248, .16), transparent 60%),
        linear-gradient(94deg, var(--ics-navy), var(--ics-navy-2));
    border-radius: var(--ics-radius);
    padding: 1.25rem 1rem;
    text-align: center;
}
.ics-sidecta__t { color: #fff; font-size: .875rem; font-weight: 700; margin-bottom: .75rem; }

/* ---- product detail ---- */
.ics-cathead--pn .ics-cathead__title { font-family: var(--ics-mono); letter-spacing: -.02em; font-size: 1.25rem; word-break: break-all; max-width: 100%; }
.ics-pd-img {
    background: #fff;
    border: 1px solid var(--ics-line);
    border-radius: var(--ics-radius);
    padding: 1.5rem;
    display: flex; align-items: center; justify-content: center;
}
.ics-pd-img img { max-height: 240px; object-fit: contain; }

/* ---- detail v2: 工程检视框 (四角刻度线 + mono 标注条) ---- */
.ics-viewer { position: relative; }
.ics-viewer__frame {
    position: relative;
    background:
        linear-gradient(var(--ics-blue), var(--ics-blue)) left 0 top 0 / 12px 2px no-repeat,
        linear-gradient(var(--ics-blue), var(--ics-blue)) left 0 top 0 / 2px 12px no-repeat,
        linear-gradient(var(--ics-blue), var(--ics-blue)) right 0 top 0 / 12px 2px no-repeat,
        linear-gradient(var(--ics-blue), var(--ics-blue)) right 0 top 0 / 2px 12px no-repeat,
        linear-gradient(var(--ics-blue), var(--ics-blue)) left 0 bottom 0 / 12px 2px no-repeat,
        linear-gradient(var(--ics-blue), var(--ics-blue)) left 0 bottom 0 / 2px 12px no-repeat,
        linear-gradient(var(--ics-blue), var(--ics-blue)) right 0 bottom 0 / 12px 2px no-repeat,
        linear-gradient(var(--ics-blue), var(--ics-blue)) right 0 bottom 0 / 2px 12px no-repeat,
        #fff;
    border: 1px solid var(--ics-line);
    border-radius: var(--ics-radius);
    padding: 2rem;
    display: flex; align-items: center; justify-content: center;
    min-height: 240px;
}
.ics-viewer__frame img { max-height: 240px; object-fit: contain; }
.ics-viewer__tag {
    display: flex; justify-content: space-between; gap: .75rem;
    margin-top: .625rem; padding-top: .5rem;
    border-top: 1px dashed var(--ics-line);
    font-family: var(--ics-mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ics-mute);
    overflow: hidden;
}
.ics-viewer__tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ics-pd-pn { font-family: var(--ics-mono); font-size: 1.5rem; font-weight: 800; color: var(--ics-ink); letter-spacing: -.02em; margin: 0; }
.ics-pd-mfr { font-size: .875rem; color: var(--ics-mute); }
.ics-pd-mfr a { color: var(--ics-blue); text-decoration: none; font-weight: 600; }
.ics-pd-desc { font-size: .9375rem; color: var(--ics-ink); line-height: 1.6; }
.ics-pd-sub { font-size: .8125rem; color: var(--ics-mute); line-height: 1.65; }
.ics-rfqcard { background: #fff; border: 1px solid var(--ics-line); border-radius: var(--ics-radius); padding: 1.25rem; }
.ics-rfqcard__t { font-size: .9375rem; font-weight: 800; color: var(--ics-ink); margin: 0 0 .875rem; }
.ics-input {
    width: 100%;
    border: 1px solid var(--ics-line);
    border-radius: var(--ics-radius-btn);
    padding: .5rem .75rem;
    font-size: .875rem; font-family: var(--ics-mono);
    color: var(--ics-ink);
}
.ics-input:focus { outline: none; border-color: var(--ics-blue); }
.ics-note { font-size: .6875rem; color: var(--ics-mute); text-align: center; margin: .625rem 0 0; }
.ics-pricelist { margin-top: 1rem; border: 1px solid var(--ics-line); border-radius: var(--ics-radius); overflow: hidden; }
.ics-pricelist__h {
    padding: .625rem .875rem;
    background: var(--ics-bg-soft);
    border-bottom: 1px solid var(--ics-line);
    font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ics-mute);
}
.ics-pricelist__row {
    display: flex; justify-content: space-between;
    padding: .4375rem .875rem;
    font-family: var(--ics-mono); font-size: .75rem; color: var(--ics-ink);
}
.ics-pricelist__row + .ics-pricelist__row { border-top: 1px solid var(--ics-bg-soft); }
.ics-pricelist__row b { color: var(--ics-blue); }

/* ---- detail v2: 询价操作台 (型号条 + 数量步进器 + 实时单价) ---- */
.ics-rfqcard__pn {
    display: inline-block;
    font-family: var(--ics-mono); font-size: .75rem; font-weight: 700; letter-spacing: .02em;
    color: var(--ics-mute);
    background: var(--ics-bg-soft);
    border: 1px solid var(--ics-line);
    border-radius: var(--ics-radius-btn);
    padding: .1875rem .5rem;
    margin-bottom: .75rem;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ics-stepper { display: flex; }
.ics-stepper__btn {
    width: 38px; flex: none;
    border: 1px solid var(--ics-line); background: var(--ics-bg-soft);
    color: var(--ics-ink); font-size: 1rem; line-height: 1;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.ics-stepper__btn:hover { border-color: var(--ics-blue); color: var(--ics-blue); background: #fff; }
.ics-stepper__btn:first-child { border-radius: var(--ics-radius-btn) 0 0 var(--ics-radius-btn); }
.ics-stepper__btn:last-child { border-radius: 0 var(--ics-radius-btn) var(--ics-radius-btn) 0; }
.ics-stepper__input { border-radius: 0; border-left: 0; border-right: 0; text-align: center; }
.ics-stepper__input::-webkit-outer-spin-button, .ics-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ics-stepper__input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.ics-liveline {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    margin-top: .625rem;
    background: var(--ics-bg-soft);
    border: 1px dashed var(--ics-line);
    border-radius: var(--ics-radius-btn);
    padding: .4375rem .625rem;
    font-family: var(--ics-mono); font-size: .6875rem; color: var(--ics-mute);
}
.ics-liveline b { color: var(--ics-blue); font-weight: 700; }
.ics-liveline__sep { width: 1px; height: 11px; background: var(--ics-line); }

/* ---- detail v2: 阶梯报价表 ---- */
.ics-tier { margin-top: 1rem; border: 1px solid var(--ics-line); border-radius: var(--ics-radius); overflow: hidden; background: #fff; }
.ics-tier__h {
    padding: .625rem .875rem;
    background: var(--ics-bg-soft);
    border-bottom: 1px solid var(--ics-line);
    font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ics-mute);
    display: flex; justify-content: space-between; align-items: center;
}
.ics-tier__h span { font-family: var(--ics-mono); font-size: .625rem; color: var(--ics-mute); letter-spacing: .06em; }
.ics-tier__table { width: 100%; border-collapse: collapse; }
.ics-tier__table td {
    padding: .4375rem .875rem;
    font-family: var(--ics-mono); font-size: .75rem;
    border-top: 1px solid var(--ics-bg-soft);
}
.ics-tier__table tr:first-child td { border-top: 0; }
.ics-tier__qty { color: var(--ics-ink); font-weight: 600; }
.ics-tier__price { text-align: right; color: var(--ics-blue); font-weight: 700; }
.ics-tier__save { text-align: right; color: var(--ics-mute); width: 30%; }
.ics-tier__row--best td { background: rgba(56, 189, 248, .07); }
.ics-tier__row--best .ics-tier__qty { box-shadow: inset 2px 0 0 var(--ics-cyan); }
.ics-tier__row--best .ics-tier__save b { color: var(--ics-cyan); font-weight: 700; }

/* ---- detail v2: 阶梯报价横排档位（overview 左栏底部） ---- */
.ics-tier--h { margin-top: 1.25rem; }
.ics-tier__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); }
.ics-tier__cell {
    padding: .5rem .25rem .4375rem;
    border-left: 1px solid var(--ics-bg-soft);
    display: flex; flex-direction: column; align-items: center; gap: .125rem;
    font-family: var(--ics-mono); text-align: center;
}
.ics-tier__cell:first-child { border-left: 0; }
.ics-tier__cell .ics-tier__qty { font-size: .6875rem; font-weight: 600; color: var(--ics-mute); }
.ics-tier__cell .ics-tier__price { font-size: .8125rem; color: var(--ics-blue); font-weight: 700; }
.ics-tier__cell .ics-tier__save { font-size: .625rem; color: var(--ics-mute); }
.ics-tier__cell--best { background: rgba(56, 189, 248, .07); box-shadow: inset 0 2px 0 var(--ics-cyan); }
.ics-tier__cell--best .ics-tier__save b { color: var(--ics-cyan); font-weight: 700; }
.ics-attrtable {
    width: 100%;
    border-collapse: separate; border-spacing: 0;
    border: 1px solid var(--ics-line);
    border-radius: var(--ics-radius);
    overflow: hidden;
    background: #fff;
}
.ics-attrtable th {
    text-align: left;
    font-family: var(--ics-mono); font-size: .75rem; font-weight: 600; color: var(--ics-mute);
    padding: .5rem .875rem;
    width: 32%;
    background: var(--ics-bg-soft);
    border-bottom: 1px solid var(--ics-line);
    vertical-align: top;
}
.ics-attrtable td {
    font-size: .8125rem; color: var(--ics-ink);
    padding: .5rem .875rem;
    border-bottom: 1px solid var(--ics-bg-soft);
}
.ics-attrtable tr:last-child th, .ics-attrtable tr:last-child td { border-bottom: 0; }
.ics-attrtable tr:hover th { background: #eef4fb; }
/* detail v2: datasheet 式双栏属性 */
.ics-attrgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; align-items: start; }
@media (max-width: 767.98px) { .ics-attrgrid { grid-template-columns: 1fr; } }
.ics-datatable {
    width: 100%;
    border-collapse: separate; border-spacing: 0;
    border: 1px solid var(--ics-line);
    border-radius: var(--ics-radius);
    overflow: hidden;
}
.ics-datatable th {
    background: var(--ics-navy);
    color: rgba(255, 255, 255, .85);
    font-family: var(--ics-mono); font-size: .6875rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    padding: .625rem .75rem;
    text-align: left;
}
.ics-datatable td {
    font-size: .8125rem; color: var(--ics-ink);
    padding: .625rem .75rem;
    border-top: 1px solid var(--ics-bg-soft);
    vertical-align: middle;
}
.ics-datatable tr:hover td { background: var(--ics-bg-soft); }
.ics-match {
    font-family: var(--ics-mono); font-size: .6875rem; font-weight: 700;
    border-radius: var(--ics-radius-btn);
    padding: .1875rem .5rem;
    white-space: nowrap;
}
.ics-match--hi { color: var(--ics-green); background: rgba(22, 163, 74, .1); }
.ics-match--mid { color: var(--ics-blue); background: rgba(21, 84, 158, .1); }
.ics-match--lo { color: var(--ics-mute); background: var(--ics-bg-soft); }
/* 产品网格固定最多 6 列(详情页/厂商页/新闻页相关产品共用), 断点降列 */
.ics-relgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; }
@media (max-width: 1199.98px) { .ics-relgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 991.98px) { .ics-relgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .ics-relgrid { grid-template-columns: repeat(2, 1fr); } }
.ics-relgrid .ics-prod-card { display: flex; }

/* ============================================================
   RFQ PAGE — editable parts table + quote form
   ============================================================ */

.ics-rfqtable { border: 1px solid var(--ics-line); border-radius: var(--ics-radius); background: #fff; }
.ics-rfqtable .table-responsive { border: 0; }
.ics-datatable--form td { padding: .375rem .5rem; vertical-align: middle; }
.ics-datatable--form tbody tr:hover td { background: var(--ics-bg-soft); }
.ics-tinput {
    width: 100%;
    border: 1px solid var(--ics-line);
    border-radius: var(--ics-radius-btn);
    background: #fff;
    padding: .3125rem .5rem;
    font-size: .8125rem;
    color: var(--ics-ink);
    min-width: 0;
}
.ics-tinput:focus { outline: none; border-color: var(--ics-blue); }
.ics-tinput[data-dataname="PartNumber"],
.ics-tinput[data-dataname="Quantity"],
.ics-tinput[data-dataname="UnitPrice"] { font-family: var(--ics-mono); }
.ics-tcur { display: flex; align-items: center; gap: .375rem; }
.ics-tcur > span { font-family: var(--ics-mono); font-size: .75rem; color: var(--ics-mute); flex: none; }
.ics-tcur .ics-tinput { flex: 1 1 auto; }
.ics-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: 1px solid var(--ics-line);
    border-radius: var(--ics-radius-btn);
    background: #fff;
    color: var(--ics-mute);
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.ics-iconbtn:hover { border-color: var(--ics-blue); color: var(--ics-blue); }
.ics-iconbtn--danger:hover { border-color: #dc3545; color: #dc3545; background: rgba(220, 53, 69, .05); }
.ics-btn--danger { background: transparent; border-color: rgba(220, 53, 69, .45); color: #dc3545; }
.ics-btn--danger:hover { background: rgba(220, 53, 69, .07); border-color: #dc3545; color: #dc3545; }
.ics-rfqsec {
    display: flex; align-items: flex-start; gap: .625rem;
    font-size: .75rem; color: var(--ics-mute); line-height: 1.5;
    margin-bottom: 1rem;
}
.ics-rfqsec i { color: var(--ics-green); font-size: 1rem; flex: none; }
/* bootstrap 校验兜底: ics-input 非 form-control, invalid-feedback 默认不显示 */
.ics-input.is-invalid, .ics-tinput.is-invalid { border-color: #dc3545; }
.was-validated .ics-input:invalid, .was-validated .ics-tinput:invalid { border-color: #dc3545; }
.was-validated .ics-input:invalid ~ .invalid-feedback, .was-validated .ics-tinput:invalid ~ .invalid-feedback { display: block; }

/* ============================================================
   MFR & NEWS PAGES
   ============================================================ */

/* ---- manufacturers index: search + alphabet tool bar ---- */
.ics-mfrtool { background: #fff; border-bottom: 1px solid var(--ics-line); padding: .875rem 0; }
.ics-mfrtool__row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.ics-mfrtool .ics-search { flex: 1 1 280px; max-width: 380px; }
.ics-alpha { display: flex; flex-wrap: wrap; gap: .25rem; }
.ics-alpha a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 .375rem;
    font-family: var(--ics-mono); font-size: .75rem; font-weight: 700;
    color: var(--ics-ink); text-decoration: none;
    border: 1px solid var(--ics-line);
    border-radius: var(--ics-radius-btn);
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.ics-alpha a:hover { border-color: var(--ics-blue); color: var(--ics-blue); background: var(--ics-bg-soft); }

/* ---- manufacturers index: letter groups ---- */
.ics-mfrgroup { display: flex; gap: 1.25rem; padding: 1rem 0; border-top: 1px solid var(--ics-line); }
.ics-mfrgroup:last-child { border-bottom: 1px solid var(--ics-line); }
.ics-mfrgroup__letter {
    flex: none; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ics-navy); color: #fff;
    font-family: var(--ics-mono); font-size: 1.125rem; font-weight: 700;
    border-radius: var(--ics-radius-btn);
}
.ics-mfrgroup__links { display: grid; grid-template-columns: repeat(2, 1fr); gap: .125rem .875rem; align-content: start; flex: 1 1 auto; min-width: 0; }
@media (max-width: 575.98px) { .ics-mfrgroup__links { grid-template-columns: 1fr; } }
.ics-mfrlink {
    display: block;
    padding: .3125rem .5rem;
    border-radius: var(--ics-radius-btn);
    font-size: .8125rem; color: var(--ics-ink); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}
.ics-mfrlink:hover { background: var(--ics-bg-soft); color: var(--ics-blue); }

/* ---- manufacturer detail: brand head ---- */
.ics-mfrhead { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.ics-mfrhead__logo {
    flex: none; width: 132px; height: 88px;
    background: #fff; border: 1px solid var(--ics-line);
    border-radius: var(--ics-radius);
    display: flex; align-items: center; justify-content: center;
    padding: .5rem;
}
.ics-mfrhead__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ics-mfrhead__body { flex: 1 1 260px; min-width: 0; }
.ics-mfrhead__name { font-size: 1.375rem; font-weight: 800; color: var(--ics-ink); margin: 0 0 .375rem; letter-spacing: -.01em; }
.ics-mfrhead__aka { font-size: .75rem; color: var(--ics-mute); font-family: var(--ics-mono); margin-bottom: .5rem; }
.ics-mfrhead__desc { font-size: .875rem; color: var(--ics-mute); line-height: 1.65; }

/* ---- manufacturer detail: category two-column grid ---- */
.ics-catgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; align-items: start; }
.ics-catgrid .ics-catblock { margin-bottom: 0; }
.ics-catgrid .ics-catblock__subs { grid-template-columns: 1fr; }
@media (max-width: 991.98px) { .ics-catgrid { grid-template-columns: 1fr; } }

/* ---- news index: featured two-column grid ---- */
.ics-newsgrid--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 767.98px) { .ics-newsgrid--two { grid-template-columns: 1fr; } }
.ics-chip--active { border-color: var(--ics-blue); color: var(--ics-blue); background: var(--ics-bg-soft); }

/* ---- news article ---- */
.ics-article__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1.125rem;
    font-family: var(--ics-mono); font-size: .75rem; color: var(--ics-mute);
    padding-bottom: .875rem; margin-bottom: 1rem;
    border-bottom: 1px solid var(--ics-line);
}
.ics-article__meta i { color: var(--ics-blue); margin-right: .375rem; }
.ics-article__meta a { color: var(--ics-blue); text-decoration: none; }
.ics-article__meta a:hover { text-decoration: underline; }
.ics-article__tags { margin-bottom: 1.125rem; }
.ics-article__cover {
    border: 1px solid var(--ics-line);
    border-radius: var(--ics-radius);
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: var(--ics-navy);
}
.ics-article__cover img { display: block; width: 100%; height: auto; }
.ics-article { font-size: .9375rem; line-height: 1.8; color: var(--ics-ink); }
.ics-article p { margin: 0 0 1rem; }
.ics-article h2, .ics-article h3, .ics-article h4 {
    font-size: 1.125rem; font-weight: 800; color: var(--ics-ink);
    margin: 1.75rem 0 .75rem; letter-spacing: -.01em;
}
.ics-article h3 { font-size: 1rem; }
.ics-article a { color: var(--ics-blue); }
.ics-article img { max-width: 100%; height: auto; border-radius: var(--ics-radius); }
.ics-article blockquote {
    margin: 1.25rem 0; padding: .75rem 1.25rem;
    border-left: 3px solid var(--ics-cyan);
    background: var(--ics-bg-soft);
    border-radius: 0 var(--ics-radius) var(--ics-radius) 0;
    color: var(--ics-mute); font-size: .875rem;
}
/* guard: Cartzilla 把 ol/ul 强制 flex 纵排, 文章列表必须显式还原 */
.ics-article ul, .ics-article ol {
    display: block;
    flex-direction: unset;
    padding-left: 1.5rem;
    margin: 0 0 1rem;
    list-style: disc;
}
.ics-article ol { list-style: decimal; }
.ics-article li { display: list-item; }
.ics-article table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: .8125rem; }
.ics-article table th, .ics-article table td { border: 1px solid var(--ics-line); padding: .375rem .625rem; text-align: left; }
.ics-article table th { background: var(--ics-bg-soft); font-weight: 700; }
.ics-article pre {
    background: var(--ics-navy); color: rgba(255, 255, 255, .88);
    border-radius: var(--ics-radius);
    padding: 1rem 1.25rem;
    font-family: var(--ics-mono); font-size: .8125rem;
    overflow-x: auto;
    margin: 0 0 1rem;
}

/* ---- news article: prev / next ---- */
.ics-pnnav { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; margin-top: 2rem; }
.ics-pnnav__a {
    display: flex; flex-direction: column; gap: .25rem;
    padding: .875rem 1rem;
    border: 1px solid var(--ics-line);
    border-radius: var(--ics-radius);
    text-decoration: none;
    transition: border-color .12s ease;
}
.ics-pnnav__a:hover { border-color: var(--ics-blue); }
.ics-pnnav__a--next { text-align: right; }
.ics-pnnav__k { font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ics-mute); }
.ics-pnnav__k i { color: var(--ics-blue); }
.ics-pnnav__t { font-size: .8125rem; font-weight: 600; color: var(--ics-ink); line-height: 1.4; }
.ics-pnnav__a:hover .ics-pnnav__t { color: var(--ics-blue); }
@media (max-width: 575.98px) { .ics-pnnav { grid-template-columns: 1fr; } }

/* ---- share row ---- */
.ics-share { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* ---- who we are: statement + company profile card ---- */
.ics-abouthero { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 991.98px) { .ics-abouthero { grid-template-columns: 1fr; } }
.ics-abouthero__title {
    font-size: clamp(1.625rem, 3vw, 2.25rem);
    font-weight: 800; color: var(--ics-ink);
    letter-spacing: -.02em; line-height: 1.15;
    margin: .875rem 0 1.125rem;
}
.ics-abouthero__title em { font-style: normal; color: var(--ics-blue); }
.ics-abouthero__main p { font-size: .875rem; line-height: 1.75; color: var(--ics-mute); margin-bottom: .875rem; }
.ics-profile { border: 1px solid var(--ics-line); border-radius: var(--ics-radius); background: #fff; overflow: hidden; }
.ics-profile__h {
    padding: .625rem 1rem;
    background: var(--ics-bg-soft);
    border-bottom: 1px solid var(--ics-line);
    font-family: var(--ics-mono); font-size: .6875rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ics-mute);
}
.ics-profile__row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .5625rem 1rem;
    border-bottom: 1px dashed var(--ics-line);
    font-size: .8125rem;
}
.ics-profile__row:last-child { border-bottom: 0; }
.ics-profile__k { color: var(--ics-mute); flex: none; }
.ics-profile__k i { color: var(--ics-blue); margin-right: .375rem; }
.ics-profile__v { font-family: var(--ics-mono); font-weight: 600; color: var(--ics-ink); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- navy stats band (dot matrix + cyan glow, same layered language as hero) ---- */
.ics-statsband {
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .06) 1px, transparent 1.6px),
        radial-gradient(760px 300px at 85% 0%, rgba(56, 189, 248, .14), transparent 62%),
        linear-gradient(120deg, var(--ics-navy) 0%, var(--ics-navy-2) 100%);
    background-size: 26px 26px, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat;
}
.ics-statsband__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ics-statsband__cell { padding: 1.875rem 1rem; text-align: center; }
.ics-statsband__cell + .ics-statsband__cell { border-left: 1px solid rgba(255, 255, 255, .14); }
.ics-statsband__num {
    font-family: var(--ics-mono);
    font-size: clamp(1.375rem, 2.8vw, 2rem);
    font-weight: 700; color: var(--ics-cyan); line-height: 1.1;
}
.ics-statsband__label {
    font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255, 255, 255, .55); margin-top: .375rem;
}
@media (max-width: 767.98px) {
    .ics-statsband__grid { grid-template-columns: 1fr 1fr; }
    .ics-statsband__cell:nth-child(odd) { border-left: 0; }
    .ics-statsband__cell:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .14); }
    .ics-statsband__cell { padding: 1.25rem .5rem; }
}

/* ---- capability cards (what we do / what we supply) ---- */
.ics-capgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .875rem; }
@media (max-width: 1199.98px) { .ics-capgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px) { .ics-capgrid { grid-template-columns: 1fr; } }
.ics-capgrid--supply { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1199.98px) { .ics-capgrid--supply { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px) { .ics-capgrid--supply { grid-template-columns: repeat(2, 1fr); } }
.ics-cap {
    background: #fff;
    border: 1px solid var(--ics-line);
    border-top: 3px solid var(--ics-blue);
    border-radius: var(--ics-radius);
    padding: 1.25rem;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ics-cap:hover { transform: translateY(-3px); border-top-color: var(--ics-cyan); box-shadow: 0 12px 28px rgba(10, 30, 56, .1); }
.ics-cap__icon { font-size: 1.375rem; color: var(--ics-blue); margin-bottom: .625rem; display: inline-block; }
.ics-cap:hover .ics-cap__icon { color: var(--ics-cyan); }
.ics-cap__t { font-size: .9375rem; font-weight: 700; color: var(--ics-ink); margin: 0 0 .375rem; letter-spacing: -.01em; }
.ics-cap__d { font-size: .8125rem; color: var(--ics-mute); line-height: 1.6; }
.ics-cap--mini { padding: 1rem .875rem; text-align: center; }
.ics-cap--mini .ics-cap__icon { margin-bottom: .375rem; }
.ics-cap--mini .ics-cap__t { font-size: .8125rem; margin: 0; }
.ics-brandline {
    font-family: var(--ics-mono);
    font-size: .75rem; color: var(--ics-mute);
    text-align: center; margin-top: 1.375rem; line-height: 1.8;
    letter-spacing: .01em;
}

/* ---- who we serve ---- */
.ics-serve { display: flex; flex-wrap: wrap; gap: .625rem; margin-bottom: 1.25rem; }
.ics-servechip {
    display: inline-flex; align-items: center; gap: .5rem;
    border: 1px solid var(--ics-line);
    border-radius: var(--ics-radius-btn);
    background: #fff;
    padding: .5625rem 1.125rem;
    font-size: .875rem; font-weight: 600; color: var(--ics-ink);
    transition: border-color .12s ease, color .12s ease;
}
.ics-servechip i { color: var(--ics-blue); }
.ics-servechip:hover { border-color: var(--ics-blue); color: var(--ics-blue); }
.ics-serveline {
    font-family: var(--ics-mono);
    font-size: .75rem; color: var(--ics-mute);
    letter-spacing: .03em;
}

/* FAQ accordion, tuned to ics palette (keeps bootstrap collapse behaviour) */
.ics-faq .accordion-item { border: 1px solid var(--ics-line); border-radius: var(--ics-radius); margin-bottom: .5rem; overflow: hidden; }
.ics-faq .accordion-button { font-size: .875rem; font-weight: 700; color: var(--ics-ink); padding: .875rem 1.125rem; }
.ics-faq .accordion-button:not(.collapsed) { color: var(--ics-blue); background: var(--ics-bg-soft); box-shadow: none; }
.ics-faq .accordion-button:focus { box-shadow: none; border-color: transparent; }
.ics-faq .accordion-body { font-size: .8125rem; color: var(--ics-mute); line-height: 1.65; padding: .875rem 1.125rem 1rem; }