/* ═════ زبانِ «مقطع» برای همه‌ی صفحه‌ها (نسخه‌ی ۴، ۱۸ آبان ۱۴۰۵) ═════
   همان زبانِ صفحه‌ی اول (home.css، slider.css) روی اجزای مشترکِ site.css و v2.css. آخرین سبکِ عمومی است و بعد از v2.css بار می‌شود.
   قاعده‌ها (docs/design-language.md، نسخه‌ی ۴):
   - سه میدان: سفیدِ صفحه، سنگیِ روشن (--kx-stone) برای سطح‌ها و ردیف‌ها، زردِ کاملِ برند (#FACC15) برای قابِ سرِ صفحه و کارِ اصلی؛ و نوارِ جوهری (#17130F) برای بازار.
   - هیچ خطِ جداکننده و سایه‌ای روی چیزِ ساکن؛ جدایی با پله‌ی رنگ و فاصله. خط فقط درونِ جدولِ واقعی و دورِ فیلدِ فرم. سایه فقط برای چیزِ شناور (منو، پیام، راهنمای نمودار).
   - دکمه‌ها قرصِ تخت، یک رنگ. نوشته‌ها وزیرمتن، پله‌های ۱۳/۱۵/۱۷/۲۰/۲۴/۳۲/۴۸.
   - هر کالا با مقطعش شناخته می‌شود (Services/SteelSections.cs)؛ سرِ صفحه‌های کالا و ابزار مقطعِ همان کالا را دارد. */

:root {
  --kx-ink: #17130F; --kx-ink-2: #4A4136; --kx-stone: #EFEEEB; --kx-hover: #F3E7B0; --kx-line: rgb(23 19 15 / .09);
  --kx-ease: cubic-bezier(.32, .72, 0, 1);
  --frame-bg: #FACC15; --frame-shadow: none;
}
:root[data-theme="dark"] { --kx-ink: #F5F3EE; --kx-ink-2: #C9C2B6; --kx-stone: #211D19; --kx-hover: #2E2818; --kx-line: rgb(255 255 255 / .08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kx-ink: #F5F3EE; --kx-ink-2: #C9C2B6; --kx-stone: #211D19; --kx-hover: #2E2818; --kx-line: rgb(255 255 255 / .08); } }
/* سایه‌ی چیزهای ساکن صفر؛ --e3 برای منو و پیام و راهنمای نمودار می‌ماند */
/* کارتِ سفیدِ لبه‌دار در هر جای سایت (ده‌ها کلاسِ جدا) با همین دو نشانه سنگیِ بی‌لبه می‌شود؛ فیلدها لبه‌شان را از --border-strong دارند */
:root:root:root { --e1: none; --e2: none; --glow: none; --card: var(--kx-stone); --border: transparent; }

/* ───── سربرگ: بی خط و بی شیشه؛ نوارِ بالا سنگی، سربرگ هم‌رنگِ صفحه، نوارِ قیمت جوهری ───── */
.topbar { border-bottom: 0; background: var(--kx-stone); }
.site-header { border-bottom: 0; background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
.hdr-sub { border-top: 0; }
.tape { border-bottom: 0; }
.tape-pause { border: 0; background: rgb(255 255 255 / .06); }
.dock { backdrop-filter: none; -webkit-backdrop-filter: none; background: #17130F; border: 0; }
.hdr .nav .nav-prices, .acct-btn, .hdr-search-go, .icon-btn { box-shadow: none; }

/* ───── دکمه‌ها: قرصِ تخت ───── */
.btn { --b-bg: var(--kx-stone); --b-bd: transparent; border-radius: 999px; box-shadow: none; }
.btn:hover { translate: none; box-shadow: none; --b-bg: var(--kx-hover); }
.btn:active { scale: .97; }
.btn-primary { --b-bg: var(--yellow-400); --b-fg: #17130F; box-shadow: none; }
.btn-primary:hover { --b-bg: var(--yellow-300); box-shadow: none; }
.btn-dark { --b-bg: #17130F; --b-fg: #F5F3EE; }
.btn-dark:hover { --b-bg: #2A2117; }
.btn-ghost { --b-bg: transparent; }
.btn-sm, .btn-lg { border-radius: 999px; }

/* ───── سطح‌ها: سنگیِ تخت به‌جای کارتِ سفیدِ لبه‌دار و سایه‌دار ───── */
:is(.card, .board, .tile, .step, .stat, .chart-card, .cat, .ncard, .hl-frame, .ps-btn, .faq details, .ab-member, .info, .wiz-sec, .side-stack > section) {
  border: 0 !important; box-shadow: none !important; background: var(--kx-stone);
  --border: var(--kx-line); --border-strong: rgb(23 19 15 / .16); --card: var(--bg); --muted: var(--bg);
}
:root[data-theme="dark"] :is(.card, .board, .tile, .step, .stat, .chart-card, .cat, .ncard, .hl-frame, .ps-btn, .faq details, .ab-member, .info, .wiz-sec) { --border-strong: rgb(255 255 255 / .16); }
:is(.card, .tile, .stat, .chart-card, .cat, .ncard, .hl-frame, .step, .ab-member) { border-radius: 24px; }
.board { border-radius: 24px; }
:is(.cat, .ncard, .value, .tile):hover { translate: none; box-shadow: none !important; }
.cat:hover, .ncard:hover { background: var(--kx-hover); }
.card.on-ink { background: #17130F; color: #F5F3EE; }
.faq details { border-radius: 18px; }
.faq details[open] { box-shadow: none !important; }
.faq summary .pm { background: var(--bg); }
.faq details[open] summary .pm { background: var(--yellow-400); color: #17130F; }
.board-head, .board-foot { border: 0; background: none; }
.board-foot { padding-top: 4px; }

/* جدولِ قیمت: سرستونِ ساده، ردیف‌ها با خطِ کم‌رنگِ داخلِ جدول (جدولِ واقعی)، رفتنِ نشانگر سنگیِ زرد */
table.ptable th { background: none; border-bottom: 1px solid var(--kx-line); }
table.ptable td { border-bottom: 1px solid var(--kx-line); }
@media (hover: hover) { table.ptable tbody tr:hover { background: var(--kx-hover); } }
table.ptable tr:hover .go { background: #17130F; color: var(--yellow-400); }

/* فیلد و گزینه‌ها: خط فقط دورِ فیلد، بی سایه */
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { box-shadow: none; border-radius: 14px; }
.seg, .kind-pick { border: 0; background: var(--kx-stone); border-radius: 999px; }
.seg .thumb { box-shadow: none; background: #17130F; border-radius: 999px; }
.seg.js button[aria-selected="true"], .seg.js button[aria-pressed="true"], .seg.js button[aria-checked="true"] { color: #F5F3EE; }
.seg:not(.js) button[aria-selected="true"], .seg:not(.js) button[aria-pressed="true"], .seg:not(.js) button[aria-checked="true"] { background: #17130F; color: #F5F3EE; box-shadow: none; border-radius: 999px; }
.seg button { border-radius: 999px; }
.search input { box-shadow: none; border: 0; background: var(--kx-stone); border-radius: 999px; }

/* کیکر (برچسبِ بالای تیتر) کنار رفت: آنچه می‌گفت در تیتر یا مسیر هست */
.page-hero .eyebrow, .phead .eyebrow, .sec-head .eyebrow { display: none; }

/* ───── سرِ صفحه‌ها: قابِ زردِ کاملِ برند، با مقطعِ کالا در گوشه ───── */
.page-hero.ph2 .wrap, .phead > .wrap {
  --muted: rgb(23 19 15 / .08); --card: rgb(23 19 15 / .08); --border: rgb(23 19 15 / .16); --border-strong: rgb(23 19 15 / .24);
  --fg-2: #3D3428; --fg-muted: #3D3428;
  --rise: #991B1B; --rise-soft: rgb(255 255 255 / .5); --fall: #14532D; --fall-soft: rgb(255 255 255 / .5);
}
.page-hero.ph2 .wrap::before, .phead > .wrap::before { box-shadow: none; }
.page-hero.ph2 p, .page-hero.ph2 .crumbs, .page-hero.ph2 .head-side, .page-hero.ph2 .price-side > span:first-child { color: #3D3428; }
.page-hero.ph2 .crumbs a, .phead .crumbs a { color: #17130F; }
.page-hero.ph2 h1, .phead h1 { color: #17130F; line-height: 1.25; text-wrap: balance; }
.page-hero.ph2 .btn-primary, .phead .btn-primary { --b-bg: #17130F; --b-fg: var(--yellow-400); }
.page-hero.ph2 .btn-primary:hover, .phead .btn-primary:hover { --b-bg: #2A2117; }
.page-hero.ph2 .btn:not(.btn-primary), .phead .btn:not(.btn-primary) { --b-bg: rgb(23 19 15 / .08); --b-fg: #17130F; --b-bd: transparent; }
.page-hero.ph2 .btn:not(.btn-primary):hover, .phead .btn:not(.btn-primary):hover { --b-bg: rgb(23 19 15 / .14); }
.page-hero.ph2 .badge { background: rgb(23 19 15 / .08); border: 0; color: #17130F; }
.page-hero.ph2 .ab-chips li { background: rgb(23 19 15 / .08); border: 0; color: #17130F; }

/* مقطعِ کالا در سرِ صفحه (Views/Shared/_HeroSection.cshtml) */
.ph-sx { margin: 0; width: clamp(150px, 15vw, 210px); justify-self: end; }
.ph-sx svg { display: block; width: 100%; height: auto; }
.ph-sx .sx-extrude { fill: #17130F; }
.ph-sx .sx-cut { fill: #C9C5BE; }
.ph-sx .sx-photo { filter: grayscale(1) contrast(1.18) brightness(.88); }
.page-hero.ph2 .head-side:has(> .ph-sx) { align-content: start; }
@media (max-width: 760px) {
  .page-hero.ph2 .wrap:has(.ph-sx) { padding-top: clamp(22px, 3vw, 36px); }
  .page-hero.ph2 .ph-sx { position: absolute; top: 18px; inset-inline-end: calc(var(--gutter) + 14px); width: 84px; }
  .page-hero.ph2 .wrap:has(.ph-sx) h1 { padding-inline-end: 92px; }
}

/* تیترِ سرِ صفحه درشت‌تر (نقطه‌ی کانونیِ صفحه‌ی اول همین تیتر و مقطع است) */
.page-hero.ph2 h1 { font-size: clamp(34px, 4.4vw, 60px); }
.page-hero.ph2:has(.price-side) h1 { font-size: clamp(32px, 3.6vw, 48px); }
@media (min-width: 761px) { .ph-sx { width: clamp(170px, 17vw, 250px); } }

/* ابزارها و یادداشت‌ها: سنگیِ تخت */
.px-bar { background: var(--kx-stone); border: 0; border-radius: 24px; }
.note { background: var(--kx-stone); border: 0; color: var(--kx-ink); }
.note .icon { color: var(--kx-ink); }
.icon-btn, table.ptable .add-btn, .px-table .add-btn { border: 0; background: var(--bg); }
.icon-btn:hover, table.ptable .add-btn:hover, .px-table .add-btn:hover { background: #17130F; color: var(--yellow-400); }
/* آیکونِ کوچک در مربعِ رنگی بالای کارت‌ها نشانه‌ی قالب است؛ تیتر خودش می‌گوید */
.hd-ic { display: none; }
.px-tool .icon { display: none; }
.px-tool { justify-content: space-between; }
.px-tool::after { content: "‹"; font-size: 24px; line-height: 1; color: var(--kx-ink-2); }
[dir="ltr"] .px-tool::after { content: "›"; }

/* پانویس: بی خط؛ نوارِ حقوقی یک پله تیره‌تر */
.ft2-info, .ft2-legal { border-top: 0; }
.ft2-legal { background: rgb(0 0 0 / .28); }

/* ورودِ بخش‌ها در همه‌ی صفحه‌ها (۱۷ و ۱۸ آبان): فرزندانِ [data-rv] پله‌پله بالا می‌آیند؛ امضای حرکت: «اکسترود»ِ مقطع‌ها از پشتِ شکل بیرون می‌آید، مثلِ شاخه‌ای که از قالب کشیده می‌شود.
   بی اسکریپت یا با حرکتِ کم، همه‌چیز از اول سرِ جایش است. */
@media (prefers-reduced-motion: no-preference) {
  .kx-motion [data-rv] > * { opacity: 0; translate: 0 18px; transition: opacity .7s var(--kx-ease), translate .7s var(--kx-ease); transition-delay: calc(var(--rv-i, 0) * 70ms); }
  .kx-motion [data-rv].rv-in > * { opacity: 1; translate: 0 0; }
  .kx-motion [data-rv] .sx-extrude { transform: translate(0, 0); transition: transform .9s var(--kx-ease); transition-delay: calc(var(--rv-i, 0) * 70ms + 180ms); }
  .kx-motion [data-rv].rv-in .sx-extrude { transform: translate(-6px, 7px); }
}

/* سرِ تابلوها: بی آیکون در مربعِ رنگی */
.board-head .cat-ic { display: none; }

/* عکس‌های کالا بیرون از مقطع هم همان درمان: سیاه‌وسفیدِ فولادی روی سنگی (زمینه‌ی کرمِ عکس‌ها با multiply در سنگ حل می‌شود) */
.pd-photo, .hp-img { background: var(--kx-stone); }
.pd-photo img, .hp-img img, .ft2-talk-art img { filter: grayscale(1) contrast(1.18) brightness(.92); mix-blend-mode: multiply; }
.ft2-talk-art img { background: none; }
.pd-photo figcaption { font-size: 13px; color: var(--kx-ink-2); }

/* نمادِ کالا = مقطعِ یک‌رنگ (SteelUi.ProductLine)؛ ظرف‌های قدیمیِ آیکونِ رنگی بی زمینه */
.sx-glyph { fill: currentColor; flex: none; }
.mega .m-ic, .board-head .cat-ic { background: none !important; box-shadow: none; color: var(--kx-ink); }
.ft2-cats .pline { color: var(--yellow-400); }

/* صفحه‌ی کالا: کاشی‌های فلیپِ قیمت تخت؛ برچسبِ «قیمتِ امروز» زیرِ عدد (نه بالای آن) و خوانا روی زرد */
.flap-tile { box-shadow: none; }
.page-hero.ph2 .price-side { align-content: start; }
.page-hero.ph2 .price-side > span:not(.side-chg) { order: 2; color: #3D3428; font-size: 15px; }
.page-hero.ph2 .price-side > .side-chg { order: 3; }
.page-hero.ph2 .side-chg, .page-hero.ph2 .side-chg span { color: #3D3428; }
/* نمودار: بی خطِ جداکننده؛ آمارِ زیرش خانه‌های سنگی */
.chart-card .ch-top { border-bottom: 0; }
.ch-stats { border-top: 0; gap: 6px; padding: 0 12px 12px; }
.ch-stats div, .ch-stats div:nth-child(n) { border: 0 !important; border-radius: 16px; background: var(--bg); }
/* ردیفِ گزینه‌ها (گروه‌ها، بازه‌ها) در صفحه‌ی باریک می‌شکند، نه کشویی */
@media (max-width: 900px) { .seg { flex-wrap: wrap; overflow: visible; border-radius: 24px; } }
@media (max-width: 760px) {
  .page-hero.ph2 h1 { font-size: clamp(28px, 7.4vw, 34px); }
  .page-hero.ph2 .ph-sx { width: 72px; }
  .page-hero.ph2 .wrap:has(.ph-sx) h1 { padding-inline-end: 80px; }
}

/* کیکرها همه‌جا کنار رفتند (کپسولِ بالای تیتر نشانه‌ی قالب است) */
.eyebrow, .ft2-kicker, .bp-kicker, .pz-kicker, .hs2-kicker, .mkh-kicker { display: none !important; }

/* گام‌ها: شماره‌ی درشت، بی آیکون در دایره‌ی رنگی (همان روندِ خریدِ صفحه‌ی اول) */
.step { padding: 24px 22px 22px; }
.step .n { position: static; display: block; width: auto; height: auto; margin: 0 0 10px; border-radius: 0; background: none; box-shadow: none !important; color: var(--kx-ink); font-size: 48px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.step img.sicon, .step img.cicon, .step > .sx-glyph { display: none; }
.step h3 { font-size: 20px; }
.dev-steps .n { box-shadow: none; color: var(--yellow-400); }

/* نوارهای تیره: گزینه‌ها روی جوهر، جاری زرد */
.on-ink .seg, .on-ink .kind-pick { background: rgb(255 255 255 / .08); }
.on-ink .seg .thumb { background: var(--yellow-400); }
.on-ink .seg.js button[aria-selected="true"], .on-ink .seg.js button[aria-pressed="true"], .on-ink .seg.js button[aria-checked="true"] { color: #17130F; }
.on-ink .seg button { color: #C9C2B6; }
/* تابلوی کوچکِ روی جوهر: ردیف‌ها با پله‌ی رنگ، بی خط */
.mini-board { border: 0; background: rgb(255 255 255 / .05); border-radius: 22px; }
.mini-board .mb-head, .mini-board a { border-bottom: 0; }
.mini-board .mb-head { font-size: 13px; }
.mini-board a:nth-child(even) { background: rgb(255 255 255 / .03); }
/* درباره: فهرستِ کارها و واقعیت‌ها بی خط */
.ab-do .ab-card { border-bottom: 0; }
.ab-facts > div { border-bottom: 0; }

/* تماس: کارت‌های اطلاعات بی آیکونِ دایره‌ای؛ برچسب و مقدار کافی است */
.info .ic { display: none; }

/* هیچ متنی زیرِ ۱۳ پیکسل */
.hc-t small { font-size: 13px; }

/* کرمِ کم‌رنگ (#FEFCE8) دیگر رنگِ پس‌زمینه نیست؛ همان سنگی */
:root:root:root { --accent-softer: var(--kx-stone); }

/* سفارش: کادرِ ورود سنگی و بی لبه؛ گزینه‌ها سفید روی سنگی، گزینه‌ی انتخاب‌شده زرد */
.order-gate { background: var(--kx-stone); border: 0 !important; border-radius: 24px; }
.og-text p { font-size: 15px; }
.opt { border: 0 !important; background: var(--bg); border-radius: 18px; }
.opt b { font-size: 15px; }
.opt small { font-size: 13px; }
.opt input { accent-color: #17130F; }
.opt:has(input:checked) { background: var(--yellow-400); color: #17130F; }
.opt:has(input:checked) small { color: #3D3428; }
.alert, .alert.info { border: 0; background: var(--kx-stone); color: var(--kx-ink); font-size: 15px; }
.wiz-h { font-size: 20px; }
.wiz-h .n { background: #17130F; color: var(--yellow-400); }
.wiz-h small { font-size: 13px; }
/* خلاصه‌ی سفارش: جمع بی خط، با پله‌ی فاصله */
.sum-card { box-shadow: none; }
.sum-total { border-top: 0; margin-top: 6px; padding: 14px 16px; border-radius: 16px; background: rgb(255 255 255 / .06); }
.sum-card [style*="dashed"], .sum-card hr { border: 0 !important; }
.sum-row { font-size: 15px; }
/* گام‌های سفارش در سرِ صفحه: قرص‌های جوهرِ ۸٪ */
.order-how li { border: 0; background: rgb(23 19 15 / .08); color: #17130F; font-size: 13px; }
.order-how b { background: #17130F; color: var(--yellow-400); font-size: 13px; }
.step:not(:last-child)::after { display: none; }
.cat .from { border-top: 0; }

/* رنگِ پیوند و تأکید روی روشن: زردِ تیره‌ی ۸۰۰ تا روی سنگی هم خوانا بماند (کنتراست ≥ ۴٫۵) */
:root:root:root:not([data-theme="dark"]) { --accent-text: #854D0E; }
@media (prefers-color-scheme: dark) { :root:root:root:not([data-theme="light"]) { --accent-text: var(--yellow-400); } }
/* دانشنامه: مقطعِ هر گروه سرِ کارتش، متن ۱۵ پیکسل به بالا */
.gd-sx { width: 92px; height: auto; flex: none; }
.gd-sx .sx-extrude, .sx .sx-extrude { fill: #17130F; }
:root[data-theme="dark"] .sx .sx-extrude { fill: #000; }
.sx .sx-cut { fill: #C9C5BE; }
.sx .sx-photo { filter: grayscale(1) contrast(1.18) brightness(.88); }
.gd-cat p { font-size: 16px; }
.gd-topics .chip { border: 0; background: var(--bg); font-size: 15px; }
.gd-topics .chip:hover { background: var(--kx-hover); }
body { font-size: 16px; }

/* تیترهای تکراریِ قالب پاراگراف شدند (سئو)؛ ظاهرشان همان */
.ft2-talk .ft2-h { margin: 12px 0 6px; font-size: clamp(20px, 2.1vw, 28px); font-weight: 900; line-height: 1.5; color: var(--stone-950); }
.dlg-head .dlg-title { margin: 0; font-size: 17px; font-weight: 800; }

/* فهرستِ هم‌گروه‌ها: متنِ پیوند فقط نامِ کالا (سئو: «میلگرد ۱۰ A3»، نه «… ۱۰۰ گران‌تر ۲۵٬۸۰۰»)؛ کلِ ردیف با ::after زدنی است */
.sib-list .sib-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; font-size: 15px; font-weight: 600; transition: background-color .15s; }
.sib-list .sib-row:hover { background: var(--bg); }
.sib-list .sib-row a { color: var(--fg); text-decoration: none; }
.sib-list .sib-row a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sib-list .sib-row a:focus-visible { outline: none; }
.sib-list .sib-row:has(a:focus-visible) { outline: 3px solid var(--kx-ink); outline-offset: 2px; }

/* ───── اندازه‌ی نوشته (بازرسیِ ۱۸ آبان): متنِ خواندنی ۱۵ به بالا، یادداشت ۱۳، هیچ چیز زیرِ ۱۳ ───── */
.chg .pct { font-size: inherit; }
main :is(small, dt, .code, .nw-tag, .sz, .amt) { font-size: max(13px, .85em); }
.field label, .link-arrow, .machine-cap, .mk2-pills a, .mk-topic span, .idx-name, .tabs a, .order-trust li, .hm b, .note, .seg button, .page-hero .head-side span, .check, .kq-links a, .ct-t span, .map-links .btn, .sib-list .sib-row { font-size: 15px; }
.nw-lead p { font-size: 16px; }
.crumbs { font-size: 13px; }
/* نوارِ تیره: گزینه‌ی جاری خودش زرد (نه لایه‌ی لغزانِ زیرش)، تا رنگِ متن و زمینه یکی باشند */
.on-ink .seg .thumb { display: none; }
.on-ink .seg.js button[aria-selected="true"], .on-ink .seg.js button[aria-pressed="true"], .on-ink .seg.js button[aria-checked="true"] { background: var(--yellow-400); color: #17130F; }
/* بازار: قاب‌های نمودار بی سایه */
.pz-frame, .mk2-chart { box-shadow: none !important; }
/* صفحه‌ی کالا روی گوشی: «آخرین به‌روزرسانی» بعد از قیمت، نه برچسبِ بالای آن */
@media (max-width: 760px) { .page-hero.ph2:has(.price-side) .wrap > div:first-child > p:not(.ph-answer) { order: 4; } }
/* تماس: شماره اول، برچسب زیرش */
.ct-t { display: grid; }
.ct-t small { order: 2; }
.ct-t b { order: 1; }
.ct-t > span { order: 3; }
/* موضوع‌های بازار: می‌شکنند، نه کشویی */
.mk-topics { flex-wrap: wrap; overflow: visible; }
/* سرِ ساده‌ی صفحه‌ها هم‌اندازه‌ی سرِ صفحه‌های داخلی */
.phead h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.25; }
@media (max-width: 760px) { .phead h1 { font-size: clamp(28px, 7.4vw, 34px); } }
/* سرِ صفحه با مقطع: متن وسطِ قاب، نه ته‌چین زیرِ جای خالی (متنِ کوتاهِ صفحه‌های ورود و پیگیری) */
@media (min-width: 761px) { .page-hero.ph2 .wrap:has(.ph-sx) { align-items: center; } }